/* Company pages (Team, Mission & vision, Careers, and the team bios): one dark opening section that carries the page's
   real content, followed by the shared contact and footer. Linked on pages that declare <!--@group:company-->.

   Rules
   - The lede's H1 is the page's primary content, never a generic title in front of it. The eyebrow names the page.
   - No primary button in the lede: the header's "Speak to a consultant" and the shared #talk section carry the call to
     action. .co__acts is optional and for one secondary link only.
   - A label is shown once. A .co-group__h never repeats the eyebrow or a label beside the content; leave the group
     header out when the group holds a single block.

   Markup (pages/team/base.html is the reference)
   <main id="main"><section class="co" aria-labelledby="co-h"><div class="wrap co__in">
     <header class="co__lede">
       <p class="co__k rv">Team</p>                                    eyebrow: the page name
       <h1 class="co__h rv" id="co-h">The primary content.</h1>
       <p class="co__p rv">One line.</p>                               optional label first: <span class="co__lab">Vision</span>
     </header>
     <div class="co__main">
       <section class="co-group" aria-labelledby="g1"><h2 class="co-group__h" id="g1"><span>Label</span><span class="co-group__n" aria-hidden="true">06</span></h2>
         ...one of the components below...</section>
     </div>
     <nav class="co__index" aria-label="Company pages"><span class="co__index-k">Company</span>
       <a href="/team">Team</a><a href="/mission">Mission &amp; vision</a><a href="/careers">Careers</a></nav>
       (aria-current="page" on the current page; aria-current="true" on Team from a bio)
   </div></section></main>

   Layouts
   default        lede and index on the left, content on the right (Team, Careers, bios)
   .co--stack     on the section: the lede runs the full width (for a sentence-length H1), then index left, content right (Mission)

   Per page
   Team      H1 "The people behind Claims Gate." + one line; content: two .co-groups of .co-people (Leadership, Specialists).
   Mission   .co--stack. Eyebrow "Mission & vision"; H1 = the mission sentence; .co__p = the vision sentence with
             <span class="co__lab">Vision</span> before it; content: the six values as .co-rows under a "Values 06" group header.
   Careers   H1 "Fully remote. UK based." + its one line; content: open roles as .co-row--link rows under "Open roles 05",
             then a .co-note on how to apply (company.js names the role in the contact message).
   Bio       .co--bio. Eyebrow "Team"; H1 = name; .co__p = role; content: .co-bio (portrait + text) and .co-bio__nav.

   Components for .co__main
   .co-people (+ --lead)  people as dots: <ul class="co-people" role="list" data-co-stagger><li class="co-person"><a class="co-person__a" href="/team/<slug>/">
                          <span class="co-person__dot"><span class="co-person__i" aria-hidden="true">AB</span><picture>..</picture></span>
                          <span class="co-person__n">Name</span><span class="co-person__r">Role</span></a></li></ul>
   .co-rows               numbered rows (values): <ol class="co-rows" role="list" data-co-stagger><li class="co-row">
                          <span class="co-row__k">01</span><span class="co-row__t">Title</span><span class="co-row__d">Line.</span></li></ol>
   .co-row--link          a row that links (open roles): <li><a class="co-row co-row--link" href="..">
                          <span class="co-row__k">01</span><span class="co-row__t">Role</span><span class="co-row__d co-row__meta">Remote · Full-time</span>
                          <span class="co-row__go">Apply<span class="co-row__arr" aria-hidden="true">&rarr;</span></span></a></li>
   .co-bio                <div class="co-bio"><div class="co-bio__ph rv">(a .co-person__dot)</div><div class="co-bio__body rv">
                          <p class="co-bio__lede">First paragraph.</p><p>..</p></div></div>
                          <nav class="co-bio__nav" aria-label="Team"><a class="co-bio__a" href="/team/">..All team</a>
                          <a class="co-bio__a co-bio__a--next" href="..">Next ..</a></nav>
   [data-co-stagger]      children arrive one after another (company.js); visible without JS and with reduced motion. */

body:has(.co) { background: var(--void); }

