/* =========================================================
   BJS Portfolio 2026 — styles.css
   Sections: tokens · base · background · nav · hero · work
   · canvas(figma) · brands · contact · footer · responsive
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --ink: #0e0f11;
  --ink-soft: #3b4048;
  --muted: #7c8492;
  --line: #e4e8ee;
  --line-strong: #d3d9e1;
  --paper: #fbfcfd;
  --card: #ffffff;          /* photo frames (stay white in both themes) */
  --surface: #ffffff;       /* figma panel / toolbar / bubbles / contact */
  --surface-2: #f1f3f7;     /* input chips inside the figma UI */
  --blue: #1c8cff;          /* figma selection */
  --blue-soft: #d7ebff;
  --tape: rgba(120, 128, 140, 0.16);
  --grid-fine: rgba(20, 28, 44, .05);
  --grid-strong: rgba(20, 28, 44, .10);
  --blueprint: rgba(20, 28, 44, .12);
  --shadow-sm: 0 2px 10px rgba(20, 28, 44, .06);
  --shadow-md: 0 14px 34px rgba(20, 28, 44, .12);
  --shadow-lg: 0 26px 60px rgba(20, 28, 44, .18);
  --radius: 14px;
  --maxw: 1180px;
  --pad: clamp(26px, 5vw, 72px);
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Helvetica Neue", "Inter", Arial, sans-serif;
  --hand: "Caveat", "Kalam", cursive;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

:root[data-theme="dark"] {
  --ink: #f3f4f6;
  --ink-soft: #b7bdc7;
  --muted: #8b93a1;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .18);
  --paper: #0b0b0d;
  --card: #ffffff;
  --surface: #17181c;
  --surface-2: #26272c;
  --blue: #3d97ff;
  --blue-soft: rgba(61, 151, 255, .22);
  --tape: rgba(225, 228, 234, .34);
  --grid-fine: rgba(255, 255, 255, .045);
  --grid-strong: rgba(255, 255, 255, .085);
  --blueprint: rgba(255, 255, 255, .13);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .45);
  --shadow-md: 0 16px 36px rgba(0, 0, 0, .5);
  --shadow-lg: 0 26px 60px rgba(0, 0, 0, .62);
}

html { color-scheme: light dark; }
/* theme-swappable images (light shows by default, dark swaps) */
.dark-only { display: none; }
:root[data-theme="dark"] .dark-only { display: block; }
:root[data-theme="dark"] .light-only { display: none; }
:root { transition: background-color .35s ease; }
body, .nav, .card, .fpanel, .toolbar, .comment__bubble, .contact__panel, .logo-ph, .canvas__tab, .btn {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: clamp(70px, 8vw, 84px); }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
section { position: relative; z-index: 1; }

/* ---------- Blueprint background ---------- */
.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px),
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
}

/* blueprint line-art overlay */
.blueprint {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  color: var(--blueprint);
  -webkit-mask-image: radial-gradient(130% 110% at 50% 10%, #000 55%, transparent 100%);
          mask-image: radial-gradient(130% 110% at 50% 10%, #000 55%, transparent 100%);
}

/* rulers (Figma canvas feel) — fixed to the viewport like a real canvas */
.ruler { position: fixed; z-index: 0; color: var(--muted); pointer-events: none; font: 500 9px/1 var(--font); }
.ruler--top { top: 0; left: 0; right: 0; height: 20px; }
.ruler--left { top: 0; left: 0; bottom: 0; width: 22px; }
.ruler--corner { top: 0; left: 0; width: 22px; height: 20px; display: grid; place-items: center; color: var(--muted); background: var(--paper); }
.ruler .tick { position: absolute; color: var(--muted); opacity: .8; }
.ruler--top .tick { top: 6px; transform: translateX(3px); }
.ruler--top .tick::before { content: ""; position: absolute; left: -3px; top: -6px; width: 1px; height: 6px; background: var(--line-strong); }
.ruler--left .tick { left: 5px; }
.ruler--left .tick::before { content: ""; position: absolute; left: -5px; top: -1px; width: 6px; height: 1px; background: var(--line-strong); }

/* ---------- Layout helpers ---------- */
main { position: relative; z-index: 1; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad);
  backdrop-filter: saturate(1.2) blur(8px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}
.nav__brand { font-weight: 900; letter-spacing: .06em; font-size: 18px; z-index: 2; }
.nav__links { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 26px); }
.nav__menu-row { display: contents; } /* transparent on desktop; becomes a row inside the mobile menu */

/* hamburger (mobile only) */
.nav__burger { display: none; position: relative; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 9px; background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: background .2s; }
.nav__burger:hover { background: var(--surface-2); }
.nav__burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__links a { font-size: 12px; font-weight: 700; letter-spacing: .11em; color: var(--ink-soft); transition: color .2s; }
.nav__links a:hover { color: var(--ink); }
/* menu glyphs are mobile-only; on desktop show just the label */
.nav__check, .nav__ico, .nav__kbd { display: none; }

/* language chip */
.chip-toggle {
  border: 0; background: transparent; color: var(--ink-soft);
  font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 5px 8px; border-radius: 7px;
  transition: color .2s, background .2s;
}
.chip-toggle:hover { color: var(--ink); background: var(--surface-2); }

/* theme pill (sun / moon) */
.theme-toggle { border: 0; background: none; padding: 0; display: inline-flex; }
.theme-toggle__track {
  width: 46px; height: 24px; border-radius: 999px; position: relative;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: space-between; padding: 0 5px;
  transition: background .3s;
}
.theme-toggle__icon { color: var(--muted); z-index: 2; }
.theme-toggle__icon--sun { color: #f0a63a; }
.theme-toggle__icon--moon { color: #9aa3b0; }
.theme-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--card); box-shadow: var(--shadow-sm); z-index: 1;
  transition: transform .3s cubic-bezier(.4,1.4,.5,1);
}
:root[data-theme="dark"] .theme-toggle__thumb { transform: translateX(22px); }
:root[data-theme="dark"] .theme-toggle__icon--moon { color: #e8ecf3; }
:root[data-theme="dark"] .theme-toggle__icon--sun { color: #6b7280; }

/* ---------- Hero ---------- */
.hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(28px, 6vw, 60px) var(--pad) clamp(16px, 3vw, 30px); }
.hero__intro { font-size: clamp(12px, 1.5vw, 14px); color: var(--ink-soft); font-weight: 500; line-height: 1.35; margin-bottom: clamp(14px, 2.5vw, 26px); }
.hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 8vw, 6.2rem);
  line-height: 1.03; letter-spacing: -.02em; text-transform: uppercase;
}

