/* ============================================
   McMorrow Consulting · Master Stylesheet
   Build: May 2026
   Palette: #e1dfd9 bg · #1d231c dark · #209d50 green · #fff white
   Fonts:   Archivo Black (headings) · Space Grotesk (body)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── Reset ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Design Tokens ────────────────────────────── */
:root {
  --bg:          #e1dfd9;
  --dark:        #1d231c;
  --green:       #209d50;
  --green-dark:  #187a3e;
  --white:       #ffffff;
  --grey:        #f0efe9;

  --font-h:  'Archivo Black', sans-serif;
  --font-b:  'Space Grotesk', sans-serif;

  --nav-h:   92px;
  --wrap:    1200px;
  --wrap-sm: 760px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ─────────────────────────────────────── */
body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ───────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-h);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h1     { font-size: clamp(2.5rem, 5vw, 4rem); }
h2     { font-size: clamp(1.875rem, 3.5vw, 3rem); }
h3     { font-size: clamp(1.25rem, 2.5vw, 1.625rem); }
h4     { font-size: 1.0625rem; letter-spacing: -0.01em; }

p      { font-size: 1.0625rem; line-height: 1.75; max-width: 65ch; }
p.lead { font-size: 1.1875rem; line-height: 1.65; }

.label {
  display: inline-block;
  font-family: var(--font-b);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.875rem;
}

/* ── Layout ───────────────────────────────────── */
.wrap    { max-width: var(--wrap);    margin: 0 auto; padding: 0 1.75rem; }
.wrap-sm { max-width: var(--wrap-sm); margin: 0 auto; padding: 0 1.75rem; }

section       { padding: 6rem 0; }
section.tight { padding: 3.5rem 0; }

/* ── Navigation ───────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease), backdrop-filter 0.35s, box-shadow 0.35s var(--ease);
}

.nav.transparent {
  background: transparent;
}

.nav.solid {
  background: var(--dark);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07);
}

.nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.75rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.nav-logo:hover { opacity: 0.75; }

.nav-logo-img {
  height: 72px;
  width: auto;
  display: block;
  max-height: calc(var(--nav-h) - 12px);
}

/* Footer logo image (if used) */
.footer-logo-img {
  height: 22px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--white); }

.nav-cta {
  background: var(--green) !important;
  color: var(--white) !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 300px;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  transition: background 0.2s !important;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--green-dark) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0; bottom: 0;
    background: var(--dark);
    flex-direction: column;
    padding: 2.5rem 1.75rem;
    gap: 0;
    align-items: flex-start;
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    font-size: 1.375rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    width: 100%;
    color: var(--white);
  }
  .nav-cta {
    margin-top: 1.5rem;
    background: var(--green) !important;
    padding: 0.875rem 2rem !important;
    border-radius: 300px;
    display: inline-flex;
    border-bottom: none !important;
    width: auto !important;
    font-size: 1rem !important;
  }
  .nav-toggle { display: flex; }
}

/* ── Buttons ──────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.875rem;
  border-radius: 300px;
  font-family: var(--font-b);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: all 0.2s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}

.btn-green {
  background: var(--green);
  color: var(--white);
  border: 2px solid var(--green);
}
.btn-green:hover { background: var(--green-dark); border-color: var(--green-dark); }

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.45);
}
.btn-outline-white:hover { border-color: var(--white); }

.btn-outline-dark {
  background: transparent;
  color: var(--dark);
  border: 2px solid rgba(29,35,28,0.35);
}
.btn-outline-dark:hover { background: var(--dark); color: var(--white); border-color: var(--dark); }

.btn-group {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
}

/* ── Hero ─────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--dark);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Direct video embed */
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vimeo / iframe embed */
.hero-media iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* 16:9 aspect ratio trick */
  height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(29, 35, 28, 0.62);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 5rem) 1.75rem 6rem;
  width: 100%;
}

.hero-content h1 {
  color: var(--white);
  max-width: 18ch;
  margin-bottom: 1.5rem;
}

.hero-content h1 em {
  color: var(--green);
  font-style: normal;
}

/* Hero emphasis: green text on both emphasised phrases, no underline */

.hero-content p {
  color: rgba(255,255,255,0.78);
  font-size: 1.125rem;
  max-width: 52ch;
  margin-bottom: 2.5rem;
}

/* Inner page hero (no video) */
.page-hero {
  background: var(--dark);
  color: var(--white);
  padding: calc(var(--nav-h) + 4rem) 0 4.5rem;
}

/* Tightened variant: closes the gap between hero and first content section */
.page-hero--tight { padding-bottom: 2.5rem; }
.page-hero--tight + section { padding-top: 3.5rem; }

.page-hero h1 { margin-bottom: 1.25rem; }
.page-hero p.lead { color: rgba(255,255,255,0.78); max-width: 56ch; }

/* ── Proof Bar ────────────────────────────────── */
.proof-bar {
  background: var(--white);
  padding: 2.75rem 0;
  border-bottom: 1px solid rgba(29,35,28,0.07);
}

.proof-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  text-align: center;
}

