/* Self-hosted fonts (same latin-subset files as v2), preloaded in the page head so the layout
   doesn't reflow when the web fonts arrive. Replaces the design export's Google Fonts link. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 100% 125%; font-display: swap; src: url(/fonts/v2/archivo-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/fonts/v2/instrument-sans-latin.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 500; font-display: swap; src: url(/fonts/v2/fraunces-italic-latin.woff2) format("woff2"); }

/* ==========================================================================
   Think & Thin Thrive — Holiday Edition
   Theme layer on top of Bootstrap 5.3. Bootstrap handles layout (container,
   grid, navbar, modal, utilities); this file holds the brand look.
   Load AFTER bootstrap.min.css.
   ========================================================================== */

:root {
  --cloud: #F4F3F1; --sand: #E7E1D8; --fuchsia: #C05083; --lilac: #BB92C7; --lava: #CF5A4F;
  --sea: #37808A; --sea-deep: #2F737C; --wave: #B3CEC6; --blush: #F2C6BF; --mint: #DDE9E4;
  --ink: #232323; --white: #FFFFFF; --muted: #5E5A57; --bubble: #EFEDEA; --line: rgba(35,35,35,.14);
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-accent: "Fraunces", Georgia, "Times New Roman", serif;

  /* Bootstrap variable overrides */
  --bs-body-font-family: var(--f-body);
  --bs-body-font-size: 17px;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--cloud);
  --bs-link-color: inherit;
  --bs-link-hover-color: var(--fuchsia);
  --bs-border-radius: 6px;
  color-scheme: light;
}

/* ---------- base (undo the Bootstrap reboot bits the design doesn't use) */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p, h1, h2, h3, h4, figure { margin: 0; }
strong, b { font-weight: 650; }
.container { --bs-gutter-x: 40px; }
@media (min-width: 1200px) { .container { max-width: 1180px; } }
section { padding-block: clamp(64px, 9vw, 120px); }

.bg-cloud { background: var(--cloud); }
.bg-sand { background: var(--sand); }
.bg-sea { background: var(--sea); color: var(--white); }
.bg-fuchsia { background: var(--fuchsia); color: var(--white); }
.bg-lilac { background: var(--lilac); color: var(--ink); }

.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-lg { display: flex; flex-direction: column; gap: 32px; }
.sticky-col { align-self: flex-start; }
@media (min-width: 992px) { .sticky-col { position: sticky; top: 110px; } }

/* ---------- type */
.eyebrow { font-family: var(--f-display); font-weight: 650; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; font-stretch: 110%; }
.display { font-family: var(--f-display); font-weight: 760; font-stretch: 122%; text-transform: uppercase; line-height: .98; letter-spacing: -.005em; text-wrap: balance; margin: 0; }
h1.display { font-size: clamp(2.5rem, 6.4vw, 5.4rem); }
h2.display { font-size: clamp(2rem, 4.6vw, 3.6rem); }
h3.display { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.1; }
.accent { font-family: var(--f-accent); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-stretch: 100%; }
.lede { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.5; }
.big-statement { font-family: var(--f-display); font-weight: 600; font-stretch: 105%; font-size: clamp(1.5rem, 3.1vw, 2.45rem); line-height: 1.18; text-wrap: balance; }
.muted { color: var(--muted); }
.small { font-size: 14px; line-height: 1.5; }
.text-fuchsia { color: var(--fuchsia); }
.text-sea { color: var(--sea); }
.text-wave { color: var(--wave); }

