@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');:root{--bg:#0b0b0a;--deep:#050505;--panel:#141412;--text:#eee9df;--muted:#aaa59b;--dim:#77736b;--accent:#c9a46a;--bright:#e4c489;--line:rgba(238,233,223,.18);--glass:rgba(11,11,10,.82);--max:1440px;--gutter:clamp(1.25rem,4vw,5rem);--hero-pad-top:clamp(5rem,12vh,10rem);--hero-h1-intro-gap:2rem;--hero-intro-cta-gap:2rem;--ease:cubic-bezier(.22,.61,.36,1)}*{box-sizing:border-box}html{background:var(--bg);color:var(--text);scroll-behavior:smooth}body{margin:0;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,sans-serif;line-height:1.65;overflow-x:clip}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:.94;letter-spacing:-.025em}h1{font-size:clamp(2.8rem,7vw,7.2rem)}h2{font-size:clamp(2.35rem,5vw,5.6rem)}h3{font-size:clamp(1.55rem,2.3vw,2.4rem)}a{color:inherit;text-decoration:none}a:hover{color:var(--bright)}:focus-visible{outline:2px solid var(--bright);outline-offset:4px}.skip{position:absolute;left:1rem;top:-5rem;background:var(--accent);color:var(--deep);padding:.6rem 1rem;z-index:30}.skip:focus{top:1rem}.site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:.8rem var(--gutter);transition:.3s var(--ease)}.site-header.scrolled{background:var(--glass);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand img{width:118px;height:auto;display:block}.nav-toggle{display:none;background:none;color:var(--text);border:1px solid var(--line);padding:.45rem .65rem}.nav-list{display:flex;align-items:center;gap:1.4rem;list-style:none;margin:0;padding:0;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em}.nav-list .talk{border:1px solid var(--accent);padding:.7rem 1rem;color:var(--bright)}main{min-height:60vh}.hero{position:relative;height:100svh;min-height:0;display:grid;align-items:end;padding:5rem var(--gutter) 3rem;isolation:isolate;background:var(--deep);overflow:hidden}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.25),rgba(5,5,5,.86));z-index:-1}.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero-copy{max-width:900px}.eyebrow,.label{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--bright)}.hero h1{max-width:900px;margin:.7rem 0 1.5rem;font-weight:300}.hero h1 .hero-lead,.inner-hero h1 .hero-lead,.form-wrap h2 .hero-lead{color:var(--text)}.hero h1 .hero-emphasis,.inner-hero h1 .hero-emphasis,.form-wrap h2 .hero-emphasis{color:var(--accent);font-style:italic;font-weight:300}.hero p{max-width:52ch;font-size:clamp(1.1rem,1.55vw,1.45rem);color:var(--muted)}.btn{display:inline-flex;align-items:center;gap:.8rem;min-height:48px;padding:.8rem 1.2rem;border:1px solid var(--accent);background:var(--accent);color:var(--deep);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;transition:.25s var(--ease)}.btn:hover{background:var(--bright);border-color:var(--bright);color:var(--deep);transform:translateY(-2px)}.btn span[aria-hidden]{display:inline-block;transition:transform .25s var(--ease)}.btn:hover span[aria-hidden]{transform:translateX(3px)}.section{padding:clamp(4.5rem,10vw,11rem) var(--gutter)}.section-inner{max-width:var(--max);margin:auto}.section-head{max-width:65ch;margin-bottom:3rem}.section-head p{color:var(--muted);font-size:1.1rem}.grid{display:grid;gap:1rem}.projects{grid-template-columns:repeat(3,1fr)}.card{background:var(--panel);border:1px solid var(--line);overflow:hidden}.card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.card-body{padding:1.3rem}.card-body p{color:var(--muted);font-size:.95rem}.card .label{font-size:.62rem}.card h3{margin:.5rem 0;font-size:2rem}.notice{color:var(--bright);font-size:.78rem;letter-spacing:.04em}.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,8rem);align-items:center}.split img{width:100%;aspect-ratio:1.6;object-fit:cover}.dark{background:var(--deep)}.rule{border-top:1px solid var(--line)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.step{border-top:1px solid var(--accent);padding-top:1rem}.step-number{color:var(--accent);font-size:.72rem;letter-spacing:.12em}.step p,.offer p,.knowledge p,.location p{color:var(--muted)}.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;min-width:0;width:100%}.offer{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);background:var(--panel);border:1px solid var(--line);min-width:0;width:100%;overflow:hidden}.offer img{width:100%;height:100%;min-width:0;object-fit:cover}.offer div{padding:1.5rem}.knowledge{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.knowledge article{border-top:1px solid var(--line);padding:1.5rem 0}.knowledge h3{margin:.3rem 0 .7rem;font-size:2.2rem}.breadcrumbs{padding:7rem var(--gutter) 1rem;max-width:var(--max);margin:auto;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em}.form-wrap{max-width:800px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.field{display:grid;gap:.4rem}.field.full{grid-column:1/-1}.field label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}input,select,textarea{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--text);font:inherit;padding:.9rem;border-radius:0}textarea{min-height:150px;resize:vertical}.consent{display:flex;gap:.7rem;align-items:flex-start;margin:1.2rem 0;color:var(--muted);font-size:.85rem}.consent input{width:1.1rem;margin-top:.25rem}.form-status{margin-top:1rem;color:var(--bright)}.location{min-width:min(78vw,440px);flex:0 0 min(78vw,440px);scroll-snap-align:start;background:var(--panel);border:1px solid var(--line)}.location img{width:100%;aspect-ratio:4/3;object-fit:cover}.location .card-body{min-height:210px}.location-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;padding:0 1.3rem 1.3rem}.location-gallery img{aspect-ratio:1.2;width:100%;object-fit:cover}.location-gallery img{border:1px solid var(--line)}.location-controls{display:flex;gap:.5rem;margin-top:1.5rem}.location-controls button{background:var(--panel);border:1px solid var(--line);color:var(--text);min-width:44px;min-height:44px}.site-footer{border-top:1px solid var(--line);padding:3rem var(--gutter);background:var(--deep)}.footer-inner{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}.footer-links{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;color:var(--muted);font-size:.85rem}.socials{display:flex;gap:1rem;color:var(--muted);font-size:.8rem}.footer-note{color:var(--dim);font-size:.75rem;margin-top:2rem}.reveal{animation:rise .7s var(--ease) both}@keyframes rise{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}@media(max-width:900px){.nav-toggle{display:block}.nav-list{display:none;position:absolute;top:72px;left:0;right:0;background:var(--glass);padding:1rem var(--gutter);flex-direction:column;align-items:flex-start}.nav-list.open{display:flex}.projects,.steps{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.offer{grid-template-columns:1fr}.offer img{aspect-ratio:16/9}.footer-inner{grid-template-columns:1fr 1fr}}@media(max-width:640px){.site-header{min-height:56px;padding:.55rem 1.25rem}.brand img{width:100px}.nav-list{top:56px}.hero{padding:5.5rem 1.25rem 4rem;min-height:100svh}.hero h1{font-size:clamp(3rem,16vw,5.2rem)}.btn{width:100%;justify-content:center}.section{padding:4.5rem 1.25rem}.projects,.steps,.knowledge,.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.breadcrumbs{padding:5.5rem 1.25rem 1rem}.footer-inner{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.btn{animation:none;transition:none}.btn:hover{transform:none}.location-controls{display:none}}.site-header{padding:26px var(--gutter);min-height:0}.brand img{width:185px}.nav-list{gap:40px;font-size:.7rem;letter-spacing:.2em}.nav-list .talk{padding:12px 24px;border:1px solid var(--line);color:var(--text);background:transparent}.site-header.scrolled{padding:16px var(--gutter);background:rgba(8,8,10,.72);backdrop-filter:blur(20px) saturate(130%)}h1,h2,h3{font-weight:300;line-height:1.03;letter-spacing:-.005em}.hero{min-height:100svh;padding:8rem var(--gutter) 12vh}.hero h1{max-width:15ch;font-size:clamp(2.8rem,6vw,6rem);font-weight:200;line-height:.98;letter-spacing:-.005em}.inner-hero h1{font-weight:200}.hero p{max-width:56ch;font-size:clamp(1.02rem,1.3vw,1.18rem)}.hero-copy{max-width:900px}.btn{padding:17px 34px;font-size:.7rem;letter-spacing:.2em;border-radius:1px}.eyebrow{display:inline-flex;align-items:center;gap:16px;margin-bottom:30px;letter-spacing:.46em}.eyebrow:before{content:'';width:38px;height:1px;background:var(--accent)}.section{padding:clamp(6rem,12vh,11rem) var(--gutter)}.projects{gap:26px}.card{border-color:rgba(255,255,255,.045);border-radius:2px}.card-body{padding:26px 26px 30px}.split{grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px)}.split img{aspect-ratio:4/5}.offer,.location{border-color:rgba(255,255,255,.045);border-radius:2px}.inner-hero{position:relative;isolation:isolate;min-height:70vh;padding-top:clamp(8rem,12vh,10rem);background:linear-gradient(180deg,rgba(5,5,5,.35),rgba(5,5,5,.9)),var(--hero-image) center/cover no-repeat}.inner-hero .section-inner{position:relative;z-index:1}.inner-hero h1{max-width:14ch;font-size:clamp(2.8rem,7vw,5.8rem);font-weight:300}.inner-hero .form-wrap,.inner-hero form#consultation-form,.consultation-section form#consultation-form{scroll-margin-top:0}.inner-hero p{max-width:56ch}.breadcrumbs{padding-top:clamp(7rem,12vh,10rem);position:relative;z-index:3}.form-wrap{max-width:760px;margin:2rem auto 0;background:var(--deep);padding:clamp(1.5rem,3vw,3rem);border:0;color:var(--text);scroll-margin-top:0;text-align:center}.consultation-section{scroll-margin-top:0}.form-wrap h2{font-size:clamp(2rem,4vw,3.5rem);font-weight:300}.form-wrap .eyebrow{justify-content:center;margin-bottom:1rem;color:var(--accent)}.form-intro{max-width:52ch;margin:0 auto 2rem;color:var(--muted);font-size:1rem}.form-wrap .form-grid{text-align:left}.form-wrap .field label{color:var(--accent);font-size:.68rem;letter-spacing:.24em}.form-wrap input::placeholder,.form-wrap textarea::placeholder{color:var(--dim);opacity:1}.form-wrap .btn[type=submit]{background:var(--accent);border-color:var(--accent);color:var(--deep);width:100%;justify-content:center;margin-top:44px}.form-wrap .btn[type=submit]:hover{background:var(--bright);border-color:var(--bright)}.form-wrap .field label,.form-wrap .consent{color:var(--text)}.form-wrap input,.form-wrap select,.form-wrap textarea{color:var(--text)}.form-wrap input::placeholder,.form-wrap textarea::placeholder{color:var(--muted)}.form-wrap input:focus,.form-wrap select:focus,.form-wrap textarea:focus{border-bottom-color:var(--accent);outline:none}.field{gap:.5rem}.field input,.field select,.field textarea,input,select,textarea{background:transparent;border:0;border-bottom:1px solid var(--line);padding:12px 2px}.form-grid{gap:1.25rem}.location-gallery{gap:6px}.reveal{opacity:1;animation:none;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transform:none}html.js .reveal{opacity:0;transform:translateY(38px)}html.js .reveal.is-visible{opacity:1;transform:none}.reveal:hover,.card:hover img,.location:hover img{transform:scale(1.04)}@media(max-width:640px){.site-header{padding:18px 20px}.site-header.scrolled{padding:12px 20px}.brand img{width:150px}.nav-list{gap:1rem}.hero{padding:6rem 1.25rem 4rem}.hero h1{max-width:14ch}.hero p{max-width:32ch}.hero .btn{margin-bottom:1.25rem;padding:14px 18px;font-size:.62rem}.section{padding:clamp(5rem,12vh,8rem) 1.25rem}.breadcrumbs{padding:6rem 1.25rem 1rem}.inner-hero{min-height:72vh;padding-top:5rem}.split{gap:2rem}.form-wrap{margin-top:2rem}.location-gallery{padding:0 1rem 1rem}}@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.card:hover img,.location:hover img{transform:none}}@media(max-width:900px){.split,.section-inner.split{grid-template-columns:1fr!important}}.inner-hero{text-align:left}.inner-hero .btn + .btn,.section .btn + .btn{margin-left:28px}@media(max-width:900px){.inner-hero .btn + .btn,.section .btn + .btn{margin-left:0;margin-top:18px}}.cta-group{display:flex;flex-wrap:wrap;column-gap:28px;row-gap:28px;align-items:flex-start}.cta-group .btn{margin:0}@media(max-width:900px){.cta-group{flex-direction:column;gap:18px}.cta-group .btn{margin:0;width:100%}}.offer-grid,.knowledge,.steps{gap:26px}.projects{gap:26px}.section{padding:clamp(90px,12vh,160px) var(--gutter)}.section-head{margin-bottom:4rem}.hero h1{margin-bottom:2rem}.hero p{margin-bottom:2rem}.card,.offer,.knowledge article,.location{transition:transform 1.1s var(--ease),box-shadow 1.1s var(--ease)}.card:hover,.offer:hover,.knowledge article:hover,.location:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.22)}.card img,.offer img,.location img{transition:transform 1.3s var(--ease)}.card:hover img,.offer:hover img,.location:hover img{transform:scale(1.05)}@media(prefers-reduced-motion:reduce){.card,.offer,.knowledge article,.location,.card img,.offer img,.location img{transition:none}.card:hover,.offer:hover,.knowledge article:hover,.location:hover,.card:hover img,.offer:hover img,.location:hover img{transform:none;box-shadow:none}}.locations-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.locations-grid .location{min-width:0;flex:none;width:100%}@media(max-width:900px){.locations-grid{grid-template-columns:1fr;gap:26px}}body .inner-hero .section-inner,body .inner-hero .section-inner h1,body .inner-hero .section-inner h2,body .inner-hero .section-inner p,body .inner-hero .section-inner .btn{ text-align:left!important;margin-left:0!important;margin-right:0!important}body .inner-hero .section-inner{justify-items:start;align-items:start}@media(max-width:375px){.form-wrap{padding:.65rem}.form-wrap h2{font-size:1.65rem;margin-bottom:.35rem}.form-grid{grid-template-columns:minmax(0,1fr);gap:.35rem;min-width:0}.form-grid .field{min-width:0}.form-grid .field.full{grid-column:1/-1}.form-wrap .field label{font-size:.56rem}.field input,.field select,.field textarea{padding:1px}.form-wrap textarea{min-height:40px}.consent{margin:.35rem 0;font-size:.65rem}.form-wrap .btn[type=submit]{min-height:40px;padding:8px 12px;font-size:.58rem}}.form-wrap{font-family:Inter,ui-sans-serif,system-ui,sans-serif}.form-wrap h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300}.form-wrap .field label{color:var(--accent);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.form-wrap input::placeholder,.form-wrap textarea::placeholder{color:var(--dim);opacity:.62}.form-wrap textarea{display:block;width:100%;height:56px;min-height:56px;border:0 !important;border-bottom:1px solid var(--line) !important;background:transparent !important;box-shadow:none !important;padding:10px 2px 12px;resize:vertical;line-height:1.45}.form-wrap textarea::placeholder{color:var(--dim);opacity:.62}@media(max-width:640px){.form-wrap textarea{height:56px;min-height:56px}}@media(prefers-reduced-motion:reduce){.site-header .nav-list{transition:none;transform:none}.site-header .nav-list.open{transform:none}}.inner-hero .section-inner{padding-top:var(--hero-pad-top)}.hero-copy h1,.inner-hero h1{margin-bottom:var(--hero-h1-intro-gap)!important}.hero-copy p,.inner-hero .section-inner p{margin-bottom:var(--hero-intro-cta-gap)!important}.hero .btn,.inner-hero .btn{padding:17px 34px;min-height:48px;border:1px solid var(--accent);border-radius:1px;font-size:.7rem;letter-spacing:.2em;text-align:left}.hero .btn,.inner-hero .btn{align-self:flex-start;margin-left:0!important}.breadcrumbs{padding-top:44px!important;padding-bottom:0}.hero-copy{padding-top:0}.inner-hero{--hero-pad-top:76.19px}@media(max-width:640px){:root{--hero-h1-intro-gap:1.5rem;--hero-intro-cta-gap:1.5rem}:root{--hero-pad-top:77.59px}.inner-hero{--hero-pad-top:29.48px}.breadcrumbs{padding-top:44px!important}.hero .btn,.inner-hero .btn{padding:14px 18px}}.site-footer{border-top:1px solid rgba(238,233,223,.18);background:#050505;padding:clamp(4rem,8vh,7rem) var(--gutter) 2rem}.footer-inner{grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(2rem,5vw,5rem)}.site-header .brand img,.site-footer .brand img{filter:none}.footer-brand .brand img{width:185px}.site-footer .label{display:block;color:var(--text);font-size:.66rem;letter-spacing:.28em;margin-bottom:1rem}.site-footer .footer-links{display:grid;gap:.55rem;font-size:.78rem}.site-footer .notice{font-size:.68rem;color:var(--dim)}.site-footer .socials{display:flex;gap:1rem;margin-top:1.25rem;color:#fff}.site-footer .socials a{display:inline-flex;color:#fff;font-size:1rem;align-items:center;justify-content:center;min-width:60px;min-height:60px;border:1px solid rgba(238,233,223,.28);border-radius:50%;background:rgba(238,233,223,.06)}.site-footer .socials svg{width:42px;height:42px;display:block}.site-footer a:hover{color:var(--bright)}@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr}}@media(max-width:640px){.footer-inner{grid-template-columns:1fr}.site-footer{padding-top:4rem}.form-wrap{padding:1rem;margin-top:1rem}.form-wrap h2{margin-bottom:.5rem}.form-grid{gap:.5rem}.field{gap:.15rem}.form-wrap .field label{font-size:.62rem;line-height:1.2}.field input,.field select,.field textarea{padding:3px 2px;line-height:1.2}.form-wrap textarea{min-height:56px}.consent{margin:.5rem 0;font-size:.72rem;line-height:1.35}.form-wrap .btn[type=submit]{min-height:44px;padding:10px 14px}}.site-header{background:rgba(5,5,5,.96);padding:26px var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.site-header .brand{grid-column:1;grid-row:1;justify-self:start}.site-header>nav#primary-nav{display:contents}.site-header .nav-list{grid-column:2;grid-row:1}.site-header .nav-cta{grid-column:3;grid-row:1;justify-self:end}.site-header .nav-list{display:flex;align-items:center;justify-content:center;gap:40px}.site-header .nav-cta{margin-left:auto;padding:12px 24px;border:1px solid var(--accent);border-radius:1px;color:var(--deep);background:var(--accent);white-space:nowrap}.site-header .nav-cta:hover{background:var(--bright);border-color:var(--bright);color:var(--deep)}.site-header.scrolled{background:rgba(8,8,10,.72);backdrop-filter:blur(20px) saturate(130%)}@media(max-width:900px){.site-header{display:flex;padding:18px 20px}.site-header>nav#primary-nav{display:block;flex:0 0 auto;gap:0}.site-header .nav-list{position:absolute;top:72px;left:0;right:0;display:flex;visibility:hidden;opacity:0;transform:translateY(-8px);max-height:0;overflow:hidden;flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem 20px 5rem;background:rgba(5,5,5,.98);transition:opacity .35s var(--ease),transform .35s var(--ease),max-height .35s var(--ease),visibility .35s}.site-header .nav-list.open{visibility:visible;opacity:1;transform:none;max-height:420px}.site-header .brand img{width:185px}.site-header h1,.site-header h2,.site-header h3{padding-inline:0}.site-header .nav-list.open{display:flex}.site-header .nav-cta{display:none}.site-header .nav-list.open + .nav-cta{display:inline-flex;position:absolute;top:250px;left:20px;right:20px;justify-content:center}.site-header .nav-toggle{display:block}}.scroll-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:19;display:grid;justify-items:center;padding:12px max(var(--gutter),env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom));background:rgba(5,5,5,.96);border-top:1px solid var(--line);box-shadow:0 -12px 30px rgba(0,0,0,.32);overflow:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease)}.scroll-cta-bar[hidden]{display:none}.scroll-cta-bar__link{width:min(100%,560px);justify-content:center;white-space:nowrap}.scroll-cta-bar__link:hover{color:var(--deep)}body.scroll-cta-active{padding-bottom:var(--scroll-cta-reserve,0px)}@media(max-width:640px){.scroll-cta-bar{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}.scroll-cta-bar__link{width:100%;min-height:48px;padding:14px 18px}}@media(prefers-reduced-motion:reduce){.scroll-cta-bar{transition:none}} /* New home-page sections: appended only, existing design rules remain untouched. */ .hscroll{position:relative;padding:0!important;background:var(--bg)} .hscroll-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden} .htrack{display:flex;align-items:center;gap:26px;padding:0 var(--gutter);will-change:transform} .hcard{position:relative;display:flex;flex:0 0 clamp(300px,40vw,540px);height:clamp(420px,64vh,640px);align-items:flex-end;overflow:hidden;padding:34px;border:1px solid var(--line);border-radius:2px;background:var(--panel);isolation:isolate} .hcard>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} .hcard:after{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,5,5,.02) 25%,rgba(5,5,6,.9));content:""} .hcard:hover>img{transform:scale(1.04)} .hcard .m{position:relative;display:grid;width:100%;gap:.65rem} .hcard-name,.hcard-placeholder span{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2.25rem,4vw,3.8rem);font-weight:300;line-height:.95;letter-spacing:-.02em} .hcard-copy{max-width:36ch;color:var(--text);font-size:.88rem;line-height:1.5} .hcard-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:.7rem;padding-top:.8rem;border-top:1px solid rgba(238,233,223,.35)} .hcard-stats span{display:grid;gap:.12rem}.hcard-stats b{font-size:.95rem;font-weight:500;color:var(--bright)}.hcard-stats small{color:var(--text);font-size:.57rem;line-height:1.25;letter-spacing:.04em} .hcard-placeholder{position:absolute;inset:0;z-index:-2;display:flex;align-items:center;justify-content:center;background:var(--panel)} .hcard-placeholder:after{position:absolute;width:35%;height:1px;background:rgba(201,164,106,.35);content:""} .hcard-placeholder span{max-width:80%;text-align:center;color:var(--text)} .hscroll-progress{position:absolute;top:calc(50% + clamp(210px,32vh,320px) + 1.5rem);left:var(--gutter);right:var(--gutter);height:1px;background:var(--line);z-index:3} .hscroll-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:var(--accent)} .process-steps{margin-top:clamp(3rem,6vw,6rem)} .process-steps h3{margin:.6rem 0;font-size:clamp(1.55rem,2.3vw,2.4rem)} .process-steps p{max-width:36ch} .cinema-section{padding:0!important} .cinema-link{position:relative;display:grid;min-height:min(78vh,850px);overflow:hidden;place-items:center;isolation:isolate;text-align:center} .cinema-backdrop{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:brightness(.48);transition:transform 1.2s var(--ease),filter 1.2s var(--ease)} .cinema-link:after{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,5,5,.2),rgba(5,5,5,.58));content:""} .cinema-content{display:grid;justify-items:center;gap:1rem;padding:3rem var(--gutter)} .cinema-play{display:grid;width:88px;height:88px;place-items:center;border:1px solid var(--accent);border-radius:50%;color:var(--bright);font-size:1.25rem;padding-left:.2rem;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)} .cinema-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2.5rem,6vw,5.6rem);font-weight:300;line-height:1;color:var(--text)} .cinema-subtitle{max-width:54ch;color:var(--text);font-size:.95rem} .cinema-channel{color:var(--bright);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase} .cinema-link:hover .cinema-play{background:var(--accent);color:var(--deep);transform:scale(1.05)} .cinema-link:hover .cinema-backdrop{transform:scale(1.025);filter:brightness(.58)} .consultation-embed{display:block;margin:0 auto;width:100%;max-width:1000px;background:transparent} @media(max-width:760px){.hscroll{padding:0!important;height:auto!important}.hscroll-pin{position:static;height:auto;min-height:0;display:block;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity}.hscroll-pin::-webkit-scrollbar{display:none}.htrack{width:max-content;gap:1rem;padding:1.5rem var(--gutter);transform:none!important}.hcard{flex:0 0 76vw;height:56vh;min-height:320px;max-height:480px;scroll-snap-align:center}.hscroll-progress{display:none}.cinema-link{min-height:65vh}.process-steps{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.hcard,.hcard>img,.cinema-backdrop,.cinema-play{transition:none}.hcard:hover>img,.cinema-link:hover .cinema-backdrop,.cinema-link:hover .cinema-play{transform:none}.hscroll-pin{scroll-behavior:auto}} /* Location hub cards — additions only */ .location-link{display:block;height:100%} .location-nophoto{position:relative;display:grid;place-items:center;aspect-ratio:4/3;background:var(--panel)} .location-nophoto span{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.9rem,3vw,2.8rem);font-weight:300;color:var(--text);text-align:center;padding:0 1rem} .location-nophoto:after{content:"";position:absolute;width:28%;height:1px;background:rgba(201,164,106,.4)} .location .location-link{text-decoration:none} /* Recommendations — Meridian-style portfolio cards (additions only) */ .rec-grid{grid-template-columns:repeat(3,1fr);gap:26px} .rec-card{overflow:hidden} .rec-link{display:block;color:inherit;text-decoration:none} .rec-ph{position:relative;overflow:hidden} .rec-ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.3s var(--ease)} .rec-tag{position:absolute;top:14px;left:14px;z-index:2;background:rgba(5,5,5,.72);border:1px solid var(--line);color:var(--text);padding:6px 12px;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;backdrop-filter:blur(6px)} .rec-city{display:block;color:var(--accent);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.5rem} .rec-card h3{margin:0 0 .55rem;font-size:clamp(1.5rem,1.9vw,2rem);font-weight:300} .rec-meta{color:var(--muted);font-size:.8rem;letter-spacing:.02em} .rec-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line)} .rec-price{color:var(--bright);font-size:1.05rem;letter-spacing:.01em} .rec-view{color:var(--muted);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;transition:color .3s var(--ease)} .rec-link:hover .rec-view{color:var(--bright)} .rec-link:hover .rec-ph img{transform:scale(1.05)} @media(max-width:900px){.rec-grid{grid-template-columns:1fr 1fr}} @media(max-width:640px){.rec-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.rec-ph img,.rec-view{transition:none}.rec-link:hover .rec-ph img{transform:none}} /* Consultation embed — additions only */ .consultation-embed{display:block;width:100%;max-width:1000px;margin:0 auto;background:transparent;border:0} /* Knowledge hub article cards — additions only */ .article-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .article-cards article{border-top:1px solid var(--line);padding:1.6rem 0} .knowledge-link{display:block;text-decoration:none;color:inherit} .article-cards h3{margin:.2rem 0 .7rem;font-size:clamp(1.45rem,2.1vw,2rem);font-weight:300} .article-cards p{color:var(--muted);font-size:.98rem;line-height:1.65} .article-cards .link{display:inline-block;margin-top:.8rem;color:var(--muted);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;transition:color .3s var(--ease)} .knowledge-link:hover .link{color:var(--bright)} @media(max-width:640px){.article-cards{grid-template-columns:1fr}} /* Cinematic video block — additions only */ .cinema-video{position:relative} .cinema-overlay{position:absolute;inset:0;display:grid;place-items:center;text-decoration:none;color:inherit;z-index:2} .cinema-overlay .cinema-content{display:grid;justify-items:center;gap:1rem;padding:3rem var(--gutter);text-align:center} .cinema-video video.cinema-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.48);z-index:0} /* Good to Know article pages — additions only */ .article-wrap{max-width:820px} .article-body{max-width:74ch} .article-body h2{margin:clamp(2rem,4vw,3.2rem) 0 1rem;font-size:clamp(1.7rem,2.8vw,2.5rem);font-weight:300;line-height:1.08} .article-body h3{margin:1.8rem 0 .6rem;font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:300} .article-body p{color:var(--muted);font-size:1.05rem;line-height:1.75;margin:0 0 1.15rem} .article-body ul{margin:0 0 1.4rem;padding-left:1.1rem;color:var(--muted)} .article-body li{font-size:1.05rem;line-height:1.7;margin-bottom:.45rem} .article-body li::marker{color:var(--accent)} .article-table{width:100%;border-collapse:collapse;margin:0 0 1.6rem;font-size:.95rem} .article-table th,.article-table td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--line);color:var(--muted)} .article-table th{color:var(--text);font-weight:400;letter-spacing:.06em;text-transform:uppercase;font-size:.68rem} .article-caveat{max-width:62ch;margin:1.4rem 0 0;padding:1rem 1.2rem;border-left:2px solid var(--accent);background:rgba(20,20,18,.55);color:var(--muted);font-size:.9rem;line-height:1.6} .article-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(2.5rem,5vw,4rem);padding-top:2rem;border-top:1px solid var(--line)} @media(max-width:640px){.article-cta{flex-direction:column}.article-cta .btn{width:100%;justify-content:center}} /* Related-content block — additions only */ .related-section{padding:clamp(3rem,6vw,5rem) 0} .related-section h2{margin:.4rem 0 1.4rem;font-size:clamp(1.4rem,2vw,1.9rem);font-weight:300} .related-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.6rem;list-style:none;margin:0;padding:0} .related-list li{border-top:1px solid var(--line);padding:.8rem 0} .related-list a{color:var(--muted);font-size:.95rem;text-decoration:none;transition:color .3s var(--ease)} .related-list a:hover{color:var(--bright)} @media(max-width:640px){.related-list{grid-template-columns:1fr}} /* Footer — rebuilt minimal, matching the Canva layout (additions only) */ .site-footer{border-top:1px solid var(--line);background:#050505;padding:clamp(3.5rem,8vh,6.5rem) var(--gutter) 0} .footer-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr auto; gap:clamp(3rem,8vw,8rem);align-items:start} .footer-brand .brand img{width:170px;height:auto;display:block} .footer-brand .socials{display:flex;gap:1rem;margin-top:2.25rem} .footer-brand .socials a{display:inline-flex;align-items:center;justify-content:center; width:54px;height:54px;border:1px solid rgba(238,233,223,.24);border-radius:50%; background:rgba(238,233,223,.05);color:var(--text);transition:background .3s var(--ease),border-color .3s var(--ease)} .footer-brand .socials a:hover{background:var(--accent);border-color:var(--accent);color:var(--deep)} .footer-brand .socials svg{width:38px;height:38px;display:block} .footer-contact{text-align:right} .footer-contact .label{display:block;color:var(--text);font-size:.68rem;letter-spacing:.3em; text-transform:uppercase;margin-bottom:1.6rem} .footer-contact p{margin:0 0 1.15rem;display:grid;gap:.2rem;justify-items:end} .footer-contact .fc-role{color:var(--dim);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase} .footer-contact a{color:var(--muted);font-size:.9rem;text-decoration:none;white-space:nowrap; transition:color .3s var(--ease)} .footer-contact a:hover{color:var(--bright)} .footer-contact .fc-email{margin-top:.35rem;color:var(--bright)} .footer-bar{margin-top:clamp(2.5rem,5vh,3.5rem);border-top:0} .footer-bar-inner{max-width:var(--max);margin:0 auto;padding:1.5rem 0;display:flex; justify-content:space-between;gap:1.5rem;flex-wrap:wrap;color:var(--dim);font-size:.72rem} .footer-legal{display:flex;gap:1.4rem} .footer-legal a{color:var(--dim);text-decoration:none;transition:color .3s var(--ease)} .footer-legal a:hover{color:var(--bright)} @media(max-width:760px){ .footer-inner{grid-template-columns:1fr;gap:3rem;text-align:left} .footer-contact{text-align:left} .footer-contact p{justify-items:start} .footer-contact a{white-space:normal} .site-footer .footer-brand .socials a{width:48px;height:48px;min-width:48px;min-height:48px} .footer-brand .socials svg{width:32px;height:32px} .footer-bar-inner{flex-direction:column;gap:.8rem} } /* Footer: fewer rules (additions only) */ .footer-bar-inner--single{padding:.9rem 0 1.6rem;font-size:.7rem} @media(max-width:760px){.footer-bar-inner--single{padding:.6rem 0 1.4rem}} /* Consultation embed height (additions only) */ .consultation-embed{height:400px} /* Hero must clear the fixed header at every viewport height. The copy block is ~672px tall and bottom-anchored; on shorter screens its top collided with the 123px header. Reserve header height + breathing room, and let the copy shrink rather than overlap. */ .hero{ padding-top:calc(123px + 3rem); align-items:end; } .hero-copy{max-height:calc(100svh - 123px - 5rem);overflow:visible} /* below the height where it would collide, move the copy to the top of the available space and cap the display type so it always fits */ @media(min-width:900px) and (max-height:920px){ .hero{align-items:center;padding-top:calc(123px + 2rem);padding-bottom:4rem} .hero-copy{max-height:none} .hero h1{font-size:clamp(2.4rem,4.4vw,4.2rem)} .hero p{font-size:clamp(.95rem,1.15vw,1.05rem)} } /* very short viewports: tighten the type further so nothing clips */ @media(min-width:900px) and (max-height:760px){ .hero{align-items:center;padding-top:calc(123px + 1.5rem);padding-bottom:3rem} .hero h1{font-size:clamp(2rem,3.6vw,3.2rem)} .hero .eyebrow{margin-bottom:18px} .hero-copy p{margin-bottom:1.5rem} } /* Mobile: the consultation form should be edge-to-edge, built into the page. Remove the section gutter and the form wrapper's padding/margin so the iframe spans the full viewport width with nothing around it. */ @media(max-width:640px){ /* The form goes edge-to-edge ONLY on pages where it sits in its own .consultation-section (blog hub, location pages, and so on). Deliberately NOT scoped to .inner-hero: that also matches the Private Consultation hero, where the form belongs in a proper panel beside the text, not stripped bare on top of the hero photograph. */ .consultation-section .form-wrap{ padding:0!important;margin:0!important;max-width:100%!important;width:100%!important; background:transparent!important; } /* the section itself loses its gutter so the form can reach both edges */ .consultation-section{ padding-left:0!important;padding-right:0!important; } .consultation-section .section-inner{ padding-left:0!important;padding-right:0!important;max-width:100%!important; } /* keep the heading and intro text inset, only the form goes edge to edge */ .consultation-section .form-wrap .eyebrow, .consultation-section .form-wrap h2, .consultation-section .form-wrap .form-intro{ padding-left:1.25rem;padding-right:1.25rem; } .consultation-section .consultation-embed{ display:block;width:100%!important;max-width:100%!important; margin:0!important;padding:0!important;height:400px!important;border:0!important; } } /* Zero-height anchor so a #consultation-form link lands on the heading (BEGIN IN CONFIDENCE), not on the form's first field. */ .consult-anchor{display:block;height:0;margin:0;padding:0;scroll-margin-top:120px} /* ---- Private consultation hero: text left, form right (desktop) ---------- The form must be visible on first load, so it lives in the hero. On desktop it takes the right column and the heading's own CTA is removed (the form is already there). On narrow screens the two columns stack, text first, so the hero keeps its shape and the form follows immediately below. */ .consult-split{align-items:start;gap:clamp(2rem,5vw,4.5rem)} .consult-split .hero-text{min-width:0} .consult-split .hero-form{min-width:0} .consult-split .hero-form .form-wrap{margin:0;max-width:100%} @media(min-width:901px){ .consult-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .consult-split .hero-form{align-self:start} } @media(max-width:900px){ .consult-split{display:grid;grid-template-columns:minmax(0,1fr)} .consult-split .hero-text{margin-bottom:1rem} } /* Good to Know blog hub: page-scoped additions, preserving the site-wide system. */ .blog-layout{display:grid;grid-template-columns:minmax(210px,260px) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start} .blog-sidebar{position:sticky;top:118px;align-self:start} .blog-browse summary{display:none} .blog-browse__body{border-top:1px solid var(--line);padding-top:1.2rem} .blog-browse__body h3{font-size:1.75rem;margin:0 0 .85rem} .blog-browse__body h3:not(:first-child){margin-top:2rem} .blog-filters{display:grid;gap:.25rem} .blog-filter,.blog-tag{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;text-align:left;cursor:pointer} .blog-filter{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:44px;padding:.45rem .6rem;border-left:1px solid var(--line);font-size:.88rem;transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)} .blog-filter span{color:var(--dim);font-size:.72rem} .blog-filter:hover,.blog-filter.is-active{color:var(--text);border-left-color:var(--accent);background:rgba(238,233,223,.035)} .blog-filter.is-active span{color:var(--bright)} .blog-tags{display:flex;flex-wrap:wrap;gap:.45rem} .blog-tag{min-height:38px;padding:.42rem .65rem;border:1px solid var(--line);font-size:.72rem;letter-spacing:.025em;transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)} .blog-tag:hover,.blog-tag.is-active{color:var(--deep);border-color:var(--accent);background:var(--accent)} .blog-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 1.25rem;align-items:end;margin:0 0 1.5rem} .blog-search-label{grid-column:1/-1;color:var(--muted);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase} .blog-search{min-width:0;min-height:48px;padding:.65rem .75rem;border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit} .blog-search:focus{border-color:var(--accent);outline:2px solid transparent} .blog-result-count{margin:0;color:var(--dim);font-size:.78rem;white-space:nowrap} .article-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem} .article-card{min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.07);background:var(--panel);padding:0!important;transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)} .article-card:hover{transform:translateY(-4px);border-color:rgba(201,164,106,.5);box-shadow:0 18px 50px rgba(0,0,0,.24)} .article-card[hidden]{display:none} .article-card .knowledge-link{height:100%;display:flex;flex-direction:column} .article-card img{display:block;width:100%;height:auto;aspect-ratio:1.72;object-fit:cover;transition:transform 1s var(--ease)} .article-card .knowledge-link:hover img{transform:scale(1.035)} .article-card__body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:1.25rem 1.35rem 1.4rem} .article-card__category{margin-bottom:.75rem;color:var(--bright);font-size:.61rem;letter-spacing:.17em;text-transform:uppercase} .article-card h3{margin:0 0 .65rem;font-size:clamp(1.45rem,2vw,2rem);line-height:1.02} .article-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55} .article-card .link{margin-top:auto;padding-top:1.15rem;color:var(--muted);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase} .article-card .knowledge-link:hover .link{color:var(--bright)} .blog-empty{padding:2rem;border-top:1px solid var(--line);color:var(--muted)} @media(max-width:900px){.blog-layout{grid-template-columns:minmax(0,1fr);gap:2rem}.blog-sidebar{position:static}.blog-browse summary{display:block;min-height:48px;padding:.7rem 0;color:var(--bright);border-top:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}.blog-browse[open] summary{margin-bottom:1rem}.blog-browse__body{border-top:0;padding-top:0}} @media(max-width:640px){.article-cards{grid-template-columns:minmax(0,1fr);gap:1rem}.blog-toolbar{grid-template-columns:minmax(0,1fr);align-items:start}.blog-result-count{white-space:normal}.article-card__body{padding:1.1rem 1.15rem 1.25rem}} @media(prefers-reduced-motion:reduce){.article-card,.article-card img,.blog-filter,.blog-tag{transition:none}.article-card:hover,.article-card .knowledge-link:hover img{transform:none;box-shadow:none}} /* ============================================================================ MOBILE SPACING SYSTEM (<=900px). Greg's feedback on the real iPhone: the slider had a large black void ABOVE its images but only a sliver below, and section gaps generally were inconsistent. Measured before (393x852): every `.section` carried 102px top AND bottom, so adjacent sections showed 204px of empty space between content; the slider had 279px above its cards and just 24px below. ============================================================================ */ @media(max-width:900px){ /* one consistent rhythm between sections */ .section{padding-top:64px;padding-bottom:64px} /* The location-intro section exists ONLY to introduce the slider, so it should not carry a full section's padding-bottom underneath the heading. That was the 165px void above the cards. */ section[aria-labelledby="locations-heading"]{padding-bottom:0} /* A heading that introduces the next block should hug it, not float away. This is what removed the large void above the slider. */ .section-head{margin-bottom:1.75rem} /* --- the Costa del Sol slider ------------------------------------------ The intro heading and the slider read as ONE unit: tight above, roomy below, so it breathes instead of colliding with the video that follows. */ .hscroll{padding:0 0 56px 0} .htrack{padding:0 !important} /* no padding on the track: it must be exactly 2x a group for -50% to wrap seamlessly. The gutter is applied to the first and last card instead. */ } @media(max-width:640px){ .section{padding-top:52px;padding-bottom:52px} .section-head{margin-bottom:1.5rem} .hscroll{padding:0 0 48px 0 !important} } /* ============================================================================ Homepage Costa del Sol slider — one mechanic at every width: a pinned scroll-driven horizontal strip (the Meridian pattern Greg confirmed works). ---------------------------------------------------------------------------- Desktop drives it from window.scrollY; a wheel over the strip is translated into movement within the pinned range (see site.js), so the tiles travel at the reader's scrolling speed and the page resumes once the strip ends. PHONES: the same pin now applies, per Greg's request, so a vertical swipe over the strip moves the tiles sideways instead of the page. The old mobile-only "auto-loop marquee" is removed, and with it the duplicated card set: - the duplicate caused every tile to render twice, - it doubled track.scrollWidth, which broke the travel distance, - and its off-screen images were what painted the black tile at the wrap. So this one change closes all three faults. `hscroll-pin` keeps `overflow:hidden` so the section never scrolls natively and there is no black space, and `touch-action:pan-y` leaves vertical page scrolling normal outside the strip. ============================================================================ */ /* The `.hgroup` wrapper around the slider cards must be TRANSPARENT to layout at every width. Left as a plain block it constrains the track to a single card's width: track.scrollWidth then equals the viewport, maxX computes to 0, and the strip has nowhere to travel — the tiles simply never move. `display:contents` removes the wrapper from the box tree so the cards are direct children of the track again and the horizontal strip measures correctly. */ .htrack .hgroup{display:contents} /* meet-vesta team */ .team-feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:center;background:var(--panel);border:1px solid rgba(255,255,255,.045);border-radius:2px;overflow:hidden;transition:transform 1.1s var(--ease),box-shadow 1.1s var(--ease)} .team-feature:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.22)} .team-feature .team-photo{position:relative;overflow:hidden;height:100%} .team-feature .team-photo img{display:block;width:100%;height:100%;min-height:clamp(320px,46vh,560px);aspect-ratio:4/3;object-fit:contain;background:var(--deep);transition:transform 1.3s var(--ease)} .team-feature:hover .team-photo img{transform:scale(1.02)} .team-feature-body{padding:clamp(1.75rem,3vw,2.75rem) clamp(1.75rem,3vw,2.75rem) clamp(1.75rem,3vw,2.75rem) 0} .team-feature-body h3{margin:.55rem 0 .9rem;font-size:clamp(1.9rem,3.2vw,2.9rem);font-weight:300} .team-feature-body p{color:var(--muted);font-size:1.02rem;max-width:52ch} .team-role{color:var(--bright);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase} .team-contact{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line)} .team-contact a{color:var(--muted);font-size:.88rem;text-decoration:none;transition:color .3s var(--ease)} .team-contact a:hover{color:var(--bright)} .team-more{margin-top:clamp(3rem,6vw,5.5rem);margin-bottom:2rem} .team-more h3{margin:.55rem 0 0;font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:300} .team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;align-items:stretch} .team-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid rgba(255,255,255,.045);border-radius:2px;overflow:hidden;transition:transform 1.1s var(--ease),box-shadow 1.1s var(--ease)} .team-card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.22)} .team-card .team-photo{position:relative;overflow:hidden} .team-card .team-photo img{display:block;width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;object-position:50% 50%;transition:transform 1.3s var(--ease)} .team-card:hover .team-photo img{transform:scale(1.05)} .team-body{display:flex;flex:1;flex-direction:column;padding:1.15rem 1.15rem 1.35rem} .team-body h3{margin:.45rem 0 .6rem;font-size:clamp(1.25rem,1.5vw,1.6rem);font-weight:300;line-height:1.1} .team-body p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.55} .team-body .team-contact{margin-top:auto;padding-top:1rem} .team-body .team-contact a{font-size:.8rem} .coast-list{list-style:none;margin:0;padding:0;display:grid;gap:0} .coast-list li{display:grid;gap:.25rem;padding:.95rem 0;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem} .coast-list li:last-child{border-bottom:1px solid var(--line)} .coast-list span{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.3rem,1.9vw,1.75rem);font-weight:300;color:var(--text);line-height:1.1} @media(max-width:1180px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:900px){.team-feature{grid-template-columns:minmax(0,1fr)}.team-feature-body{padding:0 1.5rem 1.75rem}.team-feature .team-photo img{min-height:0;aspect-ratio:16/10}.team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}} @media(max-width:640px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.team-body{padding:1rem 1rem 1.2rem}.team-body h3{font-size:1.3rem}.team-feature-body{padding:0 1.25rem 1.5rem}} @media(max-width:430px){.team-grid{grid-template-columns:minmax(0,1fr);gap:20px}} @media(prefers-reduced-motion:reduce){.team-feature,.team-card,.team-feature .team-photo img,.team-card .team-photo img{transition:none}.team-feature:hover,.team-card:hover,.team-feature:hover .team-photo img,.team-card:hover .team-photo img{transform:none;box-shadow:none}} /* /meet-vesta team */ /* mobile-nav */ @media(max-width:900px){ /* The nav itself becomes the panel, anchored to the underside of the header. top:100% resolves against .site-header (position:fixed), so the panel always starts exactly where the header ends whatever the logo height is. */ .site-header>nav#primary-nav{position:absolute;top:100%;left:0;right:0;display:block; background:rgba(5,5,5,.985); -webkit-backdrop-filter:blur(22px) saturate(130%);backdrop-filter:blur(22px) saturate(130%); border-top:1px solid var(--line);box-shadow:0 26px 60px rgba(0,0,0,.6); padding:0 20px 24px; opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-12px);clip-path:inset(0 0 100% 0); transition:opacity .38s var(--ease),transform .5s var(--ease), clip-path .55s var(--ease),visibility .38s} .site-header>nav#primary-nav.open{opacity:1;visibility:visible;pointer-events:auto; transform:none;clip-path:inset(0 0 0 0)} /* Items stacked, each on its own full-width row with generous padding. */ .site-header>nav#primary-nav .nav-list{position:static;inset:auto;display:flex; flex-direction:column;align-items:stretch;gap:0;max-height:none; padding:4px 0 6px;visibility:visible;opacity:1;transform:none;overflow:visible; background:none;font-size:.8rem;letter-spacing:.2em} .site-header>nav#primary-nav .nav-list li{border-top:1px solid rgba(238,233,223,.12); opacity:0;transform:translateY(-10px); transition:opacity .4s var(--ease),transform .4s var(--ease)} .site-header>nav#primary-nav .nav-list li:first-child{border-top:0} .site-header>nav#primary-nav .nav-list li:last-child{border-bottom:1px solid rgba(238,233,223,.12)} .site-header>nav#primary-nav .nav-list a{display:block;padding:24px 4px} /* Staggered entrance: each row settles just after the one above it. */ .site-header>nav#primary-nav.open .nav-list li{opacity:1;transform:none} .site-header>nav#primary-nav.open .nav-list li:nth-child(1){transition-delay:.05s} .site-header>nav#primary-nav.open .nav-list li:nth-child(2){transition-delay:.10s} .site-header>nav#primary-nav.open .nav-list li:nth-child(3){transition-delay:.15s} .site-header>nav#primary-nav.open .nav-list li:nth-child(4){transition-delay:.20s} /* The consultation button rides inside the panel instead of being pinned. */ .site-header>nav#primary-nav .nav-cta{display:none;position:static;inset:auto; width:auto;margin:18px 0 0;justify-content:center;opacity:0;transform:translateY(-10px); transition:opacity .4s var(--ease),transform .4s var(--ease)} .site-header>nav#primary-nav.open .nav-cta{display:inline-flex;opacity:1;transform:none; transition-delay:.24s} /* The control itself, with a pressed state so it feels like something happened. */ .site-header .nav-toggle{border-color:var(--line);padding:.5rem .85rem; font-size:.66rem;letter-spacing:.16em;text-transform:uppercase; transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)} .site-header .nav-toggle[aria-expanded="true"]{border-color:var(--accent); color:var(--bright);background:rgba(201,164,106,.1)} } @media(max-width:430px){ .site-header>nav#primary-nav .nav-list a{padding:18px 4px} } @media(prefers-reduced-motion:reduce){ .site-header>nav#primary-nav,.site-header>nav#primary-nav .nav-list li, .site-header>nav#primary-nav .nav-cta,.site-header .nav-toggle{transition:none} } /* /mobile-nav */ /* gtk-pills */ /* Category pills at the top of the Good to Know page. Two colours: the chosen category is solid gold, the available ones are a quiet outlined slate. Wraps rather than scrolls, so nothing is ever hidden off the edge of a phone. */ .blog-pills{ display:flex;flex-wrap:wrap;gap:.6rem;align-items:center; margin:0 0 clamp(1.75rem,4vw,2.75rem); } .blog-pills .pill{ appearance:none;cursor:pointer;font:inherit; display:inline-flex;align-items:center;gap:.55rem; min-height:44px;padding:.6rem 1.15rem; border-radius:999px; font-size:.8rem;letter-spacing:.06em;line-height:1; white-space:nowrap; border:1px solid rgba(238,233,223,.28); background:transparent;color:var(--text); transition:color .25s var(--ease),border-color .25s var(--ease), background .25s var(--ease),transform .2s var(--ease); } .blog-pills .pill:hover{ border-color:var(--bright);color:var(--bright);transform:translateY(-1px); } .blog-pills .pill span{ display:inline-flex;align-items:center;justify-content:center; min-width:1.6em;height:1.6em;padding:0 .35em;border-radius:999px; background:rgba(238,233,223,.12);color:var(--muted); font-size:.72rem;transition:background .25s var(--ease),color .25s var(--ease); } /* the chosen pill */ .blog-pills .pill.is-active, .blog-pills .pill[aria-pressed="true"]{ background:var(--accent);border-color:var(--accent);color:var(--deep);font-weight:500; } .blog-pills .pill.is-active span, .blog-pills .pill[aria-pressed="true"] span{ background:rgba(5,5,5,.22);color:var(--deep); } @media(max-width:640px){ .blog-pills{gap:.5rem;margin-bottom:1.5rem} .blog-pills .pill{min-height:44px;padding:.55rem .95rem;font-size:.75rem} } @media(prefers-reduced-motion:reduce){ .blog-pills .pill,.blog-pills .pill span{transition:none} .blog-pills .pill:hover{transform:none} } /* /gtk-pills */ /* build-v3 shared blocks: additions only, preserving the copied design system. */ .price-block{display:grid;gap:.75rem;padding:1.25rem 1.5rem;border:1px solid var(--accent);background:rgba(201,164,106,.07);max-width:42rem} .price-block strong{color:var(--bright);font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.7rem,3vw,2.5rem);font-weight:300} .price-block p{margin:0;color:var(--muted)} .client-data-note{margin:1rem 0;padding:1rem 1.2rem;border-left:2px solid var(--accent);background:rgba(20,20,18,.55);color:var(--bright);font-size:.85rem} .video-block{position:relative;width:100%;max-width:1000px;aspect-ratio:16/9;background:var(--deep);border:1px solid var(--line)} .video-block iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .faq-list{display:grid;gap:.75rem;max-width:850px} .faq-list details{border-top:1px solid var(--line);padding:1rem 0} .faq-list summary{cursor:pointer;color:var(--text);font-family:'Cormorant Garamond',Georgia,serif;font-size:1.45rem} .faq-list details p{margin:.8rem 0 0;color:var(--muted)} .ordered-steps{counter-reset:step;list-style:none;margin:0;padding:0;max-width:74ch} .ordered-steps li{counter-increment:step;position:relative;padding:1rem 0 1rem 3.6rem;border-top:1px solid var(--line);color:var(--muted);line-height:1.7} .ordered-steps li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:1rem;color:var(--accent);font-size:.8rem;letter-spacing:.12em} /* Client-managed project brochure flip-book placeholders. Aspect ratio follows portrait A4. */ .flipbook-placeholder{display:block;width:100%;aspect-ratio:1/1.414;min-height:300px;border:1px solid var(--line);background:var(--panel);color:var(--text);box-shadow:0 12px 36px rgba(0,0,0,.18)} .flipbook-card{padding:1rem 1.25rem 1.25rem} .flipbook-card .flipbook-placeholder{min-height:260px} @media(max-width:640px){.flipbook-placeholder{min-height:0}.flipbook-card .flipbook-placeholder{min-height:0}} /* Client location profile blocks: source data stays visually adjacent to its note. */ .location-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1.5rem;margin:1.25rem 0} .location-metrics div{border-top:1px solid var(--line);padding:.65rem 0} .location-metrics dt{color:var(--muted);font-size:.75rem} .location-metrics dd{margin:.15rem 0 0;color:var(--bright);font-size:1.05rem} .location-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem} .location-profile-grid article{border-top:1px solid var(--line);padding:1.2rem 0} .location-profile-grid h3{font-size:clamp(1.5rem,2.2vw,2.1rem)} @media(max-width:640px){.location-profile-grid,.location-metrics{grid-template-columns:1fr}} /* Compact sitewide SEO navigation: extends the inherited v2 footer. */ .footer-seo{max-width:var(--max);margin:clamp(2.25rem,5vh,4rem) auto 0;padding:2rem 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1rem,2vw,2rem)} .footer-seo__group h3{margin:0 0 .9rem;color:var(--text);font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;font-weight:300;line-height:1.05;letter-spacing:0} .footer-seo__list{display:grid;gap:.55rem;list-style:none;margin:0;padding:0} .footer-seo__list a{color:var(--muted);font-size:.72rem;line-height:1.45;white-space:normal;transition:color .25s var(--ease)} .footer-seo__list a:hover{color:var(--bright)} @media(max-width:1150px){.footer-seo{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:640px){.footer-seo{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem}.footer-seo__group h3{font-size:1.15rem}.footer-seo__list a{font-size:.72rem}} /* Small source-neutral calculator within the approved article layout. */ .rental-tool{padding:clamp(1.25rem,3vw,2.25rem);margin:0 0 2rem;background:var(--panel);border:1px solid var(--line)} .rental-tool h2{margin-top:0}.rental-tool__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.5rem 0} .rental-tool label{display:grid;gap:.4rem;color:var(--text);font-size:.8rem} .rental-tool input{min-width:0}.rental-tool__result{padding-top:1rem;color:var(--bright)!important} @media(max-width:640px){.rental-tool__grid{grid-template-columns:1fr}} .location-source{margin:1.5rem 0;padding:1.2rem;background:var(--panel);border:1px solid var(--line)} .location-source h3{font-size:clamp(1.5rem,2.2vw,2.1rem)} .location-source-grid{margin-top:clamp(3rem,6vw,5rem)} .location-source{margin:1.5rem 0;padding:1.2rem;background:var(--panel);border:1px solid var(--line)} .location-source h3{font-size:clamp(1.5rem,2.2vw,2.1rem)} .location-source-grid{margin-top:clamp(3rem,6vw,5rem)} /* poznaj-vesta hero — scoped to this page only. */ .hero-poznaj .section-inner.split>div:first-child{max-width:min(1150px,88vw)} .hero-poznaj h1{max-width:none} .hero-poznaj h1 .hero-lead,.hero-poznaj h1 .hero-emphasis{display:inline} .hero-poznaj .section-inner p{max-width:78ch} /* Hero CTA row. Two filled-gold buttons side by side read as ONE bar, however wide the gap. So the secondary becomes a ghost button: outline + gold text on transparent. The !important flags are required: the base sheet sets .inner-hero .btn + .btn{margin-left:0!important} which killed the spacing. */ .hero-poznaj .cta-group{display:flex;flex-wrap:wrap;align-items:center;column-gap:22px;row-gap:14px;margin-top:clamp(1.75rem,3vw,2.5rem)} .hero-poznaj .cta-group .btn{margin:0!important;width:auto;flex:0 0 auto} .hero-poznaj .cta-group .btn + .btn{margin-left:0!important} .hero-poznaj .cta-group .btn-ghost{background:transparent!important;border:1px solid var(--accent)!important;color:var(--bright)!important} .hero-poznaj .cta-group .btn-ghost:hover{background:rgba(201,164,106,.12)!important;border-color:var(--bright)!important;color:var(--bright)!important} @media(max-width:700px){.hero-poznaj .cta-group{flex-direction:column;align-items:stretch;row-gap:14px}.hero-poznaj .cta-group .btn{width:100%;justify-content:center}} /* video wall (Warto wiedzieć) */ .video-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem)} .video-tile{display:flex;flex-direction:column;gap:.9rem;min-width:0} .video-tile__facade{position:relative;display:block;width:100%;padding:0;margin:0;border:1px solid var(--line);background:var(--panel);cursor:pointer;overflow:hidden;border-radius:2px;aspect-ratio:16/9} .video-tile__thumb{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .3s var(--ease)} .video-tile__facade:hover .video-tile__thumb{transform:scale(1.04);opacity:.86} .video-tile__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(201,164,106,.92);box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform .3s var(--ease),background .3s var(--ease)} .video-tile__play:after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #050505} .video-tile__facade:hover .video-tile__play{transform:translate(-50%,-50%) scale(1.08);background:var(--bright)} .video-tile__frame{position:absolute;inset:0;width:100%;height:100%;border:0} .video-tile__title{margin:0;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:.95rem;font-weight:400;line-height:1.5} @media(max-width:1000px){.video-wall{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.video-wall{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.video-tile__thumb,.video-tile__play{transition:none}} /* Warto wiedziec hub: read-or-watch (page-scoped) */ /* The read/watch switch. Two big targets, visible from the first screen on mobile so the videos are never buried below the article list. STICKY: it floats just under the fixed header, so a visitor reading the guides can swap to the videos at any scroll position without going back up. --site-header-h is set on :root above and follows the header as it shrinks. */ .hub-switch{ position:sticky; top:calc(var(--site-header-h,104px)); z-index:15; display:grid;grid-template-columns:1fr 1fr;gap:.6rem; margin:0 0 clamp(1.5rem,3vw,2.25rem); padding:.7rem 0 .8rem; background:rgba(11,11,10,.94); -webkit-backdrop-filter:blur(16px) saturate(130%); backdrop-filter:blur(16px) saturate(130%); border-bottom:1px solid var(--line); } .hub-switch button{ min-height:52px;border:1px solid var(--accent);background:transparent; color:var(--bright);font:inherit;font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;border-radius:2px;cursor:pointer; transition:background .25s var(--ease),color .25s var(--ease); } .hub-switch button:hover{background:rgba(201,164,106,.12)} .hub-switch button.is-on, .hub-switch button[aria-selected="true"]{ background:var(--accent);border-color:var(--accent);color:var(--deep);font-weight:500; } .hub-pane__intro{color:var(--muted);max-width:74ch;margin:0 0 1.5rem;font-size:1.02rem;line-height:1.7} .hub-pane[hidden]{display:none} .video-wall--single{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px} @media(max-width:900px){ .hub-switch{top:var(--site-header-h-sm,96px)} } @media(max-width:640px){ .hub-switch button{font-size:.64rem;letter-spacing:.1em} .video-wall--single{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){.hub-switch button{transition:none}} /* Header height, measured (13 Oct 2026) so sticky elements can sit flush beneath the fixed site header. Desktop header is 123px at rest and ~80px once .scrolled (see .site-header/.site-header.scrolled padding rules); mobile is 56px. --site-header-h is the resting height a sticky element needs, so it never overlaps the header while scrolled. */ :root{--site-header-h:104px;--site-header-h-sm:96px} @media(min-width:901px){:root{--site-header-h:104px}} /* Warto wiedziec hub — hero, mobile only. The inner-hero carries `min-height:72vh`, which on a phone leaves ~167px of dead space under the (short) heading before the switch. This page's hero has no CTA buttons, so it does not need that height: let it size to its content, with a modest minimum so it still reads as a hero band. Scoped to .hero-hub so no other page's hero changes. */ @media(max-width:640px){ .hero-hub{min-height:0;padding-bottom:clamp(1.5rem,5vw,2.5rem)} .hero-hub .section-inner{padding-top:var(--hero-pad-top,5rem)} } /* Language switcher in the header. Approved by Greg 2026-10-13, revised same day. A small text label: EN on Polish pages, PL on English ones. It sits in the header bar (NOT inside