/* ============================================================
   AmanUllah Faisal — Portfolio
   Hand-written HTML/CSS/JS (rebuilt from Framer export)
   ============================================================ */

/* ---------- reset & tokens ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  cursor: url("assets/icons/cursor.png") 4 4, auto !important;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
  cursor: url("assets/icons/cursor.png") 4 4, auto;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  opacity: 1;
  visibility: visible;
  transition: opacity .8s cubic-bezier(0.4, 0, 0.2, 1), visibility .8s cubic-bezier(0.4, 0, 0.2, 1);
}
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-lottie {
  width: 300px;
  height: 300px;
  opacity: 1;
  transform: scale(1);
  transition: opacity .45s ease, transform .45s ease;
}
.preloader.is-lottie-hidden .preloader-lottie {
  opacity: 0;
  transform: scale(1.08);
}
body.is-loading { overflow: hidden; }

/* ---------- Figma-style cursor presence tag ---------- */
.cursor-tag {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--text-mut);
  color: #ffffff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  white-space: pre-line;
  width: max-content;
  max-width: 320px;
  line-height: 1.4;
  border-radius: 4px 12px 12px 12px;
  pointer-events: none;
  transform: translate(18px, 22px);
  box-shadow: 0px 2px 6px rgba(0,0,0,0.25);
}
.cursor-tag.flip-x {
  border-radius: 12px 4px 12px 12px;
  transform: translate(calc(-100% - 18px), 22px);
}
.cursor-tag.flip-y {
  transform: translate(18px, calc(-100% - 12px));
}
.cursor-tag.flip-x.flip-y {
  border-radius: 12px 12px 12px 4px;
  transform: translate(calc(-100% - 18px), calc(-100% - 12px));
}
.cursor-tag.visible { display: inline-flex; }

body {
  background-color: #1a1a1a;
}

/* Fixed background image — pinned to the viewport; page content scrolls over it. */
.bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.bg-fixed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:root[data-theme="light"] .bg-fixed img { opacity: 0.8; }

:root {
  --bg: #1a1a1a;
  --panel: #303030;
  --panel-2: #4f4646;
  --card: #ffffff;
  --text: #ffffff;
  --text-mut: #808080;
  --text-dim: #595959;
  --border: rgba(255,255,255,0.08);
  --accent-red: #da1313;
  --accent-green: #4ade80;
  --radius-lg: 17px;
  --radius-md: 13px;
  --radius-sm: 7px;
  --radius-pill: 999px;
  --overlay-mix: 255,255,255;
  --overlay-op: 0.06;
  --scrim: rgba(0,0,0,0.55);
  --cta-bg: var(--panel);
  --cta-bg-hover: #5E5E5E;
  --cta-text: #ffffff;
}

/* ---------- light theme ---------- */
:root[data-theme="light"] {
  --bg: #f4f4f2;
  --panel: #ffffff;
  --panel-2: #ececea;
  --card: #ffffff;
  --text: #1a1a1a;
  --text-mut: #6b6b6b;
  --text-dim: #8a8a8a;
  --border: rgba(0,0,0,0.08);
  --overlay-mix: 0,0,0;
  --overlay-op: 0.045;
  --scrim: rgba(255,255,255,0.7);
  --cta-bg: #1a1a1a;
  --cta-bg-hover: #333333;
  --cta-text: #ffffff;
}
:root[data-theme="light"] body { background-color: var(--bg); color: var(--text); }
:root[data-theme="light"] .preloader { background: var(--bg); }
:root[data-theme="light"] .preloader-lottie { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="light"] .top-nav {
  background: rgba(255,255,255,0.75);
  box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.12);
}
:root[data-theme="light"] .mobile-nav-toggle {
  background: #ffffff;
  box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.12);
}
:root[data-theme="light"] .mobile-nav-menu {
  background: #ffffff;
  box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.12);
}
:root[data-theme="light"] .mobile-nav-menu a.active { background: rgba(0,0,0,0.06); }

