/* ============================================================
   JOE SADLER — joejsadler.com
   Type: ABC Walter Neue Extrabold (display) / ABC Diatype Mono (text)
   ============================================================ */

@font-face {
  font-family: "Walter Neue";
  src: url("../fonts/ABCWalterNeueTrial-Extrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Diatype Mono";
  src: url("../fonts/ABCDiatypeMonoTrial-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #eceae3;
  --ink: #1f1f1f;
  --muted: #6e6a62;
  --hairline: rgba(31, 31, 31, 0.2);
  --accent: #2ba39a;
  --pad: clamp(20px, 4vw, 64px);
  --display: "Walter Neue", Impact, sans-serif;
  --mono: "Diatype Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* dark room inside the light house */
.section-dark {
  --paper: #1f1f1f;
  --ink: #f9f9f9;
  --muted: #8d8d88;
  --hairline: rgba(249, 249, 249, 0.16);
  --accent: #5fd3cb;
  background: var(--paper);
  color: var(--ink);
}

::selection { background: var(--accent); color: #1f1f1f; }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* no CSS smooth-scroll: it fights Lenis (double-animated wheel = lag) */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* film grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  will-change: transform;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }

a { color: inherit; text-decoration: none; }

.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px var(--pad);
  z-index: 100;
  mix-blend-mode: difference;
  color: #f9f9f9;
}
.nav a { color: #f9f9f9; }
.nav-mark {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.02em;
}
.nav-links {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav-links a { position: relative; padding-bottom: 2px; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--pad) + 40px) var(--pad) var(--pad);
  position: relative;
  overflow: hidden;
}
.hero > * { position: relative; z-index: 2; }

/* light hero over the film sky */
.hero-light {
  --ink: #1f1f1f;
  --muted: rgba(31, 31, 31, 0.62);
  --hairline: rgba(31, 31, 31, 0.22);
  color: var(--ink);
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-light .hero-scroll { color: var(--ink); }
.hero-light .statement .ac { color: var(--ink); }
/* fallback when WebGL is unavailable or motion is reduced */
.hero-static .hero-canvas { display: none; }
.hero-static {
  background-image: url("../assets/homepage/hero_seagulls_flipped.jpg");
  background-size: cover;
  background-position: center;
}
.footer-static .hero-canvas { display: none; }
.footer-static {
  background-image: url("../assets/homepage/hero_nobirds.jpg");
  background-size: cover;
  background-position: center;
}
.dot-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 40%),
    rgba(249, 249, 249, 0.085) 0%,
    rgba(249, 249, 249, 0.05) 22%,
    rgba(249, 249, 249, 0.022) 45%,
    rgba(249, 249, 249, 0.007) 65%,
    transparent 82%);
}
.hero .dot-field, .hero .hero-glow { z-index: 0; }
.hero .hero-glow { z-index: 1; }
.hero-top {
  position: absolute;
  top: 64px;
  left: var(--pad);
  right: var(--pad);
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(54px, 13.1vw, 210px);
  line-height: 0.86;
  letter-spacing: -0.015em;
}
.wordmark-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.wm { display: inline-block; }
.hero-role {
  margin-top: 24px;
  color: var(--muted);
}
.hero-statement {
  margin-top: clamp(40px, 7vh, 96px);
  max-width: min(58vw, 820px);
  align-self: flex-end;
  text-align: left;
}
.statement {
  font-family: var(--display);
  font-size: clamp(20px, 2.7vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.hero-scroll {
  position: absolute;
  bottom: 24px;
  left: var(--pad);
  color: var(--accent);
}
.statement .ac { color: var(--accent); font-style: normal; }

/* ---------- client logo marquee ---------- */
.clients {
  padding: clamp(40px, 6vh, 72px) 0;
  border-top: 1px solid var(--hairline);
  overflow: hidden;
}
.clients-label {
  color: var(--muted);
  padding: 0 var(--pad);
}
.marquee {
  margin-top: clamp(28px, 4vh, 44px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(56px, 8vw, 120px);
  width: max-content;
  padding-right: clamp(56px, 8vw, 120px);
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img {
  display: block;
  width: auto;
  filter: brightness(0);
  opacity: 0.78;
  transition: opacity 0.3s;
}
.marquee-track img:hover { opacity: 1; }
.lg-h16 { height: 16px; }
.lg-h20 { height: 20px; }
.lg-h26 { height: 26px; }
.lg-h30 { height: 30px; }
.lg-h40 { height: 40px; }
.lg-h54 { height: 54px; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- custom cursor ---------- */
html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor .media {
  cursor: none;
}
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10001;
  opacity: 0;
}
html.has-custom-cursor .cursor-dot,
html.has-custom-cursor .cursor-ring { opacity: 1; }
body.modal-open .cursor-dot,
body.modal-open .cursor-ring { display: none; }
html.has-custom-cursor body.modal-open,
html.has-custom-cursor body.modal-open * { cursor: auto; }
.cursor-dot {
  width: 6px; height: 6px;
  background: #f9f9f9;
  box-shadow: 0 0 10px rgba(249, 249, 249, 0.5);
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid rgba(249, 249, 249, 0.6);
  transition: width 0.3s, height 0.3s, background-color 0.3s, border-color 0.3s;
  mix-blend-mode: difference;
}
.cursor-ring.hover {
  width: 56px; height: 56px;
  background: rgba(249, 249, 249, 0.12);
  border-color: #f9f9f9;
}
.cursor-ring.fill {
  width: 56px; height: 56px;
  background: #f9f9f9;
  border-color: #f9f9f9;
  mix-blend-mode: difference;
}
.cursor-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
}
body.modal-open .cursor-particles { display: none; }
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring, .cursor-particles { display: none; }
}

/* ---------- reel scroll progress ---------- */
.reel-progress {
  position: fixed;
  right: var(--pad);
  bottom: 18px;
  z-index: 90;
  display: flex;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.reel-progress.is-visible { opacity: 1; }
.reel-progress #reelValue { color: var(--ink); }
.reel-progress.is-complete,
.reel-progress.is-complete #reelValue { color: var(--accent); }

/* ---------- reveal field interlude ---------- */
.reveal-field {
  border-top: 1px solid var(--hairline);
}
.reveal-stage {
  position: relative;
  height: clamp(420px, 82vh, 840px);
  overflow: hidden;
}
.reveal-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.reveal-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 8vw, 130px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  pointer-events: none;
  color: #f9f9f9;
}
.reveal-hint {
  position: absolute;
  left: var(--pad);
  bottom: 20px;
  color: var(--muted);
  pointer-events: none;
}
@media (hover: none), (pointer: coarse) {
  .reveal-hint { display: none; }
}

/* ---------- video block + lightbox ---------- */
.video-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-cta {
  position: absolute;
  left: 16px;
  bottom: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(236, 234, 227, 0.9);
  border: 1px solid var(--hairline);
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.video-cta:hover { border-color: var(--accent); color: var(--accent); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(12, 12, 12, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  color: #f9f9f9;
}
.lightbox[hidden] { display: none; }
.lightbox video {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  background: #000;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: var(--pad);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f9f9f9;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.lightbox-close:hover { color: var(--accent); }
body.modal-open { overflow: hidden; }

/* availability */
.avail {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  margin-bottom: 28px;
}
.avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(95, 211, 203, 0.5); }
  50% { opacity: 0.55; box-shadow: 0 0 0 7px rgba(95, 211, 203, 0); }
}

/* ---------- preloader: film leader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}
.preloader::after {
  content: "";
  position: absolute;
  inset: -60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
  animation: pregrain 0.45s steps(1) infinite;
}
@keyframes pregrain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-44px, 28px); }
  50% { transform: translate(30px, -38px); }
  75% { transform: translate(-22px, -20px); }
  100% { transform: translate(38px, 42px); }
}
.preloader.done { transform: translateY(-101%); }
.pre-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.pre-logos {
  position: relative;
  width: 200px;
  height: 56px;
}
.pre-logos img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  filter: brightness(0);
  opacity: 0;
}
.pre-logos img.on { opacity: 1; }
.pre-bar {
  width: 200px;
  height: 1px;
  background: var(--hairline);
}
.pre-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
}
.pre-count {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
body.preloading { overflow: hidden; }
.no-preloader .preloader { display: none; }
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
}

/* ---------- sections ---------- */
.section {
  padding: clamp(110px, 16vh, 220px) var(--pad);
  border-top: 1px solid var(--hairline);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(48px, 8vh, 110px);
}
.section-label { font-size: 13px; letter-spacing: 0.18em; }
.section-count { color: var(--muted); }

/* ---------- group heads (chapter headers) ---------- */
.group-head {
  margin-bottom: clamp(72px, 11vh, 150px);
  max-width: 1100px;
}
.group-index {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
}
.group-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 6.5vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.group-sub {
  color: var(--muted);
  margin-top: 18px;
}

/* ---------- light theme section ---------- */
.section-light {
  --ink: #1f1f1f;
  --paper: #eceae3;
  --muted: #6e6a62;
  --hairline: rgba(31, 31, 31, 0.2);
  background: var(--paper);
  color: var(--ink);
}
.section-light .media { background: #dedbd2; }
.section-light .video-cta { background: rgba(236, 234, 227, 0.85); }
/* dark room: outline button, not a solid white chip */
.section-dark .video-cta {
  background: transparent;
  color: var(--ink);
  border-color: rgba(249, 249, 249, 0.5);
}
.section-dark .video-cta:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- brand blocks ---------- */
.block {
  margin-bottom: clamp(90px, 14vh, 200px);
  position: relative;
}
.block:last-child { margin-bottom: 0; }
.block-index {
  color: var(--accent);
  margin-bottom: 18px;
}
.block-media {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 2vw, 32px);
  align-items: start;
}
.block-media .media-tall { grid-column: 2 / 8; aspect-ratio: 4 / 5; }
.block-media .media-small { grid-column: 8 / 12; aspect-ratio: 4 / 5; }
.block-media.reverse .media-small { grid-column: 1 / 5; }
.block-media.reverse .media-tall { grid-column: 5 / 11; }
.block-media.single .media-wide { grid-column: 2 / 12; aspect-ratio: 16 / 9; }
.block-media.single .media-43 { grid-column: 3 / 11; aspect-ratio: 1440 / 1072; }
.block-media + .block-media { margin-top: clamp(12px, 2vw, 32px); }
.block-media.single.narrow .media-square { grid-column: 4 / 10; aspect-ratio: 1 / 1; }
.block-media.single.narrow .media-tall { grid-column: 4 / 9; }
.block-media.pair .media-tall { grid-column: span 6; }
.block-media.trio .media { aspect-ratio: 4 / 5; }
.block-media.trio .media:nth-child(1) { grid-column: 1 / 5; }
.block-media.trio .media:nth-child(2) { grid-column: 5 / 9; }
.block-media.trio .media:nth-child(3) { grid-column: 9 / 13; }
.offset-down { margin-top: clamp(40px, 8vh, 120px); }
.offset-up { margin-top: calc(-1 * clamp(20px, 4vh, 60px)); }

.caption {
  margin-top: 20px;
  color: var(--ink);
}
.caption-sub { margin-top: 4px; color: var(--muted); }

/* media + reveal */
.media {
  overflow: hidden;
  position: relative;
  background: #dfdbd1;
}
.media img {
  transform: scale(1.0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  backface-visibility: hidden;
}
.media:hover img { transform: scale(1.04); }

/* placeholders */
.ph .ph-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  color: var(--muted);
  text-align: center;
  padding: 16px;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--hairline) 50%, transparent calc(50% + 0.5px));
}
.ph .ph-inner .mono { font-size: 11px; background: var(--paper); padding: 4px 8px; }

/* ---------- featured (gray whale) ---------- */
.block-featured { padding-top: 12px; }
.media-lead {
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  height: clamp(420px, 92vh, 1000px);
}
.featured-text {
  max-width: 880px;
  margin: clamp(40px, 7vh, 80px) auto 0;
}
.featured-graf {
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.25;
  margin-top: 20px;
  letter-spacing: 0.002em;
}
.featured-stat {
  margin-top: 24px;
  color: var(--muted);
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 2vw, 32px);
  margin-top: clamp(56px, 9vh, 120px);
}
.featured-grid .media:nth-child(1) { grid-column: 1 / 7; aspect-ratio: 4 / 5; }
.featured-grid .media:nth-child(2) { grid-column: 7 / 13; aspect-ratio: 4 / 5; margin-top: clamp(48px, 9vh, 140px); }
.featured-grid .media:nth-child(3) { grid-column: 2 / 7; aspect-ratio: 4 / 5; margin-top: clamp(24px, 5vh, 70px); }
.featured-grid .media:nth-child(4) { grid-column: 7 / 12; aspect-ratio: 4 / 5; }

.pullquote {
  margin: clamp(80px, 14vh, 180px) auto;
  max-width: 1000px;
  text-align: center;
}
.pullquote-text {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.005em;
}
.pullquote cite {
  display: block;
  margin-top: 28px;
  font-style: normal;
  color: var(--muted);
}

/* ---------- AI section ---------- */
.ai-intro {
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin-bottom: clamp(56px, 9vh, 110px);
}
.ai-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 32px);
}
.ai-grid .media { aspect-ratio: 4 / 5; }

