@import url('../fonts/fonts.css');

/* ============================================================
   MagniEstate — design tokens
   ============================================================ */

:root {
  /* Ground */
  --cream:        #F5F3EF;
  --bronze-wash:  #EFE6DB;
  --soft-sand:    #E8E3DB;
  /* Tints — light panels that raise a block without enclosing it in a card.
     These are what carry hierarchy now that every rule is gold. */
  --tint:         #F7EEE0;
  --tint-deep:    #EEDCC2;

  /* Ink */
  --charcoal:     #2C2C2C;
  --ink-2:        #5B564E;
  --ink-3:        #6B645A;

  /* Accent + dark */
  --bronze:       #A67B5B;
  --bronze-deep:  #7E5939;
  --bronze-press: #6C4B2F;
  --olive:        #4A4A3A;
  --olive-deep:   #3A3A2D;
  --sage:         #8B9084;
  --sage-text:    #B9BCB2;
  --bronze-light: #DCB48D;

  /* Status */
  --moss:         #6E7E5E;
  --terracotta:   #A2553F;
  --terracotta-light: #EFB3A0;   /* the same error, legible on olive (5.0:1) */

  /* Lines — gold, not grey. Every hairline on the page is the brand colour.
     See DESIGN.md: this is why a gain figure now needs a tint panel, not bronze
     ink, to stand apart. */
  --rule:         #D6BC96;
  --rule-soft:    #E9DAC0;
  --rule-dark:    #7B6B4E;

  /* Allocation ramp — one hue, light to dark, for the plan donut only.
     Four steps spread far enough apart to clear CVD and normal-vision
     separation (validated, worst adjacent pair ΔE 19). Never used as type. */
  --pie-1:        #F0E2CB;
  --pie-2:        #CF9E63;
  --pie-3:        #8F6442;
  --pie-4:        #3F2C1A;

  /* Type */
  --display: 'Cormorant Garamond', 'Anuphan', Georgia, 'Times New Roman', serif;
  --sans:    'Anuphan', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --shell:  1320px;
  --band:   clamp(4.5rem, 9vw, 8.5rem);
  --masthead: 64px;

  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Reset + base
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--bronze) var(--soft-sand);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

::selection { background: var(--bronze-deep); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

/* The masthead is sticky, so anchor targets must clear it or they land underneath. */
:where(section, main, footer, div)[id] { scroll-margin-top: calc(var(--masthead) + 1rem); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--soft-sand); }
::-webkit-scrollbar-thumb { background: var(--bronze); border: 3px solid var(--soft-sand); }
::-webkit-scrollbar-thumb:hover { background: var(--bronze-deep); }

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

/* ============================================================
   Layout primitives
   ============================================================ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band--sand   { background: var(--bronze-wash); }
.band--olive  { background: var(--olive); color: var(--cream); }
.band--olive a { color: var(--cream); }
.band--olive a.btn--light { color: var(--olive-deep); }
.band--olive a.btn--light:hover { color: var(--cream); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ============================================================
   Type scale
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

/* Thai never renders in Cormorant — keep it on Anuphan at display sizes. */
:lang(th), .th {
  font-family: var(--sans);
  letter-spacing: 0;
  line-height: 1.85;
}
h1 .th, h2 .th, h3 .th { font-weight: 300; line-height: 1.32; }

/* .th on the heading ITSELF outranks the h1–h4 rule, so 1.85 body leading would
   win at display size. Restate the heading leading at equal-or-higher specificity. */
h1.th, h2.th, h3.th, h4.th,
.d1.th, .d2.th, .d3.th { font-weight: 300; line-height: 1.32; }

.d1 { font-size: clamp(2.5rem, 1.55rem + 3.3vw, 4.25rem); }
.d2 { font-size: clamp(1.95rem, 1.3rem + 2.4vw, 3.05rem); }
.d3 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 1.95rem); }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 46ch;
}

.lede, .fine { text-wrap: pretty; }

.prose { max-width: 68ch; }
/* Thai sets no spaces between words, so the same ch measure runs visibly longer. */
.prose.th, .prose:lang(th) { max-width: 54ch; }
.prose p { margin: 0 0 1.15em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }

.section-head {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.band--olive .section-head { color: var(--sage-text); }

.muted { color: var(--ink-2); }
.fine {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-3);
  letter-spacing: 0.005em;
  max-width: 62ch;
}
/* Thai sets no inter-word spaces, so a ch measure runs long: .fine was rendering
   at ~129 characters a line before this cap. */
.fine.th { max-width: 54ch; }

/* The page's photographic register. --photo is the settled treatment; --photo-lift
   is the same image one step warmer, for hover. */
:root {
  --photo:      saturate(0.55) sepia(0.16) contrast(1.03) brightness(1.01);
  --photo-lift: saturate(0.72) sepia(0.10) contrast(1.03) brightness(1.02);
}
.band--olive .fine { color: var(--sage-text); }

/* --bronze clears AA only as large text (3.4:1 on cream), so it stays inside the
   display headings; anywhere at body size, emphasis takes the deeper bronze. */
em, .em { font-style: italic; color: var(--bronze-deep); }
h1 em, h2 em, h3 em, .d1 em, .d2 em, .d3 em, .proverb em { color: var(--bronze); }

