/* =========================================================
   AMIR REALTY — PREMIUM CINEMATIC SYSTEM
========================================================= */

:root{

  --ink:#070b09;
  --ink-2:#0d1915;

  --panel:#101f1a;

  --paper:#f4f1e8;
  --paper-dim:#b9beb2;
  --muted:#858d85;

  --gold:#c6a15b;
  --gold-soft:#f0d994;
  --gold-bright:#ffe7a3;

  --emerald:#1f6b52;
  --emerald-lt:#319474;

  --line:rgba(244,241,232,.12);

  --glass-bg:rgba(244,241,232,.045);
  --glass-bg-2:rgba(244,241,232,.075);

  --glass-brd:rgba(244,241,232,.15);

  --shadow:
    0 30px 80px rgba(0,0,0,.45);

  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;

  --ff-display:
    "Fraunces",
    "Iowan Old Style",
    Georgia,
    serif;

  --ff-body:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --ease:
    cubic-bezier(.22,.61,.36,1);

}


/* =========================================================
   RESET
========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(31,107,82,.08),
      transparent 40%
    ),
    var(--ink);

  color:var(--paper);

  font-family:var(--ff-body);

  font-size:16px;
  line-height:1.5;

  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
}

:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{

    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;

  }

}


/* =========================================================
   GLOBAL
========================================================= */

.wrap{
  max-width:1320px;
  margin:auto;

  padding-left:6vw;
  padding-right:6vw;
}

h1,
h2,
h3,
h4,
h5{
  font-family:var(--ff-display);
  font-weight:600;

  letter-spacing:-.015em;

  margin:0;
}

p{
  margin:0;
}

.tag-label{

  display:inline-flex;

  align-items:center;
  gap:8px;

  font-size:12.5px;
  font-weight:600;

  color:var(--gold-soft);

  letter-spacing:.02em;

}

.tag-label::before{

  content:"";

  width:18px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold)
    );

}


/* =========================================================
   BUTTONS
========================================================= */

.btn{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:9px;

  padding:14px 26px;

  border-radius:999px;

  font-weight:600;
  font-size:15px;

  border:1px solid transparent;

  cursor:pointer;

  transition:
    transform .35s var(--ease),
    background .3s,
    box-shadow .3s,
    border-color .3s;

  white-space:nowrap;

}

.btn-gold{

  background:
    linear-gradient(
      180deg,
      var(--gold-bright),
      var(--gold)
    );

  color:#171207;

  box-shadow:
    0 12px 35px
    rgba(198,161,91,.22);

}

.btn-gold:hover{

  transform:translateY(-3px);

  box-shadow:
    0 18px 42px
    rgba(198,161,91,.34);

}

.btn-glass{

  background:var(--glass-bg);

  border-color:var(--glass-brd);

  color:var(--paper);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

}

.btn-glass:hover{

  background:var(--glass-bg-2);

  transform:translateY(-3px);

}

.btn-sm{

  padding:10px 18px;
  font-size:13.5px;

}


/* =========================================================
   NAVIGATION
========================================================= */

.nav{

  position:fixed;

  top:0;
  left:0;
  right:0;

  z-index:50;

  display:flex;
  align-items:center;

  gap:28px;

  padding:
    20px 6vw;

  border-bottom:
    1px solid transparent;

  transition:
    padding .4s var(--ease),
    background .4s var(--ease),
    border-color .4s var(--ease);

}

.nav.scrolled{

  padding:
    12px 6vw;

  background:
    rgba(7,11,9,.72);

  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);

  border-bottom:
    1px solid var(--line);

}

.brand{

  display:flex;
  align-items:center;

  gap:10px;

}

.brand img{

  height:40px;
  width:auto;

}

.brand span{

  font-family:var(--ff-display);

  font-weight:600;

  font-size:18px;

}

.nav-links{

  margin-left:auto;

  display:flex;

  align-items:center;

  gap:30px;

  font-size:14.5px;

  color:var(--paper-dim);

}

.nav-links a{

  position:relative;

  padding:4px 0;

}

.nav-links a::after{

  content:"";

  position:absolute;

  left:0;
  right:100%;
  bottom:0;

  height:1px;

  background:var(--gold-soft);

  transition:
    right .35s var(--ease);

}

.nav-links a:hover{

  color:var(--paper);

}

.nav-links a:hover::after{

  right:0;

}

.nav-cta{

  margin-left:8px;

}

.menu-btn{

  display:none;

  margin-left:auto;

  background:none;

  border:0;

  color:var(--paper);

  width:40px;
  height:40px;

  position:relative;

  cursor:pointer;

}

.menu-btn span{

  position:absolute;

  left:8px;
  right:8px;

  height:1.5px;

  background:currentColor;

  transition:
    transform .3s var(--ease),
    opacity .3s var(--ease);

}

.menu-btn span:nth-child(1){
  top:14px;
}

.menu-btn span:nth-child(2){
  top:20px;
}

.menu-btn span:nth-child(3){
  top:26px;
}

.menu-btn.open span:nth-child(1){

  transform:
    translateY(6px)
    rotate(45deg);

}

.menu-btn.open span:nth-child(2){

  opacity:0;

}

.menu-btn.open span:nth-child(3){

  transform:
    translateY(-6px)
    rotate(-45deg);

}


/* =========================================================
   HERO
========================================================= */

.hero{

  position:relative;

  min-height:96vh;

  padding:
    150px 6vw
    70px;

  display:grid;

  grid-template-columns:
    1.03fr .97fr;

  gap:40px;

  align-items:center;

  overflow:hidden;

  isolation:isolate;

}


/* =========================================================
   CINEMATIC BACKGROUND
========================================================= */

.hero-background{

  position:absolute;

  inset:0;

  z-index:-2;

  overflow:hidden;

  background:

    radial-gradient(
      55% 55%
      at 80% 30%,
      rgba(31,107,82,.24),
      transparent 65%
    ),

    radial-gradient(
      40% 50%
      at 20% 85%,
      rgba(198,161,91,.11),
      transparent 70%
    ),

    linear-gradient(
      135deg,
      #050806,
      #0b1511 55%,
      #07100d
    );

}


/* subtle grid */

