/* ==========================================================================
   Asterale Partners — site styles.
   Structure is carried by hairline rules and whitespace: no shadows, no
   ornament, and exactly three grounds — paper, mist, petrol.
   ========================================================================== */

:root{
  --ink:        #1c1f1e;
  --ink-2:      #4b514f;
  --ink-3:      #7d837f;

  --teal:       #007874;
  --teal-ink:   #005c59;
  --petrol:     #0b403e;
  --teal-glow:  #9fc9c4;   /* the teal that reads on dark ground */
  --teal-light: #5fb3ac;

  --paper:      #fbfbf9;
  --paper-2:    #f2f2f0;
  --stone:      #d6d6d3;
  --rule:       #e4e4e0;
  --rule-soft:  #eeeeea;

  /* The one warm accent on the site. It is reserved for regulatory milestones in
     the value chain, where it marks a date rather than decorates a heading, and
     it is tuned for petrol ground only — 5.0:1 there, 1.9:1 on paper. */
  --milestone:  #e09a80;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Every list marker on the site is this square, on either ground. */
  --bullet: 5px;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --wrap: 1180px;
  --section-y: clamp(4rem, 9vw, 7.5rem);
  /* The bar is the same height in every state, so anchor jumps and the hero
     scrim can both measure straight off this one token. */
  --header-h: 66px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

::selection{ background:var(--teal); color:#fff; }

:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:2px; }
/* --teal is ~1.3:1 against the scrimmed hero photo, so the ring goes white there */
.hero :focus-visible,
.site-header.is-top :focus-visible{ outline-color:#fff; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--teal); color:#fff; padding:0.75rem 1.25rem;
  font-size:0.875rem; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* --------------------------------------------------------------- layout */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

#about, #strategy, #focus, #contact{ scroll-margin-top:calc(var(--header-h) + 1.5rem); }
#top{ scroll-margin-top:0; }
[tabindex="-1"]:focus{ outline:none; }

.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(2.75rem, 6vw, 4.5rem); }
.section--dark{ color:#dcebea; }
.section--petrol{ background:var(--petrol); }
.section--mist{ background:var(--paper-2); }

.section--dark .h2,
.section--dark .h3,
.section--dark h3{ color:#fff; }
.section--dark .eyebrow,
.section--dark .person__role{ color:var(--teal-glow); }
.section--dark .lede,
.section--dark .body,
.section--dark .small{ color:#c7dcda; }

/* --------------------------------------------------------------- type */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  margin:0;
  color:var(--ink);
  letter-spacing:-0.015em;
  line-height:1.14;
}

p{ margin:0; }

.eyebrow{
  font-size:0.6875rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0;
  line-height:1.4;
}

.display{
  font-size:clamp(2.5rem, 1.1rem + 4.6vw, 4.4rem);
  line-height:1.04;
  letter-spacing:-0.025em;
}

.h2{ font-size:clamp(1.5rem, 1rem + 1.7vw, 2.125rem); line-height:1.16; }
.h3{ font-size:clamp(1.125rem, 0.98rem + 0.55vw, 1.3125rem); line-height:1.25; }

.lede{
  font-size:clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height:1.62;
  color:var(--ink-2);
}

.body{ color:var(--ink-2); }
.small{ font-size:0.875rem; line-height:1.6; color:var(--ink-2); }

/* thin teal rule — the recurring section signature */
.tick{ width:56px; height:2px; background:var(--teal); border:0; margin:0; }

/* --------------------------------------------------------------- links */

.link{
  font-size:0.9375rem;
  font-weight:500;
  color:var(--teal);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding-bottom:2px;
  border-bottom:1px solid rgba(0,120,116,0.35);
  transition:border-color .18s ease, gap .18s ease, color .18s ease;
}
.link:hover{ border-bottom-color:var(--teal); gap:0.75rem; }
.link .arrow{ transition:transform .18s ease; }
.link:hover .arrow{ transform:translateX(2px); }

/* --------------------------------------------------------------- header */

/* Fixed rather than sticky, and one height throughout — the bar never resizes.
   The white bar is the default state — which is also what a visitor without JS
   gets — and nav.js adds .is-top for the transparent state over the hero. The
   five --hd-* tokens and the backdrop are the whole difference between them. */
.site-header{
  --hd-fg:var(--ink);            /* brand, hovered and active link */
  --hd-link:var(--ink-2);
  --hd-edge:var(--stone);        /* menu button border */
  --hd-hover:transparent;        /* link hover underline */
  --hd-current:var(--teal);      /* active link underline */

  position:fixed; left:0; right:0; top:0; z-index:50;
  background:rgba(255,255,255,0.94);
  border-bottom:1px solid var(--rule);
  backdrop-filter:saturate(1.3) blur(10px);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);
  transition:background-color .25s ease, border-color .25s ease;
}
.site-header.is-top{
  --hd-fg:#fff;
  --hd-link:#fff;
  --hd-edge:rgba(255,255,255,0.55);
  --hd-hover:rgba(255,255,255,0.6);
  --hd-current:var(--teal-light);

  background:transparent;
  border-bottom-color:transparent;
  /* An untinted blur over the photograph ends in a hard horizontal seam, and
     there is no tint here to hide it. The hero scrim carries the contrast. */
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  /* minus the 1px bottom border, so the total box is exactly --header-h */
  min-height:calc(var(--header-h) - 1px);
}

.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.site-header .brand{ color:var(--hd-fg); transition:color .25s ease; }

/* The supplied logo is a flat-grey lockup on opaque white, which sits on neither
   the photograph nor the dark footer. logo-lockup.png is that artwork with its
   darkness turned into alpha, used as a mask so the lockup paints in currentColor. */
.brand__logo{
  display:block;
  height:34px;
  aspect-ratio:869 / 160;
  background-color:currentColor;
  transition:background-color .25s ease;
  -webkit-mask:url("../img/logo-lockup.png") no-repeat center / contain;
  mask:url("../img/logo-lockup.png") no-repeat center / contain;
}

.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{
  font-size:0.9375rem;
  color:var(--hd-link);
  text-decoration:none;
  padding:0.35rem 0;
  border-bottom:1.5px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.nav a:hover{ color:var(--hd-fg); border-bottom-color:var(--hd-hover); }
.nav a[aria-current]{ color:var(--hd-fg); border-bottom-color:var(--hd-current); }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--hd-edge); border-radius:2px;
  padding:0.45rem 0.7rem;
  /* a button does not inherit the body font */
  font-family:var(--sans); font-size:0.8125rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--hd-link); cursor:pointer;
  transition:color .25s ease, border-color .25s ease;
}

