/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { display: none; }
body { font-family: Arial, Helvetica, sans-serif; background: #ffffff; color: #000; -webkit-font-smoothing: antialiased; scrollbar-width: none; -ms-overflow-style: none; }
body::-webkit-scrollbar { display: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ─── Sitewide Texture ───────────────────────────────────
   Fixed pseudo-element behind all content at 33% opacity.
   DOM order ensures body children render on top of z-index:0.
   ──────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('images/bg-texture.jpg') center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* ─── Tokens ─────────────────────────────────────────────────
   Fluid type / spacing scale smoothly from mobile → desktop via
   clamp(), so the layout no longer snaps between two fixed states.
   --gutter drives the horizontal page margin site-wide.
   ──────────────────────────────────────────────────────────── */
:root {
  --white: #ffffff;
  --black: #000000;
  --nav-font: clamp(16px, 1.5vw, 22px);
  --label-font: clamp(14px, calc(9px + 0.7vw), 18px);
  --body-font: clamp(16px, calc(11px + 0.7vw), 20px);
  --hero-height: clamp(380px, 52vw, 661px);
  --nav-h: clamp(62px, 7vw, 90px);
  --gutter: clamp(24px, 8vw, 100px);
}

/* ─── Loading Screen ─────────────────────────────────────── */
.ls-skip #loading-screen { display: none !important; }
#loading-screen {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998; /* one below page-transition-overlay */
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: #111;
  animation: splashBarFill 3.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes splashBarFill {
  0%   { width: 0%; }
  60%  { width: 75%; }
  85%  { width: 92%; }
  100% { width: 100%; }
}
.splash-logo-container {
  position: relative;
  width: 61px;
}

.splash-logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.splash-logo-dark {
  position: relative;
  z-index: 0;
}

.splash-logo-light {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  animation: logoCrossfade 3s ease-in-out infinite;
}

@keyframes logoCrossfade {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  50%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Exit: fade container out cleanly */
#loading-screen.fade-out .splash-logo-container {
  opacity: 0;
  transition: opacity 0.6s ease;
}

@media (max-width: 768px) {
  .splash-logo-container { width: 43px; }
}

/* ─── Navigation ─────────────────────────────────────────── */
body > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: none !important;
  z-index: 300;
  display: flex;
  align-items: center;
  padding: 0 48px;
}
.nav-menu-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; flex-direction: column; gap: 5px;
}
.nav-menu-btn span {
  display: block; width: 28px; height: 1.5px; background: #000;
  transition: transform 0.35s cubic-bezier(0.23,1,0.32,1), opacity 0.25s ease;
}
/* Animate lines into X when menu is open */
.nav-menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-links {
  margin-left: auto;
  display: flex;
  gap: 40px;
}
.nav-links a {
  font-size: var(--nav-font);
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 0.5; }
.nav-links a.active { font-weight: bold; }
.nav-work-btn { background: none; border: none; padding: 0; cursor: pointer; font-size: var(--nav-font); font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; transition: opacity 0.2s; color: inherit; }
.nav-work-btn:hover { opacity: 0.5; }
.nav-work-btn.active { font-weight: bold; }
.nav-overlay a.active { font-weight: bold; }
nav .nav-links { transition: opacity 0.25s ease; }
body.menu-open .nav-links { opacity: 0; pointer-events: none; }

/* Mobile nav overlay — fades in over 250ms */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  transition: opacity 250ms ease, visibility 250ms ease;
}
.nav-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.nav-overlay-close {
  display: none;
}

/* hamburger menu list — strips all bullets and default spacing */
.hamburger-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.hamburger-menu-list li,
.hamburger-menu-list li::marker { list-style: none; }

