/* ============================================================
   MOTIONCRAFT — Design Tokens
   Direction: Premium & restrained. Cinematic negative space,
   slow deliberate motion, rack-focus type reveals, timecode
   motifs (this is a video/animation studio — timecodes and
   scrub-lines are literal vocabulary from their own tools).
   ============================================================ */

:root {
  /* Brand core (same in both themes) */
  --color-primary: #11141B;
  --color-primary-dark: #1D2740;
  --color-accent: #2C4973;
  --color-accent-alt: #4B74A2;

  --gradient-brand: linear-gradient(135deg, #1D2740 0%, #2C4973 100%);
  --gradient-glow: radial-gradient(circle, rgba(44, 73, 115, 0.35), transparent 70%);

  --font-heading: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "Inter", sans-serif;
  /* timecode / eyebrow labels */

  /* Type scale */
  --fs-hero: clamp(2.5rem, 3.4vw + 1.3rem, 4.25rem);
  --fs-h2: clamp(2rem, 4vw, 3.25rem);
  --fs-h3: 23px;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.8125rem;

  /* Spacing (generous, cinematic) */
  --space-section: clamp(3.25rem, 6vw, 5.5rem);
  --space-lg: 3rem;
  --space-md: 1.5rem;
  --space-sm: 0.75rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 5vw, 4rem);
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Motion */
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.6s;
  --dur-slow: 1.1s;
}

/* LIGHT THEME (default) */
:root,
[data-theme="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: rgba(143, 172, 204, 0.15);
  --bg-card: #8faccc38;
  --bg-glass: rgba(143, 172, 204, 0.25);
  --text-primary: #000000;
  --text-secondary: #000000;
  --border-color: rgba(29, 39, 64, 0.15);
  --shadow-color: rgba(17, 20, 27, 0.08);
}

/* DARK THEME */
[data-theme="dark"] {
  --color-primary: #8FACCC;
  --color-primary-dark: #4B74A2;
  --color-accent: #8FACCC;
  --color-accent-alt: #4B74A2;
  --gradient-brand: linear-gradient(135deg, #8FACCC 0%, #4B74A2 100%);
  --bg-primary: #000000;
  --bg-secondary: #11141B;
  --bg-card: #1D2740;
  --bg-glass: rgba(29, 39, 64, 0.55);
  --text-primary: #FFFFFF;
  --text-secondary: #FFFFFF;
  --border-color: rgba(143, 172, 204, 0.2);
  --shadow-color: rgba(0, 0, 0, 0.5);
  --gradient-glow: radial-gradient(circle, rgba(44, 73, 115, 0.18), transparent 70%);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-med) var(--ease-standard),
    color var(--dur-med) var(--ease-standard);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-transform: capitalize;
}

h3 {
  font-size: 23px !important;
}

p {
  margin: 0;
  color: var(--text-secondary);
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
}

::selection {
  background: var(--color-primary);
  color: #fff;
}

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(44, 73, 115, 0.15);
}

/* Visible keyboard focus, everywhere */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   PRELOADER
   Signature-adjacent moment: the mark draws itself like a
   scrub-line finding its cue point, then the shutter opens.
   ============================================================ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  transition: opacity var(--dur-slow) var(--ease-cinematic),
    visibility var(--dur-slow) var(--ease-cinematic);
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__mark {
  width: 72px;
  height: 72px;
}

.preloader__mark circle {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  animation: draw-mark 1.4s var(--ease-cinematic) forwards infinite;
}

.preloader__mark path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: draw-mark-play 1.4s var(--ease-cinematic) forwards infinite;
}

@keyframes draw-mark {
  0% {
    stroke-dashoffset: 210;
  }

  60% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -210;
  }
}

@keyframes draw-mark-play {

  0%,
  20% {
    stroke-dashoffset: 60;
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  70%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* ============================================================
   AMBIENT BACKGROUND (mandatory idle motion)
   Two soft, slow-drifting light sources — restrained, not busy.
   ============================================================ */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.12;
  will-change: transform;
}

[data-theme="dark"] .ambient__orb {
  opacity: 0.12;
}

.ambient__orb--a {
  width: 46vw;
  height: 46vw;
  background: var(--color-primary);
  top: -12vw;
  left: -10vw;
  animation: drift-a 26s ease-in-out infinite;
}

.ambient__orb--b {
  width: 38vw;
  height: 38vw;
  background: var(--color-accent);
  bottom: -14vw;
  right: -8vw;
  animation: drift-b 32s ease-in-out infinite;
}

@keyframes drift-a {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(6vw, 8vw) scale(1.12);
  }
}

@keyframes drift-b {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-5vw, -7vw) scale(1.08);
  }
}

.cursor-glow {
  position: fixed;
  z-index: -1;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: var(--gradient-glow);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-standard);
}

.cursor-glow.is-active {
  opacity: 0.25;
}

[data-theme="dark"] .cursor-glow.is-active {
  opacity: 0.35;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  padding-top: 1.25rem;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.nav {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.6rem 0.6rem 0.6rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 30px -12px var(--shadow-color);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  transition: background-color var(--dur-med) var(--ease-standard),
    border-color var(--dur-med) var(--ease-standard),
    backdrop-filter var(--dur-med) var(--ease-standard),
    box-shadow var(--dur-med) var(--ease-standard);
}

/* Make header solid white/dark when overlapping with marquee to prevent flickering/text-shadow bleed */
.header-solid-bg .nav {
  background: var(--bg-primary) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 30px -10px var(--shadow-color) !important;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.nav__logo-img {
  width: auto;
}

.site-header .nav__logo-img {
  height: 50px;
}

.site-footer__brand .nav__logo-img {
  height: 55px;
}

.nav__logo-img.logo-light-image {
  display: none;
}

.nav__logo-img.logo-dark-image {
  display: block;
}

[data-theme="dark"] .nav__logo-img.logo-light-image {
  display: block;
}

[data-theme="dark"] .nav__logo-img.logo-dark-image {
  display: none;
}

.nav__logo-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.nav__logo-mark circle {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
}

.nav__logo-mark path {
  fill: var(--color-accent);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding-block: 0.25rem;
  transition: color var(--dur-fast) var(--ease-standard);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform var(--dur-med) var(--ease-cinematic);
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--text-primary);
}

.nav__links a:hover::after,
.nav__links a:focus-visible::after {
  transform: scaleX(1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.theme-toggle:hover {
  border-color: var(--color-primary);
  background: rgba(108, 79, 255, 0.08);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.theme-toggle .icon-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

.nav-cta {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.nav-cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px var(--shadow-color);
}

.nav-cta svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 4.5px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--color-primary);
  border: 1.5px solid #ffffff;
  stroke: currentColor;
  position: relative;
  z-index: 2;
  margin-left: 0.5rem;
  transition: transform var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.nav-cta:hover svg {
  transform: rotate(-45deg);
  background: #ffffff;
  color: var(--color-primary-dark);
  border-color: #ffffff;
}

.nav-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 30%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  z-index: 2;
  pointer-events: none;
}

.nav-cta:hover::after {
  animation: btn-shimmer 0.85s var(--ease-cinematic);
}

.hamburger {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: transparent;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.hamburger:hover {
  border-color: var(--color-primary);
}

.hamburger span {
  content: "";
  position: absolute;
  width: 16px;
  height: 1.5px;
  background: var(--text-primary);
  left: 50%;
  top: 50%;
  margin-left: -8px;
  margin-top: -0.75px;
  transition: transform var(--dur-fast) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard);
}

.hamburger span::before,
.hamburger span::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 1.5px;
  background: var(--text-primary);
  left: 0;
  top: 0;
  transition: transform var(--dur-fast) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard);
}

.hamburger span::before {
  transform: translateY(-6px);
}

.hamburger span::after {
  transform: translateY(6px);
}

.hamburger.is-open span {
  background: transparent;
}

.hamburger.is-open span::before {
  transform: rotate(45deg);
}

.hamburger.is-open span::after {
  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-cinematic),
    visibility var(--dur-med) var(--ease-cinematic);
}

/* A real gradient panel instead of a near-solid white/black scrim —
   this was the "whole screen turns white" problem: --scrim in light
   theme is ~70% opaque near-white with nothing else going on.
   Lives directly on .mobile-menu (not the scroll wrapper below) so it
   stays put as a fixed backdrop instead of scrolling away with the
   links. */
.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter var(--dur-med) var(--ease-cinematic),
              -webkit-backdrop-filter var(--dur-med) var(--ease-cinematic);
  will-change: backdrop-filter, -webkit-backdrop-filter;
}

.mobile-menu__glow {
  position: absolute;
  top: -20%;
  right: -25%;
  width: 80vw;
  height: 80vw;
  max-width: 620px;
  max-height: 620px;
  background: var(--gradient-glow);
  filter: blur(70px);
  opacity: 0.6;
  pointer-events: none;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu.is-open::before {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Everything that can outgrow the viewport (7 links + CTA) lives in
   here, scrolling independently of the fixed background above. Content
   starts below the fixed header instead of being vertically centered —
   centering was the actual bug: on shorter viewports it pushed "Home"
   above the top edge and the CTA below the bottom edge, with nothing
   scrollable to reach either. */
.mobile-menu__scroll {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6.5rem;
  padding-bottom: 3rem;
}

.mobile-menu__inner {
  width: 100%;
  max-width: 420px;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mobile-menu__eyebrow {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.5s var(--ease-cinematic), transform 0.5s var(--ease-cinematic);
  margin-bottom: 1.5rem;
}

.mobile-menu.is-open .mobile-menu__eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 5vw, 1.85rem);
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.5s var(--ease-cinematic),
    transform 0.5s var(--ease-cinematic),
    color var(--dur-fast) var(--ease-standard),
    padding-left var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.mobile-menu.is-open .mobile-menu__link {
  opacity: 1;
  transform: translateX(0);
}

.mobile-menu__nav .mobile-menu__link:nth-child(1) {
  transition-delay: 0.08s;
}

.mobile-menu__nav .mobile-menu__link:nth-child(2) {
  transition-delay: 0.13s;
}

.mobile-menu__nav .mobile-menu__link:nth-child(3) {
  transition-delay: 0.18s;
}

.mobile-menu__nav .mobile-menu__link:nth-child(4) {
  transition-delay: 0.23s;
}

.mobile-menu__nav .mobile-menu__link:nth-child(5) {
  transition-delay: 0.28s;
}

.mobile-menu__nav .mobile-menu__link:nth-child(6) {
  transition-delay: 0.33s;
}

.mobile-menu__nav .mobile-menu__link:nth-child(7) {
  transition-delay: 0.38s;
}

.mobile-menu__link:hover,
.mobile-menu__link:focus-visible {
  color: var(--color-primary);
  padding-left: 0.5rem;
  border-color: var(--color-primary);
}

.mobile-menu__link[aria-current="page"] {
  color: var(--color-primary);
}

.mobile-menu__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-secondary);
  min-width: 1.6rem;
  transition: color var(--dur-fast) var(--ease-standard);
}

.mobile-menu__link:hover .mobile-menu__num,
.mobile-menu__link:focus-visible .mobile-menu__num,
.mobile-menu__link[aria-current="page"] .mobile-menu__num {
  color: var(--color-accent);
}

