/* ==========================================================================
   Diversified General Trading LLC
   Core stylesheet
   Palette: espresso ink, bronze accent, stone ground
   ========================================================================== */

:root {
  --espresso:      #241E18;
  --espresso-deep: #1A1613;
  --bronze:        #8A6844;   /* decorative: borders, rules, accents */
  --bronze-text:   #7E5F3F;   /* text on light grounds — WCAG AA on stone/bone */
  --bronze-light:  #C9A67F;
  --stone:         #F4F0EA;
  --bone:          #FBF9F5;
  --warm-grey:     #6B6258;
  --hairline:      #DDD5C9;
  --hairline-dark: #3E362C;

  --display: "Newsreader", Cambria, Georgia, serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", "Courier New", monospace;

  --measure: 1180px;
  --gutter: 1.5rem;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

body {
  margin: 0;
  background: var(--stone);
  color: var(--espresso);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--espresso); color: var(--stone);
  padding: .75rem 1.25rem; z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Type scale ---------- */

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

h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.15rem; }
p.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--warm-grey);
  max-width: 62ch;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze-text);
  margin: 0 0 1.4rem;
  display: block;
}

.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

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

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--espresso-deep);
  color: var(--stone);
  border-bottom: 1px solid var(--hairline-dark);
}

.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

.wordmark {
  display: inline-block;
  text-decoration: none;
  color: var(--stone);
  white-space: nowrap;
}
/* Outlined Direction A horizontal lock-up (assets/wordmark-light.svg), 9.31:1.
   Horizontal rather than compact because the compact lock-up's descriptor
   renders 3.6px at masthead height — the horizontal gives 9px at the same
   height, since its descriptor is 9pt against a 34pt wordmark rather than 6
   against 36. Section 9's floor is a 16px cap height; at 34px total the cap is
   23px, so there is headroom. The footer column is 221px, hence 22px there. */
.wordmark img { display: block; height: 34px; width: auto; }
.foot .wordmark img { height: 22px; }
@media (max-width: 420px) {
  .wordmark img { height: 26px; }
}
.wm-name {
  display: block;
  font-family: var(--display);
  font-size: 1.34rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1.05;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--bronze);
}
.wm-desc {
  display: block;
  font-family: var(--mono);
  font-size: .48rem;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: #9C9285;
  margin-top: 5px;
}
/* the rule sits under the wordmark only, so the descriptor never sets its width */
.wordmark .wm-desc { text-align: left; }
@media (max-width: 420px) {
  .wm-name { font-size: 1.16rem; letter-spacing: .14em; }
  .wm-desc { font-size: .44rem; letter-spacing: .17em; }
}

.nav { display: flex; align-items: center; gap: 1.9rem; }

.nav a {
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  color: #D8D0C4;
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav a:hover { color: var(--stone); border-bottom-color: var(--bronze); }
.nav a[aria-current="page"] { color: var(--stone); border-bottom-color: var(--bronze); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--hairline-dark);
  color: var(--stone);
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .6rem .85rem; cursor: pointer;
}

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--espresso-deep);
    border-bottom: 1px solid var(--hairline-dark);
    padding: .5rem var(--gutter) 1.4rem;
  }
  .nav.open { display: flex; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--hairline-dark); }
  .masthead-inner { position: relative; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.9rem;
  border: 1px solid var(--bronze);
  background: var(--bronze);  /* AA for white label text */
  color: #fff;
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: #6F5336; border-color: #6F5336; }

.btn-ghost { background: transparent; color: var(--bronze); }
.btn-ghost:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }

.btn-ghost-light { background: transparent; color: var(--stone); border-color: rgba(244,240,234,.4); }
.btn-ghost-light:hover { background: var(--stone); color: var(--espresso); border-color: var(--stone); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; text-align: center; }
}

/* ---------- Sections ---------- */

section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
section.tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.dark { background: var(--espresso); color: var(--stone); }
.dark .eyebrow, .deep .eyebrow, .hero .eyebrow { color: var(--bronze-light); }
.dark p.lede { color: #C4BBAE; }
.dark .rule { border-top-color: var(--hairline-dark); }

.deep { background: var(--espresso-deep); color: var(--stone); }

.deep p.lede { color: #C4BBAE; }

.section-head { max-width: 68ch; margin-bottom: 3rem; }

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

.hero {
  background: var(--espresso-deep);
  color: var(--stone);
  padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 82% 15%, rgba(169,130,90,.20), transparent 62%),
    radial-gradient(70% 70% at 5% 95%, rgba(169,130,90,.08), transparent 60%);
  pointer-events: none;
}

.hero .wrap { position: relative; z-index: 1; }
.hero h1 { margin-bottom: .45em; }
.hero h1 em { font-style: italic; color: var(--bronze-light); }
.hero p.lede { color: #C7BEB0; max-width: 54ch; }

/* ---------- Credentials strip ---------- */

.creds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline-dark);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.cred {
  padding: 1.9rem 1.4rem 0 0;
  border-right: 1px solid var(--hairline-dark);
}
.cred:last-child { border-right: 0; }
.cred b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  color: var(--bronze-light);
}
.cred span {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #9C9285;
  margin-top: .7rem;
}
@media (max-width: 720px) {
  .creds { grid-template-columns: repeat(2, 1fr); }
  .cred { border-bottom: 1px solid var(--hairline-dark); padding-bottom: 1.6rem; }
  .cred:nth-child(2) { border-right: 0; }
  .cred:nth-child(3), .cred:nth-child(4) { border-bottom: 0; }
}

