/* ============================================================
   unComplex IT Digital Media — styles.css
   ============================================================ */

/* ── RESET & ROOT VARIABLES ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: none; /* hides default cursor so our custom one shows */
}

:root {
  --black:   #0a0a0a;
  --white:   #f5f3ee;
  --pink:    #e8185a;   /* your brand pink/red */
  --mid:     #1a1a1a;
  --border:  rgba(245, 243, 238, 0.10);
  --muted:   rgba(245, 243, 238, 0.45);
  --pink-dim: rgba(232, 24, 90, 0.15);
}

html {
  scroll-behavior: smooth; /* smooth scrolling when clicking nav links */
}

body {
  background: var(--black);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* subtle noise texture overlay — sits on top of everything visually but
   pointer-events: none means clicks pass right through it */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  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)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}


/* ============================================================
   CUSTOM CURSOR
   ============================================================ */

/* The small filled pink dot */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--pink);
  border-radius: 50%;
  pointer-events: none; /* clicks pass through */
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
}

/* The larger empty circle that trails behind */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--pink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, border-color 0.25s, opacity 0.2s;
}

/* When cursor hovers a clickable element — ring gets bigger */
body.cursor-hover .cursor-ring {
  width: 56px;
  height: 56px;
  border-color: rgba(232, 24, 90, 0.5);
}


/* ============================================================
   MENU OVERLAY — the circular expand
   ============================================================ */

.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--pink);
  z-index: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 8vw;

  /* starts as a tiny circle at top-right, then expands to fill screen */
  clip-path: circle(0% at calc(100% - 3.5rem) 3.5rem);
  transition: clip-path 0.75s cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none; /* not clickable when closed */
}

/* When menu is open, clip-path expands to cover the whole screen */
.menu-overlay.open {
  clip-path: circle(150% at calc(100% - 3.5rem) 3.5rem);
  pointer-events: all;
}

/* Each navigation link inside the menu */
.menu-link {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 6.5rem);
  color: var(--black);
  text-decoration: none;
  line-height: 1.0;
  letter-spacing: 0.02em;

  /* hidden to start — JS adds class 'visible' when menu opens */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s;
}

.menu-link::before {
  content: attr(data-index) '  '; /* shows "01  Services" etc */
  font-size: 0.35em;
  vertical-align: middle;
  opacity: 0.5;
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  letter-spacing: 0.1em;
}

.menu-link:hover { color: var(--white); }

/* staggered reveal — each link comes in slightly later than the last */
.menu-overlay.open .menu-link:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.menu-overlay.open .menu-link:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }
.menu-overlay.open .menu-link:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.39s; }
.menu-overlay.open .menu-link:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.46s; }

.menu-footer {
  position: absolute;
  bottom: 3rem;
  left: 8vw;
  display: flex;
  gap: 3rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: rgba(10,10,10,0.6);
  opacity: 0;
  transition: opacity 0.4s 0.5s;
}

.menu-overlay.open .menu-footer { opacity: 1; }


/* ============================================================
   TOP NAV
   ============================================================ */

.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 3rem;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(14px); /* frosted glass effect */
  -webkit-backdrop-filter: blur(14px);
}

/* Logo */
.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--white);
  text-decoration: none;
}

.logo-un      { color: var(--pink); }
.logo-complex { color: var(--white); }
.logo-rest    { color: var(--muted); font-size: 0.85em; }

/* Right side of nav */
.nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* "LET'S CONNECT" text link */
.nav-cta {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--pink);
  transition: color 0.2s;
}

.nav-cta:hover { color: var(--pink); }

/* Hamburger menu button — 3 lines */
.menu-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: background 0.3s, transform 0.2s;
}

/* Each line of the hamburger */
.menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--black);
  transition: transform 0.35s ease, opacity 0.25s;
  transform-origin: center;
}

/* When menu is open: top line rotates to X */
.menu-btn.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
/* Middle line disappears */
.menu-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
/* Bottom line rotates to X */
.menu-btn.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Button glows pink when menu is open */
.menu-btn.active { background: var(--black); }
.menu-btn.active span { background: var(--pink); }

/* hover nudge */
.menu-btn:hover { transform: scale(1.08); }


/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 3rem 5rem;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* ── UNC BACKGROUND BLOCK ──
   A container positioned on the right side of the hero.
   The UNC text and dot grid live inside it together so the
   dots appear TO GO THROUGH the letters using mix-blend-mode. */
.hero-bg-block {
  position: absolute;
  right: -8vw;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg); /* rotated counter-clockwise */
  pointer-events: none;
  user-select: none;
  z-index: 1;
  /* width/height sized so all 3 letters are fully visible */
  width: 95vh;
  height: 42vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The "UNC" letters — very low opacity, huge */
