/* ============================================================
   BEGINNERS v2 — bold editorial design language (POC)
   New hero + craft showcase. Reuses tokens/header/footer/buttons
   from styles.css; introduces a richer, image-led, asymmetric
   system. Class prefixes: .phero (hero), .craft (showcase).
   ============================================================ */

/* a touch more cinematic reveal for this page */
.v2 .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.v2 .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .v2 .reveal { opacity: 1; transform: none; transition: none; } }

/* image clip-reveal: photos wipe + settle from a slight scale */
.figraw { position: relative; overflow: hidden; background: var(--cream-deep); }
.figraw img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.figraw.is-in img, .reveal.is-in .figraw img { transform: scale(1); }
.figraw::after { content: ""; position: absolute; inset: 0; background: var(--cream); transform: scaleY(1); transform-origin: top; transition: transform 1.1s var(--ease); }
.reveal.is-in .figraw::after { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) {
  .figraw img { transform: none; transition: none; }
  .figraw::after { display: none; }
}

/* ---------- HERO: asymmetric editorial split ---------- */
.phero { position: relative; background: var(--cream); display: grid; grid-template-columns: 1.18fr 0.82fr; min-height: 90vh; overflow: clip; }
.phero__copy { align-self: center; padding: clamp(108px, 12vh, 146px) clamp(28px, 5vw, 76px) clamp(46px, 7vh, 84px) clamp(28px, 7vw, 110px); position: relative; z-index: 2; max-width: 760px; }
.phero__eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sage-ink); margin: 0; }
.phero__eyebrow .rule { display: block; width: 26px; height: 1px; background: var(--sage); flex: none; }
.phero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 6vw, 92px); line-height: 0.96; letter-spacing: -0.022em; color: var(--ink); margin: clamp(16px, 2vw, 28px) 0 0; }
.phero__title em { display: block; font-style: italic; color: var(--sage-ink); }
.phero__sub { font-family: var(--sans); font-style: normal; font-size: clamp(16.5px, 1.35vw, 20px); line-height: 1.58; color: var(--text-muted); margin: clamp(18px, 2vw, 26px) 0 0; max-width: 46ch; }
.phero__cta { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 34px); flex-wrap: wrap; margin-top: clamp(24px, 2.8vw, 36px); }
.phero__proof { display: flex; align-items: center; gap: 11px; margin: clamp(18px, 2vw, 26px) 0 0; font-family: var(--sans); font-size: 15px; letter-spacing: 0.02em; color: var(--ink-soft); }
.phero__proof .stars { color: var(--ink); letter-spacing: 2px; }

.phero__media { position: relative; overflow: hidden; background: var(--cream-deep); margin: clamp(92px, 12vh, 128px) clamp(28px, 4vw, 64px) clamp(48px, 8vh, 96px) 0; border-radius: 4px; box-shadow: 0 40px 80px -52px rgba(55,37,26,.42); }
.phero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(1.08); transition: transform 1.8s var(--ease); }
.phero.is-ready .phero__media img { transform: scale(1); }
.phero__cap { position: absolute; left: clamp(18px, 2vw, 30px); bottom: clamp(18px, 2vw, 30px); z-index: 3; display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,253,0.92); backdrop-filter: blur(4px); color: var(--ink); padding: 9px 15px; border-radius: 999px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; }
.phero__cap .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
/* the ink-line: a hairline that runs the seam and draws downward */
.phero__seam { display: none; }
@media (prefers-reduced-motion: reduce) { .phero__media img { transform: none; } }

@media (max-width: 900px) {
  .phero { grid-template-columns: 1fr; min-height: 0; }
  .phero__copy { order: 1; padding: clamp(120px, 17vh, 150px) clamp(22px, 7vw, 40px) clamp(30px, 5vh, 44px); max-width: none; }
  .phero__media { order: 2; position: relative; height: min(78vh, 560px); margin: 0; }
  .phero__seam { display: none; }
  .phero__title { font-size: clamp(46px, 13vw, 76px); }
}

/* ---------- CRAFT SHOWCASE: art-directed gallery of real work ---------- */
.craft { position: relative; background: var(--cream); padding: clamp(80px, 12vh, 160px) 0 clamp(90px, 13vh, 170px); overflow: clip; }
.craft__wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
.craft__head { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(24px, 4vw, 60px); align-items: end; margin-bottom: clamp(48px, 6vw, 84px); }
.craft__eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 20px; }
.craft__eyebrow .rule { width: 46px; height: 1px; background: var(--sage); }
.craft__title { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 5vw, 66px); line-height: 1.02; letter-spacing: -0.015em; color: var(--ink); margin: 0; max-width: 16ch; }
.craft__title em { font-style: italic; color: var(--sage-ink); }
.craft__note { font-family: var(--script); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.15; color: var(--ink); }
.craft__note span { display: block; font-family: var(--sans); font-style: normal; font-size: 14.5px; line-height: 1.6; letter-spacing: 0; color: var(--text-muted); margin-top: 14px; }

