/* =====================================================================
   3LA — Advisory · Talent · Delivery
   Stylesheet: main.css
   Mobile-first. No external CSS frameworks. Plain CSS custom properties.
   ===================================================================== */

/* =====================================================================
   OVERFLOW GUARD — prevents mobile browsers (esp. Safari) from auto-
   zooming the page out when any descendant accidentally overflows the
   viewport. Uses overflow-x: clip rather than hidden so position:sticky
   on the header keeps working. Falls back to hidden on older browsers.
   Also resets default min-width on flex/grid items so long text or wide
   nested grids cannot push their track wider than the viewport.
   ===================================================================== */
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html { overflow-x: clip; } }
body { max-width: 100%; overflow-x: clip; }
img, svg, video, picture { max-width: 100%; }

/* All flex/grid items: default min-width: auto resolves to content size
   and can blow horizontal space. Reset to 0 so they can shrink. */
.container,
.cols, .cols > *,
.pillars, .pillar,
.pillars-asym, .pillars-asym__stack, .pillars-asym > *,
.pillar--feature, .pillar--feature > *,
.pillar--compact, .pillar--compact > *,
.projects, .project-card,
.project-card--feature, .project-card--feature > *,
.project-card__meta, .project-card__meta > *,
.contact-grid, .contact-grid > *,
.hero__content, .hero__meta, .hero__meta > *,
.site-footer__main .container > *,
.site-footer__hero-inner, .site-footer__hero-inner > *,
.cta-banner__inner, .cta-banner__inner > *,
.section-header, .section-header > * {
  min-width: 0;
}

/* Long text in project cards must wrap rather than push width */
.project-card,
.project-card--feature,
.project-card h3,
.project-card p,
.project-card__meta,
.project-card__meta span,
.hero__title,
.vision-quote__text,
.site-footer__monogram {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* --- Tokens -------------------------------------------------------- */
:root {
  /* Brand palette — pulled from existing 3LA collateral */
  --ink:        #0B0B0B;   /* near-black, primary surface */
  --ink-2:      #161616;   /* slight lift on dark sections */
  --steel:      #5B6470;   /* mid-grey accent (matches "Open Positions" block) */
  --steel-2:    #2E343C;   /* deeper steel for cards */
  --bone:       #F4EFE5;   /* cream wordmark colour */
  --paper:      #FFFFFF;   /* primary light surface */
  --line:       #E6E4DF;   /* hairline rule on light bg */
  --line-dark:  #2A2A2A;   /* hairline rule on dark bg */
  --muted:      #6B7280;   /* secondary body text on light */
  --muted-dark: #9AA0A6;   /* secondary body text on dark */

  /* Type scale (clamp for fluid sizing) */
  --fs-display: clamp(2.5rem, 5.5vw + 0.5rem, 4.75rem);
  --fs-h1:      clamp(2.0rem, 3.5vw + 0.5rem, 3.0rem);
  --fs-h2:      clamp(1.625rem, 2.0vw + 0.6rem, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1.0vw + 0.7rem, 1.5rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --container: 1180px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 4px;
  --radius-lg: 6px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

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

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
  border-radius: 2px;
}

button { font: inherit; cursor: pointer; }

ul, ol { padding-left: 1.25rem; }

h1, h2, h3, h4 {
  font-family: "Barlow Condensed", "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 var(--space-4); }

::selection { background: var(--ink); color: var(--bone); }

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

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }

.section--dark {
  background: var(--ink);
  color: var(--bone);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--bone); }

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

.eyebrow {
  display: inline-block;
  font-family: "Barlow Condensed", "Inter", sans-serif;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.section--dark .eyebrow { color: var(--muted-dark); }

.lead {
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem);
  color: var(--muted);
  max-width: 60ch;
}
.section--dark .lead { color: var(--muted-dark); }

.divider {
  width: 64px;
  height: 2px;
  background: var(--ink);
  border: 0;
  margin: var(--space-4) 0 var(--space-5);
}
.section--dark .divider { background: var(--bone); }

/* --- Header / Nav -------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--bone);
  border-bottom: 1px solid var(--line-dark);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav__brand img {
  height: 30px;
  width: auto;
}
.nav__brand span {
  color: var(--muted-dark);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  border-left: 1px solid var(--line-dark);
  padding-left: 0.6rem;
  display: none;
}

.nav__list {
  list-style: none;
  display: none;
  gap: var(--space-5);
  padding: 0;
  margin: 0;
}
.nav__list a {
  font-size: 0.95rem;
  color: var(--bone);
  padding: 0.4rem 0.1rem;
  position: relative;
  transition: color .2s var(--ease);
}
.nav__list a:hover { color: var(--paper); }
.nav__list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--bone);
}

.nav__cta {
  display: none;
}

.nav__toggle {
  background: transparent;
  border: 1px solid var(--line-dark);
  color: var(--bone);
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-icon::before { transform: rotate(45deg) translate(5px,5px); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon::after  { transform: rotate(-45deg) translate(5px,-5px); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon span    { opacity: 0; }

.nav__toggle-icon {
  position: relative;
  width: 18px;
  height: 14px;
  display: inline-block;
}
.nav__toggle-icon::before,
.nav__toggle-icon::after,
.nav__toggle-icon span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--bone);
  transition: transform .25s var(--ease), opacity .2s;
}
.nav__toggle-icon::before { top: 0; }
.nav__toggle-icon span    { top: 6px; display: block; }
.nav__toggle-icon::after  { top: 12px; }

/* Mobile drawer */
.nav__drawer {
  position: fixed;
  /* Full-viewport overlay UNDER the sticky header (header z-index 50).
     A fixed 64px top inset left a visible gap once the header shrank to
     52px on scroll — page content slid through it with the menu open. */
  inset: 0;
  z-index: 40;
  background: var(--ink);
  display: none;
  flex-direction: column;
  padding: calc(64px + var(--space-6)) var(--gutter) var(--space-8);
  border-top: 1px solid var(--line-dark);
  overflow-y: auto;
}
.nav__drawer[data-open="true"] { display: flex; }
.nav__drawer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.nav__drawer ul a {
  display: block;
  padding: 0.9rem 0;
  font-size: 1.25rem;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line-dark);
}
.nav__drawer .btn { margin-top: var(--space-5); align-self: flex-start; }

