/* ====================================================
   DEFENSE CYBERSECURITY GROUP  |  Global Stylesheet
   Brand: #F0810E orange | #313A4C navy | #FAFAFA bg | #4E4E4E text
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* --- CSS Variables --- */
:root {
  /* Backgrounds */
  --bg:         #FAFAFA;
  --bg-alt:     #F0F2F5;
  --bg-card:    #FFFFFF;
  --bg-dark:    #313A4C;
  --bg-dark2:   #272f3d;

  /* Brand accent */
  --orange:       #F0810E;
  --orange-hover: #d6710c;
  --orange-light: #faa558;
  --orange-bg:    rgba(240,129,14,0.10);
  --orange-border: rgba(240,129,14,0.35);

  /* Text */
  --text:       #313A4C;
  --text-body:  #4E4E4E;
  --text-muted: #6b7280;
  --text-light: #9ca3af;

  /* Borders */
  --border:     #E2E5EA;
  --border-md:  #cdd2da;

  /* In-dark-section text */
  --dark-text:        #F0F4F8;
  --dark-text-muted:  #9aaec4;
  --dark-border:      rgba(255,255,255,0.12);

  --red:    #d94f4f;
  --shadow: 0 2px 12px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.10);

  /* --- Sticky header metrics ---
     One source of truth for the two stacked headers. .nav is fixed at the
     top; .section-nav sticks directly beneath it. Anything that needs to
     clear them — the anchor landing offset, the sub-nav's own top — derives
     from these rather than repeating a hardcoded number. */
  /* Bar height is the single source of truth. --nav-h adds the 1px bottom
     border, which is what everything below the nav actually has to clear.
     Five things were pinned to the old 68px -- body offset, urgency banner,
     sticky section-nav, anchor scroll, hero 100vh -- and two of them were
     hardcoded separately, so they drifted apart the moment the bar moved.
     Change --nav-bar alone now; everything below follows. */
  --nav-bar:      89px;
  --nav-h:        calc(var(--nav-bar) + 1px);
  --subnav-h:     49px;
  /* DERIVED, not hardcoded. This was `118px` with a comment claiming it
     equalled --nav-h + --subnav-h. That was true when the bar was shorter;
     raising --nav-bar to 89px made the real stack 139px, so the value was 21px
     short and .flow-sequence pinned itself UNDER the sub-nav — the process
     pills on consulting.html were clipped by the bar above them.
     Same defect as the hero paddings: a fixed pixel value standing in for a
     variable-height element, correct until the variable moved. */
  --sticky-stack: calc(var(--nav-h) + var(--subnav-h));
  /* Exactly the stack, no breathing room. Any extra here leaves a strip of
     the PREVIOUS section visible between the sub-nav and the target — most
     obvious landing on a .bg-mid section from a white one. */
  --scroll-offset: calc(var(--nav-h) + var(--subnav-h));

  /* Inner-page hero height, shared by all five non-home pages. Sized with
     headroom over the tallest of them (Midwatch) so a font-load fallback or
     a browser metric difference cannot push content past the box. */
  --page-hero-h:  560px;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg);
  color: var(--text-body);
  line-height: 1.7;
  font-size: 16px;
}

img { max-width: 100%; display: block; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-hover); }

/* --- Typography --- */
h1, h2, h3, h4, h5 {
  font-family: 'Oswald', sans-serif;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.7rem); }
h4 { font-size: 1.15rem; }

p { margin-bottom: 1.2em; color: var(--text-body); }
p:last-child { margin-bottom: 0; }

.orange { color: var(--orange); }
.muted { color: var(--text-muted); font-size: 0.9rem; }
.uppercase { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; font-weight: 600; }

/* The browser hides [hidden] with a UA rule, which ANY author rule setting
   display beats -- .section-nav-link{display:inline-block} left hidden nav
   links on screen. Restate it here, where author specificity applies.
   !important so it still wins against the class rules it is guarding. */
[hidden] { display: none !important; }

/* --- Layout --- */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 24px 0 48px; }
.section-tight { padding: 56px 0; }

/* --- Anchor targets fill the screen ---
   Clicking a sub-nav link lands the section top at --scroll-offset from the
   viewport top. Keep the band to the available viewport height on ordinary
   screens, but cap it on tall screens so short content does not leave a large
   empty area before the next section. Sections with more content still grow.

   Only sections with an id, i.e. the ones the sub-nav can actually target.
   Heroes and CTA bands have no id and are left alone.

   Deliberately NOT flex-centred. The content stays in normal flow at the top,
   so the extra height lands below it and titles keep the position the 24px
   top padding gives them. Centring here is what previously buried the titles
   in dead space. */
section[id] { min-height: min(calc(100vh - var(--scroll-offset)), 880px); }
@supports (height: 100svh) {
  section[id] { min-height: min(calc(100svh - var(--scroll-offset)), 880px); }
}
@media (max-width: 900px) {
  /* mobile: let content decide, a locked screen-height wastes the viewport */
  section[id] { min-height: 0; }
}

.bg-mid {
  background-color: var(--bg-alt);
}

/* --- Navigation (light) --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.nav--scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

/* --- Section Nav (scrollspy) --- */
.section-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 900;
  background: var(--bg-dark2);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.section-nav .container {
  display: flex;
  gap: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.section-nav-link {
  display: inline-block;
  padding: 13px 22px;
  color: var(--dark-text-muted);
  font-family: 'Oswald', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.section-nav-link:hover {
  color: var(--dark-text);
  border-bottom-color: rgba(240,129,14,0.5);
}

.section-nav-link.active {
  color: var(--orange-light);
  border-bottom-color: var(--orange);
}

@media (max-width: 900px) {
  .section-nav-link { padding: 11px 16px; font-size: 0.7rem; }
}

.nav-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo img {
  /* Settled at 73px with the bar at 89px, after 56 -> 64 (imperceptible)
     -> 76/92 (too heavy) -> 70/86 (a shade small). Keeps the same ~8px
     clearance top and bottom; 30% above the original 56px. */
  height: 73px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--orange); }

.nav-cta {
  background: var(--orange) !important;
  color: #fff !important;
  padding: 8px 20px;
  border-radius: 3px;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  transition: background 0.2s !important;
}

.nav-cta:hover { background: var(--orange-hover) !important; color: #fff !important; }

.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.nav-mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 3px;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--orange);
  color: #fff;
}
.btn-primary:hover {
  background: var(--orange-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(240,129,14,0.35);
}

.btn-outline {
  background: transparent;
  color: var(--orange);
  border: 2px solid var(--orange);
}
.btn-outline:hover {
  background: var(--orange);
  color: #fff;
  transform: translateY(-1px);
}

/* Outline on dark background.
   Needs the full border shorthand, not just border-color: .btn resets
   border to none, and .btn-outline-dark is used on its own (not only
   alongside .btn-outline), so colour alone left it rendering as bare text. */
.on-dark .btn-outline,
.btn-outline-dark {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
}
.on-dark .btn-outline:hover,
.btn-outline-dark:hover {
  background: #fff;
  color: var(--text);
  border-color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-md);
}
.btn-ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* Ghost on dark */
.on-dark .btn-ghost {
  color: var(--dark-text-muted);
  border-color: var(--dark-border);
}
.on-dark .btn-ghost:hover {
  border-color: var(--orange-light);
  color: var(--orange-light);
}

.btn-sm { padding: 10px 22px; font-size: 0.88rem; }
.btn-lg { padding: 17px 38px; font-size: 1.1rem; }

/* --- Hero (DARK section) --- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-h);
  background-color: var(--bg-dark);
}

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

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(240,129,14,0.08) 0%, transparent 70%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.hero-eyebrow {
  display: inline-block;
  color: var(--orange-light);
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding: 6px 14px;
  border: 1px solid rgba(240,129,14,0.4);
  border-radius: 2px;
}

.hero h1 { color: #ffffff; margin-bottom: 24px; }
.hero h1 span { color: var(--orange-light); }

.hero-sub {
  font-size: 1.15rem;
  color: var(--dark-text);
  max-width: 620px;
  margin-bottom: 40px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.hero-stat-bar {
  position: relative;
  z-index: 2;
  margin-top: 60px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.hero-stat .num {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--orange-light);
  line-height: 1;
}

.hero-stat .label {
  display: block;
  font-size: 0.82rem;
  color: var(--dark-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* --- Urgency Banner (orange) --- */
.urgency-banner {
  background: var(--orange);
  padding: 14px 0;
  text-align: center;
  margin-top: var(--nav-h);
}

.urgency-banner p {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.03em;
}

/* --- Section Headers --- */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header .eyebrow {
  display: inline-block;
  color: var(--orange);
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-header h2 { margin-bottom: 16px; color: var(--text); }

.section-header p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* --- Cards (light) --- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px;
  box-shadow: var(--shadow);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.card:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-icon { font-size: 2rem; margin-bottom: 16px; }
.card h3 { margin-bottom: 12px; color: var(--text); }
.card p { color: var(--text-muted); font-size: 0.95rem; }

/* --- Grid --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* --- Path Cards --- */
.path-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.path-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 6px;
  padding: 40px 36px;
  box-shadow: var(--shadow);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.path-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--orange);
  opacity: 0;
  transition: opacity 0.2s;
}

.path-card:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.path-card:hover::before { opacity: 1; }

.path-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  background: var(--orange-bg);
  color: var(--orange);
  border: 1px solid var(--orange-border);
}

.path-card h3 { font-size: 1.8rem; margin-bottom: 16px; color: var(--text); }
.path-card p { color: var(--text-muted); margin-bottom: 24px; }

.path-features {
  list-style: none;
  margin-bottom: 32px;
}

.path-features li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
  font-size: 0.92rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.path-features li::before {
  content: '//';
  color: var(--orange);
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Process Steps --- */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.process-steps::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.process-step {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  /* .process-steps sets gap:0, so this padding is the entire separation
     between steps — it doubles up. 28px read as 56px apart, which broke the
     list into disconnected blocks instead of one sequence. */
  padding: 18px 0;
  position: relative;
}

.step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--orange);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--bg);
}

/* step-number on alt-bg sections */
.bg-mid .step-number {
  box-shadow: 0 0 0 4px var(--bg-alt);
}

.step-content h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2rem;
  color: var(--text);
  margin-bottom: 6px;
}

.step-content p { color: var(--text-muted); font-size: 0.93rem; margin: 0; }

/* --- Homepage 5-step sequence (reuses .process-steps timeline) --- */
.sequence-steps {
  max-width: 760px;
  /* no margin-top: .section-header already contributes its 40px. The old
     48px here stacked on top of it for an 88px gap under the lead text. */
  margin: 0 auto;
}
.sequence-steps .step-content p a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--orange-border);
}
.sequence-steps .step-content p a:hover { color: var(--orange-hover); }

