/* ============================================================
   ESTHER ABIOLA — Portfolio
   Design system: cobalt (Creative) / deep red (Marketing)
   Editorial-surreal type. Near-white paper. Glossy 3D pills.
   ============================================================ */

:root {
  /* Color */
  --cobalt:       #1c2ee0;
  --cobalt-deep:  #0a1690;
  --cobalt-dark:  #060c52;
  --cobalt-soft:  #6f7cf0;
  --red:          #d2121f;
  --red-deep:     #8e0510;
  --red-dark:     #520107;
  --red-soft:     #f06a6f;

  --paper:        #f6f6f4;   /* near-white, faintly warm */
  --paper-2:      #efeeea;
  --ink:          #0d0d10;
  --ink-soft:     #5a5a60;

  /* Type — overridden per data-typeface on #root */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body:    "Space Grotesk", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
}

/* ---- Typeface presets (set on #root[data-typeface]) ---- */
#root[data-typeface="instrument"] { --font-display: "Instrument Serif", Georgia, serif; --font-body: "Space Grotesk", system-ui, sans-serif; }
#root[data-typeface="syne"]       { --font-display: "Syne", system-ui, sans-serif;       --font-body: "Space Grotesk", system-ui, sans-serif; }
#root[data-typeface="bodoni"]     { --font-display: "Bodoni Moda", Georgia, serif;        --font-body: "Space Grotesk", system-ui, sans-serif; }
#root[data-typeface="bricolage"]  { --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Space Grotesk", system-ui, sans-serif; }

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

html, body { height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

#root { min-height: 100vh; }

::selection { background: var(--cobalt); color: #fff; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }

/* Grain overlay — high-end paper texture */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   GATEWAY
   ============================================================ */
.gateway {
  position: relative; min-height: 100vh; width: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #ffffff 0%, var(--paper) 55%, var(--paper-2) 100%);
}

.gw-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 4vw, 60px);
  position: relative; z-index: 5;
}
.gw-name {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--ink);
}
.gw-name small { display:block; font-weight: 400; letter-spacing: 0.28em; color: var(--ink-soft); margin-top: 4px; font-size: 10px; }
.gw-meta {
  text-align: right; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; color: var(--ink-soft);
  text-transform: uppercase; line-height: 1.8;
}

.gw-stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: clamp(40px, 9vw, 150px); position: relative; padding: 20px;
}

.gw-descriptor {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(40px, 9vh, 90px); text-align: center; max-width: 540px;
  padding: 0 24px; z-index: 4;
}
.gw-descriptor p {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1.3; font-style: italic;
  color: var(--ink);
}
.gw-descriptor span { font-style: normal; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); display:block; margin-top: 18px; }

/* The choice columns */
.gw-choice { display: flex; flex-direction: column; align-items: center; gap: 26px; cursor: pointer; }
.gw-choice-label {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-soft);
  opacity: 0; transform: translateY(8px); transition: all 0.5s var(--ease);
}
.gw-choice:hover .gw-choice-label { opacity: 1; transform: translateY(0); }
.gw-choice-sub {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--ink-soft); text-transform: uppercase; max-width: 240px; text-align:center;
  opacity: 0; transition: opacity 0.5s var(--ease) 0.05s; height: 0;
}
.gw-choice:hover .gw-choice-sub { opacity: 0.85; }

/* ============================================================
   3D CAPSULE PILLS
   ============================================================ */
.capsule-wrap { position: relative; }

/* Real pill artwork (uploaded PNGs) */
.capsule-img {
  position: relative;
  width: clamp(240px, 30vw, 430px);
  transition: transform 0.6s var(--ease), filter 0.5s var(--ease);
  will-change: transform;
}
.capsule-img img {
  width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 28px 40px rgba(0,0,0,0.30));
}
.capsule-img .capsule-shadow { display: none; }

/* floating idle motion */
.capsule-img.float-a { animation: floatA 7s var(--ease-in-out) infinite; }
.capsule-img.float-b { animation: floatB 8.4s var(--ease-in-out) infinite; }
@keyframes floatA { 0%,100%{ transform: translateY(0) rotate(-1.5deg); } 50%{ transform: translateY(-16px) rotate(1deg); } }
@keyframes floatB { 0%,100%{ transform: translateY(-6px) rotate(1.5deg); } 50%{ transform: translateY(12px) rotate(-1deg); } }
.gw-choice:hover .capsule-img { transform: scale(1.06) translateY(-6px) rotate(0deg); animation-play-state: paused; }

/* shadow on the paper under pill */
.capsule-shadow {
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  width: 70%; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.28), rgba(0,0,0,0));
  filter: blur(6px); z-index: -1;
  transition: all 0.6s var(--ease);
}
.gw-choice:hover .capsule-shadow { width: 60%; opacity: 0.7; bottom: -30px; }

/* ---------- GLOSSY (pharmaceutical) ---------- */
.capsule.glossy {
  background:
    linear-gradient(90deg, transparent 49.4%, rgba(255,255,255,0.45) 49.6%, rgba(255,255,255,0.0) 50.4%, transparent 50.6%),
    linear-gradient(180deg, var(--c-hi) 0%, var(--c-mid) 38%, var(--c-lo) 100%);
  box-shadow:
    inset 0 4px 8px rgba(255,255,255,0.55),
    inset 0 -16px 28px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 26px 50px -18px var(--c-shadow);
}
.capsule.glossy::before { /* big specular streak */
  content: ""; position: absolute; z-index: 5;
  left: 8%; right: 30%; top: 14%; height: 26%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.0));
  filter: blur(2px);
}
.capsule.glossy::after { /* round end-cap highlight */
  content: ""; position: absolute; z-index: 5;
  right: 7%; top: 50%; transform: translateY(-50%);
  width: 16%; height: 46%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.95), rgba(255,255,255,0));
  filter: blur(1px);
}

/* ---------- GLASS (translucent) ---------- */
.capsule.glass {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-mid) 55%, transparent) 0%, color-mix(in srgb, var(--c-lo) 62%, transparent) 100%);
  backdrop-filter: blur(7px) saturate(1.3);
  -webkit-backdrop-filter: blur(7px) saturate(1.3);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.7),
    inset 0 0 0 1.5px rgba(255,255,255,0.4),
    inset 0 -10px 24px color-mix(in srgb, var(--c-lo) 50%, transparent),
    0 22px 44px -20px var(--c-shadow);
}
.capsule.glass::before {
  content: ""; position: absolute; z-index: 5;
  left: 10%; right: 34%; top: 16%; height: 22%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0));
  filter: blur(2px);
}


/* ---------- MATTE (editorial restrained) ---------- */
.capsule.matte {
  background:
    /* capsule seam — the line where the two halves meet */
    linear-gradient(90deg, transparent 48.6%, rgba(0,0,0,0.30) 49.4%, rgba(255,255,255,0.14) 50.2%, transparent 51%),
    linear-gradient(180deg, var(--c-mid) 0%, var(--c-lo) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.2),
    inset 0 -8px 18px rgba(0,0,0,0.22),
    0 18px 30px -16px var(--c-shadow);
}
.capsule.matte::before {
  content: ""; position: absolute; z-index: 5;
  left: 12%; right: 12%; top: 12%; height: 30%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0));
}


