/* Joya Builders, shared design system (index, projects, property, 404). Luxurious minimalism: black canvas, ivory voice, gold signature. Sharp corners, flat colour. */
:root{
  --c-black:#0a0a0a;--c-black-2:#0f0f0f;--c-black-3:#161616;
  --c-gold:#c8a84b;--c-gold-light:#d7bb63;--c-gold-pale:#f5e6b8;
  --c-ivory:#faf5e8;--c-dim:#b8a88a;--c-text:rgba(250,245,232,.78);
  --c-line:rgba(250,245,232,.10);--c-line-neutral:var(--c-line);--c-line-strong:rgba(250,245,232,.18);--c-line-gold:rgba(200,168,75,.45);--c-scrim:rgba(10,10,10,.45);
  --f-serif:'Playfair Display',Georgia,serif;--f-sans:'Inter',system-ui,sans-serif;
  --t-display:clamp(2.75rem,1.7rem + 4.4vw,6rem);--t-h1:clamp(2.5rem,1.7rem + 3.2vw,4.75rem);--t-h2:clamp(2rem,1.45rem + 2.2vw,3.25rem);--t-h3:clamp(1.25rem,1.12rem + .55vw,1.625rem);
  --t-body:clamp(1rem,.97rem + .15vw,1.0625rem);--t-lede:clamp(1.0625rem,1rem + .3vw,1.1875rem);--t-small:.875rem;--t-label:.6875rem;--t-micro:.6875rem;
  --gutter:clamp(1.25rem,5vw,4rem);--section:clamp(5.5rem,4rem + 7vw,11rem);--section-sm:clamp(4rem,3rem + 4vw,7rem);
  --container:1440px;--measure:62ch;--nav-h:80px;--col-gap:clamp(1.5rem,2.5vw,2.5rem);
  --ease:cubic-bezier(.22,1,.36,1);--ease-out:var(--ease);--dur:.5s;
  --z-float:90;--z-nav:100;--z-menu:200;--z-dialog:300;
}
@media (max-width:767px){:root{--nav-h:64px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--c-line-strong) var(--c-black);background:var(--c-black)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
html.is-locked{overflow:hidden}
body{margin:0;background:var(--c-black);color:var(--c-ivory);font-family:var(--f-sans);font-size:var(--t-body);font-weight:400;line-height:1.75;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;display:block}
img,video{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--c-ivory);color:var(--c-black)}
:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}
.icon{flex:none;display:block}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:var(--z-dialog);background:var(--c-ivory);color:var(--c-black);padding:.8rem 1.2rem;font-weight:500;font-size:var(--t-small)}
.skip-link:focus{top:1rem}

/* layout */
.wrap{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.wrap--narrow{width:min(100% - 2*var(--gutter),820px)}
.section{padding-block:var(--section);position:relative}
main{display:block}

/* typography */
.eyebrow{display:block;font-family:var(--f-sans);font-weight:500;font-size:var(--t-label);line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold);margin-bottom:1.25rem}
.h-display,.h2,.hero__title{font-family:var(--f-serif);font-weight:400;color:var(--c-ivory)}
.h-display{font-size:var(--t-display);line-height:1.05;letter-spacing:-.015em}
.h2{font-size:var(--t-h2);line-height:1.12;letter-spacing:-.01em}
.h2 em,.hero__title em,.h-display em{font-style:italic;padding-bottom:.12em}
.h2 em{color:inherit}
.hero__title em,.h-display em{color:var(--c-gold)}
.lede{color:var(--c-text);max-width:52ch;font-size:var(--t-lede);line-height:1.7;margin-top:1.5rem}
.prose{margin-top:1.75rem}
.prose p{color:var(--c-text);max-width:var(--measure);margin-bottom:1.25rem}
.prose a,.faq__a a{text-decoration:underline;text-decoration-color:var(--c-line-strong);text-underline-offset:4px;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.caption{margin-top:1.1rem;font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--c-dim);line-height:1.6}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:52px;max-width:100%;padding:0 1.75rem;font-family:var(--f-sans);font-weight:500;font-size:.75rem;line-height:1;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;border:1px solid transparent;border-radius:0;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--sm{min-height:40px;padding:0 1.1rem;font-size:var(--t-label)}
.btn--gold{background:var(--c-gold);color:var(--c-black)}
.btn--line{border-color:var(--c-line-strong);color:var(--c-ivory)}
.btn--text{min-height:0;padding:.5rem 0;color:var(--c-ivory)}
.btn--text::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--c-line-strong);transition:background-color .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{background:var(--c-gold-light)}
  .btn--line:hover{border-color:var(--c-gold);color:var(--c-gold)}
  .btn--text:hover{color:var(--c-gold)}
  .btn--text:hover::after{background:var(--c-gold)}
  .prose a:hover,.faq__a a:hover{color:var(--c-gold);text-decoration-color:var(--c-gold)}
}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:2.25rem}
.cta-row--center{justify-content:center;margin-top:clamp(3rem,6vw,5rem)}
@media (max-width:479px){.btn--wide{white-space:normal;text-align:center;line-height:1.4}}
@media (max-width:399px){
  .btn:not(.btn--text){padding:0 1.1rem;letter-spacing:.1em;white-space:normal;text-align:center;line-height:1.4}
  .cta-row .btn:not(.btn--text){width:100%}
}

