/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pink: #ff1f6e;
  --black: #080808;
  --white: #ffffff;
  --gray: #888;
  --nav-h: 56px;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Anton', Impact, 'Arial Narrow', Arial, sans-serif;
}

html, body { height: 100%; overflow: hidden; }
body { font-family: var(--font-body); color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* ===== SLIDE HEADER ===== */
.slide-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pink);
  display: block;
  margin-bottom: 0.6rem;
}

.slide-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  text-transform: uppercase;
  line-height: 0.92;
  color: var(--black);
  margin-bottom: 3rem;
}

.slide-header { margin-bottom: 0; }

/* Smaller, single-line variant used where the section doesn't need a huge display title.
   Pink instead of black so the section header doesn't compete with card titles below it. */
.slide-title-plain {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 1.5rem;
  color: var(--pink);
}

/* ===== SLIDE 1: HOME ===== */
#slide-home { overflow-y: auto; }

.slide-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--nav-h));
}

.home-image {
  /* Match the credential photo's studio backdrop so rotation never reveals
     a contrasting edge */
  background: #f3f1ef;
  border-right: 2.5px solid var(--black);
  /* Let the ID extend over the right (About Me) panel for the 3D float effect */
  overflow: visible;
  max-height: calc(100vh - var(--nav-h));
  perspective: 1200px;
  position: relative;
  z-index: 5;
}

.home-image img {
  /* Extend past the right border so the credential floats over the About Me panel */
  width: 116%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Hinge at the top center (lanyard clip) and scale up a touch so rotation
     never reveals a gap at the edges */
  transform-origin: 50% 0%;
  transform: scale(1.04);
  /* 3D lift over the pink panel: directional shadow that follows the swing */
  filter: drop-shadow(-6px 14px 18px rgba(0, 0, 0, 0.32))
          drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.18));
  animation: idSwayIdle 5.5s ease-in-out infinite;
  will-change: transform, filter;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  position: relative;
  z-index: 5;
}

.home-image img:active,
.home-image img.dragging { cursor: grabbing; }

/* Continuous gentle sway, as if hanging from a lanyard */
@keyframes idSwayIdle {
  0%, 100% { transform: scale(1.04) rotate(-1deg); }
  50%      { transform: scale(1.04) rotate(1deg); }
}

/* Damped pendulum: starts strong, decays toward stillness, then idle resumes.
   Triggered by JS when the home slide flips in or out. */
@keyframes idSwayKick {
  0%   { transform: scale(1.04) rotate(-6deg); }
  18%  { transform: scale(1.04) rotate(4.5deg); }
  36%  { transform: scale(1.04) rotate(-3deg); }
  54%  { transform: scale(1.04) rotate(1.8deg); }
  72%  { transform: scale(1.04) rotate(-0.9deg); }
  88%  { transform: scale(1.04) rotate(0.4deg); }
  100% { transform: scale(1.04) rotate(0deg); }
}

.home-image img.kick {
  animation: idSwayKick 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.home-about {
  background: var(--pink);
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.5rem;
  overflow-y: auto;
}

/* Text on the pink panel uses white-with-opacity tones so nothing punches
   too hard against the hot pink. Monochrome palette that reads editorial. */
.home-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.home-title {
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 9rem);
  text-transform: uppercase;
  line-height: 0.88;
  color: var(--white);
}

.home-bio {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.88);
  max-width: 460px;
  border-top: 1.5px solid rgba(255,255,255,0.3);
  padding-top: 1.25rem;
}

.home-meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
  flex-wrap: wrap;
}

.home-meta a { color: rgba(255,255,255,0.92); }
.home-meta a:hover { color: var(--white); }

.home-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}

.home-stat {
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-right: 1.5px solid rgba(255,255,255,0.14);
  border-bottom: 1.5px solid rgba(255,255,255,0.14);
}

.home-stat:nth-child(2n) { border-right: none; }
.home-stat:nth-child(3), .home-stat:nth-child(4) { border-bottom: none; }

