:root{
  --red:#D12229; --red-on-dark:#FF6B70; --red-deep:#7B0005; --red-ink:#B01A21;
  --ink:#1D1D1D; --ink-2:#2A2A2A; --gray:#707070; --gray-ink:#5A5A5A;
  --paper:#FFFFFF; --mist:#F5F2EF; --mist-2:#ECE7E2;
  --line:rgba(29,29,29,.12); --line-w:rgba(255,255,255,.22);
  --disp:"Dosis","Barlow",system-ui,sans-serif;
  --f:"Barlow",-apple-system,"Segoe UI",system-ui,sans-serif;
  --wrap:1240px; --gut:clamp(20px,4vw,56px);
  --sec:clamp(80px,9vw,136px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --hh:84px; /* header height over the hero */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--f);font-size:17.5px;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 max(var(--gut),env(safe-area-inset-right)) 0 max(var(--gut),env(safe-area-inset-left))}
.narrow{max-width:820px}
p{max-width:68ch}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.08;letter-spacing:.01em;color:var(--ink);text-wrap:balance}
.h-xl{font-size:clamp(38px,5.4vw,72px);text-transform:uppercase;letter-spacing:.015em}
.h-l{font-size:clamp(30px,3.6vw,48px);text-transform:uppercase;letter-spacing:.02em}
.h-m{font-size:clamp(23px,2.1vw,30px)}
.h-s{font-size:21px}
.rule{display:block;width:56px;height:4px;border-radius:4px;background:var(--red);margin-bottom:22px}
.center .rule{margin-left:auto;margin-right:auto}
.lead{font-size:clamp(19px,1.5vw,22px);line-height:1.55;color:var(--ink)}
.muted{color:var(--gray-ink)}
.prose>*+*{margin-top:16px}
.prose a,.lk{color:var(--red-ink);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:1px;transition:color .25s}
.prose a:hover,.lk:hover{color:var(--ink)}
.prose ul{list-style:none;display:grid;gap:10px}
.prose li{position:relative;padding-left:26px}
.prose li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--red)}
.prose h3{font-size:22px;margin-top:34px}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto}

