/* Self-hosted type, subset to Latin, Latin Extended and Cyrillic and served
   from this site. No request goes to a font CDN, so no visitor data leaves
   the page — which is what the privacy notice promises. */
@font-face{font-family:'Bodoni Moda';src:url(/assets/fonts/bodoni-moda-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url(/assets/fonts/spectral-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url(/assets/fonts/spectral-500.woff2) format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(/assets/fonts/plex-sans.woff2) format('woff2');font-weight:400 500;font-style:normal;font-display:swap}

/* ══════════════════════════════════════════════════════════════════════
   EWG Advisory — stylesheet
   ----------------------------------------------------------------------
   Plain CSS, no framework. Every colour, rule and type size lives here, and
   the standalone preview is generated from this exact file, so the two
   cannot drift apart.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ══════════════════════════════════════════════════════════════════════
   EWG Advisory — design system
   ----------------------------------------------------------------------
   Every colour, rule and type size lives here. Components stay semantic
   and carry these class names rather than long utility strings, so the
   production build and the approved preview cannot drift apart.
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   TOKENS
   Navy sampled from the supplied artwork; bronze is the rule colour
   from the mark. Nothing else is introduced.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --navy:#081422; --navy-deep:#050D18; --navy-raised:#0D1929;
  --bronze:#B08D57; --bronze-soft:#C6A578; --bronze-dim:rgba(176,141,87,.18);
  --ivory:#F5F3EF; --text:#BCC5D1; --mute:#9AA5B5;
  /* Type roles. Swapping a face is a one-line change here.
     mast  — the wordmark only: a Didone belongs at 300px, nowhere else.
     serif — everything you actually read as a heading.
     sans  — body copy, labels, interface. */
  --ff-mast:'Bodoni Moda',Georgia,serif;
  --ff-serif:'Spectral',Georgia,serif;
  --ff-sans:'IBM Plex Sans',system-ui,sans-serif;
  --gx:20px;                      /* page gutter */
  --frame:10px;                   /* viewport frame inset */
  --ease:cubic-bezier(.22,1,.36,1);
}
@media(min-width:768px){ :root{ --gx:40px; --frame:18px } }
@media(min-width:1280px){ :root{ --gx:56px; --frame:22px } }

html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{background:var(--navy);color:var(--ivory);font-family:var(--ff-sans);
     overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--bronze);color:var(--navy-deep)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* ── Type roles ─────────────────────────────────────────────────── */
.serif{font-family:var(--ff-serif);font-weight:400}
.label{font-size:.6875rem;text-transform:uppercase;letter-spacing:.15em;color:var(--bronze);line-height:1.4}
@media(min-width:768px){.label{font-size:.6875rem}}
.label-mute{color:var(--mute)}
.big{font-family:var(--ff-serif);font-weight:500;font-size:clamp(1.625rem,3.4vw,2.75rem);line-height:1.16;letter-spacing:-.005em}
.mid{font-family:var(--ff-serif);font-weight:500;font-size:clamp(1.125rem,1.7vw,1.375rem);line-height:1.32}
p.lede{font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.65;color:var(--text)}
p.body{font-size:1rem;line-height:1.72;color:var(--text)}
@media(min-width:768px){p.body{font-size:1.0625rem}}

/* ── Full-bleed scaffolding: rules run the whole viewport width, only
      the text is inset by the gutter. ───────────────────────────── */
.bleed{width:100%;padding-left:var(--gx);padding-right:var(--gx)}
.band{border-top:1px solid var(--bronze-dim)}
.pad{padding-top:clamp(56px,7.5vw,120px);padding-bottom:clamp(56px,7.5vw,120px)}
.rule{border-top:1px solid var(--bronze-dim)}




/* ══════════════════════════════════════════════════════════════════
   SIGNATURE — the bronze rule from the mark re-forms as the page frame
   ══════════════════════════════════════════════════════════════════ */
#frame{position:fixed;inset:var(--frame);border:1px solid var(--bronze);
       opacity:0;transform:scale(1.03);pointer-events:none;z-index:60}

