/*
 * The Coaching Sanctuary v4.0 — Shared Page Styles
 * Loaded on all non-homepage pages via functions.php
 * Replaces the inline <style> blocks in 79 templates.
 *
 * Covers: page heroes, prose sections, offer cards, splits,
 * credentials grids, testimonial strips, CTAs, internal nav,
 * lists, FAQ, booking layout, fade animations.
 *
 * Templates only need to add truly unique structural CSS.
 * All design tokens come from style.css — never redefined here.
 */

/* ═══════════════════════════════════════════════════════════
   1. PAGE HERO — used by coaching, work-with-me, start-here,
      my-story, and most other content pages
   ═══════════════════════════════════════════════════════════ */
.page-hero {
  position:   relative;
  text-align: center;
  padding:    clamp(6rem, 12vw, 10rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--gold-border);
  overflow:   hidden;
}

/* Watermark — each template sets content via .page-hero::before { content: 'WORD'; } */
.page-hero::before {
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  font-family:   var(--font-display);
  font-size:     clamp(4rem, 18vw, 14rem);
  font-weight:   700;
  letter-spacing: .3em;
  color:         rgba(201,168,76,.035);
  pointer-events: none;
  user-select:   none;
  white-space:   nowrap;
  z-index:       0;
}

.page-hero > * { position: relative; z-index: 1; }

.page-hero h1 {
  font-family:   var(--font-display);
  font-size:     clamp(2.2rem, 5vw, 4rem);
  font-weight:   300;
  line-height:   1.1;
  letter-spacing: -.02em;
  color:         var(--text-primary);
  max-width:     820px;
  margin-inline: auto;
  margin-bottom: 1.25rem;
}

.page-hero h1 em {
  font-style: italic;
  color:      var(--gold-light);
  display:    block;
}

.page-hero .hero-sub,
.page-hero .subtitle,
.page-hero .subheadline {
  font-family:   var(--font-display);
  font-size:     clamp(1rem, 1.6vw, 1.2rem);
  font-style:    italic;
  line-height:   1.9;
  color:         var(--text-muted);
  max-width:     600px;
  margin-inline: auto;
  margin-bottom: 1rem;
}

.page-hero .hero-sub:last-child,
.page-hero .subtitle:last-child,
.page-hero .subheadline:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   2. PAGE PROSE SECTION — max-width content blocks
   ═══════════════════════════════════════════════════════════ */
.page-section {
  max-width:     var(--content-w);
  margin-inline: auto;
  padding:       clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 3rem);
  border-bottom: 1px solid rgba(201,168,76,.08);
}
.page-section:last-of-type { border-bottom: none; }

