/* ══════════════════════════════════════════════════════════════
   VISTACRAFT HOMES — STYLESHEET v2
   "Luxury architecture studio meets futuristic construction co."
   Direction: light blue + white · cinematic glassmorphism · Apple/Tesla polish
══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root{
  /* Atmospheric body */
  --bg-1:           #FAFCFF;
  --bg-2:           #F0F7FF;
  --bg-3:           #E6F1FF;

  /* Tints */
  --tint-pale:      #F0F7FF;
  --tint-soft:      #DBEAFE;
  --tint-mid:       #BFDBFE;

  /* Brand blue (matches logo) */
  --blue:           #2563EB;
  --blue-mid:       #3B82F6;
  --blue-light:     #60A5FA;
  --blue-dark:      #1D4ED8;
  --blue-50:        #EFF6FF;

  /* Ink scale */
  --ink:            #0B1426;
  --slate:          #1E293B;
  --slate-2:        #334155;
  --muted:          #64748B;
  --muted-2:        #94A3B8;

  /* Glass */
  --glass:          rgba(255,255,255,0.55);
  --glass-strong:   rgba(255,255,255,0.78);
  --glass-soft:     rgba(255,255,255,0.32);
  --glass-dark:     rgba(255,255,255,0.10);
  --glass-rim:      rgba(255,255,255,0.85);
  --glass-edge:     rgba(255,255,255,0.45);
  --glass-border:   rgba(255,255,255,0.6);

  /* Shadows */
  --sh-glass:       0 1px 0 rgba(255,255,255,0.95) inset, 0 -1px 0 rgba(255,255,255,0.25) inset, 0 24px 60px -16px rgba(15,42,90,0.18), 0 8px 24px -8px rgba(15,42,90,0.10);
  --sh-soft:        0 8px 30px -8px rgba(15,42,90,0.12);
  --sh-md:          0 16px 48px -12px rgba(15,42,90,0.18);
  --sh-blue:        0 16px 40px -12px rgba(37,99,235,0.32);

  /* Geometry */
  --r-card:         24px;
  --r-md:           16px;
  --r-sm:           10px;
  --r-pill:         999px;
  --nav-h:          74px;
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:17px;-webkit-text-size-adjust:100%;overflow-x:hidden;width:100%;max-width:100vw}
@media(max-width:560px){html{font-size:16px}}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400; color:var(--slate);
  font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; cursor:none;
  position:relative; width:100%; max-width:100vw;
  background:
    radial-gradient(70% 45% at 50% 0%,    rgba(191,219,254,.42), transparent 70%),
    radial-gradient(60% 50% at 90% 30%,   rgba(147,197,253,.22), transparent 70%),
    radial-gradient(70% 50% at 10% 70%,   rgba(191,219,254,.30), transparent 70%),
    radial-gradient(80% 60% at 50% 100%,  rgba(219,234,254,.45), transparent 70%),
    linear-gradient(180deg, #FAFCFF 0%, #F2F8FF 35%, #FAFCFF 70%, #F0F7FF 100%);
  background-attachment: fixed;
  min-height:100vh;
}
/* Universal overflow safety */
img, video, svg{display:block;max-width:100%}
section, .proj-block, .cta-band, .page-hero, .ph-img, .hero, .mrow{max-width:100vw}

/* Reset (continued) */
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{border:none;background:none;font:inherit;color:inherit}
a,button,input,select,textarea,label{cursor:none}
::selection{background:var(--blue);color:#fff}

/* ── CURSOR ───────────────────────────────────────────────── */
#cdot{position:fixed;width:6px;height:6px;background:var(--blue);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);top:-30px;left:-30px;mix-blend-mode:multiply}
#cring{position:fixed;width:32px;height:32px;border:1.5px solid rgba(37,99,235,.35);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);top:-50px;left:-50px;transition:width .3s,height .3s,border-color .3s,background .3s}
#cring.hov{width:54px;height:54px;border-color:rgba(37,99,235,.18);background:rgba(37,99,235,.06)}

/* ── PROGRESS + CURTAIN ───────────────────────────────────── */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--blue-light),var(--blue),var(--blue-dark));z-index:10000;transition:width .1s linear;box-shadow:0 0 8px rgba(37,99,235,.5)}
.curtain{position:fixed;inset:0;z-index:9000;background:#FAFCFF;transform-origin:top;animation:cR .9s cubic-bezier(.65,.05,.35,1) .15s forwards;pointer-events:none}
@keyframes cR{from{transform:scaleY(1)}to{transform:scaleY(0)}}

/* ══════════════════════════════════════════════════════════
   GLASS UTILITIES
══════════════════════════════════════════════════════════ */
.glass{
  background:var(--glass);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid var(--glass-border);
  border-radius:var(--r-card);
  box-shadow:var(--sh-glass);
}
.glass-strong{
  background:var(--glass-strong);
  backdrop-filter:blur(32px) saturate(1.8);
  -webkit-backdrop-filter:blur(32px) saturate(1.8);
  border:1px solid var(--glass-border);
  border-radius:var(--r-card);
  box-shadow:var(--sh-glass);
}
.glass-soft{
  background:var(--glass-soft);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--glass-border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-soft);
}
/* Glass over dark imagery — for hero buttons / overlay cards */
.glass-onimg{
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-md);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 12px 32px -8px rgba(0,0,0,.2);
}

