/* ==========================================================================
   DYNARIS - corporate site
   Brand tokens from dynaris-capital.com. Switzer throughout; the serif lives only in the logo PNG.
   ========================================================================== */

/* ---------- Fonts (self-hosted, Fontshare / ITF Free Font License) ------- */
@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts/switzer-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts/switzer-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts/switzer-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../assets/fonts/switzer-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
  --onyx: #0A0A0A;
  --deep-slate: #2E4356;
  --slate: #536878;
  --ink: #414E59;
  --alabaster: #E5E4E2;
  --bg: #EDEDEC;
  --bg-tint: #E6E7E6;
  --hairline: rgba(46, 67, 86, .14);
  --hairline-light: rgba(229, 228, 226, .22);

  /* display ink: the brand hue pushed dark. Crisper headline contrast than
     mid-slate, which is what made the page read soft and dated. */
  --display: #16222E;

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);

  --nav-h: 76px;

  --sans: 'Switzer', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5.5rem, 11vw, 10rem);

  /* z-scale: content < nav < menu */
  --z-nav: 40;
  --z-menu: 50;
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}
/* Lenis drives inertia when present; native smooth would fight it */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

h1, h2 {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--display);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h3 {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--display);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }
/* Inline links to portfolio companies: a hairline underline, the text keeps
   its colour, and hover inks it. Light variant on the dark band. */
.ext {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: rgba(46, 67, 86, .38);
  transition: color .35s var(--ease), text-decoration-color .35s var(--ease);
}
.ext:hover { color: var(--display); text-decoration-color: currentColor; }

::selection { background: var(--deep-slate); color: var(--alabaster); }

:focus-visible {
  /* two tones, so the ring reads on the page ground AND on the photographs
     and the deep-slate contact band, where a slate outline disappeared */
  outline: 2px solid var(--alabaster);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(22, 34, 46, .62);
  border-radius: 2px;
}
.about :focus-visible, .evo :focus-visible, .people :focus-visible, .moves-tri :focus-visible, .nav.scrolled :focus-visible {
  outline-color: var(--display);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .72);
}

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

#nav-sentinel {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
}

section[id], div[id] { scroll-margin-top: 5.5rem; }

/* Curtain finale: the page slides away to reveal the dark contact band.
   Everything before it needs an opaque background and a higher layer. */
main > section, main > div { position: relative; z-index: 1; background: var(--bg); }
main > .contact {
  position: sticky;
  bottom: 0;
  z-index: 0;
}

