/* ===========================================================
   ORLE GNIAZDO
   Zasada: kolor pochodzi wyłącznie ze zdjęć.
   Interfejs = papier, tusz, włosowa linia. Bez akcentów barwnych.
   Rytm oparty na skali 8 px.
   =========================================================== */

:root{
  /* --- powierzchnie --- */
  --paper:#f7f5f0;
  --paper-2:#efece5;
  --ink:#171b17;
  --ink-2:#212821;

  /* --- tekst --- */
  --fg:#171b17;
  --fg-muted:#6b6f68;
  --fg-faint:#9a9c95;
  --on-dark:#f2f0ea;
  --on-dark-muted:rgba(242,240,234,.62);
  --on-dark-faint:rgba(242,240,234,.4);

  /* --- linie --- */
  --line:#e0ddd5;
  --line-strong:#c9c5ba;
  --line-dark:rgba(242,240,234,.16);

  /* --- typografia --- */
  --ff-d:"Fraunces",Georgia,serif;
  --ff-s:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* --- skala 8 px --- */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem;  --s-11:10rem;

  --gutter:1.5rem;
  --wrap:75rem;
  --measure:36rem;

  --ease:cubic-bezier(.22,.68,0,1);
  --u:36px;
}
@media(min-width:48em){:root{--gutter:2.5rem}}
@media(min-width:80em){:root{--gutter:3rem;--u:56px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--ff-s);font-weight:300;font-size:1rem;line-height:1.75;
  color:var(--fg);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:4.75rem;
}
@media(min-width:64em){body{padding-bottom:0}}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

h1,h2,h3,h4{
  font-family:var(--ff-d);font-weight:300;margin:0;color:var(--fg);
  line-height:1.08;letter-spacing:-.015em;
}

:focus-visible{outline:1.5px solid var(--fg);outline-offset:4px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--ink);color:var(--on-dark);
  padding:var(--s-3) var(--s-5)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------ układ */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.sec{padding-block:var(--s-8)}
@media(min-width:48em){.sec{padding-block:var(--s-9)}}
@media(min-width:80em){.sec{padding-block:var(--s-10)}}
.sec--lg{padding-block:var(--s-9)}
@media(min-width:80em){.sec--lg{padding-block:var(--s-11)}}
.sec--sm{padding-block:var(--s-7)}
@media(min-width:48em){.sec--sm{padding-block:var(--s-8)}}

.sec--dark,.sec--deep{background:var(--ink);color:var(--on-dark)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,
.sec--deep h1,.sec--deep h2,.sec--deep h3{color:var(--on-dark)}
.sec--cream{background:var(--paper-2)}

hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ------------------------------------------------ typografia */

.eyebrow{
  display:block;
  font-size:.6875rem;line-height:1;letter-spacing:.24em;text-transform:uppercase;
  font-weight:400;color:var(--fg-faint);margin-bottom:var(--s-5);
}
.sec--dark .eyebrow,.sec--deep .eyebrow,.hero .eyebrow,.phead .eyebrow{color:var(--on-dark-faint)}

.t-hero{font-size:clamp(2.75rem,8.5vw,6rem);line-height:.98;letter-spacing:-.03em}
.t-1{font-size:clamp(2rem,4.4vw,3.25rem);letter-spacing:-.022em}
.t-2{font-size:clamp(1.5rem,2.8vw,2.125rem);letter-spacing:-.018em}
.t-3{font-size:1.1875rem;letter-spacing:-.01em;line-height:1.3}

.it{font-style:italic;color:inherit}

.lead{font-size:1.0625rem;line-height:1.75;color:var(--fg-muted);max-width:var(--measure)}
@media(min-width:48em){.lead{font-size:1.125rem}}
.sec--dark .lead,.sec--deep .lead,.hero .lead,.phead .lead{color:var(--on-dark-muted)}

.small{font-size:.875rem;line-height:1.7;color:var(--fg-muted)}
.sec--dark .small,.sec--deep .small{color:var(--on-dark-muted)}

.meta{font-size:.6875rem;line-height:1;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-faint)}
.sec--dark .meta,.sec--deep .meta{color:var(--on-dark-faint)}

.prose{max-width:var(--measure)}
.prose p+p{margin-top:var(--s-4)}

.mw-40{max-width:38rem}.mw-32{max-width:30rem}.mw-24{max-width:22rem}
.center{text-align:center}

.mt-1{margin-top:var(--s-3)}
.mt-2{margin-top:var(--s-5)}
.mt-3{margin-top:var(--s-6)}
.mt-4{margin-top:var(--s-8)}
.stack>*+*{margin-top:var(--s-5)}

/* ------------------------------------------------ przyciski i linki */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  min-height:3.25rem;padding:1rem 1.75rem;border-radius:0;
  font-family:var(--ff-s);font-size:.6875rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--fg);background:none;color:var(--fg);cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease);
}
.btn svg{transition:transform .4s var(--ease);flex:none}
.btn:hover svg{transform:translateX(3px)}

.btn--dark{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.btn--dark:hover{background:var(--ink-2);border-color:var(--ink-2)}

.btn--out{border-color:var(--line-strong);color:var(--fg)}
.btn--out:hover{border-color:var(--fg);background:var(--fg);color:var(--paper)}

.btn--gold{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn--gold:hover{background:transparent;color:var(--on-dark)}
.btn--outlight{border-color:var(--line-dark);color:var(--on-dark)}
.btn--outlight:hover{border-color:var(--paper);background:var(--paper);color:var(--ink)}

.btn--block{width:100%}

.ulink{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:2px;transition:background-size .45s var(--ease);
}
.ulink:hover,.ulink:focus-visible{background-size:100% 1px}

.tlink{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:.4rem;border-bottom:1px solid var(--line-strong);
  transition:border-color .3s var(--ease)}
.tlink:hover{border-color:var(--fg)}
.tlink svg{transition:transform .4s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* ------------------------------------------------ animacje */

.rv{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.07s}
.rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ------------------------------------------------ nagłówek */

.hdr{position:fixed;inset-inline:0;top:0;z-index:60;
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  padding-block:var(--s-5);transition:padding .4s var(--ease)}
.hdr.solid{background:rgba(247,245,240,.92);backdrop-filter:blur(16px);
  border-bottom-color:var(--line)}
.hdr.solid .hdr__in{padding-block:var(--s-3)}

.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex:none}
.brand svg{width:1.75rem;height:1.75rem;flex:none}
.brand .bn{display:block;font-family:var(--ff-d);font-size:.9375rem;font-weight:400;
  letter-spacing:.22em;line-height:1;color:var(--on-dark);transition:color .4s var(--ease)}
.brand .bs{display:block;font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;
  margin-top:.4rem;line-height:1;color:var(--on-dark-faint);transition:color .4s var(--ease)}
.hdr.solid .brand .bn{color:var(--fg)}
.hdr.solid .brand .bs{color:var(--fg-faint)}
.brand svg .mk,.brand svg .mk2{stroke:var(--on-dark);transition:stroke .4s var(--ease)}
.hdr.solid .brand svg .mk,.hdr.solid .brand svg .mk2{stroke:var(--fg)}

.nav{display:none}
@media(min-width:64em){
  .nav{display:flex;align-items:center;gap:var(--s-6)}
  .nav a{text-decoration:none;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--on-dark);opacity:.8;padding-block:.25rem;
    transition:opacity .3s var(--ease),color .4s var(--ease)}
  .hdr.solid .nav a{color:var(--fg);opacity:.65}
  .nav a:hover{opacity:1}
  .nav a[aria-current="page"]{opacity:1;border-bottom:1px solid currentColor}
}

.hdr__cta{display:none}
@media(min-width:64em){
  .hdr__cta{display:inline-flex;min-height:2.75rem;padding:.75rem 1.5rem;
    border-color:var(--line-dark);color:var(--on-dark)}
  .hdr.solid .hdr__cta{border-color:var(--line-strong);color:var(--fg)}
  .hdr__cta:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
  .hdr.solid .hdr__cta:hover{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
}

.burger{display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;cursor:pointer;background:none;
  border:1px solid var(--line-dark);color:var(--on-dark);
  transition:border-color .4s var(--ease),color .4s var(--ease)}
.hdr.solid .burger{border-color:var(--line-strong);color:var(--fg)}
@media(min-width:64em){.burger{display:none}}

/* ------------------------------------------------ menu mobilne */

.menu{position:fixed;inset:0;z-index:90;visibility:hidden;opacity:0;
  transition:opacity .4s var(--ease),visibility .4s}
.menu.open{visibility:visible;opacity:1}
.menu__bg{position:absolute;inset:0;background:var(--ink)}
.menu__glow{display:none}
.menu__in{position:relative;display:flex;flex-direction:column;height:100dvh;color:var(--on-dark)}
.menu__top{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-5) var(--gutter);flex:none;border-bottom:1px solid var(--line-dark)}
.menu__x{display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;cursor:pointer;background:none;color:var(--on-dark);
  border:1px solid var(--line-dark);transition:background-color .3s var(--ease)}
.menu__x:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.menu nav{flex:1;display:flex;flex-direction:column;justify-content:center;
  overflow-y:auto;padding:var(--s-6) var(--gutter)}
.menu nav a{display:flex;align-items:baseline;gap:var(--s-5);padding-block:var(--s-5);
  text-decoration:none;border-bottom:1px solid var(--line-dark);
  font-family:var(--ff-d);font-size:clamp(1.5rem,6.5vw,2rem);font-weight:300;
  line-height:1;letter-spacing:-.02em;transition:opacity .3s var(--ease)}
.menu nav a:hover{opacity:.6}
.menu nav a i{font-style:normal;font-family:var(--ff-s);font-size:.625rem;
  letter-spacing:.18em;color:var(--on-dark-faint);width:1.5rem;flex:none}
.menu__foot{flex:none;border-top:1px solid var(--line-dark);
  padding:var(--s-5) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom))}
