/* =============================================================
   AURE SPACE — v1.3
   Brand palette (do not change these hex values):
   Soft Ivory #F8F4EC · Warm Linen #F3EDE2 · Mist Blue #A9D6D2
   Sage Green #7FA69A · Deep Teal #3D8078 · Forest Green #2D4F49
   Soft Apricot #FFDDBB · Golden Apricot #FFB978 · Sand Gold #E8C78F
   Charcoal Green #233A37
   ============================================================= */

:root {
  --ivory: #f8f4ec;
  --linen: #f3ede2;
  --mist: #a9d6d2;
  --sage: #7fa69a;
  --teal: #3d8078;
  --forest: #2d4f49;
  --apricot-soft: #ffddbb;
  --apricot-gold: #ffb978;
  --sand-gold: #e8c78f;
  --charcoal: #233a37;

  --ink: var(--charcoal);
  --muted: rgba(35, 58, 55, 0.78);
  --gold-text: #7a5209;
  --paper: rgba(255, 255, 255, 0.6);
  --line: rgba(232, 199, 143, 0.45);
  --shadow: 0 28px 80px rgba(35, 58, 55, 0.16);
  --soft-shadow: 0 16px 45px rgba(35, 58, 55, 0.12);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --script: "Alex Brush", "Segoe Script", cursive;
}

.script-accent {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.28em;
  line-height: 1;
  color: #A9D6D2;
  padding: 0 0.05em;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 12%, rgba(255, 185, 120, 0.2), transparent 28rem),
    radial-gradient(circle at 18% 40%, rgba(169, 214, 210, 0.28), transparent 34rem),
    linear-gradient(135deg, var(--ivory), var(--linen));
  font-family: var(--sans);
  font-weight: 300;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font-family: inherit;
}

.page-shell {
  position: relative;
  /* clip (not hidden) so position: sticky children still work */
  overflow: clip;
  min-height: 100vh;
}

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.36) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
}

.ambient {
  position: fixed;
  z-index: 0;
  width: 42rem;
  height: 42rem;
  border-radius: 999px;
  filter: blur(8px);
  pointer-events: none;
}

.ambient-one {
  top: -18rem;
  right: -12rem;
  background: rgba(255, 185, 120, 0.2);
}

.ambient-two {
  left: -20rem;
  bottom: 12rem;
  background: rgba(127, 166, 154, 0.22);
}

.site-header,
main,
.site-footer,
.floating-contact {
  position: relative;
  z-index: 2;
}

/* --- Header --- */

.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  width: min(100% - 4rem, 94rem);
  margin: 1.4rem auto 0;
  padding: 1rem clamp(1.2rem, 3vw, 2.2rem);
  background: var(--forest);
  border-radius: 1.6rem;
  box-shadow: var(--soft-shadow);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.brand-lockup img {
  width: 3.9rem;
  height: 3.9rem;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--soft-shadow);
}

.brand-lockup strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--ivory);
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-lockup span {
  display: block;
  min-width: max-content;
}

.brand-lockup small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--mist);
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: clamp(1.3rem, 2.6vw, 3rem);
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--forest);
}

.main-nav a {
  position: relative;
  padding-bottom: 0.3rem;
  color: var(--ivory);
  transition: color 180ms ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--sand-gold);
  transition: right 220ms ease;
}

.main-nav a:hover {
  color: var(--mist);
}

.main-nav a:hover::after {
  right: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.9rem;
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.28rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
}

.lang-btn {
  border: 0;
  padding: 0.4rem 0.62rem;
  border-radius: 999px;
  background: transparent;
  color: var(--ivory);
  font: 600 0.7rem var(--sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.lang-btn:hover {
  color: var(--mist);
}

.lang-btn.is-active {
  color: var(--forest);
  background: var(--ivory);
  box-shadow: 0 6px 16px rgba(45, 79, 73, 0.24);
}

.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.78rem 1.45rem;
  border: 1px solid rgba(45, 79, 73, 0.12);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.pill-button:hover,
.card-link:hover,
.text-link:hover {
  transform: translateY(-2px);
}

.pill-button.primary {
  color: var(--ivory);
  background: var(--forest);
}

.header-cta {
  color: var(--forest);
  background: var(--ivory);
  box-shadow: 0 14px 30px rgba(45, 79, 73, 0.2);
}

.pill-button.secondary {
  color: var(--forest);
  background: rgba(255, 255, 255, 0.7);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--forest);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: transform 180ms ease;
  cursor: pointer;
  background: none;
  border: 0;
}

.text-link::after {
  content: "→";
  color: var(--sand-gold);
}

/* --- Hero --- */

.hero-canvas {
  display: grid;
  grid-template-columns: minmax(24rem, 1fr) minmax(24rem, 0.92fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: min(100% - 4rem, 94rem);
  min-height: 44rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.4rem;
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 36rem;
}

.eyebrow {
  margin: 0 0 1.2rem;
  color: var(--gold-text);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--forest);
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.04;
}

h1 {
  max-width: 15ch;
  font-size: clamp(3.2rem, 5.6vw, 5.6rem);
}

h1 .accent {
  font-family: var(--script);
  font-size: 1.28em;
  font-weight: 400;
  color: #A9D6D2;
  padding: 0 0.05em;
}

.hero-tagline {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 1.5rem 0 0;
  color: var(--forest);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero-tagline::before {
  content: "";
  width: 2.6rem;
  height: 1px;
  background: var(--sand-gold);
}

.hero-text {
  max-width: 30rem;
  margin: 1.3rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2.1rem;
}

.hero-visual {
  position: relative;
  z-index: 1;
  min-height: 34rem;
  display: grid;
  place-items: center;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(232, 199, 143, 0.42);
  border-radius: 50%;
  pointer-events: none;
}

.orbit-large {
  width: clamp(24rem, 30vw, 32rem);
  aspect-ratio: 1;
}

.orbit-small {
  width: 8rem;
  aspect-ratio: 1;
  top: 8%;
  left: 6%;
  border-color: rgba(127, 166, 154, 0.4);
}

.wave-stack {
  position: absolute;
  inset: auto 0 -2rem 0;
  width: clamp(22rem, 30vw, 32rem);
  height: 10rem;
  margin: 0 auto;
  pointer-events: none;
}

.wave-stack span {
  position: absolute;
  right: 0;
  left: 0;
  height: 6.4rem;
  border-radius: 70% 30% 0 0 / 100% 100% 0 0;
  transform: skewY(-5deg);
}

.wave-stack span:nth-child(1) {
  bottom: 0;
  background: rgba(45, 79, 73, 0.14);
}

.wave-stack span:nth-child(2) {
  bottom: 1rem;
  background: rgba(169, 214, 210, 0.35);
}

.wave-stack span:nth-child(3) {
  bottom: 2rem;
  border-top: 1px solid rgba(232, 199, 143, 0.6);
}

/* --- Flip card (hero portrait + smart cards share this mechanic) --- */

.flip-card {
  position: relative;
  z-index: 2;
  perspective: 1600px;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-inner {
  transform: rotateY(180deg);
}

@media (hover: hover) {
  .hero-flip:hover .flip-inner {
    transform: rotateY(180deg);
  }
}

.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-face.flip-back {
  transform: rotateY(180deg);
}

.hero-flip {
  width: clamp(30rem, 40vw, 40rem);
  aspect-ratio: 0.78;
}

.hero-flip .flip-front {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid rgba(232, 199, 143, 0.4);
  border-radius: 50%;
  overflow: hidden;
  background: var(--linen);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.hero-flip .flip-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 32%;
  filter: saturate(0.92) brightness(1.04);
}

.flip-hint {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  color: var(--forest);
  background: rgba(255, 255, 255, 0.86);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: var(--soft-shadow);
}

.hero-flip .flip-back {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.1rem;
  padding: 2.4rem;
  border-radius: 52% 48% 46% 54% / 58% 54% 46% 42%;
  color: var(--ivory);
  background: linear-gradient(160deg, var(--forest), var(--teal));
  box-shadow: var(--shadow);
}

.hero-flip .flip-back p {
  margin: 0;
  font-family: var(--script);
  /* The card shrinks with the viewport, so the text has to scale with it.
     A fixed size overflowed the oval on small phones once the bio grew.
     Desktop keeps the original 1.95rem. */
  font-size: clamp(1.15rem, 3.9vw, 1.95rem);
  line-height: 1.6;
}

.hero-flip .flip-back .text-link {
  color: var(--apricot-soft);
}

.hero-flip .flip-back .text-link::after {
  color: var(--apricot-gold);
}

.flip-toggle-back {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

/* --- Journey section --- */

.journey-section {
  width: min(100% - 4rem, 94rem);
  margin: 1rem auto 0;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  margin-bottom: 1.6rem;
}

.section-heading h2,
.about-panel h2,
.podcast-teaser-copy h2 {
  font-size: clamp(2.1rem, 3.6vw, 3.6rem);
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

.journey-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 30rem;
  overflow: hidden;
  border: 1px solid rgba(232, 199, 143, 0.3);
  border-radius: 1.6rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(243, 237, 226, 0.78));
  box-shadow: var(--soft-shadow);
  transition:
    transform 260ms ease,
    box-shadow 260ms ease;
}

.card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(22px) saturate(0.9) brightness(1.05);
  transform: scale(1.15);
}

.card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(243, 237, 226, 0.9) 62%, rgba(243, 237, 226, 0.96) 100%);
}

.journey-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.card-image {
  position: relative;
  z-index: 1;
  height: 13.5rem;
  overflow: hidden;
  border-radius: 1.6rem 1.6rem 58% 58% / 1.6rem 1.6rem 2.4rem 2.4rem;
}

/* All three journey photos share one height. */
.journey-card .card-image {
  width: 100%;
  height: clamp(15rem, 19vw, 19rem);
  opacity: 1;
}

.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45, 79, 73, 0) 55%, rgba(45, 79, 73, 0.28));
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(1.03);
  transition: transform 500ms ease;
}

.journey-card:hover .card-image img {
  transform: scale(1.05);
}

.card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.8rem 1.9rem 2rem;
}

.card-content h3 {
  color: var(--forest);
  font-size: clamp(1.42rem, 1.9vw, 1.78rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}

.card-content p {
  max-width: 24rem;
  margin: 0.85rem 0 0;
  /* Warmer and a little darker than the old grey. */
  color: rgba(35, 58, 55, 0.82);
  line-height: 1.62;
  font-size: 0.95rem;
  text-wrap: pretty;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.3rem 0 1.4rem;
  padding: 0;
  list-style: none;
}

.card-tags li {
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(45, 79, 73, 0.18);
  border-radius: 999px;
  color: var(--forest);
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  width: fit-content;
  margin-top: auto;
  padding: 0.4rem 0;
  color: var(--forest);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: gap 200ms ease;
}

/* Legacy rule: in the old markup the <span> inside .card-link was the ARROW,
   so it was painted sand gold. In the new card the <span> holds the CTA TEXT,
   and gold on cream measured 1.5:1 - effectively invisible. The gold now
   belongs to .card-arrow only; the label keeps the readable link colour. */
.card-link span {
  color: inherit;
  transition: transform 200ms ease;
}

.journey-card:hover .card-link span {
  transform: translateX(0);
}

/* --- Smart flip cards: gift + consultation --- */

.smart-cards-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  width: min(100% - 4rem, 94rem);
  margin: 2.4rem auto 0;
}

.smart-card {
  height: 14rem;
}

.smart-card .flip-face {
  border-radius: 1.3rem;
  box-shadow: var(--soft-shadow);
}

.smart-card .flip-front {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 2rem 2.2rem;
  border: 1px solid rgba(232, 199, 143, 0.34);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(169, 214, 210, 0.28));
  cursor: pointer;
  text-align: left;
}

.smart-card .flip-front .eyebrow {
  margin: 0;
}

.smart-card-text {
  margin: 0;
  max-width: 24rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.smart-card .flip-front .flip-hint {
  position: absolute;
  right: 1.6rem;
  bottom: 1.5rem;
  left: auto;
  transform: none;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--forest);
  background: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
}

.smart-card .flip-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  padding: 1.8rem 2.2rem;
  color: var(--ivory);
  background: linear-gradient(160deg, var(--teal), var(--forest));
}

.smart-card .flip-back p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

.smart-card .flip-back .pill-button.primary {
  width: fit-content;
  background: var(--ivory);
  color: var(--forest);
}

.smart-card .gift-form .newsletter-row input {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: var(--ivory);
}

.smart-card .gift-form .newsletter-row input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.smart-card .gift-form .pill-button {
  background: var(--ivory);
  color: var(--forest);
  border: 0;
}

.smart-card .consent-row.small {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.78);
}

.smart-card .form-success {
  background: rgba(255, 255, 255, 0.18);
  color: var(--ivory);
  border-color: rgba(255, 255, 255, 0.3);
}

/* --- Featured free meditation: full-width flip card --- */

.gift-feature-section {
  width: min(100% - 4rem, 94rem);
  margin: 2.5rem auto 0;
}

.gift-feature-card {
  height: clamp(21rem, 27vw, 25rem);
  isolation: isolate;
  border-radius: 2rem;
  background: var(--forest);
}

.gift-feature-card .flip-face {
  overflow: hidden;
  border: 1px solid rgba(232, 199, 143, 0.55);
  border-radius: 2rem;
  box-shadow: 0 24px 64px rgba(45, 79, 73, 0.14);
}

.gift-feature-front {
  width: 100%;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: var(--forest);
  background: var(--linen);
  cursor: pointer;
  text-align: left;
}

.gift-feature-art {
  position: absolute;
  inset: 0;
  background-position: center 58%;
  background-size: cover;
  filter: saturate(0.82) contrast(0.96);
  transform: scale(1.01);
  transition: transform 700ms ease;
}

.gift-feature-front::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(248, 244, 236, 0.98) 0%, rgba(248, 244, 236, 0.92) 38%, rgba(248, 244, 236, 0.42) 69%, rgba(45, 79, 73, 0.12) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(45, 79, 73, 0.08));
}

.gift-feature-front:hover .gift-feature-art {
  transform: scale(1.045);
}

.gift-feature-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(42rem, 68%);
}

.gift-feature-copy .eyebrow,
.gift-feature-back .eyebrow {
  margin: 0 0 1rem;
  color: var(--apricot-gold);
}

.gift-feature-title {
  display: block;
  max-width: 32rem;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.6vw, 4.9rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.gift-feature-text {
  display: block;
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.65;
}

.gift-feature-plus,
.gift-feature-close {
  position: absolute;
  right: clamp(1.4rem, 3vw, 2.8rem);
  bottom: clamp(1.4rem, 3vw, 2.8rem);
  z-index: 2;
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border: 1px solid rgba(45, 79, 73, 0.08);
  border-radius: 50%;
  color: var(--forest);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--soft-shadow);
  font-family: var(--sans);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
}

.gift-feature-back {
  display: flex;
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: var(--ivory);
  background-color: var(--forest);
  background:
    radial-gradient(circle at 78% 35%, rgba(169, 214, 210, 0.22), transparent 30%),
    linear-gradient(135deg, var(--forest), var(--teal));
}

.gift-feature-back::after {
  position: absolute;
  right: -7rem;
  bottom: -9rem;
  width: 27rem;
  height: 27rem;
  border: 1px solid rgba(232, 199, 143, 0.22);
  border-radius: 50%;
  content: "";
}

.gift-feature-back-copy {
  position: relative;
  z-index: 1;
  max-width: 52rem;
}

.gift-feature-back h2 {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(2.25rem, 4vw, 4.1rem);
  line-height: 1;
}

.gift-feature-back p {
  max-width: 44rem;
  margin: 1rem 0 0;
  color: rgba(248, 244, 236, 0.86);
  font-size: clamp(0.96rem, 1.25vw, 1.08rem);
  line-height: 1.7;
}

.gift-feature-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 1.5rem;
}

.gift-feature-back .pill-button.primary {
  color: var(--forest);
  background: var(--ivory);
}

.gift-feature-back .text-link {
  color: var(--apricot-soft);
}

.gift-feature-close {
  top: clamp(1.4rem, 3vw, 2.5rem);
  right: clamp(1.4rem, 3vw, 2.5rem);
  bottom: auto;
  width: 2.8rem;
  height: 2.8rem;
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: none;
  cursor: pointer;
}

.gift-feature-card:not(.is-flipped) .gift-feature-back,
.gift-feature-card.is-flipped .gift-feature-front {
  pointer-events: none;
}

/* This wide card uses an opaque face swap instead of sharing the generic 3D
   transform. Mobile Safari can otherwise composite the front button through
   the reverse face. The short turn-in motion keeps the tactile flip feeling,
   while only one fully opaque face is ever painted. */
.gift-feature-card .flip-inner,
.gift-feature-card.is-flipped .flip-inner {
  transform: none;
  transform-style: flat;
}

.gift-feature-card .gift-feature-front,
.gift-feature-card .gift-feature-back {
  transform: none;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  opacity: 1;
  transition: visibility 0s;
}

.gift-feature-card:not(.is-flipped) .gift-feature-front,
.gift-feature-card.is-flipped .gift-feature-back {
  visibility: visible;
  z-index: 2;
}

.gift-feature-card:not(.is-flipped) .gift-feature-back,
.gift-feature-card.is-flipped .gift-feature-front {
  visibility: hidden;
  z-index: 1;
}

.gift-feature-card.is-flipped .gift-feature-back {
  animation: gift-face-turn-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes gift-face-turn-in {
  from { transform: perspective(1200px) rotateY(-9deg) scale(0.985); }
  to { transform: perspective(1200px) rotateY(0) scale(1); }
}

.gift-feature-front:focus-visible,
.gift-feature-close:focus-visible {
  outline: 3px solid var(--apricot-gold);
  outline-offset: 4px;
}

.spotify-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  margin-top: 0.8rem;
}

@media (max-width: 720px) {
  .gift-feature-section {
    width: min(100% - 2rem, 94rem);
  }

  .gift-feature-card {
    height: 25rem;
  }

  .gift-feature-card .flip-face {
    border-radius: 1.5rem;
  }

  .gift-feature-front,
  .gift-feature-back {
    padding: 2rem 1.6rem;
  }

  .gift-feature-front::after {
    background: linear-gradient(180deg, rgba(248, 244, 236, 0.97) 0%, rgba(248, 244, 236, 0.88) 56%, rgba(45, 79, 73, 0.2) 100%);
  }

  .gift-feature-art {
    background-position: 62% 50%;
  }

  .gift-feature-copy {
    max-width: 100%;
  }

  .gift-feature-title {
    max-width: calc(100% - 2rem);
    font-size: clamp(2.45rem, 12vw, 3.65rem);
  }

  .gift-feature-text {
    max-width: 92%;
  }

  .gift-feature-back-copy {
    padding-right: 0.4rem;
  }

  .gift-feature-back h2 {
    max-width: calc(100% - 2.2rem);
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  .gift-feature-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 390px) {
  .gift-feature-card {
    height: 29rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gift-feature-card .flip-inner,
  .gift-feature-art {
    transition: none;
  }

  .gift-feature-card .gift-feature-front,
  .gift-feature-card .gift-feature-back {
    transition-delay: 0s;
  }
}

/* --- Lower grid: about teaser + podcast teaser --- */

.lower-grid,
.motto,
.site-footer {
  width: min(100% - 4rem, 94rem);
  margin-inline: auto;
}

.lower-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.6rem;
}

.about-panel,
.podcast-teaser {
  min-height: 23rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid rgba(232, 199, 143, 0.3);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: var(--soft-shadow);
}

.about-panel p:not(.eyebrow) {
  max-width: 30rem;
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

.about-panel .text-link {
  margin-top: 1.8rem;
}

.podcast-teaser {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--ivory);
  background: radial-gradient(circle at 82% 8%, rgba(169, 214, 210, 0.3), transparent 22rem), linear-gradient(160deg, var(--forest), var(--charcoal));
  border-color: rgba(232, 199, 143, 0.22);
}

.podcast-teaser-visual {
  position: absolute;
  right: -3rem;
  top: -3rem;
  width: 14rem;
  height: 14rem;
}

.podcast-teaser-visual .mini-rings span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(232, 199, 143, 0.35);
  border-radius: 50%;
}

