/* Metric-matched fallback for Space Mono.
   Measured in Chrome: Space Mono's advance width is 111.3% of Consolas, so mono text
   reflowed when the webfont swapped in — the article byline went from one line to two
   and pushed the body down 26px (CLS 0.096). Scaling the fallback removes the reflow
   without blocking render. Every mono element here sets an explicit unitless
   line-height, so size-adjust changes width only. Verified on Windows/Consolas;
   platforms without Consolas fall through to the stack below, unchanged. */
@font-face{font-family:'Space Mono Fallback';src:local('Consolas');size-adjust:111.3%}
/* Category landing pages. Tokens, type, spacing and interaction are lifted from the
   homepage so these read as the same site; everything is scoped to .category-page. */
.category-page{
  --ink:#151713;
  --ink-soft:#62675b;
  --ink-faint:#8a8f80;
  --paper:#f4f4ef;
  --surface:#e9ebe1;
  --frame:#e4e5df;
  --line:#d6d9cd;
  --rule:#c9cdbe;
  --accent:#d8ff33;
  --header-height:5.5rem;
  --shell:min(calc(100% - 2.5rem),82rem);
  --measure:46ch;
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Outfit','Segoe UI',system-ui,sans-serif;
  --mono:'Space Mono','Space Mono Fallback',Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.category-page *,.category-page *::before,.category-page *::after{box-sizing:border-box}
.category-page :where(h1,h2,h3,p,figure,figcaption,ul,ol){margin:0}
.category-page a{color:inherit;text-underline-offset:.22em}
.category-page img{display:block;max-width:100%;height:auto}
.category-page ::selection{background:var(--accent);color:var(--ink)}
.cat-root{scroll-padding-top:calc(5.5rem + 1.5rem);scroll-behavior:smooth}

/* ---------- Chrome, identical to the case-study and blog headers ---------- */
.cat-header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.cat-header-inner{width:var(--shell);margin-inline:auto;min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.cat-brand{display:inline-flex;align-items:center;gap:.8rem;font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap}
.cat-brand>span{display:grid;place-items:center;width:2.5rem;height:2.5rem;background:var(--ink);color:var(--paper);border-radius:.25rem;font-size:.7rem;transform:rotate(-5deg)}
.cat-nav{display:flex;align-items:center;gap:1.75rem;font-size:.88rem}
.cat-nav a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none}
.cat-nav a:hover{text-decoration:underline}
.cat-nav a[aria-current='page']{font-weight:500;text-decoration:underline;text-underline-offset:.35em}
.cat-nav .cat-nav-cta{padding:.6rem 1rem;min-height:2.6rem;background:var(--accent);border-radius:999px;white-space:nowrap}
.cat-shell{width:var(--shell);margin-inline:auto}

/* ---------- Compact opening ---------- */
.cat-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding-block:1.5rem .25rem;color:var(--ink-soft);font-family:var(--mono);font-size:.68rem;letter-spacing:.04em}
.cat-breadcrumb a{text-decoration:none}
.cat-breadcrumb a:hover{text-decoration:underline}
.cat-breadcrumb [aria-current='page']{color:var(--ink-faint)}

.cat-open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:end;gap:1.5rem 3rem;padding-block:clamp(1.25rem,2.5vw,2rem) clamp(1.5rem,3vw,2.25rem)}
.cat-open h1{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,1.5rem + 2vw,3.1rem);line-height:1.08;letter-spacing:-.03em}
.cat-intro{max-width:52ch;margin-top:.9rem;color:var(--ink-soft);font-size:1.0625rem;line-height:1.65}
.cat-count{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}

