/* ============================================================
   LEF Construction | lefconstruction.com
   Third draft (Fable). Built on the LEF Construction Design
   System: Slate & Forest palette, Spectral / Archivo / IBM Plex
   Mono, hairline rules, spec-sheet stats, mechanical motion.
   ============================================================ */

:root{
  /* Color: Slate & Forest */
  --paper:#F5F7F2; --paper-2:#ECEFE8;
  --stone-100:#E4E6DF; --stone-200:#D2D5CB; --stone-300:#B0BAAC; --stone-400:#8E9C8A;
  --slate-500:#5A685E; --slate-600:#3F4F45; --slate-700:#2F4439; --slate-800:#1B2A2A;
  --ink-900:#14201B; --white:#FFFFFF;
  --green-200:#C2D4C3; --green-300:#93B399; --green-400:#659072;
  --green-500:#3F6B4F; --green-600:#2F5440; --green-700:#224031;

  /* Semantic */
  --text-strong:var(--ink-900); --text-body:var(--slate-700);
  --text-muted:var(--slate-500); --text-subtle:var(--stone-400);
  --text-inverse:var(--paper); --text-link:var(--green-600);
  --surface-page:var(--paper); --surface-sunken:var(--paper-2);
  --surface-card:var(--white); --surface-ink:var(--ink-900);
  --accent:var(--green-500);
  --border-hairline:rgba(20,32,27,.14); --border-default:rgba(20,32,27,.24);
  --border-on-ink:rgba(245,247,242,.18);

  /* Type */
  --font-serif:"Spectral", Georgia, "Times New Roman", serif;
  --font-sans:"Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:"IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Space & layout */
  --container:1240px; --measure:680px; --gutter:24px; --section-y:96px;

  /* Form & motion */
  --radius-xs:2px; --radius-sm:3px; --radius-md:5px; --radius-lg:8px;
  --shadow-sm:0 1px 2px rgba(20,32,27,.07), 0 1px 1px rgba(20,32,27,.04);
  --shadow-md:0 6px 18px -6px rgba(20,32,27,.12), 0 2px 5px -2px rgba(20,32,27,.08);
  --ease-standard:cubic-bezier(.2,0,.1,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:360ms;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-sans); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--text-link); text-decoration:none; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
h1,h2,h3,h4{ margin:0; color:var(--text-strong); font-family:var(--font-sans); }
h1{ font-family:var(--font-serif); font-weight:400; letter-spacing:-0.02em; font-size:clamp(38px,5.2vw,64px); line-height:1.08; }
h2{ font-family:var(--font-serif); font-weight:400; letter-spacing:-0.02em; font-size:clamp(29px,3.4vw,42px); line-height:1.14; }
h3{ font-weight:600; font-size:19px; line-height:1.35; }
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.measure{ max-width:var(--measure); }
::selection{ background:var(--green-200); color:var(--ink-900); }

:focus-visible{ outline:2px solid var(--green-500); outline-offset:3px; border-radius:var(--radius-xs); }
.on-ink :focus-visible{ outline-color:var(--green-300); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000; padding:10px 16px;
  background:var(--ink-900); color:var(--paper); font-family:var(--font-mono); font-size:13px;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Shared atoms ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--green-600);
  margin:0 0 14px;
}
.on-ink .eyebrow{ color:var(--green-300); }
.eyebrow .n{ color:var(--text-subtle); }

.rule-top{ border-top:2px solid var(--ink-900); padding-top:18px; }
.on-ink .rule-top{ border-top-color:var(--paper); }

.serif-statement{
  font-family:var(--font-serif); font-size:clamp(20px,2.2vw,25px);
  line-height:1.5; color:var(--text-strong); font-weight:300;
}
.on-ink .serif-statement{ color:var(--paper); }

.tlink{
  font-family:var(--font-mono); font-size:13.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--green-600); border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color var(--dur-fast) var(--ease-standard);
}
.tlink:hover{ border-bottom-color:var(--green-600); }
.on-ink .tlink{ color:var(--green-300); }
.on-ink .tlink:hover{ border-bottom-color:var(--green-300); }
.arrow{ display:inline-block; transition:transform var(--dur-fast) var(--ease-standard); }
a:hover .arrow{ transform:translateX(3px); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-sans); font-weight:600; font-size:15px; line-height:1;
  padding:15px 26px; border-radius:var(--radius-sm); border:1.5px solid transparent;
  cursor:pointer; transition:transform var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}
