/* arteace.com — rebuilt 4 Sep 2026 against the developer's own art direction.

   The previous system was near-black ground with gold type. It photographed as a void: a
   narrow centred column, a wordmark wrapping onto two lines, and no room anywhere. ACE's own
   site does the opposite, and it is the reference the founder set: a warm cream ground,
   bronze type, one render owning half the first screen, wide tracking, thin line icons, jali
   ornament between sections, and a great deal of air.

   Dark is now punctuation rather than the whole page: the nav, the money bands, the contact
   block and the footer. Everything else breathes on cream. */

@font-face{font-family:Italiana;src:url(/assets/fonts/italiana.woff2)format('woff2');font-display:swap}
@font-face{font-family:Prata;src:url(/assets/fonts/prata-tagline.woff2)format('woff2');font-display:swap}
@font-face{font-family:InterVar;src:url(/assets/fonts/inter-var.woff2)format('woff2');font-weight:100 900;font-display:swap}

:root{
  --cream:#F6EEE2; --cream-2:#FBF5EC; --paper:#FFFDFA;
  --ink:#0D0B08;
  --bronze:#6E5730; --bronze-2:#8A6F42; --bronze-3:#96794A;
  --gold-1:#C9A44E; --gold-hi:#E8CE8F;
  --gold-fill:linear-gradient(100deg,#E8CE8F 0%,#C9A44E 46%,#A8853A 100%);
  --gold-ink:linear-gradient(120deg,#B8933F,#8A6F42 70%);
  --rule:rgba(138,111,66,.24); --rule-2:rgba(138,111,66,.42);
  --band:rgba(138,111,66,.1); --paper-dim:var(--bronze-2); --paper-faint:var(--bronze-3);
  --ground:var(--cream); --ground-2:var(--cream-2); --radius:4px;
  --font-body:InterVar,ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:Italiana,Georgia,serif;
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2.25rem; --s6:3.5rem; --s7:6rem;
  --measure:64ch; --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--bronze-2);
  font:400 17.5px/1.78 InterVar,ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold-1);color:#fff}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
a{color:var(--bronze);text-underline-offset:3px}
.wrap{width:min(100% - 2.6rem,76rem);margin-inline:auto}
.center{text-align:center}
.center p{margin-inline:auto}

/* ── nav: the one piece that stays dark, as theirs is ───────────────────── */
.nav{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:1px solid rgba(201,164,78,.22)}
.nav .wrap{width:min(100% - 2.6rem,82rem)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:.85rem 0}
.nav__brand{display:flex;flex-direction:row;align-items:center;gap:.75rem;text-decoration:none;flex:0 0 auto}
.nav__logo{width:74px;height:auto;display:block}
.nav__mark{font-family:Italiana,Georgia,serif;font-size:1.34rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-hi);line-height:1}
.nav__by{display:none}
.nav__links{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.nav__links li{white-space:nowrap}
.nav__links a{color:#EFE6D8;text-decoration:none;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;transition:color .2s var(--ease)}
.nav__links a:hover{color:var(--gold-hi)}
.nav__cta{padding:.62rem 1.2rem;border-radius:4px;background:var(--gold-fill);color:#231B0C;
  font-weight:700;font-size:.8rem;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
@media (max-width:1180px){.nav__links{display:none}}
/* At 390px the brand and the CTA together wanted 414px inside a 356px column, which is
   what was pushing the document sideways. Both give ground rather than the page. */
@media (max-width:560px){
  .nav__in{gap:var(--s2)}
  .nav__logo{width:54px}
  .nav__mark{font-size:1.05rem;letter-spacing:.13em}
  .nav__brand{gap:.5rem}
  .nav__cta{padding:.55rem .8rem;font-size:.72rem;letter-spacing:.03em}
}
@media (max-width:380px){.nav__mark{display:none}}

/* ── hero: cream statement panel beside a full-bleed render ─────────────── */
.hero{position:relative;background:var(--cream);padding:0}
.hero__film,.hero__bloom,.hero__credit{display:none}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;min-height:min(84svh,780px)}
.hero__panel{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--s7) var(--s5);background:var(--paper)}
.hero__shot{position:relative;background:#2A2117 url(/assets/img/ace/ace-pool.webp) center/cover no-repeat}
.hero__shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,253,250,.55) 0%,rgba(255,253,250,0) 20%)}
.lockup{margin:0;display:flex;flex-direction:column;align-items:center;font-weight:400;width:100%}
.wordmark{font-family:Italiana,Georgia,serif;font-size:clamp(2.4rem,5vw,4.2rem);line-height:1;
  letter-spacing:.16em;padding-left:.16em;color:var(--bronze);white-space:nowrap}
