/* =============================================================================
   Client-site base stylesheet — structure, not identity.
   Generated into every client site as the first half of assets/site.css; the
   client's theme.css follows it and supplies the tokens below.

   A THEME MUST DEFINE, or the site renders grey and unbranded:
     --paper --stone --ink --ink-2 --muted --line --brand --brand-2 --header-bg
     --font-head --font-body

   Nothing in this file names a client, a colour or a typeface. If a rule here
   only makes sense for one firm, it belongs in that firm's theme.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 500; line-height: 1.06; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* A keyboard user's first tab must not be twelve nav links deep. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: 12px 18px; font-weight: 600;
}
.skip:focus { left: 0; }

.wrap { max-width: 1220px; margin: 0 auto; padding: 0 40px; }

.eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 2.6px; text-transform: uppercase; color: var(--brand);
}
.lead { color: var(--ink-2); }

.link {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand);
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.link:hover { border-color: var(--brand); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 1px; text-transform: uppercase; padding: 14px 26px;
  border: 1px solid var(--brand); color: #fff; background: var(--brand);
  transition: background .18s, border-color .18s;
}
.btn:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; }
.btn.light { background: #fff; color: var(--brand); border-color: #fff; }
.btn.light:hover { background: #fff; color: var(--brand-2); }
.btn.outline-l { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn.outline-l:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ── header ───────────────────────────────────────────────────────────────── */
.head {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-in { display: flex; align-items: center; justify-content: space-between; height: 82px; gap: 24px; }
.brand img { height: 38px; width: auto; }
/* A label never wraps and the logo never shrinks. A two-word label ("Case
   studies") broke onto two lines at EVERY width, because .wrap caps the header
   and flex shrinks the links first; stopping that made flex crush the logo
   instead. So neither may give way: the gap and the tracking tighten with the
   viewport instead (unchanged from ~1790px up), and the burger takes over below
   the nav breakpoint (see "responsive" below). At a fixed 34px gap the full nav
   needs ~1210px. */
.brand { flex-shrink: 0; }
.navlinks { display: flex; gap: clamp(14px, 1.9vw, 34px); align-items: center; }
.navlinks a {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: clamp(1px, .12vw, 1.6px); text-transform: uppercase; color: var(--ink-2);
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.navlinks a:hover { color: var(--brand); }
.navlinks a.on { color: var(--brand); border-bottom-color: var(--brand); }

.head-r { display: flex; align-items: center; gap: 14px; }
.ph {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: .6px; color: var(--ink); white-space: nowrap;
}
.ph:hover { color: var(--brand); }
.burger { display: none; background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); padding: 6px; }

.navmenu { border-top: 1px solid var(--line); background: var(--paper); }
.navmenu .wrap { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 16px; }
.navmenu a {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2);
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.navmenu a.on { color: var(--brand); }
.navmenu .mm-cta { border-bottom: 0; color: var(--brand); }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 560px; height: 86vh; max-height: 820px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.hero-o { position: relative; z-index: 2; width: 100%; padding-bottom: 66px; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(12,12,14,.80) 0%, rgba(12,12,14,.16) 44%, rgba(12,12,14,.30) 100%);
}
.hero-in { color: #fff; max-width: 820px; }
.hero .eyebrow { color: rgba(255,255,255,.86); }
.hero h1 { font-size: 76px; margin-top: 16px; color: #fff; letter-spacing: -0.5px; }
.hero .hero-l { font-size: 19px; color: rgba(255,255,255,.92); margin-top: 16px; max-width: 46ch; }
.hero .cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ── page head (every page that is not home) ──────────────────────────────── */
.phead { padding: 76px 0 8px; }
.phead h1 { font-size: 60px; margin-top: 14px; }
.phead .lead { font-size: 18px; margin-top: 18px; max-width: 60ch; }

/* ── statement ────────────────────────────────────────────────────────────── */
.intro { padding: 104px 0 96px; text-align: center; }
.intro .eyebrow { display: block; }
.intro .big {
  font-family: var(--font-head); font-weight: 500; font-size: 33px;
  line-height: 1.34; color: var(--ink); max-width: 22ch; margin: 22px auto 0;
}
.intro .sub { font-size: 16px; color: var(--ink-2); max-width: 62ch; margin: 26px auto 0; line-height: 1.7; }

/* ── sector bands ─────────────────────────────────────────────────────────── */
.sector { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.sector .media { aspect-ratio: 3/2; overflow: hidden; }
.sector .media img { width: 100%; height: 100%; object-fit: cover; }
.sector .body { padding: 76px 84px; }
.sector.rev .media { order: 2; }
.sector h2 { font-size: 44px; margin: 14px 0 0; }
.sector .body p { font-size: 16.5px; color: var(--ink-2); margin: 18px 0 0; line-height: 1.72; }
.sector .body .proof { font-size: 13px; letter-spacing: .4px; color: var(--muted); margin-top: 14px; }
.sector .body .link { margin-top: 26px; }
.sector.tone { background: var(--stone); }

/* ── work grid ────────────────────────────────────────────────────────────── */
.work { padding: 104px 0; }
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.work-head h2 { font-size: 46px; margin-top: 12px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 48px; }
.tile .ph { display: block; overflow: hidden; aspect-ratio: 4/5; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tile:hover img { transform: scale(1.05); }
.tile figcaption {
  margin-top: 14px; font-family: var(--font-body); font-size: 12px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2);
}
.tile .pn { display: block; font-family: var(--font-head); font-size: 21px; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 2px; }

/* A tile with a case-study page is one link, photograph and caption together. */
.tile-a { display: block; color: inherit; }
.tile-a:hover .pn { color: var(--brand); }

/* ── case study ───────────────────────────────────────────────────────────────
   One photograph, the facts, the write-up, three photographs (see S.caseStudy).
   The lead is wide and the three below are 3:2, cropped when the web copies
   are made so that nothing important is left to object-fit. */
.cs { padding: 8px 0 88px; }
.cs-lead { margin-top: 36px; aspect-ratio: 16/9; overflow: hidden; }
.cs-lead img { width: 100%; height: 100%; object-fit: cover; }
.cs-facts {
  display: flex; flex-wrap: wrap; gap: 14px 52px; margin-top: 28px;
  padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cs-facts dt { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--muted); }
.cs-facts dd { margin-top: 4px; font-size: 15.5px; color: var(--ink); }
.cs-body { margin-top: 36px; max-width: 70ch; }
.cs-body p { font-size: 17px; color: var(--ink-2); line-height: 1.78; margin-top: 16px; }
.cs-body p:first-child { margin-top: 0; }
.cs-body h2 { font-size: 26px; margin-top: 36px; }
.cs-scope { list-style: none; margin-top: 12px; border-top: 1px solid var(--line); }
.cs-scope li { font-size: 15.5px; color: var(--ink-2); padding: 10px 0; border-bottom: 1px solid var(--line); }
.cs-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.cs-gallery figure { aspect-ratio: 3/2; overflow: hidden; }
.cs-gallery img { width: 100%; height: 100%; object-fit: cover; }
.cs-back { margin-top: 40px; }

/* What the client still owes, on the REVIEW copy only (a live build never
   writes one): a labelled empty frame the size of the thing that goes there. */
.cs-ph {
  display: flex; align-items: center; justify-content: center; height: 100%;
  border: 1.5px dashed var(--muted); background: var(--stone); padding: 18px; text-align: center;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted); line-height: 1.6;
}
.cs-ph-text { min-height: 150px; height: auto; }

/* ── prose ────────────────────────────────────────────────────────────────── */
.prose { padding: 64px 0 96px; }
.prose-in { display: grid; grid-template-columns: 1.35fr .65fr; gap: 64px; align-items: start; }
.prose .pc p { font-size: 17px; color: var(--ink-2); line-height: 1.78; margin-top: 20px; max-width: 66ch; }
.prose .pc p:first-child { margin-top: 0; }
.pa { border-top: 2px solid var(--ink); padding-top: 22px; }
.pa h3 { font-size: 20px; }
.pa ul { list-style: none; margin-top: 14px; }
.pa li { font-size: 15px; color: var(--ink-2); padding: 9px 0; border-bottom: 1px solid var(--line); }
.pc-fig { margin-bottom: 28px; aspect-ratio: 3/2; overflow: hidden; }
.prose .pc .pc-fig + p { margin-top: 0; }
.pa-fig { margin-top: 22px; aspect-ratio: 3/2; overflow: hidden; }
.pc-fig img, .pa-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── trust band ───────────────────────────────────────────────────────────────
   White at reduced opacity, NOT a named colour. The first version carried
   #EDE9E1 straight from the prototype's warm Limestone palette, which on
   Portland's cool grey read as a faint sepia wash on an otherwise neutral site
   — a brand decision hiding in the shared stylesheet. Opacity over --ink works
   in any theme, warm or cool, which is the point of this file. */
.trust { background: var(--ink); color: rgba(255,255,255,.86); padding: 80px 0; }
.trust .line { text-align: center; font-family: var(--font-head); font-size: 24px; color: #fff; margin: 0 auto 52px; max-width: 46ch; line-height: 1.4; }
/* auto-fit, not repeat(4): a firm with three facts worth stating should not
   get a hanging empty column, and a firm with five should not overflow. */
.trust .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 30px; }
.trust .n { font-family: var(--font-head); font-size: 40px; color: #fff; line-height: 1; }
.trust .l { font-family: var(--font-body); font-size: 12.5px; letter-spacing: 1px; color: rgba(255,255,255,.72); margin-top: 10px; text-transform: uppercase; }

/* ── areas ────────────────────────────────────────────────────────────────── */
.areas { padding: 88px 0; background: var(--stone); }
.areas h2 { font-size: 40px; }
.areas .lead { margin-top: 16px; max-width: 60ch; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chips li {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: .6px; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--paper); padding: 9px 16px;
}

/* ── contact ──────────────────────────────────────────────────────────────── */
.contact { padding: 104px 0; }
.contact-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
.contact h2 { font-size: 52px; margin-top: 14px; }
.contact p.lead { font-size: 17px; margin-top: 20px; max-width: 44ch; }
.contact .cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.details { border-top: 2px solid var(--ink); padding-top: 26px; }
.details dt { font-family: var(--font-body); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin-top: 22px; }
.details dt:first-child { margin-top: 0; }
.details dd { font-size: 16px; color: var(--ink); margin-top: 5px; line-height: 1.55; }
.details a:hover { color: var(--brand); }

/* The enquiry form (S.contact `form`). Fields are edged in --muted, not --line:
   a field's edge is what tells a person there is somewhere to type, and needs
   3:1 against the page (--line is 1.3:1). 16px type, or a phone zooms in on
   every field it focuses. Colour only from the theme's tokens, which the
   contrast test measures. */
.qf { margin-top: 30px; display: grid; gap: 18px; max-width: 600px; }
.qf-i { font-size: 15px; color: var(--ink-2); }
.qf label { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); }
.qf-o { font-weight: 400; color: var(--muted); }
.qf input, .qf textarea {
  display: block; width: 100%; margin-top: 7px; padding: 12px 14px;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink);
  background: var(--paper); border: 1px solid var(--muted); border-radius: 0;
}
.qf textarea { resize: vertical; min-height: 140px; }
.qf input:focus, .qf textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qf-pn { font-size: 13.5px; color: var(--muted); }
.qf-pn a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.qf .btn { justify-self: start; cursor: pointer; }
.qf .btn[disabled] { opacity: .6; cursor: default; }
.qf-s { min-height: 1.2em; font-size: 15px; font-weight: 600; color: var(--ink); }
.qf-s.err { border-left: 3px solid var(--accent, var(--brand)); padding-left: 12px; }
.qf-s a { text-decoration: underline; }
/* Sent: the form gives way to the confirmation (site.js adds `.sent`), which the
   page scrolls to. The tick is the accent as a fill, carrying --ink. */
.qf.sent > :not(.qf-done) { display: none; }
.qf-done { padding: 30px 32px; background: var(--stone); border-top: 3px solid var(--accent, var(--brand)); }
.qf-done:focus { outline: none; }
.qf-done h3 { display: flex; align-items: center; gap: 16px; font-size: 28px; line-height: 1.2; color: var(--ink); }
.qf-tick { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent, var(--brand)); color: var(--ink); }
.qf-tick svg { width: 24px; height: 24px; }
.qf-done p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.qf-done p a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.qf-again { margin-top: 20px; padding: 0 0 2px; background: none; border: 0; border-bottom: 1px solid var(--brand); cursor: pointer; }
/* The bot trap: off-screen, never display:none (the cruder bots skip a hidden input). */
.qf-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── footer ───────────────────────────────────────────────────────────────── */
footer { background: var(--stone); padding: 52px 0 44px; }
.foot { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
.foot img { height: 34px; width: auto; }
/* Accreditation marks (site.footerBadges). Larger than the logo on purpose: a
   badge shrunk to the logo's 34px is a smudge nobody can identify, and being
   identified is its only job. */
.foot .foot-b { display: flex; gap: 16px; align-items: center; }
.foot .foot-b img { height: 64px; }
.foot .fc { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-2); text-align: right; line-height: 1.8; }
.foot .fc a:hover { color: var(--brand); }
.foot .reg { color: var(--muted); font-size: 11px; }

