/* =========================================================
   emi wong — old bookshop, golden hour, quiet magic
   ========================================================= */

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

fieldset { border: 0; }

ul,
ol { list-style: none; }

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

button,
input,
textarea,
select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

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

/* ---------- design tokens — aged paper, golden hour, sepia ink ---------- */
:root {
  /* paper & ink */
  --paper:        #f2e9d8;   /* aged paper cream */
  --paper-light:  #f7efde;   /* sunlit page */
  --paper-deep:   #e9dfc8;   /* shadowed margin */
  --ink:          #3b2e22;   /* warm dark sepia, faded fountain pen */
  --ink-soft:     rgba(59, 46, 34, 0.78);
  --ink-mute:     rgba(59, 46, 34, 0.58);

  /* accents */
  --rose:         #c99b92;   /* dusty rose — italic emphasis */
  --rose-deep:    #b87c72;   /* hover / interactive states only */
  --gold:         #b8946b;   /* champagne gold — hairlines, marks */
  --gold-soft:    rgba(184, 148, 107, 0.55);
  --warm-brown:   #8b6f5e;   /* labels — quiet, brown not gold */
  --indigo:       #6b6d8a;   /* muted indigo — tiny details only */
  --sage:         #9aa18a;   /* soft sage — backup link tone */

  /* iridescent — used ONCE on the page */
  --iri-1: #f8d5d8;
  --iri-2: #d5c6e8;
  --iri-3: #e8d4a8;
  --iri-4: #c8e0d2;

  /* type */
  --display:    "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --body:       "EB Garamond", "Cormorant Garamond", "Crimson Pro", Georgia, serif;
  --script:     "Pinyon Script", "Italianno", "Petit Formal Script", cursive;

  /* book-scale type ladder — display moments are LARGE */
  --fs-xs:      0.78125rem;
  --fs-sm:      0.95rem;
  --fs-base:    1.0625rem;
  --fs-md:      clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --fs-lg:      clamp(1.3125rem, 1.1rem + 1vw, 1.625rem);
  --fs-xl:      clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem);
  --fs-2xl:     clamp(2.125rem, 1.5rem + 2.8vw, 3.25rem);
  --fs-3xl:     clamp(2.625rem, 1.7rem + 4vw, 4.5rem);
  --fs-script:  clamp(3rem, 2rem + 5vw, 5.5rem);

  /* spacing — book margins */
  --space-1:    0.375rem;
  --space-2:    0.75rem;
  --space-3:    1.25rem;
  --space-4:    1.875rem;
  --space-5:    2.75rem;
  --space-6:    4rem;
  --space-7:    6rem;
  --space-8:    9rem;
  --space-section: clamp(2.5rem, 1.75rem + 2vw, 4rem);   /* 40 → 64px */

  /* layout */
  --measure:        34em;     /* book reading width */
  --measure-wide:   42em;
  --container:      1040px;
  --container-page: 720px;    /* page-like inner width */

  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- base — fresh cream paper, light grain ---------- */
body {
  background-color: #f5eddd;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='paper'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23paper)'/></svg>");
  background-blend-mode: multiply;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* golden hour light — screen blend ADDS light instead of darkening */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 700px at 25% 10%, rgba(255, 240, 210, 0.6), transparent 60%),
    radial-gradient(ellipse 700px 900px at 80% 95%, rgba(255, 220, 200, 0.3), transparent 65%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* subtle vignette — depth like the inside of an open book */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(140, 100, 70, 0.08) 100%);
}

main { position: relative; z-index: 2; }

::selection {
  background: var(--rose);
  color: var(--paper-light);
}

.serif    { font-family: var(--display); }
.italic   { font-style: italic; }
.script   { font-family: var(--script); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.container-page {
  width: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.container-narrow {
  width: 100%;
  max-width: 38em;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 640px) {
  .container,
  .container-page,
  .container-narrow {
    padding-inline: 2.25rem;
  }
}

/* ---------- dust motes — golden flecks drifting through sunlight ---------- */
.motes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.mote {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 148, 107, 0.55), rgba(184, 148, 107, 0) 70%);
  opacity: 0;
  animation: float linear infinite;
  filter: blur(0.5px);
}

@keyframes float {
  0%   { transform: translate3d(0, 110vh, 0) translateX(0); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.5; }
  100% { transform: translate3d(0, -10vh, 0) translateX(40px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mote { animation: none; }
}

/* ---------- scroll reveal — 700ms slow remembrance ---------- */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.26s; }
.reveal[data-delay="3"] { transition-delay: 0.42s; }
.reveal[data-delay="4"] { transition-delay: 0.6s; }
.reveal[data-delay="5"] { transition-delay: 0.78s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- nav ---------- */
.site-nav {
  background-color: rgba(242, 233, 216, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(184, 148, 107, 0.2);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  gap: var(--space-3);
}

.site-nav__brand {
  font-family: var(--display);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.site-nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  padding: 0;
}

.site-nav__toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background-color: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav__links {
  display: none;
  flex-direction: column;
  padding-block: var(--space-2);
  border-top: 1px solid rgba(184, 148, 107, 0.2);
}

.site-nav__links.is-open { display: flex; }

.site-nav__links a {
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: var(--fs-sm);
  padding-block: 0.5rem;
  letter-spacing: 0.04em;
  transition: color 0.3s ease;
}

.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  color: var(--rose-deep);
}

@media (min-width: 820px) {
  .site-nav__toggle { display: none; }

  .site-nav__links {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
    padding-block: 0;
    border-top: 0;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  background-color: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
  padding: 0.875rem 2rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  transition: all 0.45s var(--ease);
  text-align: center;
  line-height: 1.3;
  position: relative;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(184, 148, 107, 0.08), rgba(201, 155, 146, 0.08));
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.btn:hover {
  border-color: var(--rose-deep);
  color: var(--rose-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(184, 148, 107, 0.2);
}

.btn:hover::before { opacity: 1; }

.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.btn--block { width: 100%; }

.btn--lg {
  padding: 1rem 2.25rem;
  font-size: var(--fs-md);
}

/* ---------- labels ---------- */
.label {
  display: inline-block;
  color: #8b6f5e;
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  margin-bottom: var(--space-3);
}

/* ---------- gold hairline divider (slightly imperfect) ---------- */
.rule {
  display: block;
  width: 80px;
  height: 1px;
  margin: var(--space-4) auto;
  background: linear-gradient(to right, transparent, var(--gold) 35%, var(--gold) 65%, transparent);
  opacity: 0.7;
  border: 0;
}

/* ---------- hero — compact opening, content + reduced padding ---------- */
.hero {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--space-6) var(--space-5);
  position: relative;
  /* enough height that the warm bloom never crops, but compact so the
     gap to the next section stays tight */
  min-height: clamp(300px, 38vh, 400px);
}

.hero__inner {
  width: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.hero__lead {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);  /* 40px → 72px */
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.012em;
  text-align: center;
  max-width: 44rem;                                /* ~700px */
  margin-inline: auto;
}

.hero__lead .line {
  display: block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.8s var(--ease), transform 1.8s var(--ease);
}

.hero__lead .line + .line {
  margin-top: 0.12em;       /* rhythmic, breath-to-breath */
}

.hero__lead.is-in .line { opacity: 1; transform: none; }
.hero__lead.is-in .line:nth-child(1) { transition-delay: 0.3s; }
.hero__lead.is-in .line:nth-child(2) { transition-delay: 1.8s; }
.hero__lead.is-in .line:nth-child(3) { transition-delay: 3.5s; }

/* ---------- emphasis-scroll — phrase glows like ink drying onto paper when scrolled past ---------- */
.emphasis-scroll {
  color: #c99b92;
  font-style: italic;
  position: relative;
  display: inline;
}

.emphasis-scroll.visible {
  animation: shimmerIn 1.6s ease-out forwards;
}

@keyframes shimmerIn {
  0% {
    text-shadow: 0 0 0 transparent;
    filter: brightness(1);
  }
  50% {
    text-shadow: 0 0 30px rgba(255, 200, 150, 0.7);
    filter: brightness(1.15);
  }
  100% {
    text-shadow: 0 0 18px rgba(232, 200, 180, 0.35);
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .emphasis-scroll.visible { animation: none; text-shadow: 0 0 18px rgba(232, 200, 180, 0.35); }
}

/* ---------- iridescent kiss — one word only ("boundless"), soft opal cycle ---------- */
.iridescent-kiss {
  background: linear-gradient(90deg,
    #c99b92, #b89494, #c9a8b8, #b8a8c9, #a8b8c9, #c9b8a8, #c99b92);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: "Pinyon Script", cursive;
  font-style: normal;
  font-size: 1.4em;
  line-height: 0.9;
  display: inline-block;
  vertical-align: -0.06em;
  animation: iridescentShift 8s ease-in-out infinite;
}

@keyframes iridescentShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .iridescent-kiss { animation: none; }
}

/* ---------- handwriting — intentional intimate moments ---------- */
.handwritten {
  font-family: "Pinyon Script", cursive;
  font-style: normal;
  font-weight: 400;
  color: #c99b92;
  text-shadow: 0 0 16px rgba(232, 200, 180, 0.35);
}

.handwritten--md { font-size: 1.18em; display: inline-block; }
.handwritten--lg {
  font-size: 1.55em;
  line-height: 0.85;
  display: inline-block;
  vertical-align: -0.06em;
}

/* "boundless" — Pinyon Script, 1.4em, dusty rose, stays on the line with "self" */
.boundless-phrase { white-space: nowrap; }

@media (max-width: 600px) {
  .boundless-phrase { white-space: normal; }
}

.handwritten-boundless {
  font-family: "Sacramento", "Allura", cursive;
  font-style: normal;
  font-weight: 400;
  color: #c99b92;
  font-size: 1.3em;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-shadow: 0 0 16px rgba(232, 200, 180, 0.35);
  display: inline-block;
  vertical-align: -0.08em;
}

/* "yours." floating quiet word under the "per month" title */
.yours-mark {
  display: block;
  font-family: "Pinyon Script", cursive;
  font-style: normal;
  color: #c99b92;
  text-shadow: 0 0 16px rgba(232, 200, 180, 0.35);
  font-size: clamp(2.25rem, 1.7rem + 1.5vw, 2.75rem);
  line-height: 1;
  margin-top: -0.5rem;
  margin-bottom: var(--space-4);
}

/* "— emi" signature at the very end of the page after the form */
.signoff {
  text-align: center;
  margin-top: var(--space-5);
  font-family: "Pinyon Script", cursive;
  font-style: normal;
  color: #c99b92;
  text-shadow: 0 0 16px rgba(232, 200, 180, 0.35);
  font-size: clamp(2rem, 1.5rem + 1.2vw, 2.5rem);
  line-height: 1;
}

/* hero "you" — signed-quality, large, rotated */
.hero__lead .handwritten,
.hero__lead .script {
  font-family: "Pinyon Script", cursive;
  font-style: normal;
  font-size: 1.45em;
  color: #c99b92;
  text-shadow: 0 0 18px rgba(232, 200, 180, 0.4);
  line-height: 0.8;
  padding-right: 0.18em;
  vertical-align: -0.1em;
  display: inline-block;
  transform: translateY(0.05em) rotate(-2deg);
}

/* ---------- hero light particles — sunlight pooling in corners ---------- */
.hero {
  position: relative;
  overflow: hidden;
}

.hero__inner,
.hero__scroll-cue { position: relative; z-index: 2; }

.hero::before {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 170, 0.55) 0%, rgba(255, 200, 150, 0.2) 40%, transparent 70%);
  filter: blur(40px);
  top: 5%;
  left: 0%;
  animation: drift1 20s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

/* (rose blob moved out of hero — it was clipping. now lives as .floating-blob below.) */

/* floating warm-rose blob — lives between sections (positioned via wrapper) */
.floating-blob {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  z-index: 1;
}

.floating-blob--rose {
  background: radial-gradient(circle, rgba(255, 180, 180, 0.4) 0%, rgba(220, 150, 140, 0.15) 40%, transparent 70%);
  animation: drift2 24s ease-in-out infinite alternate;
}

.floating-blob-anchor {
  position: relative;
  width: 100%;
  height: 0;
  overflow: visible;
  z-index: 1;
}

.floating-blob-anchor--right .floating-blob {
  top: -120px;
  right: 4%;
}

@keyframes drift1 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(60px, 80px); }
}

@keyframes drift2 {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-50px, -60px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}


/* ---------- shimmer divider — page's single moment of pure light ---------- */
.shimmer-divider {
  height: 1px;
  width: 50%;
  max-width: 400px;
  margin: 100px auto;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 155, 146, 0.6) 25%,
    rgba(184, 148, 107, 0.9) 50%,
    rgba(201, 155, 146, 0.6) 75%,
    transparent 100%);
  position: relative;
}

