/* =====================================================================
   GALACTIC HIGH PRIESTESS — THE SOPHIANIC TEMPLE
   Consolidated production stylesheet (static PHP/HTML build).

   Layers, in order:
     1. Fonts (Google Fonts)
     2. Design-system tokens  (colors · typography · spacing)
     3. Base element defaults
     4. Design-system component classes (Button, Eyebrow, Quote, …)
     5. Site layout & sections
   All colours/type derive from the Galactic High Priestess design system.
   ===================================================================== */

/* ---- 1. Fonts ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Jost:wght@300;400;500;600&display=swap');

/* ---- 2. Tokens --------------------------------------------------------- */
:root {
  /* Base palette */
  --ghp-ivory-white:       #FAF8F5;
  --ghp-soft-pearl:        #F1EBE4;
  --ghp-pastel-cappuccino: #E5D3C5;
  --ghp-warm-beige:        #D8C1AE;
  --ghp-champagne-gold:    #C8A27B;
  --ghp-antique-gold:      #B78C63;
  --ghp-taupe-bronze:      #8E6A50;
  --ghp-espresso:          #5E4638;

  /* Semantic aliases */
  --surface-page:    var(--ghp-ivory-white);
  --surface-raised:  var(--ghp-soft-pearl);
  --surface-sunk:    var(--ghp-pastel-cappuccino);
  --surface-inverse: var(--ghp-espresso);

  --text-primary:   var(--ghp-espresso);
  --text-secondary: var(--ghp-taupe-bronze);
  --text-gold:      var(--ghp-antique-gold);

  --accent:      var(--ghp-champagne-gold);
  --accent-deep: var(--ghp-antique-gold);

  --border-hairline: var(--ghp-warm-beige);
  --border-gold:     var(--ghp-champagne-gold);
  --border-soft:     rgba(200, 162, 123, 0.30);

  /* Families */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-body:    'Jost', 'Century Gothic', system-ui, sans-serif;

  /* Motion */
  --ease-gentle: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-base:    420ms;
  --dur-slow:    720ms;
}

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

/* overflow-x: clip kills any incidental horizontal scroll on mobile without
   creating a scroll container (so position: sticky keeps working). */
html { scroll-behavior: smooth; font-size: 110%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[id] { scroll-margin-top: 96px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
  text-wrap: pretty;
}
h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.06; letter-spacing: 0.01em; }
h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.15; }
h3 { font-size: 1.6rem; line-height: 1.2; font-weight: 500; }
p  { margin: 0 0 1rem; text-wrap: pretty; }
a  { color: var(--accent-deep); text-decoration: none; }

.st-container { max-width: 1560px; margin: 0 auto; padding: 0 32px; }
.st-prose { max-width: 640px; margin: 0 auto; }

.st-body {
  font-size: 1.27rem;
  line-height: 1.8;
  color: var(--text-primary);
  margin: 0;
}
.st-body-muted { color: var(--text-secondary); }

/* ---- 4. Design-system component classes -------------------------------- */

