/* ============================================================
   TOPAL — Premium Personal Training & Longevity
   Light design system: white core · beige · grey · black accents.
   Dependency-free, Core-Web-Vitals-friendly single stylesheet.
   ============================================================ */

:root{
  --bg:#ffffff;                /* core surface */
  --beige:#f5f2ea;             /* warm beige surface */
  --beige-2:#edeae1;           /* deeper beige */
  --grey:#efeff0;              /* cool grey surface */
  --card:#fbfaf6;              /* card surface */
  --ink:#17171a;               /* near-black ink */
  --black:#141416;             /* true dark surface (sections/footer) */

  /* role tokens (components read these; dark scopes override them) */
  --surface:var(--bg);
  --white:var(--ink);          /* primary text color in current scope */
  --muted:#4c4c47;
  --muted-2:#8b8b84;
  --line:rgba(0,0,0,.18);
  --line-soft:rgba(0,0,0,.08);
  --charcoal:var(--card);      /* card bg in current scope */
  --charcoal-2:var(--beige-2); /* panel bg in current scope */

  --accent:#1d70b7;            /* TOPAL brand blue (Canva palette) */
  --accent-light:#1d70b7;      /* CTA surface — brand blue, white text (5.2:1) */
  --accent-light-2:#185e9c;    /* CTA hover — darker brand blue */
  --accent-soft:#5d9fd6;   /* brand blue tint for dark surfaces */
  --sand:#b08d4f;              /* warm sand accent */
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Jost", "Helvetica Neue", Arial, sans-serif;
  --max:1200px;
  --pad:clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--white);
  font-family:var(--sans); font-weight:300; font-size:1.0625rem;
  line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