.shimmer-divider::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: inherit;
  filter: blur(6px);
  opacity: 0.7;
  animation: shimmerPulse 4s ease-in-out infinite;
}

@keyframes shimmerPulse {
  0%, 100% { opacity: 0.4; transform: scaleX(0.9); }
  50%      { opacity: 1;   transform: scaleX(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .shimmer-divider::before { animation: none; opacity: 0.6; }
}

.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  transition-delay: 5s;
}

.hero__lead.is-in ~ .hero__scroll-cue { opacity: 0.85; }

.hero__scroll-cue::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollHint 2.6s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollHint {
  0%, 100% { transform: scaleY(0.4); opacity: 0.3; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* ---------- chapters — each major moment is its own page ---------- */
.chapter {
  display: grid;
  place-items: center;
  padding-block: var(--space-section);
  position: relative;
}

.chapter__inner {
  width: 100%;
  max-width: 44rem;             /* ~700px reading width */
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* pain mirror — one flowing thought, left-aligned for natural reading rhythm */
.mirror {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.125rem, 0.95rem + 0.85vw, 1.625rem);  /* 18 → 26px */
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 38rem;       /* ~608px */
  margin-inline: auto;
  text-align: left;
}

.mirror .stanza { display: block; }
.mirror .stanza + .stanza { margin-top: 0; }    /* prose flow, no extra gap */

.mirror__cap {
  display: block;
  margin-top: var(--space-5);
  text-align: center;        /* pulled out + centered — a beat apart from the left-aligned stanzas */
  color: var(--ink);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.6rem);   /* a larger emotional moment */
  line-height: 1.24;
  letter-spacing: -0.01em;
}
.mirror__cap-soft {
  display: block;
  margin-top: 0.32em;
  font-size: 0.64em;
  color: var(--rose);
  text-shadow: 0 0 16px rgba(232, 200, 180, 0.35);
}

/* "what if" — centered, one unit, tight stacking */
.whatif {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.85rem, 1.45rem + 1.4vw, 2.375rem);  /* 30 → 38px — fits the longer last line */
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.008em;
  max-width: 42rem;                                       /* widened so long line fits one row */
  margin-inline: auto;
  text-align: center;
}

.whatif .line { display: block; }
.whatif .line + .line { margin-top: 0.08em; }

/* the longest line — force one row on tablet+, allow wrap on small phones */
.whatif__nowrap { white-space: nowrap; }
@media (max-width: 540px) {
  .whatif__nowrap { white-space: normal; }
}

/* "you are allowed" — centered permission, with iridescent moment */
.allowed {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem);
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
  letter-spacing: -0.005em;
}

.allowed .line { display: block; }
.allowed .line + .line { margin-top: 0.18em; }

/* dusty-rose emphasis — readable, italic, soft warm glow.
   covers all phrase emphasis: "boundless self", "it's not",
   "life to be beyond your imagination", "power within",
   "the spark you've forgotten was yours",
   "freedom isn't somewhere you have to move", etc. */
.iri,
.emphasis,
.how__body em,
.close__body em,
.scarcity em,
.inside__footer,
.coming-soon__note {
  color: #c99b92;
  font-style: italic;
  font-weight: inherit;
  text-shadow: 0 0 16px rgba(232, 200, 180, 0.35);
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
}

/* bio + cta */
.bio-cta {
  padding-block: var(--space-section);
  text-align: center;
}

.bio-cta__bio {
  font-family: var(--body);
  font-size: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);   /* 18 → 20px */
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34rem;                                    /* ~544px */
  margin-inline: auto;
  margin-bottom: var(--space-4);
  text-align: center;
}

.bio-cta__bio em {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.12em;
  color: var(--ink);
}

/* ---------- testimonials — vintage photos pinned to a journal ---------- */
.testimonials {
  padding-block: var(--space-6);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 across on mobile; 3 on desktop (below) */
  gap: var(--space-2);
}

.testimonials__grid--4 { grid-template-columns: 1fr; }

.testimonial {
  overflow: visible;
  background-color: transparent;
  transition: transform 0.7s var(--ease);
}

.testimonial img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.7s var(--ease);
}

/* keepsake-card treatment — visible white paper edge around each photo */
.testimonial img,
[class*="testimonial"] img {
  filter: sepia(0.15) saturate(0.95) brightness(1.06) contrast(0.96) !important;
  box-shadow:
    0 4px 8px rgba(120, 90, 60, 0.12),
    0 12px 32px rgba(120, 90, 60, 0.22),
    inset 0 0 0 1px rgba(170, 140, 100, 0.35) !important;
  border-radius: 2px !important;
  background-color: #ffffff;     /* clear paper edge contrasts with cream page */
  padding: 12px 12px 28px 12px;  /* polaroid — wider bottom edge */
  box-sizing: border-box;
}

/* varied subtle rotations + position offsets — like cards placed by hand */
.testimonial:nth-child(1) img { transform: rotate(-1.2deg) translateY(4px); }
.testimonial:nth-child(2) img { transform: rotate(0.8deg)  translateY(-2px); }
.testimonial:nth-child(3) img { transform: rotate(-0.5deg) translateY(6px); }
.testimonial:nth-child(4) img { transform: rotate(1.5deg)  translateY(-4px); }
.testimonial:nth-child(5) img { transform: rotate(-0.9deg) translateY(2px); }
.testimonial:nth-child(6) img { transform: rotate(0.6deg)  translateY(-3px); }

/* hover — straightens, lifts, deeper warm shadow */
.testimonial img:hover {
  transform: rotate(0deg) translateY(-8px) !important;
  box-shadow:
    0 8px 16px rgba(120, 90, 60, 0.15),
    0 20px 50px rgba(120, 90, 60, 0.25),
    inset 0 0 0 1px rgba(200, 175, 140, 0.35) !important;
}

.testimonials__more {
  display: block;
  text-align: center;
  margin-top: var(--space-5);
  color: var(--gold);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  transition: color 0.3s ease;
}

.testimonials__more:hover { color: var(--rose-deep); }

@media (min-width: 720px) {
  .testimonials__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .testimonials__grid--4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

@media (min-width: 1024px) {
  .testimonials__grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 2nd testimonials section ---------- */
/* laptop/desktop: original 4-column mixed (cols 2 & 3 are stacked pairs) */
.testimonials__grid--mixed {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.testimonials__stack {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .testimonials__grid--mixed {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: start;
    gap: var(--space-3);
  }
}
/* mobile: tight 2-column masonry, packs without row gaps */
.testimonials__masonry {
  column-count: 2;
  column-gap: var(--space-2);
}
.testimonials__masonry .testimonial {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 var(--space-2);
}
/* show the laptop layout vs the mobile layout per viewport */
.t-mobile-only { display: none; }
@media (max-width: 719px) {
  .t-desktop-only { display: none; }
  .t-mobile-only { display: block; }
}


/* ---------- press band — cream, quiet warm-brown logos ---------- */
.press {
  background-color: transparent;                  /* shows the page cream + grain */
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  text-align: center;
}

.press__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 2vw + 0.5rem, 3.25rem);
  row-gap: clamp(1.25rem, 1.5vw + 0.5rem, 2rem);
}

@media (max-width: 640px) {
  .press__row { justify-content: space-around; }
}

.press__logo {
  display: inline-block;
  width: auto;
  color: var(--ink);            /* #3b2e22 — same warm sepia as the "what if" headline */
  opacity: 0.55;
  transition: opacity 0.4s var(--ease);
}

.press__logo:hover { opacity: 0.85; }

/* heights ~25% smaller than before — quieter presence */
.press__logo--forbes       { height: 60px; width: 60px; }
.press__logo--tedx         { height: 42px; width: 42px; }
.press__logo--tatler       { height: 48px; width: 48px; }
.press__logo--scmp         { height: 64px; width: 64px; }
.press__logo--marieclaire  { height: 24px; width: 96px; }
.press__logo--cosmopolitan { height: 32px; width: 96px; }

@media (min-width: 640px) {
  .press__logo--forbes       { height: 78px;  width: 78px; }
  .press__logo--tedx         { height: 54px;  width: 54px; }
  .press__logo--tatler       { height: 62px;  width: 62px; }
  .press__logo--scmp         { height: 80px;  width: 80px; }
  .press__logo--marieclaire  { height: 32px;  width: 128px; }
  .press__logo--cosmopolitan { height: 42px;  width: 128px; }
}

@media (min-width: 900px) {
  .press__logo--forbes       { height: 96px; width: 96px; }
  .press__logo--tedx         { height: 66px; width: 66px; }
  .press__logo--tatler       { height: 76px; width: 76px; }
  .press__logo--scmp         { height: 99px; width: 99px; }
  .press__logo--marieclaire  { height: 38px; width: 152px; }
  .press__logo--cosmopolitan { height: 48px; width: 144px; }
}

/* ---------- inside (what's inside) ---------- */
.inside { padding-block: var(--space-section); }

.inside__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-xl);
  color: var(--ink);
  margin-bottom: var(--space-5);
  letter-spacing: -0.005em;
}

.inside__list { display: grid; gap: 0; }

.inside__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid rgba(184, 148, 107, 0.22);
}

.inside__item:last-child { border-bottom: 0; }

.inside__num {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--gold);
  letter-spacing: 0.04em;
}

.inside__body { display: flex; flex-direction: column; gap: 0.4rem; }

.inside__name {
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
}

.inside__desc {
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-soft);
}

.inside__footer {
  margin-top: var(--space-5);
  font-family: var(--display);
  font-style: italic;
  color: var(--rose-deep);
  font-size: var(--fs-md);
  line-height: 1.55;
  max-width: 34em;
}

@media (min-width: 640px) {
  .inside__item {
    grid-template-columns: 3.5rem 1fr;
    gap: var(--space-4);
  }
}

/* ---------- how we work ---------- */
.how { padding-block: var(--space-section); }

.how__body {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 22em;
  margin-inline: auto;
  text-align: left;
  letter-spacing: -0.005em;
}

.how__body p + p { margin-top: var(--space-4); }

.how__body em {
  font-style: italic;
  color: var(--rose);
  font-size: 1.05em;
}

/* ---------- investment ---------- */
.investment { padding-block: var(--space-section); }

.investment__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.invest-card {
  background-color: transparent;
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  padding: var(--space-4) var(--space-4);
  display: grid;
  gap: 0.5rem;
  transition: border-color 0.4s ease;
}

.invest-card:hover {
  border-color: var(--rose);
}

.invest-card__tier {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: lowercase;
}

.invest-card__price {
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
}

.invest-card__note {
  font-family: var(--body);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  font-style: italic;
}

.investment__note {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: 34em;
  margin-top: var(--space-3);
  line-height: 1.55;
}

@media (min-width: 720px) {
  .investment__cards { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}

/* ---------- close — last page of a book ---------- */
.close {
  padding-block: var(--space-section) var(--space-5);
}

.close__body {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 24em;
  margin-inline: auto;
  letter-spacing: -0.005em;
}

.close__body p + p { margin-top: var(--space-4); }

.close__body em {
  font-style: italic;
  color: var(--rose);
}

/* ---------- form ---------- */
/* ---------- scarcity copy above the form ---------- */
.scarcity {
  padding-block: 0 var(--space-4);
  color: var(--ink-soft);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);   /* 16 → 17px */
  line-height: 1.6;
  max-width: 32em;
  margin-inline: auto;
  text-align: center;
}

/* ---------- form section — clear visual container with section label ---------- */
.form-section {
  padding-block: 80px 60px;        /* 120px gap from close section above */
}

@media (max-width: 640px) {
  .form-section { padding-block: 48px 36px; }
}

