/* ═══════════════════════════════════════════════════════════
   Finezja — Sala Bankietowo-Konferencyjna
   Visual world: warm ivory, espresso dark, muted antique gold.
   Editorial serif display + quiet geometric sans for UI.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ivory:      #F7F3EA;
  --ivory-2:    #EFE7D9;
  --cream:      #FCFAF6;
  --espresso:   #17130F;
  --espresso-2: #221C16;
  --ink:        #2B2419;
  --muted:      #6E6455;
  /* #8C8272 came to 3.42:1 on ivory — below AA for the 13px captions it carries */
  --muted-2:    #726A5A;
  --gold:       #A5854F;   /* accents and hairlines only: 3.46:1, never under text */
  --gold-lt:    #C9AC79;
  --gold-dk:    #7E6437;
  /* the solid CTA needs white text to clear 4.5:1, which --gold cannot do */
  --gold-btn:   #8A6C40;

  --on-dark:      #F4EFE5;
  --on-dark-soft: #BEB4A4;

  --line-dark:  rgba(244,239,229,.16);
  --line-light: rgba(23,19,15,.13);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gut:  clamp(1.15rem, 5vw, 5rem);
  --maxw: 1360px;

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.965rem + .16vw,1.0625rem);
  font-weight:300;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,svg{ display:block; max-width:100%; }
img{ height:auto; }

/* ── browser surfaces ───────────────────────────────────── */
::selection{ background:var(--gold); color:#fff; }
:root{ scrollbar-color:var(--gold-dk) var(--ivory-2); scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--ivory-2); }
::-webkit-scrollbar-thumb{ background:#C2B49B; border:3px solid var(--ivory-2); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:1px;
}
.section--dark :where(a,button,input,select,textarea):focus-visible{ outline-color:var(--gold-lt); }

input,textarea,select{ caret-color:var(--gold); font:inherit; color:inherit; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.24em; }

.skip{
  position:fixed; top:.6rem; left:.6rem; z-index:300;
  background:var(--espresso); color:var(--on-dark); padding:.75rem 1.1rem;
  font-size:.875rem; letter-spacing:.06em; text-decoration:none;
  transform:translateY(-180%); transition:transform .3s var(--e-out);
}
.skip:focus{ transform:none; }

/* ── layout ─────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ position:relative; padding-block:clamp(4.5rem,10vw,9.5rem); }
.section--dark{ background:var(--espresso); color:var(--on-dark); }
.section--cream{ background:var(--cream); }

/* ── type ───────────────────────────────────────────────── */
.h2{
  font-family:var(--serif);
  font-size:clamp(2.2rem,1.25rem + 3.7vw,4.05rem);
  font-weight:300;
  /* 1.02 left Cormorant's descenders (ę, j, ą) overflowing the box by ~6px
     and crowding whatever followed; 1.12 is the tightest that contains them */
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 clamp(1.1rem,2vw,1.7rem);
  text-wrap:balance;
}
.h2 em{ font-style:italic; color:var(--gold); }
.h2--light{ color:var(--on-dark); }
.h2--light em{ color:var(--gold-lt); }

.lead{
  font-size:clamp(1.06rem,1rem + .34vw,1.28rem);
  color:var(--muted);
  max-width:46ch;
  margin:0 0 1.1rem;
  text-wrap:pretty;
}
.lead--light{ color:var(--on-dark-soft); }
.lead--wide{ max-width:62ch; }

p{ max-width:64ch; }

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:120;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:1.05rem var(--gut);
  color:var(--on-dark);
  /* The hero's brightest pixels (chandeliers, lit ceiling) sit exactly under the
     bar and dropped the cream text to 1.2:1. This scrim is always present — when
     the bar goes solid it simply paints over the colour below, so nothing swaps. */
  background-image:linear-gradient(180deg,
    rgba(16,12,9,.72) 0%, rgba(16,12,9,.34) 58%, rgba(16,12,9,0) 100%);
  /* Height stays constant: animating padding here would trigger layout on a
     scroll-driven state change. Only compositor-friendly properties move. */
  transition:background-color .5s var(--e-out), backdrop-filter .5s var(--e-out),
             color .5s var(--e-out), border-color .5s var(--e-out);
  border-bottom:1px solid transparent;
}
.nav[data-stuck]{
  background-color:rgba(23,19,15,.9);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line-dark);
}
/* Document pages have a light background from the very top, so the bar can
   never be transparent there — its text is cream and would vanish. */
.nav--solid{
  background-color:rgba(23,19,15,.94);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line-dark);
}
.nav__brand{ display:grid; text-decoration:none; margin-inline-end:auto; line-height:1; }
.nav__name{
  font-family:var(--serif); font-size:1.6rem; font-weight:400;
  letter-spacing:.06em;
}
.nav__sub{
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-dark-soft); margin-top:.32rem;
}
.nav__links{ display:none; gap:clamp(1.1rem,2.2vw,2.1rem); font-size:.875rem; letter-spacing:.04em; }
/* Full cream, not the soft tint: over the hero's brightest patch the soft tone
   measured 3.38:1. The gold underline carries the hover feedback instead. */
