/* ─── Custom brand font: The Silver Editorial ─── */
@font-face {
  font-family: "The Silver Editorial";
  src: url("fonts/TheSilverEditorial-Regular.woff2") format("woff2"),
       url("fonts/TheSilverEditorial-Regular.woff") format("woff"),
       url("fonts/TheSilverEditorial-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "The Silver Editorial";
  src: url("fonts/TheSilverEditorial-Italic.woff2") format("woff2"),
       url("fonts/TheSilverEditorial-Italic.woff") format("woff"),
       url("fonts/TheSilverEditorial-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ─── Studio type system (self-hosted, matches homepage) ─── */
@font-face{font-family:'Bricolage Grotesque';src:url("home-v2/fonts/bricolage.woff2") format("woff2-variations");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url("home-v2/fonts/hanken.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url("home-v2/fonts/dmmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url("home-v2/fonts/dmmono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root {
  --bg: #0a0a0a;
  --bg-soft: #111111;
  --ink: #f4f1ea;
  --muted: rgba(244, 241, 234, 0.7);
  --line: rgba(244, 241, 234, 0.12);
  --line-strong: rgba(244, 241, 234, 0.22);
  --accent: #e23221;
  --accent-dark: #b72011;
  --max: 1360px;
  --radius: 8px;
}

/* Performance: reduce paint on off-screen sections */
section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Prevent layout shift on images */
img {
  width: auto;
  height: auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Anchor jumps land below the sticky nav + strip instead of under it */
  scroll-padding-top: 130px;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.16;
  pointer-events: none;
  z-index: -1;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 1001;
  padding: 0.8rem 1rem;
  background: #fff;
  color: #000;
  border-radius: 6px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

.page {
  position: relative;
  overflow-x: clip;
}

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

/* Secondary nav bar — studio identity strip (dzinr-inspired) */
.nav-strip {
  border-bottom: 1px solid var(--line);
  background: rgba(10, 10, 10, 0.96);
}

.nav-strip-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 36px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-strip-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nav-strip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(226, 50, 33, 0.6);
  animation: pulse-dot 2s ease infinite;
}

.nav-strip-right {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.nav-strip-right a {
  color: var(--muted);
  transition: color 0.2s;
}

.nav-strip-right a:hover { color: var(--ink); }

@media (max-width: 760px) {
  .nav-strip-right { display: none; }
  .nav-strip-inner { font-size: 0.56rem; }
}

.nav,
.hero,
.section-inner,
.footer-inner,
.mobile-panel {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Was 84px → 92px so the stacked Norline/Studio lockup has breathing room */
  min-height: 92px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}

/* Mark: sized to match the wordmark's optical height (a touch taller than
   the wordmark's pure ink so the arrow's tip + base hooks have breathing room
   inside the same lockup band). Slight negative vertical translate to align
   the arrow's optical center with the wordmark's optical center — the arrow
   has more visual weight at its top half. */
.brand-mark {
  width: 58px;
  height: 58px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  overflow: visible;
  transform: translateY(1px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Image-based brand lockup — cropped to bounding box, transparent bg.
   Sized to dominate the nav like a proper brand mark, not a thumbnail. */
.brand-logo {
  display: block;
  height: 58px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
  margin-left: 0;
}

.brand:hover .brand-logo {
  opacity: 0.85;
}

@media (max-width: 760px) {
  .brand-logo { height: 48px; }
}

@media (max-width: 520px) {
  .brand-logo { height: 42px; }
}

.brand:hover .brand-mark {
  transform: translateY(1px) rotate(-8deg) scale(1.06);
}

/* Brand wordmark — stacked lockup: Norline (italic serif) over Studio (bold sans).
   Both words center-aligned horizontally so Studio (wider sans) overhangs Norline
   on both sides — matching the reference logo. */
.brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--ink);
}

.brand-wordmark em { display: none; }

/* Brand lockup proportions match the reference: Studio is at full presence,
   not a tiny subtitle. Norline:Studio ≈ 1 : 0.78 of the cap-height, both bold. */
.bw-norline {
  font-family: "The Silver Editorial", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.6rem;
  letter-spacing: -0.005em;
  /* Natural line-height so descenders sit cleanly */
  line-height: 1;
  color: var(--ink);
  text-transform: none !important;
}

.bw-studio {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  /* Small breathing room — no overlap with Norline above */
  margin-top: 2px;
  text-transform: none !important;
}

@media (max-width: 520px) {
  .bw-norline { font-size: 1.4rem; }
  .bw-studio { font-size: 0.95rem; }
}

@media (max-width: 520px) {
  .bw-norline { font-size: 1.25rem; }
  .bw-studio { font-size: 0.76rem; }
}

@media (max-width: 520px) {
  .brand { font-size: 1.4rem; gap: 8px; }
  .brand-mark { width: 44px; height: 44px; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a,
.mobile-links a,
.footer-links a {
  position: relative;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-links a::after,
.mobile-links a::after,
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav-links a:hover::after,
.nav-links a.is-active::after,
.mobile-links a:hover::after,
.footer-links a:hover::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.btn:hover,
.menu-toggle:hover {
  transform: translateY(-1px);
}

/* Small button modifier — slightly tighter padding + smaller text for nav use */
.btn-sm {
  min-height: 38px;
  padding: 0.55rem 0.95rem;
  font-size: 0.6rem;
}

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #090909;
}

.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-secondary:hover {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}

/* WhatsApp accent button — uses brand green */
.btn-wa {
  background: #25D366;
  border-color: #25D366;
  color: #0a1a0e;
  gap: 9px;
  font-weight: 700;
}
.btn-wa:hover {
  background: #1ebe5a;
  border-color: #1ebe5a;
  color: #0a1a0e;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25);
}
.btn-wa-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0a1a0e;
  display: inline-block;
  animation: pulse-dot 2s ease infinite;
}

.menu-toggle {
  display: none;
  min-width: 88px;
}

.mobile-panel {
  display: none;
  padding: 0 0 16px;
}

.mobile-panel[hidden] {
  display: none;
}

.mobile-panel.is-open {
  display: block;
}

.mobile-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 18px;
}

.mobile-links {
  display: grid;
  gap: 18px;
  margin-bottom: 16px;
}

.hero-wrap {
  overflow: hidden;
}

.hero {
  min-height: calc(100vh - 84px);
  display: grid;
  align-content: center;
  gap: clamp(20px, 3vw, 40px);
  padding: 24px 0 32px;
}

.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 4px;
}

.eyebrow,
.section-label,
.meta-label,
.service-number {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Animated hero cycling word ─────────────────── */
.hero-headline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-static {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  /* Restored to the original aggressive size from norlinestudio.in */
  font-size: clamp(5rem, 17vw, 15.5rem);
  /* Was 0.78 / 0.88 — both too tight, letter caps got clipped by the
     nav above. 0.95 gives caps full breathing room without losing the
     dense vertical stack feel. */
  line-height: 0.95;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  margin-left: -0.03em;
  color: var(--ink);
  /* Buffer so cap-line never kisses the nav, descenders never touch the
     row below. */
  padding-top: 0.04em;
  padding-bottom: 0.02em;
}

.hero-animated-row {
  position: relative;
  display: block;
  /* Must be TALLER than .hero-word-slot font-size, otherwise overflow:hidden
     clips the cycling word's bottom. Was 15.6vw → font was 17vw → clipped.
     18vw gives the line-box (0.95 line-height × 17vw font = 16.15vw) clean
     room top + bottom. */
  height: clamp(5.2rem, 18vw, 16.5rem);
  overflow: hidden;
  margin-left: -0.03em;
}

.hero-word-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  /* Match .hero-static — original aggressive size */
  font-size: clamp(5rem, 17vw, 15.5rem);
  line-height: 0.95;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  font-weight: 700;
  /* Hard guard: cycling words must never wrap. If a word is longer than
     the container, it gets horizontally clipped by overflow:hidden on the
     parent — far better than vertical line-wrap clipping. */
  white-space: nowrap;
  /* spring-like cubic bezier mimicking stiffness:50 */
  transition:
    transform 0.65s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform, opacity;
}

/* states */
.hero-word-slot[data-state="below"] {
  transform: translateY(100%);
  opacity: 0;
}
.hero-word-slot[data-state="active"] {
  transform: translateY(0);
  opacity: 1;
}
.hero-word-slot[data-state="above"] {
  transform: translateY(-100%);
  opacity: 0;
}

/* accent colour on animated word */
.hero-word-slot { color: var(--accent); }

/* optional: subtle cursor blink after word */
.hero-word-slot[data-state="active"]::after {
  content: ".";
  color: var(--ink);
}

/* launch article badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: border-color 0.2s, color 0.2s;
  cursor: default;
  width: fit-content;
}
.hero-badge:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* hero sub-line under headline */
.hero-sub-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(0.6rem, 1.2vw, 1.2rem);
  flex-wrap: wrap;
}
.hero-sub-tag {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* ── Hero middle: statement + stats + divider ── */
.hero-middle {
  display: grid;
  gap: clamp(22px, 4vw, 40px);
  justify-items: start;
  width: 100%;
  max-width: 1080px;
  padding: clamp(16px, 4vw, 36px) 0;
}

.hero-statement {
  margin: 0;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 760px;
  letter-spacing: -0.005em;
}

.hero-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero-stat strong {
  display: block;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 8px;
}

.hero-stat strong em {
  font-style: normal;
  color: var(--accent);
}

.hero-stat span {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 4px;
}

.hero-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line-strong) 50%, transparent 100%);
}

.hero-divider-mark {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .hero-middle {
    gap: 22px;
    padding: 18px 0;
  }
  .hero-statement {
    font-size: 1rem;
    line-height: 1.55;
  }
  .hero-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    padding: 18px 0;
  }
  .hero-stat strong { font-size: 1.5rem; margin-bottom: 6px; }
  .hero-stat span { font-size: 0.52rem; letter-spacing: 0.14em; }
}

@media (max-width: 380px) {
  .hero-stat-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .hero {
    min-height: calc(100vh - 74px);
    align-content: start;
    gap: 18px;
    padding: 20px 0 24px;
  }
  .hero-top {
    flex-direction: column;
    gap: 4px;
    padding-bottom: 0;
  }
  .hero-headline {
    gap: 14px;
  }
  .hero-animated-row {
    height: clamp(4.6rem, 22vw, 9.2rem);
  }
  .hero-word-slot {
    font-size: clamp(4.6rem, 22vw, 9.2rem);
    line-height: 0.82;
  }
  .hero-static {
    font-size: clamp(4.6rem, 22vw, 9.2rem);
    line-height: 0.82;
  }
}

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1.3fr auto;
  gap: 28px;
  align-items: end;
  padding: 34px 0 30px;
  border-top: 1px solid var(--line);
}

.hero-services,
.hero-summary {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

.hero-summary {
  max-width: 560px;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  line-height: 1.28;
}

.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-scroll::after {
  content: "";
  width: 14px;
  height: 14px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.impact-band {
  min-height: 46vh;
  background: var(--accent);
  color: #fff;
  display: grid;
  align-items: end;
  overflow: hidden;
}

.impact-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 0;
}

.impact-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 36px;
}

.impact-top p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 520px;
}

.impact-word {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(8rem, 25vw, 22rem);
  line-height: 0.82;
  letter-spacing: -0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.98);
  transform: translateY(0.16em);
}

.section {
  border-top: 1px solid var(--line);
}

.section-inner {
  /* Was 86px → tightened to 56px for cleaner section transitions */
  padding: 56px 0;
}