/* ---------- Work / collage ---------- */
.work {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(10px, 3vw, 30px) var(--pad) clamp(30px, 6vw, 70px);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(30px, 4.5vw, 64px); align-items: start;
}
.card {
  position: relative; background: var(--card); padding: 10px; border-radius: 12px;
  box-shadow: var(--shadow-md); transform: rotate(var(--rot, 0deg));
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  will-change: transform; aspect-ratio: 16 / 10;
}
.card.is-in { transform: rotate(var(--rot, 0deg)); }
.card:hover, .card.is-in:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: var(--shadow-lg); z-index: 5; }
.card img { border-radius: 6px; width: 100%; height: 100%; object-fit: cover; }

.cd-disc {
  justify-self: center; align-self: center; position: relative;
  width: clamp(90px, 12vw, 150px); aspect-ratio: 1; border-radius: 50%;
  filter: drop-shadow(0 10px 20px rgba(20,28,44,.3));
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.cd-disc:hover { transform: scale(1.06) rotate(4deg); }
.cd-disc img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.cd-disc__gloss, .cd-disc__sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
/* glossy dome highlight — the "sticker" curvature */
.cd-disc__gloss { background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.72), rgba(255,255,255,.14) 34%, transparent 56%); mix-blend-mode: screen; }
/* moving specular streak — metallic glint */
.cd-disc__sheen { overflow: hidden; }
.cd-disc__sheen::before {
  content: ""; position: absolute; inset: -35%;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.9) 48%, rgba(255,255,255,.2) 52%, transparent 62%);
  transform: translateX(-130%); mix-blend-mode: screen;
  animation: cdSweep 5.5s ease-in-out infinite;
}
.cd-disc:hover .cd-disc__sheen::before { animation-duration: 1.6s; }
@keyframes cdSweep { 0%, 55% { transform: translateX(-130%); } 82%, 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .cd-disc__sheen::before { animation: none; } .cd-disc:hover { transform: none; } }

/* tape */
.tape { position: absolute; width: 78px; height: 26px; background: var(--tape); backdrop-filter: blur(1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); z-index: 3; }
.tape::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,.14) 6px 7px); }
.tape--tl { top: -12px; left: 14px; transform: rotate(-6deg); }
.tape--tr { top: -12px; right: 14px; transform: rotate(5deg); }
.tape--bl { bottom: -12px; left: 20px; transform: rotate(4deg); }

