/* ==========================================================================
   Castle Tower Consulting
   Palette taken directly from the firm's deck: navy #002060, orange #ED7D31.
   Single committed light/navy identity — no theme switching.
   ========================================================================== */

:root{
  /* brand */
  --navy:#002060;
  --navy-deep:#00102F;
  --navy-mid:#00214C;
  --navy-line:rgba(220,230,245,.16);
  --orange:#ED7D31;
  --orange-lift:#F59A5C;
  --orange-deep:#C2601D;

  /* neutrals, biased cool toward the navy */
  --paper:#FFFFFF;
  --paper-2:#F4F7FB;
  --rule:#D6DEE9;
  --ink:#0E1829;
  --ink-soft:#4A566D;
  --on-navy:#DCE6F5;
  --on-navy-soft:#93A8C8;

  --display:"Instrument Serif","Georgia","Times New Roman",serif;
  --body:"Source Serif 4","Georgia","Times New Roman",serif;

  --measure:64ch;
  --gutter:clamp(20px,5vw,56px);
}

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

html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:#fff;padding:12px 18px;font-size:15px;
}
.skip:focus{left:8px;top:8px;}

:where(a,button,input,textarea):focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gutter);}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--orange-deep);margin:0 0 20px;
}
.eyebrow-on-dark{color:var(--orange-lift);}

.section-h{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.4vw,42px);line-height:1.14;letter-spacing:-.012em;
  color:var(--navy);margin:0 0 20px;text-wrap:balance;max-width:22ch;
}
.section-h-dark{color:#fff;}
.section-sub{margin:0 0 44px;max-width:56ch;color:var(--ink-soft);}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:18px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
/* Two logo files, cross-faded: white wordmark over the hero, navy once the
   nav gains its light background. Keeps the castle orange in both states. */
.logo{display:grid;flex:none;width:150px;}
.logo img{grid-area:1/1;width:100%;height:auto;transition:opacity .25s ease;}
.logo .logo-nav{opacity:0;}
.nav.is-stuck .logo .logo-rev{opacity:0;}
.nav.is-stuck .logo .logo-nav{opacity:1;}

.navlinks{display:flex;align-items:center;gap:30px;font-size:15px;}
.navlinks a{
  text-decoration:none;color:var(--on-navy);
  padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.navlinks a:hover{border-bottom-color:var(--orange);}
.nav.is-stuck{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom-color:var(--rule);}
.nav.is-stuck .navlinks a{color:var(--ink-soft);}
.nav.is-stuck .navlinks a:hover{color:var(--navy);}
.nav-cta{
  border:1px solid rgba(237,125,49,.6)!important;
  background:rgba(237,125,49,.16);
  padding:8px 18px!important;color:#fff!important;
}
.nav.is-stuck .nav-cta{background:var(--orange);border-color:var(--orange)!important;color:#fff!important;}
@media(max-width:880px){
  .navlinks a:not(.nav-cta){display:none;}
  .logo{width:124px;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:min(760px,100svh);
  background:var(--navy-deep);
  color:var(--on-navy);
  display:flex;align-items:center;
  overflow:hidden;
  padding:150px 0 132px;
  isolation:isolate;
}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.hero canvas{touch-action:pan-y;}
/* The canvas paints its own ground, so the scrim only needs to settle the
   left column where the identity sits. It fades out before the globe. */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(0,16,47,.72) 0%,
    rgba(0,16,47,.48) 22%,
    rgba(0,16,47,.16) 42%,
    rgba(0,16,47,0)   60%);
}
@media(max-width:900px){
  /* Globe moves to the top on narrow screens; identity sits beneath it. */
  .hero-scrim{background:linear-gradient(180deg,
    rgba(0,16,47,.20) 0%, rgba(0,16,47,.72) 46%, rgba(0,16,47,.88) 100%);}
  .hero{
    align-items:flex-end;
    min-height:0;
    padding-top:clamp(300px,46vh,430px);
    padding-bottom:150px;
  }
  .identity-mark{margin-bottom:20px;}
}
/* Identity, not marketing copy: the mark, the name, the sectors. The globe
   carries the rest. Drags reach the canvas; the buttons stay clickable. */
.hero-body{
  position:relative;z-index:3;max-width:1180px;margin:0 auto;
  padding-inline:var(--gutter);width:100%;pointer-events:none;
}
.hero-body a{pointer-events:auto;}
.identity-mark{width:clamp(56px,6vw,78px);height:auto;margin-bottom:26px;}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,5.4vw,68px);line-height:1.04;letter-spacing:-.012em;
  color:#fff;margin:0;
}
.identity-rule{
  width:64px;height:2px;background:var(--orange);
  margin:28px 0 20px;border-radius:1px;
}
.identity-sectors{
  margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--on-navy-soft);
}
.identity-line{
  margin:22px auto 0;max-width:34ch;
  font-size:clamp(16px,1.5vw,19px);font-weight:300;line-height:1.55;
  color:var(--on-navy);
  text-shadow:0 1px 20px rgba(0,10,30,.8);
}