/* ---------- Navigation ---------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding-inline: clamp(.75rem, 2vw, 1.5rem);
}
.nav-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 999px;
  transition:
    background .45s var(--ease-expo),
    border-color .45s var(--ease-expo),
    box-shadow .45s var(--ease-expo),
    height .45s var(--ease-expo),
    margin .45s var(--ease-expo),
    padding .45s var(--ease-expo),
    -webkit-backdrop-filter .45s var(--ease-expo),
    backdrop-filter .45s var(--ease-expo);
}
/* liquid-glass approximation: blur + saturation lift + specular edges */
.nav.scrolled .nav-inner {
  margin-top: .6rem;
  height: 60px;
  padding-inline: clamp(1.25rem, 2.5vw, 2rem);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16)),
    rgba(238, 239, 239, .55);
  border-color: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(22px) saturate(170%) contrast(1.04);
  backdrop-filter: blur(22px) saturate(170%) contrast(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(255, 255, 255, .14),
    0 12px 40px rgba(22, 34, 46, .14);
}
.nav.scrolled .nav-logo { height: 42px; }
html.measuring * { transition: none !important; }
.nav-brand {
  display: inline-flex;
  align-items: center;
}
.nav-logo {
  height: 50px;
  width: auto;
}
.nav-links {
  position: relative;
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
/* the pill: a soft glass lozenge that glides behind the label of the section
   on screen (main.js measures the link and moves it); hidden over the hero
   where no section is active yet */
.nav-pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2.1rem;
  width: 0;
  border-radius: 999px;
  background: rgba(46, 67, 86, .09);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -50%);
  transition: transform .95s cubic-bezier(.22, 1, .36, 1), width .95s cubic-bezier(.22, 1, .36, 1), opacity .4s var(--ease);
  z-index: 0;
}
.nav-links a { position: relative; z-index: 1; }
.nav:not(.scrolled) .nav-pill {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.nav-links a {
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  text-decoration: none;
  padding-block: .25rem;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .35s var(--ease), color .2s;
}
.nav-links a:hover {
  color: var(--deep-slate);
  background-size: 100% 1px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--deep-slate);
  transition: transform .35s var(--ease), opacity .2s;
}
.nav:not(.scrolled) .nav-links a { color: rgba(226, 231, 235, .9); }
.nav:not(.scrolled) .nav-links a:hover { color: #fff; }
.nav:not(.scrolled) .nav-toggle span { background: #E9ECEE; }

.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* Mobile overlay menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background:
    linear-gradient(160deg, rgba(46, 67, 86, .55), rgba(22, 34, 46, .62)),
    rgba(27, 40, 54, .35);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  display: grid;
  place-items: center;
}
.menu[hidden] { display: none; }
.menu nav {
  display: grid;
  gap: 1.5rem;
  text-align: center;
}
.menu a {
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -0.008em;
  color: var(--alabaster);
  text-decoration: none;
}
.menu a:hover { color: #fff; }
/* keep the close button reachable above the overlay */
body.menu-open .nav { z-index: calc(var(--z-menu) + 1); }
body.menu-open .nav .nav-inner {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.menu-open .nav-toggle span { background: var(--alabaster); }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: #14202C; /* holds the frame while the photograph loads */
}
.hero-media {
  position: absolute;
  inset: 0;
}
.hero-media img {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%; /* headroom for the scroll drift */
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(.92) contrast(1.02);
  will-change: transform;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 25, 34, .44), transparent 22%),
    linear-gradient(100deg, rgba(16, 25, 34, .78) 0%, rgba(16, 25, 34, .5) 50%, rgba(16, 25, 34, .26) 100%),
    linear-gradient(0deg, rgba(16, 25, 34, .38), transparent 42%);
}
/* film grain, matching the photographic bands */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero-inner {
  width: 100%;
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vh, 3.5rem));
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto auto;
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(1.5rem, 4vh, 2.5rem);
}
.hero-logo {
  grid-column: 1 / 7;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  width: clamp(170px, 19vw, 268px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .97;
}
/* while the floating logo is active, the in-flow logo is only a spacer */
html.dock .hero-logo { visibility: hidden; }

.hero-title {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  color: #F4F3F2;
  font-size: clamp(2.4rem, 6.2vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: nowrap; /* the line breaks are authored, not balanced */
}
.hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
.hero-line > span { display: block; }
.hero-line-muted { color: rgba(213, 220, 226, .75); }

.hero-aside {
  grid-column: 1 / 7;
  grid-row: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.6vh, 1.75rem);
  border-top: 1px solid rgba(229, 228, 226, .3);
  padding-top: clamp(1.25rem, 3vh, 1.75rem);
  margin-top: .25rem;
}
.hero-sub {
  max-width: 46ch;
  font-size: 1.0625rem;
  color: rgba(233, 233, 232, .9);
}


/* hero load-in */
@media (prefers-reduced-motion: no-preference) {
  .hero-line > span {
    animation: lineUp 1.15s var(--ease-expo) both;
  }
  .hero-line:nth-child(1) > span { animation-delay: .16s; }
  .hero-line:nth-child(2) > span { animation-delay: .27s; }
  .hero-line:nth-child(3) > span { animation-delay: .38s; }
  /* on the children, not the wrapper: a finished CSS animation with
     fill:both outranks inline styles and would block the scroll-out tween */
  .hero-sub { animation: rise 1s var(--ease-expo) both; }
  .hero-sub { animation-delay: .58s; }
}
@keyframes lineUp {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Short laptop viewports: the hero is one screen, so it compresses rather
   than pushing the call to action below the fold. */
@media (max-height: 820px) and (min-width: 761px) {
  .hero-inner {
    padding-top: 4.5rem;
    padding-bottom: 2.5rem;
    row-gap: 1.25rem;
  }
  .hero-logo { width: clamp(150px, 15vw, 200px); }
  .hero-title { font-size: clamp(2rem, 4.3vw, 3.5rem); }
  .hero-sub { font-size: 1.0625rem; }
}
@media (max-height: 660px) and (min-width: 761px) {
  .hero-logo { width: clamp(130px, 12vw, 165px); }
  .hero-title { font-size: clamp(1.8rem, 3.5vw, 2.75rem); }
  .hero-sub { font-size: 1rem; }
}

/* ---------- Floating brand (hero center -> nav slot, scroll-driven) ------- */
.brand-float {
  display: none;
  position: fixed;
  z-index: 45; /* above nav, below menu overlay */
  transform-origin: 0 0;
  will-change: transform;
  visibility: hidden;
}
html.dock .brand-float { display: block; }
html.dock .brand-float.ready {
  visibility: visible;
  animation: fadein .8s var(--ease) both;
}
.brand-float img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .97;
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* the nav slot only measures the target position while docking is active */
html.dock .nav-logo { visibility: hidden; }
/* menu overlay: floating logo is covered; show the nav slot in white instead */
body.menu-open .brand-float { visibility: hidden !important; }
html.dock body.menu-open .nav-logo,
body.menu-open .nav-logo {
  visibility: visible;
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: .82rem 1.85rem;
  border: 1px solid rgba(255, 255, 255, .26);
  color: #F4F4F3;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .022em;
  text-decoration: none;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .02)),
    rgba(255, 255, 255, .035);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 10px 30px rgba(10, 18, 26, .14);
  transition: background .45s var(--ease-expo), color .3s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease), transform .2s var(--ease);
}
.btn:hover {
  background: rgba(247, 247, 246, .94);
  color: #24384A;
  border-color: rgba(255, 255, 255, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 38px rgba(10, 18, 26, .2);
}
.btn:active { transform: scale(.98); }

/* ---------- Sections ------------------------------------------------------ */
.section { padding-block: var(--section-y); }
.section-tint { background: var(--bg-tint); }

.section-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-head h2, .evolution h2 {
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.12;
}
.lede {
  max-width: 46rem;
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: var(--slate);
}

.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.25em; }