/* --------------------------------------------------------------- hero */

.hero{
  position:relative;
  isolation:isolate;          /* keeps the scrim/text z-indexes off the header */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  /* svh, not vh/dvh — a collapsing mobile URL bar must not resize the hero and
     flicker the header state. */
  min-height:clamp(500px, 72svh, 700px);
  overflow:hidden;
  background:var(--paper-2);
}

.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:38% 50%;
  filter:saturate(0.82) brightness(0.96) contrast(1.06);
  transform:scale(1.012);
}

/* Top scrim. Stops are expressed in --header-h rather than percentages, so the
   contrast guarantee holds at every viewport height. */
.hero__scrim{
  position:absolute; left:0; right:0; top:0;
  height:calc(var(--header-h) * 4);
  z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,29,31,0.66) 0,
    rgba(5,29,31,0.60) calc(var(--header-h) * 1.3),
    rgba(5,29,31,0.18) calc(var(--header-h) * 2.4),
    rgba(5,29,31,0) 100%);
}

/* Bottom-left tint. It sits on the hero, not on .hero__text: sized against the
   text box the ellipse still carried ~0.24 alpha at that box's top edge, which
   drew a hard horizontal seam across the photo wherever the text block started.
   Spanning the full hero and ending the ellipse at 100% height lets it reach
   zero exactly at the top, so there is no edge at any viewport size. */
.hero::after{
  content:"";
  position:absolute; inset:0;
  z-index:1; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(5,29,31,0.18) 0%, rgba(5,29,31,0) 30%),
    radial-gradient(ellipse 78% 100% at 5% 100%,
      rgba(5,29,31,0.84) 0%,
      rgba(5,29,31,0.70) 38%,
      rgba(5,29,31,0.38) 62%,
      rgba(5,29,31,0.08) 83%,
      rgba(5,29,31,0) 100%);
}

.hero__text{
  position:relative; z-index:2;
  width:100%;
  padding-block:clamp(4rem, 12vh, 7rem) clamp(2.5rem, 6vh, 4.5rem);
}
.hero__inner > * + *{ margin-top:clamp(1.15rem, 2.2vw, 1.85rem); }
.hero__inner > .hero__meta{ margin-top:clamp(2rem, 4vw, 3rem); }

