/* =========================================================
   VIRTUAL FRAMES STUDIO — V3
   Inspired by Montanja's editorial clarity, rebuilt for VFS.
   ========================================================= */

/* ---- Preloader splash: black shield with VFS wordmark, then a red
   circle sweeps in from the left. The black backdrop is clipped from
   the left in lock-step with the circle, so the page stays revealed
   behind the moving sphere — never goes black again after it passes. */
.vfs-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  transition: opacity .3s cubic-bezier(0.65, 0, 0.35, 1);
}
.vfs-preloader.is-done {
  opacity: 0;
}

/* Solid black backdrop. Wipes from left to right, in sync with the ball.
   Default = full preloader (logo + slower ball). `.is-transition` overrides
   for fast page-to-page transitions (no logo, faster sweep). */
.vfs-preloader-bg {
  position: absolute;
  inset: 0;
  background: #0A0A0A;
  animation: vfs-bg-wipe 0.9s cubic-bezier(0.83, 0, 0.17, 1) 0.85s forwards;
  will-change: clip-path;
}
@keyframes vfs-bg-wipe {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}

/* VFS wordmark — centred on black, gets wiped away by the ball
   (clip-path animation matches the bg-wipe + ball-sweep timing). */
.vfs-preloader-logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #F5F2EC;
  opacity: 0;
  animation:
    vfs-logo-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards,
    vfs-logo-wipe 0.9s cubic-bezier(0.83, 0, 0.17, 1) 0.85s forwards;
}
.vfs-preloader-logo svg {
  display: block;
  width: clamp(220px, 30vw, 380px);
  height: auto;
  fill: currentColor;
}
@keyframes vfs-logo-in {
  to { opacity: 1; }
}
@keyframes vfs-logo-wipe {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}

/* Red circle that sweeps from left to right, in sync with the bg-wipe. */
.vfs-preloader-curtain {
  position: absolute;
  width: 130vmax;
  height: 130vmax;
  left: 0;
  top: 50%;
  margin-top: -65vmax;
  border-radius: 50%;
  background: #E5301B;
  transform: translateX(-130vmax);
  animation: vfs-circle-sweep 0.9s cubic-bezier(0.83, 0, 0.17, 1) 0.85s forwards;
  will-change: transform;
}
@keyframes vfs-circle-sweep {
  from { transform: translateX(-130vmax); }
  to   { transform: translateX(100vw); }
}

/* Transition mode (sub-page navigation, repeat home visits): no logo,
   faster sweep, near-zero delay — feels like a page-change accent. */
.vfs-preloader.is-transition .vfs-preloader-bg {
  animation-duration: 0.65s;
  animation-delay: 0.05s;
}
.vfs-preloader.is-transition .vfs-preloader-curtain {
  animation-duration: 0.65s;
  animation-delay: 0.05s;
}

@media (prefers-reduced-motion: reduce) {
  .vfs-preloader-bg { animation: none; clip-path: inset(0 0 0 100%); }
  .vfs-preloader-logo { animation: none; opacity: 0; }
  .vfs-preloader-curtain { animation: none; transform: translateX(100vw); }
}

:root {
  /* Palette ------------------------------------------------ */
  --onyx:      #000000;
  --ink:       #000000;
  --graphite:  #0A0A0A;
  --iron:      #232323;
  --fog:       #8C8C8C;
  --silver:    #C9C5BD;
  --bone:      #F5F2EC;
  --paper:     #FAF8F3;
  --signal:    #E5301B;
  --signal-deep: #B81F12;

  /* Typography --------------------------------------------- */
  --font-display: "Clash Display", "PP Editorial New", "Times New Roman", serif;
  --font-body:    "Satoshi", "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:    "Satoshi", "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  /* Spacing scale ------------------------------------------ */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 7rem;
  --s-8: 10rem;
  --s-9: 14rem;

  /* Layout ------------------------------------------------- */
  --max:    1680px;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --radius: 14px;
  --radius-lg: 22px;

  /* Motion ------------------------------------------------- */
  --ease: cubic-bezier(.2,.8,.2,1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* overflow-x: clip prevents horizontal overflow WITHOUT establishing a
     new containing block — `hidden` would break every descendant
     `position: sticky` (work carousel, process timeline, header, badge). */
  overflow-x: clip;
}

body {
  background: var(--bone);
  color: var(--onyx);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

/* Section / main wrappers also clip horizontally — overflow-x: clip is
   inert to sticky so the work-carousel + ptl pins keep working. */
main { overflow-x: clip; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul { list-style: none; }

/* Typography ------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
}

.eyebrow-dark { color: var(--iron); }

.lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--onyx);
}

.italic { font-style: italic; font-family: var(--font-display); font-weight: 400; color: var(--signal); }

/* Italic accents in headings — always Signal orange */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.hero-headline em,
.hero-display-title em,
.section-head h2 em,
.italic { color: var(--signal); font-style: italic; font-weight: 400; }

/* Layout helpers -------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Vertical-only padding via longhand so a single element can carry
   both `.section` and `.wrap` (each adds its own axis) without one
   shorthand wiping the other's horizontal padding. */
.section { padding-top: var(--s-7); padding-bottom: var(--s-7); }
.section-tight { padding-top: var(--s-6); padding-bottom: var(--s-6); }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.section-head .index {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fog);
  letter-spacing: 0.16em;
}
.section-head h2 {
  font-size: clamp(2.75rem, 7.5vw, 7rem);
  line-height: 0.95;
  text-wrap: balance;
}
.section-head .section-lead {
  max-width: 56ch;
  margin-top: calc(var(--s-2) * -0.5);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: var(--silver);
  text-wrap: balance;
}
.work .section-head .section-lead { color: rgba(245, 242, 236, 0.65); }

/* Buttons --------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.4em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  isolation: isolate;
  /* Vloeiende hover: gebruik een langere cubic-bezier voor een rustige
     "ramp" in plaats van een snelle kleurwissel. */
  transition:
    transform .55s cubic-bezier(0.22, 1, 0.36, 1),
    color .5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover { transform: translateY(-1px); }

/* Gradient sheen achter de tekst — sweept in van links naar rechts bij
   hover. Werkt op alle .btn varianten, kleur erft van btn-dark/light/outline. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg,
    var(--signal) 0%,
    rgba(229, 48, 27, 0.85) 45%,
    rgba(229, 48, 27, 0) 100%
  );
  transform: translateX(-105%);
  transition: transform .65s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(0); }

.btn-dark {
  background: var(--onyx);
  color: var(--bone);
}
.btn-dark:hover { color: var(--bone); }

.btn-outline {
  border: 1px solid var(--iron);
  color: var(--onyx);
}
.btn-outline:hover { color: var(--bone); border-color: var(--signal); }

.btn-light {
  background: var(--bone);
  color: var(--onyx);
}
.btn-light:hover { color: var(--bone); }

.btn .arrow {
  display: inline-block;
  transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover .arrow { transform: translate(4px, -2px); }

/* Header ---------------------------------------------------- */
/* The padding-inline grows past --gutter on viewports wider than --max
   so the logo + actions sit at the same x as .wrap-constrained content.
   Below --max the padding falls back to --gutter, matching the wrap. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-block: var(--s-3);
  padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: transform .4s var(--ease), background .35s var(--ease), backdrop-filter .35s var(--ease), color .25s var(--ease), opacity .3s var(--ease);
  will-change: transform;
}
.site-header.is-stuck {
  background: rgba(245, 242, 236, 0.78);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* Hide while a pinned case-gallery scrollzone owns the viewport. */
.site-header.is-hidden {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: inherit;
  text-decoration: none;
}
.brand .dot {
  width: 8px; height: 8px;
  background: var(--signal);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
/* Real VFS logo wordmark (inline SVG so it always renders) */
.brand-logo-svg {
  display: block;
  width: 175px;
  height: auto;
  color: currentColor;
}
.site-footer .brand-logo-svg { width: 200px; }
/* Default header colors */
.site-header { color: var(--onyx); }
.site-header.is-stuck { color: var(--onyx); }

/* Header inverts whenever it floats over a dark section.
   - body.dark-hero: static initial hint (works before JS runs)
   - body.over-dark: dynamic, set by main.js while scrolling  */
body.dark-hero .site-header:not(.is-stuck),
body.over-dark   .site-header { color: var(--bone); }

/* Stuck state on dark sections — dark glass instead of bone glass */
body.over-dark .site-header.is-stuck {
  background: rgba(10, 10, 10, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Header CTA + hamburger flip on dark sections */
body.dark-hero .site-header:not(.is-stuck) .nav-cta,
body.over-dark   .site-header               .nav-cta {
  background: var(--bone);
  color: var(--onyx) !important;
}
body.dark-hero .site-header:not(.is-stuck) .nav-cta:hover,
body.over-dark   .site-header               .nav-cta:hover {
  background: var(--signal);
  color: var(--bone) !important;
}
body.dark-hero .site-header:not(.is-stuck) .nav-toggle,
body.over-dark   .site-header               .nav-toggle {
  background: var(--bone);
  color: var(--onyx);
}
body.dark-hero .site-header:not(.is-stuck) .nav-toggle .bar,
body.over-dark   .site-header               .nav-toggle .bar {
  background: var(--onyx);
}

.nav {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}
.nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--onyx);
  position: relative;
  padding: 4px 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .4s var(--ease);
}
.nav a:hover::after { width: 100%; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.65em 1.1em;
  border-radius: 999px;
  background: var(--onyx);
  color: var(--bone) !important;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background .3s var(--ease);
}
.nav-cta:hover { background: var(--signal); }
.nav-cta::after { display: none !important; }

.nav-toggle { display: none; width: 40px; height: 40px; }

@media (max-width: 880px) {
  .nav .nav-link { display: none; }
}

/* Hero — Full-bleed banner ---------------------------------- */
.hero {
  position: relative;
  /* Always fill the full viewport — never collapse on short pages or
     when mobile address bars hide. svh = small-viewport-height (always
     accounts for address bars on mobile). vh fallback for older browsers. */
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
  padding: 110px 0 var(--s-6);
}

/* Background image layer — set background-image inline to swap render */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #000;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(229,48,27,0.18), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(245,242,236,0.05), transparent 50%),
    linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 60%, #050505 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Dark overlay for text legibility — adjusts based on bg image */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Strong horizontal fade — cards on the right gently dissolve into bg */
    linear-gradient(to left,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.45) 35%,
      rgba(0,0,0,0.25) 60%,
      rgba(0,0,0,0.10) 85%,
      rgba(0,0,0,0)    100%),
    /* Extra left-side scrim — ensures the big headline always reads cleanly */
    linear-gradient(to right,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.45) 30%,
      rgba(0,0,0,0.15) 60%,
      rgba(0,0,0,0)    100%),
    /* Bottom-to-top base scrim */
    linear-gradient(to top,
      rgba(0,0,0,0.80) 0%,
      rgba(0,0,0,0.45) 40%,
      rgba(0,0,0,0.25) 70%,
      rgba(0,0,0,0.40) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: var(--s-4);
}

/* ---------- HOMEPAGE: animated device stage ---------- */
.hero-stage {
  position: absolute;
  top: 50%;
  right: clamp(40px, 6vw, 110px);
  transform: translateY(-46%);
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  opacity: 0.25;
  /* Big atmospheric fade — cards dissolve heavily across the stage so they
     feel like a backdrop, not the focal point. The rightmost ~30% of the
     stage fades entirely to transparent. */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.50) 20%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.15) 70%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.50) 20%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.15) 70%,
    transparent 100%
  );
}

/* Browser frame */
.device-browser {
  width: clamp(280px, 24vw, 400px);
  border-radius: 12px;
  background: var(--bone);
  box-shadow: 0 50px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
  transform: rotate(-1.5deg);
}
.device-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #E8E4DC;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.device-chrome .dot { width: 11px; height: 11px; border-radius: 50%; background: #ccc; }
.device-chrome .dot.r { background: #FF5F57; }
.device-chrome .dot.y { background: #FEBC2E; }
.device-chrome .dot.g { background: #28C840; }
.device-url {
  margin-left: 14px;
  flex: 1;
  background: var(--bone);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fog);
  letter-spacing: 0.04em;
}

/* Viewport that clips the scrolling page */
.device-viewport {
  height: 290px;
  overflow: hidden;
  position: relative;
  background: var(--bone);
}
.device-page {
  display: flex;
  flex-direction: column;
  animation: page-scroll 11s cubic-bezier(0.65, 0.05, 0.35, 1) infinite;
}
.dp-section {
  height: 290px;
  flex-shrink: 0;
  padding: 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.dp-section.dp-hero { background: var(--bone); }
.dp-section.dp-services {
  background: var(--paper);
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dp-section.dp-work { background: var(--bone); }
.dp-section.dp-cta {
  background: var(--ink);
  color: var(--bone);
}
.dp-section.dp-cta .mini-eyebrow { color: var(--silver); }
.dp-section.dp-cta .mini-title { color: var(--bone); }
.dp-section.dp-cta .mini-line { background: var(--bone); opacity: 0.3; }

.mini-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mini-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(229,48,27,0.6);
  animation: pulse 1.6s infinite;
  display: inline-block;
}
.mini-title-dim {
  color: var(--ink);
  opacity: 0.45;
  font-style: italic;
  font-weight: 400;
  font-size: 0.85em;
  margin-left: 4px;
}
.mini-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.mini-title em { font-style: italic; font-weight: 400; color: var(--signal); }
.mini-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.mini-line {
  display: block;
  height: 4px;
  background: var(--ink);
  opacity: 0.25;
  border-radius: 2px;
}
.mini-line.w-80 { width: 80%; }
.mini-line.w-65 { width: 65%; }
.mini-line.w-50 { width: 50%; }
.mini-pill {
  align-self: flex-start;
  background: var(--ink);
  color: var(--bone);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.mini-pill-light {
  background: var(--bone);
  color: var(--ink);
}
.mini-pill-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.18);
}
.dp-cta .mini-pill-outline,
.mini-pill-ghost {
  background: transparent;
  color: var(--bone);
  border: 1px solid rgba(245,242,236,0.25);
}
.mini-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.mini-card {
  background: var(--bone);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-display);
  position: relative;
  transition: border-color .3s, transform .3s;
}
.mini-card-rich:nth-child(1) { border-color: rgba(229,48,27,0.4); }
.mini-card-rich:nth-child(1)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(229,48,27,0.08), transparent 60%);
  pointer-events: none;
}
.mini-card .card-num {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--signal);
}
.mini-card .card-name {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.mini-card .card-desc {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
}

/* Hero image block */
.mini-hero-img {
  position: relative;
  flex: 1;
  min-height: 90px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 70% 30%, rgba(229,48,27,0.5), transparent 60%),
    linear-gradient(135deg, #1F0606 0%, #5C0A02 40%, #FF4A1C 110%);
  overflow: hidden;
}
.mini-hero-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%, rgba(255,255,255,0.18), transparent 50%);
  mix-blend-mode: overlay;
}
.mini-tag {
  position: absolute;
  bottom: 10px;
  left: 12px;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--bone);
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mini-work {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
  height: 130px;
}
.mini-tile {
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.mini-tile.t1 {
  grid-row: span 2;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,107,91,0.6), transparent 55%),
    linear-gradient(135deg, #1F0606, #B81F12 55%, #FF6B5B);
}
.mini-tile.t2 {
  background:
    radial-gradient(circle at 70% 30%, rgba(80,80,80,0.6), transparent 50%),
    linear-gradient(135deg, #0a0a0a, #2a2a2a);
}
.mini-tile.t3 {
  background:
    radial-gradient(circle at 40% 70%, rgba(255,180,140,0.4), transparent 50%),
    linear-gradient(135deg, #5C0A02, #FF4A1C);
}
.tile-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6px;
  color: var(--bone);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.tile-label strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: -0.015em;
}
.tile-label em {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: normal;
  opacity: 0.85;
  text-align: right;
}

/* ===== SERVICE PAGES inside device mockup ===== */
.svc-page {
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: flex-start;
  padding-top: 22px;
}
.svc-page .mini-pill { margin-top: auto; }

/* Backgrounds per service - subtle theme cue */
.svc-website  { background: var(--bone); }
.svc-branding { background: linear-gradient(160deg, var(--paper) 0%, var(--bone) 100%); }
.svc-3d       { background: linear-gradient(160deg, #1a0a0a 0%, #0a0a0a 100%); color: var(--bone); }
.svc-ads      { background: var(--bone); }

.svc-3d .mini-title { color: var(--bone); }
.svc-3d .mini-eyebrow { color: var(--signal); }
.svc-3d .svc-tags span { color: var(--silver); }

/* Visual area per service */
.svc-visual {
  flex: 1;
  min-height: 100px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

/* --- Website service: tiny browser-in-browser + load metric --- */
.svc-visual-web {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a0a 60%, #5C0A02 110%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  gap: 14px;
}
.svc-browser {
  flex: 1;
  background: var(--bone);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.5);
  overflow: hidden;
  transform: rotate(-1deg);
}
.svc-browser-bar {
  display: flex;
  gap: 3px;
  padding: 6px 8px;
  background: #E8E4DC;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.svc-browser-bar span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
}
.svc-browser-bar span:first-child { background: #FF5F57; }
.svc-browser-bar span:nth-child(2) { background: #FEBC2E; }
.svc-browser-bar span:nth-child(3) { background: #28C840; }
.svc-browser-content {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.svc-line {
  display: block;
  height: 4px;
  background: var(--ink);
  opacity: 0.18;
  border-radius: 2px;
}
.svc-line.w-90 { width: 90%; }
.svc-line.w-70 { width: 70%; }
.svc-line.w-65 { width: 65%; }
.svc-line.w-50 { width: 50%; }

/* Metric chip */
.svc-metric {
  background: rgba(245,242,236,0.08);
  border: 1px solid rgba(245,242,236,0.2);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(6px);
  min-width: 70px;
}
.svc-metric strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  color: var(--bone);
  line-height: 1;
}
.svc-metric strong span {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.svc-metric em {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--silver);
}

/* --- Branding service: brand mark + palette + type --- */
.svc-visual-brand {
  background:
    radial-gradient(circle at 30% 30%, rgba(229,48,27,0.15), transparent 60%),
    var(--bone);
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px;
}
.svc-mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 4rem;
  letter-spacing: -0.05em;
  color: var(--ink);
  line-height: 0.85;
  position: relative;
}
.svc-mark sup {
  font-size: 0.75rem;
  color: var(--signal);
  font-weight: 400;
  font-style: italic;
  margin-left: 2px;
  vertical-align: super;
}
.svc-palette {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.svc-palette .sw {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.sw-1 { background: #0A0A0A; }
.sw-2 { background: #FF4A1C; }
.sw-3 { background: #F5F2EC; border: 1px solid rgba(0,0,0,0.08); }
.sw-4 { background: #5C0A02; }
.sw-5 { background: #B8B0A0; }
.svc-type {
  position: absolute;
  bottom: 10px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: var(--ink);
}
.svc-type-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  font-style: italic;
}
.svc-type-body {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.6;
}

/* --- 3D Visuals service: render stage with sphere + grid --- */
.svc-visual-3d {
  background:
    radial-gradient(circle at 70% 30%, rgba(229,48,27,0.25), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(245,242,236,0.04), transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #1F0606 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.svc-3d-stage {
  width: 100%;
  height: 100%;
  position: relative;
}
.svc-3d-grid {
  position: absolute;
  inset: 60% 0 0 0;
  background-image:
    linear-gradient(to right, rgba(245,242,236,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,242,236,0.08) 1px, transparent 1px);
  background-size: 18px 18px;
  transform: perspective(120px) rotateX(50deg);
  transform-origin: top center;
  mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
/* 3D Product: fragrance / packaging bottle */
.svc-3d-product {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  animation: prod-float 4.5s ease-in-out infinite;
}
.prod-cap {
  width: 26px;
  height: 16px;
  background:
    linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 40%, #0a0a0a 100%);
  border-radius: 4px 4px 2px 2px;
  box-shadow:
    inset 1px 2px 2px rgba(255,255,255,0.18),
    inset -2px -1px 3px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.4);
  position: relative;
}
.prod-cap::after {
  content: '';
  position: absolute;
  inset: 1px 4px;
  top: 1px;
  height: 1px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}
.prod-collar {
  width: 20px;
  height: 5px;
  background: linear-gradient(180deg, #d8d4cc 0%, #8a8680 50%, #5a5650 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.prod-body {
  width: 64px;
  height: 92px;
  background:
    linear-gradient(125deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,180,160,0.4) 18%,
      rgba(229,48,27,0.85) 45%,
      rgba(184,31,18,0.95) 75%,
      #5C0A02 100%);
  border-radius: 6px 6px 12px 12px;
  box-shadow:
    0 25px 50px rgba(229,48,27,0.45),
    0 8px 18px rgba(0,0,0,0.5),
    inset -7px -2px 14px rgba(0,0,0,0.4),
    inset 4px 4px 10px rgba(255,255,255,0.18),
    inset 0 -3px 8px rgba(255,150,100,0.25);
  position: relative;
  overflow: hidden;
}
.prod-shine {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 9px;
  height: 64px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.7) 0%,
    rgba(255,255,255,0.3) 40%,
    rgba(255,255,255,0.05) 100%);
  border-radius: 5px;
  filter: blur(1.5px);
}
.prod-label {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  color: var(--bone);
  text-align: center;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  z-index: 2;
}
.prod-label em {
  display: block;
  font-size: 7px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.2em;
  opacity: 0.85;
  margin-top: 2px;
}
.svc-3d-shadow {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 12px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
  animation: shadow-pulse 4.5s ease-in-out infinite;
}
@keyframes prod-float {
  0%, 100% { transform: translate(-50%, -52%); }
  50%      { transform: translate(-50%, -58%); }
}
@keyframes shadow-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.6; }
  50%      { transform: translateX(-50%) scale(0.82); opacity: 0.4; }
}

.svc-metric-3d {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
}

/* --- Advertising service: bar chart + KPI's --- */
.svc-visual-ads {
  background:
    linear-gradient(135deg, #fafaf7 0%, #E8E4DC 100%);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.svc-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.svc-chart .bar {
  flex: 1;
  background: var(--ink);
  border-radius: 3px 3px 0 0;
  opacity: 0.85;
  animation: bar-rise 3s ease-out infinite;
  transform-origin: bottom;
}
.svc-chart .bar.b1 { height: 25%; animation-delay: 0s; }
.svc-chart .bar.b2 { height: 40%; animation-delay: 0.15s; }
.svc-chart .bar.b3 { height: 55%; animation-delay: 0.3s; }
.svc-chart .bar.b4 { height: 70%; animation-delay: 0.45s; }
.svc-chart .bar.b5 { height: 90%; animation-delay: 0.6s; background: var(--signal); }
.svc-chart .bar.b6 { height: 100%; animation-delay: 0.75s; background: var(--signal); }
@keyframes bar-rise {
  0%       { transform: scaleY(0); }
  20%, 80% { transform: scaleY(1); }
  100%     { transform: scaleY(1); }
}
.svc-kpi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.svc-kpi > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svc-kpi strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
.svc-kpi strong span {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.svc-kpi em {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--fog);
}

/* Tag row */
.svc-tags {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}
.svc-tags span:nth-child(odd) { color: var(--ink); font-weight: 500; }
.svc-3d .svc-tags span:nth-child(odd) { color: var(--bone); }

/* --- Phone-size variations --- */
.svc-visual-sm {
  min-height: 70px;
  padding: 8px;
}
.svc-visual-sm.svc-visual-web { gap: 6px; }
.svc-visual-sm.svc-visual-web .svc-browser-content { padding: 8px; gap: 3px; }
.svc-mark-sm { font-size: 2.4rem; }
.svc-mark-sm sup { font-size: 0.5rem; }
.svc-palette-sm .sw { width: 18px; height: 18px; }
.svc-visual-sm .prod-cap { width: 16px; height: 10px; border-radius: 3px 3px 1px 1px; }
.svc-visual-sm .prod-collar { width: 12px; height: 3px; }
.svc-visual-sm .prod-body { width: 38px; height: 56px; border-radius: 4px 4px 8px 8px; }
.svc-visual-sm .prod-shine { width: 5px; height: 38px; top: 5px; left: 5px; }
.svc-visual-sm .prod-label { font-size: 6.5px; bottom: 14px; letter-spacing: 0.05em; }
.svc-visual-sm .svc-3d-shadow { width: 56px; height: 8px; }
.svc-visual-sm.svc-visual-ads { padding: 8px 10px 6px; gap: 5px; }
.svc-visual-sm .svc-chart { height: 40px; gap: 3px; }
.svc-metric-sm {
  align-self: flex-start;
  padding: 6px 9px;
}
.svc-metric-sm strong { font-size: 0.95rem; }
.svc-metric-sm em { font-size: 7px; }
.svc-kpi-sm {
  display: flex;
  gap: 8px;
}
.svc-kpi-sm strong { font-size: 0.85rem; }

/* Stats row in CTA section */
.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 4px 0 4px;
}
.mini-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mini-stats strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  color: var(--bone);
  line-height: 1;
}
.mini-stats strong span {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.mini-stats .stat-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  opacity: 0.7;
}

/* Phone frame */
.device-phone {
  width: 130px;
  aspect-ratio: 0.5;
  background: var(--ink);
  border-radius: 22px;
  padding: 6px;
  border: 2px solid var(--graphite);
  box-shadow: 0 35px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
  transform: rotate(6deg) translateY(16px);
  position: relative;
  flex-shrink: 0;
}
.device-phone-notch {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 11px;
  background: var(--ink);
  border-radius: 999px;
  z-index: 2;
}
.device-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: var(--bone);
  overflow: hidden;
  position: relative;
}
.device-phone-page {
  display: flex;
  flex-direction: column;
  animation: phone-page-scroll 11s cubic-bezier(0.65, 0.05, 0.35, 1) infinite;
}
.device-phone-page .dp-section {
  height: 248px;
  padding: 18px 11px;
  gap: 6px;
}
.mini-title-sm {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.mini-title-sm em { font-style: italic; font-weight: 400; color: var(--signal); }
.mini-grid-sm { grid-template-columns: 1fr 1fr; gap: 4px; }
.mini-grid-sm .mini-card { padding: 7px 6px 8px; gap: 2px; }
.mini-grid-sm .mini-card > span:first-child {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--signal);
}
.mini-grid-sm .card-name-sm {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mini-work-sm { height: 90px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.mini-work-sm .mini-tile { grid-row: span 1 !important; }
.mini-pill-sm { font-size: 9px; padding: 6px 10px; }
.mini-hero-img-sm { min-height: 50px; flex: 1; }
.tile-label-sm {
  position: absolute;
  bottom: 5px;
  left: 6px;
  color: var(--bone);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.mini-stats-sm {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 2px 0;
}
.mini-stats-sm strong {
  font-size: 1rem;
}

/* Page scroll animation: Hero → Services → Work → CTA → loop */
@keyframes page-scroll {
  0%, 14%   { transform: translateY(0); }
  19%, 33%  { transform: translateY(-290px); }
  38%, 52%  { transform: translateY(-580px); }
  57%, 71%  { transform: translateY(-870px); }
  76%, 90%  { transform: translateY(-290px); }
  100%      { transform: translateY(0); }
}
@keyframes phone-page-scroll {
  0%, 14%   { transform: translateY(0); }
  19%, 33%  { transform: translateY(-248px); }
  38%, 52%  { transform: translateY(-496px); }
  57%, 71%  { transform: translateY(-744px); }
  76%, 90%  { transform: translateY(-248px); }
  100%      { transform: translateY(0); }
}

/* Hide stage on smaller screens */
@media (max-width: 1100px) {
  .hero-stage { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .device-page,
  .device-phone-page { animation: none; }
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 720px;
}

.hero-text .pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  border: 1px solid rgba(245,242,236,0.25);
  background: rgba(10,10,10,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bone);
}
.hero-text .pill .pulse {
  width: 6px; height: 6px;
  background: var(--signal);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(229, 48, 27, 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 48, 27, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(229, 48, 27, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 48, 27, 0); }
}

.hero-headline {
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: var(--s-2) 0;
  text-wrap: balance;
  color: var(--bone);
}
.hero-headline br + * { display: inline; }
.hero-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}

.hero-lead {
  max-width: 50ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(245,242,236,0.85);
}

.hero-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}

/* Bottom-right caption tag */
.hero-tag {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.65);
  align-self: flex-end;
  flex-shrink: 0;
  padding-bottom: 0.5em;
}

@media (max-width: 880px) {
  .hero { padding-top: 100px; padding-bottom: var(--s-5); }
  .hero-content { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .hero-tag { align-self: flex-start; }
}

/* Marquee --------------------------------------------------- */
.marquee {
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  padding: var(--s-3) 0;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  gap: var(--s-5);
  animation: scroll 38s linear infinite;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 5rem);
  letter-spacing: -0.02em;
  font-weight: 500;
}
.marquee-track span { display: inline-flex; align-items: center; gap: var(--s-5); }
.marquee-track .star { color: var(--signal); }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Intro / lead-in ------------------------------------------- */
.intro {
  background: var(--bone);
}
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
/* Left column — eyebrow + big display heading */
.intro-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: sticky;
  top: 120px;
}
.intro-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.intro-head h2 em { color: var(--signal); font-style: italic; font-weight: 400; }

/* Right column — value blocks: short label + paragraph, divided by hairline */
.intro-values {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.intro-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.4rem, 2.2vw, 2rem) 0;
  border-top: 1px solid rgba(10,10,10,0.12);
}
.intro-value:last-child { border-bottom: 1px solid rgba(10,10,10,0.12); }
.intro-value h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  letter-spacing: -0.01em;
  color: var(--fog);
  margin: 0;
}
.intro-value p {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 900px) {
  .intro-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .intro-head { position: static; }
  .intro-value { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Services -------------------------------------------------- */
.services {
  background: #000;
  color: var(--bone);
}
.services .eyebrow { color: var(--silver); }
.services .section-head h2 { color: var(--bone); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--iron);
  border: 1px solid var(--iron);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service {
  background: var(--onyx);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 360px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Hover glow — very subtle radial gradient, no bg color shift */
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, var(--svc-glow-1, rgba(229,48,27,0.10)), transparent 70%),
    radial-gradient(ellipse 40% 30% at 15% 85%, var(--svc-glow-2, rgba(139,43,255,0.07)), transparent 70%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity .6s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.service:hover::before { opacity: 1; }

/* Per-card glow palettes — match the destination service page */
.services-grid .service:nth-child(1) { /* Website → blue */
  --svc-glow-1: rgba(43,127,255,0.14);
  --svc-glow-2: rgba(0,194,209,0.07);
}
.services-grid .service:nth-child(2) { /* Branding → pink/red */
  --svc-glow-1: rgba(229,48,27,0.13);
  --svc-glow-2: rgba(139,43,255,0.07);
}
.services-grid .service:nth-child(3) { /* 3D → violet */
  --svc-glow-1: rgba(139,43,255,0.14);
  --svc-glow-2: rgba(91,107,255,0.07);
}
.services-grid .service:nth-child(4) { /* Advertising → orange/coral */
  --svc-glow-1: rgba(229,48,27,0.13);
  --svc-glow-2: rgba(229,148,27,0.07);
}
.service .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fog);
}
.service h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--bone);
}
.service h3 em { color: var(--signal); font-style: italic; font-weight: 400; }
.service p {
  color: var(--silver);
  max-width: 42ch;
  font-size: 1rem;
}
.service ul {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.service ul li {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.45em 0.8em;
  border: 1px solid var(--iron);
  border-radius: 999px;
  color: var(--silver);
}
/* Four-pillar service card arrow — bone ring at rest, orange ball
   with a clean white arrow centered inside on hover/tap. */
.service .arrow-link {
  position: absolute;
  bottom: var(--s-5); right: var(--s-5);
  width: 48px; height: 48px;
  border: 1px solid var(--iron);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--bone);
  background: transparent;
  transition:
    background .35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color .35s cubic-bezier(0.22, 1, 0.36, 1),
    transform .45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Centered up-right arrow inside the circle (CSS mask on ::before so
   the size of the icon is independent of the circle's size). */
.service .arrow-link::before {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10L10 4M10 4H5M10 4V9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10L10 4M10 4H5M10 4V9'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.service:hover .arrow-link,
.service:focus-within .arrow-link {
  background: var(--signal);
  border-color: var(--signal);
  transform: rotate(-8deg) scale(1.05);
  box-shadow: 0 12px 30px rgba(229, 48, 27, 0.40);
}
.service:hover .arrow-link::before,
.service:focus-within .arrow-link::before {
  transform: translate(2px, -2px);
}
/* Reserve space so tags don't overlap the arrow */
.service ul { padding-right: 60px; }

@media (max-width: 720px) {
  .services-grid { grid-template-columns: 1fr; }
  .service { min-height: auto; }
}

/* Why us ---------------------------------------------------- */
.why .section-head h2 { font-size: clamp(2rem, 4.5vw, 3.75rem); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.why-card {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius);
  padding: var(--s-4);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: transform .4s var(--ease), border-color .25s var(--ease);
}
.why-card:hover { transform: translateY(-4px); border-color: var(--onyx); }
.why-card .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--signal);
}
.why-card h3 {
  font-size: 1.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.why-card p { color: var(--iron); font-size: 0.98rem; }
@media (max-width: 720px) { .why-grid { grid-template-columns: 1fr; } }

/* Work ------------------------------------------------------ */
.work {
  background: #000;
  color: var(--bone);
}
.work .section-head h2 { color: var(--bone); }
.work .section-head .eyebrow,
.work .section-head .eyebrow-dark { color: var(--silver); }
/* ---- Scroll-jacked horizontal carousel ----
   Page-scroll is mapped to horizontal carousel translation while a sticky
   container pins the cards to the viewport. JS sets the scrollzone height
   (= vh + total horizontal travel) and the .work-grid transform on scroll. */
.work-scrollzone {
  position: relative;
  width: 100%;
  /* Containment hints — tells the browser this subtree is self-contained,
     letting it skip relayout of outer nodes when transforming the grid.
     Combined with the GPU hints on .work-sticky / .work-grid this kills
     the vertical-drift jitter on fast scroll. */
  contain: layout paint;
}
.work-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: clamp(20px, 3vh, 44px);
  padding: clamp(70px, 9vh, 100px) 0 clamp(28px, 4vh, 56px);
  /* No overflow:hidden here — buttons must stay visible outside frame.
     NOT setting transform: translateZ(0) — applying a transform to a
     position:sticky element breaks pinning in Safari. */
  contain: layout style;
}
.work-sticky .section-head {
  margin-bottom: 0;
}
.work-carousel-frame {
  position: relative;
  /* overflow-x: clip allows overflow-y to actually stay visible. With
     overflow-x: hidden, the browser implicitly clips Y too — that was
     swallowing the card meta on some viewports. */
  overflow-x: clip;
  overflow-y: visible;
  /* No edge mask — the fade was eating the cards' arrow buttons and
     other UI inside the meta strip. Cards now reach the frame's edge
     cleanly with a hard clip. */
}

.work-grid {
  display: flex;
  gap: var(--s-4);
  will-change: transform;
  align-items: flex-start;
}

.work-card,
.work-card.span-6,
.work-card.span-4,
.work-card.span-8 {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  display: flex;
  flex-direction: column;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  grid-column: auto;
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 0;
  height: auto;
}

/* Thumb = the photo. Width is driven by height × aspect-ratio so all
   thumbs share the same row-height in the horizontal carousel. */
.work-thumb {
  position: relative;
  height: clamp(240px, 40vh, 380px);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.work-thumb.thumb-1 { aspect-ratio: 16 / 9; }   /* MB Cleanings */
.work-thumb.thumb-2 { aspect-ratio: 3 / 2; }    /* Bolide */
.work-thumb.thumb-3 { aspect-ratio: 4 / 3; }    /* Bar Naut */
.work-thumb.thumb-4 { aspect-ratio: 3 / 2; }    /* CalCleaning */
.work-thumb.thumb-5 { aspect-ratio: 3 / 2; }    /* Sofie */


/* Horizontal-scroll progress bar — auto-attached by JS to any
   native-scrolling gallery on mobile. Thin track with a fill that
   tracks scrollLeft / (scrollWidth - clientWidth). */
.scroll-progress-track {
  position: relative;
  width: clamp(160px, 55%, 320px);
  height: 3px;
  border-radius: 999px;
  margin: clamp(var(--s-3), 4vw, var(--s-4)) auto 0;
  overflow: hidden;
  pointer-events: none;
}
.scroll-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  transition: width .12s linear;
}
/* Light-section (homepage work-grid lives on bone) */
.work .scroll-progress-track {
  background: rgba(245, 242, 236, 0.18);
}
.work .scroll-progress-fill {
  background: var(--bone);
}
/* Dark-section (case gallery sits on pure black) */
.case-gallery--pin .scroll-progress-track {
  background: rgba(255, 255, 255, 0.16);
}
.case-gallery--pin .scroll-progress-fill {
  background: #fff;
}

/* Native-scroll fallback (mobile + reduced-motion). Horizontal swipe
   with snap. Cards keep their natural width and refuse to shrink so the
   user gets one full thumb per snap stop. */
.work-grid.is-native-scroll {
  display: flex;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--s-3);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: var(--s-3);
  padding: 4px var(--s-3) 12px;
  margin-inline: calc(-1 * var(--s-3));
  will-change: auto;
  /* Disable the mask-image fade from the scroll-jacked carousel — on
     mobile we want crisp edges, not soft fades that cut off the cards. */
  -webkit-mask-image: none;
          mask-image: none;
}
.work-grid.is-native-scroll::-webkit-scrollbar { display: none; }
.work-grid.is-native-scroll .work-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: min(82vw, 420px);
}
@media (max-width: 880px) {
  .work-grid.is-native-scroll .work-thumb {
    height: clamp(220px, 56vw, 320px);
  }
}

/* Prev/next buttons — hidden, scroll-jack drives navigation via page scroll */
.carousel-btn { display: none; }

/* Thumb stays perfectly static — no hover scale, no transitions.
   The only motion in this section is the horizontal carousel translate
   driven by page scroll. */
.work-thumb {
  background-color: var(--graphite);
}

/* Thumb 1: MB Cleanings */
.work-thumb.thumb-1 {
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55)), url('../img/mb-cleanings-v2.webp') center/cover no-repeat;
}
/* Thumb 2: Bolide Detailing */
.work-thumb.thumb-2 {
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55)), url('../img/bolide-v2.webp') center/cover no-repeat;
}
/* Thumb 3: Bar Naut */
.work-thumb.thumb-3 {
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55)), url('../img/barnaut.webp') center/cover no-repeat;
}
/* Thumb 4: CalCleaning */
.work-thumb.thumb-4 {
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55)), url('../img/calcleaning.webp') center/cover no-repeat;
}
/* Thumb 5: Sofie Van Daele */
.work-thumb.thumb-5 {
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55)), url('../img/sofie-van-daele-v2.webp') center/cover no-repeat;
}

