/* ═══════════════════════════════════════════════════════════════════════════
   ELBRIDGE CAPITAL — stylesheet
   ---------------------------------------------------------------------------
   Everything you are likely to change lives in the DESIGN TOKENS block below.
   Change a value once here and it updates across the whole site.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS  ←←← EDIT COLOURS, SPACING AND TYPE SIZES HERE
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  /* — Κλειδώνει τη σελίδα σε light: εμποδίζει το Auto Dark Theme του Chrome
     στο Android και κρατά native controls (radio, scrollbars, file input)
     στα χρώματα του site. Δεν αλλάζει τίποτα οπτικά. */
  color-scheme: light;

  /* — Brand colours ————————————————————————————————— */
  --ink:            #0A233C;   /* primary navy — headings, body text        */
  --ink-deep:       #05172A;   /* deepest navy — hero field, dark sections  */
  --ink-rgb:        10,35,60;
  --accent:         #1878C0;   /* Elbridge blue — fills, borders, focus     */
  --accent-ink:     #1569AC;   /* darker blue — small TEXT on light grounds
                                  (the brand blue itself only reaches 4.4:1
                                  on tinted grounds, this one clears 5.4:1) */
  --accent-soft:    #A6CDEA;   /* pale blue — on dark grounds               */
  --accent-rgb:     24,120,192;

  /* — Highlight accent —————————————————————————————
     Taken from the cyan in the bridge mark itself. Swap these two values to
     re-theme every accent on the site in one edit.
       --accent-bright : DARK grounds  (7.8:1 on the navy hero)
       --accent-ink    : LIGHT grounds (5.8:1 on white)
     A single colour cannot do both: the brand blue #1878C0 only reaches
     3.9:1 on navy, and this cyan only 2.3:1 on white. */
  --accent-bright:     #4FB4E8;
  --accent-bright-rgb: 79,180,232;

  /* — Neutrals ————————————————————————————————————— */
  --paper:          #FFFFFF;   /* page ground                               */
  --paper-2:        #F5F8FB;   /* alternating band ground                   */
  --paper-3:        #ECF2F8;   /* deepest light tint                        */
  --paper-rgb:      255,255,255;
  --muted:          #4A6076;   /* secondary text                            */
  --muted-2:        #5E7186;   /* tertiary text, captions                   */
  --line:           rgba(var(--ink-rgb),.11);
  --line-strong:    rgba(var(--ink-rgb),.20);
  --line-light:     rgba(var(--paper-rgb),.16);

  /* — Typefaces ———————————————————————————————————— */
  --serif: "SourceSerif4",Georgia,"Times New Roman",serif;
  --sans:  "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* — Layout ——————————————————————————————————————— */
  --logo-h: clamp(46px, calc(2.25vw + 37.5px), 70px);
                               /* the Elbridge mark, header AND footer. One
                                  formula across every width, so it grows
                                  smoothly instead of stepping at a
                                  breakpoint: 46px on a phone, 70px on a
                                  desktop. Edit here and both move together. */
  --wrap:   1220px;            /* max content width                         */
  --pad:    clamp(1.25rem,5vw,3.5rem);
  --inset:  clamp(8px,.9vw,14px);   /* gap around the rounded hero stage    */

  /* — Spacing scale (spacious) ————————————————————— */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2.25rem;
  --s-5: 3.5rem; --s-6: 5rem;   --s-7: 7rem;    --s-8: 9.5rem;
  --sec-y: clamp(2.25rem,4vw,3.25rem);  /* vertical padding inside a section  */

  /* — Capital-structure diagram (Approach) ————————————
     Tier heights, drawn to scale. Unitranche is derived as
     mezzanine + gap + senior, so it always covers exactly those two
     positions no matter what you set here. */
  --cs-eq-h:  52px;   /* equity     */
  --cs-mz-h:  44px;   /* mezzanine  */
  --cs-sr-h:  88px;   /* senior     */

  /* — Corner radii ————————————————————————————————— */
  --r-stage: clamp(20px,2.4vw,34px);  /* the big rounded hero canvas        */
  --r-card:  20px;
  --r-sm:    12px;
  --r-pill:  999px;

  /* — Motion ——————————————————————————————————————— */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    .18s;
  --t-mid:     .34s;
  --t-slow:    .7s;

  /* — Elevation ———————————————————————————————————— */
  --sh-1: 0 1px 2px rgba(var(--ink-rgb),.05), 0 4px 14px rgba(var(--ink-rgb),.05);
  --sh-2: 0 2px 6px rgba(var(--ink-rgb),.06), 0 16px 44px rgba(var(--ink-rgb),.10);
  --sh-3: 0 30px 90px rgba(var(--ink-rgb),.20);
}

/* ───────────────────────────────────────────────────────────────────────────
   2. SELF-HOSTED TYPEFACES  (no third-party request)
   ─────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Spectral';font-style:normal;font-weight:200;font-display:swap;
  src:url(../fonts/Spectral-200.woff2) format('woff2');
  unicode-range:U+0020-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/Spectral-300.woff2) format('woff2');
  unicode-range:U+0020-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/Spectral-400.woff2) format('woff2');
  unicode-range:U+0020-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:italic;font-weight:200;font-display:swap;
  src:url(../fonts/Spectral-200-italic.woff2) format('woff2');
  unicode-range:U+0020-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'SourceSerif4';font-style:normal;font-weight:200 700;font-display:swap;
  src:url(../fonts/SourceSerif4-latin.woff2) format('woff2');
  unicode-range:U+0020-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'SourceSerif4';font-style:normal;font-weight:200 700;font-display:swap;
  src:url(../fonts/SourceSerifGR-greek.woff2) format('woff2');
  unicode-range:U+0370-03FF,U+1F00-1FFE,U+2000-206F,U+20AC,U+00A0}
@font-face{font-family:'SourceSerifGR';font-style:normal;font-weight:200 700;font-display:swap;
  src:url(../fonts/SourceSerifGR-greek.woff2) format('woff2');
  unicode-range:U+0370-03FF,U+1F00-1FFE,U+2000-206F,U+20AC,U+00A0}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/Inter-latin.woff2) format('woff2');
  unicode-range:U+0020-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/Inter-greek.woff2) format('woff2');
  unicode-range:U+0370-03FF,U+1F00-1FFE,U+2000-206F,U+20AC,U+00A0}

/* ───────────────────────────────────────────────────────────────────────────
   3. RESET & BASE
   ─────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:200;letter-spacing:-.015em;line-height:1.1}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:rgba(var(--accent-rgb),.18)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.nb,.nbk{white-space:nowrap}
.nbk{display:inline-block}

/* Visible keyboard focus everywhere — never removed */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
.on-dark :focus-visible,.hero :focus-visible,footer :focus-visible{outline-color:var(--accent-bright)}

/* Skip-safety: content is visible if JS never runs */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.js .rv.in{opacity:1;transform:none}

/* ───────────────────────────────────────────────────────────────────────────
   4. HEADER — floating frosted pill navigation
   ─────────────────────────────────────────────────────────────────────────── */
#hdr{
  position:fixed;inset:0 0 auto;z-index:60;
  padding:clamp(10px,1.4vw,20px) 0;
  transition:background var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             padding var(--t-mid) var(--ease);
}
#hdr .nav{
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  max-width:calc(var(--wrap) + 120px);
}

/* — brand lockup — */
.brand{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.brand .logo{width:auto;height:var(--logo-h)}
.brand .wm{display:none}   /* wordmark lives inside the logo artwork */
/* white mark while the bar floats over the dark hero, colour mark once stuck */
.brand .logo-dark{display:none}
#hdr.stuck .brand .logo-light{display:none}
#hdr.stuck .brand .logo-dark{display:block}

/* — centre pill — */
.nav-links{
  display:flex;align-items:center;gap:2px;
  margin-inline:auto;padding:5px;
  border-radius:var(--r-pill);
  background:rgba(var(--paper-rgb),.10);
  border:1px solid rgba(var(--paper-rgb),.16);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  transition:background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease);
}
.nav-links a{
  display:block;padding:.5rem clamp(.7rem,1.1vw,1.05rem);
  border-radius:var(--r-pill);
  font-size:.795rem;font-weight:500;letter-spacing:.055em;text-transform:uppercase;
  color:rgba(var(--paper-rgb),.82);
  white-space:nowrap;cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.nav-links a:hover{background:rgba(var(--paper-rgb),.14);color:#fff}
.nav-links a.active{background:rgba(var(--paper-rgb),.95);color:var(--ink)}

/* — language switch — */
.lang-sw{
  display:flex;align-items:center;gap:.5rem;flex:0 0 auto;
  font-size:.75rem;font-weight:600;letter-spacing:.08em;
  color:rgba(var(--paper-rgb),.55);
}
.lang-sw .on{color:#fff}
.lang-sw .dv{width:1px;height:11px;background:rgba(var(--paper-rgb),.28)}
.lang-sw .ls{color:rgba(var(--paper-rgb),.55);cursor:pointer;transition:color var(--t-fast)}
.lang-sw .ls:hover{color:#fff}

/* — portal button — */
.btn-portal{
  flex:0 0 auto;
  display:inline-flex;align-items:center;
  padding:.62rem 1.15rem;border-radius:var(--r-pill);
  border:1px solid var(--accent-bright);
  color:var(--accent-bright);
  font-size:.755rem;font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.btn-portal:hover{background:var(--accent-bright);color:var(--ink-deep)}

/* — scrolled state: frosted white bar, dark type — */
#hdr.stuck{
  background:rgba(var(--paper-rgb),.86);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 1px 0 var(--line),0 8px 30px rgba(var(--ink-rgb),.07);
}
#hdr.stuck .nav-links{background:rgba(var(--ink-rgb),.045);border-color:var(--line)}
#hdr.stuck .nav-links a{color:var(--muted)}
#hdr.stuck .nav-links a:hover{background:rgba(var(--ink-rgb),.06);color:var(--ink)}
#hdr.stuck .nav-links a.active{background:var(--ink);color:#fff}
#hdr.stuck .lang-sw{color:var(--muted-2)}
#hdr.stuck .lang-sw .on{color:var(--ink)}
#hdr.stuck .lang-sw .dv{background:var(--line-strong)}
#hdr.stuck .lang-sw .ls{color:var(--muted-2)}
#hdr.stuck .lang-sw .ls:hover{color:var(--ink)}
#hdr.stuck .btn-portal{border-color:var(--accent-ink);color:var(--accent-ink)}
#hdr.stuck .btn-portal:hover{background:var(--accent-ink);color:#fff}
#hdr.stuck .brand .logo{content:none}
#hdr.stuck .burger span{background:var(--ink)}

/* — burger (mobile) — */
.burger{display:none;flex:0 0 auto;width:42px;height:42px;
  border-radius:var(--r-pill);border:1px solid rgba(var(--paper-rgb),.22);
  align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer}
.burger span{display:block;width:16px;height:1.5px;background:#fff;border-radius:2px;
  transition:transform var(--t-mid) var(--ease),opacity var(--t-fast)}
.burger-close{display:none}
#hdr.stuck .burger{border-color:var(--line-strong)}

/* ───────────────────────────────────────────────────────────────────────────
   5. HERO — inset cinematic navy stage
   ─────────────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;isolation:isolate;
  margin:var(--inset) var(--inset) 0;
  border-radius:var(--r-stage);
  overflow:hidden;
  min-height:min(78vh,660px);
  display:flex;align-items:flex-end;
  padding-block:clamp(6.5rem,12vh,8.5rem) clamp(2.75rem,5vw,4.25rem);
  color:#fff;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(var(--accent-rgb),.30) 0%, transparent 58%),
    radial-gradient(90% 70% at 8% 96%, rgba(var(--accent-bright-rgb),.16) 0%, transparent 60%),
    linear-gradient(168deg, #0B2743 0%, var(--ink-deep) 55%, #03101F 100%);
}
/* fine grain so the large flat field never looks like plastic */
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero .wrap{position:relative;z-index:4}

/* bridge artwork, large and cinematic along the lower edge */
.hero-art{
  position:absolute;z-index:1;
  right:0;bottom:0;
  width:min(122%,1680px);
  opacity:.5;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 96%);
          mask-image:linear-gradient(to top,#000 30%,transparent 96%);
}
.hero-eyebrow{
  margin:0 0 clamp(1.1rem,2.4vw,1.9rem);
  font-size:.78rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-bright);
}
.hero h1{
  margin:0;max-width:17ch;
  font-size:clamp(2.6rem,6.6vw,5.6rem);
  font-weight:200;line-height:1.045;letter-spacing:-.028em;
  text-wrap:balance;
}
.hero h1 em{
  font-style:normal;color:var(--accent-bright);
  position:relative;white-space:nowrap;
}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.1em;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-bright-rgb),.75),transparent);
}
.hero-lead{
  margin:clamp(1.5rem,3vw,2.1rem) 0 0;max-width:56ch;
  font-size:clamp(1rem,1.32vw,1.145rem);line-height:1.68;
  color:rgba(var(--paper-rgb),.76);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(2rem,4vw,2.9rem)}

/* — buttons — */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:var(--r-pill);
  font-size:.83rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;border:1px solid transparent;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:#fff;color:var(--ink-deep)}
.btn-primary:hover{background:var(--accent-bright);color:var(--ink-deep)}
.btn-ghost{border-color:rgba(var(--paper-rgb),.34);color:#fff}
.btn-ghost:hover{background:rgba(var(--paper-rgb),.12);border-color:rgba(var(--paper-rgb),.55)}
.btn .arw{transition:transform var(--t-mid) var(--ease-out)}
.btn:hover .arw{transform:translateX(4px)}

/* — wordless scroll cue (no new copy) — */
.hero::before{
  content:"";position:absolute;z-index:5;
  right:clamp(1.25rem,5vw,3.5rem);bottom:clamp(1.6rem,3vw,2.4rem);
  width:1px;height:clamp(38px,6vh,60px);
  background:linear-gradient(to bottom,transparent,var(--accent-bright));
  transform-origin:top;
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{transform:scaleY(0);opacity:0}
  35%{transform:scaleY(1);opacity:1}
  75%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(1);opacity:0}}

/* guilloche rings — faint engraved security-print motif */
.guil{position:absolute;pointer-events:none;color:currentColor}
.guil-hero{
  z-index:2;top:-14%;right:-8%;
  width:min(56vw,720px);opacity:.10;color:var(--accent-soft);
}
.guil-hero path{stroke:currentColor;stroke-width:.5;fill:none}

/* ───────────────────────────────────────────────────────────────────────────
   6. METRICS — glass card lifted over the hero edge
   ─────────────────────────────────────────────────────────────────────────── */
