/* =========================================================================
   Berkana - design system
   Light ground and near-black text are inherited from the existing site, as
   the specification requires. The template green (#31B939) is retired: it was
   a stock accent from the previous vendor, not a Berkana brand colour. It is
   replaced by a restrained brass drawn from the product itself.
   ========================================================================= */

:root {
  --paper: #ffffff;
  --mist: #f5f8f9;
  --ink: #1c1c1c;
  --ink-soft: #4a5257;
  --muted: #5c686e;
  --line: #e3e8ea;
  --line-strong: #cfd8dc;
  /* Brass is used for small all-caps eyebrow text, so the text tone must clear
     4.5:1 on white. The lighter tone is kept for decorative rules only. */
  --brass: #8a6d3f;
  --brass-dark: #6f572f;
  --brass-line: #a98b5d;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --container: 82.5rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(2.75rem, 6vw, 6rem);

  --radius: 2px;
  --transition: 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

/* ---------- Typography ------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.5rem, 5.6vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }

p { margin: 0 0 1.25rem; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.25rem;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}

.measure { max-width: 62ch; }

/* ---------- Layout ------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--mist { background: var(--mist); }
.section--tight { padding-block: calc(var(--section) * 0.55); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* A heading block and the content it introduces are one unit: the pair should
   not pay two sections' worth of padding between them. */
.section--lead { padding-bottom: 0; }
.section--follow { padding-top: clamp(1.25rem, 2.5vw, 2rem); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
/* Projects are interiors, read large. A 22rem floor put four of them into three
   columns and stranded the fourth alone with two empty cells beside it. */
.grid--projects { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.site-footer .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ---------- Buttons ----------------------------------------------------- */
/* Restrained, consultative CTAs only. There is no checkout language anywhere
   in this stylesheet because there is no checkout. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.btn:hover { background: var(--brass-dark); border-color: var(--brass-dark); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

.btn--light { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, 0.55); }
.btn--light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.link-more {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 0.25rem;
  transition: color var(--transition);
}
.link-more:hover { color: var(--brass-dark); }

/* ---------- Header ------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 5rem;
}

.site-logo { flex: 0 0 auto; display: block; }
.site-logo__mark { display: block; width: auto; height: clamp(1.9rem, 2.6vw, 2.6rem); }
.site-logo__word {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  letter-spacing: 0.16em;
  line-height: 1.1;
  text-transform: uppercase;
}
.site-logo__tagline {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer__mark { width: auto; max-width: 11rem; height: auto; margin-bottom: 1.1rem; }

.nav { display: flex; align-items: center; min-width: 0; }
.nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.9rem, 1.8vw, 2.1rem);
  list-style: none; margin: 0; padding: 0;
}
.nav a {
  display: block;
  font-size: clamp(0.8rem, 0.85vw, 0.88rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  padding-block: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav a:hover, .nav .current-menu-item > a { color: var(--ink); border-color: var(--brass); }

.header-phone {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--ink);
  border-bottom: 1px solid var(--brass-line);
  padding-bottom: 0.15rem;
}
.header-phone:hover { color: var(--brass-dark); }

.nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; }

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  min-height: min(74vh, 38rem);
  max-height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

/* Absolute, so the image - or a placeholder standing in for one that has not
   arrived yet - can never dictate the height of the band. It used to: a missing
   image left a tall placeholder driving the grid row past the clamp, and the
   hero text spilled over the section beneath it. */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media .berkana-placeholder { width: 100%; height: 100%; aspect-ratio: auto; background: var(--ink); }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0.1) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.6) 100%);
}
.hero__body {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  align-self: end;
  min-width: 0;
  padding-block: clamp(3rem, 8vw, 6rem);
  color: var(--paper);
}
.hero__body .eyebrow { color: rgba(255, 255, 255, 0.82); }
.hero h1 { max-width: 18ch; margin-bottom: 1.25rem; }
.hero__lede { max-width: 44ch; color: rgba(255, 255, 255, 0.9); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* ---------- Cards ------------------------------------------------------- */

.card { display: flex; flex-direction: column; }
.card__media {
  position: relative;
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 4 / 5;
}
.card__media img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 6%;
  transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
}
.card:hover .card__media img { transform: scale(1.035); }
.card__body { padding-top: 1.1rem; }
.card__title { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; margin: 0 0 0.35rem; }
.card__meta { font-size: 0.82rem; color: var(--muted); margin: 0; }

