/* =========================================================
   THE RECODE METHOD™  —  carolinegamble.com
   Design system: editorial, luxurious, calm, authoritative.
   "More Vogue than coaching. More Apple than wellness."
   ========================================================= */

:root {
  /* surfaces */
  --bg:        #f3ede3;   /* warm ivory page */
  --paper:     #faf7f0;   /* card / lifted surface */
  --ink-bg:    #15110d;   /* near-black editorial section */
  --ink-bg-2:  #1d1814;   /* slightly lifted dark */

  /* text */
  --ink:       #1a1612;   /* primary text on light */
  --ink-soft:  #4c463d;   /* secondary text on light */
  --ink-muted: #8c8275;   /* tertiary / labels on light */
  --paper-ink: #f1e9dc;   /* primary text on dark */
  --paper-soft:#c7bcaa;   /* secondary text on dark */
  --paper-mut: #8f8473;   /* labels on dark */

  /* brand accent */
  --bronze:    #a07f50;   /* warm bronze / muted gold */
  --bronze-lt: #c2a173;
  --bronze-dp: #7f6238;

  --line:      #e2d7c5;   /* hairline on light */
  --line-dk:   #34291f;   /* hairline on dark */

  --max:   1280px;
  --gutter: clamp(22px, 5vw, 72px);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

::selection { background: var(--bronze); color: #fff; }

/* ---------- type primitives ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze-dp);
}
.dark .eyebrow { color: var(--bronze-lt); }

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.tm { font-size: 0.52em; vertical-align: top; position: relative; top: 0.15em; letter-spacing: 0; }

.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--ink-soft); }
.dark .lede { color: var(--paper-soft); }

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

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; margin-inline: auto; }
.measure { max-width: 620px; }

section { position: relative; }
.pad { padding-block: clamp(88px, 13vw, 168px); }
.pad-sm { padding-block: clamp(64px, 9vw, 112px); }

.dark { background: var(--ink-bg); color: var(--paper-ink); }
.dark h1, .dark h2, .dark h3 { color: var(--paper-ink); }
.paper { background: var(--paper); }

.center { text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 17px 34px;
  border: 1px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  white-space: nowrap;
}
.btn-gold { background: var(--bronze); color: #fff; }
.btn-gold:hover { background: var(--bronze-dp); }

.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: var(--bronze-dp); }

.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(26,22,18,.35); }
.btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }

.dark .btn-ghost { color: var(--paper-ink); border-color: rgba(241,233,220,.32); }
.dark .btn-ghost:hover { background: var(--paper-ink); color: var(--ink); border-color: var(--paper-ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bronze-dp);
  padding-bottom: 3px; border-bottom: 1px solid currentColor;
  transition: gap .3s var(--ease);
}
.dark .link-arrow { color: var(--bronze-lt); }
.link-arrow:hover { gap: 18px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.center .btn-row { justify-content: center; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  background: rgba(18,14,11,.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-dk);
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.nav-brand {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--paper-ink);
}
.nav-links {
  display: flex; gap: clamp(14px, 1.8vw, 30px); align-items: center;
  list-style: none;
}
.nav-links a {
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-soft);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--paper-ink); border-color: var(--bronze); }
/* CTA button: needs its own padding/border at higher specificity than the
   generic `.nav-links a` link rules, or padding-bottom:2px squishes it. */
.nav-cta { font-size: 11px; letter-spacing: 0.18em; color: #fff; }
.nav-links a.nav-cta { padding: 12px 24px; border: 1px solid transparent; }
.nav-links a.nav-cta:hover { color: #fff; background: var(--bronze-dp); border-color: transparent; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--paper-ink); margin: 5px 0; transition: .3s var(--ease); }

@media (max-width: 1080px) {
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 360px);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 26px; padding: 48px;
    background: var(--ink-bg); border-left: 1px solid var(--line-dk);
    transform: translateX(100%); transition: transform .5s var(--ease);
  }
  .nav-links a { font-size: 14px; }
  .nav-links.open { transform: translateX(0); }
  .nav-toggle { display: block; z-index: 101; }
  body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* =========================================================
   HERO  (split, horizontal — the layout Caroline liked)
   ========================================================= */
.hero { background: var(--bg); border-bottom: 1px solid var(--line); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  min-height: min(86vh, 880px);
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 7vw, 104px) var(--gutter);
  max-width: 760px; margin-left: auto;
}
.hero-copy .eyebrow { margin-bottom: 28px; }
.hero h1 {
  font-size: clamp(46px, 6.6vw, 104px);
  line-height: 0.98;
  margin-bottom: 30px;
}
.hero h1 em { font-style: italic; color: var(--bronze-dp); }
.hero-copy p { max-width: 480px; margin-bottom: 22px; }
.hero-copy .btn-row { margin-top: 18px; }
.hero-photo {
  background: var(--ink-bg) center/cover no-repeat;
  min-height: clamp(440px, 60vh, 860px);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; min-height: 56vh; }
  .hero-copy { margin: 0; padding-block: 56px; }
}

/* =========================================================
   MERGED PHOTO TREATMENT — photos that dissolve into the block
   (feathered edges via mask-image, editorial-magazine style)
   ========================================================= */
/* hero: two columns — copy on clean ivory, photo feathering into the seam */
.hero-m {
  display: grid; grid-template-columns: 1.12fr 0.88fr; align-items: center;
  min-height: clamp(620px, 88vh, 900px);
  background: var(--bg); overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-m .copy {
  max-width: 720px; margin-left: auto;
  padding: clamp(40px,6vw,88px) clamp(24px,3vw,56px) clamp(40px,6vw,88px) var(--gutter);
}
.hero-m .ph {
  align-self: stretch; min-height: 100%;
  background: center/cover no-repeat;
  /* left edge dissolves into the ivory at the column seam */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 100%);
}
@media (max-width: 920px) {
  .hero-m { grid-template-columns: 1fr; }
  .hero-m .ph {
    order: -1; min-height: 52vh;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 34%);
    mask-image: linear-gradient(to top, transparent 0%, #000 34%);
  }
  .hero-m .copy { max-width: none; margin: 0; padding-block: 36px 8px; }
}
@media (max-width: 920px) {
  .hero-m { flex-direction: column; min-height: auto; }
  .hero-m .ph {
    position: relative; width: 100%; height: 52vh; order: -1;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 38%);
    mask-image: linear-gradient(to top, transparent 0%, #000 38%);
  }
  .hero-m .ph::after { display: none; }
  .hero-m .copy { padding-block: 40px 8px; }
}

/* band: a face that dissolves into a dark (or light) block, text overlapping */
.band-merge { position: relative; overflow: hidden; }
.band-merge .ph {
  position: absolute; top: 0; bottom: 0; width: min(58%, 820px);
  background: center/cover no-repeat;
}
.band-merge.left .ph { left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 92%);
  mask-image: linear-gradient(90deg, #000 30%, transparent 92%); }
.band-merge.right .ph { right: 0;
  -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent 92%);
  mask-image: linear-gradient(270deg, #000 30%, transparent 92%); }
/* light bands: gentler fade (catches only the outer edge) + anchor Caroline
   toward the colour/opaque side so the gradient doesn't wash over her.
   Desktop only — mobile keeps the stacked top-fade below. */
@media (min-width: 921px) {
  .band-merge:not(.dark).left .ph {
    background-position: left center;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 74%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 74%, transparent 100%); }
  .band-merge:not(.dark).right .ph {
    background-position: right center;
    -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 74%, transparent 100%);
    mask-image: linear-gradient(270deg, #000 0%, #000 74%, transparent 100%); }
  /* dark left band (Possibility): keep Caroline whole — anchor her toward the
     opaque side, with the fade finishing right where the text column begins
     (~50% viewport) instead of bleeding dull black across the gap */
  .dark.band-merge.left .ph {
    background-position: 28% center;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 56%, transparent 86%);
    mask-image: linear-gradient(90deg, #000 0%, #000 56%, transparent 86%); }
}
.dark.band-merge .ph::after { content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(21,17,13,.55), transparent 34%); }
.band-merge .copy { position: relative; z-index: 2; max-width: 560px; }
.band-merge.left .copy { margin-left: auto; }
@media (max-width: 920px) {
  .band-merge .ph { position: relative; width: 100%; height: 46vh; }
  .band-merge.left .ph, .band-merge.right .ph {
    -webkit-mask-image: linear-gradient(to top, transparent 2%, #000 42%);
    mask-image: linear-gradient(to top, transparent 2%, #000 42%); }
  .band-merge .copy { max-width: none; }
}

/* =========================================================
   GENERIC SECTION HEADER
   ========================================================= */
.kicker { margin-bottom: 22px; }
.section-title {
  font-size: clamp(32px, 4.6vw, 60px);
  margin-bottom: 28px;
}
.section-title.sm { font-size: clamp(28px, 3.6vw, 46px); }

/* staccato editorial list (The habit. The behavior. …) */
.staccato {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.5;
  color: var(--ink-soft);
}
.dark .staccato { color: var(--paper-soft); }
.staccato span { display: block; }

/* "Your thoughts / feelings / habits / choices / relationships" — the light
   moves down the list one line at a time and starts over, so the section
   reads as a loop that is still running. 1.7s per line, 8.5s round trip. */
.code-cycle { margin: 48px 0; font-size: clamp(22px, 3.2vw, 40px); line-height: 1.55; }
.code-cycle span {
  color: var(--paper-mut);
  opacity: .4;
  animation: codeCycle 8.5s cubic-bezier(.4, 0, .2, 1) infinite;
}
.code-cycle span:nth-child(1) { animation-delay: 0s; }
.code-cycle span:nth-child(2) { animation-delay: 1.7s; }
.code-cycle span:nth-child(3) { animation-delay: 3.4s; }
.code-cycle span:nth-child(4) { animation-delay: 5.1s; }
.code-cycle span:nth-child(5) { animation-delay: 6.8s; }

@keyframes codeCycle {
  0%, 100% { opacity: .4; color: var(--paper-mut); transform: scale(1); }
  4%       { opacity: 1;  color: var(--paper-ink); transform: scale(1.07); }
  16%      { opacity: 1;  color: var(--paper-ink); transform: scale(1.07); }
  20%      { opacity: .4; color: var(--paper-mut); transform: scale(1); }
}

/* Motion is decorative here — the full list is always legible without it. */
@media (prefers-reduced-motion: reduce) {
  .code-cycle span { animation: none; opacity: 1; color: var(--paper-soft); }
}

.prose p { margin-bottom: 1.25em; }
.prose p:last-child { margin-bottom: 0; }
.prose .big {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.25;
  color: var(--ink);
}
.dark .prose .big { color: var(--paper-ink); }

/* pull quote */
.pullquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.3; color: var(--ink);
  max-width: 860px;
}
.dark .pullquote { color: var(--paper-ink); }
.pullquote cite { display: block; font-style: normal; font-family: var(--sans); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); margin-top: 24px; }

/* =========================================================
   PROCESS — horizontal line-icon row (mockup3 style)
   ========================================================= */
.process {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  margin-top: 64px;
}
.process.four { grid-template-columns: repeat(4, 1fr); }
.proc {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 22px; position: relative;
}
.proc .ic {
  width: 56px; height: 56px; margin-bottom: 22px;
  color: var(--bronze); display: grid; place-items: center;
}
.proc .ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.proc h4 {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 10px;
}
.dark .proc h4 { color: var(--paper-ink); }
.proc p { font-size: 14px; line-height: 1.55; color: var(--ink-muted); max-width: 22ch; }
.dark .proc p { color: var(--paper-mut); }
/* arrow between steps */
.proc + .proc::before {
  content: ""; position: absolute; left: -6px; top: 28px;
  width: 12px; height: 12px;
  border-top: 1px solid var(--bronze); border-right: 1px solid var(--bronze);
  transform: translateX(-50%) rotate(45deg); opacity: .8;
}
@media (max-width: 900px) {
  .process, .process.four { grid-template-columns: 1fr 1fr; gap: 40px 0; }
  .proc + .proc::before { display: none; }
}
@media (max-width: 520px) {
  .process, .process.four { grid-template-columns: 1fr; }
}

/* =========================================================
   OFFER — two-up side-by-side cards (mockup3 style)
   ========================================================= */
.offer-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-dk); margin-top: 8px; }
.offer-card {
  position: relative; min-height: 560px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(40px, 4vw, 64px);
  background: var(--ink-bg);
}
.offer-card .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.offer-card .bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(18,14,11,.35) 0%, rgba(18,14,11,.88) 78%); }
.offer-card .oc-inner { position: relative; z-index: 2; }
.offer-card .eyebrow { color: var(--bronze-lt); margin-bottom: 16px; }
.offer-card h3 { font-size: clamp(28px, 3vw, 40px); color: var(--paper-ink); margin-bottom: 16px; line-height: 1.08; }
.offer-card p { color: var(--paper-soft); font-size: 15.5px; margin-bottom: 26px; max-width: 42ch; }
@media (max-width: 760px) { .offer-2up { grid-template-columns: 1fr; } .offer-card { min-height: 460px; } }

