/* ==========================================================================
   TiGears design system — the Zutari layout, in the team's own colours.

   The six destination pages are laid out on the system described here. The
   layout is zutari.com's: one very large uppercase display voice, full-bleed
   numbered colour bands, solid colour-block tiles in a grid, a dark tab bar, an
   orange call-to-action band and a near-black footer of link columns. What is
   NOT Zutari's is the colour -- and the ground it all sits on, which here is
   black rather than cream.

   Three colours, and nothing else: black, white, and one orange in as many
   cuts as the job needs. Every colour in Zutari's palette has been replaced by
   its counterpart in that set, role for role, so the layout reads the same and
   the site reads as TiGears:

     Zutari                      TiGears          where Zutari uses it
     ---------------------------------------------------------------------
     #EEEAE4  cream              #0B0B0C  black   the page ground
     #E3DCD2  sand panel         #141416  grey    the second ground, and bands
     #E3E0DA → #CAC7C1  ramp     #101012 → #34383E  the numbered 1/5..5/5 tiles
     #181C19  near-black ink     #060607  black   the deepest block, and the ink
                                                  on orange, on paper and on
                                                  the white band
     #FEFEFE  white              #F7F3EC  paper   the light bands, and the type
                                                  on the black ground
     #F05A22  orange accent      #FF5A1F  orange  the accent, the READ MORE and
                                                  the primary button
     #CC3366  pink (focus)       #FF5A1F  orange  focus rings, selection
     #006F73  teal CTA band      #E23C00 → #FFA566  the CTA band, as the one
                                                  gradient in the system
     #B04C24 #F05A22 #BED749 ... the ten service tiles — see --tile-N below.

   Two things are deliberately kept from the team's own system: the type is
   Archivo (Zutari sets Poppins for display and Titillium Web for copy, neither
   of which is mirrored here, and Archivo is a grotesque that carries the same
   uppercase, tightly-tracked display voice at weight 600), and the photographs
   and copy are the team's Wix pages' own.

   Zutari's most visible structural habits are reproduced exactly: square
   corners everywhere (no border-radius), display type set in UPPERCASE with
   heavy negative tracking and leading under 1, and sections that run the full
   width of the window while their text stays in a narrow column.
   ========================================================================== */

/* ── tokens ──────────────────────────────────────────────────────────────
   The palette. Every value is the TiGears counterpart of a colour Zutari
   actually uses; the comments name the Zutari colour each one replaces.      */
:root {
  /* ground — a greyish black, not a neutral one: the panels carry a trace of
     warmth so the orange beside them reads as light rather than as paint. */
  --bg:        #0B0B0C;
  --bg-2:      #141416;
  --surface:   #191A1D;
  --surface-2: #232529;

  /* The stepped tiles, 1/5..5/5: the same five stops, now a ramp of dark
     greys rather than dark-greys-on-cream, so a row of them reads as one
     object lit from one side. */
  --step-1: #101012;
  --step-2: #17181B;
  --step-3: #1F2125;
  --step-4: #282B30;
  --step-5: #34383E;

  /* ink stays what it always was — the darkest block on the page — and is now
     also the text colour on the orange, on the paper and on the white bands.
     `--text` is the body colour, and it is light: the ground is black. */
  --ink:    #060607;
  --ink-2:  #101012;
  --paper:  #FFFFFF;

  --text:   #F4F0EA;
  /* --muted is the secondary ink: captions, ordinals, stat labels. It has to
     clear 4.5:1 on the darkest surface any of them sits on, which is not the
     cream ground but --step-5 (#C4C1BB), the last of the stepped stat tiles;
     there the accent-era grey landed at 4.1:1. */
  --muted:  #C7C2BB;
  /* --dim is the quietest ink, used for ordinals and small labels on the cream
     ground and on the panel (--bg-2, #E4E2DD). Zutari's own grey lands under
     4.5:1 on both, so it is set darker than the value it replaces until it
     passes on the lighter of the two. */
  --dim:    #9D9992;

  /* hairlines are light on the dark ground; the same three weights as before,
     so every rule in the system keeps its hierarchy. */
  --line:      rgba(255, 255, 255, .16);
  --line-2:    rgba(255, 255, 255, .32);
  --line-soft: rgba(255, 255, 255, .08);
  --rule:      rgba(255, 255, 255, .16);

  /* accent — Zutari's #F05A22 orange and #CC3366 focus pink, both the team's
     one orange. --accent-ink is what stays legible on top of it (black, not
     white: white on #FF5A1F is 3:1 and fails, black is 7:1 and passes). */
  --accent:      #FF5A1F;
  /* the accent as TEXT on the light ground: Zutari's own orange only reaches
     3.3:1 there, so the text tone is a deeper cut of the same hue that passes
     at 4.8:1 both on the cream and on the sand panel. */
  --accent-2:    #FF9350;
  --accent-ink:  #0B0B0C;
  --accent-soft: #FFD3AE;
  --accent-tint: rgba(255, 90, 31, .18);
  /* The one gradient in the system: the accent leaving towards a light orange.
     Used on the bands that should feel lit rather than painted (--mist, CTA),
     never on a control, so a button and a band can never be mistaken. */
  --grad-accent: linear-gradient(118deg, #E23C00 0%, #FF5A1F 46%, #FFA566 100%);
  --grad-hot:    linear-gradient(160deg, #FFB27A 0%, #FF5A1F 52%, #C2320A 100%);

  /* the CTA band — Zutari's teal #006F73 */
  --cta-bg:  var(--grad-accent);
  --cta-ink: #0B0B0C;

  /* the ten colour-block tiles — Zutari's service hues, each replaced by its
     counterpart on a black-grey-orange ramp. Zutari's set runs deep-warm,
     bright-warm, light-bright, mid-warm, dark-cool, mid-warm, dark-muted, mid-
     cool, dark-cool, bright-warm; the ramp below keeps that distribution.
     --tile-N-ink is the text colour for that block, chosen so every pair is at
     least 4.5:1 — which white-on-Zutari's-lime and white-on-its-orange are not. */
  --tile-1: #0E0E10;  --tile-1-ink: #F4F0EA;
  --tile-2: #FF5A1F;  --tile-2-ink: #0B0B0C;
  --tile-3: #F7F3EC;  --tile-3-ink: #0B0B0C;
  --tile-4: #B8330A;  --tile-4-ink: #FFFFFF;
  --tile-5: #1B1D20;  --tile-5-ink: #F4F0EA;
  --tile-6: #FFB27A;  --tile-6-ink: #0B0B0C;
  --tile-7: #2C2F34;  --tile-7-ink: #F4F0EA;
  --tile-8: #FF8A3D;  --tile-8-ink: #0B0B0C;
  --tile-9: #454A51;  --tile-9-ink: #FFFFFF;
  --tile-10: #FFD3AE; --tile-10-ink: #0B0B0C;

  /* type — Zutari's Poppins display + Titillium Web copy, in the faces this
     project already serves from disk (assets/tigears/fonts.css). */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 56px);
  --hdr: 88px;

  /* Zutari sets nothing rounded: every corner in this system is square. */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-pill: 0;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Zutari's display sizes, at its own ratios. */
  --display-1: clamp(52px, 9.4vw, 140px);
  --display-2: clamp(34px, 5.4vw, 84px);
  --lede-size: clamp(18px, 1.5vw, 21px);
}

/* ── base ────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17.5px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--ink); text-decoration: none; transition: color .16s var(--ease); }
a:hover { color: var(--accent-2); }

::selection { background: var(--accent); color: var(--accent-ink); }

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

/* ── type ────────────────────────────────────────────────────────────────
   Zutari's whole voice is one move: a grotesque at weight 500–600, set in
   UPPERCASE, tracked in hard (-0.035em, i.e. -4px at 76px) with leading under
   1 (0.9). That single treatment carries every h1 and h2 on the site, and the
   size gap between it and the body copy is what makes a line read as a
   statement rather than as a bold paragraph.

   Below it, Zutari's working voice is a plain humanist sans at 20px. The
   technical voice (numbers, dates, the "1/10" chips) is mono, which Zutari
   sets in its label chips.                                                */

h1, h2, h3, h4, h5 {
  color: var(--text);
  margin: 0 0 .5em;
  font-family: var(--display);
}

h1, .display {
  font-size: var(--display-1);
  font-weight: 600;
  line-height: .88;
  letter-spacing: -.038em;
  text-transform: uppercase;
  margin: 0 0 .34em;
}

h2 {
  font-size: var(--display-2);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.032em;
  text-transform: uppercase;
  margin: 0 0 .42em;
}

h3 {
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.014em;
  margin: 0 0 .4em;
}

h4 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .8em;
}

h5 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--text); }

/* The lede: Zutari sets the line under a display heading at body size, in a
   column about half the width of the page, and leaves the rest empty. */
.lede, .lede--wide {
  font-size: var(--lede-size);
  line-height: 1.45;
  color: var(--text);
  max-width: 46ch;
  margin: 0 0 1.2em;
}
.lede--wide { max-width: 62ch; }

/* The eyebrow / label chip: Zutari's "SERVICE 1/10" and its uppercase labels. */
.eyebrow, .coord, .stage__idx, .tile__tag, .hover-index__num,
.meet__count, .stat__label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.1em;
}
.eyebrow { color: var(--accent-2); }

/* ── layout ──────────────────────────────────────────────────────────────
   Zutari alternates between a narrow text column and full-bleed colour. The
   .wrap column is the text one; .bleed runs to both window edges.          */

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

.wrap--narrow { max-width: 820px; }

.section {
  padding: clamp(64px, 8vw, 128px) 0;
  background: var(--bg);
}

/* Zutari does not rule its sections off — the colour change is the division.
   The variants below are the ground of a section, in Zutari's own order:
   cream (default), sand (.section--mist / --wash / --warm are all one panel
   tone in the team's palette, exactly as they were one tone before). */
.section--mist,
.section--wash,
.section--warm { background: var(--bg-2); }

.section--tight { padding: clamp(44px, 5vw, 76px) 0; }

.section + .section { border-top: 0; }

/* Section heading: Zutari puts the heading in the left of a wide row and the
   paragraph in a narrow column beside or beneath it, never both full width. */
