/* ===========================================================
   HOLT DESIGN CO. — STYLESHEET
   Hand-crafted, zero-dependency. Apple-quality minimalism
   with playful, warm accents drawn from the logo.
   =========================================================== */

/* ───────────── TOKENS ───────────── */
:root {
  /* core palette — light */
  --bg: #f5f1ea;
  --bg-elev: #fbf8f1;
  --bg-card: #ffffff;
  --ink: #0e0e10;
  --ink-soft: #3a3933;
  --ink-mute: #857f75;
  --line: #e7dfcf;
  --line-strong: #d6cdb9;

  /* accents (logo dots) */
  --green: #3fb873;
  --orange: #e9a23b;
  --red: #d9483b;
  --blue: #3b8fd9;

  /* type */
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* layered shadows — warm, soft, multi-stop, very Apple */
  --shadow-xs: 0 1px 2px rgba(20, 16, 12, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 16, 12, 0.04), 0 2px 4px rgba(20, 16, 12, 0.04);
  --shadow-md: 0 1px 2px rgba(20, 16, 12, 0.05),
    0 8px 16px -4px rgba(20, 16, 12, 0.08),
    0 4px 8px -2px rgba(20, 16, 12, 0.06);
  --shadow-lg: 0 1px 2px rgba(20, 16, 12, 0.04),
    0 24px 40px -12px rgba(20, 16, 12, 0.18),
    0 12px 24px -6px rgba(20, 16, 12, 0.12);
  --shadow-xl: 0 1px 2px rgba(20, 16, 12, 0.04),
    0 40px 80px -20px rgba(20, 16, 12, 0.25),
    0 20px 40px -10px rgba(20, 16, 12, 0.18);
  --shadow-glow-green: 0 24px 60px -20px rgba(63, 184, 115, 0.5);
  --shadow-glow-orange: 0 24px 60px -20px rgba(233, 162, 59, 0.55);
  --shadow-glow-red: 0 24px 60px -20px rgba(217, 72, 59, 0.5);
  --shadow-glow-blue: 0 24px 60px -20px rgba(59, 143, 217, 0.5);

  /* radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* layout */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 56px);
}

[data-theme="dark"] {
  --bg: #0e0e10;
  --bg-elev: #16161a;
  --bg-card: #1c1c20;
  --ink: #f2ede2;
  --ink-soft: #c9c3b6;
  --ink-mute: #7c7468;
  --line: #27272d;
  --line-strong: #34343c;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.5),
    0 8px 16px -4px rgba(0, 0, 0, 0.45),
    0 4px 8px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.5),
    0 24px 40px -12px rgba(0, 0, 0, 0.7),
    0 12px 24px -6px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 1px 2px rgba(0, 0, 0, 0.5),
    0 40px 80px -20px rgba(0, 0, 0, 0.8),
    0 20px 40px -10px rgba(0, 0, 0, 0.6);
}

/* ───────────── RESET ───────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  font-feature-settings: "ss01", "cv11";
  transition: background-color 0.5s ease, color 0.5s ease;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
::selection {
  background: var(--green);
  color: var(--ink);
}
em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.mono {
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  text-transform: lowercase;
}

/* ───────────── AMBIENT BACKGROUND ───────────── */
.ambient {
  position: fixed;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.55;
}
[data-theme="dark"] .ambient {
  opacity: 0.3;
}
.blob {
  position: absolute;
  width: 50vmax;
  height: 50vmax;
  border-radius: 50%;
  mix-blend-mode: multiply;
  animation: drift 26s ease-in-out infinite;
}
[data-theme="dark"] .blob {
  mix-blend-mode: screen;
}
.blob--green {
  background: radial-gradient(circle, var(--green) 0%, transparent 60%);
  top: -10%;
  left: -10%;
}
.blob--orange {
  background: radial-gradient(circle, var(--orange) 0%, transparent 60%);
  bottom: -20%;
  right: -10%;
  animation-delay: -8s;
  animation-duration: 32s;
}
.blob--red {
  background: radial-gradient(circle, var(--red) 0%, transparent 60%);
  top: 30%;
  right: 30%;
  width: 30vmax;
  height: 30vmax;
  animation-delay: -16s;
  animation-duration: 38s;
}
@keyframes drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(6%, -4%) scale(1.08);
  }
  66% {
    transform: translate(-4%, 5%) scale(0.95);
  }
}

/* SVG fractal noise grain overlay — feels like real paper */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-theme="dark"] .grain {
  opacity: 0.25;
  mix-blend-mode: screen;
}