.hero .display{
  color:#fff;
  font-size:clamp(2.25rem, 1rem + 3.6vw, 4rem);
  max-width:31rem;
  text-shadow:0 2px 24px rgba(5,29,31,0.2);
}
/* --teal is ~1.3:1 on the scrimmed photo, so every teal-carrying element in the
   hero is re-coloured rather than dimmed. */
.hero .eyebrow{ color:rgba(255,255,255,0.86); }
.hero .tick{ width:72px; background:var(--teal-light); }   /* decorative — WCAG 1.4.11 exempt */
.hero .link{ color:#fff; border-bottom-color:rgba(255,255,255,0.45); }
.hero .link:hover{ border-bottom-color:#fff; }

.hero__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:0.9rem 2rem; }

/* Suppressed by the reduced-motion block at the end of this file. */
.hero__inner > *{ animation:rise 0.5s cubic-bezier(.22,.75,.3,1) 0.08s both; }
@keyframes rise{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

/* --------------------------------------------------------------- section head */

/* Eyebrow, title, then the sentence that supports it — one ragged left column.
   The measure caps sit on the children, not the container, so .subsection can
   widen the title without dragging the aside with it. */
.section-head{ margin-bottom:clamp(2rem, 4vw, 3.25rem); }
.section-head__lead{ max-width:34rem; }
.section-head__aside{
  max-width:41rem;
  margin-top:clamp(1.35rem, 2.4vw, 1.85rem);
}
.section-head__lead > * + *,
.section-head__aside > * + *{ margin-top:1rem; }

.subsection{
  margin-top:clamp(3rem, 6vw, 5rem);
  padding-top:clamp(3rem, 6vw, 5rem);
  border-top:1px solid var(--rule);
}
.subsection .section-head__lead{ max-width:52rem; }

/* --------------------------------------------------------------- grids */

.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(1.5rem, 3.5vw, 3rem); }

/* Figure and content side by side. --text-first flips the ratio along with the
   order: under the strategy statement the head is the substance. */
.split{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(1.5rem, 3.5vw, 3rem);
  align-items:stretch;
}
.split--text-first{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); }
/* Inside a split row the head's bottom margin would only shorten its column. */
.split--text-first .section-head{ margin-bottom:0; }
.split--text-first .figure{ aspect-ratio:4/3; }

/* --------------------------------------------------------- section graphics */

/* overflow:clip contains the bleeding mark without a horizontal scrollbar. NOT
   body{overflow-x:hidden}, which breaks position:sticky on the header. */
.section--figured{ position:relative; overflow:clip; }
.section--figured > .wrap{ position:relative; z-index:1; }

.section-mark{
  position:absolute;
  top:50%; right:-8%;
  width:clamp(300px, 38vw, 520px);
  aspect-ratio:1/1;
  transform:translateY(-50%);
  color:rgba(159,201,196,0.06);
  z-index:0;
  pointer-events:none;
}
.section-mark--left{ right:auto; left:-10%; color:rgba(159,201,196,0.04); }
.section-mark svg{ width:100%; height:100%; display:block; }

/* Duotone: mix-blend-mode:color takes hue from the overlay and luminosity from
   the greyscaled photograph beneath; isolation keeps the blend in the figure.
   One recipe for every photograph on the site — the two figures previously ran
   different greyscale, brightness and tint values and read as two unrelated
   treatments a section apart. Hue, contrast and tint are now fixed for every
   photograph on the site; the one per-photograph knob is --duotone-exposure,
   because the sources are lit differently and it takes a different exposure to
   land them on the same mid-tone. Matching that mid-tone is what makes one
   recipe read as one treatment. */
.figure{
  --duotone-exposure:0.92;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:0;
  background:var(--petrol);
}
.figure img{
  width:100%; height:100%;
  object-fit:cover;
  /* darkened before tinting — at full brightness the teal reads as mint candy */
  filter:grayscale(1) contrast(1.1) brightness(var(--duotone-exposure));
}
.figure::after{
  content:"";
  position:absolute; inset:0;
  background:var(--teal);
  mix-blend-mode:color;
  opacity:0.34;
  pointer-events:none;
}
/* Only a floor, for when the list beside the photo is short enough to letterbox it. */
.figure--tall{ min-height:300px; }

/* A markedly brighter source than the bench photograph: it needs about a fifth
   of a stop less to sit at the same mid-tone. Framing is its own business. */
.figure--strategy{ --duotone-exposure:0.74; }
.figure--strategy img{ object-position:center 16%; }

/* --------------------------------------------------------------- pillars */

.pillars__head{ margin-bottom:clamp(2.75rem, 5vw, 4rem); }

