/* ============================================================
   FASTING WITH NICKI — Design System
   Editorial wellness. Warm, calm, premium.
   ============================================================ */

:root{
  /* --- Brand --- */
  --gold:        #EBB100;   /* pulled from her logo file */
  --gold-deep:   #C08F06;
  --gold-wash:   rgba(235,177,0,.10);

  /* --- Neutrals (warm, never grey) --- */
  --ink:         #15120E;
  --ink-2:       #2E2823;
  --ink-3:       #5C534A;
  --ink-4:       #8C8177;
  --bone:        #FBF8F3;
  --cream:       #F3ECE1;
  --sand:        #E6DBCA;
  --line:        rgba(21,18,14,.12);
  --line-soft:   rgba(21,18,14,.07);

  --wa:          #25D366;   /* official WhatsApp green — do not tint */

  /* --- Type --- */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-hero:  clamp(2.5rem, 1.15rem + 4.3vw, 4.5rem);
  --t-h2:    clamp(1.9rem, 1rem + 2.8vw, 3.1rem);
  --t-h3:    clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
  --t-lead:  clamp(1.075rem, .98rem + .48vw, 1.35rem);
  --t-body:  clamp(1rem, .96rem + .18vw, 1.075rem);
  --t-sm:    .875rem;
  --t-xs:    .75rem;

  /* --- Space --- */
  --gut: clamp(1.25rem, .6rem + 2.6vw, 3.5rem);
  --sec: clamp(4.5rem, 2rem + 8vw, 9.5rem);
  --max: 1280px;
  --measure: 62ch;

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 26px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* Lenis takes over smooth scrolling when active */
html.lenis,html.lenis body{ height:auto; scroll-behavior:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:500; line-height:1.04; letter-spacing:-.022em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--gold); color:var(--ink); }

/* Fine grain — the texture that separates "template" from "designed" */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.032; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.wrap{
  width:100%; max-width:var(--max); margin-inline:auto;
  /* max() keeps content clear of the notch in landscape */
  padding-left:max(var(--gut), env(safe-area-inset-left,0px));
  padding-right:max(var(--gut), env(safe-area-inset-right,0px));
}
.sec{ padding-block:var(--sec); position:relative; }
.sec--cream{ background:var(--cream); }
.sec--ink{ background:var(--ink); color:var(--bone); }
.sec--ink h2,.sec--ink h3{ color:var(--bone); }

.eyebrow{
  font-family:var(--sans); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--gold-deep);
  display:flex; align-items:center; gap:.7rem; margin-bottom:1.6rem;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; flex:none; }
.sec--ink .eyebrow{ color:var(--gold); }

.lead{ font-size:var(--t-lead); line-height:1.55; color:var(--ink-2); max-width:var(--measure); }
.sec--ink .lead{ color:rgba(251,248,243,.74); }
.muted{ color:var(--ink-3); }
.gold{ color:var(--gold-deep); }

/* Serif italic accent inside headlines */
.accent{ font-style:italic; color:var(--gold-deep); font-variation-settings:"SOFT" 40,"WONK" 1; }
.sec--ink .accent{ color:var(--gold); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg:var(--ink); --fg:var(--bone); --bd:var(--ink);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.02rem 1.9rem; border:1px solid var(--bd); border-radius:100px;
  background:var(--bg); color:var(--fg);
  font-size:var(--t-sm); font-weight:600; letter-spacing:.03em;
  overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--gold);
  transform:translateY(101%); transition:transform .5s var(--ease-out);
}
.btn:hover{ color:var(--ink); border-color:var(--gold); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:scale(.985); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line); }
.btn--ghost:hover{ color:var(--ink); }
.sec--ink .btn--ghost,.hero .btn--ghost{ --fg:inherit; --bd:currentColor; }
.btn--lg{ padding:1.2rem 2.4rem; font-size:.95rem; }
.btn__arrow{ transition:transform .4s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

/* Underlined text link */
.tlink{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:var(--t-sm);
  padding-bottom:3px; background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .4s var(--ease), color .3s var(--ease);
}
.tlink:hover{ background-size:0% 1px; color:var(--gold-deep); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding-block:1.35rem; transition:padding .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.hdr::before{
  content:""; position:absolute; inset:0; background:rgba(251,248,243,.82);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  opacity:0; transition:opacity .5s var(--ease); border-bottom:1px solid var(--line-soft);
}
.hdr.is-stuck{ padding-block:.85rem; }
.hdr.is-stuck::before{ opacity:1; }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; position:relative; }
.hdr__logo{ display:flex; align-items:center; gap:.65rem; flex:none; }
.hdr__logo img{ height:38px; width:auto; transition:height .5s var(--ease); }
.hdr.is-stuck .hdr__logo img{ height:32px; }

.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav a{
  font-size:.82rem; font-weight:500; letter-spacing:.04em; color:var(--ink-2);
  position:relative; padding-block:.3rem;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.hdr__cta{ display:flex; align-items:center; gap:1.1rem; }

/* Language switcher */
.lang{
  display:flex; align-items:center; gap:.35rem; flex:none;
  font-size:.72rem; font-weight:600; letter-spacing:.1em; color:var(--ink-4);
}
.lang a{ padding:.4rem .15rem; transition:color .3s var(--ease); }
.lang a:hover{ color:var(--ink); }
.lang a[aria-current="true"]{ color:var(--ink); }
.lang i{ font-style:normal; opacity:.35; }

.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; margin-right:-10px; }
.burger span{ display:block; width:22px; height:1.5px; background:var(--ink); position:relative; transition:background .3s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--ink);
  transition:transform .4s var(--ease-out), top .3s var(--ease);
}
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
body.nav-open .burger span{ background:transparent; }
body.nav-open .burger span::before{ top:0; transform:rotate(45deg); }
body.nav-open .burger span::after{ top:0; transform:rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:clamp(7.5rem,6rem + 7vw,11rem); padding-bottom:clamp(3rem,1.5rem + 4vw,5rem); overflow:hidden; }
.hero__glow{
  position:absolute; top:-22%; right:-14%; width:min(74vw,860px); aspect-ratio:1; z-index:0;
  background:radial-gradient(circle at 50% 50%, var(--gold-wash) 0%, rgba(235,177,0,0) 68%);
  pointer-events:none;
}
.hero__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center;
}
.hero h1{ font-size:var(--t-hero); margin-bottom:1.6rem; }
.hero .lead{ margin-bottom:2.4rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; }

.hero__figure{ position:relative; }
.hero__img{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  box-shadow:0 42px 90px -46px rgba(21,18,14,.5), 0 2px 8px rgba(21,18,14,.05);
}
.hero__img img{ width:100%; height:100%; object-fit:cover; }
/* unifies the warm studio shot with the cool outdoor shots */
.hero__img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(150deg, rgba(235,177,0,.09), rgba(21,18,14,.14));
  mix-blend-mode:multiply;
}
.hero__badge{
  position:absolute; left:-1.5rem; bottom:-1.5rem; z-index:3;
  background:var(--bone); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:1.1rem 1.35rem; box-shadow:0 26px 50px -28px rgba(21,18,14,.42); max-width:230px;
}
.hero__badge strong{ font-family:var(--display); font-size:1.65rem; display:block; line-height:1; margin-bottom:.3rem; }
.hero__badge span{ font-size:var(--t-xs); letter-spacing:.06em; color:var(--ink-3); line-height:1.4; display:block; }