/* --- Consulting methodology flow (horizontal 7-stage) --- */
.flow-sequence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 6px;
  max-width: 920px;
  margin: 40px auto 8px;
}
.flow-stage {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-radius: 999px;
  padding: 9px 18px;
  white-space: nowrap;
}
.flow-stage-start {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}
.flow-arrow {
  color: var(--orange);
  font-size: 1rem;
  font-weight: 700;
}
@media (max-width: 560px) {
  .flow-sequence { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); }
}

/* --- Midwatch hero lead line --- */
.midwatch-hero-lead {
  font-size: 1.15rem;
  color: var(--orange);
  margin-bottom: 4px;
}
.midwatch-hero-lead strong { font-weight: 700; }

/* --- Stats/Credibility Bar (DARK section) --- */
.cred-bar {
  background: var(--bg-dark);
  padding: 48px 0;
}

.cred-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.cred-item .num {
  font-family: 'Oswald', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--orange-light);
  line-height: 1;
  display: block;
}

.cred-item .label {
  font-size: 0.85rem;
  color: var(--dark-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
  display: block;
}

/* --- Testimonial --- */
.testimonial-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange);
  border-radius: 4px;
  padding: 36px 40px;
  margin: 48px 0;
  box-shadow: var(--shadow);
}

.testimonial-block blockquote {
  font-size: 1.05rem;
  color: var(--text-body);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 20px;
}

.testimonial-block cite {
  font-size: 0.88rem;
  color: var(--orange);
  font-style: normal;
  font-weight: 600;
}

/* --- Callouts --- */
.callout {
  border-radius: 4px;
  padding: 24px 28px;
  margin: 32px 0;
}

.callout-warning {
  background: rgba(217,79,79,0.06);
  border: 1px solid rgba(217,79,79,0.3);
}

.callout-warning p { color: #b94040; margin: 0; font-size: 0.95rem; }

.callout-info {
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
}

.callout-info p { color: #884a08; margin: 0; font-size: 0.95rem; }

/* Callouts inside dark sections */
.on-dark .callout-info {
  background: rgba(240,129,14,0.12);
  border-color: rgba(240,129,14,0.3);
}
.on-dark .callout-info p { color: var(--orange-light); }

.on-dark .callout-warning {
  background: rgba(217,79,79,0.12);
  border-color: rgba(217,79,79,0.35);
}
.on-dark .callout-warning p { color: #f0a0a0; }

/* --- Doctrine Grid --- */
.doctrine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.doctrine-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  padding: 24px 28px;
  border-radius: 2px;
  box-shadow: var(--shadow);
}

.doctrine-item p {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.5;
}

/* Doctrine inside consulting page dark-ish context -- keep light */
.bg-mid .doctrine-item {
  background: var(--bg-card);
}

/* --- Feature List --- */
.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--text-body);
  font-size: 0.97rem;
  line-height: 1.6;
}

.feature-list li .icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--orange);
}

/* --- CTA Section --- */
.cta-section {
  background: var(--bg-dark);
  text-align: center;
  padding: 24px 0 48px;
}

.cta-section h2 { margin-bottom: 20px; color: #fff; }
.cta-section p { color: var(--dark-text-muted); max-width: 540px; margin: 0 auto 40px; font-size: 1.05rem; }
.cta-section .uppercase { color: var(--orange-light); }

/* --- Route Cards --- */
.route-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.route-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  box-shadow: var(--shadow);
}

.route-card:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.route-card .icon { font-size: 2.4rem; margin-bottom: 16px; }
.route-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--text); }
.route-card p { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 20px; }

.route-card .link-text {
  font-size: 0.85rem;
  color: var(--orange);
  font-weight: 600;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Two Column Layout --- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.two-col.reverse { direction: rtl; }
.two-col.reverse > * { direction: ltr; }

.col-image img { border-radius: 4px; border: 1px solid var(--border); }

/* --- Badges --- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--border-md);
  border-radius: 3px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--bg-card);
}

.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

/* Badges inside dark sections */
.on-dark .badge {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: var(--dark-text-muted);
}

/* --- Form --- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }

.form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg-card);
  border: 1px solid var(--border-md);
  border-radius: 3px;
  padding: 13px 16px;
  color: var(--text);
  font-size: 0.97rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(240,129,14,0.1); }

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-light); }

.form-group textarea { min-height: 130px; resize: vertical; }

/* --- Footer (DARK) --- */
footer {
  background: var(--bg-dark2);
  border-top: 3px solid var(--orange);
  padding: 56px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 32px;
}

.footer-brand img { height: 44px; margin-bottom: 16px; }
.footer-brand p { font-size: 0.88rem; color: var(--dark-text-muted); }

footer h5 {
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange-light);
  margin-bottom: 16px;
}

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.footer-links a {
  font-size: 0.88rem;
  color: var(--dark-text-muted);
  transition: color 0.2s;
}

.footer-links a:hover { color: #fff; }

.footer-links li {
  font-size: 0.88rem;
  color: var(--dark-text-muted);
  line-height: 1.5;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p { font-size: 0.8rem; color: var(--dark-text-muted); margin: 0; }
/* Legal links in the bottom bar -- muted until hovered, like the rest of it. */
.footer-bottom a { color: var(--dark-text-muted); text-decoration: none; transition: color 0.2s; }
.footer-bottom a:hover { color: var(--orange); }

.sdvosb-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(240,129,14,0.5);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Page Hero (inner pages -- DARK) --- */
.page-hero {
  padding: calc(var(--nav-h) + 50px) 0 80px;
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
}

.page-hero-content { position: relative; z-index: 1; max-width: 700px; }

.page-hero .eyebrow {
  display: inline-block;
  color: var(--orange-light);
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.page-hero h1 { color: #fff; }

.page-hero p {
  font-size: 1.12rem;
  color: var(--dark-text);
  margin-top: 16px;
}

/* --- Inline section eyebrows (on light bg) --- */
.uppercase.orange { color: var(--orange); }

/* Two-col sections: make sure text is dark on light bg */
.two-col h2 { color: var(--text); }
.two-col p { color: var(--text-body); }

/* --- Sticky card on consulting page --- */
.sticky-card {
  position: sticky;
  top: calc(var(--nav-h) + 63px);
}

/* --- Divider --- */
.divider { border: none; border-top: 1px solid var(--border); margin: 48px 0; }

/* --- Utility --- */
.text-center { text-align: center; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4,
  .path-cards, .doctrine-grid,
  .two-col, .route-cards,
  .footer-grid, .cred-grid { grid-template-columns: 1fr; gap: 20px; }

  .nav-links { display: none; }
  .nav-links.nav-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 16px 24px 24px;
    gap: 18px;
    align-items: flex-start;
  }
  .nav-mobile-toggle { display: flex; }

  .hero { min-height: auto; padding: 120px 0 60px; }
  .hero-stat-bar { gap: 24px; }
  section { padding: 60px 0; }
  .form-grid { grid-template-columns: 1fr; }
}
/* ====================================================
   POLISH LAYER — refinements & motion
   ==================================================== */

/* Anchors land below the fixed nav + section nav.
   This is the ONLY landing offset — sections must not add scroll-margin-top
   on top of it, or the two stack and overshoot. */
html { scroll-padding-top: var(--scroll-offset); }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(240,129,14,0.25); color: var(--text); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* --- Nav link underline grow --- */
.nav-links > li > a:not(.nav-cta) {
  position: relative;
  padding-bottom: 4px;
}
.nav-links > li > a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-links > li > a:not(.nav-cta):hover::after,
.nav-links > li > a.active:not(.nav-cta)::after { transform: scaleX(1); }

/* --- Hero: self-contained CSS background (replaces Wix CDN image) --- */
.hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 70% 15%, rgba(240,129,14,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 12% 90%, rgba(96,125,160,0.14) 0%, transparent 60%),
    linear-gradient(160deg, #313A4C 0%, #272f3d 55%, #2b3342 100%);
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, black 25%, transparent 78%);
  mask-image: radial-gradient(ellipse at 60% 40%, black 25%, transparent 78%);
}

/* --- Inner-page heroes: same visual language as home --- */
.page-hero {
  background:
    radial-gradient(ellipse 70% 90% at 85% 0%, rgba(240,129,14,0.10) 0%, transparent 55%),
    linear-gradient(160deg, #313A4C 0%, #272f3d 100%);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 75% 30%, black 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 75% 30%, black 20%, transparent 75%);
}

/* --- CTA section: subtle glow for cohesion --- */
.cta-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 90% at 50% 115%, rgba(240,129,14,0.13) 0%, transparent 60%),
    var(--bg-dark);
}

/* --- Icon tiles: contain the emoji glyphs so they read as designed --- */
.card-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
  border-radius: 10px;
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.route-card .icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
  border-radius: 12px;
  font-size: 1.6rem;
}

/* --- Testimonials: decorative quote mark --- */
.testimonial-block {
  position: relative;
  overflow: hidden;
}
.testimonial-block::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  left: 22px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 5rem;
  line-height: 1;
  color: rgba(240,129,14,0.16);
  pointer-events: none;
}
.testimonial-block blockquote { position: relative; }

/* --- Hover refinements --- */
.card, .path-card, .route-card {
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
              transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.route-card .link-text {
  display: inline-block;
  transition: transform 0.2s ease;
}
.route-card:hover .link-text { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(0.985); }

/* --- Custom select chevron --- */
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

/* --- Entrance animation: hero --- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero-content > * { animation: riseIn 2.0s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero-content > *:nth-child(2) { animation-delay: 0.25s; }
.hero-content > *:nth-child(3) { animation-delay: 0.50s; }
.hero-content > *:nth-child(4) { animation-delay: 0.75s; }
.hero-content > *:nth-child(5) { animation-delay: 1.00s; }
.hero-content > *:nth-child(6) { animation-delay: 1.25s; }
.hero-stat-bar { animation: riseIn 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) 1.5s both; }

.page-hero-content > * { animation: riseIn 2.0s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.page-hero-content > *:nth-child(2) { animation-delay: 0.25s; }
.page-hero-content > *:nth-child(3) { animation-delay: 0.50s; }
.page-hero-content > *:nth-child(4) { animation-delay: 0.75s; }

/* --- Profile hero entrance ---
   The shared riseIn is a 26px climb over 2s applied to the two direct
   children of the hero. On a profile that meant the whole photo-and-name
   block travelling as one slab, which read as slow.

   Instead the block itself does not animate -- its parts do, in sequence:
   photo, eyebrow, name, role, credential, LinkedIn. Seven small arrivals
   instead of one large one, so the duration buys a cascade rather than a
   wait. 20px is deliberately short: with this many staggered pieces, a
   longer travel each reads busy.

   The back chip is deliberately EXCLUDED. It is the way out of the page and
   should be usable the instant the page paints, not fade in behind the
   content it lets you leave. */
@keyframes settleIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: none; }
}