.btn:active{ transform:scale(.985); }
.btn-solid{ background:var(--accent); color:#F3F7F2; }
.btn-solid:hover{ background:var(--green-600); }
.btn-ghost{ border-color:var(--border-default); color:var(--text-strong); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink-900); }
.on-ink .btn-ghost{ border-color:var(--border-on-ink); color:var(--paper); }
.on-ink .btn-ghost:hover{ border-color:var(--paper); }
.btn-light{ background:var(--paper); color:var(--ink-900); }
.btn-light:hover{ background:var(--white); }

/* ---------- Top bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(245,247,242,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.topbar.scrolled{ border-bottom-color:var(--border-hairline); box-shadow:var(--shadow-sm); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.lockup{ display:flex; align-items:center; gap:13px; }
.lockup .mark{ width:38px; height:40px; flex:none; }
.lockup-text{ display:flex; flex-direction:column; gap:2px; }
.lockup-name{
  font-family:var(--font-sans); font-weight:700; font-size:15.5px;
  letter-spacing:.12em; color:var(--ink-900);
}
.lockup-sub{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted);
}
.nav-desktop{ display:flex; align-items:center; gap:32px; }
.nav-desktop > a:not(.btn){
  font-weight:500; font-size:15px; color:var(--text-body);
  padding:6px 0; border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.nav-desktop > a:not(.btn):hover{ color:var(--ink-900); }
.nav-desktop > a[aria-current="page"]{ color:var(--ink-900); border-bottom-color:var(--accent); }
.nav-desktop .btn{ padding:12px 20px; font-size:14px; }
.nav-toggle{
  display:none; background:none; border:1.5px solid var(--border-default); border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-900); padding:10px 14px; cursor:pointer;
}
.nav-mobile{ display:none; border-top:1px solid var(--border-hairline); background:var(--paper); }
.nav-mobile a{
  display:block; padding:16px var(--gutter); font-weight:500; color:var(--text-strong);
  border-bottom:1px solid var(--border-hairline);
}
.nav-open .nav-mobile{ display:block; }

/* ---------- Hero (home) ---------- */
.hero{
  position:relative; background:var(--surface-ink); color:var(--paper);
  padding-top:76px; overflow:hidden;
}
.hero-draw{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; }
.hero-content{ position:relative; z-index:2; padding:118px 0 84px; max-width:840px; }
.hero .container{ position:relative; }
.hero h1{ color:var(--paper); max-width:15ch; }
.hero .eyebrow{ color:var(--green-300); }
.hero .lede{
  margin-top:24px; max-width:56ch; font-size:18px; line-height:1.7; color:var(--green-200);
}
.hero-ctas{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }

.hero-datum{ position:relative; z-index:2; border-top:1px solid var(--border-on-ink); background:rgba(20,32,27,.72); backdrop-filter:blur(4px); }
.datum-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.datum{ padding:26px 20px 26px 0; border-left:1px solid var(--border-on-ink); padding-left:20px; }
.datum:first-child{ border-left:none; padding-left:0; }
.datum-value{
  font-family:var(--font-serif); font-size:clamp(26px,2.6vw,36px); font-weight:400;
  color:var(--paper); font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
}
.datum-label{
  margin-top:6px; font-family:var(--font-mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--green-300);
}

/* Interior page hero (bottom padding raised so hero photos read better) */
.page-hero{ background:var(--surface-ink); color:var(--paper); padding:170px 0 124px; position:relative; overflow:hidden; }
.page-hero h1{ color:var(--paper); font-size:clamp(34px,4.2vw,54px); max-width:20ch; }
.page-hero .lede{ margin-top:20px; max-width:62ch; color:var(--green-200); font-size:17.5px; line-height:1.7; }
.page-hero .hero-draw{ opacity:.5; }

/* ---------- Sections ---------- */
.section{ padding:var(--section-y) 0; }
.section-sunken{ background:var(--surface-sunken); }
.section-ink{ background:var(--surface-ink); color:var(--green-200); }
.section-ink h2,.section-ink h3{ color:var(--paper); }
.section-head{ max-width:760px; margin-bottom:52px; }
.section-head.row{
  max-width:none; display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap;
}
.split{ display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:start; }
.split-even{ grid-template-columns:1fr 1fr; }

