/* ============================================================
   PRIME MARINA — hi-fi design system
   Dark maritime palette · Cormorant Garamond display · Urbanist UI
   ============================================================ */
@font-face {
    font-family: "Acta Display Light";
    src: url("fonts/ActaDisplayLight.eot");
    src: url("fonts/ActaDisplayLight.eot?#iefix")format("embedded-opentype"),
    url("fonts/ActaDisplayLight.woff2")format("woff2"),
    url("fonts/ActaDisplayLight.woff")format("woff"),
    url("fonts/ActaDisplayLight.ttf")format("truetype"),
    url("fonts/ActaDisplayLight.svg#Acta Display Light")format("svg");
}

:root{
  /* backgrounds */
  --bg-900:#05131f;   /* deepest */
  --bg-850:#071a2f;   /* primary */
  --bg-800:#0a2238;
  --bg-700:#0e2b4a;   /* lifted */
  --bg-panel:#11283f;
  --surface:#16273a;
  --surface-2:#1c2c40;

  /* text */
  --text:#f4f5f2;
  --text-2:#c8cdd3;
  --text-3:#8d97a3;
  --text-4:#5e6b78;

  /* accents */
  --gold:#c3a269;
  --gold-bright:#e4ce9e;
  --gold-deep:#9c814f;
  --teal:#2f8e6e;
  --platinum:#d8e3ea;
  --blue-glow: #04D9FF;

  --accent:var(--gold);
  --accent-bright:var(--gold-bright);

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);

  --ff-display: 'Acta Display Light', Georgia, serif;
  --ff-body:"Urbanist", system-ui, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg-850);color:var(--text);
  font-family:var(--ff-body);font-weight:300;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--bg-900)}

/* ---------- type scale ---------- */
.display{font-family:var(--ff-display);font-weight:400;line-height:1.1;letter-spacing:-.01em;}
.display em{font-style:normal;font-weight:400;}
.d-hero{font-size:clamp(3.4rem,8.5vw,5rem);}
.d-1{font-size:clamp(2.6rem,5.6vw,4rem);}
.d-2{font-size:clamp(2rem,3.8vw,3.4rem);}
.d-3{font-size:clamp(1.6rem,2.6vw,2.3rem);}

.eyebrow{
  font-family:var(--ff-body);font-weight:500;font-size:.72rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:.85rem;
}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--accent);opacity:.8;display:inline-block;}
.eyebrow.center::after{content:"";width:20px;height:1px;background:var(--accent);opacity:.8;display:inline-block;}
.eyebrow.center{justify-content:center}

.lede{font-size:clamp(1.01rem,1.4vw,1.28rem);color:var(--text-2);font-weight:300;line-height:1.75;}
.muted{color:var(--text-3)}
.small-caps{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);font-weight:500;}