/* Cancel the inherited riseIn on the direct children first -- without this
   the generic .page-hero-content rule still animates the chip and the block. */
.bio-hero .page-hero-content > * { animation: none; }

.bio-hero .bio-photo,
.bio-hero .bio-identity-text > * {
  animation: settleIn 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.bio-hero .bio-photo                          { animation-delay: 0.18s; }
.bio-hero .bio-identity-text > *:nth-child(1) { animation-delay: 0.42s; }
.bio-hero .bio-identity-text > *:nth-child(2) { animation-delay: 0.66s; }
.bio-hero .bio-identity-text > *:nth-child(3) { animation-delay: 0.90s; }
.bio-hero .bio-identity-text > *:nth-child(4) { animation-delay: 1.14s; }
.bio-hero .bio-identity-text > *:nth-child(5) { animation-delay: 1.38s; }

/* --- Post hero entrance ---
   Same construction as the profile hero, reusing settleIn rather than a
   parallel keyframe: the two direct children do not animate, their parts do,
   dropping in sequence -- photo, eyebrow, headline, byline.

   Cancelling the inherited riseIn is required, not incidental. Without it the
   generic .page-hero-content rule keeps driving a 26px climb underneath the
   cascade, which is the "goes up" this replaces.

   Targeted by their own class names rather than `> *` so privacy.html, which
   also carries .post-hero-band but has neither of these, keeps its own hero
   animation. The back chip is excluded for the same reason as on a profile:
   it is the way out of the page and should be there the moment it paints. */
.post-hero-back,
.post-identity { animation: none; }

.post-author-photo,
.post-identity-text > * {
  animation: settleIn 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.post-author-photo                            { animation-delay: 0.18s; }
.post-identity-text > *:nth-child(1)          { animation-delay: 0.42s; }
.post-identity-text > *:nth-child(2)          { animation-delay: 0.66s; }
.post-identity-text > *:nth-child(3)          { animation-delay: 0.90s; }

/* --- Scroll-reveal (class added by site.js; no JS = everything visible) --- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.0s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.0s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Event cards get a longer, slower entrance than the shared .reveal. At 1s over
   22px the movement is basically over by the time the card is comfortably on
   screen, which reads as "it just appeared". More travel and more time makes it
   legible as motion.

   The .is-visible override has to be restated at this specificity: .reveal
   .is-visible is (0,2,0), same as .event-card.reveal, and this rule sits later
   in the file -- without it translateY(40px) would win and the card would never
   arrive. */
.event-card.reveal {
  transform: translateY(40px);
  /* The whole transition has to be restated here, not just the duration.
     .reveal declares `transition: opacity, transform` at (0,1,0); .event-card
     declares `transition: border-color, box-shadow` at the same specificity but
     LATER in the file, so it won the shorthand outright and transform/opacity
     were never transitioned at all. The card snapped from translateY(40px) and
     opacity 0 straight to visible.

     Raising transition-duration alone (the previous attempt) could not fix that
     -- it lengthened a transition that was not running, which is why the
     entrance stayed invisible however long it was made. Confirmed by computed
     style: transition-property read "border-color, box-shadow" on a live
     .event-card.reveal.

     Border and shadow keep their own short durations so hover stays snappy
     rather than inheriting the 1.8s entrance. */
  transition: opacity 1.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              translate 0.2s ease,
              border-color 0.2s,
              box-shadow 0.2s;
}
.event-card.reveal.is-visible { transform: none; }

/* --- Reduced motion: disable all of the above --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* Delays have to go too. Collapsing duration alone left the hero's staggered
       animation-delay (up to 1.25s) intact, and riseIn uses fill-mode both, so
       content sat at opacity 0 for over a second and then snapped in -- worse
       for a motion-sensitive reader than the animation it was replacing. */
    animation-delay: 0.01ms !important;
    transition-delay: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- Hero fits the first screen ---
   the nav and the ~52px urgency banner sit above the hero, so 100vh
   overshoots by that amount; the old padding-top also double-counted the
   nav offset the banner already provides. Derived from --nav-h so it
   tracks the bar instead of drifting when the bar changes. */
.hero {
  min-height: min(calc(100vh - (var(--nav-h) + 52px)), 900px);
  padding-top: 24px;
  padding-bottom: 40px;
}
@supports (min-height: 100svh) {
  .hero { min-height: min(calc(100svh - (var(--nav-h) + 52px)), 900px); }
}
.hero-sub { margin-bottom: 24px; }
.hero-actions { margin-top: 36px; }
.hero-stat-bar { margin-top: 44px; padding-top: 28px; }

/* Shorter laptop screens: tighten type and spacing so the stat bar stays on screen */
@media (max-height: 850px) {
  .hero h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 16px; }
  .hero-eyebrow { margin-bottom: 14px; }
  .hero-sub { font-size: 1.02rem; line-height: 1.6; margin-bottom: 16px; max-width: 640px; }
  .hero-actions { margin-top: 26px; }
  .hero-actions .btn-lg { padding: 13px 30px; font-size: 1rem; }
  .hero-stat-bar { margin-top: 30px; padding-top: 20px; gap: 36px; }
  .hero-stat .num { font-size: 1.6rem; }
}

/* --- Hero stats: vertical rail on the right, inside the hero visual --- */
.hero .container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}
.hero-stat-bar {
  flex-direction: column;
  gap: 30px;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  border-left: 1px solid rgba(255,255,255,0.14);
  padding-left: 48px;
}
.hero-stat .label { max-width: 190px; }

@media (max-height: 850px) {
  .hero-stat-bar { gap: 22px; padding-left: 40px; margin-top: 0; padding-top: 0; }
}

/* Mobile: stats return below the content as a wrapping row */
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; gap: 0; }
  .hero-stat-bar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 28px;
    margin-top: 36px;
  }
}

/* --- SVG icons inside icon tiles --- */
.route-card .icon, .card-icon { color: var(--orange); }
.route-card .icon svg, .card-icon svg { display: block; }

/* --- Route cards: text-forward now that icons are gone --- */
.route-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  padding: 36px 34px;
}
.route-card h3 {
  font-size: 1.4rem;
  line-height: 1.25;
  margin-bottom: 14px;
}
.route-card p {
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 24px;
  flex-grow: 1;
}
.route-card .link-text { margin-top: auto; }

/* --- Route cards: align headline/body/link rows across all three cards --- */
.route-card h3 { font-size: 1.3rem; }
@supports (grid-template-rows: subgrid) {
  .route-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  .route-card h3 { margin-bottom: 0; }
  .route-card p { margin-bottom: 0; }
  .route-card .link-text { margin-top: 0; }
}

/* --- Two Paths cards: tighter so the section fits the viewport --- */
.path-card { padding: 34px 32px; }
.path-card h3 { font-size: 1.6rem; margin-bottom: 12px; }

@media (max-height: 920px) {
  .section-header { margin-bottom: 36px; }
  .path-card { padding: 26px 26px; }
  .path-features li { padding: 6px 0; font-size: 0.88rem; }
}

/* --- Path cards: align tag/title/intro/features/button rows across cards --- */
.path-cards { column-gap: 32px; row-gap: 14px; }
@supports (grid-template-rows: subgrid) {
  .path-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
  }
  .path-card .path-tag { margin-bottom: 0; justify-self: start; align-self: start; }
  .path-card h3 { margin-bottom: 0; }
  .path-card p { margin-bottom: 0; }
  .path-features { margin-bottom: 0; }
  .path-card .btn { justify-self: start; align-self: end; margin-top: 6px; }
}

/* --- Home sections: each fills one screen below the sticky bars ---
   Backgrounds stay exactly as the sales team's v4 assigned them.
   Landing offset: global scroll-padding (52px) + scroll-margin (60px)
   = 112px = nav + section nav, so clicks land exactly on the section edge. */
#where-are-you, #two-paths, #testimonials, #why-dcg {
  display: flex;
  align-items: center;
  padding: 24px 0 48px;
}
#where-are-you > .container, #two-paths > .container,
#testimonials > .container, #why-dcg > .container { width: 100%; }

/* Phones: natural height, no forced screen-fill */
@media (max-width: 900px) {
  #where-are-you, #two-paths, #testimonials, #why-dcg {
    min-height: 0;
    padding: 60px 0;
  }
}

/* --- Two Paths: scaled down so the full section fits one screen --- */
#two-paths .section-header h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
#two-paths .section-header p { font-size: 0.95rem; }
#two-paths .path-cards { row-gap: 10px; }
#two-paths .path-card { padding: 24px 26px; }
#two-paths .path-tag { font-size: 0.66rem; padding: 3px 9px; }
#two-paths .path-card h3 { font-size: 1.35rem; }
#two-paths .path-card p { font-size: 0.92rem; line-height: 1.55; }
#two-paths .path-features li { padding: 5px 0; font-size: 0.85rem; }
#two-paths .path-card .btn { padding: 11px 24px; font-size: 0.9rem; }

/* --- Process steps: drop down into place one-by-one on scroll --- */
.process-step.reveal { transform: translateY(-28px); }
.process-step.reveal.is-visible { transform: none; }

.process-step.reveal .step-number {
  opacity: 0;
  transform: scale(0.55) translateY(-10px);
  transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s,
              transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1) 0.2s;
}
.process-step.reveal.is-visible .step-number {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .process-step.reveal .step-number { opacity: 1; transform: none; }
}

/* --- Consulting: "What Makes DCG Different" fills one screen, scaled up --- */
#what-makes-dcg {
  display: flex;
  align-items: center;
  padding: 24px 0 48px;
}
#what-makes-dcg > .container { width: 100%; }
#what-makes-dcg h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
#what-makes-dcg p { font-size: 1.08rem; }
#what-makes-dcg .callout-info p { font-size: 1.02rem; line-height: 1.7; }
#what-makes-dcg .doctrine-item { padding: 30px 32px; }
#what-makes-dcg .doctrine-item p { font-size: 1.08rem; }

@media (max-width: 900px) {
  #what-makes-dcg { min-height: 0; padding: 60px 0; }
}

/* --- Consulting testimonial: text centered in the box --- */
#testimonial .testimonial-block {
  text-align: center;
  padding: 46px 60px;
}
#testimonial .testimonial-block::before {
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 900px) {
  #testimonial .testimonial-block { padding: 36px 28px; }
}

/* --- Doctrine quote tiles: text vertically centered --- */
#what-makes-dcg .doctrine-item {
  display: flex;
  align-items: center;
}