/* frames */
.frame{position:relative;overflow:hidden;aspect-ratio:var(--ar,4/5);background:var(--c-black-3)}
.frame img{width:100%;height:100%;object-fit:cover}

/* header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);height:var(--nav-h);border-bottom:1px solid transparent;transition:transform .5s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease)}
.site-header.is-solid{background:rgba(10,10,10,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--c-line)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header__inner{display:flex;align-items:center;gap:2rem;height:100%;width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.brand{display:inline-flex;align-items:center;gap:.85rem;min-width:0}
.brand__logo{width:36px;height:36px;object-fit:contain;flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-family:var(--f-serif);font-size:1.0625rem;font-weight:600;color:var(--c-ivory);letter-spacing:.02em;line-height:1.15}
.brand__sub{font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c-dim);line-height:1.4}
@media (max-width:379px){.brand__text .brand__sub{display:none}}
.site-nav{display:none;margin-left:auto;gap:clamp(1.5rem,2.2vw,2.5rem)}
.site-nav__link{position:relative;padding:.5rem 0;font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,245,232,.72);transition:color .3s var(--ease)}
.site-nav__link::after{content:"";position:absolute;left:0;bottom:.15rem;width:100%;height:1px;background:var(--c-gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.site-nav__link[aria-current]{color:var(--c-ivory)}
.site-nav__link[aria-current]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.site-nav__link:hover{color:var(--c-ivory)}}
.site-header__cta{display:none}
.menu-toggle{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;color:var(--c-ivory)}
@media (min-width:1024px){
  .site-nav{display:flex}
  .site-header__cta{display:inline-flex}
  .menu-toggle{display:none}
}
@media (min-width:1024px) and (max-width:1279px){
  .site-header__cta-label{display:none}
  .site-header__cta{padding:0 .85rem}
}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;padding:0 var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));background:var(--c-black);overflow-y:auto}
.menu[hidden]{display:none}
.menu__top{flex:none;display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.menu__close{width:44px;height:44px;display:grid;place-items:center;margin-right:-.6rem;color:var(--c-ivory)}
.menu__links{display:flex;flex-direction:column;gap:.25rem;margin-block:auto;padding-block:2rem}
.menu__link{display:block;padding:.5rem 0;font-family:var(--f-serif);font-size:clamp(2rem,8vw,2.75rem);line-height:1.15;color:var(--c-ivory)}
.menu__foot{flex:none;display:grid;gap:.9rem;padding-top:1.5rem;border-top:1px solid var(--c-line);color:var(--c-dim);font-size:var(--t-small)}
.menu__wa{display:inline-flex;align-items:center;gap:.7rem;color:var(--c-gold);font-weight:500;font-size:1.0625rem}
.menu__social{display:flex;gap:1.5rem}
.menu__social a{display:inline-flex;align-items:center;gap:.5rem;color:var(--c-ivory)}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:end;padding:calc(var(--nav-h) + 2rem) 0 clamp(3rem,9vh,7rem);isolation:isolate;overflow:clip}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--c-black)}
.hero__video{position:absolute;left:0;top:-12%;width:100%;height:112%;max-width:none;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:var(--c-scrim)}
.hero__content{position:relative}
.hero__title{font-size:clamp(2.5rem,1.4rem + 4.6vw,6rem);line-height:1.08;letter-spacing:-.015em;max-width:17ch}
.hero__lede{margin-top:1.75rem;max-width:46ch;color:rgba(250,245,232,.86)}
.hero__content .cta-row{margin-top:2.5rem}
html.no-hero-video .hero__video{object-position:center}

/* facts */
.figures-sec{padding-block:var(--section-sm);border-block:1px solid var(--c-line)}
.figures{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 1.5rem}
.figure{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.figure__num{font-family:var(--f-serif);font-size:clamp(2.25rem,4vw,3.5rem);line-height:1;color:var(--c-ivory);font-variant-numeric:lining-nums tabular-nums}
.figure__label{font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--c-dim);line-height:1.5}
@media (min-width:768px){.figures{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* split sections: about, legacy */
.split{display:grid;gap:clamp(3.5rem,7vw,5rem)}
.split__text{min-width:0}
@media (min-width:1024px){
  .split{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center}
  .split--about .about__fig{grid-column:1/6}
  .split--about .split__text{grid-column:7/13}
  .split--legacy .split__text{grid-column:1/7}
  .split--legacy .legacy__fig{grid-column:8/13}
}
.ticks{list-style:none;margin-top:2rem}
.ticks li{padding:.9rem 0;border-top:1px solid var(--c-line);color:var(--c-text);line-height:1.55;font-size:.9375rem}
.ticks li:last-child{border-bottom:1px solid var(--c-line)}
@media (min-width:1024px){.ticks--cols{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem}.ticks--cols li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--c-line)}}
.about__fig{max-width:520px;width:100%;min-width:0}
.legacy__fig{max-width:560px;width:100%;min-width:0}
@media (min-width:1024px){.about__fig,.legacy__fig{max-width:none}}
.legacy__figure{display:flex;align-items:baseline;gap:1.1rem;margin-bottom:2.5rem}
.legacy__num{font-family:var(--f-serif);font-size:clamp(4rem,10vw,8rem);line-height:1;color:var(--c-ivory);font-variant-numeric:lining-nums}
.legacy__label{font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--c-dim)}

