/* ============================================================
   EB Media — style.css
   Sections: Variables · Reset · Cursor · Typography ·
             Animations · Nav · Buttons · Hero · Marquee ·
             Stats · Work · Services · About · Clients ·
             Testimonials · Contact · Footer · Utilities
   ============================================================ */

/* ── Variables ── */
:root {
  --cream:        #F7F6F2;
  --white:        #FFFFFF;
  --ink:          #161614;
  --muted:        #6E6C68;
  --eyebrow:      #C4521A;
  --accent:       #FD6C1E;
  --accent-light: #FFF2EB;
  --accent-2:     #1A3366;
  --line:         #E4E1DA;
  --container:    1475px;
  --gutter:       3.5rem;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Pin html to the viewport width so no descendant can introduce a
     horizontal scrollbar on mobile. body alone isn't enough — iOS
     Safari and some Android Chrome builds let body's overflow leak
     back up to html. `clip` is preferred over `hidden` because it
     doesn't establish a scroll container; older browsers that don't
     support it fall back to body's overflow-x: hidden. */
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a  { text-decoration: none; color: inherit; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'inter-variable', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  overflow-x: clip;
  cursor: none;
}
a, button, [role="button"], input, label, select, textarea { cursor: none !important; }

/* ── Custom Cursor — auto-inverts via mix-blend-mode ──
   Renders as white pixels with mix-blend-mode: difference, so the
   cursor appears as the inverse of whatever's underneath: dark on
   cream/white, light on ink/dark, complement-coloured on tinted
   sections. No detection or class swapping needed — the cursor
   adapts automatically against any background, image, or video. */
.cursor {
  position: fixed; width: 8px; height: 8px;
  background: #fff; border-radius: 50%;
  pointer-events: none; z-index: 99999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: opacity .25s;
}
.cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1px solid #fff; border-radius: 50%;
  pointer-events: none; z-index: 99998;
  transform: translate(-50%, -50%);
  opacity: .4;
  mix-blend-mode: difference;
  transition: width .25s, height .25s, border-width .25s, opacity .25s, background .25s, border-radius .25s;
}

/* Hover state — dot fades, ring becomes a small filled square */
.cursor.cursor--hover { opacity: 0; }
.cursor-ring.cursor--hover {
  width: 28px; height: 28px;
  border-width: 0;
  border-radius: 2px;
  opacity: .25;
  background: #fff;
}

/* Suppress the global cursor when a section owns its own custom cursor
   (e.g. the about page's video section uses a 74px orange play button). */
body.cursor-hidden .cursor,
body.cursor-hidden .cursor-ring { opacity: 0; }

/* ── Touch / coarse-pointer devices ──
   On phones and tablets the custom cursor is meaningless — there's no
   pointer to follow — and synthetic mousemove events fired on tap make
   it jump to wherever the user just touched, which feels broken. Hide
   both cursors completely and restore the system default everywhere
   that was forced to `cursor: none`. */
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-ring, .video-play-cursor { display: none !important; }
  body { cursor: auto; }
  a, button, [role="button"], input, label, select, textarea { cursor: auto !important; }
  #about-video { cursor: pointer; }
}

/* ── Typography ── */
.serif { font-family: 'gotham-black', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.accent { color: var(--accent); }
.italic { font-style: italic; }
.eyebrow {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .2em; color: var(--eyebrow);
  margin-bottom: .75rem;
}

/* ── Keyframes ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes lineSlide {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
@keyframes scrollPulse {
  0%,100% { opacity: .3; transform: translateY(0); }
  50%     { opacity: 1;  transform: translateY(8px); }
}

/* ── Load animation classes ── */
.l1 { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .05s both; }
.l2 { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .20s both; }
.l3 { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .35s both; }
.l4 { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) .50s both; }
.l5 { animation: fadeIn 1.1s ease .65s both; }
.l-line { animation: lineSlide 1s cubic-bezier(.16,1,.3,1) .30s both; }

/* ── Scroll Reveal ─────────────────────────────────────────────────
   .reveal       — fade + 20px up (default workhorse)
   .reveal-l     — fade + 20px in from the left
   .reveal-r     — fade + 20px in from the right
   .reveal-fade  — opacity only, no movement (subtle imagery, dividers)
   .reveal-scale — fade + slight scale-in (.96 → 1, good for images)

   Apply .stagger to a parent so direct children cascade in 80ms steps
   (handles up to 12 children). For one-off offsets, .reveal-d1/-d2/-d3
   add 80/160/240ms manual delays. The IntersectionObserver in
   scripts.js adds .in once on first intersect, then unobserves.

   Implementation note — these used to be transition-based, with
   `.stagger > *:nth-child(N) { transition-delay: Xs }` setting the
   delay on the element itself. The problem: `transition-delay`
   applies to ALL of an element's transitions, so any later `:hover`
   transition (e.g. .cred-industry's background/color invert) also
   inherited the stagger delay — making hovers feel sluggish on
   later children. Animations are independent of transitions, so
   `animation-delay` only affects the reveal and leaves hovers
   instant. */
.reveal,
.reveal-l,
.reveal-r,
.reveal-fade,
.reveal-scale { opacity: 0; }
.reveal       { transform: translateY(20px); }
.reveal-l     { transform: translateX(-20px); }
.reveal-r     { transform: translateX(20px); }
.reveal-scale { transform: scale(.96); }

.reveal.in       { animation: revealUp    .55s cubic-bezier(.16,1,.3,1) var(--stagger-delay, 0s) both; }
.reveal-l.in     { animation: revealLeft  .55s cubic-bezier(.16,1,.3,1) var(--stagger-delay, 0s) both; }
.reveal-r.in     { animation: revealRight .55s cubic-bezier(.16,1,.3,1) var(--stagger-delay, 0s) both; }
.reveal-fade.in  { animation: revealFade  .55s cubic-bezier(.16,1,.3,1) var(--stagger-delay, 0s) both; }
.reveal-scale.in { animation: revealScale .55s cubic-bezier(.16,1,.3,1) var(--stagger-delay, 0s) both; }

@keyframes revealUp    { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes revealLeft  { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes revealRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes revealFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes revealScale { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* Stagger — direct children cascade in 80ms steps, up to 12. The
   --stagger-delay var is consumed by the .reveal*.in animation only,
   so hover transitions on the same element are unaffected. */
.stagger > *:nth-child(1)  { --stagger-delay: 0s; }
.stagger > *:nth-child(2)  { --stagger-delay: .08s; }
.stagger > *:nth-child(3)  { --stagger-delay: .16s; }
.stagger > *:nth-child(4)  { --stagger-delay: .24s; }
.stagger > *:nth-child(5)  { --stagger-delay: .32s; }
.stagger > *:nth-child(6)  { --stagger-delay: .40s; }
.stagger > *:nth-child(7)  { --stagger-delay: .48s; }
.stagger > *:nth-child(8)  { --stagger-delay: .56s; }
.stagger > *:nth-child(9)  { --stagger-delay: .64s; }
.stagger > *:nth-child(10) { --stagger-delay: .72s; }
.stagger > *:nth-child(11) { --stagger-delay: .80s; }
.stagger > *:nth-child(12) { --stagger-delay: .88s; }

/* Manual delay modifiers — use when stagger doesn't fit (e.g. nested
   reveals where the parent's :nth-child position isn't useful). */
.reveal-d1 { --stagger-delay: .08s; }
.reveal-d2 { --stagger-delay: .16s; }
.reveal-d3 { --stagger-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal.in, .reveal-l.in, .reveal-r.in,
  .reveal-fade.in, .reveal-scale.in {
    animation-duration: .01s;
    animation-delay: 0s;
  }
}

/* ── Noise overlay ── */
body::before {
  content: ''; position: fixed; inset: 0;
  pointer-events: none; z-index: 9990; opacity: .25;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--muted); }

/* ─────────────────────────────────────────
   COMPONENTS
───────────────────────────────────────── */

/* ── Buttons ── */
.btn-solid {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--accent); color: #fff;
  padding: .85rem 1.75rem; font-size: .96rem;
  letter-spacing: .1em; text-transform: uppercase;
  transition: transform .2s, box-shadow .2s;
}
.btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(253,108,30,.35);
}

.btn-outline {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid var(--ink); color: var(--ink);
  padding: .85rem 1.75rem; font-size: .96rem;
  letter-spacing: .1em; text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: color .4s;
}
.btn-outline::before {
  content: ''; position: absolute; inset: 0;
  background: var(--ink); transform: translateY(100%);
  transition: transform .4s cubic-bezier(.16,1,.3,1); z-index: 0;
}
.btn-outline:hover::before { transform: translateY(0); }
.btn-outline:hover { color: var(--cream); }
.btn-outline span { position: relative; z-index: 1; }

/* ── Section shared layout ── */
.section-inner {
  max-width: var(--container); margin: 0 auto;
}
.section-header {
  display: flex; align-items: flex-end;
  justify-content: space-between; margin-bottom: 3.5rem;
}
.section-title {
  font-size: clamp(27px, 3.6vw, 46px); font-weight: 300;
  line-height: 1.0;
  margin-bottom: 1.75rem;
}
.section-link {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted);
  display: none;
}
@media (min-width: 768px) { .section-link { display: block; } }

/* ─────────────────────────────────────────
   NAV — Hamburger dropdown
───────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
}

/* Bar that's always visible */
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem var(--gutter);
  background: var(--cream);
  position: relative; z-index: 2;
  max-width: 100%;
}
.nav-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: var(--container); margin: 0 auto;
}

.nav-logo-link { display: flex; align-items: center; }
.nav-logo { height: 52px; width: 52px; object-fit: cover; border-radius: 0; }

.nav-right { display: flex; align-items: center; gap: 1rem; }

.nav-cta { padding: .8rem 1.6rem; font-size: .72rem; }
@media (max-width: 767px) { .nav-cta { display: none; } }

/* Hamburger button — padding + label letter-spacing matched to .nav-cta
   so the two buttons read as symmetrical in the nav. */
.hamburger {
  display: flex; align-items: center; gap: .65rem;
  background: none; border: 1px solid var(--line);
  padding: .8rem 1.6rem; cursor: none;
  transition: border-color .3s, background .3s;
}
.hamburger:hover { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.hamburger:hover .bar { background: var(--cream); }

.ham-label {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: inherit;
  transition: color .3s;
}
.ham-icon {
  display: flex; flex-direction: column;
  gap: 5px; width: 18px;
}
.bar {
  display: block; width: 100%; height: 1.5px;
  background: var(--ink); transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s, background .3s;
  transform-origin: center;
}

/* Open state — X */
.hamburger.open .bar-1 { transform: translateY(3.25px) rotate(45deg); }
.hamburger.open .bar-2 { transform: translateY(-3.25px) rotate(-45deg); }

/* ── Dropdown panel ── */
.nav-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  max-height: 0;
  padding: 0 var(--gutter);
  transition: max-height .6s cubic-bezier(.16,1,.3,1);
  z-index: 1;
}
.nav-dropdown.open {
  max-height: calc(100dvh - 94px);
  overflow-y: auto;
}
@media (min-width: 768px) {
  .nav-dropdown.open {
    max-height: 800px;
    overflow-y: visible;
  }
}