.nav__links a{ text-decoration:none; color:var(--on-dark); position:relative; padding-block:.3rem; transition:color .3s; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:.05rem; height:1px; width:100%;
  background:var(--gold-lt); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--e-out);
}
.nav__links a:hover{ color:var(--on-dark); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
@media (min-width:1000px){ .nav__links{ display:flex; } }

/* .btn sets display:inline-flex further down the sheet, so these need the
   extra specificity of .nav to win — otherwise the CTA shows on mobile. */
.nav .nav__cta{ display:none; }
@media (min-width:1000px){ .nav .nav__cta{ display:inline-flex; } }

.burger{
  display:grid; gap:5px; width:44px; height:44px; padding:0 10px;
  place-content:center; background:none; border:0; cursor:pointer; color:inherit;
}
.burger span{ display:block; width:24px; height:1px; background:currentColor; transition:transform .4s var(--e-out), opacity .3s; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }
@media (min-width:1000px){ .burger{ display:none; } }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:110;
  background:var(--espresso); color:var(--on-dark);
  display:flex; flex-direction:column; justify-content:center;
  padding:5rem var(--gut) 2rem;
  opacity:0; pointer-events:none; transition:opacity .4s var(--e-out);
}
.menu[data-open]{ opacity:1; pointer-events:auto; }
.menu[hidden]{ display:none; }
.menu__inner{ display:grid; gap:.35rem; }
.menu__inner a{
  font-family:var(--serif); font-size:clamp(2rem,9vw,2.9rem); font-weight:300;
  text-decoration:none; padding-block:.28rem; letter-spacing:-.01em;
  opacity:0; transform:translateY(14px);
}
.menu[data-open] .menu__inner a{
  opacity:1; transform:none;
  transition:opacity .5s var(--e-out), transform .6s var(--e-out);
  transition-delay:calc(var(--i,0) * 45ms + 100ms);
}
.menu__foot{
  margin-top:auto; padding-top:2rem; display:grid; gap:.4rem;
  border-top:1px solid var(--line-dark); font-size:.9375rem; color:var(--on-dark-soft);
}
.menu__foot a{ text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }

/* ═══════════ BUTTONS ═══════════ */
.btn{
  --bg:transparent; --fg:currentColor; --bd:currentColor;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem;
  font-family:var(--sans); font-weight:400; font-size:.875rem;
  letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  color:var(--fg); background:var(--bg);
  border:1px solid var(--bd); border-radius:0;
  position:relative; overflow:hidden;
  /* transform is the press response, so it has to be fast — 450ms reads as
     the button thinking about it. The colour sweep can stay slow. */
  transition:color .45s var(--e-out), border-color .45s var(--e-out), transform .16s var(--e-out);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--gold-btn);
  transform:scaleX(0); transform-origin:right; z-index:-1;
  transition:transform .55s var(--e-out);
}
.btn:hover::before{ transform:scaleX(1); transform-origin:left; }
.btn:active{ transform:scale(.975); }
.btn span{ position:relative; }

.btn--sm{ padding:.6rem 1.05rem; font-size:.75rem; }
.btn--lg{ padding:1.05rem 2rem; font-size:.8125rem; }
.btn--block{ width:100%; }

