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

:root {
  --pink: #FF0EA4;
  --black: #0a0a0a;
  --white: #f5f5f3;
  --cream: #f7f2e9;
  --gray: #1a1a1a;
  --gray2: #2a2a2a;
  --font-display: 'Bebas Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: hidden;
  cursor: none;
}

/* Custom cursor */
.cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--pink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease, width 0.2s ease, height 0.2s ease;
  mix-blend-mode: normal;
}
.cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,14,164,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}
body:hover .cursor { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-ring { display: none; }
}

/* NAV */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  transition: background 0.3s ease;
}
nav.scrolled {
  background: rgba(10,10,10,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* The scrolled blur lives on a pseudo-element, not on nav itself: a
   backdrop-filter makes its element the containing block for fixed-position
   descendants, which would trap the .nav-links overlay inside the header bar. */
nav.scrolled::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.nav-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.nav-logo-wld {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--white);
  letter-spacing: 2px;
}
.nav-logo-wld span { color: var(--pink); }
.nav-logo-sub {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 4px;
  color: rgba(245,245,243,0.5);
  text-transform: uppercase;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245,245,243,0.65);
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--white); }
.nav-links-cta-item { display: none; }

.nav-cta {
  background: var(--pink);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 24px;
  border: none;
  cursor: none;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--white); transform: translateY(-1px); }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: none;
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* HERO */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
}

.hero-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* One photo layer for the whole hero. Previously slice-1 and slice-2 each
   painted their own copy of hero.png, so the subject appeared twice and read as
   a tiled/duplicated image. Painting it once here fixes that; the slices below
   now only add the diagonal accent on top. */
.hero-bg-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/hero.png') center 30% / cover no-repeat;
  filter: grayscale(100%) contrast(1.1);
  opacity: 0.5;
}

.hero-bg-photo .slice {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
/* Slices no longer carry the image — the ::before layer is the photo. */
.hero-bg-photo .slice-img { display: none; }
.hero-bg-photo .slice-1 {
  left: 0;
  width: 52%;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}
.hero-bg-photo .slice-2 {
  right: 0;
  width: 38%;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  /* Subtle darker diagonal panel on the right, preserving the two-tone look. */
  background: rgba(10, 10, 10, 0.35);
}
.hero-bg-photo .slice-gap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 49%;
  width: 6%;
  background: var(--black);
  z-index: 2;
  transform: skewX(-4deg);
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.75) 100%),
    linear-gradient(to bottom, rgba(10,10,10,0.6) 0%, transparent 30%, transparent 70%, rgba(10,10,10,0.8) 100%);
}

.hero-bg-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 20% 50%, rgba(255,14,164,0.07) 0%, transparent 60%);
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,14,164,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,14,164,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  padding: 0 48px;
  padding-top: 120px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.hero-eyebrow-line {
  width: 40px;
  height: 1px;
  background: var(--pink);
}
.hero-eyebrow-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pink);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(80px, 12vw, 180px);
  line-height: 0.92;
  letter-spacing: -1px;
  color: var(--white);
  margin-bottom: 0;
}
.hero-title .pink { color: var(--pink); }
.hero-title .outline {
  -webkit-text-stroke: 2px var(--white);
  color: transparent;
}
.hero-title .outline-pink {
  -webkit-text-stroke: 2px var(--pink);
  color: transparent;
}

.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 36px;
  margin-bottom: 48px;
  gap: 40px;
}
.hero-tagline {
  font-size: 18px;
  font-weight: 400;
  color: rgba(245,245,243,0.55);
  max-width: 360px;
  line-height: 1.6;
}
.hero-tagline strong { color: var(--white); font-weight: 700; }

.hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.btn-primary {
  background: var(--pink);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 18px 40px;
  border: none;
  cursor: none;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, transform 0.2s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-primary:hover { background: var(--white); transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 18px 40px;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: none;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.btn-ghost:hover { border-color: var(--pink); color: var(--pink); transform: translateY(-2px); }

.hero-scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
.scroll-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,14,164,0.8), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

.hero-badge {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.badge-circle {
  width: 140px;
  height: 140px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  position: relative;
  animation: rotateBadge 12s linear infinite;
}
.badge-circle-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotateBadge 12s linear infinite reverse;
}
.badge-center-text {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--white);
  text-align: center;
  line-height: 1;
}
.badge-center-text span { color: var(--pink); }
@keyframes rotateBadge { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.badge-curve-text {
  position: absolute;
  inset: 0;
}

/* ABOUT */
.about {
  background: var(--cream);
  padding: 80px 48px;
}
.about-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.about .section-label-text { color: rgba(10,10,10,0.5); }
.section-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}
.section-label-line {
  width: 48px;
  height: 1px;
  background: var(--pink);
}
.section-label-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(245,245,243,0.4);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-heading {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.95;
  color: var(--black);
}
.about-heading .outline {
  -webkit-text-stroke: 1.5px rgba(10,10,10,0.3);
  color: transparent;
}
.about-heading .pink { color: var(--pink); }

.about-right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.about-text {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(10,10,10,0.7);
}
.about-text strong { color: var(--black); font-weight: 700; }

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}
.stat-item {
  border-left: 2px solid var(--pink);
  padding-left: 20px;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--black);
  line-height: 1;
}
.stat-num span { color: var(--pink); }
.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(10,10,10,0.5);
  margin-top: 4px;
}

/* SERVICES */
.services {
  background: var(--black);
  padding: 80px 48px;
  position: relative;
  overflow: hidden;
}
.services-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}
.services-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}
.services-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 96px);
  line-height: 0.93;
  color: var(--white);
}
.services-title .pink { color: var(--pink); }
.services-sub {
  max-width: 300px;
  font-size: 15px;
  color: rgba(245,245,243,0.45);
  line-height: 1.6;
  text-align: right;
}

.services-grid-new {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.svc-card {
  position: relative;
  background: var(--black);
  padding: 52px 48px 48px;
  overflow: hidden;
  cursor: none;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.35s ease;
}
.svc-card:nth-child(2) { background: var(--gray); }
.svc-card:nth-child(3) { background: var(--gray); }
.svc-card:nth-child(4) { background: var(--black); }

.svc-ghost-num {
  position: absolute;
  right: -12px; top: -16px;
  font-family: var(--font-display);
  font-size: 160px;
  color: rgba(255,14,164,0.07);
  line-height: 1;
  pointer-events: none;
  transition: color 0.35s;
  user-select: none;
}
.svc-card:hover .svc-ghost-num { color: rgba(255,14,164,0.14); }

.svc-bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 40px;
  background: var(--pink);
  transition: width 0.4s ease;
}
.svc-card:hover .svc-bar { width: 100%; }

.svc-top { position: relative; z-index: 1; }
.svc-num-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 20px;
  display: block;
}
.svc-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 3.5vw, 54px);
  color: var(--white);
  line-height: 0.95;
  letter-spacing: 1px;
}

