/* ---------- Theme tokens ---------- */
:root {
  color-scheme: light;
  --ink: #000;
  --ink-rgb: 0, 0, 0;
  --paper: #f5f4f0;
  --raised: #fff;
  --canvas: #c2ccd3;
  --frost-strong: rgba(255, 255, 255, 0.6);
  --frost-soft: rgba(255, 255, 255, 0.3);
  --hover-wash: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(47, 47, 47, 0.15);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f2f1ed;
  --ink-rgb: 242, 241, 237;
  --paper: #0c0c0d;
  --raised: #161618;
  --canvas: #050506;
  --frost-strong: rgba(18, 18, 20, 0.6);
  --frost-soft: rgba(255, 255, 255, 0.06);
  --hover-wash: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.14);
}
:root[data-theme="dark"] .footer { background: #161617; border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html.menu-open { overflow: hidden; } /* lock scroll behind the open menu */

html, body {
  width: 100%;
  background: var(--canvas); /* pre-load fallback behind the backdrop */
  color: var(--ink);
  overflow-x: hidden;
  font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 500ms, color 500ms;
}

/* ---------- Background video ---------- */
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform; /* parallax transform is written every frame by glass-card.js */
}

/* real-time 3D background (scene3d.js); the video stays as the fallback when WebGL is unavailable */
.bg-3d {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.has-3d .bg-3d { display: block; }
.has-3d .bg-video { visibility: hidden; }

/* floating spores + signal rings, drawn by glass-card.js between the video and the content */
.depth-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.glass-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  color: var(--ink);
  pointer-events: none; /* only interactive children opt back in */
}

.icon { flex: none; }
/* small icon sitting inline after link text */
.icon--inline { display: inline-block; vertical-align: -0.125em; margin-left: 0.25em; }

/* ---------- Vertical rules ---------- */
.rule { position: absolute; top: 0; bottom: 0; display: none; flex-direction: column; align-items: center; }
.rule--left  { left: 1.25rem; }
.rule--right { right: 1.25rem; }
.rule__seg { width: 1px; background: rgba(var(--ink-rgb), 0.2); }
.rule__seg--end { height: 15%; }
.rule__seg--mid { flex: 1 1 0%; }
.rule__plus { font-size: 0.75rem; line-height: 1; color: rgba(var(--ink-rgb), 0.4); padding: 0.25rem 0; }
@media (min-width: 768px) { .rule { display: flex; } }

/* ---------- Navbar ---------- */
.nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; }
.nav__item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  background: none;
  border: 0;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 300ms;
}
.nav__item:hover { opacity: 0.6; }
.nav__label { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.025em; }
.nav__label--menu { display: none; } /* hamburger is icon-only on mobile */
.nav__dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--ink); }

@media (min-width: 640px) { .nav { padding: 1.25rem 1.5rem; } .nav__label--menu { display: inline; } }
@media (min-width: 768px) { .nav { padding: 1.5rem 3rem; } }

/* ---------- Bottom row ---------- */
.hero-bottom {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1.25rem 1.5rem; /* matches .nav so columns align with the navbar */
}
@media (min-width: 640px) { .hero-bottom { padding: 0 1.5rem 2rem; } }
@media (min-width: 768px) {
  .hero-bottom {
    flex: 1;
    margin-top: 0;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 3rem;
    padding: 2rem 3rem 3rem;
  }
  .lede { align-self: flex-start; } /* copy pinned top-left */
  .card { align-self: flex-end; }   /* card pinned bottom-right */
}

/* ---------- Lede ---------- */
.lede { max-width: 24rem; }
.lede__title { font-size: 1.625rem; font-weight: 300; line-height: 1.25; letter-spacing: -0.025em; color: var(--ink); }
.lede__body  { margin-top: 0.75rem; max-width: 300px; font-size: 0.875rem; line-height: 1.625; color: rgba(var(--ink-rgb), 0.6); }

@media (min-width: 640px)  { .lede__title { font-size: 1.875rem; } .lede__body { font-size: 0.9375rem; } }
@media (min-width: 768px)  { .lede__title { font-size: 2.125rem; } .lede__body { margin-top: 1rem; } }
@media (min-width: 1024px) {
  .lede { max-width: 32rem; }
  .lede__title { font-size: 2.75rem; }
  .lede__body { max-width: 340px; font-size: 1.0625rem; }
}