/* ---------- buttons ---------- */
.btn-lux{
  --bdr:var(--text);
  font-family:var(--ff-body);font-weight:500;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.8rem;
  padding:.8rem .8rem;border:1px solid var(--line-2);color:var(--text);
  background:transparent;border-radius:0;cursor:pointer;position:relative;overflow:hidden;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.btn-lux::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1;
}
.btn-lux:hover{color:var(--accent);border-color:var(--accent);}
.btn-lux:hover::after{transform:translateY(0);}
.btn-lux .ar{transition:transform .5s var(--ease)}
.btn-lux:hover .ar{transform:translateX(4px)}
.btn-lux.solid{background:var(--accent);color:var(--bg-900);border-color:var(--accent);}
.btn-lux.solid::after{background:var(--gold-bright)}
.btn-lux.solid:hover{color:var(--bg-900);background-color:var(--gold)}
.btn-text{
  font-weight:500;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:.7rem;padding-bottom:.45rem;position:relative;
}
.btn-text::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);transform:scaleX(.4);transform-origin:left;transition:transform .5s var(--ease);}
.btn-text:hover::after{transform:scaleX(1)}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem clamp(1.2rem,4vw,3.2rem);
  transition:padding .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease);
}
.site-head.scrolled{
  padding:1.15rem clamp(1.2rem,4vw,3.2rem) .75rem;
  background:rgba(5,19,31,.86);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.brand-mark{display:flex;flex-direction:column;line-height:1;transition:opacity .5s var(--ease),transform .5s var(--ease);}
.brand-mark img{display:block;}
[data-page="home"] .site-head:not(.scrolled) .brand-mark,
[data-page="home"] .site-head:not(.scrolled) .head-cta{opacity:0;transform:translateY(-6px);pointer-events:none;}
.brand-mark .nm{font-family:var(--ff-display);font-size:1.55rem;letter-spacing:.04em;}
.brand-mark .sub{font-size:.58rem;letter-spacing:.42em;text-transform:uppercase;color:var(--text-3);margin-top:.35rem;}
.head-right{display:flex;align-items:center;gap:1.6rem}
.head-cta{display:none;transition:opacity .5s var(--ease),transform .5s var(--ease);}
@media(min-width:880px){.head-cta{display:inline-flex}}
.menu-btn{
  display:inline-flex;align-items:center;gap:.7rem;background:none;border:0;color:var(--text);cursor:pointer;
  font-family:var(--ff-body);font-weight:500;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:4px;width:26px}
.menu-btn .bars span{height:1.5px;background:var(--text);width:100%;transition:transform .4s var(--ease),opacity .3s}
.menu-btn:hover .bars span:nth-child(1){transform:translateY(1px)}
.menu-btn:hover .bars span:nth-child(3){transform:translateY(-1px)}

/* overlay menu */
.nav-overlay{
  position:fixed;inset:0;z-index:120;background:var(--bg-900);
  display:grid;grid-template-columns:1fr;align-content:center;
  padding:clamp(2rem,8vw,7rem);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-out);
  pointer-events:none;
}
.nav-overlay.open{clip-path:inset(0 0 0 0);pointer-events:auto;}
.nav-overlay .close{position:absolute;top:1.6rem;right:clamp(1.2rem,4vw,3.2rem);background:none;border:0;color:var(--text);font-family:var(--ff-body);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;display:flex;gap:.7rem;align-items:center}
.nav-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem 3rem;}
@media(max-width:600px){.nav-list{grid-template-columns:1fr;}}
.nav-list li{overflow:hidden}
.nav-list a{
  font-family:var(--ff-display);font-size:clamp(2.2rem,6vw,4rem);line-height:1.18;color:var(--text);
  display:inline-flex;align-items:baseline;gap:1.2rem;white-space:nowrap;transition:color .4s var(--ease),padding-left .5s var(--ease);
  transform:translateY(110%);
}
.nav-overlay.open .nav-list a{transform:translateY(0);transition:transform .8s var(--ease-out)}
.nav-list li:nth-child(1) a{transition-delay:.08s}
.nav-list li:nth-child(2) a{transition-delay:.16s}
.nav-list li:nth-child(3) a{transition-delay:.24s}
.nav-list li:nth-child(4) a{transition-delay:.32s}
.nav-list li:nth-child(5) a{transition-delay:.40s}
.nav-list li:nth-child(6) a{transition-delay:.48s}
.nav-list li:nth-child(7) a{transition-delay:.56s}
.nav-list a .ix{font-family:var(--ff-body);font-size:.8rem;letter-spacing:.2em;color:var(--accent);font-weight:500;align-self:flex-start;margin-top:.6rem}
.nav-list a:hover{color:var(--accent);padding-left:1rem}
.nav-foot{margin-top:3rem;display:flex;gap:2.5rem;flex-wrap:wrap;color:var(--text-3);font-size:.8rem;letter-spacing:.05em}
.nav-foot b{color:var(--text);font-weight:500;display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.4rem}

/* ============================================================
   IMAGE / SCRIM SYSTEM
   ============================================================ */
