/* Dorman Associates site.css
   Layout concept: a gallery wall. White ground, photographs edge to edge, type in a quiet
   grotesk, the firm's rust square as the only colour, the firm's own statements in a light serif. */

:root {
  --paper: #ffffff;
  --paper-2: #f4f3f1;
  --band: #f8f7f5;
  --ink: #242321;
  --ink-2: #56534f;
  --ink-3: #726e6a;     /* was #8b8783 (3.6:1 on white); same 30 degree warm grey, 5.06:1 on --paper, 4.56:1 on --paper-2 (WCAG AA, 2026-10-23) */
  --rule: #e4e1dd;
  --rust: #a85a3f;
  --rust-ink: #8c4a33;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Helvetica Neue", Helvetica, Arial, sans-serif;   /* Chris, 2026-10-19: one typeface; weight and size carry the variety */
  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --s1: 8px; --s2: 16px; --s3: 24px;
  --s4: clamp(32px, 2.5vw + 22px, 40px);   /* 32 on phones, 40 from 720 px */
  --s5: clamp(48px, 2.5vw + 28px, 64px);   /* 48 to 800 px, 54 at 1024, 64 from 1440 */
  --s6: clamp(72px, 9vw, 128px);           /* 72 to 800 px, 92 at 1024, 128 from 1422 */
  --open: calc(var(--s5) + var(--s3));     /* header rule -> page title: 72 / 78 / 88 */
  --inset: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));   /* content edge inside any full-width or .wrap box */
  --head-h: 76px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
html.no-scroll { overflow: hidden; }   /* html only: body overflow:hidden made body the sticky header's scroll container, scrolling the Close button away (design review 2026-10-21) */
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--rust-ink); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
button { font: inherit; color: inherit; }
input, select, textarea { font-family: inherit; }   /* even the off-screen honeypot and the hidden radios: Helvetica Neue only */

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--text .text p, .wrap--text .text ul, .wrap--text.text p, .wrap--text.text ul { max-width: 66ch; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 200; font-size: 14px; }
.skip:focus { left: 8px; }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin: 0 0 var(--s2); }
.more { display: inline-block; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--rust); padding-bottom: 3px; }
.more:hover { border-color: var(--rust-ink); }

/* Photographs */
.ph { position: relative; overflow: hidden; background: var(--paper-2); }
.ph picture, .ph img { width: 100%; height: 100%; }
.ph img { object-fit: cover; object-position: var(--pos, 50% 50%); }   /* --pos: which part of a photograph survives the crop (overrides.json photo_pos) */
.ph--missing { aspect-ratio: 3/2; border: 1px dashed var(--rule); display: grid; place-items: center; color: var(--ink-3); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* Header */
.head { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); }
.head__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: var(--head-h); max-width: none; }   /* full width: the logo sits at the left gutter, the nav at the right (Harper, 2026-10-20) */
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 260px; height: auto; }
.logo--light { display: none; }              /* a theme with logo_overlay shows it over the opening photograph */
.nav { display: flex; gap: 44px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.nav a { display: inline-block; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); padding: 8px 0; position: relative; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--rust); }
.nav-toggle { display: none; background: none; border: 0; padding: 10px 0 10px 12px; cursor: pointer; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; color: var(--ink); align-items: center; gap: 10px; }
.nav-toggle i { display: inline-block; width: 22px; height: 12px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
@media (max-width: 1260px) {
  .nav { position: fixed; left: 0; right: 0; top: calc(var(--head-h) + 1px); height: calc(100vh - var(--head-h) - 1px); height: calc(100dvh - var(--head-h) - 1px); background: var(--paper); flex-direction: column; gap: 0; padding: 12px var(--gutter) 40px; overflow: auto; transform: translateY(-6px); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
  .head.is-open .nav { transform: none; opacity: 1; pointer-events: auto; }
  .head:not(.is-open) .nav { visibility: hidden; transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; }   /* the closed drawer's links leave the Tab order and the accessibility tree; hidden only after the closing fade, shown at once on open */
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul + ul { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
  .nav a { display: block; padding: 14px 0; font-size: 17px; letter-spacing: .02em; text-transform: none; font-weight: 400; color: var(--ink); }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { color: var(--rust-ink); }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 480px) { .brand img { width: 200px; } }

/* Home: hero */
.hero { position: relative; height: min(84vh, 920px); min-height: 440px; background: var(--ink); overflow: hidden; }
.hero picture, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero img { object-fit: cover; }
.hero picture { opacity: 0; transition: opacity 1.8s ease; }
.hero picture.is-on { opacity: 1; }
.hero__cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 22px; margin: 0; color: #fff; font-size: 13px; letter-spacing: .06em; text-shadow: 0 1px 14px rgba(0,0,0,.55); display: flex; justify-content: space-between; gap: 16px; }
.hero__cap b { font-weight: 500; }
.hero__dots { display: flex; gap: 8px; align-items: center; }
.hero__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.45); cursor: pointer; }
.hero__dot[aria-current="true"] { background: #fff; }
.hero__arrow { width: 28px; height: 28px; border: 0; padding: 0; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; opacity: .75; }   /* previous and next (Chris, 2026-10-27) */
.hero__arrow::before { content: ""; width: 9px; height: 9px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateX(2px) rotate(45deg); }
.hero__arrow--next::before { transform: translateX(-2px) rotate(-135deg); }
.hero__arrow:hover { opacity: 1; }
@media (max-width: 700px) { .hero { height: 68vh; min-height: 380px; } .hero__dots { display: none; } }

/* Home: statement */
.statement { padding-top: var(--s6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4) var(--s5); align-items: start; }
.statement__h { font: 700 clamp(32px, 3.8vw, 56px)/1.12 var(--sans); letter-spacing: -.02em; margin: 0; }
.statement__p { font-size: 18px; color: var(--ink-2); margin: 0 0 var(--s2); max-width: 58ch; }
.statement__side { padding-top: 10px; }

/* Home: sectors */
.sectors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); padding-top: var(--s6); }
.tile { display: block; }
.tile .ph { aspect-ratio: 3/2; }
.tile img { transition: transform .9s ease; }
.tile:hover img { transform: scale(1.025); }
.tile__cap { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--rule); margin-top: 16px; }
.tile__cap h2 { font: 400 22px/1.2 var(--sans); letter-spacing: -.01em; }
.tile__cap p { margin: 0; color: var(--ink-3); font-size: 14px; text-align: right; max-width: 30ch; }
.tile:hover h2 { color: var(--rust-ink); }