/* Collection cards. The whole frame, on a neutral ground, with the name below
   it - see parts/card-collection.php for why the overlay was removed. */
.collection-card .card__media { aspect-ratio: 4 / 5; }
.collection-card .card__media img { object-fit: contain; padding: 4%; }
.collection-card__label h3 { margin: 0.15rem 0 0; font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
.collection-card__label > span {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass);
}
.collection-card__label .card__meta { margin-top: 0.3rem; }

/* ---------- MSRP -------------------------------------------------------- */
/* Reference information, not a checkout invitation: same weight as the specs,
   no accent colour, no strike-through. */

.msrp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.85rem; }
.msrp__label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.msrp__value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-variant-numeric: lining-nums tabular-nums;
}
.msrp--on-request .msrp__value { font-size: 1.25rem; }
.msrp__note { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); }

/* Finish options. Both lines carry identical weight: the second price is an
   alternative specification, not a former price, and must never read as one. */
.msrp--variants { display: block; }
.msrp__variants { list-style: none; margin: 0.4rem 0 0.5rem; padding: 0; display: grid; gap: 0.3rem; }
.msrp__variants li { display: flex; align-items: baseline; gap: 0.75rem; }
.msrp__finish {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass); min-width: 6.5rem;
}
.msrp--variants .msrp__value { font-size: 1.35rem; text-decoration: none; }

.card .msrp { margin-top: 0.55rem; }
.card .msrp__value { font-size: 1.15rem; }
/* superseded below: the note is needed wherever two prices appear */

/* ---------- Product page ------------------------------------------------ */

.product { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 60rem) { .product { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

.product__gallery { display: grid; gap: 0.75rem; }
/* The browser's default figure margin (1em 40px) was never reset here, so the
   most important image on the site lost 80px of width on desktop and rendered
   the fixture at roughly a seventh of a phone screen. The lead frame is also
   portrait now: these objects hang, and a 4/3 window pillarboxed nearly all
   of them. */
.product__figure { background: var(--mist); overflow: hidden; margin: 0; }
.product__figure img { width: 100%; }
.product__figure--lead { aspect-ratio: 4 / 5; }
.product__figure--lead img { height: 100%; object-fit: contain; }
.product__figure--lead { cursor: zoom-in; }
.product__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0.75rem; }
.product__thumbs .product__figure { aspect-ratio: 4 / 5; border: 1px solid transparent; }
.product__thumbs .product__figure img { width: 100%; height: 100%; object-fit: contain; }
.product__thumbs .product__figure[aria-pressed="true"] { border-color: var(--brass-line); }
.product__caption { font-size: 0.75rem; color: var(--muted); margin-top: 0.5rem; }

.product__info { position: static; }

/* Sticky only where the column is comfortably shorter than the viewport.
   Below this the enquiry buttons ended up inside a nested scroll box and were
   never seen - which on a 1080p monitor is most of the audience. */
@media (min-width: 60rem) and (min-height: 70rem) {
  .product__info { position: sticky; top: 7rem; }
}
.product__collection { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.product__title { font-size: clamp(1.9rem, 3.2vw, 2.9rem); margin: 0.5rem 0 0.75rem; }
.product__descriptor { color: var(--ink-soft); max-width: 44ch; }

.specs { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.specs th, .specs td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: top; }
.specs th { font-weight: 500; color: var(--muted); width: 40%; }

.product__custom {
  border-left: 2px solid var(--brass);
  padding: 0.35rem 0 0.35rem 1.25rem;
  margin: 2rem 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.product__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* ---------- Editorial blocks ------------------------------------------- */

.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 55rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Only reverse once the columns exist; stacked, DOM order must win. */
  .split--reverse > :first-child { order: 2; }
}


.process { counter-reset: step; display: grid; gap: 0; }
.process__step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
}
.process__step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--brass);
}
.process__step h3 { font-size: 1.15rem; margin: 0 0 0.35rem; }
.process__step p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