/* ══════════════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════════════ */
header{position:fixed;inset:0 0 auto 0;z-index:70;transform:translateY(-100px);opacity:0;
       transition:transform .55s var(--ease),opacity .55s var(--ease);pointer-events:none}
header.on{transform:none;opacity:1;pointer-events:auto}
header .bar{border-bottom:1px solid var(--bronze-dim);background:rgba(8,20,34,.82);backdrop-filter:blur(20px)}
header .in{display:flex;align-items:center;justify-content:space-between;height:60px}
@media(min-width:768px){header .in{height:72px}}
.navmark{font-family:var(--ff-mast);font-size:1.0625rem;letter-spacing:.16em}
.navmark em{font-style:normal;margin-left:9px;font-family:var(--ff-sans);font-size:.5rem;
            letter-spacing:.26em;text-transform:uppercase;color:var(--bronze);vertical-align:2px}
nav.desk ul{display:flex;align-items:center;gap:34px;list-style:none}
nav.desk a{font-size:.8125rem;color:var(--mute);transition:color .3s}
nav.desk a:hover{color:var(--ivory)}
.btn{display:inline-block;border:1px solid rgba(176,141,87,.55);padding:11px 22px;font-size:.6875rem;
     text-transform:uppercase;letter-spacing:.2em;color:var(--bronze-soft);transition:background .3s,color .3s;
     background:none;font-family:inherit;cursor:pointer}
.btn:hover{background:var(--bronze);color:var(--navy-deep)}
.btn-solid{background:var(--bronze);color:var(--navy-deep);border-color:var(--bronze)}
.btn-solid:hover{background:transparent;color:var(--bronze-soft)}
#burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;position:relative;margin-right:-8px}
#burger i{position:absolute;left:8px;width:24px;height:1px;background:var(--ivory);transition:transform .3s,top .3s}
#burger i:nth-child(1){top:16px}#burger i:nth-child(2){top:24px}
#burger.x i:nth-child(1){top:20px;transform:rotate(45deg)}
#burger.x i:nth-child(2){top:20px;transform:rotate(-45deg)}
#drawer{display:none;border-bottom:1px solid var(--bronze-dim);background:rgba(8,20,34,.97);backdrop-filter:blur(20px)}
#drawer.open{display:block}
#drawer ul{list-style:none;padding:8px 0 24px}
#drawer a{display:block;padding:15px 0;border-bottom:1px solid rgba(176,141,87,.12);
          font-family:var(--ff-serif);font-size:1.4rem}
@media(max-width:899px){nav.desk{display:none}#burger{display:block}}

/* ══════════════════════════════════════════════════════════════════
   HERO — masthead set to the width of the viewport
   The wordmark is live type in an SVG with textLength, so it spans
   exactly edge to edge at every screen size. No raster, no card.
   ══════════════════════════════════════════════════════════════════ */
#hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
      justify-content:space-between;overflow:hidden;padding-top:calc(var(--frame) + 26px);
      padding-bottom:calc(var(--frame) + 22px)}
#bloom{position:absolute;left:50%;top:52%;width:120vw;height:80vh;transform:translate(-50%,-50%);
       background:radial-gradient(ellipse at center,rgba(176,141,87,.15),transparent 62%);
       filter:blur(30px);animation:drift 16s ease-in-out infinite;pointer-events:none}
@keyframes drift{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6}
                 50%{transform:translate(-50%,-53%) scale(1.09);opacity:.9}}
#lift{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;
      flex:1;will-change:transform,opacity,filter}

.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.hero-top .r{text-align:right}
.mast{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6vh 0}

/* The masthead spans the full measure, edge to edge.
   textLength pins the wordmark to the exact width of its box at any viewport,
   and ADVISORY carries the same measure, so the tracked lower line always ends
   flush with the letters above it. No max-width: the mark is the first screen,
   and on a wide monitor it is supposed to fill it. */
