/* nieruchomosci.121.pl - Cormorant Garamond + Jost, paleta wapien/laguna/terakota, edytorski, filmowy */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/jost-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/jost-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --lime:#f3eee4; --sand:#e8dfcd; --lagoon:#0c4a53; --lagoon-d:#062f36; --sea:#2d8c94;
  --terra:#b4532d; --terra-l:#d98a63; --ink:#102427; --ink-s:rgba(16,36,39,.78);
  --line:rgba(16,36,39,.22); --line-l:rgba(232,223,205,.3);
  --f-head:'Cormorant Garamond','Palatino Linotype',Georgia,serif;
  --f-body:'Jost','Century Gothic','Segoe UI',system-ui,sans-serif;
  --pad:clamp(4.5rem,9vw,9rem);
  --ease:cubic-bezier(.19,.7,.12,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lime);color:var(--ink);font-family:var(--f-body);font-weight:300;font-size:clamp(1rem,1.1vw,1.12rem);line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--terra);outline-offset:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--lime);color:var(--ink);padding:.6rem 1rem;border:1px solid var(--ink)}
.skip:focus{top:1rem}

.wrap{width:min(100% - 2*clamp(1.25rem,5vw,4rem),1320px);margin-inline:auto}

/* ---------- animacje: powolne, filmowe ---------- */
.js .fx{opacity:0;transform:translateY(26px);transition:opacity 1.4s var(--ease) var(--d,0s),transform 1.6s var(--ease) var(--d,0s)}
.js .fx.is-in{opacity:1;transform:none}
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero__title .ln{white-space:nowrap}
.ln>span{display:block}
.js .mk .ln>span,.js .hero__title .ln>span{transform:translateY(112%);transition:transform 1.5s var(--ease) var(--d,0s)}
.js .mk.is-in .ln>span,.js .hero__title.is-in .ln>span{transform:none}
.js .rev{clip-path:inset(0 0 100% 0);transition:clip-path 1.8s var(--ease)}
.js .rev.is-in{clip-path:inset(0 0 0 0)}

/* ---------- elementy wspolne ---------- */
.h-big{font-family:var(--f-head);font-weight:300;font-size:clamp(2.5rem,6.4vw,6.4rem);line-height:.98;letter-spacing:.01em}
.h-big--light{color:var(--lime)}
.lead{font-family:var(--f-head);font-weight:400;font-size:clamp(1.55rem,2.35vw,2.35rem);line-height:1.28;color:var(--ink)}
.eyebrow{font-size:.78rem;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:1.1rem}
.eyebrow::before{content:"";width:3.2rem;height:1px;background:currentColor}

.btn{display:inline-flex;align-items:center;gap:1rem;font-family:var(--f-body);font-weight:400;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;padding:1.15rem 1.9rem;border:1px solid currentColor;background:transparent;cursor:pointer;transition:background .5s ease,color .5s ease,border-color .5s ease}
.btn .arr{width:2rem;height:.75rem;transition:transform .6s var(--ease)}
.btn:hover .arr{transform:translateX(.45rem)}
.btn--light{color:var(--lime);border-color:rgba(243,238,228,.7)}
.btn--light:hover{background:var(--lime);color:var(--lagoon-d)}
.btn--dark{color:var(--lagoon);border-color:var(--lagoon);margin-top:2rem}
.btn--dark:hover{background:var(--lagoon);color:var(--lime)}
.btn--terra{background:var(--terra);border-color:var(--terra);color:#fff8ef}
.btn--terra:hover{background:var(--lagoon);border-color:var(--lagoon)}
.btn:disabled{opacity:.6;cursor:wait}
.arr{fill:none;stroke:currentColor;stroke-width:1.2;overflow:visible}
.arr--back{transform:scaleX(-1)}

/* stempel z cienka glifa */
.stamp{position:relative;display:grid;place-items:center;flex:none;width:5.2rem;height:5.2rem;color:var(--terra);transform:rotate(-5deg)}
.stamp::before,.stamp::after{content:"";position:absolute;border-radius:50%}
.stamp::before{inset:0;border:1.5px solid currentColor}
.stamp::after{inset:.45rem;border:1px dashed currentColor;opacity:.75}
.gl{width:2.7rem;height:2.7rem;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;position:relative}

/* ramka-obrys przesuniety wzgledem zdjecia */
.outline{position:relative;isolation:isolate}
.outline::after{content:"";position:absolute;inset:0;border:1px solid var(--terra);transform:translate(1.1rem,1.1rem);pointer-events:none;z-index:-1}
.par{position:relative;overflow:hidden;background:var(--sand)}
.par img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;transform:translate3d(0,var(--py,0px),0);will-change:transform}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;color:var(--lime);overflow:hidden;background:var(--lagoon-d);padding-bottom:clamp(9rem,17vh,13rem)}
.hero__media{position:absolute;inset:-14% 0 0 0;transform:translate3d(0,var(--hy,0px),0);will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1.14);animation:slowzoom 18s var(--ease) forwards}
@keyframes slowzoom{to{transform:scale(1)}}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,47,54,.62) 0%,rgba(6,47,54,.28) 48%,rgba(6,47,54,0) 80%),linear-gradient(180deg,rgba(6,47,54,.5) 0%,rgba(6,47,54,.05) 30%,rgba(6,47,54,.45) 62%,rgba(6,47,54,.9) 100%)}
.hero__frame{position:absolute;inset:clamp(.7rem,1.6vw,1.5rem);border:1px solid rgba(243,238,228,.55);pointer-events:none}
.js .hero__frame{animation:frameIn 2.4s var(--ease) both}
@keyframes frameIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}