/* --- handling the globe: everything above it recedes ------------------- */
.nav,.hero-body,.hero-scrim{transition:opacity .45s cubic-bezier(.4,0,.2,1);}
body.globe-engaged .nav{opacity:.14;}
body.globe-engaged .hero-body{opacity:.08;}
body.globe-engaged .hero-scrim{opacity:.2;}
body.globe-engaged .hero-body{pointer-events:none;}
@media(prefers-reduced-motion:reduce){
  .nav,.hero-body,.hero-scrim{transition:none;}
}

/* =======================================================================
   HERO FRAMINGS — pick one with ?frame=, compare with ?compare=1
   ======================================================================= */

/* 1 · Centred — the whole globe, uncropped, with the identity centred on it.
   A soft radial scrim sits under the type so the name reads over the ocean
   without flattening the sphere. */
.hero.frame-center{
  min-height:min(940px,100svh);
  padding:0;
  align-items:center;
}
.hero.frame-center .hero-body{text-align:center;}
.hero.frame-center .identity-mark{margin-inline:auto;}
.hero.frame-center h1{
  font-size:clamp(38px,6vw,78px);
  letter-spacing:-.022em;line-height:1.0;
  text-shadow:0 2px 30px rgba(0,10,30,.65);
}
.hero.frame-center .identity-rule{margin-inline:auto;}
.hero.frame-center .identity-sectors{
  font-size:12.5px;letter-spacing:.28em;
  text-shadow:0 1px 16px rgba(0,10,30,.8);
}
.hero.frame-center .hero-scrim{
  background:radial-gradient(ellipse 46% 42% at 50% 47%,
    rgba(0,14,40,.80) 0%,
    rgba(0,14,40,.52) 46%,
    rgba(0,14,40,.10) 78%,
    rgba(0,14,40,0) 100%);
}

/* 2 · Left — identity holds the left column, globe sits right. */
.hero.frame-left .hero-body{text-align:left;}

/* 3 · Quiet — the globe is the subject; the name recedes to a small,
   confident lockup with no rule and no sector line. */
.hero.frame-quiet .identity-mark{width:clamp(40px,3.6vw,52px);margin-bottom:18px;}
.hero.frame-quiet h1{font-size:clamp(26px,2.9vw,38px);letter-spacing:.005em;}
.hero.frame-quiet .identity-rule{display:none;}
.hero.frame-quiet .identity-sectors{margin-top:14px;font-size:11px;opacity:.75;}
.hero.frame-quiet .hero-scrim{
  background:linear-gradient(96deg,
    rgba(0,16,47,.80) 0%, rgba(0,16,47,.42) 26%, rgba(0,16,47,0) 52%);
}