/* ============================================================
   Buttons + links
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 1.7rem;
  border: 1px solid transparent;
  background: var(--olive);
  color: var(--cream);
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn:hover { background: var(--bronze-deep); }
.btn:active { background: var(--bronze-press); }
.btn[disabled], .btn[aria-disabled='true'] {
  background: var(--soft-sand);
  color: var(--ink-3);
  cursor: not-allowed;
  pointer-events: none;
}
.btn--light { background: var(--cream); color: var(--olive-deep); }
.btn--light:hover { background: var(--bronze-deep); color: var(--cream); }

.btn .arrow { transition: transform 0.45s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--charcoal);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.tlink:hover { color: var(--bronze-deep); border-color: var(--bronze); }
.tlink .arrow { transition: transform 0.45s var(--ease); }
.tlink:hover .arrow { transform: translateX(5px); }

.tlink.th { letter-spacing: 0.05em; text-transform: none; font-size: 0.8125rem; font-weight: 400; }

/* Stroke set on the <svg> itself: rules on "line"/"polyline" can't reach inside a
   <use> shadow tree, so the arrows were rendering as filled black triangles. */
.arrow { width: 26px; height: 6px; flex: none; stroke: currentColor; stroke-width: 1; fill: none; overflow: visible; }
.arrow line, .arrow polyline { stroke: currentColor; stroke-width: 1; fill: none; }

/* ============================================================
   Masthead
   ============================================================ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Warm sand, one step darker than the cream page: Apple's grey strip in the
     brand's own palette. Separate from the page without shouting over it. */
  background: rgba(233, 228, 220, 0.97);
  backdrop-filter: saturate(140%) blur(12px);
  color: var(--charcoal);
  border-bottom: 1px solid rgba(166, 123, 91, 0.35);
}

/* Apple-style bar: wordmark left, links as one evenly spaced group on the right. */
.masthead__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
  min-height: var(--masthead);
}

.masthead__inner > * { position: relative; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--charcoal);
}
.wordmark img { width: auto; height: 34px; object-fit: contain; }
.masthead .wordmark img { height: 28px; }
.wordmark__text { display: grid; gap: 0.2rem; font-family: var(--sans); }
.wordmark__name {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
}
.wordmark__role {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-3);
}

/* One tight group with even gaps, set to the right of the wordmark — Apple spaces its
   links evenly inside a group, it never stretches five words across the full bar. */
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(2rem, 3.2vw, 3rem);
}
.nav a {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--olive);
  transition: color 0.3s var(--ease);
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--bronze-deep); }

/* The Thai qualifier inside a nav item. The nav is uppercase and letter-spaced; Thai
   is neither, and tracking breaks its glyph clusters — so this drops both. Same
   name-over-role split the wordmark already uses, set inline to keep one baseline. */
.nav__sub {
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-3);
  margin-left: 0.4rem;
}
.nav a:hover .nav__sub { color: var(--bronze-deep); }
/* .nav a (0,1,1) outranks .btn (0,1,0), so the primary CTA was inheriting --ink-2
   on the olive block — 1.5:1, the worst contrast on the page, on the one control
   that matters most. */
.nav a.btn { color: var(--cream); }
.nav a.btn:hover { color: var(--cream); background: var(--bronze-deep); }

/* Book a call, moved up from the hero (2026-09-19). Sits right of the nav on
   desktop; on phones it stays in the bar next to Menu instead of folding away. */
.btn--bar {
  padding: 0.7rem 1.15rem;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  flex: none;
}
.masthead__inner { column-gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 1100px) { .nav { gap: 1.5rem; } }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(166, 123, 91, 0.45);
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-block; order: 3; }
  .masthead__inner { justify-content: space-between; gap: 0.75rem; }
  .btn--bar { order: 2; margin-left: auto; }

  .nav {
    position: fixed;
    inset: var(--masthead) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgb(233, 228, 220);
    border-bottom: 1px solid rgba(166, 123, 91, 0.35);
    padding: 0.5rem var(--gutter) 1.75rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    /* Without visibility the closed menu still takes keyboard focus — Tab from the
       wordmark used to land on five links nobody can see. */
    visibility: hidden;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
  }
  .nav[data-open='true'] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
  }
  .nav a { width: 100%; padding: 0.95rem 0; border-bottom: 1px solid rgba(166, 123, 91, 0.25); font-size: 0.9375rem; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* Wordmark + CTA + toggle stop fitting one 390px row at full size, and an
   overflowing masthead widens the whole document. Everything in the bar shrinks
   together rather than any one part being dropped. */
@media (max-width: 560px) {
  .masthead__inner { gap: 0.5rem; }
  .wordmark { gap: 0.5rem; }
  .wordmark img { height: 26px; }
  .wordmark__name { font-size: 0.6875rem; letter-spacing: 0.14em; }
  /* the role line is the first thing to go when the row stops fitting */
  .masthead .wordmark__role { display: none; }
  .nav-toggle { padding: 0.55rem 0.7rem; letter-spacing: 0.1em; }
  .btn--bar { padding: 0.6rem 0.8rem; letter-spacing: 0.1em; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero { position: relative; overflow: hidden; background: var(--cream); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  min-height: min(90vh, 900px);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.hero__copy { position: relative; z-index: 2; max-width: 34rem; }
.hero__copy h1 { margin-bottom: 1.6rem; }
.hero__copy .lede { margin: 0 0 2.4rem; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; align-items: center; }

.hero__media {
  position: relative;
  align-self: stretch;
  min-height: 340px;
  margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--shell)) / 2)));
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
}


@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 2.5rem;
    padding-block: 3rem 0;
  }
  .hero__copy { max-width: none; }
  .hero__media {
    min-height: 58vw;
    margin-inline: calc(var(--gutter) * -1);
  }
  .hero__media img { clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); object-position: 50% 50%; }
}

/* The hero ledger is gone: it restated the arithmetic table a screen below it,
   so the first screen now carries the promise and the actions only. */

/* Headline emphasis — a tint panel behind the phrase that names the problem,
   and a gold rule under the phrase that names the stakes. */
.mark {
  background: var(--tint-deep);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.02em 0.2em;
  margin-inline: -0.06em;
}
.ruled {
  text-decoration: underline;
  text-decoration-color: var(--bronze);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

/* ============================================================
   Arithmetic — the compounding comparison
   ============================================================ */

.arith__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 820px) { .arith__head { grid-template-columns: 1fr; gap: 1.5rem; } }