/* Full-width section with alt background */
.page-section-alt {
  background:    var(--ink-soft);
  border-top:    1px solid var(--gold-border);
  border-bottom: 1px solid var(--gold-border);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.page-section-alt .section-inner {
  max-width:     var(--content-w);
  margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════
   3. PAGE TYPOGRAPHY — headings, body, links inside pages
   ═══════════════════════════════════════════════════════════ */
.page-h2 {
  font-family:   var(--font-display);
  font-size:     clamp(1.4rem, 2.5vw, 2rem);
  font-weight:   400;
  line-height:   1.25;
  color:         var(--gold);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  position:      relative;
}
.page-h2::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0;
  width:      44px;
  height:     1px;
  background: var(--gold);
  opacity:    .55;
}

.page-h3 {
  font-family: var(--font-display);
  font-size:   1.15rem;
  font-weight: 400;
  color:       var(--text-primary);
  margin:      2rem 0 .6rem;
}

.page-body p {
  font-family:   var(--font-display);
  font-size:     clamp(1rem, 1.5vw, 1.08rem);
  line-height:   1.95;
  color:         var(--text-secondary);
  margin-bottom: 1.4rem;
}
.page-body p:last-child { margin-bottom: 0; }

.page-body a {
  color:           var(--gold-light);
  text-decoration: none;
  border-bottom:   1px solid rgba(201,168,76,.3);
  transition:      color var(--dur-fast), border-color var(--dur-fast);
}
.page-body a:hover { color: var(--gold); border-color: var(--gold); }

/* Pull-quote style paragraph */
.page-body .pullquote,
.page-pullquote {
  border-left: 2px solid var(--gold);
  padding:     1.25rem 0 1.25rem 2rem;
  margin:      2rem 0;
  font-family: var(--font-display);
  font-size:   clamp(1rem, 1.6vw, 1.15rem);
  font-style:  italic;
  color:       var(--gold-pale);
  line-height: 1.9;
}

/* ═══════════════════════════════════════════════════════════
   4. PAGE LISTS
   ═══════════════════════════════════════════════════════════ */
.page-list {
  list-style:     none;
  padding:        0;
  margin:         1.5rem 0;
  display:        flex;
  flex-direction: column;
  gap:            .75rem;
}

.page-list li {
  padding-left: 1.6rem;
  position:     relative;
  font-family:  var(--font-display);
  font-size:    1rem;
  line-height:  1.75;
  color:        var(--text-secondary);
}

.page-list li::before {
  content:   '◆';
  position:  absolute;
  left:      0;
  top:       .38rem;
  color:     var(--gold);
  font-size: .38rem;
  line-height: 1;
}

.page-list li strong { color: var(--text-primary); font-weight: 600; }

/* Check variant */
.page-list--check li::before { content: '✓'; font-size: .65rem; top: .2rem; }

/* Italic/em variant */
.page-list--em li { font-style: italic; color: var(--text-primary); }
.page-list--em li::before { content: '—'; font-size: .8rem; top: .15rem; }

/* 2-col grid variant */
.page-list--grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            var(--gold-border);
  border:                1px solid var(--gold-border);
  margin:                1.5rem 0;
}
.page-list--grid li {
  background:   var(--ink-mid);
  padding:      1.25rem 1.5rem;
  padding-left: 1.5rem;
}
.page-list--grid li::before { display: none; }

/* Card-tile variant */
.page-list--tiles {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            var(--gold-border);
  border:                1px solid var(--gold-border);
  margin:                2rem 0;
}
.page-list--tiles li {
  background:   var(--ink-mid);
  padding:      1.5rem 1.75rem;
  padding-left: 1.75rem;
}
.page-list--tiles li::before { display: none; }
.page-list--tiles li::after {
  content:    '';
  display:    block;
  width:      30px;
  height:     1px;
  background: var(--gold);
  margin-top: 1rem;
  opacity:    .45;
}

/* ═══════════════════════════════════════════════════════════
   5. OFFER / PRICING CARDS
   ═══════════════════════════════════════════════════════════ */
.page-offers-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1px;
  background:            var(--gold-border);
  border:                1px solid var(--gold-border);
  margin-top:            2rem;
}

.page-offer {
  background:     var(--ink-mid);
  padding:        2.25rem 2rem;
  position:       relative;
  overflow:       hidden;
  transition:     background var(--dur-base);
  display:        flex;
  flex-direction: column;
}
.page-offer:hover { background: var(--ink-raised); }
.page-offer::before {
  content:          '';
  position:         absolute;
  top: 0; left: 0; right: 0;
  height:           2px;
  background:       linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform .45s var(--ease);
}
.page-offer:hover::before { transform: scaleX(1); }

.page-offer-num {
  font-family:    var(--font-caps);
  font-size:      .5rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color:          var(--gold);
  opacity:        .45;
  margin-bottom:  .875rem;
  display:        block;
}

.page-offer h3 {
  font-family:   var(--font-caps);
  font-size:     .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:         var(--gold);
  margin-bottom: .5rem;
}

.page-offer-desc {
  font-family: var(--font-display);
  font-size:   .96rem;
  font-style:  italic;
  line-height: 1.8;
  color:       var(--text-secondary);
  flex:        1;
  margin-bottom: 1.25rem;
}

.page-offer-price {
  font-family:   var(--font-display);
  font-size:     2rem;
  font-weight:   300;
  color:         var(--text-primary);
  line-height:   1;
  margin-bottom: .2rem;
}
.page-offer-price span {
  font-size:   .85rem;
  color:       var(--text-muted);
  font-family: var(--font-body);
  font-weight: 300;
}