.dropdown-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem 0 2.5rem;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .4s .1s, transform .5s .05s cubic-bezier(.16,1,.3,1);
}
.nav-dropdown.open .dropdown-inner {
  opacity: 1; transform: translateY(0);
}
@media (min-width: 768px) {
  .dropdown-inner {
    grid-template-columns: 1fr auto;
    gap: 5rem;
    padding-top: 3rem;
    padding-bottom: 4rem;
  }
}

/* Nav links */
.dropdown-links { display: flex; flex-direction: column; }

.drop-link {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .35s cubic-bezier(.16,1,.3,1);
}
@media (min-width: 768px) {
  .drop-link { padding: 1.35rem 0; }
}
.drop-link:hover { padding-left: .5rem; }

.drop-num {
  font-size: .82rem; color: var(--muted); font-weight: 300;
  width: 1.5rem; flex-shrink: 0;
}
.drop-text {
  font-family: 'gotham-black', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 3rem);
  font-weight: 300; line-height: 1;
  flex: 1;
  transition: color .3s;
}
.drop-link:hover .drop-text { color: var(--accent); }

.drop-arrow {
  font-size: .96rem; color: var(--muted);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s, transform .3s;
}
.drop-link:hover .drop-arrow { opacity: 1; transform: translateX(0); }

/* Services sub-item */
.drop-group { display: flex; flex-direction: column; }
.drop-group > .drop-link { border-bottom: none; }

.drop-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.16,1,.3,1);
  border-bottom: 1px solid var(--line);
}
.drop-group:hover .drop-sub,
.drop-group:focus-within .drop-sub { max-height: 60px; }

.drop-sub-link {
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 0 1rem 2.75rem;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s .1s, transform .3s .1s cubic-bezier(.16,1,.3,1), color .2s;
}
.drop-group:hover .drop-sub-link,
.drop-group:focus-within .drop-sub-link {
  opacity: 1; transform: translateY(0);
}
.drop-sub-dash {
  font-size: .75rem; color: var(--muted); flex-shrink: 0;
}
.drop-sub-text {
  font-size: .95rem; font-weight: 400; color: var(--muted);
  letter-spacing: .02em;
  transition: color .2s;
}
.drop-sub-arrow {
  font-size: .8rem; color: var(--muted);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.drop-sub-link:hover .drop-sub-text { color: var(--accent); }
.drop-sub-link:hover .drop-sub-arrow { opacity: 1; transform: translateX(0); }

/* Aside panel — Get in touch / Follow us / Location.
   On desktop it sits as the right column of the dropdown grid. On
   mobile it stacks below the nav links with a soft divider above
   it so it reads as a footer to the menu rather than competing
   with the link list. */
.dropdown-aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: .25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .dropdown-aside {
    gap: 1.75rem;
    margin-top: 0;
    padding-top: .25rem;
    border-top: none;
    min-width: 180px;
  }
}
.dropdown-aside-block { display: flex; flex-direction: column; gap: .4rem; }

.drop-contact-link {
  font-size: 1rem; font-weight: 300;
  color: var(--ink); transition: color .3s;
  display: block;
}
@media (min-width: 768px) {
  .drop-contact-link { font-size: 1.2rem; }
}
.drop-contact-link:hover { color: var(--accent); }

.drop-social { display: flex; flex-direction: column; gap: .3rem; }
.drop-social a {
  font-size: .96rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted);
  transition: color .3s;
}
.drop-social a:hover { color: var(--ink); }


/* ─────────────────────────────────────────
   STATS
───────────────────────────────────────── */
#stats { background: var(--ink); padding: 3.5rem var(--gutter); }
.stats-grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px; background: rgba(247,246,242,.08);
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-item {
  background: var(--ink); padding: 2.5rem 2rem; text-align: center;
}
.stat-num {
  font-family: 'gotham-black', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(44px, 5vw, 68px); line-height: 1; font-weight: 300;
  color: var(--cream);
}
.stat-label {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .15em; color: var(--cream); font-weight: 600;
  margin-top: .5rem;
}

/* ─────────────────────────────────────────
   WORK
───────────────────────────────────────── */
/* #work — vertical padding only; horizontal handled per child so the
   featured stack inside can break out to the viewport edges. */
#work {
  padding: 7rem 0;
  background: var(--cream);
  overflow: hidden;
}
/* Contained children inside a section that itself has no horizontal
   padding (the slider needs to be full-width). Bumping max-width by
   2× gutter makes content land at the same position as the standard
   pattern under box-sizing: border-box. */
#work > .section-header,
#work > .work-cta {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
#work > .section-header { margin-bottom: 4.5rem; }

/* ─────────────────────────────────────────
   SERVICES
───────────────────────────────────────── */
#services { background: var(--white); padding: 7rem var(--gutter); }

/* ── Services bento — asymmetric tile grid ─────────────────────────────
   12-column grid. Mobile: every tile span-12. Tablet (≥768): lead tile
   span-12, others span-6. Desktop (≥1024): lead 6, md 3, sm 4 — yields
   two 12-col rows (6+3+3 then 4+4+4). Color rotates through the brand
   palette so the section reads as colorful, not uniform. */
.svc-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
  margin-top: 4rem;
}
.svc-tile { grid-column: span 12; }
@media (min-width: 768px) {
  .svc-tile--md, .svc-tile--sm { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .svc-tile--lg { grid-column: span 6; }
  .svc-tile--md { grid-column: span 3; }
  .svc-tile--sm { grid-column: span 4; }
}

/* Quad layout — 4 .svc-tile--lg tiles arranged in a clean 2×2 grid.
   Used by the homepage and /services list since the service set was
   reduced from 6 colourful tiles to 4 calmer ones. Bumps lg to span 6
   on tablet too so we don't end up with a 4-tile column on iPad. */
@media (min-width: 768px) {
  .svc-bento--quad .svc-tile--lg { grid-column: span 6; }
}

/* Inline tag rail at the bottom of a .svc-tile (services list).
   Replaces the marquee on the lead tile, scaled down so it reads as
   a footer caption rather than dominating the tile. */
.svc-tile-tags {
  margin: auto 0 0;
  padding-top: 1.5rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  line-height: 1.6;
  opacity: .85;
}
.svc-tile--ink .svc-tile-tags,
.svc-tile--accent .svc-tile-tags,
.svc-tile--blue .svc-tile-tags { color: rgba(255,255,255,.55); }

.svc-tile {
  position: relative;
  padding: 2.25rem 2rem 2rem;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  border-radius: 0;
  /* Default text colors — overridden per-variant below. Used by the
     title/desc wipe via background-clip: text. */
  --text-from: #fff;
  --text-to: var(--cream);
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    color .55s cubic-bezier(.85,0,.15,1),
    border-color .3s,
    border-radius .55s cubic-bezier(.85,0,.15,1);
}
.svc-tile:hover {
  transform: translateY(-4px);
  border-radius: 1rem;
}

/* Color sweep — pseudo-element scales in left-to-right on hover, covering
   the tile's idle background with its complement color. Body/numeral sit
   above (z-index 2); marquee sits below (z-index 0) so the sweep covers it. */
.svc-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.85,0,.15,1);
}
.svc-tile:hover::before { transform: scaleX(1); }

.svc-tile--lg { min-height: 420px; }

/* Idle color variants. --text-from / --text-to drive the title+desc wipe;
   the explicit color drives the numeral (via currentColor) and the CTA. */