.mobile-menu__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 12px 30px -12px var(--shadow-color);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-cinematic) 0.44s,
    transform 0.5s var(--ease-cinematic) 0.44s,
    box-shadow var(--dur-fast) var(--ease-standard);
}

.mobile-menu.is-open .mobile-menu__cta {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu__cta:hover {
  box-shadow: 0 16px 36px -14px var(--shadow-color);
}

.mobile-menu__cta svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.mobile-menu__cta:hover svg {
  transform: translateX(3px);
}

@media (max-width: 780px) {
  .nav__links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }
}

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

.hero {
  position: relative;
  padding-top: 7rem;
  padding-bottom: var(--space-section);
}

.hero>.container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.hero__inner {
  padding-top: 40px;
  max-width: 640px;
}

.hero__eyebrow {
  margin-bottom: 0.85rem;
}

.hero__timecode {
  font-family: var(--font-mono);
  color: var(--color-accent
  );
}

.hero__headline {
  font-size: var(--fs-hero);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.hero__highlight {
  color: #2C4973;
  font-weight: inherit;
}

[data-theme="dark"] .hero__highlight {
  color: #8FACCC;
}

.hero__headline .line {
  display: block;
}

.hero:not(.hero--compact) .hero__headline .line {
  white-space: nowrap;
}

.hero__headline .word {
  display: inline-block;
  transform: translateY(115%) rotate(2deg);
  filter: blur(14px);
  opacity: 0;
  transition: transform 1s var(--ease-cinematic),
    filter 1s var(--ease-cinematic),
    opacity 1s var(--ease-cinematic);
}

.hero__headline .word.in-view {
  transform: translateY(0) rotate(0deg);
  filter: blur(0);
  opacity: 1;
}

.hero__headline .word--accent {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  max-width: 58ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  margin-bottom: var(--space-lg);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-cinematic),
    transform var(--dur-slow) var(--ease-cinematic);
}

.hero__sub.in-view {
  opacity: 1;
  transform: translateY(0);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-cinematic) 0.15s,
    transform var(--dur-slow) var(--ease-cinematic) 0.15s;
}

.hero__actions.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.btn {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  border: 1.5px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 12px 28px -10px var(--shadow-color);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(20, 18, 31, 0.4);
  color: var(--text-primary);
}

[data-theme="dark"] .btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
}

.btn--ghost:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 30%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  z-index: 2;
  pointer-events: none;
}

.btn:hover::after {
  animation: btn-shimmer 0.85s var(--ease-cinematic);
}

@keyframes btn-shimmer {
  0% {
    left: -50%;
  }
  100% {
    left: 150%;
  }
}

.btn svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 5.5px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  stroke: currentColor;
  position: relative;
  z-index: 2;
  transition: transform var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.btn--primary svg {
  background: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
}

.btn--primary:hover svg {
  background: #ffffff;
  color: var(--color-primary-dark);
  border-color: #ffffff;
}

.btn--ghost svg {
  border-color: currentColor;
}

.btn:hover svg {
  transform: rotate(-45deg);
}

/* Scrub-line: draws under the hero once actions are in — a
   literal timeline scrubber, on-brand for an editing studio. */
.hero__scrub {
  margin-top: var(--space-lg);
  height: 1px;
  background: var(--border-color);
  position: relative;
  max-width: 420px;
}

.hero__scrub::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: 0 0;
  background: var(--gradient-brand);
  transition: transform 1.6s var(--ease-cinematic) 0.4s;
}

.hero__scrub.in-view::after {
  transform: scaleX(0.62);
}

/* ============================================================
   HERO VISUAL — right-column card with two floating stat badges.
   Badge drift is a small, slow vertical bob (not the full hero-shape
   drift) — one moves up-then-back, the other down-then-back, offset
   in timing so they never sync.
   ============================================================ */

.hero__visual {
  position: relative;
  justify-self: center;
  width: 100%;
  transform: scale(1.08);
  max-width: 480px;
  /* slightly increased size for perfect balance */
}

.hero__visual-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  /* slightly taller ratio for more height */
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--color-primary);
  transition: border var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

[data-theme="light"] .hero__visual-card {
  box-shadow: 0 12px 35px rgba(108, 79, 255, 0.15);
}

/* Play button styled overlay */
.hero__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--gradient-brand);
  border: none;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 10px 25px rgba(108, 79, 255, 0.4);
  transition: transform 0.3s var(--ease-cinematic), box-shadow 0.3s var(--ease-cinematic);
}

.hero__play-btn svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
  /* Offset play icon slightly to align visually */
  transition: transform 0.3s var(--ease-cinematic);
}

.hero__play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 12px 30px rgba(108, 79, 255, 0.6);
}

.hero__play-btn:active {
  transform: translate(-50%, -50%) scale(0.95);
}

/* Pulsing outer ring animation for play button */
.hero__play-btn::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  opacity: 0.5;
  animation: playPulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes playPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.hero__visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fill the card fully — no top/bottom dead space */
  object-position: center;
  display: block;
  border-radius: var(--radius-lg);
}

.hero__visual-img.light-only {
  display: none;
}

.hero__visual-img.dark-only {
  display: none;
}

[data-theme="light"] .hero__visual-img.light-only {
  display: block;
}

[data-theme="dark"] .hero__visual-img.dark-only {
  display: block;
}

.hero__visual-glow {
  position: absolute;
  inset: -20%;
  animation: hero-visual-glow-shift 12s ease-in-out infinite;
}

@keyframes hero-visual-glow-shift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(3%, -3%) scale(1.06);
  }
}

.hero__visual-icon {
  position: relative;
  width: 42%;
  height: 42%;
  filter: drop-shadow(0 18px 30px rgba(108, 79, 255, 0.35));
}

.hero__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 44px -20px var(--shadow-color);
  max-width: 220px;
  will-change: transform;
}

.hero__badge--a {
  left: -6%;
  bottom: 10%;
  animation: hero-badge-drift-a 6.5s ease-in-out infinite;
}

.hero__badge--b {
  right: -6%;
  top: 8%;
  animation: hero-badge-drift-b 7.5s ease-in-out infinite;
}

/* Small, deliberate range — a gentle bob, not a full drift-shape
   journey. One rises then settles, the other sinks then settles. */
@keyframes hero-badge-drift-a {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes hero-badge-drift-b {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

.hero__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient-brand);
}

.hero__badge-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
}

.hero__badge-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.3;
}

.hero__badge-text strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.hero__badge-text small {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  /* Full width — matches every other section's container content width */
  .hero__inner {
    max-width: 100%;
    margin-inline: 0;
    text-align: left;
    padding-top: 0px;
  }

  .hero__visual {
    max-width: 90%;
    width: 100%;
    margin-inline: auto;
    margin-top: 2rem;
  }

  .hero__visual-card {
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }

  /* full width, correct ratio on tablet */
  .hero__badge {
    max-width: 150px;
    padding: 0.7rem 0.9rem;
  }
}

@media (max-width: 560px) {
  .hero__badge {
    display: none;
  }

  .hero__visual {
    margin-top: 1.5rem;
  }

  .hero__visual-card {
    max-width: 100%;
    aspect-ratio: 4 / 3;
    /* slightly taller crop on small phones for better visual balance */
  }

  .hero__inner {
    padding-top: 0px;
  }
}

/* ============================================================
   HERO DECORATIVE SHAPES
   Purely ambient line-art. Three motions are layered on three
   nested elements so each can own the `transform` property
   independently: outer = mouse-parallax, middle = slow drift,
   inner (svg) = continuous rotation. Combined, they read as one
   organic, non-mechanical movement.

   Anchored to .container (not the full-bleed section) and clipped
   with overflow:hidden, so on wide viewports they stay near the
   actual content instead of drifting out toward the browser edge.
   ============================================================ */

.hero__shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-shape {
  position: absolute;
  will-change: transform;
  transition: transform 0.35s var(--ease-standard);
}

.hero-shape--cross {
  top: 10%;
  right: 4%;
  width: clamp(80px, 10vw, 130px);
  height: clamp(80px, 10vw, 130px);
  /* parallax: shifts opposite-ish to cursor for a light sense of depth */
  transform: translate(calc(var(--parallax-x, 0) * 30px), calc(var(--parallax-y, 0) * 22px));
}

.hero-shape--diamond {
  bottom: 6%;
  left: 4%;
  width: clamp(90px, 12vw, 150px);
  height: clamp(90px, 12vw, 150px);
  transform: translate(calc(var(--parallax-x, 0) * -34px), calc(var(--parallax-y, 0) * -26px));
}

.hero:hover .hero-shape--cross {
  transform: translate(calc(var(--parallax-x, 0) * 30px), calc(var(--parallax-y, 0) * 22px)) scale(1.06);
}

.hero:hover .hero-shape--diamond {
  transform: translate(calc(var(--parallax-x, 0) * -34px), calc(var(--parallax-y, 0) * -26px)) scale(1.06);
}

.hero-shape__drift {
  width: 100%;
  height: 100%;
}

.hero-shape--cross .hero-shape__drift {
  animation: shape-drift-a 13s ease-in-out infinite;
}

.hero-shape--diamond .hero-shape__drift {
  animation: shape-drift-b 17s ease-in-out infinite;
}

@keyframes shape-drift-a {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-9px, 10px);
  }
}

@keyframes shape-drift-b {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(10px, -8px);
  }
}

.hero-shape svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.hero-shape--cross svg {
  color: var(--color-accent);
  opacity: 0.22;
  animation: shape-spin-cw 40s linear infinite;
  transition: opacity 0.35s var(--ease-standard);
}

.hero-shape--diamond svg {
  color: var(--color-primary);
  opacity: 0.2;
  animation: shape-spin-ccw 55s linear infinite;
  transition: opacity 0.35s var(--ease-standard);
}

.hero:hover .hero-shape--cross svg {
  opacity: 0.32;
}

.hero:hover .hero-shape--diamond svg {
  opacity: 0.3;
}

.hero-shape svg line,
.hero-shape svg rect {
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
}

