/* ============================================================
   TOKENS — dark theme
   ============================================================ */
:root{
  --ink:#18181B;
  --ink-2:#1A1B21;
  --ink-3:#242631;
  --ink-soft:#8F919D;
  --paper:#F2EFE6;
  --paper-2:#1A1B21;
  --paper-3:#242631;
  --blue:#E8621A;
  --blue-dim:#F3A576;
  --pink:#E93D82;
  --amber:#F2A93B;
  --amber-soft:#F6D9A0;
  --green:#7FBF8C;
  --line: rgba(242,239,230,0.10);
  --line-dark: rgba(242,239,230,0.14);
  --header-h: 52px;
  --footer-h: 40px;
  --maxw: 1180px;
  --toolbar-maxw: 900px;
  --ruler-w: 22px;
  --gutter-left: calc(var(--ruler-w) + 24px);
  --ff-display: 'Syne', sans-serif;
  --ff-body: 'Source Sans 3', sans-serif;
  --ff-mono: 'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff-body);
  line-height:1.5;
  padding-top:var(--header-h);
  padding-bottom:var(--footer-h);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

.dim{ opacity:0.6; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:28px;
  padding-right:28px;
  box-sizing:border-box;
}

/* ============================================================
   EYEBROW BADGE
   ============================================================ */
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow-badge{
  font-family:var(--ff-mono);
  font-size:11px;
  font-weight:700;
  background:var(--blue);
  color:var(--ink);
  padding:4px 8px;
  border-radius:4px;
  letter-spacing:0.04em;
}
.eyebrow-label{
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-dim);
}

/* ============================================================
   CUSTOM CURSOR — signature element
   ============================================================ */
@media (pointer: fine){
  body{ cursor:none; }
  a, button{ cursor:none; }
}
#crosshair{
  position:fixed;
  top:0; left:0;
  width:30px; height:30px;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  will-change:transform;
  display:none;
}
@media (pointer: fine){
  #crosshair{ display:block; }
}
#cursorDot{
  position:fixed;
  top:0; left:0;
  width:5px; height:5px;
  background:#F2EFE6;
  border-radius:50%;
  pointer-events:none;
  z-index:10000;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  display:none;
}
@media (pointer: fine){
  #cursorDot{ display:block; }
}
#crosshair .ring{
  position:absolute; top:50%; left:50%;
  width:22px; height:22px;
  border:1px solid #F2EFE6;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  transition:opacity 0.15s ease, transform 0.15s ease;
}
#crosshair .square{
  position:absolute; top:50%; left:50%;
  width:42px; height:42px;
  border:1px solid #F2EFE6;
  border-radius:10px;
  transform:translate(-50%,-50%) scale(0.4);
  opacity:0;
  transition:opacity 0.15s ease, transform 0.15s ease;
}
#crosshair.morph .ring{ opacity:0; transform:translate(-50%,-50%) scale(0.4); }
#crosshair.morph .square{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.cursor-label{
  position:absolute;
  top:calc(50% + 28px); left:50%;
  transform:translate(-50%,0);
  font-family:var(--ff-mono);
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#F2EFE6;
  opacity:0;
  transition:opacity 0.15s ease;
  white-space:nowrap;
}
#crosshair.morph .cursor-label{ opacity:1; }

/* ============================================================
   VERTICAL RULER
   ============================================================ */
.ruler-v{
  position:fixed;
  top:var(--header-h);
  bottom:var(--footer-h);
  left:0;
  width:22px;
  background-color:var(--ink-2);
  border-right:1px solid var(--line-dark);
  z-index:499;
  overflow:hidden;
  pointer-events:none;
}
.ruler-tick{
  position:absolute;
  right:0;
  height:1px;
  background:var(--ink-soft);
  opacity:0.45;
  width:5px;
}
.ruler-tick.major{
  width:9px;
  height:1.5px;
  background:var(--paper);
  opacity:0.8;
}
.ruler-num{
  position:absolute;
  right:11px;
  bottom:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:var(--ff-mono);
  font-size:9px;
  line-height:0.95;
  color:var(--ink-soft);
}
.ruler-num span{ display:block; }
.ruler-marker{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:2px;
  background:var(--blue);
  box-shadow:0 0 6px 0 rgba(232,98,26,0.7);
  transform:translateY(-50%);
  z-index:2;
}
@media (max-width:760px){
  .ruler-v{ display:none; }
}

/* ============================================================
   HEADER / TOOLBAR
   ============================================================ */
.toolbar{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  background:rgba(26,27,33,0.5);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  color:var(--paper);
  z-index:500;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line-dark);
}
.toolbar-inner{
  position:relative;
  width:100%;
  padding:0 24px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}