/* color tokens for each pill */
.capsule.blue  { --c-hi:#5b6cff; --c-mid: var(--cobalt); --c-lo: var(--cobalt-deep); --c-shadow: rgba(20,30,180,0.65); }
.capsule.redp  { --c-hi:#ff5a63; --c-mid: var(--red);    --c-lo: var(--red-deep);    --c-shadow: rgba(150,10,20,0.6); }

/* ============================================================
   FORK TRANSITION
   ============================================================ */
.flood {
  position: fixed; z-index: 8000; border-radius: 999px;
  pointer-events: none; transform: scale(0); transform-origin: center;
}
.flood.go { animation: flood 0.85s var(--ease) forwards; }
@keyframes flood { to { transform: scale(60); } }

/* Transform-only entrance: even if the animation engine is paused (background
   iframe / reduced-motion), content stays visible — just un-offset. */
.world-enter { animation: worldIn 0.7s var(--ease); }
@keyframes worldIn { from { transform: translateY(20px); } to { transform: none; } }

/* ============================================================
   WORLD SHELL (creative + marketing)
   ============================================================ */
.world { min-height: 100vh; position: relative; }
.world-creative { background: var(--paper); color: var(--ink); }
.world-marketing { background: var(--paper); color: var(--ink); }

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 60px);
  mix-blend-mode: normal;
}
.nav-name {
  font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  cursor: pointer; transition: opacity 0.2s;
}
.nav-name:hover { opacity: 0.6; }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; }
.nav-link:hover { opacity: 1; }

/* segmented world toggle */
.wtoggle { display: flex; align-items: center; padding: 3px; border-radius: 999px; gap: 2px; }
.wtoggle button {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 999px; transition: all 0.35s var(--ease); white-space: nowrap;
}
.nav.creative .wtoggle { background: rgba(28,46,224,0.08); }
.nav.creative .wtoggle .on { background: var(--cobalt); color: #fff; }
.nav.creative .wtoggle .off { color: var(--cobalt); }
.nav.marketing .wtoggle { background: rgba(210,18,31,0.08); }
.nav.marketing .wtoggle .on { background: var(--red); color: #fff; }
.nav.marketing .wtoggle .off { color: var(--red); }

.nav.creative .nav-name, .nav.creative .nav-link { color: var(--cobalt); }
.nav.marketing .nav-name, .nav.marketing .nav-link { color: var(--red); }

/* ---- Hero (shared) ---- */
.hero {
  padding: clamp(120px, 16vh, 200px) clamp(20px, 5vw, 90px) clamp(50px, 8vh, 90px);
  max-width: 1500px; margin: 0 auto;
}
.hero-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-bottom: 26px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400; line-height: 1.04; letter-spacing: -0.01em;
  font-size: clamp(44px, 8.5vw, 132px);
  text-wrap: balance;
}
.hero h1 em { font-style: italic; }
.world-creative .hero h1 { color: var(--cobalt); }
.world-marketing .hero h1 { color: var(--red); }
.hero-lede {
  margin-top: clamp(40px, 6vh, 72px); max-width: 620px;
  font-size: clamp(15px, 1.3vw, 19px); line-height: 1.6; color: var(--ink-soft);
}

.section { max-width: 1500px; margin: 0 auto; padding: clamp(40px, 7vh, 90px) clamp(20px, 5vw, 90px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 40px; gap: 24px; flex-wrap: wrap; }
.section-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4vw, 56px); }
.section-head .idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; opacity: 0.5; text-transform: uppercase; }
.world-creative .section-head h2 { color: var(--cobalt); }
.world-marketing .section-head h2 { color: var(--red); }

/* ============================================================
   CREATIVE — project cards + layouts + hover reveals
   ============================================================ */
.proj-card {
  position: relative; overflow: hidden; border-radius: 22px; cursor: pointer;
  background: #e7e9f6; isolation: isolate;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.proj-card:hover { box-shadow: 0 40px 70px -30px rgba(20,30,120,0.45); }
.proj-card image-slot { display: block; width: 100%; height: 100%; }
.proj-media { position: absolute; inset: 0; z-index: 0; }
.proj-media image-slot { width: 100%; height: 100%; }

/* type chip always-visible (category) */
.proj-cat {
  position: absolute; top: 16px; left: 16px; z-index: 6;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--ink);
  backdrop-filter: blur(4px);
}

/* hover reveal overlays */
.proj-reveal { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

/* style: slideup */
.hov-slideup .proj-img-zoom { transition: transform 0.7s var(--ease); }
.hov-slideup:hover .proj-img-zoom { transform: scale(1.07); }
.hov-slideup .proj-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding: 28px 26px 24px; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0) 100%);
  transform: translateY(101%); transition: transform 0.55s var(--ease);
}
.hov-slideup:hover .proj-label { transform: translateY(0); }

/* style: dim + centered */
.hov-dim .proj-img-zoom { transition: filter 0.6s var(--ease), transform 0.7s var(--ease); }
.hov-dim:hover .proj-img-zoom { filter: brightness(0.4) saturate(0.8); transform: scale(1.04); }
.hov-dim .proj-label {
  position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; text-align: center;
  color: #fff; padding: 30px; opacity: 0; transform: translateY(10px); transition: all 0.5s var(--ease);
}
.hov-dim:hover .proj-label { opacity: 1; transform: none; }

/* style: cursor tag */
.hov-cursor .proj-img-zoom { transition: transform 0.7s var(--ease); }
.hov-cursor:hover .proj-img-zoom { transform: scale(1.05); }
.cursor-tag {
  position: fixed; z-index: 9500; pointer-events: none;
  padding: 10px 16px; border-radius: 999px; color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.02em;
  transform: translate(-50%, -150%) scale(0.6); opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  white-space: nowrap;
}
.cursor-tag.show { opacity: 1; transform: translate(-50%, -150%) scale(1); }

/* style: wipe */
.hov-wipe .proj-img-zoom { transition: transform 0.7s var(--ease); }
.hov-wipe:hover .proj-img-zoom { transform: scale(1.05); }
.hov-wipe .proj-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; color: #fff; padding: 26px;
  background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0));
  clip-path: inset(0 100% 0 0); transition: clip-path 0.6s var(--ease-in-out);
}
.hov-wipe:hover .proj-label { clip-path: inset(0 0 0 0); }

.proj-label h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.05; }
.proj-label p { font-size: 13.5px; line-height: 1.5; margin-top: 10px; max-width: 460px; opacity: 0.9; }
.proj-label .meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 14px; opacity: 0.8; }

/* ---- Layout: editorial (asymmetric overlap) ---- */
.lay-editorial { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 30px); grid-auto-flow: dense; }
.lay-editorial .pc-0 { grid-column: 1 / 8;  aspect-ratio: 16/10; }
.lay-editorial .pc-1 { grid-column: 8 / 13; aspect-ratio: 3/4; margin-top: clamp(40px, 7vw, 90px); }
.lay-editorial .pc-2 { grid-column: 1 / 6;  aspect-ratio: 4/5; }
.lay-editorial .pc-3 { grid-column: 6 / 13; aspect-ratio: 16/11; margin-top: clamp(-30px, -3vw, -10px); }

/* ---- Layout: uniform grid ---- */
.lay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 28px); }
.lay-grid .proj-card { aspect-ratio: 4/3; }

/* ---- Layout: cinematic full-width stack ---- */
.lay-cinematic { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 40px); }
.lay-cinematic .proj-card { aspect-ratio: 21/9; }
.lay-cinematic .proj-label h3 { font-size: clamp(28px, 4vw, 60px); }