/* =========================================================
   THE RECODE LOOP — horizontal stepper
   ========================================================= */
.loop {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-top: 56px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.dark .loop { border-color: var(--line-dk); }
.loop-step {
  padding: 40px 28px; text-align: center; position: relative;
}
.loop-step + .loop-step { border-left: 1px solid var(--line); }
.dark .loop-step + .loop-step { border-left-color: var(--line-dk); }
.loop-step .n {
  font-family: var(--serif); font-style: italic; font-size: 20px;
  color: var(--bronze); margin-bottom: 14px;
}
.loop-step h3 {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 12px;
}
.dark .loop-step h3 { color: var(--paper-ink); }
.loop-step p { font-size: 14.5px; color: var(--ink-muted); line-height: 1.55; }
@media (max-width: 760px) {
  .loop { grid-template-columns: 1fr 1fr; }
  .loop-step:nth-child(3) { border-left: none; }
  .loop-step { border-top: 1px solid var(--line); }
}

/* =========================================================
   THE RECODE LOOP — framed IP plate
   A self-contained "tool" presentation: bronze frame, legend
   label, numbered nodes, arrows between the WORDS, and a
   return curve making the loop (life → code) explicit.
   Works on light (.paper section) and dark sections.
   ========================================================= */
.loop-plate {
  position: relative; margin-top: 72px;
  padding: clamp(44px, 5.5vw, 76px) clamp(16px, 2.5vw, 44px) clamp(30px, 3.5vw, 48px);
  border: 1px solid rgba(160, 127, 80, .55); border-radius: 2px;
}
.dark .loop-plate { border-color: rgba(194, 161, 115, .42); }
.lp-label {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--paper); padding: 4px 24px; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  color: var(--bronze-dp);
}
.dark .lp-label { background: var(--ink-bg); color: var(--bronze-lt); }
.lp-chain { display: grid; grid-template-columns: repeat(4, 1fr); }
.lp-node {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 22px;
}
/* fixed vertical rhythm so the between-words arrow can sit at the word row */
.lp-node .n { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1; height: 17px; color: var(--bronze); margin-bottom: 16px; }
.lp-node .ic { width: 56px; height: 56px; margin-bottom: 20px; color: var(--bronze); display: grid; place-items: center; transition: transform .55s var(--ease), color .45s var(--ease); }
.lp-node .ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.lp-node:hover .ic { transform: translateY(-4px); color: var(--bronze-dp); }
.dark .lp-node:hover .ic { color: var(--bronze-lt); }
.lp-node h4 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.dark .lp-node h4 { color: var(--paper-ink); }
.lp-node p { font-size: 14px; line-height: 1.55; color: var(--ink-muted); max-width: 24ch; }
.dark .lp-node p { color: var(--paper-mut); }
/* arrow between the WORDS (icon top = 33px, word row top = 109px) */
.lp-node + .lp-node::before {
  content: ""; position: absolute; left: 0; top: 112px;
  width: 10px; height: 10px;
  border-top: 1px solid var(--bronze); border-right: 1px solid var(--bronze);
  transform: translateX(-50%) rotate(45deg); opacity: .85;
}
/* the return curve: life sweeps back beneath the chain into code */
.lp-return { position: relative; margin-top: 36px; height: 56px; }
.lp-return svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-return svg path { stroke: var(--bronze); fill: none; opacity: .85; }
.lp-return .head {
  position: absolute; left: 12.5%; top: 1px; width: 9px; height: 9px;
  border-top: 1px solid var(--bronze); border-left: 1px solid var(--bronze);
  transform: translateX(-50%) rotate(45deg); opacity: .85;
}
.lp-loopline {
  margin-top: 20px; text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.9vw, 22px); color: var(--ink-soft);
}
.dark .lp-loopline { color: var(--paper-soft); }
@media (max-width: 900px) {
  .lp-chain { grid-template-columns: 1fr 1fr; gap: 40px 0; }
  .lp-node + .lp-node::before { display: none; }
  .lp-return { display: none; }
  .lp-loopline { margin-top: 36px; }
}
@media (max-width: 520px) { .lp-chain { grid-template-columns: 1fr; } }

/* =========================================================
   THE RECODE LOOP — orbit emblem
   The loop as a mark: thin bronze ring, four stages set
   around it, one light orbiting forever. As the light passes
   a stage (or on hover/tap) the word brightens and its
   description fades into the center. Light + dark contexts.
   ========================================================= */
.orbit { position: relative; width: min(560px, 80vw); aspect-ratio: 1; margin: 72px auto 0; }
.orbit .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit .ring circle { fill: none; stroke: var(--bronze); stroke-width: 1; opacity: .55; }
.orbit-spin { position: absolute; inset: 0; will-change: transform; }
.orbit-dot {
  position: absolute; left: 50%; top: 8%;
  width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--bronze-lt);
  box-shadow: 0 0 14px 4px rgba(194,161,115,.45);
}
.o-word {
  position: absolute; z-index: 2;
  background: var(--bg); padding: 4px 18px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink);
  text-align: center; cursor: default;
  transition: color .45s var(--ease);
}
.paper .o-word { background: var(--paper); }
.dark .o-word { background: var(--ink-bg); color: var(--paper-ink); }
.o-word i {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--bronze); margin-bottom: 4px;
}
.o-word.active { color: var(--bronze-dp); }
.dark .o-word.active { color: var(--bronze-lt); }
.o-word.top    { left: 50%; top: 8%;  transform: translate(-50%, -50%); }
.o-word.right  { left: 92%; top: 50%; transform: translate(-50%, -50%); }
.o-word.bottom { left: 50%; top: 92%; transform: translate(-50%, -50%); }
.o-word.left   { left: 8%;  top: 50%; transform: translate(-50%, -50%); }
.o-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.o-live { transition: opacity .3s var(--ease); }
.o-stage {
  font-family: var(--serif); font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.05; color: var(--ink);
}
.dark .o-stage { color: var(--paper-ink); }
.o-stage-n {
  display: block; font-style: italic; font-size: 17px;
  color: var(--bronze); margin-bottom: 10px;
}
.dark .o-stage-n { color: var(--bronze-lt); }
.o-desc {
  max-width: 58%; margin: 14px auto 0;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-muted);
}
.dark .o-desc { color: var(--paper-mut); }
@media (max-width: 600px) {
  .o-word { padding: 3px 10px; font-size: 11px; letter-spacing: .2em; }
  .o-word i { font-size: 13px; }
  .o-stage { font-size: 24px; }
  .o-desc { max-width: 66%; font-size: 12.5px; }
}

/* =========================================================
   DISCOVER THE PATTERN — inline lead capture
   Compact complete-the-sentence widget at the foot of the
   "Why Change Often Does Not Last" section.
   ========================================================= */
.pattern-inline {
  max-width: 760px; margin: 72px auto 0;
  padding-top: 48px; border-top: 1px solid var(--line);
}
.pattern-inline .pt-lead {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: var(--bronze-dp); margin-bottom: 14px;
}
.pattern-inline .pt-sentence {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.3vw, 27px); line-height: 1.4;
  color: var(--ink); margin-bottom: 20px;
}
.pattern-inline .pi-row { display: flex; gap: 14px; }
.pattern-inline input {
  flex: 1; min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  padding: 15px 18px;
  font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink);
  transition: border-color .3s var(--ease), background .3s;
}
.pattern-inline input::placeholder { color: var(--ink-muted); }
.pattern-inline input:focus { outline: none; border-color: var(--bronze); background: #fff; }
.pattern-inline .pt-note { font-size: 13px; color: var(--ink-muted); margin-top: 14px; }
@media (max-width: 640px) {
  .pattern-inline .pi-row { flex-direction: column; }
  .pattern-inline .btn { justify-content: center; }
}

/* pattern-reveal modal (reuses the rm-overlay shell) */
.pt-overlay .rm-img { background-image: url('assets/img/caroline-wood.jpg'); }
.pt-echo {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 2vw, 22px); line-height: 1.5;
  color: var(--bronze-lt);
  border-left: 1px solid rgba(194, 161, 115, .45);
  padding-left: 18px; margin: 18px 0 4px;
}

/* =========================================================
   FOUR LIMITING BELIEFS — premium cards
   ========================================================= */
.beliefs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); margin-top: 56px; }
.dark .beliefs { background: var(--line-dk); }
.belief {
  background: var(--bg); padding: clamp(40px, 5vw, 72px);
  min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end;
  transition: background .5s var(--ease);
}
.dark .belief { background: var(--ink-bg); }
.belief:hover { background: var(--paper); }
.dark .belief:hover { background: var(--ink-bg-2); }
.belief .bn { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--bronze); margin-bottom: auto; }
.belief h3 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; margin-bottom: 16px; }
.belief p { font-size: 15px; color: var(--ink-muted); max-width: 30ch; }
.dark .belief p { color: var(--paper-mut); }
@media (max-width: 700px){ .beliefs { grid-template-columns: 1fr; } }

/* =========================================================
   SPLIT (image + copy) — horizontal layout
   ========================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 640px; }
.split.flip .split-img { order: 2; }
.split-img { background: var(--ink-bg) center/cover no-repeat; min-height: 440px; }
.split-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 8vw, 120px) var(--gutter); }
.split-copy .inner { max-width: 540px; }
.split.flip .split-copy { margin-left: auto; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.flip .split-img { order: -1; }
  .split-img { min-height: 56vh; }
}

/* media / video block */
.media {
  position: relative; aspect-ratio: 16/9; background: var(--ink-bg) center/cover no-repeat;
  border-radius: 2px; overflow: hidden; display: grid; place-items: center;
  margin-top: 48px;
}
.media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(21,17,13,.30) 0%, rgba(21,17,13,.50) 52%, rgba(21,17,13,.74) 100%); }
.media .play { position: relative; z-index: 2; display: grid; place-items: center; gap: 18px; text-align: center; color: var(--paper-ink); }
.media .play .ring {
  width: 78px; height: 78px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6);
  display: grid; place-items: center; transition: background .4s var(--ease), border-color .4s;
}
.media .play .ring::before { content:""; width:0; height:0; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; }
.media:hover .play .ring { background: rgba(255,255,255,.14); border-color:#fff; }
.media .play .cap { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 30px); max-width: 24ch; color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.6); }
.media .play .sub { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.85); text-shadow: 0 1px 14px rgba(0,0,0,.55); }

/* audio strip */
.audio-line { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.dark .audio-line { border-color: var(--line-dk); }
.audio-line .wave { display:flex; align-items:center; gap:4px; }
.audio-line .wave i { width:3px; background: var(--bronze); border-radius:2px; display:block; animation: wv 1.4s var(--ease) infinite; }
.audio-line .wave i:nth-child(1){height:10px;animation-delay:0s} .audio-line .wave i:nth-child(2){height:22px;animation-delay:.15s}
.audio-line .wave i:nth-child(3){height:14px;animation-delay:.3s} .audio-line .wave i:nth-child(4){height:26px;animation-delay:.45s}
.audio-line .wave i:nth-child(5){height:12px;animation-delay:.6s}
@keyframes wv { 0%,100%{transform:scaleY(.5)} 50%{transform:scaleY(1)} }
.audio-line .meta b { font-family: var(--serif); font-weight: 400; font-size: 22px; display:block; }
.audio-line .meta span { font-size: 12px; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-muted); }