/* switcher — only ever present with ?compare=1 */
.hero-switch{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;align-items:center;gap:4px;
  background:rgba(0,16,47,.94);border:1px solid rgba(220,230,245,.22);
  padding:7px 8px;box-shadow:0 6px 24px rgba(0,16,47,.3);
}
.hero-switch span{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-navy-soft);padding:0 10px 0 6px;
}
.hero-switch a{
  font-size:13px;color:var(--on-navy);text-decoration:none;
  padding:6px 12px;border:1px solid transparent;white-space:nowrap;
}
.hero-switch a:hover{border-color:rgba(220,230,245,.3);}
.hero-switch a.is-on{background:var(--orange);color:#fff;font-weight:600;}
@media(max-width:700px){ .hero-switch span{display:none;} }

/* --- city clock ------------------------------------------------------- */
.globe-tip{
  position:absolute;z-index:6;pointer-events:none;
  transform:translate(14px,-50%);
  display:grid;gap:2px;
  /* display:grid would otherwise beat the UA [hidden] rule */
  background:rgba(0,14,40,.93);
  border:1px solid rgba(186,212,246,.28);
  border-left:2px solid var(--orange);
  padding:9px 14px 10px;
  box-shadow:0 8px 28px rgba(0,10,30,.45);
  min-width:132px;
}
.globe-tip[hidden]{display:none;}
.globe-tip.is-flipped{transform:translate(-100%,-50%) translateX(-14px);}
.globe-tip-city{
  font-family:var(--display);font-size:17px;color:#fff;line-height:1.15;
}
.globe-tip-time{
  font-size:22px;color:var(--orange-lift);line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.globe-tip-zone{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-navy-soft);
}

.btn{
  display:inline-block;font-family:var(--body);font-size:15px;
  padding:13px 26px;text-decoration:none;transition:background .2s,border-color .2s,color .2s;
  cursor:pointer;border:1px solid transparent;
}
.btn-solid{background:var(--orange);color:#fff;font-weight:600;}
.btn-solid:hover{background:var(--orange-deep);}
.btn-ghost{border-color:rgba(220,230,245,.4);color:var(--on-navy);}
.btn-ghost:hover{border-color:var(--on-navy);color:#fff;}

/* --- at a glance: sits on the paper below the hero, not over the globe --- */
.stats-band{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  padding:clamp(38px,4.6vw,58px) 0;
}
.stats{display:grid;grid-template-columns:repeat(5,1fr);margin:0 auto;}
.stats > div{padding-inline:34px;border-left:1px solid var(--rule);}
.stats > div:first-child{padding-left:0;border-left:0;}
.stats dt{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,3.4vw,44px);line-height:1.05;color:var(--navy);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.stats dd{
  margin:10px 0 0;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.5;max-width:22ch;
}
@media(max-width:860px){
  .stats{grid-template-columns:1fr 1fr;gap:32px 0;}
  .stats > div:nth-child(3){padding-left:0;border-left:0;}
}
@media(max-width:520px){
  .stats{grid-template-columns:1fr;gap:26px;}
  .stats > div{padding-left:0;border-left:0;}
}
@media(max-width:620px){ .hero{padding:132px 0 96px;} }

/* ---------- bands ---------- */
.band{padding:clamp(72px,9vw,124px) 0;}
.band-light{background:var(--paper);}
.band-tint{background:var(--paper-2);border-block:1px solid var(--rule);}
.band-dark{background:var(--navy);color:var(--on-navy);}

/* ---------- the firm ---------- */
.firm-grid{display:grid;gap:8px 64px;}
@media(min-width:900px){ .firm-grid{grid-template-columns:1fr 1fr;} }
.firm-copy p{margin:0 0 18px;color:var(--ink-soft);max-width:var(--measure);}
.firm-copy p:last-child{margin-bottom:0;}

.vm{display:grid;gap:36px;margin-top:64px;padding-top:44px;border-top:1px solid var(--rule);}
@media(min-width:760px){ .vm{grid-template-columns:1fr 1fr;gap:64px;} }
.vm h3{
  font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--orange-deep);margin:0 0 12px;
}
.vm p{margin:0;color:var(--ink-soft);}

/* ---------- services ---------- */
.services{display:grid;gap:0;border-top:1px solid var(--rule);}
@media(min-width:860px){ .services{grid-template-columns:1fr 1fr;} }
.service{padding:38px 0;border-bottom:1px solid var(--rule);}
@media(min-width:860px){
  .service{padding:40px 48px 44px 0;}
  .service + .service{padding-left:48px;border-left:1px solid var(--rule);padding-right:0;}
}
.service h3{
  font-family:var(--display);font-weight:400;font-size:25px;color:var(--navy);
  margin:0 0 18px;line-height:1.2;
}
.service ul{margin:0;padding:0;list-style:none;}
.service li{
  position:relative;padding-left:22px;margin-bottom:13px;color:var(--ink-soft);
  max-width:46ch;
}
.service li::before{
  content:"";position:absolute;left:0;top:.68em;
  width:9px;height:1px;background:var(--orange);
}
.service li:last-child{margin-bottom:0;}

/* ---------- track record ---------- */
.sectors{display:grid;gap:56px;}
@media(min-width:900px){ .sectors{grid-template-columns:1fr 1fr;gap:72px;} }
.sector > header{padding-bottom:22px;border-bottom:1px solid var(--navy-line);margin-bottom:8px;}
.sector h3{
  font-family:var(--display);font-weight:400;font-size:27px;color:#fff;margin:0 0 8px;
}
.sector > header p{margin:0;color:var(--on-navy-soft);font-size:15.5px;max-width:44ch;}
.deals{list-style:none;margin:0;padding:0;}
.deals li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:20px 0;border-bottom:1px solid rgba(220,230,245,.09);
}
.deals li:last-child{border-bottom:0;}
.deals p{margin:0;color:var(--on-navy);font-size:16px;line-height:1.55;}
.deals b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;}
.chip{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:4px 9px;margin-top:3px;white-space:nowrap;
  color:var(--on-navy-soft);border:1px solid rgba(220,230,245,.22);
}
.chip-now{color:#fff;background:var(--orange);border-color:var(--orange);}

/* ---------- founder ---------- */
.founder{display:grid;gap:44px;}
@media(min-width:900px){ .founder{grid-template-columns:300px 1fr;gap:64px;align-items:start;} }
.portrait{margin:0;}
.portrait img{
  width:100%;height:auto;
  filter:saturate(.92);
  border-bottom:3px solid var(--orange);
}
.portrait figcaption{
  margin-top:16px;font-family:var(--display);font-size:22px;color:var(--navy);line-height:1.25;
}
.portrait figcaption span{
  display:block;font-family:var(--body);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:6px;
}
.bio p{margin:0 0 18px;color:var(--ink-soft);max-width:var(--measure);}
.bio p:last-child{margin-bottom:0;}

/* ---------- approach ---------- */
.pull{
  margin:0 0 64px;padding:0 0 0 26px;border-left:2px solid var(--orange);
  font-family:var(--display);font-weight:400;
  font-size:clamp(24px,3.1vw,36px);line-height:1.28;color:var(--navy);
  max-width:24ch;text-wrap:balance;
}
.principles{display:grid;gap:34px;}
@media(min-width:640px){ .principles{grid-template-columns:1fr 1fr;gap:38px 56px;} }
@media(min-width:1040px){ .principles{grid-template-columns:repeat(4,1fr);gap:44px;} }
.principles h3{
  font-family:var(--display);font-weight:400;font-size:21px;color:var(--navy);
  margin:0 0 8px;line-height:1.25;padding-top:16px;border-top:1px solid var(--rule);
}
.principles p{margin:0;color:var(--ink-soft);font-size:15.5px;}

.values{margin-top:72px;padding-top:44px;border-top:1px solid var(--rule);}
.values-label{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--orange-deep);margin:0 0 26px;
}
.values dl{display:grid;gap:26px 48px;margin:0;}
@media(min-width:640px){ .values dl{grid-template-columns:1fr 1fr;} }
@media(min-width:1040px){ .values dl{grid-template-columns:repeat(4,1fr);} }
.values dt{font-family:var(--display);font-size:20px;color:var(--navy);margin-bottom:5px;}
.values dd{margin:0;color:var(--ink-soft);font-size:15.5px;}

