@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/WorkSans.woff2') format('woff2');
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/SourceSerif4-Roman.woff2') format('woff2');
}
@font-face{
  font-family:'Source Serif 4';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/SourceSerif4-Italic.woff2') format('woff2');
}

:root{
  --cream:#F3EBDD;
  --cream-deep:#ECE1CD;
  --cream-deeper:#E4D6BC;
  --graphite:#3B352E;
  --graphite-soft:#554E43;
  --amber:#C98A4E;
  --amber-soft:#E4C79A;
  --amber-deep:#A8703A;
  --muted:#8C7C68;
  --line:rgba(59,53,46,0.14);

  --serif:'Source Serif 4', Georgia, serif;
  --sans:'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --maxw:1120px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--cream);
  color:var(--graphite);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-y:visible;
  position:relative;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--amber-soft); color:var(--graphite); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
section{ padding:120px 0; }
@media (max-width:768px){
  section{ padding:80px 0; }
  body{ font-size:16px; }
}

/* ============ the journey thread ============ */
#threadSvg{
  position:absolute; top:0; left:0; width:100%;
  pointer-events:none; overflow:visible;
  /* z-index 2 puts the thread above the hero photo + scrim and above every
     section background, while hero text (.hero .wrap) and the buttons — both
     z-index 2 but later in the DOM — still paint on top of it. */
  z-index:2;
}
#threadPath, #heroWave{
  fill:none; stroke:var(--amber); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}
/* The thread runs at x=14 while text starts at the 28px wrap padding, so it
   fits at every width — no breakpoint hides it. (Earlier versions cut it off
   below 900px, which silently killed the effect on narrow windows.) */

/* ============ shared type ============ */
.eyebrow{
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--amber-deep);
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{ content:''; width:24px; height:1.5px; background:var(--amber); flex:none; }

h1,h2,h3{ font-family:var(--sans); text-wrap:balance; margin:0; }
h2{
  font-weight:700; font-size:clamp(28px,4vw,42px); line-height:1.1;
  letter-spacing:-0.005em; margin-bottom:20px;
}
.lede{
  font-style:italic; color:var(--graphite-soft);
  font-size:clamp(17px,2vw,20px); max-width:60ch; margin:0 0 40px 0;
}
p{ max-width:64ch; }
strong{ font-weight:700; }

/* ============ buttons ============ */
.btn{
  font-family:var(--sans); font-weight:600; font-size:16px;
  border:none; border-radius:100px; padding:17px 34px; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  position:relative; z-index:2;
}
.btn:focus-visible{ outline:2px solid var(--amber-deep); outline-offset:3px; }
.btn-primary{
  background:var(--amber); color:#fff;
  box-shadow:0 8px 28px rgba(201,138,78,0.32);
}
.btn-primary:hover{
  background:var(--amber-deep); transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(201,138,78,0.42);
}
.btn-note{
  font-family:var(--sans); font-size:13px; color:var(--muted);
  margin-top:14px; font-style:normal;
}

