/* ═══════════════════════════════════════════════════════════════════════
   houdini.digital/real-estate: motion and surface layer.
   Keyed to that page's own classes. Adds rules only, removes nothing.
   Same system as the homepage layers: pill header, inset scroll driven hero,
   rounded cards with entrance, accordion FAQ, blob gradient CTA.
   Rollback: delete the <link> to this file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── header: black pill hanging from the top edge ───────────────────── */
header{background:transparent!important;border-bottom:0!important;box-shadow:none!important}
header .w.nav{
  width:auto;max-width:min(1200px,calc(100vw - 32px));margin:0 auto;
  background:#000;border-radius:0 0 26px 26px;
  padding:0 clamp(16px,2.6vw,34px);height:72px;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.85),inset 0 -1px 0 rgba(184,153,104,.18);
}
header .nlinks a{position:relative;transition:color .25s ease}
header .nlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--or,#B89968);transition:right .35s cubic-bezier(.2,.7,.3,1)}
header .nlinks a:hover::after{right:0}

/* home button: text pill on desktop, round icon on phones */
.home{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:999px;margin-left:auto;
  border:1px solid rgba(184,153,104,.4);color:#F4EFE6;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .25s ease,color .25s ease}
.home:hover{border-color:var(--or,#B89968);color:var(--or,#B89968)}
.home svg{flex-shrink:0}
header .call{margin-left:0}
@media (max-width:900px){
  .home{width:38px;height:38px;min-height:0;padding:0;justify-content:center;border-radius:50%;margin-left:auto}
  .home span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ── hero: inset, rounded, scroll driven ────────────────────────────── */
.hero{
  padding:clamp(10px,1.4vw,22px)!important;
  position:relative;overflow:hidden;
}
.hero>video,.hero>.fallback{
  /* a replaced element with auto width ignores inset, so the size is explicit */
  inset:clamp(10px,1.4vw,22px)!important;
  width:calc(100% - 2 * clamp(10px,1.4vw,22px))!important;
  height:calc(100% - 2 * clamp(10px,1.4vw,22px))!important;
  border-radius:clamp(18px,2.4vw,34px);
  transform:translate3d(0,calc(var(--sy,0) * 12%),0) scale(calc(1 + var(--sy,0) * .06));
  transform-origin:center;will-change:transform;
}
.hero::after{
  content:"";position:absolute;inset:clamp(10px,1.4vw,22px);border-radius:clamp(18px,2.4vw,34px);
  pointer-events:none;z-index:1;border:1px solid rgba(184,153,104,.18);
  /* the copy sits on the left over a bright aerial, so the veil is a left
     wash plus a foot, and the top right stays clear */
  background:
    linear-gradient(90deg,rgba(11,11,12,.8) 0%,rgba(11,11,12,.5) 45%,rgba(11,11,12,0) 76%),
    linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,0) 45%,rgba(11,11,12,.6) 100%);
}
.hero>.in{
  position:relative;z-index:2;padding-top:28px;
  transform:translate3d(0,calc(var(--sy,0) * -10%),0);opacity:calc(1 - var(--sy,0) * .9);
  will-change:transform,opacity;
}
.hero .btn.b1{border-radius:999px!important}
.hero .btn.b2{border-radius:999px!important}

/* ── cards: rounded, lift, entrance via .pz ─────────────────────────── */
.gcard,.chain .step,.svc{border-radius:16px;transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease,background .4s ease}
.gcard:hover,.chain .step:hover,.svc:hover{transform:translateY(-4px);box-shadow:0 24px 50px -34px rgba(0,0,0,.8)}
.gcard.us{box-shadow:0 0 0 1px rgba(184,153,104,.35)}
.pz{opacity:0;transform:scale(.95) translateY(10px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.pz.pz-in{opacity:1;transform:none}
.gcard.pz.pz-in:hover,.chain .step.pz.pz-in:hover,.svc.pz.pz-in:hover{transform:translateY(-4px)}

/* ── FAQ: accordion on native details ───────────────────────────────── */
details{border-radius:12px!important;border:1px solid rgba(184,153,104,.14);box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:border-color .25s ease,box-shadow .25s ease}
details:hover{border-color:rgba(184,153,104,.32)}
details[open]{border-color:rgba(184,153,104,.45);box-shadow:0 10px 28px -12px rgba(0,0,0,.6)}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:""!important;width:9px;height:9px;flex-shrink:0;border-right:1.5px solid var(--or,#B89968);border-bottom:1.5px solid var(--or,#B89968);
  transform:rotate(45deg);transition:transform .3s cubic-bezier(.2,.7,.3,1);margin-top:-4px}
details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
details[open]>p{animation:re-open .35s cubic-bezier(.2,.7,.3,1) both}
@keyframes re-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── CTA block: blob gradient card (registered properties) ──────────── */
@property --r-x1{syntax:'<percentage>';inherits:false;initial-value:10%}
@property --r-y1{syntax:'<percentage>';inherits:false;initial-value:10%}
@property --r-x2{syntax:'<percentage>';inherits:false;initial-value:90%}
@property --r-y2{syntax:'<percentage>';inherits:false;initial-value:90%}
@property --r-s1{syntax:'<percentage>';inherits:false;initial-value:55%}
@property --r-s2{syntax:'<percentage>';inherits:false;initial-value:55%}
.cta,.contact{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:clamp(20px,2.6vw,34px);border:1px solid rgba(184,153,104,.22);
  background-color:#0F1A14;
  background-image:
    radial-gradient(circle at var(--r-x1) var(--r-y1),rgba(212,185,138,.5) 0,transparent var(--r-s1)),
    radial-gradient(circle at var(--r-x2) var(--r-y2),rgba(30,111,76,.55) 0,transparent var(--r-s2));
  animation:r-b1 10s ease-in-out infinite,r-b2 12s ease-in-out infinite,r-s1 7s ease-in-out infinite,r-s2 8.5s ease-in-out infinite;
}
.cta::before,.contact::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(11,11,12,.5),rgba(11,11,12,.8) 75%)}
@keyframes r-b1{0%,100%{--r-x1:5%;--r-y1:5%}50%{--r-x1:40%;--r-y1:50%}}
@keyframes r-b2{0%,100%{--r-x2:95%;--r-y2:95%}50%{--r-x2:60%;--r-y2:50%}}
@keyframes r-s1{0%,100%{--r-s1:45%}50%{--r-s1:80%}}
@keyframes r-s2{0%,100%{--r-s2:45%}50%{--r-s2:82%}}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{border-top:1px solid rgba(184,153,104,.14);background:linear-gradient(180deg,#0B0B0C,#0D0C0E)}

/* ── mobile ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  header .w.nav{height:60px;border-radius:0 0 18px 18px;padding-inline:14px;max-width:calc(100vw - 16px)}
  .hero{padding:8px!important}
  .hero>video,.hero>.fallback,.hero::after{inset:8px!important;border-radius:16px}
  .hero>video,.hero>.fallback{width:calc(100% - 16px)!important;height:calc(100% - 16px)!important}
  .hero>.in{background:linear-gradient(180deg,rgba(11,11,12,.5),rgba(11,11,12,.72));border-radius:14px;padding:18px 16px 22px;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .cta,.contact{border-radius:18px}
}

/* ── reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hero>video,.hero>.in{transform:none;opacity:1}
  .pz{opacity:1;transform:none;transition:none}
  .cta,.contact{animation:none}
  details[open]>p{animation:none}
}

/* Phone header, 7 Sep 2026. Call was present but printed the full number, eating
   142px of a 375px bar, and there was no WhatsApp at all. On a phone the number is
   redundant because the tel: link carries it, and the Home icon is redundant because
   the wordmark already links to /. Both contact pills now fit. */
.call.wa .cw{display:inline}
@media (max-width:560px){
  header .home{display:none}
  header .call .cnum{display:none}
  header .call{padding:0 13px;min-height:38px}
}

/* the reel sits centred and capped, so a 9:16 film never dominates a desktop page */
#reel .reelwrap{margin:28px auto 0;max-width:330px;border-radius:18px;overflow:hidden;
  border:1px solid rgba(184,153,104,.24);background:#0F0E12;
  box-shadow:0 30px 70px -45px rgba(0,0,0,.9)}
#reel .reelwrap video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
@media (max-width:560px){#reel .reelwrap{max-width:260px;border-radius:14px}}