/* ---------- buttons (use together with Bootstrap's .btn) */
.btn-brand {
  --bs-btn-padding-x: 30px; --bs-btn-padding-y: 18px; --bs-btn-font-size: 14px;
  --bs-btn-border-radius: 999px; --bs-btn-border-width: 0;
  --bs-btn-color: var(--white); --bs-btn-bg: var(--fuchsia);
  --bs-btn-hover-color: var(--white); --bs-btn-hover-bg: var(--lava);
  --bs-btn-active-color: var(--white); --bs-btn-active-bg: var(--lava);
  --bs-btn-focus-box-shadow: none;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-display); font-weight: 700; font-stretch: 115%;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
  align-self: flex-start; transition: background .2s, transform .2s;
}
.btn-brand::after { content: "→"; font-family: var(--f-body); letter-spacing: 0; font-size: 17px; transition: transform .2s; }
.btn-brand:hover::after { transform: translateX(4px); }
.btn-brand:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--lava); outline-offset: 3px; }
.bg-fuchsia .btn-brand, .bg-sea .btn-brand {
  --bs-btn-bg: var(--white); --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: var(--sand); --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--sand); --bs-btn-active-color: var(--ink);
}
.cta-block { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cta-block .note { font-size: 14px; max-width: 46ch; opacity: .8; }
.cta-block .urgent { font-family: var(--f-display); font-weight: 650; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-stretch: 110%; color: var(--lava); }
.bg-fuchsia .cta-block .urgent, .bg-sea .cta-block .urgent { color: var(--white); }
.cta-block.text-center { align-items: center; }
.cta-block.text-center .btn-brand { align-self: center; }

/* ---------- navbar */
.site-nav { background: rgba(244,243,241,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-block: 14px; }
.wordmark { font-family: var(--f-display); font-weight: 800; font-stretch: 125%; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: inherit; }
.wordmark .accent { color: var(--fuchsia); font-size: 21px; margin-left: 4px; font-weight: 500; }
.site-nav .navbar-brand { padding: 0; margin-right: 24px; color: var(--ink); }
.site-nav .nav-link { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); opacity: .75; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus { opacity: 1; color: var(--fuchsia); }
@media (min-width: 992px) { .site-nav .navbar-nav { gap: 10px; } }
.site-nav .btn-brand { --bs-btn-padding-x: 18px; --bs-btn-padding-y: 11px; --bs-btn-font-size: 12px; white-space: nowrap; }
.site-nav .btn-brand::after { display: none; }
.site-nav .navbar-toggler { border: 0; padding: 6px; }
.site-nav .navbar-toggler:focus { box-shadow: none; outline: 3px solid var(--lava); }
@media (max-width: 991.98px) { .site-nav .navbar-collapse .navbar-nav { padding-top: 12px; } }
@media (max-width: 480px) {
  .site-nav .btn-brand { --bs-btn-padding-x: 13px; --bs-btn-padding-y: 9px; --bs-btn-font-size: 11px; }
  .site-nav .wordmark { font-size: 15px; } .site-nav .wordmark .accent { font-size: 17px; }
}

/* ---------- hero */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 110px); }
.hero h1 .accent { display: block; color: var(--sea); font-size: 1.08em; margin-top: .12em; }
.hero-media { position: relative; min-width: 0; isolation: isolate; }
.hero-photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 20%; border-radius: 6px; }
.hero-media::before { content: ""; position: absolute; inset: 28px -18px -18px 28px; background: var(--wave); border-radius: 6px; z-index: -1; }
.hero .video-card { position: absolute; left: 18px; bottom: 18px; width: 56%; border: 3px solid var(--white); box-shadow: 0 14px 30px rgba(35,35,35,.3); }
.hero .video-card .play { padding: 12px 14px; }
.hero .video-card .play-btn { width: 52px; height: 52px; }
.hero .stack-lg > .lede { border-left: 3px solid var(--fuchsia); padding-left: clamp(14px, 2vw, 20px); max-width: 46ch; }
.hero .stack-lg > .lede em:first-child { display: block; font-style: normal; font-family: var(--f-display); font-weight: 650; font-stretch: 105%; font-size: 1.08em; line-height: 1.3; margin-bottom: 10px; color: var(--ink); }
.hero .stack-lg > .lede strong:not(:last-child) { background: linear-gradient(transparent 58%, var(--blush) 58%); padding: 0 2px; }
.hero .stack-lg > .lede strong:last-child { display: block; margin-top: 12px; font-family: var(--f-accent); font-style: italic; font-weight: 400; color: var(--fuchsia); font-size: 1.3em; line-height: 1.2; }
@media (max-width: 991.98px) {
  .hero .video-card { left: 12px; bottom: 12px; width: 66%; }
  .hero-media::before { inset: 20px -10px 60% 20px; }
}