/* handwritten labels — sit ABOVE the washi tape */
.label { position: absolute; z-index: 8; font-family: var(--hand); font-size: clamp(16px, 1.8vw, 22px); font-weight: 700; color: #0e0f11; background: rgba(255,255,255,.92); padding: 2px 9px; border-radius: 4px; box-shadow: 0 1px 4px rgba(20,28,44,.12); transform: rotate(-3deg); white-space: nowrap; }
.label--identity  { top: 8px; left: 10px; }
.label--cemex     { bottom: 6px; right: 14px; transform: rotate(-4deg); }
.label--coop      { top: -14px; right: 40px; transform: rotate(-4deg); }
.label--claro     { bottom: -10px; left: 30%; transform: rotate(-3deg); }
.label--esencoder { bottom: 8px; right: 12px; transform: rotate(-4deg); }

/* ---------- Canvas / Figma experience ---------- */
.canvas {
  max-width: var(--maxw); margin: clamp(20px, 5vw, 60px) auto; padding: clamp(28px, 4vw, 56px) var(--pad) clamp(64px, 8vw, 110px);
  position: relative; min-height: 620px;
}
.canvas__tab { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 12px; box-shadow: var(--shadow-sm); margin-bottom: 22px; }
.canvas__tab svg { color: var(--muted); }
.canvas__title { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -.01em; margin-bottom: 14px; }
.canvas__lead { max-width: 640px; color: var(--ink-soft); font-size: clamp(14px, 1.5vw, 16px); }
.canvas__lead strong { color: var(--ink); font-weight: 700; }

/* selection boxes */
.sel-box { position: relative; border: 1.5px solid var(--blue); border-radius: 3px; padding: 18px 20px; background: color-mix(in srgb, var(--surface) 32%, transparent); margin-bottom: 34px; }
.sel-box--a { max-width: 680px; }
.sel-box__content { height: 100%; overflow: hidden; }
.handle { position: absolute; width: 9px; height: 9px; background: var(--card); border: 1.5px solid var(--blue); border-radius: 2px; z-index: 6; touch-action: none; }
.handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
.handle--n  { top: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
.handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }
.handle--e  { top: 50%; right: -5px; margin-top: -5px; cursor: ew-resize; }
.handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.handle--s  { bottom: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
.handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.handle--w  { top: 50%; left: -5px; margin-top: -5px; cursor: ew-resize; }
.sel-box.is-resizing { user-select: none; }
.sel-box__hint { position: absolute; top: -22px; left: 0; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--blue); opacity: 0; transition: opacity .2s; }
.sel-box:hover .sel-box__hint { opacity: 1; }

/* timeline */
.timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 46px; max-width: 780px; margin-top: 26px; }
.job { position: relative; }
.job--epam { grid-column: 1 / -1; }
.sel-box--b { grid-column: 1 / -1; justify-self: start; width: 100%; max-width: 780px; }
.timeline__row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 46px; }
.job__avatar { position: absolute; top: 0; left: -34px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.job__avatar[data-c="epam"] { background: #34c759; }
.job__avatar[data-c="claro"] { background: #34c759; }
.job__co { font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.job__role { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; margin-top: 2px; }
.job__desc { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* comments */
.comments { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.comment { position: absolute; display: flex; align-items: flex-start; gap: 0; animation: pop .35s cubic-bezier(.3,1.5,.5,1); }
.comment--seed { top: 38%; left: 58%; }
.comment__avatar { width: 26px; height: 26px; border-radius: 50% 50% 50% 2px; background: #34c759; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: var(--shadow-sm); flex: none; }
.comment__bubble { margin-left: -4px; margin-top: 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px 12px 12px 12px; padding: 7px 11px; box-shadow: var(--shadow-md); max-width: 210px; }
.comment__name { display: block; font-size: 10px; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; }
.comment__name em { font-style: normal; color: var(--muted); font-weight: 500; }
.comment__text { font-size: 12.5px; color: var(--ink); }
@keyframes pop { from { opacity: 0; transform: scale(.8) translateY(6px); } to { opacity: 1; transform: none; } }

/* figma properties panel */
.fpanel { position: absolute; top: 90px; right: var(--pad); width: 196px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md); padding: 4px 0; font-size: 11px; z-index: 7; }
.fpanel__group { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.fpanel__group:last-child { border-bottom: 0; }
.fpanel__head { font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.fpanel__sub { color: var(--muted); margin-bottom: 6px; font-size: 10px; }
.fpanel__icons { display: flex; gap: 4px; margin-bottom: 8px; }
.fpanel__icons i { width: 20px; height: 18px; border-radius: 4px; background: var(--surface-2); display: block; }
.fpanel__row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.fpanel__row label { color: var(--muted); width: 12px; }
.fpanel__val { flex: 1; background: var(--surface-2); border-radius: 5px; padding: 4px 7px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.fpanel__val--wide { flex: none; width: 100%; }

/* figma toolbar */
.toolbar { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: var(--shadow-lg); z-index: 9; }
.tool { position: relative; width: 34px; height: 34px; border: 0; background: none; border-radius: 8px; color: var(--ink-soft); display: grid; place-items: center; transition: background .18s, color .18s, transform .1s; }
.tool:hover { background: var(--surface-2); color: var(--ink); }
.tool:active { transform: scale(.92); }
.tool.is-active { background: var(--blue); color: #fff; }
.tool--comment.is-flash { animation: toolFlash .5s; }
@keyframes toolFlash { 0%,100% { background: none; } 40% { background: var(--blue-soft); } }

/* red notification badge on the comment tool */
.tool__badge { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px var(--surface); z-index: 2; }
.tool__badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff3b30; animation: badgePulse 1.9s ease-out infinite; }
@keyframes badgePulse { 0% { transform: scale(1); opacity: .65; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.tool--comment.seen .tool__badge { display: none; }
@media (prefers-reduced-motion: reduce) { .tool__badge::after { animation: none; } }
.toolbar__sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

/* ---------- Brands ---------- */
.brands { max-width: var(--maxw); margin: 0 auto; padding: clamp(30px, 6vw, 70px) var(--pad); }
.brands__title { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -.01em; }
.brands__lead { max-width: 560px; color: var(--muted); font-size: 14px; margin-top: 10px; }
.brands__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2.5vw, 30px); margin: clamp(28px, 5vw, 54px) 0; }
.brands__grid { touch-action: pan-y; }
.logo-ph {
  aspect-ratio: 5 / 2; display: grid; place-items: center;
  cursor: grab; user-select: none; opacity: .88; touch-action: pan-y;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--dr, 0deg)) scale(var(--ds, 1));
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .25s;
}
.logo-ph img { max-height: clamp(30px, 4.2vw, 50px); max-width: 80%; width: auto; height: auto; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.logo-ph:hover { opacity: 1; }
.logo-ph.is-grabbing { cursor: grabbing; transition: opacity .25s; z-index: 4; will-change: transform; }
.logo-ph.is-placed { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .logo-ph { transform: none; } }

.stats { display: flex; flex-wrap: wrap; gap: clamp(30px, 6vw, 70px); align-items: center; padding-top: 6px; }
.stat { display: flex; align-items: center; gap: 14px; }
.stat__num { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -.02em; line-height: 1; }
.stat__label { font-size: clamp(12px, 1.5vw, 15px); font-weight: 600; color: var(--ink-soft); line-height: 1.2; text-align: left; }

/* ---------- Contact ---------- */
.contact { max-width: var(--maxw); margin: 0 auto; padding: clamp(30px, 6vw, 70px) var(--pad) clamp(40px, 7vw, 90px); }
.contact__wrap { position: relative; }
.contact__card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(10px, 3vw, 40px);
  padding: clamp(26px, 4vw, 48px);
}
.contact__media { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 240px; overflow: visible; }
.contact__sprue { width: clamp(300px, 40vw, 540px); max-width: none; height: auto; margin: -30px -40px -60px -60px; }
.contact__cta { padding-right: clamp(0px, 2vw, 24px); }
.contact__kicker {
  position: absolute; top: -14px; left: 22px; z-index: 4;
  font-family: var(--display); font-weight: 800; color: #0e0f11;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem); letter-spacing: -.01em;
  background: #d8dce3; padding: 8px 16px 8px 14px; border-radius: 2px;
  box-shadow: 0 3px 10px rgba(20,28,44,.14); transform: rotate(-1.5deg);
}
.contact__wrap .tape { width: clamp(90px, 12vw, 140px); height: clamp(30px, 4vw, 44px); z-index: 3; }
.contact__wrap .tape--tr { top: -16px; right: 34px; transform: rotate(8deg); }
.contact__kicker::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,.18) 7px 8px); border-radius: inherit; }
.contact__title { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.015em; line-height: 1.02; }
.contact__sub { color: var(--ink-soft); margin: 16px 0 26px; font-size: clamp(14px, 1.6vw, 16px); max-width: 340px; }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); padding: 14px 30px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-md); transition: transform .2s, box-shadow .2s, opacity .2s; }
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); opacity: .88; }
.btn:active { transform: translateY(-1px); }