.svc-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.svc-desc {
  font-size: 15px;
  color: rgba(245,245,243,0.5);
  line-height: 1.65;
  max-width: 380px;
}
.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svc-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245,245,243,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 5px 12px;
  transition: border-color 0.2s, color 0.2s;
}
.svc-card:hover .svc-tag { border-color: rgba(255,14,164,0.3); color: rgba(245,245,243,0.6); }
.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s, transform 0.3s;
}
.svc-card:hover .svc-link { opacity: 1; transform: translateY(0); }
.svc-link-line {
  width: 28px; height: 1px; background: var(--pink); position: relative;
  transition: width 0.3s;
}
.svc-link:hover .svc-link-line { width: 44px; }
.svc-link-line::after {
  content: ''; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--pink); border-top: 1.5px solid var(--pink);
  transform: rotate(45deg);
}

/* PROJECTS */
.projects {
  padding: 80px 48px;
  max-width: 1400px;
  margin: 0 auto;
}
.projects-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
}
.projects-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 96px);
  line-height: 0.93;
}
.projects-title .outline {
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.25);
  color: transparent;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.project-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: none;
  background: var(--gray2);
}
.project-card-large {
  grid-column: span 2;
  aspect-ratio: unset;
  min-height: 500px;
}

.project-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray2);
}
.project-stripe {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    rgba(255,255,255,0.02) 20px,
    rgba(255,255,255,0.02) 21px
  );
}
.project-label-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.2);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 1px;
}

.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.4) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  transform: translateY(46px);
  transition: transform 0.4s ease;
}
.project-card:hover .project-overlay { transform: translateY(0); }

.project-tag {
  display: inline-block;
  background: var(--pink);
  color: var(--black);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 12px;
  margin-bottom: 12px;
  width: fit-content;
}
.project-name {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
}
.project-client {
  font-size: 13px;
  font-weight: 500;
  color: rgba(245,245,243,0.5);
  letter-spacing: 1px;
}

/* MARQUEE */
.marquee-section {
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 20px 0;
  overflow: hidden;
  background: var(--gray);
}
.marquee-track {
  display: flex;
  gap: 0;
  animation: marquee 20s linear infinite;
  width: max-content;
  align-items: center;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  white-space: nowrap;
}
.marquee-text {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 4px;
  color: rgba(245,245,243,0.2);
  text-transform: uppercase;
  padding: 0 32px;
}
.marquee-dot {
  width: 6px;
  height: 6px;
  background: var(--pink);
  border-radius: 50%;
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* PROCESS */
.process {
  padding: 80px 48px;
  background: var(--black);
}
.process-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.process-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 96px);
  line-height: 0.93;
  margin-bottom: 48px;
}
.process-title .pink { color: var(--pink); }

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.process-steps::after {
  content: '';
  position: absolute;
  top: 32px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,14,164,0.4), rgba(255,14,164,0.4), transparent);
}

.process-step {
  padding: 0 32px;
  position: relative;
}
.step-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pink);
  border: 3px solid var(--black);
  outline: 1px solid var(--pink);
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}
.step-num {
  font-family: var(--font-display);
  font-size: 64px;
  color: rgba(255,14,164,0.1);
  line-height: 1;
  margin-bottom: 12px;
}
.step-name {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--white);
  margin-bottom: 12px;
}
.step-desc {
  font-size: 14px;
  color: rgba(245,245,243,0.45);
  line-height: 1.65;
}

