/* 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;
}

/* ────────────────────────────────────────────────────────────── 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; }
.topbar .dot { display: inline-block; width: .38rem; height: .38rem; background: var(--gold-1); }

.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}}