/* MAVEA — Creative Lab
   Brand: pink #FF51AB · cream #FCFBFA · grey #636363 · dark #1E1E1E
   Type:  Montserrat — ExtraBold (800) for display, Regular (400) for body
------------------------------------------------------------------*/

:root {
  --pink:  #FF51AB;
  --cream: #FCFBFA;
  --grey:  #636363;
  --dark:  #1E1E1E;

  /* Single typeface: Montserrat. Display = 800 (ExtraBold), body = 400. */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-pad-y: 1.6rem;
  --header-pad-x: 2.5rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* DO NOT set overflow-x: hidden on html/body — it makes the body a
     scroll container and breaks `position: sticky` against the viewport. */
}

body {
  background: var(--cream);
  color: var(--dark);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ─────────────────────────────  HEADER  ───────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-pad-y) var(--header-pad-x);
  /* Default = solid white bar with dark text. Safe everywhere: correct for the
     cream pages, and the readable scrolled state for the dark-hero pages. */
  color: var(--dark);
  background: var(--cream);
  border-bottom: 1px solid color-mix(in srgb, var(--grey) 22%, transparent);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.04);
  /* State 3 must be perfectly solid — no residual blur from the glass state. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  transition: background 300ms ease, color 300ms ease,
              border-color 300ms ease, box-shadow 300ms ease,
              backdrop-filter 300ms ease, -webkit-backdrop-filter 300ms ease;
}

.site-header > * { pointer-events: auto; }

/* Logo = two stacked PNGs (white for dark backgrounds, black for light).
   Black shows by default (solid header); white crossfades in over a dark hero. */
.logo {
  position: relative;
  display: block;
  line-height: 0;
}
.logo__img {
  display: block;
  height: 28px;
  width: auto;
  transition: opacity 300ms ease;
}
.logo__img--white {          /* kept in the DOM for safety; never shown now */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2vw, 2rem);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item { position: relative; }

/* Top-level entries — small caps, wide tracking, pink on hover */
.nav__top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;                 /* follows the header state (white / dark) */
  background: none;
  border: 0;
  padding: 0.4rem 0;
  cursor: pointer;
  transition: color 200ms ease;
}
.nav__top:hover { color: var(--pink); }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin-left: 0.6rem;
}

.lang-toggle__bg,
.lang-toggle__en { opacity: 0.4; transition: opacity 200ms ease; }
.lang-toggle__bg.is-active,
.lang-toggle__en.is-active { opacity: 1; }
.lang-toggle__sep { opacity: 0.5; }

/* ── Header CTA — solid dark pill, same visual language as the hero primary.
   Scoped to .site-header so the global .btn-magnetic elsewhere is untouched. */
.site-header .btn-magnetic {
  padding: 0.6rem 1.3rem;
  border: 1px solid var(--dark);
  border-radius: 100px;
  background: var(--dark);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  box-shadow: none;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.site-header .btn-magnetic:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  /* the base :hover fills pink — without this the dark border stayed put and
     read as a ring around it */
  border-color: transparent;
}

/* ─────────────────────────────  HERO  ───────────────────────────── */

.hero {
  position: relative;
  /* JS sets --hero-h once video duration is known. Default keeps the
     section usable before JS runs. */
  height: var(--hero-h, 400vh);
  background: #000;
  margin: 0;            /* no gap before the next section */
}

.hero__sticky {
  position: sticky;
  top: var(--nav-h, 0px);
  height: calc(100vh - var(--nav-h, 0px));
  width: 100%;
  overflow: hidden;
  will-change: transform;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 700ms ease;
  background: #000;
  will-change: opacity;
}

.hero__video.is-ready { opacity: 1; }

/* ── Phase 1 & 3 shared base ── */

.hero__phase1,
.hero__phase3 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── Phase 1: initial headline ── */

.hero__phase1 { opacity: 1; }

.hero__phase1-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.60) 0%,
      rgba(0,0,0,0.28) 38%,
      rgba(0,0,0,0.28) 62%,
      rgba(0,0,0,0.60) 100%);
  pointer-events: none;
}

.hero__phase1-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(1.5rem, 6vw, 6rem);
  pointer-events: auto;
}

.hero__eyebrow {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pink);
}

.hero__headline {
  margin: 0 0 2.8rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 7.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #fff;
  max-width: 18ch;
  text-wrap: balance;
}

.hero__phase1-btns {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Phase 3: final stagger headline ── */

.hero__phase3 { opacity: 0; }

.hero__phase3-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.42) 40%,
    rgba(0,0,0,0.18) 70%,
    transparent 100%
  );
  pointer-events: none;
}

.hero__phase3-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(1.5rem, 6vw, 6rem);
  gap: 2rem;
}

.hero__phase3--visible .hero__phase3-content { pointer-events: auto; }

.hero__final-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5.4vw, 5.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 22ch;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  gap: 0.08em;
}

.hero__final-line {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   700ms ease,
    transform 900ms cubic-bezier(0.2,0.85,0.28,1);
}

.hero__final-line:nth-child(2) { transition-delay: 200ms; }

.hero__phase3--visible .hero__final-line {
  opacity: 1;
  transform: translateY(0);
}

.hero__phase3-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   600ms ease 500ms,
    transform 700ms cubic-bezier(0.2,0.85,0.28,1) 500ms;
}

.hero__phase3--visible .hero__phase3-actions {
  opacity: 1;
  transform: translateY(0);
}

.hero__continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 250ms ease, gap 300ms ease;
}

.hero__continue-btn:hover { color: #fff; gap: 0.65rem; }
.hero__continue-btn svg { transition: transform 350ms cubic-bezier(0.2,0.85,0.28,1); }
.hero__continue-btn:hover svg { transform: translateY(4px); }

/* ──────────────────────────  REDUCED MOTION  ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: calc(100vh - var(--nav-h, 0px)); }
  .hero__video { transition: opacity 200ms ease; }
  .site-header { transition: none; }
  .hero__phase1 { opacity: 1 !important; }
  .hero__phase3 { opacity: 1 !important; }
  .hero__final-line { opacity: 1 !important; transform: none !important; transition: none; }
  .hero__phase3-actions { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ──────────────────────────  RESPONSIVE  ───────────────────────── */

@media (max-width: 720px) {
  :root {
    --header-pad-y: 1.1rem;
    --header-pad-x: 1.2rem;
  }
  .nav { gap: 1.1rem; }
  /* Mobile menu is intentionally deferred — hide the dropdown nav so nothing
     overflows; the CTA + language toggle stay reachable. (Full mobile nav TBD.) */
  .nav__list { display: none; }
  .logo__sub { display: none; }
}

/* ─────────────────────────────  ENGINE  ─────────────────────────────
   Lines connect ADJACENT CARDS (the cycle), not the hub.
   Spokes = thin decorative lines hub → cards (no arrows).
   Sequence: hub pop → cards fly out → spokes → lines draw → pills.
───────────────────────────────────────────────────────────────────── */

.engine {
  background: var(--dark);
  color: var(--cream);
  padding: clamp(1.6rem, 3.2vw, 2.8rem) clamp(1.5rem, 6vw, 4rem);
}

.engine__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.engine__header {
  text-align: center;
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
}

.engine__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--cream);
}

.engine__subtitle {
  margin: 0;
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--grey);
}

/* ── Diagram grid ── */

.engine__diagram {
  position: relative;
  display: grid;
  grid-template-areas:
    "tl . tr"
    ".  hub ."
    "bl . br";
  grid-template-columns: 1fr clamp(110px, 12vw, 150px) 1fr;
  grid-template-rows: auto clamp(110px, 12vw, 150px) auto;
  gap: clamp(1rem, 2.2vw, 1.8rem) clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.engine__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

/* ── Cards: fly out from hub position ── */

.engine__card {
  background: var(--cream);
  color: var(--dark);
  border-radius: 10px;
  border-top: 2px solid var(--pink);
  padding: clamp(0.9rem, 1.8vw, 1.3rem);
  z-index: 1;
  opacity: 0;
  transform: translate(var(--slide-x, 0%), var(--slide-y, 0%)) scale(0.72);
  transition:
    opacity   650ms ease var(--delay, 0ms),
    transform 750ms cubic-bezier(0.2, 0.85, 0.28, 1) var(--delay, 0ms);
}

/* Each card starts displaced TOWARD the hub, then flies to its corner */
.engine__card[data-pos="tl"] { grid-area: tl; --slide-x:  52%; --slide-y:  62%; --delay: 300ms; }
.engine__card[data-pos="tr"] { grid-area: tr; --slide-x: -52%; --slide-y:  62%; --delay: 450ms; }
.engine__card[data-pos="br"] { grid-area: br; --slide-x: -52%; --slide-y: -62%; --delay: 600ms; }
.engine__card[data-pos="bl"] { grid-area: bl; --slide-x:  52%; --slide-y: -62%; --delay: 750ms; }

.engine--visible .engine__card {
  opacity: 1;
  transform: translate(0%, 0%) scale(1);
}

.engine__card-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.82rem, 1.2vw, 1rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--dark);
}

.engine__card-body {
  margin: 0;
  font-size: clamp(0.76rem, 1vw, 0.88rem);
  line-height: 1.5;
  color: var(--grey);
}

/* ── Hub: spring pop from zero ── */

.engine__hub {
  grid-area: hub;
  width:  clamp(110px, 12vw, 150px);
  height: clamp(110px, 12vw, 150px);
  border-radius: 50%;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  z-index: 2;
  justify-self: center;
  align-self: center;
  opacity: 0;
  transform: scale(0);
  transition:
    opacity   300ms ease,
    transform 750ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.engine--visible .engine__hub {
  opacity: 1;
  transform: scale(1);
  animation: hub-pulse 3s ease 1000ms infinite;
}

.engine__hub-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.58rem, 0.82vw, 0.7rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.55;
}

@keyframes hub-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,81,171,.5), 0 0 18px rgba(255,81,171,.18); }
  55%       { box-shadow: 0 0 0 28px rgba(255,81,171,0), 0 0 36px rgba(255,81,171,.06); }
}

/* ── SVG spokes (hub → cards, dotted, decorative) ── */

.engine__spoke {
  stroke: rgba(255, 81, 171, 0.22);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  fill: none;
  opacity: 0;
  transition: opacity 600ms ease 1100ms;
}
.engine--visible .engine__spoke { opacity: 1; }