.hero-bg-word {
  position: absolute;
  inset: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(200px, 38vw, 560px);
  color: rgba(245, 243, 238, 0.07); /* very faint white */
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dot grid — sits on top of the UNC text using mix-blend-mode
   so the dots SHOW THROUGH the letter shapes */
.hero-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(245,243,238,0.28) 1.5px, transparent 1.5px);
  background-size: 18px 18px; /* tight dot spacing like your reference */
  pointer-events: none;
  /* multiply blend mode: dots appear inside letter shapes
     and fade out where no letter exists */
  mix-blend-mode: overlay;
  /* mask fades dots at the edges for a soft look */
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
}

/* Hero content sits above dot grid (z-index: 2 beats dot grid z-index: 0) */
.hero-content {
  position: relative;
  z-index: 2;
}

/* Small label above the headline */
.hero-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 1.25rem;

  /* starts invisible, animation brings it up */
  opacity: 0;
  animation: fadeUp 0.8s 0.2s forwards;
}

/* "Making the web" — italic/elegant above the bold words */
.hero-making {
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  color: var(--pink);
  margin-bottom: 0.2rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.35s forwards;
}

/* The big three words: SIMPLE. POWERFUL. YOURS. */
.hero-words {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 11vw, 10rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  display: block;
  opacity: 0;
  animation: fadeUp 0.9s 0.45s forwards;
}

/* Each word is on its own line */
.hero-words span { display: block; }

/* "SIMPLE." stays white */
.word-simple  { color: var(--white); }

/* "POWERFUL." white with slight italic feel via letter-spacing */
.word-powerful { color: var(--white); }

/* "YOURS." gets the pink accent color */
.word-yours   { color: var(--pink); }

/* Subtitle paragraph */
.hero-sub {
  max-width: 460px;
  font-size: 1rem;
  color: var(--muted);
  margin-top: 2rem;
  opacity: 0;
  animation: fadeUp 0.9s 0.6s forwards;
}

/* "Explore Services" button */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--black);
  background: var(--white);
  padding: 0.75rem 1.8rem;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, gap 0.2s;
  opacity: 0;
  animation: fadeUp 0.9s 0.75s forwards;
}

.hero-cta:hover {
  background: var(--pink);
  color: var(--white);
  gap: 1rem; /* arrow shifts right on hover */
}

/* Vertical "SCROLL TO EXPLORE" text on the right */
.hero-scroll-label {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  writing-mode: vertical-rl; /* rotates text 90 degrees */
  opacity: 0;
  animation: fadeUp 1s 1s forwards;
  z-index: 2;
}


/* ============================================================
   WHAT I DO SECTION (Baunfire-style with background word + photo)
   ============================================================ */

.what-section {
  position: relative;
  z-index: 1;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 3rem;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.what-label {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 2rem;
}

/* Giant "Websites" word behind the photo — mix-blend-mode makes it
   appear to "show through" wherever it overlaps the photo */
.what-bg-word {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(80px, 18vw, 220px);
  color: rgba(245, 243, 238, 0.06);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
  mix-blend-mode: overlay; /* this is the Baunfire blend trick */
}

/* The angled/clipped photo container */
.what-photo-wrap {
  position: absolute;
  right: 6vw;
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  height: 440px;

  /* clip-path creates the diagonal shape — like Baunfire's photo */
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
  overflow: hidden;
}

/* Placeholder box — swap with <img src="your-photo.jpg"> */
.what-photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}

.what-photo-placeholder span {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--muted);
  text-align: center;
}

/* Copy block bottom-left */
.what-copy {
  max-width: 440px;
  margin-top: 30vh;
}

.what-copy p {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.what-link {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--pink);
  padding-bottom: 2px;
  transition: color 0.2s;
}

.what-link:hover { color: var(--pink); }


/* ============================================================
   FEATURED BUILDS — HORIZONTAL SCROLL
   ============================================================ */