/* ---------- contact ---------- */
.contact{display:grid;gap:52px;}
@media(min-width:940px){ .contact{grid-template-columns:1fr 1fr;gap:88px;align-items:start;} }
.contact-copy{margin:0 0 36px;color:var(--on-navy);max-width:44ch;}

/* ---------- footer ---------- */
.footer{background:var(--navy-deep);color:var(--on-navy-soft);padding:52px 0 60px;}
.footer-inner{display:grid;gap:32px;}
@media(min-width:860px){ .footer-inner{grid-template-columns:190px 1fr;gap:64px;align-items:start;} }
.footer-logo{width:150px;height:auto;filter:brightness(0) invert(1);opacity:.9;}
.footer-legal{
  margin:0 0 16px;font-size:13.5px;line-height:1.6;max-width:78ch;color:var(--on-navy-soft);
}
.footer-copy{margin:0;font-size:13px;}

/* =======================================================================
   APPLE PASS — restraint, centring and air across the whole page.
   Stated once, centred, with room around it. Overrides sit at the end so
   they win the cascade without touching the base rules above.
   ======================================================================= */

.band{padding:clamp(96px,13vw,190px) 0;}

/* Section openers are centred and given room, the way a product page
   states one thing per screen. */
.band .eyebrow{text-align:center;margin-bottom:26px;}
.band .section-h{
  margin-inline:auto;text-align:center;max-width:18ch;
  font-size:clamp(34px,4.4vw,58px);line-height:1.06;letter-spacing:-.02em;
}
.band .section-sub{
  margin:22px auto 0;text-align:center;max-width:48ch;
  font-size:clamp(17px,1.6vw,20px);font-weight:300;line-height:1.6;
}

/* The Firm — one centred statement, then the copy in a narrow column. */
.firm-grid{display:block;}
.firm-copy{
  margin:36px auto 0;max-width:62ch;text-align:center;
  font-size:clamp(16.5px,1.5vw,18.5px);font-weight:300;line-height:1.7;
}
.firm-copy p{margin:0 0 20px;max-width:none;}
.vm{
  margin-top:clamp(72px,9vw,120px);padding-top:0;border-top:0;
  gap:clamp(48px,6vw,90px);text-align:center;
}
.vm h3{margin-bottom:16px;}
.vm p{font-size:17px;font-weight:300;line-height:1.65;margin-inline:auto;max-width:40ch;}

/* What We Do — two quiet columns, no dividing rules, plenty of air. */
.services{
  border-top:0;margin-top:clamp(64px,8vw,104px);
  gap:clamp(48px,6vw,96px);
}
.service{padding:0!important;border:0!important;}
.service h3{
  font-size:clamp(23px,2.2vw,29px);margin-bottom:22px;
  text-align:center;
}
.service ul{max-width:38ch;margin-inline:auto;}
.service li{font-size:16.5px;font-weight:300;line-height:1.6;margin-bottom:16px;}

/* Founder — portrait centred above a narrow column of text. */
.founder{
  display:block;text-align:center;
  margin-top:clamp(56px,7vw,88px);
}
.portrait{max-width:280px;margin:0 auto clamp(36px,4vw,56px);}
.portrait figcaption{margin-top:20px;}
.bio{max-width:64ch;margin-inline:auto;}
.bio .section-h{margin-bottom:32px;}
.bio p{
  font-size:clamp(16.5px,1.5vw,18px);font-weight:300;line-height:1.72;
  max-width:none;
}