.co {
  --co-ink: var(--paper);
  --co-soft: #ffffffb8;
  --co-mute: var(--mute-dark);
  --co-line: #ffffff1c;
  --co-light: #8fb4ff;
  --co-ease: cubic-bezier(.22, .61, .36, 1);
  --co-gap: clamp(2rem, 3vw, 2.75rem);
  position: relative;
  isolation: isolate;
  background: var(--void);
  color: var(--co-ink);
  padding-block: clamp(2rem, 3.6vw, 3.25rem) clamp(3.5rem, 6vw, 5rem);
}
/* A quiet wash of brand blue from the top left: depth without decoration. */
.co::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(72rem 44rem at 0% 0%, rgb(0 98 254 / .09), rgb(0 98 254 / .062) 22%, rgb(0 98 254 / .034) 45%, rgb(0 98 254 / .012) 70%, rgb(0 98 254 / 0));
}
.co ::selection { background: var(--blue); color: #fff; }

.co__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 3.5rem); }
@media (width >= 960px) {
  .co__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 5vw, 4.5rem);
    row-gap: 2.5rem;
  }
  .co__lede { grid-column: 1; grid-row: 1; }
  .co__main { grid-column: 2; grid-row: 1 / span 2; }
  /* the index sits under the lede, so the left column reads as one block */
  .co__index { grid-column: 1; grid-row: 2; align-self: start; }

  .co--stack .co__in { grid-template-rows: auto auto 1fr; }
  .co--stack .co__lede { grid-column: 1 / -1; }
  .co--stack .co__main { grid-row: 2 / span 2; }
  .co--stack .co__index { grid-row: 2; }
}
@media (width >= 1280px) { .co__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

/* Lede: the same eyebrow and display size as the shared contact section, so title and close match. */
.co__k {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  color: #ffffffa8;
}
/* the dot: one person, the brand's motif */
.co__k::before { content: ""; flex: none; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--co-light); }
.co__h {
  margin-top: 1.5rem; max-width: 12ch;
  font-size: var(--step-display); font-weight: 300; line-height: 1; letter-spacing: -.045em;
  text-wrap: balance;
}
.co__p {
  margin-top: 1.5rem; max-width: 34ch;
  font-size: var(--step-1); font-weight: 300; line-height: 1.5; color: var(--co-soft);
  text-wrap: pretty;
}
/* a small mono label in front of a one-line statement (e.g. "Vision") */
.co__lab {
  display: block; margin-bottom: .625rem;
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  color: var(--co-light);
}
.co--stack .co__h { max-width: 19ch; }
.co--stack .co__p { max-width: 40ch; margin-top: 2rem; }
@media (width >= 960px) { .co--stack .co__p { font-size: var(--step-2); line-height: 1.25; letter-spacing: -.02em; color: var(--co-ink); } }

.co__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 2rem; }
.co__link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem;
  color: var(--co-ink); font-size: .9375rem; text-decoration: none;
}
.co__link span:first-child { font-family: var(--mono); color: var(--co-mute); }
.co__link span:last-child { border-bottom: 1px solid #ffffff40; padding-bottom: 1px; transition: border-color .2s; }
.co__link:hover span:last-child { border-color: var(--co-ink); }

/* Company index: the same three links on every company page, the current one marked with the blue dot. */
.co__index { display: grid; max-width: 22rem; }
.co__index-k {
  padding-bottom: .75rem;
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--co-mute);
}
.co__index a {
  display: flex; align-items: center; gap: .875rem; min-height: 2.875rem;
  border-top: 1px solid var(--co-line);
  color: var(--co-soft); font-size: .9375rem; text-decoration: none;
  transition: color .2s;
}
.co__index a:last-child { border-bottom: 1px solid var(--co-line); }
.co__index a::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px #ffffff4d; transition: box-shadow .2s, background-color .2s;
}
.co__index a:hover { color: var(--co-ink); }
.co__index a:hover::before { box-shadow: inset 0 0 0 1px var(--co-ink); }
.co__index a[aria-current] { color: var(--co-ink); }
.co__index a[aria-current]::before { background: var(--co-light); box-shadow: none; }
.co__index a:focus-visible { outline-offset: -2px; }