.work-meta {
  position: relative;
  padding: var(--s-3) 4px 0;
  background: transparent;
  color: var(--bone);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}
.work-meta h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.015em;
  color: var(--bone);
}
.work-meta .tags {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 4px;
}
/* Creaties (work-card) arrow — solid orange circle with a centered
   white arrow inside. The base `.arrow` class is a CSS-mask icon, but
   here we want a CIRCLE that contains a smaller centered icon, so we
   neutralise the mask on the span itself and paint the icon via
   ::before with a smaller size. */
.work-meta .arrow {
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--onyx);
  color: var(--bone);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  /* Cancel the CSS-mask from the base .arrow rule */
  -webkit-mask: none;
          mask: none;
  text-indent: 0;
  overflow: visible;
  position: relative;
  box-shadow: 0 8px 22px rgba(10, 10, 10, 0.25);
  transition:
    transform .55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow .55s cubic-bezier(0.22, 1, 0.36, 1),
    background .45s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-meta .arrow::before {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10L10 4M10 4H5M10 4V9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10L10 4M10 4H5M10 4V9'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-card:hover .work-meta .arrow {
  background: var(--signal);
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 14px 36px rgba(229, 48, 27, 0.45);
}
.work-card:hover .work-meta .arrow::before {
  transform: translate(2px, -2px);
}

@media (max-width: 720px) {
  .work-card,
  .work-card.span-6,
  .work-card.span-4,
  .work-card.span-8 { height: clamp(280px, 48vh, 420px); }
  .carousel-btn { display: none; }
}

/* Process --------------------------------------------------- */
.process {
  background: var(--bone);
}
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.process-step {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  /* Soft, satisfying hover transition — slow ease-out so the row glides
     instead of snapping. We animate transform (compositor-only, no reflow)
     plus a subtle background tint for the "pressed-in" feel. */
  transform: translateX(0);
  transition:
    transform .75s cubic-bezier(0.22, 1, 0.36, 1),
    background-color .75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.process-step:last-child { border-bottom: 1px solid rgba(0,0,0,0.08); }
.process-step:hover {
  transform: translateX(clamp(8px, 1vw, 16px));
  background-color: rgba(10,10,10,0.025);
}
.process-step h3,
.process-step p {
  transition: color .75s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-step:hover h3 { color: var(--signal); }
.process-step .num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--fog);
}
.process-step h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.process-step p {
  color: var(--iron);
  font-size: 1rem;
}
.process-step .duration {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  text-align: right;
}
@media (max-width: 880px) {
  .process-step {
    grid-template-columns: 60px 1fr;
    gap: var(--s-2);
  }
  .process-step h3 { grid-column: 2; }
  .process-step p { grid-column: 2; }
  .process-step .duration { grid-column: 2; text-align: left; }
}

/* FAQ — dark variant ---------------------------------------- */
.faq {
  background: #000;
  color: var(--bone);
}
.faq .section-head h2 { color: var(--bone); }
.faq .section-head .eyebrow,
.faq .section-head .eyebrow-dark { color: var(--silver); }

.faq-grid {
  border-top: 1px solid rgba(245,242,236,0.12);
  /* Constrain reading width zodat de FAQ niet de hele gutter inneemt
     en rustiger oogt op desktop. */
  max-width: 880px;
  margin-inline: auto;
}
.faq-item {
  border-bottom: 1px solid rgba(245,242,236,0.12);
}
@media (min-width: 1080px) {
  .faq-grid { max-width: 960px; }
}
.faq-trigger {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4) 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  letter-spacing: -0.015em;
  color: var(--bone);
  transition: color .25s var(--ease);
}
.faq-trigger:hover { color: var(--signal); }
.faq-icon {
  width: 36px; height: 36px;
  border: 1px solid rgba(245,242,236,0.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease);
  font-size: 18px;
  color: var(--bone);
}
.faq-item.is-open .faq-icon {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease), padding .35s var(--ease);
}
.faq-item.is-open .faq-answer {
  padding-bottom: var(--s-4);
}
.faq-answer p {
  font-size: 1rem;
  color: var(--silver);
  max-width: 70ch;
  line-height: 1.65;
}

/* CTA — light variant, static --------------------------------- */
.cta {
  background: var(--bone);
  color: var(--ink);
  padding: var(--s-8) 0;
  position: relative;
  overflow: hidden;
}
.cta-h2 em { color: var(--signal); }

/* Yin-yang — slow rotating "thinking" symbol above the CTA heading ---- */
/* CTA orb — removed at the client's request. The section now leads
   straight into "So, what's on your mind?" without a graphic above it. */
.cta-yin,
.yin-dot { display: none !important; }
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(229, 48, 27, 0.08), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(229, 48, 27, 0.04), transparent 55%);
  pointer-events: none;
}
.cta-inner {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: center;
}
.cta h2 {
  font-size: clamp(3rem, 9vw, 9rem);
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.cta h2 em { color: var(--signal); font-style: italic; font-weight: 400; }
.cta p {
  max-width: 50ch;
  font-size: 1.1rem;
  color: var(--iron);
}
.cta-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--s-3);
}

/* Footer ---------------------------------------------------- */
.site-footer {
  background: #000;
  color: var(--silver);
  padding: clamp(var(--s-7), 9vw, var(--s-9)) 0 clamp(var(--s-4), 4vw, var(--s-5));
  border-top: 1px solid rgba(245, 242, 236, 0.08);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: clamp(var(--s-4), 5vw, var(--s-7));
  padding-bottom: clamp(var(--s-6), 7vw, var(--s-7));
  border-bottom: 1px solid rgba(245, 242, 236, 0.08);
}
.footer-top h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: clamp(var(--s-3), 2vw, var(--s-4));
  font-weight: 500;
}
.footer-top ul { display: flex; flex-direction: column; gap: 0.55em; }
.footer-top ul li { margin: 0; }
.footer-top a {
  color: var(--bone);
  font-size: 1.02rem;
  line-height: 1.4;
  transition: color .25s var(--ease);
}
.footer-top a:hover { color: var(--signal); }
.footer-brand .brand { color: var(--bone); display: inline-block; }
.footer-brand .brand-logo-svg { width: clamp(180px, 18vw, 240px); height: auto; }
.footer-brand p {
  margin-top: clamp(var(--s-3), 2.4vw, var(--s-4));
  max-width: 36ch;
  color: var(--silver);
  font-size: 1.02rem;
  line-height: 1.55;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: clamp(var(--s-3), 3vw, var(--s-4));
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
  flex-wrap: wrap;
  gap: var(--s-2);
}
.footer-bottom a { color: var(--silver); }
.footer-bottom a:hover { color: var(--signal); }

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--s-5), 8vw, var(--s-6));
  }
  .footer-brand { grid-column: 1 / -1; padding-bottom: var(--s-3); }
}
@media (max-width: 540px) {
  .footer-top { grid-template-columns: 1fr; gap: var(--s-5); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

/* Reveal animation ------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  transition:
    opacity .7s cubic-bezier(0.22, 1, 0.36, 1),
    transform .7s cubic-bezier(0.22, 1, 0.36, 1),
    filter .7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity, filter;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Cinematic slow zoom on every hero background — same subtle scale on
   every page so the heroes feel alive without being distracting. */
.hero-bg,
.svc-hero-bg {
  animation: vfs-hero-zoom 22s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
  will-change: transform;
}
@keyframes vfs-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}
@media (max-width: 880px) {
  @keyframes vfs-hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.02); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .svc-hero-bg {
    animation: none;
  }
}

/* Per user request: reveal animations only run on contact + offerte
   pages. All other pages get content rendered immediately, no fade-up,
   no wireframe-to-solid heading transition. The body class is added by
   main.js based on the current pathname. */
body.no-reveals [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}
body.no-reveals .section-head[data-reveal] h2,
body.no-reveals .intro-head[data-reveal] h2 {
  color: inherit;
  -webkit-text-stroke-width: 0;
}
/* Restore the signal-red on italic <em> bits inside titles —
   needs equal specificity to the rule above, otherwise the wireframe
   override would inherit white. */
body.no-reveals .section-head[data-reveal] h2 em,
body.no-reveals .intro-head[data-reveal] h2 em {
  color: var(--signal);
  -webkit-text-stroke-width: 0;
}

/* ===== Pixel / wireframe reveal for big editorial headings =====
   When the surrounding [data-reveal] hasn't entered the viewport yet,
   the h2 is rendered as a hollow outline (text-stroke only, no fill).
   Once it becomes visible, the stroke contracts to 0 and the colour
   fills in — the letters "form themselves" from wireframe into solid. */
.section-head h2,
.intro-head h2 {
  -webkit-text-stroke-width: 0;
  transition:
    color 1s var(--ease) .15s,
    -webkit-text-stroke-width 1s var(--ease) .15s;
}
/* Per-section stroke colour — must be visible against the section bg */
.services .section-head h2 { -webkit-text-stroke-color: var(--bone); }
.work     .section-head h2 { -webkit-text-stroke-color: var(--bone); }
.cta      .section-head h2 { -webkit-text-stroke-color: var(--ink); }
.intro-head h2              { -webkit-text-stroke-color: var(--ink); }
.why      .section-head h2 { -webkit-text-stroke-color: var(--ink); }
.process  .section-head h2 { -webkit-text-stroke-color: var(--ink); }
.faq      .section-head h2 { -webkit-text-stroke-color: var(--bone); }

/* Italic <em> bits stroke in signal red so they wireframe in their own colour */
.section-head h2 em,
.intro-head h2 em { -webkit-text-stroke-color: var(--signal); }

/* Wireframe state — applied while parent reveal hasn't been triggered yet */
.section-head[data-reveal]:not(.is-visible) h2,
.intro-head[data-reveal]:not(.is-visible) h2,
.section-head[data-reveal]:not(.is-visible) h2 em,
.intro-head[data-reveal]:not(.is-visible) h2 em {
  color: transparent;
  -webkit-text-stroke-width: 1.4px;
}

/* Honour reduced-motion: skip the effect for users who prefer less animation */
@media (prefers-reduced-motion: reduce) {
  .section-head[data-reveal]:not(.is-visible) h2,
  .intro-head[data-reveal]:not(.is-visible) h2,
  .section-head[data-reveal]:not(.is-visible) h2 em,
  .intro-head[data-reveal]:not(.is-visible) h2 em {
    color: inherit;
    -webkit-text-stroke-width: 0;
  }
}

/* =========================================================
   NAV OVERLAY (fullscreen menu, Montanja-style)
   ========================================================= */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--onyx);
  color: var(--bone);
  border: 0;
  cursor: pointer;
  position: relative;
  transition: background .25s var(--ease);
}
.nav-toggle:hover { background: var(--signal); }
.nav-toggle .bar {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--bone);
  transition: transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease);
}
.nav-toggle .bar:nth-child(1) { top: 16px; }
.nav-toggle .bar:nth-child(2) { top: 26px; }
.is-nav-open .nav-toggle .bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.is-nav-open .nav-toggle .bar:nth-child(2) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Header language switcher (compact, sits left of CTA) */
.header-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-right: 0.25rem;
}
.header-lang a {
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  color: var(--onyx);
  opacity: 0.55;
  transition: opacity .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.header-lang a:hover { opacity: 1; }
.header-lang a.is-active {
  opacity: 1;
  background: var(--onyx);
  color: var(--bone);
}
/* On dark hero: invert language switcher to bone */
body.dark-hero .site-header:not(.is-stuck) .header-lang a,
body.over-dark   .site-header               .header-lang a {
  color: var(--bone);
}
body.dark-hero .site-header:not(.is-stuck) .header-lang a.is-active,
body.over-dark   .site-header               .header-lang a.is-active {
  background: var(--bone);
  color: var(--onyx);
}
@media (max-width: 540px) {
  .header-lang { display: none; }
}

.nav-overlay {
  position: fixed;
  top: 80px;
  right: var(--gutter);
  width: min(420px, calc(100vw - 2 * var(--gutter)));
  background: var(--onyx);
  color: var(--bone);
  border-radius: 22px;
  padding: var(--s-4);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px) scale(0.96);
  transform-origin: top right;
  transition:
    opacity .5s cubic-bezier(0.22, 1, 0.36, 1),
    transform .55s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 40px 100px rgba(0,0,0,0.45),
              0 10px 30px rgba(0,0,0,0.25);
}
.is-nav-open .nav-overlay {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.nav-overlay-list {
  display: flex;
  flex-direction: column;
}
.nav-overlay-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--bone);
  border-bottom: 1px solid var(--iron);
  transition: color .25s var(--ease), padding .35s var(--ease);
  /* Each menu item slides in slightly later than the previous one for
     a premium staggered reveal when the drawer opens. */
  opacity: 0;
  transform: translateX(12px);
  transition:
    color .25s var(--ease),
    padding .35s var(--ease),
    opacity .45s cubic-bezier(0.22, 1, 0.36, 1),
    transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-nav-open .nav-overlay-list a {
  opacity: 1;
  transform: none;
}
.nav-overlay-list li:nth-child(1) a { transition-delay: 0.06s, 0.06s, 0.08s, 0.08s; }
.nav-overlay-list li:nth-child(2) a { transition-delay: 0.06s, 0.06s, 0.12s, 0.12s; }
.nav-overlay-list li:nth-child(3) a { transition-delay: 0.06s, 0.06s, 0.16s, 0.16s; }
.nav-overlay-list li:nth-child(4) a { transition-delay: 0.06s, 0.06s, 0.20s, 0.20s; }
.nav-overlay-list li:nth-child(5) a { transition-delay: 0.06s, 0.06s, 0.24s, 0.24s; }
.nav-overlay-list li:nth-child(6) a { transition-delay: 0.06s, 0.06s, 0.28s, 0.28s; }
.nav-overlay-list li:nth-child(7) a { transition-delay: 0.06s, 0.06s, 0.32s, 0.32s; }
.nav-overlay-list li:nth-child(8) a { transition-delay: 0.06s, 0.06s, 0.36s, 0.36s; }
.nav-overlay-list li:nth-child(9) a { transition-delay: 0.06s, 0.06s, 0.40s, 0.40s; }
.nav-overlay-list a:hover {
  color: var(--signal);
  padding-left: 0.5rem;
}
.nav-overlay-list a .arrow {
  transition: transform .35s var(--ease);
  font-size: 1.1rem;
}
.nav-overlay-list a:hover .arrow {
  transform: translate(4px, -4px);
}

.nav-overlay-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
}
.nav-overlay-foot a { color: var(--silver); margin-right: 1rem; transition: color .25s var(--ease); }
.nav-overlay-foot a:hover { color: var(--signal); }
.nav-overlay-foot .socials { display: flex; gap: 0.75rem; color: var(--bone); }
.nav-overlay-foot .socials a { margin-right: 0; }
.lang-switch { display: inline-flex; gap: 0.5rem; align-items: center; }
.lang-switch a { margin-right: 0 !important; padding: 0.2rem 0.5rem; border-radius: 999px; transition: color .25s var(--ease), background .25s var(--ease); }
.lang-switch a.is-active { color: var(--bone); background: rgba(245,242,236,0.08); }
.lang-switch a:hover { color: var(--signal); }

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  z-index: 55;
  transition: opacity .35s var(--ease);
}
.is-nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

/* Scroll indicator (down arrow) */
.hero-scroll {
  position: absolute;
  left: var(--gutter);
  bottom: var(--s-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.7);
}
.hero-scroll::after {
  content: "";
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(245,242,236,0.7), transparent);
  animation: scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* Rotating "Let's work together" badge — site-wide fixed element.
   Injected once by layout.js, lives at bottom-right of the viewport
   across every page. Slow continuous spin (35s) so it's a calm
   ambient element, not a fidgety distraction. */