.proof-stat {
  font-size: 0.9375rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.proof-stat + .proof-stat::before {
  content: '/';
  color: rgba(29,35,28,0.25);
  margin-right: 0.25rem;
}

.proof-partners {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.proof-partners-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(29,35,28,0.38);
  margin-right: 1.25rem;
  white-space: nowrap;
}

.proof-partner {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(29,35,28,0.4);
  transition: color 0.2s;
  padding: 0.2rem 0;
}
.proof-partner:hover { color: var(--dark); }

.proof-partner + .proof-partner::before {
  content: '·';
  color: rgba(29,35,28,0.2);
  margin: 0 0.625rem;
}

/* ── Section intro centred treatment ──────────── */
.section-intro h2 { margin-bottom: 1.25rem; }
.section-intro p  { margin-top: 0; }
.section-intro--centred {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.section-intro--centred p { margin-left: auto; margin-right: auto; }

/* ── Service Cards (home summary) ─────────────── */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}

/* Five-card layout: 3 across the top, 2 centred underneath */
.service-grid--five {
  grid-template-columns: repeat(6, 1fr);
}
.service-grid--five > .service-card:nth-child(1),
.service-grid--five > .service-card:nth-child(2),
.service-grid--five > .service-card:nth-child(3) { grid-column: span 2; }
.service-grid--five > .service-card:nth-child(4) { grid-column: 2 / span 2; }
.service-grid--five > .service-card:nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 980px) {
  .service-grid--five { grid-template-columns: repeat(2, 1fr); }
  .service-grid--five > .service-card:nth-child(n) { grid-column: auto; }
  .service-grid--five > .service-card:nth-child(5) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-grid--five { grid-template-columns: 1fr; }
  .service-grid--five > .service-card:nth-child(5) { grid-column: auto; }
}

.service-card {
  background: var(--white);
  border-radius: 14px;
  padding: 2.25rem;
  border: 1px solid rgba(29,35,28,0.06);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(29,35,28,0.12);
  border-color: rgba(32,157,80,0.18);
}

.service-card h3 { margin-bottom: 0.75rem; font-size: 1.25rem; }

.service-card p {
  font-size: 0.9375rem;
  color: rgba(29,35,28,0.68);
  flex: 1;
  margin-bottom: 1.5rem;
  max-width: none;
}

/* Centred card variant: label, heading, body and link all centre-aligned.
   min-height equalises all 5 cards in the home-page grid. Items are pinned
   to flex-start so the label and heading stay tight at the top regardless
   of card body length. */
.service-card--centred {
  text-align: center;
  align-items: center;
  justify-content: flex-start;
  min-height: 280px;
}
.service-card--centred .label {
  margin: 0 auto 0.5rem;
  flex-shrink: 0;
}
.service-card--centred h3 {
  flex-shrink: 0;
  margin-bottom: 0.875rem;
}
.service-card--centred p { max-width: 32ch; }
.service-card--centred .card-link { margin-left: auto; margin-right: auto; }

/* Home page featured CloudFest preview: copy bolded to combat the
   translucent festival background overlay. */
.home-featured-case .case-feature p {
  font-weight: 500;
  color: rgba(29,35,28,0.88);
}

.card-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.2s;
  margin-top: auto;
}
.card-link:hover { gap: 0.6rem; }

/* ── Featured Case Study (home) ───────────────── */
/* Festival image sits behind the section with a translucent cream-toned
   overlay so the photo carries through as atmosphere — visible enough to
   read as a backdrop, dim enough to keep the headline and metric cards
   crisp on top. */
.home-featured-case {
  background:
    linear-gradient(rgba(225,223,217,0.72), rgba(225,223,217,0.80)),
    url('/assets/cloudfest/cf-festival.jpg') center / cover no-repeat;
  background-attachment: fixed;
}

.case-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

@media (max-width: 900px) {
  .case-feature { grid-template-columns: 1fr; gap: 2.5rem; }
}

.case-feature h2 { margin-bottom: 1rem; }
.case-feature p  { color: rgba(29,35,28,0.7); margin-bottom: 2rem; }

.case-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.case-metric {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  background: var(--white);
  border-radius: 10px;
  border-left: 3px solid var(--green);
}

.case-metric-num {
  font-family: var(--font-h);
  font-size: 1.5rem;
  color: var(--green);
  white-space: nowrap;
}

.case-metric-label {
  font-size: 0.875rem;
  color: rgba(29,35,28,0.62);
  line-height: 1.4;
}

/* Tags */
.tag-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 1.125rem;
}

.tag {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.225rem 0.55rem;
  border-radius: 300px;
  background: rgba(32,157,80,0.1);
  color: var(--green);
}

/* ── Case Studies Index ───────────────────────── */
/* 6-col grid: each standard card spans 2 of 6 = 3 per row. align-items: start
   so cards take natural height — outcomes sit directly under description on
   shorter cards instead of being pushed to the bottom of a stretched row.
   The taller Portfolio card extends below its row-mates as intentional rhythm. */
.case-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}

/* Tiered layout grouping cases by scale, all rows matching CloudFest width.
   Row 1: CloudFest (featured, span 6).
   Row 2: MSP + PDW (each span 3 = 50/50 multi-track flagships).
   Row 3: UXC + Web3 Live + ETM (default span 2 = 33/33/33).
   Row 4: Bespoke Portfolio (span 6 aggregator at the foot). */
.case-grid > .case-card { grid-column: span 2; }
.case-grid > .case-card--featured { grid-column: 1 / -1; }
.case-grid > .case-card--portfolio { grid-column: 1 / -1; }
.case-grid > .case-card:nth-of-type(2),
.case-grid > .case-card:nth-of-type(3) { grid-column: span 3; }

/* Uniform min-height across the five standard cards so rows 2 and 3 lock
   to a single shared height. CloudFest and Portfolio are exempt (their
   content density justifies taller treatments). */
.case-grid > .case-card:not(.case-card--featured):not(.case-card--portfolio) {
  min-height: 720px;
}

@media (max-width: 1024px) {
  .case-grid { grid-template-columns: repeat(4, 1fr); }
  .case-grid > .case-card { grid-column: span 2; }
  .case-grid > .case-card:nth-of-type(2),
  .case-grid > .case-card:nth-of-type(3) { grid-column: span 2; }
}
@media (max-width: 580px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-grid > .case-card,
  .case-grid > .case-card--featured,
  .case-grid > .case-card--portfolio { grid-column: 1 / -1; }
  .case-grid > .case-card:not(.case-card--featured):not(.case-card--portfolio) {
    min-height: auto;
  }
}