.builds-section {
  position: relative;
  z-index: 1;
  padding: 5rem 0 4rem;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.builds-header {
  padding: 0 3rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Override section-label margin since it's inside flex */
.builds-header .section-label {
  margin-bottom: 0;
}

.builds-sub {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* The outer wrapper clips overflow so cards don't spill */
.builds-track-wrap {
  overflow-x: auto;
  overflow-y: visible;
  cursor: grab; /* shows grab cursor so users know it scrolls */
  padding: 1rem 3rem 2rem;
  /* hide the scrollbar visually but keep it functional */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.builds-track-wrap::-webkit-scrollbar { display: none; }
.builds-track-wrap.grabbing { cursor: grabbing; }

/* The inner track — flex row keeps all cards in one line */
.builds-track {
  display: flex;
  gap: 1.5rem;
  width: max-content; /* grows as wide as all cards need */
}

/* ── Each Build Card ── */
.build-card {
  position: relative;
  width: 320px;
  height: 420px;
  flex-shrink: 0; /* prevents cards from squishing */
  text-decoration: none;
  color: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s;
}

.build-card:hover {
  transform: translateY(-8px); /* lifts on hover */
  border-color: var(--pink);
}

/* Card background — uses the CSS variable --card-color set inline */
.build-card-bg {
  position: absolute;
  inset: 0;
  background: var(--card-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The big emoji icon in the center of the card */
.build-card-icon {
  font-size: 5rem;
  position: relative;
  z-index: 2;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s;
  filter: drop-shadow(0 0 30px rgba(255,255,255,0.1));
}

.build-card:hover .build-card-icon {
  transform: scale(1.12);
  opacity: 1;
}

/* Decorative background pattern — unique per card */
.build-card-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  transition: opacity 0.3s;
}
.build-card:hover .build-card-pattern { opacity: 0.2; }

/* Barbershop — diagonal stripe pattern */
.barbershop-pattern {
  background: repeating-linear-gradient(
    45deg,
    var(--card-accent),
    var(--card-accent) 2px,
    transparent 2px,
    transparent 24px
  );
}

/* Beauty — soft radial glow */
.beauty-pattern {
  background: radial-gradient(ellipse at 70% 30%, var(--card-accent) 0%, transparent 65%);
  opacity: 0.25 !important;
}

/* Dry Cleaner — horizontal lines */
.clean-pattern {
  background: repeating-linear-gradient(
    0deg,
    var(--card-accent),
    var(--card-accent) 1px,
    transparent 1px,
    transparent 20px
  );
}

/* Ice Cream — dots */
.cream-pattern {
  background-image: radial-gradient(circle, var(--card-accent) 2px, transparent 2px);
  background-size: 20px 20px;
}

/* Sneakers — crosshatch */
.snkr-pattern {
  background:
    repeating-linear-gradient(45deg, var(--card-accent) 0, var(--card-accent) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(-45deg, var(--card-accent) 0, var(--card-accent) 1px, transparent 0, transparent 50%);
  background-size: 20px 20px;
}

/* T-Shirts — grid */
.tshirt-pattern {
  background-image:
    linear-gradient(var(--card-accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--card-accent) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Card info bar at the bottom */
.build-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, transparent 100%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* "Landing Page" / "E-Commerce" tag */
.build-tag {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--card-accent);
  text-transform: uppercase;
}

/* Business name */
.build-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--white);
}

/* "View Demo →" */
.build-cta {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
  margin-top: 0.3rem;
}

.build-card:hover .build-cta { color: var(--pink); }

/* Prev / Next arrow buttons */
.builds-nav {
  display: flex;
  gap: 0.75rem;
  padding: 0 3rem;
  margin-top: 1.5rem;
}

.builds-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--white);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.builds-arrow:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--white);
}


/* ============================================================
   SECTION LABEL (reusable across sections)
   ============================================================ */

.section-label {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* the short line after the label text */
.section-label::after {
  content: '';
  display: block;
  width: 50px;
  height: 1px;
  background: var(--pink);
}


/* ============================================================
   SERVICES GRID
   ============================================================ */

.services-section {
  position: relative;
  z-index: 1;
  padding: 5rem 3rem;
  border-bottom: 1px solid var(--border);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; /* 1px gap creates the grid line look between cards */
  background: var(--border);
  border: 1px solid var(--border);
}

.service-card {
  background: var(--black);
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}

/* White fill that slides up on hover */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: translateY(100%); /* starts below, out of view */
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}

/* On hover, slide the white fill up to cover the card */
.service-card:hover::before { transform: translateY(0); }

/* When white fill shows, flip text to dark */
.service-card:hover .service-num,
.service-card:hover .service-title,
.service-card:hover .service-desc,
.service-card:hover .service-tag { color: var(--black) !important; }

/* All child content sits above the white fill (z-index: 1 beats z-index: 0) */
.service-card > * { position: relative; z-index: 1; }

.service-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.5rem;
  color: rgba(245, 243, 238, 0.07);
  line-height: 1;
  margin-bottom: 1.5rem;
  transition: color 0.3s;
}

.service-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 1rem;
  transition: color 0.3s;
}

.service-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  transition: color 0.3s;
}

