/* Jewel Realty — site v2 */
:root{
  --porcelain:#F8F7F3;
  --surface:#FCFCFA;
  --ink:#0D1322;
  --night:#0B101E;
  --night-deep:#070C17;
  --ink-soft:#4E5563;
  --white-soft:rgba(237,239,244,.78);
  --gold:#C6A45B;
  --gold-ink:#7A5E28;
  --hairline:#E2E0D7;
  --hairline-dark:rgba(226,224,215,.16);
  --champagne:#E8CE93;
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:rgba(198,164,91,.22)}
body{
  background:var(--porcelain);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:80;
  pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--ink)}
.dark ::selection{background:var(--gold);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--porcelain);padding:10px 18px;font-size:14px;text-decoration:none}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.dark :focus-visible{outline-color:var(--gold)}
.micro{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1060px;margin:0 auto;padding-left:clamp(18px,4vw,40px);padding-right:clamp(18px,4vw,40px)}
.dark{background:var(--night);color:#EDEFF4}
.deep{background:var(--night-deep);color:var(--porcelain)}

/* ---------- topbar / nav ---------- */
.topbar{
  position:sticky;top:0;z-index:90;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px clamp(18px,4vw,40px);
  background:rgba(11,16,30,.94);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.topbar.scrolled{border-bottom-color:rgba(255,255,255,.12)}
.topbar .brand img{width:80px;display:block}
.topbar nav{display:flex;align-items:center;gap:clamp(14px,3vw,30px)}
.topbar nav a{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:#EDEFF4;text-decoration:none;
  padding:14px 2px;margin:-14px 0;
  white-space:nowrap;
}
.topbar nav a:hover{color:var(--champagne)}
.topbar nav a[aria-current="page"]{color:var(--champagne)}
.topbar .cta{
  background:var(--gold);color:var(--ink);
  padding:11px 18px;margin:-8px 0;
  transition:background .25s ease;
}
.topbar .cta:hover{background:var(--champagne);color:var(--ink)}
@media (max-width:600px){
  .topbar .brand{flex-shrink:0}
  .topbar .brand img{width:68px}
  .topbar .cta{display:none}
  .topbar nav{gap:16px}
}
@media (max-width:380px){
  .topbar nav{gap:12px}
  .topbar nav a{letter-spacing:.10em}
}

/* ---------- type ---------- */
h1{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:.005em}
.page-title{font-size:clamp(38px,6.4vw,64px);text-wrap:balance}
.lede-line{color:var(--ink-soft);max-width:560px;margin-top:14px;font-size:clamp(16px,2.2vw,18px)}
.serif-xl{font-family:var(--serif);font-weight:450;font-size:clamp(25px,4vw,36px);line-height:1.42;text-wrap:balance}
.gold-em{font-style:italic;color:var(--gold-ink)}
.dark .gold-em,.deep .gold-em{color:var(--champagne)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;position:relative;overflow:hidden;
  background:var(--ink);color:var(--porcelain);
  font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  text-decoration:none;padding:18px 42px;border:none;cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .12s ease;
}
.btn::after{
  content:"";position:absolute;inset:-10%;
  background:linear-gradient(115deg,transparent 43%,rgba(244,227,184,.28) 50%,transparent 57%);
  transform:translateX(-135%);pointer-events:none;
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(135%);transition:transform .7s ease}
.btn:hover{background:var(--night-deep);color:var(--champagne)}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--champagne);color:var(--ink)}
@media (max-width:560px){.btn-block-m{display:block;width:100%;padding:18px 12px;text-align:center}}

