/* ==========================================================================
   SHRESTH STUDIOS — Design System & Styles
   Katihar, Bihar · Creative growth partner

   Contents
   01. Tokens
   02. Reset & base
   03. Typography scale
   04. Layout primitives
   05. Buttons, pills, chips
   06. Motion primitives (reveals, scrub)
   07. Preloader / progress / cursor
   08. Navbar & mobile menu
   09. Hero
   10. Statement
   11. Services (pinned horizontal)
   12. Showreel
   13. Process
   14. Industries
   15. Impact / counters
   16. Reels wall + lightbox
   17. Work & testimonials
   18. Pricing
   19. Loud CTA
   20. Contact
   21. Footer
   22. Marquee
   23. Responsive
   24. Reduced motion
   ========================================================================== */

/* ---------- 01. TOKENS -------------------------------------------------- */
:root {
  /* PRIMARY — the logo yellow. The single accent for the whole site. */
  --gold-500: #ffc300;
  --gold-400: #ffd447;
  --gold-300: #ffe38a;
  --gold-100: #fff3d1;
  --gold-700: #e0a200;
  /* Gold TEXT on the cream canvas. The brand gold (#FFC300) only reaches
     ~1.6:1 against cream, which is unreadable, so text uses this deeper
     tone (~2.9:1, at the WCAG large-text threshold) while every FILL stays
     true brand gold. If you prefer the brighter brand gold in headlines,
     change this one value — see README. */
  --gold-ink: #c98a00;

  /* INK — the logo black. */
  --ink-900: #0d0d0d;
  --ink-800: #1a1a1a;
  --ink-600: #3d3d3d;
  --ink-400: #6e6e6e;
  --ink-200: #c9c9c9;

  /* CANVAS — warm cream. Never grey-white. */
  --cream-50: #fefbf4;
  --cream-100: #fdf8ee;
  --cream-200: #f7f0e1;
  --white: #ffffff;

  /* On-dark text */
  --on-dark: #ede7da;
  --on-dark-dim: #9c948a;

  /* Form states. Outside the brand palette on purpose — error and success
     must not be confused with the gold accent. */
  --danger: #b4261a;
  --success: #1c7a45;

  /* Warm shadows — never grey-black */
  --shadow-sm: 0 2px 8px -2px rgba(180, 130, 0, 0.12);
  --shadow-md: 0 12px 32px -12px rgba(180, 130, 0, 0.18);
  --shadow-lg: 0 20px 60px -20px rgba(180, 130, 0, 0.18);
  --shadow-xl: 0 32px 80px -24px rgba(140, 100, 0, 0.24);

  /* Radii */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Motion */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --t-micro: 0.2s;
  --t-ui: 0.4s;
  --t-reveal: 0.85s;

  /* Layout */
  --container: 1280px;
  --gutter: 20px;
  --nav-h: 76px;

  /* Fonts */
  --font-sans: "Plus Jakarta Sans", "Inter Tight", Inter, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 64px;
  }
}

/* ---------- 02. RESET & BASE ------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--cream-100);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Dark sections need a light focus ring */
.sec--dark :focus-visible,
.cta-loud :focus-visible {
  outline-color: var(--gold-500);
}

::selection {
  background: var(--gold-500);
  color: var(--ink-900);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -200%);
  z-index: 300;
  padding: 12px 20px;
  background: var(--ink-900);
  color: var(--cream-100);
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 14px;
  transition: transform var(--t-ui) var(--ease-expo);
}
.skip-link:focus {
  transform: translate(-50%, 0);
}

/* ---------- 03. TYPOGRAPHY --------------------------------------------- */
.display-xl,
.display-lg,
.display-md,
.display-sm {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-wrap: balance;
}

/* Sized so "We Build Brands" and "That Get Noticed." each hold exactly one
   line inside the hero column, matching the reference composition. Tuned
   against the widest fallback font metrics, so it still fits if the webfont
   never loads. */
.display-xl {
  font-size: clamp(2.25rem, 4.2vw, 3.875rem);
}
.display-lg {
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
}
.display-md {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.02;
}
.display-sm {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.sec--dark .eyebrow {
  color: var(--gold-500);
}

.body-lg {
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  color: var(--ink-400);
  line-height: 1.7;
}
.sec--dark .body-lg {
  color: var(--on-dark-dim);
}

/* Gold emphasis. Italic echoes the italic logo wordmark. */
.gold {
  color: var(--gold-ink);
  font-style: italic;
}
.sec--dark .gold,
.cta-loud .gold {
  color: var(--gold-500);
}

.gold-plain {
  color: var(--gold-ink);
}
.sec--dark .gold-plain {
  color: var(--gold-500);
}

/* ---------- 04. LAYOUT ------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec {
  position: relative;
  padding-block: clamp(72px, 12vw, 160px);
  overflow: clip;
}

.sec--dark {
  background: var(--ink-900);
  color: var(--white);
}
.sec--dark h2,
.sec--dark h3 {
  color: var(--white);
}

.sec--cream2 {
  background: var(--cream-200);
}

.sec-head {
  max-width: 44ch;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.sec-head .display-lg {
  margin-top: 16px;
}
.sec-head .body-lg {
  margin-top: 20px;
}

.sec-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Giant S watermark behind selected sections */
.watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.05;
  width: min(80vw, 900px);
}
.sec > .container {
  position: relative;
  z-index: 1;
}

.hairline {
  border: 0;
  border-top: 1px solid var(--ink-200);
  margin: 0;
}
.sec--dark .hairline {
  border-color: rgba(255, 255, 255, 0.1);
}

/* ---------- 05. BUTTONS ------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 14px 26px;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  min-height: 52px;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--t-micro) var(--ease-out),
    box-shadow var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out);
}

/* Yellow fill sweeps up from the bottom on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-400);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-expo);
}
.btn:hover::after,
.btn:focus-visible::after {
  transform: translateY(0);
}

.btn__label {
  transition: transform var(--t-ui) var(--ease-out);
}
.btn:hover .btn__label {
  transform: translateX(2px);
}

.btn__badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 auto;
  transition: transform var(--t-ui) var(--ease-expo),
    background-color var(--t-ui) var(--ease-out);
}
.btn:hover .btn__badge {
  transform: rotate(45deg) translateX(2px);
}
.btn__badge svg {
  width: 15px;
  height: 15px;
}

/* Primary — gold fill, ink text, dark circular arrow badge */
.btn--primary {
  background: var(--gold-500);
  color: var(--ink-900);
  box-shadow: var(--shadow-md);
}
.btn--primary .btn__badge {
  background: var(--ink-900);
  color: var(--white);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Secondary — white fill, hairline border, play triangle */
.btn--secondary {
  background: var(--white);
  color: var(--ink-900);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-sm);
}
.btn--secondary .btn__badge {
  width: 26px;
  height: 26px;
  background: transparent;
  color: var(--ink-900);
}
.btn--secondary .btn__badge svg {
  width: 12px;
  height: 12px;
}
.btn--secondary:hover .btn__badge {
  transform: none;
}
.btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Ink — used on gold backgrounds */
.btn--ink {
  background: var(--ink-900);
  color: var(--cream-100);
  padding: 18px 22px 18px 32px;
  min-height: 62px;
  font-size: 1.05rem;
}
.btn--ink .btn__badge {
  background: var(--gold-500);
  color: var(--ink-900);
}
.btn--ink::after {
  background: var(--ink-800);
}

/* Outline — on dark or cream */
.btn--outline {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  padding-inline: 26px;
}
.btn--outline::after {
  background: var(--gold-500);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  color: var(--ink-900);
  border-color: var(--gold-500);
}

.btn--sm {
  min-height: 44px;
  padding: 10px 14px 10px 20px;
  font-size: 0.875rem;
}
.btn--sm .btn__badge {
  width: 28px;
  height: 28px;
}
.btn--sm .btn__badge svg {
  width: 13px;
  height: 13px;
}

.btn--block {
  width: 100%;
  justify-content: center;
  padding-inline: 24px;
}

/* Pill badge */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  border-radius: var(--r-full);
  background: var(--white);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-600);
}
.pill svg {
  width: 16px;
  height: 16px;
  color: var(--gold-500);
  flex: 0 0 auto;
}

.chip {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-ink);
  flex: 0 0 auto;
}
.chip svg {
  width: 21px;
  height: 21px;
}
.sec--dark .chip {
  background: rgba(255, 195, 0, 0.14);
  color: var(--gold-500);
}