.metrics{position:relative;z-index:20;margin-top:calc(-1 * clamp(2.6rem,5vw,4.4rem))}
.metrics .wrap{max-width:calc(var(--wrap) + 40px)}
.metrics-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(var(--paper-rgb),.82);
  backdrop-filter:blur(26px) saturate(1.7);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid rgba(var(--paper-rgb),.7);
  border-radius:var(--r-card);
  box-shadow:var(--sh-3);
  overflow:hidden;
}
.metric{
  padding:clamp(1.5rem,2.6vw,2.3rem) clamp(1.1rem,2vw,1.9rem);
  border-right:1px solid var(--line);
}
.metric:last-child{border-right:0}
.metric .val{
  font-family:var(--serif);font-weight:200;
  font-size:clamp(1.85rem,3.4vw,2.85rem);line-height:1;
  letter-spacing:-.028em;color:var(--ink);
  display:flex;align-items:baseline;gap:.06em;
}
.metric .val .cur{font-size:.62em;color:var(--accent-ink)}
.metric .lbl{
  margin-top:.7rem;
  font-size:.715rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);line-height:1.5;
}
.metric .lbl .nb{color:var(--muted)}

/* ───────────────────────────────────────────────────────────────────────────
   7. SECTIONS & SECTION HEADINGS
   ─────────────────────────────────────────────────────────────────────────── */
section{position:relative;padding-block:var(--sec-y)}
.sec-head{margin-bottom:clamp(1.6rem,3vw,2.4rem);max-width:62ch}
.eyebrow{
  margin:0 0 1.1rem;
  font-size:.735rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-ink);
  display:flex;align-items:center;gap:.85rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent-ink);flex:0 0 auto}
.sec-head h2{
  font-size:clamp(1.95rem,4.1vw,3.15rem);
  font-weight:200;line-height:1.11;letter-spacing:-.024em;
  color:var(--ink);text-wrap:balance;
}
/* :not(.eyebrow) — the eyebrow is also a <p> in here and must keep its own
   brass colour and tighter spacing rather than inherit the body-copy rule */
.sec-head p:not(.eyebrow){
  margin-top:1.35rem;max-width:60ch;
  font-size:clamp(1rem,1.2vw,1.09rem);line-height:1.72;color:var(--muted);
}
.on-dark .eyebrow{color:var(--accent-bright)}
.on-dark .eyebrow::before{background:var(--accent-bright)}
.on-dark .sec-head h2{color:#fff}
.on-dark .sec-head p{color:rgba(var(--paper-rgb),.72)}

/* decorative engraved bands (Greek motifs) sitting behind content */
.gbandwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.gbandwrap .in{position:absolute;inset:0}
.gband{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.on-dark .gband{opacity:.14;filter:invert(1) brightness(2)}
section > .wrap{position:relative;z-index:2}

/* ───────────────────────────────────────────────────────────────────────────
   8. ABOUT
   ─────────────────────────────────────────────────────────────────────────── */
#about{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,4rem)}
.about-body{max-width:68ch}
.about-body p:not(.eyebrow){
  font-size:clamp(1.02rem,1.28vw,1.16rem);line-height:1.78;color:var(--muted);
}
.about-body p strong{color:var(--ink);font-weight:600}
.about-body p + p{margin-top:1.3rem}

/* ───────────────────────────────────────────────────────────────────────────
   9. THE FUND
   ─────────────────────────────────────────────────────────────────────────── */
.fund-head h3{
  font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:200;letter-spacing:-.024em;
  color:var(--ink);margin-bottom:1.3rem;
}
.f-strat{
  max-width:70ch;margin-bottom:clamp(1.6rem,3vw,2.4rem);
  font-size:clamp(1rem,1.24vw,1.12rem);line-height:1.76;color:var(--muted);
}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.5rem,3vw,2.4rem)}
.f-grid > div{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.6rem,2.8vw,2.4rem);
  transition:box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease);
}
.f-grid > div:hover{box-shadow:var(--sh-2);border-color:transparent}
.f-grid h4{
  margin:0 0 1.5rem;padding-bottom:1rem;
  border-bottom:1px solid var(--line);
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);
}
.f-uses li,.f-crit li{
  padding:.9rem 0;border-bottom:1px solid var(--line);
  font-size:.955rem;line-height:1.62;color:var(--muted);
}
.f-uses li:last-child,.f-crit li:last-child{border-bottom:0;padding-bottom:0}
.f-uses li b{
  display:block;margin-bottom:.2rem;
  font-family:var(--serif);font-size:1.13rem;font-weight:300;letter-spacing:-.01em;
  color:var(--ink);
}
.f-crit li b{color:var(--ink);font-weight:600;margin-right:.3rem}

/* ───────────────────────────────────────────────────────────────────────────
   10. TEAM
   ─────────────────────────────────────────────────────────────────────────── */
#team{
  background:
    radial-gradient(80% 60% at 88% 4%, rgba(var(--accent-rgb),.22) 0%, transparent 60%),
    linear-gradient(170deg,#0B2743 0%,var(--ink-deep) 62%,#03101F 100%);
  color:#fff;
}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
.person{
  background:rgba(var(--paper-rgb),.045);
  border:1px solid rgba(var(--paper-rgb),.11);
  border-radius:var(--r-card);overflow:hidden;
  transition:background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease-out);
}
.person:hover{background:rgba(var(--paper-rgb),.085);border-color:rgba(var(--accent-bright-rgb),.5);transform:translateY(-4px)}
.p-open{display:block;cursor:pointer}
.avatar{position:relative;aspect-ratio:240/269;overflow:hidden;background:#0D2740}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:grayscale(1) contrast(1.04);
  transition:filter var(--t-slow) var(--ease),transform var(--t-slow) var(--ease-out)}
.person:hover .avatar img{filter:grayscale(0) contrast(1);transform:scale(1.045)}
.avatar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(3,16,31,.72) 0%,transparent 52%);
}
.person h3{
  margin:1.15rem clamp(1rem,1.6vw,1.35rem) .3rem;
  font-size:1.16rem;font-weight:300;letter-spacing:-.012em;color:#fff;
}
.person .role{
  margin:0 clamp(1rem,1.6vw,1.35rem);
  font-size:.735rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-soft);
}
.person .since{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-top:1.1rem;padding:.85rem clamp(1rem,1.6vw,1.35rem);
  border-top:1px solid rgba(var(--paper-rgb),.1);
  font-size:.685rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(var(--paper-rgb),.5);
}
.li-link{
  display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;
  border-radius:var(--r-pill);border:1px solid rgba(var(--paper-rgb),.18);
  color:rgba(var(--paper-rgb),.62);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.li-link svg{width:14px;height:14px;fill:currentColor}
.li-link:hover{background:var(--accent-bright);border-color:var(--accent-bright);color:var(--ink-deep)}

/* ───────────────────────────────────────────────────────────────────────────
   11. BIO PANELS  (:target modals — no JS)
   ─────────────────────────────────────────────────────────────────────────── */
.pnl{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-mid) var(--ease),visibility var(--t-mid);
}
.pnl:target{opacity:1;visibility:visible;pointer-events:auto}
.pnl-bg{position:absolute;inset:0;background:rgba(3,16,31,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pnl-in{
  position:relative;z-index:2;
  width:min(760px,100%);max-height:88vh;overflow-y:auto;
  background:var(--paper);border-radius:var(--r-card);
  padding:clamp(1.6rem,3.4vw,3rem);
  box-shadow:var(--sh-3);
  transform:translateY(14px) scale(.99);
  transition:transform var(--t-mid) var(--ease-out);
}
.pnl:target .pnl-in{transform:none}
.pnl-x{
  position:absolute;top:1rem;right:1.1rem;
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:1.4rem;line-height:1;color:var(--muted);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast)}
.pnl-x:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.pnl-head{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);flex-wrap:wrap-reverse}
.pnl-head > div:first-child{flex:1 1 260px}
.pnl-eyebrow{
  margin:0 0 .6rem;font-size:.7rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-ink)}
.pnl-head h3{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:200;letter-spacing:-.02em;color:var(--ink)}
.pnl-role{margin:.45rem 0 0;font-size:.79rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-ink)}
.pnl-ph{flex:0 0 auto;width:clamp(88px,13vw,124px);border-radius:var(--r-sm);overflow:hidden}
.pnl-ph img{width:100%;aspect-ratio:440/492;object-fit:cover;object-position:50% 20%}
.pnl-rule{height:1px;background:var(--line);margin:clamp(1.4rem,2.6vw,2rem) 0}
.pnl .b{font-size:.955rem;line-height:1.76;color:var(--muted);margin-bottom:1.05rem}
.pnl-li{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:.6rem;
  padding:.62rem 1.15rem;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  font-size:.755rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.pnl-li svg{width:15px;height:15px;fill:currentColor}
.pnl-li:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ───────────────────────────────────────────────────────────────────────────
   12. PORTFOLIO
   ─────────────────────────────────────────────────────────────────────────── */
#portfolio{background:var(--paper);border-top:1px solid var(--line)}
.pf{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.2rem,2.4vw,1.9rem)}
.pf-cell{display:block;cursor:pointer}
.pf-cell.ghost{cursor:default}
.pf-tile{
  position:relative;height:100%;min-height:225px;
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,2.8vw,2.2rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;
  transition:box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease-out);
}
.pf-cell:not(.ghost):hover .pf-tile{box-shadow:var(--sh-2);border-color:transparent;transform:translateY(-4px)}
.pf-tile .mark{
  font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.95rem);font-weight:300;
  letter-spacing:-.015em;color:var(--ink);line-height:1.16;
}
.pf-tile .rule{height:1px;background:var(--line);margin:1.2rem 0 1.15rem}
.pf-tile h4{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:.775rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.pf-tile h4 span{
  padding:.24rem .62rem;border-radius:var(--r-pill);
  background:rgba(var(--accent-rgb),.10);color:var(--accent-ink);
  font-size:.66rem;letter-spacing:.11em;white-space:nowrap;
}
.pf-go{
  margin-top:auto;padding-top:1.6rem;
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.775rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-ink);
}
.pf-go em{font-style:normal;transition:transform var(--t-mid) var(--ease-out)}
.pf-cell:hover .pf-go em{transform:translateX(5px)}
.pf-str{
  position:absolute;top:clamp(1.5rem,2.8vw,2.2rem);right:clamp(1.5rem,2.8vw,2.2rem);
  padding:.3rem .7rem;border-radius:var(--r-pill);
  border:1px solid var(--accent-ink);color:var(--accent-ink);
  font-size:.635rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
}
.pf-cell.ghost .pf-tile{
  background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(var(--ink-rgb),.022) 9px 18px);
  border-style:dashed;border-color:var(--line-strong);
  align-items:center;justify-content:center;text-align:center;
}
.pf-cell.ghost .mark{
  font-family:var(--sans);font-size:.775rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);line-height:1.9;
}
.pf-note{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  font-size:.87rem;color:var(--muted-2);max-width:62ch;
}

/* ───────────────────────────────────────────────────────────────────────────
   13. EPIGRAPH + BRIDGE BAND
   ─────────────────────────────────────────────────────────────────────────── */
.epi-band{
  position:relative;overflow:hidden;
  padding-block:clamp(3rem,5.5vw,5rem) 0;
  background:linear-gradient(170deg,#0B2743 0%,var(--ink-deep) 60%,#03101F 100%);
  color:#fff;
}
.epi{
  position:relative;z-index:3;max-width:22ch;
  font-family:var(--serif);font-weight:200;
  font-size:clamp(1.85rem,4.4vw,3.4rem);line-height:1.16;letter-spacing:-.026em;
  text-wrap:balance;
}
.epi .epi-2{display:block;color:var(--accent-bright)}
.epi cite{
  display:block;margin-top:clamp(1.4rem,2.6vw,2.1rem);
  font-family:var(--sans);font-style:normal;
  font-size:.715rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(var(--paper-rgb),.5);
}
/* clamp(-1rem,-2vw,-2rem) had its floor above its ceiling, so it silently
   collapsed to a flat -1rem at every width. With the top-fading mask gone
   the tower tips now carry full weight and were crossing 8px into the
   attribution line beneath the motto, so the band drops to a real zero. */
.bridge-band{margin-top:0;pointer-events:none}
.bridge-inner{width:100%}
.bridge-band .bridge-draw{width:100%;opacity:.55;
  -webkit-mask-image:linear-gradient(to top,#000 45%,transparent 100%);
          mask-image:linear-gradient(to top,#000 45%,transparent 100%)}

/* the bridge line-art itself */
/* Per-group stroke colours live in section 25 — the old catch-all rule that
   sat here used :not() selectors whose specificity outranked them, and it only
   matched <path>, leaving every <line> in the structure with no stroke. */
.bridge-draw path,.bridge-draw line{vector-effect:non-scaling-stroke}

/* ───────────────────────────────────────────────────────────────────────────
   14. APPROACH — the capital-structure widget
   ─────────────────────────────────────────────────────────────────────────── */
#focus{background:var(--paper-2);border-top:1px solid var(--line)}
.wdrow{margin-bottom:clamp(2rem,3.5vw,3rem)}
.wdwrap{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.5rem,3vw,2.6rem);box-shadow:var(--sh-1);
}
.wd-in{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.wd-tabs{
  display:inline-flex;gap:3px;padding:4px;margin-bottom:clamp(1.8rem,3.4vw,2.6rem);
  background:rgba(var(--ink-rgb),.05);border-radius:var(--r-pill);
}
.wd-dia{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.25rem;border-radius:var(--r-pill);cursor:pointer;
  font-size:.75rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.wd-dia i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45}
.wd-dia:hover{color:var(--ink)}
#wd-m:checked ~ .wd-tabs .wd-dia-m,
#wd-u:checked ~ .wd-tabs .wd-dia-u{background:var(--ink);color:#fff}
#wd-m:checked ~ .wd-tabs .wd-dia-m i,
#wd-u:checked ~ .wd-tabs .wd-dia-u i{background:var(--accent-bright);opacity:1}

/* capital stack */
.cs{display:flex;align-items:stretch;gap:clamp(1rem,2.4vw,2rem);flex-wrap:wrap}
.cs-col{flex:1 1 320px;display:flex;flex-direction:column;gap:6px}
.cs-blk{
  padding:1.05rem 1.35rem;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--paper-2);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  transition:opacity var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),
             background var(--t-mid) var(--ease),transform var(--t-mid) var(--ease);
}
.cs-blk b{
  font-family:var(--sans);font-size:.775rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.cs-blk span{font-size:.775rem;color:var(--muted-2);letter-spacing:.03em}
/* highlighted block = the position Elbridge takes in the selected structure */
.cs-hi{background:var(--ink);border-color:var(--ink)}
.cs-hi b{color:#fff}
.cs-hi span{color:var(--accent-bright)}
/* toggle which rows show for each instrument */
#wd-m:checked ~ .cs .cs-un,
#wd-u:checked ~ .cs .cs-mz,
#wd-u:checked ~ .cs .cs-sr{display:none}
#wd-m:checked ~ .cs .cs-sr{display:flex}
.cs-br{
  flex:0 0 auto;align-self:center;display:flex;align-items:center;gap:.6rem;
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);
}
.cs-br i{display:block;width:26px;height:1px;background:var(--accent-ink)}
.wd-say{
  margin:clamp(1.6rem,3vw,2.2rem) 0 0;max-width:64ch;
  font-size:.985rem;line-height:1.72;color:var(--muted);
}
#wd-m:checked ~ .wd-say-u,#wd-u:checked ~ .wd-say-m{display:none}

/* ───────────────────────────────────────────────────────────────────────────
   15. NEWS
   ─────────────────────────────────────────────────────────────────────────── */
#news{background:var(--paper)}
.news-list{border-top:1px solid var(--line)}
.news-item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1.2rem,3vw,2.6rem);
  padding:clamp(1.6rem,3vw,2.3rem) clamp(.4rem,1.4vw,1.2rem);
  border-bottom:1px solid var(--line);cursor:pointer;
  transition:background var(--t-mid) var(--ease),padding-inline var(--t-mid) var(--ease);
}
.news-item:hover{background:var(--paper-2);padding-inline:clamp(.9rem,2vw,1.8rem)}
.news-date{
  font-size:.71rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-ink);white-space:nowrap;
}
.news-item h3{
  font-size:clamp(1.05rem,1.85vw,1.42rem);font-weight:300;line-height:1.35;
  letter-spacing:-.012em;color:var(--ink);
}
.news-item .go{
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;
  border-radius:var(--r-pill);border:1px solid var(--line-strong);
  color:var(--accent-ink);font-size:1rem;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-mid) var(--ease-out);
}
.news-item:hover .go{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateX(4px)}