/* ══════════════════════════════════════════════════════════
   FLOATING NAV — pill-shaped, transparent
══════════════════════════════════════════════════════════ */
#nav{
  position:fixed; top:18px; left:24px; right:24px;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem 0 1.6rem;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(24px) saturate(1.7);
  -webkit-backdrop-filter:blur(24px) saturate(1.7);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-pill);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 12px 40px -12px rgba(15,42,90,.18);
  z-index:1000;
  transition:top .3s, box-shadow .3s, background .3s;
}
#nav.scrolled{
  top:12px;
  background:rgba(255,255,255,.78);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 16px 48px -12px rgba(15,42,90,.22);
}
.nlogo{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.nlogo img{height:32px;width:auto;object-fit:contain}
.nlogo-txt{font-family:'Cormorant Garamond',serif;font-size:1.18rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.nlogo-txt span{color:var(--blue);font-style:italic}
.nlinks{display:flex;align-items:center;gap:2.2rem}
.nlinks > li{position:relative}
.nlinks a{color:var(--slate-2);font-size:.96rem;font-weight:500;letter-spacing:.01em;transition:color .25s;white-space:nowrap;position:relative;padding:.4rem 0}
.nlinks a::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:4px;background:var(--blue);border-radius:50%;transition:width .35s cubic-bezier(.65,.05,.35,1)}
.nlinks a:hover,.nlinks a.active{color:var(--ink)}
.nlinks a.active::after{width:4px}
.ncta{
  background:var(--ink) !important; color:#fff !important;
  padding:.62rem 1.35rem !important; border-radius:var(--r-pill);
  font-size:.9rem !important; font-weight:500;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:background .3s, transform .2s, box-shadow .3s !important;
  box-shadow:0 4px 16px -4px rgba(11,20,38,.35);
}
.ncta::after{display:none !important}
.ncta:hover{background:var(--blue) !important; color:#fff !important; transform:translateY(-1px); box-shadow:0 8px 24px -6px rgba(37,99,235,.4)}
.ncta i{font-size:.82rem; transition:transform .25s}
.ncta:hover i{transform:translateX(2px)}

/* Hamburger */
#hbg{display:none;flex-direction:column;gap:5px;padding:6px;z-index:2}
#hbg span{display:block;width:22px;height:1.5px;background:var(--ink);border-radius:1px;transition:transform .3s,opacity .3s}

/* Mobile menu */
#mob{
  position:fixed; top:calc(var(--nav-h) + 32px); left:24px; right:24px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  padding:1.5rem 1.75rem 1.75rem;
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-card);
  box-shadow:var(--sh-glass);
  z-index:999;
  transform:translateY(-20px); opacity:0;
  transition:transform .4s cubic-bezier(.25,1,.5,1), opacity .3s;
  pointer-events:none;
}
#mob.open{transform:translateY(0); opacity:1; pointer-events:auto}
#mob a{
  display:block;color:var(--slate);
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem; font-weight:400; letter-spacing:.01em;
  padding:.7rem 0;
  border-bottom:1px solid rgba(15,23,42,.08);
  transition:color .2s, padding-left .25s;
}
#mob a:last-child{border:none}
#mob a:hover{color:var(--blue); padding-left:.4rem}

@media(max-width:900px){
  #nav{padding:0 1rem 0 1.2rem; top:14px; left:14px; right:14px}
  .nlinks{display:none}
  #hbg{display:flex}
  #mob{left:14px;right:14px;top:calc(var(--nav-h) + 24px)}
}

/* ══════════════════════════════════════════════════════════
   FLOATING ACTIONS — WhatsApp / back-to-top
══════════════════════════════════════════════════════════ */
#whatsapp-float{
  position:fixed;bottom:1.75rem;right:1.75rem;z-index:900;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  box-shadow:0 8px 28px -4px rgba(37,211,102,.5), 0 1px 0 rgba(255,255,255,.4) inset;
  opacity:0; pointer-events:none; transform:translateY(12px) scale(.85);
  transition:opacity .35s ease, transform .4s cubic-bezier(.25,1,.5,1), box-shadow .3s;
}
#whatsapp-float.visible{opacity:1; pointer-events:auto; transform:translateY(0) scale(1)}
#whatsapp-float:hover{transform:scale(1.08) translateY(-2px); box-shadow:0 12px 36px -4px rgba(37,211,102,.6)}
#back-top{
  position:fixed;bottom:5.75rem;right:1.75rem;z-index:900;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.7); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.6);
  color:var(--blue);font-size:.97rem;
  opacity:0;pointer-events:none; transform:translateY(8px);
  display:flex;align-items:center;justify-content:center;
  transition:all .3s;
  box-shadow:var(--sh-soft);
}
#back-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
#back-top:hover{transform:translateY(-3px); color:var(--blue-dark)}

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHY PRIMITIVES
══════════════════════════════════════════════════════════ */
.stag{
  display:inline-flex;align-items:center;gap:.7rem;
  color:var(--blue); font-size:.9rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  margin-bottom:1.25rem;
}
.stag::before{content:'';width:24px;height:1.5px;background:var(--blue);border-radius:2px}
.stag.center{margin-left:auto;margin-right:auto}
.stag.onimg{color:#fff}
.stag.onimg::before{background:#fff}

.sh1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.6rem, 6vw, 5rem);
  font-weight:400; letter-spacing:-.01em;
  line-height:1.05; color:var(--ink);
}
.sh1 em{font-style:italic;color:var(--blue);font-weight:400}

.sh2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem, 4.5vw, 3.6rem);
  font-weight:400; letter-spacing:-.005em;
  line-height:1.1; color:var(--ink);
  margin-bottom:.75rem;
}
.sh2 em{font-style:italic;color:var(--blue);font-weight:400}

.slead{
  font-size:1.15rem; font-weight:400;
  color:var(--slate-2); line-height:1.78;
  max-width:540px;
}
.slead.lg{font-size:1.22rem;line-height:1.8}
.slead.onimg{color:rgba(255,255,255,.85)}

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:1rem 1.9rem; border-radius:var(--r-pill);
  font-size:1.04rem; font-weight:500; letter-spacing:.01em;
  transition:all .3s cubic-bezier(.65,.05,.35,1);
  white-space:nowrap;
}
.btn i{transition:transform .25s}
.btn:hover i.fa-arrow-right{transform:translateX(3px)}

.btn-primary{
  background:var(--ink); color:#fff;
  box-shadow:0 8px 24px -6px rgba(11,20,38,.4), 0 1px 0 rgba(255,255,255,.15) inset;
}
.btn-primary:hover{background:var(--blue); transform:translateY(-2px); box-shadow:0 12px 32px -6px rgba(37,99,235,.5)}

.btn-blue{
  background:var(--blue); color:#fff;
  box-shadow:0 8px 24px -6px rgba(37,99,235,.4), 0 1px 0 rgba(255,255,255,.18) inset;
}
.btn-blue:hover{background:var(--blue-dark); transform:translateY(-2px); box-shadow:0 12px 32px -6px rgba(37,99,235,.55)}

.btn-glass{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7);
  color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 8px 20px -6px rgba(15,42,90,.15);
}
.btn-glass:hover{background:rgba(255,255,255,.85); transform:translateY(-2px)}

/* Glass button on dark image (hero) */
.btn-glass-dark{
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 8px 24px -8px rgba(0,0,0,.25);
}
.btn-glass-dark:hover{background:rgba(255,255,255,.22); transform:translateY(-2px)}

