/* ============= TOKENS ============= */
/* Lenis smooth-scroll required styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
:root {
  --ink: #3D3D3D;
  --ink-2: #515151;
  --ink-3: #9E9E9E;
  --bg: #FFFFFF;
  --surface: #F9FCFF;
  --hair: #EBEBEB;
  --hair-2: #E9E9E9;
  --highlight: #E9FC6E;
  --grid-line: #EFEFEF;
  --nav-bg: rgba(61,61,61,0.90);
  --shadow-sm: 0 8px 16px rgba(0,0,0,0.04);
  --shadow-md: 0 16px 32px rgba(0,0,0,0.06);
  --shadow-lg: 0 24px 56px rgba(0,0,0,0.10);
  --r-pill: 9999px;
  --r-md: 8px;
  --r-lg: 16px;
}
[data-theme="dark"] {
  --ink: #F2F2F2;
  --ink-2: #C9C9C9;
  --ink-3: #7A7A7A;
  --bg: #121212;
  --surface: #1A1A1A;
  --hair: #2A2A2A;
  --hair-2: #262626;
  --grid-line: rgba(255,255,255,0.06);
  --nav-bg: rgba(245,245,245,0.90);
  --shadow-sm: 0 8px 16px rgba(0,0,0,0.4);
  --shadow-md: 0 16px 32px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 56px rgba(0,0,0,0.6);
}

/* ============= BASE ============= */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .35s ease, color .35s ease;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* hide cursor on devices with fine pointer (custom cursor handles it) */
@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor * { cursor: none !important; }
}

