/* ===== 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}


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

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.15rem,2.2vw,32px);line-height:1.34;letter-spacing:0;color:var(--ink)}
body.gm-page .wlc__dbr{display:revert}
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__foot{margin-top:clamp(26px,3.8vh,44px);display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,2.6vh,30px)}
body.gm-page .wlc__facts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(10px,1.4vw,18px);font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;
  font-weight:400;font-size:clamp(.62rem,.78vw,.76rem);color:rgba(22,21,30,.62);line-height:1.5}
body.gm-page .wlc__facts span{display:inline-flex;align-items:center;gap:clamp(10px,1.4vw,18px)}

body.gm-page .wlc__facts span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:#590B11;
  display:block;flex:0 0 auto}
body.gm-page .wlc__btns{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:clamp(10px,1.2vw,16px)}
body.gm-page .wlc__btn{margin-top:0}
body.gm-page .wlc__btn2{display:inline-flex;align-items:center;justify-content:center;
  height:clamp(52px,4.4vw,60px);padding:0 clamp(22px,2.4vw,34px);
  border:1px solid rgba(22,21,30,.35);color:var(--ink);text-decoration:none;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-weight:400;
  font-size:clamp(.64rem,.78vw,.76rem);text-align:center;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
body.gm-page .wlc__btn2:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@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.05rem,4.9vw,1.5rem);line-height:1.4}
  body.gm-page .wlc__dbr{display:none}
  
  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 .wlc__btns{flex-direction:column;align-items:stretch;width:100%}
  body.gm-page .wlc__btns>*{width:100%}
  
  body.gm-page .wlc__btns .gm-btn,body.gm-page .wlc__btn2{height:auto;min-height:52px;white-space:normal;text-align:center;
    line-height:1.4;padding-block:14px}
  body.gm-page .wlc__facts{gap:8px;font-size:.62rem;letter-spacing:.12em}
  body.gm-page .wlc__facts span{gap:8px}
}





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.15rem,1.95vw,28px);line-height:1.32;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__head{max-width:1360px;margin:0 auto clamp(46px,7vh,96px);display:flex;flex-direction:column;
  align-items:center;text-align:center}


body.gm-page .abt__head::before{content:"";position:static;inset:auto;flex:0 0 auto;align-self:stretch;
  width:100%;height:1px;background:#590B11;margin-bottom:clamp(38px,6vh,74px)}
body.gm-page .abt__head .abt__kicker{line-height:1.9}


body.gm-page .abt__head .abt__lead{max-width:none;margin-inline:auto;font-weight:400}
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;white-space:nowrap;
  
  font-size:clamp(2.2rem,5vw,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:var(--ink);
  line-height:1.75}
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:none}

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(.64rem,.78vw,.76rem);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:clamp(52px,4.4vw,60px);padding:0 clamp(22px,2.4vw,34px);
  border:1px solid rgba(22,21,30,.35);text-decoration:none;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
body.gm-page .abt__cta:hover{background:var(--ink);color:#fff;border-color:var(--ink)}


body.gm-page .abt__proc{margin:clamp(56px,9vh,110px) auto 0;max-width:1360px}
body.gm-page .abt__proc::before{content:"";position:static;inset:auto;display:block;width:100%;height:1px;
  background:#590B11;margin-bottom:clamp(38px,6vh,74px)}
body.gm-page .abt__proc-h{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;
  line-height:1.08;color:var(--ink);font-size:clamp(1.3rem,2.5vw,36px);margin-bottom:clamp(28px,4.4vh,54px)}
body.gm-page .abt__proc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,2.6vw,44px);align-items:start}
body.gm-page .abt__step{display:flex;flex-direction:column;align-items:flex-start;
  border-top:1px solid rgba(22,21,30,.16);padding-top:clamp(14px,2vh,20px)}

body.gm-page .abt__step-n{font-family:var(--serif);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
  font-weight:400;font-size:clamp(1.1rem,1.5vw,22px);line-height:1;color:#590B11}
body.gm-page .abt__step-h{margin-top:clamp(8px,1.2vh,14px);font-family:var(--sans);font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.2;color:var(--ink);
  font-size:clamp(.95rem,1.15vw,17px)}
body.gm-page .abt__step-w{margin-top:clamp(8px,1.2vh,14px);font-family:var(--serif);font-style:italic;
  font-size:clamp(.95rem,1.15vw,17px);line-height:1.4;color:#590B11}
body.gm-page .abt__step-t{margin-top:clamp(8px,1.2vh,14px);font-family:var(--sans);font-weight:300;
  font-size:clamp(.85rem,.95vw,15px);line-height:1.6;color:rgba(22,21,30,.72)}
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__head{align-items:flex-start;text-align:left;margin-bottom:clamp(30px,5vh,52px)}
  
  
  body.gm-page .abt__proc-grid{grid-template-columns:1fr;gap:clamp(18px,2.6vh,26px)}
  body.gm-page .abt__proc-h{font-size:clamp(1.35rem,6vw,1.9rem)}
  body.gm-page .abt__name{font-size:clamp(1.55rem,8.1vw,2.8rem)}
  body.gm-page .abt__lead{font-size:clamp(1.1rem,4.8vw,1.4rem)}
}


body.gm-page .pom{position:relative;z-index:6;background:#fff;color:var(--ink);height:calc(100vh + 5 * 48vh)}

body.gm-page .pom__stage{position:sticky;top:0;height:100vh;display:grid;
  grid-template-columns:minmax(0,38fr) minmax(0,62fr);align-items:center;
  gap:clamp(30px,5vw,88px);padding:clamp(60px,10vh,120px) var(--gut);background:#fff}



body.gm-page .pom__chart{position:relative;width:100%;max-width:min(100%,440px);
  height:clamp(96px,13.5vh,150px);margin-top:clamp(22px,3.4vh,40px);
  pointer-events:none;overflow:hidden}
body.gm-page .pom__chart svg{width:100%;height:100%;display:block}
body.gm-page .pom__line{fill:none;stroke:#590B11;stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round}

body.gm-page .pom__node{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:#590B11;
  opacity:0;transform:scale(.4);
  transition:opacity .45s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
body.gm-page .pom__node.is-on{opacity:1;transform:none}

body.gm-page .pom__tip{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#590B11;opacity:0;transition:opacity .4s ease}
body.gm-page .pom__tip.is-on{opacity:1}
body.gm-page .pom__head,body.gm-page .pom__cards{position:relative;z-index:1}
body.gm-page .pom__head{display:flex;flex-direction:column;align-items:flex-start}
body.gm-page .pom__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 .pom__h{margin-top:clamp(10px,1.6vh,18px);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 .pom__lead{margin-top:clamp(14px,2.2vh,24px);font-family:var(--sans);font-weight:300;
  font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:rgba(22,21,30,.72);max-width:34ch}


body.gm-page .pom__cards{position:relative;display:flex;flex-direction:column}


body.gm-page .pom__card{overflow:hidden;border-top:1px solid transparent;padding:0;max-height:0;
  opacity:0;transform:translateY(10px);
  transition:max-height .8s cubic-bezier(.22,.61,.36,1),padding .8s cubic-bezier(.22,.61,.36,1),
             opacity .75s ease,transform .8s cubic-bezier(.22,.61,.36,1),border-color .6s ease}
body.gm-page .pom__card.is-past,body.gm-page .pom__card.is-on{opacity:1;transform:none;padding:clamp(14px,2vh,20px) 0;
  border-top-color:rgba(22,21,30,.16)}
body.gm-page .pom__card.is-past{max-height:120px;opacity:.55}
body.gm-page .pom__card.is-on{max-height:480px}
body.gm-page .pom__hd{display:flex;align-items:baseline;gap:clamp(10px,1.1vw,16px)}
body.gm-page .pom__n{flex:0 0 auto;font-family:var(--serif);font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;font-size:clamp(1rem,1.3vw,19px);line-height:1;color:#590B11}
body.gm-page .pom__t{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  line-height:1.25;color:var(--ink);font-size:clamp(.98rem,1.35vw,21px)}

body.gm-page .pom__body{overflow:hidden;max-height:0;opacity:0;
  transition:max-height .8s cubic-bezier(.22,.61,.36,1),opacity .6s ease}
body.gm-page .pom__card.is-on .pom__body{max-height:400px;opacity:1}

body.gm-page .pom__grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(118px,13vw,178px);
  gap:clamp(18px,2.4vw,36px);align-items:start}
body.gm-page .pom__ph{aspect-ratio:3/4;width:100%;background:#F1F0EE;border:1px solid rgba(22,21,30,.1)}
body.gm-page .pom__ph img{width:100%;height:100%;object-fit:cover;display:block}
body.gm-page .pom__p{margin-top:clamp(10px,1.6vh,16px);font-family:var(--sans);font-weight:300;
  font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:rgba(22,21,30,.78);max-width:52ch}
@media(max-width:900px){
  
  body.gm-page .pom{height:calc(100dvh + 5 * 42vh)}
  body.gm-page .pom__stage{grid-template-columns:1fr;height:100dvh;align-content:center;align-items:start;
    gap:clamp(18px,3vh,28px);padding:clamp(50px,9vh,90px) var(--gut)}

  body.gm-page .pom__h{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  body.gm-page .pom__lead{max-width:100%}
  body.gm-page .pom__chart{max-width:100%;height:clamp(84px,11vh,110px)}
  
  body.gm-page .pom__grid{grid-template-columns:1fr;gap:clamp(14px,2.2vh,20px)}
  body.gm-page .pom__ph{max-width:150px}
  
  body.gm-page .pom__card.is-on .pom__body{max-height:560px}
  body.gm-page .pom__card.is-past{max-height:150px}
  body.gm-page .pom__card.is-on{max-height:700px}
}



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);
  display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3vw,48px);text-align:left}
body.gm-page .lok__head-l{display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  max-width:min(980px,68%)}

body.gm-page .lok__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 .lok__kicker{font-family:var(--serif);font-style:italic;text-transform:uppercase;letter-spacing:.12em;
  color:#590B11;font-size:clamp(.72rem,.94vw,.96rem);margin-bottom:clamp(8px,1.4vh,16px)}

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{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://galeriamrozinski.com/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://galeriamrozinski.com/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__lead{margin-top:clamp(-40px,-4vh,-22px);max-width:760px;margin-inline:auto;
  font-family:var(--sans);font-weight:300;font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.6;
  color:rgba(255,255,255,.86);text-shadow:0 1px 18px rgba(0,0,0,.35)}
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;color:var(--ink);overflow:hidden;
  background:#F0F0EF url('https://galeriamrozinski.com/wp-content/uploads/2026/09/ft-frosted-1.jpg') center center/cover no-repeat;
  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(22,21,30,.72);text-decoration:none;transition:color .3s}
body.gm-page .ft__nav a:hover{color:#590B11}
body.gm-page .ft__logo{display:block}

body.gm-page .ft__logo img{height:clamp(86px,10.2vw,138px);width:auto;display:block;
  filter:invert(1) brightness(.62) 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(22,21,30,.6);display:inline-flex;align-items:center;justify-content:center;transition:color .3s ease}
body.gm-page .ft__social a:hover{color:#590B11}
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(22,21,30,.55)}
body.gm-page .ft__by a{color:rgba(22,21,30,.78);text-decoration:none}
body.gm-page .ft__by a:hover{color:#590B11}

body.gm-page .ft__wordmark{font-family:var(--serif);text-transform:uppercase;letter-spacing:-.02em;line-height:.82;color:rgba(89,11,17,.45);
  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,body.gm-page .ofr__lead,body.gm-page .vid__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.9rem,8.5vw,2.6rem);line-height:1.14;white-space:normal}
  body.gm-page .bnh__lead,body.gm-page .ofr__lead,body.gm-page .vid__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.05rem,4.9vw,1.5rem);line-height:1.4}
  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{flex-direction:column;align-items:flex-start;text-align:left}
  body.gm-page .lok__head-l{max-width:100%}
  body.gm-page .lok__title{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  body.gm-page .lok__btn2{align-self:flex-start;margin-top:clamp(14px,2.2vh,20px)}
  
  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.9rem,8.5vw,2.6rem)}
  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. */
/* ⚠️ Od 19.09 pasek ma DWIE rzeczy: licznik po lewej i „Sortuj:" po prawej — stad flex
   ze `space-between` zamiast `display:block` (blok kladl sortowanie POD licznikiem,
   zmierzone: oba dzieci startowaly na 48 px). `align-items:baseline`, zeby napis „Sortuj"
   siadl w tej samej linii co licznik mimo innego stopnia pisma. */
body.gm-page .gm-sub--oferta .esticrm-results-bar{
  display:flex !important; align-items:baseline !important;
  justify-content:space-between !important; gap:clamp(16px,2vw,32px) !important;
  margin:64.75px 0 0 !important; padding:0 !important;
  border-top:1px solid #B5B5B5 !important;
}
/* Sortowanie w stylu paska: wersaliki, tracking jak licznik.
   ⚠️ Natywny <select> jest UKRYTY i sluzy tylko za nosnik wartosci (wtyczka slucha na nim
   `change`) — widoczny jest nasz trigger + lista `.gm-dd`, czyli DOKLADNIE ten sam mechanizm
   co w filtrach („rodzaj transakcji"). Systemowej listy opcji nie da sie ostylowac. */
body.gm-page .gm-sub--oferta .esticrm-results-sort{
  position:relative !important;
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  margin:0 !important; padding:7px 0 0 !important;
  font-family:var(--sans) !important; font-weight:400 !important; font-size:12px !important;
  letter-spacing:2.4px !important; text-transform:uppercase !important; color:#000 !important;
}
body.gm-page .gm-sub--oferta .esticrm-results-sort select{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  opacity:0 !important; pointer-events:none !important; border:0 !important;
  background:transparent !important; -webkit-appearance:none !important; appearance:none !important;
}
body.gm-page .gm-sub--oferta .gm-srt__trg{
  all:unset; box-sizing:border-box; display:inline-flex; align-items:center;
  /* ⚠️ 4 px, nie 18: Seb prosil o mniejszy odstep miedzy napisem a strzalka. */
  gap:4px; cursor:pointer; color:#000;
  font-family:var(--sans); font-weight:400; font-size:12px; line-height:1;
  letter-spacing:2.4px; text-transform:uppercase;
}
body.gm-page .gm-sub--oferta .gm-srt__trg:hover{ color:#590B11; }
body.gm-page .gm-sub--oferta .gm-srt__chev{
  width:11px; height:11px; display:block; flex:0 0 11px;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
body.gm-page .gm-sub--oferta .esticrm-results-sort.is-open .gm-srt__chev{ transform:rotate(180deg); }
/* Lista otwiera sie PRZY PRAWEJ krawedzi — pasek sortowania stoi na koncu wiersza,
   wiec lista wyrownana do lewej wychodzilaby poza siatke. */
body.gm-page .gm-sub--oferta .gm-srt__dd{
  left:auto !important; right:0 !important; width:auto !important;
  min-width:230px !important; top:calc(100% + 6px) !important;
}
/* Opcje WYSRODKOWANE (Seb 19.09) — tak jak w listach filtrow; wczesniej byly dosuniete
   do prawej za triggerem. */
body.gm-page .gm-sub--oferta .gm-srt__dd .gm-dd__it{ justify-content:center; padding:6px 16px; }
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; }
/* ⚠️ Naprzemiennosc ZDJETA (Seb 19.09: „zdjecie zawsze po lewej"). Bylo: karty parzyste
   szly `row-reverse`, czyli kadr po prawej. Gdyby wracalo — to ta jedna regula. */
body.gm-page .gm-sub--oferta .gml:nth-child(even){ flex-direction:row; }

/* 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;
}
/* ⚠️ Lustrzane reguly kart parzystych ZNEUTRALIZOWANE (Seb 19.09) — po zdjeciu
   naprzemiennosci zdjecie jest zawsze po lewej, wiec plakietka, pasek ulubionych
   i paddingi tekstu musza byc TAKIE SAME jak w kartach nieparzystych. Zostawiam je
   jako jawne nadpisania (zamiast kasowac), zeby bylo widac, ze to swiadoma decyzja. */
body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__badge{ left:26.5px; right:auto; }

/* 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:calc(50% - 79px); right:auto; }
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 var(--ofr) 24px 30px; }
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 var(--ofr) 0 30px; }
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 var(--ofr) 0 30px; }
/* 18.09 (Seb): krotki opis w karcie ma sie czytac jak opis oferty na podstronie pojedynczej
   - Montserrat 300, 15/25, rgba(22,21,30,.86), BEZ rozstrzelenia liter. Wczesniej lecial
   z `letter-spacing:3.3px` (przepisane 1:1 z Figmy) i wygladal jak naglowek, nie jak akapit. */
body.gm-page .gm-sub--oferta .gml__desc{
  margin:0; color:rgba(22,21,30,.86);
  font-family:var(--sans); font-weight:300; font-size:15px; line-height:25px; letter-spacing:normal;
  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 */
  /* Na telefonie licznik i sortowanie zostaja w jednym wierszu — oba sa krotkie. */
  body.gm-page .gm-sub--oferta .esticrm-results-bar{ margin-top:34px !important; gap:12px !important; }
  body.gm-page .gm-sub--oferta .esticrm-results-sort,
  body.gm-page .gm-sub--oferta .esticrm-results-sort select{ font-size:11px !important; letter-spacing:1.6px !important; }
  /* 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:14px; line-height:23px; letter-spacing:normal; -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);
}
/* Numer licencji pod nazwiskiem opiekuna (Seb 18.09) — forma 1:1 z `.abt__lic` ze strony
   głównej: wersaliki, tracking .16em, mały stopień, przygaszony tusz. */
body.gm-page .gmo-card__lic{
  margin:clamp(8px,1.1vh,12px) 0 0; font-family:var(--sans); text-transform:uppercase;
  letter-spacing:.16em; font-weight:400; font-size:clamp(.66rem,.82vw,.78rem);
  line-height:1.6; color:rgba(22,21,30,.55);
}
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 */
/* „dzieło sztuki" jako WYRÓŻNIENIE (Seb 19.08): kursywa szeryfowa w bordo, o krok większa
   od reszty zdania — Cormorant ma niższą x-height niż Montserrat, więc przy 1 em wyglądałby
   na mniejszy. ⚠️ `line-height:1` jest konieczne: przy dziedziczonych 1,9 większy stopień
   rozpycha line-box wiersza, a od jego linii bazowej zależy pion całego zdania (liczy go JS
   znacznikiem `.abo-bl`) i styk kolażu z wordmarkiem. */
body.gm-page .abo-hero__note .em{
  font-family:var(--serif); font-style:italic; font-weight:500; color:#590B11;
  font-size:1.18em; line-height:1; letter-spacing:.01em;
}
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); }
/* ⚠️ `line-height:1.6` od 19.09: podpis ma teraz DWA wiersze („Founder & CEO" + licencja),
   a przy domyslnym `normal` siadaly na sobie (ta sama poprawka co przy `.abt__lic` na home). */
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);
  line-height:1.6; display:block; }
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); }
  /* na telefonie BEZ pogrubienia (Seb 22.08) — na desktopie lead zostaje w wadze 600,
     ale przy szerokości 390 px cała ta miara wyglądała jak wytłuszczony blok */
  body.gm-page .abo-fil__lead{ font-size:clamp(1.05rem,4.6vw,1.2rem); font-weight:400; }
  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; }
/* 18.09: to zdanie jest teraz H1 (widget nagłówka, nie akapit), więc kolor bordo musi mieć
   też ścieżkę przez `.elementor-widget-heading` — most z góry pliku wymusza `color:inherit`
   na `.elementor-heading-title` i bez tej reguły nagłówek brałby kolor sekcji. */
body.gm-page .usl-int__lead--h1,
body.gm-page .elementor-widget-heading .usl-int__lead--h1 .elementor-heading-title{ color:#590B11; }
/* H1 tej podstrony jest wiekszy niz lead z pozostalych hero (Seb 18.09) — to jedyne
   zdanie na pierwszym ekranie, wiec moze niesc caly ciezar. */
body.gm-page .usl-int__lead--h1{ margin-top:0; text-transform:none;
  font-size:clamp(1.55rem,3.25vw,46px); line-height:1.12; }

/* --- 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. */
/* ⚠️ `justify-content:center`, nie `space-between` (Seb 18.09): rozkladanie na krancach mialo
   sens, gdy sekcja trzymala dwa napisy jadace przy gorze i dole — po ich usunieciu zostala
   sama karta i wychodzila przyklejona do gory (zmierzone 1440: 81 px nad, 276 px pod).
   `min-height` zamiast `height`: na telefonie tresc jest wyzsza od ekranu i przy sztywnej
   wysokosci zostawala ucieta. */
/* ⚠️ 19.09: karta NIE jest juz przypieta (Seb: „foto i wideo nie ma byc jak karta").
   Przypieta jest teraz sekcja „Foto i wideo" pod nia — i to na NIA wjezdza „Co zyskujesz".
   Karta dalej wjezdza na pas wideo, bo to `usl-shot` jest `sticky`, nie ona. */
body.gm-page .usl-crd{
  position:relative; top:auto; z-index:2; background:#fff; color:var(--ink);
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  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;
}
/* 18.09 (Seb): akapit w karcie schodzi do ZWYKLEGO stopnia tresci podstrony (`--usl-body`,
   ten sam co `.usl-p` w hero) - przy 22 px i interlinii 1.19 czytal sie jak drugi naglowek. */
/* ⚠️ `--usl-body` jest zdefiniowane NA `.usl-int` (hero), a karta stoi w osobnej sekcji —
   poza tym scope zmienna nie istnieje i `font-size` schodzil do wartosci minimalnej (16 px
   zamiast 18). Dlatego tu clamp wprost, ten sam co w definicji zmiennej. */
/* 18.09 (Seb): teksty pod naglowkami na tej podstronie ida JEDNA miara — waga 300,
   17 px, interlinia 25 px. Dotyczy akapitu w karcie, akapitow hero i opisow wyroznikow. */
body.gm-page .usl-crd__p{
  margin:0; font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:17px; line-height:25px; letter-spacing:.005em;
}
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:17px; line-height:25px; }/* jedna miara z reszta tekstow pod naglowkami (Seb 18.09) */
  /* ł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;
}
/* Waga 500, nie 300 (Seb 19.09: „pogrub naglowki kategorii") — to jedyny naglowek kafla,
   a przy 300 przy tym stopniu czytal sie jak lead, nie jak tytul. */
body.gm-page .usl-cz__h{
  margin:clamp(14px,1.9vh,22px) 0 0; font-family:var(--sans); font-weight:500; 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; }
/* ⚠️ PRAWY ZAPAS NA PASEK BOCZNY: `.rail` wisi `fixed` przy prawej krawędzi (x 1387–1440
   przy 1440), a tytuły akordeonu dobiegały do 1397 px i wchodziły pod niego (zmierzone
   na /zglos-nieruchomosc/ ORAZ na /uslugi/sprzedaz-nieruchomosci/). Ta sama poprawka
   co w FAQ w §14 — kreski zostają na pełnej siatce, cofa się tylko tekst. */
body.gm-page .usl-bz__t{
  margin:0; padding:clamp(20px,3.2vh,34px) clamp(0px,4.1vw,58px) 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;
}
/* §85 (06.10) odpowiedź z kilku akapitów: między akapitami zwykły odstęp, pełny dolny tylko pod ostatnim */
body.gm-page .usl-faq__p:not(:last-child){ padding-bottom:.85em; }
/* 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; }
}


/* ===== 17. PODSTRONA /baza-wiedzy — AKTUALNOŚCI z filtrami kategorii (Seb 19.08) =========
   Lista i pasek filtrów rysuje shortcode `[gm_wpisy]` (mu-plugin), więc reguły muszą trafiać
   w markup PHP, nie w kontenery Elementora. Filtrowanie: js-pre.js, blok „/baza-wiedzy".
   ========================================================================================= */
body.gm-page .gm-sub--blog{
  position:relative; background:#fff; color:var(--ink);
  padding:clamp(122px,17vh,192px) var(--gut) clamp(80px,12vh,150px);
}
body.gm-page .gm-sub--blog .gm-sub__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 .gm-sub--blog .gm-sub__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,3.06vw,44px); line-height:1.16; letter-spacing:.06em;
}
body.gm-page .gm-sub--blog .gm-sub__lead{
  margin:clamp(14px,2vh,22px) 0 0; max-width:64ch;
  font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(.9rem,1.18vw,17px); line-height:1.45;
}
/* --- pasek filtrów --- */
body.gm-page .gmw__bar{
  display:flex; flex-wrap:wrap; gap:clamp(18px,2.6vw,38px);
  margin:clamp(34px,5vh,64px) 0 0; padding:0 0 clamp(14px,1.8vh,20px);
  border-bottom:1px solid rgba(22,21,30,.16);
}
body.gm-page .gmw__f{
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--sans); font-weight:400; font-size:clamp(.7rem,.87vw,12.5px);
  letter-spacing:.16em; text-transform:uppercase; color:rgba(22,21,30,.5);
  transition:color .3s;
}
body.gm-page .gmw__f:hover{ color:var(--ink); }
body.gm-page .gmw__f.is-on{ color:#590B11; }
/* --- siatka kart ---
   ⚠️ `.blog__card` przyszła z KARUZELI na stronie głównej i ma `flex:0 0 clamp(280px,26vw,368px)`
   — w siatce trzeba to wyzerować, inaczej karty trzymają szerokość slajdu i kolumny się rozjeżdżają. */
/* ⚠️ Prawy zapas na PASEK BOCZNY `.rail` (ikony akcji, `fixed` przy krawędzi okna, x 1387–1440
   przy 1440) — bez niego zasłaniał ~45 px zdjęcia trzeciej karty w rzędzie. Ten sam chwyt
   co w wierszach FAQ; kreska paska filtrów zostaje na pełnej siatce. */
body.gm-page .gmw__grid, body.gm-page .gmp__relgrid{
  margin-right:clamp(0px,4vw,58px);
}
body.gm-page .gmw__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.2vw,32px); margin-top:clamp(28px,4vh,48px);
}
body.gm-page .gmw__card{ flex:1 1 auto; width:auto; max-width:none; }
body.gm-page .gmw__card[hidden]{ display:none; }
body.gm-page .gmw__card .blog__media{ display:block; aspect-ratio:4/3; overflow:hidden; }
body.gm-page .gmw__card .blog__media img{ width:100%; height:100%; object-fit:cover; display:block; }
body.gm-page .gmw__card .blog__body{
  display:flex; flex-direction:column; gap:clamp(8px,1vh,12px);
  padding:clamp(18px,2.2vw,28px);
}
body.gm-page .gmw__meta{
  display:flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:clamp(.62rem,.76vw,11px); letter-spacing:.16em;
  text-transform:uppercase;
}
body.gm-page .gmw__kat{ color:#590B11; }
body.gm-page .gmw__date{ color:rgba(22,21,30,.45); }
body.gm-page .gmw__card .blog__ct{
  font-family:var(--sans); font-weight:400; color:var(--ink);
  font-size:clamp(1rem,1.32vw,19px); line-height:1.3;
}
body.gm-page .gmw__card .blog__ex{
  font-family:var(--sans); font-weight:300; color:rgba(22,21,30,.72);
  font-size:clamp(.85rem,1.04vw,15px); line-height:1.5;
}
body.gm-page .gmw__card .blog__more{
  margin-top:auto; padding-top:clamp(8px,1.2vh,14px);
  font-family:var(--sans); font-size:clamp(.66rem,.83vw,12px); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink);
}
body.gm-page .gmw__empty{
  margin:clamp(40px,7vh,80px) 0 0; font-family:var(--sans); font-weight:300;
  font-size:clamp(.9rem,1.18vw,17px); color:rgba(22,21,30,.6);
}

/* ===== 18. POJEDYNCZY WPIS (szablon gm-front/single-post.php) ============================ */
body.gm-page .gmp{
  display:block; background:#fff; color:var(--ink);
  padding:clamp(122px,17vh,192px) var(--gut) clamp(70px,10vh,120px);
}
/* ⚠️ Naglowek i tresc wpisu ida na PELNA siatke (Seb 19.09: „tresc nie jest na pelna
   szerokosc"). Bylo: naglowek 900 px, tresc 760 px, a zdjecie 1354 px — kolumna tekstu
   wygladala przy nim jak pomylka. Uwaga na przyszlosc: 1354 px przy 18 px pisma to ok. 150
   znakow w wierszu, czyli duzo powyzej miary czytelniczej (65-80). Stad podbity stopien
   i wieksza interlinia nizej — jesli wpisy okaza sie meczace, wracamy do ~1000 px. */
body.gm-page .gmp__head{ max-width:none; }
body.gm-page .gmp__kicker{
  display:inline-block; font-family:var(--serif); font-style:italic; text-transform:uppercase;
  letter-spacing:.12em; color:#590B11; font-size:clamp(.68rem,.9vw,13px); text-decoration:none;
}
body.gm-page .gmp__h1{
  margin:clamp(12px,1.8vh,20px) 0 0; font-family:var(--sans); font-weight:300;
  text-transform:uppercase; color:var(--ink);
  font-size:clamp(1.4rem,3.06vw,44px); line-height:1.16; letter-spacing:.06em;
}
body.gm-page .gmp__meta{
  margin:clamp(14px,2vh,22px) 0 0; display:flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:clamp(.66rem,.83vw,12px); letter-spacing:.16em;
  text-transform:uppercase; color:rgba(22,21,30,.5);
}
body.gm-page .gmp__dot{ color:rgba(22,21,30,.3); }
body.gm-page .gmp__fig{ margin:clamp(34px,5vh,64px) 0 0; }
body.gm-page .gmp__fig img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
/* Treść: JEDNA miara czytelnicza — wpisy pisze się w zwykłym edytorze, więc stylujemy
   elementy, nie klasy (redaktor nie ma jak nadać klas). */
body.gm-page .gmp__body{
  max-width:none; margin:clamp(34px,5vh,60px) 0 0;
  font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(1rem,1.32vw,19px); line-height:1.7;
}
body.gm-page .gmp__body p{ margin:0 0 1.15em; color:inherit; }
body.gm-page .gmp__body .gm-post__lead{
  font-size:clamp(1.05rem,1.53vw,22px); line-height:1.45; font-weight:400;
  margin-bottom:1.4em;
}
body.gm-page .gmp__body h2{
  margin:clamp(34px,4.6vh,54px) 0 clamp(12px,1.6vh,18px);
  font-family:var(--sans); font-weight:300; text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(1.15rem,1.94vw,28px); line-height:1.25;
}
body.gm-page .gmp__body h3{
  margin:clamp(26px,3.4vh,38px) 0 clamp(10px,1.4vh,14px);
  font-family:var(--serif); font-weight:400; color:#590B11;
  font-size:clamp(1.05rem,1.6vw,23px); line-height:1.25;
}
body.gm-page .gmp__body ul, body.gm-page .gmp__body ol{ margin:0 0 1.15em; padding-left:1.3em; }
body.gm-page .gmp__body li{ margin:0 0 .5em; }
body.gm-page .gmp__body a{ color:#590B11; text-underline-offset:3px; }
body.gm-page .gmp__body blockquote{
  margin:clamp(26px,3.6vh,42px) 0; padding:0 0 0 clamp(18px,2.2vw,30px);
  border-left:1px solid #590B11; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem,1.53vw,22px); line-height:1.4;
}
body.gm-page .gmp__body img{ display:block; width:100%; height:auto; margin:clamp(26px,3.6vh,42px) 0; }
body.gm-page .gmp__foot{ margin:clamp(40px,6vh,72px) 0 0; }
body.gm-page .gmp__back{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);
  font-family:var(--sans); font-size:clamp(.7rem,.87vw,12.5px); letter-spacing:.16em;
  text-transform:uppercase; transition:color .3s;
}
body.gm-page .gmp__back:hover{ color:#590B11; }
body.gm-page .gmp__rel{ margin:clamp(60px,9vh,110px) 0 0; border-top:1px solid rgba(22,21,30,.16); }
body.gm-page .gmp__relh{
  margin:clamp(28px,4vh,48px) 0 0; font-family:var(--sans); font-weight:300;
  text-transform:uppercase; letter-spacing:.06em; font-size:clamp(1.15rem,1.94vw,28px);
}
body.gm-page .gmp__relgrid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.2vw,32px); margin-top:clamp(22px,3vh,34px);
}