/* ============ hero ============ */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center;
  padding:0; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:url('assets/hero.jpg') center/cover no-repeat;
  transform:scale(1.06);
  animation:heroSettle 2.4s var(--ease) forwards;
}
@keyframes heroSettle{ to{ transform:scale(1); } }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,
    rgba(28,20,12,0.30) 0%,
    rgba(28,20,12,0.55) 42%,
    rgba(28,20,12,0.80) 72%,
    rgba(28,20,12,0.88) 100%);
}
.hero .wrap{ position:relative; z-index:2; width:100%; padding-top:90px; padding-bottom:90px; }
.hero-inner{ max-width:620px; margin-left:auto; }
.hero .eyebrow{ color:var(--amber-soft); }
.hero h1{
  font-weight:700; font-size:clamp(34px,5.2vw,60px); line-height:1.04;
  letter-spacing:-0.015em; color:#FBF6EC;
  /* 58px, not 26: the wave mark is drawn into this gap, and it needs room to
     swing without clipping either the headline above or the promise below. */
  margin:0 0 58px 0;
  text-shadow:0 2px 24px rgba(0,0,0,0.4);
}
.hero-promise{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(17px,2.2vw,21px); line-height:1.5;
  color:#EFE6D6; max-width:46ch; margin:0 0 36px 0;
  text-shadow:0 1px 12px rgba(0,0,0,0.45);
}
.hero .btn-note{ color:#C6B79E; }
@media (max-width:900px){
  .hero-inner{ margin-left:0; }
  .hero-scrim{ background:linear-gradient(180deg, rgba(28,20,12,0.45) 0%, rgba(28,20,12,0.82) 60%, rgba(28,20,12,0.9) 100%); }
}

/* ============ mirror ============ */
.mirror h2{ font-size:clamp(30px,4.4vw,46px); max-width:18ch; }
.mirror-intro{
  font-family:var(--sans); font-size:14px; letter-spacing:0.05em;
  color:var(--muted); text-transform:uppercase; margin:36px 0 24px 0;
}
.mirror-list{ display:flex; flex-direction:column; gap:0; margin:0; padding:0; list-style:none; }
.mirror-list li{
  font-size:clamp(17px,2vw,19px); line-height:1.6; padding:22px 0 22px 30px;
  border-bottom:1px solid var(--line); position:relative; max-width:62ch;
}
.mirror-list li::before{
  content:''; position:absolute; left:0; top:33px;
  width:9px; height:1.6px; background:var(--amber);
}
.mirror-close{
  margin-top:40px; font-size:clamp(18px,2.2vw,21px); line-height:1.55;
  max-width:56ch;
}
.mirror-close strong{ color:var(--graphite); }

/* ============ mechanism ============ */
.mechanism{ background:var(--cream-deep); }
.pullquote{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(20px,2.8vw,28px); line-height:1.45;
  border-left:3px solid var(--amber); padding:6px 0 6px 28px;
  margin:44px 0; max-width:52ch; color:var(--graphite);
}

/* ============ drawer ============ */
.drawer-list{
  font-size:clamp(17px,2vw,19px); line-height:1.7; color:var(--graphite-soft);
  max-width:58ch;
}
.drawer-punch{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(20px,2.6vw,26px); line-height:1.35;
  margin-top:36px; max-width:22ch; color:var(--graphite);
}

/* ============ the 3 moves (pinned) ============ */
.moves{ background:var(--graphite); color:var(--cream); padding:0; }
.moves-stage{ display:flex; gap:60px; align-items:flex-start; }
.moves-sticky{
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  flex:0 0 40%; padding:60px 0;
}
.moves .eyebrow{ color:var(--amber-soft); }
.moves h2{ color:#FBF6EC; }
.moves-lede{
  font-style:italic; color:var(--amber-soft);
  font-size:clamp(17px,2vw,20px); margin:0;
}
.moves-track{ flex:1; padding:22vh 0; display:flex; flex-direction:column; gap:16vh; }
.move{
  opacity:0.25; transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.move.active{ opacity:1; transform:translateY(0); }
.move-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:14px; }
.move-num{
  font-family:var(--sans); font-weight:700; font-size:clamp(34px,4vw,50px);
  color:var(--amber); line-height:1;
}
.move-name{
  font-family:var(--sans); font-weight:700; font-size:clamp(20px,2.4vw,26px);
  letter-spacing:0.04em; color:#FBF6EC;
}
.move-time{
  font-family:var(--sans); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin-left:auto; white-space:nowrap;
}
.move p{
  font-size:clamp(17px,2vw,19px); line-height:1.6;
  color:#DED3C0; max-width:44ch; margin:0;
}
.moves-close{
  border-top:1px solid rgba(243,235,221,0.14);
  padding:60px 0 100px 0;
}
.moves-close p{
  font-size:clamp(17px,2.1vw,20px); line-height:1.6; color:#DED3C0; max-width:56ch;
}
.moves-close strong{ color:#FBF6EC; }
@media (max-width:900px){
  .moves-stage{ flex-direction:column; gap:0; }
  .moves-sticky{ position:static; height:auto; padding:80px 0 40px 0; }
  .moves-track{ padding:0 0 60px 0; gap:48px; }
  .move{ opacity:1; transform:none; }
}

/* ============ ava ============ */
.ava-grid{ display:flex; gap:64px; align-items:center; }
.ava-photo{ flex:0 0 38%; }
.ava-photo img{
  width:100%; border-radius:6px;
  box-shadow:0 20px 60px rgba(59,53,46,0.22);
}
.ava-text{ flex:1; }
.ava-text p{ font-size:clamp(17px,2.1vw,20px); line-height:1.6; margin:0 0 22px 0; }
.ava-sign{
  font-family:var(--sans); font-weight:700; font-size:17px;
  letter-spacing:0.06em; margin-top:30px;
}
.ava-sign span{
  display:block; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:15px; color:var(--muted); letter-spacing:0; margin-top:4px;
}
@media (max-width:900px){
  .ava-grid{ flex-direction:column; gap:36px; }
  .ava-photo{ flex:none; width:100%; max-width:340px; }
}

/* ============ what you get ============ */
.get{ background:var(--cream-deep); }
.benefits{ display:flex; flex-direction:column; gap:2px; margin:0 0 56px 0; }
.benefit{
  background:var(--cream); border-left:3px solid var(--amber);
  padding:30px 34px; border-radius:4px;
}
.benefit h3{ font-weight:700; font-size:clamp(19px,2.2vw,23px); margin-bottom:10px; }
.benefit p{ margin:0; font-size:16.5px; line-height:1.6; color:var(--graphite-soft); }
.benefit p em{ color:var(--graphite); }

.includes{
  display:flex; gap:40px; align-items:center;
  background:var(--cream); border-radius:8px; padding:36px 40px;
}
.includes-card{ flex:0 0 190px; }
.includes-card img{
  width:100%; border-radius:3px;
  box-shadow:0 16px 44px rgba(59,53,46,0.28);
  transform:rotate(-2.5deg);
  transition:transform .5s var(--ease);
}
.includes-card img:hover{ transform:rotate(0deg) scale(1.03); }
.includes-list{ flex:1; margin:0; padding:0; list-style:none; }
.includes-list li{
  padding:12px 0 12px 26px; position:relative;
  font-size:16.5px; line-height:1.55; border-bottom:1px solid var(--line);
}
.includes-list li:last-child{ border-bottom:none; }
.includes-list li::before{
  content:''; position:absolute; left:0; top:22px;
  width:8px; height:1.6px; background:var(--amber);
}
.includes-list strong{ font-family:var(--sans); font-size:15.5px; }
.not-a{
  font-family:var(--sans); font-weight:600; font-size:clamp(18px,2.2vw,22px);
  text-align:center; margin-top:44px; color:var(--graphite);
}
@media (max-width:768px){
  .includes{ flex-direction:column; gap:28px; padding:28px 24px; }
  .includes-card{ flex:none; width:150px; }
}

/* ============ price ============ */
.price{ text-align:center; }
.price h2{ font-size:clamp(34px,5vw,54px); }
.price .lede{ margin-left:auto; margin-right:auto; }
.price-trust{
  font-family:var(--sans); font-size:15px; color:var(--graphite-soft);
  line-height:1.9; margin:0 auto 40px auto; max-width:34ch;
}
.price-honest{
  font-size:16px; line-height:1.6; color:var(--graphite-soft);
  max-width:50ch; margin:44px auto 0 auto; font-style:italic;
  padding-top:28px; border-top:1px solid var(--line);
}

/* ============ faq ============ */
.faq{ background:var(--cream-deep); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  font-family:var(--sans); font-weight:600; font-size:clamp(16px,2vw,18.5px);
  padding:24px 4px; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-family:var(--sans); font-size:22px; font-weight:400;
  color:var(--amber-deep); flex:none; transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .answer{
  padding:0 4px 26px 4px; font-size:16.5px; line-height:1.65;
  color:var(--graphite-soft); max-width:62ch;
}
.faq-legal{ font-size:14.5px; line-height:1.6; }

/* ============ final cta ============ */
.final{ text-align:center; padding-bottom:150px; }
.final-kicker{
  font-style:italic; color:var(--graphite-soft);
  font-size:clamp(18px,2.4vw,22px); margin:0 auto 26px auto; max-width:34ch;
}
.final h2{
  font-size:clamp(38px,6vw,68px); margin-bottom:8px;
}
.final-sign{
  font-family:var(--serif); font-style:italic; color:var(--muted);
  font-size:17px; margin:0 0 44px 0;
}

/* ============ footer ============ */
footer{
  background:var(--graphite); color:#C6B79E;
  padding:64px 0 40px 0; font-size:14.5px;
}
.footer-cols{ display:flex; gap:80px; flex-wrap:wrap; margin-bottom:48px; }
.footer-col h4{
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--amber-soft);
  margin:0 0 16px 0;
}
.footer-col a{
  display:block; color:#C6B79E; text-decoration:none;
  padding:5px 0; font-family:var(--sans); font-size:14.5px;
  transition:color .2s var(--ease);
}
.footer-col a:hover{ color:#FBF6EC; }
.footer-legal{
  border-top:1px solid rgba(243,235,221,0.12); padding-top:28px;
  font-size:13px; line-height:1.7; color:#9C8D77; max-width:80ch;
}
.footer-legal p{ margin:0 0 10px 0; max-width:none; }

/* ============ reveal ============ */
.rv{ opacity:0; transform:translateY(26px); }
.rv.in{
  opacity:1; transform:translateY(0);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv,.rv.in{ opacity:1; transform:none; transition:none; }
  .hero-bg{ animation:none; transform:none; }
  .move{ opacity:1; transform:none; }
  #threadPath{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
}