/* ---------- Clients marquee ---------- */
.clients{ border-top:1px solid var(--border-hairline); border-bottom:1px solid var(--border-hairline); padding:26px 0; background:var(--surface-page); }
.clients-label{
  text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-muted); margin:0 0 18px;
}
.marquee{ overflow:hidden; position:relative; }
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,var(--paper),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--paper),transparent); }
.marquee-track{ display:flex; gap:64px; width:max-content; animation:marquee 42s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.m-item{
  font-family:var(--font-serif); font-size:19px; color:var(--text-muted); white-space:nowrap;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Sector cards ---------- */
.sector-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.sector{
  position:relative; display:block; background:var(--surface-card);
  border:1px solid var(--border-hairline); border-top:2px solid var(--ink-900);
  border-radius:var(--radius-xs); padding:30px 28px 26px; color:var(--text-body);
  transition:transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.sector:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.sector-n{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--text-subtle);
}
.sector h3{ margin:14px 0 10px; font-size:20px; }
.sector p{ font-size:15.5px; color:var(--text-muted); }
.sector-metric{
  display:inline-block; margin-top:18px; font-family:var(--font-mono); font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--green-600);
  border-top:1px solid var(--border-hairline); padding-top:12px;
}

/* ---------- Project cards ---------- */
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px; }
.proj-card{
  display:block; background:var(--surface-card); border:1px solid var(--border-hairline);
  border-radius:var(--radius-xs); overflow:hidden; color:var(--text-body); position:relative;
  transition:transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.proj-card:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.proj-art{ position:relative; border-bottom:1px solid var(--border-hairline); }
.proj-art svg{ display:block; width:100%; height:auto; }
/* Corner tick marks removed per punch feedback: cards show the plain image */
.proj-body{ padding:22px 24px 24px; }
.proj-tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--green-600);
}
.proj-body h3{ margin:10px 0 6px; font-size:19px; }
.proj-meta{
  display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  color:var(--text-muted); margin-bottom:10px;
}
.proj-body p{ font-size:15px; color:var(--text-muted); }

/* ---------- Timeline ---------- */
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{
  position:relative; padding:0 0 30px 34px; border-left:1px solid var(--border-on-ink);
  margin-left:6px;
}
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{
  content:""; position:absolute; left:-5px; top:7px; width:9px; height:9px;
  background:var(--green-300); border-radius:1px;
}
.tl-year{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; color:var(--green-300);
  text-transform:uppercase;
}
.timeline h3{ margin:8px 0 8px; color:var(--paper); font-size:18px; }
.timeline p{ font-size:15px; color:var(--green-200); opacity:.92; }
.section:not(.section-ink) .timeline li{ border-left-color:var(--border-hairline); }
.section:not(.section-ink) .timeline li::before{ background:var(--green-500); }
.section:not(.section-ink) .tl-year{ color:var(--green-600); }
.section:not(.section-ink) .timeline h3{ color:var(--text-strong); }
.section:not(.section-ink) .timeline p{ color:var(--text-muted); }

/* ---------- Process phases ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:2px solid var(--ink-900); }
.phase{ padding:26px 24px 8px 0; border-right:1px solid var(--border-hairline); padding-left:24px; }
.phase:first-child{ padding-left:0; }
.phase:last-child{ border-right:none; }
.phase-n{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; color:var(--green-600); }
.phase h3{ margin:12px 0 10px; font-size:18px; }
.phase p{ font-size:14.5px; color:var(--text-muted); }

/* ---------- Capability panels (expertise) ---------- */
.cap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cap{
  background:var(--surface-card); border:1px solid var(--border-hairline);
  border-top:2px solid var(--ink-900); border-radius:var(--radius-xs); padding:34px 32px;
}
.cap .eyebrow{ margin-bottom:10px; }
.cap h3{ font-family:var(--font-serif); font-weight:400; font-size:25px; margin-bottom:14px; }
.cap p{ font-size:15.5px; color:var(--text-muted); }
.cap ul{ margin:16px 0 0; padding:0; list-style:none; }
.cap li{
  padding:11px 0; border-top:1px solid var(--border-hairline); font-size:15px;
  display:flex; gap:12px; align-items:baseline;
}
.cap li::before{
  content:"+"; color:var(--green-500); flex:none; font-family:var(--font-mono);
}