/* ============= CUSTOM CURSOR ============= */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  width: 28px;
  height: 28px;
  /* Offset so the SVG's arrow tip (4.34, 3.61 in the 28×28 art) sits exactly on the mouse position */
  margin-left: -4.3px;
  margin-top: -3.6px;
  color: #3D3D3D;
  will-change: transform;
  transition: opacity .2s ease;
}
[data-theme="dark"] .cursor { color: #F2F2F2; }
.cursor svg {
  display: block;
  transform-origin: 4px 4px;
  transition: transform .28s cubic-bezier(.2,.8,.3,1.1), opacity .26s ease;
}
.cursor.is-hidden { opacity: 0; }
.cursor.is-hidden svg { transform: scale(.6); opacity: 0; }
/* arrow fades out when the section-specific cursor takes over */
.cursor.is-suppressed { opacity: 0; }

/* ===== About-section cursor (purple "Visitor" pill) ===== */
.cursor-about {
  position: fixed;
  top: 0;
  left: 0;
  /* align the arrow tip (≈ 4.3, 3.6 in the 134×57 art) to the pointer */
  margin-left: -4.3px;
  margin-top: -3.6px;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}
.cursor-about-inner {
  position: relative;
  transform: scale(.7);
  opacity: 0;
  transform-origin: 4px 4px;
  transition: opacity .26s ease, transform .26s cubic-bezier(.2,.8,.3,1.1);
}
.cursor-about.is-active .cursor-about-inner {
  opacity: 1;
  transform: scale(1);
}
.cursor-about svg { display: block; }
.cursor-about-text {
  position: absolute;
  left: 17px;
  top: 13px;
  width: 117px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
  pointer-events: none;
}

/* ============= LOADING SCREEN ============= */
body.is-loading { overflow: hidden; cursor: none; }
body.is-loading * { cursor: none !important; }

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 60px;
  transition: opacity .55s cubic-bezier(.7, 0, .3, 1), transform .55s cubic-bezier(.7, 0, .3, 1);
  overflow: hidden;
}
.loading-screen.is-exiting {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.loading-stage {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.loading-pct {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.loading-number {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 180px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px #DCDCDC;
  text-stroke: 2px #DCDCDC;
  font-variant-numeric: tabular-nums;
}
.loading-percent {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 90px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #DCDCDC;
  margin-top: 4px;
}
.loading-bar-row {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: -10px;
  margin-left: 252px;
}
.loading-bar {
  position: relative;
  width: 233px;
  height: 23px;
  background: #F2F2F2;
  border: 1px solid #DFDFDF;
  border-radius: 9999px;
  overflow: hidden;
  z-index: 2;
}
.loading-bar-fill {
  height: 100%;
  background: var(--highlight);
  border-right: 1px solid #C9E800;
  border-radius: 9999px;
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.loading-divider {
  position: absolute;
  left: -1000px;
  right: -1000px;
  top: 50%;
  border-top: 1px dashed #D1D1D1;
  z-index: 1;
  pointer-events: none;
}

/* Custom loading cursor */
.loading-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1001;
  will-change: transform;
}
.loading-cursor-svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
[data-theme="dark"] .loading-cursor-svg path { fill: var(--highlight); }
.loading-cursor-text {
  position: absolute;
  left: 47px;
  top: 27px;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
  pointer-events: none;
}
[data-theme="dark"] .loading-cursor-text { color: #1a1a1a; }

@media (max-width: 1024px) {
  .loading-screen { padding: 0 32px; }
  .loading-number { font-size: 120px; -webkit-text-stroke-width: 1.5px; }
  .loading-percent { font-size: 60px; }
  .loading-bar-row { margin-left: 168px; }
  .loading-bar { width: 200px; }
}
@media (max-width: 720px) {
  .loading-screen { padding: 0 20px; }
  .loading-number { font-size: 84px; -webkit-text-stroke-width: 1.25px; }
  .loading-percent { font-size: 42px; }
  .loading-bar-row { margin-left: 116px; }
  .loading-bar { width: 160px; height: 18px; }
  .loading-cursor-text { font-size: 14px; }
}

/* ============= NAV ============= */
.nav-wrap {
  position: fixed;
  top: 16px;
  left: 0; right: 0;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  display: flex;
  justify-content: center;
  z-index: 100;
  padding: 0 24px;
  pointer-events: none;
}
/* hide-on-scroll-down / show-on-scroll-up */
.nav-wrap.nav-hidden { transform: translateY(calc(-100% - 24px)); }
.nav {
  pointer-events: auto;
  width: min(720px, 100%);
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 24px;
  color: #fff;
}
[data-theme="dark"] .nav { color: #1a1a1a; }
.nav-logo {
  display: flex; align-items: center;
  height: 36px;
  flex-shrink: 0;
}
.nav-logo svg { height: 36px; width: auto; }
[data-theme="dark"] .nav-logo svg path { fill: #1a1a1a; stroke: #1a1a1a; }
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-link {
  font-size: 14px;
  font-weight: 500;
  opacity: .92;
  transition: opacity .2s ease, transform .2s ease;
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover { opacity: 1; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-cta {
  height: 40px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  padding: 4px 4px 4px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease;
}
[data-theme="dark"] .nav-cta { background: #1a1a1a; color: #fff; }
.nav-cta::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: var(--highlight);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 800ms cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
}
.nav-cta::after {
  /* lime sliver disabled — button uses plain white at rest */
  content: none;
}
.nav-cta > * { position: relative; z-index: 2; }
.nav-cta:hover::before { transform: scaleX(1); }
.nav-cta .icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  display: grid; place-items: center;
  color: #fff;
}
[data-theme="dark"] .nav-cta .icon { background: #fff; color: #1a1a1a; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.nav-cta svg { width: 14px; height: 14px; }
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-burger {
  display: none;
  width: 48px;
  height: 40px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease;
}
[data-theme="dark"] .nav-burger { background: #1a1a1a; color: #fff; }
.nav-burger-lines {
  position: relative;
  width: 20px;
  height: 14px;
  display: block;
}
.nav-burger-lines span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .3s cubic-bezier(.2,.6,.2,1), opacity .25s ease, top .3s cubic-bezier(.2,.6,.2,1);
}
.nav-burger-lines span:nth-child(1) { top: 0; }
.nav-burger-lines span:nth-child(2) { top: 6px; width: 70%; left: 15%; }
.nav-burger-lines span:nth-child(3) { top: 12px; }
.nav-burger.is-open .nav-burger-lines span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-burger.is-open .nav-burger-lines span:nth-child(2) { opacity: 0; }
.nav-burger.is-open .nav-burger-lines span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(20,20,20,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-inner {
  position: absolute;
  top: 88px;
  left: 16px;
  right: 16px;
  background: var(--bg);
  border-radius: 24px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 24px 56px rgba(0,0,0,.18);
  transform: translateY(-12px) scale(.98);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.6,.2,1), opacity .3s ease;
}
.mobile-menu.is-open .mobile-menu-inner {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.mobile-menu-inner a {
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
  transition: padding-left .25s ease;
}
.mobile-menu-inner a:last-of-type { border-bottom: 0; }
.mobile-menu-inner a:hover { padding-left: 8px; }
/* reuses the hero .pill-cta style; here we only handle placement:
   hug the text and left-align within the menu card */
.mobile-menu-cta {
  align-self: flex-start;
  margin-top: 16px;
}

/* ============= LAYOUT ============= */
.container {
  max-width: 1280px;
  padding: 0 60px;
  margin: 0 auto;
  width: 100%;
}
section { position: relative; }

/* ============= HERO ============= */
.hero {
  padding: clamp(104px, 14vh, 140px) 0 clamp(40px, 7vh, 60px);
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
/* Layer 1 — static 40px grid */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 40px);
}
/* Layer 2 — animated pink cursor highlight */
.hero-cursor-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Bottom fade so grid + pink dissolve into the page */
.hero-grid-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 66%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--bg) 88%);
}
.hero-inner {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  z-index: 3;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: clamp(28px, 4vh, 40px);
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
  padding-left: 12px;
  margin-bottom: 0;
}
.hero-title {
  font-family: "Plus Jakarta Sans";
  font-weight: 500;
  font-size: clamp(64px, min(13vw, 19vh), 180px);
  line-height: .85;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0;
  max-width: 960px;
}
.hero-title .line {
  display: flex;
  width: 100%;
  align-items: center;
  position: relative;
}
.hero-title .line.right {
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
}
.hero-title .line.right > * {
  margin-left: auto;
}
.hero-title .line.right > * ~ * {
  margin-left: 0;
}
.hero-title .built {
  font-size: clamp(24px, 4vh, 40px);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  padding: 0 24px 0 12px;
  align-self: center;
  white-space: nowrap;
}
.hero-mock {
  /* lock aspect ratio so height always tracks the fluid width */
  display: block;
  width: clamp(176px, 24.8vw, 336px);
  height: auto;
  aspect-ratio: 852 / 480;
  margin: 24px 16px 0;
  flex-shrink: 0;
  align-self: flex-end;
}
.hero-video {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: transparent;
}
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  /* slight overscale hides the hairline dark edge baked into the video frames */
  transform: scale(1.03);
  /* showcase only — no video controls or interaction */
  pointer-events: none;
}
.hero-video-cover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.hero-bottom {
  display: flex;
  align-items: center;
  gap: 42px;
  margin-top: clamp(28px, 6vh, 56px);
  padding-left: 105px;
  flex-wrap: wrap;
}
.hero-bottom p {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 360px;
}
.hero-bottom p b, .hero-bottom p i, .hero-bottom p em { font-weight: 700; font-style: italic; }
.pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--highlight);
  color: var(--ink);
  padding: 8px 8px 8px 24px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.pill-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #D6EE35;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 800ms cubic-bezier(.4, 0, .2, 1);
  z-index: -1;
}
.pill-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(214,238,53,.45);
}
.pill-cta:hover::before { transform: scaleX(1); }
.pill-cta .icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
}
[data-theme="dark"] .pill-cta .icon { background: #1a1a1a; color: #E9FC6E; }
.pill-cta .icon svg { width: 14px; height: 14px; }

/* ============= PROJECTS (Project Highlight) ============= */
.ph-section {
  padding: 140px 0 60px;
}
.ph-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: start;
}
.ph-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
}
.ph-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ph-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.ph-sub {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}
.ph-thumb {
  border-radius: 16px;
  background: transparent;
  transition: transform 0.35s cubic-bezier(.2, .6, .2, 1);
}
.ph-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
}
.ph-card:hover .ph-thumb {
  transform: translateY(-8px);
}

