/* ============================================================
   Journeys of Taste — Shared Stylesheet
   Elegant, editorial design system
   ============================================================ */

:root {
  /* Palette — refined plum, rose, sage & forest (WCAG AA checked) */
  --ink:        #241a20;   /* near-black plum — body text (15:1 on white) */
  --charcoal:   #3f3138;   /* secondary text (11:1 on white) */
  --stone:      #443a40;   /* muted small text (AA on taupe + white) */
  --sand:       #e6d5cc;   /* rosy champagne border */
  --linen:      #f3e8e3;   /* page background — rosy champagne (brand) */
  --cream:      #fdf8f5;   /* light rosy champagne — cards & light text */
  --gold:       #500828;   /* primary accent (plum) — decorative */
  --gold-dark:  #500828;   /* accent for links & small text (9:1 on white) */
  --forest:     #19382f;   /* deep green — footer & dark bands */
  --plum:       #500828;
  --rose:       #bfa8ae;   /* light accent — on dark only / backgrounds */
  --mauve:      #987e89;   /* decorative / large text only */
  --sage:       #617770;   /* secondary accent */
  --white:      #ffffff;

  --maxw: 1180px;
  --gap: clamp(1.5rem, 4vw, 4rem);

  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;   /* display / headings — Luxia stand-in (didone) */
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;        /* body copy + UI: the primary sans */

  --shadow: 0 18px 50px -20px rgba(36, 26, 32, 0.38);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--linen);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

p { margin: 0 0 1.1em; }

a { color: var(--gold-dark); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--ink); }

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

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold-dark);
  margin: 0 0 1.2rem;
}

.lead { font-size: 1.25rem; color: var(--charcoal); line-height: 1.6; }

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

section { padding: clamp(3.5rem, 9vw, 7rem) 0; }

/* Smooth anchor scrolling + gentle on-scroll reveals (motion-safe) */
html { scroll-padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .6, .2, 1), transform .7s cubic-bezier(.2, .6, .2, 1); }
  .reveal.in-view { opacity: 1; transform: none; }
}

.section-tight { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }

.center { text-align: center; }
.measure { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px;
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 2.1rem;
  border: 1px solid var(--gold-dark);
  background: var(--gold-dark);
  color: var(--cream);
  cursor: pointer;
  transition: all .28s ease;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--cream); }

.btn-light {
  background: transparent;
  border-color: rgba(252,250,246,0.7);
  color: var(--cream);
}
.btn-light:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.btn-cream { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.btn-cream:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--cream); }

/* ---------- Homepage: centered wording ---------- */
.home main { text-align: center; }
/* Moderate trim of home section spacing (keeps hero, quote band and CTA as-is) */
.home main > section:not(.hero):not(.quote-band):not(.cta-band):not(.creds-strip) { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.about main > section:not(.page-banner):not(.quote-band):not(.cta-band) { padding-top: clamp(2.4rem, 5.5vw, 4.5rem); padding-bottom: clamp(2.4rem, 5.5vw, 4.5rem); }
/* Collapse doubled padding where two same-background sections meet, so the gap reads as a single break */
.about main > section.bg-cream:not(.page-banner) + section.bg-cream { padding-top: 0; }
.about main > section#specialties { padding-top: 0; }
.home .hero h1, .home .hero p { margin-left: auto; margin-right: auto; }
.home .hero-actions { justify-content: center; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 232, 227, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sand);
  box-shadow: 0 2px 14px rgba(37, 8, 24, 0.05);
}
/* Light header: dark logo, dark nav text, plum pill CTA */
.site-header .brand-logo-light { display: none; }
.site-header .brand-logo-dark { display: block; }
.site-header .nav-links a { color: var(--charcoal); }
.site-header .nav-links a:hover, .site-header .nav-links a.active { color: var(--ink); }
.site-header .nav-toggle { color: var(--ink); }
.site-header .nav-cta { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--cream); }
.site-header .nav-links .btn { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--cream); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gap);
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--linen);
  line-height: 1;
  display: flex;
  align-items: center;
}
.brand-logo { height: 48px; width: auto; display: block; }
.brand span { display: block; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-dark); margin-top: 0.35rem; }

.nav-links { display: flex; gap: 2rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--linen);
}
.nav-links a:hover, .nav-links a.active { color: #ffffff; }
.nav-links .btn { background: var(--cream); border-color: var(--cream); color: var(--gold-dark); padding: 0.7rem 1.4rem; }
.nav-links .btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--cream); }

.nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--linen); }
.nav-cta { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  color: var(--cream);
  background:
    linear-gradient(180deg, rgba(37,8,24,0.45) 0%, rgba(37,8,24,0.60) 100%),
    linear-gradient(135deg, #500828 0%, #19382f 60%, #000000 100%);
  background-size: cover;
  background-position: center;
}
.hero .container { padding-top: 4rem; padding-bottom: 4rem; }
.hero h1 { color: var(--white); max-width: 24ch; }
.hero .eyebrow { color: #d8c2c8; }
.hero p { font-size: 1.3rem; max-width: 60ch; color: #f3eaed; }
.hero-actions { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* Page banner (interior pages) */
.page-banner {
  position: relative;
  color: var(--cream);
  text-align: center;
  padding: clamp(4rem, 11vw, 8rem) 0 clamp(3rem, 8vw, 6rem);
  background:
    linear-gradient(180deg, rgba(37,8,24,0.5), rgba(37,8,24,0.62)),
    linear-gradient(135deg, #500828 0%, #19382f 65%, #000000 100%);
}
.page-banner h1 { color: var(--white); }
.page-banner .eyebrow { color: #d8c2c8; }
.page-banner p { color: #f3eaed; max-width: 60ch; margin-left: auto; margin-right: auto; }
.page-banner.banner-video { overflow: hidden; min-height: 62vh; display: flex; align-items: center; }
.banner-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.banner-video-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(37, 8, 24, 0.55), rgba(37, 8, 24, 0.66)); }
.page-banner.banner-video .container { position: relative; z-index: 2; }
.page-banner.banner-video .eyebrow { font-size: 0.9rem; letter-spacing: 0.34em; }
.page-banner.banner-video p { font-size: clamp(1.2rem, 2vw, 1.5rem); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--cream);
  border: 1px solid var(--sand);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 2.2rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -22px rgba(37, 8, 24, 0.4); }
.card h3 { margin-bottom: 0.4rem; }
.card .num { font-family: var(--serif); font-size: 2.4rem; color: var(--gold); display: block; margin-bottom: 0.5rem; }

/* Why Book With Me — split intro + framed circular icons */
.why-split { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.why-intro { text-align: left; }
.why-intro .divider { margin-left: 0; }
.why-intro .btn { margin-top: 1.6rem; }
.why-features { display: flex; flex-direction: column; gap: 1.7rem; }
.why-feature { display: grid; grid-template-columns: 58px 1fr; gap: 1.2rem; align-items: start; text-align: left; }
.why-ring { width: 58px; height: 58px; min-width: 58px; border: 1.5px solid var(--forest); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--forest); }
.why-ring svg { width: 26px; height: 26px; }
.why-feature h3 { margin: 0 0 0.35rem; font-size: 1.2rem; }
.why-feature p { color: var(--charcoal); font-size: 0.98rem; margin: 0; }
@media (max-width: 880px) { .why-split { grid-template-columns: 1fr; } }

/* Home 'How I Can Help' — borderless divided columns (distinct from card grids) */
.tier-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.tier-plain { padding: 0.4rem 2rem; }
.tier-plain + .tier-plain { border-left: 1px solid var(--sand); }
.tier-plain .opt-label { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold-dark); display: block; margin-bottom: 0.6rem; }
.tier-plain h3 { margin-bottom: 0.6rem; }
.tier-plain p { color: var(--charcoal); font-size: 1rem; margin-bottom: 0; }
@media (max-width: 760px) {
  .tier-row { grid-template-columns: 1fr; }
  .tier-plain { padding: 1.6rem 0; }
  .tier-plain + .tier-plain { border-left: none; border-top: 1px solid var(--sand); }
}

/* Signature Journeys cards (image + text) */
.journey-card { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--sand); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.journey-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -22px rgba(37, 8, 24, 0.4); }
.journey-photo { height: 210px; background-size: cover; background-position: center; }
.journey-body { padding: 1.9rem 1.7rem 2.1rem; flex: 1; display: flex; flex-direction: column; }
.journey-body h3 { margin-bottom: 0.7rem; }
.journey-body p { font-size: 1rem; }
.journey-eg { margin: auto 0 0; padding-top: 1.1rem; border-top: 1px solid var(--sand); font-style: italic; font-size: 0.98rem; color: var(--gold-dark); }

/* Destination cards with image area */
.dest-card { overflow: hidden; background: var(--cream); border: 1px solid var(--sand); border-radius: 12px; box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease; }
.dest-card:hover { transform: translateY(-5px); box-shadow: 0 26px 60px -22px rgba(37, 8, 24, 0.4); }
.dest-card .photo {
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.dest-card .photo span {
  position: absolute; bottom: 0; left: 0; right: 0;
  font-family: var(--serif); color: var(--cream); font-size: 1.8rem;
  padding: 1.2rem 1.4rem;
  background: linear-gradient(0deg, rgba(37,8,24,0.82), transparent);
}
.dest-card .body { padding: 1.6rem 1.6rem 2rem; }

/* Photo placeholder palettes (swap with real photos) */
.ph-uk     { background: linear-gradient(135deg, #500828, #19382f); }
.ph-alaska { background: linear-gradient(135deg, #500828, #19382f); }
.ph-europe { background: linear-gradient(135deg, #500828, #19382f); }
.ph-africa { background: linear-gradient(135deg, #500828, #19382f); }
.ph-warm   { background: linear-gradient(135deg, #500828, #19382f); }


.fee-amount { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.6rem); color: var(--gold-dark); line-height: 1; margin: 0.4rem 0 0.4rem; }
.fee-line { font-size: 1.15rem; color: var(--charcoal); margin: 0.2rem 0 1.6rem; }
.fee-line strong { color: var(--gold-dark); font-weight: 600; }
.fee-note { font-size: 0.95rem; color: var(--stone); margin: 0 auto 1.6rem; }

/* ---------- Reasons (borderless, airy) ---------- */
.reason { text-align: center; padding: 0.4rem 1rem; }
.reason .num { font-family: var(--serif); font-size: 2.8rem; color: var(--gold); display: block; margin-bottom: 0.4rem; line-height: 1; }
.reason h3 { margin-bottom: 0.4rem; }
.reason p { color: var(--charcoal); }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split .media { min-height: 420px; border-radius: 2px; box-shadow: var(--shadow); }
.split.reverse .text { order: 2; }

/* ---------- Feature list ---------- */
.feature-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.feature-list li { padding: 0.32rem 0 0.32rem 1.3rem; position: relative; }
.feature-list li:before { content: "•"; position: absolute; left: 0.15rem; color: var(--gold); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 4.5rem; margin-bottom: 2.5rem; }
.step:before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -0.3rem;
  font-family: var(--serif); font-size: 2.4rem; color: var(--gold);
}


/* ---------- Process timeline ---------- */
.timeline { list-style: none; margin: 2.6rem 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.timeline::before { content: ""; position: absolute; top: 26px; left: 12.5%; right: 12.5%; height: 2px; background: var(--sand); z-index: 0; }
.tl-step { position: relative; text-align: center; padding: 0 0.4rem; }
.tl-marker { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--gold-dark); color: var(--cream); font-family: var(--serif); font-size: 1.25rem; margin-bottom: 1.2rem; box-shadow: 0 0 0 6px var(--linen); }
.tl-body h3 { font-size: 1.25rem; margin-bottom: 0.4rem; min-height: 2.8rem; display: flex; align-items: flex-end; justify-content: center; }
.tl-body p { color: var(--charcoal); font-size: 0.95rem; margin: 0; }
.bg-cream .tl-marker { box-shadow: 0 0 0 6px var(--cream); }

@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { display: none; }
  .tl-step { display: grid; grid-template-columns: 54px 1fr; gap: 1.2rem; text-align: left; padding: 0 0 2.2rem 0; align-items: start; }
  .tl-marker { margin-bottom: 0; box-shadow: none; }
  .tl-step::after { content: ""; position: absolute; left: 26px; top: 56px; bottom: 0; width: 2px; background: var(--sand); }
  .tl-step:last-child { padding-bottom: 0; }
  .tl-step:last-child::after { display: none; }
  .tl-body h3 { min-height: 0; display: block; }
}

/* ---------- Quote / testimonial ---------- */
.quote-band { background: var(--cream); color: var(--ink); text-align: center; padding: clamp(2.6rem, 5.5vw, 4rem) 0; border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); }
.quote-band .container { max-width: 780px; }
.quote-band blockquote {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  line-height: 1.35;
  margin: 0 0 0.8rem;
  color: var(--charcoal);
  font-style: italic;
}
.quote-band .stars { color: #b0872f; font-size: 1.05rem; letter-spacing: 0.3em; margin-top: 0.7rem; }
/* Image-backed testimonial (dark overlay, light text) */
.quote-band.quote-image { color: var(--cream); border-top: none; border-bottom: none; }
.quote-band.quote-image blockquote { color: var(--cream); }
.quote-band.quote-image cite { color: #e4d3ab; }
.quote-band.quote-image .stars { color: #e4d3ab; }
.quote-band cite { font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.74rem; color: var(--gold-dark); }

.testimonial { background: var(--cream); border: 1px solid var(--sand); padding: 2.2rem; }
.testimonial p { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--charcoal); }
.testimonial cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); }

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
  background:
    linear-gradient(180deg, rgba(37,8,24,0.5), rgba(37,8,24,0.62)),
    linear-gradient(135deg, #500828, #3a0a20 55%, #19382f);
  color: var(--white);
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: #f3eaed; }

/* Video-background CTA */
.cta-video { position: relative; overflow: hidden; }
.cta-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(40,18,26,0.45), rgba(34,14,22,0.72)); }
.cta-video .container { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .cta-video-bg { display: none; } }

/* ---------- Forms ---------- */
.form { background: var(--cream); border: 1px solid var(--sand); padding: clamp(1.8rem, 4vw, 3rem); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.4rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 1rem; font-family: var(--sans); font-size: 1rem;
  border: 1px solid #c9b7bf; background: var(--cream); color: var(--ink); border-radius: 2px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(87,46,64,0.18); }
.field textarea { min-height: 130px; resize: vertical; }

/* ---------- Contact info ---------- */
.contact-detail { margin-bottom: 1.6rem; }
.contact-extra { margin-top: clamp(2.6rem, 6vw, 4.5rem); }
.contact-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: start; gap: 1.6rem 3rem; margin: 1.5rem 0 0; }
.contact-grid .contact-detail { margin: 0; }
.contact-grid .contact-detail.full { flex-basis: 100%; }
.contact-grid .social-row { justify-content: center; }
.contact-detail .label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); display: block; margin-bottom: 0.2rem; }
.contact-detail .value { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { background: #500828; color: #d4c4cb; padding: 3rem 0 1.6rem; }
.site-footer a { color: #d4c4cb; }
.site-footer a:hover { color: var(--cream); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2rem; margin-bottom: 1.8rem; }
.site-footer .brand { color: var(--cream); }
.site-footer h4 { color: var(--cream); font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 0.6rem; font-size: 0.95rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 1.5rem; font-size: 0.8rem; color: #b6a3ab; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

.card-icon { width: 56px; height: 56px; min-width: 56px; border: 1.5px solid var(--forest); border-radius: 50%; display:inline-flex; align-items:center; justify-content:center; color: var(--forest); margin-bottom: 1rem; }
.card-icon svg { width:26px; height:26px; }

/* ---------- Service tiers ---------- */
.tier {
  background: var(--cream);
  border: 1px solid var(--sand);
  padding: 2.4rem 2.2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tier.featured { border-color: var(--gold); border-width: 1.5px; }

/* Flip cards (Services tiers) */
.tier-flip { background: transparent; border: 0; padding: 0; perspective: 1500px; cursor: pointer; font: inherit; text-align: left; }
.tier-flip:hover { transform: none; box-shadow: none; }
.tier-flip:hover .tier-face { box-shadow: 0 26px 60px -22px rgba(37, 8, 24, 0.4); }
.tier-flip:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; }
.tier-inner { display: grid; height: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.tier-flip.flipped .tier-inner { transform: rotateY(180deg); }
.tier-face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--cream); border: 1px solid var(--sand); border-radius: 12px; box-shadow: var(--shadow); padding: 2.4rem 1.85rem; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
.tier-grid { gap: 1.4rem; }
.tier-face > p { line-height: 1.62; }
.tier-back { transform: rotateY(180deg); }
.flip-eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.62rem; font-weight: 600; color: var(--gold-dark); margin: 0 0 0.4rem; }
.tier-back h4 { font-size: 1.2rem; margin: 0 0 0.7rem; }
.flip-hint { margin-top: auto; padding-top: 1.3rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold-dark); }
.tier-example { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.tier-example li { padding: 0.7rem 0; border-bottom: 1px solid var(--sand); font-size: 0.95rem; color: var(--charcoal); line-height: 1.5; }
.tier-example li:last-child { border-bottom: 0; }
.tier-example span { display: block; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-dark); margin-bottom: 0.2rem; }
@media (prefers-reduced-motion: reduce) { .tier-inner { transition: none; } }
.tier .tag {
  position: absolute; top: -0.85rem; left: 2.2rem;
  background: var(--gold-dark); color: var(--cream);
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.35rem 0.9rem;
}
.tier .tier-label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.6rem; }
.tier h3 { margin-bottom: 0.6rem; }
.tier p { color: var(--charcoal); min-height: 9em; }
.tier .feature-list { margin-top: 1.5rem; }

/* ---------- Portrait ---------- */
.portrait {
  width: 100%;
  border-radius: 2px;
  box-shadow: var(--shadow);
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.portrait-frame { position: relative; }
.portrait-sm { max-width: 320px; margin-left: auto; margin-right: auto; }
.portrait-frame:after {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  border: 1px solid var(--gold-dark); z-index: 0;
}

/* ---------- FAQ accordion ---------- */
.faq { max-width: 820px; margin: 2rem auto 0; }
.faq details {
  border-bottom: 1px solid var(--sand);
  padding: 0.4rem 0;
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.35rem; color: var(--ink);
  padding: 1rem 2.4rem 1rem 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after {
  content: "+"; position: absolute; right: 0.2rem; top: 0.9rem;
  font-family: var(--sans); font-size: 1.6rem; color: var(--gold-dark); transition: transform .25s ease;
}
.faq details[open] summary:after { content: "\2212"; }
.faq details p { padding: 0 0 1.2rem; color: var(--charcoal); margin: 0; }

/* ---------- Secondary newsletter band ---------- */
.newsletter {
  background: var(--cream);
  border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand);
}
.newsletter .inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.newsletter form { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; }
.newsletter input[type=email] {
  flex: 1 1 240px; padding: 0.9rem 1rem; border: 1px solid #c3aeb6; background: var(--cream);
  font-family: var(--sans); font-size: 1rem; border-radius: 2px; color: var(--ink);
}
.newsletter input[type=email]:focus { outline: none; border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(87,46,64,0.18); }
.newsletter .note { font-size: 0.8rem; color: var(--stone); margin-top: 0.8rem; }
.magazine-badge {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark);
}

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: 2px; box-shadow: var(--shadow); -ms-overflow-style: none; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  position: relative; min-width: 100%; scroll-snap-align: center;
  aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-repeat: no-repeat;
}
.carousel-slide .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.8rem; color: var(--white);
  background: linear-gradient(0deg, rgba(37,8,24,0.88), rgba(37,8,24,0.1) 80%, transparent);
  font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.25;
}
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(255,255,255,0.9); border: none; width: 46px; height: 46px; border-radius: 50%;
  cursor: pointer; font-size: 1.3rem; color: var(--ink); line-height: 1;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.carousel-btn:hover { background: var(--cream); }
.carousel-btn:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.carousel-prev { left: 14px; } .carousel-next { right: 14px; }
.carousel-dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.1rem; }
.carousel-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--sand); cursor: pointer; padding: 0; }
.carousel-dots button.active { background: var(--plum); }
.carousel-dots button:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }


/* ---------- Feature carousel (image + text) ---------- */
.carousel--feature .carousel-track { box-shadow: var(--shadow); border-radius: 2px; }
.carousel--feature .carousel-slide { min-width: 100%; scroll-snap-align: center; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: auto; background: var(--cream); }
.carousel--feature .feature-media { background-size: cover; background-position: center; min-height: 420px; }
.carousel--feature .feature-text { padding: clamp(2rem, 4vw, 3.6rem); display: flex; flex-direction: column; justify-content: center; }
.carousel--feature .feature-text h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 0.5rem; }
.carousel--feature .feature-text p:last-child { color: var(--charcoal); margin: 0; font-size: 1.08rem; }
@media (max-width: 720px) {
  .carousel--feature .carousel-slide { grid-template-columns: 1fr; }
  .carousel--feature .feature-media { min-height: 220px; }
}