p a, li a{border-bottom:1px solid var(--line); transition:border-color .2s, color .2s}
p a:hover, li a:hover{border-color:var(--accent); color:var(--accent)}
::selection{background:#e3dfd2; color:#17171a}

/* ---------- Dark scope (black sections, footer, menus) ---------- */
.theme-dark, .section--dark, .site-footer{
  --white:#ffffff; --muted:#cfcfca; --muted-2:#a3a39e;
  --line:rgba(255,255,255,.24); --line-soft:rgba(255,255,255,.12);
  --charcoal:#1d1d20; --charcoal-2:#232327; --surface:var(--black);
  --sand:#e1c99b;              /* brand sand (Canva) — on dark surfaces only */
  color:var(--white);
}
.section.section--dark, .section--dark{background:var(--black) !important}
.section--dark ::selection{background:#3a3a3d; color:#fff}
.section--dark p a:hover, .section--dark li a:hover{color:var(--accent-soft); border-color:var(--accent-soft)}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-weight:200; line-height:1.15; margin:0 0 .6em; letter-spacing:.01em}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem); font-weight:300}
.eyebrow{
  display:block; font-size:.78rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.1rem; font-weight:400;
}
.eyebrow::before{
  content:""; display:inline-block; width:26px; height:2px;
  background:var(--accent); margin-right:.9rem; vertical-align:middle;
}
.section--dark .eyebrow::before{background:var(--accent-soft)}
.serif{font-family:var(--serif); font-weight:400}
.lead{font-size:clamp(1.1rem,1.9vw,1.35rem); color:var(--muted); max-width:46em}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.tagline-caps{letter-spacing:.22em; text-transform:uppercase; font-size:clamp(.8rem,1.6vw,1rem); color:var(--white); font-weight:400}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.section{padding:clamp(4rem,9vw,7.5rem) 0; background:var(--bg)}
.section--tight{padding:clamp(2.5rem,6vw,4rem) 0}
.section--beige, .section--light{background:var(--beige); --charcoal:var(--card); --charcoal-2:#fff}
.section--grey, .section--panel{background:var(--grey); --charcoal:#fff; --charcoal-2:#fff}
.section--charcoal{background:var(--beige)}   /* legacy alias → beige in light theme */
.grid-2{display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.grid-3{display:grid; gap:1.5rem}
@media(min-width:820px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2--wide-text{grid-template-columns:1.15fr .85fr}
}
.center{text-align:center}
.divider{border:0; border-top:1px solid var(--line-soft); margin:0}

/* ---------- Header ---------- */
.site-header{
  position:absolute; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--pad); max-width:1500px; margin:0 auto; width:100%;
}
.site-header--solid{position:sticky; top:0; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft)}
.logo{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:300; letter-spacing:.42em; padding-left:.42em; color:var(--white)}
/* keep the wordmark legible over the hero photo (white on dark, dark on light) */
.site-header:not(.site-header--solid) .logo{color:#fff; mix-blend-mode:difference}
.header-right{display:flex; align-items:center; gap:1.6rem}
.lang-switch{display:flex; gap:.9rem; font-size:.82rem; letter-spacing:.12em}
.lang-switch a{color:var(--muted); position:relative; padding-bottom:2px}
.lang-switch a::after{content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s}
.lang-switch a[aria-current="true"]::after, .lang-switch a:hover::after{transform:scaleX(1)}
.lang-switch a[aria-current="true"], .lang-switch a:hover{color:var(--white)}
.nav-toggle{background:none; border:0; cursor:pointer; padding:.4rem; display:grid; gap:7px; width:44px}
.nav-toggle span{display:block; height:2px; background:var(--white); border-radius:2px; transition:transform .3s}
.nav-toggle:hover span:nth-child(1){transform:translateY(-1px)}
.nav-toggle:hover span:nth-child(3){transform:translateY(1px)}

/* Overlay menu — light, elegant */
.menu-overlay{position:fixed; inset:0; background:var(--beige); z-index:100; display:none; align-items:center}
.menu-overlay.open{display:flex}
.menu-overlay .menu-inner{display:grid; gap:3rem; width:100%; max-width:1100px; margin:0 auto; padding:var(--pad)}
@media(min-width:820px){
  .menu-overlay .menu-inner{grid-template-columns:1fr 1px 1fr 1fr; align-items:start}
  .menu-overlay .menu-rule{background:var(--line); height:100%; width:1px}
}
.menu-brand{align-self:center; text-align:center}
.menu-brand .logo{letter-spacing:.4em; font-size:clamp(2.4rem,5vw,3.6rem)}
.menu-monogram{width:64px; height:64px; margin:0 auto 1.4rem; border:1.5px solid var(--white); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-style:italic; font-size:1.3rem}
.menu-main a, .menu-side a{display:block; padding:.45rem 0}
.menu-main a{font-size:clamp(1.4rem,3vw,2rem); letter-spacing:.14em; text-transform:uppercase; font-weight:300; position:relative; width:max-content}
.menu-main a::after{content:""; position:absolute; left:0; bottom:.3rem; height:1.5px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .35s}
.menu-main a:hover::after{transform:scaleX(1)}
.menu-side a{font-size:1.05rem; color:var(--white)}
.menu-side a:hover{color:var(--accent)}
.menu-side .socials{display:flex; gap:1.1rem; margin-top:1.4rem}
.menu-close{position:absolute; top:1.4rem; right:var(--pad); background:none; border:0; color:var(--white);
  font-size:2rem; font-weight:200; cursor:pointer; line-height:1}

/* ---------- Hero (split: image left-centered, copy right) ---------- */
.hero{
  position:relative; min-height:92svh; display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(120deg, #fbfaf6 0%, var(--beige) 55%, var(--beige-2) 100%);
}
.hero--split{display:grid; align-items:stretch; padding:0}
@media(min-width:900px){ .hero--split{grid-template-columns:.92fr 1.08fr} }
.hero-figure{margin:0; position:relative; min-height:46svh}
.hero-figure img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top}
@media(min-width:900px){
  .hero-figure::after{content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(245,242,234,0) 78%, var(--beige) 100%)}
}
.hero--split .hero-copy{align-self:center; padding:7rem var(--pad) 4rem; max-width:640px}
@media(min-width:900px){ .hero--split .hero-copy{padding-left:clamp(2rem,5vw,5rem)} }
.hero-copy h1{font-weight:200; font-size:clamp(2.6rem,6.5vw,4.8rem); margin-bottom:1rem}
.hero-copy .tagline-caps{display:block; margin-bottom:2.4rem}
.hero-location{color:var(--muted); font-size:.95rem; letter-spacing:.06em; margin-bottom:2rem}

/* Full-bleed dark hero variant (kept for dramatic pages if needed) */
.hero--dark{background:linear-gradient(115deg,#242426 0%, #1b1b1d 45%, #141416 100%)}
.hero--dark .hero-media{position:absolute; inset:0}
.hero--dark .hero-media img{width:100%; height:100%; object-fit:cover; opacity:.92}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  border:1px solid var(--white); border-radius:999px;
  padding:.95em 2.2em; font-size:1.02rem; font-weight:300; letter-spacing:.03em;
  transition:background .25s,color .25s,border-color .25s,transform .25s; cursor:pointer;
  background:transparent; color:var(--white); font-family:var(--sans); position:relative;
}
.btn:hover{background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-1px)}
.section--dark .btn:hover, .site-footer .btn:hover{background:#f4f4f1; color:#141416; border-color:#f4f4f1}
.btn .arr{font-size:1.15em; transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn--solid{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn--solid:hover{background:var(--accent-light-2); border-color:var(--accent-light-2); color:#fff; transform:translateY(-1px)}
.section--dark .btn--solid{background:var(--accent); color:#fff; border-color:var(--accent)}
.section--dark .btn--solid:hover{background:var(--accent-light-2); border-color:var(--accent-light-2); color:#fff}
.btn--ghost{border-color:var(--line); color:var(--muted)}
.btn--ghost:hover{border-color:var(--ink); color:#fff}

/* ---------- Cards / pillars ---------- */
.card{
  background:var(--charcoal); border:1px solid var(--line-soft); padding:2.2rem;
  position:relative; box-shadow:0 12px 34px rgba(23,23,26,.05);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.card::before{content:""; position:absolute; top:0; left:0; width:44px; height:3px; background:var(--accent)}
.card:hover{transform:translateY(-5px); border-color:var(--line); box-shadow:0 18px 44px rgba(23,23,26,.09)}
.card h3{letter-spacing:.14em; text-transform:uppercase; font-size:1rem; font-weight:400; margin-bottom:1rem}
.card p{color:var(--muted); margin:0}
.num{font-family:var(--serif); font-size:2.2rem; color:var(--sand); display:block; margin-bottom:1rem}

/* ---------- Stats band with animated counters ---------- */
.stats{display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); text-align:center}
.stats .stat b{display:block; font-family:var(--serif); font-weight:600; font-size:clamp(2.2rem,4.5vw,3.4rem); color:var(--white); line-height:1.1}
.stats .stat b .plus{color:var(--accent)}
.stats .stat span{display:block; margin-top:.4rem; font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2)}

/* ---------- Timeline (transformation phases) ---------- */
.timeline{display:grid; gap:1.5rem; counter-reset:phase}
@media(min-width:820px){ .timeline{grid-template-columns:repeat(3,1fr)} }
.timeline .phase{position:relative; background:var(--charcoal); border:1px solid var(--line-soft); padding:2rem;
  box-shadow:0 12px 34px rgba(23,23,26,.05)}
.timeline .phase::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft))}
.timeline .phase .when{font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sand); display:block; margin-bottom:.8rem; font-weight:400}
.timeline .phase h3{font-size:1.15rem; margin-bottom:.6rem}
.timeline .phase p{color:var(--muted); margin:0}

/* ---------- Process steps ---------- */
.steps{display:grid; gap:1.5rem}
@media(min-width:820px){ .steps{grid-template-columns:repeat(4,1fr)} }
.steps .step{text-align:left}
.steps .step .n{font-family:var(--serif); font-size:2.4rem; color:var(--sand); line-height:1; display:block; margin-bottom:.7rem}
.steps .step h3{font-size:1rem; letter-spacing:.12em; text-transform:uppercase; font-weight:400; margin-bottom:.5rem}
.steps .step p{color:var(--muted); margin:0; font-size:.98rem}

/* ---------- Media figures ---------- */
.figure{margin:0; position:relative; overflow:hidden; background:var(--charcoal-2)}
.figure img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease}
.figure--portrait{aspect-ratio:3/4}
.figure--landscape{aspect-ratio:16/10}
.figure--round{border-radius:50%; aspect-ratio:1/1; width:min(280px,70%); margin:0 auto}
.grid-2 .figure:hover img{transform:scale(1.03)}

/* Gallery marquee */
@keyframes drift{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.strip{padding:1rem var(--pad) 2rem; display:flex; gap:1rem; overflow-x:auto; scrollbar-width:none; background:var(--bg)}
.strip::-webkit-scrollbar{display:none}
.strip .figure{flex:0 0 clamp(180px,26vw,300px)}
.strip--marquee{overflow:hidden; padding:1rem 0 2rem; display:block}
.strip--marquee .strip-track{display:flex; gap:1rem; width:max-content; animation:drift 60s linear infinite}
.strip--marquee:hover .strip-track{animation-play-state:paused}
.strip--marquee .figure{flex:0 0 clamp(180px,26vw,300px)}

/* ---------- Quotes ---------- */
.quote{border-left:2px solid var(--sand); padding:1.4rem 0 1.4rem 1.8rem; margin:0; background:transparent}
.quote p{font-family:var(--serif); font-size:1.15rem; line-height:1.65; margin:0 0 1rem; color:var(--white)}
.quote footer{color:var(--muted); font-size:.92rem; letter-spacing:.05em; display:flex; align-items:center; gap:.9rem; flex-wrap:wrap}
.quote footer strong{color:var(--white); font-weight:400}
.quote .avatar{width:52px; height:52px; border-radius:50%; object-fit:cover; flex:0 0 auto; box-shadow:0 4px 14px rgba(23,23,26,.15)}

/* ---------- Lists ---------- */
.checklist{list-style:none; margin:0; padding:0}
.checklist li{padding:.85rem 0 .85rem 2rem; position:relative; border-bottom:1px solid var(--line-soft); color:var(--muted)}
.checklist li strong{color:var(--white); font-weight:400}
.checklist li::before{content:"—"; position:absolute; left:0; color:var(--sand)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer; padding:1.2rem 0; font-size:1.08rem; font-weight:300; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-weight:200; font-size:1.4rem; color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 0 1.4rem; color:var(--muted); max-width:60em}

/* ---------- Forms ---------- */
.form{display:grid; gap:1.1rem}
@media(min-width:700px){ .form{grid-template-columns:1fr 1fr} .form .full{grid-column:1/-1} }
.field label{display:block; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--white); font:inherit; padding:.6rem 0; border-radius:0; transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent)}
.field select option{background:#fff; color:#17171a}
.form .btn{justify-self:start; margin-top:.6rem}
.form-note{color:var(--muted-2); font-size:.85rem}
.hidden-field{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}

/* ---------- CTA band ---------- */
.cta-band{background:var(--beige); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.cta-band .inner{display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  padding:.8rem var(--pad) calc(.8rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-top:1px solid var(--line);
}
.sticky-cta .btn{width:100%; justify-content:center; background:var(--accent); color:#fff; border-color:var(--accent)}
@media(max-width:820px){ .sticky-cta.on{display:block} body.has-sticky{padding-bottom:5rem} }

/* ---------- Blog ---------- */
.post-card{display:block; border:1px solid var(--line-soft); background:var(--charcoal); transition:border-color .25s, transform .35s, box-shadow .35s; box-shadow:0 10px 30px rgba(23,23,26,.04)}
.post-card:hover{border-color:var(--line); transform:translateY(-5px); box-shadow:0 18px 44px rgba(23,23,26,.09)}
.post-card .figure{aspect-ratio:16/9}
.post-card .figure img{transition:transform .8s ease}
.post-card:hover .figure img{transform:scale(1.04)}
.post-card .body{padding:1.6rem}
.post-card h3{margin-bottom:.5rem}
.post-card .meta{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:.8rem; display:block}
.article{max-width:760px; margin:0 auto}
.article h2{margin-top:2.6em; font-size:clamp(1.45rem,2.6vw,1.9rem)}
.article h3{margin-top:2em}
.article p, .article li{color:#3f3f3a}
.article .takeaways{
  background:var(--beige); color:var(--ink); border:1px solid var(--line-soft);
  border-left:4px solid var(--accent); padding:1.8rem 2rem; margin:2.5rem 0;
}
.article .takeaways h2{margin-top:0; font-size:1.1rem; letter-spacing:.18em; text-transform:uppercase; font-weight:400}
.article .takeaways li, .article .takeaways p{color:#3a3a36}
.article .refs{font-size:.92rem; color:var(--muted)}
.article .refs li{margin-bottom:.6rem}
.article sup a{border:0; color:var(--accent)}
.article blockquote{border-left:2px solid var(--sand); margin:2rem 0; padding:.4rem 0 .4rem 1.6rem; font-family:var(--serif); font-size:1.15rem}

/* Table of contents */
.toc{background:var(--card); border:1px solid var(--line-soft); border-left:4px solid var(--sand); padding:1.6rem 2rem; margin:2.2rem 0}
.toc h2{margin:0 0 .8rem; font-size:.85rem; letter-spacing:.24em; text-transform:uppercase; font-weight:400; color:var(--muted)}
.toc ol{margin:0; padding-left:1.2rem; columns:2; column-gap:2.5rem; font-size:.98rem}
@media(max-width:700px){ .toc ol{columns:1} }
.toc li{margin-bottom:.45rem; break-inside:avoid}
.toc a{border:0; color:var(--ink)}
.toc a:hover{color:var(--accent)}

/* Related reading */
.related{border-top:1px solid var(--line-soft); margin-top:3rem; padding-top:2rem}
.related h2{font-size:1rem; letter-spacing:.22em; text-transform:uppercase; font-weight:400; color:var(--muted)}
.related a{display:block; padding:.5rem 0; border:0; color:var(--white)}
.related a:hover{color:var(--accent)}
.related a .arr{color:var(--sand); margin-right:.6rem}

/* Reading progress bar (injected by JS on articles) */
.progress-bar{position:fixed; top:0; left:0; height:3px; width:0; background:var(--accent); z-index:90; transition:width .1s linear}

/* ---------- Footer (black) ---------- */
.site-footer{background:var(--black); border-top:1px solid rgba(255,255,255,.09); padding:4rem 0 2.5rem}
.footer-grid{display:grid; gap:2.5rem}
@media(min-width:820px){ .footer-grid{grid-template-columns:1.2fr 1px .8fr .8fr 1fr} .footer-rule{background:rgba(255,255,255,.09); width:1px; height:100%} }
.footer-brand .logo{display:block; margin-bottom:1rem}
.footer-col h4{font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); font-weight:400; margin-bottom:1.1rem}
.footer-col a{display:block; padding:.28rem 0; color:var(--muted)}
.footer-col a:hover{color:#fff}
.newsletter-form{display:flex; gap:.6rem; margin-top:.8rem}
.newsletter-form input{flex:1; background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--white); font:inherit; padding:.5rem 0}
.newsletter-form input:focus{outline:none; border-color:#fff}
.newsletter-form button{background:none; border:0; color:var(--white); cursor:pointer; font-size:1.2rem}
.ai-disclaimer{margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.09); color:var(--muted-2); font-size:.8rem; line-height:1.6; max-width:70em}
.copyright{margin-top:1.4rem; color:var(--muted-2); font-size:.8rem; display:flex; flex-wrap:wrap; gap:1.4rem}

/* ---------- Motion & animation layer ---------- */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}
.maxw{max-width:56em}
.fade{opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease}
.fade.vis{opacity:1; transform:none}
.grid-2 .fade:nth-child(2), .grid-3 .fade:nth-child(2){transition-delay:.12s}
.grid-3 .fade:nth-child(3){transition-delay:.24s}
.grid-3 .fade:nth-child(4){transition-delay:.1s}
.grid-3 .fade:nth-child(5){transition-delay:.2s}
.grid-3 .fade:nth-child(6){transition-delay:.3s}

@keyframes heroUp{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
@keyframes heroImg{from{opacity:0; transform:scale(1.04)} to{opacity:1; transform:scale(1)}}
.hero-copy > *{opacity:0; animation:heroUp .9s ease forwards}
.hero-copy > *:nth-child(1){animation-delay:.1s}
.hero-copy > *:nth-child(2){animation-delay:.28s}
.hero-copy > *:nth-child(3){animation-delay:.46s}
.hero-copy > *:nth-child(4){animation-delay:.64s}
.hero-copy > *:nth-child(5){animation-delay:.8s}
.hero-figure img{animation:heroImg 1.4s ease forwards}
.hero--dark .hero-media img{animation:heroImg 1.6s ease forwards}

/* WhatsApp floating button */
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.35)} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.wa-btn{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:70;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  animation:waPulse 3s ease infinite; transition:transform .25s ease;
  box-shadow:0 6px 20px rgba(23,23,26,.18);
}
.wa-btn:hover{transform:scale(1.08)}
.wa-btn svg{width:30px; height:30px; fill:#fff}
@media(max-width:820px){ body.has-sticky .wa-btn{bottom:5.4rem} }

@media(prefers-reduced-motion:reduce){
  .fade{opacity:1; transform:none; transition:none}
  .hero-copy > *{opacity:1; animation:none}
  .hero-figure img, .hero--dark .hero-media img{animation:none}
  .strip--marquee .strip-track{animation:none}
  .wa-btn{animation:none}
  .card, .post-card, .btn{transition:none}
  html{scroll-behavior:auto}
}


/* ---------- "So geht es weiter" numbered steps (form section) ---------- */
.next-steps{list-style:none; margin:1.6rem 0 0; padding:0; counter-reset:ns}
.next-steps li{position:relative; padding:.7rem 0 .7rem 3rem; counter-increment:ns; color:var(--muted)}
.next-steps li strong{color:var(--white); font-weight:400}
.next-steps li::before{
  content:counter(ns); position:absolute; left:0; top:.55rem;
  width:2rem; height:2rem; border-radius:50%; border:1px solid var(--accent);
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1rem;
}
.form-trust{display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1rem; color:var(--muted-2); font-size:.85rem; letter-spacing:.04em}
.form-trust span::before{content:"✓"; color:var(--accent); margin-right:.45rem}

/* ---- Testimonial slideshow ---- */
.ts{position:relative}
.ts-viewport{overflow:hidden}
.ts-track{display:flex; align-items:stretch; transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.ts-slide{flex:0 0 100%; margin:0; display:grid; grid-template-columns:minmax(220px,340px) 1fr;
  gap:2.4rem; align-items:center; padding:.4rem .2rem}
.ts-photo img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; display:block;
  box-shadow:0 18px 44px rgba(20,20,22,.16)}
.ts-quote{margin:0; border:0; padding:0; background:none}
.ts-quote p{font-size:1.05rem; line-height:1.8; color:var(--ink)}
.ts-quote footer{margin-top:1.1rem; color:var(--muted-2); font-size:.92rem; letter-spacing:.02em}
.ts-quote footer strong{display:block; color:var(--ink); font-size:1rem; margin-bottom:.15rem}
.ts-nav{display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:1.7rem}
.ts-btn{width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--card);
  color:var(--ink); font-size:1.05rem; line-height:1; cursor:pointer; transition:background .25s,color .25s,border-color .25s}
.ts-btn:hover,.ts-btn:focus-visible{background:var(--ink); color:#fff; border-color:var(--ink)}
.ts-dots{display:flex; gap:.55rem}
.ts-dot{width:9px; height:9px; border-radius:50%; border:0; padding:0; background:#d6d3ca; cursor:pointer;
  transition:background .25s, transform .25s}
.ts-dot[aria-selected="true"]{background:var(--accent); transform:scale(1.3)}
@media (max-width:760px){
  .ts-slide{grid-template-columns:1fr; gap:1.3rem}
  .ts-photo{display:flex; justify-content:center}
  .ts-photo img{max-width:240px}
  .ts-quote{text-align:center}
}
@media (prefers-reduced-motion:reduce){ .ts-track{transition:none} }

/* ---- Consent banner ---- */
.consent{position:fixed; left:0; right:0; bottom:0; z-index:90; padding:1rem;
  display:flex; justify-content:center; opacity:0; transform:translateY(14px);
  transition:opacity .35s ease, transform .35s ease; pointer-events:none}
.consent.on{opacity:1; transform:none; pointer-events:auto}
.consent-box{max-width:660px; width:100%; background:var(--black); border-radius:14px;
  padding:1.4rem 1.6rem 1.5rem; box-shadow:0 24px 60px rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.09)}
.consent-title{color:#fff; font-weight:400; letter-spacing:.05em; margin:0 0 .4rem; font-size:1.02rem}
.consent-text{color:#c9c9c4; font-size:.9rem; line-height:1.65; margin:0 0 1.1rem}
.consent-text a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.consent-actions{display:flex; gap:.8rem; flex-wrap:wrap}
.consent .btn--solid{background:var(--accent); color:#fff; border-color:var(--accent)}
.consent .btn--solid:hover{background:var(--accent-light-2); border-color:var(--accent-light-2)}
.consent .btn--ghost{border-color:rgba(255,255,255,.35); color:#fff; background:transparent}
.consent .btn--ghost:hover{border-color:#fff}
@media (max-width:520px){ .consent{padding:.6rem} .consent-actions .btn{flex:1 1 auto; text-align:center; justify-content:center} }