/* =========================================================
   OFFER BANDS
   ========================================================= */
.band-img { background-position: center; background-size: cover; background-repeat: no-repeat; }
.offer .eyebrow { margin-bottom: 20px; }
.offer h2 { font-size: clamp(34px, 4.6vw, 60px); margin-bottom: 24px; }
.offer ul { list-style: none; margin: 32px 0; display: grid; gap: 14px; }
.offer ul li { position: relative; padding-left: 26px; color: var(--ink-soft); }
.dark .offer ul li { color: var(--paper-soft); }
.offer ul li::before { content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border:1px solid var(--bronze); transform: rotate(45deg); }

/* =========================================================
   AUDIO STORE grid
   ========================================================= */
.store-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--line); margin-top:56px; }
.store-card { background:var(--bg); padding: clamp(28px,3vw,40px); display:flex; flex-direction:column; gap:14px; transition: background .4s var(--ease); }
.store-card:hover { background: var(--paper); }
.store-card .nm { font-family:var(--serif); font-size: 26px; line-height:1.1; }
.store-card .ds { font-size:14.5px; color:var(--ink-muted); line-height:1.55; flex:1; }
.store-card .intent { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze-dp); }
.store-card .row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:18px; border-top:1px solid var(--line); }
.store-card .price { font-family:var(--serif); font-size:24px; }
.store-card .dur { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); }
.store-card .si { width:42px; height:42px; color:var(--bronze); margin-bottom:2px; transition: transform .5s var(--ease), color .4s var(--ease); }
.store-card .si svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.store-card:hover .si { transform: translateY(-3px); color: var(--bronze-dp); }
.store-card.store-feature { grid-column: span 2; background: var(--ink-bg); color: var(--paper-soft); justify-content: center; }
.store-card.store-feature .nm { color: var(--paper-ink); }
.store-card.store-feature .eyebrow { color: var(--bronze-lt); }
.store-card.store-feature:hover { background: var(--ink-bg-2); }
@media (max-width: 920px){ .store-grid { grid-template-columns: 1fr 1fr; } .store-card.store-feature { grid-column: span 2; } }
@media (max-width: 600px){ .store-grid { grid-template-columns: 1fr; } .store-card.store-feature { grid-column: span 1; } }

/* collections */
.collections { display:grid; grid-template-columns: repeat(2,1fr); gap:24px; margin-top:48px; }
.collection { border:1px solid var(--line); background:var(--paper); padding: clamp(32px,4vw,52px); border-radius:2px; }
.collection h3 { font-size: clamp(26px,3vw,38px); margin-bottom:14px; }
.collection .inc { font-size:14px; color:var(--ink-muted); margin:20px 0; line-height:1.8; }
.collection .foot { display:flex; align-items:center; justify-content:space-between; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
@media (max-width: 760px){ .collections { grid-template-columns:1fr; } }

/* =========================================================
   FORMS (apply / contact)
   ========================================================= */
.form { display:grid; gap:26px; margin-top:48px; }
.field { display:grid; gap:10px; }
.field label { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted); }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size:16px; color:var(--ink);
  background: var(--paper); border:1px solid var(--line); border-radius:2px;
  padding:15px 18px; width:100%;
  transition: border-color .3s var(--ease), background .3s;
}
.field textarea { min-height:140px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--bronze); background:#fff; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width:600px){ .field-row { grid-template-columns:1fr; } }
.choice-group { display:grid; gap:12px; }
.choice {
  display:flex; align-items:center; gap:14px; padding:18px 22px;
  border:1px solid var(--line); background:var(--paper); border-radius:2px; cursor:pointer;
  transition: border-color .3s var(--ease), background .3s;
}
.choice:hover { border-color: var(--bronze-lt); }
.choice input { accent-color: var(--bronze); width:18px; height:18px; }
.choice span { font-size:16px; }
.form-note { font-size:13px; color:var(--ink-muted); }
.form-status { font-size:15px; padding:16px 20px; border-radius:2px; display:none; }
.form-status.ok { display:block; background:#eef1e8; color:#4a5740; border:1px solid #cfd8bf; }
.form-status.err { display:block; background:#f6ece6; color:#8a4a30; border:1px solid #e6cdbf; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--ink-bg); color: var(--paper-soft); padding-block: clamp(72px,10vw,120px); }
.footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:48px; }
.footer .mark img { width: 220px; filter: invert(1) brightness(1.6); opacity:.92; }
.footer .tagline { margin-top: 22px; max-width: 34ch; color: var(--paper-mut); font-size:15px; }
.footer .social { margin-top: 20px; display:flex; gap:22px; }
.footer .social a { font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color: var(--paper-mut); transition: color .3s var(--ease); }
.footer .social a:hover { color: var(--bronze-lt); }
.footer h4 { font-family: var(--sans); font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--paper-mut); margin-bottom:20px; }
.footer ul { list-style:none; display:grid; gap:12px; }
.footer ul a { font-size:14px; color:var(--paper-soft); transition: color .3s var(--ease); }
.footer ul a:hover { color: var(--paper-ink); }
.footer-bottom { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  margin-top: clamp(48px,7vw,88px); padding-top:32px; border-top:1px solid var(--line-dk);
  font-size:12.5px; letter-spacing:.04em; color:var(--paper-mut); }
.footer-bottom .tm-line em { font-style:normal; color:var(--paper-soft); }
@media (max-width: 760px){ .footer-top { grid-template-columns:1fr 1fr; } .footer .mark { grid-column:1/-1; } }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
/* Progressive enhancement: visible by default. JS adds .pending only to
   below-the-fold elements (so above-the-fold content never loads blank),
   then swaps to .in when they scroll into view. */
.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.pending { opacity:0; transform: translateY(26px); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s } .reveal.d2 { transition-delay:.16s } .reveal.d3 { transition-delay:.24s } .reveal.d4 { transition-delay:.32s }
@media (prefers-reduced-motion: reduce) {
  .reveal.pending { opacity:1 !important; transform:none !important; }
  html { scroll-behavior:auto; }
  .audio-line .wave i { animation:none; }
}

/* page hero (interior pages) */
.page-hero { padding-block: clamp(88px, 11vw, 150px) clamp(48px,6vw,80px); border-bottom:1px solid var(--line); }
.page-hero.dark { border-color: var(--line-dk); }
.page-hero h1 { font-size: clamp(34px,3.9vw,58px); line-height:1.08; margin-bottom:24px; }
.page-hero p { max-width: 600px; }
.page-hero.center p { margin-inline:auto; }

/* =========================================================
   TESTIMONIALS — sleek minimal scroller (no cards, hairline dividers)
   ========================================================= */
.testi { padding-block: clamp(80px, 10vw, 132px); overflow: hidden; }
.testi-head { text-align: center; margin-bottom: clamp(48px, 6vw, 76px); }
.testi-track {
  display: flex; overflow-x: auto;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 0 var(--gutter) 24px;
  cursor: grab; -webkit-overflow-scrolling: touch;
}
.testi-track.drag { cursor: grabbing; scroll-behavior: auto; }
.testi-track { scrollbar-width: none; -ms-overflow-style: none; }
.testi-track::-webkit-scrollbar { display: none; }
.testi-viewport { position: relative; }
.testi-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(243, 237, 227, .82);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border: 1px solid var(--line); color: var(--ink);
  cursor: pointer;
  transition: opacity .4s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.testi-arrow:hover { background: var(--ink-bg); border-color: var(--ink-bg); color: var(--paper-ink); }
.testi-arrow svg { width: 18px; height: 18px; }
.testi-prev { left: clamp(6px, 2.5vw, 36px); }
.testi-next { right: clamp(6px, 2.5vw, 36px); }
.testi-arrow.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
.testi-card {
  flex: 0 0 min(380px, 84vw); scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4px clamp(32px, 4vw, 58px); user-select: none;
  border-left: 1px solid var(--line);
}
.testi-card:first-child { border-left: none; }
.testi-card .q { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.5; color: var(--ink); }
.testi-card .by { margin-top: 26px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze-dp); }

/* =========================================================
   PATHWAYS — compact so header + both cards sit above the fold
   ========================================================= */
#pathways { padding-top: clamp(28px, 3vw, 48px) !important; padding-bottom: 16px !important; scroll-margin-top: 72px; }
#pathways .section-title { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 8px; }
#pathways .eyebrow.kicker { margin-bottom: 14px; }
.offer-card { min-height: clamp(340px, 42vh, 430px); padding: clamp(30px, 3vw, 52px); }

/* =========================================================
   REMEMBER MODAL — full-screen free-session overlay
   Injected by site.js; every link to remember.html opens it.
   ========================================================= */
.rm-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(0px, 3vw, 40px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.rm-overlay.open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.rm-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 8, 6, .72);
  -webkit-backdrop-filter: blur(7px) saturate(.92);
  backdrop-filter: blur(7px) saturate(.92);
}
.rm-panel {
  position: relative; z-index: 1;
  width: min(1040px, 100%); max-height: 100%;
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  background: var(--ink-bg); color: var(--paper-soft);
  border: 1px solid var(--line-dk);
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  transform: translateY(18px) scale(.985);
  transition: transform .55s var(--ease);
}
.rm-overlay.open .rm-panel { transform: none; }
.rm-img {
  position: relative;
  background: url('assets/img/caroline-editorial.jpg') center/cover no-repeat;
  min-height: 100%;
}
.rm-img::after { content:""; position:absolute; inset:0; background: linear-gradient(115deg, rgba(18,14,11,.10), rgba(18,14,11,.62)); }
.rm-copy { padding: clamp(34px, 3.6vw, 60px); display: flex; flex-direction: column; justify-content: center; max-height: min(92vh, 760px); }
.rm-ey { color: var(--bronze-lt); margin-bottom: 16px; }
.rm-h { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 4vw, 58px); line-height: .98; color: var(--paper-ink); margin-bottom: 12px; }
.rm-h em { font-style: italic; color: var(--bronze-lt); }
.rm-sub { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.2vw, 26px); color: var(--paper-soft); margin-bottom: 18px; }
.rm-body { max-width: 460px; color: var(--paper-soft); }
.rm-form { margin-top: 26px; max-width: 480px; }
.rm-form .row { display:flex; gap:12px; flex-wrap:wrap; }
.rm-form .pt-q { margin-bottom: 16px; }
.rm-form .pt-q label { display:block; font-family:var(--serif); font-size:15px; line-height:1.4; color:var(--paper-soft); margin-bottom:8px; }
.rm-form textarea { width:100%; box-sizing:border-box; background: rgba(255,255,255,.05); border:1px solid var(--line-dk); color: var(--paper-ink); border-radius:2px; padding:13px 16px; font-family:var(--sans); font-size:15px; line-height:1.5; resize:vertical; }
.rm-form textarea::placeholder { color: var(--paper-mut); }
.rm-form textarea:focus { outline:none; border-color: var(--bronze); background: rgba(255,255,255,.08); }
.rm-form input { flex:1; min-width: 190px; background: rgba(255,255,255,.05); border:1px solid var(--line-dk); color: var(--paper-ink); border-radius:2px; padding:15px 18px; font-family:var(--sans); font-size:16px; }
.rm-form input::placeholder { color: var(--paper-mut); }
.rm-form input:focus { outline:none; border-color: var(--bronze); background: rgba(255,255,255,.08); }
.rm-form .btn { width:100%; justify-content:center; margin-top:14px; }
.rm-note { font-size:13px; color: var(--paper-mut); margin-top:14px; }
/* The pattern modal is form-heavy (3 questions + name/email). Top-align and
   allow it to scroll so nothing clips, and shrink the splash-sized heading. */
.pt-overlay .rm-copy { justify-content: flex-start; overflow-y: auto; max-height: 92vh; padding-top: clamp(52px, 5vw, 64px); padding-bottom: clamp(30px, 3vw, 44px); }
.pt-overlay .rm-form .pt-q { margin-bottom: 13px; }
.pt-overlay .rm-h { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.05; margin-bottom: 10px; }
.pt-overlay .rm-body { margin-bottom: 2px; }
.pt-overlay .rm-form { margin-top: 18px; }
.rm-close {
  position: absolute; top: 16px; right: 18px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20,16,12,.5); border: 1px solid var(--line-dk);
  color: var(--paper-ink); font-size: 24px; line-height: 1; cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.rm-close:hover { background: rgba(160,127,80,.28); border-color: var(--bronze); }
