/* ============================================================
   Gold Circle Group - refinement layer
   Loaded after the inline <style> blocks, so equal-specificity
   rules win on order. Keep selectors simple and additive.
   ============================================================ */

:root{
  /* Gold, used properly - the firm is named for it */
  --gold:#C6A227;
  --gold-soft:#E0C46A;
  --gold-deep:#8A6B10;
  --gold-wash:#FBF7EA;
  --gold-line:rgba(198,162,39,.34);

  --blue:#13253D;
  --blue-2:#0E1A2B;
  --ink:#0C1624;
  --subink:#4A5668;
  --line:#E4EAF3;
  --paper:#F8FAFD;

  /* One spacing rhythm instead of six ad-hoc values */
  --sec:clamp(76px, 8vw, 118px);
  --s-s:0 8px 24px rgba(18,31,55,.07);
  --s-m:0 18px 44px rgba(18,31,55,.10);
}

/* ---------------------------------------------- display type */
/* The inline sheet sets these via `.hero h1, .section h1, h1, ...`, so a bare
   `h1` here loses on specificity. Mirror those compound selectors to match. */
h1, h2, h3, .pf-name, h1{ font-size:clamp(36px, 4.2vw, 56px); line-height:1.14; font-weight:500; letter-spacing:-.01em }
h2{ font-size:clamp(26px, 2.9vw, 38px); line-height:1.22; font-weight:500; letter-spacing:-.008em }
h3{ font-size:20px; line-height:1.36; font-weight:600; letter-spacing:-.003em }

p, li, .lead{ font-family:"Inter", system-ui, sans-serif }
.lead{ font-size:17.5px; line-height:1.75; color:var(--subink); max-width:62ch }

/* ------------------------------------------- gold eyebrow rule */
/* Section label as a structural divider: the label sits at the left and a gold
   hairline runs out to the edge of the column. Not a floating micro-tag. */
.caps{
  display:flex; align-items:center; gap:18px; width:100%;
  font-family:"Inter", sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  color:#5B6779; margin:0 0 24px;
}
.caps::before{ display:none }
.caps::after{
  content:""; flex:1 1 auto; height:1px; min-width:24px;
  background:linear-gradient(90deg, var(--gold), rgba(198,162,39,.14));
}
/* on the navy sections the rule and label both lift */
.anchor .caps, .anchor .caps::after, 
/* ------------------------------------------------- section rhythm */
/* Each of these carries an #id padding rule inline (36/40/44/46/48/50/66px),
   which outranks `main > section`. Normalise them to one rhythm at id level. */
main > section,
#whatwedo, #platforms, #focus, #approach, #about, #contact,
#team, #stewardship, #cta-band{
  padding-top:var(--sec); padding-bottom:var(--sec);
}
#home{ padding-top:calc(var(--sec) * .58); padding-bottom:calc(var(--sec) * .5) }
.divider{ background:linear-gradient(90deg, transparent, var(--gold-line), transparent); height:1px; margin:0 }