.podcast-teaser-visual .mini-rings span:nth-child(2) {
  inset: 1.8rem;
  border-color: rgba(169, 214, 210, 0.4);
}

.mini-disc {
  position: absolute;
  inset: 3.4rem;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: var(--shadow);
  animation: discSpin 70s linear infinite;
}

.mini-disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podcast-teaser-copy {
  position: relative;
  z-index: 2;
  max-width: 26rem;
}

.podcast-teaser-copy .eyebrow {
  color: var(--apricot-gold);
}

.podcast-teaser-copy h2 {
  color: var(--ivory);
}

.podcast-teaser-copy p:not(.eyebrow) {
  margin: 1rem 0 0;
  color: rgba(248, 244, 236, 0.82);
  line-height: 1.75;
}

.podcast-teaser-copy .hero-actions {
  margin-top: 1.8rem;
}

.podcast-teaser-copy .text-link {
  color: var(--apricot-soft);
}

.podcast-teaser-copy .text-link::after {
  color: var(--apricot-gold);
}

/* --- Motto / floating cta / footer --- */

.motto {
  margin-top: 3.4rem;
  padding: 1.7rem 0 3rem;
  border-top: 1px solid var(--line);
  color: var(--forest);
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.42em;
}

.floating-contact {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 20;
  display: none;
  padding: 0.9rem 1.1rem;
  border-radius: 999px;
  color: var(--ivory);
  background: var(--forest);
  box-shadow: var(--soft-shadow);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer {
  display: block;
  padding: 0 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  padding: 2.4rem 0;
  border-top: 1px solid var(--line);
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.footer-brand img {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.footer-brand span {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  color: var(--forest);
  text-transform: uppercase;
}

.footer-brand small {
  display: block;
  max-width: 20rem;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.7;
}

.footer-col h4 {
  margin: 0 0 0.8rem;
  font: 600 0.72rem var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand-gold);
}

.footer-col a,
.footer-col span {
  display: block;
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.footer-col a:hover {
  color: var(--teal);
}

.footer-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(232, 199, 143, 0.28);
  color: var(--muted);
  font-size: 0.78rem;
}

.footer-credit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.38rem;
  color: rgba(81, 105, 99, 0.82);
  transition: color 180ms ease, transform 180ms ease;
}

.footer-credit strong {
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-credit:hover,
.footer-credit:focus-visible {
  color: var(--teal);
  transform: translateY(-1px);
}

/* --- Reveal-on-scroll (gated on html.js so content stays visible without JS) --- */

html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms ease, transform 900ms ease;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

html.js .delay-one,
html.js .delay-1 {
  transition-delay: 140ms;
}

html.js .delay-2 {
  transition-delay: 240ms;
}

html.js .delay-3 {
  transition-delay: 340ms;
}

@keyframes discSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }

  .mini-disc,
  .audio-disc {
    animation: none !important;
  }
}

/* =============================================================
   Podcast page
   ============================================================= */

.podcast-page {
  background:
    radial-gradient(circle at 78% 18%, rgba(169, 214, 210, 0.32), transparent 30rem),
    radial-gradient(circle at 18% 72%, rgba(255, 185, 120, 0.16), transparent 28rem),
    linear-gradient(145deg, var(--ivory), var(--linen) 62%, #edf3ed);
}

.audio-shell .ambient-one {
  background: rgba(169, 214, 210, 0.26);
}

.audio-shell .ambient-two {
  background: rgba(232, 199, 143, 0.18);
}

.audio-hero {
  display: grid;
  grid-template-columns: minmax(22rem, 0.95fr) minmax(26rem, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  width: min(100% - 4rem, 94rem);
  min-height: auto;
  margin: 0 auto;
  padding: 1.25rem 0 3rem;
}

.audio-copy h1 {
  max-width: 13ch;
  font-size: clamp(2.9rem, 5vw, 4.7rem);
}

.guided-text {
  max-width: 28rem;
  margin: 1.4rem 0 0;
  color: var(--teal);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.7;
}

/* The disc has ONE fixed size (--disc) and the orb reserves exactly that much
   room, so the whole circle — and the rings around it — is always fully
   visible instead of being cropped by the column. */
.audio-orb {
  --disc: 30rem;
  position: relative;
  min-height: calc(var(--disc) + 5rem);
  perspective: 1200px;
}

.sound-ring {
  position: absolute;
  inset: 50% auto auto 50%;
  border: 1px solid rgba(232, 199, 143, 0.36);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-18deg);
  box-shadow: 0 24px 80px rgba(45, 79, 73, 0.08);
  transition: box-shadow 600ms ease, border-color 600ms ease;
}

.ring-one {
  width: calc(var(--disc) * 1.12);
  height: calc(var(--disc) * 1.12);
}

.ring-two {
  width: calc(var(--disc) * 0.86);
  height: calc(var(--disc) * 0.86);
  border-color: rgba(61, 128, 120, 0.3);
}

.ring-three {
  width: calc(var(--disc) * 0.6);
  height: calc(var(--disc) * 0.6);
  border-color: rgba(255, 185, 120, 0.3);
}

[data-audio-shell].is-started .sound-ring {
  border-color: rgba(232, 199, 143, 0.75);
  box-shadow: 0 24px 90px rgba(255, 185, 120, 0.22);
}

.audio-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--disc);
  max-width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(232, 199, 143, 0.32);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%);
}

.audio-disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(1.03);
  animation: discSpin 90s linear infinite;
}

.sleep-card {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  max-width: 18rem;
  padding: 1.35rem;
  border: 1px solid rgba(232, 199, 143, 0.28);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
}

.sleep-card small,
.episode-topline {
  color: var(--sand-gold);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sleep-card strong {
  display: block;
  margin-top: 0.65rem;
  color: var(--forest);
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.1;
}

.mini-player {
  margin-top: 1.7rem;
  max-width: 30rem;
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
}

.mini-player iframe {
  display: block;
}

.retreat-video {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(24rem, 1.2fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  width: min(100% - 4rem, 94rem);
  margin: 4rem auto 0;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid rgba(232, 199, 143, 0.28);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--soft-shadow);
}

.retreat-video h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.6rem);
}

.retreat-video-copy p:not(.eyebrow) {
  max-width: 30rem;
}

.video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 1.2rem;
  background: #1c2b28;
}

.spotify-stage,
.audio-note {
  display: grid;
  grid-template-columns: minmax(20rem, 0.82fr) minmax(24rem, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: min(100% - 4rem, 94rem);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid rgba(232, 199, 143, 0.3);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
  transition: box-shadow 500ms ease;
}

[data-audio-shell].is-started .spotify-stage {
  box-shadow: 0 30px 90px rgba(255, 185, 120, 0.24);
}

.spotify-stage h2,
.audio-note h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.6rem);
}

.spotify-stage p:not(.eyebrow),
.audio-note p:not(.eyebrow) {
  max-width: 34rem;
  margin: 1.2rem 0 0;
  color: var(--muted);
  line-height: 1.8;
}

.spotify-frame {
  padding: 0.7rem;
  border: 1px solid rgba(61, 128, 120, 0.18);
  border-radius: 1.45rem;
  background: rgba(248, 244, 236, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.spotify-frame iframe {
  display: block;
}

.episode-section {
  width: min(100% - 4rem, 94rem);
  margin: 5rem auto 0;
}

.section-heading.centered {
  justify-content: center;
  text-align: center;
}

.episode-section .section-heading {
  margin-top: 3rem;
  justify-content: center;
  text-align: center;
}

.episode-section .section-heading:first-child {
  margin-top: 0;
}

.episode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  gap: 1.2rem;
}

.episode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 21rem;
  overflow: hidden;
  padding: 1.55rem;
  border: 1px solid rgba(232, 199, 143, 0.3);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 82% 14%, rgba(169, 214, 210, 0.3), transparent 8rem),
    rgba(255, 255, 255, 0.68);
  box-shadow: var(--soft-shadow);
  transition:
    transform 240ms ease,
    box-shadow 240ms ease;
}

.episode-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
}

.episode-card.is-premium {
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 185, 120, 0.28), transparent 8rem),
    rgba(255, 255, 255, 0.72);
}

.episode-badge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: linear-gradient(180deg, var(--apricot-gold), var(--sand-gold));
  color: var(--ivory);
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 24px rgba(45, 79, 73, 0.18);
}

.episode-card.is-premium .episode-badge {
  background: linear-gradient(180deg, var(--apricot-gold), var(--forest));
}

.episode-topline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.episode-topline small {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: none;
  font-weight: 400;
}

.episode-card h3 {
  margin-top: 1.6rem;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
}

.episode-card p {
  margin: 1rem 0 1.4rem;
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.92rem;
}

.episode-card .card-link {
  margin-top: auto;
}

.audio-note {
  grid-template-columns: auto minmax(20rem, 1fr) auto;
  margin-top: 1.5rem;
}

.audio-note img {
  width: 7rem;
  height: 7rem;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--soft-shadow);
  animation: discSpin 120s linear infinite;
}

/* =============================================================
   Skip link / visually hidden
   ============================================================= */

.skip-link {
  position: absolute;
  top: -3.5rem;
  left: 1rem;
  z-index: 50;
  padding: 0.7rem 1.1rem;
  border-radius: 0.4rem;
  color: var(--ivory);
  background: var(--forest);
  font: 600 0.78rem var(--sans);
  letter-spacing: 0.1em;
  transition: top 160ms ease;
}

.skip-link:focus {
  top: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Shared form styles --- */

.newsletter-row {
  display: flex;
  gap: 0.7rem;
}

.newsletter-row input {
  flex: 1;
  min-width: 0;
}

.newsletter-row input,
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(45, 79, 73, 0.25);
  border-radius: 0.4rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  font: 400 0.95rem var(--sans);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contact-form textarea {
  resize: vertical;
}

.newsletter-row input:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(61, 128, 120, 0.18);
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.consent-row input {
  width: auto;
  margin-top: 0.2rem;
  accent-color: var(--forest);
}

.form-success {
  margin: 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(127, 166, 154, 0.4);
  border-radius: 0.6rem;
  color: var(--forest);
  background: rgba(169, 214, 210, 0.22);
  font-family: var(--serif);
  font-size: 1.15rem;
}

/* --- Credentials timeline --- */

.credentials-section {
  width: min(100% - 4rem, 94rem);
  margin: 5rem auto 0;
}

.section-note {
  max-width: 40rem;
  margin: 1rem 0 0;
  color: var(--muted);
  line-height: 1.8;
}

/* --- Education timeline ---------------------------------------------------
   One thin gold axis with the milestones alternating above and below it.
   Alternating gives each milestone the full column width, so the whole
   history reads as one compact band instead of a row of tall boxed cards.

   The axis is a real grid item (.credentials-axis) sitting in its own middle
   row, so it always lands exactly between the two rows of milestones - no
   matter how tall the text becomes in German or Slovak.

   The longer story for each milestone (item.detail in content.js) is behind
   a small toggle. It used to appear on hover only, which meant it could not
   be reached at all on a phone.
   -------------------------------------------------------------------------- */

.credentials-timeline {
  position: relative;
  display: grid;
  /* --milestones is set from js/main.js to the number of entries. */
  grid-template-columns: repeat(var(--milestones, 6), minmax(0, 1fr));
  grid-template-rows: auto 1px auto;
  column-gap: clamp(0.9rem, 2.2vw, 2.2rem);
  margin: 2.6rem 0 0;
  padding: 0;
  list-style: none;
}

.credentials-axis {
  grid-row: 2;
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sand-gold) 7%, var(--sand-gold) 93%, transparent);
}

.credential {
  position: relative;
  display: block;
  padding-left: 1.15rem;
  border: 0;
  background: none;
}

.credential.is-above {
  grid-row: 1;
  grid-column: var(--column);
  align-self: end;
  padding-bottom: 2.05rem;
}

.credential.is-below {
  grid-row: 3;
  grid-column: var(--column);
  align-self: start;
  padding-top: 2.05rem;
}

/* The dot sitting on the axis. */
.credential-marker {
  position: absolute;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid var(--sand-gold);
  border-radius: 50%;
  background: var(--ivory);
  box-shadow: 0 0 0 4px rgba(232, 199, 143, 0.16);
  transition: background 220ms ease, box-shadow 220ms ease;
}

.credential.is-above .credential-marker { bottom: -0.3rem; }
.credential.is-below .credential-marker { top: -0.3rem; }

/* Hairline stem from the milestone to its dot. */
.credential-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 1.45rem;
  background: rgba(232, 199, 143, 0.55);
}

.credential.is-above .credential-marker::before { bottom: 100%; margin-bottom: 0.14rem; }
.credential.is-below .credential-marker::before { top: 100%;    margin-top: 0.14rem; }

.credential:hover .credential-marker,
.credential:focus-within .credential-marker {
  background: var(--sand-gold);
  box-shadow: 0 0 0 5px rgba(232, 199, 143, 0.28);
}

.credential-year {
  display: block;
  margin-bottom: 0.32rem;
  color: var(--teal);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.2;
}

.credential strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--forest);
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.credential p {
  margin: 0;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* --- "Read the story" disclosure -----------------------------------------
   Editorial, not a UI control: the site's serif in title case with a thin
   drawn arrow. No uppercase, no tracking, no pill, no chevron-in-a-circle.
   -------------------------------------------------------------------------- */

.credential-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.6rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--teal);
  font-family: var(--serif);
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color 260ms ease;
}

.credential-more:hover {
  color: var(--forest);
}

.credential-more:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* A hairline arrow drawn in CSS: a rule with a small head. */
.credential-arrow {
  position: relative;
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  flex: none;
  background: var(--sand-gold);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), background 260ms ease;
}

.credential-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 1px solid var(--sand-gold);
  border-right: 1px solid var(--sand-gold);
  transform: translateY(-50%) rotate(45deg);
  transform-origin: 60% 40%;
  transition: border-color 260ms ease;
}

.credential-more:hover .credential-arrow {
  transform: translateX(5px);
}

/* Open state: the arrow turns downward instead of adding a new label,
   so no extra translation key is needed. */
.credential-more[aria-expanded="true"] .credential-arrow {
  transform: rotate(90deg);
}

.credential-more[aria-expanded="true"]:hover .credential-arrow {
  transform: rotate(90deg) translateX(4px);
}

/* --- The story itself: an editorial annotation ----------------------------
   0fr -> 1fr animates to the real content height, so nothing is clipped and
   no max-height has to be guessed for four different languages.
   -------------------------------------------------------------------------- */

.credential-story {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0.55rem;
  transition: grid-template-rows 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.credential-story.is-open {
  grid-template-rows: 1fr;
}

.credential-story-inner {
  position: relative;
  overflow: hidden;
  /* space for the gold rule; no box, no background, no radius */
  padding-left: 1.15rem;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition:
    opacity 460ms ease 90ms,
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1) 90ms,
    visibility 0s linear 560ms;
}

.credential-story.is-open .credential-story-inner {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 120ms, 120ms, 0s;
}

/* The thin sand-gold rule, drawn from the top down as the story opens. */
.credential-story-accent {
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.15rem;
  width: 1px;
  background: linear-gradient(180deg, var(--sand-gold), rgba(232, 199, 143, 0.15));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms;
}

.credential-story.is-open .credential-story-accent {
  transform: scaleY(1);
}

/* The small gold dot at the head of the rule. */
.credential-story-accent::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--sand-gold);
  transform: translate(-50%, -50%);
}

.credential-story p {
  margin: 0;
  max-width: 20rem;
  color: rgba(35, 58, 55, 0.78);
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  text-wrap: pretty;
}

/* --- Active milestone: restrained emphasis, no card ---------------------- */

.credential.is-open .credential-marker {
  background: var(--sand-gold);
  box-shadow: 0 0 0 5px rgba(232, 199, 143, 0.3);
}

.credential.is-open .credential-marker::before {
  height: 1.75rem;
  background: rgba(232, 199, 143, 0.8);
}

.credential.is-open .credential-year {
  color: var(--forest);
}

.credential.is-open .credential-more {
  color: var(--forest);
}
@media (prefers-reduced-motion: reduce) {
  .credential {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Contact section --- */

.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  width: min(100% - 4rem, 94rem);
  margin: 5rem auto 0;
  padding: clamp(2rem, 4vw, 4rem);
  border: 1px solid rgba(232, 199, 143, 0.3);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
}

.contact-intro p:not(.eyebrow) {
  max-width: 30rem;
  margin: 1.1rem 0 0;
  color: var(--muted);
  line-height: 1.8;
}

.contact-direct {
  display: grid;
  gap: 1.3rem;
  margin: 2.2rem 0 0;
}

.contact-direct dt {
  font: 600 0.72rem var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-gold);
}

.contact-direct dd {
  margin: 0.3rem 0 0;
  color: var(--ink);
  font-size: 0.95rem;
}

.contact-direct a {
  color: var(--teal);
}

.contact-direct a:hover {
  color: var(--forest);
}

.contact-form .field {
  margin-top: 1.1rem;
}

.contact-form .field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.contact-form .field-grid .field {
  margin-top: 0;
}

.contact-form label {
  display: block;
  margin-bottom: 0.45rem;
  font: 500 0.8rem var(--sans);
  letter-spacing: 0.05em;
  color: var(--forest);
}

.contact-mailto-hint {
  margin-top: 0.85rem;
  color: rgba(31, 58, 47, 0.62);
  max-width: 44ch;
}

.contact-form .pill-button {
  margin-top: 1.6rem;
  border: 0;
  cursor: pointer;
}

/* =============================================================
   Responsive
   ============================================================= */

@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .main-nav {
    order: 3;
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.35rem;
  }

  .hero-canvas {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  .hero-copy {
    padding-top: 1rem;
  }

  .hero-visual {
    min-height: 30rem;
  }

  .journey-grid,
  .lower-grid,
  .episode-grid,
  .smart-cards-section {
    grid-template-columns: 1fr;
  }

  .audio-hero,
  .spotify-stage,
  .audio-note,
  .retreat-video {
    grid-template-columns: 1fr;
  }

  .audio-orb {
    --disc: 26rem;
  }

  .newsletter-stripe,
  .contact-section {
    grid-template-columns: 1fr;
  }

  .credentials-timeline-legacy::before {
    top: 0.5rem;
    right: auto;
    bottom: 0.5rem;
    left: 0.31rem;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, var(--sand-gold) 8%, var(--sand-gold) 92%, transparent);
  }

  /* year size is set once in the timeline block - no mobile override */
}