.svc-tile--accent { background: var(--accent);       color: #fff;        --text-from: #fff;        --text-to: var(--cream); }
.svc-tile--ink    { background: var(--ink);          color: var(--cream); --text-from: var(--cream); --text-to: #fff; }
.svc-tile--blue   { background: var(--accent-2);     color: #fff;        --text-from: #fff;        --text-to: #fff; }
.svc-tile--cream  { background: var(--accent-light); color: var(--ink);  --text-from: var(--ink);  --text-to: var(--cream); }
.svc-tile--light  { background: var(--white);        color: var(--ink);  --text-from: var(--ink);  --text-to: var(--cream); border: 1px solid var(--line); }

/* Sweep colors — each tile flips to a complement on hover */
.svc-tile--accent::before { background: var(--ink); }
.svc-tile--ink::before    { background: var(--accent); }
.svc-tile--blue::before   { background: var(--accent); }
.svc-tile--cream::before  { background: var(--ink); }
.svc-tile--light::before  { background: var(--ink); }

/* Hover element color — used by the numeral (currentColor) and the CTA
   (color: inherit). Title and desc don't use this; their colors are
   driven by the background-clip wipe below. */
.svc-tile--accent:hover { color: var(--cream); }
.svc-tile--ink:hover    { color: #fff; }
.svc-tile--blue:hover   { color: #fff; }
.svc-tile--cream:hover  { color: var(--cream); }
.svc-tile--light:hover  { color: var(--cream); border-color: transparent; }

/* Title + desc + CTA wipe — a 200%-wide gradient with new-color on the
   left and old-color on the right is clipped to the text.
   background-position slides from 100% (right half visible = old) to 0%
   (left half visible = new). The hard 50/50 stop creates a clean wipe
   edge that travels left-to-right through the text in lockstep with the
   ::before sweep. */
.svc-tile-title,
.svc-tile-desc,
.svc-tile-cta {
  background-image: linear-gradient(to right, var(--text-to) 50%, var(--text-from) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  transition: background-position .55s cubic-bezier(.85,0,.15,1);
}
.svc-tile:hover .svc-tile-title,
.svc-tile:hover .svc-tile-desc,
.svc-tile:hover .svc-tile-cta {
  background-position: 0 0;
}

/* Big serif numeral, top-right */
.svc-tile-num {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  opacity: .35;
  pointer-events: none;
}
.svc-tile--accent .svc-tile-num,
.svc-tile--ink .svc-tile-num,
.svc-tile--blue .svc-tile-num { opacity: .55; }
.svc-tile--lg .svc-tile-num { font-size: 3.25rem; }

.svc-tile-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 2.25rem;
}

.svc-tile-title {
  font-size: clamp(1.1rem, 1.36vw, 1.32rem);
  font-weight: 500;
  line-height: 1.18;
  margin-bottom: .9rem;
  max-width: 22ch;
}
.svc-tile--lg .svc-tile-title {
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  max-width: 14ch;
}

.svc-tile-desc {
  font-size: .92rem;
  line-height: 1.65;
  opacity: .85;
  margin-bottom: 1.75rem;
  max-width: 38ch;
  flex: 1;
}
.svc-tile--lg .svc-tile-desc {
  font-size: 1rem;
  max-width: 42ch;
}

.svc-tile-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-decoration: none;
  align-self: flex-start;
  padding-bottom: .35rem;
}
/* Underline wipes in step with the CTA text via its own gradient stripe.
   Replaces the old border-bottom: 1px solid currentColor — currentColor
   would be transparent under the wipe and the line would disappear. */
.svc-tile-cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-image: linear-gradient(to right, var(--text-to) 50%, var(--text-from) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position .55s cubic-bezier(.85,0,.15,1);
}
.svc-tile:hover .svc-tile-cta::after { background-position: 0 0; }

/* Arrow — needs an explicit opaque color because both `color` and
   `-webkit-text-fill-color` are inherited as transparent from the CTA's
   wipe rules, which would render the arrow invisible. Solid color
   transitions on the same .55s timing as the wipe. (A wipe across a
   single character would compress to be barely perceptible anyway.) */
.svc-tile-arrow {
  display: inline-block;
  color: var(--text-from);
  -webkit-text-fill-color: var(--text-from);
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    color .55s cubic-bezier(.85,0,.15,1),
    -webkit-text-fill-color .55s cubic-bezier(.85,0,.15,1);
}
.svc-tile:hover .svc-tile-arrow {
  transform: translateX(5px);
  color: var(--text-to);
  -webkit-text-fill-color: var(--text-to);
}

/* Lead tile keyword marquee — runs along the bottom edge, behind the CTA.
   JS-driven via #svcMarqueeTrack so we get a pixel-perfect seamless loop. */
.svc-tile-marquee {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  font-family: 'gotham-black', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: rgba(255,255,255,.18);
  font-style: italic;
}
.svc-tile-marquee-track {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}
.svc-tile-marquee-track > span { display: inline-block; }
.svc-tile-marquee .svc-mq-dot { font-style: normal; opacity: .6; }

/* ─────────────────────────────────────────
   ABOUT
───────────────────────────────────────── */
.about-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.about-stat-card {
  padding: 2rem; background: var(--white); border: 1px solid var(--line);
  min-width: 0;
  overflow: hidden;
}
.about-stat-card.dark  { background: var(--accent-2); color: var(--cream); border-color: transparent; }
.about-stat-card.blue  { background: var(--accent); color: #fff; border-color: transparent; }
.about-stat-card.span-2 { grid-column: span 2; }
.about-stat-num  { font-size: 3rem; font-weight: 300; line-height: 1; }
.about-stat-num.accent { color: var(--accent); }
.about-stat-card.dark .about-stat-num  { color: var(--cream); }
.about-stat-card.blue .about-stat-num  { color: #fff; }
.about-stat-label {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; margin-top: .5rem;
}
.about-stat-card.dark .about-stat-label { opacity: .45; color: var(--cream); }
.about-stat-card.blue .about-stat-label { opacity: .75; color: #fff; }
.about-quote-card {
  grid-column: span 2; padding: 1.5rem 2rem;
  background: var(--white); border: 1px solid var(--line);
}
.about-quote { font-size: .96rem; font-weight: 300; font-style: italic; line-height: 1.5; }
.about-quote-attr { font-size: .96rem; color: var(--muted); margin-top: .75rem; }

/* ─────────────────────────────────────────
   CLIENTS
───────────────────────────────────────── */
#clients {
  padding: 7rem var(--gutter);
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.clients-inner {
  max-width: var(--container); margin: 0 auto;
}
#clients .eyebrow { text-align: center; margin-bottom: 2.5rem; }
.clients-grid {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 2.5rem 4rem;
}
.client-logo {
  height: 36px; object-fit: contain;
  filter: grayscale(1); opacity: .45;
  transition: opacity .3s, filter .3s;
}
.client-logo:hover { opacity: .85; filter: grayscale(0); }

/* ─────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────── */
#testimonials {
  background: var(--white);
  padding: 7rem 0 6rem;
  overflow: hidden;
  position: relative;
}
#testimonials::before {
  content: '';
  position: absolute;
  left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  width: 860px; height: 520px;
  background: radial-gradient(ellipse at center,
    rgba(253,108,30,.12) 0%,
    rgba(253,108,30,.04) 45%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.testi-header {
  display: flex; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap;
  gap: 1.5rem; margin-bottom: 3rem;
  position: relative; z-index: 1;
  padding: 0 var(--gutter);
}
.testi-eyebrow { }
.testi-header .section-title { color: var(--ink); margin-bottom: 0; }

/* Right-side actions stack — Google Reviews button + slider nav,
   stacks the reviews button above the arrow buttons on desktop and
   keeps everything aligned to the right edge. */
.testi-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  flex-shrink: 0;
}
.testi-reviews-btn { padding: .85rem 1.4rem; font-size: .78rem; }
.testi-reviews-btn span:last-child { color: var(--accent); }
@media (max-width: 700px) {
  .testi-actions { width: 100%; align-items: stretch; gap: .75rem; }
  .testi-reviews-btn { justify-content: center; }
}

.testi-nav { display: flex; gap: .6rem; flex-shrink: 0; }
.testi-btn {
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  background: transparent; color: var(--ink);
  font-size: 1rem; cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s;
  position: relative; z-index: 1;
}
.testi-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.testi-track-wrap { width: 100%; overflow: visible; position: relative; z-index: 1; }
.testi-track {
  display: flex; align-items: stretch; gap: 1.25rem;
  transition: transform .75s cubic-bezier(.16,1,.3,1);
  padding: 1rem 0 2rem;
  will-change: transform;
}
.testi-card {
  flex-shrink: 0; width: 520px;
  transition:
    transform .75s cubic-bezier(.16,1,.3,1),
    opacity   .75s ease,
    filter    .75s ease;
}
@media (max-width: 768px) { .testi-card { width: 85vw; } }
@media (max-width: 540px) { .testi-card { width: 88vw; } }
.testi-card-inner {
  background: #fff;
  border: 1px solid var(--line);
  padding: 2.25rem 2.5rem 2rem;
  display: flex; flex-direction: column;
  height: 100%;
  transition: background .6s, border-color .6s;
}
.testi-card.t-active { transform: scale(1); opacity: 1; filter: blur(0px); }
.testi-card.t-active .testi-card-inner {
  background: #fff;
  border-color: rgba(253,108,30,.30);
}
.testi-card.t-adj    { transform: scale(0.90); opacity: 0.45; filter: blur(2.5px); }
.testi-card.t-far    { transform: scale(0.82); opacity: 0.20; filter: blur(5px); }
.testi-card.t-hidden { transform: scale(0.76); opacity: 0; filter: blur(8px); pointer-events: none; }
.testi-card-inner::before {
  content: '\201C';
  font-family: 'gotham-black', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 5rem; line-height: .65;
  color: rgba(253,108,30,.18);
  display: block; margin-bottom: .6rem;
  transition: color .6s;
}
.testi-card.t-active .testi-card-inner::before { color: rgba(253,108,30,.38); }
.testi-stars { color: var(--accent); letter-spacing: .14em; font-size: .84rem; margin-bottom: 1rem; }
.testi-quote {
  font-size: 1.25rem; font-weight: 300; font-style: italic;
  line-height: 1.75; color: var(--ink);
  flex: 1; margin-bottom: 1.75rem;
}
.testi-author {
  display: flex; align-items: center; gap: .85rem;
  padding-top: 1.25rem; margin-top: auto;
  border-top: 1px solid var(--line);
}
.testi-logo   { height: 26px; object-fit: contain; filter: grayscale(1); opacity: .45; }
.testi-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(253,108,30,.18);
  border: 1px solid rgba(253,108,30,.35);
  flex-shrink: 0;
}
.testi-name { font-size: .82rem; font-weight: 500; color: var(--ink); }
.testi-role { font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.testi-dots {
  display: flex; align-items: center; gap: .5rem;
  margin-top: 2.25rem; position: relative; z-index: 1;
  padding: 0 var(--gutter);
}
.testi-dot {
  height: 5px; width: 5px; border-radius: 3px;
  background: var(--line);
  transition: width .35s ease, background .35s ease;
  cursor: none;
}
.testi-dot.active { width: 22px; background: var(--accent); }

/* ─────────────────────────────────────────
   FOOTER — Dark 2-col with contact form
───────────────────────────────────────── */
#footer {
  background: var(--ink);
  padding: 7rem var(--gutter);
  color: var(--cream);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  max-width: var(--container); margin: 0 auto;
}
@media (min-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1.6fr; gap: 6rem; align-items: start; }
}

/* — Left brand col — */
.footer-brand { display: flex; flex-direction: column; gap: 2rem; }
.footer-logo { height: 48px; width: 48px; object-fit: cover; }
.footer-tagline {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 300; line-height: 1.1;
  color: var(--cream);
}
.footer-contact-info {
  display: flex; flex-direction: column; gap: .6rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(247,246,242,.1);
}
.footer-info-link {
  font-size: .96rem; color: rgba(247,246,242,.65);
  transition: color .3s; text-decoration: none;
}
.footer-info-link:hover { color: var(--accent); }
.footer-info-text { font-size: .96rem; color: rgba(247,246,242,.3); }

.footer-social { display: flex; gap: 1.5rem; }
.footer-link {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(247,246,242,.35);
  transition: color .3s; text-decoration: none;
}
.footer-link:hover { color: var(--cream); }
.footer-copy { font-size: .82rem; color: rgba(247,246,242,.2); }

/* — Right form col — */
.footer-form-eyebrow { color: rgba(247,246,242,.5); }
.footer-form-heading {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 300; line-height: 1.1;
  color: var(--cream); margin-bottom: 2.25rem;
}

.footer-form { display: flex; flex-direction: column; gap: 1.25rem; }
.footer-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
@media (max-width: 640px) { .footer-form-row { grid-template-columns: 1fr; } }

/* Field wrapper */
.footer-field { display: flex; flex-direction: column; gap: .45rem; }
.footer-field label {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .15em; color: rgba(247,246,242,.4);
}
.footer-req { color: var(--accent); }

/* Inputs, selects, textarea */
.footer-form input,
.footer-form select,
.footer-form textarea {
  background: rgba(247,246,242,.04);
  border: 1px solid rgba(247,246,242,.12);
  color: var(--cream);
  padding: .75rem 1rem;
  font-family: inherit; font-size: .96rem; font-weight: 300;
  transition: border-color .3s, background .3s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
.footer-form input::placeholder,
.footer-form textarea::placeholder { color: rgba(247,246,242,.2); }
.footer-form input:focus,
.footer-form select:focus,
.footer-form textarea:focus {
  border-color: var(--accent);
  background: rgba(247,246,242,.07);
}

/* Select arrow */
.footer-field { position: relative; }
.footer-form select { display: none; } /* hidden — replaced by custom-select */

/* Custom select widget */
.custom-select {
  position: relative;
  width: 100%;
}
.custom-select-trigger {
  background: rgba(247,246,242,.04);
  border: 1px solid rgba(247,246,242,.12);
  color: rgba(247,246,242,.3);
  padding: .75rem 2.5rem .75rem 1rem;
  font-family: inherit; font-size: .96rem; font-weight: 300;
  transition: border-color .3s, background .3s;
  cursor: none;
  user-select: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.custom-select-trigger.placeholder { color: rgba(247,246,242,.2); }
.custom-select.open .custom-select-trigger,
.custom-select-trigger:hover {
  border-color: var(--accent);
  background: rgba(247,246,242,.07);
}
/* Arrow indicator */
.custom-select-trigger::after {
  content: '↓';
  position: absolute; right: 1rem;
  font-size: .72rem; color: rgba(247,246,242,.3);
  transition: transform .2s;
}
.custom-select.open .custom-select-trigger::after { transform: rotate(180deg); }
/* Make trigger text full color once a value is selected */
.custom-select-trigger:not(.placeholder) { color: var(--cream); }

.custom-select-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #1a1a18;
  border: 1px solid rgba(247,246,242,.12);
  border-top: 1px solid var(--accent);
  list-style: none; margin: 0; padding: .4rem 0;
  z-index: 200;
  max-height: 220px; overflow-y: auto;
  display: none;
}
.custom-select.open .custom-select-dropdown { display: block; }
.custom-select-option {
  padding: .65rem 1rem;
  font-size: .96rem; font-weight: 300; color: rgba(247,246,242,.65);
  transition: background .15s, color .15s;
  cursor: none;
}
.custom-select-option:hover,
.custom-select-option.selected {
  background: rgba(253,108,30,.12);
  color: var(--cream);
}

.footer-form textarea { resize: vertical; min-height: 110px; }

/* Submit */
.footer-submit { margin-top: .5rem; align-self: flex-start; }

/* — Footer left CTA content — */
.footer-cta-title {
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 300; line-height: .93;
  color: var(--cream); margin: 1rem 0 1.5rem;
}
.footer-cta-sub {
  font-size: .96rem; color: rgba(247,246,242,.45);
  line-height: 1.8; max-width: 380px; margin-bottom: 2rem;
}
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.contact-email { border-color: rgba(247,246,242,.25); color: var(--cream); }
.contact-email::before { background: var(--accent-2); }

/* ─────────────────────────────────────────
   SUB-FOOTER — White bar below dark footer
───────────────────────────────────────── */
#sub-footer {
  background: var(--white);
  padding: 1.25rem var(--gutter);
  border-top: 1px solid var(--line);
}
.sub-footer-inner {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--container); margin: 0 auto;
}
.sub-footer-logo { height: 36px; width: 36px; object-fit: cover; }
.sub-footer-copy { font-size: .82rem; color: var(--muted); }
.sub-footer-social { display: flex; gap: 1.5rem; }
.sub-footer-link {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); transition: color .3s;
  text-decoration: none;
}
.sub-footer-link:hover { color: var(--ink); }


/* ============================================================
   UPDATED SECTIONS — Bungee-inspired image-forward design
   ============================================================ */

/* ── Scroll line + fill ──
   Used by .page-hero-scroll on interior pages and the thank-you page.
   The original .scroll-indicator wrapper that nested these lived in
   the old homepage hero, which has been replaced by #hero-mq. */
.scroll-line {
  width: 1px; height: 50px; background: var(--line); overflow: hidden;
}
.scroll-fill {
  width: 100%; height: 100%; background: var(--accent);
  animation: scrollPulse 2s ease infinite;
}

/* ─────────────────────────────────────────
   WORK — Featured project slider (homepage)
   3 slides in identical .feat--split layout. JS toggles .is-active on
   slides + corresponding nav buttons. CSS handles all transitions —
   per-element delays via --anim-delay custom property let the new
   slide's content cascade in piece by piece in under 1s.
───────────────────────────────────────── */
.feat-slider { position: relative; }

/* All slides share a single grid cell so the frame auto-sizes to the
   tallest slide and stacking comes free. */
.feat-slider-frame {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.feat-slide {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Active and leaving slides are both visible — the difference is whether
   their inner content is animating in (active) or out (leaving). */
.feat-slide.is-active,
.feat-slide.is-leaving {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Each slide's link wrapper — same .feat--split layout as before */
.feat {
  display: block;
  text-decoration: none;
  color: inherit;
}
.feat--split {
  display: flex;
  align-items: center;
  gap: 0;
}

.feat-media {
  flex: 0 0 50vw;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}
.feat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.feat:hover .feat-media img { transform: scale(1.04); }

/* Curtain that slides off the image when slide becomes active —
   first piece of the staggered reveal. */
.feat-media-curtain {
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: translateX(0);
  z-index: 2;
  pointer-events: none;
}
.feat-slide.is-active .feat-media-curtain {
  transform: translateX(101%);
  transition: transform .55s cubic-bezier(.85,0,.15,1) 50ms;
}

/* Body content area */
.feat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-left: clamp(2rem, 4vw, 5rem);
  padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  /* Reserve space for the absolute-positioned slider footer (pagination
     + CTA). On mobile the footer flows naturally below — see media query. */
  padding-bottom: 6rem;
}

@media (max-width: 900px) {
  .feat--split { flex-direction: column; align-items: stretch; }
  .feat-media { flex: 0 0 auto; width: 100%; }
  .feat-body { padding: 2rem var(--gutter) 0; }
}

/* Per-element fade-up. Default state: invisible, nudged down 10px.
   Active state: visible at rest. transition-delay comes from the
   inline --anim-delay variable, set per-element so the cascade
   happens automatically when the slide gains .is-active. */
.feat-anim {
  opacity: 0;
  transform: translateY(10px);
}
.feat-slide.is-active .feat-anim {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .35s cubic-bezier(.16,1,.3,1) var(--anim-delay, 0ms),
    transform .45s cubic-bezier(.16,1,.3,1) var(--anim-delay, 0ms);
}
/* Exit — reverse cascade (last-in-first-out). The CTA (--anim-delay
   620ms) leaves immediately; the eyebrow (--anim-delay 200ms) leaves
   last. exit-delay = (max_anim - this_anim) compressed by 0.25 so the
   whole exit fits in ~350ms. Content slides UP (opposite of entry's
   down) for symmetry. */
.feat-slide.is-leaving .feat-anim {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity .25s cubic-bezier(.85,0,.15,1) calc((620ms - var(--anim-delay, 620ms)) * 0.25),
    transform .25s cubic-bezier(.85,0,.15,1) calc((620ms - var(--anim-delay, 620ms)) * 0.25);
}
/* Curtain closes back over the image during exit — reverses the open
   gesture from entry. Quick (.3s) so it lands inside the exit window. */
.feat-slide.is-leaving .feat-media-curtain {
  transform: translateX(0);
  transition: transform .3s cubic-bezier(.85,0,.15,1);
}

/* ── Body content typography ─────────────────────────────────────── */
.feat-num {
  margin: 0 0 1.25rem;
}
.feat-title {
  font-size: clamp(1.6rem, 2.8vw, 2.8rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
  max-width: 14ch;
}
.feat-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 2rem;
  max-width: 460px;
}
.feat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.25rem;
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
}
.feat-meta li {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .92rem;
  font-weight: 400;
  color: var(--ink);
}
.feat-meta li span {
  font-size: .65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  opacity: .65;
}

.feat-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink);
  align-self: flex-start;
  border-bottom: 1px solid var(--ink);
  padding-bottom: .35rem;
}
.feat-arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.feat:hover .feat-arrow { transform: translateX(5px); }

/* ── Slider footer — pagination + section CTA, anchored to the bottom
   of the body column on desktop so the slider doesn't push vertical
   space below it. Falls back to natural flow on mobile. ────────────── */
.feat-slider-footer {
  position: absolute;
  bottom: 0;
  left: 50vw;
  right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding: 1.25rem 0 0 clamp(2rem, 4vw, 5rem);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  z-index: 3;
}

.feat-slider-nav {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}
.feat-slider-num {
  position: relative;
  background: none;
  border: 0;
  padding: .55rem .9rem .8rem;
  font-family: 'gotham-black', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--muted);
  cursor: pointer;
  transition: color .25s;
}
.feat-slider-num:hover { color: var(--ink); }
.feat-slider-num.is-active { color: var(--ink); }
.feat-slider-num::after {
  content: '';
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .15rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.85,0,.15,1);
}
.feat-slider-num.is-active::after { transform: scaleX(1); }