.craft__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 30px); align-items: start; }
.craft__item { margin: 0; }
.craft__item--a { grid-column: 1 / 6; }
.craft__item--b { grid-column: 7 / 12; margin-top: clamp(48px, 9vw, 132px); }
.craft__item--c { grid-column: 2 / 7; margin-top: clamp(24px, 3vw, 56px); }
.craft__item--d { grid-column: 8 / 13; margin-top: clamp(-72px, -4vw, -24px); }
.craft__item--e { grid-column: 3 / 9; margin-top: clamp(28px, 3.5vw, 64px); }
.craft__item .figraw { border-radius: 2px; }
.craft__item--a .figraw { aspect-ratio: 4 / 5; }
.craft__item--b .figraw { aspect-ratio: 3 / 4; }
.craft__item--c .figraw { aspect-ratio: 4 / 5; }
.craft__item--d .figraw { aspect-ratio: 5 / 4; }
.craft__item--e .figraw { aspect-ratio: 3 / 4; }
.craft__cap { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; font-family: var(--sans); font-size: 15.5px; letter-spacing: 0.02em; color: var(--ink); }
.craft__cap b { font-weight: 600; }
.craft__cap span { color: var(--text-muted); }

.craft__foot { margin-top: clamp(56px, 7vw, 96px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 40px); }
.craft__foot p { font-family: var(--serif); font-style: italic; font-size: clamp(23px, 1.8vw, 26px); line-height: 1.35; color: var(--ink); margin: 0; max-width: 30ch; }

@media (max-width: 900px) {
  .craft__head { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .craft__note { font-size: 26px; }
  .craft__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .craft__item--a, .craft__item--b, .craft__item--c, .craft__item--d, .craft__item--e { grid-column: auto; margin-top: 0; }
  .craft__item--a { grid-column: 1 / 3; }            /* lead piece full width */
  .craft__item--d { grid-column: 1 / 3; }            /* wide process shot full width */
  .craft__item--b { margin-top: 26px; }
  .craft__item--c { margin-top: -26px; }
}
@media (max-width: 540px) {
  .craft__grid { grid-template-columns: 1fr; }
  .craft__item, .craft__item--a, .craft__item--b, .craft__item--c, .craft__item--d, .craft__item--e { grid-column: auto; margin-top: 0; }
  .craft__item + .craft__item { margin-top: 20px; }
}

/* ---------- craft gallery v2: horizontal scroll-snap filmstrip ----------
   Supersedes the staggered .craft__grid above (now unused) — that read as a
   misaligned bug. This is a clean, intentional gallery: ~3-up + peek on
   desktop, 1-up + peek swipe carousel on mobile, with dots. */
.craftgal { position: relative; }
.craftgal__track {
  display: flex; gap: clamp(16px, 1.8vw, 26px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 2px 0 6px;
}
.craftgal__track::-webkit-scrollbar { display: none; }
.craftgal__item { flex: 0 0 auto; width: clamp(252px, 27vw, 356px); scroll-snap-align: start; margin: 0; }
.cimg { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; background: var(--cream-deep); }
.cimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.3s var(--ease); }
.craftgal__item:hover .cimg img { transform: scale(1.045); }
.craftgal__item .craft__cap { margin-top: 14px; }
.craftgal__dots { display: flex; gap: 8px; margin-top: clamp(22px, 2.4vw, 32px); }
.craftgal__dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: var(--line-strong); cursor: pointer; transition: background .3s var(--ease); }
.craftgal__dot.is-active { background: var(--ink); }
.craftgal__hint { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-family: var(--sans); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-ink); }
.craftgal__hint svg { width: 26px; height: 8px; }
@media (hover: none) { .craftgal__hint { display: none; } }
@media (max-width: 760px) { .craftgal__item { width: 80vw; } }

/* ---------- YOUR FOUR DAYS: dark itinerary + ink-line thread ---------- */
.days { padding: clamp(80px, 12vh, 150px) 0; overflow: clip; }
.days__wrap { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
.days__head { margin-bottom: clamp(40px, 6vw, 76px); }
.days__eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sage-soft); margin: 0 0 22px; }
.days__eyebrow .rule { width: 46px; height: 1px; background: var(--sage-soft); opacity: 0.6; }
.days__title { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.015em; color: var(--on-dark); margin: 0; max-width: 18ch; }
.days__title em { font-style: italic; color: var(--sage-soft); }

.days__list { position: relative; list-style: none; margin: 0; padding: 0; }
.days__thread { position: absolute; left: 5px; top: 14px; bottom: 14px; width: 1px; background: var(--sage-soft); opacity: 0.45; transform: scaleY(0); transform-origin: top; transition: transform 1.7s var(--ease); }
.days.is-in .days__thread { transform: scaleY(1); }