.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin-bottom: 2.5rem;
}

/* ---------- About: a manifesto that inks in word by word ------------------- */
/* Owner, 2026-09-25: the sticky title + three paragraphs "layout chelou, on
   se fait chier". The opening statement is now set at display scale across
   the width and read in: each word rises from a faint state to ink as the
   paragraph crosses the reading band (main.js, opacity only). The two
   remaining paragraphs follow as prose on the right. */
.about {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.about h2 {
  grid-column: 1 / 9;
  margin: 0 0 clamp(2rem, 4.5vw, 3.25rem);
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.12;
}
.about-lede {
  grid-column: 1 / 12;
  margin: 0;
  font-size: clamp(1.5rem, 2.75vw, 2.4rem);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--display);
  text-wrap: pretty;
}
.about-lede .w { white-space: nowrap; }
/* the rest of the copy as two balanced columns flush with the manifesto's
   edges (the single right-hand column was rejected: "je n'aime pas du tout") */
.about-prose {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.about-prose p { margin: 0; max-width: 52ch; }
.about-prose p:nth-child(1) { grid-column: 1 / 6; }
.about-prose p:nth-child(2) { grid-column: 7 / 12; }

/* ---------- Statement / photo bands --------------------------------------- */
.band {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
}
.band-img {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%; /* headroom for the parallax drift */
  object-fit: cover;
  filter: saturate(.9) contrast(1.04);
  will-change: transform;
}
/* fine grain, bounded to the photographic bands only */
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.band-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 34, 45, .38), rgba(23, 34, 45, .58));
}
/* Measured under the glyphs on the live site: the paragraphs over the brighter
   photographs sat at 3.97 to 4.39 against the 4.5 the text size requires. The
   ramp is deeper on the left, where the copy lives, and barely moved on the
   right, where the photograph is the subject. */
.band-scrim-deep {
  background: linear-gradient(90deg, rgba(23, 34, 45, .88) 0%, rgba(23, 34, 45, .64) 55%, rgba(23, 34, 45, .38) 100%);
}

/* ---------- Focus: three sectors, one band -------------------------------- */
/* Owner, 2026-09-25: "j'aimais bien comme c'était présenté avant avec le
   frosted liquid glass, applique ça aux trois pans". Every sector is the
   same full-bleed band: photograph with parallax drift, deep scrim, the name
   and paragraphs in alabaster, the two facts in a dark frosted-glass panel. */
.band-focus {
  margin: 0;
  /* One sector per screen in the STATIC grammar too. This is what a visitor
     with "Reduce motion" switched on in macOS gets, and what a very zoomed
     window gets: at 70vh with an 18vh overlap two sectors shared one screen
     and the section read as a broken stack rather than the designed
     sequence. Full height means the screen still changes sector by sector as
     you scroll, without any of the motion the setting asks us to drop. The
     live stage overrides this (min-height 0) and is unaffected. */
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(2rem, 6vh, 4rem);
}
/* the facade is a portrait source: show the concrete, not the empty sky */
.band-img-low { object-position: center 78%; }