/* the bird, in flight */
.bird{
  position:absolute; z-index:4; width:clamp(52px,7vw,86px); opacity:0;
  filter:drop-shadow(0 10px 22px rgba(235,177,0,.34));
  pointer-events:none;
}
.bird--hero{ top:8%; left:-3%; }
.is-ready .bird--hero{ animation:birdFly 2.1s var(--ease-out) .35s forwards; }
@keyframes birdFly{
  0%   { opacity:0; transform:translate3d(-90px,70px,0) rotate(-16deg) scale(.7); }
  55%  { opacity:1; }
  100% { opacity:1; transform:translate3d(0,0,0) rotate(0deg) scale(1); }
}
.bird--hero::after{ content:""; }
.is-ready .bird--hero img{ animation:birdBob 5.5s ease-in-out 2.5s infinite; }
@keyframes birdBob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-9px) rotate(-2.5deg); } }

/* CTA microcopy — the friction-remover under every button */
.micro{
  margin:1rem 0 0; font-size:var(--t-xs); letter-spacing:.05em;
  color:var(--ink-4); display:flex; align-items:center; gap:.5rem;
}
.micro::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; }
.final .micro{ justify-content:center; margin-top:1.4rem; }
.sec--cream .micro{ color:var(--ink-3); }

.scroll-cue{
  margin-top:clamp(1.75rem,1rem + 2vw,3rem); display:flex; align-items:center; gap:.8rem;
  font-size:var(--t-xs); letter-spacing:.17em; text-transform:uppercase; color:var(--ink-4);
}
.scroll-cue i{ display:block; width:52px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; inset:0; background:var(--gold); animation:cue 2.6s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateX(-100%); } 60%,100%{ transform:translateX(100%); } }

/* ============================================================
   MARQUEE — credential band
   ============================================================ */
.band{ background:var(--ink); color:var(--bone); padding-block:1.15rem; overflow:hidden; }
.marq{ display:flex; width:max-content; animation:marq 42s linear infinite; }
.marq:hover{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marq__set{ display:flex; align-items:center; flex:none; }
.marq__item{
  display:inline-flex; align-items:center; gap:1.6rem; padding-inline:1.6rem;
  font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(251,248,243,.82); white-space:nowrap;
}
.marq__item::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; }

/* ============================================================
   PAIN LIST
   ============================================================ */
.split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,1rem + 4vw,6rem); align-items:start; }
.split--even{ grid-template-columns:1fr 1fr; align-items:center; }

.pain{ display:grid; gap:0; border-top:1px solid var(--line); }
.pain li{
  display:flex; gap:1.15rem; align-items:flex-start;
  padding:1.35rem .25rem; border-bottom:1px solid var(--line);
  font-size:var(--t-lead); line-height:1.5; color:var(--ink-2);
  transition:background .4s var(--ease), padding-left .4s var(--ease);
}
.pain li:hover{ background:rgba(235,177,0,.06); padding-left:1rem; }
.pain li b{ font-weight:600; color:var(--ink); }
.pain__x{ flex:none; margin-top:.42em; width:15px; height:15px; color:var(--gold-deep); }

.callout{
  margin-top:2.6rem; padding:clamp(1.5rem,1rem + 1.6vw,2.4rem);
  background:var(--bone); border:1px solid var(--line-soft); border-left:2px solid var(--gold);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--display); font-size:clamp(1.2rem,1rem + .8vw,1.6rem); line-height:1.38; letter-spacing:-.015em;
}
.sec--cream .callout{ background:#fff; }

/* ============================================================
   FIGURES / ARCH PORTRAIT
   ============================================================ */
.fig{ position:relative; }
.fig__img{ position:relative; overflow:hidden; border-radius:var(--r-lg); box-shadow:0 40px 80px -46px rgba(21,18,14,.46); }
.fig--arch .fig__img{ border-radius:50vw 50vw var(--r-lg) var(--r-lg) / 34% 34% var(--r-lg) var(--r-lg); }
.fig__img img{ width:100%; }
.fig__img::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:linear-gradient(160deg, rgba(235,177,0,.10), rgba(21,18,14,.12));
}
.fig__cap{
  position:absolute; right:-.75rem; bottom:1.75rem; z-index:3;
  background:var(--ink); color:var(--bone); padding:.7rem 1.1rem; border-radius:100px;
  font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase;
}

/* ============================================================
   CREDENTIALS
   ============================================================ */
.creds{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.4rem; }
.creds li{ background:var(--bone); padding:1.4rem 1.35rem; }
.sec--cream .creds li{ background:var(--cream); }
.creds b{ display:block; font-family:var(--display); font-size:1.05rem; font-weight:500; margin-bottom:.2rem; }
.creds span{ font-size:var(--t-sm); color:var(--ink-3); }

/* ============================================================
   METHOD STEPS
   ============================================================ */
.steps{ display:grid; gap:0; margin-top:clamp(2.5rem,1.5rem + 3vw,4rem); }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,1rem + 3vw,4.5rem);
  padding-block:clamp(2rem,1.4rem + 2vw,3.2rem); border-top:1px solid rgba(251,248,243,.14);
  align-items:start;
}
.step:last-child{ border-bottom:1px solid rgba(251,248,243,.14); }
.step__n{
  font-family:var(--display); font-size:clamp(2.6rem,1.6rem + 4vw,5.5rem); line-height:.85;
  color:transparent; -webkit-text-stroke:1px rgba(235,177,0,.55); min-width:2.6ch;
  transition:color .6s var(--ease), -webkit-text-stroke-color .6s var(--ease);
}
.step:hover .step__n{ color:var(--gold); -webkit-text-stroke-color:var(--gold); }
.step h3{ font-size:var(--t-h3); margin-bottom:.7rem; }
.step p{ color:rgba(251,248,243,.68); max-width:56ch; }

/* ============================================================
   OFFER CARD
   ============================================================ */
.offer{
  background:var(--bone); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.75rem,1.2rem + 2.4vw,3.4rem);
  box-shadow:0 40px 80px -56px rgba(21,18,14,.4);
}
.offer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem; align-items:flex-start; padding-bottom:1.8rem; border-bottom:1px solid var(--line); }
.offer h3{ font-size:clamp(1.7rem,1.2rem + 1.9vw,2.6rem); margin-bottom:.5rem; }
.tag{
  display:inline-flex; align-items:center; gap:.5rem; padding:.42rem .95rem; border-radius:100px;
  background:var(--gold-wash); border:1px solid rgba(235,177,0,.4); color:var(--gold-deep);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.incl{ display:grid; grid-template-columns:repeat(2,1fr); gap:.15rem 2.5rem; margin:1.8rem 0 2.2rem; }
.incl li{ display:flex; gap:.85rem; align-items:flex-start; padding-block:.7rem; font-size:var(--t-body); color:var(--ink-2); }
.incl svg{ flex:none; margin-top:.34em; width:16px; height:16px; color:var(--gold-deep); }
.offer__foot{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between; }

/* ============================================================
   PRICING PLANS
   ============================================================ */
.cur{
  display:inline-flex; align-items:center; gap:0; padding:3px; border-radius:100px;
  background:var(--cream); border:1px solid var(--line); flex:none;
}
.cur button{
  padding:.42rem 1rem; border-radius:100px; font-size:.76rem; font-weight:600;
  letter-spacing:.08em; color:var(--ink-4);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.cur button[aria-pressed="true"]{ background:var(--ink); color:var(--bone); }

.plans__top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.4rem; margin-bottom:clamp(2rem,1.5rem + 2vw,2.8rem);
}

.plans{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(1rem,.8rem + 1vw,1.5rem); align-items:stretch;
}
.plan{
  position:relative; display:flex; flex-direction:column;
  background:var(--bone); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.plan:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -34px rgba(21,18,14,.4); }
.plan--hero{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 34px 64px -34px rgba(21,18,14,.4); }
.plan--hero:hover{ box-shadow:0 0 0 1px var(--gold), 0 40px 72px -34px rgba(21,18,14,.5); }

.plan__flag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:var(--ink);
  font-size:.63rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.34rem .95rem; border-radius:100px; white-space:nowrap;
}
.plan__k{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.9rem; }
.plan h3{ font-size:clamp(1.3rem,1.15rem + .7vw,1.65rem); margin-bottom:.5rem; }
.plan__for{ font-size:var(--t-sm); color:var(--ink-3); line-height:1.6; margin-bottom:1.5rem; }

