/* FONT DECISION, recorded because the design detector flags Inter as an overused
   face and that flag is correct in general but wrong here.
   Inter is NOT this site's display voice. The display voice is Italiana, chosen
   against ACE's own serifless-didone ACE ARTE lockup, with Prata carrying BEST OF
   NOIDA exactly as ACE sets it. Inter is the utility and figures face only, and it
   is here for two functional reasons neither display face can meet: it ships the
   rupee sign U+20B9, and it has true tabular numerals, which every price, size and
   percentage on this site depends on for column alignment. Swapping it would cost
   the money columns their alignment to gain nothing a visitor can see. Revisit only
   if a more distinctive grotesk with real tabular figures and U+20B9 is adopted. */
@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════════
   acearte.com design system.

   The world is ACE's own, taken from their price-list creative (W.E.F.
   21-08-2026) and the announcement film end-frame: near-black ground, one
   warm bloom from top-centre, champagne gold on a real gradient, white for
   data, warm grey table bands, gold hairline rules, a gold-ruled box around
   the headline figure, and the art-deco jali lattice from the ACE ARTE
   wordmark used as section mark and divider.

   Loading order on document pages is  /blog/blog.css  then this file. Every
   shared-chrome rule here is written at single-class specificity so the
   blog's own `.blog-read X` rules keep winning on a tie, exactly as that
   file intends. Homepage-only components use names blog.css never mentions.

   No framework, no CDN, no external request of any kind. Three self-hosted
   faces, all subset in this repo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── 1. typefaces */

/* Italiana. The deco display voice. ACE's ACE ARTE lockup is a serifless
   didone: hairline horizontals against thick verticals, a pointed A with a
   dropped crossbar, sheared C terminals. Italiana is the same species and
   the only widely licensed face that is. Subset to Latin + punctuation. */