.feat-slider-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.feat-slider-cta-text {
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--muted);
  margin: 0;
  line-height: 1.3;
  max-width: 220px;
  text-align: right;
}

/* On narrow desktop where the body column is tighter, drop the helper
   text rather than wrapping awkwardly. */
@media (max-width: 1100px) {
  .feat-slider-cta-text { display: none; }
}

@media (max-width: 900px) {
  /* Slider stacks; footer flows naturally below the slide. */
  .feat-slider-footer {
    position: static;
    margin-top: 1.5rem;
    padding: 1.5rem var(--gutter) 0;
    flex-wrap: wrap;
  }
  .feat-slider-cta-text { display: inline; max-width: none; text-align: left; }
}
@media (max-width: 540px) {
  .feat-slider-footer { gap: 1rem; }
  .feat-slider-cta { width: 100%; justify-content: space-between; }
  .feat-slider-num { padding: .5rem .75rem .7rem; font-size: .9rem; }
}

/* Work CTA row */
.work-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2rem 0; border-top: 1px solid var(--line);
  flex-wrap: wrap; gap: 1rem;
}

/* ─────────────────────────────────────────
   ABOUT — Full-bleed image panel layout
───────────────────────────────────────── */
#about { padding: 0; overflow: hidden; background: #fff; }

.about-fullbleed {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .about-fullbleed {
    grid-template-columns: 1fr 1fr;
    min-height: 680px;
  }
}

/* Image panel */
.about-img-panel {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: var(--line);
}
.about-main-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Floating badge */
.about-badge {
  position: absolute; top: 2rem; right: 2rem;
  background: var(--accent-2); color: var(--cream);
  padding: 1.25rem 1.5rem; text-align: center;
}
.about-badge-num   { font-size: 2.25rem; font-weight: 300; line-height: 1; }
.about-badge-label { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; opacity: .5; margin-top: .25rem; }

