/* ==========================================================================
   Equity Development Group + Comet Construction
   Quiet, text-forward, left-aligned. Structure comes from a consistent
   measure and a small set of hairlines rather than from cards and shadows.
   Type is the system UI stack, so nothing downloads and nothing reflows.
   One light theme only: the page is white whatever the viewer's OS is set to.
   ========================================================================== */

/* ---------- Tokens: light ---------- */
:root {
  --ground:      #FFFFFF;
  --ground-deep: #F6F6F4;
  --panel:       #FFFFFF;
  --ink:         #191A1C;
  --ink-soft:    #3D4045;
  --muted:       #6B6E73;
  --line:        #DEDEDB;
  --line-soft:   #ECECE9;

  --brand:       #172A63;   /* Comet navy */
  --link:        #1B3E8F;
  --link-hover:  #2A56BC;
  --on-brand:    #FFFFFF;

  --green:       #0D3827;   /* Equity Development Group */
  --green-link:  #14512F;
  --green-hover: #1A6339;
  --green-wash:  #EEF3EF;

  --bar:         #16295F;
  --bar-ink:     #FFFFFF;
  --bar-rule:    #2E7D52;
  --green-band:  #0D3827;

  --dark:        #1B1C1E;
  --dark-ink:    #F2F2F0;
  --dark-muted:  #A6A8AB;
  --dark-line:   #35373A;

  --sig:         #8A5906;
  --sig-wash:    rgba(199, 126, 18, 0.12);

  --ff: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

  /* a restrained scale: nothing here is a poster */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.1875rem;
  --fs-lg:   clamp(1.25rem, 1.204rem + 0.19vw, 1.375rem);   /* h3      20 -> 22 */
  --fs-2xl:  clamp(1.6875rem, 1.386rem + 1.238vw, 2.5rem);   /* h2      27 -> 40 */
  --fs-3xl:  clamp(2rem,      1.536rem + 1.905vw, 3.25rem);  /* page h1 32 -> 52 */
  --fs-hero: clamp(2.5rem,    1.757rem + 3.048vw, 4.5rem);   /* hero    40 -> 72 */

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 5.5rem;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.25rem);
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 6px;
  --radius: var(--r);
}

/* The site is deliberately one light theme. A viewer's dark mode does not
   repaint it: the header stays brand navy, the page stays white. Every colour
   below is stated explicitly so nothing is inherited from the host. */
:root { color-scheme: light; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ff);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--link); text-decoration: none; }
/* Baymard: a link must be told apart by more than colour. Inline links and
   contact rows carry a hairline underline; nav, buttons and cards do not. */
.prose a, .lede a, .person-contact a, .contact-lines a, .footer-links a, .form-note a, .member-body a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.prose a:hover, .person-contact a:hover, .contact-lines a:hover, .footer-links a:hover, .form-note a:hover, .member-body a:hover { text-decoration-color: currentColor; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}
/* Display sizes need tighter tracking and leading than body copy, or large
   type drifts apart and reads soft. */
h1 { font-size: var(--fs-3xl); line-height: 1.06; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-2xl); line-height: 1.1;  letter-spacing: -0.02em; }
h3 { font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 700px; }

.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--sp-2); }
.stack-3 { gap: var(--sp-3); }
.stack-4 { gap: var(--sp-4); }
.stack-5 { gap: var(--sp-5); }
.stack-6 { gap: var(--sp-6); }
.stack-7 { gap: var(--sp-7); }

.section { padding-block: clamp(3rem, 6vw, var(--sp-9)); }
.section-tight { padding-block: clamp(2rem, 4vw, var(--sp-6)); }
.section-rule { border-top: 1px solid var(--line); }
.section-grey { background: var(--ground-deep); }

.lede { font-size: var(--fs-md); line-height: 1.5; color: var(--muted); max-width: 52ch; }
.prose { color: var(--ink-soft); max-width: 62ch; }
.prose p + p { margin-top: var(--sp-4); }
.muted { color: var(--muted); }

/* ---------- Section heads ---------- */
.eyebrow {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--link);
  display: block;
}
.eyebrow-plain { color: var(--muted); }
.eyebrow-green { color: var(--green-link); }
.on-field .eyebrow { color: var(--dark-muted); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 54ch;
  margin-bottom: var(--sp-7);
}
.section-head .lede { max-width: 54ch; }
/* centring is reserved for the two short closing bands */
.section-head-center { margin-inline: auto; text-align: center; align-items: center; max-width: 46ch; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--link);
  --btn-fg: var(--on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: .6rem 1.25rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--fs-base);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.btn:hover { background: var(--link-hover); color: var(--btn-fg); text-decoration: none; }