body.rm-locked { overflow: hidden; }
@media (max-width: 820px) {
  .rm-overlay { padding: 0; }
  .rm-panel { grid-template-columns: 1fr; height: 100%; max-height: 100%; border-radius: 0; }
  .rm-img { min-height: 30vh; order: -1; }
  .rm-copy { max-height: none; }
}

/* =========================================================
   LINE-ICON MOTION — editorial stroke "draw-on" + refined hover
   The draw-on is driven from site.js (it measures each path's real length
   so the trace fills the whole duration); here we only handle hover.
   ========================================================= */
/* refined hover — gentle lift + deepen toward bronze */
.proc .ic { transition: transform .55s var(--ease), color .45s var(--ease); will-change: transform; }
.proc:hover .ic { transform: translateY(-4px); color: var(--bronze-dp); }
.dark .proc:hover .ic { color: var(--bronze-lt); }

/* =========================================================
   HOMEPAGE REVISIONS — Jul 2026
   (pale CTA, big statements, code-origin couplet, declarations,
    contained sentence box, numbered method steps, dark testimonials)
   ========================================================= */

/* pale CTA button — dark text on a pale fill (for use on dark sections) */
.btn-paper { background: var(--paper-ink); color: var(--ink); }
.btn-paper:hover { background: #fff; color: var(--ink); }

/* big visual "statement" lines (closers + hero declarations) */
.statement {
  font-family: var(--serif);
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.12; letter-spacing: -0.01em;
  color: var(--ink);
}
.dark .statement { color: var(--paper-ink); }
.statement em { font-style: italic; color: var(--bronze-dp); }
.dark .statement em { color: var(--bronze-lt); }

/* section 3 — the childhood/adulthood couplet, refined */
.code-origin { margin-top: 26px; }
.code-origin p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2.1vw, 25px); line-height: 1.5;
  color: var(--ink-soft);
}
.code-origin p + p { margin-top: 8px; }

/* section 4 — the declaration pair */
.declare {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(26px, 3.6vw, 44px); line-height: 1.32;
  color: var(--ink); margin-top: 8px;
}
.declare-strong {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(19px, 2.2vw, 26px); line-height: 1.4;
  color: var(--ink); margin-top: 30px;
}

/* section 5b — contained "complete the sentence" box (dark) */
.sentence-box {
  background: var(--ink-bg); color: var(--paper-ink);
  border: 1px solid var(--line-dk); border-radius: 4px;
  padding: clamp(34px, 5vw, 60px) clamp(24px, 5vw, 56px);
  text-align: left;
}
.sentence-box .sb-ey { display: block; color: var(--bronze-lt); margin-bottom: 24px; }
.sentence-box .pattern-inline { margin: 0 auto; padding-top: 0; border-top: none; max-width: 620px; }
.sentence-box .pt-sentence { color: var(--paper-ink); }
.sentence-box .pt-note { color: var(--paper-mut); }
.sentence-box input { background: var(--paper); }

/* section 6 — vertical numbered method steps */
.method-steps {
  list-style: none; max-width: 640px; margin: 56px auto 0; text-align: left;
}
.method-steps li {
  display: flex; gap: clamp(20px, 3vw, 38px); align-items: baseline;
  padding: 26px 4px; border-top: 1px solid var(--line-dk);
}
.method-steps li:last-child { border-bottom: 1px solid var(--line-dk); }
.ms-num {
  font-family: var(--serif); font-size: clamp(30px, 4vw, 46px); line-height: 1;
  color: var(--bronze-lt); min-width: 1.7em; flex-shrink: 0;
}
.ms-body h4 {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-ink);
  margin-bottom: 8px;
}
.ms-body p { font-size: 15px; line-height: 1.55; color: var(--paper-mut); max-width: 46ch; }

/* section 8 — testimonials on a dark ground */
.testi.dark { background: var(--ink-bg); color: var(--paper-ink); }
.testi.dark .testi-card .q { color: var(--paper-ink); }
.testi.dark .testi-card .by { color: var(--bronze-lt); }
.testi.dark .testi-card { border-left-color: var(--line-dk); }
.testi.dark .testi-card:first-child { border-left: none; }
.testi.dark .testi-arrow {
  background: rgba(241, 233, 220, .08); border-color: var(--line-dk); color: var(--paper-ink);
}
.testi.dark .testi-arrow:hover { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--ink); }

/* section 5b — the sentence box.
   `.sb-section` is the plain case: a normally-spaced section, used anywhere
   the box stands on its own (resources).
   `.sb-lift` is the homepage case only, where the box is meant to overlap the
   photo band directly above it. The lift is a transform (not a negative
   margin-top) so the section's own background doesn't collapse upward and
   paint over the photo; margin-bottom reclaims the gap the transform leaves.
   Keep these separate — applying the lift where there is no photo above pulls
   the box up over its own heading. */
.sb-section { padding-block: clamp(56px, 8vw, 104px) clamp(88px, 13vw, 168px); }
.sb-lift { padding-top: 0; }
@media (min-width: 921px) {
  .sb-lift .sentence-box {
    transform: translateY(clamp(-160px, -10vw, -100px));
    margin-bottom: clamp(-160px, -10vw, -100px);
    position: relative; z-index: 3;
    box-shadow: 0 40px 90px -30px rgba(21, 17, 13, .6);
  }
}
@media (max-width: 920px) {
  .sb-lift { padding-top: clamp(40px, 8vw, 64px); }
}

/* =========================================================
   METHOD PAGE REVISIONS — Jul 2026
   (living brain hero panel, method steps on a light ground)
   ========================================================= */

/* hero — 3D neural brain (WebGL) with SVG poster fallback */
.brain-panel {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 55% 45%, #221a12 0%, var(--ink-bg) 62%);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 4vw, 64px);
  min-height: clamp(560px, 86vh, 900px);
}
.brain3d { position: absolute; inset: 0; z-index: 1; }
.brain3d canvas { display: block; width: 100% !important; height: 100% !important; }
.brain-poster {
  position: relative; z-index: 0;
  width: min(100%, 520px); height: auto; transition: opacity .6s ease;
}
.brain3d.is-live + .brain-poster { opacity: 0; }
@media (max-width: 900px) {
  .brain-panel { min-height: 56vh; }
}
@media (prefers-reduced-motion: reduce) {
  .brain3d { display: none; }
  .brain3d.is-live + .brain-poster { opacity: 1; }
}

/* method steps on a light/paper section (base styles are dark-ground) */
.paper .method-steps li { border-top-color: var(--line); }
.paper .method-steps li:last-child { border-bottom-color: var(--line); }
.paper .ms-num { color: var(--bronze-dp); }
.paper .ms-body h4 { color: var(--ink); }
.paper .ms-body p { color: var(--ink-soft); }

/* =========================================================
   ROUND 3 (12–13 Aug 2026) — Caroline's edits
   ========================================================= */

/* ---- Inside The Immersion: multi-paragraph columns + science links ---- */
.store-card .ds p + p { margin-top: 12px; }
.store-card .ds .ds-open,
.store-card .ds .ds-close {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.5vw, 18px); line-height: 1.45;
  color: var(--bronze-lt);
}
.store-card .ds .ds-close { margin-top: 16px; }
.store-card .ds em { font-style: italic; color: var(--paper-ink); }

/* The supporting-research link that sits at the foot of each column. Reads as
   a footnote, not a button — the science is offered, never sold. */
.science-link {
  display: block; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line-dk);
  text-decoration: none; color: inherit;
  transition: border-color .4s var(--ease);
}
.science-link:hover { border-top-color: var(--bronze); }
.science-link .sl-label {
  display: block; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bronze-lt);
  transition: color .3s var(--ease);
}
.science-link:hover .sl-label { color: var(--bronze); }
.science-link .sl-title {
  display: block; margin-top: 8px;
  font-family: var(--serif); font-style: italic;
  font-size: 15.5px; line-height: 1.45; color: var(--paper-mut);
}
.science-link:hover .sl-title { color: var(--paper-soft); }
/* light-ground variant, in case a column ever moves off the dark band */
.paper .science-link, .science-link.on-light { border-top-color: var(--line); }
.paper .science-link .sl-label { color: var(--bronze-dp); }
.paper .science-link .sl-title { color: var(--ink-muted); }

/* ---- the 28-day declaration list (replaces the paragraph) ---- */
.declare-list {
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.9; letter-spacing: .16em;
  text-transform: uppercase;
  font-family: var(--sans); font-weight: 500;
  color: var(--paper-ink);
}
.declare-list span + span { margin-top: 2px; }
.dark .declare-list { color: var(--paper-ink); }
.declare-list span:last-child { color: var(--bronze-lt); }

/* ---- THE COMMITMENT page ------------------------------------------------
   Deliberately the quietest page on the site. No photography, no cards, no
   bands — cream, black and warm gold, held together by type and air. It should
   read like a private letter the visitor has been shown rather than sold.   */
.commitment-page { background: var(--bg); }
/* the letter sits in one centred column; the text inside stays left-aligned */
.commitment-page .measure { margin-inline: auto; }
.cm-open { padding-block: clamp(90px, 12vw, 170px) clamp(30px, 4vw, 54px); }
.cm-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.12;
  color: var(--ink); margin-top: 22px;
}
.cm-title em { font-style: italic; color: var(--bronze-dp); }

/* a single hairline that opens and closes the page */
.cm-rule { width: 56px; height: 1px; background: var(--bronze); opacity: .7; }
.cm-open .cm-rule { margin-top: clamp(38px, 5vw, 64px); }
.cm-close .cm-rule { margin: 0 auto clamp(38px, 5vw, 60px); }

.cm-body { padding-block: clamp(44px, 6vw, 80px); }
.cm-turn { border-block: 1px solid var(--line); }

/* the three type registers: lead statement, running prose, held line */
.cm-lead {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 3vw, 36px); line-height: 1.26;
  color: var(--ink);
}
.cm-prose { margin-top: clamp(26px, 3vw, 40px); }
.cm-prose p {
  font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.85;
  color: var(--ink-soft);
}
.cm-prose p + p { margin-top: 1.5em; }
.cm-prose em { font-style: italic; color: var(--ink); }

/* the lines Caroline wants to land on their own */
.cm-mark {
  margin-top: clamp(38px, 5vw, 60px);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(21px, 2.4vw, 29px); line-height: 1.4;
  color: var(--bronze-dp);
}
.cm-mark em { font-style: italic; color: var(--ink); }

.cm-sign {
  margin-top: clamp(38px, 5vw, 60px);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-muted);
}