.brand-mark{
  position:absolute;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  flex-shrink:0;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.brand-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.brand-mark:hover{ opacity:0.85; transform:translateY(-50%) scale(1.05); }
.nav-inline{ grid-column:2; justify-self:center; }
.status-pill{
  grid-column:3;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:4px 0;
  white-space:nowrap;
}
.status-pill .status-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:#4ADE80;
  flex-shrink:0;
  animation:pulseDot 2.6s ease-in-out infinite;
}
@keyframes pulseDot{
  0%, 100%{ opacity:1; box-shadow:0 0 0 4px rgba(74,222,128,0.28); }
  50%{ opacity:0.35; box-shadow:0 0 0 8px rgba(74,222,128,0.06); }
}
.nav-inline{
  display:flex;
  align-items:center;
  gap:4px;
  font-family:var(--ff-body);
  font-size:15px;
  font-weight:300;
}
.nav-inline a{
  position:relative;
  padding:6px 12px;
  border-radius:7px;
  opacity:0.7;
  transition:opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.nav-inline a:hover{ opacity:1; background:rgba(242,239,230,0.06); }
.nav-inline a.active{
  opacity:1;
  color:var(--paper);
  background:var(--ink-3);
  font-weight:600;
}

@media (max-width:760px){
  :root{ --header-h:84px; }
  .toolbar-inner{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    row-gap:6px;
    padding:10px 16px;
  }
  .brand-mark{
    left:14px;
    top:24px;
    width:26px;
    height:26px;
    transform:translateY(-50%);
  }
  .brand-mark:hover{ transform:translateY(-50%) scale(1.05); }
  .nav-inline{
    grid-column:1;
    grid-row:1;
    justify-self:center;
    flex-wrap:wrap;
    justify-content:center;
    gap:2px 8px;
    font-size:12px;
  }
  .nav-inline a{ padding:4px 8px; }
  .status-pill{
    grid-column:1;
    grid-row:2;
    justify-self:center;
    font-size:9.5px;
  }
}

/* ============================================================
   LAYERS PANEL — floating, draggable
   ============================================================ */
.panel{
  position:fixed;
  top:96px;
  right:28px;
  width:210px;
  background:rgba(26,27,33,0.5);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  color:var(--paper);
  border:1px solid rgba(242,239,230,0.16);
  border-radius:14px;
  box-shadow:0 24px 48px -14px rgba(0,0,0,0.65), inset 0 1px 0 rgba(242,239,230,0.08);
  z-index:601;
  opacity:0;
  transform:scale(0.94);
  pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;
  overflow:hidden;
}
.panel.open{ opacity:1; transform:scale(1); pointer-events:auto; }
.panel.dragging{ transition:none; box-shadow:0 30px 60px -10px rgba(0,0,0,0.75); }

.panel-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 10px 10px 12px;
  background:rgba(242,239,230,0.16);
  border-bottom:1px solid var(--line-dark);
  cursor:grab;
  -webkit-user-select:none;
  user-select:none;
  touch-action:none;
}
.panel-head:active{ cursor:grabbing; }
.grip{
  display:grid;
  grid-template-columns:3px 3px;
  grid-auto-rows:3px;
  gap:3px;
  width:10px;
  flex-shrink:0;
}
.grip span{ width:3px; height:3px; border-radius:50%; background:var(--ink-soft); }
.panel-title{
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:0.1em;
  color:var(--ink-soft);
  flex:1;
}
.panel-count{
  font-family:var(--ff-mono);
  font-size:11px;
  color:var(--ink-soft);
}
.panel-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex-shrink:0;
  border:1px solid var(--line-dark);
  border-radius:4px;
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--ff-mono);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.panel-toggle:hover{ background:var(--ink-3); color:var(--paper); border-color:rgba(242,239,230,0.3); }
/* Swipe-condense body — collapses to 0 height so only .panel-head remains
   visible when minimized; expands back via the same max-height transition
   (mirrors the accordion open/close pattern used in the case pages). */
.panel-body{
  overflow:hidden;
  transition:max-height 0.32s cubic-bezier(0.65,0,0.35,1);
}
.panel.minimized .panel-body{ max-height:0 !important; }
.panel-list{ padding:6px; }
.panel-list li + li{ margin-top:1px; }
.panel-list a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 8px;
  border-radius:8px;
  font-family:var(--ff-body);
  font-size:14px;
  font-weight:300;
  color:var(--ink-soft);
  transition:background 0.15s ease, color 0.15s ease;
}
.panel-list a:hover{ background:var(--ink-3); color:var(--paper); }
.panel-list a .dot{
  width:9px; height:9px;
  border-radius:50%;
  border:1.5px solid var(--ink-soft);
  flex-shrink:0;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.panel-list a.active{
  background:rgba(232,98,26,0.16);
  color:var(--paper);
}
.panel-list a.active .dot{
  background:var(--amber);
  border-color:var(--amber);
}
.panel-foot{
  display:flex;
  justify-content:space-between;
  padding:10px 14px;
  border-top:1px solid var(--line-dark);
  font-family:var(--ff-mono);
  font-size:11px;
  color:var(--ink-soft);
  letter-spacing:0.05em;
}

@media (max-width:760px){
  .panel{ top:80px; right:12px; width:184px; }
  .panel-head{ cursor:default; }
}

/* ============================================================
   STATUS BAR (footer HUD)
   ============================================================ */
.statusbar{
  position:fixed;
  bottom:0; left:0; right:0;
  height:var(--footer-h);
  background:var(--ink-2);
  color:var(--ink-soft);
  z-index:500;
  border-top:1px solid var(--line-dark);
  font-family:var(--ff-mono);
  font-size:11px;
  display:flex;
  align-items:center;
}
.statusbar-inner{
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  letter-spacing:0.03em;
  overflow-x:auto;
  white-space:nowrap;
}
.statusbar-inner .doc{ color:var(--blue-dim); }
.statusbar-inner .sep{ opacity:0.4; }
.hud-group{ display:flex; align-items:center; gap:16px; }
@media (max-width:640px){
  .hud-hide-sm{ display:none; }
}

/* ============================================================
   ARTBOARD SECTIONS — shared
   ============================================================ */
.artboard{
  position:relative;
  padding:110px 0 90px;
  border-bottom:1px solid var(--line);
}
.artboard-marks span{
  position:absolute;
  font-family:var(--ff-mono);
  font-size:11px;
  color:var(--ink-soft);
  opacity:0.6;
}
.artboard-marks .tl{ top:18px; left:calc(var(--ruler-w) + 18px); }
.artboard-marks .tr{ top:18px; right:18px; }
.artboard-marks .bl{ bottom:18px; left:calc(var(--ruler-w) + 18px); }
.artboard-marks .br{ bottom:18px; right:18px; }
.artboard-marks span::before{ content:"+"; margin-right:4px; }

.section-head{
  position:relative;
  margin-bottom:56px;
  text-align:left;
}
.work-wave{
  position:absolute;
  left:380px;
  top:-85px;
  width:auto;
  height:250px;
  pointer-events:none;
}
@media (max-width:1100px){
  .work-wave{ left:auto; right:0; top:-40px; height:150px; opacity:0.9; }
}
@media (max-width:480px){
  .work-wave{ right:-4px; top:-24px; height:110px; }
}
.section-title{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(32px, 5vw, 56px);
  line-height:1;
  letter-spacing:0.01em;
  margin:0 0 10px;
}
.contact-title{
  font-size:clamp(40px, 6.5vw, 72px);
}
.section-sub{
  font-family:var(--ff-mono);
  font-size:13px;
  color:var(--ink-soft);
  margin:0;
}

/* ============================================================
   COVER
   ============================================================ */
#cover{
  min-height:calc(100vh - var(--header-h) - var(--footer-h));
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:60px;
  padding-bottom:60px;
  overflow:hidden;
}
.cover-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
}
.cover-name-bleed{
  width:100%;
  max-width:var(--maxw);
  box-sizing:border-box;
  padding-left:28px;
  padding-right:28px;
  margin:26px auto 34px;
  text-align:left;
}
.cover-name{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0.04em;
}
.name-line{
  position:relative;
  display:block;
  font-family:var(--ff-display);
  font-weight:800;
  font-size:clamp(44px, 9vw, 128px);
  line-height:0.98;
  letter-spacing:0.01em;
  text-transform:uppercase;
  color:var(--paper);
}
.name-line.accent{ color:var(--blue); }

