/*
Theme Name: Sylebra
Theme URI: https://example.com/
Author: Sylebra
Author URI: https://example.com/
Description: Placeholder-content theme for the Sylebra website. Structure mirrors a growth-equity investor site: home, about us (who we are, what we believe, team), investment strategy, investments, media and partner with us (with the contact form). Team members and portfolio companies are custom post types; media uses regular posts.
Version: 5.1.23
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sylebra
*/

/* Bundled web fonts (assets/fonts, SIL Open Font License): Poppins for
   headings -- the typeface the Sylebra wordmark is drawn from -- and Inter
   for body text. */
@font-face{font-family:"Poppins";src:url(assets/fonts/poppins-light.woff) format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(assets/fonts/poppins-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(assets/fonts/poppins-medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter-semibold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Page color: slate (#505f74 -- the tone the "at a glance" boxes used to
     turn on hover). --bg is the page, --bg-alt the alternating band
     (section.alt), --line the hairline rules drawn on the page.
     Because the page is now dark, the text that sits directly on it is light:
     --ink (headings/body), --muted (supporting copy), --accent-ink (small
     accent-colored labels) and --on-ink (text on an ink-filled button).
     The boxes and cards are navy (--box) and keep that same light text.
     The only surface that is still light is the header bar, which switches
     those variables back to their dark-on-light values in the "light
     surfaces" rule just below. */
  --bg:#505f74; --bg-alt:#465466; --ink:#f2f5f9; --muted:#d6dce5; --line:#7a889e; --accent-ink:#b0e4f5; --on-ink:#162236;
  /* The light steel the "at a glance" boxes turn on hover (their old resting color). */
  --quad-hover:#9db0c6;
  /* Fill and hairline border of every box/card on the site (navy, light text). */
  --box:#1b2a44; --box-line:rgba(255,255,255,.12);
  /* The panel a company logo sits on (a deeper navy than the card around it). */
  --logo-tile:#121d33;
  /* Accent palette pulled straight from the logo mark (blue/cyan/green/gold),
     pushed toward a brighter, more technology-forward feel than the original
     flat navy/gold pairing while keeping enough contrast for text and borders. */
  --accent:#1656b3; --accent-2:#2e9c4f; --accent-3:#0fb2d6; --accent-4:#d6a300;
  --gradient-tech:linear-gradient(120deg,var(--accent) 0%,var(--accent-3) 55%,var(--accent-2) 100%);
  /* --dark is the dark navy behind the hero, Who We Are, the Values boxes, the
     For Investors panel and the footer. Lightened one step from #0d1420. The
     see-through overlays on the videos use the same color as rgba(22,34,54,x). */
  --card:#ffffff; --dark:#162236; --dark-ink:#eef0f3;
  --ph:#e9eff6;
  --max:1160px; --gutter:24px;
  /* Two type roles, used the same way on every page:
     --serif = every heading and display line (h1-h4, card titles, taglines)
     --sans  = everything else (body copy, navigation, labels, buttons, forms).
     To run the whole site in a single typeface, point both at the same stack. */
  --serif:"Poppins","Helvetica Neue",Arial,sans-serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
/* The header is sticky (position:sticky, ~72px tall), so without this an
   anchor jump (e.g. from the About Us dropdown) lands the target section
   right under it -- looking like the click "did nothing." Push every
   anchor-able section down by the header's height on landing. */
section[id]{scroll-margin-top:68px}
body.admin-bar section[id]{scroll-margin-top:100px}
/* A flat background read as bare, so every plain section (any
   section without its own opaque background, like .alt or .dark) now shows
   a soft multi-color wash -- a sitewide texture instead of a blank page,
   without touching legibility. (The white dot grid that used to sit on top
   of it has been removed.) The washes are kept
   light so the slate reads as slate rather than drifting to teal. */
body{
  margin:0;color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 6% 8%, rgba(15,178,214,.13) 0, transparent 30%),
    radial-gradient(circle at 96% 14%, rgba(22,86,179,.14) 0, transparent 32%),
    radial-gradient(circle at 92% 92%, rgba(46,156,79,.12) 0, transparent 34%),
    radial-gradient(circle at 4% 96%, rgba(214,163,0,.12) 0, transparent 28%);
  background-size:140vw 140vw;
  background-position:0 0;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
/* Form controls don't inherit the page font by default (browsers fall back
   to their own UI font), so make them. */
button,input,select,textarea{font-family:inherit}
img{max-width:100%;display:block}
a{color:inherit}
/* Light surfaces: the few white (or near-white) areas left on the dark page.
   Inside them text, supporting copy, hairlines and accent labels go back to
   their dark-on-light values. */
.ph,.logo-cell{--ink:#10151c;--muted:#3f4650;--line:#d3dbe6;--accent-ink:#0e3f8c;--on-ink:#fff;color:var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.18;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5.4vw,4rem);font-weight:300;letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
/* A long headline that should stay on one line at normal page widths rather
   than use the standard (larger) h2 scale, which wraps it awkwardly. */
.one-line-heading{font-size:clamp(1.15rem,2.1vw,1.8rem)}
h3{font-size:1.2rem;font-weight:500}
h4{font-size:1.05rem;line-height:1.3;font-weight:500}
p{margin:0 0 1em}
.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:'';display:inline-block;width:20px;height:3px;border-radius:2px;background:var(--gradient-tech);flex-shrink:0}
section.dark .eyebrow::before,.who-we-are .eyebrow::before{background:linear-gradient(120deg,var(--accent-3),var(--accent-4))}
.ph{background:linear-gradient(135deg,#eaf2fb 0%,#eafaf1 100%);border:1px dashed #a9c3e0;color:var(--muted);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.8rem;padding:.5rem;position:relative;overflow:hidden}
.ph::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--gradient-tech)}
.tag{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);background:rgba(143,214,238,.1);border:1px solid rgba(143,214,238,.38);border-radius:99px;padding:.15rem .6rem}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(14,22,37,.88);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.08);color:var(--dark-ink)}
/* Clip only the logo area (guards against an oversized/uncached logo image) so the
   nav's dropdown submenus, which extend below the header, are never cropped. */