@keyframes shape-spin-cw {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes shape-spin-ccw {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@media (max-width: 640px) {

  /* Header sits fixed at the top, so shapes need a hard px offset
     here (not a % of .hero) to guarantee they clear it. Both shapes
     sit on the right side, staggered in height, and are boosted in
     opacity since thin low-opacity strokes read too faint on small,
     brighter mobile screens. */
  .hero-shape--cross {
    top: 7.5rem;
    right: 6%;
    left: auto;
    bottom: auto;
    width: 90px;
    height: 90px;
  }

  .hero-shape--diamond {
    top: 4rem;
    right: 22%;
    left: auto;
    bottom: auto;
    width: 80px;
    height: 80px;
  }

  .hero-shape--cross svg {
    opacity: 0.4;
  }

  .hero-shape--diamond svg {
    opacity: 0.38;
  }
}

/* ============================================================
   SHARED SECTION HEAD
   ============================================================ */

.section {
  position: relative;
  padding-block: var(--space-section);
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.8s var(--ease-cinematic),
    transform 0.8s var(--ease-cinematic);
}

.section-head.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Leaving past the top of the viewport: continue drifting up instead of
   snapping back to the "rising from below" offset — keeps the motion
   moving the same direction as the scroll, so it reads as continuous
   rather than jerking backwards mid-exit. */
.section-head.is-exiting-top {
  transform: translateY(-20px);
}

.section-head__eyebrow {
  margin-bottom: 1rem;
}

.section-head__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin-bottom: 1rem;
}

.section-head__sub {
  font-size: 1.05rem;
  max-width: 52ch;
}

/* Reel 05 (Why MotionCraft) and Reel 08 (Client Words) read better centered
   over their symmetric grid/carousel layouts below — every other section
   keeps the default left-aligned .section-head. */
.why-us .section-head,
.testimonials .section-head {
  margin-inline: auto;
  text-align: center;
}

.testimonials .section-head {
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
}

.why-us .section-head__sub {
  margin-inline: auto;
}

/* ============================================================
   MARQUEE
   ============================================================ */

.marquee {
  position: relative;
  margin-bottom: 0;
}

.marquee__inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-block: 1px solid var(--border-color);
  background: var(--bg-secondary);
  padding-block: 1.1rem;
  /* Fades the scrolling words out at both edges instead of hard-cutting
     them mid-letter — this is what was reading as "misaligned". */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* Two identical groups placed side by side; the animation slides the
   whole track left by exactly one group's width (-50%), so the moment
   it resets to 0 the content is pixel-identical — no visible seam. */
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-scroll 60s linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.marquee__group {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.marquee__group li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-inline: 1.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.marquee__icon {
  color: var(--color-accent);
  font-size: 0.85em;
}

@media (max-width: 640px) {
  .marquee__group li {
    padding-inline: 1.1rem;
    font-size: 0.9rem;
  }
}

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

.services {
  position: relative;
  padding-block: var(--space-section);
}

.services__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.services__intro {
  position: sticky;
  top: 8rem;
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.8s var(--ease-cinematic),
    transform 0.8s var(--ease-cinematic);
}

.services__intro.in-view {
  opacity: 1;
  transform: translateY(0);
}

.services__intro.is-exiting-top {
  transform: translateY(-20px);
}

.services__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin: 0 0 1.25rem;
  max-width: 14ch;
}

.services__sub {
  color: var(--text-secondary);
  max-width: 40ch;
  margin-bottom: 1.75rem;
}

.services__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
}

.services__link svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.services__link:hover svg {
  transform: translateX(3px);
}

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

.service-row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: 1.5rem;
  padding-block: 2.25rem;
  border-bottom: 1px solid var(--border-color);
  opacity: 0;
  translate: 0 24px;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.7s var(--ease-cinematic),
    translate 0.7s var(--ease-cinematic),
    transform 0.35s var(--ease-standard),
    border-color 0.35s var(--ease-standard);
}

.services__list .service-row:first-child {
  padding-top: 0;
}

.services__list .service-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.service-row.in-view {
  opacity: 1;
  translate: 0 0;
}

.service-row.is-exiting-top {
  translate: 0 -18px;
}

.services__list .service-row:nth-child(1) {
  transition-delay: 0s;
}

.services__list .service-row:nth-child(2) {
  transition-delay: 0.1s;
}

.services__list .service-row:nth-child(3) {
  transition-delay: 0.2s;
}

.service-row:hover {
  transform: translateX(0.5rem);
  border-color: var(--color-primary);
}

.service-row__num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding-top: 0.4rem;
  transition: color var(--dur-fast) var(--ease-standard);
}

.service-row:hover .service-row__num {
  color: var(--color-accent);
}

.service-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.service-row:hover .service-row__icon {
  border-color: var(--color-primary);
}

.service-row:nth-child(2) .service-row__icon svg {
  color: var(--color-accent);
}

.service-row:nth-child(3) .service-row__icon svg {
  color: var(--color-accent-alt);
}

.service-row__icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

[data-theme="dark"] .service-row__icon svg {
  stroke: var(--color-accent);
}

[data-theme="dark"] .service-row:hover .service-row__icon {
  border-color: var(--color-accent);
}

.service-row__title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.service-row__desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 56ch;
}

@media (max-width: 980px) {
  .services__layout {
    grid-template-columns: 1fr;
  }

  .services__intro {
    position: static;
    max-width: 60ch;
  }
}

@media (max-width: 640px) {
  .service-row {
    grid-template-columns: auto 1fr;
    row-gap: 1rem;
  }

  .service-row__icon {
    grid-row: 1;
    grid-column: 1;
    width: 48px;
    height: 48px;
  }

  .service-row__num {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    font-size: 1.5rem;
    font-weight: 700;
    padding-top: 0.5rem;
  }

  .service-row__body {
    grid-column: 1 / -1;
  }
}


/* ============================================================
   PORTFOLIO — Interactive Showcase Theater
   ============================================================ */

.portfolio {
  position: relative;
  padding-block: var(--space-section);
}

.portfolio__theater {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

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

.portfolio__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  padding: 1.15rem 1.5rem;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  text-align: left;
  cursor: pointer;
  outline: none;
  will-change: background-color, border-color;
  transition: background-color var(--dur-standard) var(--ease-standard),
    border-color var(--dur-standard) var(--ease-standard),
    padding-left var(--dur-standard) var(--ease-standard);
}

.portfolio__item-num {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent);
  opacity: 0.6;
  transition: color var(--dur-standard) var(--ease-standard),
    opacity var(--dur-standard) var(--ease-standard);
}

.portfolio__item-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.portfolio__item-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: color var(--dur-standard) var(--ease-standard);
}

.portfolio__item-category {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hover & Active states */
.portfolio__item:hover {
  background: linear-gradient(90deg, rgba(44, 73, 115, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
  border-left-color: rgba(44, 73, 115, 0.4);
  padding-left: 1.75rem;
}

[data-theme="dark"] .portfolio__item:hover {
  background: linear-gradient(90deg, rgba(143, 172, 204, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
  border-left-color: rgba(143, 172, 204, 0.4);
}

.portfolio__item.is-active {
  background: linear-gradient(90deg, rgba(44, 73, 115, 0.09) 0%, rgba(255, 255, 255, 0) 100%);
  border-left-color: var(--color-accent);
  padding-left: 1.75rem;
}

[data-theme="dark"] .portfolio__item.is-active {
  background: linear-gradient(90deg, rgba(143, 172, 204, 0.09) 0%, rgba(0, 0, 0, 0) 100%);
  border-left-color: var(--color-accent);
}

.portfolio__item.is-active .portfolio__item-num {
  color: var(--color-primary);
  opacity: 1;
}

.portfolio__item.is-active .portfolio__item-title {
  color: var(--color-primary);
}

/* Right Column Preview Screen */
.portfolio__preview {
  position: sticky;
  top: 8rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  z-index: 10;
}

.portfolio__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #11141B;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 30px 60px -25px var(--shadow-color),
    0 0 0 1px rgba(44, 73, 115, 0.08) inset;
}

.portfolio__screen-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.55s var(--ease-cinematic),
    transform 0.55s var(--ease-cinematic);
}

.portfolio__screen-img.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.portfolio__screen-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* scanlines tech overlay */
.portfolio__screen-scanlines {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 28, 0) 50%, rgba(0, 0, 0, 0.15) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 4px, 6px 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.75;
}

/* glowing corner brackets */
.portfolio__screen-corners {
  position: absolute;
  inset: 12px;
  z-index: 2;
  pointer-events: none;
}

.portfolio__screen-corners::before,
.portfolio__screen-corners::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(108, 79, 255, 0.4);
  border-style: solid;
}

.portfolio__screen-corners::before {
  top: 0;
  left: 0;
  border-width: 1.5px 0 0 1.5px;
}

.portfolio__screen-corners::after {
  bottom: 0;
  right: 0;
  border-width: 0 1.5px 1.5px 0;
}

/* Play button overlay */
.portfolio__screen-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: var(--radius-pill);
  background: rgba(20, 18, 31, 0.6);
  border: 1.5px solid #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.9;
}

.portfolio__screen-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: #fff;
}

.portfolio__screen-play-icon svg {
  width: 100%;
  height: 100%;
}

.portfolio__screen-play-text {
  display: none;
}

/* Metadata console info */
.portfolio__preview-info {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.35rem 1.6rem;
  box-shadow: 0 15px 35px -15px var(--shadow-color);
}

.portfolio__preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.portfolio__preview-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.portfolio__preview-timecode {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
  opacity: 0.75;
}

.portfolio__preview-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
}

.portfolio__preview-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

/* Project details in preview box */
.portfolio__preview-details {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  margin-top: 1rem;
}

.portfolio__detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.portfolio__detail-label {
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.portfolio__detail-value {
  color: var(--text-primary);
  font-weight: 500;
}

.portfolio__detail-status {
  color: var(--color-accent-alt);
}

/* ============================================================
   RESPONSIVE LAYOUTS
   ============================================================ */

/* Mobile/tablet dropdown — hidden on desktop */
.portfolio__mobile-select {
  display: none;
}

@media (max-width: 980px) {
  .portfolio__theater {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .portfolio__preview {
    position: relative;
    top: 0;
    order: -1;
    gap: 1rem;
  }

  /* Hide the sidebar list — replaced by the custom dropdown */
  .portfolio__list {
    display: none;
  }

  /* Show the custom dropdown */
  .portfolio__mobile-select {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    order: -2;
  }

  /* Featured Reel info card above the video screen on mobile/tablet —
     stays below the "Switch Project" dropdown (order -2) but ahead of
     the video itself (default order 0). */
  .portfolio__preview-info {
    order: -1;
  }

  .portfolio__select-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  .portfolio__select-label svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-primary);
  }

  /* Wrapper: relative so the list is absolutely positioned within it */
  .portfolio__select-wrapper {
    position: relative;
    width: 100%;
  }

  /* Trigger button */
  .portfolio__select-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.1rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    outline: none;
    box-shadow: 0 4px 16px -8px var(--shadow-color);
    transition: border-color var(--dur-standard) var(--ease-standard),
      box-shadow var(--dur-standard) var(--ease-standard);
  }

  .portfolio__select-btn:focus-visible,
  .portfolio__select-btn[aria-expanded="true"] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(108, 79, 255, 0.18),
      0 4px 16px -8px var(--shadow-color);
  }

  .portfolio__select-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Chevron arrow — rotates when open */
  .portfolio__select-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: var(--color-primary);
    transition: transform var(--dur-standard) var(--ease-standard);
  }

  .portfolio__select-btn[aria-expanded="true"] .portfolio__select-arrow {
    transform: rotate(180deg);
  }

  /* Dropdown list — constrained inside the wrapper, never overflows */
  .portfolio__select-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    /* key: right:0 locks it to the wrapper width */
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px -8px var(--shadow-color);
    z-index: 50;
    /* Hidden by default */
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--dur-standard) var(--ease-standard),
      transform var(--dur-standard) var(--ease-standard);
  }

  /* Open state */
  .portfolio__select-list.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
	  background-color:#4B74A2;
  }

  .portfolio__select-option {
    padding: 0.7rem 1.1rem;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-standard),
      color var(--dur-fast) var(--ease-standard);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .portfolio__select-option:hover {
    background: rgba(108, 79, 255, 0.07);
    color: var(--text-primary);
  }

  .portfolio__select-option.is-selected {
    color: var(--color-primary);
    font-weight: 600;
    background: rgba(108, 79, 255, 0.06);
  }
}

