:root {
  --background: #050506;
  --foreground: #f2f0e9;
  --muted: #949590;
  --line-color: rgba(255, 255, 255, 0.065);
  --hero-width: 100vw;
  --hero-height: 100svh;
  --hero-top: 0px;
  --hero-radius: 0px;
  --hero-border-opacity: 0;
  --hero-chrome-opacity: 0;
  --intro-fade: 1;
  --intro-counter-y: 0px;
  --paper: #d6d4cd;
  --paper-light: #e9e7e1;
  --ink: #1b1c1f;
  --coral: #ef5655;
  --section-supporting-text-size: clamp(14px, 1vw, 20px);
  --section-bg: #fff;
}

@media (max-width: 450px) {
  --section-supporting-text-size: 14px;
}

.dark{
  --section-bg: #0a0a0b;
}

.light{
  --section-bg: #ffffff;
  .white{
    color: #EF5454;
  }
}

.red{
  --section-bg: #EF5454;
  .white{
    color: #fff;
  }
}

.blue{
  --section-bg: #4fc7ff;
}

.text-red{
  color:#EF5454;
}

.rocket-section {
  height: 280svh;
  position: relative;
}

.rocket-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #050506;
  /* ease-in-out (not the site-wide cubic-bezier(0.22,1,0.36,1) ease-out)
     to match the rocket's own Hermite climb tween in rocket.js, which is
     a smoothstep curve (3t²-2t³) - slow-fast-slow, not front-loaded. The
     ease-out curve reaches ~98% opacity by 43% of the duration, so even
     with matching durations the background visually "finished" while the
     rocket was still barely a third of the way through its move. */
  transition: background-color 2000ms ease-in-out;
}

.rocket-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2000ms ease-in-out;
}

.rocket-bg-troposphere {
  background: linear-gradient(180deg, #4fc7ff 0%, #1e6fd9 100%);
}

.rocket-bg-stratosphere {
  background: linear-gradient(180deg, #1e6fd9 0%, #17356e 100%);
}

.rocket-bg-mesosphere {
  background: linear-gradient(180deg, #17356e 0%, #201336 100%);
}

.rocket-bg-exosphere {
  background: linear-gradient(180deg, #201336 0%, #ef5454 100%);
}

.rocket-sticky[data-zone="troposphere"] .rocket-bg-troposphere,
.rocket-sticky[data-zone="stratosphere"] .rocket-bg-stratosphere,
.rocket-sticky[data-zone="mesosphere"] .rocket-bg-mesosphere,
.rocket-sticky[data-zone="exosphere"] .rocket-bg-exosphere {
  opacity: 1;
}

body.blue .rocket-sticky[data-zone="troposphere"] .rocket-bg-troposphere {
  transition: opacity 2000ms ease-in-out;
}

/* Sits between the sky layers and the canvas (both z-index:auto, so DOM
   order alone decides paint order) — darkens the sky where the milestone
   text sits on each side, while the canvas (rocket, smoke, clouds) still
   paints on top of it, so the rocket itself isn't darkened. mix-blend-mode
   needs the sky layers in the SAME stacking context to actually blend
   against (that's why the equivalent rule on .rocket-milestones::before
   never worked: .rocket-milestones has its own position+z-index, which
   walls its pseudo-element off into its own isolated stacking context). */
.rocket-contrast-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, 0.6) 100%
  );
  mix-blend-mode: multiply;
}

@media (max-width: 600px) {
  .rocket-contrast-shade {
    background: rgba(0, 0, 0, 0.45);
  }
}

.rocket-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.rocket-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #050506;
  transition: opacity 800ms ease;
}

.rocket-loader-track {
  width: min(240px, 60vw);
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.rocket-loader-bar {
  width: 0%;
  height: 100%;
  background: #fff;
  transition: width 220ms ease;
}

.rocket-loader-pct {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.rocket-milestones {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0 24px;
  list-style: none;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rocket-visual-width, 260px);

  @media (max-width: 992px) {
    gap: 200px;
    align-items: flex-start;
    margin-top: 5rem;
  }

  @media (max-width: 719px) {
    gap: 150px;
  }

  @media (max-width: 600px) {
    gap: 6rem;
  }
  @media (max-width: 500px) {
    gap: 4rem;
  }
}


.rocket-group-left,
.rocket-group-right {
  display: flex;
  flex-direction: row;
  gap: 48px;

  
}

.rocket-group-left {
  align-items: flex-start;
  text-align: right;
}

.rocket-group-right {
  align-items: flex-start;
  text-align: left;
}

.rocket-milestones.is-stacked .rocket-group-left,
.rocket-milestones.is-stacked .rocket-group-right {
  flex-direction: column;
}

.rocket-milestone {
  opacity: 0;
  transform: translate3d(0, -500px, 0);
  transition:
    opacity 420ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
  
  @media (max-width: 500px) {
    text-shadow: 0 0 20px black;
  }
}

.rocket-milestone.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.rocket-milestone-copy {
  width: clamp(250px, 17vw, 285px);
  @media (max-width: 600px) {
    width: 200px;
  }
  @media (max-width: 500px) {
    width: 140px;
  }
}

.rocket-milestone-step {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 7rem;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.025em;
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;

  small{
    font-size: 50%;
  }

  @media (max-width: 790px) {
    font-size: 4rem;
  }
  @media (max-width: 500px) {
    font-size: 3rem;
  }
}

.rocket-milestone-copy strong {
  display: block;
  color: #fff;
  font-size: clamp(18px, 1.55vw, 25px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.rocket-milestone-copy p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 1);
  font-size: 1rem;
  line-height: 1.48;
  font-weight: 600;

  @media (max-width: 992px) {
    font-size: 0.8rem;
    line-height: 1.1rem;
  }

  @media (max-width: 500px) {
    line-height: 1.1rem !important;
    margin-top: 0.5rem;
  }

          
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

h1{
  font-size: 6rem;
    font-weight: 200;
    margin: 0;
}

@property --title-base-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #f2f0e9;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--background);
  scroll-behavior: smooth;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

body.inner-page {
  background: #fff;
  color: var(--ink);
}

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

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 32px;
  background: transparent;
  color: #f6f4ee;
  pointer-events: none;
  transition: color 220ms ease;
}

.site-header a,
.site-header nav,
.site-header button,
.header-menu-panel {
  pointer-events: auto;
}

/* sits behind .brand, pinned to the header's own top-left corner —
   solid color flips the same way the logo does (white on dark
   backgrounds, ink on light ones via body.header-light-viewport). Gradients
   can't be smoothly transitioned directly (background-image isn't an
   animatable property, so swapping the gradient's color stop just
   snaps instantly instead of tracking the logo's own crossfade) — two
   stacked layers with an opacity crossfade instead, same technique
   .brand-logo-white/.brand-logo-black already use. */
.header-logo-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 300px;
  z-index: 0;
  pointer-events: none;
}

.header-logo-glow {
  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    transition: opacity 220ms ease;
  }

  &::before {
    background: radial-gradient(farthest-corner at 0% 0%, #000 10%, transparent 40%)
  }

  &::after {
    background: radial-gradient(farthest-corner at 0% 0%, #fff 0%, transparent 40%);
  }
}



body.light .header-logo-glow {
  &::before{
    opacity: 0;
  }
  &::after{
    opacity: 1;
  }
}

body.blue .header-logo-glow {
  &::before{
    background: radial-gradient(farthest-corner at 0% 0%, #3b00c5 10%, transparent 40%);
    opacity: 0.5;
  }
  &::after{
    opacity: 0;
  }
}

body.dark .header-logo-glow {
  &::before{
    opacity: 1;
  }
  &::after{
    opacity: 0;
  }
}

body.red .header-logo-glow {
  &::before{
    opacity: 0.3;
  }
  &::after{
    opacity: 0;
  }
}

.brand-logo-white {
    opacity: 1;
    filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 1))
  }
  .brand-logo-black {
    opacity: 0;
    filter: drop-shadow(4px 4px 10px #fff);
  }

body.dark{
  .brand-logo-white {
    opacity: 1;
  }
  .brand-logo-black {
    opacity: 0;
  }
}

body.red{
  .brand-logo-white {
    filter:none;
    opacity: 1;
  }
  .brand-logo-black {
    
    opacity: 0;
  }
}



body.light{
  .brand-logo-white {
    opacity: 0;
  }
  .brand-logo-black {
    opacity: 1;
  }
}

body.blue{
  .brand-logo-white {
    opacity: 1;
  }
  .brand-logo-black {
    opacity: 0;
  }
}


.brand {
  width: clamp(122px, 10vw, 152px);
  flex: 0 0 auto;
  aspect-ratio: 1920 / 322;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
  transition: opacity 180ms ease;
}


body.header-light-viewport .site-header {
  color: var(--ink);
}

.header-menu-toggle {
  min-width: 112px;
  margin-left: auto;
  padding: 12px 16px 12px 19px;
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 0;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -8px, 0);
  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 220ms,
    box-shadow 220ms ease;
}

body.header-nav-visible .header-menu-toggle,
body.inner-page .header-menu-toggle,
.site-header.is-menu-open .header-menu-toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.header-menu-toggle:hover,
.header-menu-toggle:focus-visible {
  box-shadow: 0 10px 28px rgba(239, 86, 85, 0.32);
  outline: none;
}

.header-menu-toggle-icon {
  width: 20px;
  height: 12px;
  position: relative;
  display: block;
}

.header-menu-toggle-icon span {
  width: 100%;
  height: 1.5px;
  position: absolute;
  left: 0;
  background: currentColor;
  transform-origin: center;
  transition:
    top 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header-menu-toggle-icon span:first-child {
  top: 2px;
}

.header-menu-toggle-icon span:last-child {
  top: 9px;
}

.site-header.is-menu-open .header-menu-toggle-icon span:first-child {
  top: 5px;
  transform: rotate(45deg);
}

.site-header.is-menu-open .header-menu-toggle-icon span:last-child {
  top: 5px;
  transform: rotate(-45deg);
}

.header-menu-scrim {
  padding: 0;
  position: fixed;
  z-index: 1;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transition:
    opacity 260ms ease,
    visibility 0s linear 260ms;
}

.site-header.is-menu-open .header-menu-scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
  transition-delay: 0s;
}

.header-menu-panel {
  width: 100%;
  height: clamp(310px, 36svh, 400px);
  max-height: calc(100svh - 44px);
  padding: 20px clamp(28px, 4vw, 76px) 18px;
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background: #0e1311;
  color: #f6f4ee;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -100%, 0);
  transform-origin: top center;
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 220ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 540ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 540ms;
}

.site-header.is-menu-open .header-menu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 0 0 0);
  transition-delay: 0s;
}

.header-menu-panel-top {
  min-height: 76px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(246, 244, 238, 0.58);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.header-menu-panel-top p {
  margin: 0;
  color: var(--coral);
}

.header-menu-isotype {
  width: clamp(62px, 5vw, 86px);
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  object-fit: contain;
  transform: translate3d(-50%, -50%, 0);
  filter: drop-shadow(0 10px 28px rgba(239, 86, 85, 0.16));
}

.header-menu-links {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: clamp(14px, 2.2vw, 44px);
}

.header-menu-links a {
  min-width: 0;
  padding: 10px 0;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  transition:
    color 180ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-default{
  background-color: #fff;
  padding: 0 1rem;
    padding: 0.2rem 1rem;
    border: 1px solid #000;
    border-radius: 99px;
    font-weight: 600;
    color: black;
}

.header-menu-links a span {
  color: var(--coral);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.header-menu-links a strong {
  white-space: nowrap;
  font-size: clamp(21px, 1.72vw, 33px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
}

.header-menu-links a::after {
  content: "↗";
  position: absolute;
  right: -2px;
  color: var(--coral);
  font-size: 16px;
  opacity: 0;
  transform: translate3d(-8px, -7px, 0);
  transition:
    opacity 180ms ease,
    transform 220ms ease;
}

.header-menu-links a {
  position: relative;
}

.header-menu-links a:hover,
.header-menu-links a:focus-visible {
  color: #fff;
  outline: none;
  transform: translate3d(0, -4px, 0);
}

.header-menu-links a:hover::after,
.header-menu-links a:focus-visible::after {
  opacity: 1;
  transform: translate3d(0, -7px, 0);
}

.header-menu-panel-bottom {
  width: min(280px, 24vw);
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.header-menu-contact {
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.header-menu-contact:hover,
.header-menu-contact:focus-visible {
  box-shadow: 0 10px 28px rgba(239, 86, 85, 0.28);
  outline: none;
  transform: translateY(-2px);
}

.header-menu-email {
  justify-self: center;
  color: rgba(246, 244, 238, 0.62);
  font-size: 10px;
}

body.inner-page .site-header {
  color: var(--ink);
}


.intro {
  min-height: 100svh;
  padding: 120px 7vw 52px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  z-index: 15;
  overflow: visible;
  background: transparent;
}

.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 4, 6, 0.2), rgba(3, 4, 6, 0.18) 34%, rgba(3, 4, 6, 0.86) 100%),
    linear-gradient(90deg, rgba(3, 4, 6, 0.48), transparent 62%);
  opacity: var(--intro-fade);
  transform: translate3d(0, var(--intro-counter-y), 0);
  will-change: opacity, transform;
}

.intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.021) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.021) 1px, transparent 1px);
  background-size: 9vw 9vw;
  mask-image: linear-gradient(to bottom, transparent, black 30%, black);
  opacity: var(--intro-fade);
  transform: translate3d(0, var(--intro-counter-y), 0);
  will-change: opacity, transform;
}

