/* Each photo keeps a fixed source window, so its subjects never enter the fade. */
.page-intro-photo,.hero{
  --photo-transparent:color-mix(in srgb,var(--surface) 0%,transparent);
  background:var(--surface);
  position:relative;isolation:isolate;overflow:hidden;
}
:root .page-intro-photo{padding-block:70px 55px}
:root .page-intro-photo::before,:root .hero::before,:root .hero::after{content:none!important}
.photo-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  column-gap:40px;
  align-items:center;
  direction:ltr;
}
.photo-intro-grid>.breadcrumb{grid-column:1/-1;grid-row:1}
.photo-intro-grid>.intro-copy-layer{grid-column:1;grid-row:2;min-width:0;position:relative;z-index:1}
:root .page-intro-photo h1{font-size:clamp(38px,3.95vw,54px);max-width:none}
:root .page-intro-photo p{max-width:none}
:root .intro-backdrop-image{
  grid-column:2;grid-row:2;
  display:block;position:relative;inset:auto;width:100%;height:auto;
  z-index:auto;overflow:hidden;border-radius:var(--radius-panel);
  aspect-ratio:var(--photo-aspect);
  mask-image:linear-gradient(90deg,var(--photo-transparent) 0%,var(--surface) var(--photo-fade-end),var(--surface) 100%);
  -webkit-mask-image:linear-gradient(90deg,var(--photo-transparent) 0%,var(--surface) var(--photo-fade-end),var(--surface) 100%);
}
:root .intro-backdrop-image img{
  display:block;position:absolute;inset:0 0 0 auto;
  width:var(--photo-image-width);max-width:none;height:100%;
  object-fit:fill;object-position:right center;
  opacity:1;filter:none;transform:none;
}
/* Purpose: source x40 to x100, fade ends at x46 before the coat at x49. */
.purpose-hero{--photo-aspect:1301.4/725;--photo-image-width:166.666667%;--photo-fade-end:10%}
/* Opportunities: source x37.5 to x100, fade ends at x47 before the coat at x49.2. */
.opportunities-hero{--photo-aspect:1357.5/724;--photo-image-width:160%;--photo-fade-end:15.2%}

/* These photographs fill the shared hero panel without losing any subjects. */
.care-hero{--photo-aspect:1711/919;--photo-image-width:100%}
.research-hero{--photo-aspect:1712/919;--photo-image-width:100%}
.outreach-hero{--photo-aspect:1774/887;--photo-image-width:100%}
.education-hero{--photo-aspect:1619/971;--photo-image-width:100%}
/* People reach the left edge, so the join uses clear space between layers. */
:root .photo-hero-split .intro-backdrop-image{mask-image:none;-webkit-mask-image:none}


/* Stacking keeps every subject opaque when there is no room for a feathered join. */
:root[dir=rtl] :is(.intro-copy-layer,.photo-intro-grid>.breadcrumb){direction:rtl;text-align:right}

