/* ============================================================
   Monarch — homepage design layer.
   One page, one stylesheet. Everything the page needs is here;
   index.html carries no <style> block of its own.

   Four flat bands, top to bottom: the hero footage, the body teal
   carrying the two programme tiles, the same teal under the partner
   row, and the charcoal footer. Three colours and one typeface.
   ============================================================ */

/* iOS Safari inflates text in some containers on rotation unless this is
   pinned; without it a landscape iPhone can reflow mid-page. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Two typefaces, both served locally so first render does not wait on a
   third-party font host. The type system is mZero's (assets/site.css there):
   Neue Haas Grotesk Display for every heading and all prose, IBM Plex Mono
   for labels and navigation. Only the faces in use ship: Light for display
   headings, Roman for text, Medium for <strong>. Nothing on the site is bold. */
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Regular-Latin1-v2.5.0.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("../fonts/HaasGrotDispR-45Light.woff2") format("woff2");font-weight:200 300;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("../fonts/HaasGrotDispR-55Roman.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display Pro";src:url("../fonts/HaasGrotDispR-65Medium.woff2") format("woff2");font-weight:500 600;font-style:normal;font-display:swap}

:root{
  /* The colours of the page, read off the design comp (Monarch.ai, artboard 2).
       --brand-teal  what the hero footage's ground is graded to
       --teal-deep   the graded clip's top edge -- the hero's own background,
                     so nothing shows through before the poster paints
       --teal-body   the body fill; it is also what the graded clip's bottom
                     edge averages to, which is why the hero meets it without a
                     visible seam
       --band        the charcoal the page closes on */
  --brand-teal:#419293;
  --teal-deep:#296061;
  --teal-body:#46a5a6;
  --band:#222222;

  --ink:#ffffff;
  --ink-legal:#999999;

  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Neue Haas Grotesk Display Pro","Neue Haas Grotesk Text Pro","Haas Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Type scale: mZero's, value for value (2026-09-17, J: "adopt the text
     styling from mzero -- only the text styling and sizing", the colours
     stay Monarch's). The roles:
       --fs-display  the page title and the hero line   Haas Light 300
       --fs-body     all prose, fixed at 18px            Haas Roman 400
       --fs-tile     the tile copy, mZero's card sub-line
       --fs-micro    the legal line                      mono
     The menu links, footer links and tile names are mono caps at --fs-body,
     so the four move together. */
  --fs-display:clamp(36px,5vw,64px);
  --fs-body:18px;
  --fs-tile:clamp(15px,1.25vw,18px);
  --fs-micro:15px;

  /* Content column for the footer and the skip link. */
  --shell:1190px;
  --gutter:clamp(20px,4vw,64px);

  --ease:cubic-bezier(.16,.8,.3,1);
}