/* ------------------------------------------------------- buttons */
.btn{
  border-radius:999px; font-weight:600; letter-spacing:.01em;
  padding:13px 26px; transition:all .22s ease; border:1px solid transparent;
}
.btn:not(.light){ background:var(--blue); color:#fff }
.btn:not(.light):hover{
  background:var(--blue-2); border-color:var(--gold);
  box-shadow:0 6px 20px rgba(19,37,61,.24);
}
.btn.light{ background:#fff; color:var(--blue); border-color:var(--gold-line) }
.btn.light:hover{ background:var(--gold-wash); border-color:var(--gold) }

/* ---------------------------------------------------------- nav */
nav a::after{ background:var(--gold); height:1.5px }
nav a.is-current{ color:#fff }

/* -------------------------------------------------------- cards */
.card, .pf-item{
  border-radius:20px; border:1px solid var(--line);
  box-shadow:var(--s-s); position:relative; overflow:hidden;
}
.card::before, .pf-item::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.card:hover::before, .pf-item:hover::before{ transform:scaleX(1) }

/* ---------------------------------------------- photography frame */
/* Blanket rounding for editorial imagery. `.shot` is excluded - the :not()
   chain outranks `.member .shot`, which was squaring off the round headshots. */
.media, figure img{ border-radius:4px }
main img:not(.shot):not(.pf-logo img):not(.brandmark img){ border-radius:4px }

/* =============================================== proof / stat band */
@media (max-width:860px){
  }
@media (max-width:460px){
  }

/* ============================================ dark anchor section */
/* `.section.stewardship` (0,2,0) outranks a bare `.anchor`, so match it. */
.anchor, .section.anchor{
  background:linear-gradient(180deg, var(--blue), var(--blue-2));
  color:#EAF0F6; position:relative; overflow:hidden;
}
.anchor h2, .anchor h3, .section.anchor h2, .section.anchor .stewardship-heading{ color:#fff }
.anchor p, .section.anchor p{ color:#C3CEDD }
.anchor .caps, .section.anchor .caps{ color:var(--gold-soft) }
.anchor .caps::before{ background:var(--gold-soft) }
/* the "gold circle" - quiet brand motif, not decoration for its own sake */
.anchor::after{
  content:""; position:absolute; right:-140px; top:50%;
  width:460px; height:460px; transform:translateY(-50%);
  border:1px solid rgba(224,196,106,.26); border-radius:50%;
  pointer-events:none;
}
.anchor::before{
  content:""; position:absolute; right:-40px; top:50%;
  width:260px; height:260px; transform:translateY(-50%);
  border:1px solid rgba(224,196,106,.16); border-radius:50%;
  pointer-events:none;
}
.anchor blockquote, .anchor .quote, .section.anchor .stewardship-quote{
  font-family:"Montserrat", "Inter", sans-serif; font-weight:300;
  font-size:clamp(23px, 2.6vw, 34px); line-height:1.4;
  color:#fff; border:0; margin:14px auto 0; max-width:30ch;
}
.anchor .rule{
  width:54px; height:1px; background:var(--gold-soft);
  margin:26px 0 0; display:block;
}

/* ======================================================= our team */
.team-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:28px; margin-top:44px;
}
.member{
  display:grid; grid-template-columns:132px 1fr; gap:26px; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:28px; box-shadow:var(--s-s);
}
.member .shot{
  width:132px; height:132px; border-radius:50%; object-fit:cover;
  background:var(--gold-wash); border:1px solid var(--gold-line);
  display:block;
}
.member .shot.placeholder{
  display:flex; align-items:center; justify-content:center;
  font-family:"Montserrat", sans-serif; font-size:34px; color:var(--gold-deep);
}
.member h3{ margin:2px 0 3px }
.member .role{
  display:block; font-family:"Inter",sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold-deep);
  margin-bottom:12px;
}
.member p{ font-size:14.5px; line-height:1.72; margin:0 0 10px; color:var(--subink) }
@media (max-width:900px){
  .team-grid{ grid-template-columns:1fr }
}
@media (max-width:520px){
  .member{ grid-template-columns:1fr; text-align:left }
  .member .shot{ width:104px; height:104px }
}

/* ================================================ portfolio tiles */
.pf-logo{
  background:#fff; border:1px solid var(--line); border-radius:4px;
  min-height:196px; padding:24px;
}
.pf-item:hover .pf-logo{ border-color:var(--gold-line) }
/* Logos run at full colour and larger - they are the proof on this page. */
.pf-logo img{ filter:none; opacity:1; max-height:150px }
/* Solid rectangular status markers. */
.pill{
  border-radius:0; border:0; padding:7px 13px;
  font-size:10.5px; font-weight:700; letter-spacing:.15em;
}
.pill-current{ background:var(--gold); color:#13253D }
.pill-exited{ background:#39465A; color:#EAF0F6 }
.pf-meta .k{ color:var(--gold-deep); opacity:1 }
.pf-meta a{ border-bottom-color:var(--gold-line) }
.pf-meta a:hover{ border-bottom-color:var(--gold) }

/* -------------------------------------------------------- footer */
footer .foot-one{ border-top:1px solid rgba(224,196,106,.22) }
footer .addr a.maplink::before{ background:var(--gold-soft); box-shadow:none }

/* --------------------------------------------- script-aware type */
html[lang="pa"] h1, html[lang="zh"] h1,
html[lang="pa"] h2, html[lang="zh"] h2,
html[lang="pa"] h3, html[lang="zh"] h3,
html[lang="pa"] .pf-name, html[lang="zh"] .pf-name,
html[lang="pa"] .anchor blockquote, html[lang="zh"] .anchor blockquote{
  /* Montserrat has no Gurmukhi or Han coverage; fall back explicitly. */
  font-family:"Inter", system-ui, sans-serif !important;
  font-weight:600;
  letter-spacing:0;
  line-height:1.35;
}

/* ============================================================
   Mobile refinements
   ============================================================ */

/* --- horizontal overflow ---------------------------------------------
   The footer address carried white-space:nowrap, which forced the page to
   376px on a 320px screen - a horizontal scrollbar on every page, since the
   fixed-position preloader and toast then measured against that width. */
@media (max-width:720px){
  .foot-one .f-center,
  .foot-one .f-right{ white-space:normal; line-height:1.65 }
  .foot-one .addr{ padding:0 4px }
  .toast{ left:14px; right:14px; width:auto; max-width:none; transform:none }
  .preloader{ max-width:100vw; overflow:hidden }
}

/* --- legibility: 10.5px tracked uppercase is too tight on a phone ----- */
@media (max-width:860px){
  .caps{ font-size:11px; letter-spacing:.09em; gap:14px; margin-bottom:20px }
  .pill{ font-size:11px; padding:6px 12px }
  .pf-meta .k{ font-size:11px }
  .pf-meta .v{ font-size:15px }
  .lead{ font-size:17px; line-height:1.72 }
    .member p{ font-size:15px }
}

/* --- tap targets: 44x44 minimum on touch ------------------------------ */
@media (max-width:900px), (hover:none){
  .menu{
    min-width:44px; min-height:44px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .lang-menu-toggle{ min-height:44px; padding:10px 16px }
  .lang-menu [data-lang]{ min-height:44px; display:flex; align-items:center; width:100% }
  nav ul a{ padding:12px 2px; display:block }
  .foot-one .addr a{ display:inline-block; padding:12px 8px }
  .foot-one .f-right a{ display:inline-block; padding:12px 6px }
  .pf-meta a{ display:inline-block; padding:13px 0 }
  .btn, .arrow-btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center }
  .navlink{ display:inline-flex; align-items:center; min-height:44px; padding:0 8px }
  .auth-form button[type="submit"]{ min-height:44px }
  .linkish, .auth-form a{ display:inline-block; padding:12px 4px }
}

/* --- layout at the narrow end ----------------------------------------- */
@media (max-width:400px){
  .pf-item{ padding:20px }
  .pf-logo{ min-height:104px; padding:16px }
  .pf-logo img{ max-height:78px }
  .member{ padding:22px }
    h1{ font-size:clamp(30px, 8.6vw, 40px) }
  h2{ font-size:clamp(24px, 7vw, 32px) }
}

/* --- mobile menu polish ---------------------------------------------- */
@media (max-width:900px){
  /* the desktop 28px flex gap stacks on top of the new 12px link padding,
     making the dropdown unnecessarily tall */
  nav ul{ gap:2px; padding:10px }
  nav ul a{ padding:13px 10px; border-radius:10px }
  nav ul a:hover, nav ul a:focus-visible{ background:rgba(255,255,255,.06) }
  nav ul a::after{ display:none }
}

/* Focus rings should follow the keyboard, not the mouse or a finger tap.
   The base sheet uses :focus, which paints a ring on every click. */
:focus:not(:focus-visible){ outline:none }
:focus-visible{ outline:3px solid rgba(198,162,39,.65); outline-offset:2px }

/* ============================================================
   Logo position + a wider gold system
   ============================================================ */

/* Nudge the wordmark in from the container edge */
.brand{ padding-left:26px }
@media (max-width:900px){ .brand{ padding-left:8px } }
/* the nudge has to go entirely on the narrowest phones or the header overflows */
@media (max-width:420px){ .brand{ padding-left:0 } }

/* Gold hairline along the top of the page and under the header */
header{ border-bottom:1px solid rgba(198,162,39,.45) }
body::before{
  content:""; position:fixed; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
  z-index:200; pointer-events:none;
}

/* Short gold rule under section headings only - not company names */
main h2:not(.pf-name){ position:relative; padding-bottom:16px }
main h2:not(.pf-name)::after{
  content:""; position:absolute; left:0; bottom:0;
  width:52px; height:2px; background:var(--gold);
}
/* centred headings need a centred rule */
.anchor h2::after, #team h2::after, .team-heading::after, .stewardship-heading::after{
  left:50%; transform:translateX(-50%);
}

/* Where a section label already draws a rule, the heading does not need a
   second one directly beneath it. Headings without a label keep theirs. */
.caps + h2::after{ display:none }

/* Gold list markers instead of grey dots */
main ul:not(#navMenu):not(.lang-menu) li{ list-style:none; position:relative; padding-left:20px }
main ul:not(#navMenu):not(.lang-menu) li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:7px; height:7px; background:var(--gold); border-radius:0;
}
.pf-bullets li{ padding-left:20px }

/* Cards carry a persistent gold edge, not just on hover */
.card, .pf-item, .member, .panel{ border-left:3px solid var(--gold) }
.card::before, .pf-item::before{ display:none }

/* Body links pick up gold */
main p a, main li a{ color:var(--gold-deep); text-decoration:underline;
  text-decoration-color:var(--gold-line); text-underline-offset:3px }
main p a:hover, main li a:hover{ text-decoration-color:var(--gold) }

/* Primary button keeps a gold edge at rest */
.btn:not(.light){ border-color:var(--gold) }

/* Scroll progress bar in gold */
#scrollbar{ background:var(--gold) !important }

/* Squarer geometry overall - rounded pills read generic */
.btn, .arrow-btn{ border-radius:3px }
.card, .pf-item, .member, .panel, .pf-logo{ border-radius:4px }
.lang-menu-toggle{ border-radius:3px }

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

/* No eyebrow label above the headline, so the headline itself carries the
   opening. Bigger, tighter, and sitting higher up the page. */
#home{ padding-top:clamp(52px, 6vw, 88px) }
.hero-title{
  font-size:clamp(36px, 4.9vw, 66px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:600;
  max-width:23ch;          /* three lines at desktop, not five */
  margin:0 0 28px;
}
.hero-title::after{ display:none }

/* Subtitle: shorter measure, a touch larger, and anchored by a gold rule so it
   reads as a deliberate standfirst rather than a default paragraph. */
.hero-sub{
  font-size:clamp(17px, 1.35vw, 20px);
  line-height:1.68;
  max-width:52ch;
  color:#3E4A5C;
  padding-left:22px;
  border-left:2px solid var(--gold);
  margin:0;
}

/* Entrance: headline, then standfirst, then buttons. */
@keyframes gcgRise{
  from{ opacity:0; transform:translateY(22px) }
  to  { opacity:1; transform:none }
}
.hero-title, .hero-sub, .hero-cta{ opacity:0 }
html.gcg-ready .hero-title,
html.gcg-ready .hero-sub,
html.gcg-ready .hero-cta{
  animation:gcgRise .9s cubic-bezier(.22,.68,.32,1) forwards;
}
html.gcg-ready .hero-title{ animation-delay:.05s }
html.gcg-ready .hero-sub  { animation-delay:.24s }
html.gcg-ready .hero-cta  { animation-delay:.40s }
/* no JS: never leave the hero invisible */
html.no-js .hero-title, html.no-js .hero-sub, html.no-js .hero-cta{ opacity:1 }

/* The hero sits inside a .reveal wrapper; make sure it can never stay hidden */
.hero.reveal{ opacity:1 !important; transform:none !important }

@media (prefers-reduced-motion: reduce){
  .hero-title, .hero-sub, .hero-cta,
  html.gcg-ready .hero-title, html.gcg-ready .hero-sub, html.gcg-ready .hero-cta{
    animation:none; opacity:1;
  }
}

@media (max-width:720px){
  .hero-title{ max-width:none; margin-bottom:22px }
  .hero-sub{ padding-left:16px; max-width:none }
}

/* ============================================================
   Vertical rhythm - tighten the dead space
   ============================================================ */

/* Sections were 115px top AND bottom, so 230px of air between every block,
   plus stray divider margins on top of that. */
:root{ --sec:clamp(58px, 5.4vw, 86px) }

.divider, .section-divider{ margin:0 !important; height:1px }
.hero + .divider{ margin:0 !important }

/* the hero already has breathing room below its media */
#home{ padding-bottom:clamp(28px, 3vw, 44px) }
.hero-media{ margin-bottom:0 }
.hero-cta{ margin:26px 0 40px !important }

/* stewardship and the CTA band are short bands; they do not need full padding */
#stewardship, #cta-band{
  padding-top:clamp(48px, 4.6vw, 74px);
  padding-bottom:clamp(48px, 4.6vw, 74px);
}

/* trim the trailing space inside sections whose last child carries its own margin */
main > section > .container > *:last-child{ margin-bottom:0 }

/* ============================================================
   Hero headline typewriter
   ============================================================ */
.hero-title{ min-height:1.08em }
.hero-title.gcg-typing::after{
  content:""; display:inline-block;
  width:3px; height:.78em; margin-left:8px;
  background:var(--gold); vertical-align:-.06em;
  animation:gcgCaret .75s steps(1) infinite;
}
@keyframes gcgCaret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* while typing, the headline must not also fade in */
html.gcg-ready .hero-title{ animation:none; opacity:1 }

@media (prefers-reduced-motion: reduce){
  .hero-title.gcg-typing::after{ display:none }
}

/* ============================================================
   Nav submenus
   ============================================================ */
.has-sub{ position:relative }
.has-sub > a::before{
  content:""; display:inline-block; vertical-align:middle;
  width:5px; height:5px; margin-left:8px; margin-bottom:2px;
  border-right:1.5px solid rgba(255,255,255,.7);
  border-bottom:1.5px solid rgba(255,255,255,.7);
  transform:rotate(45deg) translateY(-1px);
  transition:border-color .2s ease;
}
.has-sub:hover > a::before{ border-color:var(--gold) }

/* Scoped to the nav: a bare `.sub` also matched <p class="sub"> on the Focus
   card and hid it with opacity:0. */
nav ul.sub{
  position:absolute; top:100%; left:-18px; min-width:220px;
  margin:0; padding:8px; list-style:none;
  background:linear-gradient(180deg, var(--blue), var(--blue-2));
  border:1px solid rgba(198,162,39,.34); border-top:2px solid var(--gold);
  box-shadow:0 24px 48px rgba(8,16,28,.32);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:90; display:block;
}
.has-sub:hover > .sub, .has-sub:focus-within > .sub{
  opacity:1; visibility:visible; transform:translateY(0);
}
nav .sub li{ margin:0; padding:0 }
nav .sub li::before{ display:none }
nav .sub a{
  display:block; padding:11px 14px; white-space:nowrap;
  font-size:13px; font-weight:500; letter-spacing:.02em; text-transform:none;
  color:#E6ECF4; border-radius:2px;
}
nav .sub a::after{ display:none }
nav .sub a:hover, nav .sub a:focus-visible{ background:rgba(198,162,39,.16); color:#fff }

/* On the mobile panel the children sit inline, indented under the parent. */
@media (max-width:900px){
  nav ul.sub{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:0; border-left:1px solid rgba(198,162,39,.4);
    box-shadow:none; margin:2px 0 6px 14px; padding:0 0 0 10px; min-width:0;
  }
  nav .sub a{ padding:11px 10px; font-size:13.5px; color:#C7D2E0 }
  .has-sub > a::before{ display:none }
}

/* ============================================================
   Hero sits closer to the header
   ============================================================ */
#home{ padding-top:clamp(22px, 2.4vw, 38px) }

/* ============================================================
   Footer
   ============================================================ */
footer{
  background:linear-gradient(180deg, var(--blue), var(--blue-2));
  color:#C3CEDD; border-top:2px solid var(--gold);
}
.foot-grid{
  display:grid; grid-template-columns:1.25fr .8fr 1fr 1.1fr;
  gap:52px; padding-top:66px; padding-bottom:52px;
}
.foot-grid h4{
  font-family:"Inter",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft);
  margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid rgba(198,162,39,.28);
}
.foot-grid h4::after{ display:none }
.f-brand .brandmark{ font-size:28px; color:#fff; margin-bottom:18px; display:inline-block }
.f-blurb{ font-size:14px; line-height:1.72; color:#A9B7C9; max-width:34ch; margin:0 }
.foot-grid ul{ list-style:none; margin:0; padding:0 }
.foot-grid li{ margin:0 0 11px; padding:0 }
.foot-grid li::before{ display:none }
.foot-grid a{
  color:#C3CEDD; text-decoration:none; font-size:14px;
  border-bottom:1px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.foot-grid a:hover{ color:#fff; border-bottom-color:var(--gold) }
.f-addr{ font-style:normal; font-size:14px; line-height:1.75; color:#A9B7C9; margin:0 0 16px }
.f-contact li{ margin-bottom:9px }
.maplink::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold-soft); margin-right:9px; vertical-align:middle;
}
.map-frame{
  position:relative; border:1px solid rgba(198,162,39,.34);
  height:190px; overflow:hidden; background:#0B1626;
}
.map-frame iframe{
  width:100%; height:100%; border:0; display:block;
  filter:grayscale(.35) contrast(1.05) brightness(.92);
}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding-top:20px; padding-bottom:26px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:13px; color:#93A2B5;
}
.foot-legal{ display:flex; gap:22px }
@media (max-width:1040px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:40px }
}
@media (max-width:620px){
  .foot-grid{ grid-template-columns:1fr; gap:34px; padding-top:52px }
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:12px }
  .map-frame{ height:210px }
}

/* ============================================================
   Closing CTA band
   ============================================================ */
#cta-band{
  background:var(--gold-wash);
  border-top:1px solid rgba(198,162,39,.42);
  border-bottom:1px solid rgba(198,162,39,.42);
  text-align:center;
}
#cta-band .container{ max-width:860px }
.cta-lead{
  font-family:"Montserrat","Inter",sans-serif; font-weight:400;
  font-size:clamp(23px, 2.5vw, 33px); line-height:1.34;
  color:var(--ink); margin:0 auto 30px; max-width:24ch;
}
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap }
#cta-band .arrow-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:2px; font-size:14px; font-weight:600;
  letter-spacing:.04em; text-decoration:none; transition:all .22s ease;
  background:var(--blue); color:#fff; border:1px solid var(--blue);
}
#cta-band .arrow-btn::after{
  content:""; width:14px; height:1px; background:currentColor;
  transition:width .22s ease;
}
#cta-band .arrow-btn:hover{ background:var(--blue-2); border-color:var(--gold) }
#cta-band .arrow-btn:hover::after{ width:22px }
#cta-band .arrow-btn.secondary{
  background:transparent; color:var(--blue); border-color:rgba(198,162,39,.55);
}
#cta-band .arrow-btn.secondary:hover{ background:#fff; border-color:var(--gold) }

/* logo nudged further off the container edge */
.brand{ padding-left:56px }
@media (max-width:1100px){ .brand{ padding-left:24px } }
@media (max-width:900px){ .brand{ padding-left:8px } }
@media (max-width:420px){ .brand{ padding-left:0 } }

/* The footer's Navigate column is a <nav>, so the header rule `nav ul{display:flex}`
   was laying it out as a row. */
footer nav ul{ display:block; gap:0; padding:0; letter-spacing:normal; font-weight:400 }
footer nav a{ padding:0; display:inline-block }
footer nav a::after{ display:none }
.foot-grid{ grid-template-columns:1.3fr .85fr 1fr 1.15fr }
.map-frame{ height:210px }
.foot-bottom a{ color:#C3CEDD; text-decoration:none; border-bottom:1px solid transparent }
.foot-bottom a:hover{ color:#fff; border-bottom-color:var(--gold) }

/* ---- CTA band: override the original dark-band styling ------------------
   The old band sat on a dark background, so .cta-lead was white with a text
   shadow and .arrow-btn carried a clip-path arrow. Both need unwinding for
   the new cream band. */
#cta-band .cta-lead{
  color:var(--ink) !important; text-shadow:none !important;
  font-weight:400 !important; max-width:24ch !important;
}
#cta-band .arrow-btn{
  clip-path:none !important; -webkit-clip-path:none !important;
  background-image:none !important; text-shadow:none !important;
  font-weight:600 !important; letter-spacing:.04em !important;
  padding:15px 30px !important; border-radius:2px !important;
  box-shadow:none !important;
}
#cta-band .arrow-btn::before{ display:none !important }
#cta-band .cta-actions{ gap:16px !important; margin-top:0 !important }

/* ---- submenu caret sits after the label, not before it ------------------ */
.has-sub > a{ display:inline-flex; align-items:center }
.has-sub > a::before{ order:2 }

/* These must come after the .foot-grid column re-declaration above, otherwise
   the unconditional 4-column rule wins at every width. */
@media (max-width:1040px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:40px } }
@media (max-width:620px){
  .foot-grid{ grid-template-columns:1fr; gap:34px; padding-top:52px }
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:12px }
}
.toast{ max-width:calc(100vw - 28px); box-sizing:border-box }