.nav-overlay a {
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
.nav-overlay a:hover { opacity: 0.5; }
.nav-overlay a.active { font-weight: bold; }

/* Active state — bold only, high enough specificity to win */
.hamburger-menu-list li a.active,
.hamburger-menu-list li button.active {
  font-weight: 700;
  opacity: 1;
}

/* WORK toggle matches ABOUT link exactly */
.nav-work-toggle {
  background: none; border: none; cursor: pointer; padding: 0; margin: 0;
  font-size: 36px; font-weight: inherit;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: inherit; font-family: inherit;
  display: block;
  width: 100%;
  text-align: center;
  transition: opacity 0.2s;
}
.nav-work-toggle:hover { opacity: 0.5; }
.nav-work-toggle.active { font-weight: bold; }

/* dropdown */
.nav-work-dropdown {
  list-style: none; margin: 8px 0 0; padding: 0;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.nav-work-dropdown li { list-style: none; padding: 6px 0; width: 100%; text-align: center; }
.nav-work-dropdown li::marker { content: none; }
.nav-work-dropdown a {
  font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  color: inherit; transition: opacity 0.2s;
  display: inline-block;
}
.nav-work-dropdown a:hover { opacity: 0.5; }
.nav-item.nav-work.open .nav-work-dropdown {
  max-height: 360px; opacity: 1;
}

/* ─── Homepage ───────────────────────────────────────────── */
.home-hero {
  flex-shrink: 0;
  padding-top: var(--nav-h);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.home-logo {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.home-kh-logo {
  width: 68px;
}
.home-kh-name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #111;
  padding-left: 0.16em;   /* balance trailing letter-spacing so it optically centers */
}
.home-tagline {
  margin-top: 40px;   /* 16px base + 24px nudge down */
  font-size: 25px;
  line-height: 27px;
  text-transform: uppercase;
  text-align: center;
  color: #202020;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.home-tagline-line1 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.home-tagline-line2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #222222;
}
.amp-sep {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ─── Homepage Physics Carousel ─────────────────────────────
   A horizontal strip of full-colour cards driven by scroll with
   momentum physics (see main.js). Number reveals above the card and
   name + category below on hover; labels stay visible on touch.
   ──────────────────────────────────────────────────────────── */
:root {
  --pc-w: clamp(240px, 22vw, 320px);   /* ~4 cards visible on desktop */
  --pc-h-short: clamp(300px, 50vh, 440px);
  --pc-h-tall:  clamp(340px, 58vh, 500px);
}
.scroll-x-wrapper {
  position: relative;
  /* height set dynamically by JS to create the scroll distance */
}
.scroll-x-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.projects-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 24px 0 40px;     /* 24px gap below the tagline; anchors the carousel
                               top so it doesn't drift when the window resizes */
  flex: 1;
  min-height: 0;
  align-items: flex-start;  /* top-anchored; cards fill/cap downward */
  will-change: transform;   /* JS drives translateX */
}

/* Card = number (above) / image frame / name + category (below) */
.project-card {
  position: relative;
  flex-shrink: 0;
  width: var(--pc-w);
  height: 100%;               /* fill the anchored strip height... */
  max-height: var(--pc-h-tall); /* ...but never taller than the cap */
  display: block;
  text-decoration: none;
  color: #111;
  cursor: pointer;
  opacity: 0;                 /* staggered fade-in (JS adds cards-ready) */
  background: #ffffff;        /* revealed behind the image as it contracts */
  -webkit-tap-highlight-color: transparent;
}

/* Image frame fills the card, then clips in from top + bottom on hover */
.pc-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: #efede8;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-frame img.card-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
}

/* Number — behind the image, revealed at the top on hover as the image clips */
.pc-num {
  position: absolute;
  z-index: 1;
  top: 0; left: 0; right: 0;
  height: 20px;
  display: flex;
  align-items: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #111;
  opacity: 0;
  transition: opacity 0.45s ease 0.12s;
}

/* Legibility scrim under the persistent logo + hover category */
.pc-frame::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 100%);
  pointer-events: none;
}

/* Category (project type) — behind the image, revealed in a cream band at
   the bottom on hover, mirroring the number at the top */
.pc-cat {
  position: absolute;
  z-index: 1;
  left: 0; right: 0;
  bottom: 0;
  height: 20px;
  display: flex;
  align-items: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a857e;
  opacity: 0;
  transition: opacity 0.45s ease 0.12s;
}

/* Company logo — persistent, overlaid on the lower part of the image,
   24px from the bottom of the card, always visible (white wordmark) */