:root[data-theme="light"] .heart-count { background: var(--text); color: var(--bg); }
:root[data-theme="light"] .scribble,
:root[data-theme="light"] .project-line,
:root[data-theme="light"] .live-title { color: var(--text); }
:root[data-theme="light"] .scribble { opacity: 0.25; }
:root[data-theme="light"] .project-meta { color: var(--text-mut); }
:root[data-theme="light"] .project-image,
:root[data-theme="light"] .about-photo,
:root[data-theme="light"] .cs-hero-image { background: #e4e4e2; }
:root[data-theme="light"] .live-hero { background: #e4e4e2; }
:root[data-theme="light"] .about-content strong { color: #1a1a1a; }
:root[data-theme="light"] .cs-emph { color: rgba(0,0,0,0.65); }
:root[data-theme="light"] .cs-note-label,
:root[data-theme="light"] .cs-disclaimer-label { color: rgba(0,0,0,0.75); }
:root[data-theme="light"] .cs-tabs-strip,
:root[data-theme="light"] .cs-flow-tabs,
:root[data-theme="light"] .cs-carousel-slide,
:root[data-theme="light"] .cs-process-icon,
:root[data-theme="light"] .cs-callout,
:root[data-theme="light"] .cs-disclaimer { background: rgba(0,0,0,0.04); }
:root[data-theme="light"] .cs-process-icon { color: rgba(0,0,0,0.55); }


:root[data-theme="light"] .cs-tab.is-active,
:root[data-theme="light"] .cs-flow-tab.is-active { background: rgba(0,0,0,0.08); }
:root[data-theme="light"] .cs-carousel-slide { border-color: rgba(0,0,0,0.15); }

:root[data-theme="light"] .cs-lightbox { background: rgba(244,244,242,0.92); }
:root[data-theme="light"] .cs-lightbox-close { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.06); color: #1a1a1a; }

:root[data-theme="light"] .cs-pair-arrow::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 20' fill='none' stroke='rgba(0,0,0,0.6)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 10h48'/><path d='m44 4 8 6-8 6'/></svg>") center / contain no-repeat;
}
:root[data-theme="light"] .social-btn img { filter: invert(1); }

/* ---------- theme toggle button ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 51px;
  height: 51px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0px 2.76px 6px -0.92px rgba(0,0,0,0.25);
  transition: background-color .18s, transform .12s;
}

.theme-toggle:active { transform: scale(0.92); }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
.top-nav-toggle-wrap {
  position: fixed;
  top: 28px;
  right: 24px;
  z-index: 100;
}
.theme-toggle--mobile { display: none; }
@media (max-width: 768px) {
  .top-nav-toggle-wrap { display: none; }
  .theme-toggle--mobile {
    display: inline-flex;
    position: fixed;
    top: 12px;
    right: 60px;
    width: 40px;
    height: 40px;
    background: #303030;
    transition: opacity .25s ease, background-color .18s;
  }
  :root[data-theme="light"] .theme-toggle--mobile {
    background: #ffffff;
    box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.12);
  }
}

/* ---------- decorative scribbles ---------- */
.scribble {
  position: absolute;
  color: #ffffff;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.scribble-left {
  top: 135px;
  left: -20px;
  width: 305px;
}
.scribble-right {
  top: 410px;
  right: -70px;
  width: 275px;
}

/* ---------- top pill nav ---------- */
.top-nav {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(48,48,48,0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 40px;
  box-shadow: 0px 3px 6px -1px rgba(0,0,0,0.25);
  padding: 12px 30px;
  transition: opacity .35s ease;
}
.top-nav.nav-hidden {
  opacity: 0;
  pointer-events: none;
}
.top-nav ul {
  display: flex;
  gap: 45px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}
.top-nav .nav-link {
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  transition: opacity .18s;
  white-space: nowrap;
}

.top-nav .nav-link.active { opacity: 1; }
.top-nav .nav-logo a {
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-mut);
  white-space: nowrap;
  display: inline-block;
}

/* ---------- contact buttons (top-right) ---------- */
.contact-fab-row {
  position: fixed;
  bottom: 32px;
  right: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Merged contact button: a single toggle opens an upward popup menu,
   styled the same way as the mobile-nav hamburger menu. */
.contact-fab {
  position: relative;
}
.contact-fab-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0px 2.76px 6px -0.92px rgba(0,0,0,0.25);
  transition: background-color .18s, transform .12s;
}

.contact-fab-toggle:active { transform: scale(0.9); }
.contact-fab-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 168px;
  background: #303030;
  border-radius: var(--radius-lg);
  padding: 6px;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.contact-fab.is-open .contact-fab-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.contact-fab-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  text-align: left;
  transition: background-color .18s;
  white-space: nowrap;
}


:root[data-theme="light"] .contact-fab-menu {
  background: #ffffff;
  box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.12);
}
#copy-email-btn svg,
#whatsapp-btn svg { width: 18px; height: 18px; }
@media (max-width: 768px) {
  .contact-fab-menu-item { font-size: 17px; }
  #copy-email-btn svg,
  #whatsapp-btn svg { width: 20px; height: 20px; }
}
.heart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0px 2.76px 6px -0.92px rgba(0,0,0,0.25);
  transition: background-color .18s, transform .12s;
}