.sec-head {
  margin: 0 0 clamp(32px, 4vw, 56px);
  max-width: 900px;
}
.sec-head h2 { max-width: 18ch; }
.sec-head p {
  font-size: var(--lede-size);
  line-height: 1.45;
  max-width: 48ch;
  color: var(--text);
  margin: 0;
}
.sec-head::before { display: none; }

.prose { max-width: 68ch; }
.prose p { font-size: 17.5px; line-height: 1.7; }

.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;
}

/* ── buttons ─────────────────────────────────────────────────────────────
   Zutari's button is a square-cornered near-black block, 12px uppercase at
   weight 700 with 0.5px of tracking and 14px/15px of padding, with a small
   arrow after the label. Its orange READ MORE is the text-only variant.     */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--blue { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--blue:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--ghost {
  background: transparent; border-color: var(--line-2); color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--outline-light {
  background: transparent; border-color: var(--paper); color: var(--paper);
}
.btn--outline-light:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Zutari's text-only link with the trailing arrow. */
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-2);
}
.arrow-link::after { content: "→"; font-size: 14px; line-height: 1; }
.arrow-link:hover { color: var(--ink); }
.arrow { display: inline-block; }

/* A text link inside a colour block takes that block's own ink, the way the
   tile's heading and its label chip already do. --accent-2 is cut for the cream
   and panel grounds; on the dark tile it falls to 3:1 and on the light one to
   4.3:1, and the tile is the one place the link cannot pick a ground of its
   own. Hover holds the ink and dims instead, because --ink is the tile's own
   background on the dark block. */
.tile .arrow-link { color: inherit; }
.tile .arrow-link:hover { color: inherit; opacity: .72; }

/* ── header ──────────────────────────────────────────────────────────────
   Zutari's header: a 96px cream bar, the mark hard left, the menu running to
   the right of centre in 16px/600, and a near-black CONTACT US block plus a
   search square at the far right. No underline, no border, no shadow.        */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: var(--bg);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: var(--hdr);
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand__logo { height: 34px; width: auto; }
.brand__word {
  font-family: var(--display);
  font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  text-transform: uppercase;
}
.brand__num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  color: var(--dim);
}

.nav { margin-left: auto; }
.nav__list {
  display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px);
  list-style: none; margin: 0; padding: 0;
}
.nav__item { position: relative; }
.nav__link {
  display: inline-block;
  padding: 30px 0;
  font-size: 15px; font-weight: 600; color: var(--text);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--accent-2); }
.nav__link::before, .nav__link::after { display: none; }

/* Zutari's dark CONTACT US block. */
.nav__cta {
  display: inline-flex; align-items: center;
  padding: 12px 15px;
  background: var(--ink); color: var(--paper);
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.nav__cta:hover { background: var(--accent); color: var(--accent-ink); }

.header__tools { display: flex; align-items: center; gap: 8px; }
/* The header's two buttons -- the magnifier here, the three-line menu in
   .nav-toggle below -- are GREY, not ink and not accent, and they are the same
   grey as the homepage's own pair (see the note in palette.css). An ink block
   beside the cream nav reads as a second CTA competing with the real one, and
   orange makes chrome out of the one colour the page uses to mean something.
   `--muted` on `--surface` is 4.0:1, over the 3:1 a non-text control needs. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--surface); color: var(--muted);
  border: 0; cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* The mega menu: a cream panel, square, ruled by hairlines, one column of
   uppercase links per group — Zutari's dropdown, not a card. */
.mega {
  position: absolute; top: 100%; left: -18px;
  min-width: 250px; padding: 22px 24px;
  background: var(--bg); border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: none; }
.mega h5 { margin: 0 0 12px; color: var(--dim); }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li + li { border-top: 1px solid var(--line-soft); }
.mega a {
  display: block; padding: 9px 0;
  font-size: 14px; font-weight: 500; color: var(--text);
}
.mega a:hover { color: var(--accent-2); }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: var(--surface); border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
/* Three lines, in the same grey as the magnifier beside them. */
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--muted); }
/* Open is a press, not an accent: the panel it opens is the accent-free one, and
   a stripe of orange for "the menu is out" reads as a notification. */
.nav-toggle[aria-expanded="true"] { background: var(--surface-2); }
.nav-toggle[aria-expanded="true"] span { background: var(--ink); }

/* ── the page hero ───────────────────────────────────────────────────────
   Zutari's page head is not a banner: it is a very large amount of empty
   ground with one enormous uppercase statement in it, an arrow, and a short
   paragraph in a narrow column. There is no picture under it: a photograph
   following the title as a band read as a title with an image stuck below it,
   not as one composition. The statement is the whole hero.                  */

.page-hero {
  position: relative;
  padding: clamp(56px, 9vw, 150px) 0 clamp(40px, 5vw, 72px);
  background: var(--bg);
}
.page-hero::after { display: none; }
.page-hero .wrap { position: relative; }
/* The hero statement has to FIT in the wrap column: at the token's own 140px,
   "Accomplishments" measures about 1,350px in a 1,128px column, so it ran off
   the right-hand edge of the page. The size is capped against the column
   instead of against the viewport, which is what the token was doing. */
.page-hero h1 {
  max-width: 20ch;
  margin: 0 0 .3em;
  font-size: clamp(52px, 7.6vw, 112px);
  overflow-wrap: break-word;
}
/* A one-word statement ("Accomplishments") cannot wrap, and the display face at
   the smallest --display-1 step is wider than a phone: measured 502px in a
   350px column at 390, which made the whole page scroll sideways. It is set
   to the width it has, not the width of the token. */
@media (max-width: 760px) {
  .page-hero h1 { font-size: clamp(30px, 8.2vw, 52px); }
}
.page-hero p {
  font-size: var(--lede-size);
  line-height: 1.45;
  max-width: 46ch;
  color: var(--text);
  margin: 0;
}
/* the ordinal Zutari sets small, above the statement */
.page-hero__num {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500; letter-spacing: .16em;
  color: var(--muted);
  margin: 0 0 20px;
}
.page-hero .coord { display: none; }

/* ── the film hero ───────────────────────────────────────────────────────
   One page opens on moving picture rather than type alone: Accomplishments,
   whose hero is the team's own footage from the field. The
   clip fills the section behind the statement, cropped by `object-fit: cover`
   so it is never stretched, and two scrims sit on top of it -- one down the
   page and one across it -- so the left-hand column the words live in is the
   darkest part of the picture. Measured behind the title the ground is around
   #101010, which reads at roughly 17:1 against the white statement.

   The poster is the first frame, so something is on screen before the video
   decodes, and it is what a reader who has asked for less motion keeps: the
   film only starts from ui.js, which honours that preference. */
.page-hero--film {
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 68vh, 780px);
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 140px) clamp(44px, 6vw, 84px);
  background: var(--ink);
}
.page-hero--film .wrap { position: relative; z-index: 2; width: 100%; }

.page-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}
.page-hero__backdrop-film {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7) sepia(.2) hue-rotate(-8deg) contrast(1.05) brightness(.92);
}
.page-hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 11, 12, .84) 0%, rgba(11, 11, 12, .4) 40%,
                    rgba(11, 11, 12, .9) 100%),
    linear-gradient(90deg, rgba(11, 11, 12, .88) 0%, rgba(11, 11, 12, .64) 48%,
                    rgba(11, 11, 12, .34) 100%);
}

/* a film hero is a window on the field: the statement takes the room it needs
   and the section keeps the full-bleed height even on a short phone */
@media (max-width: 760px) {
  .page-hero--film { min-height: clamp(420px, 62vh, 560px); }
}

/* ── colour-block tiles ──────────────────────────────────────────────────
   Zutari's signature component: a grid of solid colour blocks, each holding a
   label chip, a title, optionally a paragraph, a hairline and a READ MORE.
   Square corners, no shadow, the colour IS the card. Ten tones, taken from the
   ten service hues on zutari.com/about-us and re-cut on the team's ramp.      */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 290px;
  padding: 26px 24px 22px;
  background: var(--tile-1);
  color: var(--tile-1-ink);
  border-right: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transition: filter .18s var(--ease);
}
.tile:hover { filter: brightness(1.06); }
.tile::before { display: none; }

/* Zutari's label chip: small, monospaced, uppercase, in the top-left corner. */
.tile__tag {
  color: inherit;
  opacity: .82;
  margin: 0 0 20px;
  font-size: 11px;
  letter-spacing: .18em;
}
.tile h3 {
  font-size: clamp(21px, 1.9vw, 30px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.022em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: inherit;
}
.tile__body { display: flex; flex-direction: column; flex: 1; }
.tile__body p {
  font-size: 15.5px; line-height: 1.5;
  color: inherit; opacity: .92;
  margin: 0;
}
/* Zutari ends every block with the hairline and the READ MORE link. */
.tile__body::after {
  content: ""; display: block;
  margin-top: auto; padding-top: 20px;
  border-top: 1px solid currentColor;
  opacity: .3;
}
.tile__media { margin-bottom: 20px; }
.tile__media img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}

/* the ten tones, and the ink that passes 4.5:1 on each */
.tile:nth-child(10n+1)  { background: var(--tile-1);  color: var(--tile-1-ink); }
.tile:nth-child(10n+2)  { background: var(--tile-2);  color: var(--tile-2-ink); }
.tile:nth-child(10n+3)  { background: var(--tile-3);  color: var(--tile-3-ink); }
.tile:nth-child(10n+4)  { background: var(--tile-4);  color: var(--tile-4-ink); }
.tile:nth-child(10n+5)  { background: var(--tile-5);  color: var(--tile-5-ink); }
.tile:nth-child(10n+6)  { background: var(--tile-6);  color: var(--tile-6-ink); }
.tile:nth-child(10n+7)  { background: var(--tile-7);  color: var(--tile-7-ink); }
.tile:nth-child(10n+8)  { background: var(--tile-8);  color: var(--tile-8-ink); }
.tile:nth-child(10n+9)  { background: var(--tile-9);  color: var(--tile-9-ink); }
.tile:nth-child(10n+10) { background: var(--tile-10); color: var(--tile-10-ink); }

.tile-grid--offset .tile:nth-child(even) { transform: translateY(0); }

/* ── bands ───────────────────────────────────────────────────────────────
   Zutari's other signature: a service (or a way of working) occupies a
   full-bleed horizontal band of ONE flat colour, running edge to edge, with a
   mono "SERVICE 1/11" chip and an enormous uppercase title on the left, the
   body copy and a button in a column in the middle, and a photograph at the
   right. Bands alternate hue down the page. The team's seven build stages and
   its four levels of support are both laid out this way.                     */