/* ---------- Footer ---------- */
.foot { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 24px var(--pad) 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.foot__made { font-size: 13px; color: var(--muted); }
.foot__links { display: flex; gap: 22px; }
.foot__links a { font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: color .2s; }
.foot__links a:hover { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .fpanel { display: none; }
  .comment--seed { left: auto; right: 4%; top: 30%; }
}
@media (max-width: 900px) {
  .work { gap: clamp(22px, 3.5vw, 34px); }
}
@media (max-width: 720px) {
  /* nav collapses into a Figma-style dropdown menu (always dark, no outline) */
  .nav__burger { display: flex; }
  .nav__links {
    position: absolute; top: calc(100% + 8px); right: var(--pad); left: auto;
    width: min(268px, 84vw);
    flex-direction: column; align-items: stretch; gap: 1px;
    background: var(--surface); border: 0; border-radius: 13px;
    padding: 6px; box-shadow: var(--shadow-lg);
    transform: translateY(-8px) scale(.97); transform-origin: top right;
    opacity: 0; pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
  }
  .nav.is-open .nav__links { transform: none; opacity: 1; pointer-events: auto; }
  /* section label like a Figma menu */
  .nav__links::before {
    content: "MENU"; display: block; font-size: 9px; font-weight: 700; letter-spacing: .14em;
    color: var(--muted); padding: 8px 12px 6px;
  }
  /* rows: [check][icon][name .......][shortcut] */
  .nav__links a.nav__item {
    display: flex; align-items: center; gap: 0;
    padding: 8px 12px 8px 8px; border-radius: 7px; border: 0;
    font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--ink-soft);
  }
  .nav__check, .nav__ico, .nav__kbd { display: inline-flex; align-items: center; }
  .nav__check { width: 18px; flex: none; justify-content: center; color: var(--ink); visibility: hidden; }
  .nav__item.is-current .nav__check { visibility: visible; }
  .nav__ico { width: 24px; flex: none; justify-content: center; color: var(--muted); }
  .nav__label { flex: 1; padding-left: 6px; }
  .nav__kbd { font: 600 11px/1 var(--font); color: var(--muted); letter-spacing: .02em; }
  .nav__item:hover, .nav__item:active { background: var(--blue); color: #fff; }
  .nav__item:hover .nav__check, .nav__item:hover .nav__ico, .nav__item:hover .nav__kbd,
  .nav__item:active .nav__check, .nav__item:active .nav__ico, .nav__item:active .nav__kbd { color: #fff; }
  /* toggles as the menu's top row */
  .nav__menu-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 4px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
  }
  .hero__title { font-size: clamp(2rem, 9.8vw, 4.6rem); }
  .work { grid-template-columns: 1fr; }
  .card, .cd-disc { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .card { transform: rotate(0deg); }
  .cd-disc { justify-self: end; width: clamp(110px, 32vw, 132px); align-self: auto; top: clamp(10px, 8vw, 46px); margin-right: clamp(16px, 7vw, 44px); }
  .brands__grid { grid-template-columns: repeat(2, 1fr); }
  .timeline, .timeline__row { grid-template-columns: 1fr; }
  .job__avatar { position: static; margin-bottom: 6px; }
  .contact__card { grid-template-columns: 1fr; text-align: left; padding-top: 56px; }
  .contact__kicker { top: -13px; left: 16px; }
  .contact__media { min-height: 96px; max-height: 150px; order: 2; overflow: hidden; }
  .contact__sprue { width: clamp(260px, 82vw, 410px); max-width: none; margin: 0 -24px -50px -30px; }
  /* resize + comments stay ENABLED on mobile — bigger touch targets */
  .sel-box { max-width: 100%; }
  .handle { width: 15px; height: 15px; }
  .handle--nw, .handle--sw, .handle--w { left: -8px; }
  .handle--ne, .handle--se, .handle--e { right: -8px; }
  .handle--nw, .handle--ne, .handle--n { top: -8px; }
  .handle--sw, .handle--se, .handle--s { bottom: -8px; }
  .handle--n, .handle--s { margin-left: -8px; }
  .handle--e, .handle--w { margin-top: -8px; }
  .toolbar { bottom: 12px; padding: 5px; gap: 2px; }
  .tool { width: 30px; height: 30px; }
  .comment__bubble { max-width: 170px; }
  /* footer stacks and centers */
  .foot { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .foot__links { justify-content: center; }
}
@media (max-width: 420px) {
  .toolbar { flex-wrap: wrap; max-width: 90%; justify-content: center; }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

/* section tape labels */
.sec-tag { position: relative; display: inline-block; font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.1rem); color: #0e0f11; background: #d8dce3; padding: 8px 18px; border-radius: 2px; transform: rotate(-1.2deg); box-shadow: 0 3px 10px rgba(20,28,44,.14); margin-bottom: clamp(22px, 4vw, 42px); }
.sec-tag::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,.18) 7px 8px); border-radius: inherit; }

/* draggable stickers (same behavior as logos) */
.sticker {
  position: absolute; display: block; user-select: none; cursor: grab; touch-action: pan-y;
  will-change: transform; z-index: 4; -webkit-user-drag: none;
  transform: translate(var(--dx,0px), var(--dy,0px)) rotate(var(--dr,0deg)) scale(var(--ds,1));
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 8px 16px rgba(20,28,44,.22));
}
.sticker.is-grabbing { cursor: grabbing; transition: none; z-index: 30; }
.sticker.is-placed { z-index: 12; }
@media (prefers-reduced-motion: reduce) { .sticker { transform: none; } }