/* Deliberately NOT .h2: display serif carries short phrases, and a 141-character
   sentence stacks into a wall at that scale. */
.pillars__statement{
  font-size:clamp(1.65rem, 1.35rem + 1vw, 2.125rem);
  line-height:1.2;
  max-width:52rem;
  margin-top:0.9rem;
}
.pillars__qualifier{ color:var(--ink-2); }
.pillars__intro{ max-width:68ch; margin-top:clamp(1.15rem, 2vw, 1.6rem); }

/* Three shared row tracks, so every title sizes to the tallest and all three
   bodies start on one baseline. No @supports fallback: a browser without subgrid
   renders the pre-subgrid layout, which is the previously shipped state. */
.pillars{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  grid-template-rows:auto auto auto;   /* icon · title · body */
}
/* grid-row pins every pillar to the same three tracks while auto-placement still
   hands out columns 1/2/3. align-self stays at stretch, or the dividers would
   stop at each column's own text. */
.pillar{
  display:grid;
  grid-row:1 / span 3;
  grid-template-rows:subgrid;
  padding-block:0;
  padding-inline:clamp(1.5rem, 3vw, 2.75rem);
  border-left:1px solid var(--rule);
}
.pillar:first-child{ border-left:0; padding-left:0; }
.pillar:last-child{ padding-right:0; }
.pillar__icon{
  width:clamp(96px, 9vw, 112px); height:clamp(96px, 9vw, 112px); display:block;
  color:var(--teal);
  background:currentColor;
  -webkit-mask:var(--pillar-icon) center / contain no-repeat;
  mask:var(--pillar-icon) center / contain no-repeat;
  margin:0 0 clamp(1.25rem, 2.5vw, 1.75rem);
}
.pillar__icon--permanent{ --pillar-icon:url("../img/mandate-icons/permanent-capital.png"); }
.pillar__icon--sciences{ --pillar-icon:url("../img/mandate-icons/life-sciences.png"); }
.pillar__icon--legacy{ --pillar-icon:url("../img/mandate-icons/protecting-legacy.png"); }
.pillar__body{
  color:var(--ink-2);
  font-size:0.9375rem;
  line-height:1.65;
  max-width:32ch;
  margin:0.65rem 0 0;
}

/* --------------------------------------------------------------- values */

.values{ border-top:1px solid rgba(159,201,196,0.22); }
.value{
  display:grid;
  grid-template-columns:8.5rem minmax(0,1fr);
  gap:clamp(1rem, 3vw, 2.5rem);
  padding-block:clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom:1px solid rgba(159,201,196,0.22);
  align-items:start;
}
.value__num{
  font-family:var(--serif);
  font-size:clamp(3rem, 6vw, 5.5rem);
  line-height:0.85;
  color:var(--teal-glow);
  font-variant-numeric:tabular-nums;
}
.value__body{ max-width:66ch; }
.value__title{
  font-size:clamp(1.125rem, 0.98rem + 0.55vw, 1.3125rem);
  line-height:1.25;
}
.value__lead,
.value__text{ font-size:clamp(1rem, 0.95rem + 0.3vw, 1.125rem); }
.value__lead{ line-height:1.55; color:var(--teal-glow); margin-top:0.6rem; }
.value__text{ color:#c7dcda; margin-top:0.9rem; }
.value__text b{ font-weight:500; color:#fff; }

/* --------------------------------------------------------------- people */

.person{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:0.5rem 1.25rem;
  align-items:center;
  align-content:start;
}
/* The only border-radius on the site, and a deliberate exception: it applies to
   photographic content, not to a UI container. Do not "correct" it to 0. */
.person__photo{
  width:104px; height:104px; flex:none;
  border-radius:50%;
  object-fit:cover;
  background:var(--paper-2);
  filter:saturate(0.82) contrast(1.02);
}
/* the two sources crop differently: Kolodziej is square, Deman is landscape */
.person__photo--aneta{ object-position:50% 22%; }
.person__photo--olivier{ object-position:50% 26%; }
.person__id{ align-self:center; }
/* Visually an eyebrow — same size, same tracking, same case — so it carries the
   eyebrow's weight and leading too. */
.person__role{
  font-size:0.6875rem; font-weight:600; line-height:1.4;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--teal); margin:0.5rem 0 0;
}
.person__place{ font-size:0.8125rem; color:var(--ink-3); margin:0.2rem 0 0; }
.person__bio{ grid-column:1 / -1; margin-top:0.25rem; font-size:0.9375rem; color:var(--ink-2); }

/* --------------------------------------------------------------- value chain */

/* One left-to-right flow of interlocking chevrons. The geometry is driven by a
   single token: every band is clipped to a point on the right, and every band
   after the first pulls back by the same amount and is clipped to a matching
   notch on the left, so the two edges tessellate exactly. Column boundaries land
   on the arrow tips, which is also where the panel rules below them sit.
   The two in-scope phases encode membership three ways at once — fill, tag and a
   word — so they survive greyscale and a bad projector. The out phase deliberately
   keeps only two: a fill barely off the ground, and the word. */
.vc{
  --notch: clamp(14px, 1.7vw, 22px);
  --panel-pad: clamp(1.1rem, 2vw, 1.75rem);

  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.3fr) minmax(0,1.05fr);
  grid-template-rows:auto auto auto;
  column-gap:0;
}