/* ── SVG cycle arcs (quadratic bezier paths) ── */

.engine__line {
  stroke: var(--pink);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Pill labels ── */

.engine__label-bg {
  fill: var(--cream);
  /* Subtle shadow so pill reads clearly on dark background */
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.35));
}

.engine__label-text {
  font-family: "Montserrat", sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  fill: var(--dark);
}

.engine__labels {
  opacity: 0;
  /* JS adds transition + opacity:1 at the right moment */
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  .engine__card  { opacity: 1; transform: translate(0%,0%) scale(1); transition: none; }
  .engine__hub   { opacity: 1; transform: scale(1); transition: none; animation: none !important; }
  .engine__spoke { opacity: 1; transition: none; }
  .engine__line  { stroke-dashoffset: 0 !important; transition: none; }
  .engine__labels { opacity: 1; }
}

/* ── Mobile: vertical stack with simple flow ── */

@media (max-width: 768px) {
  .engine__diagram { display: flex; flex-direction: column; gap: 1.2rem; }
  .engine__hub     { align-self: center; order: -1; margin-bottom: 0.4rem; }
  .engine__svg     { display: none; }

  /* Override fly-out: just fade in vertically on mobile */
  .engine__card {
    transform: translateY(16px) scale(1) !important;
    --slide-x: 0% !important;
    --slide-y: 0% !important;
  }
  .engine--visible .engine__card { transform: translateY(0) scale(1) !important; }

  .engine--visible .engine__hub {
    opacity: 1;
    transform: scale(1);
    animation: hub-pulse 3s ease infinite;
  }
}

/* ──────────────────────────  SECTION KICKER  ─────────────────────────── */

.section-kicker {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
}

/* ─────────────────────────────  RESULTS  ─────────────────────────────── */

.results {
  background: var(--pink);
  color: var(--cream);
  padding: clamp(1.6rem, 3.2vw, 2.6rem) clamp(1.5rem, 6vw, 4rem);
}

.results__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Kicker is normally pink — on the pink band flip it to white (scoped so other
   sections that use .section-kicker keep the pink accent). */
.results .section-kicker {
  color: var(--cream);
  opacity: 0.85;
}

.results__title {
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.8rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--cream);
}

.results__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.results__stat {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   600ms ease var(--stat-delay, 0ms),
    transform 700ms cubic-bezier(0.2, 0.85, 0.28, 1) var(--stat-delay, 0ms);
}

.results--visible .results__stat {
  opacity: 1;
  transform: translateY(0);
}

.results__num {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}

.results__prefix,
.results__suffix {
  font-size: 0.62em;
  vertical-align: baseline;
}

.results__label {
  margin: 0;
  font-size: clamp(0.72rem, 1.1vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 244, 240, 0.85);
}

@media (max-width: 640px) {
  .results__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
}

/* ─────────────────────────────  SERVICES  ────────────────────────────── */

.services {
  background: var(--pink);
  color: var(--cream);
  padding: clamp(2.4rem, 4.5vw, 4rem) clamp(1.5rem, 6vw, 4rem);
}

.services__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* Kicker is normally pink — invert to cream on the pink band (scoped). */
.services .section-kicker {
  color: var(--cream);
  opacity: 0.85;
}

.services__title {
  margin: 0 0 clamp(1.4rem, 3vw, 2.4rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--cream);
}

.services__list {
  display: flex;
  flex-direction: column;
}

.services__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.8rem, 3vw, 2.5rem) 0;
  border-top: 1px solid rgba(247, 244, 240, 0.12);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity      600ms ease calc(var(--idx, 0) * 130ms),
    transform    700ms cubic-bezier(0.2, 0.85, 0.28, 1) calc(var(--idx, 0) * 130ms),
    border-color 300ms ease;
}

.services__item:last-child {
  border-bottom: 1px solid rgba(247, 244, 240, 0.12);
}

.services__item:hover { border-top-color: var(--pink); }

.services--visible .services__item {
  opacity: 1;
  transform: translateY(0);
}

.services__item-num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--pink);
  min-width: clamp(3rem, 5vw, 4.5rem);
}

.services__item-body {
  flex: 1;
  padding-top: 0.25em;
}

.services__item-title {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--cream);
}

.services__item-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.services__item-bullets li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-size: clamp(0.82rem, 1.1vw, 0.92rem);
  line-height: 1.6;
  color: var(--grey);
}

.services__item-bullets li::before {
  content: "—";
  color: var(--pink);
  flex-shrink: 0;
  font-size: 0.78em;
}

@media (max-width: 600px) {
  .services__item { flex-direction: column; gap: 0.5rem; }
  .services__item-num { font-size: 1.4rem; min-width: auto; }
}

/* ── Reduced motion overrides ── */

@media (prefers-reduced-motion: reduce) {
  .results__stat { opacity: 1; transform: translateY(0); transition: none; }
  .services__item { opacity: 1; transform: translateY(0); transition: none; }
}

/* ── Services flip cards — 3 cards that flip 3D on hover (desktop) / tap (touch).
   Touch works WITHOUT JS: each card carries tabindex, so a tap focuses it and
   :focus-within triggers the same rotateY as :hover. ── */
.flip-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.flip-card {
  perspective: 1400px;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
}

.flip-card__inner {
  position: relative;
  width: 100%;
  min-height: clamp(180px, 21vw, 230px);
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.2, 0.85, 0.28, 1);
}

.flip-card:hover .flip-card__inner,
.flip-card:focus-within .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 44px rgba(30, 30, 30, 0.14);
}

/* Front (cover) — cream face, dark text, pink icon — pops on the pink band */
.flip-card__front {
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
  background: var(--cream);
  color: var(--dark);
}

.flip-card__icon { color: var(--pink); }

.flip-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Back — dark face, cream text + sub-services (contrasts the pink band) */
.flip-card__back {
  justify-content: center;
  background: var(--dark);
  color: var(--cream);
  transform: rotateY(180deg);
}

.flip-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.flip-card__list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  line-height: 1.3;
  color: var(--cream);
}

.flip-card__list svg { flex-shrink: 0; color: var(--pink); }

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

@media (prefers-reduced-motion: reduce) {
  .flip-card__inner { transition: none; }
}

/* ─────────────────────────────  PORTFOLIO  ─────────────────────────────── */

.portfolio {
  background: var(--dark);
  color: var(--cream);
  padding: clamp(2.4rem, 4.5vw, 4rem) clamp(1.5rem, 6vw, 4rem);
}

.portfolio__inner { max-width: 1100px; margin: 0 auto; }

.portfolio__title {
  margin: 0 0 clamp(1.4rem, 3vw, 2.4rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  /* Narrower grid → smaller portrait videos → the whole section is shorter */
  max-width: 760px;
  margin: 0 auto clamp(1.6rem, 3vw, 2.6rem);
}

/* Entrance: outer card handles translate, inner card handles tilt */
.portfolio__card {
  opacity: 0;
  transform: translateY(var(--card-offset, 70px));
  transition:
    opacity   700ms ease var(--card-delay, 0ms),
    transform 900ms cubic-bezier(0.2, 0.85, 0.28, 1) var(--card-delay, 0ms);
}

.portfolio--visible .portfolio__card {
  opacity: 1;
  transform: translateY(0);
}

/* Tilt target — JS applies perspective rotateX/Y here */
.portfolio__card-tilt {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--dark);
  cursor: pointer;
  transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

.portfolio__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient scrim so label reads cleanly */
.portfolio__card-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 40%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.portfolio__card-tilt:hover::after { opacity: 1; }

/* Label pill — slides up on hover */
.portfolio__label {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(255, 81, 171, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 250ms ease, transform 350ms cubic-bezier(0.2, 0.85, 0.28, 1);
  pointer-events: none;
  z-index: 2;
}

.portfolio__card-tilt:hover .portfolio__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.portfolio__cta-wrap {
  display: flex;
  justify-content: center;
}

/* ────────────────────────────  BTN MAGNETIC  ───────────────────────────── */

.btn-magnetic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.6rem;
  border: 1.5px solid var(--pink);
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition:
    background  280ms ease,
    color       280ms ease,
    box-shadow  280ms ease,
    transform   600ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

.btn-magnetic:hover {
  background: var(--pink);
  color: #fff;
}

.btn-magnetic--glow {
  background: var(--pink);
  color: #fff;
}

.btn-magnetic--glow:hover {
  box-shadow: 0 0 32px rgba(255, 81, 171, 0.6), 0 0 80px rgba(255, 81, 171, 0.2);
}

/* ─────────────────────────────  BRANDS  ─────────────────────────────── */

.brands {
  background: var(--dark);
  padding: clamp(4rem, 8vw, 7rem) 0;
  overflow: hidden;
}

.brands__inner { max-width: 100%; }

.brands__kicker {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.brands__track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.brands__track {
  display: flex;
  width: max-content;
  animation: brands-scroll 26s linear infinite;
}

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

.brands__set {
  display: flex;
  align-items: center;
  gap: clamp(3.5rem, 7vw, 8rem);
  padding-right: clamp(3.5rem, 7vw, 8rem);
}

.brands__logo {
  height: clamp(26px, 3.8vw, 48px);
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  flex-shrink: 0;
  transition: opacity 300ms ease, filter 300ms ease;
}

.brands__logo.is-active {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 16px rgba(255,81,171,0.95));
}

.brands__logo.is-dim { opacity: 0.12; }

/* ─────────────────────────────  CTA  ─────────────────────────────── */

.cta {
  position: relative;
  background: var(--dark);
  overflow: hidden;
  padding: clamp(8rem, 15vw, 15rem) clamp(1.5rem, 6vw, 4rem);
  text-align: center;
}

/* Ambient breathing glow */
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 65%, rgba(255,81,171,0.11) 0%, transparent 70%);
  animation: cta-breathe 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cta-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.18); }
}

/* Cursor-following spotlight */
.cta__glow {
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,81,171,0.2) 0%, rgba(255,81,171,0.07) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: left, top;
  top: 50%;
  left: 50%;
  transition: left 80ms linear, top 80ms linear;
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.cta__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 7.5vw, 8rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--cream);
  text-wrap: balance;
}

.cta__sub {
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--grey);
}

/* ─────────────────────────────  FOOTER  ─────────────────────────────── */