/* MEET ME */
.ameet { max-width: var(--maxw); margin: 0 auto; padding: clamp(18px,4vw,44px) var(--pad) clamp(24px,5vw,50px); display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(24px,4vw,56px); align-items: start; }
.ameet__title { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 4.8rem); letter-spacing: -.02em; line-height: .95; margin: .12em 0 .55em; }
.wave { display: inline-block; transform-origin: 70% 75%; animation: wave 2.6s ease-in-out infinite; }
@keyframes wave { 0%,62%,100% { transform: rotate(0); } 12% { transform: rotate(16deg); } 24% { transform: rotate(-8deg); } 36% { transform: rotate(14deg); } 48% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .wave { animation: none; } }
.ameet__body p { color: var(--ink-soft); font-size: clamp(14px,1.5vw,16px); line-height: 1.55; margin-bottom: 1em; max-width: 48ch; }
.ameet__body strong { color: var(--ink); font-weight: 700; }
.ameet__media { position: relative; min-height: clamp(320px, 40vw, 500px); }
.ameet__portrait { width: 100%; max-width: 440px; margin-left: auto; display: block; border-radius: 16px; }
.stickers { position: absolute; inset: 0; }

/* HOW I WORK */
.howiw { max-width: var(--maxw); margin: 0 auto; padding: clamp(30px,6vw,66px) var(--pad); }
.howiw__lead { max-width: 760px; margin-top: clamp(14px,2vw,20px); color: var(--ink-soft); font-size: clamp(14px,1.5vw,16px); line-height: 1.62; }
.startend { display: flex; align-items: center; justify-content: center; gap: clamp(2px,1vw,14px); margin: clamp(6px,2vw,22px) 0 clamp(30px,5vw,52px); color: var(--ink); }
.startend__word { font-family: var(--display); font-weight: 800; letter-spacing: .16em; font-size: clamp(.95rem,2vw,1.35rem); flex: none; }
.startend__scribble { width: clamp(240px, 52vw, 560px); height: auto; color: var(--ink); opacity: .92; }
.principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px,3vw,38px) clamp(30px,5vw,72px); max-width: 1000px; }
/* Narrower title column so headings wrap to 2–3 lines (more compact); first column holds the mono number + vertical rule. */
.pri { display: grid; grid-template-columns: 46px minmax(112px, .74fr) 1.16fr; column-gap: 16px; align-items: stretch; padding: 12px 14px; border-radius: 9px; transition: background .18s ease, color .18s ease; }
/* Hover inverts: var(--ink)/var(--paper) already swap between light and dark, so it works both ways. */
.pri:hover { background: var(--ink); color: var(--paper); }
/* Monospace, tabular number top-aligned with the title; border-right is the blueprint-style vertical rule. */
.pri__n { grid-row: 1 / -1; align-self: stretch; display: flex; align-items: flex-start; justify-content: flex-start; font-family: var(--mono); font-weight: 600; color: var(--ink); font-size: 22px; line-height: 1; padding-right: 14px; border-right: 1px solid var(--line-strong); }
.pri:hover .pri__n { color: var(--paper); border-right-color: currentColor; }
.pri__head h3 { font-size: 14.5px; font-weight: 800; line-height: 1.22; }
.pri__sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.pri:hover .pri__sub { color: var(--paper); opacity: .72; }
.pri__desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.pri:hover .pri__desc { color: var(--paper); }