/* Text link with a gold underline that draws left → right */
.tlink {
  position: relative;
  font-weight: 600;
  display: inline-block;
}
.tlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-expo);
}
.tlink:hover::after,
.tlink:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- 06. MOTION PRIMITIVES -------------------------------------- */

/* Masked line/word reveal. Parent clips, child slides up + untilts. */
.reveal {
  display: block;
  overflow: hidden;
}
/* NOTE: every hidden-by-default state below is gated on html.js, which is
   set by an inline script in the head. If JavaScript never runs, all content
   renders in its final visible state instead of staying stuck offscreen. */
.js .reveal > * {
  display: block;
  transform: translateY(110%) rotate(3deg);
  transition: transform var(--t-reveal) var(--ease-expo);
  transition-delay: var(--d, 0ms);
}
.is-in .reveal > *,
.reveal.is-in > * {
  transform: translateY(0) rotate(0deg);
}

/* Word-level headline reveal */
.rw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.js .rw > span {
  display: inline-block;
  transform: translateY(110%) rotate(3deg);
  transition: transform var(--t-reveal) var(--ease-expo);
  transition-delay: var(--d, 0ms);
}
.is-in .rw > span {
  transform: translateY(0) rotate(0deg);
}

/* Generic fade-and-rise */
.js .fx {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo);
  transition-delay: var(--d, 0ms);
}
.is-in.fx,
.is-in .fx {
  opacity: 1;
  transform: none;
}

/* Signature image reveal: clip wipe + inner settle */
.js .imgwipe {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-expo);
  transition-delay: var(--d, 0ms);
}
.is-in .imgwipe,
.imgwipe.is-in {
  clip-path: inset(0 0 0 0);
}
.js .imgwipe > * {
  transform: scale(1.18);
  transition: transform 1.2s var(--ease-expo);
  transition-delay: var(--d, 0ms);
}
.is-in .imgwipe > *,
.imgwipe.is-in > * {
  transform: scale(1);
}

/* Media frame used wherever a real photo will land later */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--cream-200);
  isolation: isolate;
}
.frame > img,
.frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Real photo sitting on top of its placeholder. Fades in once decoded, and
   the placeholder underneath is removed by JS at that point. */
img[data-slot] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s var(--ease-out);
}
/* Hidden-until-decoded only when JS is running to un-hide it. */
.js img[data-slot] {
  opacity: 0;
}
.js img[data-slot].is-loaded {
  opacity: 1;
}

/* Placeholder art: warm gradient + gold S watermark. A designed empty state. */
.ph {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--cream-200), var(--gold-100) 55%, var(--cream-50));
  overflow: hidden;
}
.ph--dark {
  background: linear-gradient(140deg, #16161a, #241d05 55%, #101014);
}
.ph__mark {
  width: 58%;
  max-width: 240px;
  opacity: 0.16;
}
.ph--dark .ph__mark {
  opacity: 0.3;
}
.ph__tag {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.ph--dark .ph__tag {
  color: var(--gold-500);
}

/* ---------- 07. PRELOADER / PROGRESS / CURSOR -------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--cream-100);
  display: grid;
  place-items: center;
  gap: 22px;
  grid-auto-flow: row;
  align-content: center;
  justify-items: center;
  transition: clip-path 0.9s var(--ease-expo), opacity 0.4s ease 0.6s;
  clip-path: inset(0 0 0 0);
}
.preloader.is-done {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}
/* The official mark is a filled path, so it can't be "drawn" with
   stroke-dashoffset — it wipes upward through a clip-path instead. */
.preloader__word {
  width: min(58vw, 230px);
  height: auto;
  animation: wipe 1s var(--ease-expo) forwards;
}
@keyframes wipe {
  from {
    clip-path: inset(100% 0 0 0);
    transform: translateY(16px);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}
.preloader__count {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 200;
  background: var(--gold-500);
  transform: scaleX(var(--sp, 0));
  transform-origin: left;
  will-change: transform;
}

.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
  mix-blend-mode: normal;
}
.cursor {
  width: 6px;
  height: 6px;
  background: var(--ink-900);
  margin: -3px 0 0 -3px;
}
.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid var(--gold-500);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: transparent;
  transition: width 0.3s var(--ease-expo), height 0.3s var(--ease-expo),
    margin 0.3s var(--ease-expo), background-color 0.3s var(--ease-expo),
    color 0.2s ease, border-color 0.3s ease;
}
.cursor-ring.is-hover {
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  background: rgba(255, 195, 0, 0.16);
}
.cursor-ring.is-media {
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--ink-900);
}
/* Cursor is a desktop-only affordance */
@media (hover: none), (pointer: coarse) {
  .cursor,
  .cursor-ring {
    display: none;
  }
}

/* ---------- 08. NAVBAR ------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: transform 0.5s var(--ease-expo);
}
.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* Condenses into a floating cream pill past the hero */
.nav__shell {
  position: absolute;
  inset: 8px max(12px, calc((100vw - var(--container)) / 2 + 8px));
  border-radius: var(--r-full);
  background: rgba(253, 248, 238, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(13, 13, 13, 0.06);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--t-ui) var(--ease-out),
    transform var(--t-ui) var(--ease-expo);
  pointer-events: none;
}
.nav.is-stuck .nav__shell {
  opacity: 1;
  transform: scale(1);
}

/* The official logo SVG is the full lockup (gold S + wordmark), so the
   markup is just the image — no separate text label. */
.logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transition: transform var(--t-ui) var(--ease-expo);
}
.nav.is-stuck .logo {
  transform: scale(0.92);
  transform-origin: left center;
}
.logo__img {
  height: 34px;
  width: auto;
  flex: 0 0 auto;
}
.logo__img--lg {
  height: 62px;
}
.logo__mark {
  width: 30px;
  height: auto;
  flex: 0 0 auto;
}

.nav__links {
  display: none;
  align-items: center;
  gap: 4px;
}
.nav__link {
  position: relative;
  padding: 10px 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-600);
  border-radius: var(--r-full);
  transition: color var(--t-micro) ease;
}
.nav__link:hover {
  color: var(--ink-900);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold-500);
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.35s var(--ease-expo);
}
.nav__link.is-active {
  color: var(--ink-900);
}
.nav__link.is-active::after {
  transform: translateX(-50%) scaleX(1);
}

.nav__group {
  position: relative;
}
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__toggle svg {
  width: 12px;
  height: 12px;
  transition: transform var(--t-ui) var(--ease-expo);
}
.nav__group:hover .nav__toggle svg,
.nav__group:focus-within .nav__toggle svg {
  transform: rotate(180deg);
}
.nav__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 10px);
  width: min(560px, 84vw);
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--cream-50);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-ui) var(--ease-out),
    transform var(--t-ui) var(--ease-expo), visibility var(--t-ui);
}
.nav__group:hover .nav__drop,
.nav__group:focus-within .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav__drop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color var(--t-micro) ease;
}
.nav__drop a:hover {
  background: var(--gold-100);
}
.nav__drop i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
  flex: 0 0 auto;
}

.nav__cta {
  display: none;
}

.burger {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ink-200);
  background: var(--white);
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform var(--t-ui) var(--ease-expo),
    opacity var(--t-micro) ease;
}
.burger span + span {
  margin-top: 5px;
}