/* The wrapper exists only for the narrow layout, where one chevron has to span a
   whole phase. Here it must vanish so the band and panel stay direct grid items of
   .vc and keep their explicit placement. */
.vc__phase{ display:contents; }

/* row 1 — regulatory milestones, centred on the boundary they open */
.vc__milestone{
  grid-row:1;
  justify-self:start;
  /* justify-self pins the box to the column's leading edge; the shift then
     centres it on that edge, which is where the arrow tip below it lands. */
  transform:translateX(-50%);
  position:relative;
  margin:0 0 0.55rem;
  padding-bottom:1.1rem;
  font-size:0.625rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--milestone);
  white-space:nowrap;
  text-align:center;
}
.vc__milestone::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:1px; height:0.75rem;
  background:rgba(159,201,196,0.45);
}
.vc__milestone--ind{ grid-column:2; }
.vc__milestone--approval{ grid-column:3; }

/* row 2 — the chevron band */
.vc__band{
  grid-row:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* A ribbon, not a block: the floor only has to clear the two-line phase name
     plus its padding, which is what sets the bottom of the clamp. */
  min-height:clamp(68px, 6.8vw, 88px);
  padding:0.9rem var(--panel-pad);
  clip-path:polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% 50%,
    calc(100% - var(--notch)) 100%,
    0 100%);
}
.vc__band--primary,
.vc__band--adjacent{
  margin-left:calc(var(--notch) * -1);
  padding-left:calc(var(--notch) + var(--panel-pad));
  clip-path:polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% 50%,
    calc(100% - var(--notch)) 100%,
    0 100%,
    var(--notch) 50%);
}
/* On petrol the light/dark reading inverts: the primary phase is the one that
   lifts off the ground, and "outside our focus" is the one that barely does. */
.vc__band--out{ grid-column:1; background:rgba(255,255,255,0.04); }
.vc__band--primary{ grid-column:2; background:var(--teal-glow); }
.vc__band--adjacent{ grid-column:3; background:rgba(159,201,196,0.30); }

.vc__name{
  font-family:var(--serif);
  font-size:clamp(1.125rem, 0.98rem + 0.55vw, 1.5rem);
  line-height:1.2;
  letter-spacing:-0.015em;
}
/* Dimmed text on petrol is held at alpha 0.72 and no lower: measured on #0b403e
   that is 5.1:1, where 0.55 gave 4.0:1. */
