/* Film hero: black stage, one cool beam of light, our onion pieces tumbling in it. Centred light grotesk type.
   Also resets the rest of the page from serif to clean sans so it reads as its own brand. */
:root { --ink0: #0c1c2e; --beam: #3fd0e2; --soft: #9aa3ad; --amber: #e8b866; }
body:has(.f-hero) { background: var(--ink0); }
body:has(.f-hero) h2, body:has(.f-hero) .vx-h2, body:has(.f-hero) .v2-h2, body:has(.f-hero) .vx-item h3, body:has(.f-hero) .v3-mill-title, body:has(.f-hero) .v2-cta-title, body:has(.f-hero) .manifesto-inner h2 {
  font-family: var(--sans) !important; font-weight: 500 !important; letter-spacing: -.035em !important; }
body:has(.f-hero) .vx-h2 span, body:has(.f-hero) .v2-h2 span, body:has(.f-hero) .v3-mill-title span, body:has(.f-hero) .v2-cta-title span, body:has(.f-hero) .v2-cta-title span vx-i, body:has(.f-hero) .manifesto-inner h2 em { font-style: normal; color: #6f7883 !important; }
body:has(.f-hero) .v2-btn.primary, body:has(.f-hero) .qb-next, body:has(.f-hero) .header-whatsapp { background: #f2f4f6 !important; color: #050607 !important; box-shadow: none; }
body:has(.f-hero) .vx-dots i::after, body:has(.f-hero) .vx-item a { border-color: var(--beam); } body:has(.f-hero) .vx-dots i::after { background: var(--beam); } body:has(.f-hero) .vx-item a b { color: var(--beam); }
body:has(.f-hero) .vx-div, body:has(.f-hero) .v2-eyebrow, body:has(.f-hero) .eyebrow, body:has(.f-hero) .manifesto-overline { color: var(--beam) !important; }
body:has(.f-hero) .vx-story, body:has(.f-hero) .vx-sticky { background: var(--ink0); }
body:has(.f-hero) .v3-mill-stages li.is-on { background: var(--beam); } body:has(.f-hero) .v2-cards svg { stroke: var(--beam); } body:has(.f-hero) .footer h2 { color: var(--beam); }
body:has(.f-hero) .v2-forms, body:has(.f-hero) .v2-route, body:has(.f-hero) .v3-mill, body:has(.f-hero) .v2-promise, body:has(.f-hero) .v2-cta, body:has(.f-hero) .footer { background: #07090b; }

.f-hero { position: relative; height: 100vh; min-height: 680px; background: var(--ink0); }
.f-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; color: #f4f6f8; }
.f-back, .f-front { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.f-front { z-index: 3; pointer-events: none; }
.f-beam { position: absolute; left: 50%; top: -10%; width: 46vw; height: 120%; transform: translateX(-50%); pointer-events: none; z-index: 1;
  background: radial-gradient(50% 60% at 50% 0%, #3fd0e226 0%, transparent 70%), linear-gradient(90deg, transparent, #3fd0e20c 30%, #3fd0e216 50%, #3fd0e20c 70%, transparent);
  filter: blur(10px); animation: f-breathe 7s ease-in-out infinite alternate; }
@keyframes f-breathe { to { opacity: .7; transform: translateX(-50%) scaleX(1.08); } }
.f-copy::before { content: ''; position: absolute; inset: -18% -12%; z-index: -1; background: radial-gradient(closest-side, #0c1c2ee6 30%, #0c1c2e99 60%, transparent 100%); }
.f-copy { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -54%); width: min(100% - 40px, 1100px); text-align: center; transition: opacity .5s, transform .8s cubic-bezier(.2,.8,.2,1); }

.f-kick { margin: 0 0 26px; font: 500 12.5px var(--sans); letter-spacing: .36em; text-transform: uppercase; color: var(--beam); opacity: calc(var(--intro, 0) * 1); }
.f-title { margin: 0; font: 400 clamp(54px, 9vw, 150px)/.92 var(--sans) !important; letter-spacing: -.055em; color: #f4f6f8; }
.f-title span { display: block; } .f-title span:last-child { color: #7e8792; }
.f-title span { animation: f-in 1.6s cubic-bezier(.2,.8,.2,1) both; } .f-title span:last-child { animation-delay: .18s; }
@keyframes f-in { from { opacity: 0; letter-spacing: .02em; filter: blur(14px); } }
.f-lead { margin: 30px auto 34px; max-width: 560px; font-size: 17px; line-height: 1.65; color: var(--soft); animation: f-in 1.6s .4s both; }
.f-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: f-in 1.6s .55s both; }
.f-btn { padding: 16px 30px; border-radius: 999px; font: 600 15px var(--sans); border: 0; cursor: pointer; transition: transform .3s, background .3s; }
.f-btn:hover { transform: translateY(-2px); }
.f-btn.solid { background: #f4f6f8; color: #050607; }
.f-btn.line { background: #ffffff0a; color: #f4f6f8; box-shadow: inset 0 0 0 1px #ffffff33; backdrop-filter: blur(6px); }
.f-meter { position: absolute; z-index: 4; left: 50%; bottom: 40px; transform: translateX(-50%); width: min(100% - 40px, 900px); opacity: 0; transition: opacity .6s; }
.f-hero.moved .f-meter { opacity: 1; }
.f-mlabel { margin: 0 0 16px; text-align: center; font: 500 12px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--beam); }
.f-stages { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; }
.f-stages li { display: grid; gap: 4px; color: #ffffff4a; transition: color .4s, transform .5s; }
.f-stages b { font: 500 clamp(18px, 2.2vw, 30px) var(--sans); letter-spacing: -.03em; }
.f-stages em { font: 400 12.5px var(--sans); font-style: normal; letter-spacing: .04em; }
.f-stages li.on { color: #fff; transform: translateY(-4px); } .f-stages li.on em { color: var(--beam); }
.f-bar { display: block; height: 1px; background: #ffffff22; position: relative; } .f-bar s { position: absolute; inset: 0; background: var(--beam); transform-origin: left; transform: scaleX(var(--p, 0)); }
.f-hint { position: absolute; z-index: 4; left: 50%; bottom: 30px; transform: translateX(-50%); margin: 0; font: 500 11px var(--sans); letter-spacing: .34em; text-transform: uppercase; color: #ffffff66; transition: opacity .4s; }
.f-hint::before { content: ''; display: block; width: 1px; height: 38px; margin: 0 auto 10px; background: linear-gradient(transparent, #bfeef4); animation: f-drop 2s ease-in-out infinite; transform-origin: top; }
@keyframes f-drop { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

body:has(.f-hero) .header:not(.is-scrolled) { background: transparent !important; }

@media (max-width: 760px) {
  .f-title { font-size: 54px !important; } .f-lead { font-size: 15px; margin: 22px auto 26px; }
  .f-stages b { font-size: 15px; } .f-stages em { font-size: 10px; } .f-meter { bottom: 26px; }
  .f-beam { width: 90vw; }
}
@media (prefers-reduced-motion: reduce) { .f-title span, .f-lead, .f-btns, .f-beam, .f-hint::before { animation: none; } }

/* ---- lower page: one black world, logo-cyan accents only ---- */
body:has(.f-hero) main > section:not(.f-hero):not(.vx-story), body:has(.f-hero) .home-manifesto, body:has(.f-hero) .footer { background: #0f2236 !important; }
body:has(.f-hero) .v2-promise, body:has(.f-hero) .v3-mill { background: #132a43 !important; }
body:has(.f-hero) .home-manifesto { border-top: 1px solid #ffffff10; border-bottom: 1px solid #ffffff10; }
body:has(.f-hero) .manifesto-word { -webkit-text-stroke-color: #3fd0e21f !important; }
body:has(.f-hero) .v2-cta-glow { background: radial-gradient(closest-side, #3fd0e22a, #3fd0e208 55%, transparent 75%) !important; animation: none !important; }
body:has(.f-hero) .v2-cta-title span, body:has(.f-hero) .v2-cta-title span vx-i { color: #3fd0e2 !important; }
body:has(.f-hero) .manifesto-inner h2 em { color: #3fd0e2 !important; font-style: normal; }
body:has(.f-hero) .qb { background: #18324d !important; box-shadow: 0 0 0 1px #ffffff14, 0 40px 90px #000a !important; }
body:has(.f-hero) .qb-steps { background: #1c3956 !important; } body:has(.f-hero) .qb-steps li.is-on { box-shadow: inset 0 -2px 0 #3fd0e2; color: #fff !important; }
body:has(.f-hero) .qb-prod, body:has(.f-hero) .qb-chips button { background: #21405f !important; color: #e6eaee !important; }
body:has(.f-hero) .qb-prod[aria-pressed="true"], body:has(.f-hero) .qb-chips button[aria-pressed="true"] { background: #3fd0e2 !important; color: #041014 !important; }
body:has(.f-hero) .qb-field input, body:has(.f-hero) .qb-field textarea { background: #1c3956 !important; border-color: #ffffff1f !important; }
body:has(.f-hero) .qb-next { background: #3fd0e2 !important; color: #041014 !important; }
body:has(.f-hero) .v2-cards article { background: #18324d !important; box-shadow: 0 0 0 1px #ffffff12; }
body:has(.f-hero) .footer, body:has(.f-hero) .footer-end { color: #8b939c; } body:has(.f-hero) .footer-end { border-top-color: #ffffff12 !important; }
body:has(.f-hero) .footer h2 { color: #3fd0e2 !important; }
body:has(.f-hero) .brand { width: 290px; } body:has(.f-hero) .footer-logo { width: 230px; }
@media (max-width: 760px) { body:has(.f-hero) .brand { width: 200px; } }
/* giant VARUNIDHI word (kept from V1): show it whole, no band edges */
body:has(.f-hero) .home-manifesto { border: 0 !important; background: radial-gradient(60% 80% at 50% 100%, #3fd0e20d, transparent 70%), #0f2236 !important; padding-bottom: 0; }
body:has(.f-hero) .manifesto-word { bottom: 10px !important; left: 0 !important; right: 0 !important; text-align: center; -webkit-text-stroke: 1px #3fd0e238 !important; }
body:has(.f-hero) .home-manifesto .manifesto-inner { padding-bottom: clamp(150px, 19vw, 330px) !important; }
html:has(.f-hero), body:has(.f-hero) { background: #0f2236 !important; }
/* lighter navy world (10 Oct): override the dark-theme variables too */
:root { --space: #0c1c2e; --space-2: #10243a; --v2-base: #0f2236; --v2-alt: #132a43; --v2-card: #18324d; --v2-ink: #0f2236; }
body:has(.f-hero) .vx-story, body:has(.f-hero) .vx-sticky { background: radial-gradient(70% 80% at 70% 50%, #163453 0%, #0c1c2e 75%) !important; }
body:has(.f-hero) .header.is-scrolled { background: rgba(12,28,46,.85) !important; }
body:has(.f-hero) .footer-end, body:has(.f-hero) .footer { background: #0f2236 !important; }
/* portfolio: one sharp square photo, right-aligned to the page edge, centred between title and progress bar (10 Oct) */
body:has(.f-hero) .vx-stage { align-items: stretch; }
body:has(.f-hero) .vx-copy { align-self: center; }
body:has(.f-hero) .vx-media { height: auto; min-height: 0; }
body:has(.f-hero) .vx-halo, body:has(.f-hero) .vx-media::before { display: none; content: none; }
body:has(.f-hero) .vx-img { left: auto; right: 0; top: 50%; width: min(100%, calc(100vh - 310px), 600px); height: auto; aspect-ratio: 1;
  border-radius: 22px; object-fit: cover; box-shadow: 0 0 0 1px #ffffff14, 0 30px 70px #02081273;
  transform: translateY(calc(-50% + 24px)); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
body:has(.f-hero) .vx-img.is-past { transform: translateY(calc(-50% - 24px)); }
body:has(.f-hero) .vx-img.is-on { transform: translateY(-50%); }
body:has(.f-hero) .vx-sticky { padding-bottom: clamp(26px, 4.5vh, 44px); }
body:has(.f-hero) .vx-head { margin-bottom: clamp(18px, 3vh, 32px); }
body:has(.f-hero) .vx-dots { margin-top: clamp(18px, 3vh, 32px); }
@media (max-width: 860px) {
  body:has(.f-hero) .vx-head { display: block; margin-bottom: 14px; }
  body:has(.f-hero) .vx-head .v2-eyebrow { font-size: 10.5px; letter-spacing: .22em; margin-bottom: 6px; }
  body:has(.f-hero) .vx-h2 { font-size: 25px !important; white-space: nowrap; }
  body:has(.f-hero) .vx-count { display: none; }
  body:has(.f-hero) .vx-media { height: min(92vw, 42vh); flex: none; }
  body:has(.f-hero) .vx-img { left: 0; right: 0; margin: 0 auto; width: min(100%, 42vh); border-radius: 18px; }
  body:has(.f-hero) .vx-dots { margin-top: 10px; }
}
/* "See what we supply": navy + logo cyan, square photos like the portfolio (10 Oct) */
body:has(.f-hero) .v2-forms .v2-h2, body:has(.f-hero) .v2-forms .v2-cuts strong, body:has(.f-hero) .v2-forms button, body:has(.f-hero) .v2-stage-label strong { font-family: var(--sans) !important; }
body:has(.f-hero) .v2-divtabs { background: #ffffff0a !important; box-shadow: inset 0 0 0 1px #ffffff1c !important; }
body:has(.f-hero) .v2-forms [data-div], body:has(.f-hero) .v2-forms [data-ing] { background: transparent !important; color: #c3d0dc !important; font-weight: 600 !important; }
body:has(.f-hero) .v2-forms [data-ing] { box-shadow: inset 0 0 0 1px #ffffff24; }
body:has(.f-hero) .v2-forms [data-div]:hover, body:has(.f-hero) .v2-forms [data-ing]:hover { color: #fff !important; background: #ffffff10 !important; }
body:has(.f-hero) .v2-forms [data-div][aria-selected="true"], body:has(.f-hero) .v2-forms [data-ing][aria-pressed="true"] { background: #3fd0e2 !important; color: #041014 !important; box-shadow: none; }
body:has(.f-hero) .v2-cuts { border-top-color: #ffffff17 !important; }
body:has(.f-hero) .v2-cuts button { color: #6f8498 !important; border-bottom-color: #ffffff17 !important; }
body:has(.f-hero) .v2-cuts button[aria-pressed="true"] { color: #fff !important; }
body:has(.f-hero) .v2-cuts button[aria-pressed="true"] em, body:has(.f-hero) .v2-cuts button[aria-pressed="true"] span { color: #3fd0e2; }
body:has(.f-hero) .v2-cuts button::before { background: #3fd0e2 !important; }
body:has(.f-hero) .v2-cuts strong { font-weight: 500 !important; letter-spacing: -.03em; }
body:has(.f-hero) .v2-link { color: #fff !important; border-bottom-color: #3fd0e2 !important; }
body:has(.f-hero) .v2-forms-stage { width: min(100%, 540px); }
body:has(.f-hero) .v2-stage-ring { display: none; }
body:has(.f-hero) .v2-stage-img { inset: 0; width: 100%; height: 100%; border-radius: 22px; object-fit: cover; filter: none;
  box-shadow: 0 0 0 1px #ffffff14, 0 30px 70px #02081273; transform: translateY(20px) scale(.97); }
body:has(.f-hero) .v2-stage-img.is-on { transform: none; }
body:has(.f-hero) .v2-stage-label { left: 18px; bottom: 18px; background: #0c1c2ee6 !important; backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px #ffffff1a, 0 16px 40px #0208128c; }
body:has(.f-hero) .v2-stage-label span { color: #3fd0e2 !important; }
body:has(.f-hero) .v2-stage-label strong { color: #fff; font-weight: 500; }
@media (max-width: 760px) { body:has(.f-hero) .v2-forms-stage { width: 100%; } body:has(.f-hero) .v2-stage-label { left: 12px; bottom: 12px; padding: 10px 14px; } }
/* supply photos: keep them at (or below) their real pixel size so they stay sharp */
body:has(.f-hero) .v2-forms-stage { width: min(100%, 440px); }