.hero-grid{

  position:absolute;

  inset:-20%;

  opacity:.18;

  background-image:

    linear-gradient(
      rgba(244,241,232,.035) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(244,241,232,.035) 1px,
      transparent 1px
    );

  background-size:
    70px 70px;

  transform:
    perspective(600px)
    rotateX(60deg)
    translateY(18%);

  transform-origin:center bottom;

  mask-image:
    linear-gradient(
      to top,
      black,
      transparent 75%
    );

}


/* =========================================================
   HERO GLOW
========================================================= */

.hero-glow{

  position:absolute;

  width:550px;
  height:550px;

  border-radius:50%;

  filter:blur(80px);

  opacity:.18;

  pointer-events:none;

}

.glow-one{

  right:-180px;
  top:-150px;

  background:
    radial-gradient(
      circle,
      var(--emerald),
      transparent 68%
    );

  animation:
    cinematicGlow 8s ease-in-out infinite alternate;

}

.glow-two{

  left:-220px;
  bottom:-250px;

  background:
    radial-gradient(
      circle,
      var(--gold),
      transparent 68%
    );

  opacity:.10;

  animation:
    cinematicGlowTwo 10s ease-in-out infinite alternate;

}

@keyframes cinematicGlow{

  0%{
    transform:translate(0,0) scale(.9);
  }

  100%{
    transform:translate(-80px,70px) scale(1.15);
  }

}

@keyframes cinematicGlowTwo{

  0%{
    transform:translate(0,0) scale(1);
  }

  100%{
    transform:translate(80px,-60px) scale(1.15);
  }

}


/* =========================================================
   MOVING GOLD LIGHT
========================================================= */

.hero-light-beam{

  position:absolute;

  width:2px;

  height:150%;

  top:-25%;
  right:23%;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(240,217,148,.0),
      rgba(240,217,148,.5),
      rgba(240,217,148,0),
      transparent
    );

  filter:
    blur(2px)
    drop-shadow(
      0 0 18px
      rgba(240,217,148,.45)
    );

  transform:
    rotate(22deg)
    translateY(-30%);

  opacity:.5;

  animation:
    lightSweep 7s ease-in-out infinite;

}

@keyframes lightSweep{

  0%{
    transform:
      rotate(22deg)
      translateY(-35%);
    opacity:0;
  }

  20%{
    opacity:.5;
  }

  55%{
    opacity:.7;
  }

  100%{
    transform:
      rotate(22deg)
      translateY(35%);
    opacity:0;
  }

}


/* =========================================================
   HERO ORBS
========================================================= */

.hero-orb{

  position:absolute;

  border-radius:50%;

  pointer-events:none;

  border:
    1px solid
    rgba(240,217,148,.18);

  box-shadow:
    inset 0 0 20px
    rgba(240,217,148,.04),

    0 0 25px
    rgba(240,217,148,.05);

}

.orb-one{

  width:9px;
  height:9px;

  right:17%;
  top:27%;

  background:var(--gold-soft);

  box-shadow:
    0 0 18px
    rgba(240,217,148,.65);

  animation:
    floatOrb 5s ease-in-out infinite;

}

.orb-two{

  width:5px;
  height:5px;

  left:48%;
  top:24%;

  background:var(--emerald-lt);

  animation:
    floatOrbTwo 7s ease-in-out infinite;

}

.orb-three{

  width:7px;
  height:7px;

  right:31%;
  bottom:18%;

  background:var(--gold);

  animation:
    floatOrbThree 6s ease-in-out infinite;

}

@keyframes floatOrb{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-25px);
  }

}

@keyframes floatOrbTwo{

  0%,100%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(30px,20px);
  }

}

@keyframes floatOrbThree{

  0%,100%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(-20px,-30px);
  }

}


/* =========================================================
   PARTICLES
========================================================= */

.particles{

  position:absolute;

  inset:0;

  pointer-events:none;

}

.particles span{

  position:absolute;

  width:2px;
  height:2px;

  border-radius:50%;

  background:var(--gold-soft);

  opacity:.35;

  box-shadow:
    0 0 8px
    rgba(240,217,148,.6);

  animation:
    particleFloat
    8s linear infinite;

}

.particles span:nth-child(1){
  left:12%;
  top:22%;
  animation-delay:-1s;
}

.particles span:nth-child(2){
  left:26%;
  top:70%;
  animation-delay:-5s;
}

.particles span:nth-child(3){
  left:42%;
  top:30%;
  animation-delay:-3s;
}

.particles span:nth-child(4){
  left:55%;
  top:78%;
  animation-delay:-7s;
}

.particles span:nth-child(5){
  left:67%;
  top:20%;
  animation-delay:-2s;
}

.particles span:nth-child(6){
  left:78%;
  top:65%;
  animation-delay:-4s;
}

.particles span:nth-child(7){
  left:88%;
  top:34%;
  animation-delay:-6s;
}

.particles span:nth-child(8){
  left:34%;
  top:15%;
  animation-delay:-4s;
}

.particles span:nth-child(9){
  left:71%;
  top:46%;
  animation-delay:-8s;
}

.particles span:nth-child(10){
  left:17%;
  top:48%;
  animation-delay:-2s;
}

@keyframes particleFloat{

  0%{
    transform:
      translateY(25px)
      scale(.5);

    opacity:0;
  }

  25%{
    opacity:.45;
  }

  75%{
    opacity:.2;
  }

  100%{
    transform:
      translateY(-100px)
      scale(1);

    opacity:0;
  }

}


/* =========================================================
   HERO COPY
========================================================= */

.hero-copy{

  position:relative;

  z-index:2;

  max-width:650px;

}

.hero-copy h1{

  font-size:
    clamp(
      42px,
      5vw,
      70px
    );

  line-height:1.02;

  margin:
    20px 0
    25px;

  color:var(--paper);

}

.hero-copy h1 em{

  font-style:italic;

  font-weight:500;

  color:var(--gold-soft);

}

.hero-copy p.lede{

  font-size:17px;

  line-height:1.75;

  color:var(--paper-dim);

  max-width:500px;

}

.hero-actions{

  display:flex;

  gap:14px;

  margin-top:34px;

  flex-wrap:wrap;

}


/* =========================================================
   HERO MINI STATS
========================================================= */