@media (min-width: 880px) {
  .nav__brand span { display: inline; }
  .nav__list { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__drawer { display: none !important; }
}

/* --- Buttons ------------------------------------------------------- */
.btn {
  --bg: var(--ink);
  --fg: var(--bone);
  --bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
  text-align: center;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --bg: transparent;
  --fg: var(--ink);
  --bd: var(--ink);
}
.btn--ghost:hover { --bg: var(--ink); --fg: var(--bone); }

.btn--bone {
  --bg: var(--bone);
  --fg: var(--ink);
  --bd: var(--bone);
}
.btn--bone:hover { --bg: var(--paper); --bd: var(--paper); }

.btn--ghost-light {
  --bg: transparent;
  --fg: var(--bone);
  --bd: var(--bone);
}
.btn--ghost-light:hover { --bg: var(--bone); --fg: var(--ink); }

.btn .icon { width: 18px; height: 18px; }

/* --- Hero ---------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  /* Subtle architectural grid texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(244,239,229,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,239,229,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
  z-index: -1;
}
.hero__eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--bone);
}
.hero h1 {
  font-size: var(--fs-display);
  margin-bottom: var(--space-5);
  max-width: 14ch;
}
.hero p.lead {
  color: var(--muted-dark);
  max-width: 62ch;
  margin-bottom: var(--space-6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__meta {
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid var(--line-dark);
  padding-top: var(--space-5);
}
.hero__meta dt {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 0.25rem;
}
.hero__meta dd {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (min-width: 960px) {
  /* "Sectors" is longer than the other 3 stats (Coverage/Engagement/Posture),
     so it gets a wider column + slightly tighter type to keep every stat on
     one line instead of "Energy" alone wrapping to its own row. Verified at
     960/1024/1280/1400/1920px — all four stats stay single-line. Below 960px
     the 2-column layout above gives every stat ample room on its own. */
  .hero__meta { grid-template-columns: 0.8fr 1.55fr 1.05fr 0.8fr; }
  .hero__meta__item--wide dd { font-size: 0.88rem; letter-spacing: 0.02em; }
}

/* --- Pillar cards -------------------------------------------------- */
.pillars {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}
.pillar {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.pillar:hover { transform: translateY(-2px); border-color: var(--ink); }
.pillar__num {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.pillar h3 {
  font-size: 2rem;
  margin-bottom: var(--space-3);
}
.pillar ul {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}
.pillar ul li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.3rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.pillar ul li:first-child { border-top: 0; padding-top: 0; }
.pillar ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--ink);
}
.pillar ul li:first-child::before { top: 0.4rem; }

/* Dark variant */
.section--dark .pillar {
  background: var(--ink-2);
  border-color: var(--line-dark);
  color: var(--bone);
}
.section--dark .pillar ul li { border-top-color: var(--line-dark); }
.section--dark .pillar ul li::before { border-color: var(--bone); }
.section--dark .pillar:hover { border-color: var(--bone); }

/* --- Section header ------------------------------------------------ */
.section-header { margin-bottom: var(--space-7); max-width: 720px; }
.section-header h2 { margin-bottom: var(--space-3); }
.section-header.section-header--centered {
  margin-inline: auto;
  text-align: center;
}

/* --- Sectors strip ------------------------------------------------- */
.sectors {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--line-dark);
}
.sectors > div {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 1rem;
}
.sectors > div:nth-child(2n) { border-right: 0; }
.sectors > div:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 720px) {
  .sectors { grid-template-columns: repeat(4, 1fr); }
  .sectors > div:nth-child(2n) { border-right: 1px solid var(--line-dark); }
  .sectors > div:nth-child(4n) { border-right: 0; }
  .sectors > div:nth-last-child(-n+4) { border-bottom: 0; }
}

/* --- Project grid -------------------------------------------------- */
.projects {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .projects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .projects { grid-template-columns: repeat(3, 1fr); } }

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: var(--space-6);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
  height: 100%;
}
.project-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.project-card__tag {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
  display: inline-block;
}
.project-card h3 {
  font-size: 1.35rem;
  margin-bottom: var(--space-3);
  line-height: 1.15;
}
.project-card p {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}
.project-card__meta {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.project-card__meta strong { color: var(--ink); font-weight: 600; }

/* Filter tabs */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-3);
}
.filter-tab {
  background: transparent;
  border: 1px solid transparent;
  padding: 0.55rem 1rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-radius: var(--radius);
  transition: color .15s, background .15s, border-color .15s;
}
.filter-tab:hover { color: var(--ink); }
.filter-tab[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

/* --- Hero on inner pages ------------------------------------------ */
.page-hero {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(3rem, 7vw, 5rem) 0;
  border-bottom: 1px solid var(--line-dark);
}
.page-hero h1 {
  font-size: var(--fs-h1);
  max-width: 18ch;
}
.page-hero p {
  color: var(--muted-dark);
  max-width: 62ch;
  margin-top: var(--space-3);
}

/* --- Two-column content block ------------------------------------- */
.cols {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 880px) {
  .cols--media { grid-template-columns: 1.1fr 1fr; }
  .cols--text  { grid-template-columns: 1fr 1.4fr; }
}
.cols figure { margin: 0; }
.cols img { width: 100%; height: auto; object-fit: cover; }

/* Content list (tight bullets) */
.content-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
.content-list li {
  position: relative;
  padding-left: 1.6rem;
}
.content-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 12px;
  height: 2px;
  background: var(--ink);
}
.section--dark .content-list li::before { background: var(--bone); }