.stage-rule { display: none; }

.stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.05fr) minmax(220px, .85fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  width: 100%;
  max-width: none;
  padding: clamp(44px, 5vw, 76px) max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  background: var(--tile-1);
  color: var(--tile-1-ink);
  border-bottom: 2px solid var(--bg);
}
.stage:nth-child(10n+1)  { background: var(--tile-1);  color: var(--tile-1-ink); }
.stage:nth-child(10n+2)  { background: var(--tile-2);  color: var(--tile-2-ink); }
.stage:nth-child(10n+3)  { background: var(--tile-3);  color: var(--tile-3-ink); }
.stage:nth-child(10n+4)  { background: var(--tile-4);  color: var(--tile-4-ink); }
.stage:nth-child(10n+5)  { background: var(--tile-5);  color: var(--tile-5-ink); }
.stage:nth-child(10n+6)  { background: var(--tile-6);  color: var(--tile-6-ink); }
.stage:nth-child(10n+7)  { background: var(--tile-7);  color: var(--tile-7-ink); }
.stage:nth-child(10n+8)  { background: var(--tile-8);  color: var(--tile-8-ink); }
.stage:nth-child(10n+9)  { background: var(--tile-9);  color: var(--tile-9-ink); }
.stage:nth-child(10n+10) { background: var(--tile-10); color: var(--tile-10-ink); }

.stage:hover { filter: none; }

.stage__idx {
  color: inherit; opacity: .8;
  margin: 0 0 14px;
  font-size: 11px; letter-spacing: .2em;
}
.stage h2 {
  color: inherit;
  font-size: clamp(28px, 3.4vw, 52px);
  margin: 0;
  max-width: 14ch;
}
.stage__body p:not(.stage__idx) {
  color: inherit; opacity: .94;
  font-size: 16px; line-height: 1.6;
  margin: 0 0 1.1em;
}
/* Zutari's band is three columns: [number + title] [copy] [photograph]. The
   markup nests the number, title and copy in one .stage__body, so the body is
   unwrapped and its children are placed in the band's own grid directly. */
.stage__body { display: contents; color: inherit; }
.stage__idx { grid-column: 1; grid-row: 1; }
.stage h2 { grid-column: 1; grid-row: 2; align-self: start; }
.stage__body p:not(.stage__idx) {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 46ch;
}
.stage__media { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
.stage__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}

/* the index above the bands: Zutari's numbered list, hairline-ruled */
.hover-index { list-style: none; margin: 0; padding: 0; }
.hover-index li { border-top: 1px solid var(--line); }
.hover-index li:last-child { border-bottom: 1px solid var(--line); }
.hover-index__row {
  display: grid;
  grid-template-columns: 70px 1fr auto 24px;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  color: var(--ink);
}
.hover-index__row::before { display: none; }
.hover-index__row:hover { color: var(--accent-2); }
.hover-index__num { color: var(--dim); margin: 0; }
.hover-index__title {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 600; letter-spacing: -.02em; text-transform: uppercase;
}
.hover-index__meta { color: var(--muted); font-size: 14px; }
.hover-index__row::after { content: "→"; font-size: 18px; color: var(--dim); }

/* ── statistics ──────────────────────────────────────────────────────────
   Zutari's "IMPACT BY NUMBERS": a row of blocks on the stepped grey ramp,
   each a very large numeral over a small label.                              */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px;
  background: var(--bg);
}
.stat {
  padding: 30px 24px 34px;
  background: var(--step-1);
}
.stat:nth-child(5n+1) { background: var(--step-1); }
.stat:nth-child(5n+2) { background: var(--step-2); }
.stat:nth-child(5n+3) { background: var(--step-3); }
.stat:nth-child(5n+4) { background: var(--step-4); }
.stat:nth-child(5n+5) { background: var(--step-5); }
.stat:first-child { background: var(--step-1); }
.stat__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 600; line-height: .9; letter-spacing: -.035em;
  color: inherit;
}
.stat__label { display: block; margin: 14px 0 0; color: var(--muted); }

/* ── accordion ───────────────────────────────────────────────────────────
   Zutari's how-we-work accordion: hairline-ruled rows, a small mono index, a
   title, and a +/− at the right. No boxes, no fill.                         */

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 22px 0;
  background: none; border: 0;
  text-align: left; cursor: pointer;
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 600; letter-spacing: -.01em;
}
.acc__btn:hover { color: var(--accent-2); }
.acc__idx { color: var(--dim); margin: 0; font-family: var(--mono); font-size: 12px; }
.acc__sign { position: relative; width: 16px; height: 16px; justify-self: end; }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; background: currentColor;
}
.acc__sign::before { top: 7px; left: 0; width: 16px; height: 2px; }
.acc__sign::after { left: 7px; top: 0; width: 2px; height: 16px; transition: opacity .2s; }
.acc__item.is-open .acc__sign::after { opacity: 0; }
.acc__panel { display: none; }
.acc__item.is-open .acc__panel { display: block; }
.acc__panel-inner { padding: 0 28px 26px 74px; max-width: 82ch; }
.acc__panel-inner ul { margin: 0; padding-left: 18px; }
.acc__panel-inner li { margin: 0 0 .5em; }

/* ── editorial: story, gallery, frames, collage ──────────────────────────
   Zutari's editorial sections put a photograph in a wide column and its
   caption directly under it in small grey type, with a narrow text column
   beside. Frames are square-cornered; the "shapes" the old system used
   (arch, leaf, circle) are neutralised so the grid reads as Zutari's.        */

.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.story--flip .story__media { order: 2; }
.story--bleed { grid-template-columns: 1fr; }
.story__body h2 { max-width: 16ch; }
.story__body p { max-width: 56ch; font-size: 17.5px; }

.frame { margin: 0; position: relative; }
.frame::after { display: none; }
.frame img { width: 100%; object-fit: cover; }
.frame__cap {
  display: block;
  margin: 12px 0 0;
  font-size: 13px; color: var(--muted);
  line-height: 1.4;
}
.frame__chip {
  position: absolute; bottom: 0; left: 0;
  padding: 8px 12px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.frame__chip--br { left: auto; right: 0; }
.frame__chip--tr { bottom: auto; top: 0; left: auto; right: 0; }
.frame__chip--bl { bottom: 0; left: 0; }

/* Zutari uses one image ratio, 3:2-ish, and varies the COLUMN WIDTH instead of
   the aspect — so the shapes below set ratios rather than masks. */
.frame--wide img     { aspect-ratio: 16 / 9; }
.frame--tall img     { aspect-ratio: 3 / 4; }
.frame--square img   { aspect-ratio: 1 / 1; }
.frame--portrait img { aspect-ratio: 4 / 5; }
.frame--arch img,
.frame--leaf img,
.frame--cut img,
.frame--circle img,
.frame--pill img     { aspect-ratio: 3 / 2; }

.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.gallery > * { grid-column: span 2; }
.gallery .span-2 { grid-column: span 2; }
.gallery .span-3 { grid-column: span 3; }
.gallery .span-4 { grid-column: span 4; }
.gallery .span-6 { grid-column: span 6; }
.gallery .push-1 { margin-top: 0; }
.gallery .push-2 { margin-top: 0; }

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}
.mosaic > * { grid-column: span 2; }

/* the veiled flyers: a dark panel that shows its poster on hover/focus */
.veil-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px; }
.veil {
  position: relative; display: block; aspect-ratio: 3 / 4;
  background: var(--tile-5); color: var(--paper); overflow: hidden;
}
.veil__num {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
}
.veil__label {
  position: absolute; left: 14px; bottom: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.veil__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; transition: opacity .22s var(--ease);
  background: var(--paper);
}
.veil:hover .veil__img, .veil:focus-visible .veil__img, .veil.is-shown .veil__img { opacity: 1; }

/* ── marquee ─────────────────────────────────────────────────────────────
   Zutari runs its partnerships line as a scrolling band; here the team's name
   runs the same way, in the display face on the dark ground.                 */

.marquee {
  overflow: hidden;
  padding: clamp(20px, 2.6vw, 34px) 0;
  background: var(--ink);
  color: var(--paper);
}
.marquee--type { background: var(--ink); }
.marquee__inner { display: flex; width: max-content; }
.marquee__run { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
.marquee__run span {
  font-family: var(--display);
  font-size: clamp(28px, 4.4vw, 66px);
  font-weight: 600; letter-spacing: -.03em; text-transform: uppercase;
  white-space: nowrap; color: var(--paper);
}
.marquee img { height: clamp(110px, 14vw, 190px); width: auto; object-fit: cover; }
.marquee--rev { direction: rtl; }

/* ── film band ───────────────────────────────────────────────────────────
   Zutari's full-bleed dark band with one centred control.                    */

.film-band {
  position: relative;
  padding: clamp(52px, 7vw, 108px) 0;
  background: var(--ink);
  color: var(--paper);
}
.film-band::after { display: none; }
.film-band .wrap { position: relative; }
.film-band h2 { color: var(--paper); max-width: 18ch; }
.film-band p { color: rgba(255, 255, 255, .82); max-width: 52ch; }
.film-band__body { margin-bottom: 34px; }
.film-band__media { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--ink-2); }
.film-band__media img, .film-band__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.film-band__toggle {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 20px; padding: 14px 16px;
  background: var(--paper); color: var(--ink);
  border: 0; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.film-band__toggle:hover { background: var(--accent); color: var(--accent-ink); }
.film-band__icon { display: inline-flex; }
.film-band__icon svg { width: 14px; height: 14px; fill: currentColor; }
.film-band__icon--play { display: inline-flex; }
.film-band__toggle[data-playing="true"] .film-band__icon--play { display: none; }
.film-band__toggle[data-playing="false"] .film-band__icon--pause { display: none; }

/* ── the CTA band ────────────────────────────────────────────────────────
   Zutari's full-width flat band with one statement and one button. Its band
   is teal; the team's counterpart of that teal is its orange.                */

.cta-band {
  padding: clamp(52px, 7vw, 104px) 0;
  background: var(--cta-bg);
  color: var(--cta-ink);
  position: relative;
}
.cta-band .wrap::before { display: none; }
.cta-band h2 { color: var(--cta-ink); max-width: 22ch; }
.cta-band p {
  color: var(--cta-ink); opacity: .9;
  font-size: var(--lede-size); line-height: 1.45; max-width: 54ch;
}
.cta-band .btn { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cta-band .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.cta-band .arrow-link { color: var(--cta-ink); }

/* ── the sponsor wall ────────────────────────────────────────────────────
   Zutari lists partners as flat marks on a panel, in even cells, with the
   media's own colour kept.                                                   */

.sponsor-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2px;
  background: var(--bg);
}
.sponsor-wall img {
  width: 100%; height: 190px; object-fit: contain;
  padding: 26px; background: var(--paper);
}

/* ── the team deck and the detail view ───────────────────────────────────
   Zutari's people are cards: a photograph, a name in the display face, a role
   in mono, on the sand panel. The deck keeps its 3D machinery; only its
   surface is re-cut.                                                         */

.section:has(> .meet) { padding: 0; }

.meet {
  position: relative;
  /* there is no .wrap inside this panel, so it carries its own column and
     centres on the same measure as every other section */
  padding: clamp(52px, 6vw, 92px)
           max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  background: var(--bg-2);
}
.meet__bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin: 0 0 34px;
}
.meet__title { font-family: var(--display); font-size: var(--display-2); font-weight: 600;
  line-height: .92; letter-spacing: -.032em; text-transform: uppercase; margin: 0; }