/* One centred statement, then the proof straight under it. The photograph that used
   to sit beside the headline was cut 2026-09-19: it was taller than the headline, so
   the headline sank to the bottom of an empty column. */
.arith__statement { text-align: center; margin: 0 auto clamp(3rem, 6vw, 5rem); }
.arith__statement h2 { margin: 0 auto; }
.arith__title { margin: 0.85rem 0 0; font-family: var(--display); font-style: italic; color: var(--bronze-deep); line-height: 1.3; text-wrap: balance; }
/* Headline, promise and example read as one unit: tight inside, generous before the chart. */
.arith__chart-head { text-align: center; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
.arith__chart-head h2 { margin: 0; }

/* The statement band: headline, then one wide photograph carrying the idea. */
/* Olive-deep so the statement stands apart from the cream bands on both sides of it. */
.smallmove { background: var(--olive-deep); color: var(--cream); }
.smallmove__line { color: var(--cream); }
.smallmove__line { text-align: center; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-wrap: balance; }
.smallmove__fig { margin: 0; aspect-ratio: 21 / 9; overflow: hidden; background: var(--soft-sand); }
.smallmove__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; filter: var(--photo-lift); }
/* Thai sub-line under the heading — same spacing as the Inflation sub, light on olive. */
.smallmove__line:has(+ .smallmove__sub) { margin-bottom: 1rem; }
.smallmove__sub { color: var(--sage-text); text-align: center; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 720px) { .smallmove__fig { aspect-ratio: 4 / 3; margin-inline: calc(var(--gutter) * -1); } }

/* Inflation — same layout as Small move, but on warm sand (not olive) so the
   problem and the fix read as two separate beats. The image carries its own
   numbers, so it keeps its 3:2 shape and is never cropped. */
.inflation .smallmove__line { color: var(--charcoal); margin-bottom: 1rem; }
/* "Inflation" as the hero word under the headline (2026-10-08, preview build) */
.inflation__hero { text-align: center; margin: 0 auto 1.5rem; font-family: var(--display); line-height: 1; }
.inflation__lead { display: inline-block; font-style: italic; font-size: clamp(1.25rem, 1rem + 1vw, 2rem); color: var(--olive); margin-right: 0.4em; vertical-align: baseline; }
.inflation__word { display: block; font-weight: 400; font-size: clamp(4rem, 2.4rem + 7vw, 8.5rem); color: var(--bronze); letter-spacing: -0.01em; }
/* One hero only: headline and Thai line step down so "Inflation" leads */
.inflation .smallmove__line { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); color: var(--olive); margin-bottom: 0.75rem; }
.inflation .inflation__sub { font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem); }
.inflation__sub { color: var(--ink-2); text-align: center; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.inflation__fig, .inflation__fig img { aspect-ratio: 3 / 2; }
.inflation__fig img { object-fit: contain; object-position: center; }
@media (max-width: 720px) { .inflation__fig { aspect-ratio: 3 / 2; margin-inline: 0; } }
/* Sits inside the table, under the top rule: it frames the bars it introduces. */
.arith__note {
  margin: 0 auto;
  padding-block: clamp(3rem, 5vw, 4.2rem) clamp(1rem, 1.6vw, 1.3rem);
  max-width: 52ch;
  text-align: center;
  font-size: 0.9375rem; line-height: 1.6; color: var(--ink-3); text-wrap: balance;
}
/* The first row below carries its own top padding, so the note needs more air
   above than below to sit optically centred between the rule and the first bar. */
.arith__note-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bronze-deep);
}
/* The picture carries the idea; the table below it is the proof. */
.arith__fig {
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--soft-sand);
}
.arith__fig img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 52%;
  filter: var(--photo-lift);
}
@media (max-width: 720px) {
  .arith__fig { aspect-ratio: 4 / 3; margin-inline: calc(var(--gutter) * -1); }
}

.arith__table { border-top: 1px solid var(--rule); }

.arith__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.75rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--rule);
  align-items: center;
}

.arith__year {
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1;
  color: var(--charcoal);
}
.arith__year small {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.5rem;
}

.arith__bars { display: grid; gap: 0.85rem; }

.bar {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 1.25rem;
}
.bar__label {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.4;
}
.bar--gain .bar__label { color: var(--charcoal); font-weight: 500; }
.bar__label.th { font-size: 0.875rem; line-height: 1.5; }
.bar__track { position: relative; height: 26px; border-bottom: 1px solid var(--rule-soft); }
.bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  min-width: 3px;
  background: var(--soft-sand);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.15s var(--ease);
}
.bar--gain .bar__fill { background: var(--bronze); }
.is-drawn .bar__fill { transform: scaleX(1); }
.bar__value {
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1;
  white-space: nowrap;
  min-width: 8ch;
  text-align: right;
}
/* Gold is now every rule on the page, so bronze ink alone no longer separates the
   gain. A tint panel behind the figure does the work instead — the payoff column
   is the only lit thing in the table. */
.bar--gain .bar__value {
  color: var(--bronze-deep);
  background: var(--tint);
  padding: 0.16em 0.55em;
  margin-right: -0.55em;
}

@media (max-width: 860px) {
  .bar { grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1rem; }
  .bar__label { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .arith__row { grid-template-columns: 1fr; gap: 1rem; }
  .arith__year { display: flex; align-items: baseline; gap: 0.75rem; }
  .arith__year small { margin: 0; }
  .arith__bars { gap: 1.25rem; }
}

/* Left over from when the note sat under the headline; kept in sync with the
   rule above now that it lives inside the table. */
.arith__note {
  display: block;
  margin: 0 auto;
  max-width: 52ch;
}

.proverb {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin: 0;
}

/* ============================================================
   Guide — the diversification statement, on the page's one
   mid-scroll dark ground.
   ============================================================ */

/* The measured-plan drawing that used to bleed off this section's right edge is
   gone: the diversification diagram now occupies that column and does real work,
   and two technical drawings in one field read as clutter. */
.guide { position: relative; overflow: hidden; }

/* ============================================================
   Services — three, image-led, no boxes
   ============================================================ */

.svc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; row-gap: 3.5rem; } }