/* ───────────────────────────────────────────────────────────────────────────
   16. CONTACT
   ─────────────────────────────────────────────────────────────────────────── */
#contact{background:var(--paper-2);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.cinfo dl{margin:0}
.cinfo .row{padding:1.2rem 0;border-bottom:1px solid var(--line)}
.cinfo .row:first-child{padding-top:0}
.cinfo dt{
  font-size:.685rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:.5rem;
}
.cinfo dd{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)}
.cinfo dd a{color:var(--ink);border-bottom:1px solid transparent;transition:border-color var(--t-fast),color var(--t-fast)}
.cinfo dd a:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}
.li-inline{display:inline-flex;align-items:center;gap:.5rem}
.li-inline svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto}

/* — form — */
form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.5rem,3vw,2.6rem);box-shadow:var(--sh-1);
}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,2vw,1.4rem)}
form > div,.f2 > div{margin-bottom:clamp(.9rem,2vw,1.35rem)}
label{
  display:block;margin-bottom:.5rem;
  font-size:.685rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);
}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:.85rem 1rem;
  background:var(--paper);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-size:.95rem;color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14);
}
textarea{min-height:130px;resize:vertical}
select{
  appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234A6076' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:11px;
}
.f-file input[type=file]{
  width:100%;padding:.8rem;font-size:.85rem;color:var(--muted);
  border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  background:var(--paper-2);cursor:pointer;
}
.f-file input[type=file]::file-selector-button{
  margin-right:.9rem;padding:.5rem 1rem;border:0;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-size:.72rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;cursor:pointer;
}
.hint{margin:.65rem 0 0;font-size:.79rem;line-height:1.6;color:var(--muted-2)}
form button[type=submit]{
  width:100%;padding:1.05rem 1.7rem;margin-top:.5rem;
  border:0;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;
  font-size:.82rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
form button[type=submit]:hover{background:var(--accent)}
form button[type=submit]:active{transform:translateY(1px)}
.form-note{
  margin:1.1rem 0 0;text-align:center;
  font-size:.79rem;color:var(--muted-2);
}
.hp{position:absolute;left:-9999px}

/* ───────────────────────────────────────────────────────────────────────────
   17. FOOTER
   ─────────────────────────────────────────────────────────────────────────── */
footer{
  position:relative;overflow:hidden;
  padding-block:clamp(2.5rem,4.5vw,4rem) clamp(1.5rem,3vw,2.25rem);
  background:var(--ink-deep);color:rgba(var(--paper-rgb),.7);
}
.guil-foot{z-index:0;bottom:-32%;left:-6%;width:min(48vw,560px);opacity:.07;color:var(--accent-soft)}
.guil-foot path{stroke:currentColor;stroke-width:.5;fill:none}
footer .wrap{position:relative;z-index:2}
.f-top{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid rgba(var(--paper-rgb),.11);
}
.f-brand{margin-bottom:1.5rem}
.f-brand img{height:var(--logo-h);width:auto}
.f-up{display:inline-block;cursor:pointer;transition:opacity var(--t-fast)}
.f-up:hover{opacity:.75}
.f-desc{max-width:56ch;font-size:.9rem;line-height:1.72;color:rgba(var(--paper-rgb),.6)}
.f-support{display:flex;align-items:center;gap:1.1rem;margin-top:1.8rem;flex-wrap:wrap}
.f-support .lb{
  font-size:.665rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(var(--paper-rgb),.62);
}
.f-support .plate{
  display:block;padding:.7rem 1rem;border-radius:var(--r-sm);
  background:rgba(var(--paper-rgb),.06);border:1px solid rgba(var(--paper-rgb),.1);
  cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast);
}
.f-support .plate:hover{background:rgba(var(--paper-rgb),.1);border-color:rgba(var(--accent-bright-rgb),.5)}
.f-support .plate img{height:30px;width:auto}
.f-links{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.f-links a{
  font-size:.83rem;color:rgba(var(--paper-rgb),.66);cursor:pointer;
  border-bottom:1px solid transparent;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.f-links a:hover{color:var(--accent-bright);border-bottom-color:var(--accent-bright)}
.f-bot{padding-top:clamp(1.4rem,2.6vw,2rem)}
.f-bot p{margin:0;font-size:.775rem;color:rgba(var(--paper-rgb),.62)}

/* ───────────────────────────────────────────────────────────────────────────
   18. RESPONSIVE
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .nav-links a{padding:.5rem .72rem;font-size:.735rem}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(2){border-right:0}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .f-top{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
    /* only the open icon by default — .burger{display:flex} here would beat the
     earlier .burger-close{display:none}, and both icons showed at once */
  .burger-open{display:flex}

  /* mobile drawer, driven by :target — no JS */
  .nav-links{
    /* NOT inset:0. Once the header is scrolled it gains backdrop-filter, and a
       backdrop-filter makes the element a containing block for its fixed-
       position descendants — so inset:0 stopped resolving against the viewport
       and started resolving against the 66px header, collapsing the drawer to a
       136px strip. Explicit viewport dimensions are immune to that: the header
       sits at 0,0 with no transform, so top/left 0 is still the screen corner,
       and the size no longer depends on who the containing block is.
       dvh follows the mobile URL bar; the vh line above it is the fallback. */
    position:fixed;
    top:0;left:0;right:auto;bottom:auto;
    width:100vw;
    height:100vh;
    height:100dvh;
    z-index:70;
    margin:0;padding:6rem var(--pad) 2.5rem;
    flex-direction:column;align-items:stretch;gap:4px;
    border:0;border-radius:0;
    background:var(--ink-deep);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--t-mid) var(--ease),visibility var(--t-mid),transform var(--t-mid) var(--ease);
    overflow-y:auto;
  }
  #menu:target ~ .wrap .nav-links{opacity:1;visibility:visible;transform:none}
  #menu:target ~ .wrap .burger-open{display:none}
  /* The drawer is position:fixed inset:0 at z-index 70, so it paints over the
     whole header — including the close button, which was static and therefore
     had no z-index of its own to compete with. The X was being rendered every
     time and buried every time. It needs a position to make z-index apply, and
     71 to clear the drawer; both live in the same stacking context under #hdr,
     so the number only has to beat 70, not the header's own 60.

     The bars also have to be forced white here: over the dark drawer the
     scrolled header's navy bars would be invisible even once lifted on top. */
  #menu:target ~ .wrap .burger-close{
    display:flex;
    position:relative;
    z-index:71;
  }
  #menu:target ~ .wrap .burger-close span,
  #hdr.stuck #menu:target ~ .wrap .burger-close span{background:#fff}
  .nav-links a{
    padding:1rem .4rem;font-size:1.05rem;letter-spacing:.03em;
    text-transform:none;font-family:var(--serif);font-weight:300;
    color:#fff;border-bottom:1px solid rgba(var(--paper-rgb),.1);border-radius:0;
  }
  .nav-links a:hover,.nav-links a.active{background:transparent;color:var(--accent-bright)}
  #hdr.stuck .nav-links{background:var(--ink-deep);border:0}
  #hdr.stuck .nav-links a{color:#fff}
  #hdr.stuck .nav-links a.active{background:transparent;color:var(--accent-bright)}
  .burger-close span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .burger-close span:nth-child(2){opacity:0}
  .burger-close span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .burger-close{border-color:rgba(var(--paper-rgb),.3)}
  .burger-close span{background:#fff}

  .hero{min-height:auto;padding-block:clamp(7rem,20vh,9rem) clamp(3.5rem,8vw,5rem)}
  .hero-art{width:150%;opacity:.35}
  .news-item{grid-template-columns:1fr auto;row-gap:.6rem}
  .news-date{grid-column:1/-1}
  .pnl-head{flex-wrap:wrap}
}

@media (max-width:560px){
  /* 2x2 on a phone rather than a single stack of four.
     minmax(0,1fr) lets the tracks go below their content width, and the
     nowrap on "Elbridge Capital Fund I ·" has to be released or each column
     keeps a 224px floor and the pair overflows a 375px screen. */
  .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric .lbl .nb{white-space:normal}
  .metric .val{font-size:clamp(1.5rem,7vw,2rem)}
  .metric .lbl{font-size:.66rem;letter-spacing:.1em}
  .metric{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .metric:nth-child(2n){border-right:0}
  .metric:nth-child(n+3){border-bottom:0}
  .f2{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .cs-br{display:none}
  .wd-tabs{display:flex;width:100%}
  .wd-dia{flex:1;justify-content:center}
}

/* ───────────────────────────────────────────────────────────────────────────
   19. MOTION PREFERENCES & PRINT
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js .rv{opacity:1;transform:none}
  .hero::before{animation:none;opacity:1}
  .bridge-draw path,.bridge-draw line{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
}

@media print{
  #hdr,.hero-art,.guil,.gbandwrap,.bridge-band,form,.burger{display:none !important}
  body{color:#000;background:#fff}
  .hero,#team,.epi-band,footer{background:#fff !important;color:#000 !important}
  .hero h1,.sec-head h2,.epi{color:#000 !important}
  a{text-decoration:underline}
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. INNER PAGES — company profiles, announcements, legal, thank-you
   These pages use their own lighter chrome (.co-bar / .co-hero) instead of
   the floating homepage navigation.
   ═══════════════════════════════════════════════════════════════════════════ */
.co{display:block}

/* ── slim top bar ──────────────────────────────────────────────────────── */
.co-bar{
  position:sticky;top:0;z-index:50;
  padding:.9rem 0;
  background:rgba(var(--paper-rgb),.88);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--line);
}
.co-bar .wrap{display:flex;align-items:center;gap:1.2rem}
.co-back{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.755rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;transition:color var(--t-fast) var(--ease);
}
.co-back em{font-style:normal;transition:transform var(--t-mid) var(--ease-out)}
.co-back:hover{color:var(--accent-ink)}
.co-back:hover em{transform:translateX(-4px)}
.co-lang{
  margin-left:auto;padding:.4rem .85rem;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);
  font-size:.7rem;font-weight:600;letter-spacing:.1em;
  color:var(--muted);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.co-lang:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── page hero ─────────────────────────────────────────────────────────── */
.co-hero{
  position:relative;overflow:hidden;
  padding-block:clamp(2.75rem,5.5vw,4.5rem);
  background:
    radial-gradient(90% 80% at 85% 0%, rgba(var(--accent-rgb),.26) 0%, transparent 62%),
    linear-gradient(168deg,#0B2743 0%,var(--ink-deep) 62%,#03101F 100%);
  color:#fff;
}
.co-hero .wrap{position:relative;z-index:3}
.co-hero .eyebrow{color:var(--accent-bright)}
.co-hero .eyebrow::before{background:var(--accent-bright)}
.co-hero h1{
  max-width:26ch;
  font-size:clamp(1.85rem,4.2vw,3.15rem);
  font-weight:200;line-height:1.14;letter-spacing:-.024em;color:#fff;
  text-wrap:balance;
}
.guil-co{z-index:1;top:-28%;right:-6%;width:min(48vw,540px);opacity:.11;color:var(--accent-soft)}
.guil-co path{stroke:currentColor;stroke-width:.5;fill:none}

/* company profile hero: logo plate + descriptor */
.co-hero .wrap:has(.co-mark){display:flex;align-items:center;gap:clamp(1.4rem,3.4vw,3rem);flex-wrap:wrap}
.co-mark{
  margin:0;flex:0 0 auto;
  padding:clamp(1rem,2vw,1.5rem) clamp(1.2rem,2.4vw,1.9rem);
  background:rgba(var(--paper-rgb),.95);border-radius:var(--r-card);
  box-shadow:var(--sh-2);
}
.co-mark img{display:block;width:auto}
.co-rule{display:block;width:1px;height:64px;background:rgba(var(--paper-rgb),.22);flex:0 0 auto}
.co-right{flex:1 1 260px;min-width:0}
.co-right .li-inline{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.735rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-bright);cursor:pointer;transition:color var(--t-fast);
}
.co-right .li-inline svg{width:15px;height:15px;fill:currentColor}
.co-right .li-inline:hover{color:#fff}
.tag{
  margin:.9rem 0 0;max-width:44ch;
  font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.5rem);font-weight:200;
  line-height:1.34;letter-spacing:-.015em;color:rgba(var(--paper-rgb),.9);
}

/* ── body ──────────────────────────────────────────────────────────────── */
.co-body{
  padding-block:clamp(2.25rem,4.5vw,3.5rem);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3.2rem);
}
.co-main,.co-sec{max-width:74ch}
.co-sec + .co-sec,.co-grid{margin-top:clamp(2rem,4vw,3rem)}
.co-sec h2,.co-main h2{
  margin:0 0 1.3rem;padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
  font-family:var(--sans);font-size:.755rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--accent-ink);
}
.co-body p{font-size:1rem;line-height:1.78;color:var(--muted)}
.co-body p + p{margin-top:1.15rem}
.lead{
  font-family:var(--serif);
  font-size:clamp(1.15rem,2vw,1.45rem);
  font-weight:300;line-height:1.58;letter-spacing:-.012em;
  color:var(--ink);
}
.co-body p.lead{font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.58;color:var(--ink)}
.ann-meta{margin-top:1.6rem}
.ann-meta time{
  font-size:.735rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-bright);
}