.form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 60px 32px;
  border-top: 1px solid rgba(184, 148, 107, 0.25);
  border-bottom: 1px solid rgba(184, 148, 107, 0.25);
}

@media (max-width: 640px) {
  .form-container { padding: 40px 18px; }
}

.form-section__label {
  display: block;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: #8b6f5e;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  margin-bottom: 1.75rem;
}

.form-section__cta {
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);   /* 17 → 18px */
  color: #8b6f5e;
  line-height: 1.6;
  max-width: 30em;
  margin: 0 auto 2.25rem;
}

.form {
  max-width: 30em;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field__label {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  line-height: 1.4;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field textarea {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(184, 148, 107, 0.4);
  padding: 0.5rem 0;
  font-family: var(--body);
  font-size: var(--fs-base);
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.3s ease;
  width: 100%;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--rose-deep);
}

.field textarea {
  resize: vertical;
  min-height: 4.5rem;
  line-height: 1.55;
  display: block;
}

.field__radios {
  display: flex;
  flex-direction: column;
  margin-top: 0.25rem;
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  padding-block: 0.3rem;
  font-family: var(--body);
  font-size: var(--fs-base);
  color: var(--ink);
}

.radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}

.radio input:checked { border-color: var(--rose-deep); }

.radio input:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background-color: var(--rose-deep);
  border-radius: 50%;
}

.form__submit {
  margin-top: var(--space-3);
  justify-self: start;
}

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  z-index: 2;
  padding-block: var(--space-4);
  border-top: 1px solid rgba(184, 148, 107, 0.2);
  text-align: center;
  color: var(--ink-mute);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}

.site-footer__links {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.site-footer__links a { transition: color 0.3s ease; }
.site-footer__links a:hover { color: var(--rose-deep); }

.site-footer__copyright {
  font-family: var(--body);
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}

/* ---------- sub-pages ---------- */
.subpage {
  padding-block: var(--space-7) var(--space-6);
  min-height: 70vh;
}

.subpage__inner {
  max-width: 32em;
  margin-inline: auto;
}

.subpage__lead {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

.subpage__body {
  font-family: var(--body);
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--ink-soft);
}

.subpage__body p + p { margin-top: var(--space-3); }
.subpage__body em { font-style: italic; }

.subpage__list {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.subpage__list li { line-height: 1.7; color: var(--ink-soft); }

.subpage__divider {
  border: 0;
  border-top: 1px solid var(--gold-soft);
  margin-block: var(--space-6);
  max-width: 80px;
  margin-inline: auto;
}

.subpage__cta-line {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--ink);
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.subpage__cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.subpage__step {
  font-family: var(--display);
  font-style: italic;
  color: var(--gold);
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  margin-bottom: var(--space-2);
}

.subpage__sign {
  margin-top: var(--space-6);
  font-family: var(--script);
  color: var(--rose-deep);
  font-size: clamp(2.5rem, 1.8rem + 2vw, 3.5rem);
  line-height: 1;
}

.subpage__small {
  font-family: var(--body);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  font-style: italic;
  line-height: 1.65;
  margin-top: var(--space-2);
}

/* ---------- thank-you page (post-application) ---------- */
.thank-you-page {
  min-height: calc(100vh - 8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) 1.5rem;
}

.thank-you {
  max-width: 36em;
  text-align: center;
}

.thank-you__lead {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 1.6rem + 3.5vw, 4rem);    /* 40 → 64px */
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin-bottom: var(--space-5);
}

.thank-you__body {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.375rem, 1.15rem + 0.85vw, 1.625rem);   /* 22 → 26px */
  line-height: 1.55;
  color: #c99b92;
  max-width: 24em;
  margin: 0 auto;
}

.thank-you__sign {
  font-family: "Pinyon Script", cursive;
  font-style: normal;
  color: #c99b92;
  text-shadow: 0 0 16px rgba(232, 200, 180, 0.35);
  font-size: clamp(2.25rem, 1.85rem + 1.2vw, 2.625rem);     /* ~36 → 42px */
  line-height: 1;
  margin-top: var(--space-7);                                /* generous space above */
}

/* ---------- coming soon ---------- */
.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding-block: var(--space-7);
}

.coming-soon__label {
  color: var(--gold);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-sm);
  letter-spacing: 0.24em;
  margin-bottom: var(--space-3);
}

.coming-soon__title {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.coming-soon__note {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--rose-deep);
  max-width: 26em;
}

/* ---------- inline field validation (missing-field highlight + soft error) ---------- */
.field-missing {
  border-color: #c99b92 !important;
  box-shadow: 0 1px 0 0 rgba(201, 155, 146, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-error {
  display: block;
  margin-top: 6px;
  color: #c99b92;
  font-family: var(--display);
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
}

/* ---------- form agreement checkbox + inline error ---------- */
.form-agreement {
  margin-top: var(--space-2);
}

.checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.checkbox-container input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid var(--warm-brown);
  background-color: transparent;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  margin-top: 0.22rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.checkbox-container input[type="checkbox"]:checked {
  border-color: #c99b92;
  background-color: #c99b92;
}

.checkbox-container input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border-right: 1.5px solid #faf3e6;
  border-bottom: 1.5px solid #faf3e6;
  transform: rotate(45deg);
}

.checkbox-text {
  font-family: var(--body);
  font-style: italic;
  font-size: 14.5px;
  color: var(--warm-brown);
  line-height: 1.55;
}

.checkbox-text a {
  color: #c99b92;
  text-decoration: underline;
  text-decoration-color: rgba(201, 155, 146, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.3s ease, color 0.3s ease;
}

.checkbox-text a:hover {
  text-decoration-color: #c99b92;
  color: var(--rose-deep);
}

.form-agreement__error {
  display: block;
  margin-top: 0.5rem;
  margin-left: 1.75rem;
  color: var(--rose-deep);
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.form-agreement__error.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- terms page ---------- */
.terms-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-6) 1.5rem var(--space-8);
}

@media (min-width: 640px) {
  .terms-page { padding-inline: 2.25rem; }
}

.terms-page h1 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.875rem);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.terms-page__org {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}

.terms-page__updated {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-mute);
  margin-bottom: var(--space-4);
}

.terms-page__intro {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.terms-page h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

.terms-page h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.terms-page p,
.terms-page li {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}

.terms-page p { margin-bottom: var(--space-3); }

.terms-page ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--space-3);
}

.terms-page ul li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
}

.terms-page ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}

.terms-page strong {
  font-weight: 500;
  color: var(--ink);
}

.terms-page em {
  font-style: italic;
  color: var(--ink-soft);
}

.terms-page hr {
  border: 0;
  border-top: 1px solid var(--gold-soft);
  margin: var(--space-5) auto;
  max-width: 100px;
}

.terms-page__footer {
  margin-top: var(--space-6);
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 0.95rem;
  line-height: 1.7;
}

.terms-page__footer p { margin-bottom: 0.25rem; }

.terms-page__footer a {
  color: var(--rose);
  text-decoration: underline;
  text-decoration-color: rgba(201, 155, 146, 0.4);
  text-underline-offset: 2px;
}

/* ======================================================
   her boundless circle — sister sales page
   reuses the homepage system; adds only what's new
   ====================================================== */

/* hero — fuller content stack than the homepage hero */
.bc-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}

.bc-hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  line-height: 1.16;
  color: var(--ink);
  letter-spacing: -0.012em;
}

.bc-hero__title .handwritten {
  font-family: "Pinyon Script", cursive;
  font-style: normal;
  font-size: 1.5em;
  color: #c99b92;
  text-shadow: 0 0 18px rgba(232, 200, 180, 0.4);
  line-height: 0.85;
  display: inline-block;
  vertical-align: -0.08em;
}

/* flowing italic serif prose — shared across BC text sections */
.bc-prose {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);   /* 20 → 24px */
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.bc-prose--narrow { max-width: 34rem; }
.bc-prose--hero  { color: var(--ink); max-width: 37rem; }

.bc-prose p { margin: 0; }
.bc-prose p + p { margin-top: var(--space-4); }

/* dusty-rose emphasis paragraph inside the flow */
.bc-prose .bc-em,
p.bc-em {
  color: var(--rose);
  font-style: italic;
  text-shadow: 0 0 16px rgba(232, 200, 180, 0.35);
  font-size: 1.05em;
}

/* the smaller attribution / byline under the hero emphasis */
.bc-byline {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--warm-brown);
  max-width: 32rem;
  margin-inline: auto;
  text-align: center;
}

/* value breakdown list */
.bc-value {
  max-width: 580px;
  margin-inline: auto;
}

.bc-value__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.65rem;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(184, 148, 107, 0.18);
}

.bc-value__item  { text-align: left; }
.bc-value__price { white-space: nowrap; color: var(--ink); }

.bc-value__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--ink);
}

.bc-value__pitch { margin-top: var(--space-5); text-align: center; }

/* pricing cards */
.bc-pricing__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-block: var(--space-5);
  max-width: 680px;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .bc-pricing__cards { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.bc-card {
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  padding: var(--space-5) var(--space-4);
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  align-content: start;
  text-align: center;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.bc-card:hover {
  border-color: var(--rose);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(184, 148, 107, 0.16);
}

.bc-card--featured {
  border-color: var(--rose);
  background: linear-gradient(160deg, rgba(201, 155, 146, 0.07), rgba(184, 148, 107, 0.04));
}

.bc-card__tier {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--gold);
  letter-spacing: 0.14em;
  text-transform: lowercase;
}

.bc-card--featured .bc-card__tier { color: var(--rose-deep); }

.bc-card__price {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.05;
}

.bc-card__note {
  font-family: var(--body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--ink-mute);
}

.bc-card__btn { margin-top: var(--space-3); width: 100%; }

.bc-pricing__fineprint {
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--warm-brown);
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.6;
}