.wm,
.adv{width:100%;height:auto;display:block}
.wm{overflow:visible}
.wm text{font-family:var(--ff-mast);font-weight:500;fill:var(--ivory)}
.adv{margin-top:clamp(10px,1.6vw,22px)}
.adv text{font-family:var(--ff-sans);font-weight:400;fill:var(--bronze)}
.hero-sub{margin-top:clamp(22px,3.4vw,40px);max-width:44rem;font-size:clamp(.9375rem,1.7vw,1.25rem);
          line-height:1.6;color:rgba(245,243,239,.82)}
.hero-foot{border-top:1px solid var(--bronze-dim);padding-top:16px;display:grid;
           grid-template-columns:repeat(2,1fr);gap:12px 20px}
@media(min-width:900px){.hero-foot{grid-template-columns:repeat(4,1fr)}}
.hero-foot span{font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;color:var(--mute)}
@media(min-width:768px){.hero-foot span{font-size:.6875rem}}
#cue{position:absolute;left:50%;bottom:calc(var(--frame) + 60px);transform:translateX(-50%);z-index:3;
     display:flex;flex-direction:column;align-items:center;gap:10px}
#cue .stem{width:1px;height:44px;background:linear-gradient(to bottom,rgba(176,141,87,.7),transparent)}
@media(max-width:899px){#cue{display:none}}

/* ══════════════════════════════════════════════════════════════════
   EDITORIAL SECTIONS
   ══════════════════════════════════════════════════════════════════ */
/* Two-column editorial head: sticky label left, content right. */
.head{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.head{grid-template-columns:16rem 1fr;gap:48px;align-items:start}}
.head .k{position:relative}
@media(min-width:900px){.head .k{position:sticky;top:110px}}

/* Full-bleed hairline grid: 1px background shows through the gaps. */
.hair{display:grid;gap:1px;background:var(--bronze-dim);margin-top:clamp(40px,5vw,72px);
      border-top:1px solid var(--bronze-dim);border-bottom:1px solid var(--bronze-dim)}
.hair > *{background:var(--navy);padding:clamp(26px,3vw,44px) var(--gx)}
@media(min-width:1100px){.c3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:700px){.c3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.c4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:700px){.c4{grid-template-columns:repeat(2,1fr)}}

.cell{position:relative;overflow:hidden}
.cell::before{content:'';position:absolute;left:0;top:0;height:1px;width:0;background:var(--bronze);
              transition:width .8s var(--ease)}
.cell:hover::before{width:100%}
.cell .n{font-family:var(--ff-sans);font-size:.6875rem;text-transform:uppercase;
         letter-spacing:.15em;color:var(--bronze)}
.cell h3{margin-top:14px}
.cell p{margin-top:14px;max-width:30rem}
.cell .out{margin-top:22px;padding-top:14px;border-top:1px solid var(--bronze-dim);
           font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--bronze-soft);line-height:1.7}

/* ── Mandates ─────────────────────────────────────────────────────────
   Six short lines belong in one table, not six padded cards. Rows carry
   only vertical rhythm — no per-cell padding, no per-cell border box — so
   the section states the same six things in roughly half the height. */
.mandates{margin-top:clamp(28px,3.2vw,44px);max-width:56rem;
          border-top:1px solid var(--bronze-dim)}
.mandate{display:grid;grid-template-columns:1fr;gap:5px;
         padding:clamp(13px,1.4vw,17px) 0;border-bottom:1px solid var(--bronze-dim);
         transition:background .4s var(--ease)}
@media(min-width:760px){
  .mandate{grid-template-columns:14.5rem 1fr;gap:clamp(20px,2.4vw,36px);align-items:baseline}
}
.mandate .n{font-family:var(--ff-sans);font-size:.6875rem;text-transform:uppercase;
            letter-spacing:.15em;color:var(--bronze);line-height:1.5}
.mandate .d{font-size:.9375rem;line-height:1.6;color:var(--text)}
@media(min-width:768px){.mandate .d{font-size:1rem}}