/* --- Stats / coverage --------------------------------------------- */
.stats {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}
.stat {
  border-top: 2px solid var(--bone);
  padding-top: var(--space-3);
}
.stat dt {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 0.4rem;
}
.stat dd {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- CTA banner ---------------------------------------------------- */
.cta-banner {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.cta-banner__inner {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
.cta-banner h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.25rem); max-width: 22ch; }
.cta-banner p  { margin: 0; color: var(--muted-dark); max-width: 56ch; }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 880px) {
  .cta-banner__inner { grid-template-columns: 1.2fr auto; }
  .cta-banner__actions { justify-content: flex-end; }
}

/* --- Forms -------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--space-4);
  max-width: 640px;
}
.form__row {
  display: grid;
  gap: var(--space-2);
}
.form label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.form input,
.form select,
.form textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 0.95rem;
  font: inherit;
  color: var(--ink);
  transition: border-color .15s var(--ease);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.form textarea { min-height: 140px; resize: vertical; }
.form__row--two { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .form__row--two { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
.form__hint {
  font-size: 0.85rem;
  color: var(--muted);
}
.form__status {
  font-size: 0.9rem;
  margin: 0;
  min-height: 1.2em;
}
.form__status--success { color: #1B7A3D; font-weight: 600; }
.form__status--error { color: #B3261E; font-weight: 600; }

/* --- Contact summary ---------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .contact-grid { grid-template-columns: 1fr 1.2fr; } }

.contact-card {
  border: 1px solid var(--line);
  padding: var(--space-6);
  background: var(--paper);
}
.contact-card h3 { margin-bottom: var(--space-3); }
.contact-card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3) var(--space-4);
  margin: 0;
  font-size: 0.95rem;
}
.contact-card dt {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  align-self: center;
}
.contact-card dd { margin: 0; }
.contact-card a { text-decoration: underline; text-underline-offset: 3px; }

.leadership-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  padding: var(--space-6);
  background: var(--paper);
  max-width: 640px;
}
.leadership-card h3 { margin: 0 0 var(--space-2); }
.leadership-card__title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}
.leadership-card p:last-child { color: var(--muted); margin: 0; }

.docs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
}
.docs-list li { border-bottom: 1px solid var(--line); }
.docs-list li:last-child { border-bottom: 0; }
.docs-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.95rem var(--space-4);
  font-weight: 500;
  transition: background .15s var(--ease);
}
.docs-list a:hover { background: #FAF7F1; }
.docs-list .docs-list__type {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Footer ------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--muted-dark);
  padding: var(--space-8) 0 var(--space-5);
  border-top: 1px solid var(--line-dark);
}
.site-footer .container {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .site-footer .container { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
.site-footer h4 {
  color: var(--bone);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  margin-bottom: var(--space-3);
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.site-footer a { color: var(--muted-dark); transition: color .15s; }
.site-footer a:hover { color: var(--bone); }
.site-footer__brand img { height: 36px; margin-bottom: var(--space-3); }
.site-footer__brand p { font-size: 0.95rem; max-width: 36ch; }

.site-footer__legal {
  border-top: 1px solid var(--line-dark);
  padding-top: var(--space-4);
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.8rem;
  color: var(--muted-dark);
}

/* --- Utility ------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: 0; top: -100px;
  background: var(--bone);
  color: var(--ink);
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { top: 0; }

.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }

/* --- Print --------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav__toggle, .cta-banner { display: none !important; }
  body { color: #000; background: #fff; }
}

/* --- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   PHASE 1 — Visual lift on existing assets
   - Hero placeholder system (image / video ready)
   - Serif accent + scaled hero typography
   - Vision pull-quote section
   - Asymmetric pillars
   - Sticky shrinking header
   - Footer closing statement
   - Sticky mobile utility bar
   - Scroll-reveal animation
   - Counter helper (utility, opt-in via [data-count])
   ===================================================================== */

:root {
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --hero-overlay: linear-gradient(180deg, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0.85) 100%);
  --header-height: 64px;
  --header-height-scrolled: 52px;
  --util-bar-height: 60px;
}

/* --- Sticky shrinking header --------------------------------------- */
.site-header {
  transition: backdrop-filter .2s var(--ease), background-color .2s var(--ease);
}
.site-header .nav {
  min-height: var(--header-height);
  transition: min-height .2s var(--ease);
}
.site-header .nav__brand img {
  transition: height .2s var(--ease);
}
.is-scrolled .site-header {
  background: rgba(11,11,11,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.is-scrolled .site-header .nav { min-height: var(--header-height-scrolled); }
.is-scrolled .site-header .nav__brand img { height: 26px; }

/* --- Hero (rebuilt) ------------------------------------------------ */
/* Override symmetric padding in original .hero with a flex-aligned hero
   that supports a future background image or video without rebuild. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(540px, 78vh, 760px);
  padding: clamp(5rem, 11vw, 8.5rem) 0 clamp(3.5rem, 8vw, 6rem);
}

/* Phase 2-ready media layer. Drop in <img> or <video> inside .hero__media. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ink);
}
.hero__media > img,
.hero__media > video,
.hero__media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero__media:empty::after {
  /* Subtle architectural grid texture — fallback when no asset is present. */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(244,239,229,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,239,229,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.45) 70%, transparent 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.45) 70%, transparent 100%);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
