/* home.css — entry stylesheet for src/index.html (the portfolio homepage).
 *
 * Strategy: reuse the editorial design system that ODH and NIOCCS already
 * share (.eu-* tokens, .role-index, .eu-paper, .eu-eyebrow, the five-tier
 * spacing rhythm). This file imports only the foundation partials and adds
 * homepage-specific layout: two-column hero, alternating project cards,
 * synthesis line redefined with a neutral accent (no project-specific teal
 * or cyan), and a centered dark "direction" beat.
 *
 * RESPONSIVE TIERS (desktop-first cascade — matches case studies):
 *   Tier 5 (≥ 2048px) — base styles, no MQ
 *   Tier 4 (≤ 2047px) — desktop / laptop (recruiter default)
 *   Tier 3 (≤ 1245px) — large tablet
 *   Tier 2 (≤ 1000px) — small tablet
 *   Tier 1 (≤  750px) — mobile (~375pt floor)
 */

@import url('../shared/_base.css?v=20260522-2');
@import url('../shared/nav.css');
@import url('../shared/_eu-system.css?v=20260605-2');
@import url('../shared/_case-study.css');

/* ─── Body override ────────────────────────────────────────────────
   _base.css sets body { background: #0a0e12 } for the case studies
   (which paint white sections over it). The homepage is white-first;
   reset to white so the gap between sections doesn't flash dark. */
body {
  background-color: #FFFFFF;
}

/* Smooth scroll for in-page anchor links (e.g. nav "Projects" → #selected-work) */
html { scroll-behavior: smooth; }

/* ─── DARK NAV — homepage masthead ─────────────────────────────────
   The shared nav.css ships a LIGHT theme (white background, dark
   text). On the homepage we want a dark masthead so it reads as a
   confident editorial frame against the white hero below — matching
   the visual weight of the nav on the ODH and NIOCCS case studies.
   Mirrors the ODH dark-nav overrides (assets/css/odh/_nav.css) but
   swaps the project-specific cyan hover tint for a neutral white
   overlay, since the homepage shouldn't carry a project accent. */