@media (max-width: 720px) {
  .site-header,
  .hero-canvas,
  .audio-hero,
  .spotify-stage,
  .episode-section,
  .audio-note,
  .journey-section,
  .smart-cards-section,
  .lower-grid,
  .motto,
  .site-footer {
    width: min(100% - 1.6rem, 94rem);
  }

  .site-header {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding-top: 0.9rem;
  }

  .header-actions {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .brand-lockup img {
    width: 3rem;
    height: 3rem;
  }

  .brand-lockup strong {
    font-size: 0.92rem;
  }

  .brand-lockup small {
    display: none;
  }

  .header-actions {
    gap: 0.5rem;
  }

  .language-switcher {
    padding: 0.2rem;
  }

  .lang-btn {
    padding: 0.32rem 0.46rem;
    font-size: 0.62rem;
  }

  .header-cta {
    padding: 0.6rem 0.9rem;
    font-size: 0.62rem;
    min-height: auto;
  }

  .main-nav {
    gap: 1.3rem;
    font-size: 0.98rem;
  }

  h1 {
    font-size: clamp(2.6rem, 11vw, 3.6rem);
  }

  .hero-text {
    font-size: 1rem;
  }

  .hero-visual {
    min-height: 22rem;
  }

  .hero-flip {
    width: min(88vw, 28.5rem);
  }

  .journey-section {
    margin-top: 1rem;
  }

  .section-heading {
    display: block;
  }

  .motto {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    line-height: 2;
  }

  .floating-contact {
    display: inline-flex;
  }

  .audio-hero {
    min-height: auto;
    padding-top: 2.5rem;
  }

  .sleep-card {
    right: 0.3rem;
    bottom: 1.3rem;
    max-width: 14.5rem;
  }

  .spotify-stage,
  .audio-note {
    padding: 1.35rem;
  }

  .audio-note img {
    width: 5.5rem;
    height: 5.5rem;
    margin-bottom: 1.2rem;
  }

  .newsletter-row {
    flex-direction: column;
  }

  .contact-form .field-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-form .field-grid .field + .field {
    margin-top: 1.1rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.3rem;
  }
}

/* =============================================================
   v0.7 mobile-first refinement and navigation
   ============================================================= */

body.nav-open {
  overflow: hidden;
}

.mobile-menu-toggle {
  display: none;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0.72rem;
  border: 1px solid rgba(45, 79, 73, 0.14);
  border-radius: 999px;
  background: rgba(248, 244, 236, 0.8);
  box-shadow: 0 8px 25px rgba(45, 79, 73, 0.08);
  backdrop-filter: blur(14px);
  cursor: pointer;
}

.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  margin: 4px 0;
  background: var(--forest);
  transition: transform 220ms ease, opacity 180ms ease;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

@media (max-width: 1280px) {
  .site-header,
  .hero-canvas,
  .audio-hero,
  .spotify-stage,
  .episode-section,
  .audio-note,
  .journey-section,
  .smart-cards-section,
  .lower-grid,
  .credentials-section,
  .contact-section,
  .motto,
  .site-footer {
    width: min(100% - 3rem, 88rem);
  }

  .site-header {
    gap: 1.25rem;
  }

  .main-nav {
    gap: clamp(1rem, 2vw, 2rem);
  }

  .hero-canvas {
    grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
    gap: clamp(2rem, 4vw, 4rem);
  }

  h1 {
    font-size: clamp(3.4rem, 6.2vw, 6.2rem);
  }
}

@media (max-width: 1080px) and (min-width: 901px) {
  .site-header {
    grid-template-columns: minmax(15rem, 1fr) auto;
  }

  .main-nav {
    order: 3;
    grid-column: 1 / -1;
    justify-content: center;
    overflow: visible;
    padding: 0.7rem 0 0.2rem;
    border-top: 1px solid rgba(232, 199, 143, 0.28);
  }

  .hero-canvas {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
    align-items: center;
  }

  .hero-visual {
    min-height: 29rem;
  }

  .hero-flip {
    width: min(42vw, 30rem);
  }

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

  .journey-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 42rem);
    justify-self: center;
  }

  .smart-cards-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 900px) {
  .site-header {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding-top: 1rem;
  }

  .mobile-menu-toggle {
    display: block;
    grid-column: 2;
    grid-row: 1;
  }

  .brand-lockup {
    grid-column: 1;
    grid-row: 1;
  }

  .header-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-between;
    width: 100%;
    padding-top: 0.45rem;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 0;
    right: 0;
    z-index: 30;
    display: grid;
    gap: 0;
    padding: 0.8rem;
    border: 1px solid rgba(232, 199, 143, 0.34);
    border-radius: 1.2rem;
    background: rgba(248, 244, 236, 0.97);
    box-shadow: 0 24px 60px rgba(45, 79, 73, 0.16);
    backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.7rem) scale(0.985);
    transition: opacity 180ms ease, transform 220ms ease, visibility 180ms ease;
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .main-nav a {
    padding: 0.95rem 1rem;
    border-radius: 0.8rem;
    font-size: 1.12rem;
  }

  .main-nav a:hover,
  .main-nav a:focus-visible {
    background: rgba(169, 214, 210, 0.2);
  }

  .hero-canvas,
  .audio-hero {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 43rem;
    padding-top: 2.4rem;
  }

  .hero-visual {
    min-height: 31rem;
  }

  .hero-flip {
    width: min(85vw, 34rem);
  }

  .journey-grid,
  .lower-grid,
  .newsletter-stripe,
  .contact-section,
  .spotify-stage,
  .audio-note {
    grid-template-columns: 1fr;
  }

  .journey-grid {
    gap: 1.25rem;
  }

  .journey-card {
    min-height: auto;
  }

  .smart-cards-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .audio-note {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .site-header,
  .hero-canvas,
  .audio-hero,
  .spotify-stage,
  .episode-section,
  .audio-note,
  .journey-section,
  .smart-cards-section,
  .lower-grid,
  .credentials-section,
  .contact-section,
  .motto,
  .site-footer {
    width: min(100% - 1.5rem, 94rem);
  }

  .brand-lockup img {
    width: 3.2rem;
    height: 3.2rem;
  }

  .brand-lockup strong {
    font-size: 0.96rem;
    letter-spacing: 0.14em;
  }

  .brand-lockup small {
    display: block;
    font-size: 0.52rem;
    letter-spacing: 0.2em;
  }

  .language-switcher {
    max-width: calc(100vw - 8.5rem);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .language-switcher::-webkit-scrollbar {
    display: none;
  }

  .lang-btn {
    flex: 0 0 auto;
    min-width: 2.25rem;
    padding: 0.4rem 0.48rem;
    font-size: 0.64rem;
  }

  .header-cta {
    flex: 0 0 auto;
    min-height: 2.45rem;
    padding: 0.62rem 0.86rem;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }

  h1 {
    max-width: 12ch;
    font-size: clamp(2.75rem, 13vw, 4.4rem);
    line-height: 0.98;
  }

  h1 .accent {
    display: inline;
  }

  .hero-tagline {
    letter-spacing: 0.12em;
    line-height: 1.7;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .hero-visual {
    min-height: 25rem;
  }

  .hero-flip {
    width: min(92vw, 30rem);
  }

  .flip-hint {
    width: max-content;
    max-width: calc(100% - 2rem);
    text-align: center;
  }

  .hero-flip .flip-back {
    padding: 1.7rem 1.5rem;
    gap: 0.8rem;
  }

  .journey-grid,
  .smart-cards-section,
  .episode-grid {
    grid-template-columns: 1fr;
  }

  .card-image {
    height: clamp(12rem, 54vw, 16rem);
  }

  .card-content {
    padding: 1.45rem 1.35rem 1.6rem;
  }

  .smart-card {
    height: 18rem;
  }

  .smart-card .flip-front,
  .smart-card .flip-back {
    padding: 1.55rem;
  }

  .smart-card .flip-back {
    overflow-y: auto;
  }

  .about-panel,
  .podcast-teaser {
    min-height: auto;
    padding: 2rem 1.45rem;
  }

  .podcast-teaser {
    padding-top: 8rem;
  }

  .podcast-teaser-visual {
    right: 50%;
    top: -1.4rem;
    transform: translateX(50%);
    width: 12rem;
    height: 12rem;
  }

  .audio-orb {
    --disc: 20rem;
  }

  .sleep-card {
    right: 50%;
    bottom: -0.5rem;
    width: min(82vw, 19rem);
    max-width: none;
    transform: translateX(50%);
  }

  .spotify-stage,
  .audio-note,
  .contact-section,
  .newsletter-stripe {
    padding: 1.4rem;
  }

  .spotify-frame {
    min-width: 0;
    padding: 0.45rem;
  }

  .spotify-frame iframe {
    min-width: 0;
    height: 352px;
  }

  .episode-card {
    min-height: auto;
  }

  .credentials-viewport {
    height: auto;
    position: static;
    overflow: visible;
  }

  .credentials-line {
    display: none;
  }

  /* .credential gap / year size are handled in the timeline block */

  .credential strong {
    white-space: normal;
  }

  .floating-contact {
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .site-header,
  .hero-canvas,
  .audio-hero,
  .spotify-stage,
  .episode-section,
  .audio-note,
  .journey-section,
  .smart-cards-section,
  .lower-grid,
  .credentials-section,
  .contact-section,
  .motto,
  .site-footer {
    width: min(100% - 1rem, 94rem);
  }

  .brand-lockup small {
    display: none;
  }

  .mobile-menu-toggle {
    width: 2.65rem;
    height: 2.65rem;
  }

  .header-actions {
    gap: 0.35rem;
  }

  .language-switcher {
    max-width: calc(100vw - 7.5rem);
  }

  .header-cta {
    max-width: 8.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  h1 {
    font-size: clamp(2.45rem, 14.5vw, 3.8rem);
  }

  .hero-copy {
    padding-top: 1.7rem;
  }

  .hero-text,
  .guided-text {
    font-size: 0.98rem;
    line-height: 1.72;
  }

  .hero-visual {
    min-height: 22rem;
  }

  .hero-flip {
    width: min(94vw, 26rem);
  }

  .smart-card {
    height: 19.5rem;
  }

  .newsletter-row input,
  .newsletter-row .pill-button {
    width: 100%;
  }

  .audio-orb {
    --disc: 18rem;
  }

  .sleep-card {
    bottom: -1.5rem;
    padding: 1rem;
  }

  .motto {
    letter-spacing: 0.12em;
  }
}

@media (max-width: 390px) {
  .brand-lockup strong {
    font-size: 0.82rem;
  }

  .lang-btn {
    min-width: 2rem;
    padding-inline: 0.35rem;
  }

  .header-cta {
    max-width: 7rem;
    padding-inline: 0.65rem;
  }

  .hero-actions .pill-button,
  .hero-actions .text-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .smart-card {
    height: 20.5rem;
  }
}

/* ==========================================================
   v0.8 — Larger premium header + Veronika photography polish
   ========================================================== */
@media (min-width: 1081px) {
  .site-header {
    width: min(100% - 5rem, 98rem);
    padding-top: 2.15rem;
    gap: clamp(1.6rem, 3vw, 3.4rem);
  }

  .brand-lockup img {
    width: 4.8rem;
    height: 4.8rem;
  }

  .brand-lockup strong {
    font-size: 1.36rem;
    letter-spacing: 0.22em;
  }

  .brand-lockup small {
    font-size: 0.67rem;
  }

  .main-nav {
    font-size: 1.28rem;
    gap: clamp(1.7rem, 2.8vw, 3.4rem);
  }

  .lang-btn {
    padding: 0.48rem 0.7rem;
    font-size: 0.74rem;
  }

  .header-cta {
    min-height: 3.15rem;
    padding-inline: 1.65rem;
  }
}

.hero-flip .flip-front img {
  object-position: 50% 10%;
}

.journey-card:nth-child(1) .journey-image img {
  object-position: 70% 50%;
}

.journey-card:nth-child(2) .journey-image img {
  object-position: 50% 42%;
}

.journey-card:nth-child(3) .journey-image img {
  object-position: 50% 10%;
}

@media (max-width: 720px) {
  .brand-lockup img {
    width: 3.55rem;
    height: 3.55rem;
  }

  .brand-lockup strong {
    font-size: 1.05rem;
  }

  .hero-flip .flip-front img {
    object-position: 50% 8%;
  }

  .journey-card:nth-child(1) .journey-image img {
    object-position: 72% 50%;
  }

  .journey-card:nth-child(2) .journey-image img {
    object-position: 50% 40%;
  }

  .journey-card:nth-child(3) .journey-image img {
    object-position: 50% 8%;
  }
}


/* =============================================================
   v1.1 Homepage fit + cinematic experience page
   ============================================================= */
.hero-canvas {
  grid-template-columns: minmax(0, 1.08fr) minmax(25rem, .92fr);
  gap: clamp(1.8rem, 3.5vw, 4rem);
  width: min(100% - 3.2rem, 96rem);
  min-height: calc(100svh - 7.2rem);
  padding: clamp(.8rem, 1.8vh, 1.5rem) 0 clamp(1rem, 2vh, 1.8rem);
  align-items: center;
}
.hero-copy { max-width: 43rem; }
.hero-brand-signature { display:flex; flex-wrap:wrap; align-items:baseline; gap:.55rem; margin-bottom:.55rem; letter-spacing:normal; text-transform:none; }
.brand-script { color:#A9D6D2; font-family:var(--serif); font-size:clamp(2rem, 3vw, 3rem); line-height:.9; white-space:nowrap; }
.brand-byline { color:var(--forest); font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.hero-canvas h1 { max-width: 13.4ch; font-size:clamp(3.1rem, 5.15vw, 5.25rem); line-height:.95; }
.hero-canvas h1 .accent { display:inline-block; white-space:nowrap; font-size:1.18em; }
.hero-tagline { margin-top:.9rem; }
.hero-text { margin-top:.8rem; max-width:34rem; font-size:clamp(.95rem, 1.15vw, 1.05rem); line-height:1.55; }
.hero-actions { margin-top:1.2rem; }
.hero-visual { min-height:clamp(31rem, 68vh, 43rem); align-self:stretch; }
.hero-flip { width:min(100%, 40rem); }
.hero-flip .flip-inner { min-height:clamp(31rem, 68vh, 43rem); }
.hero-flip .flip-front img { object-position:50% 10%; }

.veronika-video-panel { min-height:34rem; display:grid; grid-template-columns:minmax(0,.82fr) minmax(22rem,1.18fr); gap:2rem; align-items:center; padding:clamp(1.5rem,4vw,4rem); border:1px solid rgba(232,199,143,.45); border-radius:2rem; background:rgba(255,255,255,.62); box-shadow:0 26px 70px rgba(45,79,73,.1); }
.video-copy h2 { font-size:clamp(2.7rem,4.3vw,4.7rem); }
.video-copy p:not(.eyebrow) { color:var(--muted); font-size:1.08rem; line-height:1.75; }
.video-poster-card,.retreat-video-stage { position:relative; overflow:hidden; width:100%; border:0; border-radius:2rem; background:var(--forest); cursor:pointer; box-shadow:0 24px 55px rgba(45,79,73,.18); }
.video-poster-card { min-height:26rem; }
.video-poster-card img,.retreat-video-stage img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.video-poster-card:hover img,.retreat-video-stage:hover img { transform:scale(1.025); }
.video-play { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:4.5rem; height:4.5rem; border-radius:50%; color:var(--forest); background:rgba(248,244,236,.92); box-shadow:0 12px 36px rgba(0,0,0,.2); }
.video-play.large { width:5.5rem; height:5.5rem; font-size:1.25rem; }
.video-duration { position:absolute; right:1rem; bottom:1rem; padding:.45rem .7rem; border-radius:999px; color:white; background:rgba(35,58,55,.78); font:600 .72rem var(--sans); letter-spacing:.08em; }

.experience-page .page-shell { overflow-x: clip; overflow-y: visible; }
.experience-hero,.experience-offers,.featured-retreat,.retreat-video-section,.experience-events,.expect-section,.audience-section,.experience-gallery,.experience-register { width:min(100% - 4rem,94rem); margin-inline:auto; }
.experience-hero { min-height:calc(100svh - 7rem); display:grid; grid-template-columns:minmax(0,.9fr) minmax(28rem,1.1fr); gap:clamp(2rem,5vw,6rem); align-items:center; padding:1.2rem 0 3rem; }
.experience-offers { padding:clamp(2rem,4vw,3.5rem) 0 0; }
.offer-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.2rem; margin-top:2rem; }
.offer-card { padding:1.6rem; border:1px solid rgba(232,199,143,.4); border-radius:1.5rem; background:rgba(255,255,255,.7); box-shadow:0 18px 45px rgba(45,79,73,.07); }
.offer-card h3 { margin:0 0 .65rem; font-size:1.45rem; color:var(--forest); }
.offer-card p { margin:0 0 1rem; color:var(--muted); line-height:1.7; }
.offer-card .text-link { font-weight:600; }
.experience-hero-copy h1 { max-width:13ch; font-size:clamp(3.5rem,5.8vw,6.2rem); }
.experience-hero-copy h1 .accent { font-family:var(--script); font-weight:400; font-size:1.28em; display:inline-block; }
.featured-retreat-copy h2 .accent,
.retreat-video-section h2 .accent { font-family:var(--script); font-weight:400; font-size:1.28em; display:inline-block; }
.experience-hero-media { position:relative; min-height:clamp(32rem,70vh,46rem); overflow:hidden; border-radius:50%; box-shadow:0 28px 80px rgba(45,79,73,.16); }
.experience-hero-media img { width:100%; height:100%; object-fit:cover; object-position:66% 50%; }
.experience-media-label { position:absolute; left:1.2rem; bottom:1.2rem; padding:.65rem .9rem; border-radius:999px; color:white; background:rgba(35,58,55,.78); font:600 .72rem var(--sans); letter-spacing:.16em; }
.featured-retreat { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,7rem); align-items:center; padding:clamp(4rem,8vw,8rem) 0; }
.featured-retreat-media { min-height:36rem; overflow:hidden; border-radius:2rem 45% 2rem 45% / 2rem 35% 2rem 35%; }
.featured-retreat-media img { width:100%; height:100%; object-fit:cover; }
#featured-retreat .featured-retreat-media { padding:.65rem; border-radius:2rem; background:var(--forest); }
#featured-retreat .featured-retreat-media img { object-fit:contain; object-position:center; border-radius:1.45rem; }
.featured-retreat-copy h2 { font-size:clamp(3rem,5vw,5.4rem); }
.featured-retreat-copy>p:not(.eyebrow,.retreat-meta) { color:var(--muted); font-size:1.08rem; line-height:1.75; }
.retreat-meta { color:var(--teal); font-weight:600; letter-spacing:.08em; }
.featured-retreat-copy .retreat-price { margin:.85rem 0 0; padding:.9rem 1rem; border-left:3px solid var(--sand-gold); color:var(--forest); background:rgba(232,199,143,.16); font-family:var(--serif); font-size:clamp(1.02rem,1.4vw,1.18rem); font-weight:600; line-height:1.5; }
.featured-retreat-copy .retreat-price:empty { display:none; }
.retreat-inclusions { display:flex; flex-wrap:wrap; gap:.65rem; padding:0; margin:1.5rem 0 2rem; list-style:none; }
.retreat-inclusions li { padding:.55rem .85rem; border:1px solid rgba(127,166,154,.35); border-radius:999px; background:rgba(255,255,255,.56); }
.retreat-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; }
.retreat-brochure-link { border-color:rgba(45,79,73,.24); background:rgba(255,255,255,.72); }
.retreat-brochure-link::after { content:"↓"; margin-left:.5rem; color:var(--gold-text); font-size:.95rem; }
.retreat-language-note { display:inline-flex; width:fit-content; margin:.15rem 0 .8rem !important; padding:.48rem .72rem; border:1px solid rgba(182,137,63,.28); border-radius:999px; color:var(--forest) !important; background:rgba(248,244,236,.72); font:600 .68rem/1.3 var(--sans) !important; letter-spacing:.08em; text-transform:uppercase; }
.retreat-language-note[hidden],
.retreat-brochure-link[hidden] { display:none !important; }
.retreat-video-section,.experience-events,.expect-section,.experience-gallery { padding:clamp(2rem,4vw,3.5rem) 0; }
/* Space between the video card and the green card below it. Lower the second
   number to bring them closer, raise it to push them apart. */
.retreat-video-section { padding-bottom:clamp(1rem,2vw,1.75rem); }
.retreat-video-stage { min-height:clamp(28rem,64vw,48rem); margin-top:1.2rem; }
.video-placeholder-note { position:absolute; left:1rem; bottom:1rem; color:white; background:rgba(35,58,55,.76); padding:.55rem .8rem; border-radius:999px; font:600 .68rem var(--sans); letter-spacing:.12em; }
.experience-events-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem; }
.experience-event-card { position:relative; perspective:1400px; min-height:17rem; border-radius:1.7rem; }
.experience-event-card .flip-inner { position:relative; width:100%; height:100%; min-height:17rem; transition:transform 600ms cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; }
@media (hover:hover) {
  .experience-event-card:hover .flip-inner { transform:rotateY(180deg); }
  .experience-event-card:hover .flip-front { pointer-events:none; }
  .experience-event-card:hover .flip-back { pointer-events:auto; }
}
.experience-event-card .flip-face { position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; pointer-events:none; border:1px solid rgba(232,199,143,.48); border-radius:1.7rem; box-shadow:0 18px 50px rgba(45,79,73,.08); padding:1.5rem 1.6rem; display:flex; flex-direction:column; }
.experience-event-card .flip-front { background:rgba(255,255,255,.68); justify-content:flex-end; pointer-events:auto; }
.experience-event-card:nth-child(1) .flip-front { width:474px; height:271px; }
.experience-event-card .flip-back { background:var(--ivory); transform:rotateY(180deg); }
.experience-event-card .flip-front .card-bg { position:absolute; inset:0; z-index:0; }
.experience-event-card .flip-front .event-card-topline,
.experience-event-card .flip-front h3,
.experience-event-card .flip-front .event-meta { position:relative; z-index:2; }
.experience-event-card .flip-front h3 { margin-top:.6rem; color:var(--ivory); font-size:1.6rem; }
.experience-event-card .flip-front .event-meta { color:var(--ivory)!important; font-weight:500; opacity:.9; }
.experience-event-card .flip-front::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(45,79,73,0) 30%, rgba(35,58,55,.72) 100%); }
.event-card-topline { display:flex; justify-content:space-between; gap:1rem; color:var(--teal); text-transform:uppercase; font:600 .7rem var(--sans); letter-spacing:.12em; }
.experience-event-card .flip-front .event-card-topline { color:var(--ivory); opacity:.9; }
.experience-event-card h3 { margin-top:.4rem; font-size:1.5rem; }
.experience-event-card p { color:var(--muted); line-height:1.6; font-size:.92rem; }
.event-meta { color:var(--forest)!important; font-weight:600; }
.experience-event-card .card-link { margin-top:auto; }
.event-date-badge { display:inline-block; margin:.6rem 0; padding:.4rem .8rem; border-radius:999px; background:rgba(61,128,120,.1); color:var(--teal); font:600 .72rem var(--sans); letter-spacing:.08em; text-transform:uppercase; width:fit-content; }
.expect-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.expect-card { min-height:13rem; padding:1.5rem; border-radius:1.5rem; background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(169,214,210,.2)); border:1px solid rgba(127,166,154,.25); }
.expect-card span { color:var(--sand-gold); font:600 .75rem var(--sans); letter-spacing:.12em; }
.expect-card h3 { margin-top:2.5rem; font-size:1.8rem; }
.audience-section { padding:clamp(2.5rem,5vw,5rem); border-radius:2rem; background:var(--forest); color:var(--ivory); text-align:center; }
.audience-section h2 { max-width:15ch; margin-inline:auto; color:var(--ivory); font-size:clamp(3rem,5vw,5.5rem); }
.audience-section p:not(.eyebrow) { max-width:48rem; margin:1.5rem auto 0; color:rgba(248,244,236,.78); font-size:1.1rem; line-height:1.75; }
.gallery-grid { display:grid; grid-template-columns:1.4fr .8fr; grid-template-rows:repeat(2,18rem); gap:1rem; margin-top:2rem; }
.gallery-grid figure { margin:0; overflow:hidden; border-radius:1.7rem; }
.gallery-grid { grid-template-rows:repeat(3,11.7rem); }
.gallery-grid .gallery-large { grid-row:1 / -1; }
.gallery-grid img { width:100%; height:100%; object-fit:cover; }
.experience-register { margin-top:clamp(4rem,8vw,8rem); margin-bottom:4rem; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; padding:clamp(2rem,5vw,5rem); border-radius:2rem; background:linear-gradient(135deg,rgba(169,214,210,.26),rgba(255,221,187,.36)); border:1px solid rgba(232,199,143,.45); }
.experience-register h2 { font-size:clamp(2.8rem,4.6vw,5rem); }
.experience-register p { color:var(--muted); line-height:1.7; }
.experience-form label { display:block; margin-bottom:.55rem; color:var(--forest); font-size:.82rem; font-weight:600; }