/* ── Standard case card (uniform structure) ───── */
.case-card {
  background: var(--white);
  border-radius: 14px;
  padding: 0;
  border: 1px solid rgba(29,35,28,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header: 180px tall — either a photo OR a typographic block.
   Both variants carry a display-number flourish and case label.
   This is the load-bearing piece that gives every standard card the same shape. */
.case-card-header {
  position: relative;
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}
.case-card-header--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-card-header--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(29,35,28,0.05) 0%, rgba(29,35,28,0.65) 100%);
  pointer-events: none;
}
.case-card-header--block {
  background: var(--dark);
  color: var(--white);
}
.case-card-header--block-green {
  background: var(--green);
  color: var(--white);
}

/* Case label badge: top-left of header */
.case-card-header-label {
  position: absolute;
  top: 1rem;
  left: 1.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  z-index: 2;
  margin: 0;
}
.case-card-header--photo .case-card-header-label {
  background: rgba(29,35,28,0.78);
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  top: 1rem;
  left: 1rem;
}
.case-card-header--block-green .case-card-header-label {
  color: var(--white);
  opacity: 0.85;
}

/* Display number + sub-label: stacked at bottom-right.
   Sub-label sits ABOVE the display number with clear vertical gap so the
   sub doesn't run through the middle of the number (the prior bug). */
.case-card-display {
  position: absolute;
  bottom: 0.875rem;
  right: 1.25rem;
  font-family: var(--font-h);
  font-size: 3.25rem;
  line-height: 0.85;
  color: var(--white);
  letter-spacing: -0.035em;
  z-index: 1;
  margin: 0;
  max-width: none;
}
.case-card-header--photo .case-card-display {
  text-shadow: 0 4px 18px rgba(29,35,28,0.55);
}
.case-card-header--block .case-card-display {
  color: var(--green);
}
.case-card-header--block-green .case-card-display {
  color: var(--white);
}
.case-card-display-sub {
  position: absolute;
  bottom: 4.125rem;
  right: 1.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  z-index: 2;
  margin: 0;
  max-width: none;
}
.case-card-header--photo .case-card-display-sub {
  text-shadow: 0 2px 8px rgba(29,35,28,0.8);
}
.case-card-header--block .case-card-display-sub {
  color: rgba(255,255,255,0.62);
}
.case-card-header--block-green .case-card-display-sub {
  color: rgba(255,255,255,0.85);
}

/* Card body: title, role, tags, description, outcomes. Flexes to fill. */
.case-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.case-card-body h3 {
  font-size: 1.25rem;
  margin-bottom: 0.375rem;
  line-height: 1.1;
}

.case-card-role {
  font-size: 0.8125rem;
  color: rgba(29,35,28,0.5);
  margin-bottom: 0.875rem;
  line-height: 1.45;
  max-width: none;
  flex: none;
}

.case-card-body .tag-row {
  margin-bottom: 1rem;
  flex: none;
}

/* Description paragraph: scoped with :not(.case-card-role) so the role line
   above doesn't inherit flex: 1 and push the tags down with a huge empty gap. */
.case-card-body > p:not(.case-card-role) {
  font-size: 0.9375rem;
  color: rgba(29,35,28,0.72);
  margin-bottom: 1.25rem;
  flex: 1;
  max-width: none;
  line-height: 1.6;
}

.case-outcomes {
  margin-top: auto;
  border-top: 1px solid rgba(29,35,28,0.07);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.outcome-line {
  font-size: 0.8125rem;
  color: rgba(29,35,28,0.72);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  line-height: 1.5;
}
.outcome-line::before {
  content: '→';
  color: var(--green);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* ── Featured case card (CloudFest only — B+C hybrid) ───
   1. Photo hero with title and tags overlay (340px)
   2. 5-cell stats strip immediately after the hero (top-line stats first)
   3. 2-col body: narrative left, sidebar right (anchor partners + scope)
       — display-number flourish behind the body as the signature touch
   4. Dark pull-quote band at the foot carrying the 10-weeks-ahead claim
*/
.case-card--featured {
  grid-column: 1 / -1;
  padding: 0;
  overflow: hidden;
  background: var(--white);
  border-radius: 14px;
  border: 1px solid rgba(29,35,28,0.06);
  display: flex;
  flex-direction: column;
}

/* Featured hero photo strip */
.case-feature-hero {
  position: relative;
  height: 360px;
  overflow: hidden;
}
.case-feature-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-feature-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29,35,28,0.05) 0%, rgba(29,35,28,0.45) 50%, rgba(29,35,28,0.88) 100%);
  z-index: 1;
}
.case-feature-hero-meta {
  position: absolute;
  left: 3rem;
  bottom: 2.5rem;
  right: 3rem;
  z-index: 2;
  color: var(--white);
  max-width: 80%;
}
.case-feature-hero-meta .label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.625rem;
}
.case-feature-hero-meta h3 {
  font-size: clamp(2.25rem, 4vw, 3rem);
  color: var(--white);
  margin: 0 0 0.5rem;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.case-feature-hero-meta .case-card-role {
  color: rgba(255,255,255,0.82);
  font-size: 0.9375rem;
  margin-bottom: 1rem;
  max-width: 62ch;
}
.case-feature-hero-meta .tag-row { margin-bottom: 0; }
.case-feature-hero-meta .tag {
  background: rgba(255,255,255,0.16);
  color: var(--white);
  backdrop-filter: blur(4px);
}

/* Stats strip — moved to the TOP per session 6 round 2 feedback */
.case-feature-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid rgba(29,35,28,0.07);
  background: var(--white);
}
.case-feature-stat {
  padding: 1.875rem 1.5rem;
  border-right: 1px solid rgba(29,35,28,0.07);
}
.case-feature-stat:last-child { border-right: none; }
.case-feature-stat-num {
  font-family: var(--font-h);
  font-size: 2.125rem;
  color: var(--green);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 0.5rem;
  display: block;
  max-width: none;
}
.case-feature-stat-label {
  font-size: 0.8125rem;
  color: rgba(29,35,28,0.6);
  line-height: 1.45;
  margin: 0;
  max-width: none;
}