/* ---------- Exclusive agency list ---------- */

.agency-list { border-top: 1px solid var(--hairline); }

.agency {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  transition: background .18s ease, padding .18s ease;
}
.agency:hover { background: rgba(169,130,90,.07); padding-left: .9rem; padding-right: .9rem; }

.agency-idx {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--bronze-text);
  letter-spacing: .1em;
}
.agency-name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  line-height: 1.15;
}
.agency-desc {
  display: block;
  font-family: var(--body);
  font-size: .88rem;
  color: var(--warm-grey);
  margin-top: .4rem;
  max-width: 58ch;
}
.agency-tag {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7E5F3F;            /* WCAG AA on stone */
  border: 1px solid var(--bronze);
  padding: .3rem .6rem;
  white-space: nowrap;
}
.agency-tag.own { color: var(--espresso); border-color: var(--espresso); }

@media (max-width: 680px) {
  .agency { grid-template-columns: 2.4rem 1fr; gap: .9rem; }
  .agency-tag { grid-column: 2; justify-self: start; margin-top: .8rem; }
}

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

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 940px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--bone);
  border: 1px solid var(--hairline);
  padding: 1.9rem 1.7rem;
}
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .93rem; color: var(--warm-grey); margin-bottom: 0; }
.card .eyebrow { margin-bottom: .9rem; }

.card-link { text-decoration: none; display: block; transition: border-color .18s ease, transform .18s ease; }
.card-link:hover { border-color: var(--bronze); transform: translateY(-3px); }

.dark .card, .deep .card { background: rgba(255,255,255,.04); border-color: var(--hairline-dark); }
.dark .card p, .deep .card p { color: #B5AB9C; }

/* ---------- Category tiles ---------- */

.dark .cat, .deep .cat { border-top-color: var(--bronze); }
.dark .cat p, .deep .cat p { color: #B5AB9C; }
.cat {
  border-top: 2px solid var(--espresso);
  padding-top: 1.1rem;
}
.cat h4 {
  font-family: var(--display);
  font-size: 1.32rem;
  margin-bottom: .4rem;
}
.cat p { font-size: .88rem; color: var(--warm-grey); margin: 0; }

/* ---------- Spec matrix (signature element) ---------- */

.matrix-frame {
  background: var(--bone);
  border: 1px solid var(--hairline);
  padding: 1.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* The frame carries its own light background, so it must carry its own
     foreground too. Placed inside a .dark section it otherwise inherits
     --stone text on bone: 1.08:1, a hard AA failure. Any component that
     brings a background has to bring the text colour with it. */
  color: var(--espresso);
}
.dark .matrix-frame, .deep .matrix-frame { color: var(--espresso); }
.dark .matrix-frame .formats, .deep .matrix-frame .formats {
  color: var(--warm-grey); border-top-color: var(--hairline);
}
/* and the label inside it. The .dark .formats b rule added for the BioSip page
   otherwise reaches in here and paints it --stone on the frame's own bone
   ground: 1.08:1. Anything that brings its own background has to re-assert
   every inherited colour, not just the body text. */
.dark .matrix-frame .formats b, .deep .matrix-frame .formats b { color: var(--espresso); }
.dark .matrix-frame a, .deep .matrix-frame a { color: var(--bronze-text); }
.matrix-caption {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #5C544B;
  margin-bottom: 1.1rem;
}

table.matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  min-width: 620px;
}
table.matrix th, table.matrix td {
  padding: .72rem .6rem;
  text-align: center;
  border-bottom: 1px solid var(--hairline);
}
table.matrix thead th {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--warm-grey);
  border-bottom: 1px solid var(--espresso);
  vertical-align: bottom;
}
/* Brands whose own spelling is lowercase (off.hours.) must survive the
   uppercasing above — a table header is not a licence to restyle a mark.
   See section 3 for the settled spellings. */