.btn--gold{ --bg:var(--gold-btn); --fg:#fff; --bd:var(--gold-btn); }
.btn--gold::before{ background:var(--gold-dk); }
.btn--gold:hover{ color:#fff; border-color:var(--gold-dk); }

.btn--ghost{ --bd:rgba(244,239,229,.42); --fg:var(--on-dark); }
.btn--ghost:hover{ color:#fff; border-color:var(--gold); }

.nav .btn--sm{ --bd:rgba(244,239,229,.34); }
.nav .btn--sm:hover{ color:#fff; border-color:var(--gold); }

/* ═══════════ 1. HERO ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:7rem var(--gut) clamp(1.5rem,4vw,2.8rem);
  color:var(--on-dark);
  isolation:isolate;
  overflow:hidden;
  background:var(--espresso);
}
.hero__media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 62%;
  transform:scale(1.08);
}
.hero.is-ready .hero__media img{
  transform:scale(1);
  transition:transform 3s cubic-bezier(.22,.68,.24,1);
}
/* The hero frame is bright end-to-end, so the type sits on a weighted
   bottom-left fall-off rather than an all-over darkening — the room stays
   readable and the headline still clears 4.5:1. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,16,12,.52) 0%, rgba(20,16,12,.16) 20%, rgba(20,16,12,.06) 34%, rgba(20,16,12,.58) 68%, rgba(16,12,9,.90) 100%),
    linear-gradient(102deg, rgba(20,16,12,.72) 0%, rgba(20,16,12,.44) 30%, rgba(20,16,12,.10) 60%, rgba(20,16,12,0) 82%);
}
/* Fine grain: the largest original available is 1200px, so on wide screens the
   frame is upscaled. Grain masks that softness honestly — it adds texture,
   not invented detail. */
.hero__grain{
  position:absolute; inset:0; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner{ position:relative; width:100%; max-width:var(--maxw); margin-inline:auto; }
.hero__title{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(2.7rem,1rem + 7vw,6.6rem);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.022em;
}
/* padding/negative-margin pair gives descenders (j, ę, ł) room inside the
   overflow:hidden mask used for the line-by-line reveal */
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.hero__title .ln > span{ display:block; }
.hero__lead{
  margin:clamp(1.3rem,2.6vw,1.9rem) 0 0;
  font-size:clamp(1.02rem,.97rem + .42vw,1.24rem);
  color:var(--on-dark-soft);
  letter-spacing:.015em;
  max-width:34ch;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:clamp(1.8rem,3.4vw,2.6rem); }
@media (max-width:559px){
  .hero__cta{ flex-direction:column; align-items:stretch; }
}

.hero__foot{
  position:relative; width:100%; max-width:var(--maxw); margin:clamp(2.4rem,6vw,4rem) auto 0;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1.05rem;
  border-top:1px solid var(--line-dark);
  font-size:.6875rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--on-dark-soft);
}
.hero__loc-short{ display:inline; }
.hero__loc-full{ display:none; }
@media (min-width:560px){
  .hero__loc-short{ display:none; }
  .hero__loc-full{ display:inline; }
}
/* The visible mark is a 1px rule, but the link itself needs a real 44px
   target — the rail moves into the child so the hit box can grow around it. */
.hero__scroll{ flex:none; display:grid; place-items:center; width:44px; height:44px; }
.hero__scroll i{
  position:relative; display:block; overflow:hidden;
  width:1px; height:2.5rem; background:var(--line-dark);
}
.hero__scroll i::after{
  content:""; position:absolute; inset-inline:0; height:44%;
  background:var(--gold-lt); animation:drop 2.9s var(--e-io) infinite;
}
@keyframes drop{ 0%{transform:translateY(-110%)} 58%,100%{transform:translateY(250%)} }

/* ═══════════ 2. INTRO ═══════════ */
.intro__grid{ display:grid; gap:clamp(2.2rem,5vw,4.5rem); align-items:center; }
@media (min-width:900px){
  .intro__grid{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); }
}
.intro__text p{ color:var(--muted); }
.intro__figure{ margin:0; overflow:hidden; }
.intro__figure img{ width:100%; aspect-ratio:4/3.25; object-fit:cover; }

.facts{
  list-style:none; margin:clamp(3rem,7vw,5.5rem) 0 0; padding:0;
  display:grid; gap:0;
  border-top:1px solid var(--line-light);
}
@media (min-width:760px){ .facts{ grid-template-columns:repeat(4,1fr); } }
.facts li{
  padding:clamp(1.5rem,3vw,2.2rem) clamp(0rem,2vw,1.6rem) clamp(1.5rem,3vw,2.2rem) 0;
  border-bottom:1px solid var(--line-light);
  display:grid; gap:.5rem; align-content:start;
}
@media (min-width:760px){
  .facts li{ border-bottom:0; border-left:1px solid var(--line-light); padding-left:clamp(1rem,2vw,1.8rem); }
  .facts li:first-child{ border-left:0; padding-left:0; }
}
.facts__n{
  font-family:var(--serif); font-size:clamp(1.8rem,1.2rem + 1.5vw,2.6rem);
  font-weight:300; line-height:1; color:var(--ink); letter-spacing:-.01em;
}
.facts__l{ font-size:.9375rem; color:var(--muted); line-height:1.5; }
.facts__l small{ font-size:.8125rem; color:var(--muted-2); }

/* ═══════════ 3. GALERIA ═══════════ */
.gallery__head{ margin-bottom:clamp(2.4rem,5vw,4rem); }
.gallery__note{ color:var(--on-dark-soft); margin:0; max-width:44ch; }

/* Masonry via CSS columns: every photograph keeps its true proportions —
   no cover-cropping — and rows gain natural, varied heights. */
.grid{ --g-gap:clamp(.7rem,1.4vw,1.15rem); column-count:1; column-gap:var(--g-gap); }
@media (min-width:760px){ .grid{ column-count:2; } }
@media (min-width:1400px){ .grid{ column-count:2; } }

.g{
  margin:0 0 var(--g-gap); overflow:hidden; background:var(--espresso-2);
  break-inside:avoid; -webkit-column-break-inside:avoid; display:block;
}
.g:first-child{ column-span:all; }
.g__btn{
  display:block; width:100%; padding:0; border:0; cursor:zoom-in;
  background:none; overflow:hidden; position:relative;
}
.g__btn img{
  width:100%; height:auto; display:block;
  transition:transform 1s var(--e-out), filter .7s var(--e-out);
  filter:saturate(.94);
}
.g__btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(23,19,15,0) 55%,rgba(23,19,15,.34) 100%);
  opacity:0; transition:opacity .6s var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  .g__btn:hover img,.g__btn:focus-visible img{ transform:scale(1.055); filter:saturate(1.03); }
  .g__btn:hover::after{ opacity:1; }
}
.g__btn:focus-visible img{ transform:scale(1.055); filter:saturate(1.03); }

/* the opening frame gets extra presence; crop favours the tables, not the ceiling */
.g:first-child .g__btn img{ max-height:76svh; object-fit:cover; object-position:center 74%; }

/* Progressive disclosure: seven curated frames, the rest one click away.
   The hidden figures stay in the DOM so the lightbox still cycles all twelve. */
.g--more{ display:none; }
.grid.is-all .g--more{ display:block; }

.gallery__foot{ margin-top:clamp(1.8rem,3.5vw,2.8rem); display:flex; justify-content:center; }
.grid.is-all + .gallery__foot{ display:none; }
.gallery__more{ gap:.85rem; }
.gallery__count{
  position:relative;   /* stays above the .btn::before sweep */
  font-size:.6875rem; letter-spacing:.12em; opacity:.62;
  padding-left:.85rem; border-left:1px solid currentColor;
}

/* ═══════════ 4. CHARAKTER ═══════════ */
/* The element is also a .wrap, so a max-width here would turn the wrap's
   auto side-margins into centring and pull the heading off the grid's left
   edge. Constrain the measure on the children instead. */
.charakter__head{ margin-bottom:clamp(2.4rem,5vw,4rem); }
.charakter__head .lead{ max-width:54ch; }
.charakter__grid{
  display:grid; gap:clamp(.75rem,1.6vw,1.3rem);
  grid-template-columns:1fr;
}
@media (min-width:760px){ .charakter__grid{ grid-template-columns:repeat(6,1fr); } }
.ch{ margin:0; position:relative; overflow:hidden; }
.ch img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e-out); }
@media (hover:hover) and (pointer:fine){ .ch:hover img{ transform:scale(1.05); } }
.ch figcaption{
  position:absolute; left:0; bottom:0; right:0;
  padding:1.6rem 1.3rem 1.15rem;
  color:#fff; font-size:.8125rem; letter-spacing:.15em; text-transform:uppercase;
  /* floor of .30 guarantees the caption stays legible even where the
     photograph underneath is bright */
  background:linear-gradient(180deg,rgba(23,19,15,0) 0%,rgba(23,19,15,.30) 38%,rgba(23,19,15,.88) 100%);
}
.ch img{ aspect-ratio:4/3; }
/* keep the crop on the subject: the lit room, not the ceiling;
   the garden, not the sky */