/* the title is built from three words in spans, and Zutari sets no italics */
.meet__title em { font-style: normal; }
.meet__title > span, .meet__title > em { display: inline-block; margin-right: .26em; }
.meet__note { color: var(--muted); max-width: 46ch; margin: 0; }
.meet__count { margin: 0; color: var(--dim); }
.meet__brand, .meet__mark { display: none; }

.meet__stage { position: relative; }

/* Zutari's people are a grid of photographs on the sand panel, each captioned
   with a name in the display face and the role under it in mono. The deck of
   twelve is exactly that grid; ui.js still drives it, so the cards keep their
   data attributes and stay clickable. */
.meet__deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.meet__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--step-1);
  border: 0; padding: 0; cursor: pointer; text-align: left;
  color: var(--ink);
  transition: background .16s var(--ease);
  /* ui.js still drives the deck as a carousel: on load it writes --x / --s /
     --o on every card and marks everything past its viewport `visibility:
     hidden`. The deck is a grid of all twelve now, so that one inline style is
     overridden here -- the custom properties are left alone, and nothing in
     this stylesheet reads them. */
  visibility: visible !important;
}
.meet__card:nth-child(5n+2) { background: var(--step-2); }
.meet__card:nth-child(5n+3) { background: var(--step-3); }
.meet__card:nth-child(5n+4) { background: var(--step-4); }
.meet__card:nth-child(5n+5) { background: var(--step-5); }
.meet__card.is-active { background: var(--accent); color: var(--accent-ink); }
.meet__card:hover { background: var(--ink); color: var(--paper); }
.meet__card img, .meet__card .meet__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.lead__name {
  display: block; padding: 14px 16px 4px;
  font-family: var(--display); font-size: 16px; font-weight: 600;
  letter-spacing: -.01em; text-transform: uppercase;
  color: inherit;
}
.lead__role { display: block; padding: 0 16px 16px; font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .74; color: inherit; }
.meet__go { position: absolute; top: 12px; right: 12px; display: inline-flex; }
.meet__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* .meet__panel is the WRAPPER around both the bar and the grid, so it must
   stay in the flow -- hiding it hides the twelve. The panel's own furniture is
   what goes: the mark, the tick, the links and the Back button are the old
   panel's chrome, and the read-out below the grid repeats the name and role
   the cards now carry themselves. The detail view is kept, and appears once a
   card is opened. */
.meet__panel { display: block; }
.meet__brand, .meet__mark, .meet__tick, .meet__links, .meet__back,
.meet__count, .meet__note { display: none; }
/* the deck is a grid of all twelve, so the panel's prev/next paging has
   nothing left to page between */
.meet__foot, .meet__nav, .meet__arrows { display: none; }
.meet__view > .meet__who, .meet__view > .meet__pills { display: none; }
.meet__detail { display: none; }
.meet.is-open .meet__detail { display: block; margin-top: 34px; }
.meet__nav, .meet__arrows, .meet__foot, .meet__links, .meet__pills,
.meet__tick, .meet__back, .meet__arrow {
  display: inline-flex; align-items: center; gap: 10px;
}

/* The deck must NOT live in a shrink-to-fit box: a `repeat(auto-fill,
   minmax(190px, 1fr))` grid inside an inline-level element has no definite
   width to divide, so it resolves to nothing and the twelve cards vanish. The
   view and the stage are therefore plain full-width blocks. */
.meet__view, .meet__stage { display: block; width: 100%; }
.meet__body { width: 100%; }
.meet__arrow, .meet__go, .meet__back {
  padding: 12px 15px; background: var(--ink); color: var(--paper); border: 0;
  cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.meet__arrow:hover, .meet__go:hover, .meet__back:hover { background: var(--accent); color: var(--accent-ink); }
.meet__back[hidden] { display: none; }

.md {
  display: grid; grid-template-columns: minmax(220px, .8fr) 1.2fr;
  gap: clamp(24px, 3.4vw, 56px); align-items: start;
}
.md__media { position: relative; }
.md__photo, .md__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.md__top { margin-bottom: 18px; }
.md__name { font-family: var(--display); font-size: clamp(26px, 3vw, 44px); font-weight: 600;
  line-height: .98; letter-spacing: -.03em;  text-transform: uppercase; margin: 0 0 8px; color: var(--text); }
.md__bio { max-width: 62ch; }
.md__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.md__pills span, .md__pills a {
  padding: 7px 11px; background: var(--paper); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
}
.md__stats { display: flex; flex-wrap: wrap; gap: 26px; margin: 22px 0 0;
  padding-top: 20px; border-top: 1px solid var(--line); }
.md__seal, .md__side { display: none; }

/* ── the footer ──────────────────────────────────────────────────────────
   Zutari's footer is near-black, and holds two groups: four columns of links
   at the top, then the addresses, then the mark at the bottom right.         */

.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .78);
  padding: clamp(52px, 6vw, 92px) 0 34px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, minmax(120px, 1fr));
  gap: clamp(22px, 3vw, 48px);
  padding-bottom: clamp(34px, 4vw, 60px);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.footer__brand { color: rgba(255, 255, 255, .78); }
.footer__brand .brand { color: var(--paper); }
.footer__brand .brand__logo { height: 46px; }
.footer__brand .brand__word { color: var(--paper); }
.footer__brand .brand__num { color: rgba(255, 255, 255, .5); }
.footer__brand p { margin: 16px 0 0; font-size: 14px; line-height: 1.6; }
.footer__social { display: flex; gap: 10px; margin-top: 20px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; background: rgba(255, 255, 255, .1); color: var(--paper);
}
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__social a:hover { background: var(--accent); color: var(--accent-ink); }

.footer__col h4 { color: var(--paper); margin: 0 0 16px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin: 0 0 10px; }
.footer__col a { color: rgba(255, 255, 255, .78); font-size: 14.5px; }
.footer__col a:hover { color: var(--accent); }

.footer__legal { padding-top: 24px; }
.footer__legal-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
}
.footer__legal p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .58); }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legal-links a { color: rgba(255, 255, 255, .58); font-size: 13px; }
.footer__legal-links a:hover { color: var(--accent); }

/* ── misc ────────────────────────────────────────────────────────────────
   The old system's flourishes — a film grain overlay, a custom cursor, a
   scroll progress bar, the reveal animations — are kept but made quiet, so
   they do not fight the flat colour blocks Zutari's layout is built from.    */

.hover-img { display: none; }
.breadcrumb { display: none; }
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--accent); z-index: 80; }

/* The arrival lives in assets/tigears/arrive.css, from tools/tigears/arrive.css:
   this page and the homepage share one copy of it, and arrive.js tags the blocks
   that are still below the fold. The `.reveal` classes the ported markup carries
   are inert now -- they are left in the markup because two of the six pages are
   hand-shaped around them, but nothing hides on them any more. */
.parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── the tab bar ─────────────────────────────────────────────────────────
   Zutari's insights page opens its grid with a row of dark tabs sitting hard
   against the first card: 12px uppercase in a near-black bar, the current one
   reversed out to white. It is the page's own navigation, so here it is a row
   of real anchors into the page rather than a filter with nothing to filter. */

.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--ink);
  margin: 0 0 2px;
}
.tabbar__tab {
  padding: 15px 20px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-right: 1px solid rgba(255, 255, 255, .16);
}
.tabbar__tab:hover, .tabbar__tab:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
}

[id="past"], [id="help"], [id="film"], [id="enquiry"],
[id="subteams"], [id="levels"], [id="in-kind"], [id="contact"],
[id="cad"], [id="electrical"], [id="programming"],
[id="mentorship"], [id="life-after"] { scroll-margin-top: var(--hdr); }

/* ── a band with no photograph ───────────────────────────────────────────
   Two of Zutari's bands carry no image -- its how-we-work bands hold an
   accordion where the services bands hold a picture. The team's levels of
   support are the same band with the copy in the wide right-hand column. */

.stage--text { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.9fr); }
.stage--text .stage__body { grid-column: 1 / -1; }
.stage--text .stage__idx { grid-column: 1; }
.stage--text h2 { grid-column: 1; }
.stage--text .stage__body p:not(.stage__idx) {
  grid-column: 2;
  max-width: 62ch;
  margin: 0;
  font-size: 17.5px;
}
.stage--text .stage__body {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.9fr);
  gap: clamp(20px, 3vw, 56px);
  width: 100%;
}

/* ── the enquiry form ────────────────────────────────────────────────────
   Zutari's contact page is a form, not a paragraph of prose with an address
   in it: ruled fields with a small uppercase label above each, a row of chips
   for what the enquiry is about, a boxed message, and a dark Send block. The
   fields are square, hairline-underlined and otherwise invisible.             */