/* Copy panel */
.about-copy-panel {
  padding: 5rem var(--gutter) 5rem var(--gutter);
  padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  background: #fff;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}

.about-headline {
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 300; line-height: 1.05;
  margin-bottom: 1.75rem;
}
.about-body {
  font-size: .96rem; color: var(--muted);
  line-height: 1.8; margin-bottom: 1.25rem;
}

/* Trusted by logo marquee in about panel */
.about-logos-wrap {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 1.5rem 0;
}
.about-logos-label {
  padding: .75rem 0 .6rem;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.about-logos-marquee {
  overflow: hidden;
  padding: .85rem 0;
}
.about-logos-track {
  display: flex; align-items: center; gap: 2rem;
  white-space: nowrap; will-change: transform;
}
/* Real logo images in the marquee. Already-grayscale PNGs sit on the
   white about-copy panel; opacity .55 keeps them muted and consistent
   with the section's restrained palette. No hover treatment because
   the marquee is constantly translating — :hover wouldn't latch.

   The source PNGs include generous whitespace padding around the
   mark itself, so the bounding box is sized larger than you'd guess
   to compensate — the actual visible logo lands at a readable size. */
.about-logo-img {
  flex-shrink: 0;
  height: 60px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
  opacity: .55;
}

.about-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }

/* ── Responsive gutter ── */
@media (max-width: 640px) {
  :root { --gutter: 1.25rem; }
}
@media (min-width: 641px) and (max-width: 900px) {
  :root { --gutter: 2rem; }
}

/* ── Responsive section padding ──
   Most sections use `padding: 7rem var(--gutter)` which feels generous
   on desktop but crushes phone viewports — six lines of empty space
   before the next band. This block scales vertical section padding
   down on small viewports without touching the 20+ individual
   declarations. We target the heavy hitters by selector rather than
   introducing a --section-pad variable, so the change is localised
   and easy to tune. */
@media (max-width: 640px) {
  /* Homepage + interior sections */
  #stats, #work, #services, #testimonials,
  #work-grid, #work-featured-static,
  #services-intro, #services-list, #services-process, #services-nonprofit,
  #about-intro, #about-team, #about-howwework, #about-credentials,
  #about-values,
  #np-intro, #np-services, #np-cta-section,
  .related-posts {
    padding-top: 4.25rem;
    padding-bottom: 4.25rem;
  }
  /* Footer is dark and dense — keep a bit more air than the others */
  #footer { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  /* Stats strip stays tight on mobile but a touch shorter */
  #stats, .work-stats-strip { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .work-stat { padding: 2rem 1rem; }
  .stat-item { padding: 1.75rem 1rem; }
  /* Big numbers in stat strips were already clamp(44px, 5vw, 68px) so
     they bottom out at 44px on phones — that "300+" in gotham-black is
     ~125px wide which used to overflow the cell. Drop the floor so the
     digits scale down on tight viewports. */
  .stat-num, .work-stat-num { font-size: clamp(34px, 11vw, 44px); }
  .stat-label, .work-stat-label { letter-spacing: .1em; }

  /* Services + about pages use a different stat card with a fixed 3rem
     number, which was the real overflow culprit — the unbreakable
     "300+" in a 1fr cell with 2rem padding pushes the grid past the
     viewport. Tighten padding and scale the number down on phones. */
  .about-stats { gap: .65rem; }
  .about-stat-card { padding: 1.25rem 1rem; }
  .about-stat-num { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .about-stat-label { letter-spacing: .08em; }
  /* The inline `<span style="font-size:1.5rem">+</span>` in services.php
     would otherwise stay at 1.5rem (24px) while the parent number drops
     to ~28px. Force the plus to scale with its parent. */
  .about-stat-num span[style*="font-size"] { font-size: 0.7em !important; }

  /* Page hero — calc(7rem + 93px) leaves a wall of space above the
     eyebrow on phones. Drop the top buffer; bottom stays at 4rem. */
  .page-hero { padding: calc(3.5rem + 93px) var(--gutter) 4rem; }

  /* Case study sections */
  .cs-hero { padding-top: calc(3.5rem + 93px); }
  .cs-section { padding: 4.25rem var(--gutter); }
  .cs-closing { padding: 4.5rem var(--gutter); }
  .cs-hero-meta { padding: 1.25rem 0; margin-bottom: 2.5rem; gap: 1rem 2rem; }
  .cs-hero-title { margin-bottom: 1.25rem; }
  .cs-hero-tagline { margin-bottom: 2rem; }
  .cs-features-header,
  .cs-gallery-header { margin-bottom: 2.25rem; }

  /* Section header bottom margin (3.5rem default) eats real estate
     on small viewports without adding clarity */
  .section-header { margin-bottom: 2.25rem; }

  /* Blog listing/post outer padding */
  #blog-listing, #blog-post { padding: 3.5rem var(--gutter) 4.25rem; }
}


/* ============================================================
   INTERIOR PAGES
   ============================================================ */

/* ─────────────────────────────────────────
   UNIVERSAL PAGE HERO
───────────────────────────────────────── */
.page-hero {
  background: var(--ink);
  padding: calc(7rem + 93px) var(--gutter) 7rem;
  position: relative;
  overflow: hidden;
}
.page-hero-inner {
  max-width: var(--container); margin: 0 auto;
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 5rem;
  align-items: end;
}
.page-hero-left { display: flex; flex-direction: column; }
.page-hero-eyebrow {
  margin-bottom: 1.5rem;
  /* Fade in */
  opacity: 0;
  animation: heroEyebrowIn .6s .1s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes heroEyebrowIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero-title {
  font-size: clamp(34px, 5.2vw, 80px);
  font-weight: 300; line-height: .92;
  color: var(--cream);
  /* Slide up */
  opacity: 0;
  animation: heroTitleIn .8s .25s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero-title em { color: var(--accent); font-style: italic; }

/* Post page — smaller, constrained title */
.page-hero--post .page-hero-title {
  font-size: clamp(28px, 4vw, 54px);
  max-width: 760px;
  line-height: 1.08;
}

/* Right column */
.page-hero-right {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding-top: .25rem;
}

/* Vertical divider line — draws downward */
.page-hero-divider {
  width: 2px;
  min-height: 100px;
  align-self: stretch;
  background: var(--accent);
  flex-shrink: 0;
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  animation: dividerDraw .55s .7s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes dividerDraw {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Sub text — slides in from left after line draws */
.page-hero-sub {
  font-family: 'gotham-black', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(247,246,242,.85);
  line-height: 1.55;
  opacity: 0;
  transform: translateX(-12px);
  animation: heroSubIn .6s .95s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes heroSubIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Collapse to single column on smaller screens */
@media (max-width: 900px) {
  .page-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .page-hero-right { padding-top: 0; }
  .page-hero-divider { display: none; }
  .page-hero-sub {
    font-size: .95rem;
    animation: heroSubIn .6s .7s cubic-bezier(.16,1,.3,1) forwards;
  }
}

.page-hero-scroll {
  position: absolute; bottom: 2.5rem; right: var(--gutter);
}
/* Scroll line is on a dark hero — lighten the track so it's visible */
.page-hero-scroll .scroll-line {
  background: rgba(247,246,242,.25);
}

/* ─────────────────────────────────────────
   WORK PAGE
───────────────────────────────────────── */

/* Featured project — re-uses the homepage's .feat--split layout but
   as a static block instead of a slider slide. The .feat--static
   modifier overrides the body's reserved padding-bottom (which on
   the homepage holds space for the absolute slider footer). */
#work-featured-static {
  padding: 5rem 0 7rem;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.feat--static .feat-body {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Project grid — editorial card style matching the rest of the site:
   clean image on top (4:3), small accent eyebrow + serif title +
   one-line meta + bordered "View Site →" link below. */
#work-grid { padding: 7rem var(--gutter); }
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 1.75rem;
  margin-top: 4rem;
}
@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.25rem; } }
@media (max-width: 600px) { .work-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.work-tile {
  display: block;
  text-decoration: none;
  color: inherit;
}
.work-tile-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--line);
  margin-bottom: 1.25rem;
}
.work-tile-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.work-tile:hover .work-tile-img img { transform: scale(1.04); }

.work-tile-eyebrow {
  margin: 0 0 .65rem;
  color: var(--accent);
}
.work-tile-title {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 .55rem;
}
.work-tile-meta {
  font-size: .85rem;
  color: var(--muted);
  margin: 0 0 1.1rem;
}
.work-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: .25rem;
}
.work-tile-arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.work-tile:hover .work-tile-arrow { transform: translateX(4px); }

.work-page-cta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
  margin-top: 4rem; padding-top: 3rem;
  border-top: 1px solid var(--line);
}
.work-page-cta-text {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
}

.work-stats-strip {
  background: var(--ink); padding: 3.5rem var(--gutter);
}
.work-stats-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px; background: rgba(247,246,242,.08);
  max-width: var(--container); margin: 0 auto;
}
@media (min-width: 768px) { .work-stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.work-stat {
  background: var(--ink); padding: 3rem 2.5rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.work-stat-num {
  font-size: clamp(44px, 5vw, 68px); line-height: 1;
  font-weight: 300; color: var(--cream);
}
.work-stat-label {
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .15em; color: var(--cream); font-weight: 600;
}

/* ─────────────────────────────────────────
   SERVICES PAGE
───────────────────────────────────────── */
#services-intro { padding: 7rem var(--gutter); border-bottom: 1px solid var(--line); }
.svc-intro-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 4rem; max-width: var(--container); margin: 0 auto;
}
@media (min-width: 900px) { .svc-intro-grid { grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; } }

#services-list { padding: 7rem var(--gutter); }

#services-process {
  padding: 7rem var(--gutter);
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.process-steps {
  display: grid; grid-template-columns: 1fr;
  gap: 0; margin-top: 3.5rem;
  max-width: var(--container); margin-left: auto; margin-right: auto;
}
@media (min-width: 768px) { .process-steps { grid-template-columns: repeat(4,1fr); } }
.process-step {
  padding: 2.5rem 2rem;
  border: 1px solid var(--line); margin: -1px 0 0 -1px;
}
.process-num {
  font-size: 3rem; font-weight: 300;
  color: var(--accent); display: block; margin-bottom: 1.25rem;
}
.process-title {
  font-size: 1.1rem; font-weight: 500; margin-bottom: .75rem;
}
.process-desc { font-size: .92rem; color: var(--muted); line-height: 1.75; }

#services-nonprofit { padding: 7rem var(--gutter); background: var(--accent); }
.svc-nonprofit-card {
  background: var(--ink); padding: 5rem;
  max-width: var(--container); margin: 0 auto;
  position: relative; overflow: hidden;
}
.svc-nonprofit-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 30%;
  opacity: .18;
  transition: opacity .6s ease;
}
.svc-nonprofit-card:hover .svc-nonprofit-bg { opacity: .25; }
.svc-nonprofit-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(22,22,20,.95) 40%, rgba(22,22,20,.55) 100%);
}
.svc-nonprofit-copy { position: relative; z-index: 1; }
@media (max-width: 768px) { .svc-nonprofit-card { padding: 3rem 2rem; } }
.svc-nonprofit-title {
  font-size: clamp(1.6rem, 3.2vw, 2.8rem);
  font-weight: 300; line-height: 1.05;
  color: var(--cream); margin: 1rem 0 1.5rem;
}
.svc-nonprofit-title em { color: var(--accent); }
.svc-nonprofit-sub {
  font-size: .96rem; color: rgba(247,246,242,.45);
  max-width: 520px; line-height: 1.8; margin-bottom: 2.5rem;
}

/* ─────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────── */
#about-intro { padding: 7rem var(--gutter); border-bottom: 1px solid var(--line); }
/* Who We Are — editorial 2-col split. Eyebrow + heading sit on the
   left; body copy + CTAs flow on the right. The original layout had
   stats in the right column; that has been dropped, so this layout
   is now copy-only. */