.heart-btn:active { transform: scale(0.9); }
.heart-btn.liked { color: var(--accent-red); }
.heart-btn.liked svg { fill: var(--accent-red); }
.heart-count {
  position: absolute;
  bottom: -8px;
  right: -10px;
  min-width: 32px;
  padding: 3px 8px;
  border-radius: 10px;
  background: #000000;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.heart-count.is-ready {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
/* ---------- generic buttons ---------- */
[hidden] { display: none !important; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: none;
  cursor: url("assets/icons/cursor.png") 4 4, auto;
  transition: transform .18s, opacity .18s;
  white-space: nowrap;
}

.btn-secondary {
  background: var(--cta-bg);
  color: var(--cta-text);
  transition: background-color .18s;
}
.btn-secondary img { filter: invert(1); }

.btn-dark {
  background: var(--cta-bg);
  color: var(--cta-text);
  transition: transform .18s, opacity .18s, background-color .18s;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: 190px 24px 100px;
  max-width: 720px;
  margin: 0 auto;
}
.avatar {
  width: 139px;
  height: 139px;
  margin: 12px auto 24px;
  border-radius: 50%;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-eyebrow {
  margin: 12px 0 0;
  font-size: 37px;
  color: var(--text-dim);
  font-weight: 400;
  opacity: 0.92;
}
.hero-title {
  margin: 0 0 16px;
  font-size: clamp(38px, 6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.8px;
  line-height: 1.05;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#typewriter {
  display: inline-block;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hero-tagline {
  margin: 0 auto 24px;
  max-width: 620px;
  font-size: 19px;
  letter-spacing: -0.19px;
  color: var(--text-mut);
  line-height: 1.4;
}

/* ---------- generic section ---------- */
.section {
  padding: 100px 24px;
  max-width: 1020px;
  margin: 0 auto;
  position: relative;
}
.section-title {
  text-align: center;
  font-size: clamp(28px, 4vw, 43px);
  font-weight: 500;
  margin: 0 0 40px;
}
.section-cta {
  text-align: center;
  margin-top: 24px;
}

/* ---------- PORTFOLIO grid ---------- */
.project-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
}
.project-card {
  position: relative;
  min-width: 0;
}
.project-card--featured { grid-column: 1 / -1; }
/* Row 3 wrapper: spans the full grid width but uses its own REVERSED
   column proportions (0.85fr / 1.15fr) so the narrow slot sits on the
   left and the wide slot on the right — opposite of every other row,
   which always puts 1.15fr on the left via the shared .project-grid. */
.project-row3 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
}
.project-row3--single {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}
.project-image {
  position: relative;
  aspect-ratio: 387 / 290;
  overflow: hidden;
  background: #0f0f16;
  border-radius: var(--radius-lg);
}
.project-card--cpn .project-image {
  aspect-ratio: 387 / 392;
}
/* Row 3, second slot: column is 0.85fr vs Defuser AI's 1.15fr (ratio 17/23),
   so to render at the SAME absolute height as Defuser AI's 387:290 image,
   this narrower column needs a taller ratio: (17/23) * (387/290) ≈ 0.9864. */
.project-card--row3-slot2 .project-image {
  aspect-ratio: 6579 / 6670;
}
.project-card--featured .project-image {
  aspect-ratio: 920 / 473.33;
}
.project-image > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-card--featured .project-image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.05) 55%, transparent 75%);
  pointer-events: none;
}
.project-card--featured .project-image { perspective: 1400px; }
.project-image-ui--mobile { display: none; }
.project-image-ui {
  position: absolute;
  z-index: 3;
  bottom: -140px;
  left: 50%;
  width: 120%;
  height: 120%;
  object-fit: contain;
  transform: translateX(-50%) translateY(var(--parallax-y, 0px)) translateY(var(--intro-slide-y, 0px)) scale(var(--reveal-scale, 1)) rotateX(var(--reveal-rot, 0deg));
  transform-origin: 50% 70%;
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.12));
  transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.9s ease;
}
[data-lottie-intro]:not(.is-loaded) .project-image-ui {
  opacity: 0;
  --reveal-scale: 0.88;
  --reveal-rot: 10deg;
  filter: blur(14px) drop-shadow(0 10px 24px rgba(0,0,0,0.12));
}
.project-image-ui--pv {
  bottom: -47%;
  width: 159.05%;
  height: 159.05%;
  max-width: none;
  max-height: none;
}
/* Soft aurora-style glow behind the PureVPN UI image — two independently
   drifting blobs (not one shared transform) so it reads as alive, not
   just a single shape nudging back and forth. */
.project-image:has(.project-image-ui--pv)::before,
.project-image:has(.project-image-ui--pv)::after {
  content: '';
  position: absolute;
  z-index: 2;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  filter: blur(44px);
  pointer-events: none;
  will-change: transform;
}
.project-image:has(.project-image-ui--pv)::before {
  left: 8%;
  top: 45%;
  background: radial-gradient(closest-side, rgba(80,140,255,0.78), transparent 70%);
  animation: aurora-drift-a 7s ease-in-out infinite alternate;
}
.project-image:has(.project-image-ui--pv)::after {
  right: 8%;
  top: 15%;
  background: radial-gradient(closest-side, rgba(190,220,90,0.68), transparent 70%);
  animation: aurora-drift-b 8.5s ease-in-out infinite alternate;
}
@keyframes aurora-drift-a {
  0%   { transform: translate(-10%, -10%) scale(0.9); opacity: 0.7; }
  25%  { transform: translate(35%, 15%) scale(1.3); opacity: 1; }
  50%  { transform: translate(10%, 45%) scale(0.95); opacity: 0.85; }
  75%  { transform: translate(-35%, 10%) scale(1.15); opacity: 1; }
  100% { transform: translate(-15%, -30%) scale(0.85); opacity: 0.7; }
}
@keyframes aurora-drift-b {
  0%   { transform: translate(15%, 10%) scale(1); opacity: 0.7; }
  25%  { transform: translate(-30%, 30%) scale(0.8); opacity: 1; }
  50%  { transform: translate(-10%, -35%) scale(1.25); opacity: 0.85; }
  75%  { transform: translate(30%, -15%) scale(0.9); opacity: 1; }
  100% { transform: translate(20%, 25%) scale(1.1); opacity: 0.75; }
}

.project-lottie-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 440px;
  height: 300px;
  max-width: 60%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.7s ease;
}
.project-lottie-frame > .project-lottie {
  width: 100%;
  height: auto;
  aspect-ratio: 393 / 466;
  flex-shrink: 0;
}
[data-lottie-intro].is-loaded .project-lottie-frame {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.02);
}
/* The anchor holds the static page position (never touched by JS); the frame inside it
   is the whole visible mockup (phone shape + video, moving as one rigid object) and is
   the only thing the zoom timeline animates — so a pan/zoom never drags the anchor. */