.day { position: relative; display: grid; grid-template-columns: clamp(96px, 12vw, 168px) 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; padding: clamp(34px, 4.5vw, 56px) 0 clamp(34px, 4.5vw, 56px) clamp(34px, 5vw, 72px); border-top: 1px solid var(--line-dark); }
.day:first-of-type { border-top: none; }
.day__node { position: absolute; left: 0; top: clamp(40px, 5vw, 62px); width: 11px; height: 11px; border-radius: 50%; background: var(--forest); border: 1px solid var(--sage-soft); transition: background 0.7s var(--ease); }
.day.is-in .day__node { background: var(--sage-soft); }
.day__lead { line-height: 0; }
.day__n { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 5.6vw, 92px); line-height: 0.85; letter-spacing: -0.02em; color: var(--on-dark); }
.day__label { display: block; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage-soft); margin-top: 14px; line-height: 1; }
.day__title { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.08; color: var(--on-dark); margin: 0 0 14px; }
.day__desc { font-family: var(--sans); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.62; color: var(--on-dark-muted); margin: 0 0 20px; max-width: 54ch; }
.day__points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px 10px; }
.day__points li { font-family: var(--sans); font-size: 14px; letter-spacing: 0.02em; color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: 999px; padding: 7px 15px; }
@media (max-width: 680px) {
  .day { grid-template-columns: 1fr; gap: 14px; padding-left: clamp(26px, 7vw, 40px); }
  .day__lead { display: flex; align-items: baseline; gap: 14px; }
  .day__n { font-size: clamp(40px, 14vw, 62px); }
  .day__label { margin-top: 0; }
}

/* ---------- MEET KAYLEIGH: founder moment ---------- */
.founder { background: var(--cream); padding: clamp(82px, 12vh, 150px) 0; overflow: clip; }
.founder__wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(36px, 5vw, 90px); align-items: center; }
.founder__media { position: relative; margin: 0; cursor: pointer; }
.founder__cimg { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; background: var(--cream-deep); }
.founder__cimg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; transition: transform 1.3s var(--ease); }
.founder__media:hover .founder__cimg img { transform: scale(1.045); }
.founder__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,253,0.92); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: transform 0.4s var(--ease); }
.founder__play svg { width: 24px; height: 24px; margin-left: 3px; }
.founder__media:hover .founder__play { transform: translate(-50%, -50%) scale(1.06); }
.founder__media:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
.founder__cap { position: absolute; left: clamp(16px, 2vw, 24px); bottom: clamp(16px, 2vw, 24px); display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,253,0.92); backdrop-filter: blur(4px); color: var(--ink); padding: 8px 14px; border-radius: 999px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; }
.founder__cap .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.founder__eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 22px; }
.founder__eyebrow .rule { width: 46px; height: 1px; background: var(--sage); }
.founder__title { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 18px; max-width: 16ch; }
.founder__title em { font-style: italic; color: var(--sage-ink); }
.founder__meta { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 22px; }
.founder__lead { font-family: var(--sans); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; color: var(--text-muted); margin: 0 0 22px; max-width: 46ch; }
.founder__sign { font-family: var(--script); font-size: clamp(34px, 3.4vw, 48px); line-height: 1; color: var(--ink); margin: 0 0 26px; }
@media (max-width: 860px) {
  .founder__wrap { grid-template-columns: 1fr; gap: 30px; }
  .founder__media { order: -1; max-width: 460px; }
}

/* ---------- THE METHOD: sticky-title editorial spread ---------- */
.method2 { background: var(--cream-deep); padding: clamp(80px, 12vh, 150px) 0; overflow: clip; }
.method2__wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.method2__aside { position: sticky; top: 110px; }
.method2__eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 22px; }
.method2__eyebrow .rule { width: 46px; height: 1px; background: var(--sage); }
.method2__title { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 20px; max-width: 16ch; }
.method2__title em { font-style: italic; color: var(--sage-ink); }
.method2__intro { font-family: var(--sans); font-size: 15.5px; line-height: 1.62; color: var(--text-muted); margin: 0; max-width: 30ch; }
.method2__list { margin: 0; }
.principle { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 46px); padding: clamp(32px, 4vw, 52px) 0; border-top: 1px solid var(--line); align-items: start; }
.principle:first-child { border-top: none; padding-top: 0; }
.principle:last-child { padding-bottom: 0; }
.principle__n { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 30px); line-height: 1; color: var(--sage); }
.principle__title { font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 2.5vw, 35px); line-height: 1.08; color: var(--ink); margin: 0 0 13px; }
.principle__desc { font-family: var(--sans); font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.64; color: var(--text-muted); margin: 0; max-width: 56ch; }
@media (max-width: 860px) {
  .method2__wrap { grid-template-columns: 1fr; gap: 30px; }
  .method2__aside { position: static; }
  .principle { grid-template-columns: 1fr; gap: 10px; }
  .principle__n { font-size: 22px; }
}

/* The Method — principles as elevated cards (Dan: give them depth, separate moving components).
   Soft warm shadow (intentional, tasteful deviation from the original "no shadow" brief). */