/* signature */
.signature{text-align:center;overflow-x:clip}
.statement{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.5rem);line-height:1.3;letter-spacing:-.01em;max-width:24ch;margin-inline:auto;color:var(--c-ivory)}
.signature__hero{max-width:640px;margin:clamp(3rem,6vw,5rem) auto 0}
.signature__hero .caption{text-align:center}

/* available now (cards live in property.css) */
.home-sale__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2.5rem,4vw,3.5rem)}

/* services */
.services{background:var(--c-black-2)}
.services__grid{display:grid;gap:clamp(2.5rem,4vw,4rem)}
.services__head .btn--text{margin-top:2rem}
.service{padding:2rem 0 2.25rem;border-top:1px solid var(--c-line)}
.service:last-child{border-bottom:1px solid var(--c-line)}
.service__title{font-family:var(--f-serif);font-weight:400;font-size:var(--t-h3);line-height:1.2;color:var(--c-ivory)}
.service__desc{margin-top:.9rem;color:var(--c-text);max-width:52ch;font-size:.9375rem;line-height:1.75}
.service__tags{margin-top:1.25rem;font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--c-dim)}
@media (min-width:1024px){
  .services__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
  .services__head{grid-column:1/6;position:sticky;top:calc(var(--nav-h) + 2rem)}
  .services__list{grid-column:7/13}
  .service{padding:2.5rem 0 2.75rem}
}

/* process */
.process__grid{display:grid;gap:clamp(3rem,6vw,4.5rem)}
.process__fig{max-width:520px;width:100%;min-width:0}
.process__body{min-width:0}
.stages{display:grid;gap:2rem 2.5rem;margin-top:clamp(2rem,4vw,3rem)}
.stage{padding-top:1.25rem;border-top:1px solid var(--c-line)}
.stage__title{font-family:var(--f-serif);font-weight:400;font-size:var(--t-h3);line-height:1.25;color:var(--c-ivory);margin-bottom:.6rem}
.stage p{color:var(--c-dim);font-size:.9375rem;line-height:1.7}
@media (min-width:640px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .process__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center}
  .process__fig{grid-column:1/6;max-width:none}
  .process__body{grid-column:7/13}
}

/* why */
.why__grid{display:grid;gap:clamp(3rem,6vw,4.5rem)}
.why__head{min-width:0}
.pillars{display:grid;gap:2rem 2.5rem}
.pillar{padding-top:1.25rem;border-top:1px solid var(--c-line)}
.pillar__title{font-family:var(--f-serif);font-weight:400;font-size:var(--t-h3);line-height:1.25;color:var(--c-ivory);margin-bottom:.6rem}
.pillar p{color:var(--c-dim);font-size:.9375rem;line-height:1.7}
@media (min-width:640px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .why__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
  .why__head{grid-column:1/6}
  .pillars{grid-column:7/13}
}