/* Sector rows — full-bleed list, each row a line of substance. */
.rows{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--bronze-dim)}
.row{border-bottom:1px solid var(--bronze-dim);display:grid;grid-template-columns:1fr;gap:8px;
     padding:clamp(22px,2.6vw,34px) var(--gx);transition:background .5s var(--ease);position:relative}
@media(min-width:900px){.row{grid-template-columns:2rem 22rem 1fr;gap:28px;align-items:baseline}}
.row:hover{background:var(--navy-raised)}
.row .i{font-family:var(--ff-serif);font-size:.8125rem;color:var(--bronze)}
.row .t{font-family:var(--ff-serif);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.22}
.row .d{font-size:.9375rem;line-height:1.7;color:var(--text);max-width:44rem}
@media(min-width:768px){.row .d{font-size:1rem}}

/* Ticker */
.ticker{position:relative;overflow:hidden;padding:clamp(30px,4vw,52px) 0;
        border-top:1px solid var(--bronze-dim);border-bottom:1px solid var(--bronze-dim)}
.ticker .track{display:flex;width:max-content;animation:marq 46s linear infinite}
.ticker:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.ticker ul{display:flex;list-style:none;flex-shrink:0;align-items:center}
.ticker li{display:flex;align-items:center;white-space:nowrap}
.ticker .t{font-family:var(--ff-serif);font-weight:500;font-size:clamp(1.125rem,2vw,1.625rem);color:rgba(245,243,239,.85)}
.dot{width:6px;height:6px;background:var(--bronze);transform:rotate(45deg);margin:0 clamp(22px,3.5vw,48px)}
.fade{position:absolute;top:0;bottom:0;width:80px;z-index:5;pointer-events:none}
.fade.l{left:0;background:linear-gradient(to right,var(--navy),transparent)}
.fade.r{right:0;background:linear-gradient(to left,var(--navy),transparent)}


/* Board — one compact row, not a grid of monuments */
.board-row{display:flex;gap:clamp(18px,2.6vw,32px);align-items:flex-start;flex-wrap:wrap}
.shot{position:relative;width:clamp(88px,13vw,150px);aspect-ratio:4/5;overflow:hidden;
      background:var(--navy-raised);flex-shrink:0}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
          filter:grayscale(1) contrast(1.05)}
.shot.empty{display:flex;align-items:center;justify-content:center}
.shot.empty::before{content:'';position:absolute;inset:10px;border:1px solid var(--bronze-dim)}
.monogram{position:relative;font-family:var(--ff-mast);font-size:clamp(1.6rem,4vw,2.4rem);
  line-height:1;color:var(--bronze);letter-spacing:.06em}
.who{flex:1;min-width:16rem}
.role{margin-top:8px;font-size:.6875rem;text-transform:uppercase;letter-spacing:.12em;
      line-height:1.7;color:var(--bronze-soft)}
.hist{margin-top:18px;list-style:none;display:flex;flex-direction:column;gap:8px}
.hist li{display:flex;gap:11px;font-size:.8125rem;line-height:1.6;color:var(--text)}
.hist i{margin-top:7px;width:4px;height:4px;flex-shrink:0;background:var(--bronze);transform:rotate(45deg)}

/* The four stages of a mandate, on one rule */
.steps{display:flex;flex-wrap:wrap;align-items:center;margin-top:clamp(28px,3.5vw,44px);
       border-top:1px solid var(--bronze-dim);padding-top:20px}
.steps span{font-size:.6875rem;text-transform:uppercase;letter-spacing:.15em;color:var(--mute)}
.steps i{width:5px;height:5px;background:var(--bronze);transform:rotate(45deg);
         margin:0 clamp(12px,2vw,22px);flex-shrink:0}