.method2__list { display: grid; gap: clamp(16px, 1.8vw, 26px); }
.principle {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(26px, 3vw, 42px);
  box-shadow: 0 22px 48px -30px rgba(55, 37, 26, 0.32);
  align-items: start;
  transition: transform 1s var(--ease), box-shadow 1s var(--ease), opacity 1s var(--ease);
}
.principle:first-child { border-top: 1px solid var(--line); padding-top: clamp(26px, 3vw, 42px); }
.principle:last-child { padding-bottom: clamp(26px, 3vw, 42px); }
/* deeper lift as each card settles in, so they read as moving layers */
.v2 .principle.reveal { transform: translateY(46px); }
.v2 .principle.reveal.is-in { transform: none; }
@media (max-width: 860px) { .principle { padding: clamp(24px, 6vw, 32px); } }

/* propagate the elevation: gallery images get a whisper of depth too */
.cimg { box-shadow: 0 20px 44px -32px rgba(55, 37, 26, 0.30); }

/* ---------- THE INVESTMENT: purchase module on warm ink ---------- */
.invest { background: var(--ink); padding: clamp(84px, 13vh, 160px) 0; overflow: clip; }
.invest__wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 90px); align-items: center; }
.invest__eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sage-soft); margin: 0 0 24px; }
.invest__eyebrow .rule { width: 46px; height: 1px; background: var(--sage-soft); opacity: 0.6; }
.invest__title { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.0; letter-spacing: -0.018em; color: var(--cream); margin: 0 0 22px; max-width: 14ch; }
.invest__title em { font-style: italic; color: var(--sage-soft); display: block; }
.invest__lead { font-family: var(--sans); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.66; color: rgba(239,234,228,0.80); margin: 0 0 18px; max-width: 44ch; }
.invest__reassure { font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: rgba(239,234,228,0.60); margin: 0 0 32px; max-width: 42ch; }
.invest__quote { margin: 0; padding-top: 26px; border-top: 1px solid rgba(239,234,228,0.16); max-width: 42ch; }
.invest__quote p { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1.6vw, 24px); line-height: 1.42; color: var(--cream); margin: 0 0 10px; }
.invest__quote cite { font-family: var(--sans); font-style: normal; font-size: 13.5px; letter-spacing: 0.04em; color: var(--sage-soft); }

