/* Experative — built to brand/DESIGN_LANGUAGE.md and brand/WEB_COMPOSITION.md.
   Eight tokens, no hue. Hierarchy is weight, size and ground.
   Paper ground, ink text, --rule hairlines. The footer is the one --deep surface
   on the page, and --rule-dim is used there alone. Revised 2026-09-04.
   Wayfinding is Manrope Light, lowercase, self-hosted and subset — 2026-09-08. */

@font-face{
  font-family:Manrope;                  /* SIL Open Font License — assets/fonts/OFL.txt */
  src:url(assets/fonts/manrope-light.woff2) format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
}

:root{
  --ink:#000000;
  --deep:#111111;
  --paper:#FFFFFF;
  --wash:#F5F5F7;
  --sec:#6E6E73;
  --ter:#86868B;
  --rule:#D2D2D7;
  --rule-dim:#2E2E32;

  --pad:clamp(24px,5vw,88px);
  --radius:20px;                        /* web value; decks and documents use 12px */

  --sans:"Avenir Next","Avenir","Nunito Sans","Segoe UI",system-ui,sans-serif;
  --label:Manrope,"Avenir Next",Avenir,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16.5px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
svg{display:block}

/* ---------------------------------------------------------------- wayfinding */
.label{
  font:300 12.5px/1.4 var(--label);
  letter-spacing:.005em;
  color:var(--ter);
}
.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:22px}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--ter);flex:none}

/* ---------------------------------------------------------------- nav */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:22px var(--pad);flex-wrap:wrap;
}
.nav>a{flex:none}                        /* the wordmark link — bare, never boxed */
.nav ul{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav ul a{                               /* only nav ITEMS are boxed */
  display:block;padding:9px 15px;
  border:1px solid var(--rule);border-radius:999px;
  font:300 12.5px/1 var(--label);letter-spacing:.005em;
  color:var(--ter);
}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--ink);border-color:var(--ter)}

/* The wordmark is an outlined-path SVG, inlined once per page as a <symbol> and
   drawn through <use>. It inherits currentColor, so a theme swap stays a token
   change, and it renders under http:// and file:// alike. Bare, never boxed. */
.wordmark{display:block}
.nav .wordmark{width:128px;height:31px;color:var(--ink)}

/* the bare `ea` glyphs as the running mark, top right — the tile is discarded, per
   DESIGN_LANGUAGE §1. Never boxed, and never the same size as the wordmark. */
.nav .mark{width:28px;height:auto;aspect-ratio:1000/561;color:var(--ink);flex:none}
/* when the nav wraps, the wordmark and the mark hold the top row and the items drop
   below full-width, so the mark stays top right at every size */
@media (max-width:760px){
  .nav .mark{order:2}
  .nav ul{order:3;width:100%}
}

/* ---------------------------------------------------------------- lattice */
.lattice{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0 var(--pad) 0;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;                       /* cells share edges; corners stay round */
}
.cell{
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:clamp(28px,4vw,54px);
  min-height:250px;
  display:flex;flex-direction:column;
}
.cell:nth-child(2n){border-right:0}
.lattice>.cell:nth-last-child(-n+2){border-bottom:0}
.cell.low{justify-content:flex-end}      /* content sits low — the Isomorphic move */
.cell.tall{min-height:390px}

/* the one element per screen that breaks its cell — the hero photograph.
   It overhangs the lattice's outer edge and the cell's top edge only; it never
   reaches into the headline cell. The figure is taken out of flow so the row
   height stays with the text. The overhang is 8% of the cell but never more
   than the page margin less 16px, so it cannot leave the viewport on wide screens. */
.lattice.hero{overflow:visible}
.cell.breakout{position:relative;overflow:visible;padding:0}
.cell.breakout>figure{
  position:absolute;left:0;right:0;bottom:0;top:calc(-1 * clamp(16px,2.5vw,32px));
  margin:0;display:flex;flex-direction:column;
}
.cell.breakout img{width:calc(100% + min(8%, var(--pad) - 16px));max-width:none}
@media (max-width:760px){
  .cell.breakout>figure{position:relative;top:0;right:auto;bottom:auto;left:0}
  .cell.breakout img{width:100%;flex:none;height:auto;aspect-ratio:4/3}
}

/* the industries lattice — four columns on named areas; the lead vertical spans
   two and is the accent on this screen. Border logic is per area, not nth-child. */