.project-video-anchor {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 50%;
  width: auto;
  height: 95%;
  aspect-ratio: 876 / 1766;
  transform: translateX(-50%);
  cursor: zoom-in;
}
.project-video-frame {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.55));
  border-radius: 24px 24px 24px 24px;
  clip-path: inset(1px 3px 1px 3px round 24px 24px 24px 24px);
  overflow: hidden;
  will-change: transform;
}
.project-image-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- before/after compare frame (Defuser AI) — a movable sub-box, not the whole card ---------- */
.compare-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 8px;
  z-index: 1;
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
  transform: scale(1.4) translate(19%, 20%);
}
.compare-before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  z-index: 1;
}
.compare-after-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(0 100% 0 0);
}
.compare-frame.playing .compare-after-wrap {
  animation: compareClip 10s ease-in-out infinite;
}
@keyframes compareClip {
  0% { clip-path: inset(0 100% 0 0); }
  50% { clip-path: inset(0 0% 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}
.compare-after-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0%;
  width: 2px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
  z-index: 3;
  transform: translateX(-1px);
}
.compare-frame.playing .compare-divider {
  animation: compareDivider 10s ease-in-out infinite;
}
@keyframes compareDivider {
  0% { left: 0%; }
  50% { left: 100%; }
  100% { left: 0%; }
}
.compare-frame.paused .compare-after-wrap,
.compare-frame.paused .compare-divider {
  animation-play-state: paused;
}
.compare-frame { cursor: zoom-in; }

/* ---------- before/after full-view lightbox (Defuser AI) ---------- */
.lightbox-compare-frame {
  position: relative;
  width: min(90vw, 1000px);
  aspect-ratio: 2000 / 1441;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transform: scale(0.92);
  transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}
.cs-lightbox.open .lightbox-compare-frame { transform: scale(1); }
.lightbox-compare-frame { cursor: ew-resize; touch-action: none; user-select: none; }
.lightbox-compare-frame img { -webkit-user-drag: none; }
.lightbox-compare-frame .compare-divider { width: 3px; }
.lightbox-compare-frame .compare-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.lightbox-compare-frame .compare-divider::before {
  content: '\2194';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 18px;
  color: #0a0a0e;
  line-height: 1;
}

/* ---------- video full-view lightbox (CPN) ---------- */
.lightbox-video {
  width: auto;
  height: min(85vh, 760px);
  aspect-ratio: 876 / 1766;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transform: scale(0.92);
  transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}
.cs-lightbox.open .lightbox-video { transform: scale(1); }

/* ---------- play/pause toggle button (Defuser AI + CPN) ---------- */
.media-toggle-btn {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #ffffff;
  backdrop-filter: blur(4px);
  transition: background-color .18s;
}


/* Always-visible "View Full Story" pill on the PureVPN project card. */
.pv-story-btn {
  position: absolute;
  z-index: 6;
  bottom: 12px;
  left: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color .18s;
}

.pv-story-btn--static { cursor: default; }


/* Invisible full-frame link so the whole PureVPN card is clickable. */
.pv-story-link {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
}
/* Hover-reveal "View Full Story" pill over the project image — frosted
   glass, hidden until the card is hovered/focused. The wrapper itself
   never intercepts clicks (pointer-events: none); only the pill link does,
   and only once it's actually visible. */
.project-image-cta {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0,0,0,0);
  transition: background-color 0.3s ease;
}
.project-image:hover .project-image-cta,
.project-image:focus-within .project-image-cta {
  background: rgba(0,0,0,0.28);
}
.project-image-cta-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(20,20,26,0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0.5px solid rgba(255,255,255,0.16);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.project-image:hover .project-image-cta-link,
.project-image:focus-within .project-image-cta-link {
  opacity: 1;
  pointer-events: auto;
}
.project-body { padding: 24px 0 25.5px; }
.project-meta {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 300;
  color: #808080;
}
.project-line {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.42px;
  line-height: 1.2;
  color: #ffffff;
}
.project-body .btn { padding: 10px 16px; }
.project-badge {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  background: var(--accent-red);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 10px;
  border-radius: 7px;
}

/* ---------- LIVE PRODUCT ---------- */
.live-product { text-align: center; }
.live-hero {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto 32px;
  max-width: 100%;
  aspect-ratio: 922 / 554;
  background: #000;
}
.live-hero:fullscreen {
  aspect-ratio: auto;
  border-radius: 0;
}
.live-hero:fullscreen > video { object-fit: contain; }
.live-hero > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hadya-corner-toggle { display: none; }
.hadya-controls {
  position: absolute;
  z-index: 5;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 30px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.live-hero.show-controls .hadya-controls,
.live-hero.is-paused .hadya-controls {
  opacity: 1;
  pointer-events: auto;
}
.hadya-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  transition: background .15s ease, transform .15s ease;
}

.hadya-progress {
  /* Taller than the visible track so the thumb has a forgiving hit area —
     the thin track/fill/thumb are all centered inside via top:50%. */
  position: relative;
  flex: 1;
  height: 20px;
  cursor: pointer;
  touch-action: none;
}
.hadya-progress::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: rgba(255,255,255,0.25);
  pointer-events: none;
}
.hadya-progress-fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: #ffffff;
  pointer-events: none;
}
.hadya-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: width .15s ease, height .15s ease;
}
.hadya-progress.is-scrubbing .hadya-progress-thumb {
  width: 15px;
  height: 15px;
}
.hadya-time {
  flex: none;
  font-size: 12px;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.hadya-fullscreen-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  transition: background .15s ease, transform .15s ease;
}
.active-users {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--panel-2);
  border-radius: 30px;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 20px;
}
.active-dot {
  display: inline-block;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  50% { opacity: 0.4; }
}
.live-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.42px;
  line-height: 1.2;
  color: #ffffff;
}
.live-desc {
  margin: 0 auto 24px;
  max-width: 589px;
  font-size: 16px;
  letter-spacing: -0.17px;
  color: var(--text-mut);
  line-height: 1.4;
}