/* --- 320 Rule: icons removed, cards aligned, whole section fits one screen --- */
[id="320-rule"] {
  display: flex;
  align-items: center;
  padding: 24px 0 48px;
}
[id="320-rule"] > .container { width: 100%; }
[id="320-rule"] .section-header h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
[id="320-rule"] .section-header p { font-size: 0.98rem; }
[id="320-rule"] .grid-3 { row-gap: 12px; }
[id="320-rule"] .card { padding: 26px 28px; }
[id="320-rule"] .card h3 { font-size: 1.3rem; margin-bottom: 0; }
[id="320-rule"] .card p { font-size: 0.93rem; line-height: 1.6; }
[id="320-rule"] .callout-warning { margin-top: 26px; padding: 18px 24px; }

/* Align title and body rows across the three cards */
@supports (grid-template-rows: subgrid) {
  [id="320-rule"] .grid-3 > .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
}

@media (max-width: 900px) {
  [id="320-rule"] { min-height: 0; padding: 60px 0; }
}

/* ====================================================
   MIDWATCH PAGE — branding & section fitting
   ==================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hero: brand-guide light logo on the dark hero */
.midwatch-hero-logo {
  /* 430 -> 390. The extra top padding above pushes the whole block down, and
     this hero carries the most content of any (eyebrow, wordmark, lead,
     paragraph, two buttons) inside a fixed --page-hero-h. Trimming the wordmark
     buys back the height so nothing meets .page-hero's overflow:hidden. */
  width: min(390px, 76%);
  height: auto;
  margin: 8px 0 12px;
}

/* Faint owl watermark on the hero (brand mark, inverted to light) */
.midwatch-hero::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  width: 320px;
  height: 587px;
  background: url('assets/midwatch/logomark-dark.svg') center/contain no-repeat;
  filter: invert(1);
  opacity: 0.05;
  pointer-events: none;
}

/* Owl badge on the enclave card */
.card-enclave { position: relative; }
.card-owl {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: auto;
  opacity: 0.9;
}

/* CTA logo */
.cta-midwatch-logo {
  height: 42px;
  width: auto;
  margin: 0 auto 24px;
}

/* Full-screen section bands (same formula as home/consulting) */
#what-midwatch-is, #how-it-works, #who-its-for, #comparison {
  display: flex;
  align-items: center;
  padding: 24px 0 48px;
}
#what-midwatch-is > .container, #how-it-works > .container,
#who-its-for > .container, #comparison > .container { width: 100%; }

/* What You Get is content-heavy: correct landing, compact lists */
#whats-included { padding: 24px 0 48px; }
#whats-included .feature-list { gap: 10px; }
#whats-included .feature-list li { font-size: 0.94rem; }

/* How It Works cards: title/body rows aligned */
#how-it-works .grid-3 { row-gap: 12px; }
@supports (grid-template-rows: subgrid) {
  #how-it-works .grid-3 > .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  #how-it-works .card h3 { margin-bottom: 0; }
}

@media (max-width: 900px) {
  #what-midwatch-is, #how-it-works, #who-its-for, #comparison {
    min-height: 0;
    padding: 60px 0;
  }
  .midwatch-hero::after { display: none; }
}

/* ====================================================
   ABOUT PAGE — section fitting (same formula)
   ==================================================== */
#founder, #the-team, #doctrine, #track-record {
  display: flex;
  align-items: center;
  padding: 24px 0 48px;
}
#founder > .container, #the-team > .container,
#doctrine > .container, #track-record > .container { width: 100%; }

/* Team cards: icons removed, title/body rows aligned */
#the-team .grid-3 { row-gap: 12px; }
@supports (grid-template-rows: subgrid) {
  #the-team .grid-3 > .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  #the-team .card h3 { margin-bottom: 0; }
}

/* Founder credentials list: slightly tighter so the band holds on laptops */
#founder .feature-list { gap: 11px; }
#founder .feature-list li { font-size: 0.94rem; }

@media (max-width: 900px) {
  #founder, #the-team, #doctrine, #track-record {
    min-height: 0;
    padding: 60px 0;
  }
}

/* --- Founder photo box --- */
.founder-photo {
  max-width: 240px;
  margin: 0 auto 22px;
}
.founder-photo-frame {
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--border-md);
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(49,58,76,0.06) 0%, transparent 70%),
    var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.founder-photo-frame:has(img) {
  border-style: solid;
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.founder-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founder-photo-placeholder {
  color: var(--text-light);
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.founder-photo figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Keep the founder band on one screen with the photo added */
#founder .feature-list { gap: 9px; }
#founder .feature-list li { font-size: 0.92rem; }
#founder .card { padding: 26px 28px; }
#founder .card h4 { margin-bottom: 16px; }

/* --- Founder photo: framed border --- */
.founder-photo-frame:has(img) {
  border: 3px solid var(--bg-dark);
  outline: 1px solid var(--border);
  outline-offset: 3px;
  padding: 0;
  border-radius: 4px;
}

/* --- Blog cards (resources page, rendered from posts.js) --- */
.blog-card {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.blog-card .path-tag { align-self: flex-start; margin-bottom: 14px; }
.blog-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.blog-date {
  font-size: 0.8rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.blog-card .blog-blurb {
  font-size: 0.93rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  flex-grow: 1;
}
.blog-card .link-text {
  font-size: 0.85rem;
  color: var(--orange);
  font-weight: 600;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: auto;
  transition: transform 0.2s ease;
  display: inline-block;
  align-self: flex-start;
}
.blog-card:hover .link-text { transform: translateX(4px); }

/* --- Blog card avatars --- */
.blog-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.blog-head .path-tag { margin-bottom: 0; }
.blog-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.blog-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-bg);
  border-color: var(--orange-border);
  color: var(--orange);
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* --- Blog byline (author name + date, LinkedIn-style) --- */
.blog-byline {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}
.blog-author {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-byline .blog-date { margin-bottom: 0; }

/* --- Media cards (resources page, rendered from media.js) --- */
.media-card {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  padding: 0 0 24px;
  overflow: hidden;
}
.media-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-dark);
  margin-bottom: 18px;
}
.media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.media-card:hover .media-thumb img { transform: scale(1.04); }
.media-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(13, 15, 16, 0.85);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.media-card .path-tag { margin: 0 24px 12px; align-self: flex-start; }
.media-card h3 { font-size: 1.1rem; margin: 0 24px 8px; }
.media-show {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 24px 16px;
  flex-grow: 1;
}
.media-card .link-text {
  font-size: 0.85rem;
  color: var(--orange);
  font-weight: 600;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: auto 24px 0;
  align-self: flex-start;
  display: inline-block;
  transition: transform 0.2s ease;
}
.media-card:hover .link-text { transform: translateX(4px); }

/* --- Media scroller: horizontal snap carousel --- */
.media-scroller-wrap {
  position: relative;
}
.media-scroller {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: 10px 4px 18px;
  scrollbar-width: none;        /* hidden: arrows are the affordance */
}
.media-scroller::-webkit-scrollbar { display: none; }
.media-scroller .media-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
}
/* Arrows: bold orange chevrons in the side margins, centered on the row.
   Fade out at their end of travel (.media-nav-hidden, toggled by site.js). */
.media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--orange);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease, opacity 0.25s ease;
}
.media-nav svg {
  display: block;
  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.media-nav:hover { color: var(--orange-hover); }
.media-nav:hover svg { transform: scale(1.2); }
.media-nav:focus:not(:focus-visible) { outline: none; }
.media-nav-hidden {
  opacity: 0;
  pointer-events: none;
}
.media-prev { left: -52px; }
.media-next { right: -52px; }

@media (max-width: 1260px) {
  /* narrower windows: keep the chevrons inside the viewport */
  .media-prev { left: -14px; }
  .media-next { right: -14px; }
}

@media (max-width: 900px) {
  .media-nav { display: none; }        /* touch devices swipe */
  .media-scroller .media-card { flex-basis: 280px; }
}

/* --- Carousel cards: no entrance animation (kept snappy) --- */
.media-card.reveal,
.media-card.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

/* --- Hero entrance: 5th child safety net (e.g. heroes with an sr-only h1) --- */
.page-hero-content > *:nth-child(5) { animation-delay: 1.00s; }

/* Midwatch hero: the sr-only h1 occupies child slot 2 but is invisible, so
   retime the visible elements to the same cadence as every other page:
   eyebrow 0 -> logo .25 -> paragraph .5 -> buttons .75 */
.midwatch-hero .page-hero-content > .midwatch-hero-logo { animation-delay: 0.25s; }
.midwatch-hero .page-hero-content > p { animation-delay: 0.50s; }
.midwatch-hero .page-hero-content > .hero-actions { animation-delay: 0.75s; }

/* --- Inner-page heroes: uniform height across all five pages ---
   One shared height with centered content; the padding-top clears the fixed
   nav, and content differences absorb into equal space above/below.
   --page-hero-h is set well clear of the tallest content (Midwatch, 410px,
   whose logo is what made it 14px taller than the rest before this).
   min-height rather than height on purpose: if content ever outgrows the
   box the hero expands instead of clipping against overflow:hidden. That
   costs uniformity in the rare case, which is the cheaper failure — if you
   see the heroes disagree again, raise --page-hero-h. */
.page-hero {
  min-height: var(--page-hero-h);
  display: flex;
  align-items: center;
  /* Derived, not hardcoded. This was 84px against a 90px nav, so the content
     box began ABOVE the bar's bottom edge and the eyebrow sat tight under it.
     Fourth value broken by the --nav-bar resize; like the others it now follows
     the variable instead of restating a number that was once correct. */
  padding: calc(var(--nav-h) + 30px) 0 40px;
}
.page-hero > .container { width: 100%; }
.midwatch-hero .eyebrow { margin-bottom: 8px; }

/* Matching heights is a wide-screen concern. Below 900px the headlines wrap
   to different line counts per page, so a locked height would clip against
   .page-hero's overflow:hidden. Let each hero size to its own content. */
@media (max-width: 900px) {
  .page-hero { height: auto; min-height: 420px; padding: calc(var(--nav-h) + 32px) 0 48px; }
}

/* --- First section on every page: orange title pinned to the exact spot
   it occupies on the consulting page (~64px below the section top).
   Top-aligned so short content can no longer drift toward the middle. --- */
#what-makes-dcg, #what-midwatch-is, #founder, #self-assessment, #contact-form {
  display: flex;
  align-items: flex-start;
  padding: 24px 0 48px;
}
#self-assessment > .container, #contact-form > .container { width: 100%; }

@media (max-width: 900px) {
  #what-makes-dcg, #what-midwatch-is, #founder, #self-assessment, #contact-form {
    min-height: 0;
    padding: 60px 0;
  }
}

