/* =========================================================
   CORNER CADDE RESIDENCE — Design System
   Warm-luxe • antique gold on deep espresso • cinematic
   Display: Marcellus  •  Body/UI: Jost
   ========================================================= */

:root{
  /* — Surfaces (deep warm espresso) — */
  --ink:        #15110b;
  --ink-2:      #1c1710;
  --ink-3:      #251d14;
  --ink-card:   #221a11;
  --cream:      #f4eddf;
  --cream-2:    #ece2cf;

  /* — Antique gold (the building's glow) — */
  --gold:       #c9a35b;
  --gold-soft:  #ddc28b;
  --gold-bright:#e9d09a;
  --gold-deep:  #9a7b3e;

  /* — Ink / text on dark — */
  --ivory:      #f3ebdd;
  --ivory-dim:  rgba(243,235,221,.62);
  --ivory-faint:rgba(243,235,221,.40);

  /* — text on cream — */
  --cocoa:      #2a2117;
  --cocoa-dim:  rgba(42,33,23,.66);

  /* — Lines — */
  --line:       rgba(201,163,91,.22);
  --line-soft:  rgba(243,235,221,.10);
  --line-strong:rgba(201,163,91,.42);

  /* — Type — */
  --serif: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", system-ui, -apple-system, sans-serif;

  /* — Layout — */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
  --nav-h: 78px;

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

/* ---------- reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--ivory);
  line-height:1.6;
  font-weight:300;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--gold); color:var(--ink); }

/* ---------- type scale ---------- */
.kicker{
  font-family:var(--sans);
  font-weight:400;
  font-size:12px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.85em;
}
.kicker::before{
  content:""; width:34px; height:1px; background:var(--gold);
  opacity:.7; display:inline-block;
}
.kicker.no-rule::before{ display:none; }
.kicker.center{ justify-content:center; }
.kicker.center::after{
  content:""; width:34px; height:1px; background:var(--gold); opacity:.7;
}

h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:.01em; }
.display{ font-size:clamp(44px, 7.2vw, 104px); line-height:.98; }
.h-xl{ font-size:clamp(34px, 4.6vw, 64px); }
.h-lg{ font-size:clamp(28px, 3.4vw, 46px); }
.h-md{ font-size:clamp(22px, 2.2vw, 32px); }
.lead{ font-size:clamp(17px,1.4vw,20px); color:var(--ivory-dim); font-weight:300; line-height:1.75; }
p{ text-wrap:pretty; }