/* close — big display question + sign-off */
.bc-close__title {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  line-height: 1.18;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

/* ---------- utility ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* =========================================================
   HER BOUNDLESS CIRCLE — its own living experience
   everything below is scoped to .bc-page so the 1:1
   homepage is never affected
   ========================================================= */

/* this page wears lantern-light, not the 1:1 page's dust */
.bc-page .motes { display: none !important; }

/* sections sit above the atmosphere layer */
.bc-page main > section { position: relative; z-index: 1; }

/* generic BC section rhythm + reading columns */
.bc-section { padding-block: var(--space-section); position: relative; }

.bc-measure {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.bc-measure--wide   { max-width: 700px; }
.bc-measure--narrow { max-width: 540px; }

/* left-sitting column with breathing space on the right */
.bc-measure--left {
  max-width: 520px;
  margin-left: 0;
  margin-right: auto;
  padding-left: clamp(1.5rem, 7vw, 7rem);
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .bc-measure { padding-inline: 2.25rem; }
  .bc-measure--left { padding-right: 2.25rem; }
}

/* ---------- CHANGE 1 — break the center axis ---------- */
.bc-page .bc-align-left { text-align: left; margin-inline: 0; }

.bc-hero--offset { place-items: center start; text-align: left; }
.bc-hero--offset .hero__inner { margin-inline: 0; max-width: 760px; }

.bc-hero__content--left {
  align-items: flex-start;
  text-align: left;
  max-width: 40rem;
  padding-left: clamp(0rem, 5vw, 5.5rem);
}

.bc-hero__content--left .bc-prose--hero { max-width: 33rem; }

/* shame → freedom — alternating, drifting alignment */
.bc-shame .bc-measure { position: relative; }

.bc-shame .bc-line {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.bc-shame .bc-line + .bc-line { margin-top: var(--space-4); }

.bc-shame .bc-em,
.bc-page .bc-em {
  color: var(--rose);
  font-style: italic;
  text-shadow: 0 0 16px rgba(232, 200, 180, 0.35);
}

.bc-line--left  { text-align: left;  margin-right: auto; max-width: 34ch; }
.bc-line--right { text-align: right; margin-left: auto;  max-width: 32ch; }

/* pulled, off-center pull-quote lines with extra air */
.bc-line--quote {
  text-align: center;
  margin-inline: auto;
  max-width: 26ch;
  padding-block: var(--space-4);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  line-height: 1.45;
}

.bc-line--pull {
  text-align: left;
  margin-left: clamp(0px, 10vw, 7rem);
  max-width: 24ch;
  padding-block: var(--space-3);
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.65rem);
  color: var(--ink);
}

/* ---------- CHANGE 4 — drifting "not the only one" phrases ---------- */
.bc-drift {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin: var(--space-4) auto;
  height: clamp(190px, 32vw, 260px);
  pointer-events: none;
}

.bc-drift span {
  position: absolute;
  font-family: var(--display);
  font-style: italic;
  white-space: nowrap;
  color: var(--warm-brown);
  opacity: 0;
  animation: bcDrift var(--d, 12s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

@keyframes bcDrift {
  0%   { opacity: 0; transform: translate(0, 10px) scale(0.97); }
  18%  { opacity: var(--o, 0.4); }
  50%  { transform: translate(var(--mx, 14px), var(--my, -12px)) scale(1); }
  82%  { opacity: var(--o, 0.4); }
  100% { opacity: 0; transform: translate(calc(var(--mx, 14px) * 1.7), calc(var(--my, -12px) * 1.7)) scale(1.03); }
}

.bc-drift span:nth-child(1) { left: 2%;  top: 6%;  font-size: 1.5rem;  color: var(--rose); --o: .46; --d: 12s;   --delay: 0s;    --mx: 20px;  --my: -16px; }
.bc-drift span:nth-child(2) { left: 58%; top: 0%;  font-size: 1.1rem;  --o: .3;  --d: 10s;   --delay: -3s;   --mx: -16px; --my: 12px;  filter: blur(.6px); }
.bc-drift span:nth-child(3) { left: 26%; top: 28%; font-size: 1.7rem;  color: var(--rose); --o: .4;  --d: 13s;   --delay: -6s;   --mx: 14px;  --my: -10px; }
.bc-drift span:nth-child(4) { left: 64%; top: 38%; font-size: 1.2rem;  --o: .34; --d: 11s;   --delay: -1.5s; --mx: -18px; --my: -8px; }
.bc-drift span:nth-child(5) { left: 6%;  top: 56%; font-size: 1.3rem;  --o: .3;  --d: 14s;   --delay: -8s;   --mx: 18px;  --my: 12px;  filter: blur(.8px); }
.bc-drift span:nth-child(6) { left: 44%; top: 62%; font-size: 1.5rem;  color: var(--rose); --o: .42; --d: 12.5s; --delay: -4s;   --mx: -12px; --my: -14px; }
.bc-drift span:nth-child(7) { left: 72%; top: 72%; font-size: 1.05rem; --o: .28; --d: 9.5s;  --delay: -2s;   --mx: 16px;  --my: 10px; }
.bc-drift span:nth-child(8) { left: 18%; top: 82%; font-size: 1.25rem; color: var(--rose); --o: .34; --d: 13.5s; --delay: -7s;   --mx: -14px; --my: -12px; filter: blur(.5px); }

@media (max-width: 640px) {
  .bc-drift { height: 180px; max-width: 100%; }
  /* fewer whispers on a small screen */
  .bc-drift span:nth-child(n + 6) { display: none; }
  .bc-drift span { font-size: 1.1rem; }
  .bc-drift span:nth-child(1) { font-size: 1.3rem; }
  .bc-drift span:nth-child(3) { font-size: 1.35rem; }
}

/* ---------- CHANGE 6a — lantern-light pools ---------- */
.bc-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bc-lantern {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 214, 158, 0.95), rgba(255, 184, 130, 0.32) 45%, transparent 70%);
  opacity: 0.22;
  animation: bcLantern 11s ease-in-out infinite;
}

.bc-lantern--1 { width: 460px; height: 460px; top: 4%;  left: -8%;  --pa: .26; animation-duration: 12s; }
.bc-lantern--2 { width: 540px; height: 540px; top: 26%; left: 68%;  --pa: .22; animation-duration: 10s; animation-delay: -3s; }
.bc-lantern--3 { width: 500px; height: 500px; top: 48%; left: -12%; --pa: .24; animation-duration: 13s; animation-delay: -6s; }
.bc-lantern--4 { width: 480px; height: 480px; top: 70%; left: 66%;  --pa: .2;  animation-duration: 11.5s; animation-delay: -2s; }
.bc-lantern--5 { width: 520px; height: 520px; top: 88%; left: 8%;   --pa: .22; animation-duration: 12.5s; animation-delay: -8s; }

@keyframes bcLantern {
  0%, 100% { transform: scale(1);    opacity: 0.16; }
  50%      { transform: scale(1.14); opacity: var(--pa, 0.26); }
}

/* ---------- CHANGE 6b — aurora shimmer (used sparingly) ---------- */
.bc-aurora {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(42px);
  border-radius: 50%;
  background: linear-gradient(120deg,
    rgba(248, 213, 216, 0.85),
    rgba(213, 198, 232, 0.78),
    rgba(232, 212, 168, 0.78),
    rgba(200, 224, 210, 0.8));
  background-size: 300% 300%;
  opacity: 0.2;
  animation: bcAurora 18s ease-in-out infinite;
}

@keyframes bcAurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bc-freedom { position: relative; z-index: 1; }
.bc-freedom__text { position: relative; z-index: 1; }
.bc-aurora--freedom {
  z-index: 0;
  top: 50%; left: 50%;
  width: 130%; height: 280%;
  transform: translate(-50%, -50%);
  opacity: 0.22;
}

.bc-pricing { position: relative; overflow: hidden; }
.bc-pricing .container-narrow { position: relative; z-index: 1; }
.bc-aurora--join {
  z-index: 0;
  top: 46%; left: 50%;
  width: 620px; height: 620px;
  transform: translate(-50%, -50%);
  opacity: 0.18;
  animation-duration: 20s;
}

/* ---------- CHANGE 3 — alternating warm / cool section tones ---------- */
.bc-page main > section[class*="bc-tone-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.bc-tone-blush::before {
  background: linear-gradient(to bottom, transparent, rgba(232, 210, 205, 0.28) 16%, rgba(232, 210, 205, 0.28) 84%, transparent);
}
.bc-tone-sand::before {
  background: linear-gradient(to bottom, transparent, rgba(232, 220, 195, 0.32) 16%, rgba(232, 220, 195, 0.32) 84%, transparent);
}
.bc-tone-sage::before {
  background: linear-gradient(to bottom, transparent, rgba(210, 220, 205, 0.24) 16%, rgba(210, 220, 205, 0.24) 84%, transparent);
}

/* ---------- CHANGE 2b — hand-drawn ring dividers ---------- */
.bc-ring-divider {
  display: flex;
  justify-content: center;
  padding-block: var(--space-5);
  position: relative;
  z-index: 1;
}
.bc-ring-divider svg {
  width: 46px;
  height: 46px;
  color: var(--gold);
  opacity: 0.6;
}
.bc-ring-divider path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
}

/* ---------- CHANGE 2a + 2c — what's inside, arranged around the circle ---------- */
.bc-inside .bc-circle {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin: var(--space-5) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* circle visuals hidden on the stacked (mobile / tablet) layout */
.bc-inside .bc-circle__ring,
.bc-inside .bc-circle__center { display: none; }

.bc-circle__item { text-align: center; }

.bc-circle__num {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.bc-circle__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 0.35rem;
}
.bc-circle__desc {
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* the circular arrangement only switches on at desktop width */
@media (min-width: 1024px) {
  .bc-inside .bc-circle {
    display: block;
    max-width: 720px;
    aspect-ratio: 1 / 1;
    margin-top: var(--space-6);
  }

  .bc-inside .bc-circle__ring {
    display: block;
    position: absolute;
    left: 12%; top: 12%;
    width: 76%; height: 76%;
    overflow: visible;
    pointer-events: none;
  }
  .bc-circle__ring circle {
    fill: none;
    stroke: var(--gold);
    stroke-width: 0.6;
    opacity: 0.45;
    stroke-dasharray: 308;
    stroke-dashoffset: 308;
  }
  .bc-circle__ring.is-drawn circle {
    transition: stroke-dashoffset 2.4s var(--ease);
    stroke-dashoffset: 0;
  }

  .bc-inside .bc-circle__center {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2.4rem;
    line-height: 1.05;
    color: var(--rose);
    opacity: 0.9;
  }

  .bc-circle__item {
    position: absolute;
    width: 196px;
    transform: translate(-50%, -50%);
  }
  .bc-circle__desc { font-size: 0.82rem; line-height: 1.5; }
  .bc-circle__name { font-size: 1.12rem; }

  .bc-circle__item--1 { left: 50%; top: 4%; }
  .bc-circle__item--2 { left: 89%; top: 28%; }
  .bc-circle__item--3 { left: 89%; top: 72%; }
  .bc-circle__item--4 { left: 50%; top: 96%; }
  .bc-circle__item--5 { left: 11%; top: 72%; }
  .bc-circle__item--6 { left: 11%; top: 28%; }
}

/* ---------- CHANGE 5 — testimonials unfold like letters ---------- */
.bc-page .testimonial .bc-letter {
  display: block;
  position: relative;
  transform-origin: center;
}

.bc-page .testimonial .bc-letter::after {
  content: "";
  position: absolute;
  left: 7%; right: 7%;
  top: 50%;
  height: 16px;
  transform: translateY(-50%);
  background: linear-gradient(to bottom, transparent, rgba(120, 90, 60, 0.16), transparent);
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.55s var(--ease);
}

/* devices that hover (desktop): stay softly folded until hovered */
@media (hover: hover) {
  .bc-page .testimonial .bc-letter {
    transform: scale(0.955);
    transition: transform 0.55s var(--ease);
  }
  .bc-page .testimonial:hover .bc-letter { transform: scale(1); }
  .bc-page .testimonial:hover .bc-letter::after { opacity: 0; }
}

/* touch devices: unfold as each card scrolls into view */
@media (hover: none) {
  .bc-page .testimonial .bc-letter {
    transform: scale(0.965);
    transition: transform 0.6s var(--ease);
  }
  .bc-page .testimonial.is-in .bc-letter { transform: scale(1); }
  .bc-page .testimonial.is-in .bc-letter::after { opacity: 0; }
}

/* ---------- CHANGE 7 — the circle fills as you scroll ---------- */
.bc-progress {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.bc-progress.is-active { opacity: 0.92; }

.bc-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.bc-progress__track {
  fill: none;
  stroke: rgba(184, 148, 107, 0.2);
  stroke-width: 2;
}
.bc-progress__fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 94.25;
  stroke-dashoffset: 94.25;
  transition: stroke-dashoffset 0.15s linear;
}
.bc-progress.is-complete .bc-progress__fill {
  filter: drop-shadow(0 0 5px rgba(184, 148, 107, 0.85));
}

@media (max-width: 640px) {
  .bc-progress { width: 42px; height: 42px; right: 12px; bottom: 12px; }
}

/* ---------- respect reduced motion across all BC motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bc-drift span { animation: none; opacity: var(--o, 0.35); }
  .bc-lantern { animation: none; opacity: 0.2; }
  .bc-aurora { animation: none; }
  .bc-circle__ring.is-drawn circle { transition: none; stroke-dashoffset: 0; }
  .bc-inside-ring.is-drawn circle { transition: none; stroke-dashoffset: 0; }
  .bc-progress__fill { transition: none; }
  .circle-agreement.nudge { animation: none; }
}

/* ---------- pricing cards — per-month figure leads ---------- */
.bc-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1em;
  flex-wrap: wrap;
}
.bc-card__per {
  font-size: 0.4em;
  font-style: italic;
  font-weight: 400;
  color: var(--warm-brown);
  letter-spacing: 0.01em;
}
.bc-card__note { color: var(--warm-brown); }

/* secondary total ($288 / $456) — medium, below the per-month anchor */
.bc-card__total {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--ink-soft);
  line-height: 1.1;
}

/* early price anchor under the hero CTA — subtle, plants the low number */
.bc-hero__anchor {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--warm-brown);
  letter-spacing: 0.02em;
  margin-top: 0.35rem;
}