.media{position:relative;overflow:hidden;background:var(--bg-800);}
.media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) contrast(1.02) brightness(.96);}
.media .scrim{position:absolute;inset:0;pointer-events:none;}
.scrim-b{background:linear-gradient(to top,var(--bg-900) 2%,rgba(5,19,31,.55) 32%,rgba(5,19,31,.05) 65%);}
.scrim-l{background:linear-gradient(105deg,rgba(5,19,31,.86) 8%,rgba(5,19,31,.45) 42%,transparent 78%);}
.scrim-full{background:linear-gradient(180deg,rgba(5,19,31,.55),rgba(5,19,31,.35) 45%,rgba(5,19,31,.78));}
.scrim-gold{background:radial-gradient(120% 90% at 80% 18%,rgba(195,162,105,.20),transparent 55%);mix-blend-mode:screen;}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;overflow:hidden; background-color: #071a2f;}
.hero-tagline{position:absolute;z-index:3;top:180px;left:130px;font-size:clamp(3.4rem,8.5vw,5rem);color:var(--accent);font-weight:400;pointer-events:none;line-height:1.3;display:flex;flex-direction:column;}
.hero-tagline em{display:inline-block;overflow:hidden;white-space:nowrap;border-right:none;}
/* line 1: 14 chars, 0.6s delay */
.tl-1{animation:typewriter1 1.4s steps(14,end) 0.6s both;}
/* line 2: 10 chars, starts after line 1 finishes (0.6+1.4=2s), cursor blinks then hides */
.tl-2{border-right:2px solid var(--accent);animation:typewriter2 1.2s steps(10,end) 2s both, blink .7s step-end 3.2s 4, hidecursor 0s 6s forwards;}
@keyframes typewriter1{from{width:0}to{width:100%}}
@keyframes typewriter2{from{width:0}to{width:100%}}
@keyframes blink{0%,100%{border-color:var(--accent)}50%{border-color:transparent}}
@keyframes hidecursor{to{border-color:transparent}}
.hero-wordmark{position:absolute;z-index:3;bottom:100px;right:240px;text-align:right;pointer-events:none;opacity:0;animation:wordmark-in 1.2s var(--ease-out) 3.5s forwards;}
@keyframes wordmark-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hw-name{font-family:var(--ff-display);font-size:clamp(3.5rem,8vw,7.5rem);line-height:.95;color:var(--accent);letter-spacing:.02em;font-weight:400;text-transform:uppercase;}
.hw-sub{font-family:var(--ff-body);font-size:clamp(.7rem,1.1vw,1rem);letter-spacing:.35em;text-transform:uppercase;color:var(--accent);opacity:.8;margin-top:.8rem;}
.hero-intro{padding-top:clamp(3rem,6vw,5.5rem);padding-bottom:clamp(3rem,6vw,5.5rem);}
.hero-intro-img{position:relative;overflow:hidden;aspect-ratio:4/5;}
.hero-intro-img img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-intro-img::after{content:"";position:absolute;inset:0;border:1px solid var(--line-2);pointer-events:none;}
.hero-intro .lede{max-width:46ch}
.hero-bg{position:absolute;inset:-8% 0 0 0;z-index:0;will-change:transform;}
.hero-bg .atmos{position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 78% 12%,rgba(220,180,110,.34),transparent 52%),
    radial-gradient(120% 90% at 20% 95%,rgba(47, 107, 163, 0.9),transparent 60%),
    linear-gradient(180deg,#0a2238 0%,#0e2b4a 38%,#071a2f 100%);}
.hero-bg img,.hero-bg video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  mix-blend-mode:normal;
  filter:contrast(1.05) 
  brightness(1);
}
.hero-bg .veil{position:absolute;inset:0;background:linear-gradient(to top,var(--bg-900) 1%,rgba(5,19,31,.35) 40%,rgba(5,19,31,.25) 70%,rgba(5,19,31,.55));}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(2.4rem,5vw,4rem);
  border-top:1px solid var(--line);
}
.hero-stats .st{padding:1.6rem 1.4rem 0;border-left:1px solid var(--line);}
.hero-stats .st:first-child{border-left:0;padding-left:0}
.hero-stats .num{font-family:var(--ff-display);font-size:clamp(1.8rem,3vw,2.8rem);line-height:1;color:var(--text);}
.hero-stats .num .u{color:var(--accent);font-style:italic;}
.hero-stats .lab{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-top:.7rem;}
.scroll-cue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.7rem;color:var(--text-3);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase}
.scroll-cue .ln{width:1px;height:42px;background:linear-gradient(var(--accent),transparent);position:relative;overflow:hidden}
.scroll-cue .ln::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--accent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{top:-50%}60%,100%{top:100%}}