table.matrix thead th .nocaps { text-transform: none; letter-spacing: .06em; }
table.matrix tbody th {
  text-align: left;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 400;
  white-space: nowrap;
  padding-right: 1.4rem;
}
table.matrix .yes { color: var(--bronze-text); font-size: 1rem; }
table.matrix .no  { color: #6E6459; }   /* WCAG AA on bone */
/* Third state: the item is in the range but its specification is not yet
   confirmed, so the cell is left empty. A dash would read as "not available",
   which on a material table would be an active false claim rather than a gap;
   a "TBC" marker was tried and read as clutter. The aria-label carries the
   meaning for screen readers, which an empty cell otherwise loses. */
table.matrix .unspec { color: transparent; }
/* Fourth cell type: a literal value rather than a yes/no. Needed because
   room sizes and air-change rates are not binary — passing them as strings
   used to fall through to the dash branch and render as "not available". */
table.matrix .val { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; color: var(--espresso); }
table.matrix tbody tr:last-child th,
table.matrix tbody tr:last-child td { border-bottom: 0; }

.formats {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .07em;
  color: var(--warm-grey);
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}
.formats b { color: var(--espresso); letter-spacing: .13em; text-transform: uppercase; font-weight: 400; }

/* ---------- Founder quote, About > philosophy ----------
   Sits on the .dark philosophy ground. Left-aligned with a bronze rule rather
   than centred or in quotation marks: it replaces a paragraph of brand voice
   that said the same thing anonymously, so it should read as that paragraph
   now having an author, not as a decorative pull-quote.
   Attribution is the mono eyebrow treatment used everywhere else on the site.
   No portrait slot by design — an empty half waiting for a photograph looks
   worse than none, and the real team photography has its own slot further down
   this page, so adding a portrait later needs no rebuild. */
.founder {
  margin: 1.6rem 0 1.8rem;
  padding-left: clamp(1rem, 2.2vw, 1.6rem);
  border-left: 2px solid var(--bronze);
}
.founder p {
  /* Hanging punctuation: the opening quote mark is pulled into the margin so
     the "A" of the first line aligns with the text block below it, rather than
     being pushed right by the mark. text-indent is the reliable way to do this
     — CSS hanging-punctuation is Safari-only. The value is tuned to the mark's
     width at this size; if the font-size changes, retune it. */
  text-indent: -0.24em;
  font-family: var(--display);
  font-size: clamp(1.08rem, 1.7vw, 1.34rem);
  line-height: 1.45;
  color: var(--stone);
  margin: 0 0 .9rem;
}
.founder cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9C9285;
}
.founder cite .n { color: var(--bronze-light); margin-right: .55em; }

/* ---------- Brand row on brands.html ----------
   Five separate framed images, deliberately NOT a stitched montage. Mean
   luminance across the five sources ranges 55 to 193 and colour cast +10.3 to
   -0.8 R-B, so butting them into one image would have shown every seam — the
   same failure that got the Biozone collage rejected in section 5. Individual
   frames make the differing backgrounds read as portfolio variety instead. */
/* Full-bleed: the row sits outside .wrap so the tiles run edge to edge. At the
   wrapped width tiles were 263px and none of the product labels resolved; at
   347px (1400 viewport) the H2K product names, the Kent royal warrants and the
   Aigner labels all become legible, which is the difference between decoration
   and evidence. Measured against retina: everything clears at 1400; bp-aigner
   (736px native) and bp-h2k (684px) drop to ~80% and ~74% above roughly 1500px
   viewport. Both are deck extracts — ask the brands for originals. */
.brand-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
/* Every caption gets the same small inset from its own tile's edge. An earlier
   version padded the first and last captions to line up with the section
   heading inside the centred .wrap — it aligned to the pixel, but the padding
   ate the caption's text width, so "MOLTON BROWN / EXCLUSIVE SINCE 1999" wrapped
   to four lines against two for the middle tiles. A caption belongs to its
   image, not to the text column: align it to the tile. */
.brand-row > div p { padding-left: .6rem; padding-right: .6rem; }
.brand-row > div:first-child p { padding-left: max(.6rem, var(--gutter)); }
.brand-row > div:last-child p { padding-right: max(.6rem, var(--gutter)); }
.brand-row > div p {
  margin: .7rem 0 0;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--warm-grey);
  line-height: 1.6;
}
.brand-row > div p b { display: block; color: var(--espresso); font-weight: 400; }
@media (max-width: 1000px) {
  .brand-row { grid-template-columns: repeat(2, 1fr); }
  .brand-row > div:nth-child(3) p { padding-left: max(.6rem, var(--gutter)); }
  .brand-row > div:nth-child(2) p { padding-right: max(.6rem, var(--gutter)); }
}
@media (max-width: 620px)  { .brand-row { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Product category index ----------
   products.html is the longest page on the site: 13.3 screens desktop, 16.6 on
   mobile. Twelve discrete categories on a page that long is jump-nav territory,
   and the audience arrives knowing which one it wants. Deliberately built on
   .formats micro-typography rather than a card grid — a twelve-card grid would
   have added 300-400px to the site's longest page, which is the wrong
   direction. Anchors already existed; the footer carries the same twelve. */
/* The masthead is position:sticky at 75px tall, so an anchor target scrolled
   to y=0 lands underneath it. #gifting did exactly that, and section targets
   landed on a third of a screen of padding with the heading below the fold.
   This applies to the twelve footer category links too, which had the same
   problem before the index existed. */
section[id], .card[id], h3[id], h2[id] { scroll-margin-top: 96px; }
@media (max-width: 760px) { section[id], .card[id], h3[id], h2[id] { scroll-margin-top: 82px; } }

.cat-index { padding-top: 0; padding-bottom: 0; }
.cat-index .formats {
  margin-top: 0; margin-bottom: 0;
  line-height: 1.95;
  padding-top: 1.5rem; padding-bottom: 1.5rem;
}
/* Persistent hairline underline, not a hover-only one. These links sit in
   bronze mono, which on this site also styles eyebrows — so colour alone does
   not signal "interactive". The underline replaces the "Jump to" label that
   used to carry that job, which was the only imperative UI instruction on the
   site and the only verb among nine .formats labels. Do not remove it without
   putting a label back. */
.cat-index .formats a {
  color: var(--bronze-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 104, 68, .45);
  white-space: nowrap;
}
.cat-index .formats a:hover,
.cat-index .formats a:focus-visible { color: var(--espresso); border-bottom-color: var(--bronze); }
.dark .cat-index .formats a, .deep .cat-index .formats a { color: var(--bronze-light); }

/* ---------- Split feature ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split.narrow-left { grid-template-columns: .85fr 1.15fr; }
@media (max-width: 860px) {
  .split, .split.narrow-left { grid-template-columns: 1fr; }
}

/* ---------- Image placeholders ---------- */

.imgslot {
  background: var(--espresso);
  border: 1px solid var(--hairline-dark);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}
.imgslot span {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bronze-light);
  line-height: 1.7;
}
.imgslot.tall { aspect-ratio: 3 / 4; }
.imgslot.wide { aspect-ratio: 16 / 7; }

/* ---------- Client list ---------- */

.clients {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .5rem;
  list-style: none;
  padding: 0; margin: 0;
}
.clients li {
  font-family: var(--body);
  font-size: .88rem;
  color: #C4BBAE;
  border: 1px solid var(--hairline-dark);
  padding: .55rem 1rem;
}

/* ---------- Timeline ---------- */

.timeline { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hairline); }
.timeline li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.timeline b {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--bronze-text);
  font-weight: 400;
}
.timeline span { font-size: .98rem; }
@media (max-width: 560px) {
  .timeline li { grid-template-columns: 4.5rem 1fr; gap: 1rem; }
}

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

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.field { margin-bottom: 1.35rem; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5C544B;
  margin-bottom: .5rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: .95rem;
  color: var(--espresso);
  background: var(--bone);
  border: 1px solid var(--hairline);
  padding: .85rem .95rem;
  border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--bronze);
  outline: none;
  box-shadow: 0 0 0 2px rgba(169,130,90,.18);
}
.field textarea { min-height: 150px; resize: vertical; }