/* outcome line under card captions (homepage tiles + ai case) */
.card-outcome {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.4;
  margin-top: 10px;
  max-width: 58ch;
}

/* organizational AI case (Sandals) */
.ai-case { margin-bottom: clamp(56px, 9vh, 110px); }
.ai-case .card-outcome { font-size: clamp(17px, 1.6vw, 24px); margin-top: 0; }
.ai-case-rows {
  margin-top: 28px;
  max-width: none;
}
@media (min-width: 901px) {
  .ai-case-rows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 48px);
  }
}
.ai-quote { margin: clamp(36px, 6vh, 64px) 0 0; max-width: 880px; }
.ai-quote p {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(19px, 1.9vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.ai-quote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  color: var(--muted);
}

/* featured film */
.ai-feature {
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 1110 / 720;
}
.ai-caption {
  max-width: 1100px;
  margin: 14px auto clamp(56px, 9vh, 110px);
  color: var(--muted);
}

/* video wall: tight mosaic, everything playing at once */
.ai-wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
}
.ai-wall .media { margin: 0; }
.ai-wall video { pointer-events: none; }
.ai-v { grid-column: span 3; aspect-ratio: 9 / 16; }
.ai-h { grid-column: span 6; aspect-ratio: 16 / 9; }
.ai-p { grid-column: span 4; aspect-ratio: 4 / 5; }
.section-dark .media { background: #2a2a28; }
@media (max-width: 900px) {
  .ai-v { grid-column: span 6; }
  .ai-h { grid-column: span 12; }
  .ai-p { grid-column: span 6; }
  .ai-p-last { grid-column: span 12; aspect-ratio: 16 / 10; }
}
.video-slot {
  margin-top: clamp(12px, 2vw, 32px);
  aspect-ratio: 16 / 9;
}
.play-ring {
  width: 64px;
  height: 64px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  position: relative;
  flex: none;
}
.play-ring::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-40%, -50%);
  border-left: 12px solid var(--muted);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.ai-link { margin-top: 40px; font-size: 14px; }