/* Button (DS Button + site hover inversion) */
.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 400;
  text-transform: uppercase; border-radius: 999px;
  cursor: pointer; border: 1px solid transparent;
  text-decoration: none; white-space: nowrap; text-align: center;
  max-width: 100%; /* never exceed the container on narrow screens */
  transition: all 420ms var(--ease-gentle);
}
.st-btn-sm { padding: 10px 22px; font-size: 14px; letter-spacing: 0.20em; }
.st-btn-md { padding: 15px 34px; font-size: 16px; letter-spacing: 0.22em; }
.st-btn-lg { padding: 19px 46px; font-size: 17px; letter-spacing: 0.24em; }
.st-btn-primary {
  background: linear-gradient(135deg, #C8A27B, #B78C63);
  color: #FAF8F5;
  box-shadow: 0 10px 40px rgba(200, 162, 123, 0.28);
}
.st-btn-secondary { background: transparent; color: #8E6A50; border-color: #C8A27B; }
.st-btn-ghost {
  background: transparent; color: #5E4638; border-radius: 0;
  padding: 6px 2px; box-shadow: inset 0 -1px 0 rgba(200, 162, 123, 0.4);
}
/* hover inversion: dark buttons lighten (text darkens), light buttons darken (text lightens) */
.st-btn-primary:hover {
  background: linear-gradient(135deg, #F1EBE4, #E9DCCD);
  color: #5E4638; border-color: #C8A27B;
}
.st-btn-secondary:hover { background: linear-gradient(135deg, #C8A27B, #B78C63); color: #FAF8F5; }
.st-btn-ghost:hover { background: #5E4638; color: #FAF8F5; }

/* Eyebrow — wide-tracked small caps (site wrapper size 0.95rem) */
.ds-eyebrow {
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 400;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-gold);
}
.ds-eyebrow-center { text-align: center; }

/* Ornament glyph */
.ds-ornament { display: inline-block; line-height: 1; color: var(--ghp-champagne-gold); }

/* SectionDivider — gold rule · ornament · gold rule */
.ds-divider { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ds-divider-rule {
  height: 1px; width: clamp(40px, 12vw, 120px);
  background: linear-gradient(90deg, transparent, #C8A27B, transparent);
}
.ds-divider .ds-ornament { font-size: 14px; }

/* Quote — devotional pull-quote */
.ds-quote { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ds-quote-rule {
  height: 1px; width: 64px;
  background: linear-gradient(90deg, transparent, #C8A27B, transparent);
}
.ds-quote blockquote {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.4; color: #5E4638; max-width: 640px;
}
.ds-quote figcaption {
  font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: #B78C63;
}

/* PrincipleItem */
.ds-principle {
  display: flex; align-items: flex-start; gap: 18px; padding: 22px 0;
  border-bottom: 1px solid rgba(200, 162, 123, 0.3);
}
.ds-principle-mark { margin-top: 6px; display: flex; align-items: center; gap: 12px; }
.ds-principle-num { font-family: var(--font-display); font-size: 0.95rem; color: #C8A27B; width: 22px; }
.ds-principle-mark .ds-ornament { font-size: 12px; }
.ds-principle-name { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: #5E4638; line-height: 1.2; }
.ds-principle-meaning { font-family: var(--font-body); font-weight: 300; font-size: 0.95rem; line-height: 1.6; color: #8E6A50; margin-top: 4px; }

/* NewsletterField */
.ds-newsletter { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ds-newsletter input {
  flex: 1 1 220px; background: transparent; border: none;
  border-bottom: 1px solid #D8C1AE; padding: 10px 2px;
  font-family: var(--font-body); font-weight: 300; font-size: 1rem; color: #5E4638; outline: none;
}
.ds-newsletter input:focus { border-bottom-color: #B78C63; }

/* =====================================================================
   5. SITE LAYOUT & SECTIONS  (carried over from the design prototype)
   ===================================================================== */

.st-section { padding: 100px 32px; }
.st-section-tight { padding: 72px 32px; }

/* Full-viewport hero */
.st-hero-full {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}
.st-hero-copy {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 26px;
  padding: 64px 5vw 110px 6vw;
  position: relative; z-index: 3; min-width: 0;
}
.st-hero-img { position: relative; overflow: hidden; }
.st-hero-img img, .st-hero-img image-slot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.st-hero-img::after {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--surface-page) 0%, rgba(250,248,245,0) 45%);
}

/* Image placeholder — styled block standing in for a pending client photo.
   Swap the enclosing markup for a real <img> once supplied. */
.st-img-placeholder {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(200,162,123,0.05) 0 22px, rgba(216,193,174,0.12) 22px 44px),
    linear-gradient(135deg, var(--surface-raised), var(--surface-sunk));
  border: 1px dashed var(--border-gold);
  color: var(--text-secondary);
}
.st-img-placeholder .ds-ornament { font-size: 26px; }
.st-img-placeholder .st-img-placeholder-label {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-gold);
}
.st-img-placeholder .st-img-placeholder-note {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.05rem; color: var(--text-secondary); max-width: 300px; margin: 0;
}
/* Full-bleed variant that fills a hero image column */
.st-hero-img .st-img-placeholder { position: absolute; inset: 0; border: none; }
.st-hero-img .st-img-placeholder::after {
  content: ''; position: absolute; inset: 16px; border: 1px dashed var(--border-gold);
  pointer-events: none;
}
.st-scroll-cue {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-decoration: none; z-index: 5; padding-top: 8px;
  width: max-content;
}
.st-scroll-cue .st-scroll-label {
  font-family: var(--font-body); font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: #000;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(250,248,245,0.9), 0 0 4px rgba(250,248,245,0.9);
}
.st-scroll-track { position: relative; height: 88px; width: 16px; }
.st-scroll-cue .st-scroll-line {
  position: absolute; top: 0; left: 50%; margin-left: -0.75px;
  width: 1.5px; height: 76px;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), #000);
}
.st-scroll-cue .st-scroll-line::after {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid #000; border-bottom: 1.5px solid #000;
  transform: translate(-50%, -1px) rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .st-scroll-cue .st-scroll-line { animation: st-cue-grow 2.8s var(--ease-gentle) infinite; }
  @keyframes st-cue-grow {
    0% { height: 0; opacity: 0; }
    35% { height: 76px; opacity: 1; }
    75% { height: 76px; opacity: 1; }
    100% { height: 76px; opacity: 0; }
  }
}

/* Full-height centered hero (text-only pages), optional video bg */
.st-hero-center {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 48px 32px;
  overflow: hidden;
}
.st-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.st-hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(250,248,245,0.22), rgba(250,248,245,0.4) 60%, rgba(250,248,245,0.55));
}
.st-hero-center-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  max-width: 820px;
}

/* Manifesto — centred title, left-aligned copy column + right graphic column */
.st-manifesto-head {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; margin-bottom: 56px;
}
.st-manifesto-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
  max-width: 1560px; margin: 0 auto; align-items: start;
}
.st-manifesto-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; text-align: left; }
.st-manifesto-img { height: 100%; }

/* Split 50/50 */
.st-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  max-width: 1560px;
  margin: 0 auto;
}
.st-split-align-start { align-items: start; }
.st-split-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.st-split-copy > h1, .st-split-copy > h2, .st-split-copy > p { align-self: stretch; }
.st-split-img { width: 100%; }
.st-split-img-sticky { position: sticky; top: 110px; }
.st-split-img img, .st-split-img image-slot { display: block; width: 100%; }

/* Full-width band with background image */
.st-band { position: relative; overflow: hidden; }
.st-band-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: 0;
}
.st-band-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(250,248,245,0.86), rgba(241,235,228,0.88));
}
.st-band-veil-dark {
  background: linear-gradient(180deg, rgba(94,70,56,0.55), rgba(94,70,56,0.62));
}
.st-band-content {
  position: relative; z-index: 2;
  padding: 120px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center;
}