@media(max-width:900px){
  body.gm-page .gmw__grid, body.gm-page .gmp__relgrid{ grid-template-columns:1fr; margin-right:0; }
  body.gm-page .gm-sub--blog{ padding-top:clamp(96px,14vh,130px); }
  body.gm-page .gmw__bar{ gap:16px 22px; }
  body.gm-page .gm-sub--blog .gm-sub__h, body.gm-page .gmp__h1{ font-size:26px; line-height:1.22; }
  body.gm-page .gmp{ padding-top:clamp(96px,14vh,130px); }
  body.gm-page .gmp__body{ font-size:15.5px; line-height:1.6; }
  body.gm-page .gmp__body h2{ font-size:20px; }
  body.gm-page .gmp__body h3{ font-size:18px; }
}


/* ===== 19. RUNDA POPRAWEK 20.08 (uwagi Seba po przeglądzie na telefonie) ================= */

/* --- /o-nas, hero: zdanie przewodnie było za duże i za rzadkie (Seb 20.08) ---
   Było 20 px / interlinia 1,9 (38 px). ⚠️ Zmieniamy TYLKO stopień i interlinię — pozycja
   pionowa liczy się z linii bazowej (JS `fitHero`), a prawa krawędź trzyma się `right:0`,
   więc styk z „.COM" i równanie z dołem „GALERII" zostają nietknięte. */
body.gm-page .abo-hero__note{ font-size:17px; line-height:1.5; }

/* Pierwszy ekran /uslugi/sprzedaz-nieruchomosci na 100vh: wysokość pasa liczy JS
   (blok „PIERWSZY EKRAN NA 100vh"), tu tylko oddajemy mu sterowanie proporcją. */
body.gm-page .usl-shot.is-fit .usl-shot__video,
body.gm-page .usl-shot.is-fit .usl-shot__img img{
  aspect-ratio:auto; height:var(--usl-shot-h);
}

@media(max-width:900px){
  /* --- NAGŁÓWKI SEKCJI NA PODSTRONACH = jak na stronie głównej (Seb 20.08) ---
     Na home nagłówek sekcji ma na telefonie 28,8 px (zmierzone na `.bnh__h`), a podstrony
     zjechały do 22–24 px i wyglądały na inną stronę. Jeden stopień dla wszystkich. */
  body.gm-page .usl__h1,
  body.gm-page .usl-bz__h,
  body.gm-page .usl-faq__h,
  body.gm-page .usl-om__h,
  body.gm-page .usl-cta__h,
  body.gm-page .abo-why__h,
  body.gm-page .abo-ref__h,
  body.gm-page .gm-sub--blog .gm-sub__h,
  body.gm-page .gmp__h1{ font-size:28.8px; line-height:1.14; }
  /* H1 podstrony usług ma być POGRUBIONY (Seb 20.08) — na telefonie Light 300 gubił się
     przy tym stopniu, a to jest główny nagłówek strony.
     ⚠️ 600, nie 500: przy 500 grubość kresek wychodziła TAKA SAMA jak w bordowym leadzie obok
     (zmierzone na zrzucie: 0,097 vs 0,10 grubości do stopnia) i „pogrubienia" nie było widać.
     Montserrat ma u nas wagi 200–700, więc 600 realnie się dociąga. */
  /* ⚠️ ZMIANA DECYZJI 31.08: H1 podstron na telefonie NIE jest już pogrubiony.
     Seb o `/uslugi/fotografia-i-wideo/`: „nagłówek do zmiany, tak jak na innych
     podstronach, a nie boldem znowu". Pogrubienie z 20.08 zostawiało rozjazd — cztery
     podstrony miały 600, a `/uslugi/` i `/dolacz-do-nas/` 300. Teraz wszystkie mają
     TĘ SAMĄ wagę 300, czyli tę samą co na desktopie; zmienia się wyłącznie stopień. */
  body.gm-page .usl__h1{ font-weight:300; }
  /* zdanie przewodnie /o-nas kończyło się DOKŁADNIE na krawędzi kolażu (zmierzone 0 px
     odstępu na 360 i 390) — po zmniejszeniu stopnia brakowało oddechu przed zdjęciami */
  body.gm-page .abo-hero__note{ margin-bottom:clamp(14px,4vw,24px); }
  /* nagłówek sekcji CTA na /o-nas to całe zdanie — przy 28,8 px rozlewa się na sześć
     wierszy, więc dostaje stopień pośredni (było 17,9 px, czyli wyraźnie za mało) */
  body.gm-page .abo-cta__h{ font-size:24px; line-height:1.3; }

  /* --- OŚ PROCESU: nazwa etapu i numer DO LEWEJ, tak jak opis pod spodem (Seb 20.08) ---
     ⚠️ `transform-origin` musi iść razem z wyrównaniem: powiększany napis rósł od ŚRODKA
     i przy równaniu do lewej odjeżdżałby w bok zamiast rosnąć w miejscu. */
  body.gm-page .abo-prc__nm{ text-align:left; }
  body.gm-page .abo-prc__rail.js-on .abo-prc__nm,
  body.gm-page .abo-prc__rail.js-on .abo-prc__step.is-cur .abo-prc__nm{ transform-origin:left top; }
  body.gm-page .abo-prc__n{ text-align:left; }

  /* --- odstęp między osią procesu a „Te cztery rzeczy robimy inaczej" (Seb 20.08: za mały) --- */
  body.gm-page .abo-prc{ padding-bottom:clamp(56px,13vw,74px); }
  body.gm-page .abo-why{ padding-top:clamp(64px,15vw,92px); }
  body.gm-page .usl-prc{ padding-bottom:clamp(56px,13vw,74px); }
}

@media(max-width:640px){
  /* --- „Co zyskujesz" ma WLATYWAĆ JAKO KARTA także na telefonie (Seb 20.08) ---
     Na desktopie karta „Sprzedaż z zasadami" jest przypięta i szara sekcja wjeżdża na nią.
     Na telefonie karta wracała do `position:relative` (bo przy stałej wysokości ucinałaby
     akapity), więc efektu nie było.
     ⚠️ `top` USTAWIA JS (blok „PIERWSZY EKRAN NA 100vh"): dla karty niższej od ekranu 0,
     dla wyższej wartość UJEMNA (`vh − wysokość`), żeby przyklejał się jej DÓŁ z odnośnikiem.
     Samo `bottom:0` nie wystarcza — karta zatrzymuje się wtedy tylko na chwilę i szara sekcja
     jedzie ZA nią zamiast NA nią (zmierzone: przy y=1200 karta już odjeżdżała w górę). */
  /* ⚠️⚠️ Karta ZOSTAJE przypieta na telefonie (przywrocone 20.09 po nieudanej probie).
     Zdjecie `sticky` zabralo jej wjazd na pas wideo z hero — pierwsza sekcja przestawala
     dzialac. Prawdziwa przyczyna „prześwitujacych wyroznikow" przy sekcji „Po publikacji"
     byla gdzie indziej: tamta sekcja miala na telefonie `position:static`, a `z-index`
     dziala TYLKO na elementach pozycjonowanych — wiec jej warstwa (5) byla ignorowana
     i przypieta karta (2) malowala sie NAD nia. Patrz §53. */
  body.gm-page .usl-crd{ position:sticky; bottom:auto; top:0; }
}


/* ===== 20. LISTING OFERT: przeglądanie zdjęć w karcie + wskaźnik scrolla na ofercie (22.08) ===
   Markup dokłada JS (blok „LISTING OFERT — PRZEGLĄDANIE ZDJĘĆ W KARCIE"), kadry lecą
   z `/wp-json/gm/v1/gallery`. Wtyczka b4m zostaje nietknięta. */
/* `touch-action:pan-y` zostawia stronie pionowy scroll, ale poziomy gest oddaje nam;
   bez tego przeglądarka traktuje machnięcie w bok jak własną nawigację/scroll. */
body.gm-page .gml__media{ position:relative; touch-action:pan-y; }
body.gm-page .gml__media img{ -webkit-user-drag:none; user-select:none; }
body.gm-page .gmg{ position:absolute; inset:0; z-index:2; pointer-events:none; }
/* Kolejne kadry leżą JEDEN NA DRUGIM nad oryginalnym <img> wtyczki (ten trzyma wysokość kadru,
   więc go nie ruszamy). Wygaszony kadr musi mieć `visibility:hidden`, inaczej przy `opacity:0`
   dalej łapie kursor i psuje wskazanie. */
body.gm-page .gmg__i{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .45s ease, visibility .45s;
}
body.gm-page .gmg__i.is-off{ opacity:0; visibility:hidden; }
body.gm-page .gml__media > img.is-off{ opacity:0; }
body.gm-page .gml__media > img{ transition:opacity .45s ease; }
/* strzałki: pokazują się po najechaniu na kartę, a na dotyku są widoczne od razu */
/* STRZAŁKI ZDJĘĆ NA KARCIE LISTINGU = 1:1 strzałki slidera ofert z home (`.ofr__arrow`,
   Seb 01.10): sam cienki chevron z cieniem, BEZ kółka, przy krawędziach kadru.
   Wcześniej: kółko (na telefonie BIAŁE z kremowym chevronem = „biała kropka") i prawa
   strzałka w ~70 % szerokości — bo odstęp na rail obowiązywał też na telefonie, gdzie
   rail NIE stoi z boku zdjęcia (≤900 px idzie na całą szerokość).
   ⚠️ Desktop (>900): prawy pas kadru zajmuje `.gml__rail` wtyczki (79 px, z-index 3) —
   strzałka „następne" stoi tuż PRZED nim, inaczej klik trafia w rail. */
body.gm-page .gmg__nav{
  position:absolute; inset:0; z-index:4;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(4px,1.2vw,20px);
  opacity:0; transition:opacity .3s ease;
}
@media(min-width:901px){
  body.gm-page .gm-sub--oferta .gmg__nav{ padding-right:calc(79px + clamp(4px,.6vw,10px)); }
}
body.gm-page .gml:hover .gmg__nav, body.gm-page .gmg__nav:focus-within{ opacity:1; }
body.gm-page .gmg__a{
  pointer-events:auto; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(38px,3.2vw,52px); height:clamp(38px,3.2vw,52px); padding:0;
  background:none; border:none; border-radius:0; color:#fff; opacity:.85;
  transition:opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
body.gm-page .gmg__a 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 .gmg__a--n{ transform:scaleX(-1); }
body.gm-page .gmg__a:hover{ opacity:1; }
body.gm-page .gmg__a--p:hover{ transform:translateX(-4px); }
body.gm-page .gmg__a--n:hover{ transform:scaleX(-1) translateX(-4px); }
/* kropki z liczbą zdjęć wyrzucone z kart listingu (Seb 01.10) — patrz js-pre.js */
@media(hover:none){
  body.gm-page .gmg__nav{ opacity:1; }
}

/* --- wskaźnik przewijania na kadrze hero pojedynczej oferty --- */
body.gm-page .gmo-scroll{
  position:absolute; left:50%; bottom:clamp(96px,14vh,132px); transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--cream); pointer-events:none;
  transition:opacity .5s ease, transform .5s ease;
}
body.gm-page .gmo-scroll.is-off{ opacity:0; transform:translate(-50%,12px); }
body.gm-page .gmo-scroll__mouse{
  display:block; width:26px; height:42px; border:1px solid rgba(244,244,237,.75); border-radius:14px;
  position:relative;
}
/* kółko myszki zjeżdża w dół i gaśnie — pętla 1,9 s */
body.gm-page .gmo-scroll__wheel{
  position:absolute; left:50%; top:9px; width:2px; height:7px; border-radius:2px;
  background:var(--cream); transform:translateX(-50%);
  animation:gmoWheel 1.9s cubic-bezier(.4,0,.2,1) infinite;
}
/* ⚠️ Napis idzie w PEŁNEJ bieli z cieniem: przy `opacity:.8` kontrast na jasnym kadrze
   spadał do ~3,9:1 (zmierzone na zrzucie), czyli poniżej progu czytelności dla tak małego
   pisma; sam wskaźnik leży dodatkowo na niejednorodnym tle zdjęcia. */
body.gm-page .gmo-scroll__t{
  font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.55);
}
body.gm-page .gmo-scroll__mouse{ box-shadow:0 1px 8px rgba(0,0,0,.35); }
@keyframes gmoWheel{
  0%{ transform:translate(-50%,0); opacity:0; }
  22%{ opacity:1; }
  70%{ transform:translate(-50%,14px); opacity:0; }
  100%{ transform:translate(-50%,14px); opacity:0; }
}
/* ⚠️ Przy `prefers-reduced-motion` sam wskaźnik zostaje (jest informacją), ale bez pętli */
@media(prefers-reduced-motion:reduce){
  body.gm-page .gmo-scroll__wheel{ animation:none; opacity:.9; }
}
@media(max-width:900px){
  body.gm-page .gmo-scroll{ bottom:clamp(150px,22vh,210px); }
  body.gm-page .gmo-scroll__mouse{ width:22px; height:36px; }
  body.gm-page .gmo-scroll__t{ font-size:10px; }
}


/* ===== 21. OPINIE: skąd pochodzą (Seb 22.08) + sygnał przewijania kart „Te cztery rzeczy" ===
   Przypis pod opinią: pięć gwiazdek i monochromatyczne „G". Celowo w kolorze tekstu i w małym
   stopniu — to ma być potwierdzenie źródła, nie baner Google w środku premium układu. */
body.gm-page .abo-ref__src{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(10px,1.4vw,18px); margin-top:clamp(16px,2.4vh,26px);
}
body.gm-page .abo-ref__stars{ display:inline-flex; gap:3px; }
body.gm-page .abo-ref__star{ width:13px; height:13px; fill:#590B11; display:block; }
body.gm-page .abo-ref__gwrap{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-weight:300; font-size:clamp(.66rem,.83vw,12px);
  letter-spacing:.14em; text-transform:uppercase; color:rgba(22,21,30,.55);
}
body.gm-page .abo-ref__g{ width:14px; height:14px; fill:rgba(22,21,30,.55); display:block; }

/* Karty „Te cztery rzeczy" przewijają się w bok od dawna, ale nic tego nie zapowiadało
   (Seb 22.08 zgłosił, że tego nie widać). Podpowiedź pod torem mówi wprost: jest dalej.
   ⚠️ Ukrycie na desktopie MUSI stać PRZED media query — ta sama specyficzność, więc reguła
   postawiona niżej w pliku wygrywa i podpowiedź zniknęłaby także na telefonie. */
body.gm-page .abo-why__hint{ display:none; }
@media(max-width:900px){
  body.gm-page .abo-why__row{ scroll-padding-left:var(--abo-pad); }
  body.gm-page .abo-why__hint{
    display:flex; align-items:center; gap:10px; margin:clamp(14px,2.4vw,20px) 0 0;
    font-family:var(--sans); font-weight:300; font-size:11px; letter-spacing:.16em;
    text-transform:uppercase; color:rgba(22,21,30,.45);
  }
  body.gm-page .abo-why__hint::after{
    content:""; flex:1 1 auto; height:1px; background:rgba(22,21,30,.16);
  }
  body.gm-page .abo-why__hint svg{ width:22px; height:10px; fill:none; stroke:currentColor; stroke-width:1.2; }
}


/* Wersja „kafle jadą na scrollu strony" (22.08) ZDJĘTA na życzenie Seba tego samego dnia —
   wraca zwykły slider: swipe + snap, sterowany palcem. Historia w handoffie (pułapka: zapasu
   dla `sticky` nie daje ani padding rodzica, ani margines elementu — potrzebny spacer). */


/* ===== 22. BRAKUJĄCE PODSTRONY: /kontakt/, /zglos-nieruchomosc/, /uslugi/ (26.08) =====
   Zasada tej partii: hero (`usl-int*`), CTA (`usl-cta*`) i akordeon (`usl-bz*`) są REUŻYTE
   z /uslugi/sprzedaz-nieruchomosci — tu stoi tylko to, czego wcześniej nie było.
   Stopnie pisma, kolory i przyciski trzymają się §14, żeby podstrony nie wyglądały
   na doklejone: kicker = Cormorant italic bordo 13 px, H2 = Montserrat 300 caps 40 px
   / ls .06em, lead = 17 px / lh 1,45, przycisk = ramka 1 px, ls .2em, hover na bordo.
   ==================================================================================== */

/* ---------- 22.1 FORMULARZ NA PODSTRONACH (`.gmo-form.gmf`) ----------
   Cały wygląd pól (ramki, etykiety zastąpione placeholderem, checkbox zgody, przycisk)
   ciągnie z §10 — reguł napisanych pod formularz pojedynczej oferty. Tu dochodzi tylko
   szersza siatka: oferta ma dwie kolumny (59,6 / 40,4), a te formularze potrzebują też
   trzeciej części wiersza (metraż / pokoje / cena), więc siatka idzie na SZEŚĆ kolumn.
   ⚠️ Specyficzność musi bić reguły z §10 — stąd `.gmo-form.gmf` (0,4,x), nie samo `.gmf`. */
body.gm-page .gmo-form.gmf .wpforms-field-container{
  grid-template-columns:repeat(6,1fr); column-gap:clamp(10px,1.2vw,18px);
  row-gap:clamp(12px,1.4vw,20px);
}
body.gm-page .gmo-form.gmf div.gmo-f--full{ grid-column:1 / -1 !important; }
body.gm-page .gmo-form.gmf div.gmo-f--half{ grid-column:span 3 !important; }
body.gm-page .gmo-form.gmf div.gmo-f--third{ grid-column:span 2 !important; }
body.gm-page .gmo-form.gmf div.gmo-f--rodo{ grid-column:1 / -1 !important; margin-top:clamp(4px,.6vw,10px) !important; }
/* Przycisk do LEWEJ krawędzi pól, nie na środek. §10 centruje go w karcie oferty (wąska
   kolumna), ale tutaj pola są lewo-wyrównane i wyśrodkowany przycisk wyglądał na zgubiony. */
body.gm-page .gmo-form.gmf .wpforms-submit-container{ justify-content:flex-start !important; }
/* ⚠️ `hyphens:auto` z kitu dzieli polskie wyrazy wg słownika angielskiego („dany-ch",
   „przedsta-wienia", „NIERU-CHOMOŚCI") — wygląda to na literówkę. Dotyczy NIE TYLKO klauzuli
   zgody: łamany był też wielowierszowy placeholder pola opisu, więc reguła idzie na cały
   formularz, a nie na samą etykietę pola wyboru. */
body.gm-page .gmo-form,
body.gm-page .gmo-form input,
body.gm-page .gmo-form textarea,
body.gm-page .gmo-form label{ hyphens:none; -webkit-hyphens:none; }

/* Nagłówki grup pól. Polem ich zrobić NIE MOŻNA: jedyne pole opisowe w WPForms Lite to
   „Internal Information", a ono jest zdejmowane z frontu filtrem
   `remove_internal_fields_on_front_end`. Dlatego nagłówek rysuje `::before` PIERWSZEGO pola
   w grupie — klasę nadaje definicja formularza (`build_forms.py`). */
body.gm-page .gmo-form.gmf div.gmf-sec1::before,
body.gm-page .gmo-form.gmf div.gmf-sec2::before{
  display:block; margin:0 0 clamp(14px,1.6vw,22px);
  padding-bottom:clamp(10px,1.1vw,15px); border-bottom:1px solid rgba(22,21,30,.16);
  font-family:var(--serif); font-weight:400; font-style:normal; text-transform:uppercase;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
  font-size:clamp(1rem,1.5vw,22px); letter-spacing:.06em; color:#590B11;
}
body.gm-page .gmo-form.gmf div.gmf-sec1::before{ content:"/01. Nieruchomość"; }
body.gm-page .gmo-form.gmf div.gmf-sec2::before{
  content:"/02. Twoje dane"; margin-top:clamp(24px,3.2vw,46px);
}
/* pole „telefon" i „e-mail" są w tej samej parze co na ofercie — placeholder niesie etykietę,
   więc gwiazdka wymagalności musi być widoczna PRZY placeholderze, nie w schowanej etykiecie */
/* ⚠️ PADDING PIONOWY NA `select` UCINA TEKST. WPForms narzuca polom stałą wysokość
   (`div.wpforms-container-full input, select{height:var(--wpforms-field-size-input-height)}`
   = 43 px), więc padding 16 px góra/dół zostawia 9 px pola na treść. `input` renderuje wtedy
   tekst i tak wyśrodkowany, ale `select` z `appearance:none` sadza go na GÓRZE content-boxa
   i dolna połowa liter wychodzi poza pole (złapane na zrzutach 1440 i 390).
   Lekarstwo: zero paddingu pionowego — natywny select centruje wtedy tekst sam. */
body.gm-page .gmo-form.gmf .wpforms-field select{
  width:100% !important; max-width:none !important; box-sizing:border-box;
  padding:0 44px 0 18px !important; line-height:1.2;
  border:1px solid #D6D6D2 !important; border-radius:0 !important;
  background:#fff !important; box-shadow:none !important; appearance:none; -webkit-appearance:none;
  font-family:var(--sans) !important; font-weight:400 !important; font-size:.72rem !important;
  letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316151e' stroke-width='1.3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 16px center !important;
  background-size:16px 16px !important;
}
/* Dopóki wybrana jest opcja-podpowiedź, `select` ma być SZARY jak placeholdery inputów obok
   (na zrzucie 1440 „RODZAJ NIERUCHOMOŚCI" był wyraźnie ciemniejszy od „MIEJSCOWOŚĆ").
   ⚠️ `:invalid` tu nie zadziała — łapie tylko pola z `required`, a połowa selectów go nie ma.
   `:has(option[value=""]:checked)` czyta realny stan wyboru. */
body.gm-page .gmo-form.gmf .wpforms-field select{ color:var(--ink) !important; }
body.gm-page .gmo-form.gmf .wpforms-field select:has(option[value=""]:checked){ color:#8A8A8A !important; }
body.gm-page .gmo-form.gmf .wpforms-field select:focus{ outline:none; border-color:#590B11 !important; }

/* ---------- 22.2 /kontakt/ — dane kontaktowe | formularz ----------
   Ta sama geometria kolumn co sekcja „Bezpieczeństwo transakcji" (§14): wąska kolumna opisu
   po lewej, szeroka zawartość po prawej. Różnica: tu jest realny odstęp między kolumnami,
   bo prawa kolumna ma własne ramki pól, a nie kreski ciągnące się do krawędzi. */
body.gm-page .kon{
  position:relative; background:#fff; color:var(--ink);
  padding:clamp(60px,9vh,110px) clamp(18px,3vw,44px) clamp(80px,13vh,150px);
  display:grid; grid-template-columns:40fr 60fr; align-items:start;
  column-gap:clamp(32px,4.4vw,72px);
}
body.gm-page .kon__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 .kon__h,
body.gm-page .kon__fh{
  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 .kon__lead{
  margin:clamp(18px,2.6vh,30px) 0 0; max-width:34ch;
  font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(.9rem,1.18vw,17px); line-height:1.45;
}

/* lista danych — kreski jak w akordeonie, etykieta w wersalikach, wartość w mierze tekstu */
body.gm-page .kon-list{
  display:block; margin-top:clamp(26px,3.6vh,44px); border-top:1px solid rgba(22,21,30,.16);
}
body.gm-page .kon-list__row{
  display:flex; align-items:baseline; gap:clamp(14px,1.6vw,26px);
  padding:clamp(15px,2vh,21px) 0; border-bottom:1px solid rgba(22,21,30,.16);
}
body.gm-page .kon-list__lbl{
  flex:0 0 clamp(88px,9vw,124px);
  font-family:var(--sans); font-weight:400; font-size:clamp(.62rem,.76vw,11px);
  letter-spacing:.2em; text-transform:uppercase; color:rgba(22,21,30,.5);
}
body.gm-page .kon-list__val{
  flex:1 1 auto; min-width:0;
  font-family:var(--sans); font-weight:300; font-size:clamp(.88rem,1.11vw,16px);
  line-height:1.45; color:var(--ink);
}
body.gm-page .kon-list__val a{ color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(22,21,30,.25); transition:color .3s, border-color .3s; }
body.gm-page .kon-list__val a:hover{ color:#590B11; border-color:#590B11; }
/* druga linia wartości (numer licencji) — przypis, nie równorzędna informacja */
body.gm-page .kon-list__sub{
  display:block; margin-top:5px; font-size:clamp(.62rem,.76vw,11px);
  letter-spacing:.16em; text-transform:uppercase; color:rgba(22,21,30,.45);
}
body.gm-page .kon__social{
  display:flex; align-items:center; gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(24px,3.2vh,38px);
}
body.gm-page .kon__social a{ display:block; color:rgba(22,21,30,.55); transition:color .3s; }
body.gm-page .kon__social a:hover{ color:#590B11; }
body.gm-page .kon__social svg{ width:17px; height:17px; fill:currentColor; display:block; }

body.gm-page .kon__formcol{ display:block; }
body.gm-page .kon__formcol .gmo-form{ margin-top:clamp(24px,3.4vh,40px); }

/* ---------- 22.3 /kontakt/ — obszar działania (ciemny pas z kaflami miast) ----------
   Jedyna ciemna sekcja tej podstrony: daje rytm biel → ciemność → biel, którego strona
   pilnuje wszędzie indziej. ⚠️ Sekcja MUSI być wpisana do mapy `HD` w js-pre.js
   (`konLok: 'dark'`), inaczej nagłówek zostaje w wariancie jasnym i czarne logo ginie. */
body.gm-page .kon-lok{
  position:relative; background:#16151e; color:var(--cream);
  padding:clamp(72px,11vh,130px) clamp(18px,3vw,44px) clamp(80px,12vh,140px);
}
body.gm-page .kon-lok__head{ display:block; max-width:760px; }
body.gm-page .kon-lok__kicker{
  display:block; font-family:var(--serif); font-style:italic; text-transform:uppercase;
  letter-spacing:.12em; color:rgba(244,244,237,.72); font-size:clamp(.68rem,.9vw,13px);
}
body.gm-page .kon-lok__h{
  margin:clamp(10px,1.6vh,18px) 0 0; font-family:var(--sans); font-weight:300;
  text-transform:uppercase; color:var(--cream);
  font-size:clamp(1.4rem,2.75vw,40px); line-height:1.25; letter-spacing:.06em;
}
/* ⚠️ Kolor akapitu MUSI iść przez `.elementor-widget-text-editor p` — reguła z góry pliku
   (`…text-editor p{color:inherit}`) ma specyficzność (0,2,2) i zjada zwykłe `.klasa{color}`. */
body.gm-page .elementor-widget-text-editor p.kon-lok__p{
  margin:clamp(18px,2.4vh,28px) 0 0; max-width:62ch;
  font-family:var(--sans); font-weight:300; color:rgba(244,244,237,.72);
  font-size:clamp(.88rem,1.11vw,16px); line-height:1.6;
}
body.gm-page .kon-lok__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.1vw,16px);
  margin-top:clamp(34px,5vh,64px);
}
body.gm-page .kon-lok__tile{
  position:relative; overflow:hidden; background:rgba(244,244,237,.06);
}
/* ⚠️ Sam `text-shadow` NIE wystarcza: „Koszalin" siedzi na białej elewacji, a „Kołobrzeg"
   i „Darłowo" na jasnej wodzie — biały napis ginął (złapane na zrzucie 1440).
   ⚠️ Scrim TYLKO od dołu też nie: nazwa stoi w pionowym ŚRODKU kafla, gdzie gradient
   ma jeszcze niskie krycie (sprawdzone na poprawionym zrzucie). Stąd nakładka na CAŁY
   kadr, lekko mocniejsza u dołu — zdjęcie zostaje fakturą, nie tematem. */
/* ⚠️ Napis WYŚRODKOWANY na kadrze był nie do uratowania: „Koszalin" leży na białej elewacji,
   „Darłowo" na jasnych dachach, a Cormorant 400 z trackingiem to cienkie kreski. Próbowane
   i odrzucone po zrzutach: sam `text-shadow`, scrim od dołu, pełna nakładka, miękka plama
   w centrum — przy krycu wystarczającym do kontrastu zdjęcie robiło się czarną plamą.
   Nazwa idzie więc do DOLNEGO ROGU, gdzie gradient jest najmocniejszy — dokładnie tak,
   jak etykiety na kaflach kategorii i wpisów na stronie głównej. */
body.gm-page .kon-lok__tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(9,9,11,.10) 34%, rgba(9,9,11,.86) 100%);
  transition:opacity .6s ease;
}
body.gm-page .kon-lok__tile:hover::after{ opacity:.75; }
body.gm-page .kon-lok__tile > .elementor-widget-image{ display:block; width:100%; }
body.gm-page .kon-lok__img img{
  display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover;
  filter:saturate(.32) brightness(.78); transition:transform .8s cubic-bezier(.16,1,.3,1), filter .6s ease;
}
body.gm-page .kon-lok__tile:hover .kon-lok__img img{ transform:scale(1.05); filter:saturate(.55) brightness(.9); }
/* Nazwa leży NA kadrze, więc pozycjonujemy WRAPPER widgetu nagłówka.
   ⚠️ TYPOGRAFIA TEŻ MUSI SIEDZIEĆ NA WRAPPERZE, nie na `h3`. Elementor ma regułę
   `body.gm-page .elementor-widget-heading .elementor-heading-title{font-size:inherit;
   font-family:inherit}` o specyficzności (0,3,1) — zwykłe `.klasa h3{…}` to (0,2,2)
   i przegrywa, a `inherit` ściąga wtedy krój z <body> (JetBrains Mono 16 px).
   Zmierzone przed poprawką: nazwa miasta 16 px monospace zamiast 28 px Cormorant.
   Ta sama pułapka co przy kolorze akapitów w widgecie tekstu (§14). */
body.gm-page .kon-lok__name{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-start;
  padding:clamp(15px,1.7vw,25px) clamp(16px,1.9vw,28px); pointer-events:none;
  font-family:var(--serif); font-weight:400; text-transform:uppercase;
  color:var(--cream); font-size:clamp(1rem,1.94vw,28px); letter-spacing:.14em; line-height:1;
  text-shadow:0 1px 16px rgba(0,0,0,.6);
}
body.gm-page .kon-lok__name h3{ margin:0; font:inherit; letter-spacing:inherit; color:inherit; }

/* ---------- 22.4 /zglos-nieruchomosc/ — trzy kroki ----------
   Numer w Cormorant italic w bardzo jasnej szarości (jak numery na osi procesu) —
   ma być znakiem wodnym pod tytułem, nie drugim nagłówkiem. */
body.gm-page .zgl-krk{
  position:relative; background:#fff; color:var(--ink);
  padding:clamp(60px,9vh,110px) clamp(18px,3vw,44px) clamp(76px,12vh,140px);
}
body.gm-page .zgl-krk__head{ display:block; }
body.gm-page .zgl-krk__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 .zgl-krk__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 .zgl-krk__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,56px);
  margin-top:clamp(34px,5vh,62px);
}
body.gm-page .zgl-krk__it{
  display:block; padding-top:clamp(18px,2.4vh,26px); border-top:1px solid rgba(22,21,30,.16);
}
body.gm-page .zgl-krk__n{
  display:block; font-family:var(--serif); font-style:italic; font-weight:400;
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
  font-size:clamp(2rem,3.9vw,56px); line-height:1; color:#ECEAEA;
}
/* ⚠️ `min-height` na DWA wiersze: tytuł kroku /01 zawija się, a /02 i /03 nie — bez rezerwy
   opisy startowały o 27 px niżej w pierwszej kolumnie i rząd wyglądał na przekrzywiony
   (zmierzone wysokości tytułów: 53 / 26 / 26 px). */
