/* ============================================================
   Bali Bali — Tradycyjny masaż balijski · Gdańsk
   Cinematic scroll homepage. Palette: deep green / gold / cream.
   Fonts: Cormorant Garamond (display) + Jost (text).
   ============================================================ */

:root{
  --green-deep:#0b1812;   /* page background */
  --green:#11241b;        /* scene B / dark sections */
  --green-mid:#16301f;    /* headings on light, dark btn hover */
  --green-black:#070f0a;  /* letterbox bars */
  --cream:#f6efe1;        /* primary text on dark */
  --cream-bg:#fffdf8;     /* light section background */
  --cream-chip:#f1ead8;   /* chips / icon pills */
  --line:#ece3cf;         /* hairlines on light */
  --gold:#c2a15e;         /* primary gold */
  --gold-light:#e7d6ab;   /* bright gold (accents, italics) */
  --gold-deep:#a9863f;    /* deep gold */
  --gold-soft:#d4b87e;    /* soft gold (numbers, meta) */
  --ink:#241f18;          /* body text on light */
  --muted:#6a6151;        /* secondary text on light */
  --faint:#8a8170;        /* footer fine print */
  --serif:'Cormorant Garamond',serif;
  --sans:'Jost',system-ui,sans-serif;
  --pad-x:clamp(20px,5vw,56px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--green-deep);font-family:var(--sans);color:var(--cream);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block}

/* ---------- keyframes ---------- */
@keyframes kc-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes kc-drift{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.8}90%{opacity:.6}100%{transform:translateY(-120vh) translateX(40px);opacity:0}}
@keyframes kc-pulse{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(1)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes kc-cue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(9px);opacity:1}}
@keyframes kc-breathe{0%,100%{box-shadow:0 18px 40px -16px rgba(169,134,63,.7),0 0 0 0 rgba(212,184,126,.5)}50%{box-shadow:0 26px 56px -18px rgba(169,134,63,.95),0 0 0 22px rgba(212,184,126,0)}}
@keyframes bb-rise{from{transform:translateY(26px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important}}

/* ---------- shared bits ---------- */
.eyebrow{font-weight:500;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;display:inline-block}
.eyebrow--gold{color:var(--gold)}
.eyebrow--deep{color:var(--gold-deep)}
.stars{color:var(--gold-light);letter-spacing:2px}
.stars--sm{font-size:.9rem}

.btn{font-weight:500;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em;border-radius:100px;font-size:.86rem;line-height:1;transition:background .25s,border-color .25s,color .25s}
.btn__arrow{width:16px;height:16px;flex:0 0 auto}
.btn--gold{padding:1.05em 2em;background:var(--gold);color:var(--green)}
.btn--gold:hover{background:var(--gold-light)}
.btn--ghost{padding:1.05em 2em;border:1px solid rgba(255,255,255,.4);color:#fff}
.btn--ghost:hover{border-color:var(--gold-light);color:var(--gold-light)}
.btn--breathe{animation:kc-breathe 3.4s ease-in-out infinite}
.btn--dark{font-size:.82rem;letter-spacing:.1em;padding:1.05em 2.2em;background:var(--green);color:var(--cream)}
.btn--dark:hover{background:var(--green-mid)}
.btn--dark .btn__arrow{width:15px;height:15px}

.link-arrow{display:inline-flex;align-items:center;gap:.5em;margin-top:1.9em;font-size:.84rem;font-weight:500;letter-spacing:.06em;color:var(--gold-deep);transition:color .25s}
.link-arrow:hover{color:var(--green-mid)}
.link-arrow__svg{width:15px;height:15px}

/* reveal: content is always visible; entrance is a transform-only flourish */
[data-reveal]{will-change:transform}

/* ---------- progress rail ---------- */
.progress-rail{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:rgba(255,255,255,.06)}
.progress-bar{height:100%;width:0;transform-origin:left;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));box-shadow:0 0 14px rgba(212,184,126,.7)}