.floating-badge {
  position: fixed;
  right: clamp(16px, 3vw, 36px);
  bottom: clamp(16px, 3vw, 36px);
  width: clamp(110px, 12vw, 150px);
  height: clamp(110px, 12vw, 150px);
  display: grid;
  place-items: center;
  /* Default = body is on a light section → black text. Flipped to
     bone via `body.badge-over-dark` when a dark section is behind it. */
  color: var(--ink);
  z-index: 40;
  transition:
    transform .45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity .45s cubic-bezier(0.22, 1, 0.36, 1),
    color .35s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
}
body.badge-over-dark .floating-badge {
  color: var(--bone);
}
.floating-badge:hover { transform: scale(1.06); }
.floating-badge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: floating-badge-spin 35s linear infinite;
}
.floating-badge-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--signal);
  color: var(--bone);
  box-shadow:
    0 10px 28px rgba(229, 48, 27, 0.45),
    0 0 0 1px rgba(245,242,236,0.1);
  transition:
    transform .35s var(--ease),
    background .25s var(--ease);
}
.floating-badge-arrow .arrow {
  width: 18px;
  height: 18px;
  color: var(--bone);
}
.floating-badge:hover .floating-badge-arrow {
  background: var(--signal-deep, #c8240f);
  transform: rotate(-12deg);
}
@keyframes floating-badge-spin {
  to { transform: rotate(360deg); }
}

/* Hide when the nav drawer is open — keeps the menu visually clean */
.is-nav-open .floating-badge {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}

/* Mobile: hide the floating badge — the hero already has explicit CTA
   buttons and the navbar CTA is always reachable. The round badge ate
   real estate near the bottom-right where the user's thumb naturally
   sits to scroll. */
@media (max-width: 880px) {
  .floating-badge { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-badge-ring { animation: none; }
}

/* =========================================================
   PAGE BLOCKS (sub-services, contact form, page intro)
   ========================================================= */

/* Page intro under hero */
.page-intro {
  background: var(--bone);
  padding: var(--s-7) 0;
}
.page-intro-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-5);
  align-items: start;
}
.page-intro .lead-big {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.page-intro .lead-big em { color: var(--signal); font-style: italic; }
.page-intro .lead-big + .lead-big { margin-top: var(--s-3); }
@media (max-width: 720px) { .page-intro-grid { grid-template-columns: 1fr; gap: var(--s-3); } }

/* === Werk-intro client marquee — auto-scrolling horizontal wordmark
   strip. Premium agency feel, no list-style clutter. */
.werk-intro {
  background: var(--bone);
}
.werk-clients-block {
  margin-top: clamp(var(--s-5), 7vw, var(--s-7));
  padding: var(--s-3) 0 var(--s-2);
  border-top: 1px solid rgba(10, 10, 10, 0.10);
  border-bottom: 1px solid rgba(10, 10, 10, 0.10);
  overflow: hidden;
  position: relative;
}
.werk-clients-head {
  margin-bottom: var(--s-3);
}
/* Soft fades on the left + right edges so names enter / exit the
   strip smoothly without a hard clip. */
.werk-clients-list-wrap {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.werk-clients-list {
  list-style: none;
  margin: 0;
  padding: var(--s-2) 0;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(2.5rem, 5vw, 4rem);
  width: max-content;
  animation: werk-clients-scroll 36s linear infinite;
  align-items: center;
}
.werk-clients-list li {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  transition: color .3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Small signal-red dot AFTER each name as a separator */
.werk-clients-list li::after {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0.7;
}
.werk-clients-list li:hover { color: var(--signal); }

@keyframes werk-clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .werk-clients-list { animation: none; }
}
@media (max-width: 720px) {
  .werk-clients-list { gap: 2rem; animation-duration: 28s; }
  .werk-clients-list li { gap: 2rem; font-size: 1.3rem; }
}

/* Offerings list (sub-services per page) */
.offerings {
  background: #000;
  color: var(--bone);
  padding: var(--s-7) 0;
  border-top: 1px solid rgba(245, 242, 236, 0.08);
}
.offerings .section-head h2 { color: var(--bone); }
.offerings .section-head .eyebrow,
.offerings .section-head .eyebrow-dark { color: var(--silver); }

.offerings-list {
  display: grid;
  grid-template-columns: 1fr;
}
.offering {
  display: grid;
  grid-template-columns: 110px 1fr 2fr 56px;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  border-top: 1px solid rgba(245, 242, 236, 0.08);
  cursor: default;
  transition: padding .35s var(--ease), background .35s var(--ease);
}
.offering:last-child { border-bottom: 1px solid rgba(245, 242, 236, 0.08); }
.offering:hover { padding-left: var(--s-2); }
.offering .num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--fog);
  padding-top: 4px;
}
.offering h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--bone);
}
.offering p {
  color: var(--silver);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 60ch;
}
.offering .arrow {
  width: 30px; height: 30px;
  border: 1px solid rgba(245, 242, 236, 0.22);
  border-radius: 50%;
  display: grid;
  place-items: center;
  justify-self: end;
  align-self: start;
  margin-top: 6px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  color: var(--bone);
  font-size: 0.8em;
}
.offering:hover .arrow {
  background: var(--signal);
  color: var(--bone);
  border-color: var(--signal);
  transform: translateX(4px);
}

/* Accordion expand state — clicking offering reveals .offering-detail */
.offering { cursor: pointer; }
.offering-detail {
  grid-column: 2 / -1;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.4s ease,
              margin 0.5s ease;
  margin: 0;
}
.offering.is-open .offering-detail {
  max-height: 900px;
  opacity: 1;
  margin-top: var(--s-3);
}
.offering.is-open .arrow {
  background: var(--signal);
  color: var(--bone);
  border-color: var(--signal);
  transform: rotate(90deg);
}
.offering-detail-eb {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--s-2);
  font-weight: 500;
}
.offering-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
@media (max-width: 700px) {
  .offering-detail-list { grid-template-columns: 1fr; }
}
.offering-detail-list li {
  position: relative;
  padding-left: 18px;
  color: var(--silver);
  font-size: 0.95rem;
  line-height: 1.5;
}
.offering-detail-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--signal);
  font-weight: 500;
}
@media (max-width: 880px) {
  .offering {
    grid-template-columns: 60px 1fr;
    gap: var(--s-2);
  }
  .offering h3 { grid-column: 2; }
  .offering p { grid-column: 2; }
  .offering .arrow { display: none; }
}

/* Page CTA strip (smaller than full CTA) */
.cta-strip {
  background: var(--paper);
  padding: var(--s-6) 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.cta-strip-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-4);
  align-items: center;
}
.cta-strip h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1;
}
.cta-strip h3 em { color: var(--signal); font-style: italic; font-weight: 400; }
.cta-strip .actions {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .cta-strip-grid { grid-template-columns: 1fr; }
  .cta-strip .actions { justify-content: flex-start; }
}

/* Contact form ---------------------------------------------- */
.contact-block {
  background: var(--bone);
  padding: var(--s-7) 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-6);
  align-items: start;
}
.contact-info h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 0.5rem;
  font-weight: 400;
}
.contact-info .email {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  word-break: break-word;
  display: inline-block;
  margin-bottom: var(--s-4);
}
.contact-info .meta-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  align-items: start;
}
.contact-info .meta-row:last-child { border-bottom: 1px solid rgba(0,0,0,0.08); }
.contact-info .meta-row dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
  padding-top: 4px;
}
.contact-info .meta-row dd { font-size: 1rem; color: var(--ink); line-height: 1.55; }
.contact-info .meta-row dd a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .25s; }
.contact-info .meta-row dd a:hover { border-color: var(--signal); }

.contact-form { display: flex; flex-direction: column; gap: var(--s-3); }
.field { display: flex; flex-direction: column; gap: 0.4rem; border-bottom: 1px solid rgba(0,0,0,0.15); padding-bottom: 0.5rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--iron);
  font-weight: 500;
}
.field input,
.field textarea {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.1rem;
  color: var(--ink);
  padding: 0.5rem 0;
  resize: vertical;
  font-family: var(--font-body);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--fog); opacity: 1; }
.field input:focus,
.field textarea:focus { outline: 0; }
.field:focus-within { border-color: var(--signal); }
.contact-form button { align-self: flex-start; margin-top: var(--s-3); }

/* Service pills (multi-select checkboxes) */
.field-pills { border-bottom: 0; padding-bottom: 0; }
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.pills input[type="checkbox"],
.pills input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}
.pills label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  user-select: none;
}
.pills label::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--fog);
  transition: transform .2s, color .2s;
}
.pills label:hover { border-color: var(--ink); }
.pills input[type="checkbox"]:checked + label,
.pills input[type="radio"]:checked + label {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}
.pills input[type="checkbox"]:checked + label::before,
.pills input[type="radio"]:checked + label::before {
  content: "✓";
  color: var(--signal);
}
.pills input[type="checkbox"]:focus-visible + label,
.pills input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-4); } }

/* Studio / About blocks ------------------------------------- */
.studio-stats {
  background: var(--paper);
  padding: var(--s-6) 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat .num em { color: var(--signal); font-style: italic; font-weight: 400; }
.stat p {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fog);
}
@media (max-width: 720px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); } }

/* =========================================================
   SERVICE HERO — FULL-BLEED BACKGROUND
   The render fills the whole hero. A left-to-right black fade
   sits over it so the text panel reads cleanly on the left side.
   Calm, editorial, no CSS animations. Used on /branding.html
   /website.html /design.html /3d.html.
   ========================================================= */
.svc-hero {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* Background layer — image at native aspect (1920x1080), object-fit
   cover with right-leaning focus so the left side (which fades to
   black) is what gets cropped when the hero is narrower than the
   image. */
.svc-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.svc-hero-bg img,
.svc-hero-bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

/* Black left-to-right fade over the image — same gradient logic as the
   homepage hero overlay so every service hero has the consistent
   premium look. Solid #000 on the left, smooth fade right. The extra
   bottom-fade layer rescues legibility on lighter images (e.g. Print
   editorial shots) without darkening the rest of the photo. */
.svc-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 55%,
      rgba(0, 0, 0, 0.35) 100%
    ),
    linear-gradient(90deg,
      #000 0%,
      #000 30%,
      rgba(0, 0, 0, 0.85) 48%,
      rgba(0, 0, 0, 0.50) 68%,
      rgba(0, 0, 0, 0.18) 88%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* Placeholder state — when no <img> yet, show the soft tinted gradient
   so the layout still reads. */
.svc-hero-bg.is-placeholder,
.svc-hero-bg:empty {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(229, 48, 27, 0.18), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(245, 242, 236, 0.08), transparent 60%),
    linear-gradient(135deg, #1d1d1d 0%, #0d0d0d 100%);
}

/* Content sits OVER the image, bottom-left aligned. Vertical padding
   is set longhand so .wrap's horizontal gutter is preserved — combining
   .wrap .svc-hero-content lets both rules stack without one clobbering
   the other. */
.svc-hero-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 140px;
  padding-bottom: clamp(var(--s-6), 7vw, var(--s-8));
}
.svc-hero-panel {
  max-width: 760px;
}
.svc-hero-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.6);
  margin-bottom: clamp(var(--s-3), 2.5vw, var(--s-5));
}
.svc-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 5.6vw, 5.6rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--bone);
  margin: 0 0 clamp(var(--s-3), 2vw, var(--s-4)) 0;
  max-width: 22ch;
}
.svc-hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}
.svc-hero-lead {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.05vw, 1.1rem);
  line-height: 1.55;
  color: rgba(245, 242, 236, 0.78);
  max-width: 42ch;
  margin: 0 0 clamp(var(--s-4), 2.5vw, var(--s-5)) 0;
}
.svc-hero-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* Mobile: image at 125% viewport width — slightly oversized so the
   subject feels punchier. Solid #000 below it. The ::after pseudo
   stacks two gradients: one at the image's natural bottom edge
   (125vw / 1.78 ≈ 70.22vw) for the photo-to-black bridge, plus a
   light vignette across the whole hero for legibility. */
@media (max-width: 880px) {
  .svc-hero-bg {
    background-size: 125% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #000 !important;
  }
  .svc-hero-bg img {
    width: 125%;
    height: auto;
    object-fit: contain;
    object-position: center top;
    margin-inline-start: -12.5%;
  }
  .svc-hero-bg::after {
    /* Single stacked gradient — same vw-anchored bottom fade as the
       homepage overlay so the photo melts into solid #000 right at the
       image's natural bottom edge (70.22vw for 125%/16:9). */
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0) calc(70.22vw - 110px),
      rgba(0, 0, 0, 0.45) calc(70.22vw - 40px),
      rgba(0, 0, 0, 0.92) 70.22vw,
      #000 calc(70.22vw + 50px),
      #000 100%
    );
  }
  .svc-hero-content {
    padding-top: 110px;
    padding-bottom: clamp(var(--s-5), 9vw, var(--s-7));
  }
  .svc-hero-title { font-size: clamp(2.4rem, 10.5vw, 3.4rem); max-width: 18ch; }
  .svc-hero-lead  { font-size: 1.02rem; max-width: 100%; }
}

/* =========================================================
   SERVICE-PAGE COMMON SECTIONS
   Intro / What's included / Process — calm, editorial, no
   gimmicks. Reused across all 4 service pages.
   ========================================================= */

/* Intro: 2-column. Left = eyebrow + big heading. Right = copy. */
.svc-intro {
  background: var(--bone);
  color: var(--ink);
  padding: clamp(var(--s-6), 9vw, var(--s-8)) 0;
}
.svc-intro-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(var(--s-4), 4vw, var(--s-6));
  align-items: start;
}
.svc-intro-head .eyebrow { margin-bottom: var(--s-3); display: inline-block; }
.svc-intro-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 14ch;
}
.svc-intro-head h2 em { color: var(--signal); font-style: italic; font-weight: 400; }
.svc-intro-body p {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: rgba(10, 10, 10, 0.78);
  margin: 0 0 var(--s-3) 0;
  max-width: 60ch;
}
.svc-intro-body p:last-child { margin-bottom: 0; }

/* What's included — vertical list, big number + title + copy,
   thin dividers between items. Editorial, Montanja-adjacent. */
.svc-included {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(var(--s-7), 11vw, var(--s-8)) 0;
}
.svc-included .section-head { margin-bottom: clamp(var(--s-5), 6vw, var(--s-7)); }
.svc-included .section-head h2 { color: var(--bone); }
.svc-included .section-head h2 em { color: var(--signal); }
.svc-included .section-head .eyebrow,
.svc-included .section-head .eyebrow-dark { color: rgba(245, 242, 236, 0.55); }
.svc-included-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-included-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: clamp(var(--s-3), 4vw, var(--s-5));
  padding: clamp(var(--s-4), 3.5vw, var(--s-5)) 0;
  border-top: 1px solid rgba(245, 242, 236, 0.14);
  align-items: start;
}
.svc-included-list li:last-child { border-bottom: 1px solid rgba(245, 242, 236, 0.14); }
.svc-included-list .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.45);
  padding-top: 0.5rem;
}
.svc-included-list h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.5rem 0;
  color: var(--bone);
}
.svc-included-list p {
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  color: rgba(245, 242, 236, 0.72);
  margin: 0;
  max-width: 60ch;
}

/* =========================================================
   PROCESS TIMELINE (PINNED SCROLL)
   De section is 100vh hoog en blijft pinned terwijl je door
   "N * 100vh" scrollt. Per scroll-step crossfaden de step-blokken
   in/uit, de centrale lijn vult progressief richting het volgende
   bolletje, en de bolletjes activeren één voor één.
   Op mobiel valt het terug op een gewone gestapelde lijst zonder pin.
   ========================================================= */
.process-timeline {
  background: var(--bone);
  color: var(--ink);
  position: relative;
}
/* Outer rails — height = N * 100vh, runway voor scroll-pin. JS zet
   --ptl-steps op het juiste aantal. */
.ptl-track {
  position: relative;
  height: calc(100vh * var(--ptl-steps, 4));
}
.ptl-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ptl-pin > .wrap { width: 100%; }

/* Card-grid replaces the older sticky carousel. Four rounded steps in a
   row on desktop, two-up on tablet, stacked on mobile. Active card (the
   one closest to viewport centre) lifts subtly with a signal-red glow
   so the section reads as a guided progression without scroll-jacking. */
.process-timeline {
  padding: clamp(var(--s-7), 11vw, var(--s-9)) 0;
}
.ptl-head {
  margin-bottom: clamp(var(--s-5), 6vw, var(--s-7));
  max-width: 60ch;
}
.ptl-head .eyebrow,
.ptl-head .eyebrow-dark {
  display: inline-block;
  margin-bottom: var(--s-3);
}
.ptl-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 18ch;
  color: var(--ink);
}
/* Editorial process list — numbered rows separated by hairline rules.
   Big mono number on the left, display-font title in the middle,
   description on the right. Row in the centre of viewport lights up
   its number in signal-red. No cards, no boxes, just typography. */
.ptl-rows {
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}
.ptl-row {
  display: grid;
  grid-template-columns: clamp(60px, 7vw, 110px) minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(var(--s-3), 3vw, var(--s-5));
  padding: clamp(var(--s-4), 4vw, var(--s-6)) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  align-items: start;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .6s cubic-bezier(0.22, 1, 0.36, 1),
    transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ptl-row.is-visible {
  opacity: 1;
  transform: none;
}
.ptl-row .ptl-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.25);
  letter-spacing: -0.02em;
  line-height: 1;
  font-feature-settings: 'tnum';
  transition: color .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ptl-row.is-active .ptl-num {
  color: var(--signal);
}
.ptl-row h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.65rem, 2.3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.ptl-row p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
  max-width: 56ch;
}
@media (max-width: 880px) {
  .ptl-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: var(--s-5) 0;
  }
  .ptl-row .ptl-num {
    font-size: 1.6rem;
  }
  .ptl-row h3 { font-size: 1.7rem; }
}

/* OLD sticky-carousel scaffolding — kept so other pages still on the
   .ptl-track structure (currently none, but defensive) don't break. */
.ptl-grid--legacy {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(var(--s-3), 3vw, var(--s-5));
  row-gap: clamp(var(--s-4), 4vw, var(--s-6));
  align-items: stretch;
  min-height: 70vh;
  padding-top: 110px;
}
.ptl-head h2 em { color: var(--signal); font-style: italic; font-weight: 400; }

/* LEFT column under the heading: vertical rail (line + dots). */
.ptl-rail {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  height: clamp(360px, 52vh, 560px);
  align-self: center;
}
.ptl-line {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  background: rgba(10, 10, 10, 0.10);
  transform: translateX(-50%);
  overflow: hidden;
}
.ptl-line-fill {
  display: block;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--signal) 0%, rgba(229, 48, 27, 0.65) 100%);
  transition: height .65s cubic-bezier(0.22, 1, 0.36, 1);
}
.ptl-dots {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 2;
}
.ptl-dots li {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Legacy .ptl-list (ol > li.ptl-step) layout — service pages still ship
   this markup. Unify with the homepage's editorial row look so the dot
   becomes a left index marker, the body holds num + h3 + p in a
   stacked column, and the same is-visible / is-active state powers the
   fade-up + signal-red number lighting. */
.ptl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}
.ptl-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--s-3), 3vw, var(--s-5));
  padding: clamp(var(--s-4), 4vw, var(--s-6)) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  align-items: start;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .6s cubic-bezier(0.22, 1, 0.36, 1),
    transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ptl-step > .ptl-dot { display: none; }
.ptl-step.is-visible {
  opacity: 1;
  transform: none;
}
.ptl-step .ptl-dot {
  display: none;
}
.ptl-step .ptl-body {
  display: grid;
  grid-template-columns: clamp(60px, 7vw, 110px) minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(var(--s-3), 3vw, var(--s-5));
  align-items: start;
}
.ptl-step .ptl-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.25);
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: none;
  margin: 0;
  transition: color .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ptl-step.is-active .ptl-num {
  color: var(--signal);
}
.ptl-step .ptl-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.65rem, 2.3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3) 0;
  color: var(--ink);
}
.ptl-step .ptl-body h3 em { color: var(--signal); font-style: italic; font-weight: 400; }
.ptl-step .ptl-body p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
  max-width: 56ch;
}

/* Mobile collapse: body's inner grid stacks to one column, num shrinks. */
@media (max-width: 880px) {
  .ptl-step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }
  .ptl-step .ptl-body {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .ptl-step .ptl-num {
    font-size: 1.5rem;
  }
  .ptl-step .ptl-body h3 {
    font-size: 1.7rem;
  }
  /* Dots positioneren samen met steps (gelijke verdeling) */
  .ptl-dots {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    padding: 30px 0;
  }
}

/* Process — horizontal 4-step strip on desktop, vertical on mobile.
   Dark background to break the rhythm between intro/included and
   portfolio. */
.svc-process {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(var(--s-6), 9vw, var(--s-8)) 0;
}
.svc-process .section-head { margin-bottom: clamp(var(--s-4), 5vw, var(--s-6)); }
.svc-process .section-head h2 { color: var(--bone); }
.svc-process .section-head h2 em { color: var(--signal); }
.svc-process .eyebrow { color: rgba(245, 242, 236, 0.55); }
.svc-process-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--s-3), 3vw, var(--s-5));
  counter-reset: process;
}
.svc-process-list li {
  counter-increment: process;
  padding: var(--s-3) var(--s-3) var(--s-4) 0;
  border-top: 1px solid rgba(245, 242, 236, 0.18);
  position: relative;
}
.svc-process-list li::before {
  content: counter(process, decimal-leading-zero);
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.45);
  margin-bottom: var(--s-3);
}
.svc-process-list .step {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--bone);
  display: block;
  margin-bottom: 0.5rem;
}
.svc-process-list p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(245, 242, 236, 0.7);
  margin: 0;
  max-width: 32ch;
}

/* Tablet + mobile: stack the process steps */
@media (max-width: 880px) {
  .svc-intro-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .svc-intro-head h2 { max-width: 100%; }
  .svc-included-list li {
    grid-template-columns: 56px 1fr;
    gap: var(--s-3);
  }
  .svc-process-list { grid-template-columns: 1fr; gap: 0; }
  .svc-process-list li:last-child { border-bottom: 1px solid rgba(245, 242, 236, 0.18); }
}

/* =========================================================
   HERO DISPLAY (editorial mockup hero)
   Editorial layout: text on the left, a real "deliverable"
   mockup on the right. Each page slots in its own mockup.
   ========================================================= */
.hero-display {
  background: #000;
  color: var(--bone);
  position: relative;
  overflow: hidden;
  padding: 140px 0 var(--s-6);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}

.hero-display::before {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(ellipse 60% 50% at 75% 30%, var(--glow-1, rgba(229, 48, 27, 0.32)), transparent 65%),
    radial-gradient(ellipse 50% 40% at 25% 75%, var(--glow-2, rgba(139, 43, 255, 0.22)), transparent 65%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

.hero-display-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-5);
  align-items: center;
  width: 100%;
}

.hero-display-text {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 600px;
}

.hero-display-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.65);
}

.hero-display-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 6.4vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--bone);
}
.hero-display-title em { font-style: italic; font-weight: 400; }

.hero-display-lead {
  max-width: 48ch;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: rgba(245, 242, 236, 0.78);
  margin-top: var(--s-2);
}

.hero-display-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}

.hero-display-stage {
  position: relative;
  aspect-ratio: 1.05;
  display: grid;
  place-items: center;
  perspective: 1600px;
}

@media (max-width: 880px) {
  .hero-display { padding-top: 110px; min-height: auto; }
  .hero-display-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero-display-stage { aspect-ratio: 1; max-height: 60vh; }
}

/* Glow color presets (per-page palette) — blue family ------ */
.glow-pink   { --glow-1: rgba(229,48,27,0.38);  --glow-2: rgba(139,43,255,0.20); }
.glow-blue   { --glow-1: rgba(43,127,255,0.36);  --glow-2: rgba(0,194,209,0.22); }
.glow-green  { --glow-1: rgba(37,230,168,0.32);  --glow-2: rgba(229,48,27,0.26); }
.glow-orange { --glow-1: rgba(229,48,27,0.36);  --glow-2: rgba(0,194,209,0.24); }
.glow-violet { --glow-1: rgba(139,43,255,0.36);  --glow-2: rgba(91,107,255,0.24); }
.glow-warm   { --glow-1: rgba(229,48,27,0.32);  --glow-2: rgba(91,107,255,0.24); }
.glow-multi  { --glow-1: rgba(229,48,27,0.34);  --glow-2: rgba(43,127,255,0.22); }
.glow-signal { --glow-1: rgba(229,48,27,0.4);   --glow-2: rgba(184,31,18,0.24); }

/* =========================================================
   MOCKUPS (CSS-only deliverables — replace inner divs with
   real screenshots/renders later)
   ========================================================= */

/* ---------- BRANDING: stacked business cards ---------- */
.mockup-cards {
  position: relative;
  width: min(420px, 100%);
  height: 380px;
}
.mockup-cards .card {
  position: absolute;
  width: 290px;
  height: 175px;
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  font-family: var(--font-display);
}
.mockup-cards .card-1 {
  background: var(--bone);
  color: var(--onyx);
  top: 8%; left: -8%;
  transform: rotate(-9deg);
  z-index: 3;
}
.mockup-cards .card-2 {
  background: var(--graphite);
  color: var(--bone);
  top: 30%; right: -8%;
  transform: rotate(6deg);
  z-index: 2;
}
.mockup-cards .card-3 {
  background: var(--signal);
  color: var(--bone);
  bottom: 0; left: 18%;
  transform: rotate(-3deg);
  z-index: 4;
}
.mockup-cards .card .logo-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--signal);
}
.mockup-cards .card-2 .logo-dot,
.mockup-cards .card-3 .logo-dot { background: var(--bone); }
.mockup-cards .card-1 .logo-dot { background: var(--onyx); }
.mockup-cards .card .name {
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.mockup-cards .card .meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ---------- DESIGN: magazine spread ---------- */
.mockup-spread {
  position: relative;
  width: min(540px, 100%);
  aspect-ratio: 1.4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bone);
  border-radius: 4px;
  box-shadow: 0 50px 110px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
  transform: rotate(-2deg);
  overflow: hidden;
  z-index: 2;
}
.mockup-spread::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 36px;
  transform: translateX(-50%);
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.18) 50%, transparent);
  pointer-events: none;
  z-index: 5;
}
.mockup-spread .page {
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--onyx);
}
.mockup-spread .chapter {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 8px;
}
.mockup-spread .heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.mockup-spread .heading em { font-style: italic; font-weight: 400; }
.mockup-spread .line {
  height: 4px;
  background: var(--ink);
  opacity: 0.45;
  border-radius: 2px;
}
.mockup-spread .line.w-90 { width: 90%; }
.mockup-spread .line.w-80 { width: 80%; }
.mockup-spread .line.w-70 { width: 70%; }
.mockup-spread .line.w-60 { width: 60%; }
.mockup-spread .line.w-50 { width: 50%; }
.mockup-spread .image {
  flex: 1;
  border-radius: 3px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.45), transparent 50%),
    linear-gradient(135deg, #E5301B, #B81F12 55%, #2A0F08);
  margin-bottom: 12px;
  min-height: 60%;
}
.mockup-spread .caption {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
}
.mockup-spread-back {
  position: absolute;
  inset: -8% -8% -2% -8%;
  background: var(--graphite);
  border-radius: 4px;
  transform: rotate(4deg);
  z-index: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.mockup-stack {
  position: relative;
  width: min(540px, 100%);
}

/* ---------- WEBSITE: browser + phone ---------- */
.mockup-browser {
  position: relative;
  width: min(580px, 100%);
  border-radius: 14px;
  background: var(--bone);
  box-shadow: 0 50px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
  overflow: hidden;
  transform: rotate(-1deg);
}
.mockup-browser .chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #E8E4DC;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.mockup-browser .dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #ccc;
}
.mockup-browser .dot.r { background: #FF5F57; }
.mockup-browser .dot.y { background: #FEBC2E; }
.mockup-browser .dot.g { background: #28C840; }
.mockup-browser .url {
  margin-left: 14px;
  flex: 1;
  background: var(--bone);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fog);
  letter-spacing: 0.04em;
}
.mockup-browser .body {
  padding: 38px 32px 44px;
  background: var(--bone);
  color: var(--onyx);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
}
.mockup-browser .body .eyebrow-mini {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
}
.mockup-browser .body .h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.1rem;
  letter-spacing: -0.025em;
  line-height: 0.98;
  max-width: 90%;
}
.mockup-browser .body .h em { font-style: italic; font-weight: 400; color: var(--signal); }
.mockup-browser .body .line {
  height: 5px;
  background: var(--ink);
  opacity: 0.3;
  border-radius: 2px;
}
.mockup-browser .body .line.w-80 { width: 80%; }
.mockup-browser .body .line.w-60 { width: 60%; }
.mockup-browser .body .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: var(--onyx);
  color: var(--bone);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  margin-top: 8px;
}

.mockup-phone {
  position: absolute;
  bottom: -8%;
  right: -10%;
  width: 130px;
  aspect-ratio: 0.5;
  background: var(--ink);
  border-radius: 24px;
  padding: 8px;
  border: 2px solid var(--graphite);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  transform: rotate(8deg);
  z-index: 3;
}
.mockup-phone .screen {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: var(--bone);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 8px;
}
.mockup-phone .screen .h-mini {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--onyx);
  margin-top: 8px;
}
.mockup-phone .screen .line {
  height: 3px;
  background: var(--ink);
  opacity: 0.3;
  border-radius: 2px;
}
.mockup-phone .screen .line.w-80 { width: 80%; }
.mockup-phone .screen .line.w-60 { width: 60%; }
.mockup-phone .screen .image {
  flex: 1;
  border-radius: 4px;
  margin-top: auto;
  background: linear-gradient(135deg, #2B7FFF, #6B5BFF);
}

/* ---------- ADVERTISING: phone + metrics ---------- */
.mockup-ad {
  position: relative;
  width: min(420px, 100%);
  height: 480px;
  display: grid;
  place-items: center;
}
.mockup-ad .phone {
  position: relative;
  width: 220px;
  aspect-ratio: 0.5;
  background: var(--ink);
  border-radius: 36px;
  padding: 10px;
  border: 3px solid var(--graphite);
  box-shadow: 0 50px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  transform: rotate(-4deg);
}
.mockup-ad .phone .notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 18px;
  background: var(--ink);
  border-radius: 999px;
  z-index: 2;
}
.mockup-ad .phone .screen {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bone);
  position: relative;
}
.mockup-ad .phone .screen .image {
  height: 55%;
  background:
    radial-gradient(circle at 60% 40%, rgba(255,255,255,0.4), transparent 50%),
    linear-gradient(135deg, #E5301B, #B81F12 60%, #280C06);
  position: relative;
}
.mockup-ad .phone .screen .image::after {
  content: "ad creative";
  position: absolute;
  bottom: 18px; left: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  color: var(--bone);
  line-height: 1;
}
.mockup-ad .phone .screen .body {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bone);
  color: var(--onyx);
  flex: 1;
}
.mockup-ad .phone .screen .body .h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.mockup-ad .phone .screen .body .line {
  height: 3px;
  background: var(--ink);
  opacity: 0.3;
  border-radius: 2px;
}
.mockup-ad .phone .screen .body .line.w-90 { width: 90%; }
.mockup-ad .phone .screen .body .line.w-70 { width: 70%; }
.mockup-ad .phone .screen .body .cta {
  align-self: flex-start;
  margin-top: 8px;
  background: var(--onyx);
  color: var(--bone);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
}