/* 2-col body */
.case-feature-body {
  position: relative;
  padding: 3rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
}
.case-feature-display-flourish {
  position: absolute;
  top: -1.6rem;
  right: 2.5rem;
  font-family: var(--font-h);
  font-size: 9rem;
  line-height: 0.85;
  color: var(--green);
  letter-spacing: -0.045em;
  z-index: 0;
  opacity: 0.13;
  pointer-events: none;
  margin: 0;
  max-width: none;
}
.case-feature-narrative {
  position: relative;
  z-index: 1;
}
.case-feature-narrative .lead {
  font-size: 1.0625rem;
  color: var(--dark);
  font-weight: 500;
  margin: 0 0 1.5rem;
  max-width: none;
  line-height: 1.55;
}
.case-feature-pillar {
  margin-top: 1.5rem;
}
.case-feature-pillar h4 {
  font-family: var(--font-h);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 0.625rem;
}
.case-feature-pillar p {
  font-size: 0.9375rem;
  color: rgba(29,35,28,0.78);
  line-height: 1.65;
  max-width: none;
  margin: 0;
}

/* Sidebar: anchor partners + scope panel — replaces the half-filled outcomes box */
.case-feature-sidebar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-self: start;
}
.case-feature-sidebar-block {
  background: var(--bg);
  border-radius: 12px;
  padding: 1.5rem 1.625rem;
}
.case-feature-sidebar-block h4 {
  font-family: var(--font-h);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 0.875rem;
}
.case-feature-sidebar-block p {
  font-size: 0.875rem;
  color: rgba(29,35,28,0.72);
  line-height: 1.6;
  margin: 0;
  max-width: none;
}
.case-feature-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.case-feature-sidebar-list .partner {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(29,35,28,0.78);
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(29,35,28,0.06);
}
.case-feature-sidebar-list .partner:last-child { border-bottom: none; }

/* Pull-quote band at foot.
   Festival image sits behind a heavy dark overlay so the "10 weeks ahead"
   claim reads as the dominant element while the photo carries scale. */
.case-feature-pullquote {
  background:
    linear-gradient(rgba(29,35,28,0.82), rgba(29,35,28,0.86)),
    url('/assets/cloudfest/cf-festival.jpg') center / cover no-repeat;
  color: var(--white);
  padding: 2.75rem 3rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.75rem;
  align-items: center;
}
.case-feature-pullquote-big {
  font-family: var(--font-h);
  font-size: 4.5rem;
  line-height: 0.85;
  color: var(--green);
  letter-spacing: -0.04em;
  margin: 0;
  max-width: none;
}
.case-feature-pullquote-text {
  font-family: var(--font-h);
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--white);
  max-width: 44ch;
  margin: 0;
}
.case-feature-pullquote-attr {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-top: 0.75rem;
}

/* Featured-card responsive */
@media (max-width: 980px) {
  .case-feature-stats { grid-template-columns: repeat(2, 1fr); }
  .case-feature-stat { border-right: 1px solid rgba(29,35,28,0.07); border-bottom: 1px solid rgba(29,35,28,0.07); }
  .case-feature-stat:nth-child(even) { border-right: none; }
  .case-feature-stat:nth-last-child(-n+1) { border-bottom: none; }
  .case-feature-body { grid-template-columns: 1fr; gap: 2rem; padding: 2.25rem; }
  .case-feature-display-flourish { font-size: 6rem; right: 1.5rem; top: -1rem; }
  .case-feature-pullquote { grid-template-columns: 1fr; gap: 1.25rem; padding: 2.25rem; }
  .case-feature-pullquote-big { font-size: 3rem; }
  .case-feature-pullquote-text { font-size: 1.25rem; }
  .case-feature-hero { height: 280px; }
  .case-feature-hero-meta { left: 2rem; right: 2rem; bottom: 2rem; max-width: 100%; }
  .case-feature-hero-meta h3 { font-size: 2rem; }
}

/* ── Case card inline testimonial ─────────────── */
.case-card .testimonial {
  margin: 1.5rem 0 0 0;
  padding: 1rem 1.25rem;
}
.case-card .testimonial-quote {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 0.625rem;
}
.case-card .testimonial-attr {
  font-size: 0.8125rem;
}

/* ── Bespoke Client Events Portfolio (case 07) ─────────────────
   Full-width aggregator at the foot of the grid, matching CloudFest width.
   Header gets a taller photo strip so the panoramic crop reads as a
   masthead. Body laid out in two columns: the lead narrative on the left,
   the engagement expandables on the right. Outcomes run full-width
   underneath as the summary block. */