.btn-light{
  background:#fff; color:var(--ink);
  box-shadow:0 8px 24px -6px rgba(15,42,90,.18);
}
.btn-light:hover{background:var(--blue-50); transform:translateY(-2px)}

/* Watch-video play icon button (inline with text) */
.btn-play{
  display:inline-flex; align-items:center; gap:.85rem;
  padding:0; background:transparent; color:var(--ink);
  font-size:1.05rem; font-weight:500;
}
.btn-play .play-circle{
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink); font-size:.82rem;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 8px 20px -6px rgba(15,42,90,.15);
  transition:all .3s;
}
.btn-play:hover .play-circle{background:#fff; transform:scale(1.05)}
.btn-play.onimg{color:#fff}
.btn-play.onimg .play-circle{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35); color:#fff}
.btn-play.onimg:hover .play-circle{background:rgba(255,255,255,.3)}

/* ══════════════════════════════════════════════════════════
   PILLS / STATUS
══════════════════════════════════════════════════════════ */
.pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .95rem; border-radius:var(--r-pill);
  font-size:.84rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}
.pill.rising{background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.25);color:var(--blue)}
.pill.done{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.25);color:#059669}
.pill.loc{background:rgba(15,23,42,.05);border:1px solid rgba(15,23,42,.10);color:var(--slate-2)}
.pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:blink 1.8s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* Glass pill (over images) */
.pill-glass{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem 1rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:.86rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
}
.pill-glass .pill-dot{background:#fff}

/* Pill on light bg (hero tag style) */
.pill-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem 1rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-size:.86rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
}
.pill-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue-light);box-shadow:0 0 8px var(--blue-light)}

/* ══════════════════════════════════════════════════════════
   SECTION SCAFFOLDING
══════════════════════════════════════════════════════════ */
section{padding:clamp(4.5rem, 7vw, 7rem) clamp(1.5rem, 3vw, 2.5rem); position:relative}
.mw{max-width:1280px;margin:0 auto;width:100%}
.mw-narrow{max-width:1100px;margin:0 auto;width:100%}

/* Section divider header (stag + heading + side-link) */
.sec-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:1.5rem; margin-bottom:3rem;
}

/* ══════════════════════════════════════════════════════════
   HERO — full-bleed video, oversized type, glass elements
══════════════════════════════════════════════════════════ */
.hero{
  position:relative; width:100%;
  min-height:100vh; padding:0;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:#0a1a30;
}
.hero-vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:0;
  filter:brightness(.95) saturate(1.05);
}
.hero-poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  filter:brightness(.95) saturate(1.05);
}
/* Subtle gradient — text legibility only, NOT dark navy fill */
.hero-vig{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,20,38,0) 0%, rgba(11,20,38,0) 40%, rgba(11,20,38,.55) 100%),
    linear-gradient(90deg, rgba(11,20,38,.45) 0%, rgba(11,20,38,.10) 50%, rgba(11,20,38,0) 75%);
}
.hero-body{
  position:relative; z-index:3;
  width:100%; padding:clamp(4rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3.5rem) clamp(6rem, 10vw, 9rem);
  max-width:1380px;
}
.hero-h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.8rem, 8vw, 6.5rem);
  font-weight:400; letter-spacing:-.015em;
  line-height:1.02; color:#fff; margin:1.4rem 0 1.5rem;
  max-width:18ch;
}
.hero-h1 em{font-style:italic; color:#BFDBFE; font-weight:400}
.hero-sub{
  font-size:1.18rem; color:rgba(255,255,255,.85);
  font-weight:400; line-height:1.7; max-width:520px;
  margin-bottom:2.4rem;
}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}

/* Floating coords + scroll cue */
.hero-meta{
  position:absolute; right:3.5rem; bottom:3rem; z-index:3;
  display:flex; flex-direction:column; align-items:flex-end; gap:1.2rem;
}
@media(max-width:900px){.hero-meta{display:none}}
.hero-coord{
  font-size:.84rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.5); text-align:right; line-height:1.7;
}
.scroll-cue{
  display:flex; align-items:center; gap:.6rem;
  color:rgba(255,255,255,.55); font-size:.84rem;
  letter-spacing:.28em; text-transform:uppercase;
}
.scroll-cue::after{content:'';width:32px;height:1px;background:linear-gradient(90deg, rgba(255,255,255,.6), transparent);animation:scLine 2.4s ease infinite}
@keyframes scLine{0%,100%{opacity:.3}50%{opacity:1}}

/* ══════════════════════════════════════════════════════════
   HERO FEATURE STRIP — floating glass, overlaps hero/next sec
══════════════════════════════════════════════════════════ */
.feat-strip-wrap{
  position:relative; z-index:5;
  margin-top:-7rem; margin-bottom:6rem;
  padding:0 2.5rem;
}
@media(max-width:900px){.feat-strip-wrap{padding:0 1.5rem;margin-top:-5rem;margin-bottom:4rem}}
.feat-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:1280px; margin:0 auto;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(28px) saturate(1.7);
  -webkit-backdrop-filter:blur(28px) saturate(1.7);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-card);
  box-shadow:var(--sh-glass);
  overflow:hidden;
}
@media(max-width:900px){.feat-strip{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.feat-strip{grid-template-columns:1fr}}
.feat-cell{
  display:flex; flex-direction:column; gap:1.1rem;
  padding:2rem 1.85rem;
  border-right:1px solid rgba(15,23,42,.08);
  position:relative; transition:background .35s;
}
.feat-cell::before{
  content:attr(data-num); position:absolute; top:1.5rem; right:1.5rem;
  font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-style:italic;
  color:var(--blue); opacity:.55; letter-spacing:.04em;
}
.feat-cell:hover{background:rgba(255,255,255,.18)}
.feat-cell:last-child{border-right:none}
@media(max-width:900px){
  .feat-cell{padding:1.6rem 1.5rem; flex-direction:row; align-items:flex-start}
  .feat-cell::before{display:none}
  .feat-cell:nth-child(2n){border-right:none}
  .feat-cell:nth-child(-n+2){border-bottom:1px solid rgba(15,23,42,.08)}
}
@media(max-width:520px){
  .feat-cell{border-right:none;border-bottom:1px solid rgba(15,23,42,.08)}
  .feat-cell:last-child{border-bottom:none}
}
.feat-ico{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg, var(--blue-50), #fff);
  border:1px solid rgba(37,99,235,.14);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);font-size:1.28rem; flex-shrink:0;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 6px 14px -6px rgba(37,99,235,.18);
}
@media(max-width:900px){.feat-ico{width:42px;height:42px;font-size:1.18rem;border-radius:12px}}
.feat-title{font-size:1.18rem;font-weight:600;color:var(--ink);margin-bottom:.35rem;letter-spacing:-.005em;line-height:1.3}
.feat-desc{font-size:1.04rem;color:var(--muted);line-height:1.6}
@media(max-width:900px){.feat-title{font-size:1.05rem;margin-bottom:.25rem} .feat-desc{font-size:.98rem;line-height:1.5}}