/* SKILLS */
.skills { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(30px,6vw,66px) var(--pad); }
.skills__lead { max-width: 620px; color: var(--ink-soft); font-size: clamp(14px,1.5vw,16px); line-height: 1.55; margin-bottom: clamp(24px,4vw,44px); }
.skills__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px,3vw,38px) clamp(30px,5vw,72px); max-width: 780px; }
.skill h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem,2vw,1.55rem); margin-bottom: 6px; }
.skill p { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
/* static decorations (Mac, CD) — not draggable */
.deco { position: absolute; pointer-events: none; z-index: 3; filter: drop-shadow(0 14px 26px rgba(20,28,44,.24)); }
/* right offset tracks the outer margin (calc(590px - 50vw)) so the mac drifts into the empty
   gutter on wide screens instead of sitting over the 780px skills text; width capped smaller. */
.deco--mac { right: 3%; top: auto; bottom: -255px; width: clamp(200px, 22vw, 360px); transform: rotate(-7deg); filter: drop-shadow(0 10px 20px rgba(20,28,44,.10)); }

/* TOOLS + EDUCATION */
.toolsedu { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(30px,6vw,66px) var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,72px); }
/* Education stands alone now that Tools is gone: full width, rows flow in two auto-collapsing columns. */
.toolsedu--solo { display: block; }
.toolsedu--solo .te { display: block; columns: 240px 2; column-gap: clamp(30px,5vw,72px); }
.toolsedu--solo .te__row { break-inside: avoid; margin-bottom: clamp(14px,2vw,20px); }
.te { display: flex; flex-direction: column; gap: clamp(14px,2vw,20px); margin-top: 14px; }
.te__row h3 { font-size: 15.5px; font-weight: 800; line-height: 1.35; }
.te__meta { font-weight: 500; color: var(--muted); }
.te__row p { font-size: 13px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.edu__lead { color: var(--muted); font-size: clamp(14px, 1.5vw, 16px); margin-top: 6px; }
.te__row--badge { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.edu__badge { width: clamp(96px, 13vw, 128px); height: auto; flex: none; }
.edu__badge .b-ink { fill: var(--ink); }
.edu__badge .b-mut { fill: var(--muted); }
.ext-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; transition: color .2s; }
.ext-link:hover { color: var(--blue); }
.deco--cd { right: clamp(-40px, calc(590px - 50vw), 2%); top: auto; bottom: -60px; width: clamp(76px, 9vw, 116px); }

/* OFF THE CLOCK — auto marquee right→left */
.offclock { max-width: var(--maxw); margin: 0 auto; padding: clamp(30px,6vw,56px) var(--pad) 0; }
.offclock__lead { max-width: 640px; color: var(--ink-soft); font-size: clamp(14px,1.5vw,16px); line-height: 1.55; margin-bottom: clamp(18px,3vw,28px); }
.carousel { overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); padding: 24px 0 44px; display: flex; flex-direction: column;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.carousel__track { display: flex; align-items: center; width: max-content; animation: marquee var(--dur, 52s) linear infinite; }
.carousel__track--b { margin-top: clamp(-60px, -4.6vw, -34px); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .carousel__track { animation: none; } }
/* images already ship with their own white border — no frame, just a soft shadow */
/* uniform HEIGHT so every photo reads the same size (widths vary by aspect) */
.polaroid { flex: none; margin: 0 clamp(6px, 0.9vw, 16px); transform: rotate(var(--r,0deg)); }
.polaroid img { height: clamp(200px, 18vw, 256px); width: auto; display: block; image-rendering: -webkit-optimize-contrast; filter: drop-shadow(0 10px 22px rgba(20,28,44,.20)); }

/* current page in desktop nav */
.nav__links a[aria-current="page"] .nav__label { color: var(--ink); font-weight: 800; }

/* ABOUT — responsive */
/* Below ~1080px the text grid + mac overlay no longer fit side by side, so the mac
   drops into the flow (same treatment it already had on mobile) instead of overlapping. */
@media (max-width: 1080px) {
  .deco--mac { position: static; display: block; right: auto; top: auto; width: clamp(200px, 40vw, 320px); margin: 24px auto 0; transform: rotate(-5deg); }
}
@media (max-width: 900px) {
  .toolsedu { grid-template-columns: 1fr; gap: clamp(28px,6vw,44px); }
  .principles { grid-template-columns: 1fr; }
  .skills__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ameet { grid-template-columns: 1fr; }
  .ameet__media { min-height: clamp(300px, 78vw, 420px); order: 2; margin-top: 8px; }
  .ameet__portrait { margin: 0 auto; max-width: 340px; }
  .pri { grid-template-columns: 46px 1fr; }
  .pri__n { grid-row: 1 / span 2; }
  .pri__desc { grid-column: 2 / -1; margin-top: 6px; }
  .deco--cd { right: 7%; bottom: -5%; width: 96px; }
  .polaroid { margin: 0 6px; }
  .polaroid img { height: clamp(178px, 46vw, 224px); }
  .carousel__track--b { margin-top: -36px; }
}

/* ============================================================
   CASE STUDY (project detail pages)
   ============================================================ */
.case { max-width: var(--maxw); margin: 0 auto; padding: clamp(18px,3.5vw,40px) var(--pad) clamp(56px,9vw,110px); }
.case > section { margin-top: clamp(46px, 8vw, 92px); }
.case-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.case-back:hover { color: var(--ink); }

/* hero */
.case-hero { margin-top: clamp(14px,3vw,28px) !important; }
.case-hero__title { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.1rem, 6.2vw, 4.8rem); line-height: 1.03; letter-spacing: -.02em; }
.case-hero__tag { margin-top: clamp(12px,2vw,20px); max-width: 720px; font-size: clamp(16px,2vw,22px); line-height: 1.4; color: var(--ink-soft); font-weight: 500; }
.case-meta { display: flex; flex-wrap: wrap; gap: 14px clamp(22px,3.4vw,44px); margin-top: clamp(22px,4vw,38px); padding-top: clamp(18px,3vw,26px); border-top: 1px solid var(--line); }
.case-meta__item { display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
.case-meta__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.case-meta__v { color: var(--ink); font-weight: 600; font-size: 13.5px; line-height: 1.4; }

/* NDA disclaimer */
.case-nda { margin-top: clamp(22px,3vw,32px); padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; max-width: 760px; }
.case-nda b { color: var(--ink); }

/* generic section text */
.case-lead { max-width: 760px; margin-top: clamp(16px,2.5vw,24px); font-size: clamp(15px,1.6vw,17px); line-height: 1.6; color: var(--ink-soft); }
.case-summary { max-width: 760px; margin-top: clamp(14px,2.2vw,20px); padding-top: clamp(14px,2.2vw,20px); border-top: 1px solid var(--line); display: grid; gap: clamp(15px,2.2vw,20px); }
.case-summary__row { display: flex; flex-direction: column; gap: 6px; }
.case-summary__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.case-summary__v { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; max-width: 68ch; }
.case-sub { font-family: var(--display); font-weight: 800; font-size: clamp(1.05rem,1.8vw,1.4rem); margin: clamp(30px,4.5vw,48px) 0 10px; line-height: 1.25; }
.case-body { font-size: 14.5px; line-height: 1.68; color: var(--ink-soft); max-width: 68ch; }
.case-body + .case-body { margin-top: 13px; }

/* two columns (context) */
.case-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); margin-top: clamp(20px,3vw,30px); }
.case-col h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.05rem,1.8vw,1.35rem); margin-bottom: 12px; }
.case-col p { font-size: 14.5px; line-height: 1.68; color: var(--ink-soft); margin-bottom: 13px; }
.case-col p:last-child { margin-bottom: 0; }

