/* ═══════════════════════════════════════════════════════════════════════════
   pages.css — the generated pages under the home page (/projects/ and each case).

   Loaded AFTER styles.css, which supplies every token, the nav and the footer, so
   these pages inherit the site's type and colour rather than restating them.

   The one thing that cannot be inherited: on the home page the nav starts transparent
   with light text and JS adds .on-light over pale sections. These pages run no JS, so
   the nav is pinned to its light treatment here and given a solid ground of its own.
   ═══════════════════════════════════════════════════════════════════════════ */

/* No nav overrides here any more. The bar in styles.css is a frosted floating pill carrying
   its own dark ground at every scroll position, so it needs no per page treatment — and the
   light-bar rules that used to live here would paint straight over it. They also caused a
   bug worth remembering: they tied the open-menu rules on specificity and, because this file
   loads second, won and painted dark ink on the dark mobile sheet. */

/* ── the dark opening band ────────────────────────────────────────────────────
   These pages used to open straight onto white body copy, which read as a document
   hung off a premium site. This is the home page's own grammar instead: the dark
   ground the reel and footer already use, the line/word/line rule lifted from the
   hero, and Zodiak at display size. Full bleed band, measured text.
   ──────────────────────────────────────────────────────────────────────────── */
.phero {
  /* the home hero's title card: the same lit dark ground, crest and rule */
  background:
    radial-gradient(120% 80% at 50% 0%, oklch(0.26 0.02 350) 0%, transparent 60%),
    radial-gradient(90% 70% at 80% 100%, oklch(0.24 0.03 20) 0%, transparent 55%),
    linear-gradient(180deg, oklch(0.17 0.014 350), oklch(0.12 0.012 350));
  color: var(--on-dark);
  padding: clamp(7rem, calc(var(--vh, 1vh) * 15), 9.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3.5rem, calc(var(--vh, 1vh) * 9), 5.5rem);
  text-align: center;
}
.phero-crest { margin: 0 0 1.4rem; }
/* The band dissolves into the page edge to edge, like .hero-pin::after on the home page. It used
   to be a gradient on .page-main, which is only 60rem wide, so it showed as a grey box. */
.phero { position: relative; padding-block-end: clamp(6rem, calc(var(--vh, 1vh) * 13), 8rem); }
.phero::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0;
  block-size: clamp(3.5rem, calc(var(--vh, 1vh) * 9), 5.5rem);
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}
.page--archive .phero::after { display: none; }   /* the archive stays dark all the way down */
.phero-crest img { inline-size: clamp(5.5rem, 10vw, 7.5rem); block-size: auto; margin-inline: auto; }
.phero-title {
  max-inline-size: 60rem;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
/* The rule is a span INSIDE the h1 — see the note in generate.js. It restates font, size and
   leading because it would otherwise inherit the heading's display face at 1.06. */
.phero-rule {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 0 0 1.4rem;
  font-family: var(--font-ui);
  font-size: 0.72rem; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: oklch(0.88 0.02 85);
}
.phero-rule span { flex: 0 1 4.5rem; block-size: 1px; background: oklch(1 0 0 / 0.4); }

/* The band already clears the fixed nav, so the body starts on its own rhythm. The gradient
   repeats the site's own dark-to-light transition (see .awards) so the band melts into the
   page instead of ending on a hard seam. */
.page-main {
  max-inline-size: 60rem;
  margin-inline: auto;
  /* The top padding MUST exceed the gradient's height. The fade is dark at its start, so any
     copy that begins inside it is dark ink on a dark ground and washes out. */
  padding: clamp(5.5rem, calc(var(--vh, 1vh) * 10), 7rem) clamp(1.25rem, 4vw, 2rem) clamp(3.5rem, calc(var(--vh, 1vh) * 9), 5.5rem);
}
.page--archive .page-main { background-image: none; }   /* dark all the way down already */
.page-main--flush { max-inline-size: 72rem; }

/* ── breadcrumb, sitting inside the band ──────────────────── */
.crumbs {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--on-dark-dim);
  margin-bottom: clamp(2rem, calc(var(--vh, 1vh) * 5), 3rem);
}
.crumbs a { color: var(--on-dark-dim); text-decoration: none; border-bottom: 1px solid var(--line-dark); }
.crumbs a:hover { color: var(--on-dark); border-bottom-color: currentColor; }
.crumbs span[aria-hidden] { margin: 0 0.4em; opacity: 0.45; }
.crumbs [aria-current] { color: var(--on-dark); }

/* ── lede ─────────────────────────────────────────────────── */
.case-lede {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  line-height: 1.65;
  color: var(--ink);
  max-inline-size: 44rem;
  margin: 0 auto clamp(3rem, calc(var(--vh, 1vh) * 7), 4.5rem);
  text-align: center;
  text-wrap: pretty;
}