/* locked join buttons — until the terms box is checked */
.bc-card__btn.is-locked {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.bc-page .bc-card.is-locked-card { cursor: not-allowed; }

/* required agreement checkbox above the cards */
.circle-agreement {
  max-width: 32em;
  margin: 0 auto var(--space-5);
  display: flex;
  justify-content: center;
}
.circle-agreement .checkbox-container { align-items: flex-start; }
.circle-agreement .checkbox-text { font-size: 14.5px; }

@keyframes bcNudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.circle-agreement.nudge { animation: bcNudge 0.4s ease; }

/* value breakdown — both options shown podium-style, per-month leading */
.bc-value__lead {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
.bc-value__options {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 9vw, 4.5rem);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.bc-value__option { text-align: center; }
.bc-value__option-price {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-xl);
  color: var(--ink);
  line-height: 1.1;
}
.bc-value__option-per {
  font-size: 0.48em;
  font-style: italic;
  color: var(--warm-brown);
}
.bc-value__option-bill {
  display: block;
  font-family: var(--body);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--warm-brown);
  margin-top: 0.25rem;
}
.bc-value__closing {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* =========================================================
   HER BOUNDLESS CIRCLE — readability pass
   wider lines · smaller type · tighter spacing · left-aligned body
   (all scoped to .bc-page; overrides the rules above)
   ========================================================= */

/* 3 — tighter section rhythm (~30% less between sections) */
.bc-page .bc-section,
.bc-page .testimonials,
.bc-page .inside,
.bc-page .investment {
  padding-block: clamp(1.75rem, 1.3rem + 1.3vw, 2.75rem);
}
.bc-page .press { padding-block: clamp(1.1rem, 0.8rem + 1vw, 1.75rem); }

/* 1 — wider reading columns so fuller phrases fit per line */
.bc-measure         { max-width: 740px; }
.bc-measure--wide   { max-width: 760px; }
.bc-measure--narrow { max-width: 600px; }
.bc-measure--left   { max-width: 720px; padding-left: clamp(1.5rem, 4vw, 3.5rem); }

/* 2 — display headlines down ~15% */
.bc-hero__title  { font-size: clamp(2.125rem, 1.55rem + 2.4vw, 3.8rem); line-height: 1.14; }
.bc-close__title { font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.75rem); line-height: 1.16; }

/* 2 + 3 — emotional body text ~19-20px, tighter leading */
.bc-prose {
  font-size: clamp(1.1875rem, 1.08rem + 0.3vw, 1.25rem);   /* 19 → 20px */
  line-height: 1.5;
  max-width: 740px;
}
.bc-prose--hero { max-width: 40rem; }
.bc-prose p + p { margin-top: var(--space-3); }            /* was space-4 */

/* 4 + 1 — shame → freedom: clean, consistent, LEFT-aligned, wider */
.bc-shame .bc-measure { text-align: left; }
.bc-shame .bc-line {
  font-size: clamp(1.1875rem, 1.08rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  text-align: left;
  margin-inline: 0;
  max-width: 100%;
}
.bc-shame .bc-line + .bc-line { margin-top: var(--space-3); }

/* retire the heavy asymmetry — keep rose emphasis, drop the hard offsets */
.bc-line--right,
.bc-line--quote,
.bc-line--pull {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
  max-width: 100%;
}
.bc-line--quote {
  padding-block: var(--space-2);
  font-size: clamp(1.25rem, 1.12rem + 0.4vw, 1.4rem);   /* gentle step for emphasis */
}
.bc-line--pull {
  padding-block: var(--space-1);
  font-size: clamp(1.2rem, 1.08rem + 0.4vw, 1.35rem);
}

/* mirror "who she is" — left, wider */
.bc-mirror .bc-prose { max-width: 700px; }

/* 5 — drifting phrases: readable + slower */
.bc-drift { height: clamp(150px, 26vw, 210px); }
.bc-drift span { color: var(--warm-brown); filter: none; }
.bc-drift span:nth-child(1) { left: 3%;  top: 8%;  font-size: 1.4rem;  color: var(--rose); --o: .68; --d: 15s;   --delay: 0s;   --mx: 14px;  --my: -10px; }
.bc-drift span:nth-child(2) { left: 60%; top: 4%;  font-size: 1.15rem; color: var(--warm-brown); --o: .56; --d: 17s; --delay: -4s; --mx: -12px; --my: 8px; }
.bc-drift span:nth-child(3) { left: 22%; top: 40%; font-size: 1.5rem;  color: var(--rose); --o: .64; --d: 16s;   --delay: -8s;  --mx: 12px;  --my: -8px; }
.bc-drift span:nth-child(4) { left: 64%; top: 46%; font-size: 1.2rem;  color: var(--warm-brown); --o: .58; --d: 14s; --delay: -2s; --mx: -14px; --my: -6px; }
.bc-drift span:nth-child(5) { left: 6%;  top: 74%; font-size: 1.25rem; color: var(--warm-brown); --o: .6;  --d: 18s; --delay: -10s; --mx: 12px; --my: 8px; }
.bc-drift span:nth-child(6) { left: 54%; top: 78%; font-size: 1.35rem; color: var(--rose); --o: .62; --d: 16.5s; --delay: -6s; --mx: -10px; --my: -10px; }

@media (max-width: 640px) {
  /* fewer whispers on a small screen — show 4 */
  .bc-drift span:nth-child(n + 5) { display: none; }
  .bc-drift span { font-size: 1.15rem; }
  .bc-drift span:nth-child(1) { font-size: 1.3rem; }
  .bc-drift span:nth-child(3) { font-size: 1.35rem; }
}

/* 10 — guarantee: one tighter, contained block */
.bc-guarantee .bc-prose { max-width: 560px; }
.bc-guarantee .bc-prose p { line-height: 1.42; }
.bc-guarantee .bc-prose p + p { margin-top: var(--space-2); }

/* 8 — balanced testimonials: tall column + stacked pair */
.bc-tgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .bc-tgrid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-4);
    max-width: 760px;
    margin-inline: auto;
  }
}

/* 9 — what's inside: clean numbered list with a faint ring behind it */
.bc-inside-wrap { position: relative; margin-top: var(--space-4); }
.bc-inside-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, 88%);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
}
.bc-inside-ring circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.5;
  opacity: 0.35;
  stroke-dasharray: 308;
  stroke-dashoffset: 308;
}
.bc-inside-ring.is-drawn circle {
  transition: stroke-dashoffset 2.4s var(--ease);
  stroke-dashoffset: 0;
}
.bc-inside-wrap .inside__list { position: relative; z-index: 1; }
/* tighten the list rhythm a touch on this page */
.bc-page .inside__item { padding-block: var(--space-3); }

/* =========================================================
   HER BOUNDLESS CIRCLE — major copy/layout revision
   distinct hero · gym story · clock-face what's-inside
   ========================================================= */

/* hero — a question, not a centered statement-stack */
.bc-hero__q {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.85rem, 1.4rem + 1.8vw, 2.75rem);
  line-height: 1.18;
  color: var(--ink);
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin-inline: auto;
}
.bc-hero__content .bc-prose--hero { max-width: 34rem; }

/* gym story — an intimate personal note, set off to one side */
.bc-story__inner {
  max-width: 560px;
  margin-inline: auto;
  padding-left: clamp(1rem, 3vw, 1.75rem);
  border-left: 2px solid var(--gold-soft);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.02rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: left;
}
.bc-story__inner p { margin: 0; }
.bc-story__inner p + p { margin-top: var(--space-3); }