.footer {
  background: #ffffff;
  color: var(--dark);
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 6vw, 4rem) clamp(2rem, 4vw, 3rem);
}

.footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms ease, transform 900ms cubic-bezier(0.2, 0.85, 0.28, 1);
}

.footer--visible .footer__inner {
  opacity: 1;
  transform: translateY(0);
}

.footer__brand {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.footer__wordmark {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

/* Footer logo = two stacked PNGs. The footer is white → show the black logo. */
.footer__logo {
  display: block;
  height: clamp(40px, 5.5vw, 60px);
  width: auto;
}
.footer__logo--white { display: none; }
.footer__logo--black { display: block; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.footer__col-title {
  margin: 0 0 1.3rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dark);
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer__nav a,
.footer__link {
  font-size: 0.87rem;
  font-weight: 400;
  color: var(--grey);
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1.4;
  transition: color 200ms ease;
  display: block;
}

.footer__nav a:hover,
.footer__link:hover { color: var(--pink); }

.footer__col .footer__link { margin-bottom: 0.55rem; }

.footer__socials {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.87rem;
  font-weight: 400;
  color: var(--grey);
  text-decoration: none;
  transition: color 200ms ease;
}

.footer__social:hover { color: var(--pink); }
.footer__social svg { flex-shrink: 0; color: var(--pink); }   /* pink icon accent */

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__copy {
  margin: 0;
  font-size: 0.74rem;
  color: rgba(30, 30, 30, 0.55);
  letter-spacing: 0.04em;
}

.footer__copy em {
  font-style: italic;
  color: var(--pink);
}

/* Footer lang toggle on the white footer */
.lang-toggle--footer { color: var(--dark); }

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .portfolio__grid {
    grid-template-columns: repeat(3, 240px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    /* bleed past section padding on mobile */
    margin-left: calc(-1 * clamp(1.5rem, 6vw, 4rem));
    margin-right: calc(-1 * clamp(1.5rem, 6vw, 4rem));
    padding-left: clamp(1.5rem, 6vw, 4rem);
    padding-right: clamp(1.5rem, 6vw, 4rem);
    gap: 1rem;
  }
  .portfolio__card { scroll-snap-align: start; }
}

@media (max-width: 700px) {
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .footer__cols { grid-template-columns: 1fr; }
  .footer__col:first-child { grid-column: auto; }
}

/* ── New sections reduced motion ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .portfolio__card       { opacity: 1; transform: translateY(0); transition: none; }
  .portfolio__card-tilt  { transition: none; }
  .brands__track         { animation: none; }
  .cta::before           { animation: none; }
  .cta__glow             { display: none; }
  .footer__inner         { opacity: 1; transform: translateY(0); transition: none; }
  .btn-magnetic          { transition: background 280ms ease, color 280ms ease, box-shadow 280ms ease; }
}

/* ──────────────────────  NAV STATUS & BUTTON VARIANTS  ─────────────────── */

/* Pulsing availability dot */
/* Small variant — for nav CTA */
.btn-magnetic--sm {
  padding: 0.52rem 1.25rem;
  font-size: 0.72rem;
}

/* White-outline variant — for hero on dark video */
.btn-magnetic--outline-white {
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.btn-magnetic--outline-white:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.85);
  box-shadow: none;
}

/* ── Mobile overrides ── */

@media (max-width: 720px) {
  /* keep CTA button visible even when the dropdown nav is hidden */
  .nav .btn-magnetic { display: inline-flex !important; }

  .hero__headline {
    font-size: clamp(2.2rem, 10vw, 3.5rem);
  }
  .hero__phase1-btns { flex-direction: column; gap: 0.75rem; }
  .hero__final-headline { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }
}

/* ─────────────────────────  PORTFOLIO PAGE (case studies)  ───────────────────────── */

.portfolio-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--dark);
  color: var(--cream);
  overflow: hidden;
}

.portfolio-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 244, 240, 0.55);
  transition: color 200ms ease;
}
.portfolio-hero__back:hover { color: var(--cream); }
.portfolio-hero__back svg { transition: transform 250ms ease; }
.portfolio-hero__back:hover svg { transform: translateX(-4px); }

/* Readability gradient: solid dark on the left → clear on the right, plus a
   light top/bottom vignette so the header and the marquee edge stay legible. */
.portfolio-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #1E1E1E 0%, rgba(30,30,30,0.94) 28%, rgba(30,30,30,0.6) 52%, rgba(30,30,30,0.22) 76%, rgba(30,30,30,0) 100%),
    linear-gradient(180deg, rgba(30,30,30,0.55) 0%, transparent 22%, transparent 74%, rgba(30,30,30,0.6) 100%);
}

.portfolio-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(7rem, 14vh, 10rem) clamp(1.5rem, 6vw, 4rem) clamp(3rem, 7vh, 5rem);
}

.portfolio-hero__panel { max-width: 620px; }

.portfolio-hero .section-kicker {
  margin: 0 0 1rem;
  color: var(--pink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.portfolio-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 6rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--cream);
  text-wrap: balance;
}

/* Hero title — split into letter spans for a scroll-driven disintegration.
   --p (0→1) is the global scroll progress set by JS; each letter carries its
   own scatter vector (--tx/--ty/--rot) that is multiplied by that progress so
   the letters fly off in different directions and fade as you scroll down. */
.portfolio-hero__title { --p: 0; }

.portfolio-hero__title .ph-word { display: inline-block; white-space: nowrap; }

.portfolio-hero__title .ph-letter {
  display: inline-block;
  transform:
    translate(calc(var(--tx, 0px) * var(--p)), calc(var(--ty, 0px) * var(--p)))
    rotate(calc(var(--rot, 0deg) * var(--p)));
  opacity: calc(1 - var(--p));
  will-change: transform, opacity;
}

.portfolio-hero__sub {
  margin: clamp(1.2rem, 2.5vw, 1.6rem) 0 clamp(2rem, 4vw, 2.6rem);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: rgba(247, 244, 240, 0.72);
  max-width: 42ch;
}

.portfolio-hero__content .case-filter__bar {
  justify-content: flex-start;
  margin: 0;
  max-width: none;
}

/* ── Background video wall — tilted, sliding rows of brand clips ──
   Built by js/portfolio.js into #phone-wall-rotor: each .phone-wall__row is an
   independent marquee (two identical sets → seamless loop). The rotor tilts +
   scales the whole stack to cover the hero; the wall sits dimmed behind the
   scrim, and the scroll choreography fades it out as you move to the grid. */
.phone-wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
  will-change: opacity;
}

.phone-wall__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1600px;
}

.phone-wall__rotor {
  position: absolute;
  inset: -22% -12%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.7rem, 1.4vw, 1.3rem);
  transform: rotate(-8deg) scale(1.18);
  transform-origin: center;
}

.phone-wall__row { overflow: hidden; }

.phone-wall__track {
  display: flex;
  width: max-content;
  gap: clamp(0.7rem, 1.4vw, 1.3rem);
  animation: phone-wall-scroll 70s linear infinite;
}
/* Alternate speeds + directions per row for a richer, less mechanical wall */
.phone-wall__row:nth-child(2) .phone-wall__track { animation-duration: 92s; animation-direction: reverse; }
.phone-wall__row:nth-child(3) .phone-wall__track { animation-duration: 58s; }

.phone-wall:hover .phone-wall__track { animation-play-state: paused; }

@keyframes phone-wall-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* one set → seamless */
}

.phone-wall__set {
  display: flex;
  gap: clamp(0.7rem, 1.4vw, 1.3rem);
  padding-right: clamp(0.7rem, 1.4vw, 1.3rem);
  flex-shrink: 0;
}

.phone-wall__phone {
  position: relative;
  flex-shrink: 0;
  height: clamp(200px, 30vh, 300px);
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 2px solid rgba(247, 244, 240, 0.1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.phone-wall__phone video,
.phone-wall__phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tablet — keep the full-bleed wall, ease the tilt and scale up to cover */
@media (max-width: 900px) {
  .phone-wall__rotor { transform: rotate(-6deg) scale(1.2); }
}

/* Mobile — lighter wall (JS builds fewer, larger tiles over 2 rows) and a
   near-solid scrim so the text reads clearly over it. */
@media (max-width: 768px) {
  .portfolio-hero__scrim {
    background: linear-gradient(180deg, rgba(30,30,30,0.78) 0%, rgba(30,30,30,0.62) 45%, rgba(30,30,30,0.85) 100%);
  }
  .phone-wall { opacity: 0.42; }
  .phone-wall__rotor { inset: -16% -10%; transform: rotate(-5deg) scale(1.25); }
  .phone-wall__phone { height: clamp(160px, 26vh, 240px); }
}

/* ── Logo marquee ── */

.portfolio-marquee {
  background: var(--pink);
  padding: clamp(1.5rem, 3.2vw, 2.4rem) 0;
  overflow: hidden;
}

.portfolio-marquee__wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.portfolio-marquee__track {
  display: flex;
  width: max-content;
  animation: portfolio-marquee-scroll 48s linear infinite;
}

.portfolio-marquee__wrap:hover .portfolio-marquee__track {
  animation-play-state: paused;
}

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

.portfolio-marquee__set {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
  padding-right: clamp(3rem, 6vw, 6rem);
  flex-shrink: 0;
}

.portfolio-marquee__logo {
  height: clamp(30px, 3.4vw, 44px);
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: brightness(0) invert(1);   /* solid white on the pink band */
  opacity: 1;
  flex-shrink: 0;
}

/* index.html "Trusted by" band — make every logo the same large size as the
   biggest one (noteo). ONE height-driven rule, width:auto so nothing deforms,
   and max-width:none removes the cap that was shrinking the wider logos.
   Scoped to --trusted so the portfolio.html marquee is untouched. */
/* ── Trusted-by strip — ONE shared component, used verbatim on every page.
   White band, 17 brand logos in identical 44px slots, grayscale + 0.55 rest,
   colour on hover (pointer devices only). Per-logo classes fine-tune optical
   weight. The wrap's padding-block IS the clip room (overflow hidden clips at
   the padding box), so height stays content-driven. ── */
.portfolio-marquee--trusted {
  background: #FFFFFF;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0;
}
.portfolio-marquee--trusted .portfolio-marquee__wrap {
  padding-block: clamp(26px, 16px + 2vw, 40px);   /* 26px mobile → 40px ≥1200px */
}
.portfolio-marquee--trusted .portfolio-marquee__logo {
  height: 44px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  flex-shrink: 0;
  transition: filter 300ms ease, opacity 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .portfolio-marquee--trusted .portfolio-marquee__logo:hover { filter: none; opacity: 1; }
}
/* Optical balance: bold wide wordmarks pulled back, compact seals lifted. */
.portfolio-marquee--trusted .logo--noteo      { transform: scale(0.9); }
.portfolio-marquee--trusted .logo--shimani    { transform: scale(0.9); }
.portfolio-marquee--trusted .logo--ancestral  { transform: scale(1.1); }
.portfolio-marquee--trusted .logo--bilkova    { transform: scale(1.1); }
.portfolio-marquee--trusted .logo--zlatna     { transform: scale(1.1); }
.portfolio-marquee--trusted .logo--dentaworks { transform: scale(0.95); }
.portfolio-marquee--trusted .logo--revlon     { transform: scale(0.95); }
.portfolio-marquee--trusted .logo--aadhira    { transform: scale(1.05); }
.portfolio-marquee--trusted .logo--kalianto   { filter: grayscale(1) brightness(0.75); }   /* pale caps — match the band */
/* Skintime: monochrome near-black SVG (#12100b); lift its resting value to the
   band mean, hover still reveals its true black (that IS its hover state). */
.portfolio-marquee--trusted .logo--skintime {
  transform: scale(1.05);
  filter: grayscale(1) brightness(6.2);
}
.portfolio-marquee--trusted .portfolio-marquee__set {
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-right: clamp(2rem, 4vw, 3.5rem);   /* seam spacing = one gap → seamless -50% loop */
  align-items: center;
}

/* ── Filter bar ── */

.case-filter__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  max-width: 900px;
  margin: 0 auto;
}

.case-filter__btn.is-active {
  background: var(--pink);
  color: #fff;
}

/* ── Case grid — one card per brand ── */

.case-grid-section {
  background: var(--cream);
  padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 6vw, 4rem);
}