/* Offerings preview — static equal-cell grid (6) + one full-width row (7th) */
.st-off-wrap { padding: 96px 32px 0; max-width: 1560px; margin: 0 auto; }
.st-deck-head {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; margin-bottom: 56px;
}
.st-deck-head h2 { white-space: nowrap; }
@media (max-width: 1100px) { .st-deck-head h2 { white-space: normal; } }
.st-offer-num {
  font-family: var(--font-display);
  font-size: 2.6rem; color: var(--ghp-champagne-gold); letter-spacing: 0.04em; line-height: 1;
}
.st-off-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-hairline);
  border-radius: 20px; overflow: hidden;
  background: var(--surface-page);
}
.st-off-cell {
  border-right: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.st-off-cell:nth-child(3n) { border-right: none; }
.st-off-cell:nth-child(n+4) { border-bottom: none; }
.st-off-cell h3, .st-off-full h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.22; }
.st-off-cell p, .st-off-full p { font-size: 1.27rem; line-height: 1.6; color: var(--text-secondary); margin: 0; flex: 1; }
.st-off-cell .st-link, .st-off-full .st-link { box-shadow: none; }
.st-off-cell .st-link:hover, .st-off-full .st-link:hover { box-shadow: none; }
.st-off-full {
  margin-top: 32px;
  border: 1px solid var(--border-hairline);
  border-radius: 20px;
  background: var(--surface-page);
  overflow: hidden;
}
.st-off-full h3 { max-width: 640px; }
.st-off-full p { max-width: 640px; }

/* 3D page-turn flip cards */
.st-flip { perspective: 1600px; }
.st-flip-inner {
  position: relative; height: 100%; min-height: 340px;
  transform-style: preserve-3d;
  transition: transform 950ms var(--ease-gentle);
}
.st-off-full .st-flip-inner { min-height: 240px; }
.st-flip:hover .st-flip-inner, .st-flip:focus-within .st-flip-inner { transform: rotateY(-180deg); }
.st-flip-face {
  padding: 52px 44px;
  display: flex; flex-direction: column; gap: 16px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.st-flip-front { position: absolute; inset: 0; }
.st-flip-front h3 { flex: 1; }
.st-flip-back {
  position: absolute; inset: 0;
  transform: rotateY(-180deg);
  background: var(--surface-raised);
}
.st-flip-back p { flex: 1; }
@media (prefers-reduced-motion: reduce) { .st-flip-inner { transition: none; } }
@media (max-width: 900px) {
  .st-off-grid { grid-template-columns: 1fr; }
  .st-off-cell { border-right: none; }
  .st-off-cell:nth-child(n+4) { border-bottom: 1px solid var(--border-hairline); }
  .st-off-cell:last-child { border-bottom: none; }
}

/* Story of Remembrance — video plays through once on arrival, copy fades in on gold plaques */
.st-story-full {
  position: relative; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-page);
}
.st-story-video-wrap { position: absolute; inset: 0; }
.st-story-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-story-copy {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center; max-width: 800px; padding: 0 32px;
}
.st-story-copy h2 { margin: 0; color: var(--ghp-espresso); }
.st-story-copy .st-body { max-width: 640px; margin: 0; color: var(--ghp-espresso); }
.st-story-copy .st-link { color: var(--ghp-espresso); }
.st-story-copy .st-link:hover { color: var(--ghp-espresso); box-shadow: inset 0 -1px 0 var(--ghp-espresso); }
.st-story-item {
  opacity: 0; transform: translateY(26px);
  transition: opacity 900ms var(--ease-gentle), transform 900ms var(--ease-gentle);
  will-change: opacity, transform;
}
.st-story-item.is-on { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .st-story-item { transition: none; } }

/* One-line heading */
.st-oneline { white-space: nowrap; font-size: clamp(1.5rem, 2.8vw, 2.75rem); }
@media (max-width: 700px) {
  .st-oneline { white-space: normal; font-size: clamp(1.7rem, 5vw, 2.2rem); }
}