/* ---------- Blog ---------- */
.post-card { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--sand); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -22px rgba(37, 8, 24, 0.4); }
.post-card .photo { height: 210px; background-size: cover; background-position: center; }
.post-card .body { padding: 1.7rem; display: flex; flex-direction: column; flex: 1; }
.post-card .meta { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.6rem; }
.post-card h3 { margin-bottom: 0.5rem; }
.post-card .excerpt { color: var(--charcoal); flex: 1; }
.post-card .more { margin-top: 1.1rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }

.post-body { max-width: 760px; margin: 0 auto; }
.post-body p { color: var(--charcoal); font-size: 1.08rem; }
.post-body h2 { margin-top: 2.4rem; }
.post-body h3 { margin-top: 1.8rem; margin-bottom: 0.2rem; }
.post-body ul { margin: 0.4rem 0 1.4rem; padding-left: 1.3rem; color: var(--charcoal); }
.post-body ul li { margin-bottom: 0.5rem; }
.post-body .lead { color: var(--ink); }
.post-body blockquote { border-left: 3px solid var(--gold); margin: 1.6rem 0; padding: 0.4rem 0 0.4rem 1.4rem; font-family: var(--serif); font-size: 1.4rem; color: var(--ink); }
.post-meta-bar { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 1.2rem; }
.post-hero-photo { width: 100%; aspect-ratio: 21 / 9; background-size: cover; background-position: center; border-radius: 2px; box-shadow: var(--shadow); margin-bottom: 2.5rem; }
.back-link { display: inline-block; margin-bottom: 1.5rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }

.newsletter h2 { color: var(--ink); }
.newsletter p { color: var(--charcoal); }
.newsletter .magazine-badge { color: var(--gold-dark); }
.newsletter .note { color: var(--stone); }
.newsletter .tier-label { color: var(--gold-dark); }


/* ---------- Social icons ---------- */
.social-row { display: flex; gap: 0.7rem; margin-top: 0.6rem; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--gold-dark); border: 1px solid currentColor; transition: all .25s ease; }
.social-icon:hover { color: #fff; background: var(--gold-dark); border-color: var(--gold-dark); }
.site-footer .social-icon { color: #d8c9cf; }
.site-footer .social-icon:hover { color: #19382f; background: #f2ece4; border-color: #f2ece4; }

.footer-badges-wrap { text-align: center; margin: 0.4rem auto 1.4rem; }
.footer-badges { display: inline-block; max-width: 620px; width: 100%; height: auto; }

/* ---------- Footer affiliation ---------- */
.affiliation {
  text-align: center; font-size: 0.76rem; letter-spacing: 0.03em;
  color: #cdbcc2; padding-top: 1rem; max-width: 780px; margin: 0.8rem auto 0; line-height: 1.6;
}
.affiliation .affiliation-line {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem;
  color: #e7dade; margin-bottom: 0.5rem;
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
.bg-cream { background: var(--cream); }
.bg-champagne { background: var(--linen); }
.bg-plum { background: var(--plum); }
.hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.footer-mag-note { font-size: 0.82rem; line-height: 1.5; margin: 0 0 0.85rem; color: #d8c9ce; }

/* Legal pages (Terms, Privacy): smaller, denser type */
.legal .page-banner h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.legal .page-banner p { font-size: 1rem; }
.legal .post-body { font-size: 0.92rem; line-height: 1.65; }
.legal .post-body .lead { font-size: 1rem; }
.legal .post-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin-top: 2.4rem; }
.legal .post-body h3 { font-size: clamp(1.02rem, 1.7vw, 1.18rem); margin-top: 1.5rem; }

/* ---------- Framed content panels (colored box floating on the page background) ---------- */
.panel { max-width: 940px; margin: 0 auto; border-radius: 20px; padding: clamp(2.2rem, 5vw, 4rem); box-shadow: var(--shadow); }
.panel-plum { background: linear-gradient(135deg, #500828, #3a061d); color: var(--cream); }
.panel-plum .eyebrow { color: #e0c4cc; }
.panel-plum h2, .panel-plum h3 { color: #fbf5ef; }
.panel-plum p { color: #ece0e2; }
.panel-plum .divider { background: rgba(255, 255, 255, 0.4); }
.panel-plum .form { background: transparent; border: none; padding: 0; }
.panel-plum .field label { color: #ecd9df; }
.panel-plum .field input, .panel-plum .field select, .panel-plum .field textarea { background: var(--cream); border-color: rgba(255, 255, 255, 0.4); }
.panel-plum .btn { background: var(--cream); border-color: var(--cream); color: var(--gold-dark); }
.panel-plum .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.panel-plum .why-ring { border-color: rgba(231, 215, 170, 0.7); color: #ecd9ad; }
.panel-plum .why-feature p { color: #e6d8da; }
.panel-plum .btn-outline { background: transparent; border-color: rgba(252, 250, 246, 0.7); color: var(--cream); }
.panel-plum .btn-outline:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.panel-plum .timeline::before { background: rgba(255, 255, 255, 0.26); }
.panel-plum .tl-marker { background: var(--cream); color: #500828; box-shadow: 0 0 0 6px #500828; }
.panel-plum .tl-body h3 { color: #fbf5ef; }
.panel-plum .tl-body p { color: #e6d8da; }
.panel-plum .tl-step::after { background: rgba(255, 255, 255, 0.24); }
.panel-plum .hv-item .vn-icon { color: #ecd9ad; border-color: rgba(231, 215, 170, 0.7); }
.panel-plum .hv-heart { color: #ecd9ad; }
.panel-plum .hv-item p { color: #e6d8da; }
.panel-soft { background: var(--cream); color: var(--ink); border: 1px solid var(--sand); }
.panel-wide { max-width: 1080px; }
.bg-sage { background: var(--cream); }
.bg-sand { background: var(--sand); }
.divider { width: 60px; height: 2px; background: var(--gold); margin: 1.5rem 0; border: 0; }
.center .divider { margin-left: auto; margin-right: auto; }


/* ---------- Advisor Advantage scroller ---------- */
.adv-scroll { position: relative; margin-top: 2rem; }
.adv-track { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.3rem 0.2rem 1rem; -ms-overflow-style: none; scrollbar-width: none; }
.adv-track::-webkit-scrollbar { display: none; }
.adv-card { flex: 0 0 clamp(260px, 78%, 330px); scroll-snap-align: start; background: var(--cream); border: 1px solid var(--sand); border-radius: 12px; box-shadow: 0 20px 45px -24px rgba(0, 0, 0, 0.55); padding: 2rem 1.9rem; }
.adv-card h3 { margin-bottom: 0.5rem; }
.adv-card p { color: var(--charcoal); margin: 0; }
.adv-arrow { position: absolute; top: 46%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--gold-dark); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; }
.adv-arrow:hover { background: var(--ink); }
.adv-arrow:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.adv-prev { left: -12px; } .adv-next { right: -12px; }
.adv-hint-mobile { display: none; }
@media (max-width: 600px) { .adv-arrow { display: none; } .adv-hint-desktop { display: none; } .adv-hint-mobile { display: inline; } }


/* ---------- Showcase grid ---------- */
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.showcase-tile { position: relative; display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center; border-radius: 2px; overflow: hidden; box-shadow: var(--shadow); }
.showcase-tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.2rem; color: var(--white); font-family: var(--serif); font-size: 1.35rem; z-index: 1; background: linear-gradient(0deg, rgba(37,8,24,0.85), rgba(37,8,24,0.08) 72%, transparent); }
.showcase-tile::after { content: ""; position: absolute; inset: 0; background: rgba(37,8,24,0); transition: background .3s ease; }
.showcase-tile:hover::after { background: rgba(37,8,24,0.18); }
@media (max-width: 760px) { .showcase-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .showcase-grid { grid-template-columns: 1fr; } }


/* ---------- Maroon feature section (dark) ---------- */
.bg-maroon { background: #500828; color: #ece0e2; padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.bg-maroon h2 { color: #fbf5ef; }
.bg-maroon .eyebrow { color: #e0c4cc; }
.bg-maroon p { color: #ece0e2; }
.bg-maroon .divider { background: #c9a9b2; }
.bg-maroon .timeline::before { background: rgba(255,255,255,0.28); }
.bg-maroon .tl-marker { background: var(--cream); color: #500828; box-shadow: 0 0 0 6px #500828; }
.bg-maroon .tl-body h3 { color: #fbf5ef; }
.bg-maroon .tl-body p { color: #e6d8da; }
.bg-maroon .tl-step::after { background: rgba(255,255,255,0.24); }

/* Forest-green section (e.g. The Advisor Advantage) */
.bg-forest { background: #500828; }
.bg-forest h2 { color: #fbf7ef; }
.bg-forest .measure .eyebrow { color: #e4d3ab; }
.bg-forest .measure p { color: #e9e2d6; }
.bg-forest .divider { background: rgba(231,215,170,0.55); }


/* ---------- Photo carousel (home showcase) ---------- */
.photo-card { position: relative; display: block; flex: 0 0 clamp(240px, 30%, 360px); scroll-snap-align: start; aspect-ratio: 4 / 3; background-size: cover; background-position: center; border-radius: 2px; overflow: hidden; box-shadow: var(--shadow); }
.photo-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.8rem 1rem; color: var(--white); font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; z-index: 1; background: linear-gradient(0deg, rgba(37,8,24,0.85), rgba(37,8,24,0.08) 72%, transparent); }
.photo-card::after { content: ""; position: absolute; inset: 0; background: rgba(37,8,24,0); transition: background .3s ease; }
.photo-card:hover::after { background: rgba(37,8,24,0.06); }


/* ---------- Core values: heart at the core ---------- */
.values-heartgrid { display: grid; grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "v1 heart v3" "v2 heart v4" "v5 v5 v5";
  gap: 2.4rem 3rem; align-items: start; max-width: 980px; margin: 2.6rem auto 0; }
.hv-heart { grid-area: heart; justify-self: center; align-self: center; color: var(--gold-dark); width: clamp(80px, 9vw, 116px); }
.hv-heart svg { display: block; }
.hv-item .vn-icon { color: var(--gold-dark); width: 62px; height: 62px; border: 1.5px solid var(--gold-dark); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.7rem; }
.hv-item .vn-icon svg { width: 28px; height: 28px; }
.hv-item h3 { font-size: 1.15rem; margin: 0 0 0.35rem; }
.hv-item p { font-size: 0.95rem; color: var(--charcoal); margin: 0; }
.hv-1 { grid-area: v1; text-align: right; } .hv-2 { grid-area: v2; text-align: right; }
.hv-3 { grid-area: v3; text-align: left; } .hv-4 { grid-area: v4; text-align: left; }
.hv-5 { grid-area: v5; text-align: center; max-width: 560px; margin: 0.5rem auto 0; }
@media (max-width: 820px) {
  .values-heartgrid { grid-template-columns: 1fr; grid-template-areas: "v1" "v2" "v3" "v4" "v5" "heart"; gap: 1.7rem; }
  .hv-1, .hv-2, .hv-3, .hv-4, .hv-5 { text-align: center; max-width: 520px; margin: 0 auto; }
  .hv-heart { width: 70px; margin-top: 0.6rem; }
}

/* ---------- Footer signup ---------- */
.footer-signup { display:flex; gap:2rem; align-items:center; justify-content:space-between; flex-wrap:wrap; padding-bottom:2.4rem; margin-bottom:2.4rem; border-bottom:1px solid rgba(255,255,255,0.14); }
.footer-signup h4 { color:var(--white); font-family:var(--sans); font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:0.5rem; }
.footer-signup > div p { color:#d4c4cb; margin:0; font-size:0.92rem; max-width:46ch; }
.footer-form .newsletter-fields { display:flex; flex-direction:column; gap:0.5rem; align-items:stretch; }
.footer-form input[type=email] { padding:0.8rem 1rem; border:1px solid rgba(255,255,255,0.3); background:rgba(253,250,243,0.97); color:var(--ink); border-radius:2px; min-width:240px; font-family:var(--sans); font-size:0.95rem; }
.footer-form input[type=email]:focus { outline:none; border-color:#f2ece4; box-shadow:0 0 0 3px rgba(242,236,228,0.2); }
.footer-form .btn { align-self:flex-start; padding:0.55rem 1.3rem; white-space:nowrap; }
.footer-form .newsletter-status { color:#e7dade; font-family:var(--serif); font-size:1rem; margin-top:0.4rem; }

/* ---------- Footer legal links ---------- */
.footer-legal { display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; }
.footer-legal a { font-size:0.8rem; color:#b6a3ab; }
.footer-legal a:hover { color:#fff; }

/* ---------- Cookie bar ---------- */
.cookie-bar { position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:200; max-width:760px; margin:0 auto; background:#19382f; color:#f2ece4; border:1px solid rgba(255,255,255,0.2); border-radius:4px; padding:1rem 1.3rem; display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap:wrap; box-shadow:0 12px 40px rgba(0,0,0,0.35); }
.cookie-bar p { margin:0; font-size:0.86rem; }
.cookie-bar a { color:#e7d9dd; text-decoration:underline; }
.cookie-bar .btn { padding:0.55rem 1.4rem; }

@media (min-width: 992px) { .nowrap-lg { white-space: nowrap; } }
@media (min-width: 992px) { .home .hero h1.nowrap-lg { max-width: none; font-size: clamp(2.8rem, 4vw, 3.6rem); } }

@media (min-width: 600px) { .nowrap { white-space: nowrap; } }
.balance { text-wrap: balance; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: #500828; border-bottom: 1px solid rgba(255,255,255,0.18);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-links.open { max-height: 480px; }
  .nav-links li { border-top: 1px solid rgba(255,255,255,0.18); }
  .nav-links a { display: block; padding: 1rem var(--gap); }
  .site-header .nav-links a { color: var(--linen); }
  .nav-links .btn { margin: 0.8rem var(--gap); text-align: center; }
  .nav-toggle { display: block; }
  .nav-cta { display: inline-block; margin-left: auto; margin-right: 0.7rem; background: var(--cream); border-color: var(--cream); color: var(--gold-dark); padding: 0.5rem 0.8rem; font-size: 0.62rem; letter-spacing: 0.08em; white-space: nowrap; }
  .nav-cta:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--cream); }
  .nav-links .btn { display: none; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .tier p { min-height: 0; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .text { order: 0; }
  .split .media { min-height: 280px; }
  .who-media { background-position: center bottom !important; }
  .newsletter .inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Tablet: center the lone 3rd item when a 3-item grid wraps to 2 + 1 */
@media (min-width: 561px) and (max-width: 880px) {
  .grid-3 > :nth-child(3):last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 2rem) / 2); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { text-align: center; }
  /* Magazine signup: stack field + button full-width so nothing overflows */
  .newsletter-form input[type=email] { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .newsletter-form .btn { width: 100%; text-align: center; }
  .magazine-cover { flex: 0 0 92px !important; width: 92px !important; }
}

/* Exit-intent E-Magazine (IFO) modal */
.ifo-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(20,10,16,0.62); display: flex; align-items: center; justify-content: center; padding: 1.2rem; animation: ifoFade .25s ease; }
@keyframes ifoFade { from { opacity: 0; } to { opacity: 1; } }
.ifo-modal { position: relative; background: var(--cream); max-width: 460px; width: 100%; padding: 2.7rem 2.2rem 2.1rem; border-radius: 3px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); text-align: center; }
.ifo-close { position: absolute; top: 0.6rem; right: 0.9rem; background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--stone); cursor: pointer; }
.ifo-close:hover { color: var(--ink); }
.ifo-eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.68rem; font-weight: 600; color: var(--gold-dark); margin: 0 0 0.7rem; }
.ifo-title { margin: 0 0 0.7rem; }
.ifo-copy { font-size: 0.98rem; color: var(--charcoal); margin: 0 0 1.4rem; }
.ifo-fields { display: flex; flex-direction: column; gap: 0.7rem; }
.ifo-fields input { padding: 0.9rem 1rem; border: 1px solid #c3aeb6; background: var(--cream); font-family: var(--sans); font-size: 1rem; border-radius: 2px; color: var(--ink); width: 100%; }
.ifo-fields input::placeholder { color: #9a9088; opacity: 1; }
.ifo-fields .btn { width: 100%; cursor: pointer; }
.ifo-error { margin: 0.6rem 0 0; font-size: 0.85rem; color: #a3122b; }
.ifo-nothanks { display: inline-block; margin-top: 0.9rem; background: none; border: none; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--stone); text-decoration: underline; cursor: pointer; }
.ifo-nothanks:hover { color: var(--ink); }
.ifo-status { font-family: var(--serif); font-size: 1.25rem; color: var(--gold-dark); margin: 0.4rem 0 0; }

/* Editorial polish: italic accent words + centered eyebrow hairlines */
h1 em, h2 em { font-style: italic; font-weight: 400; }
.center > .eyebrow { display: inline-flex; align-items: center; gap: 0.85rem; }
.center > .eyebrow::before, .center > .eyebrow::after { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.45; }

/* Left-aligned eyebrows: single leading hairline */
.text > .eyebrow { display: inline-flex; align-items: center; gap: 0.85rem; }
.text > .eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.45; }

/* Affiliations lockup (within Why Book With Me) */
.why-creds { margin: clamp(2rem, 4.5vw, 3.2rem) auto 0; text-align: center; }
.creds-lockup { max-width: 520px; width: 100%; height: auto; margin: 0 auto; display: block; }