/* Recurring hero-title glitch flash — reverse-engineered from a screen
   recording of the reference site. It's a brief (~150ms) pop that hits one
   name line at a time, at randomized intervals, forever: the line's fill
   snaps to the accent color and a bright green duplicate of the same text
   appears slightly offset underneath/behind it via mix-blend-mode, reading
   as a quick chromatic "double-exposure" glitch before settling back. */
.name-line.glitch-flash{ color:var(--blue); }
.name-line.glitch-flash::after{
  content:attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  color:#3EFFB2;
  mix-blend-mode:screen;
  transform:translate(-4px, 4px);
  pointer-events:none;
}
.tag-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin-bottom:8px;
}
.tag-pill{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  border:1px solid var(--line-dark);
  border-radius:20px;
  padding:8px 14px;
  white-space:nowrap;
}
.cover-stats{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  margin:0 0 34px 0;
}
@media (max-width:900px){
  .cover-stats{ padding-right:130px; }
}
@media (max-width:480px){
  .cover-stats{ padding-right:105px; gap:28px; row-gap:18px; }
}
.cover-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-start; }

.btn{
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:0.08em;
  padding:14px 24px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--paper);
  transition:transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary{
  background:var(--blue);
  color:var(--paper);
  border-color:var(--blue);
}
.btn-primary:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); transform:translateY(-2px); }
.btn-ghost{
  background:var(--ink-3);
  color:var(--paper);
  border-color:var(--line-dark);
}
.btn-ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); transform:translateY(-2px); }

.cover-wave{
  position:absolute;
  right:6%;
  top:50%;
  width:min(22vw, 220px);
  height:auto;
  border-radius:12px;
  transform:translateY(-50%);
  pointer-events:none;
}
@media (max-width:900px){
  .cover-wave{ width:110px; right:34px; top:62%; transform:none; z-index:-1; opacity:1; }
}
@media (max-width:480px){
  .cover-wave{ width:92px; right:22px; top:64%; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:32px;
  align-items:start;
}
@media (max-width:800px){ .about-grid{ grid-template-columns:1fr; } }
.about-copy{ min-width:0; }

.about-video-wrap{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:1080/1920;
  background:transparent;
  max-width:320px;
  margin-top:10px;
}
@media (min-width:801px){
  .about-video-wrap{ width:355px; height:569px; aspect-ratio:auto; max-width:none; }
}
@media (max-width:800px){
  .about-video-wrap{ max-width:240px; margin:0 auto; }
}
.about-video{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:50% 0%;
  display:block;
  transition:opacity 0.4s ease;
}
.about-real-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  opacity:0;
  transform:scale(1.03);
  transition:opacity 0.4s ease, transform 0.5s ease;
  pointer-events:none;
}
.about-video-wrap.flipped .about-real-photo{
  opacity:1;
  transform:scale(1);
}
.about-video-wrap.flipped .about-video{
  opacity:0;
}

.about-headline{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(27px,3.9vw,43px);
  line-height:1.22;
  margin:0 0 24px;
}
.about-headline .accent{ color:var(--blue); }
.about-sub{
  font-size:18px;
  color:var(--ink-soft);
  max-width:640px;
  margin:0 0 16px;
}
.stat{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.stat-num{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:32px;
  line-height:1.15;
  color:var(--blue-dim);
  white-space:nowrap;
}
.stat-label{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}

.availability-badge{
  display:inline-block;
  margin-top:24px;
  padding:12px 20px;
  border:1px solid rgba(127,191,140,0.4);
  border-radius:16px;
  font-family:var(--ff-mono);
  font-size:10.5px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--green);
  background:rgba(127,191,140,0.06);
  white-space:normal;
  line-height:1.6;
  max-width:100%;
}
@media (max-width:640px){
  .availability-badge{ font-size:9px; padding:10px 16px; }
}