.service-tag {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: rgba(245, 243, 238, 0.25);
  transition: color 0.3s;
}


/* ============================================================
   OUR WORK
   ============================================================ */

.work-section {
  position: relative;
  z-index: 1;
  padding: 5rem 3rem;
  border-bottom: 1px solid var(--border);
}

.work-coming {
  font-size: 1rem;
  color: var(--muted);
}

.work-coming a {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Portfolio grid — ready for when you add screenshots */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.work-card img {
  width: 100%;
  display: block;
  filter: grayscale(20%);
  transition: filter 0.4s;
}

.work-card:hover img { filter: grayscale(0%); }

.work-info {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  font-size: 0.8rem;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}

.work-client { font-weight: 500; }
.work-type   { color: var(--muted); }


/* ============================================================
   PROCESS
   ============================================================ */

.process-section {
  position: relative;
  z-index: 1;
  padding: 5rem 3rem;
  border-bottom: 1px solid var(--border);
}

.process-list { list-style: none; }

.process-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  transition: padding-left 0.3s ease;
}

.process-item:last-child { border-bottom: none; }
.process-item:hover { padding-left: 0.5rem; } /* subtle slide on hover */

.process-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  color: var(--pink);
  padding-top: 0.15rem;
}

.process-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}

.process-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.7;
}


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

.contact-section {
  position: relative;
  z-index: 1;
  padding: 5rem 3rem;
  border-bottom: 1px solid var(--border);
}

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.contact-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}

.contact-note {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-details a {
  font-size: 0.85rem;
  color: var(--pink);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: opacity 0.2s;
}

.contact-details a:hover { opacity: 0.7; }

/* Form fields */
.form-field { margin-bottom: 1.25rem; }

.form-field label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  padding: 0.6rem 0;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

/* When focused, the underline turns pink */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-bottom-color: var(--pink);
}

.form-field select option { background: var(--black); }
.form-field textarea { resize: none; height: 80px; }

.form-submit {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.form-submit button {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  background: var(--pink);
  color: var(--white);
  border: none;
  padding: 0.9rem 2.8rem;
  transition: background 0.2s, transform 0.15s;
}

.form-submit button:hover  { background: #c9134e; }
.form-submit button:active { transform: scale(0.97); }

.form-note {
  font-size: 0.68rem;
  color: rgba(245, 243, 238, 0.25);
  line-height: 1.6;
}

.form-success {
  display: none;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--pink);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
}

.form-success strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--white);
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  position: relative;
  z-index: 1;
  padding: 2rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
}

.foot-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.foot-copy {
  font-size: 0.68rem;
  color: rgba(245, 243, 238, 0.18);
  letter-spacing: 0.08em;
}


/* ============================================================
   SCROLL REVEAL ANIMATION
   ============================================================ */

/* Elements start invisible and shifted down */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* JavaScript adds 'visible' class when element enters viewport */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   KEYFRAME ANIMATIONS (for hero load-in)
   ============================================================ */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   RESPONSIVE — TABLET (max 1024px)
   Catches iPads and smaller laptops before full mobile kicks in
   ============================================================ */

@media (max-width: 1024px) {

  /* Slightly tighter nav padding on tablet */
  .top-nav { padding: 1.2rem 2rem; }

  /* Hero padding reduced */
  .hero { padding: 0 2rem 4rem; }

  /* Shrink the UNC block so it doesn't overlap text */
  .hero-bg-block {
    width: 70vh;
    right: -12vw;
  }

  /* Builds cards slightly narrower */
  .build-card { width: 280px; height: 380px; }

  /* Services 2 columns on tablet */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Contact side by side but tighter gap */
  .contact-wrap { gap: 3rem; }

  /* Sections tighter padding */
  .builds-section,
  .services-section,
  .work-section,
  .process-section,
  .contact-section { padding: 4rem 2rem; }

  .builds-header { padding: 0 2rem; }
  .builds-track-wrap { padding: 1rem 2rem 2rem; }
  .builds-nav { padding: 0 2rem; }
}


/* ============================================================
   RESPONSIVE — MOBILE (max 768px)
   Full mobile treatment for phones
   ============================================================ */