/* The turning point — zig-zag timeline (About) */
.st-timeline-col { position: sticky; top: 96px; }
.st-timeline { position: relative; height: 74vh; min-height: 560px; max-height: 780px; }
.st-timeline-line {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1200ms var(--ease-gentle) 200ms;
}
.st-timeline.is-seen .st-timeline-line { opacity: 0.8; }
.st-timeline-node {
  position: absolute; width: 0; height: 0;
  opacity: 0; transform: translateY(18px);
  transition: opacity 720ms var(--ease-gentle), transform 720ms var(--ease-gentle);
  will-change: opacity, transform;
}
.st-timeline.is-seen .st-timeline-node { opacity: 1; transform: translateY(0); }
.st-timeline-dot {
  position: absolute; left: 0; top: 0;
  width: 11px; height: 11px; transform: translate(-50%, -50%) rotate(45deg);
  background: var(--ghp-champagne-gold);
  box-shadow: 0 0 0 5px var(--surface-page);
}
.st-timeline-label {
  position: absolute; top: 0; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 7px; width: 220px;
}
.st-timeline-node.side-l .st-timeline-label { right: 20px; text-align: right; align-items: flex-end; }
.st-timeline-node.side-r .st-timeline-label { left: 20px; text-align: left; align-items: flex-start; }
.st-timeline-when {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.55rem; line-height: 1.12; color: var(--text-primary);
}
.st-timeline-what {
  font-family: var(--font-body); font-weight: 300;
  font-size: 0.95rem; line-height: 1.55; color: var(--text-secondary);
}
@media (max-width: 1439px) {
  .st-timeline-label { width: 140px; }
  .st-timeline-node.side-l .st-timeline-label { right: 14px; }
  .st-timeline-node.side-r .st-timeline-label { left: 14px; }
  .st-timeline-when { font-size: 1.35rem; }
  .st-timeline-what { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) { .st-timeline-line, .st-timeline-node { transition: none; } }

/* Global section fade-in */
@media (prefers-reduced-motion: no-preference) {
  .st-rev {
    opacity: 0; transform: translateY(28px);
    transition: opacity 900ms var(--ease-gentle), transform 900ms var(--ease-gentle);
    will-change: opacity, transform;
  }
  .st-rev.is-in { opacity: 1; transform: translateY(0); }
}

/* Not a healer — centred cut-out portrait with copy either side (About) */
.st-conduit-section { padding-bottom: 0 !important; overflow: hidden; }
.st-conduit-head {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; margin-bottom: 64px;
}
.st-conduit-grid {
  display: grid; grid-template-columns: 1fr minmax(420px, 580px) 1fr; gap: 72px;
  max-width: 1560px; margin: 0 auto; align-items: start;
}
@media (max-width: 1250px) {
  .st-conduit-grid { grid-template-columns: 1fr; gap: 40px; }
  .st-conduit-grid .st-conduit-img { order: -1; position: static; max-width: 420px; margin: 0 auto; align-self: center; }
  .st-conduit-section { padding-bottom: 64px !important; }
}
.st-conduit-col { display: flex; flex-direction: column; gap: 24px; padding-bottom: 72px; }
.st-conduit-img { align-self: end; }
.st-conduit-img img { width: 100%; display: block; }
.st-conduit-lead {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.8rem; line-height: 1.35; color: var(--text-primary); margin: 0;
}
.st-conduit-note {
  font-family: var(--font-body); font-weight: 300;
  font-size: 1.05rem; line-height: 1.7; color: var(--ghp-antique-gold); margin: 0;
}

/* Offerings hero — pinned video that holds on frame one until first scroll */
.st-offhero-pin { position: relative; height: 220vh; }
.st-offhero { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--surface-page); }
.st-offhero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.st-offhero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(250,248,245,0.55), rgba(241,235,228,0.65));
}
.st-offhero-title {
  position: absolute; left: 0; right: 0; top: 92px; z-index: 2;
  margin: 0; padding: 0 8px;
  text-align: center;
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase;
  font-size: 10.4vw; line-height: 0.95; letter-spacing: 0.015em;
  color: var(--surface-page);
  text-shadow: 0 4px 44px rgba(94,70,56,0.5);
  white-space: nowrap;
  transform-origin: top center;
  transform: translateY(calc(100vh - 100% - 92px - 3vh)) scale(1);
  transition: transform 1400ms var(--ease-gentle);
}
.st-offhero.is-started .st-offhero-title { transform: translateY(0) scale(0.44); }
@media (prefers-reduced-motion: reduce) { .st-offhero-title { transition: none; } }
.st-offhero-copy {
  position: absolute; left: 6vw; top: calc(92px + 4.8vw + 6vh); z-index: 2;
  display: flex; flex-direction: column; gap: 18px; max-width: 760px; align-items: flex-start;
}
.st-offhero-line {
  margin: 0;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.8rem, 2.7vw, 2.8rem); line-height: 1.35;
  background: linear-gradient(135deg, #E9CDA0 0%, #C8A27B 45%, #B78C63 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(250,248,245,0.7));
  white-space: nowrap;
}
.st-offhero-sub { color: var(--text-secondary); }
.st-offhero-list { display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
.st-offhero-item {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-size: 1rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ghp-antique-gold); text-decoration: none;
  text-shadow: 0 1px 12px rgba(250,248,245,0.9);
  transition: color 420ms ease;
}
.st-offhero-item:hover { color: var(--ghp-champagne-gold); }
.st-offhero-dash { width: 30px; height: 1px; background: var(--ghp-antique-gold); flex-shrink: 0; }
.st-offhero-copy .st-offhero-line, .st-offhero-copy .st-offhero-item {
  opacity: 0; transform: translateY(16px);
  transition-property: opacity, transform, color;
  transition-duration: 900ms;
  transition-timing-function: var(--ease-gentle);
}
.st-offhero-copy.is-on .st-offhero-line, .st-offhero-copy.is-on .st-offhero-item { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .st-offhero-copy .st-offhero-line, .st-offhero-copy .st-offhero-item { transition: none; opacity: 1; transform: none; }
}

/* Gold plaque (now light cappuccino, espresso text set in markup) */
.st-goldbox {
  background: var(--surface-sunk);
  border: 1px solid var(--ghp-warm-beige);
  border-radius: 25px;
  padding: 8px 22px;
  box-shadow: 0 14px 44px rgba(94,70,56,0.22);
}
.st-nowrap { white-space: nowrap; }
@media (max-width: 700px) { .st-nowrap { white-space: normal; } }

/* Living Principles — larger item text (overrides DS component sizes) */
.st-principles .ds-principle-name { font-size: 2.05rem; }
.st-principles .ds-principle-meaning { font-size: 1.12rem; margin-top: 8px; }