/* ---------- ABOUT ---------- */
.about {
  display: grid;
  grid-template-columns: 332px 1fr;
  gap: 48px;
  align-items: center;
}
.about-photo {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #0f0f16;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-title { text-align: left; margin-bottom: 16px; font-size: 43px; font-weight: 500; }
.about-content p {
  margin: 0 0 12px;
  font-size: 17px;
  letter-spacing: -0.17px;
  color: var(--text-mut);
  line-height: 1.4;
}
.about-content strong { color: #c9c9c9; font-weight: 500; }
.social-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  background: var(--panel);
  border-radius: 5px;
  border: none;
  height: 34px;
  transition: background-color .18s;
}

.social-btn svg { width: 22px; height: 22px; }

/* ---------- FOOTER ---------- */
.footer {
  margin-top: 60px;
  padding: 28px 24px 92px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  font-size: 18px;
  color: var(--text);
}
.footer-left, .footer-right {
  display: flex;
  gap: 20px;
  align-items: center;
}
.footer-right { justify-content: flex-end; }
.footer-left a, .footer-right a {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .18s;
}

.footer-center {
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.44px;
  color: var(--text-mut);
}

/* ---------- mobile brand avatar (sticky top-left, mirrors the nav toggle) ---------- */
.mobile-brand {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  transition: opacity .25s ease;
}
.mobile-brand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mobile-brand.nav-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ---------- mobile nav (sticky top, collapsed into a single toggle icon) ---------- */
.mobile-nav {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100;
  transition: opacity .25s ease;
}
.mobile-nav.nav-hidden {
  opacity: 0;
  pointer-events: none;
}
.mobile-nav-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: #303030;
  border-radius: 50%;
  color: var(--text);
  box-shadow: 0px 2.76px 6px -0.92px rgba(0,0,0,0.25);
}
.mobile-nav-toggle .icon-close { display: none; }
.mobile-nav.is-open .mobile-nav-toggle .icon-menu { display: none; }
.mobile-nav.is-open .mobile-nav-toggle .icon-close { display: block; }
.mobile-nav-menu {
  position: fixed;
  top: calc(12px + 40px + 8px);
  left: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #303030;
  border-radius: var(--radius-lg);
  padding: 6px;
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.mobile-nav.is-open .mobile-nav-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.mobile-nav-menu a {
  padding: 10px 12px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-mut);
  border-radius: var(--radius-md);
  transition: color .18s, background-color .18s;
  white-space: nowrap;
}
.mobile-nav-menu a.active {
  color: var(--text);
  background: rgba(255,255,255,0.1);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .about {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .about-photo {
    max-width: 300px;
    margin: 0 auto;
  }
  .about-title { text-align: center; margin-bottom: 28px; }
  .about-content p { margin-bottom: 20px; line-height: 1.6; }
  .about-content { max-width: 92%; margin: 0 auto; }
  .social-buttons { justify-content: center; margin-top: 36px; margin-bottom: 48px; }
  .social-btn-label { display: none; }
  .social-btn { width: 34px; padding: 6px; justify-content: center; }
}

@media (max-width: 768px) {
  /* hide desktop-only chrome */
  .top-nav, .footer, .cursor-tag, .cursor-tag.visible { display: none; }
  .mobile-nav { display: block; }
  .mobile-brand { display: block; }
  .hero .avatar { display: none; }

  /* nudge the floating contact buttons down a bit; percentage so it scales
     with viewport height instead of sitting at the same fixed px on every
     phone regardless of screen size. */
  /* gap between theme-toggle and hamburger in .mobile-nav is 8px (60px vs
     12px right-offset, both 40px wide) — match that here too. */
  .contact-fab-row { bottom: 3%; gap: 8px; }

  /* Defuser AI before/after: sits on a static centered split until the user
     taps play (no auto-sweep on mobile — see script.js compareSlider). */
  .compare-frame:not(.playing) .compare-divider { left: 50%; }
  .compare-frame:not(.playing) .compare-after-wrap { clip-path: inset(0 50% 0 0); }

  /* Hadya video: drop the desktop scrub-bar control system for a plain
     corner play icon, same as the Defuser AI / CPN cards. */
  .hadya-controls { display: none; }
  .hadya-corner-toggle { display: inline-flex; }

  /* match the heart/contact icon buttons to the same 40px size (and ~16px
     glyphs) as the mobile nav's theme-toggle and hamburger buttons. */
  .heart-btn,
  .contact-fab-toggle {
    width: 40px;
    height: 40px;
  }
  .heart-btn svg,
  .contact-fab-toggle svg {
    width: 16px;
    height: 16px;
  }

  .hero { padding: 130px 20px 60px; }
  .section { padding: 60px 20px; }
  .section-title { margin-bottom: 32px; }

  .project-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .project-row3 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* keep every project image the same height on mobile, including the featured one */
  .project-card--featured .project-image { aspect-ratio: 387 / 290; }
  /* on a single mobile column, the row3-slot2 ratio (tuned for the narrow
     desktop column) no longer applies — fall back to the normal ratio */
  .project-card--row3-slot2 .project-image { aspect-ratio: 387 / 290; }

  /* no intro animation on mobile at all — script.js removes the lottie
     frame and its replay button from the DOM, this is just a synchronous
     safety net so nothing flashes before that JS runs. */
  .project-lottie-frame,
  [data-lottie-replay] {
    display: none;
  }

  /* nudge Golootlo phones up a touch on mobile — percentage, not px, so the
     framing stays identical across every phone width instead of shifting
     (a fixed px offset is a different proportion of the container on a
     375px-wide phone vs a 430px-wide one, since the container's own height
     is locked to width via aspect-ratio) */
  .project-card--featured .project-image-ui { bottom: -65%; }

  /* mobile uses the GL-UI2 image instead of the desktop one */
  .project-image-ui--desktop { display: none; }
  .project-image-ui--mobile { display: block; width: 185%; height: 185%; max-width: none; max-height: none; }

  /* bump the PureVPN UI image up 2% on mobile only */
  .project-image-ui--pv { width: 165%; height: 165%; bottom: -52%; }

  .scribble-left, .scribble-right { display: none; }

  .live-desc br, .hero-tagline br { display: none; }

  /* open up line-height a little across the rest of the body copy on mobile */
  .hero-tagline, .live-desc { line-height: 1.6; }
  .project-line { line-height: 1.35; }

  /* bump the project card pill buttons (View Page / View Full Story) up 2px */
  .pv-story-btn { font-size: 15px; }

  /* pull "View All Projects" a bit closer to the last card on mobile */
  .section-cta { margin-top: 12px; }

  /* live product: keep the video full-bleed inside the hero on mobile */
  .live-product { padding: 40px 20px; }
}

/* ---------- case study page: hero image, then fixed TOC + scrolling content ---------- */
.cs-hero-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 160px 24px 0;
}
.cs-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--text-mut);
  transition: color .18s;
}