.home-stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

/* Unified muted tone for the $, digits, and suffix — no white accent */
.home-stat-num,
.home-stat-num .num,
.home-stat-num .sfx,
.home-stat-num span { color: rgba(255, 255, 255, 0.65) !important; }

.home-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===== SLIDE 2: WORK ===== */
.cases-scroll {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.case-card {
  border: 1.5px solid #e5e5e5;
  border-radius: 12px;
  padding: 2.25rem;
  background: #fafafa;
}

.case-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.case-label-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  display: block;
  margin-bottom: 0.35rem;
}

.case-name {
  font-family: var(--font-display);
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
}

.case-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }

.cs { display: flex; flex-direction: column; gap: 0.15rem; text-align: right; }

.cs-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--pink);
  line-height: 1;
}

.cs-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray);
}

.case-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.col-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.5rem;
  display: block;
}

.case-cols p:not(.col-label) {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #555;
}

.case-list { display: flex; flex-direction: column; gap: 0.35rem; }

.case-list li {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #555;
  padding-left: 1rem;
  position: relative;
}

.case-list li::before { content: '→'; position: absolute; left: 0; color: var(--pink); font-size: 0.72rem; top: 0.1rem; }

/* ===== BRAND CARD (video-first layout) ===== */
.brand-card {
  border: 2px solid var(--black);
  border-radius: 12px;
  padding: 1.6rem 1.6rem 1.4rem;
  margin-bottom: 2rem;
  background: var(--white);
  box-shadow: 6px 6px 0 0 var(--black);
}

.brand-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}

.brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
}

.brand-meta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
}

.brand-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}

.video-tile {
  position: relative;
}

.brand-videos video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 8px;
  background: #0a0a0a;
  display: block;
}

.sound-badge {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: var(--white);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.sound-badge:hover { transform: scale(1.1); }
.sound-badge.unmuted { background: var(--pink); }

.brand-metrics {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1.5px solid rgba(0,0,0,0.12);
}

.brand-metrics .bm {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.brand-metrics .bm-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--black);
}

.brand-metrics .bm-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
}

.brand-note {
  margin-top: 1rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #555;
}


/* ===== SLIDE 3: APPROACH ===== */
.approach-lead {
  font-size: 0.98rem;
  line-height: 1.75;
  color: #666;
  max-width: 580px;
  margin-bottom: 2.5rem;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.ap-card {
  background: var(--pink);
  border-radius: 12px;
  padding: 2rem;
  transition: outline 0.15s;
}

.ap-card:hover { outline: 2px solid var(--black); }

.ap-num {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--white);
  opacity: 0.55;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.ap-card h4 { font-size: 0.92rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; }
.ap-card p  { font-size: 0.83rem; line-height: 1.65; color: rgba(255,255,255,0.85); }

/* ===== SLIDE 4: SERVICES ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1.5px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.sv {
  padding: 2rem;
  border-right: 1.5px solid #e5e5e5;
  border-bottom: 1.5px solid #e5e5e5;
  transition: background 0.15s;
}
.sv:hover { background: #f5f5f5; }
.sv:nth-child(3n) { border-right: none; }
.sv:nth-child(4), .sv:nth-child(5), .sv:nth-child(6) { border-bottom: none; }

.sv-star { display: block; color: var(--pink); font-size: 0.9rem; margin-bottom: 0.65rem; }
.sv h4 { font-size: 0.92rem; font-weight: 700; color: var(--black); margin-bottom: 0.45rem; }
.sv p  { font-size: 0.8rem; line-height: 1.65; color: #666; }

.tools-headline {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 0.9rem;
}

/* Infinite horizontal marquee: the track holds the pill list twice back to
   back, then scrolls exactly -50% so the loop point is invisible. */
.tools-strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.tools-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 0.5rem;
  animation: toolsScroll 28s linear infinite;
}

.tools-strip:hover .tools-track { animation-play-state: paused; }

