/* Arete Corporate Advisory Pte. Ltd.
   Palette and type derived from the locked deck and document system.
   Do not introduce colours outside the tokens below.
   Package: Arete_Website_260718.v3 */

:root {
  --maroon:    #5A1E22;
  --black:     #1A1A1A;
  --cream:     #FAF4E9;
  --crimson:   #C0392B;
  --gold:      #B58A1E;
  --soft-gold: #D9B45A;
  --grey:      #6E6A63;
  --white:     #FFFFFF;

  /* web-only extensions: tints of the above, no new hues */
  --cream-deep:  #F2EADB;
  --rule:        rgba(181, 138, 30, 0.38);
  --rule-strong: rgba(181, 138, 30, 0.70);
  --maroon-wash: rgba(90, 30, 34, 0.72);

  --serif: "Source Serif 4", Cambria, Georgia, serif;

  --measure: 34rem;
  --page:    72rem;
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  /* revision 5: section rhythm tightened, ceiling 80px */
  --section: clamp(3.25rem, 6vw, 5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--black);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: oldstyle-num;
}

img { max-width: 100%; display: block; }

a { color: var(--maroon); text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; }
a:hover { color: var(--crimson); text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--crimson); outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--maroon); color: var(--cream);
  padding: 0.75rem 1.25rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }

/* ---------------------------------------------------------------- type */

h1, h2, h3 { font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.012em; }

h1 { font-size: clamp(2.1rem, 5.4vw, 3.75rem); }
h2 { font-size: clamp(1.55rem, 3.1vw, 2.3rem); }
h3 { font-size: 1.125rem; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--crimson);
  font-variant-numeric: lining-nums;
  margin: 0 0 1.4rem;
}
.eyebrow::after {
  content: ""; display: block; width: 2.25rem; height: 2px;
  background: var(--gold); margin-top: 0.7rem;
}

.lede { font-size: clamp(1.15rem, 1.9vw, 1.375rem); line-height: 1.55; }
.muted { color: var(--grey); }
.small { font-size: 0.9375rem; }

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}
.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 4.5rem;
  max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter);
}

/* revision 1: logo replaces the text wordmark */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 38px; width: auto; }

.nav-links { display: flex; gap: 1.75rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 0.9375rem; text-decoration: none; color: var(--black); }
.nav-links a:hover { color: var(--crimson); }
.nav-links a[aria-current="page"] { color: var(--maroon); box-shadow: inset 0 -2px 0 var(--gold); }

