:root {
        --paper:  #F4EEE4;   /* v2 canonical paper */
        --ink:    #241F1A;   /* v2 canonical ink   */
        --navy:   #2D1411;   /* brand main color (espresso), per client */
        --black:  #000000;   /* pure black — loader curtain + footer, per client */
        --gold:   #B08D4C;   /* v2 canonical gold  */
        --mist:   rgba(244,238,228,.22);
        --ease-reveal: cubic-bezier(.22, 1, .36, 1);
        --ease-curve:  cubic-bezier(.65, 0, .35, 1);
        --serif: 'Google Sans', 'Figtree', 'Noto Sans Georgian', 'Inter', Helvetica, Arial, sans-serif;
        --sans:  'Google Sans', 'Figtree', 'Noto Sans Georgian', 'Inter', Helvetica, Arial, sans-serif;
      }
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html { overflow-x: hidden; }         /* clip horizontal only; let the page scroll vertically */
      body {
        font-family: var(--sans);
        background: var(--navy);
        color: var(--paper);
      }
    
      /* ---------------- Hero section (scrolls away with parallax) ---------------- */
      .hero { position: relative; height: 100vh; overflow: hidden; background: var(--navy); }
      .hero-media { position: absolute; top: -10%; left: 0; width: 100%; height: 120%; z-index: 0;
        transform: scale(1.08); will-change: transform; }        /* Ken-Burns settle on reveal */
      body.revealed .hero-media { transform: scale(1); transition: transform 2.8s var(--ease-reveal); }
      .hero-img {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; object-position: 50% 100%;            /* bottom-centered, per client */
        filter: saturate(1.04) contrast(1.02);                   /* warm & bright */
        will-change: transform;                                  /* parallax translateY set in JS */
      }
    
      /* progressive top blur + shade — matches the Figma nav layer (2D1411, ~60%, progressive blur) */
      .topbar {
        position: absolute; top: 0; left: 0; right: 0; height: 150px; z-index: 2; pointer-events: none;
        -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
        background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%);
        -webkit-mask-image: linear-gradient(180deg, #000 38%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 38%, transparent 100%);
      }
      /* gentle bottom scrim for the headline */
      .hero-scrim {
        position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.12) 62%, rgba(0,0,0,.6) 100%);
      }
      .grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
    
      /* ---------------- Header (matches the Figma nav) ---------------- */
      /* ---------------- Header: fixed, condenses on scroll, adapts colour to the section ---------------- */
      header {
        position: fixed; top: 0; left: 0; right: 0; z-index: 40;
        display: flex; align-items: center;
        padding: clamp(18px, 2.8vh, 30px) clamp(20px, 4vw, 56px);
        color: var(--paper); --hline: rgba(244,238,228,.45);
        transition: padding .5s var(--ease-reveal), background-color .5s ease,
          -webkit-backdrop-filter .5s ease, backdrop-filter .5s ease, box-shadow .5s ease, color .4s ease;
      }
      .hdr-left { display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); }
      .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; text-decoration: none; }
      .hdr-right { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); margin-left: auto; }
      .logo-img { height: 56px; width: auto; display: block; filter: brightness(0) invert(1);   /* white by default over the dark hero */
        transition: height .5s var(--ease-reveal), filter .4s ease; }
      .hdr-left a { position: relative; color: currentColor; text-decoration: none; font-family: var(--sans);
        font-size: 16px; font-weight: 400; opacity: .92; transition: opacity .3s ease; }
      .hdr-left a::after { content: ''; display: block; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-reveal); margin-top: 2px; }
      .hdr-left a:hover::after, .hdr-left a:focus-visible::after { transform: scaleX(1); }
      .hdr-left a:hover, .hdr-left a:focus-visible { opacity: 1; }
      .lang { font-family: var(--sans); font-size: 13.5px; white-space: nowrap; color: currentColor; }
      .lang a { color: currentColor; text-decoration: none; opacity: .5; }
      .lang a.on { opacity: 1; }
      .lang i { opacity: .4; margin: 0 5px; font-style: normal; }
      .btn-find, .request { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 15px; font-weight: 400;
        border-radius: 999px; padding: 8px 20px; cursor: pointer; text-decoration: none; white-space: nowrap; border: 1px solid transparent;
        transition: background .35s var(--ease-reveal), color .35s var(--ease-reveal), border-color .35s ease; }
      .btn-find svg, .request svg { width: 13px; height: 13px; transition: transform .35s var(--ease-reveal); }
      .btn-find:hover svg, .btn-find:focus-visible svg, .request:hover svg, .request:focus-visible svg { transform: translate(2px,-2px); }
      .request { color: currentColor; background: transparent; border-color: var(--hline); }
      /* colour themes (set by JS from the section under the header) */
      header.on-dark  { color: var(--paper); --hline: rgba(244,238,228,.45); }
      header.on-light { color: var(--navy);  --hline: rgba(45,20,17,.28); }
      header.on-dark  .logo-img { filter: brightness(0) invert(1); }
      header.on-light .logo-img { filter: none; }
      header.on-dark  .request:hover, header.on-dark  .request:focus-visible { background: var(--paper); color: var(--navy); border-color: var(--paper); }
      header.on-light .request:hover, header.on-light .request:focus-visible { background: var(--navy); color: var(--paper); border-color: var(--navy); }
      header.on-dark  .btn-find { background: var(--paper); color: var(--navy); border-color: var(--paper); }
      header.on-light .btn-find { background: var(--navy); color: var(--paper); border-color: var(--navy); }
      header.on-dark  .btn-find:hover, header.on-dark  .btn-find:focus-visible,
      header.on-light .btn-find:hover, header.on-light .btn-find:focus-visible { background: var(--gold); color: var(--navy); border-color: var(--gold); }
      /* once the left nav collapses there's no room to centre the logo — sit it left */
      @media (max-width: 940px) { header .hdr-left { display: none; } header .logo { position: static; transform: none; } }
      /* stuck: condensed + blurred translucent background */
      header.is-stuck { padding: 10px clamp(20px, 4vw, 56px); }
      header.is-stuck .logo-img { height: 40px; }
      /* on scroll: NO solid bar — just a soft top gradient with progressive blur that fades to nothing */
      header::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 220%; z-index: -1; pointer-events: none;
        opacity: 0; transition: opacity .5s ease;
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 34%, transparent 100%); }
      header.is-stuck::before { opacity: 1; }
      header.on-dark::before  { background: linear-gradient(180deg, rgba(0,0,0,.7)  0%, rgba(0,0,0,0)  100%); }
      header.on-light::before { background: linear-gradient(180deg, rgba(244,238,228,.82) 0%, rgba(244,238,228,0) 100%); }
    
      /* ---------------- Hero copy (uppercase sans, per the Figma) ---------------- */
      .hero-copy { position: absolute; z-index: 3; left: clamp(20px, 4vw, 56px);
        bottom: clamp(52px, 9vh, 92px); max-width: min(820px, 92vw); }
      h1 { font-family: var(--sans); font-weight: 700; text-transform: uppercase;   /* Google Sans Flex Bold 72/82 */
        font-size: clamp(38px, 4.9vw, 72px); line-height: 1.14; letter-spacing: 0; max-width: 800px; }
      .sub { margin-top: 22px; max-width: 46ch; font-family: var(--sans); font-weight: 400;
        font-size: clamp(14px, 1.1vw, 16px); line-height: 1.5; opacity: .92; text-wrap: balance; }
      .cta { display: inline-flex; align-items: center; gap: 16px; margin-top: 32px;
        font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
        color: var(--paper); text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; }
      .cta .ring { width: 44px; height: 44px; border: 1px solid rgba(244,238,228,.55); border-radius: 999px;
        display: grid; place-items: center; color: var(--paper);
        transition: background .35s var(--ease-reveal), border-color .35s ease; }
      .cta .ring svg { width: 15px; height: 15px; transition: transform .35s var(--ease-reveal); }
      .cta:hover .ring { background: var(--paper); border-color: var(--paper); color: var(--navy); }
      .cta:hover .ring svg { transform: translate(2px,-2px); }
    
      /* ---------------- Section 2 · Why OPUS living (scroll-fill text) ---------------- */
      .why { background: #F6F1E9; color: var(--navy); padding: clamp(88px, 15vh, 180px) clamp(20px, 3vw, 56px); }
      .why-wrap { max-width: 1440px; margin: 0 auto; }
      .why-eyebrow { display: inline-block; font-family: var(--sans); font-size: 14px; font-weight: 500;
        letter-spacing: .16em; text-transform: uppercase; color: rgba(45,20,17,.5); margin-bottom: 40px; }
      .fill { font-family: var(--sans); font-weight: 400; max-width: 1237px;   /* Google Sans Flex Regular 36/48 */
        font-size: clamp(22px, 2.4vw, 36px); line-height: 1.333; letter-spacing: 0; }
      .fill .w { opacity: .16; transition: opacity .18s linear; }
      .view-all { display: inline-flex; align-items: center; gap: 14px; margin-top: 48px;
        font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
        color: var(--navy); text-decoration: none; }
      .view-all .ring { width: 40px; height: 40px; border: 1px solid rgba(45,20,17,.4); border-radius: 999px;
        display: grid; place-items: center; color: var(--navy);
        transition: background .35s var(--ease-reveal), border-color .35s ease; }
      .view-all .ring svg { width: 14px; height: 14px; transition: transform .35s var(--ease-reveal); }
      .view-all:hover .ring { background: var(--navy); border-color: var(--navy); color: var(--paper); }
      .view-all:hover .ring svg { transform: translate(2px,-2px); }
    
      /* everything that settles in shares one entrance */
      header, .hero-copy { opacity: 0; transform: translateY(18px); }
      body.revealed header     { animation: settle .9s var(--ease-reveal) .16s forwards; }
      body.revealed .hero-copy { animation: settle 1s var(--ease-reveal) .3s forwards; }
      @keyframes settle { to { opacity: 1; transform: none; } }
    
      /* ============================================================
         LOADER CURTAIN — navy panel over the hero; the logo draws on it,
         then a circular hole is punched through (mask) and grows away.
         ============================================================ */
      #loader { position: fixed; inset: 0; z-index: 50; background: var(--black); display: grid; place-items: center; will-change: mask-image; }
      #loader.done { visibility: hidden; }
      #loader.reduce-done { transition: opacity .5s ease; opacity: 0; }
      #loader .mark { width: 230px; max-width: 62vw; }
      #ringLayer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: visible; }
      #ring { fill: none; stroke: var(--paper); opacity: 0; }
    
    
      #replay {
        position: fixed; z-index: 3; right: 26px; bottom: 26px;
        cursor: pointer; font-family: var(--sans); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
        color: var(--paper); background: rgba(45,20,17,.28); border: 1px solid rgba(244,238,228,.28); border-radius: 999px; padding: 8px 15px; opacity: .5;
        transition: opacity .25s ease, background .25s ease, color .25s ease;
      }
      #replay:hover, #replay:focus-visible { opacity: 1; background: var(--paper); color: var(--navy); }
      body:not(.revealed) #replay { display: none; }
    
      /* ================= §3 · THE SUMMIT (sky amenities) ================= */
      .summit { position: relative; background: #F6F1E9; }   /* cream margins during the mask-expand, matches §2 */
      .summit-stage { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: var(--navy); }
      .scene { position: absolute; inset: 0; z-index: 0; opacity: 1; will-change: opacity; }
      .scene[data-scene="1"], .scene[data-scene="2"] { opacity: 0; }
      .scene-media { position: absolute; inset: 0; overflow: hidden; }
      .scene-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
        filter: saturate(1.04) contrast(1.02); will-change: transform; }
      /* subtle bottom-only gradient for copy legibility — NOT a full image overlay */
      .summit-track { position: absolute; inset: 0; z-index: 0; }   /* desktop: holds the stacked scenes */
      .scene-media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.5) 100%); }
      .scene-copy { display: none; }        /* per-slide copy is mobile-only */
      .summit-bar { display: none; }        /* mobile scroll indicator (thin, matches the desktop rail) */
      .horizon { position: absolute; left: 0; right: 0; top: 46%; height: 1px; z-index: 2; pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(244,238,228,.4) 22%, rgba(244,238,228,.4) 78%, transparent); }
      .summit-copy { position: absolute; z-index: 3; left: clamp(20px, 4vw, 56px); right: clamp(20px, 4vw, 56px);
        bottom: clamp(52px, 9vh, 100px); color: var(--paper); }
      .summit .eyebrow { display: inline-flex; align-items: center; gap: 13px; font-family: var(--sans); font-size: 13px;
        font-weight: 500; letter-spacing: .24em; text-transform: uppercase; opacity: .85; margin-bottom: 22px; }
      .summit .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); }
      .scene-title { font-family: var(--sans); font-weight: 700; text-transform: uppercase; margin: 0;
        font-size: clamp(38px, 5.8vw, 88px); line-height: 1.02; letter-spacing: -.012em; max-width: 16ch;
        transition: opacity .4s var(--ease-reveal), transform .4s var(--ease-reveal); }
      .scene-cap { margin: 20px 0 0; font-family: var(--sans); font-weight: 400; font-size: clamp(12px, 1vw, 14px);
        letter-spacing: .1em; text-transform: uppercase; opacity: .82;
        transition: opacity .4s var(--ease-reveal), transform .4s var(--ease-reveal); }
      .scene-title.swap, .scene-cap.swap { opacity: 0; transform: translateY(14px); }
      .summit-controls { display: flex; align-items: center; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
      .chips { display: flex; flex-wrap: wrap; gap: 9px; }
      .chip { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--paper);
        background: rgba(244,238,228,.06); border: 1px solid rgba(244,238,228,.24); border-radius: 999px;
        padding: 9px 18px; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        transition: background .45s var(--ease-reveal), border-color .4s ease, color .45s ease; }
      .chip:hover { border-color: rgba(244,238,228,.55); }
      .chip.active { background: var(--paper); border-color: var(--paper); color: var(--navy); }
      .explore { display: inline-flex; align-items: center; gap: 13px; background: none; border: none; cursor: pointer;
        font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); }
      .explore .ring { width: 42px; height: 42px; border: 1px solid rgba(244,238,228,.42); border-radius: 999px;
        display: grid; place-items: center; color: var(--paper);
        transition: background .4s var(--ease-reveal), border-color .4s ease, color .4s ease; }
      .explore .ring svg { width: 14px; height: 14px; transition: transform .4s var(--ease-reveal); }
      .explore:hover .ring { background: var(--paper); border-color: var(--paper); color: var(--navy); }
      .explore:hover .ring svg { transform: translate(2px,-2px); }
      /* progress rail */
      .summit-rail { position: absolute; z-index: 3; right: clamp(18px, 4vw, 46px); top: 50%; transform: translateY(-50%);
        display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--paper); }
      .summit-rail .track { position: relative; width: 2px; height: 128px; background: rgba(244,238,228,.2); border-radius: 2px; overflow: hidden; }
      .summit-rail .fill { position: absolute; inset: 0; background: var(--paper); transform: scaleY(0); transform-origin: top center; }
      .summit-rail .idx { font-family: var(--sans); font-size: 11px; letter-spacing: .12em; opacity: .85; }
    
      /* reveal-on-scroll */
      [data-reveal] { opacity: 0; transform: translateY(24px);
        transition: opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal); }
      [data-reveal].in { opacity: 1; transform: none; }
      [data-reveal].d1 { transition-delay: .09s; }
      [data-reveal].d2 { transition-delay: .18s; }
      [data-reveal].d3 { transition-delay: .27s; }
    
      /* the inline conversion band (exit seam) */
      .capture { position: relative; background: var(--navy); color: var(--paper); overflow: hidden;
        padding: clamp(84px, 15vh, 156px) clamp(20px, 4vw, 56px); text-align: center; }
      .capture::before { content: ''; position: absolute; inset: 0;
        background: url("assets/renders/ExtCam_17 1.webp") center 28% / cover; opacity: .16; filter: saturate(1.05); }
      .capture::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.9)); }
      .capture-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }
      .capture-line { font-family: var(--sans); font-weight: 700; text-transform: uppercase;
        font-size: clamp(28px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.01em; }
      .capture-sub { margin-top: 16px; font-family: var(--sans); font-size: clamp(14px, 1.1vw, 16px); opacity: .84; }
      .gold-pill { display: inline-flex; align-items: center; gap: 14px; margin-top: 34px;
        font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
        color: var(--navy); background: var(--gold); border: none; border-radius: 999px; padding: 15px 30px; cursor: pointer;
        transition: transform .35s var(--ease-reveal), box-shadow .35s ease; }
      .gold-pill svg { width: 14px; height: 14px; transition: transform .35s var(--ease-reveal); }
      .gold-pill:hover, .gold-pill:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(176,141,76,.4); }
      .gold-pill:hover svg, .gold-pill:focus-visible svg { transform: translate(2px,-2px); }
    
      /* ================= Amenity overlay (smooth, clean) ================= */
      .amx { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 24px;
        background: rgba(45,20,17,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
        visibility: hidden; transition: background .5s var(--ease-reveal), backdrop-filter .5s var(--ease-reveal), visibility 0s .5s; }
      .amx.open { background: rgba(45,20,17,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        visibility: visible; transition: background .5s var(--ease-reveal), backdrop-filter .5s var(--ease-reveal); }
      .amx-card { position: relative; width: min(1040px, 100%); max-height: 88vh; background: var(--paper); color: var(--navy);
        border-radius: 6px; overflow: hidden; display: grid; grid-template-columns: 1.12fr .88fr;
        transform: scale(.94) translateY(14px); opacity: 0;
        transition: transform .55s var(--ease-reveal), opacity .45s ease; }
      .amx.open .amx-card { transform: none; opacity: 1; }
      .amx-figure { position: relative; overflow: hidden; background: var(--navy); min-height: 420px; }
      .amx-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s ease; }
      .amx-figure img.swap { opacity: 0; }
      .amx-count { position: absolute; left: 22px; bottom: 18px; color: var(--paper); font-family: var(--sans);
        font-size: 12px; letter-spacing: .12em; opacity: .85; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
      .amx-body { padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; }
      .amx-eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
      .amx-title { font-family: var(--sans); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; margin-top: 14px; }
      .amx-meta { margin-top: 12px; font-family: var(--sans); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: rgba(45,20,17,.55); }
      .amx-desc { margin-top: 22px; font-family: var(--sans); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; color: rgba(45,20,17,.85); }
      .amx-actions { margin-top: auto; padding-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
      .amx-req { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
        color: var(--navy); background: none; border: none; cursor: pointer; display: inline-flex; gap: 12px; align-items: center; }
      .amx-req .ring { width: 40px; height: 40px; border: 1px solid rgba(45,20,17,.35); border-radius: 999px; display: grid; place-items: center; color: var(--navy); transition: background .35s, border-color .35s, color .35s; }
      .amx-req .ring svg { width: 14px; height: 14px; transition: transform .35s var(--ease-reveal); }
      .amx-req:hover .ring { background: var(--navy); border-color: var(--navy); color: var(--paper); }
      .amx-req:hover .ring svg { transform: translate(2px,-2px); }
      .amx-arrows { display: flex; gap: 10px; }
      .amx-arrows button { width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(45,20,17,.25);
        background: none; cursor: pointer; display: grid; place-items: center; color: var(--navy); transition: background .3s, border-color .3s, color .3s; }
      .amx-arrows button:hover, .amx-arrows button:focus-visible { background: var(--navy); border-color: var(--navy); color: var(--paper); }
      .amx-close { position: absolute; top: 16px; right: 18px; z-index: 3; width: 40px; height: 40px; border-radius: 999px;
        border: none; background: rgba(45,20,17,.5); color: var(--paper); font-size: 20px; line-height: 1; cursor: pointer;
        display: grid; place-items: center; transition: background .3s; }
      .amx-close:hover, .amx-close:focus-visible { background: var(--navy); }
      @media (max-width: 780px) {
        .amx-card { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
        .amx-figure { min-height: 38vh; }
        .scene-title { font-size: clamp(32px, 8.6vw, 54px); }
        .summit-rail { display: none; }
        .summit-controls { gap: 16px; }
      }
    
      @media (prefers-reduced-motion: reduce) {
        .hero-media { transform: none; }
        header, .hero-copy { opacity: 1; transform: none; animation: none; }
        .fill .w { opacity: 1 !important; }
        [data-reveal] { opacity: 1; transform: none; transition: none; }
        .amx-card { transition: opacity .3s ease; }
      }
      @media (max-width: 860px) {
        .hdr-right .lang, .btn-find { display: none; }   /* mobile: keep logo + Request Call */
        .logo-img { height: 46px; } header.is-stuck .logo-img { height: 36px; }
        .hero-copy { bottom: 80px; max-width: 92vw; }
        h1 { font-size: clamp(30px, 8.4vw, 52px); }
    
        /* §3 Summit → native horizontal swipe carousel (no scroll-hijack) */
        .summit-stage { height: 100dvh; min-height: 0; clip-path: none !important; }
        .summit-track { position: relative; inset: auto; display: flex; height: 100%; width: 100%;
          overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
        .summit-track::-webkit-scrollbar { display: none; }
        .scene { position: relative; inset: auto; flex: 0 0 100%; width: 100%; height: 100%;
          opacity: 1 !important; visibility: visible !important; transform: none !important;
          scroll-snap-align: center; scroll-snap-stop: always; }
        .scene-media img { transform: none !important; }
        .summit-copy, .summit-rail, .horizon { display: none; }
        .scene-copy { display: block; position: absolute; left: 22px; right: 22px; z-index: 3; color: var(--paper);
          bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
        .scene-t { font-family: var(--sans); font-weight: 700; text-transform: uppercase; margin: 0;
          font-size: clamp(30px, 8.6vw, 46px); line-height: 1.05; letter-spacing: -.01em; }
        .scene-c { font-family: var(--sans); font-weight: 400; margin: 14px 0 0; font-size: 12px;
          letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
        .scene-explore { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; background: none;
          border: none; cursor: pointer; padding: 0; font-family: var(--sans); font-size: 12px; font-weight: 500;
          letter-spacing: .16em; text-transform: uppercase; color: var(--paper); }
        .scene-explore .ring { width: 40px; height: 40px; border: 1px solid rgba(244,238,228,.42); border-radius: 999px; display: grid; place-items: center; }
        .scene-explore .ring svg { width: 14px; height: 14px; }
        .summit-bar { display: flex; align-items: center; gap: 14px; position: absolute; z-index: 4; left: 22px;
          bottom: calc(env(safe-area-inset-bottom, 0px) + 48px); color: var(--paper); }
        .summit-bar-idx { font-family: var(--sans); font-size: 11px; letter-spacing: .12em; opacity: .85; }
        .summit-bar-track { position: relative; width: 132px; height: 2px; background: rgba(244,238,228,.22); border-radius: 2px; overflow: hidden; }
        .summit-bar-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(.333); background: var(--paper); }
      }
    
    /* ===== §4 THE VIEW — editorial (OMAI style): the view + daily-experience services ===== */
    .view { position: relative; background: #F6F1E9; color: var(--navy);
      padding: clamp(90px, 15vh, 190px) clamp(20px, 3vw, 56px); overflow: hidden; }
    .view-inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;
      column-gap: clamp(40px, 6vw, 100px); align-items: center; }
    .view-inner + .view-inner { margin-top: clamp(96px, 17vh, 210px); }
    .view-statement { max-width: 42ch; }
    .view-statement h2 { font-family: var(--serif); font-weight: 500;
      font-size: clamp(44px, 5.6vw, 90px); line-height: 1.0; letter-spacing: -.006em; margin: 0; max-width: 11ch; }
    .view-statement h2 em { font-style: normal; }
    .view-note { font-family: var(--serif); font-weight: 300;
      font-size: clamp(21px, 1.9vw, 29px); line-height: 1.42; margin: clamp(26px,4vh,40px) 0 0;
      color: rgba(45,20,17,.88); max-width: 40ch; }
    .view-link { display: inline-block; margin-top: clamp(24px, 3.5vh, 38px); font-family: var(--sans);
      font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
      background: none; border: none; padding: 0 0 7px; cursor: pointer; border-bottom: 1px solid rgba(45,20,17,.38);
      transition: border-color .35s ease, letter-spacing .35s var(--ease-reveal); }
    .view-link:hover, .view-link:focus-visible { border-color: var(--navy); letter-spacing: .26em; }
    .view-fig { position: relative; overflow: hidden; background: var(--navy); aspect-ratio: 3 / 4; }
    .view-fig img { position: absolute; inset: 0; width: 100%; height: 120%; top: -10%;
      object-fit: cover; display: block; will-change: transform; }
    .services-copy h3 { font-family: var(--serif); font-weight: 500;
      font-size: clamp(32px, 3.6vw, 54px); line-height: 1.05; letter-spacing: -.005em; margin: 0; max-width: 15ch; }
    .services-copy > p { font-family: var(--sans); font-weight: 300; font-size: clamp(15px, 1.15vw, 17px);
      line-height: 1.55; margin: clamp(20px,3vh,30px) 0 0; color: rgba(45,20,17,.72); max-width: 42ch; }
    .services-list { list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; }
    .services-list li { display: flex; align-items: baseline; gap: 20px; padding: 15px 0;
      border-top: 1px solid rgba(45,20,17,.14); font-family: var(--sans); font-weight: 400;
      font-size: clamp(15px, 1.1vw, 17px); color: var(--navy); }
    .services-list li:last-child { border-bottom: 1px solid rgba(45,20,17,.14); }
    .services-list .n { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--gold); min-width: 20px; }
    @media (max-width: 860px) {
      .view { padding: clamp(64px, 11vh, 110px) 22px; }
      .view-inner { display: flex; flex-direction: column; gap: clamp(28px, 6vh, 46px); }
      .view-inner + .view-inner { margin-top: clamp(64px, 12vh, 110px); }
      .view-statement { max-width: none; order: 1; } .view-statement h2 { font-size: clamp(38px, 11.5vw, 60px); max-width: none; }
      .view-note { max-width: none; font-size: clamp(20px, 5.4vw, 26px); }
      .view-a .view-fig { order: 2; }
      .view-fig { aspect-ratio: 4 / 5; }
      .services-copy { order: 1; } .services-photo { order: 2; }
      .services-copy h3 { font-size: clamp(30px, 9vw, 44px); max-width: none; }
      .services-copy > p { max-width: none; }
      .view-fig img { height: 100%; top: 0; transform: none !important; }
    }
    @media (prefers-reduced-motion: reduce) { .view-fig img { height: 100%; top: 0; transform: none !important; } }
    /* ===== §5 THE RESIDENCES — click tabs (no scroll), thin-divider 4-column selector ===== */
    .residences { position: relative; background: #F6F1E9; color: var(--navy);
      padding: clamp(90px, 15vh, 190px) clamp(20px, 3vw, 56px); overflow: hidden; }
    .res-inner { max-width: 1440px; margin: 0 auto; }
    .res-display { display: grid; grid-template-columns: 1.02fr .98fr; column-gap: clamp(40px, 6vw, 96px); align-items: center; }
    .res-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); }
    .res-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
      opacity: 1; transition: opacity .5s var(--ease-reveal); }
    .res-image img.is-swap { opacity: 0; }
    .res-name { font-family: var(--serif); font-weight: 500;
      font-size: clamp(34px, 4.2vw, 62px); line-height: 1.02; letter-spacing: -.008em; margin: 0; }
    .res-specs { margin: clamp(26px, 4vh, 40px) 0 0; }
    .res-row { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-top: 1px solid rgba(45,20,17,.14); }
    .res-row:last-child { border-bottom: 1px solid rgba(45,20,17,.14); }
    .res-row dt { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(45,20,17,.55); margin: 0; }
    .res-row dd { font-family: var(--sans); font-size: clamp(14px, 1.05vw, 16px); color: var(--navy); margin: 0; text-align: right; }
    .res-act { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(28px, 4vh, 42px); }
    .res-price { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; color: rgba(45,20,17,.6); }
    .res-price b { font-weight: 500; color: var(--navy); }
    .res-cta { display: inline-flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: 12px; font-weight: 500;
      letter-spacing: .16em; text-transform: uppercase; color: var(--paper); background: var(--navy); border: none; border-radius: 999px;
      padding: 14px 26px; cursor: pointer; transition: background .35s var(--ease-reveal), color .35s var(--ease-reveal); }
    .res-cta:hover, .res-cta:focus-visible { background: var(--gold); color: var(--navy); }
    .res-cta svg { width: 13px; height: 13px; }
    /* thin-divider 4-column selector */
    .res-cols { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(60px, 10vh, 120px); }
    .res-col { position: relative; display: flex; flex-direction: column; gap: 7px; text-align: left;
      padding: clamp(22px, 3vh, 30px) clamp(14px, 1.6vw, 26px) 0; background: none; cursor: pointer; border: none;
      border-top: 1px solid rgba(45,20,17,.16); }
    .res-col + .res-col { border-left: 1px solid rgba(45,20,17,.08); }
    .res-col::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--navy);
      transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-reveal); }
    .res-tab.is-on::before { transform: scaleX(1); }
    .res-col-title { font-family: var(--sans); font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; color: var(--navy); transition: color .3s ease; }
    .res-col-sub { font-family: var(--sans); font-size: 12.5px; font-weight: 300; letter-spacing: .01em; color: rgba(45,20,17,.58); }
    .res-tab:not(.is-on) .res-col-title { color: rgba(45,20,17,.5); }
    .res-tab:hover .res-col-title { color: var(--navy); }
    .res-find::before { background: var(--gold); transform: scaleX(1); }
    .res-find .res-col-sub { color: var(--gold); }
    .res-find:hover .res-col-title { color: var(--gold); }
    @media (max-width: 860px) {
      .residences { padding: clamp(64px, 11vh, 110px) 22px; }
      .res-display { display: flex; flex-direction: column; gap: clamp(26px, 5vh, 40px); }
      .res-image { aspect-ratio: 4 / 3; width: 100%; }
      .res-name { font-size: clamp(30px, 9vw, 44px); }
      .res-cols { grid-template-columns: repeat(2, 1fr); margin-top: clamp(44px, 8vh, 70px); }
      .res-col { padding: 18px 14px 0; }
      .res-col:nth-child(odd) { border-left: none; }
      .res-col-title { font-size: clamp(16px, 4.6vw, 20px); }
    }
    
    /* ===== §6 LOCATION & INVESTMENT — "The Coordinates": stylised Batumi coastline map + investor case (dark) ===== */
    .locate { position: relative; background: var(--navy); color: var(--paper);
      padding: clamp(96px, 16vh, 200px) clamp(20px, 3vw, 56px); overflow: hidden; }
    .locate::before { content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(115% 80% at 82% 6%, rgba(176,141,76,.12), transparent 55%); }
    .locate-inner { position: relative; max-width: 1440px; margin: 0 auto; }
    .locate-top { display: grid; grid-template-columns: 1.05fr .95fr; column-gap: clamp(40px, 6vw, 100px); align-items: center; }
    .locate-lead h2 { font-family: var(--sans); font-weight: 700; text-transform: uppercase;
      font-size: clamp(34px, 4.7vw, 70px); line-height: 1.0; letter-spacing: -.01em; margin: 0; }
    .locate-lead p { margin: clamp(20px, 3vh, 30px) 0 0; max-width: 44ch;
      font-family: var(--sans); font-weight: 300; font-size: clamp(15px, 1.15vw, 18px);
      line-height: 1.66; color: rgba(244,238,228,.72); }
    .locate-link { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px, 4vh, 42px);
      font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
      color: var(--paper); background: none; border: none; cursor: pointer; padding: 0; }
    .locate-link .u { padding-bottom: 3px; border-bottom: 1px solid rgba(176,141,76,.55); transition: border-color .3s ease; }
    .locate-link:hover .u, .locate-link:focus-visible .u { border-color: var(--gold); }
    .locate-link svg { width: 13px; height: 13px; transition: transform .35s var(--ease-reveal); }
    .locate-link:hover svg { transform: translate(2px,-2px); }
    /* stylised map */
    .locate-map { position: relative; width: 100%; }
    .locate-map svg { width: 100%; height: auto; display: block; overflow: visible; }
    .mp-sea { fill: rgba(244,238,228,.03); }
    .mp-wave { fill: none; stroke: rgba(244,238,228,.07); stroke-width: 1; }
    .mp-sea-label { font-family: var(--sans); font-size: 12px; letter-spacing: .38em; fill: rgba(176,141,76,.42); }
    .mp-coast { fill: none; stroke: rgba(176,141,76,.9); stroke-width: 1.7; stroke-linecap: round;
      stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.7s var(--ease-reveal); }
    .locate-map.in .mp-coast { stroke-dashoffset: 0; }
    .mp-blvd { fill: none; stroke: rgba(244,238,228,.3); stroke-width: 1; stroke-dasharray: 2 4.5; }
    .mp-link { stroke: rgba(244,238,228,.32); stroke-width: 1; stroke-dasharray: 3 4; }
    .mp-dot { fill: var(--gold); }
    .mp-poi-label { font-family: var(--sans); font-size: 12.5px; font-weight: 400; fill: rgba(244,238,228,.92); }
    .mp-poi-dist { font-family: var(--sans); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; fill: rgba(176,141,76,.95); }
    .mp-opus-pulse { fill: none; stroke: var(--gold); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
    .mp-opus-ring { fill: none; stroke: var(--gold); stroke-width: 1.6; }
    .mp-opus-core { fill: var(--gold); }
    .mp-opus-label { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .05em; fill: var(--paper); }
    .mp-opus-sub { font-family: var(--sans); font-size: 10.5px; letter-spacing: .06em; fill: rgba(176,141,76,.92); }
    .mp-compass { font-family: var(--sans); font-size: 11px; letter-spacing: .1em; fill: rgba(244,238,228,.5); }
    .mp-compass-tick { stroke: rgba(244,238,228,.35); stroke-width: 1; }
    /* staged draw-in as the map scrolls into view */
    .locate-map .mp-blvd, .locate-map .mp-links, .locate-map .mp-sea-label,
    .locate-map .mp-pois > g, .locate-map .mp-opus, .locate-map .mp-compass-g {
      opacity: 0; transition: opacity .7s var(--ease-reveal), transform .7s var(--ease-reveal); }
    .locate-map.in .mp-sea-label { opacity: 1; transition-delay: .2s; }
    .locate-map.in .mp-compass-g { opacity: 1; transition-delay: .2s; }
    .locate-map.in .mp-blvd { opacity: 1; transition-delay: .55s; }
    .locate-map.in .mp-links { opacity: 1; transition-delay: .8s; }
    .locate-map .mp-pois > g { transform: translateY(8px); }
    .locate-map.in .mp-pois > g { opacity: 1; transform: none; }
    .locate-map.in .mp-pois > g:nth-child(1) { transition-delay: 1.0s; }
    .locate-map.in .mp-pois > g:nth-child(2) { transition-delay: 1.12s; }
    .locate-map.in .mp-pois > g:nth-child(3) { transition-delay: 1.24s; }
    .locate-map.in .mp-pois > g:nth-child(4) { transition-delay: 1.36s; }
    .locate-map.in .mp-opus { opacity: 1; transition-delay: .45s; }
    @keyframes opusPulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3); opacity: 0; } }
    .locate-map.in .mp-opus-pulse { animation: opusPulse 2.9s var(--ease-reveal) 1.4s infinite; }
    /* investment case — figure band */
    .locate-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(64px, 11vh, 130px);
      border-top: 1px solid rgba(244,238,228,.16); }
    .stat { padding: clamp(28px, 4vh, 42px) clamp(14px, 1.7vw, 30px) 0; }
    .stat + .stat { border-left: 1px solid rgba(244,238,228,.1); }
    .stat-val { font-family: var(--sans); font-weight: 300; font-size: clamp(30px, 3.5vw, 50px); line-height: 1;
      letter-spacing: -.015em; color: var(--paper); }
    .stat-note { display: block; margin-top: 14px; font-family: var(--sans); font-size: 11px; font-weight: 500;
      letter-spacing: .14em; text-transform: uppercase; color: rgba(176,141,76,.9); }
    .stat-label { margin-top: 8px; font-family: var(--sans); font-size: 13.5px; font-weight: 300;
      line-height: 1.5; color: rgba(244,238,228,.66); }
    @media (max-width: 860px) {
      .locate { padding: clamp(64px, 11vh, 112px) 22px; }
      .locate-top { grid-template-columns: 1fr; gap: clamp(34px, 6vh, 52px); }
      .locate-lead { order: 1; }
      .locate-map { order: 2; max-width: 440px; margin: 4px auto 0; }
      .locate-lead h2 { font-size: clamp(30px, 8.6vw, 46px); }
      .locate-stats { grid-template-columns: repeat(2, 1fr); margin-top: clamp(46px, 8vh, 74px); }
      .stat { padding: 22px 16px 24px; }
      .stat:nth-child(odd) { border-left: none; }
      .stat:nth-child(n+3) { border-top: 1px solid rgba(244,238,228,.1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .locate-map .mp-coast { stroke-dashoffset: 0 !important; }
      .locate-map .mp-blvd, .locate-map .mp-links, .locate-map .mp-sea-label,
      .locate-map .mp-pois > g, .locate-map .mp-opus, .locate-map .mp-compass-g {
        opacity: 1 !important; transform: none !important; transition: none !important; }
      .locate-map .mp-opus-pulse { animation: none !important; }
    }
    
    /* ===== FOOTER ===== */
    .foot { position: relative; background: var(--black); color: var(--paper); overflow: hidden;
      padding: clamp(72px,9vh,104px) clamp(20px, 3vw, 56px) calc(clamp(40px,6vh,72px) + env(safe-area-inset-bottom)); }
    .foot[data-reveal] { opacity: 1; transform: none; transition: none; }   /* container stays put; inner zones animate */
    .foot-inner { max-width: 1440px; margin: 0 auto; }
    /* inner zones reveal — keyed off .foot.in */
    .foot-brand, .foot-grid, .foot-legal { opacity: 0; transform: translateY(24px);
      transition: opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal); }
    .foot.in .foot-brand { opacity: 1; transform: none; transition-delay: 0.05s; }
    .foot.in .foot-grid  { opacity: 1; transform: none; transition-delay: 0.15s; }
    .foot.in .foot-legal { opacity: 1; transform: none; transition-delay: 0.25s; }
    /* ZONE 2 — brand + positioning */
    .foot-brand { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: clamp(24px,4vw,56px); }
    .foot-wordmark { width: clamp(120px,14vw,152px); height: auto; display: block; filter: brightness(0) invert(1); }
    .foot-lines { max-width: 46ch; }
    .foot-emotional { font-family: var(--sans); font-weight: 400; font-size: clamp(16px,1.5vw,19px); line-height: 1.35; color: rgba(244,238,228,.92); margin: 0; }
    .foot-positioning { font-family: var(--sans); font-weight: 300; font-size: clamp(14px,1.15vw,16px); line-height: 1.5; color: rgba(244,238,228,.6); margin: 6px 0 0; }
    /* ZONE 3 — main grid */
    .foot-grid { margin-top: clamp(48px,8vh,88px); display: grid; grid-template-columns: repeat(12,1fr); column-gap: clamp(20px,2.4vw,34px); row-gap: 40px; }
    .foot-col-cta { grid-column: span 4; }
    .foot-col-nav { grid-column: span 3; }
    .foot-col-contact { grid-column: span 5; }
    .foot-label { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(176,141,76,.92); margin: 0 0 16px; }
    .foot-cta { display: inline-block; font-family: var(--sans); font-weight: 400; font-size: clamp(26px,3vw,40px); line-height: 1.06; letter-spacing: -.01em;
      color: var(--paper); background: none; border: none; padding: 0; cursor: pointer; position: relative; text-align: left; }
    .foot-cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-reveal); }
    .foot-cta:hover::after, .foot-cta:focus-visible::after { transform: scaleX(1); }
    .foot-cta-sub { font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.5; color: rgba(244,238,228,.6); margin: 18px 0 0; max-width: 34ch; }
    .foot-mail { display: inline-block; font-family: var(--sans); font-size: 14px; color: rgba(244,238,228,.85); background: none; border: none; padding: 0 0 2px; cursor: pointer; position: relative; text-align: left; transition: color .25s ease; }
    .foot-mail::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: transparent; transition: background .3s ease; }
    .foot-mail:hover, .foot-mail:focus-visible { color: var(--gold); }
    .foot-mail:hover::after, .foot-mail:focus-visible::after { background: var(--gold); }
    .foot-cta-mail { margin-top: 16px; font-size: 15px; }
    .foot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
    .foot-list a, .foot-contact a { font-family: var(--sans); font-weight: 300; color: rgba(244,238,228,.85); text-decoration: none; position: relative; width: fit-content; transition: color .25s ease; }
    .foot-list a { font-size: 15px; }
    .foot-list a::after, .foot-contact a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-reveal); }
    .foot-list a:hover, .foot-list a:focus-visible, .foot-contact a:hover, .foot-contact a:focus-visible { color: var(--gold); }
    .foot-list a:hover::after, .foot-list a:focus-visible::after, .foot-contact a:hover::after, .foot-contact a:focus-visible::after { transform: scaleX(1); }
    .foot-contact { font-family: var(--sans); font-weight: 300; font-size: 15px; line-height: 1.55; color: rgba(244,238,228,.85); }
    .foot-contact .addr { margin: 0; }
    .foot-contact .indic { display: block; margin-top: 4px; font-size: 11.5px; letter-spacing: .06em; color: rgba(244,238,228,.5); }
    .foot-contact .row { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
    .foot-contact a.tel { font-variant-numeric: tabular-nums; }
    .foot-social { margin-top: 8px; display: flex; gap: 22px; }
    /* ZONE 4 — legal baseline */
    .foot-legal { margin-top: clamp(56px,9vh,96px); padding-top: 22px; border-top: 1px solid rgba(244,238,228,.12); display: flex; justify-content: space-between; align-items: center; gap: 20px 28px; flex-wrap: wrap; }
    .foot-legal-left { font-family: var(--sans); font-size: 12px; font-weight: 300; color: rgba(244,238,228,.55); display: flex; flex-wrap: wrap; align-items: center; }
    .foot-legal-left a { color: rgba(244,238,228,.55); text-decoration: none; transition: color .25s ease; }
    .foot-legal-left a:hover, .foot-legal-left a:focus-visible { color: rgba(244,238,228,.9); }
    .foot-legal-left .sep { margin: 0 10px; color: rgba(244,238,228,.3); }
    .foot-legal-right { display: flex; align-items: center; gap: 24px; }
    .foot-dev { font-family: var(--sans); font-size: 12px; font-weight: 300; color: rgba(244,238,228,.45); }
    .foot a:focus-visible, .foot button:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; border-radius: 1px; }
    @media (max-width: 860px) {
      .foot { padding-top: clamp(56px,8vh,84px); }
      .foot-brand { grid-template-columns: 1fr; align-items: start; row-gap: 18px; }
      .foot-grid { grid-template-columns: 1fr; row-gap: 34px; }
      .foot-col-cta, .foot-col-nav, .foot-col-contact { grid-column: 1 / -1; }
      .foot-cta { font-size: clamp(26px,7.5vw,34px); }
      .foot-legal { flex-direction: column; align-items: flex-start; gap: 16px; }
      .foot-legal-right { flex-direction: column; align-items: flex-start; gap: 14px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .foot-brand, .foot-grid, .foot-legal { opacity: 1 !important; transform: none !important; transition: none !important; }
    }
      /* ============================================================
         MEGA MENU — Find Apartment (hover, hero)
         ============================================================ */
      .mega-scrim { position: fixed; inset: 0; z-index: 38; background: rgba(45,20,17,.62);
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
        opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-reveal), visibility 0s .5s; }
      body.menu-open .mega-scrim { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-reveal); }
    
      .mega { position: fixed; top: 0; left: 0; right: 0; z-index: 39; background: #EDE8E2; color: var(--navy);
        padding-top: clamp(84px, 11vh, 116px); padding-bottom: clamp(30px, 4vh, 48px);
        transform: translateY(-101%); transition: transform .62s cubic-bezier(.7,0,.16,1); }
      body.menu-open .mega { transform: translateY(0); box-shadow: 0 40px 70px -34px rgba(45,20,17,.45); }
      .mega-inner { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px);
        display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 56px); align-items: start; }
      /* content settles in a touch after the panel */
      .mega-left, .mega-right { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-reveal) .12s, transform .5s var(--ease-reveal) .12s; }
      body.menu-open .mega-left, body.menu-open .mega-right { opacity: 1; transform: none; }
    
      .mega-left { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
      .mv-card { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--navy);
        text-decoration: none; color: var(--paper); }
      .mv-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transition: transform .9s var(--ease-reveal); }
      .mv-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.02) 42%, rgba(0,0,0,.5)); }
      .mv-card:hover img { transform: scale(1.05); }
      .mv-label { position: absolute; top: 18px; left: 20px; z-index: 1; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
      .mv-go { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 15.5px; }
      .mv-go .ring { width: 42px; height: 42px; border: 1px solid rgba(244,238,228,.5); border-radius: 999px; display: grid; place-items: center; color: var(--paper); transition: background .35s var(--ease-reveal), color .35s, border-color .35s; }
      .mv-go .ring svg { width: 14px; height: 14px; }
      .mv-card:hover .mv-go .ring { background: var(--paper); color: var(--navy); border-color: var(--paper); }
    
      .mega-right { display: flex; flex-direction: column; }
      .search-head { font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(45,20,17,.5); margin-bottom: clamp(16px, 2.2vh, 26px); }
      .filters { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vh, 28px) clamp(28px, 3vw, 50px); }
      .filter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
      .filter-label { font-size: 14.5px; color: var(--navy); }
      .filter-val { font-size: 13px; color: rgba(45,20,17,.62); font-variant-numeric: tabular-nums; white-space: nowrap; }
      .range { position: relative; height: 20px; }
      .range-track { position: absolute; top: 50%; left: 1px; right: 1px; height: 2px; transform: translateY(-50%); background: rgba(45,20,17,.16); border-radius: 2px; }
      .range-fill { position: absolute; height: 100%; background: var(--navy); border-radius: 2px; }
      .range input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 20px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
      .range input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 15px; height: 15px; border-radius: 999px; background: #EDE8E2; border: 1.5px solid var(--navy); cursor: grab; box-shadow: 0 1px 3px rgba(45,20,17,.3); transition: transform .15s ease; }
      .range input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
      .range input[type=range]::-moz-range-thumb { pointer-events: auto; width: 15px; height: 15px; border-radius: 999px; background: #EDE8E2; border: 1.5px solid var(--navy); cursor: grab; }
      .search-actions { margin-top: clamp(26px, 3.6vh, 42px); display: flex; align-items: center; gap: 20px; }
      .search-btn { display: inline-flex; align-items: center; gap: 13px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--paper);
        background: var(--navy); border: none; border-radius: 999px; padding: 14px 28px; cursor: pointer; text-decoration: none; transition: background .35s var(--ease-reveal), color .35s; }
      .search-btn:hover { background: var(--gold); color: var(--navy); }
      .search-reset { background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 13.5px; color: rgba(45,20,17,.55); text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }
      .search-reset:hover { color: var(--navy); }
    
      /* smart search — count, bed pills, histograms */
      .sr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(16px, 2.2vh, 24px); }
      .sr-beds-row { display: flex; align-items: center; gap: 20px; margin-bottom: clamp(20px, 2.6vh, 30px); flex-wrap: wrap; }
      .sr-flabel { font-size: 14.5px; color: var(--navy); }
      .sr-beds { display: inline-flex; gap: 7px; flex-wrap: wrap; }
      .sr-beds button { min-width: 42px; font-family: var(--sans); font-size: 14px; color: var(--navy); background: none;
        border: 1px solid rgba(45,20,17,.2); border-radius: 999px; padding: 8px 13px; cursor: pointer;
        transition: background .25s var(--ease-reveal), color .25s, border-color .25s; }
      .sr-beds button:hover { border-color: rgba(45,20,17,.5); }
      .sr-beds button.on { background: var(--navy); color: var(--paper); border-color: var(--navy); }
    
      /* header fills #EDE8E2 (light) whenever the menu is open, regardless of section theme */
      body.menu-open header { background: #EDE8E2; color: var(--navy); }
      body.menu-open header::before { opacity: 0; }
      body.menu-open header .logo-img { filter: none; }
      body.menu-open header .btn-find { background: var(--navy); color: var(--paper); border-color: var(--navy); }
      body.menu-open header .request { border-color: rgba(45,20,17,.28); }
    
      @media (max-width: 900px) {
        .mega-inner { grid-template-columns: 1fr; }
        .filters { grid-template-columns: 1fr; }
        .mv-card { aspect-ratio: 16 / 9; }
      }
      @media (prefers-reduced-motion: reduce) {
        .mega { transition: none; } .mega-left, .mega-right { transition: none; }
      }
      /* ===== §5 · Compose your brief — apartment finder (pill switchers) + parallax towers · DARK ===== */
      .fnd{
        position:relative; background:var(--navy); color:var(--paper);
        font-family:var(--sans); overflow:hidden;
        padding:clamp(72px,10vw,140px) 0 0;   /* image runs straight into the footer — no closing gap */
      }
      .fnd-grid{
        width:min(1540px,100%); margin-inline:auto;
        padding-inline:clamp(20px, 3vw, 56px);
        display:grid; grid-template-columns:1.05fr 1fr;
        align-items:stretch; gap:clamp(40px,5vw,84px);
      }
      .fnd-form{ max-width:600px; align-self:center; padding-bottom:clamp(72px,10vw,140px); }   /* the section's own bottom padding is 0 so the render meets the footer — the form keeps its breathing room */
      .fnd-kicker{
        font-size:12px; letter-spacing:.26em; text-transform:uppercase;
        color:var(--gold); font-weight:600; margin:0 0 20px;
      }
      .fnd-title{
        font-family:var(--serif); font-weight:500;
        font-size:clamp(46px,6vw,78px); line-height:1.0; letter-spacing:0;
        margin:0 0 clamp(34px,4vw,52px); color:var(--paper);
      }
      .fnd-title em{ font-style:normal; color:inherit; }
      .fnd-group{ margin:0 0 clamp(26px,3vw,34px); border:0; padding:0; }
      .fnd-glabel-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 13px; }
      .fnd-glabel{
        font-size:12px; letter-spacing:.16em; text-transform:uppercase;
        color:rgba(244,238,228,.6); font-weight:600;
      }
      .fnd-hint{ font-size:11px; letter-spacing:.03em; color:rgba(244,238,228,.4); font-weight:400; white-space:nowrap; }
      .fnd-pills{ display:flex; flex-wrap:wrap; gap:9px; }
      .pill{
        font-family:var(--sans); font-size:14px; font-weight:500; line-height:1;
        color:var(--paper); background:transparent;
        border:1px solid rgba(244,238,228,.28);
        border-radius:999px; padding:11px 18px; cursor:pointer;
        letter-spacing:.005em; white-space:nowrap;
        transition:color .4s var(--ease-reveal),background-color .4s var(--ease-reveal),border-color .4s var(--ease-reveal);
      }
      .pill:hover{ border-color:var(--gold); color:var(--gold-lt,#d6b266); }
      .pill.is-on{ background:var(--gold); border-color:var(--gold); color:var(--navy); font-weight:600; }
      .pill:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--gold); }
      .fnd-brief-row{
        display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
        margin:clamp(30px,4vw,44px) 0 26px; padding-top:24px;
        border-top:1px solid rgba(244,238,228,.16);
      }
      .fnd-brief{
        flex:1; margin:0;
        font-family:var(--serif); font-weight:500;
        font-size:clamp(21px,2vw,27px); line-height:1.4;
        color:var(--paper); min-height:5.6em;   /* reserve ~4 lines so composing a brief never changes the column (and image) height */
      }
      .fnd-brief[data-empty="1"]{ font-weight:400; font-style:italic; color:rgba(244,238,228,.55); }
      .fnd-brief b{ color:var(--gold-lt,#d6b266); font-weight:600; }
      .fnd-clear{
        flex:0 0 auto; align-self:flex-start; background:none; border:0; cursor:pointer;
        font-family:var(--sans); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
        color:rgba(244,238,228,.5); padding:4px 0; margin-top:4px;
        transition:color .3s var(--ease-reveal);
      }
      .fnd-clear:hover{ color:var(--paper); }
      .fnd-clear:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--navy),0 0 0 3px var(--gold); border-radius:2px; }
      .fnd-clear[hidden]{ display:none; }
      .fnd-cta{
        font-family:var(--sans); font-size:14px; font-weight:600;
        letter-spacing:.04em; text-transform:uppercase;
        color:var(--navy); background:var(--paper);
        border:1px solid var(--paper); border-radius:999px;
        padding:16px 30px; cursor:pointer; display:inline-flex; align-items:center; gap:12px;
        transition:background-color .45s var(--ease-reveal),color .45s var(--ease-reveal),border-color .45s var(--ease-reveal);
      }
      .fnd-cta:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
      .fnd-cta:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--gold); }
      .fnd-cta .fnd-arrow{ width:22px; height:22px; border-radius:50%; border:1px solid currentColor; display:grid; place-items:center; font-size:12px; line-height:1; }
      .fnd-visual{ position:relative; }
      .fnd-frame{
        position:absolute; top:0; bottom:0; left:0; margin:0;
        width:calc(100% + ((100vw - min(1540px,100%)) / 2) + clamp(20px, 3vw, 56px));
        overflow:hidden; border-radius:2px; background:#0e0605;
      }
      .fnd-parallax{
        position:absolute; top:-10%; left:0; width:100%; height:120%;
        object-fit:cover; object-position:50% 50%; will-change:transform;
      }
      .fnd-frame::after{ content:''; position:absolute; inset:0; pointer-events:none;
        background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 24%),linear-gradient(180deg,transparent 58%,rgba(14,6,5,.5)); }
      .fnd-cap{ position:absolute; left:clamp(20px,2vw,30px); bottom:clamp(18px,2vw,26px); z-index:2; font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:rgba(244,238,228,.85); }
      @media (max-width:980px){
        .fnd-grid{ grid-template-columns:1fr; gap:clamp(34px,6vw,52px); }
        .fnd-form{ max-width:none; align-self:auto; padding-bottom:0; }   /* stacked: the image follows, so no gap needed here */
        .fnd-visual{ order:2; height:46vh; min-height:300px; }
        .fnd-frame{ position:relative; width:100vw; margin-left:calc(50% - 50vw); height:100%; border-radius:0; }
        .fnd-frame::after{ background:linear-gradient(180deg,transparent 55%,rgba(14,6,5,.5)); }
      }
      @media (max-width:560px){
        .fnd-cta{ width:100%; justify-content:center; }
        .fnd-pills{ gap:8px; }
        .pill{ padding:10px 15px; font-size:13px; }
        .fnd-glabel-row .fnd-hint{ display:none; }
      }
      @media (prefers-reduced-motion:reduce){
        .fnd-parallax{ top:0; height:100%; transform:none !important; }
        .pill,.fnd-cta{ transition:none; }
      }