/* landing — punchy, centered */
.bc-landing .bc-measure { text-align: center; }
.bc-landing__lines {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.bc-landing__human {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  line-height: 1.1;
  margin-top: var(--space-3);
}

/* shift — center the "and that's freedom" moment + aurora */
.bc-shift .bc-measure { text-align: center; }
.bc-shift .bc-freedom { margin-top: var(--space-4); }

/* ---------- CLOCK-FACE "what's inside" (text radiates outside the ring) ---------- */
.bc-inside .bc-clock {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin: var(--space-5) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ring + center label hidden on the stacked (mobile/tablet) layout */
.bc-clock__ring,
.bc-clock__center { display: none; }

.bc-clock__item { text-align: center; }
.bc-clock__num {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}
.bc-clock__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 0.3rem;
}
.bc-clock__desc {
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* the circular arrangement only switches on at desktop width */
@media (min-width: 1024px) {
  .bc-inside .bc-clock {
    display: block;
    width: 640px;
    height: 640px;
    max-width: none;
    margin: var(--space-6) auto;
  }

  .bc-clock__ring {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    height: 360px;
    transform: translate(-50%, -50%);
    overflow: visible;
    pointer-events: none;
  }
  .bc-clock__ring circle {
    fill: none;
    stroke: var(--gold);
    stroke-width: 0.5;
    opacity: 0.5;
    stroke-dasharray: 308;
    stroke-dashoffset: 308;
  }
  .bc-clock__ring.is-drawn circle {
    transition: stroke-dashoffset 2.4s var(--ease);
    stroke-dashoffset: 0;
  }

  .bc-clock__center {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    text-align: center;
    font-size: 2rem;
    line-height: 1.05;
    color: var(--rose);
    opacity: 0.85;
  }

  .bc-clock__item {
    position: absolute;
    width: 180px;
  }
  .bc-clock__num  { font-size: 0.95rem; margin-bottom: 0.1rem; }
  .bc-clock__name { font-size: 1.05rem; margin-bottom: 0.2rem; }
  .bc-clock__desc { font-size: 0.8rem; line-height: 1.4; }

  /* 6 evenly-spaced points; text sits JUST OUTSIDE the ring, never crossing it */
  .bc-clock__item--1 { left: 50%;   top: 19.5%; transform: translate(-50%, -100%); text-align: center; width: 230px; padding-bottom: 0.4rem; }
  .bc-clock__item--2 { left: 76.5%; top: 35%;   transform: translate(0, -50%);     text-align: left;   padding-left: 0.6rem; }
  .bc-clock__item--3 { left: 76.5%; top: 65%;   transform: translate(0, -50%);     text-align: left;   padding-left: 0.6rem; }
  .bc-clock__item--4 { left: 50%;   top: 80.5%; transform: translate(-50%, 0);     text-align: center; width: 230px; padding-top: 0.4rem; }
  .bc-clock__item--5 { left: 23.5%; top: 65%;   transform: translate(-100%, -50%); text-align: right;  padding-right: 0.6rem; }
  .bc-clock__item--6 { left: 23.5%; top: 35%;   transform: translate(-100%, -50%); text-align: right;  padding-right: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-clock__ring.is-drawn circle { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   HER BOUNDLESS CIRCLE — "BRUSHSTROKES OVER THE SKY"
   painted-sky atmosphere · morning light · colorful & alive
   (everything scoped to .bc-page — the 1:1 page is untouched)
   ========================================================= */

.bc-page {
  --sky-cream:    #fbf6ec;
  --sky-peach:    #f5c9a8;
  --sky-coral:    #eba89a;
  --sky-lavender: #c9b8d9;
  --sky-blue:     #a8c0d9;
  --sky-gold:     #f0d49a;
}

/* lighter, airier base */
body.bc-page { background-color: var(--sky-cream); }

/* morning light, not dusk — soft painted wash, no heavy vignette */
body.bc-page::before {
  background:
    radial-gradient(ellipse 1000px 760px at 18% 2%,  rgba(245, 201, 168, 0.42), transparent 60%),
    radial-gradient(ellipse 900px 1000px at 90% 38%, rgba(201, 184, 217, 0.34), transparent 62%),
    radial-gradient(ellipse 1100px 900px at 30% 78%, rgba(168, 192, 217, 0.32), transparent 62%);
  mix-blend-mode: multiply;
  opacity: 1;
}
body.bc-page::after { background: none; }   /* drop the dusk vignette */

/* the color clouds — translucent paint, bleeding softly into each other */
.bc-page .bc-lantern {
  mix-blend-mode: multiply;
  filter: blur(95px);
  animation: bcCloudBreath 13s ease-in-out infinite;
}
@keyframes bcCloudBreath {
  0%, 100% { transform: scale(1);    opacity: 0.42; }
  50%      { transform: scale(1.13); opacity: 0.6; }
}

.bc-page .bc-lantern--1 { background: radial-gradient(circle, rgba(245,201,168,0.95), transparent 70%); top: 2%;  left: -8%;  width: 520px; height: 520px; animation-duration: 13s; }
.bc-page .bc-lantern--2 { background: radial-gradient(circle, rgba(235,168,154,0.9),  transparent 70%); top: 18%; left: 64%;  width: 560px; height: 560px; animation-duration: 15s; animation-delay: -3s; }
.bc-page .bc-lantern--3 { background: radial-gradient(circle, rgba(201,184,217,0.92), transparent 70%); top: 36%; left: -10%; width: 600px; height: 600px; animation-duration: 14s; animation-delay: -6s; }
.bc-page .bc-lantern--4 { background: radial-gradient(circle, rgba(168,192,217,0.9),  transparent 70%); top: 54%; left: 60%;  width: 560px; height: 560px; animation-duration: 16s; animation-delay: -2s; }
.bc-page .bc-lantern--5 { background: radial-gradient(circle, rgba(240,212,154,0.92), transparent 70%); top: 70%; left: -6%;  width: 560px; height: 560px; animation-duration: 13.5s; animation-delay: -8s; }
.bc-page .bc-lantern--6 { background: radial-gradient(circle, rgba(201,184,217,0.85), transparent 70%); top: 84%; left: 62%;  width: 520px; height: 520px; animation-duration: 15.5s; animation-delay: -5s; }
.bc-page .bc-lantern--7 { background: radial-gradient(circle, rgba(245,201,168,0.85), transparent 70%); top: 94%; left: 8%;   width: 520px; height: 520px; animation-duration: 14.5s; animation-delay: -10s; }

/* let the aurora read as soft paint on the light base */
.bc-page .bc-aurora { mix-blend-mode: multiply; opacity: 0.3; }

/* the old subtle tints are replaced by the painted clouds */
.bc-page main > section[class*="bc-tone-"]::before { display: none; }

/* ---------- painted brushstroke underlines on key words ---------- */
.bc-swash {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M3 8 Q30 3 60 7 T117 6' stroke='%23eba89a' stroke-width='4' fill='none' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.42em;
  padding-bottom: 0.06em;
}
.bc-swash--blue {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cpath d='M3 7 Q30 11 60 6 T117 8' stroke='%23a8c0d9' stroke-width='4' fill='none' stroke-linecap='round' opacity='0.85'/%3E%3C/svg%3E");
}

/* ---------- bolder, more powerful type ---------- */
.bc-page .bc-hero__q {
  font-weight: 600;
  font-size: clamp(2.3rem, 1.7rem + 2.8vw, 3.7rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  position: relative;
}
/* soft gold wash behind the hero question */
.bc-page .bc-hero__q::before {
  content: "";
  position: absolute;
  left: 50%; top: 52%;
  width: 115%; height: 150%;
  transform: translate(-50%, -50%) rotate(-2deg);
  background: radial-gradient(ellipse, rgba(240,212,154,0.4), transparent 68%);
  filter: blur(34px);
  z-index: -1;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.bc-page .bc-landing__human {
  font-weight: 600;
  font-size: clamp(2.5rem, 1.9rem + 2.8vw, 3.9rem);
  position: relative;
}
/* coral watercolor blob behind "you're human" */
.bc-page .bc-landing__human::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 360px; height: 220px;
  transform: translate(-50%, -50%) rotate(-6deg);
  background: radial-gradient(ellipse, rgba(235,168,154,0.55), rgba(245,201,168,0.3) 45%, transparent 72%);
  filter: blur(28px);
  z-index: -1;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* labels get a touch of color confidence */
.bc-page .label { color: var(--rose-deep); letter-spacing: 0.12em; }

/* ---------- VOICES FROM THE CIRCLE ---------- */
.bc-voices { text-align: center; }
.bc-voices__label { display: block; text-align: center; margin-bottom: var(--space-4); }

.bc-voices__cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem 1.1rem;
  max-width: 860px;
  margin-inline: auto;
}

.bc-bubble {
  display: inline-block;
  max-width: 300px;
  padding: 0.7rem 1.15rem;
  border-radius: 18px 18px 18px 5px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  line-height: 1.4;
  color: #5a4636;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0));
  box-shadow: 0 6px 18px rgba(150, 120, 90, 0.14);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  cursor: default;
}
.bc-bubble:nth-child(even) { border-radius: 18px 18px 5px 18px; }
.bc-bubble--lg { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); max-width: 340px; }

.bc-bubble:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.03);
  box-shadow: 0 14px 30px rgba(150, 120, 90, 0.24);
}

.bc-bubble--peach    { background: rgba(245, 201, 168, 0.55); }
.bc-bubble--coral    { background: rgba(235, 168, 154, 0.5); }
.bc-bubble--lavender { background: rgba(201, 184, 217, 0.55); }
.bc-bubble--blue     { background: rgba(168, 192, 217, 0.55); }
.bc-bubble--gold     { background: rgba(240, 212, 154, 0.58); }

@media (max-width: 640px) {
  .bc-bubble { transform: rotate(calc(var(--r, 0deg) * 0.5)) translateY(0); max-width: 100%; }
}

/* ---------- playful / alive touches ---------- */
/* what's-inside items softly light up */
.bc-clock__item { transition: transform 0.4s var(--ease); }
.bc-clock__name { transition: color 0.35s ease, text-shadow 0.35s ease; }
.bc-clock__item:hover { transform: translateY(-2px); }
.bc-clock__item:hover .bc-clock__name {
  color: var(--rose-deep);
  text-shadow: 0 0 14px rgba(235, 168, 154, 0.55);
}
@media (min-width: 1024px) {
  .bc-clock__item:hover { transform: translate(-50%, -50%) translateY(-3px) !important; }
  .bc-clock__item--2:hover, .bc-clock__item--3:hover { transform: translate(0, -50%) translateY(-3px) !important; }
  .bc-clock__item--5:hover, .bc-clock__item--6:hover { transform: translate(-100%, -50%) translateY(-3px) !important; }
  .bc-clock__item--1:hover { transform: translate(-50%, -100%) translateY(-3px) !important; }
  .bc-clock__item--4:hover { transform: translate(-50%, 0) translateY(-3px) !important; }
}

/* hand-drawn doodles in the margins — imperfect, human */
.bc-hero { position: relative; }
.bc-hero::after {
  content: "";
  position: absolute;
  top: 16%; right: 7%;
  width: 46px; height: 46px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M23 4 C25 16 30 21 42 23 C30 25 25 30 23 42 C21 30 16 25 4 23 C16 21 21 16 23 4 Z' fill='none' stroke='%23eba89a' stroke-width='1.6' stroke-linejoin='round' opacity='0.7'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  animation: bcCloudBreath 9s ease-in-out infinite;
}
.bc-voices { position: relative; }
.bc-voices::before {
  content: "";
  position: absolute;
  top: 8%; left: 6%;
  width: 70px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='26' viewBox='0 0 70 26'%3E%3Cpath d='M3 18 Q20 4 35 14 T67 9' fill='none' stroke='%23a8c0d9' stroke-width='2.4' stroke-linecap='round' opacity='0.65'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}
@media (max-width: 820px) {
  .bc-hero::after, .bc-voices::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-page .bc-lantern { animation: none; opacity: 0.5; }
  .bc-hero::after { animation: none; }
}

/* =========================================================
   PAINTED SKY — VIBRANCY pass
   richer pigment, clean (no grey/multiply muddiness), each
   section leans a clear color — matching the chat-bubble saturation
   (overrides the muted version above)
   ========================================================= */

/* clouds: clean NORMAL blend (multiply was greying them), softer so the
   section washes carry the vibrancy and clouds just bleed between them */
.bc-page .bc-lantern {
  mix-blend-mode: normal;
  filter: blur(85px);
}
@keyframes bcCloudBreath {
  0%, 100% { transform: scale(1);    opacity: 0.24; }
  50%      { transform: scale(1.12); opacity: 0.42; }
}

/* re-enable section washes — now VIVID, each a clear color, soft edges to bleed */
.bc-page main > section[class*="bc-tone-"]::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.bc-page .bc-tone-cream::before {
  background: linear-gradient(to bottom, transparent, rgba(245, 201, 168, 0.16) 50%, transparent);
}
.bc-page .bc-tone-blush::before {       /* vivid coral → peach */
  background: linear-gradient(to bottom,
    rgba(235, 168, 154, 0.20) 0%,
    rgba(235, 168, 154, 0.52) 38%,
    rgba(245, 201, 168, 0.48) 70%,
    rgba(245, 201, 168, 0.18) 100%);
}
.bc-page .bc-tone-sand::before {        /* vivid warm gold */
  background: linear-gradient(to bottom,
    rgba(240, 212, 154, 0.22) 0%,
    rgba(243, 206, 138, 0.56) 40%,
    rgba(245, 201, 168, 0.42) 72%,
    rgba(240, 212, 154, 0.18) 100%);
}
.bc-page .bc-tone-sage::before {        /* vivid lavender → periwinkle */
  background: linear-gradient(to bottom,
    rgba(201, 184, 217, 0.22) 0%,
    rgba(201, 184, 217, 0.54) 40%,
    rgba(168, 192, 217, 0.50) 72%,
    rgba(168, 192, 217, 0.18) 100%);
}

/* body ambient — light and clean, lets the section washes lead */
body.bc-page::before {
  background:
    radial-gradient(ellipse 1000px 720px at 16% 0%,  rgba(245, 201, 168, 0.34), transparent 60%),
    radial-gradient(ellipse 1000px 900px at 90% 100%, rgba(201, 184, 217, 0.26), transparent 62%);
  mix-blend-mode: normal;
}

/* vivid brushstroke blobs behind the power headlines (clean normal blend) */
.bc-page .bc-landing__human::before {
  background: radial-gradient(ellipse, rgba(235, 168, 154, 0.75), rgba(245, 201, 168, 0.42) 45%, transparent 72%);
  mix-blend-mode: normal;
}
.bc-page .bc-hero__q::before {
  background: radial-gradient(ellipse, rgba(240, 212, 154, 0.5), transparent 68%);
  mix-blend-mode: normal;
}

/* 2 — bigger, more present "from USD $38 / month" anchor */
.bc-page .bc-hero__anchor {
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
  font-weight: 500;
  color: var(--rose-deep);
  letter-spacing: 0.01em;
  margin-top: 0.6rem;
}

/* =========================================================
   PAINTERLY pass — brushstrokes over the sky, not gradient bands
   one continuous, organic, hand-painted color field behind everything
   (overrides the per-section "layer cake" above)
   ========================================================= */

/* kill ALL per-section color bands (the layer-cake look + the grey-purple slab) */
.bc-page main > section[class*="bc-tone-"]::before { display: none !important; }

/* the painted field — irregular, overlapping strokes, uneven saturation, soft feathered edges */
.bc-page .bc-lantern {
  mix-blend-mode: normal;
  border-radius: 50%;
  animation: none;
  will-change: auto;
}

/* each stroke: varied position / size / angle / color / opacity — spontaneous, hand-painted */
.bc-page .bc-lantern--1  { top: 0%;   left: -10%; width: 660px; height: 480px; background: radial-gradient(circle, rgba(235,168,154,0.85), transparent 68%); opacity: .52; filter: blur(80px); transform: rotate(-16deg); }
.bc-page .bc-lantern--2  { top: 3%;   left: 50%;  width: 700px; height: 430px; background: radial-gradient(circle, rgba(245,201,168,0.85), transparent 68%); opacity: .42; filter: blur(86px); transform: rotate(12deg); }
.bc-page .bc-lantern--3  { top: 12%;  left: 14%;  width: 540px; height: 540px; background: radial-gradient(circle, rgba(240,212,154,0.8),  transparent 70%); opacity: .30; filter: blur(92px); transform: rotate(4deg); }
.bc-page .bc-lantern--4  { top: 22%;  left: 54%;  width: 780px; height: 410px; background: radial-gradient(circle, rgba(201,184,217,0.85), transparent 68%); opacity: .50; filter: blur(80px); transform: rotate(-22deg); }
.bc-page .bc-lantern--5  { top: 32%;  left: -13%; width: 720px; height: 390px; background: radial-gradient(circle, rgba(168,192,217,0.85), transparent 68%); opacity: .46; filter: blur(82px); transform: rotate(18deg); }
.bc-page .bc-lantern--6  { top: 42%;  left: 34%;  width: 580px; height: 500px; background: radial-gradient(circle, rgba(235,168,154,0.8),  transparent 70%); opacity: .34; filter: blur(88px); transform: rotate(-8deg); }
.bc-page .bc-lantern--7  { top: 50%;  left: 58%;  width: 620px; height: 450px; background: radial-gradient(circle, rgba(240,212,154,0.85), transparent 68%); opacity: .48; filter: blur(80px); transform: rotate(14deg); }
.bc-page .bc-lantern--8  { top: 60%;  left: -11%; width: 700px; height: 520px; background: radial-gradient(circle, rgba(201,184,217,0.82), transparent 68%); opacity: .44; filter: blur(84px); transform: rotate(12deg); }
.bc-page .bc-lantern--9  { top: 68%;  left: 42%;  width: 660px; height: 430px; background: radial-gradient(circle, rgba(245,201,168,0.82), transparent 68%); opacity: .40; filter: blur(86px); transform: rotate(-14deg); }
.bc-page .bc-lantern--10 { top: 78%;  left: 56%;  width: 620px; height: 410px; background: radial-gradient(circle, rgba(168,192,217,0.82), transparent 68%); opacity: .46; filter: blur(82px); transform: rotate(20deg); }
.bc-page .bc-lantern--11 { top: 86%;  left: 6%;   width: 720px; height: 470px; background: radial-gradient(circle, rgba(240,212,154,0.82), transparent 68%); opacity: .42; filter: blur(84px); transform: rotate(-10deg); }
.bc-page .bc-lantern--12 { top: 94%;  left: 46%;  width: 580px; height: 470px; background: radial-gradient(circle, rgba(235,168,154,0.78), transparent 70%); opacity: .38; filter: blur(86px); transform: rotate(16deg); }

/* a soft overall warmth so the cream never reads flat between strokes */
body.bc-page::before {
  background:
    radial-gradient(ellipse 1100px 800px at 20% 4%,  rgba(245,201,168,0.28), transparent 60%),
    radial-gradient(ellipse 1000px 900px at 82% 46%, rgba(201,184,217,0.22), transparent 62%),
    radial-gradient(ellipse 1100px 900px at 30% 92%, rgba(168,192,217,0.22), transparent 62%);
  mix-blend-mode: normal;
}

/* sections stay transparent so the one painted field shows through behind all of them */
.bc-page main > section { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .bc-page .bc-lantern { animation: none; }
}

/* ---------- homepage hero bloom — sized to fit the compact hero (no crop) ---------- */
body:not(.bc-page) .hero::before {
  width: 400px;
  height: 340px;
  top: 10%;
  left: -7%;
  animation: heroBloomSoft 22s ease-in-out infinite alternate;
}
@keyframes heroBloomSoft {
  from { transform: translate(0, 0); }
  to   { transform: translate(26px, 22px); }
}

/* ---------- 1:1 hero — "what if" + "you are allowed" moved up, gently spaced ---------- */
.hero .whatif + .allowed { margin-top: var(--space-5); }
.hero .allowed + .reveal { margin-top: var(--space-5); }

/* =========================================================
   PAINTED SKY — multicolor fix
   distinct saturated blooms (purple / periwinkle / coral-pink / butter
   yellow) on warm cream — NOT a warm monochrome glow
   ========================================================= */

/* remove the warm ambient that was tinting the whole page peach */
body.bc-page::before { background: none !important; }

/* each "lantern" is now a BRUSHSTROKE: a color masked into an elongated,
   irregular brush silhouette (stretched + rotated), softly blurred — not a round glow */
.bc-page .bc-lantern {
  mix-blend-mode: normal;
  opacity: 1;
  border-radius: 0;
  animation: none;
  filter: blur(24px);
  background-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;            mask-size: 100% 100%;
  -webkit-mask-position: center;           mask-position: center;
}

/* three hand-drawn brushstroke silhouettes, stretched to each stroke's box */
.bc-page .bc-lantern--1, .bc-page .bc-lantern--4, .bc-page .bc-lantern--7, .bc-page .bc-lantern--10 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'><path fill='white' d='M6,62C36,30,92,24,152,28C212,32,262,40,294,54C300,58,300,64,292,70C260,86,204,96,144,92C90,88,40,94,12,76C4,71,2,67,6,62Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'><path fill='white' d='M6,62C36,30,92,24,152,28C212,32,262,40,294,54C300,58,300,64,292,70C260,86,204,96,144,92C90,88,40,94,12,76C4,71,2,67,6,62Z'/></svg>");
}
.bc-page .bc-lantern--2, .bc-page .bc-lantern--5, .bc-page .bc-lantern--8, .bc-page .bc-lantern--11 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'><path fill='white' d='M4,68C44,26,120,20,200,30C258,37,296,56,296,66C296,76,252,90,198,88C118,85,44,98,14,80C6,76,0,73,4,68Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'><path fill='white' d='M4,68C44,26,120,20,200,30C258,37,296,56,296,66C296,76,252,90,198,88C118,85,44,98,14,80C6,76,0,73,4,68Z'/></svg>");
}
.bc-page .bc-lantern--3, .bc-page .bc-lantern--6, .bc-page .bc-lantern--9, .bc-page .bc-lantern--12 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'><path fill='white' d='M8,52C64,22,128,66,196,50C248,38,292,46,296,62C300,74,250,90,188,82C118,73,58,96,16,72C8,66,4,58,8,52Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'><path fill='white' d='M8,52C64,22,128,66,196,50C248,38,292,46,296,62C300,74,250,90,188,82C118,73,58,96,16,72C8,66,4,58,8,52Z'/></svg>");
}