/* findings grid (discovery) */
.case-find { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px,3vw,36px) clamp(30px,5vw,64px); margin-top: clamp(24px,4vw,40px); }
.case-find__item h4 { font-family: var(--display); font-weight: 800; font-size: 15.5px; margin-bottom: 6px; }
.case-find__item p { font-size: 13.5px; line-height: 1.58; color: var(--ink-soft); }

/* numbered steps (approach) */
.case-steps { margin-top: clamp(24px,4vw,40px); display: grid; gap: clamp(24px,3.5vw,38px); }
.case-step { display: grid; grid-template-columns: 62px 1fr; column-gap: clamp(16px,2vw,26px); align-items: start; }
.case-step__n { font-family: var(--mono); font-weight: 600; font-size: clamp(1.5rem,2.6vw,2.1rem); color: var(--ink); line-height: 1; border-right: 1px solid var(--line-strong); align-self: stretch; }
.case-step__b h4 { font-family: var(--display); font-weight: 800; font-size: clamp(1.05rem,1.7vw,1.3rem); margin-bottom: 8px; line-height: 1.28; }
.case-step__b p { font-size: 14.5px; line-height: 1.68; color: var(--ink-soft); max-width: 62ch; }

/* full-width media between case sections */
.case-section-media { margin-top: clamp(16px,2.5vw,24px); }
/* Real case-study images (replace .ph placeholders): polaroid white frame + slight tilt, like the collage cards. */
.shot { display: block; width: 100%; height: auto; background: var(--card); padding: clamp(7px,0.9vw,11px); border-radius: 12px; box-shadow: var(--shadow-md); transform: rotate(var(--shot-rot, -1.1deg)); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; will-change: transform; }
.shot:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-lg); }
.shot--hero { margin-top: clamp(26px,4vw,44px); }