@media (max-width: 1024px) {
  .ph-section { padding: 100px 0 40px; }
  .ph-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 720px) {
  .ph-section { padding: 80px 0 32px; }
  .ph-grid { grid-template-columns: 1fr; gap: 32px; }
  /* project-kvliah.png has ~97px of blank space baked into its bottom; when
     the cards stack on mobile that blank reads as a huge gap before the next
     card. Crop the thumbnail to its content so the gap matches the others. */
  .ph-card-kvliah .ph-thumb img {
    aspect-ratio: 267 / 328;
    height: auto;
    object-fit: cover;
    object-position: top;
  }
}
.proj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: start;
}
.proj-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}
.proj-head { margin-bottom: 18px; flex: 0 0 auto; }
.proj-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 8px;
}
.proj-sub {
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.proj-thumb {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: transform .45s cubic-bezier(.2,.6,.2,1), box-shadow .45s ease;
}
.proj-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.proj-card:hover .proj-thumb {
  transform: translateY(-8px);
}
.proj-thumb::after { content: none; }
.proj-arrow { display: none; }
.proj-thumb { box-shadow: none !important; }
.proj-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.25));
  opacity: 0;
  transition: opacity .35s ease;
}
.proj-card:hover .proj-thumb::after { opacity: 1; }
.proj-arrow {
  position: absolute;
  right: 16px; bottom: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--highlight);
  color: var(--ink);
  display: grid; place-items: center;
  opacity: 0;
  transform: translateY(8px) rotate(-30deg);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.6,.2,1);
  z-index: 2;
}
.proj-card:hover .proj-arrow {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

/* ============= HEY ============= */
.hey {
  padding: 200px 0 120px;
}
.hey-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 56px;
}
.hey-art {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}
.hey-art img { width: 100%; height: auto; }