/* ============================================================
   WORK
   ============================================================ */
.work-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}
@media (max-width:760px){ .work-grid{ grid-template-columns:1fr; } }

.card{
  position:relative;
  background:var(--paper-2);
  border:1px solid transparent;
  border-radius:14px;
  padding:6px;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--pink);
  box-shadow:0 0 0 1px rgba(233,61,130,0.25), 0 18px 30px -18px rgba(0,0,0,0.55);
}
.card:has(.thumb.fryshack):hover{
  border-color:#ed2f26;
  box-shadow:0 0 0 1px rgba(237,47,38,0.3), 0 18px 30px -18px rgba(0,0,0,0.55);
}
.card:has(.thumb.mml):hover{
  border-color:#f61702;
  box-shadow:0 0 0 1px rgba(246,23,2,0.3), 0 18px 30px -18px rgba(0,0,0,0.55);
}
.card:has(.thumb.currency):hover{
  border-color:#f8e542;
  box-shadow:0 0 0 1px rgba(248,229,66,0.3), 0 18px 30px -18px rgba(0,0,0,0.55);
}
.card:has(.thumb.health):hover{
  border-color:#2a378b;
  box-shadow:0 0 0 1px rgba(42,55,139,0.3), 0 18px 30px -18px rgba(0,0,0,0.55);
}
.card-corner{
  position:absolute;
  width:14px; height:14px;
  opacity:0;
  transition:opacity 0.25s ease;
  color:var(--blue);
}
.card:hover .card-corner{ opacity:1; }
.card-corner::before, .card-corner::after{
  content:"";
  position:absolute;
  background:currentColor;
}
.card-corner::before{ top:50%; left:0; width:100%; height:1px; }
.card-corner::after{ left:50%; top:0; height:100%; width:1px; }
.cc-tl{ top:8px; left:8px; }
.cc-tr{ top:8px; right:8px; }
.cc-bl{ bottom:8px; left:8px; }
.cc-br{ bottom:8px; right:8px; }

.thumb{
  position:relative;
  height:260px;
  border-radius:10px;
  margin-bottom:0;
  overflow:hidden;
  background:var(--paper-3);
}
.thumb-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:40px 16px 16px;
  background:linear-gradient(to top, rgba(11,11,13,0.92) 10%, transparent 100%);
  z-index:2;
}
.thumb-badge{
  position:absolute;
  top:10px; left:10px;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff-mono);
  font-size:10px;
  font-weight:600;
  padding:4px 8px;
  border-radius:6px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  z-index:2;
}
.thumb-tag{
  position:absolute;
  top:10px; right:10px;
  background:var(--amber);
  color:var(--ink);
  font-family:var(--ff-mono);
  font-size:10px;
  font-weight:600;
  padding:4px 8px;
  border-radius:6px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  z-index:2;
}
.thumb-tag.tag-wip{ background:var(--ink-3); color:var(--paper); border:1px solid var(--line-dark); }