/* details list */
.co-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.4rem,3vw,2.4rem)}
.co-details{margin:0}
.co-details .row{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:.95rem 0;border-bottom:1px solid var(--line);
}
.co-details dt{
  font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-2);flex:0 0 auto;
}
.co-details dd{margin:0;font-size:.95rem;color:var(--ink);text-align:right}
.co-details dd a{color:var(--accent-ink);border-bottom:1px solid transparent;transition:border-color var(--t-fast)}
.co-details dd a:hover{border-bottom-color:var(--accent)}

/* pull-quote */
.qt{
  margin:clamp(2rem,4vw,3rem) 0;padding-left:clamp(1.2rem,2.4vw,2rem);
  border-left:2px solid var(--accent-bright);
  font-family:var(--serif);
  font-size:clamp(1.15rem,2.2vw,1.55rem);font-weight:300;
  line-height:1.5;letter-spacing:-.015em;color:var(--ink);
}
.co-body .qt p{
  font-family:var(--serif);
  font-size:clamp(1.15rem,2.2vw,1.55rem);font-weight:300;
  line-height:1.5;color:var(--ink);
}
.who,.what{
  display:block;margin-top:.9rem;
  font-family:var(--sans);font-size:.735rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.who{color:var(--ink)}
.what{color:var(--muted-2);margin-top:.3rem}

/* press / related links */
.ann-more{display:grid;gap:.55rem}
.ann-more a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(.9rem,2.4vw,2rem);
  padding:1.05rem clamp(.9rem,2vw,1.4rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  cursor:pointer;
  transition:border-color var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease-out);
}
.ann-more a:hover{border-color:transparent;box-shadow:var(--sh-2);transform:translateY(-2px)}
.ann-more .d{
  font-size:.68rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);line-height:1.6;white-space:nowrap;
}
.ann-more .t{font-size:.935rem;line-height:1.5;color:var(--ink)}
.ann-more em{font-style:normal;color:var(--accent-ink);font-size:1rem;transition:transform var(--t-mid) var(--ease-out)}
.ann-more a:hover em{transform:translate(3px,-3px)}

/* ── legal pages ───────────────────────────────────────────────────────── */
.lgl .co-main{max-width:78ch}
.lgl .co-main h2{
  margin-top:clamp(2.2rem,4vw,3rem);
  font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:300;
  letter-spacing:-.015em;text-transform:none;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.lgl .co-main h3{
  margin:2rem 0 .8rem;
  font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent-ink);
}
.lgl .co-main ul{margin:1.1rem 0;padding-left:0}
.lgl .co-main li{
  position:relative;padding:.4rem 0 .4rem 1.5rem;
  font-size:.985rem;line-height:1.74;color:var(--muted);
}
.lgl .co-main li::before{
  content:"";position:absolute;left:.25rem;top:1.05em;
  width:5px;height:1px;background:var(--accent-ink);
}
.lgl .co-main strong{color:var(--ink);font-weight:600}
.lgl .co-main a{color:var(--accent-ink);border-bottom:1px solid transparent;transition:border-color var(--t-fast)}
.lgl .co-main a:hover{border-bottom-color:var(--accent)}

/* ── inner-page foot strip ─────────────────────────────────────────────── */
.co-foot{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
}
.co-foot p{margin:0;font-size:.9rem;color:var(--muted-2)}
.co-foot .co-back em{transition:transform var(--t-mid) var(--ease-out)}
.co-foot .co-back:hover em{transform:translateX(4px)}

@media (max-width:720px){
  .co-hero .wrap:has(.co-mark){flex-direction:column;align-items:flex-start}
  .co-rule{width:64px;height:1px}
  .co-details .row{flex-direction:column;gap:.3rem}
  .co-details dd{text-align:left}
  .ann-more a{grid-template-columns:1fr auto;row-gap:.4rem}
  .ann-more .d{grid-column:1/-1}
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. TOUCH TARGETS
   Small controls keep their visual size but get an invisible, centred hit
   area of at least 44x44px so they are comfortably tappable on a phone.
   ═══════════════════════════════════════════════════════════════════════════ */
.tap-44{position:relative}
.tap-44::after{
  content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}

/* language switch — 19x19 glyphs */
.lang-sw .ls,.lang-sw .on{position:relative;display:inline-block;min-width:22px;text-align:center}
.lang-sw .ls::after{
  content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}

/* LinkedIn chips on the partner cards — 30x30 discs */
.li-link{position:relative}
.li-link::after{
  content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);
}

/* controls sized just under the minimum */
.burger{width:44px;height:44px}
.news-item .go{width:44px;height:44px}
.pnl-x{width:44px;height:44px}
.wd-dia{min-height:44px}
.brand{min-height:44px}
.co-lang{min-height:44px;display:inline-flex;align-items:center}
.co-back{min-height:44px}
.f-links a{display:inline-flex;align-items:center;min-height:44px}
.f-up{display:inline-flex;align-items:center;min-height:44px}

/* inline text links inside prose keep their natural size — expanding them
   would overlap neighbouring words and steal taps */

/* ═══════════════════════════════════════════════════════════════════════════
   22. HERO MOTION — the rings turn, the bridge builds itself
   The bridge draw is driven from app.js so each stroke uses its own true
   length; the ordering is defined there too (piers first, water last).
   Both are switched off under prefers-reduced-motion in section 19.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes gu-turn    { to { transform: rotate(360deg) } }
@keyframes gu-breathe { 0%,100% { opacity:.09 } 50% { opacity:.17 } }

/* engraved guilloche rings — one slow revolution, with a gentle swell */
.guil-hero{
  transform-origin:50% 50%;
  animation:gu-turn 96s linear infinite,
            gu-breathe 14s ease-in-out infinite;
}
/* the footer set turns the other way, half as fast again */
.guil-foot{
  transform-origin:50% 50%;
  animation:gu-turn 150s linear infinite reverse;
}

/* a slow drift across the navy field, so the hero is never completely still */
@keyframes hero-drift{
  0%,100% { transform:translate3d(0,0,0)    scale(1) }
  50%     { transform:translate3d(-1.2%,-1%,0) scale(1.025) }
}
.hero-art{ animation:hero-drift 34s ease-in-out infinite; will-change:transform }

/* the film grain over the navy field breathes very slowly
   (::before is the scroll cue and keeps its own animation) */
@keyframes hero-glow{
  0%,100% { opacity:.16 }
  50%     { opacity:.11 }
}
.hero::after{ animation:hero-glow 18s ease-in-out infinite }