.lockup hr{width:min(78%,17rem);border:0;border-top:1px solid var(--rule-2);margin:var(--s4) 0 var(--s3)}
.tagline{font-family:InterVar,sans-serif;font-weight:400;font-size:clamp(.82rem,1.2vw,.98rem);
  letter-spacing:.34em;text-transform:uppercase;color:var(--bronze-2);white-space:nowrap}
.place{display:none}
.figbox{margin:var(--s5) auto 0;max-width:24rem;border:1px solid var(--rule-2);
  padding:var(--s4) var(--s3) var(--s3);position:relative;background:var(--cream-2)}
.figbox__label{position:absolute;top:-.8em;left:50%;transform:translateX(-50%);background:var(--cream-2);
  padding:0 .9rem;font-family:InterVar,sans-serif;font-weight:500;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-2);white-space:nowrap}
.figbox__fig{margin:0;font-size:clamp(1.9rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.02em;color:var(--bronze)}
.figbox__reg{margin:.5rem 0 0;font-size:.78rem;letter-spacing:.12em;color:var(--bronze-3)}
.hero__note{margin:var(--s4) auto 0;max-width:46ch;font-size:.78rem;color:var(--bronze-3);line-height:1.62}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem var(--s4);
  margin:var(--s4) auto 0;max-width:40rem;padding:0;list-style:none}
.facts li{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze-3)}
.facts b{color:var(--bronze);font-weight:700}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;min-height:0}
  .hero__shot{aspect-ratio:16/10;order:-1}
  .hero__shot::after{background:linear-gradient(180deg,rgba(13,11,8,.14),rgba(255,253,250,.3))}
  .hero__panel{padding:var(--s6) var(--s4)}
  .facts li{font-size:.72rem}
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-block;margin-top:var(--s5);padding:1rem 2rem;border-radius:4px;border:0;
  font-family:InterVar,ui-sans-serif,sans-serif;background:var(--gold-fill);color:#231B0C;
  font-weight:700;font-size:.95rem;letter-spacing:.05em;text-decoration:none;cursor:pointer;
  transition:filter .2s var(--ease),transform .2s var(--ease)}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn--ghost{background:none;border:1px solid var(--rule-2);color:var(--bronze);font-weight:600}

/* ── sections, with air ─────────────────────────────────────────────────── */
section{padding:var(--s7) 0}
/* Section headings were Italiana, a thin high-contrast display serif, at 1.9 to 2.9rem.
   At that size it reads as texture rather than as words, which is what the founder kept
   calling out. ACE's own site sets its section heads in a light sans, uppercase and
   wide-tracked, and keeps the serif for one or two display moments. Same here now: the
   serif survives only on the hero wordmark, where it is large enough to be read. */
h2{font-family:InterVar,ui-sans-serif,-apple-system,sans-serif;font-weight:300;
  font-size:clamp(1.55rem,2.5vw,2.15rem);letter-spacing:.11em;text-transform:uppercase;
  margin:0 0 var(--s4);color:var(--bronze);line-height:1.32}
h3{font-size:1.02rem;font-weight:600;letter-spacing:.01em;margin:var(--s4) 0 var(--s1);color:var(--bronze)}
p{margin:0 0 var(--s3);max-width:var(--measure);color:var(--bronze-2)}
.lede{color:var(--bronze);font-size:1.16rem;line-height:1.7;font-weight:400}
.fine{font-size:.88rem;color:var(--bronze-3);max-width:var(--measure);line-height:1.62}
ul,ol{color:var(--bronze-2);max-width:var(--measure)}
li{margin-bottom:.4rem}
strong{color:var(--bronze)}

/* ACE's own jali ornament, dividing sections as theirs does */
.jali-rule{height:78px;margin:0;background:url(/assets/img/art-jali-band.webp) center/cover no-repeat;
  opacity:.15;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}

.answer{border:1px solid var(--rule);background:var(--paper);padding:var(--s4) var(--s5);
  max-width:var(--measure);margin:0 auto var(--s5);border-radius:4px}