.menu__foot .row{display:flex;justify-content:space-between;align-items:center;
  margin-top:var(--s-4);font-size:.8125rem;color:var(--on-dark-muted)}
.menu .mi{opacity:0;transform:translateY(12px)}
.menu.open .mi{opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu.open .mi:nth-child(1){transition-delay:.08s}
.menu.open .mi:nth-child(2){transition-delay:.13s}
.menu.open .mi:nth-child(3){transition-delay:.18s}
.menu.open .mi:nth-child(4){transition-delay:.23s}
.menu.open .mi:nth-child(5){transition-delay:.28s}
.menu.open .mi:nth-child(6){transition-delay:.33s}
.menu.open .menu__foot{transition-delay:.38s}

/* ------------------------------------------------ pasek CTA (mobile) */

.dock{position:fixed;inset-inline:0;bottom:0;z-index:50;display:flex;gap:var(--s-2);
  align-items:center;padding:var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background:rgba(247,245,240,.95);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.dock .btn{flex:1;min-height:3rem;padding-inline:1rem}
.dock__ico{display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;flex:none;text-decoration:none;color:var(--fg);
  border:1px solid var(--line-strong);transition:background-color .3s var(--ease)}
.dock__ico:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(min-width:64em){.dock{display:none}}

/* ------------------------------------------------ hero */

.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark)}
.hero__m{position:absolute;inset:0}
.hero__m picture{display:block;width:100%;height:100%}
.hero__m img{width:100%;height:100%;object-fit:cover}
.hero__m::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,27,23,.58) 0%,rgba(23,27,23,.18) 40%,rgba(23,27,23,.82) 100%)}
.hero__b{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100svh;padding-block:var(--s-10) var(--s-7)}
.hero h1{color:var(--on-dark)}
.hero__title{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.hero__grid{margin-top:var(--s-7)}
@media(min-width:64em){
  .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:var(--s-8);align-items:end}
}
.hero__acts{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-6)}
@media(min-width:36em){.hero__acts{flex-direction:row}}
@media(min-width:64em){.hero__acts{margin-top:0}}
.hero__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--line-dark);
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-faint)}
.hero__foot ul{display:flex;flex-wrap:wrap;gap:.5rem var(--s-5)}
.scroll-ico{display:inline-flex;color:var(--on-dark-faint);
  transition:color .3s var(--ease),transform .4s var(--ease)}
.scroll-ico:hover{color:var(--on-dark);transform:translateY(3px)}

/* ------------------------------------------------ nagłówek podstrony */

.phead{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark)}
.phead__m{position:absolute;inset:0}
.phead__m picture{display:block;width:100%;height:100%}
.phead__m img{width:100%;height:100%;object-fit:cover;opacity:.55}
.phead__m::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,27,23,.72),rgba(23,27,23,.62))}
.phead__b{position:relative;padding-block:var(--s-10) var(--s-8)}
@media(min-width:64em){.phead__b{padding-block:var(--s-11) var(--s-9)}}
.phead h1{color:var(--on-dark);margin-top:var(--s-4)}
.phead .lead{margin-top:var(--s-5)}

.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-faint)}
.crumbs a{text-decoration:none;transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--on-dark)}
.crumbs li{display:flex}
.crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.5}

/* ------------------------------------------------ obrazy */

.fig{position:relative;overflow:hidden;background:var(--paper-2)}
.fig picture{display:block;width:100%;height:100%}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
a:hover .fig img,.zoom:hover img{transform:scale(1.03)}
.r-wide{aspect-ratio:16/10}
.r-hero{aspect-ratio:16/9}
.r-tall{aspect-ratio:4/5}
.r-sq{aspect-ratio:1/1}
.r-43{aspect-ratio:4/3}
@media(max-width:47.99em){.r-tall{aspect-ratio:4/3}}
@supports not (aspect-ratio:1/1){.fig img{height:auto}}
figcaption{margin-top:var(--s-3);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-faint)}
.sec--dark figcaption,.sec--deep figcaption{color:var(--on-dark-faint)}

.bleed-r{margin-right:calc(var(--gutter) * -1)}
@media(min-width:64em){.bleed-r{margin-right:calc(50% - 50vw)}}

/* ------------------------------------------------ siatki */

.g{display:grid;gap:var(--s-5)}
@media(min-width:36em){.g--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:48em){
  .g{gap:var(--s-6)}
  .g--3{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:36em) and (max-width:47.99em){.g--3{grid-template-columns:repeat(2,1fr)}}

.split{display:grid;gap:var(--s-7)}
@media(min-width:64em){
  .split{grid-template-columns:1fr 1.05fr;gap:var(--s-9);align-items:center}
  .split--top{align-items:start}
  .split--rev>*:first-child{order:2}
}

/* ------------------------------------------------ karty */

.card{display:flex;flex-direction:column;text-decoration:none}
.card__b{padding-top:var(--s-5)}
.card h3{margin-bottom:var(--s-2)}
.card .meta{margin-bottom:var(--s-3)}
.badge{position:absolute;left:1rem;top:1rem;background:var(--paper);
  padding:.4rem .875rem;font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink)}

.tile{border:1px solid var(--line);padding:var(--s-6);height:100%;background:var(--paper)}
@media(min-width:48em){.tile{padding:var(--s-7)}}
.sec--dark .tile,.sec--deep .tile{border-color:var(--line-dark);background:transparent}
.tile__n{display:block;font-family:var(--ff-s);font-size:.625rem;letter-spacing:.2em;
  color:var(--fg-faint);margin-bottom:var(--s-4)}
