/* =========================================================
   Fit by Fina — women's fitness & mindset coaching
   Funnel order: hero → pain → solution → benefit →
   testimonials → offer → CTA (lead-magnet CTAs in between)
   ========================================================= */
:root{
  --cream:#fdfdfc;        /* Soft white, page background */
  --cream-2:#f7f7f5;      /* barely-there tint for alternating sections */
  --sand:#f1f1ee;         /* deepest light tone, still a soft white */
  --ink:#2f3e46;          /* Deep slate — body text */
  --ink-soft:#55625e;     /* slate/sage blend, 4.9:1 even on --sand */
  --line:rgba(47,62,70,.13);
  --sage:#5c715e;         /* Sage green — primary: bands, footer, icons */
  --sage-dark:#455547;    /* deeper sage for the footer and dark cards */
  --accent:#d4a373;       /* Warm sand — CTA fills only, never text */
  --accent-hi:#dfb183;    /* CTA hover */
  --accent-soft:#efdcc4;
  --white:#fff;

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-quote:"Lora", Georgia, "Times New Roman", serif;

  --wrap:1180px;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --shadow:0 18px 45px -25px rgba(47,62,70,.42);
  --shadow-soft:0 10px 30px -18px rgba(47,62,70,.38);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* rem, not px: a hard px base overrides the reader's own browser font-size
   setting. Reading text across the page sits at 1rem-1.15rem off this. */
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}

/* Fraunces sets large and wide, so the display scale stays trimmed and tracked
   tighter. SOFT rounds the terminals and WONK keeps the warmer alternates, which
   is what stops the serif reading as formal rather than friendly. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.14;margin:0;letter-spacing:-.015em;
  font-variation-settings:"SOFT" 40,"WONK" 1}
h1{font-size:clamp(2.35rem,5.2vw,3.85rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:1.12rem;font-family:var(--font-body);font-weight:500;letter-spacing:.01em;line-height:1.35}
p{margin:0 0 1rem}

.wrap{width:min(100% - 2.5rem, var(--wrap));margin-inline:auto}
.section{padding:clamp(3rem,6vw,5rem) 0}
.center{text-align:center}

.eyebrow{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--ink-soft);margin:0 0 1.1rem;
}
.eyebrow.light{color:rgba(255,255,255,.92)}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:34rem}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--sage);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:4px}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.6rem;border:1px solid transparent;border-radius:999px;
  font-size:.85rem;font-weight:500;letter-spacing:.04em;
  cursor:pointer;transition:all .35s var(--ease);
}
.btn-solid{background:var(--accent);color:var(--ink);box-shadow:var(--shadow-soft)}
.btn-solid:hover{background:var(--accent-hi);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(47,62,70,.05)}
.btn-ghost.dark{border-color:rgba(47,62,70,.25)}
.btn-light{background:var(--accent);color:var(--ink);box-shadow:var(--shadow-soft);flex:0 0 auto}
.btn-light:hover{background:var(--accent-hi);transform:translateY(-2px)}
.btn-sm{padding:.65rem 1.15rem;font-size:.78rem}
.btn-block{width:100%;justify-content:center;padding-block:1.05rem}
.arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.dl-dot{
  display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;
  border:1px solid var(--line);font-size:.85rem;margin-left:-.7rem;
}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  padding:1.1rem 0;transition:all .4s var(--ease);
}
/* The blurred bar lives on a pseudo-element: putting backdrop-filter on the
   header itself would make it the containing block for the fixed mobile menu. */
.site-header::before{
  content:"";position:absolute;inset:0;
  opacity:0;transition:opacity .4s var(--ease);
  background:rgba(253,253,252,.93);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
}
.site-header.scrolled::before{opacity:1}
.site-header.scrolled{padding:.6rem 0}
.header-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.brand{display:flex;align-items:center;gap:.7rem}
.brand-text{
  display:flex;flex-direction:column;line-height:1.15;
  font-family:var(--font-display);font-size:1.15rem;
}
.brand-text em{
  font-family:var(--font-body);font-style:normal;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}