.svc__item { display: flex; flex-direction: column; }
.svc__fig { position: relative; margin: 0 0 2.6rem; aspect-ratio: 4 / 3; background: var(--soft-sand); clip-path: inset(0 0 -3rem 0); }
.svc__fig img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.55) sepia(0.16) contrast(1.03) brightness(1.01);
  transition: transform 1.1s var(--ease), filter 0.8s var(--ease);
}
.svc__item:hover .svc__fig img { transform: scale(1.035); filter: saturate(0.72) sepia(0.1) contrast(1.03) brightness(1.02); }
/* Apple-style hierarchy: small bronze label, big serif promise, one quiet Thai line. */
.svc__item .svc__head {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 1.1vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--charcoal);
  margin: 0 0 0.85rem;
  text-wrap: balance;
}
/* The service name is a solid tag pinned to the photo's lower-left corner and hanging
   half below it, so it reads first and ties the image to the text under it. */
.svc__fig { overflow: visible; }
.svc__fig img { position: absolute; inset: 0; display: block; transform-origin: 50% 100%; }
.svc__item .svc__kind {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.15rem;
  background: var(--olive-deep);
  color: var(--cream);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 10px 24px -12px rgba(44, 44, 44, 0.45);
}
.svc__item .svc__kind::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--bronze-light);
}
/* Thai takes no case and no tracking; it also needs more optical size than the
   Latin label at the same nominal size. */
.svc__item .svc__kind.th {
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
}
.svc__item p { margin: 0 0 1.5rem; color: var(--ink-2); font-size: 0.96rem; }
.svc__item .svc__line { font-size: 1rem; line-height: 1.7; color: var(--ink-2); margin: 0 0 1.75rem; }
.svc__item .tlink { margin-top: auto; align-self: flex-start; }
/* The one action in the row: real estate is the only service with a live inventory to browse.
   Thai label, so no uppercase and no tracking. */
.svc__item .svc__cta {
  align-self: flex-start;
  background: var(--olive-deep);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.95rem 1.5rem 0.95rem 1.65rem;
  box-shadow: 0 10px 24px -14px rgba(44, 44, 44, 0.5);
}

/* ============================================================
   Goals — six, duotone, click through
   ============================================================ */

.goals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 900px) { .goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .goals { grid-template-columns: 1fr; } }

.goal {
  position: relative;
  display: block;
  min-height: 260px;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--olive);
  color: var(--cream);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.goal__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.85) contrast(1.02) brightness(1.08);
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.goal::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  /* Two layers: a light overall tint so the photograph stays bright, and a scrim
     that only darkens the bottom, where the title and copy sit. */
  background:
    linear-gradient(to top, rgba(28, 28, 24, 0.84) 0%, rgba(28, 28, 24, 0.5) 34%, rgba(28, 28, 24, 0) 62%),
    linear-gradient(200deg, rgba(74, 74, 58, 0.5) 0%, rgba(44, 44, 44, 0.46) 55%, rgba(166, 123, 91, 0.38) 100%);
  transition: opacity 0.55s var(--ease);
}
.goal:hover .goal__bg { transform: scale(1.05); filter: grayscale(0.55) contrast(1.02) brightness(1.06); }
.goal:hover::after { opacity: 0.8; }

.goal__inner { position: relative; display: flex; flex-direction: column; height: 100%; min-height: inherit; }
.goal__no {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em;
  color: var(--bronze-wash); opacity: 0.75; margin: 0 0 auto;
}
/* The card's job is to name the goal. Title up, supporting line down: without that
   gap the two read as one block of text and nothing leads. */
/* A solid block behind the title: on a photograph, size alone does not carry a
   heading. The negative left margin keeps the letters aligned to the copy below. */
.goal h3 {
  width: fit-content;
  background: var(--bronze-deep);
  padding: 0.14em 0.42em 0.2em;
  margin: 2.5rem 0 0.8rem -0.42em;
  font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.35rem);
  letter-spacing: -0.015em;
  color: var(--cream);
}
.goal p {
  margin: 0 0 1.5rem;
  font-size: 0.8125rem; line-height: 1.65;
  color: var(--bronze-wash); opacity: 0.82;
  max-width: 28ch;
}
@media (min-width: 561px) { .goal p { min-height: 3.4em; } }
.goal .goal__go {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream);
}
.goal:hover .goal__go .arrow { transform: translateX(5px); }
.goal .arrow { transition: transform 0.45s var(--ease); }

/* ============================================================
   Journey — three steps
   ============================================================ */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

.step { background: var(--cream); padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.5rem); }
.band--sand .step { background: var(--bronze-wash); }
/* An ordinal is not a gain, so it does not get the accent either. */
.step__no {
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ink-3);
  display: block;
  margin-bottom: 1.5rem;
}
.step h3 { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.65rem); margin-bottom: 0.7rem; }
.step p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }

/* ============================================================
   A full-bleed breath between sections
   ============================================================ */


/* ============================================================
   About + placeholders
   ============================================================ */

/* About runs the full measure. The portrait column and its dashed slot were cut
   2026-09-16: a box captioned "insert photo here" in the credibility section reads
   as unfinished work to the one visitor this page is built for. Three verified
   credentials on hairlines read as complete. */
.about { display: block; }