/* Groups inside the main column */
.co-group + .co-group { margin-top: var(--co-gap); }
.co-group__h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: .875rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--co-line);
  font-family: var(--mono); font-size: var(--step--1); font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: var(--co-mute);
}
.co-group__n { color: #ffffff59; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* People: each person is a dot. Leadership as large portraits; the team as a directory list, a portrait grid on wide screens. */
.co-people { list-style: none; margin: 0; padding: 0; display: grid; }
.co-person { min-width: 0; }
.co-person__a {
  --dot: 52px; --ring: 3px; --bead: 8px;
  position: relative; display: grid; color: inherit; text-decoration: none; border-radius: 10px;
}
.co-person__a:focus-visible { outline: none; }
.co-person__dot {
  position: relative; display: block; width: min(100%, var(--dot)); aspect-ratio: 1;
  border-radius: 50%; background: #171a1f;
}
.co-person__dot picture {
  position: absolute; inset: 0; z-index: 1; display: block; overflow: hidden; border-radius: 50%;
}
.co-person__dot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--co-ease);
}
/* a faint veil takes the glare off the white backdrops on the dark page; it lifts when the person is pointed at */
.co-person__dot picture::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: var(--void); opacity: .1; transition: opacity .4s;
}
.co-person__a:hover .co-person__dot picture::after,
.co-person__a:focus-visible .co-person__dot picture::after { opacity: 0; }
.co-person__i {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; color: var(--co-mute);
}
/* Hover and focus: a light ring draws round the dot and the blue bead of the logo settles at three o'clock. */
.co-person__dot::after {
  content: ""; position: absolute; inset: calc(var(--ring) * -1); z-index: 2; border-radius: 50%;
  border: 1px solid var(--co-light); opacity: 0; transform: scale(.94);
  transition: opacity .3s, transform .45s var(--co-ease);
}
.co-person__dot::before {
  content: ""; position: absolute; z-index: 3;
  width: var(--bead); height: var(--bead); top: calc(50% - var(--bead) / 2); right: calc(var(--ring) * -1 - var(--bead) / 2);
  border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--void);
  opacity: 0; transform: scale(.3); transition: opacity .25s, transform .45s var(--co-ease);
}
.co-person__a:hover .co-person__dot img { transform: scale(1.06); }
.co-person__a:hover .co-person__dot::after,
.co-person__a:focus-visible .co-person__dot::after { opacity: 1; transform: none; }
.co-person__a:hover .co-person__dot::before,
.co-person__a:focus-visible .co-person__dot::before { opacity: 1; transform: none; transition-delay: .08s; }
.co-person__a:focus-visible .co-person__dot::after { border-width: 2px; }
.co-person__a:focus-visible .co-person__n { text-decoration: underline; text-underline-offset: .2em; }
.co-person__n { font-size: .9375rem; font-weight: 400; line-height: 1.3; letter-spacing: -.01em; color: var(--co-ink); }
.co-person__r { font-size: .8125rem; font-weight: 300; line-height: 1.4; color: var(--co-soft); margin-top: .125rem; }

/* Leadership: portraits */
.co-people--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
.co-people--lead .co-person__a { --dot: 112px; --ring: 5px; --bead: 10px; align-content: start; }
.co-people--lead .co-person__dot { margin-bottom: 1rem; }
.co-people--lead .co-person__n { font-size: 1.0625rem; }
.co-people--lead .co-person__r { font-size: .875rem; }
.co-people--lead .co-person__i { font-size: .9375rem; }
@media (width >= 600px) { .co-people--lead { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .co-people--lead .co-person__a { --dot: 136px; } }
/* Two-column layout on laptops: the main column is narrow, so leaders sit two by two with the name beside the portrait. */
@media (960px <= width < 1280px) {
  .co-people--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
  .co-people--lead .co-person__a {
    --dot: 80px; grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: 1rem; align-items: center;
  }
  .co-people--lead .co-person__dot { grid-row: 1 / span 2; margin-bottom: 0; }
  .co-people--lead .co-person__n { align-self: end; }
  .co-people--lead .co-person__r { align-self: start; }
}
@media (width >= 1280px) { .co-people--lead .co-person__a { --dot: 148px; } }

/* Team: a directory of rows */
.co-people:not(.co-people--lead) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); column-gap: 2rem; }
@media (960px <= width < 1280px) { .co-people:not(.co-people--lead) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); } }
.co-people:not(.co-people--lead) .co-person__a {
  grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: 1rem; align-items: center;
  padding-block: .75rem; border-bottom: 1px solid var(--co-line); border-radius: 0;
}
.co-people:not(.co-people--lead) .co-person__dot { grid-row: 1 / span 2; }
.co-people:not(.co-people--lead) .co-person__n { align-self: end; }
.co-people:not(.co-people--lead) .co-person__r { align-self: start; }
@media (width >= 600px) { .co-people:not(.co-people--lead) .co-person__a { --dot: 56px; } }