/* ---- Brand book pager ---- */
.pager { margin-top: clamp(18px,3vw,28px); }
.pager__frame { position: relative; }
.pager__viewport { overflow: hidden; border-radius: 12px; background: var(--card); padding: clamp(7px,0.9vw,11px); box-shadow: var(--shadow-md); }
.pager__track { display: flex; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pager__slide { flex: 0 0 100%; min-width: 0; }
.pager__slide img { display: block; width: 100%; height: auto; border-radius: 6px; }
.pager__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-md); display: grid; place-items: center; cursor: pointer; z-index: 4; font-size: 20px; line-height: 1; transition: background .15s ease, color .15s ease; }
.pager__nav:hover { background: var(--ink); color: var(--paper); }
.pager__nav--prev { left: -10px; }
.pager__nav--next { right: -10px; }
.pager__nav[disabled] { opacity: .3; pointer-events: none; }
.pager__dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.pager__dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--line-strong); cursor: pointer; padding: 0; transition: background .15s ease, transform .15s ease; }
.pager__dot.is-active { background: var(--ink); transform: scale(1.3); }
.pager__label { text-align: center; margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ---- UX Passport flipbook ---- */
.flip { margin-top: clamp(18px,3vw,28px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.flip__book { position: relative; width: min(360px, 80vw); aspect-ratio: 446 / 630; perspective: 1700px; }
/* spine + page-stack thickness so it reads as a real booklet */
.flip__book::before { content: ""; position: absolute; top: 6px; bottom: 6px; right: -6px; width: 8px; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, rgba(20,28,44,.18), rgba(20,28,44,0)); z-index: 0; }
.flip__leaf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 3px 7px 7px 3px; background: var(--card); box-shadow: 0 12px 30px rgba(20,28,44,.24); transform-origin: left center; backface-visibility: hidden; transition: transform .7s cubic-bezier(.3,.1,.2,1); cursor: pointer; }
.flip__leaf.is-turned { transform: rotateY(-172deg); }
.flip__controls { display: flex; align-items: center; gap: 14px; }
.flip__nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-md); cursor: pointer; font-size: 20px; line-height: 1; display: grid; place-items: center; transition: background .15s ease, color .15s ease; }
.flip__nav:hover { background: var(--ink); color: var(--paper); }
.flip__nav[disabled] { opacity: .3; pointer-events: none; }
.flip__count { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); min-width: 46px; text-align: center; }
.ph-row, .ph-pair, .ph-trio { display: grid; gap: clamp(12px,1.8vw,20px); margin-top: clamp(16px,2.5vw,24px); }
.ph-row { grid-template-columns: repeat(3, 1fr); }
.ph-pair { grid-template-columns: repeat(2, 1fr); }
.ph-trio { grid-template-columns: repeat(3, 1fr); }

.case-final { max-width: 780px; }

@media (max-width: 820px) {
  .case-cols { grid-template-columns: 1fr; }
  .case-find { grid-template-columns: 1fr; }
  .ph-row, .ph-pair, .ph-trio { grid-template-columns: 1fr; }
  .case-step { grid-template-columns: 46px 1fr; }
}

/* clickable project card (links to a case study) */
.card--link { cursor: pointer; }
.card__go { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }