/* ============================================================
   Principal Builders Solutions Inc. — Design System (Phase 1)
   Warm paper + ink charcoal + brass (live pbsny.com family,
   per owner theme directive 2026-06-12). Flat, editorial,
   hairline borders. 8px baseline rhythm. No gradients.
   ============================================================ */

:root {
  /* Color */
  --ink: #1f2328;
  --ink-soft: #4f5963;
  --band: #20252b;
  --footer-bg: #181b1f;
  --brass: #c58a22;
  --brass-dark: #9a6714;
  --brass-bright: #f1c16b;
  --paper: #ffffff;
  --surface: #f6f3ee;
  --surface-2: #f3eadc;
  --line: #d9d4cc;
  --muted: #4f5963;
  --success: #60705a;
  --danger: #a33d33;

  /* On-dark */
  --paper-dim: rgba(250, 250, 248, 0.72);
  --paper-faint: rgba(250, 250, 248, 0.52);
  --line-dark: rgba(250, 250, 248, 0.14);

  /* Type */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --size-display: clamp(2.4rem, 5vw, 4.2rem);
  --size-h2: clamp(1.6rem, 3vw, 2.4rem);
  --size-h3: 1.25rem;
  --size-body: 1.0625rem;

  /* Layout */
  --container: 1180px;
  --gutter: 24px;
  --section: clamp(4rem, 9vw, 7.5rem);
  --section-tight: clamp(3rem, 6vw, 5rem);
  --radius: 6px;
  --header-height: 72px;
}

/* ---------- Reset / base ---------- */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
iframe,
video {
  max-width: 100%;
}

img {
  display: block;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--size-display);
}

h2 {
  font-size: var(--size-h2);
}

h3 {
  font-size: var(--size-h3);
  line-height: 1.3;
}

p {
  margin: 0;
  overflow-wrap: break-word;
}