.plan__price{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:.35rem; }
.plan__amt{
  font-family:var(--display); font-size:clamp(2.2rem,1.8rem + 1.6vw,3rem);
  font-weight:400; line-height:1; letter-spacing:-.03em;
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.plan__amt.swap{ opacity:0; transform:translateY(-6px); }
.plan__cur{ font-size:.78rem; font-weight:600; letter-spacing:.1em; color:var(--ink-4); }
.plan__split{ font-size:var(--t-xs); color:var(--ink-4); margin-bottom:1.4rem; min-height:1.2em; }
.plan__unit{ font-size:var(--t-xs); color:var(--gold-deep); font-weight:600; letter-spacing:.05em; }

.plan hr{ border:0; height:1px; background:var(--line); margin:0 0 1.35rem; }
.plan ul{ display:grid; gap:.72rem; margin-bottom:1.8rem; flex:1; }
.plan li{ display:flex; gap:.7rem; align-items:flex-start; font-size:var(--t-sm); line-height:1.55; color:var(--ink-2); }
.plan li svg{ flex:none; width:15px; height:15px; margin-top:.28em; color:var(--gold-deep); }
.plan .btn{ width:100%; }
.plan--hero .btn{ --bg:var(--gold); --fg:var(--ink); --bd:var(--gold); }
.plan--hero .btn::before{ background:var(--ink); }
.plan--hero .btn:hover{ color:var(--bone); }

/* capacity strip — honest scarcity, no invented numbers */
.cap{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem;
  margin-top:clamp(2rem,1.5rem + 2vw,2.8rem); padding:1.15rem 1.5rem;
  background:var(--ink); color:var(--bone); border-radius:var(--r-md); font-size:var(--t-sm);
}
.cap__dot{ position:relative; flex:none; width:9px; height:9px; border-radius:50%; background:var(--gold); }
.cap__dot::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid var(--gold); animation:capPulse 2.8s var(--ease-out) infinite;
}
@keyframes capPulse{ 0%{ transform:scale(.6); opacity:.9 } 70%,100%{ transform:scale(1.25); opacity:0 } }
.cap b{ color:var(--gold); }
.cap > span span{ color:rgba(251,248,243,.68); }
.cap a{
  margin-left:auto; font-weight:600; white-space:nowrap;
  background-image:linear-gradient(var(--gold),var(--gold)); background-size:100% 1px;
  background-repeat:no-repeat; background-position:0 100%; padding-bottom:2px;
}
.fine{ margin-top:1.5rem; font-size:var(--t-xs); color:var(--ink-4); line-height:1.65; max-width:74ch; }

@media (max-width:560px){
  .plans__top{ flex-direction:column; align-items:flex-start; }
  .cap a{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ .cap__dot::after{ animation:none; } }

/* Services grid */
.svcs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(2rem,1.4rem + 2vw,3rem); }
.svc{ background:var(--bone); padding:clamp(1.5rem,1.2rem + 1vw,2.1rem); transition:background .45s var(--ease); position:relative; }
.svc:hover{ background:var(--cream); }
.svc h4{ font-family:var(--display); font-size:1.22rem; font-weight:500; margin-bottom:.5rem; }
.svc p{ font-size:var(--t-sm); color:var(--ink-3); line-height:1.6; }
.svc__i{ width:26px; height:26px; color:var(--gold-deep); margin-bottom:1.1rem; }
.svc--soon::after{
  content:"Coming soon"; position:absolute; top:1.3rem; right:1.3rem;
  font-size:.63rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4);
  border:1px solid var(--line); border-radius:100px; padding:.2rem .55rem;
}

/* ============================================================
   PROOF / PODCASTS
   ============================================================ */
.pods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(1rem,.8rem + 1vw,1.6rem); margin-top:2.6rem; }
.pod{
  display:block; padding:1.7rem; background:var(--bone); border:1px solid var(--line);
  border-radius:var(--r-md); transition:transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s;
}
.pod:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -32px rgba(21,18,14,.4); border-color:rgba(235,177,0,.5); }
.pod__k{ font-size:var(--t-xs); letter-spacing:.15em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.85rem; display:block; }
.pod h4{ font-family:var(--display); font-size:1.2rem; font-weight:500; line-height:1.28; margin-bottom:.65rem; }
.pod span{ font-size:var(--t-sm); color:var(--ink-3); }

/* ============================================================
   PODCAST — playable cards
   The Spotify iframe is ~1MB of scripts, so it is only fetched
   when someone actually presses play. Nothing loads on page load.
   ============================================================ */
.shows{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(295px,1fr));
  gap:clamp(1rem,.8rem + 1vw,1.5rem); margin-top:2.6rem;
}
.show{
  position:relative; display:flex; flex-direction:column; gap:.9rem;
  background:var(--bone); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1.7rem; text-align:left; width:100%;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.show:hover{
  transform:translateY(-4px); border-color:rgba(235,177,0,.55);
  box-shadow:0 26px 50px -32px rgba(21,18,14,.4);
}
.show__head{ display:flex; align-items:center; gap:.9rem; }
.show__ava{
  width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none;
  border:1.5px solid var(--sand);
}
.show__k{
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); display:block;
}
.show__k b{ display:block; color:var(--ink-4); font-weight:400; letter-spacing:.06em; margin-top:.15rem; }

/* equaliser — says "audio" without borrowing anyone's artwork */
.eq{ display:flex; align-items:flex-end; gap:3px; height:18px; margin-left:auto; flex:none; }
.eq i{ width:2.5px; border-radius:2px; background:var(--gold-deep); opacity:.5; height:30%; }
.show:hover .eq i{ animation:eqBar .9s ease-in-out infinite alternate; }
.eq i:nth-child(2){ animation-delay:.11s } .eq i:nth-child(3){ animation-delay:.22s }
.eq i:nth-child(4){ animation-delay:.33s } .eq i:nth-child(5){ animation-delay:.44s }
@keyframes eqBar{ from{ height:22% } to{ height:100% } }

.show h4{ font-family:var(--display); font-size:1.24rem; font-weight:500; line-height:1.25; }
.show p{ font-size:var(--t-sm); color:var(--ink-3); line-height:1.6; margin:0; flex:1; }