@media (max-width: 560px) {
  .portfolio__item {
    padding: 0.85rem 1rem;
  }

  .portfolio__item-title {
    font-size: 1rem;
  }

  .portfolio__screen-play {
    width: 56px;
    height: 56px;
  }
}

/* ============================================================
   VIDEO MODAL
   ============================================================ */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease-standard),
    visibility 0.35s var(--ease-standard);
}

.video-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 12, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  /* pehle 960px tha — thoda chhota, breathing room ke liye */
  transform: scale(0.94) translateY(12px);
  opacity: 0;
  transition: transform 0.4s var(--ease-cinematic),
    opacity 0.4s var(--ease-cinematic);
}

.video-modal.is-open .video-modal__dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}

.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  top: -2rem;
  z-index: 2;
  /* iframe ke upar */
  right: -4rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s var(--ease-standard),
    transform 0.25s var(--ease-standard);
}

.video-modal__close:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: rotate(90deg);
}

.video-modal__close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

@media (max-width: 640px) {
  .video-modal__close {
    top: -3rem;
    right: 0;
  }
}

/* particles background */

#particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  /* control subtlety */
}

/* ============================================================
   PRICING
   ============================================================ */

.pricing {
  position: relative;
  padding-block: var(--space-section);
}

.pricing__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-bottom: clamp(2rem, 5vw, 3rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--border-color);
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.8s var(--ease-cinematic),
    transform 0.8s var(--ease-cinematic);
}

.pricing__head.in-view {
  opacity: 1;
  transform: translateY(0);
}

.pricing__head.is-exiting-top {
  transform: translateY(-20px);
}

.pricing__head-main {
  max-width: 55ch;
}

.pricing__head-title {
  font-size: var(--fs-h2);
  font-weight: 600;
}

.pricing__head-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 32ch;
  padding: 1.1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.pricing__head-note svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  stroke: var(--color-accent);
}

.pricing__head-note p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 700px) {
  .pricing__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .pricing__head-note {
    max-width: 100%;
  }
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.6rem 1.6rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  opacity: 0;
  translate: 0 28px;
  transform: scale(1);
  will-change: opacity, border-color, box-shadow, transform;
  backface-visibility: hidden;
  transition: opacity 0.7s var(--ease-cinematic),
    translate 0.7s var(--ease-cinematic),
    transform 0.4s var(--ease-cinematic),
    box-shadow 0.4s var(--ease-cinematic),
    border-color 0.4s var(--ease-cinematic);
}

.pricing-card.in-view {
  opacity: 1;
  translate: 0 0;
}

.pricing-card.is-exiting-top {
  translate: 0 -20px;
}

.pricing__grid .pricing-card:nth-child(1) {
  transition-delay: 0s;
}

.pricing__grid .pricing-card:nth-child(2) {
  transition-delay: 0.12s;
}

.pricing__grid .pricing-card:nth-child(3) {
  transition-delay: 0.24s;
}

.pricing-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 20px 44px -22px var(--shadow-color);
}

.pricing-card__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 0.7rem;
  color: var(--color-primary);
}

.pricing-card__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.pricing-card__name {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.pricing-card__tag {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-secondary);
}

.pricing-card__length {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.65rem;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.pricing-card__amount {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pricing-card__currency {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.pricing-card__preview {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.45rem 0.9rem;
  margin-bottom: 0.9rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.pricing-card__preview:hover,
.pricing-card__preview:focus-visible {
  border-color: var(--color-accent);
  color: var(--text-primary);
}

.pricing-card__preview svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.pricing-card__preview svg path {
  fill: currentColor;
  stroke: none;
}

.pricing-card__features {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-grow: 1;
}

.pricing-card__features li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.pricing-card__features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.pricing-card__features li.is-excluded {
  color: var(--text-secondary);
}

.pricing-card__features li.is-excluded::before {
  content: "\2715";
  color: var(--text-secondary);
  font-weight: 700;
}

.pricing-card__note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.65rem;
}

.pricing-card__cta {
  justify-content: center;
  width: 100%;
}

/* Featured — Gold Plan. Scaled and glowing at rest, not just on hover. */
.pricing-card--featured {
  background: var(--bg-primary);
  border-color: var(--color-primary);
  transform: scale(1.04);
  box-shadow: 0 24px 54px -20px var(--shadow-color);
  transition: opacity 0.7s var(--ease-cinematic),
    translate 0.7s var(--ease-cinematic),
    transform 0.4s var(--ease-cinematic),
    box-shadow 0.4s var(--ease-cinematic),
    border-color 0.4s var(--ease-cinematic);
}

.pricing-card--featured:hover {
  transform: scale(1.06);
  border-color: var(--color-accent);
  box-shadow: 0 28px 60px -18px rgba(108, 79, 255, 0.35);
}

.pricing-card--featured::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: var(--gradient-brand);
  opacity: 0.2;
  filter: blur(14px);
  animation: pricing-glow-pulse 3s ease-in-out infinite;
}

@keyframes pricing-glow-pulse {

  0%,
  100% {
    opacity: 0.15;
  }

  50% {
    opacity: 0.28;
  }
}

.pricing-card--featured .pricing-card__icon {
  color: var(--color-accent-alt);
}

.pricing-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50% 0;
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -8px var(--shadow-color);
}

@media (max-width: 980px) {
  .pricing__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }

  .pricing-card--featured {
    transform: scale(1);
  }

  .pricing-card--featured:hover {
    transform: scale(1.02);
  }
}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */

.why-us {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-section);
  background: var(--bg-secondary);
}

.why-us>.container {
  position: relative;
  z-index: 1;
}

/* --- Decorative floating orbs ---
   Sit behind all content (z-index: 0, inside a section that's overflow:
   hidden), clustered in the empty space to the right of the heading
   (.section-head caps out at 640px) so they never sit under text. Colors
   reuse the existing brand tokens rather than new hardcoded hex values. */
.why-us__orbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.why-us__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  will-change: transform;
  animation: why-orb-bob 7s ease-in-out infinite;
}

@keyframes why-orb-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-22px);
  }
}

.why-us__orb--1 {
  top: 17px;
  right: 6%;
  width: 70px;
  height: 70px;
  opacity: 0.45;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-primary) 72%);
  animation-duration: 6s;
  animation-delay: 0s;
}

.why-us__orb--2 {
  top: 90px;
  right: 24%;
  width: 46px;
  height: 46px;
  opacity: 0.5;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-accent) 72%);
  animation-duration: 5.2s;
  animation-delay: 1.2s;
}

.why-us__orb--3 {
  top: 170px;
  right: 2%;
  width: 50px;
  height: 50px;
  opacity: 0.4;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-accent-alt) 72%);
  animation-duration: 6.4s;
  animation-delay: 2.4s;
}

.why-us__orb--4 {
  top: 40px;
  right: 38%;
  width: 20px;
  height: 20px;
  opacity: 0.55;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-primary) 72%);
  animation-duration: 4.8s;
  animation-delay: 0.6s;
}

.why-us__orb--5 {
  top: 210px;
  right: 16%;
  width: 16px;
  height: 16px;
  opacity: 0.5;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-accent) 72%);
  animation-duration: 5.6s;
  animation-delay: 1.8s;
}

/* --- Body-zone orbs ---
   Scattered across the card row instead of only the empty top-right
   corner. Safe by construction, not by luck: every one of these sits
   below the text's vertical range (.section-head + its margin), so at
   worst it's behind a card's solid background — never behind the
   heading/sub copy, which has no opaque backing to hide it against. */
.why-us__orb--6 {
  top: 350px;
  left: 4%;
  width: 42px;
  height: 42px;
  opacity: 0.42;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-accent-alt) 72%);
  animation-duration: 6.2s;
  animation-delay: 0.9s;
}

.why-us__orb--7 {
  top: 400px;
  left: 21%;
  width: 18px;
  height: 18px;
  opacity: 0.5;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-primary) 72%);
  animation-duration: 5s;
  animation-delay: 2.1s;
}

.why-us__orb--8 {
  top: 365px;
  left: 46%;
  width: 36px;
  height: 36px;
  opacity: 0.4;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-accent) 72%);
  animation-duration: 5.8s;
  animation-delay: 1.5s;
}

.why-us__orb--9 {
  top: 430px;
  right: 25%;
  width: 15px;
  height: 15px;
  opacity: 0.55;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-accent-alt) 72%);
  animation-duration: 5.4s;
  animation-delay: 0.3s;
}

.why-us__orb--10 {
  top: 650px;
  left: 25%;
  width: 40px;
  height: 40px;
  opacity: 0.45;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-primary) 72%);
  animation-duration: 6.4s;
  animation-delay: 2.7s;
}

.why-us__orb--11 {
  top: 410px;
  right: 5%;
  width: 20px;
  height: 20px;
  opacity: 0.5;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-accent) 72%);
  animation-duration: 5.2s;
  animation-delay: 1.1s;
}

/* Center-left additions. "Top-left" was requested but that's exactly
   where .section-head text lives (left 0-640px, top ~0-300px) — so
   these sit lower instead, left-aligned but well below the heading,
   same safe logic as the rest of the body-zone orbs. */
.why-us__orb--12 {
  top: 380px;
  left: 10%;
  width: 34px;
  height: 34px;
  opacity: 0.45;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-primary) 72%);
  animation-duration: 5.4s;
  animation-delay: 1.6s;
}

.why-us__orb--13 {
  top: 470px;
  left: 6%;
  width: 16px;
  height: 16px;
  opacity: 0.55;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-accent-alt) 72%);
  animation-duration: 4.8s;
  animation-delay: 0.5s;
}

.why-us__orb--14 {
  top: 530px;
  left: 30%;
  width: 24px;
  height: 24px;
  opacity: 0.48;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-accent) 72%);
  animation-duration: 6s;
  animation-delay: 2.2s;
}

/* Tablet: shrink and pull in from the edge so nothing crowds the now
   2-column card grid or gets clipped by a narrower container. */
@media (max-width: 980px) {
  .why-us__orb--1 {
    width: 52px;
    height: 52px;
    right: 4%;
  }

  .why-us__orb--2 {
    width: 34px;
    height: 34px;
    right: 20%;
  }

  .why-us__orb--3 {
    width: 38px;
    height: 38px;
    right: 2%;
    top: 150px;
  }

  .why-us__orb--4 {
    width: 15px;
    height: 15px;
    right: 32%;
  }

  .why-us__orb--5 {
    width: 12px;
    height: 12px;
    right: 12%;
    top: 190px;
  }

  /* Card grid is 2-up here (taller, more rows), so the body orbs get a
     touch smaller but keep roughly the same vertical spread. */
  .why-us__orb--6 {
    width: 32px;
    height: 32px;
    left: 3%;
  }

  .why-us__orb--7 {
    width: 14px;
    height: 14px;
    left: 16%;
  }

  .why-us__orb--8 {
    width: 28px;
    height: 28px;
    left: 42%;
  }

  .why-us__orb--9 {
    width: 12px;
    height: 12px;
    right: 28%;
  }

  .why-us__orb--10 {
    width: 30px;
    height: 30px;
    left: 58%;
  }

  .why-us__orb--11 {
    width: 15px;
    height: 15px;
    right: 4%;
  }

  .why-us__orb--12 {
    width: 26px;
    height: 26px;
    left: 8%;
  }

  .why-us__orb--13 {
    width: 12px;
    height: 12px;
    left: 4%;
  }

  .why-us__orb--14 {
    width: 18px;
    height: 18px;
    left: 26%;
  }
}