@media (prefers-reduced-motion:reduce){
  .guil-hero,.guil-foot,.hero-art,.hero::after{animation:none !important}
  .guil-hero{opacity:.14}
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. REFINEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 23a. Decorative ornaments on one vertical axis ─────────────────────────
   The colonnade, the bonsai, the concentric rings and the portfolio cubes all
   get the same width and the same right offset, so their centres fall on a
   single imaginary vertical line down the page. Their viewBoxes are cropped
   to their own artwork at build time, so width alone controls the drawn size. */
:root{ --orn-w:clamp(104px,12.5vw,184px); }

.gbandwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.gbandwrap .in{position:absolute;inset:0}
/* match the text column so the axis tracks the layout at any width */
section > .gbandwrap .in{max-width:var(--wrap);margin-inline:auto}

.gband{
  position:absolute;
  top:50%;
  right:var(--pad);
  width:var(--orn-w);
  height:auto;
  inset-inline-start:auto;
  transform:translateY(-50%);
  opacity:.5;
}
/* The portfolio ornament hung off the tile grid, which starts below the
   heading — so it sat 67px lower than the other three. Taking .pf out of the
   positioning chain lets it resolve against the section itself, exactly like
   the colonnade, the bonsai and the rings. */
.pf{position:static}
.pf > .gbandwrap .in{max-width:var(--wrap);margin-inline:auto}
.pf > .gbandwrap .gband{right:var(--pad)}
/* this wrapper hangs inside section > .wrap, which is itself positioned, so
   the section padding is already accounted for — adding --sec-y again pushed
   the cubes a full 64px below the heading the others line up with */
.pf > .gbandwrap .gband{top:0}

/* Dark grounds get their own, much lower ornament opacity, which left the
   Team rings at an effective .12 — roughly a quarter of the About and Fund
   ornaments and below the point where an engraved line reads at all. .25
   brings them to .1875: clearly present, still the quietest of the four. */
.on-dark .gband{opacity:.25;filter:invert(1) brightness(2)}

/* ── 23b. Epigraph and bridge, centred ──────────────────────────────────────
   The motto sits on the page's centre line and the bridge is drawn
   symmetrically beneath it. */
.epi{
  margin-inline:auto;
  max-width:24ch;
  text-align:center;
}
.epi cite{text-align:center}
.bridge-inner{max-width:1560px;margin-inline:auto}

/* ── 23c. HDBI mark in its original colours ─────────────────────────────────
   Its teal and light grey both read clearly against the navy, so it needs no
   plate, no tinting and no border — exactly as on the current site. */
.f-support .plate{
  background:none;
  border:0;
  padding:0;
  border-radius:0;
}
.f-support .plate:hover{background:none;border:0;opacity:.85}
.f-support .plate img{height:38px;width:auto}

/* ── 23d. Tighter vertical rhythm ───────────────────────────────────────────
   Sections were running past a laptop screen. These bring the page back to
   roughly the density of the current site. */

.hero{
  min-height:min(64vh,540px);
  padding-block:clamp(5.5rem,10vh,7rem) clamp(2.25rem,4vw,3.25rem);
}
.sec-head{margin-bottom:clamp(1.25rem,2.4vw,2rem)}
.f-grid > div{padding:clamp(1.25rem,2.2vw,1.8rem)}
.f-uses li,.f-crit li{padding:.68rem 0}
.f-grid h4{margin-bottom:1.1rem;padding-bottom:.75rem}
.wdwrap{padding:clamp(1.15rem,2.2vw,1.9rem)}
.wd-tabs{margin-bottom:clamp(1.15rem,2.2vw,1.7rem)}
.wd-say{margin-top:clamp(1.1rem,2vw,1.5rem)}
.f-grid,.team-grid,.pf{gap:clamp(.9rem,1.8vw,1.4rem)}
.news-item{padding-block:clamp(1.1rem,2.2vw,1.6rem)}
form{padding:clamp(1.2rem,2.2vw,1.9rem)}
form > div,.f2 > div{margin-bottom:clamp(.7rem,1.4vw,1rem)}
textarea{min-height:104px}
.cinfo .row{padding:.9rem 0}
.epi-band{padding-block:clamp(2.5rem,4.5vw,4rem) 0}
.person h3{margin-top:.9rem}
.person .since{margin-top:.8rem;padding-block:.7rem}
.pf-tile{min-height:200px;padding:clamp(1.2rem,2.2vw,1.8rem)}
.pf-tile .rule{margin:.9rem 0 .85rem}
.pf-go{padding-top:1.1rem}
.pf-note{margin-top:clamp(1.1rem,2vw,1.6rem)}
.metrics{margin-top:calc(-1 * clamp(2.2rem,4vw,3.4rem))}
.metric{padding:clamp(1.1rem,2vw,1.7rem) clamp(1rem,1.8vw,1.6rem)}
.about-body p + p{margin-top:1rem}

/* ── 23e. Hero headline: fewer, longer lines ────────────────────────────────
   At 17ch the headline broke into five lines and pushed the hero to almost
   900px. Widening the measure and easing the size back gives three lines and
   a hero that fits comfortably on a laptop screen. */
.hero h1{
  font-size:clamp(2.15rem,4.6vw,4rem);
  max-width:13em;
}
.hero-lead{max-width:52ch;margin-top:clamp(1.1rem,2.2vw,1.6rem)}
.hero-actions{margin-top:clamp(1.5rem,2.8vw,2.1rem)}
.hero-eyebrow{margin-bottom:clamp(.85rem,1.8vw,1.35rem)}
.hero{min-height:min(58vh,500px)}

/* ═══════════════════════════════════════════════════════════════════════════
   24. HERO FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 24a. Clear the call-to-action ──────────────────────────────────────────
   The metrics card was overlapping the buttons by 2px. Give the hero enough
   floor for the buttons to sit clear of it, and lift the card less far. */
.hero{
  padding-block:clamp(5rem,9vh,6.25rem) clamp(4.75rem,7.5vw,6.5rem);
}
.metrics{margin-top:calc(-1 * clamp(1.25rem,2.2vw,2rem))}

/* ── 24b. Make "Funding request" unmistakable ───────────────────────────────
   It is the primary conversion on the page, so it takes the warm accent —
   7:1 against the navy — while the secondary button gets a real edge and a
   little glass instead of a faint 34% hairline. */
.btn{padding:1.02rem 1.85rem;font-size:.845rem}
.btn-primary{background:var(--accent-bright);color:var(--ink-deep);box-shadow:0 6px 26px rgba(0,0,0,.28)}
.btn-primary:hover{background:#fff;color:var(--ink-deep)}
.btn-ghost{
  border-color:rgba(var(--paper-rgb),.55);
  background:rgba(var(--paper-rgb),.08);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:rgba(var(--paper-rgb),.17);border-color:#fff}

/* ── 24c. Motion you can actually see ───────────────────────────────────────
   The rings turned once every 96s, which reads as static, and the bridge
   finished drawing before anyone looked at it. The rings now turn at a pace
   the eye catches, the artwork breathes, and a slow band of light crosses the
   field so the hero is never completely still. */
.guil-hero{animation:gu-turn 50s linear infinite, gu-breathe 11s ease-in-out infinite}
@keyframes gu-breathe{0%,100%{opacity:.07}50%{opacity:.20}}

@keyframes art-pulse{0%,100%{opacity:.44}50%{opacity:.62}}
.hero-art{animation:hero-drift 34s ease-in-out infinite, art-pulse 9s ease-in-out infinite}

@keyframes hero-sweep{
  0%   {transform:translateX(-45%) rotate(8deg);opacity:0}
  18%  {opacity:.55}
  82%  {opacity:.55}
  100% {transform:translateX(145%) rotate(8deg);opacity:0}
}
.hero .wrap::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-40%;left:0;width:38%;height:180%;
  background:linear-gradient(100deg,transparent,rgba(var(--accent-bright-rgb),.16) 45%,rgba(166,205,234,.12) 60%,transparent);
  filter:blur(26px);
  animation:hero-sweep 14s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
  .hero .wrap::before{animation:none;opacity:0}
  .hero-art{animation:none;opacity:.5}
}

/* ═══════════════════════════════════════════════════════════════════════════
   25. THE FIXES THAT MATTER
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 25a. Make the rings visible ────────────────────────────────────────────
   The rings are instanced with <use href="#gu-rings">, which puts the real
   geometry in a shadow tree. A selector like `.guil path` cannot reach into
   it — only INHERITED properties cross that boundary. stroke and fill are
   inherited, so they have to be set on the <svg> element itself. */
.guil{
  fill:none;
  stroke:var(--accent-soft);
  stroke-width:.42;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.guil-hero{opacity:.20}
.guil-foot{opacity:.13}
.guil-co{opacity:.15}
@keyframes gu-breathe{0%,100%{opacity:.14}50%{opacity:.30}}

/* ── 25b. Make the bridge visible ───────────────────────────────────────────
   The towers, piers and hangers are <line> elements. The previous rule only
   coloured <path>, so half the structure was drawn with no stroke at all.
   Every group is now given its own weight, lines included. */
.bridge-draw g{fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Stroke width now tracks the viewport, because vector-effect:non-scaling-stroke
   pins it to screen pixels. That keeps the drawing alive on a phone, where a
   scaling stroke would fall to 0.58px and vanish — but on a large monitor it
   meant the artwork grew 42% while the lines stayed identical, so ink coverage
   fell from 4.91% to 3.47% and the bridge read as thin and empty. Each clamp
   holds its original weight at a 1366px laptop and grows by the same ratio the
   drawing does, so density is constant from phone to 1920 and beyond. */
/* The floors here are set by pixels, not by taste. Measured on the live site,
   seven of the eight groups rendered THINNER than two device pixels — the
   truss at 1.01, the hangers at 1.06 — and a line that never fills a whole
   pixel gets spread by antialiasing, so each pixel receives only a fraction
   of the alpha it was given: 50% for the truss, 53% for the hangers. A panel
   that crushes dark tones then loses those half-lit pixels completely.

   That is why the same file looked finished on a laptop and broken on an
   office monitor, and why every opacity change failed to fix it: opacity was
   scaling a signal antialiasing had already halved. Thickness is the lever
   that actually controls this. Every floor now lands at or above 1.3px, so
   the lines fill real pixels and deliver the alpha they are given — at the
   SAME opacity, so the drawing is no lighter or darker than it was, only
   less dependent on the screen showing it. */
.hero-art .bd-cable  path,.hero-art .bd-cable  line{stroke:rgba(var(--accent-bright-rgb),.60);stroke-width:clamp(2.0px,.146vw,2.85px)}
.hero-art .bd-tower  path,.hero-art .bd-tower  line{stroke:rgba(var(--paper-rgb),.46);stroke-width:clamp(1.9px,.139vw,2.70px)}
.hero-art .bd-anchor path,.hero-art .bd-anchor line{stroke:rgba(var(--paper-rgb),.52);stroke-width:clamp(1.65px,.121vw,2.35px)}
.hero-art .bd-deck   path,.hero-art .bd-deck   line{stroke:rgba(var(--paper-rgb),.46);stroke-width:clamp(1.8px,.132vw,2.55px)}
.hero-art .bd-hang   path,.hero-art .bd-hang   line{stroke:rgba(var(--accent-bright-rgb),.52);stroke-width:clamp(1.3px,.095vw,1.85px)}
.hero-art .bd-pier   path,.hero-art .bd-pier   line{stroke:rgba(var(--paper-rgb),.50);stroke-width:clamp(1.6px,.117vw,2.30px)}
.hero-art .bd-truss  path,.hero-art .bd-truss  line{stroke:rgba(var(--paper-rgb),.46);stroke-width:clamp(1.3px,.095vw,1.85px)}
.hero-art .bd-water  path,.hero-art .bd-water  line{stroke:rgba(var(--accent-bright-rgb),.55);stroke-width:clamp(1.35px,.099vw,1.95px)}

/* the epigraph bridge sits on navy too, so it takes the same treatment */
.bridge-band .bd-cable  path,.bridge-band .bd-cable  line{stroke:rgba(var(--accent-rgb),.9);stroke-width:1.5}
.bridge-band .bd-tower  path,.bridge-band .bd-tower  line{stroke:rgba(var(--paper-rgb),.42);stroke-width:1.3}
.bridge-band .bd-anchor path,.bridge-band .bd-anchor line{stroke:rgba(var(--paper-rgb),.46);stroke-width:1.1}
.bridge-band .bd-deck   path,.bridge-band .bd-deck   line{stroke:rgba(var(--paper-rgb),.42);stroke-width:1.2}
.bridge-band .bd-hang   path,.bridge-band .bd-hang   line{stroke:rgba(var(--accent-rgb),.55);stroke-width:.75}
.bridge-band .bd-pier   path,.bridge-band .bd-pier   line{stroke:rgba(var(--paper-rgb),.42);stroke-width:1.05}
.bridge-band .bd-truss  path,.bridge-band .bd-truss  line{stroke:rgba(var(--paper-rgb),.34);stroke-width:.75}
.bridge-band .bd-water  path,.bridge-band .bd-water  line{stroke:rgba(var(--accent-bright-rgb),.5);stroke-width:.8}

/* nothing in front of it any more: the mask was fading the towers out and the
   blurred light band was sitting on top of the whole drawing */
.hero-art{
  -webkit-mask-image:none;mask-image:none;
  opacity:.78;
}
.hero .wrap::before{display:none}
@keyframes art-pulse{0%,100%{opacity:.72}50%{opacity:.92}}

/* ── 25c. Ornaments align with the section title ────────────────────────────
   Not the centre of the section — the heading it belongs to. The wrapper
   spans the padded section box, so offsetting by the section's own top
   padding lands the ornament level with the eyebrow and h2. */
.gband{
  top:var(--sec-y);
  transform:none;
}

/* ── 25d. Metrics centred within the bar ────────────────────────────────────
   Labels wrap to one or two lines, so top-aligned figures sat at different
   heights across the row. */
.metric{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ── 25e. The hero bridge, full span ────────────────────────────────────────
   Now that the artwork is framed as the whole bridge rather than a crop, it
   spans the hero edge to edge and sits low, so the deck runs under the
   headline and the towers rise either side of it. Held at just over half
   opacity: present enough to read as architecture, quiet enough that the
   copy and the buttons stay dominant. */
.hero-art{
  left:0;right:0;bottom:0;
  width:100%;
  opacity:.55;
}
@keyframes art-pulse{0%,100%{opacity:.5}50%{opacity:.66}}

/* ═══════════════════════════════════════════════════════════════════════════
   26. ONE SECTION, ONE SCREEN
   Jumping to Fund or Team was landing on a section taller than the viewport,
   so the last rows — Buy-outs, the fourth partner — fell below the fold.
   These trims bring both under the usable height on a laptop.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — The Fund — */
/* a wider measure turns the strategy note from three lines into two */
.f-strat{max-width:90ch;font-size:clamp(.97rem,1.15vw,1.06rem);line-height:1.68;
         margin-bottom:clamp(1.2rem,2.2vw,1.8rem)}
.f-grid h4{margin-bottom:.85rem;padding-bottom:.6rem}
.f-uses li,.f-crit li{padding:.5rem 0;font-size:.925rem;line-height:1.55}
.f-uses li b{font-size:1.06rem;margin-bottom:.1rem}
.fund-head h3{margin-bottom:.9rem}

/* — Team — */
/* square crop keeps the whole head in frame while returning ~37px a card */
.avatar{aspect-ratio:1/1}
#team .sec-head p{margin-top:.85rem}
#team .sec-head h2{line-height:1.08}
.person h3{margin-top:.8rem;margin-bottom:.2rem}
.person .since{margin-top:.7rem;padding-block:.6rem}
.team-grid{gap:clamp(.8rem,1.5vw,1.2rem)}

/* ── 26b. Team down to the last LinkedIn row ────────────────────────────────
   On a 720px-tall laptop the section still ran 84px past the fold. The
   heading block alone was taking 244px, so most of it comes back from there;
   the portrait then gives up a little height only on short screens, which
   keeps it full size on a large display. */
#team .sec-head{margin-bottom:clamp(.9rem,1.8vw,1.35rem)}
#team .sec-head h2{font-size:clamp(1.7rem,3.1vw,2.5rem);line-height:1.06}
#team .sec-head p{max-width:78ch;margin-top:.7rem;font-size:clamp(.95rem,1.1vw,1.02rem)}

.avatar{max-height:min(268px,30vh)}
.person h3{margin-top:.7rem;font-size:1.09rem}
.person .role{font-size:.7rem}
.person .since{margin-top:.6rem;padding-block:.55rem;font-size:.655rem}
.li-link{width:27px;height:27px}
.li-link svg{width:13px;height:13px}

/* ═══════════════════════════════════════════════════════════════════════════
   27. COMPANY MARKS & A LARGER BRAND LOCKUP
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 27a. Portfolio tiles carry the real company marks ──────────────────────
   METALEASE stacks an icon over its wordmark, STIQ AI is a wide lockup, so
   they are bounded on both axes and left to find their own size within that. */
.pf-logo{
  max-height:62px;
  max-width:175px;
  width:auto;height:auto;
  object-fit:contain;
  opacity:.92;
  transition:opacity var(--t-mid) var(--ease);
}
.pf-cell:hover .pf-logo{opacity:1}
.pf-tile .mark:has(.pf-logo){display:flex;align-items:flex-start;min-height:62px}

/* ── 27b. The company hero slot ─────────────────────────────────────────────
   Both supplied marks are white artwork. The white plate I had put behind
   them was rendering white-on-white — effectively invisible. They belong
   directly on the navy, in a bordered slot. */
.co-mark{
  background:none;
  box-shadow:none;
  border:1px solid rgba(var(--paper-rgb),.22);
  border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:74px;
  padding:.85rem 1.6rem;
}
.co-mark img{max-height:44px;width:auto}

/* ── 27c. A larger mark, top left ───────────────────────────────────────────
   Scroll padding grows with the header so an anchored section still clears it. */
/* The size itself now lives on --logo-h in :root, shared with the footer. */
.brand .logo{height:var(--logo-h)}

/* ── 27d. Investment criteria on a shared label column ──────────────────────
   The labels are inline and all different lengths — "Companies:" against
   "Investment size:" — so every value started at its own indent and the list
   read as ragged. A subgrid lets all rows share one label column that sizes
   itself to the longest label, which also handles the longer Greek labels
   without a hardcoded width. */
.f-crit{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.9rem}
.f-crit li{
  display:grid;
  grid-template-columns:subgrid;
  grid-column:1 / -1;
  /* centred rather than baseline: rows whose value wraps to two lines were
     leaving the label pinned to the first line and looking top-heavy */
  align-items:center;
}
.f-crit li b{margin-right:0;white-space:nowrap}

/* Without subgrid the label simply sits on its own line above the value,
   which is still consistent from row to row. */
@supports not (grid-template-columns: subgrid){
  .f-crit{display:block}
  .f-crit li{display:block}
  .f-crit li b{display:block;margin-bottom:.15rem}
}

/* ═══════════════════════════════════════════════════════════════════════════
   28. PORTFOLIO WIDTH & THE COMPANY PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 28a. Wider tiles ───────────────────────────────────────────────────────
   The instrument badge sits top-right and the company mark top-left; at the
   old width they were 17px apart. The portfolio row gets its own, wider
   measure so Mezzanine and Unitranche sit comfortably clear of the mark. */
#portfolio > .wrap{max-width:calc(var(--wrap) + 150px)}
.pf{grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(1rem,1.8vw,1.5rem)}
.pf-str{white-space:nowrap}
/* only marks that actually carry a logo need to dodge the badge — applying
   this to every mark was pushing the "to be announced" tile off centre */
.pf-tile .mark:has(.pf-logo){padding-right:118px}
.pf-logo{max-width:158px}

/* ── 28b. Company page: description beside the details ──────────────────────
   The profile ran as one column, so Details sat below a long description and
   the press coverage below that again. Description and Details now share a
   row at the same height, with press coverage full width underneath.
   Scoped with :has(.co-about) so announcements and legal pages, which use the
   same wrapper but a single .co-main column, are untouched. */
.co-body:has(.co-about){
  /* an even split: the description takes a narrower measure so the details
     panel gets real width instead of a squeezed side rail */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(1.75rem,3.5vw,3.5rem);
  row-gap:clamp(1.75rem,3.5vw,2.75rem);
  align-items:start;
}
.co-body:has(.co-about) > .co-about{grid-column:1;grid-row:1;margin-top:0}
.co-body:has(.co-about) > .co-grid {grid-column:2;grid-row:1;margin-top:0}
.co-body:has(.co-about) > .co-sec:not(.co-about),
.co-body:has(.co-about) > .co-foot{grid-column:1 / -1;margin-top:0}
.co-body:has(.co-about) .co-sec{max-width:none}
.co-body:has(.co-about) .co-about{max-width:70ch}

/* the details panel reads as a card against the description */
.co-body:has(.co-about) .co-grid{
  display:block;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:clamp(1.1rem,2.2vw,1.6rem);
}
.co-body:has(.co-about) .co-grid .co-sec h2{margin-top:0}
.co-body:has(.co-about) .co-details .row:last-child{border-bottom:0;padding-bottom:0}

@media (max-width:860px){
  .co-body:has(.co-about){grid-template-columns:minmax(0,1fr)}
  .co-body:has(.co-about) > .co-about,
  .co-body:has(.co-about) > .co-grid{grid-column:1;grid-row:auto}
}

/* ── 28c. Details rows in the wider panel ───────────────────────────────────
   space-between worked while the panel was a narrow rail; at half the page it
   left "Invested" and "2025" 369px apart. A shared label column keeps every
   value starting at the same place, close enough to its label to read as a
   pair. */
.co-body:has(.co-about) .co-details{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(1rem,2vw,1.75rem);
}
.co-body:has(.co-about) .co-details .row{
  display:grid;
  grid-template-columns:subgrid;
  grid-column:1 / -1;
  align-items:center;
}
.co-body:has(.co-about) .co-details dt{margin-bottom:0}
.co-body:has(.co-about) .co-details dd{text-align:left}

@supports not (grid-template-columns: subgrid){
  .co-body:has(.co-about) .co-details{display:block}
  .co-body:has(.co-about) .co-details .row{display:block}
  .co-body:has(.co-about) .co-details dt{margin-bottom:.35rem}
}

/* ── 29. Investment criteria: label over value ──────────────────────────────
   Supersedes the shared-column treatment in 27d. Each criterion now reads as
   a small field label with its value beneath, which sits consistently row to
   row and mirrors the structure of the "When it fits" card beside it.
   The colon stays in the markup — only the presentation changes. */
.f-crit{display:block}
.f-crit li{
  display:block;
  padding:.62rem 0;
}
.f-crit li b{
  display:block;
  margin:0 0 .28rem;
  font-family:var(--sans);
  font-size:.685rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent-ink);
  white-space:normal;
}
.f-crit li{
  font-size:.95rem;
  line-height:1.6;
  color:var(--muted);
}

/* ── 29b. Reclaim the height the stacked criteria added ─────────────────────
   Label-over-value costs roughly 20px a row. These trims pay that back so
   Fund still lands inside one screen on a small laptop. */
.f-crit li{padding:.42rem 0;line-height:1.52}
.f-crit li b{margin-bottom:.16rem;font-size:.665rem}
.f-uses li{padding:.42rem 0}
.f-uses li b{font-size:1.02rem;margin-bottom:.08rem}
.f-grid > div{padding:clamp(1rem,1.8vw,1.45rem)}
.f-grid h4{margin-bottom:.7rem;padding-bottom:.5rem}
.f-strat{margin-bottom:clamp(1rem,1.8vw,1.5rem)}
.fund-head h3{margin-bottom:.7rem}

/* the header settled at 86px, so the anchor offset can come back down —
   which hands every jumped-to section a few more pixels of screen */

/* ── 29c. Final trim so Fund clears a 720px viewport ────────────────────── */
.f-crit li,.f-uses li{padding:.3rem 0}
.f-grid > div{padding:clamp(.85rem,1.5vw,1.2rem)}
.f-strat{margin-bottom:clamp(.7rem,1.3vw,1.05rem);font-size:clamp(.95rem,1.1vw,1.02rem)}
#fund .sec-head{margin-bottom:.55rem}
.fund-head h3{margin-bottom:.55rem;font-size:clamp(1.5rem,2.9vw,2.25rem)}

/* ── 30. The "to be announced" tile ─────────────────────────────────────────
   Centred on both axes within its tile. */
.pf-cell.ghost .pf-tile{
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(1.2rem,2.2vw,1.8rem);
}
.pf-cell.ghost .mark{
  padding:0;
  margin:0;
  max-width:22ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   31. THE CAPITAL STRUCTURE, DRAWN TO SCALE
   The blocks are sized in proportion to where each instrument sits in the
   stack, not listed as equal rows. That is what makes the Unitranche case
   legible: its block is exactly as tall as Mezzanine + Senior combined, so
   selecting it visibly swallows both positions, and the bracket on the right
   grows to match — Elbridge is covering the financing and the mezzanine.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --cs-gap:8px; --cs-mz-top:calc(var(--cs-eq-h) + var(--cs-gap)); --cs-sr-top:calc(var(--cs-mz-top) + var(--cs-mz-h) + var(--cs-gap)); --cs-un-h:calc(var(--cs-mz-h) + var(--cs-gap) + var(--cs-sr-h)); --cs-total:calc(var(--cs-sr-top) + var(--cs-sr-h)); --cs-br-w:84px; }

.cs{display:block;position:relative}
.cs-col{
  position:relative;
  height:var(--cs-total);
  display:block;
  flex:none;
  gap:0;
}
.cs-blk{
  position:absolute;
  left:0;
  right:calc(var(--cs-br-w) + .75rem);
  margin:0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 1.25rem;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--paper-2);
  transition:border-color var(--t-mid) var(--ease),background var(--t-mid) var(--ease);
}
.cs-eq{top:0;                     height:var(--cs-eq-h)}
.cs-mz{top:var(--cs-mz-top);      height:var(--cs-mz-h)}
.cs-sr{top:var(--cs-sr-top);      height:var(--cs-sr-h)}
.cs-un{top:var(--cs-mz-top);      height:var(--cs-un-h); display:none}

/* the position Elbridge takes */
.cs-hi{
  background:var(--ink);
  border-color:var(--ink);
  box-shadow:0 10px 30px rgba(var(--ink-rgb),.16);
}
.cs-hi b{color:#fff}
.cs-hi span{color:var(--accent-bright)}

/* the bracket: spans exactly what Elbridge is on the hook for */
.cs-br{
  position:absolute;right:0;width:var(--cs-br-w);
  top:var(--cs-mz-top);height:var(--cs-mz-h);
  display:flex;align-items:center;gap:.5rem;
  align-self:auto;
  transition:top var(--t-mid) var(--ease),height var(--t-mid) var(--ease);
}
.cs-br i{
  display:block;width:9px;align-self:stretch;flex:none;
  height:auto;
  border:1px solid var(--accent-ink);border-left:0;
  border-radius:0 4px 4px 0;
  background:none;
}
.cs-br span{
  writing-mode:vertical-rl;
  font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);
}

/* Unitranche selected: one block replaces both lower tiers, bracket grows */
#wd-u:checked ~ .cs .cs-mz,
#wd-u:checked ~ .cs .cs-sr{display:none}
#wd-u:checked ~ .cs .cs-un{display:flex}
#wd-u:checked ~ .cs .cs-br{top:var(--cs-mz-top);height:var(--cs-un-h)}
#wd-m:checked ~ .cs .cs-sr{display:flex}

@media (max-width:560px){
  
  .cs-blk{padding:0 .9rem;flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem}
  .cs-br{display:flex}
}

/* ── 31b. Approach heading on two lines ─────────────────────────────────── */
#focus .sec-head h2{
  font-size:clamp(1.7rem,3.3vw,2.75rem);
  max-width:17em;
}

/* ── 31c. Fit title through to the explanation in one screen ─────────────
   The ladder keeps its proportions (Unitranche still equals Mezzanine + gap +
   Senior exactly) but is drawn ~11%% shorter, which brings the sentence under
   it inside the fold when the Approach link is used. */

.wd-tabs{margin-bottom:clamp(.9rem,1.7vw,1.3rem)}
.wd-say{margin-top:clamp(.9rem,1.6vw,1.2rem)}
.wdwrap{padding:clamp(1rem,1.9vw,1.6rem)}
#focus .sec-head{margin-bottom:clamp(1rem,1.9vw,1.5rem)}

/* ── 31d. A little more headroom under the diagram ───────────────────────
   The Greek copy runs longer than the English, so the sentence below the
   capital structure was clearing the fold by only 18px. The ladder loses
   another ~28px while keeping its proportions intact — Unitranche still
   equals Mezzanine + gap + Senior exactly. */

.wd-tabs{margin-bottom:clamp(.75rem,1.4vw,1.05rem)}
.wd-say{margin-top:clamp(.75rem,1.3vw,1rem)}
#focus .sec-head{margin-bottom:clamp(.85rem,1.6vw,1.25rem)}

/* ── 31e. The English instrument name inside the Greek tab ─────────────────
   The Greek markup carries the English term in an <em> after the Greek one
   ("Ενδιάμεση βαθμίδα" + "Mezzanine"). Unstyled it ran straight on with no
   separation. The brackets are generated by CSS, so the page copy itself is
   left exactly as it is. */
.wd-dia em{
  font-style:normal;
  font-weight:500;
  letter-spacing:.09em;
  opacity:.72;
}
.wd-dia em::before{content:" ("}
.wd-dia em::after{content:")"}

/* ── 32. Section headings break where the sentence does ──────────────────
   "Ένα κοινό όραμα." is marked nowrap and is 304px wide. Sitting inline it
   would not fit after the first sentence, so the browser broke the FIRST
   phrase instead and produced "Τέσσερις ιδρυτικοί / εταίροι. Ένα κοινό
   όραμα." Making it a block puts the break between the two sentences, where
   it belongs — in both languages. */
.sec-head h2 .nbk{display:block}

/* ── 31f. Shorter ladder again ───────────────────────────────────────────
   So the sentence under Senior clears the fold on smaller laptops too, in
   both languages. Proportions are preserved: Unitranche still equals
   Mezzanine + gap + Senior exactly (48 + 8 + 96 = 152). */

.wdwrap{padding:clamp(.85rem,1.6vw,1.35rem)}
.cs-blk{padding:0 1rem}

/* ── 31g. Headroom for the longer Greek sentence ─────────────────────────
   The Greek explanation runs longer than the English and was clearing the
   fold by only 5px. A slightly shorter ladder plus a wider measure for the
   sentence (fewer wrapped lines) gives both languages real breathing room.
   Unitranche still equals Mezzanine + gap + Senior (44 + 8 + 88 = 140). */

.wd-say{max-width:82ch;margin-top:.7rem;font-size:.95rem;line-height:1.62}

/* ── 33. Announcement headlines on two lines ─────────────────────────────
   These titles run to ~110 characters. At 26ch and 50px they were breaking
   into four lines. Scoped to .ann so company profiles and the short legal
   titles keep their own scale. */
.ann .co-hero h1{
  /* capped at 37.6px: the Greek headline (117 chars, with words as long as
     "επιχειρηματικότητας") needs that to hold two lines */
  font-size:clamp(1.45rem,2.8vw,2.35rem);
  line-height:1.16;
  max-width:none;
  text-wrap:pretty;
}

/* ── 34. Contact: the form rises beside the intro ─────────────────────────
   The heading and its sentence used to span the full width, pushing the form
   down below them. Making the section wrapper the grid — and letting
   .contact-grid dissolve into it with display:contents — puts the heading and
   the office details in one column and the form alongside, spanning both
   rows. The sentence then wraps to the same measure as "Head office" beneath
   it, which is what sets the column edge. No markup change. */
#contact > .wrap{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  column-gap:clamp(2rem,4.5vw,4.5rem);
  row-gap:clamp(1.25rem,2.4vw,2rem);
  align-items:start;
}
#contact .contact-grid{display:contents}
#contact .sec-head{grid-column:1;grid-row:1;margin-bottom:0;max-width:none}
#contact .cinfo   {grid-column:1;grid-row:2}
/* A third, flexible row soaks up whatever the form is taller by. Without it
   the surplus was shared between rows 1 and 2, pushing the office details
   down the column; now they sit directly under the heading and the slack
   falls to the bottom. */
#contact > .wrap{grid-template-rows:auto auto 1fr}
#contact form     {grid-column:2;grid-row:1 / span 3}
#contact .sec-head p:not(.eyebrow){max-width:none}

@media (max-width:860px){
  #contact > .wrap{grid-template-columns:minmax(0,1fr)}
  #contact .sec-head{grid-column:1;grid-row:auto;margin-bottom:clamp(1rem,2vw,1.5rem)}
  #contact .cinfo,#contact form{grid-column:1;grid-row:auto}
}

/* ── 35. Portfolio heading on one line ───────────────────────────────────
   The 62ch cap on .sec-head is sized for the descriptive paragraph, not for a
   50px display line. In Greek "Οι επιχειρήσεις που στηρίζουμε." needs 688px
   and was breaking at 619. The heading gets its own measure; the paragraph
   below keeps its 60ch reading width from the base rule. */
#portfolio .sec-head{max-width:none}
#portfolio .sec-head h2{max-width:16em}


/* ── 36. "When it fits" titles take the criteria colour ──────────────────
   Same highlight blue as the labels in the card beside it, so the two lists
   read as one pair. The serif face is kept — that is what still tells a
   use-case apart from a criterion. */
.f-uses li b{color:var(--accent-ink)}


/* ── 37. Matching weight across the two Fund cards ───────────────────────
   The criteria labels were 600 against 300 for the use-case titles, which
   read as two different levels of emphasis. Both now sit at 400. Not lower:
   the criteria label is 10.6px uppercase, and below 400 the strokes get thin
   enough to hurt at that size. */
.f-crit li b{font-weight:400}
.f-uses li b{font-weight:400}


/* ── 38. Portfolio note on one line ──────────────────────────────────────
   The 62ch cap held it to 538px while the line needs 638px in English and
   843px in Greek — the Greek sentence is 121 characters against 98. 64em
   covers the longer of the two with room to spare, and the row still has
   1370px available. On narrow screens it wraps again, which is correct. */
.pf-note{max-width:64em}


/* ═══════════════════════════════════════════════════════════════════════════
   39. THE INVESTOR PORTAL BUTTON
   It leaves the site rather than navigating inside it, and it speaks to
   existing investors — not to the companies the rest of the page addresses.
   So it reads as an account entrance: padlock, neutral outline, and the cyan
   reserved for the one primary call to action.
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-portal .lock,.nav-portal .lock{
  width:13px;height:13px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.btn-portal{gap:.5rem}

/* over the hero */
.btn-portal{
  border-color:rgba(var(--paper-rgb),.34);
  color:rgba(var(--paper-rgb),.9);
}
.btn-portal:hover{
  background:rgba(var(--paper-rgb),.13);
  border-color:rgba(var(--paper-rgb),.7);
  color:#fff;
}
/* once the bar goes white */
#hdr.stuck .btn-portal{border-color:var(--line-strong);color:var(--ink)}
#hdr.stuck .btn-portal:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* the drawer copy is desktop-invisible: on a wide screen the header button
   is already there, and this would otherwise land inside the nav pill */
.nav-portal-li{display:none}

@media (max-width:860px){
  /* header: collapse to the padlock alone, always reachable.
     font-size:0 removes the label without needing a second element. */
  .btn-portal{
    display:inline-flex;
    width:44px;height:44px;
    padding:0;
    justify-content:center;
    font-size:0;
    letter-spacing:0;
    gap:0;
  }
  .btn-portal .lock{width:17px;height:17px}
  .btn-portal-t{display:none}

  /* drawer: a real button, set apart from the section links */
  .nav-portal-li{display:block;margin-top:1.25rem;padding-top:1.25rem;
                 border-top:1px solid rgba(var(--paper-rgb),.16)}
  .nav-links a.nav-portal{
    display:inline-flex;align-items:center;gap:.6rem;
    padding:.85rem 1.4rem;
    border:1px solid var(--accent-bright);
    border-radius:var(--r-pill);
    font-family:var(--sans);
    font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
    color:var(--accent-bright);
    min-height:44px;
  }
  .nav-links a.nav-portal:hover,
  #hdr.stuck .nav-links a.nav-portal{background:transparent;color:var(--accent-bright)}
}


/* ── 40. Phone: hero and figures on one screen ───────────────────────────
   At 375x812 the block ended at 770px, which still overflows a shorter
   handset. These are phone-only trims — nothing above 560px changes. */
@media (max-width:560px){
  .hero{
    min-height:auto;
    padding-block:clamp(4.25rem,8vh,5.25rem) clamp(2.5rem,4.5vw,3.25rem);
  }
  .hero h1{font-size:clamp(1.85rem,8.4vw,2.4rem)}
  .hero-lead{font-size:.95rem;line-height:1.6;margin-top:.9rem}
  .hero-actions{margin-top:1.25rem;gap:.6rem}
  .btn{padding:.85rem 1.4rem;font-size:.78rem}

  .metrics{margin-top:calc(-1 * 1.5rem)}
  .metric{padding:.85rem .5rem}
  /* the figures were fine as they were — only the labels shrink.
     "Years of partner experience" is 27 characters in a 167px column, so
     one line needs both a small size and almost no letter-spacing; the
     narrower padding buys back the rest. All four labels share the size. */
  .metric .lbl{margin-top:.4rem;font-size:.5725rem;letter-spacing:.02em;line-height:1.45;white-space:nowrap}
  /* "Elbridge Capital Fund I ·" keeps its own line; "committed capital" and
     "vintage year" drop underneath it */
  .metric .lbl .nb{display:block;white-space:nowrap}
}


/* ── 41. Ornaments ───────────────────────────────────────────────────────
   On a desktop these are exactly as they were before the phone work: 180px
   wide, level with the section heading, on one shared vertical axis. Only
   the @media block below differs, and only on a phone. */
.gband{
  top:var(--sec-y);
  right:var(--pad);
  width:var(--orn-w);
  opacity:.5;
}
.pf > .gbandwrap .gband{top:0}

@media (max-width:860px){
  /* pushed hard against the right edge on a phone — the 20px page inset is
     the only horizontal slack there is at this width */
  /* the About heading runs to x=306 on a 375px screen; at 84px wide the
     ornament started at 291 and clipped it by 15px. 68px starts at 307. */
  :root{ --orn-w:clamp(56px,18vw,68px); }
  .gband{right:0}
  section > .gbandwrap .in{max-width:none;margin-inline:0}
  .pf > .gbandwrap .gband{right:0}

  /* the ornament has no horizontal slack left at this width, so the heading
     line is what stops short of it. Only the heading — the body copy below
     sits under the ornament and is unaffected. */
  section > .wrap > .sec-head h2,
  #fund .fund-head h3{padding-right:calc(var(--orn-w) + .6rem)}

  /* same weight and softness as on a desktop — the earlier stroke boost made
     them far too assertive at this size */
  .gband{opacity:.5}
}


/* ═══════════════════════════════════════════════════════════════════════════
   42. HERO — DIRECTION B · "the living bridge"          [v3 only]
   The slogan is now the headline and carries the section on its own. The
   bridge fills the width and builds itself once on load; after that only a
   slow light travels the cables, so the motion never competes with reading.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero{
  /* min(82vh,720px) capped the stage at 720px, so on any screen taller than
     ~880px the hero stopped growing and read as half a page. clamp() keeps a
     floor for short laptops and a ceiling that only binds on very tall
     displays, so the hero stays dominant at every size. */
  /* NOT clamp(560px,84vh,1040px). That floor is an absolute 560px, so in any
     window shorter than that — a short browser window, a split screen, the
     artifact panel — the hero grew TALLER than the viewport and pushed its own
     bottom past the fold. The bridge is anchored to that bottom edge, so the
     deck, the piers, the anchorages and the waterline all fell below the fold
     and only the cable crown and tower tips stayed visible. Measured at
     1400x470: the hero overshot by 133px and 44% of the bridge was cut off.

     min(max(...), 94vh, 1040px) keeps the same intent — about 84vh, at least
     560px, never more than 1040 — but adds the one rule that was missing: it
     may never exceed the window it has to fit inside. */
  min-height:min(max(560px,84vh),94vh,1040px);
  padding-block:clamp(5.5rem,10vh,7.5rem) clamp(4.5rem,7.5vw,6.5rem);

  /* The grain moves here, onto the hero itself. It used to live on ::after,
     which section 43 then reclaimed for the travelling light — one element
     cannot do both jobs, and the grain was being silently discarded. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 82% 8%, rgba(var(--accent-rgb),.30) 0%, transparent 58%),
    radial-gradient(90% 70% at 8% 96%, rgba(var(--accent-bright-rgb),.16) 0%, transparent 60%),
    linear-gradient(168deg, #0B2743 0%, var(--ink-deep) 55%, #03101F 100%);
  background-blend-mode:overlay,normal,normal,normal;
}

/* — the slogan, at full voice — */
.hero h1{
  font-size:clamp(2.5rem,7.4vw,6.4rem);
  font-weight:200;
  line-height:1.02;
  letter-spacing:-.035em;
  max-width:18ch;   /* 31 characters — 18ch lands it on two lines, not three */
  text-wrap:balance;
}

/* — the sentence it displaced — */
.hero .hero-lead{
  margin-top:clamp(1.1rem,2.2vw,1.7rem);
  max-width:44ch;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.05rem,1.9vw,1.5rem);
  line-height:1.42;
  letter-spacing:-.012em;
  color:rgba(var(--paper-rgb),.88);
}
.hero .hero-lead em{
  font-style:normal;
  color:var(--accent-bright);
}