.mockup-ad .metric {
  position: absolute;
  background: var(--bone);
  color: var(--onyx);
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  font-family: var(--font-display);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 5;
}
.mockup-ad .metric .num {
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  line-height: 1;
}
.mockup-ad .metric .num em { color: var(--signal); font-style: italic; font-weight: 400; }
.mockup-ad .metric .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
}
.mockup-ad .metric-1 { top: 8%; left: -4%; transform: rotate(-6deg); }
.mockup-ad .metric-2 { bottom: 14%; right: -2%; transform: rotate(5deg); }

/* ---------- 3D: floating sphere/object ---------- */
.mockup-3d {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.mockup-3d .sphere {
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #FFFFFF 0%, transparent 22%),
    radial-gradient(circle at 35% 30%, #FFB5AB 0%, transparent 40%),
    radial-gradient(circle at 65% 65%, #B81F12 0%, transparent 50%),
    linear-gradient(135deg, #E5301B 0%, #B81F12 60%, #260C08 100%);
  box-shadow:
    0 80px 120px rgba(91, 184, 240, 0.4),
    inset -30px -30px 80px rgba(0,0,0,0.5),
    inset 20px 20px 40px rgba(255,255,255,0.12);
  position: relative;
  animation: float 8s ease-in-out infinite alternate;
}
.mockup-3d .sphere::after {
  /* soft floor reflection */
  content: "";
  position: absolute;
  bottom: -22%;
  left: 12%;
  right: 12%;
  height: 30px;
  background: radial-gradient(ellipse, rgba(229,48,27,0.45), transparent 70%);
  filter: blur(12px);
  z-index: -1;
}
.mockup-3d .ring {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  border: 1px dashed rgba(245,242,236,0.18);
  animation: rotate-slow 30s linear infinite;
}
.mockup-3d .label {
  position: absolute;
  top: 8%;
  right: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.6);
  text-align: right;
}
.mockup-3d .label::before {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: rgba(245,242,236,0.4);
  margin: 0 0 6px auto;
}
@keyframes float {
  0%   { transform: translateY(-10px); }
  100% { transform: translateY(10px); }
}
@keyframes rotate-slow {
  to { transform: rotate(360deg); }
}

/* ---------- STUDIO: polaroid stack ---------- */
.mockup-polaroids {
  position: relative;
  width: min(440px, 100%);
  height: 420px;
}
.mockup-polaroids .polaroid {
  position: absolute;
  width: 240px;
  height: 280px;
  background: var(--bone);
  padding: 14px 14px 50px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.mockup-polaroids .polaroid .img {
  width: 100%;
  height: 100%;
  border-radius: 2px;
}
.mockup-polaroids .polaroid .cap {
  position: absolute;
  bottom: 14px;
  left: 14px; right: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}
.mockup-polaroids .p1 {
  top: 5%; left: 0;
  transform: rotate(-7deg);
  z-index: 1;
}
.mockup-polaroids .p1 .img { background: linear-gradient(135deg, #FF6B5B, #E5301B); }
.mockup-polaroids .p2 {
  top: 12%; left: 28%;
  transform: rotate(4deg);
  z-index: 2;
}
.mockup-polaroids .p2 .img { background: linear-gradient(135deg, #E5301B, #B81F12); }
.mockup-polaroids .p3 {
  bottom: 0; right: 0;
  transform: rotate(-3deg);
  z-index: 3;
}
.mockup-polaroids .p3 .img { background: linear-gradient(135deg, #B81F12, #280C06); }

/* ---------- WERK: small mockup grid ---------- */
.mockup-grid-mini {
  position: relative;
  width: min(540px, 100%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  transform: rotate(-2deg);
}
.mockup-grid-mini .tile {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
  background: var(--graphite);
  position: relative;
  overflow: hidden;
}
.mockup-grid-mini .tile::after {
  content: attr(data-name);
  position: absolute;
  bottom: 10px; left: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
}
.mockup-grid-mini .tile-1 { background: radial-gradient(circle at 30% 30%, #E5301B, #B81F12 60%, #1F0808); }
.mockup-grid-mini .tile-2 { background: radial-gradient(circle at 70% 60%, #2B7FFF, #6B5BFF 60%, #0F1530); }
.mockup-grid-mini .tile-3 { background: linear-gradient(135deg, #E5301B, #B82418 70%, #1F2933); }
.mockup-grid-mini .tile-4 { background: radial-gradient(circle at 40% 40%, #FF6B5B, #B81F12 70%, #1F0606); }

/* ---------- CONTACT: chat bubble + form card ---------- */
.mockup-message {
  position: relative;
  width: min(500px, 100%);
  height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  transform: rotate(-1.5deg);
  overflow: hidden;
  padding-top: 60px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%);
}
.mockup-message .bubble.is-entering,
.mockup-message .typing.is-entering {
  animation: bubble-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mockup-message .bubble.is-leaving,
.mockup-message .typing.is-leaving {
  animation: bubble-out 0.4s ease-in both;
}
@keyframes bubble-out {
  from { opacity: 1; transform: translateY(0); max-height: 220px; margin-top: 0; }
  to   { opacity: 0; transform: translateY(-12px); max-height: 0; margin-top: -14px; padding-top: 0; padding-bottom: 0; }
}
.mockup-message .bubble {
  background: var(--bone);
  color: var(--onyx);
  padding: 20px 24px;
  border-radius: 20px 20px 20px 4px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.18rem;
  letter-spacing: -0.015em;
  line-height: 1.28;
  max-width: 86%;
}
.mockup-message .bubble.them {
  align-self: flex-end;
  background: var(--signal);
  color: var(--bone);
  border-radius: 18px 18px 4px 18px;
}
.mockup-message .bubble .meta {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.6;
}
.mockup-message .typing {
  align-self: flex-start;
  background: var(--graphite);
  padding: 12px 18px;
  border-radius: 18px 18px 18px 4px;
  display: flex;
  gap: 5px;
}
.mockup-message .typing.them {
  align-self: flex-end;
  background: var(--signal);
  border-radius: 18px 18px 4px 18px;
  opacity: 0.85;
}
.mockup-message .typing span {
  width: 7px; height: 7px;
  background: var(--bone);
  border-radius: 50%;
  opacity: 0.4;
  animation: blink 1.4s infinite ease-in-out;
}
.mockup-message .typing span:nth-child(2) { animation-delay: 0.2s; }
.mockup-message .typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

/* Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee-track,
  .floating-badge-ring,
  .hero-scroll::after,
  .mockup-3d .sphere,
  .mockup-3d .ring,
  .mockup-message .typing span { animation: none; }
}

/* =========================================================
   OFFERTE PAGE
   ========================================================= */

/* Promise card in hero */
.offerte-promise {
  background: rgba(245,242,236,0.06);
  border: 1px solid rgba(245,242,236,0.12);
  border-radius: 18px;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  backdrop-filter: blur(6px);
}
.offerte-promise .promise-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-2);
  align-items: start;
}
.offerte-promise .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--signal);
  padding-top: 4px;
}
.offerte-promise strong {
  display: block;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.offerte-promise p {
  color: rgba(245,242,236,0.7);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

/* Form sections */
.offerte-form { background: var(--bone); }
.offerte-section { padding: var(--s-6) 0; border-top: 1px solid rgba(0,0,0,0.08); }
.offerte-section:first-of-type { border-top: 0; }
.offerte-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--s-5);
  align-items: start;
}
.offerte-head { position: sticky; top: 100px; }
.offerte-head .eyebrow { display: inline-block; margin-bottom: var(--s-2); }
.offerte-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
  text-wrap: balance;
}
.offerte-head p {
  color: var(--fog);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 30ch;
}
.offerte-body { display: flex; flex-direction: column; gap: var(--s-4); }

/* Question blocks */
.q-block { display: flex; flex-direction: column; gap: 0.75rem; }
.q-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.q-input {
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.18);
  background: transparent;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  padding: 0.6rem 0;
  font-family: var(--font-body);
  width: 100%;
  resize: vertical;
  transition: border-color .25s;
}
.q-input::placeholder { color: var(--fog); opacity: 1; }
.q-input:focus { outline: 0; border-color: var(--signal); }
textarea.q-input { min-height: 100px; }
.q-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-4);
}
.q-hint {
  font-size: 0.88rem;
  color: var(--fog);
  line-height: 1.55;
  margin-top: var(--s-2);
}
.q-hint a { color: var(--signal); border-bottom: 1px solid var(--signal); }

/* Larger pills for the main service selector */
.pills-lg label {
  padding: 0.85rem 1.4rem;
  font-size: 1rem;
  font-weight: 500;
}

/* Conditional service blocks */
.offerte-block { display: none; }
.offerte-block.is-active { display: block; }

/* Submit */
.offerte-submit {
  background: var(--ink);
  border-top: 0;
  padding: var(--s-7) 0;
}
.submit-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.btn-lg {
  font-size: 1.05rem;
  padding: 1.1em 1.8em;
}
.submit-reassurance {
  color: rgba(245,242,236,0.55);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.offerte-submit .btn-dark {
  background: var(--bone);
  color: var(--ink);
}
.offerte-submit .btn-dark:hover { background: var(--signal); color: var(--bone); }

/* Responsive */
@media (max-width: 980px) {
  .offerte-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .offerte-head { position: static; }
  .offerte-head p { max-width: 100%; }
  .q-grid { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* =========================================================
   SERVICE PAGE — animated hero stages per discipline
   Used on: website, branding, 3d, design, advertising
   ========================================================= */

.page-stage {
  position: relative;
  width: min(560px, 100%);
}

/* === 3D PAGE — large product render ============== */
.page-stage-3d .page-visual {
  width: 100%;
  aspect-ratio: 1.05 / 1;
  min-height: 420px;
  border-radius: 18px;
}
.page-stage-3d .prod-cap   { width: 50px; height: 30px; border-radius: 7px 7px 3px 3px; }
.page-stage-3d .prod-collar{ width: 40px; height: 9px; }
.page-stage-3d .prod-body  { width: 124px; height: 178px; border-radius: 12px 12px 22px 22px; }
.page-stage-3d .prod-shine { width: 16px; height: 130px; top: 16px; left: 14px; }
.page-stage-3d .prod-label { font-size: 18px; bottom: 40px; letter-spacing: 0.1em; }
.page-stage-3d .prod-label em { font-size: 11px; }
.page-stage-3d .svc-3d-shadow { width: 200px; height: 22px; }
.page-stage-3d .svc-3d-grid { background-size: 30px 30px; }
.page-stage-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(245,242,236,0.08);
  border: 1px solid rgba(245,242,236,0.2);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  backdrop-filter: blur(8px);
  z-index: 4;
}

/* === BRANDING PAGE — brand marquee stage === */
.page-stage-brand {
  width: 100%;
  height: 540px;
  position: relative;
}
/* === BRAND MOSAIC: case-study tile composition === */
.brand-mosaic {
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.4));
}
.bm-tile {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px;
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: center;
}
/* Layout A — default grid positions. JS adds .layout-b / .layout-c on the
   .brand-mosaic to override these, with FLIP-driven smooth transforms. */
.bm-banner   { grid-column: 1 / 5; grid-row: 1 / 3; animation: bm-enter 1s ease-out 0.05s forwards; }
.bm-phone    { grid-column: 5 / 7; grid-row: 1 / 3; animation: bm-enter 1s ease-out 0.15s forwards; }
.bm-tagline  { grid-column: 1 / 4; grid-row: 3 / 4; animation: bm-enter 1s ease-out 0.25s forwards; }
.bm-photo    { grid-column: 4 / 7; grid-row: 3 / 4; animation: bm-enter 1s ease-out 0.35s forwards; }
.bm-excl     { grid-column: 1 / 2; grid-row: 4 / 5; animation: bm-enter 1s ease-out 0.45s forwards; }
.bm-logo     { grid-column: 2 / 3; grid-row: 4 / 5; animation: bm-enter 1s ease-out 0.55s forwards; }
.bm-stat     { grid-column: 3 / 7; grid-row: 4 / 5; animation: bm-enter 1s ease-out 0.65s forwards; }

@keyframes bm-enter {
  0%   { opacity: 0; transform: translateY(10px) scale(0.97); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Cycling content tracks (used in tagline + stat) */
.bm-cycle-track {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}
.bm-cycle-item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
}
/* Tagline: 3-state cycle, 12s loop */
.bm-tagline-track .bm-cycle-item:nth-child(1) { animation: bm-cycle3-1 12s ease-in-out infinite; }
.bm-tagline-track .bm-cycle-item:nth-child(2) { animation: bm-cycle3-2 12s ease-in-out infinite; }
.bm-tagline-track .bm-cycle-item:nth-child(3) { animation: bm-cycle3-3 12s ease-in-out infinite; }
/* Stat: 3-state cycle, 9s loop */
.bm-stat-track .bm-cycle-item:nth-child(1) { animation: bm-cycle3-1 9s ease-in-out infinite; }
.bm-stat-track .bm-cycle-item:nth-child(2) { animation: bm-cycle3-2 9s ease-in-out infinite; }
.bm-stat-track .bm-cycle-item:nth-child(3) { animation: bm-cycle3-3 9s ease-in-out infinite; }

@keyframes bm-cycle3-1 {
  0%, 28%   { opacity: 1; transform: translateY(0); }
  33%       { opacity: 0; transform: translateY(-12px); }
  35%, 95%  { opacity: 0; transform: translateY(12px); }
  100%      { opacity: 1; transform: translateY(0); }
}
@keyframes bm-cycle3-2 {
  0%, 28%   { opacity: 0; transform: translateY(12px); }
  33%, 61%  { opacity: 1; transform: translateY(0); }
  66%       { opacity: 0; transform: translateY(-12px); }
  68%, 100% { opacity: 0; transform: translateY(12px); }
}
@keyframes bm-cycle3-3 {
  0%, 61%   { opacity: 0; transform: translateY(12px); }
  66%, 95%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(-12px); }
}

.bm-tagline-foot {
  position: absolute;
  bottom: 18px;
  left: 24px;
  right: 24px;
}

/* === Eyebrow + footers === */
.bm-eb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
}
.bm-eb-dark { color: var(--signal); }
.bm-foot {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: auto;
}
.bm-foot-dark { color: var(--fog); }

/* === Banner tile (big dark with display headline) === */
.bm-banner {
  background:
    radial-gradient(circle at 20% 20%, rgba(229,48,27,0.18), transparent 55%),
    var(--ink);
  color: var(--bone);
  padding: 24px 28px;
}
.bm-banner-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}
.bm-banner-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--bone);
  margin-top: auto;
}
.bm-banner-h em { font-style: italic; font-weight: 400; color: var(--signal); }

/* === Phone tile (signal orange with mock site) === */
.bm-phone {
  background: var(--signal);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bm-phone-screen {
  width: 100%;
  background: var(--bone);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 90%;
}
.bm-phone-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.bm-phone-bar span {
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0.2;
}
.bm-phone-bar span:first-child { flex: 1; }
.bm-phone-bar span:last-child { width: 24px; }
.bm-phone-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  margin-top: 4px;
}
.bm-phone-h em { font-style: italic; font-weight: 400; color: var(--signal); }
.bm-line {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0.18;
  width: 90%;
}
.bm-line.short { width: 55%; }
.bm-phone-pill {
  align-self: flex-start;
  background: var(--ink);
  color: var(--bone);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  margin-top: auto;
}

/* === Tagline tile (bone with bold typography) === */
.bm-tagline {
  background: var(--bone);
  color: var(--ink);
  padding: 22px 24px;
  border: 1px solid rgba(0,0,0,0.06);
}
.bm-tagline-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--ink);
}
.bm-tagline-h em { font-style: italic; font-weight: 400; color: var(--signal); }

/* === Photo tile, now: color palette === */
.bm-photo {
  background: var(--ink);
  color: var(--bone);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bm-eb-light { color: var(--signal); }
.bm-palette-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  flex: 1;
}
.bm-pal {
  border-radius: 6px;
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-height: 60px;
}
.bm-pal-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: -0.015em;
}
.bm-pal-hex {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bm-pal-1 { background: #1C1F22; color: var(--bone); }
.bm-pal-1 .bm-pal-hex { color: var(--silver); }
.bm-pal-2 { background: #3A5A6B; color: var(--bone); }
.bm-pal-2 .bm-pal-hex { color: rgba(245,242,236,0.8); }
.bm-pal-3 { background: #EDE7DA; color: var(--ink); }
.bm-pal-3 .bm-pal-hex { color: var(--fog); }
.bm-pal-4 { background: #7A5A3B; color: var(--bone); }
.bm-pal-4 .bm-pal-hex { color: rgba(245,242,236,0.7); }

/* Hide all old 3D photo elements (no longer used) */
.bm-photo-3d, .bm-photo-shadow, .bm-photo-tag { display: none !important; }
.bm-photo-3d {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  animation: prod-float 5s ease-in-out infinite;
}
.bm-photo-3d .prod-cap {
  width: 26px;
  height: 16px;
  background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%);
  border-radius: 4px 4px 2px 2px;
  box-shadow: inset 1px 2px 2px rgba(255,255,255,0.18);
}
.bm-photo-3d .prod-collar {
  width: 20px;
  height: 5px;
  background: linear-gradient(180deg, #d8d4cc, #5a5650);
}
.bm-photo-3d .prod-body {
  width: 64px;
  height: 90px;
  background:
    linear-gradient(125deg,
      rgba(255,255,255,0.18) 0%,
      rgba(229,48,27,0.85) 45%,
      #5C0A02 100%);
  border-radius: 6px 6px 12px 12px;
  box-shadow:
    0 25px 50px rgba(229,48,27,0.45),
    inset -7px -2px 14px rgba(0,0,0,0.4),
    inset 4px 4px 10px rgba(255,255,255,0.18);
  position: relative;
  overflow: hidden;
}
.bm-photo-3d .prod-shine {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 9px;
  height: 64px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.7) 0%,
    rgba(255,255,255,0.3) 40%,
    rgba(255,255,255,0.05) 100%);
  border-radius: 5px;
  filter: blur(1.5px);
}
.bm-photo-shadow {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 12px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
}
.bm-photo-tag {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  opacity: 0.8;
  z-index: 3;
}

/* === Exclamation tile === */
.bm-excl {
  background: var(--signal);
  align-items: center;
  justify-content: center;
  color: var(--bone);
  padding: 0;
}
.bm-excl-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
}

/* === Logo mark tile === */
.bm-logo {
  background: var(--ink);
  align-items: center;
  justify-content: center;
  color: var(--bone);
  padding: 0;
}
.bm-logo-mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.05em;
  line-height: 1;
}
.bm-logo-mark sup {
  font-size: 0.2em;
  color: var(--signal);
  font-style: italic;
  vertical-align: super;
}

/* === Stat tile === */
.bm-stat {
  background: var(--bone);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 16px 22px;
  justify-content: space-between;
}
.bm-stat-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--ink);
}
.bm-stat-num em { font-style: italic; font-weight: 400; color: var(--signal); }

@media (prefers-reduced-motion: reduce) {
  .bm-tile, .bm-photo-3d { animation: none; opacity: 1 !important; }
}

/* === Brand vertical marquee — left col scrolls up, right col scrolls down === */
.brand-marquee {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Don't stretch columns to grid track height — let them be content-tall
     so the translateY(-50%) animation actually scrolls through cards. */
  align-items: start;
  gap: 14px;
  overflow: hidden;
  border-radius: 18px;
  /* Soft fade on top & bottom edges so cards don't hard-clip */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.brand-marquee-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  will-change: transform;
}
.brand-marquee-col-up   { animation: marquee-up   28s linear infinite; }
.brand-marquee-col-down { animation: marquee-down 28s linear infinite; }
@keyframes marquee-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes marquee-down {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

.brand-card {
  flex: 0 0 auto;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.brand-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 2;
  position: relative;
  opacity: 0.85;
}
.brand-card-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0;
  z-index: 2;
  position: relative;
}
.brand-card-headline em {
  font-style: italic;
  font-weight: 400;
}
.brand-card-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  z-index: 2;
  position: relative;
}
.brand-card-shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* Color variants */
.brand-card-nord  { background: #3A5A6B; color: #EDE7DA; }
.brand-card-vale  { background: #5C0A02; color: #F2EAD8; }
.brand-card-vale  .brand-card-headline em { color: #E8B473; }
.brand-card-kava  { background: #EDE7DA; color: #2A1A0E; }
.brand-card-kava  .brand-card-headline em { color: #8B5A2B; }
.brand-card-solene{ background: #E8746B; color: #FFF8F2; }
.brand-card-mull  { background: #2C4A37; color: #EDE7DA; }
.brand-card-mull  .brand-card-headline em { color: #C9A875; }
.brand-card-toko  { background: #F4C842; color: #2A1A0E; }
.brand-card-toko  .brand-card-headline em { color: #C25E1E; }

/* Decorative shapes per card */
.brand-card-nord  .brand-card-shape { width: 75%; aspect-ratio: 1; bottom: -25%; right: -15%; border-radius: 50%; background: rgba(237,231,218,0.08); border: 1px solid rgba(237,231,218,0.18); }
.brand-card-vale  .brand-card-shape { width: 80%; aspect-ratio: 1; top: -30%; left: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(232,180,115,0.22), transparent 70%); }
.brand-card-kava  .brand-card-shape { width: 60%; aspect-ratio: 1; bottom: -20%; right: -10%; border-radius: 50%; border: 14px solid rgba(42,26,14,0.07); }
.brand-card-solene .brand-card-shape { width: 70%; aspect-ratio: 1; top: -20%; right: -25%; border-radius: 50%; background: rgba(255,248,242,0.12); }
.brand-card-mull  .brand-card-shape { width: 90%; height: 1px; bottom: 38%; left: 5%; background: rgba(201,168,117,0.4); }
.brand-card-toko  .brand-card-shape { width: 50%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 8px dashed rgba(42,26,14,0.18); }

/* Reduced-motion: pause marquee */
@media (prefers-reduced-motion: reduce) {
  .brand-marquee-col { animation: none !important; }
}

/* Hide ALL old branding artwork (notebook + book) */
.brand-notebook,
.np-page, .np-spine, .np-leaf,
.notebook-spread,
.brand-book, .brand-book-spine, .brand-book-pages, .brand-page,
.brand-notebook-page, .brand-notebook-spine { display: none !important; }

/* Static page surfaces — left always shows Identity, right always shows Applications */
.np-page {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc(50% - 3px);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #faf7ef 0%, #f1ece1 100%);
  z-index: 1;
}
.np-page-left {
  left: 0;
  border-radius: 4px 0 0 4px;
  box-shadow: inset -10px 0 16px -8px rgba(0,0,0,0.18);
}
.np-page-right {
  right: 0;
  border-radius: 0 12px 12px 0;
  box-shadow: inset 10px 0 16px -8px rgba(0,0,0,0.18);
}

/* Spine in the middle */
.np-spine {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 3px);
  width: 6px;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.18) 30%,
      rgba(0,0,0,0.18) 70%,
      rgba(0,0,0,0.10) 100%);
  z-index: 4;
}

/* The flipping leaf — covers the right page initially.
   Rotates around its left edge (the spine). */
.np-leaf {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(50% - 3px);
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  animation: leaf-flip 9s cubic-bezier(0.7, 0, 0.3, 1) infinite;
  z-index: 5;
  will-change: transform;
}
.np-leaf-face {
  position: absolute;
  inset: 0;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #faf7ef 0%, #f1ece1 100%);
}
.np-leaf-front {
  border-radius: 0 12px 12px 0;
  box-shadow:
    inset 10px 0 16px -8px rgba(0,0,0,0.18),
    -8px 0 16px -4px rgba(0,0,0,0.05);
}
.np-leaf-back {
  /* Pre-rotated 180deg so when parent rotates -180, this face shows upright */
  transform: rotateY(180deg);
  border-radius: 4px 0 0 4px;
  box-shadow:
    inset -10px 0 16px -8px rgba(0,0,0,0.18),
    8px 0 16px -4px rgba(0,0,0,0.05);
}

/* Page-turn: 9s loop. 0% to 35%: spread 1 visible.
   35-45%: page flips left (rotateY 0 → -180).
   45-85%: spread 2 visible (typography on left, applications on right).
   85-100%: page flips back (rotateY -180 → -360 = 0). */
@keyframes leaf-flip {
  0%, 35%   { transform: rotateY(0deg); }
  45%, 85%  { transform: rotateY(-180deg); }
  100%      { transform: rotateY(-360deg); }
}

/* Hide all old book/spread CSS that conflicts */
.notebook-spread, .brand-book, .brand-book-spine, .brand-book-pages, .brand-page,
.brand-notebook-page, .brand-notebook-spine { display: none !important; }
.brand-notebook::before {
  /* page bottom shadow under notebook */
  content: '';
  position: absolute;
  inset: auto -4% -8% -4%;
  height: 24px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.35) 0%, transparent 70%);
  z-index: -1;
  filter: blur(8px);
}
.brand-notebook-spine {
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.18) 30%,
      rgba(0,0,0,0.18) 70%,
      rgba(0,0,0,0.10) 100%);
  position: relative;
}
.brand-notebook-spine::before,
.brand-notebook-spine::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
}
.brand-notebook-spine::before { left: -2px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06)); }
.brand-notebook-spine::after  { right: -2px; background: linear-gradient(90deg, rgba(0,0,0,0.06), transparent); }

.brand-notebook-page {
  position: relative;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background:
    linear-gradient(135deg, #faf7ef 0%, #f1ece1 100%);
  /* Subtle page texture */
  background-image:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #faf7ef 0%, #f1ece1 100%);
}
.brand-page-left {
  border-radius: 4px 0 0 4px;
  box-shadow: inset -10px 0 16px -8px rgba(0,0,0,0.18);
}
.brand-page-right {
  border-radius: 0 12px 12px 0;
  box-shadow: inset 10px 0 16px -8px rgba(0,0,0,0.18);
}

/* Common notebook page text */
.np-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
}
.np-page-num {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog);
  margin-top: auto;
  align-self: flex-end;
}

/* LEFT page: identity + typography */
.np-mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 5.4rem;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--ink);
  margin-top: 4px;
}
.np-mark sup {
  font-size: 0.18em;
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
  vertical-align: super;
  margin-left: 4px;
}
.np-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 14px;
}
.np-meta strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.np-meta em {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fog);
  font-style: normal;
}
.np-type-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding-bottom: 8px;
}
.np-type-name {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fog);
}
.np-type-sample {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.2rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.np-type-sample em { font-style: italic; font-weight: 400; color: var(--signal); }
.np-type-sample-body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* RIGHT page: palette + applications */
.np-palette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.np-sw {
  border-radius: 6px;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-height: 78px;
}
.np-sw-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.015em;
  line-height: 1;
}
.np-sw-hex {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.np-sw-1 { background: #0A0A0A; color: var(--bone); }
.np-sw-1 .np-sw-hex { color: var(--silver); }
.np-sw-2 { background: #FF4A1C; color: var(--bone); }
.np-sw-2 .np-sw-hex { color: rgba(245,242,236,0.8); }
.np-sw-3 { background: var(--bone); color: var(--ink); border: 1px solid rgba(0,0,0,0.08); }
.np-sw-3 .np-sw-hex { color: var(--fog); }
.np-sw-4 { background: #5C0A02; color: var(--bone); }
.np-sw-4 .np-sw-hex { color: rgba(245,242,236,0.7); }

.np-applications {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Applications grid (used on spread 2 right page) */
.np-app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
}
.np-app-card {
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  min-height: 70px;
}
.np-app-card strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.015em;
  line-height: 1;
}
.np-app-card em {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
}
.np-app-1 { background: var(--bone); color: var(--ink); border: 1px solid rgba(0,0,0,0.1); }
.np-app-1 em { color: var(--fog); }
.np-app-2 { background: linear-gradient(135deg, #FF4A1C, #5C0A02); color: var(--bone); }
.np-app-2 em { color: rgba(245,242,236,0.7); }
.np-app-3 { background: var(--ink); color: var(--bone); }
.np-app-3 em { color: var(--silver); }
.np-app-4 { background: linear-gradient(135deg, #5C0A02, #1F0606); color: var(--bone); }
.np-app-4 em { color: rgba(245,242,236,0.6); }
.np-app-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
}
.np-app-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.np-app {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 5px 9px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.4);
}

/* Hide all old book CSS so it doesn't interfere */
.brand-book,
.brand-book-spine,
.brand-book-pages,
.brand-page { display: none !important; }
.page-stage-brand .brand-card { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .brand-notebook { animation: none; }
}
.brand-book {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  border-radius: 4px 14px 14px 4px;
  box-shadow: 0 50px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.08);
  perspective: 1800px;
  perspective-origin: 30% center;
  background: var(--ink);
}
.brand-book-spine {
  background: linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 30%, #0a0a0a 100%);
  border-radius: 4px 0 0 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.brand-book-spine span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
  transform: rotate(-90deg);
  opacity: 0.7;
}
.brand-book-spine::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(90deg, rgba(0,0,0,0.4), transparent);
}

.brand-book-pages {
  position: relative;
  transform-style: preserve-3d;
}
.brand-page {
  position: absolute;
  inset: 0;
  background: var(--bone);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transform-origin: 0% 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0 14px 14px 0;
  box-shadow: inset 8px 0 16px -8px rgba(0,0,0,0.18);
  transform: rotateY(0deg);
  will-change: transform;
}
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
}
.page-eyebrow-light { color: var(--silver); }
.page-foot {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
  align-self: flex-end;
}

/* Cover */
.page-cover {
  background: radial-gradient(circle at 70% 20%, rgba(229,48,27,0.18), transparent 55%), var(--ink);
  color: var(--bone);
  align-items: center;
  text-align: center;
}
.cover-mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 7rem;
  letter-spacing: -0.05em;
  line-height: 0.8;
  color: var(--bone);
}
.cover-mark sup {
  font-size: 1rem;
  color: var(--signal);
  font-weight: 400;
  font-style: italic;
  vertical-align: super;
  margin-left: 4px;
}
.cover-meta { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.cover-meta span { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.02em; }
.cover-meta em {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver);
  font-style: normal;
}

/* Logo page */
.logo-variants {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  flex: 1;
  align-items: stretch;
}
.lv {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.4rem;
  letter-spacing: -0.05em;
  border-radius: 8px;
}
.lv sup { font-size: 0.45rem; font-style: italic; font-weight: 400; margin-left: 1px; vertical-align: super; }
.lv-primary { background: var(--bone); color: var(--ink); border: 1px solid rgba(0,0,0,0.08); }
.lv-outline {
  background: var(--bone);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  border: 1px solid rgba(0,0,0,0.08);
}
.lv-outline sup { color: var(--signal); -webkit-text-stroke: 0; }
.lv-inverse { background: var(--ink); color: var(--bone); }

/* Palette page */
.palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
}
.pal-cell {
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}
.pal-cell strong { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: -0.015em; }
.pal-cell em { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; font-style: normal; }
.pal-1 { background: #0A0A0A; color: var(--bone); }
.pal-1 em { color: var(--silver); }
.pal-2 { background: #FF4A1C; color: var(--bone); }
.pal-3 { background: var(--bone); color: var(--ink); border: 1px solid rgba(0,0,0,0.08); }
.pal-3 em { color: var(--fog); }
.pal-4 { background: #5C0A02; color: var(--bone); }
.pal-4 em { color: rgba(245,242,236,0.6); }

/* Type page */
.type-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.type-row:last-of-type { border-bottom: 0; }
.type-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.2rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.type-display em { font-style: italic; font-weight: 400; color: var(--signal); }
.type-body-sample {
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.type-name {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
}

/* Apps page */
.apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; }
.apps-cell {
  border-radius: 8px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: space-between;
}
.apps-cell strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  line-height: 1;
}
.apps-cell strong sup { font-size: 0.45em; vertical-align: super; }
.apps-cell em {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
}
.apps-business { background: var(--bone); color: var(--ink); border: 1px solid rgba(0,0,0,0.08); }
.apps-business em { color: var(--fog); }
.apps-package { background: linear-gradient(135deg, #FF4A1C 0%, #5C0A02 100%); color: var(--bone); }
.apps-package em { color: rgba(245,242,236,0.7); }
.apps-web { background: var(--ink); color: var(--bone); }
.apps-web em { color: var(--silver); }
.apps-social { background: linear-gradient(135deg, #FF4A1C 30%, #5C0A02 100%); color: var(--bone); }
.apps-social em { color: rgba(245,242,236,0.7); }

/* Page flip animation — staggered */
.page-cover   { z-index: 5; animation: book-flip-1 16s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.page-logo    { z-index: 4; animation: book-flip-2 16s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.page-palette { z-index: 3; animation: book-flip-3 16s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.page-type    { z-index: 2; animation: book-flip-4 16s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.page-apps    { z-index: 1; }

@keyframes book-flip-1 {
  0%, 14%   { transform: rotateY(0deg); }
  19%, 92%  { transform: rotateY(-178deg); }
  98%, 100% { transform: rotateY(0deg); }
}
@keyframes book-flip-2 {
  0%, 32%   { transform: rotateY(0deg); }
  37%, 92%  { transform: rotateY(-178deg); }
  98%, 100% { transform: rotateY(0deg); }
}
@keyframes book-flip-3 {
  0%, 50%   { transform: rotateY(0deg); }
  55%, 92%  { transform: rotateY(-178deg); }
  98%, 100% { transform: rotateY(0deg); }
}
@keyframes book-flip-4 {
  0%, 68%   { transform: rotateY(0deg); }
  73%, 92%  { transform: rotateY(-178deg); }
  98%, 100% { transform: rotateY(0deg); }
}

/* Hide-on-mobile placeholder so old kit-grid CSS below doesn't apply */
.brand-card { display: none; }
.brand-card {
  background: var(--bone);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}
.brand-card-main {
  grid-column: 1;
  grid-row: 1 / 3;
  align-items: center;
  justify-content: space-between;
  background:
    radial-gradient(circle at 30% 30%, rgba(229,48,27,0.10), transparent 60%),
    var(--bone);
}
.brand-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
  align-self: flex-start;
}
.page-mark {
  font-size: 8rem !important;
  letter-spacing: -0.05em;
  color: var(--ink);
  line-height: 0.85;
  animation: brand-pulse 4s ease-in-out infinite;
  text-align: center;
}
.page-mark sup { font-size: 1.2rem !important; }
@keyframes brand-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.brand-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}
.brand-card-meta strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-card-meta em {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
  font-style: normal;
}
.page-palette { gap: 10px; margin: 0; }
.page-palette .sw { width: 36px; height: 36px; }
.brand-card-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fog);
}
.brand-card-codes span {
  border: 1px solid rgba(0,0,0,0.08);
  padding: 4px 8px;
  border-radius: 999px;
}
.brand-type-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.4rem;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--ink);
}
.brand-type-display em {
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}

/* === ADS PAGE — chart + creative ================== */
.page-stage-ads {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  position: relative;
}
.ads-card {
  background: var(--bone);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}
.ads-card-chart {
  background: linear-gradient(135deg, #fafaf7 0%, #ECE6DA 100%);
}
.page-chart {
  height: 110px !important;
  gap: 6px !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
.page-chart .bar.b7 { height: 75%; animation-delay: 0.9s; background: var(--signal); }
.page-chart .bar.b8 { height: 100%; animation-delay: 1.05s; background: var(--signal); }
.ads-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ads-kpi-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ads-kpi-row strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
.ads-kpi-row strong span {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.ads-kpi-row em {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--fog);
}
.ads-creative {
  position: relative;
}
.creative-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}
.creative-image {
  flex: 1;
  min-height: 110px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 70% 30%, rgba(229,48,27,0.4), transparent 60%),
    linear-gradient(135deg, #1F0606 0%, #5C0A02 50%, #FF4A1C 100%);
}
.creative-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.creative-body strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.creative-body strong em {
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}
.creative-line {
  display: block;
  height: 4px;
  background: var(--ink);
  opacity: 0.18;
  border-radius: 2px;
}
.creative-line.w-80 { width: 80%; }
.creative-line.w-50 { width: 50%; }
.creative-cta {
  align-self: flex-start;
  background: var(--ink);
  color: var(--bone);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
}
.ads-platforms {
  position: absolute;
  bottom: -16px;
  right: 24px;
  display: flex;
  gap: 8px;
  z-index: 4;
}
.ads-platforms .plat {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  animation: plat-bob 3s ease-in-out infinite;
}
.ads-platforms .plat.google { color: #4285F4; }
.ads-platforms .plat.meta { color: #1877F2; animation-delay: 0.4s; }
.ads-platforms .plat.tiktok { color: #FE2C55; animation-delay: 0.8s; }
@keyframes plat-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* === DESIGN PAGE — fullscreen vertical 3D-tilted carousel === */
.hero-design { position: relative; min-height: 100vh; }
.hero-design .wrap { position: relative; z-index: 2; }
/* Hide the old empty hero-display-stage that's no longer used */
.hero-design .hero-display-stage { display: none; }

/* Carousel is now a direct child of the hero — spans full hero height */
.hero-design > .page-stage-design {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(420px, 52%, 780px);
  overflow: hidden;
  perspective: 2200px;
  perspective-origin: 50% 50%;
  pointer-events: none;
  z-index: 0;
  /* Mask: hide top portion for navbar fade, show full middle, fade bottom */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.print-carousel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transform-style: preserve-3d;
  overflow: hidden;
}
.print-stack {
  width: min(540px, 78%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 0;
  transform-style: preserve-3d;
  animation: stack-down 24s linear infinite;
  flex-shrink: 0;
}
@keyframes stack-down {
  0%   { transform: translate3d(0, -50%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.ps-item {
  border-radius: 10px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    0 8px 18px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Print formats with realistic proportions + sizes
   Banner = widest, Poster = tall, Flyer = A5-ish, Card = smallest */
.ps-format-banner { width: 92%; aspect-ratio: 4 / 1; }
.ps-format-poster { width: 62%; aspect-ratio: 2 / 3; }
.ps-format-flyer  { width: 68%; aspect-ratio: 5 / 7; }
.ps-format-card   { width: 50%; aspect-ratio: 85 / 55; border-radius: 14px; }
/* Each item gets unique 3D tilt + subtle Z-rotation (lighter so items don't overlap) */
.ps-item:nth-of-type(6n+1) { transform: rotateY(-6deg) rotateX(1deg) rotate(-2deg); }
.ps-item:nth-of-type(6n+2) { transform: rotateY(5deg)  rotateX(-1.5deg) rotate(1.5deg); }
.ps-item:nth-of-type(6n+3) { transform: rotateY(-4deg) rotateX(1.5deg) rotate(-1deg); }
.ps-item:nth-of-type(6n+4) { transform: rotateY(6.5deg) rotateX(-1deg) rotate(2.5deg); }
.ps-item:nth-of-type(6n+5) { transform: rotateY(-5deg) rotateX(1deg) rotate(-1.5deg); }
.ps-item:nth-of-type(6n+6) { transform: rotateY(4.5deg) rotateX(-1.5deg) rotate(2deg); }

.ps-eb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
}
.ps-eb-light {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.7;
}

/* Item: orange poster (big "04 / METRICS") */
.ps-poster {
  background:
    radial-gradient(circle at 70% 20%, rgba(255,150,100,0.35), transparent 60%),
    linear-gradient(135deg, #B81F12 0%, #FF4A1C 60%, #FF6B5B 110%);
  color: var(--bone);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ps-poster .ps-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(8rem, 16vw, 12rem);
  line-height: 0.8;
  letter-spacing: -0.07em;
  color: var(--bone);
  margin-left: auto;
}
.ps-poster .ps-eb {
  color: var(--bone);
  opacity: 0.9;
  align-self: flex-start;
  margin-bottom: auto;
}

/* Item: dark process slide */
.ps-slide-dark {
  background:
    radial-gradient(circle at 80% 10%, rgba(255,255,255,0.04), transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  color: var(--bone);
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ps-slide-dark .ps-eb { flex-shrink: 0; }
.ps-slide-dark .ps-title { font-size: clamp(1.4rem, 2.6vw, 2.2rem); white-space: nowrap; }
.ps-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--bone);
  margin: 0;
}
.ps-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}

/* Item: light opportunity slide with image (flyer format — vertical) */
.ps-slide-light {
  background: var(--bone);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.08);
}
.ps-slide-light .ps-eb {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 2;
}
.ps-title-light {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
  padding: 24px 26px 16px;
  flex-shrink: 0;
}
.ps-img-stage { flex: 1; }
.ps-title-light em {
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}
.ps-img-stage {
  background:
    radial-gradient(circle at 50% 60%, rgba(229,48,27,0.15), transparent 60%),
    linear-gradient(135deg, #E8E4DC 0%, #F5F2EC 100%);
  position: relative;
}
.ps-img-stage::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  aspect-ratio: 0.7;
  background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%);
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Item: metrics dark slide (business card format — compact) */
.ps-slide-metrics {
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,0.04), transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  color: var(--bone);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
}
.ps-slide-metrics .ps-stats { gap: 10px; }
.ps-slide-metrics .ps-stats strong { font-size: clamp(1.2rem, 2.2vw, 1.8rem); }
.ps-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ps-stats > div {
  border-left: 1px solid rgba(245,242,236,0.15);
  padding-left: 14px;
}
.ps-stats strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--bone);
}
.ps-stats strong em {
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
  font-size: 0.6em;
  vertical-align: super;
}

/* Item: editorial poster ("Noteform") — banner format */
.ps-editorial {
  background:
    radial-gradient(circle at 30% 70%, rgba(255,180,140,0.2), transparent 60%),
    linear-gradient(135deg, #FF4A1C 0%, #B81F12 60%, #5C0A02 100%);
  color: var(--bone);
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ps-editorial .ps-headline { font-size: clamp(2rem, 4vw, 3.4rem); }
.ps-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--bone);
}
.ps-headline em {
  font-style: italic;
  font-weight: 400;
}

/* Item: cover with V© mark (business card format) */
.ps-cover {
  background:
    radial-gradient(circle at 75% 20%, rgba(229,48,27,0.18), transparent 55%),
    var(--ink);
  color: var(--bone);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.ps-cover .ps-cover-mark { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.ps-cover .ps-foot { font-size: 8px; }
.ps-cover-mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(4rem, 9vw, 7rem);
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--bone);
}
.ps-cover-mark sup {
  font-size: 0.18em;
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
  vertical-align: super;
}
.ps-foot {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  opacity: 0.7;
}

/* Pause animation when reduced motion preferred */
@media (prefers-reduced-motion: reduce) {
  .print-stack { animation: none; transform: translateY(-25%); }
}

/* Hide all old print-pile/print-item legacy styles */
.print-pile, .print-item, .print-poster, .print-card-dark, .print-card-light,
.print-flyer, .print-sticker, .print-trifold {
  display: none !important;
}

/* === Big poster === */
.print-poster {
  width: 200px;
  height: 280px;
  top: 18%;
  left: 6%;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,150,100,0.4), transparent 60%),
    linear-gradient(135deg, #1F0606 0%, #B81F12 50%, #FF4A1C 100%);
  color: var(--bone);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: float-poster 5.4s ease-in-out infinite;
}
.poster-eb {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.8;
}
.poster-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.4rem;
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.poster-h em {
  font-style: italic;
  font-weight: 400;
  font-size: 0.6em;
  vertical-align: super;
  color: var(--bone);
}
.poster-foot {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* === Dark business card === */
.print-card-dark {
  width: 180px;
  height: 100px;
  top: 12%;
  left: 38%;
  background: var(--ink);
  color: var(--bone);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  animation: float-card-dark 4.6s ease-in-out infinite;
}
.bc-eb {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
}
.bc-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.bc-name em { font-style: italic; font-weight: 400; color: var(--signal); }
.bc-role {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  opacity: 0.8;
}
.bc-mark {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
  color: var(--bone);
}
.bc-mark sup { font-size: 0.4em; color: var(--signal); font-style: italic; vertical-align: super; }

/* === Light business card === */
.print-card-light {
  width: 170px;
  height: 96px;
  bottom: 12%;
  left: 4%;
  background: var(--bone);
  color: var(--ink);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid rgba(0,0,0,0.08);
  animation: float-card-light 5.1s ease-in-out infinite;
}
.bc-name-light {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.bc-tag {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
}
.bc-contact {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-top: auto;
}

/* === Flyer / spread === */
.print-flyer {
  width: 220px;
  height: 150px;
  top: 48%;
  left: 30%;
  background: var(--bone);
  border: 1px solid rgba(0,0,0,0.08);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  overflow: hidden;
  animation: float-flyer 5.8s ease-in-out infinite;
}
.flyer-img {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,150,100,0.5), transparent 60%),
    linear-gradient(135deg, #1F0606 0%, #B81F12 60%, #FF4A1C 100%);
}
.flyer-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flyer-eb {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
}
.flyer-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin-top: 4px;
}
.flyer-h em { font-style: italic; font-weight: 400; color: var(--signal); }
.flyer-cap {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
  margin-top: auto;
}

/* === Round sticker === */
.print-sticker {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 8%;
  right: 8%;
  background: var(--signal);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  border: 2px solid var(--bone);
  box-shadow:
    0 25px 50px rgba(229,48,27,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.15);
  animation: float-sticker 4.2s ease-in-out infinite;
}
.print-sticker em {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-style: normal;
  opacity: 0.85;
}
.print-sticker strong {
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 2px 0;
}

/* === Trifold flyer === */
.print-trifold {
  width: 180px;
  height: 70px;
  bottom: 22%;
  right: 6%;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0,0,0,0.4);
  animation: float-trifold 5.5s ease-in-out infinite;
}
.tf-fold {
  flex: 1;
  position: relative;
}
.tf-fold + .tf-fold { border-left: 1px solid rgba(0,0,0,0.15); }
.tf-1 { background: var(--ink); }
.tf-2 { background: var(--signal); }
.tf-3 { background: var(--bone); border: 1px solid rgba(0,0,0,0.08); border-left: 1px solid rgba(0,0,0,0.15); }

/* Floating 3D parallax — each item has tilt + gentle bob with own rhythm */
@keyframes float-poster {
  0%, 100% { transform: rotateY(12deg) rotateX(-3deg) rotate(-6deg) translateY(0); }
  50%      { transform: rotateY(14deg) rotateX(-3deg) rotate(-7deg) translateY(-12px); }
}
@keyframes float-card-dark {
  0%, 100% { transform: rotateY(-15deg) rotateX(2deg) rotate(5deg) translateY(0); }
  50%      { transform: rotateY(-17deg) rotateX(2deg) rotate(7deg) translateY(10px); }
}
@keyframes float-flyer {
  0%, 100% { transform: rotateY(8deg) rotateX(-5deg) rotate(-3deg) translateY(0); }
  50%      { transform: rotateY(10deg) rotateX(-5deg) rotate(-2deg) translateY(-8px); }
}
@keyframes float-card-light {
  0%, 100% { transform: rotateY(-20deg) rotateX(4deg) rotate(11deg) translateY(0); }
  50%      { transform: rotateY(-22deg) rotateX(4deg) rotate(13deg) translateY(9px); }
}
@keyframes float-sticker {
  0%, 100% { transform: rotateY(18deg) rotateX(-2deg) rotate(-15deg) translateY(0) scale(1); }
  50%      { transform: rotateY(22deg) rotateX(-2deg) rotate(-12deg) translateY(-14px) scale(1.04); }
}
@keyframes float-trifold {
  0%, 100% { transform: rotateY(-8deg) rotateX(6deg) rotate(-4deg) translateY(0); }
  50%      { transform: rotateY(-10deg) rotateX(6deg) rotate(-3deg) translateY(11px); }
}

/* Hide old design-deck CSS that's no longer used */
.design-deck { display: none; }
.design-deck {
  position: relative;
  width: 100%;
  height: 100%;
}
.design-page {
  position: absolute;
  background: var(--bone);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.3);
  overflow: hidden;
  transition: transform .6s ease;
}
.design-page-3 {
  width: 70%;
  height: 80%;
  top: 0;
  right: 0;
  transform: rotate(5deg);
  z-index: 1;
  animation: deck-page-3 9s ease-in-out infinite;
}
.design-page-2 {
  width: 55%;
  height: 75%;
  top: 10%;
  left: 0;
  transform: rotate(-7deg);
  z-index: 2;
  animation: deck-page-2 9s ease-in-out infinite;
}
.design-page-1 {
  width: 88%;
  height: 70%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 3;
  animation: deck-page-1 9s ease-in-out infinite;
}
@keyframes deck-page-1 {
  0%, 90%, 100% { transform: translateX(-50%) rotate(0deg) translateY(0); }
  45%, 55%      { transform: translateX(-50%) rotate(-2deg) translateY(-6px); }
}
@keyframes deck-page-2 {
  0%, 90%, 100% { transform: rotate(-7deg) translateY(0); }
  45%, 55%      { transform: rotate(-9deg) translateY(-4px); }
}
@keyframes deck-page-3 {
  0%, 90%, 100% { transform: rotate(5deg) translateY(0); }
  45%, 55%      { transform: rotate(7deg) translateY(-4px); }
}
.dp-num {
  position: absolute;
  top: 12px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  z-index: 2;
}
.dp-image {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 60% 30%, rgba(255,150,100,0.4), transparent 60%),
    linear-gradient(135deg, #1F0606 0%, #B81F12 60%, #FF6B5B 100%);
}
.dp-poster {
  width: 100%;
  height: 100%;
  background: var(--ink);
  color: var(--bone);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.poster-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
}
.poster-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.6rem;
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.poster-title em {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
  font-size: 0.55em;
  vertical-align: super;
}
.dp-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}
.dp-spread-left {
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chapter-mini {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 4px;
}
.heading-mini {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 8px;
}
.heading-mini em { font-style: italic; font-weight: 400; color: var(--signal); }
.dp-line {
  display: block;
  height: 3px;
  background: var(--ink);
  opacity: 0.2;
  border-radius: 2px;
}
.dp-line.w-90 { width: 90%; }
.dp-line.w-85 { width: 85%; }
.dp-line.w-80 { width: 80%; }
.dp-line.w-70 { width: 70%; }
.dp-line.w-60 { width: 60%; }
.dp-line.w-50 { width: 50%; }
.dp-spread-right {
  position: relative;
  padding: 14px;
  border-left: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}
.dp-spread-image {
  flex: 1;
  border-radius: 4px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,150,100,0.35), transparent 60%),
    linear-gradient(135deg, #1F0606, #B81F12 60%, #FF6B5B);
}
.dp-caption {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
  text-align: right;
}
.design-tag {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bone);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 4;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* === WEBSITE PAGE — auto-scrolling browser + phone === */
/* Give the right column more breathing room on the website page so the
   desktop browser feels properly wide rather than squarish. */
.hero-display:has(.page-stage-web) .hero-display-grid {
  grid-template-columns: 0.85fr 1.15fr;
}
.page-stage-web {
  display: flex;
  align-items: flex-end;
  gap: 36px;
  width: 100%;
  max-width: 1000px;
  /* 3D perspective so browser + phone share a single vanishing point */
  perspective: 1700px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.web-browser {
  flex: 1;
  border-radius: 14px;
  background: var(--bone);
  box-shadow: 0 50px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
  /* Same tilt direction as the phone — parallel, both turned slightly toward viewer */
  transform: rotateY(-10deg) rotateX(2deg);
  transform-origin: 100% 50%;
}
.web-viewport {
  height: 460px;
  overflow: hidden;
  background: var(--bone);
}
.web-page {
  display: flex;
  flex-direction: column;
  animation: web-scroll 12s cubic-bezier(0.65, 0.05, 0.35, 1) infinite;
}
.web-section {
  height: 460px;
  flex-shrink: 0;
  padding: 36px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.web-section.web-hero { background: var(--bone); }
.web-section.web-services {
  background: var(--paper);
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.web-section.web-cta { background: var(--ink); color: var(--bone); }
.web-section.web-cta .web-eyebrow { color: var(--signal); }
.web-section.web-cta .web-title { color: var(--bone); }
.web-section.web-cta .web-title-sm { color: var(--bone); }
.web-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.web-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.web-title em { font-style: italic; font-weight: 400; color: var(--signal); }
.web-hero-img {
  flex: 1;
  min-height: 90px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 70% 30%, rgba(229,48,27,0.5), transparent 60%),
    linear-gradient(135deg, #1F0606 0%, #5C0A02 40%, #FF4A1C 110%);
}
.web-pill {
  align-self: flex-start;
  background: var(--ink);
  color: var(--bone);
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
}
.web-pill-light { background: var(--bone); color: var(--ink); }
.web-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.web-card {
  background: var(--bone);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.web-card span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--signal);
}
.web-card strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.web-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.web-stats-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.web-stats-row strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  color: var(--bone);
  line-height: 1;
}
.web-stats-row strong span {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.web-stats-row em {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--silver);
  opacity: 0.7;
}
@keyframes web-scroll {
  0%, 14%   { transform: translateY(0); }
  20%, 34%  { transform: translateY(-460px); }
  40%, 54%  { transform: translateY(-920px); }
  60%, 74%  { transform: translateY(-1380px); }
  90%, 100% { transform: translateY(0); }
}

/* === Sample restaurant website ===
   "Atelier Brasserie" — single-brand cycling preview through 4 pages */

/* Section base backgrounds for the 4 pages */
.web-section.web-rs-home   { background: #1A0400; color: var(--bone); }
.web-section.web-rs-menu   { background: var(--bone); }
.web-section.web-rs-story  { background: var(--paper); border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); }
.web-section.web-rs-book   { background: #2A0A04; color: var(--bone); }
.web-section.web-rs-home  .web-eyebrow,
.web-section.web-rs-book  .web-eyebrow { color: var(--signal); }
.web-section.web-rs-home  .web-title,
.web-section.web-rs-home  .web-title-sm,
.web-section.web-rs-book  .web-title,
.web-section.web-rs-book  .web-title-sm { color: var(--bone); }

/* Restaurant home — hero with name & atmosphere photo */
.web-rs-hero-img {
  flex: 1;
  min-height: 130px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 70% 30%, rgba(229,180,90,0.32), transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(229,48,27,0.32), transparent 55%),
    linear-gradient(135deg, #2A0E04 0%, #5C0A02 60%, #B85020 100%);
  position: relative;
  overflow: hidden;
}
.web-rs-hero-img::before {
  content: '';
  position: absolute;
  bottom: 14px; left: 16px;
  width: 32px; height: 32px;
  border: 1px solid rgba(245,242,236,0.6);
  border-radius: 50%;
}
.web-rs-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.6);
}
.web-rs-meta strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--bone);
}

/* Story page — photo + chef quote */
.web-rs-story-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 14px;
  flex: 1;
}
.web-rs-story-photo {
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(245,242,236,0.18), transparent 60%),
    linear-gradient(160deg, #1F0606 0%, #5C0A02 50%, #2A0E04 100%);
}
.web-rs-story-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.web-rs-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.web-rs-quote em { font-style: italic; font-weight: 400; color: var(--signal); }
.web-rs-author {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog);
}
.web-rs-author strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