/* --- Midwatch "What Midwatch Is": brand visual panel fills the band --- */
.midwatch-visual {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.midwatch-panel {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse 80% 70% at 70% 20%, rgba(240,129,14,0.10) 0%, transparent 55%),
    linear-gradient(160deg, #313A4C 0%, #272f3d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.midwatch-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}
.midwatch-panel::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  width: 180px;
  height: 330px;
  background: url('assets/midwatch/logomark-dark.svg') center/contain no-repeat;
  filter: invert(1);
  opacity: 0.07;
}
.midwatch-panel img {
  position: relative;
  z-index: 1;
  width: 72%;
  max-width: 340px;
}

/* --- 3-element heroes (About/Contact/Resources): widen the stagger so the
   entrance lasts as long as the pages that also animate buttons --- */
.page-hero-content > *:nth-child(2):nth-last-child(2) { animation-delay: 0.375s; }
.page-hero-content > *:nth-child(3):last-child { animation-delay: 0.75s; }

/* --- Home: short third testimonial as a centered full-width pull quote --- */
.testimonial-wide {
  max-width: 880px;
  margin: 8px auto 0;
  text-align: center;
  padding: 40px 64px;
}
.testimonial-wide::before {
  left: 50%;
  transform: translateX(-50%);
}
.testimonial-wide blockquote {
  font-size: 1.18rem;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .testimonial-wide { padding: 32px 26px; }
}

/* --- Testimonials: drop the decorative background quote mark; close the
   gap between the section header and the boxes (base .testimonial-block
   carries a 48px vertical margin meant for standalone use) --- */
.testimonial-block::before { content: none; }
#testimonials .testimonial-block { margin: 0; }
#testimonials .testimonial-wide { margin: 24px auto 0; }

/* --- Home: Our Solutions + Two Paths — titles pinned to the top like the
   inner pages, content scaled up to fill the bands --- */
#where-are-you, #two-paths {
  align-items: flex-start;
  padding: 24px 0 48px;
}

#where-are-you .section-header h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
#where-are-you .section-header p { font-size: 1.05rem; }
.route-card { padding: 42px 38px; }
.route-card h3 { font-size: 1.5rem; }
.route-card p { font-size: 1.04rem; line-height: 1.7; }
.route-card .link-text { font-size: 0.95rem; }

#two-paths .section-header h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
#two-paths .section-header p { font-size: 1.02rem; }
#two-paths .path-card { padding: 32px; }
#two-paths .path-card h3 { font-size: 1.55rem; }
#two-paths .path-card p { font-size: 0.98rem; }
#two-paths .path-tag { font-size: 0.7rem; }
#two-paths .path-features li { padding: 6px 0; font-size: 0.9rem; }
#two-paths .path-card .btn { padding: 13px 28px; font-size: 0.95rem; }

@media (max-width: 900px) {
  #where-are-you, #two-paths { padding: 60px 0; }
}

/* --- About: The Team — title pinned top, cards scaled up to fill the band --- */
#the-team {
  align-items: flex-start;
  padding: 24px 0 48px;
}
#the-team .section-header h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
#the-team .section-header p { font-size: 1.05rem; }
#the-team .grid-3 { column-gap: 26px; }
#the-team .card { padding: 44px 38px; }
#the-team .card h3 { font-size: 1.5rem; }
#the-team .card p { font-size: 1.05rem; line-height: 1.72; }

@media (max-width: 900px) {
  #the-team { padding: 60px 0; }
}

/* --- About: Track Record — title pinned top, content scaled up --- */
#track-record {
  align-items: flex-start;
  padding: 24px 0 48px;
}
#track-record .section-header h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
#track-record .feature-list { gap: 20px; }
#track-record .feature-list li { font-size: 1.06rem; line-height: 1.7; }
#track-record .testimonial-block blockquote { font-size: 1.12rem; line-height: 1.75; }
#track-record .badge { font-size: 0.85rem; padding: 9px 16px; }

@media (max-width: 900px) {
  #track-record { padding: 60px 0; }
}

/* --- Resources: Start Here — content scaled up; section padding untouched
   so the title stays at the standard 64px position --- */
#self-assessment h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
#self-assessment p { font-size: 1.05rem; line-height: 1.72; }
#self-assessment .btn { padding: 15px 34px; font-size: 1.05rem; }
#self-assessment .card { padding: 40px 36px; }
#self-assessment .card h4 { font-size: 1.25rem; }
#self-assessment .feature-list { gap: 16px; }
#self-assessment .feature-list li { font-size: 1.02rem; line-height: 1.65; }
#self-assessment .callout { padding: 26px 30px; }

/* --- Midwatch: Enclave vs. Migration — title pinned top, content scaled up --- */
#comparison {
  align-items: flex-start;
  padding: 24px 0 48px;
}
#comparison .section-header h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
#comparison .section-header p { font-size: 1.05rem; }
#comparison .card { padding: 42px 38px; }
#comparison .card h3 { font-size: 1.5rem; }
#comparison .feature-list { gap: 18px; }
#comparison .feature-list li { font-size: 1.04rem; line-height: 1.68; }

@media (max-width: 900px) {
  #comparison { padding: 60px 0; }
}

/* --- Midwatch panel: logo above a checkmark list (what it does / why) --- */
.midwatch-panel-list {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 0;
  padding: 38px 40px;
}
.midwatch-panel-logo {
  position: relative;
  z-index: 1;
  width: 60%;
  max-width: 280px;
  margin: 2px 0 28px;
}
.midwatch-panel-checks {
  position: relative;
  z-index: 1;
  gap: 15px;
}
.midwatch-panel-checks li {
  color: var(--dark-text);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* --- Midwatch panel: light card treatment (distinct from the hero) --- */
.midwatch-panel-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--orange);
  box-shadow: var(--shadow);
}
.midwatch-panel-list::before { content: none; }
.midwatch-panel-list::after {
  filter: none;
  opacity: 0.05;
}
.midwatch-panel-checks li { color: var(--text-body); }

/* --- Midwatch panel: nudge down to sit visually level with the text column --- */
.midwatch-visual { margin-top: 34px; }

@media (max-width: 900px) {
  .midwatch-visual { margin-top: 0; }
}

/* --- Card hover: win over inline accent borders (highlighted middle cards) --- */
.card:hover { border-color: var(--orange) !important; }

/* ====================================================
   FINAL REVIEW PASS — per-section requests
   ==================================================== */

/* --- Consulting: "What Clients Say" sizes to its content ---
   It only carries a single quote, so filling the screen left a large empty
   band beneath it. Opting out of the screen-fill rule; the next section
   showing underneath is accepted here. */
#testimonial { min-height: 0; }

/* --- Bordered panels ---
   "Why Clients Choose DCG" (home) and the two "What You Get" columns
   (Midwatch) read as loose lists against the page. A light containing box
   groups each without turning them into full cards. */
#why-dcg .two-col > div:last-child,
#whats-included .grid-2 > div {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px;
  background: var(--bg-card);
}
/* the box supplies the spacing; the heading no longer needs its own */
#whats-included .grid-2 > div > h3 { margin-bottom: 20px; }

/* --- Sections with short content: scale copy to the space ---
   These fill the screen but their content ran 145-250px short, leaving a
   dead band at the bottom. Larger body copy closes it and reads better at
   this width. Prose + feature-list layouts: */
#why-dcg p,
#what-midwatch-is p,
#self-assessment p {
  font-size: 1.14rem;
  line-height: 1.75;
}
#why-dcg .feature-list li span:last-child,
#what-midwatch-is .feature-list li span:last-child,
#self-assessment .feature-list li span:last-child {
  font-size: 1.06rem;
  line-height: 1.6;
}
#why-dcg .feature-list,
#what-midwatch-is .feature-list,
#self-assessment .feature-list { gap: 18px; }

/* card-grid layouts: */
#how-it-works .card p,
#who-its-for .card p {
  font-size: 1.08rem;
  line-height: 1.7;
}
#how-it-works .card h3,
#how-it-works .card h4,
#who-its-for .card h3,
#who-its-for .card h4 { font-size: 1.3rem; }

/* About track record — the roomiest of them at 248px short: */
#track-record p,
#track-record .feature-list li span:last-child {
  font-size: 1.12rem;
  line-height: 1.72;
}
#track-record .testimonial-block p { font-size: 1.2rem; }

@media (max-width: 900px) {
  /* revert to the base scale on phones, where space is the constraint */
  #why-dcg p, #what-midwatch-is p, #self-assessment p,
  #track-record p, #how-it-works .card p, #who-its-for .card p { font-size: 1rem; }
  #why-dcg .two-col > div:last-child,
  #whats-included .grid-2 > div { padding: 24px; }
}

/* Second pass: the card-grid sections and Track Record were still 170-250px
   short. Cards sit side by side, so their height is set by the tallest one —
   type alone barely moves it. Padding does the heavy lifting, type does the
   rest, so the copy stays a sensible size. */
#how-it-works .card,
#who-its-for .card { padding: 40px 36px; }
#how-it-works .card p,
#who-its-for .card p { font-size: 1.16rem; line-height: 1.75; }
#how-it-works .card h3,
#how-it-works .card h4,
#who-its-for .card h3,
#who-its-for .card h4 { font-size: 1.4rem; margin-bottom: 14px; }
#how-it-works .grid-3,
#who-its-for .grid-3 { gap: 28px; }

#track-record p,
#track-record .feature-list li span:last-child { font-size: 1.2rem; }
#track-record .testimonial-block { padding: 40px 36px; }
#track-record .testimonial-block blockquote { font-size: 1.32rem; line-height: 1.6; }
#track-record .feature-list { gap: 20px; }

#self-assessment p { font-size: 1.2rem; }
#self-assessment .feature-list li span:last-child { font-size: 1.12rem; }

@media (max-width: 900px) {
  #how-it-works .card, #who-its-for .card,
  #track-record .testimonial-block { padding: 24px; }
  #how-it-works .card p, #who-its-for .card p,
  #track-record p, #self-assessment p { font-size: 1rem; }
}

/* Track Record holds the least content of any section — a 4-item list beside
   one quote. Opening up the list rhythm and type closes most of the remaining
   gap without inflating the copy past what reads well. */
#track-record .feature-list { gap: 28px; }
#track-record p,
#track-record .feature-list li span:last-child { font-size: 1.26rem; line-height: 1.7; }
#track-record .testimonial-block { padding: 48px 40px; }
@media (max-width: 900px) {
  #track-record .feature-list { gap: 14px; }
  #track-record .testimonial-block { padding: 24px; }
}

/* --- Consulting methodology: interactive flow pills ---
   The pills are anchors to their phase, so they need to look and behave like
   controls. .is-current is set by site.js as you scroll the phase list. */