/* Mobile menu */
/* Author styles beat the UA [hidden] rule, so restate it explicitly. */
.menu[hidden],
.lb[hidden] {
  display: none;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: var(--ink-900);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px var(--gutter) 40px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-expo);
  overflow: hidden;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
}
.menu__mark {
  position: absolute;
  right: -14%;
  bottom: -6%;
  width: 78%;
  opacity: 0.07;
  pointer-events: none;
}
.menu__close {
  position: absolute;
  top: 16px;
  right: var(--gutter);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.menu__close svg {
  width: 18px;
  height: 18px;
}
.menu__list a {
  display: block;
  font-size: clamp(2rem, 9vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  padding: 6px 0;
  transition: transform 0.7s var(--ease-expo);
  transition-delay: var(--d, 0ms);
}
.js .menu__list a {
  transform: translateY(110%);
}
.menu__list li {
  overflow: hidden;
}
.menu.is-open .menu__list a {
  transform: translateY(0);
}
.menu__foot {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  font-size: 0.875rem;
  color: var(--on-dark-dim);
  position: relative;
  z-index: 1;
}
.menu__foot a:hover {
  color: var(--gold-500);
}

/* ---------- 09. HERO --------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + 12px);
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
}

/* Fine film grain across the whole hero. Generated inline via feTurbulence,
   so it costs no network request and no image asset. Kept very low opacity:
   enough to give the flat cream a printed, tactile quality and to stop the
   large gradient areas from banding, but not enough to soften type. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ambient warm light pooling behind the headline. Two offset radial washes
   drifting slowly in opposite directions, which reads as depth without ever
   resolving into a shape you can point at. Anchored to the LEFT half only,
   so it lifts the type area and deliberately stays clear of the video. */
.hero__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
      42% 46% at 18% 38%,
      rgba(255, 195, 0, 0.16),
      transparent 70%
    ),
    radial-gradient(36% 40% at 34% 74%, rgba(255, 168, 0, 0.1), transparent 72%);
  animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora {
  from {
    transform: translate3d(-2%, 1%, 0) scale(1);
  }
  to {
    transform: translate3d(3%, -2%, 0) scale(1.08);
  }
}

/* Background video layer — right half, behind the laptop, above the cream. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Two stacked clips. Both start invisible; JS adds .is-on to whichever
   should be showing, so the intro-to-loop handover cross-fades instead of
   flashing. */
/* Two stacked clips. Both start invisible; JS adds .is-on to whichever
   should be showing, so the intro-to-loop handover cross-fades instead of
   flashing.

   height:auto keeps each clip at its natural 16:9 ratio and centres it on
   the right — cropping it to full height cut the laptop out of frame. */
.hero__video {
  position: absolute;
  top: 50%;
  /* Pulled left off the right edge and scaled up, so the laptop in frame
     sits inside the hero rather than hugging the corner. */
  right: 6%;
  width: 74%;
  height: auto;
  max-height: 100%;
  opacity: 0;
  transform: translateY(-50%) translateY(calc(var(--hp, 0) * 60px))
    scale(calc(1 + var(--hp, 0) * 0.07));
  filter: brightness(calc(1 - var(--hp, 0) * 0.25));
  transition: opacity 0.8s var(--ease-out);
  pointer-events: none;
  /* Feather every edge so the clip melts into the cream canvas instead of
     showing a hard rectangle. */
  -webkit-mask-image: radial-gradient(
    68% 66% at 52% 50%,
    #000 52%,
    transparent 94%
  );
  mask-image: radial-gradient(68% 66% at 52% 50%, #000 52%, transparent 94%);
}
.hero__video.is-on {
  opacity: calc(1 - var(--hp, 0) * 0.5);
}
.hero__video--loop {
  z-index: 1;
}

/* Two pairs of <video> live in the markup — 16:9 desktop clips and 4:5
   mobile clips shot specifically for this layout — but only one pair is
   ever meant to be on screen. display:none is deliberate rather than
   opacity/visibility: the inactive pair must never occupy layout space or
   be treated as "on" by anything, and main.js already refuses to fetch or
   play it (see initHeroVideo), so hiding it is belt-and-suspenders, not the
   only thing stopping it from loading. */
.hero__video--mobile {
  display: none;
}
@media (max-width: 1023px) {
  .hero__video--desktop {
    display: none;
  }
  .hero__video--mobile {
    display: block;
  }
}

/* The CSS laptop mock is a LAST-RESORT fallback, so it starts hidden.

   It used to be visible by default and only hidden once a clip began playing,
   which meant every visitor saw the mock laptop flash up first and then swap
   to the video — most obviously on a slow or deployed connection. Inverting it
   means the mock is never seen unless it's genuinely needed: main.js adds
   .no-video only when BOTH clips have failed to decode, or when data-saver
   mode has ruled video out.

   Gated on .js so that with scripting unavailable — where nothing can ever
   add .no-video — the mock still shows rather than leaving the hero empty.
   Hidden via `visibility` rather than `display` so it keeps reserving its grid
   cell and the surrounding layout doesn't shift.

   IMPORTANT: this targets .laptop specifically, not the whole .hero__visual
   box. Below 1024px, .hero__visual also HOSTS the mobile video (see
   .hero__video--mobile), and opacity — unlike visibility — cannot be
   overridden by a descendant; a child element can't "undo" a parent's
   opacity:0, because opacity composites the entire subtree as one
   semi-transparent layer. Putting the fallback opacity/visibility on the
   shared container therefore made the mobile video invisible no matter what
   its own opacity or visibility said — it was correctly positioned, playing,
   and fully computed as visible, and still rendered as nothing. Scoping this
   to .laptop keeps the "hide the mock by default" behaviour intact while
   leaving .hero__visual itself unaffected for whatever else lives inside it. */
.laptop {
  transition: opacity 0.6s var(--ease-out);
}
.js .laptop {
  opacity: 0;
  visibility: hidden;
}
.js .hero.no-video .laptop {
  opacity: 1;
  visibility: visible;
}
/* Animated fallback: warm vertical light streaks, so the hero looks
   finished before the client video arrives. */
.hero__fallback {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 100%;
  /* Warm vertical light streaks, concentrated behind the laptop and faded
     out at the edges by the mask so they read as light, not a yellow wall. */
  background-image: repeating-linear-gradient(
      90deg,
      rgba(255, 195, 0, 0) 0px,
      rgba(255, 195, 0, 0.3) 12px,
      rgba(255, 212, 71, 0.06) 30px,
      rgba(255, 195, 0, 0) 62px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 168, 0, 0) 0px,
      rgba(255, 227, 138, 0.28) 7px,
      rgba(255, 195, 0, 0) 46px
    ),
    radial-gradient(
      52% 58% at 52% 48%,
      rgba(255, 205, 40, 0.5),
      transparent 72%
    );
  background-size: 230px 100%, 145px 100%, 100% 100%;
  filter: blur(9px) saturate(115%);
  animation: streak 9s linear infinite alternate;
  transform: scale(1.05) translateY(calc(var(--hp, 0) * 8%));
  opacity: calc(0.85 - var(--hp, 0) * 0.5);
  -webkit-mask-image: radial-gradient(
    62% 72% at 50% 48%,
    #000 30%,
    transparent 78%
  );
  mask-image: radial-gradient(62% 72% at 50% 48%, #000 30%, transparent 78%);
  transition: opacity 0.8s var(--ease-out);
}
/* Retired once a real video takes over. */
.hero__fallback.is-off {
  opacity: 0 !important;
}
@keyframes streak {
  0% {
    background-position: 0 0, 40px 0, 0 0;
    filter: blur(6px) saturate(120%) brightness(1);
  }
  50% {
    filter: blur(9px) saturate(135%) brightness(1.08);
  }
  100% {
    background-position: 70px 0, -60px 0, 0 0;
    filter: blur(6px) saturate(120%) brightness(1);
  }
}
/* Warm scrim so the video never fights the type */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      var(--cream-100) 0%,
      rgba(253, 248, 238, 0.88) 26%,
      rgba(253, 248, 238, 0.28) 46%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      var(--cream-100) 0%,
      transparent 22%,
      transparent 74%,
      rgba(253, 248, 238, 0.92) 100%
    );
}

/* Deliberately NOT flex-grow. The hero centres its whole stack with
   justify-content instead; growing this item let it shrink below its
   content on short viewports, which clipped the partner strip. */
.hero__grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 44px;
  position: relative;
  z-index: 1;
}

.hero__content {
  transform: translateY(calc(var(--hp, 0) * -70px));
  opacity: calc(1 - var(--hp, 0) * 1.42);
  max-width: 620px;
}

.hero__title {
  margin: 20px 0 0;
  /* Tighter than the global display scale: at hero size the default tracking
     reads loose, and optical sizing wants negative letter-spacing as type
     grows. */
  letter-spacing: -0.042em;
  line-height: 0.94;
}
/* Word spacing comes from the whitespace between the inline-block masks,
   so no extra margin here or the words drift apart. */
.hero__title .rw {
  margin-right: 0;
}

/* Gold brush highlight behind the emphasised words.

   inline-block (not inline) so the highlight can never be split across two
   lines — the headline is sized to keep "That Get Noticed." on one line at
   every breakpoint, and this guarantees the mark stays in one piece.

   The asymmetric border-radius (the `/` syntax gives different horizontal
   and vertical radii per corner) is what stops this reading as a plain
   rectangle — it gives the ends the uneven, slightly organic taper of a real
   marker stroke, with no SVG required. */