.ch--c img{ object-position:center 72%; }
.ch--d img{ object-position:center 78%; }
@media (min-width:760px){
  /* One dominant frame carrying two stacked ones — an editorial spread rather
     than another four-up card row. */
  .ch--a{ grid-column:span 4; grid-row:span 2; }
  .ch--c,.ch--d{ grid-column:span 2; }
  .ch--a img{ aspect-ratio:auto; height:100%; min-height:0; }
}

/* ═══════════ 5. WESELE (Pinned Luxury Card Stack) ═══════════ */
/* Default presentation is a plain vertical deck — that is what a reader without
   JavaScript gets, and every card stays readable. The pinned scroll choreography
   is layered on top only once main.js has flagged the document. */
.stack-pinned{
  position:relative;
  background:var(--espresso);
  color:var(--on-dark);
  padding-block:clamp(4rem,8vw,7rem);
}

.eyebrow{
  display:inline-block; font-family:var(--sans); font-size:.75rem;
  font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-lt); margin-bottom:.6rem;
}

@media (min-width:960px){
  .js-stack .stack-pinned{
    height:220vh;
    padding-block:0;
  }
  .js-stack .stack-pinned__sticky{
    position:-webkit-sticky;
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
  }
}



.stack-pinned__wrap{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:clamp(1.4rem,2.5vh,2.4rem);
}
/* Receding cards lift up to ~36px to fan the deck; the heading needs to sit
   clear of that, or the top of the stack crosses the title. */
@media (min-width:960px){
  .js-stack .stack-pinned__wrap{ gap:clamp(2.6rem,4.4vh,3.6rem); }
}

.stack-pinned__head{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
@media (min-width:960px){
  .stack-pinned__head{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
  }
}

.stack-pinned__title{
  margin:0;
  font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem);
  line-height:1.12;
}

/* Nav Tabs */
.stack-nav{
  position:relative;
  display:inline-block;
  background:rgba(34,28,22,.85);
  backdrop-filter:blur(10px);
  padding:.3rem;
  border-radius:99px;
  border:1px solid rgba(244,239,229,.14);
  align-self:flex-start;
}
@media (max-width:640px){
  .stack-nav{ display:none; }
}
/* Without the engine (no JS, or reduced motion) the deck is a plain column —
   a jump-to-step control and a scroll progress bar would both be meaningless. */
html:not(.js-stack) .stack-nav,
html:not(.js-stack) .stack-track{ display:none; }

.stack-nav__layer{ display:inline-flex; gap:.35rem; }
.stack-nav__layer--on{
  position:absolute; inset:.3rem;
  clip-path:inset(-30% 100% -30% 0);
  transition:clip-path .6s var(--e-io);
  pointer-events:none;
}
.stack-nav__layer--on .stack-nav__btn{
  background:var(--gold-btn);
  color:#fff;
  font-weight:500;
  box-shadow:0 4px 14px rgba(138,108,64,.4);
}

.stack-nav__btn{
  background:transparent;
  border:none;
  color:var(--on-dark-soft);
  font-family:var(--sans);
  font-size:.75rem;
  letter-spacing:.08em;
  padding:.4rem .9rem;
  border-radius:99px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  transition:color .3s, background-color .3s, transform .2s;
}
.stack-nav__btn:hover{
  color:var(--on-dark);
}
/* the base row stays quiet; the clipped layer above supplies the selected look,
   so the two never cross-fade against each other */
.stack-nav__btn.is-active{ color:var(--on-dark); }
.stack-nav__btn:active{ transform:scale(.97); }
.stack-nav__n{
  font-weight:500;
  opacity:.8;
  font-variant-numeric:tabular-nums;
}

/* Deck Container */
.stack-deck{
  position:relative;
  width:100%;
}
.stack-deck{
  display:flex;
  flex-direction:column;
  gap:2.5rem;
}
@media (min-width:960px){
  .js-stack .stack-deck{
    display:block;
    height:clamp(460px,58vh,560px);
  }
}

/* Individual Pinned Card */
.pcard{
  background:var(--espresso-2);
  border:1px solid rgba(244,239,229,.16);
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 25px 70px -15px rgba(0,0,0,.85), 0 0 40px -15px rgba(165,133,79,.12);
  transition:border-color .4s var(--e-out), box-shadow .4s var(--e-out), transform .8s var(--e-out), opacity .8s var(--e-out);
}
/* Under the engine the card position is written every frame, so the transition
   is removed — otherwise the card lags a fixed 0.8s behind the scroll and the
   motion reads as detached rather than driven. */
.js-stack .pcard{
  transition:border-color .4s var(--e-out), box-shadow .4s var(--e-out);
  will-change:transform, opacity, filter;
  backface-visibility:hidden;
}

@media (min-width:960px){
  .js-stack .pcard{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transform-origin:center top;
    will-change:transform, opacity, filter;
  }
  .js-stack .pcard[data-idx="0"]{ transform:translateY(0); opacity:1; z-index:1; }
  .js-stack .pcard[data-idx="1"]{ transform:translateY(105%); opacity:0; z-index:2; }
  .js-stack .pcard[data-idx="2"]{ transform:translateY(105%); opacity:0; z-index:3; }
  .js-stack .pcard[data-idx="3"]{ transform:translateY(105%); opacity:0; z-index:4; }
}

.pcard__inner{
  display:grid;
  grid-template-columns:1fr;
  height:100%;
}
@media (min-width:960px){
  .pcard__inner{
    grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  }
}

.pcard__media{
  position:relative;
  overflow:hidden;
  background:#120F0C;
  min-height:260px;
}
@media (min-width:960px){
  .js-stack .pcard__media{ min-height:100%; height:100%; }
  .pcard__media{ min-height:clamp(320px,34vw,440px); }
}

.pcard__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
/* hover zoom removed: the scroll engine writes this transform, and a
   non-interactive card has nothing to acknowledge a hover for */


.pcard__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(23,19,15,.1) 0%, rgba(23,19,15,0) 50%, rgba(23,19,15,.55) 100%);
}

.pcard__badge{
  position:absolute; top:1.15rem; left:1.15rem; z-index:2;
  display:inline-flex; align-items:center;
  padding:.35rem .8rem; border-radius:99px;
  background:rgba(23,19,15,.82); backdrop-filter:blur(12px);
  border:1px solid rgba(244,239,229,.22);
  font-family:var(--sans); font-size:.75rem; font-weight:500;
  letter-spacing:.14em; color:var(--gold-lt);
  font-variant-numeric:tabular-nums;
  box-shadow:0 6px 18px rgba(0,0,0,.6);
}

.pcard__content{
  padding:clamp(1.8rem,3.5vw,3.2rem) clamp(1.6rem,3vw,2.8rem);
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(135deg, rgba(34,28,22,.96) 0%, rgba(23,19,15,.98) 100%);
}

.pcard__meta{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1rem; padding-bottom:.65rem;
  border-bottom:1px solid var(--line-dark);
}

.pcard__kicker{
  font-family:var(--sans); font-size:.75rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt);
}

.pcard__sub{
  font-family:var(--sans); font-size:.75rem;
  letter-spacing:.04em; color:var(--on-dark-soft);
}

.pcard__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.6rem,1.2rem + 1.3vw,2.25rem);
  line-height:1.15; letter-spacing:-.015em;
  color:#fff; margin:0 0 .85rem;
}

.pcard__desc{
  margin:0 0 clamp(1.2rem,2vw,1.6rem);
  color:var(--on-dark-soft); font-size:1.0625rem; line-height:1.65;
}

.pcard__tags{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}

.pcard__tags li{
  font-family:var(--sans); font-size:.75rem;
  letter-spacing:.05em; padding:.32rem .75rem;
  border-radius:99px; background:rgba(244,239,229,.05);
  border:1px solid rgba(244,239,229,.14);
  color:var(--on-dark-soft);
}

/* Progress track */
.stack-track{
  width:100%; height:2px;
  background:rgba(244,239,229,.12);
  border-radius:2px;
  overflow:hidden;
}
@media (max-width:959px){
  .stack-track{ display:none; }
}

.stack-track__fill{
  /* Driven from the scroll handler on every frame, so it has to be a
     compositor-only property — animating width here relayouts the bar
     ~60x/s while the card stack is pinned. */
  height:100%; width:100%;
  transform:scaleX(.25); transform-origin:left center;
  background:linear-gradient(90deg, var(--gold), var(--gold-lt));
  box-shadow:0 0 8px var(--gold);
  border-radius:2px;
  transition:transform .15s ease-out;
  will-change:transform;
}


/* ── card content: rises as the card reaches the front ──────
   Stagger stays in the 40–80ms band; longer gaps read as the interface
   waiting rather than the content arriving. */
.pcard__media img{ will-change:transform; }

@media (min-width:960px){
  .js-stack .pcard__badge,
  .js-stack .pcard__kicker,
  .js-stack .pcard__sub,
  .js-stack .pcard__title,
  .js-stack .pcard__desc,
  .js-stack .pcard__tags li{
    opacity:0;
    transform:translateY(15px);
    transition:opacity .5s var(--e-out), transform .62s var(--e-out);
  }
  .js-stack .pcard.is-front .pcard__badge,
  .js-stack .pcard.is-front .pcard__kicker,
  .js-stack .pcard.is-front .pcard__sub,
  .js-stack .pcard.is-front .pcard__title,
  .js-stack .pcard.is-front .pcard__desc,
  .js-stack .pcard.is-front .pcard__tags li{ opacity:1; transform:none; }

  .js-stack .pcard.is-front .pcard__badge{ transition-delay:40ms; }
  .js-stack .pcard.is-front .pcard__kicker,
  .js-stack .pcard.is-front .pcard__sub{ transition-delay:70ms; }
  .js-stack .pcard.is-front .pcard__title{ transition-delay:130ms; }
  .js-stack .pcard.is-front .pcard__desc{ transition-delay:200ms; }
  .js-stack .pcard.is-front .pcard__tags li{ transition-delay:calc(255ms + var(--n,0) * 45ms); }
}

/* Reduced motion keeps the fade — it still explains that content arrived —
   but drops every positional change. */
@media (prefers-reduced-motion:reduce){
  .js-stack .pcard__badge,
  .js-stack .pcard__kicker,
  .js-stack .pcard__sub,
  .js-stack .pcard__title,
  .js-stack .pcard__desc,
  .js-stack .pcard__tags li{ transform:none; transition:opacity .3s ease; }
  .stack-nav__layer--on{ transition:none; }
}

/* ═══════════ 6. UROCZYSTOŚCI ═══════════ */
.uro{
  display:grid; gap:clamp(1.8rem,3.5vw,2.8rem);
  grid-template-columns:1fr; margin-top:clamp(2.4rem,5vw,3.8rem);
}
@media (min-width:640px){ .uro{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .uro{ grid-template-columns:repeat(4,1fr); } }
.uro__item{ display:grid; gap:.9rem; align-content:start; }
.uro__img{ overflow:hidden; }
/* portrait crops give the four small frames real presence at 4-across,
   where a landscape crop reads as a thumbnail */
.uro__img img{ width:100%; aspect-ratio:5/4; object-fit:cover; transition:transform 1.1s var(--e-out); }
@media (min-width:1080px){ .uro__img img{ aspect-ratio:4/5; } }
@media (hover:hover) and (pointer:fine){ .uro__item:hover .uro__img img{ transform:scale(1.055); } }
.uro__item h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);
  line-height:1.2;    /* headings must not inherit the body's 1.68 */
  margin:0; letter-spacing:-.005em;
}
.uro__item p{ margin:0; color:var(--muted); font-size:.9375rem; }

/* ═══════════ 7. OPINIE ═══════════ */
.ops{
  display:grid; gap:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:1fr; margin-top:clamp(2rem,4vw,3rem);
}
@media (min-width:820px){
  .ops{ grid-template-columns:repeat(3,1fr); column-gap:clamp(1.8rem,3.2vw,3rem); }
  /* the fullest testimonial is set as a pull-quote across the whole measure,
     so the block reads as an opening statement plus supporting voices —
     not four identical cards */
  .op--lead{ grid-column:1/3; }
}
.op{
  margin:0; padding:clamp(1.6rem,3vw,2.3rem) 0 0;
  border-top:1px solid var(--line-light);
  display:grid; gap:1rem; align-content:start;
}
.op p{
  margin:0; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.05rem,1rem + .32vw,1.24rem);
  line-height:1.5; color:var(--muted); max-width:46ch;
}
.op--lead{ border-top:0; padding-top:0; }
.op--lead p{
  font-size:clamp(1.4rem,1.05rem + 1.4vw,2.15rem);
  line-height:1.36; color:var(--ink); max-width:28ch;
  text-indent:-.42em;   /* hangs the opening quote mark into the margin */
}
/* Polish typographic quotes, added in CSS so the quoted text itself
   stays byte-for-byte what the guest wrote */
.op--lead p::before{ content:"\201E"; color:var(--gold-dk); }
.op--lead p::after{ content:"\201D"; color:var(--gold-dk); }
@media (min-width:820px){ .op--lead p{ max-width:none; } }
.op--lead cite{ font-size:.8125rem; }
.op cite{
  font-style:normal; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-dk); /* --gold is only 3.3:1 on cream; too low for small text */
}

/* ═══════════ 8. DOJAZD ═══════════ */
.dojazd__grid{ display:grid; gap:clamp(2.2rem,5vw,4rem); align-items:center; }
@media (min-width:900px){ .dojazd__grid{ grid-template-columns:minmax(0,.92fr) minmax(0,1fr); } }
.adres{
  font-style:normal; margin:clamp(1.4rem,3vw,2rem) 0 1.3rem;
  font-size:1.0625rem; line-height:1.85; color:var(--ink);
}
.link{ color:var(--gold-dk); text-decoration-color:rgba(126,100,55,.45); transition:text-decoration-color .3s; }
.link:hover{ text-decoration-color:currentColor; }

.mapa{ position:relative; }
.mapa__ph{ position:relative; overflow:hidden; background:var(--ivory-2); }
.mapa__ph img{ width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.8) brightness(.82); }
.mapa__btn{
  position:absolute; inset:auto 50% 50% auto; transform:translate(50%,50%);
  padding:.9rem 1.7rem; cursor:pointer;
  background:var(--espresso); color:var(--on-dark); border:0;
  font-family:var(--sans); font-size:.8125rem; letter-spacing:.13em; text-transform:uppercase;
  transition:background .35s var(--e-out);
}
.mapa__btn:hover{ background:var(--gold-btn); }
.mapa__info{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  max-width:none; /* global p{max-width:64ch} would shrink this to ~445px */
  padding:.75rem 1rem; font-size:.75rem; color:#fff;
  background:rgba(23,19,15,.72); text-align:center;
}
.mapa iframe{ width:100%; aspect-ratio:4/3; border:0; display:block; }

/* ═══════════ 9. KONTAKT ═══════════ */
.kontakt__grid{ display:grid; gap:clamp(2.4rem,5vw,4.5rem); align-items:start; }
@media (min-width:960px){ .kontakt__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); } }
.kontakt__direct{ display:grid; gap:.3rem; margin:clamp(1.6rem,3vw,2.2rem) 0 1.2rem; }
.kontakt__tel{
  font-family:var(--serif); font-size:clamp(1.7rem,1.3rem + 1.4vw,2.35rem);
  font-weight:300; text-decoration:none; color:var(--on-dark); letter-spacing:.01em;
  transition:color .3s;
}
.kontakt__tel:hover{ color:var(--gold-lt); }
.kontakt__mail{ color:var(--on-dark-soft); text-decoration-color:rgba(190,180,164,.4); font-size:1rem; }
.kontakt__mail:hover{ color:var(--on-dark); }
.kontakt__note{
  font-size:.875rem; color:var(--on-dark-soft); max-width:38ch;
  padding-top:1.1rem; border-top:1px solid var(--line-dark); margin:0;
}

.form{ display:grid; gap:1.05rem; }
.f{ display:grid; gap:.42rem; min-width:0; }
.f-row{ display:grid; gap:1.05rem; grid-template-columns:1fr; }
@media (min-width:600px){ .f-row{ grid-template-columns:1fr 1fr; } }
.f label{
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-soft);
}
.opt{ text-transform:none; letter-spacing:.02em; opacity:.72; }
.f input,.f select,.f textarea{
  width:100%; padding:.9rem 1rem;
  background:rgba(244,239,229,.05);
  border:1px solid rgba(244,239,229,.22);
  border-radius:0; color:var(--on-dark);
  transition:border-color .3s, background-color .3s;
}
.f textarea{ resize:vertical; min-height:6.5rem; }
.f ::placeholder{ color:rgba(244,239,229,.55); }
.f input:hover,.f select:hover,.f textarea:hover{ border-color:rgba(244,239,229,.4); }
.f input:focus,.f select:focus,.f textarea:focus{
  background:rgba(244,239,229,.09); border-color:var(--gold-lt); outline-offset:2px;
}
.f select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8'%3E%3Cpath d='M1 1.2 6.5 6.6 12 1.2' fill='none' stroke='%23C9AC79' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem;
}
.f select option{ background:var(--espresso); color:var(--on-dark); }
.f__err{ font-size:.8125rem; color:#E8B79A; }
.f[data-invalid] input,.f[data-invalid] textarea{ border-color:#E8B79A; }

.form__status{ margin:.2rem 0 0; font-size:.9375rem; min-height:1.2em; color:var(--on-dark); }

.fallback{
  display:grid; gap:.7rem;
  padding:1.25rem; border:1px solid rgba(244,239,229,.22);
  background:rgba(244,239,229,.04);
}
/* an author `display` beats the UA rule behind the `hidden` attribute,
   so the panel has to be silenced explicitly or it shows before any submit */
.fallback[hidden]{ display:none; }
.fallback__lead{ margin:0; font-size:.9375rem; color:var(--on-dark-soft); max-width:none; }
.fallback__label{
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-soft);
}
.fallback__text{
  width:100%; padding:.85rem .95rem; resize:vertical;
  background:rgba(15,12,10,.34); border:1px solid rgba(244,239,229,.22);
  color:var(--on-dark); font-size:.875rem; line-height:1.6;
}
.fallback .btn{ justify-self:start; --bd:rgba(244,239,229,.34); --fg:var(--on-dark); }
.form__legal{ margin:0; font-size:.8125rem; color:var(--on-dark-soft); max-width:52ch; }

/* ═══════════ FOOTER ═══════════ */
.foot{ background:var(--espresso-2); color:var(--on-dark-soft); padding-block:clamp(2.6rem,5vw,4rem) 0; }
.foot__grid{ display:grid; gap:clamp(1.8rem,3.5vw,3rem); }
@media (min-width:760px){ .foot__grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.foot__name{ font-family:var(--serif); font-size:1.9rem; color:var(--on-dark); display:block; letter-spacing:.05em; }
.foot__sub{ font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase; }
.foot__adres{ font-style:normal; line-height:1.85; font-size:.9375rem; }
.foot__kontakt{ display:grid; gap:.35rem; font-size:.9375rem; align-content:start; }
.foot__kontakt a{ text-decoration:none; transition:color .3s; }
.foot__kontakt a:hover{ color:var(--gold-lt); }
.foot__nav{ display:grid; gap:.35rem; font-size:.9375rem; align-content:start; }

/* Stacked link lists are the one place a thumb has to hit a line of text.
   Only on touch-sized screens, so the desktop footer keeps its tight rhythm. */
@media (max-width:759px){
  .foot__kontakt{ gap:0; }
  .foot__nav{ gap:0; }
  .foot__kontakt a,
  .foot__nav a,
  .kontakt__mail,
  .dojazd__text .link{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .nav__brand{ min-height:44px; }
}
.foot__nav a{ text-decoration:none; transition:color .3s; }
.foot__nav a:hover{ color:var(--gold-lt); }
.foot__bar{
  margin-top:clamp(2.2rem,4vw,3rem); padding-block:1.3rem;
  border-top:1px solid var(--line-dark); font-size:.8125rem;
}
/* clear the fixed mobile action bar so it never covers the footer */
@media (max-width:999px){
  .foot__bar{ padding-bottom:5.5rem; }
  html{ scroll-padding-bottom:5rem; }
}

/* ═══════════ DOKUMENTY (polityka prywatności) ═══════════ */
.doc{ background:var(--ivory); padding-block:clamp(7rem,12vw,10rem) clamp(4rem,8vw,7rem); }
.doc__wrap{ max-width:76ch; }
.doc__h1{
  font-family:var(--serif); font-weight:300; letter-spacing:-.015em; line-height:1.05;
  font-size:clamp(2.2rem,1.25rem + 3.7vw,4.05rem); margin:0 0 1rem;
}
.doc__intro{ color:var(--muted); font-size:1.0625rem; margin:0 0 2.5rem; max-width:60ch; }

.doc__h2{
  font-family:var(--serif); font-weight:400; letter-spacing:-.008em;
  font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem);
  margin:2.8rem 0 .85rem;
}
.doc p{ color:var(--muted); margin:0 0 1rem; }
.doc strong{ color:var(--ink); font-weight:500; }
.doc__ul{ margin:0 0 1.4rem; padding-left:1.1rem; color:var(--muted); }
.doc__ul li{ margin-bottom:.5rem; max-width:64ch; }
.doc__date{ margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--line-light); }
.doc__back{ margin-top:2.6rem; }
.link--light{ color:var(--gold-lt); text-decoration-color:rgba(201,172,121,.5); }
.link--light:hover{ text-decoration-color:currentColor; }

/* ═══════════ MOBILE STICKY CTA ═══════════ */
.mbar{
  position:fixed; z-index:100; inset-inline:0; bottom:0;
  display:grid; grid-template-columns:auto 1fr; gap:.55rem;
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(23,19,15,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--line-dark);
  transform:translateY(115%); transition:transform .55s var(--e-out);
}
.mbar[data-show]{ transform:none; }
@media (min-width:1000px){ .mbar{ display:none; } }
.mbar__tel,.mbar__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  text-decoration:none; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.85rem 1.1rem;
}
.mbar__tel{ color:var(--on-dark); border:1px solid rgba(244,239,229,.3); }
.mbar__cta{ background:var(--gold-btn); color:#fff; }

/* ═══════════ LIGHTBOX ═══════════ */
.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(14,11,9,.96);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(.4rem,2vw,1.5rem); padding:clamp(3.2rem,6vw,4rem) clamp(.5rem,2vw,2rem);
  opacity:0; pointer-events:none; transition:opacity .35s var(--e-out);
}
.lb[data-open]{ opacity:1; pointer-events:auto; }
.lb[hidden]{ display:none; }
.lb__fig{ margin:0; display:grid; place-items:center; gap:1rem; min-width:0; }
.lb__fig img{
  max-width:100%; max-height:78svh; width:auto; height:auto; object-fit:contain;
}
.lb__fig figcaption{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-soft);
  text-align:center;
}
.lb__x{
  position:absolute; top:.8rem; right:1rem; z-index:2;
  width:44px; height:44px; font-size:1.9rem; line-height:1;
  background:none; border:0; color:var(--on-dark-soft); cursor:pointer; transition:color .3s;
}
.lb__x:hover{ color:#fff; }
.lb__nav{
  width:clamp(44px,6vw,54px); height:clamp(44px,6vw,54px);
  font-size:clamp(1.8rem,3vw,2.6rem); line-height:1;
  background:none; border:1px solid rgba(244,239,229,.2); color:var(--on-dark-soft);
  cursor:pointer; transition:color .3s, border-color .3s;
}
.lb__nav:hover{ color:#fff; border-color:var(--gold); }
body[data-lock]{ overflow:hidden; }

/* ═══════════ REVEALS ═══════════
   Opt-in: without JS (or with reduced motion) everything is visible. */
.has-r [data-r]{ opacity:0; transform:translateY(18px); }
.has-r [data-r="img"]{ transform:translateY(22px) scale(.988); }
.has-r [data-r].is-in{
  opacity:1; transform:none;
  /* 1.0s/1.15s read as the page catching up with the reader; ~0.7s lands
     confidently while still feeling composed. */
  transition:opacity .68s var(--e-out), transform .82s var(--e-out);
  transition-delay:var(--d,0ms);
}

/* Photographs get their own signature: a wipe from the top edge rather than a
   fade-up. It touches only clip-path, so every hover zoom keeps its transform.
   Limited to frames that hold nothing but an image — clipping a card mid-reveal
   would slice its text. */
.has-r .g[data-r],
.has-r .ch[data-r],
.has-r .intro__figure[data-r]{
  opacity:1; transform:none;
  clip-path:inset(0 0 100% 0);
}
.has-r .g[data-r].is-in,
.has-r .ch[data-r].is-in,
.has-r .intro__figure[data-r].is-in{
  clip-path:inset(0 0 0 0);
  transition:clip-path .9s var(--e-out);
  transition-delay:var(--d,0ms);
}

/* Reduced motion keeps the fade — it still signals arrival — and drops
   every positional change, including the wipe. */
@media (prefers-reduced-motion:reduce){
  .has-r [data-r]{ transform:none; }
  .has-r .g[data-r],
  .has-r .ch[data-r],
  .has-r .intro__figure[data-r]{ clip-path:none; }
}
.has-r .hero__title .ln > span{ transform:translateY(104%); }
.has-r .hero.is-ready .hero__title .ln > span{
  transform:none; transition:transform 1.25s var(--e-out); transition-delay:var(--d,0ms);
}
.has-r .hero__lead,
.has-r .hero__cta,
.has-r .hero__foot{ opacity:0; transform:translateY(18px); }
.has-r .hero.is-ready .hero__lead,
.has-r .hero.is-ready .hero__cta,
.has-r .hero.is-ready .hero__foot{
  opacity:1; transform:none;
  transition:opacity 1s var(--e-out), transform 1.1s var(--e-out);
}
.has-r .hero.is-ready .hero__lead{ transition-delay:.5s; }
.has-r .hero.is-ready .hero__cta{ transition-delay:.64s; }
.has-r .hero.is-ready .hero__foot{ transition-delay:.78s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .has-r [data-r],
  .has-r .hero__lead,.has-r .hero__cta,.has-r .hero__foot{ opacity:1 !important; transform:none !important; }
  .has-r .hero__title .ln > span{ transform:none !important; }
  .hero__media img{ transform:none !important; }
  .story__step{ opacity:1 !important; }
}