/* Walking together — boxed steps + dashed arrow track */
.st-steps-flow { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.st-step-box {
  background: var(--surface-raised);
  border-radius: 20px;
  padding: 44px 32px;
  box-shadow: 0 8px 30px rgba(94,70,56,0.08);
}
.st-steps-track { display: flex; align-items: center; gap: 18px; padding: 0 8px; }
.st-steps-dash { flex: 1; border-top: 1px dashed var(--ghp-champagne-gold); }
.st-steps-arrow { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--ghp-antique-gold); }

/* Testimonials — Walk Beside Me: plaque-card grid */
.st-testimonial-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
  max-width: 1280px; margin: 0 auto; align-items: start;
}
/* Card = the same cappuccino plaque as .st-goldbox (home story, principles hero). */
.st-testimonial-card {
  background: var(--surface-sunk);
  border: 1px solid var(--ghp-warm-beige);
  border-radius: 25px;
  padding: 44px 40px 36px;
  box-shadow: 0 14px 44px rgba(94,70,56,0.22);
  display: flex; flex-direction: column; gap: 22px;
}
.st-testimonial-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.45rem; line-height: 1.68; color: var(--ghp-espresso);
  margin: 0; position: relative;
}
.st-testimonial-quote p { margin: 0 0 0.9em; }
.st-testimonial-quote p:last-child { margin-bottom: 0; }
/* Long testimonials are clamped by JS (js/main.js) and expand on request.
   Without JS the class is never added, so the full words show. */
.st-testimonial-quote.is-clamped {
  max-height: 10.5em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.st-testimonial-more {
  align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.78rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ghp-antique-gold);
  border-bottom: 1px solid var(--ghp-champagne-gold); line-height: 1.8;
}
.st-testimonial-more:hover { color: var(--ghp-espresso); }
.st-testimonial-foot {
  margin-top: auto;
  border-top: 1px solid var(--ghp-champagne-gold);
  padding-top: 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.st-testimonial-name {
  font-family: var(--font-body); font-size: 0.82rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: #1E1712;
}
.st-testimonial-meta {
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.85rem; color: #1E1712; margin: 0;
}

/* Video testimonial (left) + a word from Gosia (right) — two-column feature row. */
.st-reel-split {
  display: grid; grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 56px; align-items: center;
  max-width: 1100px; margin: 12px auto 0;
}
.st-testimonial-reel {
  margin: 0; width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 18px; align-items: center;
  background: var(--surface-sunk);
  border: 1px solid var(--ghp-warm-beige);
  border-radius: 25px;
  padding: 22px 22px 26px;
  box-shadow: 0 14px 44px rgba(94,70,56,0.22);
}
.st-testimonial-reel video {
  width: 100%; aspect-ratio: 9 / 16;
  border-radius: 16px; background: #000; display: block; object-fit: cover;
}
.st-testimonial-reel-cap {
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; text-align: center;
}
/* A word from Gosia — the trust-building note beside her testimonial reel. */
.st-gosia-word { display: flex; flex-direction: column; gap: 18px; }
.st-gosia-word h3 { margin: 0; }
.st-gosia-lead {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.5rem; line-height: 1.5; color: #8E6A50; margin: 0;
}
.st-gosia-word .st-signoff { margin-top: 6px; }
@media (max-width: 900px) {
  .st-testimonial-grid { grid-template-columns: 1fr; gap: 24px; }
  .st-testimonial-card { padding: 32px 26px 28px; }
  .st-reel-split { grid-template-columns: 1fr; gap: 36px; }
  .st-testimonial-reel { margin: 0 auto; }
}

/* Newsletter popup — once-per-visit modal over an espresso veil */
.st-popup-backdrop {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(94,70,56,0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 420ms cubic-bezier(.22,.61,.36,1);
}
.st-popup-backdrop.is-open { opacity: 1; }
/* The display:flex above outranks the UA's [hidden]{display:none}, so without
   this the closed popup stays in the layer at opacity 0 — invisible, but still
   a fixed, full-viewport click target that swallows every click on the page. */
.st-popup-backdrop[hidden] { display: none; }
.st-popup {
  position: relative; width: 100%; max-width: 480px;
  background: var(--surface-page);
  border: 1px solid var(--ghp-warm-beige);
  border-radius: 36px;
  padding: 52px 40px 44px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(200,162,123,0.28);
  transform: translateY(18px);
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
}
.st-popup-backdrop.is-open .st-popup { transform: none; }
.st-popup-default { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.st-popup h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.65rem, 3vw, 2rem); line-height: 1.15;
  color: var(--ghp-espresso); margin: 0;
}
.st-popup .st-body { margin: 0; max-width: 360px; }
.st-popup .ds-newsletter { width: 100%; max-width: 380px; justify-content: center; }
.st-popup-close {
  position: absolute; top: 18px; right: 24px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 1.8rem; line-height: 1;
  color: var(--ghp-taupe-bronze); padding: 4px;
  transition: color 240ms cubic-bezier(.22,.61,.36,1);
}
.st-popup-close:hover { color: var(--ghp-espresso); }
.st-popup-success { margin: 0; }
@media (max-width: 560px) {
  .st-popup { padding: 44px 24px 36px; border-radius: 24px; }
}

/* Form controls */
.st-input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--ghp-warm-beige);
  padding: 10px 2px;
  font-family: var(--font-body); font-weight: 300; font-size: 1rem;
  color: var(--text-primary);
  outline: none; border-radius: 0;
  transition: border-color 420ms var(--ease-gentle);
}
.st-input:focus { border-bottom-color: var(--ghp-antique-gold); }
textarea.st-input { resize: vertical; min-height: 118px; }
.st-form-row { display: flex; gap: 24px; flex-wrap: wrap; }
.st-fieldset { border: none; margin: 0; padding: 0; }
.st-field { display: flex; flex-direction: column; gap: 8px; }
.st-check-grid { display: flex; flex-direction: column; gap: 13px; }
.st-check {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  font-family: var(--font-body); font-weight: 300; font-size: 1rem;
  color: var(--text-primary);
}
.st-check input { accent-color: var(--ghp-antique-gold); width: 17px; height: 17px; margin: 3px 0 0; flex-shrink: 0; }
/* Newsletter opt-in on the enquiry / application forms — set apart from the
   question checkboxes above it, since it is a separate act of consent. */