.facts { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.facts dt { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
.facts dd { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }

/* ---------- Footer ------------------------------------------------------ */

.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.72); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.site-footer a { color: rgba(255, 255, 255, 0.72); }
.site-footer a:hover { color: var(--paper); }
.site-footer__heading { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); margin: 0 0 1.1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9rem; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.5);
}

/* ---------- Breadcrumbs, pagination, misc ------------------------------ */

.breadcrumbs { font-size: 0.78rem; color: var(--muted); padding-block: 1.25rem; }
.breadcrumbs a:hover { color: var(--ink); }

.pagination { margin-top: 3rem; }
.pagination ul {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  list-style: none; margin: 0; padding: 0;
}
.pagination li .page-numbers {
  display: block; min-width: 2.5rem; padding: 0.55rem 0.75rem; text-align: center;
  border: 1px solid var(--line); font-size: 0.85rem;
}
.pagination li .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--paper); padding: 0.75rem 1rem; }

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

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 68rem) {
  .nav-toggle { display: block; }
  /* Full height, not auto. An auto-height panel left the live page showing
     below it - undimmed, still scrollable and still tappable - which reads as
     a half-drawn overlay rather than a menu. */
  .nav {
    position: fixed; inset: 5rem 0 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper); border-top: 1px solid var(--line);
    padding: 1rem var(--gutter) 2rem;
  }
  .nav.is-open { display: flex; }
  /* The page behind must not scroll while the panel covers it. */
  body.nav-is-open { overflow: hidden; }
  /* backdrop-filter on the header makes it a containing block for any
     position: fixed descendant - so the panel was being laid out inside an
     80px-tall header rather than the viewport, and collapsed to one row.
     Dropping the filter while the menu is open releases it to the screen. */
  body.nav-is-open .site-header { backdrop-filter: none; background: var(--paper); }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding-block: 0.9rem; border-bottom: 1px solid var(--line); }
  .product__info { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Lightbox ---------------------------------------------------- */

.lightbox {
  border: 0;
  padding: 0;
  max-width: min(96vw, 78rem);
  max-height: 94vh;
  background: var(--paper);
}
.lightbox::backdrop { background: rgba(12, 14, 15, 0.86); }
.lightbox img { max-width: 100%; max-height: 88vh; margin-inline: auto; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 2.75rem; height: 2.75rem;
  border: 0; background: var(--paper); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox__close:hover { color: var(--brass-dark); }

.zoom-hint {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.zoom-hint:hover { color: var(--ink); }

.berkana-placeholder { aspect-ratio: 4 / 5; background: var(--mist); }

.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-inline: 0.5rem; color: var(--line-strong); }

.header-actions { display: flex; align-items: center; gap: 1.25rem; }
@media (min-width: 68.0625rem) { .header-actions .nav-toggle { display: none; } }

.collection-story { max-width: 62ch; color: var(--ink-soft); }
.collection-story p { margin-bottom: 1rem; }

/* ---------- Contact ----------------------------------------------------- */

.contact-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 55rem) { .contact-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

/* The lede and its button share one row without stretching apart on a wide
   screen the way .section__head's space-between does when the left side is
   narrower than the container - close together, centred on each other. */
.contact-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }

.notice { padding: 0.9rem 1.1rem; border-left: 2px solid var(--brass-line); background: var(--mist); font-size: 0.92rem; }
.notice--ok { border-color: #2f7a45; }
.notice--warn { border-color: #a8331f; }

.contact-subject { font-size: 0.92rem; color: var(--ink-soft); }

.enquiry-form { max-width: 34rem; }
.enquiry-form__field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.enquiry-form label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.enquiry-form input, .enquiry-form textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
}
.enquiry-form input:focus, .enquiry-form textarea:focus { border-color: var(--brass); outline: none; }
.enquiry-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-details { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; margin: 0 0 2rem; font-size: 0.95rem; }
.contact-details dt { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; align-self: center; }
.contact-details dd { margin: 0; }

.showroom { padding-top: 1.25rem; border-top: 1px solid var(--line); margin-bottom: 1.25rem; }
.showroom h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.showroom address { font-style: normal; font-size: 0.95rem; }
.showroom__note { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }

.search-form { display: flex; gap: 0.75rem; max-width: 32rem; margin-top: 1.5rem; }
.search-form input {
  flex: 1;
  min-width: 0; padding: 0.8rem 0.9rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius); font: inherit;
}

/* ---------- Editorial pages -------------------------------------------- */

.page-hero { height: min(42vh, 24rem); overflow: hidden; background: var(--mist); }
.page-hero img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .berkana-placeholder { width: 100%; height: 100%; aspect-ratio: auto; }

.page-body { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60rem) { .page-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

.page-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.page-gallery figure { margin: 0; background: var(--mist); }
.page-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.entry-content h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-top: 2.25rem; }
.entry-content h2:first-child { margin-top: 0; }

.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-content: center; }