.section-head {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.section-head h2 {
  margin: 0 0 14px;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(2.5rem, 5vw, 5.2rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

/* When the section-head has only an h2 (no left-column label), let the
   headline span the full width so it doesn't wrap inside the 220px column. */
#services .section-head {
  grid-template-columns: 1fr;
}
#services .section-head h2 {
  white-space: nowrap;
  font-size: clamp(2rem, 6.2vw, 5.6rem);
}

.section-head p {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 28px;
  align-items: start;
}

.about-statement {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(2.4rem, 4vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  margin: 0;
}

.about-copy {
  display: grid;
  gap: 18px;
}

.about-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.work-list {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.work-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  gap: 0;
  background: var(--bg);
}

.work-visual {
  min-height: 420px;
  position: relative;
  overflow: hidden;
}

.work-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.poster-a {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 45%),
    linear-gradient(180deg, #141414 0%, #0f0f0f 100%);
}

.poster-a::before {
  content: "NR";
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(8rem, 20vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.08em;
  color: var(--ink);
}

.poster-a::after {
  content: "";
  position: absolute;
  inset: auto 34px 34px auto;
  width: 220px;
  height: 220px;
  background: var(--accent);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.poster-b {
  background:
    linear-gradient(180deg, #111111 0%, #0d0d0d 100%);
}

.poster-b::before {
  content: "AI";
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(8rem, 20vw, 15rem);
  line-height: 0.78;
  letter-spacing: -0.08em;
  color: var(--ink);
}

.poster-b::after {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 18px, rgba(255,255,255,0.04) 18px, rgba(255,255,255,0.04) 19px),
    repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(255,255,255,0.04) 18px, rgba(255,255,255,0.04) 19px);
}

.poster-c {
  background:
    linear-gradient(180deg, #161616 0%, #111111 100%);
}

.poster-c::before {
  content: "WEB";
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(6rem, 18vw, 12rem);
  line-height: 0.82;
  letter-spacing: -0.08em;
  color: var(--ink);
}

.poster-c::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: var(--accent);
  clip-path: polygon(0 52%, 100% 0, 100% 100%, 0 100%);
}

.work-content {
  display: grid;
  align-content: space-between;
  gap: 28px;
  padding: 36px;
}

.work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--muted);
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.work-content h3 {
  margin: 0 0 16px;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.work-content p {
  margin: 0;
  max-width: 520px;
  color: var(--muted);
  line-height: 1.8;
}

.work-points {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.work-points li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.work-points strong {
  color: var(--ink);
}

.services-list {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.service-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 0.6fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  background: var(--bg);
  padding: 26px 0;
}

.service-row h3 {
  margin: 0;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.service-row p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.studio-strip {
  background: var(--accent);
  color: #fff;
}

.studio-strip .section-inner {
  padding-top: 64px;
  padding-bottom: 64px;
}

.strip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: end;
}

.strip-copy h2 {
  margin: 0 0 16px;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(2.6rem, 6vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

.strip-copy p {
  margin: 0;
  max-width: 720px;
  font-size: 1.04rem;
  line-height: 1.8;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-band {
  background: var(--bg-soft);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 28px;
  align-items: start;
}

.contact-copy h2 {
  margin: 0 0 18px;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(2.8rem, 6vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

.contact-copy p {
  margin: 0 0 24px;
  max-width: 620px;
  color: var(--muted);
  line-height: 1.8;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.contact-list {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.contact-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.contact-list strong {
  color: var(--ink);
}

.footer-wrap {
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 92px;
}

.footer-note,
.footer-side {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1100px) {
  .hero-bottom,
  .about-grid,
  .contact-grid,
  .strip-grid,
  .work-card {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-bottom: 18px;
  }

  .hero-scroll {
    justify-self: start;
  }

  .impact-top,
  .section-head {
    grid-template-columns: 1fr;
  }

  .service-row {
    grid-template-columns: 90px 1fr;
  }

  .service-row p {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .nav,
  .hero,
  .section-inner,
  .footer-inner,
  .mobile-panel,
  .impact-inner {
    width: min(var(--max), calc(100% - 20px));
  }

  .nav-links,
  .nav-actions .btn {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .nav {
    min-height: 74px;
  }

  .hero {
    min-height: calc(100vh - 74px);
  }

  .hero-summary {
    font-size: 1.22rem;
  }

  .impact-band {
    min-height: 32vh;
  }

  .impact-word {
    font-size: clamp(5rem, 32vw, 8.8rem);
  }

  .service-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .service-row p {
    grid-column: auto;
  }

  .work-visual {
    min-height: 280px;
  }

  .work-content {
    padding: 24px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 0;
  }
}

@media (max-width: 520px) {
  .hero-bottom,
  .contact-actions {
    gap: 14px;
  }

  .btn,
  .menu-toggle {
    width: 100%;
  }

  .nav-actions {
    width: 88px;
  }

  .impact-top p,
  .section-head p,
  .about-copy p,
  .contact-copy p,
  .strip-copy p {
    font-size: 0.96rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* ═══════════════════════════════════════════
   WebGL shader section
═══════════════════════════════════════════ */
.shader-section {
  position: relative;
  overflow: hidden;
  /* Was 520px → 420px so the shader doesn't dominate the column */
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--line);
}

#webgl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.shader-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
}

.shader-eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 18px;
  display: block;
}

.shader-title {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(3.4rem, 9vw, 9rem);
  line-height: 0.88;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 28px;
}

.shader-title em {
  color: var(--accent);
  font-style: normal;
}

.shader-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  pointer-events: all;
}

/* ═══════════════════════════════════════════
   Container scroll animation
═══════════════════════════════════════════ */
.scroll-showcase {
  border-top: 1px solid var(--line);
  overflow: hidden;
  padding: 80px 0 120px;
  background: var(--bg-soft);
}

.scroll-showcase-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

.scroll-header {
  text-align: center;
  margin-bottom: 52px;
}

.scroll-header .section-label {
  display: block;
  margin-bottom: 14px;
}

.scroll-header h2 {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(2.8rem, 6vw, 6rem);
  line-height: 0.88;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.scroll-header p {
  font-size: 1rem;
  color: var(--muted);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.75;
}

/* The 3D perspective container */
.scroll-perspective-wrap {
  perspective: 1200px;
  perspective-origin: 50% 40%;
}

.scroll-3d-card {
  width: min(900px, 100%);
  margin: 0 auto;
  border-radius: 22px;
  border: 3px solid #3a3a3a;
  background: #1a1a1a;
  padding: 10px;
  transform-origin: 50% 0%;
  will-change: transform;
  box-shadow:
    0 0 0 0 #0000004d,
    0 9px 20px #0000004a,
    0 37px 37px #00000042,
    0 84px 50px #00000026;
  transition: box-shadow 0.4s ease;
}

.scroll-3d-inner {
  border-radius: 14px;
  overflow: hidden;
  background: #0f0f0f;
  height: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.scroll-3d-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px;
  position: relative;
  overflow: hidden;
}

.scroll-3d-panel:first-child {
  border-right: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, #111 0%, #0c0c0c 100%);
}

.scroll-3d-panel:first-child::before {
  content: "NR/";
  position: absolute;
  top: 20px;
  left: 36px;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(5rem, 12vw, 9rem);
  line-height: 0.8;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.04);
}

.scroll-3d-panel:last-child {
  background: var(--accent);
  flex-direction: column;
  justify-content: space-between;
  padding: 36px;
}

.scroll-panel-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}

.scroll-panel-title {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.scroll-panel-title-white {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.scroll-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 24px;
}

.scroll-stat {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 12px;
}

.scroll-stat-num {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
}

.scroll-stat-desc {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.scroll-red-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scroll-red-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 99px;
  padding: 5px 10px;
  width: fit-content;
}

.scroll-red-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}

.scroll-red-badge-text {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

.scroll-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.scroll-cta-arrow {
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.scroll-cta-arrow:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.7);
}

@media (max-width: 760px) {
  .scroll-3d-inner {
    grid-template-columns: 1fr;
    height: auto;
  }
  .scroll-3d-panel {
    min-height: 220px;
  }
  .shader-section {
    height: 420px;
  }
}

/* ══════════════════════════════════════════════
   Floating dock menu
══════════════════════════════════════════════ */
.gradient-dock {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  align-items: center;
}

.dock-item {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s, box-shadow 0.3s;
  overflow: hidden;
  text-decoration: none;
  flex-shrink: 0;
}

.dock-item:hover {
  width: 120px;
  border-radius: 20px;
  box-shadow: 0 0 20px 4px var(--dock-glow, rgba(169, 85, 255, 0.5));
}

.dock-item-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(45deg, var(--gfrom), var(--gto));
  opacity: 0;
  transition: opacity 0.35s;
}

.dock-item:hover .dock-item-bg { opacity: 1; }

.dock-item-blur {
  position: absolute;
  inset: 0;
  top: 8px;
  border-radius: inherit;
  background: linear-gradient(45deg, var(--gfrom), var(--gto));
  filter: blur(14px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.35s;
}

.dock-item:hover .dock-item-blur { opacity: 0.5; }

.dock-item-icon {
  position: relative;
  z-index: 2;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
  display: flex;
  align-items: center;
}

.dock-item:hover .dock-item-icon {
  transform: scale(0);
  opacity: 0;
}

.dock-item-label {
  position: absolute;
  z-index: 2;
  color: #fff;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s, opacity 0.2s 0.1s;
}

.dock-item:hover .dock-item-label {
  transform: scale(1);
  opacity: 1;
}

/* ══════════════════════════════════════════════
   Team showcase
══════════════════════════════════════════════ */
.team-section {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.team-section-head {
  margin-bottom: 40px;
}

.team-section-head .section-label {
  margin-bottom: 10px;
}

.team-section-head h3 {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0 0 12px;
}

.team-section-head p {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.7;
}

.team-layout {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Photo grid */
.team-photo-grid {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.team-photo-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-photo-col:nth-child(2) { margin-top: 52px; }
.team-photo-col:nth-child(3) { margin-top: 26px; }

.team-photo {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.35s ease;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
  filter: grayscale(1) brightness(0.75);
  transition: filter 0.45s ease;
}

/* Frame the real founder photos — both use cover for matching proportions */
.team-photo[data-id="1"] img { object-position: 50% 58%; }  /* Tejomay — pulled down, less ceiling */
.team-photo[data-id="2"] img { object-position: 50% 13%; }  /* Reshabh */
.team-photo[data-id="3"] img { object-position: 50% 18%; }  /* Yashvardhan */
/* Rohan's studio portrait is taller than the others — `contain` shows the
   whole frame (head + sweater) inside the photo container without cropping. */
.team-photo[data-id="4"] img {
  object-fit: contain;
  object-position: 50% 50%;
  background: #0a0a0a;
}

.team-photo.is-active img { filter: grayscale(0) brightness(1); }
.team-photo.is-dimmed { opacity: 0.5; }

.team-photo-col:nth-child(1) .team-photo { width: 148px; height: 160px; }
.team-photo-col:nth-child(2) .team-photo { width: 164px; height: 176px; }
.team-photo-col:nth-child(3) .team-photo { width: 154px; height: 166px; }

/* Name list */
.team-list { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 18px; }

.team-row {
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.team-row.is-dimmed { opacity: 0.4; }

.team-row-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-row-bar {
  width: 14px;
  height: 11px;
  border-radius: 4px;
  background: rgba(244, 241, 234, 0.2);
  transition: width 0.3s ease, background 0.3s ease;
  flex-shrink: 0;
}

.team-row.is-active .team-row-bar {
  width: 20px;
  background: var(--ink);
}

.team-row-name-text {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: rgba(244, 241, 234, 0.7);
  transition: color 0.25s;
  line-height: 1;
}

.team-row.is-active .team-row-name-text { color: var(--ink); }

.team-row-socials {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}

.team-row.is-active .team-row-socials {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

.team-social-btn {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(244, 241, 234, 0.08);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 10px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
}

.team-social-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.team-row-role {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
  padding-left: 26px;
  opacity: 0.6;
}

@media (max-width: 900px) {
  .team-layout { flex-direction: column; gap: 32px; }
  .team-photo-grid { overflow-x: auto; }
  .team-photo-col:nth-child(1) .team-photo { width: 110px; height: 120px; }
  .team-photo-col:nth-child(2) .team-photo { width: 120px; height: 132px; }
  .team-photo-col:nth-child(3) .team-photo { width: 114px; height: 124px; }
}

/* ══════════════════════════════════════════════
   3D folder · work portfolio
══════════════════════════════════════════════ */
.folders-section {
  /* Was 64px / 56px → 32px / 36px for tighter join with shader above */
  margin-top: 32px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

.folders-head {
  margin-bottom: 48px;
  text-align: center;
}

.folders-head .section-label { margin-bottom: 10px; display: block; }
.folders-head h3 {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0;
}

.folders-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.folder-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 260px;
  min-height: 300px;
  padding: 32px 24px;
  border-radius: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: border-color 0.4s, box-shadow 0.4s;
  perspective: 1000px;
}

.folder-card:hover {
  border-color: rgba(226, 50, 33, 0.35);
  box-shadow: 0 0 40px rgba(226, 50, 33, 0.08);
}

.folder-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 70%, var(--accent) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.folder-card:hover .folder-glow { opacity: 0.06; }

.folder-visual {
  position: relative;
  width: 180px;
  height: 150px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Folder back */
.f-back {
  position: absolute;
  width: 120px;
  height: 88px;
  background: #b75c10;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.folder-card:hover .f-back { transform: rotateX(-15deg); }

/* Folder tab */
.f-tab {
  position: absolute;
  width: 44px;
  height: 14px;
  background: #9a4c0c;
  border-radius: 5px 5px 0 0;
  top: calc(50% - 44px - 10px);
  left: calc(50% - 60px + 14px);
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.folder-card:hover .f-tab { transform: rotateX(-25deg) translateY(-2px); }

/* Cards inside folder */
.f-cards-wrap {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.f-mini-card {
  position: absolute;
  width: 88px;
  height: 116px;
  border-radius: 9px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  top: -64px;
  left: -44px;
  transform-origin: bottom center;
  transition: all 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  cursor: pointer;
}

.f-mini-card img { width: 100%; height: 100%; object-fit: contain; display: block; background: #0a0a0a; }
.f-mini-card .f-mini-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.f-mini-card .f-mini-title {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 8px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-card:hover .f-mini-card { opacity: 1; }

.f-mini-card:nth-child(1) { transform: translateY(0) translateX(-30px) rotate(-12deg) scale(0.5); }
.f-mini-card:nth-child(2) { transform: translateY(0) translateX(0px) rotate(0deg) scale(0.5); z-index: 3; }
.f-mini-card:nth-child(3) { transform: translateY(0) translateX(30px) rotate(12deg) scale(0.5); }

.folder-card:hover .f-mini-card:nth-child(1) { transform: translateY(-92px) translateX(-82px) rotate(-13deg) scale(1); }
.folder-card:hover .f-mini-card:nth-child(2) { transform: translateY(-92px) translateX(0px) rotate(0deg) scale(1); }
.folder-card:hover .f-mini-card:nth-child(3) { transform: translateY(-92px) translateX(82px) rotate(13deg) scale(1); }

/* Folder front */
.f-front {
  position: absolute;
  width: 120px;
  height: 88px;
  background: #d46a12;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  top: calc(50% - 44px + 4px);
  z-index: 4;
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.f-shine {
  position: absolute;
  width: 120px;
  height: 88px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 55%);
  top: calc(50% - 44px + 4px);
  z-index: 5;
  pointer-events: none;
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.folder-card:hover .f-front { transform: rotateX(25deg) translateY(8px); }
.folder-card:hover .f-shine { transform: rotateX(25deg) translateY(8px); }

.folder-title {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-transform: uppercase;
  margin: 8px 0 4px;
  transition: transform 0.3s;
}

.folder-card:hover .folder-title { transform: translateY(4px); }

.folder-count {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.folder-hint {
  position: absolute;
  bottom: 14px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.5;
  transition: opacity 0.3s, transform 0.3s;
}

/* "+N more" pill — shown on folders with more than 3 previews. Sits at the
   top-right of the cards stack so the user knows the lightbox holds more. */
.f-more-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  padding: 5px 10px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s, transform 0.35s;
  pointer-events: none;
}

.folder-card:hover .f-more-pill {
  opacity: 1;
  transform: translateY(0);
}

.folder-card:hover .folder-hint { opacity: 0; transform: translateY(8px); }

/* Lightbox */
.folder-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.folder-lightbox.is-open { opacity: 1; pointer-events: all; }

.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.lb-container {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.folder-lightbox.is-open .lb-container { transform: scale(1); }

.lb-image-wrap { position: relative; overflow: hidden; }
.lb-images {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.lb-images img {
  min-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  background: #050505;
}

.lb-footer {
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-soft);
}

.lb-title {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.lb-nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}

.lb-dot.is-active { background: var(--ink); transform: scale(1.2); }

.lb-close-btn, .lb-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.lb-close-btn:hover, .lb-arrow:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.lb-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}

.lb-arrow-left {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.lb-arrow-right {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* ══════════════════════════════════════════════
   Gradient skew cards · services
══════════════════════════════════════════════ */
.skew-cards-section {
  padding: 56px 0 0;
  margin-top: 56px;
  border-top: 1px solid var(--line);
}

.skew-cards-head {
  margin-bottom: 44px;
}

.skew-cards-head .section-label { margin-bottom: 10px; }
.skew-cards-head h3 {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0;
}

.skew-cards-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  margin: 0 -8px;
}

.skew-card {
  position: relative;
  width: 300px;
  height: 380px;
  margin: 20px 16px;
  transition: all 0.5s ease;
}

/* Skewed gradient panels */
.skew-card-stripe {
  position: absolute;
  top: 0;
  left: 44px;
  width: 50%;
  height: 100%;
  border-radius: 10px;
  transform: skewX(15deg);
  transition: all 0.5s ease;
}

.skew-card:hover .skew-card-stripe {
  transform: skewX(0deg);
  left: 18px;
  width: calc(100% - 80px);
}

.skew-card-blur {
  position: absolute;
  top: 0;
  left: 44px;
  width: 50%;
  height: 100%;
  border-radius: 10px;
  transform: skewX(15deg);
  filter: blur(28px);
  transition: all 0.5s ease;
  opacity: 0.7;
}

.skew-card:hover .skew-card-blur {
  transform: skewX(0deg);
  left: 18px;
  width: calc(100% - 80px);
}

/* Animated blob spheres */
.skew-card-blob1,
.skew-card-blob2 {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 10px;
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
  z-index: 1;
  pointer-events: none;
}

.skew-card-blob1 { top: 0; left: 0; }
.skew-card-blob2 { bottom: 0; right: 0; transition-delay: 0.1s; }

.skew-card:hover .skew-card-blob1 {
  top: -44px;
  left: 48px;
  width: 90px;
  height: 90px;
  opacity: 1;
  animation: blob-float 2s ease-in-out infinite;
}

.skew-card:hover .skew-card-blob2 {
  bottom: -44px;
  right: 48px;
  width: 90px;
  height: 90px;
  opacity: 1;
  animation: blob-float 2s ease-in-out infinite 1s;
}

@keyframes blob-float {
  0%, 100% { transform: translateY(8px); }
  50% { transform: translateY(-8px); }
}

/* Content box */
.skew-card-content {
  position: relative;
  z-index: 2;
  left: 0;
  padding: 24px 32px;
  height: 100%;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  border-radius: 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: all 0.5s ease;
  border: 1px solid rgba(255,255,255,0.07);
}

.skew-card:hover .skew-card-content {
  left: -20px;
  padding: 44px 32px;
}

.skew-card-num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 10px;
}

/* "Norline" eyebrow on skew-cards — DM Serif Display Italic */
.skew-card-eyebrow {
  font-family: "The Silver Editorial", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1;
}

.skew-card-title {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: none;
  line-height: 0.95;
  margin-bottom: 10px;
}

.skew-card-desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin-bottom: 16px;
}

.skew-card-btn {
  display: inline-block;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy, #0a0a0a);
  background: #fff;
  padding: 8px 14px;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.2s;
  width: fit-content;
}

.skew-card-btn:hover { background: #ffe066; }


/* ══════════════════════════════════════════════
   Work section
══════════════════════════════════════════════ */

/* Marquee strip */
.work-marquee {
  margin: 0 0 56px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 6%, transparent 94%, var(--bg) 100%);
}

.work-marquee::before,
.work-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.work-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.work-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg), transparent);
}

.work-marquee-track {
  display: flex;
  gap: 48px;
  animation: marquee 32s linear infinite;
  width: max-content;
  will-change: transform;
}

.work-marquee-track span {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.work-marquee-track span em {
  font-style: normal;
  color: var(--accent);
  margin-right: 4px;
}

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

@media (prefers-reduced-motion: reduce) {
  .work-marquee-track { animation: none; }
}

/* Featured project (large hero card) */
.work-featured {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-soft);
  position: relative;
  transition: border-color 0.45s ease;
}

.work-featured:hover {
  border-color: rgba(226, 50, 33, 0.4);
}

.wf-visual {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}

.wf-mesh {
  position: absolute;
  inset: -15%;
  z-index: 0;
  filter: blur(28px) saturate(1.15);
  transform: scale(1) translate(0, 0);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wf-visual[data-mesh="lumnia"] .wf-mesh {
  background:
    radial-gradient(circle at 22% 18%, #ff8b7a 0%, transparent 38%),
    radial-gradient(circle at 78% 32%, #e23221 0%, transparent 42%),
    radial-gradient(circle at 50% 80%, #4a0a04 0%, transparent 55%),
    radial-gradient(circle at 92% 92%, #ffb87a 0%, transparent 30%),
    #160604;
}

.work-featured:hover .wf-mesh {
  transform: scale(1.06);
}

.wf-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  z-index: 1;
}

.wf-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

.wf-corner-tl,
.wf-corner-tr {
  position: absolute;
  top: 24px;
  z-index: 4;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wf-corner-tl { left: 24px; }
.wf-corner-tr { right: 24px; color: rgba(255,255,255,0.7); }

.wf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: #fff;
}

.wf-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse-dot 2s ease infinite;
}

.wf-tags {
  position: absolute;
  top: 70px;
  right: 24px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.wf-tag {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 4px 9px;
  border-radius: 4px;
}

.wf-mark-wrap {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  z-index: 4;
  color: #fff;
}

.wf-mark {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.85;
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

.wf-mark-rule {
  margin: 14px 0 10px;
  width: 56px;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.work-featured:hover .wf-mark-rule {
  transform: scaleX(2.2);
}

.wf-submark {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.wf-content {
  display: grid;
  align-content: space-between;
  gap: 28px;
  padding: 44px 44px 40px;
}

.wf-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.wf-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted);
}

.wf-title {
  margin: 14px 0 16px;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.wf-desc {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 480px;
}

.wf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.wf-stat strong {
  display: block;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}

.wf-stat span {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.wf-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  width: fit-content;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 0.3s, border-color 0.3s, color 0.3s, padding 0.3s;
}

.wf-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  padding-right: 28px;
}

.wf-link-arrow {
  display: inline-block;
  transition: transform 0.3s;
}

.wf-link:hover .wf-link-arrow {
  transform: translateX(5px);
}

/* Tile grid */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 56px;
}

.work-tile {
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-soft);
  cursor: pointer;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  text-decoration: none;
  color: inherit;
}

.work-tile:hover {
  border-color: rgba(226, 50, 33, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.wt-visual {
  position: relative;
  height: 320px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}

.wt-mesh {
  position: absolute;
  inset: -10%;
  z-index: 0;
  filter: blur(28px) saturate(1.15);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.work-tile:hover .wt-mesh {
  transform: scale(1.08);
}

.work-tile[data-mesh="ai"] .wt-mesh {
  background:
    radial-gradient(circle at 25% 28%, #a955ff 0%, transparent 38%),
    radial-gradient(circle at 78% 55%, #ea51ff 0%, transparent 35%),
    radial-gradient(circle at 50% 92%, #1c0438 0%, transparent 50%),
    #07041a;
}

.work-tile[data-mesh="web"] .wt-mesh {
  background:
    radial-gradient(circle at 28% 22%, #56CCF2 0%, transparent 38%),
    radial-gradient(circle at 76% 60%, #2F80ED 0%, transparent 38%),
    radial-gradient(circle at 50% 95%, #04122a 0%, transparent 55%),
    #03081a;
}

.work-tile[data-mesh="dash"] .wt-mesh {
  background:
    radial-gradient(circle at 28% 28%, #FFB088 0%, transparent 38%),
    radial-gradient(circle at 76% 60%, #FF5E62 0%, transparent 38%),
    radial-gradient(circle at 50% 92%, #2a0a08 0%, transparent 55%),
    #100806;
}

.work-tile[data-mesh="motion"] .wt-mesh {
  background:
    radial-gradient(circle at 28% 30%, #80FF72 0%, transparent 35%),
    radial-gradient(circle at 76% 58%, #00d4aa 0%, transparent 38%),
    radial-gradient(circle at 50% 94%, #042a1c 0%, transparent 50%),
    #04140e;
}

.wt-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 36px 36px;
  z-index: 1;
}

.wt-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  opacity: 0.16;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

.wt-mark {
  position: absolute;
  bottom: 18px;
  left: 22px;
  z-index: 3;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.88;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.work-tile:hover .wt-mark {
  transform: translateX(6px);
}

.wt-num {
  position: absolute;
  top: 18px;
  left: 22px;
  z-index: 3;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.65);
}

.wt-arrow-large {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.work-tile:hover .wt-arrow-large {
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(-45deg) scale(1.05);
}

.wt-content {
  padding: 22px 24px 26px;
  display: grid;
  gap: 12px;
}

.wt-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.wt-meta span:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
  color: rgba(244, 241, 234, 0.3);
}

.wt-title {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}

@media (max-width: 1100px) {
  .work-featured { grid-template-columns: 1fr; }
  .wf-visual { min-height: 420px; }
}

@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; }
  .wf-content { padding: 28px 22px 30px; }
  .wf-stats { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .wf-stat strong { font-size: 1.3rem; }
  .wt-visual { height: 260px; }
}


/* ══════════════════════════════════════════════
   Work tile hover videos
══════════════════════════════════════════════ */
.wt-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  filter: saturate(1.1) brightness(0.85);
}

.work-tile.is-hover .wt-video {
  opacity: 0.92;
  transform: scale(1);
}

.work-tile.is-hover .wt-mesh {
  opacity: 0.5;
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.work-tile.is-hover .wt-grid {
  opacity: 0.45;
  transition: opacity 0.6s ease;
}

.work-tile.is-hover .wt-mark {
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.7);
}

/* ══════════════════════════════════════════════
   Custom cursor
══════════════════════════════════════════════ */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9000;
  border-radius: 50%;
  will-change: transform;
  mix-blend-mode: difference;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: #fff;
  transition: opacity 0.2s ease;
}

.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: width 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.2s ease,
              background 0.2s ease,
              opacity 0.25s ease;
}

.cursor-ring.is-hover {
  width: 68px;
  height: 68px;
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
}

.cursor-ring.is-clicking {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.18);
}

.cursor-dot.is-hidden,
.cursor-ring.is-hidden {
  opacity: 0;
}

@media (max-width: 760px), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none; }
}

body.has-cursor,
body.has-cursor a,
body.has-cursor button,
body.has-cursor [role="button"],
body.has-cursor input,
body.has-cursor textarea,
body.has-cursor .work-tile,
body.has-cursor .folder-card,
body.has-cursor .skew-card,
body.has-cursor .dock-item,
body.has-cursor .team-photo,
body.has-cursor .team-row {
  cursor: none;
}

/* ══════════════════════════════════════════════
   Word reveal on scroll (for headlines)
══════════════════════════════════════════════ */
.word-reveal {
  display: inline-block;
}

.word-reveal .word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.22em;
  /* Bumped from 0.05em → 0.28em so descenders (g, y, p, j, q) in italic
     serif headlines aren't clipped at the bottom of the word-wrap. */
  padding-bottom: 0.28em;
}

.word-reveal .word-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s ease;
}

.word-reveal.is-visible .word-inner {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .word-reveal .word-inner { transform: none; opacity: 1; }
}

/* ══════════════════════════════════════════════
   Magnetic effect helper
══════════════════════════════════════════════ */
[data-magnetic] {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-magnetic] { transform: none !important; }
}


/* ══════════════════════════════════════════════
   Scroll progress indicator
══════════════════════════════════════════════ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #ff7b6f);
  box-shadow: 0 0 8px rgba(226, 50, 33, 0.6);
  z-index: 1500;
  pointer-events: none;
  transition: width 0.08s linear;
}

/* ══════════════════════════════════════════════
   Brand intro overlay
══════════════════════════════════════════════ */
.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  will-change: transform;
}

.brand-intro.is-done {
  pointer-events: none;
  animation: intro-out 0.82s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.brand-intro.is-hidden { display: none; }

@keyframes intro-out {
  to { transform: translateY(-100%); }
}

/* soft red glow behind the lockup */
.intro-glow {
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(760px, 92vw);
  height: min(760px, 92vw);
  transform: translate(-50%, -50%) scale(0.72);
  background: radial-gradient(circle, rgba(226, 50, 33, 0.22), transparent 62%);
  opacity: 0;
  z-index: 1;
  animation: intro-glow-in 1.5s ease 0.35s forwards;
}

@keyframes intro-glow-in {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Lockup — text rendering matching the new norline-logo.png style:
   italic "Norline" top + bold sans cycling word below. */
.intro-lockup {
  position: relative;
  z-index: 3;
  padding: 0 20px;
}

.intro-word {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  animation: intro-word-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

@keyframes intro-word-in {
  to { opacity: 1; transform: translateY(0); }
}

/* "Norline" — italic Silver Editorial, tight tracking, matches hero lockup */
.iw-name {
  font-family: "The Silver Editorial", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.08em;
  text-transform: none;
  color: #ffffff;
  padding-left: 0.06em;
}

/* Cycling word slot — Inter Bold, right-aligned with Norline (same as hero) */
.iw-cycle {
  position: relative;
  display: block;
  align-self: flex-end;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 8.5vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: none;
  height: 1em;
  /* Was overflow: hidden — clipped the rightward overhang of Studio/Design/
     Media, slicing the final letter (the "o" of Studio etc.). Now using
     clip-path to clip only vertically (for the slide-up animation) while
     letting the slots overhang horizontally without being chopped. */
  overflow: visible;
  clip-path: inset(0 -100vw);
  min-width: 3em;
  margin-top: 0.04em;
}

.iw-cycle-slot {
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(110%);
  will-change: transform, opacity;
}

@keyframes iw-cycle-through {
  0%   { transform: translateY(110%); opacity: 0; }
  18%  { transform: translateY(0);    opacity: 1; }
  72%  { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(-110%); opacity: 0; }
}

@keyframes iw-cycle-final {
  0%   { transform: translateY(110%); opacity: 0; }
  40%  { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* Per-slot horizontal position. Studio / Design / Media shifted further
   right so their LEFT edge starts well into Norline (matching the brand
   logo proportions). AI stays flush with Norline's right edge. */
.iw-cycle-slot[data-i="0"] { right: clamp(-6.5rem, -8.5vw, -4rem); }   /* Studio */
.iw-cycle-slot[data-i="1"] { right: clamp(-9rem,   -12vw, -5.5rem); }  /* Design */
.iw-cycle-slot[data-i="2"] { right: clamp(-9rem,   -12vw, -5.5rem); }  /* Media */
.iw-cycle-slot[data-i="3"] { right: 0; }                                /* AI */
.iw-cycle-slot[data-i="4"] { right: clamp(-6.5rem, -8.5vw, -4rem); }   /* Studio (final) */

/* Sequence: Studio → Design → Media → AI → Studio (final hold).
   Slower pace: each slot 1.1s, fires 0.95s after the previous.
   Total timeline: 0.8s start + 4 × 0.95s + 1.1s final hold ≈ 5.7s. */
.iw-cycle-slot[data-i="0"] {
  color: #f4f1ea;
  animation: iw-cycle-through 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}
.iw-cycle-slot[data-i="1"] {
  color: #00CFFF;
  animation: iw-cycle-through 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.75s forwards;
}
.iw-cycle-slot[data-i="2"] {
  color: #FF2D6B;
  animation: iw-cycle-through 1.1s cubic-bezier(0.16, 1, 0.3, 1) 2.7s forwards;
}
.iw-cycle-slot[data-i="3"] {
  color: #00FF88;
  animation: iw-cycle-through 1.1s cubic-bezier(0.16, 1, 0.3, 1) 3.65s forwards;
}
.iw-cycle-slot[data-i="4"] {
  color: #f4f1ea;
  animation: iw-cycle-final 1.1s cubic-bezier(0.16, 1, 0.3, 1) 4.6s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .iw-cycle-slot { animation: none !important; }
  .iw-cycle-slot[data-i="4"] {
    opacity: 1;
    transform: translateY(0);
  }
}

.intro-skip {
  position: absolute;
  bottom: 26px;
  right: 26px;
  z-index: 5;
  background: transparent;
  border: 1px solid rgba(244, 241, 234, 0.2);
  color: rgba(244, 241, 234, 0.55);
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  animation: intro-skip-in 0.5s ease 0.9s forwards;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.intro-skip:hover {
  border-color: var(--accent);
  color: #fff;
  background: rgba(226, 50, 33, 0.14);
}

@keyframes intro-skip-in {
  to { opacity: 0.85; transform: translateY(0); }
}

body.intro-active {
  overflow: hidden;
  height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  .brand-intro { display: none !important; }
}

/* ══════════════════════════════════════════════
   Better focus states for keyboard users
══════════════════════════════════════════════ */
:focus { outline: none; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.menu-toggle:focus-visible,
.dock-item:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ══════════════════════════════════════════════
   ZOOM REEL — Scroll-driven video parallax
   (zoom-parallax pattern adapted for videos)
══════════════════════════════════════════════ */
.zoom-reel-section {
  position: relative;
  /* Was 300vh — trimmed to 200vh so the scroll-zoom finishes faster
     and there's less dead black space before the next section. */
  height: 200vh;
  background: #050505;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.zoom-reel-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #050505;
  isolation: isolate;
}

.zoom-reel-spotlight {
  position: absolute;
  top: -50%;
  left: 50%;
  width: 130vmin;
  height: 130vmin;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at center, rgba(226, 50, 33, 0.14) 0%, transparent 55%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.zoom-reel-label {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  pointer-events: none;
  white-space: nowrap;
}

.zoom-reel-label-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(226, 50, 33, 0.7);
  animation: pulse-dot 2s ease infinite;
}

.zoom-reel-meta {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.zoom-reel-meta strong {
  color: #fff;
  font-weight: 500;
  margin-right: 4px;
}

/* Each video tile */
.zoom-reel-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  z-index: 1;
}

.zoom-reel-inner {
  position: relative;
  height: 25vh;
  width: 25vw;
  overflow: hidden;
  border-radius: 6px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.4);
}

.zoom-reel-inner video,
.zoom-reel-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0a0a0a;
  filter: saturate(1.05) brightness(0.92);
}

/* Tag on each tile */
.zr-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 2;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* Per-tile position offsets — sized to match each video's true aspect ratio
   Kia (1920×1080) = LANDSCAPE 16:9
   AI Avatar, Content Clipping, Concert Edit (720×1280) = PORTRAIT 9:16 */
.zr-pos-0 { height: 24vh; width: 32vw; }                              /* Kia · landscape 16:9 center */
.zr-pos-1 { top: -28vh; left: 6vw; height: 38vh; width: 14vw; }       /* AI Avatar · portrait 9:16 */
.zr-pos-2 { top: -8vh; left: -27vw; height: 22vh; width: 9vw; }       /* Code 17 · portrait cover */
.zr-pos-3 { left: 26vw; height: 36vh; width: 13vw; }                  /* Content Clipping · portrait 9:16 */
.zr-pos-4 { top: 28vh; left: 8vw; height: 20vh; width: 8vw; }         /* Monetaria · portrait cover */
.zr-pos-5 { top: 22vh; left: -22vw; height: 32vh; width: 12vw; }      /* Concert Edit · portrait 9:16 */
.zr-pos-6 { top: 29vh; left: 25vw; height: 19vh; width: 8vw; }        /* Aalishan Diamonds · portrait cover */

@media (max-width: 760px) {
  .zoom-reel-section { height: 240vh; }
  .zoom-reel-label { font-size: 0.54rem; padding: 6px 12px; top: 16px; }
  .zoom-reel-meta { font-size: 0.52rem; bottom: 14px; left: 14px; right: 14px; }
  .zr-tag { font-size: 0.44rem; padding: 3px 6px; }

  /* Mobile: rescale all tile positions so nothing overflows or gets cut off */
  .zoom-reel-inner { border-radius: 4px; }
  .zr-pos-0 { height: 22vw; width: 60vw; }
  .zr-pos-1 { top: -30vw; left: 5vw; height: 42vw; width: 22vw; }
  .zr-pos-2 { top: -10vw; left: -26vw; height: 26vw; width: 14vw; }
  .zr-pos-3 { left: 30vw; height: 40vw; width: 20vw; }
  .zr-pos-4 { top: 26vw; left: 8vw; height: 22vw; width: 12vw; }
  .zr-pos-5 { top: 22vw; left: -20vw; height: 34vw; width: 18vw; }
  .zr-pos-6 { top: 28vw; left: 28vw; height: 20vw; width: 13vw; }
}

@media (prefers-reduced-motion: reduce) {
  .zoom-reel-section { height: auto; }
  .zoom-reel-sticky {
    position: relative;
    height: auto;
    padding: 60px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
  }
  .zoom-reel-item {
    position: relative;
    height: auto;
    transform: none !important;
  }
  .zoom-reel-inner {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 200px !important;
  }
  .zoom-reel-label,
  .zoom-reel-meta { display: none; }
}

/* ══════════════════════════════════════════════
   PARALLAX HOVER — Project index (Bachoo-style)
══════════════════════════════════════════════ */
.parallax-section { position: relative; }

.parallax-wrap {
  position: relative;
  isolation: isolate;
}

.parallax-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.parallax-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) 80px 40px;
  align-items: center;
  gap: 20px;
  padding: 26px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  color: var(--ink);
  transition: padding 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
}

.parallax-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-soft);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.parallax-row:hover {
  padding-left: 32px;
  padding-right: 32px;
}

.parallax-row:hover::before {
  opacity: 1;
}

.parallax-row-num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  transition: color 0.3s ease;
}

.parallax-row:hover .parallax-row-num {
  color: var(--accent);
}

.parallax-row-name {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  line-height: 1;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
  transform-origin: left center;
}

.parallax-row:hover .parallax-row-name {
  transform: translateX(8px);
  color: var(--ink);
}

.parallax-row-tag {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  transition: color 0.3s ease;
}

.parallax-row:hover .parallax-row-tag { color: var(--ink); }

.parallax-row-year {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-align: right;
}

.parallax-row-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--muted);
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  justify-self: end;
}

.parallax-row:hover .parallax-row-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: rotate(-45deg) scale(1.1);
}

/* Floating cursor-following preview */
.parallax-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 240px;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0) scale(0.85);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}

.parallax-preview.is-active {
  opacity: 1;
}

.parallax-preview-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  isolation: isolate;
}

.parallax-preview-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.parallax-preview-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--tint, var(--accent)) 0%, transparent 60%);
  mix-blend-mode: overlay;
  opacity: 0.45;
  z-index: 1;
}

.parallax-preview-label {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 2;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 9px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

@media (max-width: 900px) {
  .parallax-row {
    grid-template-columns: 60px minmax(0, 1fr) 40px;
    gap: 14px;
    padding: 22px 12px;
  }
  .parallax-row-tag,
  .parallax-row-year { display: none; }
  .parallax-row-name { font-size: clamp(1.7rem, 8vw, 2.6rem); }
}

/* Hide cursor-following preview on touch devices */
@media (hover: none), (pointer: coarse) {
  .parallax-preview { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-preview { display: none !important; }
  .parallax-row:hover .parallax-row-name { transform: none; }
  .parallax-row:hover { padding-left: 16px; padding-right: 16px; }
}

/* ══════════════════════════════════════════════
   MEGA MARQUEE — Giant rotating headline strip
══════════════════════════════════════════════ */
.mega-marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px) 0;
  background: var(--bg);
  position: relative;
}

.mega-marquee::before,
.mega-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.mega-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.mega-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg), transparent);
}

.mega-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  width: max-content;
  animation: mega-marquee 36s linear infinite;
  will-change: transform;
}

.mega-marquee-track span {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(3.4rem, 9vw, 8.5rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.mega-marquee-track .mm-accent { color: var(--accent); }

.mega-marquee-track .mm-dot {
  color: var(--accent);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1;
  transform: translateY(-0.15em);
  font-weight: 400;
}

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

.mega-marquee:hover .mega-marquee-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .mega-marquee-track { animation: none; }
}

@media (max-width: 760px) {
  .mega-marquee { padding: 22px 0; }
}

/* ══════════════════════════════════════════════
   SCROLL-TILTED GRID — editorial "field of stills"
   Tiles rise tilted, settle into focus, tilt away
══════════════════════════════════════════════ */
.tilted-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 44px);
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 2vh 16px 4vh;
}

.tg-figure {
  position: relative;
  z-index: 10;
  margin: 0;
  perspective: 900px;
}

.tg-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0.375rem;
  background: var(--bg-soft);
  will-change: filter, transform;
}

.tg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .tg-tile { filter: none !important; transform: none !important; }
  .tg-img  { transform: none !important; }
}

/* ══════════════════════════════════════════════
   PROCESS — How we work (vertical timeline)
══════════════════════════════════════════════ */
.process-section { position: relative; }

.process-track {
  position: relative;
  display: grid;
  gap: 28px;
  padding: 16px 0 24px;
}

.process-line {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 36px;
  width: 1px;
  background: var(--line-strong);
  z-index: 0;
  overflow: hidden;
}

.process-line-fill {
  position: absolute;
  inset: 0 0 60% 0;
  background: linear-gradient(180deg, var(--accent) 0%, transparent 100%);
  filter: drop-shadow(0 0 6px rgba(226, 50, 33, 0.5));
  animation: process-line-drip 5s ease-in-out infinite;
}

@keyframes process-line-drip {
  0%, 100% { inset: 0 0 75% 0; opacity: 0.7; }
  50%      { inset: 0 0 10% 0; opacity: 1; }
}

.process-step {
  display: grid;
  grid-template-columns: 72px minmax(0, 200px) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  padding: 28px 28px 28px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
  position: relative;
  z-index: 1;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  margin-left: 0;
}

.process-step:hover {
  border-color: rgba(226, 50, 33, 0.4);
  transform: translateX(4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.process-step-axis {
  width: 72px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-step-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-strong);
  position: relative;
  transition: all 0.4s ease;
}

.process-step:hover .process-step-dot,
.process-step-dot.is-final {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(226, 50, 33, 0.7);
}

.process-step-dot.is-final::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: process-final-ring 2s ease infinite;
}

@keyframes process-final-ring {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

.process-step-num {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(3.4rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 0.9;
  color: var(--ink);
  transition: color 0.3s ease;
}

.process-step:hover .process-step-num {
  color: var(--accent);
}

.process-step-content {
  display: grid;
  gap: 12px;
}

.process-step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.process-step-content h3 {
  margin: 0;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 0.95;
}

.process-step-duration {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  flex-shrink: 0;
}

.process-step-content p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 620px;
}

.process-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.process-step-tags li {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: color 0.25s, border-color 0.25s;
}

.process-step:hover .process-step-tags li {
  color: var(--ink);
  border-color: var(--line-strong);
}

@media (max-width: 900px) {
  .process-step {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 22px 22px 0;
  }
  .process-step-axis { width: 60px; }
  .process-step-num {
    grid-column: 2;
    font-size: 2.6rem;
    margin-bottom: -4px;
  }
  .process-step-content { grid-column: 2; }
  .process-line { left: 30px; }
}

@media (max-width: 520px) {
  .process-track { gap: 18px; }
  .process-step { padding: 18px 18px 18px 0; }
  .process-step-content h3 { font-size: 1.35rem; }
  .process-step-content p { font-size: 0.92rem; line-height: 1.6; }
}

/* ══════════════════════════════════════════════
   CTA Banner — Design it once, design it right
══════════════════════════════════════════════ */
.cta-banner {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 120px 0;
  text-align: center;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(226, 50, 33, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(226, 50, 33, 0.12) 0%, transparent 45%);
  z-index: -1;
  pointer-events: none;
}

.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
  z-index: -1;
  pointer-events: none;
}

.cta-banner-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  gap: 22px;
  justify-items: center;
}

.cta-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.cta-banner-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(226, 50, 33, 0.7);
  animation: pulse-dot 2s ease infinite;
}

.cta-banner-title {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(2.8rem, 7vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  margin: 0;
  max-width: 1100px;
}

.cta-banner-sub {
  margin: 0;
  max-width: 580px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--muted);
}

.cta-banner-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

@media (max-width: 760px) {
  .cta-banner { padding: 80px 0; }
}

/* ══════════════════════════════════════════════
   Footer — multi-column sitemap (dzinr-inspired)
══════════════════════════════════════════════ */
.footer-wrap {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}

.footer-top {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: 80px 0 56px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
}

.footer-brand-col {
  display: grid;
  gap: 18px;
  align-content: start;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.footer-brand em { font-style: normal; color: var(--accent); }

.footer-brand-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 7px;
}

.footer-tagline {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 320px;
}

.footer-locale {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  width: fit-content;
}

.footer-locale-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}

.footer-col-title {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.footer-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.footer-col-list a {
  display: inline-block;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 0.92rem;
  color: var(--ink);
  transition: color 0.2s, transform 0.2s;
}

.footer-col-list a:hover {
  color: var(--accent);
  transform: translateX(3px);
}

.footer-bottom {
  border-top: 1px solid var(--line);
}

.footer-bottom-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 0;
}

.footer-legal,
.footer-meta {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-legal a {
  color: var(--muted);
  margin-left: 18px;
  transition: color 0.2s;
}

.footer-legal a:hover { color: var(--ink); }

.footer-mega-word {
  text-align: center;
  padding: 16px 0 24px;
  user-select: none;
  pointer-events: none;
}

.footer-mega-word img {
  display: inline-block;
  width: clamp(280px, 60vw, 920px);
  height: auto;
  opacity: 0.12;
}

.footer-mega-word em { display: none; }

@media (max-width: 1100px) {
  .footer-top { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .footer-brand-col { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    padding: 56px 0 32px;
    gap: 28px;
  }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ══════════════════════════════════════════════
   Logo strip
══════════════════════════════════════════════ */
.logo-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  background: var(--bg);
}

/* (Removed) Left/right edge gradient fades — they were originally meant to
   soften a scrolling marquee strip, but the logo row is now static, so the
   fades just dimmed the edge logos for no reason. */

.logo-strip-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: 26px 0 14px;
}

.logo-strip-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.logo-strip-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Hover-brand: animated name + client logo buttons ── */
.hoverbrand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 5vw, 64px);
  padding: 6px 0 14px;
  flex-wrap: wrap;
}

.hoverbrand-text {
  flex-shrink: 0;
}

.hoverbrand-label {
  margin: 0 0 5px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.hoverbrand-name-wrap {
  overflow: hidden;
}

.hoverbrand-name {
  margin: 0;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.hoverbrand-name.is-animating {
  animation: hoverbrand-in 0.34s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes hoverbrand-in {
  0%   { transform: translateY(70%); opacity: 0; }
  100% { transform: translateY(0);   opacity: 1; }
}

.hoverbrand-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.hoverbrand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.hoverbrand-btn img {
  height: 30px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
  /* Was 0.42 → 0.72: logos were nearly invisible on the dark background.
     The grayscale + invert filter forces dark logos to render white. */
  opacity: 0.72;
  filter: grayscale(1) brightness(0) invert(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Optical sizing — each logo has different proportions, so a uniform pixel
   height makes them feel uneven (KIA looks giant, GUS looks tiny). These
   per-logo overrides equalize their *perceived* visual weight on the strip. */
.hoverbrand-btn[data-name="Kia"] img                  { height: 40px; }   /* bold wordmark */
.hoverbrand-btn[data-name="UPES"] img                 { height: 32px; }   /* baseline */
.hoverbrand-btn[data-name="moneyview"] img            { height: 44px; }   /* thin lowercase + icon */
.hoverbrand-btn[data-name="GUS Global Services"] img  { height: 48px; }   /* small icon + multi-line text — boost */

.hoverbrand-btn:hover img,
.hoverbrand-btn.is-active img {
  opacity: 1;
  filter: grayscale(0) brightness(1) invert(0);
}

.hoverbrand-btn.is-active {
  border-color: var(--line-strong);
  background: rgba(244, 241, 234, 0.05);
}
.hoverbrand-btn.is-dimmed { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  .hoverbrand-name.is-animating { animation: none; }
}

@media (max-width: 760px) {
  .hoverbrand { justify-content: center; }
  .hoverbrand-text { width: 100%; text-align: center; }
  .hoverbrand-name-wrap { display: flex; justify-content: center; }
  .hoverbrand-logos { justify-content: center; }
  .hoverbrand-btn { padding: 12px 14px; }
  .hoverbrand-btn img { height: 26px; }
}

/* ══════════════════════════════════════════════
   PHONE / MOBILE OPTIMIZATION (≤760, ≤480, ≤380)
══════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Tighter overall spacing */
  .section-inner { padding: 56px 0; }
  .scroll-showcase { padding: 48px 0 72px; }
  .showreel-section { padding: 48px 0 56px; }

  /* Section heads */
  .section-head { gap: 12px; margin-bottom: 28px; }
  .section-head h2 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .section-head p { font-size: 0.95rem; line-height: 1.65; }

  /* Hero refinements */
  .hero-top { gap: 10px; flex-wrap: wrap; }
  .hero-top .eyebrow { font-size: 0.58rem; }
  .hero-bottom { gap: 18px; padding: 22px 0 18px; }
  .hero-summary { font-size: 1.08rem; }
  .hero-services { font-size: 0.92rem; line-height: 1.55; }
  .hero-sub-row { gap: 8px; }
  .hero-sub-tag { font-size: 0.58rem; padding: 4px 8px; }
  .hero-badge { font-size: 0.58rem; padding: 0.45rem 0.8rem; }

  /* Buttons */
  .btn, .menu-toggle { min-height: 42px; padding: 0.7rem 1rem; font-size: 0.6rem; }

  /* Featured work card */
  .work-featured { margin-bottom: 14px; border-radius: 12px; }
  .wf-visual { min-height: 340px; }
  .wf-content { padding: 24px 20px; gap: 16px; }
  .wf-title { font-size: 1.55rem; margin: 10px 0 12px; }
  .wf-desc { font-size: 0.93rem; line-height: 1.65; }
  .wf-stats { padding: 14px 0; gap: 10px; }
  .wf-stat strong { font-size: 1.15rem; margin-bottom: 4px; }
  .wf-stat span { font-size: 0.48rem; letter-spacing: 0.12em; }
  .wf-link { padding: 11px 16px; font-size: 0.6rem; }
  .wf-corner-tl, .wf-corner-tr { top: 14px; font-size: 0.56rem; }
  .wf-corner-tl { left: 14px; }
  .wf-corner-tr { right: 14px; }
  .wf-badge { padding: 5px 9px; font-size: 0.56rem; }
  .wf-tags { top: 46px; right: 14px; gap: 4px; }
  .wf-tag { font-size: 0.5rem; padding: 3px 6px; }
  .wf-mark-wrap { bottom: 18px; left: 18px; right: 18px; }
  .wf-mark { font-size: clamp(2rem, 11vw, 3.2rem); }
  .wf-submark { font-size: 0.58rem; }

  /* Tile grid */
  .work-grid { gap: 12px; margin-bottom: 36px; }
  .wt-content { padding: 14px 18px 18px; gap: 8px; }
  .wt-title { font-size: 1.1rem; }
  .wt-mark { font-size: clamp(1.7rem, 9vw, 2.4rem); bottom: 14px; left: 16px; }
  .wt-num { top: 14px; left: 16px; font-size: 0.56rem; }
  .wt-arrow-large { top: 14px; right: 14px; width: 30px; height: 30px; font-size: 0.78rem; }

  /* Shader CTA */
  .shader-section { height: 360px; }
  .shader-title { font-size: clamp(2.4rem, 12vw, 4rem); margin-bottom: 18px; }
  .shader-eyebrow { font-size: 0.58rem; margin-bottom: 12px; }
  .shader-actions { flex-direction: column; gap: 10px; width: 100%; padding: 0 28px; }
  .shader-actions .btn { width: 100%; }

  /* Folders */
  .folders-section { padding-top: 36px; margin-top: 36px; }
  .folders-head { margin-bottom: 28px; }
  .folders-grid { gap: 14px; justify-content: center; }
  .folder-card { width: 100%; max-width: 340px; min-height: 260px; padding: 22px 18px; }

  /* Services list rows */
  .service-row { padding: 22px 0; gap: 8px; }
  .service-row h3 { font-size: 1.35rem; }
  .service-row p { font-size: 0.93rem; line-height: 1.65; }

  /* Skew cards */
  .skew-cards-section { padding-top: 36px; margin-top: 36px; }
  .skew-cards-head { margin-bottom: 24px; }
  .skew-cards-wrap { margin: 0; flex-direction: column; align-items: center; }
  .skew-card {
    width: 100%;
    max-width: 340px;
    height: 320px;
    margin: 10px 0;
  }
  .skew-card-stripe,
  .skew-card-blur { left: 32px; }
  .skew-card-content { padding: 22px 24px; }
  .skew-card-title { font-size: 1.3rem; }
  .skew-card-desc { font-size: 0.85rem; }

  /* Logo strip */
  .logo-strip-inner { padding: 18px 0 8px; }
  .logo-strip-label { font-size: 0.58rem; margin-bottom: 14px; }

  /* Studio strip / impact */
  .studio-strip .section-inner { padding-top: 44px; padding-bottom: 44px; }
  .strip-copy h2 { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .strip-copy p { font-size: 0.93rem; }
  .tag { font-size: 0.58rem; padding: 0.4rem 0.7rem; min-height: 32px; }

  /* About */
  .about-grid { gap: 18px; }
  .about-statement { font-size: clamp(2rem, 9vw, 2.8rem); }
  .about-copy p { font-size: 0.93rem; line-height: 1.7; }

  /* Team */
  .team-section { margin-top: 36px; padding-top: 28px; }
  .team-section-head { margin-bottom: 22px; }
  .team-section-head h3 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .team-photo-grid { gap: 8px; }
  .team-photo-col { gap: 8px; }
  .team-photo-col:nth-child(2) { margin-top: 28px; }
  .team-photo-col:nth-child(3) { margin-top: 14px; }

  /* Container scroll */
  .scroll-header { margin-bottom: 32px; }
  .scroll-header h2 { font-size: clamp(2rem, 9vw, 3.2rem); }
  .scroll-3d-card { padding: 6px; border-radius: 16px; }
  .scroll-3d-inner { height: auto; border-radius: 12px; }
  .scroll-3d-panel { padding: 22px 18px; min-height: 200px; }
  .scroll-panel-title,
  .scroll-panel-title-white { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .scroll-stat-num { font-size: 1.6rem; }
  .scroll-stat-grid { gap: 10px; margin-top: 18px; }

  /* Showreel */
  .showreel-head h2 { font-size: clamp(2.1rem, 10vw, 3.2rem); }
  .showreel-stage { border-radius: 14px; }
  .showreel-play { width: 68px; height: 68px; }
  .showreel-play::before { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }

  /* CTA banner */
  .cta-banner { padding: 64px 0; }
  .cta-banner-title { font-size: clamp(2.4rem, 12vw, 4rem); }
  .cta-banner-sub { font-size: 0.95rem; }
  .cta-banner-actions { flex-direction: column; gap: 10px; width: 100%; padding: 0 16px; }
  .cta-banner-actions .btn { width: 100%; }

  /* Contact */
  .contact-grid { gap: 18px; }
  .contact-card { padding: 18px; }
  .contact-list { gap: 12px; }
  .contact-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: 10px;
  }
  .contact-list li span { color: var(--ink); font-size: 0.92rem; }

  /* Footer */
  .footer-mega-word { font-size: clamp(3.5rem, 22vw, 7rem); padding: 8px 0 14px; }
  .footer-tagline { font-size: 0.9rem; }
  .footer-col-list a { font-size: 0.88rem; }
  .footer-col-title { font-size: 0.58rem; padding-bottom: 10px; margin-bottom: 12px; }

  /* Floating gradient dock — slimmer */
  .gradient-dock {
    bottom: 16px;
    padding: 6px 10px;
    gap: 6px;
  }
  .dock-item { width: 36px; height: 36px; }
  .dock-item:hover { width: 90px; }
  .dock-item-icon { font-size: 14px; }
  .dock-item-label { font-size: 0.56rem; }

  /* Body grid pattern less prominent */
  body::before { background-size: 22px 22px; opacity: 0.1; }
}

@media (max-width: 480px) {
  /* Even tighter for compact phones */
  .nav { min-height: 64px; }
  .nav-strip-inner { min-height: 28px; font-size: 0.54rem; }
  .nav-actions { width: auto; gap: 8px; }
  .menu-toggle { min-width: 78px; }

  .section-inner { padding: 44px 0; }
  .showreel-section { padding: 40px 0 48px; }
  .scroll-showcase { padding: 40px 0 60px; }

  .hero { padding-top: 18px; }
  .hero-top { padding-bottom: 14px; }
  .hero-static { font-size: clamp(3.4rem, 22vw, 6.4rem); }
  .hero-word-slot { font-size: clamp(3.4rem, 22vw, 6.4rem); }
  .hero-animated-row { height: clamp(3rem, 22vw, 6.4rem); }
  .hero-summary { font-size: 1rem; }

  .impact-word { font-size: clamp(4rem, 28vw, 6.8rem); }

  /* Featured work tighter */
  .wf-visual { min-height: 300px; }
  .wf-content { padding: 22px 16px; }
  .wf-title { font-size: 1.4rem; }
  .wf-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .wf-stat strong { font-size: 1rem; }

  .wt-visual { height: 220px; }

  /* Skew cards smaller */
  .skew-card { height: 290px; }
  .skew-card-content { padding: 18px 22px; }

  /* Folders */
  .folder-card { padding: 18px 14px; min-height: 240px; }
  .folder-visual { width: 150px; height: 130px; }
  .folder-title { font-size: 1rem; }

  /* Hero on mobile — was reserving 100vh of height but only filling ~45%
     of it with the cycling word + tags, leaving a huge empty black strip
     below. Drop the min-height so the section sizes to its content. */
  .hero {
    min-height: 0;
    padding: 24px 0 36px;
  }
  .hero-headline { padding-bottom: 0; }

  /* CTA banner */
  .cta-banner { padding: 52px 0; }
  .cta-banner-title { font-size: clamp(2rem, 11vw, 3rem); }
  .cta-banner-eyebrow { font-size: 0.58rem; }

  /* Footer two cols only */
  .footer-top { padding: 44px 0 28px; gap: 24px; }

  /* Floating dock minimal */
  .gradient-dock { bottom: 12px; padding: 5px 8px; }
  .dock-item { width: 32px; height: 32px; }
  .dock-item:hover { width: 78px; }

  /* Drop secondary nav strip on smallest phones */
  .nav-strip { display: none; }
}

@media (max-width: 380px) {
  /* Smallest phones — minimum viable layout */
  .nav { gap: 12px; }
  .brand { font-size: 1.2rem; }
  .brand-mark { width: 26px; height: 26px; }
  .menu-toggle { min-width: 68px; padding: 0.7rem 0.8rem; font-size: 0.56rem; }

  .hero-static { font-size: clamp(3rem, 22vw, 5.6rem); }
  .hero-word-slot { font-size: clamp(3rem, 22vw, 5.6rem); }
  .hero-animated-row { height: clamp(2.6rem, 22vw, 5.6rem); }

  .gradient-dock { display: none; }
}

/* Touch device hover-disable polish */
@media (hover: none) and (pointer: coarse) {
  .work-tile:hover { transform: none; box-shadow: none; }
  .work-tile:hover .wt-mark { transform: none; }
  .work-tile:hover .wt-arrow-large { transform: none; }
  /* On touch we don't trigger any of the folder hover state via :hover —
     iOS would make it sticky on tap. Instead .folder-card.is-tap-open is
     toggled by JS on tap, and that class fires the same fan-out animation
     (see the .folder-card.is-tap-open block in the desktop CSS above). */
  .folder-card:hover { transform: none; box-shadow: none; }
  .folder-card:hover .f-front,
  .folder-card:hover .f-shine,
  .folder-card:hover .f-back,
  .folder-card:hover .f-tab { transform: none; }
  .folder-card:hover .f-mini-card { opacity: 0; }
  .folder-card:hover .folder-hint { opacity: 0.5; transform: none; }
  .skew-card:hover .skew-card-stripe,
  .skew-card:hover .skew-card-blur { transform: skewX(15deg); left: 44px; width: 50%; }
  .dock-item:hover { width: 40px; border-radius: 50%; box-shadow: none; }
  .dock-item:hover .dock-item-bg,
  .dock-item:hover .dock-item-blur { opacity: 0; }
  .dock-item:hover .dock-item-icon { transform: scale(1); opacity: 1; }
  .dock-item:hover .dock-item-label { transform: scale(0); opacity: 0; }
}

/* ══════════════════════════════════════════════
   THREE VERTICALS — Design · Media · AI
   Card grid with per-vertical accent colors
══════════════════════════════════════════════ */
.verticals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.vertical-card {
  --v-accent: var(--accent);
  position: relative;
  background: var(--bg);
  padding: 48px 36px 40px;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  transition: background 0.4s ease;
  overflow: hidden;
  isolation: isolate;
}

.vertical-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 110%, var(--v-accent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: -1;
  pointer-events: none;
}

.vertical-card:hover {
  background: var(--bg-soft);
}

.vertical-card:hover::before {
  opacity: 0.08;
}

.vertical-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--v-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.vertical-card:hover::after {
  transform: scaleX(1);
}

.vertical-card-num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}

.vertical-card-lockup {
  margin-bottom: 22px;
  line-height: 0.92;
}

.vertical-card-lockup .v-pre {
  display: block;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.vertical-card-lockup .v-name {
  display: block;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 4.2vw, 3.8rem);
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--v-accent);
  margin-top: 2px;
}

.vertical-card-desc {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.7;
  max-width: 320px;
}

.vertical-card-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.vertical-card-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.vertical-card-list li::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--v-accent);
  flex-shrink: 0;
}

.vertical-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-accent);
  border-bottom: 1px solid var(--v-accent);
  padding-bottom: 6px;
  transition: gap 0.3s ease, color 0.2s ease;
  text-decoration: none;
  /* Stretch the click target across the entire card */
  position: static;
}

/* "Stretched link" pattern — the CTA covers the whole .vertical-card so
   the user can click the title, description, list, or anywhere visible.
   The visible button stays where it is (position: static + z-index above
   the pseudo-element keeps its layout) and the ::after provides the
   invisible full-card click target. */
.vertical-card-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.vertical-card { cursor: pointer; }
.vertical-card > *:not(.vertical-card-cta) {
  position: relative;
  z-index: 0;
  pointer-events: none;
}

.vertical-card-cta:hover {
  gap: 16px;
}

.vertical-card-cta-arrow {
  display: inline-block;
  transition: transform 0.3s;
}

.vertical-card-cta:hover .vertical-card-cta-arrow {
  transform: translateX(4px);
}

/* Visual feedback: hover the card → CTA underline thickens, accent glow */
.vertical-card:hover .vertical-card-cta {
  gap: 16px;
}
.vertical-card:hover .vertical-card-cta-arrow {
  transform: translateX(4px);
}

/* Stats band beneath verticals */
/* ─── Editorial KPI strip (redesigned) ───────────────────────────────
   4-column grid that aligns to the page's content edges. No boxes, no
   walls — just a hairline above/below and left-aligned stats. Each
   column is exactly 1/4 width so the numbers line up cleanly with the
   skew-cards section above. */
/* Centered tight cluster — stats grouped in the middle of the page with
   even spacing between them, not spread across full container width. */
.verticals-stats {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-around !important;
  align-items: start;
  gap: 0 !important;
  width: 100%;
  background: transparent;
  border-top: 1px solid rgba(244, 241, 234, 0.08);
  border-bottom: 1px solid rgba(244, 241, 234, 0.08);
  padding: clamp(28px, 4vw, 44px) 0;
  margin: clamp(40px, 5vw, 64px) 0 0;
  text-align: center;
}

.verticals-stat {
  background: transparent;
  padding: 0;
  text-align: center;
  min-width: 0;
  flex: 0 0 auto;
}

.verticals-stat-num {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 4.6vw, 4.4rem);
  letter-spacing: -0.045em;
  color: var(--ink);
  line-height: 1.05;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 12px;
  /* Buffer so the cap-line + suffix descenders never clip. */
  padding-bottom: 0.04em;
}

.verticals-stat-num em {
  font-style: normal;
  color: var(--accent);
  /* Bumped up so the suffix marks have presence next to the digits. */
  font-size: 0.85em;
  letter-spacing: 0;
}

.verticals-stat-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .verticals-grid { grid-template-columns: 1fr; }
  .vertical-card { min-height: auto; padding: 40px 32px 36px; }
}

@media (max-width: 520px) {
  .vertical-card { padding: 32px 24px 28px; }
  .vertical-card-num { margin-bottom: 22px; }
}

/* ══════════════════════════════════════════════
   PACKAGES — Pricing per vertical
══════════════════════════════════════════════ */
.packages-section { position: relative; }

.packages-switch {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  margin-bottom: 38px;
  background: var(--bg-soft);
}

.packages-switch-btn {
  padding: 10px 22px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--muted);
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}

.packages-switch-btn:hover { color: var(--ink); }

.packages-switch-btn.is-active {
  background: var(--accent);
  color: #fff;
}

.packages-switch-btn[data-tab="media"].is-active { background: #FF2D6B; }
.packages-switch-btn[data-tab="ai"].is-active { background: #00FF88; color: #0a0a0a; }
.packages-switch-btn[data-tab="design"].is-active { background: #00CFFF; color: #0a0a0a; }

/* Active tab gains a ↗ — a second click navigates to the dedicated page */
.packages-switch-btn.is-active::after {
  content: " ↗";
  display: inline-block;
  margin-left: 4px;
  font-weight: 700;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.packages-switch-btn.is-active:hover::after {
  opacity: 1;
  transform: translate(2px, -2px);
}
.packages-switch-btn.is-active:hover {
  /* Subtle lift so the user knows the click means something else now */
  filter: brightness(1.08);
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.package-card {
  --p-accent: var(--accent);
  background: var(--bg);
  padding: 40px 32px 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background 0.3s;
}

.package-card.is-popular {
  background: var(--bg-soft);
}

.package-card:hover { background: var(--bg-soft); }

.package-badge {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--p-accent);
  color: var(--p-accent);
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
  border-radius: 999px;
  width: fit-content;
}

.package-name {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
}

.package-price {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: -0.05em;
  color: var(--p-accent);
  line-height: 1;
  margin-bottom: 6px;
}

.package-price span {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 4px;
}

.package-desc {
  margin: 14px 0 22px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.package-feats {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.package-feats li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.5;
}

.package-feats li::before {
  content: "✓";
  color: var(--p-accent);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.85rem;
  margin-top: 1px;
}

.package-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--p-accent);
  border-radius: 999px;
  color: var(--p-accent);
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}

.package-cta:hover {
  background: var(--p-accent);
  color: #0a0a0a;
  transform: translateY(-2px);
}

.packages-panel { display: none; }
.packages-panel.is-active { display: block; animation: pkg-fade 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes pkg-fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .packages-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .packages-switch { width: 100%; overflow-x: auto; }
  .packages-switch-btn { padding: 9px 14px; font-size: 0.58rem; flex: 1; }
}


/* ══════════════════════════════════════════════
   VERTICAL PAGE COMPONENTS
   Used by norline-design.html, norline-media.html, norline-ai.html
══════════════════════════════════════════════ */

/* Vertical page hero — editorial stacked layout
   ┌──────────────────────────────────────────────────────────┐
   │ ← BACK TO STUDIO              SERVICE · 03 · THE …       │   meta row (top, two columns)
   │                                                          │
   │  Norline                                                 │   italic anchor (left-aligned)
   │      ▼ Design ▼ ← (offset right, full size, may overflow)│   bold sans accent
   │                                                          │
   │  The backend powerhouse …                                │   tagline (constrained width)
   │  [Start project] [See packages]                          │   actions
   │ ─────────────────────────────────────────────────────────│   hairline divider
   │  [Voice Bots] [Workflow Automation] [AI-Native Tools] …  │   tag rail (full-width)
   └──────────────────────────────────────────────────────────┘ */
.vp-hero {
  /* Nav (92px) + sticky vertical-subnav (49px) = 141px. Subtract so the hero
     fits the visible viewport exactly without overflowing past the fold. */
  min-height: calc(100vh - 144px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: clamp(20px, 3vw, 36px);
  padding: clamp(20px, 2.5vw, 32px) 0 clamp(28px, 3vw, 40px);
  position: relative;
}

.vp-hero-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 70% 40%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%);
}

/* Top meta row: back link left, eyebrow right — same baseline */
.vp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s, gap 0.3s;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
}
.vp-back:hover { color: var(--ink); gap: 14px; }
.vp-back::before { content: "←"; }

.vp-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}

/* Main headline block: spans both columns, owns the bottom 2/3 of the hero.
   Stacked vertically so the offset-right accent word can overflow into the
   right side of the canvas without colliding with the tagline. */
.vp-hero .hero-headline {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.5vw, 32px);
  /* Shift the whole lockup + tagline + tag rail group up from the bottom. */
  margin-bottom: clamp(2rem, 6vw, 5rem);
}

