/* ---------- Reset & Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Palette sampled from the provided Behance color reference */
  --bg: #181A1C;
  --bg-alt: #1F2123;
  --surface: #232527;
  --surface-2: #2A2C2E;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.18);
  --text: #F4F2EE;
  --text-dim: #A5A29C;
  --text-faint: #6E6B66;
  --accent: #A88551;
  --accent-2: #C7A876;
  --accent-3: #8B6B3E;
  --accent-soft: rgba(168,133,81,0.16);
  --radius: 14px;
  --container: 1180px;
  --ff-head: 'Switzer', sans-serif;
  --ff-body: 'Switzer', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--ff-head); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.035;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

/* ---------- Giant display heading (Dribbble-style section moments) ---------- */
.giant-heading {
  font-family: var(--ff-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  font-size: clamp(44px, 8.5vw, 130px);
  color: var(--text);
}
.giant-heading::after {
  content: '';
  display: block;
  width: 110px;
  height: 4px;
  margin-top: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-3), var(--accent), var(--accent-2));
}

/* ---------- Editor notes — describe intended copy, not final copy ---------- */
.editor-note {
  display: block;
  margin-top: 18px;
  padding: 12px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  font-style: italic;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 580px;
}
.editor-note::before {
  content: 'Note — ';
  font-style: normal;
  font-weight: 700;
  color: var(--accent-2);
}
.editor-note-tight {
  font-size: 13px;
  padding: 10px 14px;
  margin-top: 14px;
  max-width: none;
}
.editor-note-center {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Dynamic copy — sourced from /content/*.txt, plain body text
   (no placeholder box) since it's meant to become real, final copy. ---------- */
.hero-note {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
  max-width: 480px;
  text-align: left;
  margin-top: 20px;
}
.work-note {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
  max-width: 560px;
  margin-top: 14px;
}
.contact-note {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
  max-width: 480px;
  margin-top: 10px;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Swoosh reveal — Selected Work and everything below it.
   Same reveal mechanism as above, just a snappier, more dynamic entrance
   (more travel + a touch of scale, quicker snap-into-place easing). ---------- */
.portfolio .reveal,
.clients .reveal,
.contact .reveal {
  transform: translateY(42px) scale(0.96);
  transition: opacity 0.5s cubic-bezier(.16,.84,.44,1), transform 0.55s cubic-bezier(.16,.84,.44,1);
}
.portfolio .reveal.in-view,
.clients .reveal.in-view,
.contact .reveal.in-view {
  transform: translateY(0) scale(1);
}

/* Portfolio tiles swoosh in with a slight per-column stagger so a row
   cascades in left-to-right rather than popping in all at once. */
.portfolio-item:nth-child(4n+2) { transition-delay: 0.06s; }
.portfolio-item:nth-child(4n+3) { transition-delay: 0.12s; }
.portfolio-item:nth-child(4n+4) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .portfolio .reveal,
  .clients .reveal,
  .contact .reveal {
    transition-delay: 0s !important;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  backdrop-filter: blur(12px);
  background: rgba(24,26,28,0.55);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--border);
  background: rgba(24,26,28,0.88);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--ff-head); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.brand-sub { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }

.main-nav { display: flex; align-items: center; gap: 36px; }
.main-nav a { font-size: 14px; font-weight: 500; color: var(--text-dim); transition: color 0.2s ease; }
.main-nav a:hover { color: var(--text); }
.nav-cta {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text) !important;
}
.nav-cta:hover { border-color: var(--accent); color: var(--accent) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero — full-bleed video ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, var(--bg-alt) 0%, var(--bg) 75%);
}
.hero-media {
  position: absolute;
  inset: 0;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,26,28,0.55) 0%, rgba(24,26,28,0.35) 45%, rgba(24,26,28,0.8) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}
.hero-content .giant-heading {
  font-size: clamp(38px, 9vw, 128px);
}
.hero-content .giant-heading::after {
  margin-left: auto;
  margin-right: auto;
}

.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 24px;
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.scroll-cue span {
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  animation: scrollcue 1.8s ease infinite;
}
@keyframes scrollcue {
  0% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px); }
}