/* Sections, cards */
.sec { padding-top: var(--s6); }
.sec__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: var(--s4); padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.sec__head h2 { font: 300 clamp(26px, 2.6vw, 36px)/1.15 var(--sans); letter-spacing: -.015em; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.card { display: block; min-width: 0; }
.card .ph { aspect-ratio: 3/2; }
.card img { transition: transform .9s ease; }
.card:hover img { transform: scale(1.025); }
.card__t { margin: 12px 0 2px; font: 400 17px/1.3 var(--sans); }
.card__m { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.card:hover .card__t { color: var(--rust-ink); }

/* Bands */
.band { background: var(--band); margin-top: var(--s5); }   /* lighter than paper-2 (Chris, 2026-10-27: less gray) */
.band__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; padding-block: var(--s5); }   /* a step smaller (Chris, 2026-10-27) */
.band__in .ph { aspect-ratio: 3/2; }
.band h2 { font: 300 clamp(26px, 2.6vw, 36px)/1.15 var(--sans); letter-spacing: -.015em; margin-bottom: 18px; }
.band p:not(.eyebrow) { color: var(--ink-2); font-size: 17px; max-width: 54ch; }
.links { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 8px; }

.cta { position: relative; margin-top: var(--s6); padding-block: var(--s5) var(--s6); text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2) var(--s5); align-items: baseline; }
.cta h2 { font: 300 clamp(28px, 3vw, 44px)/1.12 var(--sans); letter-spacing: -.005em; }
.cta__lines { font-size: 17px; color: var(--ink-2); display: grid; gap: var(--s2); justify-items: start; }
.cta__lines a { border-bottom: 1px solid var(--rule); }
.cta__lines a:hover { border-color: var(--rust); }
.cta__lines a.more { color: var(--ink); border-bottom-color: var(--rust); }   /* Contact Us is a .more link like every other: ink with the rust rule (the rule above outranked .more) */
.cta__lines a.more:hover { color: var(--rust-ink); border-bottom-color: var(--rust-ink); }

/* Footer */
.foot { border-top: 1px solid var(--rule); padding-block: var(--s5) var(--s4); font-size: 14px; color: var(--ink-2); }
.foot__in { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: var(--s4); }
.mark { width: 26px; height: 26px; background: var(--rust); display: inline-block; }
.foot__brand p { margin: 14px 0 0; line-height: 1.55; }
.foot h3 { font: 500 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: var(--s5); padding-top: 20px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }
.social { display: flex; gap: 10px; }
.social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 50%; color: var(--ink-2); }
.social a:hover { border-color: var(--rust); color: var(--rust-ink); }
.social svg { width: 16px; height: 16px; fill: currentColor; }

/* Page head (category, about, team, contact) */
.pagehead { padding-block: var(--open) var(--s4); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3) var(--s5); align-items: start; }
.pagehead h1 { font: 300 clamp(36px, 5vw, 66px)/1.02 var(--sans); letter-spacing: -.025em; }
.pagehead p { font: 300 clamp(19px, 1.55vw, 23px)/1.45 var(--sans); color: var(--ink-2); margin: 0; }
.pagehead p + p { margin-top: .8em; }
/* category overlay (themes): the first intro paragraph is also written below the photograph; a theme shows it there */
.lead__intro-after, .pagehead--phone { display: none; }
.lead__intro-after + p { margin-top: 0; }
/* Full-bleed photograph boxes. --ar (set by the build) is the photograph's aspect ratio: the box is never taller
   than the photograph shown at full width, so a panorama keeps its sides instead of being cropped to the box. */
.lead-ph { height: min(72vh, 780px, calc(100vw / max(var(--ar, 1.5), 1.45))); min-height: 320px; }
.group { padding-top: var(--s5); }
.group h2 { font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s3); padding-bottom: 12px; border-bottom: 1px solid var(--rule); }

/* Project page */
.phero { height: min(86vh, 980px, calc(100vw / max(var(--ar, 1.5), 1.45))); min-height: 360px; }
.pintro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: var(--s3) var(--s6); padding-top: var(--s5); }
.pintro--nofacts { grid-template-columns: minmax(0, 1fr); }
.pintro--nofacts .overview p { max-width: 72ch; }
.pintro__head { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.pintro__head .crumb { order: -1; }
.pintro h1 { font: 300 clamp(32px, 4.2vw, 58px)/1.04 var(--sans); letter-spacing: -.025em; }
.crumb { margin: 0; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.crumb a:hover { color: var(--rust-ink); }
.facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 22px; font-size: 14.5px; align-content: start; }
.facts div { display: contents; }
.facts dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 500; padding-top: 4px; }
.facts dd { margin: 0; }
.overview p { font-size: 18px; line-height: 1.65; max-width: 66ch; }
.overview > p:not(.eyebrow):first-child, .overview > .eyebrow + p { font-size: 21px; line-height: 1.5; color: var(--ink); }   /* the lead paragraph, not the 'Project Overview' eyebrow (design review 2026-10-21) */
.meta { font-size: 14px; color: var(--ink-3); margin-top: var(--s3); display: grid; gap: 6px; }
.meta a { text-decoration: underline; text-underline-offset: 3px; }
/* Gallery: rows of photographs that share a height. In a .g-row each figure's width follows its aspect ratio
   (flex-grow = --ar), so a portrait beside a landscape is narrower rather than cropped and the row stays level. */
.gallery { display: grid; gap: var(--s3); padding-top: var(--s6); }
.gallery figure { margin: 0; min-width: 0; }
.gallery .g-row { display: flex; gap: var(--s3); align-items: flex-start; }
.gallery .g-row figure { flex: var(--ar, 1.5) 1 0; }
.gallery .g-solo { display: flex; justify-content: center; }
.gallery .g-solo figure { flex: 0 1 46%; }
.gallery img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.pnav { position: relative; display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); padding-block: var(--s4); font-size: 14px; color: var(--ink-2); }
.pnav a { display: grid; gap: 4px; }
.pnav a:last-child { text-align: right; }
.pnav small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }

/* Lightbox */
.lb { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(16, 15, 14, .97); color: #fff; }
.lb::backdrop { background: rgba(0,0,0,.8); }
.lb img { position: absolute; inset: 0; margin: auto; max-width: min(94vw, 1920px); max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.lb button { position: absolute; background: none; border: 0; color: #fff; font: 500 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 18px; }
.lb button:hover { color: #fff; opacity: .75; }
.lb__close { top: 8px; right: 8px; }
.lb__prev, .lb__next { top: 50%; transform: translateY(-50%); height: 60vh; width: min(18vw, 160px); }
.lb__prev { left: 0; text-align: left; }
.lb__next { right: 0; text-align: right; }
.lb__n { position: absolute; left: 22px; bottom: 20px; font-size: 12.5px; letter-spacing: .08em; color: rgba(255,255,255,.72); }
.lb__cap { position: absolute; right: 22px; bottom: 20px; font-size: 12.5px; letter-spacing: .04em; color: rgba(255,255,255,.72); max-width: 60vw; text-align: right; }

/* About */
.rows { display: grid; gap: var(--s5); padding-top: var(--s6); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.row:nth-child(even) .row__ph { order: -1; }
.row h2 { font: 300 clamp(24px, 2.4vw, 34px)/1.15 var(--sans); letter-spacing: -.015em; margin-bottom: 18px; }
.row p { font-size: 17px; color: var(--ink-2); max-width: 56ch; }
.row__ph .ph { aspect-ratio: 4/3; }
.row__ph .ph--draw { aspect-ratio: auto; background: var(--paper); }
.row__ph .ph--draw img { object-fit: contain; height: auto; }

/* Team */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); padding-block: 0; }
.person { min-width: 0; scroll-margin-top: calc(var(--head-h) + 24px); }   /* a headshot link from the home page lands with the name below the header */
.person .ph { aspect-ratio: 4/5; }
.person h3 { font: 400 18px/1.25 var(--sans); margin: 14px 0 8px; }
.person p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* Contact */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s3); }
.form label { display: grid; gap: 4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.form label.full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font: 400 17px/1.3 var(--sans); color: var(--ink); background: var(--paper); border: 0; border-bottom: 1px solid var(--ink-3); border-radius: 0; padding: 4px 0 8px; width: 100%; -webkit-appearance: none; appearance: none; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-bottom-color: var(--rust); }
.form :is(input, select, textarea):focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }   /* the site's focus ring (review 2026-10-23): a rust underline alone was 1.01:1 against the grey one */
.form button { grid-column: 1 / -1; justify-self: start; background: var(--ink); color: #fff; border: 0; padding: 14px 26px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; cursor: pointer; }
.form button:hover { background: var(--rust-ink); }
.form__note { grid-column: 1 / -1; font-size: 14px; color: var(--ink-3); margin: 0; }
.form__note:empty { position: absolute; }   /* out of the grid while empty; stays in the accessibility tree as a live region */
.hp { position: absolute; left: -9999px; }

/* Text pages (Careers, ADU FAQ, Philosophy, Process, Client list, Our Story) */
.text { padding-top: var(--s6); }
.text--rule { margin-top: var(--s6); padding-top: var(--s5); }
.text > h2:not(:first-child) { margin-top: var(--s5); }
.text h2, .row h2 { font: 300 clamp(24px, 2.4vw, 34px)/1.15 var(--sans); letter-spacing: -.015em; margin: 0 0 18px; }
.text h2 + h3, .row h2 + h3 { margin-top: 8px; }
.text h3, .row h3 { font: 500 17px/1.3 var(--sans); margin: 28px 0 8px; }
.text p, .row p { font-size: 17px; color: var(--ink-2); max-width: 62ch; }
.text p.lead { font: 300 clamp(19px, 1.5vw, 22px)/1.5 var(--sans); color: var(--ink-2); margin-bottom: var(--s4); }
.label, .text p.label, .row p.label { font: 500 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 26px 0 8px; max-width: none; }
.label:first-child, .text p.label:first-child, .row p.label:first-child { margin-top: 0; }
.text ul, .row ul { margin: 0 0 1em; padding-left: 1.2em; color: var(--ink-2); font-size: 17px; max-width: 62ch; }
.text li + li { margin-top: 6px; }
.text :is(p, li) a:not(.more) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* in-text links read as links (Careers, ADU FAQ ...), as on the credit and press lines */
.text :is(p, li) a:not(.more):hover { text-decoration-color: var(--rust); }
.cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4) var(--s5); }
.pairs { max-width: 66ch; }
.pairs p.label { margin: 0 0 var(--s1); }
.pairs p:not(.label) { margin: 0 0 var(--s5); }
.row--text { grid-template-columns: minmax(0, 1fr); }
.row--text > div { max-width: 68ch; }
.clients { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s4); font-size: 18px; max-width: none; }
.clients li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.overview .sub { font: 500 18px/1.35 var(--sans); letter-spacing: -.005em; margin: 26px 0 8px; }
.overview .sub:first-child { margin-top: 0; }
.overview .sub + p { margin-top: 0; }
.overview p.eyebrow, .band p.eyebrow { font-size: 12px; line-height: 1.6; letter-spacing: .12em; color: var(--ink-3); max-width: none; }
.overview p.eyebrow { margin: 0 0 var(--s2); padding-top: 4px; }   /* the 4 px mirrors .facts dt so both 12 px labels share a top line */
.overview .meta p { font-size: 14px; line-height: 1.6; color: var(--ink-3); margin: 0; max-width: none; }
.cta .cta__lines p { margin: 0; max-width: 46ch; }