/* Team on wide screens: portraits in five columns */
@media (width >= 1280px) {
  .co-people:not(.co-people--lead) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
  .co-people:not(.co-people--lead) .co-person__a {
    --dot: 96px; --ring: 4px; --bead: 9px;
    grid-template-columns: none; align-content: start; align-items: start; padding-block: 0; border-bottom: 0;
  }
  .co-people:not(.co-people--lead) .co-person__dot { grid-row: auto; margin-bottom: .875rem; }
  .co-people:not(.co-people--lead) .co-person__i { font-size: .875rem; }
}

/* Bio: the person's portrait as a dot with the ring and bead settled (the state their card shows on hover), then the text. */
.co--bio .co__main { container-type: inline-size; }
.co-bio { display: grid; gap: 2rem; }
.co-bio__ph { --dot: 168px; --ring: 6px; --bead: 12px; width: var(--dot); }
.co-bio__ph .co-person__dot { width: 100%; }
.co-bio__ph .co-person__dot::after,
.co-bio__ph .co-person__dot::before { opacity: 1; transform: none; }
.co-bio__ph .co-person__dot::before { box-shadow: 0 0 0 4px var(--void); }
.co-bio__ph .co-person__i { font-size: 1.25rem; }
@container (width >= 600px) {
  .co-bio { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2rem, 6cqi, 3.5rem); align-items: start; }
  .co-bio__ph { --dot: 184px; }
}
@container (width >= 780px) { .co-bio__ph { --dot: 232px; } }
.co-bio__body { display: grid; gap: 1.125rem; max-width: 62ch; }
.co-bio__body p {
  margin: 0; font-size: var(--step-0); font-weight: 300; line-height: 1.7; color: var(--co-soft);
  text-wrap: pretty;
}
.co-bio__body .co-bio__lede {
  margin-bottom: .375rem;
  font-size: clamp(1.25rem, 1.1rem + .45vw, 1.5rem); line-height: 1.45; letter-spacing: -.015em; color: var(--co-ink);
}
.co-bio__nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--co-line); border-bottom: 1px solid var(--co-line);
}
.co-bio__a {
  display: inline-flex; align-items: center; gap: .75rem; min-height: 3.5rem;
  color: var(--co-soft); font-size: .9375rem; text-decoration: none; transition: color .2s;
}
.co-bio__a:hover { color: var(--co-ink); }
.co-bio__a:focus-visible { outline-offset: 2px; }
.co-bio__k { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--co-mute); }
.co-bio__ar { color: var(--co-light); transition: transform .3s var(--co-ease); }
.co-bio__a:hover .co-bio__ar { transform: translateX(-3px); }
.co-bio__a--next:hover .co-bio__ar { transform: translateX(3px); }