/* ----- HEY interactive graphic ----- */
.hey-graphic {
  width: 100%;
}
.hey-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  cursor: pointer;
}
/* dark pill slides up-left to frame the "Hey!" on hover */
.hey-pill {
  transition: transform .55s cubic-bezier(.2, .8, .3, 1.05);
}
.hey-graphic:hover .hey-pill {
  transform: translate(-64px, -20.216px);
}
/* pink measurement overlay flows in left-to-right */
.hey-pink {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .25s ease, clip-path .7s cubic-bezier(.4, 0, .2, 1);
}
.hey-graphic:hover .hey-pink {
  opacity: 1;
  clip-path: inset(0 -8% 0 0);
}
.hey-divider {
  width: 1px;
  height: 176px;
  margin: 0 auto;
  border-left: 1px dashed #9E9E9E;
}
.hey-body p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 467px;
}
.hey-body i, .hey-body em, .hey-body b { font-weight: 700; font-style: italic; }
.hey-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 40px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 4px 4px 4px 24px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease;
}
.btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: var(--highlight);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 800ms cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
}
.btn::after {
  content: none;
}
.btn > * { position: relative; z-index: 2; }
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:hover::before { transform: scaleX(1); }
.btn .icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
}
[data-theme="dark"] .btn .icon { background: var(--highlight); color: #1a1a1a; }
.btn.ghost {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 24px;
}
.btn.ghost::before,
.btn.ghost::after { content: none; }
.btn.ghost .icon { background: transparent; color: var(--ink); }
.btn.ghost:hover { transform: translateY(-2px); box-shadow: none; }

/* ============= CERTIFICATE (scroll deck) ============= */
.cs-section { position: relative; }
.cs-stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.cs-container {
  position: relative;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  --csoh: clamp(55px, 7.2vw, 92px); /* outline half-height */
}
.cs-outline {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-size: clamp(110px, 14.4vw, 184px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px #E9E9E9;
  user-select: none;
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .cs-outline { -webkit-text-stroke: 1.5px rgba(255,255,255,0.13); }
.cs-title {
  position: absolute;
  left: 48px;
  top: calc(46% - var(--csoh) - 28px);
  margin: 0;
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  z-index: 5;
}
.cs-cta {
  position: absolute;
  right: 48px;
  top: calc(46% + var(--csoh) - 22px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 12px 24px;
  border-radius: 99999px;
  background: #E9FC6E;
  color: #111111;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  transition: translate .2s ease, box-shadow .25s ease;
}
/* GSAP owns this button's inline `transform`/`translate`, so a plain
   :hover transform gets overridden. Use the independent `translate`
   property (with !important to beat GSAP's inline `translate:none`); it
   composes with GSAP's transform, so the lift adds on top of its position. */
.cs-cta:hover {
  translate: 0 -2px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
}
.cs-cta svg { display: block; }
.cs-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  width: 310px;
  height: 380px;
  z-index: 4;
}
.cs-card {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 16px rgba(0,0,0,0.16);
  box-sizing: border-box;
  will-change: transform;
  backface-visibility: hidden;
}
/* default = final state (JS animates from scratch when available) */
.cs-card:nth-child(1) { transform: translateY(-132px); }
.cs-card:nth-child(2) { transform: translateY(-66px); }
.cs-card-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cs-card-logo svg { height: 28px; width: auto; }
.cs-card-body { display: flex; flex-direction: column; gap: 28px; }
.cs-card-body h3 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  margin: 0;
}
.cs-card-body p { font-size: 14px; color: #fff; margin: 0; font-weight: 400; }
.cs-card-body p strong { font-weight: 700; }

@media (max-width: 1024px) {
  /* Certificate: top-anchored vertical layout for tablet + mobile so all
     three rows (title / card stack / CTA) sit properly in the viewport and
     the bottom CTA stays clear of the folded card deck. The card uses the
     mobile size on tablet too. Only left/right/top/bottom change here (GSAP
     owns the transforms), so the scroll animation is unaffected. */
  .cs-container { padding: 0 24px; }
  .cs-title {
    left: 0; right: 0;
    text-align: center;
    top: 12%;
    font-size: 48px;
  }
  .cs-stack {
    top: calc(40% + 20px);
    width: 260px;
    height: 330px;
  }
  .cs-card:nth-child(1) { transform: translateY(-112px); }
  .cs-card:nth-child(2) { transform: translateY(-56px); }
  .cs-card-body h3 { font-size: 29px; }
  .cs-outline {
    top: calc(40% - 152px);          /* centered on the (raised) stack's top edge */
    font-size: clamp(96px, 15vw, 150px);
  }
  .cs-cta {
    left: 0; right: 0;
    top: auto; bottom: 18%;          /* closer to the card, just clearing the folded deck */
    margin: 0 auto;
    width: fit-content;
  }
}
@media (max-width: 720px) {
  .cs-container { padding: 0 20px; }
  .cs-title { font-size: 40px; }
  /* shorter mobile viewport: drop the stack a little so the raised card
     clears the title, and follow with the outline */
  .cs-stack { top: calc(44% + 20px); }
  .cs-outline {
    -webkit-text-stroke: 1px #E9E9E9;
    top: calc(44% - 152px);
    font-size: clamp(76px, 20vw, 118px);
  }
  .cs-cta { height: 44px; font-size: 16px; bottom: calc(11% - 20px); }
}

/* ============= SHIPPED PRODUCT (pinned scroll) ============= */
.sp-section { position: relative; }
.sp-stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.sp-title {
  position: absolute;
  left: 50%;
  top: calc(50% - 285px);
  transform: translateX(-50%);
  margin: 0;
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  z-index: 5;
}
.sp-outline {
  position: absolute;
  left: 50%;
  top: calc(50% + 40px);
  transform: translate(-50%, -50%);
  font-size: clamp(90px, 13vw, 168px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px #E9E9E9;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .sp-outline { -webkit-text-stroke: 1.5px rgba(255,255,255,0.13); }
.sp-icon {
  position: absolute;
  top: calc(50% - 161px);
  width: 100px;
  height: 100px;
  margin-left: -50px;
  border-radius: 24px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.16);
  z-index: 2;
  will-change: transform;
  transition: rotate 0.3s ease;
}
.sp-linked { cursor: pointer; }
.sp-i1 { left: calc(50% - 243px); }
.sp-i2 { left: calc(50% - 81px); }
.sp-i3 { left: calc(50% + 81px); }
.sp-i4 { left: calc(50% + 243px); }
.sp-folder-back,
.sp-folder-front {
  position: absolute;
  left: 50%;
  width: 390px;
  height: auto;
  margin-left: -195px;
  display: block;
  will-change: transform;
}
.sp-folder-back { top: calc(50% + 7px); z-index: 1; }
.sp-folder-front { top: calc(50% + 56px); z-index: 3; filter: drop-shadow(0 -13px 18px rgba(0,0,0,0.2)); }

/* ============= CERTIFICATE & SHIPPED ============= */
.dual {
  padding: 80px 0;
}
.dual-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: start;
}
.section-h {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin: 0;
  padding-top: 24px;
}
.surface {
  background: var(--surface);
  border-radius: 16px;
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 100px;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(61,61,61,0.12) 1px, transparent 0);
  background-size: 24px 24px;
}
[data-theme="dark"] .surface {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
}
.cert {
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-width: 220px;
}
.cert-logo {
  height: 36px;
  display: flex;
  align-items: center;
}
.cert-logo svg { height: 32px; width: auto; }
.cert-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.shipped {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 100px;
}
.shipped .ship-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 120px;
}
.ship-thumb {
  width: 60px; height: 60px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-color: #d9d9d9;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 26px;
  position: relative;
  overflow: hidden;
}
.ship-thumb.rezerv { background: #0F8B6E; }
.ship-thumb.styledoubler { background: linear-gradient(135deg,#9d4ef7,#c84df0); }
.ship-thumb.bitcoin { background: #d9d9d9; }
.ship-thumb.wallyst { background: #d9d9d9; }
.ship-thumb.morsecode { background: #d9d9d9; }
.ship-thumb svg { width: 32px; height: 32px; }
.ship-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

/* ============= HIGHLIGHTS ============= */
.highlights {
  padding: 40px 0 80px;
}
.highlights-h {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 40px;
}
.hl-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hl-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  perspective: 1200px;
  gap: 32px;
  align-items: stretch;
}
.hl-row:nth-child(even) {
  grid-template-columns: 1fr 2fr;
}
.hl-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
}
.hl-col .hl {
  flex: 1;
  aspect-ratio: auto;
  min-height: 0;
}
.hl {
  border-radius: 16px;
  overflow: hidden;
  background: #f4f4f4;
  cursor: pointer;
}
.hl img {
  transition: transform 180ms ease-out;
}
.hl:hover img { transform: scale(1.05); }

/* ============= HIGHLIGHT DRAWER ============= */
.hl-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: hl-fade-in 0.35s ease forwards;
}
.hl-drawer-backdrop.is-closing {
  animation: hl-fade-out 0.35s ease forwards;
}
.hl-drawer {
  width: 100%;
  max-width: 100%;
  height: 90vh;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  padding: 40px;
  overflow: hidden;
  animation: hl-slide-up 0.42s cubic-bezier(.16, .84, .34, 1) forwards;
}
.hl-drawer.is-closing {
  animation: hl-slide-down 0.38s cubic-bezier(.4, 0, .8, .4) forwards;
}
.hl-drawer-inner {
  display: flex;
  gap: 40px;
  height: 100%;
}
.hl-drawer-img {
  border-radius: 16px;
  overflow: hidden;
  background: #d9d9d9;
  height: 100%;
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  max-width: 100%;
}
.hl-drawer-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hl-drawer-side {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hl-drawer-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
[data-theme="dark"] .hl-drawer-close { background: #fff; color: #1a1a1a; }
.hl-drawer-close:hover { transform: scale(1.08); }
.hl-drawer-body {
  margin: auto 0;
  max-width: 412px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hl-drawer-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.hl-drawer-desc {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.hl-drawer-cta {
  align-self: flex-start;
  height: 40px;
  font-size: 14px;
  padding: 4px 4px 4px 20px;
  white-space: nowrap;
}
.hl-drawer-cta .icon {
  width: 32px;
  height: 32px;
}

@keyframes hl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hl-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes hl-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes hl-slide-down { from { transform: translateY(0); } to { transform: translateY(100%); } }

@media (max-width: 1024px) {
  .hl-drawer { height: 90vh; padding: 40px; }
  .hl-drawer-inner { gap: 28px; }
}
@media (max-width: 720px) {
  .hl-drawer {
    height: 92vh;
    padding: 20px;
    border-radius: 20px 20px 0 0;
  }
  .hl-drawer-inner {
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
  }
  .hl-drawer-img { width: 100%; height: auto; aspect-ratio: 4 / 3; flex: 0 0 auto; }
  .hl-drawer-body { margin: 0; gap: 16px; }
  .hl-drawer-title { font-size: 24px; }
  .hl-drawer-close {
    background: rgba(255,255,255,0.92);
    color: var(--ink);
  }
}
.hl-big {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
}
.hl-big img {
  flex: 1;
  width: 100%;
  height: 0;
  min-height: 0;
  object-fit: cover;
  display: block;
}
.hl-small { aspect-ratio: 400 / 257; }
.hl-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hl:hover {
  transform: translateY(-8px);
}

/* ============= FOOTER ============= */
.footer {
  padding: 80px 60px 40px;
  border-top: 1px solid var(--hair);
  margin-top: 80px;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
}
.footer-brand svg {
  height: 40px;
  width: auto;
  margin-bottom: 20px;
}
[data-theme="dark"] .footer-brand svg path { fill: var(--ink); stroke: var(--ink); }
.footer-brand p {
  max-width: 360px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 24px;
}
.footer-mail {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer-mail::after {
  content: "→";
  display: inline-block;
  transition: transform .25s ease;
}
.footer-mail:hover::after { transform: translateX(6px); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 56px;
}
.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin: 0 0 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: opacity .2s ease, transform .2s ease;
  display: inline-block;
}
.footer-col a:hover { transform: translateX(3px); }
.footer-bottom {
  max-width: 1280px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-3);
}

/* ============= OTHER PROJECTS (case-study CTA) ============= */
.op-section { padding: 280px 0 0; }
.op-layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 3.4fr;
  gap: 0;
  align-items: start;
}
.op-head {
  padding: 4px 72px 0 0;
  border-right: 1px solid var(--hair);
  min-height: 460px;
}
.op-head h2 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: .98;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.op-head h2 .op-w { display: block; }
.op-arrow {
  display: inline-block;
  margin-top: 44px;
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
  width: 40px;
  height: 40px;
  overflow: hidden;
}
.op-arrow-track {
  display: flex;
  width: 200%;
  transform: translateX(-50%);
}
.op-arrow-track span {
  flex: 0 0 50%;
  text-align: center;
}
.op-arrow:hover .op-arrow-track {
  animation: op-arrow-loop .95s cubic-bezier(.6,0,.2,1) 1;
}
@keyframes op-arrow-loop {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}
@media (prefers-reduced-motion: reduce) { .op-arrow:hover .op-arrow-track { animation: none; } }
.op-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-left: 72px;
  align-items: start;
}
@media (max-width: 1024px) {
  .op-section { padding: 140px 0 0; }
  .op-layout { grid-template-columns: 1fr; }
  .op-head { border-right: 0; border-bottom: 1px solid var(--hair); padding: 0 0 28px; min-height: 0; margin-bottom: 32px; display: flex; align-items: baseline; justify-content: space-between; }
  .op-head h2 .op-w { display: inline; }
  .op-arrow { margin-top: 0; }
  .op-grid { padding-left: 0; grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 720px) {
  .op-grid { grid-template-columns: 1fr; gap: 32px; }
  .op-arrow { display: none; }
}

/* ============= SITE FOOTER (shared) ============= */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  margin-top: 120px;
  padding: 0 60px 40px;
  min-height: 900px;
  display: flex;
  flex-direction: column;
}
/* hide the OS cursor anywhere inside the footer while its own pill is active */
@media (hover: hover) and (pointer: fine) {
  body.footer-cursor-on, body.footer-cursor-on * { cursor: none !important; }
}
/* reversed grid: faded at top, clear toward the bottom */
.sf-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 40px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 46%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 46%);
}
.sf-grid-fade {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(255,255,255,0) 100%);
}
[data-theme="dark"] .sf-grid-fade {
  background: linear-gradient(180deg, var(--bg) 0%, rgba(26,26,26,0) 100%);
}
.sf-stage {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 0 64px;
}
.sf-reach {
  position: relative;
  display: inline-block;
  margin: 0;
  width: min(572px, 82vw);
}
.sf-reach-graphic {
  display: block;
  width: 100%;
  height: auto;
}
[data-theme="dark"] .sf-reach-graphic { filter: invert(1); }
/* green rotating badge overlapping the H of "Reach" */
.sf-badge {
  --sf-badge-size: 120px;
  position: absolute;
  top: calc(21% + 52px);
  left: calc(63% + 192px);
  width: var(--sf-badge-size);
  height: var(--sf-badge-size);
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  z-index: 4;
}
@media (hover: hover) and (pointer: fine) {
  body.has-cursor .sf-badge { cursor: none; }
}
.sf-badge-ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: sf-spin 16s linear infinite;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sf-badge-ring { animation: none; } }
.sf-badge-mouse {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  transition: transform .3s cubic-bezier(.2,.8,.3,1.1);
}
.sf-badge:hover .sf-badge-mouse { transform: translate(-50%, -50%) scale(1.12); }

.sf-bottom {
  position: relative;
  z-index: 3;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  color: var(--ink-3);
}
.sf-bottom strong { color: var(--ink); font-weight: 600; }
.sf-bottom .sf-rights { color: #000000; font-weight: 600; }
.sf-bottom span:nth-child(2) { text-align: center; }
.sf-bottom span:last-child { text-align: right; }

/* footer-scoped purple email pill cursor */
/* footer variant reuses the About-cursor system, but instead of a fixed-width
   SVG pill it draws the pill in CSS so it hugs the email text with 24px of
   padding on each side. The little arrow tail stays as a small SVG on top. */
.cursor-footer-text {
  width: auto;
  padding: 0 24px;
  background: #9747FF;
  border-radius: 22px;
  box-sizing: border-box;
}
.cursor-footer-tail {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
}
/* on pages without the global custom cursor (case studies), hide the native
   cursor while the footer email pill is showing */
.site-footer.footer-cursor-on,
.site-footer.footer-cursor-on * { cursor: none !important; }

/* ============= MODAL ============= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,20,20,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background: var(--bg);
  border-radius: 24px;
  padding: 40px;
  width: min(520px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg);
  transform: scale(.96) translateY(8px);
  transition: transform .3s cubic-bezier(.2,.6,.2,1);
}
.modal-backdrop.is-open .modal { transform: scale(1) translateY(0); }
.modal h3 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--ink);
}
.modal p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  transition: background-color .2s ease;
}
.modal-close:hover { background: var(--hair); }
.modal-form { display: grid; gap: 14px; }
.modal-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.modal-form input, .modal-form textarea {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.modal-form input:focus, .modal-form textarea:focus {
  border-color: var(--ink);
  background: var(--bg);
}
.modal-form textarea { min-height: 120px; resize: vertical; }
.modal-submit {
  margin-top: 6px;
  height: 52px;
  border-radius: 12px;
  background: var(--highlight);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .2s ease;
}
.modal-submit:hover { transform: translateY(-1px); }

/* ============= REACH-OUT MODAL (shared, two-column) ============= */
.reachout-modal {
  position: relative;
  width: min(1120px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 88px 64px;
  overflow: hidden;
  border-radius: 28px;
}
/* footer-style line grid, faded toward the form so it stays subtle */
.reachout-modal .ro-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 40px);
  -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,0) 80%);
  mask-image: linear-gradient(115deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,0) 80%);
}
.reachout-modal .ro-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.reachout-modal .ro-intro { align-self: center; }
.reachout-modal .ro-title {
  font-size: clamp(44px, 5.4vw, 88px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 22px;
}
.reachout-modal .ro-title-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink-3);
  text-stroke: 1.5px var(--ink-3);
}
.reachout-modal .ro-desc {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34ch;
  margin: 0;
}
.reachout-modal .ro-form {
  position: relative;
  z-index: 1;
  gap: 16px;
  align-self: center;
}
.reachout-modal .ro-form label { font-size: 14px; }
.reachout-modal .ro-form input,
.reachout-modal .ro-form textarea { padding: 14px 16px; font-size: 15px; }
.reachout-modal .ro-submit { justify-self: start; margin-top: 8px; }
/* sent confirmation reuses the same title/desc scale */
.reachout-modal .ro-sent { position: relative; z-index: 1; max-width: 520px; }
.reachout-modal .ro-sent .ro-desc { margin: 0 0 28px; }
/* dark circular close, matching the site's icon buttons */
.reachout-modal .modal-close {
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  z-index: 3;
  background: var(--ink);
  color: var(--bg);
}
.reachout-modal .modal-close:hover { background: var(--ink); opacity: .85; }