/* ---------- nav ---------- */
.nav{position:fixed;top:3px;left:0;right:0;z-index:110;transform:translateY(-110%);transition:transform .5s cubic-bezier(.2,.7,.2,1);background:rgba(8,17,11,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 40px -24px rgba(0,0,0,.8)}
.nav.is-visible{transform:translateY(0)}
.nav__inner{max-width:1280px;margin:0 auto;padding:16px var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__brand{display:flex;flex-direction:column;line-height:1}
.nav__brand-name{font-family:var(--serif);font-weight:700;font-size:1.45rem;letter-spacing:.01em;color:#fff}
.nav__brand-sub{font-size:.5rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold-soft);margin-top:3px}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px)}
.nav__link{font-size:.8rem;letter-spacing:.08em;white-space:nowrap;color:rgba(246,239,225,.86);transition:color .25s}
.nav__link:hover{color:var(--gold-light)}
.nav__cta{font-size:.76rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:.8em 1.5em;border-radius:100px;background:var(--gold);color:var(--green);white-space:nowrap;transition:background .25s}
.nav__cta:hover{background:var(--gold-light)}
.nav__toggle{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.nav__toggle span{display:block;width:22px;height:2px;background:var(--cream);border-radius:2px;transition:transform .3s,opacity .3s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   SCENE A — cinematic intro
   ============================================================ */
.hero{position:relative;height:300vh}
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}

.hero__bg{position:absolute;inset:0;will-change:transform;transform:scale(1.55)}
.hero__bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__bg-radial{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 18%,rgba(47,94,68,.28),rgba(11,24,18,.55) 60%,rgba(11,24,18,.85) 100%)}
.hero__sun{position:absolute;left:50%;top:24%;width:60vh;height:60vh;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(231,214,171,.55),rgba(231,214,171,0) 62%);animation:kc-pulse 7s ease-in-out infinite}
.hero__bg-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,24,18,.45),rgba(11,24,18,.15) 38%,rgba(11,24,18,.8))}
.hero__petal{position:absolute;bottom:-20px;border-radius:50%;animation-name:kc-drift;animation-timing-function:linear;animation-iteration-count:infinite}

.hero__bar{position:absolute;left:0;right:0;height:14vh;background:var(--green-black);z-index:30}
.hero__bar--top{top:0;transform:translateY(-100%)}
.hero__bar--bot{bottom:0;transform:translateY(100%)}

.hero__mark{position:absolute;z-index:25;text-align:center;will-change:transform,opacity}
.hero__wordmark{font-family:var(--serif);font-weight:600;font-size:clamp(3.4rem,13vw,11rem);line-height:.9;letter-spacing:.01em;white-space:nowrap;background:linear-gradient(100deg,#a9863f 18%,#fff6dd 44%,#e7d6ab 52%,#a9863f 74%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:kc-shimmer 5s linear infinite}
.hero__tag{margin-top:.4em;font-weight:500;font-size:clamp(.7rem,1.4vw,.95rem);letter-spacing:.42em;text-transform:uppercase;color:var(--gold-light)}

.hero__head{position:relative;z-index:26;width:min(1100px,90vw);text-align:center;opacity:0;will-change:opacity}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.7em;font-weight:500;font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-light);opacity:0}
.hero__eyebrow-line{width:30px;height:1px;background:var(--gold)}
.hero__title{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,7vw,6rem);line-height:1.04;margin:.34em 0 .1em;color:#fff}
.hero__line{display:block;overflow:hidden;padding-bottom:.04em}
.hero__word{display:inline-block;transform:translateY(115%)}
.hero__word--italic{font-style:italic;color:var(--gold-light)}
.hero__lead{max-width:54ch;margin:1.1em auto 0;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.7;color:rgba(246,239,225,.82);opacity:0;transform:translateY(26px)}
.hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:2em;opacity:0;transform:translateY(26px)}

.hero__cue{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);z-index:28;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--gold-light)}
.hero__cue-label{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase}
.hero__cue-arrow{animation:kc-cue 1.8s ease-in-out infinite}
.hero__cue-arrow svg{width:22px;height:22px;display:block}

/* ============================================================
   SCENE B — horizontal rituals
   ============================================================ */
.rituals{position:relative;height:340vh;background:var(--green)}
.rituals__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.rituals__heading{position:absolute;top:8vh;left:0;right:0;text-align:center;z-index:5}
.rituals__title{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.4vw,3.4rem);color:#fff;margin-top:.2em}
.rituals__track{position:absolute;top:0;left:0;height:100vh;display:flex;align-items:center;gap:clamp(20px,3vw,44px);padding-left:6vw;will-change:transform}