/* gold gradient text accent */
.gilt{
  background:linear-gradient(100deg,var(--gold-deep),var(--gold-bright) 40%,var(--gold) 70%,var(--gold-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px, 11vh, 150px); position:relative; }
.section.tight{ padding-block:clamp(54px,7vh,96px); }
.cream-bg{ background:var(--cream); color:var(--cocoa); }
.cream-bg .lead{ color:var(--cocoa-dim); }
.cream-bg .kicker{ color:var(--gold-deep); }
.cream-bg .kicker::before,.cream-bg .kicker.center::after{ background:var(--gold-deep); }
.ink2-bg{ background:var(--ink-2); }

.grid{ display:grid; gap:clamp(24px,3vw,56px); }
.center{ text-align:center; }
.mxw-60{ max-width:60ch; }
.mxw-46{ max-width:46ch; }
.mt-s{ margin-top:18px; } .mt-m{ margin-top:32px; } .mt-l{ margin-top:54px; }

/* ---------- corner-bracket brand motif ---------- */
.corner-frame{ position:relative; }
.corner-frame::before,.corner-frame::after{
  content:""; position:absolute; width:26px; height:26px; pointer-events:none;
}
.corner-frame::before{ top:0; left:0; border-top:1.5px solid var(--gold); border-left:1.5px solid var(--gold); }
.corner-frame::after{ bottom:0; right:0; border-bottom:1.5px solid var(--gold); border-right:1.5px solid var(--gold); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:400; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
  padding:16px 30px; border:1px solid var(--gold);
  color:var(--gold); background:transparent;
  transition:.45s var(--ease); position:relative; overflow:hidden;
}
.btn::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:translateY(101%); transition:.45s var(--ease); z-index:-1;
}
.btn:hover{ color:var(--ink); }
.btn:hover::after{ transform:translateY(0); }
.btn.solid{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn.solid::after{ background:var(--ink); }
.btn.solid:hover{ color:var(--gold); }
.btn .ar{ font-size:15px; transition:transform .45s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.cream-bg .btn{ color:var(--gold-deep); border-color:var(--gold-deep); }
.cream-bg .btn::after{ background:var(--gold-deep); }
.cream-bg .btn:hover{ color:var(--cream); }

/* ================= NAV ================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(21,17,11,.82); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }

/* logo */
.brand{ display:flex; align-items:center; gap:13px; }
.brand-mark{
  width:30px; height:30px; position:relative; flex:none;
}
.brand-mark::before,.brand-mark::after{
  content:""; position:absolute; width:15px; height:15px;
}
.brand-mark::before{ top:0; left:0; border-top:1.5px solid var(--gold); border-left:1.5px solid var(--gold); }
.brand-mark::after{ bottom:0; right:0; border-bottom:1.5px solid var(--gold); border-right:1.5px solid var(--gold); }
.brand-mark span{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); font-size:14px; color:var(--gold);
}
.brand-txt{ line-height:1.05; }
.brand-txt b{ font-family:var(--serif); font-weight:400; font-size:18px; letter-spacing:.13em; display:block; white-space:nowrap; }
.brand-txt small{ font-size:9.5px; letter-spacing:.46em; color:var(--ivory-dim); text-transform:uppercase; }

/* links */
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:var(--ivory-dim);
  position:relative; padding:6px 0; transition:color .35s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold);
  transition:width .4s var(--ease);
}
.nav-links a:hover,.nav-links a.active{ color:var(--ivory); }
.nav-links a.active::after,.nav-links a:hover::after{ width:100%; }

.nav-right{ display:flex; align-items:center; gap:20px; }
.lang{
  display:flex; align-items:center; font-size:12px; letter-spacing:.14em; gap:7px;
  border:1px solid var(--line-strong); border-radius:40px; padding:7px 13px;
}
.lang button{ color:var(--ivory-faint); transition:color .3s; letter-spacing:.1em; }
.lang button.on{ color:var(--gold); }
.lang i{ width:1px; height:11px; background:var(--line-strong); display:inline-block; }
.nav-cta{ display:inline-flex; }

