/* ===== 1. NEUTRALIZACJA DOMYŚLNYCH STYLÓW ELEMENTORA (przed makietą) ===== */
body.gm-page .e-con, body.gm-page .e-con-inner{
  --container-max-width:none; --content-width:none;
  max-width:none; width:auto; padding:0; margin:0; gap:0; border-radius:0;
}
body.gm-page .e-con.e-con.e-con{
  --display:block; --flex-direction:row; --gap:0px; --row-gap:0px; --column-gap:0px;
  --padding-block-start:0px; --padding-block-end:0px;
  --padding-inline-start:0px; --padding-inline-end:0px;
  --margin-block-start:0px; --margin-block-end:0px;
  --margin-inline-start:0px; --margin-inline-end:0px;
}
body.gm-page .elementor-widget{ width:auto; margin:0; }
body.gm-page .elementor-element{ min-width:0; }
/* wysokość sceny kategorii (w makiecie atrybut style) — na KLASIE, żeby mobilne media query makiety wygrywało */
body.gm-page .bnh{ height:440vh; }
body.gm-page .elementor-widget-image, body.gm-page .elementor-widget-heading,
body.gm-page .elementor-widget-text-editor, body.gm-page .elementor-widget-html{ line-height:normal; }

/* ===== 2. MAKIETA (z hero-eleos.html) ===== */

:root{
  --paper:#f4f4ed; --ink:#16151e; --cream:#f4f4ed;
  --gl-dark:rgba(244,244,237,.08);   
  --gl-light:rgba(22,21,30,.07);     
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat",system-ui,sans-serif;
  --gut:clamp(18px,3vw,44px);
  
  --climb:36vh;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body.gm-page{background:var(--paper);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased}


html{background:#09090B;overscroll-behavior-y:none}
body.gm-page{overflow-x:hidden;overscroll-behavior-y:none}
body.gm-page a{color:inherit;text-decoration:none}
body.gm-page img,body.gm-page video{display:block;max-width:100%}
body.gm-page .mono-lbl{font-family:var(--mono);text-transform:uppercase;letter-spacing:-.03em;font-weight:600;font-size:.72rem;line-height:1.35}


body.gm-page .cols{position:relative}
body.gm-page .cols::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(90deg,var(--gl) 1px,transparent 1px);background-size:calc(100%/8) 100%}
@media(max-width:820px){body.gm-page .cols::before{background-size:calc(100%/5) 100%}}


body.gm-page .hd{position:fixed;top:0;left:0;width:100%;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,1.8vw,22px) var(--gut);color:var(--cream);
  transition:background .5s ease,padding .5s ease,box-shadow .5s ease,color .45s ease}

body.gm-page .hd.scrolled{padding:clamp(8px,1vw,12px) var(--gut);
  backdrop-filter:blur(13px) saturate(1.25);-webkit-backdrop-filter:blur(13px) saturate(1.25);transition:background .45s ease,color .45s ease,padding .45s ease,box-shadow .45s ease}
body.gm-page .hd.scrolled.hd--light{background:rgba(255,255,255,.72);color:var(--ink);box-shadow:0 1px 0 rgba(22,21,30,.08)}
body.gm-page .hd.scrolled.hd--dark{background:rgba(20,21,23,.5);color:var(--cream);box-shadow:0 1px 0 rgba(255,255,255,.09)}

body.gm-page .hd .logo-img{height:clamp(50px,5.4vw,72px);width:auto;filter:brightness(0) invert(1);transition:filter .45s ease,height .45s ease}
body.gm-page .hd.scrolled .logo-img{height:clamp(36px,3.2vw,44px)}
body.gm-page .hd.scrolled.hd--light .logo-img{filter:none}
body.gm-page .hd.scrolled.hd--dark .logo-img{filter:brightness(0) invert(1)}

body.gm-page .hd.hd--light{color:var(--ink)}
body.gm-page .hd.hd--light .logo-img{filter:none}
body.gm-page .hd .right{display:flex;align-items:center;gap:clamp(20px,2.4vw,38px)}
body.gm-page .hd nav{display:flex;align-items:center}
body.gm-page .hd nav .ni{position:relative;display:inline-flex;align-items:center}
body.gm-page .hd nav a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;font-weight:400;font-size:.8rem;position:relative;padding:4px 0;display:inline-flex;align-items:center;gap:8px}
body.gm-page .hd nav > a::after,body.gm-page .hd nav .ni > a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .4s cubic-bezier(.16,1,.3,1)}
body.gm-page .hd nav .ni:hover > a::after{width:100%}
body.gm-page .hd nav .cx{width:8px;height:8px;transition:transform .3s}
body.gm-page .hd nav .ni:hover .cx{transform:rotate(180deg)}
body.gm-page .hd nav .dd{position:absolute;top:100%;left:-10px;background:#fff;color:var(--ink);min-width:220px;padding:8px;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.28s cubic-bezier(.16,1,.3,1);
  box-shadow:0 26px 64px -26px rgba(0,0,0,.4);z-index:5}
body.gm-page .hd nav .ni:hover .dd{opacity:1;visibility:visible;transform:translateY(6px)}
body.gm-page .hd nav .dd a{display:block;padding:10px 12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink)}
body.gm-page .hd nav .dd a::after{display:none}
body.gm-page .hd nav .dd a:hover{background:rgba(22,21,30,.06)}

body.gm-page .hd .fav{display:inline-flex;position:relative;align-items:center;justify-content:center;width:26px;height:30px}
body.gm-page .hd .fav svg{width:19px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .3s,fill .3s}
body.gm-page .hd .fav:hover svg{transform:scale(1.1)}
body.gm-page .hd .fav.has svg{fill:currentColor}
body.gm-page .hd .fav__count{position:absolute;top:-6px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:#c9a24a;color:#fff;font-family:var(--sans);font-weight:600;font-size:.6rem;line-height:16px;text-align:center;
  transform:scale(0);transition:transform .3s cubic-bezier(.16,1.4,.3,1)}
body.gm-page .hd .fav.has .fav__count{transform:scale(1)}


body.gm-page .burger{display:flex;flex-direction:column;align-items:flex-end;gap:6.5px;width:34px;height:22px;justify-content:center;
  background:none;border:none;cursor:pointer;color:inherit;padding:0}
body.gm-page .burger span{display:block;width:34px;height:1.5px;background:currentColor;transition:width .3s,transform .4s cubic-bezier(.16,1,.3,1),opacity .3s}
body.gm-page .burger span:nth-child(2){width:26px}


body.gm-page .rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:180;display:flex;flex-direction:column;
  background:rgba(18,17,24,.55);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(244,244,237,.14);border-right:none;color:var(--cream);
  transition:opacity .6s ease,transform .6s ease}
body.gm-page .pre .rail{opacity:0;transform:translateY(-50%) translateX(16px);pointer-events:none}
body.gm-page .menu-open .rail{opacity:0;transform:translateY(-50%) translateX(20px);pointer-events:none}
body.gm-page .rail__i{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  color:var(--cream);border:none;background:none;cursor:pointer;transition:background .3s}
body.gm-page .rail__i+.rail__i{border-top:1px solid rgba(244,244,237,.12)}
body.gm-page .rail__i:hover{background:rgba(244,244,237,.1)}
body.gm-page .rail__i svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}

body.gm-page .rail__i--solid svg{fill:currentColor;stroke:none}
body.gm-page .rail__i::after{content:attr(data-lbl);position:absolute;right:calc(100% + 8px);top:50%;
  transform:translateY(-50%) translateX(6px);font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-weight:400;font-size:.7rem;white-space:nowrap;background:rgba(18,17,24,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--cream);padding:8px 11px;
  border:1px solid rgba(244,244,237,.14);opacity:0;pointer-events:none;transition:.28s cubic-bezier(.16,1,.3,1)}
body.gm-page .rail__i:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
body.gm-page .rail__top{overflow:hidden;transition:height .4s cubic-bezier(.16,1,.3,1),opacity .35s ease,background .3s}
body.gm-page .rail__top:not(.show){height:0;opacity:0;pointer-events:none;border-top:none}
body.gm-page .rail__top.show{height:52px;opacity:1;pointer-events:auto}


body.gm-page .hero{position:sticky;top:0;z-index:1;height:100vh;height:100lvh;width:100%;overflow:hidden;background:#0c0b12;--gl:var(--gl-dark)}
body.gm-page .hero__media{position:absolute;inset:0;z-index:0;pointer-events:none}
body.gm-page .hero__media video{width:100%;height:100%;object-fit:cover}
body.gm-page .hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,7,12,.42),rgba(8,7,12,.2) 38%,rgba(8,7,12,.58))}

body.gm-page .hero__quote{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:min(680px,88vw);
  text-align:center;color:var(--cream);pointer-events:none}
body.gm-page .hero__q{font-family:var(--serif);font-style:normal;font-weight:300;line-height:1.21;letter-spacing:0;
  font-size:clamp(1.15rem,2vw,1.85rem);text-wrap:balance}
body.gm-page .hero__q .caps{text-transform:uppercase}
body.gm-page .hero__q em{font-style:italic;font-weight:inherit}
body.gm-page .hq__m{display:none}


@media(max-width:860px){body.gm-page .hq__m{display:revert}}

body.gm-page .hero__author{position:absolute;left:0;right:0;bottom:clamp(120px,15.5vh,190px);z-index:3;text-align:center;color:var(--cream);
  font-family:var(--sans);text-transform:uppercase;font-weight:400;letter-spacing:.2em;font-size:clamp(.72rem,1.1vw,.9rem)}

body.gm-page .giant{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  text-align:center;color:var(--cream);font-family:var(--serif);font-weight:400;line-height:.86;letter-spacing:-.05em;
  font-size:clamp(2.6rem,11.05vw,15rem);transform:translateY(22%);white-space:nowrap}
body.gm-page .scroll-hint{position:absolute;z-index:3;right:var(--gut);bottom:clamp(22px,3.4vh,42px);color:var(--cream);
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-weight:400;font-size:.68rem;
  display:inline-flex;gap:8px;align-items:center}




body.gm-page .gm-btn{position:relative;display:inline-flex;align-items:center;--btn-px:clamp(22px,2.4vw,34px);
  height:clamp(52px,4.4vw,60px);padding-left:var(--btn-px);
  padding-right:calc(var(--btn-px) + 29px);
  background:#590B11;border:1px solid #590B11;color:#fff;text-decoration:none;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-weight:400;
  font-size:clamp(.68rem,.82vw,.78rem);white-space:nowrap;
  transition:background .35s ease,color .35s ease,border-color .35s ease}

body.gm-page .gm-btn::after{content:"";position:absolute;top:0;bottom:0;right:clamp(22px,2.4vw,34px);
  width:17px;pointer-events:none;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center/17px 17px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center/17px 17px no-repeat;
  transition:transform .4s cubic-bezier(.16,.7,.25,1)}
body.gm-page .gm-btn:hover{background:transparent;color:#590B11}
body.gm-page .gm-btn:hover::after{transform:translateX(4px)}




body.gm-page .wlc{position:relative;z-index:4;background:#fff;color:var(--ink);
  height:calc(178vh + var(--climb));
  box-shadow:0 -30px 62px rgba(0,0,0,.18)}

body.gm-page .wlc__stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;
  padding:clamp(60px,10vh,120px) var(--gut);background:#fff}
body.gm-page .wlc__inner{max-width:min(1400px,100%);text-align:center;display:flex;flex-direction:column;align-items:center;will-change:transform}

body.gm-page .wlc__text{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,3vw,42px);line-height:1.3;letter-spacing:0;color:var(--ink)}
body.gm-page .wlc__text .w{display:inline-block;margin-right:.26em;opacity:.12}
body.gm-page .wlc__text .w.eol{margin-right:0}

body.gm-page .wlc__mbr{display:none}
body.gm-page .wlc__text .w.em{font-style:italic}
body.gm-page .wlc__text .w.ac{color:#590B11}

body.gm-page .wlc__text .w.gv{font-family:"Great Vibes",cursive;font-style:normal;color:#590B11;
  font-size:1.4em;line-height:.7;margin-right:.2em}
body.gm-page .wlc__btn{margin-top:clamp(22px,3.2vh,38px)}
@media(max-width:900px){
  body.gm-page .wlc{height:calc(158vh + var(--climb));box-shadow:0 -20px 46px rgba(0,0,0,.16)}
  body.gm-page .wlc__stage{height:100dvh;padding:clamp(50px,10vh,90px) var(--gut)}
  body.gm-page .wlc__inner{max-width:min(460px,88vw)}
  body.gm-page .wlc__text{font-size:clamp(1.4rem,5.6vw,1.85rem);line-height:1.31}
  
  body.gm-page .wlc__text .w.eol{margin-right:.26em}
  body.gm-page .wlc__text .w.gv.eol{margin-right:.2em}
  body.gm-page .wlc__mbr{display:inline}
}





body.gm-page .cyt{position:relative;z-index:5;background:#F5F5F5;color:var(--ink);height:calc(190vh + var(--climb));
  view-timeline-name:--cytTL;view-timeline-axis:block}
body.gm-page .cyt__stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding:clamp(60px,10vh,120px) var(--gut);background:#F5F5F5}
body.gm-page .cyt__inner{max-width:min(900px,92vw);text-align:center}

body.gm-page .cyt__text{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,3vw,42px);line-height:1.3;letter-spacing:0;white-space:nowrap}
body.gm-page .cyt__text .w{display:inline-block;margin-right:.26em;opacity:.12}

body.gm-page .cyt__text .w.eol{margin-right:0}

body.gm-page .cyt__text .w.em{font-family:"Great Vibes",cursive;font-style:normal;color:#590B11;
  font-size:1.4em;line-height:.7;margin-right:.2em}
body.gm-page .cyt__text .w.up{text-transform:uppercase}
body.gm-page .cyt__by{display:flex;flex-direction:column;gap:5px;margin-top:clamp(32px,5vh,58px)}
body.gm-page .cyt__by .nm{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-weight:400;font-size:clamp(.72rem,1vw,.9rem);color:var(--ink)}
body.gm-page .cyt__by .ro{font-family:var(--sans);font-style:italic;font-weight:300;letter-spacing:.05em;font-size:clamp(.74rem,.95vw,.86rem);color:rgba(22,21,30,.62)}




body.gm-page .abt{position:sticky;top:0;z-index:5;margin-top:calc(-1 * var(--climb));
  background:#F5F5F5;color:var(--ink);
  padding:clamp(72px,11vh,140px) var(--gut) clamp(150px,24vh,300px)}
body.gm-page .abt__wrap{max-width:1360px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,clamp(300px,34vw,470px)) minmax(0,1fr);
  gap:clamp(34px,5vw,88px);align-items:center}

body.gm-page .abt__figure{position:relative;overflow:hidden;aspect-ratio:370/493;background:rgba(22,21,30,.07)}
body.gm-page .abt__photo{width:100%;height:100%;object-fit:cover;display:block}
body.gm-page .abt__col{display:flex;flex-direction:column;align-items:flex-start}
body.gm-page .abt__kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-weight:400;
  font-size:clamp(.72rem,1vw,.9rem);color:#590B11}
body.gm-page .abt__name{margin-top:clamp(14px,2.2vh,24px);font-family:var(--serif);font-weight:400;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2.2rem,5.4vw,76px);color:var(--ink)}
body.gm-page .abt__lic{margin-top:clamp(10px,1.6vh,16px);font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.16em;font-weight:400;font-size:clamp(.66rem,.82vw,.78rem);color:rgba(22,21,30,.55)}
body.gm-page .abt__lead{margin-top:clamp(24px,3.6vh,42px);font-family:var(--sans);font-weight:300;
  font-size:clamp(1.05rem,1.65vw,26px);line-height:1.5;color:var(--ink);max-width:46ch}
body.gm-page .abt__bio{margin-top:clamp(14px,2.2vh,22px);font-family:var(--sans);font-weight:300;
  font-size:clamp(.9rem,1vw,16px);line-height:1.65;color:rgba(22,21,30,.72);max-width:56ch}
body.gm-page .abt__cta{margin-top:clamp(24px,3.4vh,38px);font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.2em;font-weight:400;font-size:clamp(.7rem,.9vw,.82rem);color:var(--ink);
  display:inline-flex;align-items:center;gap:10px}
body.gm-page .abt__cta .ar{transition:transform .35s}
body.gm-page .abt__cta:hover .ar{transform:translateX(5px)}
@media(max-width:900px){
  
  body.gm-page .abt{overflow-x:clip;padding:clamp(52px,8vh,86px) var(--gut) clamp(150px,22vh,240px)}
  body.gm-page .abt__wrap{grid-template-columns:1fr;gap:clamp(24px,4vh,38px)}
  body.gm-page .abt__figure{max-width:none;width:100%;justify-self:stretch;margin-inline:0}
  body.gm-page .abt__name{font-size:clamp(2rem,9vw,2.8rem)}
  body.gm-page .abt__lead{font-size:clamp(1.1rem,4.8vw,1.4rem)}
}


body.gm-page .lok{--lokgap:clamp(9px,1.05vw,17px);
  position:relative;z-index:7;background:#fff;color:var(--ink);
  margin-top:0;
  padding:clamp(22px,3.4vh,46px) 0 clamp(64px,10vh,120px)}

body.gm-page .lok__head{padding:0 var(--gut);margin-bottom:clamp(38px,6vh,72px)}
body.gm-page .lok__words{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:16px}
body.gm-page .lok__hw{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-weight:400;
  font-size:clamp(1.3rem,3.4vw,48px);line-height:1;color:var(--ink);white-space:nowrap}
body.gm-page .lok__words>.lok__hw:first-child{justify-self:start}
body.gm-page .lok__words>.lok__hw:last-child{justify-self:end}
body.gm-page .lok__hc{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vh,12px)}
body.gm-page .lok__kicker{font-family:var(--serif);font-style:italic;text-transform:uppercase;letter-spacing:.12em;
  color:#590B11;font-size:clamp(.72rem,.94vw,.96rem)}

body.gm-page .lok__grid{display:flex;flex-direction:column;gap:var(--lokgap);width:100%;padding:0 var(--lokgap)}
body.gm-page .lok__row{display:flex;gap:var(--lokgap)}
body.gm-page .lok__row--top{height:clamp(300px,33vw,460px)}   
body.gm-page .lok__row--bot{height:clamp(190px,21vw,290px)}   

body.gm-page .lok__tile{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:block;text-decoration:none;color:#fff;
  background:#c9c9cc;transition:flex-grow 1.15s cubic-bezier(.16,1,.3,1)}
body.gm-page .lok__row:hover .lok__tile{flex-grow:.7}
body.gm-page .lok__row .lok__tile:hover{flex-grow:2.4}

body.gm-page .lok__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.7s cubic-bezier(.16,.7,.25,1)}
body.gm-page .lok__tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,.05) 0%,rgba(10,10,12,.24) 100%);transition:background .95s ease}
body.gm-page .lok__tile:hover img{transform:scale(1.07)}
body.gm-page .lok__tile:hover::after{background:linear-gradient(180deg,rgba(10,10,12,.34) 0%,rgba(10,10,12,.62) 100%)}

body.gm-page .lok__cap{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;gap:clamp(14px,2vh,24px);padding:clamp(24px,3.4vw,54px)}
body.gm-page .lok__name{font-family:var(--serif);text-transform:uppercase;letter-spacing:.05em;color:#fff;line-height:1.05;
  white-space:nowrap;font-size:clamp(1.35rem,2.4vw,2.15rem);text-shadow:0 2px 22px rgba(0,0,0,.5);
  transition:font-size .9s cubic-bezier(.16,1,.3,1)}
body.gm-page .lok__tile:hover .lok__name{font-size:clamp(1.6rem,2.9vw,2.55rem)}

body.gm-page .lok__btn{opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .4s ease .06s,transform .5s cubic-bezier(.16,1,.3,1) .06s,background .3s ease,color .3s ease,border-color .3s ease;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-weight:400;font-size:clamp(.6rem,.74vw,.74rem);
  color:#fff;border:1px solid rgba(255,255,255,.85);padding:12px 26px;white-space:nowrap;background:transparent}
body.gm-page .lok__tile:hover .lok__btn{opacity:1;transform:translateY(0);pointer-events:auto}
body.gm-page .lok__btn:hover{background:#fff;color:#141517;border-color:#fff}

body.gm-page .lok__slider{position:relative}
body.gm-page .lok__arrow{display:none}
@media(max-width:820px){
  body.gm-page .lok{margin-top:0;box-shadow:none;padding-bottom:var(--lokgap)}
  body.gm-page .lok__head{display:flex;flex-direction:column;align-items:center;text-align:center}
  body.gm-page .lok__words{display:flex;flex-direction:column;align-items:center;gap:2px}
  
  body.gm-page .lok__hc{display:contents}
  body.gm-page .lok__kicker{order:-1;margin-bottom:clamp(6px,1.2vh,12px)}
  body.gm-page .lok__hw{font-size:clamp(1.7rem,8vw,2.3rem)}
  
  
  
  body.gm-page .lok__head{padding-top:0;padding-bottom:clamp(10px,1.6vh,16px);margin-bottom:0}
  
  body.gm-page .lok__slider{position:sticky;top:var(--lok-headtop,72px);height:auto;z-index:3;background:#fff}
  
  body.gm-page .lok__grid{flex-direction:row;flex-wrap:nowrap;overflow-x:hidden;scroll-snap-type:none;
    scrollbar-width:none;-ms-overflow-style:none;gap:var(--lokgap)}
  
  body.gm-page .lok{height:calc(var(--lok-stage,700px) + 150vh)}
  body.gm-page .lok__grid::-webkit-scrollbar{display:none}
  body.gm-page .lok__row,body.gm-page .lok__row--top,body.gm-page .lok__row--bot{display:contents}
  body.gm-page .lok__tile{flex:0 0 calc(100% - 2*var(--lokgap))!important;height:var(--lok-th,280px)}
  body.gm-page .lok__arrow{display:none!important}
  body.gm-page .lok__cap{align-items:center!important;text-align:center!important}
  body.gm-page .lok__name{font-size:clamp(1.4rem,6.5vw,1.9rem)!important}
  body.gm-page .lok__btn{opacity:1;transform:none}
}




body.gm-page .vid{position:relative;z-index:8;background:#fff;color:var(--ink);
  padding:clamp(28px,4.2vh,58px) var(--gut) clamp(20px,3vh,44px)}
body.gm-page .vid__kicker{display:block;font-family:var(--serif);font-style:italic;text-transform:uppercase;
  letter-spacing:.14em;color:#590B11;font-size:clamp(.78rem,1vw,1rem);margin-bottom:clamp(16px,2.4vh,30px)}

body.gm-page .vid__title{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;
  line-height:1.08;color:var(--ink);font-size:clamp(1.4rem,3.8vw,54px)}
body.gm-page .vid__slider{position:relative;margin-top:clamp(34px,5vh,64px);--vid-gap:clamp(12px,1.4vw,22px)}

body.gm-page .vid__track{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--vid-gap);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
body.gm-page .vid__track::-webkit-scrollbar{display:none}
body.gm-page .vid__tile{position:relative;display:block;padding:0;margin:0;border:none;cursor:pointer;
  aspect-ratio:9/16;overflow:hidden;background:#dcdcdc;color:#fff;width:100%;
  flex:0 0 calc((100% - 3*var(--vid-gap))/4);scroll-snap-align:start}
body.gm-page .vid__media{position:absolute;inset:0;display:block;overflow:hidden}
body.gm-page .vid__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,.7,.25,1)}
body.gm-page .vid__tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,12,.12) 0%,rgba(8,7,12,.1) 46%,rgba(8,7,12,.66) 100%);
  transition:background .5s ease}
body.gm-page .vid__tile:hover .vid__media img{transform:scale(1.05)}
body.gm-page .vid__tile:hover::after{background:linear-gradient(180deg,rgba(8,7,12,.3) 0%,rgba(8,7,12,.26) 46%,rgba(8,7,12,.74) 100%)}
body.gm-page .vid__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(54px,4.4vw,70px);height:clamp(54px,4.4vw,70px);border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 34px rgba(0,0,0,.34);transition:transform .4s cubic-bezier(.16,1,.3,1)}

body.gm-page .vid__play svg{width:44%;height:44%;fill:#590B11;display:block}
body.gm-page .vid__tile:hover .vid__play,body.gm-page .vid__tile:active .vid__play{transform:translate(-50%,-50%) scale(1.08)}
body.gm-page .vid__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:left;
  padding:clamp(16px,1.6vw,24px);font-family:var(--sans);font-weight:400;letter-spacing:.02em;
  line-height:1.3;font-size:clamp(.88rem,1vw,1rem);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
body.gm-page .vid__empty{font-family:var(--sans);font-weight:300;color:rgba(22,21,30,.6)}

body.gm-page .vid__arrow{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;padding:0;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:#fff;opacity:.9}
body.gm-page .vid__slider.has-nav .vid__arrow{display:inline-flex}
body.gm-page .vid__arrow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 12px rgba(0,0,0,.55))}
body.gm-page .vid__arrow--prev{left:2px}
body.gm-page .vid__arrow--next{right:2px}
@media(max-width:900px){
  body.gm-page .vid{padding-top:clamp(48px,8vh,90px)}
  body.gm-page .vid__title{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  body.gm-page .vid__slider{--vid-gap:12px}
  body.gm-page .vid__tile{flex:0 0 70%;scroll-snap-align:center}
}

body.gm-page .vlb{position:fixed;inset:0;z-index:400;background:rgba(8,7,12,.93);
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,48px)}
body.gm-page .vlb[hidden]{display:none}
body.gm-page .vlb__box{position:relative;height:min(84vh,780px);aspect-ratio:9/16;max-width:92vw;background:#000}
body.gm-page .vlb__box iframe,body.gm-page .vlb__box video{width:100%;height:100%;border:0;display:block}
body.gm-page .vlb__x{position:absolute;top:clamp(12px,2.2vw,26px);right:clamp(12px,2.2vw,26px);z-index:2;
  width:46px;height:46px;padding:0;display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:#fff;opacity:.85;transition:opacity .3s,transform .4s}
body.gm-page .vlb__x:hover{opacity:1;transform:rotate(90deg)}
body.gm-page .vlb__x svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round}


body.gm-page .blog{position:relative;z-index:8;background:#fff;color:var(--ink);padding:clamp(66px,11vh,140px) var(--gut) clamp(110px,18vh,230px)}

body.gm-page .blog__head{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,80px);align-items:end;margin-bottom:clamp(44px,6vh,78px)}
body.gm-page .blog__kicker{display:block;font-family:var(--serif);font-style:italic;text-transform:uppercase;letter-spacing:.14em;color:#590B11;font-size:clamp(.78rem,1vw,1rem);margin-bottom:clamp(16px,2.4vh,30px)}
body.gm-page .blog__title{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;line-height:1.08;color:var(--ink);font-size:clamp(1.4rem,3.8vw,54px)}
body.gm-page .blog__right{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:clamp(18px,3vh,34px);padding-top:clamp(6px,1.6vh,22px)}
body.gm-page .blog__lead{font-family:var(--sans);font-weight:300;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.5;color:rgba(22,21,30,.66);max-width:none}
body.gm-page .blog__all{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-weight:400;font-size:clamp(.72rem,.9vw,.86rem);color:var(--ink);display:inline-flex;align-items:center;gap:10px}
body.gm-page .blog__all .ar{transition:transform .35s cubic-bezier(.16,.7,.25,1)}
body.gm-page .blog__all:hover .ar{transform:translateX(6px)}

body.gm-page .blog__card{flex:0 0 clamp(280px,26vw,368px);scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid #e6e6e6;background:#fff;text-decoration:none;color:var(--ink);overflow:hidden;transition:box-shadow .4s ease,border-color .4s ease}
body.gm-page .blog__card:hover{border-color:#dcdcdc;box-shadow:0 20px 46px rgba(0,0,0,.09)}
body.gm-page .blog__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#dcdcdc;display:block}
body.gm-page .blog__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,.7,.25,1)}
body.gm-page .blog__card:hover .blog__media img{transform:scale(1.05)}
body.gm-page .blog__body{display:flex;flex-direction:column;gap:clamp(12px,1.6vh,18px);padding:clamp(22px,2.2vw,32px)}
body.gm-page .blog__ct{font-family:var(--sans);font-weight:500;letter-spacing:.01em;line-height:1.3;font-size:clamp(1.05rem,1.25vw,1.2rem);color:var(--ink)}
body.gm-page .blog__ex{font-family:var(--sans);font-weight:300;line-height:1.55;font-size:clamp(.9rem,1vw,1rem);color:rgba(22,21,30,.62)}
body.gm-page .blog__more{margin-top:clamp(4px,.8vh,12px);font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-weight:400;font-size:clamp(.66rem,.78vw,.78rem);color:var(--ink);display:inline-flex;align-items:center;gap:9px}
body.gm-page .blog__more .ar{transition:transform .35s cubic-bezier(.16,.7,.25,1)}
body.gm-page .blog__card:hover .blog__more .ar{transform:translateX(5px)}


body.gm-page .blog__slider{position:relative}
body.gm-page .blog__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1vw,16px);
  grid-auto-rows:clamp(210px,20vw,300px)}
body.gm-page .blog__tiles>.blog__tile:nth-child(1),body.gm-page .blog__tiles>.blog__tile:nth-child(4){grid-column:span 2}
body.gm-page .blog__tile{position:relative;display:block;overflow:hidden;background:#dcdcdc;color:#fff;text-decoration:none}
body.gm-page .blog__tmedia{position:absolute;inset:0;display:block;overflow:hidden}
body.gm-page .blog__tmedia img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,.7,.25,1)}
body.gm-page .blog__tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,12,.06) 0%,rgba(8,7,12,.6) 100%);transition:background .55s ease}
body.gm-page .blog__tile:hover::after{background:linear-gradient(180deg,rgba(8,7,12,.44) 0%,rgba(8,7,12,.8) 100%)}
body.gm-page .blog__tile:hover .blog__tmedia img{transform:scale(1.05)}
body.gm-page .blog__tbody{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;
  gap:clamp(8px,1vh,12px);padding:clamp(18px,1.8vw,30px)}
body.gm-page .blog__tt{font-family:var(--sans);font-weight:500;letter-spacing:.01em;line-height:1.25;
  font-size:clamp(1rem,1.15vw,1.16rem);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.4)}

body.gm-page .blog__tx{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1),opacity .4s ease;
  font-family:var(--sans);font-weight:300;line-height:1.5;
  font-size:clamp(.85rem,.95vw,.96rem);color:rgba(255,255,255,.88)}
body.gm-page .blog__tx>span{overflow:hidden}
body.gm-page .blog__tile:hover .blog__tx{grid-template-rows:1fr;opacity:1}
body.gm-page .blog__tmore{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-weight:400;
  font-size:clamp(.62rem,.74vw,.74rem);color:#fff;display:inline-flex;align-items:center;gap:9px}
body.gm-page .blog__tmore .ar{display:inline-block;transition:transform .35s cubic-bezier(.16,.7,.25,1)}
body.gm-page .blog__tile:hover .blog__tmore .ar{transform:translateX(5px)}

body.gm-page .blog__arrow{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;padding:0;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:#fff;opacity:.9}
body.gm-page .blog__arrow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 12px rgba(0,0,0,.55))}
body.gm-page .blog__arrow--prev{left:2px}
body.gm-page .blog__arrow--next{right:2px}
@media(max-width:900px){
  body.gm-page .blog__tiles{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;gap:12px;scrollbar-width:none;-ms-overflow-style:none}
  body.gm-page .blog__tiles::-webkit-scrollbar{display:none}
  body.gm-page .blog__tile{flex:0 0 100%;height:clamp(300px,74vw,420px);scroll-snap-align:center}
  
  body.gm-page .blog__tx{grid-template-rows:1fr;opacity:1}
  body.gm-page .blog__tile::after{background:linear-gradient(180deg,rgba(8,7,12,.4) 0%,rgba(8,7,12,.78) 100%)}
  body.gm-page .blog__arrow{display:inline-flex}
}
@media(max-width:820px){
  body.gm-page .blog{padding-top:clamp(48px,8vh,90px);padding-bottom:clamp(30px,5vh,56px)}
  body.gm-page .blog__head{grid-template-columns:1fr;gap:18px;margin-bottom:34px}
  body.gm-page .blog__right{align-items:flex-start;text-align:left}
  body.gm-page .blog__lead{max-width:none}
  body.gm-page .blog__lead br{display:none}
  body.gm-page .blog__title{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  body.gm-page .blog__card{flex-basis:80vw}
  body.gm-page .blog__nav{justify-content:center}
}



body.gm-page .cta{position:relative;z-index:6;overflow:hidden;min-height:clamp(440px,64vh,760px);display:flex;align-items:center;justify-content:center;text-align:center;
  padding:clamp(80px,14vh,160px) var(--gut);color:#fff;
  background:#2a2f33 url('https://test.boost4media.pl/wp-content/uploads/2026/08/cta-bg.jpg') center center/cover fixed no-repeat}

body.gm-page .cta__bg{display:none;position:fixed;left:0;top:0;width:100%;height:100vh;z-index:0;pointer-events:none;
  background:#2a2f33 url('https://test.boost4media.pl/wp-content/uploads/2026/08/cta-bg.jpg') center center/cover no-repeat}
body.gm-page .cta::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,12,.48) 0%,rgba(10,10,12,.62) 100%)}
body.gm-page .cta__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(32px,5.5vh,60px);max-width:1100px}
body.gm-page .cta__title{font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.07em;line-height:1.24;
  font-size:clamp(1.5rem,3.4vw,3rem);color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.4);text-wrap:balance}