@keyframes toolsScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tool {
  flex: none;
  white-space: nowrap;
  padding: 0.45rem 1rem;
  border: 1.5px solid #ddd;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #444;
  background: var(--white);
  cursor: default;
  transition: border-color 0.15s, color 0.15s;
}
.tool:hover { border-color: var(--pink); color: var(--pink); }

/* ===== SLIDE 5: CONTACT ===== */
.contact-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--nav-h));
  text-align: left;
}

.contact-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6.5rem);
  text-transform: uppercase;
  line-height: 0.93;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.pink { color: var(--pink); }

.contact-sub { font-size: 0.95rem; color: #666; margin-bottom: 2.5rem; }

.btn-contact {
  display: inline-block;
  background: var(--pink);
  color: var(--white);
  padding: 1rem 2.25rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 2rem;
  transition: opacity 0.2s, transform 0.2s;
}
.btn-contact:hover { opacity: 0.88; transform: translateY(-1px); }

.contact-links {
  display: flex;
  gap: 2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}
.contact-links a:hover { color: var(--white); }

.contact-footer { font-size: 0.72rem; color: #333; }

.contact-availability {
  margin-top: 1rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: #2a2a2a;
  max-width: 640px;
  line-height: 1.6;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .slide-home-grid { grid-template-columns: 1fr; min-height: unset; }
  .home-image { max-height: 55vw; border-right: none; border-bottom: 2.5px solid var(--black); }
  .home-about { min-height: unset; padding: 2.5rem 1.5rem; }
  .home-title { font-size: 4.5rem; }
  .case-cols { grid-template-columns: 1fr; gap: 1.25rem; }
  .case-top { flex-direction: column; }
  .cs { text-align: left; }
  .approach-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .sv { border-right: none; }
  .sv:nth-child(n) { border-bottom: 1.5px solid #e5e5e5; }
  .sv:last-child { border-bottom: none; }
  .slide-inner { padding: 2rem 1.25rem 3rem; }
  .nav-tabs .tab { font-size: 0.68rem; padding: 0.4rem 0.75rem 0.55rem; }
}

@media (max-width: 600px) {
  .home-stats { grid-template-columns: 1fr 1fr; }
  .contact-title { font-size: 2.8rem; }
  .nav-logo { font-size: 1.1rem; }
}

/* ===== FOLDER (index dividers) =====
   One file folder fills the window. Five dividers stack inside it, tabs staggered
   along the top edge. The body takes the color of the front divider and the
   page content sits on a sheet of paper inside it. */
:root {
  /* every divider in the brand pink; depth and shadow tell them apart */
  --c0: #ff1f6e; --c1: #ff1f6e; --c2: #ff1f6e; --c3: #ff1f6e; --c4: #ff1f6e;
  --desk: #ebe9f0;
  --tab-h: 42px;
  --tw: min(20%, 190px);
}
body { background: var(--desk); }

.folder { position: fixed; top: 14px; left: 16px; right: 16px; bottom: 16px; }
.folder-logo {
  position: absolute; top: 12px; right: 6px; z-index: 100;
  font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.08em; color: var(--black);
}

.divider { position: absolute; inset: 0; z-index: var(--z, 1); pointer-events: none; }

/* The shape (tab + body color) carries the soft shadow. The page content is a
   separate layer so the 24 videos never get re-filtered on every frame. */
.shape {
  position: absolute; inset: 0; pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(20, 10, 40, 0.16)) drop-shadow(0 14px 18px rgba(20, 10, 40, 0.12));
}
.body {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--tab-h);
  background: var(--c); border-radius: 16px;
}
.divider[data-slide="home"] .body { border-top-left-radius: 0; }

.tab {
  position: absolute; top: 0; height: var(--tab-h);
  left: calc(var(--i) * var(--tw)); width: calc(var(--tw) - 6px);
  pointer-events: auto;
  border: 0; padding: 0 4px;
  background: var(--c); color: var(--black);
  font: 700 clamp(0.56rem, 2.2vw, 0.76rem)/1 var(--font-body);
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  transform: translateY(8px);
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.tab:hover { transform: translateY(4px); }
.tab:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

/* concave joins that melt the active tab into the folder body */
.tab::before, .tab::after {
  content: ""; position: absolute; bottom: 0; width: 12px; height: 12px;
  opacity: 0; transition: opacity 0.2s;
}
.tab::before { left: -12px; background: radial-gradient(circle at 0 0, transparent 12px, var(--c) 12.5px); }
.tab::after  { right: -12px; background: radial-gradient(circle at 100% 0, transparent 12px, var(--c) 12.5px); }
.divider.is-active .tab { transform: translateY(0); }
.divider.is-active .tab::before, .divider.is-active .tab::after { opacity: 1; }
.divider[data-slide="home"] .tab::before { display: none; }

/* ===== Paper inside the folder ===== */
.content {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--tab-h);
  pointer-events: auto;
}
.sheet-back, .sheet { position: absolute; inset: 16px; border-radius: 10px; }
.sheet-back {
  background: var(--white); opacity: 0.55;
  transform: rotate(1deg) translateY(2px);
  box-shadow: 0 1px 2px rgba(20, 10, 40, 0.12);
}
.sheet {
  background: var(--white); color: var(--black);
  overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 1px 2px rgba(20, 10, 40, 0.14), 0 6px 14px -6px rgba(20, 10, 40, 0.18);
  opacity: 0; visibility: hidden;
  transform: translateY(28px) rotate(1.6deg);
  transition: transform 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s;
}
.divider.is-active .sheet {
  opacity: 1; visibility: visible;
  transform: translateY(0) rotate(var(--rot, -0.35deg));
  transition: transform 0.7s cubic-bezier(0.34, 1.35, 0.5, 1) 0.08s, opacity 0.3s ease 0.08s, visibility 0s;
}
.slide-dark { background: var(--black); }

/* Home: the cream panel and the pink body are the sheet itself, no paper card */
.divider[data-slide="home"] .sheet-back { display: none; }
#slide-home {
  --rot: 0deg;
  inset: 0; border-radius: 0; background: transparent; box-shadow: none;
  overflow: visible;
}