/* ───────────── LAYOUT HELPERS ───────────── */
.section {
  max-width: var(--container);
  margin: 0 auto;
  /* Section spacing is the midpoint between the original (very generous)
     padding and the recently-trimmed pillars/work seam — applied globally
     so every section ↔ section gap reads the same. */
  padding: clamp(60px, 9.5vw, 128px) var(--gutter);
}
.section__head {
  max-width: 720px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  color: var(--ink-soft);
  font-size: 12px;
  box-shadow: var(--shadow-xs);
}
.section__title {
  margin: 0 0 16px;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.section__title em {
  font-size: 1.05em;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
}
.section__lede {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}

/* ───────────── BUTTONS ───────────── */
.btn {
  --pad-x: 22px;
  --pad-y: 13px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1.2),
    box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  will-change: transform;
}
.btn--lg {
  --pad-x: 26px;
  --pad-y: 16px;
  font-size: 16px;
}
.btn--xl {
  --pad-x: 30px;
  --pad-y: 20px;
  font-size: 17px;
}
.btn--primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn--primary:active {
  transform: translateY(0);
}
.btn--ghost {
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

/* ───────────── NAVIGATION ───────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--container);
  margin: 16px auto 0;
  padding: 10px 14px 10px 16px;
  background: color-mix(in oklab, var(--bg-elev) 78%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  width: calc(100% - var(--gutter) * 2);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--r-pill);
}
.nav__logo {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 #fff8;
  overflow: hidden;
}
.nav__logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.nav__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.nav__name {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 15px;
}
.nav__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14.5px;
  font-weight: 500;
}
.nav__links a {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav__links a:hover {
  color: var(--ink);
  background: color-mix(in oklab, var(--ink) 5%, transparent);
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.theme-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  box-shadow: var(--shadow-xs);
}
.theme-toggle:hover {
  color: var(--ink);
  transform: rotate(15deg);
}
.theme-toggle__icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.theme-toggle__icon--moon {
  display: none;
}
[data-theme="dark"] .theme-toggle__icon--sun {
  display: none;
}
[data-theme="dark"] .theme-toggle__icon--moon {
  display: block;
}

@media (max-width: 880px) {
  .nav__links {
    display: none;
  }
  .nav__tag {
    display: none;
  }
}

/* ───────────── HERO ───────────── */
.hero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter) clamp(72px, 9vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}
.hero__inner {
  position: relative;
  z-index: 2;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  box-shadow: var(--shadow-xs);
}
.status-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--green);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.7);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.hero__title {
  margin: 0 0 22px;
  font-size: clamp(48px, 8.4vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 700;
}
.hero__title em {
  letter-spacing: -0.02em;
  font-size: 1.05em;
}

.hero__sub {
  max-width: 56ch;
  margin: 0 0 36px;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
}
.hero__sub strong {
  color: var(--ink);
  font-weight: 600;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  color: var(--ink-mute);
  font-size: 14px;
}
.hero__meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.hero__meta-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.hero__divider {
  width: 1px;
  height: 22px;
  background: var(--line-strong);
}

/* 3D card stage — stacks the 3D card with the location eyebrow that
   now lives under it, so the right-hand column reads as: card → label. */
.hero__stage {
  position: relative;
  perspective: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* The eyebrow that used to live above the hero title now hangs under
   the card, centered horizontally to its container. */
.hero__stage-eyebrow {
  align-self: center;
  margin: 0;
}
.card-3d {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  width: min(100%, 460px);
  /* Shorter overall box: the video inside is widescreen, so a square-ish
     halo just adds empty padding above and below the animation. */
  aspect-ratio: 1 / 0.7;
  border-radius: var(--r-xl);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1.2);
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}
.card-3d__halo {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    var(--green),
    var(--orange),
    var(--red),
    var(--green)
  );
  filter: blur(60px);
  opacity: 0.35;
  z-index: -1;
  animation: spin 22s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.card-3d__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-xl);
  background: #f3f1ef;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xl);
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
}
[data-theme="dark"] .card-3d__inner {
  background: #1c1c20;
}
.card-3d__inner::before {
  /* glossy rim highlight */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0) 30%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}
[data-theme="dark"] .card-3d__inner::before {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0) 30%
  );
}
.card-3d__top-dots {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  gap: 8px;
  z-index: 4;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 1px 1px rgba(0, 0, 0, 0.08);
}
.dot--green {
  background: var(--green);
}
.dot--orange {
  background: var(--orange);
}
.dot--red {
  background: var(--red);
}

/* Make the card-3d dots feel like real Mac window controls:
   tiny pop on hover, glyph reveal on group hover, with the green
   "maximize" dot getting a slightly stronger hover bump. */
.card-3d__top-dots .dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: rgba(20, 16, 12, 0.7);
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1.4),
    box-shadow 0.18s ease, background-color 0.18s ease;
}
.card-3d__top-dots .dot:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.dot__glyph {
  width: 8px;
  height: 8px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.card-3d__top-dots:hover .dot__glyph {
  opacity: 1;
}
.card-3d__top-dots .dot:hover {
  transform: translateY(-0.5px) scale(1.08);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    0 4px 10px rgba(20, 16, 12, 0.18);
}
.card-3d__top-dots .dot--green:hover {
  transform: translateY(-1px) scale(1.22);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    0 8px 18px -2px color-mix(in oklab, var(--green) 65%, transparent);
}
.card-3d__top-dots .dot:active {
  transform: translateY(0) scale(0.95);
}

/* Yellow "minimize" toggled state — keep the dot visibly "engaged" */
.card-3d__top-dots .dot--orange[aria-pressed="true"] {
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    0 0 0 2px color-mix(in oklab, var(--orange) 35%, transparent);
}

/* ─── Card window state (close → dock) ───
   Both the red ("close") and yellow ("minimize") dots use this same state:
   the card shrinks + fades in place, and the dock fades in below it.
   The card's layout box is preserved (transform only) so the hero doesn't
   reflow when the card disappears. */
.card-3d.is-closed {
  transform: rotateX(0) rotateY(0) scale(0.55);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.5, 0, 0.2, 1),
    opacity 0.3s ease;
  animation: none !important;
}
.card-3d.is-closed .card-3d__halo {
  opacity: 0;
}

/* When the card is opening back up out of the dock (entrance animation),
   override the transforms briefly so it eases back into place. */
.card-3d.is-restoring {
  animation: cardRestore 0.5s cubic-bezier(0.2, 0.7, 0.2, 1.05) both;
}
@keyframes cardRestore {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: rotateX(0) rotateY(0) scale(1);
    opacity: 1;
  }
}

/* ─── MAC-STYLE DOCK ───
   Lives inside .hero__stage and stays anchored to the area where the card
   normally sits — it does NOT follow the viewport when you scroll. */
.mac-dock {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%) translateY(14px) scale(0.92);
  z-index: 5;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 10px 14px 12px;
  border-radius: 22px;
  background: color-mix(in oklab, var(--bg-card) 62%, transparent);
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 24px 50px -12px rgba(20, 16, 12, 0.35),
    0 8px 20px -4px rgba(20, 16, 12, 0.22);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1.15),
    opacity 0.3s ease;
}
.mac-dock[hidden] {
  display: none;
}
.mac-dock.is-visible {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
[data-theme="dark"] .mac-dock {
  background: color-mix(in oklab, #1c1c20 60%, transparent);
  border-color: color-mix(in oklab, #34343c 70%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 24px 60px -12px rgba(0, 0, 0, 0.7),
    0 8px 20px -4px rgba(0, 0, 0, 0.5);
}
.mac-dock__item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1.4);
}
.mac-dock__item:hover {
  transform: translateY(-8px) scale(1.18);
}
.mac-dock__item:active {
  transform: translateY(-2px) scale(1.06);
}
.mac-dock__item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 14px;
}
.mac-dock__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(160deg, #ffffff, #f1ece2);
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 6px 14px -4px rgba(20, 16, 12, 0.35),
    0 2px 4px rgba(20, 16, 12, 0.12);
  overflow: hidden;
}
.mac-dock__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0) 45%
  );
  pointer-events: none;
}
.mac-dock__icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.mac-dock__indicator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.55;
  box-shadow: 0 0 6px color-mix(in oklab, var(--ink) 35%, transparent);
}
.mac-dock__label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 10px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mac-dock__label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -4px;
  border: 4px solid transparent;
  border-top-color: var(--ink);
}
.mac-dock__item:hover .mac-dock__label,
.mac-dock__item:focus-visible .mac-dock__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 540px) {
  .mac-dock {
    bottom: 10px;
    padding: 8px 10px 10px;
  }
  .mac-dock__icon {
    width: 44px;
    height: 44px;
  }
  .mac-dock__icon img {
    width: 32px;
    height: 32px;
  }
}
/* media stage that holds either the animation or the static fallback.
   Aspect ratio mirrors the actual logo animation (widescreen-ish), so
   the slot hugs the video content instead of letterboxing it inside a
   square area with lots of empty padding top and bottom. */