@media (max-width: 860px) {
  /* full-screen modal on mobile, content vertically centered on the page */
  .reachout-modal {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
  }
  .reachout-modal .ro-layout { grid-template-columns: 1fr; gap: 28px; }
  .reachout-modal .ro-title { font-size: clamp(40px, 13vw, 60px); margin-bottom: 16px; }
  .reachout-modal .ro-desc { font-size: 15px; max-width: none; }
  /* completed state: content stays centered; drop the redundant Close CTA
     since the close icon already handles it */
  .reachout-modal .ro-sent .ro-submit { display: none; }
}

/* while a modal is open, restore normal cursors even on pages that hide the
   OS cursor via the custom kite (body.has-cursor), and hide the kite itself */
body.modal-open, body.modal-open * { cursor: auto !important; }
body.modal-open .pill-cta,
body.modal-open .modal-close { cursor: pointer !important; }
body.modal-open .modal-form input,
body.modal-open .modal-form textarea { cursor: text !important; }
body.modal-open .cursor,
body.modal-open .cursor-about { opacity: 0 !important; }

/* ============= SCROLL REVEAL ============= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }

/* First-visit hero intro: hold these hidden until the GSAP timeline drives
   them, so there's no flash of the finished state as the loader leaves.
   Placed after .reveal rules so it wins on equal specificity. */