/* ---------- video cards / tiles */
.video-card { display: block; position: relative; border-radius: 6px; overflow: hidden; text-decoration: none; color: var(--white); background: var(--ink); aspect-ratio: 16/9; max-width: 100%; }
.video-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.video-card:hover img { transform: scale(1.03); }
.video-card .play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 18px; background: linear-gradient(180deg, rgba(35,35,35,0) 40%, rgba(35,35,35,.65)); }
.play-btn { width: 54px; height: 54px; flex: none; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.play-btn::before { content: ""; border-left: 15px solid var(--fuchsia); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.video-card .label { font-family: var(--f-display); font-weight: 700; font-stretch: 115%; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.video-tile { background: var(--fuchsia); }
.video-tile.t-sea { background: var(--sea); } .video-tile.t-lava { background: var(--lava); } .video-tile.t-ink { background: var(--ink); }
.video-tile .play { background: none; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 20px; }
.video-tile .who { font-family: var(--f-display); font-weight: 780; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1; }
.video-tile .who small { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; text-transform: none; font-size: .5em; font-stretch: 100%; margin-top: 6px; opacity: .9; }
.video-card[data-video-slot="weight-loss"] { box-shadow: 16px 16px 0 var(--fuchsia); margin-right: 16px; margin-bottom: 16px; }
[data-bs-toggle="modal"] { cursor: pointer; }

.video-ph { display: block; position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16/9; color: var(--white); }
.video-ph .play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 20px; }
.video-ph .soon { font-family: var(--f-display); font-weight: 700; font-stretch: 115%; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }

/* video modal */
.video-modal .modal-content { background: transparent; border: 0; }
.video-modal .ratio { background: var(--ink); border-radius: 8px; overflow: hidden; }
.video-modal .btn-close { position: absolute; top: -40px; right: 0; filter: invert(1); opacity: .9; }
.video-modal .modal-dialog { margin-top: 64px; }

/* reels (student clips) */
.reels { max-width: 860px; margin-inline: auto; }
.reel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.reel .video-ph { aspect-ratio: 9/16; border-radius: 30px; border: 8px solid var(--ink); box-shadow: 12px 12px 0 var(--lilac); margin-right: 12px; margin-bottom: 12px; }
.reel .video-ph[data-video-slot="clip-2"] { box-shadow: 12px 12px 0 var(--wave); }
.reel .video-ph[data-video-slot="clip-3"] { box-shadow: 12px 12px 0 var(--blush); }
.reel .video-ph .play { padding: 16px; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; text-align: center; }
.reel h4 { font-family: var(--f-display); font-weight: 720; font-stretch: 115%; text-transform: uppercase; font-size: 15px; letter-spacing: .06em; text-align: center; line-height: 1.3; }
@media (max-width: 767.98px) { .reels { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; } .reels > * { scroll-snap-align: center; } }

/* inline Vimeo embeds (reels + weight-loss tile), ported from v2 */
.reel-embed { position: absolute; inset: 0; overflow: hidden; }
.video-ph iframe, .video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
/* reel sources are 4:5, so fill the 9:16 phone frame like object-fit: cover (sides are cropped) */
.reel .reel-embed iframe { inset: 0 auto auto 50%; transform: translateX(-50%); height: 100%; width: auto; min-width: 100%; aspect-ratio: 4/5; }
.reel-play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.reel-embed.is-playing .reel-play { display: none; }
/* the side crop hides Vimeo's own pause button, so while a reel plays the overlay stays on top
   as a tap-to-pause target with a small pause badge */
.reel .reel-embed.is-playing .reel-play { display: block; }
.reel .reel-embed.is-playing .reel-play .play-btn { display: none; }
.reel .reel-embed.is-playing .reel-play::after { content: ""; position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(35,35,35,.55) linear-gradient(90deg, transparent 12px, #fff 12px, #fff 15px, transparent 15px, transparent 19px, #fff 19px, #fff 22px, transparent 22px) no-repeat center/34px 14px; }

/* ---------- photos with offset colour block */
.photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 6px; }
.photo.offset { position: relative; isolation: isolate; }
.photo.offset::before { content: ""; position: absolute; inset: -18px 24px 24px -18px; border-radius: 6px; z-index: -1; background: var(--lilac); }
.photo.offset.o-sea::before { background: var(--sea); } .photo.offset.o-lava::before { background: var(--lava); }
.photo.offset.o-wave::before { background: var(--wave); } .photo.offset.o-fuchsia::before { background: var(--fuchsia); }
@media (max-width: 991.98px) { .photo { max-width: 460px; margin-left: 18px; } }

/* ---------- why the holidays */
.why-hol { background: var(--mint); color: var(--ink); position: relative; overflow: hidden; }
.why-hol::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10% 15%, rgba(255,255,255,.7), transparent 40%), radial-gradient(circle at 90% 90%, rgba(179,206,198,.9), transparent 45%); pointer-events: none; }
.why-hol .container { position: relative; }
.why-hol-top { display: flex; flex-direction: column; gap: 16px; }
.why-hol .eyebrow { color: var(--sea); }
.why-hol-big { font-family: var(--f-display); font-weight: 600; font-stretch: 105%; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.2; color: var(--ink); text-wrap: balance; }
.why-hol-body { display: flex; flex-direction: column; gap: 18px; }
.why-hol-triggers { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px; padding-left: 4px; }
.why-hol-triggers span { position: relative; padding-left: 26px; font-family: var(--f-accent); font-style: italic; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; color: var(--ink); }
.why-hol-triggers span::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--lava); box-shadow: 0 0 0 4px rgba(207,90,79,.18); }
.why-hol-triggers span:nth-child(2)::before { background: var(--sea); box-shadow: 0 0 0 4px rgba(55,128,138,.18); }
.why-hol-triggers span:nth-child(3)::before { background: var(--fuchsia); box-shadow: 0 0 0 4px rgba(192,80,131,.18); }
.why-hol-body > p { font-size: clamp(17px, 1.5vw, 19px); }
.why-hol-vs .vs-item { border-radius: 6px; padding: 18px; height: 100%; }
.why-hol-vs p { font-size: 16px; line-height: 1.4; }
.why-hol-vs .alone { background: rgba(255,255,255,.55); border: 1px solid rgba(55,128,138,.25); }
.why-hol-vs .alone p { opacity: .8; }
.why-hol-vs .coach { background: var(--sea); color: var(--white); box-shadow: 8px 8px 0 var(--blush); }
.why-hol-vs .coach p { font-weight: 600; }
.why-hol-close { margin: clamp(8px, 2vw, 20px) auto 0; max-width: 780px; width: calc(100% - 12px); background: var(--lava); color: var(--white); border-radius: 6px; padding: clamp(22px, 3vw, 34px) clamp(20px, 3.5vw, 44px); box-shadow: 12px 12px 0 var(--wave); text-align: center; font-family: var(--f-display); font-weight: 600; font-size: clamp(13px, 1.2vw, 15px); letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
.why-hol-close strong { display: block; margin-top: 10px; font-family: var(--f-display); font-weight: 760; font-stretch: 110%; letter-spacing: 0; text-transform: uppercase; font-size: clamp(20px, 2.3vw, 28px); line-height: 1.18; color: var(--white); }
.why-hol-proof { max-width: 920px; margin-inline: auto; }
.why-hol-proof > div > img { width: 100%; height: auto; }
.why-hol-proof .dm { box-shadow: 12px 12px 0 var(--blush); }
@media (max-width: 767.98px) { .why-hol-proof > div > img { max-width: 420px; margin: 0 auto; } }

/* ---------- study stat */
.stat-big { font-family: var(--f-display); font-weight: 800; font-stretch: 125%; color: var(--lava); font-size: clamp(4.5rem, 11vw, 9rem); line-height: .85; letter-spacing: -.02em; }
.stat-big .accent { font-size: .42em; color: var(--ink); display: block; margin-top: .35em; line-height: 1.1; letter-spacing: 0; font-weight: 400; }
.stat-src { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 22px; font-size: 13px; letter-spacing: .04em; color: var(--muted); }

/* ---------- echo card */
.echo-card { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(24px, 4vw, 56px); background: var(--ink); color: var(--white); border-radius: 6px; padding: clamp(28px, 4.5vw, 56px); box-shadow: 16px 16px 0 var(--lava); margin-right: 16px; }
.echo-left { display: flex; flex-direction: column; gap: 18px; }
.echo-left h3 { color: var(--wave); font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.echo-q { font-family: var(--f-accent); font-style: italic; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }
.echo-right { display: flex; flex-direction: column; gap: 14px; border-left: 1px solid rgba(255,255,255,.2); padding-left: clamp(24px, 4vw, 56px); }
.echo-right p { opacity: .92; }
.echo-a { font-family: var(--f-accent); font-style: italic; color: var(--blush); font-size: clamp(40px, 5vw, 64px); line-height: 1; opacity: 1 !important; }
.echo-right strong { color: var(--blush); }
.echo-punch { font-family: var(--f-display); font-weight: 780; font-stretch: 112%; text-transform: uppercase; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.25; color: var(--white); background: var(--lava); padding: 14px 18px; border-radius: 6px; opacity: 1 !important; margin-top: 6px; }
@media (max-width: 991.98px) {
  .echo-card { grid-template-columns: 1fr; margin-right: 12px; box-shadow: 12px 12px 0 var(--lava); }
  .echo-right { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding-top: 22px; }
}

/* ---------- three-up points */
.points { margin-top: 0; border-top: 1px solid var(--line); }
.point { display: flex; flex-direction: column; gap: 10px; }
.points h3 { font-family: var(--f-display); font-weight: 720; font-stretch: 115%; text-transform: uppercase; font-size: 15px; letter-spacing: .08em; color: var(--sea); }

/* ---------- 12 blockers band */
.discovery .container { max-width: 980px; }
.discovery .pill { display: inline-block; background: var(--white); color: var(--sea); font-family: var(--f-display); font-weight: 700; font-stretch: 115%; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding: 12px 20px; border-radius: 999px; align-self: flex-start; }
.blockers { display: flex; flex-direction: column; gap: 14px; max-width: 64ch; border-left: 3px solid var(--wave); padding-left: clamp(18px, 3vw, 28px); }
.blockers p { opacity: .95; }
.blockers-lead { font-family: var(--f-display); font-weight: 760; font-stretch: 112%; text-transform: uppercase; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.2; }
.rules { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0; }
.rules span { font-family: var(--f-accent); font-style: italic; font-size: clamp(17px, 1.6vw, 20px); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 8px 16px; }
.blockers strong { color: var(--white); }
.blockers-why { font-family: var(--f-accent); font-style: italic; font-size: clamp(24px, 2.6vw, 30px); color: var(--white); }

/* ---------- about: timeline + press */
.story { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.story::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--lilac), var(--fuchsia)); }
.story li { position: relative; padding: 0 0 30px 40px; display: flex; flex-direction: column; gap: 6px; }
.story li:last-child { padding-bottom: 0; }
.story li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--cloud); border: 3px solid var(--fuchsia); box-sizing: border-box; }
.story li.now { background: var(--sand); border-radius: 6px; padding: 20px 22px 20px 40px; }
.story li.now::before { background: var(--fuchsia); top: 23px; }
.story-n { font-family: var(--f-display); font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sea); }
.story h3 { font-family: var(--f-display); font-weight: 760; font-stretch: 112%; text-transform: uppercase; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.15; }
.story p { max-width: 56ch; }
.story-quote { font-family: var(--f-accent); font-style: italic; color: var(--fuchsia); font-size: clamp(28px, 3vw, 38px); line-height: 1.1; padding: 6px 0; }
.press { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; color: var(--muted); opacity: .75; }
.press span { white-space: nowrap; line-height: 1; }
.press-box { margin-top: 14px; background: var(--sand); border-left: 5px solid var(--fuchsia); border-radius: 6px; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 10px 10px 0 var(--wave); }
.press-box .eyebrow { font-size: clamp(16px, 1.6vw, 20px); letter-spacing: .14em; color: var(--fuchsia); }
.press-box .press { opacity: .9; color: var(--ink); }
.p-pt { font-family: var(--f-display); font-weight: 700; font-stretch: 75%; font-size: 21px; letter-spacing: -.01em; }
.p-shape { font-family: var(--f-display); font-weight: 600; font-stretch: 110%; font-size: 20px; letter-spacing: .14em; }
.p-wh { font-family: var(--f-accent); font-size: 21px; letter-spacing: -.02em; }
.p-fit { font-family: var(--f-display); font-weight: 800; font-stretch: 100%; font-size: 24px; letter-spacing: -.03em; }