/* CTA */
.cta-section {
  background: var(--pink);
  padding: 80px 48px;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: 'WLD.';
  position: absolute;
  font-family: var(--font-display);
  font-size: 400px;
  color: rgba(0,0,0,0.06);
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  line-height: 1;
}
.cta-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  position: relative;
}
.cta-heading {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 96px);
  color: var(--black);
  line-height: 0.93;
}
.cta-heading .outline {
  -webkit-text-stroke: 2px rgba(0,0,0,0.3);
  color: transparent;
}
.cta-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 300px;
}
.cta-sub {
  font-size: 17px;
  color: rgba(0,0,0,0.65);
  line-height: 1.6;
}
.btn-dark {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 20px 48px;
  border: none;
  cursor: none;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, transform 0.2s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn-dark:hover { background: #1a1a1a; transform: translateY(-2px); }

/* FOOTER */
footer {
  background: var(--gray);
  padding: 80px 48px 40px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.footer-brand-wld {
  font-family: var(--font-display);
  font-size: 52px;
  color: var(--white);
  line-height: 1;
  margin-bottom: 4px;
}
.footer-brand-wld span { color: var(--pink); }
.footer-brand-sub {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(245,245,243,0.3);
  margin-bottom: 20px;
}
.footer-tagline {
  font-size: 14px;
  color: rgba(245,245,243,0.4);
  line-height: 1.6;
  max-width: 280px;
}

.footer-col-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(245,245,243,0.3);
  margin-bottom: 24px;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links a {
  font-size: 14px;
  color: rgba(245,245,243,0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--pink); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-copy {
  font-size: 12px;
  color: rgba(245,245,243,0.25);
  letter-spacing: 1px;
}
.footer-social {
  display: flex;
  gap: 16px;
}
.social-link {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
  cursor: none;
}
.social-link:hover {
  border-color: var(--pink);
  background: var(--pink);
}
.social-link svg {
  width: 14px;
  height: 14px;
  fill: rgba(245,245,243,0.6);
  transition: fill 0.2s;
}
.social-link:hover svg { fill: var(--black); }


/* Responsive */
@media (max-width: 900px) {
  nav { padding: 20px 24px; }
  nav.scrolled { padding: 14px 24px; }
  .nav-burger { display: flex; }
  /* Let's Talk moves into the hamburger menu on mobile; the header button is hidden */
  .nav-cta-header { display: none; }
  .nav-links-cta-item { display: block; }
  .nav-menu-cta { display: inline-block; }
  /* Contact is redundant in the hamburger — the Let's Talk button below it
     goes to the same page. */
  .nav-link-contact { display: none; }
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: -1;
    /* Solid, not translucent — this is a full-screen takeover. It sits at a
       negative z-index so the logo and burger still paint above it, but above
       nav's own background so it covers the header strip too. */
    background: var(--black);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    padding: 96px 24px 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  nav.menu-open .nav-links {
    opacity: 1;
    visibility: visible;
  }
  .nav-links a {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 3px;
  }
  .nav-links a::after { height: 2px; bottom: 0; }
  .nav-links .nav-menu-cta {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--black);
    padding: 14px 32px;
  }
  .nav-links .nav-menu-cta::after { display: none; }
  /* The hero art is .hero-bg-photo at inset:0, so the section's own height is
     what sizes the image. A full 100vh left a lot of empty photo once the type
     scaled down. min-height (not height) so the section still grows if the
     content needs it. */
  .hero { min-height: 78vh; min-height: 78dvh; }
  .hero-content { padding: 0 24px; padding-top: 92px; }
  /* The ::before photo already fills the hero as one image; on mobile drop the
     diagonal panel and divider so it reads as a clean, less-cropped full image. */
  .hero-bg-photo .slice-2,
  .hero-bg-photo .slice-gap { display: none; }
  .hero-bg-photo::before { background-position: center 25%; opacity: 0.55; }
  .hero-badge { display: none; }
  .hero-scroll-indicator { display: none; }
  .hero-bottom { flex-direction: column; align-items: flex-start; margin-top: 26px; margin-bottom: 32px; }
  .hero-cta-group { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .hero-eyebrow { margin-bottom: 22px; }
  .about { padding: 60px 24px; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .services { padding: 60px 24px; }
  /* .services-header is a space-between row; the sub squeezes the "WHAT WE DO"
     heading at phone widths, and the four cards below already say the same thing. */
  .services-sub { display: none; }
  /* Collapse "WHAT / WE DO" onto one line. The markup is WHAT<br /><span>WE DO</span>
     with no space around the break, so dropping the br alone would give "WHATWE DO"
     — the ::before restores the word gap. */
  .services-title br { display: none; }
  .services-title .pink::before { content: '\00a0'; }
  /* Service cards become a swipe carousel — native CSS scroll-snap, no JS.
     The negative margin bleeds the track out to the screen edges while the
     matching padding keeps the first card inset, so the next card peeks in.
     That peek is what tells the user it can be swiped. */
  .services-grid-new {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    /* Stops the horizontal swipe from triggering the browser's back gesture. */
    overscroll-behavior-x: contain;
    margin: 0 -24px;
    padding: 0 24px;
    scrollbar-width: none;
  }
  .services-grid-new::-webkit-scrollbar { display: none; }
  .svc-card {
    flex: 0 0 auto;
    width: min(78vw, 340px);
    scroll-snap-align: start;
    min-height: 260px;
    padding: 36px 28px;
  }
  /* Touch has no hover, so the card's arrow link would otherwise never appear. */
  .svc-link {
    opacity: 1;
    transform: none;
    font-size: 9.5px;
    letter-spacing: 2px;
    gap: 8px;
  }
  .svc-link-line { width: 20px; }
  /* Same sticky-hover problem — without this the line latches to its 44px
     hover width after a tap and never springs back. */
  .svc-link:hover .svc-link-line { width: 20px; }
  .svc-link-line::after { width: 6px; height: 6px; top: -2.5px; }
  /* A tap leaves :hover stuck on touch devices, so the tag chips would latch
     pink and stay that way. Hold them at their resting colours. */
  .svc-card:hover .svc-tag {
    border-color: rgba(255,255,255,0.08);
    color: rgba(245,245,243,0.35);
  }
  .projects { padding: 60px 24px; }
  /* Same swipe carousel as the service cards above. */
  .projects-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    overscroll-behavior-x: contain;
    margin: 0 -24px;
    padding: 0 24px;
    scrollbar-width: none;
  }
  .projects-grid::-webkit-scrollbar { display: none; }
  .project-card {
    flex: 0 0 auto;
    width: min(74vw, 320px);
    scroll-snap-align: start;
  }
  /* The featured card spans two columns and drops its aspect ratio on desktop.
     In a single-row track it has to match the others or the track goes ragged. */
  .project-card-large { aspect-ratio: 3/4; min-height: 0; }
  /* The caption is parked 46px down and only slides up on hover, so on touch it
     would sit half cut off. Show it outright. */
  .project-overlay { transform: translateY(0); padding: 20px; }
  .projects-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .btn-ghost { padding: 12px 22px; font-size: 11px; letter-spacing: 2px; }
  .process { padding: 60px 24px; }
  .process-steps { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .process-steps::after { display: none; }
  /* Steps carry 32px of side padding to space the desktop 4-across row, which
     indents them past the section heading. Drop it so the step text lines up
     with "THE PROCESS" at the section's own 24px edge. */
  .process-step { padding: 0; }
  .step-dot { margin-bottom: 16px; }
  .cta-section { padding: 44px 24px; }
  /* align-items:center governs the horizontal axis once the direction flips to
     column, which is what was centring "READY TO GO WILD?". */
  .cta-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  /* min-width:300px is wider than a 320px screen once side padding is removed. */
  .cta-right { min-width: 0; gap: 16px; }
  footer { padding: 60px 24px 32px; }
  /* Trim the footer to the essentials on mobile: brand mark + Studio nav.
     Services duplicates the Studio > page links, Connect duplicates the social
     icons in the footer bottom bar, and the tagline repeats the hero. */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .footer-col-services,
  .footer-col-connect { display: none; }
}

/* =====================
   INNER PAGE SHARED
   ===================== */

nav.solid {
  background: rgba(10,10,10,0.98);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.page-hero {
  padding: 160px 48px 80px;
  background: var(--black);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(255,14,164,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero-inner { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
.page-hero-media {
  /* Fill the hero vertically: from just below the fixed nav down to the
     section's bottom border. Right-anchored; the wider box extends left while
     the fixed height makes object-fit:cover crop the image top and bottom. */
  position: absolute; top: 88px; right: 0; bottom: 0;
  width: 70vw; max-width: 1180px; z-index: 0;
  opacity: 0;
  animation: heroImgFade 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.page-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; display: block; }
.page-hero-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, var(--black) 0%, rgba(10,10,10,0.65) 28%, rgba(10,10,10,0) 62%);
}
@keyframes heroImgFade {
  from { opacity: 0; transform: translateX(48px); }
  to { opacity: 1; transform: translateX(0); }
}
.page-hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.page-hero-line { width: 40px; height: 1px; background: var(--pink); }
.page-hero-eyebrow-text { font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--pink); }
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(72px, 11vw, 160px);
  line-height: 0.93;
  color: var(--white);
}
.page-hero-title .outline { -webkit-text-stroke: 2px rgba(255,255,255,0.25); color: transparent; }
.page-hero-title .pink { color: var(--pink); }
/* Keeps "LET'S GO WILD." on a single line (contact hero) at all widths. */
.page-hero-title--nowrap { white-space: nowrap; }
.page-hero-sub {
  max-width: 560px; font-size: 18px; color: rgba(245,245,243,0.55);
  line-height: 1.65; margin-top: 28px;
}

/* =====================
   ABOUT PAGE
   ===================== */

.story { padding: 60px 48px; max-width: 1400px; margin: 0 auto; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.story-heading {
  font-family: var(--font-display);
  font-size: clamp(52px, 6vw, 88px);
  line-height: 0.95; color: var(--white);
}
.story-heading .outline { -webkit-text-stroke: 1.5px rgba(255,255,255,0.25); color: transparent; }
.story-heading .pink { color: var(--pink); }
.story-right { display: flex; flex-direction: column; gap: 24px; }
.story-text { font-size: 17px; font-weight: 400; line-height: 1.75; color: rgba(245,245,243,0.65); }
.story-text strong { color: var(--white); font-weight: 700; }

.beliefs { background: #0d0a0d; padding: 60px 48px; position: relative; overflow: hidden; border-top: 2px solid var(--pink); }
.beliefs-inner { max-width: 1400px; margin: 0 auto; }
.beliefs-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 40px; }
.beliefs-title { font-family: var(--font-display); font-size: clamp(48px, 6vw, 88px); line-height: 0.93; }
.beliefs-title .pink { color: var(--pink); }
.beliefs-title .about-line { font-size: 0.7em; letter-spacing: 1px; display: inline-block; margin-top: 12px; color: var(--white); }
.beliefs-title .outline { -webkit-text-stroke: 1.5px var(--white); color: transparent; }
.beliefs-intro { font-size: 15px; color: rgba(245,245,243,0.4); line-height: 1.7; max-width: 360px; text-align: right; border-right: 2px solid var(--pink); padding-right: 20px; }

.beliefs-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.belief-item {
  background: var(--gray);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 48px 36px 44px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 32px; position: relative; overflow: hidden;
  min-height: 260px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.belief-item:nth-child(1)  { background: rgba(245,245,243,0.92); border-color: rgba(245,245,243,0.9); }
.belief-item:nth-child(1) .belief-num { color: rgba(255,14,164,0.6); }
.belief-item:nth-child(1) .belief-text { color: var(--black); }
.belief-item:nth-child(1) .belief-text span { color: var(--pink); }
.belief-item:nth-child(2)  { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.belief-item:nth-child(3)  { background: rgba(255,14,164,0.08); border-color: rgba(255,14,164,0.2); }
.belief-item:nth-child(5)  { background: #1e1a1e; }
.belief-item:nth-child(6)  { background: rgba(255,14,164,0.08); border-color: rgba(255,14,164,0.2); }
.belief-item:nth-child(7)  { background: rgba(245,245,243,0.92); border-color: rgba(245,245,243,0.9); }
.belief-item:nth-child(7) .belief-num { color: rgba(255,14,164,0.6); }
.belief-item:nth-child(7) .belief-text { color: var(--black); }
.belief-item:nth-child(7) .belief-text span { color: var(--pink); }
.belief-item:nth-child(8)  { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.belief-item:hover { border-color: var(--pink); background: #222; }
.belief-item:nth-child(3):hover,
.belief-item:nth-child(6):hover { background: rgba(255,14,164,0.14); }
.belief-item:nth-child(1):hover,
.belief-item:nth-child(7):hover { background: rgba(245,245,243,1); border-color: white; }
.belief-item::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 3px; background: var(--pink); transition: width 0.5s ease;
}
.belief-item:hover::after { width: 100%; }
.belief-item::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 3px; height: 0; background: var(--pink); transition: height 0.5s ease;
}
.belief-item:hover::before { height: 100%; }
.belief-num { font-family: var(--font-display); font-size: 15px; letter-spacing: 4px; color: var(--pink); line-height: 1; user-select: none; opacity: 0.7; transition: opacity 0.3s; }
.belief-item:hover .belief-num { opacity: 1; }
.belief-text { font-size: clamp(18px, 1.6vw, 22px); color: rgba(245,245,243,0.92); line-height: 1.45; font-weight: 400; }
.belief-text span { color: var(--pink); font-weight: 700; }

.team { padding: 60px 48px; max-width: 1400px; margin: 0 auto; }
.team-title { font-family: var(--font-display); font-size: clamp(52px, 6vw, 88px); line-height: 0.93; margin-bottom: 40px; }
.team-title .pink { color: var(--pink); }
.team-grid { display: grid; grid-template-columns: 280px 1fr; max-width: 1100px; margin: 0 auto; gap: 60px; align-items: center; }
.team-card { position: relative; overflow: hidden; background: var(--gray); aspect-ratio: 3/4; }
.team-placeholder {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255,255,255,0.015) 20px, rgba(255,255,255,0.015) 21px);
  display: flex; align-items: center; justify-content: center;
}
.team-placeholder-label { font-family: monospace; font-size: 11px; color: rgba(255,255,255,0.15); text-align: center; letter-spacing: 1px; padding: 16px; }
.team-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.team-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 24px 24px; background: linear-gradient(to top, rgba(10,10,10,0.97) 0%, rgba(10,10,10,0.7) 60%, transparent 100%); z-index: 2; }
.team-name { font-family: var(--font-display); font-size: 24px; color: var(--white); line-height: 1; margin-bottom: 6px; }
.team-role { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--pink); }
.team-info-block { display: flex; flex-direction: column; gap: 28px; }
.team-info-bio { font-size: 16px; color: rgba(245,245,243,0.7); line-height: 1.65; max-width: 520px; }
.team-info-bio strong { color: var(--white); }
.team-info-tag { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); color: var(--white); line-height: 1.05; letter-spacing: 1px; }
.team-info-tag .pink { color: var(--pink); }
.team-info-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; max-width: 520px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); }
.team-meta-item { display: flex; flex-direction: column; gap: 6px; }
.team-meta-label { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(245,245,243,0.4); }
.team-meta-value { font-size: 14px; color: var(--white); line-height: 1.4; }

.founder-quote { background: var(--black); padding: 60px 48px; position: relative; overflow: hidden; }
.founder-quote::before {
  content: '"'; position: absolute; font-family: var(--font-display);
  font-size: 500px; color: rgba(255,14,164,0.04);
  top: -100px; left: -40px; line-height: 1; pointer-events: none;
}
.founder-quote-inner { max-width: 1000px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.quote-text {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1.1; color: var(--white); margin-bottom: 40px;
  min-height: 3.3em;
  position: relative;
}
.quote-text .pink { color: var(--pink); }
.quote-text .outline { -webkit-text-stroke: 1.5px rgba(255,255,255,0.3); color: transparent; }
/* Slides crossfade via opacity rather than display:none/block. iOS WebKit
   often skips repainting a display change on text that uses -webkit-text-stroke
   with transparent fill, which froze the rotator on real devices. An opacity
   transition on a composited layer (translateZ) repaints reliably. */
.quote-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  transform: translateZ(0);
}
.quote-slide.active {
  opacity: 1; visibility: visible;
  transition: opacity 0.5s ease;
}
.quote-nav { display: flex; gap: 12px; justify-content: center; margin-top: 32px; }
.quote-dot { width: 28px; height: 2px; background: rgba(255,255,255,0.15); border: none; cursor: pointer; transition: background 0.3s; padding: 0; }
.quote-dot.active { background: var(--pink); }
.quote-dot:hover { background: rgba(255,14,164,0.5); }
.quote-attr { font-size: 13px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: rgba(245,245,243,0.35); }
.quote-attr span { color: var(--pink); }

.about-cta { background: var(--cream); padding: 60px 48px; position: relative; overflow: hidden; }
.about-cta::before {
  content: 'WLD.'; position: absolute; font-family: var(--font-display);
  font-size: 400px; color: rgba(255,14,164,0.10);
  right: -60px; top: 50%; transform: translateY(-50%);
  pointer-events: none; line-height: 1;
}
.about-cta .btn-dark { background: var(--pink); color: var(--white); }
.about-cta .btn-dark:hover { background: #d80b8b; }
.about-cta-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 60px; position: relative; }
.about-cta-heading { font-family: var(--font-display); font-size: clamp(48px, 6vw, 88px); color: var(--black); line-height: 0.93; }
.about-cta-heading .outline { -webkit-text-stroke: 0; color: var(--pink); }
.about-cta-right { display: flex; flex-direction: column; gap: 20px; min-width: 280px; }
.about-cta-sub { font-size: 17px; color: rgba(0,0,0,0.65); line-height: 1.6; }

@media (max-width: 900px) {
  .page-hero { padding: 120px 24px 40px; }
  /* On mobile the image sits behind the words as a full-bleed background rather
     than stacked above them. */
  .page-hero-media {
    position: absolute; inset: 0;
    width: auto; max-width: none; margin: 0;
  }
  /* scale() zooms in without changing the box; .page-hero clips the overflow.
     Horizontal object-position shifts the crop left (higher % shows more of the
     right side, so the image slides left) — unlike translate it never gaps. */
  .page-hero-img { height: 100%; object-position: 78% 30%; transform: scale(1.18); }
  /* Left fade carries the text (it's left-aligned): solid black at the edge,
     gone by ~62% across. A vertical wash underneath lifts legibility top and
     bottom without flattening the whole image. */
  .page-hero-media::after {
    display: block;
    background:
      linear-gradient(to right,
        var(--black) 0%,
        rgba(10,10,10,0.88) 32%,
        rgba(10,10,10,0) 62%),
      linear-gradient(to bottom,
        rgba(10,10,10,0.62) 0%,
        rgba(10,10,10,0.32) 45%,
        rgba(10,10,10,0.68) 100%);
  }
  .story { padding: 40px 24px; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .beliefs { padding: 40px 24px; }
  .beliefs-header { flex-direction: column; align-items: flex-start; }
  .beliefs-intro { text-align: left; border-right: none; border-left: 2px solid var(--pink); padding-right: 0; padding-left: 20px; }
  /* grid-auto-rows:1fr equalises every row to the tallest, so all belief blocks
     match the largest one instead of sizing to their own content. */
  .beliefs-list { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
  .team { padding: 40px 24px; }
  /* Single column so the portrait sits above the bio. The desktop card uses
     aspect-ratio + an absolutely-positioned cover image, which iOS WebKit
     mis-sizes to a tiny corner box on a flex/grid item. Letting the <img> flow
     naturally (static, height auto) sizes the card off the image itself and
     renders correctly everywhere. */
  .team-grid { grid-template-columns: 1fr; gap: 32px; }
  .team-card { aspect-ratio: auto; max-width: 320px; }
  .team-photo { position: static; width: 100%; height: auto; display: block; }
  .founder-quote { padding: 40px 24px; }
  .about-cta { padding: 36px 24px; }
  /* align-items:center governs the horizontal axis once stacked — left-align it
     and tighten the gap so the heading and CTA sit closer. */
  .about-cta-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .about-cta-right { min-width: 0; gap: 14px; }
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */

/* SERVICE BLOCKS */
.service-block { padding: 100px 48px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.service-block:nth-child(even) { background: var(--gray); }
.service-block-inner { max-width: 1400px; margin: 0 auto; }

.service-block-header {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-bottom: 72px;
}
.service-block-num {
  font-family: var(--font-display); font-size: 140px;
  color: rgba(255,14,164,0.08); line-height: 1;
  position: absolute; right: 0; top: 0;
}
.service-block-title-wrap { position: relative; }
.service-block-tag {
  display: inline-block; background: var(--pink); color: var(--black);
  font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  padding: 6px 14px; margin-bottom: 20px;
}
.service-block-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 88px); line-height: 0.93; color: var(--white);
}
.service-block-title .outline { -webkit-text-stroke: 1.5px rgba(255,255,255,0.25); color: transparent; }
.service-block-desc { font-size: 17px; color: rgba(245,245,243,0.6); line-height: 1.75; margin-top: 16px; }
.service-block-desc strong { color: var(--white); }
.service-block-note { font-size: 13px; color: var(--pink); font-style: italic; margin-top: 12px; line-height: 1.6; }

/* PACKAGES */
.packages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.package-card {
  background: var(--black); padding: 48px 40px;
  position: relative; overflow: hidden;
  border-top: 3px solid transparent;
  transition: border-color 0.3s;
}
.service-block:nth-child(even) .package-card { background: var(--gray2); }
.package-card.featured { border-top-color: var(--pink); }
.package-card:hover { border-top-color: var(--pink); }
.package-badge {
  display: inline-block; background: var(--pink); color: var(--black);
  font-size: 9px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  padding: 4px 10px; margin-bottom: 20px;
}
.package-name { font-family: var(--font-display); font-size: 36px; color: var(--white); margin-bottom: 8px; line-height: 1; }
.package-period { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(245,245,243,0.35); margin-bottom: 32px; }
.package-divider { height: 1px; background: rgba(255,255,255,0.08); margin-bottom: 28px; }
.package-features { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.package-features li {
  font-size: 14px; color: rgba(245,245,243,0.6); line-height: 1.5;
  padding-left: 20px; position: relative;
}
.package-features li::before { content: '—'; position: absolute; left: 0; color: var(--pink); font-weight: 700; }
.package-cta { display: block; margin-top: 36px; text-align: center; }

/* INCLUDED LIST */
.included-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.included-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px; background: var(--black); border-left: 2px solid var(--pink);
}
.service-block:nth-child(even) .included-item { background: var(--gray2); }
.included-check { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.included-check svg { width: 20px; height: 20px; stroke: var(--pink); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.included-text { font-size: 15px; color: rgba(245,245,243,0.7); line-height: 1.5; }
.included-text strong { color: var(--white); display: block; font-size: 14px; letter-spacing: 0.5px; }

/* SERVICES CTA BAND */
.services-cta { background: var(--pink); padding: 80px 48px; position: relative; overflow: hidden; }
.services-cta::before { content: 'WLD.'; position: absolute; font-family: var(--font-display); font-size: 400px; color: rgba(0,0,0,0.06); right: -60px; top: 50%; transform: translateY(-50%); pointer-events: none; line-height: 1; }
.services-cta-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 60px; position: relative; }
.services-cta-heading { font-family: var(--font-display); font-size: clamp(48px, 6vw, 88px); color: var(--black); line-height: 0.93; }
.services-cta-heading .outline { -webkit-text-stroke: 2px rgba(0,0,0,0.25); color: transparent; }
.services-cta-right { display: flex; flex-direction: column; gap: 20px; min-width: 280px; }
.services-cta-sub { font-size: 17px; color: rgba(0,0,0,0.65); line-height: 1.6; }

@media (max-width: 900px) {
  .service-block { padding: 28px 24px; }
  .service-block-header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  /* Package cards become a swipe carousel, same as the other mobile carousels. */
  .packages-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    overscroll-behavior-x: contain;
    margin: 0 -24px;
    padding: 0 24px;
    scrollbar-width: none;
  }
  .packages-grid::-webkit-scrollbar { display: none; }
  .package-card {
    flex: 0 0 auto;
    width: min(80vw, 320px);
    scroll-snap-align: start;
  }
  /* Keep the included items two-across on mobile with tighter padding and a
     smaller icon gap so they stay compact in the narrow cells. */
  .included-list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .included-item { padding: 14px; gap: 10px; }
  .included-check { display: none; }
  .included-text { font-size: 11px; line-height: 1.4; }
  .included-text strong { font-size: 11.5px; letter-spacing: 0; }
  .services-cta { padding: 36px 24px; }
  /* Left-align "NOT SURE WHERE TO START?" (align-items:center governs the
     horizontal axis once stacked) and tighten the gap. */
  .services-cta-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .services-cta-right { min-width: 0; gap: 14px; }
}

/* ============================================================
   PROJECTS PAGE
   ============================================================ */

/* FILTER BAR */
.filter-bar { padding: 0 48px 48px; max-width: 1400px; margin: 0 auto; }
.filter-bar-inner { display: flex; gap: 12px; flex-wrap: wrap; }
.filter-btn {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 10px 22px; border: 1px solid rgba(255,255,255,0.12);
  background: transparent; color: rgba(245,245,243,0.5);
  cursor: none; transition: all 0.2s;
}
.filter-btn:hover, .filter-btn.active {
  border-color: var(--pink); color: var(--pink); background: rgba(255,14,164,0.06);
}
.filter-btn.active { background: var(--pink); color: var(--black); border-color: var(--pink); }

/* PROJECTS GRID */
.projects-section { padding: 0 48px 100px; max-width: 1400px; margin: 0 auto; }
.projects-masonry { column-count: 3; column-gap: 16px; }
.project-item {
  position: relative; overflow: hidden; background: var(--gray2);
  cursor: none;
  display: block; break-inside: avoid; margin-bottom: 16px;
}
.proj-img { display: block; width: 100%; height: auto; }
.proj-img--tallcrop { aspect-ratio: 5 / 4; height: auto; object-fit: cover; }

.proj-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.3) 50%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px; transform: translateY(42px); transition: transform 0.4s ease;
}
.project-item:hover .proj-overlay { transform: translateY(0); }
.proj-tag { display: inline-block; background: var(--pink); color: var(--black); font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: 4px 10px; margin-bottom: 10px; width: fit-content; }
.proj-name { font-family: var(--font-display); font-size: 28px; color: var(--white); line-height: 1; margin-bottom: 6px; }
.proj-desc { font-size: 13px; color: rgba(245,245,243,0.5); }
.project-item .proj-img { cursor: pointer; }

/* PROJECT VIDEO CARDS */
.proj-video { display: block; width: 100%; aspect-ratio: 5 / 4; height: auto; object-fit: cover; cursor: pointer; background: var(--black); }

/* IMAGE LIGHTBOX */
.lightbox {
  position: fixed; inset: 0; z-index: 900;
  display: none; align-items: center; justify-content: center;
  padding: 48px;
  background: rgba(20,20,20,0.9);
  backdrop-filter: blur(6px);
}
.lightbox.open { display: flex; }
.lightbox-img {
  max-width: 90vw; max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.lightbox-video {
  max-width: 90vw; max-height: 88vh;
  object-fit: contain;
  background: var(--black);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.lightbox-close {
  position: absolute; top: 24px; right: 32px; z-index: 3;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--white); font-size: 40px; line-height: 1;
  cursor: pointer; transition: color 0.2s, transform 0.2s;
}
.lightbox-close:hover { color: var(--pink); transform: scale(1.1); }

/* STATS BAND */
.stats-band { background: var(--gray); padding: 60px 48px; }
.stats-band-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat-band-item { text-align: center; padding: 20px; border-right: 1px solid rgba(255,255,255,0.06); }
.stat-band-item:last-child { border-right: none; }
.stat-band-num { font-family: var(--font-display); font-size: 72px; color: var(--white); line-height: 1; }
.stat-band-num span { color: var(--pink); }
.stat-band-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(245,245,243,0.35); margin-top: 8px; }

/* REVIEWS */
.reviews { padding: 100px 48px; background: var(--black); }
.reviews-inner { max-width: 1400px; margin: 0 auto; }
.reviews-title { font-family: var(--font-display); font-size: clamp(52px, 6vw, 88px); line-height: 0.93; margin-bottom: 64px; }
.reviews-title .pink { color: var(--pink); }
.reviews-title .outline { -webkit-text-stroke: 1.5px rgba(255,255,255,0.2); color: transparent; }
.reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.review-card {
  background: var(--gray); padding: 40px 36px;
  position: relative; overflow: hidden;
  border-left: 2px solid transparent;
  transition: border-color 0.3s;
}
.review-card:hover { border-left-color: var(--pink); }
.review-stars { display: flex; gap: 4px; margin-bottom: 20px; }
.review-stars span { color: var(--pink); font-size: 16px; }
.review-quote-mark {
  font-family: var(--font-display); font-size: 80px; color: rgba(255,14,164,0.1);
  line-height: 0.7; margin-bottom: 8px;
}
.review-text { font-size: 16px; color: rgba(245,245,243,0.7); line-height: 1.7; font-style: italic; margin-bottom: 28px; }
.review-text strong { color: var(--pink); font-style: normal; }
.review-divider { height: 1px; background: rgba(255,255,255,0.07); margin-bottom: 20px; }
.review-author { display: flex; align-items: center; gap: 14px; }
.review-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--gray2);
  border: 1.5px solid rgba(255,14,164,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 18px; color: var(--pink); flex-shrink: 0;
}
.review-name { font-size: 14px; font-weight: 700; color: var(--white); }
.review-company { font-size: 11px; letter-spacing: 1px; color: rgba(245,245,243,0.35); text-transform: uppercase; margin-top: 2px; }

/* PROJECTS CTA BAND */
.projects-cta { background: var(--pink); padding: 80px 48px; position: relative; overflow: hidden; }
.projects-cta::before { content: 'WLD.'; position: absolute; font-family: var(--font-display); font-size: 400px; color: rgba(0,0,0,0.06); right: -60px; top: 50%; transform: translateY(-50%); pointer-events: none; line-height: 1; }
.projects-cta-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 60px; position: relative; }
.projects-cta-heading { font-family: var(--font-display); font-size: clamp(48px, 6vw, 88px); color: var(--black); line-height: 0.93; }
.projects-cta-heading .outline { -webkit-text-stroke: 2px rgba(0,0,0,0.25); color: transparent; }
.projects-cta-right { display: flex; flex-direction: column; gap: 20px; min-width: 280px; }
.projects-cta-sub { font-size: 17px; color: rgba(0,0,0,0.65); line-height: 1.6; }