/* ---------- home hero (dark) ---------- */
.hero{position:relative;padding:clamp(18px,3vh,40px) 24px clamp(64px,10vh,120px);text-align:center;overflow:hidden}
.hero::before{
  content:"";position:absolute;left:50%;top:34%;
  width:min(920px,140vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(198,164,91,.14),rgba(198,164,91,.04) 52%,transparent 74%);
  pointer-events:none;
}
.hero > *{position:relative}
.masthead{padding:clamp(30px,6vh,60px) 24px clamp(14px,2.5vh,26px);text-align:center}
.masthead img{width:clamp(170px,26vw,250px);margin:0 auto}
.building-wrap{position:relative;width:min(330px,68vw);margin:0 auto clamp(24px,4vh,38px)}
.building-wrap::before{
  content:"";position:absolute;inset:-14% -34%;
  background:radial-gradient(closest-side,rgba(232,206,147,.18),rgba(198,164,91,.05) 58%,transparent 78%);
  opacity:0;transition:opacity 1.6s ease .4s;pointer-events:none;
}
.building-wrap.drawn::before{opacity:1}
.building-video{display:block;width:100%;height:auto;mix-blend-mode:screen;position:relative}
.kicker{color:var(--champagne)}
.hero h1{font-size:clamp(46px,9.6vw,104px);color:#F6F6F2;margin-top:12px}
.hero h1 .set{font-style:italic}
@media (max-width:560px){
  .hero h1 .w{display:block}
  .masthead{padding:20px 24px 6px}
  .masthead img{width:150px}
  .hero{padding-top:8px}
  .building-wrap{width:min(210px,58vw);margin-bottom:14px}
  .hero h1{font-size:46px;margin-top:8px}
}
.hero .sub{max-width:520px;margin:clamp(16px,3vh,30px) auto 0;color:var(--white-soft);font-size:clamp(16px,2.2vw,18px)}
.hero .btn{margin-top:clamp(24px,5vh,44px)}

/* ---------- sections ---------- */
.section{padding-top:clamp(64px,11vh,130px);padding-bottom:clamp(64px,11vh,130px)}
.section-tight{padding-top:clamp(40px,7vh,80px);padding-bottom:clamp(64px,11vh,130px)}
.page-head{padding-bottom:clamp(10px,2.5vh,24px)}
.statement .inner{max-width:760px;margin:0 auto;text-align:center}
.statement p{font-family:var(--serif);font-weight:450;font-size:clamp(25px,4vw,36px);line-height:1.42;text-wrap:balance}
.statement p + p{margin-top:1.1em}

/* pillars — text only, no iconography */
.pillars ol{list-style:none;display:grid;gap:0}
.pillar{padding:clamp(30px,5vh,40px) 4px;border-top:1px solid var(--hairline)}
.pillar:last-child{border-bottom:1px solid var(--hairline)}
.pillar .num{font-family:var(--serif);font-style:italic;color:var(--gold-ink);font-size:24px;line-height:1;display:block;margin-bottom:14px}
.pillar h2,.pillar h3{font-family:var(--sans);font-size:14px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.pillar p{color:var(--ink-soft);font-size:16px;max-width:420px}
@media (min-width:760px){
  .pillars ol{grid-template-columns:1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
  .pillar{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
}

/* vaastu */
.vaastu-inner{text-align:center}
.compass{width:104px;height:104px;margin:0 auto clamp(18px,3vh,26px);display:block;overflow:visible}
.compass path{stroke:var(--gold-ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.compass text{fill:var(--gold-ink);font-family:var(--sans);font-size:10px;font-weight:700}
.js .compass path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease-out}
.compass.drawn path{stroke-dashoffset:0}
.js .compass .needle{transform:rotate(-140deg);transform-origin:60px 60px;transition:transform 1.7s cubic-bezier(.3,1.25,.45,1) .8s}
.compass.drawn .needle{transform:rotate(0deg)}
.vaastu-line{font-family:var(--serif);font-weight:500;font-size:clamp(26px,4vw,34px);text-wrap:balance}
.vaastu-body{color:var(--ink-soft);max-width:500px;margin:14px auto 0;font-size:16px}

/* first-address band (dark) + project card */
.address{padding:clamp(72px,12vh,140px) 0;text-align:center;position:relative;overflow:hidden}
.address .plate-label{color:var(--gold);margin-bottom:clamp(36px,6vh,56px);padding:0 24px}
.sketch-wrap{max-width:500px;margin:0 auto;padding:0 22px}
.sketch{
  display:block;width:100%;height:auto;mix-blend-mode:screen;filter:brightness(1.14);
  -webkit-mask-image:linear-gradient(180deg,#000 64%,rgba(0,0,0,.35) 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 64%,rgba(0,0,0,.35) 84%,transparent 100%);
}
.address .coming{
  font-family:var(--serif);font-weight:450;font-size:clamp(25px,3.6vw,32px);line-height:1.45;
  max-width:760px;margin:clamp(40px,7vh,64px) auto 0;padding:0 24px;text-wrap:balance;
}
.address .coming em{font-style:italic;color:var(--champagne)}
.address .btn{margin-top:clamp(30px,5vh,44px)}

/* project teaser card (projects page) */
.project-card{
  background:var(--night);color:var(--porcelain);
  max-width:760px;margin:0 auto;
  padding:clamp(36px,6vw,64px) clamp(24px,5vw,56px);
  text-align:center;
}
.project-card .plate-label{color:var(--gold);margin-bottom:clamp(26px,4vh,40px)}
.project-card .coming{font-family:var(--serif);font-weight:450;font-size:clamp(22px,3.2vw,29px);line-height:1.45;margin-top:clamp(26px,4vh,40px);text-wrap:balance}
.project-card .coming em{font-style:italic;color:var(--champagne)}
.project-card .btn{margin-top:clamp(26px,4vh,40px)}
.projects-note{color:var(--ink-soft);text-align:center;max-width:520px;margin:clamp(40px,7vh,64px) auto 0;font-size:16px}

/* prose (about) */
.prose{max-width:680px;margin:0 auto}
.prose p{margin-top:1.2em;color:var(--ink);font-size:clamp(17px,2.2vw,19px)}
.prose p:first-child{margin-top:0}
.prose .big{font-family:var(--serif);font-weight:450;font-size:clamp(24px,3.6vw,32px);line-height:1.45;text-wrap:balance}
.prose .quiet{color:var(--ink-soft)}

/* ---------- form card ---------- */
.card{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--hairline);
  max-width:640px;margin:0 auto;
  padding:clamp(34px,6vw,64px) clamp(24px,5vw,64px);
}
.card h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,5vw,40px);text-align:center;text-wrap:balance}
.card .lede{color:var(--ink-soft);text-align:center;font-size:16px;max-width:420px;margin:14px auto 0}
form{margin-top:clamp(28px,4vh,40px)}
.field{margin-bottom:26px}
.field label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gold-ink);margin-bottom:6px}
.field label .opt{color:var(--ink-soft);font-weight:500;letter-spacing:.12em;text-transform:none}
.field input,.field textarea{
  width:100%;font-family:var(--sans);font-size:17px;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid var(--hairline);border-radius:0;
  padding:8px 2px 10px;
  background-image:linear-gradient(var(--gold-ink),var(--gold-ink));
  background-repeat:no-repeat;background-position:left bottom;background-size:0% 2px;
  transition:border-color .25s ease,background-size .45s ease-out;
}
.field textarea{resize:none;min-height:64px}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:transparent;background-size:100% 2px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-bottom-color:transparent;
  background-image:linear-gradient(#8C3B2E,#8C3B2E);background-size:100% 2px;
}
.field:has([aria-invalid="true"]) label{color:#8C3B2E}
.card :focus-visible{outline-color:var(--gold-ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form .btn{width:100%;margin-top:8px}
form .btn[disabled]{opacity:.55;cursor:default}
@media (min-width:768px){form .btn{width:auto;min-width:320px;display:block;margin-left:auto;margin-right:auto;padding:18px 56px}}
.form-status{margin-top:16px;text-align:center;font-size:15px;color:#8C3B2E;min-height:1.4em}
.aftercare{margin-top:22px;text-align:center;color:var(--ink-soft);font-size:14px}
.success{display:none;text-align:center;padding:clamp(20px,4vh,36px) 0}
.success h3{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4.6vw,36px);margin-bottom:14px}
.success p{color:var(--ink-soft);max-width:420px;margin:0 auto}
.card.done form,.card.done .lede{display:none}
.card.done .success{display:block;animation:settle .6s ease-out both}
@keyframes settle{from{opacity:0;transform:translateY(10px)}}
.contact-alt{text-align:center;color:var(--ink-soft);font-size:16px;margin-top:clamp(30px,5vh,44px)}
.contact-alt a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:1px}
.contact-alt a:hover{color:var(--gold-ink)}

/* ---------- footer ---------- */
.colophon{
  border-top:1px solid var(--hairline-dark);
  padding:clamp(48px,8vh,80px) 24px calc(clamp(40px,7vh,64px) + env(safe-area-inset-bottom));
  text-align:center;background:var(--night-deep);color:var(--porcelain);
}
.colophon img{width:104px;margin:0 auto}
.colophon .footnav{margin-top:26px;display:flex;justify-content:center;gap:clamp(16px,4vw,34px);flex-wrap:wrap}
.colophon .footnav a{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:#EDEFF4;text-decoration:none;padding:10px 2px;margin:-10px 0;
}
.colophon .footnav a:hover{color:var(--champagne)}
.colophon .imprint{margin-top:22px;color:rgba(237,239,244,.62);font-size:14px;line-height:2}
.colophon .imprint a{color:#EDEFF4;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:1px}
.colophon .imprint a:hover{color:var(--champagne)}
.colophon .legal{margin-top:20px;font-size:12.5px;color:rgba(237,239,244,.58)}

/* ---------- mobile CTA dock ---------- */
.cta-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:85;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(7,12,23,.94);
  border-top:1px solid rgba(255,255,255,.12);
  transform:translateY(102%);visibility:hidden;
  transition:transform .35s ease,visibility 0s .35s;
}
.cta-dock.show{transform:none;visibility:visible;transition:transform .35s ease,visibility 0s}
.cta-dock .btn{display:block;width:100%;margin-top:0;padding:16px 12px;text-align:center}
@media (min-width:768px){.cta-dock{display:none}}

/* ---------- reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s ease-out,transform .5s ease-out}
.js [data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js .compass path{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .js .compass .needle{transform:rotate(0deg);transition:none}
  .building-wrap::before{transition:none}
  .building-wrap.drawn::before{opacity:1}
  .btn::after{display:none}
  .btn:active{transform:none}
  .btn{transition:background .25s ease,color .25s ease}
  .field input,.field textarea{transition:border-color .25s ease}
  .card.done .success{animation:none}
  .cta-dock{transition:none}
}