/* ── reveal, matching the home page's motion exactly ──────── */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── figures strip (about) ────────────────────────────────── */
.figures {
  display: grid;
  /* Always three across: auto-fit broke a narrow window into 2 + 1, which reads as a mistake. */
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 3vw, 2rem);
  margin: 0 0 clamp(3rem, calc(var(--vh, 1vh) * 7), 4.5rem);
  padding: clamp(1.5rem, calc(var(--vh, 1vh) * 4), 2.25rem) 0;
  border-block: 1px solid var(--line);
  text-align: center;
}
.figures b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--brick);
}
.figures span {
  display: block;
  margin-top: 0.4rem;
  font-size: clamp(0.6rem, 2.2vw, 0.7rem); font-weight: 600;
  letter-spacing: clamp(0.08em, 1vw, 0.16em); text-transform: uppercase;
  color: var(--muted);
}

/* ── reach cards (contact) ────────────────────────────────── */
.reach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 clamp(3rem, calc(var(--vh, 1vh) * 7), 4.5rem);
}
.reach-card {
  display: grid; gap: 0.35rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  text-decoration: none;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.reach-card:hover { border-color: var(--brick); transform: translateY(-2px); }
.reach-card span {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
/* break-word, not anywhere: `anywhere` also feeds the min-content calculation, so the grid
   sizes the column as if the address could split at any character and it wraps mid word even
   when there is room. */
.reach-card b {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: break-word;
}
.reach-card--go b { color: var(--brick); }

/* ── archive intro ────────────────────────────────────────── */
.archive-note {
  max-inline-size: 44rem;
  margin: 0 auto clamp(2.5rem, calc(var(--vh, 1vh) * 6), 3.5rem);
  text-align: center;
  color: var(--on-dark-dim);
}
.archive-note a { color: var(--on-dark); text-underline-offset: 0.3em; }

/* One column on purpose. These are proof photographs, not a mood board: a reader
   scrolling a job wants each shot at full width, in the order it was taken. */
.case-shots { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); }
.case-shots img {
  inline-size: 100%;
  block-size: auto;
  border-radius: 6px;
  box-shadow: 0 20px 50px oklch(0.18 0.012 350 / 0.22);   /* the home collage's frame */
  background: var(--surface);   /* holds the reserved box while the photo arrives */
}

/* Project facts: label/value rows under the photos, two columns, one on a phone. */
.case-facts { margin: clamp(3rem, calc(var(--vh, 1vh) * 7), 4.5rem) 0; }
.case-facts h2 {
  margin: 0 0 1.1rem;
  font-family: 'Lato', var(--font-ui);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  letter-spacing: -0.015em;
}
.case-facts dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.case-facts dl > div { display: grid; gap: 0.2rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.case-facts dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.case-facts dd { margin: 0; font-size: 1rem; color: var(--ink); }
.case-facts a { color: var(--brick); text-underline-offset: 0.25em; }
@media (max-width: 640px) { .case-facts dl { grid-template-columns: 1fr; } }

/* ── prose blocks (about, contact) ────────────────────────── */
.block { margin-block: clamp(3rem, calc(var(--vh, 1vh) * 8), 4.5rem); max-inline-size: 44rem; margin-inline: auto; }
.block h2 {
  /* Lato 900 with one gold word, the same construction as "Choose a project" on the home
     page. The weight is what carries the section; the gold is what ties it to the brand. */
  font-family: 'Lato', var(--font-ui);
  font-weight: 900;
  /* home page scale: the section heads carry the page, as "Our Mission" does */
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}
.block h2 b { font-weight: 900; color: oklch(0.72 0.11 80); }
.block p { margin: 0 0 1rem; color: var(--muted); line-height: 1.75; }
.block a { color: var(--brick); text-underline-offset: 0.25em; }

/* Unanswered client facts on a draft page. The build warns while any remain; never deploy one. */
.todo { background: oklch(0.9 0.12 95); color: var(--ink); padding: 0 0.25em; }

/* ── F&B renovation service page ──────────────────────────────
   Assembled from the home page's own components (.hero title card, .mission collage,
   .steps cards, .portal) so it reads as the same site. Only the glue lives here. */
/* Bottom padding clears the white fade (.hero-pin::after, up to 13rem): this intro is longer
   than the home page's, and its last lines otherwise wash out into it. */
.fnb-hero .hero-inner { padding-block: 7rem clamp(8rem, calc(var(--vh, 1vh) * 20), 14rem); }
.fnb-crumbs { margin-bottom: 2.2rem; }
.fnb-hero .hero-title { font-size: clamp(2.3rem, 6vw, 4.2rem); }

/* The F&B proof strip sits in a lit wine panel cut from the opening band's own ground, so the
   numbers read as a plaque rather than three words floating on white. Gold hairline frame and
   gold dividers are the crest's gold; the numbers count up once as the panel arrives (pages.js). */
.plaque {
  position: relative;
  max-inline-size: 60rem;
  margin: clamp(1rem, 3vw, 2rem) auto clamp(3rem, calc(var(--vh, 1vh) * 7), 4.5rem);
  padding: clamp(2rem, 5vw, 3.25rem) clamp(0.75rem, 3vw, 2rem);
  gap: 0;
  border: 1px solid oklch(0.72 0.11 80 / 0.38);
  border-radius: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(70% 120% at 50% -20%, oklch(0.36 0.07 355 / 0.9) 0%, transparent 62%),
    radial-gradient(60% 90% at 100% 110%, oklch(0.3 0.06 20 / 0.7) 0%, transparent 60%),
    linear-gradient(160deg, oklch(0.24 0.05 355), oklch(0.15 0.025 350));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.08),
    0 28px 60px -22px oklch(0.2 0.05 355 / 0.55),
    0 10px 24px -14px oklch(0.2 0.03 355 / 0.4);
  overflow: hidden;
  isolation: isolate;
}
/* a slow sheen across the plaque, once, when it arrives */
.plaque::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, oklch(0.85 0.1 85 / 0.12) 50%, transparent 65%);
  transform: translateX(-110%);
}
.js .plaque.in::before { animation: fnb-sheen 1.8s 0.35s var(--ease-out) both; }
@keyframes fnb-sheen { to { transform: translateX(110%); } }
.plaque > div { padding-inline: clamp(0.25rem, 2vw, 1rem); }
.plaque > div + div { border-inline-start: 1px solid oklch(0.72 0.11 80 / 0.28); }
.plaque b {
  font-size: clamp(2.6rem, 8vw, 5rem);
  color: oklch(0.95 0.025 85);
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 2px 18px oklch(0.72 0.11 80 / 0.25);
}
.plaque span { color: oklch(0.8 0.08 82); margin-top: 0.7rem; }
@media (prefers-reduced-motion: reduce) {
  .js .plaque.in::before { animation: none; }
}