@media (max-width: 900px) {
  .filter-bar { padding: 0 24px 32px; }
  .filter-btn { font-size: 9px; letter-spacing: 1.5px; padding: 7px 14px; }
  .projects-section { padding: 0 24px 60px; }
  .projects-masonry { column-count: 2; }
  .stats-band { padding: 40px 24px; }
  .stats-band-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-band-item:nth-child(2) { border-right: none; }
  .reviews { padding: 60px 24px; }
  /* Same swipe carousel as the services/projects cards. */
  .reviews-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    overscroll-behavior-x: contain;
    margin: 0 -24px;
    padding: 0 24px;
    scrollbar-width: none;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .review-card {
    flex: 0 0 auto;
    width: min(82vw, 360px);
    scroll-snap-align: start;
  }
  .projects-cta { padding: 36px 24px; }
  /* Left-align the heading (align-items:center governs the horizontal axis once
     stacked) and tighten the gap. */
  .projects-cta-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .projects-cta-right { min-width: 0; gap: 14px; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-body { padding: 80px 48px 120px; max-width: 1400px; margin: 0 auto; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }

/* FORM */
.form-title { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); line-height: 0.93; margin-bottom: 40px; }
.form-title .pink { color: var(--pink); }

.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.form-label { font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: rgba(245,245,243,0.45); }
.form-input, .form-textarea, .form-select {
  background: var(--gray); border: 1px solid rgba(255,255,255,0.08);
  color: var(--white); font-family: var(--font-body); font-size: 15px;
  padding: 16px 20px; outline: none; width: 100%;
  transition: border-color 0.2s; cursor: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--pink); }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(245,245,243,0.25); }