p + p {
  margin-top: 1em;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

figure {
  margin: 0;
}

::selection {
  background: var(--brass);
  color: #181b1f;
}

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

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

.container {
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.narrow {
  width: min(760px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.section {
  padding-block: var(--section);
}

.section-tight {
  padding-block: var(--section-tight);
}

.section.muted {
  background: var(--surface);
}

.section.dark {
  background: var(--band);
  color: var(--paper);
}

.section-heading {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-heading h2 {
  max-width: 760px;
}

.section-heading.with-action {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

/* ---------- Eyebrow ---------- */

.eyebrow {
  display: block;
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
}

.eyebrow.light {
  color: var(--brass-bright);
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.button:active {
  transform: translateY(1px);
}

.button.primary {
  background: var(--brass);
  border-color: var(--brass);
  color: #181b1f;
}

.button.primary:hover {
  background: var(--brass-dark);
  border-color: var(--brass-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(154, 103, 20, 0.55);
}

.button.secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.button.secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

.button.ghost-light {
  background: transparent;
  border-color: rgba(250, 250, 248, 0.45);
  color: var(--paper);
}

.button.ghost-light:hover {
  border-color: var(--paper);
}

.button.small {
  min-height: 44px;
  padding: 8px 18px;
  font-size: 0.875rem;
}

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 200;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: transform 0.3s ease, border-color 0.2s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  height: 40px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-nav a:not(.button) {
  position: relative;
  padding: 4px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.18s ease;
}

.main-nav a:not(.button):hover {
  color: var(--ink);
}

.main-nav a:not(.button).active {
  color: var(--ink);
}

.main-nav a:not(.button).active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--brass);
}

/* Click-to-call phone number beside the header CTA. */
.main-nav a.header-phone {
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The phone link yields first when the desktop nav track tightens; it is
   still reachable in the mobile menu and the mobile call bar below 920px. */
@media (max-width: 1120px) and (min-width: 921px) {
  .header-phone {
    display: none;
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  cursor: pointer;
}

.nav-toggle span {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, top 0.2s ease;
}

.nav-toggle span::before {
  top: -6px;
}

.nav-toggle span::after {
  top: 6px;
}

.site-header.nav-open .nav-toggle span {
  background: transparent;
}

.site-header.nav-open .nav-toggle span::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header.nav-open .nav-toggle span::after {
  top: 0;
  transform: rotate(-45deg);
}

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

.site-footer {
  /* Owner direction 2026-07-15: true black, not dark gray. */
  background: #000;
  color: var(--paper-dim);
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-block: clamp(3.5rem, 6vw, 5rem);
}

.footer-grid > * {
  min-width: 0;
}

.footer-logo {
  height: 36px;
  width: auto;
  margin-bottom: 24px;
  filter: brightness(0) invert(1);
}

.footer-positioning {
  max-width: 40ch;
  color: var(--paper-dim);
}

.footer-nap {
  margin-top: 24px;
  color: var(--paper-faint);
  line-height: 1.8;
}

.footer-nap a {
  color: var(--paper-dim);
  text-decoration: none;
}

.footer-nap a:hover {
  color: var(--paper);
}

.footer-heading {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.footer-links {
  display: grid;
  gap: 10px;
}

.footer-links a {
  color: var(--paper-dim);
  text-decoration: none;
  transition: color 0.18s ease;
}

.footer-links a:hover {
  color: var(--paper);
}

.footer-areas {
  margin: 0 0 32px;
  color: var(--paper-dim);
  letter-spacing: 0.02em;
}

.footer-social {
  display: grid;
  gap: 10px;
}

.footer-social a {
  color: var(--paper-dim);
  text-decoration: none;
  transition: color 0.18s ease;
}

.footer-social a:hover {
  color: var(--paper);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.8125rem;
  color: var(--paper-faint);
}

/* ---------- Hero (home) ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--band);
  color: var(--paper);
}

.hero--video {
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 94vh, 960px);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15, 18, 22, 0.88) 0%, rgba(15, 18, 22, 0.45) 38%, rgba(15, 18, 22, 0.18) 70%, rgba(15, 18, 22, 0.42) 100%),
    linear-gradient(100deg, rgba(15, 18, 22, 0.5) 0%, transparent 55%);
}

.hero--video::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brass), rgba(241, 193, 107, 0.35) 55%, transparent 90%);
}

.hero-inner {
  padding-block: clamp(4rem, 12vh, 8rem);
}

.hero h1 {
  max-width: 16ch;
  font-weight: 700;
  font-size: clamp(2.6rem, 6.2vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero-tagline {
  max-width: 46ch;
  margin-top: 20px;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--paper-dim);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.hero-subline {
  margin-top: 16px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

/* Staggered entrance */

.hero-rise {
  opacity: 0;
  transform: translateY(22px);
  animation: hero-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-rise:nth-child(1) { animation-delay: 0.1s; }
.hero-rise:nth-child(2) { animation-delay: 0.22s; }
.hero-rise:nth-child(3) { animation-delay: 0.34s; }
.hero-rise:nth-child(4) { animation-delay: 0.46s; }
.hero-rise:nth-child(5) { animation-delay: 0.58s; }

@keyframes hero-rise {
  to { opacity: 1; transform: none; }
}

.play-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.play-dot {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brass);
  flex: none;
}

.play-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-42%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}

.play-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(241, 193, 107, 0.8);
  animation: play-pulse 2.4s ease-out infinite;
}

@keyframes play-pulse {
  0% { transform: scale(1); opacity: 0.9; }
  70% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(246, 243, 238, 0.35);
  border-radius: 50%;
  color: var(--paper);
  transform: translateX(-50%);
  animation: scroll-bob 2.6s ease-in-out infinite;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.hero-scroll:hover {
  border-color: var(--brass);
  background: rgba(197, 138, 34, 0.18);
}

@keyframes scroll-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 7px); }
}

/* Film modal */

.film-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  background: rgba(10, 12, 15, 0.92);
}

.film-modal.open {
  display: flex;
  animation: film-in 0.25s ease;
}

@keyframes film-in {
  from { opacity: 0; }
}

.film-frame {
  position: relative;
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8);
}

.film-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.film-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(246, 243, 238, 0.4);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  font-size: 1.375rem;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.film-close:hover {
  border-color: var(--brass);
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .hero-rise {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .hero-scroll,
  .play-dot::after {
    animation: none;
  }
}

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

.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: #0d1117;
  cursor: pointer;
}

.hero .video-facade {
  border-color: rgba(246, 243, 238, 0.18);
  box-shadow: 0 32px 64px -28px rgba(0, 0, 0, 0.65);
}

.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brass);
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.video-play::before {
  content: "";
  display: block;
  margin-left: 5px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}

.video-facade:hover .video-play,
.video-play:hover {
  background: var(--brass-dark);
  transform: translate(-50%, -50%) scale(1.05);
}

/* ---------- Stats band ---------- */

.stat-band {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat-cell {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem);
  border-left: 1px solid var(--line);
}

.stat-cell:first-child {
  border-left: 0;
}

.stat-value {
  display: block;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.stat-label {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Brand band (selected clients wordmark strip) ---------- */

.brand-band {
  padding-block: 26px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand-band-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px 32px;
}

.brand-band-inner .brand-band-label {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.brand-band-inner .brand-marquee {
  grid-column: 2;
}

.brand-band-inner .brand-band-more {
  grid-column: 3;
  grid-row: 1 / span 2;
}

/* Continuous brand carousel, two counter-scrolling rows: each track holds its
   name list twice and slides -50% for a seamless loop (second row reversed).
   Pauses on hover/focus; reduced-motion users get static wrapped lists. */
.brand-marquee {
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.brand-marquee-track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  gap: 0 44px;
  animation: brand-scroll 75s linear infinite;
}

.brand-marquee-track.reverse {
  animation-direction: reverse;
}

.brand-marquee-track li {
  flex: 0 0 auto;
}

.brand-marquee:hover .brand-marquee-track,
.brand-marquee:focus-within .brand-marquee-track {
  animation-play-state: paused;
}

@keyframes brand-scroll {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .brand-marquee-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
  }
  /* Hide the duplicate list when static, or every brand shows twice. */
  .brand-marquee-track li[aria-hidden="true"] {
    display: none;
  }
}

.brand-band-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-band-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-band-list a {
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.18s ease;
}

.brand-band-list a:hover {
  color: var(--brass-dark);
}

.brand-band-more {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--brass-dark);
  text-decoration: none;
}

.brand-band-more:hover {
  color: var(--ink);
}

/* ---------- Markets (homepage category cards) ---------- */

.market-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.market-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.market-card figure {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.market-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.market-card:hover figure img {
  transform: scale(1.03);
}

.market-card-body {
  padding: 20px 22px 24px;
}

.market-card h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1.125rem;
}

.market-card-count {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brass-dark);
}

.market-card-body p {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- Featured projects ---------- */

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

.feat-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.feat-card--lead {
  grid-column: span 2;
  grid-row: span 2;
}

.feat-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.feat-media {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  aspect-ratio: 4 / 3;
}

.feat-card--lead .feat-media {
  aspect-ratio: auto;
  min-height: 320px;
}

.feat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.feat-card a:hover .feat-media img {
  transform: scale(1.03);
}

.feat-caption {
  padding-top: 16px;
}

.feat-kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
}

.feat-caption h3 {
  margin-top: 6px;
  font-size: 1.125rem;
}

.feat-card--lead .feat-caption h3 {
  font-size: 1.375rem;
}

.feat-location {
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------- Process strip ---------- */

.process-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

.process-step {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.process-num {
  display: block;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
  opacity: 0.45;
}

.process-step h3 {
  margin-top: 16px;
  font-size: 1.0625rem;
}

.process-step p {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- Testimonials (three-up attributed band) ---------- */

.testimonial-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  align-items: stretch;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.testimonial-card blockquote {
  flex: 1;
  margin: 0;
  font-size: 1.0313rem;
  line-height: 1.6;
  color: var(--ink);
}

.testimonial-card figcaption {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}

.testimonial-card figcaption strong {
  display: block;
  font-weight: 700;
}

.testimonial-card figcaption span {
  display: block;
  margin-top: 2px;
  font-size: 0.875rem;
  color: var(--muted);
}

.testimonial-card figcaption .testimonial-company {
  font-weight: 600;
  color: var(--ink-soft);
}

.testimonial-proof {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brass-dark);
  text-decoration: none;
}

.testimonial-proof:hover {
  color: var(--ink);
}

/* Wide variant: single quote interleaved in the /clients roster. */
.testimonial-card--wide {
  max-width: 860px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

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

.cta-band {
  /* Owner direction 2026-07-15: white band, ink text; the gold eyebrow and
     the primary button carry the accent. */
  background: #fff;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-block: clamp(4rem, 8vw, 6.5rem);
}

.cta-band .cta-phone {
  color: var(--ink);
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
}

.cta-inner h2 {
  max-width: 18ch;
}

.cta-phone {
  display: block;
  margin-top: 16px;
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--paper-dim);
  text-decoration: none;
}

.cta-phone:hover {
  color: var(--paper);
}

/* ---------- Mobile call bar (fixed, under 768px only) ----------
   Slim thumb-zone bar with the two highest-intent actions. site.js hides it
   while the CTA band or footer is on screen so the number never doubles up.
   Scoped to .js (added by site.js) because the hide behavior lives in an
   IntersectionObserver: without JS the bar stays display:none instead of
   permanently covering the footer. */

.mobile-call-bar {
  display: none;
}

@media (max-width: 767px) {
  .js .mobile-call-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: flex;
    gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 24px -20px rgba(31, 35, 40, 0.6);
    transition: transform 0.25s ease;
  }

  .js .mobile-call-bar.is-hidden {
    transform: translateY(110%);
  }

  .js .mobile-call-bar .button {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 10px 8px;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  /* Chatbase injects fixed elements at bottom:16px with inline styles, which
     collide with the call bar on phones — lift them above it. The chat window
     itself opens full-screen on mobile, so it needs no offset. */
  #chatbase-bubble-button {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }

  /* The proactive greeting bubble covers hero CTAs on phones — hide it there;
     the chat button itself remains available. */
  #chatbase-message-bubbles {
    display: none !important;
  }
}

/* ---------- Reveal motion ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger reveals inside grids: each sibling drifts in a beat later. */
.js .market-card-grid .reveal:nth-child(2),
.js .featured-grid .reveal:nth-child(2),
.js .stat-grid .reveal:nth-child(2),
.js .post-grid .reveal:nth-child(2),
.js .process-strip .reveal:nth-child(2) { transition-delay: 0.1s; }
.js .market-card-grid .reveal:nth-child(3),
.js .featured-grid .reveal:nth-child(3),
.js .stat-grid .reveal:nth-child(3),
.js .post-grid .reveal:nth-child(3),
.js .process-strip .reveal:nth-child(3) { transition-delay: 0.2s; }
.js .featured-grid .reveal:nth-child(4),
.js .stat-grid .reveal:nth-child(4),
.js .post-grid .reveal:nth-child(4),
.js .process-strip .reveal:nth-child(4) { transition-delay: 0.3s; }
.js .featured-grid .reveal:nth-child(5),
.js .post-grid .reveal:nth-child(5) { transition-delay: 0.4s; }

/* ---------- Cross-document view transitions (progressive) ---------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-out 0.2s ease both;
}

::view-transition-new(root) {
  animation: vt-in 0.32s ease both;
}

@keyframes vt-out {
  to { opacity: 0; }
}

@keyframes vt-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* ---------- Section lede + blueprint divider ---------- */

.section-lede {
  max-width: 64ch;
  margin-top: 18px;
  color: var(--muted);
}

.blueprint-divider {
  display: block;
  width: 100%;
  height: 24px;
  color: var(--line);
}

.blueprint-divider .tick {
  color: var(--brass);
}

/* Card lift on hover */

.project-card,
.post-card,
.market-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.project-card:hover,
.post-card:hover,
.market-card:hover {
  transform: translateY(-4px);
  border-color: rgba(197, 138, 34, 0.45);
  box-shadow: 0 18px 40px -22px rgba(31, 35, 40, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Interior pages (services / projects / detail / contact / 404)
   ============================================================ */

.page-shell {
  min-height: 64vh;
}

.page-hero {
  background: var(--band);
  color: var(--paper);
}

.page-hero.compact .container {
  padding-block: clamp(4rem, 8vw, 6rem);
}

.page-hero h1 {
  max-width: 22ch;
  font-size: clamp(2rem, 4vw, 3.25rem);
}

.page-hero p:not(.eyebrow) {
  max-width: 64ch;
  margin-top: 20px;
  color: var(--paper-dim);
}

/* Services */

.service-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.service-step {
  padding: clamp(2rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.service-step span {
  display: block;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
  opacity: 0.45;
  margin-bottom: 20px;
}

.service-step h2 {
  font-size: 1.375rem;
  margin-bottom: 12px;
}

.service-step p {
  color: var(--muted);
  font-size: 0.9875rem;
}

/* Expanded service sections (one per market) */

.services-detail {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.service-block {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.service-block:first-child {
  border-top: 0;
  padding-top: 0;
}

.service-block-num {
  display: block;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
  opacity: 0.45;
  margin-bottom: 16px;
}

.service-block h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  margin-bottom: 14px;
}

.service-block-intro p {
  color: var(--muted);
  max-width: 60ch;
}

.service-block-link {
  display: inline-block;
  margin-top: 20px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brass-dark);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.service-block-link:hover {
  color: var(--ink);
}

.service-block-scope {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.service-block-scope h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 14px;
}

.service-block-scope .scope-list {
  margin: 0;
  padding-left: 18px;
}

/* About page story */

.about-story {
  max-width: 760px;
}

.about-story p {
  color: var(--ink-soft);
  line-height: 1.75;
}

.about-story p + p {
  margin-top: 1.5em;
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.market-tile {
  display: block;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  transition: border-color 0.18s ease;
}

.market-tile:hover {
  border-color: var(--brass);
}

.market-tile h3 {
  margin-bottom: 8px;
}

.market-tile p {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ---------- Clients page roster ---------- */

.client-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 var(--gutter);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.client-entry {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.client-name {
  display: block;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: break-word;
}

a.client-name {
  transition: color 0.18s ease;
}

a.client-name:hover {
  color: var(--brass-dark);
}

.client-entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
}

.client-entry-links a {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.client-entry-links a:hover {
  color: var(--brass-dark);
  border-color: currentColor;
}

.timeline {
  max-width: 880px;
}

.timeline article {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 24px;
  padding-block: 28px;
  border-top: 1px solid var(--line);
}

.timeline article span {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
  opacity: 0.45;
}

.timeline h3 {
  margin-bottom: 8px;
}

.timeline p {
  color: var(--muted);
}

/* Blog */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.post-lead {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.post-lead:hover {
  transform: translateY(-4px);
  border-color: rgba(197, 138, 34, 0.45);
  box-shadow: 0 18px 40px -22px rgba(31, 35, 40, 0.35);
}

.post-lead a {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  color: inherit;
  text-decoration: none;
}

.post-lead figure {
  min-height: 320px;
  overflow: hidden;
}

.post-lead img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.post-lead a:hover img {
  transform: scale(1.03);
}

.post-lead-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(24px, 4vw, 48px);
}

.post-lead-body h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
}

.post-lead-body p {
  color: var(--ink-soft);
}

.post-topic {
  color: var(--brass-dark);
}

.post-readmore {
  font-weight: 700;
  color: var(--brass-dark);
}

.post-card[hidden],
.post-lead[hidden] {
  display: none !important;
}

.post-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.post-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.post-card figure {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.post-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-card a:hover img {
  transform: scale(1.03);
}

.post-card-body {
  padding: 24px;
}

.post-card h2 {
  margin: 8px 0 10px;
  font-size: 1.25rem;
}

.post-meta {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brass-dark);
}

.post-meta.light {
  margin-top: 16px;
  color: var(--paper-dim);
}

.post-hero .eyebrow a {
  color: inherit;
  text-decoration: none;
}

.post-excerpt {
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.post-body {
  max-width: 720px;
}

.post-body h2 {
  margin: 2.2em 0 0.6em;
  font-size: 1.5rem;
}

.post-body h3 {
  margin: 1.8em 0 0.5em;
  font-size: 1.1875rem;
}

.post-body p,
.post-body ul,
.post-body blockquote {
  margin-bottom: 1.1em;
  color: var(--ink-soft);
}

.post-body ul {
  padding-left: 1.2em;
  display: grid;
  gap: 0.5em;
}

.post-body li::marker {
  color: var(--brass-dark);
}

.post-body strong {
  color: var(--ink);
}

.post-figure {
  margin: 1.6em 0 0.6em;
  border-radius: var(--radius);
  overflow: hidden;
}

.post-figure img {
  width: 100%;
  display: block;
}

.post-caption {
  margin-bottom: 1.6em;
  font-size: 0.8125rem;
  color: var(--muted);
}

.post-figure figcaption {
  padding: 10px 2px 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* FAQ */

.faq-list {
  max-width: 800px;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  padding: 20px 32px 20px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading, inherit);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--brass-dark);
  transition: transform 0.18s ease;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  max-width: 68ch;
  padding-bottom: 20px;
  color: var(--ink-soft);
}

/* Sector landing intro (/projects?category=…) */

.sector-intro {
  border-bottom: 1px solid var(--line);
}

.sector-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.sector-copy h2 {
  max-width: 24ch;
}

.sector-copy p:not(.eyebrow) {
  margin-top: 18px;
  color: var(--ink-soft);
}

.sector-link {
  display: inline-block;
  margin-top: 20px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brass-dark);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.sector-link:hover {
  color: var(--ink);
}

.sector-side {
  display: grid;
  gap: var(--gutter);
}

.sector-clients {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.sector-clients h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.sector-client-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.sector-client-list a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.sector-client-list a:hover {
  color: var(--ink);
  border-color: var(--brass);
}

/* Project archive */

.archive-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.archive-controls .filter-row {
  margin-bottom: 0;
  flex: 1 1 480px;
}

.archive-search {
  flex: 0 1 300px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
}

.archive-search:focus {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
  border-color: var(--brass);
}

.archive-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--muted);
}

.project-card[hidden] {
  display: none !important;
}

/* Project prev/next pager */

.project-pager {
  border-top: 1px solid var(--line);
  background: var(--paper-warm);
}

.pager-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-block: 28px;
}

.pager-inner a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
}

.pager-inner a span {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass-dark);
}

.pager-inner a strong {
  font-family: var(--font-heading, inherit);
  font-weight: 700;
}

.pager-inner a:hover strong {
  color: var(--brass-dark);
}

.pager-next {
  text-align: right;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.filter-row a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease,
    color 0.18s ease;
}

.filter-row a:hover {
  border-color: var(--ink);
}

.filter-row a.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.filter-row span {
  color: var(--brass-dark);
  font-variant-numeric: tabular-nums;
}

.archive-meta {
  margin-bottom: 24px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.project-grid.archive {
  grid-template-columns: repeat(4, 1fr);
}

.project-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.project-card a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.project-card figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-card a:hover img {
  transform: scale(1.03);
}

/* No real cover yet: show the logo intact instead of a cropped blow-up. */
.project-card figure.placeholder img {
  object-fit: contain;
  padding: 28px;
}

.project-card a:hover figure.placeholder img {
  transform: none;
}

.project-card-body {
  padding: 20px;
}

.project-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: 8px;
}

.project-card h3 {
  margin-bottom: 6px;
  font-size: 1.125rem;
}

.archive .project-card h3 {
  font-size: 1rem;
}

.project-card p {
  font-size: 0.875rem;
  color: var(--muted);
}

/* Project detail */

.project-detail-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.project-detail-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.project-detail-hero p:not(.eyebrow) {
  margin-top: 16px;
  color: var(--muted);
}

.project-detail-hero figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.project-detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.detail-columns {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.project-facts {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.project-facts h2,
.project-facts h3 {
  font-size: 1.0625rem;
  margin-bottom: 16px;
}

.project-facts dl {
  margin: 0;
}

.project-facts dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
}

.project-facts dd {
  margin: 2px 0 16px;
}

.project-facts ul,
.scope-list {
  margin: 0;
  padding-left: 18px;
}

.project-facts li {
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
  color: var(--muted);
}

.scope-list li {
  margin-bottom: 8px;
  color: var(--ink-soft);
}

.detail-columns h2 {
  font-size: 1.375rem;
  margin-bottom: 16px;
}

.detail-columns h2 + .scope-list {
  margin-bottom: 32px;
}

.gallery-count {
  font-size: 0.9375rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.photo-button {
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  text-align: left;
  cursor: zoom-in;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.photo-button:hover {
  border-color: rgba(197, 138, 34, 0.45);
  box-shadow: 0 18px 40px -22px rgba(31, 35, 40, 0.35);
}

.photo-button img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.photo-button:hover img {
  transform: scale(1.03);
}

.photo-button.photo-lead {
  grid-column: 1 / -1;
}

.photo-button.photo-lead img {
  aspect-ratio: 16 / 9;
}

.photo-button span {
  display: block;
  padding: 10px 12px;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Lightbox (fullscreen photo viewer) */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(20, 23, 29, 0.94);
}

.lightbox.open {
  display: flex;
}

.lightbox-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: min(1400px, 100%);
}

.lightbox-stage img {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  width: auto;
  height: auto;
  border-radius: var(--radius);
  background: rgba(250, 250, 248, 0.04);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}

.lightbox-stage figcaption {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: 1.5em;
  max-width: 100%;
  padding-inline: 8px;
  font-size: 0.875rem;
  color: var(--paper-dim);
  text-align: center;
}

.lightbox-count {
  color: var(--paper-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: rgba(20, 23, 29, 0.55);
  color: var(--paper);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  border-color: var(--brass);
  color: var(--brass-bright);
}

.lightbox-close {
  top: 18px;
  right: 18px;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  padding-bottom: 4px;
}

.lightbox-prev {
  left: 14px;
}

.lightbox-next {
  right: 14px;
}

/* Contact */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.contact-info,
.contact-form {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.contact-info h2,
.contact-form h2 {
  font-size: 1.375rem;
  margin-bottom: 24px;
}

.contact-line {
  display: grid;
  gap: 4px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
}

.contact-line strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark);
}

.contact-line a {
  color: var(--ink);
  text-decoration: none;
}

.contact-line a:hover {
  color: var(--brass-dark);
}

.contact-form {
  display: grid;
  gap: 16px;
}

.contact-form label {
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--ink);
  outline: none;
}

.form-status {
  min-height: 24px;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--success);
}

/* "Start a Project" buttons land on the form itself, clear of the sticky header. */
#send-a-message { scroll-margin-top: 110px; }

/* Market pillar + location pages (seo-pages.js) */
.seo-prose { max-width: 860px; }
.seo-prose p { font-size: 1.0625rem; line-height: 1.7; margin: 0 0 1em; }
.seo-clients { color: var(--muted, #5f6b76); font-size: 0.9375rem !important; }
.seo-lede { color: var(--muted, #5f6b76); margin: -4px 0 22px; }
.seo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 22px; }
.seo-card { background: var(--paper, #fff); border: 1px solid var(--line, #e4e0d8); border-radius: 6px; padding: 18px 20px; }
.seo-card h3 { margin: 0 0 6px; font-size: 1rem; }
.seo-card p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--muted, #5f6b76); }
.seo-card.link { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.seo-card.link:hover { border-color: var(--ink, #1f2933); transform: translateY(-2px); }
.seo-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.seo-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line, #e4e0d8); border-radius: 999px; text-decoration: none; color: inherit; font-size: 0.9375rem; font-weight: 600; background: var(--paper, #fff); }
.seo-chip:hover { border-color: var(--ink, #1f2933); }
.seo-chip span { font-size: 0.75rem; color: var(--muted, #5f6b76); font-weight: 700; }
.seo-faq { border-bottom: 1px solid var(--line, #e4e0d8); padding: 14px 0; }
.seo-faq summary { cursor: pointer; font-weight: 700; font-size: 1.0625rem; }
.seo-faq p { margin: 10px 0 0 !important; }
.seo-links { margin: 14px 0 0; padding-left: 20px; line-height: 1.9; }
.seo-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.seo-cta h2 { margin: 0 0 6px; }
.seo-cta p { margin: 0; max-width: 640px; color: var(--muted, #5f6b76); }
.detail-related { margin: 14px 0 0; font-size: 0.9375rem; }
.footer-areas a { color: inherit; }

/* Admin project editor sections */
.editor-section { margin: 26px 0 10px; padding-top: 16px; border-top: 1px solid var(--line, #e4e0d8); font-size: 1rem; }
.editor-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.editor-section small { font-weight: 400; color: var(--muted, #5f6b76); font-size: 0.8125rem; margin-left: 6px; }
.editor-advanced { margin-top: 18px; }
.editor-advanced summary { cursor: pointer; font-weight: 600; font-size: 0.9375rem; }
label.check { display: flex !important; align-items: center; gap: 8px; }
label.check input { width: auto; }
textarea[data-bullets] { line-height: 1.7; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Contact form: consent row + honeypot. The honeypot is moved off-canvas
   (not display:none — some bots skip hidden inputs); the markup keeps it out
   of the tab order and the accessibility tree. */
.contact-form .consent {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted, #5f6b76);
}

.contact-form .consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--ink);
}

.contact-form .hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   Admin (unchanged markup — restyled with the new tokens)
   ============================================================ */

.admin-body {
  background: var(--surface);
}

.admin-shell {
  display: grid;
  grid-template-columns: 270px 1fr;
  min-height: 100vh;
}

.admin-sidebar {
  background: var(--ink);
  color: var(--paper);
  padding: 22px;
}

.admin-sidebar img {
  width: 184px;
  filter: brightness(0) invert(1);
  margin-bottom: 28px;
}

.admin-sidebar button {
  width: 100%;
  min-height: 42px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: transparent;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
}

.admin-sidebar button.active {
  background: var(--brass);
  border-color: var(--brass);
  color: #fff;
  font-weight: 700;
}

.admin-main {
  padding: 26px;
  min-width: 0;
}

.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.admin-topbar h1 {
  margin: 0;
  font-size: 1.75rem;
}

.admin-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 18px;
}

.admin-grid > * {
  min-width: 0;
}

.admin-list {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
  max-height: calc(100vh - 190px);
  background: var(--paper);
}

.admin-list button {
  display: grid;
  width: 100%;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
}

.admin-list button.active {
  background: var(--surface);
}

.admin-list strong {
  font-weight: 700;
}

.admin-list span {
  color: var(--muted);
  font-size: 13px;
}

.editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.editor-grid label,
.full-field {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
}

.editor-grid input,
.editor-grid textarea,
.editor-grid select,
.full-field input,
.full-field textarea,
.full-field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 11px;
  background: var(--paper);
}

.editor-grid textarea,
.full-field textarea {
  min-height: 92px;
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.photo-admin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.photo-admin {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}

.photo-admin img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.photo-admin div {
  padding: 8px;
}

.photo-admin button {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--danger);
  color: var(--danger);
  background: var(--paper);
  border-radius: 4px;
  cursor: pointer;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--surface);
}

.login-box {
  width: min(420px, calc(100% - 32px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 28px;
}

.login-box img {
  height: 44px;
  width: auto;
  margin-bottom: 22px;
}

.login-box label {
  display: grid;
  gap: 8px;
  font-weight: 600;
}

.login-box input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px;
  font-size: 1rem; /* 16px: stops iOS Safari zooming the page on focus */
}

.login-box img {
  max-width: 100%;
  height: auto;
  max-height: 44px;
}

.login-box h1 {
  margin: 0 0 14px;
}

/* The button used to sit flush against the password box. */
.login-box .button {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.login-box .status-note {
  margin: 12px 0 0;
}

.status-note {
  min-height: 24px;
  color: var(--success);
  font-weight: 600;
}

.danger {
  color: var(--danger);
}

/* Admin: submissions review */

.submissions-toolbar {
  justify-content: space-between;
  margin-bottom: 16px;
}

.submission-list {
  display: grid;
  gap: 16px;
}

.submission {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.submission.unread {
  border-left-color: var(--brass);
  background: var(--paper-warm);
}

.submission header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.submission header span {
  font-size: 0.8125rem;
  color: var(--muted);
}

.submission-contact {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.submission-message {
  white-space: pre-wrap;
  margin-bottom: 10px;
}

.submission-delivery {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--paper-warm);
  border: 1px solid var(--line);
}

.chip.ok {
  color: var(--success);
}

.chip.warn {
  color: var(--danger);
}

/* Admin: drawings + homepage editor */

.drawing-list {
  margin-top: 20px;
}

.drawing-row {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.drawing-row span {
  font-size: 0.8438rem;
  color: var(--muted);
}

.drawing-row a {
  color: var(--brass-dark);
  font-weight: 600;
  margin-right: 12px;
}

.testimonial-fields {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.testimonial-fields legend {
  padding: 0 6px;
  font-weight: 700;
  font-size: 0.875rem;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feat-card--lead {
    grid-column: span 2;
    grid-row: auto;
  }

  .feat-card--lead .feat-media {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .project-grid,
  .project-grid.archive {
    grid-template-columns: repeat(2, 1fr);
  }

  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .market-card-grid,
  .service-steps,
  .market-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonial-band {
    grid-template-columns: 1fr;
  }

  .process-strip {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .detail-grid,
  .detail-columns,
  .contact-grid,
  .post-lead a {
    grid-template-columns: 1fr;
  }

  .post-lead figure {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  /* Six links + CTA need a tighter track before the nav collapses. */
  .main-nav {
    gap: 22px;
  }
}

@media (max-width: 920px) {
  .service-block {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sector-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .site-header.nav-open .main-nav {
    display: flex;
  }

  .main-nav a:not(.button) {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }

  .main-nav a:not(.button).active::after {
    display: none;
  }

  .main-nav .button {
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
  }

  /* Keep the logo + hamburger inside a 360px viewport. */
  .header-inner {
    gap: 16px;
  }

  .brand img {
    height: 34px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-grid {
    grid-template-columns: 1fr;
  }

  .stat-cell {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-inline: 0;
  }

  .stat-cell:nth-child(-n + 2) {
    border-top: 0;
  }

  .stat-cell:nth-child(even) {
    padding-left: 24px;
    border-left: 1px solid var(--line);
  }

  .market-card-grid,
  .service-steps,
  .market-grid,
  .process-strip,
  .featured-grid,
  .project-grid,
  .project-grid.archive,
  .photo-grid,
  .photo-admin-grid,
  .editor-grid {
    grid-template-columns: 1fr;
  }

  .brand-band-inner {
    grid-template-columns: 1fr;
    gap: 10px 20px;
    text-align: center;
  }

  .brand-band-inner .brand-band-label,
  .brand-band-inner .brand-marquee,
  .brand-band-inner .brand-band-more {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }

  .brand-band-inner .brand-marquee {
    width: 100%;
  }

  .brand-band-list {
    gap: 8px 18px;
  }

  .feat-card--lead {
    grid-column: auto;
  }

  .feat-card--lead .feat-media {
    aspect-ratio: 4 / 3;
  }

  .photo-button.photo-lead img {
    aspect-ratio: 4 / 3;
  }

  .lightbox {
    padding: 12px;
  }

  .lightbox-stage img {
    max-height: calc(100vh - 130px);
  }

  .lightbox-close {
    top: 12px;
    right: 12px;
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }

  .hero-actions .button,
  .detail-actions .button {
    flex: 1 1 100%;
  }

  .section-heading.with-action {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 4px;
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-main {
    padding: 14px;
  }

  .admin-topbar {
    flex-direction: column;
    align-items: stretch;
  }
}