/* ══════════════════════════════════════════════════════════
   BENTO ABOUT — big glass card with image + floating stats
══════════════════════════════════════════════════════════ */
.bento{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7);
  border-radius:32px;
  box-shadow:var(--sh-glass);
  padding:clamp(1.75rem, 3.5vw, 3.5rem);
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(1.75rem, 3.5vw, 3.5rem); align-items:center;
}
@media(max-width:900px){.bento{grid-template-columns:1fr;border-radius:24px}}
.bento-img-wrap{position:relative}
.bento-img{
  width:100%; aspect-ratio:5/4; object-fit:cover;
  border-radius:20px; display:block;
  box-shadow:0 20px 50px -12px rgba(15,42,90,.25);
}
@media(max-width:560px){.bento-img{aspect-ratio:16/10}}

/* Floating stats card on bento image */
.bento-stats{
  position:absolute; right:1.5rem; top:1.5rem;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.35);
  border-radius:18px;
  padding:1.2rem 1.4rem;
  display:flex; flex-direction:column; gap:1rem;
  min-width:170px;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 12px 32px -8px rgba(0,0,0,.18);
}
.bento-stat{display:flex;align-items:center;gap:.85rem;color:#fff}
.bento-stat-ico{
  width:30px;height:30px;border-radius:8px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:.84rem; flex-shrink:0;
}
.bento-stat-num{font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:500;line-height:1}
.bento-stat-lbl{font-size:.84rem;color:rgba(255,255,255,.78);letter-spacing:.05em;margin-top:.1rem;display:block}
@media(max-width:560px){.bento-stats{position:static;margin-top:1rem;background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.85)} .bento-stat{color:var(--ink)} .bento-stat-ico{background:var(--blue-50);border-color:var(--tint-soft);color:var(--blue)} .bento-stat-lbl{color:var(--muted)}}

/* ══════════════════════════════════════════════════════════
   PROJECT CARDS — premium glass tiles
══════════════════════════════════════════════════════════ */
.proj-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
}
@media(max-width:1100px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.proj-grid{grid-template-columns:1fr}}

.proj-card{
  position:relative; display:block;
  border-radius:20px; overflow:hidden;
  aspect-ratio:4/5;
  background:#E6F1FF;
  box-shadow:0 8px 24px -8px rgba(15,42,90,.18);
  transition:transform .5s cubic-bezier(.25,1,.5,1), box-shadow .4s;
}
@media(max-width:900px){.proj-card{aspect-ratio:4/3}}
.proj-card:hover{transform:translateY(-6px); box-shadow:0 24px 50px -12px rgba(15,42,90,.28)}
.proj-card img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  filter:brightness(.95) saturate(1.05);
  transition:transform .8s cubic-bezier(.25,1,.5,1);
}
.proj-card:hover img{transform:scale(1.06)}
/* Subtle bottom gradient ONLY for caption legibility */
.proj-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(11,20,38,.65) 100%);
  pointer-events:none;
}
.proj-card-cap{
  position:absolute; left:1.25rem; right:1.25rem; bottom:1.25rem;
  display:flex; justify-content:space-between; align-items:flex-end;
  z-index:2; gap:.75rem;
}
.proj-card-cap-text{flex:1; min-width:0}
.proj-card-h{font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:500;color:#fff;letter-spacing:-.005em;margin-bottom:.18rem;line-height:1.2}
.proj-card-loc{font-size:.96rem;color:rgba(255,255,255,.82);letter-spacing:.02em}
.proj-card-arrow{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-size:.9rem;
  flex-shrink:0;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
  transition:all .3s;
}
.proj-card:hover .proj-card-arrow{background:#fff; color:var(--ink); transform:rotate(-45deg)}
.proj-card-tag-glass{
  position:absolute; top:1.1rem; left:1.1rem; z-index:2;
}

/* ══════════════════════════════════════════════════════════
   STATS BAR — large numbers, divider lines
══════════════════════════════════════════════════════════ */
.stats-glass{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7);
  border-radius:24px;
  box-shadow:var(--sh-glass);
  padding:2.5rem 1rem;
  display:grid; grid-template-columns:repeat(4,1fr);
}
@media(max-width:760px){.stats-glass{grid-template-columns:1fr 1fr;padding:1.75rem 1rem}}
.stat-cell{
  text-align:center; padding:1rem 1.25rem;
  border-right:1px solid rgba(15,23,42,.08);
}
.stat-cell:last-child{border-right:none}
@media(max-width:760px){
  .stat-cell:nth-child(2n){border-right:none}
  .stat-cell:nth-child(-n+2){border-bottom:1px solid rgba(15,23,42,.08); padding-bottom:1.5rem; margin-bottom:.5rem}
}
.stat-num{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.2rem, 4vw, 3rem); font-weight:500;
  color:var(--ink); line-height:1; letter-spacing:-.02em;
}
.stat-num span{color:var(--blue)}
.stat-lbl{
  font-size:.9rem; color:var(--muted);
  letter-spacing:.18em; text-transform:uppercase;
  margin-top:.6rem; display:block;
}