@font-face {
  font-family: "Italiana";
  src: url("/assets/fonts/italiana.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Prata. Eleven glyphs, one job: ACE sets BEST OF NOIDA in a didone serif
   under the lockup rule, not in the wordmark face, and reproducing that in
   the wrong species is the tell. Subset to "BEST OF NOIDA", under 1 KB. */
@font-face {
  font-family: "Prata Lockup";
  src: url("/assets/fonts/prata-tagline.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Inter, variable 100..900. The quiet grotesk: every rupee figure, every
   size, every percentage, every line of utility text. Carries the rupee
   sign and true tabular numerals, which the display faces do not. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ────────────────────────────────────────────────────────────── 2. tokens */

:root {
  /* ground. Near-black, warmed a half step as it rises off the page. */
  --ground:      #0A0A0A;
  --ground-2:    #121110;
  --ground-3:    #17150F;

  /* the warm grey the price list sets its table bands in */
  --band:        #3A3632;
  --band-2:      #26231F;

  /* white for data and utility text */
  --paper:       #F4F1EA;
  --paper-dim:   rgba(244, 241, 234, .74);
  --paper-faint: rgba(244, 241, 234, .58);

  /* champagne gold. --gold-1 is the only gold cleared for body-size text
     (11.8:1 on the ground). --gold-2 is 4.2:1: gradient tails, rules and
     large display only, never a paragraph. */
  --gold-1:      #E2C68B;
  --gold-2:      #8B6F3D;
  --gold-mid:    #B69A64;
  --gold-ink:    linear-gradient(154deg, #E2C68B 4%, #C6A669 46%, #8B6F3D 98%);
  /* the same gold, but as a FILL under near-black text: the deep tail of
     --gold-ink is 4.18:1 against the ground colour, which is a display
     value, not a body one. This tail stops at 6.2:1 so a 15px label on a
     filled button clears 4.5:1 at every point of the sweep. */
  --gold-fill:   linear-gradient(154deg, #EFD9A8 0%, #E2C68B 38%, #AE8A4E 100%);

  --rule:        rgba(226, 198, 139, .24);
  --rule-2:      rgba(226, 198, 139, .48);
  --rule-3:      rgba(226, 198, 139, .74);

  /* aliases the document pages' blog.css reads through */
  --bg:   var(--ground);
  --text: var(--paper);
  --gold: var(--gold-1);

  /* faces */
  --font-display: "Italiana", "Didot", "Bodoni 72", Georgia, serif;
  --font-lockup:  "Prata Lockup", "Bodoni 72", "Didot", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;

  /* type scale. Display is hard-capped at 6rem. */
  --fs-50:  .6875rem;
  --fs-100: .75rem;
  --fs-200: .8125rem;
  --fs-300: .9375rem;
  --fs-400: 1.0625rem;
  --fs-500: clamp(1.125rem, 1.06rem + .3vw,  1.3rem);
  --fs-600: clamp(1.3rem,   1.16rem + .6vw,  1.68rem);
  --fs-700: clamp(1.6rem,   1.32rem + 1.2vw, 2.35rem);
  --fs-800: clamp(2rem,     1.5rem + 2.2vw,  3.25rem);
  --fs-900: clamp(2.9rem,   1.5rem + 6vw,    6rem);

  /* spacing */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 5.5rem;  --s-10: 8rem;

  --measure: 70ch;
  --wrap: 72rem;
  --radius: 8px;

  /* one authored ease, exponential out */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
}

/* ─────────────────────────────────────────────────────────────── 3. reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* the palette also has to paint the surfaces the browser draws itself */
  scrollbar-color: #4A4335 var(--ground);
  scrollbar-width: thin;
  accent-color: var(--gold-1);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  font-weight: 345;
  line-height: 1.66;
  letter-spacing: -.003em;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* browser surfaces the palette does not draw by default */
::selection { background: var(--gold-1); color: var(--ground); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb {
  background: #4A4335; border: 3px solid var(--ground); border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-2); }
input, textarea, select { caret-color: var(--gold-1); }
::placeholder { color: var(--paper-dim); opacity: 1; }

:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 3px;
  border-radius: 2px;
}

a {
  color: var(--gold-1);
  text-decoration-color: var(--rule-2);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-color .18s var(--ease-expo), color .18s var(--ease-expo);
}
a:hover { text-decoration-color: var(--gold-1); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold-1); color: var(--ground);
  padding: var(--s-3) var(--s-4); z-index: 999; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ─────────────────────────────────────────────────────── 4. layout + type */

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.wrap--read { max-width: 58rem; }

h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }

/* more space above a heading than below it, everywhere */
h1 { font-family: var(--font-display); font-size: var(--fs-800); line-height: 1.08;
     letter-spacing: .008em; margin: 0 0 var(--s-5); max-width: 20ch; }
h2 { font-family: var(--font-display); font-size: var(--fs-700); line-height: 1.16;
     letter-spacing: .01em; margin: var(--s-9) 0 var(--s-5); max-width: 26ch;
     color: var(--gold-1); }
h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-500);
     line-height: 1.34; letter-spacing: -.012em; margin: var(--s-6) 0 var(--s-3);
     color: var(--paper); max-width: 34ch; }
h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-300);
     letter-spacing: .1em; text-transform: uppercase; color: var(--gold-1);
     margin: var(--s-6) 0 var(--s-3); }

p, li { max-width: var(--measure); }
p { margin: 0 0 var(--s-4); }
ul, ol { margin: 0 0 var(--s-5); padding-left: 1.15rem; }
li { margin-bottom: var(--s-2); }
li::marker { color: var(--gold-1); }
strong { color: #FFFFFF; font-weight: 600; }
small { font-size: var(--fs-200); }

.lede { font-size: var(--fs-500); line-height: 1.56; color: var(--paper-dim); }
.dim  { color: var(--paper-dim); }
.tnum { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* gold gradient lettering. Earned only where ACE's own lockup earns it:
   the wordmark and the tagline. Display sizes only, never a paragraph. */
.grad { color: var(--gold-1); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .grad {
    background-image: var(--gold-ink);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}

/* small gold caps, the register-line voice */
.caps {
  font-family: var(--font-body); font-size: var(--fs-100); font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase; color: var(--gold-1);
  line-height: 1.5;
}
.caps--paper { color: var(--paper); }

/* ─────────────────────────────────────────── 5. ornament: the jali lattice */

/* Authored SVG, traced from the ACE ARTE wordmark at 600 dpi off the vector
   specification sheet. Structural only: a section mark and a divider. Never
   wallpaper, never a glyph. */
.jali { color: var(--gold-1); display: block; }
.jali--mark { width: 1.55rem; height: auto; margin-inline: auto; opacity: .92; }
.jali--mark-lg { width: 2.6rem; }

.rule-jali {
  display: block; width: min(21rem, 62%); height: auto;
  margin: var(--s-7) auto; color: var(--gold-1); opacity: .82;
}
.rule-jali--left { margin-inline: 0; }

/* plain gold hairline, doing the work a lesser build gives to glow */
.hairline { border: 0; border-top: 1px solid var(--rule); margin: var(--s-7) 0; }
.hairline--short { width: 3.5rem; margin: 0 0 var(--s-4); border-top-color: var(--rule-3); }

/* ─────────────────────────────────────────────────── 6. surfaces + frames */

/* black marble, faintly. Used behind the ledger only. */
.marble { position: relative; isolation: isolate; }
.marble::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/assets/img/tex-marble-black.webp") center / cover no-repeat;
  opacity: .3;
}
.marble::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,.72), rgba(10,10,10,.9));
}

/* the gold-ruled figure box, ACE's own device: a hairline rectangle whose
   top rule is broken by the label. */
.figbox {
  position: relative;
  border: 1px solid var(--rule-3);
  padding: var(--s-6) var(--s-5) var(--s-5);
  text-align: center;
}
.figbox__label {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--ground); padding-inline: .85em; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--fs-500);
  letter-spacing: .1em; color: var(--gold-1);
}
.figbox__fig {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3rem);
  line-height: 1.05; letter-spacing: -.022em; color: var(--paper);
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
}
.figbox__fig sup { font-size: .5em; font-weight: 500; top: -.7em; }
.figbox__reg { margin: var(--s-4) 0 0; }
.figbox__src { margin: var(--s-2) 0 0; font-size: var(--fs-200); color: var(--paper-dim); }