/* Hospitality page, Press page, status marks */
.facts-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); margin-block: var(--s5) 0; }
.facts-strip div { background: var(--paper); padding: 22px 20px 20px; }
.facts-strip b { display: block; font: 300 clamp(30px, 3vw, 42px)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.facts-strip span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.card--x .card__x { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.band--flora .band__in { align-items: center; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding-block: var(--s4); gap: var(--s4) var(--s5); }   /* a shorter, quieter band (Chris 10/27, Harper 10/29) */
.band--flora .band__in .ph { aspect-ratio: 16/9; }
.band--flora h2 { font-size: clamp(22px, 2.1vw, 28px); margin-bottom: 12px; }
.band--flora p:not(.eyebrow) { font-size: 15.5px; }
.flora-list { list-style: none; margin: 14px 0 0; padding: 0; max-width: 46ch; columns: 2; column-gap: var(--s4); }
.flora-list li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14px; break-inside: avoid; }
.flora-list li:last-child { border-bottom: 0; }
.flora-list span { color: var(--ink-3); white-space: nowrap; }
.awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); }
.awards li a { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.awards li p { margin: 8px 0 0; font: 300 clamp(18px, 1.5vw, 22px)/1.4 var(--sans); color: var(--ink); }
.press { list-style: none; margin: 0; padding: 0; }
.press li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.press li:first-child { border-top: 1px solid var(--rule); }
.press__year { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 14px; padding-top: 3px; }
.press h3 { font: 400 18px/1.3 var(--sans); margin: 0 0 6px; }
.press p { margin: 0; font-size: 15.5px; color: var(--ink-2); max-width: 70ch; }
.press p a { text-decoration: underline; text-underline-offset: 3px; }
.notice { background: #fff7e6; border-left: 3px solid #e0a53a; padding: 12px 16px; font-size: 14px; color: #6b4b10; margin: 16px 0 0; }
.notice--draft { background: #fff7e6; color: #6b4b10; padding: 12px 16px; margin: 0 0 var(--s3); font-size: 14px; line-height: 1.5; }   /* the Drafts workspace banner (preview only) */
.drafts h2 { font: 300 clamp(22px, 2.2vw, 28px)/1.2 var(--sans); margin: var(--s4) 0 var(--s2); }
.drafts__list { list-style: none; margin: 0; padding: 0; }
.drafts__list li { padding: 14px 0; border-top: 1px solid var(--rule); }
.drafts__list li p { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; max-width: 70ch; }
.drafts__kind { margin-left: 14px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.drafts__foot { margin-top: var(--s4); }
.draft-tag { display: inline-block; font: 500 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #6b4b10; background: #fff7e6; padding: 5px 8px; margin-left: 12px; vertical-align: middle; border-radius: 2px; }
.card__t .draft-tag { margin-left: 8px; }
mark.confirm { background: #fff3cd; color: #6b4b10; padding: 0 4px; }

/* Flags for the review pass (preview only) */
.flag { background: #fff7e6; border-left: 3px solid #e0a53a; padding: 10px 14px; font-size: 14px; color: #6b4b10; margin: 0 0 var(--s3); }

/* Responsive */
@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__in { grid-template-columns: 1fr 1fr; }
  .pintro { grid-template-columns: 1fr; }
  .facts { grid-template-columns: max-content minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .statement, .pagehead, .band__in, .cta, .row, .cols2, .pairs { grid-template-columns: 1fr; }
  .clients { columns: 1; }
  .row:nth-child(even) .row__ph { order: 0; }
  .sectors { grid-template-columns: 1fr; }
  .tile__cap p { text-align: left; }
  .gallery .g-row { flex-direction: column; }
  .gallery .g-solo figure { flex-basis: 100%; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s2); }
  .band__in { row-gap: var(--s3); }
  .row { gap: var(--s3); }
  .form { grid-template-columns: 1fr; }
  .facts-strip { grid-template-columns: 1fr 1fr; }
  .awards { grid-template-columns: 1fr; }
  .press li { grid-template-columns: 1fr; gap: 4px; }
  .sec__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lead-ph { height: 52vh; min-height: 260px; }
  .phero { height: 60vh; }
  .lead-ph.ph--wide, .phero.ph--wide { height: max(48vw, 200px); min-height: 0; }
  .overview > p:not(.eyebrow):first-child, .overview > .eyebrow + p { font-size: 19px; }
  .lb__prev, .lb__next { width: 26vw; }
}
@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
  .foot__in { grid-template-columns: 1fr 1fr; column-gap: var(--s3); }
  .foot__brand, .foot__in > div:last-child { grid-column: 1 / -1; }
}

/* Rhythm fixes (audit 2026-10-19): one hairline where two met, consistent 64 px above the next rule, no empty cells */
.group .press li:first-child { border-top: 0; }
.sec + .text--rule { margin-top: 0; padding-top: var(--s6); }
.sec + .text--rule::before { display: none; }
.pagehead > div:empty { display: none; }
.pagehead .links { margin-top: var(--s2); }
.card__m:empty { display: none; }
.notice { margin-block: 16px; }
.mark { width: 30px; height: 30px; }
.cols2 > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pintro h1 { font: 300 clamp(34px, 4.6vw, 60px)/1.04 var(--sans); letter-spacing: -.025em; }
.pagehead h1 { font: 300 clamp(34px, 4.6vw, 60px)/1.04 var(--sans); letter-spacing: -.025em; }
.cta h2 { font: 300 clamp(26px, 2.6vw, 36px)/1.15 var(--sans); }
.eyebrow, .group h2, .foot h3, .label, .crumb, .pnav small, .form label, .facts dt, .awards a { font-size: 12px; letter-spacing: .12em; }
.card__m, .facts-strip span { font-size: 14px; }
@media (max-width: 1000px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .people { gap: var(--s4) var(--s3); }
}

/* Chris's picks (2026-10-19): category badge on the home cards, headshot band, footer lockup */
.card .ph { position: relative; }
.card__cat { position: absolute; right: 12px; bottom: 10px; font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.band__heads { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.band__heads .ph { aspect-ratio: 4 / 5; }
.band__head img { transition: transform .9s ease; }
.band__head:hover img { transform: scale(1.04); }
.foot__brand img { width: 220px; height: auto; }
@media (max-width: 760px) { .band__heads { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } }

/* Spacing system (2026-10-23, wf1/SPACING_SPEC.md). Every block in <main> owns the space ABOVE it; nothing pads its own
   bottom except the page head (s4 to its photograph or content) and the last block before the footer (s6). */
main > :last-child { padding-bottom: var(--s6); }
main > .sec:first-child { padding-top: var(--open); }                                /* Thank you, 404: the same opening step as a page head */
.pagehead + :is(.sec, .text, .rows, .group) { padding-top: 0; }          /* the head's own s4 is the step */
.lead-ph + :is(.sec, .text, .rows, .pagehead) { padding-top: var(--s5); }          /* a full-bleed plane is itself the divider */
.band + :is(.sec, .text, .rows) { padding-top: var(--s5); }
:is(.sec, .text, .rows, .group, .statement) + .lead-ph { margin-top: var(--s5); }
:is(.band, .lead-ph) + .cta { margin-top: 0; padding-top: var(--s5); }
:is(.band, .lead-ph) + .cta::before { display: none; }
.pnav + .cta { margin-top: 0; }                                                      /* pnav becomes a ruled strip: rule, s4, links, s4, CTA rule */
/* In-page hairlines sit on the content edge (header and footer rules stay full-bleed) */
:is(.cta, .pnav, .text--rule) { border-top: 0; }
:is(.cta, .pnav, .text--rule)::before { content: ""; position: absolute; top: 0; left: var(--inset); right: var(--inset); border-top: 1px solid var(--rule); }
.text--rule { position: relative; }
/* A block's last paragraph or list never adds its margin to the step below it */
:is(.sec, .text, .group, .overview, .meta, .row > div, .band__in > div, .cols2 > div, .pairs, .statement__side, .cta__lines) > :last-child { margin-bottom: 0; }
:is(.text, .overview, .row > div, .band__in > div, .cols2 > div) > :first-child { margin-top: 0; }   /* ...and its first heading or label never adds a top margin */
/* Page heads with no side text: the title takes the full measure instead of a narrow first column */
.pagehead:not(:has(> div)) { grid-template-columns: minmax(0, 1fr); }
.pagehead:not(:has(> div)) h1 { max-width: 24ch; }
@media (min-width: 1001px) { .pintro .facts { position: sticky; top: calc(var(--head-h) + var(--s4)); align-self: start; } }
@media (max-width: 520px) { .people { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } .person .ph { max-width: 280px; } }

/* Review fixes (2026-10-23, impl/FIXES.md) */
/* VC-14: between 1001 and 1299 px the facts column is 274 to 340 px and its value column 92 to 160: each fact stacks (label over
   value) so two-word values ("Redwood City, CA", "Completed 2019") stay on one line; from 1300 the value column is 166 as at 1440 */
@media (min-width: 1001px) and (max-width: 1299px) {
  .pintro .facts { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .pintro .facts dt { padding-top: 0; margin-bottom: 4px; }
  .pintro .facts dd { margin-bottom: 14px; }
  .pintro .facts div:first-child dt { padding-top: 4px; }   /* the first label keeps its top line with the overview eyebrow */
}
/* VC-15: a long Process row keeps its photograph in view beside the text instead of leaving an empty half-column */
@media (min-width: 761px) { .rows--text .row__ph { position: sticky; top: calc(var(--head-h) + var(--s4)); } }
/* VC-16: a group of exactly four cards goes four across (no card alone on a second row), as the Contact strip does */
@media (min-width: 1001px) { .grid--grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Group chooser on the Hospitality page (Chris, 2026-10-27): the group names as in-page links, kept in view under the header */
.chips { position: sticky; top: var(--head-h); z-index: 30; display: flex; gap: 28px; overflow-x: auto; background: var(--paper); border-bottom: 1px solid var(--rule); padding-block: 14px; max-width: none; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); white-space: nowrap; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.chips a:hover { color: var(--ink); border-color: var(--rust); }
.chips ~ .group, .chips ~ .band, .chips ~ .sec { scroll-margin-top: calc(var(--head-h) + 64px); }   /* lands below the chooser bar */
.chips + .wrap { padding-top: var(--s2); }

/* Hospitality doors (Harper, 2026-10-29): four photographs under the opener, one per kind of work, each a jump to its group */
.hdoors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); padding-top: var(--s2); }
.hdoor { display: block; min-width: 0; }
.hdoor .ph { aspect-ratio: 3/2; }
.hdoor img { transition: transform .6s ease; }
.hdoor:hover img { transform: scale(1.025); }
.hdoor__t { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); }
.hdoor:hover .hdoor__t { color: var(--rust-ink); }
.hdoors ~ .group, .hdoors ~ .band { scroll-margin-top: calc(var(--head-h) + 16px); }
.hdoors + .group { padding-top: var(--s5); }
@media (max-width: 760px) { .hdoors { grid-template-columns: 1fr 1fr; gap: var(--s2); } .hdoor__t { font-size: 11px; } .flora-list { columns: 1; } }
@media (prefers-reduced-motion: reduce) { .hdoor img { transition: none; } .hdoor:hover img { transform: none; } }

/* Studio Notes (content/notes.json): a studio journal, not a feed. The newest post opens the page as a lead story at its
   photograph's own proportion; each post's first sentence is its headline (the firm's words, re-set); carousels run as a
   filmstrip; months divide the feed; a newsletter issue sits in the feed as its own object; one Follow along band closes. */
.notes { padding-top: var(--s3); }
.notes__month { display: flex; align-items: center; gap: 16px; margin: var(--s5) 0 0; font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.notes__month::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.note { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s3) var(--s5); align-items: start; padding-block: var(--s4); }
.note + .note { border-top: 1px solid var(--rule); }
.note + .issue, .issue + .note { border-top: 0; }
.note__side, .note__body { min-width: 0; }
.note__ph { aspect-ratio: 3/2; }
.note--instagram .note__ph { aspect-ratio: 1; }
.note--lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-top: 0; }
.note--lead .note__ph { aspect-ratio: var(--ar, 1.5); }   /* the lead photograph at its own proportion, uncropped */
.note__strip { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.note__strip::-webkit-scrollbar { display: none; }
.note__strip .ph { flex: 0 0 auto; height: 112px; aspect-ratio: var(--ar, 1.5); scroll-snap-align: start; }
.note__strip .ph img { position: absolute; inset: 0; width: 100%; height: 100%; }
.note__meta { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; margin: 0 0 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); }
.note__meta span { color: var(--ink-2); }
.note__h { font: 300 clamp(24px, 2.4vw, 34px)/1.15 var(--sans); letter-spacing: -.015em; margin: 0 0 14px; max-width: 24ch; }
.note__h--long { font-size: clamp(21px, 1.9vw, 27px); max-width: 34ch; }
.note--lead .note__h { font-size: clamp(28px, 3.2vw, 46px); }
.note--lead .note__h--long { font-size: clamp(24px, 2.3vw, 34px); }
.note__h a:hover { color: var(--rust-ink); }
.note--text .note__side .note__h { font-size: clamp(26px, 2.9vw, 40px); max-width: 18ch; margin-bottom: 0; }   /* a post without a photograph: its first sentence stands where the photograph would */
.note__text p { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 0 .85em; max-width: 60ch; }
.note__text p:last-child { margin-bottom: 0; }
.note__tags { font-size: 13px; color: var(--ink-3); }
.note__links { margin: 16px 0 0; display: flex; gap: 22px; flex-wrap: wrap; }
.issue { background: var(--band); padding: var(--s4); }
.issue__no { font: 300 clamp(44px, 5vw, 72px)/1 var(--sans); letter-spacing: -.03em; color: var(--ink); margin: 0 0 14px; }
.issue__toc { margin: 0; padding: 0 0 0 1.2em; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.notes-filter a[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.notes-filter .n { color: var(--ink-3); font-weight: 400; margin-left: 5px; }
.notes[data-show] .note, .notes[data-show] .notes__month { display: none; }
.notes[data-show="instagram"] .note--instagram, .notes[data-show="linkedin"] .note--linkedin, .notes[data-show="newsletter"] .note--newsletter { display: grid; }
.notes-follow .band__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.notes-follow h2 { font: 300 clamp(26px, 2.6vw, 36px)/1.15 var(--sans); letter-spacing: -.015em; margin: 0 0 12px; }
.notes-follow p { color: var(--ink-2); max-width: 46ch; margin: 0; }
.notes-follow .links { margin-top: 18px; }
.form--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 24px; max-width: 560px; }
.form--row button { grid-column: auto; }
@media (max-width: 760px) {
  .note, .note--lead { grid-template-columns: 1fr; gap: var(--s3); padding-block: var(--s4); }
  .note__strip .ph { height: 88px; }
  .issue { padding: var(--s3); }
  .notes-follow .band__in { grid-template-columns: 1fr; }
  .form--row { grid-template-columns: 1fr; } .form--row button { grid-column: 1 / -1; }
}


/* ===== Contact (static/contact.css) ===== */
/* Contact: the discipline-led page (wf1/CONTACT_SPEC.md, 2026-10-23). build.py theme_css() puts this file after
   site.css and before any theme. Colour tokens only, so the ink theme recolours it; Helvetica Neue only, through
   var(--sans). Spacing is the site's system (SPACING_SPEC): every block owns the space above it; the page's last
   block reaches the footer through main > :last-child (s6).
   State lives on <html>, set by the inline boot script and site.js: .cx-js (script on), data-cx="hall|room",
   data-cx-for="<discipline>", .cx-ready (site.js ran). Without script the page is one complete form. */

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cx-qs { border: 0; margin: 0; padding: 0; min-width: 0; }
.cx-doors { border: 0; margin-block: 0; padding-block: 0; min-width: 0; }

/* ---------- The hall: the welcome and the four doors ---------- */
.cx-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3) var(--s5); align-items: end; padding-block: var(--open) var(--s4); }
.cx-head__h1 { margin: 0 0 var(--s2); }
.cx-head__lede { font: 300 clamp(34px, 4.6vw, 60px)/1.04 var(--sans); letter-spacing: -.025em; color: var(--ink); margin: 0; }
.cx-head__p { font: 300 clamp(19px, 1.55vw, 23px)/1.45 var(--sans); color: var(--ink-2); margin: 0; max-width: 36ch; }
.cx-doors__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.cx-door { display: block; position: relative; cursor: pointer; min-width: 0; }
.cx-door__in { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cx-door__ph { display: block; aspect-ratio: 3 / 4; }
.cx-door__ph img { object-position: var(--pos, 50% 50%); transition: transform .9s ease; }
.cx-door:hover .cx-door__ph img { transform: scale(1.025); }
.cx-door__name { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); font: 400 22px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); transition: color .2s ease, border-color .2s ease; }
.cx-door:hover .cx-door__name { color: var(--rust-ink); }
.cx-door__in:focus-visible ~ .cx-door__ph { outline: 2px solid var(--rust); outline-offset: 3px; }
.cx-door__in:focus-visible ~ .cx-door__name, .cx-door__in:checked ~ .cx-door__name { color: var(--rust-ink); border-top-color: var(--rust); }
/* the fifth choice is a quiet text option in the .more style, not a door */
.cx-door--other { display: inline-block; margin-top: var(--s3); }
.cx-door--other .cx-door__name { margin: 0; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--rust); font: 500 13.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.cx-door--other:hover .cx-door__name { border-color: var(--rust-ink); }
.cx-door--other .cx-door__in:focus-visible ~ .cx-door__name { outline: 2px solid var(--rust); outline-offset: 4px; }

/* the office: address, Directions, phone, email (the hall and Something else) */
.cx-office { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3) var(--s5); padding-top: var(--s5); font-size: 15px; line-height: 1.6; color: var(--ink-2); }   /* phone and email on the 752 / 539 axis (SPACING_SPEC 0.6, H5) */
.cx-office p { margin: 0; }
.cx-office a { border-bottom: 1px solid var(--rule); }
.cx-office a:hover { border-color: var(--rust); }
.cx-office .cx-dir { display: inline-block; margin-top: 6px; font: 500 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); border-bottom-color: var(--rust); }

/* ---------- A room ---------- */
.cx-fig { position: relative; margin: 0; }
.cx-photo { height: clamp(260px, 46vh, 520px); }
.cx-photo img { object-position: var(--pos, 50% 50%); }
/* the caption is the photograph's own line, right under the band (out of the flow, so the crumb keeps its s5 to the band) */
.cx-figcap { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--s1); padding-inline: var(--inset); display: flex; justify-content: flex-end; align-items: baseline; gap: var(--s2); line-height: 1.4; }
.cx-crumbrow { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px var(--s3); padding-top: var(--s5); }
.cx-crumb { margin: 0; }
.cx-back { position: relative; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; }
.cx-back[hidden] { display: none; }   /* the boot window: the crumb button shows only once site.js can act on it */
.cx-back::before { content: ""; position: absolute; inset: -10px -8px; }   /* a larger hit area without moving the type */
.cx-back:hover { color: var(--rust-ink); }
.cx-chev { display: inline-block; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 9px 1px 2px; }
.cx-crumb__sep { margin: 0 10px; color: var(--ink-3); }
.cx-crumb__cur { color: var(--ink); }
.cx-cap { font-size: 13px; letter-spacing: .02em; color: var(--ink-3); }
.cx-cap:hover { color: var(--rust-ink); }