/* ---------- method */
.method-steps { list-style: none; padding: 0; counter-reset: ms; }
.method-steps .step { counter-increment: ms; background: var(--white); border-radius: 6px; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 6px; height: 100%; }
.method-steps .step::before { content: counter(ms); font-family: var(--f-display); font-weight: 800; font-size: 15px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fuchsia); color: var(--white); margin-bottom: 4px; }
.method-steps h3 { font-family: var(--f-display); font-weight: 780; font-stretch: 115%; text-transform: uppercase; font-size: clamp(18px, 1.7vw, 21px); }
.method-steps p { font-size: 15px; line-height: 1.45; }
.method-steps .step.magic { background: var(--fuchsia); color: var(--white); box-shadow: 8px 8px 0 var(--lilac); }
.method-steps .step.magic::before { background: var(--white); color: var(--fuchsia); }
@media (max-width: 767.98px) {
  .method-steps .step { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .method-steps .step p { flex-basis: 100%; }
  .method-steps .step::before { margin: 0; }
}
.method-note { border-left: 4px solid var(--fuchsia); padding-left: 16px; }
.weeds .weed { border-radius: 6px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; border: 1px solid rgba(35,35,35,.15); height: 100%; }
.weeds span { font-family: var(--f-display); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.weeds p { font-family: var(--f-accent); font-style: italic; font-size: 19px; line-height: 1.25; }
.weeds .root { background: var(--sea); color: var(--white); border-color: var(--sea); }
.weeds .root span { opacity: .9; color: var(--wave); }
.method-quote { font-size: clamp(24px, 2.4vw, 30px); }

/* ---------- DM (instagram-message) testimonials */
.dm { background: var(--white); border-radius: 22px; padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 0 var(--line), 0 12px 30px rgba(35,35,35,.06); color: var(--ink); min-width: 0; max-width: 560px; }
.dm.feature { max-width: none; }
.dm.feature .bubble { font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.dm-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.dm-head b { font-size: 15px; display: block; line-height: 1.2; }
.dm-head small { font-size: 12px; color: var(--muted); }
.dm-head:has(.headshot) b { font-size: 17px; }
.av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--ink); background: var(--sand); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--fuchsia); }
.av.c2 { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--lava); }
.av.c3 { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--sea); }
.av.c4 { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--lilac); }
.av.headshot { width: clamp(80px, 9vw, 104px); height: clamp(80px, 9vw, 104px); position: relative; overflow: hidden; font-size: 0; }
.av.headshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.av.headshot img.ring, .who-row img.ring { transform: scale(1.32); }
.bubble { background: var(--bubble); border-radius: 20px 20px 20px 6px; padding: 12px 16px; font-size: 15.5px; line-height: 1.5; align-self: flex-start; max-width: 94%; position: relative; }
.bubble + .bubble { border-top-left-radius: 6px; }
.bubble.hl { background: var(--fuchsia); color: var(--white); font-weight: 600; }
.bubble.react { margin-bottom: 12px; }
.bubble.react::after { content: "♥"; position: absolute; right: 12px; bottom: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--white); color: var(--lava); font-size: 13px; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(35,35,35,.18); }
.shadow-lilac { box-shadow: 12px 12px 0 var(--lilac) !important; }
.shadow-blush { box-shadow: 12px 12px 0 var(--blush) !important; }
.coach-row .dm { max-width: none; }

/* ---------- who it's for */
.choices .choice { border: 1.5px solid rgba(255,255,255,.55); border-radius: 6px; padding: 18px; display: flex; flex-direction: column; gap: 6px; height: 100%; }
.choices span { font-family: var(--f-display); font-weight: 700; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.choices p { font-size: 16px; line-height: 1.45; }
.choices .choice:not(.heal) p { opacity: .85; }
.choices .heal { background: var(--white); color: var(--ink); border-color: var(--white); box-shadow: 8px 8px 0 var(--lilac); }
.choices .heal span { color: var(--fuchsia); opacity: 1; }
.choices .heal p { font-family: var(--f-accent); font-style: italic; font-size: 20px; line-height: 1.25; }
.small-group { font-family: var(--f-accent); font-style: italic; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; margin: 6px 0; }
.nomore { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-display); font-weight: 700; font-stretch: 118%; text-transform: uppercase; font-size: clamp(1.15rem, 2.4vw, 1.7rem); line-height: 1.15; }
.nomore span { display: block; }
.results-box { background: var(--white); color: var(--ink); border-radius: 6px; padding: clamp(22px, 3vw, 34px); box-shadow: 12px 12px 0 var(--lilac); display: flex; flex-direction: column; gap: 18px; }
.results-h { font-family: var(--f-display); font-weight: 780; font-stretch: 115%; text-transform: uppercase; font-size: clamp(18px, 1.8vw, 22px); }
.stats { border-top: 2px solid var(--fuchsia); }
.stat { padding: 22px 22px 0 0; display: flex; flex-direction: column; gap: 6px; height: 100%; }
.stats .num { font-family: var(--f-display); font-weight: 800; font-stretch: 125%; font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 1; color: var(--fuchsia); font-variant-numeric: tabular-nums; }
.stats .num small { font-size: .38em; margin-left: 4px; color: var(--ink); }
.stats .lbl { font-size: 14px; color: var(--muted); line-height: 1.4; }
@media (min-width: 768px) { .stats > div + div .stat { padding-left: 22px; border-left: 1px solid var(--line); } }
@media (max-width: 767.98px) { .stat { padding: 16px 0; } .stats > div + div .stat { border-top: 1px solid var(--line); } }
.reports-wrap { display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.reports-intro { font-family: var(--f-display); font-weight: 700; font-stretch: 115%; text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.15; text-wrap: balance; }
.reports { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.35); }
.reports div { padding: 16px 0 16px 50px; border-bottom: 1px solid rgba(255,255,255,.35); position: relative; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.4; font-weight: 500; }
.reports div::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--white); }
.reports div::after { content: ""; position: absolute; left: 9px; top: 50%; width: 12px; height: 7px; border-left: 2.5px solid var(--fuchsia); border-bottom: 2.5px solid var(--fuchsia); transform: translateY(-75%) rotate(-45deg); }
.ba-photos figure { display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 100%; }
.ba-photos figure img { align-self: end; width: 100%; height: auto; }
.ba-photos figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-left: 8px; }
.ba-photos b { font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 22px; }
.ba-photos span { font-family: var(--f-display); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; background: var(--white); color: var(--fuchsia); padding: 4px 10px; border-radius: 999px; }

/* ---------- what you get */
#what-you-get .program-intro { max-width: 68ch; display: flex; flex-direction: column; gap: 14px; align-items: center; }
#what-you-get .program-intro > .stack { align-items: center; gap: 10px; }
#what-you-get .program-intro h3.display { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.phases-head { text-align: center; align-items: center; margin-top: clamp(8px, 2vw, 24px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(255,255,255,.25); }
.phases-head h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.camps3 { counter-reset: ph; }
.phase { counter-increment: ph; position: relative; border-radius: 8px; padding: 30px 26px 28px; color: var(--ink); overflow: hidden; display: flex; flex-direction: column; gap: 8px; height: 100%; }
.phase::after { content: counter(ph); position: absolute; right: 16px; top: -4px; font-family: var(--f-display); font-weight: 800; font-size: 78px; line-height: 1; opacity: .13; pointer-events: none; }
.camps3 > div:nth-child(1) .phase { background: var(--wave); }
.camps3 > div:nth-child(2) .phase { background: var(--blush); }
.camps3 > div:nth-child(3) .phase { background: var(--white); box-shadow: 10px 10px 0 var(--fuchsia); }
.camps3 > div:nth-child(1) .camp-n { color: var(--sea); }
.camps3 > div:nth-child(2) .camp-n { color: var(--lava); }
.camps3 > div:nth-child(3) .camp-n, .camps3 > div:nth-child(3) h3 { color: var(--fuchsia); }
.camps3 h3 { font-family: var(--f-display); font-weight: 760; font-stretch: 115%; text-transform: uppercase; font-size: 20px; padding-right: 54px; }
.camp-n { font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding-right: 54px; }
.camp-q { font-family: var(--f-accent); font-style: italic; font-size: 16.5px; line-height: 1.35; padding-bottom: 10px; border-bottom: 1px solid rgba(35,35,35,.15); }
.camps3 p { font-size: 15.5px; }
.camps3 strong { color: inherit; }
.gets { border-top: 1px solid rgba(255,255,255,.25); border-left: 1px solid rgba(255,255,255,.25); border-radius: 6px; overflow: hidden; }
.get { background: var(--sea); padding: 26px; display: flex; flex-direction: column; gap: 8px; height: 100%; border-right: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); }
.gets h3 { font-family: var(--f-display); font-weight: 720; font-stretch: 115%; text-transform: uppercase; font-size: 16px; letter-spacing: .06em; line-height: 1.25; }
.gets p { opacity: .88; font-size: 15.5px; }
.gets.donts .get { background: var(--sea-deep); }
.gets.donts h3::before { content: "\2715  "; color: var(--wave); }
.bonus-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.bonus-head .display { color: var(--wave); }

/* ---------- outcomes */
.outcome { background: var(--white); border-radius: 6px; padding: 26px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.tag { align-self: flex-start; background: var(--wave); color: var(--ink); font-family: var(--f-display); font-weight: 700; font-stretch: 112%; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; }
.outcomes > div:nth-child(2) .tag { background: var(--lilac); }
.outcomes > div:nth-child(3) .tag { background: var(--sand); }
.outcomes > div:nth-child(4) .tag { background: var(--blush); }
.outcome .who { font-family: var(--f-accent); font-style: italic; font-size: 19px; color: var(--fuchsia); }
.who-row { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.who-pic { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--fuchsia); background: var(--white); }
.who-pic img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- letter + promise */
.letter { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.questions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.questions li { font-family: var(--f-display); font-weight: 600; font-stretch: 104%; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.35; padding: 18px 0 18px 44px; border-bottom: 1px solid var(--line); position: relative; }
.questions li::before { content: "?"; position: absolute; left: 0; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--lava); color: var(--white); font-size: 15px; display: grid; place-items: center; font-weight: 800; }
.yes { font-family: var(--f-accent); font-style: italic; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.15; color: var(--fuchsia); }
.wide-photo { margin-block: 20px; }
.wide-photo img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 6px; }
.signoff { font-family: var(--f-accent); font-style: italic; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.signoff small { display: block; font-family: var(--f-display); font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; color: var(--lava); }
.promise-card { position: relative; background: var(--white); border-radius: 10px; padding: clamp(34px, 4.5vw, 52px) clamp(22px, 4.5vw, 52px) clamp(28px, 4vw, 40px); box-shadow: 10px 10px 0 var(--blush), 0 14px 30px rgba(35,35,35,.06); display: flex; flex-direction: column; gap: 16px; margin: 12px 10px 8px 0; text-align: center; align-items: center; }
.promise-card::before { content: ""; position: absolute; top: -12px; left: 50%; width: 120px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(187,146,199,.55); border-radius: 3px; }
.promise-card .lede { font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.45; max-width: 46ch; }
.promise-card > p:not(.yes):not(.lede):not(.signoff) { max-width: 56ch; line-height: 1.6; }
.promise-card .signoff { margin-top: 8px; color: var(--fuchsia); }
.promise-card .signoff small::after { content: " ♥"; color: var(--fuchsia); }
.promise-card + .cta-block { align-items: center; text-align: center; margin-top: 16px; }
.promise-card + .cta-block .btn-brand { align-self: center; }

/* ---------- inbox: phone carousel */
#stories { overflow: hidden; }
.car-ctrl { display: flex; align-items: center; gap: 12px; }
.car-ctrl button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.car-ctrl button:hover { background: var(--ink); color: var(--white); }
.car-count { font-family: var(--f-display); font-weight: 700; font-stretch: 115%; font-size: 14px; letter-spacing: .1em; font-variant-numeric: tabular-nums; min-width: 5.5ch; text-align: center; }
.inbox-hint { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 0; font-family: var(--f-display); font-weight: 650; font-stretch: 110%; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.inbox-hint span { display: inline-flex; align-items: center; gap: 8px; }
.inbox-hint b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 13px; letter-spacing: 0; }
.inbox-track { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 20px 28px; margin-inline: -20px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; overscroll-behavior-x: contain; }
.inbox-slide { flex: none; width: 300px; max-width: calc(100vw - 56px); scroll-snap-align: center; display: flex; flex-direction: column; gap: 16px; margin: 0; }
.inbox-slide figcaption { font-family: var(--f-accent); font-style: italic; font-size: 18px; line-height: 1.3; padding-inline: 6px; text-wrap: balance; }
.phone { position: relative; background: var(--white); border: 10px solid var(--ink); border-radius: 46px; height: 600px; max-height: 78vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 50px rgba(35,35,35,.28); }
.ph-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 4px; font-size: 12px; font-weight: 700; position: relative; }
.ph-status::after { content: ""; position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: 84px; height: 22px; background: var(--ink); border-radius: 20px; }
.ph-status i { font-style: normal; letter-spacing: 1px; font-size: 10px; }
.ph-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px; border-bottom: 1px solid var(--line); }
.ph-head .chev { font-size: 26px; line-height: 1; margin-right: 2px; }
.ph-head .av { width: 32px; height: 32px; font-size: 13px; }
.ph-head b { display: block; font-size: 14px; line-height: 1.2; }
.ph-head small { font-size: 11px; color: var(--muted); }
.ph-body { flex: 1; overflow-y: auto; padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
.ph-body .stamp { align-self: center; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.ph-body .bubble { font-size: 14px; max-width: 88%; }
.ph-input { margin: 8px 12px 14px; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; }
.phone.has-more:not(.at-end) .ph-body { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.ph-more { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: var(--white); border-radius: 999px; padding: 7px 13px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; pointer-events: none; opacity: 0; transition: opacity .3s; box-shadow: 0 6px 16px rgba(35,35,35,.25); }
.phone.has-more:not(.at-end) .ph-more { opacity: 1; }

/* ---------- footer */
.site-footer { background: var(--ink); color: var(--cloud); padding-block: 48px; }
.site-footer .wordmark { color: var(--cloud); }
.site-footer nav { display: flex; gap: 24px; font-size: 14px; }
.site-footer nav a { text-decoration: none; opacity: .75; }
.site-footer nav a:hover { opacity: 1; }
.site-footer .disclaimer { flex-basis: 100%; opacity: .6; max-width: 80ch; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* stacked split layouts: no horizontal gutter so text uses the full width on phones/tablets */
@media (max-width: 991.98px) { .row.g-lg-5 { --bs-gutter-x: 0; } }

/* ---------- holiday edition additions */
mark { background: linear-gradient(transparent 18%, rgba(192,80,131,.3) 18%, rgba(192,80,131,.3) 94%, transparent 94%); color: inherit; font-weight: 700; border-radius: 3px; padding: 0 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-photo[src*="hero-holiday"] { object-position: 50% 55%; }
.hero-media:has(.hero-photo[src*="hero-holiday"]) { margin-bottom: 60px; }
.hero-media:has(.hero-photo[src*="hero-holiday"]) .video-card { left: -36px; bottom: -78px; width: clamp(210px, 42%, 270px); z-index: 2; }
.hero-media:has(.hero-photo[src*="hero-holiday"]) .video-card .label { font-size: 11px; }
@media (max-width: 991.98px) {
  .hero-media:has(.hero-photo[src*="hero-holiday"]) { margin-bottom: 56px; }
  .hero-media:has(.hero-photo[src*="hero-holiday"]) .video-card { left: 10px; bottom: -56px; width: 58%; }
}
.method-dms .dm { max-width: none; }
.method-dms > div:nth-child(1) .dm { box-shadow: 12px 12px 0 var(--lilac); }
.method-dms > div:nth-child(2) .dm { box-shadow: 12px 12px 0 var(--blush); }
.heal-callout { background: var(--fuchsia); color: var(--white); border-radius: 8px; padding: clamp(24px, 3.5vw, 40px) clamp(22px, 4vw, 48px); box-shadow: 12px 12px 0 var(--lilac); text-align: center; max-width: 820px; width: calc(100% - 12px); margin: 0 auto; }
.heal-callout p { font-family: var(--f-display); font-weight: 650; font-stretch: 105%; font-size: clamp(18px, 2vw, 24px); line-height: 1.3; }
.heal-callout strong { display: block; margin-top: 8px; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.3em; line-height: 1.15; }
.students-wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 3vw, 36px); text-align: center; }
.students-wrap > .stack { align-items: center; }
.students-wrap > .video-card { width: min(860px, calc(100% - 16px)); margin: 0 16px 16px 0; text-align: left; }
.fences-sec .outcome { color: var(--ink); }
.fences-sec .outcomes > div:nth-child(1) .outcome { box-shadow: 10px 10px 0 var(--wave); }
.fences-sec .outcomes > div:nth-child(2) .outcome { box-shadow: 10px 10px 0 var(--lilac); }
.fences-sec .outcomes > div:nth-child(3) .outcome { box-shadow: 10px 10px 0 var(--blush); }
.fences-sec .outcomes > div:nth-child(4) .outcome { box-shadow: 10px 10px 0 var(--sand); }
@media (min-width: 992px) { .hero-text { width: 52%; } .hero-img { width: 48%; } }