.st-check-optin {
  padding: 16px 20px;
  background: var(--ghp-soft-pearl);
  border: 1px solid var(--ghp-warm-beige);
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
  align-items: center;           /* single-line label sits centred on the box */
}
.st-check-optin input { margin: 0; }
.st-select {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--ghp-warm-beige);
  padding: 10px 2px;
  font-family: var(--font-body); font-weight: 300; font-size: 1rem;
  color: var(--text-primary);
  outline: none; border-radius: 0;
  transition: border-color 420ms var(--ease-gentle);
}
.st-select:focus { border-bottom-color: var(--ghp-antique-gold); }
.st-field-label {
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-gold);
}
.st-form-success {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.5rem; line-height: 1.5; color: #5E4638; margin: 0;
}
.st-form-error { color: #8E6A50; }

/* Anchor pills */
.st-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.st-pill {
  font-family: var(--font-body);
  font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  padding: 12px 26px;
  text-decoration: none;
  transition: all 420ms var(--ease-gentle);
  background: transparent;
  white-space: nowrap;
}
.st-pill:hover { color: var(--surface-page); background: var(--accent-deep); }

/* Header */
.st-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 40px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 420ms var(--ease-gentle), border-color 420ms ease, box-shadow 420ms ease;
}
.st-header-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.st-header-mark { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; }
.st-header-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--text-primary); line-height: 1.1; white-space: nowrap; }
.st-header-sub { font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-gold); }
/* At the top (transparent header) items read dark black; ease to normal on scroll */
.st-header.st-at-top .st-nav-link,
.st-header.st-at-top .st-header-name,
.st-header.st-at-top .st-header-sub { color: #000; }

.st-btn.st-btn-primary { transition: all 420ms var(--ease-gentle); }

.st-nav { display: flex; align-items: center; gap: 26px; }
.st-nav-link {
  font-family: var(--font-body); font-size: 0.8rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-secondary); text-decoration: none;
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: color 420ms ease, border-color 420ms ease;
  white-space: nowrap;
}
.st-nav-link:hover { color: var(--text-primary); }
.st-nav-link.is-current { color: var(--text-primary); border-bottom-color: var(--accent); }
.st-burger {
  display: none;
  /* frosted chip so the bars stay legible over the photo hero */
  background: rgba(250, 248, 245, 0.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(200, 162, 123, 0.5);
  border-radius: 12px; width: 46px; height: 46px; cursor: pointer;
  padding: 0; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.st-burger-box { position: relative; display: block; width: 22px; height: 16px; }
.st-burger-bar {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--text-gold);
  transition: transform 300ms var(--ease-gentle), opacity 200ms ease, background-color 300ms ease;
}
.st-burger-bar:nth-child(1) { top: 0; }
.st-burger-bar:nth-child(2) { top: 7px; }
.st-burger-bar:nth-child(3) { top: 14px; }
/* dark bars while the header is transparent over the hero */
.st-header.st-at-top .st-burger-bar { background: #000; }
/* morph to an X when open */
.st-burger.is-open .st-burger-bar { background: var(--text-primary); }
.st-burger.is-open .st-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.st-burger.is-open .st-burger-bar:nth-child(2) { opacity: 0; }
.st-burger.is-open .st-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1020px) {
  .st-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: center; gap: 8px;
    background: rgba(250,248,245,0.97);
    border-bottom: 1px solid rgba(200,162,123,0.25);
    padding: 20px 0 28px;
  }
  .st-nav.is-open { display: flex; }
  .st-nav-link { padding: 12px 0; font-size: 0.8rem; }
  .st-burger { display: inline-flex; }
}

/* Cursor glow */
.st-cursor-glow {
  position: fixed; left: 0; top: 0; width: 520px; height: 520px;
  pointer-events: none; z-index: 2147483000;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,162,123,0.17) 0%, rgba(200,162,123,0.07) 42%, transparent 68%);
  opacity: 0; transition: opacity 600ms ease;
  will-change: transform;
}
@media (hover: none), (prefers-reduced-motion: reduce) { .st-cursor-glow { display: none; } }

/* Footer */
.st-footer { background: var(--surface-inverse); color: var(--ghp-soft-pearl); padding: 88px 40px 40px; }
.st-footer-cols {
  display: grid; grid-template-columns: 1.2fr 0.8fr 1.2fr; gap: 56px;
  max-width: 1460px; margin: 0 auto;
}
.st-footer h4 {
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.82rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ghp-champagne-gold); margin: 0 0 20px;
}
.st-footer-mark { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; }
.st-footer-body { font-size: 0.98rem; line-height: 1.75; color: var(--ghp-pastel-cappuccino); margin: 18px 0 0; max-width: 320px; }
.st-footer-links { display: flex; flex-direction: column; gap: 12px; }
.st-footer-link {
  font-family: var(--font-body); font-size: 0.88rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ghp-pastel-cappuccino); text-decoration: none;
  transition: color 420ms ease;
}
.st-footer-link:hover { color: var(--ghp-champagne-gold); }
.st-footer-social { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.st-footer-bar {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  max-width: 1460px; margin: 56px auto 0; padding-top: 28px;
  border-top: 1px solid rgba(200,162,123,0.25);
  font-size: 0.84rem; letter-spacing: 0.06em; color: rgba(241,235,228,0.65);
}
.st-footer-signoff { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--ghp-champagne-gold); }
.st-footer-bar-links { display: flex; gap: 18px; }

