*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    :root {
      --c-bg:      #FAFAF8;
      --c-bg2:     #F2EFE9;
      --c-stone:   #D6CEC0;
      --c-ink:     #1C1C1A;
      --c-mid:     #6B6860;
      --c-gold:    #B8996A;   /* accent gold per luxury */
      --c-night:   #0D1B2A;
      --f-serif:   'Cormorant Garamond', Georgia, serif;
      --f-sans:    'Montserrat', system-ui, sans-serif;
      --sp-side:   clamp(2.8rem, 11.2vw, 12.6rem);
      --sp-sec:    13vh;
      --ease-lux:  cubic-bezier(0.77, 0, 0.175, 1);
      --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    html, body { 
      width: 100%;
      overflow-x: hidden; 
      -webkit-font-smoothing: antialiased;
    }
    body {
      font-family: var(--f-sans); font-weight:300;
      background: var(--c-bg); color: var(--c-ink);
      cursor: none;
    }

    /* ══ CURSOR ══ */
    #cur, #cur-f { position:fixed; border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); }
    #cur   { width:12px; height:12px; background:#ff00ff; }
    #cur-f { width:48px; height:48px; border:1.5px solid #ff00ff; z-index:9998; opacity:.8; transition:width .4s,height .4s; }
    
    @media (pointer: coarse) {
      #cur, #cur-f { display: none !important; }
      body { cursor: auto !important; }
    }

    /* ══ INTRO SCREEN ══ */
    #intro {
      position:fixed; inset:0; background:var(--c-night);
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      z-index:1000;
      transition:opacity 1.8s var(--ease-lux), visibility 1.8s;
    }
    #intro.gone { opacity:0; visibility:hidden; pointer-events:none; }
    .i-logo {
      font-family:var(--f-serif); font-size:clamp(1.96rem, 4.2vw, 3.36rem);
      font-weight:300; color:#fff; letter-spacing:.5em; text-transform:uppercase;
      opacity:0; transform:translateY(18px); animation:up 1.2s .4s forwards;
      /* Effetto Neon Bianca Estremo */
      text-shadow: 0 0 5px #fff, 0 0 15px rgba(255,255,255,0.8), 0 0 30px rgba(255,255,255,0.6), 0 0 60px rgba(255,255,255,0.4);
    }
    .i-loc {
      font-size:0.77rem; letter-spacing:.4em; text-transform:uppercase;
      color:rgba(255,255,255,.35); margin-top:.7rem;
      opacity:0; animation:up 1.2s .85s forwards;
    }
    .i-gold {
      width:40px; height:1px; background:var(--c-gold);
      margin:1.6rem auto 0;
      opacity:0; animation:up 1s 1.1s forwards;
    }
    .i-cta {
      position:absolute; bottom:9%;
      display:flex; flex-direction:column; align-items:center; gap:.7rem;
      opacity:0; animation:up 1s 1.5s forwards; cursor:pointer;
    }
    .i-cta-t { font-size:0.76rem; letter-spacing:.38em; text-transform:uppercase; color:rgba(255,255,255,.38); }
    .i-ln { width:1px; height:50px; background:rgba(255,255,255,.12); position:relative; overflow:hidden; }
    .i-ln::after { content:''; position:absolute; top:-100%; width:100%; height:100%; background:#fff; animation:fall 1.9s 1.8s infinite; }

    /* ══ NAV ══ */
    nav {
      position:fixed; top:0; left:0; right:0; z-index:200;
      display:flex; align-items:center; justify-content:space-between;
      padding:2.2rem var(--sp-side);
      transition:padding .6s var(--ease-soft), background .6s, box-shadow .6s;
    }
    nav.s {
      background:rgba(250,250,248,.96); backdrop-filter:blur(14px);
      padding:1.3rem var(--sp-side);
      box-shadow:0 1px 0 rgba(28,28,26,.06);
    }
    .n-logo {
      font-family:var(--f-serif); font-size:1.4rem; font-weight:400;
      letter-spacing:.28em; text-transform:uppercase;
      color:#fff; text-decoration:none; transition:color .4s;
    }
    nav.s .n-logo { color:var(--c-ink); }
    .n-links { display:flex; gap:2.5rem; list-style:none; }
    .n-links a {
      font-size:0.78rem; letter-spacing:.22em; text-transform:uppercase;
      color:rgba(255,255,255,.75); text-decoration:none;
      transition:color .3s; position:relative; padding-bottom:2px;
    }
    .n-links a::after {
      content:''; position:absolute; bottom:0; left:0; width:0; height:1px;
      background:currentColor; transition:width .45s var(--ease-soft);
    }
    .n-links a:hover::after { width:100%; }
    nav.s .n-links a { color:var(--c-mid); }
    .n-book {
      font-size:0.76rem; letter-spacing:.22em; text-transform:uppercase;
      color:#fff; border:1px solid rgba(255,255,255,.38);
      padding:.65rem 1.6rem; text-decoration:none;
      transition:all .4s var(--ease-soft);
    }
    .n-book:hover { background:#fff; color:var(--c-ink); }
    nav.s .n-book { color:var(--c-ink); border-color:rgba(28,28,26,.28); }
    nav.s .n-book:hover { background:var(--c-ink); color:#fff; }

    /* ══════════════════════════════════════════════
       HERO — effetto Casa Angelina fedele:

       - #hImgContainer : wrapper alto 280vh
       - #hImgLayer     : sticky, tiene il frame a schermo
       - #hImgCover     : il "frame" che si restringe
                         con clip-path da fullscreen
                         a rettangolo stretto/trapezio
                         usando has_transition (3s ease)
       - video/canvas   : sempre object-fit:cover
    ═══════════════════════════════════════════════ */
    
    /* Testo laterale (Relax SPA) */
    #h-side-text {
      position: absolute; right: 5%; top: 50%;
      transform: translateY(-50%);
      width: 42%; height: 100%;
      opacity: 0; pointer-events: none; z-index: 4;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      will-change: opacity;
    }
    .huge-relax {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--f-serif); font-size: clamp(8rem, 15vw, 18rem);
      font-weight: 300; color: rgba(28,28,26, 0.12);
      white-space: nowrap; text-align: center;
      line-height: .9; letter-spacing: -.02em; z-index: 0;
    }
    .side-content {
      position: relative; z-index: 1;
      padding: 0 1rem; text-align: center;
    }
    .side-content p {
      font-family: var(--f-serif); font-size: clamp(1.4rem, 2.5vw, 2.4rem); font-style: italic; 
      line-height: 1.4; color: var(--c-ink); letter-spacing: 0.02em; font-weight: 400;
    }

    #hImgContainer {
      position: relative;
      height: 120vh; /* Ultra-snappy cinematic scrub */
      background: var(--c-bg);
      --clip-duration: 3s;
    }

    #hImgLayer {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--c-bg);
    }

    /* Il frame attivo — questo è il cuore dell'effetto */
    #hImgCover {
      position: absolute;
      inset: 0;
      overflow: hidden;
      /* sempre polygon -> reverse stabile e fluido */
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
      will-change: clip-path, transform;
      transform: translate3d(0,0,0);
      backface-visibility: hidden;
    }

    /* il canvas/video riempie sempre tutto il frame */
    #hImgCover canvas,
    #hImgCover video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

    /* overlay scuro sul video */
    #hImgCover .v-ov {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.52) 100%);
      z-index: 1;
    }

    /* testo hero sovrapposto */
    #h-text {
      position: absolute; inset: 0; z-index: 3;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center; pointer-events: none;
      padding: 0 clamp(2.1rem, 8.4vw, 11.2rem);
    }
    .h-eye {
      font-size:0.76rem; letter-spacing:.45em; text-transform:uppercase;
      color:rgba(255,255,255,.5); margin-bottom:1.5rem;
      opacity:0; transform:translateY(14px);
    }
    .h-title {
      font-family:var(--f-serif);
      font-size:clamp(3.36rem, 8.4vw, 7.56rem);
      font-weight:300; color:#fff;
      line-height:1.12; letter-spacing:.04em;
      opacity:0; transform:translateY(28px);
      /* Effetto Neon Bianca Estremo */
      text-shadow: 0 0 8px rgba(255,255,255,0.8), 0 0 20px rgba(255,255,255,0.6), 0 0 40px rgba(255,255,255,0.4);
    }
    .h-title em { 
      font-style:italic; color:var(--c-gold); 
      text-shadow: 0 0 8px var(--c-gold), 0 0 20px var(--c-gold); 
    }
    .h-sub {
      max-width:400px; font-size:1.01rem; line-height:2.1;
      letter-spacing:.07em; color:rgba(255,255,255,.62);
      margin-top:1.8rem;
      opacity:0; transform:translateY(14px);
    }
    .h-gold-line { width:30px; height:1px; background:var(--c-gold); margin:1.4rem auto; opacity:0; }

    /* badge visibile solo quando il frame è ristretto */
    #h-badge {
      position:absolute; z-index:5;
      bottom:calc(28% + 1.2rem); left:50%;
      transform:translateX(-50%);
      font-size:0.67rem; letter-spacing:.32em;
      text-transform:uppercase; color:rgba(255,255,255,.5);
      white-space:nowrap; opacity:0;
      transition:opacity .8s;
      pointer-events:none;
    }

    /* scroll cue */
    #h-scroll {
      position:absolute; bottom:5vh; left:0; right:0; margin:0 auto;
      width:max-content; z-index:4;
      display:flex; flex-direction:column; align-items:center; gap:.6rem;
      opacity:0;
    }
    #h-scroll span { font-size:0.7rem; letter-spacing:.35em; text-transform:uppercase; color:rgba(255,255,255,.4); }
    .h-ln { width:1px; height:54px; background:rgba(255,255,255,.15); position:relative; overflow:hidden; }
    .h-ln::after { content:''; position:absolute; top:-100%; width:100%; height:100%; background:rgba(255,255,255,.7); animation:fall 2s infinite; }

    /* ══ REVEAL ══ */
    .rv   { opacity:0; transform:translateY(36px); transition:opacity 1.1s var(--ease-soft),transform 1.1s var(--ease-soft); }
    .rv-l { opacity:0; transform:translateX(-36px); transition:opacity 1.1s var(--ease-soft),transform 1.1s var(--ease-soft); }
    .rv-r { opacity:0; transform:translateX(36px);  transition:opacity 1.1s var(--ease-soft),transform 1.1s var(--ease-soft); }
    /* reveal sub-anim */
    .rv.on,.rv-l.on,.rv-r.on { opacity:1; transform:translate(0); }
    /* quando esce dal viewport torna invisibile → pronto per ri-animarsi */
    .rv.out   { opacity:0; transform:translateY(24px); }
    .rv-l.out { opacity:0; transform:translateX(-20px); }
    .rv-r.out { opacity:0; transform:translateX(20px); }
    .d1{transition-delay:.15s} .d2{transition-delay:.3s} .d3{transition-delay:.45s}

    /* ══ SHARED ══ */
    .s-label {
      font-family:var(--f-serif);
      font-size:clamp(2.52rem, 5.6vw, 4.76rem);
      font-weight:300; letter-spacing:.5em; line-height:1;
      color:var(--c-ink); margin-bottom:1.6rem;
    }
    .gold-div { width:36px; height:1px; background:var(--c-gold); margin:1.4rem 0 1.8rem; }
    .s-text { font-size:1.05rem; line-height:2.2; letter-spacing:.05em; color:var(--c-mid); max-width:460px; }
    .s-text p+p { margin-top:1.1rem; }

    .btn {
      display:inline-block; font-size:0.78rem; letter-spacing:.22em;
      text-transform:uppercase; color:var(--c-ink);
      border:1px solid var(--c-stone); padding:.85rem 2rem;
      text-decoration:none; margin-top:2.2rem;
      position:relative; overflow:hidden;
      transition:border-color .4s, color .4s;
    }
    .btn::before {
      content:''; position:absolute; inset:0;
      background:var(--c-ink); transform:translateX(-102%);
      transition:transform .5s var(--ease-lux);
    }
    .btn:hover { border-color:var(--c-ink); color:#fff; }
    .btn:hover::before { transform:translateX(0); }
    .btn span { position:relative; z-index:1; }

    .btn-gold {
      border-color: var(--c-gold); color: var(--c-gold);
    }
    .btn-gold::before { background: var(--c-gold); }
    .btn-gold:hover { color:#fff; }

    /* ══ ABOUT / APARTMENT ══ */
    #about {
      padding:var(--sp-sec) var(--sp-side);
      background:var(--c-bg);
      display:grid; grid-template-columns:1fr 1fr;
      gap:clamp(2.8rem, 8.4vw, 11.2rem); align-items:center;
    }
    .img-block { aspect-ratio:16/9; position:relative; overflow:hidden; border-radius: 4px; }
    .ib-bg {
      position:absolute; inset:0;
      background:linear-gradient(145deg,#2c2c2a 0%,#1a1a18 100%);
      transition:transform 1.2s var(--ease-soft);
    }
    /* griglia di placeholder stanze */
    .ib-bg.room1 { background:linear-gradient(135deg,#1a2a3a 0%,#2c4a5a 50%,#3a6070 100%); }
    .ib-bg.room2 { background:linear-gradient(135deg,#2a1a1a 0%,#4a2c2c 50%,#705050 100%); }
    .ib-bg.spa   { background:linear-gradient(135deg,#1a2a2a 0%,#2c4a4a 50%,#3a7070 100%); }
    .img-block:hover .ib-bg { transform:scale(1.18); }
    .ib-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.4) 0%,transparent 55%); }
    .ib-lbl { position:absolute; bottom:1.4rem; left:1.6rem; font-size:0.7rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.52); }

    /* ══ FEATURES ICONS ══ */
    #features {
      padding:var(--sp-sec) var(--sp-side);
      background:var(--c-bg2);
    }
    .features-head { text-align:center; margin-bottom:7vh; }
    .features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; text-align:center; }
    .feat-item { display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
    .feat-icon {
      width:56px; height:56px;
      border:1px solid var(--c-gold); border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:1.82rem;
      transition:background .3s, transform .4s var(--ease-soft);
    }
    .feat-item:hover .feat-icon { background:var(--c-gold); transform:scale(1.08); }
    .feat-name { font-size:0.84rem; letter-spacing:.22em; text-transform:uppercase; color:var(--c-mid); }
    .feat-desc { font-size:0.95rem; line-height:1.8; color:var(--c-mid); }

    /* ══ FULLBLEED PANEL ══ */
    .panel { height:72vh; position:relative; overflow:hidden; }
    .panel-bg {
      position:absolute; inset:-12% 0; will-change:transform;
      background:linear-gradient(145deg,#0d1b2a 0%,#1a3045 35%,#1c4a3a 65%,#2a6050 100%);
    }
    .panel-dark { position:absolute; inset:0; background:rgba(13,27,42,.48); }
    .panel-content {
      position:relative; z-index:2; height:100%;
      display:flex; align-items:flex-end;
      padding:8vh var(--sp-side);
    }
    .panel-quote {
      font-family:var(--f-serif); font-size:clamp(2.24rem, 4.48vw, 3.92rem);
      font-style:italic; font-weight:300;
      color:#fff; max-width:660px; line-height:1.45;
    }
    .panel-attr { font-size:0.73rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-top:1rem; }

    /* ══ GALLERY ══ */
    #gallery { padding:var(--sp-sec) var(--sp-side); background:var(--c-bg); }
    .gallery-head { text-align:center; margin-bottom:7vh; }
    .gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
    .gallery-grid .g-item:first-child { grid-column:1/3; aspect-ratio:16/7; }
    .gallery-grid .g-item:last-child  { grid-column:3/4; grid-row:1/3; }
    .g-item { position:relative; overflow:hidden; aspect-ratio:4/3; }
    .g-bg {
      position:absolute; inset:0;
      transition:transform .9s var(--ease-soft);
    }
    .g-item:nth-child(1) .g-bg { background:linear-gradient(135deg,#1a2a3a,#3a6070); }
    .g-item:nth-child(2) .g-bg { background:linear-gradient(135deg,#2a2a1a,#60603a); }
    .g-item:nth-child(3) .g-bg { background:linear-gradient(135deg,#1a2a1a,#3a6040); }
    .g-item:nth-child(4) .g-bg { background:linear-gradient(135deg,#2a1a2a,#604060); }
    .g-item:hover .g-bg { transform:scale(1.05); }
    .g-ov { position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .4s; }
    .g-item:hover .g-ov { background:rgba(0,0,0,.12); }
    .g-lbl { position:absolute; bottom:1rem; left:1.2rem; font-size:0.7rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,.6); z-index:1; }

    /* ══ SPA SECTION ══ */
    #spa {
      padding:var(--sp-sec) var(--sp-side);
      background:var(--c-night); color:#fff;
      display:grid; grid-template-columns:1fr 1fr;
      gap:clamp(2.8rem, 8.4vw, 11.2rem); align-items:center;
    }
    #spa .s-label { color:#fff; }
    #spa .s-text  { color:rgba(255,255,255,.55); max-width:460px; }
    .spa-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
    .spa-card {
      aspect-ratio:1; position:relative; overflow:hidden;
      display:flex; align-items:flex-end; padding:1rem;
    }
    .spa-card:nth-child(1) { background:linear-gradient(135deg,#0d3040,#1a5060); }
    .spa-card:nth-child(2) { background:linear-gradient(135deg,#1a3020,#2a5040); }
    .spa-card:nth-child(3) { background:linear-gradient(135deg,#301a10,#604030); }
    .spa-card:nth-child(4) { background:linear-gradient(135deg,#201830,#403060); }
    .spa-card .sc-lbl { font-size:0.7rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,.55); z-index:1; }
    .spa-card .sc-in { position:absolute; inset:0; transition:transform .8s var(--ease-soft); background:inherit; }
    .spa-card:hover .sc-in { transform:scale(1.05); }

    /* ══ LOCATION ══ */
    #location {
      padding:var(--sp-sec) var(--sp-side);
      background:var(--c-bg2);
      display:grid; grid-template-columns:1fr 1fr;
      gap:clamp(2.8rem, 8.4vw, 11.2rem); align-items:center;
    }
    .map-placeholder {
      aspect-ratio:4/3; background:var(--c-stone);
      position:relative; overflow:hidden;
      display:flex; align-items:center; justify-content:center;
    }
    .map-pin {
      font-size:2.8rem; z-index:1;
      animation:pulse 2s infinite;
    }
    .map-bg {
      position:absolute; inset:0; opacity:.6;
      background:
        repeating-linear-gradient(0deg,rgba(100,100,100,.08) 0,rgba(100,100,100,.08) 1px,transparent 1px,transparent 40px),
        repeating-linear-gradient(90deg,rgba(100,100,100,.08) 0,rgba(100,100,100,.08) 1px,transparent 1px,transparent 40px);
    }
    .addr-item { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.4rem; }
    .addr-icon { font-size:1.4rem; margin-top:.1rem; flex-shrink:0; }
    .addr-text { font-size:1.01rem; line-height:1.8; letter-spacing:.04em; color:var(--c-mid); }
    .addr-text strong { display:block; font-weight:400; color:var(--c-ink); font-size:0.91rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.2rem; }

    /* ══ STATS ══ */
    #stats {
      padding:var(--sp-sec) var(--sp-side);
      background:var(--c-ink);
      display:grid; grid-template-columns:repeat(4,1fr);
      gap:2rem; text-align:center;
    }
    .stat-n { font-family:var(--f-serif); font-size:clamp(3.08rem, 5.6vw, 5.04rem); font-weight:300; color:var(--c-gold); line-height:1; }
    .stat-l { font-size:0.73rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-top:.7rem; }

    /* ══ BOOKING CTA ══ */
    #cta {
      padding:var(--sp-sec) var(--sp-side);
      background:var(--c-bg);
      text-align:center;
    }
    .cta-title {
      font-family:var(--f-serif);
      font-size:clamp(2.8rem, 6.3vw, 5.6rem);
      font-weight:300; color:var(--c-ink);
      letter-spacing:.08em; line-height:1.2;
      margin-bottom:1.5rem;
    }
    .cta-title em { font-style:italic; color:var(--c-gold); }
    .cta-sub { font-size:1.01rem; line-height:1.9; letter-spacing:.06em; color:var(--c-mid); margin-bottom:3rem; }

    /* TRUST SECTION */
    #trust {
      padding: var(--sp-sec) var(--sp-side);
      background: var(--c-ink); color: #fff;
    }
    .trust-flex {
      display: flex; gap: 6rem; align-items: center;
      max-width: 1200px; margin: 0 auto;
    }
    .trust-badge {
      flex-shrink: 0; text-align: center;
      background: #003580; padding: 2.5rem; border-radius: 8px;
      min-width: 220px;
    }
    .b-logo { font-size: 0.75rem; letter-spacing: 0.1em; opacity: 0.8; margin-bottom: 1rem; }
    .b-score { font-family: var(--f-serif); font-size: 4.8rem; line-height: 1; font-weight: 400; }
    .b-label { font-size: 1.1rem; margin-top: 0.5rem; font-weight: 400; }
    .b-count { font-size: 0.65rem; opacity: 0.5; margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; }

    .trust-details { flex-grow: 1; }
    .trust-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 2rem 4rem; margin-bottom: 3.5rem;
    }
    .t-item {
      display: flex; flex-direction: column; gap: 0.4rem;
      border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 0.8rem;
    }
    .t-item span { font-size: 0.7rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; }
    .t-item strong { font-size: 1.2rem; font-weight: 300; color: var(--c-gold); }

    .trust-slider {
      position: relative; min-height: 250px; overflow: hidden;
    }
    .t-track {
      display: flex; transition: transform 0.8s var(--ease-lux);
    }
    .t-slide {
      flex: 0 0 100%; opacity: 0.3; filter: blur(2px);
      transition: opacity 0.8s, filter 0.8s;
      border-left: 2px solid var(--c-gold); padding: 2rem;
      display: flex; flex-direction: column; justify-content: center;
    }
    .t-slide.active { opacity: 1; filter: blur(0); }

    .t-slide p { font-family: var(--f-serif); font-size: 1.5rem; font-style: italic; line-height: 1.4; color: rgba(255,255,255,0.85); margin: 0; }
    .t-slide span { display: block; margin-top: 1rem; font-size: 0.7rem; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.2em; }

    .t-dots {
      position: absolute; bottom: -3rem; left: 2rem;
      display: flex; gap: 0.8rem;
    }
    .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: rgba(255,255,255,0.15); transition: background 0.3s, transform 0.3s;
      cursor: pointer;
    }
    .dot.active { background: var(--c-gold); transform: scale(1.3); }


    /* CONTACT SECTION */
    #contact {
      padding: var(--sp-sec) var(--sp-side);
      background: var(--c-bg2);
    }
    .contact-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 5rem; text-align: left; align-items: start;
      max-width: 1100px; margin: 0 auto;
    }
    .contact-info { padding-top: 1rem; }
    .c-title {
      font-family: var(--f-serif); font-size: 1.8rem;
      font-weight: 300; color: var(--c-ink); margin-bottom: 1.5rem;
      letter-spacing: 0.05em;
    }
    .c-text { font-size: 0.9rem; line-height: 1.8; color: var(--c-mid); }
    
    .btn-lg { width: 100%; text-align: center; font-size: 0.75rem; padding: 1.2rem; }

    /* FORM */
    .contact-form { display: flex; flex-direction: column; gap: 1.2rem; background: var(--c-bg); padding: 3rem; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
    .f-group input, .f-group textarea {
      width: 100%; background: transparent;
      border: none; border-bottom: 1px solid var(--c-stone);
      padding: 1rem 0; font-family: var(--f-sans);
      font-size: 0.9rem; color: var(--c-ink);
      transition: border-color 0.4s;
    }
    .f-group input:focus, .f-group textarea:focus {
      outline: none; border-color: var(--c-gold);
    }
    .f-privacy { margin: 1rem 0; }
    .check-container {
      display: block; position: relative; padding-left: 30px;
      cursor: pointer; font-size: 0.75rem; color: var(--c-mid);
      user-select: none; line-height: 1.6;
    }
    .check-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
    .checkmark {
      position: absolute; top: 2px; left: 0;
      height: 18px; width: 18px; border: 1px solid var(--c-stone);
      background-color: transparent; transition: all 0.3s;
    }
    .check-container:hover input ~ .checkmark { border-color: var(--c-gold); }
    .check-container input:checked ~ .checkmark { background-color: var(--c-gold); border-color: var(--c-gold); }
    .checkmark:after {
      content: ""; position: absolute; display: none;
      left: 6px; top: 2px; width: 4px; height: 8px;
      border: solid white; border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    .check-container input:checked ~ .checkmark:after { display: block; }
    .check-container a { color: var(--c-ink); text-decoration: underline; }

    .cta-quick {
      margin-top: 6rem; display: flex; justify-content: center; gap: 3rem;
      border-top: 1px solid var(--c-bg2); padding-top: 3rem;
    }
    .q-link {
      font-size: 0.75rem; text-decoration: none; color: var(--c-mid);
      letter-spacing: 0.1em; transition: color 0.3s;
    }
    .q-link:hover { color: var(--c-gold); }

    /* ══ FOOTER ══ */
    footer { background:var(--c-night); padding:10vh var(--sp-side) 5vh; }
    footer .f-top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:clamp(2.1rem, 5.6vw, 8.4rem); margin-bottom:6vh; }
    .f-brand { font-family:var(--f-serif); font-size:1.82rem; color:#fff; letter-spacing:.3em; margin-bottom:1.2rem; }
    .f-addr { font-size:0.88rem; line-height:1.9; letter-spacing:.04em; color:rgba(255,255,255,.35); }
    .f-col h5 { font-size:0.73rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:1.4rem; }
    .f-col ul { list-style:none; }
    .f-col ul li { margin-bottom:.75rem; font-size:0.88rem; }
    .f-col a { color:rgba(255,255,255,.35); text-decoration:none; transition:color .3s; }
    .f-col a:hover { color:var(--c-gold); }
    .f-bot { border-top:1px solid rgba(255,255,255,.07); padding-top:2rem; display:flex; justify-content:space-between; font-size:0.73rem; letter-spacing:.1em; color:rgba(255,255,255,.28); }

    /* ══ PAGE TRANSITION ══ */
    #pt { position:fixed; inset:0; background:var(--c-night); z-index:500; transform:translateY(100%); transition:transform .85s var(--ease-lux); pointer-events:none; }
    #pt.in  { transform:translateY(0); }
    #pt.out { transform:translateY(-100%); }

    /* ══ KEYFRAMES ══ */
    @keyframes up   { to { opacity:1; transform:translateY(0); } }
    @keyframes fall { 0%{top:-100%}100%{top:100%} }
    @keyframes pulse { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-6px) scale(1.1)} }

    /* ══ RESPONSIVE ══ */
    @media(max-width:1024px){
      :root { --sp-side: 5vw; }
      .trust-flex { gap: 3rem; }
    }
    @media(max-width:900px){
      #about,#spa,#location { grid-template-columns:1fr; }
      .features-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
      .trust-flex { flex-direction: column; gap: 3rem; text-align: center; }
      .trust-badge { width: 100%; max-width: 320px; }
      .trust-details { width: 100%; }
      .trust-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
      .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
      #stats { grid-template-columns:1fr 1fr; gap:3rem; }
      footer .f-top { grid-template-columns:1fr 1fr; }
      .gallery-grid { grid-template-columns:1fr 1fr; }
      .gallery-grid .g-item:first-child { grid-column:1/-1; }
      .gallery-grid .g-item:last-child  { grid-column:auto; grid-row:auto; }
    }
    @media(max-width:600px){
      #hImgContainer { height: 100vh; }
      #h-side-text { 
        position: absolute; right: 0; left: 0; top: 72%; bottom: auto;
        transform: translateY(-50%); width: 100%; height: auto;
        z-index: 10; opacity: 0; display: flex; justify-content: center;
      }
      .huge-relax { 
        font-size: 8rem; letter-spacing: .05em; color: rgba(0,0,0, 0.08) !important;
        opacity: 1 !important; 
        position: absolute; top: 50%; left: 50%; width: 100%;
        line-height: 0.9;
      }
      .side-content { 
        padding: 0 1rem; position: relative; z-index: 2; 
        max-width: 320px; margin: 0 auto;
      }
      .side-content p { 
        font-family: var(--f-serif); font-size: 1.25rem; line-height: 1.4; 
        font-style: italic; color: var(--c-ink);
      }
      .n-links { display:none; }
      .n-logo { font-size: 1.1rem; }
      .trust-badge { padding: 1.5rem 1rem; min-width: 100%; }
      .b-score { font-size: 3.5rem; }
      .features-grid { grid-template-columns: 1fr; }
      .trust-grid { grid-template-columns: 1fr; gap: 1rem; }
      .t-slide p { font-size: 1.25rem; }
      #stats { grid-template-columns: 1fr; gap: 2rem; padding: 4vh var(--sp-side); }
      .stat-n { font-size: 3rem; }
      footer .f-top { grid-template-columns:1fr; }
      .gallery-grid { grid-template-columns:1fr; }
      .cta-quick { flex-direction: column; gap: 1rem; align-items: center; }
    }
    
    /* LIGHTBOX */
    #lb { position: fixed; inset: 0; background: rgba(13,27,42,.95); z-index: 10000; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .4s var(--ease-lux); }
    #lb.active { display: flex; opacity: 1; }
    #lb img { max-width: 90%; max-height: 85vh; border-radius: 4px; box-shadow: 0 15px 45px rgba(0,0,0,.5); }
    .lb-close { position: absolute; top: 2rem; right: 2rem; color: #fff; font-size: 2rem; cursor: pointer; }