/* 4 distinct colors, elongated + strongly rotated = directional brushstrokes, asymmetric */
.bc-page .bc-lantern--1  { top: -3%; left: -8%;  width: 820px; height: 300px; background: rgba(201,169,212,0.66); transform: rotate(-19deg); }  /* lilac */
.bc-page .bc-lantern--2  { top: 4%;  left: 46%;  width: 760px; height: 260px; background: rgba(163,191,224,0.62); transform: rotate(13deg); }   /* periwinkle */
.bc-page .bc-lantern--3  { top: 12%; left: 12%;  width: 600px; height: 230px; background: rgba(240,160,160,0.56); transform: rotate(-7deg); }   /* coral-pink */
.bc-page .bc-lantern--4  { top: 19%; left: 54%;  width: 720px; height: 250px; background: rgba(245,217,138,0.58); transform: rotate(26deg); }   /* butter yellow */
.bc-page .bc-lantern--5  { top: 28%; left: -12%; width: 860px; height: 300px; background: rgba(201,169,212,0.64); transform: rotate(11deg); }   /* lilac */
.bc-page .bc-lantern--6  { top: 37%; left: 34%;  width: 780px; height: 280px; background: rgba(163,191,224,0.62); transform: rotate(-23deg); }  /* periwinkle */
.bc-page .bc-lantern--7  { top: 46%; left: -6%;  width: 660px; height: 240px; background: rgba(240,160,160,0.58); transform: rotate(17deg); }   /* coral-pink */
.bc-page .bc-lantern--8  { top: 54%; left: 52%;  width: 740px; height: 270px; background: rgba(245,217,138,0.60); transform: rotate(-15deg); }  /* butter yellow */
.bc-page .bc-lantern--9  { top: 64%; left: 22%;  width: 800px; height: 300px; background: rgba(201,169,212,0.62); transform: rotate(21deg); }   /* lilac */
.bc-page .bc-lantern--10 { top: 73%; left: -10%; width: 800px; height: 280px; background: rgba(163,191,224,0.62); transform: rotate(-17deg); }  /* periwinkle */
.bc-page .bc-lantern--11 { top: 82%; left: 48%;  width: 680px; height: 260px; background: rgba(240,160,160,0.56); transform: rotate(15deg); }   /* coral-pink */
.bc-page .bc-lantern--12 { top: 91%; left: 4%;   width: 760px; height: 280px; background: rgba(245,217,138,0.58); transform: rotate(-11deg); }  /* butter yellow */

@media (prefers-reduced-motion: reduce) { .bc-page .bc-lantern { animation: none; } }

/* =========================================================
   REAL PAINT — watercolor brushstrokes (SVG displacement) + paper tooth
   replaces the soft round blobs; .bc-lantern rules above are now unused
   ========================================================= */

.bc-paint {
  position: absolute;
  display: block;
  overflow: visible;          /* let the feathered/displaced edges show */
  pointer-events: none;
}

/* directional brush sweeps — elongated, rotated, asymmetric, overlapping */
.bc-page .bc-paint--1  { top: -3%; left: -10%; width: 860px; height: 250px; transform: rotate(-18deg); }  /* lilac */
.bc-page .bc-paint--2  { top: 4%;  left: 46%;  width: 780px; height: 240px; transform: rotate(13deg); }   /* periwinkle */
.bc-page .bc-paint--3  { top: 12%; left: 12%;  width: 620px; height: 210px; transform: rotate(-7deg); }   /* coral */
.bc-page .bc-paint--4  { top: 20%; left: 54%;  width: 720px; height: 240px; transform: rotate(24deg); }   /* yellow */
.bc-page .bc-paint--5  { top: 29%; left: -12%; width: 880px; height: 260px; transform: rotate(11deg); }   /* lilac */
.bc-page .bc-paint--6  { top: 38%; left: 32%;  width: 800px; height: 250px; transform: rotate(-22deg); }  /* periwinkle */
.bc-page .bc-paint--7  { top: 47%; left: -8%;  width: 700px; height: 230px; transform: rotate(16deg); }   /* coral */
.bc-page .bc-paint--8  { top: 56%; left: 50%;  width: 760px; height: 250px; transform: rotate(-15deg); }  /* yellow */
.bc-page .bc-paint--9  { top: 65%; left: 18%;  width: 840px; height: 260px; transform: rotate(20deg); }   /* lilac */
.bc-page .bc-paint--10 { top: 75%; left: -10%; width: 820px; height: 250px; transform: rotate(-16deg); }  /* periwinkle */
.bc-page .bc-paint--11 { top: 84%; left: 48%;  width: 720px; height: 240px; transform: rotate(14deg); }   /* coral */
.bc-page .bc-paint--12 { top: 92%; left: 4%;   width: 780px; height: 250px; transform: rotate(-11deg); }  /* yellow */

/* ---------- testimonials — balanced masonry (auto-equal column heights) ---------- */
.bc-masonry {
  column-count: 3;
  column-gap: var(--space-3);
  column-fill: balance;
  max-width: 980px;
  margin-inline: auto;
}
.bc-masonry .testimonial {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-3);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
@media (max-width: 900px) { .bc-masonry { column-count: 2; } }
@media (max-width: 600px) {
  .bc-masonry { column-count: 1; max-width: 26rem; }                       /* dedicated testimonials page stays 1 readable column */
  .bc-page .bc-masonry { column-count: 2; max-width: none; column-gap: var(--space-2); }  /* sales page: 2 compact columns on mobile */
  .bc-page .bc-masonry .testimonial { margin-bottom: var(--space-2); }
}

/* watercolor-paper tooth, laid OVER the color but UNDER the text (it lives in the atmosphere layer) */
.bc-page .bc-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='gr'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.22 0 0 0 0 0.15 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23gr)'/></svg>");
  background-size: 200px 200px;
  opacity: 0.16;
  mix-blend-mode: multiply;
}

/* =========================================================
   ARTISTIC DIRECTION — Matisse cutouts + line art on clean cream
   (replaces all the soft color-wash experiments)
   ========================================================= */

/* switch off the leftover soft washes for a clean, crisp surface */
.bc-page .bc-atmosphere::after { content: none; }            /* drop paper-tooth grain overlay */
.bc-page .bc-aurora { display: none; }                        /* drop soft aurora washes */
.bc-page .bc-hero__q::before,
.bc-page .bc-landing__human::before { content: none; }        /* drop soft headline glows */