.answer p{margin:0;color:var(--bronze)}

/* ── particulars ────────────────────────────────────────────────────────── */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0;
  margin-top:var(--s5);border-top:1px solid var(--rule)}
.feat{padding:var(--s5) var(--s4);border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);text-align:center}
.feat__k{margin:0 0 .5rem;font-family:InterVar,sans-serif;font-weight:600;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-3)}
.feat__v{margin:0 0 .35rem;font-family:InterVar,sans-serif;font-weight:600;font-size:1.5rem;
  letter-spacing:-.01em;color:var(--bronze);line-height:1.2}
.feat__d{margin:0;font-size:.86rem;color:var(--bronze-3);max-width:none}

/* ── amenities, thin line icons ─────────────────────────────────────────── */
.amen{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--s6) var(--s5);
  margin-top:var(--s6)}
.amen__i{text-align:left}
.amen__i svg{width:34px;height:34px;color:var(--bronze-2);margin-bottom:var(--s3);display:block}
.amen__i h3{margin:0 0 .4rem;font-size:1.14rem;font-weight:500;font-family:InterVar,sans-serif;color:var(--bronze)}
.amen__i p{margin:0;font-size:.92rem;color:var(--bronze-3);max-width:32ch}

/* ── gallery ────────────────────────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5)}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:4px;aspect-ratio:16/10;
  background:var(--cream-2);box-shadow:0 10px 30px rgba(70,52,26,.09)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gal figure:hover img{transform:scale(1.045)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:.7rem .85rem;font-size:.78rem;
  letter-spacing:.05em;color:#FFF8EC;background:linear-gradient(0deg,rgba(13,11,8,.82),transparent)}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gal{grid-template-columns:1fr}}

/* ── dark bands: the money sections and the contact block ───────────────── */
.band-dark{background:var(--ink)}
.band-dark h2{color:var(--gold-hi)}
.band-dark h3{color:#EFE6D8}
.band-dark p,.band-dark li{color:rgba(239,230,216,.82)}
.band-dark .lede{color:#EFE6D8}
.band-dark .fine{color:rgba(239,230,216,.56)}
.band-dark strong{color:#FFF8EC}
.band-dark a{color:var(--gold-hi)}
.band-dark thead th{background:rgba(201,164,78,.14);color:var(--gold-hi)}
.band-dark td,.band-dark th{border-color:rgba(201,164,78,.2)}
.band-dark caption{color:rgba(239,230,216,.58)}
.band-dark details{border-color:rgba(201,164,78,.2)}
.band-dark summary{color:#FFF8EC}
.band-dark .spec>div{background:rgba(255,248,236,.04);border-color:rgba(201,164,78,.2)}
.band-dark .spec p{color:rgba(239,230,216,.82)}
.band-dark .answer{background:rgba(255,248,236,.05);border-color:rgba(201,164,78,.2)}
.band-dark .answer p{color:#EFE6D8}
.ground::before,.ground::after{display:none!important}

/* ── tables ─────────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;margin:var(--s4) 0}
table{width:100%;border-collapse:collapse;font-size:.95rem}
thead th{background:var(--band);color:var(--bronze);font-weight:600;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:.85rem 1rem}
td,th{border:1px solid var(--rule);padding:.85rem 1rem}
caption{caption-side:bottom;padding-top:var(--s3);font-size:.82rem;color:var(--bronze-3);text-align:left}

/* ── specifications ─────────────────────────────────────────────────────── */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:var(--s4)}
.spec>div{padding:var(--s4);background:var(--paper);border:1px solid var(--rule);border-radius:4px}
.spec h3{margin:0 0 .6rem;font-family:InterVar,sans-serif;font-weight:600;color:var(--bronze)}
.spec p{margin:0;font-size:.92rem;color:var(--bronze-2);max-width:none}

/* ── faq ────────────────────────────────────────────────────────────────── */
details{border-bottom:1px solid var(--rule);padding:var(--s3) 0}
summary{cursor:pointer;font-weight:600;color:var(--bronze);font-size:1.02rem;list-style:none;
  display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold-1);font-weight:400;font-size:1.4rem;line-height:1}
details[open] summary::after{content:"\2013"}
details p{margin:var(--s3) 0 0;color:var(--bronze-2)}

/* ── enquiry form ───────────────────────────────────────────────────────── */
.enq{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);max-width:38rem;margin:var(--s5) auto 0}
.enq input,.enq select{width:100%;padding:.95rem 1rem;border:1px solid var(--rule-2);border-radius:4px;
  font:inherit;font-size:16px;background:var(--paper);color:var(--bronze)}
.enq .full,.enq button,.enq .enq__note,.enq .enq__err{grid-column:1 / -1}
.enq__err{color:#C2452C;font-size:.86rem;margin:0}
.enq__note{font-size:.8rem;color:var(--bronze-3);margin:0}
.enq button{margin-top:0}
.enq__done{border:1px solid var(--rule-2);border-radius:4px;padding:var(--s4);margin:var(--s3) auto 0;
  text-align:left;background:var(--paper);max-width:38rem}
.enq__done p{margin:0 0 .6rem;color:var(--bronze)}
.enq__done p:last-child{margin-bottom:0;color:var(--bronze-3);font-size:.92rem}
.band-dark .enq input,.band-dark .enq select{background:rgba(255,248,236,.06);
  border-color:rgba(201,164,78,.32);color:#FFF8EC}
.band-dark .enq__note{color:rgba(239,230,216,.6)}
.band-dark .enq__done{background:rgba(255,248,236,.06);border-color:rgba(201,164,78,.32)}
.band-dark .enq__done p{color:#FFF8EC}
@media (max-width:560px){.enq{grid-template-columns:1fr}}

/* ── sticky contact rail, as theirs ─────────────────────────────────────── */
.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:2px}
.rail a{display:grid;place-items:center;width:44px;height:44px;background:var(--ink);
  color:var(--gold-hi);border:1px solid rgba(201,164,78,.3);border-right:0;
  transition:background .2s var(--ease),color .2s var(--ease)}
.rail a:hover{background:var(--gold-fill);color:#231B0C}
.rail svg{width:19px;height:19px}
@media (max-width:640px){
  .rail{top:auto;bottom:0;transform:none;flex-direction:row;width:100%;gap:0}
  .rail a{flex:1;height:52px;border-right:1px solid rgba(201,164,78,.3);border-bottom:0}
  body{padding-bottom:52px}
}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{background:var(--ink);color:rgba(239,230,216,.72);padding:var(--s6) 0 var(--s7);
  font-size:.86rem;line-height:1.7}
footer p{color:rgba(239,230,216,.72);max-width:none}
footer strong{color:#FFF8EC}
footer a{color:var(--gold-hi)}
.disclose{border:1px solid rgba(201,164,78,.24);padding:var(--s4);border-radius:4px;margin-bottom:var(--s4)}
.footlinks{display:flex;flex-wrap:wrap;gap:var(--s4);list-style:none;margin:0 0 var(--s4);padding:0}
.footlinks a{text-decoration:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── the desk: a person, because a page with no one on it is a document ───
   The page carried three thousand words and no human. ACE's own renders have people
   walking through them; ours had prose. This is the named agent, his registration, his
   number and his face, placed before the buyer reads a single figure. */
.desk{background:var(--paper)}
.desk__in{display:grid;grid-template-columns:minmax(0,22rem) 1fr;gap:var(--s6);align-items:center}
.desk__portrait{margin:0}
.desk__portrait img{width:100%;height:auto;border-radius:4px;
  box-shadow:0 18px 44px rgba(70,52,26,.16)}
.desk__eyebrow{margin:0 0 .6rem;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bronze-3)}
.desk__say h2{margin-bottom:var(--s3)}
.desk__cred{font-size:.88rem;color:var(--bronze-3);margin-top:var(--s4)}
.desk__say .btn{margin-top:var(--s3)}
@media (max-width:820px){
  .desk__in{grid-template-columns:1fr;gap:var(--s5)}
  .desk__portrait{max-width:15rem}
}

/* what happens next, so messaging feels known rather than risky */
.next{background:var(--cream)}
.steps{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--s5);max-width:none}
.steps li{margin:0;padding-top:var(--s4);border-top:1px solid var(--rule-2)}
.steps__n{display:block;font-family:Italiana,Georgia,serif;font-size:1.7rem;color:var(--gold-1);
  line-height:1;margin-bottom:var(--s2)}
.steps h3{margin:0 0 .5rem;font-size:1.08rem;font-weight:600}
.steps p{margin:0;font-size:.95rem;color:var(--bronze-3);max-width:34ch}