.btn {
  display: inline-block; font-family: inherit; font-size: 0.9375rem;
  padding: 0.6rem 1.4rem; border: 1px solid var(--maroon);
  color: var(--maroon); background: transparent; text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.btn:hover { background: var(--maroon); color: var(--cream); }
.btn-light { border-color: var(--soft-gold); color: var(--cream); }
.btn-light:hover { background: var(--soft-gold); color: var(--maroon); }

@media (max-width: 60rem) {
  .nav-links { display: none; }
  .brand img { height: 32px; }
}

/* ---------------------------------------------------------------- hero */

.hero { position: relative; background: var(--maroon); overflow: hidden; }
.hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.30;
}
.hero-in {
  position: relative;
  max-width: var(--page); margin-inline: auto;
  padding: clamp(4rem, 11vw, 8rem) var(--gutter) clamp(3.25rem, 8vw, 5.5rem);
}
.hero h1 { color: var(--cream); max-width: 20ch; }
.hero h1 em { font-style: normal; color: var(--soft-gold); }
.hero .lede { color: var(--cream); opacity: 0.9; max-width: 46ch; margin-top: 1.6rem; }
.hero .eyebrow { color: var(--soft-gold); }
.hero .eyebrow::after { background: var(--soft-gold); }
.hero-cta { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- sections */

.section { padding-block: var(--section); }
.section + .section { border-top: 1px solid var(--rule); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

.statement { font-size: clamp(1.3rem, 2.7vw, 1.75rem); line-height: 1.45; max-width: 30ch; }

.two-col { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 54rem) { .two-col { grid-template-columns: 1fr 1.15fr; align-items: start; } }

/* criteria */
.criteria { display: grid; gap: 0; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 40rem) { .criteria { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .criteria { grid-template-columns: repeat(4, 1fr); } }
.criterion { padding: 1.6rem 1.5rem 1.6rem 0; border-top: 2px solid var(--gold); }
@media (min-width: 40rem) {
  .criterion + .criterion { padding-left: 1.5rem; }
}
.criterion dt { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); margin-bottom: 0.6rem; }
.criterion dd { margin: 0; font-size: 1.25rem; line-height: 1.3; color: var(--maroon); }
.criterion p { margin: 0.6rem 0 0; font-size: 0.9375rem; color: var(--grey); line-height: 1.5; }

/* advisors */
.principal { border-left: 3px solid var(--crimson); padding-left: clamp(1.25rem, 3vw, 2.25rem); max-width: 46rem; }
.advisors { display: grid; gap: 1px; background: var(--rule); margin-top: 3rem; grid-template-columns: 1fr; border: 1px solid var(--rule); }
@media (min-width: 46rem) { .advisors { grid-template-columns: repeat(2, 1fr); } }
.advisor { background: var(--cream); padding: clamp(1.5rem, 3vw, 2.25rem); }
.advisor .rule { width: 2.5rem; height: 3px; background: var(--gold); margin-bottom: 1.5rem; }
.advisor h3 { color: var(--maroon); margin-bottom: 0.5rem; }
.advisor .meta {
  font-size: 0.75rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--crimson); font-variant-numeric: lining-nums; margin-bottom: 1.1rem;
}
.advisor p { font-size: 0.9375rem; line-height: 1.6; }
.advisor .remit { margin-top: 0.9rem; color: var(--grey); font-style: italic; }

/* stat band */
.band { background: var(--maroon); color: var(--cream); padding-block: clamp(3rem, 6vw, 4.5rem); }
.band .eyebrow { color: var(--soft-gold); }
.band .eyebrow::after { background: var(--soft-gold); }
.stats { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: repeat(2, 1fr); margin: 0 0 2.5rem; padding: 0; }
@media (min-width: 56rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat dt { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 2.75rem); color: var(--soft-gold); font-variant-numeric: lining-nums; line-height: 1; }
.stat dd { margin: 0.85rem 0 0; font-size: 0.9375rem; line-height: 1.45; opacity: 0.88; }
.stat .rule { width: 2rem; height: 2px; background: var(--soft-gold); opacity: 0.5; margin-bottom: 1.1rem; }
.band .close { font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 44ch; padding-top: 2.25rem; border-top: 1px solid rgba(217, 180, 90, 0.35); }

/* figure */
.figure img { width: 100%; height: clamp(16rem, 32vw, 26rem); object-fit: cover; }
.figure figcaption { font-size: 0.8125rem; color: var(--grey); margin-top: 0.75rem; }
.band-image { width: 100%; height: clamp(8rem, 16vw, 13rem); object-fit: cover; }

/* two doors */
.doors { display: grid; gap: 1px; background: var(--rule); grid-template-columns: 1fr; margin-top: 2.5rem; border: 1px solid var(--rule); }
@media (min-width: 50rem) { .doors { grid-template-columns: repeat(2, 1fr); } }
.door { background: var(--cream-deep); padding: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; }
.door h3 { font-size: 1.375rem; color: var(--maroon); margin-bottom: 1rem; }
.door p { font-size: 0.9375rem; }
.door .btn { margin-top: auto; align-self: flex-start; }
.door ul { margin: 0 0 1.5rem; padding-left: 1.1rem; font-size: 0.9375rem; color: var(--grey); }
.door li { margin-bottom: 0.4rem; }

/* footnotes */
.notes { font-size: 0.8125rem; color: var(--grey); line-height: 1.55; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.notes p { margin-bottom: 0.5em; }
sup { font-size: 0.7em; vertical-align: super; line-height: 0; }

/* footer */
.foot { background: var(--maroon); color: var(--cream); padding-block: clamp(3rem, 6vw, 4.5rem); font-size: 0.9375rem; }
.foot a { color: var(--soft-gold); text-decoration: none; }
.foot a:hover { color: var(--cream); text-decoration: underline; }
.foot-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 50rem) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h3 { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); margin-bottom: 1.15rem; font-weight: 700; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(217, 180, 90, 0.35); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.55rem; }
.foot .legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(217, 180, 90, 0.28); font-size: 0.8125rem; opacity: 0.8; }
.foot-logo { width: 168px; height: auto; margin-bottom: 1.1rem; }
.foot-addr { color: rgba(250, 244, 233, 0.72); font-size: 0.875rem; margin-bottom: 0.4rem; }
.foot-uen { color: rgba(250, 244, 233, 0.55); font-size: 0.8125rem; letter-spacing: 0.04em; }