/* Seamless sectors. Static grammar (no JS, phones, reduced motion): each band
   overlaps the previous one by 18vh and fades in through a top mask, so the
   photographs dissolve into each other instead of meeting on a hard edge. */
.focus-stage { position: relative; }
.fx + .fx {
  margin-top: -18vh;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 18vh);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 18vh);
}
/* Live grammar (desktop, JS): the stage pins for 250vh and the three bands
   sit on top of each other; main.js crossfades photograph, scrim and panel
   from one sector to the next as the page scrolls. */
.focus-stage.fx-live { height: 100vh; height: 100svh; overflow: hidden; }
.fx-live .fx {
  position: absolute;
  inset: 0;
  margin: 0;
  min-height: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.fx-live .fx + .fx .band-img,
.fx-live .fx + .fx .band-scrim,
.fx-live .fx + .fx .band-content > * { opacity: 0; }
/* The panel itself never carries opacity: WebKit paints a backdrop-filter
   child of a semi-transparent ancestor as a milky rectangle (the "petit
   cadre translucide" the owner saw). Its parts animate one by one instead. */
/* No will-change and no transform on text here: a composited text layer is
   what Safari flashed as a "highlighted" rectangle, and a transformed text
   over the composited photograph is what it kept as a ghost. The parts are
   relative boxes and travel by top. */
.fx-live .band-content > * { position: relative; }

/* In the live stages the frosted glass is FAKED: a blurred copy of the
   frame's own photograph, sized to the viewport and offset by the panel's
   position (main.js sets --gx/--gy), so the panel shows exactly what sits
   behind it. WebKit re-snapshots a real backdrop-filter while the panel's
   opacity animates and paints flashing translucent rectangles; a plain
   blurred layer never does. The static grammar keeps the real glass. */
.fx-live .facts-light {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
}
.fx-live .facts-light::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(-1 * var(--gx, 0px));
  top: calc(-1 * var(--gy, 0px));
  width: 100vw;
  height: 100vh;
  /* the dark layer is what carries the facts: at .38 they measured 2.35
     against the 4.5 their size needs over the pale facade */
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)),
    linear-gradient(var(--glass-fill, rgba(16, 25, 34, .58)), var(--glass-fill, rgba(16, 25, 34, .58))),
    var(--glass-photo);
  background-size: cover;
  background-position: var(--glass-pos, center);
  /* the blur is baked into the image: no filter, no transform, no layer */
}
#technology .facts-light { --glass-photo: url("../assets/img/glass-technology.jpg"); --glass-fill: rgba(16, 25, 34, .54); }
#resources .facts-light { --glass-photo: url("../assets/img/glass-resources.jpg"); --glass-fill: rgba(16, 25, 34, .50); }
#estate .facts-light { --glass-photo: url("../assets/img/glass-estate.jpg"); --glass-pos: center 78%; --glass-fill: rgba(16, 25, 34, .66); }
/* the blended grain over live stages forces Safari to re-blend every layer
   change beneath it: off while the stage is live */
.fx-live .fx::after { display: none; }
.fx-live .band-img { top: 0; height: 100%; }

/* The section title is the sequence's first frame, set on the first
   photograph in the same alabaster as the sector names. */
.section-focus { padding-block: 0; } /* the veils carry the edges; padding here read as "espace trop grand" */
.fx-head h2 {
  color: #F4F3F2;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.12;
}
.fx-head .lede { color: rgba(233, 233, 232, .84); max-width: 46rem; }

/* The stage opens like the statement band it replaced: the first frame
   starts as a rounded panel inset in the page ground and widens to full
   bleed (main.js clips the whole frame by scroll). At the
   bottom a veil in the page ground fades in during the last beat so the
   last photograph dissolves into the light section that follows. */
.fx-exit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36vh;
  z-index: 4;
  pointer-events: none;
  /* eased ramp: the photograph thins slowly, then gives way (a linear ramp
     read as a hard band, "trop démarqué") */
  background: linear-gradient(to bottom, rgba(237, 237, 236, 0) 0%, rgba(237, 237, 236, .28) 38%, rgba(237, 237, 236, .74) 70%, var(--bg) 100%);
}
.fx-live .fx-exit { opacity: 0; }
/* on the home the stage hands over to the dark contact band: the facade
   dissolves into deep slate, not into the page ground */