/* ---------- Chamfer button ---------- */
.chamfer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
  height: 44px;
  margin-top: 1.5rem;
  padding: 0 1.25rem;
  color: var(--ink);
  text-decoration: none;
  pointer-events: auto;
  transition: opacity 300ms;
}
.chamfer:hover { opacity: 0.7; }

/* mobile-only frosted backing, clipped to the same chamfer silhouette */
.chamfer__glass {
  position: absolute;
  inset: 0;
  background: var(--frost-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.chamfer__outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chamfer__label { position: relative; font-size: 0.75rem; letter-spacing: 0.025em; }
.chamfer .icon { position: relative; }

@media (min-width: 640px) {
  .chamfer { width: 260px; height: 48px; padding: 0 1.5rem; }
  .chamfer__label { font-size: 0.875rem; }
  .chamfer__glass { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; }
}
@media (min-width: 768px) { .chamfer { margin-top: 2rem; } }
@media (min-width: 1024px) { .chamfer { width: 300px; height: 54px; } .chamfer__label { font-size: 1rem; } }

/* ---------- Liquid-glass card ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 340px;
  max-width: 100%;
  height: 460px;
  padding: 2rem;
  border-radius: 48px;
  overflow: hidden;        /* clips the duplicate to the card */
  background: transparent; /* the refraction IS the fill */
  border: 1px solid var(--glass-border);
  pointer-events: auto;
  animation: fade-slide-up-card 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform;
}
/* animates `translate`, leaving `transform` free for the pointer tilt */
@keyframes fade-slide-up-card {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}

/* full-viewport-aligned copy of the backdrop; left/top/width/height are written every frame by glass-card.js */
.glass-dup { position: absolute; left: 0; top: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.glass-dup__canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: url(#liquid-glass-refraction); }

/* phones / tablets: a lighter refraction filter (see #liquid-glass-lite) */
.glass-lite .glass-dup__canvas { filter: url(#liquid-glass-lite); }
.glass-lite [data-glass-card] { will-change: auto; }

.card__frost {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 48px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.3),
              inset 0 -1px 2px rgba(var(--ink-rgb), 0.15);
  transition: background 400ms;
}
.card.group:hover .card__frost { background: rgba(255, 255, 255, 0.1); }

/* specular glare that follows the pointer; --gx/--gy are set by glass-card.js */
.card__frost::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: soft-light;
}

.card__head, .card__body, .card__wave { position: relative; z-index: 2; }

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.card__title { font-size: 1rem; font-weight: 500; letter-spacing: -0.025em; }
.card__index { font-size: 0.75rem; color: rgba(var(--ink-rgb), 0.4); }
.card__body { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.finding__title { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.025em; }
.finding__text { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.625; color: rgba(var(--ink-rgb), 0.5); }
.card__wave { display: block; width: 100%; height: auto; margin-top: 1.25rem; }

@media (min-width: 640px) { .card__title { font-size: 1.125rem; } }
@media (min-width: 768px) {
  .card__head { padding-bottom: 1rem; }
  .card__title { font-size: 1.25rem; }
  .card__body { gap: 1.25rem; margin-top: 1.25rem; }
  .finding__title { font-size: 1rem; }
  .finding__text { font-size: 0.875rem; margin-top: 0.375rem; }
  .card__wave { margin-top: 1.5rem; }
}
@media (min-width: 1024px) {
  .card { width: 400px; height: 540px; padding: 2.5rem; }
  .card__title { font-size: 1.5rem; }
  .finding__title { font-size: 1.125rem; }
  .finding__text { font-size: 0.9375rem; }
}

/* ---------- Menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 500ms;
}
.menu.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }

.menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 500ms;
}
.menu.is-open .menu__backdrop { opacity: 1; }

.menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1.5rem 2rem;
  background: var(--paper);
  transform: translateX(-100%);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.menu.is-open .menu__panel { transform: translateX(0); }
@media (min-width: 640px) { .menu__panel { width: 380px; padding: 1.5rem 2.5rem; } }

.menu__close {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  align-self: flex-start;
  margin-bottom: 3rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  cursor: pointer;
  transition: opacity 300ms;
}
.menu__close:hover { opacity: 0.6; }

.menu__nav { display: flex; flex-direction: column; }
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms, transform 500ms;
}
.menu__linkText { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.025em; transition: transform 300ms; }
.menu__link:hover .menu__linkText { transform: translateX(8px); }
.menu__arrow { opacity: 0; transform: translateX(8px); transition: opacity 300ms, transform 300ms; }
.menu__link:hover .menu__arrow { opacity: 1; transform: translateX(0); }
@media (min-width: 640px) { .menu__linkText { font-size: 1.875rem; } }

.menu.is-open .menu__link { opacity: 1; transform: translateY(0); }
.menu.is-open .menu__link:nth-child(1) { transition-delay: 150ms; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 225ms; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 300ms; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 375ms; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 450ms; }

.menu__foot {
  margin-top: auto;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms, transform 500ms;
}
.menu.is-open .menu__foot { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
.menu__footLabel {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: rgba(var(--ink-rgb), 0.4);
}
.menu__mail { font-size: 0.875rem; color: rgba(var(--ink-rgb), 0.7); text-decoration: none; transition: color 300ms; }
.menu__mail:hover { color: var(--ink); }

/* =========================================================
   Content sections (below the hero)
   ========================================================= */
.section {
  position: relative;
  z-index: 10;
  padding: 5rem 1.25rem;
  background: var(--paper);
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}
.section__inner { max-width: 1280px; margin: 0 auto; }
.section__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.section__head::after { content: ''; flex: 1; height: 1px; background: rgba(var(--ink-rgb), 0.15); }
.section__index { color: rgba(var(--ink-rgb), 0.4); }
.section__label { color: var(--ink); }
.section__title {
  max-width: 56rem;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.section__title em { font-style: normal; color: rgba(var(--ink-rgb), 0.4); }

@media (min-width: 640px) { .section { padding: 6rem 1.5rem; } .section__title { font-size: 2.25rem; } }
@media (min-width: 768px) { .section { padding: 7rem 3rem; } .section__head { margin-bottom: 3.5rem; } }
@media (min-width: 1024px) { .section__title { font-size: 3rem; } }

/* scroll reveal (only hidden once JS has marked the page, so content never vanishes without it) */
.js .reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), translate 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.is-visible { opacity: 1; translate: none; }

/* ---------- About ---------- */
.about { display: grid; gap: 2.5rem; }
.about__body { display: grid; gap: 1rem; max-width: 34rem; font-size: 0.875rem; line-height: 1.7; color: rgba(var(--ink-rgb), 0.6); }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 3.5rem;
  border-top: 1px solid rgba(var(--ink-rgb), 0.15);
}
.stat { padding: 1.5rem 1rem 0 0; }
.stat dt { font-size: 0.75rem; letter-spacing: 0.025em; color: rgba(var(--ink-rgb), 0.5); }
.stat dd { margin-top: 0.5rem; font-size: 2.25rem; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.stat dd small { font-size: 0.875rem; letter-spacing: 0; color: rgba(var(--ink-rgb), 0.4); }

@media (min-width: 768px) {
  .about { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: end; }
  .about__body { font-size: 1rem; }
  .stats { grid-template-columns: repeat(4, 1fr); margin-top: 5rem; }
  .stat { padding: 2rem 2rem 0 0; }
  .stat + .stat { padding-left: 2rem; border-left: 1px solid rgba(var(--ink-rgb), 0.1); }
  .stat dd { font-size: 3.5rem; }
}

/* ---------- Projects ---------- */
.projects { margin-top: 3rem; border-top: 1px solid rgba(var(--ink-rgb), 0.15); }
.project {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.15);
  color: var(--ink);
  text-decoration: none;
  transition: background 400ms;
}
.project__num { font-size: 0.75rem; color: rgba(var(--ink-rgb), 0.4); }
.project__main { min-width: 0; }
.project__title {
  font-size: 1.375rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.project__desc { margin-top: 0.375rem; max-width: 30rem; font-size: 0.8125rem; line-height: 1.6; color: rgba(var(--ink-rgb), 0.5); }
.project__meta {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: rgba(var(--ink-rgb), 0.6);
}
.project__tag { padding: 0.125rem 0.625rem; border: 1px solid rgba(var(--ink-rgb), 0.2); border-radius: 9999px; }
.project__arrow {
  grid-column: 3;
  grid-row: 1;
  opacity: 0.3;
  transform: translateX(-6px);
  transition: opacity 300ms, transform 300ms;
}
.project:hover .project__title { transform: translateX(8px); }
.project:hover .project__arrow { opacity: 1; transform: translateX(0); }

@media (min-width: 768px) {
  .project { grid-template-columns: 4rem 1fr 13rem 9rem 4rem 2rem; align-items: center; padding: 2rem 0; }
  .project:hover { background: var(--hover-wash); }
  .project__title { font-size: 1.875rem; }
  .project__meta { display: contents; font-size: 0.8125rem; }
  .project__arrow { grid-column: 6; justify-self: end; }
  .project__year { text-align: right; }
  .project__tag { justify-self: start; }
}

/* ---------- Services ---------- */
.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 3rem;
  background: rgba(var(--ink-rgb), 0.12);
  border: 1px solid rgba(var(--ink-rgb), 0.12);
}
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 18rem;
  padding: 1.75rem;
  background: var(--paper);
  transition: background 400ms;
}
.service:hover { background: var(--raised); }
.service__top { display: flex; align-items: flex-start; justify-content: space-between; }
.service__code { font-size: 0.75rem; color: rgba(var(--ink-rgb), 0.4); }
.service__title { margin-top: auto; padding-top: 3rem; font-size: 1.375rem; font-weight: 300; letter-spacing: -0.025em; }
.service__text { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.65; color: rgba(var(--ink-rgb), 0.55); }
.service__list { margin-top: 1.25rem; list-style: none; font-size: 0.75rem; color: rgba(var(--ink-rgb), 0.7); }
.service__list li { padding: 0.375rem 0; border-top: 1px solid rgba(var(--ink-rgb), 0.08); }
.service__list li::before { content: '+ '; color: rgba(var(--ink-rgb), 0.35); }

@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } .service { min-height: 22rem; } }

