/* ==========================================================================
   KentRidge Capital — site stylesheet
   Edit colours and fonts in the :root block below; everything else follows.
   ========================================================================== */

:root {
  --navy:        #0B1F3A;   /* primary brand navy */
  --navy-deep:   #08192F;
  --navy-soft:   #16304F;
  --ink:         #1E2A38;   /* body text */
  --ink-muted:   #5A6675;   /* secondary text */
  --rule:        #DCDFE4;   /* hairlines */
  --paper:       #FFFFFF;
  --paper-warm:  #F7F6F3;   /* warm off-white for alternating sections */
  --paper-cool:  #F3F6F9;   /* cool tint, used only under diagrams */
  --char:        #2C3440;   /* charcoal, for diagram strokes and rules */
  --accent:      #0253DA;   /* brand blue, taken from the logo mark */
  --accent-lift: #7FA9F5;   /* lighter blue for use on navy backgrounds */

  --display: "Libre Caslon Display", "Source Serif 4", Georgia, serif;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 1180px;   /* max content width */
  --gutter: 32px;

  /* vertical rhythm */
  --s-sm: 16px;
  --s-md: 24px;
  --s-lg: 48px;
  --s-xl: 80px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  line-height: 1.2;
}
h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1.06; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.7rem, 2.7vw, 2.3rem); line-height: 1.14; letter-spacing: -0.012em; }
h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.005em; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ---------- layout ---------- */
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 96px 0; }
.section--lg { padding: 112px 0; }
.section--tight { padding: 64px 0; }
.section--warm { background: var(--paper-warm); }
.section--navy { background: var(--navy); color: #E2E9F3; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #FFFFFF; }
.section--navy a { color: #FFFFFF; }

.lede { font-size: 1.13rem; line-height: 1.7; color: var(--ink-muted); max-width: 58ch; }
.narrow { max-width: 64ch; }
p { max-width: 68ch; }

/* Section header cluster: eyebrow, heading and lede bind tightly together,
   then a deliberate gap before the content they introduce. */
.eyebrow + h1, .eyebrow + h2 { margin-top: 0; }
h1 + .lede, h2 + .lede { margin-top: -0.15em; }
.lede + p { margin-top: var(--s-md); }
.head { margin-bottom: 48px; }
.head > :last-child { margin-bottom: 0; }
.head--wide .lede { max-width: 62ch; }
/* a section introduced by its label alone, with no heading under it */
.head--tight { margin-bottom: var(--s-md); }
.head--tight .eyebrow { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.section--navy .eyebrow { color: var(--accent-lift); }

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



/* compact three-up list, used for the homepage experience summary */
.brief h3 { font-size: 1.06rem; margin-bottom: 8px; }
.brief p { font-size: 0.96rem; color: var(--ink-muted); margin: 0; }

/* trailing link cell inside a bordered grid */
.cell--link { display: flex; align-items: center; }
.cell--note { background: var(--paper) !important; }
.cell--note p:not(.eyebrow) { font-size: 0.88rem; color: var(--ink-muted); }
.cell--link a { font-weight: 600; }

.signoff { margin-top: var(--s-md); }
.signoff span { color: var(--ink-muted); }
.contact-detail { margin-top: var(--s-lg); }
.quote + p { margin-top: var(--s-md); }
.feature .quote + p { margin-top: var(--s-md); }

/* ---------- header / navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 76px; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; line-height: 1.1; }
.brand:hover { text-decoration: none; }
.brand__mark { height: 30px; width: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; }
.brand__name {
  font-family: var(--serif); font-size: 1.32rem; font-weight: 600;
  color: var(--navy); letter-spacing: 0.01em;
}
.brand__tag {
  font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 24px; }
.nav a {
  font-size: 0.86rem; color: var(--ink); letter-spacing: 0.02em;
  padding: 6px 0;
  /* The underline is drawn by the single ::after rule further down.
     Deliberately no border-bottom here: two mechanisms drew two lines. */
}
.nav a:hover { text-decoration: none; }
.nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: 3px; padding: 8px 12px; cursor: pointer; color: var(--navy);
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 16px 32px; border: 1px solid var(--navy);
  background: var(--navy); color: #fff; border-radius: 2px;
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: var(--navy-soft); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.section--navy .btn { background: #fff; color: var(--navy); border-color: #fff; }
.section--navy .btn--ghost { background: transparent; color: #fff; }
.section--navy .btn--ghost:hover { background: #fff; color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Highlighted action, in the logo blue. Distinct from the white primary so the
   two read as different invitations rather than competing for the same click. */
.btn--accent {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn--accent:hover { background: #0146BB; border-color: #0146BB; color: #fff; }

/* The hero is not .section--navy, so it needs its own button treatment —
   otherwise .btn renders navy on navy and all but disappears. */
.hero .btn { background: #fff; color: var(--navy); border-color: #fff; }
.hero .btn:hover { background: #E8EDF4; border-color: #E8EDF4; color: var(--navy); }
.hero .btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero .btn--accent:hover { background: #1C67E8; border-color: #1C67E8; color: #fff; }
.feature--dark .btn--accent, .section--navy .btn--accent {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ---------- hero ----------
   Content sits toward the top of the band so the headline is on screen the
   instant the page loads, rather than vertically centred and half below the
   fold. The scrim holds full navy across the text column, then falls away
   sharply so the artwork keeps its own light. */
.hero {
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(96deg,
      rgba(8,25,47,0.90) 0%,
      rgba(8,25,47,0.86) 38%,
      rgba(8,25,47,0.52) 54%,
      rgba(8,25,47,0.12) 68%,
      rgba(8,25,47,0) 80%),
    url("hero-singapore-v11.jpg");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  color: #DAE3EF;
  padding: 80px 0 112px;
  min-height: 580px;
  display: flex;
  align-items: flex-start;
}
.hero > .wrap { width: 100%; }
.hero h1 {
  color: #fff; max-width: 17ch; margin-bottom: 16px;
  font-size: clamp(2.3rem, 4.9vw, 3.6rem);
  letter-spacing: -0.018em;
}

/* The core message, kept as a subhead now the tagline carries the headline. */
.hero__line {
  /* keeps the core message inside the dense part of the scrim */
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.68rem);
  color: #A9C6F5;
  margin: 0 0 24px;
  max-width: 28ch;
}
.hero__kicker {
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-lift); margin: 0 0 16px;
}
.hero p { max-width: 56ch; font-size: 1.14rem; color: #DAE3EF; }
.hero__line + p { font-size: 1.08rem; }
.hero p + p:not(.hero__line) { font-size: 1rem; color: #CBD7E6; margin-top: 1.05em; max-width: 52ch; }
.hero .btn-row { margin-top: 40px; }

/* ---------- page banner (interior pages) ---------- */
.banner { background: var(--navy); color: #DAE3EF; padding: 80px 0 72px; }
.banner h1 { color: #fff; margin-bottom: 16px; }
.banner p { max-width: 52ch; font-size: 1.1rem; color: #DAE3EF; }

/* ---------- credentials bar ---------- */
.creds {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.creds__item { padding: 32px 24px; border-right: 1px solid var(--rule); }
.creds__item:last-child { border-right: 0; }
.creds__value {
  font-family: var(--serif); font-size: 1.16rem; color: var(--navy); font-weight: 600;
}
.creds__label {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: 6px;
}

/* ---------- generic grids ---------- */
/* No background rules and no cell boxes: separation comes from space alone. */
.grid { display: grid; gap: 40px 64px; background: none; border: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid > .cell { background: none; padding: 0; }
.section--warm .grid > .cell { background: none; }
.cell h3 { margin-bottom: 12px; }
.cell p { font-size: 0.97rem; color: var(--ink-muted); }

/* open grid (no borders) */
.cols { display: grid; gap: 48px; }
.cols--2 { grid-template-columns: repeat(2, 1fr); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--sidebar { grid-template-columns: minmax(220px, 1fr) 1.7fr; gap: 64px; }

/* ---------- numbered process steps ----------
   Markup is: .step > .step__n, h3, p, .step__out
   Two columns: the number sits in a fixed gutter, everything else stacks. */
.steps { border-top: 1px solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0 24px;
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
}
.step__n {
  grid-row: 1 / span 4;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--accent);
  margin: 0; padding-top: 0.35em;
}
.step h3 {
  grid-column: 2;
  font-family: var(--serif); font-size: 1.22rem; font-weight: 600;
  color: var(--navy); letter-spacing: -0.006em; margin: 0 0 8px;
}
.step p:not(.step__n):not(.step__out) {
  grid-column: 2;
  color: var(--ink-muted); font-size: 1rem; max-width: 60ch; margin: 0;
}
.step .step__out { grid-column: 2; }

/* ---------- label / content split ----------
   Title sits in its own column so the eye lands on the name first and the
   description keeps a comfortable measure instead of running the full width. */
.split {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 24px 64px;
  padding: 48px 0;
  border-bottom: 1px solid var(--rule);
}
.split:first-of-type { border-top: 1px solid var(--rule); }
.split__label h3 { font-size: 1.3rem; margin: 0 0 6px; }
.split__label .meta {
  font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.split__body { color: var(--ink-muted); max-width: 62ch; }
.split__body p + p { margin-top: 0.9em; }
.split__body > :last-child { margin-bottom: 0; }

/* ---------- lists ---------- */
.ticks { list-style: none; padding: 0; margin: 16px 0 0; }
.ticks li {
  position: relative; padding-left: 24px; margin-bottom: 8px;
  font-size: 0.97rem; color: var(--ink-muted);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; background: var(--accent);
}

/* ---------- pull quote ---------- */
.quote {
  font-family: var(--serif); font-size: 1.35rem; line-height: 1.5;
  color: var(--navy); border-left: 3px solid var(--accent);
  padding-left: 24px; margin: 0; max-width: 60ch;
}
.section--navy .quote { color: #fff; border-left-color: var(--accent-lift); }
.quote__attr {
  display: block; margin-top: 16px; font-family: var(--sans);
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- team ---------- */
.split--bio { padding: 64px 0; }

/* Contact details sit with the name, not buried under the biography. */
.person-links { list-style: none; padding: 0; margin: 16px 0 0; }
.person-links li { margin-bottom: 7px; }
.person-links a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.88rem; color: var(--ink-muted);
  border-bottom: 1px solid transparent;
}
.person-links a:hover { color: var(--accent); border-bottom-color: var(--accent); text-decoration: none; }
.person-links svg { flex: none; opacity: 0.8; }
.split--bio .split__label h3 { font-size: 1.1rem; }

/* ---------- featured publication (outlook) ----------
   A single flagship report, presented as an editorial moment between the
   credentials strip and the introduction. Navy so it reads as a distinct
   object rather than another content section; the cover is built in CSS
   rather than as an image, so the title can be edited without redrawing
   anything. Set OUTLOOK_LIVE in the build script to swap the draft state
   for the published one. */
.outlook { background: var(--navy); color: #E2E9F3; padding: 96px 0; }
.outlook .wrap {
  display: grid; grid-template-columns: minmax(0,270px) minmax(0,1fr);
  gap: 48px; align-items: center;
}

/* the cover: A-series proportions, scene artwork behind a navy wash */
.outlook__cover {
  position: relative; aspect-ratio: 1 / 1.414;
  background: var(--navy-deep) url("scene-horizon.svg") center/cover no-repeat;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 26px 64px rgba(0,0,0,0.40);
  display: flex; flex-direction: column;
  padding: 32px 24px 24px;
  overflow: hidden;
}
.outlook__cover::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(168deg, rgba(8,25,47,0.92) 0%, rgba(8,25,47,0.72) 46%, rgba(8,25,47,0.90) 100%);
}
.outlook__cover > * { position: relative; }
.outlook__cover-rule { height: 2px; width: 44px; background: var(--accent-lift); margin-bottom: 24px; flex: none; }
.outlook__cover-firm {
  font-size: 0.60rem; letter-spacing: 0.20em; text-transform: uppercase;
  color: rgba(226,233,243,0.72); margin: 0 0 auto;
}
.outlook__cover-year {
  font-size: 0.66rem; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--accent-lift); margin: 0 0 8px;
}
.outlook__cover-title {
  font-family: var(--serif); font-size: 1.34rem; line-height: 1.22;
  color: #FFFFFF; margin: 0 0 12px; font-weight: 600;
}
.outlook__cover-sub {
  font-size: 0.72rem; line-height: 1.5; color: rgba(226,233,243,0.78);
  margin: 0 0 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.18);
}
.outlook__cover-flag {
  align-self: flex-start; font-size: 0.58rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(226,233,243,0.90);
  border: 1px solid rgba(255,255,255,0.34); padding: 5px 8px; margin: 0;
}

/* the editorial column */
.outlook__body h2 { color: #FFFFFF; max-width: 20ch; margin-bottom: 0.4em; }
.outlook__body .eyebrow { color: var(--accent-lift); }
.outlook__body p { color: #C7D4E4; max-width: 58ch; }
.outlook__lede { font-size: 1.12rem; line-height: 1.6; }

.outlook__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin: 32px 0 0;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.outlook__stat { padding: 16px 24px 0 0; }
.outlook__stat + .outlook__stat { padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.18); }
.outlook__stat b {
  display: block; font-family: var(--serif); font-size: 1.42rem;
  font-weight: 600; color: #FFFFFF; line-height: 1.1; margin-bottom: 5px;
}
.outlook__stat span { display: block; font-size: 0.80rem; color: #A9BCD2; line-height: 1.45; }

.outlook__status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #A9BCD2; margin-top: 24px;
}
.outlook__status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-lift); flex: none;
}
.outlook .btn-row { margin-top: 24px; }
.outlook .btn { background: #fff; color: var(--navy); border-color: #fff; }
.outlook .btn:hover { background: #E8EDF4; border-color: #E8EDF4; }
.outlook .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.outlook .btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

@media (max-width: 880px) {
  .outlook { padding: 64px 0; }
  .outlook .wrap { grid-template-columns: 1fr; gap: 40px; }
  .outlook__cover { max-width: 230px; }
  .outlook__body h2 { max-width: none; }
}
@media (max-width: 560px) {
  .outlook__stats { grid-template-columns: 1fr; border-top: 0; }
  .outlook__stat { padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.18); }
  .outlook__stat + .outlook__stat { padding-left: 0; border-left: 0; }
}

/* ---------- tombstones ----------
   Transaction cards. Deal facts only: amount, instrument, counterparty by type
   and geography, and the advisory role held. No client name without written
   consent, and no return, pricing or coupon data. */
.tombs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
         background: var(--rule); border: 1px solid var(--rule); }
.tomb { background: var(--paper); padding: 32px 32px 32px; display: flex; flex-direction: column; }
.section--warm .tomb { background: var(--paper-warm); }
.tomb__size { font-family: var(--serif); font-size: 1.72rem; font-weight: 600;
              color: var(--navy); line-height: 1.1; margin: 0 0 4px; }
.tomb__stake { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
               color: var(--accent); margin: 0 0 16px; }
.tomb__sector { font-family: var(--serif); font-size: 1.08rem; color: var(--navy);
                font-weight: 600; margin: 0 0 12px; }
.tomb__meta { list-style: none; padding: 0; margin: auto 0 0; border-top: 1px solid var(--rule); }
.tomb__meta li { display: flex; justify-content: space-between; gap: 16px;
                 padding: 8px 0; border-bottom: 1px solid var(--rule);
                 font-size: 0.84rem; color: var(--ink-muted); }
.tomb__meta li:last-child { border-bottom: 0; }
.tomb__meta span:last-child { color: var(--ink); text-align: right; }
.tomb--placeholder { opacity: 0.55; }

/* The trailing link cell inherits flex-direction:column from .tomb, so the
   generic .cell--link rule centres it horizontally and leaves it pinned to
   the top of an otherwise empty card. Centre it on the cross axis instead
   and return it to the left edge, so it sits level with the card beside it
   rather than floating at the top. */
.tomb.cell--link { justify-content: center; align-items: flex-start; }
.tomb.cell--link p { margin: 0; }

/* Fewer than three entries: drop to two columns so a single card does not
   sit in a third of a row with empty space beside it. Remove this class
   from the .tombs div once there are three or more transactions. */
.tombs--few { grid-template-columns: repeat(2, 1fr); }
.tomb--placeholder .tomb__size { color: var(--ink-muted); }

@media (max-width: 900px) { .tombs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .tombs { grid-template-columns: 1fr; } }

/* ---------- experience table ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th {
  text-align: left; font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
  padding: 0 16px 12px 0; border-bottom: 1px solid var(--navy);
}
.table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table td:first-child { color: var(--navy); font-weight: 600; }

/* ---------- form ---------- */
.form { max-width: 640px; }
.field { margin-bottom: 24px; }
.field label {
  display: block; font-size: 0.76rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 12px; font-family: var(--sans); font-size: 1rem;
  color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 2px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--navy); outline-offset: -1px; border-color: var(--navy);
}
.field textarea { min-height: 150px; resize: vertical; }
.field--two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.notice {
  font-size: 0.86rem; color: var(--ink-muted); background: var(--paper-warm);
  border-left: 3px solid var(--rule); padding: 16px 24px; margin: 24px 0 0;
}

/* ---------- footnote / legal ---------- */
.footnote { font-size: 0.82rem; color: var(--ink-muted); max-width: 84ch; margin-top: 24px; }
.legal h2 { font-size: 1.25rem; margin-top: 40px; }
.legal p { font-size: 0.95rem; color: var(--ink-muted); max-width: 82ch; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: #A9B7C9; padding: 64px 0 32px; font-size: 0.9rem; }
.site-footer a { color: #DAE3EF; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer__mark { height: 34px; width: auto; margin: 0 0 16px; }
.footer__name { font-family: var(--serif); font-size: 1.3rem; color: #fff; margin: 0 0 8px; }
.footer__tag { color: var(--accent-lift); font-size: 0.86rem; margin: 0 0 12px; }
.footer h4 {
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; margin: 0 0 12px;
}
.footer__links { list-style: none; padding: 0; margin: 0; }
.footer__links li { margin-bottom: 8px; }

.footer__social {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 8px 16px 8px 12px;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 3px;
  font-size: 0.82rem; letter-spacing: 0.04em; color: #DAE3EF;
  transition: background .18s ease, border-color .18s ease;
}
.footer__social:hover {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.42);
  text-decoration: none; color: #fff;
}
.footer__social svg { flex: none; }
.footer__bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.8rem; color: #94A2B5;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 12px; padding: 40px 0; }
  .split__body { max-width: none; }
  .creds { grid-template-columns: repeat(2, 1fr); }
  .creds__item:nth-child(2) { border-right: 0; }
  .creds__item:nth-child(1), .creds__item:nth-child(2) { border-bottom: 1px solid var(--rule); }
  .grid--3, .cols--3 { grid-template-columns: repeat(2, 1fr); }
  .cols--sidebar { grid-template-columns: 1fr; gap: 24px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 52px minmax(0, 1fr); gap: 0 16px; }
}

@media (max-width: 720px) {
  :root { --gutter: 22px; }
  .brand__mark { height: 26px; }
  body { font-size: 16px; }
  .section { padding: 48px 0; }
  .hero { padding: 64px 0 64px; }
  .nav {
    display: none; position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--rule); padding: 8px 24px 16px;
  }
  .nav.is-open { display: flex; }
  /* In the stacked menu the hairline is a row divider, so the sliding
     underline is switched off — otherwise the current item shows two lines.
     Current page is marked by colour and weight instead. */
  /* 44px minimum touch target on the menu button and the links it opens */
  .nav-toggle { min-height: 44px; padding: 10px 14px; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--accent); }
  .nav li:last-child a, .nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: block; }
  .grid--2, .grid--3, .cols--2, .cols--3 { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr; }
  .creds__item { border-right: 0; border-bottom: 1px solid var(--rule); }
  .field--two { grid-template-columns: 1fr; gap: 0; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .table thead { display: none; }
  .table tr { display: block; border-bottom: 1px solid var(--rule); padding: 12px 0; }
  .table td { display: block; border: 0; padding: 3px 0; }
}


/* ---------- feature statement ----------
   Light full-width band. Alternates against the navy closing sections so
   consecutive pages never read as the same block twice. */
.feature {
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 80px 0;
}
.feature .wrap { max-width: 900px; }
.feature h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); max-width: 20ch; }
.feature p { max-width: 62ch; font-size: 1.1rem; color: var(--ink-muted); }
.feature .quote {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  border-left: 0; padding-left: 0; max-width: 22ch;
}
.feature .quote::before {
  content: ""; display: block; width: 52px; height: 2px;
  background: var(--accent); margin-bottom: 24px;
}

/* scene-backed variant. The scrim is directional: dense behind the text on the
   left, opening up on the right so the artwork is legible without competing. */
.feature--image {
  position: relative;
  background-color: var(--navy-deep);
  background-size: cover;
  background-position: center;   /* overridden per scene in the page markup */
  background-repeat: no-repeat;
  border-top: 0; border-bottom: 0;
  padding: 112px 0;
  min-height: 500px;             /* short copy must not crush the artwork */
  display: flex;
  align-items: center;
  overflow: hidden;
}
.feature--image > .wrap { width: 100%; }
.feature--image::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(9,17,32,0.94) 0%, rgba(11,21,38,0.86) 38%,
                              rgba(14,24,42,0.54) 72%, rgba(18,26,44,0.26) 100%);
}
.feature--image > .wrap { position: relative; z-index: 1; }

/* dark variant, used where the neighbouring section is light */
.feature--dark {
  background: var(--navy-deep);
  border-top: 0; border-bottom: 0;
  color: #DAE3EF;
}
.feature--dark h2, .feature--dark h3 { color: #fff; }
.feature--dark p { color: #DAE3EF; }
.feature--dark .eyebrow { color: var(--accent-lift); }
.feature--dark .quote { color: #fff; }
.feature--dark .quote::before { background: var(--accent-lift); }
.feature--dark .btn { background: #fff; color: var(--navy); border-color: #fff; }
.feature--dark .btn--ghost { background: transparent; color: #fff; }
.feature--dark .btn--ghost:hover { background: #fff; color: var(--navy); }

@media (max-width: 720px) {
  .feature { padding: 64px 0; }
  .feature--image { padding: 80px 0; min-height: 380px; }
  .feature--image::before { background: rgba(7,22,41,0.90); }
  .hero:not(.hero--facade) {
    padding: 48px 0 64px; min-height: 0;
    background-image:
      linear-gradient(180deg, rgba(8,20,38,0.94) 0%, rgba(9,22,42,0.88) 55%, rgba(10,24,45,0.80) 100%),
      url("hero-singapore-v11.jpg");
    background-size: cover;
    background-position: 76% center;
  }
  .section--lg { padding: 64px 0; }
}


/* ==========================================================================
   v4 components
   ========================================================================== */

/* ---------- facade hero ----------
   The photograph is pre-tinted to brand navy, so the scrim carries legibility
   rather than colour: dense at the left under the type, thinning to the right
   so the converging verticals stay visible. */
.hero--facade {
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(97deg, rgba(8,25,47,0.95) 0%, rgba(8,25,47,0.89) 34%,
                    rgba(8,25,47,0.60) 56%, rgba(8,25,47,0.24) 76%, rgba(8,25,47,0.10) 100%),
    url("hero-facade.jpg");
  background-size: cover;
  background-position: center 34%;
  min-height: 600px;
  padding: 96px 0 96px;
  display: flex;
  align-items: center;
}
.hero--facade h1 { max-width: 13ch; }
.hero--facade .hero__line { max-width: 48ch; }

/* ---------- quiet secondary button ---------- */
.btn--quiet { background: transparent; color: var(--navy); border-color: var(--rule); }
.btn--quiet:hover { background: transparent; border-color: var(--navy); color: var(--navy); }
.hero .btn--quiet, .section--navy .btn--quiet, .feature .btn--quiet {
  background: transparent; color: #fff; border-color: rgba(255,255,255,0.40);
}
.hero .btn--quiet:hover, .section--navy .btn--quiet:hover, .feature .btn--quiet:hover {
  background: transparent; border-color: #fff; color: #fff;
}

/* ---------- facilities ledger: a list with rules, not a grid of cards ---------- */
.ledger { border-top: 1px solid var(--rule); }
.ledger__row {
  display: grid;
  grid-template-columns: 58px minmax(170px, 240px) minmax(0, 1fr);
  gap: 0 32px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.ledger__n {
  font-family: var(--display); font-size: 0.9rem; letter-spacing: 0.08em;
  color: var(--accent); line-height: 1.6;
}
.ledger__t h3 { margin: 0; }
.ledger__d p { margin: 0; color: var(--ink-muted); font-size: 0.99rem; max-width: 58ch; }
.ledger__foot { margin-top: var(--s-md); font-size: 0.98rem; }
.ledger__foot a { color: var(--accent); }

/* ---------- prose split: label column against one running column of text ---------- */
.split--prose {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 24px 64px; align-items: start;
}
.split--prose .split__label h2 { margin-bottom: 0; }
.split--prose .split__body p { max-width: 62ch; }
.split--prose .split__body p + p { margin-top: 1.2em; }

/* ---------- publication block ---------- */
.pub {
  display: grid;
  grid-template-columns: minmax(180px, 236px) minmax(0, 1fr);
  gap: 64px; align-items: center;
}
.pub__cover {
  position: relative; aspect-ratio: 1 / 1.414;
  background: var(--navy-deep) url("scene-horizon.svg") center / cover no-repeat;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 22px 54px rgba(11,31,58,0.24);
  display: flex; flex-direction: column;
  padding: 24px 24px 24px; overflow: hidden;
}
.pub__cover::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(168deg, rgba(8,25,47,0.93) 0%, rgba(8,25,47,0.74) 46%, rgba(8,25,47,0.92) 100%);
}
.pub__cover > * { position: relative; }
.pub__meta {
  font-size: 0.80rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 6px;
  display: flex; align-items: center; flex-wrap: wrap;
}
.pub__body .footnote { margin-top: var(--s-md); }

@media (max-width: 900px) {
  .pub { grid-template-columns: 1fr; gap: 32px; }
  .pub__cover { max-width: 200px; }
  .split--prose { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 800px) {
  .ledger__row { grid-template-columns: 42px minmax(0, 1fr); gap: 4px 16px; }
  .ledger__d { grid-column: 2; margin-top: 6px; }
}
@media (max-width: 860px) {
  .hero--facade {
    min-height: 0; padding: 80px 0 80px; background-position: 64% 34%;
    background-image:
      linear-gradient(180deg, rgba(8,25,47,0.91) 0%, rgba(8,25,47,0.87) 58%, rgba(8,25,47,0.80) 100%),
      url("hero-facade.jpg");
  }
}

/* exclusion list: the counterpart to .ticks, marked with a rule not a tick */
.ticks--no li { color: var(--ink); }
.ticks--no li::before { content: "\2014"; color: var(--ink-muted); font-weight: 400; }


/* ---------- facilities: a plain two-column list, no rules, no cards ---------- */
.facs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; }
.fac h3 { margin: 0 0 7px; }
.fac p { margin: 0; color: var(--ink-muted); font-size: 0.99rem; max-width: 46ch; }
.facs__foot { margin-top: var(--s-lg); font-size: 0.98rem; }
.facs__foot a { color: var(--accent); font-weight: 500; }
@media (max-width: 760px) { .facs { grid-template-columns: 1fr; gap: 32px; } }

/* cells lose their boxes: hierarchy comes from spacing and type */
.cell { background: none; padding: 0; }
.cell--note { background: none !important; border-top: 1px solid var(--rule); padding-top: 24px; }
.cell--link { display: block; }

@media print {
  .site-header, .site-footer, .btn-row { display: none; }
  body { color: #000; font-size: 11pt; }
}

/* ==========================================================================
   v5 — accessibility, and the components added in the September rebuild
   ========================================================================== */

/* ---------- accessibility ---------- */

/* Visible keyboard focus everywhere. Deliberately high contrast against both
   the paper and the navy surfaces. WCAG 2.2 SC 2.4.11/2.4.13. */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.section--navy :focus-visible,
.feature--dark :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible { outline-color: #FFFFFF; }

/* Fallback for browsers without :focus-visible */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid var(--accent); outline-offset: 3px;
  }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #FFFFFF;
  padding: 12px 20px; font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
}
.skip-link:focus { left: 0; text-decoration: none; }

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

/* ---------- numbered facility list (What We Arrange) ---------- */
.facility-list { list-style: none; margin: 0; padding: 0; }
.facility {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0 24px;
  padding: 40px 0;
  border-top: 1px solid var(--rule);
}
.facility:first-child { border-top: 0; padding-top: 0; }
.facility:last-child { padding-bottom: 8px; }
.facility__no {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--accent); padding-top: 0.5em;
}
.facility__body h2 {
  font-family: var(--serif);
  font-size: 1.42rem; line-height: 1.25; letter-spacing: -0.008em;
  margin: 0 0 20px;
}
.facility__dl { margin: 0; }
.facility__dl dt {
  font-family: var(--sans); font-size: 0.70rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 5px;
}
.facility__dl dd {
  margin: 0 0 20px; max-width: 64ch; color: var(--ink);
}
.facility__dl dd:last-child { margin-bottom: 0; }

/* ---------- callout: a quiet qualifying note, not a card ---------- */
.callout {
  margin-top: 56px;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
  max-width: 72ch;
}
.callout--plain { border-left-color: var(--rule); }
.callout h3 {
  font-family: var(--sans); font-size: 0.70rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 8px;
}
.callout p { font-size: 0.95rem; color: var(--ink-muted); margin: 0; max-width: none; }

/* ---------- attributed experience records ---------- */
.records {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
}
.record {
  border-top: 2px solid var(--navy); padding-top: 18px;
  /* column layout so the attribution rule lines up across all three
     records regardless of how long the body copy runs */
  display: flex; flex-direction: column;
}
.record h3 {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600;
  color: var(--navy); margin: 0 0 10px; letter-spacing: -0.005em;
}
.record p { font-size: 0.97rem; color: var(--ink); margin: 0 0 14px; max-width: none; }
.record__attr {
  font-size: 0.82rem !important;
  line-height: 1.5;
  color: var(--ink-muted) !important;
  margin: 0 !important;
  margin-top: auto !important;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
/* attribution carried inline, beside the claim it qualifies */
.inline-attr { color: var(--ink-muted); font-size: 0.88em; }

/* ---------- homepage execution ledger ---------- */
.ledger { list-style: none; margin: 0; padding: 0; max-width: 92ch; }
.ledger li {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: 0 32px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.ledger li:last-child { border-bottom: 1px solid var(--rule); }
.ledger__k {
  font-family: var(--serif); font-size: 1.04rem; font-weight: 600; color: var(--navy);
}
.ledger__v { color: var(--ink-muted); font-size: 0.97rem; line-height: 1.65; }

/* ---------- process step outputs (Approach) ---------- */
.step__out {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--ink-muted);
  max-width: 62ch;
}
.step__out span {
  display: block;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}

/* ---------- small print and quiet secondary routes ---------- */
.small { font-size: 0.88rem; color: var(--ink-muted); }
.note-quiet { margin-top: 28px; font-size: 0.9rem; color: #AFC2D8; }
.note-quiet a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- form: required marks, errors, status ---------- */
.req { color: var(--accent); font-weight: 600; }
.field__help { margin: 6px 0 0; font-size: 0.82rem; color: var(--ink-muted); }
.field__err  { margin: 6px 0 0; font-size: 0.82rem; color: #B3261E; font-weight: 500; }
.field input.is-invalid, .field textarea.is-invalid, .field select.is-invalid {
  border-color: #B3261E;
  box-shadow: inset 0 0 0 1px #B3261E;
}
.form__status { margin: 14px 0 0; font-size: 0.9rem; min-height: 1.4em; }
.form__status--ok { color: #1B5E20; font-weight: 500; }
.form__status--error { color: #B3261E; font-weight: 500; }
/* honeypot: off-screen rather than display:none, so bots still fill it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .records { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .facility { grid-template-columns: 1fr; gap: 0; padding: 32px 0; }
  .facility__no { padding-top: 0; margin-bottom: 8px; }
  .facility__body h2 { font-size: 1.28rem; }
  .ledger li { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .callout { margin-top: 40px; padding-left: 18px; }
}
@media (max-width: 380px) {
  .wrap { padding: 0 20px; }
  .facility__dl dd { font-size: 0.96rem; }
}

/* steps: stack the number above the content on narrow screens */
@media (max-width: 600px) {
  .step { grid-template-columns: 1fr; gap: 0; padding: 32px 0; }
  .step__n { grid-row: auto; padding-top: 0; margin-bottom: 8px; }
  .step h3, .step p:not(.step__n):not(.step__out), .step .step__out { grid-column: 1; }
}

/* ==========================================================================
   v6 — "The convergence": inputs resolving into a structure.
   Direction, symbolism and motion spec are in AUDIT-AND-NOTES.md.
   ========================================================================== */

/* ---------- the mark: four inputs meeting at a node ---------- */
.kmark { display: block; }
.kmark line, .kmark path { fill: none; stroke-linecap: round; }

/* ---------- hero motion overlay ----------
   Decorative only. The headline and CTA never depend on it: the overlay is
   drawn on top at low opacity and is removed entirely under reduced-motion. */
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 2; }
.hero__lines {
  /* Pinned to a right-hand box, not the whole hero. Previously this spanned
     the full width with the artwork flush right, which meant the lines began
     further left as the viewport narrowed and crossed the headline anywhere
     between about 720px and 1080px. */
  position: absolute; top: 0; right: 0; bottom: 0; left: auto;
  width: min(42%, 620px);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
.hero__lines svg { width: 100%; height: 100%; }
.hero__lines line, .hero__lines circle, .hero__lines path {
  stroke: #A8C4F0; fill: none; vector-effect: non-scaling-stroke;
}
.js-motion .hero__lines { animation: heroFade 1400ms ease-out 180ms forwards; }
/* --- Hero: one gesture -------------------------------------------------
   Four lines and the line beyond the node draw as a single sweep, 150ms
   apart, so they read as one movement rather than five events. Slower than
   the first version at 1800ms, with each stroke fading in over the first
   third of its draw so the leading edge never pops. Plays once. */

.hero__lines .hl { fill: none; }

.js-motion .hero__lines .draw {
  stroke-dasharray: var(--len, 420px);
  stroke-dashoffset: var(--len, 420px);
  opacity: 0;
  animation:
    drawIn 1800ms cubic-bezier(.22, .61, .36, 1) var(--delay, 0ms) forwards,
    strokeIn 600ms ease-out var(--delay, 0ms) forwards;
}

.js-motion .hero__lines .node {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: nodeIn 700ms cubic-bezier(.22, .61, .36, 1) 1750ms forwards;
}

@keyframes heroFade { to { opacity: 0.42; } }
@keyframes drawIn   { to { stroke-dashoffset: 0; } }
@keyframes strokeIn { to { opacity: 1; } }
@keyframes nodeIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- section entrances ----------
   Applied by JS only, and only when motion is allowed, so nothing is ever
   hidden by the stylesheet alone. */
.js-motion .reveal { opacity: 0; transform: translateY(7px); }
.js-motion .reveal.is-in {
  opacity: 1; transform: none;
  transition:
    opacity 380ms cubic-bezier(.16, .8, .28, 1) var(--rd, 0ms),
    transform 380ms cubic-bezier(.16, .8, .28, 1) var(--rd, 0ms);
}
/* Children of a staggered block arrive in sequence rather than as a slab.
   The delay is set per child by site.js. */
.js-motion .reveal--stagger > * { opacity: 0; transform: translateY(7px); }
.js-motion .reveal--stagger.is-in > * {
  opacity: 1; transform: none;
  transition:
    opacity 380ms cubic-bezier(.16, .8, .28, 1) var(--sd, 0ms),
    transform 380ms cubic-bezier(.16, .8, .28, 1) var(--sd, 0ms);
}

/* ---------- the structure diagram ---------- */
.diagram { margin: 0; }
.diagram__frame {
  background: var(--paper-cool);
  border: 1px solid var(--rule);
  padding: 40px 40px 32px;
}
.diagram__svg { width: 100%; height: auto; display: block; }
.diagram__svg .dline { stroke: #93A4B8; stroke-width: 1; fill: none; }
.diagram__svg .dline--in { stroke-dasharray: 3 4; }
.diagram__svg .dbox { fill: #FFFFFF; stroke: var(--rule); }
.diagram__svg .dbox--out { fill: var(--navy); stroke: var(--navy); }
.diagram__svg .dlabel {
  font-family: "Inter", sans-serif; font-size: 12.5px; fill: var(--char);
}
.diagram__svg .dlabel--sm {
  font-size: 10.5px; fill: var(--ink-muted); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.diagram__svg .dlabel--out { fill: #FFFFFF; }
.diagram__svg .dnode { fill: var(--accent); }
.diagram__caption {
  margin: 20px 0 0; font-size: 0.85rem; color: var(--ink-muted); max-width: 74ch;
}

/* The same content as a list. This is what a screen reader reads, and what
   shows on narrow screens where the diagram would be unreadable. */
.diagram__list { list-style: none; margin: 0; padding: 0; }
.diagram__list li { padding: 14px 0; border-top: 1px solid var(--rule); }
.diagram__list li:last-child { border-bottom: 1px solid var(--rule); }
.diagram__list b {
  display: block; font-family: var(--serif); font-size: 1rem;
  color: var(--navy); font-weight: 600;
}
.diagram__list span { font-size: 0.93rem; color: var(--ink-muted); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- situation selector (tablist) ---------- */
.sel__tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid var(--rule); margin-bottom: 40px;
}
.sel__tab {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 12px 20px 13px; cursor: pointer;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 500;
  color: var(--ink-muted); white-space: nowrap;
  transition: color 180ms ease, border-color 180ms ease;
}
.sel__tab:hover { color: var(--navy); }
.sel__tab[aria-selected="true"] {
  color: var(--navy); font-weight: 600; border-bottom-color: var(--accent);
}
.sel__panel[hidden] { display: none; }
/* Panels switch instantly. This is a control, not a reveal: animating it
   ran on first paint as well as on every tab change, which read as a flicker
   rather than as polish. */

.sel__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px 64px; align-items: start;
}
.sel__lede { font-size: 1.06rem; line-height: 1.66; color: var(--ink); max-width: 46ch; }
.sel__dl { margin: 0; }
.sel__dl dt {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 6px;
}
.sel__dl dd {
  margin: 0 0 22px; font-size: 0.96rem; color: var(--ink-muted);
  line-height: 1.66; max-width: 52ch;
}
.sel__dl dd:last-child { margin-bottom: 0; }

/* ---------- roadmap / FAQ disclosure ----------
   Native <details>, so it works with keyboard and without JavaScript. */
.disc { border-top: 1px solid var(--rule); }
.disc:last-of-type { border-bottom: 1px solid var(--rule); }
.disc > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 56px minmax(0,1fr) 28px;
  gap: 0 16px; align-items: baseline;
  padding: 22px 0;
  transition: background-color 180ms ease;
}
.disc > summary::-webkit-details-marker { display: none; }
.disc > summary:hover { background: rgba(2,83,218,0.028); }
.disc__n {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--accent);
}
.disc__t {
  font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
  color: var(--navy); letter-spacing: -0.006em;
}
.disc__i { position: relative; justify-self: end; width: 13px; height: 13px; }
.disc__i::before, .disc__i::after {
  content: ""; position: absolute; background: var(--accent);
  transition: transform 200ms ease, opacity 200ms ease;
}
.disc__i::before { top: 6px; left: 0; width: 13px; height: 1.5px; }
.disc__i::after  { left: 5.75px; top: 0; width: 1.5px; height: 13px; }
.disc[open] .disc__i::after { transform: scaleY(0); opacity: 0; }
.disc__body {
  padding: 0 0 30px 72px;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 48px;
}
.disc__body > div > h4 {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 7px;
}
.disc__body p, .disc__body ul { font-size: 0.94rem; color: var(--ink); margin: 0; max-width: 46ch; }
.disc__body ul { list-style: none; padding: 0; }
.disc__body ul li { padding-left: 15px; position: relative; margin-bottom: 5px; }
.disc__body ul li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 5px; height: 1px; background: var(--accent);
}
/* FAQ variant: one column, no number */
.disc--faq > summary { grid-template-columns: minmax(0,1fr) 28px; }
.disc--faq .disc__t { font-size: 1.04rem; }
.disc--faq .disc__body { padding-left: 0; grid-template-columns: 1fr; }
.disc--faq .disc__body p { max-width: 70ch; }

/* ---------- deliverables ledger (what an engagement produces) ---------- */
.deliv { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 64px; }
.deliv__item { padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.16); }
.deliv__item h3 { font-family: var(--serif); font-size: 1.08rem; color: #FFFFFF; margin: 0 0 7px; font-weight: 600; }
.deliv__item p { font-size: 0.93rem; color: #B6C6DC; margin: 0; max-width: 44ch; }

/* ---------- two-state comparison (conversation vs engagement) ---------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px; }
.compare__col { padding-top: 20px; border-top: 2px solid var(--rule); }
.compare__col--on { border-top-color: var(--accent); }
.compare__k {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 10px;
}
.compare__col--on .compare__k { color: var(--accent); }
.compare__col h3 { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); margin: 0 0 12px; font-weight: 600; }
.compare__col p { font-size: 0.95rem; color: var(--ink-muted); margin: 0 0 12px; max-width: 42ch; }

/* ---------- interaction states, applied consistently ---------- */
.btn { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.btn:active { transform: translateY(1px); }
a { transition: color 160ms ease; }
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--navy); }
.nav a:hover { text-decoration: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .sel__grid { grid-template-columns: 1fr; gap: 28px; }
  .deliv, .compare { grid-template-columns: 1fr; gap: 0; }
  .compare { gap: 32px; }
  .disc__body { grid-template-columns: 1fr; gap: 20px; padding-left: 0; }
  .disc > summary { grid-template-columns: 44px minmax(0,1fr) 24px; gap: 0 12px; }
  .diagram__frame { padding: 28px 22px 24px; }
}
/* Below this the headline needs the width, so the overlay comes off entirely
   rather than being squeezed into the type. */
@media (max-width: 1200px) {
  .hero__lines { display: none; }
}

@media (max-width: 720px) {
  .sel__tabs {
    flex-wrap: nowrap; overflow-x: auto; margin-left: -22px; margin-right: -22px;
    padding: 0 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .sel__tabs::-webkit-scrollbar { display: none; }
  .sel__tab { padding: 13px 15px 14px; font-size: 0.88rem; }
  /* The tab strip scrolls sideways on a phone, so it needs to look like it
     does. A fade at the right edge is the hint; without it the last tab just
     looks cut off. */
  .sel { position: relative; }
  .sel::after {
    content: ""; position: absolute; top: 0; right: 0;
    width: 42px; height: 48px; pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, var(--paper) 78%);
  }
  .hero__lines { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__lines { display: none; }
  .js-motion .reveal { opacity: 1; transform: none; }
}

/* ---------- diagram: picture on wide screens, list on narrow ----------
   The list is always in the DOM and always what a screen reader gets; the
   SVG is aria-hidden decoration of the same content. */
.diagram__list {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 820px) {
  .diagram__svg { display: none; }
  .diagram__list {
    position: static !important; width: auto; height: auto;
    margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal;
  }
}

/* wrappers for the interactive blocks */
.sel { margin: 0; }
.roadmap, .faqs { margin: 0; max-width: 1000px; }
.roadmap + .callout, .faqs + .callout { margin-top: 48px; }

/* Panel heading. The tab strip labels the panel when JavaScript is running,
   so this is hidden visually but kept for screen readers; the <noscript>
   block on the page promotes it to a visible heading. */
.sel__h {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   v6.1 — motion refinements
   ========================================================================== */

/* ---------- accordion ----------
   The panel itself opens and closes natively, with no height animation.
   Two smoother approaches were built and backed out: a measured px-height
   transition, which could be cancelled by a stray transitionend from the
   return to auto and left a panel stuck open; and interpolate-size with a
   ::details-content override, which collapsed the panel entirely. Native
   toggling is what every reader already expects, and the fade and the icon
   below carry the motion without anything that can break. */
.disc__wrap { overflow: hidden; }
/* The fade is applied only to the open state, as an animation rather than a
   transition from a hidden default. That way the body has no opacity rule of
   its own to get stuck on: if this never runs, the content is simply there. */
.js-motion .disc[open] .disc__body {
  animation: discIn 240ms cubic-bezier(.16, .8, .28, 1) both;
}
@keyframes discIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* The indicator rotates rather than swapping glyphs */
.disc__i::before, .disc__i::after {
  transition: transform 320ms cubic-bezier(.16,.8,.28,1), opacity 240ms ease;
}
.disc[open] .disc__i::before { transform: rotate(180deg); }

/* ---------- selected tab ----------
   A plain border on the selected tab, with only the colour transitioning. A
   sliding indicator was built and removed: it positions itself from
   offsetLeft and offsetWidth, measured against the fallback font, so it
   jumped when the web font swapped in. Resize and the sideways scroll on a
   phone made it worse. */

/* ---------- mobile menu: eased open ---------- */
@media (max-width: 720px) {
  .js-motion .nav {
    display: flex; max-height: 0; overflow: hidden;
    transition: max-height 340ms cubic-bezier(.16,.8,.28,1), opacity 220ms ease;
    opacity: 0;
  }
  .js-motion .nav.is-open { max-height: 70vh; opacity: 1; overflow: auto; }
}

/* ---------- header: hairline appears once scrolled ---------- */
.site-header { transition: box-shadow 260ms ease, border-color 260ms ease; }
.js-motion .site-header { border-bottom-color: transparent; }
.js-motion .site-header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 14px rgba(11, 31, 58, 0.055);
}

/* ---------- buttons: fill settles rather than flicks ---------- */
.btn {
  transition: background-color 220ms cubic-bezier(.16,.8,.28,1),
              color 220ms ease, border-color 220ms ease, transform 120ms ease;
}

/* ---------- anchored sections clear the sticky header ---------- */
:target, [id] { scroll-margin-top: 104px; }

/* ---------- cross-page continuity ----------
   Supported browsers cross-fade between pages; the rest simply navigate. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(.16,.8,.28,1);
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .disc__body { opacity: 1; transition: none; }
  .js-motion .nav { transition: none; }
  .js-motion .site-header { border-bottom-color: var(--rule); }
  @view-transition { navigation: none; }
}

/* ==========================================================================
   Interaction weight.
   Less motion on arrival, more response to the pointer. Entrances are the
   thing a visitor sees once; buttons and menu items are what they touch.
   ========================================================================== */

/* ---------- buttons ---------- */
.btn {
  transition:
    background-color 170ms cubic-bezier(.16,.8,.28,1),
    border-color 170ms cubic-bezier(.16,.8,.28,1),
    color 170ms cubic-bezier(.16,.8,.28,1),
    box-shadow 170ms cubic-bezier(.16,.8,.28,1),
    transform 90ms ease;
  will-change: transform;
}
/* Solid: lifts very slightly and casts a shadow, so it reads as pressable */
.btn:hover {
  background: var(--navy-soft);
  box-shadow: 0 3px 12px rgba(11, 31, 58, 0.17);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(11, 31, 58, 0.16);
  transition-duration: 60ms;
}
/* Outlined: the border darkens and thickens into a fill tint */
.btn--quiet:hover {
  background: rgba(11, 31, 58, 0.045);
  border-color: var(--navy);
  box-shadow: none;
  transform: translateY(-1px);
}
.hero .btn--quiet:hover,
.section--navy .btn--quiet:hover,
.feature .btn--quiet:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: #fff;
  box-shadow: none;
}
.section--navy .btn:hover {
  background: #fff; color: var(--navy);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
}

/* ---------- menu items ---------- */
/* The underline wipes in from the left and out to the right, and the label
   darkens with it, so the whole item responds rather than just the rule. */
.nav a {
  transition: color 170ms cubic-bezier(.16,.8,.28,1);
}
.nav a:hover { color: var(--navy); }
.nav a::after { height: 2px; }

/* ---------- text links ---------- */
/* Inline links get an underline that grows rather than appearing. */
.facs__foot a, .split__body a, .legal a, .record a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 220ms cubic-bezier(.16,.8,.28,1), color 170ms ease;
  text-decoration: none;
  padding-bottom: 2px;
}
.facs__foot a:hover, .split__body a:hover, .legal a:hover, .record a:hover {
  background-size: 100% 1px;
  color: var(--accent);
  text-decoration: none;
}

/* ---------- disclosure rows ---------- */
/* A row is a big target, so it should acknowledge the pointer clearly. */
.disc > summary {
  transition: background-color 170ms ease;
  border-left: 2px solid transparent;
  padding-left: 0;
  margin-left: 0;
}
.disc > summary:hover { background: rgba(2, 83, 218, 0.045); }
.disc[open] > summary { background: rgba(2, 83, 218, 0.028); }

/* ---------- tabs ---------- */
.sel__tab {
  transition: color 170ms ease, border-color 170ms ease, background-color 170ms ease;
}
.sel__tab:hover { color: var(--navy); background: rgba(2, 83, 218, 0.04); }

/* ---------- form controls ---------- */
.field input, .field select, .field textarea {
  transition: border-color 170ms ease, box-shadow 170ms ease;
}
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: #B9C2CC;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .btn--quiet:hover { transform: none; }
}