.facts { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.facts li {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem 1.5rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.facts dt, .facts .facts__k {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 620px) { .facts li { grid-template-columns: 1fr; gap: 0.3rem; } }

.placeholder {
  border: 1px dashed var(--bronze);
  background: rgba(166, 123, 91, 0.06);
  padding: 1.1rem 1.35rem;
  color: var(--bronze-deep);
  font-size: 0.8125rem;
  line-height: 1.7;
}
.placeholder strong {
  display: block;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  margin-bottom: 0.4rem;
}
.band--olive .placeholder,
.foot .placeholder { border-color: var(--sage); background: rgba(139, 144, 132, 0.12); color: var(--bronze-wash); }

/* ============================================================
   Contact form
   ============================================================ */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.25rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.form { display: grid; gap: 1.6rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.5rem; }
.field label {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
/* Thai has no letterspacing tradition and no case, so the Latin label treatment
   breaks it. It also needs more optical size than Latin at the same nominal size. */
.field label.th {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
  color: var(--ink-2);
}
.field .req { color: var(--bronze-deep); }
.field .opt {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--charcoal);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.65rem 0 0.7rem;
  caret-color: var(--bronze);
  transition: border-color 0.35s var(--ease);
  appearance: none;
}
.field textarea { resize: vertical; min-height: 5.5rem; line-height: 1.75; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--bronze) 50%), linear-gradient(135deg, var(--bronze) 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 1.75rem;
  cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--bronze);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 4px;
}

.field__err {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--terracotta);
  min-height: 1.5em;
  visibility: hidden;
}
.field[data-invalid='true'] input,
.field[data-invalid='true'] select { border-bottom-color: var(--terracotta); }
.field[data-invalid='true'] .field__err { visibility: visible; }

/* The one sentence that answers "will I be sold something". It shipped on all six
   goal pages and on none of the home page — the only screen a prospect is shown. */
.assure {
  margin: 1.25rem 0 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--bronze-light);
  border-top: 1px solid var(--rule-dark);
  padding-top: 1.25rem;
  max-width: 34ch;
}

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }

/* No default success colour. A message only earns --moss once something was sent. */
.form__status {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-2);
  display: none;
  max-width: 52ch;
  text-wrap: pretty;
}
.form__status[data-shown='true'] { display: block; }
.form__status--error { color: var(--terracotta); }
.form__status--pending {
  color: var(--charcoal);
  border-left: 1px solid var(--bronze);
  padding-left: 1rem;
}
.form__status--pending a { color: var(--bronze-deep); }
.form__status--ok { color: var(--moss); }

/* ============================================================
   Sub-page (goal detail)
   ============================================================ */

.subhero {
  position: relative;
  min-height: min(56vh, 460px);
  display: grid;
  align-items: end;
  background: var(--olive);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.subhero img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(0.75) contrast(1.05);
}
.subhero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(44, 44, 44, 0.55) 0%, rgba(74, 74, 58, 0.88) 78%);
}
.subhero__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.subhero h1 { margin: 1.1rem 0 1.2rem; }
.subhero .lede { color: var(--bronze-wash); max-width: 52ch; }

/* The only route back to the goal index, sitting over a photograph — it takes the
   brightest text token rather than the dimmest. */
.crumbs { font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--bronze-wash); }
.crumbs a { color: var(--bronze-wash); text-decoration-thickness: 1px; }
.crumbs a:hover { color: var(--cream); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.checklist li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.checklist svg { width: 14px; height: 14px; margin-top: 0.5rem; }
.checklist svg path { stroke: var(--bronze); stroke-width: 1.25; fill: none; }
.checklist p { margin: 0; }
.checklist .k { font-weight: 500; }

.toolset { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 820px) { .toolset { grid-template-columns: 1fr; } }
.toolset > div { background: var(--cream); padding: clamp(1.5rem, 2.5vw, 2.25rem); }
.band--sand .toolset > div { background: var(--bronze-wash); }
.toolset h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.toolset p { margin: 0; font-size: 0.9rem; color: var(--ink-2); }

.next-goals { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.next-goals a {
  font-size: 0.75rem; letter-spacing: 0.1em; text-decoration: none;
  border: 1px solid var(--rule); padding: 0.6rem 1rem; color: var(--ink-2);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.next-goals a:hover { border-color: var(--bronze); color: var(--bronze-deep); }

/* ============================================================
   Footer
   ============================================================ */

.foot { background: var(--olive-deep); color: var(--bronze-wash); }
.foot a { color: var(--bronze-wash); text-decoration: none; }
.foot a:hover { color: var(--cream); }
/* .foot a is more specific than .btn--light, so the cream button would take cream
   text and vanish. Restate it here. */
.foot a.btn--light { color: var(--olive-deep); }
.foot a.btn--light:hover { background: var(--bronze-deep); color: var(--cream); }

.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
@media (max-width: 820px) { .foot__top { grid-template-columns: 1fr; } }

.foot h3 {
  font-family: var(--sans);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sage-text);
  margin: 0 0 1.25rem;
}

.foot__mark { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.5rem; }
.foot__mark img { width: auto; height: 40px; object-fit: contain; }
.foot__mark .wordmark__name { color: var(--cream); }
.foot__mark .wordmark__role { color: var(--sage-text); }

.foot__bar {
  border-top: 1px solid rgba(232, 227, 219, 0.16);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--sage-text);
}

/* ============================================================
   Authored line figures — SVG drawn in the house stroke.
   Same language as .guide__plan: hairline strokes, bronze only
   where the drawing is making a point.
   ============================================================ */

.figure { margin: 0; }
.figure svg { display: block; width: 100%; height: auto; }
.figure .ln  { fill: none; stroke: var(--rule); stroke-width: 1.25; vector-effect: non-scaling-stroke;
               stroke-linecap: round; stroke-linejoin: round; }
.figure .ln2 { fill: none; stroke: var(--ink-3); stroke-width: 1.25; vector-effect: non-scaling-stroke;
               stroke-linecap: round; stroke-linejoin: round; }
.figure .acc { fill: none; stroke: var(--bronze); stroke-width: 1.25; vector-effect: non-scaling-stroke;
               stroke-linecap: round; stroke-linejoin: round; }
.figure .fill-acc { fill: var(--bronze); stroke: none; }
.figure .fill-soft { fill: var(--soft-sand); stroke: none; }
.figure .fill-tint { fill: var(--tint-deep); stroke: none; }
.band--sand .figure .fill-soft { fill: var(--cream); }
.figure text {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; fill: var(--ink-2);
}
.figure .t-acc { fill: var(--bronze-deep); }

/* The arithmetic's figure: three vessels rising with the stair. The drawn jars
   were cut 2026-09-16 — a hairline drawing sitting between illustration and
   photograph read as clipart beside the real photography elsewhere. */
.jars {
  margin: 0;
  width: 100%;
  max-width: 460px;
  justify-self: end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--soft-sand);
}
.jars img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo); }
@media (max-width: 820px) { .jars { justify-self: start; max-width: 380px; aspect-ratio: 3 / 2; } }