@media (prefers-reduced-motion: no-preference){
  html:focus-within{scroll-behavior:smooth}
}
@media (prefers-reduced-motion: reduce){
  html,html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

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

body{
  margin:0;
  background:var(--band);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{max-width:100%}

a{color:inherit}

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

.shell{
  max-width:calc(var(--shell) + 2 * var(--gutter));
  margin:0 auto;
  padding-inline:var(--gutter);
}

/* Visible only to screen readers, for the skip link. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip:focus-visible{
  position:fixed;top:12px;left:12px;z-index:60;width:auto;height:auto;
  clip:auto;margin:0;padding:10px 16px;
  background:var(--band);color:var(--ink);
  font-size:13px;
}

/* ===================== masthead ===================== */
/* The wordmark sits over the footage rather than in a bar, with the menu
   button at the right-hand gutter and nothing else. The masthead itself lets
   clicks through to the page; only the mark and the menu take them. */
.masthead{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:center;
  /* The comp sets the letters 92px down at 1920 wide. */
  --masthead-top:calc(clamp(30px,4.8vw,92px) + env(safe-area-inset-top, 0px));
  padding-top:var(--masthead-top);
  padding-inline:var(--gutter);
  pointer-events:none;
}
.masthead-mark{display:block;pointer-events:auto}
.masthead-mark:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
/* 310px wide at 1920 in the comp, the wings hanging below the letters. */
.masthead img,
.footer-mark{
  display:block;
  width:clamp(190px,16.15vw,310px);
  height:auto;
}

/* ===================== menu ===================== */
/* Two bars at the right-hand gutter, level with the letters of the mark.
   Pressed, the bars turn into a cross and the two links drop in beneath them,
   right-aligned, white, at the body size, straight on the page -- there is no
   panel behind them. site.js toggles it; without the script the links stay
   hidden and the same ones are in the footer. */
.menu{
  position:absolute;
  top:var(--masthead-top);
  right:var(--gutter);
  display:flex;flex-direction:column;align-items:flex-end;
  pointer-events:auto;
}
.menu-toggle{
  --bar-gap:clamp(8px,.62vw,12px);
  --bar-size:clamp(22px,1.25vw,24px);
  /* Three quarters of the stroke of the mark's letters (which is 2.9px at
     the mark's 310px): .007 of its width, so 2.2px at 1920 and 1.3px on a
     phone. J tried the full stroke (too heavy) and half (too thin). */
  --bar-h:calc(clamp(190px,16.15vw,310px) * .007);
  position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:var(--bar-gap);
  width:var(--bar-size);height:var(--bar-size);
  /* The button is small, so its hit area is padded out to 44px. */
  padding:calc((44px - var(--bar-size)) / 2);
  box-sizing:content-box;
  margin:0;border:0;background:none;
  cursor:pointer;
  /* The pair is centred on the letters' midline: the letters run from the
     top of the mark to 27.5px down at 310px wide, so their centre is
     .048 of the mark's width below its top, and the 44px button is centred
     on that. */
  margin-top:calc(clamp(190px,16.15vw,310px) * .048 - 22px);
  /* ...snapped to a whole pixel where the browser can, so both bars start on
     a device-pixel boundary and render the same weight. Browsers without
     round() keep the line above. */
  margin-top:round(calc(clamp(190px,16.15vw,310px) * .048 - 22px), 1px);
  margin-right:calc(-1 * (44px - var(--bar-size)) / 2);
}
.menu-toggle span{
  display:block;height:var(--bar-h);height:round(var(--bar-h), 1px);width:100%;
  background:var(--ink);border-radius:1px;
  transition:transform .3s var(--ease);
}
/* The two bars close on the centre and cross. */
.menu.open .menu-toggle span:first-child{transform:translateY(calc((var(--bar-gap) + var(--bar-h)) / 2)) rotate(45deg)}
.menu.open .menu-toggle span:last-child{transform:translateY(calc(-1 * (var(--bar-gap) + var(--bar-h)) / 2)) rotate(-45deg)}
.menu-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
/* On dense screens the snap is to the device pixel, not the CSS pixel, so a
   1.3px bar becomes 4 device pixels on a 3x phone rather than collapsing to
   1px. */
@media (min-resolution:2dppx){
  .menu-toggle{margin-top:round(calc(clamp(190px,16.15vw,310px) * .048 - 22px), .5px)}
  .menu-toggle span{height:round(var(--bar-h), .5px)}
}
@media (min-resolution:3dppx){
  .menu-toggle{margin-top:round(calc(clamp(190px,16.15vw,310px) * .048 - 22px), calc(1px / 3))}
  .menu-toggle span{height:round(var(--bar-h), calc(1px / 3))}
}
/* The open menu is mZero's mobile card: a charcoal panel with a hairline
   edge, 12px corners and a soft shadow, dropped 10px under the button and
   anchored to its right edge, the links stacked inside it with the arrow at
   the far side. It fades and slides 8px into place where the browser has
   @starting-style, and simply appears where it does not. */
.menu-links{
  position:absolute;top:calc(100% + 10px);right:0;z-index:1;
  display:flex;flex-direction:column;align-items:stretch;gap:2px;
  min-width:clamp(200px,12.5vw,240px);
  padding:8px 6px 12px;
  background:#141416;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  box-shadow:0 24px 44px rgba(0,0,0,.5);
  opacity:1;transform:none;
  transition:opacity .2s ease,transform .2s ease,display .2s allow-discrete;
}
@starting-style{
  .menu-links{opacity:0;transform:translateY(-8px)}
}
.menu-links[hidden]{display:none;opacity:0;transform:translateY(-8px)}
/* The footer nav's size and tracking, so the two read as the same voice. */
.menu-links a{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:13px 14px;
  border-radius:8px;
  color:var(--ink);
  font-family:var(--mono);
  font-size:var(--fs-body);
  line-height:1.3;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s ease;
}
.menu-links a:hover{background:rgba(255,255,255,.06)}
.menu-links a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.menu-arrow{display:block;height:.6em;width:auto;flex:none}

/* ===================== hero ===================== */
/* The clip fills the first screen edge to edge, plays once, and holds its last
   frame. The footage is a macro already
   cropped by its own frame, so covering costs nothing: it crops a little more
   off whichever axis is long, and on a phone it keeps the moth's body rather
   than showing a thin strip. */
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:var(--teal-deep);
}
/* Fallback for browsers without svh: 100vh is close enough and only affects
   the first paint on mobile toolbars. */
@supports not (height:100svh){ .hero{min-height:100vh} }

.hero-media{
  position:absolute;
  inset:0;
  /* The poster also sits behind the element as a background. Calling play()
     drops the element's own poster attribute, and with no decoded frame yet
     the element paints nothing -- which reads as a black flash. */
  background:var(--teal-deep) url("hero-poster.jpg") center/cover no-repeat;
}
.hero-media video{
  display:block;width:100%;height:100%;
  object-fit:cover;
  /* Fades up over the poster once a frame has actually been decoded, so a
     phone that never loads the footage simply keeps the poster. */
  opacity:0;
  transition:opacity .5s ease;
}
.hero-media video.ready{opacity:1}

/* Once the moth has left the frame (10.9s in, measured off the clip) site.js
   marks the hero done and the footage fades out. What it fades onto is the
   clip's own last frame, rebuilt as a gradient: the stops are that frame's row
   averages at 0, 25, 50 and 72% of its height (#2a6162, #377f80, #43989a,
   #48a5a6), so the only thing the fade removes is the horizontal vignette and
   the grain. The bottom stop is the body teal, so the hero still meets the
   section below without a seam. The poster and the deep-teal ground are
   swapped out under the still-opaque video first, so nothing else shows through. */
/* Two layers over the vertical gradient rebuild the lens falloff as well: the
   frame is lighter through its centre (#4fafba against a #469ca7 row average
   at mid-height) and darker at both edges (#347879). */
.hero.done,
.hero.done .hero-media{
  background:
    radial-gradient(ellipse 60% 80% at 50% 62%, rgba(120,220,245,.24), rgba(120,220,245,0) 72%),
    radial-gradient(ellipse 100% 130% at 50% 60%, rgba(0,35,36,0) 38%, rgba(0,35,36,.42) 100%),
    linear-gradient(to bottom,
      var(--teal-deep) 0%, #377f80 25%, #43989a 50%, var(--teal-body) 72%, var(--teal-body) 100%);
}
.hero.done .hero-media video{opacity:0;transition:opacity 1.6s ease}

/* The graded clip's bottom edge is a horizontal vignette -- #398384 at the
   corners against #4fb6b7 in the middle, averaging to the body teal -- so a
   flat colour butted against it would seam at both ends. This fade absorbs the
   difference over the last sliver of the frame. */
.hero-media::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:22%;
  background:linear-gradient(to bottom, rgba(70,165,166,0), var(--teal-body));
  pointer-events:none;
}

.hero-line{
  position:absolute;z-index:10;left:0;right:0;
  /* The comp centres the two lines a little below the middle of the frame:
     583px down a 1064px hero. */
  top:54.8%;transform:translateY(-50%);
  margin:0;
  padding-inline:var(--gutter);
  margin-inline:auto;
  /* mZero's hero line (.ah-q on its homepage), value for value: Plex Mono,
     17 to 20px, regular, 1.6 line-height, centred in a 900px measure. At 20px
     the question is about 620px long, so it holds to one line. */
  max-width:min(900px, 92vw);
  font-family:var(--mono);
  font-size:clamp(17px,1.9vw,20px);
  font-weight:400;
  letter-spacing:0;
  line-height:1.6;
  text-align:center;
  text-wrap:balance;
  color:var(--ink);
  /* No shadow or glow: plain white, as the comp sets it. */
}

/* A hairline dropping out of the frame: the only scroll cue on the page.
   The comp draws it from 931 to 1023 in a 1064px hero. */
.hero-cue{
  position:absolute;z-index:10;left:50%;
  bottom:clamp(28px,4vh,44px);
  width:1px;height:clamp(52px,8.6vh,92px);
  background:linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,.3));
  transform:translateX(-50%);
  pointer-events:none;
}