/* Activates only when an asset is dropped into hero__media. */
.hero:has(.hero__media:not(:empty)) .hero__overlay { opacity: 1; }

/* Reduce video on data-saving / reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .hero__media video { display: none; }
}

/* Hero content — typography lift */
.hero__content {
  position: relative;
  width: 100%;
}
.hero__serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.1rem);
  letter-spacing: 0.01em;
  color: var(--bone);
  opacity: 0.85;
  margin: 0 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.hero__serif::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--bone);
  opacity: 0.7;
}
.hero__title {
  font-family: "Barlow Condensed", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 7vw + 0.5rem, 7.25rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 var(--space-5);
  max-width: 14ch;
}
.hero p.lead {
  color: var(--muted-dark);
  max-width: 62ch;
  margin-bottom: var(--space-6);
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.2rem);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.hero__meta {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-dark);
}

/* --- Vision pull-quote --------------------------------------------- */
.vision-quote {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(4rem, 9vw, 7rem) 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.vision-quote__inner { max-width: 980px; margin-inline: auto; }
.vision-quote__label {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin: 0 0 var(--space-5);
}
.vision-quote__label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--bone);
  opacity: 0.6;
}
.vision-quote__text {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw + 0.6rem, 2.6rem);
  line-height: 1.25;
  color: var(--bone);
  margin: 0 0 var(--space-5);
  max-width: 28ch;
}
.vision-quote__text::before { content: "\201C"; opacity: 0.6; margin-right: 0.05em; }
.vision-quote__text::after  { content: "\201D"; opacity: 0.6; margin-left: 0.05em; }
.vision-quote__cite {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin: 0;
}

/* --- Asymmetric pillars (home) ------------------------------------ */
.pillars-asym {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .pillars-asym { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
}
.pillars-asym__stack {
  display: grid;
  gap: var(--space-5);
  grid-auto-rows: 1fr;
}
.pillar--feature {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--ink);
  color: var(--bone);
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
}
.pillar--feature h3 { color: var(--bone); font-size: clamp(2rem, 3vw + 1rem, 3rem); }
.pillar--feature p { color: var(--muted-dark); }
.pillar--feature ul li { border-top-color: var(--line-dark); }
.pillar--feature ul li::before { border-color: var(--bone); }
.pillar--compact {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.pillar--compact h3 { font-size: clamp(1.4rem, 1.5vw + 0.8rem, 1.75rem); margin-bottom: var(--space-2); }
.pillar--compact p { color: var(--muted); margin-bottom: var(--space-3); font-size: 0.95rem; }
.pillar__numeral {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(3.25rem, 6vw, 5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.pillar--feature .pillar__numeral { color: var(--bone); font-size: clamp(4.5rem, 9vw, 7.5rem); }
.pillar__discipline {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-4);
  display: block;
}
.pillar--feature .pillar__discipline { color: var(--muted-dark); }

/* --- Sticky shrinking header -------------------------------------- */
.site-header { transition: backdrop-filter .2s var(--ease), background-color .2s var(--ease); }
.site-header .nav { transition: min-height .2s var(--ease); }
.site-header .nav__brand img { transition: height .2s var(--ease); }
.is-scrolled .site-header {
  background: rgba(11,11,11,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
.is-scrolled .site-header .nav { min-height: 52px; }
.is-scrolled .site-header .nav__brand img { height: 26px; }

/* --- Footer closing-statement ------------------------------------- */
.site-footer { padding: 0; }
.site-footer__hero {
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(0.5rem, 2vw, 1.5rem);
}
.site-footer__hero-inner {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 880px) {
  .site-footer__hero-inner { grid-template-columns: 1.2fr 1fr; gap: var(--space-7); }
}
.site-footer__monogram {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(5rem, 14vw, 12rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--bone);
  margin: 0;
  text-transform: uppercase;
}
.site-footer__statement p { color: var(--bone); margin: 0 0 var(--space-2); }
.site-footer__statement .tag {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.site-footer__statement .strap {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 0.8vw + 0.8rem, 1.4rem);
  line-height: 1.3;
  color: var(--bone);
  max-width: 28ch;
}
.site-footer__main {
  background: var(--ink);
  padding: clamp(2.5rem, 5vw, 4rem) 0 var(--space-5);
}
.site-footer__main .container {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .site-footer__main .container { grid-template-columns: repeat(3, 1fr); }
}
.site-footer__brand { display: none; }

/* --- Sticky mobile utility bar — CRITICAL ICON CONSTRAINTS -------- */
/* Defaults: hide and lock SVG dimensions site-wide so icons can never
   render unconstrained even if a media query fails or CSS load is partial. */
.util-bar { display: none; }
.util-bar svg,
.util-bar__btn .icon,
.util-bar__btn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  display: inline-block;
}
@media (max-width: 879px) {
  body.has-util-bar { padding-bottom: 60px; }
  .util-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    z-index: 45;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ink);
    border-top: 1px solid var(--line-dark);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
  }
  .util-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--bone);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    min-height: 48px;
    padding: 0.5rem 1rem;
  }
  .util-bar__btn + .util-bar__btn { border-left: 1px solid var(--line-dark); }
}