.showroom__map { margin: 1rem 0; }
.showroom__map iframe { width: 100%; height: 15rem; border: 1px solid var(--line); display: block; }

.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.project-gallery figure { margin: 0; background: var(--mist); }
.project-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Search opens as a full-width band beneath the header, so it can never
   crowd the navigation row. */
.header-search {
  border-top: 1px solid var(--line);
  background: var(--mist);
}
.header-search[hidden] { display: none; }
.header-search form { display: flex; gap: 0.75rem; padding-block: 1rem; }
.header-search input {
  flex: 1; min-width: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  font: inherit; font-size: 0.95rem; color: var(--ink);
}
.header-search input:focus { border-color: var(--brass); outline: none; }

.header-search__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  padding: 0; border: 0; background: none; color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--transition);
}
.header-search__toggle:hover,
.header-search__toggle[aria-expanded="true"] { color: var(--brass-dark); }

.enquiry-form__row { display: grid; gap: 1.1rem; grid-template-columns: 2fr 1fr; }
@media (max-width: 34rem) { .enquiry-form__row { grid-template-columns: 1fr; } }
.enquiry-form select {
  width: 100%; padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); font: inherit; color: var(--ink);
}

.application-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.25rem 1.5rem;
  list-style: none; margin: 0; padding: 0;
}
.application-links a {
  display: block;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: color var(--transition);
}
.application-links a:hover { color: var(--ink); }

.application-links__count { display: block; font-size: 0.75rem; color: var(--muted); }

.project-families { font-size: 0.9rem; color: var(--ink-soft); }
.project-families a { border-bottom: 1px solid var(--brass-line); }

/* ---------- Channels ---------------------------------------------------- */

.channels { margin-top: 1.75rem; }
.channels__label {
  margin: 0 0 0.5rem;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.channels__list {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  list-style: none; margin: 0 0 1.25rem; padding: 0;
}
.channels__list a {
  font-size: 0.9rem;
  border-bottom: 1px solid var(--brass-line);
  padding-bottom: 0.15rem;
}
.site-footer .channels__label { color: rgba(255, 255, 255, 0.5); }
.site-footer .channels__list a { border-color: rgba(255, 255, 255, 0.3); }

/* ---------- FAQ --------------------------------------------------------- */

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--brass);
}
.faq__item[open] summary::before { content: "\2212"; }
.faq__item summary:hover { color: var(--brass-dark); }
.faq__answer { padding: 0 0 1.35rem 1.75rem; color: var(--ink-soft); font-size: 0.95rem; }
.faq__answer p:last-child { margin-bottom: 0; }

/* ---------- Team -------------------------------------------------------- */

.team { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.team__member img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--mist); }
.team__name { font-family: var(--font-display); font-size: 1.2rem; margin: 0.9rem 0 0.2rem; }
.team__role { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin: 0 0 0.6rem; }
.team__bio { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }

/* ---------- Video ------------------------------------------------------- */