.cm-close { padding-block: clamp(70px, 9vw, 130px) clamp(80px, 10vw, 140px); }
.cm-agreement {
  margin-top: 24px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px); line-height: 1.24;
  color: var(--ink);
}
.cm-agreement em { font-style: italic; color: var(--bronze-dp); }
.cm-back { margin-top: clamp(34px, 4vw, 50px); font-size: 13px; }
.cm-back a {
  color: var(--ink-muted); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.cm-back a:hover { color: var(--bronze-dp); border-bottom-color: var(--bronze); }

/* ---- the line Caroline wants to stand out on the homepage ---- */
.pull-line {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(24px, 2.9vw, 35px); line-height: 1.28;
  color: var(--bronze-dp);
  padding-left: clamp(18px, 2vw, 26px);
  border-left: 2px solid var(--bronze);
}
.dark .pull-line { color: var(--bronze-lt); }

/* homepage proof carousel — same machinery as the Transformation section,
   tightened so it reads as a bar rather than a full section */
.testi-bar { padding-block: clamp(58px, 7vw, 90px); }
.testi-bar .testi-card { flex-basis: min(420px, 86vw); }

/* ---- THE METHOD: Map Your Loop invitation beneath the Loop emblem ---- */
/* ---- MAP YOUR LOOP™ invitation (method page) ----------------------
   The one interactive moment on the page, so it is given the weight of
   an invitation rather than a trailing button: eyebrow, headline, the
   four steps laid out up front, then the way in. */
.loop-cta {
  margin-top: clamp(58px, 6.5vw, 88px);
  padding-top: clamp(44px, 5vw, 68px);
  border-top: 1px solid var(--line-dk);
}
.lc-eyebrow {
  position: relative;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--bronze-lt);
  padding-bottom: 20px;
}
/* the short rule beneath the eyebrow, as in her mockup */
.lc-eyebrow::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 46px; height: 1px; background: var(--bronze);
  transform: translateX(-50%);
}
.lc-h {
  margin-top: clamp(22px, 2.6vw, 34px);
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02;
  letter-spacing: -.015em; color: var(--paper-ink);
}
/* a soft metallic pass across "your loop." — falls back to flat bronze */
.lc-h em {
  font-style: normal; color: var(--bronze-lt);
  background: linear-gradient(96deg, #a07f50 4%, #e3ca9d 46%, #a07f50 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lc-sub {
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: clamp(14.5px, 1.2vw, 16.5px); line-height: 1.75;
  color: var(--paper-soft);
}

/* the four steps, as circled nodes on a hairline */
.lc-steps {
  list-style: none;
  margin: clamp(38px, 4.6vw, 60px) auto 0;
  display: flex; justify-content: center; align-items: flex-start;
  max-width: 720px;
}
.lc-steps > li {
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* the hairline joining each node to the next */
.lc-steps > li:not(:last-child)::before {
  content: ""; position: absolute; top: 21px; left: 50%; width: 100%;
  height: 1px; background: rgba(194, 161, 115, .38);
}
.lc-node {
  position: relative; z-index: 1;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 16px; letter-spacing: .04em;
  color: var(--bronze-lt);
  border: 1px solid rgba(194, 161, 115, .5);
  background: var(--ink-bg);
}
.lc-label {
  font-size: 10.5px; letter-spacing: .16em; line-height: 1.7;
  text-transform: uppercase; color: var(--paper-ink);
}

.lc-act {
  margin-top: clamp(38px, 4.4vw, 56px);
  padding-top: clamp(34px, 4vw, 50px);
  border-top: 1px solid var(--line-dk);
  max-width: 720px; margin-inline: auto;
}
/* outlined rather than solid: an invitation, not a purchase */
.lc-btn {
  background: transparent; color: var(--bronze-lt);
  border: 1px solid rgba(194, 161, 115, .55);
  padding-inline: clamp(34px, 5vw, 64px);
}
.lc-btn:hover { background: var(--bronze); color: #fff; border-color: var(--bronze); }
.lc-fine {
  margin-top: clamp(22px, 2.4vw, 30px);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6;
  color: var(--paper-mut);
}

@media (max-width: 620px) {
  .lc-steps { flex-wrap: wrap; gap: clamp(26px, 6vw, 34px) 0; max-width: 380px; }
  .lc-steps > li { flex: 0 0 50%; }
  /* the connecting rule only reads on one line, so drop it once they wrap */
  .lc-steps > li::before { display: none; }
}

/* =========================================================
   MAP YOUR LOOP™ — the guided experience (map-your-loop.html)
   One question per screen on a dark ground, carrying the Recode Loop's own
   visual language. It must never read as a Typeform: no card, no progress
   bar, no cluster of fields. Just the question, the space and the words.
   ========================================================= */
.myl-page {
  background: var(--ink-bg);
  color: var(--paper-ink);
  min-height: 100vh;
  overflow-x: hidden;
}

/* --- chrome --- */
.myl-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px var(--gutter);
  background: rgba(21, 17, 13, .86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-dk);
}
.myl-home, .myl-spacer { flex: 1 1 0; min-width: 0; }
.myl-home {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-mut); text-decoration: none;
  transition: color .3s var(--ease);
}
.myl-home:hover { color: var(--bronze-lt); }
.myl-home svg { width: 15px; height: 15px; flex: none; }
.myl-spacer { text-align: right; }
.myl-wordmark {
  flex: 0 0 auto;
  font-family: var(--serif); font-size: 17px; letter-spacing: .04em;
  color: var(--paper-soft);
}
@media (max-width: 560px) {
  .myl-home span { display: none; }
  .myl-wordmark { font-size: 15px; }
}

/* --- progress: the five stages of their loop, filling in --- */
.myl-progress {
  position: sticky; top: 61px; z-index: 30;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(10px, 2.4vw, 30px);
  padding: 16px var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
.myl-progress.is-on { opacity: 1; visibility: visible; }
.mp-node {
  position: relative;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: #4a4038;
  padding-bottom: 8px;
  transition: color .5s var(--ease);
}
.mp-node::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.mp-node.is-done { color: var(--bronze-dp); }
.mp-node.is-done::after { transform: scaleX(1); }
.mp-node.is-current { color: var(--bronze-lt); }
.mp-node.is-current::after { transform: scaleX(1); }

/* --- the screen stack --- */
.myl-stage { position: relative; }
.myl-screen {
  display: none;
  min-height: calc(100vh - 118px);
  min-height: calc(100svh - 118px);
  padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(64px, 9vw, 120px);
  align-items: center; justify-content: center;
}
.myl-screen.is-active { display: flex; animation: mylIn .58s var(--ease) both; }
.myl-screen.is-leaving-fwd, .myl-screen.is-leaving-back { display: none; }
@keyframes mylIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .myl-screen.is-active { animation: none; }
}

.myl-inner { width: 100%; max-width: 620px; }
.myl-inner-wide { max-width: 760px; }

/* --- type --- */
.myl-step {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--bronze-dp); margin-bottom: 22px;
}
.myl-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.2vw, 52px); line-height: 1.12;
  color: var(--paper-ink); margin-top: 20px;
}
.myl-q {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(27px, 3.6vw, 43px); line-height: 1.16;
  color: var(--paper-ink);
}
.myl-q-quiet { color: var(--bronze-lt); font-style: italic; }
.myl-help {
  margin-top: 18px; font-size: 15.5px; line-height: 1.65;
  color: var(--paper-mut); max-width: 520px;
}
.myl-help-after { margin-top: 14px; font-size: 13.5px; }
.myl-examples {
  margin-top: 18px;
  font-family: var(--serif); font-style: italic;
  font-size: 16.5px; line-height: 1.6; color: #6d6154;
  max-width: 520px;
}
.myl-prose { margin-top: 24px; }
.myl-prose p { font-size: 16.5px; line-height: 1.8; color: var(--paper-soft); }
.myl-prose p + p { margin-top: 1.3em; }
.myl-prose em { font-style: italic; color: var(--paper-ink); }
.myl-caroline {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2vw, 23px) !important;
  line-height: 1.45 !important; color: var(--bronze-lt) !important;
  margin-top: 1.3em;
}
.myl-interstitial .myl-q { font-style: italic; }

/* --- inputs: a ruled line to write on, never a box --- */
.myl-input, .myl-field input {
  display: block; width: 100%;
  margin-top: 30px; padding: 10px 0 14px;
  background: transparent; border: none;
  border-bottom: 1px solid #3b3129;
  color: var(--paper-ink);
  font-family: var(--serif); font-size: clamp(19px, 2vw, 24px);
  line-height: 1.5; resize: none;
  transition: border-color .4s var(--ease);
}
.myl-input:focus, .myl-field input:focus {
  outline: none; border-bottom-color: var(--bronze);
}
.myl-input::placeholder, .myl-field input::placeholder {
  color: #4a4038; font-style: italic;
}
.myl-input.is-invalid, .myl-field input.is-invalid { border-bottom-color: #8d5a4a; }
.myl-echo { color: var(--bronze-lt); }

.myl-fields { margin-top: 8px; }
.myl-field { display: block; }
.myl-field + .myl-field { margin-top: 12px; }
.mf-label {
  display: block; margin-top: 26px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper-mut);
}
.myl-field input { margin-top: 6px; font-size: clamp(18px, 1.8vw, 21px); }

.myl-error {
  margin-top: 16px; font-size: 14px; line-height: 1.5; color: #c98d78;
}

/* --- actions --- */
.myl-actions {
  display: flex; align-items: center; gap: 22px;
  margin-top: clamp(34px, 4.5vw, 52px);
}
.myl-actions-wrap { flex-wrap: wrap; gap: 14px; }
.myl-back {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  color: #5c5248; padding: 4px 0;
  transition: color .3s var(--ease);
}
.myl-back:hover { color: var(--paper-soft); }
.myl-fineprint {
  margin-top: 28px; font-size: 12.5px; line-height: 1.6; color: #5c5248;
}

/* --- the reveal: their own words become the loop --- */
.myl-loop { list-style: none; margin-top: clamp(34px, 4vw, 52px); }
/* the stage lead-ins are full phrases, not one-word labels, so each row reads
   downward as a sentence: her prompt, then their own word completing it */
.ml-row {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  gap: 10px; align-items: baseline;
  padding: clamp(18px, 2.2vw, 26px) 0 clamp(20px, 2.4vw, 28px) clamp(18px, 2vw, 26px);
  border-top: 1px solid #2a2119;
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.ml-row.is-in { opacity: 1; transform: none; }
.ml-row:last-child { border-bottom: 1px solid #2a2119; }
/* the thread running down the stages — the loop, drawn as a line */
.ml-row::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bronze-dp); transform: translate(-50%, -50%);
  opacity: .0; transition: opacity .7s var(--ease) .2s;
}
.ml-row.is-in::before { opacity: 1; }
.ml-stage {
  display: block;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.7; color: var(--bronze-dp);
}
.ml-word {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2.1vw, 26px); line-height: 1.45;
  color: var(--paper-ink);
  overflow-wrap: anywhere;
}
.myl-reveal-note { margin-top: clamp(34px, 4vw, 50px); }
@media (max-width: 560px) {
  .ml-row { gap: 8px; }
}

/* ---- supporting research list (article page) ---- */
.paper-list { list-style: none; margin-top: clamp(34px, 4vw, 50px); }
.paper-list li {
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--line);
}
.paper-list li:last-child { border-bottom: 1px solid var(--line); }
.paper-list h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.28;
  color: var(--ink);
}
.paper-list p {
  margin-top: 10px; font-size: 16px; line-height: 1.7;
  color: var(--ink-soft); max-width: 640px;
}
.paper-list a {
  display: inline-block; margin-top: 16px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bronze-dp); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: border-color .3s var(--ease);
}
.paper-list a:hover { border-bottom-color: var(--bronze); }

/* =========================================================
   ROUND 4 (13 Aug 2026)
   ========================================================= */

/* ---- THE SCIENCE page: research entries -------------------------------
   Each entry runs claim → research → what the Method does with it →
   citation. The Method line is the one that has to stand out: it is the
   only place on the page where Caroline speaks rather than the field.   */
.science-list { list-style: none; counter-reset: none; }
.science-entry {
  position: relative;
  padding: clamp(38px, 4.5vw, 60px) 0;
  border-top: 1px solid var(--line);
}
.science-entry:last-child { border-bottom: 1px solid var(--line); }
.se-num {
  display: block; margin-bottom: 14px;
  font-size: 11px; letter-spacing: .24em; color: var(--bronze-dp);
}
.science-entry h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(25px, 3vw, 37px); line-height: 1.16;
  color: var(--ink);
}
.se-research {
  margin-top: 20px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.8;
  color: var(--ink-soft);
}
.se-research em { font-style: italic; color: var(--ink); }
/* Caroline's application of the research — set apart, never a box */
.se-method {
  margin-top: 26px; padding-left: clamp(18px, 2vw, 26px);
  border-left: 2px solid var(--bronze);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.9vw, 23px); line-height: 1.5;
  color: var(--bronze-dp);
}
.se-cite { margin-top: 28px; }
.se-cite cite {
  display: block; font-style: normal;
  font-family: var(--serif); font-size: 17px; line-height: 1.4;
  color: var(--ink);
}
.se-cite span {
  display: block; margin-top: 5px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.se-link {
  display: inline-block; margin-top: 16px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bronze-dp); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: border-color .3s var(--ease);
}
.se-link:hover { border-bottom-color: var(--bronze); }