/* Credentials strip — replaces fake partner logos */
.cred-strip{
  margin-top:2.5rem;
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(15,23,42,.08);
  padding-top:2rem;
}
@media(max-width:900px){.cred-strip{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
@media(max-width:560px){.cred-strip{grid-template-columns:1fr 1fr;gap:1rem}}
.cred-cell{
  display:flex; align-items:center; gap:.6rem;
  justify-content:center; color:var(--slate-2);
  font-size:.94rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}
.cred-cell i{color:var(--blue);font-size:1.05rem}

/* ══════════════════════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════════════════════ */
.mrow{
  overflow:hidden; padding:1.4rem 0;
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:1px solid rgba(15,23,42,.06);
  background:rgba(240,247,255,.5);
}
.mtrack{display:flex; width:max-content; animation:marq 38s linear infinite; white-space:nowrap}
.mtrack.rev{animation-direction:reverse; animation-duration:30s}
.mtrack:hover{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mi{
  display:inline-flex;align-items:center;gap:1.4rem;
  padding:.35rem 2.5rem;
  font-family:'Cormorant Garamond',serif;
  font-size:1.32rem; font-weight:400; font-style:italic;
  color:var(--muted-2); letter-spacing:.01em;
}
.md{width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.55;flex-shrink:0}

/* ══════════════════════════════════════════════════════════
   CTA BAND — light, atmospheric, glass-driven
══════════════════════════════════════════════════════════ */
.cta-band{
  position:relative; padding:clamp(4.5rem, 7vw, 7rem) clamp(1.5rem, 3vw, 2.5rem); text-align:center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(191,219,254,.6), transparent 70%),
    radial-gradient(60% 80% at 50% 100%, rgba(219,234,254,.5), transparent 70%),
    linear-gradient(180deg, #F0F7FF 0%, #FAFCFF 100%);
  border-top:1px solid rgba(37,99,235,.08);
  border-bottom:1px solid rgba(37,99,235,.08);
  overflow:hidden;
}
@media(max-width:560px){.cta-band::before,.cta-band::after{width:380px;height:380px}}
.cta-band::before, .cta-band::after{
  content:''; position:absolute;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(96,165,250,.18), transparent 70%);
  pointer-events:none;
}
.cta-band::before{top:-200px; left:-200px}
.cta-band::after{bottom:-200px; right:-200px}
.cta-band-inner{position:relative; z-index:1; max-width:680px; margin:0 auto}
.cta-band h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem, 4.5vw, 3.6rem);font-weight:400;color:var(--ink);margin-bottom:1rem;letter-spacing:-.01em;line-height:1.1}
.cta-band h2 em{font-style:italic;color:var(--blue);font-weight:400}
.cta-band p{color:var(--slate-2);font-size:1.18rem;line-height:1.78;margin-bottom:2.4rem}
.cta-band-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════
   FOOTER — minimal single-row
══════════════════════════════════════════════════════════ */
footer{
  background:linear-gradient(180deg, #FAFCFF 0%, #F0F7FF 100%);
  border-top:1px solid rgba(15,23,42,.08);
  padding:1.6rem 2.5rem;
}
.footer-bottom{
  max-width:1280px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.5rem;
}
@media(max-width:560px){
  footer{padding:1.4rem 1.25rem}
  .footer-bottom{justify-content:center; text-align:center; gap:.3rem}
}
.fcopy{font-size:.98rem; color:var(--muted); letter-spacing:.01em; line-height:1.6}
.fcopy span{color:var(--blue);font-weight:500}
.fdesign{font-size:.98rem; color:var(--muted-2); letter-spacing:.01em}
.fdesign span{color:var(--muted)}

/* ══════════════════════════════════════════════════════════
   PAGE HERO (interior pages)
══════════════════════════════════════════════════════════ */
.page-hero{
  position:relative; padding:calc(var(--nav-h) + clamp(4rem, 7vw, 7rem)) clamp(1.5rem, 3vw, 2.5rem) clamp(3.5rem, 6vw, 5rem);
  min-height:auto;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(191,219,254,.5), transparent 70%),
    linear-gradient(180deg, #F2F8FF 0%, #FAFCFF 100%);
  overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; top:-150px; right:-150px;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle, rgba(96,165,250,.18), transparent 70%);
  pointer-events:none;
}
.page-hero-inner{position:relative; z-index:1; max-width:1280px; margin:0 auto}

/* Page hero with bg image — for TC2 page */
.ph-img{
  position:relative; padding:calc(var(--nav-h) + clamp(3rem, 5vw, 6rem)) clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
  min-height:74vh; overflow:hidden;
  display:flex; align-items:flex-end;
}
@media(max-width:900px){.ph-img{min-height:60vh}}
.ph-img-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:brightness(.95) saturate(1.05)}
.ph-img-vig{position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(11,20,38,.15) 0%, rgba(11,20,38,0) 35%, rgba(11,20,38,.55) 100%),
    linear-gradient(90deg, rgba(11,20,38,.4) 0%, rgba(11,20,38,0) 60%);
}
.ph-img-body{position:relative; z-index:2; max-width:1280px; margin:0 auto; width:100%}

/* ══════════════════════════════════════════════════════════
   TC2 PAGE
══════════════════════════════════════════════════════════ */
.tc2-h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  font-weight:400; letter-spacing:-.01em;
  line-height:1; color:#fff; margin:1.2rem 0 .75rem;
}
.tc2-h1 em{font-style:italic; color:#BFDBFE}
.tc2-meta{font-size:1.05rem; color:rgba(255,255,255,.78); margin-bottom:2rem}
.tc2-pills{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.5rem}

.ov-grid{
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:4rem; align-items:start; max-width:1280px; margin:0 auto;
}
@media(max-width:900px){.ov-grid{grid-template-columns:1fr; gap:2.5rem}}

/* Snapshot card */
.snap-card{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  box-shadow:var(--sh-glass);
  overflow:hidden;
}
.snap-hdr{
  padding:1.1rem 1.5rem;
  border-bottom:1px solid rgba(15,23,42,.08);
  font-size:.86rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--blue); font-weight:600;
}
.snap-row{
  display:grid; grid-template-columns:auto 1fr;
  align-items:center; gap:1.5rem;
  padding:1rem 1.5rem;
  border-bottom:1px solid rgba(15,23,42,.06);
}
.snap-row:last-child{border-bottom:none}
.snap-key{font-size:.98rem; color:var(--muted); white-space:nowrap}
.snap-val{font-size:1.06rem; color:var(--ink); text-align:right; font-weight:500}
.snap-val.accent{font-family:'Cormorant Garamond',serif; font-size:1.22rem; color:var(--blue); font-weight:500}
@media(max-width:420px){.snap-row{grid-template-columns:1fr; gap:.25rem}.snap-val{text-align:left;font-size:1.05rem}}