/* Sector detail rows */
.sector-detail{ padding:52px 0; border-top:1px solid var(--border-hairline); }
.sector-detail:first-of-type{ border-top:none; }
.sd-grid{ display:grid; grid-template-columns:5fr 7fr; gap:56px; }
.sd-facts{ margin:26px 0 0; padding:0; list-style:none; border-top:2px solid var(--ink-900); }
.sd-facts li{
  display:flex; justify-content:space-between; gap:18px; padding:12px 0;
  border-bottom:1px solid var(--border-hairline); font-size:14.5px;
}
.sd-facts .k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); padding-top:2px; }
.sd-facts .v{ text-align:right; color:var(--text-strong); font-weight:500; }

/* ---------- Stats row (light) ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; border-top:2px solid var(--ink-900); }
.stat-cell{ padding:22px 20px 0 0; }
.stat-fig{
  font-family:var(--font-serif); font-size:clamp(30px,3vw,42px); color:var(--text-strong);
  font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
}
.stat-lbl{
  margin-top:6px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted);
}

/* ---------- Ledger tables ---------- */
.ledger-tools{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  flex-wrap:wrap; margin-bottom:22px;
}
.ledger-filter{
  flex:1; min-width:240px; max-width:420px; display:flex; align-items:center; gap:10px;
  border:1px solid var(--border-default); border-radius:var(--radius-sm);
  background:var(--surface-card); padding:11px 14px;
}
.ledger-filter input{
  border:none; outline:none; background:transparent; width:100%;
  font-family:var(--font-sans); font-size:15px; color:var(--text-strong);
}
.ledger-filter svg{ flex:none; color:var(--text-muted); }
.ledger-count{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted);
}
.ledger-wrap{ overflow-x:auto; border:1px solid var(--border-hairline); border-radius:var(--radius-xs); background:var(--surface-card); }
table.ledger{ width:100%; border-collapse:collapse; min-width:640px; table-layout:fixed; }
/* Fixed column widths so the Location column lines up across all four ledgers */
.ledger th:nth-child(1){ width:84px; }
.ledger th:nth-child(3){ width:220px; }
.ledger th:nth-child(4){ width:112px; }
.ledger td{ overflow-wrap:break-word; }
.ledger caption{ text-align:left; padding:18px 20px 6px; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.ledger th{
  text-align:left; font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
  padding:14px 20px; border-bottom:2px solid var(--ink-900); white-space:nowrap;
}
.ledger td{
  padding:11px 20px; border-bottom:1px solid var(--border-hairline);
  font-size:14.5px; color:var(--text-body);
}
.ledger td.num{ font-family:var(--font-mono); font-size:13.5px; font-variant-numeric:tabular-nums; text-align:right; }
.ledger th.num{ text-align:right; }
.ledger tr:last-child td{ border-bottom:none; }
.ledger tbody tr:hover{ background:var(--paper); }
.ledger .proj-name{ color:var(--text-strong); font-weight:500; }
.ledger tfoot td{
  font-family:var(--font-mono); font-size:13px; padding:14px 20px; color:var(--text-strong);
  border-top:2px solid var(--ink-900); background:var(--paper);
}

/* ---------- Leadership ---------- */
.leader{
  display:grid; grid-template-columns:4fr 8fr; gap:56px; align-items:start;
  background:var(--surface-card); border:1px solid var(--border-hairline);
  border-top:2px solid var(--ink-900); border-radius:var(--radius-xs); padding:44px;
}
.leader-name{ font-family:var(--font-serif); font-weight:400; font-size:30px; color:var(--text-strong); }
.leader-role{
  margin-top:8px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--green-600);
}
.leader-creds{ margin-top:22px; padding-top:16px; border-top:1px solid var(--border-hairline);
  font-family:var(--font-mono); font-size:12.5px; line-height:2; color:var(--text-muted); }
.leader-bio p{ font-size:16px; }

/* Heritage figures */
.heritage-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.heritage-card{
  background:var(--surface-card); border:1px solid var(--border-hairline);
  border-radius:var(--radius-xs); padding:28px 28px 24px;
}
.heritage-card .gen{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-subtle);
}
.heritage-card h3{ margin:12px 0 4px; font-family:var(--font-serif); font-weight:400; font-size:22px; }
.heritage-card .hc-role{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green-600); display:block; margin-bottom:12px;
}
.heritage-card p{ font-size:14.5px; color:var(--text-muted); }