/* Contact */
.contact{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--bronze-dim)}
@media(min-width:1000px){.contact{grid-template-columns:1fr 1fr}}
.contact > div{padding:clamp(44px,5vw,88px) var(--gx)}
.contact .right{border-top:1px solid var(--bronze-dim);background:var(--navy-raised)}
@media(min-width:1000px){.contact .right{border-top:0;border-left:1px solid var(--bronze-dim)}}
dl.ways{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--bronze-dim);padding-top:28px;
        display:flex;flex-direction:column;gap:24px}
dl.ways dd{margin-top:8px;font-family:var(--ff-serif);font-size:clamp(1.1rem,2vw,1.5rem)}
dl.ways dd a:hover{color:var(--bronze-soft)}
.fields{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:600px){.fields{grid-template-columns:repeat(2,1fr)}}
label{display:block;font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;color:var(--mute)}
input,select,textarea{margin-top:10px;width:100%;background:transparent;border:0;
  border-bottom:1px solid rgba(176,141,87,.28);padding:11px 0;font:inherit;font-size:1rem;
  color:var(--ivory);outline:none;transition:border-color .3s;border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--bronze)}
select{appearance:none}select option{background:var(--navy-raised)}
textarea{resize:vertical}textarea::placeholder{color:rgba(138,148,166,.5)}
.submit{margin-top:34px;width:100%;padding:17px}
.note{margin-top:10px;font-size:.75rem;line-height:1.65;color:var(--mute)}
.hp{position:absolute;left:-9999px}

/* Footer */
footer{border-top:1px solid var(--bronze-dim);background:var(--navy-deep)}
.fgrid{display:grid;grid-template-columns:1fr;gap:44px;padding-top:clamp(56px,6vw,88px)}
@media(min-width:900px){.fgrid{grid-template-columns:1.5fr 1fr 1fr;gap:56px}}
footer ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:13px}
footer ul a{font-size:.875rem;color:var(--mute);transition:color .3s}
footer ul a:hover{color:var(--ivory)}
.legal{margin-top:clamp(48px,5vw,72px);border-top:1px solid var(--bronze-dim);
       padding:26px 0 clamp(34px,4vw,48px);display:flex;flex-direction:column;gap:12px;
       font-size:.6875rem;color:rgba(138,148,166,.7)}
@media(min-width:768px){.legal{flex-direction:row;justify-content:space-between;align-items:center}}

/* Scroll reveals.
   The hidden state is scoped to .js, which the inline script in layout.tsx
   adds to <html> before paint. If scripting never runs — or throws — every
   section is simply visible. */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}




/* ──────────────────────────────────────────────────────────────────────
   Motion is decorative, never load-bearing: with reduced motion enabled
   every element renders in its final position.
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js .rv { opacity: 1; transform: none; }
  #frame { opacity: .26; transform: none; }
}

/* ── Language switcher ─────────────────────────────────────────────── */
.langsw{display:flex;align-items:center;gap:2px}
.langsw button{background:none;border:0;padding:6px 8px;cursor:pointer;
  font-family:var(--ff-sans);font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--mute);transition:color .3s}
.langsw button:hover{color:var(--ivory)}
.langsw button[aria-current="true"]{color:var(--bronze)}
.langsw span[aria-hidden]{color:var(--bronze-dim);font-size:.625rem}
.foot-lang{margin-top:20px;margin-left:-8px}