.hero-mini-stats{

  display:flex;

  gap:35px;

  margin-top:42px;

  padding-top:25px;

  border-top:
    1px solid
    rgba(244,241,232,.10);

}

.hero-mini-stats div{

  display:flex;

  flex-direction:column;

  gap:3px;

}

.hero-mini-stats strong{

  font-family:var(--ff-display);

  font-size:13px;

  color:var(--gold-soft);

  letter-spacing:.08em;

}

.hero-mini-stats span{

  font-size:11px;

  color:var(--muted);

}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual{

  position:relative;

  z-index:2;

  min-height:560px;

  display:flex;

  align-items:center;

  justify-content:center;

}


/* =========================================================
   KEY STAGE
========================================================= */

.key-stage{

  position:relative;

  width:min(520px,100%);

  height:560px;

  display:flex;

  align-items:center;

  justify-content:center;

  transition:
    transform .7s var(--ease);

}


/* =========================================================
   KEY HALOS
========================================================= */

.key-halo{

  position:absolute;

  border-radius:50%;

  pointer-events:none;

}

.halo-one{

  width:370px;
  height:370px;

  background:
    radial-gradient(
      circle,
      rgba(198,161,91,.12),
      rgba(198,161,91,.035) 42%,
      transparent 70%
    );

  filter:blur(4px);

  animation:
    haloPulse 5s ease-in-out infinite;

}

.halo-two{

  width:460px;
  height:460px;

  border:
    1px solid
    rgba(198,161,91,.08);

  box-shadow:
    inset 0 0 80px
    rgba(198,161,91,.025);

  animation:
    slowRotate 24s linear infinite;

}

.halo-three{

  width:300px;
  height:300px;

  border:
    1px solid
    rgba(47,140,108,.15);

  animation:
    slowRotateReverse 18s linear infinite;

}

@keyframes haloPulse{

  0%,100%{
    transform:scale(.92);
    opacity:.65;
  }

  50%{
    transform:scale(1.08);
    opacity:1;
  }

}

@keyframes slowRotate{

  from{
    transform:rotate(0);
  }

  to{
    transform:rotate(360deg);
  }

}

@keyframes slowRotateReverse{

  from{
    transform:rotate(360deg);
  }

  to{
    transform:rotate(0);
  }

}


/* =========================================================
   KEY RINGS
========================================================= */

.key-ring{

  position:absolute;

  border-radius:50%;

  border:
    1px solid
    rgba(240,217,148,.22);

  pointer-events:none;

}

.ring-one{

  width:390px;
  height:145px;

  transform:
    rotate(-25deg);

  animation:
    ringFloat 6s ease-in-out infinite;

}

.ring-two{

  width:360px;
  height:125px;

  transform:
    rotate(38deg);

  border-color:
    rgba(47,140,108,.18);

  animation:
    ringFloatTwo 7s ease-in-out infinite;

}

@keyframes ringFloat{

  0%,100%{
    transform:
      rotate(-25deg)
      scale(1);
  }

  50%{
    transform:
      rotate(-18deg)
      scale(1.08);
  }

}

@keyframes ringFloatTwo{

  0%,100%{
    transform:
      rotate(38deg)
      scale(1);
  }

  50%{
    transform:
      rotate(45deg)
      scale(.94);
  }

}


/* =========================================================
   ENERGY LINES
========================================================= */

.key-energy{

  position:absolute;

  width:240px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(240,217,148,.5),
      transparent
    );

  filter:
    drop-shadow(
      0 0 10px
      rgba(240,217,148,.5)
    );

}

.energy-one{

  transform:
    rotate(-38deg)
    translateY(-140px);

  animation:
    energyMove 4s ease-in-out infinite;

}

.energy-two{

  transform:
    rotate(42deg)
    translateY(140px);

  opacity:.5;

  animation:
    energyMoveTwo 5s ease-in-out infinite;

}

@keyframes energyMove{

  0%,100%{
    opacity:0;
    transform:
      rotate(-38deg)
      translateY(-120px)
      scale(.7);
  }

  50%{
    opacity:1;
    transform:
      rotate(-38deg)
      translateY(-165px)
      scale(1);
  }

}

@keyframes energyMoveTwo{

  0%,100%{
    opacity:0;
    transform:
      rotate(42deg)
      translateY(120px)
      scale(.7);
  }

  50%{
    opacity:.8;
    transform:
      rotate(42deg)
      translateY(165px)
      scale(1);
  }

}


/* =========================================================
   GOLDEN KEY — REALISTIC HERO KEY
========================================================= */

.gold-key{

  position:absolute;

  width:430px;
  height:260px;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%)
    rotate(-14deg);

  z-index:8;

  animation:
    realisticKeyFloat 5s ease-in-out infinite;

  filter:
    drop-shadow(
      0 20px 25px
      rgba(0,0,0,.45)
    )
    drop-shadow(
      0 0 28px
      rgba(240,217,148,.28)
    );

  overflow:visible;

}


/* =========================================================
   KEY BODY
========================================================= */

.gold-key::before{

  content:"";

  position:absolute;

  width:250px;
  height:54px;

  left:125px;
  top:103px;

  border-radius:8px;

  background:

    linear-gradient(
      90deg,

      #6d4913 0%,
      #b88731 12%,
      #f1d47d 27%,
      #fff1ae 43%,
      #d8b65f 62%,
      #9b7025 82%,
      #e5c66f 100%
    );

  box-shadow:

    inset
    0 3px 2px
    rgba(255,255,255,.55),

    inset
    0 -5px 7px
    rgba(70,40,5,.45),

    0 5px 12px
    rgba(0,0,0,.35);

}


/* =========================================================
   KEY HEAD
========================================================= */

.key-head{

  position:absolute;

  width:150px;
  height:150px;

  left:0;
  top:55px;

  border-radius:50%;

  background:

    radial-gradient(
      circle at 30% 25%,

      #fff4bd 0%,
      #f2d982 18%,
      #d3ac50 42%,
      #a47728 68%,
      #66420e 100%
    );

  border:
    3px solid
    rgba(255,232,153,.7);

  box-shadow:

    inset
    10px 10px 18px
    rgba(255,246,193,.5),

    inset
    -14px -15px 22px
    rgba(65,38,5,.5),

    0 8px 18px
    rgba(0,0,0,.42),

    0 0 30px
    rgba(240,217,148,.22);

}