/* — the fund detail, deliberately quiet — */
.hero .hero-note{
  margin-top:clamp(.9rem,1.8vw,1.35rem);
  max-width:56ch;
  font-size:.92rem;
  line-height:1.65;
  color:rgba(var(--paper-rgb),.58);
}

.hero-actions{margin-top:clamp(1.6rem,3vw,2.4rem)}

/* — the bridge, edge to edge — */
.hero-art{
  left:50%;right:auto;bottom:0;
  width:106%;
  transform:translateX(-50%);
  /* This started at .42, went to .62, and still disappeared on a 23-inch
     office panel while looking correct on a laptop. The reason the small
     steps kept failing is that they all stayed INSIDE the band such a panel
     destroys: at .62 the weakest line measured 1.96 contrast and the median
     2.52, and a display that crushes dark tones loses roughly everything
     under 2.5. Creeping upward within that band could never work.

     At 1 the weakest line is 3.01, the median 4.29 and the cable 6.03 —
     clear of the crush threshold rather than balanced on its edge. The
     per-group alphas below still carry the depth, so the drawing keeps its
     hierarchy; it simply no longer depends on the quality of the screen.

     Two separate dials, moved for two separate reasons.

     The CABLE alpha drops from .95 to .60. At .95 it measured 4.78 contrast
     against a 3.49 median — 1.37x the rest of the drawing — so the eye went
     straight to it and it read as the subject rather than the setting. At
     .60 it sits at 2.85, just under the white structure, and the bridge
     reads as one object again.

     The OVERALL opacity is set from a reference rather than a guess: the
     guilloche rings in the top right of the hero, which measure 1.80
     contrast against this ground. Those rings have never been reported as
     invisible on the office monitor that kept losing the bridge — which
     retires the theory that a contrast floor around 2.5 was the problem.
     The bridge was disappearing because its cable stopped short of the deck
     and its piers had no footings, not because it was too dim.

     .45 puts the drawing at the rings' level. The bridge still reads as the
     heavier of the two because its strokes are 1.1-2.3px against the rings'
     0.42px — which is right, it is themain motif — but they now belong to the
     same layer of the page instead of competing. */
  opacity:.45;
  animation:none;                 /* no drifting: it should feel built, not floating */
}