.show__play{
  display:flex; align-items:center; gap:.85rem; margin-top:.4rem;
  font-size:var(--t-sm); font-weight:600; color:var(--ink);
}
.show__btn{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:var(--gold); color:var(--ink); display:grid; place-items:center;
  box-shadow:0 6px 16px -6px rgba(235,177,0,.7);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.show:hover .show__btn{ transform:scale(1.08); box-shadow:0 10px 22px -6px rgba(235,177,0,.85); }
.show__btn svg{ width:16px; height:16px; margin-left:2px; }

/* official Spotify mark — brand green, never recoloured or distorted */
.show__on{
  display:flex; align-items:center; gap:.42rem; margin-top:.2rem;
  font-size:var(--t-xs); color:var(--ink-4); letter-spacing:.03em;
}
.show__on svg{ width:15px; height:15px; fill:#1DB954; flex:none; }

.show__embed{ border-radius:12px; overflow:hidden; line-height:0; }
.show__embed iframe{ width:100%; height:152px; border:0; display:block; }

/* her own words, as the third card */
.show--quote{
  margin:0; background:var(--ink); color:var(--bone); border-color:var(--ink);
  justify-content:center; gap:1.1rem;
}
.show--quote:hover{ border-color:var(--gold); }
.show--quote > svg{ width:24px; height:24px; color:var(--gold); }
.show--quote p{
  font-family:var(--display); font-size:1.16rem; line-height:1.45;
  color:var(--bone); flex:none;
}
.show--quote cite{
  font-style:normal; font-size:var(--t-xs); letter-spacing:.12em;
  text-transform:uppercase; color:rgba(251,248,243,.5);
}

@media (prefers-reduced-motion:reduce){ .show:hover .eq i{ animation:none; } }

.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(1rem,.8rem + 1vw,1.6rem); margin-top:2.6rem; }
.quote{ padding:clamp(1.5rem,1.2rem + 1vw,2.2rem); background:var(--cream); border-radius:var(--r-md); border:1px solid var(--line-soft); }
.sec--cream .quote{ background:var(--bone); }
.quote__m{ width:26px; height:26px; color:var(--gold); margin-bottom:1rem; }
.quote p{ font-family:var(--display); font-size:1.14rem; line-height:1.5; letter-spacing:-.01em; margin-bottom:1.3rem; }
.quote cite{ font-style:normal; font-size:var(--t-sm); font-weight:600; }
.quote cite small{ display:block; font-weight:400; color:var(--ink-3); font-size:var(--t-xs); margin-top:.15rem; }

/* ============================================================
   LEAD MAGNET
   ============================================================ */
.magnet{ position:relative; overflow:hidden; }
.magnet__in{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,1.4rem + 3vw,4.5rem); align-items:center; }
.form{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.9rem; }
.form input{
  flex:1 1 220px; min-width:0; padding:1.05rem 1.3rem; border-radius:100px;
  border:1px solid rgba(251,248,243,.26); background:rgba(251,248,243,.06); color:var(--bone);
  font-family:inherit; font-size:var(--t-sm); transition:border-color .35s, background .35s;
}
.form input::placeholder{ color:rgba(251,248,243,.45); }
.form input:focus{ outline:none; border-color:var(--gold); background:rgba(251,248,243,.11); }
.form .btn{ --bg:var(--gold); --fg:var(--ink); --bd:var(--gold); }
.form .btn::before{ background:var(--bone); }
.form__note{ font-size:var(--t-xs); color:rgba(251,248,243,.5); margin-top:1rem; }

/* Her actual guide cover, shown as the artwork it is.
   Capped at the source width (416px) so it never upscales and goes soft.
   Raise this if she supplies a higher-resolution original. */
.guide-card{
  position:relative; border-radius:var(--r-md); overflow:hidden; line-height:0;
  max-width:416px; margin-inline:auto;
  border:1px solid rgba(235,177,0,.28);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.8);
  transform:rotate(-2.5deg); transition:transform .7s var(--ease-out);
}
.guide-card img{ width:100%; height:auto; display:block; }
.magnet:hover .guide-card{ transform:rotate(0deg) translateY(-6px); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ border-top:1px solid var(--line); margin-top:clamp(2rem,1.4rem + 2vw,3rem); }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; text-align:left;
  padding:1.5rem .25rem; font-family:var(--display); font-size:clamp(1.08rem,.98rem + .5vw,1.35rem);
  font-weight:500; letter-spacing:-.012em; transition:color .3s;
}
.faq__q:hover{ color:var(--gold-deep); }
.faq__s{ flex:none; position:relative; width:16px; height:16px; }
.faq__s::before,.faq__s::after{ content:""; position:absolute; background:var(--gold-deep); border-radius:2px; }
.faq__s::before{ top:7.5px; left:0; width:16px; height:1.5px; }
.faq__s::after{ left:7.5px; top:0; width:1.5px; height:16px; transition:transform .45s var(--ease-out); }
.faq__i.is-open .faq__s::after{ transform:scaleY(0); }
.faq__a{ overflow:hidden; height:0; transition:height .5s var(--ease-out); }
.faq__a > div{ padding:0 3rem 1.7rem .25rem; color:var(--ink-3); max-width:70ch; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{ text-align:center; }
.final h2{ font-size:var(--t-h2); margin-bottom:1.4rem; }
.final .lead{ margin-inline:auto; margin-bottom:2.4rem; }
.final__actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }
.divider-bird{ width:46px; margin:0 auto 2rem; opacity:.9; }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{ background:var(--ink); color:rgba(251,248,243,.62); padding-block:clamp(3.5rem,2.5rem + 3vw,5.5rem) 2.5rem; font-size:var(--t-sm); }
.ftr__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,1.5rem + 2vw,4rem); padding-bottom:3rem; border-bottom:1px solid rgba(251,248,243,.12); }
.ftr img.ftr__logo{ width:190px; margin-bottom:1.4rem; }
.ftr h5{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--bone); margin:0 0 1.2rem; font-weight:600; font-family:var(--sans); }
.ftr li{ margin-bottom:.15rem; }
.ftr li a{ display:inline-block; padding-block:.55rem; }  /* 44px-ish tap target */
.ftr a:hover{ color:var(--gold); }

/* Contact list with platform marks */
.ftr__contact li{ margin-bottom:.35rem; }
.ftr__contact li a{ display:flex; align-items:center; gap:.8rem; padding-block:.4rem; }
.ftr__contact li a > span:last-child{ line-height:1.25; }
.ftr__contact em{
  display:block; font-style:normal; font-size:var(--t-xs);
  color:rgba(251,248,243,.38); letter-spacing:.04em;
}
.ftr__ico{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(251,248,243,.07); border:1px solid rgba(251,248,243,.12);
  color:rgba(251,248,243,.8);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}