.hero-intro .hero-eyebrow,
.hero-intro .built { opacity: 0; }
.hero-intro .hero-bottom p { clip-path: inset(0 100% 0 0); }
.hero-intro .hero-bottom .pill-cta { opacity: 0; transform: translateX(-44px); }
.hero-intro .hero-word { color: transparent; clip-path: inset(-35% 100% -60% 0); }
.hero-intro .hero-video video { opacity: 1; clip-path: inset(0 100% 0 0); }

/* ============= RESPONSIVE ============= */
@media (max-width: 1024px) {
  .container { padding: 0 32px; max-width: 600px; }
  .nav { width: min(660px, 100%); }
  .hero-title { font-size: clamp(56px, 14vw, 96px); }
  .hero-eyebrow { font-size: 28px; padding-left: 8px; }
  .hero-title .built { font-size: 24px; padding: 0 8px; }
  .hero-mock { width: clamp(170px, 26vw, 260px); margin: 0 8px; }
  .hero-title .line.right { flex-wrap: wrap; }
  .proj-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .dual-row { grid-template-columns: 1fr; gap: 32px; }
  .section-h { font-size: 40px; padding-top: 0; }
  .highlights-h { font-size: 40px; }
  .surface { padding: 32px; gap: 24px 40px; }
  .shipped { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 120px 0 40px; min-height: 100svh; justify-content: center; }
  .hero-inner { max-width: 680px; }
  .hero-bottom { padding-left: 0; flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-bottom p { font-size: 16px; }
  .hl-grid {
    display: flex;
  }
  .hl-row, .hl-row:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .hl-col { gap: 24px; }
  .highlights-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .highlights-h { font-size: 40px; }
  .hey-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hey-art { margin: 0 auto; }
  .footer { padding: 60px 32px 32px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { padding: 0 32px 32px; min-height: 560px; margin-top: 80px; }
  .sf-stage { padding: 96px 0 48px; }
  .sf-badge { top: 6%; right: 2%; width: 96px; height: 96px; }
  .sf-badge-core { width: 52px; height: 52px; }
}
@media (max-width: 720px) {
  .nav { padding-left: 16px; padding-right: 6px; width: min(380px, 100%); }
  .nav-links { display: none; }
  .nav-right {
    background: #fff;
    border-radius: var(--r-pill);
    padding: 4px;
    gap: 2px;
  }
  [data-theme="dark"] .nav-right { background: #1a1a1a; }
  .nav-burger {
    display: inline-flex;
    background: transparent;
    width: 44px;
    height: 32px;
    border-radius: var(--r-pill);
  }
  [data-theme="dark"] .nav-burger { background: transparent; color: #fff; }
  .nav-cta {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  [data-theme="dark"] .nav-cta { background: #fff; color: #1a1a1a; }
  .nav-cta::before, .nav-cta::after { display: none; }
  .nav-cta-label { display: none; }
  .nav-cta .icon {
    width: auto; height: auto;
    background: transparent;
    color: inherit;
  }
  .container { padding: 0 20px; max-width: 420px; }
  .hero-inner { min-width: 340px; max-width: 420px; width: 100%; }
  .hero { padding: 100px 0 56px; }
  .hero-eyebrow { font-size: 22px; }
  .hero-title { font-size: clamp(48px, 16vw, 64px); }
  .hero-title .line,
  .hero-title .line.right { justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; }
  .hero-title .built { font-size: 18px; padding: 0 6px; }
  .hero-mock { width: 152px; margin: 0 6px; }

  /* Mobile project cards: 2-col grid, image on top, uniform square aspect */
  .proj-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
  }
  .proj-card { flex-direction: column-reverse; }
  .proj-head { margin: 16px 0 0; }
  .proj-title { font-size: 20px; }
  .proj-sub { font-size: 13px; }
  .proj-thumb {
    aspect-ratio: 1 / 1;
  }
  .proj-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .hero-bottom { margin-top: 32px; gap: 20px; flex-direction: column; align-items: flex-start; }
  .hero-bottom p { font-size: 16px; }
  .section-h { font-size: 32px; }
  .highlights-h { font-size: 32px; }
  .surface { padding: 24px; grid-template-columns: 1fr 1fr; gap: 24px; }
  .shipped { grid-template-columns: 1fr 1fr; }
  .sp-title { font-size: 32px; top: calc(50% - 220px); }
  .sp-outline { -webkit-text-stroke: 1px #E9E9E9; top: calc(50% + 30px); }
  .sp-icon { width: 60px; height: 60px; margin-left: -30px; border-radius: 15px; top: calc(50% - 110px); }
  .sp-i1 { left: calc(50% - 129px); }
  .sp-i2 { left: calc(50% - 43px); }
  .sp-i3 { left: calc(50% + 43px); }
  .sp-i4 { left: calc(50% + 129px); }
  .sp-folder-back, .sp-folder-front { width: 234px; margin-left: -117px; }
  .sp-folder-back { top: calc(50% + 18px); }
  .sp-folder-front { top: calc(50% + 47px); }
  .hey { padding: 100px 0 60px; }
  .footer-mail { font-size: 20px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .sf-bottom { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 12px; }
  .sf-bottom span:nth-child(2), .sf-bottom span:last-child { text-align: left; }
  /* footer: 24px side padding on the page; graphic + badge are responsive
     within a max-width (like the section cards). The badge is sized as a %
     of the graphic and stays absolutely anchored to it. */
  .site-footer { padding-left: 24px; padding-right: 24px; }
  /* graphic + badge act as one group. The badge sticks out ~8% to the right
     of the graphic, so nudge the group left by half of that to keep the whole
     group visually centered on the page. */
  .sf-reach { width: 100%; max-width: 288px; transform: translateX(-8%); }
  .sf-badge {
    width: 30%;
    height: auto;
    aspect-ratio: 1;
    top: -16%;
    right: -16%;
    left: auto;
    transform: none;
  }
}

/* ============= TWEAKS PANEL OVERRIDES ============= */
.tweaks-panel { font-family: "Plus Jakarta Sans", sans-serif; }

/*EDITMODE-BEGIN*//*EDITMODE-END*/