.page-offer-note {
  font-family:    var(--font-caps);
  font-size:      .52rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--gold);
  opacity:        .6;
  display:        block;
}

/* ═══════════════════════════════════════════════════════════
   6. SPLIT LAYOUT — text + blockquote side-by-side
   ═══════════════════════════════════════════════════════════ */
.page-split {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            var(--gold-border);
  border:                1px solid var(--gold-border);
  max-width:             var(--max-w);
  margin-inline:         auto;
}

.page-split-main {
  background: var(--ink-mid);
  padding:    clamp(2.5rem, 5vw, 4rem);
}

.page-split-aside {
  background:  var(--ink-panel);
  padding:     clamp(2.5rem, 5vw, 4rem);
  display:     flex;
  align-items: center;
}

.page-split-aside blockquote {
  border-left:  2px solid var(--gold-border);
  padding-left: 2rem;
  margin:       0;
  font-family:  var(--font-display);
  font-size:    clamp(1rem, 1.8vw, 1.2rem);
  font-style:   italic;
  line-height:  1.85;
  color:        var(--text-primary);
}

.page-split-aside cite {
  display:        block;
  margin-top:     1.25rem;
  font-family:    var(--font-caps);
  font-size:      .52rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--gold);
  opacity:        .65;
  font-style:     normal;
}

/* ═══════════════════════════════════════════════════════════
   7. SOCIAL PROOF / TESTIMONIAL STRIP
   ═══════════════════════════════════════════════════════════ */
.page-proof {
  background: var(--ink-soft);
  border-top:    1px solid var(--gold-border);
  border-bottom: 1px solid var(--gold-border);
  padding:       clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem);
  text-align:    center;
}

.page-proof-inner {
  max-width:     680px;
  margin-inline: auto;
}

.page-proof blockquote {
  font-family:   var(--font-display);
  font-size:     clamp(1.1rem, 2vw, 1.4rem);
  font-style:    italic;
  font-weight:   300;
  color:         var(--text-primary);
  line-height:   1.75;
  margin-bottom: 1rem;
  border:        none;
  padding:       0;
}

.page-proof cite {
  font-family:    var(--font-caps);
  font-size:      .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--gold);
  opacity:        .65;
  font-style:     normal;
}

/* ═══════════════════════════════════════════════════════════
   8. CREDENTIALS GRID
   ═══════════════════════════════════════════════════════════ */
.credentials-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1px;
  background:            var(--gold-border);
  border:                1px solid var(--gold-border);
  max-width:             var(--max-w);
  margin-inline:         auto;
}

.credentials-block {
  background:  var(--ink-mid);
  padding:     2.25rem 2rem;
  position:    relative;
  overflow:    hidden;
  transition:  background var(--dur-base);
}
.credentials-block:hover { background: var(--ink-raised); }
.credentials-block::before {
  content:          '';
  position:         absolute;
  top: 0; left: 0; right: 0;
  height:           2px;
  background:       linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform .45s var(--ease);
}
.credentials-block:hover::before { transform: scaleX(1); }

.credentials-block h3 {
  font-family:   var(--font-display);
  font-size:     1.05rem;
  font-weight:   400;
  color:         var(--text-primary);
  margin-bottom: .875rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid var(--gold-dim);
}

.credentials-block ul {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            .6rem;
}

