:root{
  --bg:#EDF2F1; --surface:#E2EAE8; --ink:#15232B; --muted:#4D5F66; --line:#C6D4D1;
  --water:#0B5F6B; --water-deep:#084650; --on-water:#E6F2F1; --accent:#0B5F6B;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --wrap:1120px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0F1A1F;--surface:#15232A;--ink:#E3ECEA;--muted:#9AAEB2;--line:#26393F;
        --water:#12707A;--water-deep:#0B4D55;--on-water:#EAF6F5;--accent:#6CC0C2}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.125rem/1.7 var(--body);font-optical-sizing:auto}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);line-height:1.1;letter-spacing:-.015em;margin:0 0 .5em;font-weight:650}
h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
h3{font-size:1.25rem}
h2 a,h3 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--line)}
h2 a:hover{border-color:var(--accent)}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:20}
.skip:focus{left:8px}

/* header */
.site-head{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px}
.brand{font:700 1.1rem/1 var(--display);color:var(--ink);text-decoration:none;white-space:nowrap}
.site-head ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.site-head nav a{display:block;padding:8px 10px;font:500 .95rem/1 var(--display);color:var(--muted);text-decoration:none;border-radius:6px}
.site-head nav a:hover{color:var(--ink);background:var(--surface)}
.site-head nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--water)}
@media (max-width:900px){
  .head-inner{flex-direction:column;align-items:flex-start;gap:4px;padding-top:12px}
  .site-head nav{width:calc(100% + 48px);margin:0 -24px;overflow-x:auto;scrollbar-width:none}
  .site-head nav::-webkit-scrollbar{display:none}
  .site-head ul{padding:0 18px 8px;width:max-content}
}

/* hero: the name sits half-submerged at a waterline */
.hero{position:relative;overflow:hidden;padding-top:clamp(56px,10vw,120px)}
.name-stack{position:relative}
.name{font:800 clamp(4.5rem,15vw,12.5rem)/.86 var(--display);letter-spacing:-.045em;margin:0;color:var(--ink);font-variation-settings:"opsz" 96}
.name.wet{position:absolute;inset:0;color:var(--on-water);z-index:2;clip-path:inset(var(--lvl) 0 0 0)}
.hero{--lvl:66%}
.water{position:absolute;left:-50vw;right:-50vw;top:var(--lvl);height:200vh;z-index:1;
  background:linear-gradient(var(--water),var(--water-deep) 60vh)}
.water::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--on-water) 55%,transparent) 0 1px,transparent 1px 24px);
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
.hero-copy{position:relative;z-index:3;color:var(--on-water);max-width:40rem;padding:clamp(28px,4vw,48px) 0 clamp(56px,8vw,96px)}
.hero-copy p{font-size:clamp(1.2rem,1rem + .7vw,1.5rem);line-height:1.5}
@media (prefers-reduced-motion:no-preference){
  .water{animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
  .name.wet{animation:rise-text 1.6s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy{animation:fade .8s 1s both}
}
@keyframes rise{from{top:105%}}
@keyframes rise-text{from{clip-path:inset(105% 0 0 0)}}
@keyframes fade{from{opacity:0}}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.btn{display:inline-block;padding:12px 22px;border-radius:999px;font:600 1rem/1 var(--display);
  background:var(--on-water);color:var(--water-deep);text-decoration:none}
.btn:hover{background:#fff}
.btn.ghost{background:transparent;color:var(--on-water);box-shadow:inset 0 0 0 1.5px var(--on-water)}
.btn.ghost:hover{background:color-mix(in srgb,var(--on-water) 12%,transparent)}
.hero :focus-visible{outline-color:var(--on-water)}

/* inner page heads: same waterline motif, at rest */
.page-head{padding:clamp(48px,8vw,96px) 0 0}
.page-head h1{font-size:clamp(2.8rem,2rem + 4vw,5.5rem);letter-spacing:-.035em;font-weight:750;margin-bottom:.3em}
.lede{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);color:var(--muted);max-width:38rem;margin-bottom:clamp(32px,5vw,56px)}
.waterline{height:28px;background:linear-gradient(var(--water),var(--water-deep));position:relative}
.waterline::before{content:"";position:absolute;inset:0 0 auto;height:10px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--on-water) 55%,transparent) 0 1px,transparent 1px 24px);
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}

/* sections */
.band{padding:clamp(56px,8vw,104px) 0}
.band.alt{background:var(--surface)}
.prose{max-width:40rem}
.sub{color:var(--muted);max-width:38rem;margin-top:-.25em}
.org{font:500 1rem/1.4 var(--display);color:var(--muted);margin:-.2em 0 1em}
.org .note::before{content:", "}
.more{font-family:var(--display);font-weight:600}
ul{padding-left:1.2em}
li{margin-bottom:.45em}
li::marker{color:var(--water)}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,80px);align-items:start}
.venture{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,80px);align-items:start}
@media (max-width:760px){.split,.venture{grid-template-columns:1fr}}