.case-empty {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 7rem) 0;
  text-align: center;
}

.case-empty__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--grey);
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
  max-width: 1060px;
  margin: 0 auto;
}

/* Compact, magnetic card. Position + z-index let a hovered card lift above
   its neighbours; the entrance transform lives here (outer), while hover
   transforms live on .case-card__btn (inner) so the two never fight. */
.case-card {
  position: relative;
  opacity: 0;
  transform: translateY(42px) scale(0.95);
  transition: opacity 700ms ease, transform 800ms cubic-bezier(0.2, 0.85, 0.28, 1);
  will-change: opacity, transform;
}

/* Staggered scroll reveal — JS adds is-revealed one wave at a time. */
.case-card.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hovered card sits forward of the dimmed neighbours */
.case-card.is-focused { z-index: 5; }

/* filter show/hide — fade + scale, then collapse out of flow */
.case-card.is-hidden {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

.case-card.is-collapsed {
  display: none;
}

.case-card__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--dark);
  box-shadow: 0 10px 30px rgba(30, 30, 30, 0.07);
  transition:
    transform  340ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 340ms cubic-bezier(0.23, 1, 0.32, 1),
    filter     340ms ease,
    opacity    340ms ease;
}

.case-card__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 9, 0.5);
  transition: background 400ms ease;
  pointer-events: none;
  z-index: 1;
}

.case-card__btn:hover,
.case-card__btn:focus-visible {
  transform: scale(1.06) translateY(-6px);
  box-shadow: 0 30px 60px rgba(30, 30, 30, 0.24), 0 0 0 1px rgba(255, 81, 171, 0.14);
  outline: none;
}

/* Magnetic grid — when any card is hovered, the rest discreetly recede:
   slightly smaller, dimmer and softly blurred so the focused one stands out. */
.case-grid.is-hovering .case-card:not(.is-focused) .case-card__btn {
  transform: scale(0.965);
  opacity: 0.5;
  filter: blur(1.5px);
}

.case-card__cover,
.case-card__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 650ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms ease;
}

.case-card__cover {
  filter: blur(4px);
  transform: scale(1.08);
}

.case-card__preview {
  opacity: 0;
  transform: scale(1);
}

.case-card__btn.is-previewing .case-card__preview {
  opacity: 1;
}

.case-card__btn:hover .case-card__cover,
.case-card__btn:focus-visible .case-card__cover {
  transform: scale(1.14);
}

.case-card__btn:hover .case-card__preview,
.case-card__btn:focus-visible .case-card__preview {
  transform: scale(1.05);
}

.case-card__logo-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.case-card__btn:hover .case-card__logo-wrap,
.case-card__btn:focus-visible .case-card__logo-wrap {
  opacity: 0;
}

.case-card__logo {
  max-width: 65%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* ── Case modal — brand case study panel ── */

.case-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.case-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms ease, visibility 0s linear 0s;
}

.case-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.case-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--cream);
  border-radius: 26px;
  max-width: 920px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(2rem, 4vw, 3.2rem);
  transform: translateY(28px) scale(0.97);
  transition: transform 380ms cubic-bezier(0.2, 0.85, 0.28, 1);
}

.case-modal.is-open .case-modal__panel {
  transform: translateY(0) scale(1);
}

.case-modal__close {
  position: absolute;
  top: clamp(1rem, 2vw, 1.6rem);
  right: clamp(1rem, 2vw, 1.6rem);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(30, 30, 30, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.case-modal__close:hover {
  background: rgba(255, 81, 171, 0.12);
  color: var(--pink);
  transform: rotate(90deg);
}

.case-modal__head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(1.2rem, 2.5vw, 1.6rem);
}

.case-modal__logo {
  height: clamp(44px, 6vw, 64px);
  max-width: 70%;
  width: auto;
  object-fit: contain;
}

.case-modal__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.case-modal__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.2rem, 2.5vw, 1.6rem);
}

.case-modal__pill {
  display: inline-flex;
  align-items: center;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.42rem 1rem;
  border-radius: 100px;
}

.case-modal__desc {
  margin: 0 0 clamp(1.4rem, 3vw, 1.8rem);
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  line-height: 1.7;
  color: var(--grey);
  max-width: 60ch;
}

.case-modal__results {
  margin: 0 0 clamp(1.6rem, 3vw, 2rem);
}

.case-modal__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1rem);
  margin-bottom: clamp(1.6rem, 3vw, 2rem);
}

.case-modal__thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--dark);
  cursor: pointer;
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
  transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1);
}

.case-modal__thumb:hover { transform: translateY(-4px); }

.case-modal__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-modal__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 45%);
  pointer-events: none;
}

.case-modal__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(34px, 5vw, 46px);
  height: clamp(34px, 5vw, 46px);
  border-radius: 50%;
  background: rgba(255, 81, 171, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1), background 220ms ease;
}

.case-modal__play svg { transform: translateX(1px); }

.case-modal__thumb:hover .case-modal__play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--pink);
}

.case-modal__socials {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.case-modal__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(30, 30, 30, 0.16);
  color: var(--dark);
  transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
}

.case-modal__social:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(255, 81, 171, 0.08);
}

body.case-modal-open {
  overflow: hidden;
}

/* ── Video lightbox — full-screen brand video viewer ── */

.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.video-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms ease, visibility 0s linear 0s;
}

.video-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 9, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.video-lightbox__stage {
  position: relative;
  z-index: 1;
  max-height: 85vh;
  aspect-ratio: 9 / 16;
  width: auto;
  transform: scale(0.94);
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.2, 0.85, 0.28, 1), opacity 320ms ease;
}

.video-lightbox.is-open .video-lightbox__stage {
  transform: scale(1);
  opacity: 1;
}

.video-lightbox__video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 85vh;
  border-radius: 18px;
  background: var(--dark);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  object-fit: contain;
}

.video-lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.video-lightbox__close:hover {
  background: var(--pink);
  color: #fff;
  transform: rotate(90deg);
}

.video-lightbox__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}

.video-lightbox__arrow:hover {
  background: var(--pink);
  color: #fff;
}

.video-lightbox__arrow--prev { left: clamp(0.6rem, 3vw, 3rem); }
.video-lightbox__arrow--next { right: clamp(0.6rem, 3vw, 3rem); }

.video-lightbox__arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}