.fnb-split .mission-img { cursor: auto; }
.fnb-split .mission-text h2 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
.fnb-split .mission-text h2 b { color: oklch(0.72 0.11 80); font-weight: 900; }
.fnb-split .mission-text p + p { margin-top: 1.2rem; }

/* Section heads share the home page's big Lato 900 with one gold word. */
.fnb-head { max-inline-size: 52rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.fnb-title {
  margin: 0 0 1.4rem;
  font-family: 'Lato', var(--font-ui);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.fnb-title b { font-weight: 900; color: oklch(0.72 0.11 80); }
.fnb-lead {
  margin: 0 auto;
  max-inline-size: 42rem;
  font-family: 'Lato', var(--font-ui);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.75;
  color: var(--muted);
}

.fnb-permits { padding: clamp(5rem, 10vw, 7.5rem) clamp(1.25rem, 4vw, 2.5rem); }
.fnb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.2rem;
  max-inline-size: 72rem;
  margin: 0 auto;
}
/* The step card from the home page, opened up to hold a paragraph. */
.fnb-card {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 6px;
  background: var(--dark);
  color: var(--on-dark);
  font-family: 'Lato', var(--font-ui);
}
.fnb-card-n {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  color: oklch(0.72 0.11 80);
}
.fnb-card h3 {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  color: var(--on-dark);
}
.fnb-card p { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.65; color: var(--on-dark-dim); }
.fnb-card { display: flex; flex-direction: column; }
.fnb-card-us { margin-top: auto !important; margin-bottom: 0 !important; padding-top: 1rem; border-top: 1px solid oklch(1 0 0 / 0.12); color: var(--on-dark) !important; }

.fnb-dark {
  background: var(--dark);
  color: var(--on-dark);
  padding: clamp(5rem, 10vw, 7.5rem) clamp(1.25rem, 4vw, 2.5rem);
}
.fnb-dark .fnb-title { color: var(--on-dark); }
.fnb-dark .fnb-lead { color: var(--on-dark-dim); }
.fnb-mall .fnb-head { margin-bottom: 0; }
.fnb-work .cards { max-inline-size: 72rem; margin: 0 auto; }

/* The home step cards, re-titled: the home title's gold "7" is sized 2.2em; a word is not. */
.fnb-steps .steps-title b { font-size: 1em; line-height: inherit; vertical-align: baseline; padding: 0; }
.fnb-steps-lead { margin: -0.5rem 0 1.5rem; text-align: center; font-family: 'Lato', var(--font-ui); font-size: 1.1rem; color: var(--muted); }

.cta-band {
  text-align: center;
  padding: clamp(5rem, 11vw, 8rem) clamp(1.25rem, 4vw, 2.5rem);
  background:
    radial-gradient(120% 80% at 50% 0%, oklch(0.26 0.02 350) 0%, transparent 60%),
    linear-gradient(180deg, oklch(0.17 0.014 350), oklch(0.12 0.012 350));
  color: var(--on-dark);
}
.cta-band-title {
  margin: 0 auto 2.5rem;
  max-inline-size: 24ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  text-wrap: balance;
}
.cta-band-title em { font-style: italic; display: block; }   /* the answer gets its own line */
.cta-band-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; }
.btn-pill {
  display: inline-block;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  background: var(--brick);
  color: oklch(0.98 0.01 85);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.btn-pill:hover { transform: translateY(-2px); }
.btn-pill--ghost { background: transparent; border: 1px solid oklch(1 0 0 / 0.3); }
.btn-pill--ghost:hover { border-color: oklch(0.72 0.11 80); }

/* A bordered link that reads as a control without shouting like the brick CTA. */
.ghost-link {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.ghost-link:hover { border-color: var(--brick); color: var(--brick); }


.person { margin-bottom: 1.75rem; }
.person h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}
.person h3 em {
  display: block;
  font-family: var(--font-ui); font-style: normal;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brick);
  margin-top: 0.3rem;
}