.sec--dark .tile__n,.sec--deep .tile__n{color:var(--on-dark-faint)}

/* ------------------------------------------------ lista numerowana */

@media(min-width:64em){.sticky{position:sticky;top:8.5rem}}
.rows{border-top:1px solid var(--line-dark)}
.rows li{border-bottom:1px solid var(--line-dark)}
.rows .row{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--s-4);
  padding-block:var(--s-6);transition:padding-left .5s var(--ease)}
@media(min-width:48em){
  .rows .row{grid-template-columns:4rem 1fr;gap:var(--s-6);padding-block:var(--s-7)}
}
@media(hover:hover){.rows li:hover .row{padding-left:var(--s-4)}}
.rows .n{font-family:var(--ff-s);font-size:.625rem;letter-spacing:.18em;
  color:var(--on-dark-faint);padding-top:.5rem}
.rows .n span{opacity:.5}

/* ------------------------------------------------ oś dystansu */

.axis{position:relative}
.axis__line{position:absolute;top:.5rem;bottom:0;left:5px;width:1px;background:var(--line-dark)}
@media(min-width:48em){.axis__line{left:50%}}
.tick{position:relative;display:grid;grid-template-columns:2.75rem 1fr;column-gap:var(--s-4)}
@media(min-width:48em){.tick{grid-template-columns:1fr 7.5rem 1fr;column-gap:var(--s-6)}}
.tick__k{grid-column:1;grid-row:1;display:flex;align-items:flex-start;gap:var(--s-3)}
@media(min-width:48em){.tick__k{grid-column:2;flex-direction:column;align-items:center;gap:var(--s-2)}}
.tick__k b{width:11px;height:11px;border-radius:50%;background:var(--paper);
  border:1px solid var(--paper);flex:none;margin-top:.45rem}
.tick__k em{font-style:normal;font-family:var(--ff-d);font-size:1rem;color:var(--on-dark)}
.tick__k em i{font-style:normal;font-size:.6875rem;color:var(--on-dark-faint)}
.tick__l{grid-column:2;grid-row:1;padding-bottom:var(--s-5)}
.tick__r{grid-column:2;grid-row:2;padding-bottom:var(--s-5)}
@media(min-width:48em){
  .tick__l{grid-column:1;grid-row:1;text-align:right;padding-bottom:0}
  .tick__l .small{margin-left:auto}
  .tick__r{grid-column:3;grid-row:1;padding-bottom:0}
}
.tick h3{font-size:1.125rem;color:var(--on-dark)}
.tick .small{color:var(--on-dark-muted);max-width:20rem}
.tick+.tick{margin-top:calc(var(--u) * var(--gap,1))}
.tick--ski .tick__k b{background:transparent}

/* ------------------------------------------------ paski, chipy, fakty */

.strip{display:flex;gap:var(--s-6);overflow-x:auto;padding-block:var(--s-4);
  scrollbar-width:none;font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-faint)}
.strip::-webkit-scrollbar{display:none}
.strip li{white-space:nowrap;flex:none}
@media(min-width:64em){.strip{justify-content:space-between;gap:var(--s-4);overflow:visible}}

.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips li{border:1px solid var(--line);padding:.5rem 1rem;
  font-size:.75rem;letter-spacing:.04em;color:var(--fg-muted)}
.sec--dark .chips li,.sec--deep .chips li{border-color:var(--line-dark);color:var(--on-dark-muted)}

.facts{border-top:1px solid var(--line)}
.facts li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-5);
  padding-block:var(--s-4);border-bottom:1px solid var(--line)}
.sec--dark .facts,.sec--deep .facts,
.sec--dark .facts li,.sec--deep .facts li{border-color:var(--line-dark)}
.facts .k{color:var(--fg-muted);font-size:.9375rem}
.sec--dark .facts .k,.sec--deep .facts .k{color:var(--on-dark-muted)}
.facts .v{flex:none;font-family:var(--ff-d);font-size:1.0625rem;color:var(--fg)}
.sec--dark .facts .v,.sec--deep .facts .v{color:var(--on-dark)}

/* ------------------------------------------------ galerie */

.rail{display:flex;gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-inline:var(--gutter);scroll-padding-left:var(--gutter)}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:0 0 auto}
.rail .w-a{width:74vw;max-width:24rem}
.rail .w-b{width:84vw;max-width:38rem}
.rail .w-c{width:66vw;max-width:21rem}
@media(min-width:64em){
  .rail{gap:var(--s-5)}
  .rail .w-a{width:30vw}.rail .w-b{width:42vw}.rail .w-c{width:24vw}
}

.gal{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:36em){.gal{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64em){.gal{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}}
.gal .big{grid-column:1/-1}
@media(min-width:64em){.gal .big{grid-column:span 2}}

/* ------------------------------------------------ tabela, FAQ, formularz */

.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
caption{text-align:left;padding-bottom:var(--s-4);color:var(--fg-faint);font-size:.8125rem}
th,td{padding:var(--s-4) var(--s-3);text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--ff-s);font-weight:400;font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-faint)}
td{color:var(--fg-muted)}
td:first-child{font-family:var(--ff-d);font-size:1.0625rem;color:var(--fg)}
tbody tr:last-child td{border-bottom:0}

details{border-bottom:1px solid var(--line);padding-block:var(--s-5)}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:var(--s-5);font-family:var(--ff-d);font-size:1.0625rem;color:var(--fg);
  letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:12px;height:12px;margin-top:.55rem;
  background:currentColor;opacity:.45;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center/contain no-repeat}
details[open] summary::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E")}
details p{margin-top:var(--s-3);color:var(--fg-muted);font-size:.9375rem;max-width:44rem}

.form{display:grid;gap:var(--s-5)}
.form label{display:block;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:var(--s-2)}
.form input,.form textarea{width:100%;font-family:var(--ff-s);font-size:1rem;font-weight:300;
  padding:.875rem 1rem;min-height:3.25rem;color:var(--fg);background:transparent;
  border:1px solid var(--line);border-radius:0;transition:border-color .3s var(--ease)}
.form textarea{min-height:9rem;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--fg)}
@media(min-width:36em){.form--2{grid-template-columns:1fr 1fr}.form--2 .full{grid-column:1/-1}}

/* ------------------------------------------------ do uzupełnienia */

.todo{border:1px solid var(--line-strong);border-left-width:2px;background:transparent;
  padding:var(--s-5) var(--s-6);color:var(--fg-muted);font-size:.875rem;line-height:1.7}
.todo b{font-weight:400;color:var(--fg)}
.sec--dark .todo,.sec--deep .todo{border-color:var(--line-dark);color:var(--on-dark-muted)}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--paper-2);border:1px solid var(--line);color:var(--fg-faint);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  padding:var(--s-5);line-height:2}

/* ------------------------------------------------ stopka */

.ftr{background:var(--ink);color:var(--on-dark);padding-block:var(--s-8) var(--s-6)}
@media(min-width:48em){.ftr{padding-block:var(--s-9) var(--s-6)}}
.ftr h2{font-family:var(--ff-s);font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--on-dark-faint);margin-bottom:var(--s-4);font-weight:400}
.ftr a{text-decoration:none;color:var(--on-dark-muted);transition:color .3s var(--ease)}
.ftr a:hover{color:var(--on-dark)}
.ftr .brand .bn{color:var(--on-dark)}
.ftr .brand .bs{color:var(--on-dark-faint)}
.ftr li{padding-block:.3rem}
.ftr__g{display:grid;gap:var(--s-7)}
@media(min-width:48em){.ftr__g{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s-6)}}
.ftr__b{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);justify-content:space-between;
  margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line-dark);
  font-size:.75rem;color:var(--on-dark-faint)}