.mnu-btn {
    display: none; flex: 0 0 auto; width: 44px; height: 44px; margin-right: -8px;
    align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer; color: currentColor;
    -webkit-tap-highlight-color: transparent;
  }
  /* two wide bars that scissor into the × */
  .mnu-btn i {
    display: block; position: relative; width: 26px; height: 2px; background: currentColor; border-radius: 2px;
    transform: translateY(-5px);
    transition: transform .26s cubic-bezier(.65,0,.35,1);
  }
  .mnu-btn i::after {
    content: ''; position: absolute; left: 0; top: 10px; width: 26px; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .26s cubic-bezier(.65,0,.35,1);
  }
  body.mnu-open .mnu-btn i { transform: translateY(0) rotate(45deg); }
  body.mnu-open .mnu-btn i::after { transform: translateY(-10px) rotate(-90deg); }
  body.mnu-open .mnu-btn { color: #F4EEE4; }
  
  /* while open the header rides ON TOP of the panel: the burger has become the ×,
     so it must stay visible and tappable exactly where it was */
  body.mnu-open header {
    z-index: 130 !important; color: #F4EEE4 !important;
    background: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  body.mnu-open header::before { opacity: 0 !important; }
  body.mnu-open .logo-img { filter: brightness(0) invert(1); }
  body.mnu-open .hdr-left,
  body.mnu-open .hdr-right > *:not(.mnu-btn) { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  
  /* ---------- panel ---------- */
  .mnu {
    position: fixed; inset: 0; z-index: 120;
    background: var(--black, #000); color: var(--paper, #F4EEE4);
    display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: calc(74px + env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom));
    visibility: hidden;
    clip-path: circle(0px at var(--ox, 100%) var(--oy, 34px));
    transition: clip-path .62s cubic-bezier(.65,0,.35,1), visibility 0s linear .62s;
  }
  .mnu.open {
    visibility: visible;
    clip-path: circle(var(--r, 160vmax) at var(--ox, 100%) var(--oy, 34px));
    transition: clip-path .62s cubic-bezier(.65,0,.35,1), visibility 0s;
  }
  .mnu.closing { transition-duration: .42s; }
  
  /* ---------- primary rows ---------- */
  .mnu-nav { list-style: none; margin: clamp(14px, 3vh, 28px) 0 0; padding: 0; }
  .mnu-nav li { border-top: 1px solid rgba(244,238,228,.16); }
  .mnu-nav li:last-child { border-bottom: 1px solid rgba(244,238,228,.16); }
  .mnu-link {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 15px 2px; color: var(--paper, #F4EEE4); text-decoration: none;
    font-family: var(--serif, 'Google Sans', Figtree, sans-serif); font-weight: 500; letter-spacing: -.01em;
    font-size: clamp(26px, 7.4vw, 34px); line-height: 1.06;
  }
  .mnu-link svg { flex: 0 0 auto; width: 17px; height: 17px; opacity: .5; transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
  .mnu-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold, #B08D4C);
    transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22,1,.36,1);
  }
  .mnu-link:active::after, .mnu-link:focus-visible::after { transform: scaleX(1); }
  .mnu-link:active svg, .mnu-link:focus-visible svg { opacity: 1; transform: translate(2px,-2px); }
  .mnu-link[aria-current="page"] { color: var(--gold-lt, #D6B266); }
  .mnu-link[aria-current="page"]::before {
    content: ''; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
    border-radius: 50%; background: var(--gold, #B08D4C);
  }
  
  /* ---------- two featured destinations ---------- */
  .mnu-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: clamp(20px, 3.4vh, 30px); }
  .mnu-card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; text-decoration: none; background: #16100e; }
  .mnu-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .mnu-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 40%, rgba(0,0,0,.78) 100%); }
  .mnu-card span { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 11px; color: var(--paper, #F4EEE4);
    font-size: 13.5px; line-height: 1.25; }
  .mnu-card small { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,238,228,.62); margin-bottom: 5px; }
  
  /* ---------- foot: reach us ---------- */
  .mnu-foot { margin-top: auto; padding-top: clamp(24px, 4vh, 38px); }
  .mnu-lbl { font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,238,228,.5); }
  .mnu-reach { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; font-size: 15px; }
  .mnu-reach a { color: rgba(244,238,228,.9); text-decoration: none; width: fit-content; }
  .mnu-social { display: flex; gap: 20px; margin-top: 13px; font-size: 13.5px; }
  .mnu-social a { color: rgba(244,238,228,.66); text-decoration: none; }
  .mnu-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: clamp(18px, 3vh, 26px);
    background: var(--paper, #F4EEE4); color: var(--navy, #2D1411); border: 0; border-radius: 999px; padding: 15px 20px;
    font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  }
  .mnu-cta svg { width: 13px; height: 13px; }
  .mnu-lang { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 12.5px; color: rgba(244,238,228,.5); }
  .mnu-lang a { color: inherit; text-decoration: none; }
  .mnu-lang a.on { color: var(--paper, #F4EEE4); }
  
  /* ---------- entrance stagger (rides the mask) ---------- */
  .mnu-item { opacity: 0; transform: translateY(14px); }
  .mnu.open .mnu-item {
    opacity: 1; transform: none;
    transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
    transition-delay: calc(.18s + var(--i, 0) * .06s);
  }
  .mnu.closing .mnu-item { opacity: 0; transform: none; transition: opacity .12s ease; transition-delay: 0s; }
  
  /* ---------- gates ---------- */
  @media (min-width: 941px) { .mnu-btn, .mnu { display: none !important; } }
  @media (max-width: 940px) {
    .mnu-btn { display: inline-flex; }
    /* on a phone the header carries the language switch, not the call CTA —
       Request Call lives at the bottom of the menu instead */
    .hdr-right .request { display: none; }
    .hdr-right .lang { display: inline-flex; }
  }
  @media (max-width: 380px) {
    .mnu-btn { margin-left: 2px; }
    .mnu-link { font-size: 25px; padding: 13px 2px; }
  }
  body.mnu-open { overflow: hidden; }
  
  @supports not (clip-path: circle(10px at 10px 10px)) {
    .mnu { clip-path: none; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; }
    .mnu.open { opacity: 1; transition: opacity .3s ease, visibility 0s; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mnu, .mnu.open, .mnu.closing { transition: opacity .2s ease, visibility 0s; clip-path: none; }
    .mnu { opacity: 0; } .mnu.open { opacity: 1; }
    .mnu-item, .mnu.open .mnu-item { transition: none; transform: none; opacity: 1; }
    .mnu-btn i, .mnu-btn i::after { transition: none; }
  }
  

.modal-scrim {
    position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px;
    background: rgba(28,14,11,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .5s var(--ease-reveal), visibility 0s linear .5s;
  }
  .modal-scrim.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s var(--ease-reveal); }
  .modal {
    position: relative; display: grid; grid-template-columns: 0.82fr 1fr;
    width: min(880px, 100%); max-height: min(92vh, 720px); overflow: hidden;
    background: var(--paper); color: var(--ink); border-radius: 8px;
    box-shadow: 0 40px 120px -30px rgba(28,14,11,.6), 0 2px 10px rgba(28,14,11,.18);
    transform: translateY(28px) scale(.985); opacity: 0;
    transition: transform .6s var(--ease-reveal), opacity .5s var(--ease-reveal);
  }
  .modal-scrim.open .modal { transform: none; opacity: 1; }
  
  /* media panel (left) */
  .modal-media { position: relative; overflow: hidden; background: var(--navy); }
  .modal-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.08); transition: transform 1.5s var(--ease-reveal); }
  .modal-scrim.open .modal-media > img { transform: none; }
  .modal-media::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(28,14,11,.15) 0%, rgba(28,14,11,.04) 38%, rgba(28,14,11,.74) 100%); }
  .modal-media-inner { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(20px, 2.2vw, 30px); color: var(--paper); }
  .modal-media-mark { width: 112px; height: auto; filter: brightness(0) invert(1); opacity: .95; margin-bottom: 14px; }
  .modal-media-line { font-family: var(--serif); font-weight: 500; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; }
  .modal-media-sub { font-family: var(--sans); font-weight: 300; font-size: 13px; line-height: 1.5; color: rgba(244,238,228,.78); margin-top: 8px; max-width: 30ch; }
  .modal-media-trust { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .modal-media-trust li { display: flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 12.5px; color: rgba(244,238,228,.92); }
  .modal-media-trust svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--gold-lt, #d6b266); }
  
  /* form panel (right) */
  .modal-panel { position: relative; padding: clamp(26px, 3vw, 42px); overflow-y: auto; }
  .modal h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(25px, 2.3vw, 31px); line-height: 1.08; letter-spacing: -.01em; }
  .modal p.note { font-family: var(--sans); font-weight: 300; font-size: 13.5px; line-height: 1.5; color: rgba(36,31,26,.66); margin-top: 9px; }
  .modal-residence { display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .02em;
    color: var(--navy); background: rgba(176,141,76,.16); border-radius: 999px; padding: 5px 13px; margin-top: 12px; }
  .modal-residence[hidden] { display: none; }
  .modal form { margin-top: clamp(18px, 2vw, 24px); display: grid; gap: 12px; }
  .field { position: relative; min-width: 0; }
  .modal input, .modal select {
    font-family: var(--sans); font-size: 14.5px; color: var(--ink);
    padding: 14px 15px; border: 1px solid rgba(36,31,26,.18); border-radius: 6px; background: #fff; width: 100%;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .modal input::placeholder { color: rgba(36,31,26,.45); }
  .modal input:focus, .modal select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,141,76,.14); }
  
  /* international phone field */
  .iti { position: relative; display: flex; align-items: stretch; border: 1px solid rgba(36,31,26,.18); border-radius: 6px; background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease; }
  .iti:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,141,76,.14); }
  .iti-toggle { display: flex; align-items: center; gap: 6px; padding: 0 9px 0 13px; background: none; border: none;
    border-right: 1px solid rgba(36,31,26,.12); cursor: pointer; font-family: var(--sans); font-size: 14px; color: var(--ink); white-space: nowrap; }
  .iti-flag { font-size: 17px; line-height: 1; }
  .iti-dial { color: rgba(36,31,26,.72); font-variant-numeric: tabular-nums; }
  .iti-caret { width: 10px; height: 6px; opacity: .5; transition: transform .2s ease; }
  .iti-toggle[aria-expanded="true"] .iti-caret { transform: rotate(180deg); }
  .iti-input { flex: 1; min-width: 0; border: none !important; background: none !important; box-shadow: none !important;
    padding: 14px 15px; font-family: var(--sans); font-size: 14.5px; color: var(--ink); }
  .iti-input:focus { outline: none; }
  .iti-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 6; background: #fff;
    border: 1px solid rgba(36,31,26,.14); border-radius: 8px; box-shadow: 0 22px 50px -22px rgba(28,14,11,.45); overflow: hidden; }
  .iti-dropdown[hidden] { display: none; }
  .iti-search { width: 100%; border: none; border-bottom: 1px solid rgba(36,31,26,.1); border-radius: 0; padding: 11px 14px; font-family: var(--sans); font-size: 13.5px; }
  .iti-search:focus { outline: none; box-shadow: none; }
  .iti-list { list-style: none; margin: 0; padding: 5px; max-height: 208px; overflow-y: auto; }
  .iti-list li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 5px; cursor: pointer; font-family: var(--sans); font-size: 13.5px; color: var(--ink); }
  .iti-list li .flag { font-size: 16px; line-height: 1; }
  .iti-list li .cname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .iti-list li .cdial { color: rgba(36,31,26,.5); font-variant-numeric: tabular-nums; }
  .iti-list li:hover, .iti-list li.kb, .iti-list li.active { background: rgba(176,141,76,.15); }
  
  .consent { display: flex; gap: 10px; align-items: flex-start; font-family: var(--sans); font-size: 11.5px; color: rgba(36,31,26,.62); line-height: 1.45; margin-top: 2px; }
  .consent input { width: auto; margin-top: 2px; accent-color: var(--gold); }
  .modal .submit {
    margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    background: var(--navy); color: var(--paper); border: none; border-radius: 999px; padding: 15px; cursor: pointer;
    transition: background .3s var(--ease-reveal), color .3s var(--ease-reveal);
  }
  .modal .submit svg { width: 13px; height: 13px; transition: transform .3s var(--ease-reveal); }
  .modal .submit:hover { background: var(--gold); color: var(--navy); }
  .modal .submit:hover svg { transform: translate(2px,-2px); }
  .modal .close {
    position: absolute; top: 14px; right: 14px; z-index: 4; width: 34px; height: 34px; display: grid; place-items: center;
    background: rgba(244,238,228,.92); border: none; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s ease, transform .3s var(--ease-reveal);
  }
  .modal .close:hover { background: #fff; transform: rotate(90deg); }
  .modal-success { padding: clamp(30px, 4vw, 52px) clamp(24px, 3vw, 42px); text-align: center; }
  .modal-success .tick { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 50%; background: rgba(176,141,76,.16); display: grid; place-items: center; color: var(--gold); }
  .modal-success h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; }
  .modal-success p { font-family: var(--sans); font-weight: 300; font-size: 14px; color: rgba(36,31,26,.7); margin-top: 8px; line-height: 1.5; }
  
  @media (max-width: 720px) {
    .modal { grid-template-columns: 1fr; max-height: 92vh; }
    .modal-media { min-height: 150px; max-height: 170px; }
    .modal-media-sub, .modal-media-trust { display: none; }
    .modal-media-mark { width: 96px; margin-bottom: 8px; }
  }
  @media (max-height: 560px) {
    .modal { grid-template-columns: 1fr; }
    .modal-media { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .modal, .modal-media > img { transition: opacity .2s ease; transform: none; }
    .modal-scrim { transition: opacity .2s ease, visibility 0s linear .2s; }
  }