/* ===================== the body ===================== */
/* Flat body teal from the foot of the hero to the footer. No section carries a
   background of its own, so no seam can appear between them. */
main{background:var(--teal-body)}
.page-mission main{background:transparent}

/* ===================== the two programme tiles ===================== */
/* The comp at 1920: tiles 1576 x 876 (172px in from each side), 118px below
   the hero, 148px apart, 28px corners, and 270px of air before the partner
   caption. Everything here is a fraction of the viewport so it holds at any
   width, with the phone sizes below. */
.programs{
  padding-block:clamp(48px,6.15vw,118px) 0;
}
.tiles{
  display:flex;flex-direction:column;
  gap:clamp(40px,7.7vw,148px);
  margin:0;
  padding:0 clamp(20px,8.96vw,172px);
  list-style:none;
}
/* The slot holds the tile's place in the flow while the tile itself is
   scaled, so the zoom never pulls the sections after it up and down. */
.tile-slot{display:block}
.tile{
  position:relative;
  display:block;
  aspect-ratio:1576 / 876;
  border-radius:clamp(16px,1.46vw,28px);
  overflow:hidden;
  background:#1a1a1a;
  color:var(--ink);
  text-decoration:none;
  /* Zooms in from the bottom: scaled about its own bottom centre, so the
     bottom edge holds and the tile grows upward into the viewport. */
  transform-origin:50% 100%;
  /* Safari rounds the corners of a transformed, overflow-hidden box only
     with this; without it the video ignores the radius mid-zoom. */
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);
}
.tile--light{background:#c9c9c9;color:#222222}
.tile-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
/* pZero's clip is delivered black-and-grey in the file itself (see
   docs/EDITING.md), not filtered here -- a filter on a playing video costs on
   phones and is not applied to the poster by every browser. */

/* The text sits in the lower-left, as the comp draws it: 55px in from the
   left edge and 74px up from the bottom on a 1576px tile. */
.tile-text{
  position:absolute;left:0;bottom:0;
  padding:0 clamp(18px,3.5cqw,56px) clamp(20px,4.7cqw,74px) clamp(18px,3.5cqw,56px);
  max-width:min(100%,calc(var(--tile-copy-max,474px) + 2 * clamp(18px,3.5cqw,56px)));
}
.tile{container-type:inline-size}
/* The footer nav's size and tracking (mono caps at the body size), so the
   programme names read as the same voice as the links to them. */
.tile-label{
  margin:0 0 clamp(12px,1.4cqw,22px);
  font-family:var(--mono);
  font-size:var(--fs-body);
  letter-spacing:.06em;
  text-transform:uppercase;
}
/* mZero's card sub-line: 15 to 18px Haas Roman at 1.5. */
.tile-copy{
  margin:0;
  font-size:var(--fs-tile);
  line-height:1.5;
  text-wrap:pretty;
}
/* The same arrow as the menu's (assets/arrow.svg, inlined), in the tile's
   own text colour. */
.tile-arrow{
  display:block;
  margin-top:clamp(14px,1.7cqw,26px);
  height:clamp(13px,1.25cqw,20px);width:auto;
}
/* mZero's clip runs from mid-grey to near-black under the text; a soft
   darkening at the foot keeps the white copy readable at every frame. */
.tile--dark::after{
  content:"";position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
}
/* pZero's beetles are dark on a pale ground and cross the lower third; the
   same guard in reverse keeps the dark copy readable when one passes behind. */
.tile--light::after{
  content:"";position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(to top, rgba(222,222,222,.85), rgba(222,222,222,0));
  pointer-events:none;
}
.tile-text{z-index:1}
@media (prefers-reduced-motion: no-preference){
  .tile-arrow{transition:transform .4s var(--ease)}
}
.tile:hover .tile-arrow,
.tile:focus-visible .tile-arrow{transform:translateX(6px)}
.tile:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ---- the push/zoom in from the bottom ----
   As a tile travels from just below the viewport to a little under half way
   up it, it scales from .62 to 1 about its bottom edge. The progress is the
   scroll position itself, so scrolling back down reverses it. With
   scroll-driven animations this is one declaration; without them site.js sets
   the same transform from a scroll handler (see .tile.js-zoom). Neither runs
   where motion is unwelcome. */
@keyframes tile-rise{
  from{transform:scale(.62) translateY(6%)}
  to{transform:none}
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .tile{
      animation:tile-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 42%;
    }
  }
  .tile.js-zoom{will-change:transform}
}