.ftr__ico svg{ width:16px; height:16px; fill:currentColor; }
.ftr__ico svg[stroke]{ fill:none; }
.ftr__contact a:hover .ftr__ico{
  background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-2px);
}
.ftr__contact a:hover{ color:var(--bone); }
.ftr__bot{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-top:1.8rem; font-size:var(--t-xs); color:rgba(251,248,243,.42); }
.disclaimer{ margin-top:1.6rem; font-size:var(--t-xs); line-height:1.6; color:rgba(251,248,243,.42); max-width:78ch; }

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa{
  position:fixed; z-index:9000;
  right:clamp(1rem,.6rem + 1vw,1.6rem);
  bottom:calc(clamp(1rem,.6rem + 1vw,1.6rem) + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; gap:.75rem;
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.9);
  transition:opacity .5s var(--ease-out), transform .55s var(--ease-out), visibility .5s;
}
.wa.is-in{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

.wa__tip{
  background:var(--ink); color:var(--bone); font-size:.8rem; font-weight:500; white-space:nowrap;
  padding:.7rem 1.05rem; border-radius:100px; box-shadow:0 14px 30px -14px rgba(21,18,14,.6);
  opacity:0; transform:translateX(12px) scale(.94); transform-origin:right center; pointer-events:none;
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.wa.is-tip .wa__tip,.wa:hover .wa__tip{ opacity:1; transform:translateX(0) scale(1); }

.wa__btn{
  position:relative; flex:none;
  width:clamp(54px,4.4vw,60px); aspect-ratio:1; border-radius:50%;
  background:var(--wa); display:grid; place-items:center;
  box-shadow:0 12px 26px -8px rgba(37,211,102,.5), 0 3px 10px rgba(21,18,14,.16);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.wa__btn svg{ width:56%; height:56%; fill:#fff; }
.wa a.wa__btn:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 20px 38px -10px rgba(37,211,102,.62); }
.wa a.wa__btn:active{ transform:scale(.95); }
/* attention ring — slow, once every ~9s */
.wa__btn::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa);
  animation:waPulse 9s var(--ease-out) 4s infinite; pointer-events:none;
}
@keyframes waPulse{
  0%   { transform:scale(1); opacity:.7; }
  14%  { transform:scale(1.65); opacity:0; }
  100% { transform:scale(1.65); opacity:0; }
}
.wa__close{
  position:absolute; top:-6px; left:-6px; width:26px; height:26px; border-radius:50%;
  background:var(--ink); color:var(--bone); display:grid; place-items:center; font-size:15px; line-height:1;
  border:1.5px solid var(--bone);
  opacity:0; transform:scale(.6); transition:opacity .3s, transform .3s var(--ease-out);
}
.wa:hover .wa__close{ opacity:1; transform:scale(1); }
/* touch devices have no hover — keep dismiss reachable */
@media (hover:none){
  .wa__close{ opacity:1; transform:scale(1); width:28px; height:28px; }
}

/* ============================================================
   BLOG — index cards
   ============================================================ */
.page-head{ padding-top:clamp(8.5rem,7rem + 8vw,12rem); padding-bottom:clamp(2rem,1.5rem + 2vw,3.5rem); }
.page-head h1{ font-size:var(--t-h2); max-width:20ch; }
.page-head .lead{ margin-top:1.3rem; }

.crumbs{ display:flex; align-items:center; gap:.55rem; font-size:var(--t-xs); color:var(--ink-4); margin-bottom:1.5rem; letter-spacing:.04em; }
.crumbs a:hover{ color:var(--gold-deep); }
.crumbs span{ opacity:.5; }

.posts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.post-card{
  background:var(--bone); padding:clamp(1.6rem,1.3rem + 1.2vw,2.4rem);
  display:flex; flex-direction:column; gap:.9rem;
  transition:background .45s var(--ease);
}
.post-card:hover{ background:var(--cream); }
.post-card__k{ font-size:var(--t-xs); letter-spacing:.15em; text-transform:uppercase; color:var(--gold-deep); }
.post-card h2{ font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem); line-height:1.18; }
.post-card p{ font-size:var(--t-sm); color:var(--ink-3); line-height:1.62; margin:0; flex:1; }
.post-card__go{ display:inline-flex; align-items:center; gap:.5rem; font-size:var(--t-sm); font-weight:600; color:var(--ink); }
.post-card:hover .post-card__go{ color:var(--gold-deep); }
.post-card__go svg{ transition:transform .4s var(--ease); }
.post-card:hover .post-card__go svg{ transform:translateX(4px); }

/* ============================================================
   BLOG — article
   ============================================================ */
.post{ padding-bottom:var(--sec); }
.post__head{ max-width:44rem; margin-inline:auto; padding-top:clamp(7.5rem,6rem + 7vw,10.5rem); }
.post__meta{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:1.4rem; }
.post__meta b{ color:var(--gold-deep); font-weight:600; }
.post__head h1{ font-size:clamp(1.9rem,1.2rem + 3vw,3.2rem); line-height:1.08; }
.post__intro{ font-size:var(--t-lead); line-height:1.55; color:var(--ink-2); margin-top:1.5rem; }
.post__rule{ max-width:44rem; margin:clamp(2.2rem,1.6rem + 2vw,3.2rem) auto; height:1px; background:var(--line); border:0; }

.post__body{ max-width:38rem; margin-inline:auto; }
.post__body > *{ margin-bottom:1.35em; }
.post__body > *:last-child{ margin-bottom:0; }
.post__body h2{
  font-size:clamp(1.35rem,1.15rem + .9vw,1.9rem); line-height:1.2;
  margin-top:2.4em; margin-bottom:.7em;
}
.post__body h2:first-child{ margin-top:0; }
.post__body h3{ font-size:clamp(1.1rem,1rem + .5vw,1.3rem); margin-top:1.9em; margin-bottom:.55em; }
.post__body p{ line-height:1.75; color:var(--ink-2); }
.post__body strong{ color:var(--ink); font-weight:600; }
.post__body em{ color:var(--ink); }
.post__body ul,.post__body ol{ padding-left:0; display:grid; gap:.75rem; }
.post__body li{ display:flex; gap:.85rem; align-items:flex-start; line-height:1.65; color:var(--ink-2); }
.post__body li::before{
  content:""; flex:none; margin-top:.62em; width:6px; height:6px; border-radius:50%;
  background:var(--gold);
}
.post__body ol{ counter-reset:n; }
.post__body ol li{ counter-increment:n; }
.post__body ol li::before{
  content:counter(n); width:auto; height:auto; margin-top:0; background:none;
  color:var(--gold-deep); font-weight:700; font-size:.9em; min-width:1.4em;
}
.post__body blockquote{
  margin:2em 0; padding:1.4rem 1.6rem; border-left:2px solid var(--gold);
  background:var(--cream); border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--display); font-size:1.2rem; line-height:1.45; color:var(--ink);
}
.post__body blockquote p{ font-family:inherit; font-size:inherit; line-height:inherit; color:inherit; margin:0; }
.post__note{
  max-width:38rem; margin:2.6rem auto 0; padding:1.2rem 1.4rem;
  border:1px solid var(--line); border-radius:var(--r-md);
  font-size:var(--t-sm); line-height:1.6; color:var(--ink-3); background:var(--cream);
}

/* end-of-article conversion block — an article without this is decoration */
.post-cta{
  max-width:44rem; margin:clamp(3rem,2rem + 3vw,4.5rem) auto 0;
  background:var(--ink); color:var(--bone); border-radius:var(--r-lg);
  padding:clamp(1.8rem,1.3rem + 2.4vw,3rem); text-align:center;
}
.post-cta h2{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem); color:var(--bone); margin-bottom:.9rem; }
.post-cta p{ color:rgba(251,248,243,.72); max-width:44ch; margin:0 auto 1.8rem; }
.post-cta .btn{ --bg:var(--gold); --fg:var(--ink); --bd:var(--gold); }
.post-cta .btn::before{ background:var(--bone); }
.post-cta__actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.post-cta .btn--ghost{ --bg:transparent; --fg:var(--bone); --bd:rgba(251,248,243,.3); }
.post-cta .btn--ghost::before{ background:var(--bone); }
.post-cta .btn--ghost:hover{ color:var(--ink); }

@media (max-width:560px){
  .post-cta__actions .btn{ width:100%; }
}