.ritual{flex:0 0 auto;width:clamp(280px,30vw,440px);height:62vh;border-radius:24px;overflow:hidden;position:relative;border:1px solid rgba(212,184,126,.2);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.ritual--green1{background:linear-gradient(160deg,#244a36,#0c1d14)}
.ritual--green2{background:linear-gradient(160deg,#2f5e44,#11241b)}
.ritual--clay{background:linear-gradient(160deg,#a4502f,#5a2a18);border-color:rgba(212,184,126,.25)}
.ritual--green3{background:linear-gradient(160deg,#1d3c2b,#0b1812)}
.ritual__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ritual__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,24,18,.1) 30%,rgba(11,24,18,.62) 62%,rgba(8,17,11,.94))}
.ritual__body{position:absolute;inset:0;padding:38px;display:flex;flex-direction:column;justify-content:flex-end}
.ritual__no{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft)}
.ritual__no--light{color:var(--gold-light)}
.ritual__name{font-family:var(--serif);font-weight:600;font-size:2rem;color:#fff;margin:.18em 0 .3em}
.ritual__desc{font-size:.94rem;color:rgba(246,239,225,.78);line-height:1.6}
.ritual__desc--bright{color:rgba(246,239,225,.82)}
.ritual__price{font-family:var(--serif);font-size:1.7rem;color:var(--gold-light);margin-top:18px}

.rituals__outro{flex:0 0 auto;width:34vw;height:62vh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding-right:6vw}
.rituals__outro-text{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(1.6rem,3vw,2.6rem);color:var(--gold-light);line-height:1.2}
.rituals__outro .btn{align-self:flex-start;font-size:.82rem;padding:1em 1.9em}

/* ============================================================
   O NAS
   ============================================================ */
.about{background:var(--cream-bg);color:var(--ink);padding:clamp(72px,10vw,140px) var(--pad-x)}
.about__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(40px,6vw,84px);align-items:center}
.about__media{position:relative}
.about__media-frame{border-radius:20px;overflow:hidden;box-shadow:0 50px 90px -50px rgba(22,48,31,.6)}
.about__img{width:100%;height:clamp(380px,46vw,560px);object-fit:cover}
.about__badge{position:absolute;bottom:-26px;right:-12px;background:var(--green);color:var(--cream);border-radius:16px;padding:22px 26px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.about__badge-num{font-family:var(--serif);font-weight:700;font-size:2.4rem;line-height:1;color:var(--gold-light)}
.about__badge-label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,239,225,.7);margin-top:6px}
.about__title{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.1;color:var(--green-mid);margin:.28em 0 .55em;max-width:16ch}
.about__p{font-size:1.06rem;line-height:1.78;color:var(--muted);max-width:54ch}
.about__p--gap{margin-top:1.1em}
.about__chips{display:flex;flex-wrap:wrap;gap:14px;margin-top:2em}
.chip{display:inline-flex;align-items:center;gap:.55em;font-size:.84rem;color:var(--green-mid);padding:.7em 1.2em;border-radius:100px;background:var(--cream-chip)}
.chip__mark{color:var(--gold-deep)}

/* ============================================================
   DLACZEGO MY
   ============================================================ */
.why{background:var(--green);padding:clamp(72px,10vw,130px) var(--pad-x)}
.why__inner{max-width:1180px;margin:0 auto}
.why__head{text-align:center;margin-bottom:60px}
.why__title{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.2vw,3.2rem);color:#fff;margin-top:.22em}
.why__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,2.5vw,34px)}
.value{display:flex;flex-direction:column;gap:14px;padding:34px 30px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(212,184,126,.16)}
.value__no{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--gold)}
.value__title{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:#fff;line-height:1.15}
.value__desc{font-size:.92rem;line-height:1.65;color:rgba(246,239,225,.72)}

/* ============================================================
   OPINIE
   ============================================================ */
.reviews{position:relative;overflow:hidden;background:var(--green-deep);padding:clamp(72px,10vw,130px) var(--pad-x)}
.reviews__bg{position:absolute;inset:0}
.reviews__bg-img{width:100%;height:100%;object-fit:cover;opacity:.28}
.reviews__bg-veil{position:absolute;inset:0;background:linear-gradient(180deg,#0b1812,rgba(11,24,18,.82) 30%,rgba(11,24,18,.82) 70%,#0b1812)}
.reviews__inner{position:relative;z-index:2;max-width:1180px;margin:0 auto}
.reviews__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:48px}
.reviews__title{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.2vw,3.2rem);color:#fff;margin-top:.2em}
.reviews__rating{display:flex;align-items:center;gap:12px}
.reviews__score{font-family:var(--serif);font-weight:700;font-size:2.6rem;color:var(--gold-light);line-height:1}
.reviews__count{font-size:.78rem;color:rgba(246,239,225,.7);margin-top:2px}
/* opinie jako płynny marquee (poziomy, bezszwowa pętla, pauza na hover) */
.reviews__marq{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.reviews__track{display:flex;width:max-content;animation:reviews-marq 42s linear infinite}
.reviews__marq:hover .reviews__track{animation-play-state:paused}
.reviews__track .review{flex:0 0 clamp(280px,72vw,360px);margin-right:clamp(18px,2vw,26px)}
@keyframes reviews-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.reviews__track{animation:none}}
.review{display:flex;flex-direction:column;gap:14px;padding:30px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(212,184,126,.18)}
.review__text{font-size:1rem;line-height:1.65;color:rgba(246,239,225,.9)}
.review__meta{margin-top:auto;font-size:.82rem;color:var(--gold-soft)}

/* ============================================================
   KONTAKT
   ============================================================ */
.contact{background:var(--cream-bg);color:var(--ink);padding:clamp(72px,10vw,140px) var(--pad-x)}
.contact__grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(40px,6vw,80px);align-items:center}
.contact__title{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.1;color:var(--green-mid);margin:.28em 0 .5em;max-width:14ch}
.contact__lead{font-size:1.04rem;line-height:1.75;color:var(--muted);max-width:46ch}
.contact__rating{display:flex;align-items:center;gap:12px;margin-top:1.4em}
.contact__rating-text{font-size:.9rem;color:var(--muted)}
.contact__rating-text b{color:var(--green-mid);font-weight:600}
.contact__rows{display:flex;flex-direction:column;gap:18px;margin-top:2.2em}
.contact__row{display:flex;align-items:flex-start;gap:14px}
.contact__icon{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--cream-chip);color:var(--gold-deep)}
.contact__icon svg{width:18px;height:18px}
.contact__row-title{font-weight:500;color:var(--green-mid)}
.contact__row-sub{font-size:.9rem;color:var(--muted)}
.contact__media{border-radius:20px;overflow:hidden;box-shadow:0 50px 90px -50px rgba(22,48,31,.6);min-height:340px}
.contact__img{width:100%;height:100%;min-height:340px;object-fit:cover}
/* przycisk nie może przyklejać się do wiersza z telefonem nad nim (desktop też) */
.contact__info .btn--dark{margin-top:clamp(28px,3.2vw,38px)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--cream-bg);color:var(--ink);font-family:var(--sans);padding:clamp(40px,5vw,60px) var(--pad-x);border-top:1px solid var(--line)}
.footer__inner{max-width:1280px;margin:0 auto}
.footer__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.footer__brand{font-family:var(--serif);font-weight:700;font-size:1.7rem;color:var(--green-mid)}
.footer__brand-sub{font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-deep);margin-top:4px}
.footer__contact{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}
.footer__social{display:flex;gap:10px}
.footer__social-link{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid #d8cdb2;color:var(--gold-deep);transition:all .3s ease}
.footer__social-link:hover{background:var(--green);border-color:var(--green);color:var(--gold-light)}
.footer__social-link svg{width:17px;height:17px}
.footer__bottom{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-size:.78rem;color:var(--faint)}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:720px){
  .nav__toggle{display:flex}
  .nav__links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad-x) 20px;background:rgba(8,17,11,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 24px 40px -24px rgba(0,0,0,.8);clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;transition:clip-path .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
  .nav__links.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .nav__link{padding:14px 0;border-bottom:1px solid rgba(212,184,126,.12)}
  .nav__cta{margin-top:16px;text-align:center}
  .about__badge{right:auto;left:0}
}
@media(max-width:540px){
  .ritual__body{padding:28px}
  .ritual__name{font-size:1.7rem}
  .rituals__outro{width:80vw}
}