.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{font-size:.85rem;letter-spacing:.03em;position:relative}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;
  background:var(--ink);transition:width .35s var(--ease);
}
.nav a:not(.btn):hover::after{width:100%}

.nav-brand{display:none}
.nav-backdrop{display:none}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0 10px;
}
.nav-toggle span{display:block;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* =========================================================
   1. Hero
   ========================================================= */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:center;padding:7.5rem 0 3.5rem;background:var(--cream-2)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--cream) 0%,rgba(253,253,252,.94) 32%,rgba(253,253,252,.55) 52%,rgba(253,253,252,0) 74%);
}
.hero-inner{position:relative;z-index:2}
.hero-copy{max-width:36rem}
.hero h1 em{font-style:italic;color:var(--sage)}
.hero .lede{margin-top:1.5rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem}
.hero-proof{
  display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.6rem;
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
}
.hero-proof li{display:flex;align-items:center;gap:.55rem}
.hero-proof li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* =========================================================
   2. Pain point
   ========================================================= */
.pain{background:var(--sand)}
.pain-head{max-width:44rem;margin-bottom:3.2rem}
.pain-head .lede{margin-top:1.3rem}

.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.pain-card{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.6rem 1.5rem;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.pain-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.pain-mark{
  display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;
  border:1px solid rgba(212,163,115,.6);margin-bottom:1rem;
}
.pain-mark::before,.pain-mark::after{
  content:"";position:absolute;width:.72rem;height:1.5px;background:var(--accent);
}
.pain-mark{position:relative}
.pain-mark::before{transform:rotate(45deg)}
.pain-mark::after{transform:rotate(-45deg)}
.pain-card h3{margin-bottom:.5rem}
.pain-card p{margin:0;font-size:.98rem;color:var(--ink-soft);line-height:1.6}

.pain-close{
  margin:3rem 0 0;text-align:center;
  /* Same face and variation settings as h1/h2 so the closer reads as a heading. */
  font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;
  font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(1.12rem,2.1vw,1.45rem);line-height:1.45;
}
.pain-close em{font-style:italic;color:var(--sage-dark)}

/* =========================================================
   3. Solution
   ========================================================= */
.solution{background:var(--cream)}
.about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
.about-media{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow)}
/* Portrait source is 3:4 — the frame matches it exactly so the whole photo
   shows with no crop top or bottom. */
.about-media img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top}
.about-copy p{color:var(--ink-soft);font-size:1.04rem;margin-top:1.4rem}
.about-copy h2{margin-bottom:.4rem}

.ticks{margin:1.9rem 0 2.2rem;display:grid;gap:.75rem}
.ticks li{display:flex;align-items:flex-start;gap:.7rem;font-size:.98rem}
.ticks li::before{
  content:"";flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.18rem;border-radius:50%;
  border:1px solid var(--sage);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c715e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size:.72rem;background-repeat:no-repeat;background-position:center;
}
.ticks.light li,.plan.featured .ticks li{color:rgba(255,255,255,.92)}
.ticks.light li::before,.plan.featured .ticks li::before{
  border-color:rgba(255,255,255,.5);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Four-step journey: numbered waypoints joined by a dashed path */
.journey{
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2.6rem,5vw,3.6rem);
  border-top:1px solid var(--line);
}
.journey-head{max-width:38rem;margin-bottom:clamp(2.6rem,5vw,3.6rem)}
.journey-title{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.16;
  font-size:clamp(1.55rem,2.8vw,2.15rem);
}
.journey-head .lede{margin:.9rem 0 0;font-size:1.08rem}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;list-style:none;margin:0;padding:0}
.step{position:relative;padding-top:4.9rem}
.step:not(:last-child)::before{
  content:"";position:absolute;top:1.8rem;left:4rem;right:-1.6rem;
  border-top:1.5px dashed rgba(92,113,94,.45);
}
.step-node{
  position:absolute;top:0;left:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:3.6rem;height:3.6rem;border-radius:50%;
  background:var(--sage);color:#fff;
  font-family:var(--font-display);font-size:1.15rem;line-height:1;
  box-shadow:0 0 0 6px var(--cream);
}
.step-node em{
  font-family:var(--font-body);font-style:normal;font-size:.5rem;
  letter-spacing:.16em;text-transform:uppercase;opacity:.8;margin-bottom:.2rem;
}
.step h4{
  font-family:var(--font-body);font-size:1.05rem;font-weight:500;
  letter-spacing:.01em;line-height:1.35;margin:0 0 .45rem;
}
.step p{margin:0;font-size:.97rem;color:var(--ink-soft);line-height:1.6}