/* `footer nav a{padding:0}` (needed to undo the header nav rule) also removed
   the tap padding, leaving 23px-tall footer links on touch devices. */
@media (max-width:900px), (hover:none){
  .foot-grid a, footer nav a{ display:inline-block; padding:11px 0 }
  .foot-grid li{ margin-bottom:2px }
  .foot-bottom a{ padding:10px 0 }
}


/* ---- audit fixes ---------------------------------------------------- */
/* form helper text measured 4.18:1 against the panel; AA needs 4.5:1 */
.form-note, .contact-note, #contact .panel small, #contact .panel .muted{ color:#54617A }

/* the "At a glance" band was removed; its rules were left behind */

/* ============================================================
   Header utility cluster: Investor Login + language
   ============================================================ */
.nav-utils{ display:flex; align-items:center; gap:14px; flex:none }

/* `.nav a{font-size:14px}` is (0,1,1), so this needs the parent class to win */
.nav .btn-investor{
  display:inline-flex; align-items:center;
  padding:10px 18px; border-radius:2px;
  border:1px solid rgba(198,162,39,.55);
  color:#EAF0F6; text-decoration:none;
  font-family:"Inter", sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.nav .btn-investor:hover,
.nav .btn-investor:focus-visible{
  background:var(--gold); border-color:var(--gold); color:var(--blue-2);
}
.nav .btn-investor::after{ display:none }

/* one link, shown in whichever place fits the viewport */
@media (min-width:901px){ .nav-investor-mobile{ display:none } }
@media (max-width:900px){
  .nav .btn-investor{ display:none }
  .nav-utils{ gap:0 }
}

/* ============================================================
   Tighter vertical rhythm + flat CTA band
   ============================================================ */
:root{ --sec:clamp(42px, 3.8vw, 64px) }

#stewardship, #cta-band{
  padding-top:clamp(38px, 3.4vw, 56px);
  padding-bottom:clamp(38px, 3.4vw, 56px);
}
#home{ padding-top:clamp(18px, 2vw, 30px); padding-bottom:clamp(20px, 2.2vw, 34px) }