/* the desk: the person and the firm's words on the left, the questions and the contact fields on the right (752 axis) */
.cx-desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; padding-top: var(--s2); }
.cx-room__h { font: 300 clamp(34px, 4.6vw, 60px)/1.04 var(--sans); letter-spacing: -.025em; color: var(--ink); margin: 0 0 var(--s3); }
.cx-room__h:focus { outline: none; }
.cx-lede { font: 300 clamp(19px, 1.55vw, 23px)/1.45 var(--sans); color: var(--ink-2); margin: 0; max-width: 40ch; }
.cx-side .links { margin-top: var(--s2); }
.cx-label { font: 500 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: var(--s5) 0 var(--s2); }
.cx-person { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.cx-person__ph { aspect-ratio: 4 / 5; }
.cx-person__ph img { object-position: var(--pos, 50% 25%); }
.cx-person__name { font: 400 19px/1.25 var(--sans); color: var(--ink); margin: 0 0 6px; }
.cx-person__bio { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 46ch; }
.cx-person + .cx-person { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule); }   /* two peers, the same size (Harper 2026-11-04) */
.cx-team.band__heads { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cx-team .band__head { display: block; }
.cx-team .band__head .ph { display: block; }
.cx-team .band__head:hover img { transform: none; }      /* not links here: no hover zoom */

/* the form column: questions, a hairline, the contact fields, Send with the firm's line beside it */
/* a label that wraps to two lines (1024 px) keeps its row level: every label in the row is as tall as the tallest, its
   text at the top and its field at the bottom, so label tops and underlines both line up (review SPC-03, VC-09) */
.cx .form { align-items: stretch; }
.cx .form label { grid-template-rows: 1fr auto; align-content: start; }
.cx .form label > span:first-child { align-self: start; }
.cx-core { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.cx-sel { position: relative; display: block; }
.cx-sel::after { content: ""; position: absolute; right: 5px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--rust); border-bottom: 1.5px solid var(--rust); transform: translateY(-75%) rotate(45deg); pointer-events: none; }
.cx select { padding-right: 26px; cursor: pointer; text-overflow: ellipsis; }
.cx input::placeholder { color: var(--ink-3); opacity: 1; }   /* an example, never mistaken for an answer */
.cx-send { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
/* required fields carry a rust asterisk (the field's own required state, so it follows contact.json message_required);
   after a send attempt an unanswered required field turns rust (review CX-03, VC-10). The mark is hidden from
   screen readers, which announce "required" from the field itself. */
.cx label:has(> :required) > span:first-child::after { content: "\00a0*"; content: "\00a0*" / ""; color: var(--rust-ink); }
.cx :is(input, select, textarea):user-invalid { border-bottom-color: var(--rust); }
.cx label:has(> :user-invalid) > span:first-child { color: var(--rust-ink); }
/* the room's first question: its options as visible choices (contact.json type "choice", review VC-06) */
.cx-pick { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; min-width: 0; }
.cx-pick__l { float: left; width: 100%; padding: 0; margin: 0 0 4px; font: 500 12px/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cx-pick__opts { clear: both; display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.cx .form .cx-opt { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font: 400 16px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.cx-opt input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.cx-opt span { padding-bottom: 3px; border-bottom: 1px solid var(--rule); transition: color .2s ease, border-color .2s ease; }
.cx-opt:hover span { color: var(--rust-ink); }
.cx-opt input:checked + span { color: var(--ink); border-bottom-color: var(--rust); }
.cx-opt input:focus-visible + span { outline: 2px solid var(--rust); outline-offset: 3px; }
.cx-send__p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* the discipline's Featured Projects, after the desk */
.cx-strip { padding-top: var(--s6); }
.cx-strip__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: var(--s3); }
.cx-strip__h { font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.cx-strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--s3); }

/* ---------- States (script on). Hiding the variants that do not match keeps each element's own display. ---------- */
.cx-js[data-cx="hall"] [data-cx-root] .cx-room, .cx-js[data-cx="hall"] [data-cx-root] .cx-strip { display: none; }
.cx-js[data-cx="room"] [data-cx-root] .cx-doors, .cx-js[data-cx="room"] [data-cx-root] .cx-head__lede, .cx-js[data-cx="room"] [data-cx-root] .cx-head__p { display: none; }
.cx-js[data-cx="room"] [data-cx-root] .cx-head { padding: 0; }
.cx-js[data-cx="room"] [data-cx-root] .cx-head__h1 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-js[data-cx="room"]:not([data-cx-for="other"]) [data-cx-root] .cx-office { display: none; }
.cx-js:not([data-cx-for="hospitality"]) [data-cx-root] [data-for="hospitality"],
.cx-js:not([data-cx-for="residential"]) [data-cx-root] [data-for="residential"],
.cx-js:not([data-cx-for="educational"]) [data-cx-root] [data-for="educational"],
.cx-js:not([data-cx-for="commercial"]) [data-cx-root] [data-for="commercial"],
.cx-js:not([data-cx-for="other"]) [data-cx-root] [data-for="other"] { display: none; }
.cx-js[data-cx-for="other"] [data-cx-root] .cx-crumbrow { padding-top: var(--open); }
.cx-js[data-cx-for="other"] [data-cx-root] .cx-core { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- No script: the doors are plain radio buttons and the page is one complete form ---------- */
html:not(.cx-js) [data-cx-root] .cx-crumbrow { display: none; }
html:not(.cx-js) [data-cx-root] .cx-fig { margin-top: var(--s5); }
html:not(.cx-js) [data-cx-root] .cx-desk { padding-top: var(--s5); }
@supports selector(:has(*)) {
  /* choosing a door shows only that discipline; before a choice, the general desk ("Something else") */
  html:not(.cx-js) [data-cx-root]:has(#cx-d-hospitality:checked) [data-for]:not([data-for="hospitality"]),
  html:not(.cx-js) [data-cx-root]:has(#cx-d-residential:checked) [data-for]:not([data-for="residential"]),
  html:not(.cx-js) [data-cx-root]:has(#cx-d-educational:checked) [data-for]:not([data-for="educational"]),
  html:not(.cx-js) [data-cx-root]:has(#cx-d-commercial:checked) [data-for]:not([data-for="commercial"]),
  html:not(.cx-js) [data-cx-root]:has(#cx-d-other:checked) [data-for]:not([data-for="other"]),
  html:not(.cx-js) [data-cx-root]:not(:has(.cx-door__in:checked)) [data-for]:not([data-for="other"]) { display: none; }
  html:not(.cx-js) [data-cx-root]:not(:has(.cx-door__in:checked)) .cx-side[data-for="other"] .cx-lede { display: none; }   /* the hall already says it */
  html:not(.cx-js) [data-cx-root]:not(:has(.cx-door__in:checked)) .cx-core,
  html:not(.cx-js) [data-cx-root]:has(#cx-d-other:checked) .cx-core { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ---------- Motion: the chosen door's photograph grows into the room's band (same-document view transition), the rest
   of the room rises 10 px and fades in. contact.json "motion": false keeps only the fade; reduced motion: nothing moves. */
@keyframes cx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cx-anim .cx-crumbrow, .cx-anim .cx-desk { animation: cx-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.cx-anim .cx-desk { animation-delay: .08s; }
::view-transition-group(cx-photo) { animation-duration: .55s; animation-timing-function: cubic-bezier(.25, .8, .25, 1); }
::view-transition-old(cx-photo), ::view-transition-new(cx-photo) { animation: none; mix-blend-mode: normal; width: 100%; height: 100%; object-fit: cover; overflow: clip; }   /* no crossfade: one photograph changes shape */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) {
  .cx-anim .cx-crumbrow, .cx-anim .cx-desk { animation: none; }
  .cx-door__ph img { transition: none; }
  .cx-door:hover .cx-door__ph img { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Review aid: every new (DRAFT) string is tinted in the preview build, and on any build with ?drafts=1 */
.cx-marks [data-draft] { background: #fff3cd; color: #6b4b10; box-shadow: 0 0 0 2px #fff3cd; }
.cx-marks .cx-label[data-draft] { width: fit-content; }
.cx-marks .form label > [data-draft] { justify-self: start; }
.cx-marks [data-draft-options] { background: #fff3cd; color: #6b4b10; }      /* a select whose options, or a field whose placeholder, are new wording */
.cx-marks .cx-pick__l [data-draft], .cx-marks .cx-opt [data-draft] { box-shadow: none; }

/* ---------- Responsive ---------- */
@media (min-width: 1001px) and (max-width: 1259px) {
  .cx .form label.full-mid { grid-column: 1 / -1; }      /* a half row is about 210 px here: Educational's placeholder needs 243 (review VC-09) */
}
@media (min-width: 1001px) {
  .cx-desk__side { position: sticky; top: calc(var(--head-h) + var(--s4)); align-self: start; }
}
@media (max-width: 1000px) {
  .cx-desk { grid-template-columns: minmax(0, 1fr); }
  /* stacked: the questions open under a hairline, as the contact fields do, so "who you'll talk with" and "your answers"
     read as two parts (review VC-11; the step stays the spec's s5) */
  .cx-qs:not([hidden]) { border-top: 1px solid var(--rule); padding-top: var(--s4); }
  .cx-door__name { font-size: 19px; }
  .cx-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cx-head { grid-template-columns: minmax(0, 1fr); }
  .cx-head__lede { font-size: 32px; }
  .cx-head__p { font-size: 18px; }
  .cx-doors__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); }   /* a door's name belongs to its own photograph, not the next one (review SPC-02, as the home tiles F7) */
  .cx-door__ph { aspect-ratio: 1 / 1; }
  .cx-door__name { font-size: 17px; }
  .cx-office { grid-template-columns: minmax(0, 1fr); }
  .cx-photo { height: auto; aspect-ratio: 16 / 9; }
  .cx-room__h { font-size: 34px; }
  .cx-lede { font-size: 18px; }
  /* a compact row on phones (headshot and name; the Our Team sentence shows from 761 px), so the first question is
     inside the first screen (review VC-04) */
  .cx-person { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; }
  .cx-person__bio { display: none; }
  .cx-person__name { margin: 0; }
  .cx-person + .cx-person { margin-top: var(--s2); padding-top: 0; border-top: 0; }
  .cx-strip__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cx-strip__grid .card { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; align-items: start; }
  .cx-strip__grid .card .ph { grid-row: 1 / span 2; }
  .cx-strip__grid .card__t { margin: 0 0 2px; font-size: 16px; line-height: 1.3; }
}

/* ---------- Thank you: the page title in the page-head voice; after a send, the visitor's room continues (review VC-12) ---------- */
.cx-tyhead { padding-bottom: 0; }                 /* the thanks block owns the steps below; empty, it is main's last child (s6) */
.cx-tyhead p.eyebrow { font: 500 12px/1.6 var(--sans); letter-spacing: .12em; color: var(--ink-3); margin: 0 0 var(--s2); }
.cx-ty__ph { margin-top: var(--s4); }             /* page head to its photograph: s4 */
.cx-ty__who { padding-top: var(--s5); }           /* a plane break */
.cx-ty__who .cx-label { margin-top: 0; }
.cx-person--row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; }
.cx-person--row + .cx-person--row { margin-top: var(--s2); }
.cx-person--row .cx-person__name { margin: 0; }