/* Approach — the quote centred and given the screen. */
.pull{
  margin:clamp(48px,6vw,80px) auto clamp(72px,9vw,112px);
  padding:0;border-left:0;text-align:center;
  max-width:22ch;font-size:clamp(30px,3.8vw,50px);line-height:1.14;
  letter-spacing:-.018em;
}
.principles{gap:clamp(44px,5vw,72px);text-align:center;}
.principles h3{border-top:0;padding-top:0;font-size:22px;margin-bottom:12px;}
.principles p{font-size:16px;font-weight:300;margin-inline:auto;max-width:30ch;}
.values{
  margin-top:clamp(80px,10vw,132px);padding-top:clamp(56px,6vw,80px);
  text-align:center;
}
.values-label{text-align:center;}
.values dl{gap:clamp(36px,4vw,56px);}
.values dd{font-size:16px;font-weight:300;margin-inline:auto;max-width:28ch;}

/* Contact — a single centred column. */
.contact{display:block;text-align:center;}
.contact-copy{margin:22px auto 44px;max-width:46ch;font-size:18px;font-weight:300;}

/* At a glance — centred figures with air, no dividing rules. */
.stats-band{padding:clamp(64px,8vw,104px) 0;}
.stats{gap:clamp(32px,4vw,48px);text-align:center;}
.stats > div{padding-inline:0!important;border-left:0!important;}
.stats dd{margin-inline:auto;}

/* Buttons: Apple's pill, not a rectangle. */
.btn{border-radius:980px;padding:14px 30px;font-size:15.5px;}
.nav-cta{border-radius:980px;}

.footer{padding:clamp(64px,7vw,96px) 0 clamp(72px,8vw,104px);}

/* The name reads as one line, shrinking with the viewport rather than
   breaking. It only wraps on the very narrowest screens. */
.hero.frame-center h1{
  font-size:clamp(26px,5.4vw,72px);
  white-space:nowrap;
}
@media(max-width:360px){
  .hero.frame-center h1{white-space:normal;}
}
.band .section-h{max-width:20ch;}

/* =======================================================================
   LEFT FRAMING — identity holds the left column, globe the right half.
   The name stays on one line and the column is capped so it can never run
   under the sphere. The globe is sized to sit whole inside the hero at
   rest; pinching past 1x may overflow, but zoomed out it is always entire.
   ======================================================================= */
.hero.frame-left .hero-body{text-align:left;}
.hero.frame-left .identity{max-width:min(560px,44vw);}
.hero.frame-left .identity-mark{margin:0 0 22px;width:clamp(44px,4.2vw,58px);}
.hero.frame-left h1{
  /* Instrument Serif sets narrow, so the name can carry real size and still
     leave clear air before the sphere. Measured: ~490px of ink at 64px. */
  font-size:clamp(24px,4.4vw,64px);
  line-height:1.02;letter-spacing:-.018em;
  white-space:nowrap;
  text-shadow:none;
  margin:0;
}
.hero.frame-left .identity-rule{margin:24px 0 18px;}
.hero.frame-left .identity-sectors{
  font-size:clamp(10px,0.95vw,11.5px);letter-spacing:.26em;text-shadow:none;
}
.hero.frame-left .identity-line{
  margin:18px 0 0;max-width:32ch;
  font-size:clamp(15.5px,1.35vw,18px);text-shadow:none;
}
.hero.frame-left .hero-scrim{
  background:linear-gradient(96deg,
    rgba(0,16,47,.78) 0%,
    rgba(0,16,47,.46) 24%,
    rgba(0,16,47,.12) 44%,
    rgba(0,16,47,0)   62%);
}
@media(max-width:900px){
  /* stacked: globe up top, identity beneath it, centred */
  .hero.frame-left .hero-body{text-align:center;}
  .hero.frame-left .identity{max-width:none;}
  .hero.frame-left .identity-mark{margin-inline:auto;}
  .hero.frame-left .identity-rule{margin-inline:auto;}
  .hero.frame-left .identity-line{margin-inline:auto;}
}

/* =======================================================================
   CENTRE FRAMING (final) — identity stacked above, globe filling the space
   beneath it. Nothing overlaps; the sphere stays whole at rest and pinching
   out always reveals it entire. The identity block is kept deliberately
   compact so the globe gets the larger share of the opening screen.
   ======================================================================= */