@media (max-width: 768px) {

  /* ── GLOBAL ── */
  body { overflow-x: hidden; }

  /* Hide custom cursor on touch devices — fingers don't need it */
  .cursor-dot,
  .cursor-ring { display: none; }

  /* Restore default cursor since we hid the custom one */
  *, *::before, *::after { cursor: auto; }
  a, button { cursor: pointer; }


  /* ── NAV ── */
  .top-nav { padding: 0.9rem 1.25rem; }

  /* Logo: show UN + COMPLEX + IT, hide "DIGITAL MEDIA" */
  .nav-logo { font-size: 1rem; }
  .logo-rest { display: none; }

  /* Hide "LET'S CONNECT" text on mobile — menu button is enough */
  .nav-cta { display: none; }

  /* Slightly smaller menu button */
  .menu-btn { width: 40px; height: 40px; }


  /* ── MENU OVERLAY ── */
  /* Links stack vertically and fill the screen comfortably */
  .menu-link {
    font-size: clamp(2.8rem, 13vw, 4.5rem);
    line-height: 1.1;
  }

  /* Footer info stacks vertically on small screens */
  .menu-footer {
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.72rem;
    bottom: 2rem;
  }


  /* ── HERO ── */
  /* Use 100svh — "small viewport height" accounts for mobile browser chrome */
  .hero {
    min-height: 100svh;
    padding: 7rem 1.25rem 3.5rem; /* top padding clears the fixed nav */
    justify-content: center; /* center content vertically on small screens */
  }

  /* Hide the UNC background block on mobile — too large, overlaps text */
  .hero-bg-block { display: none; }

  /* Hero eyebrow label — smaller tracking on mobile */
  .hero-eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    margin-bottom: 1rem;
  }

  /* "Making the web" italic line */
  .hero-making { font-size: clamp(1.1rem, 5vw, 1.6rem); }

  /* SIMPLE. POWERFUL. YOURS. — let it breathe but not overflow */
  .hero-words { font-size: clamp(3rem, 17vw, 5rem); }

  /* Subtitle paragraph */
  .hero-sub {
    font-size: 0.9rem;
    margin-top: 1.25rem;
  }

  /* CTA button — full width on mobile */
  .hero-cta {
    width: 100%;
    justify-content: center;
    margin-top: 2rem;
    padding: 1rem;
  }

  /* Hide vertical scroll label — no room on mobile */
  .hero-scroll-label { display: none; }


  /* ── FEATURED BUILDS ── */
  .builds-section { padding: 3.5rem 0 3rem; }

  /* Header stacks vertically */
  .builds-header {
    padding: 0 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 2rem;
  }

  /* Cards slightly narrower to hint at scroll */
  .build-card {
    width: 260px;
    height: 360px;
  }

  /* Track starts closer to edge */
  .builds-track-wrap { padding: 0.5rem 1.25rem 1.5rem; }

  /* Arrow buttons below cards */
  .builds-nav { padding: 0 1.25rem; margin-top: 1.25rem; }


  /* ── SERVICES ── */
  .services-section { padding: 3.5rem 1.25rem; }

  /* Single column on mobile */
  .services-grid { grid-template-columns: 1fr; }

  /* Cards less padding on mobile */
  .service-card { padding: 2rem 1.5rem; }


  /* ── OUR WORK ── */
  .work-section { padding: 3.5rem 1.25rem; }


  /* ── PROCESS ── */
  .process-section { padding: 3.5rem 1.25rem; }

  /* Tighter grid on mobile */
  .process-item {
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
  }

  /* Disable the hover slide — no hover on touch */
  .process-item:hover { padding-left: 0; }

  .process-title { font-size: 1.3rem; }


  /* ── CONTACT ── */
  .contact-section { padding: 3.5rem 1.25rem; }

  /* Stack contact left/right into single column */
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Headline smaller on mobile */
  .contact-headline { font-size: clamp(2rem, 8vw, 3rem); }

  /* Submit button full width */
  .form-submit {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .form-submit button { width: 100%; }

  /* Bump up input font size to prevent iOS auto-zoom */
  /* iOS zooms in when input font is under 16px — this prevents that */
  .form-field input,
  .form-field select,
  .form-field textarea { font-size: 1rem; }


  /* ── FOOTER ── */
  .site-footer {
    flex-direction: column;
    gap: 0.6rem;
    text-align: center;
    padding: 1.5rem 1.25rem;
  }

  /* Section labels */
  .section-label { margin-bottom: 2rem; }
}


/* ============================================================
   RESPONSIVE — SMALL PHONES (max 390px)
   Catches iPhone SE, Galaxy A series, etc.
   ============================================================ */

@media (max-width: 390px) {

  /* Shrink logo even more */
  .nav-logo { font-size: 0.85rem; }

  /* Hero words can go smaller */
  .hero-words { font-size: clamp(2.6rem, 18vw, 4rem); }

  /* Even narrower build cards */
  .build-card { width: 230px; height: 320px; }

  /* Build title smaller */
  .build-title { font-size: 1.3rem; }

  /* Process number column tighter */
  .process-item { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
}