.fx-exit-dark { background: linear-gradient(to bottom, rgba(46, 67, 86, 0) 0%, rgba(46, 67, 86, .28) 38%, rgba(46, 67, 86, .74) 70%, var(--deep-slate) 100%); }
/* a page opener: the single frame fills the first screen */
.band-page { min-height: 100vh; min-height: 100svh; padding-top: var(--nav-h); }
.page-sub .nav:not(.scrolled) .nav-links a { color: var(--ink); }
/* The foot line: in flow on the light ground when static; when live, a
   full-width line pinned to the bottom of the stage over the last
   photograph, faded in and out by the timeline. */
.fx-foot {
  position: relative;
  z-index: 6;               /* above the static exit veil */
  background: var(--bg);
  padding-top: clamp(2rem, 5vw, 3.5rem);
}
.fx-foot-title {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--slate);
  margin: 0 0 .5rem;
}
.fx-foot p:last-child { font-size: 1rem; line-height: 1.6; margin: 0; max-width: none; }
.fx-live .fx-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding-top: clamp(3rem, 9vh, 6rem);
  padding-bottom: clamp(2rem, 7vh, 4.5rem);
  /* its own scrim, fading to nothing upwards so there is no edge: the line
     crosses the brightest part of the facade and measured 2.77 against 4.5 */
  background: linear-gradient(to top, rgba(18, 27, 36, .90) 0%, rgba(18, 27, 36, .74) 45%, rgba(18, 27, 36, .34) 75%, rgba(18, 27, 36, 0) 100%);
  opacity: 0;
  color: rgba(233, 233, 232, .92);
}
.fx-live .fx-foot-title { color: #F4F3F2; }
.band-content {
  position: relative;
  width: 100%;
  max-width: var(--container);
  padding-block: clamp(4rem, 8vw, 6.5rem);
  color: #E9E9E8;
}
.band-content h3 {
  color: #F4F3F2;
  font-size: clamp(1.55rem, 2.6vw, 2.125rem);
  margin-bottom: 1.25rem;
}
.band-content p { max-width: 54ch; }
.band-content p + p { margin-top: 1.25em; }

/* facts list, dark frosted glass over the photograph */
.facts {
  margin-top: 2rem;
  padding: .75rem 1.75rem;
  border-radius: 22px;
}
.facts > div {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.5rem;
  padding-block: 1.125rem;
}
.facts > div + div { border-top: 1px solid var(--hairline); }
.facts dt {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--slate);
}
.facts dd { font-size: .9375rem; }
.facts-light {
  max-width: 40rem;
  border: 1px solid rgba(255, 255, 255, .16);
  /* the fill carries the legibility of everything inside the panel: at .26 the
     facts over the pale facade measured 2.35 against the 4.5 their size needs */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02)),
    rgba(16, 25, 34, .52);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 18px 50px rgba(8, 14, 20, .25);
}
.facts-light > div + div { border-top-color: rgba(229, 228, 226, .18); }
.facts-light dt { color: rgba(229, 228, 226, .78); }
.facts-light dd { color: #EDEDEC; }
.facts-light .ext { text-decoration-color: rgba(229, 228, 226, .45); }
.facts-light .ext:hover { color: #fff; }


/* ---------- Approach: lit sea, three white frosted cards in a stair ------- */
/* Owner, 2026-09-25: the single dark panel was "trop répétitif, trop terne,
   trop foncé"; she wants the principles to arrive one after another. So:
   a BRIGHT photograph (a silver daylight sea, sea-bright.jpg; lifting the
   night sea only got it from 19 to 29 mean luminance), a light scrim toward
   the page ground, ink text, and the three principles as WHITE frosted
   cards with ink text, laid out as a stair climbing left to right; the
   stage timeline staggers their arrival (main.js). Same grammar, inverted
   material: the one luminous stage between two dark ones. */
/* the bright stage: a silver sea lifted toward the page ground, ink text */
.band-scrim-lumen {
  background: linear-gradient(180deg, rgba(237, 237, 236, .10), rgba(237, 237, 236, .26));
}
.fx-lumen .band-content h2 { color: var(--display); }
.fx-lumen .band-content .lede { color: var(--slate); }
.fx.fx-lumen::after { opacity: .18; }
.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
}
.pcard { margin-top: 0; padding: 1.5rem 1.6rem 1.6rem; }
.pcard > div { grid-template-columns: 1fr; gap: .6rem; padding-block: 0; }
.pcard dt { font-size: 1.125rem; font-weight: 500; color: var(--display); }
.pcard dd { font-size: .9688rem; color: var(--ink); }
/* live: the cards wait for their timed entrance (main.js), one after another */
.fx-live .principles .pcard { opacity: 0; }

/* white frosted glass (the light variant of the dark facts panel) */
.facts-lumen {
  border: 1px solid rgba(255, 255, 255, .55);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .70), rgba(255, 255, 255, .42)),
    rgba(255, 255, 255, .30);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 18px 50px rgba(8, 14, 20, .16);
}
.fx-live .facts-lumen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
}
.fx-live .facts-lumen::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(-1 * var(--gx, 0px));
  top: calc(-1 * var(--gy, 0px));
  width: 100vw;
  height: 100vh;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .50)),
    var(--glass-photo);
  background-size: cover;
  background-position: var(--glass-pos, center);
}
#approach .facts-lumen { --glass-photo: url("../assets/img/glass-principles-light.jpg"); }