/* --- Scroll-reveal motion ----------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

[data-count] { font-variant-numeric: tabular-nums; }

@media (max-width: 540px) {
  .hero__title { font-size: clamp(2.5rem, 13vw, 3.75rem); }
  .hero p.lead { font-size: 1.02rem; }
}

/* =====================================================================
   PHASE 1B - Social links + projects page editorial layout
   ===================================================================== */

/* --- Social links - compact, locked size --------------------------- */
/* Hard caps: link 32x32, icon 16x16. Uses !important to defeat any
   parent rules that might otherwise let an SVG render unconstrained
   (the bug seen in earlier deploys where icons blew out to viewport). */
.social-list {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
}
.social-list li { list-style: none; padding: 0; margin: 0; }
.social-list__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--bone);
  background: transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  flex: 0 0 auto !important;
  padding: 0;
  box-sizing: border-box;
}
.social-list__link:hover {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}
.social-list__link svg,
.social-list__link img {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px;
  max-height: 16px;
  display: block !important;
  flex-shrink: 0 !important;
}
.social-list--light .social-list__link {
  border-color: var(--line);
  color: var(--ink);
}
.social-list--light .social-list__link:hover {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.site-footer__social { margin-top: var(--space-4); }

/* --- Projects page editorial sections ----------------------------- */
.projects-disclosure {
  background: #FAF7F1;
  border-left: 3px solid var(--steel);
  padding: var(--space-5);
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/* =====================================================================
   PHASE 1C — Editorial project rows (v2 layout) + tick checkboxes
   ===================================================================== */

/* --- Project rows (replaces grid of cards) ----------------------- */
.proj-section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: var(--paper);
  color: var(--ink);
}
.proj-section .container { display: block; }

.proj-category {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: clamp(2rem, 4vw, 3rem) 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.proj-category::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  flex-shrink: 0;
  transform: translateY(-3px);
}
.proj-section > .container > .proj-category:first-of-type {
  margin-top: 0;
}

.proj-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.proj-row:last-child { border-bottom: 0; }
@media (min-width: 880px) {
  .proj-row {
    grid-template-columns: minmax(220px, 1fr) 1.6fr;
    gap: var(--space-7);
  }
}

.proj-row__id { min-width: 0; }
.proj-row__id h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 1.4vw + 0.7rem, 1.55rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin: 0 0 var(--space-3);
}
.proj-row__meta {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.proj-row__desc {
  min-width: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
}
.proj-row__desc p { margin: 0; color: var(--ink); }

.proj-disclosure {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  max-width: 90ch;
}

/* --- Project card title contrast fix (legacy cards) ----------- */
/* Cards on .section--dark were inheriting bone colour. Force ink. */
.project-card,
.project-card h3,
.project-card p {
  color: var(--ink);
}
.section--dark .project-card h3 { color: var(--ink) !important; }
/* Featured (intentionally dark) keeps cream */
.project-card--feature h3 { color: var(--bone) !important; }
.project-card--feature p { color: var(--muted-dark); }

/* --- Tick checkbox bullets (replaces empty squares) ---------- */
/* Used inside .pillar ul on capability page Scope Summary */
.pillar ul li::before {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l2.6 2.6L11 4.4' stroke='%230B0B0B' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
  top: 0.75rem;
}
.pillar ul li:first-child::before { top: 0.25rem; }

/* Cream tick on dark surfaces */
.section--dark .pillar ul li::before {
  border-color: var(--bone);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l2.6 2.6L11 4.4' stroke='%23F4EFE5' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.pillar--feature ul li::before {
  border-color: var(--bone);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l2.6 2.6L11 4.4' stroke='%23F4EFE5' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.section--dark .project-card h3 { color: var(--ink) !important; }
.project-card--feature h3 { color: var(--bone) !important; }
.project-card--feature p { color: var(--muted-dark); }

/* --- Tick checkbox bullets (replaces empty squares) ---------- */
.pillar ul li::before {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l2.6 2.6L11 4.4' stroke='%230B0B0B' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
  top: 0.75rem;
}
.pillar ul li:first-child::before { top: 0.25rem; }

.section--dark .pillar ul li::before {
  border-color: var(--bone);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l2.6 2.6L11 4.4' stroke='%23F4EFE5' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.pillar--feature ul li::before {
  border-color: var(--bone);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l2.6 2.6L11 4.4' stroke='%23F4EFE5' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* =====================================================================
   Project card contrast — hard override
   Cards on light section AND dark section share the same white surface
   and must use dark ink for titles, mid-gray for eyebrow and body.
   Uses explicit hex (not vars) and stacked specificity to win the cascade.
   ===================================================================== */
.projects .project-card,
.section--dark .projects .project-card {
  background: #FFFFFF !important;
  border: 1px solid #E6E4DF !important;
}
.projects .project-card .project-card__tag,
.section--dark .projects .project-card .project-card__tag {
  color: #6B7280 !important;
}
.projects .project-card h3,
.section--dark .projects .project-card h3 {
  color: #0B0B0B !important;
}
.projects .project-card p,
.section--dark .projects .project-card p {
  color: #4B5563 !important;
}
.projects .project-card .project-card__meta,
.section--dark .projects .project-card .project-card__meta {
  color: #6B7280 !important;
  border-top: 1px solid #E6E4DF !important;
}
.projects .project-card .project-card__meta strong,
.section--dark .projects .project-card .project-card__meta strong {
  color: #0B0B0B !important;
}
/* ---- Project card image header (16:9, edge-to-edge inside card) ---- */
.project-card { padding: 0 !important; overflow: hidden; }
.project-card > :not(.project-card__image):not(.project-card__meta) {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.project-card > :first-child:not(.project-card__image) {
  padding-top: var(--space-6);
}
.project-card > .project-card__meta {
  margin-left: var(--space-6);
  margin-right: var(--space-6);
  margin-bottom: var(--space-6);
}
.project-card__image {
  display: block;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0B0B0B;
  border-bottom: 1px solid #E6E4DF;
}
.project-card__image img,
.project-card__image picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* <source> is metadata, not content — must never render as a box
   (display:block on it pushes the img out of the clipped figure). */
.project-card__image source { display: none; }
.project-card:hover .project-card__image img {
  transform: scale(1.02);
}
.project-card__image img {
  transition: transform 0.4s var(--ease);
}
/* When the card has an image, the first text child below it needs top padding */
.project-card .project-card__image + * {
  padding-top: var(--space-6) !important;
}

/* Hardening: keep every project image a uniform 16:9 box regardless of the
   source image's own ratio. The <picture> wrapper MUST be block + fill the box,
   otherwise the img's intrinsic height inflates the aspect-ratio box
   (min-content overflow) and tall (4:3) images render larger than wide ones. */
.project-card__image { min-height: 0; }
.project-card__image > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.project-card__image > picture > img,
.project-card__image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Wide section-divider banner between project sections ----
   Uses a clamped vh-based height so the banner is always full-width
   on every viewport. Avoid aspect-ratio + max-height combo (locks width). */
.project-divider {
  display: block;
  width: 100%;
  height: clamp(180px, 22vw, 320px);
  overflow: hidden;
  background: #0B0B0B;
}
.project-divider picture {
  display: block;
  width: 100%;
  height: 100%;
}
.project-divider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Page-banner: full-width image directly under nav (Services etc.) ----
   Same approach: clamp the height, let object-fit do the cropping. */
.page-banner {
  display: block;
  width: 100%;
  height: clamp(240px, 38vw, 520px);
  overflow: hidden;
  background: #0B0B0B;
}
.page-banner picture {
  display: block;
  width: 100%;
  height: 100%;
}
.page-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- CTA banner — concrete/rebar texture background ---- */
.cta-banner {
  position: relative;
  isolation: isolate;
  background-color: #0B0B0B;
  background-image: linear-gradient(rgba(11,11,11,0.85), rgba(11,11,11,0.92)), url('../images/texture-concrete-rebar.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@supports (background-image: image-set(url('../images/texture-concrete-rebar.webp') 1x)) {
  .cta-banner {
    background-image: linear-gradient(rgba(11,11,11,0.85), rgba(11,11,11,0.92)), image-set(url('../images/texture-concrete-rebar.webp') 1x, url('../images/texture-concrete-rebar.jpg') 1x);
  }
}

/* Featured card on Active Programs intentionally stays dark with cream text */
.projects .project-card--feature,
.section--dark .projects .project-card--feature {
  background: #0B0B0B !important;
  border-color: #0B0B0B !important;
}
.projects .project-card--feature .project-card__image {
  border-bottom: 1px solid #2A2A2A;
}
.projects .project-card--feature .project-card__tag,
.projects .project-card--feature .project-card__feature-eyebrow {
  color: #9AA0A6 !important;
}
.projects .project-card--feature h3 {
  color: #F4EFE5 !important;
}
.projects .project-card--feature p,
.projects .project-card--feature .project-card__meta,
.projects .project-card--feature .project-card__meta span {
  color: #9AA0A6 !important;
}
.projects .project-card--feature .project-card__meta {
  border-top: 1px solid #2A2A2A !important;
}
.projects .project-card--feature .project-card__meta strong {
  color: #F4EFE5 !important;
}

/* =====================================================================
   PHASE 1D — Projects page redesign (editorial motion, indexed)
   - Alternating section surfaces (paper / ink) per category
   - Big indexed numerals 01-12 per project, count-up on viewport entry
   - Sticky category eyebrow that anchors as user scrolls a category
   - Hairline rule scaleX-reveal on row enter
   - Hover accent rail on left edge
   - All motion gated by prefers-reduced-motion
   ===================================================================== */

/* Container for the indexed project list */
.projx {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.projx--dark {
  background: var(--ink);
  color: var(--bone);
}
.projx + .projx { padding-top: clamp(2rem, 5vw, 3.5rem); }

/* Sticky category header — anchors at top while scrolling that category */
.projx__cat {
  position: sticky;
  top: 64px; /* below site header */
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: var(--space-4) 0 var(--space-3);
  margin-bottom: var(--space-5);
  background: inherit;
  border-bottom: 1px solid var(--line);
}
.projx--dark .projx__cat { border-bottom-color: var(--line-dark); background: var(--ink); }
@media (min-width: 880px) {
  .projx__cat {
    grid-template-columns: max-content 1fr max-content;
    align-items: end;
    gap: var(--space-5);
  }
}
.projx__cat-label {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw + 0.5rem, 2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
.projx--dark .projx__cat-label { color: var(--bone); }
.projx__cat-meta {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.projx--dark .projx__cat-meta { color: var(--muted-dark); }

/* Animated rule on category — scale-x in on reveal */
.projx__cat-rule {
  display: block;
  height: 2px;
  background: var(--ink);
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 700ms var(--ease);
}
.projx--dark .projx__cat-rule { background: var(--bone); }
.js [data-reveal].is-revealed .projx__cat-rule,
.js .projx.is-revealed .projx__cat-rule { transform: scaleX(1); }

/* Project row */
.projx__row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-4) var(--space-5);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  position: relative;
  border-top: 1px solid var(--line);
  align-items: start;
}
.projx--dark .projx__row { border-top-color: var(--line-dark); }
.projx__row:first-of-type { border-top: 0; }

@media (min-width: 880px) {
  .projx__row {
    grid-template-columns: 96px minmax(220px, 1.1fr) 1.7fr;
    gap: var(--space-5) clamp(2rem, 4vw, 3.5rem);
  }
}

/* Hairline rule — animates in from left on scroll-reveal */
.projx__row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 600ms var(--ease);
  pointer-events: none;
}
.projx--dark .projx__row::before { background: var(--bone); }
.projx__row:first-of-type::before { display: none; }
.js .projx__row.is-revealed::before { transform: scaleX(1); }

/* Hover accent rail — draws from top on row hover */
.projx__row::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ink);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 280ms var(--ease);
  pointer-events: none;
}
.projx--dark .projx__row::after { background: var(--bone); }
.projx__row:hover::after { transform: scaleY(1); }

/* Big indexed numeral */
.projx__num {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw + 0.5rem, 4.75rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.25;
  margin: 0;
  font-variant-numeric: tabular-nums;
  transition: opacity 500ms var(--ease), color 280ms var(--ease);
}
.projx--dark .projx__num { color: var(--bone); }
.js .projx__row.is-revealed .projx__num { opacity: 1; }
.projx__row:hover .projx__num { opacity: 1; }

/* Project body (name + meta) */
.projx__id { min-width: 0; }
.projx__name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 1.5vw + 0.7rem, 1.7rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.projx--dark .projx__name { color: var(--bone); }
.projx__meta {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.projx--dark .projx__meta { color: var(--muted-dark); }

.projx__desc {
  min-width: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}
.projx--dark .projx__desc { color: var(--bone); opacity: 0.85; }

/* Active badge — shows on the live engagement */
.projx__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--ink);
  border-radius: 100px;
  margin-bottom: var(--space-3);
}
.projx--dark .projx__badge { color: var(--bone); border-color: var(--bone); }
.projx__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00C261;
  box-shadow: 0 0 8px rgba(0,194,97,0.6);
  animation: projx-pulse 2.4s ease-in-out infinite;
}
@keyframes projx-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* Stagger reveal — JS adds .is-revealed; CSS adds slight delay per row */
.js .projx__row {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  will-change: opacity, transform;
}
.js .projx__row.is-revealed {
  opacity: 1;
  transform: none;
}
.js .projx__row:nth-child(2)  { transition-delay: 60ms; }
.js .projx__row:nth-child(3)  { transition-delay: 120ms; }
.js .projx__row:nth-child(4)  { transition-delay: 180ms; }
.js .projx__row:nth-child(5)  { transition-delay: 240ms; }
.js .projx__row:nth-child(6)  { transition-delay: 300ms; }
.js .projx__row:nth-child(7)  { transition-delay: 360ms; }
.js .projx__row:nth-child(8)  { transition-delay: 420ms; }

/* Disclosure block at end */
.projx__disclosure {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
  max-width: 90ch;
}
.projx--dark .projx__disclosure {
  border-top-color: var(--line-dark);
  color: var(--muted-dark);
}

/* Featured row variant — applied to first row in the page */
.projx__row--featured {
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  background: linear-gradient(180deg, transparent 0%, rgba(11,11,11,0.02) 100%);
}
.projx--dark .projx__row--featured {
  background: linear-gradient(180deg, transparent 0%, rgba(244,239,229,0.02) 100%);
}
.projx__row--featured .projx__num {
  opacity: 0.85;
  font-size: clamp(3rem, 7vw + 0.5rem, 6rem);
}
.projx__row--featured .projx__name {
  font-size: clamp(1.5rem, 2vw + 0.8rem, 2.1rem);
}

/* Reduced motion: disable all transitions and reveals */
@media (prefers-reduced-motion: reduce) {
  .js .projx__row { opacity: 1 !important; transform: none !important; transition: none !important; }
  .projx__row::before, .projx__row::after,
  .projx__cat-rule { transform: scaleX(1) scaleY(1) !important; transition: none !important; }
  .projx__badge::before { animation: none !important; }
}

/* =====================================================================
   ROLE GRID — "People we place — in action"
   Used on services.html to showcase HSE / Engineering Quality / Site roles
   with a documentary photo + role tag + short description.
   ===================================================================== */
.role-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 720px)  { .role-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 1024px) { .role-grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }

.role-card {
  margin: 0;
  background: #FFFFFF;
  border: 1px solid #E6E4DF;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.role-card:hover {
  border-color: #0B0B0B;
  transform: translateY(-2px);
}
.role-card picture {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #0B0B0B;
}
.role-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}
.role-card:hover img {
  transform: scale(1.03);
}
.role-card figcaption {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
}
.role-card__tag {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  color: #6B7280;
  font-weight: 600;
}
.role-card h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #0B0B0B;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
.role-card p {
  color: #4B5563;
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0;
}

/* =====================================================================
   PROJECT CARD TITLE — black "highlight marker" style
   Inline black background that wraps with the text on multi-line titles.
   Applies to ALL project cards across both Active Programs and
   Selected Program Exposure sections, light or dark backgrounds.
   ===================================================================== */
html body .projects .project-card h3,
html body .section--dark .projects .project-card h3 {
  display: inline !important;
  background-color: #0B0B0B !important;
  color: #FFFFFF !important;
  padding: 0.18em 0.4em !important;
  line-height: 1.85 !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
  margin: 0 !important;
}
/* Featured (Active Programs dark) cards: invert — light pill on dark card */
html body .projects .project-card--feature h3 {
  background-color: #F4EFE5 !important;
  color: #0B0B0B !important;
}
/* Wrap the h3 in its own block so the inline highlight breaks correctly */
html body .projects .project-card > h3,
html body .projects .project-card > div > h3 {
  display: inline-block !important;
  max-width: 100%;
}
/* Restore default block flow around the h3 — the h3 itself stays inline so
   the highlight tracks text width, but the surrounding line gets its space */