@media(max-width:520px) {
  .hero-tagline {top:140px;left:10px;font-size:clamp(3rem,8.5vw,4rem);}
  .hero-wordmark{position:absolute;z-index:3;bottom:100px;right:15px; text-align:right;pointer-events:none;}
  .hero-wordmark img {width: 180px}
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{position:relative;padding:clamp(4.5rem,10vw,9rem) clamp(1.2rem,4vw,3.2rem);}
.section.tight{padding-top:clamp(3rem,6vw,5rem)}
.wrap{max-width:1280px;margin:0 auto;}
.wrap-narrow{max-width:980px;margin:0 auto;}
.bg-deep{background:var(--bg-900)}
.bg-mid{background:var(--bg-800)}
.hairline{height:1px;background:var(--line);border:0;margin:0}

/* ============================================================
   LIFESTYLE
   ============================================================ */
.life-hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;}
.life-hero .media{position:absolute;inset:0}
.life-hero .content{position:relative;z-index:2;padding:0 clamp(1.2rem,4vw,3.2rem) clamp(3rem,6vw,5rem);width:100%}
.life-hero h2{max-width:14ch;margin:.6rem 0 0}
.life-points{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:2rem}
.life-points .lp{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:.7rem;font-weight:500}
.life-points .lp .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(195,162,105,.18)}

.vig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.7rem)}
@media(max-width:860px){.vig-grid{grid-template-columns:1fr}}
.vig{position:relative}
.vig .media{aspect-ratio:4/5}
.vig .media img{transition:transform 1.1s var(--ease-out)}
.vig:hover .media img{transform:scale(1.06)}
.vig .cap{position:absolute;left:0;right:0;bottom:0;padding:1.6rem;z-index:2}
.vig .num{font-family:var(--ff-display);font-style:italic;color:var(--accent);font-size:1.1rem}
.vig h3{font-family:var(--ff-display);font-size:1.85rem;margin:.3rem 0 .35rem;font-weight:400}
.vig p{font-size:.78rem;letter-spacing:.04em;color:var(--text-3);margin:0}

/* ---- amenities: colourful image cards ---- */
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:300px;gap:clamp(.8rem,1.4vw,1.2rem);margin-top:1.2rem}
.amen{position:relative;overflow:hidden;border-radius:3px;background:var(--bg-900)}
.amen .media{position:absolute;inset:0}
.amen .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out);filter:saturate(1.18) contrast(1.06) brightness(1)}
.amen:hover .media img{transform:scale(1.07)}
.amen-feature{grid-row:span 2}
.amen-wide{grid-column:span 2}
@media(max-width:860px){
  .amen-grid{grid-template-columns:1fr 1fr;grid-auto-rows:240px}
  .amen-feature{grid-row:span 2}
  .amen-wide{grid-column:span 2}
}
@media(max-width:560px){
  .amen-grid{grid-template-columns:1fr;grid-auto-rows:260px}
  .amen-feature,.amen-wide{grid-row:auto;grid-column:auto}
}
.amen-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.3rem,2vw,2rem)}
.amen-cap .ix{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-bright);font-weight:600}
.amen-cap h4{font-family:var(--ff-display);font-weight:400;line-height:1.08;margin:.6rem 0 0;color:#fff;font-size:clamp(1.4rem,2vw,1.5rem)}
.amen-cap p{font-size:.8rem;color:var(--text-2);margin:.5rem 0 0;max-width:34ch;opacity:0;max-height:0;transform:translateY(8px);overflow:hidden;
  transition:opacity .5s var(--ease),max-height .5s var(--ease),transform .5s var(--ease)}
.amen:hover .amen-cap p,.amen:focus-within .amen-cap p{opacity:1;max-height:5rem;transform:none}
.amen-feature .amen-cap h4{font-size:clamp(1.8rem,2.6vw,2.5rem)}
.amen::after{content:"";position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;border-radius:3px}

.tagline-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.5rem}
.tag{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);border:1px solid var(--line-2);padding:.6rem 1rem;border-radius:40px;}

/* ============================================================
   LANDMARK / RARITY
   ============================================================ */