body.gm-page .cta__btns{display:flex;flex-direction:column;align-items:center;gap:clamp(13px,1.7vh,18px)}
body.gm-page .cta__btn{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-weight:400;font-size:clamp(.7rem,.86vw,.84rem);
  padding:16px 44px;min-width:clamp(280px,26vw,360px);text-align:center;border:1px solid rgba(255,255,255,.8);color:#fff;background:transparent;
  text-decoration:none;transition:background .3s ease,color .3s ease,border-color .3s ease}
body.gm-page .cta__btn:hover{background:#fff;color:#141517;border-color:#fff}
@media(max-width:820px){
  body.gm-page .cta{min-height:clamp(380px,58vh,560px);padding-top:clamp(56px,10vh,110px);padding-bottom:clamp(56px,10vh,110px);background-image:none}
  body.gm-page .cta.bg-on .cta__bg{display:block}
  body.gm-page .cta__title{font-size:clamp(1.4rem,7vw,2.05rem);max-width:none}
  body.gm-page .cta__btns{width:100%;max-width:360px}
  body.gm-page .cta__btn{width:100%;min-width:0}
}



body.gm-page .ft{position:relative;z-index:6;background:#09090B;color:#fff;overflow:hidden;padding:clamp(60px,9vh,110px) var(--gut) 0}
body.gm-page .ft__top{display:flex;align-items:center;justify-content:center;gap:clamp(2px,0.4vw,7px);flex-wrap:wrap}
body.gm-page .ft__navcol{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(11px,1.6vh,17px)}
body.gm-page .ft__nav{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(5px,0.85vh,8px);text-align:right}
body.gm-page .ft__nav a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-weight:400;font-size:clamp(.62rem,.76vw,.76rem);color:rgba(255,255,255,.82);text-decoration:none;transition:color .3s}
body.gm-page .ft__nav a:hover{color:#fff}
body.gm-page .ft__logo{display:block}
body.gm-page .ft__logo img{height:clamp(86px,10.2vw,138px);width:auto;display:block;filter:brightness(0) invert(1)}
body.gm-page .ft__social{display:flex;justify-content:flex-end;gap:clamp(14px,1.4vw,20px)}
body.gm-page .ft__social a{color:rgba(255,255,255,.68);display:inline-flex;align-items:center;justify-content:center;transition:color .3s ease}
body.gm-page .ft__social a:hover{color:#fff}
body.gm-page .ft__social svg{width:20px;height:20px;fill:currentColor;display:block}
body.gm-page .ft__meta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(108px,15.5vh,216px)}
body.gm-page .ft__copy,body.gm-page .ft__by{font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-weight:400;font-size:clamp(.62rem,.74vw,.74rem);color:rgba(255,255,255,.55)}
body.gm-page .ft__by a{color:rgba(255,255,255,.78);text-decoration:none}
body.gm-page .ft__by a:hover{color:#fff}
body.gm-page .ft__wordmark{font-family:var(--serif);text-transform:uppercase;letter-spacing:-.02em;line-height:.82;color:#fff;
  font-size:clamp(2.4rem,10.5vw,13.6rem);white-space:nowrap;text-align:center;transform:translate(-0.5%,22%);margin:clamp(-18px,-1.3vh,-6px) calc(-1*var(--gut)) 0;pointer-events:none}
@media(max-width:820px){
  body.gm-page .ft__top{flex-direction:column;gap:26px}
  body.gm-page .ft__navcol{align-items:center}
  body.gm-page .ft__nav{align-items:center;text-align:center}
  body.gm-page .ft__social{justify-content:center}
  body.gm-page .ft__meta{flex-direction:column;align-items:center;text-align:center;gap:10px}
  body.gm-page .ft__wordmark{white-space:normal;font-size:clamp(2.4rem,15vw,4.2rem);line-height:.9;transform:translateY(10%)}
}


body.gm-page .bnh{position:relative;z-index:4;margin-top:calc(-1 * var(--climb));background:#fff;color:var(--ink);
  
  --white:#fff;--bg-dark:var(--ink);--grey-2:rgba(22,21,30,.5);--bn-grey:rgba(22,21,30,.6);--header-h:78px}
body.gm-page .bnh .container{width:100%;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
body.gm-page .bnh__stage{position:sticky;top:0;height:100vh;overflow:hidden}

body.gm-page .bnh__track{position:absolute;top:72px;left:12px;display:flex;flex-wrap:nowrap;width:max-content;max-width:none;gap:var(--cgap,24px);z-index:1;will-change:transform}
body.gm-page .bnh__card{flex:0 0 auto;width:var(--cw,calc(100vw - 24px));height:var(--ch,calc(100vh - 84px));border-radius:0;
  overflow:hidden;background:#e7e7e9;position:relative;display:block;text-decoration:none;color:inherit}
body.gm-page .bnh__card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.16,.7,.25,1)}

body.gm-page .bnh__card:hover img{transform:scale(1.05)}

body.gm-page .bnh__card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg,rgba(8,7,12,.5) 0%,rgba(8,7,12,.1) 30%,rgba(8,7,12,0) 54%,rgba(8,7,12,.44) 100%)}

body.gm-page .bnh__label{position:absolute;top:clamp(22px,2.8vw,48px);left:clamp(24px,3vw,52px);z-index:3;color:var(--cream);
  font-family:var(--serif);text-transform:uppercase;font-weight:400;letter-spacing:-.02em;line-height:1;
  font-size:clamp(1.9rem,3.6vw,3.1rem)}
body.gm-page .bnh__label .n{font-size:.64em;letter-spacing:.02em;opacity:.92;margin-right:.14em}

body.gm-page .bnh__cta{position:absolute;bottom:clamp(22px,2.6vw,44px);right:clamp(24px,3vw,52px);z-index:3;color:var(--cream);
  display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-weight:400;font-size:clamp(.68rem,.9vw,.8rem)}
body.gm-page .bnh__cta .ar{display:inline-block;transition:transform .4s cubic-bezier(.16,.7,.25,1)}
body.gm-page .bnh__card:hover .bnh__cta .ar{transform:translateX(6px)}
body.gm-page .bnh__hero{position:absolute;inset:0;z-index:2;will-change:transform,opacity;pointer-events:none}
body.gm-page .bnh__hero a{pointer-events:auto}
body.gm-page .bnh__hero-inner{height:100%;display:flex;flex-direction:column;
  padding-top:calc(var(--header-h) + clamp(22px,3.5vh,48px));padding-bottom:clamp(26px,4vh,54px)}
body.gm-page .bnh__kicker{display:block;font-family:var(--serif);font-size:clamp(.9rem,1.05vw,1rem);font-weight:400;
  letter-spacing:.02em;text-transform:uppercase;color:#590B11}
body.gm-page .bnh__h{margin-top:clamp(8px,1.3vh,16px);font-family:var(--sans);font-weight:400;font-size:clamp(1.4rem,3.8vw,54px);
  line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;color:#0a0a0a;max-width:none;white-space:nowrap}
body.gm-page .bnh__lead{margin-top:clamp(16px,2.2vh,26px);font-family:var(--sans);font-weight:300;
  font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:rgba(10,10,10,.82);max-width:none}



body.gm-page .ofr{position:sticky;top:0;z-index:4;background:#fff;color:#000;padding:clamp(66px,10vh,116px) var(--gut) clamp(96px,15vh,180px)}

body.gm-page .ofr__head{position:relative;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3vw,48px);text-align:left;margin-bottom:clamp(28px,4.2vh,52px)}
body.gm-page .ofr__head-l{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
body.gm-page .ofr__kicker{display:block;font-family:var(--serif);font-size:clamp(.9rem,1.05vw,1rem);font-weight:400;
  letter-spacing:.02em;text-transform:uppercase;color:#590B11;margin-bottom:clamp(4px,1vh,10px)}
body.gm-page .ofr__title{display:block;margin-top:clamp(8px,1.3vh,16px);font-family:var(--sans);font-weight:400;
  font-size:clamp(1.4rem,3.8vw,54px);line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;
  color:#0a0a0a;white-space:nowrap}

body.gm-page .ofr__brk{display:none}
body.gm-page .ofr__title .sm,body.gm-page .ofr__title .lg{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}

body.gm-page .ofr__title .sm+.lg::before,body.gm-page .ofr__title .lg+.sm::before{content:"\00a0"}


body.gm-page .ofr__btn{flex:0 0 auto;align-self:flex-end;margin-bottom:clamp(2px,.6vh,8px);
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;
  font-weight:400;font-size:clamp(.64rem,.82vw,.75rem);color:#000;border:1px solid #000;padding:12px 22px;
  transition:background .3s ease,color .3s ease;white-space:nowrap}
body.gm-page .ofr__btn:hover{background:#000;color:#fff}


body.gm-page .ofr__list{margin-top:0}
body.gm-page .ofr__vp{position:relative;overflow:hidden;background:#e7e7e9;touch-action:pan-y}


body.gm-page .ofr__track{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:0;width:100%;
  transition:transform .85s cubic-bezier(.16,1,.3,1);will-change:transform}
body.gm-page .ofr__card{flex:0 0 100%;width:100%;max-width:100%;min-width:0;position:relative;display:block;
  height:clamp(420px,68vh,760px);text-decoration:none;color:#fff}
body.gm-page .ofr__media{position:absolute;inset:0;display:block;overflow:hidden;background:#e7e7e9}
body.gm-page .ofr__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,.7,.25,1)}
body.gm-page .ofr__card:hover .ofr__media img{transform:scale(1.04)}

body.gm-page .ofr__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,12,.34) 0%,rgba(8,7,12,.06) 34%,rgba(8,7,12,.62) 100%)}
body.gm-page .ofr__badge{position:absolute;top:clamp(16px,1.8vw,26px);left:clamp(16px,1.8vw,26px);z-index:2;background:rgba(18,17,24,.55);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(244,244,237,.14);color:var(--cream);
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-weight:400;font-size:.62rem;line-height:1;padding:7px 12px}

body.gm-page .ofr__cap{position:absolute;right:clamp(22px,5vw,92px);bottom:clamp(58px,8.5vh,96px);z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  gap:clamp(5px,.8vh,9px);max-width:min(780px,82%)}
body.gm-page .ofr__ttl{font-family:var(--serif);text-transform:uppercase;letter-spacing:-.01em;line-height:1.04;
  font-size:clamp(1.8rem,3.6vw,3.2rem);color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.45)}
body.gm-page .ofr__loc{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-weight:300;
  font-size:clamp(.7rem,.92vw,.86rem);color:rgba(255,255,255,.92)}
body.gm-page .ofr__go{margin-top:clamp(14px,2vh,24px);display:inline-flex;align-items:center;gap:12px;
  border:1px solid rgba(255,255,255,.8);padding:13px 24px;background:transparent;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-weight:400;
  font-size:clamp(.64rem,.8vw,.75rem);color:#fff;transition:background .3s ease,color .3s ease}
body.gm-page .ofr__go .ar{display:inline-block;transition:transform .35s cubic-bezier(.16,.7,.25,1)}
body.gm-page .ofr__card:hover .ofr__go{background:#fff;color:#141517}
body.gm-page .ofr__card:hover .ofr__go .ar{transform:translateX(5px)}

body.gm-page .ofr__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:clamp(38px,3.2vw,52px);height:clamp(38px,3.2vw,52px);padding:0;
  display:inline-flex;align-items:center;justify-content:center;background:none;border:none;
  cursor:pointer;color:#fff;opacity:.85;transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
body.gm-page .ofr__arrow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}
body.gm-page .ofr__arrow:hover{opacity:1}
body.gm-page .ofr__arrow--prev{left:clamp(4px,1.2vw,20px)}
body.gm-page .ofr__arrow--next{right:clamp(4px,1.2vw,20px)}

body.gm-page .ofr__arrow--prev:hover{transform:translateY(-50%) translateX(-4px)}
body.gm-page .ofr__arrow--next:hover{transform:translateY(-50%) translateX(4px)}
body.gm-page .ofr__dots{position:absolute;left:0;right:0;bottom:clamp(16px,2.4vh,28px);z-index:4;
  display:flex;justify-content:center;gap:10px;pointer-events:none}
body.gm-page .ofr__dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);border:none;
  padding:0;cursor:pointer;pointer-events:auto;transition:background .3s ease,transform .3s ease}
body.gm-page .ofr__dot.is-on{background:#fff;transform:scale(1.3)}
@media(max-width:760px){
  body.gm-page .ofr__card{height:clamp(400px,64vh,560px)}
  
  body.gm-page .ofr__cap{left:20px;right:20px;bottom:clamp(52px,8vh,74px);align-items:flex-start;text-align:left;max-width:none}
  
  body.gm-page .ofr__ttl{font-size:clamp(1.15rem,5.4vw,1.6rem)}
  body.gm-page .ofr__btn{align-self:flex-start;margin-top:22px;margin-bottom:0}
}

@media(max-width:900px){
  body.gm-page .reveal{position:static}
  body.gm-page .join__spacer{display:none}
  
  
  
  body.gm-page .hd.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}
  body.gm-page .hd.scrolled.hd--light{background:rgba(255,255,255,.93)}
  body.gm-page .hd.scrolled.hd--dark{background:rgba(20,21,23,.86)}
  body.gm-page .rail{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,17,24,.84)}
  body.gm-page .ofr__badge{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,17,24,.78)}
  
  body.gm-page .bnh__hero{will-change:auto}
  body.gm-page .ofr__media{background:#e7e7e9}
  body.gm-page .bnh{height:360vh!important}
  
  
  body.gm-page .ofr{padding-top:clamp(14px,2vh,32px);margin-top:-80px}
  body.gm-page .bnh__hero-inner{padding-top:calc(var(--header-h) + 14px)}
  body.gm-page .bnh__h{font-size:clamp(1.8rem,7vw,2.2rem);line-height:1.14;white-space:normal}
  body.gm-page .bnh__lead{max-width:100%}
  
  body.gm-page .bnh__label{font-size:clamp(1.5rem,6.4vw,2rem);top:18px;left:18px}
  
  body.gm-page .bnh__cta{letter-spacing:.12em;right:18px;bottom:18px;font-size:.72rem}
}

@media(max-width:900px){
  

  
  body.gm-page .ofr{margin-top:-28px}

  

  
  body.gm-page .lok{padding-top:clamp(46px,6.4vh,62px)}
  body.gm-page .lok__kicker{font-size:clamp(.9rem,1.05vw,1rem)}

  
  body.gm-page .lok__tile::after{background:linear-gradient(180deg,rgba(10,10,12,.34) 0%,rgba(10,10,12,.62) 100%)}

  
  body.gm-page .lok__tile:active .lok__btn,body.gm-page .lok__btn:active{background:#fff;color:#141517;border-color:#fff}
  body.gm-page .lok__tile:active img{transform:scale(1.07)}
  body.gm-page .bnh__card:active .bnh__cta .ar,body.gm-page .ofr__card:active .ofr__cta .ar{transform:translateX(6px)}

}



@supports (animation-timeline: view()){
  html{timeline-scope:--bnhTL}
  body.gm-page .bnh{view-timeline-name:--bnhTL;view-timeline-axis:block}
  body.gm-page .wlc__inner{animation:wlcLift linear both;animation-timeline:--bnhTL;
    animation-range:entry 0px entry var(--climb)}
  
  body.gm-page .cyt__inner{animation:cytLift linear both;animation-timeline:--cytTL;
    animation-range:contain calc(100% - var(--climb)) contain 100%}
  @media(max-width:900px){
    body.gm-page .bnh{view-timeline-name:--bnhTL;view-timeline-axis:block}
    body.gm-page .bnh__track{animation:bnhTrack linear both;animation-timeline:--bnhTL;animation-range:contain 0% contain 100%}
    
    body.gm-page .bnh__card{opacity:1!important}
    body.gm-page .bnh__card--1{transform-origin:100% 100%;animation:bnhGrow linear both;
      animation-timeline:--bnhTL;animation-range:contain 0% contain 100%}
  }
}
@keyframes wlcLift{from{translate:0 0}to{translate:0 -19vh}}
@keyframes cytLift{from{translate:0 0}to{translate:0 -9vh}}
@keyframes bnhTrack{0%,20%{transform:translate3d(0,0,0)}100%{transform:translate3d(calc(-4 * var(--step,378px) + var(--endgap,0px)),0,0)}}
@keyframes bnhGrow{0%{transform:scale(var(--sc0,.6));animation-timing-function:cubic-bezier(.33,1,.68,1)}16%,100%{transform:scale(1)}}


body.gm-page .loader{position:fixed;inset:0;z-index:300;overflow:hidden}
body.gm-page .loader.done{pointer-events:none}
body.gm-page .curtain{position:absolute;inset:0;z-index:1;display:flex}

body.gm-page .curtain span{flex:1;height:100%;background:#09090B}
body.gm-page .curtain span+span{box-shadow:-1px 0 0 #18181D}
@media(max-width:820px){body.gm-page .curtain span:nth-child(n+6){display:none}}
body.gm-page .loader__center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:clamp(256px,32vw,448px)}
body.gm-page .loader__center img{width:100%;height:auto;display:block;filter:brightness(0) invert(1)}
body.gm-page .loader__side{position:absolute;top:50%;transform:translateY(-50%);z-index:3;color:#fff;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-weight:400;font-size:.66rem;line-height:1.9}
body.gm-page .loader__side.l{left:var(--gut);text-align:left}
body.gm-page .loader__side.r{right:var(--gut);text-align:right}
body.gm-page .loader__side .rl{display:block;overflow:hidden}
body.gm-page .loader__side .rl>span{display:block}
body.gm-page .logo-stage{position:relative;width:100%}
body.gm-page .logo-stage img{display:block;width:100%;height:auto;will-change:clip-path}
body.gm-page .frame-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
body.gm-page .frame-svg .frame-draw{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter}


body.gm-page .pre .hero__quote,body.gm-page .pre .hero__author,body.gm-page .pre .giant,body.gm-page .pre .scroll-hint{opacity:0}


body.gm-page .mmenu{position:fixed;inset:0;z-index:250;background:transparent;color:var(--ink);overflow:hidden;
  visibility:hidden;transition:visibility .7s}
body.gm-page .mmenu.open{visibility:visible;transition:visibility 0s}

body.gm-page .mmenu__stripes{position:absolute;inset:0;z-index:0;display:flex;pointer-events:none}
body.gm-page .mmenu__stripes span{flex:1;height:100%;background:#fff;transform:translateY(-102%);
  transition:transform .62s cubic-bezier(.76,0,.24,1)}
body.gm-page .mmenu__stripes span+span{box-shadow:-1px 0 0 var(--gl-light)}
body.gm-page .mmenu.open .mmenu__stripes span{transform:translateY(0)}
body.gm-page .mmenu.open .mmenu__stripes span:nth-child(2){transition-delay:.04s}
body.gm-page .mmenu.open .mmenu__stripes span:nth-child(3){transition-delay:.08s}
body.gm-page .mmenu.open .mmenu__stripes span:nth-child(4){transition-delay:.12s}
body.gm-page .mmenu.open .mmenu__stripes span:nth-child(5){transition-delay:.16s}
body.gm-page .mmenu.open .mmenu__stripes span:nth-child(6){transition-delay:.20s}
body.gm-page .mmenu.open .mmenu__stripes span:nth-child(7){transition-delay:.24s}
body.gm-page .mmenu.open .mmenu__stripes span:nth-child(8){transition-delay:.28s}

body.gm-page .mmenu__cols,body.gm-page .mmenu__foot,body.gm-page .mmenu__wordmark{opacity:0;transition:opacity .55s ease}
body.gm-page .mmenu.open .mmenu__cols,body.gm-page .mmenu.open .mmenu__foot,body.gm-page .mmenu.open .mmenu__wordmark{opacity:1;transition-delay:.46s}

body.gm-page .mmenu__x{position:absolute;top:clamp(18px,2.2vw,38px);right:var(--gut);z-index:3;width:60px;height:60px;
  background:none;border:none;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:color .3s,transform .45s cubic-bezier(.16,1,.3,1),opacity .5s ease}
body.gm-page .mmenu.open .mmenu__x{opacity:1;transition-delay:.54s}

body.gm-page .mmenu__x svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:.85;stroke-linecap:round}
body.gm-page .mmenu__x:hover{color:#590B11;transform:rotate(90deg)}

body.gm-page .mmenu__cols{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.1vw,44px);
  padding:clamp(96px,15vh,172px) var(--gut) 0}
body.gm-page .mcol__h{display:flex;align-items:baseline;gap:.4em;width:100%;background:none;border:none;text-align:left;cursor:default;
  padding:0 0 clamp(22px,2.8vh,36px);color:#590B11;
  font-family:var(--serif);text-transform:uppercase;font-weight:500;letter-spacing:.02em;font-size:clamp(1rem,1.32vw,1.4rem);line-height:1.06}
body.gm-page .mcol__n{font-size:.82em;letter-spacing:.03em}
body.gm-page .mcol__ar{display:none}
body.gm-page .mcol__items{display:flex;flex-direction:column;gap:clamp(11px,1.5vh,18px)}
body.gm-page .mcol__items a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-weight:400;
  font-size:clamp(.8rem,1vw,1rem);line-height:1.35;color:var(--ink);text-decoration:none;transition:color .25s,transform .3s}
body.gm-page .mcol__items a:hover{color:#590B11;transform:translateX(4px)}

body.gm-page .mmenu__foot{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(150px,22vh,272px);z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
body.gm-page .mmenu__contact{display:flex;flex-direction:column;gap:6px}
body.gm-page .mmenu__contact a{font-family:var(--sans);font-size:clamp(.86rem,1vw,1.02rem);color:var(--ink);text-decoration:none;transition:color .25s}
body.gm-page .mmenu__contact a:hover{color:#590B11}
body.gm-page .mmenu__social{display:flex;gap:clamp(15px,1.5vw,22px)}
body.gm-page .mmenu__social a{color:var(--ink);display:inline-flex;transition:color .25s}
body.gm-page .mmenu__social a:hover{color:#590B11}
body.gm-page .mmenu__social svg{width:20px;height:20px;fill:currentColor;display:block}

body.gm-page .mmenu__wordmark{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  font-family:var(--serif);text-transform:uppercase;letter-spacing:-.05em;line-height:.86;color:#590B11;
  font-size:clamp(2.6rem,11.05vw,15rem);white-space:nowrap;text-align:center;transform:translateY(22%)}

@media(max-width:820px){
  body.gm-page .mmenu{display:flex;flex-direction:column;overflow:hidden}  
  body.gm-page .mmenu__stripes span:nth-child(n+6){display:none}  
  body.gm-page .mmenu__cols{grid-template-columns:1fr;gap:0;flex:0 0 auto;
    padding:clamp(58px,9vh,88px) var(--gut) clamp(12px,1.8vh,20px) clamp(92px,24vw,132px)}
  body.gm-page .mcol{border-top:1px solid var(--gl-light)}
  body.gm-page .mcol:first-child{border-top:none}
  body.gm-page .mcol__h{cursor:pointer;padding:clamp(11px,1.7vh,15px) 0;font-size:clamp(1.05rem,4.8vw,1.36rem)}
  body.gm-page .mcol__ar{display:inline-flex;margin-left:auto;align-self:center;color:#590B11;transition:transform .35s cubic-bezier(.16,1,.3,1)}
  body.gm-page .mcol__ar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}
  body.gm-page .mcol__items{max-height:0;overflow:hidden;padding-left:clamp(22px,6vw,34px);gap:clamp(8px,1.3vh,13px);opacity:0;padding-bottom:0;
    transition:max-height .42s cubic-bezier(.16,1,.3,1),opacity .35s ease,padding-bottom .42s}
  body.gm-page .mcol--open .mcol__items{max-height:340px;opacity:1;padding-bottom:clamp(10px,1.7vh,15px)}
  body.gm-page .mcol--open .mcol__ar{transform:rotate(180deg)}  
  body.gm-page .mcol__items a{font-size:clamp(.84rem,3.6vw,.98rem)}
  
  body.gm-page .mmenu__wordmark{writing-mode:vertical-rl;transform:rotate(180deg);left:clamp(-22px,-4vw,-12px);right:auto;top:0;bottom:0;
    height:100vh;display:flex;align-items:center;justify-content:flex-start;padding:0;
    font-size:clamp(3.7rem,24.5vw,150px);line-height:.9;text-align:start}
  body.gm-page .mmenu__foot{position:static;margin:0 var(--gut) clamp(22px,4vh,40px) clamp(92px,24vw,132px);margin-top:auto;
    flex-direction:column;align-items:flex-start;gap:clamp(9px,1.8vh,15px)}
  body.gm-page .mmenu__social{order:-1}  
}

@media(max-width:860px){
  body.gm-page .hd nav{display:none}
  body.gm-page .hd .right{margin-left:auto;gap:18px}
  
  body.gm-page .hero__quote{top:50%;width:90vw}
  
  body.gm-page .hero__author{bottom:clamp(172px,30vh,250px)}
  
  body.gm-page .giant{white-space:normal;font-size:clamp(2.7rem,17vw,6.2rem);line-height:.9;transform:translateY(12%)}
  
  body.gm-page .rail{top:auto;bottom:0;right:0;flex-direction:row;border-right:none;border-bottom:none;
    opacity:0;pointer-events:none;transform:translateY(120%);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
  body.gm-page.scrolled-page:not(.menu-open) .rail{opacity:1;pointer-events:auto;transform:translateY(0)}
  body.gm-page .menu-open .rail{transform:translateY(120%)}
  body.gm-page .pre .rail{opacity:0;transform:translateY(120%)}
  body.gm-page .rail__i+.rail__i{border-top:none;border-left:1px solid rgba(244,244,237,.12)}
  body.gm-page .rail__top{transition:width .4s cubic-bezier(.16,1,.3,1),opacity .35s ease,background .3s}
  
  body.gm-page .rail__i{width:46px;height:46px}
  body.gm-page .rail__i svg{width:17px;height:17px}
  body.gm-page .rail__top:not(.show){width:0;height:46px;border-left:none;border-top:none}
  body.gm-page .rail__top.show{width:46px;height:46px}
  body.gm-page .rail__i::after{right:auto;left:50%;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(6px)}
  body.gm-page .rail__i:hover::after{transform:translateX(-50%) translateY(0)}
  body.gm-page .reveal{min-height:100vh}
  
  body.gm-page .loader__center{width:clamp(216px,65.6vw,336px)}
  body.gm-page .loader__side{top:auto;bottom:auto;left:0;right:0;width:100%;transform:none;text-align:center;padding:0 var(--gut)}
  body.gm-page .loader__side.l{top:clamp(40px,8vh,80px)}
  body.gm-page .loader__side.r{bottom:clamp(40px,8vh,80px)}
  body.gm-page .loader__side .rl{font-size:.72rem;line-height:1.45}
}




body.gm-page .hero{--safe:0px}
@supports (height:100svh){ body.gm-page .hero{--safe:calc(100lvh - 100svh)} }

@media(max-width:860px){
  
  body.gm-page .hero{--giant-fs:clamp(2.7rem,17vw,6.2rem)}
  
  body.gm-page .giant{font-size:var(--giant-fs);transform:none;bottom:calc(var(--safe) - 15px)}
  
  
  body.gm-page .hero__author{bottom:calc(var(--safe) - 15px + 1.8 * var(--giant-fs) + 18px)}

  
  
  
  
  body.gm-page .mmenu__wordmark{height:100svh;font-size:min(clamp(3.7rem,24.5vw,150px),9.5svh);
    left:clamp(-22px,-4vw,-12px);justify-content:center}

  
  body.gm-page .cyt__text{white-space:normal;font-size:clamp(1.25rem,5.4vw,1.7rem);line-height:1.34}
  body.gm-page .cyt__text br{display:none}
  
  body.gm-page .cyt__text .w.eol{margin-right:.26em}
  body.gm-page .cyt__text .w.em.eol{margin-right:.2em}
  body.gm-page .cyt__inner{max-width:min(440px,88vw)}

  
  body.gm-page .ofr__head,body.gm-page .ofr__head-l{align-items:flex-start;text-align:left}
  body.gm-page .ofr__title{justify-content:flex-start}
  body.gm-page .abt__kicker{text-align:left}
  body.gm-page .lok__head,body.gm-page .lok__words,body.gm-page .lok__hc{align-items:flex-start;text-align:left}
  
  body.gm-page .cta{justify-content:center;text-align:center}
  body.gm-page .cta__in,body.gm-page .cta__btns{align-items:center}

  
  body.gm-page .ofr__head{flex-direction:column;align-items:flex-start}
  body.gm-page .ofr__title{white-space:normal;line-height:1.12;font-size:clamp(1.7rem,7.4vw,2.4rem)}
  body.gm-page .ofr__brk{display:revert}
  body.gm-page .ofr__title .lg{white-space:pre-line}


  
  body.gm-page .ft__meta{margin-top:clamp(24px,3.4vh,40px)}

  
  body.gm-page.scrolled-page.ft-visible .rail{opacity:0;pointer-events:none;transform:translateY(120%)}

  
  body.gm-page .ft{box-shadow:0 40vh 0 #141517, 0 80vh 0 #141517}

  
  html,body.gm-page{overflow-x:clip}
}


/* ===== 3. MOST: klasa makiety jest na wrapperze, treść siedzi w środku ===== */
body.gm-page .elementor-widget-heading .elementor-heading-title{
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  line-height:inherit; text-align:inherit; white-space:inherit; margin:0; padding:0; display:block;
}
:where(body.gm-page .elementor-widget-image) img{ display:block; max-width:100%; height:auto; }
body.gm-page .abt__photo img, body.gm-page .bnh__card img, body.gm-page .lok__tile img,
body.gm-page .ofr__media img, body.gm-page .blog__media img{ width:100%; height:100%; object-fit:cover; }
body.gm-page .elementor-widget-button .elementor-button,
body.gm-page .elementor-widget-button .elementor-button-content-wrapper,
body.gm-page .elementor-widget-button .elementor-button-text{
  all:unset; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer;
}
/* nakładka linku (kontener Elementora nie renderuje <a>) */
body.gm-page .gm-ovl{ position:absolute; inset:0; z-index:6; display:block; }
body.gm-page .bnh__card, body.gm-page .lok__tile{ position:relative; }
body.gm-page{ overflow-x:clip; }


/* ===== 4. POPRAWKI PO PRZEGLĄDZIE SEBA (04.08) ===== */

/* Wrappery widgetów HTML wewnątrz kaflowych sekcji muszą być PRZEZROCZYSTE dla layoutu,
   inaczej elementy pozycjonowane absolutnie (wideo hero, „Przejdź do ofert", podpisy kafli)
   liczą się względem wrappera zamiast karty. */
body.gm-page #hero > .elementor-widget-html,
body.gm-page .bnh__card > .elementor-widget-html,
body.gm-page .lok__tile > .elementor-widget-html,
body.gm-page .cta > .elementor-widget-html,
body.gm-page .abt__col > .elementor-widget-html,
body.gm-page .cyt__inner > .elementor-widget-html,
body.gm-page .lok__slider > .elementor-widget-html,
body.gm-page .vid > .elementor-widget-shortcode,
body.gm-page .blog > .elementor-widget-shortcode,
body.gm-page .blog__right > .elementor-widget-html,
body.gm-page .ft__meta > .elementor-widget-html{ display:contents; }

/* wideo hero */
body.gm-page .hero__media{ position:absolute; inset:0; z-index:0; pointer-events:none; }
body.gm-page .hero__media video{ width:100%; height:100%; object-fit:cover; display:block; }

/* Cytat na JASNYM tle (klient 08.08) — słowa w tuszu, akcenty Great Vibes w bordo zostają
   swoim kolorem z makiety. Wcześniej ten most narzucał `--cream` i po zmianie tła sekcji na
   #F5F5F5 tekst został praktycznie biały na jasnym. */
body.gm-page .cyt__text, body.gm-page .cyt__text .w{ color:var(--ink); }
body.gm-page .cyt__text .w.em{ color:#590B11; }

/* pasek boczny: zwinięty „do góry" ma mieć ZERO wysokości (była luka 16px) */
body.gm-page .rail__top:not(.show){ height:0; padding:0; border:0; min-height:0; overflow:hidden; }

/* stopka: wielki wordmark nie może przykrywać linku Boost4media */
body.gm-page .ft__meta{ position:relative; z-index:4; }
body.gm-page .ft__by, body.gm-page .ft__by a{ position:relative; z-index:5; pointer-events:auto; }
body.gm-page .ft__wordmark{ pointer-events:none; }


@media(max-width:900px){
  /* kafle kategorii: kontener obrazu ma się dopasować do obrazu, nie odwrotnie */
  body.gm-page .bnh__card > .elementor-widget-image{ display:block; width:100%; height:100%; }
  body.gm-page .bnh__card > .elementor-widget-image img{ width:100%; height:100%; object-fit:cover; }
  /* lokalizacje: nazwy miast nie mogą wychodzić poza kafel */
  body.gm-page .lok__cap{ max-width:100%; padding-inline:10px; box-sizing:border-box; }
  body.gm-page .lok__name{ max-width:100%; overflow-wrap:anywhere; hyphens:none; }
}

/* sekcja wyróżnionych ofert: karty renderuje widget b4m (wariant „galeria"),
   ale układ listy ma być z makiety — wrappery widgetu robimy przezroczyste */
body.gm-page .ofr__b4m,
body.gm-page .ofr__list .elementor-widget-container{ display:contents; }
/* Siatka wtyczki jest TOREM slidera: JEDEN rząd, bez odstępów (08.08).
   `!important`, bo arkusz wtyczki (esticrm-card-variants) ładuje się PO gm.css i ma
   `display:grid !important`. Kierunek MUSI być jawny — w kolumnie `flex-basis:100%`
   slajdu liczy się w pionie i karta ma wysokość 0 (sekcja wygląda na pustą). */
body.gm-page .ofr__list .esticrm-cards-grid{
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  align-items:stretch !important; gap:0 !important; grid-template-columns:none !important;
  max-width:none !important; width:100% !important; margin:0 !important; padding:0 !important;
}
body.gm-page .ofr__list .ofr__card{ width:100% !important; max-width:none !important;
  flex:0 0 100% !important; }

/* Elementor generuje post-<id>.css z regułami typu
   `.elementor-widget-text-editor{color:var(--e-global-color-text)}` — one łamią dziedziczenie
   koloru z sekcji makiety (biały tekst hero robił się szary). Wymuszamy dziedziczenie. */
/* UWAGA: color:inherit TYLKO na wrapperze widgetu TEKSTU (on nie nosi klasy makiety) i na
   wnętrzu widgetów. NIGDY na .elementor-widget-heading — ten wrapper NOSI klasę makiety
   (.giant, .bnh__label, .ofr__kicker…), więc inherit skasowałby jej kolor (białe nagłówki
   robiły się szare, bordowe kickery traciły kolor). */
body.gm-page .elementor-widget-text-editor,
body.gm-page .elementor-widget-text-editor p{ color:inherit; }
body.gm-page .elementor-widget-heading .elementor-heading-title{ color:inherit; }

/* logo w nagłówku — makieta stosuje klasę .logo-img na <img>; widget obrazu jej nie ma,
   więc dopinamy ją w JS (patrz gm.js). Tu tylko zabezpieczenie, gdyby JS nie zdążył. */
body.gm-page .hd .hd__logo img{ height:clamp(50px,5.4vw,72px); width:auto; }
body.gm-page .hd.scrolled .hd__logo img{ height:clamp(36px,3.2vw,44px); }

/* wrapper widgetu obrazu jest blokiem inline-owym → dokłada odstęp liniowy pod <img>
   (logo miało 54 px zamiast 50 i przesuwało środek nagłówka o 2 px) */
body.gm-page .hd__logo, body.gm-page .ft__logo{ display:flex; align-items:center; line-height:0; }

/* widget ulubionych b4m: wrappery przezroczyste, żeby <svg> był układany przez .hd .fav z makiety
   (ikonę podmienia gm.js na zakładkę z HTML — dzięki temu działa hover i stan „has") */
body.gm-page .fav > .elementor-widget-container,
body.gm-page .fav .esticrm-favorites-icon__star{ display:contents; }
body.gm-page .fav .esticrm-favorites-icon{ display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:100%; color:inherit; }

/* rozmiar ikony zakładki wg makiety (arkusz wtyczki ładuje się później i narzuca 24px) */
body.gm-page .hd .fav svg{ width:19px !important; height:24px !important; }
/* Licznik ulubionych ZDJĘTY (Seb 11.08) — sygnałem jest samo wypełnienie zakładki.
   Klasa `has` na `.fav` (mostek localStorage → makieta w gm.js) dalej steruje wypełnieniem. */
body.gm-page .hd .fav__count{ display:none !important; }

/* X zamknięcia menu — ten sam powód co wyżej: arkusz ładowany po gm.css sprowadza <svg> do 24px */
body.gm-page .mmenu__x svg{ width:44px !important; height:44px !important; }

/* Tytuł „Poznaj / Naszą Galerię / ofert”: klasa makiety siedzi na WRAPPERZE widgetu, a trzy słowa
   są w <h2> w środku — więc flex, align-items i gap z makiety NIE dotyczyły ich w ogóle
   (słowa układały się inline, stykały bokami i wyrównywały do linii bazowej).
   Przekazujemy layout do środka; `gap:inherit` bierze wyliczone wartości z makiety,
   żeby nie duplikować clampów w warstwie WP.
   `justify-content:inherit` (nie sztywne `center`) — na mobile makieta ustawia na wrapperze
   `flex-start` i to wyrównanie musi zejść do środka, inaczej nagłówek zostaje wyśrodkowany,
   podczas gdy kicker i przycisk obok są już do lewej. */
body.gm-page .ofr__title .elementor-heading-title{
  display:flex; align-items:center; justify-content:inherit; flex-wrap:wrap;
  gap:inherit; line-height:1;
}
/* Na mobile nagłówek wraca do zwykłego tekstu (łamanie po „Naszą" przez <br class="ofr__brk">),
   więc most też musi zejść z flexa — inaczej <h2> dalej układałby spany jako elementy flex
   i sztywne łamanie nie miałoby żadnego efektu. */
@media(max-width:860px){
  body.gm-page .ofr__title .elementor-heading-title{ display:block; line-height:inherit; }
}

/* ===== 5. POPRAWKI PO DRUGIM PRZEGLĄDZIE ===== */

/* Wrapper widgetu OBRAZU w kaflach ma wysokość 0, więc `height:100%` na <img> liczyło się od zera
   (zdjęcia miast w ogóle nie było widać). Wrapper musi zniknąć z layoutu — wtedy <img> jest
   bezpośrednim dzieckiem kafla i działają reguły makiety (`.lok__tile img{position:absolute;inset:0}`). */
/* WYJĄTEK: .abt__photo ma klasę makiety NA WRAPPERZE (pozycja+rozmiar) — tam display:contents
   kasuje box i zdjęcie znika. Contents stosuj tylko gdy wrapper NIE nosi klasy makiety. */
body.gm-page .lok__tile > .elementor-widget-image,
body.gm-page .bnh__card > .elementor-widget-image,
body.gm-page .ofr__media > .elementor-widget-image,
body.gm-page .blog__media > .elementor-widget-image{ display:contents; }

/* Wtyczka b4m wnosi własny token akcentu (#D6B068 — złoty) i koloruje nim hovery linków.
   W tej marce złota nie ma: mapujemy tokeny wtyczki na paletę makiety i gasimy złote hovery. */
body.gm-page{
  --esticrm-accent:var(--ink); --esticrm-accent-light:var(--ink);
  --esticrm-dark:var(--ink); --esticrm-text:var(--ink);
  --esticrm-font-serif:var(--serif); --esticrm-font-sans:var(--sans);
}
body.gm-page a:hover,
body.gm-page .esticrm-card a:hover, body.gm-page .esticrm-card__cta:hover{ color:inherit; }
/* NIE stosuj `.ofr__card:hover *{color:inherit}` — karta jest <a> w kolorze czarnym, więc `inherit`
   na WSZYSTKICH dzieciach kasował kremową etykietę badge'a i robił z niej czarny napis.
   Hover karty ma zmieniać WYŁĄCZNIE skalę zdjęcia; kolory zostają jak w makiecie. */
body.gm-page .ofr__card:hover .ofr__badge{ color:var(--cream); }
/* Podpis slajdu leży NA zdjęciu i jest biały także pod kursorem (dawne reguły na czarny
   tekst dotyczyły starego układu „zdjęcie + kolumna danych" i są zdjęte). */
body.gm-page .ofr__card:hover .ofr__ttl, body.gm-page .ofr__card:hover .ofr__loc{ color:#fff; }

/* Ikona ulubionych: wtyczka wymusza na hoverze
   `stroke/fill/color: var(--esticrm-favicon-color-hover, var(--esticrm-accent)) !important`.
   W makiecie ikona NIE zmienia koloru — tylko skaluje się (`.hd .fav:hover svg{transform:scale(1.1)}`).
   Ustawiamy token hovera na currentColor, żeby ikona trzymała kolor nagłówka (kremowy/ciemny wg sekcji). */
body.gm-page .hd .fav,
body.gm-page .hd .fav .esticrm-favorites-icon{
  --esticrm-favicon-color-hover:currentColor;
  --esticrm-favicon-color:currentColor;
  --esticrm-favicon-color-active:currentColor;
}
body.gm-page .hd .fav:hover svg,
body.gm-page .hd .fav:hover svg *{ stroke:currentColor !important; fill:none !important; color:inherit !important; }
body.gm-page .hd .fav.has svg,
body.gm-page .hd .fav.has svg *{ fill:currentColor !important; }

/* ===== 6. WPIS BAZY WIEDZY — ZWYKŁY WPIS WP (bez Elementora) =====
   Wpisy dodaje się normalnie („Dodaj wpis": tytuł, treść, obrazek wyróżniający), więc renderuje
   je motyw Hello Elementor swoim układem `main.site-main > .page-header + .page-content`.
   Hello jest celowo nieostylowany, dlatego typografię wpisu ustawiamy tu — na tokenach marki,
   tych samych co makieta. Bez tego wpis wygląda jak surowy dokument pod premium nagłówkiem. */
body.gm-page.single-post .site-main{
  max-width:840px; margin:0 auto;
  /* nagłówek jest position:fixed — bez tego paddingu tytuł wchodziłby pod niego */
  padding:calc(var(--header-h,78px) + clamp(54px,10vh,120px)) var(--gut) clamp(80px,12vh,150px);
}
body.gm-page.single-post .page-header{ margin:0 0 clamp(24px,4vh,42px); text-align:left; }
body.gm-page.single-post .entry-title{
  font-family:var(--serif); font-weight:400; text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(1.9rem,4.2vw,3.4rem); line-height:1.05; color:var(--ink); margin:0;
}
body.gm-page .gm-post__figure{ margin:0 0 clamp(28px,4.5vh,52px); }
body.gm-page .gm-post__figure img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }

body.gm-page.single-post .page-content p{
  font-family:var(--sans); font-weight:300; font-size:clamp(15px,1.15vw,17px);
  line-height:1.75; color:rgba(22,21,30,.86); margin:0 0 1.2em;
}
/* lead = pierwszy akapit, serifem — ten sam gest co w sekcjach makiety */
body.gm-page.single-post .page-content .gm-post__lead{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.15rem,2vw,1.62rem);
  line-height:1.45; color:var(--ink); margin-bottom:clamp(20px,3.2vh,36px);
}
body.gm-page.single-post .page-content h2{
  font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.02rem,1.5vw,1.3rem); line-height:1.25; color:var(--ink);
  margin:clamp(32px,4.8vh,54px) 0 clamp(9px,1.5vh,15px);
}
/* sekcja komentarzy motywu — trzyma szerokość i rytm strony, zamiast pełnej szerokości okna */
body.gm-page.single-post .comments-area{ max-width:840px; margin:0 auto; padding:0 var(--gut) clamp(70px,10vh,120px); }


/* ===== 8. PRZYCISK MARKI: LINK MUSI POKRYWAĆ CAŁY PRZYCISK (klient 08.08) ===== */
/* Klasa `gm-btn` siedzi na WRAPPERZE widgetu, a `<a>` Elementora jest w środku i domyślnie
   ma rozmiar samego napisu — kliknięcie w pas ze strzałką (prawe wcięcie) trafiało w martwe
   pole. Rozciągamy link na całe pudełko i PRZENOSIMY na niego wcięcia (`--btn-px` z makiety),
   a `padding` wrappera zerujemy. Musi być PO regule `all:unset` z sekcji 3. */
body.gm-page .gm-btn{ padding:0; }
body.gm-page .gm-btn > .elementor-button{
  display:flex; align-items:center; align-self:stretch; flex:1 1 auto;
  padding-left:var(--btn-px); padding-right:calc(var(--btn-px) + 29px);
}


/* ===== 9. PODSTRONA /oferta — 1:1 z FIGMĄ =====================================
   Źródło prawdy: Figma `4AYkGrbSrSTojjravdeEjf`, ramka „Desktop - 11" (63:2, 1440×1696).
   Wszystkie liczby to POMIAR z renderu 2× (nie „na oko") — spis w PLAN-OFERTA.md §2.
   Konwencja skalowania: geometria pozioma w `vw`/`%` (dokładnie 1:1 na 1440 i proporcjonalnie
   szerzej), typografia i wysokości w `px` (Figma podaje je w px i mają zostać stałe).
   ⚠️ Arkusze wtyczki (`search.css`) piszą `body .selektor{…!important}` — każdy most niżej
   musi mieć wyższą specyficzność ORAZ `!important`. */

body.gm-page .gm-sub--oferta{
  /* 48 / 1338 z Figmy przeliczone na 1440 */
  --ofl:3.333333vw;
  --ofw:92.916667vw;
  /* margines od PRAWEJ krawędzi ekranu — w Figmie nie jest równy lewemu (48 vs 54),
     a tekst karty ma się kończyć równo z kreską pod wyszukiwarką. */
  --ofr:calc(100vw - var(--ofl) - var(--ofw));
  /* wysokość nagłówka (fixed) — lustro reguł `.hd` z prototypu */
  --hdh:calc(clamp(50px,5.4vw,72px) + 2*clamp(14px,1.8vw,22px));
  /* Odstęp pod ostatnią ofertą MUSI być paddingiem KONTENERA, nie marginesem siatki:
     margines dolny siatki nie ma czego zatrzymać (żaden przodek nie ma paddingu ani borderu),
     więc wychodzi poza białe tło podstrony i w luce widać kremowe płótno `--paper` z <body>. */
  display:block; background:#fff; color:#000;
  padding-top:var(--hdh); padding-bottom:clamp(70px,10vh,130px);
}
/* pasek okruszków idzie przez CAŁĄ szerokość — wrapper widgetu HTML musi zniknąć z layoutu */
body.gm-page .gm-sub--oferta > .elementor-widget-html{ display:contents; }

/* ---------- okruszki: pasek 42 px między dwiema kreskami #CCC ---------- */
/* Okruszki pod nagłówkiem ZDJĘTE (Seb 11.08) — zostają w markupie widgetu (`BREADCRUMB`
   w `build_parts.py`), ale nie są pokazywane; przy najbliższym deployu widgetu można je
   wyciąć u źródła. */
body.gm-page .gm-sub--oferta .gm-crumb{ display:none !important; }
body.gm-page .gm-sub--oferta .gm-crumb--off{
  box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  width:100%; height:42px; padding-left:5px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;
  font-family:var(--sans); font-weight:400; font-size:8px; line-height:1;
  letter-spacing:.5px; text-transform:uppercase; color:#808080;
}
body.gm-page .gm-sub--oferta .gm-crumb a{ color:#808080; }
body.gm-page .gm-sub--oferta .gm-crumb__sep{ margin:0 11px; }
/* aktywna pozycja: czarny tekst + czarna kreska ZAMIAST szarej (stąd ujemny margines) */
body.gm-page .gm-sub--oferta .gm-crumb__cur{
  display:flex; align-items:center; height:42px; padding:0 10px; margin:0 0 -1px 8.5px;
  border-bottom:1px solid #000; color:#000;
}
body.gm-page .gm-sub--oferta .gm-crumb__cur .gm-crumb__sep{ margin:0 0 0 10px; }

/* ---------- H1 ---------- */
body.gm-page .gm-sub--oferta .gm-sub__head{
  display:block; margin-left:var(--ofl); padding:36.7px 0 29.3px;
}
body.gm-page .gm-sub--oferta .gm-sub__h{
  font-family:var(--sans); font-weight:400; font-size:40px; line-height:49px;
  letter-spacing:4px; text-transform:uppercase; color:#000;
}

/* ---------- kolumna treści ---------- */
body.gm-page .gm-sub--oferta .gm-browser{ margin-left:var(--ofl); width:var(--ofw); }
body.gm-page .gm-sub--oferta .esticrm-search{ margin:0 !important; padding:0 !important; }

/* ---------- szary panel filtrów (przebudowa 11.08 wg screenów Seba) ----------
   Jeden rząd pól + „WIĘCEJ OPCJI" + „RESETUJ FILTRY”; drugi rząd (cena, powierzchnia,
   zasięg, pokoje) wyjeżdża pod separatorem dopiero po kliknięciu „więcej opcji". */
body.gm-page .gm-sub--oferta .esticrm-search__panel{
  position:relative; overflow:visible !important;
  width:100% !important; max-width:none !important; margin:0 !important;
  background:#F5F5F5 !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  /* 19 px u góry, nie 22 — wiersz etykiety ma nad literami ~3 px światła z `line-height`,
     więc równe wartości dawały optycznie grubszy pas szarości na górze (Seb 11.08). */
  padding:19px 26px 22px 26px !important;
}
/* elementy poprzedniej wersji panelu, które nie mają już racji bytu */
body.gm-page .gm-sub--oferta .gm-hide,
body.gm-page .gm-sub--oferta .esticrm-search__row--actions{ display:none !important; }

/* ---------- rząd 1 ---------- */
body.gm-page .gm-sub--oferta .esticrm-search__row--top{
  display:flex !important; align-items:flex-end !important;
  gap:33px !important; margin:0 !important; padding:0 !important;
  grid-template-columns:none !important;
}
/* Cztery pola dzielą równo to, co zostaje po „WIĘCEJ OPCJI" i „RESETUJ FILTRY" (odstęp 33 px
   z `gap` rzędu). Sztywna szerokość wylewała reset poza panel na wąższych kontenerach. */
body.gm-page .gm-sub--oferta .esticrm-search__row--top > .gm-fld{
  position:relative !important; display:block !important; flex:1 1 0 !important;
  width:auto !important; min-width:0 !important; gap:0 !important;
  margin:0 !important; padding:0 0 7px !important;
  border-bottom:1px solid #000 !important;
}

/* trigger pola = cały widoczny tekst + ikonka */
body.gm-page .gm-sub--oferta .gm-fld__trg,
body.gm-page .gm-sub--oferta .gm-more__tg{
  all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:14px; cursor:pointer; color:#000;
  /* 11/1,6 zamiast 12/2,4 — przy czterech polach w rzędzie „RODZAJ TRANSAKCJI"
     nie mieściło się i leciało wielokropkiem. */
  font-family:var(--sans); font-weight:400; font-size:11px; line-height:14px;
  letter-spacing:1.6px; text-transform:uppercase;
}
body.gm-page .gm-sub--oferta .gm-fld__lab{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* +2 px w dół: wersaliki siedzą pod geometrycznym środkiem wiersza, więc chevron wyśrodkowany
   „matematycznie" wygląda, jakby wisiał nad tekstem. */
body.gm-page .gm-sub--oferta .gm-chev{
  flex:0 0 auto; display:block; transform:translateY(2px); transition:transform .25s ease;
}
body.gm-page .gm-sub--oferta .gm-fld.is-open .gm-chev,
body.gm-page .gm-sub--oferta .gm-more__tg.is-open .gm-chev{ transform:translateY(2px) rotate(180deg); }

/* „więcej opcji" — bez kreski pod spodem, dosunięte do „RESETUJ FILTRY" */
body.gm-page .gm-sub--oferta .esticrm-search__row--top > .gm-more__tg{
  width:auto !important; flex:0 0 auto; margin:0 0 7px; padding-bottom:0; white-space:nowrap;
}
/* reset zostaje ramką 205×37 jak w projekcie */
body.gm-page .gm-sub--oferta .esticrm-search__row--top > .esticrm-btn--reset{
  box-sizing:border-box !important; display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  flex:0 0 205px !important; width:205px !important;
  height:37px !important; min-height:37px !important; padding:3px 0 0 !important;
  margin:0 0 -8px !important; gap:0 !important;
  border:1px solid #000 !important; border-radius:0 !important; background:transparent !important;
  color:#000 !important; cursor:pointer !important;
  font-family:var(--sans) !important; font-weight:400 !important; font-size:12px !important;
  line-height:1 !important; letter-spacing:2.4px !important; text-transform:uppercase !important;
  text-decoration:none !important; box-shadow:none !important;
  transition:background .2s, color .2s;
}
body.gm-page .gm-sub--oferta .esticrm-btn--reset svg{ display:none !important; }
body.gm-page .gm-sub--oferta .esticrm-btn--reset:hover{
  background:#000 !important; color:#F5F5F5 !important; border-color:#000 !important;
}

/* ---------- lista rozwijana pola ----------
   Warstwa NAD treścią (panel ma `overflow:visible`), szerokość pola, pozycje rozdzielone
   czarnymi kreskami z wcięciem — jak na screenie. */
body.gm-page .gm-sub--oferta .gm-dd{
  position:absolute !important; top:100% !important; left:0 !important; right:auto !important;
  z-index:40 !important; width:100% !important; padding:0 !important;
  background:#fff !important; border:0 !important; border-radius:0 !important;
  box-shadow:0 10px 26px rgba(0,0,0,.10) !important;
}
body.gm-page .gm-sub--oferta .gm-dd[hidden]{ display:none !important; }
/* Podświetlenie hover jest WĘŻSZE niż pozycja (`background-clip:content-box` + padding),
   żeby nie zahaczało o kreskę rozdzielającą — i szare, nie czarne (Seb 11.08). */
body.gm-page .gm-sub--oferta .gm-dd__it{
  all:unset; box-sizing:border-box; position:relative; display:flex;
  align-items:center; justify-content:center; width:100%; height:46px;
  padding:6px 10px; background-clip:content-box; cursor:pointer; color:#000; text-align:center;
  font-family:var(--sans); font-weight:400; font-size:12px; line-height:1.2;
  letter-spacing:1.4px; text-transform:uppercase; transition:background-color .18s;
}
body.gm-page .gm-sub--oferta .gm-dd__it + .gm-dd__it::before{
  content:""; position:absolute; top:0; left:10px; right:10px; height:1px; background:#000;
}
body.gm-page .gm-sub--oferta .gm-dd__it:hover{ background-color:#ECECEC; color:#000; }
body.gm-page .gm-sub--oferta .gm-dd__it.is-active{ font-weight:500; }
body.gm-page .gm-sub--oferta .gm-dd__empty{
  display:block; padding:16px 14px; text-align:center;
  font-family:var(--sans); font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:rgba(0,0,0,.4);
}

/* Wtyczka rysuje własną strzałkę pola przez `.sp-field::after` — obok naszej ikonki
   wychodziła podwójna „⌄⌄". */
body.gm-page .gm-sub--oferta .gm-fld::after,
body.gm-page .gm-sub--oferta .gm-fld .sp-loc-toggle__chev{ display:none !important; content:none !important; }

/* selekt wtyczki jest tylko nośnikiem wartości — klikamy w nasz trigger */
body.gm-page .gm-sub--oferta .gm-fld > select.sp-select{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  opacity:0 !important; pointer-events:none !important; appearance:none !important;
  -webkit-appearance:none !important; border:0 !important; background:transparent !important;
}

/* ---------- rząd 2: „więcej opcji" ---------- */
body.gm-page .gm-sub--oferta .gm-more{ margin:26px 0 0; padding:0; }
body.gm-page .gm-sub--oferta .gm-more[hidden]{ display:none !important; }
body.gm-page .gm-sub--oferta .gm-more::before{
  content:""; display:block; width:100%; height:1px; background:#D6D6D6; margin:0 0 30px;
}
body.gm-page .gm-sub--oferta .gm-more__grid{
  display:flex !important; flex-wrap:wrap; align-items:flex-end; gap:26px 48px;
}
body.gm-page .gm-sub--oferta .gm-grp{
  display:block !important; flex:0 0 auto; margin:0 !important; padding:0 !important;
  border:0 !important; gap:0 !important;
}
body.gm-page .gm-sub--oferta .gm-grp > label{
  display:block !important; margin:0 0 12px !important; padding:0 !important;
  font-family:var(--sans) !important; font-weight:400 !important; font-size:12px !important;
  line-height:14px !important; letter-spacing:2.4px !important; text-transform:uppercase !important;
  color:#000 !important; cursor:default !important;
}
body.gm-page .gm-sub--oferta .gm-grp .sp-range{
  display:flex !important; align-items:center !important; gap:16px !important;
  max-width:none !important; margin:0 !important;
}
body.gm-page .gm-sub--oferta .gm-grp .sp-range[hidden]{ display:none !important; }
body.gm-page .gm-sub--oferta .gm-grp .sp-range-sep{
  flex:0 0 auto; color:#000 !important; font-family:var(--sans) !important; font-size:12px !important;
  padding:0 !important;
}
/* pola drugiego rzędu = prostokąt z obrysem, jednostka dosunięta do prawej */
/* Szerokości pod realne wartości, nie pod „105 px z projektu": w cenie mieści się 7 cyfr
   z separatorami (1 250 000) + jednostka, w powierzchni 4 (Seb 11.08: „zera się nie mieszczą"). */
body.gm-page .gm-sub--oferta .gm-grp .sp-input-unit{
  position:relative !important; box-sizing:border-box !important; display:block !important;
  width:130px !important; height:35px !important;
  border:1px solid #000 !important; border-radius:0 !important; background:transparent !important;
}
body.gm-page .gm-sub--oferta .gm-grp[data-gm-grp="cena"] .sp-input-unit{ width:158px !important; }
body.gm-page .gm-sub--oferta .gm-grp--radius .sp-input-unit{ width:130px !important; }
body.gm-page .gm-sub--oferta .gm-grp .sp-input{
  box-sizing:border-box !important; width:100% !important; height:33px !important;
  min-height:0 !important; line-height:33px !important;
  padding:0 34px 0 12px !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
  font-family:var(--sans) !important; font-weight:400 !important; font-size:12px !important;
  letter-spacing:1.2px !important; color:#000 !important;
  -moz-appearance:textfield !important;
}
body.gm-page .gm-sub--oferta .gm-grp .sp-input::-webkit-outer-spin-button,
body.gm-page .gm-sub--oferta .gm-grp .sp-input::-webkit-inner-spin-button{
  -webkit-appearance:none !important; margin:0 !important;
}
body.gm-page .gm-sub--oferta .gm-grp .sp-input::placeholder{
  color:rgba(0,0,0,.38) !important; text-transform:none !important;
  letter-spacing:1.2px !important; font-size:12px !important;
}
body.gm-page .gm-sub--oferta .gm-grp .sp-unit{
  position:absolute !important; right:12px !important; top:50% !important;
  transform:translateY(-50%) !important; pointer-events:none !important;
  font-family:var(--sans) !important; font-size:12px !important; letter-spacing:1.2px !important;
  text-transform:none !important; color:#000 !important;
}
/* zasięg bez wybranej lokalizacji nie ma od czego mierzyć */
body.gm-page .gm-sub--oferta .gm-grp--radius.is-off{ opacity:.38; }
body.gm-page .gm-sub--oferta .gm-grp--radius.is-off .sp-input{ cursor:not-allowed !important; }

/* LICZBA POKOI: kafelki 1 / 2 / 3 / 4+ */
body.gm-page .gm-sub--oferta .gm-tiles{ display:flex; gap:12px; }
body.gm-page .gm-sub--oferta .gm-tile{
  all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  width:38px; height:35px; border:1px solid #000; background:transparent; color:#000;
  cursor:pointer; font-family:var(--sans); font-weight:400; font-size:12px; line-height:1;
  letter-spacing:1.2px; text-indent:1.2px; transition:background .2s, color .2s;
}
body.gm-page .gm-sub--oferta .gm-tile:hover,
body.gm-page .gm-sub--oferta .gm-tile.is-active{ background:#000; color:#F5F5F5; }

/* ---------- kreska + licznik „12 WYNIKÓW" ----------
   Wtyczka pisze „Znaleziono <strong>12</strong> ofert" (tak samo po AJAX-ie). Tekst wtyczki
   gasimy `font-size:0` na kontenerze — zostaje sama liczba w <strong>, a słowo dokłada `::after`
   (formę liczby mnogiej ustawia gm.js w `data-word`). Zero mignięcia przy pierwszym renderze. */
body.gm-page .gm-sub--oferta .esticrm-results-bar{
  display:block !important; margin:64.75px 0 0 !important; padding:0 !important;
  border-top:1px solid #B5B5B5 !important;
}
body.gm-page .gm-sub--oferta .esticrm-results-count{
  margin:0 !important; padding:7px 0 0 !important;
  font-family:var(--sans) !important; font-weight:400 !important; font-size:0 !important;
  /* `letter-spacing` to długość BEZWZGLĘDNA — przy `font-size:0` schowany „Znaleziono ” dalej
     dokładałby 11×2,4 px i spychał licznik o 26 px w prawo. Tracking tylko na widocznych częściach. */
  letter-spacing:0 !important; text-transform:uppercase !important; color:#000 !important;
}
body.gm-page .gm-sub--oferta .esticrm-results-count strong{
  font-size:12px !important; font-weight:400 !important; letter-spacing:2.4px !important;
}
body.gm-page .gm-sub--oferta .esticrm-results-count::after{ content:" WYNIKÓW"; font-size:12px; letter-spacing:2.4px; }
body.gm-page .gm-sub--oferta .esticrm-results-count[data-word]::after{ content:" " attr(data-word); }

/* ---------- KARTY OFERT (wariant wtyczki `galeria-lista`) ----------
   Figma: karta na PEŁNĄ szerokość okna. Połowa to zdjęcie dochodzące do krawędzi strony
   + pasek 79 px (zakładka u góry, strzałka na dole), druga połowa to kolumna z tytułem,
   kreską, rzędem metryk i kreską. Karty naprzemienne: nieparzysta — zdjęcie z lewej,
   parzysta — z prawej (`row-reverse`, markup zawsze ten sam). Wymiary zmierzone z ramki:
   karta 405 px, odstęp 40, kreski #EFEFEF na 157 i 207 px od góry karty. */
body.gm-page .gm-sub--oferta .esticrm-cards-grid{
  display:block !important; grid-template-columns:none !important; gap:0 !important;
  width:100vw !important; max-width:none !important;
  margin:85.3px 0 0 calc(-1 * var(--ofl)) !important; padding:0 !important;
}
body.gm-page .gm-sub--oferta .gml{
  /* 405 px to wymiar z Figmy; Seb (11.08) poprosił o wyższe zdjęcie → 480.
     Rytm kolumny tekstu zostaje z projektu (157 + 50), nadmiar idzie w blok opisu. */
  display:flex; align-items:stretch; width:100%; height:480px;
  background:#fff; position:relative;
}
body.gm-page .gm-sub--oferta .gml + .gml{ margin-top:40px; }
body.gm-page .gm-sub--oferta .gml:nth-child(even){ flex-direction:row-reverse; }

/* zdjęcie zajmuje CAŁĄ połowę karty — pasek jest półprzezroczystą nakładką na jego wewnętrznej
   krawędzi (w Figmie tło paska to biel z alfą, przez którą widać zdjęcie) */
body.gm-page .gm-sub--oferta .gml__media{
  position:relative; display:block; flex:0 0 50%; max-width:50%; min-width:0; height:100%; overflow:hidden;
}
body.gm-page .gm-sub--oferta .gml__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
body.gm-page .gm-sub--oferta .gml:hover .gml__media img{ transform:scale(1.04); }
body.gm-page .gm-sub--oferta .esticrm-card__placeholder{ width:100%; height:100%; background:#CAC8C8; }
/* Etykieta statusu 1:1 z sekcją wyróżnionych ofert na stronie głównej (`.ofr__badge`
   z prototypu): przezroczyste ciemne szkło jak pływające przyciski paska bocznego,
   zamiast szarej plakietki z bordową ramką (Seb 11.08). */
body.gm-page .gm-sub--oferta .gml__badge{
  position:absolute; top:16px; left:19px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box; min-width:0; height:auto; padding:7px 12px;
  background:rgba(18,17,24,.55);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(244,244,237,.14); color:var(--cream);
  font-family:var(--sans); font-weight:400; font-size:.62rem; line-height:1;
  letter-spacing:.1em; text-transform:uppercase; text-indent:0;
}
body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__badge{ left:auto; right:26.5px; }

/* pasek: nakładka na wewnętrznej krawędzi zdjęcia, biała z alfą */
body.gm-page .gm-sub--oferta .gml__rail{
  position:absolute; top:0; bottom:0; left:calc(50% - 79px); width:79px; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:20px 0 19px; background:rgba(255,255,255,.67);
  -webkit-backdrop-filter:saturate(1.05); backdrop-filter:saturate(1.05);
}
body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__rail{ left:auto; right:calc(50% - 79px); }
body.gm-page .gm-sub--oferta .gml__rail .esticrm-card__fav{
  position:static !important; inset:auto !important; width:20px !important; height:38px !important;
  min-width:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; color:#590B11 !important; opacity:1 !important; cursor:pointer;
}
body.gm-page .gm-sub--oferta .gml__rail .esticrm-fav-icon{ display:block !important; }
body.gm-page .gm-sub--oferta .gml__rail .esticrm-fav-icon--active{ display:none !important; }
body.gm-page .gm-sub--oferta .gml__rail .esticrm-card__fav.is-active .esticrm-fav-icon--default{ display:none !important; }
body.gm-page .gm-sub--oferta .gml__rail .esticrm-card__fav.is-active .esticrm-fav-icon--active{ display:block !important; }
/* TYLKO ikona zakładki — `!important` na `.gml__rail svg` zjadałby rozmiar strzałki niżej */
body.gm-page .gm-sub--oferta .gml__rail .esticrm-fav-icon svg{
  width:20px !important; height:38px !important; display:block;
  fill:none; stroke:currentColor; stroke-width:1.1;
}
body.gm-page .gm-sub--oferta .gml__rail .esticrm-card__fav.is-active .esticrm-fav-icon svg{ fill:currentColor !important; }
/* strzałka w Figmie stoi ~2 px na lewo od osi paska (karta 1: −3,75, karta 2: −1 — bierzemy środek) */
body.gm-page .gm-sub--oferta .gml__go{ display:block; color:#590B11; position:relative; right:2px; }
body.gm-page .gm-sub--oferta .gml__go svg{
  width:23.5px !important; height:19px !important; display:block;
  fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:square;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
body.gm-page .gm-sub--oferta .gml__go:hover svg{ transform:translateX(4px); }

/* kolumna tekstu — Seb 11.08:
   • kreska NA GÓRZE tak samo jak na dole: obie biegną od krawędzi zdjęcia do krawędzi strony;
   • cała treść (od tytułu po „Przejdź do oferty") wyśrodkowana PIONOWO między tymi kreskami,
     zamiast startować od sztywnych 65 px z projektu;
   • od strony ekranu tekst kończy się równo z kreską pod wyszukiwarką (`var(--ofl)` = margines
     strony), nie 30 px od krawędzi. Od strony zdjęcia zostaje 30 px. */
body.gm-page .gm-sub--oferta .gml__body{
  flex:0 0 50%; max-width:50%; box-sizing:border-box; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  border-top:1px solid #EFEFEF; border-bottom:1px solid #EFEFEF;
}
body.gm-page .gm-sub--oferta .gml__head{
  flex:0 0 auto; box-sizing:border-box; min-height:0; padding:0 var(--ofr) 24px 30px;
}
body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__head{ padding:0 30px 24px var(--ofl); }
body.gm-page .gm-sub--oferta .gml__title{
  display:block; color:#000; text-decoration:none;
  font-family:var(--serif); font-weight:400; font-size:45px; line-height:50px;
  letter-spacing:-2.25px;
}
body.gm-page .gm-sub--oferta .gml__title span{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* cena pod tytułem — bordo, wersalikowy tracking jak reszta sansu na karcie.
   Odsunięta od tytułu o 9 px (prośba Seba 11.08 — „daj lekko niżej"); wcześniej wchodziła
   ujemnym marginesem w światło `line-height:50px` tytułu i siedziała za blisko. */
body.gm-page .gm-sub--oferta .gml__price{
  display:block; margin-top:9px; color:#590B11;
  font-family:var(--sans); font-weight:500; font-size:30px; line-height:30px;
  letter-spacing:3px;
}
body.gm-page .gm-sub--oferta .gml__price--ask{
  font-size:13px; font-weight:400; letter-spacing:2.4px; text-transform:uppercase;
  margin-top:14px;
}
body.gm-page .gm-sub--oferta .gml__meta{
  flex:0 0 50px; box-sizing:border-box; display:flex; align-items:center; gap:33px;
  padding:0 var(--ofr) 0 30px; border-top:1px solid #EFEFEF; border-bottom:1px solid #EFEFEF;
}
body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__meta{ padding:0 30px 0 var(--ofl); }
body.gm-page .gm-sub--oferta .gml__m{
  display:inline-flex; align-items:center; gap:13px; color:#000;
  font-family:var(--sans); font-weight:400; font-size:17px; line-height:1; letter-spacing:.5px;
  white-space:nowrap;
}
body.gm-page .gm-sub--oferta .gml__i{
  flex:none; width:18px; height:25px; fill:none; stroke:#16151e; stroke-width:1.1;
  stroke-linejoin:round; stroke-linecap:round;
}
body.gm-page .gm-sub--oferta .gml__i--area{ width:30px; height:30px; }
body.gm-page .gm-sub--oferta .gml__m:last-child .gml__i{ width:24px; height:24px; }
/* zajawka + CTA (dołożone na prośbę Seba 11.08 — w samej Figmie ten blok jest pusty) */
/* Blok opisu nie rozpycha już kolumny (`flex:0 0 auto`) — o pozycji całości decyduje
   wyśrodkowanie `justify-content:center` na `.gml__body`. */
body.gm-page .gm-sub--oferta .gml__note{
  flex:0 0 auto; min-height:0; box-sizing:border-box; padding:24px var(--ofr) 0 30px;
}
body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__note{ padding:24px 30px 0 var(--ofl); }
body.gm-page .gm-sub--oferta .gml__desc{
  margin:0; color:#000;
  font-family:var(--sans); font-weight:400; font-size:14px; line-height:18px; letter-spacing:3.3px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
body.gm-page .gm-sub--oferta .gml__cta{
  margin-top:23px; display:inline-flex; align-items:center; gap:12px;
  color:#590B11; text-decoration:none;
  font-family:var(--sans); font-weight:400; font-size:14px; line-height:1;
  letter-spacing:3.5px; text-transform:uppercase;
}
body.gm-page .gm-sub--oferta .gml__cta .ar{
  display:inline-block; transition:transform .35s cubic-bezier(.16,.7,.25,1);
}
body.gm-page .gm-sub--oferta .gml__cta:hover .ar,
body.gm-page .gm-sub--oferta .gml:hover .gml__cta .ar{ transform:translateX(5px); }

/* przycisk „FILTRY ↓" istnieje tylko na wąskich ekranach (patrz tor <900 px) */
body.gm-page .gm-sub--oferta .gm-flt__mob{ display:none; }

/* ---------- TOR POŚREDNI (901–1340 px) ----------
   Cztery pola + „WIĘCEJ OPCJI" + reset w jednym rzędzie mieszczą się dopiero od ~1340 px.
   Niżej etykiety („RODZAJ TRANSAKCJI") leciałyby wielokropkiem, więc pola idą 2×2,
   a przyciski schodzą do własnego rzędu. */
@media(min-width:901px) and (max-width:1340px){
  body.gm-page .gm-sub--oferta .esticrm-search__row--top{ flex-wrap:wrap !important; }
  body.gm-page .gm-sub--oferta .esticrm-search__row--top > .gm-fld{
    flex:0 0 calc(50% - 16.5px) !important; width:calc(50% - 16.5px) !important;
  }
  body.gm-page .gm-sub--oferta .esticrm-search__row--top > .gm-fld:nth-of-type(n+3){ margin-top:26px !important; }
  body.gm-page .gm-sub--oferta .esticrm-search__row--top > .gm-more__tg{ margin:26px auto 7px 0; }
  body.gm-page .gm-sub--oferta .esticrm-search__row--top > .esticrm-btn--reset{ margin:26px 0 -8px auto !important; }
}

/* ---------- TYMCZASOWY TOR WĄSKI (do Etapu 6) ----------
   Geometria wyżej jest przeliczona z ramki 1440 i w `vw` — poniżej ~900 px pola robią się
   nieczytelne, a „RESETUJ FILTRY" wychodzi poza panel. Docelowy mobile z Figmy (ramka
   „iPhone 16 - 2": filtry zwinięte pod przyciskiem „FILTRY ↓") jest ETAPEM 6; ten blok tylko
   pilnuje, żeby do tego czasu panel był używalny, a nie połamany. */
@media(max-width:900px){
  body.gm-page .gm-sub--oferta{ --ofl:18px; --ofw:calc(100% - 36px); }
  /* ⚠️ ANTY-ZOOM iOS: Safari na iPhonie POWIĘKSZA całą stronę, gdy user wejdzie w pole
     o `font-size` mniejszym niż 16 px (u nas było 13-14 px) — po wpisaniu ceny widok zostawał
     przybliżony (Seb 11.08). 16 px to jedyny sposób bez `maximum-scale=1`, które odbiera
     możliwość powiększania całej strony. */
  body.gm-page .gm-sub--oferta .gm-grp .sp-input,
  body.gm-page .gm-sub--oferta .gm-fld > select.sp-select,
  body.gm-page .gm-sub--oferta input[type=text],
  body.gm-page .gm-sub--oferta input[type=number],
  body.gm-page .gm-sub--oferta input[type=search]{ font-size:16px !important; }
  /* Filtry ZWINIĘTE domyślnie (ramka „iPhone 16 - 2"): widać sam przycisk, panel wyjeżdża
     dopiero po kliknięciu. */
  body.gm-page .gm-sub--oferta .gm-flt__mob{
    all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
    gap:12px; width:100%; height:52px; border:1px solid #000; background:transparent;
    color:#000; cursor:pointer;
    font-family:var(--sans); font-weight:400; font-size:13px; line-height:1;
    letter-spacing:3px; text-transform:uppercase; text-indent:3px;
  }
  body.gm-page .gm-sub--oferta .gm-flt__mob .gm-arrd{ flex:0 0 auto; transition:transform .25s ease; }
  body.gm-page .gm-sub--oferta .gm-flt__mob.is-open .gm-arrd{ transform:rotate(180deg); }
  body.gm-page .gm-sub--oferta .esticrm-search__panel{ display:none !important; }
  body.gm-page .gm-sub--oferta .esticrm-search__panel.is-open{ display:block !important; margin-top:18px !important; }
  body.gm-page .gm-sub--oferta .gm-sub__h{ font-size:clamp(26px,7vw,40px); line-height:1.22; letter-spacing:3px; }
  body.gm-page .gm-sub--oferta .esticrm-search__panel{ padding:18px !important; }
  /* WYSZUKIWARKA NA MOBILE (11.08) — cztery pola obok siebie nie mają prawa się zmieścić,
     więc każde na całą szerokość, jedno pod drugim, z polem dotyku ~44 px. Listy rozwijane
     ROZPYCHAJĄ panel zamiast kłaść się warstwą (na małym ekranie warstwa zasłania resztę). */
  body.gm-page .gm-sub--oferta .esticrm-search__row--top{
    flex-wrap:wrap !important; gap:0 !important;
  }
  body.gm-page .gm-sub--oferta .esticrm-search__row--top > .gm-fld{
    width:100% !important; flex:0 0 100% !important; margin:0 !important;
    padding:15px 0 14px !important;
  }
  body.gm-page .gm-sub--oferta .esticrm-search__row--top > .gm-fld:first-of-type{ padding-top:4px !important; }
  body.gm-page .gm-sub--oferta .gm-fld__trg,
  body.gm-page .gm-sub--oferta .gm-more__tg{ font-size:12px; letter-spacing:1.8px; }
  /* Lista w toku (rozpycha panel), ale wygląda jak na desktopie: biała karta BEZ czarnej
     ramki dookoła, pozycje rozdzielone kreskami z wcięciem (Seb 11.08). */
  body.gm-page .gm-sub--oferta .gm-dd{
    position:static !important; width:100% !important; margin:14px 0 0 !important;
    border:0 !important; box-shadow:0 10px 26px rgba(0,0,0,.10) !important;
  }
  body.gm-page .gm-sub--oferta .gm-dd__it{ height:48px; }

  /* „WIĘCEJ OPCJI" stoi w parze z ramką „RESETUJ FILTRY" — ta sama wysokość (44 px)
     i treść wyśrodkowana w swojej połowie, żeby oba napisy leżały w jednej linii. */
  body.gm-page .gm-sub--oferta .esticrm-search__row--top > .gm-more__tg{
    width:calc(50% - 9px) !important; flex:0 0 calc(50% - 9px) !important;
    height:44px; margin:22px 18px 0 0 !important;
    justify-content:center; align-items:center; gap:10px;
  }
  body.gm-page .gm-sub--oferta .esticrm-search__row--top > .esticrm-btn--reset{
    flex:0 0 calc(50% - 9px) !important; width:calc(50% - 9px) !important;
    height:44px !important; min-height:44px !important; margin:22px 0 0 !important;
  }

  /* drugi rząd: grupy jedna pod drugą, pola rozciągnięte na całą szerokość */
  body.gm-page .gm-sub--oferta .gm-more{ margin-top:22px; }
  body.gm-page .gm-sub--oferta .gm-more::before{ margin-bottom:22px; }
  body.gm-page .gm-sub--oferta .gm-more__grid{ flex-direction:column; gap:22px; align-items:stretch; }
  body.gm-page .gm-sub--oferta .gm-grp{ width:100%; }
  body.gm-page .gm-sub--oferta .gm-grp .sp-range{ width:100%; }
  body.gm-page .gm-sub--oferta .gm-grp .sp-input-unit,
  body.gm-page .gm-sub--oferta .gm-grp[data-gm-grp="cena"] .sp-input-unit,
  body.gm-page .gm-sub--oferta .gm-grp--radius .sp-input-unit{
    flex:1 1 0 !important; width:auto !important; height:44px !important;
  }
  /* 16px, NIE 13 — patrz anty-zoom iOS wyżej w tym samym media query. Ta reguła stoi dalej
     w arkuszu, więc to ONA decyduje o rozmiarze pól ceny i powierzchni. */
  body.gm-page .gm-sub--oferta .gm-grp .sp-input{ height:42px !important; line-height:42px !important; font-size:16px !important; }
  /* iOS zoomuje pole, gdy tekst < 16 px — na wąskich ekranach nie warto tego prowokować */
  body.gm-page .gm-sub--oferta .gm-grp--radius .sp-input-unit{ max-width:50%; }
  body.gm-page .gm-sub--oferta .gm-tiles{ width:100%; gap:10px; }
  body.gm-page .gm-sub--oferta .gm-tile{ flex:1 1 0; width:auto; height:44px; }
  /* w ramce z Figmy licznik stoi przy PRAWEJ krawędzi, nie przy lewej jak na desktopie */
  body.gm-page .gm-sub--oferta .esticrm-results-bar{ margin-top:34px !important; text-align:right; }
  /* karta: zdjęcie nad treścią, pasek jako poziomy pasek pod zdjęciem */
  body.gm-page .gm-sub--oferta .esticrm-cards-grid{ margin-top:34px !important; }
  /* Karta na SIATCE, nie na flexie: zakładka ze strzałką ma leżeć NA zdjęciu i prześwitywać
     (Seb 11.08) — tak jak pionowy pasek na desktopie. Nakładkę robi wspólna komórka `1/1`
     dla zdjęcia i paska, dzięki czemu nie trzeba przenosić `.gml__rail` w DOM ani zgadywać
     wysokości zdjęcia do `position:absolute`. Tło i `saturate` 1:1 z wersją desktopową. */
  body.gm-page .gm-sub--oferta .gml,
  body.gm-page .gm-sub--oferta .gml:nth-child(even){
    display:grid; grid-template-columns:1fr; height:auto;
  }
  body.gm-page .gm-sub--oferta .gml__media{
    grid-area:1 / 1; flex:0 0 auto; height:62vw; max-height:360px; width:100%; max-width:none;
  }
  body.gm-page .gm-sub--oferta .gml__rail,
  body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__rail{
    grid-area:1 / 1; align-self:end; z-index:2;
    position:static; left:auto; right:auto; flex-direction:row;
    justify-content:space-between; align-items:center;
    width:100%; height:52px; padding:0 18px;
    background:rgba(255,255,255,.67);
    backdrop-filter:saturate(1.05); -webkit-backdrop-filter:saturate(1.05);
  }
  body.gm-page .gm-sub--oferta .gml__body{ grid-area:2 / 1; max-width:none; width:100%; height:auto; }
  /* ⚠️ paddingi MUSZĄ być powtórzone dla `:nth-child(even)` — desktopowe reguły naprzemienności
     (`.gml:nth-child(even) .gml__head`, 0,4,1) biją mobilne (0,3,1) mimo późniejszej pozycji
     w arkuszu. Bez tego co druga karta gubiła 22 px odstępu pod zdjęciem i miała lustrzane
     paddingi boczne (Seb 11.08: „co 2 kafelek … raz ok a raz za mały"). */
  body.gm-page .gm-sub--oferta .gml__head,
  body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__head{ min-height:0; padding:22px 18px 0; }
  body.gm-page .gm-sub--oferta .gml__title{
    font-size:clamp(26px,7.4vw,38px); line-height:1.08; letter-spacing:-1.2px;
  }
  body.gm-page .gm-sub--oferta .gml__price{ font-size:24px; letter-spacing:2px; margin:10px 0 18px; }
  body.gm-page .gm-sub--oferta .gml__meta,
  body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__meta{
    flex:0 0 auto; height:auto; padding:14px 18px; gap:18px; flex-wrap:wrap; row-gap:10px;
  }
  body.gm-page .gm-sub--oferta .gml__m{ font-size:14px; gap:9px; }
  body.gm-page .gm-sub--oferta .gml__note,
  body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__note{ padding:16px 18px 24px; }
  body.gm-page .gm-sub--oferta .gml__desc{ font-size:13px; line-height:20px; letter-spacing:1.6px; -webkit-line-clamp:4; }
  body.gm-page .gm-sub--oferta .gml__cta{ margin-top:16px; font-size:12px; letter-spacing:2.4px; }
  body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__badge{ left:19px; right:auto; }
}

/* ================================================================
   §10 — POJEDYNCZA OFERTA (szablon `gm-front/offer/single-offer.php`)
   Ramki Figmy „Desktop - 12/13/14" + ustalenia Seba (11.08).
   Trzy karty nachodzące na siebie: hero → dane → galeria/wideo → kontakt.
   ================================================================ */
body.gm-page.single-offer{ background:var(--paper); }
body.gm-page .gmo{
  --gmo-pad:clamp(20px,5vw,72px);        /* margines boczny treści — Figma „Desktop - 14" */
  --gmo-lap:clamp(34px,5vw,72px);        /* o tyle każda karta nachodzi na poprzednią */
  /* Jeden odstęp „oddechowy" dla styków sekcji: 100 px na desktopie (prośba Seba 11.08),
     w dół skaluje się, żeby na telefonie nie robić pustej połowy ekranu. */
  --gmo-gap:clamp(60px,7vw,100px);
  position:relative; display:block; width:100%; overflow:clip;
  font-family:var(--sans); color:var(--ink);
}
body.gm-page .gmo *{ box-sizing:border-box; }
body.gm-page .gmo .gmo-ic{ flex:none; width:18px; height:18px; }

/* wspólny kicker „/ Nazwa" — ten sam co w sekcjach strony głównej */
body.gm-page .gmo .gmo__kicker{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(.86rem,1.05vw,1rem); letter-spacing:.02em; text-transform:uppercase;
  color:#590B11;
}
body.gm-page .gmo .gmo-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  padding:0 clamp(18px,2vw,30px); border:1px solid currentColor; color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:clamp(.68rem,.85vw,.8rem);
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  background:transparent; transition:background .35s ease, color .35s ease;
}
body.gm-page .gmo .gmo-btn:hover{ background:var(--ink); color:var(--cream); }
body.gm-page .gmo .gmo-btn--light{ color:var(--cream); }
body.gm-page .gmo .gmo-btn--light:hover{ background:var(--cream); color:var(--ink); }
body.gm-page .gmo .gmo-btn--solid{ background:#590B11; border-color:#590B11; color:var(--cream); }
body.gm-page .gmo .gmo-btn--solid:hover{ background:var(--ink); border-color:var(--ink); }

/* ---------- HERO ---------- */
/* Hero PINUJE SIĘ (jak `.hero` na stronie głównej), a sekcja 1 wjeżdża na niego KARTĄ przy
   scrollu — zamiast obu stać nieruchomo i nachodzić statycznym marginesem. `100lvh` (nie svh),
   żeby na telefonie kadr nie odsłaniał sekcji pod spodem przy schowanym pasku przeglądarki. */
body.gm-page .gmo-hero{
  position:sticky; top:0; z-index:1; width:100%; overflow:hidden;
  height:100vh; height:100lvh; background:#0c0b12;
}
body.gm-page .gmo-hero__media{ position:absolute; inset:0; overflow:hidden; }
body.gm-page .gmo-hero__media img{ width:100%; height:100%; object-fit:cover; }
body.gm-page .gmo-hero__ph{ display:block; width:100%; height:100%; background:#CAC8C8; }
/* Nagłówek jest przezroczysty i leży NA zdjęciu — przy jasnym kadrze logo i ikony ginęły.
   Miękkie przyciemnienie u góry (bez blura, żeby nie ruszać kompozytora na iOS). */
body.gm-page .gmo-hero::before{
  content:""; position:absolute; left:0; right:0; top:0; height:clamp(120px,18vh,220px);
  z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,9,14,.55), rgba(10,9,14,.28) 45%, rgba(10,9,14,0));
}
/* pasek czyta się na KAŻDYM zdjęciu — delikatny cień u dołu kadru, nie płyta na całość */
body.gm-page .gmo-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:52%; pointer-events:none;
  background:linear-gradient(to top, rgba(10,9,14,.62), rgba(10,9,14,0));
}
/* ⚠️ Pasek z ceną JEST CZĘŚCIĄ HERO i nigdzie nie jedzie. Wersja `position:fixed` towarzysząca
   userowi przez całą podstronę (11.08, wzorzec malycha.agency) została zbudowana i ODRZUCONA
   przez Seba — jeśli temat wróci, jest w historii gita. */
body.gm-page .gmo-hero__bar{
  position:absolute; left:0; right:0; z-index:2; bottom:clamp(26px,4vh,52px);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(16px,3vw,40px);
  padding:0 var(--gmo-pad); color:var(--cream);
}
body.gm-page .gmo-hero__price{ display:flex; flex-direction:column; gap:5px; }
body.gm-page .gmo-hero__pv{
  font-family:var(--sans); font-weight:400; font-size:clamp(1.15rem,2vw,1.8rem);
  letter-spacing:.12em; line-height:1;
}
body.gm-page .gmo-hero__pm{
  font-family:var(--sans); font-weight:400; font-size:clamp(.66rem,.85vw,.8rem);
  letter-spacing:.1em; color:rgba(244,244,237,.72);
}
body.gm-page .gmo-hero__loc{
  display:inline-flex; align-items:center; gap:10px; justify-self:center;
  font-family:var(--sans); font-weight:400; font-size:clamp(.9rem,1.4vw,1.35rem);
  letter-spacing:.16em; text-transform:uppercase;
}
body.gm-page .gmo-hero__loc .gmo-ic{ width:22px; height:22px; }
/* Prawa kolumna paska hero: JEDEN rząd — przycisk prezentacji (lub „Oferta archiwalna"),
   a OBOK niego dwie ikonowe akcje (Seb 12.08): zakładka „Zapisz ofertę" (mechanizm ulubionych
   z wtyczki b4m) i „Udostępnij" (Web Share / kopiuj link). Wcześniej stały nad CTA jako
   przyciski z etykietami — teraz są kwadratami 48×48 pod wysokość CTA. */
body.gm-page .gmo-hero__right{ justify-self:end; display:flex; flex-direction:row;
  align-items:center; gap:clamp(8px,.9vw,12px); }
body.gm-page .gmo-hero__acts{ display:flex; align-items:center; gap:clamp(8px,.9vw,12px); }
/* `!important` na geometrii: arkusz wtyczki b4m ładuje się PO gm.css i dokłada przyciskowi
   ulubionych własny padding/min-width (bez tego kwadrat rozjeżdżał się o 8 px względem CTA). */
body.gm-page .gmo-act{ display:inline-flex !important; align-items:center; justify-content:center;
  width:48px !important; height:48px !important; min-width:0 !important; min-height:48px !important;
  padding:0 !important; margin:0 !important; flex:0 0 48px; border-radius:0 !important;
  background:transparent !important; cursor:pointer; box-shadow:none !important;
  border:1px solid rgba(244,244,237,.85) !important; color:var(--cream) !important;
  transition:background .35s ease,color .35s ease,border-color .35s ease; }
/* ⚠️ `color` MUSI mieć `!important`: arkusz wtyczki b4m ładuje się po gm.css i nadaje przyciskowi
   ulubionych ciemny kolor tekstu — zakładka wychodziła grafitowa na ciemnym zdjęciu. */
body.gm-page .gmo-act:hover, body.gm-page .gmo-act:focus-visible{ color:var(--ink) !important; }
body.gm-page .gmo-act:hover{ background:var(--cream) !important; color:var(--ink); border-color:var(--cream) !important; }
/* etykieta tylko dla czytników ekranu — przyciski są ikonowe (nazwę widać w `title`) */
body.gm-page .gmo-act__l{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
/* `non-scaling-stroke`: zakładka jest w viewBoxie 20×38, znaki udostępniania w 24×24 —
   bez tego ta sama `stroke-width` dałaby na ekranie różne grubości kresek. */
body.gm-page .gmo-act__ic{ display:block; fill:none; stroke:currentColor; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:miter; vector-effect:non-scaling-stroke; }
body.gm-page .gmo-act__ic path{ vector-effect:non-scaling-stroke; }
body.gm-page .gmo-act__ic--bm{ width:12px; height:22.8px; }   /* proporcja 20:38 jak na kafelku */
/* rysunek udostępniania wypełnia tylko część viewBoxa (12,2 × 17,7 z 24), więc żeby optycznie
   zrównoważył wysoką zakładkę, sam <svg> musi być większy niż jej szerokość */
body.gm-page .gmo-act__ic--sh{ width:24px; height:24px; }
body.gm-page .gmo-act__ic--ok{ width:22px; height:22px; display:none; }
/* zapisana oferta: zakładka wypełniona — stan `is-active` nadaje skrypt wtyczki.
   ⚠️ Wtyczka ma na to WŁASNE `!important` (`.esticrm-single-fav.is-active svg{fill:#fff;stroke:#fff}`
   w single.css, ładowanym po gm.css) — po najechaniu na ZAPISANĄ zakładkę wychodziła biel na
   kremowym tle. Dlatego kolory ikony też idą z `!important`, i to na svg ORAZ na `path`.
   Tło i ramkę przy `aria-pressed="true"` wtyczka też chce przemalować na swój akcent — stąd
   osobna reguła niżej. */
body.gm-page .gmo-act .gmo-act__ic,
body.gm-page .gmo-act .gmo-act__ic path{ stroke:currentColor !important; fill:none !important; }
body.gm-page .gmo-act.is-active .gmo-act__ic--bm,
body.gm-page .gmo-act.is-active .gmo-act__ic--bm path{ fill:currentColor !important; }
body.gm-page .gmo-act.esticrm-single-fav[aria-pressed="true"]{
  background:transparent !important; border-color:rgba(244,244,237,.85) !important;
  color:var(--cream) !important;
}
body.gm-page .gmo-act.esticrm-single-fav[aria-pressed="true"]:hover{
  background:var(--cream) !important; border-color:var(--cream) !important; color:var(--ink) !important;
}
/* potwierdzenie skopiowania linku: kadr się rozjaśnia i znak zmienia się w ptaszka */
body.gm-page .gmo-act--share.is-copied{ background:var(--cream) !important; color:var(--ink); border-color:var(--cream) !important; }
body.gm-page .gmo-act--share.is-copied .gmo-act__ic--sh{ display:none; }
body.gm-page .gmo-act--share.is-copied .gmo-act__ic--ok{ display:block; }

body.gm-page .gmo-hero__cta{
  display:inline-flex; align-items:center; min-height:48px;
  padding:0 clamp(16px,1.8vw,28px); border:1px solid rgba(244,244,237,.85); color:var(--cream);
  font-size:clamp(.62rem,.8vw,.75rem); letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; transition:background .35s ease, color .35s ease;
}
body.gm-page .gmo-hero__cta:hover{ background:var(--cream); color:var(--ink); }
/* Oferta archiwalna: ten sam kadr, ale to informacja, nie przycisk — przygaszona i bez reakcji
   na najechanie, żeby nikt nie próbował w nią kliknąć. */
body.gm-page .gmo-hero__cta--arch{
  cursor:default; border-color:rgba(244,244,237,.45); color:rgba(244,244,237,.8);
}
body.gm-page .gmo-hero__cta--arch:hover{ background:transparent; color:rgba(244,244,237,.8); }

/* ---------- SEKCJA 1: dane oferty (karta nachodząca na hero) ---------- */
/* Zdjęcia w prawej kolumnie NIE dochodzą do krawędzi okna (Seb 11.08) — sekcja ma margines
   po obu stronach, tak jak treść na stronie głównej.
   Dolny odstęp liczony z zapasem na nachodzenie: ciemna galeria przykrywa dolne `--gmo-lap`
   tej sekcji, więc realnie widoczne pod ostatnim zdjęciem zostaje `--gmo-gap` (100 px). */
body.gm-page .gmo-s1{
  position:relative; z-index:4; background:#fff;
  box-shadow:0 -30px 62px rgba(0,0,0,.18);
  padding:clamp(34px,5vw,72px) var(--gmo-pad) calc(var(--gmo-gap) + var(--gmo-lap));
}
/* ⚠️ `align-items:start` TU NIE MOŻE BYĆ: kolumna dostawała wtedy wysokość własnej treści
   (738 px przy 1339 px zdjęć), więc `position:sticky` w środku nie miało w czym się przesuwać
   i tekst jechał razem ze zdjęciami. `stretch` daje kolumnie pełną wysokość rzędu — dopiero
   wtedy treść realnie stoi, a przewijają się same zdjęcia. */
body.gm-page .gmo-s1__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(24px,4vw,74px); align-items:stretch;
}
/* Lewa kolumna stoi w miejscu, prawa przewija się zdjęciami. Gdy kolumna jest WYŻSZA niż okno
   (rozwinięte akordeony), przypinanie do góry by ją ucięło — wtedy `gm.js` wiesza klasę
   `is-tall` i kolumna przypina się DOŁEM: najpierw da się ją doczytać, a potem stoi
   nieruchomo, a jadą już tylko zdjęcia (Seb 11.08). */
body.gm-page .gmo-s1__sticky{ position:sticky; top:clamp(90px,12vh,130px); }
body.gm-page .gmo .gmo__h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,3.2vw,2.9rem);
  line-height:1.06; letter-spacing:-.03em; color:#000; margin:0;
}
body.gm-page .gmo .gmo__tags{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:clamp(10px,1.4vh,16px) 0 0;
  font-family:var(--sans); font-weight:400; font-size:clamp(.7rem,.9vw,.84rem);
  letter-spacing:.12em; text-transform:uppercase; color:#590B11;
}
body.gm-page .gmo .gmo__tags span + span::before{ content:"•"; margin-right:10px; opacity:.65; }
body.gm-page .gmo .gmo__lead{
  margin:clamp(16px,2.4vh,26px) 0 0; max-width:56ch;
  font-family:var(--sans); font-weight:300; font-size:clamp(.85rem,1.02vw,1rem);
  line-height:1.62; color:rgba(22,21,30,.86);
}

/* akordeon — kreski zamiast ramek, jak reszta strony */
body.gm-page .gmo-acc{ margin-top:clamp(22px,3.4vh,38px); border-top:1px solid #E7E7E7; }
body.gm-page .gmo-acc__i{ border-bottom:1px solid #E7E7E7; }
body.gm-page .gmo-acc__s{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(13px,1.8vh,18px) 0; cursor:pointer; list-style:none;
  font-family:var(--sans); font-weight:400; font-size:clamp(.62rem,.78vw,.72rem);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
}
body.gm-page .gmo-acc__s::-webkit-details-marker{ display:none; }
/* „+" zamienia się w „×" obrotem — jeden element zamiast dwóch ikon */
body.gm-page .gmo-acc__ic{
  position:relative; flex:none; width:19px; height:19px; border-radius:50%;
  border:1px solid #C9C9C9; transition:transform .4s cubic-bezier(.16,1,.3,1),
    background .3s ease, border-color .3s ease;
}
body.gm-page .gmo-acc__ic::before,
body.gm-page .gmo-acc__ic::after{
  content:""; position:absolute; top:50%; left:50%; width:9px; height:1px;
  background:currentColor; transform:translate(-50%,-50%);
}
body.gm-page .gmo-acc__ic::after{ transform:translate(-50%,-50%) rotate(90deg); }
body.gm-page .gmo-acc__i[open] > .gmo-acc__s .gmo-acc__ic{
  transform:rotate(45deg); background:#590B11; border-color:#590B11; color:var(--cream);
}
/* rozwijanie przez `grid-template-rows` — animuje się z ZAWARTOŚCI, bez zgadywania max-height */
body.gm-page .gmo-acc__c{ display:grid; grid-template-rows:1fr; }
body.gm-page .gmo-acc__wrap{ overflow:hidden; padding-bottom:clamp(14px,2vh,22px); }
body.gm-page .gmo-acc__i.is-anim .gmo-acc__c{ transition:grid-template-rows .42s cubic-bezier(.16,1,.3,1); }
body.gm-page .gmo-acc__i.is-shut .gmo-acc__c{ grid-template-rows:0fr; }
body.gm-page .gmo-acc__txt{
  font-family:var(--sans); font-weight:300; font-size:clamp(.82rem,.98vw,.95rem);
  line-height:1.65; color:rgba(22,21,30,.86);
}
body.gm-page .gmo-acc__txt p + p{ margin-top:.8em; }
body.gm-page .gmo-desc__list{ margin:.9em 0 0; padding:0; list-style:none; }
body.gm-page .gmo-desc__list li{
  position:relative; padding:7px 0 7px 18px; border-bottom:1px solid #EFEFEF;
}
body.gm-page .gmo-desc__list li::before{
  content:""; position:absolute; left:0; top:15px; width:7px; height:1px; background:#590B11;
}
body.gm-page .gmo-desc__list + p{ margin-top:1em; }

/* specyfikacja — dwie kolumny, każdy wiersz na własnej kresce */
body.gm-page .gmo-spec{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(16px,2.4vw,34px);
  list-style:none; margin:0; padding:0;
}
body.gm-page .gmo-spec__i{
  display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid #EFEFEF;
}
body.gm-page .gmo-spec__i .gmo-ic{ width:16px; height:16px; color:#590B11; }
body.gm-page .gmo-spec__t{ display:flex; flex-direction:column; gap:3px; min-width:0; }
body.gm-page .gmo-spec__l{
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:#8A8A8A;
}
body.gm-page .gmo-spec__v{ font-size:.8rem; font-weight:500; color:var(--ink); }

body.gm-page .gmo-feat{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;
}
body.gm-page .gmo-feat__i{
  padding:8px 14px; border:1px solid #E0E0E0;
  font-size:.72rem; letter-spacing:.06em; color:rgba(22,21,30,.86);
}
body.gm-page .gmo-map{ margin-top:16px; aspect-ratio:16/9; }
/* mapa w naturalnych kolorach (Seb 11.08) — wcześniej szła przez `grayscale(1)` */
body.gm-page .gmo-map iframe{ width:100%; height:100%; border:0; display:block; }

body.gm-page .gmo .gmo__btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(22px,3vh,32px); }

/* prawa kolumna: zdjęcia 2-4, przewijają się przy nieruchomej lewej */
/* Zdjęcia ROSNĄ, żeby kolumna nie kończyła się wyżej niż tekst obok (Seb: „żeby nie było
   białej pustej przestrzeni po prawej") — przy jednym czy dwóch zdjęciach zajmują tyle,
   ile trzeba, zamiast zostawiać dziurę pod spodem. */
body.gm-page .gmo-s1__shots{
  display:flex; flex-direction:column; gap:clamp(18px,2.6vw,38px);
  min-height:100%;
}
body.gm-page .gmo-shot{
  all:unset; display:block; cursor:zoom-in; overflow:hidden; background:#CAC8C8;
  flex:1 1 auto; min-height:clamp(240px,30vw,440px);
}
body.gm-page .gmo-shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
body.gm-page .gmo-shot:hover img{ transform:scale(1.04); }

/* ---------- SEKCJA 2: galeria + wideo (ciemna karta) ---------- */
/* Ciemna sekcja BEZ cienia (Seb) i PINOWANA GÓRĄ — dokładnie jak `.abt` (Radosław) na stronie
   głównej: `position:sticky; top:0`. Sekcja staje, gdy jej góra dojdzie do krawędzi okna,
   a następna wjeżdża na nią kartą.
   ⚠️ NIGDY `bottom:0` — element sticky z `bottom` jest wciągany do dołu okna RÓWNIEŻ wtedy,
   gdy leży jeszcze poniżej ekranu: galeria wjeżdżała wtedy na hero i zasłaniała go od
   pierwszej klatki. */
body.gm-page .gmo-s2{
  position:sticky; top:0; z-index:5; margin-top:calc(-1 * var(--gmo-lap));
  background:#1B1B1B; color:var(--cream);
  /* góra: 100 px nad galerią; dół: 100 px pod wideo + zapas na kartę Radka, która przykrywa
     dolne `--gmo-lap` tej sekcji */
  padding:var(--gmo-gap) 0 calc(var(--gmo-gap) + var(--gmo-lap)) var(--gmo-pad);
}
body.gm-page .gmo-s2 .gmo__kicker{ color:var(--cream); font-size:clamp(.78rem,.95vw,.92rem); }
body.gm-page .gmo-gal__head{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-right:var(--gmo-pad); margin-bottom:clamp(16px,2.4vh,26px);
}
body.gm-page .gmo-gal__nav{ display:inline-flex; align-items:center; gap:clamp(12px,1.4vw,20px); }
body.gm-page .gmo-gal__arr{
  all:unset; display:inline-flex; cursor:pointer; color:var(--cream); padding:6px;
  transition:opacity .3s ease, transform .3s ease;
}
body.gm-page .gmo-gal__arr svg{ width:40px; height:12px; fill:none; stroke:currentColor; stroke-width:1.1; }
body.gm-page .gmo-gal__arr:hover{ transform:translateX(3px); }
body.gm-page .gmo-gal__arr[data-gmo-gal="prev"]:hover{ transform:translateX(-3px); }
body.gm-page .gmo-gal__arr[disabled]{ opacity:.32; cursor:default; transform:none; }
body.gm-page .gmo-gal__count{
  font-family:var(--sans); font-size:clamp(.86rem,1.1vw,1.05rem); letter-spacing:.1em;
}
/* tor przewijany strzałkami — ostatni kafel celowo wychodzi poza kadr (jak w projekcie) */
body.gm-page .gmo-gal__track{
  display:flex; gap:clamp(14px,2vw,32px); overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; scrollbar-width:none; padding-right:var(--gmo-pad);
}
body.gm-page .gmo-gal__track::-webkit-scrollbar{ display:none; }
body.gm-page .gmo-gal__i{
  all:unset; flex:0 0 clamp(260px,48%,720px); scroll-snap-align:start; cursor:zoom-in;
  aspect-ratio:16/10; overflow:hidden; background:#CAC8C8;
}
/* Kolejność kafli robi `order`, nie HTML (Seb 11.08):
     • trzy kadry, które na desktopie stoją w kolumnie sekcji 1, jadą w torze PO reszcie zdjęć;
     • zdjęcie wyróżnione (to samo, co w hero) zamyka tor.
   Na telefonie kolumna jest ukryta, więc `--dup` wraca na swoje miejsce w kolejce — patrz
   media query na dole. */
body.gm-page .gmo-gal__i--dup{ order:1; }
body.gm-page .gmo-gal__i--hero{ order:2; }
body.gm-page .gmo-gal__i img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
body.gm-page .gmo-gal__i:hover img{ transform:scale(1.04); }

body.gm-page .gmo-vid{ margin-top:var(--gmo-gap); padding-right:var(--gmo-pad); }
body.gm-page .gmo-vid__frame{ margin-top:clamp(14px,2vh,22px); aspect-ratio:16/9; background:#CAC8C8; }
body.gm-page .gmo-vid__frame iframe{ width:100%; height:100%; border:0; display:block; }
body.gm-page .gmo-vid__frame--poster{ position:relative; cursor:pointer; overflow:hidden; }
body.gm-page .gmo-vid__frame--poster img{ width:100%; height:100%; object-fit:cover; display:block; }
body.gm-page .gmo-vid__play{
  all:unset; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  width:clamp(64px,7vw,92px); height:clamp(64px,7vw,92px); border-radius:50%;
  background:rgba(18,17,24,.55); border:1px solid rgba(244,244,237,.3);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:background .3s ease, transform .3s ease;
}
body.gm-page .gmo-vid__play svg{ width:26px; height:26px; fill:var(--cream); margin-left:3px; }
body.gm-page .gmo-vid__frame--poster:hover .gmo-vid__play{
  background:#590B11; transform:translate(-50%,-50%) scale(1.06);
}

/* ---------- SEKCJA KONTAKTU: karta opiekuna | cytat + formularz ----------
   Układ ze screena Seba (11.08). Wcześniej były to DWIE sekcje (opiekun na całą szerokość,
   pod nim formularz ze zdjęciem przy prawej krawędzi) — teraz jeden rząd na białym tle:
   po lewej wąska karta opiekuna (zdjęcie + dane w ramce), po prawej cytat i formularz w ramce.
   BEZ cienia (Seb) — nachodzenie na ciemną galerię robi sam ujemny margines i z-index. */
body.gm-page .gmo-s3{
  position:relative; z-index:6; margin-top:calc(-1 * var(--gmo-lap));
  background:#fff;
  padding:var(--gmo-gap) var(--gmo-pad);
}
/* Proporcje ze screena: karta 394 px na 1522 px treści (≈26 %), odstęp 146 px (≈9,6 %). */
body.gm-page .gmo-ct{
  display:grid; grid-template-columns:minmax(0,26%) minmax(0,1fr);
  gap:clamp(26px,8.5vw,124px); align-items:stretch;
}

/* Karta opiekuna kończy się DOKŁADNIE tam, co formularz obok — na każdej szerokości.
   ⚠️ Samo `align-items:stretch` tego NIE daje: wysokość rzędu to maksimum z obu kolumn, więc
   od ~1700 px zdjęcie (rosnące w `vw`) rozpychało kartę i wystawała ona 124–385 px pod
   formularz (zmierzone na 1728/1920/2560). Karta leży więc `absolute` w pustym wrapperze —
   wtedy do wysokości rzędu wlicza się WYŁĄCZNIE prawa kolumna, a zdjęcie dostaje resztę
   miejsca po treści karty. `min-height` wrappera to zabezpieczenie na wypadek bardzo krótkiej
   prawej kolumny (treść karty ma ~330 px). */
body.gm-page .gmo-ct__side{ position:relative; min-height:clamp(420px,42vw,560px); }
body.gm-page .gmo-card{
  position:absolute; inset:0; overflow:hidden;
  display:flex; flex-direction:column; border:1px solid #E2E2DE; background:#fff;
}
body.gm-page .gmo-card__photo{
  flex:1 1 auto; min-height:110px; overflow:hidden; background:#CAC8C8;
}
body.gm-page .gmo-card__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
body.gm-page .gmo-card__ph{ display:block; width:100%; height:100%; background:#CAC8C8; }
body.gm-page .gmo-card__body{ flex:none; padding:clamp(18px,1.9vw,28px); }
body.gm-page .gmo-card__name{
  margin:clamp(8px,1vh,12px) 0 0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2.3rem); line-height:1.04; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--ink);
}
body.gm-page .gmo-card__c{
  margin:clamp(12px,1.8vh,20px) 0 clamp(16px,2.4vh,26px);
  font-family:var(--sans); font-weight:400; font-size:clamp(.8rem,.98vw,.94rem);
  line-height:1.7; color:rgba(22,21,30,.86);
}
body.gm-page .gmo-card__c a{ color:inherit; text-decoration:none; }
body.gm-page .gmo-card__c a:hover{ color:#590B11; }
/* CTA na pełną szerokość karty; ciaśniejszy tracking, bo „Zadzwoń i porozmawiajmy" w domyślnym
   rozstrzeleniu marki nie mieści się w 337 px i łamie się na dwa wiersze */
body.gm-page .gmo .gmo-card__cta{
  width:100%; padding:0 12px; white-space:nowrap;
  font-size:clamp(.56rem,.72vw,.68rem); letter-spacing:.12em;
}

/* cytat opiekuna — kursywa w kolorze marki, podpis do prawej */
body.gm-page .gmo-quote{ margin:0 0 clamp(20px,3vw,42px); }
body.gm-page .gmo-quote p{
  margin:0; font-family:var(--sans); font-style:italic; font-weight:400;
  font-size:22px; line-height:1.45; color:#590B11;                 /* 22 px — Seb 11.08 */
}
body.gm-page .gmo-quote cite{
  display:block; margin-top:clamp(8px,1.2vw,16px); text-align:right; font-style:italic;
  font-family:var(--sans); font-size:15px; color:#590B11;          /* podpis pod cytat 22 px */
}

/* ---------- FORMULARZ: biała karta w ramce (screen Seba 11.08) ----------
   Poprzednia wersja (szara kolumna + zdjęcie do prawej krawędzi okna, Figma „Desktop - 14")
   wypadła razem z tym zdjęciem — screen pokazuje formularz jako kartę w ramce pod cytatem. */
body.gm-page .gmo-form{
  background:#fff; border:1px solid #E2E2DE;
  padding:clamp(22px,2.6vw,38px);
}
body.gm-page .gmo-form__h{
  margin:clamp(6px,1vh,12px) 0 clamp(20px,3vh,36px);
  font-family:var(--sans); font-weight:400; font-size:clamp(1.5rem,3.5vw,3.2rem);
  line-height:1.16; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
}
body.gm-page .gmo-form__fallback a{ color:#590B11; }

/* --- WPForms w języku strony: pola w ramkach, etykieta jako napis w polu ---
   ⚠️ SIATKA MUSI SIEDZIEĆ NA `.wpforms-field-container`, nie na `<form>`: WPForms 2.0 wkłada
   wszystkie pola do tego kontenera, a on sam jest JEDNYM dzieckiem formularza. Grid postawiony
   na `<form>` dawał więc kontenerowi jedną komórkę i każde pole miało połowę szerokości —
   `grid-column:1/-1` na polach nic nie zmieniało, bo działało w cudzym kontekście. */
body.gm-page .gmo-form .wpforms-container{ margin:0 !important; max-width:none !important; }
body.gm-page .gmo-form form.wpforms-form{ display:block !important; }
body.gm-page .gmo-form .wpforms-field-container{
  display:grid !important; grid-template-columns:59.6fr 40.4fr;   /* e-mail / telefon ze screena */
  gap:clamp(10px,1vw,15px); width:100%;
}
body.gm-page .gmo-form div.wpforms-field{
  grid-column:1 / -1 !important; padding:0 !important; margin:0 !important; max-width:none !important;
}
body.gm-page .gmo-form div.gmo-f--half{ grid-column:auto !important; }
/* techniczne kontenery WPForms (bez naszej klasy) nie mogą łapać odstępu siatki */
body.gm-page .gmo-form .wpforms-field-container > div.wpforms-field:not([class*="gmo-f"]){
  display:none !important;
}
/* etykieta pola zgody („Zgoda *") jest zbędna — treść stoi przy samym kwadraciku */
body.gm-page .gmo-form .gmo-f--rodo > .wpforms-field-label{
  position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}
/* etykiety WPForms zastępuje `placeholder` — zostają tylko dla czytników ekranu */
body.gm-page .gmo-form .wpforms-field > .wpforms-field-label{
  position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
body.gm-page .gmo-form .wpforms-field-medium,
body.gm-page .gmo-form .wpforms-field-large,
body.gm-page .gmo-form input[type=text],
body.gm-page .gmo-form input[type=email],
body.gm-page .gmo-form input[type=tel],
body.gm-page .gmo-form textarea{
  width:100% !important; max-width:none !important; box-sizing:border-box;
  padding:16px 18px !important; border:1px solid #D6D6D2 !important; border-radius:0 !important;
  background:#fff !important; box-shadow:none !important;
  font-family:var(--sans) !important; font-weight:400 !important; font-size:.86rem !important;
  letter-spacing:.06em; color:var(--ink) !important;
}
body.gm-page .gmo-form textarea{ min-height:150px !important; resize:vertical; }
body.gm-page .gmo-form input::placeholder,
body.gm-page .gmo-form textarea::placeholder{
  color:#8A8A8A; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; opacity:1;
}
body.gm-page .gmo-form input:focus,
body.gm-page .gmo-form textarea:focus{ outline:none; border-color:#590B11 !important; }

/* ⚠️ Zaznaczony checkbox NIE bierze koloru z `accent-color` — WPForms jedzie w trybie
   `wpforms-render-modern`, czyli `appearance:none` + własna ramka i ptaszek malowane
   ze zmiennej `--wpforms-button-background-color` (fabrycznie NIEBIESKIE #066aab).
   Przestawiamy zmienną na bordo marki dla WSZYSTKICH formularzy na stronie (Seb 12.08);
   przycisk „wyślij" ma własne `background:transparent !important`, więc nic mu to nie robi.
   `accent-color` zostaje dla przeglądarek/motywów bez trybu modern. */
body.gm-page .wpforms-container{
  --wpforms-button-background-color:#590B11;
  --wpforms-button-background-color-alt:#590B11;
}
body.gm-page .wpforms-container input[type=checkbox]:checked,
body.gm-page .wpforms-container input[type=radio]:checked{ border-color:#590B11 !important; }
body.gm-page .gmo-form .wpforms-field-checkbox ul{ list-style:none; margin:0; padding:0; }
body.gm-page .gmo-form .wpforms-field-checkbox li{ display:flex; align-items:center; gap:12px; }
body.gm-page .gmo-form .wpforms-field-checkbox input{ flex:none; margin-top:3px; width:15px; height:15px; accent-color:#590B11; }
body.gm-page .gmo-form .wpforms-field-checkbox label{
  font-family:var(--sans); font-weight:400; font-size:.7rem; line-height:1.55; color:rgba(22,21,30,.66);
}
/* przycisk wyśrodkowany w karcie (screen 11.08), nie dosunięty do lewej */
body.gm-page .gmo-form .wpforms-submit-container{
  padding:0 !important; margin-top:clamp(14px,1.6vw,24px);
  display:flex !important; justify-content:center;
}
body.gm-page .gmo-form button.wpforms-submit{
  display:inline-flex; align-items:center; justify-content:center; min-height:54px;
  width:47%; min-width:260px; padding:0 clamp(24px,3vw,46px) !important; border:1px solid var(--ink) !important; border-radius:0 !important;
  background:transparent !important; color:var(--ink) !important; box-shadow:none !important;
  font-family:var(--sans) !important; font-weight:400 !important; font-size:.72rem !important;
  letter-spacing:.2em !important; text-transform:uppercase; cursor:pointer;
  transition:background .35s ease, color .35s ease;
}
body.gm-page .gmo-form button.wpforms-submit:hover{ background:var(--ink) !important; color:var(--cream) !important; }
body.gm-page .gmo-form .wpforms-confirmation-container-full{
  background:#fff !important; border:1px solid #D6D6D2 !important; border-radius:0 !important;
  padding:18px 20px !important; color:var(--ink) !important;
}

/* ---------- ANIMACJA WEJŚCIA (TYLKO TELEFON) ----------
   Na desktopie ruch robią mechaniki scrollowe (pinowane hero, karty nachodzące na siebie).
   Na telefonie te mechaniki są wyłączone, więc strona przewijała się „na płasko" — stąd
   miękkie wejście treści (Seb 11.08). Klasę wiesza `gm.js` tylko przy ≤900 px, więc na
   desktopie te reguły nie mają czego złapać.
   ⚠️ NIGDY nie wieszać tego na sekcjach: `transform` tworzy containing block i rozwala
   `position:sticky` w środku. Tylko elementy WEWNĄTRZ sekcji. */
body.gm-page .gmo-rise{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
body.gm-page .gmo-rise.is-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  body.gm-page .gmo-rise{ opacity:1; transform:none; transition:none; }
}

/* ---------- LIGHTBOX ---------- */
body.gm-page .gmo-lb{
  position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,2vw,30px); padding:clamp(40px,6vw,80px);
  background:rgba(12,11,16,.94); opacity:0; transition:opacity .3s ease;
}
body.gm-page .gmo-lb.is-on{ opacity:1; }
body.gm-page .gmo-lb[hidden]{ display:none; }
body.gm-page .gmo-lb__img{ max-width:100%; max-height:100%; object-fit:contain; }
body.gm-page .gmo-lb__x{
  all:unset; position:absolute; top:clamp(16px,3vh,34px); right:clamp(18px,3vw,40px);
  font-size:2rem; line-height:1; color:var(--cream); cursor:pointer;
}
body.gm-page .gmo-lb__arr{ all:unset; cursor:pointer; color:var(--cream); padding:10px; }
body.gm-page .gmo-lb__arr svg{ width:44px; height:13px; fill:none; stroke:currentColor; stroke-width:1.1; }
body.gm-page .gmo-lb__count{
  position:absolute; bottom:clamp(16px,3vh,34px); left:50%; transform:translateX(-50%);
  color:var(--cream); font-size:.85rem; letter-spacing:.1em;
}

/* ---------- MOBILE ---------- */
@media(max-width:900px){
  body.gm-page .gmo-s1__grid{ grid-template-columns:1fr; gap:clamp(22px,4vh,36px); }
  body.gm-page .gmo-s1__sticky{ position:static; }
  body.gm-page .gmo-spec{ grid-template-columns:1fr; }
  body.gm-page .gmo-gal__i{ flex-basis:82%; }
  /* Telefon: miejscowość na górze, POD NIĄ cena, a przycisk na całą szerokość kadru (Seb 11.08).
     Kolejność robi `order` — w HTML cena stoi pierwsza, bo na desktopie jest po lewej.
     ⚠️ `bottom` liczony jako `100lvh − 100svh + 24px`: sekcja ma wysokość `100lvh` (kadr z
     UKRYTYM paskiem przeglądarki), więc przy widocznym pasku jej dół — razem z przyciskiem —
     wypadał poza ekran i CTA było ucięte. Różnica lvh−svh to dokładnie wysokość paska, więc
     przycisk stoi zawsze 24 px nad dolną krawędzią tego, co user REALNIE widzi. */
  body.gm-page .gmo-hero__bar{
    grid-template-columns:1fr; justify-items:start; gap:8px; text-align:left;
    bottom:24px; bottom:calc(100lvh - 100svh + 24px);
  }
  /* telefon: CTA rozciąga się na resztę wiersza, dwa kwadraty akcji zostają przy prawej krawędzi.
     ⚠️ `order:3` MUSI siedzieć TU, na kolumnie — `order` na samym `.gmo-hero__cta` nic nie daje,
     bo przycisk nie jest dzieckiem `.gmo-hero__bar`, tylko tej kolumny. Bez tego cały blok
     z przyciskiem lądował NAD miejscowością i ceną, a ma być na samym dole hero (Seb 11.08). */
  body.gm-page .gmo-hero__right{ order:3; justify-self:start; align-items:center; width:100%; gap:8px; }
  body.gm-page .gmo-hero__acts{ flex-wrap:nowrap; flex:0 0 auto; }
  /* `line-height:1` — domyślna interlinia zostawiała pod miejscowością kilkanaście pustych px
     i wyglądała jak większy odstęp od ceny, niż wynikał z `gap` */
  body.gm-page .gmo-hero__loc{ order:1; justify-self:start; line-height:1; }
  /* cena w jednym rzędzie na całą szerokość: kwota po lewej (duża), zł/m² dosunięte do prawej */
  body.gm-page .gmo-hero__price{
    order:2; justify-self:stretch; width:100%;
    flex-direction:row; align-items:baseline; justify-content:space-between; gap:12px;
  }
  body.gm-page .gmo-hero__pv{ font-size:1.75rem; }
  body.gm-page .gmo-hero__pm{ font-size:.75rem; }
  body.gm-page .gmo-hero__cta{
    order:3; justify-self:stretch; flex:1 1 auto; width:auto; min-width:0;
    justify-content:center; text-align:center;
  }
  body.gm-page .gmo-hero__acts{ order:4; }
  /* Na telefonie nie ma po co skakać do galerii ani do wideo — wszystko leży jedno pod drugim,
     a zdjęcia z kolumny sekcji 1 przenoszą się do karuzeli (Seb 11.08). */
  body.gm-page .gmo .gmo__btns{ display:none; }
  body.gm-page .gmo-s1__shots{ display:none; }
  /* kolumny nie ma, więc te trzy kadry wracają na swoje miejsce w kolejce; wyróżnione zostaje
     na końcu toru (`order:2` z reguły bazowej) */
  body.gm-page .gmo-gal__i--dup{ order:0; }
  /* Strzałki lightboxa na telefonie były ucięte krawędziami ekranu — zdejmujemy je,
     przewijanie zdjęć zostaje na geście (obsługa w `gm.js`) i na klawiaturze. */
  body.gm-page .gmo-lb__arr{ display:none; }
  body.gm-page .gmo-lb{ padding:clamp(46px,12vw,80px) 16px; }
  /* Na telefonie sekcja kontaktu NIE wjeżdża kartą na galerię (Seb 11.08) — przewija się
     normalnie, jedna sekcja pod drugą. Sam `margin-top:0` by nie wystarczył: dopóki ciemna
     sekcja stoi przypięta (`sticky` + ujemny `top` z `gm.js`), kontakt i tak przesuwałby się
     PO NIEJ, czyli dalej wyglądał jak karta. Zdejmujemy więc oba warunki naraz.
     `top` wstawiany inline przez JS jest przy `position:static` ignorowany. */
  /* ⚠️ MUSI być `relative`, NIE `static`: przy `static` `z-index:5` przestaje obowiązywać
     (z-index działa tylko na elementach pozycjonowanych), więc przypięte hero — a ono zostaje
     `sticky` na całą stronę — malowało się NAD galerią i wideo i zasłaniało je w całości.
     `top:auto !important` zdejmuje ujemny `top` wstawiany inline przez `gm.js`; bez tego
     `relative` przesunęłoby sekcję o kilkaset px w górę. */
  body.gm-page .gmo-s2{ position:relative; top:auto !important; padding-bottom:var(--gmo-gap); }
  /* Pełny ekran TYLKO dla oferty z galerią I wideo naraz — klasę `--full` daje szablon PHP.
     Przy samej galerii albo samym wideo sekcja zostaje normalnej wysokości, bo inaczej pod
     treścią wisiałaby połowa ekranu czerni.
     `svh` zamiast `vh`: na iOS `100vh` liczy się z UKRYTYM paskiem przeglądarki, więc sekcja
     byłaby wyższa niż to, co user widzi. `flex:none` na dzieciach, żeby przy wyższej treści
     flex ich nie ściskał, tylko sekcja urosła. */
  body.gm-page .gmo-s2--full{
    min-height:100vh; min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
  }
  body.gm-page .gmo-s2--full > *{ flex:none; }
  body.gm-page .gmo-s3{ margin-top:0; }
  /* kontakt: karta opiekuna nad cytatem i formularzem. Karta wraca do normalnego przepływu —
     w jednej kolumnie nie ma czego wyrównywać, a `absolute` zabrałoby jej wysokość. */
  body.gm-page .gmo-ct{ grid-template-columns:1fr; gap:clamp(26px,5vh,44px); }
  body.gm-page .gmo-ct__side{ position:static; min-height:0; }
  body.gm-page .gmo-card{ position:static; max-width:420px; }
  body.gm-page .gmo-card__photo{ min-height:0; aspect-ratio:4/5; }
  body.gm-page .gmo-quote p{ text-align:center; }
  body.gm-page .gmo-quote cite{ text-align:center; }
  /* Pasek z ikonami wygląda na telefonie tak samo jak pionowy na desktopie: prześwituje przez
     niego treść, zamiast leżeć płytą (Seb 11.08). Wartości 1:1 z `.rail` desktopowego. */
  body.gm-page #rail{
    background:rgba(18,17,24,.55) !important;
    backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  }
  /* COKÓŁ POD DOLNĄ KRAWĘDZIĄ KADRU (Safari na iPhonie)
     Safari trzyma pasek adresu jako pływającą pigułkę NAD stroną, a sama strona sięga pod nią
     do dolnej krawędzi ekranu — pod paskiem ikon i obok niego prześwitywała dalsza treść
     (screeny Seba 11.08). `theme-color` tego nie rusza: to nie jest pasek systemowy, tylko
     normalny kadr strony.
     ⚠️ Cokół MUSI iść przez całą szerokość, a nie wisieć pod `#rail` — pasek ikon zajmuje
     tylko prawą część ekranu (185 z 390 px), więc jego własny pseudo-element zostawiał lewą
     połowę z prześwitującą treścią.
     `position:fixed` + `top:100%` = start dokładnie na dolnej krawędzi widocznego kadru, czyli
     cokół wypełnia WYŁĄCZNIE obszar pod nią i nie zabiera ani piksela miejsca na treść.
     `z-index` niżej niż `#rail` (180), wyżej niż sekcje strony (max 8). */
  body.gm-page::after{
    content:""; position:fixed; left:0; right:0; top:100%; height:240px; z-index:150;
    background:#fff; pointer-events:none;
  }
  /* siatka pól siedzi na `.wpforms-field-container`, NIE na `<form>` (patrz komentarz wyżej) —
     na telefonie e-mail i telefon idą jeden pod drugim */
  body.gm-page .gmo-form .wpforms-field-container{ grid-template-columns:1fr !important; }
  body.gm-page .gmo-form div.gmo-f--half{ grid-column:1 / -1 !important; }
  body.gm-page .gmo-form button.wpforms-submit{ width:100%; min-width:0; }
}


/* ===== 11. PODSTRONA /o-nas — 1:1 ze screenów Figmy (11.08) ====================
   Wszystkie wymiary przeliczone ze screenów (ramka 1224/1218 px → 1440 px, mnożnik 1.176).
   Mechaniki: kolaż 3×3 oddalający się na scrollu (port z boost4media.com/o-nas), biała karta
   „Nasza filozofia" nachodząca na przypięty kolaż, ciemna karta ze zdaniem odkrywanym słowo
   po słowie (jak cytat na stronie głównej) i manifest podjeżdżający na przypiętą kartę.
   Silnik: blok „PODSTRONA /o-nas" w js-pre.js.
   ============================================================================== */
body.gm-page .abo-hero, body.gm-page .abo-fil, body.gm-page .abo-man, body.gm-page .abo-prc{
  /* Siatka MUSI być ta sama co nagłówek i strona główna: padding-inline clamp(18px,3vw,44px)
     i BRAK max-width (zmierzone na live: logo i sekcje home = 43,2 → 1396,8 przy 1440).
     Wcześniejsze 72px/1296px robiło podstronę węższą od nagłówka — stąd „rozjechane marginesy". */
  --abo-pad:clamp(18px,3vw,44px);
  --abo-max:none;
  /* JEDEN stopień tekstu na całej podstronie (Seb 12.08) — koniec z 13/13,5/15 px per sekcja */
  --abo-body:clamp(.95rem,1.11vw,16px);
  --abo-small:clamp(.85rem,.97vw,14px);
}

/* --- mosty: wrappery widgetów przezroczyste dla layoutu ---
   Klasa makiety siedzi na wrapperze widgetu, a treść (<h1>, <p>, <img>) w środku —
   bez `display:contents` elementem siatki jest wrapper, nie treść, i wyrównania się rozjeżdżają. */
/* ⚠️ Hero MUSI tu być: zdanie przewodnie leży `position:absolute` względem `.abo-hero__in`,
   a każdy wrapper widgetu Elementora jest `position:relative` — bez `display:contents`
   punktem odniesienia staje się wrapper i zdanie ląduje pod wordmarkiem, poza sekcją. */
body.gm-page .abo-hero__in > .elementor-widget-heading,
body.gm-page .abo-hero__in > .elementor-widget-text-editor,
body.gm-page .abo-man__head > .elementor-widget-text-editor,
body.gm-page .abo-gz__tile > .elementor-widget-image,
body.gm-page .abo-fil__figure > .elementor-widget-image,
body.gm-page .abo-fil__figure2 > .elementor-widget-image,
body.gm-page .abo-man__figure > .elementor-widget-html,
body.gm-page .abo-fil__figure2 > .elementor-widget-html{ display:contents; }
body.gm-page .abo-gz__tile img, body.gm-page .abo-fil__figure img,
body.gm-page .abo-fil__figure2 img, body.gm-page .abo-fil__figure2 video,
body.gm-page .abo-man__figure video{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* --- 1. HERO: wordmark bordo + zdanie przewodnie (Figma, ekran 1) ---
   Wordmark ciągnie się przez CAŁĄ szerokość kontenera (Figma: 7,7%→92,3% ramki), zdanie
   siedzi przy prawej krawędzi, na wysokości pierwszej linii. */
/* padding DOLNY = 0: kolaż ma stykać się z dolną krawędzią wordmarku bez przerwy (Seb 12.08) */
body.gm-page .abo-hero{ position:relative; z-index:1; background:#fff; color:var(--ink);
  padding:clamp(96px,14vh,150px) var(--abo-pad) 0; }
body.gm-page .abo-hero__in{ position:relative; max-width:var(--abo-max); margin:0 auto; }
/* nowrap: łamanie WYŁĄCZNIE na <br> z treści, nigdy przez szerokość kontenera */
/* `--wm-lh` steruje interlinią wordmarku I ujemnym marginesem pod nim (patrz `.l2` niżej) —
   jedna liczba, żeby dosunięcie „GALERII" do „MROZIŃSKI.COM" nie rozjeżdżało styku z kolażem.
   .96 → .87 (Seb 12.08: „żeby galeria była bliżej mrozinski.com"). */
body.gm-page .abo-hero__wm{ --wm-lh:.87; font-family:var(--serif); font-weight:400; text-transform:uppercase;
  color:#590B11; line-height:var(--wm-lh); letter-spacing:-.005em; white-space:nowrap; margin:0; }
/* Figma: „GALERIA" ma ok. 0,83 wysokości liter drugiej linii, a „MROZIŃSKI.COM" ciągnie się
   przez CAŁĄ szerokość kontenera — stąd dwa osobne rozmiary, nie jeden nagłówek z <br>. */
body.gm-page .abo-hero__wm .l1,
body.gm-page .abo-hero__wm .l2{ display:block; }
/* Pod wersalikami zostaje pusty pas line-boxa (miejsce na descendery, których tu nie ma).
   Jego wysokość ZALEŻY OD INTERLINII: pad = lh/2 − (asc+desc)/2 + desc, a Cormorant ma
   asc 0,9258em i desc 0,2893em → pad = lh/2 − 0,31825em. Ścinamy go co do piksela, więc
   kolaż styka się z linią bazową „MROZIŃSKI.COM" — 0 px, bez przycinania liter (Seb 12.08).
   Liczone z `--wm-lh`, żeby zmiana interlinii nie odklejała ani nie wcinała kolażu. */
body.gm-page .abo-hero__wm .l2{ margin-bottom:calc(.31825em - var(--wm-lh) * .5em); }
/* rozmiary przeliczone po poszerzeniu kontenera do siatki nagłówka (1296 → 1353,6 px na 1440):
   ten sam współczynnik 1,0444 na obu liniach, żeby proporcja z Figmy została nietknięta */
body.gm-page .abo-hero__wm .l1{ font-size:clamp(1.9rem,9.98vw,143px); }
body.gm-page .abo-hero__wm .l2{ font-size:clamp(2.3rem,12.01vw,173px); }
/* Zdanie przewodnie: STAŁE 20 px (Montserrat) i 30 px na „dzieło sztuki" (Great Vibes) — Seb 12.08,
   układ 1:1 z Figmy. Nie skaluje się z wordmarkiem; siedzi w prawej części, na wysokości linii
   „GALERIA" (pion liczy JS). Prawa krawędź = prawa krawędź kontenera, czyli zdanie kończy się
   RÓWNO z „.COM" (Seb 12.08). `margin-right` kasuje pusty trailing letter-spacing (.06em)
   doklejany za ostatnim znakiem — bez tego zdanie kończyłoby się 1,2 px przed kropką w „.com". */
body.gm-page .abo-hero__note{ position:absolute; right:0; top:clamp(4px,1.2vh,16px); width:auto;
  font-family:var(--sans); font-weight:400; letter-spacing:.06em; margin:0 -.06em 0 0; white-space:nowrap;
  font-size:20px; line-height:1.9; color:var(--ink); text-align:right; }
/* znacznik linii bazowej dokładany przez JS (patrz `baselineOf` w js-pre.js) — zerowy
   inline-block nie ma własnych line-boxów, więc jego dolna krawędź leży NA linii bazowej
   wiersza i nie rozpycha go ani o piksel */
body.gm-page .abo-bl{ display:inline-block; width:0; height:0; }

/* --- 2. KOLAŻ 3×3: startuje kadrem centralnym na pełny ekran, oddala się na scrollu ---
   Wysokość sekcji = zapas scrolla: zoom kończy się na 40% postępu, przez 0,4–0,5 pełna
   siatka stoi sama, a od 0,5 wjeżdża karta filozofii (jej ujemny margines = 100vh). */
/* ⚠️ Elementor nakłada na KAŻDY kontener i widget `transition: … transform .4s`. Scale siatki
   i pozycja ostrej warstwy są sterowane scrollem, więc ta animacja sprawiała, że kadr dojeżdżał
   do wartości z opóźnieniem 0,4 s — obraz „pływał i skakał" zamiast trzymać się palca. */
body.gm-page .abo-gz__grid, body.gm-page .abo-gz__tile,
body.gm-page .abo-gz__hero, body.gm-page .abo-gz__hero img,
body.gm-page .abo-gz__tile img{ transition:none !important; }
body.gm-page .abo-gz{ position:relative; z-index:2; height:300vh; background:#fff; }
/* Scena stoi POD nagłówkiem (Seb 11.08): przy `top:0` powiększony kadr chował górę pod paskiem
   menu. `--gm-hd` = realna wysokość `.hd`, ustawiana w js-pre.js. */
/* Kadr sięga POD nagłówek — przy `top:<wysokość headera>` między paskiem menu a zdjęciem
   prześwitywał biały pas. Górę zdjęcia ratuje `object-position`, nie odstęp. */
body.gm-page .abo-gz__sticky{ position:sticky; top:var(--gm-hd,0px); height:calc(100vh - var(--gm-hd,0px)); overflow:hidden;
  background:#fff; display:grid; place-items:center; }
/* siatka = dokładnie kadr okna: przy scale 1 wypełnia ekran, przy scale startowym
   centralna komórka wypełnia ekran; origin center → cięcie równomierne od środka */
body.gm-page .abo-gz__grid{ width:100vw; height:calc(100vh - var(--gm-hd,0px)); display:grid;
  grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:clamp(6px,.75vw,13px); transform-origin:center center; will-change:transform; }
body.gm-page .abo-gz__tile{ position:relative; overflow:hidden; background:rgba(22,21,30,.06); }
/* Ostra warstwa kadru centralnego — rozmiar i pozycja z JS przez LAYOUT, nie transform-scale.
   ⚠️ `max-width:none` JEST KRYTYCZNE: Elementor nakłada na wrappery widgetów `max-width:100%`,
   więc warstwa przycinała się do szerokości sceny (2000 px), podczas gdy kafel przy skali
   startowej ma 2081 px. Efekt: kadr przesunięty o 40 px w lewo, który „doganiał" kafel dopiero
   gdy ten zmalał poniżej szerokości ekranu — czyli obraz najpierw jechał w prawo, a dopiero
   potem się pomniejszał (zmierzone: Δ środków −40 px → 0 px przy skali 3,0). */
body.gm-page .abo-gz__hero{ position:absolute; top:0; left:0; z-index:2; overflow:hidden;
  max-width:none !important; max-height:none !important;
  pointer-events:none; will-change:width,height,transform; }
body.gm-page .abo-gz__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Portrety w kaflach: `cover` przycina kadr pionowy w pionie, więc bez przesunięcia punktu
   kadrowania twarz wypada poza kafel. Trzymamy ją w górnej trzeciej części. */
body.gm-page .abo-gz__tile img[src*="radek"], body.gm-page .abo-gz__hero img{ object-position:center 28%; }
body.gm-page .abo-fil__figure img{ object-position:center 26%; }

/* --- 3. KARTA „Nasza filozofia" nachodzi na przypięty kolaż (Figma, ekran 2) ---
   Proporcje z Figmy: lead 51% szerokości ramki, kolumny 59,5% / 40,5% ze szparą 7,35%,
   duże zdjęcie prawie kwadratowe (590×553), mniejsze 3:2. */
body.gm-page .abo-fil{ position:relative; z-index:3; margin-top:-100vh; background:#fff; color:var(--ink);
  padding:clamp(52px,8.5vh,110px) var(--abo-pad) clamp(64px,11vh,150px); min-height:100vh; }
body.gm-page .abo-fil__in{ max-width:var(--abo-max); margin:0 auto; }
body.gm-page .abo-fil__lead{ font-family:var(--sans); font-weight:600; margin:0;
  font-size:clamp(.95rem,1.3vw,19px); line-height:1.7; color:var(--ink); max-width:58%; }
body.gm-page .abo-fil__body{ margin-top:clamp(38px,6.4vh,93px); display:grid;
  grid-template-columns:minmax(0,1.47fr) minmax(0,1fr); gap:clamp(28px,7.35vw,106px); align-items:start; }
body.gm-page .abo-fil__figure{ position:relative; overflow:hidden; aspect-ratio:590/553;
  background:rgba(22,21,30,.06); margin-top:clamp(0px,4vh,49px); }
body.gm-page .abo-fil__col{ display:flex; flex-direction:column; align-items:flex-start; }
body.gm-page .abo-fil__kicker{ font-family:var(--serif); font-style:italic; text-transform:uppercase;
  letter-spacing:.12em; color:#590B11; font-size:clamp(.68rem,.9vw,13px); }
body.gm-page .abo-fil__name{ margin-top:clamp(4px,.8vh,8px); font-family:var(--serif); font-weight:400;
  text-transform:uppercase; letter-spacing:-.005em; line-height:1.06; color:var(--ink);
  font-size:clamp(1.6rem,2.9vw,42px); }
body.gm-page .abo-fil__lic{ margin-top:clamp(8px,1.2vh,14px); font-family:var(--serif); font-style:italic;
  letter-spacing:.03em; font-size:clamp(.78rem,.97vw,14px); color:rgba(22,21,30,.6); }
body.gm-page .abo-fil__p{ margin:clamp(20px,2.6vh,34px) 0 0; font-family:var(--sans); font-weight:300;
  font-size:var(--abo-body); line-height:1.55; color:rgba(22,21,30,.8); }
body.gm-page .abo-fil__col > .elementor-widget-text-editor + .elementor-widget-text-editor .abo-fil__p{
  margin-top:clamp(14px,1.8vh,22px);
}
/* Ramka trzyma proporcję MATERIAŁU (16:9), nie dawnego zdjęcia 3:2 — przycinanie kadru
   filmowego do 3:2 zjadało 16 % szerokości ujęcia (Seb 14.08: zdjęcie → wideo). */
body.gm-page .abo-fil__figure2{ position:relative; overflow:hidden; aspect-ratio:16/9; width:100%;
  margin-top:clamp(22px,2.8vh,35px); background:rgba(22,21,30,.06); }

/* --- odnośnik „Przejdź do galerii ofert" pod wideo (Seb 14.08) ---
   Wyrównany do PRAWEJ krawędzi kolumny, jak w makiecie. Wrapper widgetu jest elementem
   flexa `.abo-fil__col` (align-items:flex-start), więc bez `align-self:stretch` skurczyłby się
   do szerokości tekstu i `text-align:right` nie miałoby czego wyrównywać.
   Stopień zdjęty z makiety: cap odnośnika ≈ 0,95 stopnia akapitu → 15 px przy naszych 16 px. */
body.gm-page .abo-fil__col > .elementor-widget-html.abo-fil__foot{
  align-self:stretch; text-align:right; margin-top:clamp(14px,2vh,24px);
}
body.gm-page .abo-fil__cta{
  display:inline-flex; align-items:center; gap:14px; color:#590B11; text-decoration:none;
  font-family:var(--sans); font-weight:400; font-size:clamp(.78rem,1.04vw,15px);
  letter-spacing:.2em; text-transform:uppercase;
}
body.gm-page .abo-fil__cta svg{
  width:24px; height:19px; flex:0 0 24px; fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:square; transition:transform .35s cubic-bezier(.16,1,.3,1);
}
body.gm-page .abo-fil__cta:hover svg{ transform:translateX(5px); }

/* --- 4. CIEMNA KARTA: zdanie odkrywane słowo po słowie (Figma, ekran 3) ---
   Wysokość = 190vh scrubu + `--climb` na wjazd manifestu; przez ostatnie `--climb`
   scena stoi przypięta, a sekcja niżej podjeżdża na nią. */
body.gm-page .abo-cyt{ position:relative; z-index:5; background:var(--ink); color:#fff;
  height:calc(190vh + var(--climb)); }
body.gm-page .abo-cyt__stage{ position:sticky; top:0; height:100vh; display:grid; place-items:center;
  padding:clamp(60px,10vh,120px) var(--abo-pad); background:var(--ink); }
body.gm-page .abo-cyt__inner{ max-width:min(1040px,92vw); text-align:center; }
body.gm-page .abo-cyt__text{ font-family:var(--serif); font-weight:400; margin:0; color:#fff;
  font-size:clamp(1.25rem,2.55vw,36px); line-height:1.38; letter-spacing:0; white-space:nowrap; }
body.gm-page .abo-cyt__text .w{ display:inline-block; margin-right:.26em; opacity:.12; }
body.gm-page .abo-cyt__text .w.eol{ margin-right:0; }
/* akcenty jak w reszcie serwisu, ale na ciemnym tle bordo nie czyta się → biel (Figma) */
body.gm-page .abo-cyt__text .w.em{ font-family:"Great Vibes",cursive; font-style:normal; color:#fff;
  font-size:1.4em; line-height:.7; margin-right:.2em; }
body.gm-page .abo-cyt__text .w.up{ text-transform:uppercase; }

/* --- 5. MANIFEST: podjeżdża na przypiętą ciemną kartę (Figma, ekran 4) ---
   Ciemny pas z dwiema kolumnami tekstu (lewa do 44%, prawa od 51% do 96%), pod nim
   zapętlone wideo na pełną szerokość. */
body.gm-page .abo-man{ position:sticky; top:0; z-index:6; margin-top:calc(-1 * var(--climb));
  background:#fff; color:var(--ink); }
body.gm-page .abo-man__head{ background:var(--ink); color:#fff;
  padding:clamp(48px,7.6vh,92px) var(--abo-pad); display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr); gap:clamp(26px,5.6vw,80px); align-items:center; }
body.gm-page .abo-man__l{ margin:0; font-family:var(--sans); font-weight:400;
  font-size:clamp(.95rem,1.35vw,19.5px); line-height:1.5; color:#fff; }
body.gm-page .abo-man__r{ margin:0; font-family:var(--sans); font-weight:300;
  font-size:var(--abo-body); line-height:1.6; color:rgba(255,255,255,.82); }
body.gm-page .abo-man__r b{ font-weight:600; color:#fff; }
body.gm-page .abo-man__figure{ position:relative; overflow:hidden; aspect-ratio:1218/497;
  background:rgba(22,21,30,.06); }
body.gm-page .abo-man__video{ width:100%; height:100%; object-fit:cover; display:block; }

/* --- 6. PROCES WSPÓŁPRACY: PIONOWA oś animowana scrollem (przebudowa 12.08) ---
   Wzorzec z referencji Seba (Aceternity „Timeline") przełożony na NASZ stack — WordPress +
   Elementor + zwykły JS, bez Reacta i Framer Motion. Zamiast zdjęć z oryginału stoi tu sam
   tekst etapu, a fiolet/błękit zastąpiony bordowym akcentem marki.
   Mechanika: tor biegnie pionowo po lewej, nagłówek etapu jest PRZYPIĘTY do góry ekranu,
   opis leży w prawej kolumnie, a pasek bordo rośnie z postępem scrolla i zapala kolejne kropki.
   Silnik: blok „PODSTRONA /o-nas" w js-pre.js (wysokość `.abo-prc__fill` + klasy `is-on`). */
body.gm-page .abo-prc{ position:relative; z-index:7; background:#fff; color:var(--ink);
  padding:clamp(56px,9vh,137px) var(--abo-pad) clamp(44px,6.4vh,80px); }
body.gm-page .abo-prc__head{ max-width:var(--abo-max); margin:0 auto; }
body.gm-page .abo-prc__kicker{ font-family:var(--serif); font-style:italic; text-transform:uppercase;
  letter-spacing:.12em; color:#590B11; font-size:clamp(.68rem,.9vw,13px); }
body.gm-page .abo-prc__h{ margin:clamp(6px,1vh,12px) 0 0; font-family:var(--sans); font-weight:400;
  text-transform:uppercase; letter-spacing:.055em; line-height:1.1; color:var(--ink);
  font-size:clamp(1.4rem,2.75vw,40px); }

/* Oś NIE idzie na całą szerokość strony (Seb 12.08): węższa miara + większy stopień pisma
   dają zwarty blok tekstu, wyższe wiersze i przez to dłuższą drogę dla przypiętych nagłówków —
   czyli mocniejszy efekt przewijania. Blok jest WYŚRODKOWANY i NIE dotyka krawędzi siatki
   (Seb 12.08) — dosunięcie do marginesu razem z napisami na 70 % szerokości wychodziło
   przesadnie, więc oś wraca do środka i jest węższa od kolumny treści. */
body.gm-page .abo-prc__rail{
  position:relative; max-width:1240px; margin:clamp(34px,6vh,72px) auto 0;
  --prc-num:clamp(96px,10.4vw,150px);  /* pole na numer PO LEWEJ od osi (numer jest tak duży jak nazwa) */
  --prc-ax:calc(var(--prc-num) + 18px); /* x osi względem lewej krawędzi kontenera */
  --prc-col:clamp(48px,6.2vw,100px);   /* odstęp od osi do kolumny nagłówka */
  --prc-dot:13px;
}
body.gm-page .abo-prc__step{
  /* Proporcje 70 / 30 (Seb 12.08): nazwa etapu dostaje 70 % szerokości i DOPASOWUJE SIĘ do niej
     (patrz `--nm-cur` niżej), opis stoi dosunięty do prawej na pozostałych 30 %. */
  position:relative; display:grid; grid-template-columns:minmax(0,70fr) minmax(0,30fr);
  gap:clamp(24px,3.4vw,56px);
  padding:clamp(72px,17vh,200px) 0 0 calc(var(--prc-ax) + var(--prc-col));
}
body.gm-page .abo-prc__step:first-child{ padding-top:clamp(20px,4vh,44px); }
body.gm-page .abo-prc__step:last-child{ padding-bottom:clamp(40px,9vh,110px); }
/* nagłówek etapu stoi, opis przejeżdża obok — dokładnie jak w referencji */
/* nazwa WYŚRODKOWANA w swojej kolumnie (Seb 12.08) — przy jednym stopniu pisma nazwy mają
   różną długość i przy dosunięciu do lewej blok robił się poszarpany. Numer etapu NIE jest
   już nad nazwą, tylko PO LEWEJ STRONIE OSI (patrz `.abo-prc__n` niżej). */
body.gm-page .abo-prc__side{
  position:sticky; top:calc(var(--gm-hd,86px) + clamp(24px,9vh,110px)); align-self:start;
  display:flex; flex-direction:column; gap:clamp(4px,.7vh,9px); text-align:center;
}
/* Kropka należy do PRZYPIĘTEGO nagłówka, nie do etapu — dzięki temu jedzie razem z nim
   i rosnąca linia dochodzi do niej dokładnie wtedy, kiedy user ją widzi.
   ⚠️ `top` podane wprost: Elementor daje kontenerom `::before{top:0}`, więc pseudoelement
   ustawiony samym `bottom` wyskakuje na górę bloku. */
body.gm-page .abo-prc__side::before{
  content:""; position:absolute; top:.34em; left:calc(-1 * var(--prc-col) - var(--prc-dot) / 2);
  width:var(--prc-dot); height:var(--prc-dot); border-radius:50%; box-sizing:border-box;
  background:#fff; border:1px solid rgba(22,21,30,.3);
  transition:background .45s ease,border-color .45s ease,transform .45s cubic-bezier(.34,1.4,.5,1) !important;
}
body.gm-page .abo-prc__step.is-on .abo-prc__side::before{
  background:#590B11; border-color:#590B11; transform:scale(1.15);
}
/* Numer etapu stoi PO LEWEJ STRONIE OSI, na wysokości kropki (Seb 12.08): `01.` | oś | nazwa | opis.
   Siedzi w `.abo-prc__side`, bo ta jest przypięta — numer ma jechać razem z kropką i nazwą.
   Wyliczenie `right`: prawa krawędź numeru ma wypaść 10 px na lewo od kropki, a `.abo-prc__side`
   zaczyna się o `--prc-col` na prawo od osi — stąd `100% + --prc-col + połowa kropki + 10px`. */
body.gm-page .abo-prc__n{ display:block; margin:0; font-family:var(--serif); font-style:italic;
  color:rgba(22,21,30,.38); letter-spacing:.06em; line-height:1; font-variant-numeric:lining-nums;
  /* numer ma TEN SAM stopień co nazwa etapu (Seb 12.08) — ta sama baza i ten sam mnożnik.
     `transform-origin:right top` — rośnie W LEWO, więc jego prawa krawędź zostaje przy osi. */
  font-size:clamp(1.35rem,2.7vw,38px); transition:color .45s ease,transform .55s cubic-bezier(.22,.61,.36,1) !important;
  position:absolute; top:.12em; text-align:right; white-space:nowrap;
  right:calc(100% + var(--prc-col) + var(--prc-dot) / 2 + 10px); }
body.gm-page .abo-prc__rail.js-on .abo-prc__n{ transform:scale(var(--nm-cur,1)); transform-origin:right top; }
body.gm-page .abo-prc__nm{ margin:0; font-family:var(--serif); font-weight:400;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.08; color:rgba(22,21,30,.4);
  font-size:clamp(1.35rem,2.7vw,38px); transition:color .45s ease !important; }
body.gm-page .abo-prc__step.is-on .abo-prc__n,
body.gm-page .abo-prc__step.is-on .abo-prc__nm{ color:#590B11; }
/* TRZY stany etapu (Seb 12.08): nadchodzący ledwie widoczny (żeby nie świeciła cała lista),
   miniony przygaszony, BIEŻĄCY pełny i powiększony. „Bieżący" = ostatni, do którego doszła oś.
   ⚠️ Wygaszanie idzie po `.abo-prc__n/__nm/__body`, NIE po `.abo-prc__side` — kropka jest jej
   pseudoelementem i zgasłaby razem z tekstem.
   ⚠️ Powiększenie robi `transform`, nie `font-size`: zmiana stopnia pisma przy scrollu
   przeliczałaby layout sześciu bloków na każdej klatce. */
body.gm-page .abo-prc__rail.js-on .abo-prc__n,
body.gm-page .abo-prc__rail.js-on .abo-prc__nm{ opacity:.13; transition:opacity .55s ease,color .45s ease,transform .55s cubic-bezier(.22,.61,.36,1) !important; }
body.gm-page .abo-prc__rail.js-on .abo-prc__step.is-on .abo-prc__n,
body.gm-page .abo-prc__rail.js-on .abo-prc__step.is-on .abo-prc__nm{ opacity:.38; }
body.gm-page .abo-prc__rail.js-on .abo-prc__step.is-cur .abo-prc__n,
body.gm-page .abo-prc__rail.js-on .abo-prc__step.is-cur .abo-prc__nm{ opacity:1; }
/* Nazwa bieżącego etapu DOPASOWUJE SIĘ do swojej kolumny — ma wypełnić całe 70 % szerokości
   (Seb 12.08). Mnożnik `--nm-cur` liczy js-pre.js osobno dla KAŻDEJ nazwy: szerokość kolumny
   podzielona przez naturalną szerokość napisu. Stąd stopnie pisma są RÓŻNE dla różnych etapów
   (krótka „WYCENA" ~230 px, długie „PRZYGOTOWANIE" ~105 px) — to zamierzony efekt „fit to width",
   nie rozjazd. `transform-origin:left top` — napis rośnie w prawo i w dół, więc numer `/0x.`
   nad nazwą zostaje na swoim miejscu. */
body.gm-page .abo-prc__rail.js-on .abo-prc__nm{ transform:scale(.52); transform-origin:center top; }
body.gm-page .abo-prc__rail.js-on .abo-prc__step.is-cur .abo-prc__nm{ transform:scale(var(--nm-cur,1)); }
/* kropka bieżącego etapu też ma być mocniejsza od minionych */
body.gm-page .abo-prc__rail.js-on .abo-prc__step.is-on .abo-prc__side::before{ opacity:.45; }
body.gm-page .abo-prc__rail.js-on .abo-prc__step.is-cur .abo-prc__side::before{ opacity:1; transform:scale(1.3); }
body.gm-page .abo-prc__body{ max-width:34em; }
body.gm-page .abo-prc__p{ margin:0; font-family:var(--sans); font-weight:300;
  font-size:clamp(1.05rem,1.39vw,20px); line-height:1.6; color:rgba(22,21,30,.82); text-wrap:pretty; }
/* Opis NIE jest gaszony do zera przed zapaleniem etapu: przy sześciu krótkich akapitach
   pół ekranu robiło się puste i wyglądało na błąd. Wyciszamy go tylko lekko, a pełny kontrast
   dostaje po zapaleniu. Gaszenie działa wyłącznie z klasą `js-on` (dokłada ją js-pre.js),
   więc przy wyłączonym JS tekst jest po prostu normalny. */
body.gm-page .abo-prc__rail.js-on .abo-prc__body{ opacity:.13;
  transition:opacity .55s ease !important; }
body.gm-page .abo-prc__rail.js-on .abo-prc__step.is-on .abo-prc__body{ opacity:.38; }
body.gm-page .abo-prc__rail.js-on .abo-prc__step.is-cur .abo-prc__body{ opacity:1; }

/* --- tor osi: stała kreska + rosnący pasek bordo --- */
/* `display:contents` na wrapperze widgetu: bez tego `position:absolute` liczyłoby się
   względem wrappera Elementora, a nie względem `.abo-prc__rail`. */
body.gm-page .abo-prc__rail > .elementor-widget-html{ display:contents; }
body.gm-page .abo-prc__line{
  position:absolute; top:0; bottom:0; left:calc(var(--prc-ax) - .5px); width:1px;
  background:rgba(22,21,30,.16); overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
}
body.gm-page .abo-prc__fill{
  position:absolute; left:0; top:0; width:100%; height:0; display:block;
  background:linear-gradient(to top,#7A2027 0,#590B11 12%,rgba(89,11,17,.32) 100%);
}

@media(max-width:900px){
  body.gm-page .abo-hero{ padding-top:clamp(88px,13vh,120px); }
  /* na telefonie wordmark ZAWIJA się w wielu wierszach — .87 z desktopu byłoby tu ciasne,
     zostaje .96 (margines pod `.l2` przelicza się sam z `--wm-lh`) */
  body.gm-page .abo-hero__wm{ --wm-lh:.96; font-size:clamp(2rem,10.4vw,3.4rem); white-space:normal; }
  /* zdanie przewodnie wyrównane DO PRAWEJ, pod wordmarkiem (Seb 12.08) */
  body.gm-page .abo-hero__note{ position:static; width:100%; right:auto;
    margin:clamp(14px,2.6vh,22px) 0 0; text-align:right; white-space:normal; }
  body.gm-page .abo-gz__grid{ gap:6px; }
  body.gm-page .abo-fil__lead{ max-width:none; }
  body.gm-page .abo-fil__body{ grid-template-columns:1fr; gap:clamp(24px,4vh,38px); }
  body.gm-page .abo-fil__figure{ margin-top:0; }
  /* zdanie płynie naturalnie: <br> z treści ukryte, zawijanie do szerokości kolumny */
  body.gm-page .abo-cyt__text{ white-space:normal; font-size:clamp(1.15rem,5vw,1.6rem); line-height:1.4; }
  body.gm-page .abo-cyt__text br{ display:none; }
  body.gm-page .abo-cyt__text .w.eol{ margin-right:.26em; }
  body.gm-page .abo-man__head{ grid-template-columns:1fr; gap:clamp(16px,3vh,24px); }
  body.gm-page .abo-man__figure{ aspect-ratio:4/3; }
  /* TELEFON: ta sama pionowa oś, tylko jedna kolumna — nagłówek etapu nad opisem,
     tor tuż przy lewej krawędzi. Przypięcie wyłączone: przy jednej kolumnie nie ma czego mijać.
     `position:relative` na `.abo-prc__side` jest KONIECZNE — kropka to jej pseudoelement,
     a bez pozycjonowanego rodzica liczyłby się względem całego etapu i wypadłby poza kadr. */
  body.gm-page .abo-prc__rail{ --prc-ax:2px; --prc-col:clamp(26px,7vw,38px); --prc-dot:11px; }
  body.gm-page .abo-prc__step{ grid-template-columns:1fr; gap:clamp(10px,2vh,16px);
    padding:clamp(44px,11vh,86px) 0 0 calc(var(--prc-ax) + var(--prc-col)); }
  body.gm-page .abo-prc__side{ position:relative; top:auto; }
  /* na telefonie po lewej od osi nie ma miejsca (oś stoi 2 px od krawędzi) — numer wraca NAD nazwę */
  body.gm-page .abo-prc__n{ position:static; right:auto; top:auto; text-align:center; }
  body.gm-page .abo-prc__rail.js-on .abo-prc__n{ transform:none; }
}

/* ===== 12. MENU: nagłówki kolumn są odnośnikami (Seb 11.08) =====
   W makiecie `.mcol__h` był `<button>` z `cursor:default` — na desktopie nie dało się wejść
   w „01. Nieruchomości", „02. Usługi" itd. Teraz to `<a>`, więc trzeba mu oddać wygląd linku. */
body.gm-page .mcol__h{ cursor:pointer; text-decoration:none; transition:color .25s; }
body.gm-page .mcol__h:hover{ color:var(--ink); }
body.gm-page .mcol__h:hover .mcol__n{ color:#590B11; }


/* ===== 13. PODSTRONA /o-nas — sekcje 7–9 (Figma, ekrany 6–8) ===================== */
body.gm-page .abo-why, body.gm-page .abo-ref, body.gm-page .abo-cta{
  --abo-pad:clamp(18px,3vw,44px); --abo-max:none;
  --abo-body:clamp(.95rem,1.11vw,16px); --abo-small:clamp(.85rem,.97vw,14px);
}

/* --- 7. „Te cztery rzeczy robimy inaczej": karty w ramkach, schodkami --- */
body.gm-page .abo-why{ position:relative; z-index:8; background:#fff; color:var(--ink);
  padding:clamp(56px,9vh,120px) var(--abo-pad) clamp(70px,12vh,160px); }
body.gm-page .abo-why__head{ max-width:var(--abo-max); margin:0 auto; }
body.gm-page .abo-why__kicker{ font-family:var(--serif); font-style:italic; text-transform:uppercase;
  letter-spacing:.12em; color:#590B11; font-size:clamp(.68rem,.9vw,13px); }
/* Oba człony JEDNYM krojem — Montserrat (Seb 12.08). Hierarchia zostaje na rozmiarze i wadze:
   pierwszy człon rozstrzelony i mniejszy, drugi duży i lekki. Cormorant zniknął stąd,
   bo w tej linii mieszał dwa kroje bez powodu. */
body.gm-page .abo-why__h{ margin:clamp(4px,.8vh,10px) 0 0; display:flex; align-items:baseline;
  flex-wrap:wrap; gap:clamp(8px,1.4vw,20px); line-height:1; }
/* JEDEN rozmiar dla obu członów i DOKŁADNIE taki jak nagłówek sekcji wyżej („Sześć etapów…"):
   nagłówki sekcji na całej podstronie trzymają wspólny stopień, nie własny per sekcja. */
body.gm-page .abo-why__h .s,
body.gm-page .abo-why__h .d{ font-family:var(--sans); font-weight:400; text-transform:uppercase;
  letter-spacing:.055em; font-size:clamp(1.4rem,2.75vw,40px); line-height:1.1; color:var(--ink); }
/* Jeden wiersz na desktopie (Seb 12.08) — bez `max-width`, żeby zdanie nie łamało się w połowie.
   Na telefonie łamie się normalnie (media ≤900). */
body.gm-page .abo-why__sub{ margin:clamp(14px,2.2vh,26px) 0 0; font-family:var(--sans); font-weight:400;
  font-size:var(--abo-body); line-height:1.6; color:rgba(22,21,30,.85);
  max-width:none; white-space:nowrap; }
/* schodki 1:1 z Figmy: karty opadają nierówno (0 / +98 / +27 / +168 px na 1440) */
body.gm-page .abo-why__row{ max-width:var(--abo-max); margin:clamp(54px,9.4vh,124px) auto 0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,26px);
  align-items:start; }
/* wejście kafli: fade + podjazd, kolejno 01→04 (klasę `on` dokłada IntersectionObserver).
   `!important` na transition, bo Elementor nakłada własne `transform .4s` na każdy kontener. */
body.gm-page .abo-why__card{ border:1px solid rgba(22,21,30,.85); background:#fff;
  padding:clamp(18px,2.4vw,34px) clamp(16px,2vw,28px) clamp(22px,3vh,38px);
  opacity:0; transform:translateY(30px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1) !important; }
body.gm-page .abo-why__card.on{ opacity:1; transform:none; }
body.gm-page .abo-why__row > *:nth-child(2){ margin-top:clamp(24px,6.8vw,98px); }
body.gm-page .abo-why__row > *:nth-child(3){ margin-top:clamp(8px,1.9vw,27px); }
body.gm-page .abo-why__row > *:nth-child(4){ margin-top:clamp(40px,11.7vw,168px); }
body.gm-page .abo-why__n{ font-family:var(--serif); font-size:clamp(1rem,1.4vw,20px); color:#590B11;
  display:block; }
body.gm-page .abo-why__t{ margin:clamp(4px,.8vh,10px) 0 0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.05rem,1.6vw,23px); line-height:1.22; color:#590B11; }
body.gm-page .abo-why__p{ margin:clamp(14px,2vh,24px) 0 0; font-family:var(--sans); font-weight:300;
  font-size:var(--abo-body); line-height:1.55; color:rgba(22,21,30,.85); }

/* --- 8. Opinie: karuzela ze strzałkami (Seb 12.08) ---
   Sekcja wyższa, opinie przesuwane poziomo, nawigacja pod cytatem. Wysokość okna karuzeli
   liczy JS z najwyższego slajdu, żeby przy zmianie opinii nic nie skakało. */
/* Pełny ekran (Seb 12.08): opinia ma dostać własny kadr, nie być pasem między sekcjami.
   `100svh` na telefonie, bo `100vh` liczy się tam z paskiem adresu i sekcja wystawałaby poza ekran. */
body.gm-page .abo-ref{ position:relative; z-index:8; background:#F5F5F5; color:var(--ink);
  min-height:100vh; min-height:100svh;
  padding:clamp(72px,12vh,140px) var(--abo-pad); text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
body.gm-page .abo-ref__h{ margin:0 auto; font-family:var(--sans); font-weight:400; text-transform:uppercase;
  letter-spacing:.1em; line-height:1.2; font-size:clamp(1.2rem,2.5vw,36px); color:var(--ink); }
body.gm-page .abo-ref__vp{ width:100%; max-width:min(680px,92vw); margin:clamp(28px,4.6vh,56px) auto 0;
  overflow:hidden; }
body.gm-page .abo-ref__track{ display:flex; flex-direction:row; flex-wrap:nowrap; align-items:flex-start;
  width:100%; gap:0; transform:translateX(0);
  transition:transform .6s cubic-bezier(.22,.61,.36,1) !important; }
body.gm-page .abo-ref__slide{ flex:0 0 100%; width:100%; max-width:100%; padding:0 clamp(6px,1.4vw,20px);
  opacity:.0; transition:opacity .45s ease !important; }
body.gm-page .abo-ref__slide.is-on{ opacity:1; }
body.gm-page .abo-ref__q{ margin:0 auto; max-width:100%;
  font-family:var(--sans); font-weight:300; font-size:var(--abo-body); line-height:1.72;
  color:rgba(22,21,30,.9); }
body.gm-page .abo-ref__by{ display:block; margin-top:clamp(14px,2.2vh,26px); font-family:var(--sans);
  font-style:italic; font-weight:300; font-size:var(--abo-small); color:rgba(22,21,30,.65); }
/* nawigacja: dwie strzałki w kółkach + licznik „1 / 4" */
body.gm-page .abo-ref__nav{ display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,1.8vw,24px); margin-top:clamp(30px,5vh,60px); }
/* BEZ kółek — cienki chevron, dokładnie jak strzałki karuzeli blogu na stronie głównej
   (`.blog__arrow`): brak ramki i tła, opacity .7 → 1 i drobne przesunięcie na najechanie. */
body.gm-page .abo-ref__ar{ border:none; background:none; border-radius:0; padding:6px;
  width:auto; height:auto; color:var(--ink); cursor:pointer; opacity:.7;
  display:inline-flex; align-items:center; justify-content:center;
  transition:opacity .3s ease,transform .3s ease; }
body.gm-page .abo-ref__ar svg{ width:clamp(20px,1.7vw,26px); height:clamp(20px,1.7vw,26px); display:block; }
body.gm-page .abo-ref__ar:hover{ opacity:1; background:none; }
body.gm-page .abo-ref__ar--prev:hover{ transform:translateX(-4px); }
body.gm-page .abo-ref__ar--next:hover{ transform:translateX(4px); }
body.gm-page .abo-ref__ar[disabled]{ opacity:.32; pointer-events:none; }
body.gm-page .abo-ref__count{ font-family:var(--sans); font-weight:300; letter-spacing:.14em;
  font-size:clamp(.68rem,.8vw,12px); color:rgba(22,21,30,.55); font-variant-numeric:tabular-nums; }
body.gm-page .abo-ref__count b{ font-weight:400; color:var(--ink); }
body.gm-page .abo-ref__count i{ font-style:normal; }
/* Nawigacja jest widoczna ZAWSZE, także przy jednej opinii (Seb 12.08) — przy pojedynczym
   slajdzie strzałki zostają w pełni widoczne i po prostu nie mają dokąd przesunąć. */
body.gm-page .abo-ref__nav.is-solo .abo-ref__ar[disabled]{ opacity:.7; }

/* --- 9. CTA: kadr tła + biały nagłówek i dwa przyciski w ramkach --- */
/* PARALLAKS jak na stronie głównej: tło stoi w miejscu, strona jedzie po nim.
   Desktop = natywne `background-attachment:fixed` (kompozytowane przez GPU, zero JS na klatkę);
   adres obrazka wstrzykuje JS z widgetu obrazu (`--abo-cta-img`), więc kadr dalej podmienia się
   w Elementorze. Mobile = osobna warstwa `position:fixed` włączana klasą `.bg-on`,
   bo `background-attachment:fixed` jest na iOS zepsute. */
/* z-index 7 MUSI zostać: manifest (`.abo-man`) jest sticky z z-index 6 i przy niższej wartości
   przebijał przez CTA (prześwitujące wideo). Mobilną warstwę tła CTA trzymają pod sobą sekcje
   „Dlaczego my" i opinie, które dostały z-index 8 — nie odwrotnie. */
body.gm-page .abo-cta{ position:relative; z-index:7; min-height:clamp(420px,62vh,620px);
  display:grid; place-items:center; overflow:hidden; background:var(--ink);
  background-image:var(--abo-cta-img,none); background-position:center center;
  background-size:cover; background-repeat:no-repeat; background-attachment:fixed; }
body.gm-page .abo-cta__bg{ display:none; }
body.gm-page .abo-cta__bg > .elementor-widget-image{ display:contents; }
body.gm-page .abo-cta__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
/* przyciemnienie kadru — biały tekst na zdjęciu musi mieć kontrast niezależnie od pory dnia */
body.gm-page .abo-cta::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(12,11,16,.42),rgba(12,11,16,.58)); }
@media(max-width:900px){
  body.gm-page .abo-cta{ background-image:none; }
  body.gm-page .abo-cta.bg-on .abo-cta__bg{ display:block; position:fixed; left:0; top:0;
    width:100%; height:100vh; z-index:0; pointer-events:none; }
  /* Stopka MUSI być nad tą warstwą: warstwa jest `fixed` i rysuje się w kontekście CTA
     (z-index 7), więc przy stopce z z-index 6 przykrywała ją w całości zdjęciem. */
  body.gm-page .ft{ z-index:9; }
}
body.gm-page .abo-cta__in{ position:relative; z-index:2; text-align:center; padding:var(--abo-pad); }
body.gm-page .abo-cta__h{ margin:0; font-family:var(--sans); font-weight:300; text-transform:uppercase;
  letter-spacing:.12em; line-height:1.5; font-size:clamp(1.05rem,2.15vw,31px); color:#fff; }
body.gm-page .abo-cta__btns{ margin-top:clamp(22px,3.6vh,42px); display:flex; flex-direction:column;
  align-items:center; gap:clamp(10px,1.4vh,16px); }
body.gm-page .abo-cta__btn{ display:inline-flex; align-items:center; justify-content:center;
  min-width:min(320px,80vw); padding:clamp(10px,1.5vh,15px) clamp(20px,2.4vw,34px);
  border:1px solid rgba(255,255,255,.75); color:#fff; text-decoration:none;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em; font-weight:400;
  font-size:clamp(.62rem,.76vw,11px); transition:background .3s,color .3s,border-color .3s; }
body.gm-page .abo-cta__btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }

@media(max-width:900px){
  /* TELEFON — karty jadą POZIOMO (szkic Seba 12.08): widać pierwszą w całości i zapowiedź
     drugiej, przewijanie palcem ze snapem. Rząd wychodzi poza marginesy sekcji, żeby karta
     „wjeżdżała" od krawędzi ekranu, ale pierwsza startuje równo z tekstem nad nią. */
  body.gm-page .abo-why__row{ display:flex !important; flex-direction:row !important;
    flex-wrap:nowrap !important; grid-template-columns:none !important; align-items:stretch;
    gap:clamp(12px,3.4vw,18px); overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-bottom:6px; scrollbar-width:none; }
  body.gm-page .abo-why__row::-webkit-scrollbar{ display:none; }
  body.gm-page .abo-why__card:nth-child(n){ flex:0 0 82% !important; width:82% !important;
    margin-top:0 !important; scroll-snap-align:start;
    padding:clamp(20px,5.4vw,26px) clamp(20px,5.6vw,26px) clamp(24px,6.4vw,30px); }
  body.gm-page .abo-why__row > *:nth-child(2),
  body.gm-page .abo-why__row > *:nth-child(3),
  body.gm-page .abo-why__row > *:nth-child(4){ margin-top:0; }
  body.gm-page .abo-why__h{ gap:6px; }
  body.gm-page .abo-cta__h{ letter-spacing:.08em; line-height:1.45; }
}

/* ===== TELEFON — typografia i rytm pionowy wg makiet Figmy (Seb 12.08) =====
   Clampy z §11/§13 są liczone pod desktop (`vw` × mała liczba), więc na 390 px schodziły
   do dolnej granicy i tekst robił się mikroskopijny: opis karty 12,5 px, nagłówek sekcji 22 px.
   Tutaj rozmiary są podane wprost dla telefonu, skalowane z ekranów Figmy:
   nagłówek sekcji ~29 px, tytuł etapu ~23 px, opisy ~16 px. */
@media(max-width:900px){
  /* na telefonie ten SAM stopień tekstu co na desktopie (16 px), tylko nagłówki mniejsze */
  body.gm-page .abo-hero, body.gm-page .abo-fil, body.gm-page .abo-man, body.gm-page .abo-prc,
  body.gm-page .abo-why, body.gm-page .abo-ref, body.gm-page .abo-cta{
    --abo-body:16px; --abo-small:14px; }
  /* nagłówki sekcji — jeden stopień na całej podstronie, tak jak na desktopie */
  body.gm-page .abo-prc__h,
  body.gm-page .abo-why__h .s,
  body.gm-page .abo-why__h .d{ font-size:clamp(1.55rem,7.4vw,2.05rem); line-height:1.2;
    text-wrap:balance; }
  body.gm-page .abo-prc__kicker,
  body.gm-page .abo-why__kicker{ font-size:clamp(.78rem,3.4vw,.9rem); }
  /* proces */
  body.gm-page .abo-prc__nm{ font-size:clamp(1.45rem,6.6vw,1.85rem); }
  /* bez `color` — numer ma pozostać wygaszony, dopóki oś do niego nie dojdzie (`.is-on`) */
  body.gm-page .abo-prc__n{ font-size:clamp(1.2rem,5.6vw,1.5rem);
    font-variant-numeric:lining-nums; }
  body.gm-page .abo-prc__p{ font-size:clamp(1rem,4.4vw,1.1rem); line-height:1.55; }
  /* dlaczego my */
  body.gm-page .abo-why__sub{ font-size:var(--abo-body); line-height:1.55;
    white-space:normal; }
  body.gm-page .abo-why__n{ font-size:clamp(1.05rem,4.6vw,1.2rem); font-variant-numeric:lining-nums; }
  body.gm-page .abo-why__t{ font-size:clamp(1.3rem,6vw,1.6rem); line-height:1.2; }
  body.gm-page .abo-why__p{ font-size:var(--abo-body); line-height:1.55; }
  /* opinie i CTA — ta sama miara czytelności */
  body.gm-page .abo-ref__h{ font-size:clamp(1.35rem,6.2vw,1.7rem); }
  body.gm-page .abo-ref__q{ font-size:var(--abo-body); line-height:1.65; }
  body.gm-page .abo-ref__by{ font-size:var(--abo-small); }
  body.gm-page .abo-cta__h{ font-size:clamp(1.05rem,4.6vw,1.3rem); }
  body.gm-page .abo-fil__lead{ font-size:clamp(1.05rem,4.6vw,1.2rem); }
  body.gm-page .abo-man__l{ font-size:clamp(1.05rem,4.6vw,1.25rem); }
  body.gm-page .abo-man__r{ font-size:var(--abo-body); }

  /* RYTM PIONOWY: odstępy między etapami i między sekcjami były liczone w `vh`, przez co na
     telefonie robiły się pustymi ekranami. Skracamy odstęp etapów i styk proces↔„Dlaczego my". */
  body.gm-page .abo-prc{ padding-top:clamp(44px,11vw,60px); padding-bottom:clamp(34px,8.5vw,46px); }
  /* pod kartami odstęp musi być WIĘKSZY niż nad nimi: zaraz pod sekcją zaczyna się szare tło
     opinii, więc przy równych paddingach karty optycznie kleją się do tego pasa (Seb 12.08) */
  body.gm-page .abo-why{ padding-top:clamp(36px,9vw,48px); padding-bottom:clamp(66px,17vw,86px); }
  body.gm-page .abo-prc__rail{ margin-top:clamp(26px,6.6vw,36px); }
  body.gm-page .abo-why__row{ margin-top:clamp(22px,5.6vw,30px); }
  body.gm-page .abo-ref{ padding-top:clamp(48px,12vw,64px); padding-bottom:clamp(48px,12vw,64px); }
}


/* ===== 14. PODSTRONA /uslugi/sprzedaz-nieruchomosci ===============================
   HERO (przebudowa 14.08 wg nowej makiety): nagłówek + lead bordo, pod nimi dwa akapity
   w PRAWEJ kolumnie, a pod nimi kadr na pełną szerokość okna.
   Niżej sekcja 2 („zdjęcie ↔ opis" z przypiętą kolumną) — czeka na własną makietę.
   ================================================================================== */
body.gm-page .usl-int{
  /* ta sama siatka co nagłówek, strona główna i /o-nas — logo i treść na jednej linii */
  --usl-pad:clamp(18px,3vw,44px);
  --usl-body:clamp(1rem,1.25vw,18px);
  /* odstęp przypiętego opisu od paska menu; `--gm-hd` (realna wysokość nagłówka) odświeża JS
     przy scrollu, bo pasek kurczy się 116 → 68 px */
  --usl-stick:calc(var(--gm-hd,86px) + clamp(24px,5vh,56px));
  position:relative; background:#fff; color:var(--ink);
  padding:clamp(122px,17vh,192px) var(--usl-pad) clamp(22px,4vh,37px);
}
body.gm-page .usl-int--next{ padding-top:clamp(46px,8vh,96px); padding-bottom:clamp(60px,9vh,110px); }
body.gm-page .usl-int__head{ display:block; }
/* ⬇ Stopnie pisma i światła zdjęte POMIAREM PIKSELOWYM z makiety (Seb 14.08: „ma być identycznie").
   Zrzut 2000 px = ramka 1440 (siatka makiety 1296 px → skala 1,3889 potwierdzona), a wartości
   przeliczone na NASZĄ szerokość treści 1353,6 px (mnożnik 1,0444 — siatka jak w nagłówku).
   Zmierzone: H1 cap 41 px → font 44 px, lead x-height 22 px → 32 px, akapit x-height 12 px → 17 px.
   Grubość kresek: H1 i akapit ~0,06 em (Light 300), lead ~0,09 em (Regular 400).
   Interlinia leadu i akapitu = 1,19 (w makiecie wiersze stoją ciasno — to nie pomyłka pomiaru,
   odstępy topów wierszy dały 51,5 px i 28 px przy tych stopniach).
   Kolory: Figma ma tekst #000 i bordo #580D11 — zostajemy przy tokenach strony (--ink, #590B11),
   bordo z makiety i tak różni się o niecały punkt (Seb: „bordowy jak akcenty strony"). */
body.gm-page .usl__h1{
  font-family:var(--sans); font-weight:300; text-transform:uppercase;
  font-size:clamp(1.4rem,3.06vw,44px); letter-spacing:.06em; line-height:1.16;
  color:var(--ink); margin:0;
}
body.gm-page .usl-int__lead{
  margin:clamp(13px,1.9vh,21px) 0 0;
  font-family:var(--sans); font-weight:400; line-height:1.19;
  font-size:clamp(1.2rem,2.22vw,32px); letter-spacing:0;
}
/* ⚠️ Kolor leadu MUSI iść tą samą ścieżką selektora co reguła z góry pliku
   (`body.gm-page .elementor-widget-text-editor p{color:inherit}` — specyficzność 0,2,2).
   Zwykłe `.usl-int__lead{color:…}` (0,2,1) przegrywa i bordo cicho staje się --ink. */
body.gm-page .elementor-widget-text-editor p.usl-int__lead{ color:#590B11; }

/* --- akapity w prawej kolumnie ---
   Makieta: tekst zaczyna się na 47 % szerokości treści i biegnie do prawej krawędzi siatki
   (zmierzone: start 946 px, prawa krawędź 1901 px przy siatce 99–1901). */
body.gm-page .usl-int__cols{
  display:grid; grid-template-columns:47fr 53fr; margin-top:clamp(13px,1.8vh,20px);
}
body.gm-page .usl-int__col{
  grid-column:2; display:flex; flex-direction:column; gap:clamp(14px,1.8vh,20px);
}
body.gm-page .usl-int__col .usl-p{
  font-size:clamp(.9rem,1.18vw,17px); font-weight:300; line-height:1.19; letter-spacing:0;
}

/* --- kadr na pełną szerokość okna ---
   W makiecie tło kadru idzie od krawędzi do krawędzi, więc sekcja NIE ma padding-inline.
   Proporcja z ramki Figmy: kadr startuje na 455 px i sięga dołu ramki 1024 → 1440 × 569. */
/* Pas trzyma proporcję Z MAKIETY (1440 × 569), a materiał wypełnia go `cover` — wideo jest
   16:9, więc przycinamy mu górę i dół zamiast zmieniać wysokość pasa.
   ⚠️ Wrapper widgetu musi zniknąć z layoutu (`display:contents`), inaczej to ON jest elementem
   układu i proporcja nałożona na <video> nie ma czego wypełnić. */
body.gm-page .usl-shot{ display:block; background:#fff; }
body.gm-page .usl-shot > .elementor-widget-html{ display:contents; }
body.gm-page .usl-shot .usl-shot__img img,
body.gm-page .usl-shot__video{
  display:block; width:100%; aspect-ratio:1440 / 569; object-fit:cover;
}

/* --- SEKCJA 2: biała karta NACHODZĄCA na pas wideo (makieta Seba 14.08) ---
   Pas hero zostaje przyklejony u góry, a karta wjeżdża na niego przy scrollu — ten sam chwyt
   co karta „Nasza filozofia" nachodząca na kolaż na /o-nas, tylko bez ujemnych marginesów:
   `sticky` na pasie wystarcza, bo karta ma własne, nieprzezroczyste tło i wyższy z-index. */
body.gm-page .usl-shot{ position:sticky; top:0; z-index:1; }
/* Karta ma DOKŁADNIE jeden ekran (Seb 18.08: „żeby cała ta sekcja była 100vh") i sama jest
   `sticky` — dzięki temu następna sekcja („Co zyskujesz") wjeżdża NA NIĄ jak karta, tak samo
   jak ta karta wjeżdża na pas wideo. `height`, nie `min-height`: przy min-height sekcja rosłaby
   z treścią i przestawała być jednym ekranem.
   ⚠️ Padding musi zostawić zapas na treść — przy stałej wysokości nadmiar jest PRZYCINANY
   (`overflow:hidden` poniżej). Na 900 px wysokości: 2×~81 px padding + ~330 px treści. */
body.gm-page .usl-crd{
  position:sticky; top:0; z-index:2; background:#fff; color:var(--ink);
  height:100svh; display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(48px,9vh,110px) clamp(18px,3vw,44px);
  /* napisy wyjeżdżają poza siatkę — bez tego robi się poziomy pasek przewijania */
  overflow:hidden;
}
/* --- dwa napisy jadące w przeciwne strony (silnik: blok „/uslugi" w js-pre.js) ---
   ⚠️ Elementor nakłada na KAŻDY widget `transition: … transform .4s` — bez wyzerowania napis
   dojeżdża do pozycji z opóźnieniem i „pływa" zamiast trzymać się scrolla. */
body.gm-page .usl-crd__mark{
  font-family:var(--serif); font-weight:400; text-transform:uppercase; color:#590B11;
  /* Stopień z makiety (cap 28 px na zrzucie → 21 px u nas; Cormorant ma cap 0,625 em).
     Tracking .06em: przy .12em napis był o 20 % dłuższy niż na makiecie (432 vs 339 px). */
  font-size:clamp(1.15rem,2.22vw,32px); letter-spacing:.06em; line-height:1.1;
  white-space:nowrap; margin:0; transition:none !important; will-change:transform;
}
body.gm-page .usl-crd__mark--r{ text-align:right; }
body.gm-page .usl-crd__in{
  /* 1030 px to szerokość bloku z makiety, ale przy naszych `&nbsp;` najdłuższy wiersz
     („…publikujemy ofertę na portalach z płatną promocją") wychodzi 1075 px i łamał się
     na dwa — stąd 1120 px zapasu, żeby łamanie było TAM, GDZIE STOI <br>. */
  align-self:center; width:100%; max-width:1120px; text-align:center;
  padding:clamp(28px,5vh,56px) 0;
}
body.gm-page .usl-crd__p{
  margin:0; font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(1rem,1.53vw,22px); line-height:1.19; letter-spacing:0;
}
body.gm-page .usl-crd__in > .elementor-widget-text-editor + .elementor-widget-text-editor .usl-crd__p{
  margin-top:clamp(18px,2.4vh,31px);
}
/* odnośnik: wersaliki, tracking z makiety, kolor tekstu (NIE bordo — zmierzone na makiecie) */
body.gm-page .usl-crd__cta{
  display:inline-flex; align-items:center; gap:14px; margin-top:clamp(24px,3.6vh,43px);
  color:var(--ink); text-decoration:none; font-family:var(--sans); font-weight:400;
  font-size:clamp(.8rem,1.18vw,17px); letter-spacing:.16em; text-transform:uppercase;
}
body.gm-page .usl-crd__cta .usl-lnk__ar{
  width:24px; height:19px; flex:0 0 24px; fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:square; transition:transform .35s cubic-bezier(.16,1,.3,1);
}
body.gm-page .usl-crd__cta:hover{ color:#590B11; }
body.gm-page .usl-crd__cta:hover .usl-lnk__ar{ transform:translateX(5px); }

@media(max-width:640px){
  /* na telefonie karta wraca do wysokości treści i przestaje być przypięta — przy jednym
     ekranie 390×844 stała wysokość ucinałaby akapity */
  body.gm-page .usl-crd{
    position:relative; height:auto; min-height:auto; gap:clamp(40px,8vh,70px);
    padding:clamp(60px,11vh,90px) clamp(18px,3vw,44px);
  }
  body.gm-page .usl-crd__mark{ font-size:19px; letter-spacing:.1em; white-space:normal; }
  body.gm-page .usl-crd__p{ font-size:16px; line-height:1.45; }
  /* łamanie z makiety jest desktopowe — na telefonie <br> robiłby wiersze po trzy słowa */
  body.gm-page .usl-crd__p br{ display:none; }
  body.gm-page .usl-crd__cta{ font-size:.78rem; letter-spacing:.12em; }
}

/* --- SEKCJA 3: cztery kafle przełączane strzałkami (makieta Seba 14.08) ---
   Proporcje zdjęte pomiarem ze zrzutu (2000 px = ramka 1440, siatka makiety 1296):
   kadr 992×991 px (czyli 1:1) zaczyna się 4,4 % od lewej krawędzi treści i zajmuje 55 % jej
   szerokości; biała karta 737 px szerokości stoi od 47,6 % do 88,4 %, czyli NACHODZI na kadr
   o 11,8 % szerokości treści. W pionie karta zaczyna się na 17 % wysokości kadru. */
/* Tło sekcji SZARE (Seb 14.08: „zeby byla roznica") — zmierzone na makiecie #F5F5F5;
   karta zostaje biała i dzięki temu odcina się od tła. */
body.gm-page .usl-cz{
  position:relative; z-index:3; background:#f5f5f5; color:var(--ink);
  padding:clamp(70px,12vh,140px) clamp(18px,3vw,44px) clamp(80px,13vh,150px);
}
/* Proporcje układu w JEDNYM miejscu — Seb iteruje na wielkości kadru, więc lepiej mieć
   cztery liczby niż rozsypane wartości. Makieta miała kadr 55 % i grupę od 4,4 % do 88,4 %;
   po „zmniejsz ten kwadracik" (Seb 14.08) cała grupa zjechała o ~18 % i jest wyśrodkowana. */
body.gm-page .usl-cz__row{
  position:relative;
  --cz-fig:45%;      /* szerokość kadru (był 55 %) */
  --cz-card:33.5%;   /* szerokość karty */
  --cz-over:9.7%;    /* o ile karta nachodzi na kadr */
  --cz-left:15.6%;   /* odsunięcie kadru od lewej krawędzi treści */
}
body.gm-page .usl-cz__figs{
  position:relative; width:var(--cz-fig); margin-left:var(--cz-left); aspect-ratio:1/1;
  background:rgba(22,21,30,.06);
}
body.gm-page .usl-cz__fig{ position:absolute; inset:0; }
body.gm-page .usl-cz__fig > .elementor-widget-image{ display:contents; }
body.gm-page .usl-cz__fig img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ⚠️ Karta jest `position:absolute` WZGLĘDEM SCENY, a nie elementem siatki — inaczej nie da się
   jej nasunąć na kadr. Wrapper kontenera Elementora sam z siebie jest `position:relative`,
   więc punktem odniesienia musi być `.usl-cz__row`. */
body.gm-page .usl-cz__card{
  position:absolute; left:calc(var(--cz-left) + var(--cz-fig) - var(--cz-over));
  width:var(--cz-card); right:auto; top:17%;
  background:#fff; display:flex; flex-direction:column;
  padding:clamp(26px,3.6vw,52px) clamp(24px,3.3vw,48px) clamp(20px,2.6vw,38px);
  min-height:78%;
}
/* Slajdy też jeden na drugim: karta ma trzymać wysokość NAJDŁUŻSZEGO tekstu i nie skakać
   przy przełączaniu. Wysokość bierze slajd aktywny, reszta jest wyjęta z układu. */
body.gm-page .usl-cz__slides{ position:relative; flex:1 1 auto; }
body.gm-page .usl-cz__slide{
  position:absolute; inset:0 0 auto 0; opacity:0; visibility:hidden;
  transition:opacity .45s ease; display:flex; flex-direction:column;
}
body.gm-page .usl-cz__slide.is-on{ position:relative; opacity:1; visibility:visible; }
/* nagłówek kafla — bordo, jak na makiecie */
body.gm-page .usl-cz__kicker{
  display:block; font-family:var(--serif); text-transform:uppercase; color:#590B11;
  /* Po zmniejszeniu kadru karta ma 453 px zamiast 552 i kicker (17 px) łamał się na dwa
     wiersze — na makiecie stoi w jednym. Stąd 14,5 px i `white-space:nowrap` jako blokada. */
  font-size:clamp(.72rem,1vw,14.5px); letter-spacing:.02em; line-height:1.2; white-space:nowrap;
}
body.gm-page .usl-cz__h{
  margin:clamp(14px,1.9vh,22px) 0 0; font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(1.3rem,2.36vw,34px); line-height:1.19; letter-spacing:.02em;
}
body.gm-page .usl-cz__p{
  margin:clamp(18px,2.6vh,32px) 0 0; font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(.9rem,1.18vw,17px); line-height:1.45; letter-spacing:0;
}
body.gm-page .usl-cz__p b{ font-weight:600; }
/* licznik + strzałki na dole karty */
body.gm-page .usl-cz__card > .elementor-widget-html.usl-cz__foot{ margin-top:clamp(26px,4vh,48px); }
body.gm-page .usl-cz__nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
body.gm-page .usl-cz__count{
  font-family:var(--sans); font-weight:300; font-size:clamp(.85rem,1.25vw,18px);
  color:rgba(22,21,30,.55); letter-spacing:.04em;
}
body.gm-page .usl-cz__count b{ font-weight:400; color:var(--ink); }
body.gm-page .usl-cz__arrows{ display:flex; gap:clamp(10px,1.4vw,20px); }
body.gm-page .usl-cz__arr{
  appearance:none; background:none; border:0; padding:0; cursor:pointer; line-height:0;
  color:var(--ink); transition:color .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
body.gm-page .usl-cz__arr svg{
  width:clamp(20px,1.7vw,26px); height:clamp(20px,1.7vw,26px);
  fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:square; stroke-linejoin:miter;
}
body.gm-page .usl-cz__arr:hover{ color:#590B11; }
body.gm-page .usl-cz__arr--prev:hover{ transform:translateX(-4px); }
body.gm-page .usl-cz__arr--next:hover{ transform:translateX(4px); }
body.gm-page .usl-cz__arr[disabled]{ opacity:.28; cursor:default; transform:none; }

@media(max-width:900px){
  /* telefon: kadr na pełną szerokość, karta POD nim (nachodzenie na 390 px zjadałoby tekst) */
  body.gm-page .usl-cz__figs{ width:100%; margin-left:0; }
  body.gm-page .usl-cz__card{
    position:relative; left:auto; right:auto; top:auto; min-height:0;
    width:92%; margin:-14% 0 0 auto; padding:clamp(22px,6vw,32px);
  }
  body.gm-page .usl-cz__row{ --cz-left:0%; }
  body.gm-page .usl-cz__h{ font-size:22px; }
  body.gm-page .usl-cz__p{ font-size:15px; line-height:1.55; }
  body.gm-page .usl-cz__h br{ display:none; }
  /* na telefonie kicker MUSI móc się złamać — 390 px nie pomieści go w jednym wierszu */
  body.gm-page .usl-cz__kicker{ white-space:normal; font-size:12.5px; }
}

/* --- SEKCJA 4: proces współpracy (ta sama oś co /o-nas) ---
   Wygląd osi ciągnie w całości z §11/§13 (klasy `abo-prc*`) — tu tylko to, czego wersja
   z /o-nas nie ma: akapit pod nagłówkiem i bordowe zakończenie pod osią.
   ⚠️ Zmienne `--abo-*` są ustawione na sekcjach /o-nas, więc na tej podstronie trzeba je
   podać jeszcze raz, inaczej stopnie pisma osi zjeżdżają do wartości domyślnych. */
/* ⚠️ `position:relative` + z-index KONIECZNE dla każdej sekcji pod pasem wideo: pas jest
   `sticky` i klei się do końca strony (wspólny rodzic wszystkich sekcji), więc bez własnej
   warstwy sekcje z tłem przepuszczają go na wierzch — wideo dosłownie przykrywało akordeon. */
body.gm-page .usl-prc{
  position:relative; z-index:4;
  --abo-pad:clamp(18px,3vw,44px);
  --abo-max:none;
  --abo-body:clamp(.95rem,1.11vw,16px);
  --abo-small:clamp(.85rem,.97vw,14px);
  background:#fff;
}
body.gm-page .usl-prc__lead{
  margin:clamp(16px,2.2vh,26px) 0 0; max-width:1180px;
  font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(.9rem,1.18vw,17px); line-height:1.45; letter-spacing:0;
}
/* Zakończenie: bordo, wcięte od lewej jak na makiecie (start na 25 % szerokości treści),
   stopień z pomiaru — interlinia 52 px na zrzucie → 39 px u nas, czyli ~30 px pisma. */
body.gm-page .usl-prc__out{
  margin:clamp(46px,8vh,96px) 0 0 25%;
  font-family:var(--sans); font-weight:400; color:#590B11;
  font-size:clamp(1.1rem,2.08vw,30px); line-height:1.3; letter-spacing:0;
}
body.gm-page .elementor-widget-text-editor p.usl-prc__out{ color:#590B11; }

@media(max-width:900px){
  body.gm-page .usl-prc__lead{ font-size:15px; line-height:1.55; }
  /* wcięcie 25 % na telefonie zostawiłoby tekstowi trzy słowa w wierszu */
  body.gm-page .usl-prc__out{ margin-left:0; font-size:19px; line-height:1.4; }
}

/* --- SEKCJA 5: bezpieczeństwo transakcji — akordeon rozwijany najechaniem (Seb 14.08) ---
   Proporcje z makiety (2000 px = ramka 1440): opis po lewej do ~40 %, akordeon od 42,4 %
   szerokości treści; tytuły wcięte o 100 px względem kresek, wiersz zamknięty ~96 px wysoki. */
body.gm-page .usl-bz{
  position:relative; z-index:5; background:#fff; color:var(--ink);
  padding:clamp(80px,13vh,150px) clamp(18px,3vw,44px) clamp(90px,14vh,160px);
  display:grid; grid-template-columns:42.4% 57.6%; align-items:start; column-gap:0;
}
body.gm-page .usl-bz__kicker{
  display:block; font-family:var(--serif); font-style:italic; text-transform:uppercase;
  letter-spacing:.12em; color:#590B11; font-size:clamp(.68rem,.9vw,13px);
}
body.gm-page .usl-bz__h{
  margin:clamp(10px,1.6vh,18px) 0 0; font-family:var(--sans); font-weight:300;
  text-transform:uppercase; color:var(--ink);
  font-size:clamp(1.4rem,2.75vw,40px); line-height:1.25; letter-spacing:.06em;
}
body.gm-page .usl-bz__lead{
  margin:clamp(18px,2.6vh,30px) 0 0; max-width:30ch;
  font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(.9rem,1.18vw,17px); line-height:1.45;
}
/* przycisk w ramce — z makiety 409×41 px przy 1440 */
body.gm-page .usl-bz__btn{
  display:inline-block; margin-top:clamp(22px,3.4vh,40px);
  padding:clamp(11px,1.5vh,15px) clamp(18px,2.2vw,30px);
  border:1px solid rgba(22,21,30,.55); color:var(--ink); text-decoration:none;
  font-family:var(--sans); font-weight:400; font-size:clamp(.68rem,.84vw,12px);
  letter-spacing:.2em; text-transform:uppercase; line-height:1;
  transition:background .35s, color .35s, border-color .35s;
}
body.gm-page .usl-bz__btn:hover{ background:#590B11; border-color:#590B11; color:var(--cream); }

/* --- akordeon --- */
body.gm-page .usl-bz__acc{ display:block; border-top:1px solid rgba(22,21,30,.16); }
body.gm-page .usl-bz__item{ display:block; border-bottom:1px solid rgba(22,21,30,.16); cursor:pointer; }
body.gm-page .usl-bz__t{
  margin:0; padding:clamp(20px,3.2vh,34px) 0 clamp(20px,3.2vh,34px) clamp(30px,6.9vw,100px);
  font-family:var(--serif); font-weight:400; text-transform:uppercase; color:#590B11;
  font-size:clamp(1.05rem,2.08vw,30px); line-height:1.15; letter-spacing:.01em;
  transition:color .35s;
}
/* ⚠️ Cormorant ma cyfry MEDIEWALNE — bez `lining-nums` „/01." jest o połowę niższe od liter
   i wygląda jak literówka (ta sama pułapka co przy numerach etapów na osi). */
body.gm-page .usl-bz__n{ font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
body.gm-page .usl-bz__item:hover .usl-bz__t,
body.gm-page .usl-bz__item.is-open .usl-bz__t{ color:#3d070c; }
/* Panel: wysokość ustawia JS (scrollHeight), więc animacja działa też w Safari, gdzie
   `grid-template-rows: 0fr→1fr` bywa nierówne. `overflow:hidden` trzyma treść w środku. */
body.gm-page .usl-bz__panel{
  display:block; overflow:hidden; height:0;
  transition:height .45s cubic-bezier(.16,1,.3,1), opacity .35s ease;
  opacity:0;
}
body.gm-page .usl-bz__item.is-open .usl-bz__panel{ opacity:1; }
body.gm-page .usl-bz__p{
  margin:0; padding:0 clamp(20px,4vw,60px) clamp(22px,3.4vh,36px) clamp(46px,10.4vw,150px);
  font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(.88rem,1.11vw,16px); line-height:1.55;
}
/* Bez JS (albo przy `prefers-reduced-motion`) akordeon ma być CZYTELNY, a nie zamknięty
   na amen — panele otwierają się dopiero, gdy skrypt doda klasę na sekcji. */
body.gm-page .usl-bz:not(.js-on) .usl-bz__panel{ height:auto; opacity:1; }

@media(max-width:900px){
  body.gm-page .usl-bz{ grid-template-columns:1fr; row-gap:clamp(32px,6vh,56px); }
  body.gm-page .usl-bz__lead{ max-width:none; }
  body.gm-page .usl-bz__t{ font-size:19px; padding-left:0; }
  body.gm-page .usl-bz__p{ padding-left:0; padding-right:0; font-size:15px; }
}

/* --- SEKCJA 6: off-market — pełnoekranowy kadr z wyśrodkowaną treścią (makieta Seba 18.08) ---
   Stopnie i światła zdjęte POMIAREM PIKSELOWYM ze zrzutu (2000 px = ramka 1440 → ×0,72,
   nasza siatka ×1,0444, czyli łącznie ×0,752):
   H2 cap 39 px → 29,3 u nas → font 40 px (ten sam stopień co nagłówki pozostałych sekcji),
   tracking ~.11em (wiersz „PUBLICZNEGO OGŁOSZENIA" = 699 px), interlinia 69 px → 1,30;
   akapit: odstęp wierszy 29 px → 21,8 u nas przy foncie 17 px, czyli lh 1,28;
   przycisk 636×52 px → 478×39 u nas, pismo cap 12 px → 13 px / tracking .2em.
   Odstępy pionowe (przeliczone): kicker→H2 29, H2→akapit 59, akapit→akapit 26, →przycisk 44.
   ⚠️ z-index 6 — bez własnej warstwy pas wideo z hero (sticky, klei się do końca strony)
   wchodzi tej sekcji na wierzch. */
body.gm-page .usl-om{
  position:relative; z-index:6; overflow:hidden; background:#16151e; color:var(--cream);
  min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:clamp(80px,13vh,150px) clamp(18px,3vw,44px);
}
/* Kadr w tle: kontener rozciągnięty na sekcję, wrapper widgetu przezroczysty dla layoutu.
   ⚠️ CIEMNA NAKŁADKA (Seb 18.08, po rundzie z jasną: „zmień na ciemną, a bordowy tekst na jasny")
   robiona przezroczystością obrazu na ciemnym tle kontenera, NIE pseudoelementem — Elementor
   nakłada kontenerom własne `::before` z `top:0` i nakładka potrafi wyskoczyć na górę bloku.
   ⚠️ Skoro tło jest ciemne, CAŁA treść sekcji idzie na jasno — RÓWNIEŻ kicker, który
   na makiecie jest bordowy: bordo #590B11 na ciemnym kadrze praktycznie znika. */
body.gm-page .usl-om__bg{ position:absolute; inset:0; z-index:0; display:block; background:#16151e; }
body.gm-page .usl-om__bg > .elementor-widget-image{ display:contents; }
body.gm-page .usl-om__img img{
  width:100%; height:100%; object-fit:cover; display:block; opacity:.62; filter:saturate(.9);
}
body.gm-page .usl-om__in{
  position:relative; z-index:1; display:block; width:100%;
  /* miara z makiety to 692 px, ale przy naszych `&nbsp;` najdłuższy wiersz jest szerszy
     i łamałby się PRZED znacznikiem <br> — stąd zapas */
  max-width:860px; margin:0 auto;
}
body.gm-page .usl-om__kicker{
  display:block; font-family:var(--serif); font-style:italic; text-transform:uppercase;
  letter-spacing:.12em; color:var(--cream); font-size:clamp(.68rem,.9vw,13px);
}
body.gm-page .usl-om__h{
  margin:clamp(16px,2vw,29px) 0 0; font-family:var(--sans); font-weight:300;
  text-transform:uppercase; color:var(--cream);
  font-size:clamp(1.4rem,2.78vw,40px); line-height:1.3; letter-spacing:.11em;
}
body.gm-page .usl-om__p{
  margin:0; font-family:var(--sans); font-weight:300; color:var(--cream);
  font-size:clamp(.9rem,1.18vw,17px); line-height:1.28; letter-spacing:0;
}
/* ⚠️ Kolor akapitu MUSI iść tą samą ścieżką co reguła z góry pliku
   (`…elementor-widget-text-editor p{color:inherit}`, specyficzność 0,2,2) — inaczej biały
   tekst cicho wraca do --ink i znika na ciemnym kadrze. */
body.gm-page .elementor-widget-text-editor p.usl-om__p{ color:var(--cream); }
/* ⚠️ Odstęp pierwszego akapitu MUSI iść selektorem sąsiedztwa (`.usl-om__h + …`), a nie
   `:first-of-type` — każdy wrapper widgetu Elementora to `div`, więc „pierwszy tego typu"
   jest wrapper KICKERA i reguła cicho nie działa (zmierzone: gap 0 px zamiast 59).
   Odstępy w `vw`, nie `vh`: makieta ma ramkę 1440×994, a przy oknie 900 px wysokości
   wersja na `vh` schodziła do minimum i rytm robił się ciaśniejszy niż na makiecie. */
body.gm-page .usl-om__h + .elementor-widget-text-editor{ margin-top:clamp(30px,4.1vw,59px); }
body.gm-page .usl-om__in > .elementor-widget-text-editor + .elementor-widget-text-editor{
  margin-top:clamp(16px,1.8vw,26px);
}
body.gm-page .usl-om__btnwrap{ margin-top:clamp(26px,3.05vw,44px); }
body.gm-page .usl-om__btn{
  /* ramka z makiety ma 478×39 px przy 1440 — przy naszym stopniu pisma (13 px / .2em)
     tekst zajmuje 405 px, więc światło po bokach to 36 px, a w pionie 12 px */
  display:inline-block; padding:clamp(10px,1.4vh,12px) clamp(18px,2.5vw,36px);
  border:1px solid rgba(255,255,255,.72); color:var(--cream); text-decoration:none;
  font-family:var(--sans); font-weight:400; font-size:clamp(.7rem,.9vw,13px);
  letter-spacing:.2em; text-transform:uppercase; line-height:1;
  transition:background .35s, color .35s, border-color .35s;
}
body.gm-page .usl-om__btn:hover{ background:#590B11; border-color:#590B11; color:var(--cream); }

/* --- SEKCJA 7: FAQ — akordeon rozwijany najechaniem (Seb 18.08: „ma działać jak sekcja
   bezpieczeństwo: hover etc.") ---
   Silnik ten sam co „Bezpieczeństwo" (js-pre.js, pętla po `#uslBz` i `#uslFaq`), układ inny:
   pytania na PEŁNĄ szerokość treści, kreski między wierszami, strzałka przy prawej krawędzi.
   Z pomiaru zrzutu (2000 px = ramka 1440, ×0,752 na naszą siatkę): pytanie ~27 px Cormorant,
   wcięcie tytułu 50 px, wiersz zamknięty 96 px, kreska nad listą 57 px pod nagłówkiem,
   stopka 88 px pod ostatnią kreską, przycisk 256×40 px. */
body.gm-page .usl-faq{
  position:relative; z-index:7; background:#fff; color:var(--ink);
  padding:clamp(76px,12vh,140px) clamp(18px,3vw,44px) clamp(70px,11vh,130px);
}
body.gm-page .usl-faq__kicker{
  display:block; font-family:var(--serif); font-style:italic; text-transform:uppercase;
  letter-spacing:.12em; color:#590B11; font-size:clamp(.68rem,.9vw,13px);
}
body.gm-page .usl-faq__h{
  margin:clamp(10px,1.6vh,18px) 0 0; font-family:var(--sans); font-weight:300;
  text-transform:uppercase; color:var(--ink);
  font-size:clamp(1.4rem,2.75vw,40px); line-height:1.25; letter-spacing:.06em;
}
body.gm-page .usl-faq__list{
  display:block; margin-top:clamp(30px,3.95vw,57px); border-top:1px solid rgba(22,21,30,.16);
}
body.gm-page .usl-faq__item{ display:block; border-bottom:1px solid rgba(22,21,30,.16); cursor:pointer; }
/* ⚠️ Prawy zapas na PASEK BOCZNY: `.rail` (ikony akcji) wisi `fixed` przy prawej krawędzi okna
   (x 1387–1440 przy 1440) i zjadał prawą połowę chevronu wiersza, który akurat trafił w jego
   wysokość. Kreski wierszy zostają na pełnej siatce, cofa się tylko strzałka. */
body.gm-page .usl-faq__row{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,2vw,30px);
  padding-right:clamp(0px,4vw,58px);
}
body.gm-page .usl-faq__t{
  /* padding w `vw`, nie `vh` — wiersz ma mieć 96 px z makiety niezależnie od wysokości okna */
  margin:0; padding:clamp(20px,2.22vw,32px) 0 clamp(20px,2.22vw,32px) clamp(20px,3.5vw,50px);
  font-family:var(--serif); font-weight:400; color:#590B11;
  font-size:clamp(1rem,1.87vw,27px); line-height:1.15; letter-spacing:.01em;
  transition:color .35s;
}
/* ⚠️ Cormorant ma cyfry mediewalne — bez `lining-nums` „/01." jest o połowę niższe od liter */
body.gm-page .usl-faq__n{ font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
body.gm-page .usl-faq__item:hover .usl-faq__t,
body.gm-page .usl-faq__item.is-open .usl-faq__t{ color:#3d070c; }
/* strzałka: ten sam chevron co w karuzelach, w bordo; po otwarciu obraca się o pół obrotu */
body.gm-page .usl-faq__arwrap{ flex:0 0 auto; display:flex; }
body.gm-page .usl-faq__ar svg{
  display:block; width:clamp(18px,1.6vw,23px); height:clamp(18px,1.6vw,23px);
  fill:none; stroke:#590B11; stroke-width:1.3; vector-effect:non-scaling-stroke;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
body.gm-page .usl-faq__item.is-open .usl-faq__ar svg{ transform:rotate(180deg); }
/* panel: wysokość ustawia JS (scrollHeight) — patrz „Bezpieczeństwo" */
body.gm-page .usl-faq__panel{
  display:block; overflow:hidden; height:0; opacity:0;
  transition:height .45s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
body.gm-page .usl-faq__item.is-open .usl-faq__panel{ opacity:1; }
body.gm-page .usl-faq__p{
  margin:0; padding:0 clamp(20px,4vw,60px) clamp(22px,3.4vh,34px) clamp(20px,3.5vw,50px);
  font-family:var(--sans); font-weight:300; color:var(--ink); max-width:92ch;
  font-size:clamp(.88rem,1.11vw,16px); line-height:1.55;
}
/* bez JS akordeon ma być CZYTELNY, a nie zamknięty na amen */
body.gm-page .usl-faq:not(.js-on) .usl-faq__panel{ height:auto; opacity:1; }
/* Stopka: blok dosunięty do PRAWEJ, ale przycisk równo z LEWĄ krawędzią zdania nad nim
   (zmierzone na makiecie: 1295 vs 1298 px). `width:max-content` daje kolumnę o szerokości
   zdania, więc przycisk sam trafia pod jego początek. */
body.gm-page .usl-faq__foot{
  display:block; width:max-content; max-width:100%; margin:clamp(48px,6.1vw,88px) 0 0 auto;
}
body.gm-page .usl-faq__note{
  margin:0; font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(.9rem,1.18vw,17px); line-height:1.45;
}
body.gm-page .usl-faq__btn{
  display:inline-block; margin-top:clamp(14px,1.6vw,23px);
  padding:clamp(10px,1.4vh,12px) clamp(14px,1.6vw,23px);
  border:1px solid rgba(22,21,30,.55); color:var(--ink); text-decoration:none;
  font-family:var(--sans); font-weight:400; font-size:clamp(.68rem,.87vw,12.5px);
  letter-spacing:.2em; text-transform:uppercase; line-height:1;
  transition:background .35s, color .35s, border-color .35s;
}
body.gm-page .usl-faq__btn:hover{ background:#590B11; border-color:#590B11; color:var(--cream); }

/* --- SEKCJA 8: domykające wezwanie do działania (makieta Seba 18.08) ---
   Jasny pas: z pomiaru 655 px zrzutu → 492 px u nas, nagłówek 40 px / tracking .11em /
   interlinia 1,26, przyciski 456×39 i 320×39 px, odstępy 47 i 17 px. */
body.gm-page .usl-cta{
  position:relative; z-index:8; background:#f5f5f5; color:var(--ink);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:clamp(60px,8.7vw,125px) clamp(18px,3vw,44px);
}
body.gm-page .usl-cta__in{ display:block; width:100%; max-width:1000px; margin:0 auto; }
body.gm-page .usl-cta__h{
  margin:0; font-family:var(--sans); font-weight:300; text-transform:uppercase; color:var(--ink);
  font-size:clamp(1.4rem,2.78vw,40px); line-height:1.26; letter-spacing:.11em;
}
/* Tracking .14em, nie .2em jak w pozostałych przyciskach: przy .2em sam napis „SZYBKI FORMULARZ
   ZGŁOSZENIA NIERUCHOMOŚCI" jest szerszy (469 px) niż CAŁA ramka z makiety (456 px). */
body.gm-page .usl-cta__btnwrap{ margin-top:clamp(26px,3.26vw,47px); }
body.gm-page .usl-cta__btnwrap--2{ margin-top:clamp(10px,1.18vw,17px); }
body.gm-page .usl-cta__btn{
  display:inline-block; padding:clamp(10px,1.4vh,12px) clamp(12px,1.18vw,17px);
  border:1px solid rgba(22,21,30,.55); color:var(--ink); text-decoration:none;
  font-family:var(--sans); font-weight:400; font-size:clamp(.68rem,.87vw,12.5px);
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
  transition:background .35s, color .35s, border-color .35s;
}
body.gm-page .usl-cta__btn:hover{ background:#590B11; border-color:#590B11; color:var(--cream); }

@media(max-width:900px){
  /* ⚠️ Kontenery Elementora trzymają kierunek flexa na WŁASNEJ zmiennej i na telefonie
     przestawiają ją na `column` — chevron wylatywał wtedy POD pytanie, wyrównany do lewej,
     z pustym pasem między nimi (złapane na zrzucie 390 px). Kierunek wymuszamy z `!important`. */
  body.gm-page .usl-faq__row{
    flex-direction:row !important; flex-wrap:nowrap !important; align-items:center;
  }
  /* tytuł MUSI móc się skurczyć — bez `min-width:0` element flex nie schodzi poniżej swojej
     treści, strzałka nie mieści się w rzędzie i zawija pod pytanie mimo `flex-direction:row` */
  body.gm-page .usl-faq__t{ flex:1 1 auto; min-width:0; }
  body.gm-page .usl-faq__ar svg{ width:18px; height:18px; }
  body.gm-page .usl-faq__t{ font-size:19px; padding-left:0; }
  body.gm-page .usl-faq__p{ padding-left:0; padding-right:0; font-size:15px; }
  body.gm-page .usl-faq__foot{ width:auto; margin-left:0; }
  body.gm-page .usl-faq__note{ font-size:15px; }
  body.gm-page .usl-cta__h{ font-size:24px; letter-spacing:.08em; line-height:1.35; }
  body.gm-page .usl-cta__h br{ display:none; }
  /* oba przyciski na pełną szerokość kolumny — przy `inline-block` pierwszy (dłuższy napis)
     rozciągał się na 100 %, a drugi zostawał węższy i rytm się sypał */
  /* wspólna wysokość: pierwsza etykieta łamie się na dwa wiersze i para wychodziła nierówna
     (47 vs 35 px) — flex ze stałą wysokością trzyma oba przyciski w tym samym rytmie */
  body.gm-page .usl-cta__btn{
    display:flex; align-items:center; justify-content:center; width:100%; min-height:56px;
    text-align:center; font-size:11px; letter-spacing:.1em; line-height:1.35;
  }
  body.gm-page .usl-faq__row{ padding-right:0; }
}

@media(max-width:900px){
  body.gm-page .usl-om{ padding:clamp(70px,14vh,110px) clamp(18px,3vw,44px); }
  body.gm-page .usl-om__h{ font-size:24px; letter-spacing:.08em; line-height:1.35; }
  body.gm-page .usl-om__p{ font-size:15px; line-height:1.5; }
  /* łamanie z makiety jest desktopowe — na telefonie <br> robi wiersze po trzy słowa */
  body.gm-page .usl-om__h br, body.gm-page .usl-om__p br{ display:none; }
  body.gm-page .usl-om__btn{ font-size:11px; letter-spacing:.14em; }
}

/* --- wiersz: kadr + opis (NIEUŻYWANE od 14.08 — zostaje pod kolejne sekcje) --- */
/* Kolumna ze zdjęciem jest WĘŻSZA od kolumny tekstu (makieta: 36 / 64) — dzięki temu
   opis dostaje pełną miarę, a kadr nie rozpycha wiersza. */
body.gm-page .usl-row{
  display:grid; grid-template-columns:36fr 64fr; align-items:start;
  gap:clamp(28px,3.6vw,56px); margin-top:clamp(46px,8vh,96px);
}
body.gm-page .usl-row--rev{ grid-template-columns:64fr 36fr; }
body.gm-page .usl-row__fig{ display:block; overflow:hidden; background:rgba(22,21,30,.06); }
body.gm-page .usl-row__fig > .elementor-widget-image{ display:contents; }
body.gm-page .usl-row__img{ display:block; width:100%; height:auto; }
/* ⚠️ PRZYPIĘCIE siedzi na kontenerze, nie na widgecie tekstu: kontener jest elementem siatki,
   widget dostaje od Elementora własny wrapper i `sticky` liczyłoby się względem niego.
   `align-self:start` jest konieczne — domyślne rozciągnięcie elementu siatki na pełną wysokość
   wiersza sprawia, że nie ma się gdzie przesuwać i przypięcie nic nie robi. */
body.gm-page .usl-row__txt{
  position:sticky; top:var(--usl-stick); align-self:start;
  display:flex; flex-direction:column; gap:clamp(14px,1.9vh,22px);
}
body.gm-page .usl-p{
  margin:0; font-family:var(--sans); font-weight:400; color:var(--ink);
  font-size:var(--usl-body); line-height:1.6; letter-spacing:.005em;
}
/* --- odnośnik „Zobacz jak pracujemy →" --- */
/* odnośnik w akcencie marki (Seb 12.08), rozmiar i światło z makiety: cap 13 px → 17 px,
   średni odstęp liter 15,6 px przy szerokości wersalika ~0,68em → tracking .16em */
body.gm-page .usl-lnk{
  display:inline-flex; align-items:center; gap:14px; margin-top:clamp(10px,1.8vh,20px);
  color:#590B11; text-decoration:none; font-family:var(--sans); font-weight:400;
  font-size:clamp(.8rem,1.18vw,17px); letter-spacing:.16em; text-transform:uppercase;
}
body.gm-page .usl-lnk__ar{
  width:24px; height:19px; flex:0 0 24px; fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:square; transition:transform .35s cubic-bezier(.16,1,.3,1);
}
body.gm-page .usl-lnk:hover .usl-lnk__ar{ transform:translateX(5px); }

@media(max-width:900px){
  /* telefon: jedna kolumna, zdjęcie ZAWSZE nad opisem (także w wierszu odwróconym),
     przypięcie wyłączone — przy jednej kolumnie nie ma czego mijać */
  body.gm-page .usl-int{ padding-top:clamp(88px,13vh,120px); }
  /* Podział 47/53 z makiety jest DESKTOPOWY — na telefonie zostawiał akapitom 188 px
     (zmierzone na 390), czyli po trzy słowa w wierszu. Tu tekst idzie pełną szerokością. */
  body.gm-page .usl-int__cols{ grid-template-columns:1fr; }
  body.gm-page .usl-int__col{ grid-column:1; }
  body.gm-page .usl-row, body.gm-page .usl-row--rev{
    grid-template-columns:1fr; gap:clamp(18px,3.4vh,26px);
  }
  body.gm-page .usl-row--rev .usl-row__fig{ order:1; }
  body.gm-page .usl-row--rev .usl-row__txt{ order:2; }
  body.gm-page .usl-row__txt{ position:static; top:auto; }
}


/* ===== 15. PODSTRONA /ulubione — pusty stan i wezwanie do działania (Seb 12.08) ==========
   Sama LISTA jest 1:1 taka jak na /oferta/ (kontener nosi obie klasy: `gm-sub--oferta`
   dla wyglądu i `gm-sub--fav` dla różnic tej podstrony) — tu tylko to, czego /oferta nie ma.
   ⚠️ Skrót `[esticrm_favorites]` NIE przyjmuje `empty_text` (shortcode_atts przepuszcza tylko
   `cols` i `card_variant`), więc treść pustego stanu podmienia js-pre.js. */
body.gm-page .gm-sub--fav .esticrm-empty{
  margin:0 !important; padding:clamp(26px,5vh,54px) 0 0 !important;
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; text-align:left !important;
  font-family:var(--sans) !important; font-weight:300 !important;
  font-size:clamp(1.05rem,1.6vw,22px) !important; line-height:1.5 !important;
  color:rgba(22,21,30,.72) !important;
}
/* ⚠️ `body.gm-page .gm-sub--oferta > .elementor-widget-html{display:contents}` (reguła dla paska
   okruszków, specyficzność 0,3,1) SPŁASZCZA oba nasze widgety HTML — wrapper znika z layoutu,
   więc `margin-left` z `.gm-browser` przestaje działać, a `display:none` na stopce przegrywa.
   Dlatego oba przywracamy jako bloki selektorem o wyższej specyficzności. */
body.gm-page .gm-sub--fav > .elementor-widget-html.gm-fav__bar{ display:block; }
body.gm-page .gm-fav__bar[hidden]{ display:none !important; }
/* Kreska + licznik: DOKŁADNIE ten sam odstęp co pod wyszukiwarką na /oferta/ (Seb 12.08) —
   reguły `.gm-sub--oferta .esticrm-results-bar` obowiązują tu bez zmian, nic nie nadpisujemy. */
/* odnośnik pokazuje się TYLKO przy pustej liście — klasę `is-empty` przełącza js-pre.js */
body.gm-page .gm-sub--fav > .elementor-widget-html.gm-fav__foot{ display:none; margin-left:var(--ofl); }
body.gm-page .gm-sub--fav.is-empty > .elementor-widget-html.gm-fav__foot{ display:block; }
body.gm-page .gm-fav__cta{
  display:inline-flex; align-items:center; gap:14px; margin-top:clamp(16px,2.6vh,26px);
  color:#590B11; text-decoration:none; font-family:var(--sans); font-weight:400;
  font-size:clamp(.68rem,.84vw,.8rem); letter-spacing:.2em; text-transform:uppercase;
}
body.gm-page .gm-fav__cta svg{
  width:24px; height:19px; flex:0 0 24px; fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:square; transition:transform .35s cubic-bezier(.16,1,.3,1);
}
body.gm-page .gm-fav__cta:hover svg{ transform:translateX(5px); }

/* ===== 16. STRONA BŁĘDU 404 (`gm-front/404.php`) ==============================
   Szablon jest PHP-owy (UAE Lite nie ma typu „404", Theme Buildera z PRO tu nie ma),
   więc markup jest nasz i nie trzeba walczyć z wrapperami widgetów Elementora.
   Typografia z hero /o-nas: wersaliki Cormorant w bordo + Montserrat pod spodem.
   Odnośnik = ten sam wzorzec co `.gm-fav__cta` na /ulubione (strzałka jedzie w prawo).
   ============================================================================== */
/* Biel na CAŁYM dokumencie, nie tylko na sekcji: witryna trzyma na `html` kolor #09090B
   (tło pod ciemne sekcje strony głównej), a na białej stronie błędu wyłaził on przy
   przeciągnięciu strony — czarny pas nad nagłówkiem i pod stopką. Klasę `gm-404` dokłada
   `body_class` w gm-front.php; `:has()` przenosi ją na <html>, do którego filtr nie sięga. */
html:has(body.gm-404), body.gm-page.gm-404{ background:#fff; }
body.gm-page .gm404{
  --g404:clamp(18px,3vw,44px);                       /* siatka jak nagłówek i reszta stron */
  position:relative; background:#fff; color:var(--ink);
  /* padding-top ma minąć PRZYPIĘTY nagłówek (116 px w stanie nieprzewiniętym) */
  padding:clamp(128px,17vh,190px) var(--g404) clamp(70px,11vh,120px);
  min-height:100svh; display:flex; align-items:center;
}
/* `container-type:inline-size` daje jednostkę `cqw` = 1 % szerokości TEGO kontenera.
   Dzięki temu wordmark wypełnia siatkę co do procenta na każdej szerokości — jednostka `vw`
   tego nie potrafi, bo padding strony jest clampem (powyżej ~1466 px stoi na 44 px i kontener
   rośnie szybciej niż okno: zmierzone 16,44vw przy 1440 vs 16,88vw przy 2560). */
body.gm-page .gm404__in{ width:100%; container-type:inline-size; }
body.gm-page .gm404__eyebrow{
  font-family:var(--sans); font-weight:400; font-size:13px; line-height:1;
  letter-spacing:.2em; text-transform:uppercase; color:#590B11; margin:0 0 clamp(16px,2.4vh,26px);
}
/* wordmark: ta sama mechanika co `.abo-hero__wm` — dwa stopnie, interlinia z `--wm-lh`,
   `white-space:nowrap` (łamiemy WYŁĄCZNIE tam, gdzie stoi osobny <span>) */
body.gm-page .gm404__wm{
  --wm-lh:.87; font-family:var(--serif); font-weight:400; text-transform:uppercase;
  color:#590B11; line-height:var(--wm-lh); letter-spacing:-.005em; margin:0;
}
body.gm-page .gm404__wm .l1, body.gm-page .gm404__wm .l2{ display:block; white-space:nowrap; }
/* Wordmark ciągnie się przez CAŁĄ szerokość siatki, jak w hero /o-nas — inaczej prawa połowa
   ekranu stoi pusta i strona wygląda na niedokończoną. Zmierzone: „NIE ISTNIEJE" ma 571,9 px
   szerokości przy foncie 100 px, więc pełne wypełnienie = 17,49cqw; 17,4 to 0,5 % zapasu na
   hinting. `l1` trzyma proporcję z /o-nas (143/173 = 0,827) — „TA STRONA" jest krótsza, więc
   kończy się wcześniej, dokładnie tak jak „GALERIA" nad „MROZIŃSKI.COM". */
/* Drugi człon `min()` to bezpiecznik na okna szerokie i niskie (np. 2560×900): sam `cqw`
   rozpycha wtedy wordmark tak, że odnośniki i kontakt wypadają poniżej krawędzi ekranu.
   Przy typowych proporcjach (1440×900, 1728×1080) limit nie działa — zmierzone. */
body.gm-page .gm404__wm .l1{ font-size:min(14.39cqw, 28.1vh); }
body.gm-page .gm404__wm .l2{ font-size:min(17.4cqw, 34vh); }
/* Pod wersalikami zostaje pusty pas line-boxa (miejsce na descendery, których tu nie ma):
   lh/2 − 0,31825em dla Cormoranta. Ścinamy go, żeby odstęp do leadu był tym, co widać. */
body.gm-page .gm404__wm .l2{ margin-bottom:calc(.31825em - var(--wm-lh) * .5em); }
body.gm-page .gm404__lead{
  font-family:var(--sans); font-weight:400; font-size:20px; line-height:1.75;
  color:var(--ink); margin:clamp(26px,4vh,42px) 0 0; max-width:46ch;
}
body.gm-page .gm404__nav{
  display:flex; flex-wrap:wrap; gap:clamp(24px,3.4vw,52px);
  margin-top:clamp(28px,4.4vh,46px);
}
body.gm-page .gm404__cta{
  display:inline-flex; align-items:center; gap:14px; color:#590B11; text-decoration:none;
  font-family:var(--sans); font-weight:400; font-size:clamp(.68rem,.84vw,.8rem);
  letter-spacing:.2em; text-transform:uppercase;
}
body.gm-page .gm404__cta svg{
  width:24px; height:19px; flex:0 0 24px; fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:square; transition:transform .35s cubic-bezier(.16,1,.3,1);
}
body.gm-page .gm404__cta:hover svg{ transform:translateX(5px); }
body.gm-page .gm404__contact{
  font-family:var(--sans); font-weight:300; font-size:14px; line-height:1.9;
  color:rgba(22,21,30,.62); margin:clamp(34px,5.6vh,60px) 0 0;
}
body.gm-page .gm404__contact a{ color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(22,21,30,.28); }
body.gm-page .gm404__contact a:hover{ color:#590B11; border-bottom-color:#590B11; }
body.gm-page .gm404__contact .sep{ padding:0 8px; color:rgba(22,21,30,.35); }

/* --- telefon: wordmark zostaje na `cqw` (skaluje się z kolumną, więc wypełnia ekran tak samo
       jak na desktopie i nie trzeba mu osobnych stopni ani zdejmowania `nowrap`); zmieniają się
       tylko rytm, stopnie tekstu i układ odnośników. Reszta clampów z `vw` schodziłaby tu do
       minimum, stąd wartości podane wprost. --- */
@media (max-width:640px){
  body.gm-page .gm404{ padding:clamp(104px,15vh,150px) var(--g404) clamp(54px,8vh,80px); }
  body.gm-page .gm404__lead{ font-size:16px; line-height:1.7; }
  body.gm-page .gm404__nav{ flex-direction:column; gap:18px; align-items:flex-start; }
  body.gm-page .gm404__contact{ font-size:13px; }
  body.gm-page .gm404__contact .sep{ display:none; }
  body.gm-page .gm404__contact a{ display:inline-block; }
}