@media(max-width:1100px){
  :root .page-intro-photo{padding-block:48px}
  .photo-intro-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
  .photo-intro-grid>.intro-copy-layer{grid-column:1;grid-row:2}
  :root .intro-backdrop-image{grid-column:1;grid-row:3;margin-top:32px;mask-image:none;-webkit-mask-image:none}
  :root .page-intro-photo h1{font-size:clamp(38px,5.2vw,54px)}
}
@media(max-width:700px){
  :root .page-intro-photo{padding-block:36px}
  :root .intro-backdrop-image{margin-top:28px;border-radius:18px}
}
/* Keep the desktop action readable; mobile entry belongs inside navigation. */
:root .site-header .nav-actions > .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.4;
}
.site-header .nav-links > .nav-passport-link { display: none; }
@media (min-width: 981px) and (max-width: 1100px) {
  .site-header .brand-copy { display: none; }
}
@media (max-width: 980px) {
  :root .site-header .nav-actions > .btn { display: none; }
  .site-header .nav-links { top: 100%; max-height: calc(100dvh - 78px); overflow-y: auto; }
  .site-header .nav-links > .nav-passport-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 16px 0 8px;
    border-top: 1px solid var(--line);
    color: var(--text);
    font-weight: 650;
  }
  .site-header .nav-passport-link .icon { width: 18px; height: 18px; }
}
/* One compact phone row: C4 mark, language, theme, then menu. */
@media (max-width: 700px) {
  :root .site-header .nav-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px 44px;
    column-gap: 8px;
    row-gap: 0;
    height: auto;
    min-height: 72px;
    padding-block: 10px;
    align-items: center;
  }
  .site-header .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    width: max-content;
    max-width: 100%;
  }
  .site-header .brand-copy { display: none; }
  .site-header .nav-actions { display: contents; }
  .site-header .nav-actions > .language-trigger {
    grid-column: 2;
    grid-row: 1;
    min-width: 44px;
  }
  .site-header .nav-actions > .theme-toggle {
    grid-column: 3;
    grid-row: 1;
  }
  .site-header .nav-actions > .mobile-toggle {
    display: inline-grid;
    grid-column: 4;
    grid-row: 1;
  }
}

/* ------------------------------------------------------------------------------------------
   The homepage hero (founder, 1 November 2026, from the reference: the words on the left, the researchers on the
   right, joined by a broad pale fade). Three layers: the photograph, the fade, the words. The box keeps a 2.5:1
   shape, so the picture, 93.75 % of the width and anchored at the right, is never cropped: its left band sits under
   the fade, the microscope ends at the right edge, and the first face (36-40 % of every language's picture) lands
   at about 40 % of the width, past the words, which stay within 34 %; the fade is gone by 38 % so the left
   researcher really shows (founder). The box grows only when the words need it.
   Below 1180 px the words stand above the complete picture. The picture follows the reader's language (app.js
   heroPicture, assets/hero/<code>); a switch keeps the picture on screen until the next has decoded, then crossfades.
   ------------------------------------------------------------------------------------------ */