.rarity{position:relative;overflow:hidden;overflow-x:clip}
@media(max-width:991px){.rarity{padding-right:0}.rarity .col-lg-7{padding-right:0;width:100%}}
@media(min-width:992px){.rarity .col-lg-7{padding-right:0;margin-right:calc(-1 * clamp(1.2rem,4vw,3.2rem));width:calc(58.333% + clamp(1.2rem,4vw,3.2rem))}}
.rarity .glow{position:absolute;inset:0;z-index:0;background:radial-gradient(80% 60% at 70% 30%,rgba(195,162,105,.12),transparent 55%)}
.rarity .wrap{position:relative;z-index:2}
.lu{margin:2.6rem 0 1.4rem}
.lu{position:relative}
.lu-bar{display:flex;height:58px;border:1px solid var(--line-2);border-radius:3px;overflow:hidden;background:var(--bg-900);margin-top:42px;}
.lu-seg{position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid rgba(255,255,255,.07);
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
  background:rgba(255,255,255,.045);
  width:0;transition:width 1.3s var(--ease-out);overflow:hidden;white-space:nowrap}
.lu-seg:nth-child(even){background:rgba(255,255,255,.09)}
.lu-seg:last-child{border-right:0}
.lu-seg.marina{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:var(--bg-900);font-weight:700;font-size:.72rem;letter-spacing:0;
  box-shadow:0 0 26px rgba(195,162,105,.6)}
.lu-flag{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.35rem;opacity:0;transition:opacity .6s var(--ease) .9s}
.lu-flag.show{opacity:1}
.lu-flag .lbl{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-glow);white-space:nowrap;font-weight:600; background-color: #05131f; padding: 0px 4px;}
.lu-flag .stem{width:1px;height:18px;background:var(--gold)}
.lu-cap{font-family:var(--ff-display);font-size:clamp(1.3rem,2.4vw,2rem);margin-top:1.6rem;color:var(--text);text-align: center; font-weight:400}
.lu-cap em{color:var(--accent);font-style:italic}
.rarity-stats{border-top:1px solid var(--line)}
.rarity-stats .rs{padding:2rem 1.4rem;border-left:1px solid var(--line);text-align:center}
.rarity-stats .rs:first-child{border-left:0}
@media(max-width:767px){.rarity-stats .rs{padding:1.6rem 1.2rem;border-bottom:1px solid var(--line)}.rarity-stats .rs:nth-child(odd){border-left:0}}
.rarity-stats .num{font-family:var(--ff-display);font-size:clamp(1.9rem,4.5vw,4rem);line-height:1;color:var(--accent)}
.rarity-stats .lab{font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin-top:.7rem}
@media(max-width:767px) {.lu-bar{width:95%;}}
@media(max-width:520px) {.rarity .glow{top:-200px;}}
/* ============================================================
   INVESTMENT
   ============================================================ */
.inv-head{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:end}
@media(max-width:860px){.inv-head{grid-template-columns:1fr;gap:1.4rem}}
.inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
@media(max-width:860px){.inv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.inv-grid{grid-template-columns:1fr}}
.inv{padding:2.4rem 1.7rem 2.6rem;border-left:1px solid var(--line);position:relative;transition:background .5s var(--ease)}
.inv:first-child{border-left:0}
@media(max-width:860px){.inv:nth-child(odd){border-left:0}.inv{border-top:1px solid var(--line)}.inv:nth-child(1),.inv:nth-child(2){border-top:0}}
@media(max-width:520px){.inv{border-left:0;border-top:1px solid var(--line)}.inv:nth-child(1){border-top:0}}
.inv:hover{background:var(--surface)}
.inv .ix{font-family:var(--ff-display);font-style:italic;font-size:1.4rem;color:var(--accent)}
.inv h4{font-family:var(--ff-display);font-size:1.55rem;font-weight:400;margin:1.4rem 0 .7rem;line-height:1.1}
.inv p{font-size:.82rem;color:var(--text-3);margin:0;letter-spacing:.02em;line-height:1.7}
.inv-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:clamp(2.5rem,5vw,3.5rem)}