/* Lockup matches the offset-right Figma reference:
   "Norline" italic top-left, accent word bold sans BELOW and OFFSET RIGHT
   so its left edge tucks under ~the middle of Norline. Both words at the
   same font-size — the accent extends past Norline on the right, which is
   the intended editorial effect. */
.vp-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.9;
  width: fit-content;
  padding-top: 0.14em;
  /* Bottom padding gives the italic N's descending bottom-left serif room
     to render without being covered by the accent word stacked underneath. */
  padding-bottom: 0.08em;
  /* Push the whole lockup right so the italic N's left-curling serif/swash
     has visible breathing room from the page edge. */
  padding-left: 0.22em;
  /* Extra left shift so the whole lockup sits indented from the page edge. */
  margin-left: clamp(1rem, 4vw, 3.5rem);
}

.vp-lockup-pre {
  font-family: "The Silver Editorial", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  /* Very tight tracking — letters nearly touch, matching the user's
     Norline reference where the italic glyphs kiss each other. */
  letter-spacing: -0.08em;
  text-transform: none;
  color: #ffffff;
  line-height: 1;
}

.vp-lockup-name {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  /* ~78% of Norline cap height — matches Studio:Norline ratio in the brand mark. */
  font-size: clamp(2.5rem, 7vw, 5.8rem);
  letter-spacing: -0.04em;
  text-transform: none;
  color: var(--accent);
  /* Right-edge alignment: lockup is fit-content sized to Norline's width
     (Norline is wider than any accent at this scale), so flex-end pushes
     the accent's right edge flush with Norline's right edge. */
  align-self: flex-end;
  margin-left: 0;
  margin-top: 0;
  line-height: 0.95;
}