/* ─────────────────────────────────────────────────────────── 7. the ledger */

.ledger-wrap {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--rule);
  -webkit-overflow-scrolling: touch;
}
.ledger {
  border-collapse: collapse; width: 100%; min-width: 36rem;
  font-size: var(--fs-300);
  font-variant-numeric: tabular-nums lining-nums;
}
.ledger caption {
  caption-side: bottom; text-align: left; padding: var(--s-3) var(--s-4);
  font-size: var(--fs-200); color: var(--paper-dim); line-height: 1.6;
}
.ledger th, .ledger td {
  padding: .72rem var(--s-4); text-align: left; vertical-align: baseline;
  border-bottom: 1px solid rgba(226, 198, 139, .13);
}
.ledger thead th {
  font-size: var(--fs-100); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-1); line-height: 1.45;
  border-bottom: 1px solid var(--rule-2); vertical-align: bottom;
}
.ledger thead th span { display: block; font-size: .82em; letter-spacing: .07em;
  text-transform: none; color: var(--paper-dim); font-weight: 400; }
.ledger tbody tr:nth-child(odd) { background: var(--band); }
.ledger tbody tr:nth-child(even) { background: var(--band-2); }
.ledger tbody th { font-weight: 600; color: var(--paper); white-space: nowrap; }
.ledger tbody th b { font-weight: 400; color: var(--paper-dim); }
.ledger td.num { text-align: right; white-space: nowrap; }
.ledger tfoot td {
  background: var(--band-2); font-size: var(--fs-200); color: var(--paper-dim);
  border-bottom: 0;
}

/* the single-cell band the price list uses for its allotment note */
.band-note {
  background: var(--band); padding: var(--s-4) var(--s-5); margin: var(--s-4) 0 0;
  text-align: center; font-size: var(--fs-200); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--paper);
}
.band-note p { margin: 0; max-width: none; }

/* ────────────────────────────────────────────────────────── 8. answer, etc */

/* the first-screen direct answer, targeted by Speakable */
.answer {
  border: 1px solid var(--rule-2); border-left-width: 1px;
  background: rgba(226, 198, 139, .04);
  padding: var(--s-5); max-width: var(--measure);
}
.answer p { margin: 0; }
.answer p + p { margin-top: var(--s-3); }
.answer__stamp { display: block; margin-bottom: var(--s-3); }

/* an attribution or honesty note hung off a hairline */
.attrib {
  border-left: 1px solid var(--rule); padding-left: var(--s-4);
  font-size: var(--fs-300); color: var(--paper-dim); max-width: 66ch;
  margin: 0 0 var(--s-5);
}
.attrib p:last-child { margin-bottom: 0; }

.nosource {
  border: 1px dashed var(--rule-2); padding: var(--s-4) var(--s-5);
  max-width: var(--measure);
}
.nosource p:last-child { margin-bottom: 0; }