.credentials-block ul li {
  font-family:  var(--font-display);
  font-size:    .92rem;
  line-height:  1.65;
  color:        var(--text-secondary);
  padding-left: 1.3rem;
  position:     relative;
}
.credentials-block ul li::before {
  content:   '◆';
  position:  absolute;
  left:      0;
  top:       .35rem;
  color:     var(--gold);
  font-size: .38rem;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   9. FAQ
   ═══════════════════════════════════════════════════════════ */
.page-faq-q {
  font-family:   var(--font-display);
  font-size:     1.08rem;
  font-weight:   400;
  color:         var(--gold-light);
  margin:        2.5rem 0 .5rem;
  padding-left:  1rem;
  border-left:   2px solid var(--gold);
}
.page-faq-q:first-of-type { margin-top: .5rem; }

.page-faq-a {
  font-family:  var(--font-display);
  font-size:    1rem;
  line-height:  1.85;
  color:        var(--text-secondary);
  padding-left: 1rem;
  border-left:  1px solid rgba(201,168,76,.15);
  margin:       0 0 .5rem;
}

/* ═══════════════════════════════════════════════════════════
   10. CTA SECTION — final page CTA
   ═══════════════════════════════════════════════════════════ */
.page-cta {
  text-align:  center;
  padding:     clamp(4rem, 9vw, 7rem) clamp(1.25rem, 5vw, 3rem);
  background:  var(--ink-mid);
  border-top:  1px solid var(--gold-border);
  position:    relative;
  overflow:    hidden;
}
.page-cta::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* Watermark — template sets content: 'WORD' */
.page-cta::after {
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  font-family:   var(--font-display);
  font-size:     clamp(4rem, 14vw, 10rem);
  font-weight:   700;
  letter-spacing: .3em;
  color:         rgba(201,168,76,.025);
  white-space:   nowrap;
  pointer-events: none;
  user-select:   none;
}

.page-cta-inner {
  max-width:     620px;
  margin-inline: auto;
  position:      relative;
  z-index:       1;
}

.page-cta h2 {
  font-family:   var(--font-display);
  font-size:     clamp(1.6rem, 3vw, 2.5rem);
  font-weight:   300;
  color:         var(--text-primary);
  margin-bottom: .875rem;
  line-height:   1.2;
}

.page-cta p {
  font-family:   var(--font-display);
  font-size:     1rem;
  font-style:    italic;
  color:         var(--text-muted);
  max-width:     50ch;
  margin-inline: auto;
  margin-bottom: 2rem;
  line-height:   1.9;
}

.page-cta .avail {
  display:        block;
  font-family:    var(--font-caps);
  font-size:      .55rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--gold);
  opacity:        .6;
  margin-top:     1rem;
}

/* ═══════════════════════════════════════════════════════════
   11. INTERNAL LINKS NAV
   ═══════════════════════════════════════════════════════════ */
.page-internal-nav {
  text-align:  center;
  padding:     2.5rem clamp(1.25rem, 5vw, 3rem);
  background:  var(--ink);
  border-top:  1px solid rgba(201,168,76,.08);
  font-family: var(--font-caps);
  font-size:   .6rem;
  letter-spacing: .12em;
  line-height: 2.6;
}

.page-internal-nav a {
  color:           var(--text-muted);
  text-decoration: none;
  text-transform:  uppercase;
  transition:      color var(--dur-fast);
}
.page-internal-nav a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   12. BOOKING PAGE — specific to page-book-a-session
   ═══════════════════════════════════════════════════════════ */
.booking-hero-inner {
  max-width:             1100px;
  margin-inline:         auto;
  display:               grid;
  grid-template-columns: 1fr 1.1fr;
  gap:                   clamp(2.5rem, 5vw, 5rem);
  align-items:           start;
}

.booking-form-panel {
  background:  var(--ink-panel);
  border:      1px solid var(--gold-border);
  position:    relative;
  overflow:    hidden;
}
.booking-form-panel::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.booking-form-header {
  padding:       1.75rem 2rem 1.5rem;
  border-bottom: 1px solid var(--gold-border);
  text-align:    center;
}
.booking-form-header h2 {
  font-family:   var(--font-display) !important;
  font-size:     1.4rem !important;
  font-weight:   300 !important;
  color:         var(--gold) !important;
  margin-bottom: .375rem !important;
  padding:       0 !important;
}
.booking-form-header p {
  font-size:   .87rem !important;
  color:       var(--text-muted) !important;
  margin:      0 !important;
  line-height: 1.6 !important;
}

.booking-form-body { padding: 1.75rem 2rem 2rem; }

.session-cards {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-bottom:  1.5rem;
}