/* When the lockup is a pre-rendered poster image instead of text, drop the
   text-related padding (it was there to give the italic N's swash room). */
.vp-lockup--img {
  padding: 0;
  margin-left: clamp(1rem, 4vw, 3.5rem);
}

.vp-lockup-img {
  display: block;
  width: clamp(260px, 55vw, 680px);
  height: auto;
}

@media (max-width: 760px) {
  .vp-lockup-img { width: clamp(220px, 75vw, 420px); }
}

/* Home page skew-card — show the poster PNG instead of separate eyebrow + title. */
.skew-card-poster {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin-bottom: 14px;
}

.vp-tagline {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  line-height: 1.45;
  max-width: 640px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}

.vp-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: clamp(4px, 0.5vw, 8px);
}

/* Tag rail anchors the bottom edge, full-width with a hairline above */
.vp-hero .hero-sub-row {
  align-self: stretch;
  margin-top: auto;
  padding-top: clamp(20px, 2.5vw, 30px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .vp-hero {
    grid-template-columns: 1fr;
    padding: 28px 0 40px;
    row-gap: 24px;
  }
  .vp-back, .vp-eyebrow-row {
    grid-column: 1;
    justify-self: start;
  }
  .vp-eyebrow-row { grid-row: 2; align-self: start; }
  .vp-hero .hero-headline {
    grid-row: auto;
    row-gap: 18px;
  }
  /* Scale lockup down so it fits the viewport — desktop's 13vw produces
     huge text that overflows on narrow screens. */
  .vp-lockup-pre,
  .vp-lockup-name {
    font-size: clamp(2.6rem, 11vw, 5.5rem);
  }
  .vp-lockup-name {
    margin-left: clamp(0.8rem, 4vw, 2rem) !important;
  }
  .vp-tagline { font-size: 1rem; }
  .vp-hero .hero-sub-row { margin-top: 18px; padding-top: 18px; }
}

@media (max-width: 520px) {
  .vp-lockup-pre,
  .vp-lockup-name {
    font-size: clamp(2.2rem, 12vw, 4rem);
  }
  .vp-lockup-name {
    margin-left: clamp(0.5rem, 3vw, 1.2rem) !important;
  }
}

/* Hard guard: never let any page produce a horizontal scrollbar — the
   accent words in the lockup can naturally extend past Norline's right
   edge and we don't want that to leak into page overflow on mobile. */
html, body { overflow-x: clip; }

/* Focus statement strip — big two-column row above deliverables */
.focus-strip {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  padding: clamp(40px, 6vw, 72px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.focus-strip-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 8px;
}

.focus-strip h3 {
  margin: 0;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--ink);
}

.focus-strip h3 em {
  font-style: normal;
  color: var(--accent);
}

@media (max-width: 900px) {
  .focus-strip { grid-template-columns: 1fr; gap: 18px; }
  .focus-strip-label { padding-top: 0; }
}

/* Deliverable cards — 2x2 grid */
.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.deliverable-card {
  background: var(--bg);
  padding: 40px 36px 38px;
  position: relative;
  transition: background 0.35s ease;
  overflow: hidden;
  isolation: isolate;
}

.deliverable-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 110%, var(--accent) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.55s ease;
  z-index: -1;
}