.hero__hl {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.hero__hl::before {
  content: "";
  position: absolute;
  left: -0.07em;
  right: -0.07em;
  bottom: 0.04em;
  height: 0.36em;
  z-index: -1;
  background: linear-gradient(
    97deg,
    var(--gold-400),
    var(--gold-500) 42%,
    var(--gold-300)
  );
  border-radius: 0.2em 0.7em 0.24em 0.55em / 0.6em 0.22em 0.7em 0.26em;
  transform: rotate(-0.7deg) scaleX(0);
  transform-origin: left center;
}
/* Only animate the sweep when JS is driving the entrance; without it the
   highlight must simply be present. */
.js .hero__hl::before {
  transition: transform 0.85s var(--ease-expo) 0.95s;
}
.is-in .hero__hl::before {
  transform: rotate(-0.7deg) scaleX(1);
}

.hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* Hero-scoped button refinements. Deliberately scoped rather than editing
   .btn--primary globally, which would also change pricing and the contact
   form. The hero is the one place these should feel heavier. */
.hero__btns .btn--primary {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500) 62%, var(--gold-700));
  box-shadow: 0 10px 26px -10px rgba(224, 162, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.hero__btns .btn--primary:hover {
  box-shadow: 0 16px 34px -12px rgba(224, 162, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Gold play disc, so the secondary button still carries a little brand
   colour instead of being pure greyscale next to the primary. */
.hero__btns .btn--secondary {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__btns .btn--secondary .btn__badge {
  width: 30px;
  height: 30px;
  background: var(--gold-500);
  color: var(--ink-900);
}
.hero__btns .btn--secondary .btn__badge svg {
  width: 11px;
  height: 11px;
  margin-left: 1px; /* optical centring: a triangle's visual mass sits left */
}

/* Softly glowing status pill. */
.hero__pill {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(224, 162, 0, 0.28);
  box-shadow: 0 4px 18px -8px rgba(224, 162, 0, 0.35);
}

/* Stat row — inline and editorial.

   This was a solid white card with a large shadow. In a composition whose
   focal point is the video, that card was a second competing block of
   contrast, and its hard rectangle cut across an otherwise soft layout.
   Stripping it back to numbers on hairline dividers keeps exactly the same
   information while letting the footage carry the visual weight. */
.statcard {
  margin-top: 36px;
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3.4vw, 44px);
  /* Explicitly unset the old card treatment. */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.statcard__cell {
  position: relative;
  display: block;
  padding: 0;
  min-width: 0;
}
/* Hairline between cells, drawn in the gap rather than as a cell border, so
   it doesn't add to the cell's own box. */
.statcard__cell + .statcard__cell {
  border-left: 0;
}
.statcard__cell + .statcard__cell::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(10px, 1.7vw, 22px));
  top: 0.34em;
  height: 2.1em;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--ink-200) 22%,
    var(--ink-200) 78%,
    transparent
  );
}
/* The icon chips belonged to the card treatment — in an inline number row
   they read as clutter and fight the gold in the highlight and the CTA.
   Hidden rather than removed from renderStats() so the markup stays
   reversible; they are decorative and already aria-hidden. */
.statcard .chip {
  display: none;
}
.statcard__val {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Keeps the counting digits from nudging the layout as they tick up. */
  display: block;
}
.statcard__val i {
  font-style: normal;
  color: var(--gold-ink);
}
.statcard__lab {
  margin-top: 7px;
  font-size: 0.7rem;
  color: var(--ink-400);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Right column visual — laptop at a 3/4 angle with the logo on screen */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  transform: translateY(calc(var(--hp, 0) * -46px))
    rotate(calc(var(--hp, 0) * 6deg)) scale(calc(1 + var(--hp, 0) * 0.08));
}
.laptop {
  position: relative;
  width: min(100%, 470px);
  transform: perspective(1200px) rotateY(-19deg) rotateX(7deg) rotate(-2deg);
  animation: float 6s ease-in-out infinite alternate;
  filter: drop-shadow(0 34px 46px rgba(120, 84, 0, 0.26));
}
@keyframes float {
  from {
    transform: perspective(1200px) rotateY(-19deg) rotateX(7deg) rotate(-2deg)
      translateY(-10px);
  }
  to {
    transform: perspective(1200px) rotateY(-19deg) rotateX(7deg) rotate(-2deg)
      translateY(10px);
  }
}
.laptop__lid {
  background: #16171a;
  border-radius: 16px 16px 6px 6px;
  padding: 11px 11px 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.laptop__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* height:auto is required — the logo SVG carries width/height attributes,
   which act as presentational hints and otherwise stretch the screen box. */
.laptop__screen img {
  width: 58%;
  height: auto;
  max-height: 62%;
  object-fit: contain;
}
.laptop__glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    114deg,
    rgba(255, 255, 255, 0.5) 0 18%,
    rgba(255, 255, 255, 0) 42%
  );
  pointer-events: none;
}
/* Palm rest, seen edge-on: a shallow tapered wedge under the lid. */
.laptop__base {
  height: 11px;
  margin: 0 -3.5%;
  border-radius: 3px 3px 11px 11px;
  background: linear-gradient(180deg, #dfe2e7, #b3b8c0 46%, #8b9099 78%, #6f747c);
  box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Thumb notch on the front lip */
.laptop__notch {
  width: 13%;
  height: 5px;
  margin: 0 auto -1px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #9ea3ac, #babfc7);
  position: relative;
  z-index: 1;
}
.hero__glow {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 195, 0, 0.4), transparent);
  filter: blur(30px);
  z-index: -1;
}

/* Scroll cue — vertical, pinned to the RIGHT gutter and optically centred.

   It used to sit bottom-left, which collided with the stat row once that
   became an inline row occupying the full width of the text column. The
   right gutter is the one strip of the hero that no content ever enters:
   the video's mask feathers to fully transparent before this point, so the
   cue never sits on top of footage.

   Centred with top/bottom:0 + margin-block:auto rather than a translate,
   because the reduced-motion block resets transforms on .scrollcue — which
   would have knocked a transform-based centring out of alignment. */
.scrollcue {
  position: absolute;
  left: auto;
  right: max(8px, calc(var(--gutter) - 22px));
  top: 0;
  bottom: 0;
  height: max-content;
  /* PHYSICAL margins on purpose. `margin-block: auto` looks equivalent but
     isn't here: writing-mode: vertical-rl swaps the logical axes, so
     margin-block maps to left/right and the auto-centring silently applied
     on the wrong axis, pinning this to the top of the hero. */
  margin-top: auto;
  margin-bottom: auto;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 12px;
  writing-mode: vertical-rl;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-400);
  opacity: calc(1 - var(--hp, 0) * 2);
}
.scrollcue i {
  width: 1px;
  height: 52px;
  background: linear-gradient(var(--gold-500), transparent);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue {
  0%,
  100% {
    transform: scaleY(0.4);
    transform-origin: top;
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}

/* Partner strip */
.partners {
  position: relative;
  z-index: 1;
  /* Bounded rather than auto, so tall viewports get breathing room without
     short viewports pushing the strip out of the hero. */
  margin-top: clamp(24px, 7vh, 86px);
  padding-top: 20px;
  border-top: 1px solid var(--ink-200);
  opacity: calc(1 - var(--hp, 0) * 2);
}
/* Caption with hairlines running out to either side. */
.partners__cap {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 20px;
}
.partners__cap::before,
.partners__cap::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-200));
}
.partners__cap::after {
  background: linear-gradient(90deg, var(--ink-200), transparent);
}
.partners__cap span {
  flex: 0 0 auto;
}
/* Centred with a generous gap, NOT space-between: with only three real
   client logos, space-between pushed them to the far edges and left a void
   in the middle. Centring keeps the group reading as one row however many
   logos there are. */