.pc-logo {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  height: 20px;
  width: auto;
  max-width: 72%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

/* Hover (fine pointer): image scales in from the top to reveal the number;
   the category fades in above the always-visible logo. */
@media (hover: hover) and (pointer: fine) {
  .project-card:hover .pc-frame { clip-path: inset(20px 0 20px 0); }
  .project-card:hover .pc-num,
  .project-card:hover .pc-cat { opacity: 1; }
}

/* Card opacity (initial hidden state + left→right load-in) is driven by JS */

/* ─── Hero reveal ───────────────────────────────────────── */
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.home-tagline-line1,
.home-tagline-line2 {
  opacity: 0;
  transform: translateY(12px);
  display: block;
}
.home-logo {
  opacity: 0;
  transform: translateY(12px);
  animation: cardFadeUp 0.6s ease-out 0.0s forwards;
}
.home-tagline-line1 { animation: cardFadeUp 0.6s ease-out 0.15s forwards; }
.home-tagline-line2 { animation: cardFadeUp 0.6s ease-out 0.25s forwards; }

.discipline-tag { display: inline; position: relative; }
.uxui-separator { font-weight: 400; }

/* ─── Case Study Pages ───────────────────────────────────── */
.case-study {
  /* Slim white strip above the hero (was a full nav-height gap) */
  padding-top: clamp(48px, 5vw, 64px);
  position: relative;
  z-index: 1;
}

.cs-hero {
  position: relative;
  height: var(--hero-height);
  overflow: hidden;
  background: #d9d9d9;
}
.cs-hero img.cs-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-hero-brand-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.cs-hero-brand-logo img {
  max-width: 360px;
  max-height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 16px rgba(0,0,0,0.4));
}
/* Fenty hero gradient */
.cs-hero-fenty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(159,89,72,0.6) 0%, transparent 60%);
}
/* KVD hero logo — no filter, transparent PNG sits clean on hero bg */
.cs-hero-kvd .cs-hero-brand-logo img {
  width: 210px;
  height: auto;
  max-width: 100%;
  filter: none;
  box-shadow: none;
  object-fit: contain;
}

/* KVD hero gradient */
.cs-hero-kvd::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.45) 0%, transparent 55%);
}

/* Overview section */
.cs-overview {
  max-width: 1456px;
  margin: 0 auto;
  padding: 64px var(--gutter) 0;
}
.cs-overview-title {
  font-size: var(--body-font);
  font-weight: normal;
  line-height: 1.4;
  max-width: 960px;
  margin-left: calc(20% + 0px);
  padding-bottom: 16px;
}
.cs-overview-title .bold { font-weight: bold; }
.cs-meta-table { margin-top: 8px; max-width: 860px; margin-left: auto; margin-right: auto; }
.cs-meta-row {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 8px 0;
  border-top: 1px solid #e0e0e0;
}
.cs-meta-row:first-child { border-top: none; }
.cs-meta-label {
  font-size: var(--label-font);
  font-weight: bold;
  text-transform: uppercase;
  width: 160px;
  flex-shrink: 0;
}
.cs-meta-label::after { content: ':'; }
.cs-meta-value {
  font-size: var(--body-font);
  max-width: 700px;
  line-height: 1.35;
}