.ftr__b ul{display:flex;flex-wrap:wrap;gap:var(--s-5)}

@media print{.hdr,.dock,.menu{display:none}}

/* ------------------------------------------------ rezerwacja telefoniczna */

.tel-big{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-family:var(--ff-d);font-weight:300;
  font-size:clamp(1.75rem,5vw,3rem);letter-spacing:-.02em;
  text-decoration:none;color:var(--on-dark);line-height:1;
  padding-bottom:.35rem;border-bottom:1px solid var(--line-dark);
  transition:border-color .3s var(--ease)
}
.tel-big:hover{border-color:var(--on-dark)}
.tel-big svg{width:1.5rem;height:1.5rem;opacity:.55;flex:none}
.tel-big--dark{color:var(--fg);border-bottom-color:var(--line-strong)}
.tel-big--dark:hover{border-color:var(--fg)}

.call-block{
  border:1px solid var(--line);padding:var(--s-7) var(--s-5);
  text-align:center;background:var(--paper-2)
}
@media(min-width:48em){.call-block{padding:var(--s-8) var(--s-6)}}
.call-block .eyebrow{margin-bottom:var(--s-4)}

/* czterokolumnowa siatka pokoi */
@media(min-width:48em){.g--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64em){.g--4{grid-template-columns:repeat(4,1fr);gap:var(--s-5)}}

/* numer kroku po prawej w liście „przygotuj przed telefonem” */
.facts .v{font-variant-numeric:tabular-nums}

/* ------------------------------------------------ komponenty WordPress */

/* nagłówek sekcji: tytuł po lewej, notka po prawej */
.sec__head{
  display:flex;flex-wrap:wrap;gap:var(--s-5);
  justify-content:space-between;align-items:flex-end;
  border-bottom:1px solid var(--line);padding-bottom:var(--s-6)
}

/* menu główne renderowane przez wp_nav_menu bez <ul> */
.nav a[aria-current="page"]{opacity:1;border-bottom:1px solid currentColor}
.menu nav a.is-current{opacity:1}

/* menu w stopce */
.ftr__nav{list-style:none;margin:0;padding:0}
.ftr__nav li{padding-block:.3rem}

/* legenda osi odległości */
.axis__legend{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-faint)
}
.axis__legend li{display:flex;align-items:center;gap:.6rem}
.axis__dot{
  width:9px;height:9px;border-radius:50%;
  border:1px solid var(--on-dark);background:transparent
}
.axis__dot--full{background:var(--on-dark)}

/* paginacja */
.pagination{border-top:1px solid var(--line);padding-top:var(--s-5)}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.75rem;min-height:2.75rem;padding:0 .75rem;
  border:1px solid var(--line);text-decoration:none;
  font-size:.875rem;color:var(--fg-muted);
  transition:border-color .3s var(--ease),color .3s var(--ease)
}
.pagination .page-numbers:hover{border-color:var(--fg);color:var(--fg)}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* logo z Customizera */
.brand__logo{width:auto;height:1.75rem;object-fit:contain}

/* podpisy pod obrazami w edytorze */
.entry-content figure{margin:0}
.entry-content figcaption{margin-top:var(--s-3)}

/* ==========================================================================
   RYTM PIONOWY
   Jedna skala dla calego serwisu. Kazda sekcja ma identyczny odstep
   gorny i dolny, wiec sasiadujace bloki tworza rowne, symetryczne pasy.
   ========================================================================== */

.sec{padding-block:var(--s-8)}
@media(min-width:48em){.sec{padding-block:var(--s-9)}}
@media(min-width:80em){.sec{padding-block:var(--s-10)}}

/* naglowek sekcji: eyebrow -> H2 -> lead, zawsze te same odstepy */
.eyebrow{margin-bottom:var(--s-4)}
.sec h2 + .lead,
.sec h2 + .small{margin-top:var(--s-4)}

/* pierwsze i ostatnie dziecko sekcji nie dokladaja marginesu */
.sec > .wrap > :first-child{margin-top:0}
.sec > .wrap > :last-child{margin-bottom:0}

/* naglowek dwuczlonowy: tytul po lewej, notka po prawej */
.sec__head{
  display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-8);
  justify-content:space-between;align-items:flex-end;
  padding-bottom:var(--s-6);border-bottom:1px solid var(--line)
}
.sec__head > div{flex:1 1 20rem}
.sec__head > p{flex:0 1 20rem}

/* ==========================================================================
   HERO - obraz albo wideo
   ========================================================================== */

.hero__video{
  width:100%;height:100%;object-fit:cover;display:block
}
.hero__inner{
  width:100%;display:flex;flex-direction:column;justify-content:flex-end;min-height:inherit
}
.hero__b{padding-block:var(--s-10) var(--s-7)}
.hero h1{margin-bottom:var(--s-7)}
.hero__grid{display:grid;gap:var(--s-6)}
@media(min-width:64em){
  .hero__grid{grid-template-columns:minmax(0,32rem) auto;gap:var(--s-8);align-items:end}
  .hero__acts{justify-content:flex-end}
}
.hero__acts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:0}
.hero__foot{
  display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;
  justify-content:space-between;
  margin-top:var(--s-7);padding-top:var(--s-5);
  border-top:1px solid var(--line-dark)
}
.hero__badges{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-faint)
}
.hero__badges li{display:flex;align-items:center;gap:var(--s-3)}
.hero__badges li + li::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.6;margin-right:var(--s-2)
}

/* ==========================================================================
   NAWIGACJA - kropki
   ========================================================================== */

.nav{display:none}
@media(min-width:64em){
  .nav{display:flex;align-items:center;gap:0}
}
.nav__item{
  position:relative;display:inline-flex;align-items:center;
  padding:.5rem var(--s-4);text-decoration:none;
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark);opacity:.75;
  transition:opacity .3s var(--ease),color .4s var(--ease)
}
.hdr.solid .nav__item{color:var(--fg);opacity:.6}
.nav__item:hover{opacity:1}
.nav__item.is-current{opacity:1}

/* separator: kropka miedzy pozycjami */
.nav__item + .nav__item::before{
  content:"";position:absolute;left:-2px;top:50%;
  width:3px;height:3px;margin-top:-1.5px;border-radius:50%;
  background:currentColor;opacity:.28
}

/* wskaznik aktywnej pozycji: kropka nad tekstem */
.nav__dot{
  position:absolute;left:50%;top:.05rem;
  width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:currentColor;opacity:0;transform:translateY(-3px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)
}
.nav__item.is-current .nav__dot{opacity:1;transform:none}
.nav__item:hover .nav__dot{opacity:.45;transform:none}

/* ==========================================================================
   PASEK LICZB
   ========================================================================== */

.stats{border-bottom:1px solid var(--line);background:var(--paper)}
.stats__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-left:1px solid var(--line)
}
@media(min-width:48em){.stats__grid{grid-template-columns:repeat(4,1fr)}}
.stats__item{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-6) var(--s-5);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)
}
@media(min-width:48em){
  .stats__item{padding:var(--s-7) var(--s-6);border-bottom:0}
}
.stats__value{
  font-family:var(--ff-d);font-weight:300;font-size:clamp(2rem,4vw,3rem);
  line-height:1;letter-spacing:-.03em;color:var(--fg)
}
.stats__value i{
  font-style:normal;font-family:var(--ff-s);font-size:.875rem;
  letter-spacing:.05em;color:var(--fg-faint);margin-left:.25rem
}
.stats__label{
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-faint)
}

/* ==========================================================================
   SEZONY
   ========================================================================== */

