/* ==========================================================================
   Nick Slater — Content Creator
   Dark editorial / oversized type. Inspired by kanevato.com
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&display=swap');

:root {
  /* --- Palette. Flip these six values to invert the whole site to light. --- */
  --bg: #0A0A0A;
  --bg-alt: #121212;
  --fg: #F2F0EC;
  --muted: #8B8781;
  --line: rgba(242, 240, 236, 0.13);
  --accent: #F2F0EC;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --max: 1440px;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --nav-h: 94px;   /* logo + hamburger stacked, plus padding */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.container-wide {
  max-width: 100%;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */

.label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.035em;
}

.statement {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 4.4vw, 3.6rem);
}

.body-lg {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  color: var(--muted);
  line-height: 1.7;
  max-width: 58ch;
}

.body-lg + .body-lg { margin-top: 1.2rem; }

/* --------------------------------------------------------------------------
   Nav + full-screen menu overlay
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  mix-blend-mode: difference;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Retracts on scroll down, returns on scroll up, so nothing ever passes
   underneath a nav that has no background of its own. */
.nav.hidden { transform: translateY(-110%); }

/* Logo and hamburger stack in the top-left corner rather than sitting at
   opposite ends of the bar. */
.nav-inner {
  width: 100%;
  padding: 1.05rem var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.86rem;
  color: #fff;
}

/* Hamburger: two bars of unequal length that even up on hover and cross
   into an X when the menu is open. */
.menu-btn {
  position: relative;
  width: 34px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  color: #fff;
}

.menu-btn span {
  position: absolute;
  left: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-btn span:nth-child(1) { top: 5px;  width: 100%; }
.menu-btn span:nth-child(2) { top: 13px; width: 62%; }

.menu-btn:hover span:nth-child(2) { width: 100%; }

.menu-btn:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

.menu-btn.open span { top: 9px; width: 100%; }
.menu-btn.open span:nth-child(1) { transform: rotate(45deg); }
.menu-btn.open span:nth-child(2) { transform: rotate(-45deg); }

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 2rem) var(--pad) 3rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5%);
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.45s;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-grid {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.menu-primary a {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 7vw, 5.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--muted);
  transition: color 0.25s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-primary a:hover {
  color: var(--fg);
  transform: translateX(1.2rem);
}

.menu-secondary { display: grid; gap: 0.7rem; }

.menu-secondary a {
  font-size: 0.9rem;
  color: var(--muted);
  transition: color 0.2s ease;
}

.menu-secondary a:hover { color: var(--fg); }

.menu-secondary .label { margin-bottom: 0.6rem; }

/* --------------------------------------------------------------------------
   Hero — stacked oversized name
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 76svh;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 5vh, 4rem));
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* CRT overlay: fine scanlines plus a vignette, stretched to the full
   viewport width rather than the container so it bleeds edge to edge.
   Sits above the type at low opacity, which is what sells the effect. */
.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(0, 0, 0, 0.26) 0 1px,
      rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(ellipse 75% 65% at 50% 45%,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.5) 100%);
}

.hero-name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-size: clamp(1.7rem, 9.75vw, 8.5rem);
  margin: 0;
}

/* Two-tone hero name with a fine horizontal scanline running through the
   glyphs. Flat colours are set first as the fallback; the striped version
   is layered on only where background-clip:text is supported, so the type
   can never end up invisible. */
.hero-name .line { display: block; }
.hero-name .line.ghost-1 { color: rgba(242, 240, 236, 0.22); }
.hero-name .line.ghost-2 { color: #8FC4E8; }
.hero-name .line:last-child { color: #F1EADA; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-name .line {
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: repeat;
  }

  /* colour: transparent is repeated per selector rather than set once on
     .hero-name .line, because the flat fallbacks above carry higher
     specificity and would otherwise win and hide the stripes. */
  .hero-name .line.ghost-1 {
    color: transparent;
    background-image: repeating-linear-gradient(
      to bottom, rgba(242,240,236,0.22) 0 3px, rgba(242,240,236,0.10) 3px 6px);
  }

  .hero-name .line.ghost-2 {
    color: transparent;
    background-image: repeating-linear-gradient(
      to bottom, #9ECCEC 0 3px, #82B6D8 3px 6px);
  }

  .hero-name .line:last-child {
    color: transparent;
    background-image: repeating-linear-gradient(
      to bottom, #F5EFE1 0 3px, #E0D9C9 3px 6px);
  }
}

/* Phosphor bloom. text-shadow still paints from the glyph outline even
   though the fill is transparent, so the glow follows the letterforms. */
.hero-name .line.ghost-2 {
  text-shadow:
    0 0 18px rgba(140, 196, 235, 0.45),
    0 0 60px rgba(110, 170, 215, 0.28);
}

.hero-name .line:last-child {
  text-shadow:
    0 0 18px rgba(241, 234, 218, 0.38),
    0 0 62px rgba(220, 210, 185, 0.22);
}

.hero-name {
  filter: drop-shadow(0 0 34px rgba(150, 198, 232, 0.14));
}

.hero-sub {
  margin-top: clamp(1.8rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}

.hero-sub .tagline {
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 1.3vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
  max-width: 46ch;
}

.hero-sub .meta {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A8A49C;
  text-align: right;
}

/* Page hero for inner pages */

.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vh, 4.5rem));
  padding-bottom: clamp(1.5rem, 3.5vw, 3rem);
}