.card-3d__media {
  position: relative;
  width: 78%;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  transform: translateZ(40px);
}
.card-3d__video,
.card-3d__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  border-radius: 14px;
}
.card-3d__video {
  background: transparent;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1.1);
}
.card-3d__video:hover {
  transform: scale(1.01);
}
/* fallback image is shown only when the video can't / shouldn't play */
.card-3d__fallback {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-3d.use-static .card-3d__video {
  display: none;
}
.card-3d.use-static .card-3d__fallback {
  opacity: 1;
}

.card-3d__caption {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 11px;
  color: var(--ink-mute);
  z-index: 2;
}
.card-3d__caption-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  opacity: 0.85;
}
.card-3d__rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--red) 60%, transparent);
  animation: recPulse 1.6s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--red) 60%, transparent);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--red) 0%, transparent);
    opacity: 0.55;
  }
}
.card-3d.is-playing .card-3d__rec-dot {
  background: var(--green);
  animation-name: recPulseGreen;
}
@keyframes recPulseGreen {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--green) 60%, transparent);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--green) 0%, transparent);
    opacity: 0.55;
  }
}

/* ───────────── SOUND PILL ───────────── */
.sound-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 9px;
  background: color-mix(in oklab, var(--bg-elev) 80%, transparent);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  cursor: pointer;
  transform: translateZ(60px);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1.2),
    box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.sound-pill:hover {
  transform: translateZ(60px) translateY(-1px);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.sound-pill:active {
  transform: translateZ(60px) translateY(0);
}
[data-theme="dark"] .sound-pill {
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sound-pill__icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
}
.sound-pill__svg {
  width: 16px;
  height: 16px;
}
.sound-pill__svg--on {
  display: none;
}
.sound-pill[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.sound-pill[aria-pressed="true"] .sound-pill__svg--off {
  display: none;
}
.sound-pill[aria-pressed="true"] .sound-pill__svg--on {
  display: inline-block;
}

/* ───────────── STORY LINK (under hero CTAs) ───────────── */
.story-link {
  margin: 0 0 36px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--ink);
  border-radius: var(--r-pill);
  font: 500 14px/1 "Inter Tight", system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1.2),
    background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.story-link:hover {
  transform: translateY(-2px);
  background: var(--bg-elev);
  border-color: var(--ink);
  border-style: solid;
  box-shadow: var(--shadow-md);
}
.story-link__play {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 6px 14px rgba(20, 16, 12, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.25s ease;
}
.story-link__play svg {
  width: 9px;
  height: 11px;
  margin-left: 2px;
}
.story-link:hover .story-link__play {
  transform: scale(1.06);
}
.story-link__text {
  letter-spacing: -0.01em;
}
.story-link__sub {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* ───────────── REEL MODAL ───────────── */
.reel-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reel-modal[hidden] {
  display: none;
}
.reel-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.reel-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, #000 62%, transparent);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  border: 0;
  cursor: zoom-out;
  transition: backdrop-filter 0.4s ease;
}
.reel-modal__card {
  position: relative;
  width: min(92vw, 980px);
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.45),
    0 30px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1.1),
    opacity 0.3s ease;
}
.reel-modal.is-open .reel-modal__card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.reel-modal__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg-elev) 92%, transparent),
    var(--bg-elev)
  );
  border-bottom: 1px solid var(--line);
}
.reel-modal__dots {
  display: inline-flex;
  gap: 7px;
}
.reel-modal__title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.reel-modal__close {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.reel-modal__close:hover {
  transform: scale(1.06);
  background: var(--bg-elev);
}
.reel-modal__close svg {
  width: 14px;
  height: 14px;
}
.reel-modal__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.reel-modal__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.reel-modal__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--line);
}
.reel-modal__foot kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 4px;
  font: 500 10px/1.4 "JetBrains Mono", ui-monospace, monospace;
  color: var(--ink);
}

/* lock body scroll while modal is open */
body.reel-open,
body.project-open {
  overflow: hidden;
}

/* ───────────── PROJECT MODAL ─────────────
   Bigger, scrollable cousin of the reel-modal — used for project deep-dives
   (carousel + description + action buttons). */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 32px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.project-modal[hidden] {
  display: none;
}
.project-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.project-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, #000 62%, transparent);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  border: 0;
  cursor: zoom-out;
}
.project-modal__card {
  position: relative;
  width: min(96vw, 1080px);
  height: min(86vh, 760px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.45),
    0 30px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1.1),
    opacity 0.3s ease;
}
.project-modal.is-open .project-modal__card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.project-modal__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg-elev) 92%, transparent),
    var(--bg-elev)
  );
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.project-modal__title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.project-modal__close {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.project-modal__close:hover {
  transform: scale(1.06);
  background: var(--bg-elev);
}
.project-modal__close svg {
  width: 14px;
  height: 14px;
}
.project-modal__body {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.project-modal__details {
  padding: clamp(20px, 3vw, 36px);
  overflow-y: auto;
  scrollbar-gutter: stable;
  min-height: 0;
}
.project-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.project-modal__heading {
  margin: 0 0 10px;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-weight: 700;
}
.project-modal__lede {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
}
.project-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.project-modal__sections {
  display: grid;
  gap: 22px;
  padding-top: 22px;
  border-top: 1px dashed var(--line-strong);
}
.project-modal__section-title {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.project-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.project-modal__list li {
  position: relative;
  padding-left: 16px;
}
.project-modal__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--ink-mute);
}
.project-modal__list strong {
  color: var(--ink);
  font-weight: 600;
}
.project-modal__foot {
  margin: 24px 0 0;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

@media (max-width: 880px) {
  .project-modal__body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 44vh) 1fr;
  }
  .project-modal__details {
    padding: 20px;
  }
}

/* ───────────── GOOGLE PLAY BUTTON ───────────── */
.btn--play-store {
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px 10px 14px;
  gap: 12px;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  align-items: center;
}
.btn--play-store:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn--play-store:active {
  transform: translateY(0);
}
.btn__play-store-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.btn__play-store-text {
  display: inline-flex;
  flex-direction: column;
  text-align: left;
  line-height: 1;
}
.btn__play-store-eyebrow {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 3px;
}
.btn__play-store-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ───────────── CAROUSEL ─────────────
   Snap-scrolling viewport with centered prev/next and pagination dots.
   The viewport is forced to fit inside its grid cell so tall mobile-app
   screenshots scale down rather than overflowing the modal. */