/* =========================================================
   ROUND 5 (13 Aug 2026) — the sentence panel, rebuilt
   Caroline: "lower this black box to give it more space and make it more
   enticing to engage with — we want everyone to fill this out."
   So it becomes a full-width panel: the offer stated on the left, the one
   question on the right, and a seal on the edge promising a personal reply.
   ========================================================= */

/* it still lifts into the photo band above, but far less than before —
   the old -160px left it wedged against the section edge */
@media (min-width: 921px) {
  .sb-lift .sentence-box {
    transform: translateY(clamp(-88px, -5vw, -52px));
    margin-bottom: clamp(-88px, -5vw, -52px);
  }
}

.sentence-box {
  position: relative;
  padding: clamp(34px, 4.2vw, 62px) clamp(24px, 4vw, 62px);
  /* a faint sweep of warmth across the black, as in Caroline's mockup */
  background:
    radial-gradient(120% 150% at 82% 8%, rgba(160, 127, 80, .22) 0%, rgba(160, 127, 80, 0) 58%),
    var(--ink-bg);
}

.sb-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  /* room for the seal so long answers never run under it */
  padding-right: clamp(0px, 9vw, 150px);
}
.sb-grid > .sb-act { border-left: 1px solid var(--line-dk); padding-left: clamp(24px, 3.4vw, 54px); }

.sentence-box .sb-ey { display: block; color: var(--paper-soft); margin-bottom: 22px; }
.sb-act .sb-ey { color: var(--bronze-lt); }

/* sized so "A BREAKTHROUGH" holds its own line in this column — any larger
   and it wraps after the "A", which breaks the two-line shape entirely */
.sb-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(27px, 3.1vw, 42px); line-height: 1.1;
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--paper-ink);
  text-wrap: balance;
}
.sb-h em { font-style: normal; color: var(--bronze-lt); }
.sb-sub {
  margin-top: 22px; max-width: 380px;
  font-size: 16px; line-height: 1.75; color: var(--paper-soft);
}

/* --- the form itself --- */
.sentence-box .pattern-inline {
  margin: 0; padding-top: 0; border-top: none; max-width: none;
}
.sentence-box .pt-sentence {
  color: var(--paper-ink);
  font-size: clamp(19px, 2vw, 25px); margin-bottom: 22px;
}
.sentence-box input {
  display: block; width: 100%;
  background: transparent; border: 1px solid #40352b;
  border-radius: 2px; padding: 16px 18px;
  font-family: var(--sans); font-style: normal; font-size: 16px;
  color: var(--paper-ink);
}
.sentence-box input::placeholder { color: #6d6154; font-style: normal; }
.sentence-box input:focus {
  outline: none; background: transparent; border-color: var(--bronze);
}
.sb-submit { width: 100%; justify-content: center; margin-top: 14px; }
.sentence-box .pt-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; color: var(--paper-mut);
}
.pt-lock { width: 14px; height: 14px; flex: none; color: var(--bronze-lt); }

/* --- the seal: what they get back --- */
.sb-seal {
  position: absolute; top: 50%; right: clamp(-46px, -3vw, -30px);
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}
/* the arrow leaves from around the button and rises to the seal, so it never
   cuts across the input field */
.sb-arrow {
  width: 96px; height: 56px; color: var(--bronze); opacity: .8;
  align-self: flex-end; margin-bottom: clamp(18px, 2.4vw, 34px);
}
.sb-medal {
  position: relative;
  width: clamp(150px, 12vw, 178px); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px; text-align: center;
  background: #100d0a;
  border: 1px solid rgba(194, 161, 115, .35);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
}
.sb-medal-ey {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper-soft);
}
.sb-medal-t {
  font-size: 11.5px; line-height: 1.5; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper-ink);
}

/* --- narrower: drop the arrow, then stack --- */
@media (max-width: 1180px) {
  .sb-arrow { display: none; }
  .sb-seal { right: clamp(-38px, -2vw, -26px); }
}
@media (max-width: 980px) {
  /* the seal moves inside the panel, under the form, and stops overlapping */
  .sb-grid { padding-right: 0; }
  .sb-seal {
    position: static; transform: none;
    justify-content: center; margin-top: clamp(30px, 4vw, 42px);
  }
}
@media (max-width: 760px) {
  .sb-grid { grid-template-columns: 1fr; }
  .sb-grid > .sb-act {
    border-left: none; padding-left: 0;
    border-top: 1px solid var(--line-dk); padding-top: clamp(26px, 5vw, 34px);
  }
}

/* ============================================================
   HOMEPAGE · THE 4-WEEK IMMERSION
   Built to Caroline's reference: the offer takes the full width
   and is framed as a panel — the pitch, what is actually
   included, the promise set apart, and an attributes band
   closing it out.
   ============================================================ */
.imm-section { padding-bottom: clamp(56px, 7vw, 104px); }
/* she asked for this one "full width of the page", so the panel breaks out of
   the standard 1280 measure — the three columns need the room to hold a line
   each */
.imm-section .wrap { max-width: 1560px; }
.imm-panel {
  position: relative;
  border: 1px solid rgba(194, 161, 115, .32);
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(194, 161, 115, .07) 0%, transparent 58%),
    linear-gradient(180deg, var(--ink-bg-2) 0%, #100d0a 100%);
}
.imm-grid {
  display: grid;
  grid-template-columns: 1.44fr 1fr .65fr;
  padding: clamp(34px, 4.4vw, 66px) clamp(24px, 3.6vw, 60px);
  gap: clamp(24px, 3.4vw, 54px);
}
/* the hairline separating the pitch from what is included */
.imm-grid > .imm-list {
  border-left: 1px solid var(--line-dk);
  padding-left: clamp(24px, 3.4vw, 54px);
}

/* ---- the pitch ---- */
.imm-ey {
  display: flex; align-items: center; gap: 14px;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--bronze-lt); margin-bottom: clamp(20px, 2.4vw, 30px);
}
/* rules flanking the eyebrow, as in her reference */
.imm-ey::before, .imm-ey::after {
  content: ""; height: 1px; background: rgba(194, 161, 115, .42);
}
.imm-ey::before { width: 34px; flex: 0 0 34px; }
.imm-ey::after { flex: 1 1 auto; }
.imm-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 2.95vw, 44px); line-height: 1.12;
  letter-spacing: -.012em; color: var(--paper-ink);
  padding-bottom: clamp(22px, 2.6vw, 32px);
  border-bottom: 1px solid var(--line-dk);
}
.imm-h em { font-style: italic; color: var(--bronze-lt); }
.imm-sub {
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: 14.5px; line-height: 1.78; color: var(--paper-soft);
  max-width: 44ch;
}
.imm-act {
  margin-top: clamp(26px, 3vw, 38px);
  display: flex; align-items: center; gap: clamp(16px, 2vw, 26px);
  flex-wrap: wrap;
}
.imm-note {
  font-size: 10px; letter-spacing: .16em; line-height: 1.85;
  text-transform: uppercase; color: var(--bronze-lt);
}

/* ---- what is included ---- */
/* stretched rather than centred so the dividing rule runs the full height of
   the panel, as in her reference; the items stay optically centred */
.imm-list {
  list-style: none; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
}
.imm-list > li {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: clamp(16px, 2vw, 26px);
  padding: clamp(15px, 1.7vw, 21px) 0;
  border-bottom: 1px solid var(--line-dk);
}
.imm-list > li:last-child { border-bottom: none; }
.imm-n {
  font-family: var(--serif); font-size: clamp(21px, 1.9vw, 27px);
  color: var(--bronze-lt); line-height: 1;
  padding-right: clamp(16px, 2vw, 26px);
  border-right: 1px solid var(--line-dk);
}
.imm-item {
  font-size: 10px; letter-spacing: .12em; line-height: 1.6;
  text-transform: uppercase; color: var(--paper-ink);
}

/* ---- the promise ---- */
.imm-promise {
  align-self: center;
  border: 1px solid rgba(194, 161, 115, .45);
  padding: clamp(26px, 3vw, 40px) clamp(18px, 2.2vw, 28px);
  text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.42;
  color: var(--paper-ink);
}
.imm-rule {
  display: block; width: 40px; height: 1px; background: var(--bronze);
  margin: clamp(18px, 2.2vw, 26px) auto;
}
.imm-promise-gold { color: var(--bronze-lt); }

/* ---- the attributes band ---- */
.imm-band {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  background: linear-gradient(180deg, #b0895a 0%, #98764c 100%);
  border-top: 1px solid rgba(194, 161, 115, .5);
}
.imm-band > li {
  flex: 1 1 auto; text-align: center;
  padding: clamp(15px, 1.7vw, 20px) clamp(14px, 1.8vw, 26px);
  font-size: 10px; letter-spacing: .17em; text-transform: uppercase;
  color: #23190f;
  border-left: 1px solid rgba(35, 25, 15, .22);
}
.imm-band > li:first-child { border-left: none; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  /* the promise drops beneath the two columns and runs full width */
  .imm-grid { grid-template-columns: 1.1fr 1fr; }
  .imm-promise { grid-column: 1 / -1; }
  /* 3 + 2 rather than a stranded single item on the second row */
  .imm-band > li { flex: 1 1 30%; }
}
@media (max-width: 820px) {
  .imm-grid { grid-template-columns: 1fr; }
  .imm-grid > .imm-list {
    border-left: none; padding-left: 0;
    border-top: 1px solid var(--line-dk); padding-top: clamp(20px, 3vw, 28px);
  }
}
@media (max-width: 620px) {
  .imm-act { flex-direction: column; align-items: stretch; }
  .imm-act .btn { width: 100%; justify-content: center; }
  .imm-note { text-align: center; }
  .imm-band > li { flex: 1 1 100%; border-left: none; border-top: 1px solid rgba(35, 25, 15, .22); }
  .imm-band > li:first-child { border-top: none; }
}

/* =========================================================
   HOMEPAGE — THE PROBLEM / hand-off / the last word
   (Caroline's 14 Aug homepage edit)
   ========================================================= */

/* the single-word answer inside THE PROBLEM — it carries more weight than
   body copy but must not compete with the section title above it. */
.pb-no {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1; color: var(--paper-ink);
}

/* "THIS IS HOW" + the line that walks the eye into the immersion panel */
.tih { text-align: center; margin-top: clamp(34px, 4vw, 48px); }
.tih-label {
  font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bronze-dp);
}
.tih-arrow {
  width: 22px; height: clamp(44px, 5vw, 62px); margin: 10px auto 0;
  color: var(--bronze); display: block;
}

/* the closing note — the page ends on the reader, so it sits quiet and wide */
.closing-note { padding-block: clamp(78px, 9vw, 124px); }
.closing-note .eyebrow.kicker { color: var(--bronze-dp); }
.cn-rule {
  display: block; width: 34px; height: 1px; background: var(--bronze);
  margin: 18px auto clamp(22px, 2.6vw, 30px);
}
.cn-line {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.3vw, 28px); line-height: 1.4;
  color: var(--bronze-dp);
}

/* =========================================================
   THE IMMERSION — the merged opening (Caroline's 18 Aug direction)
   Her copy set left against a full-height portrait: the promise, then
   what daily work actually means, then the line the page turns on.
   ========================================================= */
.imm-open { border-bottom: 1px solid var(--line); }
.imm-open .split-copy { padding-block: clamp(64px, 8vw, 116px); }
.imm-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 4.2vw, 62px); line-height: 1.06;
  color: var(--ink); margin-bottom: 34px;
}
.imm-title em { font-style: italic; color: var(--bronze-dp); }
.imm-line { font-size: 15.5px; line-height: 1.72; color: var(--ink-soft); }
.imm-mark {
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  font-size: 13.5px; color: var(--bronze-dp);
}
.imm-rule {
  display: block; width: 42px; height: 1px; background: var(--bronze-lt);
  margin: 32px 0;
}
.imm-open .statement { margin-top: 4px; }

/* =========================================================
   THE IMMERSION — the timeline
   Three columns on the dark: an emblem, when it happens, what it does,
   what you actually get, and the line it leaves you on.
   ========================================================= */