/* ---------- credibility ---------- */
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);}
@media(max-width:860px){.cred-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cred-grid{grid-template-columns:1fr}}
.cred-card{padding:2.6rem 2rem 2.8rem;border-left:1px solid var(--line);transition:background .5s var(--ease);}
.cred-card:first-child{border-left:0;}
@media(max-width:860px){.cred-card:nth-child(odd){border-left:0}.cred-card{border-top:1px solid var(--line)}.cred-card:nth-child(1),.cred-card:nth-child(2){border-top:0}}
@media(max-width:520px){.cred-card{border-left:0;border-top:1px solid var(--line)}.cred-card:first-child{border-top:0}}
.cred-card:hover{background:var(--surface);}
.cred-icon{width:40px;height:40px;color:var(--accent);margin-bottom:1.6rem;}
.cred-icon svg{width:100%;height:100%;}
.cred-card h4{font-family:var(--ff-display);font-size:1.45rem;font-weight:400;line-height:1.15;margin:0 0 .85rem;}
.cred-card p{font-size:.82rem;color:var(--text-3);margin:0;line-height:1.7;letter-spacing:.02em;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{position:relative;overflow:hidden}
.contact .media{position:absolute;inset:0;z-index:0}
.contact .wrap{position:relative;z-index:2}
.contact-bg{background:linear-gradient(270deg,rgba(18,2,2,.35) 75%,rgba(11,36,51,1) 100%);}
.contact-aside{padding:2rem 1.5rem;}
.contact-aside .phone{font-family:var(--ff-display);font-size:2.2rem;color:var(--text);margin-top:.5rem}
.contact-aside .blk{margin-top:2.2rem}
.form-card{background:rgba(8,32,56,.66);backdrop-filter:blur(10px);border:1px solid var(--line-2);padding:clamp(1.8rem,3vw,2.8rem)}
.field{display:flex;flex-direction:column;gap:.6rem}
.field label{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.field input,.field select{
  background:transparent;border:0;border-bottom:1px solid var(--line-2);color:var(--text);
  font-family:var(--ff-body);font-size:1rem;font-weight:300;padding:.55rem 0;outline:none;border-radius:0;
  transition:border-color .4s var(--ease)}
.field select{color:var(--text-3)}
.field input::placeholder{color:var(--text-4)}
.field input:focus,.field select:focus{border-color:var(--accent)}
.field select option{background:var(--bg-800);color:var(--text)}
.range-wrap{display:flex;flex-direction:column;gap:.6rem}
.range-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.3rem;}
.range-val{font-family:var(--ff-display);font-size:2.4rem;color:var(--text);line-height:1;}
.range-val small{font-family:var(--ff-body);font-size:.75rem;letter-spacing:.12em;color:var(--text-3);margin-left:.4rem;font-style:normal;}
.range-tier{font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;outline:none;border: none;accent-color:var(--accent)}
input[type=range]:focus{border:none; outline: none;}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:rgba(255,255,255,.16);border-radius:1px;}
input[type=range]::-moz-range-track{height:1px;background:rgba(255,255,255,.16);border-radius:1px;}
input[type=range]::-moz-range-progress{height:1px;background:rgba(255,255,255,.16);}
input[type=range]::-webkit-slider-progress{background:var(--line-2);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 0 6px rgba(195,162,105,.18);transition:box-shadow .3s}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 10px rgba(195,162,105,.26)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:var(--accent);cursor:pointer}
.range-scale{display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)}
.consent{font-size:.7rem;color:var(--text-4);line-height:1.6;margin-top:.3rem}

/* ============================================================
   DEVELOPERS
   ============================================================ */
.dev-rule{width:48px;height:2px;background:var(--accent);margin:1.6rem auto 0;}
.dev-banner{margin:3rem 0;border-radius:0;overflow:hidden;line-height:0;position:relative;}
.dev-banner img{width:100%;height:clamp(260px,35vw,480px);object-fit:cover;object-position:center;}
.dev-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg-900) 0%,transparent 100%);}
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);margin-top:3rem;}
@media(max-width:640px){.dev-grid{grid-template-columns:1fr;gap:2.5rem;}}
.dev-col p{color:var(--text-3);font-size:.9rem;line-height:1.8;margin-top:1.1rem;}
.dev-logo{height:52px;width:auto;object-fit:contain;}

/* ============================================================
   DESIGN PARTNERS
   ============================================================ */