/* ============================================================
   CONTACT MODAL
   Replaces mailto: links, which silently fail for anyone without
   a mail client configured — that is a lost lead every time.
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:9500; display:grid; place-items:center;
  padding:clamp(1rem,.5rem + 2vw,2rem);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.modal.is-open{ opacity:1; visibility:visible; }
.modal__veil{
  position:absolute; inset:0; background:rgba(21,18,14,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.modal__card{
  position:relative; width:100%; max-width:33rem; max-height:90vh; overflow-y:auto;
  background:var(--bone); border-radius:var(--r-lg);
  padding:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);
  box-shadow:0 50px 90px -40px rgba(21,18,14,.6);
  transform:translateY(16px) scale(.98); transition:transform .45s var(--ease-out);
}
.modal.is-open .modal__card{ transform:none; }

.modal__x{
  position:absolute; top:.9rem; right:.9rem; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink-3);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.modal__x:hover{ background:var(--cream); color:var(--ink); }
.modal__x svg{ width:17px; height:17px; }

.modal h2{ font-size:clamp(1.4rem,1.15rem + 1.1vw,1.95rem); margin-bottom:.6rem; padding-right:2.5rem; }
.modal__sub{ font-size:var(--t-sm); color:var(--ink-3); line-height:1.6; margin-bottom:1.6rem; }

.mform{ display:grid; gap:.85rem; }
.mform label{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); display:block; margin-bottom:.4rem;
}
.mform input,.mform textarea{
  width:100%; padding:.9rem 1.05rem; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink); font-family:inherit; font-size:16px; /* 16px = no iOS zoom */
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.mform textarea{ min-height:118px; resize:vertical; line-height:1.55; }
.mform input:focus,.mform textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash);
}
.mform .btn{ width:100%; margin-top:.4rem; }
.mform__opt{ font-weight:400; text-transform:none; letter-spacing:.02em; color:var(--ink-4); }
.modal__note{ font-size:var(--t-xs); color:var(--ink-4); margin:1rem 0 0; line-height:1.55; text-align:center; }
.modal__note a{ text-decoration:underline; text-underline-offset:2px; }

/* success state */
.modal__done{ display:none; text-align:center; padding:1rem 0 .5rem; }
.modal.is-done .mform,.modal.is-done .modal__sub{ display:none; }
.modal.is-done .modal__done{ display:block; }
.modal__done img{ width:52px; margin:0 auto 1.3rem; }
.modal__done p{ color:var(--ink-3); font-size:var(--t-sm); }

body.modal-open{ overflow:hidden; }

@media (max-width:480px){
  .modal{ place-items:end center; padding:0; }
  .modal__card{ max-width:none; border-radius:var(--r-lg) var(--r-lg) 0 0; max-height:94vh;
    padding-bottom:calc(1.6rem + env(safe-area-inset-bottom,0px)); }
}

/* ============================================================
   PLAN CHOOSER — which plan did they pick, and how do they want to talk?
   Every route carries the plan name, so the enquiry arrives labelled.
   ============================================================ */
.pick{
  position:fixed; inset:0; z-index:9500; display:grid; place-items:center;
  padding:1.25rem; opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.pick.is-open{ opacity:1; visibility:visible; }
.pick__veil{ position:absolute; inset:0; background:rgba(21,18,14,.62); backdrop-filter:blur(3px); }

.pick__box{
  position:relative; width:min(29rem,100%); background:var(--bone);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.75rem,1.4rem + 1.6vw,2.5rem); text-align:center;
  box-shadow:0 50px 90px -40px rgba(21,18,14,.6);
  transform:translateY(14px) scale(.98); transition:transform .4s var(--ease-out);
  max-height:92vh; overflow-y:auto;
}
.pick.is-open .pick__box{ transform:none; }

.pick__bird{ width:42px; height:auto; margin:0 auto 1.1rem; display:block; }
.pick__k{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.5rem; }
.pick__box h3{ font-size:clamp(1.3rem,1.15rem + .8vw,1.75rem); line-height:1.2; margin-bottom:.7rem; }
.pick__box p{ font-size:var(--t-sm); color:var(--ink-3); line-height:1.6; margin:0 auto 1.7rem; max-width:32ch; }