/* Mobile: everything stacks to a single column and .section-head runs
   full-width, so there's no safe "beside the text" zone left. Drop the
   two smallest orbs entirely and pull the rest up into the section's
   top padding, above where the eyebrow/heading text actually starts. */
@media (max-width: 560px) {

  .why-us__orb--4,
  .why-us__orb--5 {
    display: none;
  }

  .why-us__orb--1 {
    width: 34px;
    height: 34px;
    top: -18px;
    right: 8%;
  }

  .why-us__orb--2 {
    width: 24px;
    height: 24px;
    top: -6px;
    right: 32%;
  }

  .why-us__orb--3 {
    width: 26px;
    height: 26px;
    top: -22px;
    right: 55%;
  }

  /* These are already well below the (shorter, on mobile) text block,
     so no repositioning needed — just scaled down to avoid clutter
     against the single stacked card column. */
  .why-us__orb--6 {
    width: 22px;
    height: 22px;
  }

  .why-us__orb--7 {
    width: 10px;
    height: 10px;
  }

  .why-us__orb--8 {
    width: 18px;
    height: 18px;
  }

  .why-us__orb--9 {
    width: 9px;
    height: 9px;
  }

  .why-us__orb--10 {
    width: 20px;
    height: 20px;
  }

  .why-us__orb--11 {
    width: 10px;
    height: 10px;
  }

  .why-us__orb--12 {
    width: 16px;
    height: 16px;
  }

  .why-us__orb--13 {
    width: 8px;
    height: 8px;
  }

  .why-us__orb--14 {
    width: 12px;
    height: 12px;
  }
}

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

.why-us__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.why-card {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.5rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  opacity: 0;
  translate: 0 24px;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.7s var(--ease-cinematic),
    translate 0.7s var(--ease-cinematic),
    border-color 0.3s var(--ease-standard),
    box-shadow 0.3s var(--ease-standard);
}

/* Alternating tint gives the grid a zig-zag rhythm instead of four
   identical tiles. */
.why-us__grid .why-card:nth-child(even) {
  background: linear-gradient(160deg, rgba(44, 73, 115, 0.08), rgba(75, 116, 162, 0.04));
}

.why-card__num {
  position: absolute;
  right: 0.25rem;
  bottom: -0.8rem;
  font-family: var(--font-heading);
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.35s var(--ease-standard),
    transform 0.35s var(--ease-standard);
}

.why-card:hover .why-card__num {
  opacity: 0.14;
  transform: translateY(-4px);
}



.why-card__icon,
.why-card__title,
.why-card__desc {
  position: relative;
  z-index: 1;
}

.why-card.in-view {
  opacity: 1;
  translate: 0 0;
}

.why-card.is-exiting-top {
  translate: 0 -20px;
}

.why-us__grid .why-card:nth-child(1) {
  transition-delay: 0s;
}

.why-us__grid .why-card:nth-child(2) {
  transition-delay: 0.08s;
}

.why-us__grid .why-card:nth-child(3) {
  transition-delay: 0.16s;
}

.why-us__grid .why-card:nth-child(4) {
  transition-delay: 0.24s;
}

.why-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 16px 36px -20px var(--shadow-color);
}

.why-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 1.1rem;
  color: var(--color-primary);
  transition: transform 0.4s var(--ease-cinematic);
}



.why-card:hover .why-card__icon {
  transform: translateY(-4px) scale(1.08);
}

.why-card__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.why-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
	color:var(--color-accent);
}

.why-card__desc {
  font-size: 0.9rem;
  line-height: 1.6;
}

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

@media (max-width: 560px) {
  .why-us__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   STATS + PROCESS TIMELINE
   ============================================================ */

.stats {
  position: relative;
  padding-block: var(--space-section);
}

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

.stat-card {
  text-align: center;
  padding: 1.25rem 0.6rem;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  opacity: 0;
  translate: 0 24px;
  will-change: opacity, transform;
  transition: opacity 0.7s var(--ease-cinematic),
    translate 0.7s var(--ease-cinematic);
}

[data-theme="dark"] .stat-card {
  background: linear-gradient(135deg, rgba(143, 172, 204, 0.08), rgba(75, 116, 162, 0.04));
}

.stat-card:hover {
  background: var(--bg-card);
  border-color: var(--color-primary);
  box-shadow: 0 12px 32px -10px rgba(44, 73, 115, 0.25);
}

[data-theme="dark"] .stat-card:hover {
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.55);
}

.stat-card.in-view {
  opacity: 1;
  translate: 0 0;
}

.stat-card.is-exiting-top {
  translate: 0 -20px;
}

.stats__grid .stat-card:nth-child(1) {
  transition-delay: 0s;
}

.stats__grid .stat-card:nth-child(2) {
  transition-delay: 0.08s;
}

.stats__grid .stat-card:nth-child(3) {
  transition-delay: 0.16s;
}

.stats__grid .stat-card:nth-child(4) {
  transition-delay: 0.24s;
}

.stat-card__number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat-card__label {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(0.72rem, 1.1vw, var(--fs-small));
  white-space: nowrap;
  color: var(--text-secondary);
}

@media (max-width: 780px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }

  .stat-card {
    padding: 1rem 0.4rem;
  }

  .stat-card__label {
    font-size: clamp(0.68rem, 2.6vw, 0.85rem);
  }
}

@media (max-width: 420px) {
  .stats__grid {
    gap: 0.5rem;
  }

  .stat-card {
    padding: 0.85rem 0.25rem;
  }

  .stat-card__label {
    font-size: clamp(0.65rem, 2.8vw, 0.8rem);
  }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.testimonials {
  position: relative;
  padding-block: var(--space-section);
  background: var(--bg-secondary);
}

.testimonial-carousel {
  max-width: 760px;
  margin: 0 auto;
}

.testimonial-carousel__viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.testimonial-carousel__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 1.4s var(--ease-cinematic);
}

.testimonial-card {
  /* Shrinking the box slightly and adding margin on both sides keeps
     each slide's total footprint (box + margins) at exactly 100% — so
     the JS's translateX(-100%) math still lands correctly — while
     leaving a real visual gap between the outgoing and incoming card
     as they pass each other mid-transition, instead of looking flush
     against each other. */
  flex: 0 0 calc(100% - 1rem);
  margin-inline: 0.5rem;
  padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}

.testimonial-card__stars {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 1rem;
}

.testimonial-card__stars svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
	    fill: var(--color-accent);
}

.testimonial-card__quote {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 1.75rem;
}

.testimonial-card__quote::before {
  content: open-quote;
}

.testimonial-card__quote::after {
  content: close-quote;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.testimonial-card__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.testimonial-card__author>span {
  display: flex;
  flex-direction: column;
}

.testimonial-card__name {
  font-weight: 600;
  font-size: 0.95rem;
}

.testimonial-card__role {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.testimonial-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.testimonial-carousel__arrow {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.testimonial-carousel__arrow:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.testimonial-carousel__arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.testimonial-carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.testimonial-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border-color);
  transition: background-color var(--dur-fast) var(--ease-standard),
    width var(--dur-fast) var(--ease-standard);
}

.testimonial-carousel__dot.is-active {
  width: 22px;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
}

.testimonial-carousel__dot:hover,
.testimonial-carousel__dot:focus-visible {
  background: var(--color-primary);
}

/* ============================================================
   BLOG
   ============================================================ */

.blog {
  position: relative;
  padding-block: var(--space-section);
}

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

/* Related posts section shows exactly 2 cards — use 2-col layout */
.related-posts .blog__grid {
  grid-template-columns: repeat(2, 1fr);
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 0;
  translate: 0 28px;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.7s var(--ease-cinematic),
    translate 0.7s var(--ease-cinematic),
    border-color 0.3s var(--ease-standard),
    box-shadow 0.3s var(--ease-standard);
}

.blog-card.in-view {
  opacity: 1;
  translate: 0 0;
}

.blog-card.is-exiting-top {
  translate: 0 -20px;
}

.blog__grid .blog-card:nth-child(1) {
  transition-delay: 0s;
}

.blog__grid .blog-card:nth-child(2) {
  transition-delay: 0.1s;
}

.blog__grid .blog-card:nth-child(3) {
  transition-delay: 0.2s;
}

.blog-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 20px 44px -22px var(--shadow-color);
}

.blog-card__thumb {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background: var(--gradient-brand);
}

.blog-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-cinematic);
}

.blog-card:hover .blog-card__img {
  transform: scale(1.06);
}

.blog-card__thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

.blog-card__thumb .thumb-anim {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.6s var(--ease-cinematic);
}

.blog-card:hover .blog-card__thumb .thumb-anim {
  transform: scale(1.045) translateY(-3px);
}

.blog-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.22) 100%);
  pointer-events: none;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.75rem;
}

.blog-card__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.blog-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.65rem;
  line-height: 1.3;
  transition: color var(--dur-fast) var(--ease-standard);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.blog-card:hover .blog-card__title {
  color: var(--color-primary);
}

.blog-card__excerpt {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  align-self: flex-start;
}

.blog-card__link svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.blog-card:hover .blog-card__link svg {
  transform: translateX(3px);
}

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

@media (max-width: 640px) {
  .blog__grid,
  .related-posts .blog__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CALL TO ACTION
   ============================================================ */

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

.cta__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(2.75rem, 7vw, 5.5rem) clamp(1.75rem, 6vw, 4rem);
  background: var(--gradient-brand);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px rgba(29, 39, 64, 0.25);
  text-align: center;
  isolation: isolate;
  opacity: 0;
  translate: 0 28px;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.8s var(--ease-cinematic),
    translate 0.8s var(--ease-cinematic),
    background-color var(--dur-med) var(--ease-standard),
    border-color var(--dur-med) var(--ease-standard);
}

.cta__panel.in-view {
  opacity: 1;
  translate: 0 0;
}

.cta__panel.is-exiting-top {
  translate: 0 -20px;
}

[data-theme="dark"] .cta__panel {
  background: linear-gradient(135deg, rgba(17, 20, 27, 0.95) 0%, rgba(29, 39, 64, 0.9) 100%);
  border: 1.5px solid rgba(143, 172, 204, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3), 0 0 40px rgba(75, 116, 162, 0.15);
}

.cta__glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1), transparent 45%);
  pointer-events: none;
}

[data-theme="dark"] .cta__glow {
  background: radial-gradient(circle at 20% 20%, rgba(75, 116, 162, 0.2), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(29, 39, 64, 0.3), transparent 45%);
}

.cta__shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.cta__shape {
  position: absolute;
  opacity: 0.2;
}

[data-theme="dark"] .cta__shape {
  opacity: 0.12;
}

.cta__shape--ring {
  width: 340px;
  height: 340px;
  top: -110px;
  left: -90px;
  animation: cta-spin-cw 40s linear infinite;
}

.cta__shape--diamond {
  width: 220px;
  height: 220px;
  bottom: -80px;
  right: -60px;
  animation: cta-spin-ccw 34s linear infinite;
}

.cta__shape circle,
.cta__shape path {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.2;
}

[data-theme="dark"] .cta__shape circle,
[data-theme="dark"] .cta__shape path {
  stroke: var(--color-accent);
}