/* Section titles */
.cs-section {
  max-width: 1456px;
  margin: 64px auto 0;
  padding: 0 var(--gutter);
}
.cs-section-label {
  font-size: var(--label-font);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.cs-section-body {
  font-size: var(--body-font);
  line-height: 1.6;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Color palette */
.cs-colors {
  max-width: 1456px;
  margin: 64px auto 0;
  padding: 0 var(--gutter);
}
.cs-colors-swatches {
  display: flex;
  gap: 52px;
  justify-content: center;
}
.cs-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cs-swatch-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}
.cs-swatch-hex {
  font-size: 14px;
  font-family: Arial, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
.cs-swatch-name {
  font-size: 13px;
  text-align: center;
  color: #555;
}
.cs-swatch-circle--img {
  overflow: hidden;
  padding: 0;
  border: 1.5px solid #C8C4C0;
}
.cs-swatch-circle--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Typography specimens */
.cs-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 24px;
}
.cs-type-specimen { border-top: 1px solid #000; padding-top: 16px; }
.cs-type-aa { font-size: 64px; line-height: 1; margin-bottom: 16px; }
.cs-type-alphabet { font-size: 15px; line-height: 2; margin-bottom: 8px; color: #333; }
.cs-type-meta { font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.6; }

/* Strategy table arrows — hidden globally, shown only in mobile media query */
.cs-table-arrow { display: none; }

/* Strategy table (Call-to-Action Strategy) */
.cs-strategy-table {
  width: 100%;
  max-width: 1000px;
  margin: 24px auto 0;
  border-collapse: collapse;
  font-size: 14px;
}
.cs-strategy-table th,
.cs-strategy-table td {
  text-align: left;
  padding: 12px 16px;
  border-top: 1px solid #e0e0e0;
}
.cs-strategy-table thead th {
  background: #000;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: none;
}

/* Full-width image */
.cs-full-image {
  margin-top: 64px;
  width: 100%;
  overflow: hidden;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
.cs-full-image img {
  width: 100%;
  display: block;
  border-radius: 0;
}

/* Two-column image grid for case studies */
.cs-image-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 24px;
  width: 100%;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
.cs-image-grid img {
  width: 100%;
  display: block;
  border-radius: 0;
}
.cs-image-grid figure { margin: 0; }

/* Two-column signage layout: tall image left, image+text stacked right */
.cs-signage-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  align-items: stretch;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
.cs-signage-grid .cs-signage-left {
  display: flex;
}
.cs-signage-grid .cs-signage-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.cs-signage-grid .cs-signage-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cs-signage-grid .cs-signage-right img {
  width: 100%;
  display: block;
  border-radius: 0;
}
.cs-signage-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  flex: 1;
}
.cs-image-caption {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: #555;
}

/* 3-row editorial grid: print / email / results+reflection */
.cs-editorial-rows {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
.cs-editorial-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.cs-editorial-cell {
  display: flex;
  flex-direction: column;
}
.cs-editorial-cell img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  display: block;
  border-radius: 16px;

}
.cs-editorial-text-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 32px;
}
.cs-editorial-row--equal-height {
  align-items: stretch;
}
.cs-editorial-row--equal-height .cs-editorial-cell {
  overflow: hidden;
}
.cs-editorial-row--equal-height .cs-editorial-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-editorial-row--natural-img { align-items: center; }
.cs-editorial-row--natural-img .cs-editorial-cell img { height: auto; object-fit: unset; flex: unset; }

/* Mobile-only gallery (extra mobile screenshots) */
.cs-mobile-gallery {
  display: none;
  margin-top: 64px;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cs-mobile-gallery img { width: 100%; display: block; }

@media (max-width: 768px) {
  .cs-image-grid { grid-template-columns: 1fr; }
  .cs-mobile-gallery { display: grid; }
}

/* Contained image — centered with side margins */
.cs-contained-image {
  margin-top: 64px;
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter);
}
.cs-contained-image img {
  max-width: 986px;
  width: 100%;
  display: block;
}

/* Phone flow section (GIF/annotated phone screens) */
.phone-flow-section {
  max-width: 1200px;
  margin: 64px auto 0;
  padding: 0 var(--gutter);
}
.phone-flow-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-bottom: 80px;
}
.phone-flow-annotation {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #111;
}
.phone-flow-annotation .annot-label {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  display: block;
}
.phone-flow-annotation.right { text-align: right; }
.phone-mockup-frame {
  flex-shrink: 0;
  width: 300px;
  border-radius: 42px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.08);
}
.phone-mockup-frame img {
  width: 100%;
  display: block;
}

@media (max-width: 900px) {
  .phone-flow-section { padding: 0 var(--gutter); }
  .phone-flow-item { grid-template-columns: 1fr; gap: 24px; }
  .phone-flow-annotation.right { text-align: left; }
  .phone-mockup-frame { width: 240px; margin: 0 auto; }
  .cs-contained-image { padding: 0 var(--gutter); }
}