/* ===================== partners ===================== */
/* The row runs as a marquee. Where motion is unwelcome it wraps to a static
   block instead. */
.partners{
  /* The comp: 270px from the second tile to the caption at 1920. */
  padding-block:clamp(72px,14vw,270px) clamp(88px,8.4vw,160px);
}
.partners-note{
  margin:0 auto clamp(44px,4.4vw,84px);
  padding-inline:var(--gutter);
  max-width:calc(780px + 2 * var(--gutter));
  /* mZero's partner caption (.partners-note on its homepage): mono, 13px,
     1.6 line-height, a touch of tracking. Colour stays Monarch's. */
  font-family:var(--mono);
  font-size:13px;
  line-height:1.6;
  letter-spacing:.02em;
  /* Held at .84 because below that it stops holding on the teal. */
  color:rgba(255,255,255,.84);
  text-align:center;text-wrap:balance;
}
.partners-marquee{
  overflow:hidden;
  /* Nothing enters or leaves the row at a hard edge. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.partners-track{display:flex;width:max-content;animation:partners-run 64s linear infinite}
/* Half the gap on each side, so the seam between two copies measures the same
   as the gaps inside one. */
.partners-row{
  display:flex;align-items:center;gap:clamp(48px,5.4vw,84px);
  margin:0;padding:0 clamp(24px,2.7vw,42px);list-style:none;
}
/* The marks ship as white line-art on transparent; brightness(0) takes any
   colour to black, so they come down to dark artwork on the teal without a
   second set of files. */
.partners-row a{display:block}
.partners-row img{display:block;opacity:.72;filter:brightness(0)}
/* KEMRI has a filled field rather than transparent line-art, so brightness(0)
   would flatten that field into a solid black disc and lose the mark.
   Inverting it takes the seal dark while keeping its ring and lettering
   readable. */
.partners-row .partner-kemri{filter:grayscale(1) invert(1)}
@keyframes partners-run{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion: reduce){
  .partners-track{animation:none;width:auto;justify-content:center;flex-wrap:wrap}
  .partners-track [aria-hidden="true"]{display:none}
  .partners-row{flex-wrap:wrap;justify-content:center;row-gap:28px}
  .partners-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
}

/* ===================== footer ===================== */
/* The mark with teal wings, then the five links spread
   across a row about 2.9x the mark's width with a dot between each pair, then
   the legal line. On a phone the five links form two centred rows, see the 680px rules. */
footer{
  position:relative;z-index:1;
  background:var(--band);
  text-align:center;
  padding-block:clamp(72px,6.8vw,130px) clamp(64px,6.2vw,120px);
  padding-bottom:calc(clamp(64px,6.2vw,120px) + env(safe-area-inset-bottom, 0px));
}
.footer-mark{margin:0 auto}
.footer-nav{
  /* Five links, separated by four dots, centred as one navigation row. */
  display:grid;grid-template-columns:repeat(4,1fr auto) 1fr;
  justify-items:center;align-items:center;
  gap:12px 18px;
  width:min(100% - 2 * var(--gutter), clamp(280px,58vw,1040px));
  margin:clamp(48px,3.8vw,72px) auto 0;
  font-family:var(--mono);
  font-size:var(--fs-body);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.footer-nav a{
  text-decoration:none;
  transition:opacity .25s ease;
}
.footer-nav a:hover{opacity:.7}
.footer-nav span{font-size:.7em;opacity:.8}
.footer-legal{
  margin:clamp(32px,2.6vw,50px) 0 0;
  font-family:var(--mono);
  font-size:var(--fs-micro);
  letter-spacing:0;
  color:var(--ink-legal);
}

/* ===================== the mission page ===================== */
/* One column of text over the wing scales. The comp set it at 26px in a
   856px column with a blank line between paragraphs and the first line 280px
   down at 1920; J found that large against the homepage, so it is set at the
   site's body size (20px at 1920, the footer's) on the same measure -- 33em,
   about 55 characters a line -- which centres a 660px column. The photograph is fixed behind the whole page -- as a
   fixed element carrying an <img>, not background-attachment, which iOS
   ignores -- and the footer is the same charcoal, so the page ends as the
   homepage does. */
.page-mission{background:var(--band)}
.mission-bg{
  position:fixed;inset:0;z-index:0;
  background:var(--band);
  pointer-events:none;
}
.mission-bg img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.mission{
  position:relative;z-index:1;
  /* mZero's reading measure for a lede or an answer: 640px. The FAQ page
     sits on the same column. */
  max-width:calc(640px + 2 * var(--gutter));
  margin:0 auto;
  /* The floor keeps the first line clear of the open menu on a phone, where
     the two links reach about 130px down. */
  padding:clamp(180px,14.6vw,280px) var(--gutter) clamp(120px,9.4vw,180px);
  font-size:var(--fs-body);
  line-height:1.7;
  letter-spacing:0;
}
.mission-text{
  margin:0;
  font-size:1em;
  font-weight:400;
  line-height:inherit;
  letter-spacing:inherit;
}
/* The question leads the page at mZero's page-title size and weight; it had
   been set as a first paragraph, which is how the comp drew it. */
h1.mission-text{
  margin:0 0 clamp(22px,2.8vh,32px);
  font-size:var(--fs-display);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.mission-text + .mission-text{margin-top:14px}
h1.mission-text + .mission-text{margin-top:0}
.mission a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  transition:opacity .25s ease;
}
.mission a:hover{opacity:.7}
.mission a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.nowrap{white-space:nowrap}

/* ===================== frequently asked questions ===================== */
/* mZero's centred column and expandable cards, using Monarch's type and
   charcoal. Native details keep every answer available without JavaScript. */
.page-faq main{background:transparent}
/* The mission page's 640px column, so the two interior pages read at one
   measure; the cards span it and the answers run the card's width. */
.faq-page{
  max-width:calc(640px + 2 * var(--gutter));
  margin:0 auto;
  /* The same top edge as the mission page, so the two titles sit at one
     height when moving between them. */
  padding:clamp(180px,14.6vw,280px) var(--gutter) clamp(120px,9.4vw,180px);
}
.faq-heading{margin-bottom:clamp(44px,5vw,76px)}
/* mZero's page title and lede. */
.faq-heading h1{
  margin:0 0 clamp(22px,2.8vh,32px);
  font-size:var(--fs-display);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.faq-heading p{
  margin:0;
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--ink);
}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-list details{
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
}
.faq-list summary{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:18px 20px;
  list-style:none;
  cursor:pointer;
  border-radius:9px;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.4;
  transition:background-color .15s ease;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::marker{content:""}
.faq-list summary:hover{background:rgba(255,255,255,.03)}
.faq-list summary:focus-visible{outline-offset:3px}
.faq-toggle{
  flex:none;
  width:1em;
  text-align:center;
  font-size:18px;
  color:rgba(255,255,255,.7);
  transition:transform .15s ease;
}
.faq-list details[open] .faq-toggle{transform:rotate(45deg)}
.faq-answer{
  padding:0 20px 20px;
  font-size:var(--fs-body);
  line-height:1.7;
  color:rgba(255,255,255,.88);
  overflow-wrap:break-word;
}
.faq-answer p{margin:0 0 14px}
.faq-answer strong{font-weight:500}
.faq-answer p:last-child{margin-bottom:0}
.faq-answer a{color:var(--ink);text-underline-offset:.2em}
.faq-answer a:hover{text-decoration-thickness:2px}

/* ===================== responsive ===================== */
@media(max-width:820px){
  /* Taller tiles on a narrow screen: the 1.8:1 comp shape would leave the
     clip a thin band and the text with nowhere to sit. */
  .tile{aspect-ratio:4 / 5}
  .tile-text{max-width:100%}
  .partners-row{zoom:.8}
}

@media(max-width:680px){
  .hero-line br{display:none}
  /* Mission / FAQ / Careers, then mZero / pZero, balanced on small screens. */
  .footer-nav{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 8px;width:calc(100% - 2 * var(--gutter))}
  .footer-nav span{display:none}
  .footer-nav a:nth-of-type(-n+3){grid-column:span 2}
  .footer-nav a:nth-of-type(4){grid-column:2 / span 2}
  .footer-nav a:nth-of-type(5){grid-column:4 / span 2}
}
@media(max-width:560px){
  /* mZero's phone size for the same line. */
  .hero-line{font-size:clamp(19px,5.6vw,23px);line-height:1.5}
  .tile-arrow{height:14px}
  /* Phone: the card spans gutter to gutter, as mZero's does, and the links
     step up to 16px. */
  .menu-links{width:calc(100vw - 2 * var(--gutter));min-width:0;top:calc(100% + 32px)}  /* clears the mark's wings */
  .menu-links a{font-size:16px}
  .faq-list summary{padding:18px 16px;gap:16px}
  .faq-answer{padding:0 16px 20px}
}