.pricepanel { background: var(--cream); border-radius: 6px; padding: clamp(30px, 3.2vw, 48px); box-shadow: 0 46px 90px -44px rgba(0,0,0,0.55); }
.pricepanel__label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-ink); }
.pricepanel__price { font-family: var(--serif); font-weight: 500; font-size: clamp(54px, 6vw, 88px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin: 14px 0 4px; }
.pricepanel__price .vat { font-size: 0.34em; color: var(--text-muted); letter-spacing: 0; }
.pricepanel__terms { font-family: var(--sans); font-size: 14px; color: var(--text-muted); margin: 0 0 24px; }
.payopts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.payopt { border: 1px solid var(--line); border-radius: 4px; padding: 15px 16px; background: var(--white); }
.payopt__k { display: block; font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.payopt__v { display: block; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.pricepanel__incl { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.pricepanel__incl li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-family: var(--sans); font-size: 14.5px; color: var(--ink); }
.pricepanel__incl .tick { width: 15px; height: 15px; margin-top: 3px; stroke: var(--sage); fill: none; flex: none; }
.pricepanel__cta { width: 100%; justify-content: center; }
.pricepanel__proof { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; font-family: var(--sans); font-size: 14px; letter-spacing: 0.02em; color: var(--ink-soft); }
.pricepanel__proof .stars { color: var(--ink); letter-spacing: 2px; }
@media (max-width: 860px) { .invest__wrap { grid-template-columns: 1fr; gap: 36px; } .invest__title em { display: inline; } }

/* ---- investment: drop the heavy brown for a light, positive treatment ---- */
.invest { background: var(--cream); }
.invest__eyebrow { color: var(--sage-ink); }
.invest__eyebrow .rule { background: var(--sage); opacity: 1; }
.invest__title { color: var(--ink); }
.invest__title em { color: var(--sage-ink); }
.invest__lead { color: var(--text-muted); }
.invest__reassure { color: var(--ink-soft); }
.invest__quote { border-top-color: var(--line); }
.invest__quote p { color: var(--ink); }
.invest__quote cite { color: var(--sage-ink); }
.pricepanel { background: var(--white); box-shadow: 0 42px 84px -46px rgba(55, 37, 26, 0.34); }
.payopt { background: var(--cream-deep); }

/* ---- four days: add a photo per day so it's a rich itinerary, not empty text ---- */
.day { grid-template-columns: clamp(84px, 10vw, 140px) minmax(0, 1fr) clamp(210px, 24vw, 320px); gap: clamp(20px, 3vw, 48px); }
.day__media { align-self: center; }
.day__media .cimg { aspect-ratio: 4 / 5; border-radius: 3px; box-shadow: 0 26px 54px -34px rgba(0, 0, 0, 0.55); }
@media (max-width: 860px) {
  .day { grid-template-columns: 1fr; gap: 16px; padding-left: clamp(26px, 7vw, 40px); }
  .day__lead { display: flex; align-items: baseline; gap: 14px; }
  .day__n { font-size: clamp(40px, 14vw, 62px); }
  .day__label { margin-top: 0; }
  .day__media { max-width: 440px; margin-top: 8px; }
}

/* ===== tonal pass: introduce off-white for airy/crisp moments ===== */
.craft { background: var(--white); }   /* gallery pops on off-white */

/* shared video play button */
.vplay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,253,0.92); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: transform 0.4s var(--ease); }
.vplay svg { width: 24px; height: 24px; margin-left: 3px; }

/* ===== RESULTS: relatable proof + outcomes (off-white) ===== */
.results { background: var(--white); padding: clamp(82px, 12vh, 150px) 0; overflow: clip; }
.results__wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 84px); align-items: center; }
.results__media { position: relative; margin: 0; cursor: pointer; }
.results__cimg { position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 5; background: var(--cream-deep); box-shadow: 0 32px 64px -38px rgba(55,37,26,0.34); }
.results__cimg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; display: block; transition: transform 1.3s var(--ease); }
.results__media:hover .results__cimg img { transform: scale(1.045); }
.results__media:hover .vplay { transform: translate(-50%, -50%) scale(1.06); }
.results__media:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
.results__cap { position: absolute; left: clamp(16px, 2vw, 24px); bottom: clamp(16px, 2vw, 24px); display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,253,0.92); backdrop-filter: blur(4px); color: var(--ink); padding: 8px 14px; border-radius: 999px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; }
.results__cap .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.results__eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 22px; }
.results__eyebrow .rule { width: 46px; height: 1px; background: var(--sage); }
.results__title { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 18px; max-width: 15ch; }
.results__title em { font-style: italic; color: var(--sage-ink); }
.results__lead { font-family: var(--sans); font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.62; color: var(--text-muted); margin: 0 0 28px; max-width: 48ch; }
.results__stats { display: flex; gap: clamp(28px, 4vw, 56px); margin-bottom: 28px; }
.results__stats b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 4vw, 52px); line-height: 1; color: var(--ink); }
.results__stats span { display: block; font-family: var(--sans); font-size: 14.5px; color: var(--text-muted); margin-top: 8px; max-width: 15ch; }
.results__wins { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.results__wins li { position: relative; padding-left: 24px; font-family: var(--sans); font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.results__wins li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.results__line { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1.6vw, 24px); line-height: 1.4; color: var(--ink); margin: 0; }
@media (max-width: 860px) { .results__wrap { grid-template-columns: 1fr; gap: 30px; } .results__media { order: -1; max-width: 460px; } }

/* ===== CLOSING: final CTA (forest) ===== */
.closex { background: var(--forest); color: var(--on-dark); padding: clamp(90px, 15vh, 180px) 0; text-align: center; overflow: clip; }
.closex__wrap { max-width: 800px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.closex__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sage-soft); margin: 0 0 26px; }
.closex__eyebrow .rule { width: 40px; height: 1px; background: var(--sage-soft); opacity: 0.6; }
/* centered eyebrow: mirror the marker line on the right so it reads symmetric ── TEXT ── */
.closex__eyebrow::after { content: ""; width: 40px; height: 1px; background: var(--sage-soft); opacity: 0.6; }
.closex__title { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -0.015em; color: var(--cream); margin: 0 0 22px; }
.closex__title em { font-style: italic; color: var(--sage-soft); }
.closex__sub { font-family: var(--sans); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: var(--on-dark-muted); margin: 0 auto 38px; max-width: 46ch; }

/* ===== fix: closing must read distinct from the forest footer → cinematic image-backed CTA ===== */
.closex { background: linear-gradient(rgba(42,51,42,0.84), rgba(42,51,42,0.93)), url('assets/img/photos/img-9256.jpg'); background-size: cover; background-position: center; }

/* ===== EMOTIONAL HOOK (cream-deep): names her fear, condensed ===== */
.hook2 { background: var(--cream-deep); padding: clamp(84px, 14vh, 170px) 0; overflow: clip; }
.hook2__wrap { max-width: 940px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
.hook2__eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 26px; }
.hook2__eyebrow .rule { width: 46px; height: 1px; background: var(--sage); }
.hook2__title { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 5.2vw, 72px); line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 28px; max-width: 18ch; }
.hook2__title em { font-style: italic; color: var(--sage-ink); }
.hook2__body { font-family: var(--sans); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.66; color: var(--text-muted); margin: 0; max-width: 52ch; }
.hook2__body .em { color: var(--ink); font-style: italic; font-family: var(--serif); }