.value-icon{
  display:grid;place-items:center;flex:0 0 auto;
  width:2.9rem;height:2.9rem;border-radius:50%;
  background:var(--white);border:1px solid var(--line);
}
.value-icon svg{width:1.25rem;height:1.25rem;fill:none;stroke:var(--sage);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================
   Lead-gen strip
   ========================================================= */
.pdfstrip{background:var(--sage-dark);color:#fff;padding:clamp(1.8rem,3.6vw,2.4rem) 0}
.pdfstrip-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.pdfstrip h3{font-family:var(--font-display);font-size:clamp(1.25rem,2.3vw,1.7rem);font-weight:400;max-width:32ch;margin-bottom:.5rem}
.pdfstrip p{margin:0;font-size:.98rem;color:rgba(255,255,255,.84);max-width:46ch}
.pdfstrip .eyebrow{margin-bottom:.8rem}
/* The only CTA in this band, and it sits against a full-width dark field,
   so it is stepped up from the page default to carry that weight. */
.pdfstrip .btn{padding:1.15rem 2.1rem;font-size:.95rem}

/* =========================================================
   4. Benefits
   ========================================================= */
.benefits{background:var(--cream-2)}
.benefit-head{max-width:44rem;margin-bottom:3rem}
.benefit-head .lede{margin-top:1.3rem}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 2rem}
.benefit h3{margin:1rem 0 .45rem}
.benefit p{margin:0;font-size:.98rem;color:var(--ink-soft);line-height:1.6}

/* Numbers strip sitting directly under the hero: figure over caption, four
   across. No icons, no imagery, no heading. */
.numbers{background:var(--cream);padding:clamp(2rem,3.6vw,2.8rem) 0;border-bottom:1px solid var(--line)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 1.4rem}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem}
.stat strong{font-family:var(--font-display);font-size:1.95rem;font-weight:400;line-height:1}
.stat span:last-child{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}

/* =========================================================
   5. Testimonials
   ========================================================= */
.testimonials{background:var(--sand)}
.testimonials h2{margin-bottom:3rem}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.quote{
  margin:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.9rem 1.6rem 1.5rem;position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
/* Before / after comparison: the after photo is clipped at --pos and the
   handle drags that line. Full bleed to the card edges. */
/* The client photos are full-body portraits at 1:2, so the frame matches them
   and is capped at 17rem wide rather than bleeding to the card edges: the whole
   body stays in shot at every breakpoint instead of a cropped landscape band. */
.ba{
  position:relative;aspect-ratio:1/2;overflow:hidden;
  width:min(100%,17rem);margin:0 auto 1.5rem;border-radius:var(--r-md);
  background:var(--sand);touch-action:pan-y;user-select:none;
}
.ba-shot{width:100%;height:100%;object-fit:cover;pointer-events:none}

/* Empty photo slot: until real consented client photos exist, the two halves
   carry a tone shift instead of imagery, so the slider still demonstrates the
   interaction and reads as a deliberate slot rather than a broken image. To
   fill it, drop .ba-empty and put the .ba-shot images back in. */
.ba-empty{aspect-ratio:16/9}
.ba-ph{width:100%;height:100%;pointer-events:none}
.ba-ph-before{background:linear-gradient(140deg,var(--cream-2) 0%,var(--sand) 100%)}
.ba-ph-after{background:linear-gradient(140deg,rgba(92,113,94,.16) 0%,rgba(92,113,94,.3) 100%)}
/* Sits above the handle's rule so the line never cuts through the label, and
   below the knob's vertical centre so the two never collide. */
.ba-note{
  position:absolute;left:50%;bottom:.95rem;transform:translateX(-50%);z-index:4;
  margin:0;pointer-events:none;width:max-content;max-width:calc(100% - 2.2rem);text-align:center;
  padding:.5rem .95rem;border-radius:999px;background:rgba(253,253,252,.88);
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.4;color:var(--ink-soft);
}
/* The white rule reads on photos but disappears on the pale empty panels. */
.ba-empty .ba-handle::before{background:rgba(92,113,94,.45)}
.ba-note::before{
  content:"";display:inline-block;width:.85rem;height:.85rem;
  vertical-align:-.15rem;margin-right:.45rem;opacity:.8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c715e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.ba-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))}