/* The gap the heading promises, performed. Both figures are already on the page;
   the subtraction was being left to the reader. */
.arith__gap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.arith__gap__k { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.arith__gap__v {
  margin: 0;
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1;
  color: var(--bronze-deep);
}

/* the proverb and its tree, closing the arithmetic */
.arith__close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 22vw, 300px);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.proverb__fig {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--soft-sand);
}
.proverb__fig img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo); }
@media (max-width: 620px) {
  .arith__close { grid-template-columns: 1fr; justify-items: start; gap: 2rem; }
  .arith__close .proverb__fig { width: 62%; aspect-ratio: 4 / 3; }
}

/* Diversification. The photograph — many identical recesses resolving into one
   vault — is now a strip, not a slab: it establishes the metaphor and then gets
   out of the way of the argument. The six drawn marks and the fan were cut
   2026-09-16. The six names alone said nothing, so the section now carries the
   mechanism (.risk) before it names the holdings (.assets). */
.spread { margin: clamp(2.75rem, 5vw, 4rem) 0 0; max-width: none; }
.spread__img {
  display: block;
  width: 100%;
  aspect-ratio: 64 / 9;
  object-fit: cover;
  filter: var(--photo) brightness(0.88);
}

/* The same fall, two portfolios. Both stacks are the same height and stand on the
   same baseline, so the comparison is structural rather than rhetorical: the left
   case loses its entire width, the right loses one column of six. */
.risk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-dark);
  margin-top: clamp(2.75rem, 5vw, 4rem);
}
.risk__case {
  background: var(--olive);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.25rem);
}
.risk__k {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--bronze-wash);
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}

.risk__stack {
  display: flex;
  align-items: stretch;
  gap: 1px;
  height: clamp(112px, 14vw, 158px);
  border-bottom: 1px solid var(--rule-dark);
}
.risk__seg { flex: 1 1 0; background: var(--bronze-wash); }

/* The fallen holding keeps its footprint as a hairline ghost, so the void reads as
   a measured loss rather than as a hole the layout forgot to fill. */
.risk__seg--down {
  background: none;
  border: 1px solid var(--rule-dark);
  border-bottom: 0;
  position: relative;
}
.risk__seg--down i {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--sage);
  transform-origin: bottom center;
  transform: scaleY(0.11);
  transition: transform 0.9s var(--ease) 0.45s;
}
/* Dropped is the default, so the argument survives with JS off. Under html.js the
   segment is held up until its row reveals, then falls — the section's one moment. */
.js [data-reveal]:not(.is-in) .risk__seg--down i { transform: scaleY(1); transition: none; }
.no-motion .risk__seg--down i { transition: none; }

.risk__v {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 1.1rem 0 0;
}
.risk__v b {
  font-family: var(--display);
  font-weight: 300;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  line-height: 1;
  color: var(--sage-text);
}
.risk__v small {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sage-text);
}
/* The only lit figure on this band — bronze marks what survived, the same way the
   arithmetic band lights the gain and nothing else. */
.risk__case--spread .risk__v b { color: var(--bronze-light); }

.risk__say {
  margin: 1.1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--sage-text);
  max-width: 34ch;
}
.risk__case--spread .risk__say { color: var(--bronze-wash); }

.risk__note { margin: 1.35rem 0 0; }

/* 2026-09-18: the band's opening is now one centred statement and one Thai line.
   The .spread photograph, the .risk two-case figure and .risk__note were cut — three
   devices arguing the same sentence, none of them clearer than the sentence. Their
   rules are left below, unused, so the figure can be restored intact if it is wanted
   back; see DESIGN.md. */
.creed { text-align: center; }
/* The <br> sets the break; the measure only stops the line running away on a wide
   monitor, which is why it is well above the longest line's own length. */
.creed h2 { margin: 0 auto; max-width: 28ch; }
.creed .lede {
  max-width: 48ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  color: var(--bronze-wash);
}
@media (max-width: 620px) { .creed h2 br { display: none; } }

/* BOOK. One centred column on the olive band, built on .creed so the closing
   section sets to the same measure and rhythm as the statement sections above it:
   promise, what the call is, the button. The reassurance line that sat between the
   last two was cut on Kawin's instruction 2026-09-23; .book .fine went with it. */
.book__cta { margin: clamp(2rem, 4vw, 2.75rem) 0 0; }

/* The picture between the statement and the holdings: several ropes cut, the
   chandelier still level. It argues the sentence rather than decorating it. */
/* Square source, and the whole frame is the argument: the cut ropes at the top and
   the level chandelier at the bottom. So it is narrowed, not cropped. */
