:root{
  --ink:#08060c; --ink-soft:#120b1a; --ink-card:#171022;
  --paper:#fbf9fc; --paper-tint:#f3eef6;
  --primary:#800089; --primary-soft:#a730b0; --primary-light:#c25fcb; --primary-pale:#e9d1ec;
  --accent:#46c689; --accent-soft:#6fdba6; --accent-dark:#2e9e6c;
  --muted:#7a7188; --line:#e9e0ea; --line-dark:rgba(255,255,255,0.1);
  --on-dark-muted:rgba(255,255,255,0.66);
  --sheet-w:min(1280px, 92vw);
  --warn:#a15c00; --warn-bg:#fff3e0;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; font-size:16px; overflow-x:hidden;}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.015em;}
a{color:inherit;} img,svg{display:block;max-width:100%;} button{font-family:inherit; cursor:pointer;}
.wrap{width:var(--sheet-w); margin:0 auto;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;} }

.section{ position:relative; padding:7rem 0; }
.section.tight{ padding:5rem 0; }
.eyebrow{ font-size:0.8rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--primary); margin-bottom:1rem; }
.eyebrow.on-dark{ color:var(--accent-soft); }
h2.title{ font-size:clamp(2rem,3.2vw,2.8rem); margin-bottom:1.2rem; max-width:22ch; }
p.intro{ color:var(--muted); max-width:44rem; font-size:1.06rem; line-height:1.7; }
.on-dark p.intro, .on-dark .intro{ color:var(--on-dark-muted); }