.about-intro-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: var(--container);
  margin: 0 auto;
}
@media (min-width: 900px) {
  .about-intro-layout {
    grid-template-columns: 1fr 1.6fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}
.about-intro-body p + p { margin-top: 1rem; }
.about-intro-body .about-ctas { margin-top: 2rem; }

#about-video { position: relative; height: 70vh; overflow: hidden; }
.about-video-wrap { position: relative; width: 100%; height: 100%; }
.about-video-bg {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.about-video-overlay {
  position: absolute; inset: 0;
  background: rgba(22,22,20,.55);
  display: flex; align-items: flex-end;
  padding: 4rem var(--gutter);
}
.about-video-content { max-width: var(--container); width: 100%; margin: 0 auto; }
.about-video-title {
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 300; line-height: .92;
  color: var(--cream);
}
.about-video-title em { color: var(--accent); font-style: italic; }

#about-team { padding: 7rem var(--gutter); }
.team-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 4rem; margin-top: 3.5rem;
  max-width: var(--container); margin-left: auto; margin-right: auto;
}
@media (min-width: 768px) { .team-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.team-card {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem;
  border: 1px solid var(--line); padding: 2.5rem;
}
@media (min-width: 768px) { .team-card { grid-template-columns: 200px 1fr; } }
.team-img-wrap { overflow: hidden; aspect-ratio: 3/4; }
.team-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3); transition: filter .4s; }
.team-card:hover .team-img { filter: grayscale(0); }
.team-info { display: flex; flex-direction: column; gap: .5rem; }
.team-name { font-size: 2rem; font-weight: 300; }
.team-role { margin-bottom: .5rem; }
.team-bio { font-size: .92rem; color: var(--muted); line-height: 1.75; }
.team-social {
  margin-top: auto; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--accent);
  text-decoration: none; transition: opacity .2s;
}
.team-social:hover { opacity: .7; }

#about-values {
  padding: 7rem var(--gutter);
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.values-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 0; margin-top: 3.5rem;
  max-width: var(--container); margin-left: auto; margin-right: auto;
}
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(4,1fr); } }
.value-card {
  padding: 2.5rem 2rem;
  border: 1px solid var(--line); margin: -1px 0 0 -1px;
  transition: border-color .3s;
}
.value-card:hover { border-color: var(--accent); }
.value-num {
  font-size: 2.5rem; font-weight: 300;
  color: var(--accent); display: block; margin-bottom: 1.25rem;
}
.value-title { font-size: 1rem; font-weight: 300; margin-bottom: .75rem; }
.value-desc { font-size: .92rem; color: var(--muted); line-height: 1.75; }

/* ── About — team intro paragraph above the cards ── */
.about-team-intro {
  max-width: 780px;
  margin: -1rem 0 3rem;
}
.about-team-intro p { font-size: clamp(1rem, 1.3vw, 1.15rem); }

/* ── How We Work — editorial 2-col layout, mirrors Who We Are ── */
#about-howwework {
  padding: 7rem var(--gutter);
  background: var(--white);
  border-top: 1px solid var(--line);
}
.about-process-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: var(--container);
  margin: 0 auto;
}
@media (min-width: 900px) {
  .about-process-layout {
    grid-template-columns: 1fr 1.6fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}
.about-process-body p + p { margin-top: 1rem; }

/* ── Credentials — combined Industries + Recognition split row ──
   Two columns sit side-by-side on desktop: Industries (left, a 2-col
   bordered list of 10 disciplines) and Recognition (right, a stacked
   list of 5 awards). On mobile / narrow tablets the columns collapse
   in source order so the two headers are visited sequentially. */
#about-credentials {
  padding: 7rem var(--gutter);
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.cred-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  max-width: var(--container);
  margin: 0 auto;
  align-items: start;
}
@media (min-width: 1000px) {
  .cred-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 5vw, 5rem);
  }
}

/* Per-column header — eyebrow + smaller title + intro paragraph.
   Slightly smaller than the page-level section-title since two of
   them have to coexist within one section. */
.cred-col-header { margin-bottom: 2.5rem; }
.cred-col-title {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 300;
  line-height: 1.05;
  margin: .35rem 0 1rem;
}
.cred-col-title em { color: var(--accent); font-style: italic; }
.cred-col-intro {
  font-size: .94rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 480px;
}

/* Industries — locked at 2 cols within its column. The previous
   responsive 2/3/5-col grid no longer makes sense here because the
   parent column is already half-width on desktop. */
.cred-industries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 480px) {
  .cred-industries { grid-template-columns: 1fr; }
}
.cred-industry {
  background: var(--white);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: background .25s, color .25s;
}
.cred-industry:hover { background: var(--ink); color: var(--cream); }
.cred-industry:hover .cred-industry-num { color: var(--accent); }
.cred-industry-num {
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--accent);
  transition: color .25s;
}
.cred-industry-name {
  font-size: .92rem;
  line-height: 1.35;
  font-weight: 400;
}

/* Awards — single-column stack within the column. Each card lays
   the three pieces (source eyebrow, serif name, year) on top of
   each other; a thin orange left border on hover anchors the
   editorial feel. */
.cred-awards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cred-award {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  position: relative;
  transition: border-color .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
.cred-award::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.cred-award:hover { transform: translateX(3px); }
.cred-award:hover::before { transform: scaleY(1); }
.cred-award-source {
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent);
  margin: 0;
}
.cred-award-name {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.cred-award-year {
  margin: 0;
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .04em;
}


/* ── Page hero with background photo ── */
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: .2;
  z-index: 0;
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(22,22,20,.4) 0%,
    rgba(22,22,20,.0) 40%,
    rgba(22,22,20,.7) 100%
  );
  z-index: 1;
}




.page-hero--photo .page-hero-inner { position: relative; z-index: 2; }
.page-hero--photo .page-hero-scroll { z-index: 2; }

/* ── Page hero aurora — slow drifting brand-color glows on the dark canvas ──
   Soft radial-gradient blobs in --accent (orange) and --accent-2 (deep blue).
   Sits behind the inner content (z-index 0), purely decorative
   (aria-hidden, pointer-events: none).

   Performance notes — this section used to chug on any interaction. Three
   things were compounding:
     1. filter: blur(90px) on 55–60vw elements forced the compositor to
        Gaussian-blur ~1.2M pixels per blob every paint. Cost is quadratic
        in radius, so 90px is ~5× the cost of 40px for the same softness.
     2. The keyframes mixed scale() with the blur, and combining scale +
        filter triggers a full re-rasterization of the blurred layer on
        every interpolated frame in most browsers (transform-only
        animations would otherwise stay GPU-cheap).
     3. Three stacked blurred layers compounded the cost.

   The fix below keeps the editorial glow but cuts cost by an order of
   magnitude: smaller radii, max-size caps, translate-only drift, and the
   third decorative blob is reserved for desktops where we have spare GPU. */
.page-hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* Promote the whole aurora to its own compositor layer once, instead
     of will-change on each animated child — cleaner and lower memory. */
  contain: paint;
}
.ph-blob {
  position: absolute;
  border-radius: 50%;
  /* The radial-gradient already fades to transparent — blur is just to
     soften the inner edge. 36px is the sweet spot between "soft glow"
     and "expensive". */
  filter: blur(36px);
}
.ph-blob-1 {
  top: -15%;
  left: 5%;
  width: 45vw;
  height: 45vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
  opacity: 0.32;
}
.ph-blob-2 {
  top: 8%;
  right: -8%;
  width: 50vw;
  height: 50vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(circle, var(--accent-2) 0%, transparent 65%);
  opacity: 0.55;
}
/* Third blob is decorative and only loads on desktop, where the GPU
   has the headroom. Mobile gets two blobs which is plenty. */
.ph-blob-3 { display: none; }
@media (min-width: 900px) {
  .ph-blob-3 {
    display: block;
    bottom: -25%;
    left: 30%;
    width: 40vw;
    height: 40vw;
    max-width: 640px;
    max-height: 640px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    opacity: 0.20;
  }
}

/* Translate-only drift — no scale changes, so the GPU can animate the
   transform without re-rasterizing the blurred layer each frame.
   Animation only runs on desktop + when the user hasn't requested
   reduced motion. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .ph-blob-1 { animation: phBlobDrift1 36s ease-in-out infinite; }
  .ph-blob-2 { animation: phBlobDrift2 44s ease-in-out infinite; }
  .ph-blob-3 { animation: phBlobDrift3 50s ease-in-out infinite; }
}
@keyframes phBlobDrift1 {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(8%, 6%); }
  66%      { transform: translate(-4%, 10%); }
}
@keyframes phBlobDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-7%, 8%); }
}
@keyframes phBlobDrift3 {
  0%, 100% { transform: translate(0, 0); }
  40%      { transform: translate(10%, -7%); }
  80%      { transform: translate(-6%, 4%); }
}

/* ─────────────────────────────────────────
   ABOUT VIDEO — PLAY CURSOR + MODAL
───────────────────────────────────────── */
#about-video { cursor: none; }
#about-video:hover .about-video-overlay { background: rgba(22,22,20,.42); }

.video-play-cursor {
  position: absolute;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  top: 0; left: 0;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s;
  z-index: 10; will-change: transform;
}
.video-play-cursor svg { margin-left: 3px; }
#about-video.video-cursor-active .video-play-cursor {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.video-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
  cursor: none;
}
.video-modal.open { opacity: 1; pointer-events: all; }
.video-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(22,22,20,.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.video-modal-box {
  position: relative; z-index: 1;
  width: min(92vw, 1100px); aspect-ratio: 16/9;
  transform: scale(.93) translateY(20px);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.video-modal.open .video-modal-box { transform: scale(1) translateY(0); }
.video-modal-player { width: 100%; height: 100%; display: block; background: #000; }
.video-modal-close {
  position: absolute; top: -3rem; right: 0;
  width: 38px; height: 38px;
  border: 1px solid rgba(247,246,242,.25); background: transparent;
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  cursor: none;
  transition: background .2s, border-color .2s, color .2s;
}
.video-modal-close:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─────────────────────────────────────────
   BLOG — LISTING PAGE
───────────────────────────────────────── */
#blog-listing { padding: 5rem var(--gutter) 7rem; }

/* Category filters */
.blog-filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 3.5rem;
}
.blog-filter-btn {
  padding: .45rem 1.1rem; border: 1px solid var(--line);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); text-decoration: none; cursor: pointer;
  background: transparent; font-family: inherit;
  transition: border-color .2s, color .2s, background .2s;
}
.blog-filter-btn:hover,
.blog-filter-btn.active {
  border-color: var(--ink); background: var(--ink); color: var(--cream);
}
#blogResults {
  min-height: 200px;
}