.btn .arw { transition: transform .16s ease; }
.btn:hover .arw { transform: translateX(3px); }
.btn-signal { --btn-bg: var(--link); --btn-fg: var(--on-brand); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--link);
  padding: .6rem .25rem;
  font-weight: 400;
}
.btn-ghost:hover { background: transparent; color: var(--link-hover); text-decoration: underline; text-underline-offset: 4px; }
.on-field .btn-ghost { --btn-fg: var(--dark-ink); }
.on-green .btn-ghost { --btn-fg: #FFFFFF; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); }
@media (prefers-reduced-motion: reduce) { .btn, .btn .arw { transition: none; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bar);
  color: var(--bar-ink);
  border-bottom: 2px solid var(--bar-rule);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 64px;
}

/* the lockup is two marks and two destinations */
.brand { display: inline-flex; align-items: center; gap: clamp(.7rem, 1.5vw, 1.1rem); flex: none; }
.brand-part { display: inline-flex; align-items: center; text-decoration: none; border-radius: 3px; position: relative; }
/* a 44px hit area around a 15 to 32px logo, without changing its drawn size */
.brand-part::after { content: ""; position: absolute; inset: -15px -6px; }
.brand-part:hover { text-decoration: none; opacity: .8; }
.brand-part img { display: block; width: auto; }
.brand-edg   { height: 27px; aspect-ratio: 258 / 56; }
.brand-comet { height: 38px; aspect-ratio: 283 / 91; }

/* navy header takes the reversed lockup, light footer takes the positive one */
.site-header .brand-logo-pos { display: none; }
.site-header .brand-logo-rev { display: block; }
.site-footer .brand-logo-rev { display: none; }
.site-footer .brand-logo-pos { display: block; }
.site-footer .brand-edg   { height: 24px; }
.site-footer .brand-comet { height: 34px; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.9rem); }
.nav a {
  font-size: var(--fs-sm);
  color: var(--bar-ink);
  text-decoration: none;
  padding-block: 1rem;
  opacity: .8;
  border-bottom: 2px solid transparent;
  transition: opacity .16s ease, border-color .16s ease;
}
.nav a:hover { opacity: 1; color: var(--bar-ink); text-decoration: none; }
.nav a[aria-current="page"] { opacity: 1; font-weight: 600; border-bottom-color: var(--bar-rule); }