/* Category switcher — a real link per destination, current one marked */
.cat-switch{display:flex;flex-wrap:wrap;gap:.5rem;padding-block:1rem;border-block:1px solid var(--line)}
.cat-switch a{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  min-height:48px;padding:.7rem 1.35rem;
  border:1px solid transparent;border-radius:999px;
  color:var(--ink-soft);font-size:1rem;text-decoration:none;
  transition:background-color .2s,color .2s;
}
.cat-switch a:hover{background:#e5e6df;color:var(--ink)}
.cat-switch a[aria-current='page']{background:var(--ink);color:var(--paper);font-weight:500}
.cat-switch .cat-switch-count{font-family:var(--mono);font-size:.75rem;opacity:.7}

/* ---------- Gallery ---------- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,3vw,2.75rem) clamp(1.5rem,2.2vw,2rem);
  align-items:start;
  padding-block:clamp(2rem,3.5vw,3rem) clamp(2.5rem,5vw,4rem);
}
.cat-card{position:relative;display:flex;flex-direction:column;min-width:0}
.cat-media{
  position:relative;
  aspect-ratio:var(--cat-frame,1);
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--frame);
  overflow:hidden;
}
/* <picture> is only a format switch; it must not introduce a box of its own. */
.cat-media picture{display:contents}
.cat-media img{
  width:100%;height:100%;
  object-fit:contain;
  padding:clamp(.5rem,1.2vw,1rem);
  transition:transform .5s var(--ease);
}
.cat-card:hover .cat-media img,.cat-card:focus-within .cat-media img{transform:scale(1.02)}
.cat-card h2 a::after{content:'';position:absolute;inset:0;z-index:1}
/* The play mark is a visible control, not decoration: video never starts on its own. */
.cat-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:3rem;height:3rem;
  border:1px solid rgba(244,244,239,.55);border-radius:50%;
  background:rgba(21,23,19,.62);color:#f4f4ef;font-size:.85rem;
  pointer-events:none;
}
.cat-body{padding-top:1rem}
.cat-discipline{font-family:var(--sans);font-size:.8125rem;line-height:1.5;color:var(--ink-soft)}
.cat-card h2{margin-top:.3rem;font-size:clamp(1.15rem,1rem + .5vw,1.45rem);font-weight:500;line-height:1.25;letter-spacing:-.02em;overflow-wrap:anywhere}
.cat-card h2 a{text-decoration:none}
.cat-card:hover h2 a{text-decoration:underline;text-underline-offset:.2em}
.cat-summary{margin-top:.5rem;color:var(--ink-soft);font-size:.9375rem;line-height:1.6}
.cat-actions{display:flex;flex-wrap:wrap;gap:.1rem 1.25rem;margin-top:.7rem}
.cat-actions>*{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-size:.875rem}
.cat-actions a{position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
  font-size:.875rem;text-decoration:none;border-bottom:1px solid var(--line);
}
.cat-actions a:hover{border-color:var(--ink)}
.cat-actions a span{transition:transform 180ms var(--ease)}
.cat-actions a:hover span{transform:translate(2px,-2px)}
.cat-actions .cat-action-primary{font-weight:500;border-bottom:1px solid var(--line)}
.cat-card:hover .cat-action-primary{border-color:var(--ink)}
.cat-card:hover .cat-action-primary span{transform:translate(2px,-2px)}
.cat-action-primary span{transition:transform 180ms var(--ease)}

/* ---------- Enquiry ---------- */
.cat-invite{padding-block:clamp(2.25rem,4vw,3.25rem);border-top:1px solid var(--rule)}
.cat-invite h2{max-width:22ch;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.25rem);line-height:1.18;letter-spacing:-.02em}
.cat-invite p{max-width:50ch;margin-top:.8rem;color:var(--ink-soft)}
.cat-invite-links{display:flex;flex-wrap:wrap;gap:.3rem 1.75rem;margin-top:1.25rem}
.cat-invite-links a{
  display:inline-flex;align-items:center;gap:.7rem;min-height:44px;
  font-size:.9rem;font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule);
}
.cat-invite-links a:hover{border-color:var(--ink)}
.cat-invite-links a span{transition:transform 180ms var(--ease)}
.cat-invite-links a:hover span{transform:translate(2px,-2px)}

/* The SEO internal-link band sits below the grid; keep it on-palette and quiet. */
.category-page .related-service-note{width:var(--shell);margin-inline:auto;padding-inline:0;border-top:1px solid var(--rule);background:transparent;color:var(--ink-soft);font-family:var(--sans);font-size:.85rem}
.category-page .related-service-note a{color:var(--ink);text-decoration-color:var(--rule)}

/* ---------- Responsive ---------- */
@media(min-width:1440px){.category-page{--shell:min(calc(100% - 8rem),82rem)}}
@media(max-width:1000px){
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-open{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media(max-width:760px){
  .category-page{--header-height:4.5rem}
  .cat-root{scroll-padding-top:calc(4.5rem + 1rem)}
  .cat-header-inner{flex-wrap:wrap;gap:.5rem 1rem;padding-block:.75rem}
  .cat-nav{gap:1rem;font-size:.82rem}
  .cat-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .cat-switch a{justify-content:space-between;padding:.7rem 1rem;font-size:.9375rem}
}
@media(max-width:560px){
  .category-page{--shell:calc(100% - 2.5rem)}
  .cat-nav{width:100%;justify-content:space-between;gap:.5rem}
  .cat-grid{grid-template-columns:minmax(0,1fr);gap:2rem}
}
@media(prefers-reduced-motion:reduce){
  .cat-root{scroll-behavior:auto}
  .category-page *,.category-page *::before,.category-page *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{
  .cat-header,.cat-invite,.cat-switch{display:none}
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}