/* Numbered rows (values, open roles) */
.co-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.co-rows > li { min-width: 0; }
.co-row {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: .25rem;
  padding-block: 1.125rem; border-bottom: 1px solid var(--co-line); color: inherit; text-decoration: none;
}
.co-row__k { grid-row: 1 / span 2; padding-top: .2rem; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .08em; color: var(--co-mute); font-variant-numeric: tabular-nums; }
.co-row__t { font-size: 1.0625rem; font-weight: 400; line-height: 1.35; letter-spacing: -.01em; color: var(--co-ink); }
.co-row__d { font-size: .9375rem; font-weight: 300; line-height: 1.5; color: var(--co-soft); max-width: 52ch; }
.co-row__meta { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--co-mute); }
.co-row__go { display: none; }
@media (width >= 760px) {
  .co-row { grid-template-columns: 3rem minmax(0, 13rem) minmax(0, 1fr); column-gap: 1.5rem; align-items: baseline; }
  .co-row__k { grid-row: auto; padding-top: 0; }
}
.co-row--link { grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; min-height: 3.5rem; }
.co-row--link .co-row__go {
  display: inline-flex; align-items: center; gap: .75rem; grid-column: 3; grid-row: 1 / span 2;
  font-size: .875rem; color: var(--co-soft); transition: color .2s;
}
.co-row__arr {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid #ffffff33; color: var(--co-ink);
  transition: background-color .2s, border-color .2s, transform .3s var(--co-ease);
}
.co-row--link:hover .co-row__t, .co-row--link:hover .co-row__go { color: #fff; }
.co-row--link:hover .co-row__arr { background: var(--blue); border-color: var(--blue); transform: translateX(2px); }
.co-row--link:focus-visible { outline-offset: -2px; }
@media (width >= 760px) {
  .co-row--link { grid-template-columns: 3rem minmax(0, 13rem) minmax(0, 1fr) auto; }
  .co-row--link .co-row__go { grid-column: 4; grid-row: auto; }
}

/* A one-line note under a group (Careers: how to apply) */
.co-note { margin-top: 1.25rem; font-size: .9375rem; font-weight: 300; line-height: 1.5; color: var(--co-soft); }

/* Arrival: children of [data-co-stagger] rise in one after another once in view (company.js adds .is-in).
   Without JS everything shows. If the script never runs, a fallback reveals the lists after 2.5s; company.js marks
   <html> .co-armed as soon as it runs, which retires the fallback, and a script that arrives after the fallback
   has fired marks the lists .co-static so nothing hides and plays again. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-co-stagger]:not(.co-static) > * { opacity: 0; }
  html.js:not(.co-armed) [data-co-stagger]:not(.is-in) > * { animation: co-show 0s 2.5s forwards; }
  html.js [data-co-stagger].is-in:not(.co-static) > * { animation: co-rise .7s var(--co-ease, ease-out) calc(var(--i, 0) * 45ms + 100ms) both; }
  html.js [data-co-stagger].is-in:not(.co-static) .co-person__dot { animation: co-pop .9s var(--co-ease, ease-out) calc(var(--i, 0) * 45ms + 100ms) both; }
}
.co-static > * { animation: none; opacity: 1; }
@keyframes co-show { to { opacity: 1; } }
@keyframes co-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes co-pop { from { transform: scale(.8); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .co-person__dot img, .co-person__dot::before, .co-person__dot::after, .co-row__arr, .co-bio__ar { transition: none; }
  .co-person__a:hover .co-person__dot img { transform: none; }
  .co-bio__a:hover .co-bio__ar { transform: none; }
}

@media print {
  .co { background: #fff; color: #000; padding-block: 1rem; }
  .co::before, .co__acts, .co__index, .co-bio__nav { display: none; }
  [data-co-stagger] > * { opacity: 1 !important; animation: none !important; }
}

/* Team (15 Oct 2026). James: "Improve the design and make peoples images larger. Don't separate Leadership
   with Specialists, just have everyone in one section." The lede (headline, then its line) and the company
   links sit across the top; all fourteen people share one grid of large rounded portraits below, the
   founders first. The hover keeps the logo's ring and blue bead, drawn round the portrait. */
.co-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.co--team .co__h { max-width: 18ch; }
@media (width >= 960px) {
  .co--team .co__in { grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); grid-template-rows: auto auto; row-gap: clamp(2.75rem, 5vw, 4rem); }
  .co--team .co__lede { grid-column: 1; grid-row: 1; }
  .co--team .co__index { grid-column: 2; grid-row: 1; align-self: end; }
  .co--team .co__main { grid-column: 1 / -1; grid-row: 2; }
}
.co-people--all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
@media (width >= 720px) { .co-people--all { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.25rem; } }
@media (width >= 1100px) { .co-people--all { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 1.5rem; } }
.co-people--all .co-person__a { --ring: 6px; --bead: 12px; align-content: start; }
.co-people--all .co-person__dot { width: 100%; margin-bottom: 1rem; border-radius: 22px; }
.co-people--all .co-person__dot picture,
.co-people--all .co-person__dot picture::after { border-radius: 22px; }
.co-people--all .co-person__dot::after { border-radius: 26px; }
.co-people--all .co-person__n { font-size: 1.125rem; }
.co-people--all .co-person__r { margin-top: .25rem; font-size: .9375rem; }
.co-people--all .co-person__i { font-size: 1.25rem; }
@media (width < 720px) {
  .co-people--all .co-person__dot { border-radius: 16px; margin-bottom: .75rem; }
  .co-people--all .co-person__dot picture,
  .co-people--all .co-person__dot picture::after { border-radius: 16px; }
  .co-people--all .co-person__dot::after { border-radius: 20px; }
  .co-people--all .co-person__n { font-size: 1rem; }
  .co-people--all .co-person__r { font-size: .875rem; }
}

/* (The rules above for the old directory rows are more specific; these win on the Team page.) */
.co.co--team .co-people.co-people--all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
@media (width >= 720px) { .co.co--team .co-people.co-people--all { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.25rem; } }
@media (width >= 1100px) { .co.co--team .co-people.co-people--all { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3rem 1.5rem; } }
.co.co--team .co-people--all .co-person__a {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start;
  padding-block: 0; border-bottom: 0; border-radius: 10px;
}
.co.co--team .co-people--all .co-person__dot { grid-row: auto; width: 100%; }
.co.co--team .co-people--all .co-person__n,
.co.co--team .co-people--all .co-person__r { align-self: auto; }