/* The section directly under a page hero would otherwise add its own full
   top padding on top of the hero's bottom padding. */
.page-hero + section { padding-top: clamp(2.5rem, 5vw, 4.5rem); }

/* Lift buttons above the CRT overlay (z-index 4). Scanlines belong on the
   display type, not on a solid UI control. */
.page-hero .actions,
.hero .actions {
  position: relative;
  z-index: 5;
}

.page-hero .label { margin-bottom: 1.4rem; }

.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.035em;
  font-size: clamp(2.6rem, 11vw, 9rem);
  color: #8FC4E8;                       /* flat fallback, striped below */
  text-shadow:
    0 0 18px rgba(140, 196, 235, 0.45),
    0 0 60px rgba(110, 170, 215, 0.28);
  filter: drop-shadow(0 0 34px rgba(150, 198, 232, 0.14));
}

/* Must follow the rule above: same specificity, so source order decides. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-hero h1 {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: repeat;
    background-image: repeating-linear-gradient(
      to bottom, #9ECCEC 0 3px, #82B6D8 3px 6px);
  }
}

.page-hero .lede {
  margin-top: 1.8rem;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  color: var(--muted);
  max-width: 50ch;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

section { padding: clamp(3.5rem, 9vw, 8rem) 0; }

.rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

.bg-alt { background: var(--bg-alt); }

.section-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head .label { padding-top: 0.7rem; }

.split {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* Top-aligned variant: lets a heading inside the copy column start level
   with the top of the image beside it. */
.two-col.top { align-items: start; }

.two-col .statement {
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.section-head.tight { margin-bottom: clamp(1.2rem, 2.5vw, 2rem); }

/* --------------------------------------------------------------------------
   Media placeholders
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  background: linear-gradient(150deg, #1E1E1E 0%, #141414 55%, #0F0F0F 100%);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.5rem;
  overflow: hidden;
}

.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.05), transparent 60%);
  pointer-events: none;
}

/* Drop an <img> or <video> INSIDE a .media block and it fills the frame,
   covering the placeholder label automatically. Nothing else to change. */
.media img,
.media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.media:has(img)::after,
.media:has(video)::after,
.media:has(iframe)::after { display: none; }

.media:has(img),
.media:has(video) { border-color: transparent; }

/* Click-to-unmute control. Injected by script.js for every inline video. */
.media video { cursor: pointer; }

.sound-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(242, 240, 236, 0.32);
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(8px);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.media:hover .sound-toggle,
.sound-toggle:focus-visible { opacity: 1; }

.sound-toggle:hover {
  opacity: 1;
  background: rgba(10, 10, 10, 0.8);
  border-color: var(--fg);
}

.sound-toggle:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.sound-toggle svg { width: 17px; height: 17px; display: block; }

.media.is-unmuted .sound-toggle {
  opacity: 1;
  border-color: var(--fg);
}

/* Instagram embeds. The iframe carries Instagram's own white chrome, so the
   frame keeps its border and sits on a light backing rather than the dark
   gradient, which would show as a hard edge around the player. */
.media.embed {
  background: #FFF;
  border-color: var(--line);
  padding: 0;
}

.media.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}

.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-11 { aspect-ratio: 1 / 1; }
.ratio-169 { aspect-ratio: 16 / 9; }
.ratio-916 { aspect-ratio: 9 / 16; }
.ratio-32 { aspect-ratio: 3 / 2; }

/* Horizontal auto-scrolling image strip */

.strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.strip-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: strip-scroll 70s linear infinite;
}

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

@keyframes strip-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.strip-track > * {
  flex: 0 0 clamp(220px, 26vw, 400px);
}

/* Gallery grid */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.gallery-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   Service rows (home)
   -------------------------------------------------------------------------- */

.service-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) 0;
  border-top: 1px solid var(--line);
  transition: padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-row:last-of-type { border-bottom: 1px solid var(--line); }

.service-row:hover { padding-left: clamp(0.5rem, 2vw, 2rem); }

.service-row .idx {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--muted);
  transition: color 0.3s ease;
}

.service-row h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 5.5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--muted);
  transition: color 0.3s ease;
}

.service-row .desc {
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 30ch;
  text-align: right;
  transition: color 0.3s ease;
}

.service-row:hover h3,
.service-row:hover .idx,
.service-row:hover .desc { color: var(--fg); }

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.stat {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

.stat .n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

.stat .k {
  margin-top: 0.7rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.bg-alt .stat { background: var(--bg-alt); }

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.2rem, 2.5vw, 2rem) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: max-content;
  animation: marquee 42s linear infinite;
}

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

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

.marquee-item {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.25s ease;
  display: flex;
  align-items: center;
}

.marquee-item:hover { color: var(--fg); }