@media (max-width:1080px){
  .hero-canvas { min-height:auto; grid-template-columns:1fr; padding-top:1rem; }
  .hero-visual { min-height:30rem; }
  .veronika-video-panel,.experience-hero,.featured-retreat,.experience-register { grid-template-columns:1fr; }
  .experience-events-grid,.expect-grid { grid-template-columns:repeat(2,1fr); }
  .experience-hero { min-height:auto; }
}
@media (max-width:720px){
  .hero-canvas { width:min(100% - 1.6rem,94rem); padding-top:.5rem; }
  .hero-brand-signature { gap:.3rem; }
  .brand-script { font-size:2.1rem; }
  .brand-byline { font-size:.58rem; }
  .hero-canvas h1 { font-size:clamp(2.7rem,11.5vw,3.7rem); line-height:.98; }
  .hero-canvas h1 .accent { white-space:normal; }
  .hero-tagline { font-size:.64rem; line-height:1.6; }
  .hero-text { line-height:1.55; }
  .veronika-video-panel { min-height:auto; padding:1rem; border-radius:1.5rem; }
  .video-poster-card { min-height:20rem; }
  .experience-hero,.experience-offers,.featured-retreat,.retreat-video-section,.experience-events,.expect-section,.audience-section,.experience-gallery,.experience-register { width:min(100% - 1.6rem,94rem); }
  .offer-grid { grid-template-columns:1fr; }
  .experience-hero { padding-top:1rem; }
  .experience-hero-copy h1 { font-size:clamp(3rem,12vw,4.4rem); }
  .experience-hero-media { min-height:30rem; }
  .featured-retreat-media { min-height:28rem; }
  .retreat-actions { align-items:stretch; flex-direction:column; }
  .retreat-actions .pill-button { width:100%; }
  .experience-events-grid,.expect-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .gallery-grid .gallery-large { grid-row:auto; }
  .gallery-grid figure { min-height:22rem; }
  .audience-section { padding:3rem 1.4rem; }
  .experience-register { padding:1.5rem; gap:1.5rem; }
  .experience-register .newsletter-row { grid-template-columns:1fr; }
}

/* =============================================================
   v1.2 focused refinement — brand script + compact video layouts
   Only the requested font and media-layout changes are applied.
   ============================================================= */

/* Use the same handwritten visual language as the hero emphasis
   for the AURE SPACE wordmark throughout the visible site chrome. */
.footer-brand span {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.035em;
  text-transform: none;
  color: var(--teal);
}

.brand-lockup strong {
  font-size: clamp(1.8rem, 2.15vw, 2.45rem);
}

.footer-brand span {
  font-size: 2rem;
}

/* Homepage: video and Spotify/podcast panels share one balanced row. */
.home-media-row,
.lower-grid {
  align-items: stretch;
}

.lower-grid .veronika-video-panel,
.lower-grid .podcast-teaser {
  grid-column: auto;
  min-width: 0;
  min-height: 31rem;
}

.lower-grid .veronika-video-panel {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding: clamp(1.4rem, 2.4vw, 2.25rem);
}

.lower-grid .video-copy h2 {
  font-size: clamp(2.35rem, 3.2vw, 3.55rem);
}

.lower-grid .video-copy p:not(.eyebrow) {
  font-size: 0.98rem;
  line-height: 1.65;
}

.lower-grid .video-poster-card {
  min-height: 15.5rem;
  max-height: 18rem;
  margin-top: auto;
  border-radius: 1.5rem;
}

.lower-grid .video-play {
  width: 3.8rem;
  height: 3.8rem;
}

.lower-grid .podcast-teaser {
  padding: clamp(2rem, 3vw, 3rem);
}

/* Keep video surfaces proportionate instead of dominating the page. */
/* Video stage.
   aspect-ratio gives the box a real video shape (16:9) instead of a tall
   guessed min-height, so there is no dead space left under the poster.
   To make the video BIGGER or SMALLER, change max-width (64rem) or the
   aspect ratio. To change the space under it, see .retreat-video-section. */
.retreat-video-stage {
  width: min(100%, 64rem);
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: 30rem;
  margin: 1.6rem auto 0;
}

.video-frame,
.video-frame video {
  max-height: 34rem;
}

.video-frame video {
  width: 100%;
  object-fit: cover;
}

@media (max-width: 1080px) {
  .lower-grid .veronika-video-panel,
  .lower-grid .podcast-teaser {
    min-height: 29rem;
  }

  .lower-grid .video-poster-card {
    min-height: 14rem;
  }
}

@media (max-width: 900px) {
  .lower-grid {
    grid-template-columns: 1fr;
  }

  .lower-grid .veronika-video-panel,
  .lower-grid .podcast-teaser {
    min-height: auto;
  }

  .lower-grid .video-poster-card {
    min-height: clamp(14rem, 55vw, 22rem);
    max-height: 22rem;
  }
}

@media (max-width: 720px) {
  .brand-lockup strong {
    font-size: 1.75rem;
    letter-spacing: 0.02em;
  }

  .footer-brand span {
    font-size: 1.75rem;
  }

  .lower-grid .veronika-video-panel {
    padding: 1.25rem;
  }

  .lower-grid .video-poster-card {
    min-height: 13rem;
    max-height: 18rem;
  }

  .retreat-video-stage {
    min-height: clamp(15rem, 58vw, 23rem);
    max-height: 23rem;
  }
}

/* =============================================================
   Video panels driven by js/media.js
   While a video slot has no real file, the poster stays with a
   gentle "coming soon" note and no play button. Once a file is
   added in media.js the play button appears and the panel swaps
   in a real player on click. Nothing ever autoplays with sound.
   ============================================================= */

.video-play[hidden],
.video-duration[hidden],
.video-placeholder-note[hidden] {
  display: none !important;
}

.video-poster-card.is-placeholder,
.retreat-video-stage.is-placeholder {
  cursor: default;
}

.video-poster-card.is-playing,
.retreat-video-stage.is-playing {
  background: var(--charcoal);
}

.video-poster-card.is-playing video,
.video-poster-card.is-playing iframe,
.retreat-video-stage.is-playing video,
.retreat-video-stage.is-playing iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  object-fit: cover;
}


/* =============================================================
   ONLINE 1:1 PAGE (online-spoluprace.html) — scoped redesign.
   Every rule below is prefixed .online-page so no other page,
   colour or type style changes. Palette + fonts are unchanged.
   ============================================================= */

.online-page .o-hero,
.online-page .o-services,
.online-page .o-contact {
  width: min(100% - 4rem, 94rem);
  margin: 0 auto;
}

.online-page .accent {
  font-family: var(--script);
  font-weight: 400;
  font-size: 1.24em;
  display: inline-block;
}

/* --- Hero --- */

.online-page .o-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 0.98fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 5rem);
}

.online-page .o-hero-copy h1 {
  margin: 0;
  font-size: clamp(2.9rem, 5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--forest);
  text-wrap: balance;
}

.online-page .o-lead {
  max-width: 34rem;
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.8;
  text-wrap: pretty;
}

.online-page .o-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.6rem;
  margin: 1.9rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid rgba(200, 160, 96, 0.4);
  list-style: none;
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.online-page .o-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2.1rem;
}

.online-page .o-hero-media {
  position: relative;
  min-height: clamp(26rem, 58vh, 40rem);
  border-radius: 18rem 18rem 1.6rem 1.6rem;
  overflow: hidden;
  box-shadow: 0 34px 90px rgba(45, 79, 73, 0.18);
}

.online-page .o-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.online-page .o-hero-badge {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  padding: 1rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 1.1rem;
  background: rgba(248, 244, 236, 0.82);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px rgba(45, 79, 73, 0.16);
}

.online-page .o-badge-label {
  display: block;
  margin-bottom: 0.4rem;
  color: #c39a52;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.online-page .o-hero-badge strong {
  display: block;
  color: var(--forest);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.35;
}

/* --- Retreat video band --- */

.online-page .o-video {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(30rem, 74vh, 46rem);
  width: 100%;
  margin: clamp(1rem, 3vw, 2.5rem) 0 0;
  padding: clamp(2.5rem, 6vw, 6rem) max(2rem, calc((100% - 94rem) / 2 + 0rem));
  overflow: hidden;
  isolation: isolate;
}

.online-page .o-video-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--forest);
}

.online-page .o-video-media img,
.online-page .o-video-media video,
.online-page .o-video-embed {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  animation: o-slow-pan 26s ease-in-out infinite alternate;
}

@keyframes o-slow-pan {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

.online-page .o-video-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(35, 58, 55, 0.86) 0%, rgba(35, 58, 55, 0.62) 45%, rgba(35, 58, 55, 0.22) 100%);
}

.online-page .o-video-copy {
  position: relative;
  z-index: 2;
  max-width: 34rem;
  color: var(--ivory);
}

.online-page .o-video-copy .eyebrow {
  color: var(--sand-gold);
}

.online-page .o-video-copy h2 {
  margin: 0;
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  line-height: 1.05;
  color: var(--ivory);
}

.online-page .o-video-copy p {
  margin: 1.2rem 0 0;
  color: rgba(248, 244, 236, 0.8);
  font-size: 1.02rem;
  line-height: 1.75;
  text-wrap: pretty;
}

.online-page .o-video-note {
  position: absolute;
  z-index: 2;
  left: max(2rem, calc((100% - 94rem) / 2));
  top: clamp(2rem, 5vw, 3.5rem);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(35, 58, 55, 0.78);
  color: #fff;
  font: 600 0.64rem var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.online-page .o-video-play[hidden] {
  display: none !important;
}

.online-page .o-video-play {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(232, 199, 143, 0.6);
  border-radius: 999px;
  background: transparent;
  color: var(--ivory);
  font: 500 0.72rem var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.online-page .o-video-play:hover,
.online-page .o-video-play.is-on {
  background: var(--sand-gold);
  color: var(--forest);
}

/* --- Services --- */

.online-page .o-services {
  padding: clamp(3.5rem, 8vw, 7rem) 0 0;
}

.online-page .o-section-head {
  max-width: 46rem;
}

.online-page .o-section-head h2 {
  margin: 0;
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  line-height: 1.08;
  color: var(--forest);
}

.online-page .o-section-note {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.8;
  text-wrap: pretty;
}

.online-page .o-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.4rem);
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
}

.online-page .o-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(232, 199, 143, 0.42);
  border-radius: 1.8rem;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(45, 79, 73, 0.08);
  transition: transform 320ms ease, box-shadow 320ms ease;
}

.online-page .o-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px rgba(45, 79, 73, 0.16);
}

.online-page .o-card-media {
  position: relative;
  height: clamp(15rem, 24vw, 20rem);
  overflow: hidden;
}

.online-page .o-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.online-page .o-card:hover .o-card-media img {
  transform: scale(1.04);
}

.online-page .o-card-index {
  position: absolute;
  left: 1.2rem;
  top: 1.1rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(248, 244, 236, 0.85);
  color: #c39a52;
  font-family: var(--serif);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

.online-page .o-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
}

.online-page .o-card-body h3 {
  margin: 0;
  color: var(--forest);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.9vw, 1.8rem);
  font-weight: 600;
  line-height: 1.2;
}

.online-page .o-card-body p {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
  text-wrap: pretty;
}

.online-page .o-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.6rem;
}

.online-page .o-price {
  color: var(--forest);
  font-family: var(--serif);
  font-size: 1.02rem;
}

.online-page .o-card-cta {
  position: relative;
  padding-bottom: 0.35rem;
  color: var(--forest);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.online-page .o-card-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--sand-gold);
  transform-origin: left center;
  transition: transform 240ms ease;
}

.online-page .o-card-cta:hover::after {
  transform: scaleX(0.4);
}

/* --- Direct contact / Zoom --- */

.online-page .o-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(3.5rem, 8vw, 7rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding: clamp(2.2rem, 5vw, 4.5rem);
  border-radius: 2.2rem;
  background: var(--forest);
  box-shadow: 0 40px 90px rgba(45, 79, 73, 0.24);
}

.online-page .o-contact .eyebrow {
  color: var(--sand-gold);
}

.online-page .o-contact h2 {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.06;
}

.online-page .o-contact .o-lead {
  color: rgba(248, 244, 236, 0.78);
}

.online-page .o-steps {
  display: grid;
  gap: 1.5rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}

.online-page .o-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: baseline;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(232, 199, 143, 0.28);
}

.online-page .o-step-num {
  color: var(--sand-gold);
  font-family: var(--serif);
  font-size: 1.3rem;
}

.online-page .o-steps strong {
  display: block;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 500;
}

.online-page .o-steps p {
  margin: 0.35rem 0 0;
  color: rgba(248, 244, 236, 0.68);
  font-size: 0.92rem;
  line-height: 1.7;
}

.online-page .o-contact-card {
  align-self: start;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  border: 1px solid rgba(232, 199, 143, 0.35);
  border-radius: 1.6rem;
  background: rgba(248, 244, 236, 0.07);
  backdrop-filter: blur(14px);
}

.online-page .o-card-eyebrow {
  margin: 0;
  color: var(--sand-gold);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.online-page .o-card-title {
  display: block;
  margin: 0.8rem 0 1.6rem;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
}

.online-page .o-details {
  display: grid;
  gap: 0.85rem;
  margin: 0 0 1.9rem;
}

.online-page .o-details > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(248, 244, 236, 0.14);
}

.online-page .o-details dt {
  color: rgba(248, 244, 236, 0.6);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.online-page .o-details dd {
  margin: 0;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1rem;
  text-align: right;
}

.online-page .o-contact-cta {
  width: 100%;
  color: var(--forest);
  background: var(--sand-gold);
  border-color: transparent;
}

.online-page .o-contact-cta:hover {
  background: var(--ivory);
}

.online-page .o-contact-mail {
  display: block;
  margin-top: 1.1rem;
  color: var(--ivory);
  font-size: 0.9rem;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: rgba(232, 199, 143, 0.6);
  text-underline-offset: 4px;
}

.online-page .o-contact-note {
  margin: 1.1rem 0 0;
  color: rgba(248, 244, 236, 0.55);
  font-size: 0.8rem;
  line-height: 1.65;
  text-align: center;
}

@media (max-width: 1080px) {
  .online-page .o-hero,
  .online-page .o-contact {
    grid-template-columns: 1fr;
  }

  .online-page .o-hero-media {
    min-height: 26rem;
    border-radius: 12rem 12rem 1.4rem 1.4rem;
  }
}

@media (max-width: 900px) {
  .online-page .o-grid {
    grid-template-columns: 1fr;
  }

  .online-page .o-video {
    min-height: 34rem;
    padding-inline: 2rem;
  }

  .online-page .o-video-veil {
    background: linear-gradient(180deg, rgba(35, 58, 55, 0.35), rgba(35, 58, 55, 0.88));
  }

  .online-page .o-video-note {
    left: 2rem;
  }
}

@media (max-width: 720px) {
  .online-page .o-hero,
  .online-page .o-services,
  .online-page .o-contact {
    width: min(100% - 1.6rem, 94rem);
  }

  .online-page .o-contact {
    padding: 1.5rem;
    border-radius: 1.5rem;
  }

  .online-page .o-card-media {
    height: 13rem;
  }
}


/* --- Private Support journey card: flips to the free-consultation invite --- */

.journey-card.journey-flip {
  perspective: 1600px;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.journey-card.journey-flip:hover {
  transform: none;
}

.journey-flip .flip-inner {
  position: relative;
  height: 100%;
  min-height: 30rem;
}

.journey-flip .flip-face {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(232, 199, 143, 0.3);
  border-radius: 1.6rem;
  box-shadow: var(--soft-shadow);
}

.journey-flip .flip-front {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(243, 237, 226, 0.78));
  transition: box-shadow 260ms ease;
}

.journey-flip:hover .flip-front {
  box-shadow: var(--shadow);
}

.journey-flip .card-image {
  flex: 0 0 auto;
}

.journey-flip .flip-front .card-image img {
  filter: saturate(0.95) brightness(1.02);
}

.journey-flip-toggle {
  position: absolute;
  right: 1.4rem;
  bottom: 1.5rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid rgba(232, 199, 143, 0.65);
  border-radius: 50%;
  background: rgba(248, 244, 236, 0.9);
  color: var(--forest);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.journey-flip-toggle:hover {
  background: var(--forest);
  color: var(--ivory);
  transform: translateY(-2px);
}

.journey-flip .flip-back {
  justify-content: center;
  gap: 0.9rem;
  padding: 2.2rem 2rem;
  background: var(--forest);
  color: var(--ivory);
}

.journey-flip .flip-back .eyebrow {
  margin: 0;
  color: var(--sand-gold);
}

.journey-flip .flip-back .smart-card-text {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.1vw, 1.95rem);
  line-height: 1.15;
  color: var(--ivory);
}

.journey-flip-note {
  margin: 0;
  max-width: 22rem;
  color: rgba(248, 244, 236, 0.72);
  font-size: 0.94rem;
  line-height: 1.7;
}

.journey-flip .flip-back .pill-button.primary {
  width: fit-content;
  margin-top: 0.6rem;
  color: #2D4F49;
  background: #F1AA1C;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(241, 170, 28, 0.28);
}

.journey-flip .flip-back .pill-button.primary:hover {
  background: #ffc24d;
}

.journey-flip .flip-back .flip-toggle-back {
  color: var(--ivory);
}


/* =============================================================
   ABOUT ME PAGE (o-mne.html) — scoped, existing palette + type.
   ============================================================= */

.about-page .a-hero,
.about-page .a-letter,
.about-page .a-mother,
.about-page .a-story,
.about-page .a-cta {
  width: min(100% - 4rem, 82rem);
  margin: 0 auto;
}

.about-page .main-nav a.is-current {
  color: #A9D6D2;
}

.about-page .a-hero {
  display: block;
  padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.about-page .a-hero h1 {
  max-width: 24ch;
}

.about-page .a-hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--forest);
  text-wrap: balance;
}