/* Booking page — date/time/guests fields */
.web-rs-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.web-rs-field {
  background: rgba(245,242,236,0.05);
  border: 1px solid rgba(245,242,236,0.1);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.web-rs-field label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.55);
}
.web-rs-field-val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.web-rs-field-val em { font-style: italic; font-weight: 400; color: var(--signal); }
.web-rs-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.web-rs-cal-day {
  aspect-ratio: 1;
  font-family: var(--font-mono);
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(245,242,236,0.04);
  color: rgba(245,242,236,0.55);
}
.web-rs-cal-day.is-active {
  background: var(--signal);
  color: var(--bone);
  font-weight: 600;
}

/* Reviews — testimonial card */
.web-review {
  background: var(--paper);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.web-review-stars {
  display: flex;
  gap: 4px;
  font-size: 14px;
  color: var(--signal);
  letter-spacing: 2px;
}
.web-review-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.web-review-quote em { font-style: italic; font-weight: 400; color: var(--signal); }
.web-review-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
}
.web-review-meta strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

/* Restaurant menu — sample service website */
.web-menu-hero {
  flex: 0 0 100px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 60%, rgba(229, 48, 27, 0.45), transparent 55%),
    linear-gradient(135deg, #1A0400 0%, #3D0A02 50%, #5C0A02 100%);
  position: relative;
  overflow: hidden;
}
.web-menu-hero::after {
  content: '';
  position: absolute;
  bottom: 12px; left: 14px;
  width: 28px; height: 28px;
  border: 1px solid rgba(245,242,236,0.6);
  border-radius: 50%;
}
.web-menu-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.web-menu-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0,0,0,0.12);
}
.web-menu-item:last-child { border-bottom: none; padding-bottom: 0; }
.web-menu-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  flex: 1;
}
.web-menu-name span {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
  font-weight: 400;
  margin-top: 2px;
}
.web-menu-price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--signal);
  letter-spacing: -0.01em;
}