.thumb.fryshack{ background:var(--paper-3); }
.thumb-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.thumb.currency{ background:linear-gradient(135deg, #1B2A4A 0%, var(--paper-3) 100%); }
.thumb.glitch{ background:var(--ink); }
.thumb.health{ background:linear-gradient(135deg, var(--paper-3) 0%, #12233D 100%); }
.thumb.mml{ background:var(--paper-3); }
.thumb.wip{ background:repeating-linear-gradient(135deg, var(--paper-3) 0 14px, var(--ink-2) 14px 28px); }

.card-title{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:20px;
  margin:0 0 4px;
  letter-spacing:0.01em;
  color:var(--paper);
}
.card-desc{
  font-size:13px;
  color:rgba(242,239,230,0.75);
  margin:0;
}

/* ============================================================
   EXPERIENCE
   ============================================================ */
.timeline{
  border-top:1px solid var(--line);
}
.rev{
  display:grid;
  grid-template-columns:110px 1fr auto;
  gap:24px;
  align-items:start;
  padding:30px 0;
  border-bottom:1px solid var(--line);
}
@media (max-width:700px){
  .rev{ grid-template-columns:1fr; gap:12px; }
}
.rev-logo{
  width:64px;
  height:64px;
  border-radius:10px;
  background:var(--paper-2);
  border:1px solid var(--line-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.rev-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.rev-logo-fallback{
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:16px;
  letter-spacing:0.02em;
  color:var(--ink-soft);
}
.rev.is-latest .rev-logo{
  border-color:var(--blue);
}
.rev.is-latest .rev-logo-fallback{
  color:var(--blue-dim);
}
.rev-role{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:20px;
  margin:0 0 4px;
}
.rev-org{
  font-size:15px;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.rev-tags{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.rev-meta{
  font-family:var(--ff-mono);
  font-size:12px;
  color:var(--ink-soft);
  text-align:right;
  white-space:nowrap;
}
@media (max-width:700px){ .rev-meta{ text-align:left; } }

/* ============================================================
   EDUCATION & CAPABILITIES
   ============================================================ */
.edu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
@media (max-width:800px){ .edu-grid{ grid-template-columns:1fr; } }

.edu-item{ margin-bottom:32px; }
.edu-item:last-child{ margin-bottom:0; }
.edu-dates{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--blue-dim);
  margin-bottom:8px;
}
.edu-degree{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:20px;
  margin:0 0 4px;
}
.edu-school{
  font-size:14px;
  color:var(--ink-soft);
  margin:0 0 8px;
}
.edu-desc{
  font-size:14px;
  color:var(--ink-soft);
  margin:0;
}

.cap-group{ margin-bottom:28px; }
.cap-group:last-child{ margin-bottom:0; }
.cap-group-label{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:12px;
}
.cap-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.cap-tag{
  border:1px solid var(--line-dark);
  padding:8px 12px;
  border-radius:6px;
  font-family:var(--ff-mono);
  font-size:12px;
  color:var(--paper);
  white-space:nowrap;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-info-row{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:17px;
  color:var(--ink-soft);
  margin-bottom:32px;
  flex-wrap:wrap;
}
.contact-info-row a.contact-info-item:hover{ color:var(--blue-dim); }
.contact-info-sep{ opacity:0.4; }

.contact-cta-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

#contact{ padding-bottom:36px; }

footer.credit{
  text-align:center;
  padding:16px 0 20px;
  font-family:var(--ff-mono);
  font-size:11px;
  color:var(--ink-soft);
  letter-spacing:0.04em;
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */
#loader{
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 640px 460px at 50% 48%, rgba(242,239,230,0.07), transparent 70%),
    var(--ink);
  color:var(--paper);
  z-index:9998;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:opacity 0.5s ease;
}
#loader.done{ opacity:0; pointer-events:none; }
.loader-box{ width:min(420px, 84vw); }
.loader-file{
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--blue-dim);
  margin-bottom:6px;
  text-transform:uppercase;
}
.loader-name{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:24px;
  margin-bottom:26px;
  word-break:break-all;
}
.loader-track{
  height:2px;
  background:var(--line-dark);
  margin-bottom:14px;
  overflow:hidden;
}
.loader-fill{
  height:100%;
  width:0%;
  background:var(--blue);
}
.loader-steps{
  font-family:var(--ff-mono);
  font-size:11px;
  color:var(--ink-soft);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.loader-steps li{ opacity:0.4; transition:opacity 0.2s ease, color 0.2s ease; }
.loader-steps li::before{ content:"· "; }
.loader-steps li.done{ opacity:1; color:var(--green); }
.loader-steps li.done::before{ content:"✓ "; color:var(--green); }
.loader-pct{
  font-family:var(--ff-mono);
  font-size:11px;
  text-align:right;
  color:var(--ink-soft);
  margin-bottom:2px;
}

/* ============================================================
   CASE STUDY OVERLAY
   ============================================================ */
.case-overlay{
  position:fixed;
  inset:0;
  z-index:800;
  display:none;
}
.case-overlay.open{ display:block; }
body.case-open{ overflow:hidden; }

.case-page{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  background:var(--ink);
  overflow:hidden;
}
.case-page::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:70vw;
  height:60vh;
  max-width:900px;
  max-height:600px;
  background:radial-gradient(ellipse at top right, var(--case-accent, rgba(237,47,38,0.22)), transparent 65%);
  pointer-events:none;
  z-index:0;
}
.case-page.active{ display:flex; animation:caseFadeIn 0.4s ease; }
@keyframes caseFadeIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.case-topbar, .case-scroll{ position:relative; z-index:1; }

.case-topbar{
  flex:0 0 auto;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  border-bottom:1px solid var(--line-dark);
  background:rgba(11,11,13,0.9);
  backdrop-filter:blur(12px);
}
.case-file{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--ff-mono);
  font-size:12px;
  color:var(--ink-soft);
}
.case-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--case-accent-solid, #ed2f26);
  flex-shrink:0;
}
.case-file-name{ color:var(--paper); }
.case-file-sep{ opacity:0.5; }
.case-close{
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:0.04em;
  background:var(--paper-2);
  color:var(--paper);
  border:1px solid var(--line-dark);
  border-radius:8px;
  padding:8px 14px;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.case-close:hover{ background:var(--ink-3); border-color:var(--case-accent-solid, #ed2f26); }

.case-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  padding:64px 40px 100px;
}
.case-inner{
  max-width:1200px;
  margin:0 auto;
}
.case-eyebrow{
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--case-accent-solid, #ed2f26);
  margin-bottom:10px;
}
.case-title{
  font-family:var(--ff-display);
  font-weight:800;
  font-size:clamp(40px, 7vw, 76px);
  line-height:1;
  margin:0 0 12px;
}
.case-subtitle{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(18px, 2.4vw, 24px);
  color:var(--paper);
  margin:0 0 8px;
}
.case-tagline{
  font-style:italic;
  color:var(--ink-soft);
  font-size:16px;
  margin:0 0 32px;
}

.case-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  padding-top:24px;
  border-top:1px solid var(--line-dark);
  margin-bottom:24px;
}
.case-meta{ display:flex; flex-direction:column; gap:6px; }
.case-meta-label{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.case-meta-value{
  font-family:var(--ff-body);
  font-weight:400;
  font-size:16px;
  color:var(--paper);
  white-space:nowrap;
}
.case-tools-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:36px;
}
.case-tool-row{ display:flex; flex-wrap:wrap; gap:10px; }
.case-tool-pill{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:0.03em;
  color:var(--paper);
  background:var(--paper-2);
  border:1px solid var(--line-dark);
  border-radius:999px;
  padding:6px 14px 6px 6px;
  white-space:nowrap;
}
.case-tool-icon{
  width:20px; height:20px;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ff-display);
  font-weight:800;
  font-size:10px;
  color:#fff;
  flex-shrink:0;
}
.case-tool-ps{ background:#0B5A9E; }
.case-tool-ai{ background:#B9560E; }
.case-tool-ae{ background:#5B1A8C; }
.case-tool-bl{ background:#B96C0E; }
.case-tool-id{ background:#B4136E; }
.case-tool-web{ background:#0E8C6B; }
.case-tool-cv{ background:#00A3AF; }

.case-accordion-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--paper-2);
  border:none;
  border-radius:12px;
  padding:16px 20px;
  margin:28px 0 0;
  cursor:pointer;
  text-align:left;
  color:var(--paper);
  transition:background 0.2s ease;
}
.case-accordion-head:hover{ background:var(--ink-3); }
.case-accordion-tag{
  font-family:var(--ff-mono);
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:var(--case-accent-solid, #ed2f26);
  color:var(--paper);
  padding:3px 8px;
  border-radius:5px;
  flex-shrink:0;
}
.case-accordion-title{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:18px;
  flex:1;
}
.case-accordion-icon{
  font-family:var(--ff-mono);
  font-size:18px;
  color:var(--ink-soft);
  flex-shrink:0;
}
.case-accordion-body{
  overflow:hidden;
  max-height:0;
  opacity:0;
  padding:0 4px;
  transition:max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
  margin:0 0 0;
}
.case-accordion-body.open{
  opacity:1;
  margin:16px 0 28px;
}

.case-triad{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
@media (max-width:800px){ .case-triad{ grid-template-columns:1fr; } }
.case-triad-card{
  position:relative;
  background:var(--paper-2);
  border:none;
  border-left:3px solid var(--case-accent-solid, #ed2f26);
  border-radius:4px;
  padding:20px;
}
.case-triad-tag{
  position:absolute;
  top:16px; right:16px;
  font-family:var(--ff-mono);
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--case-accent-solid, #ed2f26);
}
.case-triad-card h4{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:17px;
  margin:0 0 10px;
}
.case-triad-card p{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}

.case-section{ margin:36px 0 44px; }
.case-section-label{
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line-dark);
  padding-bottom:10px;
  margin-bottom:20px;
}
.case-motion-label{
  display:inline-block;
  border-bottom:none;
  padding-bottom:8px;
  position:relative;
}
.case-motion-label::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:36px;
  height:2px;
  background:var(--case-accent-solid, #ed2f26);
}

.case-standalone-box{
  position:relative;
  aspect-ratio:5/2;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  margin:24px 0;
  background:var(--paper-2);
  border:1px dashed var(--line-dark);
  border-radius:10px;
  font-family:var(--ff-mono);
  font-size:12px;
  color:var(--ink-soft);
}
/* Taller variant for a full website mockup (e.g. Currency Archive's
   "visit site" placeholder), which needs more height than a standard
   4:3 photo box. The CTA sits pinned in the bottom-right corner. */
.case-standalone-box.mockup-box{ aspect-ratio:3/2; }
.case-standalone-box.has-image .case-g-item{
  width:100%;
  height:100%;
  margin:0;
}
.case-standalone-box .case-mockup-visit{
  position:absolute;
  right:20px;
  bottom:20px;
  z-index:1;
}
.case-standalone-box.has-image{
  display:block;
  padding:0;
  margin:24px 0;
  border:none;
  overflow:hidden;
  cursor:zoom-in;
}
.case-standalone-box.has-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  display:block;
}
/* Poster wall mockup — sized to the mockup photo's own ratio and set to
   contain rather than cover, so the whole shot shows with no cropping. */
.case-standalone-box.poster-mockup-box{ aspect-ratio:1081/521; }
.case-standalone-box.poster-mockup-box img{ object-fit:contain; }
/* Business card mockup — box is shorter than the source photo's own
   ratio, so object-fit:cover naturally trims the top and bottom edges
   (the full, uncropped source file is still what's loaded). */
.case-standalone-box.business-card-box{ aspect-ratio:2650/1200; }
.case-standalone-box.business-card-box img{ object-fit:cover; object-position:center center; }

/* A plain row of full posters shown at their natural portrait shape —
   no card background or fixed aspect-ratio box, images just sit side by
   side the way they'd hang on a wall. */
.case-poster-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:14px;
}
.case-poster-row .case-g-item{ flex:1 1 0; min-width:0; background:none; }
@media (max-width:700px){
  .case-poster-row{ flex-wrap:wrap; }
  .case-poster-row .case-g-item{ flex:1 1 40%; }
}

.case-process-grid .case-process-item{
  aspect-ratio:4/3;
  background:var(--paper-2);
  border:1px solid var(--line-dark);
}
.case-process-grid .case-process-item img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--paper-2);
}
.case-process-grid .case-process-item.fill-cover img{ object-fit:cover; }
/* Envelope Design section — the flattened envelope layout is much wider
   than the mockup photo. Column widths are set proportional to each box's
   own aspect-ratio (width_i ∝ aspect-ratio_i) so both boxes render at the
   same height instead of stretching independently — update both the
   column fr values and the aspect-ratio below together if either source
   image's dimensions change. */
.case-process-grid.envelope-grid{ grid-template-columns:2.304fr 1.423fr; }
@media (max-width:800px){ .case-process-grid.envelope-grid{ grid-template-columns:1fr; } }
.case-process-grid.envelope-grid .envelope-design-box{ aspect-ratio:5627/2442; }
.case-process-grid.envelope-grid .envelope-mockup-box{ aspect-ratio:2798/1966; }
/* Lets a plain looping video sit in a grid slot alongside image items,
   e.g. mixed image/video gallery grids. */
.case-process-grid .case-process-item.case-video-embed{ background:#000; cursor:default; }
.case-process-grid .case-process-item.case-video-embed video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#000;
}

.case-motion{
  position:relative;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:16/9;
}
.case-motion-video{ width:100%; height:100%; object-fit:cover; display:block; }
/* The BCS clip is a 1:1 square export — contain it instead of cropping to
   fill the 16:9 box; the two 16:9 clips already match the box exactly so
   this has no visual effect on them. */
#case-intrinseque .case-motion-video{ object-fit:contain; }
.case-motion-mute{
  position:absolute;
  bottom:14px; right:14px;
  font-family:var(--ff-mono);
  font-size:11px;
  background:rgba(11,11,13,0.7);
  color:var(--paper);
  border:1px solid var(--line-dark);
  border-radius:6px;
  padding:6px 12px;
  cursor:pointer;
}
.case-motion-caption{
  position:absolute;
  bottom:16px; left:16px;
  font-family:var(--ff-mono);
  font-size:12px;
  color:var(--paper);
  border-left:2px solid var(--case-accent-solid, #ed2f26);
  padding-left:8px;
}
.case-motion-strip{
  display:flex;
  gap:10px;
  margin-top:12px;
  overflow-x:auto;
  padding-bottom:4px;
}
.case-motion-thumb{
  flex:0 0 auto;
  width:110px;
  background:var(--paper-2);
  border:1px solid var(--line-dark);
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  padding:0;
}
.case-motion-thumb img{ width:100%; height:60px; object-fit:cover; display:block; }

/* Gallery slider — a row of slides (each its own 3-up grid) that swipes
   automatically, with dot navigation underneath. Generic/reusable: any
   [data-case-slider] on any case page picks this up. */
.case-slider{ position:relative; margin-top:14px; }
.case-slider-viewport{ overflow:hidden; }
.case-slider-track{ display:flex; transition:transform 0.5s ease; }
.case-slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line-dark);
  background:rgba(11,11,13,0.75);
  color:var(--paper);
  font-size:20px;
  line-height:1;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.case-slider-arrow:hover{ background:var(--ink-3); border-color:var(--case-accent-solid, #ed2f26); }
.case-slider-arrow-prev{ left:-18px; }
.case-slider-arrow-next{ right:-18px; }
@media (max-width:800px){
  .case-slider-arrow-prev{ left:4px; }
  .case-slider-arrow-next{ right:4px; }
}
.case-slider-slide{
  flex:0 0 100%;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
@media (max-width:800px){ .case-slider-slide{ grid-template-columns:1fr; } }
.case-slider-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:18px;
}
.case-slider-dot{
  width:8px;
  height:8px;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--line-dark);
  cursor:pointer;
  transition:background 0.2s ease, transform 0.2s ease;
}
.case-slider-dot.active{ background:var(--case-accent-solid, #ed2f26); transform:scale(1.35); }
.case-slider-dot:focus-visible{ outline:2px solid var(--case-accent-solid, #ed2f26); outline-offset:3px; }
.case-motion-thumb span{
  display:block;
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--ink-soft);
  padding:6px 8px;
  text-align:left;
}
.case-motion-thumb.active{ border-color:var(--case-accent-solid, #ed2f26); }
.case-motion-thumb.active span{ color:var(--case-accent-solid, #ed2f26); }
.case-note{
  font-family:var(--ff-mono);
  font-size:11px;
  color:var(--ink-soft);
  margin:10px 0 0;
}

.case-process-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:14px;
}
@media (max-width:800px){ .case-process-grid{ grid-template-columns:1fr; } }
.case-process-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:800px){ .case-process-grid.cols-2{ grid-template-columns:1fr; } }
/* A-series paper ratio (1:1.414, e.g. A1/A2/A3/A4 portrait) — used for
   poster process/output slots so the empty boxes read as poster-shaped
   rather than a generic photo frame. */
.case-process-grid.poster-ratio .case-process-slot,
.case-process-grid.poster-ratio .case-process-item{ aspect-ratio:1/1.414; }
/* 1:1 square ratio — used for social media post grids. */
.case-process-grid.square-ratio .case-process-slot,
.case-process-grid.square-ratio .case-process-item{ aspect-ratio:1/1; }
/* Shrinks a comparison grid (e.g. before/after pairs) down from full
   container width so multiple pairs can stack without each one being huge. */
.case-process-grid.compare-grid{ max-width:640px; margin-left:auto; margin-right:auto; }
.case-process-grid.compare-grid + .case-process-grid.compare-grid{ margin-top:14px; }

/* Before/Re-designs side-by-side columns — a visible gap separates the
   two groups so they read as distinct sets rather than one grid. */
.case-compare-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin-top:14px;
}
@media (max-width:800px){ .case-compare-cols{ grid-template-columns:1fr; gap:28px; } }

/* Physical Assets layout: a tall brochure on the left, two stacked
   business cards in the middle, a tall poster on the right — the
   center column's stacked height sets the row height for all three. */
.case-physical-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  margin-top:14px;
  align-items:stretch;
}
.case-physical-grid .case-process-slot.phys-tall{ aspect-ratio:1/1.414; height:auto; }
.case-physical-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
}
.case-physical-cards .case-process-slot{ flex:1 1 0; aspect-ratio:auto; }
@media (max-width:800px){
  .case-physical-grid{ grid-template-columns:1fr; }
  .case-physical-grid .case-process-slot.phys-tall{ aspect-ratio:1/1.414; }
  .case-physical-cards .case-process-slot{ aspect-ratio:7/4; flex:none; }
}
.case-process-slot{
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  min-width:0;
  background:repeating-linear-gradient(135deg, var(--paper-3) 0 14px, var(--ink-2) 14px 28px);
  border:1px dashed var(--line-dark);
  border-radius:8px;
  font-family:var(--ff-mono);
  font-size:11px;
  color:var(--ink-soft);
}

.case-part{ margin:0; }
.case-part-title{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:25px;
  color:var(--paper);
  margin:0 0 16px;
}
.case-divider{
  height:1px;
  background:var(--line-dark);
  margin:48px 0;
  border:none;
}
.case-subhead{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:19px;
  color:var(--paper);
  margin:22px 0 8px;
}
.case-subhead:first-child{ margin-top:0; }
.case-subsection{ margin:26px 0 0; }
.case-subsection:first-child{ margin-top:0; }
.case-video-slot{
  aspect-ratio:1497/950;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  margin-top:12px;
  background:repeating-linear-gradient(135deg, var(--paper-3) 0 14px, var(--ink-2) 14px 28px);
  border:1px dashed var(--line-dark);
  border-radius:10px;
  font-family:var(--ff-mono);
  font-size:12px;
  color:var(--ink-soft);
}
.case-video-slot.has-video{
  display:block;
  padding:0;
  border:none;
  background:#000;
  overflow:hidden;
}
.case-video-slot.has-video video{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#000;
}
/* 16:9 override for footage that isn't the Currency Archive screen-recording
   ratio (e.g. the MML logo animation, rendered at 3840x2160). */
.case-video-slot.widescreen-ratio{ aspect-ratio:16/9; }

.case-gallery{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
@media (max-width:700px){ .case-gallery{ flex-direction:column; } }
.case-gallery-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.case-g-item{
  display:block;
  width:100%;
  margin:0;
  position:relative;
  border:none;
  padding:0;
  border-radius:10px;
  overflow:hidden;
  cursor:zoom-in;
  background:var(--paper-2);
}
.case-g-item img{
  width:100%;
  display:block;
  border-radius:10px;
  transition:transform 0.5s ease;
}
.case-g-item:hover img{ transform:scale(1.015); }
.case-g-caption{
  position:absolute;
  left:10px; bottom:10px;
  max-width:calc(100% - 20px);
  font-family:var(--ff-mono);
  font-size:11px;
  line-height:1.3;
  color:var(--paper);
  background:rgba(11,11,13,0.68);
  padding:5px 10px;
  border-radius:6px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.25s ease, transform 0.25s ease;
  pointer-events:none;
  text-align:left;
}
.case-g-caption.case-g-caption-br{ left:auto; right:10px; text-align:right; }
.case-g-item:hover .case-g-caption{ opacity:1; transform:translateY(0); }

.case-lightbox{
  position:fixed;
  inset:0;
  z-index:950;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(6,6,8,0.92);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.25s ease;
  padding:60px 40px;
}
.case-lightbox.open{ opacity:1; visibility:visible; }
.case-lightbox-img{
  max-width:100%;
  max-height:80vh;
  border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.case-lightbox-caption{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  font-family:var(--ff-mono);
  font-size:12px;
  color:var(--paper);
  background:rgba(11,11,13,0.7);
  padding:6px 14px;
  border-radius:6px;
}
.case-lightbox-close{
  position:absolute;
  top:24px; right:28px;
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:0.04em;
  background:rgba(255,255,255,0.08);
  color:var(--paper);
  border:1px solid var(--line-dark);
  border-radius:8px;
  padding:8px 14px;
  cursor:pointer;
}
.case-lightbox-close:hover{ background:rgba(255,255,255,0.16); }

.case-visit-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:36px 0 0;
  padding:20px 22px;
  background:var(--ink);
  border:1px solid var(--line-dark);
  border-radius:14px;
}
.case-visit-title{
  font-family:var(--ff-display);
  font-weight:700;
  font-size:16px;
  color:var(--paper);
}
.case-visit-tag{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  margin-top:4px;
}
.case-visit-btn{
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:0.04em;
  background:var(--paper);
  color:var(--ink);
  border:none;
  border-radius:999px;
  padding:12px 20px;
  white-space:nowrap;
  transition:filter 0.2s ease, transform 0.2s ease;
}
.case-visit-btn:hover{ filter:brightness(0.92); transform:translateY(-2px); }

.case-footer-nav{
  display:flex;
  justify-content:flex-end;
  padding-top:20px;
  border-top:1px solid var(--line-dark);
}
.case-next-btn{
  font-family:var(--ff-mono);
  font-size:13px;
  letter-spacing:0.04em;
  background:var(--case-accent-solid, #ed2f26);
  color:var(--paper);
  border:none;
  border-radius:10px;
  padding:14px 24px;
  cursor:pointer;
  transition:filter 0.2s ease, transform 0.2s ease;
}
.case-next-btn:hover{ filter:brightness(1.1); transform:translateY(-2px); }

/* Currency Archive's accent is a light yellow — pale text on it is
   unreadable, so give its CTA buttons dark text instead. */
#case-currency .case-next-btn,
#case-currency .case-visit-btn{ color:var(--ink); }

/* Intrinseque Health's accent is a dark navy — used as text color in a
   few spots (eyebrow label, Brief/Thinking/My Role tags, active motion
   thumb caption), it's too close to the dark page background to read.
   Force those to white instead; backgrounds/borders using the same
   accent stay as-is since they're readable either way. */
#case-intrinseque .case-eyebrow,
#case-intrinseque .case-triad-tag,
#case-intrinseque .case-motion-thumb.active span{ color:var(--paper); }