/* --- Brand logos -------------------------------------------------------
   Monochrome SVGs traced from the media kit. Heights are set per aspect
   ratio so a 15:1 wordmark and a stacked lockup carry equal visual weight.
   ---------------------------------------------------------------------- */

.marquee-item img {
  width: auto;
  display: block;
  opacity: 0.58;
  transition: opacity 0.3s ease;
}

.marquee-item:hover img { opacity: 1; }

.logo-s  { height: clamp(38px, 4.4vw, 56px); }   /* stacked lockups   */
.logo-m  { height: clamp(26px, 3.0vw, 38px); }   /* standard          */
.logo-w  { height: clamp(19px, 2.2vw, 28px); }   /* wide wordmarks    */
.logo-xw { height: clamp(13px, 1.5vw, 19px); }   /* ultra-wide        */

/* Big text marquee (footer flourish) */

.marquee-xl .marquee-item {
  font-size: clamp(2.4rem, 8vw, 7rem);
  letter-spacing: -0.03em;
  color: rgba(242, 240, 236, 0.14);
}

.marquee-xl { border: none; padding: clamp(1rem, 3vw, 2rem) 0; }

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

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

.deliverables li {
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1rem;
  align-items: baseline;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
}

.deliverables li span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
}

/* Process */

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

.process-step {
  background: var(--bg);
  padding: clamp(1.6rem, 3vw, 2.6rem);
}

.bg-alt .process-step { background: var(--bg-alt); }

.process-step .n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 1.6rem;
}

.process-step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

.process-step p { color: var(--muted); font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Buttons / links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1.1rem 2.2rem;
  border: 1px solid var(--fg);
  color: var(--fg);
  transition: background 0.25s ease, color 0.25s ease;
}

.btn:hover { background: var(--fg); color: var(--bg); }

.btn-solid { background: var(--fg); color: var(--bg); }
.btn-solid:hover { background: transparent; color: var(--fg); }

.link-underline {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.25s ease;
}

.link-underline:hover { border-color: var(--fg); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}

/* --------------------------------------------------------------------------
   Contact block
   -------------------------------------------------------------------------- */

.contact {
  text-align: center;
  padding: clamp(4rem, 12vw, 10rem) 0;
}

.contact .label { margin-bottom: 1.8rem; }

.contact a.email {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 6.5vw, 5.5rem);
  letter-spacing: -0.035em;
  line-height: 1;
  display: inline-block;
  transition: opacity 0.25s ease;
  word-break: break-word;
}

.contact a.email:hover { opacity: 0.55; }

.contact p {
  margin-top: 1.8rem;
  color: var(--muted);
  font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--line);
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.footer-note {
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 34ch;
  line-height: 1.6;
}

.footer-col { display: grid; gap: 0.55rem; }
.footer-col .label { margin-bottom: 0.5rem; }
.footer-col a { font-size: 0.85rem; color: var(--muted); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--fg); }

.footer-base {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

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

.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track,
  .strip-track { animation: none; }
  .nav { transition: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .section-head,
  .split { grid-template-columns: 1fr; }
  .section-head .label,
  .split .label { padding-top: 0; }

  .two-col { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; align-items: start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-sub { grid-template-columns: 1fr; }
  .hero-sub .meta { text-align: left; }

  /* On phones the name is driven by the vw term, which left it too small
     against the surrounding space. Scale it up and pull the hero in so the
     type-to-whitespace ratio matches desktop. */
  .hero-name { font-size: clamp(2.9rem, 15.5vw, 5rem); }
  .hero { min-height: 66svh; }
  .hero-sub { padding-top: 1.2rem; }

  /* The stripe period is fixed in px, so on smaller type it spans a much
     larger share of each letter and the banding turns coarse. Halve it on
     phones to keep the same proportion as desktop, and ease off the CRT
     overlay so the two effects stop compounding on the same glyphs. */
  .hero-name .line.ghost-2 {
    background-image: repeating-linear-gradient(
      to bottom, #9ECCEC 0 2px, #82B6D8 2px 4px);
  }
  .hero-name .line:last-child {
    background-image: repeating-linear-gradient(
      to bottom, #F5EFE1 0 2px, #E0D9C9 2px 4px);
  }
  .page-hero h1 {
    background-image: repeating-linear-gradient(
      to bottom, #9ECCEC 0 2px, #82B6D8 2px 4px);
  }

  .hero::after,
  .page-hero::after {
    background-image:
      repeating-linear-gradient(to bottom,
        rgba(0, 0, 0, 0.16) 0 1px,
        rgba(0, 0, 0, 0) 1px 3px),
      radial-gradient(ellipse 75% 65% at 50% 45%,
        rgba(0, 0, 0, 0) 45%,
        rgba(0, 0, 0, 0.42) 100%);
  }
}

@media (max-width: 620px) {
  .gallery { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }

  .service-row {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding: 1.6rem 0;
  }
  .service-row .desc { text-align: left; max-width: none; }

  .deliverables li { grid-template-columns: 1fr; gap: 0.3rem; }
}