.video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__play {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; position: relative;
}
.video__play img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; transition: opacity var(--transition); }
.video__play:hover img { opacity: 1; }
.video__label {
  position: absolute; inset-inline: 0; bottom: 1.25rem;
  color: var(--paper); font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---------- Navigation submenus ---------------------------------------- */

.nav li { position: relative; }

.nav__toggle {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0; border: 0; background: none;
  font: inherit;
  /* Kept in step with .nav a by hand: a dropdown parent is a button and a plain
     item is a link, and when only one of the two was enlarged the menu ended up
     set in two sizes on the same row. */
  font-size: clamp(0.8rem, 0.85vw, 0.88rem);
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.nav__toggle:hover, .nav__parent.is-open > .nav__toggle { color: var(--ink); border-color: var(--brass-line); }

.nav__chevron {
  width: 0.4rem; height: 0.4rem;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--transition);
}
.nav__parent.is-open > .nav__toggle .nav__chevron { transform: rotate(-135deg) translate(-2px, -2px); }

.nav ul.nav__submenu {
  position: absolute; top: calc(100% + 0.5rem); left: -1rem;
  display: none;
  min-width: 15rem;
  padding: 0.75rem 0;
  margin: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(28, 28, 28, 0.09);
  z-index: 50;
}
.nav .nav__parent.is-open > ul.nav__submenu { display: block; }
.nav ul.nav__submenu a {
  display: block;
  padding: 0.55rem 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: none;
  border-bottom: 0;
  white-space: normal;
}
.nav ul.nav__submenu a:hover { background: var(--mist); color: var(--ink); }

@media (max-width: 68rem) {
  .nav .nav__parent.is-open > ul.nav__submenu,
  .nav ul.nav__submenu {
    position: static;
    min-width: 0; padding: 0 0 0.5rem 1rem;
    border: 0; box-shadow: none;
  }
  /* On the mobile panel the group opens in place rather than floating. */
  .nav ul.nav__submenu { display: none; }
  .nav .nav__parent.is-open > ul.nav__submenu { display: block; }
  .nav__chevron { display: none; }
  .nav__toggle { width: 100%; padding-block: 0.9rem; border-bottom: 1px solid var(--line); }
  .nav ul.nav__submenu a { padding: 0.55rem 0; }
}

/* A page with nothing in the second column should not reserve half the width
   for it, and the title should not be separated from its own text by two
   stacked section paddings. */
.page-body--single { display: block; }
.page-body--single .entry-content { max-width: 68ch; }

.page-intro { padding-bottom: 0; }
.page-body-section { padding-top: clamp(1.25rem, 2.5vw, 2rem); }

/* ---------- Library ----------------------------------------------------- */
/* Catalogues are printed books, so they are shown as books: a spine, the weight
   of the block behind the cover, and a shadow that says the thing is physical.
   The covers are almost white, so the board needs an edge or it dissolves into
   the page. */

.library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.75rem);
  list-style: none; margin: 0; padding: 0;
}

.volume__link { display: block; }

.volume__book {
  display: block;
  position: relative;
  perspective: 1200px;
}

.volume__cover {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1.33;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-left-width: 0;
  box-shadow:
    0 1px 2px rgba(28, 28, 28, 0.08),
    0 12px 26px -12px rgba(28, 28, 28, 0.38);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.2, 0, 0.2, 1),
              box-shadow 420ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Contain, never cover: these are covers, and a cropped one loses the title it
   exists to carry. The board behind takes up any difference in format. */
.volume__cover img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The spine. */
.volume__cover::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0.55rem;
  background:
    linear-gradient(90deg,
      rgba(28, 28, 28, 0.34) 0%,
      rgba(28, 28, 28, 0.12) 38%,
      rgba(255, 255, 255, 0.5) 62%,
      rgba(28, 28, 28, 0.07) 100%);
  z-index: 2;
}

/* The block of pages showing past the fore-edge. */
.volume__cover::after {
  content: "";
  position: absolute;
  top: 2%; bottom: 2%; right: -3px;
  width: 3px;
  background: linear-gradient(90deg, var(--line-strong), var(--mist));
  border-radius: 0 1px 1px 0;
}

.volume__link:hover .volume__cover,
.volume__link:focus-visible .volume__cover {
  transform: rotateY(-7deg) translateZ(6px);
  box-shadow:
    0 2px 3px rgba(28, 28, 28, 0.1),
    0 22px 40px -14px rgba(28, 28, 28, 0.45);
}