.creed__fig {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  width: min(100%, 640px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--olive-deep);
}
.creed__fig img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 50%;
  filter: var(--photo-lift);
}
@media (max-width: 720px) {
  .creed__fig { width: 100%; }
}

/* The six holdings, each with the job it does. A name on its own was the flat part
   of this section: six labels state that a list exists, not why it exists. */
.assets {
  list-style: none;
  margin: clamp(2.75rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-dark);
}
.assets li { background: var(--olive); padding: clamp(1.5rem, 2.5vw, 1.9rem) clamp(1.35rem, 2.5vw, 1.9rem); }
.assets h3 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--cream);
  margin: 0 0 0.4rem;
}
.assets p { margin: 0; max-width: none; }

@media (max-width: 900px) {
  .spread__img { aspect-ratio: 32 / 9; }
  .assets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Once the cases stack, side padding only indents the figure away from the gutter
   the rest of the page is set to. The 1px gap becomes a full-measure hairline. */
@media (max-width: 720px) {
  .risk { grid-template-columns: 1fr; }
  /* impeccable-disable-next-line cramped-padding -- the shell gutter is the inset;
     the cell ground is the band's own olive, so there is no boundary to clear. */
  .risk__case { padding-inline: 0; }
  .risk__say { max-width: 46ch; }
}
@media (max-width: 560px) {
  .spread__img { aspect-ratio: 21 / 9; }
  .assets { grid-template-columns: 1fr; }
  /* impeccable-disable-next-line cramped-padding -- same as .risk__case above. */
  .assets li { padding-inline: 0; }
  .risk__stack { height: 104px; }
}

/* ============================================================
   Journey — each step gets a photograph
   ============================================================ */

.step__fig {
  margin: 0 0 1.75rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--soft-sand);
}
.step__fig img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo); }

/* ============================================================
   Contact on a dark ground, with a photograph beside it
   ============================================================ */

.contact--dark { align-items: stretch; }
.contact--dark .contact__aside { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
/* flex:1 only fills when the row has a definite height, so the panel carries its
   own so the photograph is never a 240px sliver. */
.contact__media {
  position: relative; overflow: hidden; margin: 0;
  flex: 1; min-height: clamp(240px, 24vw, 380px);
}
.contact__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 62%;
  filter: grayscale(0.5) contrast(1.05) brightness(0.74) sepia(0.22);
}
@media (max-width: 900px) { .contact__media { min-height: 200px; max-height: 240px; flex: none; } }

.band--olive .lede { color: var(--bronze-wash); }

.band--olive .field label { color: var(--sage-text); }
.band--olive .field label.th { color: var(--bronze-wash); }
.band--olive .field .req { color: var(--bronze-light); }
.band--olive .field .opt { color: var(--sage-text); }
.band--olive .field input,
.band--olive .field select,
.band--olive .field textarea {
  color: var(--cream);
  border-bottom-color: var(--rule-dark);
  caret-color: var(--bronze-light);
}
.band--olive .field select option { color: var(--charcoal); background: var(--cream); }
.band--olive .field input::placeholder,
.band--olive .field textarea::placeholder { color: var(--sage-text); }
.band--olive .field input:hover,
.band--olive .field select:hover,
.band--olive .field textarea:hover { border-bottom-color: var(--sage-text); }
.band--olive .field input:focus,
.band--olive .field select:focus,
.band--olive .field textarea:focus { border-bottom-color: var(--bronze-light); }
.band--olive .field input:focus-visible,
.band--olive .field select:focus-visible,
.band--olive .field textarea:focus-visible { outline-color: var(--bronze-light); }
.band--olive .field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--bronze-light) 50%),
                    linear-gradient(135deg, var(--bronze-light) 50%, transparent 50%);
}
.band--olive .field__err { color: var(--terracotta-light); }
.band--olive .field[data-invalid='true'] input,
.band--olive .field[data-invalid='true'] select { border-bottom-color: var(--terracotta-light); }
.band--olive .form__status { color: var(--bronze-wash); }
.band--olive .form__status--error { color: var(--terracotta-light); }
.band--olive .form__status--pending { color: var(--cream); border-left-color: var(--bronze-light); }
.band--olive .form__status--pending a { color: var(--bronze-light); }
.band--olive :focus-visible { outline-color: var(--bronze-light); }

/* ============================================================
   Partners — one long rail of logos, moving
   ============================================================ */

.pm {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pm__track { display: flex; width: max-content; animation: pm-run 64s linear infinite; }
.pm__group {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.75rem);
  padding-right: clamp(2.5rem, 5vw, 4.75rem);
}
/* One ink for nineteen brands. Full colour would drop a bag of blues, greens and
   yellows into an earth palette; greyscale keeps each logo's internal contrast so
   the ones built as light-on-dark blocks stay readable. */