.pick__opts{ display:grid; gap:.65rem; }
.pick__opt{
  display:flex; align-items:center; gap:.9rem; text-align:left;
  padding:.95rem 1.15rem; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--bone);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .3s var(--ease-out);
}
.pick__opt:hover{ transform:translateY(-2px); border-color:var(--brand,var(--gold)); background:var(--cream); }
.pick__opt svg{ flex:none; width:19px; height:19px; }
.pick__opt b{ display:block; font-size:var(--t-sm); font-weight:600; color:var(--ink); }
.pick__opt span{ display:block; font-size:var(--t-xs); color:var(--ink-4); margin-top:.1rem; }
.pick__opt--wa svg{ fill:#25D366; }
.pick__opt--mail svg{ fill:none; stroke:var(--gold-deep); stroke-width:1.9; }

.pick__alt{ margin:1.5rem 0 0; font-size:var(--t-xs); color:var(--ink-4); }
.pick__alt a{ font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

.pick__x{
  position:absolute; top:.85rem; right:.85rem; width:38px; height:38px;
  border-radius:50%; display:grid; place-items:center; font-size:20px; line-height:1;
  color:var(--ink-4); transition:background .3s, color .3s;
}
.pick__x:hover{ background:var(--cream); color:var(--ink); }

body.pick-open{ overflow:hidden; }

/* --- step 2: the enquiry form, inside the same popup --- */
.pick__step{ display:none; }
.pick__step.is-active{ display:block; }

.pick__back{
  position:absolute; top:.9rem; left:.9rem; display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--t-xs); font-weight:600; letter-spacing:.04em; color:var(--ink-4);
  padding:.45rem .6rem; border-radius:100px; transition:color .3s, background .3s;
}
.pick__back:hover{ color:var(--ink); background:var(--cream); }
.pick__back svg{ width:13px; height:13px; }

.pf{ display:grid; gap:.7rem; text-align:left; margin-top:.3rem; }
.pf label{ display:block; font-size:var(--t-xs); font-weight:600; letter-spacing:.05em; color:var(--ink-3); margin-bottom:.3rem; }
.pf label span{ font-weight:400; color:var(--ink-4); text-transform:none; letter-spacing:0; }
.pf input,.pf textarea{
  width:100%; font-family:inherit; font-size:16px;   /* 16px or iOS zooms on focus */
  padding:.8rem .95rem; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--bone); color:var(--ink);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.pf textarea{ min-height:88px; resize:vertical; line-height:1.5; }
.pf input:focus,.pf textarea:focus{ outline:none; border-color:var(--gold); background:#fff; }
.pf input[aria-invalid="true"],.pf textarea[aria-invalid="true"]{ border-color:#C0392B; }
.pf__err{ font-size:var(--t-xs); color:#C0392B; margin:.15rem 0 0; }
.pf__send{ margin-top:.5rem; width:100%; }
.pf__fine{ font-size:var(--t-xs); color:var(--ink-4); text-align:center; margin:.9rem 0 0; }

.pick__done svg{ width:48px; height:48px; color:var(--gold-deep); margin:0 auto 1.1rem; display:block; }

@media (max-width:560px){
  .pick__box{ padding-top:2.6rem; }
}

@media (max-width:560px){
  .pick{ place-items:end center; padding:0; }
  .pick__box{ width:100%; border-radius:var(--r-lg) var(--r-lg) 0 0; max-height:88vh; }
}
@media (prefers-reduced-motion:reduce){
  .pick,.pick__box,.pick__opt{ transition:none; }
}

/* ============================================================
   SCROLL-FLIGHT BIRD
   Flies down the right edge as you scroll, tracing a gold trail.
   Doubles as a reading-progress indicator. Transform-only, so it
   costs nothing in layout or paint.
   ============================================================ */
.flybird{
  position:fixed; right:clamp(14px,2.4vw,40px); top:0; z-index:900;
  width:clamp(26px,2.4vw,36px); pointer-events:none;
  opacity:0; transition:opacity .6s var(--ease);
  will-change:transform;
}
.flybird.is-on{ opacity:.92; }
.flybird img{
  width:100%; display:block;
  filter:drop-shadow(0 5px 12px rgba(235,177,0,.38));
  transition:transform .35s var(--ease-out);
}

.flypath{
  position:fixed; top:0; bottom:0; z-index:899; pointer-events:none;
  right:calc(clamp(14px,2.4vw,40px) + clamp(13px,1.2vw,18px));
  width:1px; background:linear-gradient(var(--line-soft),transparent);
  opacity:0; transition:opacity .6s var(--ease);
}
.flypath.is-on{ opacity:1; }
.flypath::before{
  content:""; position:absolute; left:0; top:0; width:1px;
  height:var(--flyprog,0%);
  background:linear-gradient(var(--gold),rgba(235,177,0,.15));
}

/* no room on a phone, and it would fight the WhatsApp button */
@media (max-width:900px){ .flybird,.flypath{ display:none; } }
@media (prefers-reduced-motion:reduce){ .flybird,.flypath{ display:none; } }

/* ============================================================
   LANDING BIRD — the scroll-flight bird arriving at the CTA
   ============================================================ */
.landbird{
  position:relative; display:block;
  width:52px; height:52px; margin:0 auto 2.4rem;
}
.landbird img{
  display:block; width:100%; height:auto;
  transform-origin:58% 78%;            /* pivot at the body, not the canvas centre */
  filter:drop-shadow(0 6px 14px rgba(235,177,0,.28));
}
/* Visible by default. JS only hides it once it has proved it can run the
   animation, so no-JS, throttled tabs and blocked animations still show a
   bird rather than a hole in the page. */
.landbird.is-armed img{ opacity:0; }

.landbird::after{                      /* ground shadow */
  content:""; position:absolute; left:50%; bottom:-11px;
  width:38px; height:7px; margin-left:-19px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(21,18,14,.26), rgba(21,18,14,0) 70%);
  opacity:1; transform:scaleX(1);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.landbird.is-armed::after{ opacity:0; transform:scaleX(.35); }
/* timed to touchdown at 62% of the flight, not to the end of it */
.landbird.is-landing::after{ opacity:1; transform:scaleX(1); transition-delay:.8s; }
.landbird.is-landed::after{ opacity:1; transform:scaleX(1); transition-delay:0s; }

.landbird.is-landing img{ animation:landFly 1.45s var(--ease-out) forwards; }
@keyframes landFly{
   0%  { opacity:0; transform:translate(-104px,-78px) rotate(-28deg) scale(.55); }
  30%  { opacity:1; }
  62%  { transform:translate(9px,7px) rotate(6deg) scale(1.06); }    /* overshoot the perch */
  78%  { transform:translate(-2px,-6px) rotate(-3deg) scale(.99); }  /* settle */
  90%  { transform:translate(0,2px) rotate(1deg) scale(1); }
 100%  { opacity:1; transform:translate(0,0) rotate(0) scale(1); }
}

/* wings ruffle when the visitor hovers a booking button below it */
.landbird.is-flutter img{ animation:flutter .52s ease-in-out 2; }
@keyframes flutter{
   0%,100%{ transform:translateY(0)    scaleY(1)    rotate(0) }
  22%     { transform:translateY(-7px) scaleY(.9)   rotate(-4deg) }
  48%     { transform:translateY(-2px) scaleY(1.06) rotate(2deg) }
  74%     { transform:translateY(-5px) scaleY(.95)  rotate(-1deg) }
}

/* once it has landed, the edge bird retires — it is meant to be the same bird */
body.bird-landed .flybird,
body.bird-landed .flypath{ opacity:0 !important; }

@media (prefers-reduced-motion:reduce){
  .landbird img{ opacity:1 !important; animation:none !important; }
  .landbird::after{ opacity:1; transform:scaleX(1); }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .95s var(--ease-out), transform .95s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.09s; }
.rv[data-d="2"]{ transition-delay:.18s; }
.rv[data-d="3"]{ transition-delay:.27s; }
.rv[data-d="4"]{ transition-delay:.36s; }

/* line-by-line headline reveal */
.rv-line{ display:block; overflow:hidden; }
.rv-line > span{ display:block; transform:translateY(105%); transition:transform 1.05s var(--ease-out); }
.in .rv-line > span,.rv-line.in > span{ transform:none; }
.rv-line:nth-child(2) > span{ transition-delay:.1s; }
.rv-line:nth-child(3) > span{ transition-delay:.2s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero__grid{ grid-template-columns:1fr; gap:3rem; }
  .hero__figure{ max-width:560px; }
  .split,.split--even,.magnet__in{ grid-template-columns:1fr; }
  .ftr__top{ grid-template-columns:1fr 1fr; }
  .guide-card{ max-width:340px; margin-inline:auto; }
}
@media (max-width:820px){
  .nav{
    position:fixed; inset:0; z-index:-1; flex-direction:column; justify-content:center;
    background:var(--bone); gap:1.6rem; opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
  }
  .nav a{ font-size:1.5rem; font-family:var(--display); }
  body.nav-open .nav{ opacity:1; visibility:visible; z-index:998; }
  body.nav-open{ overflow:hidden; }
  .burger{ display:flex; z-index:1001; }
  .hdr__cta .btn{ display:none; }
  .incl,.creds{ grid-template-columns:1fr; }
  .hero__badge{ left:auto; right:1rem; bottom:-1.25rem; }
  .step{ grid-template-columns:1fr; gap:.9rem; }
  .step__n{ font-size:2.6rem; }
}
@media (max-width:560px){
  .ftr__top{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .hero__actions .btn,.final__actions .btn{ width:100%; }
  .offer__foot .btn{ width:100%; }
  .wa__tip{ display:none; }
  .fig__cap{ right:.5rem; }
}

/* ============================================================
   PHONES — iPhone / Samsung specifics
   ============================================================ */
@media (max-width:820px){
  /* iOS Safari zooms the page whenever a focused input is under 16px.
     16px is the floor, not a style choice. */
  .form input{ font-size:16px; padding:1.05rem 1.25rem; }

  /* kill the grey flash on tap, keep our own :active states */
  a,button,input{ -webkit-tap-highlight-color:transparent; }

  /* tighter hero — the header is only ~68px on a phone */
  .hero{ padding-top:6.25rem; }
  .hero__grid{ gap:2.25rem; }
  .hero__figure{ max-width:none; }
  .hero .lead{ margin-bottom:1.9rem; }

  /* the mobile menu must survive landscape on a short screen */
  .nav{ overflow-y:auto; padding:6rem 1.5rem 3rem; justify-content:flex-start; }

  /* keep the floating button clear of the notch and home indicator */
  .wa{ right:max(1rem, env(safe-area-inset-right,0px)); }
}

/* Landscape phones: short viewports need the vertical rhythm compressed */
@media (max-height:520px) and (orientation:landscape){
  /* shrink the bar itself rather than pushing content down a 390px-tall screen */
  .hdr{ padding-block:.55rem; }
  .hdr__logo img,.hdr.is-stuck .hdr__logo img{ height:28px; }
  .hero{ padding-top:5.75rem; padding-bottom:2.5rem; }
  .scroll-cue{ display:none; }
}
/* ...but only touch the nav when it is actually the mobile overlay.
   iPhone landscape is 844px wide, which is ABOVE the 820px overlay breakpoint. */
@media (max-width:820px) and (max-height:520px) and (orientation:landscape){
  .nav{ gap:.9rem; padding-top:5rem; }
  .nav a{ font-size:1.15rem; }
}

/* Galaxy Fold / very narrow — 280–340px */
@media (max-width:360px){
  /* headline had to come down or it wraps mid-line on 320px screens */
  :root{ --gut:1.1rem; --t-hero:2.25rem; --t-h2:1.6rem; }
  .btn{ padding:.95rem 1.2rem; font-size:.83rem; }
  .btn--lg{ padding:1.05rem 1.2rem; font-size:.88rem; }
  .hero__badge{ padding:.9rem 1.05rem; max-width:200px; }
  .hero__badge strong{ font-size:1.4rem; }
  /* French labels are ~20% longer than English — give the card back some width */
  .offer{ padding:1.25rem; }
  .incl li,.pain li{ font-size:1rem; }
  .faq__a > div{ padding-right:1rem; }
}

/* iPhone SE (320) and Galaxy Fold folded (280) — the last notch down
   so "You need a method" still holds one line */
@media (max-width:345px){
  :root{ --t-hero:2.05rem; --t-h2:1.5rem; }
  /* last-resort safety: never clip a button label, in either language */
  .btn{ white-space:normal; line-height:1.3; text-align:center; }
  .hero__badge{ max-width:180px; }
  .ftr__contact em{ display:none; }
}

/* ============================================================
   MOTION / A11Y
   ============================================================ */
:where(a,button,input):focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:4px; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .rv{ opacity:1; transform:none; }
  .rv-line > span{ transform:none; }
  .bird--hero{ opacity:1; }
  .marq{ animation:none; }
}

/* ============================================================
   GOOGLE REVIEWS
   Two components, deliberately different weights.

   .trust  — a quiet one-line strip for high on the page. Its job is
             not to be read, only to register: someone else vouched.
   .revs   — the full wall, placed where doubt peaks (just before price).

   Both link out to the live Google profile. Verifiable proof beats
   prettier proof — the visitor can check it in one click, and that is
   the whole reason a Google review outperforms a quote we typed.
   ============================================================ */

/* ---------- stars (shared) ---------- */
.stars{ display:inline-flex; gap:2px; flex:none; }
.stars svg{ width:15px; height:15px; fill:var(--gold); display:block; }
.stars--lg svg{ width:19px; height:19px; }

/* ---------- .trust — compact strip ---------- */
.trust{
  display:flex; align-items:center; gap:.7rem 1rem; flex-wrap:wrap;
  margin-top:1.6rem; font-size:var(--t-sm); color:var(--ink-3);
}
.trust__score{ font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--ink); line-height:1; }
.trust__sep{ width:1px; height:15px; background:var(--line); flex:none; }
.trust a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; }
.trust a:hover{ color:var(--ink); border-color:var(--gold-deep); }
.trust .gmark{ flex:none; }

/* ---------- .gmark — the Google G, drawn not fetched ---------- */
.gmark{ width:16px; height:16px; display:block; }

/* ---------- .revs — the review wall ---------- */
.revs__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(1.8rem,1.2rem + 1.6vw,2.8rem);
}
.revs__score{ display:flex; align-items:center; gap:.85rem; }
.revs__num{
  font-family:var(--display); font-size:clamp(2.4rem,1.9rem + 1.7vw,3.4rem);
  font-weight:600; line-height:.9; color:var(--ink); letter-spacing:-.02em;
}
.revs__meta{ font-size:var(--t-sm); color:var(--ink-3); line-height:1.45; }
.revs__meta b{ color:var(--ink); font-weight:600; }
.revs__all{
  display:inline-flex; align-items:center; gap:.5rem; font-size:var(--t-sm);
  color:var(--ink-2); text-decoration:none; font-weight:500;
  border:1px solid var(--line); border-radius:999px; padding:.6rem 1.05rem;
  background:var(--bone); transition:border-color .25s, background .25s;
}
.revs__all:hover{ border-color:var(--gold-deep); background:#fff; }
.revs__all svg:last-child{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }

.revs{
  columns:3 300px; column-gap:clamp(1rem,.7rem + 1vw,1.5rem);
}
.rev{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 clamp(1rem,.7rem + 1vw,1.5rem);
  background:var(--bone); border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:1.4rem 1.5rem 1.25rem;
  display:block; text-decoration:none; color:inherit;
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.rev:hover{
  border-color:var(--line); transform:translateY(-2px);
  box-shadow:0 12px 30px -18px rgba(21,18,14,.4);
}
.rev__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.85rem; }
.rev p{
  font-size:var(--t-body); line-height:1.62; color:var(--ink-2);
  margin:0 0 1.05rem; hyphens:auto;
}
.rev__by{ display:flex; align-items:center; gap:.7rem; }
/* Eleven identical gold discs read as a template. Each reviewer gets one of
   six hues instead, assigned from their name so it never changes between
   builds. All six sit in the same warm family as the brand gold, so the wall
   looks human and varied without turning into a rainbow. */
.rev__av{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; position:relative;
  background:var(--av-bg,var(--gold-wash)); color:var(--av-fg,var(--gold-deep));
  font-family:var(--display); font-weight:600; font-size:1rem; line-height:1;
  box-shadow:inset 0 0 0 1px currentColor;
  transition:transform .3s;
}
.rev:hover .rev__av{ transform:scale(1.06); }

/* Google publishes each reviewer's track record. A Local Guide with 43 reviews
   behind them is stronger evidence of a real person than a face would be —
   and unlike a face, it needs nobody's permission. */
.rev__lg{
  display:inline-flex; align-items:center; gap:.28rem;
  font-size:var(--t-xs); color:var(--ink-3); font-weight:500;
  background:var(--sand); border-radius:999px; padding:.12rem .5rem .14rem;
  margin-left:.4rem; vertical-align:1px; white-space:nowrap;
}
.rev__lg svg{ width:9px; height:9px; fill:currentColor; }
.rev__who{ font-size:var(--t-sm); line-height:1.35; }
.rev__who b{ display:block; color:var(--ink); font-weight:600; }
.rev__who span{ color:var(--ink-4); font-size:var(--t-xs); }

/* A long review gets a "read the rest on Google" tail rather than a
   truncation the visitor cannot undo. */
.rev__more{ font-size:var(--t-xs); color:var(--ink-4); }
.rev:hover .rev__more{ color:var(--gold-deep); }

/* The wall sits immediately before the price. At one column, eleven cards
   would push the pricing section far below the fold and cost more than the
   proof earns — so narrow screens get a shorter wall and the "see all on
   Google" link carries the rest. Nothing is hidden that is not linked. */
@media (max-width:900px){
  .revs{ columns:2 280px; }
  .rev:nth-child(n+9){ display:none; }
}
@media (max-width:620px){
  .revs{ columns:1; }
  .revs__head{ align-items:flex-start; }
  .rev:nth-child(n+5){ display:none; }
}