.vc__band--out .vc__name{
  font-size:clamp(1rem, 0.9rem + 0.35vw, 1.1875rem);
  color:rgba(220,235,234,0.66);   /* 4.6:1 on the 0.04 fill */
}
/* --teal-ink on the glow fill is only 4.4:1, so the name takes full petrol. */
.vc__band--primary .vc__name{ color:var(--petrol); }
.vc__band--adjacent .vc__name{ color:#fff; }

/* row 3 — the detail panels, ruled off at the arrow tips above them */
.vc__panel{
  grid-row:3;
  padding-top:1.5rem;
  padding-right:var(--panel-pad);
}
.vc__panel--out{ grid-column:1; }
.vc__panel--primary{ grid-column:2; }
.vc__panel--adjacent{ grid-column:3; padding-right:0; }
.vc__panel--primary,
.vc__panel--adjacent{
  border-left:1px solid rgba(159,201,196,0.28);
  padding-left:var(--panel-pad);
}

.vc__tag{
  display:inline-block;
  margin:0;
  padding:0.42rem 0.8rem;
  font-size:0.625rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.vc__tag--out{
  background:none;
  padding-inline:0;   /* flush with the column edge, not floating in a phantom chip */
  color:rgba(220,235,234,0.62);   /* 4.7:1 straight on petrol */
}
.vc__tag--primary{ background:var(--teal-glow); color:var(--petrol); }
.vc__tag--adjacent{ background:rgba(159,201,196,0.30); color:#eaf5f3; }

.vc__list{
  list-style:none; margin:1.25rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:0.6rem;
  font-size:0.9375rem; color:#c7dcda;
}
.vc__list li{ position:relative; padding-left:1rem; line-height:1.5; }
.vc__list li::before{
  content:""; position:absolute; left:0; top:0.58em;
  width:var(--bullet); height:var(--bullet); background:var(--teal-glow);
}
.vc__panel--adjacent .vc__list li::before{ background:rgba(159,201,196,0.55); }

/* --------------------------------------------------------------- mandate */

/* No rule above the first condition or below the last: the list's first and last
   lines sit level with the top and bottom edges of the photo beside it. */
.mandate{
  list-style:none;
  margin:0; padding:0;
  color:var(--ink-2);
}
.mandate li{
  --row-top:1.05rem;
  position:relative;
  padding:var(--row-top) 0 1.05rem 1.5rem;
  line-height:1.55;
}
.mandate li + li{ border-top:1px solid var(--rule); }
.mandate li:first-child{ --row-top:0rem; }
.mandate li:last-child{ padding-bottom:0; }
/* same square as .vc__list, offset by the row's own top padding so it sits on
   the first line rather than on the rule above */
.mandate li::before{
  content:""; position:absolute; left:0; top:calc(var(--row-top) + 0.6em);
  width:var(--bullet); height:var(--bullet); background:var(--teal);
}
.mandate b{ font-weight:500; color:var(--ink); }

/* --------------------------------------------------------------- ledger */

.principle{
  margin-top:clamp(2rem, 4vw, 3rem);
  padding-left:clamp(1.1rem, 2.2vw, 1.75rem);
  border-left:2px solid var(--teal);
  font-family:var(--serif);
  font-size:clamp(1.1875rem, 1rem + 0.9vw, 1.625rem);
  line-height:1.32;
  letter-spacing:-0.015em;
  color:var(--ink);
  max-width:52ch;
}

.ledger{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0 clamp(1.75rem, 5vw, 4.5rem);
  margin-top:clamp(2.25rem, 4.5vw, 3.5rem);
  border-top:1px solid var(--ink);
}
.ledger__col{ position:relative; padding-top:2rem; }
/* Drawn in the gutter as a pseudo-element rather than as a border on the column,
   so the column box — and the diamond at its leading edge — stays on the track. */
.ledger__col + .ledger__col::after{
  content:"";
  position:absolute;
  left:calc(clamp(1.75rem, 5vw, 4.5rem) / -2);
  top:0; bottom:0;
  width:1px;
  background:var(--rule);
}
.ledger__col::before{
  content:"";
  position:absolute; left:0; top:-5px;
  width:9px; height:9px;
  background:var(--teal);
  transform:rotate(45deg);
}
.ledger__label{ margin-bottom:1.05rem; }
.ledger .body{ line-height:1.75; }
.ledger b{ font-weight:500; color:var(--ink); }

/* --------------------------------------------------------------- contact */

.contact-list{
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
}
.contact-list__item{
  padding-block:1.75rem;
  border-bottom:1px solid var(--rule);
  padding-right:clamp(1rem,3vw,2.5rem);
}
.contact-list__item + .contact-list__item{
  border-left:1px solid var(--rule);
  padding-left:clamp(1rem,3vw,2.5rem);
}
.contact-list__item .small{ margin-top:0.75rem; }
.contact-list__item a{ color:var(--teal-ink); text-decoration:none; border-bottom:1px solid var(--stone); }
.contact-list__item a:hover{ border-bottom-color:var(--teal); }

.section--dark .contact-list{ border-top-color:rgba(159,201,196,0.42); }
.section--dark .contact-list__item{ border-bottom-color:rgba(159,201,196,0.32); }
.section--dark .contact-list__item + .contact-list__item{ border-left-color:rgba(159,201,196,0.32); }
.section--dark .contact-list__item a{
  color:#d9eeeb;
  border-bottom-color:rgba(159,201,196,0.55);
}
.section--dark .contact-list__item a:hover{ color:#fff; border-bottom-color:#fff; }

/* --------------------------------------------------------------- footer */

/* Neutral charcoal, not a third petrol. #contact ends the argument on brand
   ground; the footer is the colophon after it, and reading as a different
   material is the point — a near-miss petrol under a petrol section looked like
   a rendering error rather than a decision. --teal-glow on the eyebrow and the
   brand mark carries the tie back. */
.site-footer{
  background:var(--ink);
  color:#c9cecb;
  padding-block:clamp(2.75rem, 6vw, 4.5rem) 2rem;
}
.site-footer a{ color:#e6e9e7; text-decoration:none; }
.site-footer a:hover{ color:#fff; }

.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;
  gap:clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom:clamp(2rem, 4vw, 3rem);
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.site-footer .brand{ color:#fff; }
.footer-tag{ font-size:0.875rem; color:#9aa19d; margin-top:1rem; max-width:34ch; }

/* An eyebrow in everything but name, so it takes the eyebrow's colour for a
   dark ground. */
.footer-col h4{
  font-family:var(--sans);
  font-size:0.6875rem; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--teal-glow); margin:0 0 1rem;
}
.footer-col ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0.6rem;
  font-size:0.9375rem;
}

/* The Swiss Biotech Association membership mark, per the association's usage
   rules: always linked to swissbiotech.org; the negative file only on grounds
   past 70% black; no frame, no caption, no label, and no tint of any kind —
   which is why it carries no eyebrow and no hover treatment. */
.footer-member{
  display:block;
  /* start, not the grid default stretch: the row is as tall as the nav column
     beside it, and a stretched <a> leaves dead hit area under the mark. */
  align-self:start;
  width:100%; max-width:172px;
}
/* height:auto — the base img rule sets only max-width, so the intrinsic height
   attribute would squash the mark. */
.footer-logo{ width:100%; height:auto; }

.footer-base{
  display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem;
  justify-content:space-between;
  padding-top:1.5rem;
  font-size:0.75rem; color:#949b97;   /* 5.8:1 on --ink at 12px */
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 940px){
  .hero{ min-height:clamp(420px, 62svh, 560px); }
  .hero__media img{ object-position:44% 50%; }
  .hero::after{
    background:radial-gradient(ellipse 125% 100% at 0% 100%,
      rgba(5,29,31,0.82) 0%,
      rgba(5,29,31,0.70) 40%,
      rgba(5,29,31,0.42) 68%,
      rgba(5,29,31,0.12) 88%,
      rgba(5,29,31,0) 100%);
  }
  .hero .display{ max-width:none; }

  .grid-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto; }
  .contact-list{ grid-template-columns:1fr; }
  .contact-list__item + .contact-list__item{ border-left:0; padding-left:0; }
  .value{ grid-template-columns:5.5rem minmax(0,1fr); }

  .split{ grid-template-columns:1fr; }
  .figure--tall{ min-height:0; aspect-ratio:16/9; }
  .split--text-first .figure{ aspect-ratio:16/9; }
  .figure--strategy img{ object-position:center 15%; }
  .section-mark{ width:clamp(240px, 46vw, 340px); }

  /* One column: the wide diagram stood on its end. A thin chevron runs down the
     left in the wide-mode tier colours and each phase's content sits beside it,
     which is only possible because the chevron is narrow. The two milestones become
     full-width rules that cut the chevron column into three. */
  .vc{
    --chev-w:   18px;
    --chev-tip: 11px;   /* point and notch depth */
    --chev-gap: 1rem;

    grid-template-columns:1fr;
    /* stops the lines running long at the 720-940px end of this range */
    max-width:36rem;
  }
  .vc__phase{ grid-column:1; grid-row:auto; }

  .vc__phase{
    display:block;
    position:relative;
    padding-left:calc(var(--chev-w) + var(--chev-gap));
    padding-bottom:2rem;      /* room below the last line before the boundary */
  }
  /* The wide bar has no gaps between its bands, so this one must not either. Same
     trick as the wide grid's margin-left:calc(var(--notch) * -1), turned on its
     side: overlap the phase above by exactly the notch, then pad the content back
     down so the overlap costs nothing vertically and only lets the ribbon
     interlock. In the overlap the two shapes are complementary — the phase above
     ends in a downward triangle with material at the centre, this one starts with
     material at the edges and a void at the centre — so together they fill the
     rectangle and paint order does not matter. */
  .vc__phase--primary,
  .vc__phase--adjacent{
    margin-top:calc(var(--chev-tip) * -1);
    padding-top:var(--chev-tip);
  }
  .vc__phase::before{
    content:"";
    position:absolute; left:0; top:0; bottom:0;
    width:var(--chev-w);
    clip-path:polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--chev-tip)),
      50% 100%,
      0 calc(100% - var(--chev-tip)));
  }
  /* phases 2 and 3 take the interlock notch; phase 1 starts the chain flat-topped */
  .vc__phase--primary::before,
  .vc__phase--adjacent::before{
    clip-path:polygon(
      0 0,
      50% var(--chev-tip),
      100% 0,
      100% calc(100% - var(--chev-tip)),
      50% 100%,
      0 calc(100% - var(--chev-tip)));
  }
  /* Wide-mode tier colours, with one exception: wide mode fills the out band with
     0.07 white, which across an 18px ribbon is ~1.24:1 on petrol and disappears —
     and a phase with no chevron breaks the flow this layout exists to draw. 0.10 is
     the least that stays visible while still reading as the faintest of the three. */
  .vc__phase--out::before{ background:rgba(255,255,255,0.10); }
  .vc__phase--primary::before{ background:var(--teal-glow); }
  .vc__phase--adjacent::before{ background:rgba(159,201,196,0.30); }

  /* the band and panel are plain blocks inside the wrapper now; the tags keep their
     wide-mode fills, so there are deliberately no .vc__tag overrides here */
  .vc__band,
  .vc__band--primary,
  .vc__band--adjacent{
    background:none;
    clip-path:none;
    margin:0;
    padding:0;
    min-height:0;
  }
  .vc__panel,
  .vc__panel--primary,
  .vc__panel--adjacent{
    border-left:0;
    padding:0.85rem 0 0;
  }
  .vc__list{ margin-top:1rem; gap:0.5rem; }

  /* nothing sits on a fill here, so the wide-mode petrol name would be invisible */
  .vc__band--primary .vc__name{ color:#fff; }
  .vc__band--adjacent .vc__name{ color:#dcebea; }

  /* The boundary rule and its name share one line, the name at the right end. It
     sits inside .vc__phase, so the wrapper's padding-left already confines it to the
     content column and it never crosses the ribbon. Base keeps white-space:nowrap:
     the name stays one line and the rule absorbs whatever is left. */
  .vc__milestone{
    display:flex;
    /* Not redundant: justify-self applies to block-level boxes in current Chrome,
       not only to grid items, so the base rule's justify-self:start shrink-wraps
       this to its label and leaves the rule no room to grow into. */
    justify-self:stretch;
    align-items:center;
    gap:0.9rem;
    margin:0 0 1.4rem;
    padding:0;
    border-top:0;
    transform:none;   /* cancel the wide grid's translateX(-50%) */
    line-height:1.6;
  }
  .vc__milestone::before{
    content:"";
    flex:1;
    height:1px;
    background:rgba(159,201,196,0.28);
  }
  /* the base rule paints the desktop tick as an absolutely positioned 1px mark at
     left:50%; left alone it strands a hairline mid-row */
  .vc__milestone::after{ display:none; }

  .ledger{ grid-template-columns:1fr; border-top:0; }
  .ledger__col{ padding-top:1.6rem; border-top:1px solid var(--ink); }
  .ledger__col + .ledger__col{ margin-top:2.5rem; }
  .ledger__col + .ledger__col::after{ display:none; }

}

@media (max-width: 720px){
  :root{ --header-h:58px; }
  .brand__logo{ height:28px; }

  .site-header__inner{ position:relative; }
  /* The panel always sits on paper, so it re-points the header tokens at ink
     whichever state the bar itself is in. It is positioned against
     .site-header__inner's padding box, which already spans the viewport. */
  .nav{
    --hd-fg:var(--ink);
    --hd-link:var(--ink-2);
    --hd-hover:var(--rule-soft);
    --hd-current:var(--rule-soft);

    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    padding:0.25rem var(--gutter) 1.25rem;
  }
  .nav.is-open{ display:flex; }
  .nav a{ width:100%; padding:0.85rem 0; border-bottom:1px solid var(--rule-soft); }
  .nav a[aria-current]{ color:var(--teal); }
  .nav-toggle{ display:inline-block; }

  /* Keep the reference-like three-column presentation through tablet widths,
     then give each icon-and-copy group its own unruled row on small screens. */
  .pillars{
    grid-template-columns:1fr;
    grid-template-rows:none;
    gap:clamp(2.75rem, 9vw, 4rem);
  }
  .pillar{
    display:block;
    grid-row:auto;
    grid-template-rows:none;
    border-left:0;
    padding-inline:0;
  }

  .footer-grid{ grid-template-columns:1fr; }
  .value{ grid-template-columns:1fr; gap:0.5rem; }
  .value__num{ font-size:2.75rem; }
  .section-mark{ display:none; }
  .pillar{ padding-right:0; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}