.partners__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 76px);
}
.partners__logo {
  font-size: clamp(0.95rem, 1.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  opacity: 0.45;
  filter: grayscale(1);
  white-space: nowrap;
  transition: opacity var(--t-ui) ease, filter var(--t-ui) ease;
}
.partners__logo:hover {
  opacity: 1;
}
/* Real client logo images, presented as white cards.

   These aren't clean transparent logo marks — they're detailed artwork with
   baked-in white backgrounds (a wordmark with a tagline, a full saree-shop
   banner, a circular badge). Two consequences drove this treatment:

   1. At the 34px height a tidy vector mark would take, this much detail
      collapses into an unreadable smudge. They need real size to function
      as recognition, which is the entire point of a client strip.
   2. Their white backgrounds would otherwise read as random white rectangles
      floating on cream. Framing them in a deliberate white card with a
      hairline makes that white intentional rather than accidental.

   Full greyscale also destroyed them, so this desaturates only partially and
   clears completely on hover. */
img.partners__logo {
  height: clamp(52px, 5.4vw, 66px);
  width: auto;
  max-width: 168px;
  object-fit: contain;
  padding: 9px 16px;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  filter: grayscale(0.5) contrast(1.02);
  opacity: 0.92;
  transition: opacity var(--t-ui) ease, filter var(--t-ui) ease,
    transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) ease;
}
img.partners__logo:hover {
  filter: none;
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ---------- 10. STATEMENT --------------------------------------------- */
.statement {
  position: relative;
  background: var(--cream-100);
}
.statement__track {
  height: 230vh;
}
.statement__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
  overflow: hidden;
}
.statement__mark {
  position: absolute;
  width: min(72vw, 720px);
  opacity: 0.05;
  transform: translateY(calc(60px - var(--p, 0) * 160px));
  pointer-events: none;
}
.statement__text {
  position: relative;
  max-width: 20ch;
  text-align: center;
  font-size: clamp(2rem, 6.4vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin-inline: auto;
}
.js .statement__text .w {
  color: var(--ink-200);
  transition: color 0.35s ease;
}
/* No-JS fallback: the sentence reads as fully lit. */
html:not(.js) .statement__text .w.is-accent {
  color: var(--gold-ink);
  font-style: italic;
}
.statement__text .w.is-lit {
  color: var(--ink-900);
}
.statement__text .w.is-accent.is-lit {
  color: var(--gold-ink);
  font-style: italic;
}

/* ---------- 11. SERVICES (pinned horizontal) --------------------------- */
/* The section itself is the tall scroll wrapper, so it carries no padding —
   its height is set by JS to exactly (viewport + track overflow) so that
   scrub progress 0..1 maps 1:1 onto the track's travel. */
.hs {
  position: relative;
  padding-block: 0;
}
.hs__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hs__head {
  padding-inline: var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
  width: 100%;
  margin-bottom: 30px;
}
.hs__rail {
  position: relative;
  overflow: hidden;
}
.hs__track {
  display: flex;
  gap: 22px;
  padding-inline: var(--gutter);
  width: max-content;
  transform: translate3d(calc(var(--p, 0) * -1 * var(--shift, 0px)), 0, 0);
  will-change: transform;
}
/* Yellow thread the cards hang from */
.hs__thread {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-500) 12%,
    var(--gold-500) 88%,
    transparent
  );
  opacity: 0.5;
}

.scard {
  position: relative;
  width: 300px;
  flex: 0 0 auto;
  padding-top: 26px;
  transition: transform 0.45s var(--ease-expo);
}
.scard.is-active {
  transform: translateY(-10px);
}
.scard__i {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold-500);
  transition: color 0.4s ease;
}
.scard.is-active .scard__i {
  color: var(--gold-500);
}
/* position:relative is required — without it the absolutely positioned
   photo escapes and fills the whole .scard, hiding the index, heading and
   description behind the image. */
.scard__media {
  position: relative;
  margin-top: 16px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
}
.scard h3 {
  margin-top: 18px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.scard p {
  margin-top: 9px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--on-dark-dim);
}

/* Mobile: the SAME cards restack vertically with alternating image
   alignment. No duplicated markup, no horizontal pinning below 1024px. */
@media (max-width: 1023px) {
  /* The track carries the page gutter and container width itself, matching
     .hs__head above it. Without this it inherited padding-inline: 0 from the
     desktop horizontal-rail layout, so every card sat flush against the left
     edge of the screen while the section heading was correctly indented. */
  .hs__track {
    display: grid;
    gap: 0;
    width: auto;
    transform: none !important;
    padding-inline: var(--gutter);
    max-width: var(--container);
    margin-inline: auto;
  }
  .hs__thread {
    display: none;
  }
  .scard {
    width: 100%;
    padding: 26px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  /* The alternating inset that gives this stack rhythm on a tablet becomes a
     ragged, broken-looking left edge at phone width, where there isn't enough
     room for the offset to read as deliberate. Straight edge below 700px. */
  @media (min-width: 700px) {
    .scard:nth-child(even) {
      padding-left: 8%;
    }
    .scard:nth-child(even) .scard__media {
      margin-right: 12%;
    }
  }
  .scard__i {
    font-size: 1.6rem;
  }
  .scard__media {
    aspect-ratio: 4 / 3;
  }
  .scard.is-active {
    transform: none;
  }
}

/* ---------- 12. SHOWREEL ---------------------------------------------- */
.showreel {
  position: relative;
  background: var(--ink-900);
}
.showreel__track {
  height: 220vh;
}
.showreel__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.showreel__word {
  position: absolute;
  font-size: clamp(3.5rem, 15vw, 13rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 195, 0, 0.55);
  white-space: nowrap;
  transform: scale(calc(0.85 + var(--p, 0) * 0.9));
  opacity: calc(1 - var(--p, 0) * 0.55);
  pointer-events: none;
}
.showreel__panel {
  position: relative;
  width: 100%;
  height: 100%;
  clip-path: inset(
    calc(20% - var(--p, 0) * 20%) calc(26% - var(--p, 0) * 26%) round
      calc(24px - var(--p, 0) * 24px)
  );
  overflow: hidden;
  background: #101013;
  display: grid;
  place-items: center;
}
.showreel__panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showreel__inner {
  position: relative;
  text-align: center;
  padding: var(--gutter);
  display: grid;
  gap: 20px;
  justify-items: center;
}
.showreel__mark {
  width: min(38vw, 240px);
  opacity: 0.22;
  animation: spin 34s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.showreel__note {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-500);
}

/* ---------- 13. PROCESS ----------------------------------------------- */
.process__grid {
  display: grid;
  gap: 34px;
}
.process__pin {
  position: relative;
}
.process__num {
  position: relative;
  height: 1em;
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--gold-500);
  font-variant-numeric: tabular-nums;
}
.process__num span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(38%);
  transition: opacity 0.4s ease, transform 0.55s var(--ease-expo);
}
.process__num span.is-on {
  opacity: 1;
  transform: translateY(0);
}
.process__label {
  margin-top: 6px;
  height: 1.3em;
  position: relative;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.process__label span {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity 0.4s ease, transform 0.55s var(--ease-expo);
}
.process__label span.is-on {
  opacity: 1;
  transform: translateY(0);
}
.process__bar {
  margin-top: 22px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.process__bar i {
  display: block;
  height: 100%;
  background: var(--gold-500);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}
.process__steps {
  display: grid;
  gap: 18px;
}
.pstep {
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.pstep__k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.pstep h3 {
  margin-top: 12px;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.pstep p {
  margin-top: 12px;
  color: var(--on-dark-dim);
  line-height: 1.7;
  max-width: 48ch;
}
.pstep ul {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pstep li {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--on-dark);
}

/* ---------- 14. INDUSTRIES -------------------------------------------- */
.ind {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.icard {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-50);
  border: 1px solid var(--ink-200);
  /* Let the browser skip painting cards that are off-screen. */
  contain: paint;
  transition: transform 0.5s var(--ease-expo), box-shadow 0.5s var(--ease-out),
    border-color 0.4s ease;
}
.icard:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold-500);
}
.icard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
/* Duotone ink+gold that resolves to full colour on hover */
/* Gold wash over the photo. Deliberately a plain translucent overlay rather
   than mix-blend-mode: multiply — blend modes force the browser to isolate a
   stacking context and re-blend the layer on every paint, which was the main
   source of scroll jank in this section with six large photos on screen. */
.icard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 195, 0, 0.26);
  opacity: 1;
  transition: opacity 0.5s var(--ease-out);
}
.icard:hover .icard__media::after {
  opacity: 0;
}
.icard__body {
  padding: 20px 22px 24px;
}
.icard__body h3 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.icard__body p {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--ink-400);
  line-height: 1.6;
}

/* ---------- 15. IMPACT ------------------------------------------------ */
.impact {
  position: relative;
}
.impact__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 800px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 195, 0, 0.3),
    transparent 72%
  );
  filter: blur(60px);
  transform: translate(-50%, calc(-50% + var(--p, 0) * 90px));
  pointer-events: none;
}
.counters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  text-align: center;
}
.counter__v {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.counter__v i {
  color: var(--gold-500);
  font-style: normal;
}
.counter__l {
  margin-top: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--on-dark-dim);
}

/* ---------- 16. REELS WALL -------------------------------------------- */
.reels {
  position: relative;
  background: var(--ink-900);
}
.reels__head {
  padding-inline: var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
  width: 100%;
}

/* Mobile: snap carousel */
.reels__scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px var(--gutter) 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reels__scroller::-webkit-scrollbar {
  display: none;
}
.reels__scroller > * {
  scroll-snap-align: center;
  width: 72vw;
  flex: 0 0 auto;
}
/* Carousel dots.

   These are only ever shown below 1024px — i.e. on touch — so the tap target
   matters more than anything. The dot itself used to BE the button at 8x8px,
   which is roughly a fifth of the ~44px minimum a fingertip needs and was
   genuinely difficult to hit.

   The button is now a 40px square with the visible dot drawn by ::before, so
   the indicator stays as small and subtle as before while the touch area
   around it is comfortable. The gap drops to 2px because the buttons
   themselves now provide all the spacing. */