.carousel {
  position: relative;
  background: linear-gradient(
    160deg,
    color-mix(in oklab, var(--bg-elev) 80%, transparent),
    color-mix(in oklab, var(--bg) 65%, transparent)
  );
  border-right: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.carousel__viewport {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: 0;
  height: 100%;
  /* Reserved padding inside the viewport so the slide image's drop-shadow
     can render beneath the slide bounds without being clipped at the section
     break. The shadow paints into the viewport's padding-box (which is still
     inside the overflow:hidden clip, so adjacent slides stay hidden during
     scroll). */
  padding-bottom: 38px;
}
.carousel__viewport::-webkit-scrollbar {
  display: none;
}
.carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  padding: 12px 16px 0;
  min-height: 0;
  /* overflow visible (instead of hidden) so the image's drop-shadow can
     extend down into the viewport's padding-bottom area instead of being
     clipped by the slide's "section break". */
  overflow: visible;
}
.carousel__slide img {
  display: block;
  max-width: 100%;
  /* Image fills most of the slide vertically, with breathing room for the
     prev/next arrows and pagination dots underneath. */
  max-height: clamp(360px, 70vh, 580px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 30px 60px -16px rgba(0, 0, 0, 0.45),
    0 12px 24px -8px rgba(0, 0, 0, 0.3);
  background: #000;
  cursor: zoom-in;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1.1);
}
.carousel__slide img:hover {
  transform: scale(1.015);
}
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--bg-card) 80%, transparent);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease, background 0.2s ease;
}
.carousel__btn:hover {
  background: var(--bg-card);
  transform: translateY(-50%) scale(1.06);
}
.carousel__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%);
}
.carousel__btn svg {
  width: 18px;
  height: 18px;
}
.carousel__btn--prev {
  left: 12px;
}
.carousel__btn--next {
  right: 12px;
}
.carousel__dots {
  position: relative;
  /* Sit above the slide image's drop-shadow that now extends into the
     carousel section's bottom strip. */
  z-index: 1;
  align-self: center;
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  margin: 4px auto 16px;
  background: color-mix(in oklab, var(--bg-card) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.carousel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: color-mix(in oklab, var(--ink) 25%, transparent);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}
.carousel__dot:hover {
  background: color-mix(in oklab, var(--ink) 50%, transparent);
}
.carousel__dot.is-active {
  background: var(--ink);
  width: 18px;
  border-radius: 999px;
}

@media (max-width: 880px) {
  .carousel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .carousel__slide {
    padding: 18px 16px 56px;
  }
  .carousel__btn {
    width: 36px;
    height: 36px;
  }
}

/* Make project cards visibly clickable (focusable + cursor + lift) */
.project--clickable {
  cursor: pointer;
  outline: none;
}
.project--clickable:focus-visible {
  box-shadow: var(--shadow-xl), 0 0 0 2px var(--ink);
}

/* ───────────── LIGHTBOX (zoomed-in screenshot carousel) ─────────────
   Centered active image, with the previous and next images peeking in on
   either side as a clear visual cue that more screenshots exist. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  cursor: zoom-out;
  transition: opacity 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lightbox[hidden] {
  display: none;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Horizontal scroll-snap carousel that fills the entire backdrop. */
.lightbox__viewport {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Pad the start/end so the first and last slides can still center. */
  padding-inline: 20vw;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.lightbox__viewport::-webkit-scrollbar {
  display: none;
}

.lightbox__slide {
  flex: 0 0 60vw;
  min-width: 60vw;
  height: 100vh;
  display: grid;
  place-items: center;
  /* Asymmetric vertical padding shifts the centered image up so it never
     overlaps the floating pagination dots strip pinned to the bottom. */
  padding-block: clamp(28px, 4vh, 56px) clamp(80px, 11vh, 120px);
  padding-inline: clamp(8px, 2vw, 28px);
  box-sizing: border-box;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.lightbox__slide img {
  display: block;
  max-width: 100%;
  /* Use viewport units so the image is always bounded — `max-height: 100%`
     can't resolve inside a grid auto-row, which would let tall portrait
     screenshots overflow off the bottom of the viewport. The clearance value
     also reserves room for the bottom dots pill so the image and dots never
     overlap. */
  max-height: calc(100vh - clamp(140px, 18vh, 220px));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6),
    0 20px 40px rgba(0, 0, 0, 0.4);
  /* Adjacent (peek) images dim slightly so the active one feels primary. */
  opacity: 0.45;
  transform: scale(0.92);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1.1);
  cursor: pointer;
  background: #000;
}
.lightbox__slide.is-active img {
  opacity: 1;
  transform: scale(1);
  cursor: default;
}

/* Slightly tighter slide width on smaller / portrait viewports so the peek
   is still readable. */
@media (max-width: 720px) {
  .lightbox__viewport {
    padding-inline: 14vw;
  }
  .lightbox__slide {
    flex-basis: 72vw;
    min-width: 72vw;
  }
}

/* ──────── Floating controls: close + prev/next ──────── */
.lightbox__close,
.lightbox__nav {
  position: fixed;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22);
}

.lightbox__close {
  top: clamp(16px, 3vh, 28px);
  right: clamp(16px, 3vw, 32px);
  width: 44px;
  height: 44px;
}
.lightbox__close:hover {
  transform: scale(1.06);
}
.lightbox__close svg {
  width: 18px;
  height: 18px;
}

.lightbox__nav {
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
}
.lightbox__nav:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.06);
}
.lightbox__nav:disabled {
  opacity: 0.25;
  cursor: default;
}
.lightbox__nav--prev {
  left: clamp(12px, 2vw, 36px);
}
.lightbox__nav--next {
  right: clamp(12px, 2vw, 36px);
}
.lightbox__nav svg {
  width: 22px;
  height: 22px;
}

/* Pagination dots — dark-mode counterpart to .carousel__dots, anchored to
   the bottom-center of the viewer. */
.lightbox__dots {
  position: fixed;
  left: 50%;
  bottom: clamp(18px, 3.5vh, 36px);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
}
.lightbox__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox__dot:hover {
  background: rgba(255, 255, 255, 0.6);
}
.lightbox__dot.is-active {
  background: #fff;
  transform: scale(1.2);
}
.lightbox__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body.lightbox-open {
  overflow: hidden;
}