/* ============================================================
   Mobile refinements — ALL rules below are scoped to @media only.
   Desktop (>720px) remains 1:1 unchanged.
   ============================================================ */
@media(max-width:720px){
  /* --- touch targets: comfortable ≥44px taps on interactive elements --- */
  .nav__toggle{width:44px;height:44px;margin-right:-8px}
  .nav__cta{padding:1.05em 1.5em;min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .btn{min-height:48px}
  .btn--gold,.btn--ghost{padding:1.1em 1.9em}
  .btn--dark{min-height:48px;padding:1.1em 2em}
  .footer__social-link{width:46px;height:46px}
  .link-arrow{padding:12px 0;margin-top:1.6em}

  /* --- hero: tighten so the headline/lead/CTA breathe on a phone --- */
  .hero__lead{font-size:1rem;line-height:1.6;max-width:42ch}
  .hero__cta{gap:12px;margin-top:1.6em}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
  .hero__eyebrow{font-size:.66rem;letter-spacing:.26em}

  /* --- rituals: lift card height a touch & keep heading clear of cards --- */
  .rituals__heading{top:6vh}
  .ritual{height:60vh}

  /* --- about: give the badge breathing room below the framed image --- */
  .about__media{margin-bottom:46px}
  .about__badge{bottom:-22px;padding:18px 22px}
  .about__badge-num{font-size:2rem}

  /* --- reviews: stack the header + rating left-aligned, no awkward gap --- */
  .reviews__head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:34px}
  .reviews__rating{gap:10px}

  /* --- contact: ensure the image keeps a sensible height when stacked --- */
  .contact__media{min-height:300px}
  .contact__img{min-height:300px}
  /* button must NOT crowd the phone/hours row above it — give it clear space */
  .contact .btn--dark{width:100%;justify-content:center;margin-top:28px}

  /* --- footer: stack cleanly, no cramped inline rows --- */
  .footer__top{flex-direction:column;align-items:flex-start;gap:20px}
  .footer__bottom{flex-direction:column;gap:6px}
}