.volume__blank {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 1.5rem;
  font-family: var(--font-display); font-size: 1.1rem; text-align: center;
  color: var(--ink-soft);
}

.volume__meta { display: block; margin-top: 1rem; }
.volume__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.25;
}
.volume__action {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--transition);
}
.volume__link:hover .volume__action { color: var(--brass-dark); }

.volume__note { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .volume__link:hover .volume__cover,
  .volume__link:focus-visible .volume__cover { transform: none; }
}

.cta-band__actions { align-items: center; }

/* A quiet second offer beside the enquiry button, not competing with it.
   A document mark rather than a cover thumbnail: this catalog's cover is nearly
   blank paper and read as a missing image at this size. */
.cta-catalog {
  flex-basis: 100%;
  display: inline-flex; align-items: center; gap: 0.85rem;
  margin-top: 0.85rem;
}
.cta-catalog__icon {
  flex: 0 0 auto;
  width: 1.9rem;
  color: var(--brass-dark);
  transition: color var(--transition), transform var(--transition);
}
.cta-catalog__icon svg { width: 100%; height: auto; display: block; }
.cta-catalog:hover .cta-catalog__icon { color: var(--ink); transform: translateY(-1px); }

.cta-catalog__text { display: block; }
.cta-catalog__title { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; }
.cta-catalog__action {
  display: block; margin-top: 0.1rem;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); transition: color var(--transition);
}
.cta-catalog:hover .cta-catalog__action { color: var(--brass-dark); }

/* ---------- Assurances -------------------------------------------------- */

.assurance__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  list-style: none; margin: 0; padding: 0;
}
.assurance__item { border-top: 1px solid var(--line-strong); padding-top: 0.9rem; }
.assurance__label {
  display: block;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: 0.4rem;
}
.assurance__note { display: block; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.assurance__item a:hover .assurance__note { color: var(--ink); }

.enquiry-form__privacy { margin-top: 1rem; font-size: 0.8rem; color: var(--muted); max-width: 40ch; }

/* Contact page: the people who answer.
   Portraits are small and side-by-side with the name - this is a reference
   detail beside the address, not a gallery. */
.contact-people { margin-bottom: 2.5rem; }
.contact-people p { color: var(--ink-soft); font-size: 0.92rem; }
.contact-people__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.contact-person { display: grid; grid-template-columns: 4rem 1fr; gap: 0.9rem; align-items: center; }
.contact-person img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; background: var(--mist); }
.contact-person__name { font-family: var(--font-display); font-size: 1.05rem; margin: 0; color: var(--ink); }
.contact-person__role { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); margin: 0.15rem 0 0; }

/* A set of films. Two up on desktop, one on a phone - a video thumbnail any
   smaller stops reading as an invitation to press play. */