.partners{overflow-x:clip}
.partners-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:3.5rem;width:100vw;margin-left:calc(50% - 50vw);max-width:100vw;}
@media(max-width:760px){.partners-grid{grid-template-columns:1fr;}}
.partner-card{position:relative;overflow:hidden;cursor:pointer;}
.partner-card .media{aspect-ratio:1/1;height:auto;}
.partner-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.partner-card:hover .media img{transform:scale(1.05);}
.partner-cap{position:absolute;bottom:0;left:0;right:0;padding:2.2rem;background:linear-gradient(to top,rgba(5,19,31,.95) 60%,transparent);transform:translateY(calc(100% - var(--cap-visible)));--cap-visible:6rem;transition:transform .5s var(--ease);}
.partner-card:hover .partner-cap{transform:translateY(0);}
.partner-role{font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem;}
.partner-cap h3{font-family:var(--ff-body);font-size:clamp(1.4rem,2.2vw,2rem);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin:0 0 .8rem;line-height:1.1;}
.partner-cap p{font-size:.82rem;color:var(--text-2);line-height:1.7;max-width:34ch;margin:0 0 1.4rem;}
.partner-cap .btn-text{display:inline-flex;}
.partner-card + .partner-card{border-left:1px solid rgba(255,255,255,.08);}

/* ============================================================
   PRIVACY PAGE
   ============================================================ */
.privacy-hero{padding:clamp(7rem,14vw,11rem) clamp(1.2rem,4vw,3.2rem) clamp(3rem,5vw,4rem);background:var(--bg-850);border-bottom:1px solid var(--line);}
.privacy-body{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(4rem,8vw,7rem);background:var(--bg-850);}
.prv-block{margin-bottom:2.8rem;padding-bottom:2.8rem;border-bottom:1px solid var(--line);}
.prv-block:last-child{border-bottom:0;margin-bottom:0;}
.prv-block h2{font-family:var(--ff-body);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:1.2rem;}
.prv-block p,.prv-block li{color:var(--text-3);font-size:.92rem;line-height:1.85;}
.prv-block ul{padding-left:1.2rem;margin:.8rem 0 0;}
.prv-block li{margin-bottom:.5rem;}
.prv-block strong{color:var(--text-2);font-weight:500;}
.prv-block a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

/* ---------- investment guide modal ---------- */
.pm-modal-backdrop{
  position:fixed;inset:0;z-index:200;
  background:rgba(5,19,31,.82);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.pm-modal-backdrop.open{opacity:1;pointer-events:auto;}
.pm-modal{
  background:var(--bg-850);border:1px solid var(--line-2);
  width:100%;max-width:500px;padding:clamp(2rem,5vw,3rem);
  position:relative;
  transform:translateY(24px);transition:transform .45s var(--ease-out);
}
.pm-modal-backdrop.open .pm-modal{transform:translateY(0);}
.pm-modal-close{
  position:absolute;top:1.2rem;right:1.4rem;
  background:none;border:0;color:var(--text-3);font-size:1rem;cursor:pointer;
  transition:color .3s;
}
.pm-modal-close:hover{color:var(--accent);}
.pm-modal-head{margin-bottom:2rem;}
.pm-modal-note{font-size:.85rem;color:var(--text-3);margin-top:.8rem;line-height:1.6;}
.pm-modal-form .field{margin-bottom:1.2rem;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{background:var(--bg-900);padding:clamp(3rem,6vw,5rem) clamp(1.2rem,4vw,3.2rem) 2.2rem;border-top:1px solid var(--line)}
.foot-grid h5{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin:0 0 1.2rem;font-weight:600}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.footer-bar{background:var(--bg-900);}
@media(max-width:575px){.foot-grid ul{align-items:center;}}
.foot-grid a{color:var(--text-2);font-size:.86rem;transition:color .3s}
.foot-grid a:hover{color:var(--accent)}
.foot-brand .nm{font-family:var(--ff-display);font-size:1.8rem}
.foot-brand p{color:var(--text-3);font-size:.82rem;max-width:30ch;margin:1rem 0 0}
.foot-social{display:flex;gap:1rem;margin-top:1.6rem;}
@media(max-width:575px){
  .foot-brand p{margin:1rem auto 0}
  .foot-social{justify-content:center;}
  .foot-grid .brand img {display: unset;}
}
.foot-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line-2);color:var(--text-3);transition:color .3s var(--ease),border-color .3s var(--ease);}
.foot-social a:hover{color:var(--accent);border-color:var(--accent);}
.foot-social svg{width:16px;height:16px;}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--text-3);font-size:.62rem;font-weight:500;letter-spacing:.07em; text-transform: uppercase;}