/* =========================================================
   KEY INNER RIM
========================================================= */

.key-head::before{

  content:"";

  position:absolute;

  width:83px;
  height:83px;

  left:30px;
  top:30px;

  border-radius:50%;

  border:
    5px solid
    rgba(255,230,145,.65);

  box-shadow:

    inset
    0 0 18px
    rgba(60,38,5,.65);

}


/* =========================================================
   KEY HOLE
========================================================= */

.key-hole{

  position:absolute;

  width:53px;
  height:53px;

  left:48px;
  top:48px;

  border-radius:50%;

  background:

    radial-gradient(
      circle,
      #020403 0%,
      #07100c 55%,
      #101b16 100%
    );

  border:
    2px solid
    rgba(80,55,15,.9);

  box-shadow:

    inset
    0 0 16px
    rgba(0,0,0,.95),

    0 0 0 4px
    rgba(255,224,137,.14);

}


/* =========================================================
   KEY NECK
========================================================= */

.key-neck{

  position:absolute;

  width:48px;
  height:62px;

  left:118px;
  top:100px;

  background:

    linear-gradient(
      90deg,
      #755019,
      #d4ad56 25%,
      #fff0a8 50%,
      #c29643 75%,
      #704a13
    );

  z-index:2;

}


/* =========================================================
   KEY SHAFT
========================================================= */

.key-shaft{

  position:absolute;

  width:225px;
  height:48px;

  left:105px;
  top:106px;

  background:

    linear-gradient(
      180deg,
      #765018 0%,
      #c99e47 20%,
      #ffe99c 42%,
      #d8b55e 68%,
      #815919 100%
    );

  border-radius:6px;

  box-shadow:

    inset
    0 3px 3px
    rgba(255,248,195,.55),

    inset
    0 -5px 8px
    rgba(68,40,6,.42);

}


/* =========================================================
   SHAFT CENTER HIGHLIGHT
========================================================= */

.key-shaft::before{

  content:"";

  position:absolute;

  left:12px;
  right:12px;
  top:8px;

  height:5px;

  border-radius:50%;

  background:
    rgba(255,247,190,.6);

  filter:blur(1px);

}


/* =========================================================
   KEY CUTS
========================================================= */

.key-cut{

  position:absolute;

  width:38px;
  height:28px;

  right:-2px;

  background:

    linear-gradient(
      180deg,
      #d9b75e,
      #fff0a0,
      #9c7227
    );

  box-shadow:

    inset
    0 2px 2px
    rgba(255,255,255,.45);

}


/* FIRST TOOTH */

.cut-one{

  right:12px;
  bottom:-27px;

}


/* SECOND TOOTH */

.cut-two{

  right:50px;
  bottom:-20px;

}


/* THIRD TOOTH */

.cut-three{

  right:88px;
  bottom:-13px;

}


/* =========================================================
   KEY END CAP
========================================================= */

.key-shaft::after{

  content:"";

  position:absolute;

  right:-15px;
  top:5px;

  width:18px;
  height:38px;

  border-radius:4px;

  background:

    linear-gradient(
      90deg,
      #7a5218,
      #f0d27b,
      #a5792a
    );

}


/* =========================================================
   MOVING METAL REFLECTION
========================================================= */

.gold-key .key-hole::after{

  content:"";

  position:absolute;

  width:7px;
  height:100px;

  left:-80px;
  top:-25px;

  transform:
    rotate(35deg);

  background:

    linear-gradient(
      to bottom,
      transparent,
      rgba(255,244,181,.65),
      transparent
    );

  filter:blur(5px);

  animation:
    keyReflection 4s ease-in-out infinite;

}


/* =========================================================
   REALISTIC KEY FLOAT
========================================================= */

@keyframes realisticKeyFloat{

  0%,100%{

    transform:
      translate(-50%,-50%)
      rotate(-14deg)
      translateY(0);

  }

  50%{

    transform:
      translate(-50%,-50%)
      rotate(-10deg)
      translateY(-13px);

  }

}


/* =========================================================
   GOLD REFLECTION
========================================================= */

@keyframes keyReflection{

  0%{

    left:-80px;
    opacity:0;

  }

  35%{

    opacity:.7;

  }

  65%{

    opacity:.9;

  }

  100%{

    left:170px;
    opacity:0;

  }

}


/* =========================================================
   GOLD KEY RESPONSIVE
========================================================= */

@media(max-width:1080px){

  .gold-key{

    width:380px;
    height:240px;

    transform:
      translate(-50%,-50%)
      rotate(-14deg)
      scale(.9);

  }

}


@media(max-width:760px){

  .gold-key{

    width:340px;
    height:220px;

    transform:
      translate(-50%,-50%)
      rotate(-14deg)
      scale(.82);

  }

}


@media(max-width:480px){

  .gold-key{

    width:310px;
    height:200px;

    transform:
      translate(-50%,-50%)
      rotate(-14deg)
      scale(.72);

  }

}


@media(max-width:390px){

  .gold-key{

    width:290px;
    height:190px;

    transform:
      translate(-50%,-50%)
      rotate(-14deg)
      scale(.65);

  }

}


@media(prefers-reduced-motion:reduce){

  .gold-key{

    animation:none;

  }

}


/* =========================================================
   FLOATING INFO CARDS
========================================================= */

.key-floating-card{

  position:absolute;

  display:flex;

  align-items:center;

  gap:11px;

  padding:
    12px 15px;

  border:
    1px solid
    rgba(244,241,232,.14);

  background:
    rgba(10,16,13,.58);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  border-radius:14px;

  box-shadow:
    0 18px 40px
    rgba(0,0,0,.28);

}

.key-floating-card strong{

  display:block;

  font-family:var(--ff-display);

  font-size:12px;

  color:var(--gold-soft);

  letter-spacing:.03em;

}

.key-floating-card small{

  display:block;

  margin-top:2px;

  font-size:10px;

  color:var(--muted);

}

.card-top{

  top:100px;
  right:0;

  animation:
    cardFloat 5s ease-in-out infinite;

}