/* ============================================================
   Mobile cinematic OFF — scroll-driven reveal / sticky scenes /
   letterbox montage / horizontal track caused black frames and
   scroll-jacking on phones. Below ≤768px we render every scene in
   normal flow, fully visible, scrolling like an ordinary page.
   JS engine is gated off on mobile (matchMedia) so it never writes
   inline transforms/opacity here. Desktop (>768px) is untouched.
   ============================================================ */
@media(max-width:768px){
  /* ---- SCENE A : hero becomes a normal, fully-visible section ---- */
  .hero{height:auto}
  .hero__stage{position:static;top:auto;height:auto;min-height:auto;overflow:visible;
    display:block;padding:calc(104px + env(safe-area-inset-top)) var(--pad-x) 64px}

  /* background image sits behind the content instead of a zoomed camera */
  .hero__bg{position:absolute;transform:none!important}
  .hero__bg-img{object-position:center}
  .hero__sun{display:none}

  /* cinematic-only chrome that produced the black bars / intro card — hide */
  .hero__bar{display:none}
  .hero__mark{display:none}
  .hero__cue{display:none}

  /* headline block: force the final, visible state (JS no longer drives it) */
  .hero__head{position:relative;z-index:26;opacity:1!important;width:100%;
    max-width:560px;margin:0 auto;text-align:center}
  .hero__eyebrow{opacity:1!important}
  .hero__line{overflow:visible}
  .hero__word{transform:none!important;display:inline}
  .hero__lead{opacity:1!important;transform:none!important}
  .hero__cta{opacity:1!important;transform:none!important}

  /* ---- SCENE B : rituals become a normal vertical stack ---- */
  .rituals{height:auto}
  .rituals__stage{position:static;top:auto;height:auto;overflow:visible;
    padding:clamp(56px,9vw,90px) var(--pad-x)}
  .rituals__heading{position:static;top:auto;margin-bottom:32px}
  .rituals__track{position:static;height:auto;display:flex;flex-direction:column;
    align-items:stretch;gap:22px;padding-left:0;transform:none!important;will-change:auto}
  .ritual{width:100%;height:auto;min-height:340px}
  .ritual__img{position:absolute}
  .rituals__outro{width:100%;height:auto;padding-right:0;align-items:center;
    text-align:center;gap:18px;padding-top:8px}
  .rituals__outro .btn{align-self:center}

  /* reveal elements: always visible (entrance flourish stays transform-only) */
  [data-reveal]{opacity:1}
}

@media(max-width:480px){
  /* --- trim oversized section padding to remove dead space on small phones --- */
  .about,.why,.reviews,.contact{padding-top:64px;padding-bottom:64px}
  .why__head{margin-bottom:42px}

  /* --- typography: keep big serif headings from feeling oversized/cramped --- */
  .hero__title{font-size:clamp(2.2rem,9vw,3rem)}
  .about__title,.why__title,.reviews__title,.contact__title{font-size:clamp(1.9rem,8vw,2.4rem)}
  .about__p{font-size:1rem}

  /* --- hero CTAs go full-width stacked for easy thumb taps --- */
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}

  /* --- value cards: a touch less padding so text isn't squeezed --- */
  .value{padding:28px 24px}
  .review{padding:26px}
}

/* ---------- formularz kontaktowy (rezerwacja telefoniczna) ---------- */
.contact__media--form{background:var(--green);padding:clamp(28px,3.4vw,44px);min-height:0}
.cform{display:flex;flex-direction:column;position:relative}
.cform__eyebrow{font-weight:500;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-soft)}
.cform__title{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--cream);margin:.4em 0 .35em}
.cform__sub{font-size:.92rem;line-height:1.65;color:rgba(246,239,225,.72);margin-bottom:22px}
.cform__field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.cform__label{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);font-weight:500}
.cform__label em{font-style:normal;text-transform:none;letter-spacing:.02em;color:rgba(246,239,225,.45)}
.cform__input{width:100%;padding:13px 16px;border-radius:12px;border:1px solid rgba(231,214,171,.25);background:rgba(7,15,10,.45);color:var(--cream);font-family:var(--sans);font-size:.95rem;transition:border-color .25s,background .25s;-webkit-appearance:none;appearance:none}
.cform__input::placeholder{color:rgba(246,239,225,.35)}
.cform__input:focus{outline:none;border-color:var(--gold);background:rgba(7,15,10,.65)}
.cform__textarea{resize:vertical;min-height:84px;line-height:1.55}
.cform__submit{justify-content:center;width:100%;margin-top:6px;border:0;cursor:pointer;font-family:var(--sans)}
.cform__note{margin-top:14px;font-size:.8rem;color:rgba(246,239,225,.5);text-align:center}
.cform__done{position:absolute;inset:-6px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--green);opacity:0;pointer-events:none;transition:opacity .45s}
.cform.is-sent .cform__done{opacity:1;pointer-events:auto}
.cform__done-mark{font-size:1.5rem;color:var(--gold);margin-bottom:10px}
.cform__done-title{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--cream);margin-bottom:8px}
.cform__done-text{font-size:.92rem;color:rgba(246,239,225,.72);max-width:30ch;line-height:1.6}
@media(max-width:720px){
  .contact__media--form{padding:26px 20px}
  .cform__input{font-size:16px}
}

/* ================= PODSTRONY ================= */
.footer__nav{display:flex;gap:20px;flex-wrap:wrap}
.footer__nav a{font-size:.86rem;letter-spacing:.05em;color:var(--muted);transition:color .25s}
.footer__nav a:hover{color:var(--gold-deep)}

.subhero{position:relative;background:var(--green-deep);padding:calc(96px + clamp(36px,6vw,72px)) var(--pad-x) clamp(52px,7vw,88px);overflow:hidden}
.subhero__glow{position:absolute;right:-12%;top:-40%;width:64%;height:170%;background:radial-gradient(closest-side,rgba(194,161,94,.15),transparent 70%);pointer-events:none}
.subhero__inner{max-width:1180px;margin:0 auto;position:relative;z-index:2}
.subhero__crumb{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft)}
.subhero__crumb a:hover{color:var(--gold-light)}
.subhero__title{font-family:var(--serif);font-weight:600;font-size:clamp(2.3rem,5.2vw,3.9rem);line-height:1.06;color:var(--cream);margin:.35em 0 .4em;max-width:20ch}
.subhero__title em{font-style:italic;color:var(--gold-light)}
.subhero__lead{font-size:1.02rem;line-height:1.7;color:rgba(246,239,225,.75);max-width:58ch}

.spage{background:var(--cream-bg);color:var(--ink);padding:clamp(60px,8vw,110px) var(--pad-x)}
.spage--alt{background:#faf6ea}
.spage__inner{max-width:1180px;margin:0 auto}
.spage__head{max-width:660px;margin-bottom:clamp(32px,5vw,52px)}
.spage__title{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,3.5vw,2.5rem);line-height:1.12;color:var(--green-mid);margin:.3em 0 .4em}
.spage__lead{font-size:1rem;line-height:1.7;color:var(--muted)}