.flow-stage {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}
.flow-stage:hover,
.flow-stage:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-1px);
}
.flow-stage:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.flow-stage.is-current {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}
/* the first pill is orange by default; once scrollspy takes over, only the
   current one should be filled */
.flow-stage-start:not(.is-current) {
  color: var(--text);
  background: var(--bg-card);
  border-color: var(--border-md);
}
.flow-stage-start:not(.is-current):hover { color: var(--orange); border-color: var(--orange); }

/* Landing flash on the phase a pill points at, so it is obvious which of the
   nine you arrived at. */
@keyframes phaseFlash {
  0%   { background-color: rgba(240,129,14,0.16); }
  100% { background-color: transparent; }
}
.process-step.is-flash {
  animation: phaseFlash 1.4s ease-out;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .process-step.is-flash { animation: none; }
  .flow-stage { transition: none; }
  .flow-stage:hover { transform: none; }
}

/* --- "What Clients Say", now inside the methodology column ---
   It used to be its own full-width section; here it fills the space beside
   the lower phases. Header scales down to suit the narrower column. */
.methodology-aside { margin-top: 32px; }
.methodology-aside .section-header { margin-bottom: 20px; text-align: left; }
.methodology-aside .section-header h2 { font-size: clamp(1.3rem, 1.6vw, 1.6rem); }
.methodology-aside .testimonial-block { padding: 28px 26px; }
.methodology-aside .testimonial-block blockquote { font-size: 1.02rem; line-height: 1.65; }
@media (max-width: 900px) {
  .methodology-aside { margin-top: 24px; }
  .methodology-aside .testimonial-block { padding: 22px; }
}

/* The quote block centres its text, which suits a full-width section but not
   this narrow column — left-aligned reads better at ~430px. */
.methodology-aside .testimonial-block blockquote { text-align: left; }
.methodology-aside .testimonial-block cite { text-align: left; display: block; }

/* --- Pin the flow pills while you read the phases ---
   The phase list runs ~2000px; without this the pills scroll away after the
   first phase and both the jump links and the current-phase highlight become
   unreachable. Sits directly under the sub-nav. */
.flow-sequence {
  position: sticky;
  top: var(--sticky-stack);
  z-index: 500;
  background: var(--bg-alt);
  padding: 14px 0 12px;
  margin: 32px auto 4px;
  box-shadow: 0 6px 12px -8px rgba(0,0,0,0.18);
  /* span the full container: at 920px the two columns showed through on
     either side of the bar as they scrolled under it */
  max-width: none;
}
/* the pills now sit behind a second sticky bar, so anchor landings need to
   clear it as well as the nav — this is additive to html's scroll-padding-top
   and is the one place a scroll-margin is correct rather than duplicative */
#process .process-step { scroll-margin-top: calc(var(--flow-bar-h, 69px) + 5px); }

/* Stop pinning at 1000px rather than 900px: below roughly 950px the eight
   pills wrap to a second row, and a 116px pinned bar on a small viewport is
   worse than no pinning at all. Above it the bar is always one line. */
@media (max-width: 1000px) {
  .flow-sequence { position: static; box-shadow: none; padding: 0; }
  #process .process-step { scroll-margin-top: 0; }
}


/* Eight pills plus arrows just overflow the container at the original
   0.85rem size once the viewport drops toward 950px, and a wrapped pinned
   bar doubles to 122px. Eased down slightly so the sequence holds one line
   across the whole range where the bar is pinned (>=901px). */
.flow-sequence { gap: 10px 5px; }
.flow-stage { font-size: 0.8rem; padding: 8px 15px; }

/* ====================================================
   REVIEW PASS 2 — per-page requests
   ==================================================== */

/* --- Home / Client Stories: lift on hover ---
   Scale rather than the translateY the cards use, because these sit in a
   two-up grid where a lift reads as misalignment but a swell does not. */
#testimonials .testimonial-block {
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease;
  will-change: transform;
}
#testimonials .testimonial-block:hover {
  transform: scale(1.025);
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
}

/* --- Home / Why DCG ---
   The panel answers the hover convention used by every other bordered block
   on the site. The entrance animation is handled by site.js, which now
   includes this section's two columns in the scroll-reveal set. */
#why-dcg .two-col > div:last-child {
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
#why-dcg .two-col > div:last-child:hover {
  border-color: var(--orange-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* check icons drift in behind their line rather than all landing at once */
#why-dcg .feature-list li .icon {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#why-dcg .two-col > div:last-child:hover .icon { transform: scale(1.12); }

/* --- Consulting / The 70% Rule callout ---
   Was a flat tinted rectangle. Given the treatment the rest of the site uses
   for things that matter: an accent edge, a labelled heading, and real
   hierarchy between the label and the body. */
#what-makes-dcg .callout-info {
  position: relative;
  background: linear-gradient(180deg, var(--orange-bg) 0%, rgba(240,129,14,0.03) 100%);
  border: 1px solid var(--orange-border);
  border-left: 4px solid var(--orange);
  border-radius: 6px;
  padding: 30px 32px 30px 34px;
  box-shadow: var(--shadow);
}
#what-makes-dcg .callout-info p {
  color: var(--text-body);
  font-size: 1.04rem;
  line-height: 1.75;
}
/* the lead-in ("The 70% Rule:") carries the accent and the weight */
#what-makes-dcg .callout-info p strong {
  display: block;
  margin-bottom: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}

@media (prefers-reduced-motion: reduce) {
  #testimonials .testimonial-block,
  #why-dcg .two-col > div:last-child,
  #why-dcg .feature-list li .icon { transition: none; }
  #testimonials .testimonial-block:hover,
  #why-dcg .two-col > div:last-child:hover { transform: none; }
}

/* --- .orange on a heading actually wins now ---
   `.card h3 { color: var(--text) }` is (0,1,1) and was silently beating the
   `.orange` utility at (0,1,0). midwatch.html:274 "Midwatch Enclave" has
   carried class="orange" all along and never rendered orange — the cue that
   marks the recommended column in the comparison was dead. Matching the
   specificity fixes it wherever the utility is applied to a heading. */
h1.orange, h2.orange, h3.orange, h4.orange, h5.orange { color: var(--orange); }

/* --- Consulting maxim tiles ---
   Four flat white rectangles with a hairline and small type read as filler
   next to the callout above them. Treated as the pull-quotes they are: a
   set quote mark, a gradient rather than flat fill, real type size, and the
   same hover the rest of the site's bordered blocks use.

   The straight quotes were removed from the markup at the same time — the
   tile now carries that signal, and rendering both looked doubled-up. */
#what-makes-dcg .doctrine-item {
  position: relative;
  background: linear-gradient(158deg, var(--bg-card) 0%, var(--bg-alt) 100%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  padding: 28px 40px 28px 30px;
  box-shadow: var(--shadow);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
#what-makes-dcg .doctrine-item::before {
  content: '\201C';
  position: absolute;
  top: 6px;
  right: 14px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.8rem;
  line-height: 1;
  color: var(--orange);
  opacity: 0.15;
  pointer-events: none;
}
#what-makes-dcg .doctrine-item:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
#what-makes-dcg .doctrine-item p {
  position: relative;   /* paint above the quote mark */
  font-size: 1.06rem;
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  #what-makes-dcg .doctrine-item { transition: none; }
  #what-makes-dcg .doctrine-item:hover { transform: none; }
}

/* ============================================================
   BLOG ARCHIVE (blog-archive.html) + CASE STUDIES (resources)
   Added for the 2026-07-31 Website Gate decisions.
   ============================================================ */

/* Centered action under a section's card grid, e.g. "Browse the
   Full Archive" beneath the six most-recent blog cards. */
.section-footer-action {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* --- Archive list: thumbnail on the left, copy running down the
       page. Deliberately a list rather than cards -- this is the
       browse-the-back-catalogue view, not the highlight reel. --- */
.archive-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.archive-row {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 28px 4px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  /* Colour only. A hover that changes padding reflows the row, and on a long
     list that is read by scrolling, rows slide under a stationary cursor --
     so scrolling made every row shove sideways and settle back in turn.
     Nothing here may affect layout. */
  transition: background-color 0.18s ease;
}
.archive-row:hover {
  background-color: var(--bg-alt);
}

.archive-thumb {
  width: 132px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.archive-thumb-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-bg);
  border-color: var(--orange-border);
  color: var(--orange);
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.archive-body { min-width: 0; }

.archive-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.archive-body h3 {
  font-size: 1.25rem;
  margin-bottom: 8px;
  transition: color 0.2s;
}
.archive-row:hover .archive-body h3 { color: var(--orange); }

.archive-blurb {
  color: var(--text-body);
  margin-bottom: 10px;
  max-width: 68ch;
}

.archive-row .link-text {
  display: inline-block;
  transition: opacity 0.18s ease;
  opacity: 0.75;
}
.archive-row:hover .link-text { opacity: 1; }

@media (max-width: 900px) {
  .archive-row {
    flex-direction: column;
    gap: 16px;
  }
  .archive-thumb {
    width: 100%;
    height: 168px;
  }
}

/* ============================================================
   BLOG POST PAGES (post/<slug>/index.html)
   Bodies migrated from the old blog 2026-08-02.
   ============================================================ */

/* Shorter than the section heroes -- on a post the article is the point, so
   the band gets you to the headline and out of the way.
   The shared --page-hero-h lock deliberately holds every marketing hero to
   one height so they agree page to page. A post is a different template and
   is not part of that set, so it opts out of the min-height as well as the
   padding; overriding padding alone leaves the 560px floor in place. */
.post-hero-band {
  min-height: 0;
  /* Derived from --nav-h, never hardcoded.
     These were fixed pixel values sized against an 81px nav. Raising
     --nav-bar from 80px to 89px did not move them, so clearance under the
     fixed bar silently shrank -- on the profile hero from 19px to 10px,
     which is why the "Back to Team" chip ended up tucked against the nav.
     Hardcoding a value that must clear a variable-height fixed element is
     the defect; the tight spacing was only how it showed up. Stated once
     here, these now survive any future bar change. */
  padding: calc(var(--nav-h) + 32px) 0 44px;
}
.post-hero-band .page-hero-content { max-width: 820px; }

/* A post hero centres like a profile hero, and for the same reason: the back
   chip and the identity block already carry `margin: auto` with a 780px cap,
   so they try to centre themselves -- but inside an 820px box that is itself
   pinned to the left of the 1140px container. The result is a headline sitting
   ~136px left of the page centre while every rule involved looks correct.

   Releasing the cap lets those auto margins resolve against the full container,
   which is exactly what .bio-hero does further down.

   Scoped with :has() rather than applied to .post-hero-band outright, because
   privacy.html shares that band and has no .post-identity -- its hero is meant
   to stay left-aligned with the body copy beneath it. */
.post-hero-band .page-hero-content:has(.post-identity) { max-width: 100%; }
.post-hero-band h1 { font-size: clamp(1.6rem, 2.8vw, 2.35rem); line-height: 1.18; }

.post-hero-back { margin-bottom: 20px; }
/* Compact chip -- it is a way back, not the point of the page. Colour is
   set further down, alongside the bio hero it now shares a treatment with. */
.post-hero-back .btn {
  padding: 8px 16px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.post-meta {
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark-text-muted);
  margin-top: 14px;
}

@media (max-width: 900px) {
  /* Also beats the 420px floor the narrow-screen rule puts back. */
  .post-hero-band { min-height: 0; padding: 92px 0 34px; }
}

.post-section { padding: 56px 0 72px; }

/* Readable measure. Everything in the article inherits from here rather than
   being styled tag-by-tag, because the migrated bodies use a small, known set
   of tags (p, h2-h4, ul/ol, blockquote, a, strong/em/u, img). */
.post-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--text-body);
}