/* Screen-reader-only, used by the skip link. */
.sr-only:not(:focus):not(:active) {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   MULTI-PAGE ADDITIONS
   Everything above this line is the established site stylesheet, unchanged.
   What follows only adds the components the new pages need, built from the
   same tokens: hairlines, bronze labels, Spectral headings, Plex body.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Inner pages: no masthead, so the bar and the frame are there from the
      first paint rather than arriving on scroll. ─────────────────────── */
.inner #nav{transform:none;opacity:1;pointer-events:auto}
.inner #frame{opacity:.3;transform:none}
#nav .desk a[aria-current="page"]{color:var(--ivory)}
#nav .desk a[aria-current="page"]::after{content:'';display:block;height:1px;margin-top:4px;background:var(--bronze)}
#drawer a[aria-current="page"]{color:var(--bronze-soft)}

/* ── Language switcher as real links ─────────────────────────────────── */
.langsw a,.langsw .on,.langsw .off{padding:6px 8px;font-family:var(--ff-sans);font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.12em;line-height:1}
.langsw a{color:var(--mute);transition:color .3s}
.langsw a:hover{color:var(--ivory)}
.langsw .on{color:var(--bronze)}
.langsw .off{color:var(--mute);opacity:.4;cursor:default}

/* ── Page opening for inner pages ────────────────────────────────────── */
.page-hero{padding-top:calc(clamp(96px,11vw,168px) + var(--frame));padding-bottom:clamp(48px,6vw,88px)}
.display{font-family:var(--ff-serif);font-weight:500;font-size:clamp(2rem,4.4vw,3.5rem);
  line-height:1.1;letter-spacing:-.005em;margin-top:22px;max-width:22ch}
.display.long{font-size:clamp(1.625rem,3.2vw,2.5rem);line-height:1.18;max-width:30ch}
.page-hero .lede{margin-top:clamp(20px,2.6vw,32px);max-width:40rem}
.page-hero .btn{margin-top:clamp(28px,3.4vw,40px)}

/* ── Two pathways ───────────────────────────────────────────────────────
   One block split by a single hairline — the choice between investor and
   company, not two promotional cards. */
.paths{display:grid;grid-template-columns:1fr;border-top:1px solid var(--bronze-dim);
  border-bottom:1px solid var(--bronze-dim)}
@media(min-width:860px){.paths{grid-template-columns:1fr 1fr}}
.path{padding:clamp(32px,4vw,56px) var(--gx);display:flex;flex-direction:column;gap:14px}
.path + .path{border-top:1px solid var(--bronze-dim)}
@media(min-width:860px){.path + .path{border-top:0;border-left:1px solid var(--bronze-dim)}}
.path .k{font-size:.6875rem;text-transform:uppercase;letter-spacing:.15em;color:var(--bronze)}
.path p{font-family:var(--ff-serif);font-weight:500;font-size:clamp(1.2rem,1.9vw,1.5rem);
  line-height:1.35;max-width:26ch}
.path .more{margin-top:auto;padding-top:10px}

/* ── Arrow link ──────────────────────────────────────────────────────── */
.more{display:inline-flex;align-items:center;gap:10px;font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.15em;color:var(--bronze-soft);transition:gap .3s var(--ease),color .3s}
.more::after{content:'→';font-size:.875rem;letter-spacing:0}
.more:hover{gap:16px;color:var(--ivory)}
.below{margin-top:clamp(20px,2.4vw,28px)}

/* ── Tables: one block per list, rows carry only vertical rhythm ─────────
   The mandates-table pattern, generalised. `.num` adds a running number
   for sequences, where the order carries meaning. */
.tbl{margin-top:clamp(28px,3.2vw,44px);max-width:58rem;border-top:1px solid var(--bronze-dim);counter-reset:row}
.tr{display:grid;grid-template-columns:1fr;gap:5px;padding:clamp(13px,1.4vw,17px) 0;
  border-bottom:1px solid var(--bronze-dim)}
@media(min-width:760px){.tr{grid-template-columns:15rem 1fr;gap:clamp(20px,2.4vw,36px);align-items:baseline}}
.tr .n{font-size:.6875rem;text-transform:uppercase;letter-spacing:.15em;color:var(--bronze);line-height:1.5}
.tr .d{font-size:.9375rem;line-height:1.6;color:var(--text)}
@media(min-width:768px){.tr .d{font-size:1rem}}
.tbl.num .tr .n::before{counter-increment:row;content:counter(row,decimal-leading-zero);
  display:inline-block;width:2.4em;color:var(--mute);font-family:var(--ff-serif);letter-spacing:0;font-size:.8125rem}

/* A list of single items in two columns — same hairlines, no descriptions. */
.items{margin-top:clamp(28px,3.2vw,44px);max-width:58rem;display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--bronze-dim)}
@media(min-width:700px){.items{grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,48px)}}
.items li{padding:13px 0;border-bottom:1px solid var(--bronze-dim);font-family:var(--ff-serif);
  font-weight:500;font-size:1.0625rem}