/* arithmetic shown as arithmetic */
.arith { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.arith li {
  margin: 0; max-width: none; padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  align-items: baseline; justify-content: space-between;
}
.arith__calc { font-variant-numeric: tabular-nums lining-nums; color: var(--paper-dim);
  font-size: var(--fs-300); }
.arith__out { font-variant-numeric: tabular-nums lining-nums; font-weight: 600;
  color: var(--paper); white-space: nowrap; }

/* the 20X5 plan. Numbered because the sequence carries the information. */
.plan { list-style: none; counter-reset: milestone; margin: 0; padding: 0; }
.plan li {
  counter-increment: milestone; position: relative; max-width: none;
  padding: var(--s-4) 0 var(--s-4) 3.4rem;
  border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  align-items: baseline; justify-content: space-between;
}
.plan li:first-child { border-top: 1px solid var(--rule); }
.plan li::before {
  content: counter(milestone, decimal-leading-zero);
  position: absolute; left: 0; top: var(--s-4);
  font-family: var(--font-body); font-size: var(--fs-200); font-weight: 500;
  letter-spacing: .1em; color: var(--gold-1);
  font-variant-numeric: tabular-nums lining-nums;
}
.plan__pct {
  font-weight: 700; color: var(--paper); white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* the document ladder: a typeset index, not a card grid */
.ladder { list-style: none; counter-reset: rung; margin: 0; padding: 0;
  border-top: 1px solid var(--rule); }
.ladder li {
  counter-increment: rung; max-width: none; margin: 0;
  border-bottom: 1px solid var(--rule);
  padding: var(--s-5) 0 var(--s-5) 3.4rem; position: relative;
}
.ladder li::before {
  content: counter(rung, decimal-leading-zero);
  position: absolute; left: 0; top: calc(var(--s-5) + .28em);
  font-size: var(--fs-200); font-weight: 500; letter-spacing: .1em;
  color: var(--gold-1); font-variant-numeric: tabular-nums lining-nums;
}
/* The rungs carry sizes and dates, so they are set in the grotesk with
   tabular figures. The deco face keeps the display moments; a hairline
   didone rendering "1,927, 2,614 and 4,370 sq.ft" at link size would put
   the weakest strokes on the page's most load-bearing text. */
.ladder__title {
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-500);
  line-height: 1.34; letter-spacing: -.012em; margin: 0 0 var(--s-2); max-width: 40ch;
  font-variant-numeric: tabular-nums lining-nums;
}
.ladder__title a { text-decoration: none; }
.ladder__title a:hover { text-decoration: underline; }
.ladder li p { margin: 0; color: var(--paper-dim); font-size: var(--fs-300); }

/* a scale ledger read as prose rows, never as a metric grid */
.rows { border-top: 1px solid var(--rule); margin: 0; }
.rows div {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  justify-content: space-between; align-items: baseline;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--rule);
}
.rows dt { color: var(--paper-dim); font-size: var(--fs-300); }
.rows dd { min-width: 0; }
.rows dt { flex: 1 1 14rem; }
.rows dd { margin: 0; font-weight: 600; color: var(--paper); text-align: right;
  font-variant-numeric: tabular-nums lining-nums; }
.rows dd.num { white-space: nowrap; }

/* ───────────────────────────────────────────────────────────── 9. controls */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  border-radius: var(--radius); border: 1px solid var(--gold-1);
  padding: .8rem 1.5rem; font-size: var(--fs-300); font-weight: 600;
  letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: transform .22s var(--ease-expo), background-color .22s var(--ease-expo),
              box-shadow .22s var(--ease-expo);
}
.btn--gold {
  background-image: var(--gold-fill); color: var(--ground);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .58); }
.btn--gold:active { transform: translateY(0); }
.btn--ghost { color: var(--gold-1); border-color: var(--rule-2); }
.btn--ghost:hover { border-color: var(--gold-1); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.cta-row {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center;
  margin-top: var(--s-5);
}
.cta-row p { margin: 0; flex: 1 1 17rem; color: var(--paper-dim); font-size: var(--fs-300); }

/* ──────────────────────────────────────────────────────────────── 10. faq */

.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  cursor: pointer; padding: var(--s-4) 0; font-weight: 600; color: var(--paper);
  list-style: none; display: flex; justify-content: space-between; gap: var(--s-4);
  max-width: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--gold-1); font-weight: 400; flex: none; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--paper-dim); margin: 0 0 var(--s-4); }

/* ─────────────────────────────────────────────────── 11. chrome, shared */

.topbar { border-bottom: 1px solid var(--rule); font-size: var(--fs-200); letter-spacing: .04em; }
.topbar__in { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  justify-content: space-between; padding-block: .55rem; }
.topbar__tag { color: var(--paper-dim); text-transform: uppercase; font-size: var(--fs-100);
  letter-spacing: .13em; }
.topbar__call { color: var(--gold-1); text-decoration: none; white-space: nowrap; }
/* Was a 6px square: width and height with no radius. It read as a missing-glyph box
   sitting between "Sales desk" and the number. */
.topbar .dot { display: inline-block; width: .34rem; height: .34rem; border-radius: 50%;
  background: var(--gold-1); vertical-align: middle; margin-inline: .1rem; }

.site-head { border-bottom: 1px solid var(--rule); }
.site-head__in { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  align-items: center; justify-content: space-between; padding-block: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none;
  color: inherit; }