/* ---------- Family of companies ---------- */
.family-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.family-card{
  display:block; background:var(--surface-card); border:1px solid var(--border-hairline);
  border-radius:var(--radius-xs); padding:32px; color:var(--text-body);
  transition:transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.family-card:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.family-card h3{ font-family:var(--font-serif); font-weight:400; font-size:23px; }
.family-card .fc-role{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green-600); display:block; margin:8px 0 14px;
}
.family-card p{ font-size:15px; color:var(--text-muted); }
.family-card .tlink{ display:inline-block; margin-top:16px; }

/* ---------- CTA band ---------- */
.band{ background:var(--surface-ink); padding:84px 0; }
.band-inner{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.band h2{ color:var(--paper); max-width:18ch; }
.band p{ color:var(--green-200); margin-top:14px; max-width:52ch; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:5fr 7fr; gap:64px; }
.contact-facts{ margin:34px 0 0; padding:0; list-style:none; }
.contact-facts li{ padding:16px 0; border-top:1px solid var(--border-hairline); }
.contact-facts .k{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-muted); display:block; margin-bottom:5px;
}
.contact-facts .v{ font-size:16px; color:var(--text-strong); }
.form-field{ margin-bottom:22px; }
.form-field label{
  display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:8px;
}
.form-field input,.form-field textarea,.form-field select{
  width:100%; padding:13px 14px; font-family:var(--font-sans); font-size:16px; color:var(--text-strong);
  background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px rgba(63,107,79,.15);
}
.form-field textarea{ resize:vertical; min-height:140px; }
.form-hint{ font-size:13.5px; color:var(--text-muted); margin-top:18px; }
.cf-hp{ display:none; }

/* ---------- Footer ---------- */
footer{ background:var(--surface-ink); color:var(--green-200); padding:64px 0 0; }
.foot-grid{ display:grid; grid-template-columns:4fr 2fr 3fr 3fr; gap:40px; padding-bottom:52px; }
.foot-brand .lockup-name{ color:var(--paper); }
.foot-brand .lockup-sub{ color:var(--green-300); }
.foot-tag{ margin-top:18px; font-size:14.5px; color:var(--green-200); opacity:.85; max-width:30ch; }
.foot-h{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--green-300); margin:6px 0 16px;
}
footer a{ display:block; color:var(--green-200); padding:5px 0; font-size:15px; }
footer a:hover{ color:var(--paper); }
.foot-addr{ font-style:normal; font-size:15px; line-height:1.8; }
.foot-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--border-on-ink); padding:22px var(--gutter);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--green-300);
}
.foot-bottom{ max-width:var(--container); margin:0 auto; }

/* ---------- Utility grids ---------- */
.grid-3{ grid-template-columns:repeat(3,1fr); }
/* grid-5 was referenced by the five-phase process grid but never defined, so
   Phase 05 wrapped onto a second row (fixed July 5). Five across on desktop;
   slightly tightened on narrow desktops; mobile stacking rules unchanged. */
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1100px) and (min-width:821px){
  .grid-5 .phase{ padding-left:16px; }
  .grid-5 .phase h3{ font-size:16px; }
  .grid-5 .phase p{ font-size:13.5px; }
}
.roster-cols{
  columns:3; column-gap:40px; font-family:var(--font-mono); font-size:13.5px;
  line-height:2.3; color:var(--text-muted);
}