.site-nav {
  background-color: rgba(10, 14, 18, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
.nav-brand { color: rgba(255, 255, 255, 0.92); }
.nav-brand:hover { color: #fff; }
.brand-badge {
  background: linear-gradient(145deg, #353a42, #14171c);
  border-color: rgba(255, 255, 255, 0.14);
}
/* Brand mark color reflects the page's mood. Home = NIOCCS teal. */
.brand-badge svg { color: rgba(var(--teal-500-rgb),0.95); }
.brand-soft { color: rgba(255, 255, 255, 0.45); }
.nav-link { color: rgba(255, 255, 255, 0.92); }
.nav-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}
.nav-link[aria-current="page"] { color: #fff; }
.nav-cta {
  color: #0a0e12;
  background-color: rgba(255, 255, 255, 0.92);
}
.nav-cta:hover { background-color: #fff; }
.nav-chip {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.22);
}
.nav-chip:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}
.nav-hamburger:hover { background-color: rgba(255, 255, 255, 0.08); }
.nav-hamburger span { background-color: rgba(255, 255, 255, 0.8); }
.nav-mobile {
  border-top-color: rgba(255, 255, 255, 0.06);
  background-color: rgba(10, 14, 18, 0.97);
}
.nav-mobile-link { color: rgba(255, 255, 255, 0.92); }
.nav-mobile-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}
.nav-mobile-link[aria-current="page"] { color: #fff; }
.nav-mobile-cta {
  color: #0a0e12;
  background-color: rgba(255, 255, 255, 0.92);
}
.nav-mobile-cta:hover { background-color: #fff; }

/* ─── Section padding overrides for homepage rhythm ────────────────
   Spec from plan: hero 164/120, quote 120/120, perspectives 164/164,
   work 164/164, direction 164/164, cta 96/164. Inline these so the
   foundation system stays untouched. */
.home-hero.eu-section-white {
  padding-top: 48px;
  padding-bottom: 96px;
  /* white background inherited from .eu-section-white — do not override */
}

/* Tier 5 (≥2048px): no hero-specific left padding. The centered .eu-wrapper
   (max-width 1368px) already holds content off the page edge on very wide
   screens, so the hero keeps the base 64px padding and stays aligned with
   every other section. (A previous 7vw push shifted the hero right of the
   section column above 2047px.) */
.home-quote.eu-section-white {
  padding-top: 120px;
  padding-bottom: 120px;
  background: #F5F5F5; /* warm off-white from the case-study design system */
}
.home-close.eu-section-white {
  padding-top: 96px;
  padding-bottom: 56px;
  background: #F5F5F5; /* matches the quote section gray */
}

/* ════════════════════════════════════════════════════════════════
 * 1. HERO — text left, large unframed grayscale avatar right.
 *    Pattern reference: nabauer.com hero composition.
 * ════════════════════════════════════════════════════════════════ */

.home-hero-grid {
  display: grid;
  /* Fixed text column so the avatar starts at a deterministic position
     just to the right of the text. Avoids max-content ambiguity. */
  grid-template-columns: 560px minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
  max-width: 1320px;
  min-height: 540px;
}

/* Offset text down so the avatar's top sits above the eyebrow line —
   the deliberate "off-alignment" that nabauer.com uses to break the
   symmetric two-column grid and give the portrait visual weight. */
.home-hero-text {
  padding-top: 80px;
}

/* Naked uppercase eyebrow — no pill, just letterspaced text. The .eu-eyebrow
   class adds a border; this homepage hero opts out for a calmer opener. */
.home-hero-eyebrow.eu-eyebrow {
  border: none;
  padding: 0;
  width: auto;
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(60, 64, 67, 0.92);
  margin: 0 0 36px;
}
/* This naked identity label opts out of the pill, so it opts out of the
   shared accent dash too — otherwise the dash floats above the block text. */
.home-hero-eyebrow.eu-eyebrow::before { content: none; }

.home-hero-eyebrow .home-hero-eyebrow-role {
  color: rgba(60, 64, 67, 0.52);
}

.home-hero-headline {
  font-family: 'Cal Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #1E2328;
  margin: 0 0 32px;
  max-width: 16ch;
}

.home-hero-lede {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  line-height: 30px;
  font-weight: 400;
  color: rgba(60, 64, 67, 0.78);
  max-width: 520px;
  margin: 0 0 32px;
}

/* Availability pill — soft, lifted, with a confident purple dot.
   Stays white-ish so it stays restrained, but the soft shadow makes
   it sit on the page rather than blend into it. */
.home-hero-availability {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: rgba(60, 64, 67, 0.88);
  background: #FFFFFF;
  border: 1px solid rgba(60, 64, 67, 0.12);
  border-radius: 999px;
  padding: 9px 18px 9px 14px;
  margin: 0 0 32px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 6px 16px rgba(15, 23, 42, 0.08);
}

.home-hero-availability::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(var(--teal-500-rgb),0.95); /* NIOCCS teal */
  box-shadow: 0 0 0 3px rgba(var(--teal-500-rgb),0.22);
  flex-shrink: 0;
}

/* CTA row — primary filled + secondary outlined, side-by-side */
.home-cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}

.home-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1E2328;
  background: transparent;
  border: 1px solid rgba(60, 64, 67, 0.32);
  border-radius: 999px;
  padding: 13px 22px;
  text-decoration: none;
  white-space: nowrap;   /* keep the label on one line — never wrap to a cramped multi-line pill */
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.home-cta:hover {
  border-color: rgba(60, 64, 67, 0.6);
  transform: translateY(-2px);
}

.home-cta.is-primary {
  background: #1E2328;
  border-color: #1E2328;
  color: #FFFFFF;
}

.home-cta.is-primary:hover {
  background: #0a0e12;
  border-color: #0a0e12;
}

.home-cta .home-cta-arrow {
  transition: transform 0.2s ease;
}

.home-cta:hover .home-cta-arrow {
  transform: translateX(3px);
}

/* Avatar — unframed, transparent PNG sitting directly on the page
   background. No frame, no border, no shadow, no card, no container
   background. The PNG's own transparency must show through. */
.home-hero-aside {
  display: flex;
  justify-content: flex-start; /* avatar sits flush against the text column */
  align-items: flex-start;
}

.home-avatar {
  width: 100%;
  max-width: 580px;
  display: block;
  height: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  /* NOTE: the current PNG ships an opaque near-white background
     (alpha=255 everywhere) even though it has an alpha channel.
     `mix-blend-mode: multiply` keys out the near-white pixels
     against the white page so only the dark strokes render.
     If/when the PNG is re-exported with actual file-level
     transparency, this rule can be removed without visual change. */
  mix-blend-mode: multiply;
  filter: grayscale(100%);
}

/* Tier 3: tighten gap and trim avatar so headline stays the lead */
@media (max-width: 1245px) {
  .home-hero-grid { column-gap: 24px; min-height: 480px; }
  .home-hero-text { padding-top: 56px; }
  .home-avatar { max-width: 480px; }
}

/* Tier 2: collapse to single column, avatar below text */
@media (max-width: 1000px) {
  .home-hero-grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
    min-height: 0;
    align-items: stretch;
  }
  .home-hero-text { padding-top: 0; }
  .home-hero-aside { justify-content: flex-start; }
  .home-avatar { max-width: 380px; }
  .home-hero-headline { max-width: 18ch; }
}

/* Tier 1: mobile compression */
@media (max-width: 750px) {
  .home-hero.eu-section-white { padding-top: 64px; padding-bottom: 72px; }
  .home-hero-lede { font-size: 17px; line-height: 28px; }
  .home-avatar { max-width: 280px; }
  .home-cta-row { gap: 10px; }
  .home-cta { padding: 12px 18px; font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════
 * 2. PULL-QUOTE INTERLUDE — quote + supporting ecosystem diagram.
 *    Two-column: diagram (incidental support) left, quote right.
 * ════════════════════════════════════════════════════════════════ */

/* White card that wraps the diagram + quote, sitting on the gray
   section background. Pattern reference: angelica-araujo.com — the
   inner content block is enclosed in a white rounded container that
   contrasts with the section's tinted background. */
/* Section header — aligned to the card's 1240px column, sits on the
   off-white section background above the white card. */
.home-quote-head {
  max-width: 1240px;
  margin: 0 auto 44px;
}

.home-quote-card {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 80px 72px;
  max-width: 1240px;
  margin: 0 auto;
  box-shadow:
    0 1px 2px rgba(60, 64, 67, 0.04),
    0 22px 50px -26px rgba(60, 64, 67, 0.30);
}

/* Teal fog: streams from the customer hub out to the words. Layered radials
   (dense core on the hub → bridging band → wisp around the text), blurred
   into haze, with a slow sub-2% drift. Replaces the old terracotta wash. */
.home-quote-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(6px);
  transform-origin: 28% 50%;
  animation: quoteFog 19s ease-in-out infinite alternate;
  background:
    radial-gradient(46% 56% at 82% 48%,
      rgba(var(--teal-400-rgb), 0.042) 0%,
      rgba(var(--teal-400-rgb), 0) 72%),
    radial-gradient(34% 40% at 50% 36%,
      rgba(var(--teal-400-rgb), 0.03) 0%,
      rgba(var(--teal-400-rgb), 0) 70%),
    radial-gradient(72% 44% at 56% 52%,
      rgba(var(--teal-400-rgb), 0.05) 0%,
      rgba(var(--teal-400-rgb), 0.02) 48%,
      rgba(var(--teal-400-rgb), 0) 80%),
    radial-gradient(46% 62% at 25% 50%,
      rgba(var(--teal-500-rgb), 0.11) 0%,
      rgba(var(--teal-500-rgb), 0.046) 44%,
      rgba(var(--teal-500-rgb), 0) 74%);
}
@keyframes quoteFog {
  from { transform: translateX(-0.8%) scale(1); }
  to   { transform: translateX(1.4%) scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .home-quote-card::before { animation: none; transform: none; }
}

.home-quote-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  column-gap: 80px;
  align-items: center;
}

@media (max-width: 1000px) {
  .home-quote-card { padding: 56px 40px; border-radius: 16px; }
}

@media (max-width: 750px) {
  .home-quote-card { padding: 40px 24px; border-radius: 14px; }
}

.home-quote-diagram {
  width: 100%;
  max-width: 540px;
  justify-self: center;
}

.home-quote-diagram svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Customer-experience diagram — customer hub + six teal touchpoint blobs.
   Uses the shared white-bg teal pair (deep glyph over pale tint). */
.home-quote-diagram .cx-link {
  stroke: rgba(60, 64, 67, 0.32);
  stroke-width: 1;
  fill: none;
}
.home-quote-diagram .cx-blob {
  /* exact match to the perspectives chip: pale tint, no border */
  fill: rgba(var(--teal-pale-rgb), 0.10);
}
.home-quote-diagram .cx-icon {
  fill: none;
  stroke: rgba(var(--teal-deep-rgb), 0.83);   /* exact match to perspectives icon */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Keep stroke width constant regardless of the per-icon scale transform. */
.home-quote-diagram .cx-icon * { vector-effect: non-scaling-stroke; }
.home-quote-diagram .cx-hub {
  fill: rgba(var(--teal-500-rgb), 1);
  /* soft teal halo — the origin of the fog */
  filter: drop-shadow(0 0 16px rgba(var(--teal-500-rgb), 0.28));
}
.home-quote-diagram .cx-hub-glyph {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-quote-diagram .cx-title {
  fill: #3C4043;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.home-quote-text {
  font-family: 'Cal Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: rgba(60, 64, 67, 0.86);
  margin: 0;
  max-width: 13.5em;
  text-wrap: balance;
}

/* Single point of emphasis inside the quote — pulls the reader's eye to
   the thesis ("doesn't end where interfaces end") and lets the rest of
   the sentence recede as quiet expansion. */
.home-quote-emphasis {
  font-weight: 600;
  /* deep glyph teal (same as the diagram icons) — legible on white */
  color: rgba(var(--teal-deep-rgb), 1);
}

/* The quote's atmosphere now lives on .home-quote-card::before (a teal fog
   from the diagram hub). The old terracotta wash was removed — it read as an
   orphan warm color in an otherwise all-teal section. */
.home-quote-text-col {
  position: relative;
}
.home-quote-text-col > * {
  position: relative;
  z-index: 1;
}

/* Tier 2: stack vertically — diagram on top, quote below. */
@media (max-width: 1000px) {
  .home-quote-grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .home-quote-diagram { max-width: 380px; }
  .home-quote-text {
    text-align: center;
    margin: 0 auto;
    max-width: none;
  }
}

@media (max-width: 750px) {
  .home-quote.eu-section-white { padding-top: 72px; padding-bottom: 72px; }
  .home-quote-diagram { max-width: 300px; }
}

/* ════════════════════════════════════════════════════════════════
 * 3. PERSPECTIVES — header block + .perspective-grid (six teal-chip items).
 * ════════════════════════════════════════════════════════════════ */

.home-perspectives .eu-h2,
.home-quote .eu-h2 {
  /* eyebrow sits directly above, so tighten the default 96px */
  margin-top: 16px;
  /* Uppercase Cal Sans treatment — banner label style, large enough
     to read as a section title without competing with the hero h1. */
  font-family: 'Cal Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(36px, 6vw, 72px);   /* 72px on desktop — matches the project pages' .eu-h1 section headings */
  line-height: 1.1;
  letter-spacing: 0.015em;
  text-transform: none;
  color: #1E2328;
  max-width: 22ch;
}

.home-perspectives .eu-p {
  margin-top: 32px;
  max-width: 890px;   /* ~5% narrower than the base 936px (matches About's narrative sections) */
}

/* Six perspectives — "Variant E": a teal icon chip + Cal Sans title +
   DM Sans description, laid out as a 3×2 grid. No card chrome (no border,
   shadow or surface) so it stays editorial; color enters only through the
   teal-tinted chip — the page's first injected accent. */
.home-perspectives .perspective-grid {
  /* Light-background accent: a deep teal glyph for presence on white,
     over a barely-there teal chip that recedes to a soft halo (tuned so
     the icon stays an accent and the TITLE leads). These are white-bg
     shades, distinct from the dark-section teal-400/500/600 palette. */
  --p-teal: rgba(var(--teal-deep-rgb), 0.83);
  --p-teal-tint: rgba(var(--teal-pale-rgb), 0.10);
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 56px;
}
.perspective-chip {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--p-teal-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
}
.perspective-ic {
  /* Larger glyph in the same 48px chip so the chip recedes to a soft
     halo behind the icon rather than framing it as a box. The 24×24
     viewBox scales up cleanly. */
  width: 36px;
  height: 36px;
  color: var(--p-teal);
  display: block;
}
.perspective-name {
  font-family: 'Cal Sans', sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  color: #1E2328;
  margin: 0 0 8px;
}
.perspective-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 25px;
  color: #3C4043;
  margin: 0;
}
@media (max-width: 1000px) {
  .home-perspectives .perspective-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
}
@media (max-width: 700px) {
  .home-perspectives .perspective-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ════════════════════════════════════════════════════════════════
   4. SELECTED WORK — Edmund-Yu pattern: each project is its own
   full-bleed section with a distinctive brand-tinted background.
   Two-column inside (image + text), alternating sides.
   ════════════════════════════════════════════════════════════════ */

.home-work-project {
  width: 100%;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: 96px 64px;
  box-sizing: border-box;
}

.home-work-odh {
  background: #F4EFE5; /* warm cream */
  color: #1E2328;
}

.home-work-nioccs {
  background: #16191C; /* matches .eu-section-dark from the case-study system */
  color: rgba(255, 255, 255, 0.92);
}

.home-work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  align-items: center;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.home-work-project.is-reverse .home-work-media {
  order: 2;
}

.home-work-media {
  width: 100%;
}

/* Placeholder card — sits inside the section's tinted background. */
.home-work-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  border-radius: 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-work-odh .home-work-placeholder {
  background: rgba(60, 64, 67, 0.06);
  color: rgba(60, 64, 67, 0.45);
  border: 1px solid rgba(60, 64, 67, 0.10);
}

.home-work-nioccs .home-work-placeholder {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.home-work-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.55;
}

.home-work-text {
  max-width: 480px;
}

.home-work-logo {
  display: block;
  height: 40px;
  width: auto;
  margin: 0 0 24px;
  opacity: 0.78;
}

.home-work-nioccs .home-work-logo {
  /* CDC logo PNG is dark — invert to render on dark slate background. */
  filter: invert(1) brightness(1.6);
  opacity: 0.88;
}

.home-work-title {
  font-family: 'Cal Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: inherit;
  margin: 0 0 20px;
}

.home-work-year {
  font-weight: 400;
  opacity: 0.55;
}

.home-work-desc {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 400;
  color: inherit;
  opacity: 0.82;
  margin: 0 0 28px;
}

/* Prominent, filled "View Project" button — larger type, full weight. */
.home-work-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 999px;
  border: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.home-work-cta .home-work-cta-arrow {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.home-work-cta:hover .home-work-cta-arrow { transform: translateX(4px); }

/* Light sections → dark filled button */
.home-work-odh .home-work-cta,
.home-work-opa .home-work-cta {
  background: #1E2328;
  color: #ffffff;
  box-shadow: 0 8px 22px -8px rgba(15, 23, 42, 0.35);
}
.home-work-odh .home-work-cta:hover,
.home-work-opa .home-work-cta:hover {
  background: #000000;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(15, 23, 42, 0.45);
}
/* Dark section → light filled button */
.home-work-nioccs .home-work-cta {
  background: #ffffff;
  color: #16191C;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.5);
}
.home-work-nioccs .home-work-cta:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.6);
}

/* OPA — Mediterranean gradient mesh (Aegean-blue glow behind the devices +
   a faint gold glow) over a cool→warm wash, so the section isn't flat. */
.home-work-opa {
  color: #1E2328;
  background:
    radial-gradient(58% 78% at 30% 34%, rgba(91, 155, 213, 0.22), transparent 70%),
    radial-gradient(46% 64% at 88% 82%, rgba(238, 205, 34, 0.12), transparent 72%),
    linear-gradient(135deg, #E7F0F8 0%, #EDF0F4 55%, #F5F1EA 100%);
}
/* OPA brand logo above the title (provided asset, already coloured). */
.home-work-opa .home-work-logo {
  height: 54px;
  width: auto;
  border-radius: 10px;
  opacity: 1;
  filter: none;
}
/* Asymmetric layout — imagery column larger than the text (Edmund-style). */
.home-work-opa .home-work-grid {
  grid-template-columns: 1.55fr 1fr;
  column-gap: 56px;
  max-width: 1320px;
}
/* Isometric device mockup — THREE desktop browsers fanned up-and-right on
   a shared parallel (no-perspective) plane, with the phone in FRONT.
   Inward tilt (faces toward the text). Edmund-Yu-style 3D thumbnail. */
.home-work-iso {
  /* ── THE ISOMETRIC ANGLE (shared by all frames) ──────────────────
     rotateY = SWIVEL left/right (the main "angle"). Bigger = more turned
               inward. Flip sign (−30) to face the other way.
     rotateX = vertical TILT. Controls top-vs-bottom view AND which corner
               is higher: negative = right corner up; positive = left up.
     rotateZ = flat SPIN (dutch tilt). Keep tiny. */
  --iso: rotateX(-4deg) rotateY(30deg) rotateZ(0.8deg);
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  transform-style: preserve-3d;
}
.hwi-screen {
  position: absolute;
  width: 68%;
  border-radius: 11px;
  overflow: hidden;
  background: #1b1f24;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 40px 70px -30px rgba(15, 23, 42, 0.5);
  transform: var(--iso);
}
.hwi-screen img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
.hwi-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 11px;
  background: #23282e;
}
.hwi-bar span { width: 7px; height: 7px; border-radius: 50%; background: #4a525b; }
.hwi-bar span:nth-child(1) { background: #ef6a5e; }
.hwi-bar span:nth-child(2) { background: #f5bf4f; }
.hwi-bar span:nth-child(3) { background: #62c554; }
/* two screens, generously spaced; cascade ascends to the upper-right */
.hwi-back  { left: 0%;  top: 30%; z-index: 1; transform: var(--iso) scale(0.94); }
.hwi-front { left: 30%; top: 0%;  z-index: 3; }
/* phone — in FRONT of the desktops, overlapping the front screen's lower-right */
.hwi-phone {
  position: absolute;
  right: 2%;
  bottom: 12%;
  width: 16%;
  aspect-ratio: 9 / 19;
  border-radius: 20px;
  overflow: hidden;
  background: #0c0f13;
  border: 5px solid #1b1f24;
  box-shadow: 0 40px 66px -22px rgba(15, 23, 42, 0.6);
  transform: var(--iso);
  z-index: 4;
}
.hwi-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ── TWEAK WHICH PART OF EACH SCREENSHOT SHOWS ──────────────────────
   object-position Y%: 0% = top of page … 100% = bottom. Pan up/down here.
   aspect-ratio: taller (e.g. 16/13) reveals MORE of the page before crop. */
.hwi-back  img { object-position: center 50%; }   /* dish-library */
.hwi-front img { object-position: center 0%; }   /* homepage     */
.hwi-phone img { object-position: center 0%; }   /* mobile order */
/* .hwi-front img { aspect-ratio: 16 / 13; }  ← uncomment to show more page */

/* ════════════════════════════════════════════════════════════════
 * SCROLL MOTION — project cards.
 *  (a) parallax + zoom on the imagery as the card passes through view,
 *  (b) a soft glow HALO behind the imagery that simply rides along with
 *      it (no section-wide sweep — that read as jarring).
 * Pure CSS scroll-driven (view() timeline): runs on the compositor and
 * simply no-ops where unsupported or where the user prefers no motion.
 * ════════════════════════════════════════════════════════════════ */
.home-work-grid { position: relative; z-index: 1; }
.home-work-media { position: relative; }

/* Glow halo behind the imagery — ONLY on cards with a real mockup (it
   bleeds muddily through the translucent placeholder boxes, so ODH/NIOCCS
   are excluded until they get real screenshots). Add their selector here
   when they do. The halo is a child of the media, so it moves + scales
   with the image's parallax/zoom — no separate animation. */
.home-work-opa { --glow: rgba(96, 162, 222, 0.40); } /* cool sky-blue */
.home-work-opa .home-work-media::after {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--glow, transparent) 0%, transparent 78%);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .home-work-media {
      animation: home-media-zoom linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }
  }
}
@keyframes home-media-zoom {
  from { transform: translateY(60px) scale(0.88); }
  to   { transform: translateY(-60px) scale(1.14); }
}

/* Tier 3: trim outer padding */
@media (max-width: 1245px) {
  .home-work-project { padding: 80px 48px; }
  .home-work-grid { column-gap: 56px; }
}

/* Tier 2: stack image above text in single column */
@media (max-width: 1000px) {
  .home-work-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .home-work-project.is-reverse .home-work-media { order: 0; }
  .home-work-text { max-width: none; }
}

@media (max-width: 750px) {
  .home-work-project { padding: 64px 16px; }
  .home-work-desc { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════
 * 5. DIRECTION — the dark beat. Centered, no images, subtle glow.
 * ════════════════════════════════════════════════════════════════ */

.home-direction.eu-section-dark {
  position: relative;
  background: #0a0e12;
  overflow: hidden;
}

/* Subtle radial glow — dimmer than the case-study hero glow (~35%) */
.home-direction-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.home-direction-glow::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 140%;
  /* NIOCCS teal palette (teal-400 → teal-700 → fade) */
  background: radial-gradient(ellipse 80% 70% at 50% 25%,
    rgba(var(--teal-400-rgb),0.40) 0%,
    rgba(var(--teal-500-rgb),0.32) 20%,
    rgba(var(--teal-600-rgb),0.22) 40%,
    rgba(15, 118, 110, 0.12) 65%,
    rgba(6, 78, 59, 0) 90%);
  pointer-events: none;
}

.home-direction-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
}

.home-direction .eu-eyebrow {
  /* Inherit everything from .eu-eyebrow + .eu-section-dark .eu-eyebrow
     (the canonical case-study dark-section eyebrow). Only override the
     bottom margin for section rhythm. */
  margin: 0 0 28px;
}

.home-direction-headline {
  font-family: 'Cal Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(36px, 6vw, 72px);   /* 72px — standardized with the other section headings */
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 48px;
  max-width: 22ch;
}

/* Body paragraphs only — exclude the .eu-eyebrow <p>, which would
   otherwise inherit body-text sizing via the .home-direction p selector
   (specificity 0,1,1) beating the .eu-eyebrow rule (0,1,0). */
.home-direction p:not(.eu-eyebrow) {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  line-height: 34px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 24px;
  max-width: 760px;
}

.home-direction p:not(.eu-eyebrow):last-child { margin-bottom: 0; }

/* CTA on the dark direction section — light outline that fills white on hover
   (the default .home-cta is dark-on-light, invisible here). */
.home-direction-cta { margin-top: 40px; }
.home-direction .home-cta {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.home-direction .home-cta:hover {
  background: #fff;
  color: #1E2328;
  border-color: #fff;
}

@media (max-width: 750px) {
  .home-direction p:not(.eu-eyebrow) { font-size: 17px; line-height: 28px; }
}

/* ════════════════════════════════════════════════════════════════
 * 6. CLOSE + FOOTER — heading-left / CTAs-right, hairline divider,
 *    then a structured 3-column footer.
 *    Pattern reference: nabauer.com bottom of page.
 * ════════════════════════════════════════════════════════════════ */

.home-close-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 64px;
  align-items: end;
  margin-bottom: 80px;
}

.home-close-eyebrow.eu-eyebrow {
  /* Inherit the default .eu-eyebrow pill style so this matches the
     other section eyebrows on the page. Only override grid placement
     and bottom margin for section rhythm. */
  grid-column: 1;
  margin: 0 0 18px;
}

.home-close-headline {
  grid-column: 1;
  font-family: 'Cal Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #1E2328;
  margin: 0;
  max-width: 14ch;
}

.home-close-actions {
  grid-column: 2;
  display: inline-flex;
  flex-wrap: wrap;   /* let the two CTAs flow to separate lines rather than shrink/wrap their labels */
  gap: 12px;
  align-self: end;
}

.home-close-divider {
  border: 0;
  height: 1px;
  background-color: rgba(60, 64, 67, 0.12);
  margin: 0 0 56px;
}

.home-footer {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  column-gap: 64px;
  padding-bottom: 64px;
}

.home-footer-brand { max-width: 360px; }

.home-footer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(145deg, #2c3036, #14171c);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(var(--teal-500-rgb),0.95); /* matches the header brand mark on the homepage */
  margin: 0 0 18px;
}

.home-footer-badge svg {
  width: 20px;
  height: 20px;
}

.home-footer-name {
  font-family: 'Cal Sans', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #1E2328;
  margin: 0 0 10px;
}

.home-footer-bio {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  color: rgba(60, 64, 67, 0.7);
  margin: 0;
  max-width: 320px;
}

.home-footer-col-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(60, 64, 67, 0.55);
  margin: 0 0 18px;
}

.home-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-footer-list a {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #1E2328;
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-footer-list a:hover { color: #000; }

@media (max-width: 1000px) {
  .home-close-top {
    grid-template-columns: 1fr;
    row-gap: 32px;
    align-items: start;
  }
  .home-close-actions { grid-column: 1; align-self: start; }
  .home-footer {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
  .home-footer-brand {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media (max-width: 750px) {
  .home-footer { grid-template-columns: 1fr; row-gap: 32px; }
}

/* ════════════════════════════════════════════════════════════════
 * SCROLL-REVEAL — opt-in via .reveal class. Inline JS toggles
 * .is-visible when the element enters the viewport. Respects
 * prefers-reduced-motion (rules below short-circuit to instant).
 * ════════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════
 * OPT-OUT: the centered sections (quote, direction, final CTA)
 * shouldn't get the Tier-4 left-padding bump (+110px) that the EU
 * system applies to non-centered .eu-section-* by default.
 * ════════════════════════════════════════════════════════════════ */
@media (min-width: 1246px) and (max-width: 2047px) {
  .home-quote.eu-section-white,
  .home-direction.eu-section-dark,
  .home-close.eu-section-white {
    padding-left: 64px;
  }
}