/* =====================================================================
   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%; }

.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;
}

.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;
  inset: 64px 0 0 0;
  background: var(--ink);
  display: none;
  flex-direction: column;
  padding: var(--space-6) var(--gutter) var(--space-8);
  border-top: 1px solid var(--line-dark);
}
.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: 720px) {
  .hero__meta { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* --- 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);
}

/* --- 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; }

.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(--ink);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 90ch;
}
.projects-disclosure strong { color: var(--ink); }
.section--dark .projects-disclosure {
  background: var(--ink-2);
  color: var(--muted-dark);
  border-left-color: var(--bone);
}
.section--dark .projects-disclosure strong { color: var(--bone); }

/* Featured project tile */
.project-card--feature {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  grid-column: 1 / -1;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 880px) {
  .project-card--feature { grid-template-columns: 1.4fr 1fr; }
}
.project-card--feature h3 {
  color: var(--bone);
  font-size: clamp(1.85rem, 2vw + 1rem, 2.5rem);
  line-height: 1.05;
  margin: 0 0 var(--space-3);
}
.project-card--feature p { color: var(--muted-dark); margin: 0 0 var(--space-3); }
.project-card--feature .project-card__tag { color: var(--muted-dark); }
.project-card--feature .project-card__meta {
  border-top-color: var(--line-dark);
  color: var(--muted-dark);
  margin-top: 0;
}
.project-card--feature .project-card__meta strong { color: var(--bone); }
.project-card--feature:hover { transform: none; border-color: var(--ink); }

.project-card__feature-eyebrow {
  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-3);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.project-card__feature-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--bone);
  opacity: 0.6;
}

/* =====================================================================
   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 .pr
.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>");
}

/* =====================================================================
   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; }
}