.ba-tag{
  position:absolute;top:.7rem;z-index:2;
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:999px;
  background:rgba(47,62,70,.78);color:#fff;
}
.ba-tag-before{left:.7rem}
.ba-tag-after{right:.7rem}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);z-index:3;
  width:2.8rem;transform:translateX(-50%);
  background:none;border:0;padding:0;cursor:ew-resize;
}
.ba-handle::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;
  transform:translateX(-50%);background:rgba(255,255,255,.92);
}
.ba-handle span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:2.3rem;height:2.3rem;border-radius:50%;
  background:var(--cream);box-shadow:var(--shadow-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c715e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8l-4 4 4 4M14 8l4 4-4 4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:1.1rem;
}
.ba-handle:focus-visible{outline:none}
.ba-handle:focus-visible span{outline:2px solid var(--sage);outline-offset:3px}
.quote:hover .ba-handle span{transform:translate(-50%,-50%) scale(1.06)}

.mark{font-family:var(--font-quote);font-size:2.8rem;line-height:.6;color:var(--accent);display:block;margin-bottom:.6rem}
.quote blockquote{margin:0;font-family:var(--font-quote);font-size:1.05rem;line-height:1.65;color:var(--ink)}
.quote figcaption{display:flex;align-items:center;gap:.8rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.quote figcaption span:last-child{display:flex;flex-direction:column;line-height:1.35}
.quote figcaption strong{font-size:.95rem;font-weight:500}
.quote figcaption em{font-style:normal;font-size:.75rem;color:var(--ink-soft)}
.avatar{
  display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--accent-soft);color:var(--sage-dark);
  font-family:var(--font-display);font-size:1rem;
}

/* =========================================================
   Lead magnet
   ========================================================= */
.magnet{background:var(--cream-2);border-block:1px solid var(--line)}
.magnet-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,4.5rem);align-items:center}
.magnet-copy h2{max-width:16ch}
.magnet-copy > p{color:var(--ink-soft);font-size:1.04rem;margin-top:1.3rem;max-width:34rem}