/* ================================================================ */
/* Additions for interior pages, package v3.                        */
/* The claim that site.css already covered every remaining page was */
/* checked against the file and is false. Nothing below introduces  */
/* a colour outside the token set.                                  */
/* ================================================================ */

/* page header, used by every page except the home page */
.page-head { background: var(--maroon); color: var(--cream); padding-block: clamp(3rem, 7vw, 5rem); }
.page-head .eyebrow { color: var(--soft-gold); }
.page-head .eyebrow::after { background: var(--soft-gold); }
.page-head h1 { color: var(--cream); max-width: 22ch; font-size: clamp(1.9rem, 4.4vw, 3rem); }
.page-head .lede { color: var(--cream); opacity: 0.9; max-width: 52ch; margin-top: 1.4rem; }

/* long-form prose, used by privacy, thesis and approach */
.prose { max-width: 42rem; }
.prose h2 { margin-top: 2.75rem; margin-bottom: 1rem; color: var(--maroon); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9rem; margin-bottom: 0.6rem; color: var(--maroon); }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: 0.45rem; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-weight: 600; color: var(--maroon); border-bottom: 2px solid var(--gold); }

/* numbered process, used on the approach page only, where order is real */
.steps { list-style: none; margin: 2.5rem 0 0; padding: 0; counter-reset: step; }
.step { counter-increment: step; border-top: 1px solid var(--rule); padding: 1.75rem 0; display: grid; gap: 0.5rem 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .step { grid-template-columns: 4.5rem 1fr; } }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-size: 1.35rem; color: var(--gold); font-variant-numeric: lining-nums; line-height: 1.1;
}
.step h3 { color: var(--maroon); margin-bottom: 0.5rem; }
.step p { font-size: 0.9375rem; margin-bottom: 0.6em; }
.step .who { font-size: 0.75rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--crimson); margin-top: 0.6rem; }

/* pull quote, used sparingly */
.pull { border-left: 3px solid var(--crimson); padding-left: clamp(1.25rem, 3vw, 2rem); max-width: 40rem; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; margin: 2.5rem 0; }

/* contact page layout */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) { .contact-grid { grid-template-columns: 1.55fr 1fr; } }
.form-shell { border: 0; background: transparent; }
.form-shell iframe { width: 100%; min-height: 760px; border: 0; display: block; }
.form-fallback { padding: 2rem; font-size: 0.9375rem; }
.aside-card { background: var(--cream-deep); border-top: 2px solid var(--gold); padding: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.5rem; }
.aside-card h3 { color: var(--maroon); margin-bottom: 0.75rem; }
.aside-card p, .aside-card li { font-size: 0.9375rem; }
.aside-card ul { margin: 0; padding-left: 1.1rem; color: var(--grey); }
.aside-card li { margin-bottom: 0.45rem; }

/* fact rows, used on the team and thesis pages */
.facts { display: grid; gap: 0; grid-template-columns: 1fr; margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.fact { border-bottom: 1px solid var(--rule); padding: 1.4rem 0; display: grid; gap: 0.35rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .fact { grid-template-columns: 14rem 1fr; } }
.fact dt { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); padding-top: 0.3rem; }
.fact dd { margin: 0; }


/* ---------------------------------------------------------------- v4 */

/* page header with a photographic ground, same treatment as the home hero */
.page-head { position: relative; overflow: hidden; }
.page-head .head-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.26;
}
.page-head .wrap { position: relative; }

/* inline diagrams */
.infographic { margin: 0; }
.infographic svg { width: 100%; height: auto; display: block; }
.infographic figcaption { font-size: 0.8125rem; color: var(--grey); margin-top: 1rem; max-width: 44rem; }

/* ---------------------------------------------------------------- v8 */

