@font-face{
  font-family:"Bokonique";
  src:url("../fonts/bokonique/Bokonique-Light.otf") format("opentype");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bokonique";
  src:url("../fonts/bokonique/Bokonique-Light Italic.otf") format("opentype");
  font-weight:300; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Bokonique";
  src:url("../fonts/bokonique/Bokonique-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bokonique";
  src:url("../fonts/bokonique/Bokonique-Regular Italic.otf") format("opentype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Bokonique";
  src:url("../fonts/bokonique/Bokonique-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bokonique";
  src:url("../fonts/bokonique/Bokonique-Bold Italic.otf") format("opentype");
  font-weight:700; font-style:italic; font-display:swap;
}
:root{
  --font-display:"Space Grotesk","Bokonique",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --outer:#DCE7D9;
  --bg:#FFFFEF;
  --card:#F7F4EE;
  --card-solid:#F7F4EE;
  --text:#202824;
  --muted:#777B77;
  --sage:#78977B;
  --sage-light:#DCE7D9;
  --sage-deep:#4f6350;
  --peach:#D9A58F;
  --line: rgba(32,40,36,.10);
  --radius:22px;
  --maxw:600px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--outer);
  color:var(--text);
  font-family:var(--font-display);
  font-weight:500;
  overflow-x:hidden;
}
/* .app used to rely on body{display:flex;justify-content:center} for
   horizontal centering, which only works with a single flex child — once
   .site-header became a sibling of .app, that trick broke (they'd sit side
   by side in the flex row instead of stacking). Each centers itself now. */
.app{
  width:100%; max-width:var(--maxw); margin:0 auto;
  background:var(--bg);
  min-height:100vh;
  position:relative;
  isolation:isolate;
  /* blurred .blob decorations sit at negative left/right offsets; body's
     overflow-x:hidden doesn't reliably clip them on iOS Safari once a
     filter:blur is involved, so clip here instead. */
  overflow-x:hidden;
  overflow-x:clip;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--sage); color:#fff;}

.progress{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--maxw); height:3px; z-index:100;
  background:transparent; pointer-events:none;
}
.progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--sage), var(--sage-deep));
  transition:width .1s linear;
}

.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to top, var(--bg) 65%, transparent);
  transform:translateY(120%);
  transition:transform .3s ease;
  pointer-events:none;
}
.sticky-cta .cta{pointer-events:auto;}
.sticky-cta.visible{transform:translateY(0);}

.blob{
  position:absolute; border-radius:50%; filter:blur(70px); z-index:0;
  pointer-events:none;
}
.blob1{width:320px; height:320px; background:var(--sage-light); top:-80px; left:-100px; opacity:.55; animation:float1 14s ease-in-out infinite;}
.blob2{width:260px; height:260px; background:var(--peach); top:900px; right:-100px; opacity:.28; animation:float2 16s ease-in-out infinite;}
.blob3{width:280px; height:280px; background:var(--sage-light); bottom:400px; left:-120px; opacity:.45; animation:float1 18s ease-in-out infinite reverse;}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,40px) scale(1.15);}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-25px,-35px) scale(1.1);}}

section, .hero{position:relative; z-index:1;}

.eyebrow{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage-deep); font-weight:700; margin-bottom:8px; display:block;
}
.hero .eyebrow::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--peach); animation:pulse 1.8s ease-in-out infinite; flex-shrink:0;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(1.4);}}

h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; line-height:1.12; color:var(--text);}
h2{font-size:26px; margin-bottom:16px;}
p{color:var(--muted); line-height:1.6; font-size:15px;}
section{padding:52px 22px;}

.grad-text{
  font-family:var(--font-display); font-weight:700;
  background:linear-gradient(100deg, var(--sage-deep), var(--sage) 55%, var(--peach));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.grad-text.kinetic{display:inline-block; background:none;}
.grad-text.kinetic > span{
  display:inline-block;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 90px, rgba(255,255,255,.95) 106px 126px, transparent 142px 220px),
    linear-gradient(100deg,
      var(--sage-deep) 0%, var(--sage) 28%, var(--peach) 42%,
      #fefaf3 50%, var(--peach) 58%, var(--sage) 72%, var(--sage-deep) 100%);
  background-position:0 0, 0 0;
  background-size:220px 100%, 600% auto;
  background-repeat:repeat, no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:glossSweep 4s linear infinite;
}
@keyframes glossSweep{from{background-position:0 0, 0 0;} to{background-position:-220px 0, 0 0;}}
@media (prefers-reduced-motion: reduce){
  .grad-text.kinetic > span{animation:none;}
}

.cta{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:linear-gradient(120deg, var(--sage), var(--sage-deep));
  color:var(--bg); font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size:14.5px; padding:19px 20px; border-radius:100px;
  box-shadow:0 10px 26px rgba(120,151,123,.35);
  transition:transform .25s ease, box-shadow .25s ease;
  border:none; cursor:pointer;
}
.cta:active{transform:scale(.97);}
.cta::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); animation:shine 3.2s ease-in-out infinite;
}
.cta.outline{
  background:transparent; color:var(--sage-deep); box-shadow:none;
  border:1.5px solid var(--sage);
}
.cta.outline::after{display:none;}
.cta[disabled]{opacity:.5; cursor:not-allowed;}
.cta[disabled]::after{display:none;}
@keyframes shine{0%{left:-60%;} 45%{left:130%;} 100%{left:130%;}}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-scale{opacity:0; transform:scale(.92); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
.reveal-scale.in{opacity:1; transform:scale(1);}

/* --hero-h comes from Customizer → Homepage → Hero (inline style on the hero root) */
.hero{height:var(--hero-h, 120vw); min-height:480px; overflow:hidden;}
.hero-imgwrap{position:absolute; inset:0; overflow:hidden;}
.hero-imgwrap img{width:100%; height:112%; object-fit:cover; object-position:50% 15%; will-change:transform;}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(32,40,36,0) 22%, rgba(32,40,36,.88) 76%, var(--bg) 100%); z-index:1;}
.hero-content{position:absolute; left:0; right:0; bottom:0; padding:30px 22px 32px; z-index:2;}
.hero .eyebrow{display:inline-flex; align-items:center; gap:7px; margin-bottom:14px; padding:6px 13px 6px 10px; border-radius:100px; border:1px solid; background:rgba(7,10,8,.35); border-color:rgba(255,255,255,.18); color:var(--sage-light); backdrop-filter:blur(6px);}
.hero h1{font-size:44px; line-height:1; margin-bottom:10px;}
.hero h1 .line2{display:block; font-size:20px; font-weight:700; color:var(--bg); margin-top:6px; letter-spacing:.02em;}
.hero .role{color:#e7ece5; font-size:13.5px; margin-bottom:22px;}

.marquee-wrap{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0; background:var(--card);}
.marquee{display:flex; width:max-content; animation:scroll-x 16s linear infinite; gap:28px;}
.marquee span{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:10px;}
.marquee span b{color:var(--sage);}
@keyframes scroll-x{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.timer-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 22px 24px;
  box-shadow:0 14px 30px rgba(32,40,36,.08);
}
.timer-head h3{color:var(--text); font-size:19px; margin-bottom:4px;}
.timer-head p{color:var(--muted); font-size:12.5px; margin-bottom:18px;}
.timer-grid{display:flex; gap:8px; margin-bottom:20px;}
.t-unit{
  flex:1; text-align:center; padding:12px 4px; border-radius:12px;
  background:var(--sage-light); border:1px solid var(--line);
}
.t-unit b{display:block; font-family:var(--font-display); font-size:23px; font-weight:700; color:var(--sage-deep);}
.t-unit span{font-size:9.5px; color:var(--sage-deep); opacity:.75; text-transform:uppercase; letter-spacing:.05em;}
.timer-prices{display:flex; flex-direction:column; gap:10px;}
.tp-item{
  display:flex; align-items:center; gap:10px; font-size:13px;
  background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:11px 14px;
}
.tp-name{
  flex-shrink:0; min-width:66px; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--sage-deep);
}
.tp-now{color:var(--muted); text-decoration:line-through; opacity:.85;}
.tp-arrow{color:var(--peach);}
.tp-then{font-weight:800; color:#b8664a; margin-left:auto;}

/* trainer ID card */
.id-card{
  position:relative; overflow:hidden; border-radius:28px;
  background:var(--bg); border:1px solid var(--line); box-shadow:0 22px 50px rgba(32,40,36,.16);
}
.id-hole{
  position:absolute; top:12px; left:50%; width:56px; height:9px; margin-left:-28px; z-index:2;
  border-radius:9px; background:rgba(255,255,255,.6); box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
.id-photo{position:relative; aspect-ratio:4 / 4.6; background:var(--sage-light);}
.id-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 16%;}
.id-photo::after{content:""; position:absolute; inset:45% 0 0; background:linear-gradient(180deg, rgba(32,40,36,0), rgba(32,40,36,.78));}
.id-name{position:absolute; left:22px; right:22px; bottom:20px; z-index:1;}
.id-name h2{margin:0; font-size:27px; color:#fff;}
.id-quote{
  margin:0; padding:24px 22px 10px; font-size:16px; line-height:1.5; font-weight:700; color:var(--text);
}
.id-creds{list-style:none; padding:8px 22px 22px;}
.id-creds li{display:flex; gap:14px; align-items:flex-start; padding:15px 0; border-top:1px solid var(--line);}
.id-creds li:first-child{border-top:0;}
.id-ico{
  flex-shrink:0; width:42px; height:42px; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--sage), var(--sage-deep));
}
.id-creds b{display:block; margin-bottom:3px; font-size:14.5px; color:var(--text);}
.id-text{display:block; font-size:12.5px; line-height:1.5; color:var(--muted);}