.ai-link a { border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.ai-link a:hover { color: var(--accent); }

/* ---------- about + contact ---------- */
.about-row {
  display: grid;
  grid-template-columns: clamp(220px, 24vw, 340px) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.about-photo {
  aspect-ratio: 1 / 1;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .about-row { grid-template-columns: 1fr; }
  .about-photo { max-width: 320px; }
}
.bio {
  font-family: var(--display);
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  max-width: 1100px;
}
.contact { margin-top: clamp(64px, 10vh, 130px); }
.contact-label { color: var(--muted); margin-bottom: 20px; }
.contact-roles { color: var(--ink); margin-bottom: 8px; }
.contact-loc { color: var(--muted); margin-bottom: 28px; }
.contact-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}
.contact-links a {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: border-color 0.3s;
}
.contact-links a:hover { border-color: var(--ink); }
.ig-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  vertical-align: -2px;
  margin-right: 8px;
}

/* ---------- footer end card ---------- */
.footer-end {
  position: relative;
  overflow: hidden;
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.footer-inner {
  position: relative;
  z-index: 2;
}
.footer-mark {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(56px, 11vw, 180px);
  line-height: 0.92;
  letter-spacing: -0.015em;
}
.footer-role {
  margin-top: 18px;
  color: var(--muted);
}
.footer-social { margin-top: 14px; }
.footer-social a { border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }
.footer-social a:hover { border-color: var(--accent); color: var(--accent); }
.footer-copy {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  color: var(--muted);
  font-size: 11px;
}

/* ---------- project page (horizontal case study) ---------- */
.project-page { overflow-x: hidden; }
.h-pin {
  position: relative;
  min-height: 100vh;
}
.h-left {
  position: absolute;
  top: 0; left: 0;
  width: min(38vw, 560px);
  height: 100vh;
  padding: calc(var(--pad) + 48px) var(--pad) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 5;
  background: linear-gradient(90deg,
    #eceae3 0%,
    #eceae3 38%,
    rgba(236, 234, 227, 0.92) 47%,
    rgba(236, 234, 227, 0.76) 55%,
    rgba(236, 234, 227, 0.58) 62%,
    rgba(236, 234, 227, 0.41) 68%,
    rgba(236, 234, 227, 0.26) 74%,
    rgba(236, 234, 227, 0.15) 80%,
    rgba(236, 234, 227, 0.07) 86%,
    rgba(236, 234, 227, 0.02) 93%,
    rgba(236, 234, 227, 0) 100%);
}
.h-back { margin-bottom: 28px; }
.h-back a { color: var(--muted); transition: color 0.3s; }
.h-back a:hover { color: var(--accent); }
.h-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 110px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin-top: 14px;
}
.h-season { color: var(--muted); margin-top: 14px; }
.h-graf {
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  max-width: 44ch;
}
.h-meta { margin-top: 30px; display: flex; flex-direction: column; gap: 8px; }
.h-meta div { display: flex; gap: 14px; }
.h-meta dt { color: var(--muted); min-width: 72px; }
.h-meta dd { margin: 0; }
.h-hint { margin-top: 34px; color: var(--accent); }