.consent {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .82rem; color: var(--warm-grey);
  margin-bottom: 1.6rem;
}
.consent input { margin-top: .25rem; flex-shrink: 0; }

.detail-list { list-style: none; padding: 0; margin: 0; }
.detail-list li {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hairline);
}
.detail-list .k {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bronze-text);
  margin-bottom: .35rem;
}
.detail-list .v { font-size: 1.02rem; }
.detail-list a { text-decoration: none; border-bottom: 1px solid var(--hairline); }
.detail-list a:hover { border-bottom-color: var(--bronze); }

/* ---------- CTA band ---------- */

.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.cta-band p.lede { margin-left: auto; margin-right: auto; }
.cta-band .btn-row { justify-content: center; }

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

.foot {
  background: var(--espresso-deep);
  color: #9C9285;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  font-size: .87rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.8rem;
  border-bottom: 1px solid var(--hairline-dark);
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

.foot h5, .foot .foot-h {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* --bronze is the light-ground rule colour and must not be used as text on
     a dark ground. It was here, and at the old #A9825A it scraped 4.40:1;
     aligning --bronze to the identity's #8A6844 dropped it to 3.55:1 and the
     audit caught it. --bronze-light is the dark-ground text token. */
  color: var(--bronze-light);
  margin: 0 0 1.1rem;
  font-weight: 400;
}
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .6rem; }
.foot a { text-decoration: none; }
/* Footer contact glyphs. currentColor, so they inherit the link colour
   (#9C9285) and the :hover change to --stone with no extra rules. Sized in em
   so they track the footer's .87rem type. The icons sit ALONGSIDE the text,
   never instead of it: the address, phone and email appear as visible text 60,
   118 and 143 times across the site and are the strongest NAP signal for the
   Google Business Profile and directory listings — replacing them with icons
   would remove that, and a pin cannot be copied into a purchase order. */
.foot .ico {
  width: 1.05em; height: 1.05em;
  margin-right: .5em;
  vertical-align: -.16em;
  flex: 0 0 auto;
}
.foot li a { display: inline-flex; align-items: flex-start; gap: 0; }
.foot li a .ico { margin-top: .18em; }
.foot a:hover { color: var(--stone); }

.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: 1.8rem;
  font-size: .78rem;
}