/* Legibility of cream text on the maroon grounds.
   Three defects were found and are corrected here.

   1. The footer headings asked for font-weight 700. Source Serif 4 is
      loaded at 400 and 600 only, so the browser was synthesising the
      bold by smearing each glyph outward. That is the blurred look on
      the NAVIGATE and CONTACT headings. 600 is a real file.
   2. The legal line and the UEN line were dimmed with opacity, which
      lowers contrast uniformly and turns antialiased serif hairlines
      into grey mush at 13px. Colour with an alpha channel is used
      instead, at a higher effective contrast.
   3. No smoothing hint was set. Light type on a dark ground renders
      optically heavier than the same type on a light ground, so
      grayscale smoothing is applied on the dark sections only. */

.hero, .page-head, .band, .foot {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

.foot h3 { font-weight: 600; }

.foot .legal {
  font-size: 0.875rem;
  line-height: 1.7;
  opacity: 1;
  color: rgba(250, 244, 233, 0.88);
  max-width: 64rem;
}

.foot-addr { color: rgba(250, 244, 233, 0.90); line-height: 1.6; }
.foot-uen  { color: rgba(250, 244, 233, 0.72); }

/* ---------------------------------------------------------------- v9 */

/* Vertical rhythm tightened across every page, roughly twenty per cent.
   The revision 5 note said the section ceiling of 80px should not be
   increased. It is being decreased here on instruction, which does not
   contradict that note. Deleting this whole block restores v8 exactly. */

:root { --section: clamp(2.5rem, 4.6vw, 4rem); }

.hero-in    { padding-block: clamp(3rem, 8.5vw, 6rem) clamp(2.5rem, 6vw, 4.25rem); }
.hero-cta   { margin-top: 2rem; }
.page-head  { padding-block: clamp(2.5rem, 5.5vw, 4rem); }
.band       { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.foot       { padding-block: clamp(2.5rem, 5vw, 3.75rem); }

.criteria, .doors, .notes, .facts { margin-top: 2rem; }
.steps      { margin-top: 2rem; }
.step       { padding-block: 1.4rem; }
.advisors   { margin-top: 2.25rem; }
.stats      { gap: 2rem 1.5rem; margin-bottom: 2rem; }
.band .close{ padding-top: 1.75rem; }
.pull       { margin-block: 2rem; }
.prose h2   { margin-top: 2.25rem; }
.prose h3   { margin-top: 1.6rem; }
.criterion  { padding-block: 1.3rem; }
.fact       { padding-block: 1.15rem; }
.foot-grid  { gap: 2rem; }
.foot .legal{ margin-top: 2.25rem; padding-top: 1.25rem; }

/* Bold inside body copy. Source Serif 4 is loaded at 400 and 600 only,
   so the browser default of 700 for strong and b would be synthesised
   and blurred, which is the same defect corrected in the footer at v8. */
strong, b { font-weight: 600; }

/* v10: fine print. Disclosure that must be present but should not carry
   visual weight, because a large explanation of an absence reads as a
   defence. Size and colour are values already used by .notes. */
.fineprint { font-size: 0.8125rem; line-height: 1.55; color: var(--grey); max-width: 46rem; }

/* v11: a pull quote at body size. Keeps the crimson rule and the black
   text, drops the display scale, so a disclosure reads as a statement
   rather than as a headline. */
.pull-sm { font-size: 0.9375rem; line-height: 1.65; max-width: 46rem; }

/* v12: enquiry form loading state and empty frame handling.

   The form is fetched from a separate origin, so there is a visible wait
   between the page painting and the form painting. .form-loading fills
   that gap with a cream panel, and is cleared by the load event on the
   iframe. Deleting this block reverts to a blank 760px area.

   The iframe:not([src]) rule matters because the frame now carries no
   src in the markup. A visitor with JavaScript disabled never has one
   assigned, and without this rule would see an empty 760px box above
   the noscript fallback. */

.form-shell { position: relative; }

.form-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--cream-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  transition: opacity 0.25s ease;
}
.form-loading p:last-child {
  margin: 0;
  max-width: 24rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--grey);
}
.form-shell.is-ready .form-loading {
  opacity: 0;
  visibility: hidden;
}
.form-shell iframe:not([src]) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .form-loading { transition: none; }
}