.optin{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.6rem;box-shadow:var(--shadow-soft);max-width:30rem;
}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.45rem}
.field .opt{text-transform:none;letter-spacing:0;font-size:.72rem}
input,select,textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--cream-2);font-family:var(--font-body);font-size:1rem;font-weight:400;color:var(--ink);
  transition:border-color .25s,box-shadow .25s;
}
textarea{resize:vertical;min-height:5rem}
input::placeholder,textarea::placeholder{color:#a79d92}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(92,113,94,.14)}
.field.invalid input,.field.invalid select{border-color:#b4503f;box-shadow:0 0 0 3px rgba(180,80,63,.09)}
.error{color:#b4503f;font-size:.78rem;margin:.4rem 0 0;min-height:0}
.micro{font-size:.75rem;color:var(--ink-soft);text-align:center;margin:.9rem 0 0}
.form-success{
  margin:1rem 0 0;padding:.85rem 1rem;border-radius:var(--r-sm);
  background:rgba(92,113,94,.1);color:var(--sage-dark);font-size:.92rem;line-height:1.5;
}

/* Submission failed: same block, warm-red tint. Contrast checked against
   both section backgrounds this message can sit on (cream and sand). */
.form-success.is-error{
  background:rgba(155,58,44,.1);color:#8a3122;
}

.magnet-card{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
/* Matches Model.avif at its native 2:3. A wider slot would cover-crop the
   standing pose, cutting straight through the raised hands. */
.magnet-card img{width:100%;aspect-ratio:3/4.5;object-fit:cover}
.magnet-badge{
  position:absolute;left:1.2rem;right:1.2rem;bottom:1.2rem;
  background:rgba(253,253,252,.95);backdrop-filter:blur(6px);
  border-radius:var(--r-md);padding:1rem 1.2rem;display:flex;flex-direction:column;
}
.magnet-badge strong{font-family:var(--font-display);font-size:1.35rem;font-weight:400;line-height:1.1}
.magnet-badge span{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-top:.25rem}

/* =========================================================
   FAQ
   ========================================================= */
.faq{background:var(--cream)}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
.faq-intro p{color:var(--ink-soft);font-size:1.04rem;margin:1.3rem 0 1.8rem;max-width:26rem}
.accordion{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-trigger{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-size:1.06rem;font-weight:400;letter-spacing:.005em;transition:color .25s;
}
.acc-trigger:hover{color:var(--sage)}
.acc-trigger::before,.acc-trigger::after{
  content:"";position:absolute;right:.35rem;top:50%;background:var(--sage);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.acc-trigger::before{width:14px;height:1.5px;transform:translateY(-50%)}
.acc-trigger::after{width:1.5px;height:14px;right:calc(.35rem + 6.25px);transform:translateY(-50%)}
.acc-trigger[aria-expanded="true"]::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.acc-panel{overflow:hidden;height:0;transition:height .4s var(--ease)}
.acc-panel p{font-size:1rem;color:var(--ink-soft);margin:0 0 1.4rem;padding-right:2.5rem;line-height:1.6}

/* =========================================================
   7. Final CTA — book a session
   ========================================================= */
.cta{position:relative;padding:clamp(2.8rem,5.5vw,4.4rem) 0;background:var(--sage);color:#fff;overflow:hidden}
.cta-media{position:absolute;inset:0}
.cta-media img{width:100%;height:100%;object-fit:cover;opacity:.28}
.cta-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(92,113,94,.95) 0%,rgba(92,113,94,.86) 55%,rgba(92,113,94,.74) 100%)}
.cta-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,4.5rem);align-items:center}
.cta-copy h2{color:#fff}
.cta-copy > p:not(.eyebrow):not(.cta-alt){color:rgba(255,255,255,.9);font-size:1.06rem;margin-top:1.3rem;max-width:32rem}
/* Secondary path for anyone not ready to book: raised into a tinted pill with a
   warm-sand underline so it catches the eye without outranking the form button. */
.cta-alt{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem .8rem;
  margin:0;padding:.85rem 1.4rem;
  border:1px solid rgba(255,255,255,.4);border-radius:var(--r-lg);
  background:rgba(255,255,255,.12);
  font-size:1rem;color:#fff;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.cta-alt:hover{background:rgba(255,255,255,.19);border-color:rgba(255,255,255,.72)}
.cta-alt .dl-dot{
  flex:0 0 auto;width:1.9rem;height:1.9rem;margin-left:0;
  border-color:rgba(255,255,255,.55);color:#fff;
}
.cta-alt-lead{color:rgba(255,255,255,.82)}
.cta-alt a{
  color:#fff;font-weight:600;letter-spacing:.01em;
  border-bottom:2px solid var(--accent);padding-bottom:2px;
  transition:border-color .35s var(--ease);
}
.cta-alt a:hover{border-bottom-color:#fff}

.call-form{
  background:rgba(253,253,252,.97);color:var(--ink);
  border-radius:var(--r-lg);padding:1.9rem;box-shadow:var(--shadow);
}
.call-form h3{font-family:var(--font-display);font-size:1.45rem;font-weight:400;margin-bottom:1.3rem}
.call-form .btn-solid{background:var(--accent)}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{background:var(--sage-dark);color:var(--cream);padding:2.8rem 0 1.75rem}
.site-footer .brand-text em{color:rgba(255,255,255,.75)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem}
.footer-brand{margin-bottom:1.1rem}
.footer-note{font-size:.95rem;color:rgba(255,255,255,.8);max-width:26rem}
.site-footer h4{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;font-family:var(--font-body);font-weight:500;margin:0 0 1rem}
.site-footer nav,.footer-contact{display:flex;flex-direction:column;gap:.6rem}
.site-footer nav a,.footer-contact a{font-size:.95rem;color:rgba(255,255,255,.82);transition:color .25s}
.site-footer nav a:hover,.footer-contact a:hover{color:#fff}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18);
}
.footer-bottom p{margin:0;font-size:.76rem;color:rgba(255,255,255,.72)}
.disclaimer{opacity:.8}

/* =========================================================
   Back to top
   ========================================================= */
.to-top{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;
  width:2.9rem;height:2.9rem;border-radius:50%;border:0;cursor:pointer;
  background:var(--sage);color:#fff;box-shadow:var(--shadow-soft);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .35s var(--ease);
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--sage-dark)}

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Fallback tint when a remote photo fails to load */
.photo-fallback{
  background:linear-gradient(135deg,var(--sand) 0%,var(--accent-soft) 55%,var(--cream-2) 100%);
}
.photo-fallback img{opacity:0}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .pains,.benefit-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding:0 0 2.2rem 5.3rem;min-height:3.6rem}
  .step:last-child{padding-bottom:0}
  .step:not(:last-child)::before{
    top:4.3rem;bottom:.5rem;left:1.8rem;right:auto;
    border-top:0;border-left:1.5px dashed rgba(92,113,94,.45);
  }
  .plans{grid-template-columns:1fr;max-width:30rem;margin-inline:auto}
  .plan.featured{order:-1}
  .quotes{grid-template-columns:1fr;max-width:44rem;margin-inline:auto}
}

@media (max-width:860px){
  .nav{
    position:fixed;inset:0 0 0 auto;z-index:100;width:min(80vw,330px);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--cream);padding:1.1rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom));
    box-shadow:-12px 0 40px -22px rgba(0,0,0,.5);
    transform:translateX(100%);transition:transform .4s var(--ease);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .nav.open{transform:none}

  /* Drawer masthead — mirrors the header brand so the panel is never headless,
     and its 44px height lines the divider up with the close button. */
  .nav-brand{
    display:flex;align-items:center;gap:.7rem;min-height:44px;
    padding-right:52px;margin-bottom:1.1rem;
    padding-bottom:1.1rem;border-bottom:1px solid var(--line);
  }
  .nav-brand .brand-text{font-size:1.02rem}

  .nav a{font-size:1.02rem;padding:.72rem 0}
  .nav a:not(.btn){border-bottom:1px solid var(--line)}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin-top:1.4rem;text-align:center;justify-content:center;padding-block:.8rem}

  .nav-toggle{display:flex;position:relative;z-index:101}
  body.nav-open{overflow:hidden}

  /* Body-level element, so z-index 99 is measured against the root: it lands
     under the header (100) — keeping the drawer and the toggle live — and over
     the page and the to-top button (90). Visibility is delayed by the fade so
     the closed backdrop never sits invisibly over the page swallowing taps. */
  .nav-backdrop{
    display:block;position:fixed;inset:0;z-index:99;
    background:rgba(28,28,26,.38);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .4s var(--ease),visibility 0s linear .4s;
  }
  .nav-backdrop.show{
    opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .4s var(--ease),visibility 0s;
  }

  .hero{padding-top:6.5rem;min-height:auto}
  .hero-media::after{background:linear-gradient(180deg,rgba(253,253,252,.95) 0%,rgba(253,253,252,.9) 55%,rgba(253,253,252,.72) 100%)}
  .about-grid,.magnet-grid,.faq-grid,.cta-inner{grid-template-columns:1fr}
  .about-grid .about-media{order:-1}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:2.2rem 1.4rem}
  .pdfstrip-inner{flex-direction:column;align-items:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > div:first-child{grid-column:1 / -1}
}

@media (max-width:560px){
  .pains,.benefit-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .optin,.call-form,.plan{padding:1.3rem}
  .footer-grid{grid-template-columns:1fr}
  /* Trims only the empty margin above the hands and below the feet. */
  .magnet-card img{aspect-ratio:3/4.2}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.to-top,.hero-media,.cta-media{display:none}
  body{background:#fff}
}