@media (max-width: 800px) {
  .lay-editorial { display: flex; flex-direction: column; }
  .lay-editorial .proj-card { aspect-ratio: 4/3 !important; margin: 0 !important; }
  .lay-grid { grid-template-columns: 1fr; }
  .lay-cinematic .proj-card { aspect-ratio: 4/3; }
  .gw-stage { flex-direction: column; gap: 60px; }
}

/* ============================================================
   MARKETING
   ============================================================ */
/* border token that adapts to day / night */
.world-marketing { --rule: color-mix(in srgb, var(--ink) 13%, transparent); }

/* scroll / load reveal — subtle lift + fade */
.mkt-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.mkt-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mkt-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---- Metrics strip ---- */
.mkt-metrics-section { padding-top: clamp(20px, 3vh, 40px); padding-bottom: clamp(40px, 6vh, 70px); }
.mkt-metrics { display: grid; grid-template-columns: repeat(4, 1fr); }
.mkt-metric { padding: 6px clamp(20px, 2.6vw, 46px); border-left: 1px solid var(--rule); }
.mkt-metric:first-child { border-left: none; padding-left: 0; }
.mkt-metric-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(46px, 6.2vw, 92px); line-height: 0.92; color: var(--red);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mkt-metric-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 18px; }
.mkt-metric-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--ink-soft) 65%, transparent); margin-top: 6px; line-height: 1.5; }
@media (max-width: 800px) {
  .mkt-metrics { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .mkt-metric { padding: 6px clamp(14px, 4vw, 30px); }
  .mkt-metric-num { font-size: clamp(40px, 12vw, 66px); }
  .mkt-metric:nth-child(odd) { border-left: none; padding-left: 0; }
}

/* ---- How I operate — 2x2 outlined cards ---- */
.mkt-ops { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); }
.mkt-op-card {
  border: 1px solid var(--rule); border-radius: 14px;
  padding: clamp(24px, 3vw, 38px);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.mkt-op-card:hover { border-color: color-mix(in srgb, var(--red) 45%, transparent); transform: translateY(-3px); }
.mkt-op-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--red); }
.mkt-op-card h4 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.3vw, 31px); margin-top: 16px; line-height: 1.1; }
.mkt-op-card p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 13px; max-width: 42ch; }
@media (max-width: 760px) { .mkt-ops { grid-template-columns: 1fr; } }

/* ---- Highlighted experience — full-width rows ---- */
.mkt-exp { border-bottom: 1px solid var(--rule); }
.mkt-exp-row {
  display: grid; grid-template-columns: 0.82fr 1.55fr; gap: clamp(24px, 4vw, 72px);
  padding: clamp(34px, 5vh, 56px) 0; border-top: 1px solid var(--rule);
}
.mkt-exp-co { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.mkt-exp-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(27px, 3vw, 46px); line-height: 1.02; color: var(--ink); margin-top: 14px; }
.mkt-exp-pill {
  display: inline-block; margin-top: 20px; padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--red) 50%, transparent); color: var(--red);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.mkt-exp-right { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 3vw, 44px); align-items: start; }
.mkt-exp-text p { font-size: clamp(15px, 1.25vw, 17px); line-height: 1.6; color: var(--ink-soft); max-width: 56ch; }
.mkt-exp-stats { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
.mkt-exp-stats span { display: flex; align-items: center; gap: 11px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.03em; color: var(--red); }
.mkt-exp-stats span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.mkt-exp-thumb { width: clamp(96px, 11vw, 140px); aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #e7e9f6; flex: none; }
.mkt-exp-thumb image-slot { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) {
  .mkt-exp-row { grid-template-columns: 1fr; gap: 22px; }
  .mkt-exp-right { grid-template-columns: 1fr; }
  .mkt-exp-thumb { order: -1; width: clamp(110px, 26vw, 150px); }
}

/* ---- Other experience — lower visual weight ---- */
.mkt-other-section { padding-top: clamp(30px, 4vh, 50px); }
.mkt-other { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 48px); }
.mkt-other-item { border-top: 1px solid var(--rule); padding-top: 24px; }
.mkt-other-co { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.mkt-other-role { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(20px, 2vw, 27px); color: var(--ink); margin-top: 8px; }
.mkt-other-item p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-top: 13px; max-width: 50ch; }
@media (max-width: 900px) { .mkt-other { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mkt-other { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Skills — grouped pill clusters ---- */
.mkt-skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(26px, 3vw, 52px); align-items: start; }
.mkt-skill-group h5 { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; }
.mkt-skill-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.mkt-skill-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--red) 38%, transparent); color: var(--red); }
@media (max-width: 880px) { .mkt-skills { grid-template-columns: 1fr 1fr; row-gap: 38px; } }
@media (max-width: 520px) { .mkt-skills { grid-template-columns: 1fr; } }

/* ---- Highlighted projects — three side by side, big imagery ---- */
.mkt-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.mkt-proj {
  position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 3 / 4;
  background: color-mix(in srgb, var(--red) 7%, var(--paper-2)); isolation: isolate;
  box-shadow: 0 30px 60px -40px rgba(150,10,20,0.5);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.mkt-proj:hover { transform: translateY(-5px); box-shadow: 0 46px 80px -40px rgba(180,10,20,0.55); }
.mkt-proj-media { position: absolute; inset: 0; z-index: 0; }
.mkt-proj-media image-slot { display: block; width: 100%; height: 100%; }
.mkt-proj-cat {
  position: absolute; top: 14px; left: 14px; z-index: 6;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--ink); backdrop-filter: blur(4px);
  max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mkt-proj-label { display: flex; flex-direction: column;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none;
  padding: clamp(44px, 9vh, 84px) clamp(18px, 1.6vw, 24px) clamp(18px, 2.2vh, 24px);
  color: #fff; background: linear-gradient(0deg, rgba(28,2,4,0.9) 12%, rgba(28,2,4,0.2) 66%, transparent 100%);
}
.mkt-proj-label h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(24px, 2vw, 32px); line-height: 1.02; }
.mkt-proj-label p { font-size: 12.5px; line-height: 1.5; margin-top: 8px; opacity: 0.92; }
.mkt-proj-label .meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 12px; opacity: 0.82; }
/* CTA / status lives in the label flow so it never collides with the top-left category pill */
.mkt-proj-cta {
  pointer-events: auto; align-self: flex-start; margin-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; border-radius: 999px;
  background: rgba(255,255,255,0.95); color: var(--red);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,0.5);
  transition: transform 0.25s var(--ease), background 0.25s, color 0.25s;
}
button.mkt-proj-cta:hover { transform: translateY(-2px); background: var(--red); color: #fff; }
button.mkt-proj-cta:hover .arr { transform: translate(2px, -2px); }
.mkt-proj-cta .arr { transition: transform 0.25s var(--ease); }
.mkt-proj-cta.is-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .mkt-proj-cta.is-status .dot { animation: mktStatusPulse 1.8s var(--ease-in-out) infinite; }
}
:root[data-theme="night"] .mkt-proj-cta { background: rgba(20,20,28,0.95); }
@keyframes mktStatusPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.82); } }
@media (max-width: 820px) {
  /* keep all three visible at a glance — horizontal scroll instead of stacking */
  .mkt-projects {
    display: flex; grid-template-columns: none; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * clamp(20px, 5vw, 90px)); padding: 4px clamp(20px, 5vw, 90px) 14px;
    -webkit-overflow-scrolling: touch;
  }
  .mkt-proj { flex: 0 0 74%; scroll-snap-align: center; aspect-ratio: 3/4; }
}
@media (max-width: 420px) {
  .mkt-proj { flex: 0 0 84%; }
}