.case-card--portfolio .case-card-body > p:not(.case-card-role) {
  flex: none;
}
.case-card--portfolio .case-card-header {
  height: 280px;
}
.case-card--portfolio .case-card-display {
  font-size: 5rem;
}
.case-card--portfolio .case-card-display-sub {
  bottom: 6rem;
}
.case-card--portfolio .case-card-body {
  padding: 2.5rem 3rem;
  display: grid;
  grid-template-columns: 1.05fr 1.4fr;
  gap: 2rem 3rem;
  grid-template-areas:
    "title    title"
    "role     role"
    "tags     tags"
    "leftcol  engagements";
  align-items: start;
}
.case-card--portfolio .case-card-body > h3 { grid-area: title; }
.case-card--portfolio .case-card-body > .case-card-role { grid-area: role; }
.case-card--portfolio .case-card-body > .tag-row { grid-area: tags; }
.case-card--portfolio .portfolio-left-col {
  grid-area: leftcol;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.case-card--portfolio .portfolio-left-col > p {
  margin: 0;
  max-width: none;
}
.case-card--portfolio .portfolio-engagements { grid-area: engagements; margin-top: 0; }
.case-card--portfolio .case-outcomes--portfolio {
  margin-top: 0;
  border-top: 1px solid rgba(29,35,28,0.07);
  padding-top: 1.25rem;
}

@media (max-width: 900px) {
  .case-card--portfolio .case-card-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "role"
      "tags"
      "leftcol"
      "engagements";
    padding: 2rem;
  }
  .case-card--portfolio .case-card-header { height: 220px; }
}
.portfolio-engagements {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
}
.portfolio-engagement {
  border-top: 1px solid rgba(29,35,28,0.08);
}
.portfolio-engagement:last-of-type {
  border-bottom: 1px solid rgba(29,35,28,0.08);
}
.portfolio-engagement summary {
  list-style: none;
  cursor: pointer;
  padding: 0.875rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  transition: color 0.2s var(--ease);
}
.portfolio-engagement summary::-webkit-details-marker { display: none; }
.portfolio-engagement summary:hover .portfolio-engagement-name { color: var(--green-dark); }
.portfolio-engagement-name {
  font-family: var(--font-h);
  font-size: 0.9375rem;
  color: var(--dark);
  letter-spacing: -0.01em;
  flex: 1;
  line-height: 1.25;
  transition: color 0.2s var(--ease);
}
.portfolio-engagement-meta {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(29,35,28,0.5);
  white-space: nowrap;
}
.portfolio-engagement-toggle {
  font-family: var(--font-h);
  font-size: 1.125rem;
  color: var(--green);
  line-height: 1;
  transition: transform 0.25s var(--ease);
  display: inline-block;
  flex-shrink: 0;
}
.portfolio-engagement[open] .portfolio-engagement-toggle {
  transform: rotate(45deg);
}
.portfolio-engagement-detail {
  padding: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.portfolio-engagement-detail p {
  font-size: 0.875rem;
  color: rgba(29,35,28,0.72);
  line-height: 1.6;
  margin: 0;
  max-width: none;
}
.portfolio-engagement-detail strong { color: var(--dark); font-weight: 600; }
.portfolio-engagement-outcomes {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.375rem;
}
.portfolio-engagement-outcomes .outcome-line {
  font-size: 0.8125rem;
}
/* Bullet list inside a portfolio-engagement expandable (used for the
   "Other engagements" condensed bullet view) */
.portfolio-engagement-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.portfolio-engagement-bullets li {
  font-size: 0.8125rem;
  color: rgba(29,35,28,0.7);
  line-height: 1.55;
  padding-left: 1.125rem;
  position: relative;
}
.portfolio-engagement-bullets li::before {
  content: '→';
  color: var(--green);
  font-size: 0.75rem;
  position: absolute;
  left: 0;
  top: 0.15rem;
}
.portfolio-engagement-bullets li strong { color: var(--dark); font-weight: 600; }

/* ── Services Page Pillars ────────────────────── */
.pillar {
  padding: 5rem 0;
  border-bottom: 1px solid rgba(29,35,28,0.08);
}
.pillar:last-of-type { border-bottom: none; }

.pillar-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .pillar-inner { grid-template-columns: 1fr; gap: 2rem; }
}

.pillar-sidebar { position: sticky; top: calc(var(--nav-h) + 2rem); }

.pillar-num {
  font-family: var(--font-h);
  font-size: 5.5rem;
  color: var(--green);
  opacity: 0.18;
  line-height: 1;
  margin-bottom: 0.75rem;
  letter-spacing: -0.03em;
  text-align: center;
  display: block;
}

.pillar-sidebar h3 { margin-bottom: 0.5rem; }

.pillar-best-for {
  font-size: 0.875rem;
  color: rgba(29,35,28,0.6);
  margin-top: 0.75rem;
  max-width: none;
}

.pillar-includes {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pillar-includes li {
  font-size: 0.9375rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(29,35,28,0.07);
  color: rgba(29,35,28,0.78);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.pillar-includes li::before {
  content: '→';
  color: var(--green);
  font-size: 0.8125rem;
  flex-shrink: 0;
}

.pillar-proof {
  background: var(--grey);
  border-radius: 12px;
  padding: 1.625rem;
  margin-top: 2rem;
  border-left: 3px solid var(--green);
}
.pillar-proof-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.75rem;
  display: block;
}
.pillar-proof p { font-size: 0.9375rem; max-width: none; }

.advisory-callout {
  background: var(--dark);
  color: var(--white);
  border-radius: 16px;
  padding: 3rem;
  margin: 3rem 0;
}
.advisory-callout h3 { margin-bottom: 0.875rem; }
.advisory-callout p { color: rgba(255,255,255,0.78); margin-bottom: 0; max-width: 56ch; }
.advisory-callout .btn { margin-top: 1.75rem; }

/* ── Approach Page ────────────────────────────── */

/* Six-phase grid: 3 across the top, 3 across the bottom on wide screens */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (max-width: 960px) { .phase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .phase-grid { grid-template-columns: 1fr; } }

.phase-card {
  background: var(--white);
  border-radius: 14px;
  padding: 2rem;
  border: 1px solid rgba(29,35,28,0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.phase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(29,35,28,0.12);
  border-color: rgba(32,157,80,0.18);
}

.phase-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(29,35,28,0.07);
}
.phase-num {
  font-family: var(--font-h);
  font-size: 1.875rem;
  color: var(--green);
  letter-spacing: -0.02em;
  line-height: 1;
}
.phase-card h3 {
  font-size: 1.25rem;
  margin: 0;
}

.phase-what {
  font-size: 0.9375rem;
  color: rgba(29,35,28,0.72);
  margin-bottom: 1.25rem;
  max-width: none;
}

.phase-ai {
  background: var(--grey);
  border-radius: 10px;
  padding: 1rem 1.125rem;
  border-left: 3px solid var(--green);
  margin-top: auto;
}
.phase-ai-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.5rem;
}
.phase-ai p {
  font-size: 0.875rem;
  color: rgba(29,35,28,0.68);
  margin: 0;
  max-width: none;
  line-height: 1.55;
}