/* ===== TIGHT FAQ (cream-deep): top objections only ===== */
.faq2 { background: var(--cream-deep); padding: clamp(80px, 12vh, 150px) 0; overflow: clip; }
.faq2__wrap { max-width: 920px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
.faq2__head { margin-bottom: clamp(32px, 4vw, 52px); }
.faq2__eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--sans); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 20px; }
.faq2__eyebrow .rule { width: 46px; height: 1px; background: var(--sage); }
.faq2__title { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.04; letter-spacing: -0.015em; color: var(--ink); margin: 0; }
.faq2__item { border-top: 1px solid var(--line); }
.faq2__item:last-child { border-bottom: 1px solid var(--line); }
.faq2__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 2px; font-family: var(--sans); font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); color: var(--ink); }
.faq2__q::-webkit-details-marker { display: none; }
.faq2__icon { position: relative; width: 16px; height: 16px; flex: none; }
.faq2__icon::before, .faq2__icon::after { content: ""; position: absolute; background: var(--sage-ink); transition: transform 0.3s var(--ease); }
.faq2__icon::before { top: 7px; left: 0; width: 16px; height: 1.5px; }
.faq2__icon::after { left: 7px; top: 0; width: 1.5px; height: 16px; }
.faq2__item[open] .faq2__icon::after { transform: scaleY(0); }
.faq2__a { padding: 0 2px 26px; }
.faq2__a p { font-family: var(--sans); font-size: 15.5px; line-height: 1.65; color: var(--text-muted); margin: 0; max-width: 66ch; }

/* ============================================================
   ANIMATION PASS — £20k feel. Kajabi-safe: IO + CSS + passive rAF.
   ============================================================ */

/* 1. continuous ink-line thread — one fine line drawing down the whole page as you scroll */
.inkthread { position: fixed; left: clamp(8px, 1.6vw, 22px); top: 0; bottom: 0; width: 1px; z-index: 6; pointer-events: none; background: var(--line-strong); opacity: 0.28; }
.inkthread__fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--sage); will-change: height; }
.inkthread__fill::after { content: ""; position: absolute; bottom: -2.5px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 4px rgba(142,141,121,0.16); }
@media (prefers-reduced-motion: reduce) { .inkthread { display: none; } }

/* 2. premium reveal easing (easeOutExpo-ish) - snappier so above-the-fold titles land fast */
.v2 .reveal { transform: translateY(26px); transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); }
.v2 .reveal.is-in { transform: none; }

/* 3. parallax depth on the four-days photos (desktop only — instant, no transition) */
@media (min-width: 901px) {
  .day__media .cimg img { transform: translateY(var(--py, 0px)) scale(1.1); transition: none; will-change: transform; }
}

/* 4. hover micro-interactions */
.v2 .btn__arrow { transition: transform 0.32s var(--ease); }
.v2 .btn:hover .btn__arrow { transform: translateX(3px); }
.v2 .link-arrow .la__line { transition: width 0.35s var(--ease); }
.v2 .link-arrow:hover .la__line { width: 38px; }

/* ===== animation topping ===== */
/* eyebrow marker-lines draw in (the "drawing a line" motif, echoes the ink-thread) */
.v2 .reveal .rule { transform: scaleX(0); transform-origin: left center; transition: transform 0.9s cubic-bezier(0.22,1,0.36,1) 0.18s; }
.v2 .reveal.is-in .rule { transform: scaleX(1); }

/* big section headlines wipe open top-to-bottom (like ink drawn), not a plain fade */
.v2 .rh { clip-path: inset(0 0 110% 0); transition: clip-path 0.78s cubic-bezier(0.22,1,0.36,1); }
.v2 .rh.rh-in { clip-path: inset(-25% 0 -15% 0); }
@media (prefers-reduced-motion: reduce) { .v2 .rh { clip-path: none; transition: none; } }

/* ===== shared compact page header (hub / dates / contact / reviews intros) ===== */
.pagehead { background: var(--cream); padding: clamp(138px,18vh,200px) 0 clamp(48px,8vh,88px); text-align: center; overflow: clip; }
.pagehead__wrap { max-width: 840px; margin: 0 auto; padding: 0 clamp(20px,5vw,40px); }
.pagehead__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: clamp(11px,.85vw,13px); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 24px; }
.pagehead__eyebrow .rule { width: 40px; height: 1px; background: var(--sage); }
.pagehead__eyebrow::after { content: ""; width: 40px; height: 1px; background: var(--sage); }
/* Dan 2026-06-05: marker line removed from ALL eyebrows site-wide (text-only) */
[class*="__eyebrow"] .rule { display: none !important; }
.closex__eyebrow::after, .pagehead__eyebrow::after { content: none !important; }
/* readability: faux-bold the thin italic-serif emphasis lines (Emilea has no bold cut) */
.results__line, .hook2__pull { -webkit-text-stroke: 0.6px currentColor; paint-order: stroke fill; }
.pagehead__title { font-family: var(--serif); font-weight: 500; font-size: clamp(40px,6vw,84px); line-height: 0.99; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 22px; }
.pagehead__title em { font-style: italic; color: var(--sage-ink); }
.pagehead__sub { font-family: var(--sans); font-size: clamp(16px,1.3vw,19px); line-height: 1.62; color: var(--text-muted); margin: 0 auto; max-width: 48ch; }

/* fixes (2026-06-04): serif numbers/prices aren't h1-h3 so they missed the faux-bold stroke
   (thin + hard to read), and the stat numbers were wrapping char-by-char (looked broken). */
.pricepanel__price, .oteaser__price, .results__stats b, .rstat b {
  -webkit-text-stroke: 0.7px currentColor; paint-order: stroke fill;
}
.results__stats b, .rstat b { white-space: nowrap; }
.results__stats { flex-wrap: wrap; row-gap: 14px; }
.results__stats > div { min-width: 0; }