/* ---------- Testimonials (transparent: the video shows through) ---------- */
.testimonials {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 5rem 1.25rem;
}
.testimonials .section__head { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; }
.testimonials__stage { flex: 1; display: flex; align-items: center; justify-content: center; }

.quote-card {
  position: relative;
  width: 680px;
  max-width: 100%;
  padding: 2.25rem 1.75rem 1.75rem;
  border-radius: 48px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  will-change: transform;
}
.quote-card__content { position: relative; z-index: 2; }
.quote-card__mark { display: block; font-size: 3.5rem; line-height: 0.6; color: rgba(var(--ink-rgb), 0.25); }
.quote-card__text {
  margin-top: 1.25rem;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.02em;
  transition: opacity 400ms, transform 400ms;
}
.quote-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
}
.quote-card__who { transition: opacity 400ms; }
.quote-card__name { display: block; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; }
.quote-card__role { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: rgba(var(--ink-rgb), 0.5); }
.quote-card.is-swapping .quote-card__text,
.quote-card.is-swapping .quote-card__who { opacity: 0; }
.quote-card.is-swapping .quote-card__text { transform: translateY(8px); }

.quote-nav { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.quote-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(var(--ink-rgb), 0.25);
  border-radius: 9999px;
  background: var(--frost-soft);
  color: var(--ink);
  cursor: pointer;
  transition: background 300ms, border-color 300ms;
}
.quote-nav__btn:hover { background: var(--raised); border-color: var(--ink); }