/* scroll cue */
.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-mute);
  transition: color 0.2s;
}
.hero__scroll:hover {
  color: var(--ink);
}
.hero__scroll-line {
  width: 28px;
  height: 1px;
  background: currentColor;
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero__stage {
    order: -1;
    margin-bottom: 12px;
  }
  .card-3d {
    width: min(86%, 380px);
  }
  .hero__scroll {
    display: none;
  }
}

/* ───────────── SECTION DIVIDER (between major sections) ───────────── */
.section-divider {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section-divider::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ink-mute) 14%,
    var(--ink-mute) 86%,
    transparent
  );
}

/* Sections that immediately follow a divider can sit closer to it. */
.section-divider + main > .section:first-child,
.section-divider + .section {
  padding-top: clamp(36px, 5vw, 64px);
}

/* "What I build" section breaks out of the standard container so the
   pillar tiles can stretch nearly edge-to-edge. Vertical padding stays
   inherited from the global `.section` rule so it matches every other
   section seam on the page. */
.section--pillars {
  max-width: none;
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ───────────── PILLARS ───────────── */
.pillars {
  display: grid;
  /* Two pillars per row, two rows — each tile takes half the available
     width so the copy and bullets get more room to breathe. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 540px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}
.pillar {
  position: relative;
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1.2),
    box-shadow 0.3s ease;
  overflow: hidden;
}
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0) 40%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
}
[data-theme="dark"] .pillar::before {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0) 40%
  );
}
.pillar:hover {
  transform: translateY(-6px);
}
.pillar--green:hover {
  box-shadow: var(--shadow-lg), var(--shadow-glow-green);
}
.pillar--orange:hover {
  box-shadow: var(--shadow-lg), var(--shadow-glow-orange);
}
.pillar--red:hover {
  box-shadow: var(--shadow-lg), var(--shadow-glow-red);
}
.pillar--blue:hover {
  box-shadow: var(--shadow-lg), var(--shadow-glow-blue);
}
.pillar__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.pillar__icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke-width: 2;
}
.pillar--green .pillar__icon {
  background: color-mix(in oklab, var(--green) 18%, var(--bg-card));
}
.pillar--green .pillar__icon svg {
  stroke: var(--green);
}
.pillar--orange .pillar__icon {
  background: color-mix(in oklab, var(--orange) 22%, var(--bg-card));
}
.pillar--orange .pillar__icon svg {
  stroke: var(--orange);
}
.pillar--red .pillar__icon {
  background: color-mix(in oklab, var(--red) 18%, var(--bg-card));
}
.pillar--red .pillar__icon svg {
  stroke: var(--red);
}
.pillar--blue .pillar__icon {
  background: color-mix(in oklab, var(--blue) 18%, var(--bg-card));
}
.pillar--blue .pillar__icon svg {
  stroke: var(--blue);
}
.pillar h3 {
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.pillar p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}
.pillar__list {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px dashed var(--line-strong);
  font-size: 14px;
  color: var(--ink-mute);
  display: grid;
  gap: 6px;
}
.pillar__list li::before {
  content: "→ ";
  color: var(--ink-soft);
}

@media (max-width: 1080px) {
  .pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* ───────────── WORK GRID ───────────── */
.grid--work {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.project {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1.1),
    box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
}
.project:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}
.project__art {
  position: relative;
  background: linear-gradient(
    160deg,
    color-mix(in oklab, var(--bg) 60%, transparent),
    var(--bg-elev)
  );
  border-bottom: 1px solid var(--line);
  padding: 28px 24px;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
}
.project__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 120%,
    rgba(0, 0, 0, 0.06),
    transparent 60%
  );
  pointer-events: none;
}
.project__art svg {
  width: 100%;
  height: auto;
  max-height: 240px;
  filter: drop-shadow(0 12px 20px rgba(20, 16, 12, 0.1))
    drop-shadow(0 4px 8px rgba(20, 16, 12, 0.06));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1.1);
}
.project:hover .project__art svg {
  transform: translateY(-4px) scale(1.02);
}

/* Logo-style project art (e.g. Texas Word'em app icon) — fills more of the
   tile, clipped to a soft square for a launcher-icon vibe. */
.project__art--logo {
  padding: 0;
  min-height: 240px;
}
.project__art--logo img {
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1.1);
}
.project__art--texas-wordem {
  background: #0e6e3f;
}
/* The promo composition (logo + tagline + laptop screenshot) is meant
   to be read whole, not cropped — and its own background already
   matches the tile's #0e6e3f, so contain blends seamlessly. */
.project__art--texas-wordem img {
  object-fit: contain;
}

/* Same treatment for Neon Slingshot — the promo is a complete
   composition (title + hand-tracking screenshot) on a dark navy stage,
   so we contain rather than crop and fill any leftover space with a
   matching deep navy that blends into the image edges. */
.project__art--slingshot {
  background: #0a0a14;
}
.project__art--slingshot img {
  object-fit: contain;
}
.project__art--schedule {
  background: #3b0790;
}
.project__art--schedule img {
  object-fit: contain;
}
.project:hover .project__art--logo img {
  transform: scale(1.04);
}

.project__body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.tag--green {
  background: color-mix(in oklab, var(--green) 15%, var(--bg-card));
  border-color: color-mix(in oklab, var(--green) 35%, var(--line));
  color: color-mix(in oklab, var(--green) 70%, var(--ink));
}
.tag--orange {
  background: color-mix(in oklab, var(--orange) 18%, var(--bg-card));
  border-color: color-mix(in oklab, var(--orange) 40%, var(--line));
  color: color-mix(in oklab, var(--orange) 50%, var(--ink));
}
.tag--red {
  background: color-mix(in oklab, var(--red) 15%, var(--bg-card));
  border-color: color-mix(in oklab, var(--red) 35%, var(--line));
  color: color-mix(in oklab, var(--red) 60%, var(--ink));
}
.project__title {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.025em;
  font-weight: 700;
  line-height: 1.1;
}
.project__desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.project__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
}
.project__cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: transform 0.2s;
}
.project:hover .project__cta {
  transform: translateX(4px);
}

@media (max-width: 1080px) {
  .grid--work {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .grid--work {
    grid-template-columns: 1fr;
  }
}

/* Client systems strip */
.client-strip {
  margin-top: 32px;
  padding: 24px 28px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--bg-elev) 60%, transparent);
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 24px;
}
.client-strip__title {
  font-size: 13px;
}
.client-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.client-strip__list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 700px) {
  .client-strip {
    grid-template-columns: 1fr;
  }
}

