/* ==========================================================================
   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;   /* alternating section background */
  --accent:      #0253DA;   /* brand blue, taken from the logo mark */
  --accent-lift: #7FA9F5;   /* lighter blue for use on navy backgrounds */

  --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: 28px;
  --s-lg: 48px;
  --s-xl: 72px;
}

/* ---------- 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: 17px;
  line-height: 1.65;
  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(--serif);
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  line-height: 1.2;
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); }
h3 { font-size: 1.2rem; }
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: 128px 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.19rem; line-height: 1.62; 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: var(--s-xl); }
.head > :last-child { margin-bottom: 0; }
.head--wide .lede { max-width: 62ch; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.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: 26px; }
.nav a {
  font-size: 0.86rem; color: var(--ink); letter-spacing: 0.02em;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { text-decoration: none; border-bottom-color: var(--accent); }
.nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: 3px; padding: 9px 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: 15px 30px; 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: 14px; 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: 84px 0 128px;
  min-height: 580px;
  display: flex;
  align-items: flex-start;
}
.hero > .wrap { width: 100%; }
.hero h1 {
  color: #fff; max-width: 17ch; margin-bottom: 18px;
  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: 38px; }

/* ---------- page banner (interior pages) ---------- */
.banner { background: var(--navy); color: #DAE3EF; padding: 92px 0 84px; }
.banner h1 { color: #fff; margin-bottom: 16px; }
.banner p { max-width: 58ch; 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: 36px 26px; 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 ---------- */
.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid > .cell { background: var(--paper); padding: 46px 40px; }
.section--warm .grid > .cell { background: var(--paper-warm); }
.cell h3 { margin-bottom: 12px; }
.cell p { font-size: 0.97rem; color: var(--ink-muted); }

/* open grid (no borders) */
.cols { display: grid; gap: 56px; }
.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: 72px; }

/* ---------- numbered process steps ---------- */
.steps { border-top: 1px solid var(--rule); }
.step {
  display: grid; grid-template-columns: 58px minmax(160px, 230px) minmax(0, 1fr);
  gap: 20px 44px; padding: 38px 0; border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.step__num {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--accent);
}
.step__title { font-family: var(--serif); font-size: 1.22rem; color: var(--navy); font-weight: 600; }
.step__body { color: var(--ink-muted); font-size: 1rem; max-width: 58ch; }

/* ---------- 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: 46px 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: 18px 0 0; }
.ticks li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  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: 26px; 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: 58px 0; }

/* Contact details sit with the name, not buried under the biography. */
.person-links { list-style: none; padding: 0; margin: 18px 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.5rem; }

/* ---------- 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: 18px 16px 18px 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: 22px; }
.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: 13px 14px; 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: 22px; }

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

/* ---------- footnote / legal ---------- */
.footnote { font-size: 0.82rem; color: var(--ink-muted); max-width: 84ch; margin-top: 28px; }
.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 30px; 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 14px; }
.footer h4 {
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.footer__links { list-style: none; padding: 0; margin: 0; }
.footer__links li { margin-bottom: 9px; }

.footer__social {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 20px; padding: 9px 15px 9px 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: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 0.8rem; color: #94A2B5;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 14px; padding: 38px 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: 28px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 46px 1fr; gap: 10px 20px; }
  .step__body { grid-column: 2; }
}

@media (max-width: 720px) {
  :root { --gutter: 22px; }
  .brand__mark { height: 26px; }
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .hero { padding: 72px 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 22px 18px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--rule); }
  .nav a:hover { border-bottom-color: var(--rule); }
  .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: 30px; }
  .table thead { display: none; }
  .table tr { display: block; border-bottom: 1px solid var(--rule); padding: 14px 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: 104px 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: 26px;
}

/* 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: 132px 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: 82px 0; min-height: 380px; }
  .feature--image::before { background: rgba(7,22,41,0.90); }
  .hero {
    padding: 56px 0 68px; 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: 72px 0; }
}

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