/* ---------- Section shared ---------- */
section { padding: 120px 0; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 4px; text-transform: none; }

/* ---------- Services — stacked sticky panels ----------
   Each .service-visual pins, and immediately begins scaling down + blurring
   — no static "dwell", constant movement. The next panel's visual (higher
   z-index) is already peeking in at the bottom edge when the current one
   arrives, and rises to fully cover it exactly as the current one finishes
   receding. The last panel is excluded from the shrink/blur — it only
   ever covers, never gets covered. */
.services { background: var(--bg-alt); padding-bottom: 0; }
.grid { display: grid; gap: 24px; }

.service-panels {
  position: relative;
  /* Side margins so the visual doesn't run edge-to-edge. */
  padding: 0 clamp(14px, 3.5vw, 56px);
}
.service-panel {
  position: relative;
  /* visualHeight (88vh) + scrollRange (88vh) — the next panel peeks in at
     the bottom the moment this one arrives, and fully covers it exactly
     when this one finishes its transition. */
  height: 176vh;
}
.service-panel:last-child {
  /* Just barely more than the visual itself — a longer pin here would
     read as a dead pause since this panel never animates. */
  height: 94vh;
}
.service-panel:not(:first-child) {
  margin-top: -88vh;
}
.service-panel:nth-child(1) .service-visual { z-index: 1; }
.service-panel:nth-child(2) .service-visual { z-index: 2; }
.service-panel:nth-child(3) .service-visual { z-index: 3; }
.service-panel:nth-child(4) .service-visual { z-index: 4; }