.post-body > p { margin-bottom: 22px; }

.post-body h2,
.post-body h3,
.post-body h4 {
  color: var(--text);
  margin: 40px 0 14px;
  line-height: 1.25;
}
.post-body h2 { font-size: 1.6rem; }
.post-body h3 { font-size: 1.32rem; }
.post-body h4 { font-size: 1.12rem; }

.post-body ul,
.post-body ol { margin: 0 0 22px 24px; }
.post-body li { margin-bottom: 10px; }

.post-body a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-body a:hover { color: var(--orange-hover); }

/* Authors used underline for emphasis on the old blog. Keep the emphasis but
   drop the underline, otherwise it is indistinguishable from a link. */
.post-body u {
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
}

.post-body blockquote {
  border-left: 3px solid var(--orange);
  padding: 4px 0 4px 20px;
  margin: 28px 0;
  color: var(--text);
  font-style: italic;
}

.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 28px auto;
}
.post-body figure { margin: 28px 0; }
.post-body figcaption {
  font-size: 0.86rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
}

.post-body .post-hero { margin: 0 0 36px; }
.post-body .post-hero img { margin: 0; width: 100%; }

.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 0.95rem;
}
.post-body th,
.post-body td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
}
.post-body th { background: var(--bg-alt); color: var(--text); }

/* --- Foot of the article: LinkedIn + back to the archive --- */
.post-foot {
  max-width: 720px;
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* Icon-sized share button, sitting where the old blog put its share row.
   Orange rather than LinkedIn blue so it reads as one of ours. */
.btn-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-linkedin:hover {
  background: var(--orange-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(240,129,14,0.35);
}
.btn-linkedin svg { display: block; width: 20px; height: 20px; }

.post-back {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}
.post-back:hover { color: var(--orange); }

@media (max-width: 900px) {
  .post-foot { flex-direction: column; align-items: flex-start; }
}

/* --- Related posts, foot of an article. Same .blog-card as the resources
       grid, on the same horizontal rail as the podcast row. --- */
.related-posts {
  background-color: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.related-posts .section-header { margin-bottom: 28px; }
.related-posts h2 { font-size: 1.5rem; }

/* Cards in a rail need a fixed track width; in the grid they were fluid. */
.media-scroller .blog-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
}

/* The arrows sit at -52px, outside .container's 24px gutter. Below the point
   where that overhang stops fitting, pull them inside the rail instead of
   letting them hang off the edge of the viewport. */
@media (max-width: 1260px) {
  .related-posts .media-prev { left: -8px; }
  .related-posts .media-next { right: -8px; }
}

/* ============================================================
   SENIOR LEADERSHIP PROFILES (about.html, from team.js)
   Website Gate 2026-07-31: SLT only, kept scalable on purpose.
   ============================================================ */

/* Flex, not grid: an odd number of people (five today) leaves a hole in the
   last row of a fixed column track. Wrapping flex with justify-content:center
   centres whatever is left over instead, so 5 reads as 3 + 2 centred rather
   than 3 + 2 + a gap. max-width stops the two on the last row from stretching
   to half the container each. */
.person-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.person-grid > .person-card {
  flex: 1 1 290px;
  max-width: 346px;
}

.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 26px;
}

.person-photo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg-alt);
  box-shadow: 0 0 0 2px var(--orange-border);
  margin-bottom: 20px;
}

.person-card h3 {
  font-size: 1.18rem;
  margin-bottom: 4px;
}

.person-role {
  color: var(--orange);
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.person-credential {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  min-height: 1.3em;    /* reserved even when empty -- see site.js */
}

/* The card is an <a>; keep it looking like a card, not a link. */
.person-card {
  color: inherit;
  text-decoration: none;
}
.person-card h3 { transition: color 0.2s; }
.person-card:hover h3 { color: var(--orange); }
/* .link-text has no base rule -- each card type styles its own cue.
   Match .blog-card so the two read the same. */
.person-card .link-text {
  font-size: 0.85rem;
  color: var(--orange);
  font-weight: 600;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 4px;
  transition: transform 0.2s ease;
}
.person-card:hover .link-text { transform: translateX(4px); }

/* ---- Individual profile pages (<name>-bio/index.html) ----
   The photo sits in the hero next to the name, and the bio runs as one
   readable column beneath. The earlier photo-beside-the-bio layout put a
   240px column next to text that is often only two paragraphs, so short
   bios left a tall empty gutter -- and its narrower measure meant the body
   never lined up with the hero above it. */

/* Shared so the bio column can start exactly under the name rather than
   landing a stray 18px off it. */
:root {
  --bio-photo: 190px;
  --bio-gap:   40px;
  --bio-col:   780px;   /* shared measure: hero block and bio prose */
}

/* One centred column, shared by the back button, the identity block and the
   prose below, so everything hangs off a single left edge. Stacking the photo
   over the name centred it but left a tall narrow ribbon of content in a very
   wide band; side by side fills the width and halves the height. */
/* THIS is the rule that wins on profile pages. It sits after .post-hero-band
   with equal specificity, so the padding set there never applied here -- which
   is why fixing .post-hero-band alone changed nothing on a bio page.
   92px against a 90px fixed nav left 2px of clearance, and the "Back to Team"
   chip sat on the bar. Derived from --nav-h like its siblings. */
.bio-hero { padding: calc(var(--nav-h) + 32px) 0 40px; }
.bio-hero .page-hero-content { max-width: 100%; }

.bio-hero .post-hero-back {
  max-width: var(--bio-col);
  margin-left: auto;
  margin-right: auto;
}

/* fit-content, not the full column: pinned to a fixed 780px the group only
   looked centred when the role happened to be long enough to fill it, so
   "Consulting Director" sat left-heavy while "Consulting Director & Lead
   Technical Writer" looked right. Sizing to the content and centring that
   makes every profile read the same regardless of title length. */
.bio-identity {
  width: fit-content;
  max-width: var(--bio-col);
  margin-left: auto;
  margin-right: auto;
}

/* Back-to-team chip. The bio hero already carries an orange accent -- the ring
   around the photo -- so a solid orange button stacked directly above it put two
   oranges in competition, and made the loudest element in the band the way OUT of
   the page rather than the person it is about. Outline on dark keeps the button
   shape and the hit area, drops the shouting, and lets the ring and the name lead.
   Applies to blog posts too: a solid orange chip is the loudest thing in either
   band, and in both cases the loudest thing should not be the way OUT. */
.post-hero-back .btn {
  background: transparent;
  color: var(--dark-text-muted);
  border: 1px solid var(--dark-border);
}
/* --orange (#F0810E) on --bg-dark (#313A4C) measures 4.27:1. This chip is
   0.78rem, which is normal text, so WCAG AA wants 4.5:1 -- --orange-light
   (#faa558) measures 5.75:1 on the same ground. Border keeps --orange: it is a
   UI boundary, not text, and 4.27:1 clears the 3:1 that non-text needs. */
.post-hero-back .btn:hover {
  background: transparent;
  color: var(--orange-light);
  border-color: var(--orange);
}

.bio-identity {
  display: flex;
  align-items: center;
  gap: var(--bio-gap);
}

.bio-photo {
  width: var(--bio-photo);
  height: var(--bio-photo);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 2px var(--orange);
}

/* Centred identity block. The back chip above is untouched and still sits on the
   column's left edge -- only the eyebrow, name, role, credential and LinkedIn
   button centre, within the text column beside the photo.

   This does soften the "everything hangs off a single left edge" rule noted above
   .bio-hero: the prose below the hero still starts at that edge, so a centred
   header now sits over left-aligned body copy. Reviewed on all five profiles and
   it reads as deliberate, but that is the trade being made. */
.bio-identity-text { min-width: 0; text-align: center; }
.bio-identity-text h1 { margin-bottom: 8px; }

.bio-role {
  color: var(--dark-text);
  font-family: 'Oswald', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.bio-credential {
  font-size: 0.88rem;
  color: var(--dark-text-muted);
  letter-spacing: 0.03em;
  margin-bottom: 0;
}

.bio-linkedin { margin-top: 16px; }

/* Vince has the founder section rather than a bio page, so his sits with
   the caption under the portrait. */
.founder-linkedin { margin: 14px auto 0; }
figure.founder-photo { display: flex; flex-direction: column; align-items: center; }

/* Same measure as an article body, so a profile and a post read alike. */
.bio-body {
  max-width: var(--bio-col);
  margin: 0 auto;
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--text-body);
}
.bio-body p { margin-bottom: 20px; }
.bio-body p:last-child { margin-bottom: 0; }

/* Centre the TEXT on the page axis, not the photo+text group.
   .bio-identity is a flex row centred as a unit, so the photo pushed the name
   block (--bio-photo + --bio-gap) / 2 = 115px to the RIGHT of centre -- while
   .bio-body below is a 780px column centred on the page. Hero and article
   therefore sat on two different axes, which is what reads as "off" when you
   scroll from one into the other.

   A balancing spacer equal to the photo makes the row symmetric
   (photo | gap | text | gap | spacer), so centring the row centres the text.
   Same technique the post hero already uses at mid widths; the post photo is
   110px and this one is 190px, which is why the effect was far more visible
   here.

   Hanging the photo absolutely -- the trick the post hero uses above 1160px --
   does NOT work at this size: the container caps at 1140px, so with a 780px
   text column there is only (1092-780)/2 = 156px of side room and the photo
   needs 230px. It would be clipped off-screen. */
@media (min-width: 761px) {
  .bio-identity {
    max-width: calc(var(--bio-col) + var(--bio-photo) + var(--bio-gap));
  }
  .bio-identity::after {
    content: "";
    flex: 0 0 var(--bio-photo);
  }
}

@media (max-width: 760px) {
  .bio-identity {
    flex-direction: column;
    /* was flex-start: the photo sat hard left while the text under it was
       centred, so the two halves of the same block disagreed. On a phone the
       column is narrow enough that the mismatch is the first thing you see. */
    align-items: center;
    gap: 20px;
  }
  .bio-photo { width: 132px; height: 132px; }
}

@media (max-width: 560px) {
  .person-grid { grid-template-columns: 1fr; }
}

/* --- Post hero: author beside the headline ---
   Mirrors the profile hero so a post and a profile read as one system. The
   photo is smaller than a bio's: a post headline can run to two or three
   lines, and a 190px portrait next to that unbalances the band. */
/* Same construction as the profile hero: the chip sits in a centred column
   but stays left in it, and the photo-plus-headline group sizes to its
   content and centres as a unit. Reusing --bio-col rather than inventing a
   post-specific width is the point -- a post header and a profile header
   should occupy the same measure. */
.post-hero-band .post-hero-back {
  max-width: var(--bio-col);
  margin-left: auto;
  margin-right: auto;
}

/* Case studies pull the back chip out to the container edge.
   The shared rule above caps .post-hero-back at --bio-col (780px) and centres
   it, so on every hero the chip sits at the left edge of a CENTRED box rather
   than at the left edge of the page -- which reads as floating, and reads worst
   on a case study where the headline runs two lines and the eye starts far
   left. Scoped with :has(.case-logo) so blog posts and profiles keep the
   measure-aligned treatment they were tuned for. */
.post-hero-band:has(.case-logo) .post-hero-back {
  max-width: none;
  margin-left: 0;
  margin-right: auto;
}

.post-identity {
  display: flex;
  align-items: center;
  gap: 26px;
  width: fit-content;
  max-width: var(--bio-col);
  margin-left: auto;
  margin-right: auto;
}

.post-author-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 2px var(--orange);
}