.foot .wordmark { color: var(--stone); margin-bottom: 1.4rem; display: inline-block; }
.foot .wm-desc { color: #9C9285; }

/* ---------- Anchor offset for sticky header ---------- */
section[id] { scroll-margin-top: 90px; }

/* ---------- Placeholder contrast on dark grounds ---------- */
.dark .imgslot, .deep .imgslot {
  background: rgba(255,255,255,.035);
  border-color: rgba(201,166,127,.28);
}

/* ---------- Long-form legal pages ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--espresso); }

/* ---------- Territory qualifier on exclusive agencies ---------- */
.territory {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--warm-grey);
  margin-top: .55rem;
}
.territory b { color: var(--bronze-text); font-weight: 400; letter-spacing: .13em; text-transform: uppercase; }
.dark .territory, .deep .territory { color: #9C9285; }
/* .formats was only ever styled for light grounds (#5C544B). Put one in a
   .dark section and it renders at 2.22:1 — the audit caught it on the BioSip
   page. Same treatment as .territory, which had the same need. */
.dark .formats, .deep .formats { color: #9C9285; border-top-color: var(--hairline-dark); }
.dark .formats b, .deep .formats b { color: var(--stone); }
.dark .territory b, .deep .territory b { color: var(--bronze-light); }

/* ---------- Footnote markers and notes ---------- */
sup.fn {
  font-family: var(--mono);
  font-size: .58em;
  /* was var(--bronze) — decorative only, 3.07:1 on stone/bone, fails AA.
     --bronze-text is the token for text on light grounds. Matches
     .footnotes sup below, which was already correct. */
  color: var(--bronze-text);
  margin-left: .18em;
  top: -.6em;
  position: relative;
}
/* On dark grounds --bronze-text is too dark; same pattern as .territory b
   and .eyebrow. Applies if a footnoted brand list ever moves to a dark band. */
.dark sup.fn, .deep sup.fn { color: var(--bronze-light); }
.footnotes {
  margin-top: 1.8rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--warm-grey);
  max-width: 78ch;
}
.footnotes p { margin: 0 0 .35rem; }
.footnotes sup { color: var(--bronze-text); margin-right: .5rem; }

/* ---------- Philosophy band ---------- */
.philosophy { text-align: left; }
.philosophy .statement {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);   /* matches the hero h1 */
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: none;                            /* fills the wrap, as the hero h1 does */
  margin: 0 0 1.6rem;
}
.philosophy .statement em { font-style: italic; color: var(--bronze-light); }
.philosophy .body { max-width: none; }
.philosophy .body p { font-size: clamp(1.06rem, 1.5vw, 1.25rem); line-height: 1.6; color: #C7BEB0; max-width: 54ch; }
.philosophy .stack { max-width: none; }

/* ---------- Signature tagline closing the philosophy band ---------- */
.philosophy .tagline {
  /* sits under the body, same left edge */
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  line-height: 1.4;
  color: var(--bronze-light);
  max-width: 34ch;
  margin: 2.6rem 0 0;
  padding-top: 2.2rem;
  border-top: 1px solid var(--hairline-dark);
}

/* ---------- Footer: full product index in two columns ---------- */
.foot-grid { grid-template-columns: 1.5fr 1fr 1.6fr 1.2fr; }
.foot ul.two-col { column-count: 2; column-gap: 1.5rem; }
.foot ul.two-col li { break-inside: avoid; }
@media (max-width: 880px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-products { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* Anchor offset for card-level targets */
.card[id], p[id] { scroll-margin-top: 100px; }

/* ---------- Compact category index (About page) ---------- */
.index-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.index-grid a {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: 1.15rem 1.2rem 1.15rem 0;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.18rem;
  line-height: 1.25;
  transition: color .18s ease, padding-left .18s ease;
}
.index-grid a:hover { color: var(--bronze); padding-left: .7rem; }
.index-grid a:nth-child(4n) { border-right: 0; }
.index-grid .n {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  color: var(--bronze-text);
  flex-shrink: 0;
}
.dark .index-grid, .deep .index-grid { border-top-color: var(--hairline-dark); }
.dark .index-grid a, .deep .index-grid a {
  border-bottom-color: var(--hairline-dark);
  border-right-color: var(--hairline-dark);
}
.dark .index-grid a:hover, .deep .index-grid a:hover { color: var(--bronze-light); }

@media (max-width: 900px) {
  .index-grid { grid-template-columns: repeat(2, 1fr); }
  .index-grid a:nth-child(4n) { border-right: 1px solid var(--hairline); }
  .index-grid a:nth-child(2n) { border-right: 0; }
  .dark .index-grid a:nth-child(4n), .deep .index-grid a:nth-child(4n) { border-right-color: var(--hairline-dark); }
  .dark .index-grid a:nth-child(2n), .deep .index-grid a:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) {
  .index-grid { grid-template-columns: 1fr; }
  .index-grid a, .index-grid a:nth-child(4n) { border-right: 0; }
}

/* ---------- Scroll-reveal motion ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .09s; }
[data-reveal-delay="2"] { transition-delay: .18s; }
[data-reveal-delay="3"] { transition-delay: .27s; }

/* Hero copy settles on load rather than on scroll */
.hero .eyebrow, .hero h1, .hero p.lede, .hero .btn-row, .hero .creds {
  animation: settle .95s cubic-bezier(.22,.61,.36,1) both;
}
.hero h1      { animation-delay: .07s; }
.hero p.lede  { animation-delay: .15s; }
.hero .btn-row{ animation-delay: .23s; }
.hero .creds  { animation-delay: .31s; }
@keyframes settle { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero .eyebrow, .hero h1, .hero p.lede, .hero .btn-row, .hero .creds { animation: none !important; }
}
/* No-JS safety: if the observer never runs, content must still be visible */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Footer now carries five columns (blurb, brands, products, markets, contact) */
.foot-grid { grid-template-columns: 1.3fr .9fr 1.4fr 1.2fr 1.1fr; gap: 2rem; }
@media (max-width: 1100px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 780px)  { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .foot-grid { grid-template-columns: 1fr; } }

/* Non-linked entries in the market index sit flush with the linked ones */
.index-grid .static {
  display: flex; align-items: baseline; gap: .9rem;
  padding: 1.15rem 1.2rem 1.15rem 0;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  font-family: var(--display); font-size: 1.18rem; line-height: 1.25;
}
.index-grid .static:nth-child(4n) { border-right: 0; }
.dark .index-grid .static, .deep .index-grid .static {
  border-bottom-color: var(--hairline-dark); border-right-color: var(--hairline-dark);
}
@media (max-width: 900px) {
  .index-grid .static:nth-child(4n) { border-right: 1px solid var(--hairline); }
  .index-grid .static:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) { .index-grid .static, .index-grid .static:nth-child(4n) { border-right: 0; } }

/* Inline links inside lede paragraphs */
p.lede a { color: inherit; border-bottom: 1px solid var(--bronze); text-decoration: none; }
p.lede a:hover { color: var(--bronze); }

/* Honeypot: invisible to people, visible to bots that fill everything in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Values list set one line per sentence */
.philosophy .stack { line-height: 1.9; }

/* ---------- Real photography ---------- */
.photo { display: block; width: 100%; }
.photo img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hairline);
}
.dark .photo img, .deep .photo img { border-color: var(--hairline-dark); }
.photo.wide img { aspect-ratio: 2 / 1; }
@media (max-width: 760px) { .photo.wide img { aspect-ratio: 3 / 2; } }

/* ---------- Full-bleed image band ---------- */
.bleed { display: block; line-height: 0; background: var(--espresso-deep); }
.bleed img {
  width: 100%;
  /* height tracks the 2:1 source so the browser never re-crops it */
  height: 50vw;
  max-height: 960px;
  object-fit: cover;
  object-position: 46% 58%;
}
@media (max-width: 760px) {
  .bleed img { height: 66vw; max-height: none; object-position: 50% 50%; }
}

/* Per-image framing when the subject sits off-centre */
.photo.top img    { object-position: center 30%; }
.photo.bottom img { object-position: center 70%; }

/* footer column headings are h2 for correct document outline; styling unchanged */
.foot .foot-h { font-size: .64rem; }
.cat h3 {
  font-family: var(--display);
  font-size: 1.32rem;
  margin-bottom: .4rem;
  line-height: 1.2;
}

/* territory notes and small print inside dark heroes */
.hero .territory { color: #C4BBAE; }
.hero .territory b { color: var(--bronze-light); }
.dark .territory b, .deep .territory b { color: var(--bronze-light); }
.footnotes { color: #5C544B; }
.formats { color: #5C544B; }

/* eyebrows on every dark ground */
.hero .eyebrow, .dark .eyebrow, .deep .eyebrow, .philosophy .eyebrow { color: var(--bronze-light); }
/* ghost button label needs AA on stone */
.btn-ghost { color: var(--bronze-text); }
.btn-ghost:hover { color: #fff; }

/* market index numerals sit on both light and dark grounds */
.dark .index-grid .n, .deep .index-grid .n { color: var(--bronze-light); }

/* 3:2 photo, for sources that are natively that ratio */
.photo.r32 img { aspect-ratio: 3 / 2; }

/* Width modifier, not a ratio modifier — it holds the box ratio, so the crop
   audit still passes. Used on the two About page images (the borrowed stock
   team shot and the Taj suite photograph), where full column width made them
   compete with the type. Centred, so the pair reads as a matched set.
   Trade-off accepted knowingly: at 531 the image's right edge lands on 1266px,
   the same vertical as the nav and the footer; at 420 centred it lands at 1211
   and aligns with nothing. Calm was preferred to the grid relationship. */
.photo.inset { display: block; max-width: 420px; margin-inline: auto; }

/* ultra-wide lay-down band, for range photography shot as a website banner */
.photo.panorama img { aspect-ratio: 3.43 / 1; }
@media (max-width: 760px) { .photo.panorama img { aspect-ratio: 1.9 / 1; } }


/* ==========================================================================
   REFINEMENT PASS  —  "Assured"
   Base: direction A. Matrix behaviour from C. Display face from B.
   ========================================================================== */

:root {
  --step-section: clamp(4.5rem, 8vw, 7.5rem);
  --step-section-open: clamp(5.5rem, 10vw, 9rem);
  --step-head: clamp(2.4rem, 4vw, 3.4rem);
}

/* ---------- Type: shorter top end, lighter display, longer leading ---------- */
body { line-height: 1.72; }
h1, h2, h3, h4 { letter-spacing: -0.015em; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); font-weight: 300; line-height: 1.05; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); font-weight: 300; line-height: 1.09; margin-bottom: .5em; }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.2; }
p.lede { font-size: clamp(1.02rem, 1.2vw, 1.14rem); line-height: 1.68; max-width: 56ch; }
.section-head { max-width: 60ch; margin-bottom: var(--step-head); }
.section-head p.lede:last-child { margin-bottom: 0; }

/* the philosophy statement is the page's largest voice but must not out-shout an h1 */
.philosophy .statement { font-size: clamp(2.4rem, 5.2vw, 3.85rem); font-weight: 300; line-height: 1.06; }
.philosophy .body p { font-size: clamp(1.02rem, 1.2vw, 1.14rem); line-height: 1.68; max-width: 56ch; }

/* ---------- Rhythm: movements, not a metronome ---------- */
section { padding: var(--step-section) 0; }
section.tight { padding: clamp(3rem, 5vw, 4.5rem) 0; }
.dark, .deep { padding-top: var(--step-section-open); padding-bottom: var(--step-section-open); }
.dark + section, .deep + section { padding-top: var(--step-section-open); }

/* ---------- Section transitions: a marked threshold ---------- */
.dark, .deep { position: relative; border-top: 1px solid rgba(169,130,90,.38); }
.dark::before, .deep::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 1px; height: 2.6rem; background: var(--bronze); opacity: .6;
}
.dark + section:not(.dark):not(.deep), .deep + section:not(.dark):not(.deep) { position: relative; }
.dark + section:not(.dark):not(.deep)::before,
.deep + section:not(.dark):not(.deep)::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 1px; height: 2.6rem; background: var(--bronze); opacity: .5;
}