.brand__mark { color: var(--gold-1); display: inline-flex; }
/* no size here: the mark carries its own width/height attributes, and the
   document pages ship a different jali viewBox that a shared width breaks. */
.brand__txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: .2em;
  color: var(--gold-1); }
.brand__by { font-size: var(--fs-50); letter-spacing: .13em; text-transform: uppercase;
  color: var(--paper-dim); }
.nav { display: flex; flex-wrap: wrap; gap: var(--s-1) 1.15rem; font-size: var(--fs-200); }
.nav a { color: var(--paper); text-decoration: none; letter-spacing: .03em; }
.nav a:hover, .nav a[aria-current] { color: var(--gold-1); }

.site-foot { border-top: 1px solid var(--rule); margin-top: var(--s-8);
  padding: var(--s-7) 0 var(--s-5); font-size: var(--fs-300); }
.site-foot__in { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .site-foot__in { grid-template-columns: 1.1fr 1fr; } }
.foot-brand .brand__name { display: block; font-size: 1.05rem; }
.foot-brand .brand__by { display: block; margin-top: .3rem; }
.foot-contact { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-3); }
.foot-contact a { text-decoration: none; color: var(--paper-dim); }
.foot-contact a:hover { color: var(--gold-1); }
.foot-cp p { margin: 0 0 var(--s-1); color: var(--paper-dim); max-width: 52ch; }
.foot-cp__name { font-family: var(--font-display); color: var(--gold-1) !important;
  letter-spacing: .1em; }
.foot-byline { margin-top: var(--s-3); }

.disclaimer { padding-bottom: 5rem; font-size: var(--fs-100); color: var(--paper-dim);
  line-height: 1.62; }
.disclaimer p { max-width: 92ch; }

.float-wa {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  width: 3rem; height: 3rem; border-radius: var(--radius);
  display: grid; place-items: center;
  background-image: var(--gold-fill); color: var(--ground);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
}
@media print { .float-wa { display: none; } }

/* ─────────────────────────────────────────────────────────── 12. the hero */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(78svh, 720px);
  display: grid; place-items: center;
  padding: var(--s-6) 0 var(--s-6);
  text-align: center;
}

/* ONE bloom, from top-centre, and only here. The film's own light is a tight
   warm core just above frame that falls away fast, so the shape is drawn in
   CSS where it can be controlled to the percent. The generated wash carries
   the grain and the warmth irregularity underneath it at low opacity; it
   peaks at 58% of its own width, so the layer is shifted by exactly that to
   sit the peak on centre rather than silently recomposing the source. */
.hero__bloom {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 42% at 50% -6%,
      rgba(255, 234, 190, .46) 0%,
      rgba(228, 189, 124, .21) 32%,
      rgba(132, 102, 56, .075) 60%,
      rgba(10, 10, 10, 0) 82%);
}
/* The wash sits under the drawn bloom at low opacity for its grain and its
   warmth irregularity. Its brightest column is at 58% of its own width, so
   at a background-size of 170% the position that lands that column on the
   container centre is 69.4%: with the image 1.7 times the container wide,
   background-position p puts the left edge at -0.7pW, and -0.7pW + 0.58 x
   1.7W = 0.5W solves to p = 0.694. Anchored, not recomposed. */
.hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("/assets/img/bloom.webp");
  background-size: 170% auto;
  background-position: 69.4% top;
  background-repeat: no-repeat;
  opacity: .22; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(44% 40% at 50% -4%, #000 0%, transparent 76%);
          mask-image: radial-gradient(44% 40% at 50% -4%, #000 0%, transparent 76%);
}
.hero__render {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url("/assets/img/ace/ace-entrance-arch.webp") center 58%/cover no-repeat;
  opacity: .38; filter: saturate(.85) contrast(1.02);
}
.hero__vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(128% 82% at 50% -2%,
    rgba(10, 10, 10, .18) 30%, rgba(10, 10, 10, .62) 72%, rgba(10, 10, 10, .96) 100%);
}

/* width:100% matters. The hero is a grid with place-items:center, which makes this
   block shrink to its content instead of filling, so it was rendering 398px wide on a
   1600px viewport and wrapping a 96px wordmark onto two lines. */
.hero__in { display: grid; justify-items: center; gap: 1.05rem; width: 100%; max-width: 54rem; }