.video-set { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* About: the showrooms and the workshop. Text first, then the photographs -
   these are rooms and processes, so they are read after the sentence that
   says what you are looking at. */
.about-section + .about-section { margin-top: clamp(2rem, 4vw, 3.25rem); }
.about-section h3 { font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.45rem); margin: 0 0 0.5rem; }
.about-section p { color: var(--ink-soft); margin: 0; }
.about-section__gallery { display: grid; gap: 0.75rem; margin-top: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.about-section__gallery figure { margin: 0; background: var(--mist); }
.about-section__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* The line that explains "Confirmed per project" in the specification table. */
.product__compliance { font-size: 0.82rem; color: var(--muted); margin: 0.85rem 0 1.5rem; max-width: 46ch; }

/* Actual size inside the lightbox. The dialog fits the picture to the viewport
   by default; this releases the cap so "view full size" means it. */
.lightbox img { cursor: zoom-in; }
.lightbox img.is-zoomed { max-width: none; max-height: none; width: auto; height: auto; cursor: zoom-out; }
.lightbox:has(img.is-zoomed) { overflow: auto; }

/* The catalog filter bar. Wraps on a phone rather than scrolling sideways:
   these are four short selects, not a toolbar. */
.filters { display: flex; flex-wrap: wrap; gap: 0.9rem 1.25rem; align-items: end; margin-bottom: 1.5rem; }
.filters__field { display: grid; gap: 0.3rem; min-width: 9.5rem; flex: 1 1 9.5rem; }
.filters__field > span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.filters__field select {
  font: inherit; font-size: 0.9rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 0;
}
.filters__actions { display: flex; align-items: center; gap: 1rem; }
.filters__count { font-size: 0.85rem; color: var(--muted); margin: 0 0 1.25rem; }

/* The menu control shows what pressing it will do next. */
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* The explanatory line belongs on cards too: without it a card showing two
   stacked prices reads as a strike-through discount, which is precisely the
   misreading the wording exists to prevent. */
.card .msrp__note { display: block; font-size: 0.72rem; margin-top: 0.2rem; }

/* A select is content-sized and was overflowing its column by a few pixels at
   390px, which scrolled the whole page sideways. */
.filters__field select { max-width: 100%; }
.filters { max-width: 100%; }

/* Size on the card: a size-filtered grid that shows no sizes has to be opened
   result by result to be read. */
.card__size { font-size: 0.78rem; color: var(--muted); margin: 0.15rem 0 0.4rem; letter-spacing: 0.02em; }

/* Collection lead: the story in a readable measure, what the family contains
   beside it. The measure cap is right - 1320px lines are unreadable - but on
   its own it left half the page blank. */
.collection-lead {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 62ch) minmax(0, 1fr);
  align-items: start;
  margin-top: 1.5rem;
}
.collection-lead--single { grid-template-columns: minmax(0, 62ch); }
.collection-lead .collection-story { max-width: none; margin: 0; }

.collection-facts { margin: 0; display: grid; gap: 0.9rem; }
.collection-facts > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.collection-facts dt {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass); padding-top: 0.15rem;
}
.collection-facts dd { margin: 0; color: var(--ink); font-size: 0.95rem; }

@media (max-width: 60rem) {
  .collection-lead { grid-template-columns: minmax(0, 1fr); }
}

/* On a phone the filter fields go one per row. Two of them could not shrink
   past their min-width and pushed the page 4px sideways. */
@media (max-width: 34rem) {
  .filters__field { flex: 1 1 100%; min-width: 0; }
  .filters__actions { flex: 1 1 100%; }
}

/* ---------- Territories ------------------------------------------------- */

/* A real map of the country, filled per agency from the database. Public-domain
   outline, inlined so the paths can be coloured and so the page makes no
   external request. The map is marked decorative: every territory it shows is
   also a link in the legend below, which is what a keyboard, a screen reader
   and a phone all use. */
.us-map { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
/* The outline is 959x593; at full container width it dwarfs the page it sits
   on, so it is held to a readable size and centred. */
.us-map__figure { width: 100%; max-width: 52rem; margin-inline: auto; }
.us-map__svg { width: 100%; height: auto; display: block; }
.us-map__svg path, .us-map__svg circle { fill: var(--mist); stroke: var(--paper); stroke-width: 1; }
.us-map__svg .is-open-territory { cursor: pointer; transition: fill var(--transition); }
.us-map__svg .is-open-territory:hover { fill: var(--brass-line); }
@media (prefers-reduced-motion: reduce) {
  .us-map__svg .is-open-territory { transition: none; }
}
/* The District of Columbia is drawn as a marker rather than an outline. */
.us-map__svg circle { stroke-width: 0.5; }

.us-map__legend {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.us-map__territory a {
  display: grid; grid-template-columns: 0.85rem minmax(0, 1fr); gap: 0.75rem;
  align-items: start; text-decoration: none; color: inherit;
  border-top: 1px solid var(--line); padding-top: 0.85rem;
}
.us-map__territory a:hover .us-map__states { color: var(--ink); }
.us-map__swatch { display: block; width: 0.85rem; height: 0.85rem; margin-top: 0.2rem; background: var(--mist); }
.us-map__swatch--open { display: inline-block; vertical-align: -1px; margin-right: 0.4rem; }
.us-map__agency { display: grid; gap: 0.3rem; }
.us-map__agency strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; }
.us-map__logo { max-width: 9rem; height: auto; }
/* An agency with no logo on file - most don't have one worth fetching -
   still gets a mark rather than sitting as plain text next to rows that have
   an actual image. */
.us-map__mark {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--brass-line); color: var(--brass);
  font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.04em;
}
.us-map__states { font-size: 0.8rem; color: var(--muted); }
.us-map__key { font-size: 0.8rem; color: var(--muted); margin: 0; }