@keyframes cta-spin-cw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes cta-spin-ccw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.cta__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}

.cta__eyebrow {
  justify-content: center;
  color: #8faccc;
}

[data-theme="dark"] .cta__eyebrow {
  color: var(--color-accent);
}

.cta__eyebrow::before {
  background: #8faccc;
  box-shadow: 0 0 0 4px rgba(143, 172, 204, 0.25);
}

[data-theme="dark"] .cta__eyebrow::before {
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(143, 172, 204, 0.25);
}

.cta__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: #ffffff;
  margin-block: 1rem;
}

[data-theme="dark"] .cta__title {
  color: var(--text-primary);
}

.cta__sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  max-width: 46ch;
  margin-inline: auto;
}

[data-theme="dark"] .cta__sub {
  color: var(--text-secondary);
}

.cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

.cta .btn--primary {
  background: #ffffff;
  color: var(--color-primary-dark);
  border: none;
}

.cta .btn--primary:hover {
  transform: translateY(-2px);
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(44, 73, 115, 0.35);
}

.cta .btn--primary svg {
  background: var(--color-primary-dark);
  color: #ffffff;
  border-color: var(--color-primary-dark);
}

.cta .btn--primary:hover svg {
  background: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
}

[data-theme="dark"] .cta .btn--primary {
  background: var(--gradient-brand);
  color: #fff;
  border: none;
}

[data-theme="dark"] .cta .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(108, 79, 255, 0.4);
}

[data-theme="dark"] .cta .btn--primary svg {
  background: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
}

[data-theme="dark"] .cta .btn--primary:hover svg {
  background: #ffffff;
  color: var(--color-primary-dark);
  border-color: #ffffff;
}

.cta .btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.cta .btn--ghost:hover {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.cta .btn--ghost:hover svg {
  border-color: var(--color-primary-dark);
}

[data-theme="dark"] .cta .btn--ghost {
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .cta .btn--ghost:hover {
  border-color: var(--color-accent);
  background: rgba(143, 172, 204, 0.08);
}

@media (max-width: 640px) {
  .cta__actions {
    flex-direction: column;
    width: 100%;
  }

  .cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

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

.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-section);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: 2rem;
  background: var(--bg-secondary);
  border-top: 1.5px solid var(--border-color);
}

.site-footer__glow {
  position: absolute;
  top: -30%;
  left: 50%;
  translate: -50% 0;
  width: 70vw;
  height: 60vw;
  max-width: 900px;
  max-height: 700px;
  background: var(--gradient-glow);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.site-footer .container {
  position: relative;
  z-index: 1;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.8fr 1.2fr;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.8s var(--ease-cinematic),
    transform 0.8s var(--ease-cinematic);
}

.site-footer__top.in-view {
  opacity: 1;
  transform: translateY(0);
}

.site-footer__top.is-exiting-top {
  transform: translateY(-20px);
}

.site-footer__brand .nav__logo {
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.site-footer__tagline {
  max-width: 34ch;
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

[data-theme="dark"] .site-footer__tagline {
  color: #ffffff;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.social-icon {
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.social-icon:hover {
  color: var(--color-accent);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  color: var(--text-secondary);
  transition: border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

[data-theme="dark"] .social-link {
  color: #ffffff;
}

.social-link svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 2.4;
}

.social-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

[data-theme="dark"] .social-link:hover {
  color: var(--color-primary);
}

.site-footer__heading {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.95;
  margin-bottom: 1.3rem;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer__links a {
  font-size: 0.92rem;
  color: var(--text-primary);
  position: relative;
  transition: color var(--dur-fast) var(--ease-standard);
}

.site-footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.site-footer__links a:hover {
  color: var(--color-primary);
}

.site-footer__links a:hover::after {
  transform: scaleX(1);
}

.site-footer__note {
  font-size: 0.88rem;
  margin-bottom: 1.1rem;
  max-width: 30ch;
}

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

.site-footer__contact-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Address is multi-line so icon pins to the top */
.site-footer__contact-list li:first-child {
  align-items: center;
}

.site-footer__contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--color-primary);
  transition: border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.site-footer__contact-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.site-footer__contact-icon svg.icon-fill,
.site-footer__contact-icon svg[fill="currentColor"] {
  stroke: none;
  fill: currentColor;
}

.site-footer__contact-list li span:not(.site-footer__contact-icon) {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.site-footer__contact-list a {
  display: inline-block;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-standard);
}

.site-footer__contact-list li:has(a):hover .site-footer__contact-icon {
  border-color: var(--color-accent);
}

.site-footer__contact-list a:hover {
  color: var(--color-accent);
}

.footer-dot {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: bold;
  color: #000000;
  margin-left: -0.05em;
}

[data-theme="dark"] .footer-dot {
  color: #ffffff;
}

.site-footer__scrub {
  height: 1px;
  background: var(--border-color);
  position: relative;
}

.site-footer__scrub::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: 0 0;
  background: var(--gradient-brand);
  transition: transform 1.4s var(--ease-cinematic) 0.15s;
}

.site-footer__scrub.in-view::after {
  transform: scaleX(1);
}

.site-footer__bottom {
  display: block;
  text-align: center;
  padding-top: 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

[data-theme="dark"] .site-footer__bottom {
  color: #ffffff;
}

.site-footer__timecode,
.site-footer__credit {
  display: inline;
  white-space: normal;
}

.site-footer__credit-link {
  color: var(--color-primary);
  font-weight: 600;
  position: relative;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    text-shadow var(--dur-fast) var(--ease-standard);
}

.site-footer__credit-link::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background: var(--gradient-brand);
  transition: width 0.3s var(--ease-cinematic);
  border-radius: 2px;
}

.site-footer__credit-link:hover {
  color: var(--color-accent);
  text-shadow: 0 0 12px rgba(143, 172, 204, 0.45);
  transform: translateY(-1px);
}

.site-footer__credit-link:hover::after {
  width: 100%;
}

@media (max-width: 767px) {
  .site-footer {
    padding-bottom: 4.5rem;
  }
}

/* ============================================================
   FLOATING ACTION BUTTONS (CALL & WHATSAPP)
   ============================================================ */

.floating-actions {
  position: fixed;
  inset: auto 0 0 0;
  pointer-events: none;
  z-index: 999;
}

.floating-btn-wrap {
  position: fixed;
  bottom: 1.5rem;
  z-index: 999;
  pointer-events: auto;
}

.floating-btn-wrap--call {
  left: 1.5rem;
  animation: floatBob 3s ease-in-out infinite alternate;
}

.floating-btn-wrap--whatsapp {
  right: 1.5rem;
  animation: floatBob 3s ease-in-out infinite alternate 1.5s;
}

.floating-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

/* Outer Pulse Radar Rings */
.floating-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.floating-btn--call {
  background: var(--color-accent);
  box-shadow: 0 8px 24px rgba(44, 73, 115, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.floating-btn--call::before {
  animation: pulseCallRing 2.8s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

[data-theme="dark"] .floating-btn--call {
  background: var(--color-primary);
  box-shadow: 0 8px 24px rgba(44, 73, 115, 0.6);
}

.floating-btn--whatsapp {
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(44, 73, 115, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .floating-btn--whatsapp {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.floating-btn--whatsapp::before {
  animation: pulseWhatsappRing 2.8s infinite cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.floating-btn:hover {
  transform: translateY(-5px) scale(1.15);
}

.floating-btn--call:hover {
  box-shadow: 0 12px 32px rgba(44, 73, 115, 0.65);
}

.floating-btn--whatsapp:hover {
  box-shadow: 0 12px 32px rgba(44, 73, 115, 0.65);
}

[data-theme="dark"] .floating-btn--whatsapp:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
}

.floating-btn svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.floating-btn--call svg {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: phoneRingShake 4s ease-in-out infinite;
  transform-origin: center center;
}

.floating-btn--whatsapp svg {
  animation: whatsappWiggle 4s ease-in-out infinite 2s;
  transform-origin: center center;
}

.floating-btn__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--color-accent-alt);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-family: var(--font-body);
  animation: badgePop 2.8s infinite ease-in-out;
}

@media (max-width: 640px) {
  .floating-btn {
    bottom: 1.25rem;
    width: 48px;
    height: 48px;
  }

  .floating-btn--call {
    left: 1rem;
  }

  .floating-btn--whatsapp {
    right: 1rem;
  }

  .floating-btn svg {
    width: 24px;
    height: 24px;
  }
}

/* Animations for Floating Buttons */
@keyframes pulseCallRing {
  0% {
    box-shadow: 0 0 0 0 rgba(44, 73, 115, 0.65);
    opacity: 0.9;
  }

  70% {
    box-shadow: 0 0 0 18px rgba(44, 73, 115, 0);
    opacity: 0;
  }

  100% {
    box-shadow: 0 0 0 0 rgba(44, 73, 115, 0);
    opacity: 0;
  }
}

@keyframes pulseWhatsappRing {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    opacity: 0.9;
  }

  70% {
    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
    opacity: 0;
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    opacity: 0;
  }
}

@keyframes floatBob {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-5px);
  }
}

@keyframes phoneRingShake {

  0%,
  75%,
  100% {
    transform: rotate(0deg);
  }

  80% {
    transform: rotate(-14deg);
  }

  84% {
    transform: rotate(14deg);
  }

  88% {
    transform: rotate(-10deg);
  }

  92% {
    transform: rotate(10deg);
  }

  96% {
    transform: rotate(-4deg);
  }
}

@keyframes whatsappWiggle {

  0%,
  75%,
  100% {
    transform: scale(1) rotate(0deg);
  }

  80% {
    transform: scale(1.12) rotate(-8deg);
  }

  85% {
    transform: scale(1.12) rotate(8deg);
  }

  90% {
    transform: scale(1.12) rotate(-5deg);
  }

  95% {
    transform: scale(1.05) rotate(0deg);
  }
}

@keyframes badgePop {

  0%,
  70%,
  100% {
    transform: scale(1);
  }

  85% {
    transform: scale(1.22);
  }
}

.site-footer__credit-link {
  color: var(--color-primary);
  font-weight: 600;
  position: relative;
  text-decoration: none;
  display: inline-block;
  transition: color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    text-shadow var(--dur-fast) var(--ease-standard);
}

.site-footer__credit-link::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background: var(--gradient-brand);
  transition: width 0.3s var(--ease-cinematic);
  border-radius: 2px;
}

.site-footer__credit-link:hover {
  color: var(--color-accent);
  text-shadow: 0 0 12px rgba(143, 172, 204, 0.45);
  transform: translateY(-1px);
}

.site-footer__credit-link:hover::after {
  width: 100%;
}

@media (max-width: 980px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    row-gap: 2.5rem;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__col--contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SCROLLYTELLING — "How a Project Comes Together"
   Pinned via position:sticky; JS drives step activation and an
   overall progress fill from scroll math (see initScrollytelling
   in main.js). Only transform/opacity are animated here.
   ============================================================ */

.scrolly {
  position: relative;
  height: 350vh;
}

.scrolly__step-visual-mobile {
  display: none;
}

.scrolly__pin {
  position: sticky;
  top: 50px;
  /* No fixed/viewport height here at all — this was the actual bug.
     Forcing this box to 100vh (or any vh/px number) reserves a full
     screen's worth of space regardless of how tall the real content
     (heading, steps, image) is. Whatever the content doesn't use
     just sits there as empty space — that's the gap, and no amount
     of alignment tweaking removes it, since the box itself is still
     oversized. The pin should just size to its own content (default
     block height). The "stay pinned while scrolling through 4 steps"
     effect doesn't come from this element's height at all — it comes
     from .scrolly (the parent) being much taller than this pin, so
     there's scroll distance to consume before the pin runs out of
     room to stick. That's the correct, content-driven way to do a
     sticky pin, and it can't produce a leftover-space bug because
     there's no reserved space beyond the content in the first place. */
  display: flex;
  align-items: flex-start;
  /* The site header floats fixed at the very top of the viewport.
     Since this pin also sticks to top:0, its content would otherwise
     render underneath the header and get visually clipped. Reserving
     top clearance here keeps everything below it. */
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  box-sizing: border-box;
}

.scrolly__inner {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  width: 100%;
}

.scrolly__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin: 1rem 0 1rem;
}

.scrolly__sub {
  font-size: 1.02rem;
  max-width: 46ch;
  margin-bottom: 2.5rem;
}

.scrolly__steps-layout {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.scrolly__pagination {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 140px;
  padding-left: 20px;
  flex-shrink: 0;
}

.scrolly__pagination-track {
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border-color);
  border-radius: 99px;
  overflow: hidden;
}

.scrolly__pagination-track .scrolly__progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #1D2740, #2C4973, #4B74A2, #1D2740);
  background-size: 100% 200%;
  animation: progressGlowVertical 3s linear infinite;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(44, 73, 115, 0.8);
}

@keyframes progressGlowVertical {
  0% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 200%;
  }
}

.scrolly__pagination-dot {
  position: relative;
  display: flex;
  align-items: center;
  height: 20px;
  opacity: 0.35;
  transition: opacity 0.4s var(--ease-standard);
}

.scrolly__pagination-dot.is-active {
  opacity: 1;
}

.scrolly__pagination-circle {
  position: absolute;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-primary, #11141B);
  background: var(--bg-primary, #FFFFFF);
  transition: background-color 0.4s var(--ease-standard), border-color 0.4s var(--ease-standard), box-shadow 0.4s var(--ease-standard);
  box-sizing: border-box;
  z-index: 2;
}

.scrolly__pagination-dot.is-active .scrolly__pagination-circle {
  background: var(--color-primary, #11141B);
  box-shadow: 0 0 10px rgba(44, 73, 115, 0.6);
}

.scrolly__pagination-num {
  margin-left: 24px;
  font-family: var(--font-mono, monospace);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary, #11141B);
  line-height: 1;
}

.scrolly__steps-container {
  height: 140px;
  overflow: hidden;
  position: relative;
  flex-grow: 1;
}

.scrolly__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (min-width: 981px) {
  .scrolly__text > .scrolly__progress-track {
    margin-top: 1.5rem;
  }

  .scrolly__step {
    position: relative;
    inset: auto;
    height: 140px;
    box-sizing: border-box;
    opacity: 0.25;
    transition: opacity 0.5s var(--ease-standard);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .scrolly__step.is-active {
    opacity: 1;
  }
}

.scrolly__step-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.scrolly__step-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.scrolly__step-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 42ch;
}

.scrolly__progress-track {
  height: 3px;
  border-radius: 99px;
  background: var(--border-color);
  overflow: hidden;
  max-width: 360px;
}

.scrolly__progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #1D2740, #2C4973, #4B74A2, #1D2740);
  background-size: 200% 100%;
  animation: progressGlow 3s linear infinite;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(44, 73, 115, 0.7);
}

@keyframes progressGlow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

.scrolly__stage {
  position: relative;
}

.scrolly__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--gradient-brand);
  overflow: hidden;
  box-shadow: 0 30px 60px -24px var(--shadow-color);
}

.scrolly__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 18, 31, 0.1) 0%, rgba(20, 18, 31, 0.15) 55%, rgba(20, 18, 31, 0.6) 100%);
}