/* drop the cream wash - keep the page ground, define the band with rules only */
#cta-band{
  background:transparent;
  border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
}

/* team cards read as a pair, so match their heights */
.team-grid{ align-items:stretch }
.member{ height:100% }

/* investor portal: bare inline links need a real tap target on touch */
@media (max-width:900px), (hover:none){
  .auth-note a, .panel p a, .muted a{ display:inline-block; padding:13px 6px }
}
@media (max-width:900px), (hover:none){
  .auth-link{ display:inline-block; padding:13px 6px }
}

/* ============================================================
   Brand lockup - matches the supplied artwork: three lines,
   flush RIGHT, light weight, open tracking.
   ============================================================ */
.brandmark{
  text-align:right;
  font-weight:250;
  letter-spacing:.045em;
  line-height:1.02;
}
.brand .brandmark{ font-weight:250 }
.f-brand .brandmark{ font-weight:250 }

/* ============================================================
   Hero: copy left, gold circle mark right
   ============================================================ */
.hero-body{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px, 5vw, 90px); align-items:center;
  margin-bottom:clamp(26px, 3.4vw, 48px);
}
.hero-copy{ min-width:0 }
.hero-mark{ width:clamp(230px, 25vw, 340px); flex:none; line-height:0 }
.hero-mark svg{ width:100%; height:auto; overflow:visible }