.deliverable-card:hover { background: var(--bg-soft); }
.deliverable-card:hover::before { opacity: 0.06; }

.deliverable-card::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.deliverable-card:hover::after { transform: scaleX(1); }

.del-num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

.del-title {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  margin: 0 0 14px;
}

.del-desc {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 440px;
}

@media (max-width: 900px) {
  .deliverables-grid { grid-template-columns: 1fr; }
  .deliverable-card { padding: 32px 26px; }
}

/* Cross-vertical card — used at bottom of each vertical page to link the other two */
.cross-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
}

.cross-card {
  display: block;
  padding: 28px 30px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.cross-card:hover {
  border-color: var(--c-accent, var(--accent));
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.32);
}

.cross-card-eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.cross-card-name {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.cross-card-name em {
  font-style: normal;
  color: var(--c-accent, var(--accent));
}

.cross-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent, var(--accent));
}

.cross-card-arrow-icon {
  transition: transform 0.3s;
}

.cross-card:hover .cross-card-arrow-icon { transform: translateX(5px); }

@media (max-width: 760px) {
  .cross-grid { grid-template-columns: 1fr; }
}

/* "See full page" link below each packages panel — clear path to dedicated page */
.packages-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 32px auto 0;
  padding: 14px 24px;
  border: 1px solid var(--p-accent, var(--accent));
  border-radius: 999px;
  color: var(--p-accent, var(--accent));
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background 0.25s, color 0.25s, transform 0.25s, gap 0.3s;
  width: fit-content;
}