.intro-copy {
  width: min(1180px, 80vw);
  position: fixed;
  z-index: 1;
  left: 7vw;
  bottom: 52px;
  max-width: 1180px;
  opacity: var(--intro-fade);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--coral);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.intro h1 {
  max-width: 1180px;
  margin: 0;
  font-size: clamp(46px, 5.4vw, 92px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.intro-text {
  max-width: 720px;
  margin: 32px 0 0;
  color: #fff;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.5;
}

.scroll-cue {
  position: fixed;
  z-index: 1;
  right: 7vw;
  bottom: 52px;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #bdbcb6;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: var(--intro-fade);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
}

.intro.is-faded .intro-copy,
.intro.is-faded .scroll-cue {
  visibility: hidden;
  pointer-events: none;
}

.scroll-line {
  width: 1px;
  height: 84px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: "";
  position: absolute;
  inset: -100% 0 0;
  background: #fff;
  animation: scrollLine 2s ease-in-out infinite;
}

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

  100% {
    transform: translateY(200%);
  }
}

.scale-story {
  --wide-card-height: min(31vh, 290px);
  --gallery-y: 110vh;
  --gallery-width: 100vw;
  --grid-gap: 20px;
  --outer-shift: 40px;
  --outer-shift-neg: -40px;
  --center-extra: 80px;
  --gallery-opacity: 0;
  --line-progress: 0%;
  /* capped in px so this doesn't keep growing on tall viewports — svh
     alone made the scroll distance scale with viewport height with no
     ceiling. 3100px matches what 330svh already gives at a ~940px-tall
     viewport (a typical laptop/desktop), so normal screens are
     unaffected; only unusually tall viewports get clamped. */
  height: min(330svh, 3100px);
  position: relative;
  background: #050506;
  transition: background-color 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #050506;
  transition: background-color 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.clients-viewport.light .scale-story,
body.clients-viewport.light .stage {
  background: var(--section-bg);
}

.stage-grid {
  display: none;
}

.stage-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 16%, #050506 87%);
}

.gallery-grid {
  width: var(--gallery-width);
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  opacity: var(--gallery-opacity);
  transform: translate3d(-50%, var(--gallery-y), 0);
  will-change: transform, opacity;
}

.gallery-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

.column-left {
  padding-top: 100px;
}

.column-right {
  padding-top: 150px;
}

.column-center {
  width: calc(100% + var(--center-extra));
  margin-left: var(--outer-shift-neg);
  margin-right: var(--outer-shift-neg);
  position: relative;
  z-index: 3;
}

.column-left .gallery-card {
  transform: translateX(var(--outer-shift-neg));
}

.column-right .gallery-card {
  transform: translateX(var(--outer-shift));
}

.hero-placeholder {
  width: 100%;
  aspect-ratio: 1.72 / 1;
  flex: 0 0 auto;
}

.gallery-card {
  width: 100%;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 20px;
  background: #111216;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.gallery-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 6, 10, 0.18), transparent 38%, rgba(4, 6, 10, 0.58)),
    radial-gradient(circle at center, transparent 35%, rgba(4, 6, 10, 0.2));
}

.card-tall {
  height: min(60vh, 560px);
}

.card-wide {
  height: var(--wide-card-height);
}

.card-deep {
  height: min(71vh, 663px);
}

.column-center .gallery-card:last-child {
  height: var(--wide-card-height);
}

.gallery-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) brightness(0.78);
  transform: scale(1.015);
}

.hero-card {
  width: var(--hero-width);
  height: var(--hero-height);
  position: fixed;
  z-index: 10;
  top: 0;
  left: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, var(--hero-border-opacity));
  border-radius: var(--hero-radius);
  background: #111216;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.065);
  contain: layout paint style;
  transform: translate3d(-50%, var(--hero-top), 0);
  backface-visibility: hidden;
  will-change: width, height, transform, border-radius;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-video-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 6, 10, 0.1), transparent 46%, rgba(4, 6, 10, 0.64)),
    radial-gradient(circle at 50% 45%, transparent 28%, rgba(4, 6, 10, 0.2) 100%);
}

.progress-rail {
  position: absolute;
  z-index: 30;
  width: 1px;
  height: 120px;
  right: 30px;
  bottom: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  transition: background-color 620ms ease;
}

.progress-rail span {
  position: absolute;
  inset: 0;
  background: #f0eee7;
  transform: translateY(calc(-100% + var(--line-progress)));
  transition: background-color 620ms ease;
}

body.clients-viewport.light .progress-rail {
  background: rgba(27, 28, 31, 0.18);
}

body.clients-viewport.light .progress-rail span {
  background: var(--ink);
}

body.clients-viewport.light .site-header {
  color: var(--ink);
}



body.reel-viewport.dark .site-header {
  color: #f6f4ee;
}


body.projects-viewport.light .site-header {
  color: var(--ink);
}


.outro {
  min-height: 100svh;
  position: relative;
  display: block;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
}

.outro.is-reveal-ready > .content-section:first-child .section-inner {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 480ms ease,
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.outro.is-reveal-ready.is-visible > .content-section:first-child .section-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.content-section {
  position: relative;
  scroll-margin-top: 88px;
}

.content-section:first-child {
  border-top: 0;
}

.section-inner {
  width: min(100%, 1600px);
  margin: 0 auto;
}

.section-inner,
.site-footer {
  padding: clamp(92px, 10vw, 160px) clamp(24px, 7vw, 112px);
}

.outro .eyebrow {
  margin-bottom: 24px;
  color: var(--coral);

  @media (max-width: 550px) {
    margin-bottom: 0.5rem;
  }
}

.outro h2 {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(44px, 5.4vw, 88px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.outro h3 {
  margin: 0;
  font-size: clamp(25px, 2.35vw, 38px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.outro p {
  line-height: 1.55;
}

.section-heading {
  margin-bottom: clamp(54px, 7vw, 104px);
}

.split-heading {
  display: block;
}

.split-heading .section-intro {
  max-width: 720px;
  margin-top: 30px;
}

.section-intro {
  max-width: 600px;
  margin: 0;
  color: #4e4f4c;
  font-size: var(--section-supporting-text-size);
}

.clients-section {
  background: #050506;
  color: #f2f0e9;
  transition:
    background-color 720ms cubic-bezier(0.22, 1, 0.36, 1),
    color 620ms ease;
}

.clients-section .eyebrow {
  color: var(--coral);
}

.clients-section .section-intro {
  color: #aaa9a4;
  transition: color 620ms ease;
}

.clients-section .cursor-reactive-title {
  --title-base-color: #f2f0e9;
}

.clients-section.is-light-theme {
  background: var(--section-bg);
  color: var(--ink);
}

.clients-section.is-light-theme .section-intro {
  color: #4e4f4c;
}

.clients-section.is-light-theme .cursor-reactive-title {
  --title-base-color: #1b1c1f;
}

body.reel-viewport.dark .clients-section.is-light-theme,
body.reel-viewport.dark .impact-sticky {
  background: var(--section-bg);
  color: #f2f0e9;
}

body.reel-viewport.dark .clients-section.is-light-theme .section-intro,
body.reel-viewport.dark .impact-copy p,
body.reel-viewport.dark .impact-scroll-cue {
  color: #aaa9a4;
}

body.reel-viewport.dark .clients-section.is-light-theme .cursor-reactive-title {
  --title-base-color: #f2f0e9;
}

body.reel-viewport.dark .impact-step,
body.reel-viewport.dark .impact-copy strong {
  color: #f2f0e9;
}

body.reel-viewport.dark .impact-copy::after {
  background: rgba(242, 240, 233, 0.34);
}

.projects-section {
  border-color: transparent;
  color: #f2f0e9;
  background: var(--section-bg);
  transition:
    background-color 720ms cubic-bezier(0.22, 1, 0.36, 1),
    color 620ms ease;
}

.projects-section .eyebrow {
  color: var(--coral);
  transition: color 620ms ease;
}

.clients-section .section-inner {
  padding-top: clamp(56px, 5vw, 82px);
  padding-bottom: clamp(36px, 4vw, 64px);
}

@media (min-width: 881px) {
  .clients-section {
    z-index: 2;
    margin-top: -12svh;
  }
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Filas auto en vez de una altura fija: cada logo fuerza su propia fila a
     aspect-ratio 1 (ver .client-logo abajo), así la altura de fila termina
     igualando el ancho real de columna — cuadrados perfectos sin importar
     el viewport. El bloque de texto (2 columnas × 3 filas) queda formado
     por esas mismas unidades cuadradas. */
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
  margin-bottom: clamp(72px, 8vw, 120px);
}

@media (min-width: 1200px) {
  .clients-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.clients-grid .client-logo {
  position: relative;
  aspect-ratio: 1;
  background: white;
    border-radius: 2rem;
    margin: 1rem;
    border: 2px solid rgba(27, 28, 31, 0.1);
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 640ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 640ms ease;

    @media (max-width: 550px) {
      margin: 0.2rem;
    }
}

.clients-grid .client-logo.is-visible {
  opacity: 1;
  transform: translateY(0);

  &.active{
    border-color: #EF5454;
  }
}

.clients-grid-cell {
  --clients-cell-padding: clamp(10px, 2vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--clients-cell-padding);
  transition:
    background-color 720ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.clients-section.is-light-theme .clients-grid-cell {

}

.clients-grid-text {
  /* Un solo bloque de texto (misma estructura que el .section-heading
     original: eyebrow + h2 agrupados, intro debajo con margin-top), en vez
     de repartirlo en celdas separadas — ocupa un área de la grilla y el
     resto de las celdas (grid-auto-flow: dense en .clients-grid) se llenan
     con logos automáticamente alrededor suyo. */
  grid-column: span 2;
  grid-row: span 3;
  align-items: flex-end;
  justify-content: center;
}

.clients-grid-text .split-heading {
  width: 100%;
}

.clients-grid-text h2 {
  margin: 0;
}

.clients-grid-text .section-intro {
  max-width: none;
}

.client-logo .logo-frame {
  /* Establishes its own (unpadded) box as the containing block for
     .logo-color below — .client-logo itself has padding, and inset:0 on
     an absolutely positioned element sits at the PADDING edge (the outer
     edge of the padding, not the content edge), so anchoring straight to
     .client-logo made .logo-color cover the padding too and render
     visibly bigger than .logo-bw (a normal-flow sibling confined to the
     padded content box). Interposing this padding-free wrapper sidesteps
     that entirely — both images now size against the exact same box. */
  position: relative;
  width: 100%;
  height: 100%;
}

.client-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.client-logo .logo-bw {
  transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.client-logo.active .logo-bw {
  opacity: 0;
}

.client-logo .logo-color {
  /* mix-blend-mode:multiply (inherited from ".client-logo img") is meant
     to blend a logo against the cell's own background — stacked on top of
     .logo-bw instead, it was multiplying against THAT opaque image, which
     darkened/muddied the color version instead of showing it cleanly (it
     rendered almost solid black). Reset to normal so it composites purely
     over .logo-bw as a plain crossfade. */
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: normal;
  transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.client-logo.active .logo-color {
  opacity: 1;
}

.impact-journey {
  height: 258svh;
  margin-top: clamp(8px, 1.5vw, 22px);
  position: relative;
}

.impact-sticky {
  height: 86svh;
  position: sticky;
  top: 14svh;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  transition:
    background-color 720ms cubic-bezier(0.22, 1, 0.36, 1),
    color 620ms ease;
}

.impact-canvas,
.impact-milestones {
  position: absolute;
  inset: 0;
}

.impact-canvas {
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.impact-milestones {
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.impact-milestone {
  width: 0;
  height: 0;
  position: absolute;
  top: var(--point-y);
  left: var(--point-x);
  opacity: 0;
  transform: translate3d(0, calc(22px + var(--parallax-y, 0px)), 0);
  transition:
    opacity 420ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.impact-milestone.is-visible {
  opacity: 1;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

.impact-marker {
  width: 13px;
  height: 13px;
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 2;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--coral);
  box-shadow:
    0 0 0 1px var(--coral),
    0 0 24px rgba(239, 86, 85, 0.24);
}

.impact-copy {
  width: clamp(190px, 17vw, 285px);
  padding-bottom: calc(var(--stem-length, 88px) + 14px);
  position: absolute;
  bottom: 0;
  left: -2px;
  z-index: 1;
}

.impact-copy::after {
  width: 1px;
  height: var(--stem-length, 88px);
  position: absolute;
  bottom: 0;
  left: 2px;
  content: "";
  background: rgba(27, 28, 31, 0.35);
  transition: background-color 620ms ease;
}

.impact-step {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: clamp(31px, 3.8vw, 61px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.055em;
  transition: color 620ms ease;
}

.impact-copy strong {
  display: block;
  color: var(--ink);
  font-size: clamp(18px, 1.55vw, 25px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transition: color 620ms ease;
}

.impact-copy p {
  margin: 14px 0 0;
  color: #555652;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.48;
  transition: color 620ms ease;
}

.impact-milestone-final .impact-copy {
  width: clamp(175px, 12vw, 210px);
  padding: 0;
  padding-bottom: 0;
  top: -16px;
  right: auto;
  bottom: auto;
  left: 30px;
  text-align: left;
}

.impact-milestone-final .impact-copy::after {
  width: 22px;
  height: 1px;
  top: 22px;
  right: auto;
  bottom: auto;
  left: -28px;
}

.impact-scroll-cue {
  position: absolute;
  right: 0;
  bottom: 24px;
  z-index: 4;
  margin: 0;
  color: #777873;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 260ms ease;
}

.impact-sticky.has-started .impact-scroll-cue {
  opacity: 0;
}

.process-flow {
  --process-yellow: #f2b134;
  --process-blue: #1fa6c9;
  --item-size: 900px;
  --track-shift: 0px;
  --track-shift-y: 0px;
  --brain-x: 50%;
  --brain-y: 50%;
  height: 320svh;
  position: relative;
  background: var(--section-bg);
  transition: background-color 900ms ease;
}

.process-flow.is-dark {
  background: #EF5454;
}

.process-flow-sticky {
  height: 100svh;
  position: sticky;
  top: 0;
  //overflow: hidden;
  isolation: isolate;
}

.process-nodes {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-node {
  width: 0;
  height: 0;
  position: absolute;
  top: var(--point-y);
  left: var(--point-x);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.4);
  transition:
    opacity 420ms ease,
    transform 760ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

.process-node.is-visible {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.process-node-brain,
.process-node-brain.is-visible {
  transform: translate3d(calc(-50% + var(--track-shift)), calc(-50% + var(--track-shift-y)), 0) scale(1);
}

.process-node-brain {
  width: min(400px, 60vw);
  height: min(400px, 60vw);
  left: 50%;
  transition:
    left 900ms cubic-bezier(0.22, 1, 0.36, 1),
    width 900ms cubic-bezier(0.22, 1, 0.36, 1),
    height 900ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.process-node-brain.is-settled {
  left: var(--point-x);
  width: min(200px, 40vw);
  height: min(200px, 40vw);
}

.process-lottie {
  width: 100%;
  height: 100%;
  @media (max-width: 880px) {
    transform: scale(0.8);
  }

  @media (max-width: 720px) {
      &.process-lottie-item1{
        transform: scale(0.8) rotate(90deg);
      }
      &.process-lottie-item3{
        transform: scale(0.8, -0.8) rotate(-90deg);
      }
      &.process-lottie-item4{
        transform: scale(0.8, -0.8) rotate(-90deg);
      }
  }

  @media (max-width: 450px) {
      &.process-lottie-item1{
        transform: scale(0.6) rotate(90deg);
      }
      &.process-lottie-item2{
        transform: scale(0.6);
      }
      &.process-lottie-item3{
        transform: scale(0.6, -0.6) rotate(-90deg);
      }
      &.process-lottie-item4{
        transform: scale(0.6, -0.6) rotate(-90deg);
      }
  }

  
}



.process-lottie-brainlines {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 357.14%;
  height: 357.14%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;

   @media (max-width: 880px) {
       transform: translate(-50%, -50%) scale(0.8);
   }
}

.process-lottie-ico1,
.process-lottie-ico2,
.process-lottie-ico3 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;

  @media (max-width: 450px) {
      width: 30%;
      height: 30%;
  }
}

.process-icon {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.process-node-item1,
.process-node-item1.is-visible,
.process-node-item2,
.process-node-item2.is-visible,
.process-node-item3,
.process-node-item3.is-visible,
.process-node-item4,
.process-node-item4.is-visible,
.process-node-radial,
.process-node-radial.is-visible,
.process-node-bglow,
.process-node-bglow.is-visible,
.process-node-bulb,
.process-node-bulb.is-visible {
  transform: translate3d(calc(-50% + var(--track-shift)), calc(-50% + var(--track-shift-y)), 0) scale(1);
}



.process-node-bulb,
.process-node-bulb.is-visible {
  @media (max-width: 1630px) {
    transform: translate3d(calc(-50% + var(--track-shift)), calc(-50% + var(--track-shift-y)), 0) scale(0.7);
  }
  
}

.process-node-item1,
.process-node-item2,
.process-node-item3,
.process-node-item4,
.process-node-radial,
.process-node-bglow,
.process-node-bulb {
  transition:
    opacity 420ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.process-node-item1,
.process-node-item2,
.process-node-item3,
.process-node-item4 {
  width: var(--item-size);
  height: calc(var(--item-size) * 0.79);
}

.process-node-bulb {
  width: var(--item-size);
  height: var(--item-size);
}

.process-node-bglow {
  width: calc(var(--item-size) * 1.4);
  height: calc(var(--item-size) * 1.4 * 0.79);
  z-index: -1;
  pointer-events: none;
}

.process-node-radial {
  width: calc(var(--item-size) * 2.2);
  height: calc(var(--item-size) * 2.2);
  background: radial-gradient(
    circle,
    rgba(255, 212, 0, 1) 15%,
    rgba(242, 177, 52, 0) 50%
  );
  z-index: -2;
  pointer-events: none;
}

.process-node-content {
    position: absolute;
    width: 50%;
    height: auto;
    top: 50%;
    transform: translateY(-100%);
}

@media (max-width: 720px) {
  .process-node-item3 .process-node-content{
    transform: translateY(-50%);
    left: 50%;
  }
}


.process-node-circle {
    float: right;
    width: 320px;
    height: 320px;
    margin-right: -160px;
    border-radius: 50%;
    background: var(--process-yellow);
    shape-outside: circle(50%) border-box;
    shape-margin: 0;
    margin-bottom: -160px;
    opacity: 0;

    &.process-node-circle1 {
        margin-top: 110px;
    }
    &.process-node-circle2 {
        margin-top: -40px;
    }
    &.process-node-circle3 {
        margin-top: 120px;
        display: none;
    }

    @media (max-width: 880px) {
      width: 240px;
      height: 240px;
      margin-right: -120px;
      margin-bottom: -120px;

      &.process-node-circle1 {
          margin-top: 100px;
      }
    }

    @media (max-width: 720px) {
      width: 200px;
      height: 200px;
      margin-right: -100px;
      margin-bottom: -100px;

      &.process-node-circle1 {
        margin-top: 150px;
      }
    }
}

.process-node-text {
  display: block;
  color: var(--ink);
  text-align: center;
  font-size: 1.2rem;

  &.process-node-t1 {
        width: 130%;
        padding-left: 90px;
  }
  &.process-node-t3 {
      width: 200%;
      padding: 0 60%;
      margin-top: -60%;
  }

  @media (max-width: 1300px) {
    &.process-node-t3 {
      padding: 0 70%;
      margin-top: -65%;
    }
  }

  @media (max-width: 880px) {
    font-size: 1rem;
    &.process-node-t1 {
      width: 100%;
      padding-left: 130px;
    }
    &.process-node-t2 {
      padding-left: 50px;
      padding-right: 100px;
    }

    &.process-node-t3 {
      margin-top: -50%;
    }
  }

  @media (max-width: 720px) {
    &.process-node-t1 {
      padding-left: 150px;
      padding-right: 30px;
      text-align: end;
    }
    &.process-node-t2 {
      text-align: end;
      padding-right: 130px;
      padding-left: 90px;
    }

    &.process-node-t3 {
      margin-top: 0;
      padding: 0;
      margin-top: 0;
            padding: 0;
            width: 80%;
            padding-left: 130px;
            text-align: start;
    }
  }
  @media (max-width: 450px) {
    &.process-node-t1 {
      padding-left: 200px;
      font-size: 0.9rem;
      font-weight: 600;
    }
    &.process-node-t2 {
      padding-right: 100px;
      padding-left: 150px;
      font-size: 0.9rem;
      font-weight: 600;
    }

    &.process-node-t3 {
      font-size: 0.9rem;
      font-weight: 600;
      padding-left: 100px;
                  width: 65%;
    }
  }
}

.process-lines-end {
  position: absolute;
  /* aligns with .process-node-bulb's --point-y (42%) at the moment the pin releases */
  top: calc(100% - 35svh);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}

.process-lines-end.is-visible {
  opacity: 1;
}

.process-lines-end-path {
  transition: stroke 400ms ease;
}

.process-lines-end.is-complete .process-lines-end-path {
  stroke: #ef5454;
}

.process-lines-end svg {
  display: block;
  width: clamp(140px, 16vw, 220px);
  height: auto;
}

.solutions-target {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  color: var(--coral);
  -webkit-text-fill-color: var(--coral);
}

@media (prefers-reduced-motion: reduce) {
  .process-node {
    transition: opacity 320ms ease;
  }
}

@media (max-width: 780px) {
  .process-flow {
    height: 380svh;
  }

  .process-lines-end {
    top: calc(100% - 35svh);
  }
}

.reel-section {
  border-color: transparent;
  background: var(--section-bg);
  color: var(--ink);
  overflow: hidden;
  transition:
    background-color 720ms cubic-bezier(0.22, 1, 0.36, 1),
    color 620ms ease,
    border-color 620ms ease;
}

/* content sits above the ribbon background layer (z-index:0 below) */
.reel-section .reel-layout {
  position: relative;
  z-index: 1;
}

.reel-bg-ribbons {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 24px;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.05;
}

.reel-ribbon {
  width: 100%;
}

.reel-ribbon-track {
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
  white-space: nowrap;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 600;
  color: rgba(27, 28, 31, 0.06);

  .text-outline{
    font-size: 10rem;
    line-height: 7rem;
  }
  .text-100{
    font-size: 5rem;
  }
}

body.reel-viewport.dark .reel-ribbon-track {
  
}

.time-video{
  font-weight: 900;
  @media (max-width: 780px) {
    font-size: 5rem;
  }
  @media (max-width: 550px) {
    font-size: 4rem;
  }
}

.reel-ribbon-track > span::after {
  content: "•";
  margin-left: 32px;
  opacity: 0.6;
  font-size: 4rem;
  vertical-align: top;
}

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

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

.reel-ribbon-1 .reel-ribbon-track {
  animation: reel-ribbon-left 1057s linear infinite;
}

.reel-ribbon-2 .reel-ribbon-track {
  animation: reel-ribbon-right 977s linear infinite;
}

.reel-ribbon-3 .reel-ribbon-track {
  animation: reel-ribbon-left 607s linear infinite;
}

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

body.reel-viewport.dark .reel-section {
  border-color: rgba(255, 255, 255, 0.12);
  background: var(--section-bg);
  color: #f2f0e9;
}

body.reel-viewport.dark .reel-section {
  border-color: transparent;
}

body.projects-viewport.light .reel-section,
body.projects-viewport.light .projects-section {
  border-color: transparent;
  background: var(--section-bg);
  color: var(--ink);
}

body.projects-viewport.light .reel-copy > p:not(.eyebrow) {
  color: #4e4f4c;
}

body.projects-viewport.light .projects-section .eyebrow {
  color: var(--coral);
}

.project-title{
  color: #EF5454;
}

.contact-section {
  border-top: 0;
  border-color: rgba(27, 28, 31, 0.1);
  background: #fff5f5;
  color: var(--ink);
  transition:
    background-color 720ms cubic-bezier(0.22, 1, 0.36, 1),
    color 620ms ease,
    border-color 620ms ease;
}

.contact-section .eyebrow {
  color: var(--coral);
}

.reel-section .eyebrow {
  color: var(--coral);
}

.reel-layout {
  min-height: 82svh;
  display: grid;
  grid-template-columns: minmax(300px, 0.7fr) minmax(520px, 1.3fr);
  gap: clamp(48px, 8vw, 136px);
  align-items: center;
}

.reel-copy > p:not(.eyebrow) {
  max-width: 600px;
  margin: 34px 0 0;
  color: #4e4f4c;
  font-size: var(--section-supporting-text-size);
  transition: color 620ms ease;
}

body.reel-viewport.dark .reel-copy > p:not(.eyebrow) {
  color: #fff;
}

.media-placeholder {
  min-height: 440px;
  padding: 28px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  background:
    radial-gradient(circle at 70% 30%, rgba(239, 86, 85, 0.38), transparent 24%),
    linear-gradient(135deg, #1d1e22, #0c0c0d 70%);
  color: #f2f0e9;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.media-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}

.media-placeholder > * {
  position: relative;
  z-index: 1;
}

.media-placeholder.reel-player {
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  display: block;
}

.reel-player iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  border: 0;
}

.text-link,
.button-link {
  width: fit-content;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.text-link {
  margin-top: 30px;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
}

.button-link {
  margin-top: 52px;
  padding: 16px 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.text-link:hover,
.button-link:hover,
.text-link:focus-visible,
.button-link:focus-visible {
  opacity: 0.58;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows:
    clamp(280px, 29vw, 450px)
    clamp(100px, 15vw, 200px)
    clamp(280px, 29vw, 450px);
  grid-auto-rows: clamp(390px, 29vw, 450px);
  gap: clamp(14px, 1.4vw, 24px);

  @media (max-width: 880px) {
    //grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  @media (max-width: 720px) {
    grid-template-columns: repeat(12, minmax(0, 1fr));

    .project-card:nth-child(1) {
        grid-column: 1 / span 7;
    }
    .project-card:nth-child(2) {
        grid-column: 8 / -1;
    }
    .project-card:nth-child(3) {
        grid-column: 1 / span 3;
    }
    .project-card:nth-child(4) {
        grid-column: 4 / span 4;
    }
  }

  @media (max-width: 600px) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));

    .project-card:nth-child(1) {
        grid-column: 1 / span 12;
    }
    .project-card:nth-child(2) {
        grid-column: 4 / -1;
        grid-row: 2;
    }
    .project-card:nth-child(3) {
        grid-column: 1 / span 3;
    }
    .project-card:nth-child(4) {
        grid-column: 9 / -1;
      grid-row: 3;
    }
    .project-card:nth-child(5) {
        grid-column: 1 / span 8;
        grid-row: 3;
    }
    .project-card:nth-child(6) {
        grid-column: 1 / -1;
        grid-row: 4;
    }
  }

   /* .project-card:nth-child(1),
  .project-card:nth-child(2),
  .project-card:nth-child(3),
  .project-card:nth-child(4),
  .project-card:nth-child(5),
  .project-card:nth-child(6) {
    min-height: clamp(520px, 108vw, 620px);
    grid-column: 1;
    grid-row: auto;
  }

  .project-card:nth-child(5),
  .project-card:nth-child(6) {
    min-height: clamp(280px, 70vw, 380px);
  }*/
}

.project-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: #111215;

  .project-card-subtitle{
    margin-bottom: 1rem;
  }
}


.project-card:nth-child(1) {
  grid-column: 1 / span 8;
  grid-row: 1;
}

.project-card:nth-child(2) {
  grid-column: 9 / -1;
  grid-row: 1 / span 2;
}

.project-card:nth-child(3) {
  grid-column: 1 / span 4;
  grid-row: 2;
}

.project-card:nth-child(4) {
  grid-column: 5 / span 4;
  grid-row: 2;
}

.project-card:nth-child(5) {
  grid-column: 1 / span 6;
  grid-row: 3;
}

.project-card:nth-child(6) {
  grid-column: 7 / -1;
  grid-row: 3;
}

.project-visual {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: clamp(22px, 2.2vw, 34px);
  display: flex;
  justify-content: flex-end;
  background:
    radial-gradient(circle at 20% 18%, rgba(239, 86, 85, 0.45), transparent 18%),
    linear-gradient(145deg, #35363a, #111215 72%);
  color: rgba(255, 255, 255, 0.74);
  transition: transform 700ms cubic-bezier(0.2, 0.72, 0.2, 1);
  span{
    width: 20px;
    height: 20px;
    background: #EF5454;
    border-radius: 50%;
  }
}

.modal-column {
  display: grid;
  /* Columnas explícitas (no auto-fit): la primera absorbe el espacio
     sobrante, la segunda queda fija en 300px (nunca más ancha). auto-fit
     repite el mismo track para todas las columnas, así que no sirve para
     un máximo distinto por columna. */
  grid-template-columns: minmax(300px, 1fr) 300px;
  gap: clamp(16px, 2vw, 24px);
  justify-items: start;

  .col-hover{
    background-color: rgba(0, 0, 0, 0.05);
    padding: 2rem;
    border-radius: 1rem;

    @media (max-width: 450px) {
      padding: 1rem;
    }

    .col-hover-title{
      margin-top:0;
      margin-bottom: 0.5rem;
    }
  }
}




/* Container query en vez de media query: lo que importa es el ancho REAL
   disponible para .modal-column (el del modal, no el del viewport) — se
   mide sobre .case-modal-content (container-type:inline-size, ver más
   abajo), y se apila a 1 columna en cuanto ya no entran 300px + 300px +
   gap. */
@container (max-width: 640px) {
  .modal-column {
    grid-template-columns: 1fr;
  }
}

.project-card:nth-child(2) .project-visual {
  background: radial-gradient(circle at 72% 62%, rgba(239, 86, 85, 0.32), transparent 24%), linear-gradient(145deg, #25292b, #111215 72%);
}

.project-card:nth-child(3) .project-visual {
  background: radial-gradient(circle at 35% 58%, rgba(239, 86, 85, 0.26), transparent 22%), linear-gradient(145deg, #29272d, #0d0e10 72%);
}

.project-card:nth-child(4) .project-visual {
  background: radial-gradient(circle at 68% 32%, #3c5054, transparent 22%), linear-gradient(145deg, #24282b, #0d0e10 72%);
}

.project-card:nth-child(5) .project-visual {
  background: radial-gradient(circle at 25% 70%, rgba(239, 86, 85, 0.3), transparent 24%), linear-gradient(145deg, #29272d, #111215 72%);
}

.project-card:nth-child(6) .project-visual {
  background: radial-gradient(circle at 78% 24%, rgba(239, 86, 85, 0.22), transparent 22%), linear-gradient(145deg, #24282b, #0d0e10 72%);
}

.project-visual span {
  position: relative;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.project-copy {
  width: 100%;
  min-height: 100%;
  padding: clamp(26px, 3vw, 48px);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(3, 4, 6, 0.12) 18%, rgba(3, 4, 6, 0.2) 48%, rgba(3, 4, 6, 0.86) 100%);
  color: #fff;
}

.project-copy h3 {
  max-width: 620px;
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 2.5vw, 44px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.project-card:first-child .project-copy h3 {
  font-size: clamp(38px, 4vw, 68px);
}

.project-card:nth-child(2) .project-copy h3 {
  font-size: clamp(34px, 3vw, 54px);
}

.project-copy p {
  max-width: 640px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.5;
}

.project-copy .project-question {
  margin-top: auto;
  color: #fff;
  font-weight: 700;
}

.project-copy .text-link {
  color: #fff;
}

.project-card:hover .project-visual,
.project-card:focus-within .project-visual {
  transform: scale(1.025);
}

@media (hover: hover) and (min-width: 881px) {
  .project-copy > p,
  .project-copy > .text-link {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 320ms ease,
      transform 420ms cubic-bezier(0.2, 0.72, 0.2, 1);
  }

  .project-card:hover .project-copy > p,
  .project-card:hover .project-copy > .text-link,
  .project-card:focus-within .project-copy > p,
  .project-card:focus-within .project-copy > .text-link {
    opacity: 1;
    transform: translateY(0);
  }
}

.perspective-section {
  --perspective-cream: #fff;
  --perspective-paper: #fff;
  --perspective-line: #d9d0cb;
  border-top: 0;
  background: #fff;
  color: var(--ink);
}

.perspective-section + .content-section {
  border-top: 0;
}

.anchor-target {
  position: absolute;
  top: -88px;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.72fr);
  gap: clamp(56px, 10vw, 170px);
  align-items: start;
}

.long-copy {
  padding-top: 40px;
}

.long-copy p {
  margin: 0 0 24px;
  color: #494a47;
  font-size: var(--section-supporting-text-size);
}

.long-copy h3 {
  margin-bottom: 34px;
}

.perspective-story {
  height: 330svh;
  position: relative;
  background: #fff;
}

.perspective-sticky {
  width: 100%;
  height: 100svh;
  min-height: 690px;
  padding: clamp(24px, 3.2vh, 46px) clamp(24px, 5.5vw, 90px)
    clamp(22px, 3vh, 38px);
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto auto minmax(220px, 1fr) auto;
  overflow: hidden;
}

.perspective-sticky::before,
.perspective-sticky::after {
  width: 360px;
  height: 360px;
  position: absolute;
  content: "";
  border: 1px solid rgba(239, 86, 85, 0.075);
  border-radius: 50%;
  pointer-events: none;
}

.perspective-sticky::before {
  top: -235px;
  right: -130px;
}

.perspective-sticky::after {
  bottom: -265px;
  left: -135px;
}

.process-flow-mobile{
    display: none;
    background-color: var(--section-bg);
}



.perspective-story-header {
  width: min(100%, 1600px);
  margin: 0 auto;
  position: relative;
  z-index: 4;
  text-align: right;
  padding-top: 5rem;
  padding-right: 2rem;
}

@media (max-width: 719px) {
    .process-flow-mobile{
      display: block;
    }
    .process-flow .perspective-story-header{
      display: none;
    }
}

.perspective-story-header .eyebrow {
  margin-bottom: 16px;
}

.perspective-story-header h2 {
  width: 40%;
  max-width: 1180px;
  margin: 0 0 0 auto;
  text-align: right;
  font-family: "Lexend Deca", sans-serif;
  font-size: clamp(44px, 5.4vw, 88px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.055em;

  @media (max-width: 880px) {
    max-width: 320px;
    font-size: clamp(39px, 10.5vw, 48px);
    line-height: 0.96;
    width: min-content;
  }
}

.perspective-timeline {
  width: min(1380px, 92%);
  margin: clamp(10px, 1.5vh, 20px) auto 0;
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.perspective-timeline-track {
  height: 1px;
  position: absolute;
  top: 19px;
  left: 16.66%;
  width: 66.66%;
  overflow: visible;
  background: #d6cbc6;
}

.perspective-timeline-progress {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.perspective-timeline-indicator {
  width: 11px;
  height: 11px;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--coral);
  box-shadow:
    0 0 0 4px rgba(239, 86, 85, 0.15),
    0 0 14px rgba(239, 86, 85, 0.45);
  transform: translate(-50%, -50%);
  transition: left 80ms linear;
  animation: perspective-timeline-pulse 1.1s ease-in-out infinite;
  will-change: left, transform, box-shadow;
}

@keyframes perspective-timeline-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.92);
    box-shadow:
      0 0 0 3px rgba(239, 86, 85, 0.12),
      0 0 10px rgba(239, 86, 85, 0.34);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.16);
    box-shadow:
      0 0 0 6px rgba(239, 86, 85, 0.2),
      0 0 18px rgba(239, 86, 85, 0.52);
  }
}

.perspective-step {
  padding: 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  background: transparent;
  color: #776f6c;
  cursor: pointer;
  font: inherit;
  transition:
    color 320ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.perspective-step > span {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid #bcb2ae;
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  transition:
    background-color 320ms ease,
    border-color 320ms ease,
    color 320ms ease,
    box-shadow 320ms ease;
}

.perspective-step strong {
  margin-top: 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.perspective-step:hover,
.perspective-step:focus-visible,
.perspective-step.is-active {
  color: var(--coral);
  outline: none;
}

.perspective-step.is-active {
  transform: translateY(-2px);
}

.perspective-step.is-active > span {
  border-color: var(--coral);
  background: var(--coral);
  color: #fff;
  box-shadow: 0 8px 22px rgba(239, 86, 85, 0.22);
}

.perspective-canvas-zone {
  width: min(1580px, 100%);
  min-height: 220px;
  margin: -2px auto 0;
  position: relative;
  z-index: 2;
}

.perspective-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

.perspective-webgl-fallback {
  display: none;
}

.perspective-section.is-fallback .perspective-canvas {
  display: none;
}

.perspective-section.is-fallback .perspective-webgl-fallback {
  width: 100%;
  height: 100%;
  padding: 28px 1.5%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 82px);
  align-items: center;
}

.perspective-fallback-object {
  min-height: 210px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #e0d6d1;
  border-radius: 25px;
  background: rgba(255, 253, 249, 0.76);
  box-shadow: 0 20px 45px rgba(82, 57, 50, 0.1);
}

.perspective-fallback-object span {
  padding: 17px 12px;
  border: 1px solid #d8cfca;
  border-radius: 14px;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fallback-integration-object {
  border: 9px solid rgba(239, 86, 85, 0.72);
  gap: 5px;
}

.fallback-integration-object span:nth-child(2) {
  background: var(--coral);
  color: #fff;
}

.fallback-result-object {
  flex-direction: column;
  background: #171719;
  color: #fff;
}

.fallback-result-object span {
  border: 0;
  background: transparent;
  color: #fff;
}

.fallback-result-object b {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 1px solid var(--coral);
  border-radius: 50%;
}

.perspective-copy-grid {
  width: min(1450px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 68px);
}

.perspective-copy {
  min-width: 0;
  padding-top: 15px;
  position: relative;
  text-align: center;
  border-top: 1px solid var(--perspective-line);
  opacity: 0.42;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 420ms ease;
}

.perspective-copy::before {
  width: 0;
  height: 2px;
  position: absolute;
  top: -1px;
  left: 50%;
  content: "";
  background: var(--coral);
  transform: translateX(-50%);
  transition: width 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.perspective-copy.is-active {
  border-color: rgba(239, 86, 85, 0.3);
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.perspective-copy.is-active::before {
  width: 72px;
}

.perspective-copy > p {
  max-width: 450px;
  margin: 0 auto;
  color: #494a47;
  font-size: var(--section-supporting-text-size);
  line-height: 1.48;
}

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

.solutions-section {
  background: var(--section-bg);
  transition: background-color 3000ms cubic-bezier(0.22, 1, 0.36, 1);
}

.solutions-scrollingX {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.solutions-scrollingX-sticky {
  /* Set by layoutScrollX (script.js) — see .solutions-image-slider-wrap
     below for what reads it. */
  --slider-scale: 1;
  position: sticky;
  top: 0;
  min-height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  perspective: 1200px;
  /* trees are all anchored to the ground line at the bottom of this
     box (see .solutions-bg-tree); aligning the vanishing point's Y
     with that same line keeps every tree's foot on it regardless of
     its Z depth — only X and scale should read as "distance", not Y */
  perspective-origin: 50% 100%;
}

.solutions-scrollingX-sticky .section-heading {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  /* .solutions-scrollingX is full-bleed (100vw); constrain the heading
     back to the same width/gutters every other .section-inner uses */
  width: min(100%, 1600px);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 7vw, 112px);
  padding-right: clamp(24px, 7vw, 112px);
  box-sizing: border-box;
  margin-bottom: 0;
    margin-top: 5rem;
}

.solutions-scrollingX-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
}

.solutions-scrollingX-track {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  will-change: transform;
  /* matches .solutions-bg-tree-x's own transition duration so the
     slide content and the background trees pan in sync */
  transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}

.solutions-bg-trees {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* width spans the full multi-slide journey (set inline by JS); the
     sticky container's own overflow:hidden does the actual viewport
     clipping, so a tree positioned further along stays ready to be
     revealed by its own parallax shift instead of being clipped here */
  z-index: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}

.solutions-bg-tree-x {
  /* horizontal wrapper: carries the slide-pan (X) shift on its own
     eased transition, matching the slide track's own timing, so
     changing slides still feels fluid even though the tree itself
     (see .solutions-bg-tree) no longer animates its transform */
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.solutions-bg-tree {
  position: absolute;
  top: 100%;
  left: 0;
  width: 260px;
  height: auto;
  /* scale from the base of the tree, not its center, so it stays
     planted on the ground line at any random scale instead of sinking
     into or floating above it */
  transform-origin: 50% 100%;
  /* Y/Z/scale (script.js) — depth is conveyed both by parallax speed
     (distant trees move less on slide change, more on entry/exit) and
     by `filter` (brightness/saturate) washing distant trees toward
     white instead of fading them via opacity. `transform` has no
     transition: it updates on every scroll tick for the entry/exit
     parallax, so it must track the scroll position exactly instead of
     trailing it with an animated delay — the X pan is what gets the
     eased transition, on the parent .solutions-bg-tree-x instead. */
  transition: filter 650ms ease;
  will-change: transform;
}

.solutions-body-p > a {
  display: inline-block;
  margin-top: 8px;
  cursor: pointer;
}

.solutions-body-more {
  /* .solutions-body-p is flex-column with align-items:flex-start (so
     the "Ver mas/menos" link keeps its own natural width) — this needs
     to opt back into full width itself, or it'd shrink to its content's
     natural width instead of wrapping at the same width as .resume */
  align-self: stretch;
  /* flex-shrink:0 — otherwise flexbox itself compresses this box to
     fit .solutions-body-p's fixed height BEFORE script.js gets a
     chance to measure the overflow and apply its own max-height +
     overflow-y:auto scroll. Combined with the grid-rows still being
     1fr at that point, the auto-shrink squashed the content instead
     of scrolling it (the same "fr squashing" issue max-height alone
     caused before syncMoreScroll also forces grid-auto-rows:auto). */
  flex-shrink: 0;
  display: grid;
  grid-template-rows: 0fr;
  /* .solutions-body-more can hold more than one direct child (e.g.
     item02's several <article> blocks) — grid-template-rows alone only
     covers the first (explicit) row, so any extra auto-placed rows
     need to collapse the same way via grid-auto-rows, or they'd keep
     their natural height even while "collapsed" */
  grid-auto-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  /* no transition here — a CSS transition uses the *target* state's
     transition property, so this (the collapsed/"ver mas" state) is
     what governs collapsing: instant, no animation. The reveal
     animation lives on .is-expanded below instead, since that's the
     target state when expanding. */
  transition: none;
}

/* the 0fr/1fr collapse trick needs overflow:hidden on whatever sits
   inside the grid row too, or the row can't shrink below its content's
   own minimum size (e.g. item02's several <article> blocks) and the
   "collapsed" state ends up not collapsed at all */
.solutions-body-more > * {
  overflow: hidden;
  min-height: 0;
}

.solutions-body-more > p {
  margin: 0;
}

.solutions-body-p.is-expanded .solutions-body-more {
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
  transition:
    grid-template-rows 450ms ease,
    grid-auto-rows 450ms ease,
    opacity 450ms ease 80ms,
    margin-top 450ms ease;
}

.solutions-body-content.is-expanded {
  max-width: 1600px;
}

.solutions-body-item {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* controls the item's content width in one place — same gutters/
   max-width as .section-heading above, so the row lines up with the
   title, independent of the item itself needing to stay 100vw for
   the slide track's math */
.solutions-body-content {
  width: 100%;
  height: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 7vw, 112px);
  padding-right: clamp(24px, 7vw, 112px);
  box-sizing: border-box;
  transition: max-width 400ms ease;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* the slider keeps its own natural (max-)width instead of taking an
   even share of the row, and the text block fills whatever space is
   left next to it */
.solutions-body-p {
  /* flex-grow stays constant (1) at all times — max-width is the only
     property that actually controls this box's width, frozen narrow
     until .is-expanded relaxes it. Animating flex-grow AND max-width
     together (toggling grow 0→1) made the two properties' interpolations
     fight each other mid-transition (a brief overshoot past the final
     width, reading as a little leftward bounce-back). With grow fixed,
     max-width alone drives a single, monotonic width change. */
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  max-width: calc(
    1100px - 2 * clamp(24px, 7vw, 112px) - 1rem - 480px * var(--slider-scale, 1)
  );
  min-width: 0;
  transition: max-width 400ms ease, height 400ms ease, margin-top 400ms ease;
  font-weight: 600;
  /* centers resume/more/link as a group within this box's own height —
     only visible once .is-expanded makes that height much taller than
     the content itself; a no-op in the collapsed state where height
     already matches content. align-items:flex-start keeps children
     (notably the "Ver mas/menos" link) at their own natural width
     instead of the flex-column default of stretching to fill it. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  /* the background/blur/shadow live on a separate layer behind the
     text (not on .solutions-body-p itself) so the soft-edge mask below
     fades out the "glass" panel without also fading the actual text
     near the edges into illegibility */
  &::before {
    content: "";
    position: absolute;
    inset: -20px -100px;
    z-index: -1;
    box-shadow: 0 0 50px 50px rgba(255,255,255,0.5);
    background-color: rgba(255,255,255,0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* fades the whole panel out toward its edges instead of cutting
       off in a hard rectangle — two linear fades (one per axis)
       intersected give a soft-edged rectangle that follows the box's
       own shape, instead of an ellipse ignoring its corners */
    mask-image:
      linear-gradient(to right, transparent, black 10%, black 90%, transparent),
      linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    mask-composite: intersect;
    -webkit-mask-image:
      linear-gradient(to right, transparent, black 10%, black 90%, transparent),
      linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-composite: source-in;
    transition: all 400ms ease;
  }

  &.is-expanded{
        /* NOT 100% — that ignores the (scaled) width + gap the image
           slider still needs beside it and let this overflow past both
           edges of the row. Same formula as the collapsed max-width
           above, just against the item's full 100vw instead of the
           content box's collapsed 1100px cap. */
        max-width: calc(
          100vw - 2 * clamp(24px, 7vw, 112px) - 1rem - 480px * var(--slider-scale, 1)
        );
        /* fills the full available stage height (.solutions-body-content
           is height:100%, itself 100% of .solutions-body-item, which
           layoutScrollX already caps at the viewport's height) instead
           of only being as tall as its own content — script.js then
           caps .solutions-body-more specifically to whatever's left
           after resume/link, scrolling if content still overflows.
           Pulled up by --heading-height (set in layoutScrollX) and
           grown by the same amount, so it reaches all the way to the
           top of .solutions-scrollingX-sticky and overlays the heading
           instead of stopping at the stage's own (smaller) top edge —
           .solutions-scrollingX-stage's later DOM position already
           means this naturally paints over the heading, no z-index
           juggling needed. */
        height: calc(100% + var(--heading-height, 0px));
        margin-top: calc(-1 * var(--heading-height, 0px));

        &::before {
          background-color: rgba(255,255,255,0.8);
          box-shadow: 0 0 50px 50px rgba(255,255,255,0.8);
        }
  }
}

.solutions-image-slider-wrap {
  /* --slider-scale is set by layoutScrollX (script.js) to whatever
     ratio makes the slider's natural ~660px height fit the stage's
     actual (viewport-capped) height — driving the real flex-basis here
     instead of a transform:scale() means the reserved column width
     shrinks for real, so .solutions-body-resume (below) can reflow into
     the freed-up space instead of leaving it empty. */
  flex: 0 0 calc(480px * var(--slider-scale, 1));
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* .solutions-body-content centers its row (align-items:center) — as
     the wrap shrinks with --slider-scale its own height shrinks too,
     which would otherwise leave it floating mid-row with growing gaps
     above and below. Pin it to the row's bottom edge instead so it
     always sits flush against the content's base regardless of scale. */
  align-self: flex-end;

  @media (max-width: 880px) {
    max-width: 300px;
  }
}

@media (max-width: 580px) {
  .solutions-body-content {
    flex-direction: column;
    margin-top: 120px;
  }
}

/* fixed at the collapsed-row width always, expanded or not — so the
   always-visible text (h3/p) never reflows when .solutions-body-p
   widens on expand; only the newly revealed .solutions-body-more
   content gets to use that extra width */
.solutions-body-resume {
  width: calc(
    1100px - 2 * clamp(24px, 7vw, 112px) - 1rem - 480px * var(--slider-scale, 1)
  );
  max-width: 100%;
  /* never shrunk by .solutions-body-p's flex layout — only
     .solutions-body-more should ever give up space (via its own
     JS-driven max-height + scroll), not this always-visible text */
  flex-shrink: 0;
}

@media (max-width: 880px) {
  .solutions-body-resume {
    width: 100%;

    .solution-index{
      font-size: 4rem;
    }

    p{
      font-size: 0.9rem;
      line-height: 1.4;
    }
  }
}

.solutions-image-slider-roots {
  position: relative;
  z-index: 2;
  width: calc(220px * var(--slider-scale, 1));
  /* fixed instead of height:auto so the box has a known size before
     the svg finishes loading — layoutScrollX (script.js) measures
     content height on load, and an unknown/zero height here at that
     point under-sizes the slide stage and clips the roots' tips */
  aspect-ratio: 400 / 550;
  /* 40% of the roots' own height buried into the circle above, so
     they read as emerging from inside it instead of just touching
     its edge — 302.5px height (220 * 550/400) * 0.4, scaled the same
     as the width above so the overlap stays proportional */
  margin-top: calc(-121px * var(--slider-scale, 1));
  pointer-events: none;
}

.solutions-image-slider {
  position: relative;
  z-index: 1;
  width: 100%;
  /* being a square (aspect-ratio 1/1) sized off `width`, an unbounded
     width on wide screens would also blow up the height, growing the
     whole row/stage past its intended bounds — cap the diameter.
     Scaled by the same --slider-scale as everything else here so the
     circle shrinks together with its reserved column width instead of
     just being visually transform:scale()'d inside unused space. */
  max-width: calc(480px * var(--slider-scale, 1));
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 10px solid #ef5454;
  overflow: hidden;
  background: #ececec;
  box-sizing: border-box;
}

.solutions-image-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}

.solutions-image-slider img.is-active {
  opacity: 1;
}

.solutions-scrollingX-dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  background-color: white;
    padding: 10px;
    border-radius: 99px;
    border: 1px solid gray;
}

.solutions-scrollingX-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 99px;
  background: var(--ink);
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 250ms ease, transform 250ms ease;
}

.solutions-scrollingX-dot:hover {
  opacity: 0.6;
}

.solutions-scrollingX-dot.is-active {
  opacity: 1;
   width: 30px;
}

.solutions-accordion {
  border-top: 1px solid rgba(27, 28, 31, 0.2);
}

.solution-accordion-item {
  position: relative;
  border-bottom: 1px solid rgba(27, 28, 31, 0.2);
  background: #fff;
  transition: background-color 420ms ease;
}

.solution-accordion-item::before {
  width: 3px;
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  content: "";
  background: #ef5655;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.solution-accordion-item:not(.is-open):hover::before {
  transform: scaleY(0.24);
}

.solution-accordion-item.is-open {
  background: #fff5f5;
}

.solution-accordion-item--media.is-open {
  background: #fff;
}

.solution-accordion-item.is-open::before {
  transform: scaleY(1);
}

.solution-accordion-item > h3 {
  margin: 0;
}

.solution-trigger {
  width: 100%;
  padding: clamp(30px, 3.6vw, 54px) clamp(18px, 2.4vw, 38px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(18px, 2.2vw, 34px);
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: clamp(27px, 2.65vw, 44px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-align: left;
  cursor: pointer;
}

.solution-index {
  align-self: start;
  padding-top: 0.3em;
  color: #73746f;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  opacity: 0.5;
}

.solution-title {
  color: var(--ink);
  transition:
    color 260ms ease,
    opacity 260ms ease,
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.solution-trigger:hover .solution-title,
.solution-trigger:focus-visible .solution-title {
  color: var(--coral);
  opacity: 1;
  transform: translate3d(4px, 0, 0);
}

.solution-accordion-item.is-open .solution-title {
  opacity: 1;
  transform: translate3d(8px, 0, 0);
}

.solution-trigger:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.solution-arrow {
  width: 28px;
  height: 28px;
  position: relative;
  flex: 0 0 auto;
  color: var(--ink);
}

.solution-arrow::before,
.solution-arrow::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  border-radius: 999px;
  background: currentColor;
  transform: translate3d(-50%, -50%, 0);
}

.solution-arrow::before {
  width: 25px;
  height: 4px;
}

.solution-arrow::after {
  width: 4px;
  height: 25px;
  transition:
    opacity 240ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.solution-accordion-item:not(.is-open) .solution-trigger:hover .solution-arrow,
.solution-accordion-item:not(.is-open) .solution-trigger:focus-visible .solution-arrow {
  animation: solutionPlusSpin 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.solution-accordion-item.is-open .solution-arrow::after {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scaleY(0);
}

@keyframes solutionPlusSpin {
  to {
    transform: rotate(360deg);
  }
}

.solution-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.solution-accordion-item.is-open .solution-panel {
  grid-template-rows: 1fr;
}

.solution-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.solution-panel-content {
  padding: 0 clamp(18px, 2.4vw, 38px) clamp(48px, 6vw, 84px);
  opacity: 0;
  transform: translate3d(0, -14px, 0);
  transition:
    opacity 260ms ease,
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.solution-accordion-item.is-open .solution-panel-content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 100ms;
}

.solution-panel-content--bento {
  padding-top: clamp(12px, 1.4vw, 22px);
}

.solution-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  gap: clamp(42px, 6vw, 96px);
  align-items: stretch;
}

.solution-bento-visuals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-rows: repeat(2, minmax(190px, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
  min-height: clamp(460px, 42vw, 650px);
}

.solution-bento-visual {
  min-width: 0;
  overflow: hidden;
  border-radius: clamp(14px, 1.5vw, 24px);
  background-color: #090a0b;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.solution-bento-copy {
  display: grid;
  align-content: center;
  gap: clamp(34px, 5vw, 72px);
  min-width: 0;
}

.solution-bento-copy p {
  margin: 0;
  color: var(--ink);
  font-size: var(--section-supporting-text-size);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
}

.solution-bento-visual--one {
  grid-area: 1 / 1 / 2 / 2;
  background-image: url("img/1a.png");
}

.solution-bento-visual--two {
  grid-area: 2 / 1 / 3 / 2;
  background-image: url("img/1b.png");
}

.solution-bento-visual--three {
  grid-area: 1 / 2 / 3 / 3;
  background-image: url("img/1c.png");
}

.solution-lead {
  max-width: 920px;
  margin: 0 0 clamp(40px, 5vw, 70px);
  color: var(--ink);
  font-size: var(--section-supporting-text-size);
  line-height: 1.55;
  letter-spacing: normal;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 340ms ease,
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.solution-details-grid {
  padding-left: clamp(0px, 5vw, 80px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 62px) clamp(50px, 8vw, 130px);
}

.solution-details-grid article {
  padding-top: 20px;
  border-top: 1px solid rgba(27, 28, 31, 0.18);
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 340ms ease,
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.solution-accordion-item.is-open .solution-lead,
.solution-accordion-item.is-open .solution-details-grid article {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.solution-accordion-item.is-open .solution-lead {
  transition-delay: 160ms;
}

.solution-accordion-item.is-open .solution-details-grid article:nth-child(1) {
  transition-delay: 220ms;
}

.solution-accordion-item.is-open .solution-details-grid article:nth-child(2) {
  transition-delay: 270ms;
}

.solution-accordion-item.is-open .solution-details-grid article:nth-child(3) {
  transition-delay: 320ms;
}

.solution-accordion-item.is-open .solution-details-grid article:nth-child(4) {
  transition-delay: 370ms;
}

.solution-accordion-item.is-open .solution-details-grid article:nth-child(5) {
  transition-delay: 420ms;
}

.solution-details-grid h4 {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.solution-details-grid p {
  margin: 14px 0 0;
  color: #555652;
  font-size: clamp(15px, 1.08vw, 18px);
  line-height: 1.55;
}

.testimonials-section {
  border-color: transparent;
  background: #fff;
  color: var(--ink);
  //overflow: hidden;
  transition:
    background-color 3000ms cubic-bezier(0.22, 1, 0.36, 1),
    color 620ms ease,
    border-color 3000ms ease;
}

.testimonials-section .section-inner {
  position: relative;
}

/* content sits above the cloud background layer (z-index:0 below) */
.testimonials-section .testimonial-heading {
  position: relative;
  z-index: 1;

  .testimonial-target{
    color:#EF5454;
  }
}

.testimonials-bg-clouds {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.testimonials-bg-cloud {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  aspect-ratio: 1000 / 790;
  pointer-events: none;
}

.testimonials-bg-cloud svg {
  display: block;
  width: 100%;
  height: 100%;
}

.testimonials-section .section-intro {
  color: #4e4f4c;
  transition: color 620ms ease;
}

body.testimonials-viewport.light .solutions-section,
body.testimonials-viewport.light .testimonials-section {
  border-color: transparent;
  background: #e6f2fd;
  color: var(--ink);
}

.solutions-section2 {
  border-color: transparent;
  background: var(--section-bg);
  color: var(--ink);
}

body.testimonials-viewport.light .testimonials-section .section-intro {
  color: #4e4f4c;
}

body.contact-viewport.light .testimonials-section,
body.contact-viewport.light .contact-section {
  border-color: transparent;
  background: var(--section-bg);
  color: var(--ink);
}

.testimonial-heading {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.testimonial-heading .section-intro {
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
}

.testimonials-bubbles {
  position: relative;
  z-index: 2;
}

.testimonial-bubble {
  --testimonial-delay: 0ms;
}

.testimonial-bubble:nth-child(2) {
  --testimonial-delay: 320ms;
}

.testimonial-bubble:nth-child(3) {
  --testimonial-delay: 640ms;
}

.testimonials-section.testimonial-reveal-ready .testimonial-bubble {
  opacity: 0;
}

.testimonials-section.testimonial-reveal-ready .testimonial-bubble {
  backface-visibility: hidden;
  transform-origin: 50% 55%;
  will-change: transform, opacity;
}

.testimonials-section.testimonial-reveal-ready.testimonials-are-visible .testimonial-bubble {
  animation: testimonialBubbleFloatIn 1200ms cubic-bezier(0.22, 1, 0.36, 1)
    var(--testimonial-delay) both;
}

@keyframes testimonialBubbleFloatIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.96);
  }

  60% {
    opacity: 1;
  }

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

.testimonial-bubble {
  width: clamp(220px, 19vw, 390px);
  padding: clamp(20px, 2vw, 28px);
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 50px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(27, 28, 31, 0.06);
}

.testimonial-bubble::after {
  width: 0;
  height: 0;
  position: absolute;
  bottom: -20px;
  left: 42px;
  content: "";
  border-top: 21px solid #fff;
  border-right: 22px solid transparent;
}

.testimonial-bubble blockquote {
  position: relative;
  --quote-tail-total-height: 170px;
  --quote-tail-lines-height: 58px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(14px, 1vw, 20px);
  font-style: italic;
  line-height: 1.48;
  letter-spacing: -0.012em;

  font-family: "Besley", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* Opening quote mark, at the actual start of the text. It doesn't need
   any wrap-around behavior (it's already at the natural start of the
   flow), so it's just a small inline image - reusing quote.svg, flipped
   so it reads as an opening mark rather than a second closing one. */
.testimonial-bubble blockquote::before {
  content: url("img/quote.svg");
  display: inline-block;
  width: 32px;
  height: 21.8px;
  margin: 0 6px -4px 0;
  transform: rotate(180deg);
  opacity: 0.15;
}

/* Invisible shape-carrier: a real element (not ::before, which is now
   the visible opening mark above) floated right, spanning the full
   blockquote height, with a shape-outside cut as a sharp rectangular
   step (not a diagonal taper) so only the last ~2 lines of text narrow
   - leaving room there for the closing mark (::after below). A
   margin-top push-down was tried instead of this but doesn't work:
   floats keep occupying wrap space from the top of their box's
   hypothetical position regardless of margin. Kept separate from the
   visible glyph because sizing it precisely enough to also anchor the
   glyph creates a feedback loop with the text wrap it's trying to
   measure. Inserted as the blockquote's first child by script.js. */
.testimonial-bubble blockquote .quote-tail-shape {
  float: right;
  width: 56px;
  height: var(--quote-tail-total-height);
  margin-left: 8px;
  /* The +6px nudges the step a few px later (shorter exclusion zone)
     so sub-pixel rounding never lets it bleed into the line above: a
     CSS line box uses a single width for its whole height, so even a
     razor-thin overlap at a line's bottom edge forces that entire line
     to narrow. */
  shape-outside: polygon(
    100% 0%,
    100% calc(100% - var(--quote-tail-lines-height) + 6px),
    0% calc(100% - var(--quote-tail-lines-height) + 6px),
    0% 100%,
    100% 100%
  );
}

/* JS measures the blockquote's natural (unwrapped) line count before
   sizing the shape above, so the taper only ever spans the last 2 real
   lines regardless of testimonial length or card width. This class
   disables the shape for that measurement pass. */
.testimonial-bubble blockquote.quote-tail-measuring .quote-tail-shape {
  display: none;
}

.testimonial-bubble blockquote::after {
  content: url("img/quote.svg");
  position: absolute;
  right: 0;
  top: var(--quote-tail-glyph-top, 0px);
  width: 60px;
  height: 40.8px;
  opacity: 0.15;
}

.testimonial-person,
.testimonial-person strong,
.testimonial-person span {
  display: block;
}

.testimonial-person strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.testimonial-person span {
  margin-top: 4px;
  color: #686965;
  font-size: 13px;
}

.about-section {
  background: var(--paper-light);
}

.about-page .about-section {
  min-height: 100svh;
  display: flex;
  align-items: center;
  border-top: 0;
  background: #fff;
}

.about-page .about-section .section-inner {
  padding-top: clamp(170px, 15vw, 240px);
  padding-bottom: clamp(110px, 10vw, 170px);
}

.about-page .about-section .eyebrow {
  margin: 0 0 24px;
  color: var(--coral);
}

.about-page .about-section h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(52px, 7vw, 112px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.about-page .long-copy h2 {
  margin: 0 0 34px;
  font-size: clamp(25px, 2.35vw, 38px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.legal-page {
  min-height: 100svh;
  background: #fff;
}

.legal-section {
  border-top: 0;
  background: #fff;
}

.legal-section .section-inner {
  width: min(100%, 1280px);
  padding-top: clamp(170px, 15vw, 240px);
  padding-bottom: clamp(100px, 10vw, 160px);
}

.legal-heading {
  max-width: 960px;
  margin-bottom: clamp(72px, 9vw, 130px);
}

.legal-heading .eyebrow {
  margin: 0 0 24px;
  color: var(--coral);
}

.legal-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(52px, 7vw, 108px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.legal-content {
  max-width: 900px;
  margin-left: auto;
}

.legal-item {
  padding: clamp(28px, 3.2vw, 46px) 0;
  border-top: 1px solid rgba(27, 28, 31, 0.16);
}

.legal-item:last-child {
  border-bottom: 1px solid rgba(27, 28, 31, 0.16);
}

.legal-item h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: clamp(24px, 2.2vw, 36px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.legal-item p {
  max-width: 780px;
  margin: 0;
  color: #4e4f4c;
  font-size: var(--section-supporting-text-size);
  line-height: 1.58;
}

.legal-item a {
  color: var(--coral);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.72fr);
  gap: clamp(60px, 10vw, 180px);
  align-items: start;
}

.contact-copy > p:not(.eyebrow) {
  max-width: 680px;
  margin: 30px 0 0;
  color: #4e4f4c;
  font-size: var(--section-supporting-text-size);
}

.contact-form {
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid #2e3034;
  border-radius: 24px;
  background: #17181b;
  color: #fff;
}

.contact-form h3 {
  margin-bottom: 44px;
}

.contact-form label {
  margin-top: 25px;
  display: block;
  color: #b8b8b5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-top: 10px;
  padding: 11px 0;
  display: block;
  border: 0;
  border-bottom: 1px solid #444549;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: clamp(17px, 1.15vw, 19px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  resize: vertical;
}

.contact-form textarea {
  min-height: 150px;
}

.message-counter {
  margin-top: 9px;
  display: block;
  color: #8f908c;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: right;
  text-transform: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--coral);
}


.form-status {
  min-height: 1.5em;
  margin: 18px 0 0;
  color: #b8b8b5;
  font-size: 13px;
}

.site-footer {
  width: 100%;
  margin: 0;
  padding: clamp(58px, 5vw, 82px) clamp(24px, 7vw, 112px)
    clamp(34px, 3.5vw, 52px);
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: #050506;
  color: #f2f0e9;
}

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

.footer-logo {
  width: clamp(100px, 14vw, 220px);
  height: auto;
  display: block;
  margin-bottom: 14px;
}

.site-footer p,
.site-footer a,
.site-footer span {
  margin: 0;
  color: #989894;
  font-size: 13px;
  line-height: 1.55;
}

.site-footer a {
  color: #f2f0e9;
}

.footer-brand p {
  max-width: 620px;
  margin-top: 8px;
}

.footer-contact {
  justify-self: end;
  text-align: right;
}

.footer-contact a {
  display: inline-block;
  font-size: clamp(17px, 1.55vw, 24px);
  font-weight: 700;
}

.footer-contact p {
  margin-top: 16px;
}

.footer-divider {
  width: 100%;
  height: 1px;
  margin: 1rem;
  background: rgba(255, 255, 255, 0.16);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.footer-bottom p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.site-footer .footer-legal-link {
  color: #c4c4bf;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 220ms ease;
}

.site-footer .footer-legal-link:hover,
.site-footer .footer-legal-link:focus-visible {
  color: var(--coral);
  outline: none;
}

.site-footer .footer-social {
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 9px;
  color: #e4e4df;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition:
    background-color 260ms ease,
    border-color 260ms ease,
    color 260ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 520ms ease;
}

.site-footer .footer-social::before {
  content: "in";
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #000000;
  color: #fff;
  font-family: "Lexend Deca", sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  border: 1px solid gray;
}

.site-footer.footer-reveal-ready .footer-brand,
.site-footer.footer-reveal-ready .footer-contact,
.site-footer.footer-reveal-ready .footer-bottom {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 1200ms ease,
    transform 1500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-footer.footer-reveal-ready .footer-contact {
  transition-delay: 280ms;
}

.site-footer.footer-reveal-ready .footer-bottom {
  transition-delay: 780ms;
}

.site-footer.footer-reveal-ready .footer-divider {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1800ms cubic-bezier(0.22, 1, 0.36, 1) 480ms;
}

.site-footer.footer-reveal-ready .footer-social {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.94);
}

.site-footer.footer-reveal-ready.is-visible .footer-brand,
.site-footer.footer-reveal-ready.is-visible .footer-contact,
.site-footer.footer-reveal-ready.is-visible .footer-bottom {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.site-footer.footer-reveal-ready.is-visible .footer-divider {
  transform: scaleX(1);
}

.site-footer.footer-reveal-ready.is-visible .footer-social {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.site-footer .footer-social:hover,
.site-footer .footer-social:focus-visible,
.site-footer.footer-reveal-ready.is-visible .footer-social:hover,
.site-footer.footer-reveal-ready.is-visible .footer-social:focus-visible {
  border-color: #0a66c2;
  background: #0a66c2;
  color: #fff;
  outline: none;
  transform: translate3d(3px, 0, 0) scale(1.02);
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .header-menu-toggle,
  .header-menu-toggle-icon span,
  .header-menu-scrim,
  .header-menu-panel,
  .header-menu-links a,
  .header-menu-links a::after {
    transition-duration: 0.01ms;
  }

  .testimonials-section.testimonial-reveal-ready .testimonial-bubble {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .site-footer.footer-reveal-ready .footer-brand,
  .site-footer.footer-reveal-ready .footer-contact,
  .site-footer.footer-reveal-ready .footer-bottom,
  .site-footer.footer-reveal-ready .footer-social {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-footer.footer-reveal-ready .footer-divider {
    transform: scaleX(1);
    transition: none;
  }
}

@media (max-width: 1180px) {
  .reel-layout {
    grid-template-columns: minmax(280px, 0.7fr) minmax(420px, 1.3fr);
  }

  .testimonials-bubbles {
    position: static;
    max-width: none;
    margin: clamp(32px, 6vw, 56px) auto 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .testimonial-bubble,
  .testimonial-bubble:nth-child(1),
  .testimonial-bubble:nth-child(2),
  .testimonial-bubble:nth-child(3) {
    position: static;
    width: 100%;
    margin-top: 0;
  }
}

@media (max-width: 880px) {
  .header-menu-panel {
    height: min(500px, 62svh);
  }

  .header-menu-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 8px;
  }

  .header-menu-links a strong {
    font-size: clamp(22px, 4vw, 30px);
  }

  .header-menu-panel-bottom {
    width: min(280px, 50vw);
  }

  .split-heading,
  .reel-layout,
  .perspective-layout,
  .about-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .section-heading {
    margin-bottom: 0px;
  }

  .section-intro {
    max-width: 720px;
  }

  



  .project-visual {
    min-height: 0;
  }

  .long-copy {
    max-width: 720px;
    padding-top: 0;
  }

  .reel-layout {
    min-height: 0;
  }

  .media-placeholder {
    min-height: min(62vw, 520px);
  }


  .footer-contact {
    justify-self: start;
    text-align: left;
  }

  .impact-journey {
    height: auto;
    margin-top: 76px;
  }

  .impact-sticky {
    height: auto;
    position: relative;
    top: auto;
    overflow: visible;
  }

  .impact-canvas,
  .impact-scroll-cue {
    display: none;
  }

  .impact-milestones {
    position: relative;
    inset: auto;
    display: grid;
  }

  .impact-milestone {
    width: auto;
    height: auto;
    min-height: 190px;
    padding: 0 0 50px 46px;
    position: relative;
    top: auto;
    left: auto;
    opacity: 1;
    transform: none !important;
  }

  .impact-milestone:not(:last-child)::after {
    width: 2px;
    position: absolute;
    top: 13px;
    bottom: 0;
    left: 6px;
    content: "";
    background: linear-gradient(var(--coral), rgba(239, 86, 85, 0.16));
  }

  .impact-marker {
    top: 0;
    left: 0;
  }

  .impact-copy,
  .impact-milestone-final .impact-copy {
    width: min(100%, 560px);
    padding: 0;
    position: static;
    text-align: left;
  }

  .impact-copy::after {
    display: none;
  }

  .impact-copy p {
    max-width: 520px;
    font-size: 16px;
  }

  .solution-trigger {
    padding: 30px 18px;
    gap: 16px;
    font-size: clamp(25px, 6.7vw, 36px);
  }

  .solution-lead {
    font-size: var(--section-supporting-text-size);
  }

  .solution-details-grid {
    padding-left: 0;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .solution-panel-content {
    padding-right: 18px;
    padding-left: 18px;
  }

  .solution-bento {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .solution-bento-visuals {
    min-height: clamp(420px, 88vw, 620px);
  }
}

@media (max-width: 560px) {
  .solution-bento-copy {
    gap: 24px;
  }

  .solution-bento-visuals {
    grid-template-rows: repeat(2, minmax(145px, 1fr));
    gap: 10px;
    min-height: 360px;
  }
}

@media (max-width: 719px) {
  .site-header {
    padding: 20px;
  }

  .brand {
    width: 122px;
  }

  .header-menu-toggle {
    min-width: 102px;
    padding: 11px 14px 11px 17px;
  }

  .header-menu-panel {
    width: 100%;
    height: min(590px, 76svh);
    max-height: calc(100svh - 24px);
    padding: 16px 20px 18px;
    top: 0;
    right: 0;
    overflow-y: auto;
    border-radius: 0;
    clip-path: inset(0 0 100% 0);
  }

  .site-header.is-menu-open .header-menu-panel {
    clip-path: inset(0 0 0 0);
  }

  .header-menu-panel-top {
    min-height: 64px;
  }

  .header-menu-panel-top p,
  .header-menu-panel-top > span {
    display: none;
  }

  .header-menu-isotype {
    width: 64px;
    left: 0;
    transform: translate3d(0, -50%, 0);
  }

  .header-menu-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 4px;
  }

  .header-menu-links a {
    padding: 12px 0 11px;
  }

  .header-menu-links a strong {
    white-space: normal;
    font-size: clamp(22px, 6.4vw, 29px);
  }

  .header-menu-links a::after {
    display: none;
  }

  .header-menu-panel-bottom {
    width: min(260px, 80vw);
  }

  .intro {
    padding: 110px 22px 36px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .intro-copy {
    width: auto;
    left: 22px;
    right: 22px;
    bottom: 102px;
  }

  .intro h1 {
    font-size: clamp(42px, 10.8vw, 60px);
  }

  .intro-text {
    margin-top: 26px;
  }

  .scroll-cue {
    width: auto;
    right: auto;
    left: 22px;
    bottom: 36px;
    margin-top: 0;
    flex-direction: row;
  }

  .scroll-line {
    width: 210px;
    height: 1px;
  }

  .scroll-line::after {
    inset: 0 0 0 -100%;
    animation-name: scrollLineMobile;
  }

  .scale-story {
    height: 300svh;
    --wide-card-height: min(27vh, 230px);
  }

  .column-left {
    padding-top: 70px;
  }

  .column-right {
    padding-top: 105px;
  }

  .gallery-card {
    border-radius: 14px;
  }

  .card-tall {
    height: min(49vh, 420px);
  }

  .card-deep {
    height: min(58vh, 490px);
  }

  .progress-rail {
    right: 19px;
    bottom: 19px;
    height: 90px;
  }

  .section-inner {
    padding: 86px 22px;
  }

  .site-footer {
    padding: 54px 22px 32px;
  }

  .outro h2 {
    font-size: clamp(41px, 12vw, 50px);
  }

  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .clients-grid-text {
    grid-column: span 3;
    grid-row: span 2;
  }

  .media-placeholder {
    min-height: 310px;
    padding: 20px;
  }

  .project-card,
  .testimonial-bubble,
  .contact-form {
    border-radius: 18px;
  }

  .project-copy,
  .contact-form {
    padding: 26px;
  }

  .project-visual {
    min-height: 0;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

  .footer-bottom-links {
    width: 100%;
    justify-content: space-between;
    gap: 14px;
  }

  .legal-section .section-inner {
    padding-top: 150px;
  }

  .legal-heading {
    margin-bottom: 56px;
  }

}

@keyframes scrollLineMobile {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(200%);
  }
}

.cursor-reactive-title {
  --title-cursor-x: -1000px;
  --title-cursor-y: -1000px;
  --title-base-color: #f2f0e9;
  color: transparent;
  background-image: radial-gradient(
    circle 44px at var(--title-cursor-x) var(--title-cursor-y),
    #ef5655 0 97%,
    var(--title-base-color) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: --title-base-color 620ms ease;
}

h1.cursor-reactive-title,
h2.cursor-reactive-title {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.outro .cursor-reactive-title {
  --title-base-color: #1b1c1f;
}

.outro .clients-section:not(.is-light-theme) .cursor-reactive-title {
  --title-base-color: #f2f0e9;
}

.outro .clients-section.is-light-theme .cursor-reactive-title {
  --title-base-color: #1b1c1f;
}

.contact-section .cursor-reactive-title {
  --title-base-color: #1b1c1f;
}

body.reel-viewport.dark .reel-section .cursor-reactive-title {
  --title-base-color: #f2f0e9;
}

.projects-section .cursor-reactive-title {
  --title-base-color: #f2f0e9;
}

body.projects-viewport.light .reel-section .cursor-reactive-title,
body.projects-viewport.light .projects-section .cursor-reactive-title {
  --title-base-color: #1b1c1f;
}

.testimonials-section .cursor-reactive-title {
  --title-base-color: #1b1c1f;
}

body.testimonials-viewport.light .testimonials-section .cursor-reactive-title {
  --title-base-color: #1b1c1f;
}

@media (max-height: 980px) and (min-width: 881px) {
  .perspective-sticky {
    min-height: 650px;
    padding-top: 18px;
    padding-bottom: 18px;
    grid-template-rows: auto auto minmax(205px, 1fr) auto;
  }

  .perspective-timeline {
    margin-top: 12px;
  }

  .perspective-canvas-zone {
    min-height: 205px;
  }

  .perspective-copy {
    padding-top: 10px;
  }

  .perspective-copy > p {
    font-size: clamp(15px, 1.12vw, 18px);
    line-height: 1.4;
  }
}

@media (max-width: 880px) {
  .perspective-story {
    height: auto;
  }

  .perspective-sticky {
    height: auto;
    min-height: 0;
    padding: 86px 22px;
    position: relative;
    display: block;
    overflow: visible;
  }



  .perspective-timeline {
    display: none;
  }

  .perspective-canvas-zone {
    display: none;
  }

  .perspective-copy-grid {
    width: 100%;
    min-height: 0;
    margin-top: 58px;
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .perspective-copy {
    position: relative;
    inset: auto;
    padding-top: 18px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .perspective-copy::before {
    width: 72px;
  }

  .perspective-copy > p {
    max-width: 100%;
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 1.42;
    text-align: center;
  }

  .perspective-mobile-visual {
    position: relative;
    min-height: clamp(230px, 62vw, 310px);
    margin: 0 0 28px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
    border: 1px solid #e2d8d3;
    border-radius: 24px;
    background: rgba(255, 253, 249, 0.78);
    box-shadow: 0 18px 50px rgba(82, 57, 50, 0.1);
  }

  .perspective-mobile-visual span {
    padding: 20px 14px;
    border: 1px solid #d8cfca;
    border-radius: 14px;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
  }

  .mobile-integration-visual {
    border: 8px solid rgba(239, 86, 85, 0.7);
    gap: 5px;
  }

  .mobile-integration-visual span {
    flex: 1;
    padding-right: 7px;
    padding-left: 7px;
  }

  .mobile-integration-visual span:nth-child(2) {
    background: var(--coral);
    color: #fff;
  }

  .mobile-result-visual {
    flex-direction: column;
    background: #171719;
    color: #fff;
  }

  .mobile-result-visual span {
    border: 0;
    background: transparent;
    color: #fff;
  }

  .mobile-result-visual b {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid var(--coral);
    border-radius: 50%;
  }

  .perspective-mobile-canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: none;
  }

  .perspective-section.has-mobile-three .perspective-mobile-canvas {
    display: block;
  }

  .perspective-section.has-mobile-three .perspective-mobile-visual > span,
  .perspective-section.has-mobile-three .perspective-mobile-visual > b {
    display: none;
  }
}

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

  .scroll-line::after {
    animation: none;
  }

  .perspective-timeline-indicator {
    animation: none;
    transition: none;
  }

  .clients-section,
  .clients-section .section-intro,
  .reel-section,
  .projects-section,
  .projects-section .eyebrow,
  .reel-copy > p:not(.eyebrow),
  .cursor-reactive-title,
  .scale-story,
  .stage,
  .impact-sticky,
  .impact-step,
  .impact-copy strong,
  .impact-copy p,
  .impact-copy::after,
  .progress-rail,
  .progress-rail span {
    transition: none;
  }

  .impact-journey {
    height: 100svh;
  }

  .impact-sticky {
    position: relative;
  }

  .impact-milestone,
  .impact-scroll-cue {
    transition: none;
  }

  .solution-accordion-item,
  .solution-accordion-item::before,
  .solution-title,
  .solution-arrow,
  .solution-arrow::after,
  .solution-panel,
  .solution-panel-content,
  .solution-lead,
  .solution-details-grid article {
    transition: none;
  }

  .solution-arrow {
    animation: none !important;
  }
}

@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
  .impact-journey {
    height: auto;
  }
}
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("assets/fonts/material-symbols-rounded.woff2") format("woff2");
}

.text-outline {
  color: black;
  text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
    font-weight: 900 !important;
    font-family: 'Lexend Deca';
}
.text-100 {
  font-weight: 100;
  font-family: 'Lexend Deca';
  color: #fff;
}
.text-900{
  font-weight: 900;
  font-family: 'Lexend Deca';
  color: #fff;
}
.text-600{
  font-weight: 600;
  font-family: 'Lexend Deca';
  color: #fff;
}
.text-cursive{
  font-style: italic;
  font-family: 'Lexend Deca';
  color: #fff;
}

/* ===== Footer scroll (3D cube-flip contact reveal) =====
   Everything below is scoped under .footer-scroll: this section reuses
   class names (.contact-form, .footer-brand, .footer-contact) that already
   have unrelated rules elsewhere (.contact-section's form, .site-footer) —
   scoping keeps this new component from bleeding into those. */
.footer-scroll {
  --progress: 0;
  --form-opacity: 0;
  min-height: 260svh;
}

.footer-scroll .footer-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #202020;
}

.footer-scroll .footer-3d {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #202020;
  transform-style: preserve-3d;
}

.footer-scroll .cube-viewport {
  position: absolute;
  z-index: 5;
  inset: 0 0 28%;
  overflow: visible;
  /* Un perspective chico exagera el efecto (foreshortening/escalado fuerte
     al girar); uno grande "aleja la cámara" y suaviza esa distorsión. El
     origin se movió cerca del tope para alinearse con la bisagra de
     idea-panel (ahora arriba, no al centro). */
  perspective: 2000px;
  perspective-origin: 50% 50%;
}

.footer-scroll .cube-rotator {
  /* Es una tapa (un plano), no un cubo de dos caras — sin translateZ extra,
     así que idea-panel queda exactamente SOBRE el eje de giro (su borde
     superior) en vez de a una distancia de él, que es lo que hacía que
     barriera un arco grande en lugar de girar limpio desde arriba. */
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: top center;
  transform: rotateX(calc(var(--progress) * 90deg));
  transform-style: preserve-3d;
  will-change: transform;
}

.footer-scroll .contact-reveal {
  /* Plano a propósito: solo .idea-panel gira en 3D (dentro de
     .cube-rotator); contact-reveal ya no es hijo de ese rotador, así que
     nunca queda con la distorsión de perspectiva de la tapa abriéndose,
     solo se revela detrás a medida que idea-panel gira lejos. */
  position: absolute;
  inset: 0;
  display: flex;
  place-items: center;
  padding: 8px 5vw;
  background: #202020;
  width: min(100%, 1600px);
  margin: auto;
  gap: 1rem;
}

.footer-scroll .contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(7px, 1svh, 11px);
  width: min(82vw, 700px);
  opacity: var(--form-opacity);
  pointer-events: none;
  transform: translateY(calc((1 - var(--form-opacity)) * 24px));
  align-self: flex-start;
}

.footer-scroll .contact-form.is-active {
  pointer-events: auto;
}

.footer-scroll .form-field {
  display: grid;
  gap: 4px;
}

.footer-scroll .form-field label {
  color: #c9c9ca;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-scroll .form-field input,
.footer-scroll .form-field textarea {
  width: 100%;
  padding: 4px 0 7px;
  border: 0;
  border-bottom: 1px solid #505055;
  border-radius: 0;
  color: #ffffff;
  background: transparent;
}

.footer-scroll .form-field textarea {
  min-height: clamp(58px, 8svh, 78px);
  resize: vertical;
}

.footer-scroll .character-count {
  justify-self: end;
  color: #8f8f93;
  font-size: 10px;
}

.footer-scroll .contact-form button {
  justify-self: start;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: #f3545b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.footer-scroll .form-field input:focus-visible,
.footer-scroll .form-field textarea:focus-visible {
  outline: none;
}

.footer-scroll .contact-form button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.footer-scroll .form-field input:focus,
.footer-scroll .form-field textarea:focus {
  border-bottom-color: #f3545b;
}

.footer-scroll .idea-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--section-bg);
  backface-visibility: hidden;
  transition: background-color 720ms cubic-bezier(0.22, 1, 0.36, 1),
    color 620ms ease,
    border-color 620ms ease;
  /* Atada a --progress: sin sombra en reposo (tapa cerrada), aparece y
     crece a medida que gira, como si proyectara sombra sobre lo que va
     revelando detrás. */
  box-shadow: 0 50px 80px -10px rgba(0, 0, 0, calc(var(--progress) * 0.6));
}

.footer-scroll .idea-content {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  /* Ancho explícito, no "shrink-to-fit": .bulb-content necesita una base de
     ancho real para que sus columnas 1fr auto 1fr se repartan el espacio
     de forma pareja — sin esto, el bulb queda centrado dentro de su propia
     caja, pero esa caja no coincide necesariamente con el centro real. */
  width: min(92vw, 1200px);
  display: grid;
  justify-items: center;
  transform: translate3d(-50%, 0, 3px);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  text-align: center;
  will-change: transform;
}

.footer-scroll .idea-content p,
.footer-scroll .idea-content h1 {
  margin: 0;
  line-height: 1;
}

.footer-scroll .idea-content .white {
  font-weight: 900;
  letter-spacing: -0.035em;
  font-size:5rem;

  @media (max-width: 970px) {
    font-size:4.5rem;
  }

  @media (max-width: 880px) {
    font-size:3.5rem;
  }
  @media (max-width: 720px) {
    font-size:2.5rem;
  }
  @media (max-width: 550px) {
    font-size:0;
  }
}

.footer-scroll .idea-content h1 {
  margin-top: 10px;
  font-size: clamp(40px, 4.5vw, 78px);
}

@media (max-width: 550px) {
  .footer-scroll .idea-content h2 {
    font-size:2rem;
  }
}

.footer-scroll .bulb-content {
  /* Grid en vez de flex: con 1fr auto 1fr, la columna central (el bulb)
     queda SIEMPRE al centro exacto, sin importar cuánto texto haya a cada
     lado — con flex, el grupo entero se centra como bloque, así que el
     bulb se corre si los dos textos no miden lo mismo. */
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
}

.footer-scroll .bulb-content h2:first-child {
  text-align: right;
}

.footer-scroll .bulb-content h2:last-child {
  text-align: left;
}

.footer-scroll .bulb {
  position: relative;
  width: 440px;
    height: auto;
    margin-bottom: 20px;
    margin-top: -100px;
    margin-left: -80px;
    margin-right: -80px;

  @media (max-width: 880px) {
    width: 400px;
    margin-left: -100px;
    margin-right: -100px;
  }

  @media (max-width: 720px) {
    width: 350px;
    margin-left: -80px;
    margin-right: -80px;
    margin-bottom: 10px;
  }
}

.footer-scroll .bulb-glass {
  position: absolute;
  top: 27px;
  left: 44px;
  width: 90px;
  height: 90px;
  border: 3px solid #ffffff;
  border-radius: 50%;
}

.footer-scroll .bulb-neck {
  position: absolute;
  top: 94px;
  left: 69px;
  width: 40px;
  height: 42px;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  background: #f23f52;
}

.footer-scroll .bulb-filament {
  position: absolute;
  z-index: 2;
  top: 77px;
  left: 88px;
  width: 3px;
  height: 58px;
  background: #ffffff;
}

.footer-scroll .bulb-filament::before,
.footer-scroll .bulb-filament::after {
  position: absolute;
  top: -9px;
  width: 30px;
  height: 3px;
  background: #ffffff;
  content: "";
}

.footer-scroll .bulb-filament::before {
  right: -4px;
  transform: rotate(45deg);
  transform-origin: right;
}

.footer-scroll .bulb-filament::after {
  left: -4px;
  transform: rotate(-45deg);
  transform-origin: left;
}

.footer-scroll .bulb-base {
  position: absolute;
  left: 61px;
  width: 56px;
  height: 3px;
  background: #ffffff;
}

.footer-scroll .bulb-base-one {
  top: 143px;
}

.footer-scroll .bulb-base-two {
  top: 154px;
}

.footer-scroll .ray {
  position: absolute;
  width: 34px;
  height: 3px;
  background: #ffd85a;
  transform-origin: center;
}

.footer-scroll .ray-top {
  top: 2px;
  left: 72px;
  transform: rotate(90deg);
}

.footer-scroll .ray-top-left {
  top: 24px;
  left: 23px;
  transform: rotate(55deg);
}

.footer-scroll .ray-left {
  top: 72px;
  left: 1px;
}

.footer-scroll .ray-bottom-left {
  top: 122px;
  left: 22px;
  transform: rotate(-40deg);
}

.footer-scroll .ray-top-right {
  top: 24px;
  right: 23px;
  transform: rotate(-55deg);
}

.footer-scroll .ray-right {
  top: 72px;
  right: 1px;
}

.footer-scroll .ray-bottom-right {
  top: 122px;
  right: 22px;
  transform: rotate(40deg);
}

.footer-scroll .divider {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #ffffff;
  transform: translateZ(7px);
}

.footer-scroll .pull-tab {
  position: absolute;
  z-index: 4;
  top: -1px;
  left: 50%;
  width: 75px;
  height: 37px;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  border-radius: 0 0 50px 50px;
  background: var(--section-bg);
  box-shadow: 0 4px 5px rgb(0 0 0 / 18%);
  transform: translate3d(-50%, 0, 4px);
}

.footer-scroll .pull-tab::before {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  transform: translateX(-50%);
  content: "";
}

.footer-scroll .footer-information {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 28%;
  padding: 26px 3vw 22px;
  color: rgb(255 255 255 / 78%);
  font-size: clamp(10px, 0.85vw, 14px);
  line-height: 1.45;
}

.footer-scroll .footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
  align-items: center;
  gap: 7vw;
}

.footer-scroll .brand-logo {
  display: block;
  width: clamp(110px, 13vw, 190px);
  height: auto;
  margin-bottom: 14px;
  object-fit: contain;
  object-position: left center;
}

.footer-scroll .footer-brand p {
  margin: 0 0 6px;
}

.footer-scroll .footer-contact {
  text-align: right;
}

.footer-scroll .footer-contact strong {
  color: #f5f5f7;
  font-size: clamp(15px, 1.4vw, 22px);
}

.footer-scroll .footer-contact address {
  margin-top: 12px;
  font-style: normal;
}

.footer-scroll .footer-lower {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 42%);
  font-size: clamp(9px, 0.72vw, 12px);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.footer-scroll .footer-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  color: rgb(255 255 255 / 82%);
}

.footer-scroll .linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px 7px 7px;
  border: 1px solid rgb(255 255 255 / 48%);
  border-radius: 7px;
  color: #ffffff;
}

.footer-scroll .linkedin-icon {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 3px;
  color: #ffffff;
  background: #0a66c2;
  font-size: 13px;
  letter-spacing: 0;
}

.contact-reveal .white{
  @media (max-width: 720px) {
    font-size: 2rem;
  }
}

@media (max-width: 720px) {
  .footer-scroll .idea-content {
    bottom: 14px;
  }

  .footer-scroll .idea-content p {
    font-size: 32px;
    -webkit-text-stroke-width: 1px;
  }

  .footer-scroll .idea-content h1 {
    font-size: 38px;
    
  }


  .footer-scroll .contact-reveal {
    inset: 0;
    padding: 6px 6vw;
  }

  .footer-scroll .contact-form {
    gap: clamp(5px, 0.8svh, 8px);
    width: 100%;
    min-width: 300px;
    
  }

  .footer-scroll .form-field {
    gap: 2px;
  }

  .footer-scroll .form-field label {
    font-size: 10px;
  }

  .footer-scroll .form-field input,
  .footer-scroll .form-field textarea {
    padding: 2px 0 4px;
  }

  .footer-scroll .form-field textarea {
    min-height: clamp(44px, 7svh, 60px);
  }

  .footer-scroll .character-count {
    font-size: 9px;
  }

  .footer-scroll .contact-form button {
    padding: 8px 15px;
  }

  .footer-scroll .footer-information {
    gap: 10px;
    height: 28%;
    min-height: 0;
    padding: 14px 5vw 12px;
    font-size: 8px;
  }

  .footer-scroll .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .footer-scroll .brand-logo {
    width: 92px;
    margin-bottom: 8px;
  }

  .footer-scroll .footer-contact strong {
    font-size: 11px;
  }

  .footer-scroll .footer-contact address {
    margin-top: 6px;
  }

  .footer-scroll .footer-lower {
    gap: 10px;
    padding-top: 9px;
    font-size: 7px;
  }

  .footer-scroll .footer-actions {
    gap: 8px;
  }

  .footer-scroll .linkedin-link {
    gap: 5px;
    padding: 4px 6px 4px 4px;
  }

  .footer-scroll .linkedin-icon {
    width: 17px;
    height: 17px;
    font-size: 9px;
  }
  .site-footer.footer-reveal-ready .footer-divider{
    margin: 0;
  }
}

@media (max-width: 550px) {
  .contact-reveal .contact-copy{
    display: none;
  }

  .footer-scroll .contact-form {
    margin-top: 70px;
    padding: 1rem;
  }
  .contact-form label {
    margin-top: 0;
  }
  .contact-form input, .contact-form textarea {
    margin-bottom: 1rem;
    margin-top: 0;
  }

  .site-footer.footer-reveal-ready .footer-brand p{
    display: none;
  }
  .site-footer.footer-reveal-ready .footer-contact p{
    margin-top: 0;
  }
  .site-footer.footer-reveal-ready .footer-contact a{
        font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-scroll .idea-panel,
  .footer-scroll .contact-form {
    will-change: auto;
  }
}

/* ===== Case modal ("Ver caso") — Bootstrap-style dialog ===== */
/* Background scroll is blocked in script.js by intercepting wheel/touch/key
   events instead of overflow:hidden here — that CSS approach broke
   position:sticky descendants elsewhere on the page (see script.js for the
   full explanation). */

.case-modal {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 320ms;
}

.case-modal.is-open {
  transition-delay: 0s;
  visibility: visible;
  pointer-events: auto;
}

.case-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: opacity 260ms ease;
}

.case-modal.is-open .case-modal-backdrop {
  opacity: 1;
}

.case-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 860px);
  /* .case-modal has 24px padding top/bottom, so this is the most the
     dialog can be before it'd get clipped by the viewport edges — past
     that, .case-modal-content (below) scrolls internally instead of
     overflowing off-screen. The dialog itself no longer scrolls, so
     .case-modal-close (position:absolute, a sibling of .case-modal-content)
     stays fixed in place rather than scrolling away with the content. */
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  /* Right padding moved to .case-modal-content below — that's the element
     that actually scrolls, so its scrollbar can sit flush with this
     dialog's true right edge instead of floating inside a padding gap. */
  padding: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px);
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-24px) scale(0.98);
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.case-modal-content {
  /* min-height:0 overrides the flex item's default min-height:auto (which
     would otherwise let it grow to fit all content and never actually
     scroll) — needed for overflow-y:auto to kick in inside a flex column. */
  min-height: 0;
  overflow-y: auto;
  /* Without this, once a wheel/touch scroll here hits the top/bottom edge
     (or if there's nothing to scroll at all — a short case description),
     the browser scroll-chains the rest of the gesture to whatever's
     scrollable behind the modal, defeating the JS scroll-lock below. */
  overscroll-behavior: contain;
  padding-right: clamp(28px, 4vw, 48px);
  /* Reserves exactly the scrollbar's own width out of that padding (not
     extra space on top of it) — text keeps the same visual inset whether
     or not the content is actually scrollable, and the scrollbar itself
     ends up flush with the dialog's true edge (0 padding-right there now)
     instead of floating with a gap past it. */
  scrollbar-gutter: stable;
  /* Lets .modal-column's container query (below) measure this element's
     real width instead of the viewport's. */
  container-type: inline-size;
}

.case-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(27, 28, 31, 0.06);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 180ms ease;
}

.case-modal-close:hover,
.case-modal-close:focus-visible {
  background: rgba(27, 28, 31, 0.12);
}

.case-modal-subtitle {
  margin: 0 0 12px;
  color: var(--coral);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.case-modal-title {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.15;
}

.case-modal-body {
  margin-top: 20px;
  color: #4e4f4c;
  font-size: 16px;
  line-height: 1.55;

  @media (max-width: 450px) {
    font-size: 14px;
  }
}

.case-modal-body p + p {
  margin-top: 14px;
}

.case-modal-body article + article {
  margin-top: 20px;
}

.case-modal-body article h4 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.case-modal-body article p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .case-modal,
  .case-modal-backdrop,
  .case-modal-dialog {
    transition: none;
  }
}