/* fix: long nowrap button labels forced .path-card wider than the screen on mobile (right-edge overflow) */
.path-card { min-width: 0; }
.path-card .btn { white-space: normal; text-align: center; }
.hpaths__grid, .paths__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .hpaths__grid, .paths__grid { grid-template-columns: minmax(0, 1fr); } }

/* the Emilea "%" glyph is a tall slashed fraction (looks like a bug at big sizes) — render % in sans */
.pct { font-family: var(--sans); font-weight: 600; font-size: 0.72em; letter-spacing: 0; -webkit-text-stroke: 0; }

/* ROOT CAUSE of the "stats look like a bug": the label-span rule (.results__stats span)
   also matched the .cup/.pct spans inside <b>, stacking the digits. Keep those inline. */
.results__stats b span, .rstat b span { display: inline; max-width: none; margin: 0; color: inherit; }
.results__stats b .cup, .rstat b .cup { font-size: inherit; font-family: var(--serif); }

/* "I can't draw, can I do it?" reassurance block (Kayleigh's #1 objection-buster) */
.cantdraw { background: var(--white); padding: clamp(80px,12vh,150px) 0; overflow: clip; }
.cantdraw__wrap { max-width: 780px; margin: 0 auto; padding: 0 clamp(20px,5vw,60px); text-align: center; }
.cantdraw__script { font-family: var(--script); font-size: clamp(28px,3.4vw,46px); line-height: 1; color: var(--sage-ink); margin: 0 0 6px; }
.cantdraw__title { font-family: var(--serif); font-weight: 500; font-size: clamp(28px,3.6vw,48px); line-height: 1.08; letter-spacing: -0.012em; color: var(--ink); margin: 0 auto 20px; max-width: 18ch; }
.cantdraw__title em { font-style: italic; color: var(--sage-ink); }
.cantdraw__p { font-family: var(--sans); font-size: clamp(16px,1.2vw,18px); line-height: 1.66; color: var(--text-muted); margin: 0 auto; max-width: 52ch; }
.cantdraw__p b { color: var(--ink); font-weight: 600; }

/* ===== BRAND MOTIF (pi monogram) — shared across v2 pages ===== */
.pimotif { position: absolute; z-index: 0; pointer-events: none; background: url(assets/img/pi-mark.png) center / contain no-repeat; opacity: .06; width: clamp(240px, 32vw, 480px); height: clamp(240px, 32vw, 480px); }
.pimotif--dark { background-image: url(assets/img/pi-mark-light.png); opacity: .10; }
.pimotif--tr { top: clamp(-70px, -5vw, -40px); right: clamp(-80px, -6vw, -44px); }
.pimotif--tl { top: clamp(-70px, -5vw, -40px); left: clamp(-80px, -6vw, -44px); }
.pimotif--br { bottom: clamp(-70px, -5vw, -40px); right: clamp(-80px, -6vw, -44px); }
.pimotif--bl { bottom: clamp(-70px, -5vw, -40px); left: clamp(-80px, -6vw, -44px); }

/* ===== HOME-PARITY POLISH (2026-06-05): text-only eyebrows + serif readability ===== */
/* eyebrow marker-lines off across all v2 pages (matches the home page; text-only eyebrows) */
[class*="__eyebrow"] .rule { display: none; }
/* readability: Emilea is single-weight, so faux-bold the large serif PULL/QUOTE paragraphs
   (headings already get the stroke in styles.css; these are <p> elements that miss it) */
.pq2__q { -webkit-text-stroke: 0.55px currentColor; paint-order: stroke fill; }

/* ===== contextual in-text cross-links (help users move between pages, not just via nav) ===== */
.tlink { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--sage); transition: text-decoration-color .3s var(--ease); }
.tlink:hover { text-decoration-color: var(--ink); }
.tlink--on-dark { color: var(--cream); text-decoration-color: var(--sage-soft); }
.tlink--on-dark:hover { text-decoration-color: var(--cream); }

/* ===== MOBILE PASS (2026-06-05): eyebrow->title->IMAGE->rest reorder + centred marketing sections (home parity) =====
   Each two-column section's copy is split into __head (eyebrow+title) + __copy (rest). Grid areas keep the
   desktop layout, and on mobile the image sits BETWEEN the title and the body (never above the eyebrow). */