.video-lightbox__counter {
  position: absolute;
  bottom: clamp(1rem, 3vw, 1.6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
}

body.video-lightbox-open {
  overflow: hidden;
}

/* ── Responsive ── */

@media (max-width: 980px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-card__btn { aspect-ratio: 4 / 5; }
}

@media (max-width: 560px) {
  .case-modal__gallery { grid-template-columns: repeat(2, 1fr); }
  .video-lightbox__arrow { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-card,
  .case-card__btn,
  .case-card__cover,
  .case-card__preview,
  .case-card__logo-wrap,
  .case-modal,
  .case-modal__panel,
  .case-modal__thumb,
  .video-lightbox,
  .video-lightbox__stage {
    transition: none;
  }
  .case-card { opacity: 1; transform: none; }
  .case-card__btn:hover { transform: none; }
  .case-grid.is-hovering .case-card:not(.is-focused) .case-card__btn {
    transform: none; opacity: 1; filter: none;
  }
  .case-card__btn:hover .case-card__cover,
  .case-card__btn:hover .case-card__preview { transform: none; }
  .case-card__btn:hover .case-card__logo-wrap { opacity: 1; }
  .case-modal__thumb:hover { transform: none; }
  .portfolio-hero__spark,
  .portfolio-marquee__track,
  .phone-wall__track {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BOOKING — multi-step "request a brief" form, camera / film-set aesthetic
   Injected before the footer on every page by js/booking.js.
   ═══════════════════════════════════════════════════════════════════════ */

.booking {
  position: relative;
  background: var(--cream);
  color: var(--dark);
  padding: clamp(1.6rem, 3.2vw, 2.8rem) clamp(1.25rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}

/* Breathing ambient pink glow */
.booking__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 22% 18%, rgba(255, 81, 171, 0.16) 0%, transparent 62%),
    radial-gradient(ellipse 55% 60% at 85% 88%, rgba(255, 81, 171, 0.10) 0%, transparent 65%);
  animation: booking-breathe 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes booking-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* Viewfinder corner brackets */
.booking__corner {
  position: absolute;
  width: clamp(22px, 3vw, 40px);
  height: clamp(22px, 3vw, 40px);
  border: 2px solid rgba(255, 81, 171, 0.55);
  z-index: 2;
  pointer-events: none;
}
.booking__corner--tl { top: clamp(1rem, 3vw, 2.2rem); left: clamp(1rem, 3vw, 2.2rem);  border-right: 0; border-bottom: 0; }
.booking__corner--tr { top: clamp(1rem, 3vw, 2.2rem); right: clamp(1rem, 3vw, 2.2rem); border-left: 0;  border-bottom: 0; }
.booking__corner--bl { bottom: clamp(1rem, 3vw, 2.2rem); left: clamp(1rem, 3vw, 2.2rem);  border-right: 0; border-top: 0; }
.booking__corner--br { bottom: clamp(1rem, 3vw, 2.2rem); right: clamp(1rem, 3vw, 2.2rem); border-left: 0;  border-top: 0; }

.booking__inner {
  position: relative;
  z-index: 1;
  /* Single, focused full-width stage (live brief panel removed). Centered with a
     sensible reading width so inputs don't stretch awkwardly wide. */
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
  /* scroll reveal */
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 800ms ease, transform 900ms cubic-bezier(0.2, 0.85, 0.28, 1);
}
.booking--visible .booking__inner { opacity: 1; transform: translateY(0); }

/* ── Camera top bar ── */
.booking__topbar {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  flex-wrap: wrap;
  margin-bottom: clamp(1rem, 2.2vw, 1.6rem);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.booking__rec {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  color: var(--cream);
}
.booking__rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff2d2d;
  box-shadow: 0 0 10px rgba(255, 45, 45, 0.9);
  animation: booking-blink 1.4s steps(1, end) infinite;
}
@keyframes booking-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.18; } }

.booking__timecode {
  font-variant-numeric: tabular-nums;
  color: rgba(247, 244, 240, 0.55);
  font-weight: 600;
  letter-spacing: 0.12em;
}

.booking__stepcount {
  margin-left: auto;
  color: var(--pink);
  font-weight: 700;
}

/* Progress bar */
.booking__progress {
  position: relative;
  height: 4px;
  width: 100%;
  border-radius: 100px;
  background: rgba(247, 244, 240, 0.12);
  overflow: hidden;
  margin-bottom: clamp(1.2rem, 2.8vw, 2rem);
}
.booking__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 11%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--pink), #ff8ac8);
  box-shadow: 0 0 14px rgba(255, 81, 171, 0.6);
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Steps stage ── */
.booking__stage { position: relative; min-height: 170px; }

.booking__step { display: none; }
.booking__step.is-active {
  display: block;
  animation: booking-step-in 520ms cubic-bezier(0.2, 0.85, 0.28, 1) both;
}
.booking__step.is-active[data-dir="back"] { animation-name: booking-step-in-back; }

@keyframes booking-step-in {
  from { opacity: 0; transform: translateX(34px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes booking-step-in-back {
  from { opacity: 0; transform: translateX(-34px); }
  to   { opacity: 1; transform: translateX(0); }
}

.booking__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 81, 171, 0.85);
  font-weight: 600;
  margin: 0 0 0.7rem;
}
.booking__kicker::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pink);
}
.booking__q {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--cream);
}
.booking__hint {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  color: rgba(247, 244, 240, 0.55);
  max-width: 52ch;
}

/* Pills (multi & single select) */
.booking__pills { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.booking__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;          /* long multi-select labels wrap instead of overflowing */
  text-align: left;
  padding: 0.7rem 1.25rem;
  border: 1.5px solid rgba(247, 244, 240, 0.22);
  border-radius: 100px;
  background: rgba(247, 244, 240, 0.03);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 280ms ease, background 280ms ease, color 280ms ease, transform 280ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 280ms ease;
}
.booking__pill:hover { border-color: var(--pink); transform: translateY(-2px); }
.booking__pill::before {
  content: '';
  width: 8px; height: 8px;
  flex: 0 0 auto;           /* keep the dot round next to wrapped multi-line labels */
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(247, 244, 240, 0.4);
  transition: background 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.booking__pill.is-selected {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  box-shadow: 0 10px 26px rgba(255, 81, 171, 0.32);
}
.booking__pill.is-selected::before { background: #fff; border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.8); }

/* Sub-service groups (step 2) */
.booking__group { margin-bottom: 1.3rem; }
.booking__group-title {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 244, 240, 0.5);
  font-weight: 700;
  margin: 0 0 0.7rem;
}
.booking__group-empty {
  font-size: 0.9rem;
  color: rgba(247, 244, 240, 0.45);
  font-style: italic;
}

/* Text fields */
.booking__field { margin-bottom: 1.1rem; }

/* "Other" free-text reveal under a multi-select pill row */
.booking__other { margin-top: 0.9rem; }

/* Checkbox row (e.g. "We don't have any yet") */
.booking__check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  cursor: pointer;
  user-select: none;
}
.booking__check-box {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--pink);
  cursor: pointer;
}
.booking__check-label {
  font-size: 0.9rem;
  color: rgba(247, 244, 240, 0.8);
}

.booking__label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(247, 244, 240, 0.7);
  margin-bottom: 0.55rem;
}
.booking__label .booking__req { color: var(--pink); }
.booking__label .booking__opt { color: rgba(247, 244, 240, 0.4); font-weight: 600; text-transform: none; letter-spacing: 0; }

.booking__input,
.booking__textarea {
  width: 100%;
  padding: 0.85rem 1.05rem;
  background: rgba(247, 244, 240, 0.04);
  border: 1.5px solid rgba(247, 244, 240, 0.16);
  border-radius: 14px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 260ms ease, background 260ms ease, box-shadow 260ms ease;
}
.booking__textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.booking__input::placeholder,
.booking__textarea::placeholder { color: rgba(247, 244, 240, 0.32); }
.booking__input:focus,
.booking__textarea:focus {
  outline: none;
  border-color: var(--pink);
  background: rgba(255, 81, 171, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 81, 171, 0.14);
}
.booking__input.has-error,
.booking__textarea.has-error { border-color: #ff5470; box-shadow: 0 0 0 3px rgba(255, 84, 112, 0.16); }

.booking__error {
  display: none;
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  color: #ff7d92;
  font-weight: 600;
}
.booking__error.is-shown { display: block; }

/* Nav */
.booking__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.1rem, 2.5vw, 1.7rem);
}
/* Honour the hidden attribute (the display:flex above otherwise overrides it) —
   the confirmation/recap view sets nav[hidden] so no submit button shows there. */
.booking__nav[hidden] { display: none; }
.booking__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 244, 240, 0.6);
  transition: color 220ms ease, transform 220ms ease;
}
.booking__back:hover { color: var(--cream); transform: translateX(-3px); }
.booking__back[hidden] { visibility: hidden; }

/* ── Live brief panel ── */
.booking__brief {
  position: sticky;
  top: clamp(5rem, 10vw, 7rem);
  border: 1.5px dashed rgba(255, 81, 171, 0.55);
  border-radius: 20px;
  padding: clamp(1.3rem, 2.5vw, 1.8rem);
  background: rgba(255, 81, 171, 0.04);
  transition:
    transform    450ms cubic-bezier(0.2, 0.85, 0.28, 1),
    border-color 300ms ease,
    box-shadow   450ms ease;
}

/* Soft pink glow behind the panel — gently breathes on its own */
.booking__brief::before {
  content: '';
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 26px;
  background: radial-gradient(60% 65% at 50% 25%, rgba(255, 81, 171, 0.5) 0%, rgba(255, 81, 171, 0) 70%);
  filter: blur(22px);
  opacity: 0.6;
  pointer-events: none;
  animation: brief-glow 5s ease-in-out infinite;
  transition: opacity 450ms ease;
}

@keyframes brief-glow {
  0%, 100% { opacity: 0.45; transform: scale(0.97); }
  50%      { opacity: 0.85; transform: scale(1.05); }
}

/* Lift + intensify on hover for a livelier, modern feel */
.booking__brief:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: var(--pink);
  border-style: solid;
  box-shadow: 0 24px 60px rgba(255, 81, 171, 0.3);
}
.booking__brief:hover::before { opacity: 1; }
.booking__brief-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}
.booking__brief-head::before {
  content: '';
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--pink);
  box-shadow: 0 0 10px rgba(255, 81, 171, 0.8);
}
.booking__brief-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(247, 244, 240, 0.08);
}
.booking__brief-row:first-of-type { border-top: 0; }
.booking__brief-key {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 244, 240, 0.45);
  font-weight: 700;
}
.booking__brief-val {
  font-size: 0.9rem;
  color: var(--cream);
  font-weight: 600;
  line-height: 1.45;
  word-break: break-word;
}
.booking__brief-val.is-empty { color: rgba(247, 244, 240, 0.3); font-weight: 400; }
.booking__brief-row.just-filled .booking__brief-val { animation: booking-flash 600ms ease; }
@keyframes booking-flash {
  0% { color: var(--pink); }
  100% { color: var(--cream); }
}

/* ── Final summary "reward": the completed brief as a premium document card ── */
.booking__brief-doc {
  margin-top: clamp(1.1rem, 2.6vw, 1.7rem);
  padding: clamp(1.1rem, 2.8vw, 1.8rem) clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(255, 81, 171, 0.28);
  border-radius: 14px;
  background: rgba(255, 81, 171, 0.045);
}
.booking__brief-doc .booking__brief-head { margin: 0 0 0.4rem; }

/* ── Success state ── */
.booking__success {
  display: none;
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) 1rem;
}
.booking.is-sent .booking__form,
.booking.is-sent .booking__progress,
.booking.is-sent .booking__stage { display: none; }
.booking.is-sent .booking__success { display: block; animation: booking-step-in 600ms ease both; }
.booking__success-dot {
  display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 16px rgba(255, 81, 171, 0.8);
  margin-right: 0.6rem;
  vertical-align: middle;
}
.booking__success-title {
  display: inline;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  color: var(--cream);
}
.booking__success-sub {
  margin: 1.2rem auto 0;
  max-width: 44ch;
  color: rgba(247, 244, 240, 0.6);
  font-size: 0.98rem;
}