/* ---- Gold Bar dynamic page — pinned visual collage + chapters ---- */
.gb-visuals {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 26px);
  width: 100%; max-width: 480px; margin: 0 auto;
}
.gb-vis {
  width: 100%; border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb, var(--red) 8%, var(--paper-2));
  box-shadow: 0 26px 44px -28px rgba(150,10,20,0.45); will-change: transform;
}
.gb-vis image-slot { display: block; width: 100%; height: 100%; }
.gb-1 { aspect-ratio: 3/4; }
.gb-2 { aspect-ratio: 1/1; margin-top: clamp(30px, 6vh, 78px); }
.gb-3 { aspect-ratio: 1/1; }
.gb-4 { aspect-ratio: 3/4; margin-top: clamp(30px, 6vh, 78px); }
@media (max-width: 760px) { .gb-visuals { max-width: 360px; } .gb-2, .gb-4 { margin-top: 28px; } }

/* ---- Scrolling marquee — capsule track ---- */
.mkt-marquee {
  position: relative; overflow: hidden;
  margin: clamp(30px, 6vh, 70px) clamp(16px, 4vw, 60px) clamp(40px, 7vh, 84px);
  border: 1.5px solid color-mix(in srgb, var(--red) 40%, transparent);
  border-radius: 999px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.mkt-marquee-track { display: flex; width: max-content; animation: mktScroll 42s linear infinite; }
.mkt-marquee:hover .mkt-marquee-track { animation-play-state: paused; }
.mkt-marquee-group { display: flex; align-items: center; flex: none; padding: clamp(15px, 2vh, 22px) 0; }
.mkt-marquee-item {
  display: inline-flex; align-items: baseline; white-space: nowrap; text-decoration: none;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(21px, 2.4vw, 34px); color: var(--red);
  padding: 0 4px;
}
a.mkt-marquee-item { transition: opacity 0.2s; }
a.mkt-marquee-item:hover { opacity: 0.6; }
.mkt-marquee-arrow { font-style: normal; margin-left: 2px; }
.mkt-marquee-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--red); margin: 0 clamp(22px, 3.2vw, 50px); }
@keyframes mktScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mkt-marquee-track { animation: none; } }

/* ============================================================
   CONTACT — full bleed, accent per origin side
   ============================================================ */
.contact { color: #fff; min-height: 100vh; position: relative; overflow: hidden; }
.contact.is-marketing { background: var(--red); }
.contact.is-creative { background: var(--cobalt); }
.contact-inner {
  max-width: 1500px; margin: 0 auto; min-height: 100vh;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center;
  padding: clamp(100px, 14vh, 160px) clamp(20px, 5vw, 90px) 80px;
}
.contact-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(80px, 16vw, 260px); line-height: 0.82; letter-spacing: -0.02em; position: relative; z-index: 1; pointer-events: none; }
.contact-back {
  position: relative; z-index: 5; display: inline-flex; align-items: center;
  margin-bottom: 30px; color: #fff; cursor: pointer; background: none; border: none;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; transition: opacity 0.2s;
}
.contact-back:hover { opacity: 0.6; }
.contact-email {
  position: relative; z-index: 5; display: inline-block; margin-top: 30px;
  font-family: var(--font-mono); font-size: clamp(14px, 1.5vw, 19px); letter-spacing: 0.02em;
  color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.45);
  padding-bottom: 4px; transition: border-color 0.25s, opacity 0.25s;
}
.contact-email:hover { border-color: #fff; opacity: 0.85; }
.contact-sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 28px; color: rgba(255,255,255,0.7); max-width: 360px; line-height: 1.8; }
.cform { display: flex; flex-direction: column; gap: 14px; }
.cform .field {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px; padding: 20px 24px; color: #fff; font-size: 17px; width: 100%;
  transition: background 0.25s, border-color 0.25s;
}
.cform .field::placeholder { color: rgba(255,255,255,0.6); }
.cform .field:focus { outline: none; background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.55); }
.cform textarea.field { resize: none; min-height: 120px; }
.cform .submit {
  color: #fff; border-radius: 16px; padding: 22px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: 0.04em;
  margin-top: 8px; transition: transform 0.2s var(--ease), background 0.25s;
}
.contact.is-marketing .cform .submit { background: var(--red-deep); }
.contact.is-marketing .cform .submit:hover { background: #6b040c; transform: translateY(-2px); }
.contact.is-creative .cform .submit { background: var(--cobalt-dark); }
.contact.is-creative .cform .submit:hover { background: #04093a; transform: translateY(-2px); }
.cform .submit:hover { transform: translateY(-2px); }
.cform .submit:active { transform: translateY(0); }
.cform .submit:disabled { opacity: 0.6; cursor: default; transform: none; }
.cform-err {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  color: #fff; background: rgba(0,0,0,0.22); border-radius: 10px;
  padding: 12px 14px; margin-top: 4px;
}
.cform .sent { text-align: center; padding: 30px; font-family: var(--font-display); font-style: italic; font-size: 28px; }
.field-err { border-color: var(--red-soft) !important; }
@media (max-width: 860px) { .contact-inner { grid-template-columns: 1fr; } }

/* footer marker on worlds */
.world-foot { text-align: center; padding: 60px 20px 50px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.4; }

/* big closing call-to-action */
.cta-foot {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 100%; padding: clamp(80px, 15vh, 170px) 20px clamp(70px, 11vh, 130px);
  background: none; border: none; cursor: pointer; text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}
.cta-foot-kick {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-soft);
}
.cta-foot-big {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(66px, 14vw, 210px); line-height: 0.88; letter-spacing: -0.02em;
  color: var(--accent);
  transition: transform 0.4s var(--ease);
}
.cta-foot-q { font-style: normal; }
.cta-foot:hover .cta-foot-big { transform: translateY(-6px); }
.cta-foot-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 8px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 15px 28px; border-radius: 999px;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.cta-foot-link .arrow { transition: transform 0.3s var(--ease); }
.cta-foot:hover .cta-foot-link { background: var(--accent-deep); }
.cta-foot:hover .cta-foot-link .arrow { transform: translateX(5px); }

/* ============================================================
   VIDEO SLOT — drop a video, plays muted/looped like a GIF
   ============================================================ */
.video-slot {
  position: absolute; inset: 0; overflow: hidden; cursor: pointer;
  background: #e7e9f6; display: grid; place-items: center;
}
.video-slot.over { outline: 2.5px dashed var(--cobalt); outline-offset: -6px; background: #dde0f5; }
.video-slot-vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-slot-empty {
  text-align: center; padding: 24px; color: var(--cobalt); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.video-slot-empty .vs-icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(28,46,224,0.12); font-size: 17px; margin-bottom: 4px;
}
.video-slot-empty .vs-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.video-slot-empty .vs-hint { font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); }
.video-slot-ctl {
  position: absolute; top: 12px; right: 12px; z-index: 8; display: flex; gap: 7px;
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.proj-card:hover .video-slot-ctl { opacity: 1; }
.mkt-proj:hover .video-slot-ctl { opacity: 1; }
.video-slot-ctl button {
  appearance: none; border: 0; border-radius: 7px; padding: 7px 12px; cursor: pointer;
  background: rgba(0,0,0,0.66); color: #fff; backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  transition: background 0.2s;
}
.video-slot-ctl button:hover { background: rgba(0,0,0,0.85); }

/* ============================================================
   PILL MOTIF — name tag, CTAs, floating decorative capsules
   ============================================================ */
/* per-world accent var */
.world-creative { --accent: var(--cobalt); --accent-deep: var(--cobalt-deep); --accent-soft: var(--cobalt-soft); }
.world-marketing { --accent: var(--red); --accent-deep: var(--red-deep); --accent-soft: var(--red-soft); }

.pill-tag {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 11px 22px; border-radius: 999px;
  border: 1.5px solid var(--accent); color: var(--accent);
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; line-height: 1; width: fit-content;
  background: color-mix(in srgb, var(--paper) 70%, transparent); backdrop-filter: blur(2px);
}
.pill-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.pill-cta {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 18px 20px 18px 30px; border-radius: 999px;
  background: var(--accent); color: #fff; width: fit-content;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.02em;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), gap 0.3s var(--ease);
  box-shadow: 0 18px 34px -16px var(--accent);
}
.pill-cta .arrow {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.18); font-size: 17px;
}
.pill-cta:hover { transform: translateY(-3px); gap: 22px; }
.pill-cta:active { transform: translateY(0); }

/* floating translucent capsules — surreal pill references */
.deco-capsule {
  position: absolute; border-radius: 999px; pointer-events: none; z-index: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--accent-deep) 75%, transparent));
  box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), inset 0 -10px 20px color-mix(in srgb, var(--accent-deep) 60%, transparent), 0 24px 44px -20px var(--accent);
  opacity: 0.85;
}
.deco-capsule::before {
  content: ""; position: absolute; left: 14%; right: 40%; top: 18%; height: 26%;
  border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.85), transparent); filter: blur(1.5px);
}
.deco-capsule.outline {
  background: none; box-shadow: none; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0.5;
}
.deco-capsule.outline::before { display: none; }
@keyframes drift { 0%,100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-22px) rotate(calc(var(--rot, 0deg) + 4deg)); } }
.deco-capsule.drift { animation: drift 9s var(--ease-in-out) infinite; }