.about-page .a-lead {
  max-width: 34rem;
  margin: 1.3rem 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.8;
  text-wrap: pretty;
}

.about-page .a-hero-portrait {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 14rem 14rem 1.6rem 1.6rem;
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(45, 79, 73, 0.18);
}

.about-page .a-hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- The letter --- */

.about-page .a-letter {
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: start;
}

.about-page .a-letter-portrait {
  position: sticky;
  top: clamp(1.5rem, 6vh, 5rem);
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 12rem 12rem 1.5rem 1.5rem;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(45, 79, 73, 0.18);
}

.about-page .a-letter-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-page .a-letter-sheet {
  padding: clamp(1.8rem, 4.5vw, 4rem) clamp(1.6rem, 5vw, 5rem);
  border: 1px solid rgba(232, 199, 143, 0.42);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px);
  box-shadow: 0 26px 60px rgba(45, 79, 73, 0.08);
}

.about-page .a-letter-body p {
  max-width: 44rem;
  margin: 0 0 1.35rem;
  color: var(--forest);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.45vw, 1.32rem);
  font-weight: 400;
  line-height: 1.75;
  text-wrap: pretty;
}

.about-page .a-letter-body p:first-child {
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-style: italic;
  color: var(--forest);
}

.about-page .a-letter-body p:last-child {
  margin-bottom: 0;
}

.about-page .a-signature {
  margin: 2.2rem 0 0;
  font-family: var(--script);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--forest);
}

/* --- Mother & guide --- */

.about-page .a-mother {
  display: grid;
  grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(3rem, 7vw, 6rem);
}

.about-page .a-mother-media {
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 1.8rem;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(45, 79, 73, 0.14);
}

.about-page .a-mother-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-page .a-mother-copy h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.1;
  color: var(--forest);
  text-wrap: balance;
}

.about-page .a-mother-copy > p {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.8;
  text-wrap: pretty;
}

.about-page .a-points {
  display: grid;
  gap: 0.8rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}

.about-page .a-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: baseline;
  color: var(--forest);
  font-size: 0.98rem;
  line-height: 1.6;
}

.about-page .a-points li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--sand-gold);
}

/* --- Story timeline + closing --- */

.about-page .a-story {
  margin-top: clamp(3rem, 7vw, 6rem);
}

/* Timeline heading reads as one centred stack (eyebrow above title) instead of
   eyebrow left / title far right with a wide gap between them. */
.about-page .a-story .section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}

.about-page .a-cta {
  margin: clamp(3rem, 7vw, 6rem) auto clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 2rem;
  background: var(--forest);
  text-align: center;
  box-shadow: 0 40px 90px rgba(45, 79, 73, 0.22);
}

.about-page .a-cta h2 {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.1;
}

.about-page .a-cta > p {
  max-width: 34rem;
  margin: 1rem auto 0;
  color: rgba(248, 244, 236, 0.76);
  font-size: 1.02rem;
  line-height: 1.75;
}

.about-page .a-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 2rem;
}

.about-page .a-cta .pill-button.primary {
  color: var(--forest);
  background: var(--sand-gold);
  border-color: transparent;
}

.about-page .a-cta .text-link {
  color: var(--ivory);
}

@media (max-width: 900px) {
  .about-page .a-letter,
  .about-page .a-mother {
    grid-template-columns: 1fr;
  }

  /* Shape, ratio and width for both portraits now come from the shared
     .a-portrait-frame component near the end of this file, so the two images
     stay identical on every screen. Only the sticky release stays here. */
  .about-page .a-letter-portrait {
    position: static;
  }
}

@media (max-width: 720px) {
  .about-page .a-hero,
  .about-page .a-letter,
  .about-page .a-mother,
  .about-page .a-story,
  .about-page .a-cta {
    width: min(100% - 1.6rem, 82rem);
  }

  .credential {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}


/* =============================================================
   EXPERIENCE OFFERS — 4 flip cards (2x2). Front: invitation.
   Back: retreat/class details + working booking button.
   ============================================================= */

.experience-page .offer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
  align-items: stretch;
}

.experience-page .offer-flip[data-step] {
  margin-top: 0;
}

.offer-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: var(--gold-text);
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
}

.offer-step::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(168, 112, 12, 0.5), rgba(168, 112, 12, 0));
}

.offer-flip .flip-front h3 {
  font-size: clamp(1.45rem, 1.95vw, 1.85rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.experience-page .offer-card.offer-flip {
  perspective: 1800px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.experience-page .offer-card.offer-flip:hover {
  transform: none;
}

.offer-flip .flip-inner {
  position: relative;
  height: 100%;
  min-height: 27rem;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.32, 0.04, 0.16, 1);
  will-change: transform;
}

.offer-flip.is-flipped .flip-inner {
  transform: rotateY(180deg);
}

/* Faces fade across the halfway point so no mirrored text shows through. */
.offer-flip.is-flipped .flip-front,
.offer-flip:not(.is-flipped) .flip-back {
  opacity: 0;
  pointer-events: none;
}

.offer-flip .flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition: opacity 400ms ease;
  padding: clamp(1.3rem, 2vw, 1.8rem);
  border: 1px solid rgba(232, 199, 143, 0.4);
  border-radius: 1.4rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.offer-flip .flip-front {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(45, 79, 73, 0.08);
  transform: rotateY(0deg);
  transition: box-shadow 260ms ease;
}

.offer-flip:hover .flip-front {
  box-shadow: 0 28px 60px rgba(45, 79, 73, 0.14);
}

.offer-flip .flip-back {
  justify-content: space-between;
  cursor: pointer;
  background: var(--forest);
  transform: rotateY(180deg);
  box-shadow: 0 24px 56px rgba(45, 79, 73, 0.2);
  overflow: hidden;
}

.offer-flip .flip-face h3 {
  margin: 0;
  color: var(--forest);
  font-family: var(--serif);
  font-size: clamp(1.28rem, 1.65vw, 1.55rem);
  font-weight: 600;
  line-height: 1.2;
}

.offer-flip .flip-front p {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.offer-flip-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  padding: 1.2rem 0 0;
  font-size: 0.66rem;
  border: 0;
  background: none;
  color: var(--forest);
  font: 600 0.72rem var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: gap 200ms ease, color 200ms ease;
}

.offer-flip-cta span[aria-hidden] {
  color: var(--sand-gold);
}

.offer-flip-cta:hover {
  gap: 1rem;
  color: var(--teal);
}

.offer-flip .flip-back h3 {
  color: var(--ivory);
  font-size: clamp(1.28rem, 1.65vw, 1.55rem);
}

.offer-flip .flip-back .offer-back-meta {
  margin: 0.5rem 0 0;
  color: var(--sand-gold);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.offer-back-list {
  display: grid;
  gap: 0.55rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.offer-back-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: baseline;
  color: rgba(248, 244, 236, 0.9);
  font-size: 0.89rem;
  line-height: 1.55;
}

.offer-back-list li::before {
  content: "";
  width: 0.32rem;
  height: 0.32rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--sand-gold);
}

.offer-flip .flip-back .offer-back-note {
  margin: 0.9rem 0 1.1rem;
  color: rgba(248, 244, 236, 0.78);
  font-size: 0.8rem;
  line-height: 1.6;
}

.offer-flip .flip-back .offer-back-cta {
  width: 100%;
  margin-top: 0;
  padding: 0.8rem 1rem;
  font-size: 0.68rem;
  text-align: center;
  color: #2D4F49;
  background: #F1AA1C;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(241, 170, 28, 0.28);
  transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.offer-flip .flip-back .offer-back-cta:hover {
  background: #ffc24d;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(241, 170, 28, 0.34);
}

@media (max-width: 1080px) {
  .experience-page .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.1rem, 2.2vw, 1.6rem);
    padding-bottom: 3rem;
  }

  .offer-flip .flip-inner {
    min-height: 25rem;
  }
}

@media (max-width: 720px) {
  .experience-page .offer-grid {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .offer-flip .flip-inner {
    min-height: 24rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer-flip .flip-inner {
    transition: none;
  }
}


/* Handwritten (Alex Brush) type.
   Mist green (#A9D6D2) is only readable on the dark forest panels. On the
   cream/ivory backgrounds it measures about 1.4:1 against the page, so the
   wordmark and the hero accent were effectively invisible - especially on
   phones. Light surfaces therefore use Deep Teal, which keeps the same soft
   character while staying legible. */
.hero-canvas h1 .accent,
.experience-hero-copy h1 .accent,
.featured-retreat-copy h2 .accent,
.retreat-video-section h2 .accent,
.online-page .o-hero-copy h1 .accent,
.about-page .a-hero h1 .accent,
.accent,
h1 .accent,
h2 .accent,
.script-accent,
.brand-script,
.online-page .accent,
.about-page .a-signature {
  color: var(--teal);
}

/* Accents that sit on dark green panels keep the mist green. */
.hero-flip .flip-back p,
.online-page .o-video-copy .accent,
.online-page .o-contact .accent,
.a-cta .accent,
.experience-register .accent,
.podcast-teaser-copy .accent,
.flip-back .accent {
  color: #A9D6D2;
}


/* Eyebrows on dark green panels keep the soft gold.
   Note: only the BACK of a smart card is dark - its front face is a light
   mist/white gradient, where sand gold measured ~1.6:1 and was unreadable.
   The front therefore keeps the default darker eyebrow colour. */
.online-page .o-video-copy .eyebrow,
.online-page .o-contact .eyebrow,
.a-cta .eyebrow,
.experience-register .eyebrow,
.smart-card .flip-back .eyebrow,
.flip-back .eyebrow {
  color: var(--sand-gold);
}

/* The letter itself: green sheet, mist type. */
.about-page .a-letter-sheet {
  border-color: rgba(232, 199, 143, 0.28);
  background: var(--forest);
  box-shadow: 0 30px 70px rgba(45, 79, 73, 0.24);
}

.about-page .a-letter-body p {
  color: #ffffff;
}

.about-page .a-letter-body p:first-child {
  color: var(--mist);
}

.about-page .a-signature {
  color: #A9D6D2;
}

/* Heading stays on one line. */
.about-page .a-hero h1 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(1.9rem, 3.6vw, 3.9rem);
}

@media (max-width: 760px) {
  .about-page .a-hero h1 {
    white-space: normal;
  }
}


/* =============================================================
   REVIEWS (Google Business) — home page + about page
   ============================================================= */

.reviews-section {
  /* Same measure as the other homepage blocks. */
  width: min(100% - 4rem, 94rem);
  margin: clamp(3rem, 7vw, 6rem) auto 0;
}

/* Eyebrow + title read as one centred stack above the cards. */
.reviews-section .section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
}

/* Light sage cards, matching the news cards' former tone. */
.review-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border: 1px solid rgba(61, 128, 120, 0.28);
  border-radius: 1.4rem;
  background: linear-gradient(165deg, rgba(169, 214, 210, 0.85), rgba(127, 166, 154, 0.72));
  box-shadow: var(--soft-shadow);
}

.review-stars {
  color: #C08A18;
  font-size: 0.9rem;
  letter-spacing: 0.22em;
}

.review-card blockquote {
  margin: 0;
  color: var(--forest);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  font-style: italic;
  line-height: 1.6;
  text-wrap: pretty;
}

.review-card figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.8rem;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(45, 79, 73, 0.2);
}

.review-card figcaption strong {
  color: var(--forest);
  font-size: 0.82rem;
  font-weight: 600;
}

.review-card figcaption span {
  color: rgba(31, 58, 47, 0.62);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reviews-link {
  display: inline-flex;
  margin-top: 1.6rem;
}

@media (max-width: 900px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .reviews-section {
    width: min(100% - 1.6rem, 94rem);
  }
}


/* =============================================================
   PODCAST EPISODE CARDS — redesigned: label pill, show name,
   badge in the footer, everything fits, all links go to Spotify.
   ============================================================= */

.episode-card {
  gap: 0;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border-radius: 1.4rem;
  overflow: hidden;
}

.episode-card .episode-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0;
}

.episode-label {
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(200, 160, 96, 0.5);
  border-radius: 999px;
  color: var(--gold-text);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.episode-card.is-premium .episode-label {
  border-color: transparent;
  background: #F1AA1C;
  color: #2D4F49;
}

.episode-card .episode-topline small {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.episode-card p.episode-show {
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.episode-card h3 {
  margin: 0.5rem 0 0;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  line-height: 1.15;
  text-wrap: balance;
}

.episode-card p.episode-text {
  margin: 0.8rem 0 1.4rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.episode-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: auto;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(200, 160, 96, 0.28);
}

.episode-card .episode-badge {
  position: static;
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: rgba(241, 170, 28, 0.16);
  color: var(--gold-text);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: none;
  white-space: normal;
}

.episode-card.is-premium .episode-badge {
  background: rgba(241, 170, 28, 0.2);
}

.episode-card .episode-foot .card-link {
  margin: 0 0 0.2rem;
}


/* The header always sits above page content — the spinning audio disc used to
   drift over the green bar on some viewport sizes. */
.site-header {
  z-index: 30;
}

.audio-orb {
  /* No paint containment: the rings sit outside the disc and must not be cut. */
  contain: layout;
}


/* =============================================================
   Phone fixes (audited on 375px / 390px)
   - the podcast disc was printing on top of its own heading
   - tap targets and label sizes were below usable minimums
   Desktop layout is untouched: everything here is inside a
   max-width query.
   ============================================================= */

@media (max-width: 900px) {
  /* The decorative disc sits at the top-centre of the panel on phones, so
     the copy needs to start below it. `.lower-grid .podcast-teaser` sets a
     uniform padding later in this file and was winning on specificity,
     which is why the disc landed on top of the heading. */
  .lower-grid .podcast-teaser,
  .podcast-teaser {
    padding-top: 9.5rem;
  }

  .podcast-teaser-visual {
    right: 50%;
    top: -1.4rem;
    transform: translateX(50%);
    width: 11rem;
    height: 11rem;
  }
}

@media (max-width: 720px) {
  /* --- Tap targets: aim for ~44px, the usual minimum for a finger. --- */
  .lang-btn {
    min-width: 2.75rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.72rem;
  }

  .header-cta {
    min-height: 2.75rem;
    padding: 0.7rem 1.05rem;
    font-size: 0.7rem;
  }

  .card-link {
    min-height: 2.75rem;
    padding: 0.6rem 0;
    font-size: 0.78rem;
  }

  /* Every inline arrow link, not just the ones in the hero. */
  .text-link {
    min-height: 2.75rem;
    padding: 0.55rem 0;
  }

  .news-cta {
    min-height: 2.6rem;
    padding: 0.55rem 0.95rem;
  }

  .flip-toggle-back {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* --- Labels: nothing meaningful below ~11px. --- */
  .brand-byline {
    font-size: 0.68rem;
  }

  .hero-tagline {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }

  .flip-hint {
    font-size: 0.72rem;
  }

  .news-meta,
  .news-cta {
    font-size: 0.72rem;
  }

  /* Month abbreviation in the date badge (BŘE, DUB, KVĚ …). */
  .news-date small {
    font-size: 0.68rem;
  }

  .motto {
    font-size: 0.72rem;
  }

  /* Footer links sit close together - give each one a finger-sized row. */
  .footer-col a,
  .contact-direct a {
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    padding: 0.55rem 0;
    font-size: 0.92rem;
  }

  /* Experience page: offer cards. */
  .offer-flip-cta {
    min-height: 2.6rem;
    padding: 0.55rem 0;
    font-size: 0.78rem;
  }

  .offer-flip .flip-back .offer-back-meta {
    font-size: 0.72rem;
  }

  .offer-flip .pill-button,
  .experience-page .pill-button.primary,
  .video-placeholder-note {
    min-height: 2.6rem;
    font-size: 0.72rem;
  }

  /* Date badge month label (BŘE, DUB …) and the hero byline. */
  .news-date small,
  .hero-brand-signature .brand-byline {
    font-size: 0.72rem;
  }

  /* Podcast page: episode meta labels.
     These need the .episode-card prefix to beat the desktop rules further
     up the file, which are more specific than a bare class selector. */
  .episode-card .episode-label,
  .episode-card p.episode-show,
  .episode-card .episode-topline small,
  .episode-card .episode-badge {
    font-size: 0.72rem;
  }

  /* Online 1:1 page. */
  .o-card-cta,
  .o-contact-mail {
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    padding: 0.5rem 0;
  }

  .online-page .o-badge-label,
  .online-page .o-video-note,
  .online-page .o-card-eyebrow {
    font-size: 0.72rem;
  }
}

/* =============================================================
   Education timeline - phone / tablet
   Below 1080px the horizontal axis becomes a vertical rail on
   the left and the milestones stack beside it. Six columns
   cannot work on a phone.
   ============================================================= */

@media (max-width: 1080px) {
  .credentials-timeline {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    column-gap: 0;
  }

  .credentials-axis {
    position: absolute;
    grid-row: auto;
    grid-column: 1;
    top: 0.6rem;
    bottom: 0.6rem;
    left: 0.29rem;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, var(--sand-gold) 6%, var(--sand-gold) 94%, transparent);
  }

  .credential.is-above,
  .credential.is-below {
    grid-row: auto;
    grid-column: 1;
    align-self: auto;
    padding: 0.75rem 0 0.75rem 1.5rem;
  }

  .credential.is-above .credential-marker,
  .credential.is-below .credential-marker {
    top: 1.05rem;
    bottom: auto;
  }

  /* No stems in the vertical layout - the rail already connects everything. */
  .credential-marker::before {
    display: none;
  }
}

@media (max-width: 720px) {
  .credentials-timeline {
    margin-top: 1.9rem;
    padding-left: 0.2rem;
  }

  .credential.is-above,
  .credential.is-below {
    padding: 0.7rem 0 0.7rem 1.45rem;
  }

  .credential strong {
    font-size: 0.98rem;
  }

  .credential p {
    font-size: 0.84rem;
  }

  .credential-more {
    min-height: 2.6rem;
    font-size: 0.98rem;
  }

  /* The gold story rule must stay clearly distinct from the vertical
     timeline rail on its left. */
  .credential-story-inner {
    padding-left: 1rem;
  }

  .credential-story p {
    max-width: none;
    font-size: 0.98rem;
  }
}

/* --- Education timeline: reduced motion ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .credential-story,
  .credential-story-inner,
  .credential-story-accent,
  .credential-arrow {
    transition: none;
  }

  .credential-story.is-open .credential-story-inner {
    transition-delay: 0s;
  }

  .credential-story-accent {
    transform: scaleY(1);
  }
}
/* =============================================================
   ABOUT PAGE (o-mne.html)
   One continuous editorial story: the introduction, the AURE
   separator, the letter heading and the letter card all live in
   ONE two-column grid. The portrait sits in the left column and
   stays sticky across the whole section, so it accompanies the
   reader from "Before we meet…" to the end of the letter.
   Scoped to .about-page — no other page is affected.
   ============================================================= */

.about-page {
  /* One grid definition shared by the story section and the lower
     "Mother & Guide" section, so both portraits sit on the same column. */
  --story-cols: minmax(0, 0.38fr) minmax(0, 0.62fr);
  --story-gap: clamp(3rem, 6vw, 7rem);

  /* The header is not fixed on this site, so the offset is just
     comfortable breathing room under the top of the viewport. */
  --sticky-offset: clamp(1.5rem, 5vh, 4rem);
}

.about-story {
  width: min(100% - 4rem, 82rem);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 0 0;
}

.about-story-grid {
  display: grid;
  grid-template-columns: var(--story-cols);
  gap: var(--story-gap);
  /* Default stretch: the portrait column spans the full story height,
     which is exactly what gives position: sticky its travel range. */
  align-items: stretch;
}

/* --- Left column: the sticky portrait ------------------------------------ */

.about-story-portrait-column {
  position: relative;
  min-width: 0;
}

.about-story-portrait-sticky {
  position: sticky;
  top: var(--sticky-offset);
  align-self: start;
}

/* --- Right column: the story ---------------------------------------------- */

.about-story-content {
  min-width: 0;
}

.about-page .about-story-content .eyebrow {
  margin: 0 0 0.9rem;
}

.about-page .about-story-content h1 {
  max-width: 18ch;
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.6rem);
  color: var(--forest);
  /* Prominent, but not oversized - it opens a story, it is not a hero. */
  font-size: clamp(1.9rem, 3.1vw, 2.9rem);
  line-height: 1.14;
  white-space: normal;
  text-wrap: balance;
}

.about-page .a-intro-body p {
  max-width: 40rem;
  /* Slightly tighter than before so the paragraphs read as one voice. */
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  line-height: 1.78;
  text-wrap: pretty;
}

.about-page .a-intro-body p:last-child {
  margin-bottom: 0;
}

/* The closing AURE SPACE line: a gentle lift, not a blockquote. */
.about-page .a-intro-body p.is-closing {
  position: relative;
  margin-top: 1.3rem;
  padding-left: 1rem;
  color: var(--forest);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.35vw, 1.24rem);
  font-style: italic;
  line-height: 1.65;
}

.about-page .a-intro-body p.is-closing::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--sand-gold);
}

/* --- AURE separator: inside the content column only ---------------------- */

.about-page .a-sep {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 1rem;
  /* Controlled spacing - it connects the intro to the letter. */
  margin: clamp(1.6rem, 3.2vw, 2.6rem) 0 clamp(1.5rem, 3vw, 2.4rem);
}

.about-page .a-sep-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sand-gold) 14%, var(--sand-gold) 86%, transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about-page .a-sep-dot {
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--sand-gold);
  box-shadow: 0 0 0 4px rgba(232, 199, 143, 0.18);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 620ms ease 240ms, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1) 240ms;
}

.about-page .a-sep.is-in .a-sep-line { transform: scaleX(1); }
.about-page .a-sep.is-in .a-sep-dot  { opacity: 1; transform: scale(1); }

/* --- Letter heading + card: one component -------------------------------- */

.about-page .a-letter-heading {
  margin: 0 0 clamp(0.85rem, 1.6vw, 1.25rem);
  color: var(--forest);
  font-size: clamp(1.75rem, 2.9vw, 2.6rem);
  line-height: 1.14;
  text-wrap: balance;
}

.about-page .a-letter-sheet {
  width: 100%;
  padding: clamp(1.7rem, 3.2vw, 3rem) clamp(1.5rem, 3.4vw, 3.2rem);
  border: 1px solid rgba(232, 199, 143, 0.28);
  border-radius: 2rem;
  background: var(--forest);
  box-shadow: 0 30px 70px rgba(45, 79, 73, 0.24);
  backdrop-filter: none;
}

.about-page .a-letter-body p {
  max-width: 42rem;
  margin: 0 0 1.2rem;
  color: #ffffff;
  font-family: var(--serif);
  font-size: clamp(1.04rem, 1.25vw, 1.2rem);
  font-weight: 400;
  line-height: 1.78;
  text-wrap: pretty;
}

.about-page .a-letter-body p:first-child {
  color: var(--mist);
  font-size: clamp(1.14rem, 1.5vw, 1.34rem);
  font-style: italic;
}

.about-page .a-letter-body p:last-child { margin-bottom: 0; }

.about-page .a-signature {
  margin: 2rem 0 0;
  color: #A9D6D2;
  font-family: var(--script);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1;
}

/* --- Shared portrait frame (upper + lower) -------------------------------
   Both portraits use one component: same ratio, arch, radius and shadow.
   Only the image source and object-position differ.
   -------------------------------------------------------------------------- */

.about-page .a-portrait-frame {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Keeps the sticky portrait inside the viewport on shorter screens.
     object-fit: cover means it crops rather than distorts. */
  max-height: calc(100svh - var(--sticky-offset) - 2.5rem);
  overflow: hidden;
  border-radius: 12rem 12rem 1.5rem 1.5rem;
  background: var(--linen);
  box-shadow: 0 30px 70px rgba(45, 79, 73, 0.18);
}

.about-page .a-portrait-inner {
  display: block;
  width: 100%;
  height: 100%;
}

.about-page .a-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-page .a-letter-portrait img { object-position: 50% 18%; }
.about-page .a-mother-media   img { object-position: 50% 30%; }

/* --- Mother & Guide: same grid, non-sticky portrait ---------------------- */

.about-page .a-mother {
  display: grid;
  grid-template-columns: var(--story-cols);
  gap: var(--story-gap);
  align-items: start;
  margin-top: clamp(3.5rem, 8vw, 7rem);
}

.about-page .a-mother-media {
  position: static;
  top: auto;
}

/* --- Background: rebalanced for the new composition ---------------------- */

.about-page .ambient-one {
  /* warm apricot behind the story content */
  top: 4rem;
  right: -14rem;
  background: rgba(255, 185, 120, 0.16);
}

.about-page .ambient-two {
  /* soft sage near the portrait column */
  left: -18rem;
  bottom: auto;
  top: 26rem;
  background: rgba(127, 166, 154, 0.16);
}

/* --- Scroll reveals -------------------------------------------------------
   Gated on html.js so nothing hides if JavaScript fails.
   .is-in is added once by the observer in js/main.js; --i is the stagger.
   -------------------------------------------------------------------------- */

html.js .about-page .a-anim {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 820ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 820ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 95ms);
  will-change: opacity, transform;
}

html.js .about-page .a-anim.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* The portrait blooms out of its arch mask. This runs on the INNER wrapper -
   the sticky container above it must never receive a transform. */
html.js .about-page .a-portrait-inner.a-anim {
  transform: translateY(22px) scale(0.97);
  transition-duration: 1000ms;
}

html.js .about-page .a-portrait-inner.a-anim.is-in {
  transform: none;
}

/* The letter card settles last. */
html.js .about-page .a-letter-sheet.a-anim {
  transform: translateY(24px) scale(0.985);
  transition-duration: 1000ms;
}

html.js .about-page .a-letter-sheet.a-anim.is-in {
  transform: none;
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.js .about-page .a-anim,
  html.js .about-page .a-portrait-inner.a-anim,
  html.js .about-page .a-letter-sheet.a-anim {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms;
  }

  .about-page .a-sep-line { transform: scaleX(1); transition: none; }
  .about-page .a-sep-dot  { opacity: 1; transform: scale(1); transition: none; }
}

/* --- Tablet ---------------------------------------------------------------
   Keep two columns only while both stay readable. Below that we switch to
   the mobile flow rather than squeezing the letter.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) and (min-width: 981px) {
  .about-page {
    --story-cols: minmax(0, 0.36fr) minmax(0, 0.64fr);
    --story-gap: clamp(2rem, 4vw, 3.5rem);
  }
}

/* --- Mobile / small tablet ------------------------------------------------
   Single column, sticky off, and the exact required reading order:
   eyebrow, heading, PORTRAIT, paragraphs, separator, letter heading, card.
   `display: contents` lets the content children take part in the grid so
   `order` can interleave the portrait between the heading and the paragraphs.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .about-story-grid,
  .about-page .a-mother {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  .about-story-content {
    display: contents;
  }

  .about-story-content > .eyebrow      { order: 1; }
  .about-story-content > h1            { order: 2; }
  .about-story-portrait-column         { order: 3; }
  .about-story-content > .a-intro-body { order: 4; }
  .about-story-content > .a-sep        { order: 5; }
  .about-story-content > .a-letter-heading { order: 6; }
  .about-story-content > .a-letter-sheet   { order: 7; }

  /* Sticky off - normal document flow. */
  .about-story-portrait-sticky {
    position: static;
    top: auto;
  }

  .about-page .a-portrait-frame {
    width: min(100%, 26rem);
    margin-inline: auto;
    max-height: 60vh;
    border-radius: 9rem 9rem 1.3rem 1.3rem;
  }

  .about-page .about-story-content h1 {
    max-width: none;
  }

  .about-page .a-intro-body p,
  .about-page .a-letter-body p {
    max-width: none;
  }
}

@media (max-width: 720px) {
  /* Must match the .a-mother width above, otherwise the two portrait
     containers differ and the images stop being identical. */
  .about-story {
    width: min(100% - 1.6rem, 82rem);
  }

  .about-page .a-portrait-frame {
    border-radius: 7.5rem 7.5rem 1.2rem 1.2rem;
  }

  .about-page .a-intro-body p {
    font-size: 1rem;
    line-height: 1.8;
  }
}

@media (max-width: 380px) {
  .about-page .a-portrait-frame {
    max-height: 54vh;
    border-radius: 6rem 6rem 1.1rem 1.1rem;
  }
}

/* --- Education timeline: readable story width on the horizontal layout ----
   Each milestone owns one narrow column, which is too tight for a paragraph.
   Above-milestones sit in columns 1,3,5 and below-milestones in 2,4,6, so the
   neighbouring column in the SAME row is always empty - the open story can
   safely spill into it. The last milestone extends leftwards instead so it
   never pushes past the page edge.
   -------------------------------------------------------------------------- */

@media (min-width: 1081px) {
  .credential-story {
    width: min(20rem, calc(100vw - 6rem));
  }

  .credential:last-child .credential-story {
    /* right-align: grow to the left, into the empty neighbouring column */
    margin-left: calc(100% - min(20rem, calc(100vw - 6rem)));
  }
}

/* =============================================================
   HOMEPAGE — two-sided journey cards
   Front: photo, number, title, personal description, editorial
   CTA and a discreet flip control.
   Back:  number, title, small label, the service options, a
   primary CTA and a return control.
   The options exist only on the back.
   ============================================================= */

.journey-card {
  perspective: 1600px;
  /* the 3D faces carry the surface now */
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.journey-card:hover {
  transform: translateY(-6px);
  box-shadow: none;
}

/* NOTE — why this is a crossfade and not a rotateY flip.
   The front face contains .card-bg with filter: blur(22px). A filter creates
   a containing block and flattens the 3D rendering context, which made
   backface-visibility fail: the front showed through the back MIRRORED, with
   both faces visible at once. A crossfade cannot mirror and behaves the same
   in every browser, so it is used here deliberately. */

.journey-card-inner {
  position: relative;
  display: grid;
  min-height: 100%;
}

/* The hidden face must not keep the card at its own height, otherwise an
   opened detail row has nowhere to grow into. */
.journey-card.is-flipped .journey-front,
.journey-card:not(.is-flipped) .journey-back {
  align-self: start;
  height: 100%;
  max-height: 100%;
}

/* Both faces occupy the same cell, so the card height is the taller of the
   two and stays completely stable while switching. */
.journey-face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(232, 199, 143, 0.3);
  border-radius: 1.6rem;
  box-shadow: var(--soft-shadow);
  transition:
    opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 0s;
}

.journey-front {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(243, 237, 226, 0.78));
}

/* Resting state: front shown, back hidden and out of the tab order. */
.journey-front { opacity: 1; visibility: visible; transform: none; }
.journey-back  { opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.99);
                 transition-delay: 0s, 0s, 520ms; }

/* Flipped: back shown, front hidden. */
.journey-card.is-flipped .journey-front {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.99);
  transition-delay: 0s, 0s, 520ms;
}

.journey-card.is-flipped .journey-back {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}

/* --- Front ---------------------------------------------------------------- */

.card-number {
  display: block;
  margin-bottom: 0.45rem;
  /* Sand gold is too pale on the cream front; this darker gold keeps the
     same warmth but stays legible. */
  color: var(--gold-text);
  font-family: var(--serif);
  font-size: 0.92rem;
  letter-spacing: 0.18em;
}

/* Primary CTA: a compact filled AURE button.
   Gold stays an accent (border + arrow) and is never the text colour on a
   light surface - that is what made the old link unreadable at 1.5:1.
   Body font, not the display serif, so "1:1" cannot read as "1:I". */
.journey-front .card-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  width: fit-content;
  max-width: 100%;
  min-height: 46px;
  margin-top: auto;
  padding: 0.72rem 1rem;
  color: #fcfbf8;
  background: var(--forest);
  border: 1px solid rgba(232, 199, 143, 0.7);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-transform: none;
  text-decoration: none;
  /* long German labels wrap instead of overflowing */
  text-wrap: pretty;
  transition:
    background 300ms ease,
    transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 300ms ease;
}

.journey-front .card-link:hover {
  background: var(--teal);
  border-color: rgba(232, 199, 143, 0.9);
  transform: translateY(-2px);
}

.journey-front .card-link:focus-visible {
  outline: 3px solid var(--sand-gold);
  outline-offset: 3px;
}

/* Lining numerals everywhere "1:1" can appear, so it never reads as "1:I".
   Cormorant Garamond defaults to old-style figures in the card titles. */
.card-content h3,
.journey-back h3,
.journey-front .card-link,
.journey-back-cta {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.card-arrow {
  position: relative;
  display: inline-block;
  width: 1.45rem;
  height: 1px;
  flex: none;
  background: var(--sand-gold);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.card-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1px solid var(--sand-gold);
  border-right: 1px solid var(--sand-gold);
  transform: translateY(-50%) rotate(45deg);
}

.journey-front .card-link:hover .card-arrow,
.journey-back-cta:hover .card-arrow {
  transform: translateX(5px);
}

/* Discreet flip control - transparent, no bubble, no pill. */
/* Secondary action - clearly quieter than the filled CTA above it, but no
   longer pale grey. Transparent, no pill, underline appears on hover. */
.card-flip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  min-height: 44px;
  margin-top: 0.7rem;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  color: var(--teal);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 240ms ease, text-decoration-color 240ms ease;
}

.card-flip:hover {
  color: var(--forest);
  text-decoration-color: rgba(232, 199, 143, 0.9);
}

.card-flip:focus-visible,
.card-return:focus-visible,
.journey-back-cta:focus-visible,
.journey-front .card-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Small rotating-arc icon built in CSS. */
.card-flip-icon,
.card-return-icon {
  position: relative;
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.card-flip:hover .card-flip-icon {
  transform: rotate(140deg);
}

.card-return:hover .card-return-icon {
  transform: rotate(-140deg);
}

/* --- Back ----------------------------------------------------------------- */

.journey-back-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 2.1rem 2.1rem 1.9rem;
}

.journey-back h3 {
  margin: 0;
  /* Must follow the card palette - the global h3 rule paints it forest green,
     which disappeared completely on the dark green back. */
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.2vw, 2.05rem);
  font-weight: 500;
  line-height: 1.16;
  text-transform: none;
  text-wrap: balance;
}

.journey-back-label {
  margin: 1.05rem 0 0.85rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* A soft AURE ring motif, reused from the orbit/sound-ring language. */
.journey-back-motif {
  position: absolute;
  right: -5rem;
  top: -5rem;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.13;
  pointer-events: none;
}

.journey-back-motif::after {
  content: "";
  position: absolute;
  inset: 3.2rem;
  border-radius: 50%;
  border: 1px solid currentColor;
}

/* Options: a quiet vertical list, one row per service. Rows with a detail
   expand in place inside the card frame - no chips, no overlays. */
.journey-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid;      /* colour set per card below */
}

.journey-option {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid;   /* colour set per card below */
}

.journey-option-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  width: 100%;
  padding: 0.85rem 0.1rem;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  text-wrap: pretty;
  cursor: pointer;
  transition: opacity 200ms ease, padding-left 240ms ease;
}

.journey-option-row.is-static {
  cursor: default;
}

.journey-option-row:hover {
  padding-left: 0.35rem;
}

.journey-option-row:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Small plus that becomes a minus when the row is open. */
.journey-option-icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.28rem;
  opacity: 0.75;
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 200ms ease;
}

.journey-option-icon::before,
.journey-option-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.journey-option-icon::after {
  transform: rotate(90deg);
}

.journey-option.is-open .journey-option-icon {
  opacity: 1;
  transform: rotate(180deg);
}

.journey-option.is-open .journey-option-icon::after {
  transform: rotate(90deg) scaleX(0);
}

/* Detail: collapsed by grid rows so the card grows smoothly. */
.journey-option-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 340ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 240ms ease;
}

.journey-option-detail-inner {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0 1.8rem 0.9rem 0.1rem;
  font-family: var(--sans);
}

.journey-option-detail p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.62;
  text-wrap: pretty;
  opacity: 0.82;
}

/* Package contents: a tight, quiet bullet list. */
.journey-option-bullets {
  display: grid;
  gap: 0.22rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-option-bullets li {
  position: relative;
  padding-left: 0.85rem;
  font-size: 0.86rem;
  line-height: 1.45;
  opacity: 0.86;
}

.journey-option-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* The last two bullets are the practical facts, so they read a touch stronger. */
.journey-option-bullets li:nth-last-child(-n + 2) {
  font-weight: 600;
  opacity: 1;
}

.journey-option-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  width: fit-content;
  margin-top: 0.15rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: inherit;
}

.journey-option-link:hover { text-decoration: underline; }

/* Premium rows carry a small qualifier next to the name. */
.journey-option-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

.journey-option-tag {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.72;
}

.journey-option.is-premium .journey-option-row {
  font-weight: 600;
}

.journey-option.is-open .journey-option-detail {
  max-height: 34rem;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .journey-option-detail,
  .journey-option-icon,
  .journey-option-icon::before,
  .journey-option-icon::after,
  .journey-option-row {
    transition: none;
  }
}

/* Primary CTA on the back: defined, but still refined. */
.journey-back-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  width: fit-content;
  max-width: 100%;
  min-height: 50px;
  margin-top: auto;
  padding: 0.8rem 1.15rem;
  border: 1px solid rgba(232, 199, 143, 0.7);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-decoration: none;
  text-wrap: pretty;
  transition: transform 300ms cubic-bezier(0.22,0.61,0.36,1), background 300ms ease, border-color 300ms ease;
}

.journey-back-cta:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 199, 143, 0.95);
}

.journey-back-cta:focus-visible {
  outline: 3px solid var(--sand-gold);
  outline-offset: 3px;
}

.card-return {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin-top: 0.95rem;
  padding: 0.3rem 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.88rem;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 240ms ease;
}

.card-return:hover { opacity: 1; }

/* --- Per-card colour treatment ------------------------------------------- */

/* 01 — deep forest, ivory type, gold accents */
.journey-card:nth-child(1) .journey-back {
  color: var(--ivory);
  background: linear-gradient(165deg, var(--forest), var(--charcoal));
  border-color: rgba(232, 199, 143, 0.32);
}
.journey-card:nth-child(1) .journey-back .card-number,
.journey-card:nth-child(1) .journey-back-label { color: var(--sand-gold); }
.journey-card:nth-child(1) .journey-back .journey-options,
.journey-card:nth-child(1) .journey-back .journey-option {
  border-color: rgba(232, 199, 143, 0.28);
}
.journey-card:nth-child(1) .journey-back .journey-option-row { color: var(--ivory); }
.journey-card:nth-child(1) .journey-back .journey-option.is-open .journey-option-row { color: var(--sand-gold); }
.journey-card:nth-child(1) .journey-back-cta {
  color: var(--forest);
  background: #fcfbf8;
  border-color: rgba(232, 199, 143, 0.85);
}
.journey-card:nth-child(1) .journey-back-cta:hover { background: var(--ivory); }
.journey-card:nth-child(1) .journey-back-cta .card-arrow { background-color: var(--forest); }
.journey-card:nth-child(1) .journey-back-cta .card-arrow::after { border-color: var(--forest); }