/* outcome line: the bold one-line claim under the title */
.h-outcome {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.3;
  margin-top: 22px;
  max-width: 40ch;
}

/* brief / role / result rows in the pinned sidebar */
.case-rows {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 48ch;
}
.case-rows dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 5px;
}
.case-rows dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.015em;
}

/* text panels in the track: The Move / The Result told mid-scroll */
.h-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: clamp(360px, 34vw, 560px);
  flex: none;
  padding-right: 2vw;
}
.h-text-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.h-text-body {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.75;
  letter-spacing: 0.015em;
}

/* pull-quote panels */
.h-quote {
  display: flex;
  align-items: center;
  width: clamp(420px, 44vw, 720px);
  flex: none;
  padding-right: 2vw;
}
.h-quote blockquote { margin: 0; }
.h-quote p {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.h-quote cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  color: var(--muted);
}
@media (max-width: 900px) {
  .h-text, .h-quote { width: 100%; padding: 24px 0; }
}

.h-track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  height: 100vh;
  width: max-content;
  padding-left: calc(min(38vw, 560px) + 6vw);
  padding-right: 8vw;
  will-change: transform;
}
.h-panel {
  position: relative;
  flex: none;
  height: 72vh;
  margin: 0;
}
.h-panel > img {
  height: 100%;
  width: auto;
  display: block;
  will-change: filter;
}
.h-panel figcaption {
  position: absolute;
  left: 0;
  bottom: -30px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
/* tall web screens: framed, slow vertical auto-scroll */
.h-frame .h-scrollimg {
  height: 100%;
  width: 42vw;
  min-width: 320px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--hairline);
}
.h-frame .h-scrollimg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 0%;
  animation: pagescroll 28s ease-in-out infinite alternate;
}
@keyframes pagescroll {
  from { object-position: 50% 0%; }
  to { object-position: 50% 100%; }
}
.h-video video {
  height: 100%;
  width: auto;
  display: block;
}
@media (max-width: 900px) {
  .h-video { width: 100%; height: auto; }
  .h-video video { width: 100%; height: auto; }
}
.h-end {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding-right: 10vw;
}
.h-end .mono { color: var(--muted); }
.h-next {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 4.5vw, 80px);
  line-height: 1;
  letter-spacing: -0.01em;
  transition: color 0.3s;
  white-space: nowrap;
}
.h-next:hover { color: var(--accent); }

