/* ============================================================
   Advanced Balanced Consulting, Inc. — rebuild mock
   Palette derived from the logo: navy #232244 + gold #C8AD4F
   ============================================================ */

/* Copperplate CC Heavy — the engraved voice: wordmark + label system.
   Owen Earl / indestructible type* for The Cowboy Collective, SIL OFL 1.1
   (see assets/fonts/OFL.txt). An open revival of Goudy's 1901 Copperplate
   Gothic, drawn from ATF catalogue scans, so the serifs sit finer than most
   digitisations.

   Metrics that drive the rules below: capHeight 700/1000 upem, which is within
   a hair of Instrument Sans, so --engrave-scale is ~1 rather than a big
   correction. "Heavy" is the regular weight and declares usWeightClass 400,
   so font-weight:400 is a genuine match and nothing gets synthetically bolded.
   The font is effectively caps-only — lowercase codepoints carry full capital
   forms, not small caps — which is why every engraved element is explicitly
   uppercased: the fallback serifs DO have real lowercase, and without the
   transform a Windows or Android reader would see mixed case during the swap. */
@font-face {
  font-family: "Copperplate CC";
  src: url("../fonts/copperplate-cc-heavy.woff2") format("woff2"),
       url("../fonts/copperplate-cc-heavy.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --navy-900: #14142b;
  --navy:     #232244;
  --navy-600: #3a3a5e;
  --gold:     #c8ad4f;
  --gold-deep:#8a7327;   /* accessible gold for small text on light */
  --gold-soft:#e7dcb4;

  /* Surface + text */
  --paper:  #fbfaf7;
  --white:  #ffffff;
  --ink:    #23233a;     /* 13.9:1 on paper */
  --slate:  #5a5a70;     /* 6.9:1 on paper  */
  --rule:   #e4e1d8;

  /* Type */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Fallback chain, in order of how close each lands: macOS ships Copperplate;
     some Windows/Office installs ship Copperplate Gothic Bold; Georgia is on
     every Windows and macOS box and its cap-height (.692) is within 1% of
     Copperplate CC's (.700), so a swap barely shifts the layout; Noto Serif
     covers Android, where Georgia does not exist. */
  --engrave: "Copperplate CC", Copperplate, "Copperplate Gothic Bold", Georgia, "Noto Serif", serif;
  --engrave-scale: 1.02;   /* cap-height compensation vs --sans */

  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.1rem + .35vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + .9vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.2vw, 4.8rem);

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --maxw: 1180px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--white);
  padding: .75rem 1.25rem; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; margin: 0; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -.005em; }
p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

/* ---------- The engraved layer ----------
   Copperplate carries the wordmark and every small tracked-caps label. It does
   NOT touch h1/h2/h3 or body copy: it has no true lowercase (lowercase maps to
   small caps), runs ~2x the width of the serif at the same optical size, and
   turns editorial headlines into monument inscriptions. Newsreader keeps the
   headlines; Instrument Sans keeps body and navigation. */
.brand__name,
.eyebrow,
.btn,
.nav__toggle,
.pillars h3,
.coverage h3,
.footer h3,
.founder__role,
.detail dt,
.field label,
.stats .lbl {
  font-family: var(--engrave);
  font-weight: 400;          /* single-weight face — never let the browser fake bold */
  font-synthesis: none;
}

/* Wide-tracked caps — the wordmark's signature gesture, reused as the label system.
   Tracking is far tighter than the sans version was: Copperplate builds the
   spacing into its sidebearings, so .22em on top of that falls apart. */
.eyebrow {
  font-size: calc(var(--step--1) * var(--engrave-scale));
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold-deep);
  margin: 0 0 1.4rem;
  line-height: 1.3;
  /* eyebrows are <p>, so they inherit the 68ch prose measure. In a centred hero
     that caps the box below the container width with no auto margins, and the
     label centres inside its own short box — visibly off-centre. */
  max-width: none;
}
.eyebrow--light { color: var(--gold); }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--slate); }