.gallery{
  --card-w:76%;
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  /* no left inset: slide 1 sits fully flush against the edge. Right side
     keeps the big peek inset so later slides have room to reach true
     center. scroll-padding must mirror both, or mandatory snapping
     "corrects" scrollLeft:0 into the inset, silently eating it. */
  padding-left:0; padding-right:calc((100% - var(--card-w)) / 2); padding-bottom:8px;
  scroll-padding-left:0; scroll-padding-right:calc((100% - var(--card-w)) / 2);
  scrollbar-width:none; -ms-overflow-style:none;
}
.gallery::-webkit-scrollbar{display:none; width:0; height:0;}
.gallery img{
  scroll-snap-align:center; width:var(--card-w); flex-shrink:0; border-radius:18px; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--line); box-shadow:0 16px 30px rgba(32,40,36,.14);
}
.gallery img:first-child{ scroll-snap-align:start; }
.dots{display:flex; gap:6px; justify-content:center; margin-top:14px;}
.dots span{width:6px; height:6px; border-radius:50%; background:var(--line); transition:width .25s ease, background .25s ease;}
.dots span.active{width:16px; border-radius:4px; background:var(--sage);}

.rv-marquee{display:flex; flex-direction:column; gap:12px; margin:0 -22px;}
.rv-row{overflow-x:auto; padding:4px 22px 8px; scrollbar-width:none; -ms-overflow-style:none;}
.rv-row::-webkit-scrollbar{display:none; width:0; height:0;}
.rv-track{display:flex; gap:12px; width:max-content;}
.review-card{
  flex-shrink:0; width:272px;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:20px 18px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 12px 26px rgba(32,40,36,.08);
}
/* site.js turns each row into an endless drift, the second row runs backwards */
.is-marquee .rv-row{overflow:hidden; padding-left:0; padding-right:0;}
.is-marquee .rv-track{padding-right:12px; animation:rvDrift var(--rv-dur, 90s) linear infinite;}
.is-marquee .rv-row.rev .rv-track{animation-direction:reverse;}
.is-marquee .rv-row.paused .rv-track,
.is-marquee .rv-row:hover .rv-track{animation-play-state:paused;}
@keyframes rvDrift{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.review-head{display:flex; align-items:center; gap:12px;}
.review-avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:16px;
  background:linear-gradient(135deg, var(--sage), var(--sage-deep));
}
.review-avatar.alt{background:linear-gradient(135deg, var(--peach), var(--sage-deep));}
.review-who{min-width:0;}
.review-name{font-weight:700; font-size:14px; color:var(--text);}
.review-tag{font-size:10.5px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase;}
.review-text{
  font-size:13.5px; color:#3a453e; line-height:1.62;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden;
}
.review-text::before{content:"\201C"; color:var(--sage-deep); font-weight:800; font-size:20px; line-height:0; position:relative; top:6px; margin-right:2px;}
.review-text.is-clampable{cursor:pointer;}
.review-text.expanded{display:block; -webkit-line-clamp:unset; overflow:visible;}

.whom-grid{display:flex; flex-direction:column;}
.whom-card{padding:26px 0 28px; border-top:1px solid var(--line);}
.whom-card:first-child{border-top:0; padding-top:8px;}
.whom-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.whom-card:nth-child(even) .whom-head{flex-direction:row-reverse;}
.whom-ico{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, var(--sage), var(--sage-deep));
}
.whom-title{
  flex:1; font-size:11px; font-weight:800; letter-spacing:.14em; line-height:1.3;
  text-transform:uppercase; color:var(--sage-deep);
}
.whom-card p.fill-text{margin:0; font-size:21px; line-height:1.32; font-weight:700; letter-spacing:-.01em; color:var(--text);}
/* words light up as the paragraph scrolls into view (site.js adds .js-fill) */
.js-fill .fill-text .w{opacity:.2; transition:opacity .3s ease;}
.js-fill .fill-text .w.on{opacity:1;}

/* deck of cards: each card sticks a little lower than the previous one, so
   scrolling slides the next card over the last (site.js adds the depth fx) */