/* a single band of light travelling the cables, once every 9 seconds */
.hero::after{
  content:"";
  position:absolute;z-index:3;pointer-events:none;
  top:0;bottom:0;left:0;width:32%;
  background:linear-gradient(90deg,
     transparent,
     rgba(var(--accent-bright-rgb),.46) 45%,
     rgba(var(--paper-rgb),.22) 60%,
     transparent);
  filter:blur(34px);
  opacity:1;
  mix-blend-mode:screen;
  animation:cable-light 8s linear infinite;
}
/* The travel distance is set from the band's own width, not the hero's, so it
   has to be solved rather than guessed: the band is 32% of the hero, so one
   hero-width is 1/0.32 = 312% of the band. Ending at 520% parked it a full
   hero-width past the right edge, dark and idle for 3.5 of every 7 seconds —
   which is why the light looked like it had stopped working. -120% to 340%
   clears both edges with a small margin and nothing more, so the band is on
   screen for ~90% of the cycle instead of half of it. */
@keyframes cable-light{
  0%  {transform:translateX(-120%);opacity:0}
  8%  {opacity:.95}
  90% {opacity:.95}
  100%{transform:translateX(340%);opacity:0}
}

/* the rings stay, just further back */
.guil-hero{opacity:.13}

@media (max-width:860px){
  /* with the long paragraph gone the hero would collapse to ~377px; give the
     slogan more presence and the buttons room to clear the metrics card */
  .hero{min-height:min(62vh,470px);
        padding-block:clamp(4.75rem,10vh,6.25rem) clamp(3.75rem,8vw,4.75rem)}
  .hero h1{font-size:clamp(2.35rem,10.4vw,3.3rem);max-width:none;line-height:1.06}
  .hero .hero-lead{font-size:clamp(1rem,4.4vw,1.2rem);max-width:none}
  .hero .hero-note{font-size:.86rem;max-width:none}
  /* The bridge was all but gone here: only 25% of the drawing landed inside
     the frame, jammed into the left quarter, with 269px of it off-screen and
     the right two-thirds of the hero empty. Two causes stacked up —

       1. a global max-width:100% on svg silently clamped width:150% back to
          the hero's own width, so the intended zoom never happened; and
       2. this rule set left:-25% but never reset the desktop's
          transform:translateX(-50%), which shoved it half a width further
          left on top of that.

     Centring it properly and opting out of the clamp shows the span itself —
     both towers and the cable crown — instead of one anchorage. 200% keeps
     the structure legible at this width rather than a thin distant line. */
  .hero-art{
    width:200%;
    max-width:none;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    /* Follows the desktop. The drawing is zoomed to 200% here so it already
       reads heavier per unit of opacity. */
    opacity:.50;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero::after{animation:none;opacity:0}
}


/* ── 42b. The fund description, relocated from the hero ──────────────────
   Reads as the fund'''s own opening statement, one step above the strategy
   note that follows it. */
.f-intro{
  max-width:78ch;
  margin:0 0 clamp(.7rem,1.4vw,1.1rem);
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.05rem,1.55vw,1.28rem);
  line-height:1.55;
  letter-spacing:-.01em;
  color:var(--ink);
}
/* the hero keeps only the slogan, one line of thesis, and the two actions */
.hero .hero-note{display:none}


/* ── 43. Anchor offset ───────────────────────────────────────────────────
   Declared once. The fixed bar is 60px of logo plus its padding, so an
   anchored section has to start clear of about 104px. */
html{scroll-padding-top:114px}
@media (max-width:860px){ html{scroll-padding-top:98px} }


/* ── 44. The Greek headline on two lines ─────────────────────────────────
   "Η πλατφόρμα καταλύτης" needs 1098px at the English size and the column
   offers 1108 — ten pixels of slack, so it collapsed to three lines. Easing
   the size to 96px and letting it use the full column gives it real margin.

   The break itself is no longer left to the wrapper: the markup carries an
   explicit <br> after "Η πλατφόρμα", because the client asked for that exact
   split rather than whichever one the measure happened to produce. The size
   set here still matters — it is what keeps the second line whole. */
html[lang="el"] .hero h1{
  font-size:clamp(2.2rem,6.7vw,6rem);
  max-width:none;
  /* balance splits the compound word and leaves "Η πλατφόρμα-" hanging on its
     own line; pretty keeps it whole and breaks after "καταλύτης" */
  text-wrap:pretty;
}
@media (max-width:860px){
  html[lang="el"] .hero h1{font-size:clamp(1.95rem,8.6vw,2.9rem)}
}


/* ── 45. Metric labels: fund name over the measure ───────────────────────
   All four boxes now name the fund on their own line, with what is being
   measured underneath. The name is the constant, so it takes the quieter
   tone and the measure carries the emphasis. */
.metric .lbl{
  display:flex;
  flex-direction:column;
  gap:.18rem;
}
.metric .lbl .nb{
  display:block;
  white-space:nowrap;
  color:var(--accent-ink);
  font-weight:600;
}
.metric .lbl{color:var(--muted-2)}

@media (max-width:560px){
  /* the fund name is 23 characters; it sets the floor for the column */
  .metric .lbl{font-size:.5725rem;letter-spacing:.02em;gap:.12rem}
}


/* ── 46. The motto bridge: standing, not being built ─────────────────────
   It is drawn complete from the first paint, at full strength, and the motto
   beside it arrives with it rather than fading in on scroll.

   The mask is gone rather than merely eased. A top-fading gradient makes the
   towers and the crown of the cable — the tallest and most identifying parts
   of the silhouette — the faintest things in the drawing, which is backwards:
   it reads as an unfinished sketch rather than a structure. Removing it lets
   the outline hold one weight from the water line to the tower tops, the same
   correction already applied to the hero bridge in section 24. */
.bridge-band .bridge-draw{
  opacity:1;
  -webkit-mask-image:none;
          mask-image:none;
}
.bridge-band .bridge-draw path,
.bridge-band .bridge-draw line{
  stroke-dasharray:none !important;
  stroke-dashoffset:0 !important;
  transition:none !important;
}
/* both the band and its text skip the scroll reveal */
.js .epi-band .rv,
.js .epi-band .rv.in,
.js .bridge-band,
.js .bridge-band.rv{
  opacity:1;
  transform:none;
  transition:none;
}

/* On narrow screens the drawing sits much closer to the text, and the tower
   tips were crossing into the attribution line under the motto. */
@media (max-width:860px){
  .bridge-band{margin-top:1.25rem}
}


/* ── 47. One label treatment across both Fund cards ──────────────────────
   The criteria labels were small uppercase sans; the use-case labels were
   larger sentence-case serif. Same role, two different looks. Both now use
   the criteria treatment, and the descriptions under them stay in ordinary
   sentence case — label in caps, explanation in lower case, throughout. */