.scrolly__icon {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  filter: blur(12px) brightness(0.6) drop-shadow(0 20px 45px rgba(108, 79, 255, 0.2));
  transform: scale(0.94);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0.5s;
  pointer-events: none;
}

.scrolly__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scrolly__icon.is-active {
  opacity: 1;
  visibility: visible;
  filter: blur(0px) brightness(1) drop-shadow(0 20px 45px rgba(108, 79, 255, 0.2));
  transform: scale(1);
  z-index: 3;
  pointer-events: auto;
}

@media (max-width: 980px) {
  .scrolly__inner {
    grid-template-columns: 1fr;
  }

  .scrolly__stage {
    display: none;
  }

  /* Scroll-jacked pinning reads as janky on touch screens (tablet and
     phone alike) — fall back to a normal stacked layout where every
     step is simply visible, still inside its scroll-reveal wrapper
     for a fade-in. This threshold matches the grid collapsing to a
     single column above, so the pin never ends up stacked with the
     stage overflowing past the pinned viewport. */
  .scrolly {
    height: auto;
  }

  .scrolly__pin {
    position: static;
    height: auto;
    padding-block: clamp(2.5rem, 8vw, 3.5rem);
  }

  .scrolly__steps-layout {
    display: block;
  }

  .scrolly__pagination {
    display: none !important;
  }

  .scrolly__steps-container {
    height: auto;
    overflow: visible;
    margin-bottom: 0;
  }

  .scrolly__steps {
    position: static;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    transform: none !important;
  }

  .scrolly__step {
    position: static;
    opacity: 1;
    /* No left line of any kind on the stacked layout */
    border-left: none;
    padding-left: 0;
    height: auto;
    display: block;
  }

  .scrolly__step::before,
  .scrolly__step::after {
    display: none;
  }

  .scrolly__step-visual-mobile {
    display: block;
    position: relative;
    margin-top: 1.25rem;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 15px 35px -15px var(--shadow-color);
  }

  .scrolly__step-visual-mobile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(20, 18, 31, 0.1) 0%, rgba(20, 18, 31, 0.15) 55%, rgba(20, 18, 31, 0.6) 100%);
  }

  .scrolly__step-visual-mobile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .scrolly__progress-track {
    margin-top: 1.5rem;
  }
}

#process {
  display: none !important;
}

@media (max-width: 640px) {
  #process {
    display: block !important;
  }
}

/* ============================================================
   ABOUT PAGE — HERO VARIANT
   ============================================================ */

.hero--compact {
  /* Same reasoning as the main .hero — 72svh unchanged on normal
     screens, capped on very tall/zoomed-out ones. */
  min-height: min(72svh, 720px);
  padding-top: 9rem;
}

.hero--compact .hero__inner {
  max-width: 100%;
}

/* Centered hero variant — eyebrow, headline, sub-copy, and the
   scrub-line all align to the middle of the container. Used on
   pages (like Contact) that don't pair the hero with an image. */
.hero--centered .hero__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.hero--centered .hero__sub {
  max-width: 62ch;
  margin-inline: auto;
}

.hero--centered .hero__actions {
  justify-content: center;
}

.hero--centered .hero__scrub {
  margin-inline: auto;
}

/* About / Contact hero image — reuses the .hero__grid + .hero__visual
   pattern from the homepage hero, minus the floating stat badges.
   A soft border + shadow plus a brand-tinted gradient wash keep the
   photo feeling native to the site rather than a bolted-on stock shot. */
.hero--compact .hero__visual-card {
  border: 1.5px solid var(--color-primary);
  box-shadow: 0 30px 60px -24px var(--shadow-color);
}

.hero__visual-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  pointer-events: none;
  background:
    linear-gradient(200deg, rgba(44, 73, 115, 0.28) 0%, rgba(143, 172, 204, 0.12) 45%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(0deg, rgba(11, 10, 18, 0.35) 0%, rgba(11, 10, 18, 0) 45%);
  mix-blend-mode: normal;
}

/* About hero animated SVG — fills the card with no gaps */
.about-hero-svg-card {
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.about-hero-svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
}

.about-hero-svg.light-only {
  display: none;
}

.about-hero-svg.dark-only {
  display: block;
}

[data-theme="light"] .about-hero-svg.light-only {
  display: block;
}

[data-theme="light"] .about-hero-svg.dark-only {
  display: none;
}

/* Disable the tinted overlay on the SVG card since SVG has its own background */
.about-hero-svg-card .hero__visual-overlay {
  display: none;
}

/* Contact page hero — all fixed (rem/px), not viewport-relative.
   svh and vw units expand when browser is zoomed out to 50%,
   making the gap grow. rem values are zoom-proof. */
.contact-hero {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 8rem !important;
  padding-bottom: 3rem !important;
}

@media (max-width: 640px) {
  .hero--compact {
    min-height: min(62svh, 620px);
    padding-top: 7.5rem;
  }
}

/* ============================================================
   BRAND STORY
   ============================================================ */

.story {
  padding-block: var(--space-section);
}

.story__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.story__text {
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.8s var(--ease-cinematic),
    transform 0.8s var(--ease-cinematic);
}

.story__text.in-view {
  opacity: 1;
  transform: translateY(0);
}

.story__text.is-exiting-top {
  transform: translateY(-20px);
}

.story__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin: 0 0 1.5rem;
  max-width: 20ch;
}

.story__text p {
  max-width: 62ch;
  margin-bottom: 1.1rem;
  line-height: 1.75;
}

.story__text p:last-child {
  margin-bottom: 0;
}

.story__milestones {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.8s var(--ease-cinematic) 0.1s,
    transform 0.8s var(--ease-cinematic) 0.1s;
}

.story__milestones::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0.75rem;
  bottom: 0;
  width: 1.5px;
  background: var(--border-color);
  z-index: 0;
}

.story__milestones.in-view {
  opacity: 1;
  transform: translateY(0);
}

.story__milestones li {
  position: relative;
  padding-left: 1.5rem;
}

.story__milestones li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.35rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--bg-primary);
  z-index: 1;
}

.story__milestone-year {
  display: block;
  font-family: var(--font-mono);
  font-size: 23px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}

[data-theme="dark"] .story__milestone-year {
  color: var(--color-accent);
}

.story__milestone-label {
  display: block;
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 30ch;
}

@media (max-width: 780px) {
  .story__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TEAM
   ============================================================ */

.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

.team-card {
  position: relative;
  padding: 2rem 1.75rem 2.25rem;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transform-style: preserve-3d;
  opacity: 0;
  translate: 0 28px;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.7s var(--ease-cinematic),
    translate 0.7s var(--ease-cinematic),
    box-shadow 0.35s var(--ease-standard),
    border-color 0.35s var(--ease-standard),
    transform 0.25s var(--ease-standard);
}

.team-card.in-view {
  opacity: 1;
  translate: 0 0;
}

.team-card.is-exiting-top {
  translate: 0 -20px;
}

.team__grid .team-card:nth-child(1) {
  transition-delay: 0s;
}

.team__grid .team-card:nth-child(2) {
  transition-delay: 0.1s;
}

.team__grid .team-card:nth-child(3) {
  transition-delay: 0.2s;
}

.team__grid .team-card:nth-child(4) {
  transition-delay: 0.3s;
}

.team-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 20px 44px -22px var(--shadow-color);
}

.team-card__avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 2.5px solid var(--border-color);
}