/* Big stats page */
.web-stats-big {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1;
}
.web-stats-big > div {
  background: rgba(245,242,236,0.04);
  border: 1px solid rgba(245,242,236,0.08);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.web-stats-big strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.4rem;
  letter-spacing: -0.03em;
  color: var(--bone);
  line-height: 0.95;
}
.web-stats-big strong span {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.web-stats-big em {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--silver);
  opacity: 0.75;
}

/* Phone next to browser — same parallel rotation */
.web-phone {
  width: 230px;
  aspect-ratio: 0.5;
  background: var(--ink);
  border-radius: 28px;
  padding: 7px;
  border: 2px solid var(--graphite);
  box-shadow: 0 35px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
  /* Parallel to browser: same rotateY/rotateX, with translateY for stagger */
  transform: rotateY(-10deg) rotateX(2deg) translateY(40px);
  transform-origin: 0% 50%;
  position: relative;
  flex-shrink: 0;
}
.web-phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 14px;
  background: var(--ink);
  border-radius: 999px;
  z-index: 2;
}
.web-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  background: var(--bone);
  overflow: hidden;
}
.web-phone-page {
  display: flex;
  flex-direction: column;
  animation: web-phone-scroll 12s cubic-bezier(0.65, 0.05, 0.35, 1) infinite;
}
.web-phone-page .web-section {
  height: 440px;
  padding: 28px 18px;
  gap: 10px;
}
.web-title-sm {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.web-title-sm em { font-style: italic; font-weight: 400; color: var(--signal); }
.web-pill-sm { font-size: 9px; padding: 6px 11px; }
.web-hero-img-sm {
  flex: 1;
  min-height: 50px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 70% 30%, rgba(229,48,27,0.5), transparent 60%),
    linear-gradient(135deg, #1F0606 0%, #5C0A02 40%, #FF4A1C 110%);
}
.web-grid-sm { gap: 4px; }
.web-grid-sm .web-card { padding: 6px 8px; gap: 2px; align-items: flex-start; }
.web-grid-sm .web-card span { font-size: 8px; letter-spacing: 0.18em; }
@keyframes web-phone-scroll {
  0%, 14%   { transform: translateY(0); }
  20%, 34%  { transform: translateY(-440px); }
  40%, 54%  { transform: translateY(-880px); }
  60%, 74%  { transform: translateY(-1320px); }
  90%, 100% { transform: translateY(0); }
}

/* Reduced motion ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .web-page,
  .web-phone-page,
  .design-page-1,
  .design-page-2,
  .design-page-3,
  .ads-platforms .plat,
  .page-mark,
  .svc-3d-product,
  .svc-3d-shadow { animation: none; }
}

/* =========================================================
   HOMEPAGE — Scattered UI cards composition
   Inspired by isometric design-system showcase
   ========================================================= */

.hero-cards-stage {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: clamp(560px, 60%, 980px);
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 1 !important;
  transform: none !important;
  perspective: 1800px;
  display: block !important;
  /* Combined mask: fade top + bottom (for navbar/section edges) + fade
     left edge (cards drift into view from left) + fade right edge so the
     "Let's work together" badge has a clean corner to sit in. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 16%, #000 72%, transparent 100%),
    radial-gradient(circle at 100% 100%, transparent 0%, transparent 22%, #000 48%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 16%, #000 72%, transparent 100%),
    radial-gradient(circle at 100% 100%, transparent 0%, transparent 22%, #000 48%);
          mask-composite: intersect;
}
@media (max-width: 1100px) {
  .hero-cards-stage { display: none !important; }
}

.hc-grid {
  position: absolute;
  inset: -6% -10% -6% -6%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 18px;
  grid-template-areas:
    "brand    brand    browser  browser  chart    chart"
    "brand    brand    palette  palette  chart    chart"
    "stat     stat     type     type     profile  profile"
    "td       td       quote    quote    services services"
    "speed    speed    quote    quote    live     live";
  transform: rotateX(48deg) rotateZ(-22deg);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

/* Generic card */
.hc {
  background: var(--bone);
  border-radius: 14px;
  padding: 14px 16px;
  /* Lighter shadow for smoother entry — avoids abrupt shadow pop */
  box-shadow:
    0 14px 30px rgba(0,0,0,0.32),
    0 3px 8px rgba(0,0,0,0.22),
    0 0 0 1px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  will-change: transform, opacity;
  transition: box-shadow 1.5s ease-out;
}
.hc.hc-dark {
  background: var(--ink);
  color: var(--bone);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.40),
    0 3px 8px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,255,255,0.04);
}

.hc-eb {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
}
.hc-foot {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
  margin-top: auto;
}
.hc-dark .hc-foot { color: var(--silver); opacity: 0.7; }

.hc-big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--ink);
}
.hc-dark .hc-big { color: var(--bone); }
.hc-big em {
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}
.hc-big > span {
  font-family: var(--font-mono);
  font-size: 0.32em;
  letter-spacing: 0.18em;
  color: var(--fog);
  margin-left: 4px;
  font-weight: 400;
  text-transform: uppercase;
}

/* Grid placement per card */
.hc-brand    { grid-area: brand; }
.hc-browser  { grid-area: browser; }
.hc-chart    { grid-area: chart; }
.hc-palette  { grid-area: palette; }
.hc-stat     { grid-area: stat; }
.hc-3d       { grid-area: td; }
.hc-type     { grid-area: type; }
.hc-profile  { grid-area: profile; }
.hc-services { grid-area: services; }
.hc-quote    { grid-area: quote; }
.hc-speed    { grid-area: speed; }
.hc-live     { grid-area: live; }

/* === Brand mark card === */
.hc-brand {
  align-items: center;
  justify-content: space-between;
  text-align: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(229,48,27,0.10), transparent 60%),
    var(--bone);
}
.hc-mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 6vw, 5rem);
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--ink);
}
.hc-mark sup {
  font-size: 0.18em;
  color: var(--signal);
  font-style: italic;
  vertical-align: super;
  margin-left: 3px;
}

/* === Mini browser card with scrolling pages === */
.hc-browser { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.hc-browser-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.hc-browser-pages {
  display: flex;
  flex-direction: column;
  height: 400%;
  animation: browser-scroll 12s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.hc-bp {
  height: 25%;
  flex-shrink: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
@keyframes browser-scroll {
  0%, 22%   { transform: translateY(0%); }
  28%, 55%  { transform: translateY(-25%); }
  62%, 88%  { transform: translateY(-50%); }
  95%, 100% { transform: translateY(-75%); }
}
.hc-browser-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: #E8E4DC;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.hc-browser-bar > span:nth-child(-n+3) {
  width: 7px; height: 7px;
  border-radius: 50%;
}
.hc-browser-bar > span:nth-child(1) { background: #FF5F57; }
.hc-browser-bar > span:nth-child(2) { background: #FEBC2E; }
.hc-browser-bar > span:nth-child(3) { background: #28C840; }
.hc-url {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--fog);
  background: var(--bone);
  padding: 3px 8px;
  border-radius: 4px;
  flex: 1;
}
.hc-browser-content {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hc-line-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.hc-line-h em { font-style: italic; font-weight: 400; color: var(--signal); }
.hc-line {
  display: block;
  height: 4px;
  background: var(--ink);
  opacity: 0.18;
  border-radius: 2px;
}
.hc-line.w80 { width: 80%; }
.hc-line.w50 { width: 50%; }

/* === Chart card === */
.hc-chart {
  background: linear-gradient(135deg, #fafaf7 0%, #ECE6DA 100%);
}
.hc-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hc-trend {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--signal);
}
.hc-trend em { font-style: italic; font-weight: 400; }
.hc-chart-area {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 50px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.hc-bar {
  flex: 1;
  background: var(--ink);
  border-radius: 3px 3px 0 0;
  opacity: 0.85;
}
.hc-bar { animation: bar-grow 4.2s ease-out infinite; transform-origin: bottom; }
.hc-bar:nth-child(1) { height: 30%; animation-delay: 0s; }
.hc-bar:nth-child(2) { height: 45%; animation-delay: 0.1s; }
.hc-bar:nth-child(3) { height: 55%; animation-delay: 0.2s; }
.hc-bar:nth-child(4) { height: 70%; animation-delay: 0.3s; }
.hc-bar:nth-child(5) { height: 85%; animation-delay: 0.4s; }
.hc-bar:nth-child(6) { height: 100%; animation-delay: 0.5s; }
.hc-bar.hi { background: var(--signal); }
@keyframes bar-grow {
  0%        { transform: scaleY(0); }
  18%, 80%  { transform: scaleY(1); }
  100%      { transform: scaleY(1); }
}

/* === Stat card with cycling stats === */
.hc-stat { position: relative; padding: 14px 16px 14px; overflow: hidden; }
.hc-stat-track {
  display: flex;
  flex-direction: column;
  height: 300%;
  animation: stat-cycle 9s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.hc-stat-item {
  height: 33.333%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
@keyframes stat-cycle {
  0%, 28%   { transform: translateY(0%); }
  35%, 61%  { transform: translateY(-33.333%); }
  68%, 94%  { transform: translateY(-66.667%); }
  100%      { transform: translateY(-100%); }
}

/* === Palette card === */
.hc-pal-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  flex: 1;
}
.hc-sw {
  border-radius: 6px;
  display: block;
}
.hc-sw-1 { background: #0A0A0A; }
.hc-sw-2 { background: #FF4A1C; }
.hc-sw-3 { background: var(--bone); border: 1px solid rgba(0,0,0,0.08); }
.hc-sw-4 { background: #5C0A02; }

/* === 3D product card === */
.hc-3d {
  padding: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(229,48,27,0.18), transparent 55%),
    linear-gradient(135deg, #1F0606 0%, #0a0a0a 100%);
  position: relative;
}
.hc-3d-stage {
  width: 100%;
  height: 100%;
  position: relative;
}
.hc-3d-grid {
  position: absolute;
  inset: 65% 0 0 0;
  background-image:
    linear-gradient(to right, rgba(245,242,236,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,242,236,0.08) 1px, transparent 1px);
  background-size: 14px 14px;
  transform: perspective(120px) rotateX(50deg);
  transform-origin: top center;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
.hc-3d-product {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hc-3d-product .prod-cap {
  width: 18px; height: 11px;
  background: linear-gradient(135deg, #2a2a2a, #0a0a0a);
  border-radius: 3px 3px 1px 1px;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.18);
}
.hc-3d-product .prod-collar {
  width: 14px; height: 3px;
  background: linear-gradient(180deg, #d8d4cc, #5a5650);
}
.hc-3d-product .prod-body {
  width: 44px; height: 64px;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.18) 0%, rgba(229,48,27,0.85) 45%, #5C0A02 100%);
  border-radius: 4px 4px 8px 8px;
  box-shadow:
    0 18px 30px rgba(229,48,27,0.4),
    inset -5px -1px 10px rgba(0,0,0,0.4),
    inset 3px 3px 6px rgba(255,255,255,0.18);
  position: relative;
  overflow: hidden;
}
.hc-3d-product .prod-shine {
  position: absolute;
  top: 6px; left: 5px;
  width: 6px; height: 44px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.05));
  border-radius: 3px;
  filter: blur(1.5px);
}
.hc-3d-shadow {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, transparent 70%);
  border-radius: 50%;
}
.hc-3d-tag {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(245,242,236,0.08);
  border: 1px solid rgba(245,242,236,0.18);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
}

/* === Type sample card === */
.hc-type-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--ink);
}
.hc-type-display em { font-style: italic; font-weight: 400; color: var(--signal); }

/* === Profile card with cycling testimonials === */
.hc-profile {
  flex-direction: column;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.hc-profile-track {
  display: flex;
  flex-direction: column;
  height: 400%;
  animation: profile-cycle 12s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.hc-profile-item {
  height: 25%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
@keyframes profile-cycle {
  0%, 22%   { transform: translateY(0%); }
  28%, 55%  { transform: translateY(-25%); }
  62%, 88%  { transform: translateY(-50%); }
  95%, 100% { transform: translateY(-75%); }
}
.hc-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--signal), #5C0A02);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--bone);
  font-size: 1rem;
  flex-shrink: 0;
}
.hc-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hc-profile-meta strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: -0.015em;
}
.hc-profile-meta em {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
  font-style: normal;
}
.hc-msg-pill {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--ink);
  color: var(--bone);
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.04em;
  z-index: 2;
}

/* === Services pill grid === */
.hc-pill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.hc-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 6px 8px;
  border: 1px solid rgba(245,242,236,0.18);
  border-radius: 999px;
  text-align: center;
}

/* === Quote card === */
.hc-quote { padding: 16px 18px; }
.hc-quote-mark {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--signal);
  font-size: 2.5rem;
  line-height: 0.5;
  margin-bottom: -8px;
}
.hc-quote p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.hc-quote em { font-style: italic; font-weight: 400; color: var(--signal); }

/* === Speed card === */
.hc-progress {
  height: 4px;
  background: rgba(0,0,0,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.hc-progress span {
  display: block;
  height: 100%;
  width: 92%;
  background: linear-gradient(90deg, var(--signal), #FF6B5B);
  border-radius: 2px;
}

/* === Live card === */
.hc-live {
  background:
    radial-gradient(circle at 70% 20%, rgba(229,48,27,0.20), transparent 55%),
    var(--ink);
}
.hc-live strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.hc-dot-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(229,48,27,0.6);
  animation: pulse 1.6s infinite;
}

/* Card entry: smooth fade-in (no scale jump). Staggered per card.
   Then floats subtly forever in 3D. */
.hc {
  opacity: 0;
  animation:
    hc-fade-in 1.5s ease-out forwards,
    hc-float 6s ease-in-out infinite;
}
.hc-brand    { animation-delay: 0.05s, 1.2s; }
.hc-browser  { animation-delay: 0.15s, 1.4s; }
.hc-chart    { animation-delay: 0.25s, 1.6s; }
.hc-palette  { animation-delay: 0.35s, 1.8s; }
.hc-stat     { animation-delay: 0.45s, 2.0s; }
.hc-3d       { animation-delay: 0.55s, 2.2s; }
.hc-type     { animation-delay: 0.65s, 2.4s; }
.hc-profile  { animation-delay: 0.75s, 2.6s; }
.hc-services { animation-delay: 0.85s, 2.8s; }
.hc-quote    { animation-delay: 0.95s, 3.0s; }
.hc-speed    { animation-delay: 1.05s, 3.2s; }
.hc-live     { animation-delay: 1.15s, 3.4s; }

/* Stagger float duration slightly per card so they go out of sync */
.hc-brand    { animation-duration: 1.5s, 5.6s; }
.hc-browser  { animation-duration: 1.5s, 5.0s; }
.hc-chart    { animation-duration: 1.5s, 6.2s; }
.hc-palette  { animation-duration: 1.5s, 4.8s; }
.hc-stat     { animation-duration: 1.5s, 5.4s; }
.hc-3d       { animation-duration: 1.5s, 4.9s; }
.hc-type     { animation-duration: 1.5s, 5.7s; }
.hc-profile  { animation-duration: 1.5s, 5.1s; }
.hc-services { animation-duration: 1.5s, 5.8s; }
.hc-quote    { animation-duration: 1.5s, 5.2s; }
.hc-speed    { animation-duration: 1.5s, 4.7s; }
.hc-live     { animation-duration: 1.5s, 5.5s; }

@keyframes hc-fade-in {
  0%   { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes hc-float {
  /* No translateZ — prevents shadow casting onto neighbours when card pops forward */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .hc { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Override the old hero-stage rules that would conflict */
.hero-cards-stage .device-browser,
.hero-cards-stage .device-phone { display: none; }

/* =========================================================
   CASE STUDY PAGES — body.case
   Editorial layout: dark hero with project name + meta strip,
   full-bleed hero image, two-column brief, service blocks,
   visual gallery, next project nav, CTA.
   ========================================================= */

body.case main { background: var(--bone); }

/* HERO ----------------------------------------------------- */
.case-hero {
  position: relative;
  background: #000;
  color: var(--bone);
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(3rem, 5vw, 4.5rem);
  overflow: hidden;
}
.case-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 80% 20%, rgba(229,48,27,0.15), transparent 60%),
    radial-gradient(50% 40% at 10% 90%, rgba(184,90,232,0.12), transparent 60%);
  pointer-events: none;
}
.case-hero-inner {
  position: relative;
  display: grid;
  gap: var(--s-4);
}
.case-hero-eb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
}
.case-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.5rem, 9vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.case-hero h1 em {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.case-hero-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--silver);
  max-width: 60ch;
}
/* Prominent "view website" CTA in the case hero — sits between the
   lead paragraph and the meta grid. */
.case-hero-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: clamp(var(--s-3), 2.5vw, var(--s-4));
  margin-bottom: clamp(var(--s-4), 4vw, var(--s-5));
}
.case-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(245,242,236,0.15);
}
.case-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.case-meta-item span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog);
}
.case-meta-item strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.case-meta-item a {
  color: var(--bone);
  border-bottom: 1px solid rgba(245,242,236,0.3);
  display: inline-block;
  width: fit-content;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.case-meta-item a:hover { border-color: var(--signal); color: var(--signal); }

@media (max-width: 720px) {
  .case-meta { grid-template-columns: 1fr 1fr; }
}

/* HERO IMAGE (full-bleed, sits between hero & brief) -------- */
.case-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 92vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--ink);
}
.case-cover-placeholder {
  aspect-ratio: 16 / 9;
  max-height: 60vh;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fog);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* BRIEF / TEXT BLOCK --------------------------------------- */
.case-brief {
  padding: clamp(4rem, 7vw, 7rem) 0;
  background: var(--bone);
}
.case-brief-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-6);
  align-items: start;
}
.case-brief-grid > div:first-child .eyebrow {
  position: sticky;
  top: 120px;
}
.case-brief p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.case-brief p + p { margin-top: var(--s-3); }
.case-brief p em {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
@media (max-width: 900px) {
  .case-brief-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .case-brief-grid > div:first-child .eyebrow { position: static; }
}

/* SERVICES DELIVERED --------------------------------------- */
.case-services {
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(4rem, 7vw, 7rem);
  background: var(--bone);
  border-top: 1px solid rgba(0,0,0,0.06);
}
.case-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.case-svc {
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.case-svc:hover {
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 12px 24px rgba(0,0,0,0.05);
}
.case-svc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog);
  display: block;
  margin-bottom: var(--s-2);
}
.case-svc h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.case-svc p {
  color: var(--iron);
  font-size: 0.95rem;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .case-services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .case-services-grid { grid-template-columns: 1fr; }
}

/* VISUAL GALLERY ------------------------------------------- */
.case-gallery {
  padding: clamp(3rem, 5vw, 5rem) 0;
  background: var(--ink);
}
/* Dark-section override — wins over body.no-reveals (color: inherit
   → black-on-black) AND the wireframe :not(.is-visible) rule
   (color: transparent + 1.4px stroke, flashes as white outline then
   fades to invisible). Overrides every state explicitly and also
   forces -webkit-text-fill-color so the glyph fill is locked to bone
   regardless of any text-stroke-based tricks higher up the cascade. */
.case-gallery .section-head h2,
.case-gallery .section-head[data-reveal] h2,
.case-gallery .section-head[data-reveal]:not(.is-visible) h2,
.case-gallery .section-head[data-reveal].is-visible h2 {
  color: var(--bone) !important;
  -webkit-text-fill-color: var(--bone) !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
}
.case-gallery .section-head h2 em,
.case-gallery .section-head[data-reveal] h2 em,
.case-gallery .section-head[data-reveal]:not(.is-visible) h2 em,
.case-gallery .section-head[data-reveal].is-visible h2 em {
  color: var(--signal) !important;
  -webkit-text-fill-color: var(--signal) !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
}
.case-gallery .section-head .eyebrow,
.case-gallery .section-head .eyebrow-dark { color: var(--silver); }

/* Horizontal scrolling gallery — same aesthetic as the home/werk carousel.
   Cards live in a flex row with overflow-x scroll + scroll-snap, full-bleed
   beyond the .wrap padding so users can swipe through them. */
.case-gallery-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px var(--gutter) 16px;
  margin-left: 0;
  margin-right: 0;
}
.case-gallery-grid::-webkit-scrollbar { display: none; }
/* Pull the scroll container out of the .wrap so cards reach edge-to-edge */
.case-gallery > .case-gallery-grid {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.case-gal,
.case-gal.span-4, .case-gal.span-5, .case-gal.span-6,
.case-gal.span-7, .case-gal.span-8, .case-gal.span-12 {
  flex: 0 0 auto;
  width: clamp(280px, 50vw, 540px);
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #1a1a1a;
  aspect-ratio: 3 / 2;
  scroll-snap-align: start;
  grid-column: auto;
}
.case-gal-img {
  position: absolute;
  inset: 0;
  background-color: linear-gradient(135deg, #232323, #0a0a0a);
  background: linear-gradient(135deg, #232323, #0a0a0a);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 1.2s var(--ease);
}
.case-gal:hover .case-gal-img { transform: scale(1.04); }
.case-gal-tag {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(10,10,10,0.65);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

@media (max-width: 540px) {
  .case-gal,
  .case-gal.span-4, .case-gal.span-5, .case-gal.span-6,
  .case-gal.span-7, .case-gal.span-8, .case-gal.span-12 {
    width: clamp(240px, 78vw, 360px);
  }
}

/* CASE GALLERY — fullscreen pinned scroll variant ---------------- */
.case-gallery--pin {
  background: #000;
  padding: 0;
}
/* Title block lives in the normal flow ABOVE the pinned scrollzone — it
   scrolls up and out of view before the photos take over the viewport.
   Min-height + flex-center keeps the heading vertically centred in the
   dark band so the title doesn't hug the photos below. */
.case-gallery--pin > .wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: clamp(20rem, 38vh, 28rem);
  padding: clamp(3rem, 6vh, 5rem) var(--gutter);
}
.case-gallery--pin > .wrap .section-head {
  margin: 0;
  width: 100%;
}
.case-gallery--pin > .wrap .section-head .eyebrow,
.case-gallery--pin > .wrap .section-head .eyebrow-dark {
  color: var(--silver);
  opacity: 0.85;
}
.case-gallery--pin > .wrap .section-head h2 {
  color: var(--bone);
}
.case-gallery--pin {
  /* approximate fixed header height — sticky leaves this much room on top */
  --gallery-header-h: 5.5rem;
}
.case-gallery--pin .work-scrollzone {
  width: 100%;
  position: relative;
  contain: layout paint;
}
.case-gallery--pin .work-sticky {
  position: sticky;
  top: var(--gallery-header-h);
  height: calc(100vh - var(--gallery-header-h));
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: #000;
  /* NOTE: no transform here — applying transform to a sticky element
     breaks pinning in Safari (fast scroll → brief un-stick → drift). */
}
.case-gallery--pin .work-carousel-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.case-gallery--pin .case-gallery-grid {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0;
  gap: 6px;
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
  /* No bottom strip — the tag bar was removed. */
  background-image: none;
}
.case-gallery--pin {
  /* Tag-bar removed — photo fills the whole sticky height. */
  --tag-h: 0px;
  --photo-h: calc(100vh - var(--gallery-header-h));
  --photo-w: calc(var(--photo-h) * 16 / 9);
}
.case-gallery--pin .case-gallery-grid > .case-gal,
.case-gallery--pin .case-gallery-grid > .case-gal.span-4,
.case-gallery--pin .case-gallery-grid > .case-gal.span-5,
.case-gallery--pin .case-gallery-grid > .case-gal.span-6,
.case-gallery--pin .case-gallery-grid > .case-gal.span-7,
.case-gallery--pin .case-gallery-grid > .case-gal.span-8,
.case-gallery--pin .case-gallery-grid > .case-gal.span-12 {
  flex: 0 0 auto;
  width: var(--photo-w);
  height: 100%;
  display: block;
  padding: 0;
  border-radius: 0;
  /* Transparent so the grid's bottom bone-strip continues across the
     hairline gap between adjacent panels. */
  background: transparent;
  scroll-snap-align: none;
  overflow: hidden;
}
.case-gallery--pin .case-gal-img {
  position: relative;
  display: block;
  width: var(--photo-w);
  height: var(--photo-h);
  border-radius: 0;
  background-color: transparent;
  /* `contain` guarantees the whole photo is shown — never cropped. The
     photo area is sized to match the photo's 16:9 aspect, so in practice
     this fits edge-to-edge with no visible letterbox. */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.case-gallery--pin .case-gal:hover .case-gal-img { transform: none; }
/* Tag bar disabled in the pinned gallery. */
.case-gallery--pin .case-gal-tag {
  display: none;
}
.case-gallery--pin .carousel-btn { display: none; }

/* Progress bar at bottom */
.case-gallery--pin .case-gallery-progress {
  position: absolute;
  left: clamp(2rem, 5vw, 6rem);
  right: clamp(2rem, 5vw, 6rem);
  bottom: clamp(1.5rem, 3vh, 2.5rem);
  height: 2px;
  background: rgba(255,255,255,0.12);
  z-index: 3;
  overflow: hidden;
  border-radius: 999px;
}
.case-gallery--pin .case-gallery-progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: var(--bone, #f5f0e6);
  transition: width .15s linear;
}

/* Mobile fallback: native scroll */
@media (max-width: 720px) {
  .case-gallery--pin > .wrap {
    padding: clamp(3rem, 6vh, 4.5rem) var(--gutter) clamp(1.5rem, 3vh, 2.5rem);
  }
  .case-gallery--pin .work-scrollzone { height: auto !important; }
  .case-gallery--pin .work-sticky {
    position: static;
    height: auto;
    padding: 0;
  }
  .case-gallery--pin .work-carousel-frame {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .case-gallery--pin .work-carousel-frame::-webkit-scrollbar { display: none; }
  .case-gallery--pin .case-gallery-grid {
    transform: none !important;
    height: auto;
    padding: 0 var(--gutter) 16px;
    gap: var(--s-3);
  }
  .case-gallery--pin .case-gallery-grid > .case-gal {
    flex: 0 0 auto;
    width: clamp(280px, 80vw, 400px);
    height: auto;
    aspect-ratio: 3 / 2;
    padding: 0;
    scroll-snap-align: start;
    border-radius: var(--radius);
  }
  /* Inner image: reset the desktop vw-based sizing so the photo fits
     the .case-gal container at natural aspect — no more crop-zoom. */
  .case-gallery--pin .case-gal-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }
  .case-gallery--pin .case-gallery-progress { display: none; }
}

/* NEXT PROJECT NAV ----------------------------------------- */
.case-next {
  padding: clamp(3rem, 5vw, 5rem) 0;
  background: var(--bone);
}
.case-next-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.case-next-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--s-4);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius);
  background: var(--paper);
  position: relative;
  min-height: 180px;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 0.7s cubic-bezier(0.65, 0, 0.2, 1),
    border-color 0.7s cubic-bezier(0.65, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Ink-spread fill — a black circle that grows from the center on hover,
   reaching the outer edges in a smooth radial animation. */
.case-next-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180%;
  aspect-ratio: 1;
  background: var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}
.case-next-card:hover {
  color: var(--bone);
  border-color: var(--ink);
  transform: translateY(-3px);
}
.case-next-card:hover::before {
  transform: translate(-50%, -50%) scale(1);
}
.case-next-card:hover .case-next-eb { color: var(--silver); }
.case-next-card:hover .case-next-arrow { color: var(--signal); transform: translate(4px, -2px); }
.case-next-eb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog);
  transition: color 0.7s cubic-bezier(0.65, 0, 0.2, 1);
}
.case-next-card.is-prev { text-align: left; }
.case-next-card.is-next { text-align: right; align-items: flex-end; }
.case-next-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1;
}
.case-next-card h3 em {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.case-next-arrow {
  position: absolute;
  top: var(--s-3);
  width: 18px;
  height: 18px;
  font-size: 0;
  /* SVG arrow via mask — direction set by --l / --r modifiers */
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.case-next-arrow--r {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5'/></svg>");
}
.case-next-arrow--l {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M11 7H3M3 7L6.5 3.5M3 7L6.5 10.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M11 7H3M3 7L6.5 3.5M3 7L6.5 10.5'/></svg>");
}
.case-next-card.is-prev .case-next-arrow { left: var(--s-3); }
.case-next-card.is-next .case-next-arrow { right: var(--s-3); }

@media (max-width: 720px) {
  .case-next-row { grid-template-columns: 1fr; }
}

/* =========================================================
   JOURNAL ARTICLE PAGES — body.article
   Editorial reading layout: dark hero + meta strip, long-form
   content with proper typography hierarchy, pull quotes,
   numbered sections, CTA at the end.
   ========================================================= */

body.article main { background: var(--bone); }

/* Article hero (reuses case-hero structure) ----------------- */
.article-hero {
  position: relative;
  background: #000;
  color: var(--bone);
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(3rem, 5vw, 4.5rem);
  overflow: hidden;
}
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 80% 20%, rgba(229,48,27,0.15), transparent 60%),
    radial-gradient(50% 40% at 10% 90%, rgba(184,90,232,0.10), transparent 60%);
  pointer-events: none;
}
.article-hero-inner {
  position: relative;
  display: grid;
  gap: var(--s-4);
  max-width: none;
}
.article-hero-inner h1 { max-width: 22ch; }
.article-hero-lead { max-width: 64ch; }
.article-hero-eb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
}
.article-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.article-hero h1 em {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.article-hero-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--silver);
  max-width: 60ch;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: baseline;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(245,242,236,0.15);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.article-meta-item {
  color: var(--silver);
}
.article-meta-item strong {
  color: var(--bone);
  font-weight: 500;
}
.article-meta-sep { color: var(--fog); }