/* How-it-works numbered columns */
.st-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: 1280px; margin: 0 auto; }
.st-step { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.st-step-num { font-family: var(--font-display); font-size: 2.4rem; color: var(--ghp-champagne-gold); line-height: 1; }

/* Clearing sub-columns */
.st-subcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1460px; margin: 0 auto; }
.st-subcol {
  background: var(--surface-raised);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 8px 30px rgba(94,70,56,0.08);
  display: flex; flex-direction: column; gap: 14px;
}

/* Principles 2-col grid */
.st-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 96px; max-width: 1240px; margin: 0 auto; }

/* Contact two columns */
.st-contact-cols { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 96px; max-width: 1460px; margin: 0 auto; align-items: start; }

/* Ghost / arrow links */
.st-link {
  font-family: var(--font-body); font-size: 0.88rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-primary); text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(200,162,123,0.4);
  padding: 6px 2px;
  transition: box-shadow 420ms ease, color 420ms ease;
}
.st-link:hover { box-shadow: inset 0 -1px 0 var(--ghp-antique-gold); color: var(--ghp-antique-gold); }

/* Ritual / detail / signoff lines */
.st-ritual {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.35rem; color: var(--text-gold); margin: 0;
}
.st-detail { font-size: 1.12rem; letter-spacing: 0.04em; color: var(--text-secondary); margin: 0; }
.st-detail-italic { font-style: italic; }
.st-signoff {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.5rem; color: var(--ghp-antique-gold); margin: 0;
}

/* Decorative quote marks */
.st-quote-big blockquote { font-size: clamp(1.9rem, 3.9vw, 3.1rem) !important; max-width: 860px !important; }
.st-quote-wrap { position: relative; max-width: 920px; margin: 0 auto; padding: 24px 64px; }
.st-quote-wrap::before, .st-quote-wrap::after {
  font-family: var(--font-display); font-weight: 700;
  font-size: 8rem; line-height: 1;
  color: var(--ghp-champagne-gold); opacity: 0.55;
  position: absolute; pointer-events: none;
}
.st-quote-wrap::before { content: '\201C'; top: -28px; left: -8px; }
.st-quote-wrap::after { content: '\201D'; bottom: -76px; right: -8px; }

/* Responsive stacks */
@media (max-width: 1100px) and (min-width: 901px) {
  .st-hero-copy h1 { font-size: 2.1rem; line-height: 1.22; }
}
@media (max-width: 900px) {
  .st-hero-full { grid-template-columns: 1fr; min-height: 0; }
  .st-hero-center { min-height: 70vh; }
  .st-hero-img { order: -1; min-height: 52vh; }
  .st-hero-img::after { background: linear-gradient(0deg, var(--surface-page) 0%, rgba(250,248,245,0) 38%); }
  .st-hero-copy { padding: 48px 24px 96px; }
  .st-quote-wrap { padding: 24px 32px; }
  .st-quote-wrap::before, .st-quote-wrap::after { font-size: 5rem; }
  .st-quote-wrap::after { bottom: -48px; }
  .st-section { padding: 72px 24px; }
  .st-manifesto-grid { grid-template-columns: 1fr; gap: 36px; }
  .st-split { grid-template-columns: 1fr; gap: 36px; }
  .st-split .st-split-img { order: -1; }
  .st-steps { grid-template-columns: 1fr; gap: 32px; }
  .st-subcols { grid-template-columns: 1fr; }
  .st-principles { grid-template-columns: 1fr; }
  .st-contact-cols { grid-template-columns: 1fr; gap: 56px; }
  .st-footer-cols { grid-template-columns: 1fr; gap: 44px; }
  .st-band-content { padding: 88px 24px; }
  .st-conduit-grid { grid-template-columns: 1fr; gap: 40px; }
  .st-conduit-img { order: -1; position: static; max-width: 360px; margin: 0 auto; }
  .st-timeline-col { position: static; }
  .st-timeline { min-height: 520px; }
  .st-timeline-label { width: 170px; }
  .st-split-img { --st-offimg-h: 60vh; }
  .st-offhero-pin { height: 160vh; }
  .st-offhero-copy { left: 24px; right: 24px; top: calc(72px + 12vw + 4vh); }
  .st-offhero-line { white-space: normal; }
  .st-steps-track { display: none; }
  .st-goldbox { padding: 12px 22px; }
}

/* Phone-width refinements: give the hamburger breathing room and keep the
   hero headline readable (it stays large but is allowed to wrap on mobile). */