/* ---------- The balance axis: recurring structural device ---------- */
.axis {
  display: flex; align-items: center; gap: 1rem;
  margin-block: clamp(2rem, 5vw, 3.5rem);
}
.axis::before, .axis::after { content: ""; height: 1px; background: var(--rule); flex: 1; }
.axis__node { width: 9px; height: 13px; color: var(--gold); flex: none; }
.axis--dark::before, .axis--dark::after { background: rgba(255,255,255,.18); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,250,247,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand__mark { width: 26px; color: var(--gold); flex: none; }
/* Uppercased explicitly. Copperplate CC is caps-only so this changes nothing in
   the webfont, but it keeps the wordmark in caps if a fallback serif renders. */
.brand__name {
  font-size: .86rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy); line-height: 1.18;
}
.brand__name span { display: block; letter-spacing: .07em; color: var(--gold-deep); font-size: .69rem; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav a {
  text-decoration: none; color: var(--slate);
  font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  padding-block: .4rem; border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav a:hover { color: var(--navy); border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); }

.nav__toggle {
  display: none; background: none; border: 1px solid var(--rule); border-radius: 2px;
  padding: .5rem .8rem; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy); cursor: pointer; line-height: 1.2;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-size: calc(var(--step--1) * var(--engrave-scale)); line-height: 1.2;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .95rem 2rem; border: 1px solid var(--navy); background: var(--navy); color: var(--white);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--navy-900); border-color: var(--navy-900); }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--navy-900); }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); text-align: center; }
.hero__mark { width: clamp(52px, 8vw, 78px); color: var(--gold); margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); }
.hero h1 { max-width: 16ch; margin-inline: auto; }
/* The home headline is three short sentences rather than one clause, so it needs
   a wider measure. 21ch (~898px) clears "Private Equity Expertise." (769px) but
   stays under "Private Equity Expertise. Energy." (1017px), so the break lands on
   a full stop and "Energy. Real Estate." rides the second line intact. ch scales
   with the fluid type size, so the ratio holds down to the 390px case. Scoped,
   because this measure splits "Global scale." on the Leadership headline. */
.hero h1.hero__headline--wide { max-width: 21ch; }
.hero h1 em { font-style: italic; color: var(--navy-600); }
.hero__sub { margin: 1.6rem auto 0; max-width: 46ch; color: var(--slate); font-size: var(--step-1); }
.hero .btn-row { justify-content: center; margin-top: 2.4rem; }
.hero--left { text-align: left; }
.hero--left h1 { margin-inline: 0; }
.hero--left .hero__sub { margin-inline: 0; }
.hero--left .hero__mark { margin-inline: 0; }

/* Intro, home page only: the two halves converge from opposite sides and meet
   to form the mark. Scoped to .hero__mark--intro, which appears on index.html
   and nowhere else, so the header and footer wordmarks stay static. A CSS
   animation runs once when the element first renders — so this plays on load
   and on refresh, and never re-triggers on scroll.
   overflow:visible lets the halves travel in from outside the mark's own box
   instead of being clipped at its edges; transform-box:fill-box makes the
   percentage resolve against each half's own width rather than the viewport. */
.hero__mark--intro { overflow: visible; }
.hero__mark--intro .mark-top,
.hero__mark--intro .mark-bottom {
  transform-box: fill-box;
  animation-duration: .72s;
  animation-timing-function: cubic-bezier(.2,.85,.3,1);
  animation-delay: .12s;
  animation-fill-mode: both;
}
.hero__mark--intro .mark-top    { animation-name: converge-from-right; }
.hero__mark--intro .mark-bottom { animation-name: converge-from-left; }