.hero.frame-center{
  /* fills the window exactly, so the sphere runs all the way to the fold and
     no band of the next section shows through */
  min-height:100vh;
  /* lvh, not dvh. dvh tracks the viewport as a phone's URL bar hides and
     returns, so every scroll resized the hero, refired the ResizeObserver
     below it, and made the sphere jump mid-scroll. lvh is the height with the
     bar hidden: a fixed number that never changes on scroll, and tall enough
     that the opening screen is always fully covered. */
  min-height:100lvh;
  padding:0;
  align-items:flex-start;
}
.hero.frame-center .hero-body{
  /* the name sits nearer the middle of the opening screen, with the sphere
     hung beneath it */
  padding-top:clamp(150px,24vh,290px);
  text-align:center;
}
.hero.frame-center .identity{
  display:block;max-width:none;margin-inline:auto;
}
.hero.frame-center .identity-mark{
  width:clamp(38px,3.4vw,48px);margin:0 auto 14px;
}
.hero.frame-center h1{
  font-size:clamp(26px,5.2vw,68px);
  line-height:1;letter-spacing:-.022em;
  white-space:nowrap;
  text-shadow:none;
  margin:0;
}
.hero.frame-center .identity-rule{margin:18px auto 14px;width:52px;}
.hero.frame-center .identity-sectors{
  font-size:clamp(10px,1vw,12px);letter-spacing:.28em;text-shadow:none;
}
.hero.frame-center .identity-line{
  margin:14px auto 0;max-width:42ch;
  font-size:clamp(15.5px,1.4vw,18px);text-shadow:none;
}
/* the type sits on plain navy now, so no scrim is needed over the sphere */
.hero.frame-center .hero-scrim{display:none;}
@media(max-width:360px){ .hero.frame-center h1{white-space:normal;} }

/* Three service columns now, not two. */
@media(min-width:860px){
  .services{grid-template-columns:repeat(3,1fr);}
}
.service ul{max-width:34ch;}
.service li{margin-bottom:13px;}
/* The principles sit under the columns as a quiet closing row. */
.principles{margin-top:clamp(64px,8vw,104px);}

/* =======================================================================
   AT A GLANCE — short labels only. The qualifier that made two of these
   four lines long now sits once, under the row, as a footnote in sentence
   case. Letterspaced uppercase is for two or three words, not a sentence.
   ======================================================================= */
.stats-band{padding:clamp(56px,6.5vw,84px) 0 clamp(44px,5vw,64px);}
.stats{align-items:start;}
.stats > div{display:grid;justify-items:center;}
.stats dd{
  max-width:15ch;margin-top:12px;
  font-size:11px;letter-spacing:.13em;line-height:1.55;
  text-wrap:balance;hyphens:none;
}
.stats-note{
  margin:clamp(28px,3.4vw,42px) auto 0;
  max-width:52ch;text-align:center;
  font-size:13.5px;line-height:1.6;font-weight:300;
  color:var(--ink-soft);opacity:.85;
}

/* The figures are the loudest evidence on the page, so let them carry real
   size. Labels stay small and quiet underneath; the qualifier sits once,
   below the row, rather than bloating two of the four labels. */
.stats dt{
  font-size:clamp(40px,5vw,72px);
  letter-spacing:-.022em;line-height:1;
}
.stats dd{
  max-width:18ch;margin-top:14px;
  font-size:10.5px;letter-spacing:.16em;line-height:1.6;
  color:var(--ink-soft);
}
.stats{gap:clamp(36px,4.5vw,56px);}

/* The figures now sit inside The Firm as evidence for the claim above them,
   rather than floating in a band of their own between the hero and the first
   piece of content. Subordinate to the section heading, so a step smaller. */
.band .stats{
  margin-top:clamp(44px,5.5vw,72px);
  padding-top:clamp(40px,4.5vw,56px);
  border-top:1px solid var(--rule);
}
.band .stats dt{font-size:clamp(34px,4vw,54px);}

/* `ch` is the width of the "0" glyph, so 18ch resolved to ~95px here — far
   narrower than the 225px column, which forced a three-line label. Sized in
   px against the actual column instead. */
.band .stats dd{max-width:180px;letter-spacing:.14em;}

/* The gap under the hero was ~187px of empty white before the first word.
   Pulled in, and the band that meets the hero is tightened further still. */
.band{padding:clamp(72px,8.5vw,128px) 0;}
/* With the eyebrow gone the heading became the first thing in the section and
   sat ~37px higher, so the top padding takes that back and the block reads at
   the same height it did before. */
#firm{padding-top:clamp(72px,8vw,104px);}

/* Same as The Firm: with the eyebrow gone the heading is now first in the
   section, so the top padding takes back the height it used to occupy. */
#contact{padding-top:clamp(72px,8vw,104px);}

/* =======================================================================
   CONTACT — split. Heading, copy and the email address hold the left
   column; the form sits on the right. The Apple pass had centred this
   whole block, so these override it back to a two-column, left-set layout.
   ======================================================================= */
#contact .contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(48px,6vw,96px);
  align-items:start;
  text-align:left;
}
#contact .section-h{
  margin:0 0 0;text-align:left;margin-inline:0;max-width:15ch;
}
#contact .contact-copy{margin:24px 0 40px;max-width:40ch;}

@media(max-width:940px){
  #contact .contact{grid-template-columns:1fr;gap:clamp(40px,7vw,64px);}
}

/* The contact heading is now a question rather than an instruction, so it
   runs longer. Sized down a step and unconstrained so the column governs
   its wrapping instead of a character cap. */
#contact .section-h{font-size:clamp(26px,3.1vw,42px);max-width:none;line-height:1.12;}
#contact .contact-copy{font-size:19px;max-width:34ch;}