.header-actions { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.header-phone {
  font-size: var(--fs-sm);
  color: var(--bar-ink);
  opacity: .8;
  white-space: nowrap;
  display: inline-block;
  padding-block: 6px;
  min-height: 26px;
}
.header-phone:hover { color: var(--bar-ink); opacity: 1; text-decoration: none; }
.header-actions .btn { min-height: 44px; padding: .5rem 1rem; font-size: var(--fs-sm); }
.site-header .btn-signal { --btn-bg: #FFFFFF; --btn-fg: var(--bar); }
.site-header .btn-signal:hover { background: #E4EAF7; color: var(--bar); }
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 0; color: var(--bar-ink); cursor: pointer;
}
.nav-cta { display: none; }

@media (max-width: 1120px) {
  .nav {
    position: fixed;
    inset: 66px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bar);
    border-bottom: 2px solid var(--bar-rule);
    padding: var(--sp-2) var(--gutter) var(--sp-6);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: var(--sp-4) 0; border-bottom: 1px solid rgba(255,255,255,.15); font-size: var(--fs-md); }
  .nav .nav-cta { display: inline-flex; justify-content: center; margin-top: var(--sp-5); border-bottom: 0; background: #FFFFFF; color: var(--bar); min-height: 48px; }
  .nav .nav-cta:hover, .nav .nav-cta:focus-visible { background: #E8ECF7; color: var(--bar); }
  .nav .nav-cta[aria-current="page"] { border-bottom: 0; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 1280px) { .header-phone { display: none; } }
@media (max-width: 640px) {
  /* The whole point of this site is getting on bid lists, so one tappable
     action stays visible at every width rather than hiding behind the menu.
     The lockup gives up the room for it. */
  .header-actions .btn { padding: .5rem .65rem; font-size: var(--fs-xs); min-height: 44px; }
  .header-actions { gap: var(--sp-2); }
  .header-inner { gap: var(--sp-3); }
  .brand { gap: .45rem; }
  .brand-edg { height: 18px; }
  .brand-comet { height: 26px; }
}
@media (max-width: 400px) {
  /* Tightest case. Both marks stay: hiding one company's logo on phones is a
     brand decision, not a layout one, so the type shrinks instead. */
  .header-actions .btn { padding: .5rem .5rem; letter-spacing: -0.01em; }
  .brand-edg { height: 15px; }
  .brand-comet { height: 22px; }
  .brand { gap: .35rem; }
  .nav-toggle { margin-left: 0; }
}

/* ---------- Split: media left, words right ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.split-wide { grid-template-columns: 1.1fr .9fr; }
.split-copy { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.split-copy .lede, .split-copy .prose { max-width: 48ch; }
@media (max-width: 880px) {
  .split, .split-wide { grid-template-columns: 1fr; gap: var(--sp-5); }
  .split-media { order: -1; }
}

/* Photo fills the row height instead of floating in the middle of it. Used
   where the copy column is tall enough that a fixed-ratio image leaves a
   band of empty page above and below it. */
@media (min-width: 881px) {
  .split-fill { align-items: stretch; }
  .split-fill .split-media { display: flex; }
  .split-fill .shot { flex: 1 1 auto; min-height: 340px; }
  .split-fill .shot::before { padding-top: 0; }
  .split-fill .split-copy { justify-content: center; }
}

/* A lead block: short heading on the left, the argument on the right. The
   heading is set larger and the column narrower so the left side does not
   read as an empty quarter of the page. */
.split-lead { grid-template-columns: .85fr 1.15fr; align-items: start; }
.split-lead .split-copy h2 { font-size: var(--fs-2xl); max-width: 18ch; }
.split-lead .split-copy { padding-top: 2px; }
@media (max-width: 880px) { .split-lead { grid-template-columns: 1fr; } }

/* Centered text block, for a section that carries no photograph. */
.centered {
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
}
.centered .prose { max-width: 56ch; }

/* ---------- Hero ---------- */
.hero { background: var(--ground); padding-block: clamp(2.25rem, 5vw, 3.75rem) 0; }
.hero h1 { font-size: var(--fs-hero); max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero-lede { font-size: var(--fs-md); line-height: 1.5; color: var(--muted); max-width: 50ch; }
.hero .btn-row { margin-top: var(--sp-2); }
.trajectory { display: none; }

/* ---------- Stat rail ---------- */
.stat-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-top: clamp(2.25rem, 5vw, var(--sp-7));
  padding-top: clamp(2rem, 4vw, var(--sp-6));
  border-top: 1px solid var(--line);
}
.stat-rail > div { display: flex; flex-direction: column; gap: var(--sp-1); }
/* A five-figure rail, so the fifth does not sit alone on a second row. */
.stat-rail-5 { grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, var(--sp-5)); }
@media (max-width: 1080px) { .stat-rail-5 { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-6); } }
.stat-n {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-l { font-size: var(--fs-sm); color: var(--muted); max-width: 20ch; }
@media (max-width: 760px) { .stat-rail { grid-template-columns: 1fr 1fr; row-gap: var(--sp-6); } }

/* ---------- Dark and green bands ---------- */
.on-field { background: var(--dark); color: var(--dark-ink); }
.on-field h1, .on-field h2, .on-field h3 { color: var(--dark-ink); }
.on-field p, .on-field .lede, .on-field .prose { color: var(--dark-muted); }

.on-green { background: var(--green-band); color: #E4EEE8; }
.on-green h1, .on-green h2, .on-green h3 { color: #FFFFFF; }
.on-green p, .on-green .lede, .on-green .prose { color: #BCD3C4; }
.on-green .eyebrow { color: #8FD9AE; }
.on-green .btn-signal { --btn-bg: #FFFFFF; --btn-fg: var(--green-band); }
.on-green .btn-signal:hover { background: #E3F0E8; color: var(--green-band); }
.on-green .fill { color: #F0BC5E; }
.on-field .fill { color: #F0BC5E; }

.tone-green { --link: var(--green-link); --link-hover: var(--green-hover); }
.section-green { background: var(--green-wash); }

/* ---------- Brand marquee ---------- */
/* A full-bleed white band sitting directly under the hero. No heading, no
   container and no fade at the ends: the row is cut hard by the viewport so it
   reads as a line longer than the screen rather than a widget on the page. */
.brandstrip {
  background: var(--ground);
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(1.5rem, 3.2vw, 2.5rem);
  overflow: hidden;
}
.marquee { position: relative; overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 54s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-run {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-right: clamp(2.5rem, 6vw, 5rem);
  flex: none;
}
.brandstrip .name {
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.375rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
/* A supplied wordmark sits on the same optical line as a typeset name. */
.brandstrip .brand-logo {
  display: block;
  height: clamp(20px, 2.1vw, 30px);
  width: auto;
  flex: none;
}
.brandstrip .sep { display: none; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-25%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { padding-inline: var(--gutter); }
  .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee-run:not(:first-child) { display: none; }
  .marquee-run { flex-wrap: wrap; justify-content: center; row-gap: 1.25rem; padding-right: 0; }
}

/* ---------- Photographs ---------- */
.shot {
  position: relative;
  overflow: hidden;
  background-color: var(--ground-deep);
  border-radius: var(--r);
}
.shot::before { content: ""; display: block; padding-top: var(--ratio, 66.67%); }
/* A hairline so a pale image — a drawing, a bright sky — still has an edge. */
.shot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.shot img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot-4x3  { --ratio: 75%; }
.shot-3x2  { --ratio: 66.67%; }
.shot-16x9 { --ratio: 56.25%; }
.shot-1x1  { --ratio: 100%; }
.shot-tall { --ratio: 125%; }

.shot.is-empty img { visibility: hidden; }
/* An empty slot has no <img> inside it, so it needs its own ground. */
.shot.is-empty { background: var(--ground-deep); }
.shot.is-empty::after {
  content: attr(data-slot);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  padding: var(--sp-5);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: pre-line;
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: clamp(1.5rem, 3vw, var(--sp-6)); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
@media (max-width: 940px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Sectors and projects: image, then words. No card chrome. ---------- */
.sector, .project {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  color: inherit;
  text-decoration: none;
  background: none;
  border-radius: 0;
  padding: 0;
}
.sector:hover, .project:hover { color: inherit; text-decoration: none; }
.sector h3, .project-body h3 { font-size: var(--fs-lg); }
.sector p, .project-desc { color: var(--muted); }
.project-desc { font-size: var(--fs-sm); line-height: 1.5; }
.sector .kicker, .project-tag { font-size: var(--fs-sm); font-weight: 600; color: var(--link); }
.project-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0; }
.project-body .project-desc { margin-top: var(--sp-1); }

.sector ul { margin: var(--sp-1) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.sector li { font-size: var(--fs-sm); color: var(--muted); }
.sector li + li::before { content: "· "; color: var(--line); }

.sector:hover h3, .project:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Feature list ---------- */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) clamp(2rem, 5vw, var(--sp-8)); }
.feature { display: flex; flex-direction: column; gap: var(--sp-2); }
.feature h3 { font-size: var(--fs-md); }
.feature p { color: var(--dark-muted); }
.feature .ico { display: none; }
@media (max-width: 720px) { .features { grid-template-columns: 1fr; } }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 3vw, var(--sp-7)); }
.step { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line); background: none; border-radius: 0; }
.step-n { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.step h3 { font-size: var(--fs-md); }
.step p { color: var(--muted); font-size: var(--fs-sm); }
.on-green .step p, .on-green .step h3 { color: inherit; }
.on-green .step p { color: #BCD3C4; }
.on-field .step p { color: var(--dark-muted); }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.arc { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.25rem, 2.5vw, var(--sp-5)); }
@media (max-width: 1000px) { .arc { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .arc { grid-template-columns: 1fr; } }
.arc .step { border-top-color: rgba(255,255,255,.28); }
.arc .step h3 { font-size: var(--fs-base); }
.arc .step-n { color: #8FD9AE; }

/* ---------- Icon flow: a numbered process read left to right ----------
   Real text, not a picture of text, so it is searchable, readable by a screen
   reader, and it reflows on a phone instead of shrinking to nothing. */
.flow {
  margin-top: clamp(2rem, 4vw, var(--sp-7));
  display: grid;
  grid-template-columns: repeat(var(--flow-n, 4), 1fr);
  gap: clamp(1rem, 2.5vw, var(--sp-6));
  align-items: start;
}
@media (max-width: 1000px) { .flow { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-6); } }
@media (max-width: 560px)  { .flow { grid-template-columns: 1fr; } }
.flow-step { display: flex; flex-direction: column; gap: var(--sp-3); position: relative; }
.flow-icon {
  width: 52px; height: 52px; flex: none;
  border-radius: 50%;
  background: var(--green);
  display: grid; place-items: center;
}
.flow-icon svg { width: 24px; height: 24px; stroke: #FFFFFF; fill: none; stroke-width: 1.6; }
.flow-h {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.flow-step p { color: var(--muted); font-size: var(--fs-sm); margin: 0; max-width: 34ch; }
/* the chevron between steps, drawn only where two steps sit side by side */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 26px; right: calc(clamp(1rem, 2.5vw, var(--sp-6)) / -2 - 4px);
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--line);
  border-right: 1.5px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 560px) { .flow-step::after { display: none !important; } }
/* on a green ground the discs invert so they stay visible */
.on-green .flow-icon, .section-green .flow-icon { background: #FFFFFF; }
.on-green .flow-icon svg, .section-green .flow-icon svg { stroke: var(--green); }
.on-green .flow-h { color: #FFFFFF; }
.on-green .flow-step p { color: #BCD3C4; }
.section-green .flow-h { color: var(--ink); }

/* ---------- Full-bleed band photograph ---------- */
.band-photo { margin-top: clamp(2.5rem, 5vw, var(--sp-8)); }
.band-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
}

/* ---------- Two-company cards ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, var(--sp-7)); }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } }
.duo-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--accent, var(--link));
  background: none;
  border-radius: 0;
}
.duo-card.is-development { --accent: var(--green-link); }
.duo-card.is-construction { --accent: var(--link); }
.duo-card h3 { font-size: var(--fs-lg); }
/* The house mark sits where the role label used to. The logo IS the label,
   so it gets the same rule underneath the text version had. */
.card-logo-wrap {
  display: flex;
  align-items: center;
  height: 52px;                 /* fixed, so both cards rule at the same place */
  box-sizing: content-box;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
}
/* Each mark is sized on its own so the two read as equal weight; centring in
   the fixed row is what puts them on the same level. */
.card-logo { width: auto; }
.card-logo-edg   { height: 30px; }
.card-logo-comet { height: 44px; }

/* One step up from h2, for the two headers that carry a whole page. */
/* A promoted h2. Capped below the inner-page h1 (52px) so a subhead can never
   outrank the page title, which it did on five pages. */
.h-xl {
  font-size: clamp(1.875rem, 1.504rem + 1.524vw, 2.875rem);  /* 30 -> 46 */
  letter-spacing: -0.025em;
  line-height: 1.06;
}
.duo-card .duo-role { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.duo-card p { color: var(--muted); }
.duo-card ul { margin: var(--sp-1) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.duo-card li { color: var(--ink-soft); font-size: var(--fs-base); }
.duo-card .btn-ghost { --btn-fg: var(--accent); align-self: flex-start; padding-left: 0; margin-top: var(--sp-1); }
.duo-card .footer-links a { color: var(--accent); font-size: var(--fs-base); }
.duo-card .footer-links a:hover { color: var(--ink); }

/* ---------- Coverage ---------- */
.coverage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: var(--sp-3) var(--sp-5); }
.coverage-grid div { color: var(--ink-soft); font-size: var(--fs-base); }

/* ---------- Leadership ---------- */
/* Multi-column, not grid: a grid gives every cell in a row the height of the
   tallest bio, so a short entry leaves a block of white under it. Columns let
   each entry take only the height it needs and the next one close up behind. */
.roster { columns: 2; column-gap: clamp(2rem, 5vw, var(--sp-8)); }
.roster .person { break-inside: avoid; page-break-inside: avoid; margin-bottom: var(--sp-7); }
@media (max-width: 760px) { .roster { columns: 1; } }
.person { display: flex; flex-direction: column; gap: var(--sp-2); }
.person h3 { font-size: var(--fs-md); }
.person .role { font-size: var(--fs-sm); font-weight: 600; color: var(--link); }
.person p { color: var(--muted); max-width: 46ch; }
.person-contact { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-1); }
.person-contact a { font-size: var(--fs-sm); display: inline-flex; align-items: center; padding-block: 10px; min-height: 44px; }
.contact-lines a { display: inline-flex; align-items: center; padding-block: 10px; min-height: 44px; }

/* ---------- Closing band ---------- */
.cta-band { background: var(--ground-deep); border-top: 1px solid var(--line); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-size: var(--fs-sm); color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: var(--ff);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .7rem .85rem;
  width: 100%;
  min-height: 46px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--link);
  outline-offset: 1px;
  border-color: transparent;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.form-note { font-size: var(--fs-sm); color: var(--muted); }

.contact-grid {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: clamp(2rem, 5vw, var(--sp-8));
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Placeholder markers ---------- */
.fill {
  color: var(--sig);
  background: var(--sig-wash);
  border-radius: 3px;
  padding: 0 3px;
  overflow-wrap: anywhere;
}

/* ---------- Page head ---------- */
.page-head {
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(1.75rem, 3.5vw, 2.5rem);
}
.page-head h1 { font-size: var(--fs-3xl); max-width: 20ch; margin-top: var(--sp-2); }
.page-head h1 em { font-style: normal; color: var(--brand); }
.page-head .lede { margin-top: var(--sp-4); }

/* Tinted page heads. A page that opens on plain white text has nothing to
   hold the eye, so each section head sits on its own ground: grey for the
   shared pages, the green wash for development, a photograph for
   construction. */
.page-head-grey { background: var(--ground-deep); border-bottom-color: var(--line); }
.page-head-green { background: var(--green-wash); border-bottom-color: #D3E1D7; }
.page-head-green h1 em { color: var(--green); }

.page-head-media {
  background: var(--ground-deep);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.page-head-media h1 { margin-top: 0; max-width: 19ch; }
.page-head-media .lede { margin-top: 0; }
.page-head-media .split-copy { gap: var(--sp-3); }
@media (min-width: 881px) { .page-head-media .split-wide { grid-template-columns: .95fr 1.05fr; } }
.page-head-media .shot { border-radius: var(--r); }

/* Three facts under the page-head headline. Not a stat rail: no rules, no
   boxes, just a row of figures so the block has a base. Fixed thirds so a
   long label never pushes the third fact onto its own line. */
.factline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4) clamp(1rem, 2vw, var(--sp-5));
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  width: 100%;
}
.factline > div { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 400px) { .factline { gap: var(--sp-3) var(--sp-4); } }
.fact-n {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.fact-l { font-size: var(--fs-xs); color: var(--muted); max-width: 24ch; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ground-deep);
  color: var(--muted);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--line);
  padding-block: var(--sp-7) var(--sp-5);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr .8fr 1fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-top .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }
.footer-h { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-3); }
.footer-links { display: flex; flex-direction: column; gap: 2px; }
.footer-links a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; padding-block: 8px; min-height: 40px; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ---------- Reveal (never hides anything without JS) ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gutter); top: 10px; z-index: 200;
  background: var(--link); color: #fff;
  padding: .6rem 1rem; border-radius: var(--r); font-size: var(--fs-sm);
}

/* ---------- Print ---------- */
@media print {
  :root { --ground: #fff; --ground-deep: #fff; --ink: #000; --ink-soft: #222; --muted: #444; --line: #bbb; }
  .site-header, .nav, .btn, .marquee, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .on-field, .on-green, .site-footer, .cta-band, .page-head { background: #fff !important; color: #000 !important; }
  .on-field *, .on-green *, .site-footer * { color: #000 !important; }
  .shot { border: 1px solid #ccc; }
  .section { padding-block: 1.2rem; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .project, .feature, .step, .person { break-inside: avoid; }
}

/* ==========================================================================
   Development section
   ========================================================================== */

/* ---------- Sub-nav under a section page head ---------- */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(13, 56, 39, .16);
}
.subnav a {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--green-link);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem 1.05rem;
  border: 1.5px solid rgba(13, 56, 39, .28);
  border-radius: 999px;
  background: var(--ground);
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.subnav a:hover, .subnav a:focus-visible { color: var(--green); border-color: var(--green); background: var(--green-wash); text-decoration: none; }
.subnav a[aria-current="page"] { color: #FFFFFF; background: var(--green); border-color: var(--green); }
.subnav a[aria-current="page"]:hover { color: #FFFFFF; background: var(--green-hover); }
@media (prefers-reduced-motion: reduce) { .subnav a { transition: none; } }

/* ---------- Six- and five-up step rows ---------- */
.steps-6 { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2rem, 4vw, var(--sp-7)); }
.steps-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .steps-5 { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-7); } }
@media (max-width: 880px)  { .steps-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .steps-5, .steps-6 { grid-template-columns: 1fr; } }
.lic {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: .02em;
}

/* ---------- Buying criteria ---------- */
.criteria { margin: 0; display: flex; flex-direction: column; }
.criteria > div {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid rgba(13, 56, 39, .14);
}
.criteria > div:last-child { border-bottom: 1px solid rgba(13, 56, 39, .14); }
.criteria dt { font-size: var(--fs-sm); font-weight: 600; color: var(--green); margin: 0; }
.criteria dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 560px) {
  .criteria > div { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* ---------- The map ---------- */
.map-wrap { display: flex; justify-content: center; }
.devmap { width: 100%; max-width: 480px; height: auto; overflow: visible; }
.map-state {
  fill: var(--ground-deep);
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.map-state.is-live { fill: #DCE8E0; stroke: #A8C4B2; }
.map-pin { cursor: pointer; }
.pin-hit { fill: transparent; }
.pin-dot { fill: var(--green); transition: r .15s ease; }
.map-pin:hover .pin-dot, .map-pin:focus-visible .pin-dot { r: 17; }
.pin-n {
  fill: #FFFFFF;
  font-family: var(--ff);
  font-size: 16px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .pin-dot { transition: none; } }

.map-key { margin: var(--sp-5) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.map-key li { border-top: 1px solid var(--line); }
.map-key a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  min-height: 44px;
  color: var(--ink);
  font-size: var(--fs-sm);
}
.map-key a:hover { color: var(--green-link); }
.key-n {
  flex: none;
  display: grid;
  place-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* ---------- Past job entries ---------- */
.joblist { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, var(--sp-9)); }
.job {
  display: grid;
  grid-template-columns: 1.15fr 1.2fr .85fr;
  gap: clamp(1.5rem, 3vw, var(--sp-7));
  align-items: start;
  scroll-margin-top: 100px;
}
@media (max-width: 1000px) { .job { grid-template-columns: 1fr 1fr; } .job-plan { grid-column: 1 / -1; max-width: 380px; } }
@media (max-width: 680px)  { .job { grid-template-columns: 1fr; } .job-plan { max-width: none; } }
.job-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.job-n { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; color: var(--green-link); }
.job-desc { color: var(--ink-soft); }
.job-facts { margin: var(--sp-1) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.job-facts > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sp-3); }
.job-facts dt { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.job-facts dd { margin: 0; font-size: var(--fs-sm); color: var(--ink); font-weight: 500; }
.job-plan-h {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-3);
}

/* ---------- Team tiles ---------- */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, var(--sp-7)) clamp(1.5rem, 3vw, var(--sp-6));
}
@media (max-width: 940px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team { grid-template-columns: 1fr; } }
.member { display: flex; flex-direction: column; gap: var(--sp-4); }
.member .shot { max-width: 220px; }
.member-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.member h3 { font-size: var(--fs-md); }
.member .role { font-size: var(--fs-sm); font-weight: 600; color: var(--green-link); }
/* On a Comet page the roster is a construction roster, so the role reads navy. */
.team-comet .member .role { color: var(--link); }
.member-years { font-size: var(--fs-sm); color: var(--muted); }
.member-bio { color: var(--ink-soft); font-size: var(--fs-sm); max-width: 48ch; }
.member-notable { font-size: var(--fs-sm); color: var(--muted); max-width: 40ch; }
.member .person-contact { flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }

/* ---------- File input ---------- */
.field input[type="file"] {
  padding: .6rem;
  font-size: var(--fs-sm);
  background: var(--ground-deep);
  cursor: pointer;
}

/* An inline link inside a note still has to be tappable. */
.form-note a { display: inline-block; padding-block: 5px; min-height: 26px; }

/* ==========================================================================
   Select clients
   Modelled on the trifold's "Brands that trust Comet" panel: one brand per
   white card, generous padding, a hairline instead of a shadow, on a grey
   ground so the cards read as objects sitting on the page.
   ========================================================================== */
/* The trifold marks each eyebrow with a small diamond. Same device here, in
   the section's own accent rather than the print piece's orange. */
.eyebrow-mark::before {
  content: "\25C6";
  margin-right: .5em;
  font-size: .8em;
  vertical-align: 1px;
}

/* The client panel's head is a lead-in to the cards, not a page headline:
   keep it to the standard h2 and a tighter gap so the row reads as one unit. */
#clients .section-head { margin-bottom: clamp(1.75rem, 3vw, var(--sp-6)); }

/* Seven pipeline steps with a paragraph each: three across reads better than
   a five-up row, which forced a column too narrow for the copy. */
.steps-3col { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2rem, 4vw, var(--sp-7)); }
@media (max-width: 940px) { .steps-3col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .steps-3col { grid-template-columns: 1fr; } }

/* A job with a site plan and no photograph: the plan takes the media column at
   full width rather than sitting in a narrow third column beside an empty frame. */
.job-noshot { grid-template-columns: 1.05fr 1fr; }
@media (max-width: 680px) { .job-noshot { grid-template-columns: 1fr; } }
.job-noshot .job-media .job-plan-h { margin-bottom: var(--sp-3); }

/* The development footer runs without the brand block, so the contact column
   should not stretch across the whole measure. */
.footer-top-solo { grid-template-columns: minmax(0, 34ch); }

/* The home page closes on a dark band rather than the grey one, so a short
   page still has an anchor at the bottom and is not white all the way down.
   Neutral dark, not navy or green: this band belongs to both companies. */
.cta-band.on-field { background: var(--dark); border-top-color: var(--dark-line); }
.cta-band.on-field .btn-signal { --btn-bg: #FFFFFF; --btn-fg: var(--dark); }
.cta-band.on-field .btn-signal:hover { background: #E6E6E3; color: var(--dark); }

/* The logo and the description in each duo card are both links to that
   company's page, so the whole card reads as one target rather than making
   the reader hunt for the small arrow link at the bottom. */
.card-logo-link { display: inline-flex; border-radius: 3px; }
.card-logo-link:hover { opacity: .78; text-decoration: none; }

.card-desc {
  display: block;
  color: var(--muted);
  text-decoration: none;
}
.card-desc:hover {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

/* ---------- Keyboard focus ----------
   One visible, high-contrast focus ring on every interactive element. The
   navy ring goes white on dark and green grounds so it never disappears. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.brand-part:focus-visible,
.card-desc:focus-visible,
.card-logo-link:focus-visible,
.map-pin:focus-visible,
.subnav a:focus-visible,
.nav a:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  border-radius: 3px;
}
.site-header a:focus-visible,
.site-header button:focus-visible,
.on-field a:focus-visible,
.on-field .btn:focus-visible,
.on-green a:focus-visible,
.on-green .btn:focus-visible { outline-color: #FFFFFF; }
.tone-green a:focus-visible,
.tone-green .btn:focus-visible { outline-color: var(--green-link); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline-offset: 1px; }

/* ---------- Underwriting: supplied graphic at desktop, live text on phones ----
   The graphic bakes its copy in, which is unreadable once the image is narrower
   than about 700px. Below that the HTML version takes over. The two never show
   together, and the live version is what a screen reader and a search engine
   read at every width. */
.uw-graphic { margin: 0; }
.uw-graphic img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.uw-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 720px) {
  .uw-graphic { display: none; }
  .uw-live { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}

/* ---------- Mobile nav: the phone number lives in the panel too ---------- */
.nav-phone { display: none; }
@media (max-width: 880px) {
  .nav-phone { display: block; font-variant-numeric: tabular-nums; }
}

/* ---------- Recent work: four real storefronts, each a link ---------- */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.2vw, var(--sp-6)); }
@media (max-width: 1000px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .work-grid { grid-template-columns: 1fr; } }
.work-card { display: flex; flex-direction: column; gap: var(--sp-2); color: inherit; text-decoration: none; }
.work-card .shot { transition: transform .25s ease; }
.work-card:hover .shot, .work-card:focus-visible .shot { transform: translateY(-3px); }
.work-h { font-weight: 650; margin: var(--sp-2) 0 0; color: var(--ink); }
.work-l { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
@media (prefers-reduced-motion: reduce) { .work-card .shot { transition: none; } .work-card:hover .shot { transform: none; } }

/* ---------- Credentials strip: license, qualifier, reach, tenure ---------- */
.credstrip { background: var(--brand); color: #FFFFFF; }
.credstrip-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); padding-block: var(--sp-5); }
@media (max-width: 940px) { .credstrip-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .credstrip-inner { grid-template-columns: 1fr; } }
.credstrip-inner > div { display: flex; flex-direction: column; gap: 2px; }
.cred-k { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: #B9C6E6; }
.cred-v { font-size: var(--fs-sm); color: #FFFFFF; }

/* page-head with media on a green ground keeps its sub-nav below the split */
.page-head-media .subnav { margin-top: var(--sp-6); }

/* ---------- Hero without a photograph: the words carry the row ---------- */
.hero-solo .split-copy { max-width: 62ch; }
.hero-solo .hero-lede { max-width: 58ch; }

/* ---------- Hero: headline left, argument right ---------- */
.hero-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.hero-aside { padding-bottom: .35rem; }
.hero-aside .hero-lede { max-width: 44ch; }
@media (max-width: 880px) { .hero-row { grid-template-columns: 1fr; align-items: start; gap: var(--sp-5); } }

/* ---------- Section head that uses the whole row ---------- */
.section-head-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; max-width: none; }
.section-head-split .lede, .section-head-split .prose { margin: 0; max-width: 52ch; }
.section-head-split h2 { margin-bottom: 0; }
@media (max-width: 880px) { .section-head-split { grid-template-columns: 1fr; align-items: start; } }

/* ---------- Brand marquee: tracked small caps read as a logo wall, not a sentence ---------- */
.brandstrip .name {
  font-size: clamp(.8125rem, .76rem + .3vw, 1rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Remaining hit areas to 44px ---------- */
.skip { min-height: 44px; display: inline-flex; align-items: center; }
.card-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
.form-note a { display: inline-flex; align-items: center; min-height: 44px; }
.section-head-split .eyebrow { margin-bottom: var(--sp-3); }

/* ---------- Brand row: static, centred, wraps on narrow screens ----------
   Replaces the scrolling marquee. Names show until a logo file lands at
   assets/img/brands/<slug>.svg or .png; then the <img> takes the slot. */
.logo-wall { overflow: visible; }
.logo-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem) 0;
  padding-inline: var(--gutter);
  --cell: 19%;
}
/* every brand gets an equal cell so ten marks fall into even rows of five, four or two */
.logo-row > .brand-logo, .logo-row > .name { flex: 0 0 var(--cell); box-sizing: border-box; }
.logo-row > .brand-logo { object-fit: contain; object-position: center; width: var(--cell); padding-inline: 10px; }
.logo-row > .name { text-align: center; }
@media (max-width: 1000px) { .logo-row { --cell: 25%; } }
@media (max-width: 560px)  { .logo-row { --cell: 50%; } }
.logo-row .sep { display: none; }
.logo-row .brand-logo { display: block;
  /* each mark carries its own height so a 10:1 wordmark and a square tile read as the same weight */
  height: calc(var(--h, 30px) * var(--logo-scale, 1)); }
@media (max-width: 1000px) { .logo-row { --logo-scale: .85; } }
@media (max-width: 560px)  { .logo-row { --logo-scale: .72; } }
/* a square mark reads smaller than a wordmark at the same height, so it gets more */

/* ---------- Home hero stat rail: figure and label centred in each cell ---------- */
.hero .stat-rail > div { align-items: center; text-align: center; }

/* ---------- Home roster: headshot centred above each name ---------- */
.person-photo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4); }
.person-avatar { width: 160px; height: 160px; border-radius: var(--r); object-fit: cover; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.person-body { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; }
.person-body p { max-width: 44ch; }
.person-photo .person-contact { justify-content: center; }
@media (max-width: 420px) { .person-avatar { width: 128px; height: 128px; } }

/* ---------- Typeset names in the logo row sit at the weight of the supplied marks ---------- */
.logo-row .name {
  font-size: calc(1.375rem * var(--logo-scale, 1));
  font-weight: 800; letter-spacing: -0.015em; text-transform: none;
  color: var(--ink); white-space: nowrap; line-height: 1;
}

/* ---------- Hero stat rail breathes before the brand band ---------- */
.hero .stat-rail { padding-bottom: clamp(1.5rem, 3.2vw, 2.5rem); }

/* ---------- Leadership roster reads left to right, row by row ----------
   Multi-column flowed the eight entries down one column then the next, so the
   stated order (Karan, Jordan, Justin, Tyler, Gabriel, Helen, David, Bernard)
   came out scrambled on screen. A grid keeps that order in reading sequence. */
.roster { columns: auto; column-count: auto; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-7) clamp(1.25rem, 2.5vw, var(--sp-6)); align-items: start; }
.roster .person { margin-bottom: 0; }
@media (max-width: 1060px) { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .roster { grid-template-columns: 1fr; } }
.roster .person-body p { max-width: 34ch; }
.roster .person-contact { flex-direction: column; align-items: center; gap: 0; margin-top: 0; }
.split-lead + .duo { margin-top: clamp(2.5rem, 5vw, var(--sp-8)); }

/* ---------- Development stat rail sits close under the sub-nav band ---------- */
.section-tight .stat-rail-5 { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Closing band: sizes in the stylesheet, not inline ---------- */
.h-2xl { font-size: var(--fs-2xl); }
.btn-row-center { justify-content: center; }
.cta-wrap { padding-block: clamp(3rem, 7vw, var(--sp-9)); }