/* ── responsive ───────────────────────────────────────────────────────────────
   The NAV boundary (the first block) MUST match NAV_BREAKPOINT in site.js. A
   test fails if the two drift, because the failure is invisible: an open menu
   that CSS has already stopped displaying still announces itself as expanded.

   It is wider than the layout's 960px on purpose. Eight links, the logo and a
   phone number need about 1100px; at 960 the header overflowed by up to 70px
   below ~1030px (a sideways scroll on small laptops, on main before BL-1048),
   and by more once "Work" became "Case studies". Measured, 961–1920px. */
@media (max-width: 1100px) {
  .navlinks { display: none; }
  .burger { display: block; }
}
@media (max-width: 960px) {
  .wrap { padding: 0 24px; }
  .hero { height: auto; min-height: 0; padding-top: 96px; }
  .hero h1 { font-size: 46px; }
  .hero-o { padding-bottom: 44px; }
  .phead { padding-top: 56px; }
  .phead h1 { font-size: 40px; }
  .sector { grid-template-columns: 1fr; }
  .sector .body { padding: 48px 28px; }
  .sector.rev .media { order: 0; }
  .sector .media { aspect-ratio: 16/10; }
  .sector h2 { font-size: 32px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .trust .grid { gap: 36px 24px; }
  .prose-in { grid-template-columns: 1fr; gap: 40px; }
  .contact-in { grid-template-columns: 1fr; gap: 40px; }
  .intro { padding: 72px 0 64px; }
  .intro .big { font-size: 26px; }
  .work { padding: 72px 0; }
  .work-head h2, .contact h2, .areas h2 { font-size: 34px; }
  .foot { justify-content: flex-start; }
  .foot .fc { text-align: left; }
  .cs-gallery { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .cs-facts { gap: 12px 30px; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .qf-row { grid-template-columns: 1fr; }
  .qf-done { padding: 24px 22px; }
  .qf-done h3 { font-size: 24px; gap: 14px; }
  .head-in { gap: 12px; }
  .ph { font-size: 12px; }
}

/* A work grid directly under a page head needs no gap of its own — the head
   has already provided it. Without this the tiles sat ~90px lower than the
   design, which on a phone is most of a screen of white before any work. */
.work.bare { padding-top: 24px; }
.work.bare .tiles { margin-top: 0; }

/* ── accreditation ────────────────────────────────────────────────────────── */
.accred { background: var(--stone); padding: 76px 0; }
.accred-in { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: center; }
.accred-b { width: 260px; height: auto; }
.accred-c h2 { font-size: 38px; }
.accred-c p { font-size: 17px; color: var(--ink-2); line-height: 1.78; margin-top: 18px; max-width: 62ch; }
/* What the approval covers — ruled like the page asides, so a certificate
   reads as a record rather than as another paragraph of praise. */
.accred-f { list-style: none; margin-top: 22px; max-width: 62ch; border-top: 1px solid var(--line); }
.accred-f li { font-size: 15px; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--line); }
.accred-c .accred-v { margin-top: 22px; }

/* Read by a screen reader, never shown: "(opens in a new tab)" on a link that
   does, so nobody is dropped on another site without being told. */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 960px) {
  .accred { padding: 56px 0; }
  /* The badge above the words, and smaller: at 260px it took most of a phone
     screen before a single line of the copy appeared. */
  .accred-in { grid-template-columns: 1fr; gap: 28px; justify-items: start; }
  .accred-b { width: 170px; }
  .accred-c h2 { font-size: 30px; }
}

/* The build credit. Quiet by design — it is an attribution on somebody else's
   site, so it sits below their own details and reads as a footnote. */
.credit {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
  font-family: var(--font-body); font-size: 12px; letter-spacing: .3px;
  color: var(--muted); text-align: center;
}
.credit a { color: var(--ink-2); font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.credit a:hover { color: var(--brand); border-color: var(--brand); }

.credit-legal { margin-bottom: 10px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.credit-legal a { color: var(--muted); font-weight: 500; border-bottom: 0; }
.credit-legal a:hover { color: var(--brand); }

/* ── legal pages ──────────────────────────────────────────────────────────── */
.legal { padding: 40px 0 96px; }
.legal-in { max-width: 760px; margin: 0 auto; }
.legal-lede { font-size: 17.5px; color: var(--ink-2); line-height: 1.78; margin-top: 16px; }
.legal-s { margin-top: 42px; }
.legal-s h2 { font-size: 25px; }
.legal-s p { font-size: 16.5px; color: var(--ink-2); line-height: 1.78; margin-top: 14px; }
.legal-s ul { margin-top: 14px; padding-left: 20px; }
.legal-s li { font-size: 16.5px; color: var(--ink-2); line-height: 1.72; margin-top: 8px; }
.legal-date { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* =============================================================================
   Filters, richer case studies, news, the team, stage cards (BL-1060, BL-1062).
   Structure only, like everything in this file: colours come from the theme's
   tokens, and a firm's own look is its theme.css.
   ========================================================================== */

/* ── filters ──────────────────────────────────────────────────────────────── */
.filters { padding: 28px 0 0; }
.filters ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.filters a {
  display: inline-flex; gap: 8px; align-items: baseline;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--line); padding: 10px 16px;
  transition: border-color .18s, color .18s, background .18s;
}
.filters a:hover { border-color: var(--ink); color: var(--ink); }
.filters a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters a span { color: var(--muted); font-weight: 500; letter-spacing: .4px; }
.filters a.on span { color: rgba(255,255,255,.78); }

/* ── a case study with a brief and a solution, and a long gallery ─────────── */
.cs-body.wide { max-width: none; }
.cs-parts { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 24px 64px; align-items: start; }
.cs-part h2 { font-size: 26px; margin-top: 0; }
.cs-part p { font-size: 17px; color: var(--ink-2); line-height: 1.78; margin-top: 16px; }
/* More than three photographs: columns that keep each one's own proportions,
   because an architect's portrait-format elevation cropped to a 3:2 box is no
   longer the building. */
.cs-gallery.many { display: block; columns: 2; column-gap: 18px; }
.cs-gallery.many figure { aspect-ratio: auto; break-inside: avoid; margin: 0 0 18px; }
.cs-gallery.many img { height: auto; }

/* ── news ─────────────────────────────────────────────────────────────────── */
.news-list { padding: 8px 0 96px; }
.news-y { font-size: 30px; margin: 56px 0 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.news-list .wrap > .news-y:first-child { margin-top: 28px; }
.news-list .wrap > .news-grid:first-child { margin-top: 36px; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
.news-c { display: block; color: inherit; }
.news-c .pic { display: block; aspect-ratio: 3/2; overflow: hidden; background: var(--stone); }
.news-c .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.news-c:hover .pic img { transform: scale(1.04); }
.news-c .nm { display: block; margin-top: 16px; }
.news-c time { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.news-c .nt { display: block; font-family: var(--font-head); font-size: 23px; line-height: 1.2; margin-top: 8px; color: var(--ink); }
.news-c:hover .nt { color: var(--brand); }
.news-c .nx { display: block; font-size: 15px; color: var(--ink-2); line-height: 1.62; margin-top: 10px; }
.news-latest { padding: 96px 0; }
.news-latest .news-grid { margin-top: 44px; }

.news-a { padding: 8px 0 88px; }
.news-a-in { max-width: 880px; }
.news-d { margin-top: 30px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
/* Natural proportions, capped in height: a newspaper cutting is portrait and a
   photograph is landscape, and neither should be cropped to fit a frame. */
.news-hero { margin-top: 20px; }
.news-hero img { display: block; margin: 0 auto; width: auto; height: auto; max-width: 100%; max-height: 640px; }
.news-body { margin-top: 32px; }
.news-body p { font-size: 17.5px; color: var(--ink-2); line-height: 1.8; margin-top: 18px; max-width: 66ch; }
.news-body p:first-child { margin-top: 0; }
.news-body a { color: var(--brand); border-bottom: 1px solid var(--line); }
.news-body a:hover { border-color: var(--brand); }
.news-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 44px; }
.news-gallery img { width: 100%; height: auto; }
.news-by { text-transform: none; letter-spacing: .2px; font-weight: 500; }
.news-by::before { content: "\00b7"; margin: 0 10px; }
/* "Share article": plain links, a row of round 44px targets (a thumb, one-handed). */
.news-share { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.news-share-l { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.news-share-b { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.news-share-b a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); transition: color .2s, border-color .2s, background-color .2s; }
.news-share-b a:hover, .news-share-b a:focus-visible { color: var(--brand); border-color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .news-share-b a { transition: none; } }
.news-back { margin-top: 44px; }

/* ── the team ─────────────────────────────────────────────────────────────────
   Two tiers. The directors (`featured`) each get a row: a portrait beside their
   name and standing, and their bio in full below it at a width that reads. Everyone
   else is a compact card; their bio opens in a wide panel (site.js builds it from
   the <details> in the card, which is also what a visitor without script gets). */
.team { padding: 80px 0 96px; }
.tm-lead { margin-top: 44px; display: grid; gap: 0; }
.tm-dir { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-areas: "ph tx" "ph body"; column-gap: 44px; align-content: start; padding: 40px 0; border-top: 1px solid var(--line); }
.tm-dir:last-child { border-bottom: 1px solid var(--line); }
.tm-dir .tm-ph { grid-area: ph; align-self: start; }
.tm-dir .tm-tx { grid-area: tx; }
.tm-dir .tm-body { grid-area: body; margin-top: 20px; max-width: 66ch; }
.tm-dir .tm-body p { font-size: 17px; color: var(--ink-2); line-height: 1.78; }
.tm-dir .tm-body p + p { margin-top: 14px; }
.tm.tm-dir h3 { margin-top: 0; font-size: 34px; }
.tm.tm-dir .tm-role { font-size: 16px; }
/* The cards share their rows (subgrid): photograph, name, role, qualifications, Contact, Read bio.
   A two-line job title in one card no longer pushes that card's Contact and Read bio below its
   neighbours', and the hairline over Read bio runs level across the row. The space between rows is
   each card's own bottom padding, because a subgrid's inner rows would otherwise inherit it as a gap.
   Where subgrid is unknown the cards simply stack, as they always did. */
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 24px; margin-top: 52px; }
.tm-grid > .tm { display: grid; grid-template-rows: subgrid; grid-row: span 6; padding-bottom: 44px; }
.tm-grid > .tm > .tm-ph { grid-row: 1; align-self: start; }
.tm-grid > .tm > h3 { grid-row: 2; }
.tm-grid > .tm > .tm-role { grid-row: 3; }
.tm-grid > .tm > .tm-q { grid-row: 4; }
.tm-grid > .tm > .tm-contact { grid-row: 5; justify-self: start; }
.tm-grid > .tm > .tm-bio { grid-row: 6; align-self: start; }
.tm-lead + .tm-grid { margin-top: 56px; }
.tm-ph { aspect-ratio: 4/5; overflow: hidden; background: var(--stone); }
.tm-ph img { width: 100%; height: 100%; object-fit: cover; }
.tm h3 { font-size: 21px; margin-top: 16px; line-height: 1.15; }
.tm-role { font-size: 14.5px; color: var(--ink-2); margin-top: 7px; }
.tm-q { font-size: 12.5px; color: var(--muted); margin-top: 4px; letter-spacing: .3px; }
.tm-contact { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); padding: 4px 0; border-bottom: 1px solid var(--line); transition: color .2s ease, border-color .2s ease; }
.tm-contact:hover { color: var(--ink); border-bottom-color: var(--ink); }
.tm-contact svg { flex: none; }
.tm-bio { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.tm-bio summary { cursor: pointer; list-style: none; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand); }
.tm-bio summary::-webkit-details-marker { display: none; }
.tm-bio summary::after { content: " +"; }
.tm-bio[open] summary::after { content: " \2013"; }
.tm-bio p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin-top: 10px; }

/* The wide panel a bio opens in. A <dialog>, so focus is held inside it, Escape
   closes it, and focus goes back to the button that opened it. */
.tm-dialog { border: 0; padding: 0; width: min(780px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); margin: auto; overflow: auto; background: var(--paper); color: var(--ink); }
.tm-dialog[open] { animation: tm-in .3s cubic-bezier(.2,.7,.2,1) both; }
.tm-dialog[open]::backdrop { animation: tm-fade .3s ease both; }
.tm-dialog.closing { animation: tm-out .2s ease both; }
.tm-dialog.closing::backdrop { animation: tm-fade-out .2s ease both; }
@keyframes tm-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes tm-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes tm-fade { from { opacity: 0; } }
@keyframes tm-fade-out { to { opacity: 0; } }
.tm-dlg-in { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0 36px; padding: 40px 44px 44px; }
.tm-dlg-in .tm-ph { grid-row: 1 / span 4; align-self: start; }
.tm-dlg-in h2 { font-size: 30px; font-weight: 400; line-height: 1.1; }
.tm-dlg-in .tm-role { font-size: 15.5px; }
/* The bio runs the full width of the box, under the portrait and the name, not in the portrait's column. */
.tm-dlg-in .tm-bio-body { grid-column: 1 / -1; margin-top: 30px; }
.tm-dlg-in .tm-bio-body p { font-size: 17px; color: var(--ink-2); line-height: 1.78; margin-top: 14px; }
.tm-dlg-in .tm-bio-body p:first-child { margin-top: 0; }
.tm-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--ink); border-radius: 50%; }
.tm-x:hover { background: var(--stone); }
.tm-x svg { width: 18px; height: 18px; }
body:has(.tm-dialog[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .tm-dialog[open], .tm-dialog[open]::backdrop, .tm-dialog.closing, .tm-dialog.closing::backdrop { animation: none; }
}

/* ── stage cards ──────────────────────────────────────────────────────────── */
.cards { padding: 96px 0; }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 28px; margin-top: 48px; border-top: 1px solid var(--ink); }
.cd { padding: 24px 0 8px; }
.cd-n { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--muted); }
.cd h3 { font-size: 25px; margin-top: 18px; }
.cd p { font-size: 15px; color: var(--ink-2); margin-top: 12px; line-height: 1.65; }
.cd ul { list-style: none; margin-top: 16px; }
.cd li { font-size: 14.5px; color: var(--ink-2); padding: 8px 0; border-top: 1px solid var(--line); }

@media (max-width: 960px) {
  .cs-parts { grid-template-columns: 1fr; gap: 28px; }
  .cs-gallery.many { columns: 1; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 22px; }
  .news-latest, .cards { padding: 72px 0; }
  .team { padding: 56px 0 72px; }
}
@media (max-width: 760px) {
  .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .tm-grid > .tm { padding-bottom: 36px; }
  .tm-dir { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "ph tx" "body body"; column-gap: 20px; padding: 28px 0; }
  .tm.tm-dir h3 { font-size: 26px; }
  .tm-dir .tm-body p { font-size: 16.5px; }
  .tm-dlg-in { grid-template-columns: 1fr; padding: 28px 24px 32px; }
  .tm-dlg-in .tm-ph { width: 110px; grid-row: auto; margin-bottom: 18px; }
}
@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-c .nt { font-size: 21px; }
}