.cs-shell {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 24px 120px;
}
.cs-toc {
  position: sticky;
  top: 120px;
  width: 200px;
  flex-shrink: 0;
}
.cs-toc-heading {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.cs-toc nav { display: flex; flex-direction: column; gap: 14px; }
.cs-toc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-mut);
  transition: color .18s;
}

.cs-toc-link.active { color: var(--text); font-weight: 400; }
/* Links without an icon get the same left offset (icon width + gap) so every label lines up. */
.cs-toc-link:not(:has(.cs-toc-link-icon)) { padding-left: 22px; }
.cs-toc-link-icon {
  flex-shrink: 0;
  color: currentColor;
}

.cs-content { flex: 1; min-width: 0; max-width: 720px; }
.cs-eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text-mut);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cs-title {
  margin: 0 0 16px;
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 500;
  line-height: 1.15;
}
.cs-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  font-size: 14px;
  color: var(--text-mut);
}
.cs-meta-dot { opacity: 0.6; }
.cs-desc {
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-mut);
  max-width: 60ch;
}
.cs-hero-image {
  width: 100%;
  aspect-ratio: 32 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0f0f16;
}
.cs-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.cs-content section {
  padding-top: 52px;
  padding-bottom: 40px;
  border-top: 1px solid var(--border);
}
.cs-content section:first-of-type { border-top: none; padding-top: 0; }
/* Golootlo case study: intro copy sits above the TOC-anchored sections rather
   than inside its own section, so its first section needs the divider back. */
#primary-research { border-top: 1px solid var(--border); padding-top: 52px; }
.cs-content section:last-of-type { padding-bottom: 0; }
.cs-content h2 { margin: 0 0 12px; font-size: 24px; font-weight: 500; }
.cs-content section p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-mut); }
.cs-content section p + p,
.cs-content section p + ul,
.cs-content section p + ol,
.cs-content section p + h3,
.cs-content section ul + p,
.cs-content section ol + p,
.cs-content section h3 + p,
.cs-content section h3 + ol,
.cs-content section h3 + ul { margin-top: 20px; }

.cs-content section p + figure { margin-top: 40px; }
.cs-content section h3 + figure { margin-top: 28px; }
.cs-content section figure + p,
.cs-content section figure + h3 { margin-top: 48px; }

.cs-sub {
  margin: 56px 0 16px;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}
.cs-content section > .cs-sub:first-child,
.cs-content section h2 + .cs-sub { margin-top: 24px; }
.cs-content section ul + .cs-sub,
.cs-content section ol + .cs-sub,
.cs-content section p + .cs-sub { margin-top: 48px; }

.cs-bullets {
  margin: 0;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-mut);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cs-bullets--ordered { padding-left: 22px; }
.cs-emph { color: rgba(255,255,255,0.72); font-weight: 400; }
.cs-emph-strong { color: var(--text); font-weight: 600; }

.cs-view-screen {
  display: inline;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .18s;
}


.cs-nested-bullets {
  list-style: disc;
  margin: 14px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--text-mut);
  font-size: 15px;
  line-height: 1.6;
}
.cs-nested-bullets .cs-emph { display: inline; margin-right: 4px; font-weight: 500; }

.cs-note {
  margin-top: 20px !important;
  font-size: 13px !important;
  line-height: 1.55;
  color: var(--text-mut);
  opacity: 0.85;
  font-style: italic;
}
.cs-note-label { color: rgba(255,255,255,0.78); font-weight: 500; font-style: normal; margin-right: 4px; }

.cs-step { display: block; }
.cs-step-num { color: inherit; font-weight: 400; margin-right: 4px; }
.cs-content section figure + .cs-step,
.cs-content section .cs-step + .cs-step { margin-top: 56px; }
#primary-research .cs-step + .cs-step { margin-top: 32px; }