.burger{ display:none; width:30px; height:20px; position:relative; }
.burger span{ position:absolute; left:0; height:1.6px; width:100%; background:var(--ivory); transition:.35s var(--ease); }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:9px; } .burger span:nth-child(3){ top:18px; }
.burger.open span:nth-child(1){ top:9px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ top:9px; transform:rotate(-45deg); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:99; background:rgba(15,12,8,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 var(--gutter);
  transform:translateY(-100%); transition:transform .55s var(--ease); visibility:hidden;
}
.drawer.open{ transform:translateY(0); visibility:visible; }
.drawer a{ font-family:var(--serif); font-size:30px; color:var(--ivory); padding:12px 0; border-bottom:1px solid var(--line-soft); }
.drawer a:last-of-type{ border-bottom:none; }

/* ================= FOOTER ================= */
.footer{ background:var(--ink-2); border-top:1px solid var(--line); padding-block:clamp(56px,7vh,88px) 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:48px; }
.footer h5{ font-family:var(--sans); font-weight:400; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.footer-links{ display:flex; flex-direction:column; gap:11px; }
.footer-links a{ font-size:14.5px; color:var(--ivory-dim); transition:color .3s; }
.footer-links a:hover{ color:var(--gold); }
.footer p{ font-size:14.5px; color:var(--ivory-dim); }
.footer-slogan{ margin-top:0; font-family:var(--serif); font-style:italic; font-size:18px; letter-spacing:.01em; color:var(--gold-soft) !important; text-align:center; }
.footer-slogan::before,.footer-slogan::after{ font-style:normal; font-size:1.55em; line-height:0; position:relative; top:.26em; color:var(--gold); opacity:.9; }
.footer-slogan::before{ content:"\201C"; margin-right:.06em; }
.footer-slogan::after{ content:"\201D"; margin-left:.04em; }
.footer-builder{ margin-top:50px; display:flex; flex-direction:column; align-items:center; gap:13px; }
.fb-line{ width:100%; display:flex; align-items:center; gap:22px;
  font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.fb-line .rule-x{ flex:1; height:1px; background:var(--line); }
.fb-line span:nth-child(2){ white-space:nowrap; }
.footer-bottom{ margin-top:54px; padding-top:24px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--ivory-faint); letter-spacing:.04em; }

/* ================= reveal animation =================
   Visibility never depends on an animation frame. JS sets the
   hidden start inline, transitions to visible, and a timer commits
   the final visible state with transition:none as a hard failsafe. */
[data-reveal]{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* ================= reusable bits ================= */
.eyebrow-num{ font-family:var(--serif); color:var(--gold); font-size:14px; letter-spacing:.1em; }

/* stat */
.stat .num{ font-family:var(--serif); font-size:clamp(46px,5.5vw,80px); line-height:1; color:var(--ivory); }
.cream-bg .stat .num{ color:var(--cocoa); }
.stat .num .gilt{ display:inline; }
.stat .lbl{ margin-top:10px; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-dim); }
.cream-bg .stat .lbl{ color:var(--cocoa-dim); }

/* media placeholder (striped) */
.ph{
  position:relative; overflow:hidden; background:
    repeating-linear-gradient(135deg, rgba(201,163,91,.07) 0 10px, transparent 10px 20px), var(--ink-3);
  border:1px solid var(--line); display:grid; place-items:center;
}
.ph .ph-tag{ font-family:var(--sans); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--ivory-faint); }

/* page hero (interior pages) */
.page-hero{ position:relative; min-height:68vh; display:flex; align-items:flex-end;
  padding-bottom:clamp(54px,8vh,96px); padding-top:calc(var(--nav-h) + 40px); overflow:hidden; }
.page-hero .bg{ position:absolute; inset:0; }
.page-hero .bg img{ width:100%; height:100%; object-fit:cover; }
.page-hero .scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,12,8,.55) 0%, rgba(15,12,8,.30) 35%, rgba(15,12,8,.92) 100%); }

/* divider line */
.rule{ height:1px; background:var(--line); border:none; }

/* feature item */
.feature{ padding:30px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start; }
.feature .fnum{ font-family:var(--serif); color:var(--gold); font-size:15px; letter-spacing:.1em; padding-top:4px; }
.feature h4{ font-size:23px; margin-bottom:8px; }
.feature p{ color:var(--ivory-dim); font-size:15.5px; max-width:46ch; }
.cream-bg .feature p{ color:var(--cocoa-dim); }

/* tag pill */
.pill{ display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--line-strong); border-radius:40px; padding:8px 16px; }

/* whatsapp float */
.wa{ position:fixed; right:22px; bottom:22px; z-index:80; width:56px; height:56px; border-radius:50%;
  background:#1f8a4c; display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .35s var(--ease); }
.wa:hover{ transform:translateY(-3px) scale(1.04); }
.wa svg{ width:28px; height:28px; fill:#fff; }

/* ================= lightbox ================= */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(10,8,5,.93); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:5vh 5vw; opacity:0; visibility:hidden; transition:.4s; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:90vh; object-fit:contain; border:1px solid var(--line-strong); }
.lightbox .lb-close{ position:absolute; top:24px; right:30px; font-size:30px; color:var(--ivory); font-family:var(--serif); }
.lightbox .lb-cap{ position:absolute; bottom:26px; left:0; right:0; text-align:center; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-dim); }

/* hide [data-i18n] flash handled by JS; nothing here */

/* ================= responsive ================= */
@media (max-width:1080px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:1024px){
  .nav-links,.nav-cta{ display:none; }
  .burger{ display:block; }
}
@media (max-width:860px){
  .feature{ grid-template-columns:1fr; gap:8px; }
}
@media (max-width:600px){
  .footer-grid{ grid-template-columns:1fr; }
  :root{ --nav-h:66px; }
}