/* Post grid */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card */
.blog-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color .25s, box-shadow .25s;
}
.blog-card:hover {
  border-color: rgba(22,22,20,.18);
  box-shadow: 0 8px 32px rgba(22,22,20,.06);
}
.blog-card-img-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; }
.blog-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.blog-card:hover .blog-card-img { transform: scale(1.04); }
.blog-card-body {
  padding: 1.75rem; display: flex; flex-direction: column;
  flex: 1; gap: .75rem;
}
.blog-card-cat {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent); font-weight: 400;
}
.blog-card-title {
  font-size: 1.2rem; font-weight: 300; line-height: 1.25;
  color: var(--ink);
}
.blog-card-title a {
  text-decoration: none; color: inherit;
  transition: color .2s;
}
.blog-card-title a:hover { color: var(--accent); }
.blog-card-excerpt {
  font-size: .9rem; color: var(--muted); line-height: 1.7; flex: 1;
}
.blog-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: .75rem; border-top: 1px solid var(--line);
  font-size: .75rem; color: var(--muted);
}
.blog-card-read {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink); text-decoration: none;
  transition: color .2s;
}
.blog-card-read:hover { color: var(--accent); }

/* Pagination */
.blog-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; margin-top: 4rem; padding-top: 3rem;
  border-top: 1px solid var(--line);
}
.blog-page-btn {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink); text-decoration: none; padding: .6rem 1.25rem;
  border: 1px solid var(--line); transition: background .2s, color .2s, border-color .2s;
}
.blog-page-btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.blog-page-info { font-size: .82rem; color: var(--muted); }
.blog-empty { padding: 4rem 0; text-align: center; }

/* ─────────────────────────────────────────
   BLOG — SINGLE POST
───────────────────────────────────────── */
#blog-post { padding: 5rem var(--gutter) 7rem; }

.post-wrap {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 5rem;
  align-items: start;
}

/* ── TOC sidebar ── */
.post-toc { position: sticky; top: 6rem; }
.post-toc-inner {
  border-left: 2px solid var(--line);
  padding-left: 1.5rem;
}
.post-toc-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--muted); margin-bottom: 1.25rem;
}
.post-toc-list { list-style: none; display: flex; flex-direction: column; gap: .25rem; }
.post-toc-link {
  display: flex; align-items: baseline; gap: .65rem;
  padding: .4rem 0; text-decoration: none;
  transition: color .2s;
}
.post-toc-num {
  font-family: 'gotham-black', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: .78rem;
  color: var(--accent); flex-shrink: 0; line-height: 1;
  transition: color .2s;
}
.post-toc-text {
  font-size: .82rem; color: var(--muted); line-height: 1.4;
  transition: color .2s;
}
.post-toc-link:hover .post-toc-text,
.post-toc-link.active .post-toc-text { color: var(--ink); }
.post-toc-link.active { border-left: 2px solid var(--accent); margin-left: -1.625rem; padding-left: 1.125rem; }

/* ── Article ── */
.post-article--full { grid-column: 1 / -1; max-width: 780px; margin: 0 auto; }

.post-meta {
  display: flex; gap: 1rem; align-items: center;
  margin-bottom: 3rem; padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.post-date { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.post-cat  { font-size: .72rem; color: var(--accent); text-transform: uppercase; letter-spacing: .14em; }

/* Prose */
.post-body { line-height: 1.85; color: var(--ink); }
.post-section-heading {
  font-family: 'gotham-black', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.75rem; font-weight: 300;
  margin: 3rem 0 1rem; line-height: 1.15;
  scroll-margin-top: 7rem;
}
.post-body h3 { font-size: 1.1rem; font-weight: 500; margin: 2rem 0 .75rem; }
.post-body p  { margin-bottom: 1.5rem; font-size: .98rem; }
.post-body ul, .post-body ol { margin: 0 0 1.5rem 1.5rem; }
.post-body li { margin-bottom: .4rem; font-size: .98rem; }
.post-body a  { color: var(--accent); text-decoration: underline; }
.post-body img { max-width: 100%; height: auto; margin: 2rem 0; }
.post-body blockquote {
  border-left: 3px solid var(--accent); margin: 2rem 0;
  padding: 1rem 1.5rem; font-style: italic; color: var(--muted);
}
.post-back { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }

/* Collapse sidebar below 900px */
@media (max-width: 900px) {
  .post-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .post-toc { position: static; }
  .post-toc-inner { border-left: none; border-top: 1px solid var(--line); padding: 1.25rem 0 0; }
  .post-toc-list { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
  .post-toc-link { padding: .35rem .85rem; border: 1px solid var(--line); }
  .post-toc-link.active { margin-left: 0; padding-left: .85rem; border-color: var(--accent); border-left-width: 1px; }
  .post-toc-num { display: none; }
}

/* ─────────────────────────────────────────
   RELATED POSTS
───────────────────────────────────────── */
.related-posts {
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: 5rem var(--gutter) 7rem;
}
.related-posts-inner { max-width: 1200px; margin: 0 auto; }
.related-posts-header { margin-bottom: 3rem; }
.related-posts-title { font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 300; }
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (max-width: 640px) {
  .related-posts-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   NON-PROFIT PAGE
───────────────────────────────────────── */

/* Intro */
#np-intro { padding: 7rem var(--gutter); border-bottom: 1px solid var(--line); }
.np-intro-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
@media (max-width: 900px) { .np-intro-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* Partner logos */
#np-partners {
  padding: 5rem var(--gutter);
  background: var(--ink);
  border-bottom: 1px solid rgba(247,246,242,.08);
}
#np-partners .eyebrow { color: rgba(247,246,242,.4); }
.np-logos {
  display: flex; flex-wrap: wrap;
  gap: 2rem 3rem; justify-content: center;
  align-items: center;
}
.np-logo-item {
  display: flex; align-items: center; justify-content: center;
  opacity: .45; transition: opacity .25s;
}
.np-logo-item:hover { opacity: .85; }
.np-logo-img {
  /* The source PNGs ship with generous whitespace padding around the
     mark, so the rendered logo is much smaller than the bounding box.
     Sizing the box larger compensates — the actual visible logo lands
     at a comfortable scale on the dark band. */
  max-height: 120px; max-width: 280px;
  width: auto; object-fit: contain;
  /* PNGs are already grayscale (dark logos on transparent). On the dark
     ink band we just invert so dark gray becomes light gray — preserves
     the tonal range the designer baked in instead of flattening
     everything to pure-white silhouettes via brightness(0) invert(1). */
  filter: invert(1);
}

/* Features grid */
#np-features {
  padding: 7rem var(--gutter);
  background: var(--cream);
}

/* Icon accent colors cycling across tiles */
.np-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 4rem;
}
@media (max-width: 900px) { .np-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .np-features-grid { grid-template-columns: 1fr; } }

.np-feature {
  background: #fff;
  padding: 2.5rem 2rem;
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  position: relative;
  transition: border-color .25s, box-shadow .25s, transform .2s;
  overflow: hidden;
}
.np-feature::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(253,108,30,.04) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.np-feature:hover {
  border-top-color: var(--accent);
  box-shadow: 0 6px 32px rgba(0,0,0,.07);
  transform: translateY(-2px);
  z-index: 1;
}
.np-feature:hover::before { opacity: 1; }

.np-feature-icon {
  font-size: 1.6rem; margin-bottom: 1.1rem;
  width: 2.75rem; height: 2.75rem;
  background: rgba(253,108,30,.08);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s;
}
.np-feature:hover .np-feature-icon {
  background: rgba(253,108,30,.16);
  transform: scale(1.08);
}
.np-feature-title {
  font-size: 1rem; font-weight: 500;
  color: var(--ink); margin-bottom: .6rem;
}
.np-feature-desc {
  font-size: .88rem; color: var(--muted);
  line-height: 1.75;
}

/* Featured project — reuses svc-nonprofit-card */
#np-featured { padding: 7rem var(--gutter); background: var(--accent); }

/* Light outline button for dark/image backgrounds */
.btn-outline--light {
  border-color: rgba(247,246,242,.4);
  color: var(--cream);
}
.btn-outline--light::before { background: var(--cream); }
.btn-outline--light:hover { color: var(--ink); }

/* Nonprofit testimonials */
#np-testimonials {
  padding: 7rem var(--gutter);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.np-testi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem; margin-top: 4rem;
}
@media (max-width: 768px) { .np-testi-grid { grid-template-columns: 1fr; } }
.np-testi-card {
  background: #fff; border: 1px solid var(--line);
  padding: 2.5rem 2.25rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  transition: border-color .25s;
}
.np-testi-card:hover { border-color: rgba(253,108,30,.3); }
.np-testi-quote {
  font-size: 1.1rem; font-weight: 300; font-style: italic;
  color: var(--ink); line-height: 1.75; flex: 1;
}
.np-testi-author {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.np-testi-name { font-size: .85rem; font-weight: 500; color: var(--ink); }
.np-testi-org  { font-size: .75rem; color: var(--muted); margin-top: .2rem; }

/* FAQ + CTA two-column */
#np-faq {
  padding: 7rem var(--gutter);
  background: var(--cream);
}
.np-faq-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 1024px) {
  .np-faq-layout { grid-template-columns: 1fr; gap: 4rem; }
}

/* FAQ col */
.np-faq-list { border-top: 1px solid var(--line); }
.np-faq-item {
  border-bottom: 1px solid var(--line);
  position: relative;
}
.np-faq-item::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
  transform: scaleY(0); transform-origin: top center;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.np-faq-item.open::before { transform: scaleY(1); }
.np-faq-q {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between;
  padding: 1.75rem 0 1.75rem 1.25rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 1.1rem; font-weight: 400;
  color: var(--ink); text-align: left;
  transition: color .2s;
  gap: 1.5rem;
}
.np-faq-q:hover { color: var(--accent); }
.np-faq-item.open .np-faq-q { color: var(--accent); }
.np-faq-icon {
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 300; line-height: 1;
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .2s, color .2s;
}
.np-faq-item.open .np-faq-icon {
  transform: rotate(45deg);
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.np-faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.16,1,.3,1);
  padding-left: 1.25rem;
}
.np-faq-a p {
  font-size: 1rem; color: var(--muted);
  line-height: 1.85; padding-bottom: 1.75rem;
  max-width: 680px;
}

/* CTA panel (sticky on scroll) */
.np-faq-cta {
  background: var(--ink);
  padding: 3rem 2.5rem;
  position: sticky;
  top: calc(52px + 1.25rem * 2 + 1px + 2rem); /* nav height + breathing room */
}
.np-cta-title {
  font-size: clamp(1.2rem, 1.75vw, 1.6rem);
  font-weight: 300; line-height: 1.15;
  color: var(--cream); margin: .75rem 0 1rem;
}
.np-cta-title em { color: var(--accent); font-style: italic; }
.np-cta-sub {
  font-size: .93rem; color: rgba(247,246,242,.5);
  line-height: 1.8; margin-bottom: 1.5rem;
}
.np-cta-contacts {
  display: flex; flex-direction: column; gap: .5rem;
  font-size: .8rem; color: rgba(247,246,242,.4);
  letter-spacing: .03em;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(247,246,242,.1);
}