.seasons{display:grid;gap:var(--s-6)}
@media(min-width:64em){.seasons{grid-template-columns:repeat(2,1fr);gap:var(--s-7)}}
.season__media{position:relative}
.season__badge{
  position:absolute;left:var(--s-5);top:var(--s-5);
  padding:.5rem 1rem;background:var(--paper);color:var(--ink);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase
}
.season__body{padding-top:var(--s-5)}
.season__body .small{max-width:32rem}

/* ==========================================================================
   OPINIE
   ========================================================================== */

.reviews{display:grid;gap:var(--s-5)}
@media(min-width:48em){.reviews{grid-template-columns:repeat(3,1fr);gap:var(--s-6)}}
.review{
  margin:0;padding:var(--s-6);
  border:1px solid var(--line);background:var(--paper);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-5)
}
@media(min-width:48em){.review{padding:var(--s-7)}}
.review__text{
  margin:0;font-family:var(--ff-d);font-weight:300;
  font-size:1.0625rem;line-height:1.55;letter-spacing:-.01em;color:var(--fg)
}
.review__text::before{content:"\201E"}
.review__text::after{content:"\201D"}
.review__by{
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-faint);display:flex;flex-direction:column;gap:.35rem
}
.review__by span{opacity:.75;letter-spacing:.16em}

/* ==========================================================================
   STRONA POKOJU
   ========================================================================== */

.room__head{padding-block:var(--s-10) var(--s-6);background:var(--paper)}
@media(min-width:64em){.room__head{padding-block:var(--s-11) var(--s-7)}}
.room__headline{
  display:flex;flex-wrap:wrap;gap:var(--s-6) var(--s-8);
  justify-content:space-between;align-items:flex-end;
  margin-top:var(--s-5)
}
.room__quick{display:flex;gap:var(--s-7)}
.room__quick li{display:flex;flex-direction:column;gap:.35rem}
.room__quick-v{
  font-family:var(--ff-d);font-weight:300;font-size:1.75rem;
  line-height:1;letter-spacing:-.02em;color:var(--fg)
}
.room__quick-l{
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint)
}

.room__gallery{padding-bottom:var(--s-7)}
.room__shots{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,1fr)}
@media(min-width:64em){
  .room__shots{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
}
.room__shots .fig{aspect-ratio:4/3}
.room__shot--lead{grid-column:1/-1;aspect-ratio:16/9}
@media(min-width:64em){.room__shot--lead{grid-column:span 2;aspect-ratio:16/10}}

.room__main{padding-block:0 var(--s-9)}
.room__cols{display:grid;gap:var(--s-7)}
@media(min-width:64em){
  .room__cols{grid-template-columns:minmax(0,1fr) 22rem;gap:var(--s-9);align-items:start}
}
.room__content > :first-child{margin-top:0}

/* lista wyposazenia z kropkami i znacznikami */
.feat{display:grid;gap:var(--s-3)}
@media(min-width:36em){.feat{grid-template-columns:repeat(2,1fr);gap:var(--s-3) var(--s-6)}}
.feat__item{
  display:flex;align-items:baseline;gap:var(--s-3);
  font-size:.9375rem;color:var(--fg-muted);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line)
}
.feat__dot{
  width:5px;height:5px;border-radius:50%;background:var(--fg);
  opacity:.4;flex:none;transform:translateY(-2px)
}
.feat__check{
  width:12px;height:12px;flex:none;transform:translateY(1px);
  background:var(--fg);opacity:.5;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat
}

/* boks rezerwacji */
.book{
  border:1px solid var(--line);background:var(--paper-2);
  padding:var(--s-6)
}
@media(min-width:48em){.book{padding:var(--s-7)}}
@media(min-width:64em){.book{position:sticky;top:7.5rem}}
.book__eyebrow{
  font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-faint)
}
.book__title{
  font-family:var(--ff-d);font-weight:300;font-size:1.5rem;
  letter-spacing:-.02em;color:var(--fg);margin-top:var(--s-3)
}
.book__note{
  font-size:.875rem;line-height:1.65;color:var(--fg-muted);margin-top:var(--s-3)
}
.book__cta{margin-top:var(--s-5)}
.book__alt{text-align:center;margin-top:var(--s-3);font-size:.8125rem;color:var(--fg-muted)}
.book__facts{margin-top:var(--s-6);border-top:1px solid var(--line-strong)}
.book__facts li{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  padding-block:var(--s-3);border-bottom:1px solid var(--line)
}
.book__facts span{font-size:.875rem;color:var(--fg-muted)}
.book__facts b{font-weight:400;font-family:var(--ff-d);font-size:1rem;color:var(--fg)}
.book__hint{
  margin-top:var(--s-5);font-size:.8125rem;line-height:1.6;color:var(--fg-faint)
}

/* ==========================================================================
   STOPKA
   ========================================================================== */

.ftr{background:var(--ink);color:var(--on-dark);padding-block:0}

.ftr__cta{border-bottom:1px solid var(--line-dark)}
.ftr__cta-in{
  display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-8);
  align-items:center;justify-content:space-between;
  padding-block:var(--s-7)
}
@media(min-width:48em){.ftr__cta-in{padding-block:var(--s-8)}}
.ftr__cta-title{
  font-family:var(--ff-d);font-weight:300;
  font-size:clamp(1.5rem,3vw,2.125rem);letter-spacing:-.02em;
  color:var(--on-dark);margin-top:var(--s-2)
}

.ftr__body{padding-block:var(--s-8)}
@media(min-width:48em){.ftr__body{padding-block:var(--s-9) var(--s-7)}}

.ftr__g{display:grid;gap:var(--s-7)}
@media(min-width:36em){.ftr__g{grid-template-columns:repeat(2,1fr);gap:var(--s-7) var(--s-6)}}
@media(min-width:64em){.ftr__g{grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--s-6)}}

.ftr__brand .brand{margin-bottom:var(--s-5)}
.ftr__desc{font-size:.875rem;line-height:1.7;color:var(--on-dark-muted);max-width:24rem}

.ftr__col h2{
  font-family:var(--ff-s);font-size:.625rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--on-dark-faint);
  font-weight:400;margin-bottom:var(--s-4);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line-dark)
}
.ftr__nav,.ftr__list{list-style:none;margin:0;padding:0}
.ftr__nav li,.ftr__list li{padding-block:.35rem}
.ftr__nav a,.ftr__list a{
  text-decoration:none;color:var(--on-dark-muted);font-size:.9375rem;
  transition:color .3s var(--ease)
}
.ftr__nav a:hover,.ftr__list a:hover{color:var(--on-dark)}
.ftr__muted{color:var(--on-dark-faint);font-size:.875rem}
.ftr__addr{
  font-style:normal;font-size:.9375rem;line-height:1.7;color:var(--on-dark-muted)
}
.ftr .tlink{color:var(--on-dark-muted);border-bottom-color:var(--line-dark)}
.ftr .tlink:hover{color:var(--on-dark);border-bottom-color:var(--on-dark)}

.ftr__b{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);
  justify-content:space-between;align-items:center;
  margin-top:var(--s-8);padding-top:var(--s-5);
  border-top:1px solid var(--line-dark);
  font-size:.75rem;color:var(--on-dark-faint)
}
.ftr__note{flex:1 1 100%;order:3;opacity:.8}
@media(min-width:64em){.ftr__note{flex:0 1 auto;order:0}}

/* ==========================================================================
   MOBILE - dopracowanie
   ========================================================================== */

@media(max-width:47.99em){
  .hero__b{padding-block:var(--s-9) var(--s-6)}
  .hero h1{margin-bottom:var(--s-6)}
  .hero__acts .btn{width:100%}
  .hero__foot{gap:var(--s-4);align-items:flex-start}
  .room__headline{gap:var(--s-5)}
  .room__quick{gap:var(--s-6);width:100%;justify-content:space-between}
  .sec__head{gap:var(--s-4)}
  .stats__item{padding:var(--s-5) var(--s-4)}
  .ftr__cta-in{flex-direction:column;align-items:flex-start;gap:var(--s-5)}
  .tel-big{font-size:1.75rem}
}

/* pasek CTA nie moze zaslaniac konca stopki */
@media(max-width:63.99em){
  .ftr__body{padding-bottom:calc(var(--s-8) + 4.5rem)}
}

/* ==========================================================================
   LOGOTYP
   Znak graficzny w naglowku, pelny lockup w stopce.
   Dwie wersje znaku przelaczane zaleznie od tla naglowka.
   ========================================================================== */

.brand__mark{position:relative;display:block;width:2.75rem;height:1.64rem;flex:none}
.brand__mark-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:opacity .4s var(--ease)
}
.brand__mark-img--dark{opacity:0}
.hdr.solid .brand__mark-img--light{opacity:0}
.hdr.solid .brand__mark-img--dark{opacity:1}
.menu__top .brand__mark-img--light,
.ftr .brand__mark-img--light{opacity:1}
.menu__top .brand__mark-img--dark,
.ftr .brand__mark-img--dark{opacity:0}
.brand__logo{width:auto;height:2.5rem;object-fit:contain}

.ftr__brand-link{display:inline-block;text-decoration:none}
.ftr__logo{width:11rem;height:auto;margin-bottom:var(--s-5)}
@media(min-width:48em){.ftr__logo{width:13.75rem}}

/* ==========================================================================
   KAFELKI POWODOW
   ========================================================================== */

.sec__head--dark{border-bottom-color:var(--line-dark)}

.tiles{
  display:grid;gap:1px;background:var(--line-dark);
  border:1px solid var(--line-dark)
}
@media(min-width:36em){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64em){.tiles{grid-template-columns:repeat(3,1fr)}}

.tile-card{
  position:relative;background:var(--ink);
  padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);
  transition:background-color .4s var(--ease)
}
@media(min-width:48em){.tile-card{padding:var(--s-7)}}
.tile-card:hover{background:var(--ink-2)}
.tile-card__ico{color:var(--on-dark);opacity:.75;display:block;margin-bottom:var(--s-2)}
.tile-card__n{
  position:absolute;right:var(--s-6);top:var(--s-6);
  font-family:var(--ff-d);font-size:.75rem;color:var(--on-dark-faint)
}
.tile-card__n i{font-style:normal;opacity:.55}
.tile-card__t{
  font-size:1.25rem;letter-spacing:-.015em;color:var(--on-dark);margin:0;
  padding-right:var(--s-6)
}
.tile-card__d{font-size:.9375rem;line-height:1.7;color:var(--on-dark-muted);margin:0}

/* ==========================================================================
   WPROWADZENIE
   ========================================================================== */

.intro__fig{height:58vh;min-height:22rem}
@media(min-width:64em){.intro__fig{height:64vh}}

/* ==========================================================================
   WYZYWIENIE - zdjecie pelnowymiarowe z panelem
   ========================================================================== */

.dining{position:relative;background:var(--ink);overflow:hidden}
.dining__media{position:absolute;inset:0}
.dining__media picture,.dining__media img{width:100%;height:100%;object-fit:cover;display:block}
.dining__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,27,23,.85),rgba(23,27,23,.65))
}
@media(min-width:64em){
  .dining__media::after{
    background:linear-gradient(90deg,rgba(23,27,23,.92) 0%,rgba(23,27,23,.72) 48%,rgba(23,27,23,.35) 100%)
  }
}
.dining__b{position:relative;padding-block:var(--s-9)}
@media(min-width:80em){.dining__b{padding-block:var(--s-10)}}
.dining__panel{max-width:34rem;color:var(--on-dark)}
.dining__panel h2{color:var(--on-dark)}
.dining__panel .lead{color:var(--on-dark-muted)}
.dining__list{border-top:1px solid var(--line-dark)}
.dining__list li{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  justify-content:space-between;align-items:baseline;
  padding-block:var(--s-4);border-bottom:1px solid var(--line-dark)
}
.dining__name{
  font-family:var(--ff-d);font-size:1.0625rem;color:var(--on-dark)
}
.dining__desc{font-size:.875rem;color:var(--on-dark-faint);text-align:right;flex:1 1 12rem}

/* ==========================================================================
   KROKI REZERWACJI
   ========================================================================== */

.steps{display:grid;gap:var(--s-5);counter-reset:step}
@media(min-width:48em){.steps{grid-template-columns:repeat(3,1fr);gap:var(--s-6)}}
.step{
  background:var(--paper);border:1px solid var(--line);
  padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3)
}
@media(min-width:48em){.step{padding:var(--s-7)}}
.step__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border:1px solid var(--line-strong);border-radius:50%;
  font-family:var(--ff-d);font-size:1rem;color:var(--fg);margin-bottom:var(--s-2)
}
.step__t{font-size:1.1875rem;letter-spacing:-.015em;margin:0}
.step__d{font-size:.9375rem;line-height:1.7;color:var(--fg-muted);margin:0}
.steps__cta{
  display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);align-items:center;
  margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--line)
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq__aside .fig{max-width:26rem}
.faq__call{
  margin-top:var(--s-5);padding:var(--s-5);
  border:1px solid var(--line);background:var(--paper-2);max-width:26rem
}
.faq__call .btn{margin-top:var(--s-3)}
.faq__list details:first-of-type{border-top:1px solid var(--line)}

/* ==========================================================================
   PAS GALERII
   ========================================================================== */

.gallery-strip{padding-inline:0}
.gallery-strip__head{
  display:flex;flex-wrap:wrap;gap:var(--s-4);
  justify-content:space-between;align-items:flex-end
}

/* lista przygotowania do telefonu */
.prep{border:1px solid var(--line);background:var(--paper-2);padding:var(--s-6)}
@media(min-width:48em){.prep{padding:var(--s-7)}}
.prep__list{margin-top:var(--s-5);border-top:1px solid var(--line)}
.prep__list li{
  display:flex;align-items:baseline;gap:var(--s-4);
  padding-block:var(--s-4);border-bottom:1px solid var(--line);
  font-size:.9375rem;color:var(--fg-muted)
}
.prep__n{
  font-family:var(--ff-d);font-size:.75rem;color:var(--fg-faint);
  flex:none;width:1.5rem;letter-spacing:.06em
}
.prep__hint{margin-top:var(--s-4);font-size:.8125rem;line-height:1.6;color:var(--fg-faint)}

/* ==========================================================================
   BIESIADY GORALSKIE
   ========================================================================== */

.feast__list{display:grid;gap:var(--s-4)}
.feast__item{
  display:flex;gap:var(--s-4);align-items:flex-start;
  padding-bottom:var(--s-4);border-bottom:1px solid var(--line)
}
.feast__ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border:1px solid var(--line-strong);
  border-radius:50%;color:var(--fg);opacity:.8
}
.feast__body{display:flex;flex-direction:column;gap:.35rem}
.feast__t{font-family:var(--ff-d);font-size:1.125rem;letter-spacing:-.015em;color:var(--fg)}
.feast__d{font-size:.9375rem;line-height:1.65;color:var(--fg-muted)}
.feast__media{position:relative}
.feast__media-2{
  width:60%;margin-top:calc(var(--s-6) * -1);margin-left:auto;
  border:6px solid var(--paper);position:relative;z-index:2
}
@media(min-width:64em){.feast__media-2{width:66%;border-width:10px}}

/* ==========================================================================
   CENNIK
   ========================================================================== */

.price-base{
  font-family:var(--ff-d);font-weight:300;
  font-size:clamp(1.5rem,3vw,2.125rem);letter-spacing:-.02em;
  color:var(--fg);margin-top:var(--s-5);
  padding-top:var(--s-5);border-top:1px solid var(--line)
}
.price-tables{display:grid;gap:var(--s-7)}
@media(min-width:64em){.price-tables{grid-template-columns:repeat(2,1fr);gap:var(--s-8)}}
.price-tables table td:last-child,
.price-tables table th:last-child{text-align:right;white-space:nowrap}
.price-tables td:last-child{
  font-family:var(--ff-d);font-size:1.0625rem;color:var(--fg)
}

/* warunki rezerwacji */
.terms{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
@media(min-width:48em){.terms{grid-template-columns:repeat(2,1fr)}}
@media(min-width:80em){.terms{grid-template-columns:repeat(4,1fr)}}
.term{background:var(--ink);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3)}
@media(min-width:48em){.term{padding:var(--s-7)}}
.term__t{font-size:1.125rem;letter-spacing:-.015em;color:var(--on-dark);margin:0}
.term__d{font-size:.9375rem;line-height:1.7;color:var(--on-dark-muted);margin:0}

.groups-box{
  margin-top:var(--s-6);padding:var(--s-6);
  border:1px solid var(--line-dark);display:flex;flex-direction:column;
  gap:var(--s-4);align-items:flex-start
}
@media(min-width:64em){
  .groups-box{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--s-7)}
}
.groups-box__t{
  font-family:var(--ff-d);font-size:1.5rem;letter-spacing:-.02em;color:var(--on-dark)
}
.groups-box__d{font-size:.9375rem;line-height:1.7;color:var(--on-dark-muted);max-width:38rem}

/* cena na karcie i w boksie rezerwacji */
.card__price{
  margin-top:var(--s-3);padding-top:var(--s-3);
  border-top:1px solid var(--line);
  font-family:var(--ff-d);font-size:1.125rem;letter-spacing:-.015em;color:var(--fg)
}
.book__price{
  font-family:var(--ff-d);font-weight:300;
  font-size:clamp(1.75rem,3.5vw,2.25rem);letter-spacing:-.025em;
  color:var(--fg);margin-top:var(--s-3);line-height:1
}
.book__price + .book__title{
  font-size:1rem;color:var(--fg-muted);margin-top:var(--s-2)
}

/* ==========================================================================
   GALERIA POKOJU - kompaktowa
   Cztery kadry w jednym rzedzie, wysokosc ograniczona clamp-em,
   zeby sekcja nie zjadala calego ekranu.
   ========================================================================== */

.room__shots{
  display:grid;gap:var(--s-3);
  grid-template-columns:repeat(2,1fr)
}
@media(min-width:48em){
  .room__shots{grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
}
.room__shots .fig{
  aspect-ratio:auto;height:clamp(7rem,22vw,11.5rem)
}
@media(min-width:64em){.room__shots .fig{height:clamp(9rem,14vw,13rem)}}
.room__more{margin-top:var(--s-3);color:var(--fg-faint)}
.room__gallery{padding-bottom:var(--s-6)}

/* boks rezerwacji: drugi przycisk */
.book__second{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
.book__second .book__alt{margin-top:var(--s-3);text-align:center;
  font-size:.8125rem;color:var(--fg-faint)}

/* pasek mobilny: dwa przyciski */
.dock__call{flex:1 1 45%}
.dock__ask{flex:1 1 45%;background:var(--paper);border-color:var(--line-strong)}
.dock__ask:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ==========================================================================
   NAGLOWEK: telefon i przycisk zapytania
   ========================================================================== */

.hdr__act{display:flex;align-items:center;gap:var(--s-4)}

.hdr__tel{
  display:none;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--ff-d);font-size:1.0625rem;letter-spacing:-.01em;
  color:var(--on-dark);white-space:nowrap;
  transition:color .4s var(--ease),opacity .3s var(--ease)
}
@media(min-width:64em){.hdr__tel{display:inline-flex}}
.hdr__tel svg{opacity:.6}
.hdr__tel:hover{opacity:.75}
.hdr.solid .hdr__tel{color:var(--fg)}

/* przycisk zapytania w naglowku */
.hdr__cta{display:none}
@media(min-width:64em){
  .hdr__cta{
    display:inline-flex;min-height:2.75rem;padding:.75rem 1.5rem;
    border-color:var(--line-dark);color:var(--on-dark)
  }
  .hdr.solid .hdr__cta{border-color:var(--line-strong);color:var(--fg)}
  .hdr__cta:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
  .hdr.solid .hdr__cta:hover{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
}
.hdr__cta svg{display:none}

/* na tabletach zostaje sam telefon jako ikona */
@media(min-width:48em) and (max-width:63.99em){
  .hdr__tel{display:inline-flex;font-size:0;gap:0}
  .hdr__tel svg{opacity:.85;width:20px;height:20px}
  .hdr__tel span{display:none}
}

/* menu mobilne: drugi przycisk */
.menu__ask{margin-top:var(--s-3)}

/* FAQ: drugi przycisk */
.faq__ask{margin-top:var(--s-3)}

/* hero: trzy przyciski nie moga sie rozjechac */
@media(min-width:36em) and (max-width:63.99em){
  .hero__acts{flex-wrap:wrap}
  .hero__acts .btn{flex:1 1 auto}
}

/* ==========================================================================
   OKNO MODALNE Z FORMULARZEM
   Zalozenie: okno zawsze miesci sie w widocznym obszarze, bez przewijania
   strony. Wysokosc ograniczona do 100dvh, a gdyby na bardzo niskim ekranie
   zabraklo miejsca, przewija sie wylacznie srodek formularza.
   ========================================================================== */

.modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s-3)
}
@media(min-width:48em){.modal{padding:var(--s-5)}}
.modal[hidden]{display:none}

.modal__overlay{
  position:fixed;inset:0;background:rgba(23,27,23,.75);
  opacity:0;transition:opacity .25s var(--ease)
}
.modal.is-open .modal__overlay{opacity:1}

.modal__box{
  position:relative;display:flex;flex-direction:column;
  width:100%;max-width:44rem;max-height:calc(100dvh - var(--s-5));
  background:var(--paper);border:1px solid var(--line);
  opacity:0;transform:translateY(10px);
  transition:opacity .25s var(--ease),transform .25s var(--ease)
}
@media(min-width:48em){.modal__box{max-height:calc(100dvh - var(--s-8))}}
.modal.is-open .modal__box{opacity:1;transform:none}

.modal__x{
  position:absolute;right:.75rem;top:.75rem;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;background:var(--paper);cursor:pointer;
  border:1px solid var(--line-strong);color:var(--fg);
  transition:background-color .3s var(--ease),color .3s var(--ease)
}
.modal__x:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* --- naglowek okna: staly, nie przewija sie --- */
.modal__head{
  flex:none;padding:var(--s-5) var(--s-5) var(--s-4);
  padding-right:3.5rem;border-bottom:1px solid var(--line)
}
@media(min-width:48em){.modal__head{padding:var(--s-6) var(--s-6) var(--s-5);padding-right:4rem}}
.modal__head .eyebrow{margin-bottom:var(--s-2);font-size:.625rem}
.modal__title{
  font-family:var(--ff-d);font-weight:300;
  font-size:clamp(1.25rem,4vw,1.75rem);letter-spacing:-.02em;
  color:var(--fg);line-height:1.1
}
.modal__lead{
  display:none;font-size:.875rem;line-height:1.6;
  color:var(--fg-muted);margin-top:var(--s-3)
}
@media(min-width:48em) and (min-height:44em){.modal__lead{display:block}}
.modal__phone{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--s-3);
  font-family:var(--ff-d);font-size:1.0625rem;letter-spacing:-.015em;
  color:var(--fg);text-decoration:none;white-space:nowrap;
  padding-bottom:.15rem;border-bottom:1px solid var(--line-strong)
}
.modal__phone:hover{border-color:var(--fg)}