/* Article body -------------------------------------------- */
.article-body {
  padding: clamp(4rem, 7vw, 7rem) 0;
  background: var(--bone);
}
.article-body-wrap {
  max-width: none;
  margin: 0;
}
/* Constrain pure prose for readability while letting headings + pull-quotes
   stretch the full container width — gives the article an editorial feel
   without sacrificing line length. */
.article-body p,
.article-body ul,
.article-body ol {
  max-width: 78ch;
}
.article-body p,
.article-body ul,
.article-body ol {
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--ink);
}
.article-body p + p,
.article-body p + ul,
.article-body p + ol,
.article-body ul + p,
.article-body ol + p {
  margin-top: var(--s-3);
}
.article-body p em {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.article-body strong { font-weight: 700; }

.article-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: var(--s-5);
  margin-bottom: var(--s-3);
}
.article-body h2 em {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.article-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-top: var(--s-4);
  margin-bottom: var(--s-2);
}
.article-body h3 em {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}

.article-body ul,
.article-body ol {
  padding-left: 1.2em;
}
.article-body ul li,
.article-body ol li {
  margin-bottom: 0.6em;
}
.article-body ul li::marker { color: var(--signal); }
.article-body ol li::marker { color: var(--fog); font-family: var(--font-mono); font-size: 0.85em; }

/* Pull quote ---------------------------------------------- */
.article-pull {
  margin: var(--s-5) calc(var(--s-3) * -1);
  padding: var(--s-4) var(--s-3);
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.article-pull em {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}

/* Numbered article section heading ------------------------ */
.article-section-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: var(--s-1);
  margin-top: var(--s-5);
}
.article-section-num + h2 { margin-top: 0; }

/* Article CTA ---------------------------------------------- */
.article-end-cta {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(3rem, 5vw, 5rem) 0;
}
.article-end-cta-wrap {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.article-end-cta h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}
.article-end-cta h3 em {
  color: var(--signal);
  font-style: italic;
  font-weight: 400;
}
.article-end-cta p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--silver);
  margin-bottom: var(--s-3);
}
.article-end-cta .actions {
  display: flex;
  gap: var(--s-2);
  justify-content: center;
  flex-wrap: wrap;
}


/* =========================================================
   VFS CUSTOM CURSOR — orange dot that follows the mouse,
   expands to a ring on hover over interactive elements.
   Only visible on devices with a real cursor (not touch).
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: none; }
  body * { cursor: none !important; }
  /* Allow native text caret in form fields so users can still see where they're typing */
  input, textarea { cursor: text !important; }

  .vfs-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0);
    will-change: transform;
  }
  .vfs-cursor::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    background: var(--signal);
    border-radius: 50%;
    transition:
      width  .3s var(--ease),
      height .3s var(--ease),
      margin .3s var(--ease),
      background .25s var(--ease),
      border .25s var(--ease),
      opacity .25s var(--ease);
  }
  /* Hover: expand to an orange outline ring */
  .vfs-cursor.is-active::before {
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    background: transparent;
    border: 2px solid var(--signal);
  }
  /* Click: small bounce */
  .vfs-cursor.is-down::before {
    transform: scale(0.7);
  }
  /* Off-screen */
  .vfs-cursor.is-hidden::before {
    opacity: 0;
  }
}

/* =========================================================
   Anchor scroll offset — prevents the fixed header from
   covering the top of any element scrolled to via #hash.
   ========================================================= */
:where([id]) {
  scroll-margin-top: 96px;
}

/* =========================================================
   404 / error page
   ========================================================= */
.btn-outline-light {
  border: 1px solid rgba(245, 242, 236, 0.45);
  color: var(--bone);
}
.btn-outline-light:hover {
  background: var(--bone);
  color: var(--onyx);
}

.error-hero {
  min-height: 100vh;
  background: var(--onyx);
  color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 10vw, 10rem) var(--gutter) clamp(4rem, 8vw, 8rem);
  text-align: center;
}
.error-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
.error-code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--s-4);
}
.error-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
}
.error-hero h1 em {
  font-style: italic;
  font-weight: 400;
}
.error-lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: rgba(245, 242, 236, 0.78);
  max-width: 56ch;
  margin: 0 auto var(--s-6);
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

/* ==============================================================
   HERO V2 — minimalistic, premium, centered typography
   Floating 3D screens drift slowly above the heading, dissolving
   into the background. Lots of negative space, luxe and calm.
   ============================================================== */

.hero.hero--centered {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  text-align: left;
  padding: clamp(140px, 18vh, 220px) 0 clamp(80px, 12vh, 160px);
}

/* Deep-black canvas behind the inline background-image. No masks, no
   radial vignettes — the .hero-overlay element does the fade work, so
   the image is always full-bleed (cover) and never reveals body bg. */
.hero--centered .hero-bg {
  background-color: #000;
}

/* Background video — fills .hero-bg, cover, slightly right-positioned
   so the laptop subject sits on the right half (matching the original
   still photo composition). */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  pointer-events: none;
}

/* Black left-to-right fade — solid #000 on the left for headline
   legibility, fading smoothly to transparent so the photo emerges from
   pitch black instead of a hard cut. Consistent across all viewport
   widths because it's percentage-based on the hero element itself. */
.hero--centered .hero-overlay {
  background: linear-gradient(90deg,
    #000 0%,
    #000 28%,
    rgba(0, 0, 0, 0.88) 45%,
    rgba(0, 0, 0, 0.55) 65%,
    rgba(0, 0, 0, 0.20) 85%,
    transparent 100%
  );
}

/* Mobile: image at 125% viewport width — slightly oversized so the
   subject feels closer/punchier. Solid #000 below it where the
   headline lives. The ::after pseudo on .hero-bg sits exactly at the
   image's natural bottom edge (125vw / 1.78 for a 16:9 source) and
   fades the photo softly into the black backdrop. */
@media (max-width: 880px) {
  .hero--centered .hero-bg {
    background-size: 125% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #000 !important;
    position: absolute;
  }
  /* Video on mobile: same banner-at-top behaviour as the photo had —
     125% viewport width, natural aspect, pinned to the top so the
     overlay's vw-anchored fade lines up with the video's bottom edge. */
  .hero--centered .hero-bg .hero-video {
    width: 125%;
    height: auto;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: center top;
    inset: auto;
  }
  .hero--centered .hero-bg::after {
    /* No separate fade element — the overlay below does the bottom-edge
       fade via vw-anchored stops so it perfectly tracks the image's
       natural bottom on every screen width. */
    content: none;
  }
  .hero--centered .hero-overlay {
    /* Image height at 125% viewport width (16:9) = 70.22vw. The gradient
       holds transparent across the photo, then ramps to solid #000 right
       at the image's bottom edge so the photo melts smoothly into the
       dark backdrop where the headline sits. */
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0) calc(70.22vw - 110px),
      rgba(0, 0, 0, 0.45) calc(70.22vw - 40px),
      rgba(0, 0, 0, 0.92) 70.22vw,
      #000 calc(70.22vw + 50px),
      #000 100%
    );
  }
  .hero--centered::after { display: none; }
  /* Push the text block lower in the hero so the image breathes more
     and the CTA badge has clear room at the bottom-right. */
  .hero.hero--centered {
    padding-top: clamp(160px, 24vh, 220px);
    padding-bottom: clamp(40px, 6vh, 70px);
  }
}

/* Soft bottom fade — hero dissolves into the next section */
.hero--centered::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32vh;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.45) 55%,
    #000 100%);
  pointer-events: none;
  z-index: 1;
}

/* Left-aligned text block (within wrap). Space-between pushes the small
   editorial header to the top and the main headline + pills to the
   bottom — gives a layered hero composition. */
.hero--centered .hero-content {
  position: relative;
  z-index: 3;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  gap: clamp(var(--s-4), 4vw, var(--s-6));
}

/* Top-left editorial block — small VFS tag + pill quick-nav stacked. */
.hero-eyebrow-block {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--s-2), 1.6vw, var(--s-3));
}
.hero-eyebrow-block .hero-eyebrow-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.55);
}

/* Pill nav inside the top-left editorial block — direct shortcuts. */
.hero-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.7em 1.4em;
  border-radius: 999px;
  border: 1px solid rgba(245, 242, 236, 0.30);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition:
    background .35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color .35s cubic-bezier(0.22, 1, 0.36, 1),
    color .35s cubic-bezier(0.22, 1, 0.36, 1),
    transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-pill:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
  transform: translateY(-2px);
}
.hero-pill .arrow {
  width: 0.78em;
  height: 0.78em;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-pill:hover .arrow {
  transform: translateX(3px);
}

/* Mobile: keep the editorial block visible at the top with a smaller
   eyebrow tag + compacter pills so the quick-nav is still reachable
   from the hero without scrolling. */
@media (max-width: 880px) {
  .hero-eyebrow-block .hero-eyebrow-tag {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
  }
  .hero-pills {
    gap: 7px;
  }
  .hero-pill {
    padding: 0.5em 0.95em;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    gap: 0.5em;
  }
  .hero-pill .arrow {
    width: 0.7em;
    height: 0.7em;
  }
}
.hero--centered .hero-text {
  max-width: 900px;
  align-items: flex-start;
  text-align: left;
  margin: 0;
  gap: var(--s-3);
}
.hero--centered .hero-headline {
  text-align: left;
  font-size: clamp(2.6rem, 5.6vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0;
}
.hero--centered .hero-lead {
  text-align: left;
  margin: 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  color: rgba(245,242,236,0.78);
}

/* ==============================================================
   HERO SCREENS — floating mini-replicas of service-page heroes
   Drifting + breathing + per-card internal animations
   ============================================================== */
.hero-screens {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: 62% !important;
  z-index: 1 !important;
  perspective: 2000px;
  perspective-origin: 50% 30%;
  pointer-events: none;
  overflow: hidden;
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 100%);
          mask-composite: intersect;
}

.hs-screen {
  position: absolute;
  width: clamp(240px, 22vw, 360px);
  aspect-ratio: 16 / 10;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    linear-gradient(135deg, rgba(245,242,236,0.06) 0%, rgba(245,242,236,0.02) 100%);
  border: 1px solid rgba(245,242,236,0.10);
  border-radius: 16px;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.45),
    0 8px 18px rgba(0,0,0,0.30),
    inset 0 0 0 1px rgba(245,242,236,0.04),
    inset 0 1px 0 0 rgba(245,242,236,0.08);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0;
  color: var(--bone);
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  transition:
    box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover state removed — cards drift and stay decorative. */
/* === Browser bar === */
.hs-bar {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.hs-bar > span:nth-child(-n+3) { width: 5px; height: 5px; border-radius: 50%; }
.hs-bar > span:nth-child(1) { background: rgba(255,95,87,0.55); }
.hs-bar > span:nth-child(2) { background: rgba(254,188,46,0.55); }
.hs-bar > span:nth-child(3) { background: rgba(40,200,64,0.55); }
.hs-url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.08em;
  color: rgba(245,242,236,0.50);
  text-align: center;
  padding: 1px 6px;
  background: rgba(245,242,236,0.05);
  border-radius: 5px;
  margin-left: 4px;
  text-transform: lowercase;
}

/* === Title === */
.hs-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.85rem, 1.1vw, 1.1rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--bone);
  margin: 2px 0 0;
}
.hs-title em { font-style: italic; font-weight: 400; color: var(--signal); }

/* === Brand glow per card — breathes === */
.hs-glow {
  position: absolute;
  inset: -20%;
  z-index: -1;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  pointer-events: none;
  animation: hs-glow-breathe 7s ease-in-out infinite;
}
.hs-glow--blue   { background: radial-gradient(circle, rgba(43,127,255,0.40), transparent 65%); }
.hs-glow--pink   { background: radial-gradient(circle, rgba(231,84,128,0.40), transparent 65%); }
.hs-glow--violet { background: radial-gradient(circle, rgba(124,77,255,0.40), transparent 65%); animation-delay: -1.5s; }
.hs-glow--orange { background: radial-gradient(circle, rgba(255,138,42,0.40), transparent 65%); animation-delay: -3s; }
.hs-glow--warm   { background: radial-gradient(circle, rgba(229,48,27,0.35), transparent 65%); animation-delay: -4.5s; }
.hs-screen:hover .hs-glow { opacity: 0.95; }
@keyframes hs-glow-breathe {
  0%, 100% { opacity: 0.40; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(1.08); }
}

/* === Mini stage shared === */
.hs-mini {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

/* === Corner tag === */
.hs-tag {
  position: absolute;
  bottom: 8px; right: 10px;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.60);
  padding: 2px 7px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(245,242,236,0.08);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
}

/* ============================================================
   CARD 1 — WEBSITE — image shimmer + pulsing CTA
   ============================================================ */
.hs-mini--web {
  background: rgba(245,242,236,0.04);
  padding: 6px 7px;
  gap: 3px;
}
.hs-web-meta {
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.50);
  display: flex; justify-content: space-between;
}
.hs-web-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--bone);
}
.hs-web-h em { color: var(--signal); font-style: italic; font-weight: 400; }
.hs-web-img {
  flex: 1;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(43,127,255,0.30) 0%, rgba(245,242,236,0.08) 100%),
    radial-gradient(circle at 30% 60%, rgba(229,48,27,0.25), transparent 60%);
  border-radius: 3px;
}
.hs-web-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 0%, transparent 35%,
    rgba(245,242,236,0.22) 50%,
    transparent 65%, transparent 100%);
  transform: translateX(-100%);
  animation: hs-shimmer 5s ease-in-out infinite;
}
@keyframes hs-shimmer {
  0%, 60% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
.hs-web-cta {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.10em;
  padding: 2px 6px;
  background: var(--bone);
  color: var(--ink);
  border-radius: 999px;
  font-weight: 500;
  animation: hs-cta-pulse 3.5s ease-in-out infinite;
}
@keyframes hs-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,242,236,0); }
  50%      { box-shadow: 0 0 0 4px rgba(245,242,236,0.18); }
}

/* ============================================================
   CARD 2 — BRANDING — logo radial-glow pulse + staggered palette pop
   ============================================================ */
.hs-mini--brand {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.hs-bm { border-radius: 4px; padding: 6px 7px; display: flex; flex-direction: column; }
.hs-bm-logo {
  background: #0F0F0F;
  color: var(--bone);
  border: 1px solid rgba(245,242,236,0.06);
  align-items: center; justify-content: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.hs-bm-logo::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle, rgba(229,48,27,0.32), transparent 60%);
  animation: hs-logo-glow 6s ease-in-out infinite;
}
@keyframes hs-logo-glow {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50%      { opacity: 0.7; transform: scale(1.1); }
}
.hs-bm-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.06em;
  line-height: 0.85;
  position: relative; z-index: 1;
}
.hs-bm-mark sup {
  font-size: 0.30em;
  color: var(--signal);
  font-style: italic;
  vertical-align: super;
  margin-left: 1px;
  font-weight: 400;
}
.hs-bm-foot {
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.55);
  position: relative; z-index: 1;
}
.hs-bm-pal {
  background: #0F0F0F;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 6px;
}
.hs-bm-pal span {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(245,242,236,0.06);
  animation: hs-pal-pop 4s ease-in-out infinite;
  transform-origin: center;
}
.hs-bm-pal span:nth-child(1) { animation-delay: 0s; }
.hs-bm-pal span:nth-child(2) { animation-delay: 0.5s; }
.hs-bm-pal span:nth-child(3) { animation-delay: 1.0s; }
.hs-bm-pal span:nth-child(4) { animation-delay: 1.5s; }
@keyframes hs-pal-pop {
  0%, 80%, 100% { transform: scale(1); filter: brightness(1); }
  40%           { transform: scale(1.08); filter: brightness(1.25); }
}

/* ============================================================
   CARD 3 — 3D — rec-dot pulse + grid drift + sphere float + cursor blink
   ============================================================ */
.hs-mini--3d {
  background: linear-gradient(180deg, #1c1c1e 0%, #0d0d0f 100%);
  border: 1px solid rgba(245,242,236,0.06);
  padding: 3px;
  position: relative;
}
.hs-mini--3d::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -5px;
  transform: translateX(-50%);
  width: 24%; height: 5px;
  background: linear-gradient(180deg, #2a2a2c 0%, #0d0d0f 100%);
  border-radius: 0 0 4px 4px;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
}
.hs-vp {
  flex: 1;
  background:
    radial-gradient(ellipse 70% 50% at 50% 35%, rgba(124,77,255,0.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(229,48,27,0.10), transparent 60%),
    linear-gradient(180deg, #1A1A1F 0%, #0A0A0C 100%);
  border-radius: 2px;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.hs-vp-bar {
  height: 11px;
  background: #18181C;
  border-bottom: 1px solid rgba(245,242,236,0.06);
  display: flex; align-items: center; gap: 3px;
  padding: 0 4px;
  flex-shrink: 0;
}
.hs-vp-bar > span:nth-child(-n+3) { width: 3px; height: 3px; border-radius: 50%; }
.hs-vp-bar > span:nth-child(1) { background: #FF5F57; }
.hs-vp-bar > span:nth-child(2) { background: #FEBC2E; }
.hs-vp-bar > span:nth-child(3) { background: #28C840; }
.hs-vp-file {
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.05em;
  color: rgba(245,242,236,0.7);
  margin-left: 3px;
  display: inline-flex;
  align-items: center;
}
.hs-vp-file em { color: var(--signal); font-style: normal; }
.hs-vp-file::after {
  content: '';
  display: inline-block;
  width: 3px; height: 6px;
  background: var(--signal);
  margin-left: 3px;
  animation: hs-blink 1.2s steps(2, end) infinite;
}
@keyframes hs-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.hs-vp-eng {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 5.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.55);
  padding: 1px 4px;
  border: 1px solid rgba(245,242,236,0.10);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}
.hs-vp-eng::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--signal);
  margin-right: 3px;
  animation: hs-rec 1.6s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(229,48,27,0.6);
}
@keyframes hs-rec { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.hs-vp-canvas {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Subtle floor under the lamp's pool of light */
.hs-vp-floor {
  position: absolute;
  inset: 70% 0 0 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%);
}

/* === PENDANT LAMP — mini replica of the lamp on /3d.html === */
.hs-lamp {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 70px; height: 100%;
  pointer-events: none;
  animation: hs-lamp-bob 7s ease-in-out infinite;
  z-index: 2;
}
@keyframes hs-lamp-bob {
  0%, 100% { transform: translateX(-50%); }
  50%      { transform: translateX(-50%) translateY(-2px); }
}
.hs-lamp .cable {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1.5px; height: 30%;
  background: linear-gradient(180deg, #1a1a1c, #2a2a2c);
}
.hs-lamp .cap {
  position: absolute;
  top: 28%; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 4px;
  background: linear-gradient(180deg, #2a2a2c, #0d0d0f);
  border-radius: 2px 2px 1px 1px;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.15);
  z-index: 3;
}
.hs-lamp .shade {
  position: absolute;
  top: 30%; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 30%;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,170,90,0.45) 0%, transparent 55%),
    linear-gradient(180deg, #1A0A04 0%, #2A0F08 35%, #5C0A02 100%);
  clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
  box-shadow:
    inset 0 -4px 6px rgba(255,140,60,0.18),
    0 6px 14px rgba(0,0,0,0.55);
}
.hs-lamp .shade::before {
  content: "";
  position: absolute;
  top: 8%; left: 22%;
  width: 3px; height: 80%;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent 70%);
  filter: blur(1px);
  clip-path: inherit;
}
.hs-lamp .shade::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%);
  width: 90%; height: 6px;
  background: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(255,210,120,0.95), rgba(255,160,60,0.5) 30%, transparent 80%);
  filter: blur(1px);
}
.hs-lamp .bulb {
  position: absolute;
  top: 58%; left: 50%;
  transform: translateX(-50%);
  width: 11px; height: 11px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, #FFF8E8 0%, #FFD080 30%, #E5301B 70%, transparent 100%);
  box-shadow:
    0 0 14px 3px rgba(255,180,90,0.55),
    0 0 28px 7px rgba(229,48,27,0.35);
  z-index: 2;
  animation: hs-bulb-pulse 3s ease-in-out infinite;
}
@keyframes hs-bulb-pulse {
  0%, 100% {
    box-shadow: 0 0 14px 3px rgba(255,180,90,0.55), 0 0 28px 7px rgba(229,48,27,0.35);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(255,180,90,0.78), 0 0 42px 10px rgba(229,48,27,0.55);
  }
}
.hs-lamp .cone {
  position: absolute;
  top: 62%; bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0%,
      rgba(255,200,110,0.34) 0%,
      rgba(255,160,90,0.18) 25%,
      rgba(229,48,27,0.10) 55%,
      transparent 85%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  z-index: 1;
  filter: blur(2px);
}
.hs-lamp .pool {
  position: absolute;
  bottom: 4%; left: 50%;
  transform: translateX(-50%);
  width: 130px; height: 18%;
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(255,210,130,0.55) 0%,
      rgba(255,160,90,0.32) 25%,
      rgba(229,48,27,0.16) 55%,
      transparent 85%);
  border-radius: 50%;
  z-index: 1;
  filter: blur(3px);
}

/* ============================================================
   CARD 4 — ADS — bars cycle + gradient img-shift + arrow bounce
   ============================================================ */
.hs-mini--ads { gap: 4px; }
.hs-ad {
  border-radius: 4px;
  padding: 5px 6px;
  display: flex; flex-direction: column; gap: 3px;
  flex: 1;
}
.hs-ad-chart {
  background: #0F0F0F;
  border: 1px solid rgba(245,242,236,0.06);
}
.hs-ad-eb {
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.55);
}
.hs-ad-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 16px;
}
.hs-ad-bars span {
  flex: 1;
  background: rgba(245,242,236,0.18);
  border-radius: 1px;
  height: var(--h, 50%);
  transform-origin: bottom;
  animation: hs-bars-grow 4s ease-in-out infinite;
}
.hs-ad-bars span:nth-child(1) { animation-delay: 0.0s; }
.hs-ad-bars span:nth-child(2) { animation-delay: 0.15s; }
.hs-ad-bars span:nth-child(3) { animation-delay: 0.30s; }
.hs-ad-bars span:nth-child(4) { animation-delay: 0.45s; }
.hs-ad-bars span:nth-child(5) { animation-delay: 0.60s; background: var(--signal); }
.hs-ad-bars span:nth-child(6) { animation-delay: 0.75s; background: var(--signal); }
@keyframes hs-bars-grow {
  0%   { transform: scaleY(0.30); }
  60%  { transform: scaleY(1);    }
  85%  { transform: scaleY(0.85); }
  100% { transform: scaleY(0.30); }
}
.hs-ad-creative {
  background: var(--bone);
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.hs-ad-img {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--signal), #c8240f, #ff6b3d, var(--signal));
  background-size: 200% 200%;
  border-radius: 2px;
  flex-shrink: 0;
  animation: hs-ad-img-shift 6s ease-in-out infinite;
}
@keyframes hs-ad-img-shift {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}
.hs-ad-body {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.hs-ad-body strong {
  font-family: var(--font-display);
  font-size: 7.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.hs-ad-body strong em { color: var(--signal); font-style: italic; font-weight: 400; }
.hs-ad-cta {
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.hs-ad-cta::after {
  content: '→';
  display: inline-block;
  animation: hs-arrow 2s ease-in-out infinite;
}
@keyframes hs-arrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}

/* ============================================================
   CARD 5 — PRINT — three fanned business cards that subtly sway
   ============================================================ */
.hs-mini--print {
  align-items: center;
  justify-content: center;
  padding: 6px;
  position: relative;
}
.hs-print {
  position: absolute;
  width: 62%;
  aspect-ratio: 1.7 / 1;
  border-radius: 3px;
  padding: 7px 9px;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-origin: 50% 50%;
  overflow: hidden;
}

/* === Back card — dark with wordmark === */
.hs-print--back {
  background: #0F0F0F;
  color: var(--bone);
  z-index: 1;
  animation: hs-print-sway-1 9s ease-in-out infinite;
}
.hs-print--back .hs-print-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.05em;
  line-height: 1;
}
.hs-print--back .hs-print-mark sup {
  font-size: 0.30em;
  color: var(--signal);
  vertical-align: super;
  font-style: italic;
}
.hs-print--back .hs-print-foot {
  font-family: var(--font-mono);
  font-size: 5.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.55);
}

/* === Middle card — bone with full contact details === */
.hs-print--mid {
  background: var(--bone);
  color: var(--ink);
  z-index: 3;
  animation: hs-print-sway-2 10s ease-in-out infinite;
}
.hs-print--mid .hs-print-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hs-print--mid .hs-print-name em {
  font-style: italic; font-weight: 400; color: var(--signal);
}
.hs-print--mid .hs-print-role {
  font-family: var(--font-mono);
  font-size: 5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.55);
  margin-top: 2px;
}
.hs-print--mid .hs-print-contact {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-mono);
  font-size: 5px;
  letter-spacing: 0.05em;
  color: rgba(10,10,10,0.65);
}

/* === Front card — red accent === */
.hs-print--front {
  background: linear-gradient(135deg, var(--signal) 0%, #c8240f 100%);
  color: var(--bone);
  z-index: 2;
  animation: hs-print-sway-3 8s ease-in-out infinite;
}
.hs-print--front .hs-print-stripe {
  width: 30%; height: 3px;
  background: var(--bone);
  border-radius: 2px;
}
.hs-print--front .hs-print-tag {
  font-family: var(--font-mono);
  font-size: 5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.85);
  align-self: flex-end;
}
.hs-print--front .hs-print-tag em { color: var(--bone); font-style: italic; }