.imm-time { border-top: none; }
.time-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
}
.time-col {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 clamp(4px, 1.4vw, 22px);
}
.time-col + .time-col { border-left: 1px solid var(--line-dk); }

.time-icon {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--bronze-dp); color: var(--bronze-lt);
  display: grid; place-items: center; margin-bottom: 26px;
}
.time-icon svg { width: 26px; height: 26px; }

.time-when {
  font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 18px;
}
.time-title {
  font-family: var(--serif); font-weight: 400; text-transform: uppercase;
  font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; letter-spacing: .02em;
  color: var(--paper-ink); margin-bottom: 18px;
}
.time-promise {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5;
  color: var(--paper-soft); max-width: 30ch;
}
.time-rule {
  display: block; width: 100%; height: 1px; background: var(--line-dk);
  margin: clamp(26px, 3vw, 36px) 0 22px;
}
.time-label {
  font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper-mut); margin-bottom: 20px;
}

.time-list { list-style: none; text-align: left; width: 100%; }
.time-list li {
  position: relative; padding: 0 0 14px 30px;
  font-size: 14px; line-height: 1.55; color: var(--paper-soft);
}
.time-list li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2a173' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.4 12.2 2.5 2.5 4.7-5.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.time-close {
  margin-top: auto; padding-top: 24px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5;
  color: var(--bronze-lt);
}
.time-sci {
  margin-top: 18px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper-mut);
  padding-bottom: 3px; border-bottom: 1px solid currentColor;
  transition: color .3s var(--ease);
}
.time-sci:hover { color: var(--bronze-lt); }

@media (max-width: 900px) {
  .time-grid { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 56px); }
  .time-col { padding: 0; }
  .time-col + .time-col {
    border-left: none; border-top: 1px solid var(--line-dk);
    padding-top: clamp(40px, 6vw, 56px);
  }
  .time-close { margin-top: 0; }
}

/* =========================================================
   THE SCIENCE — the drawer deck (Caroline's layout 2, 14 Aug)
   Six principles side by side. The open one is a full spread —
   copy on the left, plate on the right. The rest stay closed like
   drawers half pulled out, clipped by the card in front of them.
   The rail slides so the open card always sits at the left edge.
   ========================================================= */
.deck-section { overflow: hidden; }

.deck-head { max-width: 620px; margin-bottom: clamp(30px, 4vw, 54px); }
.deck-lede { font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 46ch; }

.deck {
  --dc-open:   min(940px, 90vw);
  --dc-closed: clamp(92px, 9.4vw, 124px);
  --dc-gap: 12px;
  position: relative;
}

/* the far edge dissolves into the page, so the deck reads as continuing */
.deck-mask {
  overflow: hidden; padding: 6px 0 4px;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, rgba(0,0,0,.45) 96%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 86%, rgba(0,0,0,.45) 96%, transparent 100%);
}
.deck-rail {
  display: flex; gap: var(--dc-gap);
  transition: transform .78s var(--ease); will-change: transform;
}

.deck-card {
  flex: 0 0 auto;
  width: var(--dc-closed); height: clamp(470px, 39vw, 562px);
  overflow: hidden; position: relative; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  transition: width .78s var(--ease), box-shadow .6s var(--ease),
              border-color .4s var(--ease), background .5s var(--ease);
}
.deck-card.open {
  width: var(--dc-open); cursor: default;
  box-shadow: 0 34px 80px -46px rgba(26, 22, 18, .55);
}
.deck-card:not(.open):hover { border-color: var(--bronze-lt); }
.deck-card:not(.open):hover .deck-inner { opacity: .92; }
.deck-card:focus-visible { outline: 1px solid var(--bronze); outline-offset: 3px; }

/* the drawer trick: the contents never resize, the card just clips them */
.deck-inner {
  display: flex; width: var(--dc-open); height: 100%;
  opacity: .66; transition: opacity .6s var(--ease);
}
.deck-card.open .deck-inner { opacity: 1; }

.dc-copy {
  flex: 0 0 56%; display: flex; flex-direction: column;
  padding: clamp(28px, 2.7vw, 42px);
}
.dc-num {
  font-family: var(--serif); font-size: 26px; line-height: 1;
  color: var(--bronze); margin-bottom: 16px;
}
.dc-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(25px, 2.2vw, 32px); line-height: 1.1; color: var(--ink);
  margin-bottom: 15px; max-width: 17ch;
}
.dc-research { font-size: 15px; line-height: 1.58; color: var(--ink); }
.dc-research em { font-style: italic; color: var(--bronze-dp); }
.dc-method {
  font-size: 13.5px; line-height: 1.58; color: var(--ink-soft);
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.dc-tag {
  margin-top: 15px;
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--bronze-dp);
}
.dc-cite {
  margin-top: 4px;
  font-size: 11.5px; line-height: 1.45; color: var(--ink-muted);
}
.dc-cite cite { font-style: italic; display: block; }
.dc-cite span { display: block; }
.dc-link {
  margin-top: 18px; align-self: flex-start;
  font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bronze-dp);
  padding-bottom: 3px; border-bottom: 1px solid currentColor;
  transition: color .3s var(--ease);
}
.dc-link:hover { color: var(--bronze); }

/* the plate — bronze line drawing, alternating cream and near-black */
.dc-art {
  flex: 1 1 auto; display: grid; place-items: center;
  /* matched to the paper Caroline's plates are drawn on, so the panel and the
     image read as one surface rather than a picture sitting on a panel */
  background: #f4eee6; border-left: 1px solid var(--line);
  color: var(--bronze);
}
.dc-svg { width: min(74%, 240px); height: auto; }
.dc-plate {
  width: 100%; height: 100%; object-fit: contain;
  padding: clamp(14px, 1.8vw, 26px);
}


/* controls */
/* the arrows live in the page gutter, clear of the card copy — below that
   width there isn't room for them, so the drawers and dots do the work */
.deck-arrow { display: none; top: 50%; }
@media (min-width: 1180px) {
  .deck-arrow { display: grid; }
  .deck-prev { left: -64px; }
  .deck-next { right: -64px; }
}
.deck-dots { display: flex; gap: 10px; margin-top: clamp(24px, 3vw, 34px); }
.deck-dots button {
  width: 7px; height: 7px; border-radius: 50%; padding: 0;
  background: var(--line); border: none; cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.deck-dots button:hover { background: var(--bronze-lt); }
.deck-dots button.on { background: var(--bronze); transform: scale(1.35); }

/* under 820px the drawers make no sense — plain stack, everything open */
@media (max-width: 820px) {
  .deck { --dc-open: 100%; }
  .deck-mask { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .deck-rail { flex-direction: column; gap: 16px; transform: none !important; }
  .deck-card, .deck-card.open {
    width: 100%; height: auto; cursor: default; box-shadow: none;
  }
  .deck-inner { flex-direction: column-reverse; width: 100%; opacity: 1; }
  .dc-copy { flex: 1 1 auto; }
  .dc-art { border-left: none; border-bottom: 1px solid var(--line); padding: 34px 0; }
  .deck-card.is-dark .dc-art { border-bottom-color: var(--line-dk); }
  .dc-svg { width: 148px; }
  .dc-plate { height: 210px; padding: 0; }
  .deck-dots { display: none; }
}

/* =========================================================
   HOMEPAGE · THE PROBLEM + THE SOLUTION (Caroline, 18 Aug)
   Fewer voices in The Problem; a mark rather than a sentence in The Solution.
   ========================================================= */
.pb-line { font-size: 15.5px; line-height: 1.75; color: var(--paper-soft); }
.pb-line em { font-style: italic; color: var(--bronze-lt); }
.pb-rule {
  display: block; width: 46px; height: 1px; background: var(--bronze-dp);
  margin: clamp(34px, 4vw, 48px) auto;
}
.pb-ask {
  font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--paper-mut); margin-bottom: 16px;
}
.pb-q {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 3vw, 36px); line-height: 1.2; color: var(--paper-ink);
}
.pb-no {
  font-family: var(--serif); font-size: clamp(30px, 3.6vw, 44px); line-height: 1;
  color: var(--bronze-lt); margin-top: 26px;
}
.staccato.plain {
  font-family: var(--sans); font-size: 15.5px; line-height: 1.9;
  letter-spacing: .01em; color: var(--paper-soft);
}

/* eyebrow with the rule running off it, as in her mockup */
.eyebrow.ruled { display: flex; align-items: center; gap: 18px; }
.eyebrow.ruled::after {
  content: ""; flex: 0 0 74px; height: 1px; background: var(--bronze-dp);
}
.sol-band .ph { filter: saturate(.94); }
.sol-mark {
  margin-top: clamp(28px, 3vw, 38px);
  padding-left: 22px; border-left: 1px solid var(--bronze-dp);
}
.sol-that {
  font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--paper-mut); margin-bottom: 8px;
}
.sol-name {
  font-family: var(--serif); text-transform: uppercase;
  font-size: clamp(22px, 2.3vw, 31px); line-height: 1.1; letter-spacing: .02em;
  color: var(--paper-ink);
}
.sol-sub { margin-top: 10px; font-size: 14px; color: var(--paper-mut); }

/* =========================================================
   THE METHOD — rebuilt to Caroline's 18 Aug mockup
   The Loop carries the hero, the truth is told in four moves, the exercise
   gets a device of its own, and the methodology reads as four numbered steps.
   ========================================================= */
.method-hero { border-bottom: 1px solid var(--line-dk); }
.mh-grid {
  display: grid; grid-template-columns: 1.08fr 1fr;
  gap: clamp(32px, 4vw, 68px); align-items: center;
}
.mh-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(31px, 3.4vw, 49px); line-height: 1.1;
  color: var(--paper-ink); margin-bottom: 26px;
}
.mh-title em {
  font-style: normal; text-transform: uppercase; letter-spacing: .01em;
  color: var(--bronze-lt);
}
.orbit.hero-orbit { width: min(500px, 92%); margin: 0 auto; }
.hero-orbit .o-stage { font-size: clamp(24px, 2.6vw, 34px); }

/* the truth — copy against four moves */
.truth-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 76px); align-items: start;
}
.truth-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); padding-top: 30px;
}
.ts { padding: 0 clamp(8px, 1.2vw, 18px); text-align: center; }
.ts + .ts { border-left: 1px solid var(--line); }
.ts-icon { display: block; color: var(--bronze); margin-bottom: 16px; }
.ts-icon svg { width: 38px; height: 38px; margin: 0 auto; }
.ts-name {
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 10px;
}
.ts-note { font-size: 13px; line-height: 1.55; color: var(--ink-muted); }

/* explore your loop */
.ex-checks { list-style: none; margin-top: 26px; }
.ex-checks li {
  position: relative; padding: 0 0 13px 30px;
  font-size: 14.5px; line-height: 1.55; color: var(--paper-soft);
}
.ex-checks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2a173' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.4 12.2 2.5 2.5 4.7-5.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ex-fine { margin-top: 16px; font-size: 12.5px; color: var(--paper-mut); }

/* the four steps */
.steps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 40px); text-align: center;
}
.step { padding: 0 clamp(4px, 1vw, 14px); }
.step + .step { border-left: 1px solid var(--line); }
.step-n {
  font-family: var(--serif); font-size: 30px; line-height: 1;
  color: var(--bronze); margin-bottom: 14px;
}
.step-name {
  font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 12px;
}
.step-note { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 980px) {
  .mh-grid, .truth-grid, .ex-grid { grid-template-columns: 1fr; }
  .mh-loop { order: -1; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .step:nth-child(odd) { border-left: none; }
  .truth-steps { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .ts:nth-child(odd) { border-left: none; }
}
@media (max-width: 620px) {
  .steps-grid, .truth-steps { grid-template-columns: 1fr; }
  .step + .step, .ts + .ts { border-left: none; }
}

/* =========================================================
   ABOUT — rebuilt to Caroline's 18 Aug copy and flow
   Belief first, then the woman, then the work behind the work, then how she
   lives it. The personal note keeps its place at the end.
   ========================================================= */
.about-open { border-bottom: 1px solid var(--line); }
.about-woman { background: var(--paper); border-bottom: 1px solid var(--line); }
.ab-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14;
  color: var(--ink); margin-bottom: 26px;
}
.ab-title em { font-style: italic; color: var(--bronze-dp); }
.ab-line { font-size: 15.5px; line-height: 1.78; color: var(--ink-soft); margin-bottom: 16px; }
.ab-line em { font-style: italic; color: var(--bronze-dp); }
.ab-line:last-child { margin-bottom: 0; }
.ab-pull {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.42;
  color: var(--bronze-dp); margin: 22px 0;
}

/* the six disciplines */
.disc-row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.4vw, 22px);
  margin: clamp(46px, 5.5vw, 72px) 0;
  border-block: 1px solid var(--line); padding-block: clamp(26px, 3vw, 38px);
}
.disc { text-align: center; padding: 0 6px; }
.disc-icon { display: block; color: var(--bronze); margin-bottom: 14px; }
.disc-icon svg { width: 34px; height: 34px; margin: 0 auto; }
.disc-name {
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.5; color: var(--ink-soft);
}