.topnav{position:absolute;top:clamp(1.6rem,3.2vw,3rem);left:0;right:0;z-index:3;padding-inline:clamp(2rem,5vw,4.5rem)}
.topnav ul{display:flex;justify-content:flex-end;gap:clamp(1.2rem,3vw,3rem);flex-wrap:wrap}
.topnav a{font-size:.74rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;padding:.4rem 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease)}
.topnav a:hover,.topnav a:focus-visible{background-size:100% 1px}

.hero__body{position:relative;z-index:2;width:min(100% - 2*clamp(2rem,6vw,5.5rem),1320px);margin-inline:auto;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.4rem,3vh,2.2rem)}
.hero__title{font-family:var(--f-head);font-weight:300;font-size:clamp(2.7rem,6.5vw,7.4rem);line-height:.98;letter-spacing:.015em}
.hero__title .ln:nth-child(2){--d:.25s}
.hero__scroll{position:absolute;z-index:2;right:clamp(2.2rem,5vw,4.6rem);bottom:clamp(2.2rem,5vh,3.6rem);width:1px;height:5.5rem;background:rgba(243,238,228,.3);overflow:hidden}
.hero__scroll::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--lime);animation:drip 2.8s var(--ease) infinite}
@keyframes drip{from{transform:translateY(-100%)}to{transform:translateY(260%)}}

/* ---------- intro (karta zachodzi na hero) ---------- */
.intro{position:relative;padding-bottom:var(--pad);z-index:2}
.intro__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1rem,2.4vw,2.5rem);align-items:start}
.intro__card{grid-column:7/13;grid-row:1;margin-top:clamp(-11rem,-12vw,-6rem);background:var(--lime);border:1px solid var(--line);padding:clamp(2rem,4.2vw,4.6rem);position:relative;z-index:3;box-shadow:0 40px 70px -40px rgba(6,47,54,.55)}
.intro__photo{grid-column:1/7;grid-row:1;margin-top:clamp(5rem,9vw,9rem);margin-right:1.1rem;max-width:44rem}
.intro__photo .par{aspect-ratio:4/5}

/* ---------- dlaczego Cypr ---------- */
.why{background:var(--sand);padding-block:var(--pad)}
.why__grid{display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(2rem,7vw,8rem);align-items:start}
.why__side{position:sticky;top:2.5rem;display:flex;flex-direction:column;gap:2rem}
.why__side p{color:var(--ink-s);font-size:1.02em}
.why__photo{margin:1.2rem 1.1rem 0 0}
.why__photo .par{aspect-ratio:16/10}
.index{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,2.8rem);padding-block:clamp(1.8rem,3.4vw,3rem);border-top:1px solid var(--line);align-items:start}
.row h3,.card h3,.panes h3{font-family:var(--f-head);font-style:italic;font-weight:400;font-size:clamp(1.7rem,2.3vw,2.35rem);line-height:1.1;margin-bottom:.7rem;color:var(--lagoon)}
.row p{color:var(--ink-s)}

