/* ============================================================
   BodyFlow Energetics: BENEATH THE PATTERN
   Headings: Cormorant Garamond | Body/Labels: Manrope
   ============================================================ */

:root{
  --bone:         #F3ECE0;
  --bone-soft:    #FAF4EA;
  --ink:          #14201B;
  --ink-soft:     #45504A;
  --deep:         #0A1815;
  --deep-2:       #0E1F1B;
  --teal:         #2F5C50;
  --copper:       #B4642F;
  --copper-light: #D08A55;
  --copper-glow:  #E5A46B;
  --copper-deep:  #8C4B23;
  --line-dark:    rgba(245,237,224,0.16);
  --line-light:   rgba(20,32,27,0.14);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container: 1220px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; background: var(--deep); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 40px; width: 100%; }

h1,h2,h3,h4{
  font-family: var(--serif); font-weight: 500; line-height: 1.08;
  letter-spacing: 0.005em; margin: 0;
}
em{ font-style: italic; color: var(--copper); }
.dark em{ color: var(--copper-glow); }
p{ margin: 0 0 16px; }

.label{
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--copper-deep); display: inline-block; margin-bottom: 18px;
}
.dark .label{ color: var(--copper-glow); }

.btn{
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans);
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 21px 36px; border: 1px solid transparent; cursor: pointer; position: relative;
  line-height: 1;
}
.btn-primary{ background: var(--copper); color: var(--bone-soft); }
.btn-primary:hover{ background: var(--copper-deep); }
.link-arrow{
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--copper-deep); border-bottom: 1px solid var(--copper); padding-bottom: 4px;
}
.dark .link-arrow{ color: var(--copper-glow); border-color: var(--copper-glow); }
.cta-row{ display: flex; align-items: center; gap: 30px; flex-wrap: wrap; row-gap: 22px; padding: 6px 0; }
.cta-note{
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft);
  margin-top: 26px;
}
.dark .cta-note{ color: rgba(243,236,224,0.55); }

/* magnetic buttons */
.magnetic{ transition: transform .25s cubic-bezier(.2,.8,.2,1); will-change: transform; }

/* custom cursor dot */
#cursor-dot{
  position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--copper-glow); pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%); transition: width .2s ease, height .2s ease, background .2s ease, opacity .2s ease;
  opacity: 0; mix-blend-mode: difference;
}
#cursor-dot.show{ opacity: 1; }
#cursor-dot.hover{ width: 34px; height: 34px; background: rgba(224,148,85,0.25); }
@media (hover: none), (max-width: 900px){ #cursor-dot{ display: none; } }

/* ---------------- NAV ---------------- */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(10,24,21,0.72); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dark);
}
.nav .wrap{ display: flex; align-items: center; justify-content: space-between; height: 92px; padding-top: 4px; padding-bottom: 4px; }
.nav-logo{ display: flex; align-items: center; gap: 12px; }
.nav-logo img{ height: 40px; width: auto; object-fit: contain; opacity: .97; }
.nav-links{ display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; }
.nav-links a{
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--bone); padding-bottom: 4px; border-bottom: 1px solid transparent;
}
.nav-links a:hover{ border-color: var(--copper-glow); }
.nav-cta{ display:flex; align-items:center; gap: 24px; }
.nav .btn-primary{ padding: 12px 22px; }
.nav-toggle{ display:none; background:none; border:none; padding: 6px; }
.nav-toggle span{ display:block; width: 22px; height: 1px; background: var(--bone); margin: 5px 0; }

/* nav seal: fills as the page is scrolled */
.nav-seal{ width: 30px; height: 30px; flex-shrink: 0; }
.nav-seal circle{ fill: none; stroke-width: 1.1; }
.nav-seal .track{ stroke: rgba(245,237,224,0.18); }
.nav-seal .fill{
  stroke: var(--copper-glow);
  stroke-dasharray: 88; stroke-dashoffset: 88;
  transform-origin: center; transform: rotate(-90deg);
  transition: stroke-dashoffset .15s linear;
}
.nav-seal .dot{ fill: var(--copper-glow); opacity: 0.9; }