.sheet .slide-inner { padding: 2rem 2rem 3rem; }
.sheet .contact-inner { min-height: 100%; }
.slide-home-grid { height: 100%; min-height: 0; }
.home-image { margin: 16px 0 16px 16px; border: 0; border-radius: 12px; max-height: none; }
.home-about { padding: 2.5rem 3.5rem; }

/* ===== WebGL mode: Three.js draws the cardstock, the DOM keeps text, photo and clicks ===== */
.folder-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.folder { z-index: 1; }
.folder.gl .shape { filter: none; }
.folder.gl .body { display: none; }
.folder.gl .tab {
  background: transparent; color: transparent; transition: none; will-change: transform;
}
.folder.gl.browsing .content { pointer-events: none; }
.folder.gl .divider.is-active .sheet { transition: opacity 0.2s ease, visibility 0s; transform: none; }
.folder.gl .sheet { transition: none; transform: none; }
.folder.gl #slide-home { transform: none; }
.folder.gl .tab::before, .folder.gl .tab::after { display: none; }
.folder.gl .tab:hover { transform: none; }
.folder.gl .tab:focus-visible { outline-offset: -4px; }

@media (max-width: 950px) {
  .divider[data-slide="contact"] .tab { width: var(--tw); }
  .divider[data-slide="contact"] .tab::after { display: none; }
  .divider[data-slide="contact"] .body { border-top-right-radius: 0; }
  .folder-logo { display: none; }
}
@media (max-width: 900px) {
  .folder { top: 10px; left: 10px; right: 10px; bottom: 10px; }
  #slide-home { overflow-y: auto; overflow-x: hidden; }
  .home-image { margin: 12px 12px 0; max-height: 55vw; border: 0; }
  .home-image img { width: 100%; }
  .home-about { padding: 2rem 1.5rem 2.5rem; }
  .sheet { inset: 10px; }
  .sheet .slide-inner { padding: 1.5rem 1.1rem 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tab, .sheet { transition: none !important; }
}

/* ===== Work videos: tap anywhere on a video for sound ===== */
.video-tile { cursor: pointer; border-radius: 8px; }
.video-tile.has-sound { box-shadow: 0 0 0 3px var(--pink); }
.sound-badge {
  width: auto; height: auto; left: 50%; right: auto; bottom: 0.6rem;
  transform: translateX(-50%);
  padding: 0.38rem 0.7rem; border-radius: 100px;
  background: rgba(8, 8, 8, 0.72); color: var(--white);
  font: 700 0.62rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; backdrop-filter: blur(4px);
}
.sound-badge:hover { transform: translateX(-50%) scale(1.05); }
.video-tile.has-sound .sound-badge { background: var(--pink); }

/* ===== Spend ledger (top of Work) ===== */
.spend-ledger {
  border: 2px solid var(--black); border-radius: 12px;
  background: var(--pink); color: var(--white);
  padding: 1.5rem 1.6rem 1.1rem; margin-bottom: 2rem;
  box-shadow: 6px 6px 0 0 var(--black);
}
.ledger-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 2rem; margin-bottom: 1.1rem; }
.ledger-total { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; max-width: 30rem; line-height: 1.4; }
.ledger-num { display: block; font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5rem); line-height: 0.95; letter-spacing: 0; margin-bottom: 0.3rem; }
.ledger-fine { font-size: 0.68rem; color: rgba(255,255,255,0.75); max-width: 18rem; line-height: 1.5; }
.ledger-table { border-top: 1.5px solid rgba(255,255,255,0.35); }
.ledger-head, .ledger-row {
  display: grid; grid-template-columns: 1.3fr 1fr 1.6fr auto; gap: 1rem; align-items: center;
  padding: 0.7rem 0; border-bottom: 1.5px solid rgba(255,255,255,0.22);
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-head { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); padding: 0.55rem 0; }
.ledger-row { font-size: 0.82rem; line-height: 1.4; }
.ledger-brand { font-weight: 700; }
.ledger-brand em, .ledger-spend em { display: block; font-style: normal; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.ledger-spend { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; }
.proof-btn {
  border: 1.5px solid var(--white); background: transparent; color: var(--white);
  border-radius: 100px; padding: 0.4rem 0.8rem; cursor: pointer; white-space: nowrap;
  font: 700 0.62rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
}
.proof-btn:hover { background: var(--white); color: var(--pink); }
.proof-box {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 4vh 4vw;
  background: rgba(8, 8, 8, 0.82);
}
.proof-box.open { display: flex; }
.proof-box figure { max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 0.6rem; }
.proof-box img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 8px; background: var(--white); }
.proof-box figcaption { color: rgba(255,255,255,0.8); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.proof-close { position: absolute; top: 1rem; right: 1.2rem; border: 0; background: none; color: var(--white); font-size: 2rem; cursor: pointer; }
@media (max-width: 700px) {
  .ledger-head { display: none; }
  .ledger-row { grid-template-columns: 1fr auto; gap: 0.25rem 1rem; }
  .ledger-row > span:nth-child(3) { grid-column: 1 / -1; font-size: 0.76rem; color: rgba(255,255,255,0.85); }
  .ledger-proof { grid-column: 1 / -1; }
}
.ledger-spend em { font-family: var(--font-body); margin-top: 0.2rem; }

/* ===== Recruiter audit additions ===== */
.home-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cta-primary, .cta-ghost {
  display: inline-block; border-radius: 100px; padding: 0.85rem 1.5rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; transition: transform 0.15s, background 0.15s, color 0.15s;
}
.cta-primary { background: var(--white); color: var(--pink); }
.cta-ghost { border: 2px solid rgba(255,255,255,0.75); color: var(--white); }
.cta-primary:hover, .cta-ghost:hover { transform: translateY(-1px); }
.cta-ghost:hover { background: var(--white); color: var(--pink); }
.brand-role { width: 100%; order: 3; font-size: 0.82rem; font-weight: 600; color: #444; margin-top: -0.3rem; }
.brand-videos.is-collapsed > :nth-child(n+4) { display: none; }
.more-videos {
  display: block; margin: -0.4rem auto 1.2rem; cursor: pointer;
  border: 2px solid var(--black); background: var(--white); color: var(--black);
  border-radius: 100px; padding: 0.55rem 1.1rem;
  font: 700 0.7rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
}
.more-videos:hover { background: var(--black); color: var(--white); }
.contact-sub { color: #bdbdbd; }
.contact-availability { color: #9a9a9a; font-size: 0.72rem; }

/* Top-spend ads from Ads Manager */
.top-tag {
  position: absolute; top: 0.55rem; left: 0.55rem; pointer-events: none;
  background: var(--pink); color: var(--white); border-radius: 100px;
  padding: 0.3rem 0.6rem; font: 800 0.58rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
}

/* Spend on each top ad tile */
.spend-chip {
  position: absolute; top: 0.5rem; left: 0.5rem; right: 3.6rem; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
}
.spend-chip strong {
  background: var(--pink); color: var(--white); border-radius: 100px; padding: 0.32rem 0.65rem;
  font: 400 0.95rem/1 var(--font-display); letter-spacing: 0.02em;
}
.spend-chip span:not(:empty) {
  background: rgba(8, 8, 8, 0.72); color: var(--white); border-radius: 6px; padding: 0.25rem 0.45rem;
  font: 700 0.56rem/1.3 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; backdrop-filter: blur(4px);
}
.tile-proof {
  position: absolute; top: 0.5rem; right: 0.5rem; cursor: pointer;
  border: 0; border-radius: 100px; padding: 0.32rem 0.55rem; background: var(--white); color: var(--black);
  font: 800 0.56rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.tile-proof:hover { background: var(--pink); color: var(--white); }
.brand-videos video[poster]:not([data-src]) { object-fit: cover; }

/* Biggest creatives callout inside the ledger */
.ledger-best {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.5rem;
  background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.35); border-radius: 10px;
  padding: 0.9rem 1.1rem; margin-bottom: 1.1rem; font-size: 0.82rem; line-height: 1.7;
}
.ledger-best strong { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; margin-right: 0.35rem; }
.best-label { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.best-proofs { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Home: keep the stats block inside the pink panel at any height */
.home-about { justify-content: center; gap: 1.1rem; overflow-y: auto; padding-top: 2rem; padding-bottom: 2rem; }
.home-title { font-size: clamp(3.4rem, 7vw, 6.4rem); }
.home-stat { padding: 0.85rem 1.1rem; }
.home-stat-num { font-size: 1.75rem; }
@media (max-height: 760px) and (min-width: 901px) {
  .home-title { font-size: clamp(3rem, 5.5vw, 4.8rem); }
  .home-bio { font-size: 0.86rem; line-height: 1.6; padding-top: 0.9rem; }
}

/* Tools: most-requested pinned on top of Services */
.tools-block { margin: -1.2rem 0 2.2rem; }
.tools-block .tools-headline { margin-bottom: 0.8rem; }
.tools-hot { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 0.8rem; }
.tool-hot {
  background: var(--pink); color: var(--white); border-radius: 100px;
  padding: 0.6rem 1.15rem; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 3px 3px 0 0 var(--black);
}

/* Ledger: fixed proof column so rows without a proof stay aligned */
.ledger-head, .ledger-row { grid-template-columns: 1.3fr 1fr 1.6fr 6.5rem; }
.ledger-proof { justify-self: end; }
@media (max-width: 700px) {
  .ledger-row { grid-template-columns: 1fr auto; }
  .ledger-proof { justify-self: start; }
}

/* My dock: tools as a macOS-style dock */
.dock {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 0.55rem;
  padding: 0.8rem 1rem 0.7rem; border-radius: 22px;
  background: rgba(240, 238, 245, 0.75); border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 30px -12px rgba(20,10,40,0.25), inset 0 1px 0 rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
}
.dock-app { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 64px; cursor: default; }
.dock-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--app); color: #fff;
  display: grid; place-items: center; font: 800 0.95rem/1 var(--font-body); letter-spacing: -0.02em;
  box-shadow: 0 4px 10px -3px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom center;
}
.dock-app:hover .dock-icon { transform: scale(1.28) translateY(-6px); }
.dock-name { font-size: 0.58rem; font-weight: 700; color: #555; text-align: center; line-height: 1.15; }
.dock-app[style*="#ffd02f"] .dock-icon { color: #222; }

/* Phones: keep the tile overlay compact */
@media (max-width: 700px) {
  .spend-chip { right: 0.4rem; top: 0.4rem; left: 0.4rem; }
  .spend-chip strong { font-size: 0.72rem; padding: 0.22rem 0.45rem; }
  .spend-chip span { display: none; }
  .tile-proof { top: auto; bottom: 2.1rem; right: 50%; transform: translateX(50%); font-size: 0.5rem; padding: 0.25rem 0.45rem; }
  .sound-badge { font-size: 0; padding: 0.3rem 0.45rem; }
  .sound-badge::first-letter { font-size: 0.8rem; }
  .top-tag { font-size: 0.5rem; padding: 0.22rem 0.45rem; }
  .dock-app { width: 54px; }
  .dock-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 0.8rem; }
}
.spend-chip strong { white-space: nowrap; }

/* ===== Divider swap (DOM, same on every screen) ===== */
.folder .sheet { transform-origin: 50% 0%; }
/* pages switch instantly and stay opaque; the divider itself does the moving */
.folder .sheet, .folder .divider.is-active .sheet {
  transform: none; transition: none;
}
.folder .divider.leaving .sheet { opacity: 1; visibility: visible; }
.folder .divider.leaving { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .divider { transform: none !important; } }

/* Home: never squash the stats box. Flex children keep their natural height and
   the panel scrolls (or tightens) instead of clipping the second stats row. */
.home-about { justify-content: safe center; }
.home-about > * { flex-shrink: 0; }
@media (max-height: 860px) and (min-width: 901px) {
  .home-about { gap: 0.9rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .home-title { font-size: clamp(3rem, 5.8vw, 5.2rem); }
  .home-stat { padding: 0.6rem 1rem; }
  .home-stat-num { font-size: 1.5rem; }
}

/* Dock: every icon on the same line, two-line names hang below */
.dock { align-items: flex-start; }
.dock-name { min-height: 2.3em; }

/* Digging scene: a canvas over the folder only while dividers fall */
.dig-canvas { position: fixed; inset: 0; z-index: 50; pointer-events: none; visibility: hidden; opacity: 0;
  transition: opacity 0.16s ease, visibility 0s linear 0.16s; }
.dig-canvas.on { visibility: visible; opacity: 1; transition: opacity 0.1s ease; }
.folder.digging .divider { visibility: hidden; }
.folder.digging .divider * { visibility: hidden !important; }

/* Display type: Barlow Condensed, the personal brand face. Anton came in one
   heavy weight only, so every display element sets its weight here. */
:root { --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; }
.nav-logo, .slide-title, .home-title, .home-stat-num, .case-name, .cs-num, .brand-name,
.brand-metrics .bm-num, .ap-num, .contact-title, .folder-logo, .ledger-num, .ledger-spend,
.ledger-best strong, .spend-chip strong { font-weight: 800; letter-spacing: -0.005em; }
.folder-logo { letter-spacing: 0.06em; }
.ledger-num { line-height: 1; margin-bottom: 0.5rem; }