.session-card {
  background:  var(--ink-mid);
  border:      1px solid var(--gold-border);
  padding:     1.1rem 1.25rem;
  cursor:      pointer;
  transition:  border-color var(--dur-base), background var(--dur-base);
  position:    relative;
  overflow:    hidden;
}
.session-card::before {
  content:          '';
  position:         absolute;
  left: 0; top: 0; bottom: 0;
  width:            2px;
  background:       var(--gold);
  transform:        scaleY(0);
  transform-origin: bottom;
  transition:       transform .25s var(--ease);
}
.session-card:hover,
.session-card.active {
  border-color: rgba(201,168,76,.5);
  background:   var(--ink-raised);
}
.session-card:hover::before,
.session-card.active::before { transform: scaleY(1); }

.session-card-top {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   .25rem;
}
.session-card-name {
  font-family:    var(--font-caps);
  font-size:      .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--text-primary);
}
.session-card-price {
  font-family: var(--font-display);
  font-size:   1.05rem;
  font-weight: 300;
  color:       var(--gold);
}
.session-card-meta {
  font-size: .78rem;
  color:     var(--text-muted);
}

.booking-form-divider {
  height:     1px;
  background: var(--gold-border);
  margin:     1.25rem 0;
}

.rmh-bookly-wrap {
  background: var(--ink);
  border:     1px solid var(--gold-border);
  padding:    1.5rem;
  position:   relative;
}
.rmh-bookly-wrap::before {
  content:    '';
  position:   absolute;
  top:        -1px; left: 2rem; right: 2rem;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Trust signals */
.booking-trust {
  display:        flex;
  flex-direction: column;
  gap:            .75rem;
  margin-bottom:  2rem;
}
.booking-trust-item {
  display:     flex;
  align-items: flex-start;
  gap:         .75rem;
  font-family: var(--font-display);
  font-size:   .92rem;
  color:       var(--text-secondary);
  line-height: 1.5;
}
.booking-trust-icon {
  color:      var(--gold);
  font-size:  .7rem;
  flex-shrink: 0;
  margin-top: .15rem;
}

/* Booking offerings tiles */
.booking-offerings {
  background:    var(--ink-soft);
  border-bottom: 1px solid var(--gold-border);
  padding:       clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3rem);
}
.booking-offerings-inner {
  max-width:             1100px;
  margin-inline:         auto;
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            var(--gold-border);
  border:                1px solid var(--gold-border);
}
.offering-tile {
  background:  var(--ink-mid);
  padding:     2rem 1.75rem;
  position:    relative;
  transition:  background var(--dur-base);
}
.offering-tile:hover { background: var(--ink-raised); }
.offering-tile::before {
  content:          '';
  position:         absolute;
  top: 0; left: 0; right: 0;
  height:           1px;
  background:       linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:        scaleX(0);
  transition:       transform .35s;
}
.offering-tile:hover::before { transform: scaleX(1); }