/* TC2 Gallery */
.tc2-gal{
  display:grid; grid-template-columns:1.6fr 1fr;
  grid-template-rows:280px 280px;
  gap:12px; max-width:1280px; margin:0 auto;
}
.tc2-gal .g-main{grid-row:1/3}
@media(max-width:760px){.tc2-gal{grid-template-columns:1fr 1fr; grid-template-rows:auto}.tc2-gal .g-main{grid-row:span 1}}
@media(max-width:480px){.tc2-gal{grid-template-columns:1fr}.tc2-gal .g-main{grid-row:span 1}}
.tc2-gal-item{position:relative; overflow:hidden; border-radius:16px; background:#E6F1FF}
.tc2-gal-item img{width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.97) saturate(1.05); transition:transform .8s cubic-bezier(.25,1,.5,1)}
.tc2-gal-item:hover img{transform:scale(1.04)}
.tc2-gal-item:not(.g-main){height:280px}
.g-main{height:100%}
@media(max-width:760px){.tc2-gal-item, .tc2-gal-item:not(.g-main){height:240px}}
@media(max-width:480px){.tc2-gal-item, .tc2-gal-item:not(.g-main){height:260px}}

/* Video showcase */
.vid-wrap{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:20px; overflow:hidden;
  max-width:1280px; margin:0 auto;
  box-shadow:0 20px 50px -12px rgba(15,42,90,.2);
  background:#0a1a30;
}
.vid-wrap video{position:relative; width:100%; height:100%; object-fit:cover; display:block; z-index:1}
.vid-wrap-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.vid-label{
  position:absolute; bottom:1rem; left:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.55rem 1rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:.96rem; font-weight:500; letter-spacing:.03em;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
}
.vid-label i{color:var(--blue-light)}

/* Amenities — glass tiles in grid */
.amen-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
  margin-top:2.5rem;
}
@media(max-width:560px){.amen-grid{grid-template-columns:1fr}}
.amen-tile{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.2rem 1.3rem;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.65);
  border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 8px 24px -10px rgba(15,42,90,.12);
  transition:transform .35s, box-shadow .35s;
}
.amen-tile:hover{transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 16px 36px -8px rgba(37,99,235,.18)}
.amen-tile-ico{
  width:38px;height:38px;border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg, var(--blue-50), #fff);
  border:1px solid rgba(37,99,235,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue); font-size:1.05rem;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset;
}
.amen-tile-h{font-size:1.08rem;font-weight:600;color:var(--ink);margin-bottom:.22rem}
.amen-tile-p{font-size:.98rem;color:var(--muted);line-height:1.55}

/* Pricing — glass cards */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;max-width:1100px;margin:0 auto}
@media(max-width:900px){.price-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.price-grid{grid-template-columns:1fr}}
.price-card{
  position:relative;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7);
  border-radius:24px;
  padding:2rem 1.75rem;
  box-shadow:var(--sh-glass);
  transition:transform .35s, box-shadow .35s;
}
.price-card:hover{transform:translateY(-6px); box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 28px 60px -16px rgba(37,99,235,.25)}
.price-card.feat{
  background:rgba(37,99,235,.06);
  border-color:rgba(37,99,235,.32);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 24px 60px -16px rgba(37,99,235,.25);
}
.price-feat-tag{
  position:absolute; top:-12px; right:1.5rem;
  background:var(--blue); color:#fff;
  font-size:.82rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.32rem .85rem; border-radius:var(--r-pill);
  box-shadow:0 8px 20px -4px rgba(37,99,235,.4);
}
.price-type{font-size:.9rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:.4rem}
.price-size{font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-style:italic; color:var(--slate); margin-bottom:1.25rem}
.price-row{display:flex; justify-content:space-between; align-items:baseline; padding:.7rem 0; border-bottom:1px solid rgba(15,23,42,.06)}
.price-row:last-of-type{border-bottom:none; margin-bottom:1.25rem}
.price-plan{font-size:1rem; color:var(--muted)}
.price-amt{font-family:'Cormorant Garamond',serif; font-size:1.45rem; font-weight:500; color:var(--ink); letter-spacing:-.01em}
.price-amt sup{font-size:.65rem; font-family:'Inter',sans-serif; color:var(--muted); font-weight:500}
.price-dep{display:block; font-size:.84rem; color:var(--muted); text-align:right; margin-top:.1rem; letter-spacing:.05em}
.price-cta{
  display:block; text-align:center;
  background:var(--ink); color:#fff;
  padding:.95rem; border-radius:var(--r-pill);
  font-size:1rem; font-weight:500; letter-spacing:.04em;
  transition:background .3s, transform .2s;
}
.price-cta:hover{background:var(--blue); transform:translateY(-1px)}
.price-card.feat .price-cta{background:var(--blue)}
.price-card.feat .price-cta:hover{background:var(--blue-dark)}

/* Floor plan tabs */
.fp-tabs{display:flex; gap:.5rem; flex-wrap:wrap; margin:1.75rem 0}
.fp-tab{
  padding:.7rem 1.5rem; border-radius:var(--r-pill);
  font-size:1rem; font-weight:500; letter-spacing:.01em;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.65);
  color:var(--slate); transition:all .3s;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset;
}
.fp-tab.active, .fp-tab:hover{background:var(--blue); color:#fff; border-color:var(--blue); box-shadow:0 8px 20px -6px rgba(37,99,235,.4)}
.fp-panel{display:none}
.fp-panel.active{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start}
@media(max-width:760px){.fp-panel.active{grid-template-columns:1fr}}
.fp-img-box{
  border-radius:20px; overflow:hidden;
  background:rgba(255,255,255,.55); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.65);
  padding:1.5rem;
  box-shadow:var(--sh-soft);
}
.fp-img-box img{width:100%; max-height:480px; object-fit:contain; display:block; border-radius:8px}
.fp-spec-list{margin-top:1.5rem}
.fp-spec-row{display:flex; justify-content:space-between; align-items:center; padding:.95rem 0; border-bottom:1px solid rgba(15,23,42,.06); font-size:1.06rem}
.fp-spec-row:last-child{border-bottom:none}
.fp-sk{color:var(--muted)}
.fp-sv{color:var(--ink); font-weight:500}

/* Timeline */
.tl{position:relative; padding-left:2.5rem; margin-top:2rem}
.tl::before{content:''; position:absolute; left:9px; top:0; bottom:0; width:2px; background:rgba(15,23,42,.08)}
.tl-step{position:relative; margin-bottom:2.6rem}
.tl-step:last-child{margin-bottom:0}
.tl-dot{
  position:absolute; left:-2.5rem; top:.3rem;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid rgba(15,23,42,.15);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px -4px rgba(15,42,90,.15);
}
.tl-dot.act{border-color:var(--blue); background:#fff}
.tl-dot.act::after{content:''; width:7px; height:7px; border-radius:50%; background:var(--blue); animation:blink 1.8s ease infinite}
.tl-date{font-size:.86rem; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); margin-bottom:.4rem; font-weight:600}
.tl-title{font-family:'Cormorant Garamond',serif; font-size:1.45rem; font-weight:500; color:var(--ink); margin-bottom:.4rem}
.tl-desc{font-size:1.05rem; color:var(--slate-2); line-height:1.72}

/* Location */
.loc-pair{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;max-width:1280px;margin:0 auto}
@media(max-width:900px){.loc-pair{grid-template-columns:1fr;gap:3rem}}
.area-row{display:flex; align-items:center; gap:1rem; padding:.95rem 0; border-bottom:1px solid rgba(15,23,42,.06)}
.area-row:last-child{border-bottom:none}
.area-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 4px rgba(255,255,255,.7)}
.area-dot.b{background:var(--blue)}
.area-dot.r{background:var(--blue-dark)}
.area-dot.g{background:#10B981}
.area-name{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:var(--ink);flex:1;font-weight:500}
.area-note{font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.map-box{
  aspect-ratio:4/3;
  background:rgba(255,255,255,.55); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.65);
  border-radius:20px; overflow:hidden;
  box-shadow:var(--sh-glass);
}
.map-box svg{width:100%;height:100%}

/* ══════════════════════════════════════════════════════════
   PORTFOLIO PAGE
══════════════════════════════════════════════════════════ */
.proj-block{padding:clamp(4rem, 6vw, 6rem) clamp(1.5rem, 3vw, 2.5rem); position:relative; overflow:hidden}
.proj-hdr{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;margin-bottom:3rem;max-width:1280px;margin-left:auto;margin-right:auto}

.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1240px; margin:0 auto}
@media(max-width:760px){.gal{grid-template-columns:1fr 1fr; gap:14px}}
@media(max-width:480px){.gal{grid-template-columns:1fr}}
.gal-item{
  position:relative; overflow:hidden;
  border-radius:18px; aspect-ratio:4/5;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.7);
  padding:10px; max-height:480px;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 12px 36px -12px rgba(15,42,90,.18);
  transition:transform .5s cubic-bezier(.25,1,.5,1), box-shadow .4s;
}
.gal-item:hover{transform:translateY(-4px); box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 24px 50px -12px rgba(37,99,235,.22)}
.gal-item.wide{grid-column:span 2; aspect-ratio:16/10; max-height:480px}
@media(max-width:760px){.gal-item.wide{grid-column:span 1; aspect-ratio:4/5}}
.gal-img-frame{
  position:relative; width:100%; height:100%;
  border-radius:11px; overflow:hidden; background:#E6F1FF;
}
.gal-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(.97) saturate(1.05);
  transition:transform .8s cubic-bezier(.25,1,.5,1);
}
.gal-item:hover img{transform:scale(1.05)}
.gal-cap{
  position:absolute; left:1.4rem; right:1.4rem; bottom:1.4rem; z-index:2;
  padding:.85rem 1.1rem;
  background:rgba(255,255,255,.18); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.3); border-radius:12px;
  color:#fff; font-size:.98rem;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s, transform .3s;
}
.gal-item:hover .gal-cap{opacity:1; transform:translateY(0)}
.gal-cap-h{font-weight:600; margin-bottom:.1rem; font-size:1.05rem}
.gal-cap-s{font-size:.9rem; opacity:.82}

/* Kucaro */
.kucaro-layout{display:grid;grid-template-columns:420px 1fr;gap:3rem;align-items:start;max-width:1280px;margin:0 auto}
@media(max-width:900px){.kucaro-layout{grid-template-columns:1fr;gap:2.5rem}}
.kucaro-img{border-radius:20px;overflow:hidden;box-shadow:var(--sh-md)}
.kucaro-img img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;filter:brightness(.97) saturate(1.05)}
.kucaro-facts{margin-top:1rem}

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE — pillars
══════════════════════════════════════════════════════════ */
.pillar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;max-width:1080px}
@media(max-width:760px){.pillar-grid{grid-template-columns:1fr}}
.pillar{
  padding:2rem 1.8rem;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 12px 32px -10px rgba(15,42,90,.14);
  transition:transform .35s, box-shadow .35s;
}
.pillar:hover{transform:translateY(-4px); box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 24px 50px -12px rgba(37,99,235,.2)}
.pillar-ico{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg, var(--blue-50), #fff);
  border:1px solid rgba(37,99,235,.14);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);font-size:1.22rem; margin-bottom:1.1rem;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 4px 12px -4px rgba(37,99,235,.18);
}
.pillar h4{font-size:1.12rem;font-weight:600;color:var(--ink);margin-bottom:.55rem;letter-spacing:-.005em}
.pillar p{font-size:1.06rem;color:var(--slate-2);line-height:1.74}

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;max-width:1180px;margin:0 auto}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:2rem}}

.cf-glass{
  padding:2.5rem;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7);
  border-radius:24px;
  box-shadow:var(--sh-glass);
}
@media(max-width:560px){.cf-glass{padding:1.75rem}}