/* ───────────── PRINCIPLES ───────────── */
.principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.principle {
  position: relative;
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.principle:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.principle__num {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 11px;
  background: var(--bg);
  border-radius: var(--r-pill);
  font-size: 11px;
  border: 1px solid var(--line);
}
.principle h3 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.principle p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .principles {
    grid-template-columns: 1fr;
  }
}

/* ───────────── TESTIMONIALS ─────────────
   Three quote cards in a row that quietly cycle through the brand
   accent palette (green / orange / blue). The big quote-mark sits as
   a soft watermark behind the text so each card reads like a real
   pull-quote without leaning on a chunky icon. */
.section--testimonials {
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in oklab, var(--bg-elev) 55%, transparent) 18%,
    color-mix(in oklab, var(--bg-elev) 55%, transparent) 82%,
    transparent 100%
  );
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: clamp(36px, 5vw, 56px);
}
@media (max-width: 880px) {
  .testimonials {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.testimonial {
  position: relative;
  padding: 30px 28px 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1.05),
    box-shadow 0.3s ease, border-color 0.3s ease;
}
.testimonial:hover,
.testimonial:focus-within {
  transform: translateY(-3px);
}

/* Decorative open-quote watermark, tinted by accent variant.
   The glyph has heavy descenders, so we set it to display as a block
   element and use a fixed height + line-height that contains the full
   character within the card padding (no top-clipping). */
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 14px;
  left: 22px;
  display: block;
  font-family: var(--font-serif);
  font-size: 80px;
  line-height: 0.85;
  height: 56px;
  color: color-mix(in oklab, var(--ink-mute) 22%, transparent);
  pointer-events: none;
  user-select: none;
}

.testimonial__quote {
  position: relative;
  margin: 50px 0 22px;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
  flex: 1;
}