/* Three-capability grid for the operating layer section */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (max-width: 820px) { .capability-grid { grid-template-columns: 1fr; } }

/* Home page variant: stack vertically inside the case-feature right column */
.capability-grid--home {
  grid-template-columns: 1fr;
  margin-top: 0;
  gap: 0.875rem;
}

.capability-card {
  background: var(--bg);
  border-radius: 14px;
  padding: 2rem;
  border: 1px solid rgba(29,35,28,0.06);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.capability-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(29,35,28,0.08);
}
.capability-card h4 {
  margin-bottom: 0.875rem;
  font-size: 1.125rem;
}
.capability-card p {
  font-size: 0.9375rem;
  color: rgba(29,35,28,0.7);
  max-width: none;
  margin: 0;
}

.advisory-box {
  background: var(--dark);
  color: var(--white);
  border-radius: 16px;
  padding: 3rem 3.5rem;
}
.advisory-box h2 { margin-bottom: 1rem; }
.advisory-box p  { color: rgba(255,255,255,0.78); max-width: 52ch; margin-bottom: 0; }
.advisory-box .advisory-what { margin: 2rem 0; display: flex; flex-direction: column; gap: 0; }
.advisory-box .advisory-what li {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.78);
  padding: 0.625rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.advisory-box .advisory-what li::before { content: '→'; color: var(--green); font-size: 0.8125rem; flex-shrink: 0; }
.advisory-box .advisory-what li:last-child { border-bottom: none; }

.pilot-box {
  background: var(--grey);
  border-radius: 16px;
  padding: 3rem 3.5rem;
  border: 1px solid rgba(29,35,28,0.08);
}
.pilot-box h2 { margin-bottom: 1.25rem; }
.pilot-box p  { color: rgba(29,35,28,0.75); margin-bottom: 1.25rem; max-width: 62ch; }
.pilot-box p:last-of-type { margin-bottom: 0; }

/* ── AI capability layer (merged Advisory + Pilot panel) ────── */
.capability-layer-box {
  background: var(--dark);
  color: var(--white);
  border-radius: 16px;
  padding: 3.5rem;
}
.capability-layer-box > .label {
  color: var(--green);
}
.capability-layer-box h2 {
  margin-bottom: 1rem;
  color: var(--white);
}
.capability-layer-lead {
  color: rgba(255,255,255,0.78);
  max-width: 64ch;
  margin-bottom: 2.5rem;
}

.capability-layer-paths {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 2.5rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .capability-layer-paths { grid-template-columns: 1fr; gap: 2.5rem; }
  .capability-layer-divider { display: none; }
}

/* Single-focus variant: when the section only carries one path (the pilot),
   centre the contents and the CTA within a constrained column. */
.capability-layer-single {
  max-width: 60ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.capability-layer-single .capability-layer-what-label,
.capability-layer-single .capability-layer-meta {
  align-self: stretch;
  text-align: left;
}
.capability-layer-single .capability-layer-list {
  align-self: stretch;
}
.capability-layer-cta {
  align-self: center;
  margin-top: 2rem;
}

.capability-layer-divider {
  background: rgba(255,255,255,0.08);
  width: 1px;
  justify-self: center;
}

.capability-layer-path {
  display: flex;
  flex-direction: column;
}
.capability-layer-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.75rem;
}
.capability-layer-path h3 {
  color: var(--white);
  font-size: 1.625rem;
  margin-bottom: 0.875rem;
  letter-spacing: -0.02em;
}
.capability-layer-summary {
  color: rgba(255,255,255,0.78);
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.65;
  max-width: none;
}
.capability-layer-what-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0.75rem 0 0.625rem;
  max-width: none;
}
.capability-layer-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.capability-layer-list li {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.78);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  line-height: 1.5;
}
.capability-layer-list li::before {
  content: '→';
  color: var(--green);
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.capability-layer-list li:last-child { border-bottom: none; }
.capability-layer-meta {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
  margin: 0.875rem 0 0;
  max-width: none;
}
.capability-layer-meta strong {
  color: var(--white);
  font-weight: 600;
}
.capability-layer-path .btn {
  margin-top: 1.75rem;
  padding-top: 0;
  align-self: center;
}

@media (max-width: 900px) {
  .capability-layer-box { padding: 2.5rem; }
}

/* ── About hero intro + lead ───────────────────
   First-person H1 ("I'm Myles.") sits alone as the punchy opener.
   Intro paragraph carries the third-person practice description.
   Lead is bumped above default lead size because the ten-year context
   is the operator credentialing line. */
.about-hero-intro {
  font-size: 1.25rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
  max-width: 52ch;
  font-weight: 500;
}
.about-hero-lead {
  font-size: 1.375rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 56ch;
}

/* ── About Page ───────────────────────────────── */
.about-hero-inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 4rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .about-hero-inner { grid-template-columns: 1fr 300px; gap: 3rem; }
}
@media (max-width: 760px) {
  .about-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; align-items: end; }
  .about-headshot { width: 200px; height: 260px; }
}

/* Headshot now stretches to match the bold copy height instead of sitting
   undersized in the corner. */
.about-headshot {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  border-radius: 14px;
  align-self: stretch;
}

.about-section { padding: 5rem 0; border-bottom: 1px solid rgba(29,35,28,0.08); }
.about-section:last-of-type { border-bottom: none; }
.about-section h2 { margin-bottom: 1.5rem; }
.about-section p  { margin-bottom: 1.25rem; }