@media (max-width: 900px) {
  .h-left {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    padding-top: 110px;
    background: none;
  }
  .h-track {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    width: 100%;
    padding: 40px var(--pad) 80px;
    gap: 56px;
    transform: none !important;
  }
  .h-panel { height: auto; width: 100%; }
  .h-panel > img { width: 100%; height: auto; filter: none !important; }
  .h-panel figcaption { position: static; margin-top: 10px; }
  .h-frame .h-scrollimg { width: 100%; height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
  .h-frame .h-scrollimg img { animation: none; }
}

/* wine & spirits mosaic: 2x2, overlay captions */
.wine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 26px);
  max-width: 1180px;
  margin: 0 auto;
}
.wine-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: block;
}
.wine-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.wine-tile:hover img { transform: scale(1.05); }
.wine-tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(0deg, rgba(18, 18, 16, 0.6), transparent);
  pointer-events: none;
}
.wine-cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  color: #f9f9f9;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.wine-tile-text {
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 3.4vw, 52px);
}
.wine-tile-text::after { display: none; }
.wine-line {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 2.9vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 16px 0 20px;
}
.wine-sub { color: var(--muted); }
@media (max-width: 760px) {
  .wine-grid { grid-template-columns: 1fr; }
  .wine-tile-text { aspect-ratio: auto; min-height: 0; }
}