.footer-bottom {font-size: .65rem;font-weight:500;letter-spacing:.02rem;text-transform:uppercase;color: var(--text-3);letter-spacing: .07em;padding-top:20px;border-top:1px solid var(--line)}


/* ============================================================
   REVEAL ANIMATIONS
   Hidden state is applied ONLY when JS adds html.reveal-ready, so if JS
   doesn't run (or the preview pauses timelines) all content stays visible.
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  .reveal{transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
  html.reveal-ready .reveal{opacity:0;transform:translateY(28px)}
  html.reveal-ready .reveal.in{opacity:1;transform:none}
  .reveal-d1{transition-delay:.12s}.reveal-d2{transition-delay:.24s}.reveal-d3{transition-delay:.36s}.reveal-d4{transition-delay:.48s}
}



/* ============================================================
   COOKIE BAR
   ============================================================ */
.ck-bar{
  position:fixed;bottom:1.5rem;left:1.5rem;z-index:9999;
  width:100%;max-width:400px;
  background:var(--bg-850,#0d2233);
  border:1px solid var(--line-2,rgba(255,255,255,.12));
  padding:1.6rem 1.8rem;
  box-shadow:0 8px 40px rgba(0,0,0,.55);
  transform:translateY(0);
  transition:transform .4s var(--ease,.4s),opacity .4s;
}
.ck-bar.ck-hidden{transform:translateY(calc(100% + 2.5rem));opacity:0;pointer-events:none}
.ck-text{font-size:.78rem;line-height:1.65;color:var(--text-2,rgba(255,255,255,.65));margin:0 0 1.2rem}
.ck-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.ck-btn{
  flex:1;min-width:0;
  font-family:var(--ff-ui,Urbanist,sans-serif);font-size:.72rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.55rem .9rem;border:1px solid var(--line-2,rgba(255,255,255,.12));
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap;
}
.ck-customize{background:transparent;color:var(--text-3,rgba(255,255,255,.4))}
.ck-customize:hover{color:var(--text,#fff);border-color:rgba(255,255,255,.3)}
.ck-reject{background:transparent;color:var(--text-2,rgba(255,255,255,.65))}
.ck-reject:hover{background:rgba(255,255,255,.06)}
.ck-accept{background:var(--accent,#c8a96e);color:#05131f;border-color:var(--accent,#c8a96e)}
.ck-accept:hover{background:var(--gold,#dfc07a);border-color:var(--gold,#dfc07a)}
.ck-save{background:var(--accent,#c8a96e);color:#05131f;border-color:var(--accent,#c8a96e);width:100%;margin-top:.4rem}
.ck-save:hover{background:var(--gold,#dfc07a);border-color:var(--gold,#dfc07a)}

/* Customise panel */
.ck-panel{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line,rgba(255,255,255,.08))}
.ck-toggles{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1rem}
.ck-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ck-toggle-label{display:block;font-size:.78rem;font-weight:500;color:var(--text,#fff);margin-bottom:.15rem}
.ck-toggle-desc{font-size:.68rem;color:var(--text-3,rgba(255,255,255,.4));line-height:1.5}
.ck-always-on{font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent,#c8a96e);white-space:nowrap}

/* Toggle switch */
.ck-switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}
.ck-switch input{opacity:0;width:0;height:0}
.ck-slider{position:absolute;inset:0;background:rgba(255,255,255,.12);border-radius:20px;cursor:pointer;transition:background .25s}
.ck-slider:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .25s}
.ck-switch input:checked + .ck-slider{background:var(--accent,#c8a96e)}
.ck-switch input:checked + .ck-slider:before{transform:translateX(16px)}

@media(max-width:480px){
  .ck-bar{left:1rem;right:1rem;bottom:1rem;max-width:none;width:auto}
}
.ck-privacy-link{color:var(--accent,#c8a96e);text-decoration:underline;text-underline-offset:2px}
.ck-privacy-link:hover{color:var(--gold,#dfc07a)}