/* A list or a quotation inside a news post. */
.news-body ul { list-style: none; margin-top: 18px; max-width: 66ch; border-top: 1px solid var(--line); }
.news-body li { font-size: 16.5px; color: var(--ink-2); padding: 11px 0; border-bottom: 1px solid var(--line); line-height: 1.6; }
.news-body blockquote { margin: 26px 0 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--line); max-width: 62ch; }
.news-body blockquote p { margin-top: 0; font-family: var(--font-head); font-size: 22px; line-height: 1.5; color: var(--ink); }

/* =============================================================================
   A page that opens on a photograph: the overlay header, the slideshow with its
   slow zoom, and the strip of accreditation marks. All opt-in (renderPage
   `overlay`, S.hero `slides`, site.footerMarks), so a site that asks for none
   of them is styled as before. Structure only: the colours are the theme's.
   ========================================================================== */

/* ── overlay header ───────────────────────────────────────────────────────────
   `html.js` is set by an inline script on an overlay page and nowhere else, so
   with no script the header is the ordinary solid sticky one: a transparent
   header that is never given its solid state would be white type on a white page. */
.head .lg-light { display: none; }
html.js .head.over {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
html.js .head.over .head-in { transition: height .3s ease; }
html.js .head.over:not(.solid) .lg-dark { display: none; }
html.js .head.over:not(.solid) .lg-light { display: block; }
html.js .head.over:not(.solid) .navlinks a,
html.js .head.over:not(.solid) .navlinks a:hover,
html.js .head.over:not(.solid) .navlinks a.on,
html.js .head.over:not(.solid) .ph,
html.js .head.over:not(.solid) .burger { color: #fff; }
/* Once scrolled: the ordinary header again, a touch translucent. */
html.js .head.over.solid {
  background: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
html.js .head.over:not(.solid) .navmenu { background: transparent; }

/* ── the slideshow ────────────────────────────────────────────────────────────
   Photographs stack in the hero and cross-fade; the one on show also zooms
   slowly (Ken Burns). The outgoing one keeps zooming until its fade has ended
   (site.js removes `run` then), or it would snap back to full size as it faded. */
.hero-show .hs { opacity: 0; transition: opacity 1s ease; }
.hero-show .hs.on { opacity: 1; }
.hero-show .hs.run { animation: hero-zoom 13s ease-out both; will-change: transform; }
.hero-show .hs:nth-of-type(4n+1) { transform-origin: 50% 60%; }
.hero-show .hs:nth-of-type(4n+2) { transform-origin: 30% 40%; }
.hero-show .hs:nth-of-type(4n+3) { transform-origin: 70% 55%; }
.hero-show .hs:nth-of-type(4n+4) { transform-origin: 40% 70%; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-show .hs.run { animation: none; }
  .hero-show .hs { transition: none; }
}

.hero-ctl { position: absolute; right: 0; bottom: 36px; z-index: 3; display: flex; align-items: center; gap: 4px; padding-right: max(24px, calc((100vw - 1220px) / 2 + 40px)); }
.hero-dot, .hero-pause { background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; color: #fff; }
.hero-dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; transition: background-color .25s ease; }
.hero-dot[aria-current="true"]::before { background: #fff; }
.hero-dot:hover::before { background: rgba(255,255,255,.55); }
.hero-pause { margin-left: 8px; }
.hero-pause svg { width: 16px; height: 16px; }
.hero-dot:focus-visible, .hero-pause:focus-visible, .hero-down:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* The round arrow that jumps to the next section. */
.hero-down {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin-top: 34px;
  border: 1.5px solid #fff; border-radius: 50%; color: #fff;
  transition: background-color .25s ease;
}
.hero-down:hover { background: rgba(255,255,255,.18); }
.hero-in .cta + .hero-down { margin-top: 26px; }

/* ── accreditation marks along the foot ───────────────────────────────────── */
.marks-strip { background: var(--marks-bg, var(--stone)); margin-top: 40px; }
.marks-strip ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 36px; padding: 30px 0; }
.marks-strip img { height: 52px; width: auto; max-width: 100%; }
@media (max-width: 960px) {
  .hero-ctl { padding-right: 24px; bottom: 28px; }
  .marks-strip ul { justify-content: center; gap: 22px 30px; }
  .marks-strip img { height: 44px; }
}

/* ── the firm's social profiles, a row of icons in the footer (site.footerSocial) ─
   Each target is 44px square (WCAG 2.5.8 asks for 24); the drawing inside is
   whatever the firm's own icon is, sized by height so a wide icon and a tall one
   sit level. The colour is the text's own (`currentColor`). */
.foot-social { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.foot-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: inherit; transition: background-color .2s ease; }
.foot-social svg { height: 20px; width: auto; display: block; }
.foot-social a:hover { background: rgba(255,255,255,.14); }
.foot-social a:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* ── lightbox ─────────────────────────────────────────────────────────────────
   Only for a page that opts in (engine lbLink): a.lb is a plain link until site.js
   finds <dialog> and adds .lb-on. The viewer's grounds are theme tokens, --lb-bg and
   --lb-scrim (a site that turns this on must define both); its controls are white. */
a.lb { display: block; position: relative; height: 100%; overflow: hidden; }
/* Where the picture is centred and shrink-wrapped (a news post's), so is the link: blank margins do not open it. */
.news-hero a.lb { display: table; height: auto; margin: 0 auto; }
.news-gallery a.lb { height: auto; }
a.lb.lb-on { cursor: zoom-in; }
a.lb.lb-on img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
a.lb.lb-on:hover img, a.lb.lb-on:focus-visible img { transform: scale(1.035); }
.lb-chip { position: absolute; right: 16px; bottom: 16px; padding: 11px 16px; font-family: var(--font-body); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: 1.8px; text-transform: uppercase; color: #fff; background: var(--lb-scrim); border: 1px solid rgba(255, 255, 255, .38); }

.lb-dialog { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; background: var(--lb-bg); color: #fff; overflow: hidden; }
.lb-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; animation: lb-in .3s ease both; }
.lb-dialog[open]::backdrop { background: var(--lb-bg); }
.lb-dialog.closing { animation: lb-out .3s ease both; }
.lb-dialog [hidden] { display: none !important; }

.lb-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.lb-count { font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: 1.6px; color: rgba(255, 255, 255, .82); }
.lb-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.lb-sharewrap { position: relative; }
.lb-btn { height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; border: 0; border-radius: 22px; background: transparent; color: #fff; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: 1.6px; text-transform: uppercase; transition: background .2s; }
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255, 255, 255, .16); }
.lb-btn svg { width: 20px; height: 20px; flex: none; }
.lb-x { width: 44px; padding: 0; border-radius: 50%; }
.lb-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 3; min-width: 190px; display: grid; padding: 6px; background: var(--lb-scrim); border: 1px solid rgba(255, 255, 255, .2); }
.lb-menu a, .lb-menu button { display: block; width: 100%; padding: 12px 14px; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.2; }
.lb-menu a:hover, .lb-menu button:hover, .lb-menu a:focus-visible, .lb-menu button:focus-visible { background: rgba(255, 255, 255, .14); }

.lb-dialog :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-menu a:focus-visible, .lb-menu button:focus-visible { outline-offset: -2px; }
.lb-stage { position: relative; min-height: 0; touch-action: pan-y pinch-zoom; }
.lb-fig { position: absolute; inset: 0 80px; display: grid; place-items: center; }
.lb-one .lb-fig { inset: 0 24px; }
.lb-img { grid-area: 1 / 1; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.lb-nav { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: 50%; background: rgba(255, 255, 255, .13); color: #fff; cursor: pointer; transition: background .2s; }
.lb-nav:hover, .lb-nav:focus-visible { background: rgba(255, 255, 255, .28); }
.lb-nav svg { width: 22px; height: 22px; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-cap { padding: 10px 24px 0; text-align: center; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .86); }

/* The film strip: every photograph, the one on view lit and ringed. */
.lb-strip { list-style: none; position: relative; display: flex; gap: 8px; padding: 14px 16px 18px; overflow-x: auto; scrollbar-width: thin; }
.lb-strip li { flex: none; }
.lb-strip button { display: block; position: relative; width: 88px; height: 60px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .5; outline-offset: 3px; transition: opacity .25s; }
.lb-strip button:hover { opacity: .85; }
.lb-strip button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.lb-strip img { display: block; width: 100%; height: 100%; object-fit: cover; }

.lb-toast { position: absolute; left: 50%; bottom: 112px; padding: 10px 18px; transform: translate(-50%, 8px); background: var(--lb-scrim); border: 1px solid rgba(255, 255, 255, .22); font-family: var(--font-body); font-weight: 500; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.lb-toast.on { opacity: 1; transform: translate(-50%, 0); }

body:has(.lb-dialog[open]) { overflow: hidden; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-out { to { opacity: 0; } }

@media (max-width: 700px) {
  .lb-fig { inset: 0; }
  .lb-nav { width: 44px; height: 44px; background: rgba(255, 255, 255, .2); }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .lb-btn span { display: none; }
  .lb-share { width: 44px; padding: 0; }
  .lb-strip button { width: 64px; height: 46px; }
  .lb-toast { bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-dialog[open], .lb-dialog.closing { animation: none; }
  a.lb.lb-on img, .lb-btn, .lb-nav, .lb-strip button, .lb-toast { transition: none; }
  a.lb.lb-on:hover img, a.lb.lb-on:focus-visible img { transform: none; }
}


/* ── hma theme ─────────────────────────────────── */
/* =============================================================================
   Harris McCormack Architects — white and a clean off-white, near-black, the
   charcoal of their logo and its orange A.

   THE BRAND IS THEIRS. The charcoal is #3C3C3B and the orange is #F49834,
   both read from the fills in their own logo files (the "A" and the word
   ARCHITECTS are orange on charcoal). The grounds are white and a neutral
   off-white, like their old site's; an earlier draft used a warm limestone,
   and it read pink next to their photographs. Dark surfaces (the footer, the
   numbers band) are near-black, as their own footer is, so the charcoal is
   left to be the colour of type and of the logo.

   ORANGE IS NEVER TEXT ON LIGHT. #F49834 on white is 2.2:1, so on a light
   ground it only ever fills (a button, a rule, a dot) and carries near-black
   type, or sits on the dark band as numerals (7.9:1). Text on a light ground is
   --brand charcoal, which is 10.6:1.

   Jost for headings — a geometric sans in the Futura family, which is the
   right ancestor for a practice whose own building is a 1930s Bauhaus
   roadhouse — and Inter for reading.

   The contrast test measures every token below on the grounds it appears on.
   ========================================================================== */

:root {
  --paper: #FFFFFF;
  --stone: #F4F4F3;
  --ink: #1F1F1E;
  --ink-2: #4A4A49;
  /* Small text on --paper AND on --stone: 5.3:1 and 4.8:1. Measured on both,
     because measuring one is how Hardy's footer was missed. */
  --muted: #6B6B69;
  --line: #E1E1DF;

  /* From their logo, not chosen. */
  --brand: #3C3C3B;
  --brand-2: #1F1F1E;
  --accent: #F49834;
  /* Dark surfaces: near-black, as their own footer is. */
  --dark: #1B1B1A;
  /* The strip their accreditation marks sit on (dark grey marks, drawn for a light ground). */
  --marks-bg: #E9E9E7;
  /* The photograph viewer: near-black, as the dark surfaces are, so the pictures carry the colour. */
  --lb-bg: #0F0F0E;
  --lb-scrim: rgba(18, 18, 17, .86);

  --header-bg: rgba(255, 255, 255, .94);

  --font-head: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

/* Jost is drawn to be light at large sizes. */
h1, h2, h3 { font-weight: 400; letter-spacing: -0.01em; }

/* ── header ───────────────────────────────────────────────────────────────────
   Solid: a slim white bar, a little see-through, with the logo as it is. Over the
   home page's photograph (site.js) it starts tall and transparent, in white, and
   settles into the slim one once the page is scrolled. */
.brand img { height: 36px; transition: height .3s ease; }
.head-in { height: 64px; }
html.js .head.over:not(.solid) .head-in { height: 96px; }
html.js .head.over:not(.solid) .brand img { height: 46px; }
html.js .head.over.solid { box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }
.navlinks a.on { color: var(--ink); border-bottom-color: var(--accent); }
.navlinks a:hover { color: var(--ink); }
.navmenu a.on { color: var(--ink); }

/* ── type ─────────────────────────────────────────────────────────────────── */
.eyebrow { color: var(--ink-2); }
.eyebrow::before {
  content: ""; display: inline-block; width: 26px; height: 2px;
  background: var(--accent); vertical-align: middle; margin-right: 12px; position: relative; top: -1px;
}
.hero .eyebrow { color: rgba(255,255,255,.92); }
.intro .eyebrow { display: inline-block; }
.link { color: var(--ink); }
.link:hover { border-color: var(--accent); }
.phead h1 { font-weight: 300; }

/* ── buttons: the orange A, with charcoal on it ───────────────────────────── */
.btn { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn.ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.light { background: #fff; border-color: #fff; color: var(--ink); }
.btn.light:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ── hero ─────────────────────────────────────────────────────────────────── */
/* The whole first screen, as theirs is. */
.hero { height: auto; min-height: 100vh; min-height: 100svh; max-height: none; }
/* Room for the header above the text, so a short screen grows the hero rather than
   running the headline under the logo. */
.hero-o { padding-top: 112px; padding-bottom: 76px; }
@media (max-height: 700px) {
  .hero-o { padding-bottom: 64px; }
  .hero-down { display: none; }
}
.hero-img { object-position: center 45%; }
/* Three scrims, because the photographs change under the type: one from the top
   so the white navigation is readable over a bright sky, one from the left and
   one from the foot so the headline is readable over the busiest part of
   whichever photograph is showing. */
.hero::after {
  background:
    linear-gradient(to bottom, rgba(18,18,17,.52) 0%, rgba(18,18,17,0) 26%),
    linear-gradient(to right, rgba(18,18,17,.58) 0%, rgba(18,18,17,.34) 46%, rgba(18,18,17,0) 100%),
    linear-gradient(to top, rgba(18,18,17,.76) 0%, rgba(18,18,17,.10) 52%, rgba(18,18,17,.26) 100%);
}
.hero h1 { font-weight: 400; max-width: 15ch; text-shadow: 0 2px 28px rgba(0,0,0,.32); }
/* The text lines up with the logo and the navigation above it, not with the middle of the page. */
.hero-in { max-width: 1220px; }
.hero .hero-l { max-width: 60ch; text-shadow: 0 1px 18px rgba(0,0,0,.4); }
@media (min-width: 961px) {
  .hero h1 { font-size: 80px; letter-spacing: -2px; line-height: 1.02; }
  .hero .hero-l { font-size: 20px; }
}

/* ── a page banner: the home hero's shorter sibling ───────────────────────────
   The same photograph, header, scrims and slow zoom, about half the height, with
   the page's own title in the headline's place. */
.hero.hero-page { min-height: 420px; min-height: clamp(420px, 62svh, 560px); }
.hero.hero-page .hero-o { padding-top: 124px; padding-bottom: 52px; }
.hero.hero-page h1 { font-size: 44px; letter-spacing: -1px; line-height: 1.04; max-width: 22ch; }
.hero.hero-page .hero-l { font-size: 17px; }
@media (min-width: 961px) {
  .hero.hero-page h1 { font-size: 64px; letter-spacing: -1.6px; }
  .hero.hero-page .hero-l { font-size: 19px; }
}

/* ── the opening statement ────────────────────────────────────────────────── */
.intro .big { font-weight: 300; max-width: 28ch; }
@media (min-width: 961px) {
  .intro .big { font-size: 38px; line-height: 1.32; }
}

/* ── the work: three across, in the proportions the photographs were taken in ─ */
.tile .ph { aspect-ratio: 3/2; }
.tile .pn { font-size: 24px; }
.tile figcaption { margin-top: 16px; }
@media (min-width: 961px) {
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
}

/* ── a project page ───────────────────────────────────────────────────────── */
@media (min-width: 961px) {
  /* The proportions the photograph was taken in, not a 16:9 slice of it. */
  .cs-lead { aspect-ratio: 3/2; }
}
.cs-facts { border-top-color: var(--ink); border-bottom-color: var(--line); }
.cs-facts dd { font-family: var(--font-head); font-size: 19px; }
.cs-part h2 { font-size: 28px; font-weight: 400; }
.cs-part h2::before { content: ""; display: block; width: 28px; height: 2px; background: var(--accent); margin-bottom: 14px; }

/* ── the charcoal band: orange numerals, as the logo's A ──────────────────── */
.trust { background: var(--dark); }
.trust .n { color: var(--accent); font-weight: 300; font-size: 44px; }

/* ── the footer: near-black, with their reversed logo and their marks ─────────
   The marks are dark grey on transparent, drawn for a light ground, so they sit
   on a light strip along the foot, as they do on the old site. */
footer { background: var(--dark); color: rgba(255,255,255,.78); padding: 64px 0 0; }
.foot { align-items: center; }
.foot-social { color: #fff; }
.foot .fc { color: rgba(255,255,255,.78); font-size: 13px; }
.foot .fc a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.28); }
.foot .fc a:hover { color: #fff; border-bottom-color: var(--accent); }
.foot .reg { color: rgba(255,255,255,.62); }
.foot img { height: 46px; }
.credit { border-top-color: rgba(255,255,255,.14); color: rgba(255,255,255,.62); padding-bottom: 34px; }
.credit a { color: rgba(255,255,255,.86); border-bottom-color: rgba(255,255,255,.3); }
.credit a:hover { color: #fff; border-bottom-color: var(--accent); }
.credit-legal a { color: rgba(255,255,255,.72); }
.credit-legal a:hover { color: #fff; }
.marks-strip { margin-top: 0; }
.marks-strip ul { padding: 26px 0; }
@media (min-width: 961px) {
  .marks-strip img { height: 56px; }
}

/* ── where we work ────────────────────────────────────────────────────────────
   A line and a link on the home page; and the page itself, an area at a time. */
.where-band { padding: 8px 0 72px; }
.where-in { display: flex; justify-content: space-between; align-items: center; gap: 32px; border-top: 1px solid var(--line); padding-top: 44px; }
.where-band p { font-family: var(--font-head); font-weight: 300; font-size: 26px; line-height: 1.38; max-width: 44ch; margin-top: 12px; }
.area { padding-top: 64px; }
.area h2 { font-size: 34px; font-weight: 400; }
.area-l { margin-top: 12px; font-size: 17px; color: var(--ink-2); max-width: 70ch; line-height: 1.7; }
.area-l a { border-bottom: 1px solid var(--line); }
.area-l a:hover { border-bottom-color: var(--ink); }
/* A project's place, linked to its area on that page. */
.cs-facts dd a { border-bottom: 1px solid var(--line); }
.cs-facts dd a:hover { border-bottom-color: var(--accent); }
@media (max-width: 960px) {
  .where-in { flex-direction: column; align-items: flex-start; gap: 20px; }
  .where-band p { font-size: 22px; }
  .area { padding-top: 48px; }
  .area h2 { font-size: 28px; }
}

/* ── what we do ───────────────────────────────────────────────────────────── */
.cards { background: var(--stone); }
.cd-grid { border-top: 2px solid var(--ink); gap: 0 32px; }
.cd h3 { font-weight: 400; }
/* Two-line titles ("Statutory Requirements") must not start their list lower than the one-line ones. */
/* Seven RIBA stages (0 to 6): four and three on a desktop, never five and two. */
@media (min-width: 961px) { .cd h3 { min-height: 2.2em; } .cd-grid { grid-template-columns: repeat(4, 1fr); } }
.cd li { border-top-color: var(--line); }

/* ── news ─────────────────────────────────────────────────────────────────── */
.news-c .nt { font-weight: 400; }
.news-c:hover .nt { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.news-y { font-weight: 300; }

/* ── the team ─────────────────────────────────────────────────────────────── */
.tm-ph { background: var(--stone); }
.tm h3, .tm-dlg-in h2 { font-weight: 400; }
.tm.tm-dir h3 { font-weight: 300; letter-spacing: -.3px; }
.tm-dialog { box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.tm-dialog::backdrop { background: rgba(18, 18, 17, .62); }

/* ── a pull quotation ─────────────────────────────────────────────────────── */
.quote { background: var(--stone); padding: 96px 0; }
.quote blockquote { max-width: 860px; margin: 0 auto; text-align: center; }
.quote blockquote::before { content: ""; display: block; width: 48px; height: 3px; background: var(--accent); margin: 0 auto 34px; }
.quote p { font-family: var(--font-head); font-weight: 300; font-size: 30px; line-height: 1.42; color: var(--ink); }
.quote .by { margin-top: 28px; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }

/* ── ArcHaus ──────────────────────────────────────────────────────────────── */
/* The opening words beside the front of the building (not a second full-width photograph under the one the page opens on). */
.archaus-intro { padding: 72px 0 24px; }
.archaus-intro-in { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.archaus-intro p { font-family: var(--font-head); font-weight: 300; font-size: 26px; line-height: 1.45; max-width: 36ch; }
.ai-photo { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--stone); }
.ai-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 961px) {
  .archaus-intro-in { grid-template-columns: 1fr 1fr; gap: 72px; }
}
/* The rest of the gallery: two rows of five, the building today and then the archive. */
.archaus-more { padding: 64px 0 96px; }
.archaus-more h2 { font-size: 34px; font-weight: 300; }
.more-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 28px; }
.more-grid figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.more-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.timeline-s { padding: 40px 0 88px; }
.timeline { list-style: none; border-left: 2px solid var(--line); margin: 36px 0 0 6px; }
.timeline li { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 6px 28px; padding: 0 0 38px 34px; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 9px; width: 14px; height: 14px; background: var(--accent); border-radius: 50%; border: 3px solid var(--paper); box-sizing: content-box; }
.timeline .yr { font-family: var(--font-head); font-weight: 600; font-size: 38px; line-height: 1; }
.timeline .tt { display: block; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.timeline p { font-size: 16.5px; color: var(--ink-2); line-height: 1.75; max-width: 62ch; }
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.mosaic figure { overflow: hidden; background: var(--stone); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaic .w2 { grid-column: span 2; aspect-ratio: 4/3; }
.mosaic .w3 { grid-column: span 3; aspect-ratio: 3/2; }
.mosaic .w6 { grid-column: span 6; aspect-ratio: 21/9; }
.then-now { padding: 8px 0 24px; }
.then-now h2 { font-size: 34px; font-weight: 300; margin-bottom: 26px; }
.then-now figcaption { margin-top: 10px; font-family: var(--font-body); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.then-now .mosaic { gap: 22px 14px; }
.then-now .mosaic figure { background: none; overflow: visible; aspect-ratio: auto; }
.then-now .mosaic img { aspect-ratio: 4/3; }

/* ── sustainability ───────────────────────────────────────────────────────── */
/* Two halves, each one a pair of equal columns so the page sits level (the first
   draft stacked a centred quotation, a narrow column of small type and a strip
   of marks, and leaned left): the position and the proof, then the practice. */
.sust-split { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 961px) {
  .sust-split { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .sust-flip { align-items: stretch; }
}

.sust-open { padding: 88px 0 96px; }
.sust-q::before { content: ""; display: block; width: 48px; height: 3px; background: var(--accent); margin-bottom: 30px; }
.sust-q p { font-family: var(--font-head); font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.38; color: var(--ink); }
.sust-q .by { margin-top: 24px; font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.sust-intro { margin-top: 40px; font-size: 17px; line-height: 1.78; color: var(--ink-2); max-width: 60ch; }

.sust-sketch img { width: 100%; height: auto; display: block; }
/* Each mark on its own white tile: they are third-party logos drawn for white, and
   set loose on limestone they look like debris. Under the sketch they share its width. */
.marks { display: flex; gap: 14px; align-items: stretch; margin-top: 36px; }
.marks a { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); padding: 16px 18px; height: 92px; }
.marks a:hover { border-color: var(--ink); }
.marks img { height: auto; max-height: 52px; width: auto; max-width: 100%; object-fit: contain; }

.sust-impact { background: var(--stone); padding: 96px 0; }
.sust-photo { position: relative; margin: 0; min-height: 440px; overflow: hidden; background: var(--line); }
.sust-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* The four principles ride the foot of the photograph, as they did on the old page. */
.sust-pillars { list-style: none; position: absolute; left: 0; right: 0; bottom: 0; padding: 84px 32px 28px; background: linear-gradient(to top, rgba(27, 27, 26, .88), rgba(27, 27, 26, 0)); color: #fff; }
.sust-pillars li { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 5px 0; }
/* A drawn plus, not a "+" in orange: orange is never the colour of text here (see the palette test). */
.sust-pillars li::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 13px; vertical-align: -1px; background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat; }

.sust-text h2 { font-size: clamp(30px, 3.2vw, 40px); font-weight: 300; margin-top: 14px; }
.sust-text p { margin-top: 20px; font-size: 17px; line-height: 1.78; color: var(--ink-2); max-width: 62ch; }
.sust-text .sust-tech-h { margin-top: 30px; color: var(--ink); font-weight: 500; }
.sust-tech { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 18px 0 8px; }
.sust-tech li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.sust-tech li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

@media (max-width: 960px) {
  .sust-open { padding: 64px 0 72px; }
  .sust-impact { padding: 72px 0; }
  .sust-photo { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .sust-photo { aspect-ratio: 4 / 5; }
  .sust-pillars { padding: 72px 22px 22px; }
  .sust-tech { grid-template-columns: 1fr; }
  .marks { gap: 10px; }
  .marks a { padding: 12px 10px; height: 76px; }
}

/* ── vacancies ────────────────────────────────────────────────────────────── */
.vac { padding: 24px 0 96px; }
.vac ul { list-style: none; border-top: 2px solid var(--ink); }
.vac li { display: grid; grid-template-columns: 1.1fr 1.4fr 230px; gap: 8px 40px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.vac h3 { font-size: 26px; }
.vac p { font-size: 16px; color: var(--ink-2); }
.vac .acts { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
/* A vacancy's words together in the middle column, however long the specification (BL-2760). */
.vac .vac-text > * + * { margin-top: 10px; }
.vac .vac-list { list-style: disc; border: 0; padding-left: 20px; font-size: 16px; color: var(--ink-2); }
.vac .vac-list li { display: list-item; padding: 0; border: 0; }
.vac .vac-list li + li { margin-top: 4px; }
.vac .vac-closes { font-size: 14px; color: var(--muted); }
.vac .vac-none { font-size: 17px; color: var(--ink-2); padding: 28px 0; border-top: 2px solid var(--ink); }

@media (max-width: 960px) {
  .quote { padding: 64px 0; }
  .quote p { font-size: 23px; }
  .archaus-intro p { font-size: 22px; }
  .more-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .timeline li { grid-template-columns: 1fr; padding-left: 26px; }
  .timeline .yr { font-size: 32px; }
  .mosaic { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mosaic .w2, .mosaic .w3 { grid-column: span 1; }
  .mosaic .w6 { grid-column: span 2; aspect-ratio: 16/9; }
  .vac li { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .vac .acts { justify-content: flex-start; }
  .trust .n { font-size: 36px; }
}
@media (max-width: 560px) {
  .brand img { height: 40px; }
  html.js .head.over:not(.solid) .brand img { height: 40px; }
  .mosaic .w2, .mosaic .w3 { grid-column: span 2; }
  .more-grid { grid-template-columns: repeat(2, 1fr); }
}
/* The menu button sits to the LEFT of the phone number (Damon, 14 Oct), at every width the
   menu is a button. The number stays the thing at the right-hand edge. Order only: the
   markup keeps the number first, so a screen reader still hears the number before the menu. */
.head .burger { order: -1; }
/* On the smallest phones the logo, the number and the menu button do not all fit
   in one row; the number is the first line of the menu ("Call …"), so it goes from the bar. */
@media (max-width: 400px) {
  .head .ph { display: none; }
}