.gc-faint{ fill:none; stroke:rgba(198,162,39,.20); stroke-width:1 }
.gc-inner{ stroke:rgba(198,162,39,.32) }

/* outer ring draws itself once, from the top */
.gc-draw{
  fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:1055.6; stroke-dashoffset:1055.6;
  transform:rotate(-90deg); transform-origin:180px 180px;
  animation:gcDraw 2.4s cubic-bezier(.22,.61,.36,1) .35s forwards;
}
@keyframes gcDraw{ to{ stroke-dashoffset:0 } }

/* a short arc and a marker orbit slowly - the "circle" in Gold Circle */
.gc-spin{ transform-origin:180px 180px; animation:gcSpin 26s linear infinite }
.gc-spin-rev{ animation-duration:38s; animation-direction:reverse }
@keyframes gcSpin{ to{ transform:rotate(360deg) } }

.gc-arc{
  fill:none; stroke:var(--gold); stroke-width:1.2; stroke-linecap:round;
  stroke-dasharray:150 911; opacity:.85;
}
.gc-arc-2{ stroke:rgba(198,162,39,.45); stroke-dasharray:70 767; stroke-width:1 }
.gc-dot{ fill:var(--gold) }

@media (prefers-reduced-motion: reduce){
  .gc-draw{ animation:none; stroke-dashoffset:0 }
  .gc-spin{ animation:none }
}
@media (max-width:900px){
  .hero-body{ grid-template-columns:1fr }
  .hero-mark{ display:none }
}

/* The mark was 340px against 181px of copy, so centring it opened ~79px of
   gap above and below. Size it to the copy block instead. */
.hero-mark{ width:clamp(190px, 19vw, 250px) }
.hero-body{ align-items:center; margin-bottom:clamp(20px, 2.6vw, 34px) }

/* ============================================================
   Hero fills the space with type and actions - no ornament
   ============================================================ */
.hero-mark{ display:none !important }

/* headline runs the full column so it carries the top of the page */
.hero-title{
  font-size:clamp(38px, 5.6vw, 82px);
  line-height:1.06;
  letter-spacing:-.018em;
  max-width:none;
}

/* sub-headline left, actions right, so the row spans the column edge to edge */
.hero-body{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px, 4vw, 64px);
  align-items:end;
  margin-bottom:clamp(22px, 2.8vw, 38px);
}
.hero-sub{ max-width:52ch; margin-bottom:0 }
.hero-cta{ margin:0 !important; justify-content:flex-end }

@media (max-width:820px){
  .hero-body{ grid-template-columns:1fr; align-items:start; gap:22px }
  .hero-cta{ justify-content:flex-start }
  .hero-title{ font-size:clamp(32px, 8.2vw, 46px); line-height:1.1 }
}

/* .hero-copy wraps both the sub and the actions, so it is the only child of
   .hero-body - the two-column split has to live on .hero-copy itself. */