@media (max-width: 600px) {
  .st-header { padding: 14px 20px; }
  .st-header-mark { width: 40px; height: 40px; }
  .st-header-name { font-size: 1.05rem; }
  .st-header-sub { font-size: 0.52rem; }
  .st-hero-copy h1 { font-size: 2.7rem !important; line-height: 1.12; }
  .st-hero-copy h1 span { white-space: normal !important; }
  /* keep the zig-zag timeline labels inside the narrow column */
  .st-timeline-label { width: 118px; }
  .st-timeline-when { font-size: 1.15rem; }
  .st-timeline-what { font-size: 0.8rem; }
  /* long CTA labels: allow wrap + trim padding/tracking so they fit a phone */
  .st-btn { white-space: normal; }
  .st-btn-lg { padding: 16px 26px; font-size: 15px; letter-spacing: 0.16em; }
  .st-btn-md { padding: 13px 22px; letter-spacing: 0.16em; }
}

/* ============================================================================
   MOBILE + ACCESSIBILITY REMEDIATION
   Added after a responsive/a11y audit. Each block states the defect it fixes.
   ========================================================================= */

/* 1. Images could overflow: there was no global max-width guard, so every image
      relied on its own inline width. Any image added without one broke layout. */
img, video, svg, iframe { max-width: 100%; }

/* 2. Focus was invisible site-wide: .st-input/.st-select set `outline:none` and
      replaced it with a 1px border shift (~1.6:1) — and buttons, nav and links
      had no focus style at all. Keyboard and switch users could not see where
      they were. WCAG 2.4.7. */
:focus-visible {
  outline: 2px solid var(--ghp-taupe-bronze);
  outline-offset: 3px;
  border-radius: 4px;
}
.st-input:focus-visible, .st-select:focus-visible, .ds-newsletter input:focus-visible {
  outline: 2px solid var(--ghp-taupe-bronze);
  outline-offset: 2px;
}

/* 3. Flip-card backs were unreachable on touch. The back face holds the ONLY
      description of each offering, revealed via :hover — which never fires on a
      phone. The entire home-page offerings section was seven bare headings on
      mobile. Under (hover:none) drop the 3D flip and stack both faces. */
@media (hover: none) {
  .st-flip-inner { transform: none !important; transition: none; }
  .st-flip { height: auto; }
  .st-flip-face {
    backface-visibility: visible; -webkit-backface-visibility: visible;
    position: static; transform: none; height: auto;
  }
  .st-flip-back { padding-top: 0; }
  /* The front face repeats the same "Enter →" link as the back; with both faces
     now visible that is a duplicate link to the same href, so hide one. */
  .st-flip-front .st-link { display: none; }
}

/* 4. The popup could not be dismissed or completed on a landscape phone: the
      backdrop centred a ~500px dialog with no overflow, so on a 375px-tall
      viewport the close button sat above the fold and the submit button below
      it, with backdrop-tap the only (undiscoverable) escape. */
.st-popup-backdrop { overflow-y: auto; align-items: flex-start; }
.st-popup { margin: auto; }
@media (max-height: 520px) {
  .st-popup { padding: 28px 24px 24px; }
  .st-popup .st-signoff { display: none; }
}

/* 5. The popup close button was ~24x40px — under the 44px touch minimum, and
      the only discoverable way to dismiss a modal that blocks the whole page. */
.st-popup-close {
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center; padding: 0;
}

/* 6. Footer and inline arrow links were ~27px and ~39px tall — under 44px. */
.st-footer-link { display: inline-block; padding: 9px 0; }
.st-link { padding: 12px 2px; }

/* 7. Header overflowed below ~330px: the brand name is `white-space:nowrap` in a
      flex item defaulting to min-width:auto, so it refused to shrink and pushed
      the burger past the edge — where `overflow-x: clip` silently cut it off. */
@media (max-width: 380px) {
  .st-header-brand { min-width: 0; }
  .st-header-name { white-space: normal; }
}

/* 8. `scroll-behavior: smooth` was never disabled for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
   Retreat — Egypt 2027 (retreat.php)
   ============================================================ */
.st-ret-cell-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.st-ret-cell-body { padding: 34px 36px 42px; display: flex; flex-direction: column; gap: 14px; }
.st-ret-cell-body p { font-size: 1.15rem; line-height: 1.65; color: var(--text-secondary); margin: 0; }
.st-ret-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 44px 36px; text-align: center; min-height: 100%; box-sizing: border-box;
}
.st-ret-more p, .st-ret-cell-body p { flex: none; } /* undo .st-off-cell p { flex:1 } stretch */
.st-ret-incl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 56px; max-width: 1060px; margin: 0 auto; }
.st-ret-incl-item { display: flex; gap: 16px; align-items: flex-start; }
.st-ret-incl-item .st-body { font-size: 1.15rem; line-height: 1.6; }
.st-ret-diamond {
  width: 8px; height: 8px; transform: rotate(45deg);
  background: var(--ghp-champagne-gold); flex-shrink: 0; margin-top: 11px;
}
.st-ret-ext { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1280px; margin: 0 auto; }
.st-ret-ext .st-subcol { padding: 0; overflow: hidden; gap: 0; }
.st-ret-ext-body { padding: 36px 36px 44px; display: flex; flex-direction: column; gap: 16px; }
.st-ret-guide { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.st-ret-guide img { width: 100%; border-radius: 20px; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.st-ret-guide figcaption {
  font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--text-gold);
}
.st-ret-fine {
  max-width: 820px; margin: 0 auto; font-size: 0.9rem; line-height: 1.75;
  color: var(--text-secondary); text-align: center;
}
@media (max-width: 900px) {
  .st-ret-incl { grid-template-columns: 1fr; }
  .st-ret-ext { grid-template-columns: 1fr; }
}