.offering-num {
  font-family:    var(--font-caps);
  font-size:      .47rem;
  letter-spacing: .25em;
  color:          var(--gold);
  opacity:        .45;
  text-transform: uppercase;
  margin-bottom:  .75rem;
  display:        block;
}
.offering-name {
  font-family:   var(--font-display);
  font-size:     1.2rem;
  font-weight:   300;
  color:         var(--text-primary);
  margin-bottom: .375rem;
  display:       block;
}
.offering-duration {
  font-family:    var(--font-caps);
  font-size:      .5rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--text-muted);
  opacity:        .65;
  margin-bottom:  .75rem;
  display:        block;
}
.offering-price {
  font-family:   var(--font-display);
  font-size:     1.5rem;
  font-weight:   300;
  color:         var(--gold);
  display:       block;
  margin-bottom: .75rem;
}
.offering-desc {
  font-family: var(--font-display);
  font-size:   .88rem;
  font-style:  italic;
  color:       var(--text-secondary);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   13. LOGO MEANING (my-story)
   ═══════════════════════════════════════════════════════════ */
.logo-meaning-inner {
  max-width:   900px;
  margin:      0 auto;
  display:     flex;
  gap:         clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.logo-meaning-image { position: relative; flex-shrink: 0; }
.logo-meaning-image img {
  width:        clamp(140px, 40vw, 200px);
  height:       clamp(140px, 40vw, 200px);
  border-radius: 50%;
  border:       1px solid var(--gold-border);
  display:      block;
  filter:       brightness(.88) contrast(1.08);
  transition:   filter var(--dur-base), box-shadow var(--dur-base);
}
.logo-meaning-image img:hover {
  filter:     brightness(.95) contrast(1.08);
  box-shadow: 0 0 40px rgba(201,168,76,.2);
}

.logo-symbol {
  padding:       1rem 0 1rem 1.25rem;
  border-left:   2px solid var(--gold-dim);
  margin-bottom: 1.5rem;
  transition:    border-color var(--dur-base);
}
.logo-symbol:hover { border-color: var(--gold); }
.logo-symbol h3 {
  font-family:    var(--font-caps);
  font-size:      .58rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  .375rem;
}
.logo-symbol p {
  font-family: var(--font-display);
  font-size:   .96rem;
  font-style:  italic;
  color:       var(--text-secondary);
  line-height: 1.8;
  margin:      0;
}

.logo-tagline {
  padding:    1.25rem 1.5rem;
  background: var(--ink-mid);
  border:     1px solid var(--gold-border);
  position:   relative;
  text-align: center;
}
.logo-tagline::before {
  content:    '';
  position:   absolute;
  top: -1px; left: 1.5rem; right: 1.5rem;
  height:     2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.logo-tagline p {
  font-family: var(--font-display);
  font-size:   1rem;
  font-style:  italic;
  color:       var(--gold-pale);
  margin:      0;
  line-height: 1.6;
}
.logo-tagline strong { color: var(--gold-light); font-style: normal; }

/* ═══════════════════════════════════════════════════════════
   14. PORTRAIT IMAGE (my-story)
   ═══════════════════════════════════════════════════════════ */
.story-image-wrap {
  background:    var(--ink-soft);
  border-bottom: 1px solid var(--gold-border);
  padding:       clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem);
}
.story-image-inner {
  max-width: 360px;
  margin:    0 auto;
  position:  relative;
}
.story-image-inner::before,
.story-image-inner::after {
  content:      '';
  position:     absolute;
  width:        30px;
  height:       30px;
  border-color: var(--gold);
  border-style: solid;
  opacity:      .35;
}
.story-image-inner::before {
  top: -10px; left: -10px;
  border-width: 1px 0 0 1px;
}
.story-image-inner::after {
  bottom: -10px; right: -10px;
  border-width: 0 1px 1px 0;
}
.story-portrait {
  width:   100%;
  display: block;
  border:  1px solid var(--gold-border);
  filter:  grayscale(10%) contrast(1.05) brightness(.9);
}

/* ═══════════════════════════════════════════════════════════
   15. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .booking-hero-inner         { grid-template-columns: 1fr; }
  .booking-offerings-inner    { grid-template-columns: 1fr; }
  .page-split                 { grid-template-columns: 1fr; }
  .page-split-aside           { display: none; }
  .credentials-grid           { grid-template-columns: 1fr; }
  .logo-meaning-inner         { flex-direction: column; text-align: center; }
  .logo-symbol                { border-left: none; border-top: 1px solid var(--gold-dim); padding: 1rem 0; }
  .logo-symbol:hover          { border-left: none; border-top-color: var(--gold); }
}

@media (max-width: 720px) {
  .page-offers-grid           { grid-template-columns: 1fr; }
  .page-list--grid            { grid-template-columns: 1fr; }
  .page-list--tiles           { grid-template-columns: 1fr; }
  .booking-form-header,
  .booking-form-body          { padding-inline: 1.25rem; }
}

@media (max-width: 480px) {
  .page-hero h1               { font-size: clamp(1.9rem, 8vw, 2.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .page-offer::before,
  .credentials-block::before,
  .offering-tile::before,
  .session-card::before       { transition: none !important; }
}