/* Divider */
.cs-divider {
  max-width: 1456px;
  margin: 48px auto;
  padding: 0 var(--gutter);
}
.cs-divider hr { border: none; border-top: 1px solid #000; }

/* Case study footer nav */
.cs-footer-nav {
  max-width: 1456px;
  margin: 80px auto 64px;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cs-figma-link {
  display: inline-block;
  margin-top: 24px;
  font-size: var(--label-font);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #262327;
  text-decoration: none;
  transition: opacity 0.2s;
}
.cs-figma-link:hover { opacity: 0.5; }

.cs-footer-nav a {
  font-size: var(--label-font);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}
.cs-footer-nav a:hover { opacity: 0.5; }

/* ─── About Page ─────────────────────────────────────────── */
/* ── ABOUT PAGE ── */
.about-page {
  padding-top: var(--nav-h);
}

.about-section {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px clamp(48px, 7vw, 120px);
}

.about-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "image title"
    "image body";
  column-gap: 48px;
  width: 100%;
  max-width: 860px;
}

/* ── IMAGE COLUMN ── */
.about-image-col {
  grid-area: image;
  align-self: center;
}

.about-image-wrapper {
  position: relative;
  width: 175px;
}

.about-offset-box {
  display: none;
}

.about-photo {
  position: relative;
  z-index: 1;
  width: 175px;
  height: auto;
  display: block;
}

/* ── TEXT COLUMNS ── */
.about-title-col {
  grid-area: title;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  align-self: end;
  padding-bottom: 16px;
}

.about-body-col {
  grid-area: body;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  align-self: start;
}

.about-monogram {
  width: 52px;
  height: auto;
  margin-bottom: 14px;
}

.about-name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: #111;
  padding-left: 0.16em;
}

.about-bio p {
  font-size: 13px;
  line-height: 1.8;
  font-weight: 400;
  color: #3a3a3a;
  margin-bottom: 16px;
  text-align: left;
}

.about-bio p:last-child { margin-bottom: 0; }

.about-hook {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #1a1a1a !important;
  font-weight: 500 !important;
  margin-bottom: 28px !important;
}

.about-chapter {
  margin-bottom: 20px;
}

.about-chapter-label {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #aaa;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.about-chapter p {
  margin-bottom: 0 !important;
}

.about-preview-hook {
  font-style: italic;
}

.about-email {
  font-size: 12px;
  color: #3a3a3a;
  margin-top: 16px;
  margin-bottom: 28px;
  text-align: left;
}

.about-email a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.about-links {
  display: flex;
  flex-direction: row;
  gap: 36px;
  align-items: center;
  justify-content: flex-start;
}

.about-links a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1a1a;
  transition: opacity 0.2s ease;
}

.about-links a:hover { opacity: 0.6; }

/* ── ABOUT PAGE REVEAL ANIMATION ── */
.about-image-col,
.about-monogram,
.about-name,
.about-bio,
.about-email,
.about-links {
  opacity: 0;
  transform: translateY(12px);
}

.about-image-col  { animation: cardFadeUp 0.7s ease-out 0.1s  forwards; }
.about-monogram   { animation: cardFadeUp 0.6s ease-out 0.35s forwards; }
.about-name       { animation: cardFadeUp 0.6s ease-out 0.5s  forwards; }
.about-bio        { animation: cardFadeUp 0.6s ease-out 0.65s forwards; }
.about-email      { animation: cardFadeUp 0.6s ease-out 0.78s forwards; }
.about-links      { animation: cardFadeUp 0.6s ease-out 0.9s  forwards; }

/* ── Carousel wrapper + arrows ── */
.cs-carousel-wrapper {
  position: relative;
}
.cs-carousel-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,0.85);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: #262327;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}
.cs-carousel-arrow.visible { display: flex; }
.cs-carousel-arrow--prev { left: 28px; }
.cs-carousel-arrow--next { right: 28px; }
.cs-carousel-arrow:active { background: rgba(255,255,255,1); }

/* ── Carousel image lightbox ── */
#cs-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
}
#cs-lightbox.open { display: flex; }
#cs-lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}
#cs-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  opacity: 0.85;
}
#cs-lightbox-close:hover { opacity: 1; }

/* ── Undertone section spacing: extra top margin on desktop only ── */
.cs-undertone-spacing { margin-top: 109px; }

/* ── Interactive Prototype Rows ── */
.cs-proto-rows {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 64px;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
.cs-proto-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
}
.cs-proto-gif {
  flex-shrink: 0;
  width: 260px;
}
.cs-proto-gif img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 36px;
}
.cs-proto-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-proto-copy--right {
  text-align: left;
}

/* ── Mobile-only elements: hidden on desktop by default ── */
.cs-photography-mobile,
.cs-brand-mobile,
.cs-signage-mobile,
.cs-print-mobile,
.cs-undertone-mobile,
.cs-bme-mobile { display: none; }