/* ================= NAV ================= */
header.site{ position:fixed; top:0; left:0; right:0; z-index:70; background:rgba(8,6,12,0.9); backdrop-filter:blur(16px); border-bottom:1px solid var(--line-dark); }
nav{ width:var(--sheet-w); margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:5rem; gap:2rem;}
.brand{ display:flex; align-items:center; gap:0.7rem; text-decoration:none; color:#fff; flex-shrink:0;}
.brand img.mark{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.brand .word{ font-family:'Fraunces',serif; font-weight:700; font-size:1.15rem; line-height:1; }
.brand .tag{ font-size:0.58rem; letter-spacing:0.1em; color:var(--on-dark-muted); text-transform:uppercase; margin-top:0.15rem; }
nav ul{ list-style:none; display:flex; gap:1.9rem; }
nav ul a{ text-decoration:none; font-size:0.86rem; font-weight:500; color:rgba(255,255,255,0.78); position:relative; padding-bottom:4px; white-space:nowrap; transition:color .2s ease;}
nav ul a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--accent); border-radius:2px; transition:width 0.3s ease; }
nav ul a:hover{ color:#fff; } nav ul a:hover::after, nav ul a.active::after{ width:100%; }
.nav-cta{ font-weight:600; font-size:0.84rem; text-decoration:none; color:#fff; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%); padding:0.65rem 1.35rem; border-radius:100px; white-space:nowrap; border:none; transition:transform .2s ease, box-shadow .2s ease;}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(128,0,137,0.6); }
.nav-links-extra{ display:flex; gap:1.1rem; align-items:center; flex-shrink:0;}
.nav-links-extra a.small{ font-size:0.78rem; color:rgba(255,255,255,0.55); text-decoration:none; }
.nav-links-extra a.small:hover{ color:#fff; }
nav{ min-width:0; }
.brand{ min-width:0; }
@media (max-width:1050px){ nav ul{ display:none; } }

/* ---------- mobile hamburger menu ---------- */
.nav-toggle{ display:none; width:2.75rem; height:2.75rem; background:rgba(255,255,255,0.06); border:1px solid var(--line-dark); border-radius:8px; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex-shrink:0; }
.nav-toggle span{ width:18px; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:1050px){ .nav-toggle{ display:flex; } }

.mobile-menu{ display:none; flex-direction:column; background:rgba(8,6,12,0.98); backdrop-filter:blur(16px); border-bottom:1px solid var(--line-dark); padding:0.5rem 0; max-height:0; overflow:hidden; transition:max-height .3s ease; }
.mobile-menu.open{ display:flex; max-height:28rem; }
.mobile-menu a{ color:rgba(255,255,255,0.85); text-decoration:none; font-size:0.95rem; font-weight:600; padding:0.95rem var(--sheet-margin, 4vw); border-top:1px solid var(--line-dark); }
.mobile-menu a:first-child{ border-top:none; }
.mobile-menu a:active, .mobile-menu a:hover{ color:var(--accent-soft); background:rgba(255,255,255,0.03); }
@media (min-width:1051px){ .mobile-menu{ display:none !important; } }
@media (max-width:480px){
  .brand .tag{ display:none; }
  .nav-links-extra a.small{ display:none; }
  .nav-cta{ font-size:0.78rem; padding:0.7rem 1.1rem; min-height:44px; display:flex; align-items:center; }
}

/* ================= HERO ================= */
.hero{ position:relative; overflow:hidden; background:
  radial-gradient(ellipse 900px 600px at 15% 20%, rgba(128,0,137,0.35), transparent 60%),
  radial-gradient(ellipse 700px 500px at 85% 80%, rgba(70,198,137,0.12), transparent 60%),
  linear-gradient(160deg, #0d0715 0%, #08060c 60%);
  color:#fff; padding-top:8.5rem; padding-bottom:5rem; perspective:1400px;
}
.hero-grid{ width:var(--sheet-w); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; position:relative; z-index:2;}
.hero h1{ font-size:clamp(2.4rem, 4.4vw, 3.8rem); line-height:1.08; margin-bottom:1.4rem; }
.hero h1 .hl{ color:transparent; background:linear-gradient(100deg, var(--primary-light), var(--accent-soft)); background-clip:text; -webkit-background-clip:text; font-style:italic;}
.hero p.lede{ font-size:1.08rem; color:var(--on-dark-muted); max-width:34rem; margin-bottom:2rem; line-height:1.7; }
.cta-row{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:2.6rem;}
.btn{ font-weight:600; font-size:0.87rem; text-decoration:none; padding:0.9rem 1.6rem; border-radius:100px; display:inline-flex; align-items:center; gap:0.5rem; border:none; transition:transform .2s ease, background .2s ease, box-shadow .2s ease;}
.btn-solid{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%); color:#fff; }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(128,0,137,0.55); }
.btn-outline{ border:1.5px solid rgba(255,255,255,0.35); color:#fff; background:rgba(255,255,255,0.04); backdrop-filter:blur(6px); }
.btn-outline:hover{ border-color:var(--accent-soft); color:var(--accent-soft); transform:translateY(-2px); }
.btn-dark{ background:var(--ink-card); color:#fff; border:1px solid var(--line-dark);} .btn-dark:hover{ background:var(--ink-soft); transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--ink); } .btn-light:hover{ background:var(--paper-tint); transform:translateY(-2px); }

.feature-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; border-top:1px solid var(--line-dark); padding-top:1.8rem; }
.feature-row .f-ic{ width:1.9rem; height:1.9rem; color:var(--accent-soft); margin-bottom:0.6rem; }
.feature-row h4{ font-size:0.88rem; font-weight:700; margin-bottom:0.2rem; }
.feature-row p{ font-size:0.76rem; color:var(--on-dark-muted); line-height:1.5; }
@media (max-width:700px){ .feature-row{ grid-template-columns:repeat(2,1fr); } }

/* hero visual: photo + floating tilt cards */
.hero-visual{ position:relative; height:34rem; transform-style:preserve-3d; }

/* ---------- scroll-triggered 3D reveal ---------- */
/* IMPORTANT: elements are NOT hidden by default here. The .reveal-3d-init
   class (added only by JS, only if JS runs) is what applies the initial
   hidden state — so if JS fails for any reason, content is still visible.
   This class is added dynamically, see main.js. */
.reveal-3d-init{ opacity:0; transform:perspective(1000px) rotateX(18deg) translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal-3d-init.revealed{ opacity:1; transform:perspective(1000px) rotateX(0deg) translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal-3d-init{ opacity:1 !important; transform:none !important; } }
.hero-photo{ position:absolute; inset:2.5rem 0 2.5rem 2.5rem; border-radius:24px; overflow:hidden; box-shadow:0 40px 80px -20px rgba(0,0,0,0.6); transform-style:preserve-3d; transition:transform .15s ease-out; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(200deg, rgba(128,0,137,0.25), transparent 50%); }

.float-card{ position:absolute; background:rgba(23,16,34,0.75); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,0.14); border-radius:16px; padding:1.3rem 1.4rem; box-shadow:0 30px 60px -20px rgba(0,0,0,0.55); transform-style:preserve-3d; transition:transform .15s ease-out; will-change:transform;}
.float-card.calc-widget{ animation:cardFloat1 6s ease-in-out infinite; }
.float-card.feat-widget{ animation:cardFloat2 7s ease-in-out infinite; }
@keyframes cardFloat1{ 0%,100%{ transform:perspective(1000px) translateY(0) rotateX(0deg) rotateY(0deg); } 50%{ transform:perspective(1000px) translateY(-10px) rotateX(2deg) rotateY(-2deg); } }
@keyframes cardFloat2{ 0%,100%{ transform:perspective(1000px) translateY(0) rotateX(0deg) rotateY(0deg); } 50%{ transform:perspective(1000px) translateY(-12px) rotateX(-2deg) rotateY(2deg); } }
.float-card:hover{ animation-play-state:paused; }
.float-card.calc-widget{ top:-1.5rem; left:-1.5rem; width:15.5rem; }
.float-card.feat-widget{ bottom:-1.8rem; right:-1.5rem; width:16.5rem; }
.float-card h5{ font-size:0.92rem; font-weight:700; color:#fff; margin-bottom:0.2rem; }
.float-card .sub{ font-size:0.72rem; color:var(--on-dark-muted); margin-bottom:0.9rem; }
.mini-row{ display:flex; align-items:center; gap:0.6rem; padding:0.55rem 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.mini-row:last-of-type{ border-bottom:none; }
.mini-row img{ width:2.6rem; height:2.6rem; border-radius:8px; object-fit:cover; flex-shrink:0;}
.mini-row .mt{ font-size:0.78rem; font-weight:600; color:#fff; line-height:1.3;}
.mini-row .ms{ font-size:0.68rem; color:var(--on-dark-muted); }
.mini-row .mp{ margin-left:auto; font-size:0.72rem; font-weight:700; color:var(--accent-soft); white-space:nowrap;}
.widget-result{ background:rgba(70,198,137,0.12); border:1px solid rgba(70,198,137,0.3); border-radius:10px; padding:0.7rem 0.9rem; margin-top:0.8rem; }
.widget-result .wl{ font-size:0.65rem; color:var(--on-dark-muted); text-transform:uppercase; letter-spacing:0.05em;}
.widget-result .wv{ font-size:1.15rem; font-weight:700; color:var(--accent-soft); font-family:'Fraunces',serif;}
.widget-cta{ display:block; text-align:center; margin-top:0.9rem; background:var(--accent); color:#0f2a1d; font-weight:700; font-size:0.78rem; padding:0.6rem; border-radius:8px; text-decoration:none;}

/* ================= ABOUT ================= */
#about .cols{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:4.5rem; margin-top:2.6rem; align-items:start; }
#about .lead{ font-family:'Fraunces',serif; font-size:1.6rem; line-height:1.45; color:var(--ink); margin-bottom:1.3rem; }
#about p{ color:var(--muted); margin-bottom:1.1rem; font-size:1.02rem; }
#about .quote{ font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem; line-height:1.5; color:var(--primary); border-left:3px solid var(--accent); padding-left:1.4rem; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); margin-top:2.8rem; border-radius:14px; overflow:hidden;}
.stat{ background:var(--paper); padding:1.6rem 1rem; text-align:center; }
.stat .num{ font-family:'Fraunces',serif; font-size:2rem; color:var(--primary); font-weight:700; }
.stat .lbl{ font-size:0.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-top:0.4rem; }

/* ================= SERVICES (icon row, light) ================= */
#services{ background:var(--paper-tint); }
.icon-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.8rem; }
.icon-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.6rem; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; transform-style:preserve-3d; will-change:transform;}
.icon-card:hover{ box-shadow:0 24px 44px -22px rgba(128,0,137,0.28); border-color:var(--primary-pale); }
.icon-card .ic-wrap{ width:3rem; height:3rem; border-radius:12px; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
.icon-card .ic-wrap svg{ width:1.5rem; height:1.5rem; color:#fff; }
.icon-card h3{ font-size:1.02rem; margin-bottom:0.4rem; }
.icon-card p{ font-size:0.85rem; color:var(--muted); }
@media (max-width:900px){ .icon-grid{ grid-template-columns:repeat(2,1fr);} }

/* photo showcase strip under services */
.photo-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.4rem; }
.photo-strip figure{ position:relative; border-radius:14px; overflow:hidden; height:11rem; }
.photo-strip img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.photo-strip figure:hover img{ transform:scale(1.08); }
.photo-strip figcaption{ position:absolute; bottom:0; left:0; right:0; padding:0.9rem 1rem; background:linear-gradient(0deg, rgba(8,6,12,0.9), transparent); color:#fff; font-size:0.82rem; font-weight:600; }
@media (max-width:900px){ .photo-strip{ grid-template-columns:repeat(2,1fr);} }

/* ================= CALCULATOR (with 3D isometric graphic) ================= */
#calculator{ background:var(--ink); color:#fff; }
.sample-flag{ display:inline-flex; align-items:center; gap:0.5rem; background:rgba(255,243,224,0.12); color:#ffcf8a; font-size:0.78rem; padding:0.55rem 1rem; border-radius:100px; margin-bottom:1.6rem; border:1px solid rgba(255,207,138,0.3); }
.calc-layout{ display:grid; grid-template-columns:0.7fr 1.15fr 1fr; gap:1.8rem; margin-top:2.6rem; align-items:start;}
.calc-layout > *{ min-width:0; }
.calc-tool-list{ display:flex; flex-direction:column; gap:0.5rem; }
.calc-tool-list .tl-item{ display:flex; align-items:center; gap:0.8rem; padding:0.85rem 1.1rem; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid var(--line-dark); font-size:0.88rem; font-weight:600; color:var(--on-dark-muted); width:100%; text-align:left; font-family:inherit; cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .15s ease; }
.calc-tool-list .tl-item:hover{ background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.2); transform:translateX(2px); }
.calc-tool-list .tl-item.active{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%); color:#fff; border-color:transparent; }
.calc-tool-list .tl-item svg{ width:1.1rem; height:1.1rem; flex-shrink:0; }

/* highlight pulse for whatever field a tool-list shortcut points to */
.field-highlight{ animation:fieldPulse 1.4s ease 2; border-radius:10px; }
@keyframes fieldPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(70,198,137,0); } 50%{ box-shadow:0 0 0 5px rgba(70,198,137,0.4); } }

.calc-box{ background:var(--ink-card); border:1px solid var(--line-dark); border-radius:var(--radius); padding:2rem; }
.calc-form label{ display:block; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--on-dark-muted); margin-bottom:0.5rem; margin-top:1.2rem; font-weight:600;}
.calc-form label:first-child{ margin-top:0; }
.calc-form select, .calc-form input[type=number]{ width:100%; padding:0.8rem 1rem; border:1.5px solid var(--line-dark); background:rgba(255,255,255,0.04); color:#fff; font-family:'Inter',sans-serif; font-size:16px; border-radius:10px; }
.calc-form select option{ background:var(--ink-card); color: #fff;}
.mode-toggle{ display:flex; gap:0.6rem; margin-top:0.4rem; }
.mode-toggle button{ flex:1; padding:0.75rem; border:1.5px solid var(--line-dark); background:rgba(255,255,255,0.03); color:var(--on-dark-muted); font-size:0.86rem; border-radius:10px; font-weight:600; transition:all .2s ease;}
.mode-toggle button.active{ background:var(--accent); color:#0f2a1d; border-color:var(--accent); }
.mode-toggle button:disabled{ opacity:0.4; cursor:not-allowed; }
.calc-note{ font-size:0.8rem; color:var(--on-dark-muted); margin-top:1.1rem; line-height:1.5; }
.check-row{ display:flex; align-items:center; gap:0.7rem; padding:0.6rem 0; cursor:pointer; min-height:44px; }
.check-row input[type=checkbox]{ width:1.3rem; height:1.3rem; flex-shrink:0; accent-color:var(--accent); }
.check-row span{ font-size:0.92rem; color:#fff; }
.calc-results{ display:flex; flex-direction:column; gap:0.8rem; margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid var(--line-dark);}
.tier-card{ background:rgba(255,255,255,0.03); border:1px solid var(--line-dark); border-radius:12px; padding:1.1rem 1.3rem; display:flex; justify-content:space-between; align-items:center; }
.tier-card.hi{ border-color:var(--accent); background:rgba(70,198,137,0.08); }
.tier-card .tname{ font-family:'Fraunces',serif; font-weight:700; font-size:1.05rem; }
.tier-card .trate{ font-size:0.72rem; color:var(--on-dark-muted); margin-top:0.15rem; }
.tier-card .tval{ font-weight:700; font-size:1.2rem; color:var(--accent-soft); text-align:right; font-family:'Fraunces',serif;}
.furn-line{ margin-top:0.4rem; padding-top:0.9rem; border-top:1px dashed var(--line-dark); font-size:0.83rem; color:var(--on-dark-muted); }
.furn-line strong{ color:#fff; }

/* isometric 3D illustration */
.iso-panel{ display:flex; flex-direction:column; gap:1.6rem; }
.iso-stage{ position:relative; height:19rem; display:flex; align-items:center; justify-content:center; perspective:1200px; }
.iso-stage svg{ width:100%; max-width:360px; filter:drop-shadow(0 30px 40px rgba(128,0,137,0.35)); animation:isoFloat 5s ease-in-out infinite; }
@keyframes isoFloat{ 0%,100%{ transform:translateY(0) rotateZ(0deg); } 50%{ transform:translateY(-14px) rotateZ(0.6deg); } }
.iso-checklist{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; }
.iso-checklist li{ font-size:0.86rem; color:var(--on-dark-muted); display:flex; align-items:center; gap:0.6rem; font-weight:500;}
.iso-checklist li svg{ width:1.2rem; height:1.2rem; color:var(--accent-soft); flex-shrink:0;}
@media (max-width:1100px){ .calc-layout{ grid-template-columns:1fr; } .calc-tool-list{ flex-direction:row; overflow-x:auto; } .iso-stage{ height:16rem; } }

/* ================= PROCESS STEPS ================= */
#process{ background:var(--paper); }
.steps-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:3rem; position:relative;}
.steps-row::before{ content:""; position:absolute; top:1.4rem; left:10%; right:10%; height:2px; background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px); z-index:0;}
.step-item{ position:relative; z-index:1; text-align:center; padding:0 0.8rem; }
.step-item .snum{ width:2.8rem; height:2.8rem; border-radius:50%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; font-size:1.15rem; margin:0 auto 1rem; box-shadow:0 12px 24px -10px rgba(128,0,137,0.5);}
.step-item h4{ font-size:0.95rem; margin-bottom:0.35rem; }
.step-item p{ font-size:0.8rem; color:var(--muted); }
@media (max-width:900px){ .steps-row{ grid-template-columns:1fr 1fr; gap:2rem 1rem; } .steps-row::before{ display:none; } }

/* ================= PROPERTIES ================= */
#properties{ background:var(--paper-tint); }
.list-cta-banner{ background:linear-gradient(120deg, var(--primary) 0%, var(--ink) 100%); color:#fff; border-radius:var(--radius); padding:1.8rem 2.2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:3rem; }
.list-cta-banner p{ font-size:0.95rem; color:rgba(255,255,255,0.75); margin-top:0.2rem;}
.prop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.6rem; }
.prop-card{ background:#fff; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 45px -28px rgba(8,6,12,0.3); transition:transform .3s ease, box-shadow .3s ease; transform-style:preserve-3d; will-change:transform;}
.prop-card:hover{ box-shadow:0 30px 55px -20px rgba(8,6,12,0.35); }
.prop-thumb{ height:11rem; position:relative; overflow:hidden; }
.prop-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.prop-card:hover .prop-thumb img{ transform:scale(1.06); }
.prop-tag{ position:absolute; top:0.9rem; left:0.9rem; background:var(--accent); color:#0f2a1d; font-size:0.68rem; font-weight:700; padding:0.3rem 0.7rem; border-radius:100px; text-transform:uppercase; z-index:2;}
.prop-fav{ position:absolute; top:0.8rem; right:0.8rem; width:2rem; height:2rem; background:rgba(255,255,255,0.9); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:2;}
.prop-fav svg{ width:1rem; height:1rem; color:var(--primary); }
.prop-body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.prop-body h3{ font-size:1.05rem; margin-bottom:0.4rem; }
.prop-meta{ font-size:0.82rem; color:var(--muted); margin-bottom:1.1rem; }
.prop-meta span::after{ content:"·"; margin:0 0.4rem; } .prop-meta span:last-child::after{ content:""; }
.prop-body .enquire{ margin-top:auto; background:var(--ink); color:#fff; border:none; padding:0.8rem; font-weight:600; font-size:0.82rem; border-radius:10px; transition:background .2s ease; text-align:center; text-decoration:none; display:block; width:100%; cursor:pointer; font-family:inherit;}
.prop-body .enquire:hover{ background:var(--primary); }
.prop-body .enquire.get-contact{ background:var(--ink); }
.prop-body .enquire.get-contact:disabled{ opacity:0.6; cursor:wait; }
.prop-body .enquire.unlocked{ background:var(--accent); color:#0f2a1d; }
.prop-body .enquire.unlocked:hover{ background:var(--accent-soft); }
.sample-note{ font-size:0.8rem; color:var(--muted); margin-top:2rem; }
.trust-line{ display:flex; align-items:center; gap:0.8rem; margin-top:2.2rem; font-size:0.82rem; color:var(--muted); font-weight:600;}
.trust-line .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* ================= MEMBERSHIP ================= */
#membership{ background:var(--paper); color:var(--ink); }
#membership .eyebrow.on-dark{ color:var(--primary); }
#membership h2.title{ color:var(--ink) !important; }
#membership .intro{ color:var(--muted) !important; }
#membership .mem-flow{ color:var(--muted); }
#membership .mem-flow .node{ background:var(--paper-tint); border:1px solid var(--line); color:var(--ink); }
#membership .mem-card{ border:1px solid var(--line); background:#fff; box-shadow:0 20px 45px -30px rgba(8,6,12,0.2); }
#membership .mem-card.featured{ border:1.5px solid var(--accent-dark); background:#fff; }
#membership .mem-card h3{ color:var(--ink); }
#membership .mem-card li{ color:var(--muted); border-bottom:1px solid var(--line); }
#membership .price sup{ color:var(--muted); }
.mem-flow{ display:flex; gap:0.9rem; align-items:center; flex-wrap:wrap; margin:2.2rem 0 2.8rem; font-size:0.85rem; color:var(--on-dark-muted); }
.mem-flow .node{ background:rgba(255,255,255,0.05); border:1px solid var(--line-dark); padding:0.7rem 1.1rem; border-radius:100px; }
.mem-flow .arrow{ color:var(--accent); }
.mem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.mem-card{ border:1px solid var(--line-dark); border-radius:var(--radius); padding:2.1rem; display:flex; flex-direction:column; position:relative; background:rgba(255,255,255,0.03); transform-style:preserve-3d; will-change:transform; }
.mem-card.featured{ border:1.5px solid var(--accent); background:rgba(70,198,137,0.06); }
.mem-card .badge{ position:absolute; top:-0.8rem; left:1.8rem; background:var(--accent); color:#0f2a1d; font-size:0.68rem; padding:0.3rem 0.75rem; border-radius:100px; font-weight:700; text-transform:uppercase; }
.mem-card h3{ font-size:1.3rem; margin-bottom:0.3rem; color:#fff; }
.mem-card .price{ font-family:'Fraunces',serif; font-size:1.9rem; color:var(--accent-soft); margin:0.8rem 0; font-weight:700;}
.mem-card .price sup{ font-size:0.6rem; color:var(--on-dark-muted); font-family:'Inter',sans-serif; font-weight:400;}
.mem-card ul{ list-style:none; margin:1.1rem 0 1.6rem; flex:1; }
.mem-card li{ font-size:0.9rem; color:var(--on-dark-muted); padding:0.55rem 0; border-bottom:1px solid var(--line-dark); padding-left:1.3rem; position:relative; }
.mem-card li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
@media (max-width:900px){ .mem-grid{ grid-template-columns:1fr; } }

/* ================= SECTORS ================= */
.sector-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:3rem; }
.sector-card{ padding:2.1rem; background:var(--paper-tint); border-radius:16px; border-top:3px solid var(--accent); }
.sector-card h3{ font-size:1.15rem; margin-bottom:0.65rem; } .sector-card p{ color:var(--muted); font-size:0.94rem; }

/* ================= INFRA ================= */
#infra{ background:var(--paper-tint); color:var(--ink); }
#infra .eyebrow.on-dark{ color:var(--primary); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-top:3rem; }
.split-panel{ border-radius:var(--radius); padding:2.6rem; position:relative; overflow:hidden; min-height:21rem; display:flex; align-items:flex-end;}
.split-panel .bg-photo{ position:absolute; inset:0; }
.split-panel .bg-photo img{ width:100%; height:100%; object-fit:cover; }
.split-panel::before{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,6,12,0.95) 15%, rgba(8,6,12,0.3) 78%); }
.split-panel .body{ position:relative; z-index:1; }
.split-panel h3{ font-size:1.45rem; margin-bottom:0.9rem; color:#fff; }
.split-panel p{ color:var(--on-dark-muted); font-size:0.95rem; margin-bottom:1.1rem; }
.split-panel ul{ list-style:none; }
.split-panel li{ font-size:0.87rem; color:var(--accent-soft); margin-bottom:0.5rem; padding-left:1.2rem; position:relative; }
.split-panel li::before{ content:"—"; position:absolute; left:0; color:var(--accent-soft); }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }

/* ================= WHY US ================= */
#why{ background:var(--paper); }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:2.8rem; }
.flip-card{ perspective:1400px; height:11rem; }
.flip-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 0.7s cubic-bezier(.4,.2,.2,1); }
.flip-card:hover .flip-inner, .flip-card.flipped .flip-inner{ transform:rotateY(180deg); }
.flip-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; padding:1.9rem; display:flex; flex-direction:column; }
.flip-front{ background:var(--paper-tint); }
.flip-front .ic{ width:2.2rem; height:2.2rem; color:var(--primary); margin-bottom:0.9rem; flex-shrink:0; }
.flip-front h3, .flip-back h3{ font-size:1.05rem; margin-bottom:0.4rem; }
.flip-front p, .flip-back p{ font-size:0.9rem; color:var(--muted); }
.flip-back{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%); transform:rotateY(180deg); justify-content:center; }
.flip-back h3{ color:#fff; } .flip-back p{ color:rgba(255,255,255,0.85); }
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr; } .flip-card{ height:auto; min-height:11rem; } }

/* ================= PRESENCE ================= */
.loc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; margin-top:3rem; }
.loc-card{ background:var(--ink); color:#fff; padding:2.3rem; border-radius:var(--radius); position:relative; overflow:hidden; }
.loc-card .tag{ font-size:0.74rem; letter-spacing:0.1em; color:var(--accent-soft); text-transform:uppercase; font-weight:700;}
.loc-card h3{ font-size:1.55rem; margin:0.6rem 0 0.35rem; color:#fff;} .loc-card p{ color:var(--on-dark-muted); font-size:0.94rem; }
.loc-pin{ position:absolute; right:1.4rem; bottom:1.4rem; width:3.2rem; height:3.2rem; opacity:0.9; color:var(--accent); }

/* ================= CONTACT ================= */
#contact{ background:linear-gradient(180deg, var(--ink) 0%, #030203 100%); color:#fff; }
.contact-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:3.5rem; margin-top:2.8rem; align-items:start; }
.contact-list{ list-style:none; margin-top:1.7rem; }
.contact-list li{ display:flex; align-items:center; gap:1.1rem; padding:1rem 0; border-bottom:1px solid var(--line-dark); }
.contact-list .ic{ width:1.6rem; height:1.6rem; color:var(--accent); }
.contact-list a{ text-decoration:none; font-weight:600; }
.contact-list .lbl{ display:block; font-size:0.7rem; color:var(--on-dark-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.15rem;}
.cta-panel{ background:rgba(255,255,255,0.04); border:1px solid var(--line-dark); padding:2.1rem; border-radius:var(--radius); }
.cta-panel p{ color:var(--on-dark-muted); margin-bottom:1.3rem; font-size:0.95rem; }
.contact-form{ display:flex; flex-direction:column; gap:0.9rem; margin-top:1.4rem; }
.contact-form input, .contact-form textarea{ padding:0.85rem 1rem; border:1.5px solid var(--line-dark); background:rgba(255,255,255,0.05); color:#fff; border-radius:10px; font-family:'Inter',sans-serif; font-size:16px; }
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--on-dark-muted); }
.contact-form textarea{ min-height:90px; resize:vertical; }

/* ================= FOOTER ================= */
footer.site{ background:#030203; color:var(--on-dark-muted); padding:4rem 0 1.6rem; border-top:1px solid var(--line-dark); }
.foot-grid{ width:var(--sheet-w); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.6rem; border-bottom:1px solid var(--line-dark); }
.foot-brand{ display:flex; align-items:center; gap:0.6rem; margin-bottom:1rem; }
.foot-brand img{ width:32px; height:32px; border-radius:50%; }
.foot-brand span{ font-family:'Fraunces',serif; font-weight:700; font-size:1.1rem; color:#fff; }
.foot-col p{ font-size:0.85rem; line-height:1.7; margin-bottom:0.9rem; }
.foot-col h5{ color:#fff; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:1.1rem; }
.foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:0.2rem; }
.foot-col ul a{ font-size:0.86rem; text-decoration:none; color:var(--on-dark-muted); transition:color .2s ease; display:inline-block; padding:0.5rem 0; min-height:24px; }
.foot-col ul a:hover{ color:var(--accent-soft); }
.foot-social{ display:flex; gap:0.7rem; margin-top:0.5rem;}
.foot-social a{ width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; color:var(--on-dark-muted); text-decoration:none; transition:all .2s ease;}
.foot-social a:hover{ background:var(--accent); color:#0f2a1d; border-color:var(--accent); }
.foot-social svg{ width:1rem; height:1rem; }
.foot-bottom{ width:var(--sheet-w); margin:0 auto; padding-top:1.6rem; font-size:0.78rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .foot-grid{ grid-template-columns:1fr; } }

/* ================= LEAD MODAL ================= */
.modal-overlay{ position:fixed; inset:0; background:rgba(8,6,12,0.75); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:100; padding:1.2rem; }
.modal-overlay.open{ display:flex; }
.modal-box{ background:#fff; width:min(500px, 100%); padding:2.4rem; position:relative; border-radius:20px; box-shadow:0 50px 100px -20px rgba(0,0,0,0.5); max-height:90vh; overflow-y:auto; }
.modal-close{ position:absolute; top:1.2rem; right:1.2rem; background:var(--paper-tint); border:none; font-size:1.2rem; color:var(--muted); line-height:1; width:2.1rem; height:2.1rem; border-radius:50%; }
.modal-box h3{ font-size:1.4rem; margin-bottom:0.4rem; }
.modal-sub{ font-size:0.9rem; color:var(--muted); margin-bottom:1.5rem; }
.modal-box label{ display:block; font-size:0.75rem; text-transform:uppercase; color:var(--muted); margin:1rem 0 0.4rem; font-weight:600; letter-spacing:0.04em;}
.modal-box input, .modal-box textarea{ width:100%; padding:0.85rem 1rem; border:1.5px solid var(--line); border-radius:10px; font-family:'Inter',sans-serif; font-size:16px; }
.modal-box textarea{ resize:vertical; min-height:80px; }
.modal-submit{ margin-top:1.6rem; width:100%; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%); color:#fff; border:none; padding:1rem; font-weight:700; font-size:0.88rem; border-radius:100px; transition:transform .2s ease;}
.modal-submit:hover{ transform:translateY(-2px); }
.modal-success{ display:none; text-align:center; padding:1.2rem 0; }
.modal-success.open{ display:block; }
.modal-success .ic{ width:3.4rem; height:3.4rem; color:var(--accent-dark); margin:0 auto 1.1rem; }
.modal-error{ background:var(--warn-bg); color:var(--warn); padding:0.7rem 0.9rem; border-radius:8px; font-size:0.82rem; margin-top:0.9rem; display:none; }
.modal-error.open{ display:block; }
.hp-field{ position:absolute; left:-9999px; }

/* =========================================================
   RESPONSIVE — mobile / tablet / laptop / desktop / TV
========================================================= */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ height:26rem; margin-top:2rem;}
}
@media (max-width:900px){
  #about .cols, .why-grid, .loc-grid, .contact-grid, .mem-grid, .prop-grid{ grid-template-columns:1fr; }
  .sector-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .section{ padding:4.5rem 0; }
  .cta-row{ flex-direction:column; align-items:stretch; }
  .cta-row .btn{ justify-content:center; }
  .calc-box{ padding:1.4rem; }
  .list-cta-banner{ flex-direction:column; align-items:flex-start; }
  .hero{ padding-top:6.5rem; }
  .float-card.calc-widget{ position:static; width:100%; margin-bottom:1rem; }
  .float-card.feat-widget{ position:static; width:100%; margin-top:1rem; }
  .hero-photo{ position:static; height:16rem; }
  .hero-visual{ height:auto; }
}
@media (min-width:1024px) and (max-width:1439px){ :root{ --sheet-w:min(1120px, 90vw); } }
@media (min-width:1440px) and (max-width:1919px){ :root{ --sheet-w:min(1320px, 88vw); } }
@media (min-width:1920px){
  :root{ --sheet-w:min(1560px, 76vw); }
  body{ font-size:19px; }
  .hero h1{ font-size:clamp(3.2rem, 4vw, 5.4rem); }
  .btn{ font-size:1rem; padding:1.05rem 1.9rem; }
  h2.title{ font-size:clamp(2.4rem, 2.6vw, 3.2rem); }
}