/* ---------- Evolution ------------------------------------------------------ */
/* Owner, 2026-09-25: "on se fait vraiment trop chier" on the old title +
   prose + quoted lines. The three shifts are now the piece: set at display
   scale across the full width, and read as transitions: while a line
   crosses the reading band the left half dims and the right half inks in
   (main.js), so the evolution the section describes happens on the page.
   Head and outro sit on the page's 5/7 grid; no rule, no box. */
.evo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: start;
}
.evo h2 { grid-column: 1 / -1; margin: 0; font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1.12; }
/* head and outro read the traditional way: under the title, on the left
   (the paragraphs pushed to the right column read as "n'importe comment") */
.evo-intro { grid-column: 1 / 8; margin: 1.5rem 0 0; color: var(--slate); font-size: 1.125rem; max-width: 60ch; }
.shift {
  grid-column: 1 / -1;
  list-style: none;
  margin: clamp(3.5rem, 8vw, 6rem) 0 0;
  padding: 0;
  display: grid;
  row-gap: clamp(.9rem, 2.2vw, 1.6rem);
}
.shift-line {
  font-size: clamp(1.7rem, 2.9vw, 2.75rem); /* the longest line stays on one line ("Construction sur la même ligne") */
  font-weight: 300;
  letter-spacing: -.028em;
  line-height: 1.08;
  color: var(--display);
}
.shift-from, .shift-to { color: var(--display); } /* no-JS: both inked; the scrub sets the states */
@media (min-width: 960px) { .shift-line { white-space: nowrap; } }
.evo-outro { grid-column: 1 / 8; margin: clamp(3rem, 7vw, 5rem) 0 0; max-width: 60ch; }

.nowrap { white-space: nowrap; }

/* ---------- Last big moves: three glass-fronted video plates --------------- */
/* Owner, 2026-09-26: smaller plates, "un côté liquid glass comme le reste".
   One screen: the title in ink, then three 3:4 video plates side by side in
   the container (radius 22), one per move, the loops running together. At
   the foot of each plate a frosted-glass caption (the facts-panel material,
   over the MOVING video: that is where the glass actually reads as liquid)
   carries year, sector and title; the paragraph sits under the plate in ink
   on the page ground. Plates wipe in from the left in turn on arrival. */
.moves-tri {
  min-height: 100vh;
  min-height: 100svh;
  /* one full-width column: an implicit auto track sizes to max-content, which
     shrank the whole section to the width of one plate and floated it in the
     middle of the page (measured 397px inside 834px at tablet width) */
  grid-template-columns: minmax(0, 1fr);
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vh, 2.5rem));
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
  display: grid;
  align-content: start;
}
/* .container carries margin-inline: auto, and an auto margin on a grid item
   cancels the stretch: the box falls back to shrink-to-fit and the section
   drifted to the middle of the page. Give it the width back; max-width and
   the auto margins then behave as they do in every other section. */