.hero-body{ display:block; margin-bottom:clamp(22px, 2.8vw, 38px) }
.hero-copy{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px, 4vw, 64px); align-items:end;
}
@media (max-width:820px){
  .hero-copy{ grid-template-columns:1fr; align-items:start; gap:22px }
}

/* ---- hero breathing room ---------------------------------------------
   The headline, sub-row and image were stacked too tightly after the
   rhythm tightening; the hero is the one place that should feel open. */
#home{
  padding-top:clamp(40px, 5vw, 78px);
  padding-bottom:clamp(34px, 4vw, 58px);
}
.hero-title{ line-height:1.1; margin-bottom:clamp(28px, 3.6vw, 52px) }
.hero-body{ margin-bottom:clamp(34px, 4.4vw, 64px) }
.hero-copy{ gap:clamp(28px, 4.5vw, 72px); align-items:center }
.hero-sub{ line-height:1.8 }

/* The headline copy is now ~100 characters rather than ~70, so the display
   size has to come down or it runs to five lines and swamps the hero. */
.hero-title{ font-size:clamp(32px, 4.1vw, 58px); line-height:1.14; margin-bottom:clamp(26px,3.2vw,44px) }
@media (max-width:820px){ .hero-title{ font-size:clamp(27px, 6.4vw, 36px); line-height:1.18 } }