.awards-list, .contact-list, .plain-list { margin: 0; padding: 0; list-style: none; }
.awards-list li, .contact-list li {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.awards-list b, .contact-list b { font-weight: 600; }
.awards-list span { color: var(--muted); font-size: 0.875rem; }
.plain-list li {
  position: relative;
  padding-inline-start: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--muted);
}
.plain-list li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block-start: 0.65em;
  inline-size: 4px; block-size: 4px; border-radius: 50%;
  background: oklch(0.72 0.11 80);
}

/* ── previous / next ──────────────────────────────────────── */
.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: clamp(3rem, calc(var(--vh, 1vh) * 8), 5rem);
  padding-top: clamp(1.5rem, calc(var(--vh, 1vh) * 4), 2rem);
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}
.pager a { color: var(--ink); text-decoration: none; }
.pager a:hover { color: var(--brick); }
.pager span {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.pager-next { text-align: right; }
.pager-all {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── the archive ──────────────────────────────────────────────────────────────
   Deliberately the same room as the reel on the home page: dark ground, heavy Lato
   heading with one gold word, tiles that sit grey until you touch them. It is the
   same set of projects, so it should not look like a different website.

   This is the ARCHIVE, not the main way in. "Projects" in the nav goes to the reel;
   you arrive here from "See all 44 projects", or from a search result.
   ──────────────────────────────────────────────────────────────────────────── */
.page--archive { background: var(--dark); color: var(--on-dark); }
.page--archive .crumbs,
.page--archive .crumbs a { color: var(--on-dark-dim); }
.page--archive .crumbs a { border-bottom-color: var(--line-dark); }
.page--archive .crumbs a:hover { color: var(--on-dark); }
.page--archive .crumbs [aria-current] { color: var(--on-dark); }

/* (.index-head removed — the archive now opens on the shared .phero band like every other
   page, so it no longer needs a heading treatment of its own.) */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.card a { display: block; text-decoration: none; color: inherit; }
.card img {
  inline-size: 100%;
  /* 3:4 because the thumbnail FILES are 600x800, pre-cropped around each shopfront's
     signage. Forcing any other ratio crops that signage straight back off — which is the
     whole problem the uniform thumbnails were made to solve. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: oklch(0.22 0.015 350);
  margin-bottom: 0.7rem;
  /* Grey until you reach for it, exactly like an off-centre tile in the reel. */
  filter: grayscale(0.85) brightness(0.75);
  transition: filter 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.card a:hover img,
.card a:focus-visible img { filter: none; transform: scale(1.03); }
.card-name {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--on-dark);
}
.card-where {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  margin-top: 0.15rem;
}

/* Two up on a phone rather than one. Forty four projects in a single column is a scroll
   nobody finishes, and at 3:4 a half width tile is still big enough to read the signage. */
@media (max-width: 620px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .card-name { font-size: 0.8125rem; }
  .card-where { font-size: 0.6875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card img, .card a:hover img { transition: none; transform: none; }
}

@media (max-width: 600px) {
  .pager { grid-template-columns: 1fr; text-align: left; gap: 1.25rem; }
  .pager-next { text-align: left; }
  .pager-all { order: 3; }
}
.fnb-split .mission-img { cursor: auto; }
.fnb-split .mission-text h2 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
.fnb-split .mission-text h2 b { color: oklch(0.72 0.11 80); font-weight: 900; }
.fnb-split .mission-text p + p { margin-top: 1.2rem; }

/* Section heads share the home page's big Lato 900 with one gold word. */
.fnb-head { max-inline-size: 52rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.fnb-title {
  margin: 0 0 1.4rem;
  font-family: 'Lato', var(--font-ui);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.fnb-title b { font-weight: 900; color: oklch(0.72 0.11 80); }
.fnb-lead {
  margin: 0 auto;
  max-inline-size: 42rem;
  font-family: 'Lato', var(--font-ui);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.75;
  color: var(--muted);
}

.fnb-permits { padding: clamp(5rem, 10vw, 7.5rem) clamp(1.25rem, 4vw, 2.5rem); }
.fnb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.2rem;
  max-inline-size: 72rem;
  margin: 0 auto;
}
/* The step card from the home page, opened up to hold a paragraph. */
.fnb-card {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 6px;
  background: var(--dark);
  color: var(--on-dark);
  font-family: 'Lato', var(--font-ui);
}
.fnb-card-n {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  color: oklch(0.72 0.11 80);
}
.fnb-card h3 {
  margin: 0 0 0.8rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  color: var(--on-dark);
}
.fnb-card p { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.65; color: var(--on-dark-dim); }
.fnb-card { display: flex; flex-direction: column; }
.fnb-card-us { margin-top: auto !important; margin-bottom: 0 !important; padding-top: 1rem; border-top: 1px solid oklch(1 0 0 / 0.12); color: var(--on-dark) !important; }

.fnb-dark {
  background: var(--dark);
  color: var(--on-dark);
  padding: clamp(5rem, 10vw, 7.5rem) clamp(1.25rem, 4vw, 2.5rem);
}
.fnb-dark .fnb-title { color: var(--on-dark); }
.fnb-dark .fnb-lead { color: var(--on-dark-dim); }
.fnb-mall .fnb-head { margin-bottom: 0; }
.fnb-work .cards { max-inline-size: 72rem; margin: 0 auto; }

/* The home step cards, re-titled: the home title's gold "7" is sized 2.2em; a word is not. */
.fnb-steps .steps-title b { font-size: 1em; line-height: inherit; vertical-align: baseline; padding: 0; }
.fnb-steps-lead { margin: -0.5rem 0 1.5rem; text-align: center; font-family: 'Lato', var(--font-ui); font-size: 1.1rem; color: var(--muted); }

.cta-band {
  text-align: center;
  padding: clamp(5rem, 11vw, 8rem) clamp(1.25rem, 4vw, 2.5rem);
  background:
    radial-gradient(120% 80% at 50% 0%, oklch(0.26 0.02 350) 0%, transparent 60%),
    linear-gradient(180deg, oklch(0.17 0.014 350), oklch(0.12 0.012 350));
  color: var(--on-dark);
}
.cta-band-title {
  margin: 0 auto 2.5rem;
  max-inline-size: 24ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  text-wrap: balance;
}
.cta-band-title em { font-style: italic; display: block; }   /* the answer gets its own line */
.cta-band-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; }
.btn-pill {
  display: inline-block;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  background: var(--brick);
  color: oklch(0.98 0.01 85);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.btn-pill:hover { transform: translateY(-2px); }
.btn-pill--ghost { background: transparent; border: 1px solid oklch(1 0 0 / 0.3); }
.btn-pill--ghost:hover { border-color: oklch(0.72 0.11 80); }

/* A bordered link that reads as a control without shouting like the brick CTA. */
.ghost-link {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.ghost-link:hover { border-color: var(--brick); color: var(--brick); }


.person { margin-bottom: 1.75rem; }
.person h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}
.person h3 em {
  display: block;
  font-family: var(--font-ui); font-style: normal;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brick);
  margin-top: 0.3rem;
}

.awards-list, .contact-list, .plain-list { margin: 0; padding: 0; list-style: none; }
.awards-list li, .contact-list li {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.awards-list b, .contact-list b { font-weight: 600; }
.awards-list span { color: var(--muted); font-size: 0.875rem; }
.plain-list li {
  position: relative;
  padding-inline-start: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--muted);
}
.plain-list li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block-start: 0.65em;
  inline-size: 4px; block-size: 4px; border-radius: 50%;
  background: oklch(0.72 0.11 80);
}

/* ── previous / next ──────────────────────────────────────── */
.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: clamp(3rem, calc(var(--vh, 1vh) * 8), 5rem);
  padding-top: clamp(1.5rem, calc(var(--vh, 1vh) * 4), 2rem);
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}
.pager a { color: var(--ink); text-decoration: none; }
.pager a:hover { color: var(--brick); }
.pager span {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.pager-next { text-align: right; }
.pager-all {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── the archive ──────────────────────────────────────────────────────────────
   Deliberately the same room as the reel on the home page: dark ground, heavy Lato
   heading with one gold word, tiles that sit grey until you touch them. It is the
   same set of projects, so it should not look like a different website.

   This is the ARCHIVE, not the main way in. "Projects" in the nav goes to the reel;
   you arrive here from "See all 44 projects", or from a search result.
   ──────────────────────────────────────────────────────────────────────────── */
.page--archive { background: var(--dark); color: var(--on-dark); }
.page--archive .crumbs,
.page--archive .crumbs a { color: var(--on-dark-dim); }
.page--archive .crumbs a { border-bottom-color: var(--line-dark); }
.page--archive .crumbs a:hover { color: var(--on-dark); }
.page--archive .crumbs [aria-current] { color: var(--on-dark); }

/* (.index-head removed — the archive now opens on the shared .phero band like every other
   page, so it no longer needs a heading treatment of its own.) */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.card a { display: block; text-decoration: none; color: inherit; }
.card img {
  inline-size: 100%;
  /* 3:4 because the thumbnail FILES are 600x800, pre-cropped around each shopfront's
     signage. Forcing any other ratio crops that signage straight back off — which is the
     whole problem the uniform thumbnails were made to solve. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: oklch(0.22 0.015 350);
  margin-bottom: 0.7rem;
  /* Grey until you reach for it, exactly like an off-centre tile in the reel. */
  filter: grayscale(0.85) brightness(0.75);
  transition: filter 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.card a:hover img,
.card a:focus-visible img { filter: none; transform: scale(1.03); }
.card-name {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--on-dark);
}
.card-where {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  margin-top: 0.15rem;
}

/* Two up on a phone rather than one. Forty four projects in a single column is a scroll
   nobody finishes, and at 3:4 a half width tile is still big enough to read the signage. */
@media (max-width: 620px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .card-name { font-size: 0.8125rem; }
  .card-where { font-size: 0.6875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card img, .card a:hover img { transition: none; transform: none; }
}

@media (max-width: 600px) {
  .pager { grid-template-columns: 1fr; text-align: left; gap: 1.25rem; }
  .pager-next { text-align: left; }
  .pager-all { order: 3; }
}

/* ═══ About and Contact, 1 Oct 2026 ═══════════════════════════════════════════
   Both pages were white documents under the dark band. They now run in full-width bands
   in the site's own palette: a warm paper intro carrying the wine plaque, the home mission
   collage, the dark step cards, a wine band for the directors, and a paper band for the
   recognition logos. Nothing new in the palette: wine, gold, ink and a warmed paper. */
.pg { display: block; }
.pg-intro {
  padding: clamp(5rem, calc(var(--vh, 1vh) * 10), 7rem) clamp(1.25rem, 4vw, 2rem) clamp(4rem, 8vw, 6rem);
  background:
    radial-gradient(60% 50% at 50% 0%, oklch(0.93 0.035 80 / 0.7) 0%, transparent 70%),
    linear-gradient(180deg, oklch(0.975 0.012 80), oklch(0.955 0.016 60));
}
.pg-intro .case-lede { margin-block-end: clamp(2.5rem, 5vw, 3.5rem); }
.pg-intro .case-lede a { color: var(--brick); text-underline-offset: 0.25em; }
.pg-intro .plaque { margin: 0 auto; }

/* the mission collage, on paper instead of white */
.pg .fnb-split { background: oklch(0.975 0.01 70); }
.pg .fnb-split .mission-text h2 { color: var(--ink); }

/* ── directors on the wine band ──────────────────────────── */
.pg-wine {
  background:
    radial-gradient(80% 60% at 15% 0%, oklch(0.32 0.07 355 / 0.85) 0%, transparent 60%),
    radial-gradient(70% 60% at 100% 100%, oklch(0.28 0.06 20 / 0.6) 0%, transparent 60%),
    linear-gradient(170deg, oklch(0.2 0.04 355), oklch(0.13 0.02 350));
}
.directors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  max-inline-size: 64rem;
  margin: 0 auto;
}
.director {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border-radius: clamp(16px, 2.4vw, 22px);
  border: 1px solid oklch(0.72 0.11 80 / 0.3);
  background: oklch(1 0 0 / 0.04);
  box-shadow: 0 30px 60px -30px oklch(0.05 0.02 350 / 0.8);
}
.director img { inline-size: 100%; block-size: 100%; min-block-size: 18rem; object-fit: cover; object-position: center 20%; filter: saturate(0.9); }
.director-body { display: flex; flex-direction: column; gap: 0.7rem; padding: clamp(1.4rem, 3vw, 2rem); }
.director-meta {
  margin: 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(0.8 0.08 82);
}
.director h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1; color: var(--on-dark); }
.director p:not(.director-meta) { margin: 0; font-size: 0.93rem; line-height: 1.7; color: var(--on-dark-dim); }
.director .ghost-link { margin-top: auto; align-self: flex-start; }
.directors--short .director img { min-block-size: 14rem; }
.ghost-link--dark { color: var(--on-dark); border-color: oklch(0.72 0.11 80 / 0.5); }
.ghost-link--dark:hover { color: oklch(0.85 0.1 82); border-color: oklch(0.72 0.11 80); }
@media (max-width: 520px) {
  .director { grid-template-columns: 1fr; }
  .director img { block-size: 16rem; min-block-size: 0; }
}

/* ── recognition and pager on paper ──────────────────────── */
.pg-paper {
  padding: clamp(5rem, 10vw, 7rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vw, 4rem);
  background: linear-gradient(180deg, oklch(0.965 0.014 75), oklch(0.985 0.006 80));
}
.pg-paper--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.honours {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(0.9rem, 2vw, 1.25rem);
  max-inline-size: 64rem;
}
.honour > a, .honour:not(:has(> a)) {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; block-size: 100%;
  padding: 1.6rem 1.25rem 1.4rem; text-align: center; text-decoration: none; color: var(--ink);
  border-radius: 18px; background: oklch(1 0 0);
  border: 1px solid oklch(0.72 0.11 80 / 0.28);
  box-shadow: 0 18px 40px -26px oklch(0.3 0.05 355 / 0.45);
}
.honour > a { transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
.honour > a:hover { transform: translateY(-3px); border-color: oklch(0.72 0.11 80); }
.honour-logo { display: grid; place-items: center; block-size: 5.5rem; margin-bottom: 0.4rem; }
.honour-logo img { max-block-size: 5.5rem; max-inline-size: 9rem; inline-size: auto; block-size: auto; }
.honour b { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.25; }
.honour-note { font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.honour-check { margin-top: auto; padding-top: 0.5rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brick); }
.pg-pager { max-inline-size: 64rem; margin-inline: auto; }

/* ── contact: three ways in, on the plaque ───────────────── */
.reach-plaque {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-inline-size: 64rem; padding: clamp(0.5rem, 1.5vw, 0.9rem);
}
.reach-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: clamp(1.4rem, 3vw, 2.2rem) 1rem; border-radius: 14px;
  text-align: center; text-decoration: none; color: var(--on-dark);
  transition: background 0.3s var(--ease-out);
}
.reach-tile + .reach-tile { border-inline-start: 1px solid oklch(0.72 0.11 80 / 0.28); }
.reach-tile:hover, .reach-tile:focus-visible { background: oklch(1 0 0 / 0.06); }
.reach-tile:focus-visible { outline: 2px solid oklch(0.72 0.11 80); outline-offset: -2px; }
.reach-tile svg { inline-size: 1.9rem; block-size: 1.9rem; color: oklch(0.8 0.1 82); margin-bottom: 0.4rem; }
.plaque .reach-tile span { margin: 0; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.8 0.08 82); }
.plaque .reach-tile b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 2vw, 1.3rem); text-shadow: none; overflow-wrap: anywhere; }
.reach-tile--go { background: oklch(0.4 0.13 5 / 0.55); }
.reach-tile--go:hover { background: oklch(0.4 0.13 5 / 0.8); }
@media (max-width: 640px) {
  .reach-plaque { grid-template-columns: 1fr; }
  .reach-tile + .reach-tile { border-inline-start: 0; border-block-start: 1px solid oklch(0.72 0.11 80 / 0.28); }
}