.packages-panel-link {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
}

.packages-panel-link:hover {
  background: var(--p-accent, var(--accent));
  color: #0a0a0a;
  transform: translateY(-2px);
  gap: 16px;
}

.packages-panel-link-arrow {
  display: inline-block;
  transition: transform 0.3s;
}

.packages-panel-link:hover .packages-panel-link-arrow {
  transform: translateX(4px);
}

/* ══════════════════════════════════════════════
   SERVICES GROUPED BY VERTICAL
══════════════════════════════════════════════ */
.services-list {
  /* Reset the gap=1px background trick because we're now using groups */
  background: transparent;
  display: grid;
  gap: 56px;
}

.services-group {
  --g-accent: var(--accent);
  position: relative;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
}

.services-group::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 80px;
  height: 2px;
  background: var(--g-accent);
}

.services-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.services-group-label {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}

.services-group-label em {
  font-style: normal;
  color: var(--g-accent);
}

.services-group-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g-accent);
  border-bottom: 1px solid var(--g-accent);
  padding-bottom: 5px;
  text-decoration: none;
  transition: gap 0.3s ease, color 0.2s ease;
}

.services-group-link:hover { gap: 16px; }

.services-group-link-arrow { display: inline-block; transition: transform 0.3s; }
.services-group-link:hover .services-group-link-arrow { transform: translateX(4px); }