/* --- srodek: jedyne miejsce, ktore w razie potrzeby sie przewija --- */
.modal__form{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:var(--s-4) var(--s-5);display:block
}
@media(min-width:48em){.modal__form{padding:var(--s-5) var(--s-6)}}

.modal__room{
  font-size:.8125rem;color:var(--fg-muted);
  padding:.5rem .75rem;background:var(--paper-2);
  border-left:2px solid var(--line-strong);margin-bottom:var(--s-4)
}

/* siatka: 2 kolumny na telefonie, 4 na desktopie */
.modal__form .form__grid{
  display:grid;gap:var(--s-3);grid-template-columns:repeat(2,1fr)
}
@media(min-width:48em){.modal__form .form__grid{gap:var(--s-4);grid-template-columns:repeat(4,1fr)}}
.modal__form .form__full{grid-column:1/-1}
.modal__form .f-md{grid-column:span 1}
.modal__form .f-sm{grid-column:span 1}
@media(min-width:48em){.modal__form .f-md{grid-column:span 2}}

/* pola: nizsze i mniejsze niz w reszcie serwisu, zeby formularz sie zmiescil */
.modal__form label{
  font-size:.5625rem;letter-spacing:.16em;margin-bottom:.35rem;
  color:var(--fg-faint);display:block;text-transform:uppercase
}
.modal__form input,
.modal__form select,
.modal__form textarea{
  width:100%;font-family:var(--ff-s);font-weight:300;
  font-size:.9375rem;padding:.6rem .75rem;min-height:2.75rem;
  color:var(--fg);background:var(--paper);
  border:1px solid var(--line);border-radius:0;
  transition:border-color .3s var(--ease)
}
@media(min-width:48em){
  .modal__form input,.modal__form select,.modal__form textarea{
    font-size:1rem;padding:.7rem .9rem;min-height:3rem
  }
}
.modal__form textarea{min-height:4.5rem;resize:none}
.modal__form input:focus,
.modal__form select:focus,
.modal__form textarea:focus{outline:none;border-color:var(--fg)}
.modal__form select{
  appearance:none;padding-right:2.25rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%236b6f68' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:1rem
}
/* iOS nie moze powiekszac pola przy focusie - stad 16px na dotyku */
@media(hover:none){
  .modal__form input,.modal__form select,.modal__form textarea{font-size:16px}
}
.modal__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.modal__status{
  margin-top:var(--s-3);font-size:.8125rem;line-height:1.5
}
.modal__status:empty{display:none}
.modal__status.is-pending{color:var(--fg-muted)}
.modal__status.is-ok{color:var(--fg);padding:.75rem;background:var(--paper-2);
  border-left:2px solid var(--fg)}
.modal__status.is-error{color:var(--fg);padding:.75rem;background:var(--paper-2);
  border-left:2px solid var(--line-strong)}

/* --- stopka okna: stala, przycisk zawsze widoczny --- */
.modal__actions{
  flex:none;display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;
  padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);
  background:var(--paper)
}
@media(min-width:48em){.modal__actions{padding:var(--s-4) var(--s-6)}}
.modal__actions .btn{flex:1 1 12rem;min-height:3rem;padding:.85rem 1.5rem}
.modal__note{
  flex:1 1 100%;font-size:.6875rem;line-height:1.5;color:var(--fg-faint);margin:0
}
@media(min-width:48em){.modal__note{flex:1 1 13rem}}

/* bardzo niskie ekrany: chowamy to, co nieistotne */
@media(max-height:34em){
  .modal__head{padding-block:var(--s-4) var(--s-3)}
  .modal__phone,.modal__note{display:none}
  .modal__form textarea{min-height:3.25rem}
}

/* przycisk w naglowku nie moze sie lamac na dwa wiersze */
.hdr__cta{white-space:nowrap}
.btn{white-space:nowrap}
.btn--block{white-space:normal}

/* ==========================================================================
   MODAL REZERWACJI - widget w ramce iframe
   Mobile: pelny ekran, bez marginesow, bez przewijania strony pod spodem.
   Desktop: wyśrodkowany panel z widoczna belka, iframe wypelnia reszte.
   ========================================================================== */

.bmodal{
  position:fixed;inset:0;z-index:110;
  display:flex;flex-direction:column;
  background:var(--paper);
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease)
}
.bmodal[hidden]{display:none}
.bmodal.is-open{opacity:1;visibility:visible}

@media(min-width:64em){
  .bmodal{
    inset:var(--s-5);
    border:1px solid var(--line);
    box-shadow:0 24px 64px rgba(23,27,23,.28);
    transform:scale(.98);
    transition:opacity .25s var(--ease),transform .25s var(--ease)
  }
  .bmodal.is-open{transform:none}
}
@media(min-width:80em){
  .bmodal{
    inset:var(--s-7) 12vw
  }
}

/* pasek u gory: tytul, link zewnetrzny, zamkniecie - zawsze widoczny */
.bmodal__bar{
  flex:none;display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--line);
  background:var(--paper)
}
@media(min-width:48em){.bmodal__bar{padding:var(--s-4) var(--s-5)}}
.bmodal__title{
  flex:1 1 auto;margin:0;min-width:0;
  font-family:var(--ff-d);font-weight:300;
  font-size:clamp(1rem,3vw,1.25rem);letter-spacing:-.015em;
  color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.bmodal__ext{
  flex:none;display:none;
  font-size:.75rem;letter-spacing:.06em;color:var(--fg-muted);
  text-decoration:none;padding-bottom:1px;border-bottom:1px solid var(--line-strong);
  white-space:nowrap
}
@media(min-width:36em){.bmodal__ext{display:inline}}
.bmodal__ext:hover{color:var(--fg);border-color:var(--fg)}
.bmodal__x{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;background:none;cursor:pointer;
  border:1px solid var(--line-strong);color:var(--fg);
  transition:background-color .3s var(--ease),color .3s var(--ease)
}
.bmodal__x:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* cialo: ramka wypelnia cala dostepna wysokosc, bez wlasnego przewijania strony */
.bmodal__body{
  position:relative;flex:1 1 auto;min-height:0;background:var(--paper-2)
}
.bmodal__frame{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;opacity:0;transition:opacity .3s var(--ease)
}
.bmodal__frame.is-ready{opacity:1}

.bmodal__loading{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-4);
  font-size:.8125rem;letter-spacing:.08em;color:var(--fg-faint);
  background:var(--paper-2)
}
.bmodal__spin{
  width:2rem;height:2rem;border-radius:50%;
  border:2px solid var(--line-strong);border-top-color:var(--fg);
  animation:bmodal-spin .8s linear infinite
}
@keyframes bmodal-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .bmodal__spin{animation-duration:2s}
}

/* strona kontaktu: dwa przyciski pod telefonem */
.call-block__acts{
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;
  margin-top:var(--s-5)
}
.call-block__acts .btn{flex:0 1 auto}

/* naglowek naglowka: przycisk nie moze sie lamac */
.hdr__cta{white-space:nowrap}

/* stopka menu mobilnego: link do kontaktu zamiast numeru */
.menu__contact{
  display:block;margin-top:var(--s-4);text-align:center;
  font-size:.8125rem;line-height:1.6;color:var(--on-dark-muted);
  text-decoration:underline;text-underline-offset:3px
}
.menu__contact:hover{color:var(--on-dark)}