/* buttons: pill, sliding fill like Lopes Ventures */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;border-radius:999px;font-family:var(--disp);font-size:16.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill,var(--ink));transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-red{background:var(--red);color:#fff}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{color:#fff}
.btn-ghost{border:1.5px solid currentColor;color:#fff;--fill:#fff}
.btn-ghost:hover{color:var(--red)}
.btn-sm{height:42px;padding:0 20px;font-size:15px}

/* header */
/* fixed over the page; transparent while it sits on a red hero, fills red once the page scrolls */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;background-color:var(--red);transition:background-color .45s var(--ease),box-shadow .45s var(--ease)}
.js .hdr.over:not(.solid){background-color:rgba(209,34,41,0)}
.hdr.solid{box-shadow:0 10px 30px -18px rgba(0,0,0,.55)}
.hdr-sp{height:var(--hh)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--hh);transition:height .4s var(--ease)}
.hdr.solid .wrap{height:70px}
.logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav>a:not(.btn),.dd>a{font-family:var(--disp);font-size:15.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:9px 14px;border-radius:999px;transition:background .3s}
.nav>a:not(.btn):hover,.dd:hover>a,.dd:focus-within>a{background:rgba(0,0,0,.14)}
.nav>a:not(.btn)[aria-current],.dd>a[aria-current]{background:var(--ink)}
.dd{position:relative}
.dd>a{display:inline-flex;align-items:center;gap:7px}
.dd>a i{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.dd-panel{position:absolute;top:calc(100% + 12px);left:0;min-width:230px;background:#fff;border-radius:12px;padding:8px;box-shadow:0 24px 50px -24px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .35s var(--ease)}
.dd-panel a{display:block;padding:10px 14px;border-radius:8px;font-family:var(--disp);font-size:16px;font-weight:600;color:var(--ink);transition:background .25s,color .25s}
.dd-panel a:hover,.dd-panel a[aria-current]{background:var(--mist);color:var(--red-ink)}
.nav .btn{margin-left:10px;height:44px;padding:0 20px}
.burger{display:none;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.14);position:relative}
.burger i{position:absolute;left:14px;right:14px;height:2px;background:#fff;border-radius:2px;transition:transform .45s var(--ease),top .45s var(--ease)}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:26px}
.menu-open .burger i:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){top:22px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:45;background:var(--red);padding:100px var(--gut) 32px;display:flex;flex-direction:column;gap:28px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.menu-open .mnav{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.menu-open{overflow:hidden}
.mnav nav{display:grid;border-top:1px solid var(--line-w)}
.mnav nav>a,.mnav .grp>a{display:block;padding:14px 0;border-bottom:1px solid var(--line-w);font-family:var(--disp);font-size:28px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.mnav .grp .subs{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 16px;border-bottom:1px solid var(--line-w)}
.mnav .grp .subs a{padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.16);font-family:var(--disp);font-size:16px;font-weight:600;color:#fff}
.mnav .grp>a{border-bottom:0}
.mnav [aria-current]{color:var(--ink)}
.mcta{display:flex;flex-wrap:wrap;gap:10px}
.mcta .btn{flex:1 1 auto}
.mcta .btn-ghost{--fill:#fff}
.mcta svg{width:18px;height:18px;fill:currentColor}

/* hero */
.hero{position:relative;background:var(--red);color:#fff;overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:0;z-index:-2}
.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(209,34,41,.86),rgba(209,34,41,.78) 60%,rgba(176,26,33,.9))}
.hero .tracks{position:absolute;inset:0;z-index:-1;opacity:.35;pointer-events:none}
.hero .wrap{position:relative;padding-top:calc(var(--hh) + clamp(64px,8vw,112px));padding-bottom:clamp(110px,12vw,170px)}
.hero h1,.hero h2{color:#fff}
.hero p{color:rgba(255,255,255,.92)}
.hero .crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-bottom:22px;font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.hero .crumbs a:hover{color:#fff}
.hero .crumbs i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6)}
.hero.page{text-align:center}
.hero.page .wrap{min-height:calc(var(--hh) + clamp(300px,36vw,460px));display:flex;flex-direction:column;justify-content:center;align-items:center}
.hero.page .sub{margin-top:22px;font-size:clamp(18px,1.4vw,21px);max-width:60ch}
.shape{position:absolute;left:0;width:100%;overflow:hidden;line-height:0;direction:ltr;pointer-events:none;z-index:2}
.shape.b{bottom:-1px}.shape.t{top:-1px}
.shape.b.pos,.shape.t.neg{transform:rotate(180deg)}
.shape svg{display:block;position:relative;left:50%;width:calc(var(--w) + 1.3px);height:var(--h);transform:translateX(-50%)}
.shape.flip svg{transform:translateX(-50%) rotateY(180deg)}
.shape path{fill:var(--c)}
/* At fractional page heights (phones) the last pixel row of a red section bleeds through under its
   wave as a thin red line. On bands the outer 3px are painted in the neighbour's colour (--prev / --next, set per
   section in build.py) and the photo layer stops 3px short. Hero bottom waves instead keep their exact position
   (svg box 1px past the hero, so the trough is whole) and their fill runs on 13px further (extended path, svg overflow
   visible, padding on the outer side), so the hero's last rows are always under solid fill. */
.shape.b.ext{bottom:-14px;padding-top:13px}
.shape.ext svg{overflow:visible}
.band{background:linear-gradient(to bottom,var(--prev,#fff) 3px,var(--red) 0,var(--red) calc(100% - 3px),var(--next,#fff) 0)}
.band .bg{top:3px;bottom:3px}
@media (max-width:767px){.shape svg{width:calc(var(--w) * 1.15 + 1.3px);height:var(--hm)}}
/* footer wave: the live site's per-page sizes for desktop / tablet / phone (build.py foot_wave); rotated like an
   Elementor bottom divider, the filled side is the section above */
.shape.t.foot{transform:rotate(180deg)}
@media (max-width:1059px){.shape.foot svg{width:calc(var(--wt) + 1.3px);height:var(--ht)}}
@media (max-width:767px){.shape.foot svg{width:calc(var(--wm) + 1.3px);height:var(--hm)}}

.home-hero .bg::after{display:none}
.home-hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:end;padding-top:calc(var(--hh) + clamp(16px,2vw,32px));padding-bottom:0;min-height:calc(var(--hh) + min(86vh,800px))}
.home-hero .kid{align-self:end;margin:0 0 -2px clamp(-60px,-4vw,0px)}
.home-hero .kid img{width:118%;max-width:none;margin-left:-6%}
.home-hero .copy{align-self:center;padding-bottom:clamp(90px,10vw,150px);text-align:right}
.home-hero .copy h2{font-size:clamp(32px,3.6vw,52px);text-transform:uppercase;letter-spacing:.03em;font-weight:500;line-height:1.12}
.home-hero .copy p{margin:26px 0 14px auto;font-size:20px}
/* first visit: the hero rolls down like a wave */
.unroll{display:none}
/* The red-lines-on-white layer stays put, lined up pixel for pixel with the hero image (same box, same object-fit; the
   lines are extracted from that image, see _dev/juoksutek-source/track-lines.py). Only its mask moves: the overlay slides
   down and its inner layer slides up by exactly the same amount, so the wave edge travels while the pattern does not.
   The mask starts under the header, so the strip behind the header is red from the first frame. */
.home-hero{--uw:200%;--uh:40px}
@media (max-width:767px){.home-hero{--uw:230%;--uh:20px}}
.js .home-hero .unroll{display:block;position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 100%22 preserveAspectRatio=%22none%22%3E%3Cpath transform=%22rotate%28180 500 50%29%22 d=%22M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z%22/%3E%3C/svg%3E") 50% var(--hh)/var(--uw) var(--uh) no-repeat,linear-gradient(#000,#000) 0 calc(var(--hh) + var(--uh) - 1px)/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 100%22 preserveAspectRatio=%22none%22%3E%3Cpath transform=%22rotate%28180 500 50%29%22 d=%22M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z%22/%3E%3C/svg%3E") 50% var(--hh)/var(--uw) var(--uh) no-repeat,linear-gradient(#000,#000) 0 calc(var(--hh) + var(--uh) - 1px)/100% 100% no-repeat;
  animation:unroll 1.6s cubic-bezier(.65,0,.25,1) .1s forwards}
.home-hero .unroll .pat{position:absolute;inset:0;background:var(--mist);animation:inherit;animation-name:unroll-pin}
/* Layers, top to bottom: red hero > grey (the "Suosituksia" mist) > white. The pinned layer itself is grey; .mwave is
   the WHITE ground below the grey front. That front starts --ug below the red edge and runs faster with a softer stop,
   so the grey floods the hero ahead of the red edge (it only ever grows downward) and the red edge catches it below the
   hero. Both fronts end at the same spot below the hero, so the final frame is unchanged. Exactly the same wave edge as the red one
   (same path, --uw/--uh, 50% position), only lower. The red lines stay on top of both grounds: the lines image is opaque
   (white ground), so it is multiplied in, otherwise its white would hide the grey. */
.home-hero{--ug:200px}
@media (max-width:767px){.home-hero{--ug:150px}}
.home-hero .unroll .mwave{position:absolute;inset:0;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 100%22 preserveAspectRatio=%22none%22%3E%3Cpath transform=%22rotate%28180 500 50%29%22 d=%22M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z%22/%3E%3C/svg%3E") 50% calc(var(--hh) + var(--ug))/var(--uw) var(--uh) no-repeat,linear-gradient(#000,#000) 0 calc(var(--hh) + var(--ug) + var(--uh) - 1px)/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 100%22 preserveAspectRatio=%22none%22%3E%3Cpath transform=%22rotate%28180 500 50%29%22 d=%22M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z%22/%3E%3C/svg%3E") 50% calc(var(--hh) + var(--ug))/var(--uw) var(--uh) no-repeat,linear-gradient(#000,#000) 0 calc(var(--hh) + var(--ug) + var(--uh) - 1px)/100% 100% no-repeat;
  animation:unroll-mist 1.2s cubic-bezier(.45,0,.2,1) .1s forwards}
.home-hero .unroll .pat img{position:relative;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,rgba(0,0,0,.35) 72%,transparent 92%);mask-image:linear-gradient(180deg,#000 0%,#000 45%,rgba(0,0,0,.35) 72%,transparent 92%)}
/* The hero's own bottom wave sits above the unroll layers, so while the grey waits for the red edge its lower boundary
   is already the final hero silhouette (not the flat bottom of the hero box). It is static and identical to the end
   state. Its fill runs on past the hero bottom (.shape.ext), so every rectangular edge near the hero bottom (unroll
   layers, photo, kid) is under solid fill. */
.home-hero > .shape.b{z-index:7}
@keyframes unroll{to{transform:translateY(100%)}}
@keyframes unroll-pin{to{transform:translateY(-100%)}}
@keyframes unroll-mist{to{transform:translateY(calc(100% - var(--ug)))}}
.js .home-hero .ani{animation-delay:1s}.js .home-hero .ani.d2{animation-delay:1.12s}.js .home-hero .ani.d3{animation-delay:1.24s}
.js .home-hero .kid img{animation:kid 1.2s var(--ease) .75s both}

/* sections */
.sec{position:relative;padding:var(--sec) 0}
.sec.mist{background:var(--mist)}
.sec.dark{background:var(--ink);color:#fff}
.sec.dark h2,.sec.dark h3{color:#fff}
.head{margin-bottom:clamp(36px,4vw,56px)}
.head.center{text-align:center}
.head p{margin-top:16px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.split .side{position:sticky;top:110px}
.cta-row{margin-top:clamp(36px,4vw,56px);display:flex;justify-content:center}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:clamp(40px,5vw,64px) 0}
.ph{border-radius:var(--r);overflow:hidden;background:var(--mist-2)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gallery .ph{aspect-ratio:3/2}
.gallery .ph:hover img,.card:hover .ph img{transform:scale(1.04)}

.band{position:relative;background:var(--red);color:#fff;isolation:isolate;padding:calc(var(--sec) + 30px) 0}
.band .bg{position:absolute;inset:0;z-index:-1}
.band .bg img{width:100%;height:100%;object-fit:cover}
.band .bg::after{content:"";position:absolute;inset:0;background:rgba(209,34,41,.86)}
.band h2,.band h3{color:#fff}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(36px,4vw,56px);counter-reset:s}
.steps3>div{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 22px;border-radius:var(--r);background:rgba(0,0,0,.12);backdrop-filter:blur(2px)}
.steps3 img,.steps3 .dots{width:84px;height:84px;object-fit:contain}
.steps3 h3{font-size:22px;line-height:1.25}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.card{display:flex;flex-direction:column;gap:14px}
.card .ph{aspect-ratio:3/2}
.card h3{font-size:24px;margin-top:6px}
.card p{color:var(--gray-ink);font-size:16.5px}

.timeline{position:relative;display:grid;gap:0;margin-top:clamp(40px,5vw,64px);counter-reset:t}
.timeline::before{content:"";position:absolute;left:43px;top:30px;bottom:30px;width:2px;background:linear-gradient(var(--red),rgba(209,34,41,.15))}
.tl{display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,1.4fr);gap:clamp(18px,3vw,40px);align-items:start;padding:28px 0;border-bottom:1px solid var(--line)}
.tl:last-child{border-bottom:0}
.tl .ico{position:relative;width:88px;height:88px;border-radius:50%;background:var(--red);border:4px solid #fff;box-shadow:0 0 0 2px var(--red);display:grid;place-items:center}
.tl .ico img,.tl .ico .dots{width:58px;height:58px;object-fit:contain}
/* dot-matrix digits: the squares light up one after another when the digit scrolls into view */
.dots{display:block;overflow:visible}
.dots rect{transform-box:fill-box;transform-origin:center}
.js .dots rect{opacity:0}
.js .dots.in rect{animation:dot .32s var(--ease) both;animation-delay:calc(var(--i) * (.62s / var(--n)))}
@keyframes dot{from{opacity:0;transform:scale(.15)}to{opacity:1;transform:none}}
.tl h3{font-size:24px;padding-top:26px}
.tl .prose{padding-top:22px;color:var(--gray-ink)}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.reviews.masonry{display:block;columns:3 320px;column-gap:22px}
.reviews.masonry .rev{break-inside:avoid;margin-bottom:22px}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:18px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.rev:hover{transform:translateY(-4px);box-shadow:0 24px 40px -30px rgba(0,0,0,.35)}
.rev .who{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center}
.rev .who img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.rev .who b{display:block;font-family:var(--disp);font-size:19px;font-weight:700;line-height:1.2}
.rev .who small{display:block;font-size:13.5px;line-height:1.4;color:var(--gray-ink);margin-top:3px}
.stars{display:flex;gap:3px;color:var(--red)}
.stars svg{width:16px;height:16px}
.stars .off{color:var(--mist-2)}
.rev blockquote{font-size:16.5px;line-height:1.6;color:var(--ink)}

.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;margin-top:clamp(32px,4vw,48px)}
.price{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 30px;display:flex;flex-direction:column;gap:20px}
.price.hot{border:2px solid var(--red);box-shadow:0 30px 60px -36px rgba(209,34,41,.55)}
.price .ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:6px 16px;border-radius:999px;background:var(--red);color:#fff;font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.12em;white-space:nowrap}
.price .ribbon.ink{background:var(--ink)}
.price h3{font-size:22px;letter-spacing:.06em;color:var(--red-ink)}
.price .subh{font-family:var(--disp);font-size:20px;font-weight:600;margin-top:-12px}
.price .amt{display:flex;align-items:baseline;gap:8px;padding:18px 0;border-block:1px solid var(--line)}
.price .amt b{font-family:var(--disp);font-size:56px;font-weight:700;line-height:1;color:var(--ink)}
.price .amt span{font-family:var(--disp);font-size:18px;font-weight:600;color:var(--gray-ink)}
.price ul{list-style:none;display:grid;gap:10px;font-size:16px}
.price li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.price li::before{content:"";width:12px;height:7px;margin-top:7px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.price .btn{margin-top:auto;align-self:stretch}
.price .info{font-size:14.5px;line-height:1.5;color:var(--gray-ink);text-align:center}

.team{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:28px;justify-content:center}
.member{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.member .ph{border-radius:0;aspect-ratio:4/5}
.member .tx{padding:24px 26px 28px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.member b{font-family:var(--disp);font-size:24px;font-weight:700;line-height:1.15}
.member span{color:var(--gray-ink);margin-bottom:12px}

.bio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.bio .side{position:sticky;top:110px;display:grid;gap:18px}
.bio .side .ph{aspect-ratio:1}
.bio h3{font-size:26px;margin:40px 0 14px}
.awards{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.awards .imgs{display:grid;gap:18px}
.awards .imgs .ph{aspect-ratio:3/2}
.awards h3{font-size:26px;margin-bottom:16px}
.awards h3+.prose{margin-bottom:40px}

.coach{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));gap:24px;justify-content:center}
.coach a{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.coach .ph{aspect-ratio:1;width:100%;border-radius:50%}
.coach b{font-family:var(--disp);font-size:26px;font-weight:700}

/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative}
.form .full{grid-column:1/-1}
.fld{display:grid;gap:8px}
.fld label{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.fld input,.fld select,.fld textarea{font:inherit;font-size:17px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;width:100%;transition:border-color .25s,box-shadow .25s}
.fld textarea{min-height:150px;resize:vertical}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(209,34,41,.15)}
.fld [aria-invalid=true]{border-color:var(--red);background-color:#FFF5F5}
.err{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form .send{grid-column:1/-1}
.form .done{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;align-items:center;gap:14px;text-align:center;background:inherit}
.form.sent>*:not(.done){visibility:hidden}
.form.sent .done{display:flex}
.done svg{width:56px;height:56px;color:var(--red)}
.done h3{font-size:28px}
.formcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3.4vw,44px)}
.mist .formcard{border-color:transparent}

.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:start}
.infocard{background:var(--ink);color:#fff;border-radius:18px;padding:clamp(26px,3vw,40px);display:grid;gap:18px}
.infocard h3{color:#fff;font-size:22px}
.infocard p{color:rgba(255,255,255,.86)}
.infocard .prose a{color:var(--red-on-dark);background-image:linear-gradient(#fff,#fff)}
.infocard a{color:var(--red-on-dark);background:linear-gradient(#fff,#fff) 0 100%/100% 1px no-repeat;padding-bottom:1px}
.infocard a:hover{color:#fff}
.person{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.person .ph{aspect-ratio:1;border-radius:50%}
.socials{display:flex;flex-wrap:wrap;gap:10px}
.socials a{width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;transition:background .3s,transform .3s var(--ease)}
.socials a:hover{background:#fff;color:var(--red);transform:translateY(-2px)}
.socials svg{width:19px;height:19px;fill:currentColor}

/* blog */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(36px,4vw,52px)}
.chips a,.chips button{height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line);font-family:var(--disp);font-size:16px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;display:inline-flex;align-items:center;transition:background .3s,color .3s,border-color .3s}
.chips a:hover,.chips button:hover{border-color:var(--ink)}
.chips [aria-current],.chips [aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,34px)}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.post:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(0,0,0,.4)}
.post .ph{aspect-ratio:16/10;border-radius:0}
.post:hover .ph img{transform:scale(1.05)}
.post .tx{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--gray-ink)}
.meta .cat{font-family:var(--disp);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink)}
.meta i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}
.post h3{font-size:23px;line-height:1.2}
.post p{font-size:16px;color:var(--gray-ink)}
.post .more{margin-top:auto;padding-top:6px;font-family:var(--disp);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:15px;color:var(--red-ink);display:inline-flex;gap:8px;align-items:center}
.post .more svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.post:hover .more svg{transform:translateX(4px)}
.post[hidden]{display:none}

.post-hero .wrap{text-align:center;padding-bottom:clamp(120px,13vw,180px)}
.post-hero .cover{max-width:980px;margin:0 auto 40px;border-radius:18px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 40px 70px -40px rgba(0,0,0,.6)}
.post-hero .cover img{width:100%;height:100%;object-fit:cover}
.post-hero h1{font-size:clamp(32px,4.4vw,58px);text-transform:uppercase}
.byline{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px;margin-top:24px;font-size:16px;color:rgba(255,255,255,.92)}
.byline .au{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.byline .au img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.7)}
.byline i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}

.article{max-width:780px;margin:0 auto}
.article>*+*{margin-top:22px}
.article p{max-width:none}
.article h2,.article h3{font-size:clamp(24px,2.2vw,30px);margin-top:52px;text-transform:none}
.article figure img{border-radius:var(--r);width:100%}
.article figure{margin:40px 0}
.article figcaption{margin-top:10px;font-size:14.5px;color:var(--gray-ink)}
.article blockquote{margin:40px 0;padding:6px 0 6px 26px;border-left:4px solid var(--red);font-family:var(--disp);font-size:clamp(21px,1.9vw,26px);line-height:1.35;font-weight:500;color:var(--ink)}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--ink);margin:40px 0}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video button{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at center,rgba(209,34,41,.25),rgba(29,29,29,.85))}
.video button span{width:84px;height:84px;border-radius:50%;background:var(--red);display:grid;place-items:center;transition:transform .4s var(--ease)}
.video button:hover span{transform:scale(1.08)}
.video button svg{width:28px;height:28px;margin-left:5px;fill:#fff}
.video small{position:absolute;left:18px;bottom:14px;font-family:var(--disp);font-weight:600;letter-spacing:.06em;font-size:14px;color:rgba(255,255,255,.8)}
.article .formcard{margin-top:40px}
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:780px;margin:clamp(48px,6vw,72px) auto 0}
.pnav a{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;transition:border-color .3s,background .3s}
.pnav a:hover{border-color:var(--red);background:var(--mist)}
.pnav a.next{text-align:right;align-items:flex-end}
.pnav small{font-family:var(--disp);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red-ink);font-size:14px}
.pnav b{font-family:var(--disp);font-size:20px;font-weight:600;line-height:1.25}

.legal{display:grid;grid-template-columns:240px minmax(0,780px);gap:clamp(36px,5vw,80px);justify-content:center;align-items:start}
.toc{position:sticky;top:110px}
.toc p{font-family:var(--disp);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:var(--gray-ink);margin-bottom:12px}
.toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--line);font-size:15px;line-height:1.4;color:var(--gray-ink);transition:color .25s,border-color .25s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);font-weight:600;border-color:var(--red)}
.legal .article h3{scroll-margin-top:100px}
.version{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--mist);font-size:14.5px;color:var(--gray-ink)}
.shout{padding:18px 22px;border-radius:12px;background:var(--mist);border-left:4px solid var(--red);font-weight:600}

/* footer */
.ftr{position:relative;background:var(--ink);color:#fff;padding-top:max(clamp(90px,10vw,140px),calc(var(--h,60px) + 40px));margin-top:-1px}
@media (max-width:1059px){.ftr{padding-top:clamp(90px,10vw,140px)}}
.ftr .top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);padding-bottom:clamp(48px,6vw,72px)}
.ftr .top{align-items:center}
.ftr .brand{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.ftr .brand img{height:30px;width:auto}
.ftr .brand p{font-size:19px;color:rgba(255,255,255,.88)}
.ftr h2{color:#fff;font-size:clamp(26px,2.4vw,34px);text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.news{display:grid;gap:10px;margin-top:18px}
.news label{font-size:15px;color:rgba(255,255,255,.8)}
.news .row{display:flex;gap:10px}
.news input{flex:1;min-width:0;height:50px;border-radius:999px;border:0;padding:0 20px;font:inherit;font-size:16px}
.news input[aria-invalid=true]{box-shadow:0 0 0 2px var(--red)}
.news.sent .row{display:none}
.news .ok{display:none;color:#fff;font-weight:600}
.news.sent .ok{display:block}
.ftr .socials{margin-top:24px}
.ftr .addr{margin-top:22px;font-size:15.5px;color:rgba(255,255,255,.82)}
.ftr .addr a{color:var(--red-on-dark);background:linear-gradient(#fff,#fff) 0 100%/100% 1px no-repeat;padding-bottom:1px}
.ftr .addr a:hover{color:#fff}
.ftr .bar{background:var(--red)}
.ftr .bar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding-top:14px;padding-bottom:14px;font-family:var(--disp);font-weight:600;font-size:14.5px;letter-spacing:.08em}
.ftr .bar nav{display:flex;gap:18px}
.ftr .bar nav a,.ftr .bar nav button{text-transform:none;letter-spacing:.04em;font:inherit;color:#fff}
.ftr .bar nav button:hover{text-decoration:underline}
.ftr .bar nav a:hover{text-decoration:underline}
.ftr .credit{font-family:var(--f);font-weight:400;letter-spacing:.01em;font-size:13.5px;color:rgba(255,255,255,.88)}
.ftr .credit a{color:#fff;text-decoration:underline}

.totop{position:fixed;right:20px;bottom:20px;z-index:40;width:50px;height:50px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--ink)}
.totop svg{width:18px;height:18px}

/* phones: call / WhatsApp / mail bar after the first screen */
.qbar{display:none}
@media (max-width:820px){
  .qbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:42;display:flex;gap:8px;padding:6px;border-radius:999px;background:#fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.5),0 0 0 1px var(--line);transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom)));visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
  .qb-on .qbar{transform:none;visibility:visible;transition:transform .5s var(--ease)}
  .menu-open .qbar{transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom)));visibility:hidden}
  .qbar .btn{flex:1;height:48px;padding:0 14px;font-size:15.5px;gap:8px}
  .qbar .btn svg{width:19px;height:19px;fill:currentColor}
  .btn-ink{background:var(--ink);color:#fff;--fill:var(--red)}
  .qmail{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--mist);transition:background .3s,color .3s}
  .qmail:hover{background:var(--ink);color:#fff}
  .qmail svg{width:20px;height:20px;fill:currentColor}
  .totop{bottom:calc(20px + env(safe-area-inset-bottom))}
  .qb-on .totop{bottom:calc(84px + env(safe-area-inset-bottom))}
  .totop{transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s,bottom .5s var(--ease)}
  .ftr .bar{padding-bottom:calc(136px + env(safe-area-inset-bottom))} /* room for the floating bar and back-to-top at the very end */
}

/* reveal */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-st>*{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv-st.in>*{opacity:1;transform:none}
.js .rv-st.in>*:nth-child(2){transition-delay:.08s}.js .rv-st.in>*:nth-child(3){transition-delay:.16s}
.js .rv-st.in>*:nth-child(4){transition-delay:.24s}.js .rv-st.in>*:nth-child(5){transition-delay:.32s}
.js .rv-st.in>*:nth-child(6){transition-delay:.4s}.js .rv-st.in>*:nth-child(n+7){transition-delay:.48s}
.js .hero .ani{opacity:0;transform:translateY(22px);animation:up .9s var(--ease) forwards}
.js .hero .ani.d1{animation-delay:.1s}.js .hero .ani.d2{animation-delay:.22s}.js .hero .ani.d3{animation-delay:.34s}.js .hero .ani.d4{animation-delay:.46s}
@keyframes up{to{opacity:1;transform:none}}
@keyframes kid{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-st>*,.js .hero .ani,.js .home-hero .kid img{opacity:1;transform:none;animation:none;transition:none}
  .js .home-hero .unroll{display:none}
  .js .dots rect,.js .dots.in rect{opacity:1;transform:none;animation:none}
  .hdr,.qbar,.totop{transition:none}
  .btn::before,.ph img{transition:none}
}

@media (max-width:1100px){
  .nav>a:not(.btn),.nav .dd,.nav .btn{display:none}
  .burger{display:block}
  .split,.bio,.awards,.contact,.legal{grid-template-columns:1fr}
  .split .side,.bio .side,.toc{position:static}
  .bio .side{max-width:460px}
  .prices{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto;gap:34px}
  .reviews{grid-template-columns:1fr 1fr}
  .posts{grid-template-columns:1fr 1fr}
  .toc{padding:20px 22px;border:1px solid var(--line);border-radius:14px}
}
@media (max-width:820px){
  .home-hero .wrap{grid-template-columns:1fr;min-height:0}
  .home-hero .copy{order:-1;padding-top:24px;padding-bottom:20px;text-align:center}
  .home-hero .copy p{margin-left:auto;margin-right:auto}
  .home-hero .kid img{max-width:420px}
  .gallery,.cards3,.steps3,.posts,.reviews,.team{grid-template-columns:1fr}
  .gallery{gap:12px}
  .tl{grid-template-columns:64px minmax(0,1fr)}
  .tl .ico{width:64px;height:64px}.tl .ico img,.tl .ico .dots{width:42px;height:42px}
  .tl h3{padding-top:14px}
  .tl .prose{grid-column:2;padding-top:0}
  .timeline::before{left:31px}
  .form{grid-template-columns:1fr}
  .ftr .top{grid-template-columns:1fr}
  .pnav{grid-template-columns:1fr}
  .pnav a.next{text-align:left;align-items:flex-start}
}
@media (max-width:560px){
  body{font-size:16.5px}
  :root{--hh:70px}
  .logo img{height:24px}
  .news .row{flex-direction:column}
  .news input{flex:none}
  .news .row .btn{width:100%}
  .ftr .bar .wrap{justify-content:center;text-align:center}
}

/* cookie notice */
.btn-ghost-dark{border:1.5px solid var(--line);color:var(--ink);--fill:var(--ink)}
.btn-ghost-dark:hover{color:#fff}
.ck-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;max-width:980px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.45);padding:20px 22px;display:flex;gap:16px 24px;align-items:center;animation:ckin .6s var(--ease) both}
.ck-bar[hidden],.ck-modal[hidden]{display:none}
.ck-bar p{font-size:14.5px;line-height:1.5;color:var(--ink);max-width:none}
.ck-btns{display:flex;gap:10px;flex:none;flex-wrap:wrap}
@keyframes ckin{from{opacity:0;transform:translateY(20px)}}
.ck-modal{position:fixed;inset:0;z-index:80;background:rgba(29,29,29,.6);display:grid;place-items:center;padding:16px}
.ck-card{position:relative;background:#fff;border-radius:18px;max-width:640px;width:100%;max-height:calc(100svh - 32px);overflow:auto;padding:30px clamp(20px,3vw,34px)}
.ck-card h2{font-size:26px;margin-bottom:12px;padding-right:40px}
.ck-intro{font-size:15px;color:var(--gray-ink)}
.ck-cats{margin:20px 0 22px;border-top:1px solid var(--line)}
.ck-cat{padding:14px 0;border-bottom:1px solid var(--line)}
.ck-cat p{font-size:14px;color:var(--gray-ink);margin-top:6px}
.ck-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.ck-row b{font-family:var(--disp);font-size:18px}
.ck-always{font-size:13px;font-weight:600;color:var(--red-ink)}
.ck-sw{position:relative;width:46px;height:26px;flex:none}
.ck-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.ck-sw span{position:absolute;inset:0;border-radius:99px;background:var(--mist-2);transition:background .25s}
.ck-sw span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s var(--ease)}
.ck-sw input:checked+span{background:var(--red)}
.ck-sw input:checked+span::after{transform:translateX(20px)}
.ck-sw input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.ck-x{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--mist)}
.ck-x svg{width:14px;height:14px}
/* package chosen on Varaa: the select flashes so it is obvious what was filled in */
.fld select.flash{animation:flash 1.6s var(--ease) 2}
@keyframes flash{50%{border-color:var(--red);box-shadow:0 0 0 4px rgba(209,34,41,.2)}}
@media (max-width:700px){.ck-bar{flex-direction:column;align-items:stretch}.ck-btns .btn{flex:1}}
@media (max-width:820px){.home-hero .kid{margin:0 0 -2px}.home-hero .kid img{width:100%;margin:0 auto;max-width:460px}}
#lomake{scroll-margin-top:100px}