.reels__dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 0;
}
.reels__dots button {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border-radius: 50%;
}
.reels__dots button::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.reels__dots button.is-on::before {
  background: var(--gold-500);
  transform: scale(1.35);
}

/* Reel card */
.reel {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #121216;
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  transition: transform 0.5s var(--ease-expo), box-shadow 0.5s var(--ease-out),
    border-color 0.4s ease;
}
.reel:hover {
  transform: translateY(-8px);
  border-color: var(--gold-500);
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.7);
}
.reel__v,
.reel__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Desaturation is applied only to idle cards, and is not transitioned.
   Animating `filter` on six simultaneous video layers meant a fresh GPU pass
   per layer per frame, which is what made this section stutter. */
.reel:not(.is-playing) .reel__v {
  filter: saturate(0.6);
}
.reel__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 13, 0.36) 0%,
    transparent 26%,
    transparent 52%,
    rgba(13, 13, 13, 0.88) 100%
  );
}
.reel__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 18px 20px;
  color: var(--white);
}
.reel__cat {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.reel__client {
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.reel__res {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
}
.reel__sound {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--ink-900);
  box-shadow: var(--shadow-md);
}
.reel__sound svg {
  width: 15px;
  height: 15px;
}
.reel__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.reel:hover .reel__play {
  opacity: 1;
}
.reel__play i {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 195, 0, 0.92);
  color: var(--ink-900);
}
.reel__play svg {
  width: 20px;
  height: 20px;
}

/* Reel placeholder state — animated, deliberate, never broken-looking */
.reel__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  align-content: center;
  background: linear-gradient(155deg, #1b1a14, #2e2405 48%, #121216);
  background-size: 100% 220%;
  animation: phshift 7s ease-in-out infinite alternate;
}
@keyframes phshift {
  to {
    background-position: 0 100%;
  }
}
.reel__ph i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 195, 0, 0.55);
  color: var(--gold-500);
}
.reel__ph i svg {
  width: 18px;
  height: 18px;
}
.reel__ph b {
  font-size: 2.2rem;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 195, 0, 0.5);
  letter-spacing: -0.04em;
}
.reel__ph em {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-style: normal;
  color: rgba(255, 195, 0, 0.75);
}

/* Lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.lb.is-open {
  opacity: 1;
  visibility: visible;
}
.lb__stage {
  position: relative;
  height: min(85vh, 1000px);
  aspect-ratio: 9 / 16;
  max-width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #000;
  transform: scale(0.94);
  transition: transform 0.5s var(--ease-expo);
}
.lb.is-open .lb__stage {
  transform: scale(1);
}
.lb__stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.lb__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.16);
}
.lb__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold-500);
}
.lb__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: center;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.lb__btn {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--white);
  transition: background-color 0.3s ease;
}
.lb__btn:hover {
  background: var(--gold-500);
  color: var(--ink-900);
}
.lb__btn svg {
  width: 18px;
  height: 18px;
}
.lb__close {
  top: 18px;
  right: 18px;
}
.lb__prev {
  left: 18px;
  top: 50%;
  margin-top: -24px;
}
.lb__next {
  right: 18px;
  top: 50%;
  margin-top: -24px;
}
.lb__ph {
  position: absolute;
  inset: 0;
}

/* ---------- 17. WORK & TESTIMONIALS ----------------------------------- */
.wrow {
  display: grid;
  gap: 24px;
  padding-block: clamp(36px, 6vw, 68px);
  border-top: 1px solid var(--ink-200);
  align-items: center;
}
.wrow__media {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* Client logo, framed rather than cropped: a logo is a mark to display in
   full, not a photo to fill the box with (which would crop it). Sits on a
   soft cream card so logos of any shape or background read consistently.

   .wrow__media--logo is the SAME element as .wrow__media (combined classes
   in the markup), which already has a definite height from aspect-ratio —
   that's what makes this work. Plain padding (shrinks the content box
   thanks to the global box-sizing:border-box reset) plus a normal
   width:100%/height:100% img is enough; no position:absolute needed.

   Earlier attempts got this wrong twice:
   1) img at width/height:100% inside a `display:grid; place-items:center`
      box — percentage height couldn't resolve against a box whose own
      height only comes from aspect-ratio in grid layout, so the browser
      silently ignored object-fit:contain and sized the image by its own
      ratio, and overflow:hidden then cropped whatever spilled out.
   2) img with position:absolute + inset:12% + width/height:100% together —
      that's CSS-over-constrained (all four insets AND both dimensions
      specified), so the spec requires the browser to ignore the computed
      right/bottom and use left+top+width+height instead, which put the img
      back at full size, just offset — still overflowing past the box and
      getting clipped the same way. */
.wrow__media--logo {
  padding: 12%;
  background: var(--cream-50);
  border: 1px solid var(--ink-200);
}
.wrow__media--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wrow__k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.wrow h3 {
  margin-top: 12px;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.wrow__dl {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}
.wrow__dl div {
  display: flex;
  gap: 12px;
  font-size: 0.9rem;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-200);
}
.wrow__dl dt {
  flex: 0 0 104px;
  color: var(--ink-400);
  font-weight: 600;
}
.wrow__dl dd {
  margin: 0;
  font-weight: 600;
}

.tgrid {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}
/* Two real testimonials read better as two wide cards than squeezed into a
   3-column grid built for more. Overrides the default 3-column rule at the
   breakpoint below. */
.tgrid--two {
  max-width: 900px;
  margin-inline: auto;
}
.tcard {
  padding: 28px 26px;
  border-radius: var(--r-lg);
  background: var(--cream-50);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-sm);
  transition: transform 0.5s var(--ease-expo), box-shadow 0.5s var(--ease-out);
}
.tcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.tcard__q {
  font-size: 3.4rem;
  line-height: 0.6;
  font-weight: 900;
  color: var(--gold-500);
}
.tcard blockquote {
  margin: 16px 0 0;
  font-size: 1.02rem;
  line-height: 1.65;
  font-weight: 500;
}
.tcard figcaption {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tcard__av {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-ink);
  font-weight: 800;
  font-size: 0.8125rem;
  flex: 0 0 auto;
}
.tcard__who b {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
}
.tcard__who span {
  font-size: 0.8125rem;
  color: var(--ink-400);
}

/* ---------- 18. PRICING ----------------------------------------------- */
.plans {
  display: grid;
  gap: 20px;
  align-items: start;
}
.plan {
  position: relative;
  padding: 32px 28px 34px;
  border-radius: var(--r-lg);
  background: var(--cream-50);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-sm);
  transition: transform 0.6s var(--ease-expo), box-shadow 0.5s var(--ease-out);
}
.plan:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
/* Middle tier inverts to ink — hierarchy without scale tricks */
.plan--feature {
  background: var(--ink-900);
  color: var(--white);
  border-color: var(--ink-900);
  box-shadow: var(--shadow-xl);
  padding-top: 42px;
}
.plan--feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--gold-500);
}
.plan__tag {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--gold-500);
  color: var(--ink-900);
}
.plan__name {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.plan__for {
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--ink-400);
}
.plan--feature .plan__for {
  color: var(--on-dark-dim);
}
.plan__price {
  margin-top: 22px;
}
.plan__amt {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.15;
  display: block;
}
.plan__per {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--ink-400);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plan--feature .plan__per {
  color: var(--gold-500);
}
.plan__feats {
  margin-top: 26px;
  display: grid;
  gap: 12px;
}
.plan__feats li {
  display: flex;
  gap: 11px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.plan__feats svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--gold-ink);
}
.plan--feature .plan__feats svg {
  color: var(--gold-500);
}
.plan__cta {
  margin-top: 30px;
}
.plan__feats strong {
  font-weight: 800;
}