/* ---------- Representatives --------------------------------------------- */

.rep-grid {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}
.rep-card { border-top: 1px solid var(--brass-line); padding-top: 1.25rem; transition: background-color var(--transition); }
/* Landed on from the map legend, or any other #rep-N link: briefly says
   "this one" rather than leaving a visitor to scan the grid for the row that
   scrolled into view. */
.rep-card:target { background: var(--mist); box-shadow: -0.75rem 0 0 var(--mist), 0.75rem 0 0 var(--mist); }
@media (prefers-reduced-motion: reduce) {
  .rep-card { transition: none; }
}
.rep-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }
.rep-card__name { font-family: var(--font-display); font-size: 1.35rem; margin: 0; }
.rep-card__badge {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass); margin: 0;
}
.rep-card__states { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0 0; padding: 0; }
.rep-card__states li abbr {
  display: block; padding: 0.15rem 0.45rem;
  font-size: 0.7rem; letter-spacing: 0.1em;
  background: var(--mist); color: var(--ink-soft);
  text-decoration: none; border-bottom: 0;
}
.rep-card__contact { margin: 1rem 0 0; }
.rep-card__contact strong { display: block; font-size: 1rem; }
.rep-card__contact span { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rep-card__details { margin: 0.9rem 0 0; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.4rem 0.75rem; }
.rep-card__details dt { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 0.15rem; }
.rep-card__details dd { margin: 0; font-size: 0.92rem; }
.rep-card__details address { font-style: normal; }
.rep-card__flags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; }
.rep-card__flags span {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brass); border: 1px solid var(--brass-line); padding: 0.2rem 0.5rem;
}
.rep-card__note { font-size: 0.88rem; color: var(--ink-soft); margin: 0.9rem 0 0; }

/* Pick your state. The fastest path for someone who already knows it. */
.state-picker { display: flex; flex-wrap: wrap; gap: 0.9rem 1.25rem; align-items: end; }
.state-picker__field { display: grid; gap: 0.3rem; flex: 0 1 20rem; min-width: 0; }
.state-picker__field > span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.state-picker__field select {
  font: inherit; font-size: 0.95rem; padding: 0.7rem 2.2rem 0.7rem 0.9rem; max-width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background-color: var(--paper); color: var(--ink);
  /* The browser's own arrow reads as an unstyled form control against
     everything else on the page; this one is the brand's brass. */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238a6d3f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
}
.state-picker__field select:focus { border-color: var(--brass); outline: none; }
.state-picker button { flex-shrink: 0; }
.state-answer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--brass-line); max-width: 34rem; }
/* Two or more agencies use the same grid "Who covers what" does below, which
   needs the width a single result's narrower column does not - and the grid's
   own gap separates the cards, so restoring a border between them would be
   redundant rather than fixing the "reads as one block" problem it used to. */
.state-answer:has(.rep-grid) { max-width: none; }
.state-answer .rep-card { border-top: 0; padding-top: 0.5rem; }

/* ---------- Page aside ---------------------------------------------------- */
/* Fills the second column on a guide-style page that has no gallery, so a
   readable measure does not leave the other half of the page blank. */
.page-aside {
  border-top: 1px solid var(--brass-line);
  padding-top: 1.25rem;
  align-self: start;
}
.page-aside__lede { color: var(--ink-soft); font-size: 0.92rem; margin: 0.4rem 0 1.1rem; }
.page-aside .btn { display: inline-block; }
.page-aside__details { margin: 1.5rem 0 0; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem 0.75rem; }
.page-aside__details dt { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 0.15rem; }
.page-aside__details dd { margin: 0; font-size: 0.92rem; }

@media (max-width: 60rem) {
  .page-aside { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
}