/* ── Events Archive (About page, collapsible) ── */
.archive-toggle {
  margin-top: 1.75rem;
  background: var(--bg);
  border: 1px solid rgba(29,35,28,0.08);
  border-radius: 12px;
  overflow: hidden;
}
.archive-summary {
  list-style: none;
  cursor: pointer;
  padding: 1.125rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-b);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--dark);
  transition: background 0.2s var(--ease);
}
.archive-summary::-webkit-details-marker { display: none; }
.archive-summary:hover { background: rgba(32,157,80,0.06); }
.archive-summary-text { letter-spacing: -0.005em; }
.archive-summary-icon {
  font-family: var(--font-h);
  font-size: 1.25rem;
  color: var(--green);
  line-height: 1;
  transition: transform 0.25s var(--ease);
}
details[open] .archive-summary-icon { transform: rotate(45deg); }

.archive-table-wrap {
  padding: 0.5rem 1.5rem 1.5rem;
  overflow-x: auto;
}
.archive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.archive-table thead th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(29,35,28,0.5);
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid rgba(29,35,28,0.12);
  white-space: nowrap;
}
.archive-table tbody td {
  padding: 0.7rem 0.875rem;
  border-bottom: 1px solid rgba(29,35,28,0.07);
  vertical-align: top;
  color: rgba(29,35,28,0.78);
  line-height: 1.5;
}
.archive-table tbody td:first-child {
  font-weight: 600;
  color: var(--dark);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.archive-table tbody tr:hover td { background: rgba(32,157,80,0.04); }
.archive-table tbody tr:last-child td { border-bottom: none; }
.archive-footnote {
  font-size: 0.8125rem;
  color: rgba(29,35,28,0.55);
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(29,35,28,0.07);
  max-width: none;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .archive-table { font-size: 0.8125rem; }
  .archive-table thead th,
  .archive-table tbody td { padding: 0.625rem 0.625rem; }
}

/* ── Skills section collapsible wrapper (About page) ───────────
   Whole Skills section opens via a summary click so it doesn't dominate
   the About page on first view. Reads as an opt-in deep dive. */
.skills-section-toggle {
  border: 1px solid rgba(29,35,28,0.08);
  border-radius: 14px;
  background: var(--bg);
  overflow: hidden;
}
.skills-section-summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: background 0.2s var(--ease);
}
.skills-section-summary::-webkit-details-marker { display: none; }
.skills-section-summary:hover { background: rgba(32,157,80,0.04); }
.skills-section-summary > .label {
  margin-bottom: 0;
  flex-shrink: 0;
}
.skills-section-summary-text {
  flex: 1;
  font-family: var(--font-b);
  font-size: 1rem;
  color: rgba(29,35,28,0.78);
  line-height: 1.45;
}
.skills-section-summary-icon {
  font-family: var(--font-h);
  font-size: 1.5rem;
  color: var(--green);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}
.skills-section-toggle[open] .skills-section-summary-icon { transform: rotate(45deg); }
.skills-section-toggle .skills-grid { padding: 0 1.5rem 2rem; }

@media (max-width: 640px) {
  .skills-section-summary { flex-direction: column; align-items: flex-start; gap: 0.625rem; padding: 1.25rem 1.5rem; }
  .skills-section-summary-icon { align-self: flex-end; }
  .skills-section-toggle .skills-grid { padding: 0 1rem 1.5rem; }
}

/* ── Skills and Tools (About page) ────────────── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (max-width: 1000px) { .skills-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .skills-grid { grid-template-columns: 1fr; } }

.skills-card {
  background: var(--bg);
  border-radius: 14px;
  padding: 1.875rem;
  border: 1px solid rgba(29,35,28,0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.skills-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(29,35,28,0.10);
  border-color: rgba(32,157,80,0.16);
}

.skills-card-num {
  font-family: var(--font-h);
  font-size: 1.75rem;
  color: var(--green);
  opacity: 0.45;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.625rem;
}

.skills-card h3 {
  font-size: 1.1875rem;
  margin-bottom: 0.75rem;
}

.skills-card-summary {
  font-size: 0.9375rem;
  color: rgba(29,35,28,0.7);
  margin-bottom: 1.5rem;
  max-width: none;
  line-height: 1.6;
}

.skills-block { margin-bottom: 1.25rem; }
.skills-block-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 0.5rem 0;
  max-width: none;
}
.skills-line {
  font-size: 0.875rem;
  color: rgba(29,35,28,0.72);
  line-height: 1.6;
  margin: 0;
  max-width: none;
}
.skills-line a { color: var(--green); border-bottom: 1px solid rgba(32,157,80,0.35); }
.skills-line a:hover { border-bottom-color: var(--green); }

/* Skills pending markers: hidden from production. Re-enable by removing
   `display: none` when the Skills Inventory gaps are filled in. The markup
   stays in the HTML as a working reminder of what's missing. */
.skills-pending { display: none; }

/* Collapsible skills cards: cluster 01 opens by default, 02 to 06 collapsed.
   Built on native <details>/<summary> for accessibility (keyboard + screen reader).
   Same pattern as the Events Archive elsewhere on the page. */
.skills-card details {
  margin-top: 0;
}
.skills-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0 0;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(29,35,28,0.08);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  transition: color 0.2s var(--ease);
}
.skills-card summary::-webkit-details-marker { display: none; }
.skills-card summary:hover { color: var(--green-dark); }
.skills-card summary-icon {
  display: inline-block;
}
.skills-card .skills-summary-text { flex: 1; }
.skills-card .skills-summary-icon {
  font-family: var(--font-h);
  font-size: 1rem;
  color: var(--green);
  line-height: 1;
  transition: transform 0.25s var(--ease);
  display: inline-block;
}
.skills-card details[open] .skills-summary-icon { transform: rotate(45deg); }
.skills-card details > .skills-block:first-of-type {
  margin-top: 1.125rem;
}