.cs-figure {
  margin: 48px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cs-figure + .cs-figure { margin-top: 56px; }
.cs-figure-frame {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-figure-frame img { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 8px; margin: 0 auto; cursor: zoom-in; object-fit: contain; }
.cs-figure-col img { cursor: zoom-in; }
.cs-figure-frame--pair { max-width: 640px; }

.cs-figure-frame img,
.cs-figure-col img { transition: transform .22s ease, box-shadow .22s ease; }


/* ---------- Tabs (Design & Prototype master + flow switcher) ---------- */
.cs-tabs { margin-top: 32px; }
.cs-tabs-strip,
.cs-flow-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  overflow-x: auto;
  scrollbar-width: none;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.cs-tabs-strip::-webkit-scrollbar,
.cs-flow-tabs::-webkit-scrollbar { display: none; }
.cs-tab,
.cs-flow-tab {
  flex: 0 0 auto;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-mut);
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, color .18s;
}

.cs-tab.is-active,
.cs-flow-tab.is-active {
  background: rgba(255,255,255,0.10);
  color: var(--text);
  font-weight: 500;
}

.cs-tab-panels { margin-top: 32px; }
.cs-tab-panel { animation: cs-fade .28s ease; }
.cs-tab-panel[hidden] { display: none; }
.cs-tab-lead {
  margin: 0 0 24px !important;
  font-size: 14px !important;
  color: var(--text-mut);
  text-align: center;
}

.cs-flow-switcher { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.cs-flow-panels { width: 100%; display: flex; justify-content: center; }
.cs-flow-panel { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: cs-fade .28s ease; }
.cs-flow-panel[hidden] { display: none; }
.cs-flow-caption {
  margin: 0;
  font-size: 14px;
  color: var(--text-mut);
  opacity: 0.75;
  text-align: center;
}

@keyframes cs-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cs-pair-arrow { position: relative; }
.cs-pair-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 20px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 20' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 10h48'/><path d='m44 4 8 6-8 6'/></svg>") center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 600px) {
  .cs-pair-arrow::before {
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
.cs-figure-placeholder {
  margin: 0;
  font-size: 14px;
  color: var(--text-mut);
  opacity: 0.7;
  text-align: center;
}
.cs-figure figcaption {
  font-size: 14px;
  color: var(--text-mut);
  opacity: 0.75;
  text-align: center;
}
.cs-figure-frame--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 12px 0;
  align-items: stretch;
  justify-items: center;
}
.cs-figure-frame--pair.cs-figure-frame--stack {
  grid-template-columns: 1fr;
  gap: 12px;
}
.cs-figure-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
}
.cs-figure-col img { width: 100%; max-width: 210px; height: auto; border-radius: 8px; display: block; margin: 0 auto; }
/* Trim a few px of white edge off these slide screenshots instead of just rounding the corners. */
#primary-research .cs-figure-col img { clip-path: inset(4px round 8px); }
.cs-figure-frame--trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 12px 0;
  align-items: stretch;
  justify-items: center;
  max-width: 720px;
}
/* Keep all three images filling the same height regardless of their own
   aspect ratio. Scales proportionally and crops overflow instead of
   stretching (object-fit: cover, not fill). */
.cs-figure-frame--trio .cs-figure-col { height: 210px; overflow: hidden; border-radius: 8px; }
.cs-figure-frame--trio .cs-figure-col img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Two-up variant: these are full mobile screenshots (tall/portrait), so keep
   their natural aspect ratio instead of cropping into a fixed-height box —
   before/after end up the same height on their own since both screenshots
   share virtually the same phone-screen proportions. */
.cs-figure-frame--pair .cs-figure-col-media { width: 100%; max-width: 260px; border-radius: 8px; overflow: hidden; }
.cs-figure-frame--pair .cs-figure-col img {
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
}
.cs-flow-stack { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.cs-flow-stack .cs-figure { flex: 1 1 240px; max-width: 320px; }
.cs-flow-stack .cs-figure-frame {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-flow-stack .cs-figure-frame img { max-height: 220px; width: auto; max-width: 100%; margin: 0 auto; }
.cs-figure-sublabel {
  margin: 0;
  font-size: 14px;
  color: var(--text-mut);
  opacity: 0.75;
  font-weight: 400;
}

.cs-quote {
  margin: 20px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--border);
}
.cs-quote p { margin: 0 0 8px; font-style: italic; }
.cs-quote cite { display: block; font-style: normal; font-size: 14px; color: var(--text-dim); }

.cs-callout {
  margin-top: 24px !important;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: 14px !important;
  line-height: 1.6;
  color: var(--text) !important;
  font-weight: 400;
}

.cs-disclaimer {
  margin-top: 24px !important;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: 14px !important;
  line-height: 1.6;
  color: var(--text-mut);
}
.cs-disclaimer-label {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  margin-right: 4px;
}

.cs-figure-frame--flow {
  display: flex;
  gap: 12px;
  padding: 16px;
  overflow-x: auto;
  align-items: stretch;
}
.cs-figure-frame--flow > * {
  flex: 0 0 auto;
  min-width: 160px;
}

@media (max-width: 600px) {
  .cs-figure-frame--pair { grid-template-columns: 1fr; }
}

.cs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(10, 10, 14, 0.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.cs-lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .28s ease, visibility 0s;
}
.cs-lightbox-img {
  max-width: min(100%, 1400px);
  max-height: calc(100vh - 80px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: zoom-out;
  transform: scale(0.92);
  transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}
.cs-lightbox.open .cs-lightbox-img { transform: scale(1); }
.cs-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, transform .18s;
}

body.cs-lightbox-open { overflow: hidden; }
body.cs-lightbox-open .cursor-tag { display: none !important; }

/* Behind-the-scenes carousel: native scroll-snap, no library needed. */
.cs-carousel {
  position: relative;
  margin-top: 8px;
}
.cs-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.cs-carousel-slide {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: min(320px, 80vw);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 16px;
}
.cs-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-carousel-nav {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.cs-carousel-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s;
}


.cs-process-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.cs-process-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  cursor: default;
  padding: 0 4px;
  min-width: 0;
}
.cs-process-list li:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 13px;
  right: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.cs-process-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: background .18s, color .18s, transform .18s;
}

.cs-process-title {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .cs-hero-wrap { padding: 160px 20px 0; }
  .cs-shell { flex-direction: column; gap: 40px; padding: 40px 20px 80px; align-items: stretch; }
  .cs-toc { position: static; width: 100%; }
  .cs-toc nav { flex-direction: row; flex-wrap: wrap; gap: 16px 24px; }
  .cs-content { width: 100%; max-width: 100%; }
}

@media (max-width: 768px) {
  .cs-hero-wrap { padding-top: 40px; }
  .cs-toc { display: none; }
}