/* ---------- Detail: eyebrows carry a lead-in rule ---------- */
.eyebrow {
  display: flex; align-items: center; gap: .95rem;
  font-size: .66rem; letter-spacing: .22em; margin-bottom: 1.15rem;
}
.eyebrow::before { content: ""; flex: 0 0 2.25rem; height: 1px; background: var(--bronze-text); }

/* Stacked variant for the homepage hero: "Est. 1998" on its own line with the
   territories beneath, middot-separated. The base .eyebrow is a flex row with
   a leading rule and cannot stack, so this overrides display and turns the
   ::before rule into a short rule above the two lines.
   Left-aligned deliberately. A centred version was built and rejected: it put
   the eyebrow's centre at ~700px while the h1, lede and buttons all start at
   110px, and nothing else on the page is centred except the CTA band, so it
   read as a misalignment rather than a device. Centring the whole hero was
   also rejected — it would have been the only centred hero across 26 pages,
   and five lines of centred body copy read poorly with a ragged left edge. */
.eyebrow.stacked { display: block; }
.eyebrow.stacked::before { display: block; width: 2.25rem; margin: 0 0 .85rem; flex: none; }
.eyebrow.stacked .est,
.eyebrow.stacked .terr { display: block; }
.eyebrow.stacked .terr { margin-top: .5rem; }
.dark .eyebrow::before, .deep .eyebrow::before, .hero .eyebrow::before,
.philosophy .eyebrow::before { background: var(--bronze-light); opacity: .8; }
.card .eyebrow::before { flex-basis: 1.4rem; }