body.gm-page .zgl-krk__t{
  margin:clamp(8px,1.2vh,14px) 0 0; font-family:var(--serif); font-weight:400;
  text-transform:uppercase; color:#590B11;
  font-size:clamp(1rem,1.53vw,22px); line-height:1.2; letter-spacing:.03em;
  min-height:2.4em;
}
body.gm-page .zgl-krk__p{
  margin:clamp(12px,1.6vh,18px) 0 0; font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(.88rem,1.04vw,15px); line-height:1.6;
}

/* ---------- 22.5 /zglos-nieruchomosc/ — pas z formularzem ---------- */
body.gm-page .zgl-frm{
  position:relative; background:#f5f5f5; color:var(--ink);
  padding:clamp(66px,10vh,120px) clamp(18px,3vw,44px) clamp(76px,12vh,140px);
}
/* Kolumna formularza jest WYŚRODKOWANA (jak pas CTA), więc nagłówki nad nią też muszą być
   wyśrodkowane. Wyrównane do lewej lądowały na x≈275 — ani na siatce strony (43 px), ani
   w osi kolumny, i wyglądały na przypadkowe. */
body.gm-page .zgl-frm__in{ display:block; width:100%; max-width:900px; margin:0 auto; text-align:center; }
body.gm-page .zgl-frm__lead{ margin-left:auto; margin-right:auto; }
body.gm-page .zgl-frm .gmo-form{ text-align:left; }
body.gm-page .zgl-frm__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 .zgl-frm__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 .zgl-frm__lead{
  margin:clamp(16px,2.2vh,24px) 0 0; max-width:62ch;
  font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(.88rem,1.11vw,16px); line-height:1.6;
}
body.gm-page .zgl-frm .gmo-form{ margin-top:clamp(28px,4vh,48px); }

/* ---------- 22.6 /uslugi/ — pas kadru pod hero ----------
   ⚠️ WŁASNA klasa, nie `usl-shot`: tamten jest `sticky` i klei się do końca dokumentu,
   więc każda kolejna sekcja musiałaby dostać własny z-index (patrz pułapka w §14). */