@keyframes converge-from-right {
  from { transform: translateX(72%);  opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes converge-from-left {
  from { transform: translateX(-72%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* must match the intro's two-class specificity, or it will not win */
  .hero__mark--intro .mark-top,
  .hero__mark--intro .mark-bottom { animation: none; transform: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Pillar strip ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.pillars > div { padding: 2rem 1.5rem 2rem 0; border-right: 1px solid var(--rule); }
.pillars > div:last-child { border-right: 0; }
.pillars > div:not(:first-child) { padding-left: 1.5rem; }
/* min-height reserves the second line so a heading that wraps ("Real estate
   development") keeps its description aligned with the other three columns */
.pillars h3 { font-size: calc(var(--step-0) * .9); letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; color: var(--navy); min-height: 2.6em; }
.pillars p { font-size: var(--step--1); color: var(--slate); margin: .5rem 0 0; }
.pillars > div { border-top: 2px solid transparent; transition: border-color .25s ease; }
.pillars > div:hover { border-top-color: var(--gold); }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.card figure { margin: 0 0 1.4rem; overflow: hidden; background: var(--rule); }
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .6s ease; }
.card:hover img { transform: scale(1.03); }
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--slate); font-size: var(--step-0); }

/* ---------- Split / prose ---------- */
.split { display: grid; grid-template-columns: minmax(0, 26ch) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.split__aside h2 { font-size: var(--step-2); }
.prose p { color: var(--slate); }
.prose p + p { margin-top: 0; }

/* ---------- Coverage list ---------- */
.coverage { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.coverage h3 { font-size: calc(var(--step--1) * var(--engrave-scale)); text-transform: uppercase; letter-spacing: .1em; color: var(--gold-deep); margin-bottom: .9rem; line-height: 1.3; }
.coverage ul { list-style: none; margin: 0; padding: 0; }
.coverage li { padding: .5rem 0; border-bottom: 1px solid var(--rule); color: var(--slate); font-size: var(--step--1); }
/* the coverage list lives inside a navy band — slate on navy is ~1.8:1 */
.band .coverage li { color: rgba(255,255,255,.78); border-bottom-color: rgba(255,255,255,.16); }

/* ---------- Founder blocks: mirrored across the axis ---------- */
.founder { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.founder--flip .founder__media { order: 2; }
/* order:2 moves the portrait to the second column, so the column widths have to
   mirror too — otherwise the bio inherits the 300px track and the photo blows up */
.founder--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.founder__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--rule);
  /* headshots: bias the crop upward so any vertical trim comes off the
     chest, never the top of the head. Sann's portrait is 0.67 native
     against a 0.75 box, so ~11% of its height is cropped even here. */
  object-position: 50% 20%; }
.founder__role { font-size: calc(var(--step--1) * var(--engrave-scale)); text-transform: uppercase; letter-spacing: .1em; color: var(--gold-deep); margin: .6rem 0 1.4rem; line-height: 1.3; }
.founder h2 { font-size: var(--step-2); }
.founder p { color: var(--slate); font-size: var(--step-0); }

/* ---------- Dark band ---------- */
.band { background: var(--navy); color: var(--white); }
.band h2, .band h3 { color: var(--white); }
.band p { color: rgba(255,255,255,.76); }
.band--deep { background: var(--navy-900); }
.cta { text-align: center; }
.cta h2 { max-width: 20ch; margin-inline: auto; }
.cta p { margin: 1.2rem auto 2.2rem; max-width: 46ch; }
.cta .btn-row { justify-content: center; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: left; }
.stats .fig { font-family: var(--display); font-size: var(--step-3); color: var(--gold); line-height: 1; }
/* the longest labels on the site — tracking stays tight so they hold two lines */
.stats .lbl { font-size: calc(var(--step--1) * .95); color: rgba(255,255,255,.72); margin-top: .8rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.4rem; max-width: 34rem; }
.field label {
  display: block; font-size: calc(var(--step--1) * var(--engrave-scale)); text-transform: uppercase;
  letter-spacing: .09em; color: var(--navy); margin-bottom: .55rem; line-height: 1.3;
}
.field input, .field textarea, .field select {
  width: 100%; font: inherit; color: var(--ink);
  padding: .95rem 1rem; background: var(--white);
  border: 1px solid var(--rule); border-radius: 0;
  transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); }
.field textarea { min-height: 9rem; resize: vertical; }
.field .hint { font-size: var(--step--1); color: var(--slate); margin-top: .45rem; }

/* ---------- Contact detail list ---------- */
.detail { display: grid; gap: 1.6rem; }
.detail dt { font-size: calc(var(--step--1) * var(--engrave-scale)); text-transform: uppercase; letter-spacing: .1em; color: var(--gold-deep); line-height: 1.3; }
.detail dd { margin: .4rem 0 0; color: var(--slate); }
.detail a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ---------- Status note ---------- */
.note {
  border: 1px solid var(--rule); border-left: 3px solid var(--gold);
  padding: 1.6rem 1.8rem; background: var(--white);
}
.note h3 { font-family: var(--sans); font-size: var(--step-0); font-weight: 600; margin-bottom: .5rem; }
.note p { color: var(--slate); font-size: var(--step--1); }

/* ---------- Footer ---------- */
.footer { background: var(--navy-900); color: rgba(255,255,255,.72); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.footer h3 { font-size: calc(var(--step--1) * var(--engrave-scale)); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin-bottom: 1.1rem; line-height: 1.3; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer a { color: rgba(255,255,255,.72); text-decoration: none; font-size: var(--step--1); }
.footer a:hover { color: var(--white); }
.footer .brand__name { color: var(--white); }
.footer .brand__name span { color: var(--gold); }  /* gold-deep is unreadable on navy-900 */
.footer .brand__mark { color: var(--gold); }
.footer__legal {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .78rem; color: rgba(255,255,255,.55);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .pillars > div { border-bottom: 1px solid var(--rule); }
  .pillars > div:nth-child(2n), .pillars > div:last-child { border-right: 0; }
  .grid-3, .coverage, .stats { grid-template-columns: 1fr 1fr; }
  .split, .grid-2, .founder { grid-template-columns: 1fr; }
  .founder--flip .founder__media { order: 0; }
  /* Single column lets the portrait span the full content width, which at
     this breakpoint would make a 3:4 portrait ~1104px tall. Cap the WIDTH
     to the desktop column instead of squashing the aspect ratio — the old
     16/10 override cropped 39-58% of these portraits' height and cut off
     the tops of their heads. */
  .founder__media { max-width: 300px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nav {
    display: none; position: absolute; inset: 76px 0 auto; flex-direction: column;
    align-items: flex-start; gap: 0; background: var(--paper);
    border-bottom: 1px solid var(--rule); padding: .5rem var(--gutter) 1.5rem;
  }
  .nav.is-open { display: flex; }
  .nav a { width: 100%; padding: .85rem 0; border-bottom: 1px solid var(--rule); }
  .nav__toggle { display: block; }
  /* a 375px header leaves 201px beside the Menu button; the wordmark measures
     181px at .8rem, so it holds one line with room to spare */
  .brand__name { font-size: .8rem; }
  .brand__name span { font-size: .64rem; }
  .brand { gap: .55rem; }
  .header__inner { position: relative; }
  /* Four sentences at full display size overflow a phone: the longest of them,
     "Private Equity Expertise.", needs ~448px on a 335px screen, so it wraps
     mid-phrase and runs to five lines. Trading some size for clean sentence
     breaks and three lines. */
  .hero h1.hero__headline--wide { font-size: clamp(1.8rem, 7.2vw, 2.6rem); }
  .grid-3, .coverage, .stats, .footer__top { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .pillars > div { border-right: 0; padding-left: 0 !important; }
  .btn { width: 100%; text-align: center; }
}

/* Founder signature scripts */
.sig { width: 92px; margin-top: 1.8rem; opacity: .85; mix-blend-mode: multiply; }
.band .sig { filter: invert(1); opacity: .7; }