.moves-tri > .container { width: 100%; }
.tri-title {
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.12;
}
.tri-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.tri {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: var(--deep-slate);
  color: #E9E9E8;
  margin: 0 0 1.25rem;
  aspect-ratio: 3 / 4;
  max-height: calc(100svh - var(--nav-h) - 19rem); /* the paragraph must stay on screen */
  min-height: 18rem;
  width: 100%;
}
.tri-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tri-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 34, 45, .10) 0%, rgba(23, 34, 45, .10) 55%, rgba(23, 34, 45, .34) 100%);
}
/* the glass caption: dark frosted glass over the moving video */
.tri-glass {
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .75rem;
  margin: 0;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)),
    rgba(16, 25, 34, .30);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 14px 40px rgba(8, 14, 20, .22);
}
.tri .mv-year {
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1;
  color: #F4F3F2;
  font-variant-numeric: tabular-nums;
  margin: 0 0 .5rem;
  white-space: nowrap;
}
.tri .mv-dash { color: rgba(233, 233, 232, .6); font-weight: 300; margin-inline: .02em; }
.tri .mv-sector {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .875rem;
  color: rgba(233, 233, 232, .8);
  margin: 0 0 .45rem;
}
.tri .mv-sector::before {
  content: "";
  width: 10px;
  height: 9px;
  background: rgba(229, 228, 226, .85);
  clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%);
}
.tri h3 {
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.2;
  color: #F4F3F2;
  margin: 0;
}
.tri .ext { color: inherit; text-decoration-color: rgba(229, 228, 226, .45); }
.tri .ext:hover { color: #fff; }
.tri-item .mv-text { font-size: .9375rem; line-height: 1.6; max-width: 36ch; margin: 0; color: var(--ink); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tri-glass { background: rgba(16, 25, 34, .8); }
}
@media (prefers-reduced-transparency: reduce) {
  .tri-glass { background: rgba(16, 25, 34, .85); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Leadership ----------------------------------------------------- */
/* Two people, one screen, nothing between them and the page: the subjects
   are cut out of their studio ground and stand directly on the band, their
   busts dissolving into the surface through a bottom mask (no tile, no
   frame, no shadow, no edge anywhere). Pierre-Yves at the far left, Agathe
   at the far right looking inward, the two texts held between them.
   ONE grid for both people (the persons are display: contents), so the two
   names share a row and a baseline, the two roles share the next row, the
   two bios the last; the figures span the three rows and sit on the same
   bottom line. Names and roles never wrap: the grid reaches past the
   container edges (negative inline margin) to buy the text its width. */
.people {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr clamp(2rem, 5vw, 5rem) 1fr minmax(0, 15rem);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-inline: calc(-1 * clamp(0rem, 4vw, 4rem));
  align-items: baseline;
}
.person, .person-body { display: contents; }
.person-media {
  grid-row: 1 / 4;
  align-self: end;
  aspect-ratio: 4 / 5;
  margin: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, 0) 100%);
}
.person:nth-child(1) .person-media { grid-column: 1; }
.person:nth-child(2) .person-media { grid-column: 5; }
.person:nth-child(1) h3, .person:nth-child(1) .person-role, .person:nth-child(1) p { grid-column: 2; }
.person:nth-child(2) h3, .person:nth-child(2) .person-role, .person:nth-child(2) p { grid-column: 4; }
.person h3 { grid-row: 1; }
.person .person-role { grid-row: 2; }
.person p:not(.person-role) { grid-row: 3; align-self: start; }
/* Portraits ship untouched: no grade, no filter, no transform on the pixels. */
.person-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  display: block;
}
.person h3 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.06;
  margin: 0 0 .4rem;
  white-space: nowrap;
}
.person-role {
  font-size: 1rem;
  font-weight: 400;
  color: var(--slate);
  margin: 0 0 1.1rem;
  white-space: nowrap;
}
.person p:not(.person-role) { font-size: .9375rem; line-height: 1.65; max-width: 36ch; }