.logo{max-height:68px;overflow:hidden}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--serif);font-size:1.5rem;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.logo small{display:block;font-family:var(--sans);font-size:.55rem;letter-spacing:.2em;color:var(--muted)}
nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;align-items:center}
nav a{white-space:nowrap}
.logo{flex-shrink:0}
nav a{text-decoration:none;font-size:.9rem;color:rgba(238,240,243,.82);transition:color .15s ease}
nav a:hover,nav a[aria-current="page"]{color:#fff;text-decoration:underline;text-decoration-color:var(--accent-3);text-decoration-thickness:2px;text-underline-offset:8px}
.has-sub{position:relative}
.sub{display:none;position:absolute;top:100%;left:-12px;background:#111b2d;border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px -16px rgba(0,0,0,.6);border-radius:8px;padding:8px 0;min-width:240px;white-space:nowrap;list-style:none;flex-direction:column;gap:0}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex}
.sub a{display:block;padding:8px 16px}
.btn{display:inline-block;background:var(--gradient-tech);background-size:160% 160%;background-position:0% 50%;color:#fff;text-decoration:none;padding:.7rem 1.3rem;border-radius:4px;font-size:.9rem;border:0;cursor:pointer;font-family:inherit;transition:background-position .35s ease,box-shadow .25s ease;box-shadow:0 6px 20px -8px rgba(22,86,179,.45)}
.btn:hover{background-position:100% 50%;box-shadow:0 10px 26px -8px rgba(15,178,214,.5)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--ink);color:var(--on-ink)}
.site-header .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.site-header .btn.ghost:hover{background:#fff;color:#0e1625;text-decoration:none}
.menu-btn{display:none;align-items:center;gap:10px;background:none;color:var(--dark-ink);border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:.45rem .8rem;font-size:.9rem;cursor:pointer}
.menu-icon,.menu-icon::before,.menu-icon::after{display:block;width:16px;height:2px;border-radius:1px;background:currentColor;position:relative}
.menu-icon::before,.menu-icon::after{content:'';position:absolute;left:0}
.menu-icon::before{top:-5px}.menu-icon::after{top:5px}
/* Five menu items plus the LinkedIn button need about 1,000px. On narrower
   laptops the row tightens up; below 1040px the "Menu" button takes over
   (the same fold-away menu phones get), so the items never wrap or spill. */
@media (min-width:1041px) and (max-width:1150px){nav ul{gap:16px}nav a{font-size:.84rem}nav .btn{padding:.55rem .8rem}}
@media (max-width:1040px){
  .menu-btn{display:flex}
  .site-header nav{display:none;position:absolute;top:68px;left:0;right:0;background:#0e1625;border-bottom:1px solid rgba(255,255,255,.08);padding:20px var(--gutter) 28px;box-shadow:0 24px 40px -20px rgba(0,0,0,.6)}
  .site-header nav.open{display:block}
  .site-header nav ul{flex-direction:column;align-items:flex-start;gap:14px}
  .sub{display:flex;position:static;border:0;padding:4px 0 0 12px;background:none}
}

/* hero */
.hero{min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);display:flex;align-items:center;background:var(--dark);color:var(--dark-ink);position:relative;overflow:hidden}
.hero .wrap{padding-top:80px;padding-bottom:80px}
.hero h1{max-width:none}
.hero .scroll{position:absolute;bottom:28px;left:var(--gutter);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#8993a3}
.hero .bg{position:absolute;inset:0;opacity:.45;background:radial-gradient(circle at 80% 25%,var(--accent-3) 0,transparent 52%),radial-gradient(circle at 15% 90%,var(--accent-2) 0,transparent 48%),radial-gradient(circle at 50% 50%,var(--accent) 0,transparent 65%)}
.hero .wrap{position:relative;width:100%}
/* Page title band: a modest strip (roughly a third of a screen) with the
   title centered in it. */
.page-hero{min-height:32vh;display:flex;align-items:center;padding:84px 0 52px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-120px;right:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(15,178,214,.22) 0%,rgba(46,156,79,.14) 55%,transparent 75%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1;width:100%}
.page-hero p{max-width:60ch;color:var(--muted);font-size:1.1rem}
/* Video hero (Investments). The band takes the video's own 16:9 shape, capped
   at the height of the screen below the sticky header, and the video is
   fitted with object-fit:contain -- so the whole frame is always on screen
   and nothing is cropped off the top or bottom. (It used to be a short band
   with object-fit:cover, which sliced the top and bottom off the video.)
   On screens wider than 16:9 the video is centered and its side edges fade
   into the band's dark background. */
.page-hero.has-video{padding:32px 0;border-bottom:none;background:#0b1220;display:flex;align-items:center;min-height:min(56.25vw,calc(100vh - 68px))}
.page-hero.has-video::before{display:none}
.page-hero.has-video .wrap{width:100%}
.page-hero-video{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);height:100%;width:auto;max-width:100%;aspect-ratio:16/9;object-fit:contain;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
@media (max-width:700px){
  .page-hero.has-video{padding:16px 0}
  .page-hero.has-video .eyebrow{margin-bottom:.5rem}
  .page-hero.has-video h1{font-size:clamp(1.4rem,6.4vw,2.4rem);margin-bottom:.3em}
  .page-hero.has-video p{font-size:.9rem;margin:0}
}
.page-hero.has-video .page-hero-bg{position:absolute;inset:0;background:rgba(22,34,54,.5);z-index:1}
.page-hero.has-video .wrap{z-index:2}
.page-hero.has-video .eyebrow{color:#8993a3}
.page-hero.has-video h1{color:#fff}
.page-hero.has-video p{color:#c5cbd5;font-weight:700}
/* Visitors who ask their device to reduce motion get the still poster frame
   instead of the video, fitted the same uncropped way. */
@media (prefers-reduced-motion:reduce){.page-hero-video{display:none}.page-hero.has-video{background-image:var(--poster,none);background-size:contain;background-position:center;background-repeat:no-repeat}}

/* Four-quadrant "at a glance" grid: MSFT-logo-style 2x2 blocks, one uniform
   color. At rest each block is a slightly deeper shade of the slate page
   with light text; on hover/focus it turns light steel (--quad-hover) with
   dark text, with a slight compress for feedback. */
.quad-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-width:880px;margin:0 auto}
.quad{position:relative;background:rgba(22,34,54,.28);padding:44px 36px;transition:background-color .22s ease,transform .18s ease,color .22s ease;cursor:default}
.quad:hover,.quad:focus-within{background:var(--quad-hover);transform:scale(.95)}
.quad-label{display:block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--accent-ink);margin-bottom:12px;transition:color .22s ease}
.quad:hover .quad-label,.quad:focus-within .quad-label{color:#0e3f8c}
.quad-value{display:block;font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:400;line-height:1.3;color:var(--ink);transition:color .22s ease}
.quad:hover .quad-value,.quad:focus-within .quad-value{color:#10151c}
@media (max-width:640px){
	.quad-grid{grid-template-columns:1fr}
	.quad{padding:32px 24px}
}

section{padding:clamp(96px,13vh,152px) 0}
/* The named sections -- the "pages" within About Us and the home page (At a
   glance, Who We Are, Investment Strategy, Investment Criterion, Values,
   Team, Partner With Us) -- are each at least one full screen tall, with
   their content centered when it is shorter than the screen. Scrolling from
   one to the next is a full screen's travel, and a menu link to a section
   lands with that section filling the window just below the header. */
section[id]{min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);display:flex;flex-direction:column;justify-content:center}
section[id]>.wrap{width:100%}
/* The "at a glance" boxes sit directly under the Investment Strategy title
   band and share the first screen with it, so this one section is not
   stretched to a full screen of its own -- that left a large empty gap
   above the boxes. */
section.quad-glance{min-height:0;padding:72px 0 clamp(110px,14vh,170px)}
/* Investment Strategy page: the quadrants, the strategy and the criterion run
   on as one page -- one section, no labels, no alternating bands. Everything
   is spaced generously so each piece has room: a wide gap after the
   quadrants, between the staircase and the boxes under it, and a wider one
   still where the strategy part ends and the criterion part begins. */
/* Investment Approach page: three titled parts (Investment Criterion,
   Investment Strategy, The SGP Investment Wheelhouse). Strategy and
   Wheelhouse are each at least a full screen (section[id] above). */
section.strategy-page{padding-top:clamp(150px,20vh,230px);padding-bottom:clamp(110px,14vh,170px)}
.approach-heading{margin-bottom:.35em}
.quad-glance .approach-heading{margin-bottom:28px}
/* On Investment Approach the quadrants line up with the other sections' left
   and right edges instead of sitting in a narrower centered block. */
.approach-page .quad-grid{max-width:none;margin:0}
.approach-lead{color:var(--muted);font-size:1.05rem;max-width:none}
.approach-sub{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.3;color:var(--ink);margin:0 0 .6em}
.strategy-page .strategy-block>h2{margin-bottom:.7em}
.strategy-page .stage-track{margin-top:80px}
.strategy-page .stage-axis{margin-top:36px}
.strategy-page .cursor-grid{margin-top:104px;gap:24px}
.strategy-page .wheelhouse{margin-top:40px}
/* The decorative wave in What We Believe is drawn 4% wider than the content
   column; clip it to its section so it can't make the page scroll sideways. */
#values{overflow:hidden}

/* Partner With Us page: the contact form and office addresses under the
   partner content. */
.contact-split{align-items:start;margin-top:32px}
section.alt{
  background-color:var(--bg-alt);
  background-image:
    linear-gradient(155deg, rgba(15,178,214,.1) 0%, transparent 45%),
    linear-gradient(-25deg, rgba(46,156,79,.09) 0%, transparent 40%);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
section.dark{background:var(--dark);color:var(--dark-ink)}
section.dark .eyebrow{color:#8993a3}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

/* timeline -- each step in its own brand color so the progression reads
   as a colorful sequence rather than four identical blocks */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.timeline .step{border-top:3px solid var(--accent);padding-top:14px}
.timeline .step:nth-child(1){border-top-color:var(--accent)}
.timeline .step:nth-child(2){border-top-color:var(--accent-3)}
.timeline .step:nth-child(3){border-top-color:var(--accent-2)}
.timeline .step:nth-child(4){border-top-color:var(--accent-4)}
.timeline .yr{font-family:var(--serif);font-size:1.6rem}
.timeline .ph{height:120px;margin:12px 0}
.timeline-icon{width:40px;height:40px}
.timeline .step:nth-child(1) .timeline-icon{color:var(--accent)}
.timeline .step:nth-child(2) .timeline-icon{color:var(--accent-3)}
.timeline .step:nth-child(3) .timeline-icon{color:var(--accent-2)}
.timeline .step:nth-child(4) .timeline-icon{color:var(--accent-4)}

/* logo grid */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.logos .ph{height:96px;background:linear-gradient(135deg,#eaf2fb 0%,#eafaf1 100%)}

/* portfolio cards */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.filters button{font:inherit;font-size:.85rem;color:var(--ink);border:1px solid var(--box-line);background:var(--box);border-radius:99px;padding:.4rem 1rem;cursor:pointer;transition:border-color .15s ease}
.filters button:hover{border-color:var(--accent-3)}
.filters button[aria-pressed="true"]{background:var(--gradient-tech);color:#fff;border-color:transparent}

/* Portfolio / investments cards: a large logo tile up top (the company's
   own logo once uploaded, or a clean wordmark of its name until then),
   name and metadata tags for sector and HQ always visible, and the fuller
   description tucked behind a click -- reusing the disclosure pattern
   already used for the team cards. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.card{background:var(--box);border:1px solid var(--box-line);border-radius:10px;overflow:hidden;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.card:hover{box-shadow:0 18px 36px -18px rgba(22,86,179,.32);transform:translateY(-2px);border-color:var(--accent-3)}
.card summary{list-style:none;cursor:pointer;display:block}
.card summary::-webkit-details-marker{display:none}
.card .logo-tile{aspect-ratio:16/10;background:var(--logo-tile);display:flex;align-items:center;justify-content:center;padding:24px;position:relative}
.card .logo-tile::before{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gradient-tech)}
/* The logo fills the tile (minus a 24px margin) at whatever shape it is --
   tall, square or wide -- instead of being capped at a small fixed height. */
.card .logo-tile .logo-img{position:absolute;top:24px;left:24px;width:calc(100% - 48px);height:calc(100% - 48px);max-width:none;max-height:none;object-fit:contain;margin:0}
.card .logo-tile .wordmark{font-family:var(--serif);font-size:1.3rem;text-align:center;color:var(--ink);line-height:1.2}
.card .card-head{padding:16px 20px 18px}
.card .card-head .name-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card .card-head .name-row::after{content:"+";font-size:1.2rem;line-height:1;color:var(--accent-ink);flex-shrink:0}
.card[open] .card-head .name-row::after{content:"\2212";color:var(--accent-3)}
.card h3{margin:0}
.card .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:.6em}
.card .body{padding:0 20px 20px;color:var(--muted);font-size:.95rem}

/* founders carousel */
.carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;margin-top:32px}
.carousel figure{margin:0;flex:0 0 240px;scroll-snap-align:start}
.carousel .ph{aspect-ratio:4/5;margin-bottom:10px}
.carousel figcaption strong{display:block}
.carousel figcaption span{color:var(--muted);font-size:.9rem}

/* team -- collapsed to headshot + name/title; bio and LinkedIn only appear
   once the card is clicked (native <details>, no JS required) */
.group{margin-top:56px}
.group>h2{font-size:1.6rem;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:28px}
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.person{border:none}
.person summary{list-style:none;cursor:pointer;display:block;padding:0}
.person summary::-webkit-details-marker{display:none}
/* The name and title live in a caption band of "dead space" above each
   photo, so they read as part of the same photo card instead of sitting
   as plain text below it. */
.person-frame{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);transition:box-shadow .18s ease,transform .18s ease}
.person summary:hover .person-frame{box-shadow:0 18px 36px -18px rgba(22,86,179,.3);transform:translateY(-2px)}
/* Name and title sit directly on the photo, top right, as a soft dark
   fade into the corner rather than a solid banner -- so they read as
   part of the photo, not a caption stuck on top of it. */
.person-caption{position:absolute;top:0;left:0;right:0;z-index:1;padding:18px 20px 46px;text-align:right;background:linear-gradient(225deg,rgba(8,14,24,.82) 0%,rgba(8,14,24,.4) 38%,transparent 68%)}
.person-caption .name-row{display:flex;align-items:baseline;justify-content:flex-end;gap:8px}
.person-caption .name-row::after{content:"+";font-size:1.2rem;line-height:1;color:#fff;flex-shrink:0;transition:transform .15s ease}
.person[open] .person-caption .name-row::after{content:"\2212"}
.person h3{margin:0 0 .1em;color:#fff}
.person .title{color:#dbe1ea;font-size:.9rem;margin:0}
.person .ph{aspect-ratio:4/5;margin:0;border-radius:0;border:none}
.person img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;margin:0}
.person .bio{padding:14px 4px 0}
.person .bio p{font-size:.95rem}

/* insights */
.feed{list-style:none;padding:0;margin:0}
.feed li{display:grid;grid-template-columns:120px 1fr 100px;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.feed .cat{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.feed h3{margin:0 0 .2em}
.feed h3 a{text-decoration:none}
.feed h3 a:hover{text-decoration:underline}
.feed p{margin:0;color:var(--muted)}
.feed time{color:var(--muted);font-size:.9rem;text-align:right}
.more{text-align:center;margin-top:36px}
.media-credit{margin-top:56px;font-size:.72rem;color:var(--muted)}
.media-credit a{color:inherit}

/* mission principles */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
.principles div{border-top:3px solid var(--accent);padding-top:16px}
.principles div:nth-child(3n+1){border-top-color:var(--accent)}
.principles div:nth-child(3n+2){border-top-color:var(--accent-3)}
.principles div:nth-child(3n+3){border-top-color:var(--accent-2)}

/* Values: two dark-blue focus statements that sharpen on hover, followed by
   a big bold word-cloud of value words over a decorative original wave graphic. */
.focus-split{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:32px 0 8px}
.focus-box{background:linear-gradient(135deg,var(--dark) 0%,#1e346499 100%),var(--dark);color:var(--dark-ink);padding:40px 36px;transition:background-color .25s ease,transform .2s ease,box-shadow .25s ease}
.focus-box p{margin:0;font-size:1.15rem;line-height:1.55;font-weight:600}
.focus-box:hover{background:linear-gradient(135deg,#1b3272 0%,#1656b3 100%);transform:translateY(-4px);box-shadow:0 18px 36px -18px rgba(13,20,32,.55)}
@media (max-width:760px){.focus-split{grid-template-columns:1fr}}

.values-visual{position:relative;padding:48px 0 8px;border-top:1px solid var(--line)}
.values-wave{position:absolute;left:0;right:-4%;top:-24px;width:104%;height:60px;opacity:.3;pointer-events:none;z-index:0}
.values-words{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 48px}
.value-word{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.3;color:var(--ink)}
.value-word::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent-3);flex-shrink:0}
.values-wave path{stroke:var(--accent-3)}
@media (max-width:640px){.values-words{grid-template-columns:1fr}}


/* contact */
form{display:grid;gap:16px;max-width:560px}
label{font-size:.85rem;color:var(--muted);display:grid;gap:6px}
input,textarea,select{font:inherit;padding:.7rem .8rem;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:var(--box);color:var(--ink);color-scheme:dark}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent-3);outline-offset:1px}
textarea{min-height:140px;resize:vertical}
.offices{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.office{border-top:3px solid var(--accent-3);padding-top:14px}
.office:nth-child(2n){border-top-color:var(--accent-2)}

/* footer */
.site-footer{background:var(--dark);color:var(--dark-ink);padding:64px 0 32px;position:relative}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-tech)}
.site-footer h4{font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#8993a3;margin:0 0 12px;font-weight:500}
.site-footer p,.site-footer li,.site-footer a{color:#c5cbd5;font-size:.9rem;text-decoration:none}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .legal{margin-top:48px;padding-top:20px;border-top:1px solid #2e3c55;font-size:.8rem;color:#8993a3}

@media (max-width:900px){
  .split,.principles,.cards,.people,.offices{grid-template-columns:1fr}
  .timeline,.logos{grid-template-columns:repeat(2,1fr)}
  .feed li{grid-template-columns:1fr;gap:4px}
  .feed time{text-align:left}
  section{padding:76px 0}
  .page-hero{min-height:0;padding:72px 0 44px}
  section.quad-glance{padding:48px 0 72px}
  section.strategy-page{padding-top:110px;padding-bottom:72px}
  .strategy-page .stage-track{margin-top:48px}
  .strategy-page .cursor-grid{margin-top:64px;gap:16px}
  .strategy-page .wheelhouse{margin-top:48px}
}

/* WordPress specifics */
.has-sub,.menu-item-has-children{position:relative}
.sub-menu{display:none;position:absolute;top:100%;left:-12px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 0;min-width:220px;white-space:nowrap;list-style:none;flex-direction:column;gap:0;margin:0;z-index:60}
.menu-item-has-children:hover>.sub-menu,.menu-item-has-children:focus-within>.sub-menu{display:flex}
.sub-menu a{display:block;padding:8px 16px}
.current-menu-item>a,.current_page_item>a{color:var(--accent);text-decoration:underline;text-underline-offset:6px}
body.admin-bar .site-header{top:32px}
.logos img{max-height:64px;width:auto;margin:0 auto}
.logos .ph,.logos .logo-cell{height:96px;background:linear-gradient(135deg,#eaf2fb 0%,#eafaf1 100%);display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.entry{max-width:720px}
.entry img{height:auto}
.screen-reader-text{position:absolute;left:-9999px}
@media (max-width:1040px){
  .sub-menu{display:flex;position:static;border:0;padding:4px 0 0 12px;background:none}
}
@media (max-width:782px){body.admin-bar .site-header{top:46px}}

/* Hero video + logo */
.hero{background-size:cover;background-position:center}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero.has-video .bg{opacity:1;background:rgba(22,34,54,.55);z-index:1}
.hero .wrap{z-index:2}
.hero .scroll{z-index:2}
.hero-logo{display:block;width:900px;max-width:100%;height:auto;margin:0 0 clamp(48px,9vh,100px)}
/* The headline stays a step below the logo: the "Sylebra" letters in the
   lockup are always taller than the headline's capitals at every width. */
.hero h1{font-size:clamp(1.8rem,4.6vw,3.6rem)}
/* On anything wider than a phone the tagline is one left-aligned line that
   runs the full width of the content column: its size is the column width
   divided by the line's length in em (about 23.7 in Poppins Light). Phones let it
   wrap instead, since a single line there would be too small to read. */
@media (min-width:641px){
  .hero h1{white-space:nowrap;text-align:left;font-size:calc((min(100vw, var(--max)) - 2 * var(--gutter)) / 24.6)}
}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}

/* Header logo mark (icon + wordmark text, used when no custom logo is set) */
.logo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo-mark{height:34px;width:auto;display:block}
.logo-full{height:38px;width:auto;display:block}
.logo-word{font-family:var(--serif);font-size:1.5rem;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.logo small{flex-basis:100%}

/* About Us: bold "Who We Are" video section */
.who-we-are{position:relative;min-height:72vh;display:flex;align-items:center;background:var(--dark) center/cover no-repeat;color:var(--dark-ink);overflow:hidden}
.who-we-are .bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.who-we-are .overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(22,86,179,.5) 0%,rgba(22,34,54,.72) 45%,rgba(22,34,54,.82) 100%);z-index:1}
.who-we-are::after{content:'';position:absolute;inset:0;z-index:1;opacity:.5;background-image:radial-gradient(circle,rgba(15,178,214,.35) 1px,transparent 1.6px);background-size:26px 26px}
.who-we-are .wrap{position:relative;z-index:2;width:100%;padding-top:64px;padding-bottom:64px}
.who-we-are .eyebrow{color:#8ea3c2}
.who-we-are h2{max-width:20ch}
.who-we-are p{font-size:1.2rem;max-width:62ch;color:#dfe3e8}
.who-we-are p+p{margin-top:1em}
@media (prefers-reduced-motion:reduce){.who-we-are .bgvideo{display:none}}

/* About Us page: the Who We Are background (video, dark blue wash, dot
   pattern) sits behind the entire page. .about-backdrop is one screen tall
   and "sticky", so it stays put under the header while Who We Are, What We
   Believe and Team scroll over it; its negative bottom margin takes it out
   of the page's height. The sections themselves are transparent. */
/* clip-path keeps the pinned backdrop from showing past the end of the page
   (over whatever follows it) once the last section has scrolled by. */
.about-page{--backdrop-h:calc(100vh - 68px);position:relative;isolation:isolate;clip-path:inset(0);background:var(--dark);color:var(--dark-ink)}
@supports (height:100lvh){.about-page{--backdrop-h:calc(100lvh - 68px)}}
.about-backdrop{position:sticky;top:68px;z-index:-1;height:var(--backdrop-h);margin-bottom:calc(var(--backdrop-h) * -1);overflow:hidden;background:var(--dark) center/cover no-repeat}
body.admin-bar .about-backdrop{top:100px}
.about-backdrop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-backdrop .overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,16,30,.86) 0%,rgba(9,16,30,.7) 38%,rgba(9,16,30,.38) 70%,rgba(9,16,30,.22) 100%)}
/* The digital-factory video carries its own grid, so the dot pattern is off here. */
.about-backdrop::after{content:none}
@media (max-width:700px){.about-backdrop .overlay{background:rgba(9,16,30,.74)}}
.about-page .who-we-are,.about-page section.alt{background:none}
.about-page .who-we-are{overflow:visible}
.about-page .who-we-are::after{display:none}
/* The two What We Believe boxes are the same navy as the backdrop, so give
   them a hairline edge to stand off it. */
/* About Us, What We Believe: the two boxes use the same colors as the four
   boxes at the top of Investment Approach -- dark navy with a thin light
   outline, turning light steel (--quad-hover) with dark text and shrinking
   slightly on hover or tap. */
.about-page .focus-split{gap:14px}
.about-page .focus-box{background:var(--box);border:1px solid var(--box-line);border-radius:10px;box-shadow:none;color:var(--ink);transition:background-color .22s ease,transform .18s ease,color .22s ease}
.about-page .focus-box p{transition:color .22s ease}
.about-page .focus-box:hover,.about-page .focus-box:focus-within{background:var(--quad-hover);transform:scale(.95);box-shadow:none}
.about-page .focus-box:hover p,.about-page .focus-box:focus-within p{color:#10151c}
@media (prefers-reduced-motion:reduce){.about-page .focus-box:hover,.about-page .focus-box:focus-within{transform:none}}
@media (prefers-reduced-motion:reduce){.about-backdrop video{display:none}}

/* Team & Partner With Us as in-page sections (About Us page) */
#team .group:first-of-type{margin-top:0}

/* Partner With Us: large tagline with the Sylebra mark underneath it,
   shown static (no animation). */
.partner-intro{margin-bottom:clamp(200px,26vh,300px);text-align:center}
.partner-tagline{margin:0 0 56px;font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;color:var(--ink)}
.logo-pinwheel{width:clamp(180px,22vw,280px);aspect-ratio:192/239;margin:0 auto}
.logo-pinwheel svg{width:100%;height:100%;display:block;overflow:visible}

/* Investment Strategy: staged growth graphic (Platform / Growth / Private in
   Public), laid out as a staircase rising left to right. Each card sits in
   its own column AND its own row -- Platform bottom-left, Growth in the
   middle, Private in Public top-right -- so the top-right corner of one card
   meets the bottom-left corner of the next, a small gap apart. */
.stage-track{margin:44px 0 8px}
/* Overlapping staircase: each card is 40% of the width and steps 30% along,
   so neighbours overlap by a quarter of a card across, and they share one of
   four rows, so they overlap by about a quarter of a card down. Each higher
   step sits on top of the one below it. */
.stage-cards{display:grid;grid-template-columns:repeat(40,minmax(0,1fr));grid-template-rows:repeat(10,auto);gap:0}
.stage-card{position:relative;background:var(--accent);color:#fff;border-radius:12px;padding:30px 32px 32px;box-shadow:0 18px 40px -16px rgba(8,14,24,.65)}
.stage-card:nth-child(1){background:var(--accent);grid-column:1/span 16;grid-row:7/span 4;z-index:1}
.stage-card:nth-child(2){background:var(--accent-3);grid-column:13/span 16;grid-row:4/span 4;z-index:2}
.stage-card:nth-child(3){background:var(--accent-2);grid-column:25/span 16;grid-row:1/span 4;z-index:3}
.stage-card h4{margin:0 0 .45em;font-size:1.5rem}
.stage-card p{margin:0;font-size:1rem;line-height:1.55;color:#eef1f5;max-width:30ch}
.stage-icon{width:26px;height:26px;color:#fff;opacity:.9;margin-bottom:10px}
.stage-axis{display:flex;justify-content:space-between;gap:12px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border-top:2px solid var(--line);padding-top:12px;margin-top:24px}
@media (max-width:900px){
  .stage-cards{grid-template-columns:1fr;grid-template-rows:none;gap:12px}
  .stage-card:nth-child(n){grid-column:auto;grid-row:auto}
  .stage-card{padding:22px 24px}
  .stage-card h4{font-size:1.25rem}
  .stage-card p{max-width:none}
}

/* Reusable "cursor visits, box brightens" motif -- a moving highlight that
   travels between a row of boxes, used for the Investment Strategy takeaways. */
.cursor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cursor-grid .cursor-box:first-child{grid-column:1/-1}
.cursor-box{--line:var(--box-line);position:relative;background:var(--box);border:1px solid var(--line);border-radius:10px;padding:22px;overflow:hidden;animation:cursor-brighten 6.4s ease-in-out infinite;--glow:var(--accent)}
.cursor-box::after{content:'';position:absolute;top:14px;right:14px;width:9px;height:9px;border-radius:50%;background:var(--glow);opacity:0;box-shadow:0 0 12px 2px var(--glow);animation:cursor-dot 6.4s ease-in-out infinite}
.cursor-box h4{margin:0 0 .5em}
.cursor-box p{margin:0;font-size:.9rem;color:var(--muted)}
.cursor-grid .cursor-box:nth-child(1){animation-delay:0s;--glow:var(--accent)}
.cursor-grid .cursor-box:nth-child(1)::after{animation-delay:0s}
.cursor-grid .cursor-box:nth-child(2){animation-delay:1.6s;--glow:var(--accent-3)}
.cursor-grid .cursor-box:nth-child(2)::after{animation-delay:1.6s}
.cursor-grid .cursor-box:nth-child(3){animation-delay:3.2s;--glow:var(--accent-2)}
.cursor-grid .cursor-box:nth-child(3)::after{animation-delay:3.2s}
.cursor-grid .cursor-box:nth-child(4){animation-delay:4.8s;--glow:var(--accent-4)}
.cursor-grid .cursor-box:nth-child(4)::after{animation-delay:4.8s}
@keyframes cursor-brighten{0%,10%{box-shadow:none;border-color:var(--line)}16%,24%{box-shadow:0 14px 32px -12px rgba(22,86,179,.3);border-color:var(--glow)}32%,100%{box-shadow:none;border-color:var(--line)}}
@keyframes cursor-dot{0%,10%{opacity:0;transform:scale(.6)}16%,24%{opacity:1;transform:scale(1)}32%,100%{opacity:0;transform:scale(.6)}}
@media (prefers-reduced-motion:reduce){.cursor-box,.cursor-box::after{animation:none}}
@media (max-width:900px){.cursor-grid{grid-template-columns:1fr}.cursor-grid .cursor-box:first-child{grid-column:auto}}

/* Investment Criterion: the SGP Investment Wheelhouse -- a large three-circle
   diagram. Each circle is a button. Hovering it (or focusing it with the
   keyboard) pops up that approach's text box next to it -- Platform on the
   left, Growth on the right, Private in Public underneath -- for as long
   as the pointer is there (.is-peek); clicking pins it open (.is-open)
   until it is clicked again. script.js sets those classes and adds
   .is-interactive, so if scripts don't run the three boxes are simply all
   visible, as before. */
.wheelhouse{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px) minmax(0,1fr);grid-template-areas:"wh-platform wh-venn wh-growth" "wh-pip wh-pip wh-pip";gap:22px 26px;align-items:start;margin-top:28px}
.wh-card{position:relative;overflow:hidden;background:var(--box);border:1px solid var(--box-line);border-radius:10px;padding:22px 22px 20px}
.wh-card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px}
.wh-card h4{margin:0 0 .5em}
.wh-card p{margin:0;font-size:.88rem;color:var(--muted)}
.wh-card p+.wh-list{margin-top:14px;padding-top:14px;border-top:1px solid var(--box-line)}
.wh-list{list-style:none;margin:0;padding:0;font-size:.88rem;line-height:1.45;color:var(--muted)}
.wh-list li{position:relative;padding-left:16px}
.wh-list li+li{margin-top:7px}
.wh-list li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:#4a8fe8}
.wh-growth .wh-list li::before{background:var(--accent-3)}
.wh-pip .wh-list li::before{background:var(--accent-2)}
.wh-platform{grid-area:wh-platform;margin-top:44px}
.wh-platform::before{background:#4a8fe8}
.wh-growth{grid-area:wh-growth;margin-top:44px}
.wh-growth::before{background:var(--accent-3)}
.wh-pip{grid-area:wh-pip;max-width:560px;width:100%;margin:0 auto}
.wh-pip::before{background:var(--accent-2)}
.wheelhouse.is-interactive .wh-card{display:none;animation:wh-pop .22s ease}
.wheelhouse.is-interactive .wh-card.is-peek,.wheelhouse.is-interactive .wh-card.is-open{display:block}
/* Wide screens: the Private in Public box always keeps its row under the
   diagram, just invisible until its circle is hovered or clicked. That way
   the page below doesn't jump while the mouse moves across the circles,
   and the box can never run into the footer (it used to float over the
   section's bottom padding, which is shorter than the box). The section's
   bottom padding is trimmed to make up for the reserved row. */
@media (min-width:1101px){
  .wheelhouse-page{padding-bottom:clamp(56px,7vh,90px)}
  .wheelhouse.is-interactive .wh-pip{display:block;visibility:hidden;opacity:0;transform:translateY(8px);animation:none;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
  .wheelhouse.is-interactive .wh-pip.is-peek,.wheelhouse.is-interactive .wh-pip.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease,visibility 0s}
}
@keyframes wh-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wheelhouse.is-interactive .wh-card{animation:none;transition:none}}
.wh-venn{grid-area:wh-venn;position:relative;width:100%;max-width:460px;aspect-ratio:1/1;margin:0 auto}
.wh-circle{position:absolute;border-radius:50%;display:flex;align-items:flex-start;justify-content:center;text-align:center;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#fff;margin:0;padding:13% 0 0;border:0;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease}
.wheelhouse:not(.is-interactive) .wh-circle{cursor:default}
.wh-circle span{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:1}
.wh-circle .tech-icon{width:22px;height:22px;flex:none}
.wheelhouse.is-interactive .wh-circle span::after{content:"+";font-size:1.15rem;line-height:.8;font-weight:400;letter-spacing:0}
.wheelhouse.is-interactive .wh-circle[aria-expanded="true"] span::after{content:"\2212"}
.wh-circle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wheelhouse.is-interactive .wh-circle[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.wh-c1{width:62%;height:62%;left:0;top:6%;padding-right:9%;background-color:rgba(52,116,214,.6)}
.wheelhouse.is-interactive .wh-c1:hover,.wheelhouse.is-interactive .wh-c1[aria-expanded="true"]{background-color:rgba(52,116,214,.82)}
.wh-c2{width:62%;height:62%;right:0;top:6%;padding-left:9%;background-color:rgba(15,178,214,.62);color:#05242c}
.wheelhouse.is-interactive .wh-c2:hover,.wheelhouse.is-interactive .wh-c2[aria-expanded="true"]{background-color:rgba(15,178,214,.84)}
.wh-c3{width:62%;height:62%;left:19%;bottom:0;color:#fff;background-color:rgba(46,156,79,.9);align-items:flex-end;padding-top:0;padding-bottom:9%}
.wheelhouse.is-interactive .wh-c3:hover,.wheelhouse.is-interactive .wh-c3[aria-expanded="true"]{background-color:rgb(46,156,79)}
.wh-center{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:40%;height:40%;border-radius:50%;background:var(--box);border:2px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.74rem;line-height:1.5;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);padding:8%}
/* Below ~1100px there isn't room for a readable box either side of the
   diagram, so the boxes open underneath it instead, in the normal flow of
   the page so they push the footer down rather than covering it. */
@media (max-width:1100px){
  .wheelhouse{grid-template-columns:minmax(0,1fr);grid-template-areas:"wh-venn" "wh-platform" "wh-growth" "wh-pip";gap:16px}
  .wh-venn{margin-bottom:8px}
  .wh-card{max-width:560px;width:100%;margin-left:auto;margin-right:auto}
  .wh-platform,.wh-growth{margin-top:0}
}
@media (max-width:560px){
  .wh-circle{font-size:.68rem}
  .wh-circle .tech-icon{width:16px;height:16px}
  .wh-center{font-size:.56rem}
}

/* Partner With Us: "For Management Teams" cards (colored to match the same
   Platform / Growth / Private in Public triad used in Investment Strategy
   and Investment Criterion, so the three-part story stays visually
   consistent across the page), then a contrasting "For Investors" band
   with three large pull-quote words. */
.partner-block-label{font-size:1.1rem;margin-bottom:20px}
/* Larger, clearly-defined subheaders for the "For Management Teams" and "For
   Investors" pieces -- a bigger serif heading with an accent dash and a rule
   underneath so each piece of the section reads as its own distinct block. */
.partner-subhead{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2rem);font-weight:400;display:flex;align-items:center;gap:14px;margin:0 0 32px;padding-bottom:16px;border-bottom:2px solid var(--line)}
.partner-subhead::before{content:'';display:inline-block;width:30px;height:4px;border-radius:2px;background:var(--gradient-tech);flex-shrink:0}
.partner-subhead--dark{color:#fff;border-bottom-color:rgba(255,255,255,.2)}
.partner-subhead--dark::before{background:linear-gradient(120deg,var(--accent-3),var(--accent-4))}
/* EDITED: "For Management Teams" boxes. Each shows only its icon and title.
   Clicking (tapping, or Enter on the keyboard) a box opens its paragraph;
   clicking it again closes it, and only one is open at a time (script.js).
   Hovering only highlights a box -- nothing floats over the content below.
   Wide screens: the paragraph opens as a full-width panel under the row of
   three boxes, in the normal flow of the page, so it pushes "For Investors"
   down. Phones (boxes stacked): it opens inside its own box.
   script.js adds .is-interactive; without it all three paragraphs are
   simply visible inside their boxes. */
.partner-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:8px;align-items:start}
.partner-card{background:var(--box);border:1px solid var(--box-line);border-radius:10px;position:relative;transition:box-shadow .18s ease,border-color .18s ease}
.partner-head{margin:0;position:relative;overflow:hidden;border-radius:9px 9px 0 0}
.partner-head::before{content:'';position:absolute;left:0;right:0;top:0;height:4px}
.partner-card--platform .partner-head::before{background:#4a8fe8}
.partner-card--growth .partner-head::before{background:var(--accent-3)}
.partner-card--pip .partner-head::before{background:var(--accent-2)}
.partner-toggle{display:block;width:100%;margin:0;padding:24px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.partner-cards:not(.is-interactive) .partner-toggle{cursor:default}
.partner-toggle:focus-visible{outline:2px solid var(--accent-3);outline-offset:-3px;border-radius:10px}
.partner-card .name-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.partner-cards.is-interactive .name-row::after{content:"+";font-size:1.2rem;line-height:1;color:var(--accent-ink);flex-shrink:0}
.partner-cards.is-interactive .partner-toggle:hover .name-row::after{color:var(--accent-3)}
.partner-card .body{padding:0 24px 24px}
.partner-card p{margin:0;font-size:.92rem;color:var(--muted)}
.partner-icon{display:block;width:30px;height:30px;margin-bottom:14px}
.partner-card--platform .partner-icon{color:#7db2f5}
.partner-card--growth .partner-icon{color:#3cc6e6}
.partner-card--pip .partner-icon{color:#62cf86}
/* collapsed by default once the script is running */
.partner-cards.is-interactive .partner-card .body{display:none}
/* opened by a click or tap */
.partner-cards.is-interactive .partner-card.is-open .body{display:block}
.partner-cards.is-interactive .partner-card.is-open .name-row::after{content:"\2212";color:var(--accent-3)}
/* hover: highlight only */
@media (hover:hover){
  .partner-cards.is-interactive .partner-card:hover{border-color:rgba(143,214,238,.45)}
}
/* Wide screens: the three headings stay in one row and the open paragraph
   spans the whole row underneath them. The card wrapper steps aside
   (display:contents), so the heading and the paragraph each become their
   own item in the row grid; order:1 sends every paragraph below all three
   headings. */
@media (min-width:901px){
  .partner-cards.is-interactive{align-items:stretch;row-gap:16px}
  .partner-cards.is-interactive .partner-card{display:contents}
  .partner-cards.is-interactive .partner-head{background:var(--box);border:1px solid var(--box-line);border-radius:10px;transition:border-color .18s ease,box-shadow .18s ease}
  .partner-cards.is-interactive .partner-toggle{height:100%}
  .partner-cards.is-interactive .partner-card.is-open .partner-head{border-color:var(--accent-3);box-shadow:0 0 0 1px var(--accent-3)}
  .partner-cards.is-interactive .partner-card .body{order:1;grid-column:1/-1;position:relative;overflow:hidden;background:var(--box);border:1px solid var(--box-line);border-radius:10px;padding:30px 36px 32px;box-shadow:none}
  .partner-cards.is-interactive .partner-card.is-open .body{animation:partner-drop .2s ease}
  .partner-cards.is-interactive .partner-card .body::before{content:'';position:absolute;left:0;right:0;top:0;height:4px}
  .partner-cards.is-interactive .partner-card--platform .body::before{background:#4a8fe8}
  .partner-cards.is-interactive .partner-card--growth .body::before{background:var(--accent-3)}
  .partner-cards.is-interactive .partner-card--pip .body::before{background:var(--accent-2)}
  .partner-cards.is-interactive .partner-card .body p{font-size:1rem;line-height:1.7;max-width:none}
}
@media (min-width:901px) and (hover:hover){
  .partner-cards.is-interactive .partner-head:hover{border-color:rgba(143,214,238,.45)}
}
@keyframes partner-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.partner-card .body{animation:none!important}}

.partner-investors{
  position:relative;overflow:hidden;margin-top:clamp(170px,22vh,260px);border-radius:14px;
  background:linear-gradient(135deg,var(--dark) 0%,#17325f 55%,#10454f 100%);
  color:var(--dark-ink);padding:56px var(--gutter);
}
.partner-investors::after{content:'';position:absolute;inset:0;opacity:.5;background-image:radial-gradient(circle,rgba(15,178,214,.35) 1px,transparent 1.6px);background-size:26px 26px;pointer-events:none}
.partner-investors .inner{position:relative;z-index:1;width:100%}
.partner-investors .eyebrow{color:#8ea3c2}
.partner-investors .eyebrow::before{background:linear-gradient(120deg,var(--accent-3),var(--accent-4))}
.partner-investors p{font-size:1.1rem;color:#dfe3e8;max-width:none}
.pillars{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;margin-top:36px;position:relative;z-index:1;text-align:center}
.pillars span{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:400;text-transform:uppercase;letter-spacing:.03em;background:linear-gradient(120deg,#fff 0%,var(--accent-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:900px){
  .partner-cards{grid-template-columns:1fr}
  .partner-investors{padding:40px var(--gutter);margin-top:120px}
  .partner-intro{margin-bottom:120px}
  .pillars{gap:14px 28px}
}

/* Video-backed pages (Investments): one screen-tall video, held in place
   behind the whole page (title band and company cards) while the content
   scrolls over it. Same technique as .about-page / .about-backdrop. */
.video-page{--backdrop-h:calc(100vh - 68px);position:relative;isolation:isolate;clip-path:inset(0);background:#0b1220;color:var(--dark-ink)}
@supports (height:100lvh){.video-page{--backdrop-h:calc(100lvh - 68px)}}
.page-backdrop{position:sticky;top:68px;z-index:-1;height:var(--backdrop-h);margin-bottom:calc(var(--backdrop-h) * -1);overflow:hidden;background:#0b1220 center/cover no-repeat}
body.admin-bar .page-backdrop{top:100px}
.page-backdrop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-backdrop .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,16,30,.45) 0%,rgba(9,16,30,.62) 55%,rgba(9,16,30,.74) 100%)}
.video-page .page-hero{background:none;border-bottom:none;min-height:42vh}
.video-page .page-hero::before{display:none}
.video-page .page-hero h1{color:#fff}
.page-hero-logo{display:block;width:420px;max-width:100%;height:auto;margin:0 0 28px}
.video-page .page-hero p{color:#c5cbd5;font-weight:700}
.video-page>section{background:none}
@media (prefers-reduced-motion:reduce){.page-backdrop video{display:none}}
/* Investment Approach: the scrolling-code video is busier than the others,
   so it gets a heavier tint to keep the boxes and diagram easy to read. */
/* The code is brightened, then tinted heavily only down the middle (where
   the text and boxes sit) and lightly toward the left and right edges, so it
   shows clearly around the outside without competing with the content. */
.approach-page .page-backdrop .overlay{-webkit-backdrop-filter:brightness(2) contrast(1.2);backdrop-filter:brightness(2) contrast(1.2);background:linear-gradient(90deg,rgba(9,16,30,0) 0%,rgba(9,16,30,.4) 15%,rgba(9,16,30,.82) 30%,rgba(9,16,30,.86) 50%,rgba(9,16,30,.82) 70%,rgba(9,16,30,.4) 85%,rgba(9,16,30,0) 100%)}
@media (max-width:900px){.approach-page .page-backdrop .overlay{background:rgba(9,16,30,.78)}}
.approach-page .quad{background:var(--box);border:1px solid var(--box-line)}
.approach-page .quad:hover,.approach-page .quad:focus-within{background:var(--quad-hover)}
/* Media: Earth-from-orbit photo with a slow drift, tinted more heavily
   toward the bottom where the post list sits. */
.page-backdrop .drift{position:absolute;inset:-3%;background:center 40%/cover no-repeat;animation:backdrop-drift 70s ease-in-out infinite alternate;will-change:transform}
@keyframes backdrop-drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(-2.5%,1%,0)}}
@media (prefers-reduced-motion:reduce){.page-backdrop .drift{animation:none}}
.media-page .page-backdrop .overlay{background:linear-gradient(180deg,rgba(9,16,30,.25) 0%,rgba(9,16,30,.45) 45%,rgba(9,16,30,.72) 100%)}
/* Investment Criterion fills the first screen: the four boxes are taller,
   with larger type, in the same color as the strategy boxes further down. */
@media (min-width:641px){
  .approach-page section.quad-glance{min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);display:flex;flex-direction:column;justify-content:center;padding:48px 0}
  .approach-page .quad-grid{gap:14px;grid-auto-rows:minmax(clamp(170px,30vh,300px),auto)}
  .approach-page .quad{padding:clamp(32px,5vh,56px) clamp(28px,3vw,48px);border-radius:10px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left}
  .approach-page .quad-label{font-size:.85rem;margin-bottom:16px}
  .approach-page .quad-value{font-size:clamp(1.6rem,2.8vw,2.4rem)}
}
/* Partner With Us: the same dark navy page as About Us. */
.partner-page{background:var(--dark);color:var(--dark-ink)}
.partner-page section,.partner-page section.alt{background:none}
.partner-page .partner-investors{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
/* About Us and Investment Approach: plain dark navy, like Partner With Us
   (no background video). */
.approach-page{background:var(--dark);color:var(--dark-ink)}
.approach-page section{background:none}
/* Watermark: the Sylebra mark in one faint tone, tiled across the navy
   pages (About Us, Investment Approach, Partner With Us). */
.navy-page{background-color:var(--dark);background-image:url(assets/watermark.svg);background-size:600px 600px;background-repeat:repeat;color:var(--dark-ink)}
.navy-page>section,.navy-page section.alt{background:none}
/* Title band on navy pages (Investments, Media): no band colour or rule,
   just the title on the page itself. */
.navy-page .page-hero{background:none;border-bottom:none;min-height:0;padding:clamp(72px,11vh,120px) 0 clamp(24px,4vh,48px)}
.navy-page .page-hero::before{display:none}
.navy-page .page-hero h1{color:#fff}

/* ---- Polish pass ------------------------------------------------------ */
/* Team: one consistent black-and-white treatment (the original photos have
   very different backgrounds); full colour on hover or when opened. */
.person img{filter:grayscale(1) contrast(1.06) brightness(1.02);transition:filter .35s ease}
.person summary:hover img,.person[open] img,.person summary:focus-visible img{filter:none}

/* Strategy takeaway boxes: no more looping highlight -- a quiet hover instead. */
.cursor-box,.cursor-box::after{animation:none}
.cursor-box::after{display:none}
.cursor-box{transition:border-color .2s ease,box-shadow .2s ease}
.cursor-box:hover{border-color:rgba(143,214,238,.45);box-shadow:0 14px 32px -16px rgba(0,0,0,.55)}

/* Gentle fade-up as content scrolls into view (script.js adds .reveal and
   .in). Uses the separate "translate" property so it never fights hover
   transforms; skipped entirely for visitors who prefer reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;translate:0 0}
}

/* Footer */
.site-footer .cols{display:grid;grid-template-columns:1.2fr 2fr auto;gap:32px 48px;align-items:start}
.footer-logo img{height:35px;width:auto;display:block}
.footer-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.footer-nav a{font-size:.9rem}
.footer-connect{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.footer-linkedin{display:inline-flex;align-items:center;gap:8px}
.site-footer .disclaimer{margin:40px 0 0;max-width:none;font-size:.78rem;line-height:1.6;color:#8993a3}
.site-footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
@media (max-width:900px){.site-footer .cols{grid-template-columns:1fr}}

/* Contact form */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note{padding:12px 16px;border-radius:8px;font-size:.92rem;margin:0 0 18px}
.form-note--ok{background:rgba(46,156,79,.16);border:1px solid rgba(98,207,134,.4);color:#d8f3e1}
.form-note--err{background:rgba(214,80,60,.14);border:1px solid rgba(240,120,100,.4);color:#fbe0da}

/* Media: empty state */
.feed .feed-empty{display:block;color:var(--muted);border:0;padding:24px 0}
.feed .feed-empty p{margin:0}

/* Display type tuned for Poppins */
.partner-tagline{font-weight:300;letter-spacing:-.02em}
.pillars span{font-weight:300;letter-spacing:.06em}
.quad-value{letter-spacing:-.01em}
/* Investments and Media: content follows the title closely. */
.navy-page .page-hero + section{padding-top:clamp(16px,3vh,40px)}
/* Dropdowns: items left-aligned; flat (no panel) inside the phone menu. */
nav .sub{align-items:stretch}
@media (max-width:1040px){nav .sub{box-shadow:none;border:0;background:none;min-width:0}}
/* Investments and Media keep their video / photo backgrounds; the navy page
   colour only shows while those load. */
.video-page.navy-page{background-image:none}
/* Media: no empty strip of photo under the list; the credit lives in the footer. */
.media-page>section:last-of-type{padding-bottom:clamp(56px,8vh,96px)}
.site-footer .legal .credit{flex-basis:100%;order:3;font-size:.6rem;line-height:1.5;color:rgba(238,240,243,.28)}
.site-footer .legal .credit a{color:inherit;text-decoration:none}
.site-footer .legal .credit a:hover{color:rgba(238,240,243,.55);text-decoration:underline}
/* No grey anywhere: the base page colour is the site navy (the old slate
   showed below the footer on pages shorter than the window), and the footer
   always sits at the bottom of the window on short pages. */
html{background:var(--dark)}
body{background-color:var(--dark);background-image:none;min-height:100vh;display:flex;flex-direction:column}
#main{flex:1 0 auto}
/* Photo/video pages always fill at least the window, so the whole background
   (the Earth sits in the lower half of the Media photo) is never cut off on a
   short page. */
.video-page{min-height:calc(100vh - 68px);min-height:calc(100svh - 68px)}
.site-footer .legal .credit a{font-size:inherit}
/* Small status label under a portfolio company's name (e.g. Pending). */
.tag.status-pill{font-weight:600;color:#f6d977;background:rgba(252,221,21,.1);border-color:rgba(252,221,21,.42)}
/* Investments: slightly wider cards, and each card's labels kept to one line
   in a smaller, mixed-case style. */
.investments-page .wrap{max-width:1300px}
.investments-page .cards{gap:20px}
/* However many companies are listed, the cards share the full width of the
   row (two companies = two half-width cards) instead of leaving empty
   columns on the right. They drop to one per row on narrow screens. */
.investments-page .cards{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:700px){.investments-page .cards{grid-template-columns:1fr}}
/* The logo panel would get very tall on a half-width card; keep it to a
   steady band height instead. */
.investments-page .card .logo-tile{aspect-ratio:auto;height:clamp(200px,20vw,280px)}
.investments-page .card .logo-tile .logo-img{top:16%;bottom:auto;left:18%;width:64%;height:68%}
.card .meta{flex-wrap:nowrap;gap:6px}
.card .meta .tag{font-size:.66rem;letter-spacing:.015em;text-transform:none;padding:.14rem .48rem;white-space:nowrap}
.investments-page .card .card-head{padding-left:18px;padding-right:18px}
.card .meta .tag.status-pill{text-transform:uppercase;letter-spacing:.08em;font-size:.6rem}
@media (max-width:1260px){.card .meta{flex-wrap:wrap}}
/* Team member without a photo yet: initials on navy, same 4:5 shape. */
.person-initials{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#1f3150 0%,#14213a 100%) ,url(assets/watermark.svg) center/300px;}
.person-initials span{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,5vw,3.6rem);letter-spacing:.04em;color:rgba(238,240,243,.75)}
/* Team: name and title along the bottom of each photo (clear of faces), on a
   soft dark fade; left-aligned with the open/close sign at the right. */
.person-caption{top:auto;bottom:0;padding:56px 18px 16px;text-align:left;background:linear-gradient(0deg,rgba(8,14,24,.9) 0%,rgba(8,14,24,.62) 45%,transparent 100%)}
.person-caption .name-row{justify-content:space-between}
.person h3{font-size:1.1rem}
.person .title{font-size:.82rem;line-height:1.35}
/* Team: four smaller cards per row, square photos (less zoomed in). */
.people{grid-template-columns:repeat(4,1fr);gap:22px}
.person img,.person .ph,.person-initials{aspect-ratio:1/1}
.person-initials span{font-size:clamp(2rem,3.6vw,2.8rem)}
.person-caption{padding:44px 14px 12px}
.person h3{font-size:1rem}
.person .title{font-size:.76rem}
@media (max-width:1040px){.people{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.people{grid-template-columns:repeat(2,1fr);gap:14px}}
/* Watermark stays still while the page scrolls over it. Drawn on a fixed
   layer (rather than background-attachment:fixed) so it also holds still on
   iPhone and iPad, which ignore fixed backgrounds. */
.navy-page:not(.video-page){background-image:none;position:relative;isolation:isolate}
.navy-page:not(.video-page)::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(assets/watermark.svg) 0 0/600px 600px repeat}

/* ------------------------------------------------------------------------
   Phones and small tablets
   --------------------------------------------------------------------- */
@media (max-width:900px){
  /* The "one full screen per section" rule left huge empty bands between
     sections on phones, where the content is much shorter than the screen
     is tall. On small screens sections are just as tall as their content. */
  section[id]{min-height:0;display:block}
  .approach-page section.quad-glance{min-height:0}
  /* The two ends of the staircase only make sense with the three cards side
     by side; once they stack, the cards' own order says it. */
  .stage-axis{display:none}
}
@media (max-width:640px){
  /* Team: one person per row -- photo on the left, name and title beside it
     instead of printed over the face, and the bio opening full width below
     rather than in a narrow half-width column. */
  .people{grid-template-columns:1fr;gap:12px}
  .person-frame{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;background:var(--box);border-color:var(--box-line)}
  .person-frame>img,.person-frame>.ph,.person-frame>.person-initials,.person-frame>picture{grid-column:1;grid-row:1;width:96px;height:96px;aspect-ratio:1/1;object-fit:cover;object-position:50% 25%}
  .person-initials span{font-size:1.6rem}
  .person-caption{position:static;grid-column:2;grid-row:1;background:none;padding:12px 16px}
  .person h3{font-size:1.05rem}
  .person .title{font-size:.82rem}
  .person summary:hover .person-frame{transform:none}
  .person .bio{padding:14px 4px 6px}
  /* Tighter spacing between sections: on a phone the desktop gaps read as
     the page having ended. */
  section{padding:56px 0}
  section.quad-glance,.approach-page section.quad-glance{padding:32px 0 40px}
  section.strategy-page{padding-top:56px;padding-bottom:48px}
  .partner-intro{margin-bottom:56px}
  .partner-investors{margin-top:64px}
  /* What We Believe boxes: less padding so the text isn't squeezed. */
  .focus-box{padding:24px 22px}
  .focus-box p{font-size:1.05rem}
}
/* Header: keep the logo and the Menu button from running into each other
   on narrow phones. */
@media (max-width:420px){
  .site-header .logo-full{height:31px!important;max-height:31px!important}
  .menu-btn{padding:.4rem .65rem;gap:8px}
}
@media (max-width:370px){
  .site-header .logo-full{height:27px!important;max-height:27px!important}
}

/* Team bios across the full row (wide screens; script.js adds .bios-span
   and positions the panel just under the opened person's row of cards). */
@media (min-width:641px){
  .people.bios-span{position:relative}
  .people.bios-span .person{position:static}
  .people.bios-span .person.reveal.in{translate:none}
  .people.bios-span .person[open] .bio{position:absolute;left:0;right:0;z-index:2;padding:24px 28px;background:var(--box);border:1px solid var(--box-line);border-radius:10px;box-shadow:0 22px 40px -24px rgba(8,14,24,.8);animation:bio-drop .2s ease}
  .people.bios-span .person[open] .bio p{max-width:none;margin:0;font-size:1rem;line-height:1.65}
  .people.bios-span .person[open] .person-frame{box-shadow:0 0 0 2px var(--accent-3)}
}
@keyframes bio-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.people.bios-span .person[open] .bio{animation:none}}

/* EDITED: Team photos set as a Featured Image in wp-admin carry their own
   pixel width/height, which overrode the square shape and made the card
   tall. Force every team photo back to the same square, framed on the face. */
.person .person-frame img{height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 25%}

/* EDITED: Team, LinkedIn link at the end of each person's bio panel (only
   shown for people with a LinkedIn URL; see template-about.php). */
.person .bio .person-linkedin{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.9rem;font-weight:500;color:var(--accent-ink);text-decoration:none}
.person .bio .person-linkedin:first-child{margin-top:0}
.person .bio .person-linkedin:hover,.person .bio .person-linkedin:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:4px}
.person-linkedin-icon{width:15px;height:15px;flex:none}

/* EDITED (Tony's feedback, 10 Nov): Investments grouped by strategy. Each
   group has a heading with a short colored dash -- Platform blue, Growth
   cyan, Private in Public green, matching the rest of the site -- and the
   strategy's one-line description beside it. */
.strategy-group+.strategy-group{margin-top:clamp(56px,8vh,88px)}
.strategy-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:12px;margin-bottom:24px}
.strategy-group-head h2{display:flex;align-items:center;gap:12px;margin:0;font-size:clamp(1.3rem,2vw,1.6rem);color:#fff}
.strategy-group-head h2::before{content:'';width:24px;height:4px;border-radius:2px;background:#4a8fe8;flex-shrink:0}
.strategy-group--growth .strategy-group-head h2::before{background:var(--accent-3)}
.strategy-group--private-in-public .strategy-group-head h2::before{background:var(--accent-2)}
.strategy-group--other .strategy-group-head h2::before{background:var(--line)}
.strategy-group-head p{margin:0;color:#c5cbd5;font-size:.95rem}

/* EDITED (Tony's feedback): the Investments background video is toned down
   -- darker, softer and less colorful -- so it reads as a quiet backdrop
   and the company logos stand out. */
.investments-page .page-backdrop video{filter:brightness(.6) saturate(.5) blur(1.5px)}
.investments-page .page-backdrop .overlay{background:linear-gradient(180deg,rgba(9,16,30,.55) 0%,rgba(9,16,30,.7) 55%,rgba(9,16,30,.8) 100%)}

/* EDITED (Tony's feedback): page titles and section headings one step
   smaller across the site (they read as large on laptop screens). */
h1{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h2{font-size:clamp(1.55rem,2.6vw,2.1rem)}
.partner-tagline{font-size:clamp(1.9rem,3.8vw,2.8rem)}
.page-hero-logo{width:340px}