.service-visual {
  position: sticky;
  top: 0;
  width: 100%;
  height: 88vh;
  border-radius: var(--radius);
  overflow: hidden;
  will-change: transform, filter, opacity;
}
.service-visual-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-visual-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  padding: 0 32px;
}
.service-visual-title {
  font-family: var(--ff-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(30px, 6vw, 84px);
  color: var(--text);
  text-shadow: 0 8px 40px rgba(0,0,0,0.45);
}
.service-visual-desc {
  display: block;
  max-width: 520px;
  padding: 12px 18px;
  border-radius: 10px;
  background: rgba(10,9,7,0.45);
  backdrop-filter: blur(8px);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .service-visual { transform: none !important; filter: none !important; }
}

@media (max-width: 720px) {
  .service-panels { padding: 0 14px; }
  .service-visual-content { gap: 16px; }
}

/* ---------- Portfolio — full-bleed grid, no filters ---------- */
.portfolio { background: var(--bg); padding-top: 48px; padding-bottom: 0; }
.portfolio-head { margin-bottom: 56px; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 13px;
  width: 100%;
}
.portfolio-item {
  position: relative;
  grid-column: span 1;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  display: block;
  width: 100%;
}
.portfolio-item.wide {
  grid-column: span 2;
  /* Fallback height (used for first paint, and for the rare case a wide
     tile ends up alone in its row with no tall sibling) — JS measures its
     row's tall tiles and overrides this with an exact pixel match. */
  aspect-ratio: 3 / 2;
}
.portfolio-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.portfolio-media {
  position: absolute;
  inset: 0;
  transition: transform 0.7s cubic-bezier(.16,.84,.44,1);
}
.portfolio-item:hover .portfolio-media,
.portfolio-item:focus-visible .portfolio-media {
  transform: scale(1.045);
}
.portfolio-media-primary,
.portfolio-media-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portfolio-media-hover {
  opacity: 0;
  transition: opacity 0.5s ease;
}
@media (hover: hover) and (pointer: fine) {
  .portfolio-item:hover .portfolio-media-hover {
    opacity: 1;
  }
}
.portfolio-item:focus-visible .portfolio-media-hover {
  opacity: 1;
}

/* Shared gradient palette — still used by the Services scroll panels */
.tile-product { background: linear-gradient(135deg, #3a2f18, #1d160a); }
.tile-product.alt { background: linear-gradient(135deg, #2c2412, #17130a); }
.tile-sim { background: linear-gradient(135deg, #142b30, #0b1618); }
.tile-sim.alt { background: linear-gradient(135deg, #10262c, #0a1518); }
.tile-scan { background: linear-gradient(135deg, #24202e, #131118); }
.tile-vfx { background: linear-gradient(135deg, #301419, #16090c); }
.tile-tools { background: linear-gradient(135deg, #1c2416, #0f130a); }

.portfolio-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding: 28px;
  background: linear-gradient(180deg, transparent 45%, rgba(10,9,7,0.78) 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.portfolio-item:focus-visible .portfolio-caption {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
  .portfolio-item:hover .portfolio-caption {
    opacity: 1;
    transform: translateY(0);
  }
}
.tile-tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 6px;
}
.tile-title { font-family: var(--ff-head); font-weight: 700; font-size: 18px; color: var(--text); }

/* ---------- Clients — logo marquee, populated from /clients/ ---------- */
.clients { background: var(--bg-alt); padding: 90px 0; }
.clients-label {
  text-align: center;
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 32px;
}
.marquee {
  overflow: hidden;
  padding: 30px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 56s linear infinite;
}
.marquee-group {
  display: flex;
  flex-shrink: 0;
}
.marquee-unit {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee-logo {
  height: clamp(38px, 4.2vw, 52px);
  width: auto;
  margin: 0 32px;
  filter: grayscale(1) brightness(1.7);
  opacity: 0.75;
  transition: opacity 0.25s ease;
}
.marquee-logo:hover { opacity: 1; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- Stats — sits under the client marquee ---------- */
.stats {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: start;
  padding-top: 64px;
}
.stats-left { display: flex; flex-direction: column; }
.stats-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.stats-number {
  font-family: var(--ff-head);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.9;
  color: var(--text);
}
.stats-suffix {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--text);
  margin-top: 6px;
}
.stats-desc {
  max-width: 560px;
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
}
.stats-est {
  justify-self: end;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr; gap: 24px; }
  .stats-est { justify-self: start; }
}

/* ---------- Contact ---------- */
.contact { background: var(--bg); }

/* Heading spans the full width, single line, sitting above the photo/form row. */
.contact-heading {
  font-size: clamp(28px, 4.4vw, 76px);
  margin-bottom: 48px;
  white-space: nowrap;
}

/* Photo | form row — the photo has no aspect-ratio of its own, it stretches
   (via grid's default align-items:stretch) to match whatever height the
   text/form column naturally needs. */
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 64px;
}
.contact-photo {
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }

.contact-right { display: flex; flex-direction: column; }
.contact-intro { margin-bottom: 36px; }
.contact-label { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 4px; }

.contact-form { display: flex; flex-direction: column; gap: 26px; margin-bottom: 40px; }
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.form-field input,
.form-field textarea {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 6px 2px 10px;
  resize: vertical;
  transition: border-color 0.2s ease;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-faint); }
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form-submit {
  padding: 13px 34px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: #14100a;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.form-submit:hover { background: var(--accent-2); transform: translateY(-1px); }
.form-submit:disabled { opacity: 0.6; cursor: default; transform: none; }
.form-status {
  font-size: 13px;
  color: var(--text-dim);
}
.form-status.form-status-success { color: var(--accent-2); }
.form-status.form-status-error { color: #e08a7a; }

.contact-meta {
  display: flex;
  gap: 10px;
  color: var(--text-faint);
  font-size: 13px;
}

@media (max-width: 860px) {
  .contact-heading { white-space: normal; }
  .contact-row { grid-template-columns: 1fr; gap: 32px; }
  .contact-photo { height: auto; aspect-ratio: 3 / 4; min-height: 0; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); }
.footer-inner {
  height: 80px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 13px;
  color: var(--text-faint);
}
.footer-sub { justify-self: end; }
.footer-social {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-social a {
  display: flex;
  color: var(--text-faint);
  transition: color 0.2s ease;
}
.footer-social a:hover { color: var(--accent); }
.footer-social svg { width: 19px; height: 19px; }

@media (max-width: 480px) {
  .footer-inner { grid-template-columns: auto; justify-items: center; gap: 10px; height: auto; padding: 20px 0; }
  .footer-sub { justify-self: center; }
}

/* ---------- Post — project detail view ----------
   Full-viewport, semi-transparent dark overlay. A horizontally scrollable
   media strip (each item scaled to a shared height, no cropping — true to
   its own aspect ratio) sits above a two-column info block, with
   previous/next PROJECT links at the very bottom. Left/right arrows (or a
   sideways drag/swipe on touch) move through the media strip; tapping a
   media item expands it fullscreen via .zoom. */
.post {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(12,11,9,0.94);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overflow-y: auto;
  padding: 88px 0 40px;
}
.post.open { opacity: 1; pointer-events: auto; }

.post-close {
  position: fixed;
  top: 24px; right: 24px;
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(24,26,28,0.6);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.post-close:hover { border-color: var(--accent); color: var(--accent); }

.post-gallery-wrap {
  position: relative;
  margin-bottom: 40px;
}
.post-gallery {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 clamp(20px, 6vw, 90px);
  scrollbar-width: none;
}
.post-gallery::-webkit-scrollbar { display: none; }

.post-media-item {
  position: relative;
  flex-shrink: 0;
  height: 62vh;
  scroll-snap-align: start;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.post-media-item img,
.post-media-item video {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
.post-media-expand {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(12,11,9,0.55);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, border-color 0.2s ease;
}
.post-media-item:hover .post-media-expand,
.post-media-item:focus-within .post-media-expand {
  opacity: 1;
}
.post-media-expand:hover { border-color: var(--accent); color: var(--accent); }
.post-media-expand svg { width: 16px; height: 16px; }

.post-media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(24,26,28,0.65);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.post-media-nav:hover { border-color: var(--accent); color: var(--accent); }
.post-media-prev { left: clamp(4px, 2vw, 28px); }
.post-media-next { right: clamp(4px, 2vw, 28px); }

.post-info {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  margin-bottom: 48px;
}
.post-client { color: var(--text-dim); font-size: 14px; margin-bottom: 8px; }
.post-link {
  display: inline-block;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.post-link:hover { border-color: var(--accent); }
.post-title { font-family: var(--ff-head); font-size: clamp(24px, 3vw, 36px); margin-bottom: 6px; }
.post-category {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 18px;
}
.post-description { color: var(--text-dim); font-size: 15px; line-height: 1.7; max-width: 640px; }

.post-project-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.post-project-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  max-width: 45%;
}
.post-project-next { align-items: flex-end; text-align: right; }
.post-project-nav-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.2s ease;
}
.post-project-btn:hover .post-project-nav-label { color: var(--accent); }
.post-project-nav-title { font-family: var(--ff-head); font-size: 17px; }

@media (max-width: 860px) {
  .post-info { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 720px) {
  .post { padding: 76px 0 32px; }
  .post-media-item { height: 42vh; }
  .post-info { padding: 0 20px 0; margin-bottom: 32px; }
  .post-info-left { order: 2; }
  .post-project-nav { padding: 24px 20px 0; }
  .post-project-btn { max-width: 48%; }
  .post-media-nav { width: 38px; height: 38px; font-size: 20px; }
}

/* ---------- Zoom — fullscreen single media, opened from inside a post ---------- */
.zoom {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(8,7,6,0.95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.zoom.open { opacity: 1; pointer-events: auto; }
.zoom-media { max-width: 100%; max-height: 100%; }
.zoom-media img,
.zoom-media video {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 80px);
  width: auto;
  height: auto;
  border-radius: 6px;
}
.zoom-close {
  position: fixed;
  top: 24px; right: 24px;
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(24,26,28,0.6);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.zoom-close:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-item.wide { grid-column: span 2; aspect-ratio: 16 / 9; }
}

@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    top: 78px; left: 0; right: 0;
    background: rgba(24,26,28,0.97);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 32px 24px;
    transform: translateY(-130%);
    transition: transform 0.3s ease;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .nav-cta { border: none; padding: 14px 0; }
  .nav-toggle { display: flex; }
  section { padding: 80px 0; }

  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-item.wide { grid-column: span 1; aspect-ratio: 16 / 9; }
  .portfolio-item:not(.wide) { aspect-ratio: 4 / 5; }
  /* Captions stay hidden by default on touch (no hover) — tap opens the lightbox instead */
}