/* ── Light (cream) theme overrides ──
   The booking block is authored for a dark background; on the cream band we
   re-colour text, fields and borders to dark-on-light. Pink/red accents
   (rec dot, progress fill, selected pills, corners) stay as-is. */
.booking__rec { color: var(--dark); }
.booking__timecode { color: rgba(30, 30, 30, 0.55); }
.booking__q { color: var(--dark); }
.booking__hint { color: rgba(30, 30, 30, 0.6); }
.booking__progress { background: rgba(30, 30, 30, 0.12); }
.booking__group-title { color: rgba(30, 30, 30, 0.5); }
.booking__group-empty { color: rgba(30, 30, 30, 0.45); }

.booking__label { color: rgba(30, 30, 30, 0.72); }
.booking__check-label { color: rgba(30, 30, 30, 0.78); }
.booking__label .booking__opt { color: rgba(30, 30, 30, 0.4); }

.booking__pill {
  border-color: rgba(30, 30, 30, 0.2);
  background: rgba(30, 30, 30, 0.03);
  color: var(--dark);
}
.booking__pill::before { border-color: rgba(30, 30, 30, 0.35); }

.booking__input,
.booking__textarea {
  background: rgba(30, 30, 30, 0.03);
  border-color: rgba(30, 30, 30, 0.16);
  color: var(--dark);
}
.booking__input::placeholder,
.booking__textarea::placeholder { color: rgba(30, 30, 30, 0.4); }

.booking__back { color: rgba(30, 30, 30, 0.6); }
.booking__back:hover { color: var(--dark); }

/* Live brief panel */
.booking__brief { background: rgba(255, 81, 171, 0.05); }
.booking__brief-head { color: var(--dark); }
.booking__brief-row { border-top-color: rgba(30, 30, 30, 0.1); }
.booking__brief-key { color: rgba(30, 30, 30, 0.5); }
.booking__brief-val { color: var(--dark); }
.booking__brief-val.is-empty { color: rgba(30, 30, 30, 0.32); }
.booking__brief-row.just-filled .booking__brief-val { animation: none; }

/* Success state */
.booking__success-title { color: var(--dark); }
.booking__success-sub { color: rgba(30, 30, 30, 0.6); }

/* ════════════════════════════════════════════════════════════════════════
   ULTRA-MINIMAL EDITORIAL RESTYLE (cream/luxury look)
   Plain white section, underline-only fields, outline buttons, quiet chips.
   Pink stays only on the studio accents (counter + progress fill) and a few
   hairline cues. Scoped strictly to .booking — global .btn-magnetic untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* 1 — plain white section + barely-there ambient glow + more breathing room */
.booking {
  background: #ffffff;
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
.booking__glow {
  background:
    radial-gradient(ellipse 60% 50% at 22% 18%, rgba(255, 81, 171, 0.05) 0%, transparent 62%),
    radial-gradient(ellipse 55% 60% at 85% 88%, rgba(255, 81, 171, 0.035) 0%, transparent 65%);
}

/* 5 — studio accents stay pink — now the only strong pink in the section
   (REC dot, REC label, timer, step counter, progress fill). */
.booking__rec { color: var(--pink); }
.booking__rec-dot {
  background: var(--pink);
  box-shadow: 0 0 10px rgba(255, 81, 171, 0.7);
}
.booking__timecode { color: rgba(255, 81, 171, 0.65); }
/* (.booking__stepcount and .booking__progress-fill are already pink) */

/* 6 — corner brackets: hairline + low opacity (subtle editorial frame) */
.booking__corner {
  border-width: 1px;
  border-color: rgba(255, 81, 171, 0.22);
  width: clamp(16px, 2.4vw, 30px);
  height: clamp(16px, 2.4vw, 30px);
}

/* 7 — slightly smaller heading, quieter per-step kicker (pink reserved for studio) */
.booking__q { font-size: clamp(1.2rem, 2.4vw, 1.7rem); }
.booking__kicker { color: rgba(30, 30, 30, 0.4); }
.booking__field { margin-bottom: clamp(1.3rem, 2.6vw, 1.8rem); }

/* 2 — text inputs & textareas: underline only, no box, transparent */
.booking__input,
.booking__textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d8d3cc;
  border-radius: 0;
  padding: 0.85rem 0.1rem;
  color: var(--dark);
}
/* Single-line start; js/booking.js grows each textarea to fit its content on
   input, so the underline sits just under the last typed line (all pages). */
.booking__textarea { min-height: 2.2em; resize: none; overflow: hidden; }
.booking__input::placeholder,
.booking__textarea::placeholder { color: #bbb; }
.booking__input:focus,
.booking__textarea:focus {
  outline: none;
  background: transparent;
  border-bottom-color: var(--pink);
  box-shadow: none;
}
.booking__input.has-error,
.booking__textarea.has-error { border-bottom-color: #e0466a; box-shadow: none; }

/* 4 — multi-select chips: quiet outline; selected = pink border + pink text */
.booking__pill {
  background: transparent;
  border: 1px solid rgba(30, 30, 30, 0.18);
  box-shadow: none;
}
.booking__pill:hover { border-color: rgba(30, 30, 30, 0.42); transform: none; }
.booking__pill.is-selected {
  background: transparent;
  border-color: var(--pink);
  color: var(--pink);
  box-shadow: none;
}
.booking__pill.is-selected::before {
  background: var(--pink);
  border-color: var(--pink);
  box-shadow: none;
}

/* 3 — buttons: refined near-black outline pills (replaces the solid pink fill).
   The next/submit button carries the only pink accent: a small "→". */
.booking .booking__next {
  padding: 0.68rem 1.7rem;
  background: transparent;
  border: 1px solid var(--dark);
  border-radius: 100px;
  color: var(--dark);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  box-shadow: none;
}
.booking .booking__next:hover {
  background: rgba(30, 30, 30, 0.05);
  border-color: var(--dark);
  color: var(--dark);
  box-shadow: none;
}
.booking .booking__next::after {
  content: "\2192";          /* → */
  margin-left: 0.6rem;
  color: var(--pink);
  font-weight: 700;
}

/* Summary "brief" document: align to the minimal look (hairline, white) */
.booking__brief-doc {
  border-color: rgba(30, 30, 30, 0.12);
  background: #fff;
}

/* ── Editorial split: form left, full-bleed video panel right ──
   Section padding is dropped so the video reaches the section edges; the form
   carries its own padding instead. Compact, contained height. */
.booking { padding: 0; }
.booking__inner {
  max-width: none;
  width: 100%;
  margin: 0;
  grid-template-columns: 1fr 1fr;       /* ~50/50 split */
  gap: 0;
  align-items: stretch;                 /* video spans the full section height */
  min-height: clamp(420px, 56vh, 560px);/* contained — not a full-screen block */
}

/* Left — form, vertically centred, with breathing room; brackets scope here */
.booking__form-col {
  position: relative;                   /* corner brackets anchor to the form only */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
}
.booking__form-col > *:not(.booking__corner) {
  width: 100%;
  max-width: 460px;                     /* keep the form a comfortable reading width */
}
/* Re-anchor the viewfinder brackets to the form column's corners */
.booking__corner--tl { top: clamp(0.8rem, 2vw, 1.4rem); left:  clamp(0.8rem, 2vw, 1.4rem); }
.booking__corner--tr { top: clamp(0.8rem, 2vw, 1.4rem); right: clamp(0.8rem, 2vw, 1.4rem); }
.booking__corner--bl { bottom: clamp(0.8rem, 2vw, 1.4rem); left:  clamp(0.8rem, 2vw, 1.4rem); }
.booking__corner--br { bottom: clamp(0.8rem, 2vw, 1.4rem); right: clamp(0.8rem, 2vw, 1.4rem); }

/* Right — full-bleed video panel, edge to edge, full height, no frame */
.booking__media { display: block; }
.booking__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* ── Compact scale-down: fit the whole section within one screen. Tighter
   vertical rhythm + smaller form elements + condensed summary. Styling approach
   (bottom-line inputs, outline button, pink accents, brackets) unchanged. ── */
.booking__inner { min-height: clamp(300px, 38vh, 420px); }
.booking__form-col { padding: clamp(1.2rem, 2.6vw, 2rem) clamp(1.3rem, 3.2vw, 2.6rem); }

.booking__topbar  { margin-bottom: clamp(0.45rem, 1.1vw, 0.8rem); }
.booking__progress { margin-bottom: clamp(0.55rem, 1.3vw, 0.9rem); }

.booking__kicker { margin-bottom: 0.35rem; }
.booking__q {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  margin-bottom: 0.3rem;
}
.booking__hint { font-size: 0.82rem; margin-bottom: 0.65rem; line-height: 1.4; }

.booking__stage { min-height: 110px; }
.booking__field { margin-bottom: clamp(0.7rem, 1.4vw, 1rem); }

.booking__input,
.booking__textarea { padding: 0.5rem 0.1rem; font-size: 0.88rem; }
.booking__textarea { min-height: 2.2em; }   /* single-line start; auto-grows via js/booking.js */

.booking__pills { gap: 0.5rem; }
.booking__pill { padding: 0.45rem 0.9rem; font-size: 0.76rem; }

.booking__nav { margin-top: clamp(0.7rem, 1.5vw, 1rem); }
.booking .booking__next { padding: 0.5rem 1.35rem; font-size: 0.66rem; }
.booking__back { font-size: 0.7rem; }

/* Condense the final summary so all rows fit on one screen too */
.booking__brief-doc { margin-top: 0.8rem; padding: 0.9rem 1.1rem; }
.booking__brief-head { margin-bottom: 0.6rem; font-size: 0.74rem; }
.booking__brief-row { padding: 0.35rem 0; }
.booking__brief-key { font-size: 0.6rem; }
.booking__brief-val { font-size: 0.82rem; line-height: 1.35; }

/* ── Thank-you confirmation (final step, shown after "ИЗПРАТИ") ──
   Dark medium heading + grey subtext with a small pink dot accent. */
.booking__q.booking__thanks-title {
  font-weight: 600;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.booking__q.booking__thanks-title::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 10px rgba(255, 81, 171, 0.7);
}
.booking__hint.booking__thanks-sub { color: #636363; }

/* ── Responsive ── */
@media (max-width: 880px) {
  .booking__inner {
    grid-template-columns: 1fr;         /* stack: form on top, video below */
    min-height: 0;
  }
  .booking__media { order: 2; }
  .booking__video {                     /* stacked: contained vertical frame */
    height: auto;
    aspect-ratio: 3 / 4;
    max-width: 320px;
    margin-inline: auto;
  }
  .booking__stage { min-height: 0; }
}
/* Very small screens: drop the video so the form stays uncluttered */
@media (max-width: 540px) {
  .booking__media { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .booking__glow,
  .booking__rec-dot { animation: none; }
  .booking__inner { opacity: 1; transform: none; transition: none; }
  .booking__step.is-active { animation: none; }
  .booking__brief-row.just-filled .booking__brief-val { animation: none; }
  .booking__pill,
  .booking__input,
  .booking__textarea,
  .booking__progress-fill,
  .booking__back { transition: none; }
  .booking__pill:hover,
  .booking__back:hover { transform: none; }
  .booking__brief { transition: none; }
  .booking__brief::before { animation: none; }
  .booking__brief:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PROCESS PAGE (process.html)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Section 1 — vertical alternating timeline ── */
.process {
  background: var(--cream);
  color: var(--dark);
  /* top padding clears the fixed header */
  padding: clamp(7rem, 12vw, 9.5rem) clamp(1.5rem, 6vw, 4rem) clamp(4rem, 8vw, 6rem);
}

.process__head {
  max-width: 720px;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.process__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--dark);
}

.process__intro {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: var(--grey);
}

.timeline {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}

/* Central vertical line */
.timeline::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 81, 171, 0.25);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
}

/* Numbered marker on the line */
.timeline__marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(38px, 4vw, 46px);
  height: clamp(38px, 4vw, 46px);
  border-radius: 50%;
  background: var(--pink);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  z-index: 2;
  /* cream ring masks the line behind the marker */
  box-shadow: 0 0 0 6px var(--cream), 0 6px 18px rgba(255, 81, 171, 0.4);
}

/* Alternating sides — odd: text left / visual right; even: swapped */
.timeline__item:nth-child(odd) .timeline__text {
  grid-column: 1;
  text-align: right;
  padding-right: clamp(1.5rem, 3vw, 2.6rem);
}
.timeline__item:nth-child(odd) .timeline__visual {
  grid-column: 2;
  padding-left: clamp(1.5rem, 3vw, 2.6rem);
}
.timeline__item:nth-child(even) .timeline__text {
  grid-column: 2;
  text-align: left;
  padding-left: clamp(1.5rem, 3vw, 2.6rem);
}
.timeline__item:nth-child(even) .timeline__visual {
  grid-column: 1;
  padding-right: clamp(1.5rem, 3vw, 2.6rem);
}

.timeline__eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink);
}