/* ---------- Contact / footer ----------------------------------------------- */
.contact {
  background: var(--deep-slate);
  color: var(--alabaster);
  /* the same distance as from the note to the footer line (owner, 2026-09-25) */
  padding-top: calc(clamp(4rem, 8vw, 6.5rem) - .45rem);
}
.contact h2 {
  color: #F4F3F2;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.12;
}
.contact-mail {
  position: relative;
  isolation: isolate;
  display: inline-block;
  margin-top: 2.25rem;
  padding: 1rem 2.3rem;
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: .012em;
  color: #F4F3F2;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .26);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)),
    rgba(255, 255, 255, .035);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 10px 30px rgba(8, 14, 20, .18);
  transition: background .45s var(--ease-expo), color .3s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease), transform .2s var(--ease);
  overflow-wrap: anywhere;
}
.contact-mail:hover {
  background: rgba(247, 247, 246, .94);
  color: #24384A;
  border-color: rgba(255, 255, 255, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 38px rgba(8, 14, 20, .24);
}
.contact-mail:active { transform: scale(.985); }
.contact-note {
  margin-top: 2.25rem;
  max-width: 46rem;
  color: rgba(233, 233, 232, .82);
}

.footer {
  margin-top: clamp(4rem, 8vw, 6.5rem);
  border-top: 1px solid var(--hairline-light);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem;
}
.footer-logo {
  height: 56px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .95;
}
.footer-right { display: grid; justify-items: end; row-gap: .35rem; text-align: right; }
.footer-credit {
  font-size: .875rem;
  color: rgba(244, 243, 242, .92);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: rgba(229, 228, 226, .4);
  transition: text-decoration-color .35s var(--ease);
}
.footer-credit:hover { text-decoration-color: currentColor; }
.footer-note { font-size: .8125rem; color: rgba(233, 233, 232, .78); }

/* ---------- Glass fallbacks ------------------------------------------------ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.scrolled .nav-inner { background: rgba(238, 239, 239, .97); }
  .menu { background: #24384A; }
  .btn { background: rgba(28, 42, 56, .92); }
  .facts-light { background: rgba(16, 25, 34, .8); }
  .contact-mail { background: rgba(255, 255, 255, .14); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav.scrolled .nav-inner {
    background: rgba(238, 239, 239, .98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .menu { background: #24384A; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn { background: rgba(28, 42, 56, .95); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .facts-light { background: rgba(16, 25, 34, .85); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .contact-mail { background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Reveals -------------------------------------------------------- */
/* Motion primitives. Content is visible by default: GSAP sets the "from"
   state at runtime, so no-JS and headless renders never ship blank. */
.rv-mask {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.rv-i { display: block; }
[data-rv="media"] { overflow: hidden; }
[data-rv="media"] img { transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .hero-line > span, .hero-sub { animation: none; }
}

/* ---------- Responsive ----------------------------------------------------- */
@media (max-width: 960px) {
  .people { grid-template-columns: 1fr; row-gap: 3rem; }
  .about { grid-template-columns: 1fr; }
  .about h2, .about-lede, .about-prose { grid-column: 1; }
  .about-prose { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .about-prose p:nth-child(1), .about-prose p:nth-child(2) { grid-column: 1; }
  .evo { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .evo h2, .evo-intro, .evo-outro { grid-column: 1; }
  .evo-outro { margin-top: clamp(2rem, 6vw, 3.5rem); }
  .principles { grid-template-columns: 1fr; row-gap: 1rem; }
  .tri-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  /* one column: the plate keeps its 3:4 portrait but must not grow to the
     width of the page, or a single plate is taller than the screen (measured
     767x1023 at tablet width once the section was given its real width) */
  .tri { max-height: none; max-width: 26rem; }
  .tri-item .mv-text { max-width: 46ch; }
  .people { grid-template-rows: none; margin-inline: 0; }
  .person { display: grid; grid-template-columns: 1fr; row-gap: .75rem; }
  .person-body { display: block; }
  /* these must match the specificity of the desktop placement rules above
     (.person:nth-child(n) ...), or the second person keeps grid-column 5 and
     lands in an implicit column: measured 142px of text at 390px wide */
  .person:nth-child(1) .person-media, .person:nth-child(2) .person-media,
  .person:nth-child(1) h3, .person:nth-child(2) h3,
  .person:nth-child(1) .person-role, .person:nth-child(2) .person-role,
  .person:nth-child(1) p, .person:nth-child(2) p,
  .person p:not(.person-role) { grid-column: auto; grid-row: auto; }
  .person-media { max-width: 13rem; }
  .person h3, .person-role { white-space: normal; }
  .person p:not(.person-role) { max-width: 46ch; }
  .band-scrim-deep { background: rgba(23, 34, 45, .62); }
}

@media (max-width: 760px) {
  /* the stacked focus bands overlap by a negative margin; on a phone the
     incoming heading landed 24px on top of the previous sector's glass
     panel, so the band keeps a little more room under its content */
  .band-content { padding-bottom: calc(clamp(4rem, 8vw, 6.5rem) + 18vh); }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .hero-inner { row-gap: 1.35rem; grid-template-rows: auto 1fr auto auto; }
  .hero-logo { grid-column: 1 / -1; width: clamp(150px, 44vw, 210px); }
  .hero-title { grid-row: 3; font-size: clamp(1.4rem, 7.6vw, 2.5rem); }
  .hero-aside { grid-column: 1 / -1; grid-row: 4; }
  .facts > div { grid-template-columns: 1fr; gap: .375rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-right { justify-items: start; text-align: left; }
}