/* ── Hide mobile carousel wrappers (and their arrows) on desktop ── */
@media (min-width: 901px) {
  .cs-carousel-wrapper:has(.cs-undertone-mobile),
  .cs-carousel-wrapper:has(.cs-bme-mobile),
  .cs-carousel-wrapper:has(.cs-photography-mobile),
  .cs-carousel-wrapper:has(.cs-brand-mobile),
  .cs-carousel-wrapper:has(.cs-quiz-mobile) { display: none; }
}


/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  nav { padding: 0 var(--gutter); }
  .nav-links { display: none; }

  .home-tagline { font-size: clamp(14px, 3.5vw, 20px); line-height: 1.35; padding: 0 16px; gap: 4px; }
  .home-tagline-line2 { font-size: clamp(10px, 3.8vw, 16px); white-space: nowrap; letter-spacing: -0.06em; }
  @media (max-width: 480px) {
    .home-tagline-line2 { white-space: normal; text-align: center; letter-spacing: -0.05em; font-size: clamp(9px, 3.4vw, 13px); }
  }

  /* Physics carousel on mobile: same scroll-driven strip, smaller cards */
  :root {
    --pc-w: 34vw;                          /* ~3 cards visible + edge bleed */
    --pc-h-short: clamp(230px, 42vh, 380px);
    --pc-h-tall:  clamp(270px, 50vh, 440px);
  }
  .projects-grid { gap: 12px; }
  .pc-num  { font-size: 10px; height: 16px; }
  .pc-logo { height: 15px; }
  .pc-cat  { font-size: 10px; height: 16px; }

  .cs-overview { padding: 40px var(--gutter) 0; }
  .cs-overview-title { margin-left: 0; font-size: 17px; }
  .cs-meta-label { width: 110px; font-size: 14px; }
  .cs-meta-value { font-size: 17px; }
  .cs-section { padding: 0 var(--gutter); margin-top: 40px; }
  .cs-section-body { font-size: 17px; }
  .cs-colors { padding: 0 var(--gutter); }
  .cs-colors-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
  .cs-swatch-circle { width: 80px; height: 80px; }
  .cs-type-grid { grid-template-columns: 1fr; }
  .cs-strategy-table-wrapper { position: relative; }
  .cs-strategy-table { display: block; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .cs-strategy-table::-webkit-scrollbar { display: none; }
  .cs-table-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.82);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }
  .cs-table-arrow.visible { display: flex; }
  .cs-table-arrow--prev { left: 4px; }
  .cs-table-arrow--next { right: 4px; }
  .cs-table-arrow:active { background: rgba(0,0,0,1); }
  .cs-footer-nav { padding: 0 var(--gutter); flex-direction: column; gap: 24px; align-items: center; }
  .cs-footer-nav a { text-align: center; }
  .cs-hero img.cs-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cs-divider { padding: 0 var(--gutter); }

  .about-section { padding: 48px 24px; align-items: flex-start; }
  .about-inner {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-areas:
      "image title"
      "body  body";
    column-gap: 20px;
    row-gap: 28px;
    padding: 0;
  }

  .about-title-col { order: unset; align-items: flex-start; text-align: left; align-self: center; padding-bottom: 0; margin-bottom: 0; width: auto; }
  .about-image-col { order: unset; display: block; justify-content: unset; margin-bottom: 0; }
  .about-body-col  { order: unset; align-items: flex-start; text-align: left; width: 100%; grid-column: 1 / -1; }

  .about-image-wrapper { width: 120px; overflow: hidden; }
  .about-photo { width: 120px; height: auto; max-height: none; object-fit: cover; object-position: center top; }
  .about-offset-box { top: 12px; right: -12px; }

  .about-bio p {
    font-size: 15.5px;
    line-height: 1.72;
    text-align: left;
    margin-bottom: 18px;
  }
  .about-chapter { margin-bottom: 24px; }
  .about-chapter-label {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.07em;
    margin-bottom: 8px;
  }
  .about-email-label {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.07em;
  }
  .about-email {
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    margin-top: 20px;
  }
  .about-links { justify-content: flex-start; flex-direction: row; gap: 24px; }
  .about-links a {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.07em;
  }

  /* ── Case study image containers: reduce side padding ── */
  .cs-full-image,
  .cs-image-grid,
  .cs-signage-grid,
  .cs-editorial-rows,
  .cs-contained-image { padding: 0 var(--gutter) !important; }

  /* ── Section body: full width on mobile ── */
  .cs-section-body { max-width: 100%; }

  /* ── Type grid: horizontal scroll on mobile ── */
  .cs-type-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .cs-type-grid::-webkit-scrollbar { display: none; }
  .cs-type-specimen {
    flex-shrink: 0;
    width: 240px;
    scroll-snap-align: start;
  }

  /* ── Signage grid: stack single column ── */
  .cs-signage-grid { grid-template-columns: 1fr; }
  .cs-signage-grid .cs-signage-left,
  .cs-signage-grid .cs-signage-right { display: block; }
  .cs-signage-grid .cs-signage-left img { height: auto; object-fit: unset; }
  .cs-signage-text { padding: 24px 0; }

  /* ── Editorial rows: stack single column ── */
  .cs-editorial-row { grid-template-columns: 1fr; }
  .cs-editorial-row--email { display: flex; flex-direction: column-reverse; }
  .cs-editorial-row--equal-height { align-items: start; }
  .cs-editorial-row--equal-height .cs-editorial-cell img { height: auto; object-fit: unset; }
  .cs-editorial-text-cell { padding: 24px 0; text-align: center; align-items: center; }

  /* ── Photography: hide desktop mosaic, show mobile carousel ── */
  .cs-photography-desktop { display: none; }
  .cs-photography-mobile  { display: flex; }

  /* ── Undertone: hide desktop image, show mobile carousel ── */
  /* ── Prototype rows: stack on mobile ── */
  .cs-proto-rows { padding: 0 var(--gutter); gap: 56px; }
  .cs-proto-row { display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .cs-proto-gif { width: 100%; max-width: 320px; }
  .cs-proto-copy { text-align: center; }
  .cs-proto-copy .cs-section-label,
  .cs-proto-copy .cs-bullet-list { text-align: center !important; }
  .cs-proto-copy .cs-bullet-list { list-style-position: inside !important; padding-left: 0 !important; }
  .cs-proto-copy--left { order: 2; }
  .cs-proto-copy--right { order: 3; }
  .cs-proto-gif { order: 1; }
  .cs-proto-row--swap .cs-proto-copy--right { order: 2; }
  .cs-proto-row--swap .cs-proto-copy--left { order: 3; }

  .cs-undertone-spacing { margin-top: 64px; }
  .cs-undertone-desktop { display: none; }
  .cs-quiz-desktop { display: none; }
  .cs-quiz-mobile { display: flex; flex-direction: column; overflow-x: unset; gap: 24px; align-items: center; width: 100vw; margin-left: calc(-50vw + 50%); padding: 0 20px; box-sizing: border-box; }
  .cs-quiz-mobile img { width: 100%; height: auto; }
  .cs-bme-desktop { display: none; }
  .cs-bme-mobile { display: flex; }
  .cs-undertone-mobile  { display: flex; }

  /* ── Brand system: hide desktop images, show mobile carousel ── */
  .cs-brand-desktop { display: none; }
  .cs-brand-mobile  { display: flex; }
  .cs-signage-grid  { display: none; }
  .cs-signage-mobile { display: block; }
  .cs-print-desktop { display: none; }
  .cs-print-mobile  { display: block; }
  .cs-full-image img { border-radius: 0; }
  .cs-editorial-rows { margin-top: 16px; }

  /* ── Landing page device mockup: extra padding so phone edge shows fully ── */
  .cs-landing-page-image {
    padding: 0 16px;
    display: flex;
    justify-content: center;
  }
  .cs-landing-page-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* ── Mobile image carousel base style ── */
  .cs-mobile-carousel {
    overflow-x: auto;
    display: flex;
    gap: 16px;
    padding: 0 var(--gutter);
    margin-top: 40px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cs-mobile-carousel::-webkit-scrollbar { display: none; }
  .cs-mobile-carousel img {
    height: 320px;
    width: auto;
    flex-shrink: 0;
    border-radius: 12px;
    scroll-snap-align: start;
    display: block;
  }
  .cs-signage-carousel {
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .cs-signage-carousel img {
    width: calc(50% - 8px);
    height: auto;
    flex-shrink: 0;
  }
  .cs-brand-mobile {
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .cs-brand-mobile img {
    width: 100%;
    height: auto;
    flex-shrink: unset;
  }
}

@media (max-width: 600px) {
  .projects-grid { gap: 12px; }
  .cs-hero { height: 400px; }
  .cs-overview { padding: 32px 20px 0; }
  .home-kh-logo { width: 48px; }
}

/* ─── About Preview Section (Homepage) ───────────────────── */
/* Issue 3: fade-in via IntersectionObserver */
.about-preview-section {
  padding: 100px clamp(40px, 6vw, 120px);
  opacity: 0;
  transform: translateY(16px);
}

.about-preview-section.in-view {
  animation: cardFadeUp 0.7s ease-out forwards;
}

.about-preview-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Issue 1: wrapper height matches photo so offset box doesn't overflow */
.about-preview-image-wrapper {
  position: relative;
  width: 152px;
  height: 514px;
  flex-shrink: 0;
}

.about-preview-offset-box {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 100%;
  height: 100%;
  background: #E5E4E2;
  z-index: 0;
}

.about-preview-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-preview-text-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 385px;
}

.about-preview-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-preview-monogram {
  width: 51px;
  height: auto;
  margin-bottom: 16px;
}

.about-preview-name {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.about-preview-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-preview-bio {
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  color: #000;
  margin-bottom: 20px;
}

.about-preview-link {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  color: #202020;
  margin-top: 12px;
  transition: opacity 0.3s ease;
}

.about-preview-link:hover { opacity: 0.6; }

/* Issue 2: mobile stacking — header above image, body below */
@media (max-width: 768px) {
  .about-preview-inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .about-preview-text-col {
    display: contents;
  }
  .about-preview-header {
    order: 1;
    margin-bottom: 12px;
  }
  .about-preview-image-col {
    order: 2;
    margin-bottom: 40px;
  }
  .about-preview-body {
    order: 3;
  }
  .about-preview-image-wrapper {
    width: 110px;
    height: 370px;
  }
  .about-preview-offset-box {
    top: 8px;
    left: 8px;
  }
}


/* ─── Scroll Fade-In Animation ───────────────────────────── */
.cs-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.cs-fade.cs-fade--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Responsive visibility utilities ─── */
.cs-mobile-only { display: none; }
@media (max-width: 900px) {
  .cs-mobile-only { display: block; }
}

/* ─── Mobile hamburger — pinned 16px top-left, half size (all pages) ──
   The menu button sits in a 16px top-left corner of the viewport and is
   halved in size on mobile; the transparent nav bar collapses so it never
   blocks page content. */
@media (max-width: 900px) {
  body > nav {
    height: auto;
    padding: 0;
    pointer-events: none;   /* transparent bar shouldn't block content */
  }
  .nav-menu-btn {
    position: fixed;
    top: 16px;
    left: 16px;
    gap: 3px;               /* halved from 5px */
    padding: 0;
    z-index: 400;
    pointer-events: auto;   /* button stays interactive */
  }
  .nav-menu-btn span {
    width: 14px;            /* half of 28px */
    height: 1.5px;
  }
  .nav-menu-btn.open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
  .nav-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-menu-btn.open span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
}

/* ─── Case-study desktop nav ─────────────────────────────────
   Shrink the nav bar to the height of the white strip above the hero
   (same value as .case-study padding-top), so the menu + links sit
   vertically centred in that space rather than overlapping the hero. */
@media (min-width: 901px) {
  body:has(main.case-study) > nav {
    height: clamp(48px, 5vw, 64px);
  }
}

/* ─── Nav links ──────────────────────────────────────────────
   The WORK / ABOUT top-bar links duplicate the hamburger menu, so
   hide them everywhere. Case-study pages get a BACK link instead. */
.nav-links { display: none !important; }

/* BACK link — same type treatment as the old WORK / ABOUT links,
   pinned to the top-right corner. */
.nav-back {
  margin-left: auto;
  font-size: var(--nav-font);
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
.nav-back:hover { opacity: 0.5; }

/* On mobile the nav bar collapses, so pin BACK to the top-right corner */
@media (max-width: 900px) {
  .nav-back {
    position: fixed;
    top: 16px;
    right: 16px;
    margin: 0;
    z-index: 400;
    pointer-events: auto;
    font-size: 15px;
  }
}