/* homepage project cards: natural aspect, centered, generous air */
.block-card {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(130px, 18vh, 280px);
}
.block-card:last-child { margin-bottom: 0; }
.project-card { display: block; }
.card-v { width: min(86vw, 520px); }
.card-h { width: min(92vw, 1060px); }
.project-card .media {
  aspect-ratio: auto;
  background: none;
}
.project-card .media img {
  width: 100%;
  height: auto;
}
.project-card .caption { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.project-card .card-cta { color: var(--accent); }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .wordmark { font-size: clamp(48px, 14.25vw, 90px); }
  .hero-statement { align-self: flex-start; max-width: 92vw; }
  .hero-top { top: 56px; }
  .block-media,
  .featured-grid { display: flex; flex-direction: column; }
  .offset-down, .offset-up,
  .featured-grid .media { margin-top: 0 !important; }
  .block-media .media,
  .featured-grid .media { width: 100%; }
  .media-lead { height: 64svh; }
  .ai-grid { grid-template-columns: 1fr 1fr; }
  .nav { padding: 14px 20px; }
  .nav-links { gap: 14px; font-size: 11px; }
  .pullquote { text-align: left; }
  .marquee-track { gap: 40px; padding-right: 40px; }
  .lg-h54 { height: 40px; }
  .lg-h40 { height: 30px; }
  .lg-h30 { height: 22px; }
  .lg-h26 { height: 20px; }
  .lg-h20 { height: 15px; }
  .lg-h16 { height: 12px; }
}

/* reduced motion: everything visible, no transforms */
@media (prefers-reduced-motion: reduce) {
  .media img, .nav-links a::after { transition: none; }
  .marquee-track { animation: none; }
  .avail-dot { animation: none; }
}