/* =============================================================================
   Test page — homepage concept, 2026-08-04
   -----------------------------------------------------------------------------
   Loaded ONLY on page-home-v2.php. Every selector is scoped under .tp so nothing
   here can reach the live homepage.

   The brief: the hero already reads as an architecture practice, everything
   below it reads as a generic corporate template. This is the "below" rebuilt
   against mmoser.com / woodsbagot.com / big.dk / unispace.com.

   Three rules those four share, and this follows:
     1. Monochrome. Photography supplies the colour; the brand accent is demoted
        to a functional link colour so it stops fighting the project imagery.
     2. Restraint. No pill badges, stat counters, gradients, or drop shadows.
     3. Scale and space. Big light display type, wide-tracked small metadata,
        hairline rules, and a lot of air.

   Same typeface as the live site (Inter). The difference is treatment, not font.
   ========================================================================== */

.tp {
  --ink:        #14161a;
  --ink-60:     rgba(20, 22, 26, 0.60);
  --ink-40:     rgba(20, 22, 26, 0.40);
  --line:       rgba(20, 22, 26, 0.14);
  --paper:      #f7f6f3;
  --accent:     var(--ia-teal-text, #00767a);

  --gap:        clamp(64px, 9vw, 152px);
  --shell:      1320px;
  --pad:        clamp(20px, 5vw, 64px);

  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* The concept page reuses .page-wrapper (footer.php closes it), but that class carries
   `max-width:1280px; align-items:center; gap:30px` from the main stylesheet. Centred
   flex items do NOT stretch, so every section was shrinking to its content width and the
   whole page was capped at 1280 — the presence map measured 767px on a 1568 viewport.
   Neutralised here only; the live homepage's .page-wrapper is untouched. Width control
   moves to .tp-shell (content) and the map's own width calc (full-bleed). */
.tp.page-wrapper {
  max-width: none;
  align-items: stretch;
  gap: 0;
  padding-bottom: 0;
}

.tp .tp-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* --- shared atoms --------------------------------------------------------- */

/* Eyebrows carry the brand teal. This is the one place the accent appears in the
   monochrome layout, which is exactly how the reference sites use a brand colour:
   as a small, consistent marker rather than decoration spread across every element.
   Uses --ia-teal-text (#00767A), which measures 5.07:1 on this background — the
   original #00A6A7 is 2.80:1 and would fail AA at 11px. */
.tp .tp-eyebrow {
  margin: 0 0 clamp(28px, 3vw, 44px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.tp .tp-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: gap 0.25s ease, border-color 0.25s ease;
}
.tp .tp-textlink:hover { gap: 14px; border-bottom-color: var(--ink); }

.tp .tp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.tp .tp-section-head .tp-eyebrow { margin-bottom: 0; }

.tp .tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 16px 40px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  transition: background 0.25s ease, color 0.25s ease;
}
.tp .tp-btn:hover { background: transparent; color: var(--ink); }

/* --- 1. statement --------------------------------------------------------- */

.tp .tp-statement { padding: var(--gap) 0 clamp(48px, 6vw, 88px); }

.tp .tp-statement__lead {
  margin: 0;
  /* 2026-08-05: was max-width:20ch, which held the line in a narrow column against the left
     edge with most of the row empty. Runs the full shell width now. */
  max-width: none;
  font-size: clamp(34px, 5.6vw, 78px);
  font-weight: 300;               /* the live site uses 700 here — weight is most of the tell */
  line-height: 1.06;
  letter-spacing: -0.035em;
  /* `balance` evens the line lengths, which meant the line kept sitting well short of the
     right edge even after the max-width came off — it was undoing the change. `pretty` fills
     each line and only protects against a one-word last line. */
  text-wrap: pretty;
}

/* The two proof figures (150+, 12) pulled out of the meta and set large, side by side.
   Still the v2 discipline: static (no animated counter), light display weight to match the
   lead, teal only — the scale is the highlight, not a heavier weight or a box. 2026-08-07. */
/* Two left-aligned columns, each = one figure + its meta stacked under it, so the numbers
   and their captions line up: 150+ over Practice, 12 over Sectors. max-content columns keep
   both stacks flush-left next to each other rather than spread across the row. 2026-08-07. */
.tp .tp-figures {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  column-gap: clamp(48px, 9vw, 132px);
  margin-top: clamp(40px, 5vw, 72px);
}
.tp .tp-figure { display: flex; flex-direction: column; }
.tp .tp-stat__num {
  font-size: clamp(56px, 8.5vw, 108px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tp .tp-stat__plus { font-weight: 300; }
.tp .tp-stat__label {
  margin-top: clamp(10px, 1.2vw, 18px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.tp .tp-figure__meta { margin-top: clamp(32px, 4vw, 56px); max-width: 30ch; }
.tp .tp-meta-k,
.tp .tp-meta-v { display: block; }
.tp .tp-meta-k {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.tp .tp-meta-v { font-size: 15px; line-height: 1.5; color: var(--ink); }

/* --- 2. clients: full-width band ----------------------------------------- */

/* No heading: a row of recognisable client names explains itself, and the label was
   doing nothing the content wasn't. Runs edge to edge rather than inside .tp-shell so
   it reads as a band across the page. */
.tp .tp-clients {
  padding: clamp(40px, 5vw, 72px) 0 0;
}

.tp .tp-clients__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 44px) clamp(28px, 4.5vw, 76px);
  width: min(1800px, calc(100% - (2 * var(--pad))));
  margin: 0 auto;
  padding: clamp(26px, 3vw, 40px) 0;
  list-style: none;
}
.tp .tp-clients__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(26px, 3vw, 38px);
  font-size: clamp(15px, 1.45vw, 20px);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink-60);
  white-space: nowrap;
}
/* Real logos, greyscaled to match the monochrome page.
   Capped on BOTH axes, not just height. The set is a mix of long wordmarks and square
   marks — Cloudera is 8.2:1, HERE is 1.1:1 — so locking height alone made Cloudera eight
   times wider than HERE and the strip read as random sizes. With both caps each mark fills
   whichever axis it runs out of first, which is what evens out their optical weight. */
.tp .tp-clients__list li img {
  display: block;
  max-height: clamp(24px, 2.8vw, 36px);
  max-width: clamp(84px, 9vw, 132px);
  width: auto;
  height: auto;
  object-fit: contain;
  /* Full colour per client request 2026-08-07 (was greyscale + dimmed to 0.62). */
  filter: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.tp .tp-clients__list li img:hover { opacity: 1; }

@media (max-width: 700px) {
  .tp .tp-clients__list li { white-space: normal; }
}

/* --- 3. work -------------------------------------------------------------- */

.tp .tp-work { padding: clamp(40px, 5vw, 72px) 0 var(--gap); }

/* Full-bleed, to match the capability cards. Was capped at --shell with --pad gutters, so on
   a 1920 screen the tiles were ~400px inside a 1320 column. Edge to edge they are ~630px.
   The column gap tightens as the grid widens — at full bleed a 32px gutter next to a 0px
   outer margin reads as a mistake, so the tiles sit as a tight mosaic instead. */
.tp .tp-work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px) clamp(8px, 1vw, 16px);
  max-width: none;
  margin: clamp(36px, 4vw, 64px) 0 0;
  padding: 0;
}

/* The images bleed to the viewport edge but the captions must not — text hard against the
   screen edge reads as broken. Inset every caption, not just the outer ones, so they line up. */
.tp .tp-work__grid .tp-tile__row,
.tp .tp-work__grid .tp-tile__meta {
  padding-inline: clamp(10px, 1vw, 18px);
}

.tp .tp-tile { display: block; text-decoration: none; color: inherit; }

.tp .tp-tile__frame {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e9e7e2;
}
.tp .tp-tile__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tp .tp-tile:hover .tp-tile__frame img { transform: scale(1.04); }

.tp .tp-tile__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.tp .tp-tile__idx {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}
.tp .tp-tile__name {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.tp .tp-tile__meta {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-40);
}

/* "See all works" — text + arrow only, no background or box. Sits under the grid, left
   aligned inside the shell so it lines up with the "Selected work" eyebrow above. */
.tp .tp-seeall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(30px, 3.5vw, 52px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: none;
  border: 0;
  transition: gap 0.25s ease, color 0.25s ease;
}
.tp .tp-seeall:hover { gap: 16px; color: var(--accent); }
.tp .tp-seeall__arrow { transition: transform 0.25s ease; }
.tp .tp-seeall:hover .tp-seeall__arrow { transform: translateX(4px); }
/* Centre the "See all works" link under the work grid (the link is inline-flex). */
.tp .tp-work__more { text-align: center; }

/* --- 3b. quote band under the work grid ---------------------------------- */

/* The one moment of brand colour at scale. Everything else on the page is monochrome
   with teal only on the eyebrows, so a single full-bleed band reads as punctuation
   rather than decoration - and it lands right after the work, which is what gives the
   line its force.

   Background is --ia-teal-text (#00767A), NOT the brighter #00A6A7: white on the bright
   teal measures 2.99:1, which fails even the 3:1 large-text floor. White on #00767A is
   5.42:1 and passes at any size. */
/* 2026-08-05: the full-bleed teal band is gone. It used to be the one moment of brand colour
   at scale on the page; the accent is now carried by the quote mark and the payoff phrase
   only, on the normal page background, so the band no longer competes with the work above it. */
.tp .tp-quote {
  margin-top: clamp(64px, 8vw, 120px);
  padding: clamp(56px, 8vw, 120px) var(--pad);
  background: transparent;
  color: var(--ink);
  text-align: center;
}
/* Inter's “ is a small glyph relative to its font-size, so at the size the rest of
   the band uses it read as an artefact rather than a deliberate mark. Set much larger,
   with a negative bottom margin so it tucks against the first line instead of floating. */
.tp .tp-quote__mark {
  display: block;
  margin: 0 auto clamp(-26px, -2.2vw, -14px);
  font-size: clamp(90px, 9vw, 150px);
  font-weight: 400;
  line-height: 0.8;
  color: var(--accent);
  user-select: none;
}
.tp .tp-quote__text {
  max-width: 24ch;
  margin: 0 auto;
  font-size: clamp(25px, 3.6vw, 52px);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.tp .tp-quote__text em {
  font-style: normal;
  /* the payoff of the sentence — now the brand colour, so "not just rendered" is the phrase
     the eye lands on. --ia-teal-text (#00767A), which passes AA on this background;
     #00A6A7 measures 2.80:1 here and would not. */
  color: var(--accent);
}

@media (max-width: 700px) {
  .tp .tp-quote__text { max-width: none; }
}

/* --- 4. capability: three full-width cards ------------------------------- */

.tp .tp-capability {
  padding: var(--gap) 0;
}

/* Each card spans the shell: image one side, copy the other, alternating so the
   eye zig-zags down the page instead of marching. */
/* 2026-08-05: full-bleed. Was capped at --shell with a 1.15fr/1fr split and side padding,
   so the image only ever occupied about a third of the viewport. Now an exact 50/50 across
   the full width — the image IS half the screen — with the copy padded inside its own half
   instead of the card being padded as a whole. */
.tp .tp-cap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}
.tp .tp-cap--flip .tp-cap__media { order: 2; }

.tp .tp-cap__media {
  overflow: hidden;
  /* 4/3 rather than 16/10: at half the viewport this is what makes the image read big. */
  aspect-ratio: 4 / 3;
  background: #e9e7e2;
}

/* The card no longer carries padding, so the copy provides its own — and centres itself in
   the full height of the image beside it. */
.tp .tp-cap__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4.5vw, 88px) clamp(22px, 4vw, 72px);
}
.tp .tp-cap__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tp .tp-cap:hover .tp-cap__media img { transform: scale(1.03); }