.cf{display:flex;flex-direction:column;gap:1.1rem}
.cfrow{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:560px){.cfrow{grid-template-columns:1fr}}
.cff{display:flex;flex-direction:column;gap:.45rem}
.cff label{font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cff input, .cff select, .cff textarea{
  background:rgba(255,255,255,.6);
  border:1.5px solid rgba(15,23,42,.08);
  border-radius:12px; padding:1.1rem 1.25rem;
  color:var(--ink); font-family:'Inter',sans-serif; font-size:1.05rem;
  outline:none; transition:border-color .25s, background .25s, box-shadow .25s;
  width:100%;
}
.cff input::placeholder, .cff textarea::placeholder{color:var(--muted-2)}
.cff input:focus, .cff select:focus, .cff textarea:focus{
  border-color:var(--blue); background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.1);
}
.cff select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2364748B' stroke-width='1.5'><path d='M1 1l5 5 5-5'/></svg>"); background-repeat:no-repeat; background-position:right 1rem center; background-size:11px; padding-right:2.5rem}
.cff textarea{resize:vertical; min-height:120px}
.cf-btn{
  align-self:flex-start;
  background:var(--ink); color:#fff;
  padding:1rem 2.1rem; border-radius:var(--r-pill);
  font-size:1.04rem; font-weight:500; letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:.65rem;
  transition:all .3s; box-shadow:0 8px 24px -6px rgba(11,20,38,.4);
}
.cf-btn:hover{background:var(--blue); transform:translateY(-2px); box-shadow:0 12px 32px -6px rgba(37,99,235,.5)}
.cf-ok{display:none; padding:.95rem 1.2rem; border-radius:12px; background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.25); color:#059669; font-size:1.06rem; align-items:center; gap:.6rem}
.cf-err{display:none; padding:.95rem 1.2rem; border-radius:12px; background:rgba(239,68,68,.05); border:1px solid rgba(239,68,68,.18); color:#DC2626; font-size:1.06rem; align-items:center; gap:.6rem}

/* Contact info card */
.ci-card{
  padding:2rem;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px; margin-bottom:1.25rem;
  box-shadow:var(--sh-glass);
}
.ci-block{padding:1rem 0; border-bottom:1px solid rgba(15,23,42,.06)}
.ci-block:first-child{padding-top:0}
.ci-block:last-child{padding-bottom:0; border-bottom:none}
.ci-block h4{font-size:.9rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem;display:flex;align-items:center;gap:.5rem}
.ci-block h4 i{color:var(--blue);font-size:.97rem}
.ci-block a, .ci-block p{font-family:'Cormorant Garamond',serif;font-size:1.28rem;font-weight:500;color:var(--ink);line-height:1.55;display:block;transition:color .2s}
.ci-block a:hover{color:var(--blue)}

.legal-note{padding:1.1rem 1.2rem;background:rgba(37,99,235,.05);border:1px solid rgba(37,99,235,.12);border-radius:14px;margin-bottom:1.25rem}
.legal-note p{font-size:1rem;color:var(--muted);line-height:1.7}
.legal-note p span{font-weight:600;color:var(--ink);display:block;margin-bottom:.25rem;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}

.qa-link{display:flex;align-items:center;gap:.7rem;padding:.8rem 0;border-bottom:1px solid rgba(15,23,42,.06);font-size:1.06rem;color:var(--slate);transition:color .2s, padding-left .25s}
.qa-link:last-child{border-bottom:none}
.qa-link:hover{color:var(--blue);padding-left:.4rem}
.qa-link i{color:var(--blue);width:16px;flex-shrink:0;font-size:.97rem}

.socials{display:flex;gap:.6rem;margin-top:.5rem}
.soc{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.55); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
  color:var(--slate-2); font-size:1.05rem; transition:all .3s;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset;
}
.soc:hover{color:var(--blue); border-color:var(--blue); transform:translateY(-2px)}

/* ══════════════════════════════════════════════════════════
   SECTION BACKGROUND TINTS — bring out glassmorphism
══════════════════════════════════════════════════════════ */
.tint-a{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(191,219,254,.45), transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(219,234,254,.4), transparent 65%),
    linear-gradient(180deg, rgba(240,247,255,.3), rgba(255,255,255,.1));
}
.tint-b{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(147,197,253,.32), transparent 70%),
    radial-gradient(80% 50% at 50% 100%, rgba(191,219,254,.32), transparent 70%),
    linear-gradient(180deg, rgba(248,251,255,.5), rgba(238,245,255,.3));
}
.tint-c{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(96,165,250,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(240,247,255,.5));
}
.tint-deep{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 50% at 20% 50%, rgba(96,165,250,.22), transparent 70%),
    radial-gradient(60% 50% at 80% 50%, rgba(147,197,253,.20), transparent 70%),
    linear-gradient(135deg, rgba(219,234,254,.55), rgba(240,247,255,.4));
}
/* Soft floating shape decorations per section */
.tint-a::before, .tint-b::before, .tint-c::before, .tint-deep::before{
  content:''; position:absolute; pointer-events:none;
  width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(96,165,250,.14), transparent 70%);
  filter:blur(20px); opacity:.85; z-index:0;
}
.tint-a::before{top:-120px; right:-120px}
.tint-b::before{bottom:-120px; left:-120px}
.tint-c::before{top:30%; left:-180px; width:420px;height:420px}
.tint-deep::before{top:-150px; left:50%; transform:translateX(-50%); width:640px;height:640px}
.tint-a > *, .tint-b > *, .tint-c > *, .tint-deep > *{position:relative; z-index:1}

/* ══════════════════════════════════════════════════════════
   ANIMATIONS — cinematic, aria-lagos-style
══════════════════════════════════════════════════════════ */
.anim-up{opacity:0; transform:translateY(48px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1)}
.anim-up.visible{opacity:1; transform:none}

.anim-in{opacity:0; transition:opacity 1.2s ease}
.anim-in.visible{opacity:1}

.anim-left{opacity:0; transform:translateX(-44px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1)}
.anim-left.visible{opacity:1; transform:none}

.anim-right{opacity:0; transform:translateX(44px); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1)}
.anim-right.visible{opacity:1; transform:none}

/* Image clip-path reveal — used on hero/portfolio images */
.anim-clip{clip-path:inset(0 0 100% 0); transition:clip-path 1.4s cubic-bezier(.65,.05,.35,1)}
.anim-clip.visible{clip-path:inset(0 0 0 0)}

/* Subtle scale-in for cards */
.anim-zoom{opacity:0; transform:scale(.94); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1)}
.anim-zoom.visible{opacity:1; transform:none}

/* Mask-line reveal for headings — text slides up behind a clip */
.anim-mask{
  display:inline-block; overflow:hidden; line-height:1.05;
}
.anim-mask > span{
  display:inline-block; transform:translateY(110%);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.anim-mask.visible > span{transform:translateY(0)}

/* Stagger delays */
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}
.d7{transition-delay:.56s}.d8{transition-delay:.64s}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .anim-up, .anim-in, .anim-left, .anim-right, .anim-zoom, .anim-clip, .anim-mask > span{
    transition-duration:.4s !important; transform:none !important; opacity:1 !important; clip-path:none !important;
  }
}

/* Hide custom cursor on touch devices */
@media (hover:none){
  body, a, button, input, select, textarea, label{cursor:auto !important}
  #cdot, #cring{display:none}
}