/* ============================================================
   Mobile header/footer corrections
   ============================================================ */

/* The header's mobile menu rule is `nav ul{position:absolute; display:none; ...}`
   and it also catches the footer's <nav>. Overriding display alone was not
   enough - the list stayed absolutely positioned, so it detached from its
   column (column collapsed to 48px with the links floating elsewhere).
   Reset every property that rule sets. */
footer nav ul{
  display:block !important;
  position:static !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  width:auto !important;
  min-width:0 !important;
  right:auto !important;
  top:auto !important;
  padding:0 !important;
  margin:0 !important;
  flex-direction:column !important;
}

/* Hamburger belongs beside the language control, not stranded mid-header. */
@media (max-width:1040px){
  .nav{ justify-content:flex-start; gap:10px }
  .brand{ margin-right:auto }
  .nav-utils{ order:8 }
  .menu{ order:9 }
}

/* ---- team: three members ---------------------------------------------
   At two-up the photo sat beside the text. Three cards at that width leave
   about 200px for the bio, so the photo moves above the text instead. */
.team-grid{ grid-template-columns:repeat(3, 1fr); gap:26px }
.member{ grid-template-columns:1fr; gap:18px; padding:26px }
.member .shot{ width:120px; height:120px }
.member h3{ margin-top:0 }
@media (max-width:1000px){
  .team-grid{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:680px){
  .team-grid{ grid-template-columns:1fr }
  .member{ grid-template-columns:132px 1fr; gap:22px; align-items:start }
  .member .shot{ width:132px; height:132px }
}
@media (max-width:460px){
  .member{ grid-template-columns:1fr }
}

/* ============================================================
   Mobile menu: a full-width sheet, not a floating desktop card
   ============================================================
   The inherited rule made it a 300px rounded card pinned right, with
   centre-aligned items and 48px rows. The parent item ("About") is
   inline-flex for its desktop caret, so it shrank and sat left while its
   siblings centred. Rebuilt as a flush sheet with left-aligned rows and
   hairline dividers. Uses top:100% off the sticky header rather than a
   hard-coded height, so it cannot drift if the header height changes. */
@media (max-width:1040px){
  nav ul#navMenu{
    position:absolute; top:100%; left:0; right:0;
    width:auto; min-width:0; max-width:none;
    margin:0; padding:0;
    flex-direction:column; gap:0;
    border:0; border-top:1px solid var(--gold-line); border-radius:0;
    background:linear-gradient(180deg, var(--blue), var(--blue-2));
    box-shadow:0 24px 48px rgba(8,16,28,.42);
    max-height:calc(100vh - 84px); overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  #navMenu > li{
    margin:0; padding:0; width:100%;
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  #navMenu > li:last-child{ border-bottom:0 }

  /* every row identical: left aligned, full width, one tap height */
  #navMenu > li > a,
  #navMenu > li.has-sub > a{
    display:block; width:100%;
    text-align:left; padding:17px 24px;
    font-size:15.5px; font-weight:600; letter-spacing:.01em;
    color:#EDF1F7; text-transform:none;
  }
  #navMenu > li > a::after{ display:none }
  #navMenu > li > a:active{ background:rgba(198,162,39,.14) }

  /* children sit indented under their parent, quieter than the top level */
  nav ul.sub{
    /* the inherited `nav ul{width:300px}` also matches .sub, which left the
       child block stopping short of the sheet edge */
    position:static; width:auto; min-width:0; max-width:none;
    background:rgba(0,0,0,.16);
    border:0; border-left:2px solid var(--gold); border-radius:0;
    margin:0; padding:2px 0 2px 0; box-shadow:none;
    opacity:1; visibility:visible; transform:none;
  }
  nav .sub li{ border:0 }
  nav .sub a{
    display:block; padding:13px 24px 13px 34px;
    font-size:14px; font-weight:500; color:#AFBDCE;
  }
  nav .sub a:active{ background:rgba(198,162,39,.12) }
}