/* ── Testimonial ──────────────────────────────── */
.testimonial {
  border-left: 3px solid var(--green);
  padding: 1.25rem 1.75rem;
  margin: 3rem 0;
  background: var(--white);
  border-radius: 0 12px 12px 0;
}
.testimonial-quote {
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 0.875rem;
}
.testimonial-attr {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(29,35,28,0.55);
}

/* ── Contact Page ─────────────────────────────── */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 6rem;
  align-items: start;
}
@media (max-width: 900px) { .contact-wrap { grid-template-columns: 1fr; gap: 3rem; } }

.contact-info { display: flex; flex-direction: column; gap: 2rem; }

.contact-item-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(29,35,28,0.4);
  margin-bottom: 0.375rem;
  display: block;
}

.contact-item a {
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.2s;
}
.contact-item a:hover { color: var(--green); }

.contact-divider {
  border: none;
  border-top: 1px solid rgba(29,35,28,0.08);
}

/* Calendly embed container */
.calendly-container {
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(29,35,28,0.07);
  min-height: 700px;
}

/* ── CTA Band ─────────────────────────────────── */
.cta-band {
  background: var(--dark);
  color: var(--white);
  text-align: center;
  padding: 5.5rem 0;
}
.cta-band h2 { margin-bottom: 1rem; }
.cta-band p  { color: rgba(255,255,255,0.75); margin: 0 auto 2.25rem; max-width: 52ch; }

/* ── Footer ───────────────────────────────────── */
footer {
  background: var(--dark);
  color: rgba(255,255,255,0.5);
  padding: 2.75rem 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.footer-logo {
  font-family: var(--font-h);
  font-size: 0.875rem;
  color: var(--white);
  letter-spacing: -0.01em;
}

.footer-links { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.footer-links a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--white); }

.footer-copy {
  font-size: 0.8125rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* ── Legal pages (Privacy, Terms) ─────────────── */
.legal-meta {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  margin-top: 1rem;
  max-width: none;
}
.legal-section { padding: 4rem 0 6rem; }
.legal-content { color: rgba(29,35,28,0.82); }
.legal-content h2 {
  font-size: 1.375rem;
  margin: 2.5rem 0 1rem;
  letter-spacing: -0.015em;
}
.legal-content h2:first-of-type { margin-top: 0.5rem; }
.legal-content p {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.125rem;
  max-width: none;
}
.legal-content a {
  color: var(--green);
  border-bottom: 1px solid rgba(32,157,80,0.4);
  transition: border-color 0.2s;
}
.legal-content a:hover { border-bottom-color: var(--green); }
.legal-content strong { color: var(--dark); font-weight: 600; }
.legal-list {
  margin: 0 0 1.5rem;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.legal-list li {
  font-size: 1rem;
  color: rgba(29,35,28,0.78);
  line-height: 1.65;
  padding-left: 1.25rem;
  position: relative;
}
.legal-list li::before {
  content: '→';
  color: var(--green);
  font-size: 0.875rem;
  position: absolute;
  left: 0;
  top: 0.45rem;
}

/* ── Utilities ────────────────────────────────── */
.text-green  { color: var(--green); }
.text-muted  { color: rgba(29,35,28,0.55); }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }

/* ── Fade-in animations ───────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.fade-in.visible { opacity: 1; transform: none; }
.fade-in.delay-1 { transition-delay: 0.1s; }
.fade-in.delay-2 { transition-delay: 0.2s; }
.fade-in.delay-3 { transition-delay: 0.3s; }

/* ── Phase A interaction layer ────────────────── */

/* Case study card hover lifts (standard cards only, featured stays put) */
.case-card {
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.case-card:not(.case-card--featured):hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(29,35,28,0.10);
  border-color: rgba(32,157,80,0.16);
}
.case-card--featured {
  transition: box-shadow 0.28s var(--ease);
}
.case-card--featured:hover {
  box-shadow: 0 18px 48px rgba(29,35,28,0.10);
}

/* Photo header zoom on hover (new card structure) */
.case-card-header--photo { overflow: hidden; }
.case-card-header--photo img {
  transition: transform 0.7s var(--ease);
  transform-origin: center;
}
.case-card:not(.case-card--featured):hover .case-card-header--photo img {
  transform: scale(1.04);
}

/* Featured hero photo zoom on hover */
.case-feature-hero { overflow: hidden; }
.case-feature-hero img {
  transition: transform 1.2s var(--ease);
  transform-origin: center;
}
.case-card--featured:hover .case-feature-hero img {
  transform: scale(1.025);
}

/* Button hover refinement: subtle glow on the primary, lift on outlines */
.btn { transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease), box-shadow 0.28s var(--ease), transform 0.22s var(--ease); }
.btn-green:hover { box-shadow: 0 10px 28px rgba(32,157,80,0.32); transform: translateY(-1px); }
.btn-outline-dark:hover { box-shadow: 0 8px 22px rgba(29,35,28,0.18); transform: translateY(-1px); }
.btn-outline-white:hover { box-shadow: 0 8px 22px rgba(255,255,255,0.14); transform: translateY(-1px); }

/* Counter animations: the value swap is animated via JS; respect reduced motion */
.counter { font-variant-numeric: tabular-nums; }

/* Reduced motion: switch everything off */
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .case-card,
  .case-card--featured,
  .service-card,
  .phase-card,
  .capability-card,
  .case-photo-grid img,
  .btn { transition: none; }
  .case-card:not(.case-card--featured):hover,
  .service-card:hover,
  .phase-card:hover,
  .capability-card:hover,
  .case-card-header--photo img:hover,
  .case-feature-hero img:hover,
  .btn-green:hover,
  .btn-outline-dark:hover,
  .btn-outline-white:hover { transform: none; box-shadow: none; }
}