/* ============================================================
   CREATIVE HERO — showreel + floating images
   ============================================================ */
.hero-creative {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 80px);
  align-items: center; position: relative; overflow: visible;
}
.hero-left { position: relative; z-index: 3; }
.hero-left .hero-kicker { margin-top: 26px; }
.hero-left h1 { margin-top: 22px; }
.hero-left .hero-lede { margin-top: 30px; }
.hero-left .pill-cta { margin-top: 34px; }

/* cluster pulled left so it overlaps the headline slightly, and tall enough
   that the (absolutely-positioned) images are never clipped */
.hero-right { position: relative; min-height: clamp(460px, 50vw, 640px); margin-left: clamp(-80px, -10vw, -200px); z-index: 4; }
.float-img {
  position: absolute; border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 70px -30px rgba(20,30,120,0.5);
  background: #e7e9f6;
}
.float-img image-slot { width: 100%; height: 100%; display: block; }
.fi-1 { top: 0; right: 0; width: 54%; aspect-ratio: 4/3; transform: rotate(2.5deg); z-index: 2; }
.fi-2 { top: 4%; left: 0; width: 48%; aspect-ratio: 4/3; transform: rotate(-3.5deg); z-index: 1; }

/* showreel is the hero — biggest element, on top, autoplaying video */
.showreel {
  position: absolute; bottom: 0; left: 7%; width: 80%; aspect-ratio: 16/9;
  border-radius: 22px; overflow: hidden; background: #0a0a0f; z-index: 6; cursor: pointer;
  transform: rotate(-1.5deg);
  box-shadow: 0 54px 90px -34px rgba(0,0,0,0.62);
}
.showreel image-slot { width: 100%; height: 100%; display: block; }
.showreel .reel-shade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.05)); pointer-events: none; }
.reel-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5;
  width: clamp(56px, 6vw, 78px); height: clamp(56px, 6vw, 78px); border-radius: 50%;
  display: grid; place-items: center; color: var(--cobalt); font-size: 20px;
  background: rgba(255,255,255,0.92); box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform 0.3s var(--ease); pointer-events: none;
}
.showreel:hover .reel-play { transform: translate(-50%,-50%) scale(1.1); }
.reel-label {
  position: absolute; left: 18px; bottom: 16px; z-index: 7; color: #fff; pointer-events: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.reel-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; }
.showreel:hover .video-slot-ctl { opacity: 1; }
/* dark cinematic empty state for the showreel drop zone */
.showreel .video-slot { background: #0a0a0f; }
.showreel .video-slot.over { background: #14141c; }
.showreel .video-slot-empty { color: #fff; }
.showreel .video-slot-empty .vs-icon { background: rgba(255,255,255,0.14); }
.showreel .video-slot-empty .vs-hint { color: rgba(255,255,255,0.6); }

@media (max-width: 900px) {
  .hero-creative { grid-template-columns: 1fr; }
  .hero-right { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
  .float-img, .showreel { position: static; width: auto; transform: none; }
  .fi-1 { aspect-ratio: 3/4; } .fi-2 { aspect-ratio: 3/4; }
  .showreel { grid-column: 1 / -1; aspect-ratio: 16/9; }
}

/* ============================================================
   ABOUT — editorial, large rectangular portrait
   ============================================================ */
.about { position: relative; overflow: hidden; padding: clamp(80px, 12vh, 150px) clamp(20px, 5vw, 90px); }
.world-creative .about { background: color-mix(in srgb, var(--accent) 4%, var(--paper)); }
.world-marketing .about { background: color-mix(in srgb, var(--accent) 4%, var(--paper)); }
.about-inner { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; position: relative; z-index: 2; }

/* large rectangular figure */
.about-figure { position: relative; margin: 0; }
.about-polaroid {
  display: block; width: 100%; height: auto;
  border-radius: 8px;
  /* softer, alpha-hugging shadow that follows the polaroid shape */
  filter: drop-shadow(0 16px 30px rgba(0,0,0,0.16));
  transform: rotate(-1.6deg);
  transform-origin: center;
  /* gentle floating motion */
  animation: polaroidFloat 7s var(--ease-in-out) infinite;
}
@keyframes polaroidFloat {
  0%   { transform: translateY(0)     rotate(-1.6deg); }
  50%  { transform: translateY(-15px) rotate(1deg);    }
  100% { transform: translateY(0)     rotate(-1.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .about-polaroid { animation: none; }
}
.about-frame {
  width: 100%; aspect-ratio: 5/6; border-radius: 24px; overflow: hidden;
  background: #e7e9f6;
  box-shadow: 0 50px 90px -40px var(--accent);
}
.about-frame image-slot { display: block; width: 100%; height: 100%; }
.about-figure figcaption {
  margin-top: 16px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 9px;
}
.about-figure figcaption::before { content: ""; width: 22px; height: 1.5px; background: var(--accent); }

.about-body { position: relative; z-index: 2; }
.about-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.about-body h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6vw, 86px); line-height: 0.98; color: var(--accent); letter-spacing: -0.01em; }
.about-body h2 em { font-style: italic; }
.about-body p { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.65; color: var(--ink-soft); margin-top: 26px; max-width: 560px; }
.about-body p + p { margin-top: 16px; }
.about-body p.about-closer {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(19px, 1.8vw, 26px); line-height: 1.4;
  color: var(--accent); margin-top: 30px; max-width: 520px;
}
.disc-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.disc-pill {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent); transition: background 0.25s, color 0.25s;
}
.disc-pill:hover { background: var(--accent); color: #fff; }

@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 44px; }
  .about-figure { order: -1; max-width: 440px; }
}

/* ============================================================
   DAY / NIGHT TOGGLE
   ============================================================ */
.gw-top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }

.theme-toggle {
  --tt-w: 62px; --tt-h: 30px;
  width: var(--tt-w); height: var(--tt-h); padding: 0; border-radius: 999px;
  flex: 0 0 auto;
}
.tt-track {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.tt-icon {
  position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1;
  opacity: 0.55; transition: opacity 0.4s var(--ease); pointer-events: none;
}
.tt-sun { left: 9px; }
.tt-moon { right: 9px; }
.tt-knob {
  position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
  width: calc(var(--tt-h) - 8px); height: calc(var(--tt-h) - 8px); border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transition: left 0.42s var(--ease), background 0.4s var(--ease);
}
.theme-toggle.is-night .tt-knob { left: calc(var(--tt-w) - var(--tt-h) + 5px); background: #d9ddff; }
.theme-toggle.is-night .tt-track { background: color-mix(in srgb, var(--cobalt) 40%, transparent); border-color: color-mix(in srgb, var(--cobalt-soft) 60%, transparent); }
.theme-toggle.is-day .tt-sun { opacity: 1; }
.theme-toggle.is-night .tt-moon { opacity: 1; }

/* ============================================================
   NIGHT MODE — palette override (cascades from <html data-theme>)
   ============================================================ */
:root[data-theme="night"] {
  --paper:   #0e0e13;
  --paper-2: #16161d;
  --ink:     #f1f1ef;
  --ink-soft:#9a9aa6;
  --cobalt:      #6b7bff;
  --cobalt-deep: #3848e6;
  --cobalt-soft: #9aa4ff;
  --red:      #ff5a64;
  --red-deep: #d2121f;
  --red-soft: #ff9197;
}
:root[data-theme="night"] .grain { mix-blend-mode: screen; opacity: 0.035; }
:root[data-theme="night"] ::selection { background: var(--cobalt); color: #0e0e13; }

/* surfaces that were hardcoded light → darken in night */
:root[data-theme="night"] .gateway { background: radial-gradient(120% 90% at 50% -10%, #1b1b24 0%, var(--paper) 55%, #08080c 100%); }
:root[data-theme="night"] .proj-card,
:root[data-theme="night"] .video-slot,
:root[data-theme="night"] .float-img,
:root[data-theme="night"] .about-frame,
:root[data-theme="night"] .case-media,
:root[data-theme="night"] .pp-gimg,
:root[data-theme="night"] .proj-media { background: #1c1c26; }
:root[data-theme="night"] .case { background: #15151c; border-color: rgba(255,255,255,0.08); }
:root[data-theme="night"] .proj-cat { background: rgba(20,20,28,0.9); color: var(--ink); }
:root[data-theme="night"] .video-slot.over { background: #232330; }
:root[data-theme="night"] .video-slot-empty .vs-icon { background: rgba(107,123,255,0.18); }
:root[data-theme="night"] .pill-tag { background: color-mix(in srgb, var(--paper) 60%, transparent); }
:root[data-theme="night"] .sys-item { border-bottom-color: rgba(255,255,255,0.1); }
:root[data-theme="night"] .embed-slot.empty,
:root[data-theme="night"] .embed-slot.filled { background: #15151c; }
:root[data-theme="night"] .es-input { background: rgba(255,255,255,0.06); color: var(--ink); border-color: rgba(255,255,255,0.16); }

/* ============================================================
   PROJECT DETAIL PAGE
   ============================================================ */
.proj-world { background: var(--paper); }
.pp-top {
  position: relative; z-index: 50; max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(96px, 13vh, 140px) clamp(20px, 5vw, 60px) 0;
}
.pp-back {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: background 0.25s, color 0.25s;
}
.pp-back:hover { background: var(--accent); color: #fff; }
.pp-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-soft); }
/* photography gallery is full-bleed (1500px) — widen the back-button rail to match */
.pp-top-wide { max-width: 1500px; padding-left: clamp(20px, 5vw, 90px); padding-right: clamp(20px, 5vw, 90px); }

.proj-page { max-width: 1100px; margin: 0 auto; padding: clamp(36px, 5vh, 60px) clamp(20px, 5vw, 60px) clamp(40px, 6vh, 80px); }
.pp-head { max-width: 820px; }
.pp-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.pp-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 8vw, 110px); line-height: 0.98; letter-spacing: -0.01em; color: var(--accent); }
.pp-lede { margin-top: 28px; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.6; color: var(--ink-soft); }
.pp-lede em { font-style: italic; color: var(--ink); }
.pp-meta { margin-top: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

.pp-video { position: relative; aspect-ratio: 16/9; margin-top: clamp(40px, 6vh, 70px); border-radius: 20px; overflow: hidden; background: #0a0a0f; }
.pp-video .video-slot { background: #0a0a0f; }
.pp-video .video-slot-empty { color: #fff; }
.pp-video .video-slot-empty .vs-icon { background: rgba(255,255,255,0.14); }
.pp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(24px, 4vh, 44px); }
.pp-gimg { aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; background: #e7e9f6; }
.pp-gimg image-slot { display: block; width: 100%; height: 100%; }
.pp-gallery-edit {
  aspect-ratio: 4/5; border-radius: 16px;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.pp-gallery-edit .pge-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.pp-gallery-edit .pge-btns { display: flex; gap: 8px; }
.pp-gallery-edit .pge-btn {
  width: 44px; height: 44px; border-radius: 50%; font-size: 22px; line-height: 1;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
  transition: background 0.2s, transform 0.2s var(--ease);
}
.pp-gallery-edit .pge-btn { margin: 0 4px; }
.pp-gallery-edit .pge-btn:hover:not(:disabled) { background: var(--accent); color: #fff; transform: translateY(-2px); }
.pp-gallery-edit .pge-btn:disabled { opacity: 0.3; cursor: not-allowed; }
@media (max-width: 760px) { .pp-gallery { grid-template-columns: 1fr 1fr; } }

/* prev / next */
.pp-nav {
  max-width: 1100px; margin: clamp(50px, 8vh, 90px) auto 0; padding: 0 clamp(20px, 5vw, 60px) clamp(60px, 9vh, 100px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px);
}
.pp-arrow {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  padding: 26px 28px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 5%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.3s;
}
.pp-arrow.next { text-align: right; align-items: flex-end; }
.pp-arrow:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 9%, var(--paper)); }
.ppa-dir { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.ppa-title { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.4vw, 30px); color: var(--ink); }
@media (max-width: 620px) { .pp-nav { grid-template-columns: 1fr; } .pp-arrow.next { text-align: left; align-items: flex-start; } }

.proj-open { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 16px; opacity: 0.9; }

/* ============================================================
   EMBED SLOT — YouTube / Vimeo 16:9
   ============================================================ */
.embed-slot { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; background: #e7e9f6; }
.embed-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-change {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,0.66); color: #fff; backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.25s;
}
.embed-slot.filled:hover .embed-change { opacity: 1; }
.embed-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 28px; text-align: center; color: var(--cobalt);
}
.es-icon {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(28,46,224,0.12); font-size: 18px;
}
.es-cap { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.es-row { display: flex; gap: 8px; width: 100%; max-width: 440px; }
.es-input {
  flex: 1; padding: 12px 16px; border-radius: 10px; font-size: 14px;
  background: #fff; border: 1.5px solid rgba(28,46,224,0.25); color: var(--ink);
}
.es-input:focus { outline: none; border-color: var(--cobalt); }
.es-go {
  padding: 12px 20px; border-radius: 10px; background: var(--cobalt); color: #fff;
  font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.04em;
}
.es-err { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--red); }

/* ============================================================
   GHOSTY — social-media page (count-ups + parallax phones)
   ============================================================ */
.ghosty-page { max-width: 1100px; }

.ghosty-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 36px);
  margin-top: clamp(44px, 7vh, 80px);
}
.gstat { border-top: 2px solid var(--accent); padding-top: 18px; }
.gstat-num {
  font-family: var(--font-display); font-size: clamp(44px, 6.5vw, 92px); line-height: 0.9;
  color: var(--accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.gstat-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 14px; line-height: 1.5; }
@media (max-width: 820px) { .ghosty-stats { grid-template-columns: 1fr 1fr; row-gap: 30px; } }

/* ---- two-column scene: a phone cluster is pinned on the left while the
   chapters scroll comfortably past on the right ---- */
.ghosty-scene {
  position: relative; margin-top: clamp(48px, 7vh, 90px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.ghosty-phone-col { position: sticky; top: 11vh; align-self: start; }
.ghosty-phones {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.8vw, 30px);
  width: 100%; max-width: 460px; margin: 0 auto;
}
.phone {
  width: 100%;
  will-change: transform; filter: drop-shadow(0 26px 44px rgba(0,0,0,0.38));
}
.gp-2, .gp-4 { margin-top: clamp(30px, 6vh, 78px); } /* drop the right column for a staggered cluster */
.phone-frame {
  position: relative; width: 100%; aspect-ratio: 576 / 1024; padding: 6px;
  background: linear-gradient(150deg, #2a2a32, #0a0a0d 60%); border-radius: 24px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08), inset 0 2px 3px rgba(255,255,255,0.18);
}
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; background: #000; }
.phone-screen .video-slot { background: #000; }
.phone-screen .video-slot-empty { color: rgba(255,255,255,0.85); padding: 8px; }
.phone-screen .video-slot-empty .vs-icon { background: rgba(255,255,255,0.14); width: 34px; height: 34px; font-size: 13px; }
.phone-screen .video-slot-empty .vs-cap { font-size: 8px; }
.phone-island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 26%; height: 11px; border-radius: 999px; background: #000;
}

/* chapter panels — flow naturally with generous spacing; every chapter stays
   fully legible (no dim-until-active), with a one-time fade-up on reveal */
.ghosty-text-col { position: relative; }
.gc-panel {
  padding: clamp(46px, 9vh, 104px) 0;
}
.gc-panel:first-child { padding-top: clamp(8px, 2vh, 28px); }
.gc-panel:last-child { padding-bottom: clamp(20px, 4vh, 48px); }
.gc-block {
  max-width: 540px;
}
/* one-time entrance, opt-in via JS so text is fully readable with no JS */
.anim-on .gc-block {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.anim-on .gc-panel.is-seen .gc-block { opacity: 1; transform: none; }
.gc-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
.gc-block h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; color: var(--ink); }
.gc-block p { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.62; color: var(--ink-soft); margin-top: 24px; }

@media (max-width: 760px) {
  .ghosty-scene { grid-template-columns: 1fr; gap: 40px; }
  .ghosty-phone-col { position: relative; top: 0; }
  .ghosty-phones { max-width: 340px; }
  .gp-2, .gp-4 { margin-top: 28px; }
  .gc-panel { padding: 26px 0; }
  .anim-on .gc-block { opacity: 1; transform: none; max-width: none; }
}

/* ============================================================
   CREATIVE CARDS — free the media for uploads, nav via button
   ============================================================ */
.proj-card { cursor: default; }
/* the hover-reveal label is purely visual so it never blocks drop/click on the media */
.proj-label { pointer-events: none; }
.card-open {
  position: absolute; right: 14px; bottom: 14px; z-index: 8;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 17px; border-radius: 999px;
  background: rgba(255,255,255,0.94); color: var(--accent);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  backdrop-filter: blur(6px); box-shadow: 0 8px 22px -10px rgba(0,0,0,0.5);
  transition: transform 0.25s var(--ease), background 0.25s; pointer-events: auto;
}
.card-open span { font-size: 13px; transition: transform 0.25s var(--ease); }
.card-open:hover { transform: translateY(-2px); background: var(--accent); color: #fff; }
.card-open:hover span { transform: translate(2px, -2px); }
:root[data-theme="night"] .card-open { background: rgba(20,20,28,0.92); color: var(--cobalt-soft); }
:root[data-theme="night"] .card-open:hover { background: var(--cobalt); color: #0e0e13; }

/* ============================================================
   MISC PHOTO PROJECTS — pinned horizontal-scroll filmstrip
   ============================================================ */
.misc { position: relative; }
.misc-intro {
  max-width: 1500px; margin: 0 auto; padding: clamp(40px, 7vh, 90px) clamp(20px, 5vw, 90px) clamp(10px, 2vh, 24px);
}
.misc-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 18px; }
.misc-intro h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 6vw, 76px); line-height: 1; color: var(--cobalt); }
.misc-intro p { font-size: clamp(15px, 1.4vw, 19px); line-height: 1.6; color: var(--ink-soft); max-width: 620px; margin-top: 24px; }
.misc-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 26px; opacity: 0.7; }

.hscroll { position: relative; }
.hscroll-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.hscroll-track {
  display: flex; align-items: center; gap: clamp(18px, 2vw, 34px);
  padding: 0 clamp(20px, 5vw, 90px); height: 70vh; will-change: transform;
}

/* project divider / label card */
.misc-divider {
  flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(14px, 1.6vw, 30px) 8px; border-left: 1.5px solid color-mix(in srgb, var(--cobalt) 30%, transparent);
}
.md-index { font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 3vw, 46px); color: var(--cobalt); line-height: 1; max-width: 8ch; }
.md-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 14px; }

/* photo tiles */
.misc-shot {
  flex: 0 0 auto; height: 100%; margin: 0; border-radius: 16px; overflow: hidden;
  background: #e7e9f6; box-shadow: 0 34px 60px -36px rgba(20,30,120,0.5);
  transition: transform 0.4s var(--ease);
}
.misc-shot:hover { transform: translateY(-6px); }
.misc-shot image-slot { display: block; width: 100%; height: 100%; }
/* editor-only "add a photo" slot — visually quieter than a real photo */
.misc-shot.is-add { box-shadow: none; background: transparent; outline: 1.5px dashed color-mix(in srgb, var(--cobalt) 35%, transparent); outline-offset: -2px; }
.misc-shot.is-add:hover { transform: none; }

/* per-project add / remove frames control (only shown when editable) */
.misc-edit {
  flex: 0 0 auto; align-self: center; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 clamp(8px, 1.4vw, 24px);
}
.misc-edit .me-count { font-family: var(--font-display); font-size: clamp(34px, 4vw, 60px); line-height: 0.9; color: var(--cobalt); }
.misc-edit .me-cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.misc-edit .me-btns { display: flex; gap: 8px; margin-top: 8px; }
.misc-edit .me-btn {
  width: 38px; height: 38px; border-radius: 50%; font-size: 20px; line-height: 1;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cobalt) 10%, transparent); color: var(--cobalt);
  transition: background 0.2s, transform 0.2s var(--ease);
}
.misc-edit .me-btn:hover:not(:disabled) { background: var(--cobalt); color: #fff; transform: translateY(-2px); }
.misc-edit .me-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.misc-end {
  flex: 0 0 auto; align-self: center; padding: 0 clamp(20px, 4vw, 70px); text-align: center;
}
.me-num { font-family: var(--font-display); font-size: clamp(60px, 9vw, 150px); line-height: 0.85; color: var(--cobalt); }
.me-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 16px; }

.hscroll-progress {
  position: absolute; left: clamp(20px, 5vw, 90px); right: clamp(20px, 5vw, 90px); bottom: clamp(40px, 7vh, 80px);
  height: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 2px;
}
.hscroll-progress i { display: block; height: 100%; width: 0%; background: var(--cobalt); border-radius: 2px; transition: width 0.08s linear; }

:root[data-theme="night"] .misc-shot { background: #1c1c26; }

/* mobile: native horizontal swipe strip, no pinning */
@media (max-width: 760px) {
  .hscroll-pin { position: relative; top: 0; height: auto; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .hscroll-track { transform: none !important; height: 64vh; padding: 10px clamp(20px, 5vw, 90px); }
  .misc-shot { scroll-snap-align: center; }
  .hscroll-progress { display: none; }
  .misc-hint { display: none; }
}

/* ============================================================
   MOBILE OPTIMISATION
   ============================================================ */

/* --- Touch devices: reveal everything that was hover-gated --- */
@media (hover: none), (max-width: 760px) {
  /* gateway choice labels were invisible until hover */
  .gw-choice-label { opacity: 1; transform: none; }
  .gw-choice-sub { opacity: 0.85; height: auto; }

  /* project-card titles/desc were revealed on hover only */
  .hov-slideup .proj-label { transform: none; }
  .hov-wipe .proj-label { clip-path: inset(0 0 0 0); }
  .hov-dim .proj-label { opacity: 1; transform: none; }
  .hov-dim .proj-img-zoom { filter: brightness(0.5) saturate(0.85); }
  /* no zoom-on-hover jump on touch */
  .hov-slideup:hover .proj-img-zoom,
  .hov-dim:hover .proj-img-zoom,
  .hov-cursor:hover .proj-img-zoom,
  .hov-wipe:hover .proj-img-zoom { transform: none; }
}

/* --- Gateway: stack cleanly, no overlap --- */
@media (max-width: 600px) {
  .gw-top { padding: 16px; align-items: flex-start; }
  .gw-meta { display: none; }
  .gw-stage { flex: initial; flex-direction: column; gap: 30px; padding: 24px 20px 8px; }
  .capsule-img { width: min(64vw, 270px); }
  .gw-choice { gap: 16px; }
  .gw-descriptor { position: static; transform: none; left: auto; bottom: auto; margin: 8px auto 0; padding: 0 24px 40px; max-width: none; }
  .gw-descriptor p { font-size: 22px; }
  .gw-descriptor span { margin-top: 12px; }
}

/* --- Nav: compact so it never overflows the bar --- */
@media (max-width: 600px) {
  .nav { padding: 13px 16px; }
  .nav-right { gap: 12px; }
  .nav-name { letter-spacing: 0.14em; font-size: 11px; }
  .wtoggle button { padding: 6px 10px; font-size: 9px; letter-spacing: 0.07em; }
  .theme-toggle { --tt-w: 52px; --tt-h: 26px; }
}
@media (max-width: 430px) {
  .nav-link { display: none; } /* Contact reachable via the in-page CTA */
  .nav-name { font-size: 10px; letter-spacing: 0.1em; }
}

/* --- Bigger tap targets on touch --- */
@media (hover: none), (max-width: 760px) {
  .card-open { padding: 13px 18px; }
  .disc-pill, .tool-tag { padding: 11px 16px; }
}

/* --- Hero & sections: tighten rhythm on small screens --- */
@media (max-width: 600px) {
  .hero { padding: clamp(96px, 16vh, 130px) 20px 40px; }
  .hero-right { grid-template-columns: 1fr 1fr; }
  .section { padding: 40px 20px; }
  .section-head { margin-bottom: 26px; }
  .pp-top { padding: 92px 18px 0; }
  .proj-page { padding: 28px 18px 50px; }
  .pp-nav { padding: 0 18px 64px; }
  .gstat-num { font-size: clamp(40px, 13vw, 60px); }
}

/* --- Ghosty chapters: comfortable single-column reading --- */
@media (max-width: 600px) {
  .gc-block h3 { font-size: clamp(28px, 8vw, 38px); }
  .gc-block p { font-size: 16px; }
  .ghosty-phones { max-width: 280px; }
}

/* ============================================================
   CUSTOM STAR CURSOR (sitewide)
   Slightly irregular, hand-drawn 5-point star. Cobalt on the
   creative side, deep red on the marketing side. The star IS
   the cursor — no default arrow underneath.
   ============================================================ */
:root {
  --cur-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.4 L19.4 11.3 L28.5 11.9 L21.3 17.8 L24.4 27.6 L16 22.4 L7.9 27 L10.6 17.7 L2.6 11.6 L12.4 11.2 Z' fill='%230d0d10' stroke='%23ffffff' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14, auto;
  --cur-cobalt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.4 L19.4 11.3 L28.5 11.9 L21.3 17.8 L24.4 27.6 L16 22.4 L7.9 27 L10.6 17.7 L2.6 11.6 L12.4 11.2 Z' fill='%231c2ee0' stroke='%23ffffff' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14, auto;
  --cur-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.4 L19.4 11.3 L28.5 11.9 L21.3 17.8 L24.4 27.6 L16 22.4 L7.9 27 L10.6 17.7 L2.6 11.6 L12.4 11.2 Z' fill='%23d2121f' stroke='%23ffffff' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14, auto;
}

/* base = cobalt */
body { cursor: var(--cur-cobalt); }
/* gateway = black star */
.gateway, .gateway * { cursor: var(--cur-black); }
/* creative + contact + project pages inherit accent via world class */
/* contact cursor follows its origin side */
.world-creative, .world-creative *,
.nav.creative, .nav.creative * { cursor: var(--cur-cobalt); }
.contact.is-marketing, .contact.is-marketing * { cursor: var(--cur-red); }
.contact.is-creative, .contact.is-creative * { cursor: var(--cur-cobalt); }

/* marketing side = deep red */
.world-marketing, .world-marketing *,
.nav.marketing, .nav.marketing * { cursor: var(--cur-red); }

/* text fields keep a usable caret */
.cform .field, .es-input, input, textarea { cursor: text; }

/* ============================================================
   LARGE-SCREEN COMFORT SCALING
   The editorial display type maxes out very large, so on laptop
   and desktop widths the page feels oversized (a 13" MacBook Air
   sits around 1470px CSS-wide). Scale the whole app down from
   laptop widths up — the "looks right at ~67% zoom" feel — while
   leaving tablets/phones (their own responsive layout) untouched.
   Full-bleed 100vh screens are compensated by the same factor so
   they still fill the viewport exactly.
   ============================================================ */
@media (min-width: 1024px) {
  :root { --pz: 0.74; }
  #root { zoom: var(--pz); }
  #root,
  .gateway,
  .world,
  .proj-world,
  .contact,
  .contact-inner { min-height: calc(100vh / var(--pz)); }
}
@media (min-width: 1280px) { :root { --pz: 0.68; } }
@media (min-width: 1600px) { :root { --pz: 0.64; } }
@media (min-width: 2000px) { :root { --pz: 0.6; } }