/* ---------------- SCREEN / SECTION FRAME ---------------- */
.screen{ position: relative; }
.screen-inner{ position: relative; z-index: 2; }
.dark{ background: var(--deep); color: var(--bone); }
.dark p{ color: rgba(243,236,224,0.75); }
.bone-bg{ background: var(--bone); color: var(--ink); }
.bone-bg p{ color: var(--ink-soft); }

/* ================= SCREEN 01: HERO ================= */
.hero-pin-outer{ position: relative; height: 300vh; }
.hero{
  min-height: 100vh; height: 100vh; display: flex; align-items: center; justify-content: center;
  position: sticky; top: 0; overflow: hidden; padding: 112px 0 72px;
}
.hero::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("images/hero-banner.webp") center right / cover no-repeat;
  opacity: 0.85;
}
.hero::after{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, var(--deep) 0%, rgba(10,24,21,0.86) 32%, rgba(10,24,21,0.35) 62%, rgba(10,24,21,0.15) 100%);
}
.hero-field{ position: absolute; inset: 0; z-index: 1; }
.hero-field svg{ width: 100%; height: 100%; }
.hero-layer{ position: absolute; top: 50%; right: 8%; transform: translateY(-50%); will-change: transform; }
.hero-layer svg{ display: block; }
.hero-content{ position: relative; z-index: 2; max-width: 800px; text-align: left; padding: 0 40px; }
.hero-content .label{ opacity: 0; }
.hero-headline{
  font-size: clamp(2.2rem, 4.6vw, 4.2rem); color: var(--bone); margin-bottom: 22px; line-height: 1.22;
  display: grid;
}
/* all three phase lines stack in the same grid cell (only one is ever visible via opacity),
   so the headline's height is that of a single line, not the sum of all three */
.hero-headline .line{
  grid-area: 1 / 1 / 2 / 2; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em;
  align-self: start;
}
.hero-headline .line span{ display: inline-block; }
/* below this width the hero doesn't scroll-jack (see script.js isSmall) — all three lines are
   shown at once as static stacked text, so they need to lay out normally, not overlap in a grid cell */
@media (max-width: 759px){
  .hero-headline{ display: block; }
  .hero-headline .line{ display: block; }
}
.hero-sub{
  font-family: var(--sans); font-size: 1.02rem; max-width: 520px; color: rgba(243,236,224,0.72);
  margin-bottom: 34px; opacity: 0;
}
.hero-actions{ opacity: 0; }
.scroll-cue{
  position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(243,236,224,0.5);
}
.scroll-cue .stem{ width: 1px; height: 34px; background: rgba(243,236,224,0.3); position: relative; overflow: hidden; }
.scroll-cue .stem::after{
  content:""; position: absolute; top: -34px; left: 0; width: 100%; height: 34px; background: var(--copper-glow);
  animation: cue-fall 2.2s ease-in-out infinite;
}
@keyframes cue-fall{ 0%{ transform: translateY(0); } 100%{ transform: translateY(68px); } }

/* ================= SCREEN 02: BONE STATEMENT ================= */
.statement{ padding: 240px 0 220px; }
.statement-big{
  font-size: clamp(2.6rem, 8vw, 7rem); line-height: 1.12; text-transform: uppercase; color: var(--ink);
  margin-bottom: 64px; padding: 0.12em 0;
}
.statement-big .w{ display: inline-block; overflow: hidden; vertical-align: top; margin-right: 0.22em; padding-bottom: 0.1em; }
.statement-big .w span{ display: inline-block; }
.statement-lines{ max-width: 640px; }
.statement-lines .pair{ margin-bottom: 34px; }
.statement-lines .pair p{ margin: 0; }
.statement-lines .fade{ font-size: 1.2rem; color: var(--ink-soft); }
.statement-lines .strike{
  font-family: var(--serif); font-style: italic; font-size: 1.55rem; color: var(--ink); margin-top: 4px;
}
.statement-final{
  font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem,3vw,2.3rem); color: var(--ink);
  max-width: 680px; margin-top: 70px; line-height: 1.35;
}

/* ================= SCREEN 03: FOLLOW THE PATTERN ================= */
.follow{
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 140px 0;
  position: relative;
}
.follow-field{ position: absolute; inset: 0; z-index: 0; }
.follow-inner{ position: relative; z-index: 2; text-align: center; max-width: 720px; margin: 0 auto; padding: 0 24px; }
.follow-inner h2{ font-size: clamp(2rem, 4vw, 3rem); color: var(--bone); margin-bottom: 10px; }
.follow-inner .sub{ color: rgba(243,236,224,0.7); font-size: 1.05rem; margin-bottom: 48px; }
.choice-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice{
  border: 1px solid var(--line-dark); background: rgba(243,236,224,0.02); color: var(--bone);
  padding: 24px 22px; font-family: var(--serif); font-size: 1.15rem; text-align: left;
  transition: all .3s ease;
}
.choice:hover, .choice.picked{ border-color: var(--copper-glow); background: rgba(224,148,85,0.06); }
.choice.picked{ color: var(--copper-glow); }
.follow-response{
  margin-top: 32px; font-family: var(--serif); font-style: italic; font-size: 1.2rem;
  color: var(--copper-glow); opacity: 0; height: 0; overflow: hidden; transition: opacity .5s ease;
}
.follow-response.show{ opacity: 1; height: auto; margin-top: 32px; }

/* central disruption core */
.disruption-core{ position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); z-index: 1; pointer-events: none; }
.disruption-core svg{ width: 260px; height: 260px; }
.disruption-core .spark{ transition: r 1s ease, opacity 1s ease; }

/* ================= SCREEN 04: GO UNDERNEATH (pinned scroll) ================= */
.underneath{ position: relative; background: var(--deep); height: 500vh; }
.underneath-pin{ height: 100vh; overflow: hidden; position: sticky; top: 0; }
.underneath-track{ position: relative; height: 100%; width: 100%; }
.underneath-line-svg{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.underneath-line-svg path{ fill: none; stroke: var(--copper-glow); stroke-width: 1; opacity: 0.4; }

.glyph-stop{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; opacity: 0; z-index: 2; width: 360px;
  padding: 40px 30px 34px;
  background: radial-gradient(circle at 50% 38%, rgba(10,24,21,0.82) 0%, rgba(10,24,21,0.55) 60%, rgba(10,24,21,0) 100%);
}
.glyph-stop .g-icon{
  width: 148px; height: 148px; margin: 0 auto 20px; position: relative;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.glyph-stop .g-icon img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 0 rgba(229,164,107,0)); transition: filter .6s ease; }
.glyph-stop h4{
  font-family: var(--sans); font-size: 1.1rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--bone); margin-bottom: 14px;
}
.glyph-stop p{ font-size: 1.2rem; color: rgba(243,236,224,0.85); margin: 0; line-height: 1.5; }

/* active = the stop currently centered during scroll; icon "lights up" */
.glyph-stop.gs-active .g-icon img{ filter: drop-shadow(0 0 22px rgba(229,164,107,0.55)); }
.glyph-stop.gs-active h4{ color: var(--copper-glow); }
.glyph-stop:hover .g-icon{ transform: scale(1.06); }

/* per-glyph personality: subtle idle motion + a stronger response when active/hovered */
.glyph-stop.gs-active .g-icon, .glyph-stop:hover .g-icon{ animation-duration: 2.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

.gs-nervous-system .g-icon img{ animation: gs-pulse 3.4s ease-in-out infinite; }
.gs-beliefs-programs.gs-active .g-icon, .gs-beliefs-programs:hover .g-icon{ animation-name: gs-spin; }
.gs-energetic-field.gs-active .g-icon, .gs-energetic-field:hover .g-icon{ animation-name: gs-breathe; }
.gs-interference.gs-active .g-icon img, .gs-interference:hover .g-icon img{ animation: gs-distort 0.7s ease-in-out infinite; }
.gs-ancestral.gs-active .g-icon, .gs-ancestral:hover .g-icon{ animation-name: gs-branch; }
.gs-past-life.gs-active .g-icon img, .gs-past-life:hover .g-icon img{ animation: gs-overlap 2.8s ease-in-out infinite; }

@keyframes gs-pulse{ 0%,100%{ opacity: 1; transform: scale(1); } 50%{ opacity: .82; transform: scale(1.03); } }
@keyframes gs-spin{ 0%{ transform: rotate(0deg) scale(1.06); } 50%{ transform: rotate(8deg) scale(1.08); } 100%{ transform: rotate(0deg) scale(1.06); } }
@keyframes gs-breathe{ 0%,100%{ transform: scale(1.05); } 50%{ transform: scale(1.16); } }
@keyframes gs-distort{
  0%,100%{ transform: translate(0,0) skew(0deg,0deg); }
  25%{ transform: translate(-2px,1px) skew(-1.5deg,0.5deg); }
  50%{ transform: translate(2px,-1px) skew(1.5deg,-0.5deg); }
  75%{ transform: translate(-1px,-1px) skew(-0.8deg,0.8deg); }
}
@keyframes gs-branch{ 0%,100%{ transform: scale(1.06) translateY(0); } 50%{ transform: scale(1.1) translateY(-3px); } }
@keyframes gs-overlap{ 0%,100%{ opacity: 1; } 50%{ opacity: .68; } }
@media (prefers-reduced-motion: reduce){
  .glyph-stop .g-icon, .glyph-stop .g-icon img{ animation: none !important; }
}

.underneath-zoomout{
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; opacity: 0; z-index: 3; padding: 0 24px;
}
.underneath-zoomout .big{
  font-family: var(--sans); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--bone); line-height: 1.25;
}
.underneath-zoomout .big .accent{ color: var(--copper-glow); }
.underneath-zoomout .method{
  font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem,2.2vw,1.6rem);
  color: rgba(243,236,224,0.85); max-width: 640px; margin-top: 28px; line-height: 1.4;
}
.underneath-progress{
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; gap: 8px;
}
.underneath-progress span{ width: 22px; height: 2px; background: rgba(243,236,224,0.22); transition: background .3s ease; }
.underneath-progress span.active{ background: var(--copper-glow); }

/* ================= SCREEN 05: NOW YOU APPEAR ================= */
.appear{ padding: 160px 0; background: var(--bone); position: relative; overflow: hidden; }
.appear::before{
  content: ""; position: absolute; left: 0; bottom: 0; width: 46%; height: 60%; z-index: 0;
  background: url("images/appear-corner-wave.webp") left bottom / cover no-repeat;
  opacity: 0.22; mix-blend-mode: multiply;
  mask-image: linear-gradient(115deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 75%);
  -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 75%);
}
.appear .wrap{ position: relative; z-index: 1; }
.appear-grid{ display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 50px; align-items: start; }
.appear-photo{
  position: relative;
  clip-path: polygon(4% 0%, 100% 0%, 100% 88%, 92% 100%, 0% 100%, 0% 10%);
  overflow: hidden; border-radius: 2px;
}
.appear-photo picture{ display: block; width: 100%; height: 100%; }
.appear-photo img{ width: 100%; height: 100%; object-fit: cover; }
.appear-copy{ padding-left: 20px; padding-top: 6px; }
.appear-copy h2{ font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 26px; }
.appear-copy p{ font-size: 1.05rem; }
.appear-more{ max-height: none; overflow: visible; }
.appear-toggle{ display: none; }
.appear-huge{
  font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.3; margin-top: 30px;
}
.appear-huge .em1{ display: block; color: var(--ink); }
.appear-huge .em2{ display: block; font-style: italic; color: var(--copper); margin-top: 10px; }

/* ================= SCREEN 06: WATCH IT HAPPEN ================= */
.watch{ padding: 160px 0; background: var(--deep); color: var(--bone); }
.watch-eyebrow{ text-align: center; margin-bottom: 60px; }
.watch-eyebrow .big{
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: clamp(1.6rem,3.6vw,2.6rem); color: var(--bone); display: block;
}
.watch-eyebrow .small{ font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: rgba(243,236,224,0.75); display: block; margin-top: 10px; }
.watch-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-bottom: 90px; }
.watch-video{ position: relative; overflow: hidden; display: block; aspect-ratio: 16/9; background: var(--deep-2); }
.watch-video img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.watch-video:hover img{ transform: scale(1.04); }
.watch-play{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 78px; height: 78px; border-radius: 50%; background: rgba(243,236,224,0.94);
  display: flex; align-items: center; justify-content: center;
}
.watch-play svg{ width: 24px; height: 24px; fill: var(--deep); margin-left: 3px; }
.watch-copy blockquote{
  font-family: var(--serif); font-style: italic; font-size: 1.75rem; line-height: 1.35; margin: 0 0 24px;
}
.watch-copy cite{
  font-style: normal; font-size: 0.76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--copper-glow); display: block;
}
.watch-copy cite .sub{ display: block; font-weight: 500; text-transform: none; letter-spacing: 0; margin-top: 4px; color: rgba(243,236,224,0.55); }

/* as-seen-on strip, sits beside/below the two videos */
.watch-featured{ text-align: center; }
.watch-featured .fk-label{
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: rgba(243,236,224,0.5); display: block; margin-bottom: 30px;
}
.watch-logos{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 44px 56px;
}
.watch-logos img{ height: 26px; width: auto; opacity: 0.62; transition: opacity .3s ease; filter: grayscale(1) brightness(1.6); }
.watch-logos img:hover{ opacity: 0.95; }
.watch-logos .wl-tickernews{ height: 20px; }

/* ================= SCREEN 07: ONE PROBLEM ================= */
.fracture{ padding: 200px 0 160px; background: var(--bone); text-align: center; position: relative; overflow: hidden; }
.fracture-label{ font-family: var(--sans); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  font-size: clamp(1.8rem, 4.2vw, 3rem); color: var(--ink); margin-bottom: 60px; }
.fracture-stage{ position: relative; width: 100%; max-width: 640px; height: 340px; margin: 0 auto; }
.fracture-stage svg{ width: 100%; height: 100%; overflow: visible; }
.fracture-thread{ opacity: 0; transition: opacity .4s ease; }
.fracture-thread.f-line{ filter: drop-shadow(0 0 2px rgba(180,100,47,0.35)); }
.fracture-thread.f-node{ animation: f-node-pulse 2.6s ease-in-out infinite; }
.fracture-thread.f-node.f-node-a{ animation-delay: -0.6s; }
.fracture-thread.f-node.f-node-b{ animation-delay: -1.3s; }
@keyframes f-node-pulse{ 0%,100%{ r: 2.6; opacity: .9; } 50%{ r: 3.6; opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .fracture-thread.f-node{ animation: none; } }
.fracture-result{ margin-top: 60px; }
.fracture-result .big{ font-family: var(--sans); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem); color: var(--ink); }
.fracture-result p{ max-width: 620px; margin: 22px auto 0; font-size: 1.05rem; }
.fracture-result .quiet{
  font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink); margin-top: 26px;
}

/* ================= SCREEN 08: CHOOSE DEPTH ================= */
.depth{ display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; position: relative; }
.depth-side{
  padding: 100px 56px; display: flex; flex-direction: column; justify-content: center;
  transition: flex-grow .4s ease; position: relative; overflow: hidden;
}
.depth-side::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("images/depth-bg.webp") center / cover no-repeat;
  opacity: 0.16; mix-blend-mode: multiply;
}
.depth-side.deep::before{ opacity: 0.22; mix-blend-mode: screen; }
.depth-side > *{ position: relative; z-index: 1; }
.depth-side.light{ background: var(--bone-soft); color: var(--ink); }
.depth-side.deep{ background: var(--deep-2); color: var(--bone); }
.depth-side:hover{ flex-grow: 1.06; }
.depth-side .label{ margin-bottom: 8px; }
.depth-side h3{ font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-bottom: 18px; }
.depth-side p{ font-size: 0.98rem; max-width: 400px; margin-bottom: 22px; }
.depth-side .depth-extra{ font-size: 0.92rem; max-width: 400px; opacity: 0.9; margin-bottom: 22px; }
.depth-side .depth-extra strong{ font-weight: 800; opacity: 1; }
.depth-side .depth-extra .lead{ display: block; font-size: 1rem; margin-bottom: 10px; }
.depth-price{ font-family: var(--serif); font-size: 2.6rem; margin-bottom: 10px; display:block; }
.depth-price .cur{ font-size: 1rem; font-family: var(--sans); color: var(--ink-soft); margin-left: 8px; }
.depth-side.deep .depth-price .cur{ color: rgba(243,236,224,0.55); }
.depth-save{
  font-family: var(--sans); font-size: 0.76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--copper); margin-bottom: 26px; display: block;
}
.depth-side.deep .depth-save{ color: var(--copper-glow); }

/* ================= SCREEN 09: 10,000 SESSIONS ================= */
.brutal{ padding: 160px 0; background: var(--bone); }
.brutal-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; }
.brutal-photo{ aspect-ratio: 4/5; overflow: hidden; }
.brutal-photo picture{ display: block; width: 100%; height: 100%; }
.brutal-photo img{ width: 100%; height: 100%; object-fit: cover; }
.brutal-stats{
  display: flex; margin-bottom: 40px; border: 1px solid var(--line-light); border-radius: 2px;
}
.brutal-stats .stat{
  flex: 1; padding: 22px 18px; text-align: center; border-right: 1px solid var(--line-light);
  font-family: var(--sans); font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.1vw, 1.9rem); color: var(--ink); line-height: 1.2; display: flex;
  flex-direction: column; gap: 6px;
}
.brutal-stats .stat span.sub{ font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-soft); }
.brutal-stats .stat:last-child{ border-right: none; }
.brutal-stats .stat .n{ color: var(--copper); font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.brutal h2{ font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin: 0 0 22px; }
.brutal-quotes{ display: flex; flex-direction: column; gap: 26px; margin-top: 28px; }
.brutal-quote{
  display: flex; gap: 18px; align-items: flex-start;
  border-left: 2px solid var(--copper); padding-left: 22px;
}
.brutal-quote img{
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  margin-top: 2px;
}
.brutal-quote blockquote{
  font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ink); line-height: 1.4; margin: 0;
}
.brutal-quote cite{
  display: block; font-style: normal; font-family: var(--sans); font-size: 0.76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--copper-deep); margin-top: 10px;
}

/* ================= SCREEN 10: INTEGRATION (settle) ================= */
.settle{ padding: 180px 0; background: var(--deep); color: var(--bone); text-align: center; position: relative; overflow: hidden; }
.settle-line-wrap{ width: 100%; max-width: 640px; margin: 0 auto 60px; height: 60px; position: relative; }
.settle-line-wrap svg{ width: 100%; height: 100%; }
.settle-line-wrap .jagged{ opacity: 1; transition: opacity 1.4s ease; }
.settle-line-wrap .flat{ opacity: 0; transition: opacity 1.4s ease; }
.settle-line-wrap.calm .jagged{ opacity: 0; }
.settle-line-wrap.calm .flat{ opacity: 1; }
.settle .label{ }
.settle h2{ font-size: clamp(2rem, 3.4vw, 2.9rem); max-width: 700px; margin: 0 auto 22px; }
.settle p{ max-width: 620px; margin: 0 auto; font-size: 1.05rem; }

/* ================= SCREEN 11: EVIDENCE WALL ================= */
.evidence{ padding: 180px 0; background: var(--deep-2); color: var(--bone); position: relative; }
.evidence-head{ text-align: center; margin-bottom: 70px; }
.evidence-head .big{ font-family: var(--sans); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  font-size: clamp(1.8rem,3.6vw,2.6rem); }
.evidence-head .sub{ font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: rgba(243,236,224,0.7); margin-top: 12px; }
.evidence-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-dark); max-width: 980px; margin: 0 auto; }
.case{
  background: var(--deep-2); padding: 40px 38px; position: relative; transition: background .3s ease;
}
.case:hover{ background: #10231d; }
.case .coord{
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--copper-glow);
  margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.case .coord::before{ content:""; width: 22px; height: 1px; background: var(--copper-glow); display: inline-block; }
.case .cat{ font-family: var(--serif); font-size: 1.7rem; color: var(--bone); margin-bottom: 14px; }
.case .detail{ font-size: 0.98rem; color: rgba(243,236,224,0.78); margin: 0; line-height: 1.6; }
.evidence-disclaimer{
  text-align: center; max-width: 620px; margin: 50px auto 0; font-size: 0.8rem; font-style: italic;
  color: rgba(243,236,224,0.5);
}

/* ================= SCREEN 12: RESOLVE / FINAL CTA ================= */
.resolve{
  position: relative; color: var(--bone); padding: 200px 0 140px; overflow: hidden; text-align: center;
  background: var(--deep) url("images/footer-bg.webp") center / cover no-repeat;
}
.resolve::before{ content:""; position: absolute; inset: 0; background: rgba(10,24,21,0.66); z-index: 0; }
.resolve > *{ position: relative; z-index: 1; }
.resolve-seal{ width: 120px; height: 120px; margin: 0 auto 50px; }
.resolve-seal svg{ width: 100%; height: 100%; }
.resolve .label{ }
.resolve h2{ font-size: clamp(2.4rem, 5vw, 4rem); max-width: 780px; margin: 0 auto 26px; }
.resolve h2 .accent{ color: var(--copper-glow); font-style: italic; }
.resolve p.sub{ color: rgba(243,236,224,0.75); font-size: 1.08rem; margin-bottom: 40px; }
.resolve .cta-row{ justify-content: center; }
.resolve .cta-note{ text-align: center; }

/* ---------------- FOOTER ---------------- */
.site-footer{
  position: relative; color: rgba(243,236,224,0.72); padding: 64px 0 30px;
  border-top: 1px solid var(--line-dark); background: var(--deep);
}
.footer-contact{
  display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 0.85rem;
  color: rgba(243,236,224,0.85); margin-bottom: 26px;
}
.footer-contact a:hover{ color: var(--copper-glow); }
.footer-links{ display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.75rem; }
.footer-links a:hover{ color: var(--copper-glow); }
.footer-share{ display: flex; align-items: center; gap: 12px; }
.footer-share span{ font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(243,236,224,0.5); }
.footer-top{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 30px; padding-bottom: 30px; }
.footer-logo{ height: 30px; width: auto; max-width: 200px; object-fit: contain; opacity: 0.95; }
.footer-social{ display: flex; gap: 18px; }
.footer-social a{
  width: 34px; height: 34px; border: 1px solid rgba(243,236,224,0.25); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg{ width: 14px; height: 14px; fill: rgba(243,236,224,0.85); }
.footer-bottom{ display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: 0.75rem; flex-wrap: wrap; gap: 10px; }

/* ---------------- VIDEO LIGHTBOX ---------------- */
.lightbox{
  position: fixed; inset: 0; z-index: 1000; background: rgba(10,24,21,0.92);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.lightbox.open{ opacity: 1; pointer-events: auto; }
.lightbox-inner{ width: min(94vw, 1400px, 86vh * 16 / 9); aspect-ratio: 16/9; position: relative; }
#lightboxFrame{ position: absolute; inset: 0; width: 100%; height: 100%; }
.lightbox-inner iframe{ width: 100%; height: 100%; border: 0; display: block; }
.lightbox-close{
  position: absolute; top: -46px; right: 0; background: none; border: none; color: var(--bone);
  font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
  display: flex; align-items: center; gap: 8px; padding: 6px;
}
.lightbox-close::after{ content: "✕"; font-size: 0.9rem; }

/* ---------------- INLINE CALENDLY EMBED ---------------- */
.calendly-embed{ width: 100%; min-width: 280px; height: 640px; border: none; }
.booking-modal{
  position: fixed; inset: 0; z-index: 1000; background: rgba(10,24,21,0.92);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.booking-modal.open{ opacity: 1; pointer-events: auto; }
.booking-modal-inner{
  width: min(94vw, 1040px); height: min(800px, 88vh); background: var(--bone-soft);
  position: relative; border-radius: 2px; overflow: visible;
}
#bookingFrame{ width: 100%; height: 100%; border-radius: 2px; overflow: hidden; }
.booking-modal-inner iframe{ width: 100%; height: 100%; border: 0; }
.booking-modal .lightbox-close{ color: var(--bone); top: -42px; }

/* ---------------- NEWSLETTER ---------------- */
.newsletter{ padding: 100px 0; background: var(--bone-soft); text-align: center; }
.newsletter .wrap{ max-width: 620px; }
.newsletter h3{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 14px; }
.newsletter p{ margin-bottom: 30px; }
.newsletter-form{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.newsletter-form input[type="email"]{
  flex: 1; min-width: 220px; padding: 16px 20px; border: 1px solid var(--line-light);
  background: var(--bone); font-family: var(--sans); font-size: 0.92rem; color: var(--ink);
}
.newsletter-form input[type="email"]:focus{ outline: none; border-color: var(--copper); }
.newsletter-note{ margin-top: 16px; font-size: 0.78rem; color: var(--ink-soft); }
.newsletter-success{ display: none; color: var(--copper-deep); font-weight: 700; margin-top: 16px; }
.newsletter.submitted .newsletter-form{ display: none; }
.newsletter.submitted .newsletter-success{ display: block; }

/* ---------------- COOKIE NOTICE ---------------- */
.cookie-banner{
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 900; max-width: 520px;
  background: var(--deep-2); color: var(--bone); border: 1px solid var(--line-dark);
  padding: 22px 26px; display: flex; flex-direction: column; gap: 14px;
  transform: translateY(140%); transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.cookie-banner.show{ transform: translateY(0); }
.cookie-banner p{ font-size: 0.85rem; margin: 0; color: rgba(243,236,224,0.8); }
.cookie-banner a{ color: var(--copper-glow); border-bottom: 1px solid var(--copper-glow); }
.cookie-banner-actions{ display: flex; gap: 12px; }
.cookie-banner-actions button{
  flex: 1; padding: 10px 16px; font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--line-dark); background: none; color: var(--bone);
}
.cookie-banner-actions .cb-accept{ background: var(--copper); border-color: var(--copper); }

/* ---------------- LEGAL PAGES (privacy / terms) ---------------- */
.legal-page{ padding: 160px 0 100px; background: var(--bone); }
.legal-page .wrap{ max-width: 760px; }
.legal-page h1{ font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 8px; }
.legal-updated{ color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 40px; }
.legal-page h2{ font-size: 1.15rem; margin: 40px 0 12px; color: var(--deep-2); }
.legal-page p{ margin-bottom: 16px; line-height: 1.7; color: var(--ink); }
.legal-page a{ color: var(--copper-deep); border-bottom: 1px solid var(--copper); }

/* ---------------- GENERIC SCROLL REVEAL (no-js safe: only hides when .js is present) ---------------- */
.js [data-reveal]{ opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js [data-reveal].is-ready{ opacity: 1; transform: translateY(0); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 980px){
  .appear-grid, .watch-grid, .brutal-grid{ grid-template-columns: 1fr; }
  .depth{ grid-template-columns: 1fr; }
  .choice-grid{ grid-template-columns: 1fr; }
  .evidence-grid{ grid-template-columns: 1fr; }
  .brutal-stats .stat{ font-size: 1.1rem; padding: 18px 8px; }
  .watch-grid{ gap: 40px; margin-bottom: 60px; }
}
@media (max-width: 760px){
  .nav-links, .nav-cta .btn-primary{ display: none; }
  .nav-toggle{ display: block; }
  .wrap{ padding: 0 22px; }
  .statement{ padding: 130px 0; }
  .hero-content{ padding: 0 22px; }
  .appear-photo{ transform: none; }
  .appear-copy{ padding-left: 0; padding-top: 0; margin-top: 40px; }
  .fracture-stage{ height: 260px; }
  .evidence-grid{ grid-template-columns: 1fr; }
  .case{ padding: 30px 26px; }
  .glyph-stop{ width: 88vw; max-width: 340px; padding: 26px 20px; }
  .glyph-stop .g-icon{ width: 108px; height: 108px; }
  .underneath{ height: auto; }
  .underneath-pin{ height: auto; min-height: auto; overflow: visible; position: static; }
  .underneath-progress{ display: none; }
  .brutal-stats{ flex-wrap: wrap; }
  .brutal-stats .stat{ flex: 1 1 50%; border-right: none; border-bottom: 1px solid var(--line-light); }
  .watch-logos{ gap: 30px 34px; }
  .depth-side{ padding: 70px 30px; }
  .newsletter-form{ flex-direction: column; }
  .newsletter-form .btn{ width: 100%; justify-content: center; }
  .footer-top{ flex-direction: column; align-items: flex-start; }
  .cookie-banner{ left: 12px; right: 12px; bottom: 12px; padding: 18px 20px; }
  .brutal-quote img{ width: 42px; height: 42px; }
}