/* Contact was carrying a lot of dead air: band padding plus generous gaps
   between every block. Tightened top, bottom and the internal rhythm. */
#contact{padding-top:clamp(56px,6vw,80px);padding-bottom:clamp(56px,6vw,84px);}
#contact .contact{gap:clamp(40px,5vw,72px);}
#contact .contact-copy{margin:18px 0 30px;}

/* The header is fixed, so an anchor jump would otherwise park the section's
   top edge underneath it and crowd the heading. Offset every scroll target
   by the header's height. */
#top,#firm,#contact{scroll-margin-top:100px;}

/* The left column is roughly half the form's height, so top-aligning them
   left a large void beneath the email. Centring the pair distributes that
   difference above and below instead of dumping it all at the bottom. */
#contact .contact{align-items:center;}
/* A touch more presence on the heading, which also closes the gap. */
#contact .section-h{font-size:clamp(28px,3.4vw,46px);}
/* More room under the fixed header when the anchor is jumped to. */
#top,#firm,#contact{scroll-margin-top:132px;}

/* Anchor jumps land the section's top edge flush with the header's bottom
   edge. --nav-h is measured and published by main.js. */
#top,#firm,#contact{scroll-margin-top:var(--nav-h,97px);}

/* The three service columns were misaligned in two ways:
   1. centred headings sitting over left-aligned bullet lists, and
   2. "Capital Structuring & Placement" wrapping to two lines while the other
      two headings take one, so its list started 35px lower than the others.
   Headings are now left-set to match their lists, and reserve two lines'
   height so all three lists begin on the same line. */
#firm .service h3{
  text-align:left;
  min-height:2.4em;      /* two lines at the heading's 1.2 line-height */
  margin-bottom:20px;
}
#firm .service ul{margin-inline:0;max-width:none;}
#firm .service li{max-width:32ch;}

/* Title introducing the three service columns, carrying the same hairline
   divider the figures use so the section reads in consistent bands. */
#firm .services-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(24px,2.7vw,36px);
  line-height:1.15;letter-spacing:-.014em;
  color:var(--navy);text-align:center;
  margin:clamp(56px,6.5vw,88px) 0 clamp(32px,4vw,48px);
  padding-top:clamp(40px,4.5vw,56px);
  border-top:1px solid var(--rule);
}
#firm .services{margin-top:0;}

/* Title sits left, flush with the first column's edge. */
#firm .services-title{text-align:left;}

/* Bring the statement, intro and figures up: less dead air above the section
   and a tighter step down to the figures. */
#firm{padding-top:clamp(32px,3.8vw,56px);}
#firm .stats{
  margin-top:clamp(32px,4vw,52px);
  padding-top:clamp(30px,3.4vw,42px);
}
#firm .section-sub{margin-top:18px;}

/* The rule above the figures sat 42px off them, the rule below 88px — so the
   row looked pushed up inside its band. Matched so the figures sit centred
   between the two hairlines. */
#firm .services-title{margin-top:clamp(30px,3.4vw,42px);}

/* The section was changing axis partway down: heading, intro and figures
   centred, then Capabilities and the columns left-aligned. One left edge for
   the whole section instead, so nothing resets mid-read. */
#firm .section-h{
  text-align:left;margin-inline:0;max-width:24ch;
}
#firm .section-sub{
  text-align:left;margin-inline:0;max-width:64ch;
}
#firm .stats > div{justify-items:start;}
#firm .stats dd{margin-inline:0;text-align:left;}

/* =======================================================================
   THE FIRM — centred throughout. The dash markers are dropped with it: a
   left-hanging rule in front of centred text reads as broken alignment,
   so the bullets become centred lines instead.
   ======================================================================= */
#firm .section-h{text-align:center;margin-inline:auto;max-width:22ch;}
#firm .section-sub{text-align:center;margin-inline:auto;max-width:58ch;}
#firm .stats > div{justify-items:center;}
#firm .stats dd{margin-inline:auto;text-align:center;}
#firm .services-title{text-align:center;}
#firm .service h3{text-align:center;}
#firm .service ul{margin-inline:auto;max-width:30ch;}
#firm .service li{
  padding-left:0;text-align:center;max-width:none;margin-inline:auto;
}
#firm .service li::before{display:none;}

/* Top-align the two contact columns so the heading starts level with the
   form's first field rather than sitting centred and dropping ~112px. */
#contact .contact{align-items:start;}

/* Five figures now. On the two-column tablet grid the fifth would be orphaned
   in the left column, so it spans the row and centres under the other four. */
@media(max-width:860px){
  .stats > div:nth-child(5){grid-column:1 / -1;}
}

/* With five figures the columns are ~169px, and at the old label size
   "Founder's transaction experience" broke over three lines while its
   neighbours took one — a ragged bottom edge across the row. The labels are
   sized to the narrower column and every block is held to two lines, so the
   five bottoms line up against the rule below. */
