/* =========================================================
   Mule Digital — site.css
   Shared design tokens + components for every page.
   Pure mono palette · Geist + Playfair Display · brutalist editorial.
   ========================================================= */

/* ---------- CROSS-DOCUMENT PAGE TRANSITIONS ----------
   Native View Transitions API (Chrome/Edge/Safari) → automatic on every navigation.
   Browsers that don't support it: JS fallback in site.js fades the body instead.
   Disabled entirely for users with prefers-reduced-motion.
*/
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .35s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
    animation-fill-mode: both;
  }
  ::view-transition-old(root) { animation-name: pageFadeOut; }
  ::view-transition-new(root) { animation-name: pageFadeIn;  }

  @keyframes pageFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
  }
  @keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Persist the nav across navigation so it doesn't flash */
  .nav { view-transition-name: site-nav; }

  /* JS fallback for browsers without View Transitions API */
  body { transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1); }
  body.page-leaving { opacity: 0; transform: translateY(-8px); }
}

:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --fg2: #404040;
  --muted: #8a8a8a;
  --line: #e5e5e5;
  --line2: #1a1a1a;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 1440px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; height: auto; }
input, textarea, select { font: inherit; color: inherit; }

.mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; letter-spacing: 0; }
.micro {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted);
}
.container {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- SCROLL REVEALS ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
  }
  .reveal.in { opacity: 1; transform: translateY(0); }
  .reveal.d1 { transition-delay: .08s; }
  .reveal.d2 { transition-delay: .16s; }
  .reveal.d3 { transition-delay: .24s; }
  .reveal.d4 { transition-delay: .32s; }
}

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, color .35s ease;
}
.nav.over-hero { background: transparent; border-bottom-color: transparent; }
.nav.over-hero:not(.scrolled) .brand { color: #fff; }
.nav.over-hero:not(.scrolled) .brand-mark { filter: invert(1); }
.nav.over-hero:not(.scrolled) .brand sup { color: rgba(255, 255, 255, .6); }
.nav.over-hero:not(.scrolled) .nav-link { color: rgba(255, 255, 255, .85); }
.nav.over-hero:not(.scrolled) .nav-link .num { color: rgba(255, 255, 255, .55); }
.nav.over-hero:not(.scrolled) .nav-link:hover { color: #fff; }
.nav.over-hero:not(.scrolled) .nav-cta { border-color: #fff; color: #fff; }
.nav.over-hero:not(.scrolled) .nav-cta:hover { background: #fff; color: #0a0a0a; }
.nav.over-hero.scrolled {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  gap: 1.5rem;
}
.nav-inner > .brand     { justify-self: start; }
.nav-inner > .nav-links { justify-self: center; }
.nav-inner > .nav-right { justify-self: end; }
.nav-right {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.brand {
  font-family: 'Playfair Display', 'Geist', serif;
  font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1;
  display: inline-flex; align-items: center; gap: .6rem;
}
.brand-mark { height: 28px; width: 28px; display: block; transition: filter .35s ease; }
.brand sup {
  font-family: 'Geist Mono', monospace;
  font-size: .55em; font-weight: 400; color: var(--muted);
  margin-left: 2px; position: relative; top: -.55em; letter-spacing: 0;
}
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-link {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: .04em;
  color: var(--fg2); transition: color .2s ease;
  display: inline-flex; align-items: baseline; gap: .5em;
}
.nav-link .num { color: var(--muted); font-size: 11px; }
.nav-link:hover { color: var(--fg); }
.nav-link.active { color: var(--fg); }
.nav-link.active .num { color: var(--fg); }
.nav-cta {
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .04em;
  padding: .5rem .9rem; border: 1px solid var(--line2);
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--fg); color: var(--bg); }
@media (max-width: 1080px) { .nav-links { gap: 1.5rem; } }

/* ---------- Mobile nav toggle ---------- */
.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--line2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  padding: 0;
}
.nav-toggle span {
  position: absolute;
  left: 8px; right: 8px;
  height: 1.5px; background: currentColor;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .25s ease, top .35s cubic-bezier(.16, 1, .3, 1);
}
.nav-toggle span:nth-child(1) { top: 11px; }
.nav-toggle span:nth-child(2) { top: 17px; }
.nav-toggle span:nth-child(3) { top: 23px; }
body.nav-open .nav-toggle span:nth-child(1) { top: 17px; transform: rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { top: 17px; transform: rotate(-45deg); }
.nav.over-hero:not(.scrolled) .nav-toggle { border-color: rgba(255,255,255,.6); color: #fff; }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-auth { display: none; }
  /* With nav-links hidden, drop the centered grid column so .nav-right anchors right */
  .nav-inner { grid-template-columns: 1fr auto; }
}

/* Mobile drawer
   NOTE: .nav has `backdrop-filter` which makes it a containing block for
   position:fixed children — so `bottom: 0` would anchor to .nav's bottom
   (~65px tall), not the viewport. Use viewport-based height instead. */
.nav-drawer {
  position: fixed;
  top: 64px; left: 0; right: 0;
  height: calc(100vh - 64px);            /* fallback for older browsers */
  height: calc(100dvh - 64px);           /* modern: respects mobile URL bar */
  background: var(--bg);
  z-index: 99;
  padding: 2rem var(--gutter);
  overflow-y: auto;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .35s ease, visibility 0s linear .45s;
  display: none;
}
@media (max-width: 980px) { .nav-drawer { display: block; } }

/* When the mobile drawer is open on the home page (.nav.over-hero), the nav and
   drawer become opaque so the menu reads as a clean solid panel. Without this,
   the over-hero white-on-transparent text would float over a still-transparent nav. */
body.nav-open .nav.over-hero {
  background: var(--bg);
  border-bottom-color: var(--line);
}
body.nav-open .nav.over-hero .brand        { color: var(--fg); }
body.nav-open .nav.over-hero .brand-mark   { filter: none; }
body.nav-open .nav.over-hero .brand sup    { color: var(--muted); }
body.nav-open .nav.over-hero .nav-toggle,
body.nav-open .nav.over-hero .theme-toggle { border-color: var(--line2); color: var(--fg); }

body.nav-open .nav-drawer {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
body.nav-open { overflow: hidden; }
.nav-drawer-list {
  list-style: none;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line2);
}
.nav-drawer-list a {
  display: grid;
  grid-template-columns: 50px 1fr 30px;
  gap: 1rem; align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: 1.5rem; letter-spacing: -.02em;
  color: var(--fg);
  transition: padding-left .3s cubic-bezier(.16, 1, .3, 1);
}
.nav-drawer-list a:hover { padding-left: .75rem; }
.nav-drawer-list a .num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--muted); letter-spacing: .04em;
}
.nav-drawer-list a .arr {
  font-family: 'Geist Mono', monospace;
  color: var(--muted); text-align: right;
  transition: color .25s ease, transform .25s ease;
}
.nav-drawer-list a:hover .arr { color: var(--fg); transform: translateX(3px); }
.nav-drawer-cta {
  display: block; margin-top: 2rem;
  padding: 1.25rem; text-align: center;
  border: 1px solid var(--line2);
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .04em;
  color: var(--fg);
  transition: background .25s ease, color .25s ease;
}
.nav-drawer-cta:hover { background: var(--fg); color: var(--bg); }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: var(--gutter); right: var(--gutter); bottom: 1.25rem;
  z-index: 200;
  background: var(--fg); color: var(--bg);
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1.5rem;
  align-items: center;
  border: 1px solid #1a1a1a;
  transform: translateY(120%);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  max-width: 880px;
  margin: 0 auto;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p {
  font-family: 'Geist', sans-serif; font-size: .92rem; line-height: 1.5;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.cookie-banner p a {
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 1px;
  transition: border-color .2s ease;
}
.cookie-banner p a:hover { border-bottom-color: #fff; }
.cookie-banner button {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: .65rem 1rem;
  border: 1px solid rgba(255,255,255,.4);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.cookie-banner button.primary {
  background: #fff; color: var(--fg);
  border-color: #fff;
}
.cookie-banner button:hover { background: #fff; color: var(--fg); }
.cookie-banner button.primary:hover { background: rgba(255,255,255,.85); }
@media (max-width: 760px) {
  .cookie-banner {
    grid-template-columns: 1fr;
    gap: .85rem;
    text-align: center;
    bottom: 0;
    left: 0; right: 0;
    border-left: none; border-right: none; border-bottom: none;
    max-width: none;
  }
  .cookie-banner p { text-align: left; }
}

/* ---------- HERO — homepage video variant ---------- */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; color: #fff;
  border-bottom: 1px solid var(--line2);
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, .55) 0%,
    rgba(0, 0, 0, .2) 35%,
    rgba(0, 0, 0, .45) 70%,
    rgba(0, 0, 0, .85) 100%);
}
.hero-corner {
  position: absolute; z-index: 3;
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  padding: 1rem var(--gutter);
  opacity: 0; animation: fadeUpHero .9s cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero-corner.tl { top: 64px; left: 0; animation-delay: 1.05s; }
.hero-corner.tr { top: 64px; right: 0; text-align: right; animation-delay: 1.15s; }
.hero-corner.br { bottom: 0; right: 0; text-align: right; animation-delay: 1.25s; }
.hero-corner .live { display: inline-flex; align-items: center; gap: .45rem; }
.hero-corner .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .5);
  animation: heroPulse 2.4s ease-out infinite;
}
@keyframes heroPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes fadeUpHero {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-inner {
  position: relative; z-index: 2;
  padding: 8rem var(--gutter) 5rem;
  max-width: var(--max); width: 100%; margin: 0 auto;
}
.hero-eyebrow, .hero-headline, .hero-cta-row {
  opacity: 0; animation: fadeUpHero .9s cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255, 255, 255, .65); margin-bottom: 1.5rem;
  animation-delay: .45s;
}
.hero-headline {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(2.5rem, 7vw, 6.5rem); line-height: .98; letter-spacing: -.035em;
  max-width: 18ch; margin-bottom: 3rem; color: #fff;
  animation-delay: .65s;
}
.hero-headline .accent { font-style: italic; font-weight: 400; color: rgba(255, 255, 255, .7); }
.hero-headline sup {
  font-family: 'Geist Mono', monospace;
  font-size: .28em; font-weight: 400; color: rgba(255, 255, 255, .55);
  vertical-align: super; margin-left: 2px;
}
.hero-cta-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap; animation-delay: .95s;
}
.hero-cta-row .lede {
  max-width: 42ch; font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, .78);
}
.hero-btns { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* ---------- HERO — internal page variant (no video) ---------- */
.hero-internal {
  padding: 9rem 0 5rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.hero-internal-corner {
  position: absolute; top: 80px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
  padding: 0 var(--gutter);
}
.hero-internal-corner.tl { left: 0; }
.hero-internal-corner.tr { right: 0; text-align: right; }
.hero-internal-corner .live { display: inline-flex; align-items: center; gap: .45rem; }
.hero-internal-corner .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #0a0a0a;
  box-shadow: 0 0 0 0 rgba(10, 10, 10, .5);
  animation: livePulse 2.4s ease-out infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(10, 10, 10, .45); }
  70% { box-shadow: 0 0 0 10px rgba(10, 10, 10, 0); }
  100% { box-shadow: 0 0 0 0 rgba(10, 10, 10, 0); }
}
.hero-internal-grid { margin-top: 3rem; }
.hero-internal-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.25rem;
}
.hero-internal-h1 {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(2.75rem, 7.5vw, 6rem); line-height: .98; letter-spacing: -.04em;
  margin-bottom: 2rem; max-width: 18ch;
}
.hero-internal-h1 em { font-style: italic; color: var(--fg2); font-weight: 400; }
.hero-internal-h1 sup {
  font-family: 'Geist Mono', monospace;
  font-size: .22em; font-weight: 400; color: var(--muted);
  vertical-align: super; margin-left: .05em;
}
.hero-internal-row {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 3rem; align-items: flex-end; margin-bottom: 3.5rem;
}
.hero-internal-row .lede {
  font-family: 'Geist', sans-serif; font-weight: 400;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.5; letter-spacing: -.005em;
  color: var(--fg2); max-width: 44ch;
}
.hero-internal-meta { display: flex; flex-direction: column; gap: 1rem; }
.hero-internal-meta-item {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line); padding-top: .6rem;
  font-family: 'Geist Mono', monospace; font-size: 12px;
  color: var(--fg2); letter-spacing: .02em;
}
.hero-internal-meta-item .k {
  color: var(--muted); text-transform: uppercase;
  font-size: 11px; letter-spacing: .05em;
}
.hero-internal-ctas { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 760px) {
  .hero-internal { padding: 7rem 0 4rem; }
  .hero-internal-row { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- BUTTONS ---------- */
.btn {
  font-family: 'Geist Mono', monospace;
  font-size: 13px; letter-spacing: .03em;
  padding: 1rem 1.4rem; border: 1px solid var(--line2);
  display: inline-flex; align-items: center; gap: .75rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease, padding-right .25s ease;
  white-space: nowrap;
}
.btn .arrow { display: inline-block; transition: transform .25s ease; }
.btn:hover { background: var(--fg); color: var(--bg); padding-right: 1.65rem; }
.btn:hover .arrow { transform: translateX(3px); }
.hero-inner .btn { border-color: #fff; color: #fff; }
.hero-inner .btn:hover { background: #fff; color: #0a0a0a; border-color: #fff; }

.btn-link {
  font-family: 'Geist Mono', monospace;
  font-size: 13px; letter-spacing: .03em;
  color: var(--fg2);
  border-bottom: 1px solid var(--line2);
  padding-bottom: 3px;
  transition: color .25s ease, border-color .25s ease;
  display: inline-flex; align-items: center; gap: .4rem;
}
.btn-link:hover { color: var(--fg); border-bottom-color: var(--fg); }

/* ---------- SECTION (generic) ---------- */
section.s {
  padding: 8rem 0;
  border-bottom: 1px solid var(--line);
}
.s-head {
  display: grid; grid-template-columns: 1fr 3fr;
  gap: 2rem; align-items: baseline;
  margin-bottom: 4.5rem;
}
.s-num {
  font-family: 'Geist Mono', monospace;
  font-size: 13px; color: var(--muted); letter-spacing: .05em;
}
.s-title {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  letter-spacing: -.025em; line-height: 1.05;
  max-width: 24ch;
}
.s-title em { font-style: italic; color: var(--fg2); font-weight: 400; }
@media (max-width: 760px) {
  .s-head { grid-template-columns: 1fr; gap: 1rem; }
  section.s { padding: 5rem 0; }
}

/* ---------- PRINCIPLES (3-up) ---------- */
.principles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.principle {
  border-top: 1px solid var(--line2);
  padding-top: 1.5rem;
}
.principle .pnum {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; color: var(--muted);
  margin-bottom: 1.25rem; letter-spacing: .04em;
}
.principle h3 {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.1;
  margin-bottom: 1rem;
}
.principle p { color: var(--fg2); font-size: .95rem; line-height: 1.6; }
@media (max-width: 820px) { .principles { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- PROCESS STEPS (4-up) ---------- */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  border-top: 1px solid var(--line2);
  padding-top: 3rem;
}
.step { display: flex; flex-direction: column; }
.step-num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; color: var(--muted); letter-spacing: .04em;
  margin-bottom: 1.25rem;
}
.step-mark {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(2.5rem, 5vw, 4.25rem); letter-spacing: -.045em; line-height: .9;
  margin-bottom: 1.25rem; color: var(--fg);
}
.step-mark sup {
  font-family: 'Geist Mono', monospace; font-size: .2em;
  color: var(--muted); font-weight: 400;
  vertical-align: super; margin-left: .05em;
}
.step h3 {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: 1.25rem; letter-spacing: -.015em; line-height: 1.1;
  margin-bottom: .75rem;
}
.step p { color: var(--fg2); font-size: .92rem; line-height: 1.6; max-width: 30ch; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- SERVICES LIST ---------- */
.services { border-top: 1px solid var(--line2); }
.service {
  display: grid; grid-template-columns: 80px 1fr 1.4fr 60px;
  gap: 2rem; align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .3s cubic-bezier(.16, 1, .3, 1);
}
.service:hover { padding-left: 1rem; }
.service .num { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--muted); }
.service .name {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem); letter-spacing: -.02em; line-height: 1;
}
.service .name em { font-style: italic; font-weight: 400; color: var(--fg2); }
.service .desc { color: var(--fg2); font-size: .95rem; line-height: 1.55; }
.service .arrow {
  font-family: 'Geist Mono', monospace; color: var(--muted);
  text-align: right; font-size: 13px;
  transition: color .25s ease, transform .25s ease;
}
.service:hover .arrow { color: var(--fg); transform: translateX(4px); }
@media (max-width: 760px) {
  .service { grid-template-columns: 50px 1fr; row-gap: .5rem; }
  .service .desc, .service .arrow { grid-column: 1/-1; }
  .service .desc { padding-left: 0; }
}

/* ---------- PROJECTS / WORK LOGO GRID ---------- */
.projects {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.project { display: flex; flex-direction: column; gap: 1.25rem; }
/* Default: client-logo card — white bg, thin black outline, black logos */
.project-frame {
  aspect-ratio: 1/1;
  background: #ffffff; border: 1px solid var(--line2);
  overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, background .35s ease;
}
.project:hover .project-frame {
  transform: translateY(-6px);
  background: #fafafa; border-color: var(--fg);
}
.project-frame .logo {
  max-width: 65%; max-height: 50%;
  width: auto; height: auto;
  object-fit: contain;
  filter: brightness(0);  /* render any logo as pure black */
  opacity: .85;
  transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.project:hover .project-frame .logo { opacity: 1; transform: scale(1.04); }
.project-frame .corner {
  position: absolute;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(10, 10, 10, .45);
  transition: color .35s ease;
}
.project-frame .corner.tl { top: .85rem; left: 1rem; }
.project-frame .corner.br { bottom: .85rem; right: 1rem; text-align: right; }
.project:hover .project-frame .corner { color: rgba(10, 10, 10, .75); }

/* "More work" 4th card — dark variant for distinction */
.project-frame.more {
  background: #0a0a0a; border-color: #1a1a1a;
  color: #fff;
}
.project:hover .project-frame.more {
  background: #000; border-color: #2a2a2a;
}
.project-frame.more .more-mark {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  letter-spacing: -.045em; line-height: .9;
  color: #fff;
  transition: color .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
  display: flex; align-items: flex-start; gap: .05em;
}
.project-frame.more .more-mark sup {
  font-family: 'Geist Mono', monospace; font-size: .2em;
  color: rgba(255, 255, 255, .55); font-weight: 400;
  vertical-align: super; margin-left: .05em; letter-spacing: 0;
  position: relative; top: .4em;
}
.project:hover .project-frame.more .more-mark { transform: translateX(6px); }
.project-frame.more .corner { color: rgba(255, 255, 255, .45); }
.project:hover .project-frame.more .corner { color: rgba(255, 255, 255, .75); }
.project-frame.more .arrow-big {
  position: absolute; bottom: 1rem; right: 1rem;
  font-family: 'Geist', sans-serif; font-size: 1.5rem; color: rgba(255, 255, 255, .55);
  transition: color .35s ease, transform .35s ease;
}
.project:hover .project-frame.more .arrow-big { color: #fff; transform: translate(4px, -4px); }

.project-meta {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.project-name {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.2;
}
.project-name sup {
  font-family: 'Geist Mono', monospace; font-size: .55em;
  color: var(--muted); font-weight: 400;
  vertical-align: super; margin-left: 1px;
}
.project-tag {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: var(--muted); letter-spacing: .04em; text-transform: uppercase;
  text-align: right; flex-shrink: 0;
}
@media (max-width: 980px) { .projects { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (max-width: 520px) { .projects { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- STATS ROW ---------- */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid var(--line2);
  margin-top: 6rem; padding-top: 3rem;
}
.stat { display: flex; flex-direction: column; }
.stat-num {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  letter-spacing: -.045em; line-height: .9; margin-bottom: .85rem;
}
.stat-num sup, .stat-num small {
  font-size: .35em; font-weight: 500; color: var(--muted); letter-spacing: 0;
  font-family: 'Geist Mono', monospace;
  vertical-align: super; margin-left: .05em;
}
.stat-label {
  font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  max-width: 24ch; line-height: 1.4;
}
@media (max-width: 820px) { .stats-row { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }

/* ---------- TEAM ---------- */
.team {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line2);
}
.team-card {
  display: grid; grid-template-columns: 96px 1fr 200px;
  gap: 2.5rem; align-items: flex-start;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .3s cubic-bezier(.16, 1, .3, 1);
}
.team-card:hover { padding-left: 1rem; }
.team-photo {
  width: 96px; height: 96px; border-radius: 50%;
  border: 1px solid var(--line);
  overflow: hidden; flex-shrink: 0;
  background: #f3f3f3;
  filter: saturate(.6) contrast(1.02);
  transition: filter .35s ease, border-color .35s ease;
}
.team-card:hover .team-photo {
  filter: saturate(1) contrast(1);
  border-color: var(--line2);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo img[alt="Justin Reynolds"] { object-position: center 30%; }
.team-photo img[alt="Emile Holemans"] { object-position: center 15%; }
.team-photo img[alt="Floris Brugman"] { object-position: center 35%; }
.team-info { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.team-num {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: var(--muted); letter-spacing: .04em;
}
.team-name {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: 1.35rem; letter-spacing: -.015em; line-height: 1.15;
}
.team-role {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.team-blurb {
  color: var(--fg2); font-size: .92rem; line-height: 1.6;
  max-width: 60ch; margin-top: .4rem;
}
.team-meta {
  display: flex; flex-direction: column; gap: .5rem;
  text-align: right; align-items: flex-end;
  padding-top: .4rem;
}
.team-meta a {
  font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .04em;
  color: var(--fg2);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.team-meta a:hover { color: var(--fg); border-bottom-color: var(--fg); }
.team-meta .loc {
  font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 880px) {
  .team-card { grid-template-columns: 80px 1fr; gap: 1.5rem; padding: 2rem 0; }
  .team-meta {
    grid-column: 1/-1; align-items: flex-start; text-align: left;
    padding-top: 0; padding-left: calc(80px + 1.5rem);
  }
  .team-photo { width: 80px; height: 80px; }
}
@media (max-width: 520px) {
  .team-card { grid-template-columns: 64px 1fr; }
  .team-photo { width: 64px; height: 64px; }
  .team-meta { padding-left: calc(64px + 1.5rem); }
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 80px 1fr 60px;
  gap: 2rem; align-items: center;
  padding: 1.85rem 0;
  transition: padding-left .3s cubic-bezier(.16, 1, .3, 1);
}
.faq details:hover summary { padding-left: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq .q-num {
  font-family: 'Geist Mono', monospace; font-size: 12px;
  color: var(--muted); letter-spacing: .04em;
}
.faq .q-text {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem); letter-spacing: -.015em; line-height: 1.25;
}
.faq .q-toggle {
  font-family: 'Geist Mono', monospace; font-size: 1.4rem; color: var(--muted);
  text-align: right; line-height: 1;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), color .25s ease;
}
.faq details[open] .q-toggle { transform: rotate(45deg); color: var(--fg); }
.faq .a-text {
  padding: 0 0 1.85rem calc(80px + 2rem);
  color: var(--fg2); font-size: 1rem; line-height: 1.65;
  max-width: 60ch;
}
@media (max-width: 760px) {
  .faq summary { grid-template-columns: 50px 1fr 40px; gap: 1rem; padding: 1.35rem 0; }
  .faq .a-text { padding: 0 0 1.35rem calc(50px + 1rem); }
}

/* ---------- CONTACT ---------- */
.contact {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.contact-col h4 {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1rem; font-weight: 400;
}
.contact-col p, .contact-col a {
  font-family: 'Geist', sans-serif; font-size: 1.05rem; font-weight: 400; line-height: 1.5;
  display: block; margin-bottom: .4rem;
}
.contact-col a {
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.contact-col a:hover { border-bottom-color: var(--fg); }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- TRUSTED-BY logo strip (homepage) ---------- */
.trusted {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 3rem 0;
  background: #fafafa;
}
.trusted-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
}
.trusted-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
  max-width: 16ch;
  line-height: 1.4;
}
.trusted-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: center;
}
.trusted-logos img {
  max-width: 140px; max-height: 40px;
  width: auto; height: auto;
  margin: 0 auto;
  filter: brightness(0);
  opacity: .55;
  transition: opacity .35s ease, filter .35s ease;
}
.trusted-logos a:hover img { opacity: 1; }
@media (max-width: 760px) {
  .trusted-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .trusted-logos { gap: 1.25rem; }
}

/* ---------- SERVICE HOVER ICON (homepage) ---------- */
.service-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  color: var(--fg2);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1), color .35s ease;
}
.service:hover .service-icon { opacity: 1; transform: translateX(0); color: var(--fg); }
.service-icon svg { width: 100%; height: 100%; display: block; }
.service-icon svg * { transition: transform .35s ease; transform-origin: center; }
.service:hover .service-icon svg * { transform: scale(1); }
.service-with-icon {
  display: grid; grid-template-columns: 80px 48px 1fr 1.4fr 60px;
  gap: 1.25rem;
}
@media (max-width: 760px) {
  .service-with-icon { grid-template-columns: 50px 1fr; row-gap: .5rem; }
  .service-with-icon .service-icon { display: none; }
  .service-with-icon .desc, .service-with-icon .arrow { grid-column: 1/-1; }
}

/* ---------- BIG WORDMARK BAND ---------- */
.big-mark {
  padding: 3rem 0 5rem;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.big-mark-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1.5rem;
  font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--muted);
  letter-spacing: .05em; text-transform: uppercase;
}
.big-mark-text {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(5rem, 22vw, 22rem); line-height: .85; letter-spacing: -.05em;
  white-space: nowrap;
}
/* Marquee variant — scrolls horizontally forever */
.big-mark.marquee { overflow: hidden; padding: 4rem 0 5rem; }
.big-mark.marquee .marquee-track {
  display: flex; gap: 4rem;
  width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
  .big-mark.marquee .marquee-track { animation: marqueeScroll 35s linear infinite; }
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.big-mark.marquee .marquee-item {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(5rem, 22vw, 18rem);
  line-height: .85; letter-spacing: -.05em;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex; align-items: baseline;
}
.big-mark.marquee .marquee-item.italic { font-style: italic; color: var(--fg2); font-weight: 400; }
.big-mark.marquee .marquee-item sup {
  font-family: 'Geist Mono', monospace; font-size: .18em; font-weight: 400;
  color: var(--muted); vertical-align: super; margin-left: .05em;
}

/* ---------- COPY-ON-CLICK toast ---------- */
.copy-toast {
  position: fixed; left: 50%; bottom: 2rem;
  transform: translateX(-50%) translateY(20px);
  background: var(--fg); color: var(--bg);
  font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: .75rem 1.25rem;
  border: 1px solid #1a1a1a;
  z-index: 300;
  opacity: 0;
  transition: opacity .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.copy-link {
  cursor: pointer;
  position: relative;
}
.copy-link::after {
  content: " · click to copy";
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--muted); letter-spacing: .04em; text-transform: uppercase;
  margin-left: .5rem;
  opacity: 0;
  transition: opacity .25s ease;
}
.copy-link:hover::after { opacity: 1; }
.big-mark-text sup {
  font-family: 'Geist Mono', monospace; font-size: .18em;
  color: var(--muted); font-weight: 400;
  vertical-align: super; margin-left: .05em;
}

/* ---------- V1 product callout panel (homepage) ---------- */
.s-product { padding: 7rem 0; border-bottom: 1px solid var(--line); }
.product-panel {
  position: relative;
  background: #0a0a0a; color: #fff;
  border: 1px solid #1a1a1a;
  padding: clamp(2.25rem, 5vw, 4.5rem);
  overflow: hidden;
}
.product-panel::before {
  content: ""; position: absolute;
  top: 0; right: 0; width: 42%; height: 100%;
  background: radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, .04) 0%, transparent 65%);
  pointer-events: none;
}
.product-meta {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 3rem;
  flex-wrap: wrap; gap: 1rem;
}
.product-meta .live { display: inline-flex; align-items: center; gap: .45rem; }
.product-meta .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .5);
  animation: heroPulse 2.4s ease-out infinite;
}
.product-wordmark {
  position: relative; z-index: 1;
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(4rem, 12vw, 9rem); line-height: .85; letter-spacing: -.04em;
  margin-bottom: 1.5rem; color: #fff;
}
.product-wordmark sup {
  font-family: 'Geist Mono', monospace;
  font-size: .18em; font-weight: 400; color: rgba(255, 255, 255, .55);
  vertical-align: super; margin-left: .05em; letter-spacing: 0;
}
.product-wordmark .badge {
  display: inline-block; vertical-align: middle;
  margin-left: .5em;
  font-family: 'Geist Mono', monospace; font-size: .13em; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: #0a0a0a; background: #fff;
  padding: .45em .7em; border-radius: 2px;
  line-height: 1;
  transform: translateY(-.5em);
}
.product-tagline {
  position: relative; z-index: 1;
  font-family: 'Geist', sans-serif; font-weight: 400;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.45; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .85);
  max-width: 48ch;
  margin-bottom: 4rem;
}
.product-tagline em { font-style: italic; color: rgba(255, 255, 255, .65); }
.product-features {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 2.5rem; margin-bottom: 3rem;
}
.feature { display: flex; flex-direction: column; }
.feature-num {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: rgba(255, 255, 255, .55); letter-spacing: .04em;
  margin-bottom: 1rem;
}
.feature h4 {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: 1.15rem; letter-spacing: -.015em; line-height: 1.15;
  margin-bottom: .7rem; color: #fff;
}
.feature p { color: rgba(255, 255, 255, .72); font-size: .92rem; line-height: 1.6; max-width: 32ch; }
.product-ctas {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.product-panel .btn { border-color: #fff; color: #fff; }
.product-panel .btn:hover { background: #fff; color: #0a0a0a; border-color: #fff; }
.product-panel .btn-link {
  color: rgba(255, 255, 255, .78);
  border-bottom-color: rgba(255, 255, 255, .4);
}
.product-panel .btn-link:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 820px) {
  .product-features { grid-template-columns: 1fr; gap: 2.25rem; }
  .product-meta { font-size: 10px; }
}

/* ---------- FOOTER ---------- */
footer.foot {
  padding: 4rem 0 2rem;
  border-top: 1px solid var(--line);
  background: #fafafa;
}
.foot-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.foot-brand {
  display: flex; flex-direction: column; gap: 1rem;
}
.foot-brand-mark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: 1.25rem; letter-spacing: -.01em; line-height: 1;
}
.foot-brand-mark img { width: 28px; height: 28px; }
.foot-brand-mark sup {
  font-family: 'Geist Mono', monospace;
  font-size: .55em; font-weight: 400;
  color: var(--muted); margin-left: 2px;
  position: relative; top: -.55em; letter-spacing: 0;
}
.foot-tagline {
  color: var(--fg2);
  font-size: .92rem; line-height: 1.55;
  max-width: 32ch;
}
.foot-col h4 {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
  font-weight: 400;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.foot-col li { line-height: 1.4; }
.foot-col a {
  font-family: 'Geist', sans-serif;
  font-size: .92rem; color: var(--fg2);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
  display: inline-block;
}
.foot-col a:hover { color: var(--fg); border-bottom-color: var(--fg); }
.foot-sub-copy {
  font-size: .88rem; color: var(--fg2); line-height: 1.5;
  margin-bottom: 1rem;
}
.foot-signup {
  display: flex;
  border: 1px solid var(--line2);
  background: var(--bg);
  transition: border-color .2s ease;
}
.foot-signup:focus-within { border-color: var(--fg); }
.foot-signup input[type="email"] {
  flex: 1; min-width: 0;
  padding: .7rem .85rem;
  border: none; background: transparent;
  font-family: 'Geist', sans-serif;
  font-size: .9rem; color: var(--fg);
  outline: none;
}
.foot-signup button {
  padding: .7rem 1rem;
  background: var(--fg); color: var(--bg);
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
  white-space: nowrap;
}
.foot-signup button:hover { background: #000; }
.foot-inner {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .04em;
  color: var(--muted); text-transform: uppercase;
}
.foot-inner a { transition: color .25s ease; color: var(--muted); }
.foot-inner a:hover { color: var(--fg); }
@media (max-width: 880px) {
  .foot-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot-top { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; }
  footer.foot { padding-top: 3rem; }
}

/* ---------- CASE STUDY ROW (used on /work) ---------- */
.cases { border-top: 1px solid var(--line2); }
.case {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  padding: 5rem 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.case:nth-child(even) { grid-template-columns: 1fr 1.4fr; }
.case:nth-child(even) .case-text { order: 2; }
.case:nth-child(even) .case-image { order: 1; }
.case-image {
  position: relative;
  aspect-ratio: 4/3;
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  overflow: hidden;
}
.case-image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.case-image .case-corner {
  position: absolute;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  padding: .5rem .8rem;
}
.case-image .case-corner.tl { top: 0; left: 0; }
.case-image .case-corner.br { bottom: 0; right: 0; text-align: right; }
.case-num {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: var(--muted); letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.case-title {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -.03em; line-height: 1;
  margin-bottom: 1rem;
}
.case-title em { font-style: italic; color: var(--fg2); font-weight: 400; }
.case-tag {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: var(--muted); letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.case-desc {
  font-size: 1rem; line-height: 1.6; color: var(--fg2);
  max-width: 50ch; margin-bottom: 1.75rem;
}
.case-services {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1.75rem;
}
.case-service-pill {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg2);
  border: 1px solid var(--line);
  padding: .4rem .7rem;
}
.case-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 820px) {
  .case { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }
  .case:nth-child(even) { grid-template-columns: 1fr; }
  .case:nth-child(even) .case-text, .case:nth-child(even) .case-image { order: initial; }
}

/* ---------- PRICING TIERS (shared between /learn and /v1) ---------- */
.pricing {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line2);
  border: 1px solid var(--line2);
}
.tier {
  background: var(--bg);
  padding: 2.5rem 2rem;
  display: flex; flex-direction: column;
  gap: 1.25rem;
}
.tier.featured { background: #0a0a0a; color: #fff; }
.tier-name {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.tier.featured .tier-name { color: rgba(255, 255, 255, .55); }
.tier-price {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  letter-spacing: -.04em; line-height: .95;
  display: flex; align-items: baseline; gap: .25rem;
  color: var(--fg);
}
.tier.featured .tier-price { color: #fff; }
.tier-price .cur {
  font-size: .6em; color: var(--muted);
  font-family: 'Geist Mono', monospace; font-weight: 400;
}
.tier.featured .tier-price .cur { color: rgba(255, 255, 255, .55); }
.tier-price .mo, .tier-price .ot {
  font-size: .32em; font-weight: 400; color: var(--muted);
  font-family: 'Geist Mono', monospace; letter-spacing: .02em; text-transform: uppercase;
}
.tier.featured .tier-price .mo, .tier.featured .tier-price .ot { color: rgba(255, 255, 255, .55); }
.tier-tagline {
  font-family: 'Geist', sans-serif; font-weight: 400;
  font-size: .95rem; line-height: 1.5;
  color: var(--fg2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.25rem;
}
.tier.featured .tier-tagline { color: rgba(255, 255, 255, .7); border-bottom-color: rgba(255, 255, 255, .18); }
.tier-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 0;
}
.tier-list li {
  display: grid; grid-template-columns: 1fr auto;
  gap: 1rem; padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .92rem; color: var(--fg2);
}
.tier.featured .tier-list li {
  color: rgba(255, 255, 255, .78);
  border-bottom-color: rgba(255, 255, 255, .12);
}
.tier-list li .v {
  font-family: 'Geist Mono', monospace; font-size: .85rem; letter-spacing: .02em;
  color: var(--fg); font-weight: 500; text-align: right;
}
.tier.featured .tier-list li .v { color: #fff; }
.tier .btn { margin-top: auto; }
.tier.featured .btn { border-color: #fff; color: #fff; }
.tier.featured .btn:hover { background: #fff; color: #0a0a0a; border-color: #fff; }
.pricing-foot {
  margin-top: 2rem;
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 1rem;
  font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .04em;
  color: var(--muted); text-transform: uppercase;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
@media (max-width: 820px) {
  .pricing { grid-template-columns: 1fr; border: none; background: transparent; gap: 1rem; }
  .tier { border: 1px solid var(--line2); }
  .tier.featured { border-color: #0a0a0a; }
}

/* ---------- FORM (used on /project, students email capture) ---------- */
.form {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--line2);
}
.form-section {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 2rem;
  padding: 3rem 0;
  border-bottom: 1px solid var(--line);
}
.form-section .num {
  font-family: 'Geist Mono', monospace;
  font-size: 12px; color: var(--muted); letter-spacing: .04em;
}
.form-section h2 {
  font-family: 'Geist', sans-serif; font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; line-height: 1.05;
  margin-bottom: 2rem;
}
.form-section h2 em { font-style: italic; color: var(--fg2); font-weight: 400; }
.form-fields { display: flex; flex-direction: column; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
.field input, .field textarea, .field select {
  font-family: 'Geist', sans-serif;
  font-size: 1rem; line-height: 1.45;
  color: var(--fg);
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent;
  padding: .65rem 0;
  outline: none;
  transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-bottom-color: var(--fg);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; background: transparent; padding-right: 1.5rem; cursor: pointer; }
.field-help {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .04em; color: var(--muted);
}
.checks, .radios {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .75rem 2rem;
}
.checks label, .radios label {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: 'Geist', sans-serif; font-size: 1rem;
  color: var(--fg);
  text-transform: none; letter-spacing: 0;
  cursor: pointer;
}
.checks input[type="checkbox"], .radios input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--fg);
}
.form-submit {
  padding: 3rem 0;
  display: flex; gap: 1rem; flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 760px) {
  .form-section { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; }
  .checks, .radios { grid-template-columns: 1fr; }
}

/* =========================================================
   THEME TOGGLE BUTTON (lives in .nav-inner)
   ========================================================= */
.theme-toggle {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--line2);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--fg);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .theme-icon-moon { display: none; }
.theme-toggle:hover { background: var(--fg); color: var(--bg); }
.nav.over-hero:not(.scrolled) .theme-toggle {
  border-color: rgba(255,255,255,.6); color: #fff;
}
.nav.over-hero:not(.scrolled) .theme-toggle:hover {
  background: #fff; color: #0a0a0a;
}
[data-theme="dark"] .theme-toggle .theme-icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: block; }

/* =========================================================
   HERO VIDEO CROSSFADE (homepage)
   Two stacked <video> elements; opacity flips with theme.
   ========================================================= */
.hero-bg-day, .hero-bg-night {
  transition: opacity .6s ease;
}
.hero-bg-night { opacity: 0; }
[data-theme="dark"] .hero-bg-day { opacity: 0; }
[data-theme="dark"] .hero-bg-night { opacity: 1; }

/* =========================================================
   DARK MODE
   Toggled via [data-theme="dark"] on <html>. Persisted to
   localStorage. Inline init script in every page's <head>
   prevents flash on load.
   ========================================================= */
[data-theme="dark"] {
  --bg:   #0a0a0a;
  --fg:   #fafafa;
  --fg2:  #c4c4c4;
  --muted:#7a7a7a;
  --line: #1f1f1f;
  --line2:#2f2f2f;
  color-scheme: dark;
}

/* Smooth color transitions on theme flip */
html { transition: background-color .35s ease; }
body, .nav, footer.foot, .trusted, .preview,
.post-card-img, .post-featured-img, .post-hero-img,
.author-bio-photo, .post-author img, .team-photo,
.project-frame, .module-mock, .mock-agent .agent-card,
.tier, .access, .product-panel, .post-cta, .blog-subscribe,
.cookie-banner {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* ---------- NAV ---------- */
[data-theme="dark"] .nav {
  background: rgba(10,10,10,.85);
  border-bottom-color: var(--line2);
}
[data-theme="dark"] .nav.over-hero:not(.scrolled) {
  background: transparent; border-bottom-color: transparent;
}
[data-theme="dark"] .nav.over-hero.scrolled {
  background: rgba(10,10,10,.85);
  border-bottom-color: var(--line2);
}
[data-theme="dark"] .brand-mark { filter: invert(1); }
[data-theme="dark"] .nav-toggle { border-color: var(--line2); color: var(--fg); }
[data-theme="dark"] .nav-toggle span { background: var(--fg); }

/* ---------- FOOTER + TRUSTED bg (slightly different from page bg) ---------- */
[data-theme="dark"] footer.foot { background: #050505; }
[data-theme="dark"] .trusted    { background: #050505; }

/* ---------- LOGOS rendered via brightness(0) — invert for dark ---------- */
[data-theme="dark"] .trusted-logos img,
[data-theme="dark"] .project-frame .logo {
  filter: brightness(0) invert(1);
}

/* ---------- PROJECT FRAME (light card → dark surface) ---------- */
[data-theme="dark"] .project-frame { background: #0e0e0e; border-color: var(--line2); }
[data-theme="dark"] .project:hover .project-frame { background: #131313; border-color: var(--fg); }

/* ---------- "MORE WORK" project card was dark → flip to light ---------- */
[data-theme="dark"] .project-frame.more {
  background: #fafafa; border-color: var(--line2); color: #0a0a0a;
}
[data-theme="dark"] .project-frame.more .more-mark        { color: #0a0a0a; }
[data-theme="dark"] .project-frame.more .more-mark sup    { color: rgba(10,10,10,.55); }
[data-theme="dark"] .project-frame.more .corner           { color: rgba(10,10,10,.45); }
[data-theme="dark"] .project:hover .project-frame.more    { background: #fff; border-color: #fafafa; }
[data-theme="dark"] .project:hover .project-frame.more .corner    { color: rgba(10,10,10,.75); }
[data-theme="dark"] .project-frame.more .arrow-big        { color: rgba(10,10,10,.55); }
[data-theme="dark"] .project:hover .project-frame.more .arrow-big { color: #0a0a0a; }

/* ---------- INVERTED DARK SURFACES → flip to light cards ----------
   Product callout, post CTA, blog subscribe, featured tier, V1 access.
   These exist to CONTRAST the page; flipping keeps the contrast in dark mode.
*/
[data-theme="dark"] .product-panel,
[data-theme="dark"] .post-cta,
[data-theme="dark"] .blog-subscribe,
[data-theme="dark"] .tier.featured,
[data-theme="dark"] .access {
  background: #fafafa; color: #0a0a0a;
  border-color: var(--line2);
}

/* product-panel internals */
[data-theme="dark"] .product-meta            { color: rgba(10,10,10,.6); }
[data-theme="dark"] .product-meta .live::before { background: #0a0a0a; box-shadow: 0 0 0 0 rgba(10,10,10,.5); }
[data-theme="dark"] .product-wordmark        { color: #0a0a0a; }
[data-theme="dark"] .product-wordmark sup    { color: rgba(10,10,10,.55); }
[data-theme="dark"] .product-wordmark .badge { background: #0a0a0a; color: #fafafa; }
[data-theme="dark"] .product-tagline         { color: rgba(10,10,10,.85); }
[data-theme="dark"] .product-tagline em      { color: rgba(10,10,10,.55); }
[data-theme="dark"] .product-features        { border-top-color: rgba(10,10,10,.15); }
[data-theme="dark"] .feature-num             { color: rgba(10,10,10,.55); }
[data-theme="dark"] .feature h4              { color: #0a0a0a; }
[data-theme="dark"] .feature p               { color: rgba(10,10,10,.72); }
[data-theme="dark"] .product-ctas            { border-top-color: rgba(10,10,10,.15); }
[data-theme="dark"] .product-panel .btn      { border-color: #0a0a0a; color: #0a0a0a; }
[data-theme="dark"] .product-panel .btn:hover{ background: #0a0a0a; color: #fafafa; border-color: #0a0a0a; }
[data-theme="dark"] .product-panel .btn-link { color: rgba(10,10,10,.78); border-bottom-color: rgba(10,10,10,.4); }
[data-theme="dark"] .product-panel .btn-link:hover { color: #0a0a0a; border-bottom-color: #0a0a0a; }
[data-theme="dark"] .product-panel::before {
  background: radial-gradient(ellipse at 80% 20%, rgba(10,10,10,.04) 0%, transparent 65%);
}

/* post-cta internals */
[data-theme="dark"] .post-cta .num   { color: rgba(10,10,10,.55); }
[data-theme="dark"] .post-cta h3     { color: #0a0a0a; }
[data-theme="dark"] .post-cta p      { color: rgba(10,10,10,.75); }
[data-theme="dark"] .post-cta .btn         { border-color: #0a0a0a; color: #0a0a0a; }
[data-theme="dark"] .post-cta .btn:hover   { background: #0a0a0a; color: #fafafa; }

/* blog-subscribe internals */
[data-theme="dark"] .blog-subscribe-num   { color: rgba(10,10,10,.55); }
[data-theme="dark"] .blog-subscribe h3    { color: #0a0a0a; }
[data-theme="dark"] .blog-subscribe h3 em { color: rgba(10,10,10,.65); }
[data-theme="dark"] .blog-subscribe p     { color: rgba(10,10,10,.72); }
[data-theme="dark"] .blog-subscribe-form         { border-color: rgba(10,10,10,.35); }
[data-theme="dark"] .blog-subscribe-form input   { color: #0a0a0a; }
[data-theme="dark"] .blog-subscribe-form input::placeholder { color: rgba(10,10,10,.5); }
[data-theme="dark"] .blog-subscribe-form button       { background: #0a0a0a; color: #fafafa; }
[data-theme="dark"] .blog-subscribe-form button:hover { background: #1f1f1f; }

/* tier.featured internals */
[data-theme="dark"] .tier.featured .tier-name   { color: rgba(10,10,10,.55); }
[data-theme="dark"] .tier.featured .tier-price  { color: #0a0a0a; }
[data-theme="dark"] .tier.featured .tier-price .cur,
[data-theme="dark"] .tier.featured .tier-price .mo,
[data-theme="dark"] .tier.featured .tier-price .ot { color: rgba(10,10,10,.55); }
[data-theme="dark"] .tier.featured .tier-tagline {
  color: rgba(10,10,10,.7); border-bottom-color: rgba(10,10,10,.18);
}
[data-theme="dark"] .tier.featured .tier-list li {
  color: rgba(10,10,10,.78); border-bottom-color: rgba(10,10,10,.12);
}
[data-theme="dark"] .tier.featured .tier-list li .v { color: #0a0a0a; }
[data-theme="dark"] .tier.featured .btn       { border-color: #0a0a0a; color: #0a0a0a; }
[data-theme="dark"] .tier.featured .btn:hover { background: #0a0a0a; color: #fafafa; border-color: #0a0a0a; }

/* ---------- COOKIE BANNER ----------
   In light mode it's a black card. With --fg/--bg swapped, it
   becomes a white card; we re-tune the buttons accordingly.
*/
[data-theme="dark"] .cookie-banner             { border-color: var(--line2); }
[data-theme="dark"] .cookie-banner button      { color: #0a0a0a; border-color: rgba(10,10,10,.4); }
[data-theme="dark"] .cookie-banner button.primary {
  background: #0a0a0a; color: #fafafa; border-color: #0a0a0a;
}
[data-theme="dark"] .cookie-banner button:hover         { background: #0a0a0a; color: #fafafa; }
[data-theme="dark"] .cookie-banner button.primary:hover { background: #1f1f1f; }
[data-theme="dark"] .cookie-banner p a { color: #0a0a0a; border-bottom-color: rgba(10,10,10,.4); }
[data-theme="dark"] .cookie-banner p a:hover { border-bottom-color: #0a0a0a; }

/* ---------- IMAGE BACKGROUNDS (placeholder bg behind images) ---------- */
[data-theme="dark"] .post-card-img,
[data-theme="dark"] .post-featured-img,
[data-theme="dark"] .post-hero-img,
[data-theme="dark"] .author-bio-photo,
[data-theme="dark"] .post-author img,
[data-theme="dark"] .team-photo {
  background: #1a1a1a;
  border-color: var(--line2);
}

/* Image filter recalibration for dark backdrops */
[data-theme="dark"] .post-card-img img,
[data-theme="dark"] .post-featured-img img,
[data-theme="dark"] .post-hero-img img {
  filter: grayscale(100%) contrast(.95) brightness(.85);
}
[data-theme="dark"] .post-card:hover .post-card-img img,
[data-theme="dark"] .post-featured:hover .post-featured-img img {
  filter: grayscale(100%) contrast(1) brightness(.95);
}

/* ---------- BLOG hovers ---------- */
[data-theme="dark"] .post-nav a:hover         { background: #131313; }
[data-theme="dark"] .blog-search-clear:hover  { background: #131313; }

/* ---------- V1: PREVIEW + MOCK SURFACES ---------- */
[data-theme="dark"] .preview              { background: #050505; }
[data-theme="dark"] .module-mock          { background: #131313; border-color: var(--line2); }
[data-theme="dark"] .mock-agent .agent-card { background: #1a1a1a; }
[data-theme="dark"] .mock-agent .agent-card-t { color: var(--fg); }
[data-theme="dark"] .mock-agent .agent-row    { border-bottom-color: var(--line2); }
[data-theme="dark"] .mock-agent .agent-row .v { color: var(--fg); }
[data-theme="dark"] .module-list code     { background: rgba(255,255,255,.05); }
[data-theme="dark"] .v1-hero::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
}
[data-theme="dark"] .v1-hero-corner .live::before {
  background: var(--fg); box-shadow: 0 0 0 0 rgba(255,255,255,.45);
}
[data-theme="dark"] .v1-wordmark .badge { background: var(--fg); color: var(--bg); }
[data-theme="dark"] .v1-flow-diagram circle[fill="#fafafa"] { fill: #1a1a1a; }
[data-theme="dark"] .v1-flow-diagram text[fill="#0a0a0a"]   { fill: #fafafa; }
[data-theme="dark"] .v1-flow-diagram circle[fill="#0a0a0a"] { fill: #fafafa; }
[data-theme="dark"] .v1-flow-diagram text[fill="#fff"]      { fill: #0a0a0a; }

/* Access panel — flipped to light, internal recolor */
[data-theme="dark"] .access h3        { color: #0a0a0a; }
[data-theme="dark"] .access h3 em     { color: rgba(10,10,10,.65); }
[data-theme="dark"] .access p         { color: rgba(10,10,10,.8); }
[data-theme="dark"] .access-meta      { color: rgba(10,10,10,.55); }
[data-theme="dark"] .access-includes  { border-color: rgba(10,10,10,.18); }
[data-theme="dark"] .access-includes .item-num { color: rgba(10,10,10,.55); }
[data-theme="dark"] .access-includes .item-t   { color: #0a0a0a; }
[data-theme="dark"] .access-includes .item-d   { color: rgba(10,10,10,.7); }
[data-theme="dark"] .access-ctas .btn          { border-color: #0a0a0a; color: #0a0a0a; }
[data-theme="dark"] .access-ctas .btn:hover    { background: #0a0a0a; color: #fafafa; }
[data-theme="dark"] .access-ctas .btn-link     { color: rgba(10,10,10,.78); border-bottom-color: rgba(10,10,10,.4); }
[data-theme="dark"] .access-ctas .btn-link:hover { color: #0a0a0a; border-bottom-color: #0a0a0a; }
[data-theme="dark"] .access::after {
  background: linear-gradient(110deg, transparent 35%, rgba(10,10,10,.04) 50%, transparent 65%);
}

/* ---------- Form inputs (project page etc.) ---------- */
[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select {
  color: var(--fg);
  border-bottom-color: var(--line2);
}
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field textarea:focus,
[data-theme="dark"] .field select:focus { border-bottom-color: var(--fg); }
[data-theme="dark"] .checks input[type="checkbox"],
[data-theme="dark"] .radios input[type="radio"] { accent-color: var(--fg); }

/* ---------- Shared live-dot indicator (used on internal page heroes) ---------- */
[data-theme="dark"] .hero-internal-corner .live::before {
  background: var(--fg); box-shadow: 0 0 0 0 rgba(255,255,255,.45);
  animation-name: livePulseDark;
}
@keyframes livePulseDark {
  0%   { box-shadow: 0 0 0 0  rgba(255,255,255,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0  rgba(255,255,255,0); }
}

/* =========================================================
   RESPONSIVE & TOUCH POLISH
   - Scope hover-only effects to fine pointers (no stuck-hover on tap)
   - WCAG 2.5.5 touch target minimums
   - Small-phone (320–400px) typography
   Canonical breakpoints used in this stylesheet: 560 / 760 / 980 / 1080.
   Any new media query should reuse one of those.
   ========================================================= */

/* Disable hover-only motion on touch devices to prevent stuck states after tap */
@media (hover: none) {
  .service:hover,
  .project:hover .project-frame,
  .team-card:hover { transform: none; padding-left: 0; }
  .service:hover .arrow,
  .project:hover .project-frame .corner,
  .project:hover .project-frame .logo { transform: none; opacity: inherit; }
}

/* Coarse-pointer touch target minimums (WCAG 2.5.5) */
@media (pointer: coarse) {
  .checks input[type="checkbox"],
  .radios input[type="radio"] { width: 22px; height: 22px; }
  .checks label, .radios label { min-height: 44px; padding: .35rem 0; }
  .theme-toggle { min-width: 44px; min-height: 44px; padding: .5rem; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
  .field input,
  .field textarea,
  .field select { padding-top: .9rem; padding-bottom: .9rem; min-height: 44px; }
  /* .nav-drawer-list a uses display:grid for its 50/1fr/30 columns — don't override.
     Existing padding (1.5rem 0) already gives ~72px height, well above the 44px target. */
  .post-share a,
  .post-share button { min-height: 44px; padding: .5rem .25rem; }
}

/* Small-phone typography & overflow guards (320–400px) */
@media (max-width: 400px) {
  .micro,
  .nav-link .num,
  .nav-drawer-list a .num,
  .post-card .meta-text { font-size: 12px; }
  .hero-internal-eyebrow,
  .hero-internal-corner { font-size: 12px; }
  .big-mark-text { white-space: normal; word-break: break-word; }
}