@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Libre+Caslon+Display&display=swap');

:root{font-family:'DM Sans',sans-serif;color:#183d50;background:#f5f9f9;font-synthesis:none;--muted:#617985;--line:#d5e2e6;--green:#215b72}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #268aa3;outline-offset:6px}a{ -webkit-tap-highlight-color:transparent}.wrap{width:min(1240px,calc(100% - 112px));margin-inline:auto}.site-header{height:119px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;font-size:19px;line-height:1.2;font-weight:650;letter-spacing:-.6px}.brand-sub{display:block;font-size:13px;font-weight:450;letter-spacing:.25px;margin-top:4px}.brand-mark{width:35px;height:38px;display:flex;gap:4px;align-items:flex-end;transform:skewY(-13deg)}.brand-mark i{width:6px;background:var(--green);height:29px}.brand-mark i:nth-child(2){height:36px}.brand-mark i:nth-child(3){height:24px}.brand-mark i:nth-child(4){height:32px}.site-header nav{display:flex;gap:35px;align-items:center;font-size:13px;font-weight:500}.site-header nav a:hover,.text-link:hover{color:#268aa3}.nav-about{border:1px solid #c4d9df;border-radius:4px;padding:12px 16px}.nav-about span{margin-left:20px}.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:40px;padding-block:78px 73px}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:650;line-height:1.8;margin:0 0 23px}.hero .eyebrow{display:flex;align-items:center;gap:9px;letter-spacing:1.4px}.status-dot{width:6px;height:6px;background:#63a5b2;border-radius:50%}h1,h2,h3,p{margin-top:0}h1,h2{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400}h1{font-size:clamp(52px,5.4vw,79px);line-height:1.04;letter-spacing:-2.4px;margin-bottom:25px}em{font-weight:400;color:#5c97a6}h1 em{white-space:nowrap}.intro{max-width:430px;font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:29px}.button{display:inline-flex;align-items:center;gap:35px;background:var(--green);color:#fff;border-radius:3px;padding:16px 21px;font-size:12px;font-weight:500;transition:background .2s,transform .2s}.button:hover{background:#28748c;transform:translateY(-2px)}.button span{font-size:19px;line-height:1}.hero-note{font-size:10px;color:#637e89;margin:18px 0 0}.hero-art{background:#edeee5;border-radius:120px 120px 5px 5px;position:relative;padding:39px 20px 18px;overflow:hidden}.art-index{font-size:8px;letter-spacing:1.4px;display:block;text-align:center;color:#6e7968}.hero-art svg{display:block;width:100%;height:auto}.art-caption{display:flex;justify-content:space-between;font-size:9px;color:#6c7666;padding:0 8px;gap:10px}.art-caption span:last-child{letter-spacing:1px}.principles{display:flex;justify-content:space-between;align-items:center;border-block:1px solid var(--line);padding-block:23px;color:#617c89;font-size:11px}.principles>div{display:flex;align-items:center;gap:28px;font-size:12px}.principles b{font-size:17px;color:#70a6b4;font-weight:400}.research{padding-block:80px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:37px}.section-heading .eyebrow{margin-bottom:17px}h2{font-size:44px;line-height:1.12;letter-spacing:-.7px;margin-bottom:0}.section-heading>p{font-size:13px;line-height:1.85;color:var(--muted);max-width:325px;margin:0 0 3px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:19px}.research-card{padding:27px 28px 25px;background:#eaf2f4;border:1px solid #dbe7eb;border-radius:4px}.research-card:nth-child(2){background:#edf4f4;border-color:#dce9e9}.research-card:nth-child(3){background:#e8f0f4;border-color:#d7e4eb}.card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:30px}.card-top>span{font-size:10px;color:#698795}.card-top svg{width:46px;height:46px;stroke:#528699;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.research-card:nth-child(2) svg{stroke:#528e98}h3{font-size:18px;font-weight:500;letter-spacing:-.4px;margin-bottom:14px}.research-card p{font-size:12px;line-height:1.9;color:var(--muted);margin-bottom:30px}.card-tag{display:block;border-top:1px solid #cfdee4;padding-top:17px;font-size:8px;font-weight:500;letter-spacing:1.25px}.perspective{border-block:1px solid var(--line);padding-block:49px;display:grid;grid-template-columns:1fr 3fr;gap:25px}.perspective-label .eyebrow{margin:0}.perspective-label>span{font-family:Georgia,serif;font-size:110px;line-height:1.2;color:#9dbfc9}.perspective h2{font-size:38px;line-height:1.2}.perspective p:not(.eyebrow){max-width:540px;font-size:13px;line-height:1.9;color:var(--muted);margin:22px 0 0}.about{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;padding-block:77px 83px}.about h2{font-size:39px}.about .eyebrow{margin-bottom:17px}.about>div>p:not(.eyebrow){font-size:13px;line-height:1.9;color:var(--muted)}.text-link{display:inline-flex;gap:24px;padding-block:9px;border-bottom:1px solid #8eafb9;font-size:11px;font-weight:500;margin-top:7px}.site-footer{border-top:1px solid var(--line);padding-block:30px;display:flex;align-items:center;justify-content:space-between;gap:25px}.footer-brand{font-size:14px}.footer-brand .brand-sub{font-size:10px}.footer-brand .brand-mark{transform:scale(.8) skewY(-13deg);transform-origin:left center;width:28px}.site-footer>p{font-size:10px;color:#637e89;margin:0}.site-footer>a:last-child{font-size:10px}.site-footer>a:last-child span{margin-left:13px}
@media(min-width:1500px){.hero{padding-block:95px}.hero-art{max-width:510px}}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.hero{gap:25px;padding-block:60px}h1{font-size:59px}.hero .eyebrow{font-size:8px}.hero-art{padding-inline:10px}.research-card{padding:23px 20px}h3{font-size:16px}.about{gap:35px}.section-heading{gap:25px}.section-heading>p{max-width:280px}h2{font-size:37px}}
@media(max-width:720px){.wrap{width:calc(100% - 40px)}.site-header{height:96px}.brand{font-size:16px;gap:9px}.brand-sub{font-size:11px}.site-header nav{gap:0}.site-header nav>a:not(.nav-about){display:none}.nav-about{font-size:10px;padding:10px}.nav-about span{margin-left:8px}.hero{grid-template-columns:1fr;padding-block:44px 35px;gap:35px}.hero .eyebrow{font-size:8px;letter-spacing:1.15px;margin-bottom:23px}h1{font-size:clamp(45px,9.6vw,67px);letter-spacing:-1.5px}.intro{font-size:14px;max-width:480px}.hero-art{width:100%;max-width:460px;justify-self:center;border-radius:100px 100px 4px 4px;padding-top:27px}.hero-art svg{max-height:350px}.hero-note{font-size:10px}.principles{align-items:flex-start;gap:18px;flex-direction:column;padding-block:20px}.principles>div{gap:23px}.research{padding-block:45px}.section-heading{display:block;margin-bottom:27px}h2{font-size:37px}.section-heading>p{max-width:440px;margin-top:20px}.cards{grid-template-columns:1fr;gap:13px}.research-card{padding:23px}.card-top{margin-bottom:14px}.card-top svg{width:40px;height:40px}h3{font-size:20px}.research-card p{font-size:13px;max-width:480px;margin-bottom:22px}.perspective{grid-template-columns:1fr;padding-block:32px;gap:17px}.perspective-label>span{display:none}.perspective h2{font-size:33px}.about{grid-template-columns:1fr;padding-block:44px;gap:24px}.about h2{font-size:36px}.site-footer{flex-wrap:wrap;padding-block:24px}.site-footer>p{order:3;width:100%}.footer-brand{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

/* Ocean imagery */
.hero{grid-template-columns:1fr 1.08fr;gap:45px}.hero-art{margin:0;padding:0;border-radius:180px 180px 6px 6px;background:#dcecf0;max-width:none;align-self:stretch;min-height:465px;display:flex;flex-direction:column}.hero-art img{width:100%;height:100%;min-height:425px;flex:1;object-fit:cover;object-position:43% center}.art-caption{padding:15px 18px;color:#3e697b;font-size:9px}.art-caption span:last-child{font-size:7px;letter-spacing:1px}.ocean-photo{margin-block:55px 0}.ocean-photo img{display:block;width:100%;height:370px;object-fit:cover;border-radius:5px;object-position:center 54%}.ocean-photo figcaption{display:flex;justify-content:space-between;gap:15px;padding-top:12px;font-size:11px;color:var(--muted)}.ocean-photo figcaption span{font-size:9px}.brand-mark{transform:none;flex-direction:column;justify-content:center;gap:5px;width:36px}.brand-mark i,.brand-mark i:nth-child(n){width:34px;height:5px;border-radius:50%;background:transparent;border-top:2px solid var(--green);transform:rotate(-8deg)}.brand-mark i:last-child{display:none}.footer-brand .brand-mark{transform:scale(.8)}
@media(max-width:1000px){.hero{gap:25px}.hero-art{min-height:410px}.hero-art img{min-height:380px}h1{font-size:55px}}
@media(max-width:720px){.hero{grid-template-columns:1fr;gap:30px}.hero-art{width:100%;max-width:none;min-height:0;border-radius:100px 100px 5px 5px}.hero-art img{height:330px;min-height:0;flex:auto;object-position:center}.ocean-photo{margin-top:35px}.ocean-photo img{height:250px}h1{font-size:clamp(43px,9.5vw,67px)}}

/* Full-width whale hero */
.ocean-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #104764;
}
.ocean-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
.ocean-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(3, 29, 47, .62), rgba(3, 29, 47, .08) 48%, rgba(3, 29, 47, .78));
}
.ocean-hero-content {
  position: relative;
  min-height: clamp(640px, 57vw, 880px);
  padding-block: 55px 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 160px;
}
.ocean-hero h1 {
  font-size: clamp(52px, 7.2vw, 104px);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0;
  text-shadow: 0 2px 24px #06283c55;
}
.ocean-hero h1 span { display: block; }
.ocean-hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
}
.hero-researcher {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: clamp(42px, 5.2vw, 74px);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0;
  text-shadow: 0 2px 20px #06283c66;
}
.hero-researcher span { display: block; }
.ocean-hero .button { background: #f1f8fa; color: #184b61; margin-bottom: 5px; }
.ocean-hero .button:hover { background: #dbeef3; }
.ocean-hero a:focus-visible { outline-color: white; }
.hero-image-credit { position: absolute; bottom: 18px; right: 0; font-size: 9px; color: #c2d9e3; }
@media(max-width:720px) {
  .ocean-hero-content { min-height: 680px; min-height: min(780px, 90svh); padding-block: 38px 50px; gap: 140px; }
  .ocean-hero h1 { font-size: clamp(30px, 7.3vw, 52px); }
  .ocean-hero-image { object-position: 42% center; }
  .ocean-hero-bottom { flex-direction: column; align-items: flex-start; gap: 25px; }
  .hero-researcher { font-size: clamp(40px, 8vw, 58px); }
  .hero-image-credit { font-size: 8px; }
}

/* Navigation integrated into the ocean hero. */
.site-header {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  height: 86px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.site-header .brand { font-size: 16px; }
.site-header .brand-sub { font-size: 11px; color: #d7e9ee; }
.site-header .brand-mark i { border-top-color: #e0f1f5; }
.site-header nav { gap: 32px; font-size: 12px; }
.site-header .nav-about { border: 0; padding: 0; border-radius: 0; }
.site-header .nav-about span { margin-left: 9px; }
.site-header nav a { padding-block: 10px; text-shadow: 0 1px 8px #06283c; }
.site-header nav a:hover { color: #c1e9f2; }
.site-header a:focus-visible { outline-color: #fff; }
.ocean-hero-content { padding-top: 132px; min-height: clamp(730px, 62vw, 900px); }
.ocean-hero::before {
  background: linear-gradient(180deg, rgba(3, 29, 47, .74), rgba(3, 29, 47, .2) 32%, rgba(3, 29, 47, .06) 52%, rgba(3, 29, 47, .78));
}
@media(max-width:720px) {
  .site-header { height: 68px; }
  .site-header .brand { gap: 0; }
  .site-header .brand > span:last-child { display: none; }
  .site-header nav { gap: 19px; font-size: 11px; }
  .site-header nav > a:not(.nav-about) { display: inline; }
  .site-header .nav-about { font-size: 11px; }
  .site-header .nav-about span { display: none; }
  .ocean-hero-content { padding-top: 106px; min-height: max(660px, 92svh); }
}

/* Expedition-inspired display typography and researcher portrait. */
.ocean-hero-content { gap: 70px; padding-bottom: 65px; }
.hero-kicker { font-size: 10px; font-weight: 700; letter-spacing: .25em; color: #b7f6df; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.hero-kicker::before { content: ""; width: 30px; height: 2px; background: #b7f6df; }
.ocean-hero h1 { font-family: 'DM Sans', sans-serif; font-size: clamp(44px, 6.4vw, 92px); font-weight: 700; line-height: .98; letter-spacing: -.065em; }
.ocean-hero h1 > span { font-size: .77em; letter-spacing: -.055em; margin-top: 10px; }
.ocean-hero-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 45px; }
.hero-researcher { font-family: 'DM Sans', sans-serif; font-size: 29px; font-weight: 500; letter-spacing: -.04em; }
.hero-researcher > span { font-size: clamp(54px, 6.9vw, 100px); line-height: 1; font-weight: 700; letter-spacing: -.065em; text-transform: uppercase; margin-top: 12px; color: #b7f6df; background: linear-gradient(110deg, #fff 0%, #b7f6df 58%, #68cde7 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-tagline { font-size: 15px; line-height: 1.6; color: #d5eaf0; margin-block: 20px 25px; }
.ocean-hero .button { background: #b7f6df; color: #123f50; border-radius: 30px; padding: 18px 24px; font-size: 13px; font-weight: 650; }
.ocean-hero .button:hover { background: #e1fff3; }
.researcher-portrait { margin: 0 8px 4px 0; padding: 7px; background: #f3faf8; color: #183d50; border-radius: 5px; transform: rotate(3deg); box-shadow: 0 18px 55px #001c3c55; }
.researcher-portrait img { display: block; width: 100%; height: 285px; object-fit: cover; object-position: center 40%; border-radius: 2px; }
.researcher-portrait figcaption { padding: 14px 10px 10px; }
.researcher-portrait figcaption > span { font-size: 7px; font-weight: 650; letter-spacing: .14em; display: block; margin-bottom: 7px; }
.researcher-portrait strong { font-size: 20px; letter-spacing: -.6px; display: flex; justify-content: space-between; }
@media(max-width:1000px) and (min-width:721px) {
  .ocean-hero-bottom { grid-template-columns: minmax(0, 1fr) 225px; gap: 25px; }
  .researcher-portrait img { height: 245px; }
  .hero-researcher > span { font-size: 60px; }
}
@media(max-width:720px) {
  .ocean-hero-content { padding-top: 105px; gap: 135px; padding-bottom: 50px; }
  .hero-kicker { font-size: 8px; letter-spacing: .18em; }
  .ocean-hero h1 { font-size: clamp(38px, 10vw, 64px); }
  .ocean-hero h1 > span { font-size: .61em; letter-spacing: -.055em; }
  .ocean-hero-bottom { grid-template-columns: minmax(0, 1fr) 125px; align-items: start; gap: 14px; }
  .hero-researcher { font-size: 20px; }
  .hero-researcher > span { font-size: clamp(35px, 9.4vw, 56px); line-height: 1.05; margin-top: 10px; }
  .hero-tagline { font-size: 12px; margin-block: 17px 20px; }
  .ocean-hero .button { font-size: 10px; padding: 13px 15px; gap: 10px; }
  .researcher-portrait { margin: 0 4px 0 0; padding: 4px; }
  .researcher-portrait img { height: 170px; }
  .researcher-portrait figcaption { padding: 8px 3px 5px; }
  .researcher-portrait figcaption > span { font-size: 6px; line-height: 1.5; letter-spacing: .04em; }
  .researcher-portrait strong { font-size: 12px; letter-spacing: -.3px; }
}

.hero-researcher > span { padding-top: .14em; padding-bottom: .04em; margin-top: 0; text-shadow: none; }

/* Fit the complete hero within the visible browser viewport. */
.ocean-hero-content {
  min-height: 0;
  height: 100svh;
  padding-top: clamp(100px, 15svh, 132px);
  padding-bottom: clamp(35px, 6svh, 65px);
  gap: 20px;
}
.ocean-hero h1 { font-size: clamp(38px, min(6.4vw, 10svh), 92px); }
.hero-kicker { margin-bottom: clamp(8px, 2svh, 18px); }
.hero-researcher { font-size: clamp(20px, 3.3svh, 29px); }
.hero-researcher > span { font-size: clamp(42px, min(6.9vw, 10svh), 100px); }
.hero-tagline { margin-block: 12px 18px; }
.ocean-hero-bottom { grid-template-columns: minmax(0, 1fr) clamp(190px, 28svh, 290px); }
.researcher-portrait img { height: clamp(150px, 29svh, 285px); }
@media(max-width:720px) {
  .ocean-hero-content { height: 100svh; min-height: 0; padding-top: 94px; padding-bottom: 35px; gap: 15px; }
  .ocean-hero h1 { font-size: clamp(32px, min(10vw, 7svh), 64px); }
  .hero-kicker { margin-bottom: 12px; }
  .ocean-hero-bottom { grid-template-columns: minmax(0, 1fr) 125px; gap: 14px; }
  .hero-researcher { font-size: 20px; }
  .hero-researcher > span { font-size: clamp(30px, min(9.4vw, 6svh), 56px); }
  .hero-tagline { margin-block: 12px 15px; }
  .researcher-portrait img { height: min(170px, 25svh); }
  .hero-image-credit { bottom: 10px; }
}
@media(max-height:600px) and (min-width:721px) {
  .site-header { height: 62px; }
  .ocean-hero-content { padding-top: 80px; padding-bottom: 30px; gap: 12px; }
  .hero-kicker { display: none; }
  .ocean-hero h1 { font-size: 7.5svh; }
  .ocean-hero h1 > span { display: inline; font-size: 1em; }
  .hero-researcher > span { font-size: 9svh; }
  .researcher-portrait img { height: 30svh; min-height: 0; }
  .researcher-portrait figcaption { padding: 6px; }
  .researcher-portrait figcaption > span { display: none; }
  .hero-tagline { margin-block: 8px; font-size: 12px; }
  .ocean-hero .button { padding: 12px 20px; }
}
@media(max-height:600px) and (max-width:720px) {
  .site-header { height: 54px; }
  .ocean-hero-content { padding-top: 68px; padding-bottom: 25px; }
  .hero-kicker { display: none; }
  .ocean-hero h1 { font-size: 30px; }
  .hero-researcher { font-size: 16px; }
  .hero-researcher > span { font-size: 28px; }
  .hero-tagline { font-size: 10px; margin-block: 7px; }
  .researcher-portrait img { height: 100px; }
  .researcher-portrait figcaption > span { display: none; }
}

/* A staggered entrance, timed to reveal the ocean before the researcher. */
@keyframes ocean-arrive {
  from { opacity: .45; transform: scale(1.07); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes rise-arrive {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes navigation-arrive {
  from { opacity: 0; transform: translate(-50%, -14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes portrait-arrive {
  from { opacity: 0; transform: translateY(35px) rotate(-5deg) scale(.94); }
  to { opacity: 1; transform: translateY(0) rotate(3deg) scale(1); }
}
@keyframes name-shimmer {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}
@media(prefers-reduced-motion:no-preference) {
  .ocean-hero-image { animation: ocean-arrive 1.8s cubic-bezier(.16, 1, .3, 1) both; }
  .site-header { animation: navigation-arrive .8s .15s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-kicker { animation: rise-arrive .75s .25s both; }
  .ocean-hero h1 { animation: rise-arrive 1s .35s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-researcher { animation: rise-arrive 1s .6s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-researcher > span {
    background-image: linear-gradient(110deg, #fff 0%, #b7f6df 30%, #68cde7 48%, #fff 60%, #b7f6df 80%, #68cde7 100%);
    background-size: 220% 100%;
    animation: name-shimmer 2s .95s ease-out both;
  }
  .researcher-portrait { animation: portrait-arrive 1.1s .7s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-tagline { animation: rise-arrive .8s .85s both; }
  .ocean-hero .button { animation: rise-arrive .8s 1s both; transition: background .2s, box-shadow .2s; }
  .ocean-hero .button:hover { box-shadow: 0 0 28px #b7f6df55; }
  .hero-image-credit { animation: rise-arrive .8s 1.1s both; }
}

/* The researcher and his chief, side by side. */
.ocean-hero-bottom { grid-template-columns: minmax(0, 1fr) min(38%, 440px); gap: 30px; }
.hero-portraits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; align-items: end; }
.hero-portraits .researcher-portrait { margin: 0; min-width: 0; }
.hero-portraits .researcher-portrait img { height: clamp(140px, 25svh, 240px); }
.hero-portraits .researcher-portrait figcaption { padding: 11px 5px 8px; }
.hero-portraits .researcher-portrait strong { font-size: 17px; }
.hero-portraits .researcher-portrait figcaption > span { font-size: 7px; line-height: 1.4; min-height: 20px; }
.chief-portrait { --portrait-angle: -3deg; transform: rotate(-3deg); }
@keyframes portrait-arrive {
  from { opacity: 0; transform: translateY(35px) rotate(-5deg) scale(.94); }
  to { opacity: 1; transform: translateY(0) rotate(var(--portrait-angle, 3deg)) scale(1); }
}
@media(prefers-reduced-motion:no-preference) { .chief-portrait { animation-delay: .85s; } }
@media(min-width:721px) { .hero-researcher > span { font-size: clamp(35px, min(5.5vw, 9svh), 80px); } }
@media(max-width:720px) {
  .ocean-hero-bottom { grid-template-columns: 1fr; gap: 16px; }
  .researcher-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
  .hero-researcher { grid-column: 1 / -1; font-size: 16px; }
  .hero-researcher > span { font-size: clamp(28px, 8.5vw, 44px); }
  .hero-tagline { margin: 0; font-size: 10px; }
  .ocean-hero .button { margin: 0; padding: 11px 12px; font-size: 9px; gap: 8px; }
  .hero-portraits { gap: 16px; padding-inline: 3px; }
  .hero-portraits .researcher-portrait img { height: clamp(92px, 18svh, 155px); object-position: center 32%; }
  .hero-portraits .researcher-portrait figcaption { padding: 6px 5px; }
  .hero-portraits .researcher-portrait figcaption > span { min-height: 0; font-size: 6px; margin-bottom: 3px; }
  .hero-portraits .researcher-portrait strong { font-size: 13px; }
}
@media(max-height:600px) {
  .hero-portraits .researcher-portrait img { height: 23svh; }
  .hero-portraits .researcher-portrait figcaption > span { display: block; min-height: 0; margin-bottom: 2px; font-size: 6px; }
  .hero-portraits .researcher-portrait figcaption { padding: 4px; }
  .hero-portraits .researcher-portrait strong { font-size: 12px; }
}
@media(max-height:600px) and (max-width:720px) {
  .ocean-hero-bottom { gap: 10px; }
  .hero-portraits .researcher-portrait img { height: 85px; }
}
.hero-portraits .chief-portrait img { object-position: center 12%; }

/* Brighter display lettering, without changing the hero's footprint. */
.ocean-hero h1 {
  font-weight: 700;
  letter-spacing: -.055em;
  text-shadow: 0 3px 0 #0a465733, 0 8px 32px #001e3d55;
}
.ocean-hero h1 > span {
  color: #d9fff3;
  background: linear-gradient(105deg, #fff 8%, #b7f6df 40%, #6ad9f6 65%, #fff 88%);
  background-size: 180% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  padding-bottom: .08em;
}
.hero-kicker {
  color: #d6ff87;
  letter-spacing: .3em;
  text-shadow: 0 0 18px #c5ff8855;
}
.hero-kicker::before { background: #d6ff87; box-shadow: 0 0 12px #d6ff8777; }
.hero-researcher {
  color: #d6ff87;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: clamp(16px, 2.7svh, 23px);
  text-transform: uppercase;
}
.hero-researcher > span {
  background-image: linear-gradient(110deg, #fff 5%, #eaffba 28%, #a7f5df 48%, #fff 62%, #83ddf7 84%, #d6ff87 100%);
  background-size: 220% 100%;
  filter: drop-shadow(0 3px 0 #07334444) drop-shadow(0 0 16px #a7f5df22);
}
.hero-tagline { font-weight: 500; color: #f0fbff; }
@keyframes title-glint {
  0%, 20% { background-position: 100% 50%; }
  80%, 100% { background-position: 0% 50%; }
}
@media(prefers-reduced-motion:no-preference) {
  .ocean-hero h1 > span { animation: title-glint 3s .5s ease-in-out both; }
  .hero-researcher > span { animation: name-shimmer 2.6s .8s ease-out both; }
}
@media(max-width:720px) {
  .hero-researcher { font-size: 14px; letter-spacing: .12em; }
  .hero-kicker { letter-spacing: .2em; }
}

/* Larger portraits with independent entrance and hover states. */
.ocean-hero-bottom { grid-template-columns: minmax(0, 1fr) min(49%, 580px); gap: 32px; }
.hero-portraits { gap: 22px; }
.hero-portraits .researcher-portrait {
  position: relative;
  transform: rotate(var(--portrait-angle, 3deg));
  transform-origin: center 75%;
  box-shadow: 0 18px 45px #001a3e66;
}
.hero-portraits .researcher-portrait img { height: clamp(170px, 33svh, 330px); }
.hero-portraits .researcher-portrait figcaption { padding: 12px 8px; }
.hero-portraits .researcher-portrait strong { font-size: 20px; }
@media(hover:hover) and (pointer:fine) {
  .hero-portraits .researcher-portrait:hover {
    z-index: 2;
    transform: translateY(-14px) rotate(0deg) scale(1.075);
    box-shadow: 0 28px 60px #00152b99, 0 0 0 3px #b7f6df, 0 0 35px #83ddf744;
  }
}
@keyframes portrait-pop-in {
  0% { opacity: 0; transform: translateY(55px) rotate(-9deg) scale(.86); }
  70% { opacity: 1; transform: translateY(-7px) rotate(calc(var(--portrait-angle, 3deg) + 1deg)) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--portrait-angle, 3deg)) scale(1); }
}
@keyframes ocean-light-sweep {
  0% { opacity: 0; transform: translateX(-110%); }
  25% { opacity: .35; }
  100% { opacity: 0; transform: translateX(110%); }
}
@media(prefers-reduced-motion:no-preference) {
  .hero-portraits .researcher-portrait {
    animation: portrait-pop-in 1.2s .65s cubic-bezier(.2,.7,.2,1) backwards;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  }
  .hero-portraits .chief-portrait { animation-delay: .85s; }
  .ocean-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(115deg, transparent 30%, #b7f6df33 48%, transparent 65%);
    animation: ocean-light-sweep 2.5s .1s both;
  }
}
@media(max-width:1000px) and (min-width:721px) {
  .hero-researcher > span { font-size: clamp(32px, 4.7vw, 48px); }
  .hero-portraits { gap: 15px; }
  .hero-portraits .researcher-portrait strong { font-size: 16px; }
}
@media(max-width:720px) {
  .ocean-hero-bottom { grid-template-columns: 1fr; gap: 16px; }
  .hero-portraits { gap: 16px; }
  .hero-portraits .researcher-portrait img { height: clamp(110px, 23svh, 205px); }
  .hero-portraits .researcher-portrait figcaption { padding: 7px 5px; }
  .hero-portraits .researcher-portrait strong { font-size: 14px; }
}
@media(max-height:600px) {
  .hero-portraits .researcher-portrait img { height: 28svh; }
  .hero-portraits .researcher-portrait figcaption { padding: 5px; }
  .hero-portraits .researcher-portrait strong { font-size: 13px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-portraits .researcher-portrait { animation: none; transition: none; }
  .hero-portraits .researcher-portrait:hover { transform: rotate(var(--portrait-angle, 3deg)); }
}
.hero-portraits .researcher-portrait { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-portraits .researcher-portrait:focus-visible { outline: 3px solid #d6ff87; outline-offset: 5px; }
.hero-portraits .researcher-portrait[aria-pressed="true"] {
  z-index: 2;
  transform: translateY(-14px) rotate(0deg) scale(1.075);
  box-shadow: 0 28px 60px #00152b99, 0 0 0 3px #b7f6df, 0 0 35px #83ddf744;
}
@media(prefers-reduced-motion:reduce) {
  .hero-portraits .researcher-portrait[aria-pressed="true"] { transform: rotate(var(--portrait-angle, 3deg)); }
}

/* A choreographed opening: title, name, then the two portrait cards. */
.hero-title-lead { display: inline-block; font: inherit; }
@keyframes title-unveil {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(35px) skewY(3deg); }
  to { opacity: 1; clip-path: inset(-20% -5% -20% -5%); transform: translateY(0) skewY(0); }
}
@keyframes name-pop {
  0% { opacity: 0; transform: translateX(-35px) scale(.9); }
  70% { opacity: 1; transform: translateX(4px) scale(1.025); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes portrait-flight {
  0% { opacity: 0; transform: translate(var(--entry-x, -65px), 65px) rotate(var(--entry-angle, -15deg)) scale(.65); }
  65% { opacity: 1; transform: translate(0, -12px) rotate(calc(var(--portrait-angle, 3deg) * -1)) scale(1.045); }
  82% { transform: translate(0, 4px) rotate(var(--portrait-angle, 3deg)) scale(.99); }
  100% { opacity: 1; transform: translate(0, 0) rotate(var(--portrait-angle, 3deg)) scale(1); }
}
@keyframes photo-develop {
  from { filter: saturate(.3) brightness(1.4); }
  to { filter: saturate(1) brightness(1); }
}
@keyframes button-pop {
  0% { opacity: 0; transform: translateY(18px) scale(.75); }
  70% { opacity: 1; transform: translateY(-3px) scale(1.05); }
  100% { opacity: 1; transform: none; }
}
@media(prefers-reduced-motion:no-preference) {
  .ocean-hero h1 { animation: none; }
  .hero-title-lead { animation: title-unveil 1s .25s cubic-bezier(.16,1,.3,1) backwards; }
  .ocean-hero h1 > span { animation: title-unveil 1.1s .5s cubic-bezier(.16,1,.3,1) backwards, title-glint 2s 1.1s both; }
  .hero-researcher { animation: rise-arrive .8s .7s backwards; }
  .hero-researcher > span { transform-origin: left center; animation: name-pop 1.1s .85s backwards, name-shimmer 2s 1.1s both; }
  .hero-tagline { animation: rise-arrive .8s 1.1s backwards; }
  .ocean-hero .button { animation: button-pop .8s 1.35s backwards; }
  .hero-portraits .researcher-portrait { animation: portrait-flight 1.4s .9s cubic-bezier(.2,.7,.2,1) backwards; }
  .hero-portraits .chief-portrait { --entry-x: 65px; --entry-angle: 15deg; animation-delay: 1.15s; }
  .hero-portraits .researcher-portrait img { animation: photo-develop 1.1s 1.05s backwards; }
  .hero-portraits .chief-portrait img { animation-delay: 1.3s; }
  .scroll-reveal { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .8s var(--reveal-delay, 0ms), transform .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms); }
  .scroll-reveal.is-revealed { opacity: 1; transform: none; }
  .ocean-photo.is-revealed img { animation: photo-develop 1.3s both; }
}

/* On phones, introduce the people before the researcher headline. */
@media(max-width:720px) {
  .hero-portraits { grid-row: 1; }
  .researcher-intro { grid-row: 2; }
}
@media(max-width:720px) and (prefers-reduced-motion:no-preference) {
  .hero-portraits .researcher-portrait { animation-delay: .65s; }
  .hero-portraits .chief-portrait { animation-delay: .85s; }
  .hero-portraits .researcher-portrait img { animation-delay: .8s; }
  .hero-portraits .chief-portrait img { animation-delay: 1s; }
  .hero-researcher { animation-delay: 1.05s; }
  .hero-researcher > span { animation-delay: 1.15s, 1.4s; }
  .hero-tagline { animation-delay: 1.4s; }
  .ocean-hero .button { animation-delay: 1.55s; }
}

/* Featured whale at the research anchor. Preserve the full photograph. */
.unique-whale { margin: 0 0 65px; border: 1px solid #d5e2e6; border-radius: 12px; overflow: hidden; background: #eaf2f4; }
.unique-whale figcaption { padding: 32px 36px; }
.unique-whale .eyebrow { color: #487c88; margin-bottom: 12px; }
.unique-whale h2 { max-width: 850px; font-family: 'DM Sans', sans-serif; font-size: clamp(28px, 4vw, 52px); font-weight: 700; letter-spacing: -.045em; line-height: 1.1; }
.unique-whale img { display: block; width: 100%; height: auto; }
@media(max-width:720px) {
  .unique-whale { margin-bottom: 40px; border-radius: 8px; }
  .unique-whale figcaption { padding: 22px 20px; }
  .unique-whale .eyebrow { font-size: 8px; }
}
@media(prefers-reduced-motion:no-preference) {
  .unique-whale.is-revealed img { animation: photo-develop 1.3s both; }
}