.tp .tp-cap__idx {
  display: block;
  margin-bottom: 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tp .tp-cap__title {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.6vw, 50px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.tp .tp-cap__text {
  margin: 0 0 22px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--ink-60);
  max-width: 46ch;
}
.tp .tp-cap__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.tp .tp-cap__list li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.tp .tp-cap__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 5px; height: 1px;
  background: var(--accent);
}
/* Centred under the three cards. `margin: … auto` cannot centre an inline-flex box, so it is
   a flex box sized to its content instead. */
.tp .tp-capability__link {
  display: flex;
  width: fit-content;
  margin: clamp(40px, 5vw, 72px) auto 0;
}

@media (max-width: 820px) {
  .tp .tp-cap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tp .tp-cap--flip .tp-cap__media { order: 0; }   /* image always on top when stacked */
  .tp .tp-cap__media { aspect-ratio: 3 / 2; }
  .tp .tp-cap__body { padding: clamp(26px, 6vw, 40px) var(--pad); }
}

/* --- 5. presence ---------------------------------------------------------- */

.tp .tp-presence {
  padding: var(--gap) 0 clamp(48px, 6vw, 88px);
}
.tp .tp-presence__lead {
  /* 2026-08-05: was max-width:46ch, which held it in a narrow column on the left. */
  max-width: none;
  margin: clamp(28px, 3vw, 44px) 0 0;
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
/* Pins are positioned in % against THIS box, so it must be exactly the image box.
   An earlier pass put `padding: 0 var(--pad)` here, which made the box wider than the
   map and pushed every pin right - Melbourne and Sydney landed on New Zealand. Side
   gutters come from the width calc instead, never from padding on this element.

   2026-08-04: widened from max-width:1100px to near-full-bleed. Pins stay aligned
   because they are percentage-based and the box still equals the image box exactly. */
.tp .tp-presence__map {
  position: relative;
  width: min(1800px, calc(100% - (2 * var(--pad))));
  /* the element also carries .presence__map (needed for the pin rules), which brings
     max-width:1100px with it - override or the map can never go wider */
  max-width: none;
  margin: clamp(32px, 4vw, 64px) auto 0;
  padding: 0;
}
.tp .tp-presence__map .presence__worldmap {
  width: 100%;
  height: auto;
  display: block;
  /* 2026-08-07: colour restored to match the Locations page map (was greyscale contrast). */
  filter: none;
}

/* Pins. The base .map-pin rule (translate + absolute) comes from style.css; these override
   only colour/label so the monochrome treatment holds. */
.tp .tp-pin {
  position: absolute;
  /* Pops in like the Locations map: collapsed + transparent until the map scrolls into view
     (main.js adds .presence__map--visible to the shared .presence__map container), then
     springs to full size, staggered pin by pin. */
  transform: translate(-50%, -100%) scale(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  width: auto;
  height: auto;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tp .presence__map--visible .tp-pin {
  transform: translate(-50%, -100%) scale(1);
  opacity: 1;
}
/* Staggered cascade. The worldmap is child 1; the 13 pins are children 2–14. */
.tp .presence__map--visible .tp-pin:nth-child(2)  { transition-delay: 0.10s; }
.tp .presence__map--visible .tp-pin:nth-child(3)  { transition-delay: 0.18s; }
.tp .presence__map--visible .tp-pin:nth-child(4)  { transition-delay: 0.26s; }
.tp .presence__map--visible .tp-pin:nth-child(5)  { transition-delay: 0.34s; }
.tp .presence__map--visible .tp-pin:nth-child(6)  { transition-delay: 0.42s; }
.tp .presence__map--visible .tp-pin:nth-child(7)  { transition-delay: 0.50s; }
.tp .presence__map--visible .tp-pin:nth-child(8)  { transition-delay: 0.58s; }
.tp .presence__map--visible .tp-pin:nth-child(9)  { transition-delay: 0.66s; }
.tp .presence__map--visible .tp-pin:nth-child(10) { transition-delay: 0.74s; }
.tp .presence__map--visible .tp-pin:nth-child(11) { transition-delay: 0.82s; }
.tp .presence__map--visible .tp-pin:nth-child(12) { transition-delay: 0.90s; }
.tp .presence__map--visible .tp-pin:nth-child(13) { transition-delay: 0.98s; }
.tp .presence__map--visible .tp-pin:nth-child(14) { transition-delay: 1.06s; }
@media (prefers-reduced-motion: reduce) {
  .tp .tp-pin { opacity: 1; transform: translate(-50%, -100%) scale(1); transition: none; }
}
.tp .tp-pin--partner { z-index: 2; }
.tp .tp-pin__label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
  white-space: nowrap;
  /* 2026-08-05: was 10px/500 in --ink-60 and read as a faint smudge over the grey map.
     Bumped to 11px/700 in full --ink, with a paper chip behind it so it stays legible
     wherever it lands on the landmass. */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper, #f7f6f3);
  padding: 3px 6px;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(20, 22, 26, 0.16);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.tp .tp-pin:hover .tp-pin__label { opacity: 1; }

/* Pins sit only 2-3 apart in the stacking order, so in the dense Asia cluster a neighbouring
   pin painted over the label you were actually reading. Lift the hovered one clear of all
   of them. */
.tp .tp-pin:hover { z-index: 9999; }

.tp .tp-legend {
  display: flex;
  gap: 28px;
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.tp .tp-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.tp .tp-legend__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* Swapped 2026-08-05 — direct studios carry the brand colour, partner offices are neutral.
   Keep these in step with $tp_main_pin / $tp_partner_pin in page-home-v2.php or the legend
   starts lying about the map. */
/* Match the Locations page map: direct offices red, partner offices teal. */
.tp .tp-legend__dot--direct  { background: #E53935; }
.tp .tp-legend__dot--partner { background: #00A6A7; }

/* --- 6. contact ----------------------------------------------------------- */

.tp .tp-contact {
  padding: var(--gap) 0;
}
.tp .tp-contact__lead {
  margin: 0 0 clamp(32px, 4vw, 56px);
  font-size: clamp(32px, 5vw, 68px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

/* --- the live CTA banner and footer sit below; give them air -------------- */
.tp + .site-footer,
.tp .cta-banner { margin-top: 0; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .tp .tp-work__grid,
  .tp .tp-capability__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .tp .tp-work__grid,
  .tp .tp-capability__grid,
  .tp .tp-figures { grid-template-columns: 1fr; row-gap: clamp(36px, 8vw, 56px); }

  .tp .tp-statement__lead { max-width: none; }
  .tp .tp-section-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .tp .tp-btn { width: 100%; }
  .tp .tp-clients__list { gap: 8px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .tp .tp-tile__frame img { transition: none; }
  .tp .tp-tile:hover .tp-tile__frame img { transform: none; }
}

/* ============================================================================
   COUNTRY SELECTOR — three variants to choose between
   Only one ships. Each is self-contained so deleting the other two is clean.
   ========================================================================== */

/* --- A: inline typographic row ------------------------------------------- */
.tp .tp-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(18px, 2.4vw, 34px);
  margin-top: clamp(28px, 3vw, 44px);
}
.tp .tp-filter__btn {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 0;
  min-height: 34px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-40);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tp .tp-filter__btn:hover { color: var(--ink); }
.tp .tp-filter__btn.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.tp .tp-filter__n {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}
.tp .tp-filter__btn.is-active .tp-filter__n { color: var(--accent); }

/* --- filtering ------------------------------------------------------------ */
.tp .tp-tile.is-hidden { display: none; }


@media (max-width: 700px) {
  .tp .tp-filter { gap: 4px 16px; }
}