.wordmark {
  font-family: var(--font-display); font-size: var(--fs-900);
  line-height: .96; letter-spacing: .13em; text-indent: .13em;
  margin: 0; max-width: none;
}
.lockup-rule { width: min(20rem, 78%); border: 0; border-top: 1px solid var(--rule-3); margin: 0; }
.tagline {
  font-family: var(--font-lockup); font-size: clamp(1.05rem, .78rem + 1.1vw, 1.6rem);
  letter-spacing: .16em; text-indent: .16em; margin: 0; line-height: 1.2;
}
.hero__place { margin: 0; }
.hero .figbox { width: min(27rem, 100%); margin-top: .45rem; }
.hero__desk { margin: .3rem 0 0; }

/* the answer capsule opening the document half of the page */
.first-answer { padding-top: var(--s-5); }

/* ── the one authored motion moment: the hero settling on load ───────────
   Base state is the settled state, so a page that never animates is
   already correct. Exponential ease-out, one pass, no scroll listener. */
@keyframes arte-settle {
  from { transform: translateY(15px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .settle { animation: arte-settle .95s var(--ease-expo) backwards; }
  .settle-1 { animation-delay: .04s; }
  .settle-2 { animation-delay: .13s; }
  .settle-3 { animation-delay: .22s; }
  .settle-4 { animation-delay: .31s; }
  .settle-5 { animation-delay: .42s; }
  .settle-6 { animation-delay: .53s; }
  .hero__bloom { animation: arte-settle 1.5s var(--ease-expo) backwards; }
}

/* ───────────────────────────────────────────────────────── 13. page rhythm */

.movement { padding-block: var(--s-8) 0; }
.movement:last-of-type { padding-bottom: var(--s-7); }
.movement > h2:first-child { margin-top: 0; }
.movement--read { max-width: 58rem; }

.section-mark { display: block; margin: 0 auto var(--s-5); }

.credit { font-size: var(--fs-100); color: var(--paper-faint); margin-top: var(--s-3); }

.frame-still { border: 1px solid var(--rule); }
.frame-still img { width: 100%; }
.frame-still figcaption { font-size: var(--fs-100); color: var(--paper-faint);
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--rule); }

/* ─────────────────────────────────────────────────────────── 14. 404 page */

.gone { min-height: 74svh; display: grid; place-items: center; text-align: center;
  padding-block: var(--s-8); position: relative; isolation: isolate; overflow: hidden; }
.gone__in { display: grid; justify-items: center; gap: var(--s-5); max-width: 40rem; }
/* set in the grotesk, not the deco face: Italiana's figures are text figures,
   and a full-height O between two descending fours reads as 4O4. */
.gone__code { font-family: var(--font-body); font-weight: 200; font-size: var(--fs-900);
  line-height: 1; letter-spacing: .12em; text-indent: .12em; margin: 0;
  font-variant-numeric: tabular-nums lining-nums; }
.gone .ladder { text-align: left; width: 100%; }

/* ───────────────────────────────────────────────────────── 15. small print */

@media (max-width: 40rem) {
  h2 { margin-top: var(--s-8); }

  /* the chrome was eating half the first screen on a phone. The agent number
     is in the footer and in the disclaimer on every page, so it comes out of
     the topbar here, and the nav becomes one scrollable line. */
  .topbar__agent { display: none; }
  .topbar { font-size: var(--fs-50); }
  .topbar__in { flex-wrap: nowrap; gap: var(--s-3); padding-block: .45rem; }
  .topbar__tag { font-size: var(--fs-50); letter-spacing: .08em; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the desk number is the one thing in this bar that must never be clipped */
  .topbar__call { font-size: var(--fs-50); flex: none; white-space: nowrap; }
  .site-head__in { padding-block: .7rem; gap: .7rem 1rem; }
  .nav {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    min-width: 0; max-width: 100%; width: 100%;
    padding-bottom: .15rem; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }

  /* the hero keeps its whole sequence but clears the fixed desk button, and
     leaves the answer capsule reachable in one short scroll. */
  .hero { min-height: min(68svh, 545px); padding: var(--s-5) 0 var(--s-6); }
  .hero__in { gap: var(--s-4); }
  .jali--mark-lg { width: 2rem; }
  .figbox { padding: var(--s-5) var(--s-4) var(--s-4); }
  .figbox__src { font-size: var(--fs-100); }
  .hero__desk .btn { padding: .78rem 1.15rem; }

  .ladder li, .plan li { padding-left: 2.6rem; }
  .disclaimer { padding-bottom: 5.5rem; }
  .float-wa { width: 2.75rem; height: 2.75rem; }
}

/* the lockup IS the h1: brand, tagline and place in one element so the heading
   carries entity completeness without changing the composition */
.lockup-h1{margin:0;padding:0;font-weight:inherit;font-size:inherit;line-height:inherit;display:flex;flex-direction:column;align-items:center;gap:0}
.lockup-h1 .wordmark{display:block}
.lockup-h1 .tagline{display:block}
.lockup-h1 .hero__place{display:block}

/* one filled element in the first screen: the hero desk button. The floating
   action fades in only once the hero CTA has left the viewport. */
.float-wa{opacity:0;visibility:hidden;transition:opacity .28s cubic-bezier(.16,1,.3,1),visibility .28s}
body.past-hero .float-wa{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.float-wa{transition:none}}

/* ACE Group's own logo in the brand lockup, replacing the jali mark. The topbar's
   channel-partner line came out with it: the disclosure it carried is still in the
   footer on every page, which is where it belongs, rather than four times above the fold. */
.brand__logo{width:70px;height:auto;display:block;flex:0 0 auto}
@media (max-width:560px){.brand__logo{width:54px}}
.lockup__logo{width:64px;height:auto;display:block;flex:0 0 auto}
@media (max-width:560px){.lockup__logo{width:50px}}

/* The hero lockup is a wordmark, not running text. The global h1 rule caps headings at
   20ch, which at the display face's 96px computed to 220px and broke ACE ARTE across two
   lines and BEST OF NOIDA across two more. Reading measures are for prose. */
.lockup-h1{max-width:none;width:100%}
.lockup-h1 .wordmark,.lockup-h1 .tagline{white-space:nowrap;max-width:none}

/* The film frames carry ACE's logo burned into the top-left corner, so using one as the
   hero ground put a second ACE logo directly under the one in the masthead. Shifting the
   focal point right and down crops the burned-in mark out of frame. */
.hero__render{background-position:62% 62%!important;background-size:126% auto!important}

/* ── curated amenities, matching the arteace treatment on this host's dark ground ── */
.amen { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.6rem 1.4rem; margin: 2rem 0 1.6rem; }
.amen__i { text-align: left; }
.amen__ico { width: 46px; height: 46px; display: block; margin: 0 0 .7rem;
  opacity: .92; filter: brightness(0) saturate(100%) invert(82%) sepia(28%)
  saturate(560%) hue-rotate(2deg) brightness(96%) contrast(92%); }
.amen__i h3 { margin: 0 0 .3rem; font-size: 1rem; letter-spacing: .01em; }
.amen__i p { margin: 0; font-size: .92rem; line-height: 1.6; opacity: .82; max-width: 34ch; }
@media (max-width: 640px) { .amen { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.3rem 1rem; } }

/* the claim ACE leads with, above the price this host is known for */
.hero__claim { margin: 1.5rem auto 0; max-width: 22ch; font-family: Italiana, Georgia, serif;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem); line-height: 1.18; letter-spacing: .045em;
  text-transform: uppercase; }
.hero__sub { margin: .7rem auto 0; max-width: 36ch; font-size: .8rem; letter-spacing: .13em;
  text-transform: uppercase; opacity: .72; line-height: 1.6; }

/* ── location highlights, ACE's own list ──────────────────────────────────── */
.locgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.6rem 2rem; margin: 1.8rem 0 1.4rem; }
.loccat h3 { margin: 0 0 .6rem; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.loclist { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.loclist li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px solid rgba(226,198,139,.16); }
.loclist li:last-child { border-bottom: 0; }
.loclist span { font-size: .93rem; opacity: .9; }
.loclist b { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 640px) { .locgrid { grid-template-columns: 1fr; gap: 1.3rem; } }

/* The five nav items sit in one row and the last one ("EOI") was clipped off the right
   edge on a 390px screen, so it could not be reached at all. Wrap instead of clip. */
@media (max-width: 720px) {
  .site-head__in { flex-wrap: wrap; row-gap: .5rem; }
  .nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 1rem; width: 100%; }
  .nav a { white-space: nowrap; }
}