.form-textarea { resize: vertical; min-height: 140px; }
.form-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.4)' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center;
}
.form-select option { background: var(--gray); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-check { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
.form-check input { width: 18px; height: 18px; accent-color: var(--pink); margin-top: 2px; flex-shrink: 0; cursor: none; }
.form-check label { font-size: 13px; color: rgba(245,245,243,0.5); line-height: 1.5; cursor: none; }
.form-check label a { color: var(--pink); text-decoration: none; }
.form-submit { width: 100%; background: var(--pink); color: var(--black); font-family: var(--font-body); font-size: 13px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; padding: 20px; border: none; cursor: none; transition: background 0.2s, transform 0.2s; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.form-submit:hover { background: var(--white); transform: translateY(-2px); }
.form-success { display: none; background: rgba(255,14,164,0.1); border: 1px solid rgba(255,14,164,0.3); padding: 20px 24px; text-align: center; }
.form-success p { font-size: 15px; color: var(--white); line-height: 1.6; }
.form-success strong { color: var(--pink); }
.form-error { background: rgba(255,60,60,0.08); border: 1px solid rgba(255,60,60,0.25); padding: 16px 20px; }
.form-error p { font-size: 14px; color: rgba(245,245,243,0.8); line-height: 1.6; }
.form-validation-msg { font-size: 12px; color: #ff6b6b; margin-top: 4px; }

/* CONTACT INFO */
.contact-info { position: sticky; top: 120px; }
.info-intro { font-size: 17px; color: rgba(245,245,243,0.55); line-height: 1.7; margin-bottom: 48px; }
.info-intro strong { color: var(--white); }
.info-items { display: flex; flex-direction: column; gap: 0; margin-bottom: 48px; }
.info-item {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.info-item:first-child { border-top: 1px solid rgba(255,255,255,0.06); }
.info-icon { width: 44px; height: 44px; border: 1px solid rgba(255,14,164,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-icon svg { width: 18px; height: 18px; stroke: var(--pink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.info-label { font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: rgba(245,245,243,0.35); margin-bottom: 6px; }
.info-value { font-size: 16px; color: var(--white); line-height: 1.4; }
.info-value a { color: var(--white); text-decoration: none; transition: color 0.2s; }
.info-value a:hover { color: var(--pink); }

.social-section { margin-top: 8px; }
.social-section-title { font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: rgba(245,245,243,0.35); margin-bottom: 16px; }
.social-links-row { display: flex; gap: 10px; }

/* RESPONSE TIME BADGE */
.response-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,14,164,0.08); border: 1px solid rgba(255,14,164,0.2);
  padding: 12px 20px; margin-bottom: 40px;
}
.response-dot { width: 8px; height: 8px; background: var(--pink); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.3)} }
.response-text { font-size: 12px; font-weight: 600; letter-spacing: 1px; color: rgba(245,245,243,0.6); }
.response-text strong { color: var(--pink); }
/* Duplicate badge that only appears under the form header on mobile. */
.response-badge--mobile { display: none; }

@media (max-width: 900px) {
  /* Trim the top padding to close the gap between the hero and the form. */
  .contact-body { padding: 24px 24px 60px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-info { position: static; }
  .form-row { grid-template-columns: 1fr; }
  /* Show the badge below "SEND US A MESSAGE"; hide the one in the info column. */
  .response-badge--mobile { display: inline-flex; margin-bottom: 28px; }
  .contact-info .response-badge { display: none; }
  /* Follow Us is duplicated by the footer social icons — drop it here on mobile. */
  .contact-info .social-section { display: none; }
}

/* ============================================================
   MOBILE TYPOGRAPHY SCALE
   Last block in the file so it wins on source order. Desktop
   sizes are tuned for 1400px canvases and read far too large on
   a phone, so every display/body/label size is restated here.
   ============================================================ */

@media (max-width: 900px) {
  /* Display headings */
  .hero-title { font-size: clamp(48px, 13vw, 76px); letter-spacing: 0; }
  .hero-title .outline { -webkit-text-stroke-width: 1.5px; }
  .hero-title .outline-pink { -webkit-text-stroke-width: 1.5px; }
  .page-hero-title { font-size: clamp(44px, 12vw, 64px); }
  .page-hero-title .outline { -webkit-text-stroke-width: 1.5px; }

  .about-heading,
  .story-heading,
  .beliefs-title,
  .team-title,
  .reviews-title,
  .service-block-title,
  .services-cta-heading,
  .about-cta-heading,
  .projects-cta-heading { font-size: clamp(34px, 9vw, 52px); }
  .about-heading .outline,
  .story-heading .outline,
  .beliefs-title .outline,
  .reviews-title .outline,
  .service-block-title .outline,
  .services-cta-heading .outline,
  .projects-cta-heading .outline { -webkit-text-stroke-width: 1px; }

  .services-title,
  .projects-title,
  .process-title,
  .cta-heading { font-size: clamp(34px, 9vw, 52px); }
  .projects-title .outline,
  .cta-heading .outline { -webkit-text-stroke-width: 1px; }

  .svc-title { font-size: clamp(28px, 7vw, 38px); }
  .form-title { font-size: clamp(32px, 8vw, 46px); }
  .quote-text { font-size: clamp(24px, 6vw, 36px); }
  .team-info-tag { font-size: clamp(22px, 5vw, 30px); }
  .belief-text { font-size: 15px; line-height: 1.5; }

  /* Body copy */
  .hero-tagline,
  .page-hero-sub { font-size: 15px; }
  .about-text,
  .story-text,
  .service-block-desc,
  .cta-sub,
  .about-cta-sub,
  .services-cta-sub,
  .projects-cta-sub,
  .info-intro { font-size: 14.5px; line-height: 1.7; }
  .svc-desc,
  .form-success p { font-size: 13.5px; }
  .review-text,
  .team-info-bio,
  .info-value { font-size: 14px; }
  .step-desc,
  .package-features li,
  .footer-links a,
  .footer-tagline,
  .beliefs-intro { font-size: 13px; }
  .proj-desc,
  .project-client,
  .form-check label,
  .service-block-note { font-size: 12px; }

  /* Numerals and card titles */
  .stat-num { font-size: 34px; }
  .stat-band-num { font-size: 44px; }
  .step-num { font-size: 44px; }
  .step-name { font-size: 21px; }
  .package-name { font-size: 28px; }
  .project-name { font-size: 24px; }
  .proj-name { font-size: 20px; }
  .team-name { font-size: 20px; }
  .footer-brand-wld { font-size: 32px; }
  .marquee-text { font-size: 16px; letter-spacing: 3px; padding: 0 22px; }
  .review-quote-mark { font-size: 52px; }
  .review-avatar { width: 38px; height: 38px; font-size: 16px; }

  /* Oversized decorative glyphs — these overflow badly at phone widths */
  .svc-ghost-num { font-size: 96px; }
  .service-block-num { font-size: 80px; }
  .founder-quote::before { font-size: 240px; top: -50px; left: -20px; }
  .cta-section::before,
  .services-cta::before,
  .projects-cta::before,
  .about-cta::before { font-size: 180px; right: -30px; }

  /* Labels, eyebrows, buttons */
  .hero-eyebrow-text,
  .page-hero-eyebrow-text,
  .section-label-text { font-size: 10px; letter-spacing: 3px; }

  /* "Social Media · Content · Events · Ads" must stay on one line. It's 36
     characters, so size and tracking scale with the viewport rather than
     sitting at a fixed value that only fits the widest phones. */
  .hero-eyebrow { gap: 8px; }
  .hero-eyebrow-line { width: 20px; flex-shrink: 0; }
  .hero-eyebrow-text {
    font-size: clamp(7.5px, 2.4vw, 10px);
    letter-spacing: clamp(0.5px, 0.35vw, 2px);
    white-space: nowrap;
  }
  .btn-primary,
  .btn-ghost,
  .btn-dark { font-size: 11px; letter-spacing: 2px; padding: 15px 30px; }
  .form-submit { font-size: 12px; letter-spacing: 2px; padding: 17px; }
  .quote-attr { font-size: 11px; letter-spacing: 3px; }
  .stat-label,
  .team-role,
  .team-meta-label,
  .form-label,
  .info-label,
  .social-section-title,
  .footer-col-title,
  .package-period,
  .review-company { letter-spacing: 2px; }
  .footer-copy { font-size: 11px; }
  .response-text { font-size: 11px; }

  /* Hamburger overlay links */
  .nav-links { gap: 26px; }
  .nav-links a { font-size: 30px; letter-spacing: 2px; }
  .nav-links .nav-menu-cta { font-size: 12px; padding: 13px 28px; }
}

/* Phone — collapse the last multi-column grids and tighten once more */
@media (max-width: 600px) {
  .hero { min-height: 68vh; min-height: 68dvh; }
  .hero-content { padding-top: 84px; }
  .hero-title { font-size: clamp(42px, 13vw, 58px); }
  .page-hero-title { font-size: clamp(38px, 12vw, 52px); }
  .about-heading,
  .story-heading,
  .beliefs-title,
  .team-title,
  .reviews-title,
  .service-block-title,
  .services-title,
  .projects-title,
  .process-title,
  .cta-heading,
  .services-cta-heading,
  .about-cta-heading,
  .projects-cta-heading { font-size: clamp(30px, 9vw, 40px); }
  .svc-title { font-size: 28px; }

  /* Two columns on phones. The image labels only reveal on hover, which touch
     can't trigger, so show the overlay outright and shrink its text to fit the
     narrow cells. */
  .projects-masonry { column-count: 2; column-gap: 8px; }
  .project-item { margin-bottom: 8px; }
  .proj-overlay { transform: none; padding: 10px; }
  .proj-name { font-size: 12px; margin-bottom: 0; }
  /* Pink category tags and grey description both hidden on phones — just the
     project name sits over each image. */
  .proj-tag { display: none; }
  .proj-desc { display: none; }
  /* Keep the belief blocks two-across on phones rather than stacking, with
     tighter padding all round so the cells stay compact at narrow widths. */
  .beliefs-list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .belief-item { min-height: 0; padding: 18px 14px; gap: 14px; }
  .team-grid { grid-template-columns: 1fr; gap: 32px; }
  .team-info-meta { grid-template-columns: 1fr; gap: 18px; }
  /* Only the brand and Studio columns remain on mobile, so keep them side by
     side rather than stacking — the logo needs no full row to itself. */
  .footer-top { grid-template-columns: 1fr auto; gap: 24px; align-items: start; margin-bottom: 28px; }
  .footer-bottom { flex-direction: column; gap: 20px; align-items: flex-start; }
  /* Stays 2x2 down to phones (the 900px rule already handles the dividers). */
  /* Home stats stay 2x2 down to the smallest widths — four items in a single
     column reads as a long list and pushes the CTA off-screen. */
  .about-stats { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .stat-item { padding-left: 14px; }
  /* Keeps the 260px floor from the carousel rule — these are swipe cards now,
     not stacked blocks, so they should stay substantial rather than collapse. */
  .svc-card { padding: 32px 24px; }
  .package-card { padding: 32px 26px; }
  .lightbox { padding: 20px; }
  .lightbox-close { top: 10px; right: 14px; font-size: 32px; }
}