.f-uses li b,
.f-crit li b{
  display:block;
  margin:0 0 .16rem;
  font-family:var(--sans);
  font-size:.665rem;
  font-weight:400;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent-ink);
  white-space:normal;
}
.f-uses li,
.f-crit li{
  padding:.3rem 0;
  font-size:.95rem;
  line-height:1.52;
  color:var(--muted);
  text-transform:none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   48. TOUCH TARGETS — hit area without visual change

   Two controls were drawn at their natural glyph size and never grown for
   touch: the language switch at 22x19 and the partner LinkedIn marks at
   27x27, against a 44x44 minimum. Padding would push the layout around, so
   each gets a centred, invisible pseudo-element instead — the mark stays
   exactly where and how it was drawn, the finger gets the full square.
   ═══════════════════════════════════════════════════════════════════════════ */

.ls,
.li-link{position:relative}

.ls::after,
.li-link::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:44px;height:44px;
  transform:translate(-50%,-50%);
  /* purely a hit area: no paint, and it must not sit above the mark itself */
  background:transparent;
}

/* ── 49. The Team rings, matched to the Portfolio cubes ──────────────────
   The rings were lighter than the cubes in two independent ways, which is
   why patching one of them never quite fixed it:

     1. ALPHA.  The rings sit in the only dark section, and dark sections use
        a lower ornament opacity. Against the cubes' .50 x .50 = .25, the
        rings landed at .75 x their own opacity.
     2. STROKE WEIGHT.  Both ornaments are drawn into the same box, but the
        rings' artwork is a 482-unit viewBox against the cubes' 374, so the
        rings scale down harder — a 1.05 stroke rendered 0.147px where the
        cubes' 1.30 rendered 0.235px. Forty percent thinner, at any size.

   Both are corrected here, in one unconditional rule rather than per
   breakpoint. Because both ornaments are sized from the same --orn-w token,
   the ratio between their scales is identical at every width, so a single
   stroke-width lands them together on phone, tablet and desktop alike — and
   the stylesheet is shared, so Greek and English follow automatically.

   .3333 x .75 = .25, the cubes' alpha exactly.
   1.675 x the rings' scale = 0.235px, the cubes' rendered stroke exactly. */
.on-dark .gband{opacity:.3333}
.on-dark .gband path{stroke-width:1.675}


/* ═══════════════════════════════════════════════════════════════════════════
   50. TABLET

   The 860px breakpoint splits phone from desktop, which leaves tablets served
   by whichever side they land on — and neither side was tuned for them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Portrait tablets take the phone stylesheet, including a hero capped at
     470px. That cap was set for an 812px phone, where it reads as 58%; on a
     1024px iPad the same number is 46% and the hero stops being a hero. The
     height query only catches tablets: phone viewports sit well under 900. */
@media (max-width:860px) and (min-height:900px){
  .hero{min-height:min(62vh,640px)}
}

/* — Landscape tablets take the desktop stylesheet, where the inline nav, the
     language switch and the Portal button are sized for a 1440px window. At
     1024 the row runs 46px past the screen edge and the Portal button — the
     one button on the page that matters commercially — is cut off. It is
     worse in Greek, where the seven link labels are 610px against 466px in
     English. Tightening the links buys back more than the overflow. */
@media (min-width:861px) and (max-width:1140px){
  .nav-links{gap:0}
  .nav-links a{
    padding:.5rem .58rem;
    font-size:.735rem;
    letter-spacing:.04em;
  }

  /* — Four partners across a 1024px window auto-fit to three columns, which
       leaves one partner alone on a second row. Two columns give the 2+2 the
       section is built for: Andreas and Nikolas above, Spyros and Agapitos
       below, in document order, no reordering needed. */
  .team-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── 51. Metrics: the two that are not fund-level ────────────────────────
   Committed capital and vintage year belong to Elbridge Capital Fund I, so
   they carry its name. Cheque size and partner experience do not — the name
   above them was filler. They drop it and take its treatment directly, so
   all four cards still read as one set. */
.metric .lbl-solo{color:var(--accent-ink);font-weight:600}

/* ═══════════════════════════════════════════════════════════════════════════
   52. ORNAMENTS ON PHONE AND TABLET — one corner, one rule

   On a desktop the four marks hang from --sec-y so they sit level with each
   section heading. That token is a desktop measurement, and below 1140px it
   put them too far down to read as a corner motif — while the Portfolio mark
   was pinned to top:0 by a separate rule and so never agreed with the other
   three anyway.

   Phone and tablet now get their own inset, independent of --sec-y, applied
   to all four including Portfolio. The horizontal gap already comes from the
   page inset the wrapper carries, so only the vertical value is set here;
   adding a right offset on top of it would push the marks back into the
   headings.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1140px){
  /* ONE inset, used for both axes. The artwork carries the same 3px of
     internal slack on its top and right edges, so an equal CSS inset puts the
     drawn ink an equal distance from the top edge and the right edge — a true
     corner margin rather than two values that merely look close. */
  :root{
    --orn-inset:.85rem;
    --orn-reserve:93px;

    /* Grown to the measured ceiling. The Fund mark — the tree — is the
       binding constraint at every width, and its limit is VERTICAL: it runs
       into the paragraph beneath it, not into the heading beside it. That is
       why the ceiling is the same on a 375px phone and a 753px tablet, and
       why widening the screen does not buy any room.

       Clearance to the nearest text, measured by stepping the size:
         68px -> 31px    86px -> 17px    98px ->  9px
         80px -> 22px    92px -> 13px   104px ->  4px   110px -> touches

       92px is the last size with a clearance that still reads as deliberate
       space rather than a near miss — 1.35x the previous size. Same corner,
       same alignment; the marks simply extend further down and to the left. */
    --orn-w:92px;
  }

  /* The marks were pinned right:0 against a full-bleed wrapper, so their only
     breathing room was the 3px of slack inside the artwork itself — flush to
     the screen edge in practice. (A desktop preview hides this: the scrollbar
     fakes a 15px gap that a touch device does not have.) One explicit side
     inset gives every mark the same real gap on both phone and tablet. */
  .gband{ top:var(--orn-inset); right:var(--orn-inset) }

  /* Portfolio is the one that would not line up. Its wrapper hangs off .pf
     rather than off the section, and .pf starts one --sec-y below the section
     top — so the same top value landed its mark 37px lower than the other
     three. Subtracting that offset puts all four ink edges on one line; the
     wrapper has to stop clipping for the negative value to survive, which is
     safe because the mark stays well inside the section either way.

     Measured against the Team rings as the reference: every mark now sits
     18px in from the right and 17-18px down from its section top. */
  .pf > .gbandwrap{ overflow:visible }
  .pf > .gbandwrap .gband{ top:calc(var(--orn-inset) - var(--sec-y)); right:var(--orn-inset) }

  /* Headings stop short of the mark. The old rule required .sec-head to be a
     direct child of .wrap, which is not how the Fund section is built — so
     the Fund heading was running underneath its ornament. Dropping the child
     combinator covers every section the same way. */
  section .sec-head h2,
  #fund .fund-head h3{
    /* Pinned, NOT tracking --orn-w. When this padding followed the mark's
       width, every increase in size squeezed the headings — at 72px two of
       them already gained a line, at 100px four did. Fixing the reserve at
       the width the headings were laid out for lets the mark grow downward
       and leftward into the empty band instead, and not one heading moves. */
    padding-right:var(--orn-reserve);
  }
}

/* Landscape tablets sat above the 860px phone query and so kept the full
   184px desktop mark, which is oversized for the width. */
@media (min-width:861px) and (max-width:1140px){
  section > .gbandwrap .in{max-width:none;margin-inline:0}

  /* The bridge is a fixed 4.3:1 drawing dropped into a fixed-height hero, so
     a narrower window makes it proportionally shorter, not just smaller: it
     filled 34% of the hero here against 46% on a laptop and 52% on a tablet
     held upright — a thin band rather than a structure. A modest zoom, kept
     centred, restores the same presence. The 8% trimmed from each side is
     water line and deck end, not tower or cable. */
  .hero-art{
    width:126%;
    max-width:none;
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
}

/* ── 53. Contact links: a finger-sized target ────────────────────────────
   The phone number and the email address are the two things a visitor on a
   phone is most likely to tap, and both were 20px tall — under half the 44px
   minimum. They sit alone in their own <dd> rows with 58-172px of clear space
   around them, so the target can grow without touching anything; a full-width
   44px band does it without moving or restyling the text itself. */
@media (max-width:860px){
  .cinfo dd > a,
  .f-support .plate{ position:relative }

  .cinfo dd > a::after,
  .f-support .plate::after{
    content:"";
    position:absolute;
    left:0; right:0; top:50%;
    height:44px;
    transform:translateY(-50%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   54. SHORT WINDOWS — the hero must fit the window, not the other way round

   Capping min-height was necessary but not sufficient: at 1400x470 the hero
   still measured 591px because its PADDING and type are sized for a full
   screen — 88px above, 104px below, plus a display headline. min-height only
   sets a floor, so the content pushed straight through it and the hero's
   bottom edge — where the bridge is anchored — fell 133px below the fold,
   taking the deck, piers, anchorages and waterline with it. What was left on
   screen was the cable crown and the tower tips: a bridge with no bottom.

   This is not an edge case. A browser window that is not maximised, a split
   screen, a laptop with a short viewport, or an embedded preview panel all
   land here. Below 620px of window height the hero packs down instead.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:861px) and (max-height:620px){
  .hero{
    min-height:min(max(400px,80vh),94vh);
    padding-block:clamp(3.25rem,7vh,4.5rem) clamp(2.25rem,4vw,3.25rem);
  }
  .hero h1{font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.04}
  .hero .hero-lead{font-size:clamp(.92rem,1.25vw,1.05rem);margin-top:.75rem}
  .hero .hero-note{font-size:.82rem}
  .hero-actions{margin-top:1.05rem}
  .btn{padding:.8rem 1.35rem;font-size:.76rem}
}


/* ═══════════════════════════════════════════════════════════════════════════
   55. HERO BRIDGE — the live-v2 treatment, ported verbatim

   Weeks of tuning opacity and stroke weight never made the full-width bridge
   read reliably: spread across 1900px at .45 opacity, its ink was so sparse
   that every monitor rendered it differently. Meanwhile the deploy at
   elbridgecapitalversionlive.netlify.app — measured directly — draws the SAME
   artwork as a CLOSE-UP: viewBox cropped to the right half (620 38 980 372),
   composed as a right-side element at FULL opacity. Dense ink, no fades, no
   screen dependence. Confirmed correct by the user on the exact monitor that
   kept losing the full-width version.

   Measured recipe at 1905x1080: width 830px (43.6vw), right -61px, bottom 0,
   opacity 1, no mask, strokes cable 1.5 / tower 1.3 / deck 1.2 / anchor 1.1 /
   pier 1.05 / hang .75 / truss .65 / water .8. Reproduced below with a clamp
   so the same composition scales to phones. The JS draw-on build animation
   is untouched — it targets the svg paths, which are all still there; the
   parts left of the crop simply build off-camera.

   This section is LAST on purpose: at equal specificity, source order makes
   every earlier .hero-art sizing/opacity/stroke rule — including the ones
   inside media queries — yield to it. Edit the bridge HERE and only here. */
.hero-art{
  left:auto;
  right:max(-3.2vw,-64px);
  bottom:0;
  width:clamp(340px,44vw,880px);
  max-width:none;
  transform:none;
  opacity:1;
  -webkit-mask-image:none;
          mask-image:none;
  animation:none;
}
.hero-art .bd-cable  path,.hero-art .bd-cable  line{stroke:rgba(var(--accent-rgb),.95);stroke-width:1.5}
.hero-art .bd-tower  path,.hero-art .bd-tower  line{stroke:rgba(var(--paper-rgb),.30);stroke-width:1.3}
.hero-art .bd-anchor path,.hero-art .bd-anchor line{stroke:rgba(var(--paper-rgb),.24);stroke-width:1.1}
.hero-art .bd-deck   path,.hero-art .bd-deck   line{stroke:rgba(var(--paper-rgb),.30);stroke-width:1.2}
.hero-art .bd-hang   path,.hero-art .bd-hang   line{stroke:rgba(var(--accent-rgb),.50);stroke-width:.75}
.hero-art .bd-pier   path,.hero-art .bd-pier   line{stroke:rgba(var(--paper-rgb),.22);stroke-width:1.05}
.hero-art .bd-truss  path,.hero-art .bd-truss  line{stroke:rgba(var(--paper-rgb),.14);stroke-width:.65}
.hero-art .bd-water  path,.hero-art .bd-water  line{stroke:rgba(var(--paper-rgb),.12);stroke-width:.8}

/* The reference deploy also steps the bridge back on phones — measured at
   opacity .5 on a 375px viewport — because there the composition sits under
   the CTA buttons rather than beside the text. Same here; part of the port. */
@media (max-width:860px){
  .hero-art{opacity:.55}
}

/* ═══════════════════════════════════════════════════════════════════════════
   56. HERO BRIDGE — the draw-in, ported from the original site

   The original normalises every stroke with pathLength="1" (set by the
   bootstrap in app.js), which is why a single pair of rules can prime all 180
   elements no matter how long each path really is. The build is then a plain
   css transition released by .in, with a per-element transition-delay giving
   the stagger — no JS timing loop, nothing to fall out of step.

   Only the hero draws. The bridge under the motto stays standing from first
   paint, as set in section 46.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The priming and the release are both written as inline style by app.js, so
   there are no rules here to lose a specificity race or a timing race. The
   only thing left for the stylesheet to do is guarantee a visitor who has
   asked for less motion sees the finished bridge, whatever the script does. */
@media (prefers-reduced-motion:reduce){
  .hero-art path,.hero-art line{
    stroke-dasharray:none !important;
    stroke-dashoffset:0 !important;
    transition:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   57. METRICS — one baseline for the figures, one for the blue labels

   Two separate misalignments, measured at 1440x900:

     FIGURES were 25px apart. .metric is a column flex box with
     justify-content:center, so each card centred its own contents. The first
     two carry a three-line label and the last two a single line, so the taller
     pair pushed its figure up and the shorter pair let it sit 10px lower.
     Starting from the top instead pins every figure to the same line.

     The CURRENCY MARK sat off the digits' baseline. .val is a flex row, and
     flex aligns items by their boxes, not their type — so the 28px euro sign
     and the 46px digits shared no baseline at all. align-items:baseline is
     what flexbox provides for exactly this.

   With the figures on one line and the label margin identical, the blue first
   line of every label lands on one baseline as a consequence.
   ═══════════════════════════════════════════════════════════════════════════ */
.metric{
  justify-content:flex-start;
}
.metric .val{
  align-items:baseline;
}