/* karty rytualow */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(22px,3vw,34px)}
.rcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -42px rgba(22,48,31,.45);display:flex;flex-direction:column}
.rcard__media{position:relative;aspect-ratio:3/2;overflow:hidden}
.rcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rcard:hover .rcard__media img{transform:scale(1.045)}
.rcard__no{position:absolute;top:14px;left:14px;background:rgba(7,15,10,.55);backdrop-filter:blur(6px);color:var(--gold-light);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;padding:.6em 1.1em;border-radius:100px}
.rcard__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.rcard__name{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--green-mid)}
.rcard__desc{font-size:.93rem;line-height:1.62;color:var(--muted);flex:1}
.rcard__meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px}
.rcard__time{font-size:.8rem;letter-spacing:.06em;color:var(--muted)}
.rcard__price{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--gold-deep)}

/* cennik */
.pgroup{margin-bottom:clamp(34px,5vw,54px)}
.pgroup:last-of-type{margin-bottom:0}
.pgroup__title{font-family:var(--serif);font-weight:600;font-size:1.55rem;color:var(--green-mid);margin-bottom:4px}
.pgroup__sub{font-size:.9rem;color:var(--muted);margin-bottom:16px}
.ptable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -46px rgba(22,48,31,.4)}
.ptable th{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;text-align:left;padding:15px 22px;border-bottom:1px solid var(--line);background:var(--cream-chip)}
.ptable th.num,.ptable td.num{text-align:right;white-space:nowrap}
.ptable td{padding:15px 22px;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink);vertical-align:top}
.ptable tr:last-child td{border-bottom:0}
.ptable .nm{font-weight:500;color:var(--green-mid)}
.ptable .ds{display:block;font-size:.82rem;color:var(--muted);margin-top:3px;font-weight:400}
.ptable .num b{font-family:var(--serif);font-size:1.05rem;color:var(--gold-deep);font-weight:700}
.pnote{font-size:.88rem;color:var(--muted);margin-top:14px}
.pnote a{color:var(--gold-deep);border-bottom:1px solid currentColor}

/* media + tekst */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(34px,6vw,70px);align-items:center}
.duo__media{border-radius:20px;overflow:hidden;box-shadow:0 50px 90px -50px rgba(22,48,31,.6)}
.duo__media img{width:100%;display:block}
.duo__title{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.14;color:var(--green-mid);margin:.3em 0 .45em}
.duo__p{font-size:.98rem;line-height:1.75;color:var(--muted);margin-bottom:1em}
.duo__p b{color:var(--green-mid);font-weight:600}
.duo__p:last-child{margin-bottom:0}

/* pasek CTA podstron */
.subcta{background:var(--green);padding:clamp(52px,8vw,92px) var(--pad-x);text-align:center}
.subcta__title{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--cream);margin:.3em 0 .5em}
.subcta__lead{color:rgba(246,239,225,.72);max-width:54ch;margin:0 auto 28px;line-height:1.7}
.subcta__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* kroki (vouchery) */
.steps{counter-reset:st;display:flex;flex-direction:column;gap:16px;margin:20px 0 8px;list-style:none;padding:0}
.steps li{position:relative;padding-left:54px;font-size:.96rem;line-height:1.6;color:var(--muted)}
.steps li b{color:var(--green-mid)}
.steps li::before{counter-increment:st;content:"0" counter(st);position:absolute;left:0;top:1px;width:38px;height:38px;border-radius:50%;background:var(--cream-chip);color:var(--gold-deep);font-weight:600;font-size:.8rem;display:grid;place-items:center;letter-spacing:.04em}

@media(max-width:720px){
  .subhero{padding-top:118px}
  .ptable th,.ptable td{padding:12px 14px}
  .footer__nav{gap:14px}
  .subcta__row .btn{width:100%;justify-content:center}
}

.nav__link--active{color:var(--gold-light)}

/* ---------- dzwoniacy telefon przy rezerwacji + kotwica formularza ---------- */
@keyframes bb-ring{0%,100%{transform:rotate(0)}8%{transform:rotate(13deg)}16%{transform:rotate(-11deg)}24%{transform:rotate(9deg)}32%{transform:rotate(-7deg)}40%{transform:rotate(4deg)}48%{transform:rotate(0)}}
.ring-badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(194,161,94,.16);border:1px solid rgba(231,214,171,.3);margin-bottom:12px}
.ring-badge svg{width:18px;height:18px;color:var(--gold-light);animation:bb-ring 2.4s ease-in-out infinite;transform-origin:50% 15%}
#formularz{scroll-margin-top:100px}