/* 02 — sage / muted turquoise, forest type */
.journey-card:nth-child(2) .journey-back {
  color: var(--forest);
  background: linear-gradient(165deg, rgba(169, 214, 210, 0.85), rgba(127, 166, 154, 0.72));
  border-color: rgba(61, 128, 120, 0.28);
}
.journey-card:nth-child(2) .journey-back .card-number { color: var(--teal); }
.journey-card:nth-child(2) .journey-back .journey-options,
.journey-card:nth-child(2) .journey-back .journey-option {
  border-color: rgba(45, 79, 73, 0.2);
}
.journey-card:nth-child(2) .journey-back .journey-option-row { color: var(--forest); }
.journey-card:nth-child(2) .journey-back .journey-option.is-open .journey-option-row { color: var(--teal); }
.journey-card:nth-child(2) .journey-back-cta {
  color: #fcfbf8;
  background: var(--forest);
}
.journey-card:nth-child(2) .journey-back-cta:hover { background: var(--teal); }
.journey-card:nth-child(2) .journey-back-cta .card-arrow { background-color: var(--sand-gold); }
.journey-card:nth-child(2) .journey-back-cta .card-arrow::after { border-color: var(--sand-gold); }

/* 03 — warm apricot / sand gold, forest type */
.journey-card:nth-child(3) .journey-back {
  color: var(--forest);
  background: linear-gradient(165deg, rgba(255, 221, 187, 0.92), rgba(232, 199, 143, 0.8));
  border-color: rgba(196, 150, 80, 0.34);
}
.journey-card:nth-child(3) .journey-back .card-number { color: var(--gold-text); }
.journey-card:nth-child(3) .journey-back .journey-options,
.journey-card:nth-child(3) .journey-back .journey-option {
  border-color: rgba(168, 112, 12, 0.26);
}
.journey-card:nth-child(3) .journey-back .journey-option-row { color: var(--forest); }
.journey-card:nth-child(3) .journey-back .journey-option.is-open .journey-option-row { color: #8f5f08; }
.journey-card:nth-child(3) .journey-back-cta {
  color: #fcfbf8;
  background: var(--forest);
}
.journey-card:nth-child(3) .journey-back-cta:hover { background: var(--teal); }
.journey-card:nth-child(3) .journey-back-cta .card-arrow { background-color: var(--sand-gold); }
.journey-card:nth-child(3) .journey-back-cta .card-arrow::after { border-color: var(--sand-gold); }

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .journey-face { transition: none; }
  .card-arrow,
  .card-flip-icon,
  .card-return-icon,
  .journey-back-cta { transition: none; }
  .journey-card:hover { transform: none; }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1080px) and (min-width: 761px) {
  /* Two up, third centred - three columns would squeeze the German copy. */
  .journey-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journey-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 34rem);
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .journey-grid {
    grid-template-columns: 1fr;
  }

  .journey-back-inner {
    padding: 1.6rem 1.4rem 1.5rem;
  }

  /* Keep the chips readable on phones. */
  .journey-option {
    font-size: 0.84rem;
    padding: 0.4rem 0.8rem;
  }

  .card-flip,
  .card-return {
    min-height: 2.6rem;
    font-size: 0.85rem;
  }

  .journey-front .card-link,
  .journey-back-cta {
    min-height: 2.7rem;
  }
}

/* =============================================================
   ABOUT — new letter rhythm + "What I believe"
   The letter is written in short stanzas, so the paragraph gap
   is tighter than for normal prose; otherwise every one-line
   stanza would float in its own empty band.
   ============================================================= */

.about-page .a-letter-body p {
  margin-bottom: 0.72rem;
}

/* A little more air before the lines that open a new thought. */
.about-page .a-letter-body p:first-child {
  margin-bottom: 1.1rem;
}

/* --- What I believe ------------------------------------------------------- */

.a-belief {
  width: min(100% - 4rem, 82rem);
  margin: clamp(3.5rem, 8vw, 7rem) auto 0;
}

.a-belief-inner {
  max-width: 46rem;
  margin-left: auto;   /* sits under the story column, not the portrait */
  padding: clamp(1.8rem, 3.5vw, 2.8rem) 0 0;
  border-top: 1px solid rgba(232, 199, 143, 0.5);
}

.about-page .a-belief h2 {
  max-width: 20ch;
  margin: 0 0 clamp(1.2rem, 2.4vw, 1.8rem);
  color: var(--forest);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.16;
  text-wrap: balance;
}

.about-page .a-belief-body p {
  max-width: 40rem;
  margin: 0 0 0.72rem;
  color: rgba(35, 58, 55, 0.8);
  font-family: var(--serif);
  font-size: clamp(1.04rem, 1.25vw, 1.2rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.about-page .a-belief-body p:last-child {
  margin-bottom: 0;
  color: var(--forest);
  font-style: italic;
}

@media (max-width: 980px) {
  .a-belief-inner {
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .a-belief {
    width: min(100% - 1.6rem, 82rem);
  }

  .about-page .a-letter-body p,
  .about-page .a-belief-body p {
    font-size: 1rem;
    line-height: 1.72;
  }
}


/* =============================================================
   CANONICAL TYPOGRAPHY — one system, every page.
   Headings: Cormorant Garamond. Labels/UI: Inter. Signatures: Alex Brush.
   This block is last in the file so it settles the small
   inconsistencies that accumulated per page.
   ============================================================= */

h1, h2, h3,
.a-letter-heading,
.about-page .a-belief h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.006em;
  text-wrap: balance;
}

p, li, dd {
  text-wrap: pretty;
}

/* Every eyebrow/kicker on the site: tracked Inter caps in sand-gold. */
.eyebrow,
.section-heading .eyebrow,
.footer-col h4,
.contact-direct dt {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* The footer sits on the light page shell, so its headings keep the
   forest ink of the links beneath them. */
.footer-col h4 {
  color: rgba(35, 58, 55, 0.62);
}

/* =============================================================
   WHAT I BELIEVE — manifesto column closed by the portrait,
   so the photo lands at the end of the message instead of
   opening the next section.
   ============================================================= */

.a-belief {
  /* Same measure as .about-story so both sections share their outer edges. */
  width: min(100% - 4rem, 82rem);
  margin: clamp(4rem, 9vw, 8rem) auto 0;
}

.a-belief-inner {
  max-width: none;
  margin-left: 0;
  padding-top: clamp(2rem, 4vw, 3rem);
}

.about-page .a-belief h2 {
  max-width: 24ch;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.1;
}

/* Same column split and gap as the story grid above, so the portrait and
   the copy line up exactly with the section above. */
.a-belief-layout {
  display: grid;
  grid-template-columns: var(--story-cols);
  gap: var(--story-gap);
  align-items: start;
}

/* The portrait travels with the reader through the manifesto,
   exactly like the letter portrait above. Transform-free wrapper
   so the entrance animation cannot break position: sticky. */
.a-belief-media-column {
  position: relative;
  height: 100%;
}

.a-belief-media-sticky {
  position: sticky;
  top: var(--sticky-offset);
  align-self: start;
}

.about-page .a-belief-body p {
  max-width: none;
  margin: 0 0 0.85rem;
  font-size: clamp(1.06rem, 1.3vw, 1.24rem);
  line-height: 1.72;
}

/* The closing line is the point of the whole section: give it
   its own rule, its own size, forest ink. */
.about-page .a-belief-body p:last-child {
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 0;
  padding-top: clamp(1.2rem, 2.4vw, 1.7rem);
  border-top: 1px solid rgba(232, 199, 143, 0.6);
  color: var(--forest);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-style: italic;
  line-height: 1.35;
}

/* Shape, ratio, radius and shadow come from the shared .a-portrait-frame
   component, so this photo is identical to the letter portrait above. */
.about-page .a-belief-media img {
  object-position: 50% 30%;
}

@media (max-width: 980px) {
  .a-belief-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.8rem, 6vw, 2.6rem);
  }

  .a-belief-media-sticky {
    position: static;
  }

  .about-page .a-belief-media {
    width: min(100%, 26rem);
    margin-inline: auto;
  }
}


/* --- Manifesto sheet ------------------------------------------------------
   The letter above sits on the dark forest sheet, so this one is its
   light counterpart: warm cream, sand-gold hairline, soft lift. --------- */

.a-belief-content {
  padding: clamp(1.8rem, 3.4vw, 3.2rem) clamp(1.5rem, 3.2vw, 3rem);
  border: 1px solid rgba(232, 199, 143, 0.55);
  border-radius: 2rem;
  background:
    radial-gradient(120% 90% at 88% 4%, rgba(232, 199, 143, 0.16), transparent 60%),
    linear-gradient(168deg, rgba(255, 253, 248, 0.92), rgba(248, 244, 236, 0.72));
  box-shadow: 0 26px 60px rgba(45, 79, 73, 0.1);
  backdrop-filter: blur(2px);
}

.a-belief-inner {
  border-top: 0;
  padding-top: 0;
}

.about-page .a-belief h2 {
  margin-top: 0.6rem;
}


/* =============================================================
   EXPERIENCE & BACKGROUND + A FEW THINGS ABOUT ME
   No emoji: each line is marked by the same sand-gold geometry,
   and the credentials carry a tracked Inter label instead of an
   icon, so the block stays quiet and premium.
   ============================================================= */

.a-notes {
  width: min(100% - 4rem, 82rem);
  margin: clamp(3.5rem, 8vw, 7rem) auto 0;
}

/* One quiet panel — the same soft gradient card used across the site — with
   the personal notes flowing in two columns inside it. */
.a-notes-block {
  padding: clamp(1.8rem, 3.5vw, 3rem);
  border: 1px solid rgba(232, 199, 143, 0.42);
  border-radius: 2rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(232, 199, 143, 0.18));
  box-shadow: var(--soft-shadow);
}

.a-notes-block .eyebrow {
  margin: 0 0 clamp(1.2rem, 2.4vw, 1.8rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(232, 199, 143, 0.5);
}

.a-facts,
.a-personal {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.a-facts {
  gap: clamp(1rem, 2vw, 1.5rem);
}

.a-fact {
  display: grid;
  gap: 0.35rem;
}

.a-fact-label {
  color: var(--gold-text);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.a-fact-text {
  color: var(--forest);
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.35;
}

.a-personal {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem clamp(2rem, 4vw, 3.5rem);
}

.a-personal li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: baseline;
  color: rgba(35, 58, 55, 0.82);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  line-height: 1.62;
}

.a-personal li::before {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  margin-top: 0.55rem;
  transform: rotate(45deg);
  background: var(--sand-gold);
}

@media (max-width: 900px) {
  .a-personal {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .a-notes {
    width: min(100% - 1.6rem, 82rem);
  }
}

/* --- Closing CTA: two lines, one door ------------------------------------ */

.about-page .a-cta-second {
  margin-top: 0.6rem;
}

/* The label is a full sentence, so the pill is a two-line-safe block:
   the arrow travels inside the text and never detaches. */
.about-page .a-cta-arrow {
  display: inline-block;
  max-width: min(100%, 26rem);
  padding: 0.95rem 1.8rem;
  text-align: center;
  white-space: normal;
  line-height: 1.35;
  text-wrap: balance;
}

/* The topic select is what an arriving visitor has to choose, so it
   gets a soft gold ring when they come in from the About page CTA. */
.contact-form select.is-highlighted {
  border-color: var(--sand-gold);
  box-shadow: 0 0 0 3px rgba(232, 199, 143, 0.28);
}


/* --- Podcast news feed (upcoming events + guided meditation) --- */

.podcast-feed {
  /* Same measure as .audio-note / .episode-section on this page. */
  width: min(100% - 3rem, 94rem);
  margin: clamp(3rem, 7vw, 6rem) auto 0;
}

.feed-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.feed-intro {
  max-width: 52ch;
  color: var(--muted);
}

.feed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.feed-column-title,
.feed-meditation h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin-bottom: 1.2rem;
}

.feed-list,
.med-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.feed-item {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.1rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(127, 166, 154, 0.25);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.feed-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(45, 79, 73, 0.12);
}

.feed-thumb {
  display: block;
  border-radius: 1.1rem;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.feed-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feed-thumb.is-empty {
  background: rgba(169, 214, 210, 0.35);
}

.feed-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.feed-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.feed-badge {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(61, 128, 120, 0.12);
  color: var(--teal);
  font: 600 0.68rem var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.feed-date {
  color: var(--forest);
  font: 600 0.78rem var(--sans);
  letter-spacing: 0.04em;
}

.feed-item h4 {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.25;
}

.feed-place {
  color: var(--teal);
  font: 500 0.85rem var(--sans);
}

.feed-item p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.feed-item .card-link {
  margin-top: 0.4rem;
}

.feed-meditation {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.5rem, 2.5vw, 2.2rem);
  border-radius: 1.75rem;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.85), rgba(169, 214, 210, 0.28));
  border: 1px solid rgba(127, 166, 154, 0.3);
}

.feed-med-intro {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.med-list {
  margin: 0.8rem 0 1.4rem;
  gap: 0.7rem;
}

.med-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.72);
}

.med-item strong {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
}

.med-item p {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.med-duration {
  white-space: nowrap;
  color: var(--teal);
  font: 600 0.78rem var(--sans);
}

.feed-meditation .pill-button {
  align-self: flex-start;
}

@media (max-width: 900px) {
  .feed-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .feed-meditation {
    position: static;
  }
}

@media (max-width: 560px) {
  .feed-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .feed-thumb {
    aspect-ratio: 16 / 10;
  }
}


/* --- Homepage "what's coming": two standalone cards side by side ---------
   Card one is the next retreat, card two the online programme. Each card is a
   flex column so the actions line up at the bottom regardless of copy length. */

.news-section {
  width: min(100% - 4rem, 94rem);
  margin: clamp(3rem, 6vw, 5.5rem) auto 0;
}

.news-head {
  max-width: 46rem;
}

.news-section h2 {
  margin: 0;
  color: var(--forest);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.1;
}

.news-intro {
  max-width: 40rem;
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.news-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  padding: 0;
  list-style: none;
}

.news-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  /* Deep forest, matching the former review cards. */
  border: 1px solid rgba(232, 199, 143, 0.28);
  border-radius: 1.75rem;
  background: linear-gradient(155deg, #2D4F49, #233A37);
  box-shadow: var(--soft-shadow);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.news-item:hover {
  transform: translateY(-3px);
  border-color: rgba(232, 199, 143, 0.5);
  box-shadow: 0 24px 50px rgba(35, 58, 55, 0.26);
}

.news-date {
  display: grid;
  place-items: center;
  align-items: center;
  justify-content: center;
  width: 93px;
  min-height: 67px;
  height: 67px;
  margin-bottom: 0.6rem;
  padding: 0.55rem 0.35rem;
  border: 1px solid rgba(232, 199, 143, 0.3);
  border-radius: 1.1rem;
  background: rgba(248, 244, 236, 0.1);
}

.news-date strong {
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
}

.news-date small {
  margin-top: 0.3rem;
  color: #E8C78F;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.news-meta {
  display: block;
  color: #E8C78F;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.news-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.news-title {
  display: block;
  margin: 0.15rem 0 0.1rem;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 600;
  line-height: 1.15;
}

.news-note {
  display: block;
  color: rgba(248, 244, 236, 0.78);
  font-size: 0.9rem;
  line-height: 1.6;
}

.news-subnote {
  display: block;
  margin-top: 0.75rem;
  color: #E8C78F;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-details {
  display: block;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(232, 199, 143, 0.22);
}

.news-details-title {
  display: block;
  margin-bottom: 0.55rem;
  color: #E8C78F;
  font: 600 0.66rem var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.news-details ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 1.2rem;
}

.news-details li {
  position: relative;
  padding-left: 0.85rem;
  color: rgba(248, 244, 236, 0.76);
  font-size: 0.78rem;
  line-height: 1.45;
}

.news-details li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.26rem;
  height: 0.26rem;
  border-radius: 50%;
  background: #E8C78F;
}

.news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1.3rem;
}

.news-cta {
  padding: 0.6rem 1.15rem;
  border: 1px solid rgba(232, 199, 143, 0.4);
  border-radius: 999px;
  background: rgba(248, 244, 236, 0.1);
  color: var(--ivory);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.news-cta:hover {
  border-color: transparent;
  background: #F1AA1C;
  color: var(--forest);
}

.news-cta.is-primary {
  border-color: transparent;
  background: var(--ivory);
  color: var(--forest);
}

.news-cta.is-primary:hover {
  background: #F1AA1C;
  color: var(--forest);
}

.news-section {
  display: flex;
  flex-direction: column;
}

.news-section > .news-list {
  width: 100%;
}

.news-empty {
  grid-column: 1 / -1;
  padding: 1.2rem 0;
  color: var(--muted);
}

@media (max-width: 900px) {
  .news-section {
    width: min(100% - 2.5rem, 94rem);
  }

  .news-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .news-details ul {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Personalised recording panel: same shell as the Hypnospace note, warmer. */
.custom-note {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82), rgba(232, 199, 143, 0.22));
  border: 1px solid rgba(200, 160, 96, 0.35);
}

.custom-meta {
  margin-top: 0.6rem;
  color: var(--gold-text);
  font: 600 0.68rem var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* --- Origin story banner on the meditation page --- */

.story-banner {
  width: min(100% - 3rem, 94rem);
  margin: clamp(2.5rem, 5vw, 4.5rem) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(127, 166, 154, 0.3);
  border-radius: 2rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.85), rgba(169, 214, 210, 0.24));
  box-shadow: var(--soft-shadow);
}

.story-banner-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.8rem, 3.5vw, 3.2rem);
  overflow: hidden;
}

/* The brand mark turns slowly behind the copy, same mechanic as the audio
   disc on this page. */
.story-banner-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92%, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.2;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: storyMarkSpin 120s linear infinite;
}

@keyframes storyMarkSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.story-banner-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.story-banner-copy > *:not(.story-banner-mark) {
  position: relative;
  z-index: 1;
}

.story-banner-copy h2 {
  color: var(--forest);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  line-height: 1.12;
}