:root .hero-shell .hero{display:block;position:relative;isolation:isolate;overflow:clip;min-height:auto;height:auto;aspect-ratio:2.56;padding:48px 48px 124px;color:var(--text);direction:ltr;background:var(--surface)}
:root .hero-shell .hero::before,:root .hero-shell .hero::after{content:none!important}
:root .hero-shell .hero .hero-content{position:relative;z-index:2;width:100%;max-width:none;margin:0;padding:0}
:root .hero-shell .hero h1{max-width:min(33.5vw - 64px,486px);font-size:clamp(38px,3.45vw,60px);margin:0 0 22px}
:root .hero-shell .hero h1 span,:root .hero-shell .hero .eyebrow{color:var(--brand)}
:root .hero-shell .hero .hero-copy{color:var(--muted);max-width:370px;margin:0 0 28px}
:root .hero-shell .hero .hero-photo-frame{position:absolute;inset:0 0 0 6.25%;width:auto;height:auto;max-width:none;aspect-ratio:auto;overflow:visible;border-radius:0;pointer-events:none;z-index:0;background:none;mask-image:none!important;-webkit-mask-image:none!important}
:root .hero-shell .hero .hero-photo,:root .hero-shell .hero .hero-photo-under{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;object-position:0% 40%;opacity:1;filter:none;transform:none;animation:none;z-index:auto;transition:opacity .35s ease;
  mask-image:linear-gradient(90deg,transparent 0,#000 14%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%)}
:root .hero-shell .hero .hero-photo.is-arriving{opacity:0}
:root .hero-shell .hero .hero-photo-frame::after{content:"";position:absolute;inset:0 0 0 -6.7%;z-index:1;pointer-events:none;
  /* A soft oval of the surface behind the eyebrow alone (founder: "only that zone a little whiter"): it ends before the
     left researcher's hair (x 36 %) and fades out above the headline. */
  background:radial-gradient(ellipse 30% 17% at 6% 12%,
    color-mix(in srgb,var(--surface) 72%,transparent) 0%,
    color-mix(in srgb,var(--surface) 45%,transparent) 45%,
    transparent 100%),
  linear-gradient(90deg,
    color-mix(in srgb,var(--surface) 96%,transparent) 0%,
    color-mix(in srgb,var(--surface) 93%,transparent) 18%,
    color-mix(in srgb,var(--surface) 84%,transparent) 24%,
    color-mix(in srgb,var(--surface) 60%,transparent) 28%,
    color-mix(in srgb,var(--surface) 30%,transparent) 32%,
    color-mix(in srgb,var(--surface) 10%,transparent) 35%,
    transparent 38%)}
:root .hero-shell .hero-bottom{position:absolute;inset:auto 48px 28px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0;border:0}
:root .hero-caption{color:var(--muted)}
:root .hero-caption span{background:var(--brand)}
/* A right-to-left language keeps the words in the left column (the faces are on the right and a photograph is never
   mirrored): each block hugs the column's left edge with its text aligned right, the buttons pack at the left. */
:root[dir=rtl] .hero-shell .hero .hero-content,:root[dir=rtl] .hero-shell .hero-bottom{direction:rtl;text-align:right}
:root[dir=rtl] .hero-shell .hero :is(.hero-eyebrow,h1,.hero-copy){margin-inline-start:auto;margin-inline-end:0}
:root[dir=rtl] .hero-shell .hero .hero-eyebrow{max-width:min(33.5vw - 64px,486px)}
:root[dir=rtl] .hero-shell .hero .button-row{justify-content:flex-end}
@media(prefers-reduced-motion:reduce){:root .hero-shell .hero .hero-photo,:root .hero-shell .hero .hero-photo-under{transition:none}}
@media(max-width:1180px){
  :root .hero-shell .hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;aspect-ratio:auto;gap:28px;padding:40px 32px 28px}
  :root .hero-shell .hero .hero-content{grid-row:1}
  :root .hero-shell .hero h1{max-width:700px;margin:0 0 22px;font-size:clamp(44px,7vw,68px)}
  :root .hero-shell .hero .hero-copy{max-width:520px}
  :root .hero-shell .hero .hero-photo-frame{grid-row:2;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:var(--hero-aspect,2.4);overflow:hidden;border-radius:var(--radius-panel,18px)}
  :root .hero-shell .hero .hero-photo,:root .hero-shell .hero .hero-photo-under{object-position:center;mask-image:none!important;-webkit-mask-image:none!important}
  :root .hero-shell .hero .hero-photo-frame::after{content:none}
  :root .hero-shell .hero-bottom{grid-row:3;position:static;inset:auto}
}
/* The Passport note card left the hero (founder, 1 November 2026: it covered the picture and doubled the Discover
   button); below 980 px the caption is hidden too, so the bottom row has nothing to show. */
@media(max-width:980px){
  :root .hero-shell .hero-bottom{display:none}
}
@media(max-width:700px){
  :root .hero-shell .hero{padding:30px 0 20px;gap:22px}
  :root .hero-shell .hero .hero-content,:root .hero-shell .hero-bottom{padding-inline:22px}
  :root .hero-shell .hero h1{font-size:clamp(42px,8vw,56px)}
  /* A small radius on the phone picture (founder, 1 November 2026), inset a little from the card so the corners sit clean. */
  /* Bigger on a phone (founder, 1 November 2026): a complete 2.4:1 picture is a strip 150 px tall on a phone, so the phone
     shows the three researchers and the microscope at 1.6:1 instead, trimming only the empty shelving at the left; the
     first face (36-40 % of the width) stays whole. */
  :root .hero-shell .hero .hero-photo-frame{width:calc(100% - 24px);margin-inline:12px;border-radius:10px;aspect-ratio:1.6}
  :root .hero-shell .hero .hero-photo,:root .hero-shell .hero .hero-photo-under{object-position:99% 50%}
  :root .hero-shell .hero .button-row{gap:12px}
}
@media(prefers-reduced-motion:reduce){:root .hero .hero-photo{animation:none}}