/* the five things to send, numbered in the gold italic of the step cards */
.send-list { margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: send; display: grid; gap: 0.8rem; }
.send-list li {
  counter-increment: send; display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline;
  font-family: 'Lato', var(--font-ui); font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--muted);
  padding-block-end: 0.8rem; border-block-end: 1px solid var(--line);
}
.send-list li::before { content: counter(send, decimal-leading-zero); font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: oklch(0.65 0.11 75); }
/* The step cards sit on paper that runs the FULL width (.steps itself is a 56rem column, so a
   background on it left white strips either side). The wine band below then rises over that
   paper with a curved top, and the paper band after it curves back over the wine, so the
   colours meet on a soft edge instead of a hard horizontal cut. */
.pg-steps { background: linear-gradient(180deg, oklch(0.975 0.01 70), oklch(0.96 0.016 40)); padding-block-end: clamp(3rem, 6vw, 5rem); }
.pg-wine {
  position: relative; z-index: 1;
  margin-block-start: calc(-1 * clamp(28px, 5vw, 64px));
  border-radius: clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0;
  box-shadow: 0 -18px 40px -24px oklch(0.2 0.05 355 / 0.35);
}
.pg-wine + .pg-paper {
  position: relative; z-index: 2;
  margin-block-start: calc(-1 * clamp(28px, 5vw, 64px));
  border-radius: clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0;
}