/* media-LEFT sections (founder / results / kb) */
.founder__wrap, .results__wrap, .kb__wrap { grid-template-areas: "media head" "media copy"; row-gap: 0; align-items: start; }
.founder__media, .results__media, .kb__media { grid-area: media; align-self: center; }
.founder__head, .results__head, .kb__head { grid-area: head; align-self: end; }
.founder__copy, .results__copy, .kb__copy { grid-area: copy; align-self: start; }
/* media-RIGHT sections (cross / loc) */
.cross__wrap, .loc__wrap { grid-template-areas: "head media" "copy media"; row-gap: 0; align-items: start; }
.cross__media, .loc__media { grid-area: media; align-self: center; }
.cross__head, .loc__head { grid-area: head; align-self: end; }
.cross__copy, .loc__copy { grid-area: copy; align-self: start; }
@media (max-width: 860px) {
  .founder__wrap, .results__wrap, .kb__wrap, .cross__wrap, .loc__wrap { grid-template-columns: 1fr; grid-template-areas: "head" "media" "copy"; }
  .founder__media, .results__media, .kb__media, .cross__media, .loc__media { order: 0; align-self: auto; max-width: 460px; margin: clamp(18px,3.5vw,26px) auto clamp(24px,5vw,32px); }
  .founder__head, .results__head, .kb__head, .cross__head, .loc__head { margin-bottom: 0; }
}
@media (max-width: 760px) {
  /* heroes (all .phero pages: beginners / pmu / online / studio-success) */
  .phero__copy { text-align: center; }
  .phero__eyebrow, .phero__cta, .phero__proof { justify-content: center; }
  .phero__proof { flex-direction: column; gap: 8px; }
  .phero__sub { margin-left: auto; margin-right: auto; }
  /* two-column marketing sections: centre */
  .founder__head, .founder__copy, .results__head, .results__copy, .kb__head, .kb__copy, .cross__head, .cross__copy, .loc__head, .loc__copy { text-align: center; }
  .founder__eyebrow, .results__eyebrow, .cross__eyebrow, .loc__eyebrow, .method2__eyebrow, .invest__eyebrow { justify-content: center; }
  .founder__actions { justify-content: center; }
  .results__stats, .cross__skills { justify-content: center; }
  .founder__title, .founder__lead, .results__title, .results__lead, .results__wins, .cross__title, .cross__p, .loc__title, .loc__p, .kb__p, .method2__title, .method2__intro, .invest__title, .invest__lead, .invest__reassure { margin-left: auto; margin-right: auto; }
}

/* ===== accreditation trust line (CRO: crushes the "is it legit / can I get insured?" objection) ===== */
.accredit { display: inline-flex; align-items: flex-start; gap: 9px; font-family: var(--sans); font-size: 14px; line-height: 1.4; letter-spacing: .015em; color: var(--sage-ink); text-align: left; }
/* icon pins to the FIRST line (optically centred against its 19.6px line box),
   so it stays put when the text wraps instead of floating between the lines */
.accredit svg { margin-top: 2.3px; }
.accredit svg { width: 15px; height: 15px; flex: none; stroke: var(--sage); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.accredit b { color: var(--ink); font-weight: 600; }
.accredit--center { justify-content: center; text-align: left; }
.accredit--on-dark { color: var(--on-dark-muted); }
.accredit--on-dark svg { stroke: var(--sage-soft); }
.accredit--on-dark b { color: var(--cream); }

/* ===== Pre-course portal "Before you arrive" (added 2026-06-08, Kayleigh feedback) ===== */
.prep { background: var(--white); padding: clamp(72px, 11vh, 140px) 0; overflow: clip; }
.prep__wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
.prep__head { max-width: 660px; margin: 0 0 clamp(34px, 4.5vw, 52px); }
.prep__eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 22px; }
.prep__eyebrow .rule { width: 46px; height: 1px; background: var(--sage); }
.prep__title { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 18px; -webkit-text-stroke: 0.7px currentColor; paint-order: stroke fill; }
.prep__title em { font-style: italic; color: var(--sage-ink); }
.prep__lead { font-family: var(--sans); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 54ch; }
.prep__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.5vw, 20px); }
.prep__grid li { background: var(--cream); border: 1px solid var(--line); border-radius: 4px; padding: clamp(20px, 2vw, 26px); display: flex; flex-direction: column; gap: 7px; box-shadow: 0 18px 40px -34px rgba(55, 37, 26, 0.30); }
.prep__grid b { font-family: var(--serif); font-weight: 500; font-size: clamp(17px, 1.3vw, 20px); color: var(--ink); -webkit-text-stroke: 0.4px currentColor; paint-order: stroke fill; }
.prep__grid span { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 860px) { .prep__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .prep__grid { grid-template-columns: 1fr; } }

/* ===== Investment bonus value-stack (Sept 2026 bonuses) on the light invest section ===== */
.invest__bonus { margin-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--line); padding-top: clamp(20px, 2.4vw, 28px); }
.invest__bonus-head { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-ink); margin: 0 0 16px; }
.invest__bonus-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.invest__bonus-list li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 14px; row-gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.invest__bonus-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.invest__bonus-list b { grid-column: 1; font-family: var(--sans); font-weight: 600; font-size: clamp(15px, 1.1vw, 16.5px); letter-spacing: 0.01em; color: var(--ink); }
.invest__bonus-list em { grid-column: 2; justify-self: end; font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sage-ink); white-space: nowrap; }
.invest__bonus-list span { grid-column: 1 / -1; font-family: var(--sans); font-size: 14.5px; line-height: 1.45; color: var(--text-muted); }
.invest__bonus-foot { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.3vw, 20px); color: var(--ink); margin: 0; }