html body .projects .project-card h3::before {
  content: "";
  display: block;
  margin-bottom: 0;
}

/* =====================================================================
   FINAL terminal override — project card title legibility.
   Stacked specificity so this beats anything above.
   Use only ink-tones on the white card surface; cream tones reserved
   for the featured (intentionally dark) cards.
   ===================================================================== */
html body .section .projects .project-card:not(.project-card--feature),
html body .section--dark .projects .project-card:not(.project-card--feature) {
  background: #FFFFFF !important;
  border: 1px solid #E6E4DF !important;
}
html body .section .projects .project-card:not(.project-card--feature) h3,
html body .section--dark .projects .project-card:not(.project-card--feature) h3 {
  color: #0B0B0B !important;
  font-weight: 700 !important;
}
html body .section .projects .project-card:not(.project-card--feature) .project-card__tag,
html body .section--dark .projects .project-card:not(.project-card--feature) .project-card__tag {
  color: #4B5563 !important;
}
html body .section .projects .project-card:not(.project-card--feature) p,
html body .section--dark .projects .project-card:not(.project-card--feature) p {
  color: #374151 !important;
}
html body .section .projects .project-card:not(.project-card--feature) .project-card__meta,
html body .section--dark .projects .project-card:not(.project-card--feature) .project-card__meta {
  color: #4B5563 !important;
  border-top: 1px solid #E6E4DF !important;
}
html body .section .projects .project-card:not(.project-card--feature) .project-card__meta strong,
html body .section--dark .projects .project-card:not(.project-card--feature) .project-card__meta strong {
  color: #0B0B0B !important;
}