.timeline__title {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--dark);
}

.timeline__desc {
  margin: 0;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.7;
  color: var(--grey);
}

/* Photo/video placeholder — rounded grey field, thin border, centered label */
.timeline__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(160px, 22vw, 220px);
  padding: 1rem;
  border-radius: 18px;
  border: 1.5px dashed rgba(30, 30, 30, 0.18);
  background: rgba(99, 99, 99, 0.08);
  color: var(--grey);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  /* single column — line + markers move to the left */
  .timeline::before { left: 20px; }
  .timeline__item {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-left: 3.4rem;
  }
  .timeline__item:nth-child(odd) .timeline__text,
  .timeline__item:nth-child(even) .timeline__text,
  .timeline__item:nth-child(odd) .timeline__visual,
  .timeline__item:nth-child(even) .timeline__visual {
    grid-column: 1;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }
  .timeline__visual { margin-top: 0.4rem; }
  .timeline__marker {
    left: 20px;
    top: clamp(1.4rem, 4vw, 2.2rem);
    transform: translate(-50%, 0);
  }
}

/* ── Section 2 — "Why we're different" (dark) ── */
.different {
  background: var(--dark);
  color: var(--cream);
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 6vw, 4rem);
  overflow: hidden;
}

.different__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.different .section-kicker { color: var(--pink); }

.different__statement {
  margin: clamp(1rem, 2vw, 1.5rem) auto clamp(3rem, 6vw, 5rem);
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--cream);
  text-wrap: balance;
}

.different__accent { color: var(--pink); }

/* Circular diagram */
.different__diagram {
  --gap: clamp(1.4rem, 4vw, 3rem);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gap);
  max-width: 980px;
  margin: 0 auto;
}

.different__col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3.5vw, 2.6rem);
}
.different__col--left { align-items: flex-end; text-align: right; }
.different__col--right { align-items: flex-start; text-align: left; }

.different__node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.different__node-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.82rem, 1.2vw, 0.98rem);
  color: var(--cream);
  line-height: 1.25;
}

.different__node-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 81, 171, 0.45);
  background: rgba(255, 81, 171, 0.07);
  color: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Thin dashed connectors toward the centre */
.different__col--left .different__node::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--gap));
  width: var(--gap);
  border-top: 1px dashed rgba(255, 81, 171, 0.35);
}
.different__col--right .different__node::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--gap));
  width: var(--gap);
  border-top: 1px dashed rgba(255, 81, 171, 0.35);
}

.different__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.6rem);
}

.different__pill {
  display: inline-flex;
  align-items: center;
  background: var(--pink);
  color: var(--dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 100px;
  z-index: 3;
}

.different__hub-wrap {
  position: relative;
  width: clamp(150px, 20vw, 200px);
  height: clamp(150px, 20vw, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.different__hub {
  width: clamp(110px, 15vw, 150px);
  height: clamp(110px, 15vw, 150px);
  border-radius: 50%;
  background: var(--pink);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  z-index: 2;
  box-shadow: 0 0 40px rgba(255, 81, 171, 0.5), 0 0 0 1px rgba(255, 81, 171, 0.3);
}

/* Concentric dashed orbits — slowly rotating */
.different__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgba(255, 81, 171, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
.different__orbit--1 { width: 120%; height: 120%; animation: orbit-spin 32s linear infinite; }
.different__orbit--2 { width: 154%; height: 154%; animation: orbit-spin 46s linear infinite reverse; }
.different__orbit--3 { width: 190%; height: 190%; animation: orbit-spin 62s linear infinite; }

@keyframes orbit-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Bottom cream tags */
.different__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.different__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--cream);
  color: var(--dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 0.7rem 1.3rem;
  border-radius: 100px;
}
.different__tag svg { color: var(--pink); flex-shrink: 0; }

/* Stack the columns under the hub on narrow screens */
@media (max-width: 820px) {
  .different__diagram { grid-template-columns: 1fr; justify-items: center; }
  .different__center { order: 1; }
  .different__col--left { order: 2; }
  .different__col--right { order: 3; }
  .different__col { align-items: center; text-align: center; }
  .different__node { justify-content: center; }
  .different__col--left .different__node { flex-direction: row-reverse; }
  .different__col--left .different__node::after,
  .different__col--right .different__node::before { display: none; }
}

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

/* ═══════════════════════════════════════════════════════════════════════
   COVERFLOW CAROUSEL — "Виж какво правим" on index.html
   3D fan of phone-framed videos; only the centre clip plays. Layout/playback
   driven by the inline script in index.html.
   ═══════════════════════════════════════════════════════════════════════ */
.coverflow {
  position: relative;
  max-width: 1100px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  overflow: hidden;            /* clip the far phones at the section edges */
}

.coverflow__stage {
  position: relative;
  width: 100%;
  height: clamp(360px, 58vh, 520px);
  perspective: 1500px;         /* the 3D depth for the fan */
}

.coverflow__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(190px, 22vw, 290px);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  transition:
    transform 520ms cubic-bezier(0.23, 1, 0.32, 1),
    opacity   520ms ease,
    filter    520ms ease;
  will-change: transform, opacity;
  cursor: pointer;
}

/* Phone frame */
.coverflow__phone {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  border: 3px solid rgba(247, 244, 240, 0.14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  transition: border-color 400ms ease, box-shadow 400ms ease;
}

/* Speaker/notch detail */
.coverflow__phone::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  width: 30%;
  height: 5px;
  border-radius: 3px;
  background: rgba(247, 244, 240, 0.3);
  transform: translateX(-50%);
  z-index: 2;
}

.coverflow__phone video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Centre phone — pink-lit frame */
.coverflow__item--active .coverflow__phone {
  border-color: rgba(255, 81, 171, 0.55);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 81, 171, 0.25), 0 0 50px rgba(255, 81, 171, 0.25);
}

/* Round pink arrows */
.coverflow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  width: clamp(44px, 5vw, 56px);
  height: clamp(44px, 5vw, 56px);
  border: 0;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255, 81, 171, 0.4);
  transition: background 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
.coverflow__arrow:hover {
  background: #ff6fbb;
  box-shadow: 0 14px 36px rgba(255, 81, 171, 0.55);
}
.coverflow__arrow:disabled {
  opacity: 0.3;
  cursor: default;
  box-shadow: none;
}
.coverflow__arrow--prev { left: clamp(0.4rem, 2vw, 1.5rem); }
.coverflow__arrow--next { right: clamp(0.4rem, 2vw, 1.5rem); }

@media (max-width: 600px) {
  .coverflow__stage { height: clamp(320px, 56vh, 460px); }
  .coverflow__item { width: clamp(170px, 52vw, 220px); }
}

@media (prefers-reduced-motion: reduce) {
  .coverflow__item { transition: none; }
}

/* ── Closing CTA — ONE shared component, identical on every page.
   Split uppercase heading (300 + 700) over the hero-style dark pill.
   Edit here once; every page's <section class="site-cta"> follows. ── */
.site-cta {
  text-align: center;
  background: #FFFFFF;
  padding-block: clamp(2rem, 3.4vw, 3rem) clamp(1.5rem, 2.4vw, 2rem);
}
.site-cta__inner { max-width: 1100px; margin: 0 auto; padding-inline: clamp(1.5rem, 6vw, 4rem); }
.site-cta__title {
  margin: 0 auto 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 0.95rem + 1.75vw, 2.35rem);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--dark);
}
.site-cta__lt, .site-cta__bd { display: inline-block; white-space: nowrap; }
.site-cta__lt { font-weight: 300; letter-spacing: 0.06em; }
.site-cta__bd { font-weight: 700; letter-spacing: 0.02em; }
.site-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.8rem;
  border-radius: 100px;
  white-space: nowrap;
  background: var(--dark);
  border: 1px solid var(--dark);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.site-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28); }