/* ---------- Detail: agency rows underline rather than reflow ---------- */
.agency { position: relative; transition: background .22s ease; }
.agency:hover { padding-left: 0; padding-right: 0; background: rgba(169,130,90,.055); }
.agency::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--bronze); transition: width .5s cubic-bezier(.22,.61,.36,1);
}
.agency:hover::after { width: 100%; }
.agency-name { font-weight: 300; }
.agency-desc { line-height: 1.6; }

/* ---------- Availability matrix: sticky header and first column ---------- */
.matrix-frame { padding: 0; }
.matrix-caption { padding: 1.15rem 1.3rem; margin: 0; border-bottom: 1px solid var(--hairline); }
table.matrix th, table.matrix td { padding: .78rem .7rem; }
table.matrix thead th { position: sticky; top: 0; background: var(--bone); z-index: 2; padding-top: 1rem; }
table.matrix tbody th {
  position: sticky; left: 0; background: var(--bone); z-index: 1;
  font-weight: 300; font-size: 1.02rem;
  padding-left: 1.3rem; padding-right: 1.7rem;
  box-shadow: 1px 0 0 var(--hairline);
}
table.matrix tbody tr:hover th, table.matrix tbody tr:hover td { background: #F1EBE1; }
table.matrix .no { opacity: .78; }
.formats { margin: 0; padding: 1.05rem 1.3rem; }

/* ---------- Motion: shorter travel, longer settle, staggered heads ---------- */
[data-reveal] { transform: translateY(11px); transition-duration: .72s; }
.section-head[data-reveal] > * { opacity: 0; transform: translateY(9px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.section-head[data-reveal].is-in > * { opacity: 1; transform: none; }
.section-head[data-reveal].is-in > *:nth-child(2) { transition-delay: .08s; }
.section-head[data-reveal].is-in > *:nth-child(3) { transition-delay: .16s; }
.no-js .section-head[data-reveal] > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .section-head[data-reveal] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* category tiles are names only — two up on small screens */
@media (max-width: 600px) {
  .grid-3:has(.cat) { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; }
  .cat h3 { font-size: 1.05rem; }
}

/* ---------- UX pass ---------- */

/* screen-reader-only text */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* FIX 1 — call button in the mobile header */
.hdr-call { display: none; }
@media (max-width: 880px) {
  .hdr-call {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 1rem; margin-left: auto; margin-right: .6rem;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
    text-transform: uppercase; text-decoration: none;
    color: var(--stone); border: 1px solid var(--bronze);
  }
  .hdr-call:hover { background: var(--bronze); color: #fff; }
}

/* FIX 2 — visible focus on form fields, matching the rest of the site */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.consent input:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
  border-color: var(--bronze);
  box-shadow: none;
}

/* FIX 3 — the consent checkbox becomes a real target */
.consent { align-items: center; gap: .9rem; }
.consent input[type="checkbox"] {
  width: 24px; height: 24px; flex: 0 0 24px; margin: 0;
  accent-color: var(--bronze); cursor: pointer;
}
.consent label { cursor: pointer; }

/* FIX 4 — required markers */
.req { color: var(--bronze-text); margin-left: .15em; }
.form-note {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: #5C544B; margin: -0.4rem 0 1.6rem;
}

/* FIX 6 — menu button meets the 44px target */
.nav-toggle { min-height: 44px; padding: .7rem 1rem; }

/* ---------- Logo wall ----------
   Flex rather than grid so a partial last row centres instead of leaving holes.
   Logos vary from 0.74:1 to 12.4:1, so each is capped on BOTH axes: wide
   wordmarks hit the width limit, square emblems hit the height limit. */
.logo-wall {
  display: flex; flex-wrap: wrap; margin: 0; padding: 0;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.logo-wall li {
  list-style: none;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  /* flex-grow MUST stay 0. With grow:1 an incomplete final row expands its
     items toward 100%/n, capped by max-width, so four items in the last row
     became 280px each instead of the 189px column and the row's right edge
     landed at 1255 instead of 1266 — visibly out of line with the seven rows
     above. grow:0 holds every column at the flex-basis and leaves the last
     row short but aligned. */
  flex: 0 1 calc(100% / 6); min-width: 150px; max-width: 280px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem 1.1rem; min-height: 104px;
}
.logo-wall img {
  max-width: 82%; max-height: 46px; width: auto; height: auto;
  opacity: .88; transition: opacity .25s ease;
}
.logo-wall li:hover img { opacity: 1; }
/* the widest wordmarks need more width to stay legible */
.logo-wall img[data-wide] { max-width: 94%; max-height: 26px; }
.logo-wall img[data-tall] { max-height: 60px; }

.dark .logo-wall, .deep .logo-wall { border-color: var(--hairline-dark); }
.dark .logo-wall li, .deep .logo-wall li { border-color: var(--hairline-dark); }
.dark .logo-wall img, .deep .logo-wall img { filter: invert(1); opacity: .82; }
.dark .logo-wall li:hover img, .deep .logo-wall li:hover img { opacity: 1; }

/* Client name on hover. The mark alone is not always identifiable — several
   are wordmarks in a house typeface and four are emblems. The name is copied
   from the img alt into data-name on the li, because ::after cannot attach to
   a replaced element like <img>. No JavaScript; if the CSS fails it degrades
   to nothing. Screen readers already get the name from alt, so this is a
   sighted-hover affordance only and carries no accessibility weight. */
.logo-wall li { position: relative; }
.logo-wall li[data-name]::after {
  content: attr(data-name);
  position: absolute;
  left: 50%; bottom: .35rem;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--warm-grey);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.logo-wall li[data-name]:hover::after { opacity: 1; }
.dark .logo-wall li[data-name]::after,
.deep .logo-wall li[data-name]::after { color: #9C9285; }
@media (hover: none) {
  /* Touch devices have no hover, so the label would either never appear or
     stick after a tap. Suppress it rather than leave it half-working. */
  .logo-wall li[data-name]::after { content: none; }
}

@media (max-width: 900px) { .logo-wall li { flex-basis: calc(100% / 4); min-height: 92px; } }
@media (max-width: 560px) { .logo-wall li { flex-basis: calc(100% / 3); min-width: 100px; min-height: 76px; padding: 1rem .7rem; }
  .logo-wall img { max-height: 28px; } .logo-wall img[data-wide] { max-height: 18px; } }

/* Standalone brand line on the homepage, where the philosophy block used to sit */
.tagline-band { text-align: center; }
.tagline-band .tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  line-height: 1.35;
  color: var(--bronze-light);
  max-width: 30ch;
  margin: 0 auto;
  padding: 0;
  border-top: 0;
}

/* placeholder slots follow the same ratios as real photography */
.imgslot.wide { aspect-ratio: 2 / 1; }
@media (max-width: 760px) { .imgslot.wide { aspect-ratio: 3 / 2; } }

/* Homepage only: the featured agencies run two to a row on wider screens */
@media (min-width: 860px) {
  .agency-two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.5rem; }
  .agency-two .agency { border-bottom: 1px solid var(--hairline); }
  .agency-two .agency:nth-last-child(-n+1) { border-bottom: 1px solid var(--hairline); }
}

/* Brand mark above the name in agency rows. Absent marks simply leave no gap. */
.agency-logo-slot {
  display: flex; align-items: flex-end;
  height: 42px; margin-bottom: .75rem;
}
.agency-logo {
  display: block;
  max-height: 26px; max-width: 150px;
  width: auto; height: auto;
  opacity: .78;
  transition: opacity .25s ease;
}
.agency-logo.wide { max-height: 20px; max-width: 190px; }
.agency-logo.tall { max-height: 40px; max-width: 60px; }
.agency:hover .agency-logo { opacity: 1; }
.dark .agency-logo, .deep .agency-logo { filter: invert(1); opacity: .8; }
.dark .agency:hover .agency-logo, .deep .agency:hover .agency-logo { opacity: 1; }
@media (max-width: 600px) {
  .agency-logo-slot { height: 36px; margin-bottom: .6rem; }
  .agency-logo { max-height: 22px; max-width: 130px; }
  .agency-logo.tall { max-height: 34px; max-width: 52px; }
}

/* Google Maps embed — fills the width, keeps the site's 2:1 band proportion */
.map-embed { position: relative; width: 100%; aspect-ratio: 2 / 1; border: 1px solid var(--hairline); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) { .map-embed { aspect-ratio: 3 / 2; } }