/* ---- 3-month programme band ----------------------------------------- */
.program {
  position: relative;
  margin-top: 24px;
  padding: 34px 28px;
  border-radius: var(--r-lg);
  background: var(--ink-900);
  color: var(--white);
  box-shadow: var(--shadow-xl);
  display: grid;
  gap: 30px;
  overflow: hidden;
}
.program::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
}
.program__head .eyebrow {
  color: var(--gold-500);
}
.program__head h3 {
  margin-top: 12px;
}
.program__note {
  margin-top: 12px;
  color: var(--on-dark-dim);
  font-size: 0.95rem;
  max-width: 40ch;
}
.program__price {
  margin-top: 22px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.program__amt {
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.program__per {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.program__reach {
  margin: 22px 0 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 195, 0, 0.09);
  border: 1px solid rgba(255, 195, 0, 0.22);
}
.program__reach b {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.program__reach span {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--on-dark-dim);
  line-height: 1.45;
}
.program__feats {
  margin-top: 0;
  align-content: start;
}
.program__feats svg {
  color: var(--gold-500);
}

/* ---- Negotiable-pricing note ---------------------------------------- */
.pricing__disclaimer {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--gold-100);
  border: 1px solid var(--gold-300);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-600);
  max-width: 78ch;
  margin-inline: auto;
}
.pricing__disclaimer svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--gold-ink);
}

/* ---------- 19. LOUD CTA ---------------------------------------------- */
.cta-loud {
  position: relative;
  background: var(--gold-500);
  color: var(--ink-900);
  padding-block: clamp(80px, 13vw, 170px);
  overflow: clip;
  text-align: center;
}
.cta-loud__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(85vw, 780px);
  transform: translate(-50%, -50%);
  opacity: 0.08;
  animation: spin 44s linear infinite;
  pointer-events: none;
}
.cta-loud__mark path {
  stroke: var(--ink-900) !important;
}
.cta-loud h2 {
  max-width: 22ch;
  margin-inline: auto;
}
.cta-loud__btns {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.magnetic {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 0.35s var(--ease-out);
}

/* ---------- 20. CONTACT ----------------------------------------------- */
.contact__grid {
  display: grid;
  gap: 44px;
}
.field {
  position: relative;
  margin-bottom: 22px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 26px 2px 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-200);
  border-radius: 0;
  font-size: 1rem;
  font-weight: 600;
  appearance: none;
  transition: border-color 0.3s ease;
}
.field textarea {
  min-height: 104px;
  resize: vertical;
}
.field select {
  cursor: pointer;
}
.field label {
  position: absolute;
  left: 2px;
  top: 22px;
  font-size: 1rem;
  color: var(--ink-400);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.32s var(--ease-expo), color 0.3s ease;
}
/* Floating label */
.field input:focus + label,
.field textarea:focus + label,
.field select:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field select[data-filled="1"] + label {
  transform: translateY(-20px) scale(0.72);
  color: var(--gold-ink);
}
/* Gold focus underline that draws left → right */
.field::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-expo);
}
.field:focus-within::after {
  transform: scaleX(1);
}
.field :focus-visible {
  outline: none;
}
.field__err {
  display: block;
  margin-top: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--danger);
  min-height: 1em;
}
.field.is-bad input,
.field.is-bad select,
.field.is-bad textarea {
  border-bottom-color: var(--danger);
}

.form__submit {
  position: relative;
  overflow: hidden;
}
.form__note {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--ink-400);
  min-height: 1.4em;
}
.form__note.is-ok {
  color: var(--success);
  font-weight: 600;
}
.form__note.is-bad {
  color: var(--danger);
  font-weight: 600;
}

.cinfo {
  display: grid;
  gap: 4px;
}
.cinfo__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-200);
}
.cinfo__row span {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.cinfo__row b,
.cinfo__row a {
  display: block;
  margin-top: 3px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cinfo__row a:hover {
  color: var(--gold-ink);
}
.cmap {
  margin-top: 28px;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--ink-200);
  background: var(--cream-200);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
}
.cmap__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(13, 13, 13, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 13, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
}
.cmap__pin {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.cmap__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 6px rgba(255, 195, 0, 0.25),
    0 0 0 14px rgba(255, 195, 0, 0.12);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    box-shadow: 0 0 0 10px rgba(255, 195, 0, 0.2),
      0 0 0 22px rgba(255, 195, 0, 0.07);
  }
}
.cmap b {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cmap span {
  font-size: 0.8125rem;
  color: var(--ink-400);
}

/* ---------- 21. FOOTER ------------------------------------------------ */
.foot {
  background: var(--ink-900);
  color: var(--on-dark);
  padding-top: 60px;
  overflow: clip;
}
.foot__cols {
  display: grid;
  gap: 34px;
  padding-bottom: 48px;
}
.foot__col h4 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 16px;
}
.foot__col li + li {
  margin-top: 10px;
}
.foot__col a {
  font-size: 0.9rem;
  color: var(--on-dark-dim);
  transition: color var(--t-micro) ease;
}
.foot__col a:hover {
  color: var(--white);
}
.foot__brand p {
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--on-dark-dim);
  max-width: 34ch;
  line-height: 1.7;
}
.foot__word {
  padding-block: 10px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.foot__word span {
  display: block;
  font-size: clamp(2rem, 11vw, 9rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.05em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  transition: transform 1s var(--ease-expo), opacity 0.7s ease;
}
.js .foot__word span {
  transform: translateY(60%);
  opacity: 0;
}
.foot__word.is-in span {
  transform: translateY(0);
  opacity: 1;
}
.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8125rem;
  color: var(--on-dark-dim);
}
.totop {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  color: var(--white);
}
.totop i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--ink-900);
  transition: transform var(--t-ui) var(--ease-expo);
}
.totop:hover i {
  transform: translateY(-3px);
}
.totop svg {
  width: 15px;
  height: 15px;
}

/* Sticky WhatsApp bubble */
.wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 140;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--ink-900);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-expo),
    visibility 0.4s;
}
.wa.is-on {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.wa::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  animation: ring 2.4s ease-out infinite;
}
@keyframes ring {
  0% {
    transform: scale(0.85);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
.wa svg {
  width: 26px;
  height: 26px;
}

/* ---------- 22. MARQUEE ----------------------------------------------- */
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap, 0px);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.marquee__row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  min-width: 100%;
  animation: slide var(--dur, 26s) linear infinite;
  animation-play-state: var(--play, running);
}
.marquee--rev .marquee__row {
  animation-direction: reverse;
}
@keyframes slide {
  to {
    transform: translateX(-100%);
  }
}
.marquee span {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: 0.8;
}
.marquee--tilt {
  transform: rotate(-2deg);
  margin-block: 26px;
}
/* Tighter inside the pinned reels stage, where vertical space is budgeted. */
.reels__head .marquee--tilt {
  margin-block: 0 12px;
}
.marquee--band {
  padding-block: 16px;
  border-block: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--gold-500);
}
.marquee--gold {
  background: var(--gold-500);
  color: var(--ink-900);
  padding-block: 14px;
}
.marquee--partners span {
  font-size: clamp(0.95rem, 1.5vw, 1.3rem);
  letter-spacing: -0.02em;
  text-transform: none;
  font-weight: 700;
  opacity: 0.45;
  filter: grayscale(1);
}

/* ---------- 23. RESPONSIVE -------------------------------------------- */
@media (min-width: 640px) {
  .ind,
  .tgrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .counters {
    grid-template-columns: repeat(3, 1fr);
  }
  .reels__scroller > * {
    width: 46vw;
  }
}