.pm__logo {
  height: 38px; width: auto; flex: none;
  filter: grayscale(1) contrast(1.08) brightness(0.94);
  opacity: 0.78;
  transition: opacity 0.4s var(--ease), filter 0.4s var(--ease);
}
/* A square mark at the same height as a wordmark reads heavier; these come down. */
.pm__logo--tall { height: 30px; }
.pm__logo:hover { opacity: 1; filter: none; }
@keyframes pm-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pm:hover .pm__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .pm__track { animation: none; }
  .pm { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ============================================================
   Footer
   ============================================================ */

.foot .foot__contact { display: grid; gap: 0.7rem; }
.foot__mark + .btn { margin-top: 0.5rem; }
.foot .foot__contact .foot address { font-style: normal; display: grid; gap: 0.7rem; font-size: 0.9375rem; }

/* ============================================================
   Reveal — the one authored motion moment
   Content is visible by default; JS opts in.
   ============================================================ */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   Screen-reader-only text
   ============================================================ */

.u-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   The finished plan — one real case, by asset type only.

   The donut carries the shape of the allocation; the table
   carries the numbers and doubles as the legend, so identity
   is never colour alone. Both are labelled directly.
   ============================================================ */

.plan {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .plan { grid-template-columns: 1fr; gap: 2.75rem; } }

.plan__chart { width: 100%; max-width: 400px; justify-self: center; }

.plan__chart .seg {
  fill: none;
  stroke-width: 46;
  transition: opacity 0.4s var(--ease);
}
.plan__chart .seg--1 { stroke: var(--pie-1); }
.plan__chart .seg--2 { stroke: var(--pie-2); }
.plan__chart .seg--3 { stroke: var(--pie-3); }
.plan__chart .seg--4 { stroke: var(--pie-4); }

/* The palest step is a shade off the cream ground. Without a drawn edge it
   reads as a gap in the ring rather than a holding. Every rule on this page
   is gold, and so is this one. */
.plan__chart .donut__edge { fill: none; stroke: var(--rule); stroke-width: 1.5; }

.plan__chart:hover .seg  { opacity: 0.3; }
.plan__chart .seg:hover  { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .plan__chart .seg { transition: none; } }
@media (hover: none) { .plan__chart:hover .seg { opacity: 1; } }

/* Every slice names itself, outside the ring. Inside it, two of the four labels
   landed as dark ink on the two darkest segments and could not be read at all —
   which left the table as the only legend. Outside, one ink serves all four. */
.plan__chart .plan__nm {
  font-family: var(--sans); font-size: 11.5px; font-weight: 400;
  letter-spacing: 0.02em; fill: var(--ink-2);
}
.plan__chart .plan__pct {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.03em; fill: var(--charcoal);
  font-variant-numeric: lining-nums tabular-nums;
}
.plan__chart .plan__lab--r { text-anchor: start; }
.plan__chart .plan__lab--l { text-anchor: end; }
.plan__chart .plan__lead { stroke: var(--rule); stroke-width: 1; fill: none; }

.plan__chart .plan__hero {
  font-family: var(--display); font-size: 42px; font-weight: 400;
  fill: var(--bronze-deep); text-anchor: middle;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0;
}
.plan__chart .plan__heroL {
  font-family: var(--sans); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.2em; fill: var(--ink-3); text-anchor: middle;
}

.plan__tablewrap { overflow-x: auto; }
.plan__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}
.plan__table th,
.plan__table td {
  text-align: right;
  padding: 0.95rem 0.45rem;
  border-bottom: 1px solid var(--rule);
}
.plan__table thead th {
  font-size: 0.6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3);
  border-bottom-color: var(--charcoal);
  padding-bottom: 0.7rem;
}
/* The first column holds names, not figures — its header follows its column. */
.plan__table thead th:first-child { text-align: left; }
.plan__table tbody th,
.plan__table tfoot th {
  text-align: left; font-weight: 400; font-size: 0.9375rem;
  color: var(--charcoal); white-space: nowrap;
}
.plan__table tbody td { font-size: 0.9375rem; color: var(--ink-2); }
.plan__table .plan__tot { color: var(--charcoal); font-weight: 500; }
.plan__table .plan__nil { color: var(--ink-3); }

.plan__chip {
  display: inline-block; width: 10px; height: 10px;
  margin-right: 0.65rem;
  outline: 1px solid var(--rule); outline-offset: -1px;
}
.plan__chip--1 { background: var(--pie-1); }
.plan__chip--2 { background: var(--pie-2); }
.plan__chip--3 { background: var(--pie-3); }
.plan__chip--4 { background: var(--pie-4); }

.plan__table tfoot th,
.plan__table tfoot td {
  border-bottom: 0;
  border-top: 1px solid var(--charcoal);
  padding-top: 1.1rem;
  font-size: 1rem;
}
.plan__table tfoot th { font-weight: 500; }
/* The blended figure is the payoff of the table, so it takes the page's one
   highlight mechanism — the tint panel — not a second accent colour. */
.plan__table tfoot .plan__tot {
  background: var(--tint);
  color: var(--bronze-deep);
  font-weight: 500;
}

@media (max-width: 700px) {
  .plan__table,
  .plan__table tbody,
  .plan__table tfoot,
  .plan__table tr,
  .plan__table th,
  .plan__table td { display: block; }
  .plan__table thead { display: none; }
  .plan__table tr {
    border-bottom: 1px solid var(--rule);
    padding-block: 1.1rem;
  }
  .plan__table tbody tr:last-child { border-bottom: 0; }
  .plan__table tfoot tr { border-bottom: 0; border-top: 1px solid var(--charcoal); }
  /* .plan__table tfoot th is (0,1,2) and outranks the blanket th/td reset above,
     so the footer's per-cell rule survived into the stacked layout and drew a
     line above every figure in the blended block. Zero it at its own weight. */
  .plan__table tfoot th,
  .plan__table tfoot td { border: 0; padding-top: 0.28rem; font-size: 0.9375rem; }
  .plan__table th,
  .plan__table td { border: 0; padding: 0.28rem 0; text-align: left; }
  .plan__table tbody th,
  .plan__table tfoot th { font-weight: 500; margin-bottom: 0.5rem; }
  .plan__table td {
    display: flex; align-items: baseline;
    justify-content: space-between; gap: 1.5rem;
  }
  .plan__table td::before {
    content: attr(data-l);
    font-size: 0.6875rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--ink-3);
  }
  .plan__table tfoot .plan__tot { padding-inline: 0.4rem; }
}

/* Real Estate page not ready yet (2026-10-06): links stay visible but can't be clicked.
   To unlock, remove class "is-locked", aria-disabled and tabindex from those links. */
.is-locked { pointer-events: none; cursor: default; }