.services-group-rows {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.services-group .service-row {
  background: var(--bg);
}

/* Accent the row number in the group's color */
.services-group .service-row .service-number {
  color: var(--g-accent);
  font-weight: 600;
}

@media (max-width: 760px) {
  .services-list { gap: 44px; }
  .services-group-head { gap: 12px; }
}

/* ══════════════════════════════════════════════
   STICKY VERTICAL SUB-NAV (on dedicated vertical pages)
   Sits under the main nav, shows the three verticals,
   highlights the current one in its accent color.
══════════════════════════════════════════════ */
.vertical-subnav {
  position: sticky;
  top: 84px;
  z-index: 90;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.vertical-subnav-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 48px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow-x: auto;
  scrollbar-width: none;
}
.vertical-subnav-inner::-webkit-scrollbar { display: none; }

.vertical-subnav-label {
  color: var(--muted);
  flex-shrink: 0;
}

.vertical-subnav-links {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

.vertical-subnav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.vertical-subnav-links a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  flex-shrink: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.vertical-subnav-links a:hover {
  color: var(--ink);
}
.vertical-subnav-links a:hover::before {
  opacity: 0.7;
}

/* Each link tinted in its OWN vertical color, regardless of current page */
.vertical-subnav-links a[data-v="design"] { color: #00CFFF; }
.vertical-subnav-links a[data-v="media"]  { color: #FF2D6B; }
.vertical-subnav-links a[data-v="ai"]     { color: #00FF88; }

/* Active vertical: bolder, dot solid */
.vertical-subnav-links a.is-active {
  font-weight: 600;
}
.vertical-subnav-links a.is-active::before {
  opacity: 1;
  transform: scale(1.2);
  box-shadow: 0 0 10px currentColor;
}

.vertical-subnav-spacer {
  flex: 1;
}

.vertical-subnav-context {
  color: var(--muted);
  flex-shrink: 0;
  display: none;
}

@media (min-width: 760px) {
  .vertical-subnav-context { display: inline-flex; align-items: center; gap: 8px; }
  .vertical-subnav-context::before {
    content: "";
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent);
  }
}

@media (max-width: 520px) {
  .vertical-subnav-inner { font-size: 0.58rem; gap: 14px; }
  .vertical-subnav-links { gap: 12px; }
  .vertical-subnav-label { display: none; }
}

@media (max-width: 760px) {
  .vertical-subnav { top: 74px; }
  /* Bump scroll-padding so hash-jumps clear both navs */
  html { scroll-padding-top: 140px; }
}

/* ══════════════════════════════════════════════
   SKEW CARD — anchor variant (used for verticals)
   Whole card is a link to the dedicated vertical page.
══════════════════════════════════════════════ */
.skew-card--link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

/* Skew-card lockup — restored to the original League Spartan uppercase
   eyebrow + League Spartan title. The italic-anchor / offset-right accent
   lockup is reserved for the vertical-page heroes only. */
/* Skew-card lockup — same italic Norline + right-aligned accent pattern as
   the vertical-page heroes, scaled down for card width. */
.skew-card-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.9;
  width: fit-content;
  margin-bottom: 14px;
}

.skew-card--link .skew-card-eyebrow {
  font-family: "The Silver Editorial", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 3.4vw, 3.4rem);
  letter-spacing: -0.08em;
  text-transform: none;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 0;
}

.skew-card--link .skew-card-num {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.skew-card--link .skew-card-title {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  letter-spacing: -0.04em;
  text-transform: none;
  line-height: 0.95;
  /* Right-edge align with the eyebrow above (Norline is wider at card scale). */
  align-self: flex-end;
  margin-top: 0;
}

/* Same right-nudge as the vertical hero pages: Design and Media get shifted
   right of Norline; AI stays put. Targeted via the card's destination href. */
.skew-card[href*="design"] .skew-card-title,
.skew-card[href*="media"]  .skew-card-title {
  transform: translateX(clamp(1rem, 2.2vw, 2.2rem));
}

.skew-card--link .skew-card-desc {
  font-size: 0.9rem;
  margin-bottom: 22px;
  /* Reserve space for the longest description so all 3 cards' lockups sit
     at the same y-position. Without this, shorter descriptions push the
     lockup down in some cards while the longer ones stay where they are. */
  min-height: 6em;
}

/* Card-as-link slightly larger than the sub-feature variant */
.skew-cards-wrap .skew-card--link {
  width: 320px;
  height: 420px;
}

/* Slight micro-interaction on the button when hovering the card */
.skew-card--link:hover .skew-card-btn {
  background: #ffe066;
  transform: translateX(4px);
}
.skew-card--link .skew-card-btn {
  transition: background 0.2s, transform 0.3s;
}

@media (max-width: 760px) {
  .skew-cards-wrap .skew-card--link {
    width: calc(100% - 32px);
    height: auto;
    min-height: 360px;
  }
}

/* ══════════════════════════════════════════════════════════════
   v3 HOME — CINEMATIC REDESIGN
   Bold, narrative-driven layout. Every section earns its place.
══════════════════════════════════════════════════════════════ */

/* ── HERO v3: Editorial split with cycling vertical word ── */
.hero-v3 {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: clamp(120px, 14vh, 180px) 0 clamp(40px, 8vh, 80px);
  overflow: hidden;
}

.hero-v3-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 75% 25%, rgba(0, 207, 255, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 45% 60% at 15% 65%, rgba(255, 45, 107, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 85% 80%, rgba(0, 255, 136, 0.05) 0%, transparent 55%);
}

.hero-v3-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  gap: clamp(24px, 5vh, 56px);
}

.hero-v3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  width: fit-content;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-v3-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(226, 50, 33, 0.7);
  animation: pulse-dot 2s ease infinite;
}

/* The big lockup: italic serif "Norline" stacked over cycling Syne bold */
.hero-v3-lockup {
  display: grid;
  gap: clamp(0.1em, 1.5vh, 0.25em);
  line-height: 0.86;
}

.hero-v3-name {
  font-family: "The Silver Editorial", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4.6rem, 16vw, 14rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 0.9;
}

.hero-v3-cycle {
  position: relative;
  height: clamp(4.4rem, 16vw, 14rem);
  overflow: hidden;
  margin-top: -0.05em;
}

.hero-v3-cycle-slot {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(4.4rem, 16vw, 14rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.65s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform, opacity;
}

.hero-v3-cycle-slot[data-state="below"]  { transform: translateY(100%);  opacity: 0; }
.hero-v3-cycle-slot[data-state="active"] { transform: translateY(0);     opacity: 1; }
.hero-v3-cycle-slot[data-state="above"]  { transform: translateY(-100%); opacity: 0; }

/* Per-vertical accent color on the cycling word */
.hero-v3-cycle-slot[data-v="design"] { color: #00CFFF; }
.hero-v3-cycle-slot[data-v="media"]  { color: #FF2D6B; }
.hero-v3-cycle-slot[data-v="ai"]     { color: #00FF88; }
.hero-v3-cycle-slot[data-v="studio"] { color: var(--ink); }

.hero-v3-tagline {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 680px;
  margin: 0;
}

.hero-v3-tagline strong {
  color: var(--ink);
  font-weight: 600;
}

.hero-v3-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero-v3-scroll {
  position: absolute;
  bottom: clamp(20px, 4vh, 40px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

.hero-v3-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent 0%, var(--line-strong) 50%, transparent 100%);
  animation: scroll-pulse 2.2s ease infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ── VERTICALS v3: heading + the three skew-cards as a focused block ── */
.verticals-v3 {
  padding: clamp(48px, 10vh, 96px) 0;
  border-top: 1px solid var(--line);
}

.verticals-v3-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

.verticals-v3-head {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(32px, 5vh, 56px);
  max-width: 720px;
}

.verticals-v3-label {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.verticals-v3-title {
  font-family: "The Silver Editorial", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}

.verticals-v3-title em {
  font-style: normal;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  color: var(--ink);
}

/* ── MANIFESTO: full-viewport black canvas with massive italic statement ── */
.manifesto-screen {
  position: relative;
  min-height: 96vh;
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: clamp(64px, 14vh, 140px) 24px;
  overflow: hidden;
  background: #050505;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Three-color edge gradients (cyan top-left, pink bottom, green right) */
.manifesto-screen::before,
.manifesto-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 45% at 12% 18%, rgba(0, 207, 255, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 78%, rgba(0, 255, 136, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(255, 45, 107, 0.16) 0%, transparent 60%);
}

.manifesto-screen::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.12;
  mix-blend-mode: overlay;
}

.manifesto-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(28px, 6vh, 56px);
  width: min(1100px, 100%);
}

.manifesto-eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.manifesto-statement {
  font-family: "The Silver Editorial", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
}

.manifesto-statement em {
  font-style: normal;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
}

.manifesto-statement .mf-design { color: #00CFFF; }
.manifesto-statement .mf-media  { color: #FF2D6B; }
.manifesto-statement .mf-ai     { color: #00FF88; }

.manifesto-foot {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-self: center;
}

.manifesto-foot::before,
.manifesto-foot::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--line-strong);
}

/* ── CTA SCREEN: full-viewport WhatsApp moment ── */
.cta-screen {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: clamp(64px, 12vh, 120px) 24px;
  background: var(--bg);
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.cta-screen-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vmin;
  height: 80vmin;
  background: radial-gradient(circle, rgba(37, 211, 102, 0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.cta-screen-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(22px, 4vh, 36px);
  width: min(900px, 100%);
}

.cta-screen-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid rgba(37, 211, 102, 0.45);
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(37, 211, 102, 0.95);
}

.cta-screen-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #25D366;
  animation: pulse-dot 2s ease infinite;
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.7);
}

.cta-screen-title {
  font-family: "The Silver Editorial", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.2rem, 8vw, 7.2rem);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}

.cta-screen-title em {
  font-style: normal;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
}

.cta-screen-sub {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 580px;
  margin: 0 auto;
}

.cta-screen-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 22px 38px;
  background: #25D366;
  color: #0a1a0e;
  border: none;
  border-radius: 999px;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  justify-self: center;
  box-shadow:
    0 12px 32px rgba(37, 211, 102, 0.25),
    0 0 0 0 rgba(37, 211, 102, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-screen-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 44px rgba(37, 211, 102, 0.4),
    0 0 0 8px rgba(37, 211, 102, 0.08);
}

.cta-screen-btn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0a1a0e;
  animation: pulse-dot 2s ease infinite;
}

.cta-screen-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  justify-self: center;
}

.cta-screen-meta a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color 0.2s ease;
}

.cta-screen-meta a:hover { text-decoration-color: var(--accent); }

.cta-screen-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted);
}

/* ── MINIMAL FOOTER v3 ── */
.footer-v3 {
  padding: 36px 0 32px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.footer-v3-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-v3-brand {
  font-family: "The Silver Editorial", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
}

.footer-v3-links {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.footer-v3-links a {
  color: var(--muted);
  transition: color 0.2s ease;
}

.footer-v3-links a:hover { color: var(--ink); }

@media (max-width: 760px) {
  .hero-v3-scroll { display: none; }
  .manifesto-screen { min-height: 80vh; }
  .cta-screen { min-height: 80vh; }
  .cta-screen-btn { padding: 18px 28px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v3-scroll-line,
  .cta-screen-eyebrow-dot,
  .hero-v3-eyebrow-dot,
  .cta-screen-btn-dot { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   v4 HERO — "STARRY" STYLE: 3D iridescent asterisk + rainbow edge glow
   The asterisk literally embodies the three verticals as three crossed rays.
══════════════════════════════════════════════════════════════ */

.hero-v4 {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: clamp(110px, 14vh, 160px) 0 clamp(40px, 8vh, 80px);
  overflow: hidden;
  background: #050505;
}

/* ── Rainbow edge glow that wraps the hero — cyan top-left, pink bottom, green right ── */
.hero-v4-edge {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 65% at 0% 12%, rgba(0, 207, 255, 0.55) 0%, transparent 45%),
    radial-gradient(ellipse 55% 60% at 100% 50%, rgba(0, 255, 136, 0.45) 0%, transparent 45%),
    radial-gradient(ellipse 70% 55% at 30% 110%, rgba(255, 45, 107, 0.55) 0%, transparent 45%),
    radial-gradient(ellipse 50% 50% at 100% 0%, rgba(255, 140, 60, 0.35) 0%, transparent 45%);
  filter: blur(60px);
  opacity: 0.85;
  animation: edge-glow-drift 22s ease-in-out infinite;
}

@keyframes edge-glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(2%, -1%) scale(1.04); }
  66%      { transform: translate(-1%, 2%) scale(0.98); }
}

/* Inner darkening so the center stays readable while edges glow */
.hero-v4-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 65% at 50% 50%, rgba(5, 5, 5, 0.75) 0%, transparent 70%);
}

.hero-v4-noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
}

.hero-v4-inner {
  position: relative;
  z-index: 5;
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

@media (max-width: 900px) {
  .hero-v4-inner { grid-template-columns: 1fr; }
}

/* ── Left: bold copy ── */
.hero-v4-copy {
  display: grid;
  gap: clamp(20px, 3vh, 36px);
}

.hero-v4-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  width: fit-content;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.hero-v4-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #00FF88;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.8);
  animation: pulse-dot 2s ease infinite;
}

.hero-v4-headline {
  margin: 0;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 5rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: #fff;
}