/* I live this work */
.live-work { border-top: 1px solid var(--line); }
.live-grid {
  display: grid; grid-template-columns: 1.05fr 1fr .8fr;
  gap: clamp(30px, 4vw, 64px); align-items: center;
}
.lw-list { list-style: none; }
.lw-list li {
  font-size: 15.5px; line-height: 1.6; color: var(--ink-soft);
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.lw-list li:first-child { border-top: 1px solid var(--line); }
.lw-note {
  background: var(--bronze); border-radius: 2px;
  padding: clamp(28px, 3vw, 44px);
  font-family: var(--serif); font-size: clamp(21px, 2.1vw, 27px); line-height: 1.32;
  color: #fff;
}

@media (max-width: 980px) {
  .disc-row { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .live-grid { grid-template-columns: 1fr; }
  .lw-note { text-align: center; }
}
@media (max-width: 560px) { .disc-row { grid-template-columns: repeat(2, 1fr); } }

/* On a phone the split images crop to a tall strip, and centre lands on a
   sleeve or a lap. Point each one at Caroline's face instead. */
@media (max-width: 860px) {
  .imm-open .split-img   { background-position: 62% 16% !important; }
  .about-open .split-img { background-position: 46% 20% !important; }
  .about-woman .split-img{ background-position: center 72% !important; }
  .method-imm .split-img { background-position: 44% 34% !important; }
}

/* =========================================================
   20 AUG · CAROLINE'S FINAL EMAIL PASS
   Preserve the approved pages; strengthen hierarchy, contrast and imagery
   on Home, Method, About and the Immersion.
   ========================================================= */

/* Home: the dark offer now floats directly beneath the pale hand-off. */
.imm-section {
  padding-top: clamp(8px, 1.5vw, 22px);
  padding-bottom: clamp(64px, 7vw, 104px);
  position: relative;
}
.imm-section .imm-panel {
  margin-top: clamp(-32px, -2.4vw, -18px);
  box-shadow: 0 34px 90px -48px rgba(28, 20, 12, .76);
}

/* Method: bespoke neural-code artwork supports the live Loop diagram. */
.method-hero {
  position: relative;
  overflow: hidden;
}
.method-hero-art {
  background:
    linear-gradient(90deg, rgba(15,12,9,.98) 0%, rgba(15,12,9,.92) 38%, rgba(15,12,9,.30) 77%, rgba(15,12,9,.48) 100%),
    url('assets/img/recode-neural-ring-v2.webp') 72% center / cover no-repeat;
}
.method-hero-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 74% 51%, transparent 0 24%, rgba(10,8,6,.22) 48%, rgba(10,8,6,.58) 100%);
}
.method-hero-art .mh-grid { position: relative; z-index: 1; }
.method-hero-art .orbit.hero-orbit {
  filter: drop-shadow(0 24px 58px rgba(0,0,0,.58));
}

/* About: credentials read as evidence, not a row of badges. */
.work-behind .disc-row {
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(34px, 5vw, 76px);
}
.work-behind .disc {
  display: grid; grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto; column-gap: 18px;
  text-align: left; padding: 22px 0; border-bottom: 1px solid var(--line);
}
.work-behind .disc-icon { grid-row: 1 / 3; margin: 0; }
.work-behind .disc-name { color: var(--ink); margin-bottom: 7px; }
.disc-note { font-size: 13px; line-height: 1.58; color: var(--ink-muted); }
.live-work.dark { border-top-color: var(--line-dk); }
.live-work.dark .ab-title { color: var(--paper-ink); }
.live-work.dark .ab-pull { color: var(--bronze-lt); }
.live-work.dark .lw-list li { color: var(--paper-soft); border-color: var(--line-dk); }
.live-work.dark .lw-note {
  background: transparent; border: 1px solid rgba(194,161,115,.44);
  color: var(--bronze-lt);
}

/* Immersion: title the three phases, then alternate dark / pale / dark. */
.imm-time-head { max-width: 760px; margin: 0 auto clamp(52px, 6vw, 82px); }
.imm-time-head .section-title { color: var(--paper-ink); margin: 12px 0 14px; }
.imm-time-head .section-title em { font-style: normal; color: var(--bronze-lt); }
.imm-time-head > p:last-child {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.7vw, 22px); color: var(--paper-soft);
}
.imm-baseline .declare-list { color: var(--ink); }
.imm-baseline .declare-list span:last-child { color: var(--bronze-dp); }
.imm-baseline .lede { color: var(--ink-soft); }
.commitment-dark .split-copy { background: var(--ink-bg); color: var(--paper-soft); }
.commitment-dark .section-title { color: var(--paper-ink); }
.commitment-dark .offer > p { color: var(--paper-soft) !important; }
.commitment-dark .offer li { color: var(--paper-soft); border-color: var(--line-dk); }
.commitment-dark .split-img { filter: saturate(.82) brightness(.72) contrast(1.08); }

@media (max-width: 980px) {
  .method-hero-art { background-position: 66% center; }
  .method-hero-art::after { background: rgba(10,8,6,.48); }
  .work-behind .disc-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .work-behind .disc { grid-template-columns: 38px 1fr; column-gap: 14px; }
  .work-behind .disc-icon svg { width: 30px; height: 30px; }
}

/* Problem → Solution: the visual turn Caroline asked for. The storm image
   holds the repeating pattern in darkness; the next section opens into light. */
.problem-atmosphere {
  position: relative; overflow: hidden;
  background: var(--ink-bg) url('assets/img/problem-clouds-v2.webp') center / cover no-repeat;
}
.problem-atmosphere::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(14,11,8,.76) 0%, rgba(14,11,8,.54) 52%, rgba(14,11,8,.28) 100%),
    linear-gradient(180deg, rgba(10,8,6,.36), rgba(10,8,6,.72));
}
.problem-atmosphere .wrap { position: relative; z-index: 1; }
.sol-band .ph.solution-sky {
  background-image:
    linear-gradient(90deg, rgba(21,17,13,.08), rgba(21,17,13,.16)),
    url('assets/img/solution-sunlight-v2.webp');
  background-position: center;
  filter: saturate(.76) contrast(1.04);
}
.problem-atmosphere + .sol-band { border-top: 1px solid rgba(194,161,115,.35); }

@media (max-width: 860px) {
  .problem-atmosphere { background-position: 52% center; }
  .sol-band .ph.solution-sky { background-position: 42% center; }
}

/* =========================================================
   20 AUG · SUPPLIED VISUAL REFERENCES
   These compositions follow Caroline's four final screenshots directly.
   ========================================================= */

/* Home / Solution: one continuous cinematic photograph, with Caroline held
   left and every line of copy contained in the dark right-hand field. */
.sol-band {
  min-height: clamp(620px, 44.7vw, 920px);
  background: #2a2119;
  color: var(--paper-ink);
  display: flex;
  align-items: center;
}
.sol-band .ph.solution-sky {
  width: 100%;
  background-image: url('assets/img/caroline-solution-wide.webp');
  background-position: 20% 35%;
  background-size: 122% auto;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.sol-band .ph.solution-sky::after { display: none; }
.sol-band .wrap {
  width: 100%; max-width: none;
  display: grid; grid-template-columns: 45% 55%;
  padding-inline: clamp(24px, 4vw, 76px);
}
.sol-band .copy {
  grid-column: 2;
  width: 100%; max-width: 740px;
  margin: 0 !important;
  padding-left: clamp(22px, 3vw, 58px);
}
.sol-band .section-title.sm {
  font-size: clamp(43px, 5.1vw, 72px);
  line-height: .98;
}
.sol-band .pb-line { color: var(--paper-soft); }
.sol-band .sol-that { color: var(--paper-mut); }
.sol-band .sol-name { color: var(--paper-ink); }
.sol-band .sol-sub { color: var(--paper-mut); }

/* Method: keep the Loop legible on black and use the product scene shown. */
.method-hero-art { background: var(--ink-bg); }
.method-hero-art::after { display: none; }
.explore .ph.explore-product {
  background-image: url('assets/img/explore-your-loop-tablet.webp');
  background-position: center;
  background-size: cover;
}

/* Immersion: one rounded cream-to-black composition, as supplied. */
.imm-composition {
  width: min(1500px, calc(100% - clamp(28px, 5vw, 82px)));
  max-width: 1500px;
  margin: clamp(18px, 3vw, 44px) auto clamp(68px, 8vw, 118px);
  border-radius: clamp(18px, 2.4vw, 34px);
  overflow: hidden;
  box-shadow: 0 28px 90px -58px rgba(28,20,12,.52);
}
.imm-composition .imm-open {
  grid-template-columns: 1.12fr .88fr;
  min-height: 820px;
  background: var(--paper);
}
.imm-composition .imm-open .split-copy {
  padding: clamp(58px, 7vw, 104px);
}
.imm-composition .imm-open .split-img {
  background-size: cover;
  background-position: 49% center !important;
}
.imm-composition .imm-time {
  padding-block: clamp(70px, 8vw, 112px);
}
.imm-composition .imm-time-head { margin-bottom: clamp(42px, 5vw, 66px); }

/* Science: the six cards return to Caroline's two-row, three-column board. */
.deck-section { overflow: visible; }
.deck { --dc-open: auto; }
.deck-mask {
  overflow: visible;
  padding: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.deck-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  transform: none !important;
}
.deck-card,
.deck-card.open {
  width: 100%;
  height: auto;
  min-height: 570px;
  cursor: default;
  border-radius: 8px;
  box-shadow: 0 20px 48px -42px rgba(26,22,18,.5);
}
.deck-inner {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(190px, 42%) 1fr;
  opacity: 1;
}
.dc-copy {
  order: 2;
  padding: clamp(24px, 2.5vw, 36px);
}
.dc-art {
  order: 1;
  border-left: 0;
  border-bottom: 1px solid var(--line);
}
.dc-plate { max-height: 230px; padding: 18px; }
.dc-svg { width: min(58%, 190px); }
.dc-title { font-size: clamp(24px, 2.15vw, 31px); }
.deck-arrow,
.deck-dots { display: none !important; }

@media (max-width: 980px) {
  .imm-composition { width: calc(100% - 36px); margin-inline: auto; }
  .imm-composition .imm-open { grid-template-columns: 1fr; min-height: 0; }
  .imm-composition .imm-open .split-img { order: -1; min-height: 58vh; }
  .deck-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .sol-band { display: block; min-height: 0; }
  .sol-band .ph.solution-sky { width: 100%; height: 58vh; background-position: 24% center; background-size: cover; }
  .sol-band .wrap { display: block; padding-inline: var(--gutter); }
  .sol-band .copy { max-width: 680px; margin-inline: auto !important; padding-left: 0; }
}

@media (max-width: 620px) {
  .sol-band .ph.solution-sky { width: 100%; height: 62vh; background-position: 24% center; }
  .sol-band .section-title.sm { font-size: clamp(40px, 13vw, 58px); }
  .imm-composition { width: calc(100% - 20px); margin-inline: auto; border-radius: 18px; }
  .imm-composition .imm-open .split-copy { padding: 48px 24px 58px; }
  .deck-rail { grid-template-columns: 1fr; }
  .deck-card, .deck-card.open { min-height: 0; }
}