/* ================================================================ RESIDENZA STAMPACE · styles.css v3.0 ================================================================ */ /* ── TOKENS ───────────────────────────────────────────────────── */ :root { --ink: #0B3D5C; --ink-dk: #072B42; --gold: #C8A96A; --gold-dk: #A88A50; --white: #FFFFFF; --sand: #F5F2EC; --border: #E2DAD0; --text: #1C1C1C; --muted: #6A6760; --serif: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif; --sans: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif; --hero: clamp(3rem, 9vw, 6.5rem); --h2: clamp(2.25rem, 5.5vw, 4.25rem); --h3: clamp(1.4rem, 3vw, 2rem); --body: 1rem; --sm: 0.8125rem; --xs: 0.6875rem; --gap: clamp(1.25rem, 5vw, 3rem); --sec: clamp(4rem, 8vw, 8rem); --r: 4px; --ease: cubic-bezier(.25,.46,.45,.94); } /* ── RESET ────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%} body{font-family:var(--sans);font-weight:300;color:var(--text);background:var(--white);line-height:1.7;overflow-x:hidden} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{cursor:pointer;border:none;background:none;font-family:inherit} address{font-style:normal} fieldset{border:none} :focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* ── LANGUAGE TOGGLE ──────────────────────────────────────────── */ /* Default: show Italian, hide English */ .en { display: none !important; } .it { display: inline !important; } /* When has class .lang-en: reverse */ html.lang-en .en { display: inline !important; } html.lang-en .it { display: none !important; } /* Block-level elements use block display */ p.it, p.en, li.it, li.en, div.it, div.en { display: block !important; } html.lang-en p.en, html.lang-en li.en, html.lang-en div.en { display: block !important; } html.lang-en p.it, html.lang-en li.it, html.lang-en div.it { display: none !important; } /* ── SKIP LINK ────────────────────────────────────────────────── */ .skip-link{position:absolute;top:-120px;left:1rem;background:var(--ink);color:var(--white);padding:.5em 1em;border-radius:var(--r);z-index:9999;transition:top .2s} .skip-link:focus{top:1rem} /* ── UTILITIES ────────────────────────────────────────────────── */ .container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gap)} .link{color:var(--gold-dk);text-decoration:underline;text-underline-offset:3px} /* ── BUTTONS ──────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--sans);font-size:var(--xs);font-weight:500;letter-spacing:.1em; text-transform:uppercase;border-radius:var(--r);border:2px solid transparent; transition:all .35s var(--ease);white-space:nowrap;cursor:pointer} .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .btn--gold {background:var(--gold);color:var(--ink-dk);border-color:var(--gold)} .btn--gold:hover{background:var(--gold-dk);border-color:var(--gold-dk);transform:translateY(-1px)} .btn--ink {background:var(--ink);color:var(--white);border-color:var(--ink)} .btn--ink:hover{background:var(--ink-dk);transform:translateY(-1px)} .btn--ghost {background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)} .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:var(--white)} .btn--outline-inv{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)} .btn--outline-inv:hover{background:rgba(255,255,255,.1);border-color:var(--white)} .btn--lg {padding:.9em 2.2em;font-size:var(--sm)} .btn--sm {padding:.65em 1.5em} .btn--xs {padding:.45em 1.1em;font-size:.625rem} .btn--full{width:100%} /* Submit spinner */ .btn-spin{display:none;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;position:absolute} .btn--submit.loading .btn-lbl{opacity:0} .btn--submit.loading .btn-spin{display:inline-block} .btn--submit.loading{pointer-events:none} @keyframes spin{to{transform:rotate(360deg)}} /* ── REVEAL ───────────────────────────────────────────────────── */ .u-reveal{opacity:0;transform:translateY(26px); transition:opacity .7s var(--ease),transform .7s var(--ease); animation:revFallback .7s var(--ease) 1.8s both} .u-reveal--d1{transition-delay:.1s;animation-delay:1.9s} .u-reveal--d2{transition-delay:.2s;animation-delay:2s} .u-reveal--d3{transition-delay:.3s;animation-delay:2.1s} .u-reveal--d4{transition-delay:.4s;animation-delay:2.2s} .u-reveal.in{opacity:1;transform:none;animation:none} @keyframes revFallback{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.u-reveal{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}} /* ── SECTION COMMONS ──────────────────────────────────────────── */ .section{padding-block:var(--sec)} .section--dark{background:var(--ink-dk)} .section--sand{background:var(--sand)} /* Offscreen rendering boost */ #perche,#progetto,#contatto,#lifestyle{content-visibility:auto;contain-intrinsic-size:auto 800px} .sec-hd{text-align:center;margin-bottom:clamp(3rem,6vw,5.5rem)} .sec-hd--inv .sec-eyebrow,.sec-hd--inv .sec-title{color:var(--white)} .sec-eyebrow{display:block;font-size:var(--xs);font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:#8B7340;margin-bottom:.85rem} .sec-eyebrow--gold{color:var(--gold)} .sec-title{font-family:var(--serif);font-size:var(--h2);font-weight:300; line-height:1.1;letter-spacing:-.02em;color:var(--ink)} .sec-title em{font-style:italic;color:#8B7340} .sec-title--inv,.sec-title--inv em{color:var(--white)} .sec-title--inv em{color:var(--gold)} .sec-title--sans{font-family:var(--serif);font-size:clamp(2rem,5vw,3.75rem);font-weight:300; font-style:italic;letter-spacing:-.02em;line-height:1.12} .sec-title--sans em{font-style:italic;font-weight:300;color:var(--gold)} /* ── HEADER ───────────────────────────────────────────────────── */ .header{position:fixed;inset-block-start:0;inset-inline:0;z-index:100; background:rgba(7,43,66,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:background .35s var(--ease),box-shadow .35s var(--ease)} .header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 1px 24px rgba(0,0,0,.08)} .header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.85rem} .header__logo{display:flex;flex-direction:column;gap:.1rem;line-height:1;flex-shrink:0} .header__name{font-family:var(--serif);font-size:1.1rem;font-weight:400;color:var(--white);transition:color .3s;letter-spacing:.01em} .header__city{font-size:var(--xs);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} .header.scrolled .header__name{color:var(--ink)} .header__nav{display:flex;gap:clamp(.75rem,2vw,2rem)} .nav-link{font-size:var(--xs);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8); transition:color .2s;position:relative} .nav-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px; background:var(--gold);transition:width .3s var(--ease)} .nav-link:hover{color:var(--white)} .nav-link:hover::after{width:100%} .header.scrolled .nav-link{color:var(--muted)} .header.scrolled .nav-link:hover{color:var(--ink)} .header__right{display:flex;align-items:center;gap:1rem} /* Lang switch */ .lang-sw{display:flex;align-items:center;gap:.4rem;font-size:var(--xs);color:rgba(255,255,255,.6)} .header.scrolled .lang-sw{color:var(--muted)} .lang-btn{font-size:var(--xs);font-weight:500;letter-spacing:.1em;color:rgba(255,255,255,.55); padding:.2em .3em;transition:color .2s;background:none;border:none;cursor:pointer} .lang-btn.active{color:var(--gold);font-weight:600} .header.scrolled .lang-btn{color:var(--muted)} .header.scrolled .lang-btn.active{color:var(--gold-dk)} .header__cta{padding:.5em 1.2em} /* Burger */ .burger{display:none;flex-direction:column;gap:5px;padding:4px;z-index:201} .burger span{display:block;width:21px;height:1.5px;background:var(--white);transition:all .3s var(--ease)} .header.scrolled .burger span{background:var(--ink)} .burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* ── HERO ─────────────────────────────────────────────────────── */ /* Font fallback to reduce CLS from web font swap */ @font-face{font-family:'Cormorant Garamond Fallback';src:local('Georgia');size-adjust:105%;ascent-override:90%;descent-override:22%;line-gap-override:0%} @font-face{font-family:'DM Sans Fallback';src:local('system-ui');size-adjust:105%;ascent-override:90%;descent-override:22%;line-gap-override:0%} .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden} .hero__bg{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:1fr 1fr;height:100%} .hero__half{overflow:hidden;height:100%;min-height:100svh} .hero__half img{width:100%;height:100%;object-fit:cover;object-position:center;aspect-ratio:3/2} .hero__half--sea img{object-position:center 60%} .hero__veil{position:absolute;inset:0;background:linear-gradient(125deg,rgba(7,43,66,.85) 0%,rgba(7,43,66,.55) 60%,rgba(7,43,66,.35) 100%)} .hero__body{position:relative;z-index:2;padding-top:9rem;padding-bottom:7rem;max-width:760px} .hero__eyebrow{font-size:var(--xs);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem} .hero__h1{font-family:var(--serif);font-size:var(--hero);font-weight:300;line-height:1.04; color:var(--white);margin-bottom:1.75rem;letter-spacing:-.02em} .hero__h1 em{font-style:italic;color:var(--gold)} .hero__sub{font-size:clamp(.95rem,1.8vw,1.1rem);font-weight:300;color:rgba(255,255,255,.78); line-height:1.72;margin-bottom:2.5rem;max-width:560px} .hero__ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem} .hero__pills{display:flex;flex-wrap:wrap;gap:.6rem} .hero__pills li{font-size:var(--xs);letter-spacing:.06em;color:rgba(255,255,255,.85); padding:.3em .9em;border:1px solid rgba(200,169,106,.35);border-radius:99px; background:rgba(200,169,106,.08)} .hero__scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);z-index:2; opacity:0;animation:revFallback .6s var(--ease) 1.2s forwards} .hero__scroll div{width:1px;height:52px;background:linear-gradient(to bottom,transparent,var(--gold)); animation:scrollAnim 2.2s ease-in-out infinite;margin-inline:auto} @keyframes scrollAnim{0%{transform:scaleY(0);transform-origin:top;opacity:1}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}} /* ── REASON CARDS ─────────────────────────────────────────────── */ .reasons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,3vw,2rem)} .reason-card{border-radius:10px;overflow:hidden;background:var(--white); border:1px solid var(--border);transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .reason-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.1)} .reason-card__img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sand)} .reason-card__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;transition:transform .6s var(--ease)} .reason-card:hover .reason-card__img img{transform:scale(1.05)} .reason-card__n{position:absolute;top:.75rem;left:.75rem;font-family:var(--sans);font-size:var(--xs); font-weight:500;letter-spacing:.1em;color:var(--white);background:rgba(11,61,92,.7); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); padding:.3em .7em;border-radius:99px} .reason-card__body{padding:1.25rem 1.5rem 1.5rem} .reason-card__title{font-family:var(--serif);font-size:var(--h3);font-weight:400;color:var(--ink); margin-bottom:.75rem;line-height:1.15;letter-spacing:-.01em} .reason-card__text{font-size:var(--sm);color:var(--muted);line-height:1.75} .cta-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem; margin-top:clamp(3rem,6vw,5rem);padding:1.75rem 2rem; border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:6px; background:var(--white)} .cta-bar p{font-size:1.05rem;color:var(--ink)} /* ── LIFESTYLE CARDS ──────────────────────────────────────────── */ .life-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,3vw,2rem)} .life-card{border-radius:10px;overflow:hidden;background:var(--white); border:1px solid var(--border);transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .life-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.1)} .life-card__img{aspect-ratio:3/2;overflow:hidden;background:var(--sand)} .life-card__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;transition:transform .6s var(--ease)} .life-card:hover .life-card__img img{transform:scale(1.05)} .life-card__body{padding:1.25rem 1.5rem 1.5rem} .life-card__title{font-family:var(--serif);font-size:1.25rem;font-weight:400;color:var(--ink);margin-bottom:.5rem;letter-spacing:-.01em} .life-card__text{font-size:var(--sm);color:var(--muted);line-height:1.7} /* ── PROJECT SPLIT ────────────────────────────────────────────── */ .project-split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,5vw,5rem);align-items:start;margin-bottom:clamp(3rem,6vw,5rem)} .project-desc{font-size:var(--body);color:rgba(255,255,255,.72);line-height:1.85;margin-bottom:2rem} .project-desc strong{color:var(--white)} .fact-list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:2rem} .fact{display:grid;grid-template-columns:140px 1fr;gap:.5rem;padding-block:.65rem;border-bottom:1px solid rgba(255,255,255,.1)} .fact dt{font-size:var(--xs);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:500} .fact dd{font-size:var(--sm);color:rgba(255,255,255,.85)} /* Project hero image */ .project-hero-img{border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:var(--ink)} .project-hero-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9} /* ── APT CARDS ────────────────────────────────────────────────── */ .apt-cards__hd{font-family:var(--sans);font-size:clamp(1.4rem,3vw,1.75rem);font-weight:400; color:var(--white);margin-bottom:2rem;letter-spacing:.02em} .apt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.5rem)} .apt-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px; overflow:hidden;display:flex;flex-direction:column; transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)} .apt-card__img{aspect-ratio:16/10;overflow:hidden;background:var(--ink)} .apt-card__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .6s var(--ease)} .apt-card:hover .apt-card__img img{transform:scale(1.05)} .apt-card__body{padding:clamp(1.25rem,3vw,1.75rem);display:flex;flex-direction:column;gap:.75rem;flex:1} .apt-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);transform:translateY(-3px)} .apt-card--feat{border-color:var(--gold);background:rgba(200,169,106,.1)} .apt-card--feat:hover{background:rgba(200,169,106,.16);border-color:var(--gold)} .apt-card__top{display:flex;align-items:center;justify-content:space-between;gap:.5rem} .apt-card__id{font-family:var(--sans);font-size:var(--xs);font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.75)} .apt-card__badge{font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:.25em .7em} .apt-card__badge--gold{color:var(--gold);border-color:rgba(200,169,106,.4)} .apt-card__type{font-family:var(--serif);font-size:clamp(1.2rem,2.5vw,1.5rem);font-weight:400; color:var(--white);line-height:1.2;letter-spacing:-.01em} .apt-card__specs{display:flex;gap:1.5rem} .apt-card__specs div{display:flex;flex-direction:column;gap:.15rem} .apt-card__specs dt{font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)} .apt-card__specs dd{font-size:var(--sm);color:rgba(255,255,255,.75)} .apt-card__price{font-family:var(--serif);font-size:1.5rem;font-weight:300;color:var(--gold);letter-spacing:-.01em;margin-top:auto} .apt-card__cta{margin-top:.5rem} /* ── CONTACT ──────────────────────────────────────────────────── */ .contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(3rem,6vw,6rem);align-items:start} .contact-h2{text-align:left} .contact-sub{font-size:var(--body);color:var(--muted);line-height:1.8;margin-top:1.25rem;margin-bottom:1.75rem} .contact-trust{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.75rem} .contact-trust li{font-size:var(--sm);color:var(--muted)} .contact-addr{display:flex;flex-direction:column;gap:.75rem} .contact-addr a,.contact-addr span{display:flex;align-items:center;gap:.6rem;font-size:var(--sm);color:var(--muted);transition:color .2s} .contact-addr a:hover{color:var(--ink)} .contact-addr svg{color:var(--gold-dk);flex-shrink:0} /* Form card */ .contact-right{background:var(--white);border:1px solid var(--border);border-radius:10px; padding:clamp(1.75rem,4vw,2.75rem);box-shadow:0 4px 32px rgba(0,0,0,.07)} .form{display:flex;flex-direction:column;gap:1.25rem} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem} .f-field{display:flex;flex-direction:column;gap:.35rem} .f-field label{font-size:var(--xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} .f-opt{font-size:var(--xs);text-transform:none;letter-spacing:0;color:var(--muted);font-weight:300} .f-field input,.f-field select,.f-field textarea{ width:100%;padding:.8em 1em;font-family:var(--sans);font-size:var(--body);font-weight:300; color:var(--text);background:var(--sand);border:1px solid var(--border);border-radius:var(--r); transition:border-color .2s,box-shadow .2s,background .2s;appearance:none;-webkit-appearance:none} .f-field input::placeholder,.f-field textarea::placeholder{color:#B5ADA5} .f-field input:focus,.f-field select:focus,.f-field textarea:focus{ outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,61,92,.09);background:var(--white)} .f-field.err input,.f-field.err select{border-color:#C62828} .f-err{font-size:var(--xs);color:#C62828;min-height:1em} /* Radio group */ .f-pref{margin-bottom:.25rem} .f-pref legend{font-size:var(--xs);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:.65rem} .f-pref label{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--sm);color:var(--muted);margin-right:1.25rem;cursor:pointer} /* Checkbox */ .f-check{flex-direction:row!important;align-items:flex-start;gap:.65rem} .f-check input[type=checkbox]{flex-shrink:0;width:16px;height:16px;margin-top:.15em;accent-color:var(--ink);appearance:auto;-webkit-appearance:auto;background:none;border:none;padding:0;box-shadow:none} .f-check label{font-size:var(--sm);font-weight:300;text-transform:none;letter-spacing:0;color:var(--muted);line-height:1.6;cursor:pointer} /* Success */ .form-ok{text-align:center;padding:3rem 2rem} .form-ok__icon{width:54px;height:54px;background:#E8F5E9;color:#2E7D32;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 1.25rem} .form-ok p{font-size:var(--body);color:var(--muted);line-height:1.7} /* ── FOOTER ───────────────────────────────────────────────────── */ .footer{background:var(--ink-dk);color:rgba(255,255,255,.55);padding-block:2.5rem} .footer__row{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-bottom:1.25rem} .footer__logo-link{display:inline-block;margin-bottom:1rem;transition:opacity .2s} .footer__logo-link:hover{opacity:.8} .footer__logo{width:140px;height:auto;filter:brightness(0) invert(1);opacity:.7;transition:opacity .2s} .footer__logo-link:hover .footer__logo{opacity:1} .footer__brand{font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--white);margin-bottom:.3rem;letter-spacing:.01em} .footer__meta{font-size:var(--xs);color:rgba(255,255,255,.35);line-height:1.7} .footer__links{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center} .footer__links a{font-size:var(--sm);color:rgba(255,255,255,.5);transition:color .2s} .footer__links a:hover{color:var(--gold)} .footer__photo{font-size:var(--xs);color:rgba(255,255,255,.28);border-top:1px solid rgba(255,255,255,.08);padding-top:1rem} .footer__photo a{color:rgba(255,255,255,.45);text-decoration:underline} /* ── FLOATING WA ──────────────────────────────────────────────── */ .fab-wa{position:fixed;bottom:5.5rem;right:1.5rem;z-index:90;width:52px;height:52px; background:#25D366;color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center; box-shadow:0 4px 16px rgba(37,211,102,.35);transition:transform .3s var(--ease),box-shadow .3s} .fab-wa:hover{transform:scale(1.08);box-shadow:0 6px 22px rgba(37,211,102,.48)} /* ── STICKY BAR ───────────────────────────────────────────────── */ .sticky-bar{display:none;position:fixed;bottom:0;inset-inline:0;z-index:90; background:var(--white);border-top:1px solid var(--border); padding:.65rem 1.25rem calc(.65rem + env(safe-area-inset-bottom));gap:.6rem} .sticky-bar__book,.sticky-bar__wa{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem; padding:.78em 1em;border-radius:var(--r);font-size:var(--sm);font-weight:500;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} .sticky-bar__book{background:var(--ink);color:var(--white)} .sticky-bar__book:hover{background:var(--ink-dk)} .sticky-bar__wa{background:#1A9E4A;color:var(--white)} .sticky-bar__wa:hover{background:#158040} /* ── LIGHTBOX ─────────────────────────────────────────────────── */ .lb{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.93);display:flex; align-items:center;justify-content:center;padding:1.5rem;transition:opacity .3s} .lb[hidden]{display:none} .lb__fig{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:90vw;max-height:90vh} .lb__img{max-width:90vw;max-height:82vh;object-fit:contain;border-radius:4px;transition:opacity .2s} .lb__cap{font-size:var(--sm);color:rgba(255,255,255,.5);letter-spacing:.05em} .lb__close,.lb__prev,.lb__next{position:fixed;background:rgba(255,255,255,.07);color:var(--white);border:1px solid rgba(255,255,255,.15);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:501} .lb__close:hover,.lb__prev:hover,.lb__next:hover{background:rgba(255,255,255,.18)} .lb__close{top:1.5rem;right:1.5rem} .lb__prev{left:1.5rem;top:50%;transform:translateY(-50%)} .lb__next{right:1.5rem;top:50%;transform:translateY(-50%)} /* ── RESPONSIVE ───────────────────────────────────────────────── */ @media(max-width:1024px){ .project-split{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} .apt-grid{grid-template-columns:repeat(2,1fr)} .life-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:768px){ /* Tighter section padding on mobile */ .section{padding-block:clamp(2.5rem,6vw,4rem)} .sec-hd{margin-bottom:clamp(1.75rem,4vw,3rem)} .hero__body{padding-top:7rem;padding-bottom:4rem} /* mobile nav */ .header__nav{position:fixed;inset-block:0;inset-inline-end:0;width:min(300px,80vw); background:var(--white);box-shadow:-4px 0 30px rgba(0,0,0,.12); flex-direction:column;align-items:flex-start;justify-content:center; padding:3rem 2.5rem;gap:2rem; transform:translateX(100%);transition:transform .35s var(--ease);z-index:200} .header__nav.open{transform:translateX(0)} .nav-link{color:var(--ink);font-size:1.1rem} .header.scrolled .nav-link{color:var(--ink)} .header__cta{display:none} .burger{display:flex} .hero__bg{grid-template-columns:1fr} .hero__half--city{display:none} .hero__half--sea{grid-column:1} .reasons-grid{grid-template-columns:1fr} .life-grid{grid-template-columns:1fr} .apt-grid{grid-template-columns:repeat(2,1fr)} .form-row{grid-template-columns:1fr} .contact-grid{gap:clamp(2rem,4vw,3rem)} .footer{padding-block:2rem} .footer__logo{width:110px} .sticky-bar{display:flex} .fab-wa{bottom:5rem;right:1rem;width:46px;height:46px} } @media(max-width:480px){ .section{padding-block:2rem} .sec-hd{margin-bottom:1.5rem} .hero__body{padding-top:6rem;padding-bottom:3rem} .hero__ctas{flex-direction:column} .hero__ctas .btn{width:100%} .cta-bar{flex-direction:column;align-items:flex-start;padding:1.25rem 1.5rem} .apt-grid{grid-template-columns:1fr} .apt-cards__hd{margin-bottom:1.25rem} .project-split{gap:2rem;margin-bottom:2rem} }