.lattice.industries{
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(220px,19vw,330px);
  grid-template-areas:
    "intro    coatings coatings biologics"
    "cellgene flavour  metalam  concrete";
}
.lattice.industries>.cell{
  min-height:0;padding:clamp(24px,3vw,44px);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.c-intro{grid-area:intro}
.c-coatings{grid-area:coatings}
.c-biologics{grid-area:biologics}
.c-cellgene{grid-area:cellgene}
.c-flavour{grid-area:flavour}
.c-metalam{grid-area:metalam}
.c-concrete{grid-area:concrete}
.lattice.industries>.c-biologics,
.lattice.industries>.c-concrete{border-right:0}
.lattice.industries>.c-cellgene,
.lattice.industries>.c-flavour,
.lattice.industries>.c-metalam,
.lattice.industries>.c-concrete{border-bottom:0}
@media (max-width:1100px){
  .lattice.industries{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:auto;                 /* rows follow the 16:9 media below, not a fixed height */
    grid-template-areas:
      "intro    biologics"
      "coatings coatings"
      "cellgene flavour"
      "metalam  concrete";
  }
  .lattice.industries>.cell{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .lattice.industries>.c-biologics,
  .lattice.industries>.c-coatings,
  .lattice.industries>.c-flavour,
  .lattice.industries>.c-concrete{border-right:0}
  .lattice.industries>.c-metalam,
  .lattice.industries>.c-concrete{border-bottom:0}
  .lattice.industries>.c-intro{min-height:220px}
}
@media (max-width:760px){
  .lattice.industries{
    grid-template-columns:1fr;
    grid-template-areas:"intro" "coatings" "biologics" "cellgene" "flavour" "metalam" "concrete";
  }
  .lattice.industries>.cell{border-right:0;border-bottom:1px solid var(--rule)}
  .lattice.industries>.c-concrete{border-bottom:0}
}

/* an odd-numbered lattice: the final cell spans both columns so the grid still closes
   flush. Used by the thirteen solution entries. */
.lattice.odd>.cell:last-child{grid-column:1/-1;border-right:0}
.lattice.odd>.cell:not(:last-child){border-bottom:1px solid var(--rule)}
.lattice.odd>.cell:last-child{border-bottom:0}

/* the numbers strip on About — five cells, all sourced counts from the SD portfolio
   review. tabular-nums per the deck spec's metric idiom (DESIGN_LANGUAGE §3). */
.lattice.numbers{grid-template-columns:repeat(5,minmax(0,1fr))}
.lattice.numbers>.cell{border-right:1px solid var(--rule);border-bottom:0;min-height:0;padding:clamp(20px,2.5vw,32px) clamp(20px,2vw,26px)}
.lattice.numbers>.cell:last-child{grid-column:auto;border-right:0}
.metric{font:300 45px/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);margin:0 0 10px}
.lattice.numbers .body{font-size:13.5px;line-height:1.5;margin:0}
@media (max-width:900px){
  .lattice.numbers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lattice.numbers>.cell:nth-child(3n){border-right:0}
  .lattice.numbers>.cell:last-child{grid-column:auto}
}
@media (max-width:640px){
  .lattice.numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lattice.numbers>.cell:nth-child(2n){border-right:0}
  .lattice.numbers>.cell:nth-child(3n){border-right:1px solid var(--rule)}
  .lattice.numbers>.cell:last-child{grid-column:1/-1;border-right:0}
}

/* the solutions list — full-width rows, media left, offer right. Not a lattice: a
   list of thirteen reads better as a stack than as a grid, and the media needs the
   full row height to earn a left column instead of a lattice cell's fixed crop. */
.solutions-list{border-top:1px solid var(--rule);margin:0 var(--pad)}
.solution-row{
  display:grid;grid-template-columns:minmax(220px,340px) 1fr;
  gap:clamp(24px,4vw,56px);align-items:start;
  padding:clamp(28px,4vw,48px) 0;border-bottom:1px solid var(--rule);
}
.solution-row:last-child{border-bottom:0}
.solution-media{margin:0;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.solution-media video,.solution-media img.still{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
}
.solution-media img.poster{display:none}          /* shown only when motion is reduced — mirrors .media */
@media (prefers-reduced-motion:reduce){
  .solution-media video{display:none}
  .solution-media img.poster{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
}
.solution-media.pending{background:var(--wash)}
.solution-media .pending-fill{aspect-ratio:4/3;width:100%}
.solution-media figcaption{border-top:1px solid var(--rule);margin:0}
.solution-text{display:flex;flex-direction:column}
.solution-text h3{margin:0 0 12px}
.solution-text .offer{color:var(--sec);max-width:56ch;margin:0 0 20px}
@media (max-width:760px){
  .solution-row{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- roadmap */
/* Five stacked stages, each a hairline row: the stage label sits left, the title,
   body and the stage photograph sit right. Not a lattice: the odd count reads better
   as a list here than as a spanning grid cell. */
.roadmap{border-top:1px solid var(--rule);margin:0 var(--pad)}
.roadmap-stage{
  display:grid;
  grid-template-columns:108px minmax(0,1fr) clamp(190px,20vw,260px);
  gap:clamp(20px,3vw,44px);align-items:start;
  padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--rule);
}
.roadmap-stage:last-child{border-bottom:0}
.roadmap-num{padding-top:4px}
.roadmap-body h3{margin-bottom:10px}
.roadmap-body .body{max-width:56ch;margin:0}
@media (max-width:900px){
  .roadmap-stage{grid-template-columns:108px minmax(0,1fr)}
  .roadmap-media{grid-column:2}          /* image drops under the text, not under the label */
}
@media (max-width:640px){
  .roadmap-stage{grid-template-columns:1fr}
  .roadmap-num{padding-top:0}
  .roadmap-media{grid-column:auto}
}

/* each roadmap stage carries a photograph of an industrial workflow the stage helps in,
   in place of the six-node diagram that was here until 2026-09-09. */
.roadmap-media{margin:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.roadmap-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){.roadmap-media{margin-top:18px;max-width:320px}}

/* scroll reveal. Driven by a 15-line IntersectionObserver in the page, which sets
   .js-reveal on <html> before first paint. Without that class — no JavaScript, script
   blocked, or an error — every rule below is inert and the stages are simply visible,
   so content never depends on the script. Scroll-driven CSS (animation-timeline) was
   tried first and dropped on 2026-09-08: Safari 18.x does not support it, so the
   effect was invisible in the browser this site is reviewed in. */
.js-reveal .roadmap-stage{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
.js-reveal .roadmap-stage.in{opacity:1;transform:none}

/* the photograph settles a beat after its stage, so the eye reads the words first */
.js-reveal .roadmap-stage .roadmap-media{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease .12s,transform .6s cubic-bezier(.22,.61,.36,1) .12s;
}
.js-reveal .roadmap-stage.in .roadmap-media{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js-reveal .roadmap-stage,
  .js-reveal .roadmap-stage .roadmap-media{
    opacity:1;transform:none;transition:none;
  }
}

/* ---------------------------------------------------------------- tagline */
.tagline{max-width:none;text-align:center;font-size:clamp(30px,5vw,54px)}
.section-head:has(.tagline){padding:clamp(40px,6vw,80px) var(--pad);text-align:center}
.section-head:has(.tagline) .cta{margin:0 auto}

/* ---------------------------------------------------------------- media cells */
.lattice.industries>.cell.clip{padding:0}
.media{margin:0;flex:1;min-height:0;display:flex;flex-direction:column}
.media video{flex:1;min-height:0;width:100%;height:100%;object-fit:cover;display:block}
.media img.poster{display:none}          /* shown only when motion is reduced */
.media img.still{display:block;flex:1;min-height:0;width:100%;height:100%;object-fit:cover}
                                          /* a cell with no usable clip carries a still */
video,img.poster,img.still,.fig-photo img{filter:grayscale(1)}   /* the files are greyscale; this holds it */
@media (prefers-reduced-motion:reduce){
  .media video{display:none}
  .media img.poster{display:block;flex:1;min-height:0;width:100%;height:100%;object-fit:cover}
}
/* below the desktop layout the rows are no longer fixed (see .lattice.industries), so the
   media keeps its own 16:9 frame instead of being cropped to a letterbox. The double-width
   coatings cell keeps the row height with a 32:9 frame while it spans two columns, and
   returns to 16:9 in the single column. */
@media (max-width:1100px){
  .media video,.media img.poster,.media img.still{flex:none;height:auto;aspect-ratio:16/9}
  .c-coatings .media video,.c-coatings .media img.poster{aspect-ratio:32/9}
}
@media (max-width:760px){
  .c-coatings .media video,.c-coatings .media img.poster{aspect-ratio:16/9}
}

/* ---------------------------------------------------------------- type */
h1,h2,h3{font-weight:100;margin:0;letter-spacing:-.015em;line-height:1.06}
h1{font-size:clamp(38px,6.4vw,74px)}
h2{font-size:clamp(28px,4vw,46px)}
h3{font-size:19px;font-weight:500;letter-spacing:-.008em;line-height:1.3}   /* 500, not 600: nothing
                                             out-weighs the one heavy word in a title (2026-09-08) */
b{font-weight:500}                        /* the one heavy word per title — Medium, matching "ative" in the wordmark (2026-09-05) */
p{margin:0 0 15px}
.lede{font-size:clamp(17px,1.7vw,22px);color:var(--sec);max-width:52ch;font-weight:400}
.body{color:var(--sec);max-width:62ch}
.body strong{color:var(--ink);font-weight:500}
.gap{flex:1;min-height:44px}              /* the deliberate vertical gap */

/* ---------------------------------------------------------------- prose columns */
.prose{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vw,72px);
  padding:clamp(48px,7vw,104px) var(--pad);
}
@media (max-width:760px){.prose{grid-template-columns:1fr}}
.prose h3{margin-bottom:14px;font-weight:100;font-size:clamp(24px,3vw,34px);letter-spacing:-.015em}

/* ---------------------------------------------------------------- figures */
figure{margin:0}
figcaption{                                /* captions sit BELOW, never on the image */
  margin-top:14px;
  font:300 12.5px/1.5 var(--label);
  letter-spacing:.005em;color:var(--ter);
}

/* a clip standing in for a photograph inside a .fig-photo figure. Without these the
   poster <img> stacks underneath the <video> and the subject appears twice. Same
   contract as .media and .solution-media: poster hidden, shown only under reduced
   motion. Added 2026-09-09 after exactly that bug on the About page. */
.fig-photo video{display:block;width:100%;height:auto}
.fig-photo.wide video{aspect-ratio:21/9;object-fit:cover}
.fig-photo img.poster{display:none}
@media (prefers-reduced-motion:reduce){
  .fig-photo video{display:none}
  .fig-photo img.poster{display:block}
}

/* photographs: the image fills its box, the caption sits beneath it inside the cell */
.fig-photo{margin:0;display:flex;flex-direction:column}
.fig-photo img{width:100%;height:100%;object-fit:cover;display:block;flex:1;min-height:0}
.fig-photo.wide img{flex:none;height:auto;aspect-ratio:21/9}
.media figcaption,.cell .fig-photo figcaption{
  margin:0;padding:14px 18px;border-top:1px solid var(--rule);
}
.media figcaption{min-height:calc(1.5 * 12.5px + 28px)}      /* one caption line + padding, so the
                                                             hairline sits at one height across a row.
                                                             Every current caption fits one line at 375,
                                                             768 and 1440 — verified 2026-09-08. Raise
                                                             the multiplier if a longer caption is added. */

/* ---------------------------------------------------------------- product tour */
/* A recorded walkthrough of the interface. The frame was composed in CSS, then captured
   frame by frame through the DevTools protocol and encoded, so what ships is a real
   video file rather than a live animation. tools/record_tour.py rebuilds it, and the
   composition it records is kept in tools/tour_frame.html. Silent, looping, greyscale
   and captioned below, like every other clip on the site. */
.tour{
  position:relative;width:100%;border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;background:var(--paper);
}
.tour video{display:block;width:100%;height:auto;aspect-ratio:1600/1004}
.tour img.poster{display:none}
@media (prefers-reduced-motion:reduce){
  .tour video{display:none}
  .tour img.poster{display:block;width:100%;height:auto;aspect-ratio:1600/1004}
}

/* the tour sits full width under the hero */
.tour-fig{margin:0}
.tour-fig figcaption{margin-top:14px}

/* a section head with its intro paragraph carried to the right instead of beneath */
.head-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:end;
  padding:0 var(--pad);margin-bottom:clamp(30px,4vw,54px);
}
.head-split .body{margin:0;max-width:52ch}
@media (max-width:900px){.head-split{grid-template-columns:1fr;align-items:start}}

/* ---------------------------------------------------------------- status badge */
/* Marks how far a solution has been taken. DESIGN_LANGUAGE §5 permits uppercase here;
   it is set sentence case instead, so the site keeps no uppercase anywhere. Weight and
   ink carry the hierarchy — "demonstrated" is the only one set in --ink. */
.badge{
  display:inline-block;align-self:flex-start;
  font:300 11.5px/1 var(--label);letter-spacing:.01em;
  color:var(--ter);border:1px solid var(--rule);border-radius:4px;padding:6px 10px;
}
.badge.is-demonstrated{color:var(--ink);border-color:var(--ter)}

/* ---------------------------------------------------------------- button */
.cta{display:inline-flex;align-items:stretch}
.cta span,.cta i{
  border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font:300 12.5px/1 var(--label);letter-spacing:.005em;
  color:var(--ink);font-style:normal;
}
.cta span{padding:15px 22px;border-radius:var(--radius) 0 0 var(--radius);border-right:0}
.cta i{padding:15px 19px;border-radius:0 var(--radius) var(--radius) 0}
.cta:hover span,.cta:hover i{border-color:var(--ter)}

/* ---------------------------------------------------------------- sections */
section{padding:clamp(52px,8vw,116px) 0}
.section-head{padding:0 var(--pad);margin-bottom:clamp(30px,4vw,54px);max-width:calc(70ch + 2 * var(--pad))}   /* 70ch of content; the padding sits outside it */

/* ---------------------------------------------------------------- footer — the one deep surface */
footer{
  position:relative;overflow:hidden;
  background:var(--deep);color:var(--paper);
  border-top:1px solid var(--rule-dim);
  padding:clamp(48px,7vw,96px) var(--pad) 40px;
  margin-top:clamp(48px,7vw,96px);
}
footer .wordmark{width:min(420px,72vw);aspect-ratio:4058/980;color:var(--paper)}
.footer-meta{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:38px;
}

/* ---------------------------------------------------------------- wordmark ground */
.ground{
  position:absolute;left:-120px;bottom:-64px;width:1520px;max-width:none;
  color:var(--ink);opacity:.042;pointer-events:none;z-index:0;
}
footer .ground{color:var(--paper);opacity:.06}   /* .06 on deep, per DESIGN_LANGUAGE §1 */
.ground-host{position:relative;overflow:hidden}
.ground-host>*:not(.ground){position:relative;z-index:1}

/* ---------------------------------------------------------------- responsive */
/* About: original team photographs, framed individually without changing the files. */
.skip-link{position:absolute;left:var(--pad);top:8px;transform:translateY(-200%);z-index:10;background:var(--paper);padding:12px 20px;border:1px solid var(--ink)}
.skip-link:focus{transform:none}
a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
footer a:focus-visible{outline-color:var(--paper)}
.about-intro{padding-top:clamp(36px,5vw,72px);padding-bottom:0}
.about-intro .section-head{max-width:calc(76ch + 2 * var(--pad))}
.about-intro .lede{margin-top:28px;max-width:57ch}
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.5vw,40px);margin:0 var(--pad)}
.team-member{min-width:0}
.team-portrait{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--wash);border-radius:var(--radius)}
.team-portrait img{position:absolute;display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.portrait-daniel img{width:113%;height:113%;left:-6.76%;top:-8.45%;object-position:52% 50%}
.portrait-maximilian img{width:180%;height:180%;left:-40.8%;top:-45.6%}
.portrait-raphael img{width:235%;height:235%;left:-66.15%;top:-51.3%}
.portrait-tom img{object-position:52% 50%}
.team-copy{padding:24px 0 0}
.team-focus{color:var(--sec);margin-bottom:10px;min-height:35px}
.team-copy h2{font-size:clamp(19px,1.65vw,26px);font-weight:500;line-height:1.25;letter-spacing:-.015em;margin-bottom:16px}
.team-copy .body{font-size:15px;line-height:1.65;margin:0}
.about-achievement{padding-bottom:0}
.achievement-panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);margin:0 var(--pad);padding:clamp(30px,4.5vw,64px);border:1px solid var(--rule);border-radius:var(--radius);background:var(--wash)}
.achievement-heading .eyebrow{color:var(--sec)}
.achievement-heading h2{font-size:clamp(28px,3.2vw,44px)}
.achievement-award{margin:28px 0 0;font-size:15px;font-weight:500}
.achievement-copy{align-self:center}
.achievement-copy .body:last-child{margin-bottom:0}
.about-vision{padding-bottom:0}
.about-vision .head-split{margin-bottom:0;align-items:start}
.vision-copy .cta{margin-top:28px}
@media (max-width:1100px){
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
  .team-focus{min-height:0}
  .team-copy h2{font-size:24px}
}
@media (max-width:760px){
  .achievement-panel{grid-template-columns:1fr}
}
@media (max-width:540px){
  .team-grid{grid-template-columns:1fr;gap:40px}
  .team-copy{padding-top:20px}
  .team-copy .body{font-size:16px}
}

@media (max-width:760px){
  .lattice{grid-template-columns:1fr}
  .cell{border-right:0}
  .lattice>.cell:nth-last-child(-n+2):not(:last-child){border-bottom:1px solid var(--rule)}
  .cell.tall{min-height:0}
}