@media (min-width: 640px) {
  .testimonials { padding: 6rem 1.5rem; }
  .quote-card { padding: 3rem 3rem 2.25rem; }
  .quote-card__text { font-size: 1.625rem; }
}
@media (min-width: 768px) { .testimonials { padding: 7rem 3rem; } }
@media (min-width: 1024px) { .quote-card__text { font-size: 1.875rem; } }

/* ---------- Contact ---------- */
.contact { display: grid; gap: 3.5rem; }
.contact__lede { margin-top: 1.25rem; max-width: 26rem; font-size: 0.875rem; line-height: 1.7; color: rgba(var(--ink-rgb), 0.6); }
.contact__details { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.contact__label { display: block; margin-bottom: 0.375rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; color: rgba(var(--ink-rgb), 0.4); }
.contact__value { font-size: 0.9375rem; line-height: 1.5; color: var(--ink); text-decoration: none; }
a.contact__value { transition: opacity 300ms; }
a.contact__value:hover { opacity: 0.6; }

.form { display: grid; gap: 1.75rem; }
.field { display: grid; gap: 0.5rem; }
.field__label { font-size: 0.75rem; letter-spacing: 0.025em; color: rgba(var(--ink-rgb), 0.5); }
.field__input {
  width: 100%;
  padding: 0.5rem 0 0.75rem;
  border: 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.25);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color 300ms;
}
.field__input::placeholder { color: rgba(var(--ink-rgb), 0.3); }
.field__input:focus { border-bottom-color: var(--ink); }
textarea.field__input { min-height: 7rem; resize: vertical; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-radius: 9999px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 300ms, color 300ms, border-color 300ms;
}
.chip span:hover { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
button.chamfer { margin-top: 0; background: none; border: 0; font: inherit; cursor: pointer; }
.form__status { font-size: 0.8125rem; color: rgba(var(--ink-rgb), 0.6); }

@media (min-width: 640px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
@media (max-width: 639.98px) { .form__row { display: grid; gap: 1.75rem; } }
@media (min-width: 768px) {
  .contact { grid-template-columns: 1fr 1.2fr; gap: 6rem; }
  .contact__lede { font-size: 1rem; }
}

/* ---------- Footer ---------- */
.footer {
  position: relative;
  z-index: 10;
  padding: 4rem 1.25rem 1.5rem;
  background: #0f0f0e;
  color: #f5f4f0;
  overflow: hidden;
}
.footer__inner { max-width: 1280px; margin: 0 auto; }
.footer__top { display: grid; gap: 2.5rem; }
.footer__tagline { max-width: 20rem; font-size: 1.25rem; font-weight: 300; line-height: 1.3; letter-spacing: -0.02em; }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.footer__heading { display: block; margin-bottom: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; color: rgba(245, 244, 240, 0.4); }
.footer__list { display: grid; gap: 0.625rem; list-style: none; }
.footer__link { font-size: 0.875rem; color: rgba(245, 244, 240, 0.75); text-decoration: none; transition: color 300ms; }
.footer__link:hover { color: #fff; }

.footer__wordmark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 244, 240, 0.15);
  font-size: 18vw;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.06em;
  white-space: nowrap;
  filter: grayscale(1);
}
.footer__plus { font-size: 0.875rem; letter-spacing: 0; color: rgba(245, 244, 240, 0.4); align-self: flex-start; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
  font-size: 0.75rem;
  color: rgba(245, 244, 240, 0.5);
}
.footer__top-link { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; transition: color 300ms; }
.footer__top-link:hover { color: #fff; }

@media (min-width: 640px) { .footer { padding: 5rem 1.5rem 2rem; } }
@media (min-width: 768px) {
  .footer { padding: 6rem 3rem 2rem; }
  .footer__top { grid-template-columns: 1fr auto; gap: 4rem; }
  .footer__tagline { font-size: 1.5rem; }
  .footer__cols { grid-template-columns: repeat(3, minmax(9rem, auto)); gap: 4rem; }
  .footer__wordmark { font-size: 16.5vw; }
}
@media (min-width: 1440px) { .footer__wordmark { font-size: 15rem; } }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

.field--group { margin: 0; padding: 0; border: 0; min-width: 0; }
.field__legend { margin-bottom: 0.75rem; padding: 0; }

/* ---------- Theme toggle ---------- */
.nav__right { display: inline-flex; align-items: center; gap: 1.25rem; }
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(var(--ink-rgb), 0.2);
  border-radius: 9999px;
  background: var(--frost-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 300ms, background 300ms;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle svg {
  position: absolute;
  transition: opacity 400ms, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-toggle__moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
[data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: none; }

/* surfaces fade between themes instead of snapping */
.section, .service, .chamfer__glass, .quote-nav__btn, .field__input, .chip span {
  transition-property: background, background-color, color, border-color;
  transition-duration: 500ms;
}

/* ---------- Codem content additions ---------- */
.projects__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.3);
  padding-bottom: 0.25rem;
  transition: border-color 300ms;
}
.projects__more:hover { border-color: var(--ink); }

/* the sixth services cell is a call to action in Majorelle Blue */
.service--cta { background: #4645f1; color: #cedcf0; text-decoration: none; }
.service--cta:hover { background: #3a39d6; }
.service--cta .service__code, .service--cta .service__text { color: rgba(206, 220, 240, 0.8); }

.contact__value--sub { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: rgba(var(--ink-rgb), 0.6); }
.socials { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.socials a { font-size: 0.9375rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.25); transition: border-color 300ms; }
.socials a:hover { border-color: var(--ink); }

.footer__legal { display: inline-flex; gap: 1.25rem; }

/* FormSubmit honeypot + consent */
.form__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consent { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.8125rem; line-height: 1.5; color: rgba(var(--ink-rgb), 0.65); }
.consent input { margin-top: 0.2rem; accent-color: #4645f1; }
.consent a { color: var(--ink); }

/* ---------- Legal pages (privacy-policy.html, terms-of-service.html) ---------- */
body.legal-page { background: var(--paper); }

.legal-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.legal-nav__brand, .legal-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  font-size: 0.875rem;
  text-decoration: none;
  transition: opacity 300ms;
}
.legal-nav__logo { flex: none; height: 1rem; width: auto; }
.legal-nav__brand span { font-size: 1rem; letter-spacing: -0.01em; }
.legal-nav__back:hover, .legal-nav__brand:hover { opacity: 0.6; }

.legal { max-width: 1280px; margin: 0 auto; padding: 3.5rem 1.25rem 5rem; }
.legal__head { max-width: 46rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(var(--ink-rgb), 0.15); }
.legal__title { margin-top: 0.75rem; font-size: 2.25rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; }
.legal__lede { margin-top: 1rem; font-size: 1rem; line-height: 1.6; color: rgba(var(--ink-rgb), 0.65); }
.legal__updated { margin-top: 1rem; font-size: 0.8125rem; color: rgba(var(--ink-rgb), 0.45); }

.legal__layout { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.legal__toc { font-size: 0.8125rem; }
.legal__tocLabel { display: block; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; font-size: 0.75rem; color: rgba(var(--ink-rgb), 0.4); }
.legal__toc ol { display: grid; gap: 0.5rem; padding-left: 1.25rem; color: rgba(var(--ink-rgb), 0.4); }
.legal__toc a { color: rgba(var(--ink-rgb), 0.7); text-decoration: none; transition: color 300ms; }
.legal__toc a:hover { color: var(--ink); }
.legal__other { display: inline-block; margin-top: 1.5rem; color: #4645f1 !important; }

.legal__body { max-width: 46rem; }
.legal__section { padding: 2rem 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.08); scroll-margin-top: 5rem; }
.legal__section:first-child { padding-top: 0; }
.legal__section h2 { font-size: 1.375rem; font-weight: 400; letter-spacing: -0.02em; }
.legal__section h3 { margin-top: 1.5rem; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.legal__section p, .legal__section li { font-size: 0.9375rem; line-height: 1.75; color: rgba(var(--ink-rgb), 0.72); }
.legal__section p { margin-top: 0.75rem; }
.legal__section ul { margin-top: 0.75rem; padding-left: 1.25rem; display: grid; gap: 0.375rem; }
.legal__section li::marker { color: #4645f1; }
.legal__section strong { color: var(--ink); font-weight: 600; }
.legal__section a { color: var(--ink); }
.legal__note { padding: 1rem 1.25rem; border-left: 2px solid #4645f1; background: rgba(70, 69, 241, 0.06); }
.legal__contact { margin-top: 1rem; font-style: normal; font-size: 0.9375rem; line-height: 1.8; color: rgba(var(--ink-rgb), 0.72); }

.footer--compact { padding-top: 2rem; }
.footer--compact .footer__bottom { margin-top: 0; }

@media (min-width: 768px) {
  .legal-nav { padding: 1.25rem 3rem; }
  .legal { padding: 5rem 3rem 7rem; }
  .legal__title { font-size: 3.5rem; }
  .legal__layout { grid-template-columns: 15rem 1fr; gap: 5rem; margin-top: 3.5rem; }
  .legal__toc { position: sticky; top: 6rem; align-self: start; }
}

/* footer CODEM wordmark (vector, traced from the brand construction grid) */
.footer__wordmark { align-items: flex-start; line-height: 1; padding-top: 2rem; }
.footer__logo { flex: 1; min-width: 0; width: 100%; height: auto; color: #cedcf0; }