/* ─────────────────────────────────────────
   HERO MARQUEE — Centered wordmark + horizontal panel strip (homepage)
───────────────────────────────────────── */
#hero-mq {
  position: relative;
  background: var(--cream);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Side rails ── absolute, sit above the panel strip */
.hero-mq-rail {
  position: absolute;
  z-index: 3;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
}
.hero-mq-rail-left {
  left: 1.5rem;
  bottom: 0;
  transform: rotate(-90deg);
  transform-origin: bottom left;  /* rotated text's bottom edge lands at content bottom */
  white-space: nowrap;
}
.hero-mq-rail-right {
  right: var(--gutter);
  bottom: 0;
  display: flex;
  gap: .55rem;
  align-items: center;
}
.hero-mq-rail-right a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.hero-mq-rail-right a:hover { color: var(--ink); }
.hero-mq-rail-sep { color: var(--line); }

/* Text block — natural height with fixed top padding for nav clearance.
   Position: relative so the absolute rails inside anchor against its
   bottom edge, which is the tagline's bottom (no padding-bottom). */
.hero-mq-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top: 7rem standard section padding + 93px to clear the fixed nav,
     matching .page-hero on interior pages. */
  padding: calc(7rem + 93px) var(--gutter) 0;
  text-align: center;
  z-index: 2;
}
.hero-mq-title {
  font-size: clamp(43px, 9.6vw, 168px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.hero-mq-tagline {
  font-size: clamp(14px, 1.3vw, 19px);
  color: var(--muted);
  font-weight: 400;
  max-width: 640px;
  line-height: 1.5;
}

/* Bottom panel strip — flex child after .hero-mq-content with a 40px
   margin-top, giving the exact gap below the tagline regardless of
   viewport size. margin-bottom keeps breathing room before the dark
   stats band that follows. Pseudo-elements fade the left and right
   edges into the cream background. */
.hero-mq-strip {
  flex: 0 0 auto;
  position: relative;
  height: 60vh;
  margin-top: 40px;
  /* 7rem standard section padding before the next band */
  margin-bottom: 7rem;
  z-index: 1;
}
.hero-mq-strip::before,
.hero-mq-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(60px, 8vw, 140px);
  z-index: 2;
  pointer-events: none;
}
.hero-mq-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--cream), transparent);
}
.hero-mq-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--cream), transparent);
}
.hero-mq-track {
  display: flex;
  gap: 1rem;
  height: 100%;
  will-change: transform;
}
.hero-mq-panel {
  flex: 0 0 auto;
  width: clamp(180px, 17vw, 280px);
  height: 100%;
  border-radius: 1.25rem;
  overflow: hidden;
  position: relative;
  background: var(--line);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.hero-mq-panel:hover {
  transform: scale(1.03);
  z-index: 5;
}
.hero-mq-panel-bg,
.hero-mq-panel-video {
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.hero-mq-panel:hover .hero-mq-panel-bg,
.hero-mq-panel:hover .hero-mq-panel-video {
  transform: scale(1.08);
}
/* Full-corner radius variations on a 6-step cycle — each panel in a set has
   a distinct shape; cloned panels follow the same cycle naturally. */
.hero-mq-panel:nth-child(6n+2) { border-radius: 2.75rem 2.75rem 1rem 1rem; }
.hero-mq-panel:nth-child(6n+3) { border-radius: 1rem 1rem 2.75rem 2.75rem; }
.hero-mq-panel:nth-child(6n+4) { border-radius: 3rem; }
.hero-mq-panel:nth-child(6n+5) { border-radius: 2rem 0.75rem 2rem 0.75rem; }
.hero-mq-panel-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.hero-mq-panel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  /* Side rails are a desktop element — hidden on mobile to avoid nav collisions */
  .hero-mq-rail-left, .hero-mq-rail-right { display: none; }
  .hero-mq-strip { height: 50vh; }
  .hero-mq-strip::before, .hero-mq-strip::after { width: clamp(40px, 8vw, 80px); }
  .hero-mq-panel { width: 200px; }
}
@media (max-width: 640px) {
  .hero-mq-tagline { padding: 0 1rem; }
  .hero-mq-panel { width: 180px; }
  /* Tighten the wall of space above the hero title on phones —
     calc(7rem + 93px) is six lines of empty cream above "eb media." */
  .hero-mq-content { padding-top: calc(3.5rem + 93px); }
  /* Reduce the bottom margin on the panel strip so the next section
     doesn't get pushed too far down */
  .hero-mq-strip { margin-bottom: 4rem; }
}

/* ─────────────────────────────────────────
   PAGE TRANSITION — single-direction swipe between navigations
   The overlay always travels UPWARD across page loads, so the
   transition reads as one continuous gesture rather than a fade
   in / fade out:

   Entry (every page load): overlay starts at translateY(0) covering
   the screen, then animates up to translateY(-100%), revealing the
   page beneath.

   Exit (link click → JS adds .is-leaving): overlay snaps to
   translateY(100%) (just below the screen) and animates UP to
   translateY(0), covering the screen. JS then performs navigation.

   Net effect: cream curtain pulls upward through the viewport on
   every transition, in one direction.
───────────────────────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 100000;
  pointer-events: none;
  transform: translateY(0);
  will-change: transform;
  animation: pageSwipeIn .65s cubic-bezier(.85, 0, .15, 1) forwards;
}
@keyframes pageSwipeIn {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}
body.is-leaving .page-transition {
  pointer-events: all;
  animation: pageSwipeOut .55s cubic-bezier(.85, 0, .15, 1) forwards;
}
@keyframes pageSwipeOut {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-transition { animation-duration: .2s; }
  body.is-leaving .page-transition { animation-duration: .15s; }
}

/* ─────────────────────────────────────────
   CASE STUDY — shared layout for /work/<slug> pages
───────────────────────────────────────── */
.cs { background: var(--cream); }

/* Standard contained inner — section above provides the gutter padding,
   so this just constrains the max-width and centers. */
.cs-section-inner {
  max-width: var(--container);
  margin: 0 auto;
}
/* Hero inner is contained but its sibling .cs-hero-image is full-bleed,
   so .cs-hero itself can't have horizontal padding. With box-sizing:
   border-box, max-width includes padding — bumping max-width by 2× gutter
   makes content land at the same position as the standard pattern. */
.cs-hero-inner {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Hero ── */
.cs-hero {
  padding: calc(7rem + 93px) 0 0; /* clears nav, matches .page-hero pattern */
  position: relative;
}
.cs-back {
  display: inline-block;
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 2.5rem;
  transition: color .2s;
}
.cs-back:hover { color: var(--ink); }
.cs-hero-eyebrow {
  margin-bottom: 1rem;
  color: var(--accent);
}
.cs-hero-title {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 1.5rem;
  max-width: 16ch;
}
.cs-hero-tagline {
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  color: var(--muted);
  line-height: 1.5;
  max-width: 56ch;
  margin: 0 0 3rem;
}
.cs-hero-meta {
  list-style: none;
  padding: 1.75rem 0;
  margin: 0 0 4rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}
.cs-hero-meta li {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .92rem;
  color: var(--ink);
}
.cs-hero-meta li span {
  font-size: .65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  opacity: .65;
}
.cs-hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--line);
}
.cs-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Section base ── */
.cs-section { padding: 7rem var(--gutter); }

/* ── Overview ── */
.cs-overview .cs-section-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 800px) {
  .cs-overview .cs-section-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}
.cs-overview-body p {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.cs-overview-body p:last-child { margin-bottom: 0; }

/* ── Features grid ── */
.cs-features-header { margin-bottom: 3.5rem; }
.cs-features-heading {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  margin: .75rem 0 0;
}
.cs-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (max-width: 700px) {
  .cs-features-grid { grid-template-columns: 1fr; }
}
.cs-feat {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 2.5rem 2rem;
  position: relative;
  transition: border-color .35s, transform .35s cubic-bezier(.16,1,.3,1);
}
.cs-feat:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.cs-feat-num {
  display: block;
  font-size: 2rem;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: -.02em;
  margin-bottom: 1.25rem;
}
.cs-feat-title {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 .75rem;
}
.cs-feat-desc {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* ── Scroll-scrub screenshot ──
   Section is tall (extra runway). Sticky inner stays at viewport-top
   while user scrolls through the section. JS translates the long
   screenshot upward inside the frame proportional to scroll progress. */
.cs-scrub {
  height: 250vh;
  background: var(--ink);
  position: relative;
}
.cs-scrub-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5vh var(--gutter);
  gap: 1.25rem;
}
.cs-scrub-label {
  color: rgba(247,246,242,.6);
  margin: 0;
}
.cs-scrub-frame {
  width: clamp(320px, 70vw, 1100px);
  height: 75vh;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
}
.cs-scrub-frame-bar {
  height: 28px;
  flex: 0 0 auto;
  background: #f3f3f1;
  border-bottom: 1px solid #e5e5e1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}
.cs-scrub-frame-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d8d8d4;
}
.cs-scrub-frame-bar span:nth-child(1) { background: #e98c8c; }
.cs-scrub-frame-bar span:nth-child(2) { background: #e8c87a; }
.cs-scrub-frame-bar span:nth-child(3) { background: #97c97a; }
.cs-scrub-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.cs-scrub-img {
  width: 100%;
  display: block;
  will-change: transform;
}
.cs-scrub-hint {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(247,246,242,.4);
  margin: 0;
}
@media (max-width: 700px) {
  /* No sticky scroll-scrub on mobile — too janky on small viewports.
     Section becomes a normal-flow image preview. */
  .cs-scrub { height: auto; padding: 5rem 0; }
  .cs-scrub-sticky { position: static; height: auto; padding: 0 var(--gutter); }
  .cs-scrub-frame { width: 100%; height: 60vh; }
}

/* ── Highlights gallery ── */
.cs-gallery-header { margin-bottom: 3.5rem; }
.cs-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (max-width: 700px) {
  .cs-gallery-grid { grid-template-columns: 1fr; }
}
.cs-gallery-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--line);
  aspect-ratio: 4 / 3;
}
.cs-gallery-item--wide {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
.cs-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.cs-gallery-item:hover img { transform: scale(1.04); }
.cs-gallery-item figcaption {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  padding: .5rem .85rem;
  background: var(--accent);
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
}

/* ── Closing testimonial — editorial pull-quote ──
   Dark band before the (also dark) footer. Without something to give
   it weight, the two read as one. A massive ghosted accent-coloured
   quote mark anchors the section visually so the testimonial feels
   like an intentional moment, not just a band. */
.cs-closing {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(6rem, 14vh, 11rem) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cs-closing-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: clamp(15rem, 30vw, 32rem);
  font-weight: 700;
  font-style: normal;
  line-height: .7;
  color: rgba(253, 108, 30, .08);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.cs-closing-inner {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cs-closing-eyebrow {
  color: var(--accent);
  margin: 0 0 2rem;
}
.cs-closing-quote {
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
  color: var(--cream);
  margin: 0 0 1.75rem;
}
.cs-closing-attr {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(247,246,242,.5);
  margin: 0;
}