@keyframes hs-print-sway-1 {
  0%, 100% { transform: rotate(-9deg)  translate(-28%, 4%); }
  50%      { transform: rotate(-12deg) translate(-30%, 1%); }
}
@keyframes hs-print-sway-2 {
  0%, 100% { transform: rotate(2deg)  translate(0,  -4%); }
  50%      { transform: rotate(4deg)  translate(2%, -7%); }
}
@keyframes hs-print-sway-3 {
  0%, 100% { transform: rotate(11deg) translate(28%, 6%); }
  50%      { transform: rotate(14deg) translate(30%, 3%); }
}

/* ============================================================
   PER-SCREEN POSITION + SLOW DRIFT (70–110s, ease-in-out)
   ============================================================ */
.hs-screen--1 {
  top: 14%;  left: -2%;
  --tilt: rotateX(8deg)  rotateY(-14deg) rotateZ(-2deg);
  animation:
    hs-fade-in 3.0s 0.20s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    hs-drift-1 90s  0.20s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.hs-screen--2 {
  top: 2%;   left: 20%;
  --tilt: rotateX(5deg)  rotateY(-8deg)  rotateZ(1deg);
  animation:
    hs-fade-in 3.0s 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    hs-drift-2 110s 0.55s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.hs-screen--3 {
  top: 28%;  left: 40%;
  --tilt: rotateX(2deg)  rotateY(0deg)   rotateZ(0deg);
  animation:
    hs-fade-in 3.0s 0.90s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    hs-drift-3 100s 0.90s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.hs-screen--4 {
  top: 4%;   left: 60%;
  --tilt: rotateX(5deg)  rotateY(8deg)   rotateZ(-1deg);
  animation:
    hs-fade-in 3.0s 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    hs-drift-4 95s  1.25s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.hs-screen--5 {
  top: 24%;  left: 80%;
  --tilt: rotateX(8deg)  rotateY(14deg)  rotateZ(2deg);
  animation:
    hs-fade-in 3.0s 1.60s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    hs-drift-5 105s 1.60s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

@keyframes hs-fade-in {
  from { opacity: 0; transform: var(--tilt) translate3d(0, 32px, 0) scale(0.90); }
  to   { opacity: 1; transform: var(--tilt) translate3d(0, 0, 0) scale(1); }
}

/* Each card drifts on a wide 2D orbit that crosses the others' paths,
   so the screens slowly weave through each other.
   4 keyframe stops per card → no two cards trace the same shape. */
@keyframes hs-drift-1 {
  0%, 100% { transform: var(--tilt) translate3d(0, 0, 0); }
  25%      { transform: var(--tilt) translate3d(90px, -30px, 0); }
  50%      { transform: var(--tilt) translate3d(140px, 40px, 0); }
  75%      { transform: var(--tilt) translate3d(50px, 60px, 0); }
}
@keyframes hs-drift-2 {
  0%, 100% { transform: var(--tilt) translate3d(0, 0, 0); }
  25%      { transform: var(--tilt) translate3d(-60px, 50px, 0); }
  50%      { transform: var(--tilt) translate3d(80px, 70px, 0); }
  75%      { transform: var(--tilt) translate3d(110px, -20px, 0); }
}
@keyframes hs-drift-3 {
  0%, 100% { transform: var(--tilt) translate3d(0, 0, 0); }
  25%      { transform: var(--tilt) translate3d(-80px, -40px, 0); }
  50%      { transform: var(--tilt) translate3d(-40px, -90px, 0); }
  75%      { transform: var(--tilt) translate3d(60px, -30px, 0); }
}
@keyframes hs-drift-4 {
  0%, 100% { transform: var(--tilt) translate3d(0, 0, 0); }
  25%      { transform: var(--tilt) translate3d(-100px, 30px, 0); }
  50%      { transform: var(--tilt) translate3d(-130px, -40px, 0); }
  75%      { transform: var(--tilt) translate3d(-50px, -70px, 0); }
}
@keyframes hs-drift-5 {
  0%, 100% { transform: var(--tilt) translate3d(0, 0, 0); }
  25%      { transform: var(--tilt) translate3d(-120px, -50px, 0); }
  50%      { transform: var(--tilt) translate3d(-80px, 60px, 0); }
  75%      { transform: var(--tilt) translate3d(40px, 40px, 0); }
}

@media (max-width: 880px) {
  .hero-screens { display: none !important; }
  .hero.hero--centered {
    padding-top: clamp(110px, 14vh, 160px);
    padding-bottom: clamp(60px, 10vh, 120px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-screen,
  .hs-glow,
  .hs-web-img::after,
  .hs-web-cta,
  .hs-bm-logo::before,
  .hs-bm-pal span,
  .hs-lamp,
  .hs-lamp .bulb,
  .hs-vp-file::after,
  .hs-vp-eng::before,
  .hs-ad-bars span,
  .hs-ad-img,
  .hs-ad-cta::after,
  .hs-print--back, .hs-print--mid, .hs-print--front {
    animation: none !important;
  }
  .hs-screen { opacity: 1 !important; }
}


/* ==============================================================
   ARROW ICON — replaces every emoji `↗` / `→` site-wide.
   `<span class="arrow"></span>`        → up-right glyph
   `<span class="arrow r"></span>`      → right glyph
   The empty span has a CSS mask that paints the SVG in currentColor,
   so it inherits the surrounding text color and stays sharp at any
   font-size. Unicode characters inside the span (legacy markup) are
   hidden via text-indent in case any HTML still contains them.
   ============================================================== */
.arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -1px;
  position: relative;
  flex-shrink: 0;
  /* Hide any legacy unicode arrow character that may still be inside */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  /* Render the up-right arrow via SVG mask (default) */
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10L10 4M10 4H5M10 4V9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10L10 4M10 4H5M10 4V9'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: transform .35s var(--ease);
}
/* Right-pointing variant for CTA buttons (was emoji →) */
.arrow.r,
.nav-cta .arrow {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5'/></svg>");
}


/* ==============================================================
   MOBILE REFINEMENTS — navbar, hero, hero badge, process timeline,
   four-pillars, footer alignment. Desktop layout is untouched —
   every rule lives inside a max-width media query.
   ============================================================== */

/* ============ NAVBAR (<= 880px) ============ */
@media (max-width: 880px) {
  .brand-logo-svg { width: 130px; }
  .site-header { padding: var(--s-3) clamp(0.9rem, 4vw, 1.5rem); }
  .header-actions { gap: 0.4rem; }
  .nav-cta {
    padding: 0.5em 0.85em;
    font-size: 0.85rem;
    gap: 0.4em;
  }
  .nav-toggle {
    width: 42px; height: 42px;
    border-radius: 10px;
    flex: 0 0 42px;
  }
  .nav-toggle .bar { left: 11px; right: 11px; }
  .nav-toggle .bar:nth-child(1) { top: 15px; }
  .nav-toggle .bar:nth-child(2) { top: 25px; }
  .is-nav-open .nav-toggle .bar:nth-child(1) { top: 20px; }
  .is-nav-open .nav-toggle .bar:nth-child(2) { top: 20px; }
}

/* Phone — drop CTA label, keep arrow only (still tappable) */
@media (max-width: 540px) {
  .brand-logo-svg { width: 110px; }
  .nav-cta .label { display: none; }
  .nav-cta {
    width: 42px; height: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    gap: 0;
  }
  .nav-cta .arrow { width: 14px; height: 14px; vertical-align: 0; }
}

/* Scrollable, edge-safe mobile menu */
@media (max-width: 720px) {
  .nav-overlay {
    top: 76px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--s-3);
  }
  .nav-overlay-list a {
    font-size: 1.2rem;
    padding: 0.85rem 0;
  }
  .nav-overlay-foot {
    flex-wrap: wrap;
    gap: var(--s-2);
  }
}


/* ============ HERO (mobile) ============
   Hero fills 100% of the viewport. Image sits at the top (natural
   aspect), content sticks to the bottom on solid #000 so the headline
   reads on a clean dark canvas and the floating CTA badge has clear
   room in the bottom-right corner. */
@media (max-width: 720px) {
  .hero.hero--centered {
    min-height: 100vh;
    min-height: 100svh;
    height: 100vh;
    height: 100svh;
    justify-content: flex-end;
    padding-top: clamp(130px, 20vh, 180px);
    padding-bottom: clamp(40px, 6vh, 70px);
    overflow: hidden;
  }
  .hero--centered .hero-content {
    align-items: flex-start;
  }
  /* Service page heros: hide the right-column visual mockup on phones
     so the hero is just title + lead + CTA (less to break, easier to
     read on small screens). */
  .hero-display-stage { display: none !important; }
  .hero-display-grid { grid-template-rows: auto !important; }
  .hero--centered .hero-headline {
    font-size: clamp(2.1rem, 9.5vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .hero--centered .hero-headline br { display: none; }
  .hero--centered .hero-lead {
    font-size: 0.95rem;
    max-width: 36ch;
  }
}

/* Re-enable the floating hero-screens cards on mobile so the hero
   doesn't sit static. They were hidden globally at <= 880px before. */
@media (max-width: 880px) {
  .hero-screens { display: block !important; }
  .hs-screen { width: clamp(150px, 30vw, 220px) !important; }
}
/* Floating frames removed entirely on phones — they take too much
   space and don't animate reliably on iOS Safari. Mobile hero is a
   clean text-focused viewport instead. */
@media (max-width: 880px) {
  .hero-screens { display: none !important; }
}
@media (max-width: 720px) {
  .hero-screens {
  .hs-screen {
    width: 136px !important;
    /* Slow the desktop drift cycles to half-speed for the calmer,
       more controlled feel the user asked for. */
    animation-duration: 3.0s, 150s !important;
  }
  /* Just two cards, anchored close to the viewport edges. With drift
     amplitudes built for desktop, anchoring closer to the centre
     means the drift never reaches the edges. */
  .hs-screen--1 { top: 18% !important; left:   2% !important; }
  .hs-screen--2 { top:  4% !important; left:  48% !important; }
  .hs-screen--3 { display: none !important; }
  .hs-screen--4 { display: none !important; }
  .hs-screen--5 { display: none !important; }
}
@media (max-width: 480px) {
  .hs-screen { width: 120px !important; }
  .hs-screen--1 { left: 4% !important; }
  .hs-screen--2 { left: 50% !important; }
}


/* ============ GENERAL MOBILE PADDING / TEXT SAFETY ============ */
@media (max-width: 720px) {
  :root { --gutter: clamp(1.1rem, 5vw, 1.4rem); }
  .section { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .section-head h2 { font-size: clamp(2rem, 8.5vw, 2.7rem); }
}


/* ============ FOUR-PILLAR SERVICES (mobile) ============ */
@media (max-width: 720px) {
  .services .wrap {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
  .services-grid {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }
  .service {
    padding: var(--s-3) var(--s-3) var(--s-4);
    min-height: 240px;
  }
  /* Staggered reveal — each card slides in slightly later than the last */
  .service[data-reveal]:nth-child(1) { transition-delay: 0.05s; }
  .service[data-reveal]:nth-child(2) { transition-delay: 0.22s; }
  .service[data-reveal]:nth-child(3) { transition-delay: 0.40s; }
  .service[data-reveal]:nth-child(4) { transition-delay: 0.58s; }
}


/* ============ PROCESS — interactive vertical timeline on mobile ============ */
@media (max-width: 880px) {
  .process-grid {
    position: relative;
    padding-left: 50px;
  }
  /* Static guide line that runs along the dot column */
  .process-grid::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.04) 0%,
      rgba(0,0,0,0.14) 40%,
      rgba(0,0,0,0.14) 60%,
      rgba(0,0,0,0.04) 100%);
    pointer-events: none;
  }
  /* Step row */
  .process-step {
    grid-template-columns: 1fr;
    gap: 0.35em;
    padding: var(--s-3) 0;
    border-top: none;
    transform: none !important;
    background-color: transparent !important;
  }
  .process-step:last-child { border-bottom: none; }
  /* Number → numbered dot on the timeline */
  .process-step .num {
    position: absolute;
    left: -50px;
    top: 22px;
    width: 28px; height: 28px;
    background: var(--bone);
    border: 2px solid rgba(0,0,0,0.15);
    border-radius: 50%;
    /* Hide the original "— 01" text — we render the digits via ::before */
    font-size: 0;
    line-height: 1;
    grid-column: 1;
    transition:
      border-color .55s var(--ease),
      background .55s var(--ease),
      transform .55s var(--ease);
  }
  .process-step .num::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0;
    color: var(--fog);
    font-weight: 500;
    transition: color .55s var(--ease);
  }
  .process-step:nth-child(1) .num::before { content: '01'; }
  .process-step:nth-child(2) .num::before { content: '02'; }
  .process-step:nth-child(3) .num::before { content: '03'; }
  .process-step:nth-child(4) .num::before { content: '04'; }
  .process-step:nth-child(5) .num::before { content: '05'; }
  /* Active state — dot fills red + scales + content lights up. The
     existing reveal observer toggles .is-visible per step. */
  .process-step.is-visible .num {
    border-color: var(--signal);
    background: var(--signal);
    transform: scale(1.12);
    box-shadow: 0 6px 16px rgba(229, 48, 27, 0.32);
  }
  .process-step.is-visible .num::before { color: var(--bone); }
  .process-step h3 {
    color: rgba(10,10,10,0.55);
    transition: color .55s var(--ease);
    grid-column: 1;
    text-align: left;
  }
  .process-step.is-visible h3 { color: var(--ink); }
  .process-step p,
  .process-step .duration {
    grid-column: 1;
    text-align: left;
  }
}


/* Footer mobile stacking is handled in the main .site-footer block —
   keep this slot here so future tweaks have a clear anchor. */


/* ============ BRANDING marquee — keep alive on mobile ============ */
@media (max-width: 880px) {
  .hero-display:has(.vfs-bm) { padding-top: 100px !important; }
  .hero-display:has(.vfs-bm) .hero-display-grid {
    grid-template-columns: 1fr !important;
    gap: var(--s-3) !important;
  }
  .hero-display-stage:has(.vfs-bm) {
    min-height: 420px !important;
  }
  .vfs-bm {
    min-height: 420px !important;
    height: 420px !important;
  }
  .vfs-bm-card { height: 200px !important; flex: 0 0 200px !important; }
}
@media (max-width: 540px) {
  .vfs-bm-grid {
    grid-template-columns: 1fr !important;
  }
  .vfs-bm-col-down { display: none; }
}


/* ============ HERO-DISPLAY (service page heroes) MOBILE ============
   The desktop hero is two columns (text + visual stage). On mobile
   collapse to one column, contain text within the viewport, stack
   any inner page-stages cleanly, and scale the heavy 3D mockups. */
@media (max-width: 880px) {
  .hero-display {
    padding: 110px var(--gutter) var(--s-4);
    min-height: auto;
  }
  .hero-display > .wrap {
    padding-left: 0;
    padding-right: 0;
  }
  .hero-display-title {
    font-size: clamp(2.4rem, 11vw, 4rem);
    line-height: 1;
  }
  /* !important needed to beat per-page `.hero-display:has(.page-stage-X)
     .hero-display-grid` overrides that win on specificity */
  .hero-display-grid {
    grid-template-columns: 1fr !important;
    gap: var(--s-4) !important;
  }
  .hero-display-text {
    max-width: 100%;
  }
  .hero-display-lead {
    font-size: 0.95rem;
    max-width: 100%;
  }
  .hero-display-actions {
    gap: 0.6rem;
  }
  .hero-display-actions .btn {
    padding: 0.8em 1.1em;
    font-size: 0.9rem;
  }
  /* Page-stages — every variant collapses to single column / capped
     width / contained inside the viewport. */
  .hero-display-stage {
    width: 100%;
    overflow: hidden;
  }
  .page-stage,
  .page-stage-3d,
  .page-stage-brand,
  .page-stage-web {
    transform: scale(0.85);
    transform-origin: top center;
    max-width: 100%;
  }
  /* Ads page — chart card + creative card stack vertically and shrink */
  .page-stage-ads {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100%;
  }
  .ads-card { padding: 14px; }
  .ads-platforms {
    bottom: -36px !important;
    right: 0 !important;
    transform: scale(0.85);
    transform-origin: bottom right;
  }
  /* Studio polaroids stack neatly */
  .mockup-polaroids {
    transform: scale(0.85);
    transform-origin: top center;
  }
}
@media (max-width: 540px) {
  .hero-display-title {
    font-size: clamp(2.1rem, 12vw, 3.4rem);
  }
  .hero-display-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}


/* ==============================================================
   PAGE-LOAD FADE-IN — every page eases in cleanly instead of
   snapping. Body starts at opacity 0.0, hero text + first sections
   slide up briefly. Stops after a single run so user scroll
   afterwards isn't affected.
   ============================================================== */
/* === HERO ENTRANCE ANIMATIONS ===
   Gated behind `body.is-loaded` — that class is added by the
   preloader's `finish()` once the curtain has lifted, so users
   actually SEE the animation play instead of it happening behind
   the preloader.

   Until `is-loaded` fires the hero elements are pinned at their
   "from" state (opacity 0 + translateY). Once it fires they animate
   to their final position. */
body .hero-text[data-reveal],
body .hero-display-text[data-reveal] {
  opacity: 1;
  transform: none;
}
body .hero .hero-headline,
body .hero-display-title,
body .hero .hero-lead,
body .hero-display-lead,
body .hero-display-actions,
body .hero-actions {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
body.is-loaded .hero .hero-headline,
body.is-loaded .hero-display-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
body.is-loaded .hero .hero-lead,
body.is-loaded .hero-display-lead {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}
body.is-loaded .hero-display-actions,
body.is-loaded .hero-actions {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.55s;
}

/* Hero stage (right-column visual on service pages) — scales + fades in */
body .hero-display-stage[data-reveal] {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition:
    opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
body.is-loaded .hero-display-stage[data-reveal] {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.4s;
}

/* Respect reduced motion — kill the entrance for users who opt out */
@media (prefers-reduced-motion: reduce) {
  body,
  .hero .hero-headline,
  .hero .hero-lead,
  .hero-display-title,
  .hero-display-lead {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* Floating badge: color comes from the parent `.floating-badge`
   (light or dark depending on `body.badge-over-dark`). No filter
   or mix-blend-mode here — those break the spin on iOS Safari. */
.floating-badge-arrow {
  isolation: isolate;
}


/* ==============================================================
   MOBILE POLISH PASS
   - Guarantees side padding on every wrapped section.
   - Caps oversized hero-screens / marquees on tablet/mobile.
   - Smooths animations that were desktop-only.
   ============================================================== */

@media (max-width: 720px) {
  /* Always pad horizontally — even if a section forgot the .wrap */
  .section,
  .case-next,
  .cta,
  .page-intro,
  .offerings,
  .faq,
  .work,
  .why,
  .process,
  .intro,
  .services {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  /* …but .wrap children should still get their own gutter on top
     for inner nesting. Reset inner duplicate so we don't double-pad. */
  .section > .wrap,
  .case-next > .wrap,
  .cta > .wrap {
    padding-left: 0;
    padding-right: 0;
  }
  /* Section heads — tighter line-height, balanced wrap */
  .section-head h2,
  .intro-head h2 {
    text-wrap: balance;
    letter-spacing: -0.02em;
  }
  /* Service / case copy never glued to edges */
  .service,
  .why-card,
  .case-next-card,
  .offering {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }
  /* Cards stack with breathing room */
  .why-grid {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  /* CTA strip — center, breathe */
  .cta-strip-grid {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    text-align: center;
  }
  .cta-strip-grid .actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Tablet: keep hero-screens proportional, don't overflow */
@media (max-width: 1100px) and (min-width: 881px) {
  .hero-screens { display: block !important; height: 55% !important; opacity: 0.85; }
  .hs-screen { width: clamp(180px, 18vw, 260px) !important; }
}

/* Hero-display stage on phones — scale 3D mockups so they fit */
@media (max-width: 720px) {
  .hero-display { padding-top: 110px; padding-bottom: var(--s-4); }
  .hero-display-stage { min-height: 320px; }
  .page-stage {
    transform: scale(0.78);
    transform-origin: top center;
  }
  .vfs-3d-monitor { width: 92% !important; }
  .mockup-polaroids {
    transform: scale(0.85);
    transform-origin: top center;
  }
}

/* Smooth the existing hover-only animations so they fire on tap too */
@media (max-width: 880px) {
  .service .arrow-link,
  .work-meta .arrow,
  .case-next-card,
  .btn,
  .nav-cta {
    -webkit-tap-highlight-color: transparent;
  }
  /* Reveal animation runs slightly faster on small screens — feels
     more responsive without losing the easing curve. */
  [data-reveal] {
    transition-duration: .65s;
  }
}


/* ==============================================================
   MOBILE: STATIC + VISIBLE
   The fancy entrance animations have been unreliable on real iOS
   Safari. The compromise: on mobile, everything is shown at its
   final state immediately. No fade-in, no slide-up, no observer
   dependency. The content is just there — properly framed and
   readable. Desktop keeps the full animations.
   ============================================================== */
@media (max-width: 880px) {
  /* Kill the data-reveal opacity gate — every element starts visible */
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Disable the hero entrance keyframe animations and pin elements
     at their final position regardless of body.is-loaded state */
  body .hero .hero-headline,
  body .hero-display-title,
  body .hero .hero-lead,
  body .hero-display-lead,
  body .hero-display-actions,
  body .hero-actions,
  body .hero-display-stage,
  body .hero-text,
  body .hero-display-text,
  body.is-loaded .hero .hero-headline,
  body.is-loaded .hero-display-title,
  body.is-loaded .hero .hero-lead,
  body.is-loaded .hero-display-lead,
  body.is-loaded .hero-display-actions,
  body.is-loaded .hero-actions,
  body.is-loaded .hero-display-stage {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  /* Body page-fade-in turned off on mobile so there's no flash */
  body {
    animation: none !important;
    opacity: 1 !important;
  }
}


/* ==============================================================
   MONTANJA-INSPIRED SERVICE PAGE SECTIONS
   - .hero-display--text   : calm, text-led hero (no stage column)
   - .philosophy           : 4-feature grid (USPs)
   - .benefits             : single-col benefit blocks
   - .checklist            : "what's included" bulleted list
   - .faq-service          : full-width FAQ accordion
   - .cross-promo          : 4-card grid linking to other services
   ============================================================== */

/* === HERO (text-only variant) === */
.hero-display.hero-display--text {
  padding: clamp(120px, 16vh, 200px) 0 clamp(80px, 12vh, 140px);
  min-height: auto;
}
.hero-display--text .hero-display-text {
  max-width: 760px;
}
.hero-display--text .hero-display-text--center {
  margin: 0 auto;
  text-align: left;
}
.hero-display--text .hero-display-title {
  font-size: clamp(2.8rem, 7vw, 6.2rem);
  line-height: 0.97;
  letter-spacing: -0.035em;
  margin: 0.5rem 0 var(--s-2);
}
.hero-display--text .hero-display-eyebrow {
  display: inline-block;
  margin-bottom: var(--s-3);
}
.hero-display--text .hero-display-lead {
  max-width: 65ch;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.6;
}
.hero-display--text .hero-display-lead + .hero-display-lead {
  margin-top: var(--s-2);
}
.hero-display--text .hero-display-actions {
  margin-top: var(--s-4);
}

/* === PHILOSOPHY === */
.philosophy {
  background: var(--bone);
  color: var(--ink);
}
.philosophy .section-head { margin-bottom: var(--s-5); }
.philosophy .section-head h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.philosophy .section-head h2 em { color: var(--signal); font-style: italic; font-weight: 400; }
.philosophy .section-head .section-lead {
  max-width: 60ch;
  margin-top: var(--s-3);
  color: var(--iron);
  font-size: 1.05rem;
}
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.philosophy-feature {
  padding: var(--s-4) 0 var(--s-3);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.philosophy-feature .philosophy-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--signal);
}
.philosophy-feature h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.philosophy-feature p {
  color: var(--iron);
  font-size: 0.98rem;
  line-height: 1.55;
}
@media (max-width: 880px) {
  .philosophy-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
}
@media (max-width: 540px) {
  .philosophy-grid { grid-template-columns: 1fr; }
}

/* === BENEFITS === */
.benefits {
  background: var(--paper, #FAF8F3);
  color: var(--ink);
}
.benefits .section-head h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.02;
  color: var(--ink);
}
.benefits .section-head h2 em { color: var(--signal); font-style: italic; font-weight: 400; }
.benefits-list {
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.benefit {
  display: grid;
  grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  align-items: start;
}
.benefit:last-child { border-bottom: 1px solid rgba(10, 10, 10, 0.12); }
.benefit-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--signal);
  padding-top: 0.4rem;
}
.benefit h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.benefit p {
  color: var(--iron);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 60ch;
}
@media (max-width: 720px) {
  .benefit { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* === CHECKLIST === */
.checklist {
  background: var(--bone);
  color: var(--ink);
}
.checklist .section-head h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: var(--ink);
}
.checklist-list {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-5);
}
.checklist-list li {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: var(--s-3) 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.10);
  display: flex;
  align-items: center;
  gap: 0.85em;
}
.checklist-list li::before {
  content: '';
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--signal);
  /* Centered check via SVG mask */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><circle cx='11' cy='11' r='11' fill='black'/><path d='M6 11.5L9.5 15L16 8' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><circle cx='11' cy='11' r='11' fill='black'/><path d='M6 11.5L9.5 15L16 8' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
@media (max-width: 720px) {
  .checklist-list { grid-template-columns: 1fr; column-gap: 0; }
  .checklist-list li { font-size: 1.05rem; padding: 0.95rem 0; }
}

/* === FAQ (service variant, white background) === */
.faq.faq-service {
  background: var(--bone);
  color: var(--ink);
}
.faq.faq-service .section-head h2 { color: var(--ink); }
.faq.faq-service .section-head .eyebrow { color: var(--fog); }
.faq.faq-service .faq-list {
  margin-top: var(--s-5);
  max-width: 980px;
}
.faq.faq-service .faq-item {
  border-top: 1px solid rgba(10, 10, 10, 0.12);
}
.faq.faq-service .faq-item:last-child { border-bottom: 1px solid rgba(10, 10, 10, 0.12); }
.faq.faq-service .faq-trigger {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--s-3) 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}
.faq.faq-service .faq-mark {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--signal);
  transition: transform .35s var(--ease);
}
.faq.faq-service .faq-item.is-open .faq-mark { transform: rotate(45deg); }
.faq.faq-service .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease);
}
.faq.faq-service .faq-item.is-open .faq-answer { max-height: 600px; }
.faq.faq-service .faq-answer p {
  padding: 0 0 var(--s-3);
  color: var(--iron);
  max-width: 65ch;
  line-height: 1.6;
}

/* === CROSS-PROMO === */
.cross-promo {
  background: var(--bone);
  color: var(--ink);
}
.cross-promo .section-head h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: var(--ink);
}
.cross-promo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.cross-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--s-4);
  background: var(--paper, #FAF8F3);
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  position: relative;
  min-height: 220px;
  transition:
    transform .4s cubic-bezier(0.22, 1, 0.36, 1),
    background .35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color .35s cubic-bezier(0.22, 1, 0.36, 1);
  isolation: isolate;
}
.cross-card:hover {
  transform: translateY(-4px);
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.cross-card:hover h3 { color: var(--bone); }
.cross-card:hover p { color: var(--silver); }
.cross-card:hover .cross-num { color: var(--signal); }
.cross-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fog);
}
.cross-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  transition: color .35s var(--ease);
}
.cross-card h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}
.cross-card p {
  color: var(--iron);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  transition: color .35s var(--ease);
}
.cross-card .arrow-link {
  position: absolute;
  bottom: var(--s-4);
  right: var(--s-4);
  width: 40px; height: 40px;
  border: 1px solid rgba(10, 10, 10, 0.15);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .35s var(--ease);
}
.cross-card .arrow-link::before {
  content: '';
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10L10 4M10 4H5M10 4V9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10L10 4M10 4H5M10 4V9'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.cross-card:hover .arrow-link {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--bone);
  transform: rotate(-8deg) scale(1.05);
}
@media (max-width: 880px) {
  .cross-promo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .cross-promo-grid { grid-template-columns: 1fr; }
}

/* The text-only hero is dark — its section head + lead inherit bone */
.hero-display--text + .philosophy,
.hero-display--text + .work,
.hero-display--text + .benefits,
.hero-display--text + .checklist {
  /* Nothing special — the white section already provides contrast. */
}