.card-bottom{

  bottom:105px;
  left:0;

  animation:
    cardFloatTwo 6s ease-in-out infinite;

}

.floating-dot{

  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--gold-soft);

  box-shadow:
    0 0 12px
    rgba(240,217,148,.7);

}

.floating-line{

  width:22px;
  height:1px;

  background:var(--gold);

}

@keyframes cardFloat{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-12px);
  }

}

@keyframes cardFloatTwo{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(10px);
  }

}


/* =========================================================
   KEY CAPTION
========================================================= */

.key-caption{

  position:absolute;

  bottom:30px;

  right:25px;

  display:flex;

  flex-direction:column;

  align-items:flex-end;

  opacity:.75;

}

.key-caption span{

  font-size:9px;

  letter-spacing:.25em;

  color:var(--muted);

}

.key-caption strong{

  margin-top:3px;

  font-family:var(--ff-display);

  font-size:18px;

  color:var(--gold-soft);

  letter-spacing:.04em;

}


/* =========================================================
   FINDER
========================================================= */

.finder{

  position:relative;

  z-index:5;

  margin:
    -55px 6vw 0;

  background:
    rgba(244,241,232,.065);

  border:
    1px solid
    var(--glass-brd);

  border-radius:
    var(--radius-lg);

  padding:
    30px 32px;

  backdrop-filter:
    blur(26px);

  -webkit-backdrop-filter:
    blur(26px);

  box-shadow:
    var(--shadow);

  display:grid;

  grid-template-columns:
    .7fr 1.6fr;

  gap:34px;

  align-items:center;

}

.finder h2{

  font-size:26px;

  margin-top:7px;

}

.finder-fields{

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;

}

.field{

  display:flex;

  flex-direction:column;

  gap:6px;

}

.field label{

  font-size:11.5px;

  color:var(--muted);

  font-weight:600;

}

select,
input,
textarea{

  width:100%;

  background:
    rgba(244,241,232,.05);

  color:var(--paper);

  border:
    1px solid
    var(--glass-brd);

  border-radius:12px;

  padding:
    12px 14px;

  font:inherit;

  font-size:14.5px;

  outline:none;

  transition:
    border-color .25s,
    background .25s;

}

select{

  appearance:none;
  -webkit-appearance:none;

  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%23c6a15b' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");

  background-repeat:no-repeat;

  background-position:
    right 14px center;

  padding-right:32px;

}

select:focus,
input:focus,
textarea:focus{

  border-color:
    var(--gold-soft);

  background:
    rgba(244,241,232,.08);

}

select option{

  background:#141a17;

  color:var(--paper);

}

.finder-button-wrap .btn{

  width:100%;

}


/* =========================================================
   SECTIONS
========================================================= */

.section{

  padding:
    130px 6vw;

}

.section.tight{

  padding-top:90px;

}

.dark-panel{

  background:
    linear-gradient(
      180deg,
      #101d19,
      #0b1512
    );

}

.section-head{

  display:flex;

  justify-content:space-between;

  align-items:flex-end;

  gap:50px;

  margin-bottom:52px;

}

.section-head h2{

  font-size:
    clamp(
      32px,
      4vw,
      50px
    );

  margin-top:14px;

}

.section-head .lede{

  max-width:400px;

  color:var(--paper-dim);

  line-height:1.65;

  font-size:15px;

}


/* =========================================================
   PROPERTY GRID
========================================================= */

.property-filter-msg{

  display:none;

  padding:40px;

  text-align:center;

  color:var(--muted);

  border:
    1px dashed
    var(--glass-brd);

  border-radius:var(--radius-md);

}

.property-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:22px;

}

.p-card{

  background:
    rgba(244,241,232,.035);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-md);

  overflow:hidden;

  transition:
    transform .45s var(--ease),
    border-color .45s,
    box-shadow .45s;

}

.p-card:hover{

  transform:
    translateY(-7px);

  border-color:
    var(--glass-brd);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.22);

}

.p-card .img-wrap{

  position:relative;

  height:230px;

  overflow:hidden;

}

.p-card .img-wrap img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .8s var(--ease);

}

.p-card:hover .img-wrap img{

  transform:scale(1.06);

}

.p-status{

  position:absolute;

  top:14px;
  left:14px;

  padding:
    6px 12px;

  border-radius:999px;

  font-size:11px;

  font-weight:700;

  background:
    rgba(11,15,13,.62);

  border:
    1px solid
    var(--glass-brd);

  backdrop-filter:blur(10px);

  color:var(--gold-soft);

}

.p-body{

  padding:24px;

}

.p-body h3{

  font-size:21px;

  margin-bottom:6px;

}

.p-body .loc{

  color:var(--muted);

  font-size:13.5px;

  margin-bottom:18px;

}

.p-meta{

  display:flex;

  gap:16px;

  margin-bottom:18px;

  flex-wrap:wrap;

}

.p-meta span{

  font-size:12px;

  color:var(--paper-dim);

  border-top:
    1px solid
    var(--line);

  padding-top:8px;

  flex:1;

  min-width:80px;

}

.p-meta span b{

  display:block;

  color:var(--paper);

  font-size:14px;

  font-weight:600;

  margin-bottom:2px;

}

.p-row{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:10px;

}

.p-row a{

  color:var(--gold-soft);

  font-weight:600;

  font-size:13.5px;

}


/* =========================================================
   PROJECT FEATURE
========================================================= */

.project-feature{

  display:grid;

  grid-template-columns:
    .95fr 1.05fr;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-lg);

  overflow:hidden;

  min-height:560px;

}

.project-media{

  position:relative;

}

.project-media img{

  width:100%;
  height:100%;

  object-fit:cover;

}

.project-copy{

  padding:
    60px 56px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  background:
    linear-gradient(
      145deg,
      #13251f,
      #0e1916
    );

}

.project-copy img.nmc-logo{

  width:180px;

  margin-bottom:30px;

  filter:brightness(1.05);

}

.project-copy h3{

  font-size:32px;

  margin-bottom:16px;

  line-height:1.15;

}

.project-copy p{

  color:var(--paper-dim);

  line-height:1.75;

  margin-bottom:26px;

}

.chip-row{

  display:flex;

  flex-wrap:wrap;

  gap:9px;

  margin-bottom:30px;

}

.chip-row span{

  border:
    1px solid
    var(--line);

  border-radius:999px;

  padding:
    9px 15px;

  font-size:12.5px;

  color:var(--paper-dim);

}


/* =========================================================
   LANDMARKS
========================================================= */

.landmark-grid{

  display:grid;

  grid-template-columns:
    repeat(6,1fr);

  grid-auto-rows:130px;

  gap:14px;

}

.landmark{

  position:relative;

  border-radius:16px;

  overflow:hidden;

  cursor:pointer;

  border:
    1px solid
    var(--line);

}

.landmark img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .7s var(--ease);

}

.landmark:hover img{

  transform:scale(1.07);

}

.landmark .cap{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:
    14px 16px 12px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(0,0,0,.78)
    );

  font-size:13px;

  font-weight:600;

}

.landmark.l1{

  grid-column:span 2;
  grid-row:span 2;

}

.landmark.l2{

  grid-column:span 2;
  grid-row:span 1;

}

.landmark.l3{

  grid-column:span 2;
  grid-row:span 1;

}

.landmark.l4{

  grid-column:span 2;
  grid-row:span 2;

}

.landmark.l5{

  grid-column:span 2;
  grid-row:span 1;

}

.landmark.l6{

  grid-column:span 2;
  grid-row:span 1;

}


/* =========================================================
   VIDEO
========================================================= */

.video-row{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:22px;

}

.video-card{

  position:relative;

  border-radius:24px;

  overflow:hidden;

  border:
    1px solid
    var(--line);

  aspect-ratio:9/14;

  background:#000;

}

.video-card video{

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center center;

  display:block;

}

.video-card .v-overlay{

  position:absolute;

  inset:0;

  display:flex;

  align-items:flex-end;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0),
      rgba(0,0,0,.72)
    );

  padding:20px;

  pointer-events:none;

}

.v-title{

  font-size:14.5px;

  font-weight:600;

}

.play-btn{

  position:absolute;

  top:50%;
  left:50%;

  transform:
    translate(-50%,-50%);

  width:56px;
  height:56px;

  border-radius:50%;

  background:
    rgba(244,241,232,.08);

  border:
    1px solid
    var(--glass-brd);

  backdrop-filter:blur(14px);

  display:flex;

  align-items:center;
  justify-content:center;

  cursor:pointer;

  transition:
    transform .3s var(--ease),
    opacity .3s;

}

.play-btn:hover{

  transform:
    translate(-50%,-50%)
    scale(1.08);

}

.play-btn svg{

  width:18px;
  height:18px;

  fill:var(--paper);

  margin-left:2px;

}

.video-card.playing .play-btn{

  opacity:0;

  pointer-events:none;

}

.mute-btn{

  position:absolute;

  top:14px;
  right:14px;

  width:34px;
  height:34px;

  border-radius:50%;

  background:
    rgba(11,15,13,.55);

  border:
    1px solid
    var(--glass-brd);

  backdrop-filter:blur(10px);

  display:flex;

  align-items:center;
  justify-content:center;

  cursor:pointer;

}

.mute-btn svg{

  width:15px;
  height:15px;

  fill:var(--paper);

}


/* =========================================================
   INVESTMENT
========================================================= */

.investment{

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:70px;

  align-items:center;

}

.investment h2{

  font-size:
    clamp(
      38px,
      4.6vw,
      58px
    );

  margin:
    16px 0 22px;

}

.investment h2 em{

  color:var(--gold-soft);

  font-style:italic;

}

.investment p.lede{

  color:var(--paper-dim);

  line-height:1.8;

  max-width:520px;

  margin-bottom:30px;

  font-size:15.5px;

}

.stats{

  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:14px;

}

.stats .stat{

  border:
    1px solid
    var(--line);

  background:
    rgba(244,241,232,.035);

  border-radius:
    var(--radius-md);

  padding:26px;

  transition:
    border-color .3s,
    background .3s,
    transform .3s;

}

.stats .stat:hover{

  border-color:
    var(--glass-brd);

  background:
    rgba(244,241,232,.07);

  transform:translateY(-3px);

}

.stats .stat b{

  display:block;

  font-family:var(--ff-display);

  font-size:15px;

  color:var(--gold-soft);

  margin-bottom:10px;

}

.stats .stat span{

  display:block;

  color:var(--paper-dim);

  font-size:14px;

}


/* =========================================================
   EXPLORE
========================================================= */

.explore-panel{

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      150deg,
      #12231d,
      #0b1512
    );

  overflow:hidden;

  display:grid;

  grid-template-columns:
    1fr 300px;

}

.map-shell{

  position:relative;

  min-height:460px;

  padding:40px;

  background:

    radial-gradient(
      circle at 30% 30%,
      rgba(31,107,82,.18),
      transparent 55%
    ),

    radial-gradient(
      circle at 75% 70%,
      rgba(198,161,91,.12),
      transparent 55%
    );

  display:flex;

  flex-direction:column;

  justify-content:space-between;

}

.map-grid-lines{

  position:absolute;

  inset:0;

  background-image:

    linear-gradient(
      var(--line) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      var(--line) 1px,
      transparent 1px
    );

  background-size:44px 44px;

  opacity:.5;

  mask-image:
    radial-gradient(
      ellipse at center,
      black 40%,
      transparent 78%
    );

}

.map-badge{

  position:relative;

  z-index:2;

  display:inline-flex;

  align-items:center;

  gap:8px;

  background:
    var(--glass-bg-2);

  border:
    1px solid
    var(--glass-brd);

  border-radius:999px;

  padding:
    9px 16px;

  font-size:12.5px;

  color:var(--paper-dim);

  width:fit-content;

  backdrop-filter:blur(14px);

}

.map-badge .dot{

  width:7px;
  height:7px;

  border-radius:50%;

  background:
    var(--gold-soft);

  box-shadow:
    0 0 10px
    rgba(240,217,148,.5);

}

.map-center-note{

  position:relative;

  z-index:2;

  text-align:center;

  margin:auto;

  max-width:320px;

}

.map-center-note h4{

  font-size:19px;

  margin-bottom:10px;

}

.map-center-note p{

  color:var(--muted);

  font-size:13.5px;

  line-height:1.6;

}

.map-zoom{

  position:relative;

  z-index:2;

  display:flex;

  gap:8px;

  align-self:flex-end;

}

.map-zoom button{

  width:36px;
  height:36px;

  border-radius:10px;

  background:
    var(--glass-bg-2);

  border:
    1px solid
    var(--glass-brd);

  color:var(--paper);

  cursor:pointer;

}

.explore-side{

  border-left:
    1px solid
    var(--line);

  padding:
    34px 30px;

  display:flex;

  flex-direction:column;

  gap:22px;

}

.explore-side h4{

  font-size:12px;

  letter-spacing:.03em;

  color:var(--muted);

  font-weight:600;

}

.block-chips{

  display:flex;

  flex-wrap:wrap;

  gap:8px;

}

.block-chips span{

  border:
    1px solid
    var(--line);

  border-radius:10px;

  padding:
    8px 12px;

  font-size:12.5px;

  color:var(--paper-dim);

}

.legend-item{

  display:flex;

  align-items:center;

  gap:10px;

  font-size:13px;

  color:var(--paper-dim);

}

.legend-item .swatch{

  width:10px;
  height:10px;

  border-radius:3px;

}

.legend-item .swatch.gold{
  background:var(--gold);
}

.legend-item .swatch.emerald{
  background:var(--emerald-lt);
}

.legend-item .swatch.grey{
  background:var(--muted);
}


/* =========================================================
   ABOUT
========================================================= */

.about{

  display:grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap:80px;

  align-items:center;

}

.about-panel{

  background:
    rgba(244,241,232,.035);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-lg);

  padding:60px;

  display:flex;

  justify-content:center;

}

.about-panel img{

  width:220px;

}

.about h2{

  margin:
    14px 0 20px;

  font-size:
    clamp(
      32px,
      4vw,
      46px
    );

}

.about p.lede{

  color:var(--paper-dim);

  line-height:1.8;

  max-width:560px;

  font-size:15.5px;

}

.values{

  margin-top:30px;

  display:grid;

}

.values .v{

  display:flex;

  gap:22px;

  padding:18px 0;

  border-top:
    1px solid
    var(--line);

}

.values .v b{

  color:var(--gold-soft);

  font-family:var(--ff-display);

  font-weight:600;

  min-width:26px;

}

.values .v span{

  color:var(--paper-dim);

  font-size:14.5px;

  line-height:1.6;

}


/* =========================================================
   CONTACT
========================================================= */

.contact{

  display:grid;

  grid-template-columns:
    1fr .95fr;

  gap:70px;

}

.contact h2{

  font-size:
    clamp(
      36px,
      4.6vw,
      56px
    );

  margin:
    16px 0 20px;

}

.contact p.lede{

  color:var(--paper-dim);

  line-height:1.7;

  max-width:460px;

  font-size:15.5px;

}

.phone-link{

  display:inline-flex;

  align-items:center;

  gap:10px;

  margin-top:26px;

  color:var(--gold-soft);

  font-family:var(--ff-display);

  font-size:30px;

  font-weight:600;

}

.contact-actions{

  display:flex;

  gap:14px;

  margin-top:26px;

  flex-wrap:wrap;

}

.lead-form{

  background:
    rgba(244,241,232,.065);

  border:
    1px solid
    var(--glass-brd);

  border-radius:
    var(--radius-lg);

  padding:32px;

  display:grid;

  gap:14px;

  backdrop-filter:blur(20px);

}

.lead-form textarea{

  resize:vertical;

  min-height:100px;

}

.lead-form small{

  color:var(--muted);

  line-height:1.5;

  font-size:12.5px;

}


/* =========================================================
   FOOTER
========================================================= */

footer{

  border-top:
    1px solid
    var(--line);

  padding:
    44px 6vw;

  display:grid;

  grid-template-columns:
    1.2fr 1fr 1fr;

  gap:30px;

  align-items:start;

  color:var(--muted);

  font-size:13px;

}

.footer-brand{

  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:14px;

}

.footer-brand img{

  height:34px;

}

.footer-brand span{

  font-family:var(--ff-display);

  color:var(--paper);

  font-weight:600;

  font-size:16px;

}

footer p{

  line-height:1.7;

  max-width:280px;

}

.footer-col h5{

  font-size:12px;

  color:var(--paper-dim);

  font-weight:600;

  margin-bottom:14px;

}

.footer-col a{

  display:block;

  color:var(--muted);

  margin-bottom:10px;

  font-size:13.5px;

}

.footer-col a:hover{

  color:var(--gold-soft);

}

.footer-bottom{

  grid-column:1/-1;

  border-top:
    1px solid
    var(--line);

  margin-top:10px;

  padding-top:20px;

  display:flex;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:10px;

}


/* =========================================================
   WHATSAPP
========================================================= */

.float-wa{

  position:fixed;

  right:24px;
  bottom:24px;

  z-index:60;

  width:58px;
  height:58px;

  border-radius:50%;

  background:
    var(--emerald);

  display:flex;

  align-items:center;
  justify-content:center;

  box-shadow:
    0 14px 34px
    rgba(0,0,0,.45);

  transition:
    transform .3s var(--ease);

}

.float-wa:hover{

  transform:scale(1.09);

}

.float-wa svg{

  width:26px;
  height:26px;

  fill:var(--paper);

}


/* =========================================================
   LIGHTBOX
========================================================= */

.lightbox{

  position:fixed;

  inset:0;

  z-index:100;

  display:none;

  background:
    rgba(6,8,7,.92);

  backdrop-filter:blur(8px);

  align-items:center;

  justify-content:center;

  padding:6vw;

}

.lightbox.open{

  display:flex;

}

.lightbox img{

  max-width:min(900px,90vw);

  max-height:82vh;

  border-radius:18px;

  object-fit:contain;

  border:
    1px solid
    var(--glass-brd);

}

.lightbox-cap{

  position:absolute;

  bottom:6vh;

  left:0;
  right:0;

  text-align:center;

  color:var(--paper-dim);

  font-size:14px;

}

