/* Disable iOS Safari's text auto-inflation (can scale text unpredictably
   in landscape on iPhone). Cross-browser safe — no effect on others. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Depth layering system */
.bg-base { background: #0F0F0F; }           /* page bg */
.bg-section { background: #141414; }         /* alternate sections */
.bg-card { background: #1A1A1A; }            /* cards on base bg */
.bg-card-on-section { background: #1F1F1F; } /* cards on section bg */
.bg-elevated { background: #262626; }         /* highlighted/elevated */

/* SVG noise filter for texture */
.noise-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 0;
}

/* Scroll animations */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.34,1.56,0.64,1), transform 0.7s cubic-bezier(0.34,1.56,0.64,1); }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* FAQ accordion */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s; opacity: 0; }
.faq-item.open .faq-answer { max-height: 300px; opacity: 1; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.faq-item { background: transparent; transition: background 0.25s ease, border-left 0.25s ease; border-left: 1px solid rgba(255,255,255,0.1); }
.faq-item:hover { background: rgba(255,255,255,0.03); }
.faq-item.open { background: rgba(255,255,255,0.05); border-left: 3px solid #BAEB42; }
.faq-item.open h3 { color: #BAEB42; }
.faq-item h3 { transition: color 0.25s ease; }

/* Button hover glow */
.btn-glow { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s, opacity 0.2s; }
.btn-glow:hover { transform: translateY(-1px); box-shadow: 0 0 24px rgba(139,173,65,0.2); }
.btn-glow:active { transform: scale(0.98); }
.btn-glow:focus-visible { outline: 2px solid #8BAD41; outline-offset: 2px; }

/* Card hover */
.card-hover { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, border-color 0.3s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 4px 6px rgba(139,173,65,0.04), 0 12px 24px rgba(0,0,0,0.3), 0 0 30px rgba(139,173,65,0.08); border-color: rgba(139,173,65,0.3); }

/* Ghost button */
.btn-ghost { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s, color 0.2s; }
.btn-ghost:hover { border-color: #8BAD41; color: #8BAD41; transform: translateY(-1px); }
.btn-ghost:active { transform: scale(0.98); }
.btn-ghost:focus-visible { outline: 2px solid #8BAD41; outline-offset: 2px; }

/* Anek Telugu descender fix — font has oversized bottom metrics that shift text
   below optical center in flex containers. line-height:1 collapses the line box
   so items-center aligns on the actual visual midpoint of the glyphs. */
.btn-glow, .btn-ghost,
a[class*="btn-"], button[class*="btn-"] { line-height: 1; }

/* Nav pill links: inline-flex so line-height:1 centers glyphs properly */
.nav-pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Letter-spacing trailing space fix — margin-right cancels phantom space */
.btn-glow, .btn-lime, .btn-ghost,
a[class*="btn-"], button[class*="btn-"] { margin-right: -0.04em; }

/* tracking-label now 0.04em — compensate */
.tracking-label { margin-right: -0.04em; }

/* Nav pill container — dark bg with inner green glow */
.nav-pill {
  background: rgba(10, 15, 10, 0.65);
  border: 1px solid rgba(139, 173, 65, 0.12);
  box-shadow:
    inset 0px 12px 32px 0px rgba(139, 173, 65, 0.04),
    inset 0px 0px 12px 0px rgba(139, 173, 65, 0.08),
    inset 0px 0px 8px 0px rgba(139, 173, 65, 0.04),
    inset 0px 1px 1px 0px rgba(139, 173, 65, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-pill-link { transition: color 0.2s, background-color 0.2s; }
.nav-pill-link:hover { color: #fff; background: rgba(139, 173, 65, 0.1); }
.nav-pill-link.active { color: #fff; background: rgba(139, 173, 65, 0.12); }
.nav-pill-link:focus-visible { outline: 2px solid #8BAD41; outline-offset: -2px; }

/* Nav CTA (outline button) */
.nav-cta { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s, background-color 0.2s; }
.nav-cta:hover { border-color: rgba(139, 173, 65, 0.4); background: rgba(139, 173, 65, 0.08); transform: translateY(-1px); }
.nav-cta:active { transform: scale(0.98); }
.nav-cta:focus-visible { outline: 2px solid #8BAD41; outline-offset: 2px; }

/* Service detail link — arrow shift on hover */
.svc-detail-link:hover { gap: 10px; }
.svc-detail-link svg { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.svc-detail-link:hover svg { transform: translateX(4px); }

/* Nav link hover (mobile + footer) */
.nav-link { transition: color 0.2s; }
.nav-link:hover { color: #8BAD41; }

/* Stat counter */
.stat-num { font-variant-numeric: tabular-nums; }

/* Ticker animation */
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-track { animation: ticker 30s linear infinite; }
@keyframes marquee-xl { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-xl-track { animation: marquee-xl 28s linear infinite; will-change: transform; }

/* Service detail rows — last child never gets bottom border */
.svc-detail:last-child { border-bottom: none !important; }

/* Mobile: image first, then text; buttons stay on one row */
@media (max-width: 1023px) {
  .svc-detail { display: flex; flex-direction: column; }
  .svc-detail > div:first-child { order: 2; }
  .svc-detail > div:last-child { order: 1; }
  .svc-detail .flex.flex-wrap { flex-wrap: nowrap; }
  .svc-detail .flex.flex-wrap a { font-size: 14px; padding: 16px 16px; white-space: nowrap; }
}

/* Service rows */
.service-row {
  border-top: 0.556px solid rgba(255,255,255,0.2);
  border-bottom: 0.556px solid rgba(255,255,255,0.2);
  transition: background 0.25s ease;
  cursor: pointer;
  /* Promote the row to its own stacking context above the floating hover image
     (which is position:fixed; z-index:1 at the root). Without this, the row's
     descendants share the row's z-index:auto and lose against the float. */
  position: relative;
  z-index: 10;
}
.service-row:last-child  { border-bottom: none; }
.service-row:hover { background: rgba(139,173,65,0.04); }
.service-row .svc-inner {
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.service-row:hover .svc-inner {
  transform: translateX(-12px);
}

/* How We Work — zigzag cards with corner brackets */
.hww-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 40px 36px;
  max-width: 420px;
  transition: background 0.4s ease, transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.hww-card:hover {
  background: rgba(186,235,66,0.04);
  transform: translateY(-4px);
}
.loc-card:hover {
  background: rgba(186,235,66,0.04);
  transform: translateY(-4px);
}
/* Corner brackets */
.hww-card::before, .hww-card::after,
.hww-card .corner-bl, .hww-card .corner-br {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  transition: border-color 0.4s ease;
}
.hww-card::before {
  top: 0; left: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  border-left: 1px solid rgba(255,255,255,0.15);
}
.hww-card::after {
  top: 0; right: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  border-right: 1px solid rgba(255,255,255,0.15);
}
.hww-card .corner-bl {
  bottom: 0; left: 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  border-left: 1px solid rgba(255,255,255,0.15);
}
.hww-card .corner-br {
  bottom: 0; right: 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  border-right: 1px solid rgba(255,255,255,0.15);
}
.hww-card:hover::before, .hww-card:hover::after,
.hww-card:hover .corner-bl, .hww-card:hover .corner-br {
  border-color: rgba(186,235,66,0.35);
}
/* Zigzag positioning */
.hww-row { display: flex; justify-content: flex-start; }
.hww-row.hww-right { justify-content: flex-end; }
/* Particle canvas */
#hww-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
/* Floating shapes */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
@keyframes float-slow-alt {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-3deg); }
}
@keyframes breathe-glow {
  0%, 100% { opacity: 0.07; }
  50% { opacity: 0.14; }
}
/* Pulsating location light */
.pulse-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #BAEB42;
  box-shadow: 0 0 8px rgba(186,235,66,0.6);
  flex-shrink: 0;
}
.pulse-dot::before, .pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(186,235,66,0.4);
  animation: pulse-ring 2.4s cubic-bezier(0.21, 0.61, 0.35, 1) infinite;
}
.pulse-dot::after {
  animation-delay: 0.8s;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0; }
}
/* Noise texture */
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.svc-float-img {
  position: fixed;
  width: 480px;
  height: 330px;
  pointer-events: none;
  /* The #service-rows-wrapper inner div has z-index:1 (inline style on index.html).
     We need to sit BELOW that level so row text paints on top of the floating image
     (theshift.tokyo-style backdrop). z-index:0 places us below z-1 stacking contexts. */
  z-index: 0;
  overflow: hidden;
  border-radius: 0;
  will-change: transform, clip-path;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  top: 0;
  left: 0;
}
/* Row text must sit on its own stacking context above the floating image. */
.svc-inner {
  position: relative;
  z-index: 10;
}
.svc-float-img.is-visible {
  clip-path: inset(0 0 0 0);
}
.svc-float-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Touch devices: kill the floating-image feature entirely.
   `hover: none` + `pointer: coarse` = touch-primary devices on every OS/browser
   (Android Chrome, iOS Safari, Samsung Internet, Firefox mobile, etc.). */
@media (hover: none) and (pointer: coarse) {
  .svc-float-img { display: none !important; }
}

/* ─── AI card explore tertiary button ────────────────────── */
.ai-card-explore svg { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
a.ai-card:hover .ai-card-explore { color: #c9b4f0; gap: 10px; }
a.ai-card:hover .ai-card-explore svg { transform: translateX(4px); }
a.ai-card:focus-visible { outline: 2px solid #B398EC; outline-offset: -2px; }
a.ai-card { cursor: pointer; }

/* ─── Case study image overlay ─────────────────────────── */
.cs-img {
  position: relative;
}
.cs-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
  transition: opacity 0.5s ease;
  pointer-events: none;
  opacity: 1;
}
.cs-img.is-active::after {
  opacity: 0;
}

/* ─── Hero background grid ─────────────────────────────── */
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 42%, rgba(0,0,0,0.85) 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 90% 85% at 50% 42%, rgba(0,0,0,0.85) 20%, transparent 70%);
}

/* ─── Logo levitation (smooth, natural float) ──────────── */
@keyframes hero-levitate {
  0%,100% { transform: translateY(0px); }
  30%     { transform: translateY(-14px); }
  60%     { transform: translateY(-8px); }
}
.hero-levitate { animation: hero-levitate 4.2s ease-in-out infinite; will-change: transform; }

/* ─── AI cards image float ───────────────────────────────── */
@keyframes ai-card-float {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-10px); }
}
.ai-float-wrap {
  animation: ai-card-float 4s ease-in-out infinite;
  will-change: transform;
}
.ai-card-img {
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  display: block;
}
.ai-card:hover .ai-card-img {
  transform: scale(1.18) translateY(-14px) rotate(4deg);
}

/* ─── AI cards gradient dots overlay ────────────────────── */
@keyframes ai-dots-move {
  from { background-position: 0px 0px, 5px 8.66px, 800% 400%, 1000% -400%, -1200% -600%, 400% 17.32px; }
  to   { background-position: 0px 0px, 5px 8.66px, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
}
@keyframes ai-dots-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}
.ai-card { position: relative; isolation: isolate; overflow: hidden; }
.ai-card::before {
  content: '';
  position: absolute;
  inset: 1px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
  background-color: #000;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 1.5px, #000 0 8px, transparent 8px),
    radial-gradient(circle at 50% 50%, transparent 1.5px, #000 0 8px, transparent 8px),
    radial-gradient(circle at 50% 50%, #f00, transparent 60%),
    radial-gradient(circle at 50% 50%, #ff0, transparent 60%),
    radial-gradient(circle at 50% 50%, #0f0, transparent 60%),
    radial-gradient(ellipse at 50% 50%, #00f, transparent 60%);
  background-size:
    10px 17.32px,
    10px 17.32px,
    200% 200%,
    200% 200%,
    200% 200%,
    200% 17.32px;
  animation: ai-dots-move 20s linear infinite, ai-dots-hue 6s linear infinite;
  mask-image: linear-gradient(to bottom, transparent 15%, black 35%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 15%, black 35%);
}
.ai-card:hover::before { opacity: 1; }

/* ─── AI pill animated glow border ─────────────────────────── */
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes glow-spin {
  to { --glow-angle: 360deg; }
}
.ai-pill-glow {
  position: relative;
  isolation: isolate;
}
.ai-pill-glow::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 9999px;
  background: conic-gradient(from var(--glow-angle, 0deg), #a855f7, #6366f1, #06b6d4, #ec4899, #8b5cf6, #a855f7);
  z-index: -1;
  opacity: 1;
  animation: glow-spin 6s linear infinite;
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  filter: blur(1px);
}
.ai-pill-glow::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  background: conic-gradient(from var(--glow-angle, 0deg), #a855f7, #6366f1, #06b6d4, #ec4899, #8b5cf6, #a855f7);
  z-index: -2;
  opacity: 0.5;
  animation: glow-spin 6s linear infinite;
  pointer-events: none;
  filter: blur(6px);
}

/* ─── Hero page-load entrance animations ────────────────── */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-anim-1 { opacity:0; animation: hero-in 0.8s cubic-bezier(0.34,1.56,0.64,1) 0s    forwards; }
.hero-anim-2 { opacity:0; animation: hero-in 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.18s forwards; }
.hero-anim-3 { opacity:0; animation: hero-in 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.34s forwards; }
.hero-anim-4 { opacity:0; animation: hero-in 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.5s  forwards; }
.hero-anim-5 { opacity:0; animation: hero-in 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.66s forwards; }
.hero-anim-7 { opacity:0; animation: hero-in 0.7s cubic-bezier(0.34,1.56,0.64,1) 2.5s forwards; }
.hero-anim-8 { opacity:0; animation: hero-in 0.7s cubic-bezier(0.34,1.56,0.64,1) 2.8s  forwards; }

/* ─── SCALES: Figma-frame reveal ──────────────────────────── */
@keyframes scales-reveal-ltr {
  from { clip-path: inset(-8px calc(100% + 8px) -8px -8px round 2px); }
  to   { clip-path: inset(-8px -8px -8px -8px round 2px); }
}
@keyframes scales-ui-life {
  0%,6%  { opacity:0; }
  12%,76% { opacity:1; }
  100%   { opacity:0; }
}
/* The text span: starts clipped, reveals on delay */
.scales-inner {
  display: block;
  white-space: nowrap;
  animation: scales-reveal-ltr 0.95s cubic-bezier(0.22,1,0.36,1) 2.1s both;
}
/* Selection border: surrounds the text area, fades in before clip starts */
.scales-border {
  position: absolute; inset: -4px;
  border: 1.5px solid #BAEB42;
  background: rgba(255,255,255,0.2);
  pointer-events: none; opacity: 0;
  animation: scales-ui-life 2.8s 0.3s both;
}
/* Corner handles only — cream fill + lime border, matches Figma */
.scales-handle {
  position: absolute; width: 16px; height: 16px;
  background: #f6ffdf; border: 2px solid #BAEB42;
  pointer-events: none; opacity: 0;
  animation: scales-ui-life 2.8s 1.25s both;
}
.scales-handle.sh-tl { top:-8px; left:-8px; }
.scales-handle.sh-tr { top:-8px; right:-8px; }
.scales-handle.sh-bl { bottom:-8px; left:-8px; }
.scales-handle.sh-br { bottom:-8px; right:-8px; }
/* Resize cursor at BR corner */
.scales-cursor {
  position: absolute; bottom:-22px; right:-22px;
  pointer-events: none; opacity: 0;
  animation: scales-ui-life 2.8s 1.25s both;
}

/* ─── Stat box hover: number turns lime ──────────────────── */
.stat-box { cursor: default; }
.stat-value { transition: color 0.22s ease; }
.stat-box:hover .stat-value { color: #BAEB42 !important; }


/* ─── Lime-tinted secondary CTA ────────────────────────── */
.btn-lime { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), background 0.2s, box-shadow 0.2s; }
.btn-lime:hover { background: rgba(186,235,66,0.6) !important; transform: translateY(-1px); box-shadow: 0 0 20px rgba(186,235,66,0.15); }
.btn-lime:active { transform: scale(0.98); }
.btn-lime:focus-visible { outline: 2px solid #BAEB42; outline-offset: 2px; }

/* ─── Second Hero: background crossfade ──────────────── */
.sh-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.sh-bg-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.sh-bg-img.sh-bg-active {
  opacity: 1;
  transform: scale(1);
}

/* ─── Second Hero: service nav links ─────────────────── */
.sh-svc-link {
  opacity: 0.35;
  position: relative;
  padding: 2px 0;
}
.sh-svc-link.sh-svc-active {
  opacity: 1 !important;
  color: #BAEB42 !important;
}
.sh-svc-link:hover {
  opacity: 0.85 !important;
}

/* Play showreel button hover */
#hero button:hover {
  border-color: rgba(186,235,66,0.5) !important;
}

/* ─── Second Hero: CTA link hover ────────────────────── */
.sh-cta-link:hover { opacity: 0.75; }

/* ─── Second Hero: mobile overrides ──────────────────── */
@media (max-width: 768px) {
  .sh-headline-wrap { text-align: left !important; }
  /* !important needed: the inline style on .sh-bottom-zone sets align-items:flex-end which
     wins specificity-wise. Forcing flex-start here so iPad Mini left-aligns content. */
  .sh-bottom-zone { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
}

/* ─── Second Hero: entrance stagger ──────────────────── */
.sh-anim-1 { opacity:0; animation: hero-in 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s forwards; }
.sh-anim-2 { opacity:0; animation: hero-in 0.9s cubic-bezier(0.22,1,0.36,1) 0.3s forwards; }
.sh-anim-3 { opacity:0; animation: hero-in 0.9s cubic-bezier(0.22,1,0.36,1) 0.5s forwards; }
.sh-anim-4 { opacity:0; animation: hero-in 0.9s cubic-bezier(0.22,1,0.36,1) 0.7s forwards; }
.sh-anim-5 { opacity:0; animation: hero-in 0.9s cubic-bezier(0.22,1,0.36,1) 0.9s forwards; }

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .hero-anim-1,.hero-anim-2,.hero-anim-3,.hero-anim-4,
  .hero-anim-5,.hero-anim-7,.hero-anim-8 { opacity:1; animation:none; }
  .hero-levitate { animation: none; }
  .sh-anim-1,.sh-anim-2,.sh-anim-3,.sh-anim-4,.sh-anim-5 { opacity:1; animation:none; }
  .sh-bg-img { transition:none; }
  .sh-svc-link, .sh-svc-link::after { transition:none; }
  .scales-inner { clip-path: none !important; animation: none !important; }
  .scales-border,.scales-handle,.scales-cursor { display:none; }
  .ticker-track { animation: none; }
  .card-hover, .btn-glow, .btn-ghost, .btn-lime, .nav-link { transition: none; }
}

/* ─── Product Mockup Frame ──────────────────────────────
   Editorial display for case-study product images that have
   transparent or thin backgrounds. Wrap an <img> with
   <figure class="product-mockup-frame"> to apply.
   ──────────────────────────────────────────────────── */
.product-mockup-frame {
  --pmf-bg-base: #0E0E0F;
  --pmf-bg-soft: #15171A;
  --pmf-accent-deep: #8BAD41;
  --pmf-border: rgba(255, 255, 255, 0.06);
  --pmf-border-strong: rgba(255, 255, 255, 0.10);
  --pmf-radius: 16px;
  --pmf-pad: clamp(4px, 0.8vw, 12px);

  position: relative;
  isolation: isolate;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: var(--pmf-pad) !important;
  border-radius: var(--pmf-radius);
  border: 1px solid var(--pmf-border);
  overflow: hidden;
  margin: 0;

  /* Studio backdrop on dark canvas. !important wins over any inline
     background:#1A1A1A on the homepage card wrappers. */
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%,
                    rgba(255, 255, 255, 0.05) 0%,
                    rgba(255, 255, 255, 0.02) 25%,
                    transparent 55%),
    radial-gradient(ellipse 80% 60% at 85% 110%,
                    rgba(139, 173, 65, 0.10) 0%,
                    rgba(139, 173, 65, 0.04) 30%,
                    transparent 60%),
    linear-gradient(180deg, var(--pmf-bg-soft) 0%, var(--pmf-bg-base) 100%) !important;

  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40);

  transition: border-color 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Subtle film-grain overlay — barely perceptible, breaks gradient flatness. */
.product-mockup-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.22;
  pointer-events: none;
  z-index: 1;
}

/* Product image — fills the available frame area as large as possible. */
.product-mockup-frame > img {
  position: relative;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  display: block;
  filter:
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

.product-mockup-frame:hover { border-color: var(--pmf-border-strong); }

@media (max-width: 640px) {
  .product-mockup-frame {
    --pmf-pad: clamp(8px, 2vw, 16px);
    --pmf-radius: 12px;
  }
}

/* ─── Case Card Gradient Bg ─────────────────────────────
   Lightweight variant: paints ONLY the dark studio gradient
   behind a card. No padding change, no object-fit override —
   the inner image keeps cover/cropping behavior. Used on
   homepage cards where the photo has thin/transparent areas
   and we want a richer backdrop than flat #1A1A1A.
   ──────────────────────────────────────────────────── */
.case-card-gradient-bg {
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%,
                    rgba(255, 255, 255, 0.05) 0%,
                    rgba(255, 255, 255, 0.02) 25%,
                    transparent 55%),
    radial-gradient(ellipse 80% 60% at 85% 110%,
                    rgba(139, 173, 65, 0.10) 0%,
                    rgba(139, 173, 65, 0.04) 30%,
                    transparent 60%),
    linear-gradient(180deg, #15171A 0%, #0E0E0F 100%) !important;
}

/* On homepage scrolling case-study cards (mobile aspect-square + desktop
   cs-img), strip the frame's border-radius so the cards sit flush. */
.product-mockup-frame.aspect-square,
.product-mockup-frame.cs-img {
  --pmf-radius: 0;
  border-radius: 0 !important;
}

/* ─── Project Sizer ─────────────────────────────────────
   Hero secondary CTA modal: 4-question intake + suggested
   team / timeline / investment + case-study deep-link.
   ──────────────────────────────────────────────────── */
.sizer-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 3vw, 48px);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: 'Geist', 'Geist Sans', system-ui, -apple-system, sans-serif;
}
.sizer-modal[hidden] { display: none; }
.sizer-modal.is-open { opacity: 1; pointer-events: auto; }

.sizer-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 6, 8, 0.78);
  backdrop-filter: blur(18px) saturate(0.9);
  -webkit-backdrop-filter: blur(18px) saturate(0.9);
}

.sizer-shell {
  position: relative;
  width: min(100%, 720px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(186,235,66,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 80% 70% at 100% 110%, rgba(139,173,65,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #15171A 0%, #0E0E0F 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
  transform: translateY(8px) scale(0.99);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sizer-modal.is-open .sizer-shell { transform: translateY(0) scale(1); }

.sizer-close {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 200ms ease;
}
.sizer-close:hover { color: #fff; border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); }

.sizer-header { margin-bottom: 28px; padding-right: 40px; }
.sizer-eyebrow {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #BAEB42; font-weight: 600; margin-bottom: 10px;
}
.sizer-title {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.02em;
  color: #fff; margin: 0 0 18px 0; line-height: 1.15;
}
.sizer-progress {
  height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden;
}
.sizer-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #8BAD41, #BAEB42);
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sizer-stage-wrap { position: relative; }
.sizer-stage[hidden] { display: none; }
.sizer-stage.is-active {
  animation: sizer-fade-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sizer-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sizer-q-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); font-weight: 600; margin-bottom: 8px;
}
.sizer-q {
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.015em;
  color: #fff; margin: 0 0 22px 0; line-height: 1.2;
}

.sizer-options { display: grid; gap: 10px; }
.sizer-opt {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.sizer-opt:hover {
  background: rgba(186,235,66,0.06);
  border-color: rgba(186,235,66,0.35);
  color: #fff;
}
.sizer-opt:focus-visible {
  outline: 2px solid #BAEB42; outline-offset: 2px;
}
.sizer-opt.is-selected {
  background: rgba(186,235,66,0.10);
  border-color: #BAEB42;
  color: #fff;
}

.sizer-footer {
  display: flex; justify-content: flex-start; margin-top: 20px;
}
.sizer-back {
  background: none; border: none; color: rgba(255,255,255,0.55);
  font: inherit; font-size: 13px; cursor: pointer; padding: 6px 0;
  transition: color 180ms ease;
}
.sizer-back:hover { color: #fff; }

/* ─── Result screen ─────────────────────────────────────── */
.sizer-result-eyebrow {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #BAEB42; font-weight: 600; margin-bottom: 16px;
}
.sizer-result-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  margin-bottom: 22px;
}
@media (min-width: 640px) { .sizer-result-grid { grid-template-columns: 1.3fr 1fr 1fr; } }

.sizer-result-cell {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px 18px;
}
.sizer-result-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); font-weight: 600; margin-bottom: 8px;
}
.sizer-result-value {
  font-size: 22px; font-weight: 600; color: #fff; letter-spacing: -0.01em;
  line-height: 1.1;
}
.sizer-result-sub {
  font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 6px;
}
.sizer-result-team { list-style: none; padding: 0; margin: 0; }
.sizer-result-team li {
  font-size: 14px; color: rgba(255,255,255,0.9); padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sizer-result-team li:last-child { border-bottom: none; }

.sizer-result-links {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px;
}
@media (min-width: 640px) { .sizer-result-links { grid-template-columns: 1fr 1fr; } }

.sizer-result-link {
  display: block;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 16px;
  text-decoration: none; color: inherit;
  transition: background 180ms ease, border-color 180ms ease;
}
.sizer-result-link:hover {
  background: rgba(186,235,66,0.05);
  border-color: rgba(186,235,66,0.25);
}
.sizer-result-link-label {
  display: block;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #BAEB42; font-weight: 600; margin-bottom: 4px;
}
.sizer-result-link-value {
  display: block;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.92);
  line-height: 1.3;
}

.sizer-result-disclaimer {
  font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.5;
  margin-bottom: 22px; padding-left: 12px; border-left: 2px solid rgba(186,235,66,0.4);
}

.sizer-result-cta {
  display: grid; gap: 14px; margin-bottom: 16px;
}
.sizer-form { display: flex; flex-direction: column; gap: 10px; }
.sizer-form-label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); font-weight: 600;
}
.sizer-form-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.sizer-form-row input {
  flex: 1; min-width: 200px;
  font: inherit; font-size: 15px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  padding: 12px 14px;
}
.sizer-form-row input:focus {
  outline: none; border-color: #BAEB42;
  background: rgba(186,235,66,0.04);
}
.sizer-form-status {
  font-size: 12.5px; color: rgba(255,255,255,0.7); min-height: 16px;
}

.sizer-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: all 200ms ease;
  border: 1px solid transparent;
}
.sizer-btn-primary {
  background: linear-gradient(170deg, #8BAD41, #BAEB42);
  color: #0F0F0F;
  border-color: #BAEB42;
}
.sizer-btn-primary:hover { transform: translateY(-1px); }
.sizer-btn-ghost {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.sizer-btn-ghost:hover {
  background: rgba(186,235,66,0.06);
  border-color: rgba(186,235,66,0.35);
}

.sizer-restart {
  background: none; border: none; color: rgba(255,255,255,0.45);
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 8px 0;
  transition: color 180ms ease;
}
.sizer-restart:hover { color: rgba(255,255,255,0.8); }

/* ─── Lead-capture form: stacked inputs + full-width submit ─── */
.sizer-form-row-stack { flex-direction: column; }
.sizer-form-row-stack input { min-width: 0; width: 100%; }
.sizer-form-submit { width: 100%; justify-content: center; margin-top: 2px; }

/* ─── Success screen ─── */
.sizer-success {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 8px;
}
.sizer-success-check { margin-bottom: 24px; }
.sizer-success-title {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 14px;
}
.sizer-success-next {
  font-size: 16px;
  line-height: 1.6;
  color: #C7C8CC;
  margin: 0 0 18px;
  max-width: 420px;
}
.sizer-success-motto {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  margin: 0 0 32px;
  max-width: 440px;
  padding-left: 14px;
  border-left: 2px solid #BAEB42;
  text-align: left;
}
.sizer-success-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.sizer-success-link {
  font-size: 13.5px;
  color: rgba(186,235,66,0.85);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 180ms ease;
}
.sizer-success-link:hover { color: #BAEB42; }

/* Checkmark draw-in — only when motion is allowed (rare/first-time moment) */
@media (prefers-reduced-motion: no-preference) {
  .sizer-stage.is-active .sizer-check-circle {
    stroke-dasharray: 152; stroke-dashoffset: 152;
    animation: sizer-check-circle 520ms cubic-bezier(0.23,1,0.32,1) forwards;
  }
  .sizer-stage.is-active .sizer-check-mark {
    stroke-dasharray: 36; stroke-dashoffset: 36;
    animation: sizer-check-mark 320ms cubic-bezier(0.23,1,0.32,1) 380ms forwards;
  }
  @keyframes sizer-check-circle { to { stroke-dashoffset: 0; } }
  @keyframes sizer-check-mark { to { stroke-dashoffset: 0; } }
}

@media (max-width: 640px) {
  .sizer-shell { padding: 24px 20px 28px; border-radius: 14px; }
  .sizer-result-value { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .sizer-modal, .sizer-shell, .sizer-stage.is-active,
  .sizer-progress-bar, .sizer-opt, .sizer-result-link,
  .sizer-btn, .sizer-back, .sizer-restart, .sizer-close {
    transition: none !important; animation: none !important;
  }
}