.testimonial__byline {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}
.testimonial__name {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.testimonial__role {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* Accent variants — quote-mark watermark + hover glow color. */
.testimonial--green::before {
  color: color-mix(in oklab, var(--green) 38%, transparent);
}
.testimonial--green:hover {
  border-color: color-mix(in oklab, var(--green) 40%, var(--line));
  box-shadow: var(--shadow-glow-green);
}

.testimonial--orange::before {
  color: color-mix(in oklab, var(--orange) 38%, transparent);
}
.testimonial--orange:hover {
  border-color: color-mix(in oklab, var(--orange) 40%, var(--line));
  box-shadow: var(--shadow-glow-orange);
}

.testimonial--blue::before {
  color: color-mix(in oklab, var(--blue) 38%, transparent);
}
.testimonial--blue:hover {
  border-color: color-mix(in oklab, var(--blue) 40%, var(--line));
  box-shadow: var(--shadow-glow-blue);
}

/* ───────────── ABOUT ───────────── */
.about {
  display: grid;
  /* Photo column is intentionally narrower so the polaroid reads as
     a quiet aside, not a competing visual. */
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.postcard {
  position: relative;
  /* Hard cap keeps the polaroid from getting bigger than it needs to
     be on wider viewports, even if its column has room. */
  max-width: 280px;
  margin-inline: 0 auto;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  transform: rotate(-2deg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.postcard:hover {
  transform: rotate(0deg);
  box-shadow: var(--shadow-xl);
}
.postcard__sticker {
  position: absolute;
  top: -14px;
  right: 18px;
  display: flex;
  gap: 7px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.postcard__art {
  width: 100%;
  /* Portrait frame — sized so the postcard stays in proportion to the
     copy it sits next to. object-fit: cover keeps the subject centered
     and clean regardless of the source image's native aspect ratio. */
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: var(--r-md);
  display: block;
  background: var(--bg-elev);
}
.postcard__caption {
  display: flex;
  flex-direction: column;
  padding: 16px 8px 8px;
  font-size: 14px;
  line-height: 1.4;
}
.postcard__caption strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.about__copy h2 {
  margin-bottom: 22px;
}
.about__copy p {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 16px;
  line-height: 1.65;
}
.facts {
  margin: 32px 0 0;
  display: grid;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.facts__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: baseline;
  font-size: 15px;
}
.facts__row dt {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: lowercase;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.facts__row dd {
  margin: 0;
  color: var(--ink);
}

@media (max-width: 880px) {
  .about {
    grid-template-columns: 1fr;
  }
  .facts__row {
    grid-template-columns: 100px 1fr;
  }
}

/* ───────────── CTA ───────────── */
.section--cta {
  padding-bottom: clamp(80px, 12vw, 160px);
}
.cta {
  position: relative;
  text-align: center;
  padding: clamp(56px, 10vw, 120px) clamp(28px, 6vw, 80px);
  border-radius: var(--r-xl);
  background: linear-gradient(
    160deg,
    var(--bg-card) 0%,
    color-mix(in oklab, var(--orange) 8%, var(--bg-card)) 100%
  );
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.cta::before {
  /* deco gradient burst */
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse,
    color-mix(in oklab, var(--green) 25%, transparent) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.cta::after {
  content: "";
  position: absolute;
  bottom: -50%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(
    ellipse,
    color-mix(in oklab, var(--red) 20%, transparent) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.cta > * {
  position: relative;
  z-index: 1;
}
.cta__kicker {
  display: inline-block;
  margin-bottom: 18px;
}
.cta__title {
  margin: 0 0 18px;
  font-size: clamp(40px, 7vw, 84px);
  letter-spacing: -0.04em;
  line-height: 1;
  font-weight: 700;
}
.cta__lede {
  max-width: 56ch;
  margin: 0 auto 36px;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink-soft);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
}
.cta__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.cta__bullets li {
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);
}

/* ───────────── FOOTER ───────────── */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  padding: 48px var(--gutter);
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__name {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.footer__tag {
  font-size: 12px;
  color: var(--ink-mute);
}
.footer__links {
  display: flex;
  gap: 24px;
  font-size: 14.5px;
  color: var(--ink-soft);
  justify-content: center;
}
.footer__links a:hover {
  color: var(--ink);
}
.footer__meta {
  text-align: right;
  font-size: 12px;
}

@media (max-width: 760px) {
  .footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer__links {
    justify-content: center;
  }
  .footer__meta {
    text-align: center;
  }
}

/* ───────────── SCROLL REVEAL ───────────── */
/* Items only become hidden once JS opts-in via .reveal-ready on the root.
   If JS never runs, the page stays fully visible — graceful degradation. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.9s ease;
}
.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ───────────────────────────────────────────────────────────
   SERVICES & PRICING — Fiverr-ish service grid with a quote
   builder modal. Visitors tap a service tile, toggle add-ons,
   and watch a live estimate vs. typical-agency comparison.
   ─────────────────────────────────────────────────────────── */
.section--services-shop {
  padding-block: clamp(72px, 9vw, 130px);
}

/* Single-column stack of wide-and-short rows. Each card spans the
   full width of the section so the icon, copy, price, and CTA sit
   on one horizontal line at desktop sizes. */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
}

/* Each card is a real <button> so the whole tile is clickable
   (and keyboard-focusable) without nested-interactive issues. */
.service-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 18px 24px;
  gap: 22px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1.05),
    box-shadow 0.3s ease, border-color 0.3s ease;
  font: inherit;
  color: inherit;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-3px);
  outline: none;
}

.service-card__icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--bg);
  transition: color 0.25s ease, border-color 0.25s ease,
    background 0.25s ease;
}
.service-card__icon svg {
  width: 22px;
  height: 22px;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.service-card__title {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.service-card__tagline {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

.service-card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
}
.service-card__price-amount {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.service-card__price-unit {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.service-card__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
  transition: color 0.2s ease, transform 0.25s ease;
  white-space: nowrap;
}
.service-card:hover .service-card__cta,
.service-card:focus-visible .service-card__cta {
  color: var(--ink);
  transform: translateX(4px);
}

/* Accent variants — color the icon chip + hover glow to match the dot palette. */
.service-card--green .service-card__icon {
  color: var(--green);
  border-color: color-mix(in oklab, var(--green) 28%, var(--line));
}
.service-card--green:hover,
.service-card--green:focus-visible {
  box-shadow: var(--shadow-glow-green);
  border-color: color-mix(in oklab, var(--green) 40%, var(--line));
}
.service-card--green:hover .service-card__icon {
  background: color-mix(in oklab, var(--green) 12%, var(--bg));
}

.service-card--orange .service-card__icon {
  color: var(--orange);
  border-color: color-mix(in oklab, var(--orange) 28%, var(--line));
}
.service-card--orange:hover,
.service-card--orange:focus-visible {
  box-shadow: var(--shadow-glow-orange);
  border-color: color-mix(in oklab, var(--orange) 40%, var(--line));
}
.service-card--orange:hover .service-card__icon {
  background: color-mix(in oklab, var(--orange) 12%, var(--bg));
}

.service-card--blue .service-card__icon {
  color: var(--blue);
  border-color: color-mix(in oklab, var(--blue) 28%, var(--line));
}
.service-card--blue:hover,
.service-card--blue:focus-visible {
  box-shadow: var(--shadow-glow-blue);
  border-color: color-mix(in oklab, var(--blue) 40%, var(--line));
}
.service-card--blue:hover .service-card__icon {
  background: color-mix(in oklab, var(--blue) 12%, var(--bg));
}

.service-card--red .service-card__icon {
  color: var(--red);
  border-color: color-mix(in oklab, var(--red) 28%, var(--line));
}
.service-card--red:hover,
.service-card--red:focus-visible {
  box-shadow: var(--shadow-glow-red);
  border-color: color-mix(in oklab, var(--red) 40%, var(--line));
}
.service-card--red:hover .service-card__icon {
  background: color-mix(in oklab, var(--red) 12%, var(--bg));
}

/* ─── "or" divider above the hourly card ───
   Pulls the eye away from the project list and signals that what
   follows is a different kind of offering, not just another item. */
.services-grid__or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 4px;
  color: var(--ink-mute);
}
.services-grid__or::before,
.services-grid__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in oklab, var(--line) 100%, transparent),
    transparent
  );
}
.services-grid__or-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.85;
}

/* ─── Hourly card: Apple-style light gray "off-menu" option ───
   Soft cool light gray, clearly distinct from the white project cards
   above without losing the airy feel. Green stays as the only accent. */
.service-card--hourly {
  background: linear-gradient(180deg, #f0f0f3 0%, #e6e6ea 100%);
  border-color: #d8d8de;
  border-width: 1.5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 6px 18px -14px rgba(20, 20, 30, 0.18);
}
.service-card--hourly .service-card__title {
  color: #1d1d1f;
}
.service-card--hourly .service-card__tagline {
  color: #4a4a52;
}
.service-card--hourly .service-card__icon {
  background: color-mix(in oklab, var(--green) 14%, #ffffff);
  color: var(--green);
  border-color: color-mix(in oklab, var(--green) 38%, #d8d8de);
}
.service-card--hourly .service-card__price-amount {
  color: var(--green);
}
.service-card--hourly .service-card__price-unit {
  color: color-mix(in oklab, var(--green) 50%, #4a4a52);
}
.service-card--hourly .service-card__cta {
  color: color-mix(in oklab, var(--green) 65%, #1d1d1f);
}
.service-card--hourly:hover,
.service-card--hourly:focus-visible {
  border-color: color-mix(in oklab, var(--green) 50%, #d8d8de);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 12px 30px -18px color-mix(in oklab, var(--green) 60%, transparent),
    0 4px 16px -10px rgba(20, 20, 30, 0.2);
}
.service-card--hourly:hover .service-card__icon {
  background: color-mix(in oklab, var(--green) 22%, #ffffff);
}
.service-card--hourly:hover .service-card__cta {
  color: var(--green);
}

.services-foot {
  text-align: center;
  margin: 28px auto 0;
  max-width: 640px;
  font-size: 12.5px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* Below the desktop sweet spot, drop the price/CTA onto a second
   line so titles and taglines never get crushed. */
@media (max-width: 720px) {
  .service-card {
    flex-wrap: wrap;
    padding: 18px 20px;
    gap: 14px 18px;
  }
  .service-card__body {
    flex: 1 1 200px;
  }
  .service-card__foot {
    flex-basis: 100%;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px dashed var(--line-strong);
  }
}

/* ─────────── SERVICE QUOTE BUILDER MODAL ─────────── */
body.service-modal-open {
  overflow: hidden;
}

.service-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 32px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.service-modal[hidden] {
  display: none;
}
.service-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.service-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, #000 62%, transparent);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  border: 0;
  cursor: zoom-out;
}

.service-modal__card {
  position: relative;
  width: min(96vw, 1000px);
  height: min(88vh, 760px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.45),
    0 30px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1.1),
    opacity 0.3s ease;
}
.service-modal.is-open .service-modal__card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.service-modal__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg-elev) 92%, transparent),
    var(--bg-elev)
  );
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.service-modal__title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.service-modal__close {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.service-modal__close:hover {
  transform: scale(1.06);
  background: var(--bg-elev);
}
.service-modal__close svg {
  width: 14px;
  height: 14px;
}

.service-modal__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  flex: 1;
  min-height: 0;
}

.service-modal__features {
  padding: clamp(20px, 3vw, 36px);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  scrollbar-gutter: stable;
  min-height: 0;
}
.service-modal__heading {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.025em;
  font-weight: 700;
  line-height: 1.1;
}
.service-modal__lede {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.service-modal__base {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 26px;
  background: var(--bg);
}
.service-modal__base-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.service-modal__base-label {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.service-modal__base-price {
  font-size: 13px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.service-modal__base-price strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-left: 4px;
}
.service-modal__base-desc {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.service-modal__section-title {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

.service-modal__feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.service-modal__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease,
    transform 0.15s ease;
}
.service-modal__feature:hover {
  background: var(--bg-elev);
  border-color: var(--line-strong);
}
.service-modal__feature:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 14%, transparent);
}
.service-modal__feature.is-on {
  border-color: color-mix(in oklab, var(--green) 60%, var(--line));
  background: color-mix(in oklab, var(--green) 10%, var(--bg-card));
}
.service-modal__feature-check {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid var(--line-strong);
  background: var(--bg);
  flex-shrink: 0;
  color: white;
  transition: background 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease;
}
.service-modal__feature.is-on .service-modal__feature-check {
  background: var(--green);
  border-color: var(--green);
  transform: scale(1.04);
}
.service-modal__feature-check svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.service-modal__feature.is-on .service-modal__feature-check svg {
  opacity: 1;
}
.service-modal__feature-label {
  flex: 1;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.35;
}
.service-modal__feature-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* The right pane uses a soft blue tint + a top accent strip so the
   "summary" feels distinct from the "configurator" without resorting to
   a heavy black estimate block. */
.service-modal__estimate {
  position: relative;
  padding: clamp(22px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: color-mix(in oklab, var(--blue) 7%, var(--bg));
  overflow-y: auto;
  scrollbar-gutter: stable;
  min-height: 0;
}
.service-modal__estimate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blue);
}

/* ── Live estimate (the headline number) ── */
.estimate-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.estimate-panel__label {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.estimate-panel__total {
  font-size: clamp(40px, 5.4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1.4);
  transform-origin: left center;
}
.estimate-panel.is-bumping .estimate-panel__total {
  transform: scale(1.06);
}
.estimate-panel__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in oklab, var(--blue) 22%, var(--line));
}
.estimate-panel__meta-label {
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.estimate-panel__meta-value {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Side-by-side "you vs typical agency" comparison ── */
.compare-panel {
  background: var(--bg-card);
  border: 1px solid color-mix(in oklab, var(--blue) 20%, var(--line));
  border-radius: var(--r-md);
  padding: 14px 16px 12px;
}
.compare-panel__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.compare-panel__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.compare-panel__col--agency {
  text-align: right;
}
.compare-panel__label {
  font-size: 9.5px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.compare-panel__amount {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.compare-panel__amount--strike {
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--red) 60%, var(--ink-mute));
  text-decoration-thickness: 2px;
}
.compare-panel__divider {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.compare-panel__savings {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  text-align: center;
  font-size: 12.5px;
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.service-modal__cta {
  margin-top: auto;
  width: 100%;
  text-align: center;
  justify-content: center;
}
.service-modal__fineprint {
  margin: -2px 0 0;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-align: center;
}

@media (max-width: 880px) {
  .service-modal__body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow-y: auto;
  }
  .service-modal__features,
  .service-modal__estimate {
    overflow: visible;
    border-right: 0;
  }
  .service-modal__features {
    border-bottom: 1px solid var(--line);
  }
  .service-modal__card {
    height: auto;
    max-height: 92vh;
  }
}

/* ─────────── CONTACT FORM MODAL ───────────
   Same chrome/backdrop language as the service modal so all popups
   on the page feel like one family. Single-column form layout. */
body.contact-modal-open {
  overflow: hidden;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 32px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.contact-modal[hidden] {
  display: none;
}
.contact-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, #000 62%, transparent);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  border: 0;
  cursor: zoom-out;
}

.contact-modal__card {
  position: relative;
  width: min(96vw, 720px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.45),
    0 30px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1.1),
    opacity 0.3s ease;
}
.contact-modal.is-open .contact-modal__card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.contact-modal__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg-elev) 92%, transparent),
    var(--bg-elev)
  );
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.contact-modal__title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.contact-modal__close {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.contact-modal__close:hover {
  transform: scale(1.06);
  background: var(--bg-elev);
}
.contact-modal__close svg {
  width: 14px;
  height: 14px;
}

.contact-modal__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(22px, 3.2vw, 36px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.contact-modal__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-modal__heading {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.025em;
  font-weight: 700;
  line-height: 1.15;
}
.contact-modal__lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

.contact-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-field--half {
  grid-column: span 1;
}
.contact-field--full {
  grid-column: 1 / -1;
}
.contact-field__label {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.contact-field__input {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease;
  appearance: none;
  -webkit-appearance: none;
}
/* Custom dropdown chevron for selects (since we strip native styling). */
select.contact-field__input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2378716c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.contact-field__input:hover {
  border-color: var(--line-strong);
}
.contact-field__input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 14%, transparent);
  background: var(--bg-card);
}
.contact-field__input--textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
/* Only flag invalid fields after the user has actually interacted with
   them — :user-invalid avoids the "everything is red on first open"
   problem that :invalid causes on required, empty inputs. */
.contact-field__input:user-invalid:not(:focus) {
  border-color: color-mix(in oklab, var(--red, #d23b3b) 60%, var(--line));
  box-shadow: 0 0 0 3px
    color-mix(in oklab, var(--red, #d23b3b) 12%, transparent);
}

.contact-modal__foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.contact-modal__fineprint {
  margin: 0;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-align: center;
}
.contact-modal__submit {
  width: 100%;
  text-align: center;
  justify-content: center;
}

@media (max-width: 620px) {
  .contact-modal__grid {
    grid-template-columns: 1fr;
  }
  .contact-field--half {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .blob,
  .card-3d,
  .card-3d__rec-dot {
    animation: none !important;
  }
  /* No autoplay film when motion is reduced — show the still mark instead. */
  .card-3d__video {
    display: none;
  }
  .card-3d__fallback {
    opacity: 1;
  }
  .card-3d__caption-rec {
    display: none;
  }
}