.steps-stack{display:flex; flex-direction:column; gap:34px; padding-bottom:6px;}
.step-card{
  --s:1; --rot:0deg;
  position:sticky; top:calc(84px + var(--i) * 16px);
  padding:22px 22px 26px; border-radius:22px; border:1px solid var(--line);
  background:var(--card); box-shadow:0 -10px 30px rgba(32,40,36,.10), 0 18px 34px rgba(32,40,36,.10);
  transform:rotate(var(--rot)) scale(var(--s)); transform-origin:50% 0;
  will-change:transform;
}
.step-card:nth-child(odd){--rot:-1.2deg;}
.step-card:nth-child(even){--rot:1deg;}
/* monochrome sage ramp, light -> deep; the last two cards flip to white text */
.step-card:nth-child(1){background:#F2F6F0;}
.step-card:nth-child(2){background:#DCE7D9;}
.step-card:nth-child(3){background:#C5D8C4;}
.step-card:nth-child(4){background:#A9C3A9;}
.step-card:nth-child(5){background:#5F7D62; border-color:transparent;}
.step-card:nth-child(6){background:#3E5141; border-color:transparent;}
.step-card:nth-child(n+5) p{color:#fff;}
.step-card:nth-child(n+5) .step-num{background:none; color:rgba(255,255,255,.5);}
.step-num{
  font-size:56px; font-weight:700; line-height:1; letter-spacing:-.03em; margin-bottom:14px;
  color:var(--sage-deep); opacity:.9;
}
.step-num span{font-size:16px; letter-spacing:0; margin-left:6px; opacity:.55;}
.step-card p{font-size:15px; line-height:1.55; color:#26302a; font-weight:600;}
.step-card.is-covered::after{
  content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(32,40,36,.08); pointer-events:none; opacity:var(--dim,0);
}
@media (prefers-reduced-motion: reduce){
  .step-card{position:relative; top:auto; transform:none;}
}

.pkg-switch{
  position:relative; display:grid; grid-template-columns:1fr 1fr; padding:4px; margin-bottom:16px;
  border-radius:100px; background:var(--sage-light); border:1px solid var(--line);
}
.pkg-switch button{
  position:relative; z-index:1; border:0; background:none; cursor:pointer; padding:13px 0;
  font:inherit; font-size:13px; font-weight:800; letter-spacing:.08em; color:var(--sage-deep);
  transition:color .25s ease;
}
.pkg-switch button[aria-selected="true"]{color:#fff;}
.pkg-switch-pill{
  position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 2); border-radius:100px;
  background:linear-gradient(120deg, var(--sage), var(--sage-deep)); box-shadow:0 6px 16px rgba(79,99,80,.35);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.pkg-switch.is-plus .pkg-switch-pill{transform:translateX(100%);}
.pkg-grid{display:flex; flex-direction:column; gap:16px;}
.pkg-grid.is-switch .pkg-card{display:none;}
.pkg-grid.is-switch .pkg-card.is-active{display:block; animation:pkgIn .42s cubic-bezier(.2,.8,.2,1);}
@keyframes pkgIn{from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;}}
.pkg-card{
  position:relative; border-radius:var(--radius); padding:26px 22px; overflow:hidden;
  background:var(--card); border:1px solid var(--line);
}
.pkg-card.pro{
  background:linear-gradient(165deg, var(--sage-light), #eef3ec 70%);
  border:1px solid var(--sage);
}
.pkg-card.pro .muted-line{color:#5f6b5f;}
.pkg-badge{
  position:absolute; top:18px; right:18px; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; background:var(--peach); color:var(--text); padding:6px 12px; border-radius:100px;
}
.pkg-name{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-deep); font-weight:800; margin-bottom:8px;}
.pkg-title{font-family:var(--font-display); font-weight:700; font-size:22px; margin-bottom:8px;}
.pkg-desc{font-size:13.3px; margin-bottom:16px;}
.pkg-price-row{display:flex; align-items:center; gap:8px; margin-bottom:2px;}
.pkg-price-old{font-size:14px; color:var(--muted); text-decoration:line-through; text-decoration-color:#b8664a; text-decoration-thickness:1.5px;}
.pkg-price-pill{font-size:11px; font-weight:800; color:#fff; background:#b8664a; padding:2px 8px; border-radius:100px;}
.pkg-price{display:flex; align-items:baseline; gap:8px; margin-bottom:16px;}
.pkg-price b{font-family:var(--font-display); font-size:38px; line-height:1; font-weight:700; color:var(--sage-deep);}
.pkg-price > span{font-size:12px; color:var(--muted);}
.pkg-features{list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:20px;}
.pkg-features li{display:flex; gap:8px; font-size:13px;}
.pkg-features li:before{content:"✓"; color:var(--sage); font-weight:900; flex-shrink:0;}
.pkg-card.pro .pkg-features li:before{content:"+";}
.pkg-inherits{
  font-weight:600; color:var(--sage-deep); padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.55); border-left:3px solid var(--peach);
}
.pkg-more{background:none; border:0; border-radius:0; padding:0; margin:-9px 0 20px;}
.pkg-more summary{
  justify-content:flex-start; gap:8px; font-size:12.5px; font-weight:700; color:var(--sage-deep);
  padding:2px 0 12px;
}
.pkg-more[open] summary{display:none;}
.pkg-more .pkg-features{margin-bottom:0;}

details{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; margin-bottom:10px;
}
summary{font-weight:700; font-size:14px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px;}
summary::-webkit-details-marker{display:none;}
.plus{flex-shrink:0; width:20px; height:20px; position:relative;}
.plus::before,.plus::after{content:""; position:absolute; background:var(--sage); top:50%; left:50%; transform:translate(-50%,-50%);}
.plus::before{width:12px; height:2px;}
.plus::after{width:2px; height:12px; transition:transform .25s ease;}
details[open] .plus::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
details p{margin-top:10px; font-size:13.3px;}

.final{text-align:center;}
.final h2{font-size:28px; margin-bottom:12px;}
.final p{margin-bottom:26px;}
footer{padding:28px 22px 44px; text-align:center;}
footer p{font-size:11.5px; color:var(--muted);}
.badge-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; justify-content:center;}
.badge{font-size:10.5px; color:var(--muted); border:1px solid var(--line); padding:7px 12px; border-radius:100px; background:var(--card);}

#stats-sec, #results, #program, #faq{background:var(--bg);}
#about, #course{background:var(--card); --card:var(--bg);}
#whom, .final{background:#FFFBF8; --card:var(--bg); --line: rgba(32,40,36,.10);}
footer{background:var(--bg);}

section{border-top:1px solid var(--line);}
#whom{border-top:none;}
.page-section{border-top:none;}

/* ---------- generic WordPress/WooCommerce pages (cart, checkout, my account) ---------- */
.page-content{color:var(--text);}
.page-content p{color:var(--muted);}
.page-content h2{font-size:20px;}
.page-content h3{font-size:17px; padding-top:0;}
.page-content h3::before{display:none;}
.page-content a:not(.button):not(.cta){color:var(--sage-deep); text-decoration:underline;}

.page-content table.shop_table,
.page-content table.woocommerce-checkout-review-order-table{
  width:100%; border-collapse:collapse; margin-bottom:20px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.page-content table.shop_table th,
.page-content table.shop_table td,
.page-content table.woocommerce-checkout-review-order-table th,
.page-content table.woocommerce-checkout-review-order-table td{
  padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.8px; text-align:left;
}
.page-content table.shop_table th{color:var(--sage-deep); font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:.05em;}

.page-content .quantity input.qty{
  width:56px; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text);
}
.page-content .coupon .input-text,
.page-content input[type="text"],
.page-content input[type="email"],
.page-content input[type="tel"],
.page-content input[type="password"],
.page-content textarea,
.page-content select{
  padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--text);
  font-family:var(--font-display); font-size:14px; width:100%;
}
.page-content .form-row{margin-bottom:14px;}
.page-content label{font-size:12.5px; color:var(--muted); margin-bottom:4px; display:inline-block;}

.page-content .button,
.page-content button.button,
.page-content input.button,
.page-content #place_order,
.page-content .checkout-button{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(120deg, var(--sage), var(--sage-deep)) !important;
  color:var(--bg) !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.02em;
  font-size:13.5px !important; padding:14px 22px !important; border-radius:100px !important;
  border:none !important; cursor:pointer;
  box-shadow:0 10px 26px rgba(120,151,123,.3);
}
.page-content .button.alt{background:linear-gradient(120deg, var(--sage), var(--sage-deep)) !important;}
.page-content a.remove{color:#b8664a !important; font-weight:800;}

.page-content .woocommerce-message,
.page-content .woocommerce-info{
  background:var(--sage-light); border:1px solid var(--line); border-left:3px solid var(--sage);
  border-radius:12px; padding:14px 16px; color:var(--text); list-style:none;
}
.page-content .woocommerce-error{
  background:#faeae4; border:1px solid var(--line); border-left:3px solid #b8664a;
  border-radius:12px; padding:14px 16px; color:var(--text); list-style:none;
}
/* WooCommerce positions its notice icons for a 3.5em left padding; the theme
   uses a compact box, so drop the icons and match the theme typography. */
.page-content .woocommerce-message::before,
.page-content .woocommerce-info::before,
.page-content .woocommerce-error::before{display:none;}
.page-content .woocommerce-message,
.page-content .woocommerce-info,
.page-content .woocommerce-error{font-size:13.5px; line-height:1.6;}

.page-content .woocommerce-form-login,
.page-content .woocommerce-form-register,
.page-content .woocommerce-MyAccount-content{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px;
}
/* My Account: one column — a pill menu on top, content below (WooCommerce floats them side by side by default). */
.page-content .woocommerce-MyAccount-navigation,
.page-content .woocommerce-MyAccount-content{float:none; width:100%;}
.page-content .woocommerce-MyAccount-navigation ul{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; padding:0;}
.page-content .woocommerce-MyAccount-navigation li a:not(.button):not(.cta){text-decoration:none;}
.page-content .woocommerce-MyAccount-navigation li{
  background:var(--card); border:1px solid var(--line); border-radius:100px; padding:8px 14px; font-size:12.5px;
}
.page-content .woocommerce-MyAccount-navigation li.is-active{background:var(--sage); border-color:var(--sage);}
.page-content .woocommerce-MyAccount-navigation li.is-active a{color:var(--bg);}

/* ---------- "Join the Telegram channel" card (Thank You, order view, My Account → course) ---------- */
.join-card{
  position:relative; border-radius:var(--radius); padding:22px 20px; margin:18px 0; overflow:hidden;
  background:linear-gradient(165deg, var(--sage-light), #eef3ec 70%); border:1px solid var(--sage);
}
.join-card h3{font-size:18px; margin:0 0 8px; padding-top:0;}
.join-card h3::before{display:none;}
.join-card .join-lead{margin:0 0 14px; color:#4a554b;}
.join-card .join-btn{display:flex; margin:0; text-decoration:none;}
.join-card .join-product{font-size:15px; font-weight:800; color:var(--sage-deep); margin:0 0 10px;}
.join-steps{margin:18px 0 12px; padding-left:20px; color:var(--text); font-size:14px; line-height:1.7;}
.join-card .join-steps{margin-bottom:0;}
.join-steps li::marker{color:var(--sage-deep); font-weight:800;}
.join-note{font-size:12.5px; color:var(--muted); margin:10px 0 0;}
.join-note a{color:var(--sage-deep);}
/* Orders table: compact so it fits the narrow column without overflowing. */
.page-content table.woocommerce-orders-table{table-layout:auto; width:100%;}
.page-content table.woocommerce-orders-table th,
.page-content table.woocommerce-orders-table td{padding:10px 8px; font-size:13px;}
.page-content table.woocommerce-orders-table .button{padding:8px 14px; font-size:11px; margin:0;}
/* Program page: the join cards are the content, so drop the outer panel. */
.pp21-acc-program .page-content .woocommerce-MyAccount-content{background:none; border:0; padding:0;}
.pp21-acc-program .join-card:first-child{margin-top:0;}

/* ---------- WooCommerce Cart/Checkout blocks (React-rendered, different markup than the classic shortcodes above) ---------- */
.page-content .wc-block-cart__submit-button,
.page-content .wc-block-components-checkout-place-order-button,
.page-content .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button{
  background:linear-gradient(120deg, var(--sage), var(--sage-deep)) !important;
  color:var(--bg) !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.02em;
  border:none !important; border-radius:100px !important; box-shadow:0 10px 26px rgba(120,151,123,.3);
}
.page-content .wc-block-cart-item__prices,
.page-content .wc-block-components-product-name{color:var(--text);}
.page-content .wc-block-components-product-name{font-weight:700; text-decoration:none;}
.page-content del,
.page-content .wc-block-components-product-price__regular{color:var(--muted); opacity:.8;}
.page-content ins,
.page-content .wc-block-components-product-price__value{color:var(--text); text-decoration:none;}

.page-content .wc-block-components-quantity-selector{
  border:1px solid var(--line); border-radius:10px; background:var(--bg); overflow:hidden;
}
.page-content .wc-block-components-quantity-selector__input{
  background:var(--bg); color:var(--text); font-family:var(--font-display);
}
.page-content .wc-block-components-quantity-selector__button{color:var(--sage-deep);}

.page-content .wc-block-cart__sidebar,
.page-content .wc-block-components-totals-wrapper,
.page-content .wp-block-woocommerce-cart-order-summary-block{
  background:var(--card) !important; border:1px solid var(--line); border-radius:16px;
}
.page-content .wc-block-components-totals-item__label,
.page-content .wc-block-components-totals-item__value{color:var(--text);}

.page-content .wc-block-components-text-input input,
.page-content .wc-block-components-combobox-control input,
.page-content select.wc-block-components-select-input,
.page-content .wc-block-components-address-form input{
  border:1px solid var(--line) !important; border-radius:10px !important; background:var(--bg) !important;
  color:var(--text) !important; font-family:var(--font-display);
}
.page-content .wc-block-components-radio-control__option{
  border:1px solid var(--line); border-radius:12px; background:var(--card); margin-bottom:8px;
}
.page-content .wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked{
  border-color:var(--sage); background:var(--sage-light);
}

/* ---------- site header (every page except the front page, which has its own hero wordmark) ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg); border-bottom:1px solid var(--line);
  display:flex; justify-content:center;
}
.site-header-inner{
  width:100%; max-width:var(--maxw); padding:14px 22px;
  display:flex; align-items:center;
}
.site-logo.grad-text{font-size:19px;}

/* ---------- classic checkout specifics (payment radios, form columns, order received) ---------- */
.page-content .woocommerce-billing-fields h3,
.page-content .woocommerce-additional-fields h3,
.page-content #order_review_heading{font-size:17px; padding-top:0; margin-bottom:12px;}
.page-content .woocommerce-billing-fields h3::before,
.page-content .woocommerce-additional-fields h3::before{display:none;}

.page-content .woocommerce form .form-row-first,
.page-content .woocommerce form .form-row-last,
.page-content .woocommerce .col2-set .col-1,
.page-content .woocommerce .col2-set .col-2{width:100% !important; float:none !important;}

.page-content #customer_details{margin-bottom:24px;}
.page-content .woocommerce-additional-fields{display:none;}

/* WooCommerce's own field selectors (.woocommerce form .form-row .input-text)
   outrank the generic form rules above, so force the theme look here. */
.page-content .woocommerce form .form-row{padding:0 !important; margin:0 0 14px !important;}
.page-content .woocommerce form .form-row label{
  font-size:12.5px !important; color:var(--muted) !important;
  line-height:1.5 !important; margin-bottom:4px !important; display:inline-block !important;
}
.page-content .woocommerce form .form-row .input-text,
.page-content .woocommerce form .form-row input[type="text"],
.page-content .woocommerce form .form-row input[type="email"],
.page-content .woocommerce form .form-row input[type="tel"],
.page-content .woocommerce form .form-row input[type="password"],
.page-content .woocommerce form .form-row textarea,
.page-content .woocommerce form .form-row select{
  padding:12px 14px !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:var(--font-display) !important;
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  letter-spacing:normal !important;
  height:auto !important;
}
.page-content .woocommerce form .form-row .input-text:focus,
.page-content .woocommerce form .form-row select:focus{
  border-color:var(--sage) !important;
  outline:none;
}
.page-content .woocommerce form .form-row.woocommerce-invalid input.input-text,
.page-content .woocommerce form .form-row.woocommerce-invalid select{border-color:#b8664a !important;}
.page-content .woocommerce form .form-row.woocommerce-validated input.input-text,
.page-content .woocommerce form .form-row.woocommerce-validated select{border-color:var(--sage) !important;}
.page-content .woocommerce form .form-row .required{color:#b8664a !important;}

.page-content ul.wc_payment_methods{list-style:none; padding:0; margin:0 0 16px;}
.page-content ul.wc_payment_methods li{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-bottom:8px; font-size:13.8px;
}
.page-content ul.wc_payment_methods li label{color:var(--text); font-size:13.8px; margin:0; display:inline;}
.page-content .woocommerce-terms-and-conditions-wrapper{margin-bottom:14px;}

.page-content .woocommerce-order ul.woocommerce-order-overview{
  list-style:none; padding:0; margin:0 0 22px;
  display:flex; flex-direction:column; gap:8px;
}
.page-content .woocommerce-order ul.woocommerce-order-overview li{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 14px; font-size:13px; color:var(--muted);
}
.page-content .woocommerce-order ul.woocommerce-order-overview li strong{display:block; color:var(--text); font-size:14.5px;}
.page-content .woocommerce-thankyou-order-failed,
.page-content .woocommerce-thankyou-order-received{font-weight:700; color:var(--text);}

/* FAQ as a chat: chips are the visitor's questions, the trainer answers */
.chat{display:flex; flex-direction:column; gap:16px;}
.chat-log{display:flex; flex-direction:column; gap:10px;}
.msg{display:flex; align-items:flex-end; gap:8px; max-width:88%; animation:msgIn .35s cubic-bezier(.2,.8,.2,1);}
.msg.user{align-self:flex-end;}
.msg img{width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.bubble{padding:12px 15px; border-radius:20px; font-size:14px; line-height:1.5;}
.msg.user .bubble{background:linear-gradient(120deg, var(--sage), var(--sage-deep)); color:#fff; font-weight:600; border-bottom-right-radius:6px;}
.msg.bot .bubble{background:var(--card); border:1px solid var(--line); color:#2f3a33; border-bottom-left-radius:6px;}
.typing{display:flex; gap:4px; padding:4px 2px;}
.typing i{width:7px; height:7px; border-radius:50%; background:var(--sage); animation:typingDot 1s ease-in-out infinite;}
.typing i:nth-child(2){animation-delay:.15s;}
.typing i:nth-child(3){animation-delay:.3s;}
@keyframes typingDot{0%,60%,100%{opacity:.3; transform:translateY(0);} 30%{opacity:1; transform:translateY(-4px);}}
@keyframes msgIn{from{opacity:0; transform:translateY(10px) scale(.97);} to{opacity:1; transform:none;}}
.chat-options{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.chat-chip{
  text-align:left; font:inherit; font-size:13.5px; font-weight:700; line-height:1.35; cursor:pointer;
  color:var(--sage-deep); background:var(--bg); border:1.5px solid var(--sage); border-radius:20px; padding:11px 15px;
  transition:transform .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.chat-chip:hover{background:var(--sage-light);}
.chat-chip:active{transform:scale(.97);}
.chat-chip.is-gone{opacity:0; transform:scale(.9); pointer-events:none;}
@media (prefers-reduced-motion: reduce){ .msg, .pkg-grid.is-switch .pkg-card.is-active{animation:none;} .typing i{animation:none;} }

/* ---------- hero layouts (Customizer → Homepage → Hero) ---------- */
.hero-x{position:relative; overflow:hidden;}

/* Layout One: cinematic portrait + day ticker + glass card */
.hero-one{min-height:var(--hero-h, 720px); display:flex; flex-direction:column; justify-content:flex-end; background:#101512; color:#fff;}
.hero-one .h1-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 12%; opacity:.9;}
.hero-one::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,21,18,.2) 0%, rgba(16,21,18,0) 30%, rgba(16,21,18,.92) 82%);}
.hero-one .h1-days{position:absolute; top:22px; left:0; right:0; z-index:2; overflow:hidden;}
.hero-one .h1-days > div{display:flex; gap:16px; width:max-content; padding-right:16px; animation:scroll-x 26s linear infinite;}
.hero-one .h1-days span{font-size:44px; font-weight:700; letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.55);}
.hero-one .h1-days span.on{color:var(--peach); -webkit-text-stroke:0;}
.hero-one .h1-card{
  position:relative; z-index:3; margin:0 16px 18px; padding:22px 20px 20px; border-radius:26px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.hero-one .eyebrow{color:var(--sage-light);}
.hero-one h1{font-size:40px; line-height:1;}
.hero-one h1 .line2{display:block; margin-top:4px; font-size:17px; color:#fff;}
.hero-one .role{color:#e7ece5; font-size:13.5px; margin:10px 0 16px;}
.hero-one .h1-track{position:relative; height:4px; border-radius:4px; background:rgba(255,255,255,.2); margin-bottom:8px;}
.hero-one .h1-track i{position:absolute; inset:0; border-radius:4px; background:linear-gradient(90deg, var(--sage), var(--peach)); transform-origin:left; animation:heroFill 5s ease-in-out infinite;}
.hero-one .h1-lbl{display:flex; justify-content:space-between; margin-bottom:16px; font-size:10.5px; font-weight:700; letter-spacing:.12em; color:#d7e0d5;}
@keyframes heroFill{0%{transform:scaleX(.04);} 70%,100%{transform:scaleX(1);}}

/* Layout Two: type-first on dark sage with a round portrait */
.hero-two{padding:34px 22px 34px; background:#26342A; color:#F4F1E8; text-align:left; min-height:var(--hero-h, 640px); display:flex; flex-direction:column;}
.hero-two .eyebrow{color:var(--sage-light);}
.hero-two .h2-lines{position:relative; margin-top:12px; padding-bottom:46px;}
.hero-two h1{margin:0; color:inherit;}
.hero-two .l{display:block; font-size:min(27vw, 158px); line-height:.86; font-weight:700; letter-spacing:-.05em; text-transform:uppercase;}
.hero-two .l.o{color:transparent; -webkit-text-stroke:1.8px rgba(244,241,232,.75);}
.hero-two .l.p{color:var(--peach);}
/* the wrapper keeps the rings (which overflow) outside the clipped round photo */
.hero-two .h2-photo-wrap{position:absolute; right:26px; bottom:26px; width:44%; aspect-ratio:1;}
.hero-two .h2-photo{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  border:4px solid #26342A; box-shadow:0 0 0 3px var(--peach), 0 20px 36px rgba(0,0,0,.45);
}
.hero-two .h2-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 10%;}
.hero-two .h2-sub{margin-top:auto; padding-top:26px;}
.hero-two .h2-sub .line2{font-size:20px; font-weight:700; letter-spacing:.02em; color:#fff;}
.hero-two .role{color:#b9c8b8; font-size:13.5px; margin:6px 0 20px;}
.hero-two .cta{background:var(--peach); color:#202824; box-shadow:0 12px 28px rgba(0,0,0,.35);}
.hero-two .cta::after{display:none;}

/* ---------- Results gallery layouts (Customizer → Homepage → Results) ---------- */
.results-sub{margin:-6px 0 18px;}
/* One = the default swipe carousel above. Two = staggered 2-column grid. Three = full-width stack. */
.gallery--two, .gallery--three{overflow:visible; scroll-snap-type:none; padding:0;}
.gallery--two{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;}
.gallery--three{flex-direction:column; gap:14px;}
.gallery--two img, .gallery--three img{width:100%; scroll-snap-align:none;}
.gallery--two img:nth-child(even){margin-top:26px;}
.gallery--two img:nth-child(odd):last-child{grid-column:1 / -1; aspect-ratio:16/10;}
.gallery--three img{border-radius:22px;}

/* ---------- Whom layouts (Customizer → Homepage → Whom) ---------- */
.whom-sub{margin:-6px 0 18px;}
/* One = the zigzag statements above. Two = cards. Three = numbered list. */
.whom-grid--two{gap:12px;}
.whom-grid--two .whom-card,
.whom-grid--two .whom-card:first-child{
  padding:18px 18px 20px; border:1px solid var(--line); border-radius:18px; background:var(--card);
}
.whom-grid--two .whom-card:nth-child(even) .whom-head{flex-direction:row;}
.whom-grid--two .whom-title{font-size:15px; letter-spacing:0; text-transform:none; color:var(--text);}
.whom-grid--two .whom-card p{font-size:14px; line-height:1.55; font-weight:500; letter-spacing:0; color:#3a453e;}

.whom-grid--three{counter-reset:whom;}
.whom-grid--three .whom-card,
.whom-grid--three .whom-card:first-child{
  counter-increment:whom; display:grid; grid-template-columns:58px 1fr; column-gap:12px; padding:18px 0;
}
.whom-grid--three .whom-card:first-child{padding-top:6px;}
.whom-grid--three .whom-card::before{
  content:counter(whom, decimal-leading-zero); grid-row:1 / span 2;
  font-size:36px; font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--sage);
}
.whom-grid--three .whom-ico{display:none;}
.whom-grid--three .whom-card:nth-child(even) .whom-head{flex-direction:row;}
.whom-grid--three .whom-head{margin-bottom:8px;}
.whom-grid--three .whom-title{font-size:15px; letter-spacing:0; text-transform:none; color:var(--text);}
.whom-grid--three .whom-card p{font-size:14px; line-height:1.55; font-weight:500; letter-spacing:0; color:#3a453e;}

/* ---------- Program layouts (Customizer → Homepage → Program) ---------- */
.program-sub{margin:-6px 0 18px;}
/* One = the sticky card deck above. Two = vertical timeline. Three = big outlined numbers. */
.steps-list{position:relative;}
.steps-list .step-item p{font-size:15px; line-height:1.55; font-weight:600; color:#2f3a33;}

.steps-list--two{padding-left:44px;}
.steps-list--two::before{content:""; position:absolute; left:15px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--sage), var(--sage-light));}
.steps-list--two .step-item{position:relative; padding:0 0 28px;}
.steps-list--two .step-item:last-child{padding-bottom:0;}
.steps-list--two .step-n{
  position:absolute; left:-44px; top:-4px; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--sage), var(--sage-deep)); box-shadow:0 0 0 5px var(--bg);
}

.steps-list--three .step-item{display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-top:1px solid var(--line);}
.steps-list--three .step-item:first-child{border-top:0; padding-top:4px;}
.steps-list--three .step-n{
  flex-shrink:0; min-width:64px; font-size:52px; font-weight:700; line-height:.9; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px var(--sage);
}
.steps-list--three .step-item p{padding-top:4px;}

/* ---------- About layouts (Customizer → Homepage → About) ---------- */
/* One = the ID card above. Two = horizontal card. Three = simple, centered. */
.id-card--two .id-hole{display:none;}
.id-card--two .id-photo{display:flex; align-items:center; gap:16px; aspect-ratio:auto; padding:22px 22px 0; background:none;}
.id-card--two .id-photo::after{display:none;}
.id-card--two .id-photo img{width:96px; height:96px; flex-shrink:0; border-radius:20px; object-fit:cover; box-shadow:0 8px 20px rgba(32,40,36,.18);}
.id-card--two .id-name{position:static;}
.id-card--two .id-name h2{font-size:22px; color:var(--text);}
.id-card--two .id-quote{padding-top:18px; font-size:15px; font-weight:500; color:#3a453e;}

.id-card--three{background:none; border:0; box-shadow:none; overflow:visible; text-align:center;}
.id-card--three .id-hole{display:none;}
.id-card--three .id-photo{aspect-ratio:auto; background:none;}
.id-card--three .id-photo::after{display:none;}
.id-card--three .id-photo img{width:150px; height:150px; margin:0 auto; border-radius:50%; object-fit:cover; box-shadow:0 14px 30px rgba(32,40,36,.22);}
.id-card--three .id-name{position:static; margin-top:16px;}
.id-card--three .id-name h2{font-size:24px; color:var(--text);}
.id-card--three .id-quote{padding:12px 6px 6px; font-size:15px; font-weight:500; color:#3a453e;}
.id-card--three .id-creds{padding:14px 0 0; text-align:left;}
.id-card--three .id-ico{display:none;}
.id-card--three .id-creds li{padding:14px 0 14px 14px; border-top:0; border-left:3px solid var(--sage); margin-top:12px;}

/* ---------- Reviews layouts (Customizer → Homepage → Reviews) ---------- */
.reviews-sub{margin:-6px 0 18px;}
/* One = two drifting rows, Two = one drifting row (same JS), Three = manual swipe. */
.rv-marquee--three .rv-row{scroll-snap-type:x mandatory; scroll-padding:0 22px;}
.rv-marquee--three .review-card{scroll-snap-align:start;}

/* ---------- Buttons (Customizer → Buttons) ----------
   Body classes come from pp21_button_body_classes():
     btn-shape-{pill|rounded|sharp}              corner radius
     btn-anim-{shine|sweep|pulse|flow|float|glass|none}   which animation
     btn-trig-{always|hover|once}                when it plays
   The default (pill + shine + always) is the original look. */
.cta{--btn-glow:120,151,123;}
.hero-two .cta{--btn-glow:217,165,143;}

body.btn-shape-pill{--btn-r:100px;}
body.btn-shape-rounded{--btn-r:16px;}
body.btn-shape-sharp{--btn-r:4px;}
.cta{border-radius:var(--btn-r, 100px);}
body .page-content .button,
body .page-content button.button,
body .page-content input.button,
body .page-content #place_order,
body .page-content .checkout-button{border-radius:var(--btn-r, 100px) !important;}
.pkg-switch{border-radius:var(--btn-r, 100px);}
.pkg-switch-pill{border-radius:calc(var(--btn-r, 100px) - 4px);}

/* trigger -> how often / when an animation runs */
body{--btn-ani:none; --btn-iter:infinite; --btn-delay:0s;}
body.btn-trig-once{--btn-iter:3; --btn-delay:.8s;}

/* animations that live on the button itself (shine and sweep use ::after, below) */
body.btn-anim-pulse{--btn-ani:btnPulse 2.2s ease-in-out;}
body.btn-anim-flow{--btn-ani:btnFlow 5s linear;}
body.btn-anim-float{--btn-ani:btnFloat 2.8s ease-in-out;}
body.btn-anim-glass{--btn-ani:btnGlass 3.8s ease-in-out alternate;}
body:is(.btn-trig-always, .btn-trig-once) :is(.cta:not(.outline), .page-content .button):not([disabled]){
  animation:var(--btn-ani) var(--btn-iter) var(--btn-delay);
}
body.btn-trig-hover :is(.cta:not(.outline), .page-content .button):not([disabled]):is(:hover, :focus-visible, :active){
  animation:var(--btn-ani) infinite;
}
/* the original shine glint is a ::after layer; the element styles above switch it off */
body:is(.btn-anim-pulse, .btn-anim-flow, .btn-anim-float, .btn-anim-none) .cta::after{display:none;}

@keyframes btnPulse{
  0%,100%{box-shadow:0 10px 26px rgba(var(--btn-glow, 120,151,123), .35), 0 0 0 0 rgba(var(--btn-glow, 120,151,123), .5);}
  60%{box-shadow:0 10px 26px rgba(var(--btn-glow, 120,151,123), .35), 0 0 0 14px rgba(var(--btn-glow, 120,151,123), 0);}
}
@keyframes btnFlow{from{background-position:0 0;} to{background-position:-300% 0;}}
@keyframes btnFloat{
  0%,100%{transform:translateY(0); box-shadow:0 10px 26px rgba(var(--btn-glow, 120,151,123), .35);}
  50%{transform:translateY(-4px); box-shadow:0 18px 30px rgba(var(--btn-glow, 120,151,123), .3);}
}
@keyframes btnGlass{from{background-position:0% 0, 0 0;} to{background-position:100% 0, 0 0;}}
@keyframes btnSweep{0%{left:-100%;} 55%,100%{left:100%;}}

/* Gradient flow */
body.btn-anim-flow .cta:not(.outline):not([disabled]){
  background-image:linear-gradient(110deg, var(--sage), var(--sage-deep), var(--sage), var(--sage-deep));
  background-size:300% 100%;
}
body.btn-anim-flow .hero-two .cta:not(.outline){background-image:linear-gradient(110deg, var(--peach), #f0c9b8, var(--peach), #f0c9b8);}
body.btn-anim-flow .page-content .button:not([disabled]){
  background-image:linear-gradient(110deg, var(--sage), var(--sage-deep), var(--sage), var(--sage-deep)) !important;
  background-size:300% 100% !important;
}
body.btn-anim-float .cta:active{animation-play-state:paused;}

/* Shine: base rules sit with .cta; adapt them to the trigger */
body.btn-anim-shine.btn-trig-hover .cta::after{animation:none;}
body.btn-anim-shine.btn-trig-hover .cta:is(:hover, :focus-visible, :active)::after{animation:shine 1.2s ease-in-out 1;}
body.btn-anim-shine.btn-trig-once .cta::after{animation:shine 3.2s ease-in-out .8s 3;}

/* Hover sweep: a linear-gradient layer travels from left:-100% to left:100%.
   On hover it slides across once (also on keyboard focus / while pressed, so touch screens
   get it on tap); with "always" / "once" the same slide loops by itself. */
body.btn-anim-sweep .cta::after,
body.btn-anim-sweep .page-content a.button::after,
body.btn-anim-sweep .page-content button.button::after{
  content:""; position:absolute; display:block; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform:none; animation:none; transition:left .65s cubic-bezier(.2,.7,.2,1); pointer-events:none;
}
body.btn-anim-sweep:is(.btn-trig-always, .btn-trig-once) .cta::after,
body.btn-anim-sweep:is(.btn-trig-always, .btn-trig-once) .page-content a.button::after,
body.btn-anim-sweep:is(.btn-trig-always, .btn-trig-once) .page-content button.button::after{
  transition:none; animation:btnSweep 3.4s ease-in-out var(--btn-delay) var(--btn-iter);
}
body.btn-anim-sweep.btn-trig-hover .cta:is(:hover, :focus-visible, :active)::after,
body.btn-anim-sweep.btn-trig-hover .page-content a.button:hover::after,
body.btn-anim-sweep.btn-trig-hover .page-content button.button:hover::after{left:100%;}
body.btn-anim-sweep .cta.outline::after,
body.btn-anim-sweep .cta[disabled]::after{display:none;}

/* Glass: frosted, tinted translucent surface with a bright rim and a top specular highlight.
   The moving light spot (first background layer) is the animation. */
body.btn-anim-glass .cta:not([disabled]),
body.btn-anim-glass .page-content .button:not([disabled]),
body.btn-anim-glass .page-content #place_order,
body.btn-anim-glass .page-content .checkout-button{
  background-image:
    radial-gradient(130% 170% at 0% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(120,151,123,.34) 100%) !important;
  background-size:240% 100%, 100% 100% !important; background-repeat:no-repeat !important;
  background-position:0% 0, 0 0;
  color:var(--sage-deep) !important; border:1px solid rgba(255,255,255,.8) !important;
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 10px 30px rgba(79,99,80,.22), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(79,99,80,.14);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
body.btn-anim-glass .cta:not([disabled]):hover,
body.btn-anim-glass .page-content .button:not([disabled]):hover{
  filter:brightness(1.04) saturate(1.1);
  box-shadow:0 14px 36px rgba(79,99,80,.28), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(79,99,80,.14);
}
body.btn-anim-glass .cta.outline{background:rgba(255,255,255,.4) !important; border-color:rgba(120,151,123,.5) !important;}
body.btn-anim-glass .cta::after,
body.btn-anim-glass .page-content a.button::after,
body.btn-anim-glass .page-content button.button::after{
  content:""; position:absolute; display:block; inset:0 0 45% 0; width:auto; height:auto;
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  border-radius:inherit; transform:none; animation:none; pointer-events:none;
}
body.btn-anim-glass .cta.outline::after{display:block;}
/* over photos / dark hero backgrounds: white glass with white text */
body.btn-anim-glass .hero .cta:not([disabled]),
body.btn-anim-glass .hero-one .cta:not([disabled]){
  background-image:
    radial-gradient(130% 170% at 0% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.1)) !important;
  color:#fff !important; border-color:rgba(255,255,255,.5) !important; text-shadow:0 1px 10px rgba(0,0,0,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
body.btn-anim-glass .hero-two .cta:not([disabled]){
  background-image:
    radial-gradient(130% 170% at 0% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%),
    linear-gradient(135deg, rgba(217,165,143,.95), rgba(217,165,143,.62)) !important;
  color:#202824 !important; border-color:rgba(255,255,255,.45) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.55);
}

@media (prefers-reduced-motion: reduce){
  .cta, .cta::after, .page-content .button, .page-content .button::after{animation:none !important;}
}

/* ---------- Hero Layout Two: animated portrait rings (SVG stroke-dash animations) ----------
   pathLength=100 on every circle, so dash lengths below are percentages of the circumference.
   --ring-color / --ring-color-2 / --ring-w / --ring-opacity / --rg-speed are set inline from the Customizer;
   --rg-scroll (turn with scroll) is set by initHeroRings() in site.js. */
.h2-rings{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;
  opacity:var(--ring-opacity, .85); transform-origin:50% 50%;
  transform:rotate(var(--rg-scroll, 0deg)) scale(var(--rg-scale, 1));
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.h2-rings.has-glow{filter:drop-shadow(0 0 3px var(--ring-color, #D9A58F));}
.h2-rings .rg{
  fill:none; stroke:var(--ring-color, #D9A58F); stroke-width:var(--ring-w, 1); stroke-linecap:round;
  transform-box:fill-box; transform-origin:center; opacity:var(--o, 1);
}
.h2-rings .rg.c2{stroke:var(--ring-color-2, #DCE7D9);}
/* dashed ring turning around the photo */
.rg-dash{stroke-dasharray:1.2 2.8; animation:rgSpin calc(26s * var(--rg-speed, 1)) linear infinite;}
/* a ring that draws itself, then erases from the other end */
.rg-draw{stroke-dasharray:100; stroke-dashoffset:100; transform:rotate(-90deg); animation:rgDraw calc(6s * var(--rg-speed, 1)) ease-in-out infinite; animation-delay:var(--d, 0s);}
/* a single dot: a zero-length dash with a round cap, orbiting */
.rg-orbit{stroke-dasharray:0.001 99.999; stroke-width:calc(var(--ring-w, 1) * 2.8); animation:rgSpin calc(7s * var(--rg-speed, 1)) linear infinite;}
/* rings that expand and fade out, staggered */
.rg-ripple{animation:rgRipple calc(3.4s * var(--rg-speed, 1)) ease-out infinite; animation-delay:var(--d, 0s);}
/* three long arcs */
.rg-seg{stroke-dasharray:22 11.333; animation:rgSpin calc(18s * var(--rg-speed, 1)) linear infinite;}
/* evenly spaced round dots (12 per ring) */
.rg-dots{stroke-dasharray:0.001 8.333; stroke-width:calc(var(--ring-w, 1) * 3.4); animation:rgSpin calc(34s * var(--rg-speed, 1)) linear infinite;}
/* comet: three arcs sharing a start point; the shortest/brightest is the head. The ring turns
   counter-clockwise by default so the longer, fainter arcs trail behind the head */
.rg-comet{animation:rgSpin calc(5.5s * var(--rg-speed, 1)) linear infinite reverse;}
.rg-comet.t1{stroke-dasharray:24 76; stroke-opacity:.22;}
.rg-comet.t2{stroke-dasharray:14 86; stroke-opacity:.5;}
.rg-comet.t3{stroke-dasharray:5 95; stroke-opacity:1; stroke-width:calc(var(--ring-w, 1) * 1.6);}
/* a ring that slowly swells and relaxes, neighbours out of phase */
.rg-breathe{animation:rgBreathe calc(3.8s * var(--rg-speed, 1)) ease-in-out infinite; animation-delay:var(--d, 0s);}
.h2-rings .rev{animation-direction:reverse;}
.h2-rings .rg-comet.rev{animation-direction:normal;}
@keyframes rgSpin{to{transform:rotate(360deg);}}
@keyframes rgDraw{0%{stroke-dashoffset:100;} 45%,55%{stroke-dashoffset:0;} 100%{stroke-dashoffset:-100;}}
@keyframes rgRipple{0%{transform:scale(.94); opacity:.9;} 100%{transform:scale(1.34); opacity:0;}}
@keyframes rgBreathe{0%,100%{transform:scale(.97); opacity:.45;} 50%{transform:scale(1.03); opacity:1;}}

/* reactions: on hover / tap the rings swell and brighten; on scroll they turn (site.js) */
.h2-photo-wrap:is(:hover, :active) .h2-rings[data-react~="hover"]{
  --rg-scale:1.08; filter:drop-shadow(0 0 7px var(--ring-color, #D9A58F));
}

@media (prefers-reduced-motion: reduce){
  .h2-rings .rg{animation:none;}
  .h2-rings{transition:none; transform:none;}
  .rg-draw{stroke-dashoffset:0;}
  .rg-ripple{opacity:.35;}
}

/* ---------- Packages layouts (Customizer → Homepage → Packages) ---------- */
.packages-sub{margin:-6px 0 18px;}
/* One = Standard / Plus switch (the base .pkg-grid + site.js). Two = both cards stacked (no switch).
   Three = cards in a horizontal scroll-snap row. */
.pkg-grid--three{
  flex-direction:row; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:0 -22px; padding:4px 22px 14px; scroll-padding:0 22px; scrollbar-width:none; -ms-overflow-style:none;
}
.pkg-grid--three::-webkit-scrollbar{display:none; width:0; height:0;}
.pkg-grid--three .pkg-card{flex:0 0 86%; scroll-snap-align:start;}