/* ---------- Reveal motion ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); }
.reveal.in{ opacity:1; transform:none; }
.stagger > *{ opacity:0; transform:translateY(14px); transition:opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); }
.stagger.in > *{ opacity:1; transform:none; }
.stagger.in > *:nth-child(2){ transition-delay:70ms; }
.stagger.in > *:nth-child(3){ transition-delay:140ms; }
.stagger.in > *:nth-child(4){ transition-delay:210ms; }
.stagger.in > *:nth-child(5){ transition-delay:280ms; }
.stagger.in > *:nth-child(6){ transition-delay:350ms; }
.stagger.in > *:nth-child(7){ transition-delay:420ms; }
.stagger.in > *:nth-child(8){ transition-delay:490ms; }
.stagger.in > *:nth-child(9){ transition-delay:560ms; }
.stagger.in > *:nth-child(10){ transition-delay:630ms; }
.stagger.in > *:nth-child(11){ transition-delay:700ms; }
.stagger.in > *:nth-child(12){ transition-delay:770ms; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal,.stagger > *{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .btn,.sector,.proj-card,.family-card{ transition:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px){
  .split,.split-even,.sd-grid{ grid-template-columns:1fr; gap:36px; }
  .proj-grid{ grid-template-columns:1fr 1fr; }
  .process-grid{ grid-template-columns:1fr 1fr; }
  .phase{ padding-left:0; border-right:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .leader{ grid-template-columns:1fr; gap:28px; padding:34px; }
  .contact-grid{ grid-template-columns:1fr; gap:44px; }
}
@media (max-width: 820px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:block; }
  .topbar-inner{ height:68px; }
  .hero-content{ padding-top:96px; padding-bottom:64px; }
  .datum-grid{ grid-template-columns:1fr 1fr; }
  .datum{ border-left:none; padding-left:0; border-top:1px solid var(--border-on-ink); }
  .datum:nth-child(-n+2){ border-top:none; }
  .datum:nth-child(even){ padding-left:20px; border-left:1px solid var(--border-on-ink); }
  .sector-grid,.cap-grid,.heritage-grid,.family-grid,.grid-3{ grid-template-columns:1fr; }
  .roster-cols{ columns:2; }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .page-hero{ padding:150px 0 92px; }
  .section{ padding:72px 0; }
}
@media (max-width: 560px){
  .proj-grid,.process-grid{ grid-template-columns:1fr; }
  .roster-cols{ columns:1; }
  .foot-grid{ grid-template-columns:1fr; gap:28px; }
  .band-inner{ flex-direction:column; align-items:flex-start; }
  .datum-grid{ grid-template-columns:1fr 1fr; }
  .lockup-sub{ display:none; }
}

/* ---------- Real-project photography (third draft) ---------- */
.hero-photo{
  position:absolute; inset:0; z-index:1;
  background-size:cover; background-position:center;
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(97deg,
    rgba(20,32,27,.95) 0%, rgba(20,32,27,.88) 36%,
    rgba(20,32,27,.66) 72%, rgba(20,32,27,.46) 100%);
}
.hero-content{ z-index:2; }
/* Lightened per punch list v2 so the photo reads clearly; text sits left,
   so the gradient stays darkest there and opens up across the frame. */
.page-hero .hero-photo::after{
  background:linear-gradient(97deg,
    rgba(20,32,27,.88) 0%, rgba(20,32,27,.62) 42%,
    rgba(20,32,27,.28) 100%);
}
/* Projects hero (punch list v3): the 790px source magnifies on wide screens,
   so bias the crop upward to keep the roofline and entrance in frame instead
   of centering on the driveway. A wider original remains the ideal fix; the
   slot is logged in assets/img/SAVE-THESE-IMAGES.md. */
.hp-projects{ background-position:center 33%; }
/* About hero (final pass): this page has no lede paragraph, so the hero
   rendered shorter than the Expertise and homepage heroes. Extra bottom
   padding lets the photo run to a matching height. */
.page-hero--about{ padding-bottom:234px; }
@media (max-width: 820px){
  .page-hero--about{ padding-bottom:180px; }
}

/* Mobile hero variants: ~70-100KB files served under 820px instead of the
   full-size desktop heroes (mobile data + LCP optimization) */
@media (max-width: 820px){
  .hp-home{ background-image:url('../assets/img/hero-kings-harbor-mobile.jpg') !important; }
  .hp-expertise{ background-image:url('../assets/img/expertise-hero-mobile.jpg') !important; }
  .hp-projects{ background-image:url('../assets/img/projects-hero-mobile.jpg') !important; }
  .hp-about{ background-image:url('../assets/img/about-hero-mobile.jpg') !important; }
}

/* Project-name notation on hero photos: real LEF projects, not stock art */
.hero-photo-label{
  position:absolute; right:16px; bottom:12px; z-index:3;
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(245,247,242,.8); background:rgba(20,32,27,.52);
  padding:5px 10px; border-radius:var(--radius-xs);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  pointer-events:none; max-width:calc(100% - 32px);
}
/* Homepage hero: keep the label above the datum strip */
.hero-photo-label--raised{ bottom:128px; }
@media (max-width: 820px){
  .hero-photo-label--raised{ bottom:198px; }
  .hero-photo-label{ font-size:9.5px; right:12px; }
}

/* Photo layer inside project cards: covers the line art when present,
   falls back to the drawing if the image file is absent. */
.proj-photo{
  position:absolute; inset:0; z-index:1;
  background-size:cover; background-position:center;
}

/* Text-only project card (no art panel) */
.proj-card--text .proj-body{ padding-top:26px; }
.proj-ref{
  display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-subtle);
  border-bottom:1px solid var(--border-hairline); padding-bottom:12px; margin-bottom:14px;
}