.hero-v4-headline em {
  font-style: normal;
  font-family: "The Silver Editorial", serif;
  font-weight: 400;
  font-style: italic;
  background: linear-gradient(120deg, #00CFFF 0%, #FF2D6B 50%, #00FF88 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
}

.hero-v4-sub {
  margin: 0;
  max-width: 540px;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* CTA row: WhatsApp pill + ghost secondary */
.hero-v4-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-v4-checks {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hero-v4-checks span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-v4-checks span::before {
  content: "✓";
  color: #00FF88;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   3D ASTERISK — three crossed rays = three verticals
   Pure CSS, slow rotation, iridescent gradient facets
══════════════════════════════════════════════════════════════ */
.norline-asterisk-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(360px, 50vh, 600px);
  perspective: 1400px;
}

.norline-asterisk {
  position: relative;
  width: clamp(280px, 38vw, 480px);
  height: clamp(280px, 38vw, 480px);
  transform-style: preserve-3d;
  animation: ast-spin 18s linear infinite;
  filter:
    drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 60px rgba(255, 255, 255, 0.08));
}

@keyframes ast-spin {
  0%   { transform: rotateY(0deg) rotateX(8deg); }
  100% { transform: rotateY(360deg) rotateX(8deg); }
}

/* Each ray is a vertical bar with a clip-path that gives it the diamond ends.
   Three rays at 0°, 60°, 120° = 6-point asterisk.
   We give each ray its own accent gradient (cyan/pink/green) → three verticals. */
.norline-asterisk-ray {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(50px, 7vw, 90px);
  height: 100%;
  margin-left: calc(clamp(50px, 7vw, 90px) / -2);
  transform-origin: center center;
  clip-path: polygon(50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%, 0% 10%);
  /* Metallic facet: dark side → highlight strip → dark side again */
  background:
    linear-gradient(
      90deg,
      #050505 0%,
      var(--ray-mid, #888) 18%,
      var(--ray-hi, #fff) 50%,
      var(--ray-mid, #888) 82%,
      #050505 100%
    );
}

/* Highlight band that runs vertically to suggest depth */
.norline-asterisk-ray::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.35) 0%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.45) 100%
    );
  mix-blend-mode: overlay;
}

/* Inner edge sheen */
.norline-asterisk-ray::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background:
    linear-gradient(
      90deg,
      transparent 47%,
      rgba(255, 255, 255, 0.25) 49.5%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.25) 50.5%,
      transparent 53%
    );
  mix-blend-mode: screen;
  opacity: 0.7;
}

.norline-asterisk-ray:nth-child(1) {
  transform: rotateZ(0deg) translateZ(20px);
  --ray-mid: #FF2D6B;
  --ray-hi: #ffe6f0;
}
.norline-asterisk-ray:nth-child(2) {
  transform: rotateZ(60deg) translateZ(0px);
  --ray-mid: #00CFFF;
  --ray-hi: #e6f9ff;
}
.norline-asterisk-ray:nth-child(3) {
  transform: rotateZ(120deg) translateZ(-20px);
  --ray-mid: #00FF88;
  --ray-hi: #e6ffe9;
}

/* Glow halo behind the asterisk */
.norline-asterisk-halo {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
  filter: blur(30px);
}

/* Three small floating accent dots that orbit the asterisk */
.norline-asterisk-stage::before,
.norline-asterisk-stage::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  animation: orbit 14s linear infinite;
}

.norline-asterisk-stage::before {
  background: #00CFFF;
  box-shadow: 0 0 16px #00CFFF;
}

.norline-asterisk-stage::after {
  background: #FF2D6B;
  box-shadow: 0 0 16px #FF2D6B;
  animation-direction: reverse;
  animation-duration: 18s;
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(clamp(160px, 22vw, 280px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(clamp(160px, 22vw, 280px)) rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .norline-asterisk { animation: none; }
  .norline-asterisk-stage::before,
  .norline-asterisk-stage::after { animation: none; }
  .hero-v4-edge { animation: none; }
}

@media (max-width: 900px) {
  .norline-asterisk-stage { min-height: clamp(280px, 60vw, 400px); }
}

/* ══════════════════════════════════════════════════════════════
   EDITORIAL HERO — kills AI-tells (cycling word, glass pills,
   pulsing dots, gradient text). Static, asymmetric, prose-first.
══════════════════════════════════════════════════════════════ */
.hero-editorial {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  padding: 0;
}

.hero-ed-grid {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(110px, 16vh, 180px) 0 clamp(40px, 6vh, 80px);
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: clamp(28px, 5vw, 60px) clamp(28px, 5vw, 64px);
  align-content: space-between;
}

/* Top-left: meta lines, monospace, dim */
.hero-ed-meta {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: start;
}

.hero-ed-line {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.hero-ed-line:first-child {
  color: var(--ink);
  font-weight: 500;
}

/* Big editorial statement spans both columns */
.hero-ed-statement {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  max-width: 16ch;
  font-family: "The Silver Editorial", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7.5rem);
  letter-spacing: -0.025em;
  line-height: 0.96;
  color: var(--ink);
  align-self: center;
}

.hero-ed-statement em {
  font-style: normal;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.04em;
}

/* Bottom-right: human prose + plain text CTAs */
.hero-ed-foot {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-self: end;
  justify-self: end;
  max-width: 480px;
}

.hero-ed-body {
  margin: 0;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted);
}

.hero-ed-cta {
  display: flex;
  gap: 28px;
  align-items: baseline;
  flex-wrap: wrap;
}

/* Plain underlined links, no glass, no pill, no glow */
.hero-ed-cta-primary {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hero-ed-cta-primary:hover {
  color: var(--accent);
}

.hero-ed-cta-secondary {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-strong);
  transition: color 0.2s ease;
}

.hero-ed-cta-secondary:hover {
  color: var(--ink);
}

@media (max-width: 760px) {
  .hero-ed-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 36px;
    padding-top: 100px;
  }
  .hero-ed-meta { grid-column: 1; grid-row: 1; }
  .hero-ed-statement { grid-column: 1; grid-row: 2; font-size: clamp(2.4rem, 11vw, 4rem); }
  .hero-ed-foot { grid-column: 1; grid-row: 3; justify-self: start; }
}

/* ══════════════════════════════════════════════════════════════
   EDITORIAL VERTICALS — kills skew-cards (gradient stripes,
   glow halos, animated blobs). Just typography in a list.
══════════════════════════════════════════════════════════════ */
.verticals-editorial { background: var(--bg); }

.ve-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(48px, 8vh, 96px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.ve-eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.ve-title {
  margin: 0;
  font-family: "The Silver Editorial", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 4.2rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  text-align: right;
}

.ve-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ve-item {
  border-bottom: 1px solid var(--line);
}
.ve-item:first-child { border-top: 1px solid var(--line); }

.ve-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 240px) minmax(0, 1fr) 40px;
  gap: clamp(20px, 4vw, 56px);
  align-items: baseline;
  padding: clamp(28px, 5vw, 48px) 0;
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}

.ve-row:hover {
  padding-left: 18px;
  color: var(--ink);
}

.ve-num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.86rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.ve-name {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ink);
  transition: color 0.25s ease;
}

.ve-row:hover .ve-name {
  color: var(--accent);
}

.ve-desc {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: clamp(0.96rem, 1.2vw, 1.1rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 460px;
}

.ve-go {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 1.3rem;
  color: var(--muted);
  text-align: right;
  transition: transform 0.25s ease, color 0.25s ease;
}

.ve-row:hover .ve-go {
  color: var(--accent);
  transform: translateX(8px);
}

@media (max-width: 760px) {
  .ve-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ve-title { text-align: left; }
  .ve-row {
    grid-template-columns: 50px 1fr 32px;
    grid-template-rows: auto auto;
    gap: 16px 18px;
    align-items: center;
  }
  .ve-num { grid-column: 1; grid-row: 1; }
  .ve-name { grid-column: 2; grid-row: 1; }
  .ve-go { grid-column: 3; grid-row: 1; }
  .ve-desc { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .ve-row { transition: none; }
  .ve-row:hover { padding-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   PROCESS (editorial) — honest 5-step list + real numbers row.
   Replaces the fake "50+ Clients / 100% Original" stats grid.
══════════════════════════════════════════════════════════════ */
.process-editorial { background: var(--bg-soft); }

.pe-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(40px, 6vh, 64px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.pe-eyebrow {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.pe-title {
  margin: 0;
  font-family: "The Silver Editorial", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  text-align: right;
}

.pe-list {
  list-style: none;
  margin: 0 0 clamp(48px, 8vh, 80px);
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vh, 32px);
}

.pe-step {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: baseline;
  padding-bottom: clamp(18px, 3vh, 28px);
  border-bottom: 1px dashed var(--line);
}

.pe-step:last-child { border-bottom: none; padding-bottom: 0; }

.pe-num {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.86rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.pe-body { display: grid; gap: 6px; }

.pe-step-title {
  margin: 0;
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pe-body p {
  margin: 0;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
}

/* Real-numbers row */
.pe-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.pe-stat {
  background: var(--bg-soft);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pe-stat-num {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}

.pe-stat-lbl {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

@media (max-width: 760px) {
  .pe-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pe-title { text-align: left; }
  .pe-step { grid-template-columns: 60px 1fr; gap: 16px; }
  .pe-stats { grid-template-columns: 1fr 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   SECTORS — Industries we serve
   Factors-inspired vertical card grid: numbered mono labels,
   single-letter glyph, accent color per card, restrained whitespace.
══════════════════════════════════════════════════════════════ */
.sectors-section {
  background: var(--bg);
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid rgba(244,241,234,0.06);
  border-bottom: 1px solid rgba(244,241,234,0.06);
  position: relative;
}

.sectors-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244,241,234,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,234,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  pointer-events: none;
}

.sectors-head {
  margin-bottom: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  position: relative;
  z-index: 1;
}

.sectors-head-left h2 {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 16px 0 0;
}

.sectors-head-left h2 em {
  font-style: italic;
  color: var(--accent);
}

.sectors-head-right {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(244,241,234,0.7);
  max-width: 420px;
  font-weight: 300;
}

.sectors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(244,241,234,0.08);
  border: 1px solid rgba(244,241,234,0.08);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .sectors-grid { grid-template-columns: repeat(2, 1fr); }
  .sectors-head { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
  .sectors-grid { grid-template-columns: 1fr; }
}

.sector-card {
  background: var(--bg);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  cursor: pointer;
  transition: background 0.5s cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}

.sector-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 110%, var(--sector-color, var(--accent)) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.sector-card:hover {
  background: rgba(255,255,255,0.018);
}

.sector-card:hover::before {
  opacity: 0.14;
}

.sector-card:hover .sector-glyph {
  transform: scale(1.06) rotate(-3deg);
}

.sector-card:hover .sector-arrow {
  opacity: 1;
  transform: translate(4px, -4px);
  color: var(--sector-color, var(--accent));
}

.sector-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(244,241,234,0.42);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.sector-arrow {
  font-size: 1.05rem;
  opacity: 0.4;
  transition: all 0.4s ease;
}

.sector-glyph {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 5vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--sector-color, var(--accent));
  margin: 16px 0;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
  position: relative;
  z-index: 1;
  text-shadow: 0 0 24px color-mix(in srgb, var(--sector-color, var(--accent)) 30%, transparent);
}

.sector-body {
  position: relative;
  z-index: 1;
}

.sector-name {
  font-family: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.1;
}

.sector-desc {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(244,241,234,0.6);
  margin: 0 0 14px;
  font-weight: 300;
}

.sector-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sector-tags span {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid rgba(244,241,234,0.12);
  border-radius: 999px;
  color: rgba(244,241,234,0.55);
  white-space: nowrap;
}

/* (Reverted) — the Silver Editorial Italic font test on the Services h2 has
   been removed. The heading now picks up the default section h2 style
   (League Spartan, uppercase) like the rest of the site. */

/* Mobile fan-out trigger: .folder-card.is-tap-open mirrors :hover so a tap
   on touch devices opens the folder the same way hover does on desktop.
   Toggle is wired up via JS in index.html (touchstart on each .folder-card). */
.folder-card.is-tap-open {
  border-color: rgba(226, 50, 33, 0.35);
  box-shadow: 0 0 40px rgba(226, 50, 33, 0.08);
}
.folder-card.is-tap-open .folder-glow { opacity: 0.06; }
.folder-card.is-tap-open .f-back  { transform: rotateX(-15deg); }
.folder-card.is-tap-open .f-tab   { transform: rotateX(-25deg) translateY(-2px); }
.folder-card.is-tap-open .f-front { transform: rotateX(25deg) translateY(8px); }
.folder-card.is-tap-open .f-shine { transform: rotateX(25deg) translateY(8px); }
.folder-card.is-tap-open .f-mini-card { opacity: 1; }
.folder-card.is-tap-open .f-mini-card:nth-child(1) { transform: translateY(-92px) translateX(-82px) rotate(-13deg) scale(1); }
.folder-card.is-tap-open .f-mini-card:nth-child(2) { transform: translateY(-92px) translateX(0px)   rotate(0deg)   scale(1); }
.folder-card.is-tap-open .f-mini-card:nth-child(3) { transform: translateY(-92px) translateX(82px)  rotate(13deg)  scale(1); }
.folder-card.is-tap-open .f-more-pill { opacity: 1; transform: translateY(0); }
.folder-card.is-tap-open .folder-title { transform: translateY(4px); }
.folder-card.is-tap-open .folder-hint { opacity: 0; transform: translateY(8px); }


/* ── Logo strip stability fix (Oct 2026) ──────────────────────────────────
   With six logos the strip no longer fit on one line next to long names
   (e.g. "GUS GLOBAL SERVICES"). Hovering swapped the name, the row wrapped,
   the strip grew by ~130px, the logo slid out from under the cursor, hover
   ended, the row unwrapped, and so on: a flicker loop. Now the layout never
   depends on the name: wide screens keep one fixed row, narrower screens
   always stack (name above, logos below), and the name box has fixed size. */
.hoverbrand-name-wrap { height: calc(1.1 * clamp(1.3rem, 2.3vw, 2.1rem)); }
.hoverbrand-name { font-size: clamp(1.3rem, 2.3vw, 2.1rem); }

@media (min-width: 1180px) {
  .hoverbrand { flex-wrap: nowrap; gap: 24px; }
  .hoverbrand-text { flex: 0 0 clamp(250px, 27vw, 380px); min-width: 0; }
  .hoverbrand-logos { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 0; min-width: 0; }
  .hoverbrand-btn { padding: 12px 12px; flex: 0 0 auto; }
  .hoverbrand-btn img { max-width: 120px; }
}

@media (max-width: 1179px) {
  .hoverbrand { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hoverbrand-text { flex: 0 0 auto; width: 100%; }
  .hoverbrand-logos { width: 100%; justify-content: flex-start; gap: 4px; }
  .hoverbrand-btn { padding: 12px 14px; }
}