/* links inside the dark cards and the dark-band leads read gold, never browser blue */
.fnb-card a, .fnb-dark .fnb-lead a { color: oklch(0.82 0.1 82); text-underline-offset: 0.25em; }
.fnb-card a:hover, .fnb-dark .fnb-lead a:hover { color: var(--on-dark); }
.fnb-lead a { color: var(--brick); text-underline-offset: 0.25em; }
.comm-sectors { background: linear-gradient(180deg, oklch(0.975 0.012 75), oklch(0.96 0.016 50)); }

/* ── commercial renovation page, the keyword sections ───────── */
.comm-permits { background: linear-gradient(180deg, oklch(0.96 0.016 50), oklch(0.955 0.022 20)); }
.comm-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.comm-choose {
  padding: clamp(5rem, 10vw, 7.5rem) clamp(1.25rem, 4vw, 2.5rem);
  color: var(--on-dark);
  background:
    radial-gradient(80% 60% at 15% 0%, oklch(0.32 0.07 355 / 0.85) 0%, transparent 60%),
    radial-gradient(70% 60% at 100% 100%, oklch(0.28 0.06 20 / 0.6) 0%, transparent 60%),
    linear-gradient(170deg, oklch(0.2 0.04 355), oklch(0.13 0.02 350));
}
.comm-choose .fnb-title { color: var(--on-dark); }
.comm-choose .fnb-lead { color: var(--on-dark-dim); }
.choose-list {
  list-style: none; margin: 0 auto; padding: 0; counter-reset: choose;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(0.9rem, 2vw, 1.25rem); max-inline-size: 64rem;
}
.choose-list li {
  counter-increment: choose; position: relative; display: grid; gap: 0.5rem; align-content: start;
  padding: 1.6rem 1.6rem 1.6rem 4.6rem; border-radius: 18px;
  border: 1px solid oklch(0.72 0.11 80 / 0.3); background: oklch(1 0 0 / 0.04);
  font-family: 'Lato', var(--font-ui);
}
.choose-list li::before {
  content: counter(choose, decimal-leading-zero); position: absolute; inset-inline-start: 1.5rem; inset-block-start: 1.35rem;
  font-family: var(--font-display); font-style: italic; font-size: 1.9rem; line-height: 1; color: oklch(0.72 0.11 80);
}
.choose-list b { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--on-dark); }
.choose-list span { font-size: 0.95rem; line-height: 1.7; color: var(--on-dark-dim); }
.choose-list a { color: oklch(0.82 0.1 82); text-underline-offset: 0.25em; }

.comm-faq {
  padding: clamp(5rem, 10vw, 7rem) clamp(1.25rem, 4vw, 2.5rem);
  background: linear-gradient(180deg, oklch(0.975 0.012 75), oklch(0.985 0.006 80));
}
.faq { display: grid; gap: 0.75rem; max-inline-size: 48rem; margin: 0 auto; }
.faq details {
  border-radius: 14px; background: oklch(1 0 0); border: 1px solid oklch(0.72 0.11 80 / 0.28);
  box-shadow: 0 14px 34px -26px oklch(0.3 0.05 355 / 0.5);
}
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 1.4rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.15rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-family: var(--font-ui); font-size: 1.4rem; line-height: 1; color: oklch(0.65 0.11 75); transition: transform 0.3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid oklch(0.72 0.11 80); outline-offset: 2px; border-radius: 14px; }
.faq details p { margin: 0; padding: 0 1.4rem 1.3rem; font-family: 'Lato', var(--font-ui); line-height: 1.75; color: var(--muted); }
.faq details a { color: var(--brick); text-underline-offset: 0.25em; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ── project filter pills (commercial page) ─────────────────── */
.pfilter { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; max-inline-size: 72rem; margin: 0 auto 1rem; }
.pfilter-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.25rem; border-radius: 999px; cursor: pointer;
  border: 1px solid oklch(0.72 0.11 80 / 0.4); background: oklch(1 0 0 / 0.03);
  color: var(--on-dark); font: 600 0.78rem/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.pfilter-chip span {
  display: inline-grid; place-items: center; min-inline-size: 1.7rem; block-size: 1.7rem; padding-inline: 0.4rem;
  border-radius: 999px; background: oklch(0.72 0.11 80 / 0.18); color: oklch(0.85 0.1 82);
  font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.pfilter-chip:hover { border-color: oklch(0.72 0.11 80); transform: translateY(-2px); }
.pfilter-chip:focus-visible { outline: 2px solid oklch(0.72 0.11 80); outline-offset: 3px; }
.pfilter-chip[aria-pressed="true"] { background: oklch(0.72 0.11 80); border-color: transparent; color: oklch(0.15 0.02 350); }
.pfilter-chip[aria-pressed="true"] span { background: oklch(0.15 0.02 350 / 0.85); color: oklch(0.85 0.1 82); }
.pfilter-status { margin: 0 auto 2.2rem; text-align: center; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--on-dark-dim); }

.cards--filter { max-inline-size: 72rem; margin: 0 auto; }
.cards--filter .card a { position: relative; }
.card-tag {
  position: absolute; z-index: 1; inset-block-start: 0.6rem; inset-inline-start: 0.6rem;
  padding: 0.3rem 0.6rem; border-radius: 999px;
  background: oklch(0.13 0.02 350 / 0.78); backdrop-filter: blur(6px);
  border: 1px solid oklch(0.72 0.11 80 / 0.45);
  font: 600 0.62rem/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.85 0.1 82);
}
.cards--filter .card img { border-radius: 10px; }
.cards--filter .card a:hover img, .cards--filter .card a:focus-visible img { box-shadow: 0 18px 40px -18px oklch(0.72 0.11 80 / 0.55); }
.card.pin { animation: pin-in 0.5s var(--ease-out) both; }
@keyframes pin-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .card.pin { animation: none; } .pfilter-chip { transition: none; } }
/* centred rows, so a filter showing one or two cards sits in the middle, not against the left edge */
.cards--filter { display: flex; flex-wrap: wrap; justify-content: center; }
.cards--filter .card { flex: 0 1 12.5rem; }
@media (max-width: 620px) { .cards--filter .card { flex-basis: calc(50% - 0.4rem); } }