@media (min-width: 900px) {
  /* Two monthly plans side by side; the programme sits below as a band. */
  .plans {
    grid-template-columns: repeat(2, 1fr);
    max-width: 860px;
    margin-inline: auto;
  }
  .program {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    padding: 44px 40px;
    max-width: 1060px;
    margin-inline: auto;
  }
  .tgrid {
    grid-template-columns: repeat(3, 1fr);
  }
  .tgrid--two {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
  }
  .foot__cols {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
  .wrow {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
  }
  .wrow--flip .wrow__media {
    order: 2;
  }
}

@media (min-width: 1024px) {
  .nav__links,
  .nav__cta {
    display: flex;
  }
  .burger {
    display: none;
  }
  .hero {
    padding-bottom: 20px;
  }
  .hero__grid {
    grid-template-columns: 48fr 52fr;
    gap: 30px;
  }
  .scrollcue {
    display: flex;
  }
  /* Asymmetric masonry — deliberately uneven */
  .ind {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  .ind > :nth-child(2) {
    margin-top: 52px;
  }
  .ind > :nth-child(3) {
    margin-top: 20px;
  }
  .ind > :nth-child(5) {
    margin-top: 44px;
  }
  .ind > :nth-child(6) {
    margin-top: 14px;
  }
  .process__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: start;
  }
  .process__pin {
    position: sticky;
    top: calc(50svh - 130px);
  }
  .plan--feature {
    margin-top: -22px;
    padding-bottom: 46px;
  }
  .statcard__cell {
    padding: 22px 20px;
  }
}

/* Desktop-only: pinned horizontal rails */
@media (min-width: 1024px) {
  .hs__track {
    gap: 26px;
  }
  .reels__rail {
    position: relative;
    overflow: hidden;
  }
  .reels__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  .reels__scroller {
    overflow: visible;
    scroll-snap-type: none;
    padding: 0 var(--gutter);
    width: max-content;
    gap: 22px;
    transform: translate3d(calc(var(--p, 0) * -1 * var(--shift, 0px)), 0, 0);
    will-change: transform;
  }
  /* Height is driven by the viewport and the width follows from the locked
     9:16 ratio, so the heading + card row always fit inside the pinned
     stage instead of overflowing and getting clipped. */
  .reels__scroller > * {
    height: min(54svh, 560px);
    width: auto;
    /* Arc: middle cards ride higher, alternating counter-rotation that
       eases out as a card nears viewport centre. */
    transform: translateY(var(--arc, 0px)) rotate(var(--rot, 0deg));
    transition: transform 0.5s var(--ease-expo);
  }
  .reels__dots {
    display: none;
  }
}

/* ---------- TOUCH TARGET SIZING --------------------------------------- */
/* Width-based rather than `pointer: coarse`.

   Coarse-pointer is arguably the more semantically correct signal — what
   matters is fingertips, not window width — but it's unverifiable in a
   headless browser (which reports pointer: fine) and some touch laptops
   report it misleadingly. Width is deterministic, testable, and every phone
   and tablet is inside this range. The only cost is that a narrow desktop
   window also gets slightly taller footer rows, which is harmless. */
@media (max-width: 1023px) {
  /* Footer nav links were ~27px tall and the legal/social rows ~19px, both
     well under the ~44px a fingertip reliably hits. Grown with padding rather
     than font-size so the visual design is unchanged — the row spacing just
     absorbs the extra height. */
  .foot__col a,
  .menu__foot a,
  .foot__bar a:not(.totop) {
    display: inline-block;
    padding-block: 10px;
  }
  .foot__col li + li {
    margin-top: 0;
  }
  .menu__foot {
    gap: 4px 22px;
  }
  /* Services dropdown links in the mobile menu. */
  .nav__drop a {
    padding-block: 13px;
  }
  /* Contact block: the email, phone and Instagram links were 27px. These are
     the highest-intent taps on the whole page, so they matter most. */
  .cinfo__row a {
    padding-block: 9px;
    margin-block: -9px;
  }
  /* Back-to-top sat at 34px, just under the threshold. */
  .totop {
    padding-block: 6px;
  }
  /* The header logo doubles as the home link. */
  .logo {
    padding-block: 7px;
  }
}

@media (max-width: 1023px) {
  /* The partner caption sat at 11px, below a comfortable reading floor on a
     phone even for an uppercase label. */
  .partners__cap {
    font-size: 0.75rem;
  }

  /* HERO, single-column.

     Below 1024px the grid collapses to one column. The dedicated mobile clip
     (see .hero__video--mobile further down) and its own scrim rule handle
     keeping the copy legible over it. */
  .hero__aurora {
    opacity: 0.55;
  }

  /* MOBILE HERO VIDEO — lives INSIDE .hero__visual, not in the .hero__bg
     background layer the desktop clips use.

     This section previously reused the 16:9 desktop footage on mobile, sat
     it as a full background layer, and had to shrink and shove it around
     with percentage-of-hero-height math to stop it colliding with the copy
     — math that broke every time anything above it in the layout changed
     size. A real 4:5 clip shot for this layout removes the need for any of
     that: .hero__grid already stacks .hero__content directly above
     .hero__visual in normal document flow at this width (see index.html),
     so simply being an element inside that box — the same box the CSS
     laptop mock occupies on desktop — places the video exactly in the gap
     after the stats and before the partner strip. No coordinate math, and
     nothing to keep in sync if the content above resizes.

     Confirmed by inspecting frames from both mainvideomobile1.mp4 and
     mainvideomobile2.mp4 that the laptop sits centred throughout each clip,
     not just in one frame, which is what makes "just centre it" a safe
     instruction rather than a lucky screenshot. */
  .hero__visual {
    position: relative;
    min-height: 260px;
  }
  .hero__video--mobile {
    /* .hero__visual itself is visibility:hidden by default — it's the CSS
       laptop mock's last-resort slot, only revealed via .hero.no-video (see
       the .js .hero__visual rule above). visibility is inherited, so the
       video needed its own explicit override or it would sit correctly
       positioned and completely invisible, which is exactly what happened
       on the first pass at this. opacity is controlled separately by
       .is-on, same as the desktop pair, so this only restores visibility. */
    visibility: visible;
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    width: auto;
    height: 100%;
    max-width: 94%;
    transform: translate(-50%, -50%) translateY(calc(var(--hp, 0) * 30px))
      scale(calc(1 + var(--hp, 0) * 0.05));
    /* A softer, more contained feather than the desktop mask — this clip
       reads as a clear centrepiece rather than a wash bleeding off an edge,
       and it needs a bit of its own fade since it now sits directly on the
       page's cream background rather than under a dedicated scrim. */
    -webkit-mask-image: radial-gradient(
      58% 60% at 50% 50%,
      #000 46%,
      transparent 92%
    );
    mask-image: radial-gradient(58% 60% at 50% 50%, #000 46%, transparent 92%);
  }
  /* Less air above the partner strip at this width — the taller stacked
     layout already provides plenty of separation. */
  .partners {
    margin-top: clamp(20px, 4vh, 44px);
  }
  /* Tighter stat row: at this width the full-size numbers and wide-tracked
     labels ran into each other. */
  .statcard {
    gap: 16px;
  }
  .statcard__cell + .statcard__cell::before {
    left: -8px;
  }
  .statcard__val {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .statcard__lab {
    font-size: 0.6rem;
    letter-spacing: 0.09em;
  }

  /* No pinning and no horizontal travel below 1024px. */
  .hs {
    padding-block: clamp(72px, 12vw, 160px);
  }
  .hs__stage {
    position: static;
    height: auto;
    display: block;
  }
  .hs__rail {
    overflow: visible;
  }
  .hs__head {
    margin-bottom: 10px;
  }
  .reels {
    padding-block: clamp(72px, 12vw, 140px);
  }
  .reels__stage {
    display: block;
  }
  .reels__head {
    margin-bottom: 26px;
  }
}

/* ---------- 24. REDUCED MOTION ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Unpin everything and drop all scrubbed transforms */
  .statement__track,
  .showreel__track,
  .hs,
  .reels__rail {
    height: auto !important;
  }
  .statement__stage,
  .showreel__stage,
  .hs__stage,
  .reels__stage,
  .process__pin {
    position: static !important;
    height: auto !important;
    padding-block: 40px;
  }
  .statement__text .w {
    color: var(--ink-900) !important;
  }
  .statement__text .w.is-accent {
    color: var(--gold-ink) !important;
  }
  .hero__content,
  .hero__visual,
  .hero__video,
  .hero__fallback,
  .partners,
  .scrollcue,
  .showreel__word {
    transform: none !important;
    opacity: 1 !important;
  }
  .showreel__panel {
    clip-path: none !important;
  }
  .hs__track,
  .reels__scroller {
    transform: none !important;
  }
  /* Reveals resolve immediately */
  .reveal > *,
  .rw > span,
  .menu__list a,
  .foot__word span {
    transform: none !important;
    opacity: 1 !important;
  }
  .fx {
    opacity: 1 !important;
    transform: none !important;
  }
  .imgwipe {
    clip-path: none !important;
  }
  .imgwipe > * {
    transform: none !important;
  }
  .process__num span,
  .process__label span {
    position: static;
    opacity: 1;
    transform: none;
  }
  .process__num span:not(.is-on),
  .process__label span:not(.is-on) {
    display: none;
  }
  /* The brush highlight is a design element, not decoration — it must be
     present, just not swept in. */
  .hero__hl::before {
    transform: rotate(-0.7deg) scaleX(1) !important;
    transition: none !important;
  }
  /* Drifting ambient light is exactly the kind of persistent background
     motion this preference exists to stop. Hold it still. */
  .hero__aurora {
    animation: none !important;
    transform: none !important;
  }
  /* Reels: horizontal scroll stays usable, no autoplay */
  .reels__scroller {
    overflow-x: auto !important;
    width: auto !important;
    scroll-snap-type: x mandatory !important;
  }
  .reel__v {
    filter: saturate(1) !important;
  }
  .cursor,
  .cursor-ring {
    display: none !important;
  }
}