/* Sub-group heading inside a section (e.g. Investment Advisory). */
.group{margin-top:clamp(40px,5vw,64px)}
.group:first-child{margin-top:clamp(28px,3.2vw,44px)}
.group h3{font-family:var(--ff-serif);font-weight:500;font-size:clamp(1.25rem,2vw,1.5rem)}
.group .tbl{margin-top:16px}

/* Sectors in a single row on the home page. */
.sect4{margin-top:clamp(24px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--bronze-dim)}
@media(min-width:900px){.sect4{grid-template-columns:repeat(4,1fr)}}
.sect4 li{padding:16px 18px 16px 0;border-bottom:1px solid var(--bronze-dim);font-family:var(--ff-serif);
  font-weight:500;font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.35}

/* ── People ──────────────────────────────────────────────────────────── */
.subhead{margin-top:clamp(36px,4.4vw,56px);padding-bottom:12px;border-bottom:1px solid var(--bronze-dim);
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.15em;color:var(--mute)}
.person{display:flex;gap:clamp(18px,2.6vw,32px);align-items:flex-start;flex-wrap:wrap;
  padding:clamp(24px,3vw,36px) 0;border-bottom:1px solid var(--bronze-dim)}
.person .who{flex:1;min-width:16rem;max-width:44rem}
.person .bio{margin-top:14px;font-size:.9375rem;line-height:1.65;color:var(--text)}
.person-note{margin-top:18px}
.people-strip .tr .n{text-transform:none;letter-spacing:0;font-family:var(--ff-serif);font-weight:500;
  font-size:1.0625rem;color:var(--ivory)}

/* ── Contact entries ─────────────────────────────────────────────────── */
.entries{margin-top:clamp(32px,4vw,52px)}
.entries .path{padding-left:0;padding-right:0}
@media(min-width:860px){.entries .path{padding-right:clamp(24px,3vw,48px)}
  .entries .path + .path{padding-left:clamp(24px,3vw,48px)}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
dl.ways dd.plain{font-family:var(--ff-sans);font-size:1rem;line-height:1.6;color:rgba(245,243,239,.82)}

/* ── Forms ───────────────────────────────────────────────────────────── */
.formsec{display:grid;grid-template-columns:1fr;border-top:1px solid var(--bronze-dim)}
@media(min-width:1000px){.formsec{grid-template-columns:1fr 1.25fr}}
.formsec > div{padding:clamp(44px,5vw,80px) var(--gx)}
.formsec .right{border-top:1px solid var(--bronze-dim);background:var(--navy-raised)}
@media(min-width:1000px){.formsec .right{border-top:0;border-left:1px solid var(--bronze-dim)}}
.field{margin-top:22px}
.fields .field{margin-top:0}
label .opt{margin-left:6px;text-transform:none;letter-spacing:0;color:rgba(138,148,166,.6)}

/* Regulatory line — small, but present wherever money is discussed. */
.disc{margin-top:18px;font-size:.75rem;line-height:1.6;color:var(--mute);max-width:44rem}
.legal .disc{margin-top:0}

/* The hero sentence is the page's h1 now, so it must not inherit the
   browser's bold. */
h1.hero-sub{font-weight:400}

/* The 26ch measure is for the sentence, not the label above it — otherwise
   "For Companies & Project Owners" wraps and the two columns start on
   different lines. */
.path p.k{max-width:none}

/* Section rhythm, tightened. The brief asks for less idle vertical space;
   the editorial gaps stay, they just stop doubling up between every block. */
.pad{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(48px,6vw,96px)}

/* The drawer's own padding rule outranked .bleed, so menu items sat flush
   against the screen edge on phones. Restore the gutter. */
#drawer ul{padding-left:var(--gx);padding-right:var(--gx)}