/* Two of the seven bylines have no headshot (Milt Songy, Jack Poltorak).
   Initials keep the layout identical rather than collapsing the row for those
   posts. */
.post-author-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-bg);
  border-color: var(--orange-border);
  color: var(--orange);
  font-family: 'Oswald', sans-serif;
  font-size: 1.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.post-identity-text { min-width: 0; text-align: center; }

/* On a wide screen the headline sits dead-centre on the page and the photo
   hangs into the left margin beside it.

   Taking the photo out of flow is what centres the headline. In a flex row the
   photo and its gap are part of the centred box, so the text is always pushed
   right by half of them -- 55px here, 115px on a profile, which is why the
   headline read as off-centre even though every box was correctly centred.

   Vertical centring is top: calc(50% - half-height) rather than
   translateY(-50%), because settleIn animates transform: a centring transform
   would be wiped out the moment the entrance ran.

   Gated on viewport width because the photo needs ~110px of clear space
   outside the 780px column, and that only exists once the page is wide enough.
   Narrower than this the in-flow row above still applies; under 760px it
   stacks. */
@media (min-width: 1160px) {
  .post-identity {
    display: block;
    position: relative;
    width: auto;
    max-width: var(--bio-col);
  }
  .post-author-photo {
    position: absolute;
    left: -136px;
    top: calc(50% - 55px);
  }
}

/* Between the two, there is not enough margin to hang the photo but still
   enough width to keep the row -- and a bare row puts the headline 55px right
   of centre, which is the whole problem this is fixing. An empty box mirroring
   the photo balances the row so the headline stays centred: 84 + 26 of gap on
   the left, 26 of gap + 84 on the right. Costs the headline ~110px of measure
   in this band, which is the cheaper trade. */
@media (min-width: 761px) and (max-width: 1159px) {
  .post-identity::after {
    content: "";
    flex: 0 0 110px;
  }
}

@media (max-width: 760px) {
  .post-identity {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .post-author-photo { width: 64px; height: 64px; }
  .post-author-initials { font-size: 1.15rem; }
}

/* ===== Events =====
   The media panel is deliberately dark. Three of the four supplied logos are
   drawn for dark backgrounds -- the WorkBoat Show mark is white on transparent,
   and on a light card only its red bird survives, with "INTERNATIONAL WORKBOAT
   SHOW" rendering invisible. Navy is the one background all of them read on,
   including the solid-purple Clemson tile. Verified by compositing each logo
   over both before choosing. */
.event-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.event-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color 0.2s, box-shadow 0.2s, translate 0.2s ease;
}

/* Matches the .card hover the rest of the site uses. The lift is `translate`,
   not `transform`: transform is owned by the reveal, and
   .event-card.reveal.is-visible sets it to none at (0,3,0) -- a hover transform
   at (0,2,0) would lose that fight silently. `translate` is an independent
   property, so the two never compete. */
.event-card:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
  translate: 0 -2px;
}

/* Fixed-height logo plate. The three marks share no shape -- two are square
   (300x300, 620x608) and the WorkBoat wordmark is 200x52, nearly 4:1 -- so
   sizing the IMAGE consistently is impossible. Size the plate instead and let
   each mark sit centred in it. Consistent framing reads as deliberate;
   inconsistent image heights read as broken. */
.event-media {
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 148px;
  padding: 24px 28px;
}

/* Contain, never cover: these are logos and badges, and cropping one to fill a
   panel would cut the wordmark off. */
.event-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: auto;
  height: auto;
  object-fit: contain;
}

.event-body { padding: 30px 32px; display: flex; flex-direction: column; flex: 1; }
.event-body h3 { margin-bottom: 10px; }

.event-when {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.event-where {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 16px;
}

.event-body .btn { margin-top: auto; align-self: flex-start; }

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

@media (max-width: 760px) {
  .event-media { height: 124px; padding: 20px 24px; }
  .event-body { padding: 24px; }
}

/* ===== Case studies ===== */
/* One tile today, so the grid must not stretch a lone card across the full
   width. Cap it and let it sit left; a second study drops in beside it with
   no change. */
.case-tiles { align-items: start; }
/* A single study should sit centred rather than hugging the left column of a
   two-column grid. Spanning both tracks and centring within that span does it
   without :has(), and needs no change when a second study lands -- :only-child
   simply stops matching. */
.case-tiles > :only-child { max-width: 520px; grid-column: 1 / -1; justify-self: center; }

.case-tile {
  display: block;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* Dark panel for the same reason as the events page: the Bayou mark is a
   cream oval that washes out on white. */
.case-tile-media {
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.case-tile-media img { max-width: 78%; height: auto; }

.case-tile-body { padding: 28px 30px 30px; }
.case-tile-body h3 { margin: 6px 0 10px; }

.case-tile-stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  list-style: none;
  margin: 18px 0 16px;
  padding: 0;
}
.case-tile-stats li { display: flex; flex-direction: column; text-align: center; }
.case-tile-stats strong {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  color: var(--orange);
  line-height: 1.1;
}
.case-tile-stats span { font-size: 0.8rem; color: var(--text-muted); }

/* --- the study itself --- */
.case-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}

/* The facts rail tracks the reader down the page rather than scrolling off
   after the first screen. Offset by the nav so it never hides beneath it. */
.case-facts { position: sticky; top: calc(var(--nav-h) + 24px); }
.case-facts .feature-list li { font-size: 0.92rem; }
.case-facts .btn { width: 100%; text-align: center; }

.case-body > h2:first-of-type { margin-top: 0; }
.case-body h2 { margin: 40px 0 16px; }
.case-body p { margin-bottom: 16px; }

.pull-quote {
  margin: 26px 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--orange);
}
.pull-quote p {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 8px;
}
.pull-quote cite {
  font-style: normal;
  font-size: 0.86rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The approved client testimonial closes the page, so it is deliberately
   heavier than the pull quotes running through the narrative. */
.case-testimonial {
  margin: 48px 0 0;
  padding: 34px 36px;
  background: var(--bg-dark);
  border-radius: 6px;
  border-left: 4px solid var(--orange);
}
.case-testimonial p {
  color: var(--dark-text);
  font-size: 1.14rem;
  line-height: 1.65;
  margin-bottom: 14px;
}
.case-testimonial cite {
  font-style: normal;
  color: var(--orange);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The client logo in the hero is a wordmark, not a headshot: square-cropping
   it in a circle would cut the name off. */
.case-logo {
  border-radius: 6px;
  width: auto;
  max-width: 180px;
  height: auto;
  max-height: 96px;
  background: rgba(255, 255, 255, 0.06);
  padding: 10px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .case-layout { grid-template-columns: 1fr; gap: 36px; }
  .case-facts { position: static; }
}

/* The hero hang offsets are derived from the 110px author circle. This logo is
   a 180x96 box, so it needs its own: 180 + the 26px gap to clear the text
   column, and half its own height to sit on the centre line. Without this it
   inherits the circle's numbers and lands both too far right and too low. */
/* The generic gate is 1160px because a 110px circle needs 136px of clear
   margin. This logo is 180px wide and needs 206px, so it cannot hang until
   the viewport is wider still -- at 1160 it lands 23px off the left edge of
   the screen. Its own gate is 1260. */
@media (min-width: 1260px) {
  .case-logo {
    width: 180px;
    height: 96px;
    left: -206px;
    top: calc(50% - 48px);
  }
}

/* Between the generic gate and the case gate the logo must NOT hang, so undo
   the absolute positioning the generic rule applies and restore the balanced
   row, mirror included. */
@media (min-width: 1160px) and (max-width: 1259px) {
  .post-identity:has(.case-logo) {
    display: flex;
    align-items: center;
    gap: 26px;
    width: fit-content;
  }
  .post-identity:has(.case-logo)::after { content: ""; flex: 0 0 160px; }
  .case-logo {
    position: static;
    left: auto;
    top: auto;
    width: 160px;
    height: 84px;
  }
}

/* In the mid band the identity row is balanced by an empty box mirroring the
   photo. That box is sized for the 110px author circle, so on a case study --
   where the logo is wider -- it under-compensates and pushes the headline off
   centre by half the difference. Pin the logo to a known width here and match
   the mirror to it. */
@media (min-width: 761px) and (max-width: 1159px) {
  .case-logo { width: 160px; height: 84px; }
  .post-identity:has(.case-logo)::after { flex-basis: 160px; }
}


/* Required risk-management disclaimers.
   CLAIMS-AUDIT.md marks all three "Use verbatim -- manages legal risk", and
   they appeared on NO page of the site. Placed in the footer so they are
   present site-wide rather than only on the pages someone remembered, and
   above the copyright line so they read as part of the legal block rather
   than as marketing copy. Deliberately quiet: this is disclosure, not a
   selling point. */
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 16px;
  margin-bottom: 4px;
}
.footer-legal p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--footer-muted, rgba(255,255,255,0.55));
}
@media (min-width: 761px) {
  .footer-legal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 22px;
  }
}