.photo{margin:0;position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line)}
.band.alt .photo{background:var(--bg)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.photo .ph{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(3rem,8vw,6rem)/1 var(--display);
  color:var(--line);letter-spacing:-.04em}
@media (max-width:760px){.photo{aspect-ratio:3/2;max-height:360px}}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;border-top:1px solid var(--line)}
.facts div{padding:20px 24px 0 0;border-right:1px solid var(--line);margin-right:24px}
.facts div:last-child{border-right:0}
.facts dt{font:650 1.2rem/1.2 var(--display);margin-bottom:6px}
.facts dd{margin:0;color:var(--muted);font-size:1rem;line-height:1.5}
@media (max-width:900px){.facts{grid-template-columns:1fr 1fr}.facts div{border-right:0;margin-right:0}}
@media (max-width:520px){.facts{grid-template-columns:1fr}}

.index{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;border-top:1px solid var(--line)}
.index li{margin:0;border-bottom:1px solid var(--line)}
.index a{display:flex;flex-direction:column;gap:2px;padding:20px 0;text-decoration:none;color:var(--ink)}
.index span{font:650 1.35rem/1.2 var(--display)}
.index a:hover span{color:var(--accent)}
.index small{color:var(--muted);font-size:1rem}
@media (max-width:680px){.index{grid-template-columns:1fr}}

.stats{display:flex;flex-wrap:wrap;gap:16px 40px;margin:24px 0 8px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats dt{font:750 2rem/1 var(--display);letter-spacing:-.02em;color:var(--water)}
.stats dd{margin:6px 0 0;color:var(--muted);font-size:.95rem}
@media (prefers-color-scheme:dark){.stats dt{color:var(--accent)}}

/* career timeline: real sequence, newest first */
.timeline{list-style:none;margin:0;padding:0 0 0 32px;border-left:2px solid var(--line);max-width:46rem}
.timeline>li{position:relative;padding-bottom:48px;margin:0}
.timeline>li:last-child{padding-bottom:0}
.timeline>li::before{content:"";position:absolute;left:-41px;top:.45em;width:16px;height:16px;border-radius:50%;
  background:var(--bg);box-shadow:inset 0 0 0 3px var(--water)}
.timeline>li:first-child::before{background:var(--water)}
.timeline ul{list-style:disc}
.timeline h2{font-size:clamp(1.35rem,1.2rem + .6vw,1.75rem);margin-bottom:.3em}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);margin-top:24px}
.cols.three{grid-template-columns:repeat(3,1fr);margin-top:0}
@media (max-width:820px){.cols,.cols.three{grid-template-columns:1fr}}

/* press */
.press{list-style:none;margin:0;padding:0;max-width:52rem;border-top:1px solid var(--line)}
.press>li{display:grid;grid-template-columns:7rem 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line);margin:0}
.kind{font:600 .9rem/1.6 var(--display);color:var(--water);padding-top:.3em}
@media (prefers-color-scheme:dark){.kind{color:var(--accent)}}
.press h2{font-size:1.35rem;margin-bottom:.2em}
.outlet{font:500 .95rem/1.4 var(--display);color:var(--muted);margin-bottom:.5em}
.press p:last-child{margin:0}
@media (max-width:600px){.press>li{grid-template-columns:1fr;gap:4px}}

/* testimonies */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,72px) clamp(32px,5vw,64px)}
.quote{margin:0}
.quote.lead{grid-column:1/-1}
.quote blockquote{margin:0 0 16px;padding:0}
.quote blockquote p{font:italic 400 1.35rem/1.55 var(--body);margin:0;text-wrap:pretty}
.quote.lead blockquote p{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1.4;max-width:48rem}
.quote blockquote p::before{content:"“"}
.quote blockquote p::after{content:"”"}
.quote figcaption{font:500 1rem/1.4 var(--display);color:var(--muted);padding-left:20px;border-left:3px solid var(--water)}
.quote figcaption a{font-weight:650}
@media (max-width:760px){.quotes{grid-template-columns:1fr}}

/* footer */
.site-foot{background:var(--water-deep);color:var(--on-water);padding:56px 0 24px}
.foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-end}
.foot-title{font:700 clamp(1.8rem,1.4rem + 1.5vw,2.6rem)/1.1 var(--display);margin:0 0 6px;letter-spacing:-.02em}
.foot-sub{margin:0;opacity:.8}
.foot-links{list-style:none;padding:0;margin:0;text-align:right}
.foot-links a{color:var(--on-water);font-family:var(--display);font-weight:500}
.foot-base{margin-top:40px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--on-water) 22%,transparent);font-size:.9rem;opacity:.7}
.site-foot :focus-visible{outline-color:var(--on-water)}
@media (max-width:600px){.foot-links{text-align:left}}