/* faq */
.faq-sec .lede{margin-top:1rem}
.faqs{margin-top:clamp(2rem,4vw,3rem)}
.faq{border-top:1px solid var(--c-line)}
.faq:last-child{border-bottom:1px solid var(--c-line)}
.faq summary{position:relative;display:block;list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;font-family:var(--f-serif);font-size:1.125rem;line-height:1.45;color:var(--c-ivory)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:.25rem;top:50%;width:12px;height:1px;background:var(--c-line-strong);transition:transform .45s var(--ease),background-color .3s var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq[open] summary::before,.faq[open] summary::after{background:var(--c-gold)}
.faq[open] summary::after{transform:rotate(0)}
.faq__a{overflow:hidden}
.faq__a p{color:var(--c-text);max-width:var(--measure);line-height:1.8;padding-bottom:1.5rem;font-size:.9375rem}

/* contact */
.contact{background:var(--c-black-2)}
.contact__grid{display:grid;gap:3.5rem}
.contact__info{min-width:0}
.contact-list{margin-top:2.25rem}
.contact-list__row{display:grid;gap:.4rem;padding:1.15rem 0;border-top:1px solid var(--c-line)}
.contact-list__row:last-child{border-bottom:1px solid var(--c-line)}
.contact-list dt{display:flex;align-items:center;gap:.65rem;font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c-dim)}
.contact-list dd{color:var(--c-ivory);font-size:1rem;line-height:1.6;overflow-wrap:anywhere}
.contact-list dd a{transition:color .3s var(--ease)}
.contact-list__social{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.contact-list__social a{display:inline-flex;align-items:center;gap:.5rem}
@media (hover:hover) and (pointer:fine){.contact-list dd a:hover{color:var(--c-gold)}}
@media (min-width:520px){.contact-list__row{grid-template-columns:11rem 1fr;align-items:baseline}}
.contact__map{--ar:1/1}
@media (min-width:640px){.contact__map{--ar:4/3}}
.contact__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) invert(.9) contrast(.9)}
@media (min-width:1024px){.contact__grid{grid-template-columns:1fr 1fr;column-gap:clamp(3rem,6vw,6rem);align-items:start}}

/* footer */
.site-footer{background:var(--c-black);border-top:1px solid var(--c-line);padding-top:clamp(3.5rem,7vw,6rem)}
.footer__grid{display:grid;gap:3rem}
.footer__brand img{width:56px;height:56px;object-fit:contain;margin-bottom:1rem}
.footer__brand .brand__sub{margin-top:.15rem}
.footer__blurb{margin-top:1.25rem;color:var(--c-dim);font-size:var(--t-small);line-height:1.75;max-width:34ch}
.footer__title{font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c-dim);margin-bottom:1.25rem}
.footer__links{list-style:none;display:grid;gap:.7rem}
.footer__links a{display:inline-flex;align-items:center;gap:.5rem;color:var(--c-text);font-size:.9375rem;transition:color .3s var(--ease)}
.footer__gold{margin-top:.75rem}
@media (hover:hover) and (pointer:fine){.footer__links a:hover{color:var(--c-ivory)}}
.footer__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;margin-top:clamp(3rem,6vw,4.5rem);padding:1.5rem 0 2rem;border-top:1px solid var(--c-line);color:var(--c-dim);font-size:.8125rem}
@media (min-width:640px){.footer__grid{grid-template-columns:1fr 1fr;gap:3rem 2.5rem}}
@media (min-width:1024px){.footer__grid{grid-template-columns:1.6fr 1fr 1.2fr 1fr}}

/* whatsapp float */
.wa-float{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:calc(1.25rem + env(safe-area-inset-bottom));z-index:var(--z-float);width:52px;height:52px;display:grid;place-items:center;background:var(--c-black);color:var(--c-gold);border:1px solid var(--c-line-strong);transition:opacity .4s var(--ease),transform .5s var(--ease),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.wa-float.is-away{opacity:0;pointer-events:none;transform:translateY(14px)}
@media (hover:hover) and (pointer:fine){.wa-float:hover{background:var(--c-gold);color:var(--c-black);border-color:var(--c-gold)}}

/* motion states (reduced motion = everything visible, static) */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.motion-off) [data-reveal],
  html.js:not(.motion-off) [data-hero-item]{opacity:0}
  html.js:not(.motion-off) [data-split]{visibility:hidden}
  html.js:not(.motion-off) [data-image-reveal] img{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}