.enquiry { display: block; max-width: 900px; }
.enquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.field { display: block; margin: 0 0 26px; }
.field--wide { display: block; }
.field__label {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.field input, .field textarea {
  display: block;
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
}
.field textarea {
  border: 1px solid var(--line-2);
  padding: 14px;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
  border-color: var(--accent);
}

.enquiry__chips { border: 0; padding: 0; margin: 0 0 30px; }
.chip {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 8px 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
}

@media (max-width: 720px) {
  .enquiry__row { grid-template-columns: 1fr; }
  .stage--text .stage__body { grid-template-columns: 1fr; }
  .stage--text h2, .stage--text .stage__idx, .stage--text .stage__body p {
    grid-column: 1;
  }
}

/* ── narrow screens ──────────────────────────────────────────────────────
   Zutari's bands stack into one column, its tile grid goes one-up, and the
   display type drops to the small end of its clamp.                          */

@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.is-open {
    display: block; position: fixed; inset: var(--hdr) 0 0 0;
    background: var(--bg); padding: 24px var(--gut); overflow-y: auto;
  }
  .nav.is-open .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav.is-open .nav__link { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
  .nav.is-open .mega { position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; padding: 0 0 12px 16px; background: none; }
  .stage { grid-template-columns: 1fr; }
  .stage__media { order: 2; }
  .stage__body { order: 1; }
  .story { grid-template-columns: 1fr; }
  .story--flip .story__media { order: 0; }
  .md { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .gallery > *, .mosaic > * { grid-column: span 6 !important; }
  .hover-index__row { grid-template-columns: 44px 1fr 20px; }
  .hover-index__meta { display: none; }
  .footer__top { grid-template-columns: 1fr; }
}

/* ── the search page ─────────────────────────────────────────────────────
   /search is the one page with no layout of its own to copy: it is the
   site looking at itself. So it is set in Zutari's page vocabulary like every
   other page -- a statement hero, then one column of results on the cream
   ground -- and it deliberately carries no ordinal number, because Zutari's
   numbers order a page within a section and this page is not in one.
   The three ids here (#search-input, #search-summary, #search-results) are the
   whole contract with search/search.js, which owns the querying and the markup
   of the hits; the classes below are the ones it emits.                  */

.search-page__form {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 620px;
  margin: 28px 0 0;
}
.search-page__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--line-2);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
}
.search-page__input::placeholder { color: var(--muted); }
.search-page__input:focus { outline: none; border-bottom-color: var(--accent); }
.search-page__submit {
  flex: 0 0 auto;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.search-page__submit:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.search-page__summary {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.search-page__results { max-width: 76ch; }
.search-page__hits { list-style: none; margin: 22px 0 0; padding: 0; }
.search-page__result { padding: 24px 0; border-top: 1px solid var(--line); }
.search-page__result-link {
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.search-page__result-link:hover { color: var(--accent-2); }
.search-page__result-snippet {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.search-page__result-snippet mark { background: var(--accent-tint); color: var(--ink); }

/* ==========================================================================
   THE BLACK GROUND

   Everything above was written for a cream page: a light ground, dark ink, and
   colour that had to be dark enough to survive on white. The page is now black,
   which flips three assumptions at once and none of them can be fixed by the
   tokens alone:

     1. Ink is no longer only a background. `--ink` is the darkest block on the
        page and also the text that sits on orange, on paper and on the white
        band, so any rule that used it as *text* on the old cream has to point
        at `--text` instead.
     2. A button filled with ink is invisible on an ink ground. The primary is
        the accent now, and everything that used to lean on "black block on a
        pale page" for its weight leans on the orange edge instead.
     3. Contrast ran one way. Every pair that used to be dark-on-light is now
        light-on-dark or black-on-orange, and both of those have to be checked
        in that direction, not inherited from the old numbers.

   The band system is the part that is new rather than remapped. The page has
   three grounds and they alternate:

     black        the default section, and the film band
     grey + tech  `.section--warm`: the grey-black with the robotics line art
     light        `.section--wash`: the white band, black text
     orange       `.section--mist` and the CTA: the orange -> light orange ramp

   `--mist` used to be a synonym for `--warm` (both were "one panel tone"). It
   is not any more: it is the lit band, so it takes the gradient and the black
   text that the gradient needs.
   ========================================================================== */

:root {
  /* Technical line art, as a data URI: two gear rings, a ticked crosshair, a
     dashed inspection square and a dotted axis. Drawn in the accent at 30%, so
     it is a texture in the grey bands and never competes with the type. */
  --pattern-tech: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23FF5A1F' stroke-width='1.1' opacity='0.34'%3E%3Ccircle cx='96' cy='96' r='66'/%3E%3Ccircle cx='96' cy='96' r='44'/%3E%3Ccircle cx='96' cy='96' r='10'/%3E%3Cpath d='M96 18v22M96 152v22M18 96h22M152 96h22'/%3E%3Ccircle cx='330' cy='330' r='34'/%3E%3Cpath d='M330 288v14M330 358v14M288 330h14M358 330h14'/%3E%3Crect x='252' y='62' width='96' height='96' stroke-dasharray='7 7'/%3E%3Cpath d='M210 0v420M0 210h420' stroke-dasharray='2 14'/%3E%3C/g%3E%3C/svg%3E");
  /* A 64px survey grid, for the bands that should read as a drawing. */
  --pattern-grid:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 64px);
  /* The white band's own ground: paper, not pure white, so the orange beside
     it does not look printed on. */
  --band-light: #F7F3EC;
}

/* ---- text ------------------------------------------------------------- */

a { color: var(--text); }
a:hover, a:focus { color: var(--accent-2); }

/* ---- controls --------------------------------------------------------- */

.btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:hover, .btn:focus-visible { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--blue { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--blue:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { background: var(--text); border-color: var(--text); color: var(--ink); }
/* on a light band the pairs reverse again, or the button vanishes into it */
.section--wash .btn--ghost,
.section--mist .btn--ghost { border-color: rgba(11, 11, 12, .45); color: var(--ink); }
.section--wash .btn--ghost:hover,
.section--mist .btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--band-light); }

.nav__cta { background: var(--accent); color: var(--accent-ink); }
.nav__cta:hover { background: var(--paper); color: var(--ink); }
.nav-toggle span { background: var(--text); }
.nav-toggle[aria-expanded="true"] span { background: var(--ink); }

/* ---- the bands -------------------------------------------------------- */

/* grey-black with the robotics drawing on it */
.section--warm {
  background-color: var(--bg-2);
  background-image: var(--pattern-tech);
  background-size: 420px 420px;
  background-position: calc(100% - 90px) 40px;
  background-repeat: no-repeat;
}

/* the lit band: orange leaving towards a light orange, level with the page */
.section--mist {
  background: var(--grad-accent);
  color: var(--ink);
}
.section--mist a { color: var(--ink); text-decoration-color: rgba(11, 11, 12, .45); }
.section--mist a:hover { color: #7A1E00; }

/* the white band */
.section--wash {
  background: var(--band-light);
  color: var(--ink);
}

/* Everything the two light bands inherit: headings, copy, small labels and the
   ordinal chips. One reset per band, because the components above set their
   own colours and a section colour alone would lose to them. */
.section--mist :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, p, li, dt, dd,
                    blockquote, figcaption, strong, em, span, time, label,
                    .sec-head p, .coord, .page-hero__num, .stat__label,
                    .stat__num, .tile__num, .arrow-link),
.section--wash :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, p, li, dt, dd,
                    blockquote, figcaption, strong, em, span, time, label,
                    .sec-head p, .coord, .page-hero__num, .stat__label,
                    .stat__num, .tile__num, .arrow-link) { color: inherit; }
.section--mist :is(.sec-head p, .coord, .page-hero__num, .stat__label, .tile__num),
.section--wash :is(.sec-head p, .coord, .page-hero__num, .stat__label, .tile__num) {
  color: rgba(11, 11, 12, .68);
}
.section--mist hr, .section--wash hr,
.section--mist .rule, .section--wash .rule { border-color: rgba(11, 11, 12, .18); }

/* ---- the film band, the marquee, the CTA ----------------------------- */

/* the film band is the darkest thing on the page, and it is where the drawing
   is most visible: it is the one band that is a machine bay rather than a page */
.film-band {
  background-color: #050506;
  background-image: var(--pattern-grid), var(--pattern-tech);
  background-size: 64px 64px, 520px 520px;
  background-position: 0 0, calc(100% - 40px) calc(100% - 40px);
}

.marquee--type {
  background: var(--accent);
  border-block: 1px solid rgba(11, 11, 12, .2);
}
.marquee--type .marquee__run span { color: var(--accent-ink); }

.cta-band {
  background-image: var(--grad-accent);
  background-color: var(--accent);
}
.cta-band .btn { background: var(--ink); border-color: var(--ink); color: var(--band-light); }
.cta-band .btn:hover { background: var(--band-light); border-color: var(--band-light); color: var(--ink); }

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

.page-hero {
  background-color: var(--bg);
  background-image:
    radial-gradient(72% 58% at 82% 4%, rgba(255, 120, 60, .22) 0%, transparent 62%),
    var(--pattern-grid);
  background-size: auto, 64px 64px;
}

/* ---- photographs -------------------------------------------------------

   The photographs are the team's own and are all cool daylight: grey floors,
   white shirts, a blue-ish hall. Dropped straight onto a black page they read
   as holes in it. The tint below is a warm plate over the whole frame rather
   than a wash on top of it -- sepia moves the midtones towards the accent's
   hue, the hue rotation brings them back from yellow to orange, and the small
   contrast lift keeps the highlights from going grey.                              */

.film-band__media img,
.film-band__media video,
.meet__card img,
.meet__card .meet__photo,
.tile img,
.tile video,
.frame img,
.frame video {
  filter: saturate(.78) sepia(.26) hue-rotate(-9deg) contrast(1.06) brightness(.95);
}

/* the band gets a gradient as well, so the tint survives a photograph whose own
   colour is already warm */
.film-band__media::after,
.tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(196deg, rgba(255, 90, 31, .10) 0%, rgba(255, 60, 10, .34) 100%);
  mix-blend-mode: multiply;
}

/* ---- the statistics ---------------------------------------------------

   The stat row was a ramp of cream steps. On black it is the one place where
   the three colours can sit in one line, so the steps become black / white /
   orange / peach / grey and each tile carries the ink that its own ground
   needs. --step-N is left alone for the tiles and the deck.                        */

.stats { background: var(--bg); }
.stat { background: var(--bg-2); color: var(--text); }
.stat:nth-child(5n+1) { background: #0E0E10; color: var(--text); }
.stat:nth-child(5n+2) { background: var(--band-light); color: var(--ink); }
.stat:nth-child(5n+3) { background: var(--accent); color: var(--accent-ink); }
.stat:nth-child(5n+4) { background: #FFB27A; color: var(--ink); }
.stat:nth-child(5n+5) { background: var(--surface-2); color: var(--text); }
.stat:first-child { background: #0E0E10; color: var(--text); }
.stat__num { color: inherit; }
.stat__label { color: inherit; opacity: .74; }

/* ---- the deck ---------------------------------------------------------

   Twelve people cards. Same five-stop ramp, but running light -> accent ->
   black, so the deck has a lit end and a dark end and the grid never reads as
   one flat panel.                                                                */

.meet__card { background: var(--step-2); color: var(--text); }
.meet__card:nth-child(5n+1) { background: var(--band-light); color: var(--ink); }
.meet__card:nth-child(5n+2) { background: #FFD3AE; color: var(--ink); }
.meet__card:nth-child(5n+3) { background: var(--accent); color: var(--accent-ink); }
.meet__card:nth-child(5n+4) { background: #17181B; color: var(--text); }
.meet__card:nth-child(5n+5) { background: #2C2F34; color: var(--text); }
.meet__card.is-active { background: var(--accent); color: var(--accent-ink); }
.meet__card:hover { background: var(--paper); color: var(--ink); }

/* ---- the wall of marks ------------------------------------------------ */

.sponsor-wall { background: var(--bg); }
.sponsor-wall img { background: var(--band-light); }

/* ---- the form ---------------------------------------------------------- */

.section--form { background-color: var(--bg-2); background-image: var(--pattern-tech);
  background-size: 460px 460px; background-position: calc(100% - 60px) 50%;
  background-repeat: no-repeat; }

.field input, .field textarea, .field select,
.section--form input, .section--form textarea, .section--form select {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
  color: var(--text);
}
.section--form input::placeholder, .section--form textarea::placeholder { color: var(--dim); }
.section--form input:focus, .section--form textarea:focus { border-color: var(--accent); }

/* ---- search ------------------------------------------------------------ */

.search-page__result-link { color: var(--text); }
.search-page__result-link:hover { color: var(--accent-2); }
.search-page__result-snippet mark { background: var(--accent-tint); color: var(--text); }

/* the same catch-all as the homepage's: every photograph in the body, so a band
   that is added later is lit like the ones that exist now */
main img { filter: saturate(.78) sepia(.26) hue-rotate(-9deg) contrast(1.06) brightness(.95); }

/* ==========================================================================
   THE DECK IS A CAROUSEL AGAIN

   The twelve members were laid out as a flat grid: every card visible at once,
   the paging turned off, and `visibility: visible !important` written over the
   one inline style ui.js uses to park the cards the fan has faded out. That made
   the deck a wall of faces and lost the thing the panel is for -- one member at
   a time, big, with the next few standing behind them.

   The fan itself never went anywhere: ui.js still writes `--x` / `--s` / `--o`
   on each card every frame, and still exposes prev/next, the counter, the drag
   and the keyboard. So this is the stylesheet catching up with the script:
   absolute cards at the front-left, transformed by those three properties, and
   the panel's own furniture switched back on.

   On the palette: the deck ramp runs light -> accent -> black across the five
   fanned positions, so the front card is the orange one and the prints behind
   it recede into the grey-black. That replaces the old flat grid's five greys,
   which on a black page had nothing to be a ramp against.
   ========================================================================== */

.meet { --card: clamp(190px, 23vw, 296px); }

/* the deck's height is the front card's own: a 3:4 photograph, then the name
   and the role under it */
.meet__deck {
  position: relative;
  display: block;
  height: calc(var(--card) * 1.3333 + 96px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.meet__card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card);
  transform-origin: 0 100%;
  transform: translate3d(var(--x, 0px), 0, 0) scale(var(--s, 1));
  opacity: var(--o, 1);
  visibility: visible;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
  transition: transform .62s var(--ease-out), opacity .48s var(--ease-out),
              background-color .24s var(--ease);
}
/* while a drag is in flight the cards follow the finger directly, so the
   transition has to be off; ui.js puts `is-dragging` on the panel for exactly
   that */
.meet.is-dragging .meet__card { transition: background-color .2s var(--ease); }

.meet__stage { overflow: visible; }

/* the five positions of the fan, in the panel's own colours */
.meet__card { background: #17181B; color: var(--text); }
.meet__card:nth-child(5n+1) { background: var(--band-light); color: var(--ink); }
.meet__card:nth-child(5n+2) { background: #FFD3AE; color: var(--ink); }
.meet__card:nth-child(5n+3) { background: var(--accent); color: var(--accent-ink); }
.meet__card:nth-child(5n+4) { background: #2C2F34; color: var(--text); }
.meet__card:nth-child(5n+5) { background: #3B3F46; color: var(--text); }
.meet__card.is-active { background: var(--accent); color: var(--accent-ink); }
.meet__card:hover { background: var(--paper); color: var(--ink); }

/* the panel's foot: the note on the left, the pager and the counter on the
   right, back from where the grid hid them */
.meet__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin: 26px 0 0;
}
.meet__note { display: block; color: var(--muted); max-width: 46ch; margin: 0; }
.meet__nav { display: inline-flex; align-items: center; gap: 10px; }
.meet__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 48px; padding: 0;
  background: transparent; color: var(--text);
  border: 1px solid var(--line-2);
}
.meet__arrow svg { width: 30px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.meet__arrow:hover, .meet__arrow:focus-visible {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.meet__count {
  display: block; margin: 0 0 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  color: var(--dim);
}
.meet__count b { color: var(--text); font-weight: 500; }

/* the Back button belongs to the opened member, so it only exists while one is
   open */
.meet.is-open .meet__back { display: inline-flex; }

@media (max-width: 720px) {
  .meet { --card: 62vw; }
  .meet__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .meet__count { margin: 0; }
}

/* The fan overlaps by design -- card 2 starts at .75 of card 1's width -- so the
   prints behind have to drop their captions, or the next member's name is set
   across the front card's own name. The front card is the only one captioned,
   which is also what makes the panel read as one member at a time. */
.meet__card:not(.is-active) .lead__name,
.meet__card:not(.is-active) .lead__role {
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.meet__card .lead__name, .meet__card .lead__role { transition: opacity .3s var(--ease); }

/* ==========================================================================
   THE SERVICE BANDS

   The Design Process page is zutari.com/services in this site's colours. That
   page is not a grid of cards: it is eleven full-bleed colour bands stacked
   edge to edge, each one a service, and each one laid out the same way --

     [ icon + SERVICE + n/11 ]  [ TITLE ]  [ copy + READ MORE ]  [ photo ]

   four columns, the photo top-aligned to the right, the button a black label
   with a square arrow beside it. Nothing is rounded, nothing is boxed, and the
   only division between one band and the next is the colour change.

   Two differences from Zutari's own page, and both are deliberate:

     * the ground is black, so the ramp runs white -> orange -> black -> peach ->
       deep orange -> grey -> orange instead of Zutari's eleven service hues;
     * there are SEVEN bands, not eleven, because the team has seven stages.
       The number in the corner reads /07 for that reason and is derived from
       the page, not typed.

   Each band carries its own ink: `--band-ink` is what its title, copy and
   button take, and it flips between black and paper down the ramp. The button
   reverses against its band -- ink on the light bands, paper on the dark ones --
   so it never lands on its own colour.
   ========================================================================== */

.bands { display: block; }

.band {
  --band-ink: var(--text);
  --band-rule: rgba(255, 255, 255, .22);
  display: grid;
  grid-template-columns: 168px minmax(0, 1.06fr) minmax(0, 1.04fr) clamp(220px, 22vw, 320px);
  gap: clamp(20px, 3vw, 52px);
  align-items: start;
  padding: clamp(46px, 6vw, 92px) max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  color: var(--band-ink);
  background: var(--bg);
}

/* the ramp */
/* `--band-bg` is the band's own background, carried separately from
   `background:` so the icon glyph and the button's label can be cut out of the
   block they sit on -- a hard-coded --bg is wrong on every band but the black
   one, which is how the icon square came out empty on the light bands. */
.band:nth-child(7n+1) { background: var(--band-light); --band-ink: #0B0B0C; --band-bg: #F7F3EC; --band-rule: rgba(11, 11, 12, .2); }
.band:nth-child(7n+2) { background: var(--grad-accent); --band-ink: #0B0B0C; --band-bg: #FF7A33; --band-rule: rgba(11, 11, 12, .22); }
.band:nth-child(7n+3) { background: #0B0B0C; --band-ink: var(--text); --band-bg: #0B0B0C; --band-rule: rgba(255, 255, 255, .22); }
.band:nth-child(7n+4) { background: #FFD3AE; --band-ink: #0B0B0C; --band-bg: #FFD3AE; --band-rule: rgba(11, 11, 12, .2); }
.band:nth-child(7n+5) { background: #B8330A; --band-ink: #FFFFFF; --band-bg: #B8330A; --band-rule: rgba(255, 255, 255, .28); }
.band:nth-child(7n+6) { background: #2C2F34; --band-ink: var(--text); --band-bg: #2C2F34; --band-rule: rgba(255, 255, 255, .2); }
.band:nth-child(7n+7) { background: var(--accent); --band-ink: #0B0B0C; --band-bg: #FF5A1F; --band-rule: rgba(11, 11, 12, .22); }

/* column 1: the icon square, the word SERVICE and the ordinal, stacked */
.band__meta { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: center; }
.band__icon {
  grid-row: span 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--band-ink);
  color: transparent;
}
.band__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--band-bg); stroke-width: 1.5; }
.band__kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; line-height: 1.3;
}
.band__num {
  font-family: var(--display); font-size: 22px; font-weight: 600;
  line-height: 1; letter-spacing: -.02em;
}

/* column 2: the stage, in the display face, one word where possible */
/* "Programming" is thirteen characters in a 300px column: at 54px it is wider
   than the column and runs over the copy beside it, so the size is capped where
   the longest stage name still fits, and the word is allowed to break as a last
   resort rather than overlap. */
.band__title {
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--display);
  font-size: clamp(26px, 2.55vw, 38px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--band-ink);
}

/* column 3: the copy, and the button under it */
.band__copy p {
  margin: 0 0 14px;
  color: var(--band-ink);
  font-size: 16.5px;
  line-height: 1.55;
}
.band__copy p:last-of-type { margin-bottom: 24px; }

.band__cta {
  display: inline-flex;
  align-items: stretch;
  color: var(--band-ink);
  text-decoration: none;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.band__cta-label {
  display: inline-flex; align-items: center;
  padding: 13px 16px;
  background: var(--band-ink);
  color: var(--band-bg);
}
.band__cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px;
  margin-left: 2px;
  background: var(--band-ink);
  color: var(--band-bg);
}
.band__cta-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.band__cta:hover .band__cta-label,
.band__cta:hover .band__cta-arrow { background: var(--accent); color: var(--accent-ink); }
.band:nth-child(7n+2) .band__cta:hover .band__cta-label,
.band:nth-child(7n+2) .band__cta:hover .band__cta-arrow,
.band:nth-child(7n+7) .band__cta:hover .band__cta-label,
.band:nth-child(7n+7) .band__cta:hover .band__cta-arrow { background: var(--band-light); color: var(--ink); }

/* column 4: the photograph, top-aligned, hairline-ruled like the page's own */
.band__media { margin: 0; }
.band__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(.78) sepia(.26) hue-rotate(-9deg) contrast(1.06) brightness(.95);
}

/* Zutari's bands are all one height on a wide screen; the four columns are
   aligned to a common baseline so the row reads as a table of its own */
@media (min-width: 1101px) {
  .band { min-height: 380px; }
}

@media (max-width: 1100px) {
  .band {
    grid-template-columns: 148px minmax(0, 1fr) clamp(180px, 26vw, 260px);
    grid-template-areas:
      "meta title media"
      "copy copy  media";
    gap: 18px clamp(16px, 2.4vw, 32px);
  }
  .band__meta { grid-area: meta; }
  .band__title { grid-area: title; }
  .band__copy { grid-area: copy; max-width: 62ch; }
  .band__media { grid-area: media; }
}

@media (max-width: 720px) {
  .band {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "meta"
      "title"
      "media"
      "copy";
    gap: 14px;
    padding-block: 40px;
  }
  .band__title { font-size: clamp(34px, 11vw, 48px); }
  .band__media { margin-bottom: 6px; }
}

/* ── the timeline ────────────────────────────────────────────────────────
   Zutari's about page turns its history into a timeline: a dark photograph
   holds still behind the reader, and a hairline down the middle of the page
   fills as they scroll. Each year in the left column is huge and quiet until
   the line reaches it, at which point the year, its title and its description
   come up to full strength — so the page is not "there from the beginning",
   it is being written as it is read.

   What is ours rather than Zutari's:

     * the backdrop is the team's own photograph (an awards ceremony), not a
       landscape, and it sits under the site's near-black rather than a grey
       wash;
     * the line fills in the accent orange, and each stop is the team's seven
       awards, not a corporate history;
     * the still backdrop is done with `position: sticky` on the picture rather
       than `background-attachment: fixed`, which iOS ignores and which makes
       a full-screen repaint on every scroll frame on the desktop.

   Without scripting the section is a plain, fully legible list: `.tl--live`
   is what dims and lifts the rows, and only ui.js adds it. */

.tl-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(64px, 9vw, 140px) 0 clamp(56px, 7vw, 110px);
  background: var(--ink);
  color: var(--text);
}

/* the photograph, pinned behind the reader for the length of the section */
.tl-band__bg {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  margin-bottom: -100vh;
  pointer-events: none;
}
.tl-band__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.62) sepia(.24) hue-rotate(-8deg) contrast(1.06) brightness(.72);
  opacity: .55;
}
.tl-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 11, 12, .96) 0%, rgba(11, 11, 12, .74) 34%,
                    rgba(11, 11, 12, .9) 78%, var(--ink) 100%);
}

.tl-band__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* the statement above the list */
.tl-head { max-width: 880px; margin: 0 auto clamp(40px, 6vw, 76px); }
.tl-head__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(44px, 8.4vw, 124px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-align: center;
  color: var(--paper);
}
.tl-head__lede {
  max-width: 42ch;
  margin: clamp(18px, 2.6vw, 30px) auto 0;
  color: rgba(255, 255, 255, .74);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.62;
}

/* the list and its rule */
.tl { position: relative; }
.tl__rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, .16);
  z-index: 0;
}
.tl__bar {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

.tl__list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }

.tl__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
  align-items: start;
  padding: clamp(30px, 3.6vw, 52px) 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.tl__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.tl__year {
  justify-self: end;
  padding-right: clamp(20px, 3.2vw, 52px);
  font-family: var(--display);
  font-size: clamp(46px, 6.4vw, 96px);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.045em;
  color: var(--paper);
  transition: color .6s cubic-bezier(.16, 1, .3, 1);
}

.tl__mark {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: .26em;
}
.tl__mark svg {
  width: 18px;
  height: 15px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  transition: stroke .6s cubic-bezier(.16, 1, .3, 1),
              transform .6s cubic-bezier(.16, 1, .3, 1);
  transform: rotate(180deg) scale(1);
}

.tl__body {
  padding-left: clamp(20px, 3.2vw, 52px);
  max-width: 50ch;
}
.tl__title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(19px, 1.8vw, 27px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--text);
  transition: color .6s cubic-bezier(.16, 1, .3, 1);
}
.tl__desc {
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: 15.5px;
  line-height: 1.62;
  transition: color .6s cubic-bezier(.16, 1, .3, 1);
}

/* The quiet state is scoped to `.tl--live`, which only ui.js adds. A reader
   with scripting off -- or who has asked for less motion -- therefore gets the
   full-strength list, not a timeline stuck at half contrast with nothing to
   light it up. */
.tl--live .tl__item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.16, 1, .3, 1),
              transform .85s cubic-bezier(.16, 1, .3, 1);
}
.tl--live .tl__item.is-on { opacity: 1; transform: none; }

.tl--live .tl__year { color: rgba(255, 255, 255, .24); }
.tl--live .tl__mark svg {
  stroke: rgba(255, 255, 255, .32);
  transform: rotate(180deg) scale(.82);
}
.tl--live .tl__title { color: rgba(255, 255, 255, .52); }
.tl--live .tl__desc { color: rgba(255, 255, 255, .38); }

.tl__item.is-on .tl__year { color: var(--paper); }
.tl__item.is-on .tl__mark svg {
  stroke: var(--accent);
  transform: rotate(180deg) scale(1);
}
.tl__item.is-on .tl__title { color: var(--text); }
.tl__item.is-on .tl__desc { color: rgba(255, 255, 255, .74); }

.tl__aside {
  margin: clamp(28px, 3.4vw, 44px) auto 0;
  max-width: 62ch;
  color: rgba(255, 255, 255, .5);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 760px) {
  .tl__item {
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 16px;
    padding: 26px 0;
  }
  .tl__rule { left: 14px; }
  .tl__year {
    grid-column: 2;
    justify-self: start;
    padding: 0 0 8px;
    font-size: clamp(38px, 13vw, 58px);
  }
  /* the rule runs at 14px in the 30px mark column: the 18px tick is set 5px in,
     so its centre lands on the line and not beside it */
  .tl__mark { grid-column: 1; grid-row: 1 / span 2; justify-content: flex-start; padding: 6px 0 0 5px; }
  .tl__body { grid-column: 2; padding-left: 0; }
  .tl__title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tl--live .tl__item { opacity: 1; transform: none; transition: none; }
  .tl__year, .tl__mark svg, .tl__title, .tl__desc { transition: none; }
}

/* ── the team deck: the label on the left, the prints on the right ────────
   The section is one row, the way Zutari's people pages are: a narrow column
   of type on the left -- kicker, "Meet our team", the note -- with the pager
   sitting at its foot, and the fanned deck filling the right column and
   aligned to the page's right edge. Nothing centres itself: the label is
   flush left, the prints are flush right, and the arrows sit under the label,
   so the eye goes type -> photograph -> next.

   The cards are one near-black plate each. The old ramp painted a different
   colour per position, which put an orange or peach chip beside a portrait --
   a caption shouting louder than the face above it. The fan now reads the way
   a stack of prints does: by scale, by shadow and by the order it overlaps.
   The name and role sit on the photograph's own foot, under a short deep
   scrim, with an orange rule over the front card. */

.meet { --card: clamp(236px, 28vw, 396px); }

.meet__body {
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  grid-template-areas:
    "intro view"
    "foot  view"
    "detail detail";
  column-gap: clamp(24px, 4vw, 72px);
  row-gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.meet__intro { grid-area: intro; align-self: start; max-width: 27ch; }
.meet__view { grid-area: view; min-width: 0; }
.meet__detail { grid-area: detail; }
.meet__foot {
  grid-area: foot;
  align-self: end;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 14px; margin: 0;
}
/* the bar's two links belong to the old panel; the header already offers both */
.meet__links { display: none; }

.meet__kicker {
  display: block;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.meet__title {
  margin: 0 0 24px;
  font-family: var(--display);
  font-size: clamp(42px, 4vw, 62px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.036em;
  text-transform: uppercase;
}
.meet__title > span,
.meet__title > em { display: block; margin: 0; }
.meet__title em { font-style: normal; color: var(--accent); }
.meet__note { display: block; margin: 0; max-width: 30ch; color: var(--muted); }

/* the deck is as wide as the fan it draws -- 1.55 front cards -- and is pushed
   to the column's right edge, so the prints line up with the page's gutter
   instead of stopping in the middle of an empty column */
.meet__deck {
  position: relative;
  display: block;
  width: calc(var(--card) * 1.55);
  height: calc(var(--card) * 1.3333);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.meet__card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card);
  height: 100%;
  transform-origin: 0 100%;
  transform: translate3d(var(--x, 0px), 0, 0) scale(var(--s, 1));
  opacity: var(--o, 1);
  overflow: hidden;
  visibility: visible;
  outline: 1px solid rgba(255, 255, 255, .07);
  outline-offset: -1px;
  background: #141519;
  color: var(--text);
  border: 0; padding: 0; cursor: pointer; text-align: left;
  box-shadow: 0 34px 72px rgba(0, 0, 0, .6);
  transition: transform .62s var(--ease-out), opacity .48s var(--ease-out),
              box-shadow .3s var(--ease);
}
/* one plate for all twelve: the ramp's five colours are overridden here rather
   than deleted above, because those rules still carry the fan's proportions */
.meet__card:nth-child(n),
.meet__card.is-active,
.meet__card:hover { background: #141519; color: var(--text); }
.meet__card img,
.meet__card .meet__photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the scrim is short and deep, so the photograph keeps its subject and only
   its foot goes dark enough to carry white type */
.meet__card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  z-index: 1;
  background: linear-gradient(180deg,
              rgba(6, 6, 7, 0) 0%,
              rgba(6, 6, 7, .16) 40%,
              rgba(6, 6, 7, .76) 78%,
              rgba(6, 6, 7, .92) 100%);
  pointer-events: none;
}

.lead__name {
  position: absolute;
  left: 0; right: 0; bottom: 38px;
  z-index: 2;
  padding: 0 clamp(16px, 1.6vw, 22px);
  font-family: var(--display);
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.012em;
  text-transform: none;
  color: #fff;
}
.lead__role {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  z-index: 2;
  padding: 0 clamp(16px, 1.6vw, 22px);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
  opacity: 1;
}
.meet__card.is-active::before {
  content: "";
  position: absolute;
  left: clamp(16px, 1.6vw, 22px);
  bottom: 76px;
  z-index: 2;
  width: 24px; height: 2px;
  background: var(--accent);
}

/* the way in: a small outlined square in the corner, quiet until the card is
   the front one, orange under the pointer */
.meet__go {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(9, 9, 10, .34);
  color: #fff;
  opacity: 0;
  transition: opacity .22s var(--ease), background-color .22s var(--ease),
              border-color .22s var(--ease), color .22s var(--ease);
}
.meet__card.is-active .meet__go,
.meet__card:hover .meet__go,
.meet__card:focus-visible .meet__go { opacity: 1; }
.meet__card:hover .meet__go {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.meet__go svg { flex: none; width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; }

/* the pager: two square buttons, then the count, at the foot of the label's
   column so it reads as part of the type block rather than as a toolbar */
.meet__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: transparent; color: var(--text);
  border: 1px solid var(--line-2);
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease);
}
.meet__arrow svg { width: 26px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.meet__arrow:hover, .meet__arrow:focus-visible {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.meet__count {
  display: flex; align-items: baseline; gap: 5px;
  margin: 0 0 0 6px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .14em;
  color: var(--dim);
}
.meet__count b { color: var(--text); font-weight: 500; }

@media (max-width: 1080px) {
  .meet { --card: clamp(220px, 26vw, 320px); }
}

/* a phone stacks the two columns, label first, and the prints then run to the
   same left gutter as the type */
@media (max-width: 900px) {
  .meet { --card: clamp(200px, 54vw, 280px); }
  .meet__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "view" "foot" "detail";
    row-gap: 26px;
  }
  .meet__intro { max-width: none; }
  .meet__title { font-size: clamp(36px, 10vw, 52px); margin-bottom: 18px; }
  .meet__title > span,
  .meet__title > em { display: inline; margin-right: .2em; }
  .meet__note { max-width: 46ch; }
  .meet__deck { margin: 0 auto 0 0; }
  .meet__foot { margin-top: 0; }
}

/* the pager stays one row on a phone -- two buttons, then the count -- since
   the older panel turned it into a centred column when it was a full-width
   toolbar rather than the foot of the label's own column */
@media (max-width: 720px) {
  .meet { --card: min(54vw, 280px); }
  .meet__foot { flex-direction: row; align-items: center; gap: 14px; }
  .meet__count { margin: 0 0 0 6px; }
}

/* ── the opened member ────────────────────────────────────────────────────
   Picking a card opens a band under the two columns: the name first, then the
   portrait with the paragraph and the two counts beside it. The markup nests
   the portrait, the paragraph and the seal inside .md__media, so the wrapper is
   dissolved with `display: contents` and its children take grid areas of their
   own -- that is what puts the paragraph beside the picture rather than under
   it, with no markup moved.

   The Back button moved out of the panel's bar and into this band, because it
   closes this band: at the top of the section it floated in space a long way
   from what it was for. */
.meet.is-open .meet__detail {
  display: block;
  margin-top: clamp(30px, 4vw, 58px);
}
.meet__back {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 26px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  transition: color .2s var(--ease);
}
.meet__back::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
}
.meet__back:hover, .meet__back:focus-visible { color: var(--accent); background: none; }

.meet .md {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  grid-template-areas:
    "top   top"
    "photo side";
  column-gap: clamp(28px, 4vw, 72px);
  row-gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.meet .md__media { display: contents; }
.meet .md__top {
  grid-area: top;
  display: flex; flex-direction: column-reverse; align-items: flex-start;
  gap: 16px; margin: 0;
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--line);
}
.meet .md__name {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 600;
  line-height: .94;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--text);
}
.meet .md__name em { font-style: normal; }
.meet .md__pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.meet .md__pills li {
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.meet .md__pills li:first-child {
  border-color: rgba(255, 90, 31, .45);
  color: var(--accent);
}
.meet .md__photo {
  grid-area: photo;
  margin: 0;
  max-width: 380px;
}
.meet .md__photo img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
}
.meet .md__side { grid-area: side; display: block; }
.meet .md__bio {
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  max-width: 54ch;
  color: var(--muted);
}
.meet .md__stats {
  display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 56px);
  margin: 0; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.meet .md__stats div { display: flex; flex-direction: column; gap: 8px; }
/* the markup puts the number in the dt and its caption in the dd, so the term
   carries the figure and the definition carries the words */
.meet .md__stats dt {
  font-family: var(--display); font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600; letter-spacing: -.02em; color: var(--text);
}
.meet .md__stats dd {
  margin: 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
}
.meet .md__seal { display: none; }

@media (max-width: 900px) {
  .meet .md {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "photo" "side";
  }
  .meet .md__photo { max-width: none; }
}

/* ── without a script, the twelve are a strip, not a fan ──────────────────
   The fan is written by ui.js: --x, --s and --o arrive per card, and the panel
   is marked `is-live` at the same moment. So the absolute positioning belongs
   to `.is-live`, and the default is a strip of the twelve that scrolls
   sideways with every caption in place -- which is also what a reader with
   scripting off, or a page whose script failed, gets instead of twelve cards
   piled on the same spot. The pager is hidden there, because there is nothing
   for it to page. */
.meet__deck {
  display: flex;
  gap: 12px;
  width: 100%;
  height: auto;
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.meet__card {
  position: relative;
  flex: 0 0 var(--card);
  height: calc(var(--card) * 1.3333);
  scroll-snap-align: start;
}
.meet.is-live .meet__deck {
  display: block;
  width: calc(var(--card) * 1.55);
  height: calc(var(--card) * 1.3333);
  margin: 0 0 0 auto;
  overflow: visible;
}
.meet.is-live .meet__card {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
}
.meet:not(.is-live) .meet__card .lead__name,
.meet:not(.is-live) .meet__card .lead__role { opacity: 1; }
.meet:not(.is-live) .meet__card .meet__go,
.meet:not(.is-live) .meet__foot { display: none; }

/* ── the flex carousel ────────────────────────────────────────────────────
   The row of fundraiser photographs, drawn through invisible liquid glass:
   React Bits' FlexCarousel, ported to this site's plain JavaScript (the
   component and its WebGL engine live in tools/tigears/flex-carousel.js, are
   bundled with ogl by the build, and mount on [data-flex-carousel]).

   The photographs are already in the page as a list of real <img> elements,
   because the engine needs them before it can draw anything -- and because a
   reader without scripting, or on a browser with no WebGL2, must still get the
   pictures. That list IS the fallback: a strip that scrolls sideways. The
   engine hides it and puts its canvas in its place.

   The canvas carries the same warm tint as every other photograph on the site,
   so the row does not read as a different medium dropped into the page. */
.fund-carousel {
  position: relative;
  height: clamp(320px, 42vw, 560px);
  margin: 24px 0 0;
}

.flex-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
  outline: none;
}
.flex-carousel.is-live canvas {
  filter: saturate(.78) sepia(.26) hue-rotate(-9deg) contrast(1.06) brightness(.95);
}
.flex-carousel[data-hover='open'] { cursor: zoom-in; }
.flex-carousel[data-hover='close'] { cursor: zoom-out; }
.flex-carousel[data-dragging] { cursor: grabbing; }
.flex-carousel:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

/* the source list: the fallback strip, and the engine's own image elements */
.flex-carousel__source {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.flex-carousel__source li {
  flex: 0 0 auto;
  height: 64%;
  /* start, not centre: a centred first snap point shifts the strip left on
     load and opens the page on half of the first photograph */
  scroll-snap-align: start;
}
.flex-carousel__source img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.flex-carousel.is-live .flex-carousel__source { display: none; }

/* the read-out: the title of the photograph at the centre, then the count */
.flex-carousel__caption {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--flex-carousel-half) * var(--flex-carousel-lift, 1) + 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  pointer-events: none;
  text-align: center;
  opacity: 0;
  animation: flex-carousel-reveal 900ms ease both;
}
.flex-carousel.is-ready .flex-carousel__caption { opacity: 1; }
.flex-carousel__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--text);
  animation: flex-carousel-title 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.flex-carousel__title:empty { display: none; }
.flex-carousel__subtitle {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .6;
}
.flex-carousel__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  opacity: .85;
  transition: opacity 400ms ease;
}
.flex-carousel.is-focus-open .flex-carousel__count { opacity: 0; }
.flex-carousel__digits { display: inline-flex; }
.flex-carousel__digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
}
.flex-carousel__reel {
  display: flex;
  flex-direction: column;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.flex-carousel__reel span { height: 1em; }
.flex-carousel__slash { opacity: .6; }
.flex-carousel__total { color: var(--dim); }

.flex-carousel__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes flex-carousel-title {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes flex-carousel-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .flex-carousel__caption, .flex-carousel__title { animation: none; }
  .flex-carousel__reel { transition: none; }
}

@media (max-width: 760px) {
  .fund-carousel { height: clamp(280px, 76vw, 400px); }
  .flex-carousel__source li { height: 60%; }
}