@media (max-width: 640px) {
  .cs-title { font-size: 22px; }
  .cs-desc { font-size: 15px; }

  /* Hide the hero on mobile — it's decorative and eats space. */
  .cs-hero-image { display: none; }
  .cs-hero-wrap { padding-bottom: 8px; }

  /* Design Process: shrink pills so all 5 fit; allow labels to wrap */
  .cs-process-list { gap: 0; }
  .cs-process-list li { padding: 0 2px; gap: 6px; }
  .cs-process-icon { width: 22px; height: 22px; border-radius: 6px; }
  .cs-process-icon svg { width: 12px; height: 12px; }
  .cs-process-list li:not(:first-child)::before {
    top: 11px;
    right: calc(50% + 14px);
    width: calc(100% - 28px);
  }
  .cs-process-title { font-size: 10px; white-space: normal; line-height: 1.2; }

  /* Tabs already scroll horizontally — tighten them a bit */
  .cs-tab, .cs-flow-tab { padding: 7px 14px; font-size: 13px; }

  /* Section spacing */
  .cs-content h2 { font-size: 22px; }
  .cs-sub { font-size: 15px; margin: 40px 0 12px; }
  .cs-content section { padding-top: 40px; padding-bottom: 32px; }
  .cs-content section p { font-size: 15px; }
  .cs-bullets { font-size: 15px; padding-left: 18px; gap: 18px; }
  .cs-nested-bullets { font-size: 14px; padding-left: 20px; gap: 12px; }

  /* Paired mockups stack instead of side-by-side */
  .cs-figure-frame--pair { grid-template-columns: 1fr; gap: 56px; }
  .cs-figure-frame--pair.cs-figure-frame--stack { gap: 12px; }
  .cs-figure-col img { max-width: 240px; }
  .cs-pair-arrow::before {
    width: 36px;
    height: 16px;
    transform: translate(-50%, -50%) rotate(90deg);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 20' fill='none' stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 10h48'/><path d='m44 4 8 6-8 6'/></svg>") center / contain no-repeat;
  }

  /* Lightbox padding tighter on mobile */
  .cs-lightbox { padding: 20px; }
  .cs-lightbox-close { top: 10px; right: 10px; }
}

/* ---------- interactive phone-scroll prototype ---------- */
.phone-mock {
  position: relative;
  width: 280px;
  margin: 32px auto 0;
  aspect-ratio: 453 / 912;
}
.phone-mock-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.phone-mock-scroll {
  position: absolute;
  left: 6.4%;
  right: 6.85%;
  top: 4.17%;
  bottom: 4.39%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 34px / 44px;
  z-index: 1;
  scrollbar-width: none;
}
.phone-mock-scroll::-webkit-scrollbar { display: none; }
.phone-mock-scroll img { display: block; width: 100%; height: auto; }
.phone-mock-navbar {
  position: absolute;
  left: 6.4%;
  right: 6.85%;
  top: 77.15%;
  height: 15.45%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}
.phone-mock-navbar img {
  position: absolute;
  top: -472.2%;
  left: 0;
  width: 100%;
  height: auto;
}

/* ---------- hover-only affordances ----------
   Gated to devices with a real pointer so a tap on a touchscreen can't
   get "stuck" in the hover state (mobile browsers apply :hover on tap
   and only clear it once something else is tapped, since there's no
   mouse-leave event to tell them the interaction ended). ---------- */
@media (hover: hover) and (pointer: fine) {
:root[data-theme="light"] .mobile-nav-menu a:hover { background: rgba(0,0,0,0.06); }
:root[data-theme="light"] .social-btn:hover,
:root[data-theme="light"] .heart-btn:hover,
:root[data-theme="light"] .contact-fab-toggle:hover { background: #dcdcda; }
:root[data-theme="light"] .cs-process-list li:hover .cs-process-icon { background: rgba(0,0,0,0.08); color: #000; }
:root[data-theme="light"] .cs-tab:hover,
:root[data-theme="light"] .cs-flow-tab:hover { background: rgba(0,0,0,0.05); }
:root[data-theme="light"] .cs-view-screen:hover { color: #000; }
:root[data-theme="light"] .cs-lightbox-close:hover { background: rgba(0,0,0,0.12); }
.theme-toggle:hover { opacity: 0.85; }
.top-nav .nav-link:hover { opacity: 0.7; }
.contact-fab-toggle:hover { background: #5E5E5E; }
.contact-fab-menu-item:hover { background: rgba(255,255,255,0.1); }
:root[data-theme="light"] .contact-fab-menu-item:hover { background: rgba(0,0,0,0.06); }
.heart-btn:hover { background: #5E5E5E; }
.btn:hover { opacity: 0.92; }
.btn-secondary:hover {
  background: var(--cta-bg-hover);
  opacity: 1;
}
.btn-dark:hover {
  background: var(--cta-bg-hover);
  opacity: 1;
}
.media-toggle-btn:hover { background: rgba(0,0,0,0.75); }
.pv-story-btn:hover { background: rgba(0,0,0,0.75); }
.pv-story-btn--static:hover { background: rgba(0,0,0,0.55); }
.hadya-toggle:hover,
.hadya-fullscreen-toggle:hover {
  background: rgba(255,255,255,0.18);
  transform: scale(1.1);
}
.hadya-progress:hover .hadya-progress-thumb {
  width: 15px;
  height: 15px;
}
.social-btn:hover { background: #5E5E5E; }
.footer-left a:hover, .footer-right a:hover { opacity: 0.75; }
.mobile-nav-menu a:hover {
  color: var(--text);
  background: rgba(255,255,255,0.1);
}
.cs-back-btn:hover { color: var(--text); }
.cs-toc-link:hover { color: var(--text); }
.cs-view-screen:hover { color: #fff; }
.cs-figure-frame img:hover,
.cs-figure-col img:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.cs-tab:hover,
.cs-flow-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.cs-lightbox-close:hover { background: rgba(255,255,255,0.14); transform: scale(1.05); }
.cs-carousel-btn:hover { background: rgba(255,255,255,0.14); }
.cs-process-list li:hover .cs-process-icon {
  background: rgba(255,255,255,0.14);
  color: #fff;
  transform: translateY(-1px);
}
}