body.gm-page .uhub-shot{ display:block; background:#fff; }
body.gm-page .uhub-shot > .elementor-widget-image{ display:block; width:100%; }
body.gm-page .uhub-shot__img img{
  display:block; width:100%; aspect-ratio:1440 / 569; object-fit:cover;
}

/* ---------- 22.7 /uslugi/ — rozdroże dwóch usług ---------- */
/* ⚠️ Tła muszą się PRZEPLATAĆ — dwa jasnoszare pasy pod rząd zlewają się w jedno pasmo
   ciągnące się do stopki. Po wyprowadzeniu fotografii na własną podstronę (26.08) `/uslugi/`
   ma: hero (biel) → pas kadru → `uhub` (biel) → CTA (#f5f5f5), więc rozdroże wraca na biel.
   `/uslugi/fotografia-i-wideo/` ma własny rytm: hero (biel) → pas → `ufoto` (#f5f5f5)
   → „dla kogo" (biel) → CTA (#f5f5f5). */
body.gm-page .uhub{
  position:relative; background:#fff; color:var(--ink);
  padding:clamp(66px,10vh,120px) clamp(18px,3vw,44px) clamp(76px,12vh,140px);
  /* `--first` = pierwsza sekcja pod nagłówkiem (hero zdjęte 30.08): ten sam górny zapas
     co miało hero na pozostałych podstronach, inaczej H1 wchodzi pod pasek menu */
  /* odstęp przypiętej kolumny od paska menu; `--gm-hd` (realna wysokość nagłówka) odświeża JS
     przy scrollu, bo pasek kurczy się 116 → 68 px. Ta sama formuła co na `.usl-int` w §14. */
  --usl-stick:calc(var(--gm-hd,86px) + clamp(24px,5vh,56px));
}
body.gm-page .uhub--first{ padding-top:clamp(122px,17vh,192px); }
body.gm-page .uhub__head{ display:block; }
body.gm-page .uhub__h{
  margin: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;
}

/* --- WIERSZ: przypięty tekst ↔ para pionowych kadrów (makieta Seba 30.08) ---
   Proporcje z pomiaru makiety (ramka 1489 px, treść 90 → 1400): kolumna tekstu 530 px,
   kolumna kadrów 555 px, przerwa 180 px → 42 / 58 z realnym odstępem. */
body.gm-page .uhub__rows{
  display:flex; flex-direction:column; gap:clamp(60px,10vh,150px);
  margin-top:clamp(40px,6vh,80px);
}
body.gm-page .uhub__row{
  display:grid; grid-template-columns:42fr 58fr; align-items:start;
  column-gap:clamp(30px,4.6vw,80px);
}
/* ⚠️ Strony zamienia SIATKA, nie kolejność w drzewie — dzięki temu czytnik ekranu i telefon
   dostają tekst przed zdjęciami, a na desktopie i tak jest naprzemiennie. */
body.gm-page .uhub__row--rev{ grid-template-columns:58fr 42fr; }
body.gm-page .uhub__row--rev > .uhub__txt{ grid-column:2; grid-row:1; }
body.gm-page .uhub__row--rev > .uhub__figs{ grid-column:1; grid-row:1; }

/* ⚠️ PRZYPIĘCIE siedzi na KONTENERZE, nie na widgecie tekstu (ten sam chwyt co `.usl-row__txt`
   w §14): kontener jest elementem siatki, widget dostaje własny wrapper od Elementora.
   `align-self:start` jest KONIECZNE — domyślnie element siatki rozciąga się na całą wysokość
   wiersza i nie ma się gdzie przesuwać, więc `sticky` nic nie robi.
   Drogę przewijania daje wyłącznie to, że kolumna kadrów jest WYŻSZA od tekstu. */
body.gm-page .uhub__txt{
  position:sticky; top:var(--usl-stick,140px); align-self:start;
  display:flex; flex-direction:column; align-items:flex-start;
}
body.gm-page .uhub__kick{
  display:block; font-family:var(--serif); font-style:italic; text-transform:uppercase;
  letter-spacing:.12em; color:#590B11; font-size:clamp(.68rem,.9vw,13px);
}
/* ⚠️ Tytuł usługi jest w MONTSERRAT LIGHT, nie w Cormorancie (makieta 30.08) — inaczej niż
   tytuły akordeonów i kart na pozostałych podstronach. Ten sam krój co nagłówek sekcji,
   tylko mniejszy stopień. */
body.gm-page .uhub__t{
  margin:clamp(10px,1.5vh,16px) 0 0; font-family:var(--sans); font-weight:300;
  text-transform:uppercase; color:var(--ink);
  font-size:clamp(1.15rem,2.36vw,34px); line-height:1.2; letter-spacing:.05em;
}
body.gm-page .uhub__p{
  margin:clamp(14px,2vh,22px) 0 0; font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(.86rem,1.04vw,15px); line-height:1.65;
}
/* odnośnik ze strzałką — geometria i tracking 1:1 z `.usl-lnk` na podstronie sprzedaży */
body.gm-page .uhub__lnk{
  display:inline-flex; align-items:center; gap:14px; margin-top:clamp(18px,2.6vh,30px);
  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;
  transition:color .3s, gap .3s;
}
body.gm-page .uhub__lnk:hover{ color:#590B11; gap:20px; }
body.gm-page .uhub__lnk .usl-lnk__ar{
  width:24px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}

/* --- JEDNO zdjęcie ROZCIĘTE na pół, prawa połowa przesunięta w dół (Seb 30.08) ---
   To NIE są dwa różne kadry: oba widgety niosą ten sam plik, a każdy pokazuje inną połowę.
   Efekt: fotografia przecięta pionowo i rozsunięta, jak na makiecie.
   Mechanika: kadr ma stałą proporcję i `overflow:hidden`, a obrazek w środku jest DWA RAZY
   szerszy od kadru (`width:200%`) i przesuwany w bok — lewy kadr pokazuje pierwszą połowę
   (`left:0`), prawy drugą (`left:-100%`).
   ⚠️ `position:absolute` na obrazku wymaga `position:relative` na kadrze ORAZ
   `display:contents` na wrapperze widgetu — inaczej punktem odniesienia jest wrapper,
   który Elementor pozycjonuje sam (pułapka opisana w „Pułapkach" niżej).
   ⚠️ `max-width:none` jest KONIECZNE: Elementor nakłada widgetom `max-width:100%`, przez co
   obrazek szerszy od rodzica jest po cichu przycinany i połówki się nie schodzą.
   Z makiety: kadr ≈ 270×505 px (proporcja 27/50), prawa połowa niżej o ≈ 50 px (≈ 10 %).
   ⚠️ To przesunięcie daje kolumnie dodatkową wysokość — czyli DROGĘ, po której jedzie
   przypięty tekst. Bez niego `sticky` nie miałby się gdzie przesuwać. */
body.gm-page .uhub__figs{
  /* Dwie zmienne sterują całą mechaniką „kartki z wycięciami" — ramka i obrazek liczą się
     z TYCH SAMYCH liczb, więc zmiana jednej nie rozjeżdża zdjęcia. */
  --uhub-off:clamp(28px,5.2vw,84px);   /* o ile prawe okienko jest niżej */
  --uhub-gap:clamp(6px,.9vw,14px);     /* przerwa między okienkami */
  display:grid; grid-template-columns:1fr 1fr; column-gap:var(--uhub-gap);
  align-items:start;
}
body.gm-page .uhub__fig{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:27 / 50; background:rgba(22,21,30,.06);
}
body.gm-page .uhub__fig--r{ margin-top:var(--uhub-off); }
body.gm-page .uhub__fig > .elementor-widget-image{ display:contents; }
/* ⚠️⚠️ ZDJĘCIE NIE JEDZIE RAZEM Z OKIENKIEM (Seb 30.08). Kafelki to WYCIĘCIA W KARTCE,
   pod którą leży jedna nieruchoma fotografia — prawy kafelek jest niżej, ale pokazuje
   ten sam obraz w TEJ SAMEJ pozycji, więc połówki nadal do siebie pasują.
   Pierwsza wersja miała obrazek przyklejony do góry każdego kafelka (`top:0` w obu) i wtedy
   prawa połowa zjeżdżała w dół razem z ramką — linia dachu i horyzont się nie schodziły.
   Lekarstwo: prawy obrazek dostaje `top:-var(--uhub-off)`, czyli DOKŁADNIE tyle w górę, ile
   jego kafelek zjechał w dół. Oba obrazki zajmują wtedy ten sam prostokąt względem
   `.uhub__figs`. Wysokość musi urosnąć o offset, inaczej pod prawym okienkiem zabrakłoby
   obrazu i został pusty pasek. */
/* ⚠️ Szerokość to `200% + przerwa`, nie samo `200%`. Fotografia pod kartką jest CIĄGŁA, więc
   prawe okienko musi pokazywać obraz przesunięty o szerokość okienka ORAZ o przerwę między
   nimi. Przy równym `200%` zdjęcie w prawym okienku było o te 13 px za bardzo w prawo
   (zmierzone) — z daleka wyglądało dobrze, ale kadr nie schodził się co do piksela. */
body.gm-page .uhub__img img{
  position:absolute; top:0;
  height:calc(100% + var(--uhub-off)); width:calc(200% + var(--uhub-gap));
  max-width:none !important; object-fit:cover; display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
body.gm-page .uhub__fig--l .uhub__img img{ left:0; }
body.gm-page .uhub__fig--r .uhub__img img{
  left:calc(-100% - var(--uhub-gap)); top:calc(-1 * var(--uhub-off));
}
body.gm-page .uhub__row:hover .uhub__img img{ transform:scale(1.03); }

/* ---------- 22.8 /uslugi/ — fotografia i wideo (cel kotwicy z menu) ----------
   Ten sam podział kolumn co „Bezpieczeństwo transakcji": opis po lewej, lista po prawej.
   Lista jest STATYCZNA (nie akordeon) — sześć krótkich pozycji nie ma czego chować. */
/* ⚠️ z-index 3 (warstwy: pas kadru 1, karta 2, zakres 3, proces 4, akordeon 5, CTA 8).
   Pas hero jest `sticky` i — mając wspólnego rodzica ze wszystkimi sekcjami — klei się
   do KOŃCA strony. Sekcja bez własnej warstwy przepuszcza go na wierzch (na sprzedaży
   wideo dosłownie przykryło akordeon). Ta sama pułapka co w §14. */
body.gm-page .ufoto{
  position:relative; z-index:3; background:#f5f5f5; color:var(--ink);
  padding:clamp(72px,11vh,130px) clamp(18px,3vw,44px) clamp(80px,12vh,145px);
  display:grid; grid-template-columns:40fr 60fr; align-items:start;
  /* odstęp przypiętej kolumny od paska menu; `--gm-hd` (realna wysokość nagłówka) odświeża JS
     przy scrollu, bo pasek kurczy się 116 → 68 px. Ta sama formuła co na `.usl-int` w §14. */
  --usl-stick:calc(var(--gm-hd,86px) + clamp(24px,5vh,56px));
  column-gap:clamp(32px,4.4vw,72px);
}
/* ⚠️ PRZYPIĘCIE lewej kolumny (Seb 30.08: „ma być sticky to the top podczas scrolla").
   Siedzi na KONTENERZE kolumny, nie na widgetach w środku — kontener jest elementem siatki,
   a każdy widget dostaje od Elementora własny wrapper i przypięcie liczyłoby się względem
   niego (ta sama zasada co `.usl-row__txt` w §14 i `.uhub__txt` w §22.7).
   `align-self:start` KONIECZNE: domyślnie element siatki rozciąga się na całą wysokość
   wiersza i nie ma się gdzie przesuwać. Drogę daje lista sześciu pozycji obok — jest
   wyraźnie wyższa od kolumny opisu. */
body.gm-page .ufoto__col{
  position:sticky; top:var(--usl-stick,140px); align-self:start;
}
body.gm-page .ufoto__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 .ufoto__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 .ufoto__lead{
  margin:clamp(18px,2.6vh,30px) 0 0; max-width:32ch;
  font-family:var(--sans); font-weight:400; color:var(--ink);
  font-size:clamp(.9rem,1.18vw,17px); line-height:1.45;
}
body.gm-page .ufoto__p2{
  margin:clamp(14px,1.9vh,22px) 0 0; max-width:36ch;
  font-family:var(--sans); font-weight:300; color:rgba(22,21,30,.72);
  font-size:clamp(.86rem,1.04vw,15px); line-height:1.6;
}
body.gm-page .ufoto__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 .ufoto__btn:hover{ background:#590B11; border-color:#590B11; color:var(--cream); }
body.gm-page .ufoto__list{ display:block; border-top:1px solid rgba(22,21,30,.16); }
body.gm-page .ufoto__it{
  display:block; padding:clamp(18px,2.4vh,26px) 0; border-bottom:1px solid rgba(22,21,30,.16);
}
body.gm-page .ufoto__t{
  margin:0; font-family:var(--serif); font-weight:400; text-transform:uppercase; color:#590B11;
  font-size:clamp(1rem,1.53vw,22px); line-height:1.2; letter-spacing:.02em;
}
/* ⚠️ Cormorant ma cyfry mediewalne — bez `lining-nums` „/01." jest o połowę niższe od liter */
body.gm-page .ufoto__n{ font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
body.gm-page .ufoto__p{
  margin:clamp(8px,1.1vh,12px) 0 0; font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(.86rem,1.04vw,15px); line-height:1.6;
}

/* ---------- 22.9 TELEFON ---------- */
@media(max-width:900px){
  /* nagłówki sekcji = jak na stronie głównej (28,8 px), tak samo jak w §19 dla /uslugi */
  body.gm-page .kon__h,
  body.gm-page .kon__fh,
  body.gm-page .kon-lok__h,
  body.gm-page .zgl-krk__h,
  body.gm-page .zgl-frm__h,
  body.gm-page .uhub__h,
  body.gm-page .ufoto__h{ font-size:28.8px; line-height:1.14; }
  /* łamanie z makiety jest desktopowe — na telefonie <br> robi wiersze po dwa słowa */
  body.gm-page .kon-lok__h br, body.gm-page .uhub__t br{ display:none; }

  body.gm-page .kon{ grid-template-columns:1fr; row-gap:clamp(38px,7vh,60px); }
  body.gm-page .kon__lead{ max-width:none; }
  body.gm-page .kon-list__row{ flex-direction:column; align-items:flex-start; gap:6px; }
  body.gm-page .kon-list__lbl{ flex:none; }

  body.gm-page .kon-lok__grid{ grid-template-columns:1fr 1fr; }
  /* Przy dwóch kolumnach kadr 4:3 ma na 390 px zaledwie 129 px wysokości — nazwa
     w dolnym rogu siedzi wtedy na 15 px od krawędzi i cała sekcja robi się ciasna.
     Kwadrat daje 172 px, czyli miejsce na gradient i oddech pod napisem. */
  body.gm-page .kon-lok__img img{ aspect-ratio:1 / 1; }
  body.gm-page .kon-lok__name{ font-size:16px; letter-spacing:.1em; }

  body.gm-page .zgl-krk__grid{ grid-template-columns:1fr; gap:clamp(22px,5vw,34px); }
  body.gm-page .zgl-krk__n{ font-size:38px; }
  /* Rezerwa na dwuwierszowy tytuł ma sens TYLKO przy trzech kolumnach obok siebie —
     w jednej kolumnie zostawia pustą dziurę między tytułem a opisem. */
  body.gm-page .zgl-krk__t{ font-size:19px; min-height:0; }

  /* ⚠️ Na telefonie PRZYPIĘCIE MUSI ZNIKNĄĆ (`position:static`): przy jednej kolumnie tekst
     nie ma obok czego stać, a przyklejony blok zasłaniałby zdjęcia pod spodem. */
  body.gm-page .uhub__rows{ gap:clamp(44px,10vw,64px); }
  body.gm-page .uhub__row,
  body.gm-page .uhub__row--rev{ grid-template-columns:1fr; row-gap:clamp(22px,5vw,32px); }
  body.gm-page .uhub__row--rev > .uhub__txt,
  body.gm-page .uhub__row--rev > .uhub__figs{ grid-column:1; grid-row:auto; }
  body.gm-page .uhub__txt{ position:static; }
  body.gm-page .uhub__t{ font-size:22px; }
  /* przesunięcie okienka zostaje, ale mniejsze — przy 172 px szerokości kolumny 84 px
     offsetu robiło z pary schodek zamiast kolażu. Zmiana JEDNEJ zmiennej przestawia
     zarówno ramkę, jak i kompensację obrazka, więc zdjęcie dalej się schodzi. */
  body.gm-page .uhub__figs{ --uhub-off:clamp(16px,5vw,28px); }
  body.gm-page .uhub__lnk{ font-size:11px; letter-spacing:.14em; }

  /* ⚠️ Na telefonie przypięcie MUSI zniknąć — przy jednej kolumnie przyklejony opis
     zasłaniałby listę pozycji pod spodem. */
  body.gm-page .ufoto{ grid-template-columns:1fr; row-gap:clamp(34px,6vh,52px); }
  body.gm-page .ufoto__col{ position:static; }
  body.gm-page .ufoto__lead, body.gm-page .ufoto__p2{ max-width:none; }
  body.gm-page .ufoto__t{ font-size:19px; }
  /* przycisk „zapytaj o wycenę" na pełną szerokość — tak jak przyciski CTA w §14 */
  body.gm-page .ufoto__btn{
    display:flex; align-items:center; justify-content:center; width:100%; min-height:56px;
    text-align:center; font-size:11px; letter-spacing:.14em; line-height:1.35;
  }

  /* Przycisk „Wolę najpierw porozmawiać" (i bliźniaczy na sprzedaży) był inline-block, więc
     miał ~285 px przy pozostałych CTA na pełną szerokość kolumny — para wyglądała na błąd. */
  body.gm-page .usl-bz__btn{
    display:flex; align-items:center; justify-content:center; width:100%; min-height:56px;
    text-align:center; font-size:11px; letter-spacing:.14em; line-height:1.35;
  }

  /* formularz: siatka sześciu kolumn schodzi do jednej — przy 390 px „metraż | pokoje | cena"
     w jednym wierszu daje pola po 110 px, w których nie mieści się placeholder */
  body.gm-page .gmo-form.gmf .wpforms-field-container{ grid-template-columns:1fr !important; }
  body.gm-page .gmo-form.gmf div.gmo-f--half,
  body.gm-page .gmo-form.gmf div.gmo-f--third{ grid-column:1 / -1 !important; }
  body.gm-page .gmo-form.gmf div.gmf-sec1::before,
  body.gm-page .gmo-form.gmf div.gmf-sec2::before{ font-size:19px; }
}

/* ---------- 22.10 HERO NOWYCH PODSTRON NA WĄSKIM EKRANIE ----------
   Łamanie leadu jest zdjęte z makiety i liczone pod 1440 px — na 390 px te same `<br>`
   zostawiają wiersze po dwa słowa. Reguła celowo NIE dotyczy `/uslugi/sprzedaz-nieruchomosci/`
   (klasa `usl-int--nb` jest tylko na nowych podstronach): tamten lead nie ma spacji przed
   `<br>`, więc schowanie łamania SKLEIŁOBY wyrazy — pułapka opisana w §14.
   W leadach nowych podstron spacja przed `<br>` jest, więc chowanie jest bezpieczne. */
@media(max-width:640px){
  body.gm-page .usl-int--nb .usl-int__lead br{ display:none; }
}

/* ---------- 22.11 KARTA BEZ PRZYPIĘCIA (`/uslugi/fotografia-i-wideo/`) ----------
   Seb 30.08: „napis «Kadr, który sprzedaje» ma nie być sticky". Przypięcie NIE siedzi na samym
   napisie — sticky jest CAŁA karta `.usl-crd` (§14), więc razem z nią przykleja się do góry
   ekranu jej górny napis. Modyfikator zdejmuje przypięcie na tej jednej podstronie.
   ⚠️ `!important` jest konieczne: `position:sticky` pada w §14 w DWÓCH regułach o tej samej
   specyficzności, więc zwykłe nadpisanie złapałoby tylko jedną.
   ⚠️ Na sprzedaży karta ZOSTAJE przypięta — tam wjeżdża na nią kolejna sekcja i Seb to
   zaakceptował 18.08. Nie zmieniaj tego globalnie.
   Wysokość jednego ekranu zostaje: sekcja dalej wygląda na pełnoekranową, tylko przewija się
   razem ze stroną. Napisy jadące mają wtedy drogę równą `100svh + wysokość okna`. */
body.gm-page .usl-crd--flow{ position:relative !important; top:auto !important; }


/* ================================================================================
   §23 — /dolacz-do-nas/ (nabór agentów, treść Seba 30.08)

   Podstrona jest w CAŁOŚCI zbudowana z sekcji, które już żyją gdzie indziej: hero
   `usl-int*` (bez pasa kadru, jak `/kontakt/`), slider `usl-cz*` i akordeon `usl-bz*`
   z podstrony sprzedaży, jasny pas `usl-cta*`, pas formularza `zgl-frm*`.
   Dlatego §23 jest krótkie — dokłada tylko trzy rzeczy, których nigdzie wcześniej
   nie było, i jedną poprawkę do slidera.
   ================================================================================ */

/* ---------- 23.1 SLIDER: kadr przełącza się razem z treścią ----------
   Na `/uslugi/sprzedaz-nieruchomosci/` kadr jest JEDEN (Seb 14.08) — tam ta reguła
   nic nie zmienia, bo jedyny kadr ma `is-on` już w drzewie. Tutaj kadrów jest tyle,
   ile slajdów, więc muszą się przenikać: bez `opacity` leżałyby jeden na drugim
   (`position:absolute; inset:0` z §14) i widać byłoby zawsze ostatni. */
body.gm-page .usl-cz__fig{ opacity:0; transition:opacity .55s cubic-bezier(.16,1,.3,1); }
body.gm-page .usl-cz__fig.is-on{ opacity:1; }

/* ---------- 23.2 ODNOŚNIK W HERO ----------
   Geometria 1:1 z `.usl-crd__cta` (odnośnik w karcie „Sprzedaż z zasadami") — ten sam
   stopień, ten sam tracking, ta sama strzałka jadąca na hover. Różnica jest tylko taka,
   że ten stoi w prawej kolumnie hero, pod akapitami. */
body.gm-page .usl-int__cta{
  display:inline-flex; align-items:center; gap:14px; margin-top:clamp(22px,3.2vh,38px);
  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-int__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-int__cta:hover{ color:#590B11; }
body.gm-page .usl-int__cta:hover .usl-lnk__ar{ transform:translateX(5px); }

/* ---------- 23.3 HERO WG MAKIETY SEBA (30.08) ----------
   Zmiany względem hero pozostałych podstron, wszystkie zdjęte POMIAREM PIKSELOWYM
   z makiety (ramka 1816×1210 → nasza siatka 1440, mnożnik 0,793):
   - H1 WYŚRODKOWANY i większy: w makiecie stoi na 182–1636 px, czyli równe marginesy
     po obu stronach, a jego cap ma 45 px → font 64 px w makiecie → 51 px u nas
     (pozostałe podstrony mają 44 px i zostają bez zmian).
   - prawa kolumna startuje na 41,5 % szerokości treści (makieta: 754/1816), nie na 47 %
     jak gdzie indziej — akapity są dłuższe i przy 47 % łamały się o wiersz za wcześnie.
   - sekcja ma JEDEN EKRAN i jest PRZYPIĘTA, bo wjeżdża na nią sekcja druga (patrz 23.5).
   ⚠️ `overflow:hidden` jest tu bezpieczne: psułoby `position:sticky` DZIECI, a wewnątrz
   hero żadne dziecko nie jest przypięte — sticky siedzi na samej sekcji. */
body.gm-page .usl-int--dlc{
  position:sticky; top:0; z-index:1; min-height:100svh; overflow:hidden;
  box-sizing:border-box;
}
/* ⚠️ Wyśrodkowanie i większy stopień H1 dotyczą TYLKO desktopu — tak jest na makiecie.
   Na telefonie nagłówek ma wyglądać jak na pozostałych podstronach (28,8 px, waga 600,
   DO LEWEJ): mój wcześniejszy `clamp(1.4rem,3.68vw,53px)` schodził na 390 px do 22,4 px,
   czyli był MNIEJSZY niż na `/uslugi/fotografia-i-wideo/` i wyśrodkowany — stąd „czcionka
   coś jest nie tak" (Seb 30.08). Media query na dole §23 przywraca wartości bazowe. */
body.gm-page .usl-int--dlc .usl__h1{
  text-align:center; font-size:clamp(1.4rem,3.68vw,53px);
}
body.gm-page .usl-int--dlc .usl-int__cols{ grid-template-columns:41.5fr 58.5fr; }
/* ⚠️ ODSTĘP H1 → LEAD (Seb 30.08: „większy odstęp po «Zostań agentem Galerii Mroziński»").
   Bazowy margines z §14 dawał 16 px między dolną krawędzią liter H1 a górną leadu; makieta
   ma tam 159 px w swojej skali, czyli 126 px u nas. PEŁNYCH 126 px NIE DA SIĘ włożyć:
   sekcja ma jeden ekran (100svh), a odnośnik „Wyślij zgłoszenie" kończył się 98 px nad
   wordmarkiem — przy 126 px wjechałby na niego. Stąd 89 px na oknie 900 (zmierzone:
   odnośnik zostaje ~26 px nad wordmarkiem). `vh` w clampie sam ściąga odstęp na niższych
   ekranach, gdzie zapasu jest jeszcze mniej. */
body.gm-page .usl-int--dlc .usl-int__lead{ margin-top:clamp(28px,9.9vh,90px); }
/* ⚠️ PRAWY ZAPAS NA PASEK BOCZNY. `.rail` wisi `fixed` na x 1387–1440, a kolumna hero
   kończy się na 1397 px (krawędź siatki) — bez zapasu ostatnie słowo najdłuższego wiersza
   wchodziło pod ikony (zmierzone: tekst 1393, pasek od 1387). Zapas jest DOKŁADNIE 22 px,
   nie 58 jak w akordeonie i FAQ (§22, pułapka 3): makieta daje tej kolumnie 753 px, a przy
   szerszym zapasie zostawało 714 px i pierwszy akapit łamał się na cztery wiersze zamiast
   trzech. Po poprawce tekst kończy się na 1372 px, czyli 15 px przed paskiem.
   Pozostałe podstrony zapasu NIE mają — ich hero mają krótsze wiersze i są zaakceptowane
   w obecnym łamaniu. ⚠️ `/kontakt/` ma tylko 8 px luzu (wiersz do 1379): gdyby jego treść
   urosła, trzeba mu dołożyć taką samą regułę. */
body.gm-page .usl-int--dlc .usl-int__col{ padding-right:clamp(0px,1.6vw,22px); }
/* kotwica spod odnośnika „Wyślij zgłoszenie" w hero — bez zapasu sekcja docelowa
   zatrzymywałaby się pod paskiem menu (`--gm-hd` = realna wysokość, liczona w js-pre.js) */
body.gm-page #dlcFrm{ scroll-margin-top:calc(var(--gm-hd,86px) + 24px); }

/* ---------- 23.4 WORDMARK „GALERIA MROZIŃSKI" PRZY DOLNEJ KRAWĘDZI HERO ----------
   Z makiety: bordowy napis Cormorant na całą szerokość siatki (1684/1816 = 92,7 %),
   ucięty dolną krawędzią sekcji. Ucięcie robi `overflow:hidden` sekcji plus ujemny
   `bottom` — dokładnie tak, jak wygląda na makiecie, a przy scrollu i tak przykrywa go
   wjeżdżająca sekcja druga.
   ⚠️ `display:contents` na wrapperze widgetu jest KONIECZNE — inaczej `position:absolute`
   liczyłoby się względem wrappera, który Elementor pozycjonuje sam (ta sama pułapka
   co przy kadrach rozdroża w §22.7).
   ⚠️ Wordmark jest OZDOBĄ: `aria-hidden` w drzewie + `pointer-events:none` tutaj, żeby
   nie łapał zaznaczenia ani kliknięć nad treścią. */
body.gm-page .usl-int--dlc > .elementor-widget-html{ display:contents; }
body.gm-page .dlc-wm{
  position:absolute; left:var(--usl-pad); right:var(--usl-pad); bottom:-.1em;
  font-family:var(--serif); font-weight:400; color:#590B11;
  font-size:9.5vw; line-height:.8; letter-spacing:.005em; text-transform:uppercase;
  white-space:nowrap; text-align:center; pointer-events:none; user-select:none;
}

/* ---------- 23.5 SEKCJE NACHODZĄCE JAK KARTY ----------
   Seb 30.08: „sekcja druga ma wjechać jako karta nachodząca na sekcję 1, sekcja Zasady
   też ma najechać jako karta". Mechanika 1:1 z `/uslugi/sprzedaz-nieruchomosci/` (§14):
   sekcja pod spodem jest PRZYPIĘTA, a następna ma własne tło i wyższą warstwę, więc
   wjeżdża na nią zamiast przewijać się razem z nią.
   Warstwy na tej podstronie: hero 1 → slider 3 → zasady 5 → sekcja domykająca 8.
   „Zasady" nie potrzebują ani przypięcia, ani własnej klasy — są ostatnie z nachodzących
   i bazowa reguła `.usl-bz` daje im już białe tło i z-index 5.
   ⚠️ Przypięta sekcja MUSI się mieścić w ekranie, inaczej jej dół nigdy nie będzie widoczny.
   Zmierzone na 1440: slider ma 834 px przy oknie 900. Gdyby urósł, trzeba mu policzyć
   `top` z JS (`min(0, vh − wysokość)`), tak jak karcie na `/uslugi/`. */
body.gm-page .usl-cz--karta{ position:sticky; top:0; }

/* ---------- 23.6 SEKCJA DOMYKAJĄCA: treść po lewej, formularz po prawej ----------
   Seb 30.08: „ma być do lewej przesunięta, a formularz w prawej kolumnie, cała sekcja
   na szarym tle". To jest układ sekcji 2 z `/kontakt/` (siatka 40/60, klasy `kon*`),
   więc dokładamy tylko tło i warstwę — zero nowej geometrii.
   Dzięki temu z podstrony znika jasny pas `usl-cta` i osobny pas formularza, czyli także
   problem dwóch szarych pasm jedno pod drugim. */
body.gm-page .kon--szary{ background:#f5f5f5; position:relative; z-index:8; }
body.gm-page .kon__flead{
  margin:clamp(14px,2vh,22px) 0 0; max-width:38ch;
  font-family:var(--sans); font-weight:300; color:var(--ink);
  font-size:clamp(.9rem,1.18vw,17px); line-height:1.45;
}
body.gm-page .kon--szary .kon__formcol .gmo-form{ margin-top:clamp(18px,2.6vh,30px); }

@media(max-width:900px){
  body.gm-page .usl-int__cta{ font-size:.78rem; letter-spacing:.12em; }
  /* ⚠️ Sekcja 1 ma na telefonie WYPEŁNIAĆ EKRAN, tak jak hero strony głównej (Seb 30.08:
     „na mobile sekcja 1 powinna być 100vh jak na stronie głównej, żeby napis był tak
     na dole"). Ten sam zestaw jednostek co `.hero` na home: `100lvh` (nie `dvh` — dvh
     zmienia się w trakcie chowania paska adresu i napis by skakał), a różnicę między
     największym a najmniejszym widokiem trzymamy w `--safe`, żeby przycięcie wordmarku
     było zamierzone, a nie zależne od tego, czy pasek przeglądarki jest akurat schowany.
     `min-height`, nie `height`: na niskich ekranach treść jest wyższa niż okno i sztywna
     wysokość by ją ucięła — wtedy sekcja rośnie, a wordmark zostaje na JEJ dole.
     `padding-bottom` rezerwuje miejsce na wordmark (jest `absolute`, więc nie zajmuje
     miejsca sam z siebie) — bez rezerwy odnośnik „Wyślij zgłoszenie" wchodził na litery. */
  /* ⚠️ Sekcja zostaje PRZYPIĘTA także na telefonie (Seb 30.08: „sekcje nakładające się
     jako karty na desktopie mają się nachodzić jako karty na mobile też") — slider wjeżdża
     na nią kartą, tak jak `.bnh` na hero strony głównej.
     ⚠️ Nigdy `position:static`: sekcja przestaje być wtedy kontenerem pozycjonowania
     i `absolute` wordmarku liczy się względem czegoś wyżej — na 390×667 napis wylądował
     52 px nad dołem sekcji, pod odnośnikiem (zmierzone: dół napisu 679 przy dole 731). */
  body.gm-page .usl-int--dlc{
    /* @@ DOKLADNIE ta sama konstrukcja co `.hero` na stronie glownej (Seb 31.08:
       napis ma stac w tym samym miejscu co do piksela). Kluczowe jest SZTYWNE `height`,
       nie `min-height`: przy `min-height` tresc rozpychala sekcje ponad wysokosc ekranu,
       a wordmark stojacy przy jej dole zjezdzal razem z nia pod pasek adresu Safari.
       Ze sztywna wysokoscia pozycja napisu nie zalezy od dlugosci tresci. */
    /* Sekcja zostaje PRZYPIETA (slider wjezdza na nia karta), ale ma NATURALNA
       wysokosc — bez wordmarku nie ma po co trzymac pelnego ekranu ani rezerwowac
       miejsca u dolu; zostawalby pusty bialy pas. */
    position:sticky; top:0;
    min-height:0;   /* bez wordmarku sekcja NIE trzyma pelnego ekranu — zostawal 184 px pustki */
    /* dolny zapas: bazowe 36 px pod odnosnikiem bylo ciasne, gdy zaraz pod nim
       zaczyna sie szare tlo kolejnej sekcji */
    padding-bottom:clamp(48px,7vh,64px);
    /* ⚠️ Treść MUSI się rozłożyć na całą wysokość ekranu, inaczej zostaje przyklejona
       do góry, a nad wordmarkiem robi się 101 px pustki (zmierzone: odnośnik kończył się
       na 652, napis zaczynał 753). Sekcja jest u Elementora blokiem, więc kierunek flexa
       wymuszamy z `!important` — kontenery trzymają go na własnej zmiennej i potrafią
       przestawić na `row` (ta sama pułapka co wiersz FAQ w §19). */
  }
  /* @@ BEZ `flex-shrink:0` FLEX SCISKA BLOKI I TEKST NACHODZI NA SIEBIE. Przy widocznym
     pasku adresu Safari (`--safe` ~160 px) tresc hero jest wyzsza niz sztywne `100lvh`
     minus rezerwy; zmierzone w symulacji: naglowek 428..493 i lead 534..626 lezaly
     NA akapitach 335..626. Elementy flexa nie moga sie kurczyc - lepiej, zeby zabraklo
     miejsca u gory, niz zeby tekst wchodzil na tekst. */
  body.gm-page .usl-int--dlc .usl-int__cols{ margin-top:clamp(18px,3.8vh,34px); }
  /* Odnośnik ma należeć do AKAPITÓW, nie do wielkiego napisu pod spodem: przy bazowym
     marginesie siedział 46 px pod tekstem i tylko 33 px nad napisem, czyli bliżej obcego
     bloku niż własnego (złapane na zrzucie 390). Po ścięciu marginesu jest 33 nad / 46 pod. */
  body.gm-page .usl-int--dlc .usl-int__cta{ margin-top:clamp(8px,1.7vh,16px); }
  /* na telefonie zapas nad leadem musi zejść z 83 px (9,9vh) do 34 — inaczej treść hero
     ma 799 px i wchodzi na wordmark stojący przy dolnej krawędzi (zmierzone) */
  body.gm-page .usl-int--dlc .usl-int__lead{ margin-top:clamp(14px,2.8vh,26px); }
  /* ⚠️⚠️ Podział 41,5/58,5 MUSI wracać do JEDNEJ kolumny — inaczej moja reguła z 23.3
     (bez media query, wyższa specyficzność) nadpisuje bazowy reset z §14 i akapity
     dostają na 390 px kolumnę szerokości 147 px, czyli po dwa słowa w wierszu (zmierzone).
     Ta sama pułapka, o której mówi komentarz przy `.usl-int__cols` w §14. */
  body.gm-page .usl-int--dlc .usl-int__cols{ grid-template-columns:1fr; }
  body.gm-page .usl-int--dlc .usl-int__col{ grid-column:1; padding-right:0; }
  /* Wordmark zostaje PRZY DOLNEJ KRAWĘDZI (jak `.giant` na home), tylko łamie się na dwa
     wiersze. ⚠️ `white-space:normal` jest konieczne: w jednym wierszu napis musiałby zejść
     do 36 px, żeby zmieścić się w 390 px (zmierzone: przy 52 px wychodził 144 px poza ekran).
     ⚠️ Przycięcie liczymy OD LINII BEZPIECZNEJ `--safe`, nie od krawędzi okna — dokładnie
     ten sam chwyt co na stronie głównej, gdzie bez tego cały drugi wiersz chował się
     za paskiem przeglądarki i Seb widział samo „GALERIA". */
  /* @@ NA TELEFONIE WORDMARKU NIE MA (Seb 31.08: „wyrzuc calkiem napis, ale tylko
     na mobile"). Na desktopie zostaje — patrz 23.4. Razem z napisem znika cale
     rusztowanie, ktore bylo pod niego zrobione: sztywna wysokosc sekcji liczona
     z widocznego obszaru, rezerwa `padding-bottom` i dosuwanie tresci do dolu. */
  body.gm-page .dlc-wm{ display:none; }
  /* H1 wraca do wartości z pozostałych podstron (§19: 28,8 px / waga 600 / do lewej) */
  /* Wyśrodkowanie i stopień 53 px są tylko na desktopie (makieta) — na telefonie
     nagłówek wraca do wspólnego wzorca podstron: 28,8 px, do lewej. Wagę (300) daje
     już reguła globalna w §19, więc nie powtarzamy jej tutaj. */
  body.gm-page .usl-int--dlc .usl__h1{ text-align:left; font-size:28.8px; }
}




/* ---------- 23.7 CTA NA KADRZE — TŁO W SEKCJI, NIE NA CAŁYM EKRANIE (telefon) ----------
   Seb 30.08: „na końcu, w sekcji «Porozmawiajmy o sesji», nagle pojawia się obrazek w tle,
   który nakłada się na cały ekran, mimo że na scrollu jest jeszcze poprzednia sekcja".
   Przyczyna: mobilny parallaks rysuje kadr warstwą `position:fixed` o wysokości `100vh`
   (§9), włączaną, gdy tylko sekcja dotknie kadru. Na `/o-nas/` to nie przeszkadza, bo
   sekcje NAD CTA mają tam z-index 8, czyli przykrywają warstwę; na `/uslugi/fotografia-i-wideo/`
   sekcja nad CTA (akordeon) ma z-index 5, więc zdjęcie przebijało przez nią na cały ekran.
   Zamiast żonglować warstwami zdejmujemy na telefonie sam parallaks: kadr staje się tłem
   SEKCJI (`background-attachment:scroll`), więc fizycznie nie ma czym zasłonić sąsiadów.
   Na iOS `background-attachment:fixed` i tak nie działa, więc nic nie tracimy.
   ⚠️ Modyfikator, nie zmiana globalna: na `/o-nas/` parallaks został zaakceptowany. */
@media(max-width:900px){
  body.gm-page .abo-cta--stat{
    background-image:var(--abo-cta-img,none); background-attachment:scroll;
    background-position:center center; background-size:cover;
  }
  body.gm-page .abo-cta--stat.bg-on .abo-cta__bg{ display:none; }
  /* Łamanie z makiety liczone pod desktop: na 390 px „POROZMAWIAJMY O SESJI TWOJEJ
     NIERUCHOMOŚCI" rozpada się przez nie na cztery wiersze, z czego dwa środkowe mają
     po dwa słowa. Bez `<br>` łamie się równo. ⚠️ Tylko tutaj — na `/o-nas/` nagłówek CTA
     jest krótszy i jego łamanie zostaje. */
  body.gm-page .abo-cta--stat .abo-cta__h br{ display:none; }
}


/* ---------- 23.8 JEDNAKOWY RYTM PIONOWY SEKCJI (`/dolacz-do-nas/`, fotografia) ----------
   Seb 30.08: „raz jest na dole wielki odstęp, w kolejnej sekcji na górze mały — ma być
   jednakowo, patrz inne podstrony". Sekcje dziedziczyły paddingi z różnych miejsc arkusza
   i styki wychodziły nierówno — zmierzone na 1440: 234 px (slider↔zasady) obok 207 px
   (zasady↔formularz) na `/dolacz-do-nas/` i 189 px (zakres↔proces) obok 175 px
   (proces↔akordeon) na fotografii, bo sama oś procesu ma 81/58.
   Jedna klasa daje wszystkim sekcjom TĘ SAMĄ parę wartości, więc każdy styk to 2× tyle samo.
   Liczby są wprost z rytmu `/uslugi/sprzedaz-nieruchomosci/` (`.usl-bz` / `.usl-om`
   = 117 px na 1440 i 110 px na 390) — nie wymyślamy nowego stopnia.
   ⚠️ Klasa NIE idzie na hero, pas kadru ani na karty 100svh — one mają własną geometrię. */
body.gm-page .gm-rytm{
  padding-top:clamp(80px,13vh,130px) !important;
  padding-bottom:clamp(80px,13vh,130px) !important;
}



/* ---------- 24. LEAD POD NAGŁÓWKIEM WYRÓŻNIONYCH OFERT (Seb 18.09) ----------
   `.ofr__lead` ma być 1:1 z `.bnh__lead` z sekcji kategorii (krój, stopień, kolor) — krój
   i stopień idą wspólną regułą w prototypie, ale KOLOR nie dojeżdża: Elementor daje
   `.elementor-widget-text-editor p{color:inherit}` o wyższej specyficzności, więc oba leady
   dziedziczą kolor po SEKCJI. Kategorie stoją na `--ink` (#16151e), a `.ofr` ma `color:#000`,
   czyli lead ofert wychodził odrobinę ciemniejszy. Zrównujemy do tego, co realnie renderuje
   sekcja kategorii — nie do wartości z prototypu, bo tamtej i tak nikt nigdy nie widział. */
body.gm-page .elementor-widget-text-editor p.ofr__lead{ color:var(--ink); }


/* ---------- 25. KONTEKST NAD OPINIĄ + LEAD W CIEMNYM CTA (Seb 18.09) ----------
   `.abo-ref__ctx` to jedna linijka nad cytatem („Sprzedaż mieszkania | Darłowo | transakcja
   w 3 tygodnie") — ma dać opinii konkret. Forma etykiety, nie nagłówka: wersaliki, tracking,
   bordo, mały stopień, żeby nie konkurowała z samym cytatem.
   ⚠️ Treść tylko z danych potwierdzonych przez Radka — zmyślony czas albo miasto to fałszywa
   opinia w rozumieniu Omnibusa. */
body.gm-page .abo-ref__ctx{
  display:block; margin-bottom:clamp(12px,1.8vh,20px);
  font-family:var(--sans); font-weight:400; text-transform:uppercase;
  letter-spacing:.16em; font-size:clamp(.66rem,.83vw,12px); color:#590B11;
}
/* Lead CTA: sekcja jest ciemna, a Elementor wciska `.elementor-widget-text-editor p{color:inherit}`
   o wyższej specyficzności niż reguła z makiety — bez tego akapit bierze czystą biel nagłówka
   zamiast przygaszonej (ta sama pułapka co `.ofr__lead` w §24). */
body.gm-page .elementor-widget-text-editor p.cta__lead{ color:rgba(255,255,255,.86); }


/* ---------- 26. STOPKA POWITANIA + KLIKALNOŚĆ PRZYCISKÓW W RAMCE (18.09) ----------
   a) Kontener Elementora nie dziedziczy szerokości rodzica tak jak zwykły div: `.wlc__foot`
   wychodził na telefonie na 420 px przy `.wlc__inner` 343 px (zmierzone) i wystawał poza ekran
   — nie było tego widać w `scrollWidth`, bo `body.gm-page` ma `overflow-x:clip`, czyli
   treść jest po prostu OBCINANA.
   b) Ta sama pułapka co §8 (przycisk marki): klasa siedzi na WRAPPERZE, a `<a>` Elementora ma
   rozmiar samego napisu — w ramce 52 px klikalne było 15 px tekstu, reszta to martwe pole.
   Zerujemy wcięcia wrappera i przenosimy je na link, który rozciąga się na całe pudełko. */
body.gm-page .wlc__foot{ width:100%; max-width:100%; padding-inline:0; }

body.gm-page .wlc__btn2, body.gm-page .ofr__btn, body.gm-page .cta__btn{ padding:0; }
body.gm-page .wlc__btn2 > .elementor-button,
body.gm-page .ofr__btn > .elementor-button,
body.gm-page .cta__btn > .elementor-button{
  display:flex; align-items:center; justify-content:center;
  align-self:stretch; flex:1 1 auto; width:100%;
  /* ⚠️ `box-sizing:border-box` MUSI tu być: reguła `all:unset` z §3 kasuje też box-sizing,
     więc `width:100%` + wcięcia dawały link SZERSZY od ramki (zmierzone: 318 px w ramce 276 px)
     i napis wylewał się w prawo — wyglądało to jak wyrównanie do prawej zamiast wyśrodkowania. */
  box-sizing:border-box;
}
body.gm-page .wlc__btn2 > .elementor-button{ padding:0 clamp(22px,2.4vw,34px); }
body.gm-page .ofr__btn > .elementor-button{ padding:12px 22px; }
body.gm-page .cta__btn > .elementor-button{ padding:16px 44px; }

/* Telefon: etykiety odnośników powitania nie mieszczą się w jednym wierszu (343 px kadru),
   a link Elementora z `flex:1 1 auto` nie zejdzie poniżej swojej min-content, więc wystawał
   poza przycisk. `min-width:0` + zawijanie = przycisk rośnie w pionie, nic nie ucieka w bok. */
@media(max-width:900px){
  body.gm-page .wlc__btns .gm-btn, body.gm-page .wlc__btn2{ height:auto; min-height:52px; }
  body.gm-page .wlc__btns .gm-btn > .elementor-button,
  body.gm-page .wlc__btn2 > .elementor-button{
    min-width:0; white-space:normal; text-align:center; line-height:1.4; padding-block:14px;
  }
}


/* ---------- 27. „JAK PRACUJEMY": ODSTĘPY WRAPPERÓW WIDGETÓW (18.09) ----------
   Arkusz Elementora ładuje się PO `gm.css` i zeruje marginesy wrapperów widgetów, więc
   `margin-bottom` nagłówka z makiety schodził do 0 i kafle kroków dotykały napisu
   (zmierzone: przerwa 0 px zamiast ~40). Tu potrzebny `!important`, nie wyższa specyficzność
   — reguła Elementora ma tę samą, a wygrywa kolejnością ładowania. */
body.gm-page .abt__proc-h{ margin-bottom:clamp(28px,4.4vh,54px) !important; }
body.gm-page .abt__proc{ margin:clamp(56px,9vh,110px) auto 0 !important; max-width:1360px; }


/* ---------- 28. JEDEN STOPIEŃ NAGŁÓWKÓW SEKCJI NA STRONIE GŁÓWNEJ (Seb 18.09) ----------
   Karuzela opinii jest WSPÓLNA ze stroną `/o-nas/`, a tam obowiązuje inny standard nagłówków
   (40 px) — dlatego podbicie do 54 px jest zawężone do strony głównej klasą `body.home`.
   Bez tego zmiana rozjechałaby typografię `/o-nas/`. */
/* 18.09: Seb zszedl z tym jednym naglowkiem na 48 px - reszta sekcji zostaje na 54. */
body.gm-page.home .abo-ref__h{ font-size:clamp(1.4rem,3.8vw,48px); }
@media(max-width:900px){
  body.gm-page.home .abo-ref__h{ font-size:clamp(1.9rem,8.5vw,2.6rem); }
}

/* Ta sama karuzela na /uslugi/sprzedaz-nieruchomosci/ (Seb 19.09) — nagłówek wchodzi
   w stopień nagłówków TAMTEJ podstrony (40 px, tak jak `.usl-bz__h` / `.usl-faq__h`),
   żeby po off-markecie nie zrobił się nagle mniejszy tytuł. Modyfikator na sekcji,
   NIE `body.page-id-175`: numer strony zmieni się przy przenosinach na produkcję.
   ⚠️ Na telefonie ta reguła MUSI zostać cofnięta: stoi w pliku PÓŹNIEJ niż wspólny blok
   mobilny sadzający nagłówki `usl-*` na 28,8 px, a jej dolna granica (1,4rem) dawała 22,4 px
   — nagłówek opinii był na 390 px wyraźnie mniejszy od sąsiednich. */
body.gm-page .abo-ref--usl .abo-ref__h{ font-size:clamp(1.4rem,2.75vw,40px); }
@media(max-width:900px){
  body.gm-page .abo-ref--usl .abo-ref__h{ font-size:28.8px; line-height:1.14; }
}

/* Wrapper widgetu z wykresem tła sekcji „Jak możemy Ci pomóc" — `display:contents`, żeby
   `position:absolute` SVG liczyło się względem SCENY, a nie wrappera Elementora (§ pułapki). */
body.gm-page .pom__chartwrap{ display:contents; }


/* ---------- 29. LEAD POD H1 NA /oferta (Seb 18.09) ----------
   Krotki opis zakresu ofert. Stopien i kolor 1:1 z leadami sekcyjnymi na stronie glownej. */
body.gm-page .gm-sub__lead{
  margin:clamp(14px,2vh,22px) 0 0; max-width:64ch;
  font-family:var(--sans); font-weight:300; font-size:clamp(15px,1.15vw,17px); line-height:1.6;
  color:rgba(22,21,30,.72);
}
body.gm-page .elementor-widget-text-editor p.gm-sub__lead{ color:rgba(22,21,30,.72); }


/* ---------- 30. /uslugi/sprzedaz-nieruchomosci — HERO CTA + WYROZNIKI W KARCIE (18.09) ----------
   a) Przycisk hero stoi POD naglowkiem i jest W RAMCE — geometria 1:1 z `.wlc__btn2` na home,
      zeby jeden jezyk przyciskow szedl przez caly serwis.
   b) Karta sekcji 2 dostala naglowek + trzy wyrozniki w rzedzie. Wyrozniki wchodza po kolei
      (fade + podjazd), jednorazowo, gdy blok wejdzie w kadr — silnik na koncu `js-pre.js`. */
body.gm-page .usl-int__btn{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:clamp(22px,3.2vh,38px);
  height:clamp(52px,4.4vw,60px); padding:0 clamp(22px,2.4vw,34px);
  border:1px solid rgba(22,21,30,.35); color:var(--ink); text-decoration:none;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em; font-weight:400;
  font-size:clamp(.64rem,.78vw,.76rem); text-align:center;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
body.gm-page .usl-int__btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* strzalka w przycisku (Seb 18.09) — ta sama grafika co w odnosnikach `.usl-lnk__ar` */
body.gm-page .usl-int__btn .usl-lnk__ar{
  width:24px; height:19px; flex:0 0 24px; margin-left:14px; fill:none; stroke:currentColor;
  stroke-width:1.2; stroke-linecap:square; transition:transform .35s cubic-bezier(.16,1,.3,1);
}
body.gm-page .usl-int__btn:hover .usl-lnk__ar{ transform:translateX(5px); }
/* WARIANT `--sprz`: akapity po LEWEJ pod naglowkiem (max 47 % szerokosci tresci, czyli tyle,
   ile w innych hero zajmuje kolumna prawa), a w prawej kolumnie stoi SAM przycisk, dosuniety
   do prawej krawedzi siatki. */
/* Akapity NIE moga dotykac naglowka - `.usl-int__lead--h1` ma `margin-top:0`, a wiersz
   tekstu startowal tuz pod ostatnia linia zdania (zmierzone na 1440). */
/* Kolumna SZERSZA niz w pozostalych hero (62 % zamiast 47 %) i tekst o stopien mniejszy
   niz bazowy `--usl-body` (Seb 18.09) — H1 jest tu duzy, wiec akapit ma mu ustapic. */
body.gm-page .usl-int--sprz .usl-int__txt{ max-width:62%; margin-top:clamp(30px,5.2vh,62px); }
body.gm-page .usl-int--sprz .usl-int__txt .usl-p{ font-weight:300; font-size:17px; line-height:25px; }
body.gm-page .usl-int--sprz .usl-int__cols{ margin-top:clamp(-70px,-6vh,-24px); }
body.gm-page .usl-int--sprz .usl-int__col{ display:flex; align-items:flex-end; }
body.gm-page .usl-int--sprz .usl-int__col > *{ margin-left:auto; }
@media(max-width:900px){
  body.gm-page .usl-int--sprz .usl-int__txt{ max-width:100%; }
  body.gm-page .usl-int--sprz .usl-int__cols{ margin-top:clamp(18px,3vh,28px); }
  body.gm-page .usl-int--sprz .usl-int__col > *{ margin-left:0; width:100%; }
}

/* odstep naglowek->akapit wiekszy niz domyslny: przy 26 px zdanie kleilo sie do drugiego
   wiersza naglowka (zmierzone na 1440) */
/* ⚠️ `!important` — arkusz Elementora laduje sie PO gm.css i zeruje marginesy wrapperow
   widgetow; bez tego zmierzony odstep naglowek→akapit wynosil 0 px (ta sama pulapka co §27). */
body.gm-page .usl-crd__h{
  margin:0 0 clamp(34px,6vh,72px) !important; font-family:var(--sans); font-weight:400;
  text-transform:uppercase; letter-spacing:-.02em; line-height:1.1; color:var(--ink);
  font-size:clamp(1.4rem,2.9vw,42px);
}
/* trzy rowne kolumny; kreska nad kazda, numer bordo, haslo pogrubione, opis przygaszony */
body.gm-page .usl-wyr{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,2.6vw,46px);
  margin-top:clamp(30px,4.6vh,58px); text-align:left;
}
body.gm-page .usl-wyr__it{
  border-top:1px solid rgba(22,21,30,.16); padding-top:clamp(14px,2vh,20px);
  opacity:0; transform:translateY(18px);
  transition:opacity 1.25s ease var(--d,0s), transform 1.4s cubic-bezier(.22,.61,.36,1) var(--d,0s);
}
body.gm-page .usl-wyr__it.is-on{ opacity:1; transform:none; }
body.gm-page .usl-wyr__n{
  display:block; font-family:var(--serif); font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1; font-size:clamp(1rem,1.3vw,19px); line-height:1; color:#590B11;
}
body.gm-page .usl-wyr__t{
  margin:clamp(8px,1.2vh,14px) 0 0; font-family:var(--sans); font-weight:400;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.2; color:var(--ink);
  font-size:clamp(.98rem,1.3vw,20px);
}
body.gm-page .usl-wyr__lead{
  margin:clamp(8px,1.2vh,14px) 0 0; font-family:var(--sans); font-weight:500;
  font-size:clamp(.95rem,1.15vw,17px); line-height:1.45; color:var(--ink);
}
body.gm-page .usl-wyr__p{
  margin:clamp(8px,1.2vh,14px) 0 0; font-family:var(--sans); font-weight:300;
  font-size:17px; line-height:25px; color:rgba(22,21,30,.78);
}
@media(max-width:900px){
  body.gm-page .usl-wyr{ grid-template-columns:1fr; gap:clamp(18px,2.6vh,26px); }
  body.gm-page .usl-crd__h{ font-size:clamp(1.35rem,6vw,1.95rem); }
  body.gm-page .usl-int__btn{ width:100%; }
}


/* ---------- 31. SPRZEDAZ: KAFLE NA SCROLL + LISTA OFF-MARKET (Seb 18.09) ----------
   a) `usl-cz--scr`: sekcja dostaje wysokosc = ekran + 4 x 46vh, a scena (`.usl-cz__row`)
      przypina sie do gory. Indeks kafla liczy silnik z postepu przewijania sekcji, wiec
      strzalki sa zbedne — zostaje sam licznik. NA TELEFONIE bez przypiecia (jedna kolumna,
      pinowanie zjadaloby ekran) — tam wracaja strzalki.
   b) Lista korzysci w off-market: bordowa kropka zamiast punktora, bez wciecia. */
body.gm-page .usl-cz--scr{ padding-bottom:0; height:calc(100vh + 4 * 46vh); }
body.gm-page .usl-cz--scr .usl-cz__row{
  position:sticky; top:calc(var(--gm-hd,86px) + clamp(16px,3vh,40px));
}
body.gm-page .usl-cz--scr .usl-cz__arrows{ display:none; }
body.gm-page .usl-cz--scr .usl-cz__nav{ justify-content:flex-start; }

/* Trzy wyroznniki off-market w JEDNYM WIERSZU, rozdzielone kropka (Seb 19.09).
   ⚠️ Kolor MUSI byc kremowy: sekcja ma ciemne tlo (#16151e), a `var(--ink)` z pierwszej
   wersji byl na nim praktycznie niewidoczny — ta sama zasada co przy kickerze tej sekcji
   (bordo/ciemne na ciemnym kadrze znika).
   ⚠️ Kropka rozdzielajaca tez kremowa, nie bordowa — bordo #590B11 na tym tle nie istnieje.
   Wzor 1:1 z `.wlc__facts` na home (span + span::before), tylko na `li`. */
/* ⚠️ Rząd MUSI wyjść poza kadr treści sekcji: `.usl-om__in` ma 860 px, a trzy wyróżniki
   z kropkami potrzebują 982 px (zmierzone na 1440) — w kadrze trzeci zawijał się do drugiego
   wiersza. Stąd wyłamanie na `min(1060px,92vw)` przez `margin-left:50%` + `translateX(-50%)`. */
body.gm-page .usl-om__ul{
  list-style:none; margin:clamp(20px,3vh,32px) 0 0; padding:0;
  width:min(1060px,92vw); max-width:none; margin-left:50%; transform:translateX(-50%);
  display:flex; flex-direction:row; flex-wrap:wrap;
  justify-content:center; align-items:center; gap:clamp(10px,1.6vw,22px);
}
/* Między telefonem a dużym desktopem rząd nie mieści się w 17 px — schodzi na 15 px
   i ciaśniejsze odstępy, żeby dalej był jedną linią. */
@media(min-width:901px) and (max-width:1199px){
  body.gm-page .usl-om__ul{ gap:12px; }
  body.gm-page .usl-om__ul li{ font-size:15px; gap:12px; }
}
body.gm-page .usl-om__ul li{
  position:relative; padding-left:0;
  display:inline-flex; align-items:center; gap:clamp(10px,1.6vw,22px);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:25px; color:var(--cream);
}
body.gm-page .usl-om__ul li + li::before{
  content:""; flex:0 0 auto; width:5px; height:5px; border-radius:50%;
  background:var(--cream); opacity:.55;
}
@media(max-width:900px){
  body.gm-page .usl-cz--scr{ height:auto; padding-bottom:clamp(80px,13vh,150px); }
  body.gm-page .usl-cz--scr .usl-cz__row{ position:static; top:auto; }
  body.gm-page .usl-cz--scr .usl-cz__arrows{ display:flex; }
  body.gm-page .usl-cz--scr .usl-cz__nav{ justify-content:space-between; }
  /* Na telefonie trzy wyrozniki NIE mieszcza sie w jednym wierszu (sam „Oferta trafia
     do wybranej grupy kupujacych" ma tam wiecej niz polowe kadru). Zawijanie z kropkami
     dawaloby wiersze zaczynajace sie od kropki — dlatego kolumna i kropki schowane. */
  body.gm-page .usl-om__ul{ flex-direction:column; gap:clamp(8px,1.4vh,14px);
    width:100%; margin-left:0; transform:none; }
  body.gm-page .usl-om__ul li + li::before{ display:none; }
  body.gm-page .usl-om__ul li{ font-size:15px; line-height:1.5; }
}


/* ---------- 32. (pusty) — bordowa kreska w kaflach „Co zyskujesz" USUNIĘTA CAŁKIEM
   18.09 na prośbę Seba: najpierw zniknęła jej animacja, potem sam element. ---------- */


/* ---------- 33. KONCOWE CTA NA SPRZEDAZY — DWIE KOLUMNY + FORMULARZ (Seb 19.09) ----------
   Bylo: szary pas `usl-cta` z wysrodkowanym naglowkiem i dwoma przyciskami w ramkach.
   Jest: biale tlo, bordowy rozdzielacz na gorze, po lewej naglowek + tekst + przycisk,
   po prawej krotki formularz (imie, telefon, lokalizacja, rodzaj nieruchomosci).
   ⚠️ Wlasna klasa `usl-ctf`, a nie modyfikator `usl-cta`: tamta sekcja jest flexem
   z `text-align:center` i szarym tlem, wiec kazda regula tutaj musialaby ja odkrecac.
   Geometria kolumn 42,4 / 57,6 — ta sama co `.kon` na /kontakt/ i `.usl-bz` wyzej
   na tej podstronie, zeby siatka podstrony byla jedna. */
body.gm-page .usl-ctf{
  position:relative; z-index:8; background:#fff; color:var(--ink);
  padding:clamp(48px,7vh,90px) clamp(18px,3vw,44px) clamp(80px,13vh,150px);
  display:grid; grid-template-columns:42.4fr 57.6fr; align-items:start;
  column-gap:clamp(32px,4.4vw,72px);
}
/* Bordowy rozdzielacz na calej szerokosci sekcji — jako pierwszy element siatki
   (`grid-column:1 / -1`), wzor 1:1 z intrem sekcji Radka na home (`.abt__head::before`). */
body.gm-page .usl-ctf::before{
  content:""; grid-column:1 / -1; width:100%; height:1px; background:#590B11;
  margin-bottom:clamp(38px,6vh,74px);
}
body.gm-page .usl-ctf__col, body.gm-page .usl-ctf__formcol{ display:block; }
body.gm-page .usl-ctf__h{ text-align:left; }
/* ⚠️ Odstepy MUSZA isc z `!important` na wrapperze widgetu: arkusz Elementora zeruje
   marginesy wrapperow, a margines na samym <p> daje zmierzone 0 px (ta pulapka wraca
   przy kazdej nowej sekcji — patrz §27). */
body.gm-page .usl-ctf__col > .elementor-widget-text-editor{
  margin-top:clamp(18px,2.6vh,30px) !important;
}
body.gm-page .usl-ctf__btnwrap{ margin-top:clamp(26px,3.26vw,47px) !important; }
/* Jedna miara tekstow tej podstrony: waga 300 / 17 px / 25 px (Seb 18.09).
   Selektor przez `.elementor-widget-text-editor p`, bo Elementor wymusza tam `color:inherit`
   o wyzszej specyficznosci niz sama klasa (ta sama pulapka co przy leadach na home). */
body.gm-page .elementor-widget-text-editor p.usl-ctf__p{
  margin:0; font-family:var(--sans); font-weight:300; font-size:17px; line-height:25px;
  color:rgba(22,21,30,.78); max-width:46ch;
}
body.gm-page .usl-ctf__formcol .gmo-form{ margin-top:0; }

@media(max-width:900px){
  body.gm-page .usl-ctf{
    grid-template-columns:1fr; row-gap:clamp(34px,6vh,52px);
    padding-top:clamp(40px,8vw,60px);
  }
  body.gm-page .usl-ctf::before{ margin-bottom:clamp(26px,5vw,38px); }
  body.gm-page .elementor-widget-text-editor p.usl-ctf__p{ font-size:15px; line-height:1.5; max-width:none; }
  /* Przycisk na pelna szerokosc — tak jak pozostale CTA tej podstrony w bloku mobilnym. */
  body.gm-page .usl-ctf__btn{
    display:flex; align-items:center; justify-content:center; width:100%; min-height:56px;
    text-align:center; font-size:11px; letter-spacing:.14em; line-height:1.35;
  }
}


/* ---------- 34. SEKCJA „PO PUBLIKACJI" NA SPRZEDAZY (Seb 19.09) ----------
   Szare tlo, naglowek, cztery kroki wchodzace PO KOLEI i mocne zdanie na koniec.
   Kroki maja budowe 1:1 z wyroznikami z sekcji 2 (`usl-wyr`): kreska nad numerem, numer
   bordo, nazwa wersalikami, opis 300/17/25 — ten sam jezyk wizualny, bez nowej decyzji.
   ⚠️ Wlasny `z-index:5`, bo pas wideo z hero jest `sticky` i bez warstwy wchodzi sekcjom
   na wierzch (ta sama pulapka co przy off-markecie). */
/* Pelny ekran (Seb 19.09): sekcja ma dostac wlasny kadr, nie byc pasem miedzy sekcjami —
   tak samo jak off-market i karuzela opinii nizej.
   ⚠️ `min-height`, nie `height`: na telefonie tresc (naglowek + cztery kroki w kolumnie
   + zdanie) jest WYZSZA niz ekran i sztywna wysokosc by ja ucinala.
   ⚠️ `100svh` obok `100vh` — na telefonie `100vh` liczy sie z paskiem adresu.
   ⚠️ Kierunek i wyrownanie z `!important`: kontenery Elementora trzymaja flexa na wlasnych
   zmiennych i na telefonie same przestawiaja kierunek (ta sama pulapka co w §14). */
/* ⚠️ `position:sticky` (19.09): sekcja zostaje przypieta, a ciemna karta „Standard Galerii"
   WJEZDZA NA NIA — cala mechanika karty to przypieta sekcja pod spodem + nieprzezroczyste
   tlo i wyzszy z-index sekcji nad nia. Zero JS (tak samo dziala `usl-shot` → `usl-crd`). */
body.gm-page .usl-pop{
  position:sticky; top:0; z-index:5; background:#F5F5F5; color:var(--ink);
  padding:clamp(76px,12vh,140px) clamp(18px,3vw,44px) clamp(80px,13vh,150px);
  min-height:100vh; min-height:100svh;
  display:flex !important; flex-direction:column !important; justify-content:center !important;
}
body.gm-page .usl-pop__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-pop__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-pop__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(22px,2.6vw,46px);
  margin-top:clamp(36px,5.4vh,66px); text-align:left;
}
/* Wejscie kafla: fade + 18 px podjazdu, opoznienie z `--d` nadaje silnik (0,45 s na kafel).
   ⚠️ `!important` na `transition`, bo Elementor nakłada kontenerom wlasne `transform .4s`. */
body.gm-page .usl-pop__it{
  border-top:1px solid rgba(22,21,30,.2); padding-top:clamp(14px,2vh,20px);
  opacity:0; transform:translateY(18px);
  transition:opacity 1.25s ease var(--d,0s),
             transform 1.4s cubic-bezier(.22,.61,.36,1) var(--d,0s) !important;
}
body.gm-page .usl-pop__it.is-on{ opacity:1; transform:none; }
/* ⚠️ `lining-nums` wymuszone — Cormorant domyslnie daje cyfry mediewalne (ta sama pulapka
   co przy „/01." na osi procesu i krokach „Jak pracujemy" na home). */
body.gm-page .usl-pop__n{
  display:block; font-family:var(--serif); font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1; font-size:clamp(1rem,1.3vw,19px); line-height:1; color:#590B11;
}
body.gm-page .usl-pop__t{
  margin:clamp(8px,1.2vh,14px) 0 0; font-family:var(--sans); font-weight:400;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.2; color:var(--ink);
  font-size:clamp(.98rem,1.3vw,20px);
}
body.gm-page .elementor-widget-text-editor p.usl-pop__p,
body.gm-page .usl-pop__p{
  margin:clamp(8px,1.2vh,14px) 0 0; font-family:var(--sans); font-weight:300;
  font-size:17px; line-height:25px; color:rgba(22,21,30,.78);
}
/* Mocne zdanie: serif italic bordo — ten sam jezyk co zdania „Zeby…" na osi procesu,
   wiec czyta sie jak podpis autora, a nie kolejny akapit.
   ⚠️ DO PRAWEJ, dosuniete do krawedzi siatki (Seb 19.09): `margin-left:auto` przesuwa BLOK,
   a `text-align:right` wyrownuje w nim wiersze — samo jedno albo drugie zostawia zdanie
   wiszace w polowie sekcji. Wrapper widgetu tez musi dostac `margin-left:auto`, bo to ON
   jest elementem ukladu sekcji, a nie akapit w srodku (ta sama pulapka co przy centrowaniu
   leadu na home). */
body.gm-page .usl-pop > .elementor-widget-text-editor{
  display:block; margin-left:auto; margin-right:0; width:fit-content; max-width:100%;
}
body.gm-page .elementor-widget-text-editor p.usl-pop__out{
  margin:clamp(40px,6vh,72px) 0 0 auto; font-family:var(--serif); font-style:italic;
  font-weight:400; color:#590B11; font-size:clamp(1.3rem,2.36vw,34px); line-height:1.35;
  max-width:34ch; text-align:right;
}

/* Litery zdania zamykajacego wchodza PO KOLEI (Seb 19.09). Podzial na slowa i litery robi
   silnik w js-pre.js, tutaj jest tylko stan poczatkowy i przejscie.
   ⚠️ `display:inline-block` na SLOWIE, nie na literze — inaczej wiersz lamie sie w srodku
   wyrazu. Litera zostaje `inline`, wiec nie rusza metryki wiersza. */
body.gm-page .usl-pop__w{ display:inline-block; }
body.gm-page .usl-pop__c{ opacity:0; transition:opacity .45s ease var(--d,0s); }
body.gm-page .usl-pop__out.is-on .usl-pop__c{ opacity:1; }

@media(max-width:900px){
  /* ⚠️ Na telefonie PRZYPIECIE MUSI ZNIKNAC: tresc (naglowek + cztery kroki w kolumnie
     + zdanie) jest WYZSZA niz ekran, wiec przypieta sekcja chowalaby swoj dol pod karta,
     ktora na nia wjezdza. Ta sama decyzja co przy karcie `usl-crd` ponizej 640 px. */
  body.gm-page .usl-pop{ position:static; padding:clamp(56px,11vw,80px) clamp(18px,3vw,44px) clamp(60px,12vw,90px); }
  body.gm-page .usl-pop__h{ font-size:28.8px; line-height:1.14; letter-spacing:.06em; }
  body.gm-page .usl-pop__h br{ display:none; }
  body.gm-page .usl-pop__grid{ grid-template-columns:1fr; gap:clamp(18px,2.6vh,26px); }
  body.gm-page .usl-pop__t{ font-size:18px; }
  body.gm-page .elementor-widget-text-editor p.usl-pop__p{ font-size:15px; line-height:1.5; }
  /* ⚠️ Na telefonie zdanie jest WYSRODKOWANE (Seb 20.09) — dosuniecie do prawej ma sens
     tylko przy szerokim rzedzie kafli; w jednej kolumnie wygladalo jak przesuniete.
     Wrapper widgetu tez musi wrocic na srodek, bo to ON jest elementem ukladu sekcji. */
  body.gm-page .usl-pop > .elementor-widget-text-editor{ margin-inline:auto; width:100%; }
  body.gm-page .elementor-widget-text-editor p.usl-pop__out{
    font-size:22px; margin:clamp(28px,7vw,40px) auto 0; max-width:none; text-align:center;
  }
}


/* ---------- 35. SEKCJA „STANDARD GALERII" NA SPRZEDAZY (Seb 19.09, runda 2) ----------
   Runda 1 byla kalka intra sekcji Radka z home (biel, wysrodkowany blok). Seb: „ma wjezdzac
   jak karta i byc na ciemnym tle, z lewej zdjecie agenta, tekst z prawej".
   Mechanika karty: sekcja „Po publikacji" nad nia jest `sticky top:0`, a ta ma wlasne,
   NIEPRZEZROCZYSTE tlo i wyzszy `z-index` — dokladnie tak jak karta `usl-crd` wjezdza
   na pas wideo w gorze podstrony. Zaden JS nie jest do tego potrzebny.
   ⚠️ Sekcja jest w mapie `HD` w js-pre.js (`uslStd:'dark'`) — bez tego czarne logo ginie.
   ⚠️ Kicker JASNY, nie bordo: bordo #590B11 na #16151e praktycznie znika (off-market). */
body.gm-page .usl-std{
  position:relative; z-index:6; background:#16151e; color:var(--cream);
  padding:clamp(70px,11vh,130px) clamp(18px,3vw,44px) clamp(76px,12vh,140px);
  /* ⚠️ WEZSZA siatka, wysrodkowana (Seb 19.09, ostatnia decyzja): kadr 400 px + kolumna
     tekstu 600 px, calosc 1072 px na srodku (margines ~184 px na 1440). Po drodze byly
     dwie inne miary — 420+620 wysrodkowane i 470+812 na pelnej siatce home — obie cofniete.
     ⚠️ `min-height:100vh` i `position:sticky`: to JEDYNA ciemna sekcja i to na nia wjezdza
     karta „Bezpieczenstwo". Sama tez wjezdza — na przypieta sekcje „Po publikacji". */
  display:grid !important; grid-template-columns:minmax(0,400px) minmax(0,600px);
  justify-content:center; align-items:center;
  column-gap:clamp(32px,5vw,72px);
  min-height:100vh; min-height:100svh;
  position:sticky; top:0;
}
/* Proporcja siedzi na RAMCE, nie na zdjeciu: na WordPressie klasa `usl-std__photo` laduje
   na WRAPPERZE widgetu obrazu, a wlasciwy <img> jest w srodku (ta sama pulapka co
   `.abt__figure` na home — stad most `> img` nizej). */
body.gm-page .usl-std__figure{
  position:relative; overflow:hidden; aspect-ratio:370/493; background:rgba(244,244,237,.07);
  width:100%; max-width:400px;
}
body.gm-page .usl-std__figure .elementor-widget-image{ display:contents; }
body.gm-page .usl-std__photo,
body.gm-page .usl-std__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
body.gm-page .usl-std__col{ display:block; max-width:600px; }
/* ⚠️ Jasny rozdzielacz nad kickerem USUNIETY (Seb 19.09) — byl kalka bordowej kreski
   z wersji na bieli, a na ciemnej karcie dzielil tresc bez powodu.
   Gdyby wracal: `position:static` + `inset:auto` sa KONIECZNE, bo Elementor pozycjonuje
   `::before` swoich kontenerow absolutnie i kreska lezalaby NA tekscie. */
body.gm-page .usl-std__kicker{
  display:block; font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em;
  font-weight:400; font-size:clamp(.72rem,1vw,.9rem); line-height:1.9; color:var(--cream);
}
/* Stopien zszedl z clamp(1rem,1.45vw,22px) — 20,9 px na 1440 — na 17,3 px (Seb 19.09:
   „zmniejsz czcionke tekstu"). Tym samym tekst wchodzi w miare reszty tej podstrony
   (300 / 17 px), tylko z luzniejsza interlinia, bo stoi na ciemnym tle. */
body.gm-page .usl-std .elementor-widget-text-editor p.usl-std__p{
  margin:clamp(18px,2.6vh,30px) 0 0; font-family:var(--sans); font-weight:300;
  font-size:clamp(.9rem,1.2vw,18px); line-height:1.6; color:var(--cream); max-width:none;
}
/* Puenta: ta sama miara, waga 500 — zamyka mysl, nie jest czwartym zdaniem leadu. */
body.gm-page .usl-std .elementor-widget-text-editor p.usl-std__out{
  font-weight:500; margin-top:clamp(28px,4.4vh,52px);
}

@media(max-width:900px){
  body.gm-page .usl-std{
    grid-template-columns:1fr; justify-content:stretch; row-gap:clamp(28px,6vw,44px);
    padding:clamp(56px,11vw,80px) clamp(18px,3vw,44px) clamp(60px,12vw,90px);
  }
  /* Na telefonie kadr 370/493 zabralby caly ekran, zanim tekst w ogole sie zacznie. */
  body.gm-page .usl-std__figure{ aspect-ratio:4/3; }
  body.gm-page .usl-std .elementor-widget-text-editor p.usl-std__p{
    font-size:16px; line-height:1.55; max-width:none;
  }
}

/* ---------- 36. WIEKSZY ODDECH POD OSIA PROCESU NA SPRZEDAZY (Seb 19.09) ----------
   Po ostatnim etapie („Finalizacja") sekcja konczyla sie niemal od razu — bazowe
   `padding-bottom` z `.abo-prc` to clamp(44px,6.4vh,80px), czyli ~58 px na 1440x900,
   a sasiednie sekcje tej podstrony maja pod trescia 130-160 px.
   ⚠️ `:not(.gm-rytm)` zawezza to do SPRZEDAZY: te same klasy `abo-prc usl-prc` nosi
   sekcja procesu na /uslugi/fotografia-i-wideo (tam z `gm-rytm`), a sam `.abo-prc`
   jest wspolny z /o-nas — zmiana bez zawezenia poszlaby na trzy podstrony naraz. */
body.gm-page .usl-prc:not(.gm-rytm){ padding-bottom:clamp(90px,14vh,160px); }
@media(max-width:900px){
  body.gm-page .usl-prc:not(.gm-rytm){ padding-bottom:clamp(72px,17vw,104px); }
}


/* ---------- 37. BEZPIECZENSTWO JAKO KARTA + TARCZA (Seb 19.09) ----------
   ⚠️ Modyfikator `usl-bz--karta`, bo sama klasa `.usl-bz` zyje na CZTERECH podstronach
   (sprzedaz, fotografia, /zglos-nieruchomosc, /dolacz-do-nas) — reguly bez modyfikatora
   poszlyby na wszystkie. Z tego samego powodu ciemna karta nad nia (`usl-std`) dostaje
   `sticky` tutaj, a nie w swojej sekcji: to ta sekcja na niej jezdzi. */
/* ⚠️ 19.09, runda 2: sekcja NIE wjezdza juz jak karta (Seb: „ma byc jakby pod ta sekcja
   z dwoma kolumnami"). Dlatego `usl-std` stracilo `position:sticky` — bylo przypiete
   WYLACZNIE po to, zeby bezpieczenstwo po niej jechalo. Karta zostaje tylko jedna:
   ciemny „Standard Galerii" wjezdzajacy na przypieta sekcje „Po publikacji".
   Tresc trzyma DOKLADNIE te sama siatke co karta wyzej (420 + 620 px, wysrodkowane),
   zeby oba ciemne pasy czytaly sie jako jeden blok. */
body.gm-page .usl-bz--karta{
  position:relative; z-index:7;
  min-height:100vh; min-height:100svh; align-items:center;
  /* Kolumna z naglowkiem SZERSZA (Seb 19.09): 600 px zamiast 470 — przy 54 px stopnia
     naglowek lamal sie na piec wierszy. Akordeon bierze reszte siatki tresci. */
  grid-template-columns:minmax(0,600px) minmax(0,1fr); justify-content:stretch;
  column-gap:clamp(32px,5vw,72px);
}
/* ⚠️ Rysowana tarcza USUNIETA 19.09 na prosbe Seba (byla: SVG w lewej kolumnie,
   kreska bordo/krem, dlugosci sciezek z `getTotalLength`, rysowanie na wejsciu
   w kadr). W markupie, CSS i silniku nie ma po niej sladu. */
@media(max-width:900px){
  /* ⚠️ Przypiecie ciemnej karty i pelny ekran znikaja na telefonie: tresc bezpieczenstwa
     (opis + przycisk + cztery pozycje akordeonu) jest tam duzo wyzsza niz ekran, a przypieta
     sekcja nad nia chowalaby swoj dol (ta sama decyzja co przy `usl-pop`). */
  body.gm-page .usl-bz--karta{
    min-height:0; grid-template-columns:1fr; justify-content:stretch;
  }
}


/* ---------- 38. JEDEN STOPIEN NAGLOWKOW SEKCJI NA SPRZEDAZY (Seb 19.09) ----------
   „Ujednolic naglowki, maja byc jak na stronie glownej" — czyli standard z §21:
   Montserrat 400, WERSALIKI, tracking -.02em, interlinia 1.08, clamp(1.4rem,3.8vw,54px)
   (telefon clamp(1.9rem,8.5vw,2.6rem)). Do tej pory ta podstrona miala wlasna miare:
   waga 300, 40 px, tracking .06em/.11em i interlinia 1.25.
   ⚠️ Klasa `usl-hsec` siedzi na KONKRETNYCH naglowkach tej podstrony, bo klasy `usl-bz__h`,
   `usl-om__h`, `usl-faq__h`, `abo-prc__h` sa wspolne z /o-nas, /zglos, /dolacz i fotografia —
   reguly na samych klasach rozjechalyby tamte strony.
   ⚠️ Blok stoi na KONCU pliku celowo: musi bic pozniejsza regule mobilna (28,8 px) i wlasne
   wczesniejsze ustawienie `.abo-ref--usl` (40 px). */
body.gm-page .usl-hsec,
body.gm-page .abo-ref--usl .abo-ref__h{
  font-family:var(--sans); font-weight:400; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1.08; font-size:clamp(1.4rem,3.8vw,54px);
}
/* ⚠️ Naglowek opinii schodzi na 48 px (Seb 19.09) — DOKLADNIE tak samo jak na home,
   gdzie ta jedna sekcja stoi 48 px przy reszcie na 54 (§28). Zdanie z kropkami jest
   dluzsze niz pozostale tytuly i przy 54 px ciagnelo sie przez cala siatke. */
body.gm-page .abo-ref--usl .abo-ref__h{ font-size:clamp(1.4rem,3.8vw,48px); }
@media(max-width:900px){
  body.gm-page .usl-hsec,
  body.gm-page .abo-ref--usl .abo-ref__h{ font-size:clamp(1.9rem,8.5vw,2.6rem); line-height:1.1; }
}


/* ---------- 39. BEZPIECZENSTWO NA CIEMNYM = CIAG DALSZY KARTY O AGENCIE (Seb 19.09) ----------
   Sekcja przejmuje tlo #16151e po „Standardzie Galerii" i jest od niego oddzielona jasna
   kreska (`border-top`) — dwa ciemne pasy bez kreski zlalyby sie w jeden.
   ⚠️ `border-top`, a NIE `::before`: Elementor pozycjonuje pseudoelementy swoich kontenerow
   absolutnie (warstwa tla), wiec kreska z `::before` polozylaby sie NA tresci.
   ⚠️ CALA tresc idzie na jasno — rowniez to, co na bieli bylo bordowe (kicker, tytuly
   akordeonu): bordo #590B11 na #16151e praktycznie nie istnieje (zasada z off-marketu).
   ⚠️ Tarcza tez kremowa, nie bordowa (Seb chcial bordo, gdy sekcja byla biala) — na czarnym
   bordowa kreska 1,6 px bylaby ledwo widoczna.
   ⚠️ Atrybut `data-hd="dark"` nadaje js-pre.js PO KLASIE `.usl-bz--karta`, nie po id `uslBz`:
   ten sam id nosza BIALE sekcje na /uslugi/fotografia-i-wideo i /zglos-nieruchomosc, wiec
   wpis w mapie `HD` zepsulby nagłowek na tamtych podstronach. */
/* ⚠️ COFNIETE 19.09: sekcja NIE jest juz ciemna ani „ciagiem dalszym" karty o agencie.
   Jest SZARA i znow wjezdza jak karta na przypieta ciemna sekcje (Seb: „bezpieczenstwo
   wjezdza jak karta na szarym tle"). Razem z ciemnym tlem wylecialy wszystkie jasne
   nadpisania kolorow (kicker, naglowek, tytuly akordeonu, lead, opisy, przycisk)
   i rozdzielacz rysowany tlem — treść wraca do bazowych, ciemnych kolorow `.usl-bz`. */
body.gm-page .usl-bz--karta{ background:#F5F5F5; }


/* ---------- 40. OPINIE WJEZDZAJA ZAKLADKA NA OFF-MARKET (Seb 19.09) ----------
   Ten sam chwyt co przy „Po publikacji" → „Standard Galerii": sekcja pod spodem jest
   przypieta, a ta nad nia ma nieprzezroczyste tlo i wyzsza warstwe. Zero JS.
   `.abo-ref` ma juz `z-index:8` i tlo #F5F5F5, wiec wystarczy przypiac off-market.
   ⚠️ Na telefonie przypiecie zdjete: `.usl-om` ma tam dokladnie `100svh`, a przy pasku
   adresu iOS potrafi to byc chwilowo wiecej niz ekran — przypieta sekcja chowalaby wtedy
   swoj dol pod karuzela opinii. */
body.gm-page .usl-om{ position:sticky; top:0; }
@media(max-width:900px){
  body.gm-page .usl-om{ position:relative; }
}


/* ---------- 41. SEKCJA „FOTO / WIDEO" NA SPRZEDAZY (Seb 19.09) ----------
   Naglowek + dwa akapity, pod spodem pas kadrow plynacy w prawo.
   ⚠️ Rozdzielacz bordo rysowany TLEM (nie `border-top`, nie `::before`): ma trzymac siatke
   tresci, a pseudoelementy kontenerow Elementor pozycjonuje absolutnie.
   ⚠️ `z-index:3` i nieprzezroczyste tlo — sekcja wjezdza na przypieta karte „Nie ograniczamy
   sprzedazy…" (`usl-crd`, z-index 2), a sama oddaje pole sekcji „Co zyskujesz" (tez 3, ale
   pozniejsze rodzenstwo maluje sie na wierzchu). */
/* ⚠️ To TA sekcja jest przypieta (`sticky`) — „Co zyskujesz" wjezdza na nia jak karta
   (Seb 19.09). Wczesniej przypieta byla karta „Nie ograniczamy…", przez co jak karta
   wjezdzala wlasnie sekcja foto/wideo. `z-index:2`, czyli nizej niz `usl-cz` (3).
   ⚠️ Tresc WYSRODKOWANA w tej samej miare co karta wyzej (`.usl-crd__in` = 1120 px),
   lacznie z bordowym rozdzielaczem — stad `background-size` liczone z tej samej wartosci. */
body.gm-page .usl-fw{
  position:sticky; top:0; z-index:2; background:#fff; color:var(--ink);
  /* ⚠️ Wlasne marginesy, WEZSZE niz standardowe clamp(18px,3vw,44px) calej podstrony
     (Seb 19.09: „marginesy za duze") — 24 px zamiast 43 px na 1440. Odstep od gory
     tez sciety: 28 px zamiast 49 px. */
  padding:clamp(18px,3vh,28px) clamp(12px,1.7vw,24px) clamp(96px,15vh,170px);
  overflow:hidden;
}
/* ⚠️ Rozdzielacz USUNIETY 19.09 (byl: wlasny element `.usl-fw__rule`, bordo, 1120 px).
   Gdyby wracal: miara musi siedziec na SAMEJ kresce — `max-width` na wrapperze widgetu
   jest ignorowane, a tlo sekcji przegrywa z CSS-em strony Elementora (oba zmierzone).
   ⚠️ Uklad po dwoch rundach (Seb 19.09): byly dwie kolumny (naglowek | tekst), ale naglowek
   przy 54 px bral piec wierszy i prawa kolumna swiecila pustka od polowy w dol. Jest:
   tekst POD naglowkiem, wciety od lewej o 150 px — ten sam chwyt co zakonczenie osi
   procesu (`.usl-prc__out`, wciecie 25 %). */
/* ⚠️ Szerokosc STANDARDOWA podstrony (Seb 19.09), nie 1120 px z karty wyzej: tresc idzie
   na pelna siatke, czyli 43…1397 px na 1440 — tak jak „Bezpieczenstwo" i reszta sekcji. */
/* ⚠️ Uklad po pieciu rundach — OBOWIAZUJE: DWIE ROWNE KOLUMNY (naglowek | tekst)
   na szerokosci sekcji „Proces wspolpracy", czyli pelnej siatce tresci 43…1397 px na 1440.
   Kicker stoi nad obiema kolumnami — to etykieta sekcji, nie czesc naglowka. */
body.gm-page .usl-fw__head{
  /* ⚠️ `max-width:none`, inaczej siatka 1360 px obcielaby tresc mimo wezszych marginesow. */
  max-width:none; margin:0 auto; text-align:left;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start;
  column-gap:clamp(32px,5vw,72px);
}
body.gm-page .usl-fw__kicker{ grid-column:1 / -1; }
body.gm-page .usl-fw__txt{ display:block; }
body.gm-page .usl-fw__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-fw__h{ margin:clamp(10px,1.6vh,18px) 0 0; color:var(--ink); }
/* Jedna miara tekstow tej podstrony: 300 / 17 px / 25 px. Odstep miedzy akapitami idzie
   z `!important` na wrapperze widgetu — arkusz Elementora zeruje jego marginesy. */
body.gm-page .usl-fw__txt > .elementor-widget-text-editor + .elementor-widget-text-editor{
  margin-top:clamp(18px,2.6vh,30px) !important;
}
/* Wciecie akapitow: 150 px na szerokim ekranie, plynnie w dol przy wezszych.
   ⚠️ Margines idzie na KONTENER kolumny tekstu, nie na `<p>` — akapit siedzi we wrapperze
   widgetu, wiec jego wlasny margines i tak zostalby wyzerowany przez arkusz Elementora. */
/* Prawa kolumna startuje rowno z naglowkiem (ten sam odstep od kickera).
   Dosuniecie tekstu do prawej krawedzi (runda wczesniej) juz NIE obowiazuje — w kolumnie
   obok naglowka wyrownanie do lewej czyta sie spokojniej. */
body.gm-page .usl-fw__txt{ margin-top:clamp(10px,1.6vh,18px); max-width:none; }
body.gm-page .elementor-widget-text-editor p.usl-fw__p{
  margin:0; font-family:var(--sans); font-weight:300; font-size:17px; line-height:25px;
  color:rgba(22,21,30,.78); max-width:none;
}
/* --- pas kadrow: leci SAM, bez scrolla i bez JS ---
   ⚠️ Tor ma DWA komplety zdjec, a animacja przesuwa go o polowe wlasnej szerokosci —
   dzieki temu petla jest bezszwowa i nie widac „przeskoku" na koncu.
   ⚠️ Kierunek: od -50% do 0, czyli kadry plyna W PRAWO (Seb: „od lewej do prawej"). */
body.gm-page .usl-fw__strip{
  display:block; width:100%; margin-top:clamp(36px,5.4vh,66px); overflow:hidden;
}
body.gm-page .usl-fw__track{
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  width:max-content; gap:clamp(12px,1.4vw,22px);
  animation:gmFwSlide 46s linear infinite;
}
@keyframes gmFwSlide{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
/* ⚠️ Klasa obrazu laduje na WRAPPERZE widgetu, wiec proporcje ustawiamy na nim,
   a zdjecie w srodku rozciagamy mostem `> img` (ta sama pulapka co przy `.abt__figure`). */
body.gm-page .usl-fw__img{
  flex:0 0 auto; width:clamp(220px,24vw,340px); aspect-ratio:4/3; overflow:hidden;
  background:rgba(22,21,30,.06);
}
body.gm-page .usl-fw__img img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(prefers-reduced-motion:reduce){
  body.gm-page .usl-fw__track{ animation:none; transform:translateX(0); }
}
@media(max-width:900px){
  /* ⚠️ Bez przypiecia na telefonie: sekcja jest tam wyzsza niz ekran, wiec przypieta
     chowalaby swoj dol pod karta „Co zyskujesz" (ta sama decyzja co przy `usl-pop`). */
  body.gm-page .usl-fw{ position:relative; padding:clamp(40px,8vw,56px) clamp(18px,3vw,44px) clamp(80px,17vw,120px); }
  body.gm-page .usl-fw__h br{ display:none; }
  /* Na telefonie jedna kolumna — naglowek nad tekstem. */
  body.gm-page .usl-fw__head{ grid-template-columns:1fr; row-gap:clamp(18px,4vw,26px); }
  body.gm-page .usl-fw__txt{ margin-top:0; }
  body.gm-page .elementor-widget-text-editor p.usl-fw__p{ font-size:15px; line-height:1.5; max-width:none; }
  body.gm-page .usl-fw__img{ width:clamp(180px,52vw,240px); }
  body.gm-page .usl-fw__track{ animation-duration:34s; }
}


/* ---------- 42. MNIEJ PUSTKI MIEDZY KARTA „NIE OGRANICZAMY…" A SEKCJA FOTO/WIDEO ----------
   (Seb 19.09) Karta ma tresc wysrodkowana w pionie, wiec przy `min-height:100svh` zostawalo
   pod nia 167 px pustki, a z paddingiem sekcji nizej dawalo to 194 px przerwy.
   82svh schodzi z tym do ~112 px, a karta dalej wypelnia niemal caly ekran.
   ⚠️ `:not(.usl-crd--flow)` — ta sama klasa `.usl-crd` zyje na /uslugi/fotografia-i-wideo
   (tam z modyfikatorem `--flow`), wiec bez zawezenia zmiana poszlaby na obie podstrony.
   ⚠️ Mechanika sie nie zmienia: karta od 19.09 NIE jest przypieta (przypieta jest sekcja
   foto/wideo pod nia), wiec pelny ekran mial tu juz tylko role wizualna. */
body.gm-page .usl-crd:not(.usl-crd--flow){ min-height:82svh; }


/* ---------- 43. HERO /uslugi/fotografia-i-wideo — ZAPAS NA PASEK BOCZNY (19.09) ----------
   Prawa kolumna hero dobiegala do 1397 px, a `.rail` (ikony przy prawej krawedzi) zaczyna
   sie na 1387 — ostatnie slowa wierszy wchodzily pod ikony. Zawezone do tej podstrony,
   bo pozostale hero maja krotsze wiersze i zapas by im tylko zabral szerokosc. */
body.gm-page .usl-int--foto .usl-int__col{ padding-right:clamp(0px,4.6vw,66px); }


/* ================= 44. PRZEBUDOWA /o-nas/ (Seb 19.09) =========================
   Nowe sekcje: standard Galerii, zespol, backstage, dolacz do nas + teaser procesu
   i nowe CTA. Wspolna zasada: kazda sekcja ma WLASNY `z-index` — kolaz (`abo-gz`)
   jest przypiety i bez warstwy wychodzi kolejnym sekcjom na wierzch. */

/* ---- 4. STANDARD GALERII ---- */
/* ⚠️ Pelny ekran (Seb 19.09), tresc wysrodkowana takze W PIONIE.
   `min-height`, nie `height`: na telefonie naglowek + trzy akapity + puenta + trzy filary
   sa WYZSZE niz ekran i sztywna wysokosc ucielaby dol.
   ⚠️ Kierunek i wyrownanie z `!important` — kontenery Elementora trzymaja flexa na wlasnych
   zmiennych i same przestawiaja kierunek na telefonie. */
body.gm-page .abo-std{
  position:relative; z-index:8; background:#fff; color:var(--ink);
  padding:clamp(56px,9vh,110px) clamp(18px,3vw,44px) clamp(60px,10vh,120px);
  min-height:100vh; min-height:100svh;
  display:flex !important; flex-direction:column !important; justify-content:center !important;
}
/* ⚠️ Sekcja WYSRODKOWANA (Seb 19.09). Samo `text-align:center` nie wystarcza:
   na WordPressie akapit siedzi we wrapperze widgetu zajmujacym cala szerokosc, wiec blok
   o wlasnej `max-width` zostalby przy lewej krawedzi — stad `margin-inline:auto` na <p>
   (ta sama pulapka co przy intrze sekcji Radka na home). */
body.gm-page .abo-std__head{ max-width:1360px; margin:0 auto; text-align:center; }
body.gm-page .abo-std__kicker,
body.gm-page .abo-zsp__kicker,
body.gm-page .abo-bts__kicker,
body.gm-page .abo-tsr__kicker,
body.gm-page .abo-jn__kicker{
  display:block; font-family:var(--serif); font-style:italic; text-transform:uppercase;
  letter-spacing:.12em; color:#590B11; font-size:clamp(.68rem,.9vw,13px);
}
/* Jeden stopien naglowkow tej podstrony: 400 / clamp(1.4rem,2.75vw,40px) — taki sam,
   jaki maja `.abo-prc__h` i `.abo-why__h` (patrz §21: na /o-nas obowiazuje 40 px, a nie 54). */
body.gm-page .abo-std__h,
body.gm-page .abo-zsp__h,
body.gm-page .abo-bts__h,
body.gm-page .abo-tsr__h,
body.gm-page .abo-jn__h{
  margin:clamp(10px,1.6vh,18px) 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);
}
/* ⚠️ Selektor przez widget: Elementor wymusza `color:inherit` na <p> z wyzsza
   specyficznoscia niz sama klasa (pulapka wracajaca przy kazdej nowej sekcji). */
body.gm-page .abo-std .elementor-widget-text-editor p.abo-std__p{
  margin:clamp(18px,2.6vh,30px) auto 0; font-family:var(--sans); font-weight:300;
  font-size:clamp(1rem,1.25vw,18px); line-height:1.6; color:rgba(22,21,30,.82); max-width:74ch;
}
body.gm-page .abo-std .elementor-widget-text-editor p.abo-std__out{
  margin:clamp(26px,4vh,44px) auto 0; font-family:var(--sans); font-weight:500;
  font-size:clamp(1rem,1.3vw,19px); line-height:1.6; color:var(--ink);
}
body.gm-page .abo-std__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,2.6vw,46px);
  max-width:1360px; margin:clamp(40px,6vh,72px) auto 0;
}
/* Filary wchodza PO KOLEI (Seb 19.09) — opoznienie `--d` nadaje silnik w js-pre.js,
   0,45 s na blok, ta sama miara co przy wyroznikach na sprzedazy i kaflach „Po publikacji".
   ⚠️ `!important` na `transition`, bo Elementor naklada kontenerom wlasne `transform .4s`. */
body.gm-page .abo-std__it{
  border-top:1px solid rgba(22,21,30,.2); padding-top:clamp(14px,2vh,20px); text-align:center;
  opacity:0; transform:translateY(18px);
  transition:opacity 1.25s ease var(--d,0s),
             transform 1.4s cubic-bezier(.22,.61,.36,1) var(--d,0s) !important;
}
body.gm-page .abo-std__it.is-on{ opacity:1; transform:none; }
/* ⚠️ `lining-nums` — Cormorant domyslnie daje cyfry mediewalne (ta sama pulapka co na osi). */
body.gm-page .abo-std__n{
  display:block; font-family:var(--serif); font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1; font-size:clamp(1rem,1.3vw,19px); line-height:1; color:#590B11;
}
body.gm-page .abo-std__t{
  margin:clamp(8px,1.2vh,14px) 0 0; font-family:var(--sans); font-weight:400;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.2; color:var(--ink);
  font-size:clamp(.98rem,1.3vw,20px);
}
body.gm-page .abo-std__d{
  margin:clamp(8px,1.2vh,14px) 0 0; font-family:var(--sans); font-weight:300;
  font-size:17px; line-height:25px; color:rgba(22,21,30,.78);
}

/* ---- 5. ZESPOL ---- */
body.gm-page .abo-zsp{
  position:relative; z-index:8; background:#F5F5F5; color:var(--ink);
  padding:clamp(70px,11vh,130px) clamp(18px,3vw,44px) clamp(80px,13vh,150px);
}
body.gm-page .abo-zsp__head{ max-width:1360px; margin:0 auto; }
body.gm-page .abo-zsp .elementor-widget-text-editor p.abo-zsp__lead{
  margin:clamp(16px,2.4vh,26px) 0 0; font-family:var(--sans); font-weight:300;
  font-size:clamp(1rem,1.25vw,18px); line-height:1.6; color:rgba(22,21,30,.82); max-width:62ch;
}
/* ⚠️ `auto-fill` + `minmax`, nie sztywne kolumny: sekcja ma byc GOTOWA na kolejne osoby —
   dolozenie krotki do `ZESPOL` ma tylko dolozyc karte, bez ruszania CSS. */
body.gm-page .abo-zsp__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));
  gap:clamp(20px,2.4vw,40px); max-width:1360px; margin:clamp(36px,5.4vh,66px) auto 0;
}
body.gm-page .abo-zsp__card{ display:block; background:#fff; padding:clamp(16px,1.6vw,24px); }
body.gm-page .abo-zsp__figure{
  position:relative; overflow:hidden; aspect-ratio:3/4; background:rgba(22,21,30,.07);
  margin-bottom:clamp(16px,2.2vh,24px);
}
body.gm-page .abo-zsp__figure .elementor-widget-image{ display:contents; }
body.gm-page .abo-zsp__photo,
body.gm-page .abo-zsp__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
body.gm-page .abo-zsp__name{
  margin:0; font-family:var(--serif); font-weight:400; text-transform:uppercase;
  letter-spacing:-.01em; line-height:1.1; font-size:clamp(1.15rem,1.7vw,25px); color:var(--ink);
}
body.gm-page .abo-zsp__role{
  display:block; margin-top:clamp(6px,1vh,10px); 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-zsp .elementor-widget-text-editor p.abo-zsp__reg{
  margin:clamp(10px,1.6vh,16px) 0 0; font-family:var(--sans); font-weight:300;
  font-size:15px; line-height:23px; color:rgba(22,21,30,.78);
}
body.gm-page .abo-zsp__con{
  display:flex; flex-direction:column; gap:4px; margin-top:clamp(12px,1.8vh,18px);
}
body.gm-page .abo-zsp__lnk{
  font-family:var(--sans); font-weight:400; font-size:15px; line-height:23px;
  color:var(--ink); text-decoration:none; transition:color .3s;
}
body.gm-page .abo-zsp__lnk:hover{ color:#590B11; }
body.gm-page .abo-zsp__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:clamp(14px,2vh,20px);
  font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(.66rem,.8vw,11.5px); color:#590B11; text-decoration:none;
}
body.gm-page .abo-zsp__cta .ar{ transition:transform .35s cubic-bezier(.16,1,.3,1); }
body.gm-page .abo-zsp__cta:hover .ar{ transform:translateX(5px); }
/* Karta „juz wkrotce": bez twarzy i bez zdjecia konkretnej osoby — samo rozmyte pole. */
body.gm-page .abo-zsp__card--soon{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px dashed rgba(22,21,30,.25); background:rgba(255,255,255,.55);
}
body.gm-page .abo-zsp__soon{ display:block; padding:clamp(24px,4vw,44px) 0; }
body.gm-page .abo-zsp__soon-ph{
  display:block; width:clamp(90px,9vw,120px); height:clamp(120px,12vw,160px);
  margin:0 auto clamp(16px,2.4vh,26px); border-radius:50% 50% 46% 46%;
  background:radial-gradient(60% 50% at 50% 34%, rgba(22,21,30,.28), rgba(22,21,30,.1) 60%,
    rgba(22,21,30,0) 72%);
  filter:blur(6px);
}
body.gm-page .abo-zsp__soon-t{
  display:block; font-family:var(--sans); font-weight:400; text-transform:uppercase;
  letter-spacing:.16em; font-size:clamp(.72rem,.9vw,13px); color:rgba(22,21,30,.7);
}
body.gm-page .abo-zsp__soon-d{
  display:block; margin-top:8px; font-family:var(--sans); font-weight:300;
  font-size:15px; line-height:23px; color:rgba(22,21,30,.6);
}

/* ---- 7. PROCES — TEASER ---- */
body.gm-page .abo-tsr{
  position:relative; z-index:8; background:#fff; color:var(--ink);
  padding:clamp(70px,11vh,130px) clamp(18px,3vw,44px);
}
body.gm-page .abo-tsr__in{ max-width:1360px; margin:0 auto; }
/* --- OS PIONOWA RYSOWANA SCROLLEM (Seb 19.09) ---
   Byl poziomy lancuch ze strzalkami; jest timeline: kreska wypelnia sie w dol razem
   z przewijaniem, a punkty zapalaja sie kolejno.
   ⚠️ Zero `transition` na wypelnieniu — wartosc przychodzi co klatke ze scrolla i wlasne
   przejscie CSS bilo by sie z nia (ta sama rodzina pulapki co przy wykresie na home). */
/* ⚠️ Os WYSRODKOWANA (Seb 19.09): `width:fit-content` + `margin-inline:auto` — bez
   `fit-content` blok zajmuje cala szerokosc sekcji i „wycentrowanie" nic nie zmienia,
   bo tor i tak wisi przy lewej krawedzi. Naglowek i przycisk tez ida na srodek,
   inaczej os wygladalaby jak przesunieta przez pomylke. */
body.gm-page .abo-tsr__in{ text-align:center; }
/* ⚠️ Uklad NAPRZEMIENNY (Seb 19.09): os biegnie SRODKIEM, etapy stoja raz po lewej,
   raz po prawej. Cala lista jest jednym blokiem HTML w jednym widgecie, wiec `nth-of-type`
   dziala tu normalnie — inaczej niz przy slupkach `abo-val`, gdzie kazdy element siedzial
   we wlasnym wrapperze Elementora i trzeba bylo liczyc wrappery.
   ⚠️ `nth-of-type`, nie `nth-child`: pierwszym dzieckiem <ol> jest tor (`span`), wiec
   `nth-child` przesunalby cala numeracje o jeden. */
body.gm-page .abo-tsr__tl{
  list-style:none; position:relative; margin:clamp(30px,4.6vh,56px) auto 0;
  padding:0; width:min(940px,100%); text-align:left;
}
body.gm-page .abo-tsr__track{
  position:absolute; left:50%; transform:translateX(-50%); top:6px; bottom:6px; width:1px;
  background:rgba(22,21,30,.18);
}
body.gm-page .abo-tsr__fill{
  display:block; width:100%; height:100%; background:#590B11;
  transform:scaleY(var(--p,0)); transform-origin:top; transition:none !important;
}
body.gm-page .abo-tsr__step{
  position:relative; display:flex; align-items:baseline; gap:clamp(10px,1.2vw,18px);
  /* Wieksze przerwy miedzy etapami (Seb 19.09): bylo clamp(9px,1.4vh,14px). */
  padding:clamp(18px,3.2vh,34px) 0;
  width:calc(50% - clamp(26px,3vw,44px));
  opacity:.28; transform:translateY(6px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
/* Nieparzyste po LEWEJ stronie osi (tekst do prawej, numer blizej osi),
   parzyste po PRAWEJ. Naprzemiennosc idzie z `nth-of-type`, nie z markupu. */
body.gm-page .abo-tsr__step:nth-of-type(odd){
  margin-right:auto; text-align:right; flex-direction:row-reverse;
}
body.gm-page .abo-tsr__step:nth-of-type(even){ margin-left:auto; text-align:left; }
body.gm-page .abo-tsr__step.is-on{ opacity:1; transform:none; }
body.gm-page .abo-tsr__dot{
  position:absolute; top:calc(clamp(18px,3.2vh,34px) + .55em);
  width:9px; height:9px; border-radius:50%; background:#fff;
  border:1px solid rgba(22,21,30,.3); transition:background .45s ease, border-color .45s ease;
}
/* Kropka zawsze NA osi: dla lewej kolumny przy jej prawej krawedzi, dla prawej przy lewej. */
body.gm-page .abo-tsr__step:nth-of-type(odd) .abo-tsr__dot{
  right:calc(-1 * clamp(26px,3vw,44px) - 4px); left:auto;
}
body.gm-page .abo-tsr__step:nth-of-type(even) .abo-tsr__dot{
  left:calc(-1 * clamp(26px,3vw,44px) - 4px); right:auto;
}
body.gm-page .abo-tsr__step.is-on .abo-tsr__dot{ background:#590B11; border-color:#590B11; }
body.gm-page .abo-tsr__num{
  font-family:var(--serif); font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
  font-size:clamp(.85rem,1.05vw,15px); line-height:1; color:#590B11; flex:0 0 auto;
}
body.gm-page .abo-tsr__name{
  font-family:var(--sans); font-weight:300; text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(1rem,1.45vw,22px); line-height:1.3; color:var(--ink);
}
body.gm-page .abo-tsr__btn{
  display:inline-block; margin-top:clamp(28px,4.4vh,50px);
  padding:clamp(13px,1.6vh,17px) clamp(20px,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,.87vw,12.5px);
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
  transition:background .35s, color .35s, border-color .35s;
}
body.gm-page .abo-tsr__btn:hover{ background:#590B11; border-color:#590B11; color:var(--cream); }

/* ---- 8. GALERIA OD SRODKA (backstage) ---- */
body.gm-page .abo-bts{
  position:relative; z-index:8; background:#F5F5F5; color:var(--ink);
  padding:clamp(70px,11vh,130px) clamp(18px,3vw,44px) clamp(80px,13vh,150px);
}
body.gm-page .abo-bts__head{ max-width:1360px; margin:0 auto; }
body.gm-page .abo-bts__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,26px);
  max-width:1360px; margin:clamp(36px,5.4vh,66px) auto 0;
}
body.gm-page .abo-bts__tile{ display:block; }
body.gm-page .abo-bts__img{
  display:block; overflow:hidden; aspect-ratio:4/3; background:rgba(22,21,30,.07);
}
body.gm-page .abo-bts__img img{ width:100%; height:100%; object-fit:cover; display:block; }
body.gm-page .abo-bts__cap{
  display:block; margin-top:clamp(10px,1.4vh,14px); font-family:var(--sans); font-weight:400;
  text-transform:uppercase; letter-spacing:.14em; font-size:clamp(.66rem,.8vw,11.5px);
  color:rgba(22,21,30,.66);
}

/* ---- 10. DOLACZ DO NAS ---- */
body.gm-page .abo-jn{
  position:relative; z-index:8; background:#fff; color:var(--ink);
  padding:clamp(70px,11vh,130px) clamp(18px,3vw,44px) clamp(80px,13vh,150px);
}
/* ⚠️ Sekcja WYSRODKOWANA (Seb 19.09). Akapity dostaja `margin-inline:auto`, bo na
   WordPressie <p> siedzi we wrapperze widgetu na cala szerokosc i samo `text-align:center`
   zostawiloby blok z wlasna `max-width` przy lewej krawedzi. */
body.gm-page .abo-jn__in{ max-width:1360px; margin:0 auto; text-align:center; }
/* Rozdzielacz: 80 % szerokosci EKRANU, wysrodkowany. Miara siedzi na samej kresce —
   `max-width` na wrapperze widgetu jest ignorowane (zmierzone przy sekcji foto/wideo). */
/* ⚠️ Odstep NAD i POD kreska ma byc TAKI SAM (Seb 19.09). Zeby to bylo policzalne,
   sasiednie paddingi ida do zera: sekcja opinii traci `padding-bottom`, a „Dolacz do nas"
   `padding-top` — inaczej nad kreska siedzialaby suma dwoch paddingow (zmierzone: 108 + 99 px),
   a pod nia sam margines.
   ⚠️ `!important` na marginesie wrappera jest KONIECZNE: arkusz Elementora zeruje marginesy
   wrapperow widgetow — bez tego zmierzony odstep pod kreska wynosil 0 px. */
/* ⚠️⚠️ Odstep NAD kreska musi byc PADDINGIEM SEKCJI, nie marginesem wrappera: margines
   gornego dziecka wychodzil poza sekcje (collapse), wiec miedzy opiniami a „Dolacz do nas"
   powstawal ~81 px PRZEZROCZYSTEJ przerwy — a w niej widac bylo przypiete wideo manifestu
   (`.abo-man` jest `sticky` i klei sie do konca strony). Padding ma tlo sekcji, wiec dziura
   znika, a odstepy zostaja symetryczne.
   ⚠️ `!important` na marginesie dolnym dalej konieczne — arkusz Elementora zeruje marginesy
   wrapperow widgetow. */
body.gm-page .abo-ref--onas{ padding-bottom:0; }
body.gm-page .abo-jn{ padding-top:clamp(56px,9vh,110px); }
body.gm-page .abo-jn__rulewrap{
  display:block; margin:0 0 clamp(56px,9vh,110px) !important;
}
body.gm-page .abo-jn__rule{
  display:block; width:80vw; max-width:100%; margin:0 auto; height:1px; background:#590B11;
}
body.gm-page .abo-jn .elementor-widget-text-editor p.abo-jn__p{
  margin:clamp(18px,2.6vh,30px) auto 0; font-family:var(--sans); font-weight:300;
  font-size:clamp(1rem,1.25vw,18px); line-height:1.6; color:rgba(22,21,30,.82); max-width:70ch;
}
body.gm-page .abo-jn__btn{
  display:inline-block; margin-top:clamp(28px,4.4vh,50px);
  padding:clamp(13px,1.6vh,17px) clamp(20px,2vw,30px);
  border:1px solid #590B11; background:#590B11; color:var(--cream); 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;
}
body.gm-page .abo-jn__btn:hover{ background:transparent; color:#590B11; }

/* ---- 11. CTA — lead pod naglowkiem ---- */
body.gm-page .abo-cta .elementor-widget-text-editor p.abo-cta__lead{
  margin:clamp(18px,2.6vh,30px) auto 0; font-family:var(--sans); font-weight:300;
  font-size:clamp(1rem,1.25vw,18px); line-height:1.6; color:var(--cream); max-width:56ch;
}

@media(max-width:900px){
  body.gm-page .abo-std, body.gm-page .abo-zsp, body.gm-page .abo-bts,
  body.gm-page .abo-tsr, body.gm-page .abo-jn{
    padding-left:clamp(18px,3vw,44px); padding-right:clamp(18px,3vw,44px);
    padding-top:clamp(56px,11vw,80px); padding-bottom:clamp(60px,12vw,90px);
  }
  body.gm-page .abo-std__h, body.gm-page .abo-zsp__h, body.gm-page .abo-bts__h,
  body.gm-page .abo-tsr__h, body.gm-page .abo-jn__h{ font-size:28.8px; line-height:1.14; }
  body.gm-page .abo-std__h br{ display:none; }
  body.gm-page .abo-std__grid{ grid-template-columns:1fr; gap:clamp(18px,2.6vh,26px); }
  body.gm-page .abo-zsp__grid{ grid-template-columns:1fr; }
  body.gm-page .abo-bts__grid{ grid-template-columns:1fr 1fr; }
  body.gm-page .abo-std .elementor-widget-text-editor p.abo-std__p,
  body.gm-page .abo-jn .elementor-widget-text-editor p.abo-jn__p,
  body.gm-page .abo-zsp .elementor-widget-text-editor p.abo-zsp__lead,
  body.gm-page .abo-cta .elementor-widget-text-editor p.abo-cta__lead{
    font-size:15px; line-height:1.55; max-width:none;
  }
  /* ⚠️ Na telefonie ZERO naprzemiennosci: przy kadrze 354 px kolumna na pol ekranu
     dawalaby dwa-trzy slowa w wierszu. Os wraca do lewej krawedzi, etapy pod soba. */
  body.gm-page .abo-tsr__tl{ width:100%; padding-left:clamp(22px,7vw,30px); }
  body.gm-page .abo-tsr__track{ left:clamp(5px,1.4vw,8px); transform:none; }
  body.gm-page .abo-tsr__step,
  body.gm-page .abo-tsr__step:nth-of-type(odd),
  body.gm-page .abo-tsr__step:nth-of-type(even){
    width:100%; margin:0; text-align:left; flex-direction:row;
  }
  body.gm-page .abo-tsr__step:nth-of-type(odd) .abo-tsr__dot,
  body.gm-page .abo-tsr__step:nth-of-type(even) .abo-tsr__dot{
    left:calc(-1 * clamp(22px,7vw,30px) + clamp(1px,.4vw,3px)); right:auto;
  }
  body.gm-page .abo-tsr__name{ font-size:17px; }
  /* przyciski na pelna szerokosc — jak pozostale CTA w bloku mobilnym */
  body.gm-page .abo-tsr__btn, body.gm-page .abo-jn__btn{
    display:flex; align-items:center; justify-content:center; width:100%; min-height:56px;
    text-align:center; font-size:11px; letter-spacing:.14em; line-height:1.35;
  }
}


/* ---------- 45. WARTOSCI JAKO SLUPKI (/o-nas, Seb 19.09) ----------
   Cztery pionowe slupki rosnace od dolu, jeden po drugim (silnik w js-pre.js nadaje `--d`).
   ⚠️ Slupek rosnie przez `transform:scaleY` z `transform-origin:bottom`, NIE przez `height`:
   transform idzie po kompozytorze, wiec animacja nie przelicza ukladu przy kazdej klatce.
   ⚠️ `!important` na `transition` — Elementor naklada kazdemu widgetowi wlasne `transform .4s`
   i bez wyzerowania slupek „plywa" zamiast rosnac rowno. */
body.gm-page .abo-val{
  position:relative; z-index:8; background:#fff; color:var(--ink);
  padding:clamp(70px,11vh,130px) clamp(18px,3vw,44px) clamp(80px,13vh,150px);
}
body.gm-page .abo-val__head{ max-width:1360px; margin:0 auto; }
body.gm-page .abo-val__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 .abo-val__h{
  margin:clamp(10px,1.6vh,18px) 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);
}
body.gm-page .abo-val__chart{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.4vw,40px);
  /* ⚠️ `align-items:start`, NIE `end`: przy wyrownaniu dolem kolumna z krotszym opisem
     przesuwala caly swoj slupek w dol i pierwszy stal 25 px nizej od reszty (zmierzone
     na zrzucie). Slupki maja startowac z jednej linii — rowna je gorna krawedz. */
  align-items:start; max-width:1360px; margin:clamp(44px,6.6vh,80px) auto 0;
}
body.gm-page .abo-val__it{ display:block; }
/* Tor slupka trzyma wysokosc, zeby podpisy startowaly z jednej linii takze przed animacja. */
/* ⚠️ Tor ma STALA wysokosc, a slupek siada przy jego DOLE i zajmuje `--bh` procent —
   dzieki temu slupki sa rosnace, a podpisy pod nimi dalej startuja z jednej linii. */
body.gm-page .abo-val__barwrap{
  display:flex; align-items:flex-end; height:clamp(110px,16vh,190px);
  margin-bottom:clamp(16px,2.2vh,24px); border-bottom:1px solid rgba(22,21,30,.2);
}
body.gm-page .abo-val__bar{
  display:block; width:100%; height:var(--bh,100%); background:#590B11;
  transform:scaleY(0); transform-origin:bottom;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1) var(--d,0s) !important;
}
/* Rosnaca linia (Seb 19.09: „niech beda rosnace"). ⚠️ To NIE sa dane — kolejnosc wartosci
   jest redakcyjna, a nie rankingiem waznosci; wysokosci sa tylko rytmem wejscia. */
/* ⚠️ `nth-child` MUSI siedziec na WRAPPERZE widgetu, nie na `.abo-val__it`: kazdy `__it`
   jest jedynym dzieckiem swojego wrappera, wiec `:nth-child(1)` lapalo WSZYSTKIE cztery
   (zmierzone: kazdy slupek mial 52 % wysokosci toru). */
body.gm-page .abo-val__chart > *:nth-child(1) .abo-val__it{ --bh:52%; }
body.gm-page .abo-val__chart > *:nth-child(2) .abo-val__it{ --bh:68%; }
body.gm-page .abo-val__chart > *:nth-child(3) .abo-val__it{ --bh:84%; }
body.gm-page .abo-val__chart > *:nth-child(4) .abo-val__it{ --bh:100%; }
body.gm-page .abo-val__it.is-on .abo-val__bar{ transform:scaleY(1); }
body.gm-page .abo-val__n{
  display:block; font-family:var(--serif); font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1; font-size:clamp(1rem,1.3vw,19px); line-height:1; color:#590B11;
}
body.gm-page .abo-val__t{
  margin:clamp(8px,1.2vh,14px) 0 0; font-family:var(--sans); font-weight:400;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.2; color:var(--ink);
  font-size:clamp(.98rem,1.3vw,20px);
}
body.gm-page .abo-val__d{
  margin:clamp(8px,1.2vh,14px) 0 0; font-family:var(--sans); font-weight:300;
  font-size:16px; line-height:24px; color:rgba(22,21,30,.78);
}
@media(max-width:900px){
  body.gm-page .abo-val{ padding:clamp(56px,11vw,80px) clamp(18px,3vw,44px) clamp(60px,12vw,90px); }
  body.gm-page .abo-val__h{ font-size:28.8px; line-height:1.14; }
  /* Na telefonie DWIE kolumny: przy jednej slupki zamienilyby sie w cztery ekrany,
     a przy czterech mialyby po 70 px szerokosci. */
  body.gm-page .abo-val__chart{ grid-template-columns:1fr 1fr; gap:clamp(18px,4vw,26px); }
  body.gm-page .abo-val__barwrap{ height:clamp(70px,14vw,96px); }
  body.gm-page .abo-val__t{ font-size:17px; }
  body.gm-page .abo-val__d{ font-size:15px; line-height:22px; }
}


/* ---------- 46. ZESPOL — JEDNA OSOBA = KARTA NA PELNA SZEROKOSC (Seb 19.09) ----------
   Przy jednym agencie kafel wielkosci 1/3 siatki wygladal jak niedokonczona sekcja.
   Modyfikator `--solo` (dokladany z dlugosci listy `ZESPOL`) rozklada karte poziomo:
   zdjecie po lewej, dane po prawej. Po dodaniu drugiej osoby modyfikator znika sam. */
body.gm-page .abo-zsp__grid--solo{ grid-template-columns:1fr; }
body.gm-page .abo-zsp__grid--solo .abo-zsp__card{
  display:grid !important; grid-template-columns:minmax(0,420px) minmax(0,1fr);
  align-items:center; column-gap:clamp(28px,3.6vw,60px);
  padding:clamp(20px,2vw,32px);
  /* ⚠️ Kazdy widget prawej kolumny to osobny WIERSZ siatki. Bez `min-content` wiersze
     rozciagaly sie na wysokosc zdjecia (560 px) i dane wisialy w duzych odstepach
     (zmierzone: nazwisko na 355, przycisk na 796). */
  grid-auto-rows:min-content; align-content:center;
}
body.gm-page .abo-zsp__grid--solo .abo-zsp__figure{ margin-bottom:0; aspect-ratio:3/4; }
/* Karta ma teraz DWOJE dzieci: ramke zdjecia i kontener danych (`abo-zsp__body` dodany
   w markupie 19.09). Wczesniej kazdy widget lezal luzem i tworzyl WLASNY wiersz siatki,
   a wiersze rozciagaly sie do wysokosci zdjecia — nazwisko, rola i przycisk rozjezdzaly sie
   po ~300 px (zmierzone). Teraz siatka ma dwie kolumny i jeden wiersz. */
body.gm-page .abo-zsp__body{ display:block; }
@media(max-width:900px){
  /* Na telefonie karta wraca do pionu — zdjecie nad danymi. */
  body.gm-page .abo-zsp__grid--solo .abo-zsp__card{ grid-template-columns:1fr; row-gap:0; }
  body.gm-page .abo-zsp__grid--solo .abo-zsp__figure{
    aspect-ratio:4/3; margin-bottom:clamp(16px,2.2vh,24px);
  }
}

/* ---------- 47. OPINIE NA /o-nas — BIALE TLO (Seb 19.09) ----------
   Na home i na sprzedazy karuzela stoi na #F5F5F5; tutaj ma byc biala, a od sekcji
   „Dolacz do nas" oddziela ja bordowa kreska na 80 % szerokosci ekranu (element
   `.abo-jn__rule` na gorze tamtej sekcji). */
/* ⚠️ Na /o-nas karuzela NIE jest pelnoekranowa (Seb 19.09: „zmniejsz margines sekcji
   opinii"). Bazowe `.abo-ref` ma `min-height:100svh` i wysrodkowanie w pionie, wiec przy
   jednej opinii zostawalo ~300 px pustki nad kreska. Tutaj sekcja ma wysokosc tresci
   plus padding. Na home i sprzedazy bez zmian — stad modyfikator. */
body.gm-page .abo-ref--onas{
  background:#fff; min-height:0; padding-top:clamp(48px,7.5vh,92px);
}
/* ⚠️ Na telefonie blok mobilny §44 przywracal `padding-top` sekcji „Dolacz do nas"
   i odstep nad kreska rosl do 132 px przy 76 px pod nia (zmierzone). Zerujemy go takze tam. */
@media(max-width:900px){
  body.gm-page .abo-ref--onas{ padding-bottom:0; }
  body.gm-page .abo-jn{ padding-top:clamp(56px,9vh,110px); }
}


/* ---------- 48. OKNO KONTAKTOWE (Seb 19.09) ----------
   Klient nie chce podstrony kontaktu — po kliknieciu w „Kontakt" otwiera sie okno
   z danymi i formularzem. Markup renderuje mu-plugin w stopce KAZDEJ strony.
   ⚠️ `position:fixed` + wlasny `z-index` ponad naglowkiem (naglowek ma 60), bo na tej
   stronie kilka sekcji jest przypietych i ma wlasne warstwy. */
body.gm-page .gm-kmod{
  position:fixed; inset:0; z-index:9000; display:flex; align-items:center;
  justify-content:center; padding:clamp(16px,3vw,40px);
}
body.gm-page .gm-kmod[hidden]{ display:none !important; }
body.gm-page .gm-kmod__veil{
  position:absolute; inset:0; background:rgba(22,21,30,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:gmKmodFade .35s ease both;
}
@keyframes gmKmodFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes gmKmodUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
body.gm-page .gm-kmod__box{
  position:relative; z-index:1; width:min(640px,100%); max-height:90vh; overflow:auto;
  background:#fff; color:var(--ink);
  padding:clamp(26px,3.4vw,48px) clamp(22px,3vw,44px) clamp(28px,3.6vw,48px);
  box-shadow:0 24px 60px rgba(0,0,0,.22);
  animation:gmKmodUp .45s cubic-bezier(.22,.61,.36,1) both;
}
body.gm-page .gm-kmod__x{
  all:unset; box-sizing:border-box; position:absolute; top:14px; right:14px;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:rgba(22,21,30,.6); transition:color .3s;
}
body.gm-page .gm-kmod__x:hover{ color:#590B11; }
body.gm-page .gm-kmod__x svg{ width:18px; height:18px; display:block; }
body.gm-page .gm-kmod__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 .gm-kmod__h{
  margin:clamp(8px,1.2vh,14px) 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.25rem,2.2vw,30px);
}
body.gm-page .gm-kmod__lead{
  margin:clamp(10px,1.6vh,16px) 0 0; font-family:var(--sans); font-weight:300;
  font-size:16px; line-height:1.55; color:rgba(22,21,30,.8);
}
body.gm-page .gm-kmod__dane{
  display:flex; flex-wrap:wrap; gap:8px clamp(16px,2vw,28px);
  margin:clamp(14px,2.2vh,22px) 0 0; padding:clamp(12px,1.8vh,18px) 0;
  border-top:1px solid rgba(22,21,30,.14); border-bottom:1px solid rgba(22,21,30,.14);
}
body.gm-page .gm-kmod__lnk{
  font-family:var(--sans); font-weight:400; font-size:16px; color:var(--ink);
  text-decoration:none; transition:color .3s;
}
body.gm-page .gm-kmod__lnk:hover{ color:#590B11; }
body.gm-page .gm-kmod__form{ margin-top:clamp(16px,2.4vh,26px); }
/* ⚠️ Formularz w oknie ma WEZSZA siatke niz na podstronie: `gmf` daje szesc kolumn,
   a w 640 px pola „pol na pol" mialyby po 260 px — czytelniej jedna kolumna. */
/* ⚠️ SPECYFICZNOSC: reguly siatki formularza z §22 to `body.gm-page .gmo-form.gmf div.gmo-f--half`
   (0,4,2) — moj wczesniejszy selektor (0,3,2) przegrywal MIMO `!important` i pola „polowkowe"
   dalej mialy `grid-column:span 3`. Przy jednej kolumnie grid dokladal kolumny automatyczne
   i e-mail z telefonem byly o 35 px szersze od reszty (zmierzone: 477 vs 442 px).
   Dlatego selektor powtarza klasy formularza: `.gm-kmod__form.gmo-form.gmf`. */
body.gm-page .gm-kmod__form.gmo-form.gmf .wpforms-field-container{ grid-template-columns:1fr !important; }
body.gm-page .gm-kmod__form.gmo-form.gmf div.gmo-f--half,
body.gm-page .gm-kmod__form.gmo-form.gmf div.gmo-f--third,
body.gm-page .gm-kmod__form.gmo-form.gmf div.gmo-f--full,
body.gm-page .gm-kmod__form.gmo-form.gmf div.gmo-f--rodo{ grid-column:1 / -1 !important; }
/* --- pola w oknie MNIEJSZE niz na podstronie (Seb 19.09) --- */
body.gm-page .gm-kmod__form .wpforms-field{ padding:0 !important; margin:0 0 10px !important; }
body.gm-page .gm-kmod__form input[type="text"],
body.gm-page .gm-kmod__form input[type="email"],
body.gm-page .gm-kmod__form input[type="tel"],
body.gm-page .gm-kmod__form input[type="number"],
body.gm-page .gm-kmod__form select{
  height:44px !important; min-height:44px !important; padding:0 14px !important;
  font-size:12px !important; letter-spacing:1.6px !important;
}
body.gm-page .gm-kmod__form textarea{
  height:96px !important; min-height:96px !important; padding:12px 14px !important;
  font-size:12px !important; letter-spacing:1.6px !important;
}
/* ⚠️ WSZYSTKIE pola na JEDNA szerokosc (Seb 19.09). WPForms nadaje polom klasy rozmiaru
   (`wpforms-field-small/medium/large`), wiec „Imie", select i tresc wiadomosci mialy inne
   szerokosci niz e-mail i telefon — w waskim oknie wygladalo to jak rozjechany formularz. */
body.gm-page .gm-kmod__form .wpforms-field input,
body.gm-page .gm-kmod__form .wpforms-field select,
body.gm-page .gm-kmod__form .wpforms-field textarea,
body.gm-page .gm-kmod__form .wpforms-field-medium,
body.gm-page .gm-kmod__form .wpforms-field-small,
body.gm-page .gm-kmod__form .wpforms-field-large{
  width:100% !important; max-width:100% !important; box-sizing:border-box !important;
}
/* Pole „Imie i nazwisko" w trybie `simple` siedzi jeszcze w dodatkowym wrapperze. */
body.gm-page .gm-kmod__form .wpforms-field-name .wpforms-field-row,
body.gm-page .gm-kmod__form .wpforms-field-name .wpforms-field-row-block{
  width:100% !important; max-width:100% !important;
}
/* Zgoda RODO nie jest polem tekstowym — checkbox ma zostac maly. */
body.gm-page .gm-kmod__form .gmo-f--rodo input[type="checkbox"]{ width:16px !important; }
/* --- zgoda RODO: WPForms rysuje <fieldset><legend>Zgoda *</legend><ul><li>…,
   a `wpforms-label-hide` chowa tylko wizualnie w SWOIM arkuszu — w oknie legenda
   wychodzila nad ramka i caly blok sie rozjezdzal. Chowamy legende i skladamy
   checkbox + tekst na jedna linie. --- */
body.gm-page .gm-kmod__form .gmo-f--rodo{ margin-top:4px !important; }
body.gm-page .gm-kmod__form .gmo-f--rodo fieldset{
  border:0 !important; margin:0 !important; padding:0 !important;
}
body.gm-page .gm-kmod__form .gmo-f--rodo legend{
  position:absolute !important; width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important;
}
body.gm-page .gm-kmod__form .gmo-f--rodo ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
body.gm-page .gm-kmod__form .gmo-f--rodo li{
  display:flex !important; align-items:flex-start !important; gap:10px !important; margin:0 !important;
}
body.gm-page .gm-kmod__form .gmo-f--rodo input[type="checkbox"]{
  flex:0 0 16px !important; width:16px !important; height:16px !important; margin:2px 0 0 !important;
  accent-color:#590B11;
}
body.gm-page .gm-kmod__form .gmo-f--rodo label{
  margin:0 !important; font-family:var(--sans) !important; font-weight:300 !important;
  font-size:11.5px !important; line-height:1.5 !important; letter-spacing:0 !important;
  text-transform:none !important; color:rgba(22,21,30,.72) !important;
}
/* ⚠️ HONEYPOT WPForms (`.wpforms-field-hp`) MUSI zostac ukryty: wtyczka chowa go wlasnym
   `display:none`, ale nasza regula `.gmo-form .wpforms-field{…}` przywracala mu widocznosc
   i pod zgoda RODO siedziala PUSTA RAMKA wygladajaca jak dodatkowe pole (zlapane na zrzucie).
   To pole-pulapka na boty — musi byc w DOM, ale niewidoczne dla czlowieka. */
body.gm-page .gm-kmod__form .wpforms-field-hp{ display:none !important; }
body.gm-page .gm-kmod__form .wpforms-submit-container{ margin-top:14px !important; }
body.gm-page .gm-kmod__form .wpforms-submit{ height:48px !important; min-height:48px !important; }

/* --- stopka okna: przycisk zgloszenia + ikony social --- */
body.gm-page .gm-kmod__foot{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:14px clamp(12px,2vw,24px); margin-top:clamp(16px,2.4vh,24px);
  padding-top:clamp(14px,2vh,20px); border-top:1px solid rgba(22,21,30,.14);
}
body.gm-page .gm-kmod__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border:1px solid rgba(22,21,30,.55); color:var(--ink);
  text-decoration:none; font-family:var(--sans); font-weight:400; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
  transition:background .35s, color .35s, border-color .35s;
}
body.gm-page .gm-kmod__btn:hover{ background:#590B11; border-color:#590B11; color:var(--cream); }
body.gm-page .gm-kmod__soc{ display:inline-flex; align-items:center; gap:16px; }
body.gm-page .gm-kmod__soc a{ display:block; color:rgba(22,21,30,.55); transition:color .3s; }
body.gm-page .gm-kmod__soc a:hover{ color:#590B11; }
body.gm-page .gm-kmod__soc svg{ width:17px; height:17px; display:block; fill:currentColor; }

body.gm-page.gm-kmod-open{ overflow:hidden; }


/* ---------- 49. MOBILE: KATEGORIE BEZ WJAZDU KARTA NA POWITANIE (Seb 20.09, v3) ----------
   Finalne ustalenie po trzech rundach: mechaniki ZOSTAJA (slowa powitania pojawiaja sie
   na scrollu, karta kategorii rosnie, tor jedzie w bok) — znika WYLACZNIE zakladkowy wjazd
   sekcji kategorii na powitanie, bo zasłaniał przyciski.
   Robi go ujemny margines `-(--climb)` = 304 px przy ekranie 844.
   ⚠️ `--climb` zostaje nietknieta: to samo okno jest zakresem animacji `wlcLift`.
   ⚠️ Samo zdjecie marginesu NIE WYSTARCZY — zmierzone: przyciski pod powitaniem dochodzily
   na telefonie tylko do 9 % krycia, zanim scena odjechala. Dlatego na telefonie maja pelne
   krycie od razu; scrub slow zostaje bez zmian. */
@media(max-width:900px){
  body.gm-page .bnh{ margin-top:0 !important; }
  body.gm-page .wlc{ box-shadow:none !important; }
  /* ⚠️ Stopka powitania (trzy fakty + przyciski) NIE ma juz wymuszonego krycia (Seb 20.09:
     „niech pojawiaja sie tez na scroll jak cytat"). Silnik dokłada jej opacity na KONCU
     scrubu (`(p-0.86)/0.10`), a po zdjeciu ujemnego marginesu kategorii zakres scrubu
     domyka sie w obrebie sekcji — wiec fakty i przyciski zdazaja wejsc, zanim kategorie
     w ogole sie zaczna. */
}

/* ---------- 50. MOBILE: SEKCJA „ZAKRES WSPARCIA" (Seb 20.09) ----------
   a) Wiecej powietrza nad kickerem — sekcja zaczynala sie tuz pod poprzednia (padding 0).
   b) Wykres UKRYTY na telefonie: rysowany scrollem, a przy 93 px wysokosci i waskim kadrze
      byl bardziej migotaniem niz informacja. Silnik nie wymaga obecnosci wykresu —
      przelaczanie kart liczy sie osobno, wiec wystarczy `display:none`. */
@media(max-width:900px){
  body.gm-page .pom__kicker{ margin-top:clamp(14px,3.4vw,24px) !important; display:block; }
  body.gm-page .pom__chart,
  body.gm-page .pom__chartwrap{ display:none !important; }
}


/* ---------- 51. MOBILE: DZIELENIE WYRAZOW W NAGLOWKU „OBSZAR DZIALANIA" (Seb 20.09) ----------
   „Specjalizujemy sie w nieruchomosciach…" — samo slowo „nieruchomosciach" jest przy 33 px
   szersze niz kadr 354 px i wychodzilo poza ekran. Wlaczamy przenoszenie z lacznikiem.
   ⚠️ `hyphens:auto` dziala TYLKO, gdy dokument ma poprawny `lang` (WP daje `lang="pl-PL"`)
   — bez tego przegladarka nie wie, gdzie stawiac lacznik.
   ⚠️ `-webkit-hyphens` zostaje osobno: Safari dalej wymaga prefiksu.
   ⚠️ `overflow-wrap:break-word` jako zabezpieczenie dla przegladarek bez slownika polskiego —
   wtedy wyraz zlamie sie bez lacznika, ale NIE wyjedzie poza kadr. */
@media(max-width:900px){
  body.gm-page .lok__title{
    -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; word-break:normal;
  }
}


/* ---------- 52. (COFNIETE 20.09) ----------
   Byla proba odebrania telefonowi mechanik powitania i kategorii („maja byc stale").
   Seb cofnal obie decyzje w tej samej rundzie: efekt pojawiania sie slow w powitaniu
   ORAZ powiekszanie i przesuwanie kart kategorii maja zostac. Blok usuniety w calosci —
   mechaniki wracaja do wersji z `gm.css` (pin sceny + animacje na `view-timeline`). */

/* ---------- 53. MOBILE: KARTY „ZAKRES WSPARCIA" ROZWINIETE OD RAZU (Seb 20.09, v2) ----------
   v1 chowala kadry zdjec — COFNIETE: Seb chce je widziec. Zamiast tego na telefonie znika
   cala mechanika „teczek": wszystkie piec kategorii jest rozwinietych i widocznych od razu,
   a sekcja przewija sie normalnie.
   ⚠️ Karty leza jedna na drugiej (`grid-area:1/1`) i sa sterowane `max-height`/`opacity`
   z silnika — dlatego trzeba OBU rzeczy naraz: wyzerowac limit wysokosci i przywrocic
   normalny przeplyw siatki (`position:static`, `grid-area:auto`).
   ⚠️ Sekcja traci pin i sztuczna wysokosc (ekran + 5 x 48vh), bo rozwiniete karty i tak
   sie w niej nie zmieszcza. */
@media(max-width:900px){
  body.gm-page .pom__ph{ display:block !important; }
  /* Numer nad nazwa kategorii (Seb 20.09): naglowek to flex w rzedzie — na telefonie
     „/01. Sprzedaz nieruchomosci" lamalo sie w przypadkowym miejscu. */
  body.gm-page .pom__hd{
    flex-direction:column !important; align-items:flex-start !important;
    gap:clamp(2px,1vw,6px) !important;
  }
  body.gm-page .pom{ height:auto !important; }
  body.gm-page .pom__stage{
    position:static !important; height:auto !important;
    padding-bottom:clamp(40px,9vw,64px) !important;
  }
  /* ⚠️ Sekcja MUSI zostac pozycjonowana: `z-index` nie dziala na `position:static`,
     a bez warstwy przypieta karta z sekcji 2 malowala sie NA niej (zmierzone na sprzedazy). */
  body.gm-page .usl-pop{ position:relative !important; }
  body.gm-page .pom__card{
    grid-area:auto !important; position:static !important;
    max-height:none !important; opacity:1 !important; transform:none !important;
    height:auto !important; margin-bottom:clamp(18px,4vw,28px);
  }
  body.gm-page .pom__card.is-past{ opacity:1 !important; }
  /* ⚠️ To NIE karta trzyma zwiniecie, tylko jej wnetrze: `.pom__body` ma `max-height:0`
     i `opacity:0` (zmierzone), a naglowek `.pom__hd` zostaje widoczny — stad „karty
     rozwiniete" wymagaja odblokowania wlasnie `__body`. */
  body.gm-page .pom__body{
    max-height:none !important; opacity:1 !important; overflow:visible !important;
  }
  /* Wskaznik postepu (piec kresek) nie ma czego pokazywac, gdy wszystko jest rozwiniete. */
  body.gm-page .pom__rail, body.gm-page .pom__bars{ display:none !important; }
}


/* ---------- 54. MOBILE: LAMANIE PRZED „ZA KAZDYM AGENTEM…" (Seb 20.09) ----------
   Zdanie „Za kazda oferta stoi konkretny agent. / Za kazdym agentem — standard Galerii."
   ma na telefonie isc w DWOCH wierszach. Blok mobilny chowal `<br>` w naglowkach sekcji,
   wiec tutaj przywracamy je punktowo — na /o-nas (naglowek sekcji) i na sprzedazy (kicker
   ciemnej karty), zeby oba miejsca czytaly sie tak samo. */
@media(max-width:900px){
  body.gm-page .abo-std__h br,
  body.gm-page .usl-std__kicker br{ display:inline !important; }
}


/* ---------- 55. MOBILE: WYROZNIKI NA SPRZEDAZY WYSRODKOWANE (Seb 20.09) ----------
   /01. Strategia, /02. Prezentacja, /03. Prowadzenie — na telefonie ida jedna kolumna,
   wiec tresc wyrownana do lewej wygladala jak urwana lista. Kreska nad numerem zostaje
   na pelna szerokosc bloku — to ona trzyma rytm. */
@media(max-width:900px){
  body.gm-page .usl-wyr__it{ text-align:center; }
  body.gm-page .usl-wyr__lead,
  body.gm-page .usl-wyr__p{ margin-inline:auto; }
}


/* ---------- 56. MOBILE: MNIEJSZY ODSTEP PROCES ↔ „DLACZEGO KADR" NA FOTOGRAFII (Seb 20.09) ----------
   Na /uslugi/fotografia-i-wideo/ styk sekcji `uslPrc` (Piec etapow wspolpracy) i `uslBz`
   (Dlaczego kadr decyduje) mial na 390 px **220 px pustki** — obie sekcje nosza `gm-rytm`,
   ktora daje im po 109,7 px (13vh z ekranu 844) i to Z `!important`, wiec starsza regula
   mobilna `.usl-prc{padding-bottom:clamp(56px,13vw,74px)}` z bloku 900 px nie dochodzila.
   Schodzimy na obu polowach do TEGO SAMEGO stopnia, ktory juz jest w arkuszu
   (clamp(56px,13vw,74px) = 56 px na 390) — nie wymyslamy nowej wartosci. Razem 112 px.
   ⚠️ Zawezenie `.usl-prc.gm-rytm` trafia WYLACZNIE w fotografie: na sprzedazy ta sama
   sekcja idzie bez `gm-rytm` (patrz §22), a `.usl-bz gm-rytm` nosi jeszcze
   /dolacz-do-nas — stad sasiedztwo `+`, ktore domyka regule do tego jednego styku.
   ⚠️ `!important` jest KONIECZNE: bije `.gm-rytm`, ktore samo stoi z `!important`
   (na samej specyficznosci tez by wygralo, ale przy rownym `!important` nie ma marginesu
   na pomylke, gdyby ktos przeniosl blok wyzej w pliku). */
@media(max-width:900px){
  body.gm-page .usl-prc.gm-rytm{ padding-bottom:clamp(56px,13vw,74px) !important; }
  body.gm-page .usl-prc.gm-rytm + .usl-bz.gm-rytm{
    padding-top:clamp(56px,13vw,74px) !important;
  }
}


/* ---------- 57. JEDEN STOPIEN PRZYCISKU W CALYM SERWISIE (Seb 20.09) ----------
   Pomiar przed zmiana (1440): OSIEM stopni pisma (10,9 / 11,2 / 11,5 / 11,8 / 12 / 12,4 /
   12,5 / 13 px), tracking raz .14em raz .2em i siedem roznych dopelnien ramki
   (13,5×30, 14,4×28,8, 12×36, 12×23, 12×17, 12×20, 0×34) — stad wysokosci od 38 do 60 px.
   Kazdy przycisk powstawal w innej rundzie i dziedziczyl stopien z sasiedztwa.
   Decyzja Seba 20.09: **JEDEN stopien, zero wyjatkow** — takze hero, powitanie i submit,
   ktore schodza z 58-60 / 54 px na 41 px. (Wariant „dwa stopnie" byl na stole i odpadl.)
   Wartosci wprost z najczesciej uzywanego przycisku w serwisie (`.usl-bz__btn` / `.ufoto__btn`
   — cztery podstrony), wiec nie wymyslamy nowego stopnia, tylko rozciagamy istniejacy.
   ⚠️ Blok NIE rusza kolorow, tel, obramowan ani szerokosci — kazdy przycisk trzyma swoja
   palete (jasne / ciemne tlo, bordo wypelnione) i swoje `min-width`. Tu jest TYLKO metryka.
   ⚠️ Odnosniki-strzalki (`.gml__cta`, `.abo-zsp__cta`, `.abo-fil__cta`, `.usl-crd__cta`,
   `.usl-int__cta`) to OSOBNA rodzina — tekst bez ramki. Swiadomie poza tym blokiem.
   ⚠️ `.esticrm-btn--reset` („Resetuj filtry") tez zostaje — to kontrolka paska filtrow
   wtyczki, nie CTA, i ma juz 12 px / .2em. */
body.gm-page{
  --gm-btn-fs:clamp(.68rem,.84vw,12px);
  --gm-btn-ls:.2em;
  --gm-btn-py:clamp(11px,1.5vh,15px);
  --gm-btn-px:clamp(18px,2.2vw,30px);
}
/* Telefon: przy 1,5vh z ekranu 844 px wcięcie schodzi do 12,7 px, czyli przycisk ma 38 px
   — ponizej progu wygodnego kciuka. Podbijamy sama pionowa polowe, zeby wyszlo ~45 px. */
@media(max-width:900px){ body.gm-page{ --gm-btn-py:16px; } }

/* A. Przyciski budowane html-widgetem — ramka i kolory wlasne, metryka wspolna. */
body.gm-page .abt__cta,
body.gm-page .usl-int__btn,
body.gm-page .abo-tsr__btn,
body.gm-page .abo-jn__btn,
body.gm-page .abo-cta__btn,
body.gm-page .usl-bz__btn,
body.gm-page .usl-om__btn,
body.gm-page .usl-faq__btn,
body.gm-page .usl-cta__btn,
body.gm-page .usl-ctf__btn,
body.gm-page .ufoto__btn,
body.gm-page .gm-kmod__btn{
  font-family:var(--sans); font-weight:400; text-transform:uppercase; line-height:1;
  font-size:var(--gm-btn-fs); letter-spacing:var(--gm-btn-ls);
  padding:var(--gm-btn-py) var(--gm-btn-px);
  height:auto; min-height:0; border-width:1px;
}

/* B. Przyciski natywne Elementora. Geometria siedzi na WRAPPERZE (`.gm-btn`, `.wlc__btn2`,
   `.ofr__btn`, `.cta__btn`), a wciecia MUSZA isc na `<a>` w srodku — patrz §8 i §26:
   wrapper z wlasnym paddingiem zostawia martwe pole poza linkiem.
   ⚠️ `!important` konieczne: arkusz per-element Elementora laduje sie PO `gm.css`. */
body.gm-page .gm-btn,
body.gm-page .wlc__btn2,
body.gm-page .ofr__btn,
body.gm-page .cta__btn{
  font-size:var(--gm-btn-fs); letter-spacing:var(--gm-btn-ls);
  height:auto; min-height:0; padding:0; border-width:1px;
}
body.gm-page .wlc__btn2 > .elementor-button,
body.gm-page .ofr__btn > .elementor-button,
body.gm-page .cta__btn > .elementor-button{
  padding:var(--gm-btn-py) var(--gm-btn-px) !important;
  font-size:var(--gm-btn-fs) !important; letter-spacing:var(--gm-btn-ls) !important;
  line-height:1 !important;
}
/* `.gm-btn` ma strzalke rysowana przez `::after` przy prawej krawedzi — prawe wciecie
   zostaje POWIEKSZONE o jej pole (17 px grota + swiatlo), inaczej napis wchodzi pod grot. */
body.gm-page .gm-btn > .elementor-button{
  padding:var(--gm-btn-py) calc(var(--gm-btn-px) + 29px) var(--gm-btn-py) var(--gm-btn-px) !important;
  font-size:var(--gm-btn-fs) !important; letter-spacing:var(--gm-btn-ls) !important;
  line-height:1 !important;
}
body.gm-page .gm-btn::after{ right:var(--gm-btn-px); }

/* C. Submit formularzy (WPForms) — ta sama metryka. Szerokosc (`width:47%`, `min-width`)
   ZOSTAJE: to element ukladu formularza, nie wielkosc przycisku. */
body.gm-page .gmo-form button.wpforms-submit{
  height:auto !important; min-height:0 !important;
  padding:var(--gm-btn-py) var(--gm-btn-px) !important;
  font-size:var(--gm-btn-fs) !important; letter-spacing:var(--gm-btn-ls) !important;
  line-height:1 !important;
}
body.gm-page .gm-kmod__form .wpforms-submit{ height:auto !important; min-height:0 !important; }

/* D. Strzalka w przycisku hero sprzedazy. To JEDYNY przycisk z ikona SVG w srodku,
   a ta miala 24×19 px — czyli wiecej niz linia pisma (12 px), wiec sama rozpychala pudelko
   do 48 px mimo identycznego dopelnienia (zmierzone). Skalujemy IKONE do stopnia pisma,
   nie odwrotnie: 15×12 px trzyma proporcje 24:19 i przycisk schodzi do wspolnych 41 px.
   ⚠️ Regula celowo zawezona do `.usl-int__btn` — ta sama klasa `.usl-lnk__ar` nosi strzalki
   w odnosnikach tekstowych, gdzie 19 px jest wlasciwe. */
body.gm-page .usl-int__btn .usl-lnk__ar{
  width:15px; height:12px; flex:0 0 15px; margin-left:12px;
}

/* Telefon: etykiety powitania nie mieszcza sie w jednym wierszu (§26), wiec tam przycisk
   ma prawo urosnac w pionie — `line-height:1` z bloku B musi ustapic zawijaniu. */
@media(max-width:900px){
  body.gm-page .wlc__btns .gm-btn > .elementor-button,
  body.gm-page .wlc__btn2 > .elementor-button{
    line-height:1.4 !important; white-space:normal;
  }
}


/* ---------- 58. MOBILE /o-nas: MANIFEST PRZESTAJE BYC PRZYPIETY (Seb 20.09) ----------
   Objaw: miedzy sekcja opinii a „Dolacz do nas" przeswituje pas z wideo z manifestu.
   Przyczyna NIE jest w tamtym styku, tylko w `.abo-man`: sekcja jest `position:sticky; top:0`,
   a jej rodzicem jest kontener CALEJ strony — wiec po przewinieciu wlasnej sekcji zostaje
   przyklejona do gornej krawedzi ekranu az do stopki. Zmierzone na 390: przy scrollY 10245
   (czyli ~4 000 px ZA swoja sekcja) manifest dalej stoi na 0…730, a wideo na 438…730.
   Nie widac go tylko dlatego, ze kazda sekcja nizej ma nieprzezroczyste tlo i `z-index:8`.
   Kazda przerwa bez tla = wideo w tle. Lapaliśmy to juz DWA razy punktowo (§47: zerowanie
   `padding-bottom` opinii i marginesu kreski) — i wraca, bo to byly latki na objaw.
   Tutaj ucinamy zrodlo: na telefonie manifest **nie klei sie w ogole**.
   ⚠️ `position:relative`, NIE `static`: `z-index:6` dziala tylko na elemencie pozycjonowanym,
   a bez niego manifest wpadlby POD ciemny cytat (`.abo-cyt`, z-index 5), na ktory wjezdza
   ujemnym marginesem `--climb`. Sam margines zostaje nietkniety — wjazd wyglada jak dotad.
   ⚠️ Na desktopie przypiecie ZOSTAJE: tam po manifescie wjezdza karta „Standard Galerii"
   i ta mechanika jest zamierzona. */
@media(max-width:900px){
  body.gm-page .abo-man{ position:relative; }
}


/* ---------- 59. MOBILE /oferta: LISTA SORTOWANIA POD NAPISEM, NIE OBOK (Seb 20.09) ----------
   Objaw: na telefonie „kategorie sortowania" (Najnowsze, Cena rosnaco…) otwieraly sie OBOK
   napisu „Sortuj:", a nie pod nim — i wybiegaly poza ekran (zmierzone: lista 209…439 px
   przy kadrze 390, czyli 49 px poza krawedzia; widac to bylo jako ucieta kolumna,
   bo `body.gm-page` ma `overflow-x:clip`). Przy okazji rozpychalo to etykiete do 309 px
   wysokosci i spychalo „Sortuj:" na srodek tej dziury.
   Przyczyna: blok mobilny §9 zdejmuje listom `position:absolute` (`.gm-dd{position:static}`),
   zeby w PANELU FILTROW lista rozpychala panel zamiast go przykrywac. Sortowanie nosi te sama
   klase `gm-dd`, wiec zlapalo te regule — tyle ze jego etykieta jest flexem w WIERSZU,
   wiec statyczna lista stala sie po prostu trzecim elementem wiersza, obok triggera.
   ⚠️ Nie wracamy do `absolute` na telefonie: reszta list na tej podstronie rozpycha uklad
   i tak ma byc. Zamiast tego pozwalamy etykiecie sie ZAWIJAC, a liscie dajemy pelna szerokosc
   — „Sortuj: NAJNOWSZE" zostaje w pierwszym wierszu, lista laduje pod nim.
   ⚠️ `row-gap:0` + margines na liscie: inaczej odstep to suma `gap` etykiety i marginesu. */
@media(max-width:900px){
  body.gm-page .gm-sub--oferta .esticrm-results-sort{
    display:flex !important; flex-wrap:wrap !important; align-items:center !important;
    width:100% !important; row-gap:0 !important; column-gap:8px !important;
  }
  body.gm-page .gm-sub--oferta .gm-srt__dd{
    position:static !important; left:auto !important; right:auto !important; top:auto !important;
    flex:0 0 100% !important; width:100% !important; min-width:0 !important;
    margin:14px 0 0 !important;
  }
}


/* ---------- 60. TRYB EDYCJI ELEMENTORA: BEZ PRELOADERA, WSZYSTKO ROZWINIETE (Seb 01.10) ----------
   Seb: w edytorze strony glownej czarny preloader zakrywal caly ekran i nie dalo sie go
   ukryc jako warstwy — bo NIE jest warstwa tej strony, tylko siedzi w szablonie NAGLOWKA
   (build_parts.build_header). Zdejmuje go dopiero silnik w gm.js, a ten w edytorze celowo
   konczy prace na starcie (guard `gm-editor`) — wiec nikt planszy nie zdejmowal.
   Ta sama przyczyna trzymala w edytorze zwiniete karty „Zakres wsparcia" (#pom: rozwija je
   scroll w JS) i pokazywala tylko pierwsza opinie (slider przesuwa JS). Rozwijamy je tu
   na wzor bloku mobilnego §46, zeby dalo sie podmienic zdjecia i teksty.
   ⚠️ Klucz = `body.elementor-editor-active` (body w iframe podgladu edytora) + `html.gm-editor`
   (stawia go guard w gm.js). Front dla odwiedzajacych NIETKNIETY. */
body.elementor-editor-active .loader,
html.gm-editor body.gm-page .loader{ display:none !important; }

body.elementor-editor-active.gm-page .pom{ height:auto !important; }
body.elementor-editor-active.gm-page .pom__stage{ position:static !important; height:auto !important; }
body.elementor-editor-active.gm-page .pom__card{
  grid-area:auto !important; position:static !important;
  max-height:none !important; opacity:1 !important; transform:none !important;
  height:auto !important; margin-bottom:24px;
}
body.elementor-editor-active.gm-page .pom__body{
  max-height:none !important; opacity:1 !important; overflow:visible !important;
}

body.elementor-editor-active.gm-page .abo-ref__track{ flex-wrap:wrap !important; transform:none !important; row-gap:40px; }
body.elementor-editor-active.gm-page .abo-ref__slide{ opacity:1 !important; visibility:visible !important; }


/* ---------- 61. HOME: SEKCJA „NAJNOWSZE OFERTY" (#nowe, Seb 01.10) ----------
   Po lokalizacjach, przed wideo. Wnetrze to klasy `ofr__*` (globalne — karta, slider,
   strzalki, kropki 1:1 z wyroznionymi). Tu tylko skorupa sekcji: NIE kopiujemy `.ofr`,
   bo ta jest `sticky` pod wjazd cytatu. `z-index:8` + tlo jak `.vid` — sekcja lezy nad
   przypieta scena lokalizacji (mobile), inaczej przeswitywalyby kafle miast. */
/* Tlo LEKKO SZARE (Seb 01.10) — ten sam #F5F5F5 co szare sekcje sprzedazy (§ „Bezpieczenstwo"),
   oddziela sekcje od bialych lokalizacji i wideo. */
body.gm-page .nof{
  position:relative; z-index:8; background:#F5F5F5; color:#000;
  padding:clamp(66px,10vh,116px) var(--gut) clamp(110px,17vh,200px);
  /* zakladka (Seb 01.10): cien jak przy wjezdzie powitania/kategorii */
  box-shadow:0 -30px 62px rgba(0,0,0,.18);
}
@media(max-width:900px){
  body.gm-page .nof{ padding-top:clamp(48px,8vh,90px); padding-bottom:clamp(64px,10vh,96px);
    box-shadow:0 -20px 46px rgba(0,0,0,.16); }
}
/* Lokalizacje pinuja sie DNEM pod wjazd #nowe — `top` liczy silnik (gm.js, blok
   „LOKALIZACJE → NAJNOWSZE OFERTY"), tu tylko tryb pozycji. */
body.gm-page .lok{ position:sticky; }



/* ---------- 62. HOME: WIEKSZY ODDECH NA GORZE SEKCJI WIDEO (Seb 01.10) ----------
   Po dojsciu szarej sekcji „Najnowsze oferty" wideo startowalo 38 px pod nia (desktop) —
   za ciasno na zmiane tla. Gora = ten sam stopien co #nowe i #ofr. */
body.gm-page .vid{ padding-top:clamp(66px,10vh,116px) !important; }
@media(max-width:900px){
  body.gm-page .vid{ padding-top:clamp(72px,11vh,104px) !important; }
}


/* ---------- 63. NAGLOWKI MONTSERRAT: WAGA 300 W CALYM SERWISIE (Seb 01.10) ----------
   Wszystkie H1/H2 sekcji w Montserracie (i „Jak pracujemy" — H3 w stopniu naglowka sekcji)
   schodza z 400 na 300. Czesc juz miala 300 (/zglos, /dolacz, CTA) — teraz jeden stopien.
   ⚠️ NIE obejmuje: drobnych tytulow kart (H3/H4 ~17-19 px — przy 300 gina) ani
   `.usl-cz__h` (waga 500 to decyzja Seba z 19.09). Lista z pomiaru 9 podstron. */
/* ⚠️ Klasa siedzi RAZ na samym <hN> (widget HTML), RAZ na opakowaniu widgetu Elementora
   (wtedy <hN> ma tylko `elementor-heading-title`) — stad dwa warianty + potomkowie (spany). */
body.gm-page :is(h1,h2,h3):is(.gm-sub__h,.usl-int__lead--h1,.usl__h1,.abo-bts__h,.abo-cta__h,.abo-jn__h,.abo-prc__h,
  .abo-ref__h,.abo-std__h,.abo-tsr__h,.abo-val__h,.abo-zsp__h,.blog__title,.bnh__h,.cta__title,
  .kon__fh,.kon__h,.lok__title,.ofr__title,.pom__h,.ufoto__h,.usl-bz__h,.usl-crd__h,.usl-cta__h,
  .usl-faq__h,.usl-fw__h,.usl-om__h,.usl-pop__h,.vid__title,.zgl-frm__h,.zgl-krk__h,.abt__proc-h,.gmo-form__h),
body.gm-page :is(h1,h2,h3):is(.gm-sub__h,.usl-int__lead--h1,.usl__h1,.abo-bts__h,.abo-cta__h,.abo-jn__h,.abo-prc__h,
  .abo-ref__h,.abo-std__h,.abo-tsr__h,.abo-val__h,.abo-zsp__h,.blog__title,.bnh__h,.cta__title,
  .kon__fh,.kon__h,.lok__title,.ofr__title,.pom__h,.ufoto__h,.usl-bz__h,.usl-crd__h,.usl-cta__h,
  .usl-faq__h,.usl-fw__h,.usl-om__h,.usl-pop__h,.vid__title,.zgl-frm__h,.zgl-krk__h,.abt__proc-h,.gmo-form__h) *,
body.gm-page :is(.gm-sub__h,.usl-int__lead--h1,.usl__h1,.abo-bts__h,.abo-cta__h,.abo-jn__h,.abo-prc__h,
  .abo-ref__h,.abo-std__h,.abo-tsr__h,.abo-val__h,.abo-zsp__h,.blog__title,.bnh__h,.cta__title,
  .kon__fh,.kon__h,.lok__title,.ofr__title,.pom__h,.ufoto__h,.usl-bz__h,.usl-crd__h,.usl-cta__h,
  .usl-faq__h,.usl-fw__h,.usl-om__h,.usl-pop__h,.vid__title,.zgl-frm__h,.zgl-krk__h,.abt__proc-h,.gmo-form__h) :is(h1,h2,h3),
body.gm-page :is(.gm-sub__h,.usl-int__lead--h1,.usl__h1,.abo-bts__h,.abo-cta__h,.abo-jn__h,.abo-prc__h,
  .abo-ref__h,.abo-std__h,.abo-tsr__h,.abo-val__h,.abo-zsp__h,.blog__title,.bnh__h,.cta__title,
  .kon__fh,.kon__h,.lok__title,.ofr__title,.pom__h,.ufoto__h,.usl-bz__h,.usl-crd__h,.usl-cta__h,
  .usl-faq__h,.usl-fw__h,.usl-om__h,.usl-pop__h,.vid__title,.zgl-frm__h,.zgl-krk__h,.abt__proc-h,.gmo-form__h) :is(h1,h2,h3) *{
  font-weight:300 !important;
}


/* ---------- 64. HOME MOBILE: „KAZDA NIERUCHOMOSC MA OSOBE…" W STOPNIU ZWYKLEGO TEKSTU (Seb 01.10) ----------
   `.abt__lead` w sekcji Radka mial na telefonie 18,7 px — wyraznie wiekszy niz reszta tekstu
   strony glownej (leady sekcji 15 px / 24 px). Na telefonie zrownany do tego stopnia;
   desktop (23,8 px) bez zmian. Waga zostaje 400. */
@media(max-width:900px){
  body.gm-page .abt__lead{ font-size:15px !important; line-height:24px !important; }
}


/* ---------- 65. /oferta MOBILE: BEZ BIALEGO PASKA — SAMA ZAKLADKA W ROGU ZDJECIA (Seb 01.10) ----------
   Do tej pory na telefonie `.gml__rail` byl bialym pasem 52 px na dole zdjecia (zakladka +
   strzalka „do oferty"). Teraz: bez tla, bez strzalki (cale zdjecie i tak prowadzi do oferty),
   zostaje SAMA zakladka w prawym gornym rogu kadru. Biala z cieniem — bordo na zdjeciu
   ginelo (ta sama logika co strzalki zdjec, §strzalki listingu). Desktop bez zmian. */
@media(max-width:900px){
  body.gm-page .gm-sub--oferta .gml__rail,
  body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__rail{
    align-self:start; justify-self:end; z-index:5;
    width:auto; height:auto; padding:16px 16px 0 0;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  body.gm-page .gm-sub--oferta .gml__go{ display:none !important; }
  /* Zakladka w KOLORZE ETYKIETY „Sprzedaz" (Seb 01.10): to samo ciemne polprzezroczyste tlo
     + TEN SAM obrys co ramka etykiety (.14). Zapisana = wypelniona bordo. (Wczesniejsza wersja: biala z cieniem.) */
  body.gm-page .gm-sub--oferta .gml__rail .esticrm-fav-icon svg,
  body.gm-page .gm-sub--oferta .gml__rail .esticrm-fav-icon svg path{
    fill:rgba(18,17,24,.55) !important; stroke:rgba(244,244,237,.14) !important; filter:none;
  }
  body.gm-page .gm-sub--oferta .gml__rail .esticrm-card__fav.is-active .esticrm-fav-icon svg,
  body.gm-page .gm-sub--oferta .gml__rail .esticrm-card__fav.is-active .esticrm-fav-icon svg path{
    fill:#590B11 !important; stroke:#590B11 !important;
  }
  /* Etykieta „Sprzedaz" ginela po zmianie zdjecia: warstwy galerii `.gmg` (z-index 2) leza
     w tym samym `.gml__media` co etykieta (tez 2) i sa POZNIEJ w DOM, wiec ja przykrywaly. */
}
/* Etykieta nad warstwami galerii TAKZE na desktopie (Seb 01.10) — ten sam blad co wyzej. */
body.gm-page .gm-sub--oferta .gml__badge,
body.gm-page .gm-sub--oferta .gml:nth-child(even) .gml__badge{ z-index:5; }


/* ---------- 66. HOME WIDEO: DLUGI TYTUL FILMU ZAWIJA SIE DO NOWEJ LINII (Seb 01.10) ----------
   `.vid__cap` dziedziczyl `white-space:nowrap` (tor kafli przewijany w bok) i dlugie tytuly
   uciekaly za krawedz kafla (390 px: 290 px tekstu w polu 248). Podpis stoi przy dolnej
   krawedzi (`bottom:0`), wiec drugi wiersz rosnie w gore, nie wypycha kafla. */
body.gm-page .vid__cap{ white-space:normal !important; overflow-wrap:break-word; }


/* ---------- 67. /oferta MOBILE: MNIEJSZY TYTUL I CENA NA KARCIE (Seb 01.10) ----------
   Bylo: tytul clamp(26px,7.4vw,38px) = 28,9 px na 390, cena 24 px. Teraz ok. 22 / 19 px. */
@media(max-width:900px){
  body.gm-page .gm-sub--oferta .gml__title{
    font-size:clamp(20px,5.6vw,26px) !important; letter-spacing:-.6px !important;
  }
  body.gm-page .gm-sub--oferta .gml__price{ font-size:19px !important; letter-spacing:1.6px !important; }
}


/* ---------- 68. /oferta MOBILE: TAPNIECIE NIE POWIEKSZA ZDJECIA (Seb 01.10) ----------
   Na ekranie dotykowym tapniecie (np. w zakladke) zostawia karte w stanie `:hover`, wiec
   zdjecie zostawalo powiekszone o 4 % (nasza regula + `hover-scale-image` wtyczki).
   Na telefonie i bez myszy efekty najechania wylaczone: zdjecie, zakladka (wtyczka daje jej
   `scale(1.05) !important`), przesuniecie strzalek galerii. */
@media (hover:none), (max-width:900px){
  body.gm-page .gm-sub--oferta .gml:hover .gml__media img,
  body.gm-page .gm-sub--oferta .gml .esticrm-card__media img,
  body.gm-page .gm-sub--oferta .gml .esticrm-card__img{ transform:none !important; }
  body.gm-page .gm-sub--oferta .gml__rail .esticrm-card__fav:hover{ transform:none !important; }
  body.gm-page .gmg__a--p:hover{ transform:none; }
  body.gm-page .gmg__a--n:hover{ transform:scaleX(-1); }
}


/* ---------- 69. SPRZEDAZ MOBILE: „OBSERWUJEMY…" OD NOWEJ LINII (Seb 01.10) ----------
   W tresci zdania stoi znak nowej linii przed „Obserwujemy" (build_parts.py) — na desktopie
   zwija sie w spacje, na telefonie `pre-line` robi z niego lamanie. */
@media(max-width:900px){
  body.gm-page .elementor-widget-text-editor p.usl-pop__out{ white-space:pre-line !important; }
}


/* ---------- 70. SPRZEDAZ MOBILE: KROPKA-PUNKTATOR PRZED KAZDYM HASLEM OFF-MARKET (Seb 01.10) ----------
   Na telefonie hasla ida kolumna i kropki-separatory byly schowane. Teraz kazde z trzech
   dostaje kropke na poczatku (ta sama: 5 px, krem, .55). Desktop (rzad z separatorami) bez zmian. */
@media(max-width:900px){
  body.gm-page .usl-om__ul li::before,
  body.gm-page .usl-om__ul li + li::before{
    content:""; display:block; flex:0 0 auto; width:5px; height:5px; border-radius:50%;
    background:var(--cream); opacity:.55;
  }
  body.gm-page .usl-om__ul li{ gap:12px; }
}


/* ---------- 71. MOBILE: NAGLOWEK „OPADA" W SAFARI iOS 26 (klient 01.10, nagranie) ----------
   Objaw: Safari z paskiem adresu NA DOLE (iOS 26, tryb prywatny) w trakcie przewijania rysuje
   `position:fixed` nagłowek 25-95 px nizej, z trescia strony NAD nim; wraca dopiero na samej
   gorze strony. Nasz kod nie pisze nagłowkowi ani `top`, ani `transform` (sprawdzone) — to
   rysowanie elementu przyklejonego przy chowaniu/pokazywaniu dolnego paska Safari.
   Lekarstwo nr 1: wlasna warstwa kompozytora (`translateZ(0)`) — przyklejony element jest wtedy
   skladany osobno i nie „zostaje" w starym miejscu przy przeliczaniu viewportu.
   ⚠️ `transform` na .hd czyni go blokiem odniesienia dla `fixed` W SRODKU — w nagłowku nie ma
   takich elementow (menu pelnoekranowe i pasek boczny sa w osobnych kontenerach). */
@media(max-width:900px){
  body.gm-page .hd{
    -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
  }
}


/* ---------- 72. HOME MOBILE + TABLET: KROPKA PRZED KAZDYM FAKTEM POD POWITANIEM (Seb 01.10) ----------
   „Licencjonowane posrednictwo / Dedykowany agent / Profesjonalny marketing" — ponizej 1024 px
   kazdy fakt laduje w osobnym wierszu, a kropka stala tylko przed 2. i 3. (separator). Teraz
   kazdy wiersz ma kropke jak punkt listy. Desktop (jeden rzad z separatorami) bez zmian. */
@media(max-width:1023px){
  body.gm-page .wlc__facts span::before,
  body.gm-page .wlc__facts span+span::before{
    content:""; display:block; flex:0 0 auto; width:4px; height:4px; border-radius:50%; background:#590B11;
  }
}

/* ---------- 73. HOME: TYTUL OFERTY NA SLIDERACH JAK W ZDANIU, NIE WERSALIKAMI (Seb 01.10) ----------
   Dotyczy kart `.ofr__ttl` w „Wyroznionych" (#ofr) i „Najnowszych" (#nowe). Tytuly w CRM/panelu
   sa juz pisane zdaniem, wiec wystarczy zdjac `uppercase`. */
body.gm-page .ofr__ttl{ text-transform:none !important; }


/* ---------- 74. HOME: „PRZEJDZ DO OFERTY" NA SLIDERACH — MLECZNE TLO (Seb 01.10) ----------
   Bylo: w pelni przezroczysty z biala ramka. Teraz delikatnie mleczny (polprzezroczysta biel
   + lekkie rozmycie), a po najechaniu na karte — jak dotad — pelna biel z ciemnym tekstem
   (regula `.ofr__card:hover .ofr__go` z makiety). Dotyczy #ofr i #nowe (wspolna klasa). */
body.gm-page .ofr__go{
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
body.gm-page .ofr__card:hover .ofr__go,
body.gm-page .ofr__go:hover{ background:#fff; color:#141517; }


/* ---------- 75. OFERTA — HERO: PRZYCISKI MLECZNE JAK „PRZEJDZ DO OFERTY" NA HOME (Seb 01.10) ----------
   „Umow sie na prezentacje", zakladka (zapisz) i udostepnij: zamiast w pelni przezroczystych —
   ta sama mleczna biel z lekkim rozmyciem co §74. Najechanie bez zmian (kremowe tlo, ciemny
   znak). Zapisana zakladka i „Oferta archiwalna" tez stoja na mlecznym tle. */
body.gm-page .gmo-hero__cta,
body.gm-page .gmo-hero__cta--arch,
body.gm-page .gmo-hero__cta--arch:hover{
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
body.gm-page .gmo-act,
body.gm-page .gmo-act.esticrm-single-fav[aria-pressed="true"]{
  background:rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
body.gm-page .gmo-hero__cta:not(.gmo-hero__cta--arch):hover{ background:var(--cream); }
body.gm-page .gmo-act:hover,
body.gm-page .gmo-act.esticrm-single-fav[aria-pressed="true"]:hover,
body.gm-page .gmo-act--share.is-copied{ background:var(--cream) !important; }


/* ---------- 76. OFERTA: ZDJECIA Z PRAWEJ STALEJ WIELKOSCI PRZY AKORDEONACH (Seb 01.10) ----------
   Do tej pory zdjecia ROSLY razem z lewa kolumna (flex:1 + min-height:100%, decyzja z 11.08 —
   „bez bialej dziury po prawej"), wiec rozwiniecie „Opisu" rozciagalo kazde z 432 do 650-870 px.
   Seb 01.10: stala wielkosc. Proporcja 3:2 = dokladnie rozmiar przy zwinietych akordeonach
   (637x432 na 1440, 453x307 na 1024). Pod zdjeciami moze zostac biel, gdy tekst jest dluzszy. */
body.gm-page .gmo-s1__shots{ min-height:0; align-self:start; }
body.gm-page .gmo-shot{ flex:0 0 auto; min-height:0; aspect-ratio:3/2; }


/* ---------- 77. PRZYCISKI SPOZA §57 — TEN SAM STOPIEN PISMA (Seb 01.10: „raz wieksza, raz mniejsza") ----------
   Pomiar 13 podstron x 1440/390: 21 przyciskow trzyma standard §57 (12 / 10,9 px, .2em),
   a te ponizej nie (11,5 / 9,9 / 10,4 / 10,7 / 12,2 / 13 px, rozne trackingi; „Zaladuj wiecej"
   do tego malymi literami). Ujednolicamy WYLACZNIE pismo — wymiary i kolory zostaja. */
body.gm-page .ofr__go,
body.gm-page .gmo-hero__cta,
body.gm-page .gmo-btn,
body.gm-page .gmo-card__cta,
body.gm-page .lok__btn,
body.gm-page .esticrm-btn--more.esticrm-load-more,
body.gm-page .gm-flt__mob{
  font-size:var(--gm-btn-fs) !important; letter-spacing:var(--gm-btn-ls) !important;
  text-transform:uppercase !important; font-weight:400 !important;
}


/* ---------- 78. NAGLOWEK: ZAKLADKA ULUBIONYCH = TA SAMA CO NA LISTINGU / W OFERCIE (Seb 01.10) ----------
   Rysunek 20x38 (GM_RAIL_BOOKMARK) w proporcji jak na stronie oferty (12 x 22,8), kreska
   1,3 bez skalowania — jak `.gmo-act__ic`. Stan `.has` (cos zapisane) dalej wypelnia ja kolorem. */
body.gm-page .hd .fav svg{ width:13px !important; height:24.7px !important; }
body.gm-page .hd .fav svg,
body.gm-page .hd .fav svg *{ stroke-width:1.3 !important; vector-effect:non-scaling-stroke; stroke-linejoin:miter; }


/* ---------- 79. /o-nas BACKSTAGE: IKONY ZAMIAST ZDJEC (Seb 01.10) ----------
   Kafel 4:3 jak dawny kadr, jasnoszare tlo, kreskowa ikona bordo na srodku. */
body.gm-page .abo-bts__ico{
  display:grid; place-items:center; aspect-ratio:4/3; background:#F5F5F5;
  border:1px solid rgba(22,21,30,.06);
}
body.gm-page .abo-bts__ico svg{
  width:clamp(44px,4.4vw,64px); height:clamp(44px,4.4vw,64px);
  fill:none; stroke:#590B11; stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round;
}
@media(max-width:900px){ body.gm-page .abo-bts__ico svg{ width:40px; height:40px; } }
/* 79b (Seb 01.10, runda 2): ikony WIEKSZE, kafel na BIALYM tle (cienka ramka zostaje). */
body.gm-page .abo-bts__ico{ background:#fff; border-color:rgba(22,21,30,.08); }
body.gm-page .abo-bts__ico svg{ width:clamp(80px,8vw,116px); height:clamp(80px,8vw,116px); stroke-width:1; }
@media(max-width:900px){ body.gm-page .abo-bts__ico svg{ width:64px; height:64px; } }
/* 79c: kreska NIE skaluje sie z ikona (przy 116 px wychodzilo ~5 px — ciezko przy cienkich liniach serwisu). */
body.gm-page .abo-bts__ico svg *{ vector-effect:non-scaling-stroke; stroke-width:1.6px; }

/* ---------- 80. MOBILE: ZDJECIA „JAK MOZEMY CI POMOC" NA SZEROKOSC SEKCJI (Seb 02.10, v2) ----------
   Bylo 150x200 px; ma byc na cala szerokosc kolumny (marginesy sekcji lewo/prawo zostaja),
   WYSOKOSC TA SAMA (200 px). v1 (100vw, od krawedzi do krawedzi) — COFNIETE w tej samej rundzie. */
@media(max-width:900px){
  body.gm-page .pom__ph{
    max-width:none !important; width:100% !important;
    aspect-ratio:auto !important; height:200px !important;
  }
}

/* ---------- 81. MOBILE: GALERIA OFERTY — JEDNO ZDJECIE NA KADR, BEZ UCIETEGO NASTEPNEGO (Seb 02.10) ----------
   Tor wychodzil do prawej krawedzi ekranu, a kafel mial 82% — z prawej wystawal kawalek
   kolejnego zdjecia. Teraz tor konczy sie na marginesie sekcji (`--gmo-pad`, z obu stron
   tyle samo), a kafel = cala szerokosc toru. Kolejne zdjecie lezy za krawedzia toru
   (overflow toru je tnie), wiec w marginesie nic nie widac. Strzalki i licznik bez zmian:
   krok liczy JS z realnej pozycji kafli. Desktop nietkniety (szablon oferty KLEPNIETY). */
@media(max-width:900px){
  body.gm-page .gmo-gal__track{ margin-right:var(--gmo-pad); padding-right:0; }
  body.gm-page .gmo-gal__i{ flex-basis:100%; }
}

/* ---------- 82. HOME DESKTOP: KAFLE LOKALIZACJI PRZYCIEMNIONE JAK NA MOBILE + NAZWA MIASTA NA SRODKU (Seb 05.10) ----------
   1) Przyciemnienie: stan spoczynkowy = wartosci z :hover (te same co blok mobilny <=900).
   2) Nazwa „siedziala troche wyzej": podpis to flex-kolumna wysrodkowana RAZEM z ukrytym
      (opacity:0, ale zajmujacym miejsce) przyciskiem „Zobacz oferty", wiec srodkiem byl srodek
      PARY nazwa+przycisk. Teraz siatka 1fr/auto/1fr: nazwa w srodkowym wierszu = dokladny srodek
      kafla (takze po powiekszeniu na hover), przycisk w dolnym wierszu tuz pod nia. */
@media(min-width:901px){
  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__cap{ display:grid; grid-template-rows:1fr auto 1fr; grid-template-columns:minmax(0,1fr);
    justify-items:center; align-items:start; row-gap:0; }
  body.gm-page .lok__name{ grid-row:2; align-self:center; }
  body.gm-page .lok__btn{ grid-row:3; margin-top:clamp(14px,2vh,24px); }
}
/* 3) Przycisk „Zobacz oferty" w kaflach = ten sam co „Przejdz do oferty" (§74): mleczny
      (polprzezroczysta biel + blur), po najechaniu na PRZYCISK pelna biel z ciemnym tekstem.
      Desktop i telefon (na telefonie biel przy dotknieciu robi juz blok :active makiety). */
body.gm-page .lok__btn{
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
body.gm-page .lok__btn:hover{ background:#fff; color:#141517; border-color:#fff; }
/* 4) Biel „po najechaniu na przycisk" nie dzialala: caly kafel przykrywa przezroczysty link
      `.gm-ovl` (z-index 6), wiec :hover lapal link, nie przycisk. Podpis idzie NAD link
      (sam ma pointer-events:none, wiec reszta kafla dalej klika w `.gm-ovl`), a przycisk
      — aktywny tylko na hover kafla — przekierowuje klik na href kafla (js-pre.js, §82). */
body.gm-page .lok__tile .lok__cap{ z-index:7; }

/* ---------- 83. /polityka-prywatnosci/ (05.10) ----------
   Tresc na PELNA szerokosc siatki, jak we wpisach (Seb 05.10: kolumna 880 px byla „waska do lewej"). */
body.gm-page .gmp--doc .gmp__body h2{ margin-top:1.9em; }
body.gm-page .gmp--doc .gmp__body ol ul{ margin:.5em 0 .6em; list-style:disc; }

/* ---------- 84. HOME DESKTOP: „ZAKRES WSPARCIA" (#pom) — ZDJECIE SZERSZE, TA SAMA WYSOKOSC (Seb 05.10) ----------
   Bylo 3:4 w kolumnie clamp(118px,13vw,178px) → 178×237 przy 1440. Teraz 3:2 przy tej samej
   wysokosci: kolumna = wysokosc × 1,5 = clamp(236px,26vw,356px) → 356×237 przy 1440.
   Mobile (<=900, §80) nietkniety. */
@media(min-width:901px){
  body.gm-page .pom__grid{ grid-template-columns:minmax(0,1fr) clamp(236px,26vw,356px); }
  body.gm-page .pom__ph{ aspect-ratio:3/2; }
  /* Zrodla sa kwadratowe/4:5, kadr 3:2 tnie gore i dol. Przy srodku ginely: wiechy trawy (01),
     gora oscieznicy drzwi (02), gora aparatu (04) — kadr podniesiony. 03 i 05 = srodek OK. */
  body.gm-page .pom__ph img[src*="zakres-sprzedaz-nieruchomosci"]{ object-position:50% 30%; }
  body.gm-page .pom__ph img[src*="zakres-sprzedaz-bez-ogloszenia"]{ object-position:50% 35%; }
  body.gm-page .pom__ph img[src*="zakres-fotografia-wideo"]{ object-position:50% 30%; }
}