.story-banner-copy p:not(.eyebrow) {
  max-width: 44ch;
  color: rgba(35, 58, 55, 0.8);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.story-banner-media {
  margin: 0;
  min-height: 18rem;
}

.story-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .story-banner {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-banner-media {
    min-height: 14rem;
    order: -1;
  }
}


@media (prefers-reduced-motion: reduce) {
  .story-banner-mark {
    animation: none;
    transform: translate(-50%, -50%);
  }
}


/* =============================================================
   Mobile header: keep the hamburger reachable
   The narrower breakpoints below 900px used to collapse the header to a
   single column, which pushed the toggle out of the header row entirely.
   This block re-asserts the two-column layout for every phone width.
   ============================================================= */

@media (max-width: 900px) {
  .site-header {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .brand-lockup {
    grid-column: 1;
    grid-row: 1;
  }

  .mobile-menu-toggle {
    display: block;
    grid-column: 2;
    grid-row: 1;
    flex: 0 0 auto;
  }

  .header-actions {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .main-nav {
    grid-column: 1 / -1;
  }
}

/* Only the closing word of each heading is handwritten; the rest of the
   heading keeps its serif. Applied by main.js (.hw-accent). */
.hw-accent {
  font-family: var(--script);
  font-weight: 400;
  font-size: 1.35em;
  line-height: 0.9;
  color: var(--teal);
}


/* =============================================================
   Premium package block (experience page) — reuses the featured
   retreat layout, with a titled list of what the package holds.
   ============================================================= */

.package-feature .featured-retreat-copy h2 {
  font-size: clamp(2.6rem, 4vw, 4.2rem);
  letter-spacing: -0.01em;
}

.package-tagline {
  margin: 0.2rem 0 0.9rem;
  color: var(--forest);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-style: italic;
  line-height: 1.35;
}

.package-included-title {
  margin: 2rem 0 0.9rem;
  color: var(--forest);
  font: 600 0.72rem var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.package-includes {
  display: grid;
  gap: 1.05rem;
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
}

.package-includes li {
  display: grid;
  gap: 0.28rem;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(127, 166, 154, 0.45);
}

.package-includes strong {
  color: var(--forest);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.package-includes span {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.package-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin: 0 0 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(127, 166, 154, 0.4);
  color: var(--forest);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .package-includes li {
    padding-left: 0.9rem;
  }
}

/* Signature portrait: keep the face in frame inside the shaped media column. */
#aure-signature .featured-retreat-media img {
  object-position: 50% 25%;
}

/* BEZTÍŽE: a readable long-form programme block with the supplied poster. */
.beztize-feature { align-items: start; }
.beztize-media {
  aspect-ratio: 1086 / 1536;
  min-height: 0;
  position: sticky;
  top: 1.5rem;
  border-radius: 2rem;
  background: var(--forest);
  padding: .65rem;
}
.beztize-media img { border-radius: 1.45rem; object-fit: cover; object-position: center top; }
.beztize-copy h2 { font-size: clamp(2.75rem, 4.5vw, 4.8rem); }
.beztize-panel {
  margin: 1.8rem 0;
  padding: clamp(1.15rem, 2vw, 1.6rem);
  border: 1px solid rgba(127,166,154,.28);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.58);
}
.beztize-panel h3, .beztize-section-title {
  margin: 0 0 .9rem;
  color: var(--forest);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2vw, 1.8rem);
}
.beztize-panel ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.beztize-panel li { position: relative; padding-left: 1.15rem; color: var(--muted); line-height: 1.6; }
.beztize-panel li::before { content: ""; position: absolute; left: 0; top: .67em; width: .38rem; height: .38rem; border-radius: 50%; background: var(--sand-gold); }
.beztize-bridge { color: var(--forest) !important; font-family: var(--serif); font-size: 1.3rem !important; font-style: italic; }
.beztize-section-title { margin-top: 2.2rem; }
.beztize-modules { display: grid; gap: .75rem; margin-bottom: 1.8rem; }
.beztize-module { padding: 1rem 1.1rem; border-left: 2px solid var(--sand-gold); background: rgba(232,199,143,.12); }
.beztize-module strong { display: block; margin-bottom: .25rem; color: var(--forest); font: 600 .96rem var(--sans); }
.beztize-module span { color: var(--muted); line-height: 1.55; }
.beztize-closing { color: var(--forest) !important; }
.beztize-pricing { display: grid; gap: .35rem; margin: 2rem 0 1.4rem; padding: 1.25rem 1.35rem; border-radius: 1.15rem; color: #fff; background: var(--forest); }
.beztize-pricing strong { font-family: var(--serif); font-size: 1.35rem; }
.beztize-pricing span:first-of-type { color: var(--sand-gold); font: 600 1.65rem var(--serif); }
.beztize-pricing small { color: rgba(255,255,255,.74); }
@media (max-width: 1080px) { .beztize-media { position: static; width: min(100%, 38rem); margin-inline: auto; } }

/* Long Experience stories: the supplied visual stays with its text while the
   reader moves through the section. On smaller screens the natural document
   flow is clearer, so the image becomes static again. */
.story-feature { align-items: start; }
.story-sticky-media { position: sticky; top: 1.5rem; align-self: start; }
.community-retreat-media { min-height: 32rem; border-radius: 2rem; }
.community-retreat-media { height: min(32rem, calc(100svh - 8rem)); max-height: calc(100svh - 8rem); }
.community-retreat-media { top: 6rem; }
.community-retreat-media img { object-position: center; }
.community-retreat-copy > p { margin-bottom: 1.05rem; }
.community-quote {
  position: relative;
  margin: 1.8rem 0;
  padding: 1.45rem 1.5rem 1.45rem 2rem;
  border-left: 3px solid var(--sand-gold);
  border-radius: 0 1.25rem 1.25rem 0;
  color: var(--forest);
  background: rgba(232,199,143,.14);
  font: italic clamp(1.18rem,1.8vw,1.45rem)/1.55 var(--serif);
}
.community-emphasis { color: var(--forest) !important; font-family: var(--serif); font-size: 1.3rem !important; font-style: italic; }
.community-social { margin-top: 2rem; padding: clamp(1.3rem,2.5vw,2rem); border-radius: 1.4rem; background: rgba(169,214,210,.18); }
.community-social h3 { margin: 0; color: var(--forest); font: 600 clamp(1.45rem,2vw,1.8rem) var(--serif); }
.community-social p { color: var(--muted); line-height: 1.65; }
.is-placeholder[aria-disabled="true"] { cursor: default; }

.audience-expanded { margin-top: clamp(3rem,6vw,6rem); text-align: left; }
.audience-expanded h2 { max-width: 13ch; margin-left: 0; }
.audience-expanded h2 .accent { display: inline-block; font-family: var(--script); font-size: 1.24em; font-weight: 400; color: var(--sand-gold); }
.audience-points { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem 2rem; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.audience-points li { position: relative; padding: 1rem 1rem 1rem 2rem; border-top: 1px solid rgba(248,244,236,.2); color: rgba(248,244,236,.86); line-height: 1.6; }
.audience-points li::before { content: ""; position: absolute; left: .45rem; top: 1.62rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--sand-gold); }
.audience-expanded .audience-closing { max-width: none !important; margin: 2rem 0 0 !important; color: var(--ivory) !important; font: italic clamp(1.25rem,2vw,1.6rem)/1.5 var(--serif) !important; }

@media (max-width: 1080px) {
  .story-sticky-media { position: static; width: min(100%, 44rem); margin-inline: auto; }
}
@media (max-width: 700px) {
  .audience-points { grid-template-columns: 1fr; }
  .audience-expanded h2 { font-size: clamp(2.5rem,12vw,4rem); }
}


/* =============================================================
   FAQ (experience page) — quiet rows that open in place, same
   language as the journey-card option list on the homepage.
   ============================================================= */

.faq-section {
  width: min(100% - 4rem, 94rem);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 6rem) 0;
}

.faq-section h2 {
  margin: 0 0 clamp(1.6rem, 3vw, 2.6rem);
  font-size: clamp(2.4rem, 3.6vw, 3.6rem);
}

.faq-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(127, 166, 154, 0.4);
}

.faq-item {
  border-bottom: 1px solid rgba(127, 166, 154, 0.4);
}

.faq-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.4rem;
  width: 100%;
  padding: 1.15rem 0.1rem;
  border: 0;
  background: none;
  color: var(--forest);
  font-family: var(--sans);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  text-wrap: pretty;
  cursor: pointer;
  transition: padding-left 240ms ease, color 200ms ease;
}

.faq-question:hover {
  padding-left: 0.35rem;
}

.faq-question:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

.faq-item.is-open .faq-question {
  color: var(--teal);
}

.faq-question .journey-option-icon {
  margin-top: 0.4rem;
  opacity: 0.6;
}

.faq-item.is-open .journey-option-icon {
  opacity: 1;
  transform: rotate(180deg);
}

.faq-item.is-open .journey-option-icon::after {
  transform: rotate(90deg) scaleX(0);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 340ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 240ms ease;
}

.faq-answer p {
  margin: 0;
  padding: 0 3rem 1.25rem 0.1rem;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.faq-item.is-open .faq-answer {
  max-height: 18rem;
  opacity: 1;
}

@media (max-width: 900px) {
  .faq-section {
    width: min(100% - 2.5rem, 94rem);
  }

  .faq-answer p {
    padding-right: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-question {
    transition: none;
  }
}
/* Legal pages — compact, readable and consistent with the global palette. */
.legal-page { min-height: 100vh; background: var(--ivory, #F8F4EC); color: var(--ink, #283A36); }
.legal-header { width: min(1120px, calc(100% - 40px)); margin: 24px auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.legal-header nav { display: flex; gap: 4px; }
.legal-content { width: min(760px, calc(100% - 40px)); margin: 72px auto 120px; }
.legal-content article { display: grid; gap: 16px; }
.legal-content h1 { font-size: clamp(2.7rem, 7vw, 5rem); line-height: .98; margin: 0 0 24px; }
.legal-content h2 { margin: 26px 0 0; font-size: 1.45rem; }
.legal-content p, .legal-content dd { line-height: 1.75; }
.legal-content dl { display: grid; grid-template-columns: 150px 1fr; gap: 12px 24px; }
.legal-content dt { font-weight: 600; }
.legal-content dd { margin: 0; }
.legal-back { margin-top: 48px; }
@media (max-width: 640px) { .legal-header { align-items: flex-start; flex-direction: column; } .legal-content { margin-top: 48px; } .legal-content dl { grid-template-columns: 1fr; gap: 4px; } .legal-content dd { margin-bottom: 12px; } }

/* =============================================================
   v1.4.2 — legible mobile navigation
   The drawer is deliberately opaque and every destination is rendered as a
   numbered row, so opening the menu can never look like an empty overlay.
   ============================================================= */
@media (max-width: 900px) {
  .site-header .main-nav {
    counter-reset: mobile-nav;
    max-height: calc(100dvh - 11rem);
    overflow-y: auto;
    padding: 0.55rem;
    border-color: rgba(232, 199, 143, 0.7);
    background: #f8f4ec;
    box-shadow: 0 26px 70px rgba(24, 53, 48, 0.3);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header .main-nav a {
    counter-increment: mobile-nav;
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    min-height: 3.55rem;
    padding: 0.72rem 0.9rem;
    border-bottom: 1px solid rgba(45, 79, 73, 0.12);
    border-radius: 0.7rem;
    color: var(--forest);
    font-family: var(--serif);
    font-size: clamp(1.05rem, 4.8vw, 1.25rem);
    line-height: 1.15;
  }

  .site-header .main-nav a:last-child {
    border-bottom-color: transparent;
  }

  .site-header .main-nav a::before {
    content: "0" counter(mobile-nav);
    display: grid;
    width: 2.05rem;
    height: 2.05rem;
    place-items: center;
    border: 1px solid rgba(182, 137, 63, 0.45);
    border-radius: 50%;
    color: var(--gold-text);
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
  }

  .site-header .main-nav a::after {
    content: "→";
    position: static;
    width: auto;
    height: auto;
    color: var(--gold-text);
    background: none;
    font-family: var(--sans);
    font-size: 1rem;
  }

  .site-header .main-nav a:hover,
  .site-header .main-nav a:focus-visible {
    color: var(--forest);
    background: rgba(169, 214, 210, 0.24);
    outline: none;
  }
}

.online-page .o-card-how-label {
  margin-top: 1.2rem;
  color: var(--forest);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.online-page .o-card-how-label + p {
  margin-top: 0.35rem;
}

.gift-feature-free {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 0.6rem;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: rgba(232, 199, 143, 0.28);
  color: var(--forest);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.news-foot {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.package-price s {
  opacity: 0.55;
  margin-right: 0.4rem;
}

.package-price strong {
  font-weight: 700;
}

/* Header legibility on tablet and phone: the late unscoped .brand-lockup strong
   clamp() was overriding the responsive sizes, so the wordmark ran into the
   byline and the menu button. Scope it back down here. */
@media (max-width: 900px) {
  .site-header { column-gap: 1.25rem; }

  .brand-lockup { min-width: 0; gap: 0.7rem; }

  .brand-lockup span { min-width: 0; }

  .brand-lockup strong {
    font-size: clamp(0.95rem, 2.6vw, 1.25rem);
    line-height: 1.25;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  .brand-lockup small {
    display: block;
    margin-top: 0.25rem;
    font-size: clamp(0.55rem, 1.5vw, 0.7rem);
    line-height: 1.3;
    white-space: nowrap;
  }

  .brand-lockup img { width: 3.1rem; height: 3.1rem; }
}

@media (max-width: 480px) {
  .brand-lockup strong { font-size: 0.9rem; letter-spacing: 0.1em; }
  .brand-lockup small { display: none; }
  .brand-lockup img { width: 2.7rem; height: 2.7rem; }
}

/* Tablet/laptop range: the wordmark's max-content span pushed the centre nav
   under the brand text. Tighten brand + nav so the row never collides. */
@media (max-width: 1280px) and (min-width: 901px) {
  .site-header { column-gap: 1.1rem; }

  .brand-lockup { min-width: 0; gap: 0.6rem; }
  .brand-lockup span { min-width: 0; }

  .brand-lockup strong {
    font-size: clamp(0.9rem, 1.45vw, 1.2rem);
    letter-spacing: 0.13em;
    white-space: nowrap;
  }

  .brand-lockup small {
    font-size: 0.52rem;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  .brand-lockup img { width: 3rem; height: 3rem; }

  .main-nav { gap: clamp(0.6rem, 1.4vw, 1.4rem); }
  .main-nav a { font-size: clamp(0.82rem, 1.15vw, 1rem); white-space: nowrap; }

  .header-cta { font-size: 0.78rem; padding-inline: 1.1rem; white-space: nowrap; }
}

/* Closing word of the journeys heading and of the gift-card title is set in
   Veronika's script face, in the same soft blue as the other accents. */
.journey-section .section-heading h2 .hw-accent {
  display: inline-block;
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.28em;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--teal);
}


/* Compact contact composer */
.contact-section .contact-form-wrap {
  width: 100%;
  max-width: 27rem;
  min-width: 0;
  justify-self: center;
  align-self: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(127, 166, 154, 0.28);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(248, 244, 236, 0.92), rgba(169, 214, 210, 0.12));
}
.contact-form-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1.15rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid rgba(127, 166, 154, 0.25);
}
.contact-form-brand img {
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}
.contact-form-brand span {
  color: var(--forest);
  font: 500 0.85rem var(--sans);
  letter-spacing: 0.18em;
}
.contact-form-brand small {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.contact-form .field { margin-top: 0.9rem; }
.contact-form .field:first-child { margin-top: 0; }
.contact-form label { font-size: 0.75rem; letter-spacing: 0.025em; }
.contact-form input,
.contact-form select {
  display: block;
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  border-radius: 0.65rem;
  background-color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.25;
}
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%232D4F49' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
}
.contact-form .pill-button {
  margin-top: 1.15rem;
  min-height: 44px;
  padding: 0.75rem 1.3rem;
  font-size: 0.72rem;
}
.contact-form .contact-mailto-hint {
  margin: 0.8rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
}
.contact-form-wrap .form-success {
  margin-top: 1rem;
  padding: 0.8rem;
  font: 400 0.82rem/1.6 var(--sans);
}


/* =============================================================
   STICKY HEADER — a menü görgetéskor a képernyő tetején marad
   =============================================================
   A fejléc lebegő "pill" marad (kerekített, nem teljes szélességű);
   csak annyi változik, hogy görgetéskor a tetején ragad.
   A .page-shell szándékosan overflow:clip (nem hidden), így a
   sticky pozicionálás működik.
   A top érték megegyezik a fejléc eredeti felső margójával, hogy
   a kiindulási megjelenés pixelre azonos maradjon. */

.site-header {
  position: sticky;
  top: 1.4rem;
}

/* Görgetés közben enyhén erősebb árnyék, hogy elváljon a tartalomtól.
   A szín, méret és forma változatlan. */
.site-header.is-stuck {
  box-shadow: 0 18px 44px rgba(35, 58, 55, 0.26);
}

@media (max-width: 720px) {
  /* Mobilon kisebb a felső margó, a sticky offset ezt követi. */
  .site-header {
    top: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}


/* A jogi oldalak (Impressum, Adatvédelem) fejléce is kövesse a görgetést.
   Ez a fejléc átlátszó, ezért sticky állapotban kap egy letisztult
   háttérsávot, különben a szöveg átlátszana alatta. */

.legal-header {
  position: sticky;
  top: 0;
  z-index: 30;
  /* az eredeti 24px felső margó a sávon belülre kerül, hogy a ragadás
     pillanatában ne ugorjon a tartalom */
  margin-top: 0;
  padding-top: 24px;
  padding-bottom: 16px;
  background: var(--ivory);
}

.legal-header.is-stuck {
  box-shadow: 0 10px 30px rgba(35, 58, 55, 0.10);
}

@media (max-width: 720px) {
  .legal-header {
    padding-top: 16px;
    padding-bottom: 12px;
  }
}


/* =============================================================
   ÖSSZECSUKHATÓ NYELVVÁLASZTÓ
   =============================================================
   Alapállapotban csak a kiválasztott nyelv látszik, így a fejléc
   keskenyebb és nyugodtabb. Kattintásra a többi nyelv finoman
   kibomlik, választás után visszacsukódik.

   JavaScript nélkül a .is-open osztály soha nem kerül fel, ezért
   a :focus-within gondoskodik róla, hogy billentyűzettel és
   JS nélkül is elérhető maradjon mind a négy nyelv. */

.language-switcher {
  position: relative;
  transition: gap 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-btn {
  max-width: 5rem;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width 420ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 420ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
    background 180ms ease,
    color 180ms ease;
}

/* Összecsukva: a nem kiválasztott nyelvek szélessége nullára fut */
.language-switcher:not(.is-open):not(:focus-within) .lang-btn:not(.is-active),
.language-switcher.lang-js:not(.is-open) .lang-btn:not(.is-active) {
  max-width: 0;
  /* A mobil szabályok min-width-et adnak a gomboknak; az erősebb a
     max-width-nél, ezért itt kifejezetten nullázni kell, különben
     a gombok kis méretben is helyet foglalnának. */
  min-width: 0;
  flex: 0 0 0;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
}

/* Összecsukva a sáv ne tartson fenn mobilra méretezett helyet. */
.language-switcher:not(.is-open):not(:focus-within),
.language-switcher.lang-js:not(.is-open) {
  max-width: none;
  overflow: visible;
}

.language-switcher:not(.is-open):not(:focus-within),
.language-switcher.lang-js:not(.is-open) {
  gap: 0;
}

/* A kiválasztott nyelv összecsukott állapotban jelzi, hogy nyitható */
.language-switcher:not(.is-open):not(:focus-within) .lang-btn.is-active {
  cursor: pointer;
}

.language-switcher.is-open .lang-btn:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .language-switcher,
  .lang-btn {
    transition: opacity 160ms ease, background 160ms ease, color 160ms ease;
  }
}


/* =============================================================
   KOMPAKT MOBIL FEJLÉC
   =============================================================
   Korábban a fejléc mobilon két sorba tördelt: fent a logó és a
   hamburger, alatta külön sorban a nyelvválasztó és a foglalás gomb.
   Ez azért kellett, mert a nyelvválasztó négy gombja nem fért el.

   Az összecsukható nyelvválasztó óta ez már csak 52 px, így minden
   elfér egyetlen sorban. A fejléc magassága így ~144 px-ről
   nagyjából a felére csökken. */

@media (max-width: 720px) {
  .site-header {
    /* vissza egyetlen sorba: márka | üres | műveletek */
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    row-gap: 0;
  }

  /* Explicit elhelyezés: a lenyíló menü (.main-nav) is grid-elem,
     ezért automatikus elhelyezésnél a műveletek a második sorba
     csúsztak. Így mindhárom elem egy sorban marad. */
  .brand-lockup {
    grid-column: 1;
    grid-row: 1;
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    gap: 0.45rem;
  }

  .mobile-menu-toggle {
    grid-column: 3;
    grid-row: 1;
  }

  /* A lenyíló menü a fejléc alatt, teljes szélességben */
  .site-header .main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* A foglalás gomb mobilon kétszeresen is elérhető: a hamburger
     menüben és a képernyő alján lebegő kapcsolat gombként.
     A fejlécből ezért kivehető, és ezzel nyer helyet a sor. */
  .site-header .header-cta {
    display: none;
  }

  .brand-lockup img {
    width: 2.9rem;
    height: 2.9rem;
  }
}

@media (max-width: 430px) {
  /* Kis telefonokon a kézjegy-sor is elmarad; a kör alakú logó
     maga is hordozza az AURE SPACE nevet. */
  .brand-lockup span small {
    display: none;
  }

  .brand-lockup img {
    width: 2.6rem;
    height: 2.6rem;
  }

  .site-header {
    gap: 0.45rem;
  }
}