/* ── phone pass (2 Oct): nothing under ~12px, nothing hard to tap ─────────────
   Measured at 390px: figure labels were 9.6px, card tags 9.9px, locations and small caps
   labels 10.5 to 11px; breadcrumb links were 15px tall and the pager's Home link 19px.
   Inline padding grows a link's tap area without moving the text around it. */
@media (max-width: 620px) {
  .figures span { font-size: 0.72rem; letter-spacing: 0.1em; }
  .card-tag { font-size: 0.7rem; padding: 0.32rem 0.6rem; }
  .card-where { font-size: 0.75rem; }
  .director-meta, .honour-check, .plaque .reach-tile span, .reach-card span, .pager span { font-size: 0.74rem; }
  .crumbs a { display: inline-block; padding-block: 0.7rem; }
  .pager a { display: inline-block; padding-block: 0.6rem; }
}

/* Gold accent words on LIGHT grounds use a deeper gold so they pass contrast (3:1 for large
   text; the bright gold measured below that on white, Lighthouse 3 Oct). Dark bands keep the
   bright gold, which reads well on them. Kept last so it wins over the duplicated rules above. */
.steps-title b, .block h2 b, .fnb-title b, .fnb-split .mission-text h2 b { color: oklch(0.58 0.115 72); }
.fnb-dark .fnb-title b, .page--archive .fnb-title b, .cta-band b { color: oklch(0.72 0.11 80); }