.site-cta__btn svg { transition: transform 0.35s ease; }
.site-cta__btn:hover svg { transform: translateX(4px); }

/* ─────────────────  HAND-DRAWN MARKER ELLIPSE (shared)  ─────────────────
   Reusable pen-circle around an emphasized phrase. Markup pattern:
     <span class="circled">
       <span data-bg=".." data-en="..">PHRASE</span>
       <svg class="circled__svg" viewBox="0 0 320 110" preserveAspectRatio="none"
            aria-hidden="true"><path pathLength="620" d="M28,64 C10,32 90,7 168,9
            C252,11 313,29 306,58 C299,93 202,107 122,102 C52,97 9,86 23,53
            C31,36 52,24 80,17" /></svg>
     </span>
   main.js adds .is-drawn on first scroll into view → the stroke draws itself;
   static under prefers-reduced-motion. The svg sits OUTSIDE the bilingual span
   so language switching never wipes it. */
/* isolation:isolate gives .circled its own stacking context, so the svg's
   negative z-index below stays INSIDE this span — it drops behind the text
   without falling behind the section's background too. */
.circled { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; }
.circled__svg {
  position: absolute;
  inset: -0.28em -0.4em -0.34em;
  width: calc(100% + 0.8em);
  height: calc(100% + 0.62em);
  overflow: visible;
  pointer-events: none;
  z-index: -1;                         /* the ellipse is BEHIND the letters */
}
.circled__svg path {
  fill: none;
  stroke: var(--pink);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0.9;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;              /* hidden until drawn */
}
.circled.is-drawn .circled__svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s ease 0.25s;
}
@media (prefers-reduced-motion: reduce) {
  .circled__svg path { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MAGAZINE COVERS — case-studies section (index.html #case-studies)

   Four magazine-style cover cards, each tilted a different amount, that
   straighten and lift on hover and open the brand's case page. A card with
   no case page yet (.cover-card--soon) renders identically but is inert.

   ENTRANCE — follows the same contract as .diag on this page: JS adds
   .covers--armed only when motion is welcome and IntersectionObserver
   exists, then .covers--visible on intersect. No JS / reduced motion → the
   armed class is never added and everything is simply visible.
   ═══════════════════════════════════════════════════════════════════════ */

.covers {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  scroll-margin-top: calc(var(--nav-h, 80px) + 20px);
}
.covers__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(1.1rem, 5vw, 3rem);
}

.covers__title {
  margin: 0 0 clamp(2rem, 5vw, 3.2rem);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--dark);
}
.covers__lt { font-weight: 300; }
.covers__bd { font-weight: 800; }

/* ── The row ───────────────────────────────────────────────────────────── */

.covers__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.4rem, 3.5vw, 2.6rem);
  /* the tilted corners need room so neighbours never clip on hover */
  padding: clamp(1rem, 2.5vw, 1.8rem) 0;
}

/* ── One cover ─────────────────────────────────────────────────────────── */

.cover-card {
  position: relative;
  flex: 0 0 auto;
  width: 230px;
  height: 320px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--dark);
  text-decoration: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 520ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 520ms ease;
  will-change: transform;
}
/* hover straightens the card and lifts it forward */
.cover-card:hover,
.cover-card:focus-visible {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
  z-index: 3;
}
.cover-card:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }

/* the card with no case page yet: same look, no interaction affordance */
.cover-card--soon { cursor: default; }
.cover-card--soon:hover { transform: rotate(var(--tilt, 0deg)); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); }

.cover-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* stand-in ground for a brand whose artwork has not landed yet */
.cover-card__bg--placeholder {
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255, 81, 171, 0.22), transparent 70%),
    linear-gradient(160deg, #2a2a2a 0%, #141414 100%);
}
/* Readability scrim — dark at both ends, so the masthead at the top and the
   cover-lines lower down both stay legible over any photograph. */
.cover-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(10, 10, 10, 0.72) 0%,
    rgba(10, 10, 10, 0.28) 34%,
    rgba(10, 10, 10, 0.45) 68%,
    rgba(10, 10, 10, 0.78) 100%);
  pointer-events: none;
}

/* ── Masthead: brand logo + issue label ───────────────────────────────── */

.cover-card__masthead {
  position: absolute;
  top: 18px;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.cover-card__logo {
  max-width: 82%;
  max-height: 34px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);        /* every brand mark → solid white */
}
/* text stand-in when there is no logo file yet */
.cover-card__wordmark {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}
.cover-card__label {
  font-family: var(--font-display);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* ── Cover-lines: small pills scattered down the lower half ───────────── */

.cover-card__lines {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.cover-pill {
  display: inline-block;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(20, 20, 20, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.cover-pill--main {
  background: var(--pink);
  font-weight: 700;
  font-size: 0.63rem;
  box-shadow: 0 4px 14px rgba(255, 81, 171, 0.4);
}
/* scattered, not stacked — nudge alternate pills off the left edge */
.cover-pill:nth-child(2) { margin-left: 26px; }
.cover-pill:nth-child(3) { margin-left: 12px; }
.cover-pill:nth-child(4) { margin-left: 34px; }

/* ── Entrance ──────────────────────────────────────────────────────────── */

.covers--armed .covers__title,
.covers--armed .cover-card {
  opacity: 0;
  transform: translateY(28px) rotate(var(--tilt, 0deg));
}
.covers--armed .covers__title { transform: translateY(24px); }

.covers--armed.covers--visible .covers__title,
.covers--armed.covers--visible .cover-card {
  opacity: 1;
  transition:
    opacity 700ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--i, 0) * 130ms),
    transform 700ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--i, 0) * 130ms);
}
.covers--armed.covers--visible .covers__title { transform: none; }
.covers--armed.covers--visible .cover-card { transform: rotate(var(--tilt, 0deg)); }
/* once revealed, hover must still win over the entrance transform */
.covers--armed.covers--visible .cover-card:hover,
.covers--armed.covers--visible .cover-card:focus-visible {
  transform: rotate(0deg) scale(1.05);
}
.covers--armed.covers--visible .cover-card--soon:hover {
  transform: rotate(var(--tilt, 0deg));
}

/* ── Hover: the cover behaves like a glossy print ──────────────────────
   It straightens, tilts toward the cursor on a real perspective, the art
   pushes in and drifts against the pointer, a light sweeps diagonally
   across it, and the cover-lines fan out one after another.

   The transform lives in --hover-tf so the plain and the post-entrance
   rules (which carry higher specificity) can share one definition.
   --cx/--cy (tilt) and --mx/--my (art drift) come from JS; with no JS they
   stay 0 and this degrades to the straighten-and-lift it had before.

   NOTE: the card is overflow:hidden, which flattens any 3D on its children,
   so the art parallax is a 2D translate rather than translateZ. ── */

.cover-card {
  --hover-tf: perspective(900px) rotate(0deg)
              rotateX(var(--cx, 0deg)) rotateY(var(--cy, 0deg))
              translateY(-8px) scale(1.06);
}
.cover-card:hover,
.cover-card:focus-visible,
.covers--armed.covers--visible .cover-card:hover,
.covers--armed.covers--visible .cover-card:focus-visible {
  transform: var(--hover-tf);
}
/* while the pointer is inside, the tilt has to keep up with it */
.cover-card.is-tilting { transition: transform 140ms ease-out, box-shadow 400ms ease; }

/* the artwork pushes in and drifts against the cursor */
.cover-card__bg { transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.cover-card:hover .cover-card__bg,
.cover-card:focus-visible .cover-card__bg {
  transform: scale(1.1) translate(var(--mx, 0px), var(--my, 0px));
}

/* one diagonal pass of light across the cover; clipped by overflow:hidden */
.cover-card::before {
  content: '';
  position: absolute;
  inset: -40% -60%;
  z-index: 3;                       /* the light passes over the text too */
  pointer-events: none;
  background: linear-gradient(115deg,
              transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
  transform: translateX(-120%);
  opacity: 0;
}
.cover-card:hover::before,
.cover-card:focus-visible::before {
  animation: cover-shine 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes cover-shine {
  0%   { transform: translateX(-120%); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateX(120%);  opacity: 0; }
}

/* masthead settles up, cover-lines fan out in sequence */
.cover-card__masthead { transition: transform 520ms cubic-bezier(0.23, 1, 0.32, 1); }
.cover-card:hover .cover-card__masthead,
.cover-card:focus-visible .cover-card__masthead { transform: translateY(-4px); }

.cover-pill { transition: transform 420ms cubic-bezier(0.23, 1, 0.32, 1); }
.cover-card:hover .cover-pill,
.cover-card:focus-visible .cover-pill { transform: translateX(6px); }
.cover-card:hover .cover-pill:nth-child(2) { transition-delay: 70ms; }
.cover-card:hover .cover-pill:nth-child(3) { transition-delay: 140ms; }
.cover-card:hover .cover-pill:nth-child(4) { transition-delay: 210ms; }

/* Motion off → no shine, no drift, nothing shifts. The card's own hover
   transform is already cancelled by the existing reduced-motion rule near
   the end of this file, so it is deliberately not repeated here. */
@media (prefers-reduced-motion: reduce) {
  .cover-card::before { display: none; }
  .cover-card__bg,
  .cover-card__masthead,
  .cover-pill { transition: none; }
  .cover-card:hover .cover-card__bg,
  .cover-card:hover .cover-card__masthead,
  .cover-card:hover .cover-pill { transform: none; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* tablet — two per row, angles eased */
@media (max-width: 900px) {
  .cover-card { width: 210px; height: 292px; }
}

/* phone — stacked, roughly half the tilt so the column still reads straight */
@media (max-width: 640px) {
  .covers__row { gap: 1.5rem; }
  .cover-card {
    width: min(230px, 78vw);
    height: auto;
    aspect-ratio: 230 / 320;
    transform: rotate(calc(var(--tilt, 0deg) / 2));
  }
  .covers--armed .cover-card {
    transform: translateY(28px) rotate(calc(var(--tilt, 0deg) / 2));
  }
  .covers--armed.covers--visible .cover-card {
    transform: rotate(calc(var(--tilt, 0deg) / 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover-card { transition: none; }
  .cover-card:hover, .cover-card:focus-visible { transform: rotate(var(--tilt, 0deg)); }
}