/* Same hard-stop for the home page "Programs supported" card grid */
html body .section .projects .project-card h3 {
  color: #0B0B0B !important;
}
html body .section .projects .project-card .project-card__tag {
  color: #4B5563 !important;
}

/* =====================================================================
   Title legibility — final pass (2026-06-27).
   The earlier experimental "highlight pill" title treatment rendered
   black-text-on-black-pill on the regular cards (invisible). Remove the
   pill entirely and use plain, always-legible titles:
   dark ink on the white cards, cream on the dark Active-Programs cards.
   ===================================================================== */
html body .section .projects .project-card h3,
html body .section--dark .projects .project-card h3 {
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  color: #0B0B0B !important;
}
html body .section .projects .project-card h3::before { content: none !important; }
html body .section .projects .project-card.project-card--feature h3,
html body .section--dark .projects .project-card.project-card--feature h3 {
  color: #F4EFE5 !important;
}

/* =====================================================================
   FIX (2026-07-09) — project-card title alignment.
   The pill-removal pass (line ~2175) zeroes h3 padding, but on regular
   (non-feature) cards the h3 is a DIRECT child of .project-card, so it
   lost the var(--space-6) horizontal inset its sibling .project-card__tag
   and <p> still have — the title jutted ~32px left of everything else.
   Restore the inset on regular cards only (feature-card h3s sit inside a
   padded <div>, so they must stay at padding 0). Specificity (0,4,3)
   with !important + later source order wins the cascade.
   ===================================================================== */
html body .section .projects .project-card:not(.project-card--feature) h3,
html body .section--dark .projects .project-card:not(.project-card--feature) h3 {
  padding-left: var(--space-6) !important;
  padding-right: var(--space-6) !important;
}

/* =====================================================================
   FIX (2026-07-09) — feature-card eyebrow typography.
   .project-card__feature-eyebrow is a <p>, so it was inheriting body
   copy (Inter ~0.95rem, sentence case) and reading as stray text above
   the Barlow-Condensed uppercase .project-card__tag. Give it the same
   eyebrow/tag type treatment so the two label lines read as a system.
   Selector (0,3,0) beats .project-card p (0,1,1); colour stays from the
   existing override at line ~1724.
   ===================================================================== */
.projects .project-card--feature .project-card__feature-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

/* =====================================================================
   Project-attribution badges (v5 closeout, review item 8) — each card
   states its relationship to 3LA (contracted party vs. director's prior
   history) so procurement can't read general programme exposure as a
   claim of formal 3LA engagement. New class, deliberately isolated from
   the .project-card__tag cascade above to avoid the specificity chain.
   ===================================================================== */
.project-card__attribution {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border-radius: 3px;
  margin: 0 0 var(--space-3);
}
html body .section .projects .project-card:not(.project-card--feature) .project-card__attribution,
html body .section--dark .projects .project-card:not(.project-card--feature) .project-card__attribution {
  background: #F4F4F2;
  color: #4B5563 !important;
  border: 1px solid #E6E4DF;
}
html body .projects .project-card--feature .project-card__attribution {
  background: rgba(244, 239, 229, 0.08);
  color: #C9CDD3 !important;
  border: 1px solid #3A3A3A;
}

/* =====================================================================
   FIX (2026-07-12) — "Currently engaged" now carries 4 active/feature
   cards (Mandurah, Perdaman, Fenix, Ramelius). Keep that flagship row a
   balanced 2x2 on desktop instead of the default 3-col grid's 3 + 1.
   Targets the light (non-dark) projects section = the active one only;
   the dark "Selected program exposure" grid keeps its 3-col layout.
   ===================================================================== */
@media (min-width: 1024px) {
  .projects-section:not(.section--dark) .projects {
    grid-template-columns: repeat(2, 1fr);
  }
}