#firm .stats dd{
  max-width:none;
  line-height:1.6;
  min-height:calc(2 * 1.6em);
}
/* The smaller size is only needed where the row is five-across. Below that the
   grid drops to two columns and then one, where the columns are wide and the
   label should go back to its normal size. */
@media(min-width:861px){
  #firm .stats dd{font-size:9.5px;letter-spacing:.11em;}
}

/* =======================================================================
   HERO RE-CENTRED — the button is gone
   ======================================================================= */

/* The lockup used to be name / rule / sectors / one-liner / button, and it was
   positioned so that group sat centred. Removing the button took ~92px off the
   bottom of the group, which dropped its optical centre 46px and left the text
   riding high with the globe hanging below it. The top padding takes that back
   so the remaining four elements sit centred where the five used to.

   Only above 720px tall: on short screens the globe's radius is limited by the
   space under the text (`availH * 3` in main.js), so spending 45px there would
   shrink the sphere rather than move the type. Short screens keep today's
   framing. */
@media(min-height:720px){
  .hero.frame-center .hero-body{padding-top:clamp(180px,29vh,300px);}
}

/* "Turning smart strategy into executable capital / solutions." broke with a
   single word stranded on the second line — under a centred lockup that reads
   as a mistake rather than a line break. Balanced, it splits evenly. */
.hero.frame-center .identity-line{text-wrap:balance;}

/* =======================================================================
   CONTACT — the form is gone, so the address is the section. Centred, and
   set in the display face at heading scale: it is the only thing to act on
   here, so it should read as the call to action rather than fine print.
   ======================================================================= */
#contact .contact{display:block;text-align:center;}
#contact .section-h{text-align:center;margin-inline:auto;max-width:22ch;}
#contact .contact-copy{
  text-align:center;margin:22px auto 0;max-width:46ch;
  font-size:19px;font-weight:300;
}
.contact-email{
  display:inline-block;margin-top:clamp(26px,3.2vw,40px);
  font-family:var(--display);font-weight:400;
  font-size:clamp(21px,3vw,36px);letter-spacing:-.01em;
  color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(237,125,49,.55);padding-bottom:6px;
  transition:border-color .25s ease,color .25s ease;
}
.contact-email:hover{border-bottom-color:var(--orange);color:var(--orange-lift);}

/* =======================================================================
   FOOTER — centred, to sit on the same axis as everything above it. It was
   the last left-aligned block on an otherwise centred page, which read as a
   layout accident rather than a decision. Three things only: the mark, the
   disclaimer, the copyright.

   Kept deliberately short: it carries no links and nothing to act on, so it
   is a sign-off, not a section. Most of its old height was padding — 154px
   of the 309 — so that is where the reduction comes from.
   ======================================================================= */
.footer{padding:clamp(34px,3.4vw,48px) 0 clamp(30px,3vw,40px);}
.footer-inner{
  display:block;text-align:center;
  grid-template-columns:none;        /* the two-column grid no longer applies */
}
.footer-logo{width:88px;margin:0 auto;display:block;opacity:.7;}
.footer-legal{
  margin:clamp(16px,1.8vw,22px) auto 0;max-width:72ch;
  font-size:12px;line-height:1.6;opacity:.7;
}
.footer-copy{margin:10px auto 0;font-size:12px;opacity:.48;}

/* At phone width the sector line broke as "TRANSPORTATION · ENERGY ·" over
   "INFRASTRUCTURE" — a separator left dangling at the end of the first line,
   and two very uneven lines (217px against 133px). Tightened just enough to
   set on a single line instead. */
@media(max-width:420px){
  .hero.frame-center .identity-sectors{font-size:9.5px;letter-spacing:.15em;}
}

/* On a phone the identity block sat well above centre — its middle landed at
   342px on an 812px screen, roughly 64px high — because the padding was tuned
   for a laptop. Dropped further down so the lockup reads as centred on the
   opening screen; the globe hangs from it and follows. */
@media(max-width:620px){
  .hero.frame-center .hero-body{
    /* svh, not vh. On a phone `vh` resolves against the LARGE viewport — the
       height with the URL bar hidden — but the screen you see on load is the
       SMALL one, with the bar showing. Measuring the padding against the
       taller viewport pushed the lockup and the globe below where they were
       tuned to sit. svh is the viewport as it actually is at load. */
    padding-top:clamp(160px,30vh,280px);        /* fallback for old browsers */
    padding-top:clamp(160px,30svh,280px);
  }

  /* The lockup was sized off a laptop's clamp floor, so on a phone it came out
     at the minimum of every range at once — a 26px name over a 38px mark —
     which read as small and timid on the one screen that is nothing but this
     lockup and the sphere. Scaled up as a group so the proportions hold. */
  .hero.frame-center .identity-mark{width:46px;margin-bottom:16px;}
  .hero.frame-center h1{font-size:30px;}
  .hero.frame-center .identity-rule{margin:16px auto 13px;width:58px;}
  .hero.frame-center .identity-line{font-size:17px;margin-top:15px;max-width:30ch;}
}