/* ---------- potencjal inwestycyjny (ciemna laguna) ---------- */
.pot{background:var(--lagoon);color:var(--sand);padding-bottom:clamp(3.5rem,6vw,6rem);position:relative}
.band{position:relative;height:clamp(18rem,44vh,30rem);overflow:hidden}
.pot .band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,74,83,.05) 30%,var(--lagoon) 100%);z-index:2}
.pot .band img{object-position:50% 40%}
.pot__head{display:grid;grid-template-columns:7fr 5fr;column-gap:clamp(2rem,6vw,6rem);align-items:end;margin-top:clamp(-8rem,-9vw,-3rem);position:relative;z-index:3;padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.pot__head .h-big{color:var(--lime)}
.pot__head p{color:rgba(232,223,205,.85);padding-bottom:.6rem}

.rail{display:flex;gap:clamp(1rem,2vw,1.8rem);overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:max(clamp(1.25rem,5vw,4rem),calc((100% - 1320px)/2));scroll-padding-inline:max(clamp(1.25rem,5vw,4rem),calc((100% - 1320px)/2));scrollbar-width:none;padding-bottom:.4rem;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.card{flex:none;width:clamp(17.5rem,27vw,25rem);scroll-snap-align:start;border:1px solid var(--line-l);padding:clamp(1.6rem,2.4vw,2.4rem);display:flex;flex-direction:column;gap:1.4rem;min-height:27rem;position:relative;transition:background .7s ease,border-color .7s ease}
.card::before{content:"";position:absolute;left:-1px;top:-1px;width:2.2rem;height:2.2rem;border-top:2px solid var(--terra-l);border-left:2px solid var(--terra-l)}
.card:hover{background:rgba(6,47,54,.45);border-color:rgba(232,223,205,.6)}
.card .stamp{color:var(--terra-l)}
.card h3{color:var(--lime);margin-bottom:0}
.card p{color:rgba(232,223,205,.82)}

.rail-ui{display:flex;align-items:center;gap:1.2rem;margin-top:clamp(1.8rem,3vw,2.8rem)}
.rail-ui__bar{flex:1;height:1px;background:var(--line-l);position:relative}
.rail-ui__bar i{position:absolute;left:0;top:-1px;height:3px;width:20%;background:var(--terra-l);transform-origin:left}
.sq{width:3.4rem;height:3.4rem;display:grid;place-items:center;background:transparent;border:1px solid var(--line-l);color:var(--sand);cursor:pointer;transition:background .4s,color .4s,border-color .4s}
.sq:hover{background:var(--lime);color:var(--lagoon-d);border-color:var(--lime)}
.sq .arr{width:1.6rem;height:.7rem}

/* ---------- lec z nami ---------- */
.trip{background:var(--lime);padding-bottom:var(--pad)}
.band--sea{height:clamp(22rem,64vh,38rem);display:grid;place-items:center}
.band--sea::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,47,54,.4),rgba(6,47,54,.3) 50%,rgba(6,47,54,.5));z-index:2}
.band__frame{position:absolute;inset:clamp(.9rem,2vw,2rem);border:1px solid rgba(243,238,228,.6);z-index:3;pointer-events:none}
.band--sea .h-big{position:relative;z-index:4;text-align:center;padding-inline:2rem}
.trip__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1rem,2.4vw,2.5rem);align-items:start}
.trip__photo{grid-column:1/5;margin-top:clamp(-9rem,-10vw,-4rem);margin-right:1.1rem;position:sticky;top:2rem;z-index:5}
.trip__photo .par{aspect-ratio:2/3}
.trip__panel{grid-column:5/13;padding-top:clamp(3rem,6vw,6rem);padding-left:clamp(0rem,2vw,2rem)}
.trip__panel .lead{max-width:34ch;margin-bottom:clamp(2.5rem,4.5vw,4rem)}
.panes{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.panes li{padding:clamp(1.6rem,2.8vw,2.6rem);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:1.1rem}
.panes h3{margin-bottom:0}
.panes p{color:var(--ink-s)}

/* ---------- kontakt ---------- */
.contact{background:var(--sand);padding-block:var(--pad)}
.contact__grid{display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(2rem,8vw,9rem);align-items:center}
.contact__photo{margin-right:1.1rem}
.contact__photo .par{aspect-ratio:4/5}
.h-form{font-family:var(--f-head);font-style:italic;font-weight:300;font-size:clamp(2.8rem,5.6vw,5.4rem);line-height:1;color:var(--lagoon);margin-bottom:clamp(1.8rem,3.5vw,3rem)}
.field{margin-bottom:1.7rem}
.field label{display:block;font-size:.72rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-s);margin-bottom:.3rem}
.field .opt{letter-spacing:.08em;text-transform:none;opacity:.75}
.field input,.field textarea{width:100%;font:inherit;font-family:var(--f-head);font-size:1.55rem;font-weight:400;line-height:1.4;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:.4rem 0 .5rem;transition:border-color .4s,box-shadow .4s}
.field textarea{resize:vertical;min-height:7rem}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--terra);box-shadow:0 1px 0 var(--terra)}
.field.is-bad input,.field.is-bad textarea{border-bottom-color:var(--terra)}
.field__err{color:var(--terra);font-size:.92rem;font-weight:400;margin-top:.35rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status{margin-top:1.4rem;padding:1rem 1.2rem;border:1px solid;font-weight:400}
.form__status.is-ok{color:var(--lagoon);border-color:var(--lagoon);background:rgba(12,74,83,.07)}
.form__status.is-err{color:#8a2f12;border-color:var(--terra);background:rgba(180,83,45,.08)}

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

/* ---------- strony dziekujemy / blad ---------- */
.status-page{min-height:100vh;display:grid;place-items:center;padding:2rem;background:var(--lagoon);color:var(--sand)}
.status-page__box{max-width:40rem;text-align:center;border:1px solid var(--line-l);padding:clamp(2rem,6vw,4.5rem);position:relative}
.status-page__box::before{content:"";position:absolute;inset:.7rem;border:1px solid var(--line-l);pointer-events:none}
.status-page h1{font-family:var(--f-head);font-style:italic;font-weight:300;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;color:var(--lime);margin-bottom:1.2rem}
.status-page p{margin-bottom:1.6rem}
.status-page .btn{margin-top:0;color:var(--lime);border-color:rgba(243,238,228,.7)}
.status-page .btn:hover{background:var(--lime);color:var(--lagoon-d)}

/* ---------- responsywnosc ---------- */
@media (max-width:980px){
  .topnav ul{justify-content:center}
  .intro__grid,.why__grid,.trip__grid,.contact__grid,.pot__head{display:block}
  .intro__card{margin-top:-5.5rem;margin-inline:0}
  .intro__photo{margin:3.2rem 1.1rem 0 0}
  .why__side{position:static;margin-bottom:2.5rem}
  .pot__head{margin-top:-4rem}
  .pot__head p{margin-top:1.6rem}
  .trip__photo{margin-top:-5rem;max-width:22rem;margin-bottom:0;position:relative;top:auto}
  .trip__panel{padding:3rem 0 0}
  .contact__photo{max-width:26rem;margin:0 1.1rem 3.5rem 0}
}
@media (max-width:640px){
  .hero{padding-bottom:7.5rem}
  .hero__title{font-size:clamp(2rem,9vw,3.4rem)}
  .hero__title .ln{white-space:normal}
  .hero__scroll{display:none}
  .topnav ul{gap:.4rem 1.3rem}
  .topnav a{font-size:.68rem;letter-spacing:.18em}
  .panes{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:1.2rem}
  .stamp{width:4.4rem;height:4.4rem}
  .gl{width:2rem;height:2rem}
  .card{min-height:0;width:80vw}
  .trip__photo{max-width:none;margin-right:1.1rem}
  .field input,.field textarea{font-size:1.35rem}
  .btn{width:100%;justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .fx,.js .rev{opacity:1;transform:none;clip-path:none}
  .js .mk .ln>span,.js .hero__title .ln>span{transform:none}
  .hero__media img{transform:none}
}

/* stopka rodziny: jedna linia na szerokich ekranach */