/* bold organic cutout shapes — generous, full palette, vivid, scattered + layered */
.bc-shape { position: absolute; display: block; pointer-events: none; }
.bc-shape--1  { top: 0%;  left: -7%; width: 300px; opacity: 0.90; }
.bc-shape--2  { top: 5%;  left: 80%; width: 150px; opacity: 0.85; transform: rotate(16deg); }
.bc-shape--3  { top: 9%;  left: 82%; width: 92px;  opacity: 0.82; }
.bc-shape--4  { top: 15%; left: -8%; width: 240px; opacity: 0.82; }
.bc-shape--5  { top: 20%; left: 83%; width: 130px; opacity: 0.74; }
.bc-shape--6  { top: 27%; left: -3%; width: 230px; opacity: 0.86; }
.bc-shape--7  { top: 31%; left: 81%; width: 150px; opacity: 0.84; transform: rotate(-18deg); }
.bc-shape--8  { top: 38%; left: -6%; width: 250px; opacity: 0.82; }
.bc-shape--9  { top: 42%; left: 80%; width: 150px; opacity: 0.76; }
.bc-shape--10 { top: 49%; left: -7%; width: 240px; opacity: 0.82; transform: rotate(-10deg); }
.bc-shape--11 { top: 53%; left: 82%; width: 140px; opacity: 0.84; transform: rotate(20deg); }
.bc-shape--12 { top: 60%; left: -5%; width: 160px; opacity: 0.80; }
.bc-shape--13 { top: 64%; left: 78%; width: 220px; opacity: 0.80; }
.bc-shape--14 { top: 71%; left: -7%; width: 250px; opacity: 0.82; }
.bc-shape--15 { top: 75%; left: 82%; width: 150px; opacity: 0.80; transform: rotate(14deg); }
.bc-shape--16 { top: 82%; left: -6%; width: 240px; opacity: 0.86; }
.bc-shape--17 { top: 87%; left: 82%; width: 140px; opacity: 0.76; }
.bc-shape--18 { top: 93%; left: -4%; width: 150px; opacity: 0.82; transform: rotate(-16deg); }
.bc-shape--19 { top: 6%;  left: -2%; width: 72px;  opacity: 0.88; }
.bc-shape--20 { top: 84%; left: 6%;  width: 78px;  opacity: 0.82; }

/* hand-drawn line-art doodles — scattered generously near headings + in the margins */
.bc-doodle { position: absolute; display: block; pointer-events: none; opacity: 0.78; }
.bc-doodle--1  { top: 3%;  left: 86%; width: 72px; }   /* sun — right margin (hero) */
.bc-doodle--2  { top: 10%; left: 2%;  width: 118px; }  /* wave — left margin */
.bc-doodle--3  { top: 17%; left: 89%; width: 40px; }   /* star — right margin */
.bc-doodle--4  { top: 24%; left: 3%;  width: 70px; }   /* flower — left margin */
.bc-doodle--5  { top: 33%; left: 87%; width: 116px; }  /* wave — right margin */
.bc-doodle--6  { top: 41%; left: 3%;  width: 60px; }   /* spiral — left margin */
.bc-doodle--7  { top: 47%; left: 89%; width: 36px; }   /* star — right margin (clear of "what's inside") */
.bc-doodle--8  { top: 57%; left: 3%;  width: 52px; }   /* moon — left margin */
.bc-doodle--9  { top: 66%; left: 89%; width: 54px; }   /* leaf — right margin */
.bc-doodle--10 { top: 73%; left: 2%;  width: 116px; }  /* wave — left margin */
.bc-doodle--11 { top: 83%; left: 89%; width: 40px; }   /* star — right margin */
.bc-doodle--12 { top: 90%; left: 3%;  width: 70px; }   /* flower — left margin */

/* lighter footprint on small screens so shapes never crowd the text */
@media (max-width: 700px) {
  .bc-page .bc-shape { opacity: 0.40; }
  .bc-doodle--3, .bc-doodle--5, .bc-doodle--7, .bc-doodle--8, .bc-doodle--10, .bc-doodle--11 { display: none; }
}

/* remove the simulated letter-fold crease — it read as a stray grey line over the photos */
.bc-page .testimonial .bc-letter::after { content: none; }
.bc-page .testimonial .bc-letter { transform: none; }

/* =========================================================
   TESTIMONIALS PAGE — calm warm world, shared by both offerings
   ========================================================= */
.tpage__header {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  padding-block: var(--space-6) var(--space-3);
}
.tpage__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tpage__sub {
  margin-top: var(--space-3);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* videos — strongest proof, up top */
.tvideos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 920px;
  margin: var(--space-5) auto var(--space-6);
}
@media (min-width: 760px) { .tvideos { grid-template-columns: 1fr 1fr; } }
.tvideo { text-align: center; }
.tvideo video {
  width: auto;
  max-width: 100%;
  max-height: 68vh;        /* portrait clips were overflowing the screen — cap the height */
  margin-inline: auto;
  border-radius: 6px;
  background: #1c1612;
  box-shadow: 0 10px 32px rgba(120, 90, 60, 0.22);
  display: block;
}
.tvideo__cap {
  margin-top: var(--space-2);
  font-family: var(--display);
  font-style: italic;
  color: var(--warm-brown);
  font-size: var(--fs-md);
  letter-spacing: 0.06em;
}
.tvideo__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border: 1px dashed var(--gold-soft);
  border-radius: 6px;
  padding: var(--space-4);
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* written sections */
.t-section { padding-block: var(--space-5); }

/* gallery masonry reuses .bc-masonry; give the many cards varied hand-placed tilts */
.tpage .testimonial img { transform: rotate(-0.6deg) translateY(2px); }
.tpage .testimonial:nth-child(4n+1) img { transform: rotate(-1.1deg) translateY(3px); }
.tpage .testimonial:nth-child(4n+2) img { transform: rotate(0.8deg)  translateY(-2px); }
.tpage .testimonial:nth-child(4n+3) img { transform: rotate(-0.4deg) translateY(4px); }
.tpage .testimonial:nth-child(4n)   img { transform: rotate(1deg)    translateY(-3px); }

/* closing CTA */
.t-cta {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  padding-block: var(--space-6) var(--space-8);
}
.t-cta__line {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: var(--space-4);
}
.t-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* =========================================================
   1:1 PAGE — serene lift (calm sepia: warmer candlelight + sparse doodles)
   scoped to .onepage so it never touches the colorful BC page
   ========================================================= */

/* a touch more candlelit warmth so the cream feels alive, not flat (still dusk) */
body.onepage::before {
  background:
    radial-gradient(ellipse 950px 720px at 22% 8%,  rgba(255, 236, 200, 0.72), transparent 60%),
    radial-gradient(ellipse 760px 920px at 82% 92%, rgba(252, 214, 188, 0.42), transparent 64%),
    radial-gradient(ellipse 620px 620px at 60% 48%, rgba(255, 228, 190, 0.20), transparent 70%);
  mix-blend-mode: screen;
}

/* content sits above the doodle layer */
.onepage main > section { position: relative; z-index: 1; }

/* sparse hand-drawn doodles — warm sepia/gold/rose, behind the content, never busy */
.one-doodles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.one-doodle { position: absolute; display: block; pointer-events: none; opacity: 0.42; }
.one-doodle--1 { top: 3%;  left: 84%; width: 66px; }   /* line-sun (gold) — by the hero */
.one-doodle--2 { top: 13%; left: 6%;  width: 96px; }   /* squiggle (rose) — by the mirror */
.one-doodle--3 { top: 19%; left: 82%; width: 36px; }   /* star (gold) — by "a way through" */
.one-doodle--4 { top: 47%; left: 5%;  width: 52px; }   /* flourish (sepia) — midway */
.one-doodle--5 { top: 68%; left: 85%; width: 34px; }   /* star (rose) — by investment */
.one-doodle--6 { top: 88%; left: 7%;  width: 96px; }   /* squiggle (gold) — by the close */

@media (max-width: 700px) {
  .one-doodle { opacity: 0.32; }
  .one-doodle--3, .one-doodle--5 { display: none; }
}

/* =========================================================
   HOMEPAGE — the warm front door (calm, serene, premium)
   ========================================================= */

/* same candlelit warmth as the 1:1 page */
body.homepage::before {
  background:
    radial-gradient(ellipse 950px 720px at 22% 8%,  rgba(255, 236, 200, 0.7), transparent 60%),
    radial-gradient(ellipse 760px 920px at 82% 92%, rgba(252, 214, 188, 0.4), transparent 64%),
    radial-gradient(ellipse 620px 620px at 60% 48%, rgba(255, 228, 190, 0.18), transparent 70%);
  mix-blend-mode: screen;
}
.homepage main > section { position: relative; z-index: 1; }

/* a couple of soft sepia/gold doodles, behind content */
.home-doodles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.home-doodle { position: absolute; display: block; pointer-events: none; opacity: 0.4; }
.home-doodle--1 { top: 5%;  left: 84%; width: 62px; }   /* line-sun (gold) */
.home-doodle--2 { top: 9%;  left: 8%;  width: 32px; }   /* star (rose) */
.home-doodle--3 { top: 74%; left: 6%;  width: 92px; }   /* squiggle (gold) near the press */

/* hero — warm welcome */
.home-hero {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--space-5);
}
.home-hero__title {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.1rem);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.home-hero__sub {
  margin-top: var(--space-3);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 32rem;
  margin-inline: auto;
}
.home-hero__sub .handwritten { font-size: 1.08em; }

/* the three doors */
.home-doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 1000px;
  margin-inline: auto;
  padding-block: var(--space-5) var(--space-6);
}
@media (min-width: 780px) {
  .home-doors { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: stretch; }
}
@media (max-width: 779px) {
  /* narrower, centered, inset — reads like stacked doorways instead of full-width banners */
  /* grid-auto-rows:1fr makes the stacked cards equal height (the "explore →" stays pinned bottom) */
  .home-doors { max-width: 19rem; gap: var(--space-3); grid-auto-rows: 1fr; }
}

.door {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: clamp(2.25rem, 1.5rem + 2vw, 3.25rem) var(--space-4) var(--space-5);
  border: 1px solid var(--gold-soft);
  border-radius: 160px 160px 12px 12px;     /* archway / doorway silhouette */
  background: rgba(255, 250, 240, 0.4);
  color: var(--ink);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s ease;
}
.door:hover,
.door:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(184, 148, 107, 0.18);
  border-color: var(--rose);
  outline: none;
}
.door__title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--ink);
  line-height: 1.2;
  margin-top: var(--space-2);
}
.door__desc {
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 22em;
}
.door__cta {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--rose-deep);
  letter-spacing: 0.03em;
  transition: gap 0.3s ease;
}

/* quiet press band */
.home-press { padding-block: var(--space-5) var(--space-6); }

@media (max-width: 700px) {
  .home-doodle--2 { display: none; }
}

/* =========================================================
   BC TESTIMONIALS — three even columns (5 letters)
   The two long letters each fill their own column; the three
   short ones stack in the third column to match their height.
   All three columns end at the same place. Compact + even.
   ========================================================= */
.bc-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items: start;
  max-width: 1000px;
  margin-inline: auto;
}
.bc-cols .bc-col {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.bc-cols .testimonial { margin: 0; }

/* mobile — flatten the three columns into a 2-column masonry */
@media (max-width: 720px) {
  .bc-cols {
    display: block;
    column-count: 2;
    column-gap: var(--space-2);
    max-width: 30rem;
  }
  .bc-cols .bc-col { display: contents; }
  .bc-cols .testimonial {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: block;
    width: 100%;
    margin: 0 0 var(--space-2);
  }
}

/* =========================================================
   HOMEPAGE PULL-QUOTES — three voices, airy + centered
   ========================================================= */
.home-quotes {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  text-align: center;
}
.home-quote {
  margin: 0;
  max-width: 38rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.08rem + 0.7vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink);
}
.home-quotes__more {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--rose-deep);
  letter-spacing: 0.03em;
}

/* =========================================================
   1:1 INVESTMENT PULL-QUOTES — two voices framing the pricing
   ========================================================= */
.invest-quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-4) auto var(--space-5);
}
@media (min-width: 720px) {
  .invest-quotes {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
    max-width: 52rem;
  }
}
.invest-quote {
  margin: 0 auto;
  max-width: 30rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.42rem);
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
}

/* =========================================================
   1:1 PRICING CARDS — clickable, jump to the application form
   ========================================================= */
.onepage a.bc-card {
  text-decoration: none;
  color: inherit;
}
.onepage .bc-card__cta {
  margin-top: var(--space-2);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--rose-deep);
  letter-spacing: 0.05em;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.onepage a.bc-card:hover .bc-card__cta { opacity: 1; }