.lightbox-close{

  position:absolute;

  top:26px;
  right:6vw;

  width:44px;
  height:44px;

  border-radius:50%;

  background:
    var(--glass-bg-2);

  border:
    1px solid
    var(--glass-brd);

  color:var(--paper);

  font-size:20px;

  cursor:pointer;

}


/* =========================================================
   REVEAL
========================================================= */

.reveal{

  opacity:0;

  transform:
    translateY(20px);

  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease);

}

.reveal.visible{

  opacity:1;

  transform:none;

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media(max-width:1080px){

  .hero{

    grid-template-columns:1fr;

    padding-top:130px;

    min-height:auto;

  }

  .hero-copy{

    max-width:700px;

  }

  .hero-visual{

    order:-1;

    min-height:470px;

    margin-bottom:10px;

  }

  .key-stage{

    height:470px;

    transform:none !important;

  }

  /*
     GOLD KEY:
     Responsive sizing is handled by the
     dedicated GOLD KEY RESPONSIVE block above.
     No conflicting transform here.
  */

  .card-top{

    right:5%;

    top:65px;

  }

  .card-bottom{

    left:5%;

    bottom:70px;

  }

  .finder{

    grid-template-columns:1fr;

    gap:20px;

  }

  .finder-fields{

    grid-template-columns:
      repeat(2,1fr);

  }

  .property-grid{

    grid-template-columns:
      repeat(2,1fr);

  }

  .project-feature{

    grid-template-columns:1fr;

  }

  .project-media{

    height:320px;

  }

  .landmark-grid{

    grid-template-columns:
      repeat(4,1fr);

  }

  .landmark.l1,
  .landmark.l4{

    grid-column:span 2;

  }

  .landmark.l2,
  .landmark.l3,
  .landmark.l5,
  .landmark.l6{

    grid-column:span 2;

  }

  .video-row{

    grid-template-columns:
      repeat(3,1fr);

  }

  .investment,
  .about,
  .contact{

    grid-template-columns:1fr;

  }

  .about-panel{

    padding:40px;

  }

  .explore-panel{

    grid-template-columns:1fr;

  }

  .explore-side{

    border-left:0;

    border-top:
      1px solid
      var(--line);

  }

  footer{

    grid-template-columns:
      1fr 1fr;

  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media(max-width:760px){

  .nav-links{

    display:none;

    position:fixed;

    top:0;
    left:0;
    right:0;
    bottom:0;

    background:
      rgba(7,11,9,.97);

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    padding:
      0 8vw;

    gap:26px;

    font-size:20px;

    backdrop-filter:blur(20px);

    z-index:49;

  }

  .nav-links.open{

    display:flex;

  }

  .nav-links .nav-cta{

    margin-left:0;

    margin-top:10px;

  }

  .menu-btn{

    display:block;

  }


  /* HERO */

  .hero{

    padding:
      120px 6vw
      60px;

    min-height:100svh;

  }

  .hero-copy h1{

    font-size:
      clamp(
        39px,
        11vw,
        55px
      );

  }

  .hero-copy p.lede{

    font-size:15.5px;

  }

  .hero-actions{

    flex-direction:column;

  }

  .hero-actions .btn{

    width:100%;

  }


  .hero-mini-stats{

    gap:20px;

  }

  .hero-mini-stats strong{

    font-size:11px;

  }

  .hero-mini-stats span{

    font-size:9px;

  }


  /* HERO VISUAL */

  .hero-visual{

    min-height:380px;

    margin-top:10px;

  }

  .key-stage{

    width:100%;

    height:390px;

  }

  /*
     GOLD KEY:
     Responsive sizing is handled by the
     dedicated GOLD KEY RESPONSIVE block above.
  */

  .halo-one{

    width:260px;
    height:260px;

  }

  .halo-two{

    width:320px;
    height:320px;

  }

  .halo-three{

    width:230px;
    height:230px;

  }

  .ring-one{

    width:280px;
    height:105px;

  }

  .ring-two{

    width:250px;
    height:90px;

  }

  .card-top{

    top:20px;

    right:0;

    transform:scale(.82);

  }

  .card-bottom{

    left:0;

    bottom:30px;

    transform:scale(.82);

  }

  .key-caption{

    bottom:0;

    right:5px;

  }


  /* FINDER */

  .finder{

    margin:
      -25px 5vw 0;

    padding:24px;

  }

  .finder-fields{

    grid-template-columns:1fr;

  }


  /* SECTIONS */

  .section{

    padding:
      80px 6vw;

  }

  .section-head{

    flex-direction:column;

    align-items:flex-start;

    gap:16px;

  }


  /* PROPERTIES */

  .property-grid{

    grid-template-columns:1fr;

  }


  /* LANDMARKS */

  .landmark-grid{

    grid-template-columns:
      repeat(2,1fr);

    grid-auto-rows:150px;

  }

  .landmark.l1,
  .landmark.l2,
  .landmark.l3,
  .landmark.l4,
  .landmark.l5,
  .landmark.l6{

    grid-column:span 1;

    grid-row:span 1;

  }


  /* VIDEOS */

  .video-row{

    grid-template-columns:1fr;

  }

  .video-card{

    aspect-ratio:16/11;

  }


  /* PROJECT */

  .project-copy{

    padding:
      36px 26px;

  }


  /* STATS */

  .stats{

    grid-template-columns:1fr;

  }


  /* ABOUT */

  .about-panel{

    padding:30px;

  }


  /* CONTACT */

  .phone-link{

    font-size:24px;

  }


  /* FOOTER */

  footer{

    grid-template-columns:1fr;

    text-align:left;

  }

  .footer-bottom{

    flex-direction:column;

  }


  /* WHATSAPP */

  .float-wa{

    right:18px;

    bottom:18px;

    width:54px;
    height:54px;

  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media(max-width:390px){

  .hero-copy h1{

    font-size:38px;

  }

  .hero-mini-stats{

    gap:13px;

  }

  .hero-mini-stats div{

    min-width:0;

  }

  .key-stage{

    height:350px;

  }

  /*
     GOLD KEY:
     Dedicated GOLD KEY RESPONSIVE block handles
     the 290px / 190px / .65 scale.
  */

  .key-floating-card{

    transform:scale(.72);

  }

}