.team-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__avatar--a {
  border-color: #1D2740;
}

.team-card__avatar--b {
  border-color: #2C4973;
}

.team-card__avatar--c {
  border-color: #4B74A2;
}

.team-card__avatar--d {
  border-color: #8FACCC;
}

.team-card__name {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.team-card__role {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--color-primary);
  margin-bottom: 0.85rem;
}

.team-card__bio {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.team-card__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.team-card__social .social-link {
  width: 32px;
  height: 32px;
}

.team-card__social .social-link svg {
  width: 16px;
  height: 16px;
}

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

@media (max-width: 560px) {
  .team__grid {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin-inline: auto;
  }
}

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

.contact-section {
  padding-top: 2rem;
  padding-bottom: var(--space-section);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: stretch;
}

.contact-panel {
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.8s var(--ease-cinematic),
    transform 0.8s var(--ease-cinematic);
}

.contact-info {
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.8s var(--ease-cinematic),
    transform 0.8s var(--ease-cinematic);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
}

.contact-panel.in-view,
.contact-info.in-view {
  opacity: 1;
  transform: translateY(0);
}

.contact-panel.is-exiting-top,
.contact-info.is-exiting-top {
  transform: translateY(-20px);
}

.contact-panel {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-panel__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.contact-panel__sub {
  color: var(--text-secondary);
  max-width: 46ch;
  margin-bottom: 2rem;
}

/* ---------- form fields ---------- */

.contact-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0px;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.form-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238FACCC'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  cursor: pointer;
}

.form-field input::placeholder,
.form-field select::placeholder,
.form-field textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.65;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(108, 79, 255, 0.14);
}

.form-field__error {
  display: block;
  min-height: 1.1em;
  font-size: 0.78rem;
  color: var(--color-accent);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.form-field.has-error input,
.form-field.has-error textarea {
  border-color: var(--color-accent-alt);
}

.form-field.has-error input:focus,
.form-field.has-error textarea:focus {
  box-shadow: 0 0 0 4px rgba(255, 79, 163, 0.14);
}

.form-field.has-error .form-field__error {
  opacity: 1;
  transform: translateY(0);
}

.contact-form__submit {
  position: relative;
  align-self: flex-start;
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
}

.contact-form__submit .contact-form__spinner {
  display: none !important;
  width: 16px;
  height: 16px;
  margin-left: 0.6rem;
  stroke: currentColor;
  animation: contact-spin 0.7s linear infinite;
}

.contact-form__submit.is-loading .contact-form__spinner {
  display: inline-flex !important;
}

.contact-form__submit.is-loading svg:not(.contact-form__spinner) {
  display: none !important;
}

.contact-form__spinner circle {
  stroke-dasharray: 40;
  stroke-dashoffset: 12;
  fill: none;
}

.contact-form__submit.is-loading .contact-form__spinner {
  display: inline-block;
}

.contact-form__submit.is-loading .contact-form__submit-label {
  opacity: 0.75;
}

@keyframes contact-spin {
  to {
    transform: rotate(360deg);
  }
}

.contact-form__note {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: -0.4rem;
}

/* ---------- success state ---------- */

.contact-success {
  text-align: center;
  padding: 2rem 1rem 1rem;
  animation: contact-success-in 0.6s var(--ease-cinematic);
}

@keyframes contact-success-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.contact-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gradient-brand);
  margin-bottom: 1.25rem;
}

.contact-success__icon svg {
  width: 32px;
  height: 32px;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.contact-success h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.contact-success p {
  color: var(--text-secondary);
  max-width: 38ch;
  margin: 0 auto 1.5rem;
}

/* ---------- info sidebar (Modern Cards) ---------- */

.contact-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.contact-card:not(.contact-card--static) {
  cursor: pointer;
}

.contact-card:not(.contact-card--static):hover {
  border-color: var(--color-primary);
  box-shadow: 0 10px 25px -10px var(--shadow-color);
  transform: translateY(-2px);
}

.contact-card--static {
  cursor: default;
}

.contact-card__icon-box {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(108, 79, 255, 0.2);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.contact-card:not(.contact-card--static):hover .contact-card__icon-box {
  background: var(--color-primary);
  color: #ffffff;
}

.contact-card__icon-box svg {
  width: 18px;
  height: 17px;
  stroke: currentColor;
}

.contact-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-accent);
}

.contact-card__desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
	display:none !important;
}

.contact-card__link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.contact-card__link:hover {
  color: var(--color-primary-dark);
}

.contact-card__value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-info {
    order: -1;
  }

  .contact-section {
    padding-top: 1.5rem;
  }
}

/* ============================================================
   SINGLE BLOG ARTICLE PAGE
   ============================================================ */

.container--narrow {
  max-width: 820px;
  margin-inline: auto;
}

.article-page {
  position: relative;
}

.article-hero,
.article-hero.hero--compact {
  min-height: auto !important;
  padding-top: 160px !important;
  padding-bottom: 1.25rem !important;
}

.article-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.article-back-btn svg {
  width: 16px;
  height: 16px;
}

.article-back-btn:hover {
  transform: translateX(-4px);
}

.article-hero__title {
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-block: 1rem 1.75rem;
  color: var(--text-primary);
}

.article-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.article-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.article-author__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #FFFFFF;
  border: 2px solid var(--bg-card);
  box-shadow: 0 4px 12px var(--shadow-color);
}

.article-author__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.article-author__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.article-author__role {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.article-share {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.article-share__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.article-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: all var(--dur-fast) var(--ease-standard);
  cursor: pointer;
}

.article-share__btn svg {
  width: 15px;
  height: 15px;
}

.article-share__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* Banner Graphic */
.article-banner {
  margin-block: 1rem 3.5rem;
}

/* 75% centred content column shared by banner + body with max-width container bounds */
.article-content-wrap {
  max-width: 900px;
  width: 100%;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .article-content-wrap {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .article-content-wrap {
    width: 100%;
    padding-inline: 0;
  }
}

.article-banner__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid var(--border-color);
  box-shadow: 0 20px 50px -20px var(--shadow-color);
  background: var(--bg-card);
  max-height: 480px;
}

.article-banner__art {
  display: block;
  width: 100%;
  height: clamp(260px, 40vw, 480px);
  max-height: 480px;
  object-fit: cover;
  object-position: center;
}

.article-banner__badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(23, 21, 42, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #fff;
}

/* Article Body Typography */

.article-lead {
  font-size: 1.22rem;
  line-height: 1.65;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.article-text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.article-text p {
  margin-bottom: 1.6rem;
}

.article-text strong {
  color: var(--text-primary);
}

.article-text h2 {
  font-size: 26px;
  font-weight: 600;
  color: var(--text-primary);
  margin-block: 2.5rem 1rem;
  line-height: 1.28;
}

.article-text h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-block: 1.8rem 0.8rem;
}

/* Callout Box */
.article-callout {
  display: flex;
  gap: 1.25rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  margin-block: 2.25rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
}

.article-callout__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(108, 79, 255, 0.1);
  color: var(--color-primary);
  flex-shrink: 0;
}

.article-callout__icon svg {
  width: 22px;
  height: 22px;
}

.article-callout__content h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

@media (max-width: 640px) {
  .article-callout__icon {
    display: none;
  }
}

.article-callout__content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.article-callout__content li {
  font-size: 0.95rem;
  line-height: 1.6;
  position: relative;
  padding-left: 1.25rem;
}

.article-callout__content li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: bold;
}

/* Blockquote */
.article-quote {
  position: relative;
  margin-block: 2.5rem;
  padding: 2rem 2.25rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.article-quote::before {
  content: "“";
  position: absolute;
  top: -0.8rem;
  left: 1.5rem;
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.4;
}

.article-quote p {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
}

.article-quote cite {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-accent);
  font-style: normal;
}

/* Ordered List */
.article-ordered-list {
  padding-left: 1.25rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.article-ordered-list li {
  line-height: 1.65;
}

/* Article Footer */
.article-footer {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
}

.article-tags {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.article-tags__title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-right: 0.25rem;
}

.article-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: all var(--dur-fast) var(--ease-standard);
}

.article-tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.article-author-card {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.article-author-card__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #FFFFFF;
  flex-shrink: 0;
}

.article-author-card__bio h4 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
  color: var(--text-primary);
}

.article-author-card__bio p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* Newsletter Form */
.newsletter-form {
  margin-top: 1.75rem;
  width: 100%;
  max-width: 520px;
}

.newsletter-form__group {
  display: flex;
  gap: 0.6rem;
}

.newsletter-form__input {
  flex-grow: 1;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.newsletter-form__input:focus {
  border-color: var(--color-primary);
}

.newsletter-form__btn {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .article-meta-bar {
    
    align-items: flex-start;
  }

  .article-author-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .newsletter-form__group {
    flex-direction: column;
  }
}

/* 17. Center-align BY THE NUMBERS section header on mobile */
@media (max-width: 767px) {
  .stats .section-head {
    margin-inline: auto !important;
    text-align: center !important;
  }
	.article-author__role{
display:none !important;}
	.article-hero__timecode{
font-size:11px}
	.article-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.article-author,
.article-share {
    display: flex;
    align-items: center;
}

.article-author__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.article-share {
    justify-content: center;
}
	.hero{
padding-top: 8rem;}

.mobile-menu.is-open::before {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.mobile-menu {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: opacity 0.3s ease, visibility 0.3s ease;
  will-change: opacity, backdrop-filter;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}
}
.article-callout__icon{
display:none !important}

[data-theme="dark"] .contact-card__title {color:#fff;}

/* ============================================================
   BOOK A CALL — Calendly embed (Contact page)
   The calendar itself lives in a Calendly iframe and is coloured
   through its embed URL (see contact-page.php); everything around
   it is built from the same tokens as the rest of the page, so it
   follows the light/dark toggle with no extra rules.
   ============================================================ */

.booking-section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  background: var(--bg-secondary);
  transition: background-color var(--dur-med) var(--ease-standard);
}

.booking-section .section-head {
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.booking-section .section-head__sub {
  margin-inline: auto;
}

.booking-panel {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: clamp(0.5rem, 1.5vw, 1rem);
  overflow: hidden;
  box-shadow: 0 24px 60px -32px var(--shadow-color);
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity 0.8s var(--ease-cinematic),
    transform 0.8s var(--ease-cinematic),
    background-color var(--dur-med) var(--ease-standard),
    border-color var(--dur-med) var(--ease-standard);
}

.booking-panel.in-view {
  opacity: 1;
  transform: translateY(0);
}

.booking-panel.is-exiting-top {
  transform: translateY(-20px);
}

.booking-embed {
  position: relative;
  min-width: 320px;
  height: 700px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.booking-embed iframe {
  display: block;
  border: 0;
  border-radius: var(--radius-md);
}

/* Calendly not reachable (blocked, offline, script failed) — show the link. */
.booking-embed.is-unavailable {
  display: grid;
  place-items: center;
  height: auto;
  min-height: 220px;
  padding: var(--space-md);
}

.booking-embed.is-unavailable::before {
  content: "The booking calendar could not be loaded.";
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  text-align: center;
}

.booking-panel__fallback {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: var(--space-md);
}

@media (max-width: 767px) {
  .booking-embed {
    height: 820px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-panel {
    opacity: 1;
    transform: none;
  }
}