/* ── the renders, a simple luminous grid on the dark ground ─────────────── */
.galgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem; margin: 1.8rem 0 1.2rem; }
.galgrid figure { margin: 0; }
.galgrid img { width: 100%; height: auto; display: block; border-radius: 4px; }
.galgrid figcaption { margin-top: .45rem; font-size: .8rem; opacity: .72; }

/* on-page jump menu under the h1, and the floor-plan release CTAs */
.jumpnav { margin: .9rem 0 0; font-size: .88rem; letter-spacing: .04em; opacity: .85; }
.jumpnav a { margin-right: .2rem; }
.fpcta { margin: 1.6rem 0; padding: 1.1rem 1.25rem; border: 1px solid rgba(226,198,139,.28); border-radius: 6px; }
.fpcta h3 { margin: 0 0 .5rem; }
.fpcta p { margin: 0 0 .6rem; }

/* hero enquiry form and the scale tiles, added 5 Sep 2026; both inherit the dark ground */
.enq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem;width:100%;max-width:34rem;margin:1.6rem auto 0;text-align:left;box-sizing:border-box;min-width:0}
.enq input,.enq select{width:100%;padding:.95rem 1rem;border:1px solid var(--rule-2);border-radius:2px;font:inherit;font-size:16px;background:rgba(244,241,234,.06);color:var(--paper)}
.enq input::placeholder{color:var(--paper-faint)}
.enq select{appearance:none;-webkit-appearance:none;cursor:pointer}
.enq select option{color:#111}
.enq .full,.enq button,.enq .enq__note,.enq .enq__err{grid-column:1 / -1}
.enq button{margin:0;width:100%;min-width:0;justify-content:center;white-space:normal;text-align:center}
.enq__err{color:#E8A08F;font-size:.86rem;margin:0}
.enq__note{font-size:.78rem;color:var(--paper-faint);margin:0}
.enq__note a{color:var(--gold-1)}
.enq__done{border:1px solid var(--rule-2);padding:1rem 1.2rem;max-width:34rem;margin:1.2rem auto 0;text-align:left;color:var(--paper)}
.enq__done p{margin:0 0 .5rem}.enq__done p:last-child{margin:0;color:var(--paper-dim);font-size:.9rem}
.tiles{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.tiles li{background:var(--ground);padding:1.3rem 1rem;text-align:center;margin:0}
.tiles b{display:block;font-family:var(--font-body);font-weight:700;font-size:clamp(1.5rem,1rem + 2vw,2.2rem);line-height:1.1;color:var(--paper);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}
.tiles b sup{font-size:.5em}
.tiles span{display:block;margin-top:.35rem;font-size:.86rem;color:var(--paper-dim)}
.tiles__note{font-size:.8rem;color:var(--paper-faint);margin-top:.9rem}
@media (max-width:640px){.enq{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,1fr)}}
.hero__deal{width:100%;max-width:34rem;margin:0 auto}
@media (min-width:960px){.hero__deal{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start;max-width:58rem}.hero__deal .figbox{margin-top:1.6rem}.hero__deal .enq{margin-top:0}}

/* landing shape, 5 Sep 2026: legible on a phone, one form, ACE's figures, our paper */
:root{--paper-dim:rgba(244,241,234,.84);--paper-faint:rgba(244,241,234,.66)}
.caps{font-size:.8125rem;letter-spacing:.12em}
.tiles span{font-size:.92rem}.tiles__note,.fine{font-size:.9rem;line-height:1.55}
.lede{color:var(--paper)}
.film{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;cursor:pointer;margin:0 0 1.4rem;border:1px solid var(--rule-2)}
.film img{width:100%;height:100%;object-fit:cover;opacity:.85;display:block}
.film__play{position:absolute;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%);border-radius:50%;background:var(--gold-fill);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.film__play::after{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);border-left:22px solid var(--ground);border-top:13px solid transparent;border-bottom:13px solid transparent}
.film__cap{position:absolute;left:1rem;bottom:.8rem;font-size:.85rem;color:var(--paper);background:rgba(0,0,0,.55);padding:.3rem .6rem}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pricecards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
.pc{border:1px solid var(--rule-2);padding:1.4rem 1rem 1.2rem;text-align:center;background:rgba(226,198,139,.04)}
.pc p{margin:0 0 .35rem}.pc__type{font-family:var(--font-display);font-size:var(--fs-700);color:var(--gold-1);line-height:1.1}
.pc__size{font-size:1.15rem;font-weight:600;color:var(--paper)}.pc__rate{color:var(--paper-dim)}
.pc__base{margin-top:.6rem;color:var(--paper)}.pc__eoi{color:var(--paper-dim);font-size:.95rem;margin-bottom:1rem}
.pc .btn{width:100%;justify-content:center;white-space:normal;text-align:center}
.threeup{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.threeup li{border-top:1px solid var(--rule-2);padding-top:.9rem;margin:0}
.threeup b{display:block;color:var(--paper);font-weight:600;margin-bottom:.3rem}.threeup span{color:var(--paper-dim);font-size:.95rem}
.stickybar{display:none}
@media (max-width:900px){
  body{padding-bottom:64px}
  .stickybar{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:1px;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--rule-2)}
  .stickybar a{display:flex;align-items:center;justify-content:center;min-height:56px;background:var(--ground-2);color:var(--paper);font-weight:600;text-decoration:none;font-size:.95rem}
  .stickybar a.stickybar__main{background:var(--gold-fill);color:var(--ground)!important}
  .float-wa{display:none!important}
  .pricecards,.threeup{grid-template-columns:1fr}
}