/* =========================================================================
   Fluid layer, Nov 2026 touch-up.
   Brings the valenciakonnect.com v2 buttons and motion to the site, in the site's own colours:
   round pill buttons with a spring, the four-dot Explore button and its liquid blob menu,
   liquid page changes, spring hovers on cards. Loaded after site.css on every page.
   ========================================================================= */
:root { --spring: cubic-bezier(.34, 1.45, .5, 1); --glide: cubic-bezier(.2, .7, .2, 1); --blob: var(--neel-900); }

/* ---------- buttons: pills with a spring ---------- */
.btn { border-radius: 999px !important; clip-path: none !important; min-height: 50px; padding: 0 1.5em;
  transition: transform .5s var(--spring), box-shadow .3s var(--glide), background .25s, color .25s !important; }
.btn--primary { box-shadow: 0 12px 26px -14px rgba(184, 68, 26, .75) !important; }
.btn--ghost { box-shadow: inset 0 0 0 1.5px var(--neel-700) !important; }
.btn--ghost-light { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8) !important; }
.btn--light { box-shadow: 0 12px 26px -14px rgba(14, 20, 51, .45) !important; }
.btn svg { transition: transform .45s var(--spring) !important; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px) scale(1.035); }
  .btn:hover svg { transform: translateX(4px); }
}
.btn:active { transform: scale(.96) !important; transition-duration: .12s !important; }
.chip { border-radius: 999px !important; clip-path: none !important; transition: transform .45s var(--spring), background .25s, color .25s, box-shadow .25s !important; }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { transform: scale(1.04); }

/* ---------- header: logo on a white pill, four-dot Explore button ---------- */
.site-header__logo { display: inline-flex; align-items: center; background: #fff; border-radius: 999px; padding: 7px 16px 7px 12px;
  box-shadow: 0 10px 26px -14px rgba(14, 20, 51, .4), 0 0 0 1px rgba(18, 24, 51, .05); transition: transform .5s var(--spring); }
.site-header__logo:hover { transform: scale(1.03); }
.site-header .menu-btn { display: inline-flex !important; position: relative; z-index: 3; height: 48px; min-height: 48px; padding: 0 1.25em 0 1.05em; gap: .7em;
  border-radius: 999px !important; clip-path: none !important; background: var(--neel-900); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(14, 20, 51, .6) !important; transition: transform .5s var(--spring) !important; }
.site-header .menu-btn:active { transform: scale(.95) !important; }
.site-header .menu-btn > svg { display: none; }
@media (min-width: 1100px) { .site-header .menu-btn { margin-left: 8px; } }
.dots4 { position: relative; width: 14px; height: 14px; flex: none; }
.dots4 i { position: absolute; width: 5px; height: 5px; border-radius: 2px; background: #fff; transition: transform .45s var(--spring); }
.dots4 i:nth-child(1) { left: 0; top: 0; }
.dots4 i:nth-child(2) { right: 0; top: 0; background: var(--orange-500); }
.dots4 i:nth-child(3) { left: 0; bottom: 0; background: var(--lime-500); }
.dots4 i:nth-child(4) { right: 0; bottom: 0; background: var(--amber-400); }
.fl-open .dots4 i:nth-child(1) { transform: translate(4.5px, 4.5px) scale(.6); }
.fl-open .dots4 i:nth-child(2) { transform: translate(-4.5px, 4.5px) scale(.6); }
.fl-open .dots4 i:nth-child(3) { transform: translate(4.5px, -4.5px) scale(.6); }
.fl-open .dots4 i:nth-child(4) { transform: translate(-4.5px, -4.5px) scale(.6); }

/* ---------- liquid menu ---------- */
.fl-blob { position: fixed; z-index: 80; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; background: var(--blob); pointer-events: none; visibility: hidden; will-change: left, top, width, height; }
.fl-blob.on { visibility: visible; pointer-events: auto; }
.fl-open .site-header { z-index: 90; border-bottom-color: transparent; }
.fl-open .site-header::before { opacity: 0; }
.fl-open .site-header .nav { visibility: hidden; }
.fl-open .site-header__bar { position: relative; z-index: 87; }
.drawer.fl { position: fixed; inset: 0; z-index: 85; background: transparent; animation: none; padding: calc(var(--header) + 18px) var(--gutter) 48px; overflow-y: auto; color: #fff; }
.drawer.fl > nav { max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto; }
.drawer.fl .drawer__main a { color: #fff; border-bottom-color: rgba(255, 255, 255, .14); transition: color .2s, padding .45s var(--spring); }
.drawer.fl .drawer__main a:hover { color: var(--amber-400); padding-left: 8px; }
.drawer.fl .drawer__label { color: rgba(255, 255, 255, .55); }
.drawer.fl .drawer__divs a { background: rgba(255, 255, 255, .08); color: #fff; transition: transform .45s var(--spring), background .2s; }
.drawer.fl .drawer__divs a:hover { background: rgba(255, 255, 255, .16); transform: translateX(4px); }
.drawer.fl .drawer__main a, .drawer.fl .drawer__label, .drawer.fl .drawer__divs a { opacity: 0; transform: translateY(12px); }
.drawer.fl.in .drawer__main a, .drawer.fl.in .drawer__label, .drawer.fl.in .drawer__divs a { opacity: 1; transform: none; transition: opacity .5s var(--glide), transform .7s var(--spring), color .2s, background .2s, padding .45s var(--spring); transition-delay: calc(var(--i, 0) * 35ms); }
@media (min-width: 900px) {
  .drawer.fl > nav { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: min-content 1fr; column-gap: 56px; align-items: start; }
  .drawer.fl .drawer__main { grid-row: 1 / span 2; }
  .drawer.fl .drawer__label { margin-top: 10px; }
  .drawer.fl .drawer__divs { grid-template-columns: 1fr 1fr; }
}

/* ---------- liquid page change ---------- */
.fl-wipe { position: fixed; z-index: 200; border-radius: 50%; pointer-events: none; visibility: hidden; }
html.fl-arrive::after { content: ""; position: fixed; inset: 0; z-index: 200; background: var(--fl-arrive, var(--neel-900)); pointer-events: none; }
html.fl-arrive.fl-go::after { animation: flOut .6s var(--glide) forwards; }
@keyframes flOut { to { opacity: 0; transform: scale(1.04); } }


/* ---------- spring on cards (shadow and lift only; nothing inside the card re-flows) ---------- */
@media (hover: hover) and (pointer: fine) {
  .routes a, .proof__item, .doc, .persona a, .story__link { transition: transform .6s var(--glide), box-shadow .35s var(--glide) !important; }
  .routes a:hover, .doc:hover, .persona a:hover { transform: translateY(-3px); }
  .mega__item, .menu__item { transition: transform .5s var(--glide) !important; }
  .mega__item:hover, .menu__item:hover { transform: translateX(3px); }
}

/* ---------- division rows: one calm lift on hover, products keep their spacing ---------- */
.wall__bunch { transition: transform .7s cubic-bezier(.22, .8, .22, 1); }
.bunch__p { transition: transform .7s cubic-bezier(.22, .8, .22, 1) !important; }
@media (hover: hover) and (pointer: fine) {
  .wall__row--compact:hover .bunch__p { margin-left: -20px !important; }
  .wall__row--compact:hover .bunch__p:first-child { margin-left: 0 !important; }
  .wall__row--compact:hover .wall__bunch { transform: translateY(-4px); }
  .wall__row--compact:hover .bunch__p--0, .wall__row--compact:hover .bunch__p--2, .wall__row--compact:hover .bunch__p--4 { transform: translateY(-4px); }
  .wall__row--compact:hover .bunch__p--1, .wall__row--compact:hover .bunch__p--3 { transform: translateY(-12px); }
  .wall__row { transition: box-shadow .45s var(--glide) !important; }
}

/* ---------- proof numbers: quiet bars that fill with the count, no toy bottles ---------- */
.pviz--belt, .pviz--crates { left: 22px; right: auto; width: min(220px, calc(100% - 44px)); bottom: 20px; height: 6px; border: 0 !important; padding: 0 !important; display: block !important; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--neel-900) 8%, transparent); animation: none !important; }
.pviz--belt i, .pviz--crates i { display: none !important; }
.pviz--belt::after, .pviz--crates::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; }
.pviz--belt::after { background: linear-gradient(90deg, var(--orange-500) 0 38.2%, transparent 38.2% 39.4%, var(--amber-400) 39.4% 77%, transparent 77% 78.2%, var(--lime-500) 78.2% 100%); }
.pviz--crates::after { background: linear-gradient(90deg, var(--orange-700), var(--orange-500)); }
[data-proof].is-armed .pviz--belt::after, [data-proof].is-armed .pviz--crates::after { transform: scaleX(0); }
[data-proof].is-in .pviz--belt::after, [data-proof].is-in .pviz--crates::after { transform: none; transition: transform 1.8s cubic-bezier(.22, .8, .22, 1); }

/* ---------- home hero: Valencia at the centre; tap it and the companies spring out and circle it ---------- */
.hero10 { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 4vh, 56px) 0 clamp(32px, 5vh, 64px);
  background: radial-gradient(55% 65% at 78% 42%, color-mix(in srgb, var(--amber-400) 16%, transparent), transparent 70%), radial-gradient(30% 34% at 6% 30%, color-mix(in srgb, var(--lime-500) 10%, transparent), transparent 70%); }
.hero10__grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); row-gap: 18px; align-items: center; }
.hero10__copy .story6__hero { font-size: clamp(2.3rem, 5.2vw, 5.4rem); margin-top: 10px; }
.hero10__copy .story6__text { font-size: clamp(1rem, 1.25vw, 1.18rem); color: var(--ink); max-width: 44ch; margin-top: 14px; }
.hero10__copy .hero__actions { margin-top: 24px; }
@media (min-width: 1000px) { .hero10__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: min(calc(100svh - var(--header) - 100px), 760px); } }
@media (max-width: 999px) {
  .hero10__copy { display: contents; }
  .hero10__copy .kicker { order: 1; margin: 0; } .hero10__copy .story6__hero { order: 2; margin: 0; }
  .orbwrap { order: 3; } .hero10__copy .story6__text { order: 4; margin: 0; } .hero10__copy .hero__actions { order: 5; margin: 0; }
}
@media (max-width: 699px) {
  .hero10__copy .hero__actions { flex-wrap: nowrap; gap: 8px; }
  .hero10__copy .hero__actions .btn { flex: 1 1 0; min-height: 46px; padding: 0 .9em; font-size: .9rem; }
}
.orbwrap { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.orb { position: relative; width: min(100%, 620px, calc(100svh - var(--header) - 140px)); aspect-ratio: 1; container-type: inline-size; --R: 38cqw; }
@media (max-width: 999px) { .orb { width: min(100%, 480px, 50svh); } }
@media (max-width: 699px) { .orb { width: min(92vw, 46svh); min-width: 280px; } }
.orb__pool { position: absolute; left: 50%; top: 50%; width: 96%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.42);
  background: radial-gradient(circle, color-mix(in srgb, var(--amber-400) 30%, #fff) 0, color-mix(in srgb, var(--orange-500) 13%, #fff) 52%, transparent 71%); transition: transform 1.1s var(--spring); }
.orb.is-open .orb__pool { transform: translate(-50%, -50%) scale(1); animation: orbWob 5s ease-in-out 1.1s infinite; }
@keyframes orbWob { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.015, .985) rotate(4deg); } }
.orb__rings { position: absolute; inset: 0; width: 100%; height: 100%; animation: orbSpin 160s linear infinite; }
.orb__rings circle { fill: none; stroke: var(--orange-700); stroke-opacity: .28; transition: opacity .5s; }
.orb__rings .r1 { stroke-width: .3; stroke-dasharray: 1.2 1.6; }
.orb__rings .r2 { stroke-width: .25; }
.orb__rings .ghost circle { stroke: #fff; stroke-width: .5; stroke-opacity: 1; }
.orb__rings .g-vbsw { fill: var(--div-vbsw); } .orb__rings .g-vcb { fill: var(--div-vcb); } .orb__rings .g-vshb { fill: var(--div-vshb); } .orb__rings .g-vpos { fill: var(--div-vpos); }
.orb__rings .g-vnls { fill: var(--div-vnls); } .orb__rings .g-vcp { fill: var(--div-vcp); } .orb__rings .g-intl { fill: var(--div-intl); }
.orb.is-open .orb__rings .r1, .orb.is-open .orb__rings .ghost circle { opacity: 0; }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.orb__core { position: absolute; left: 50%; top: 50%; z-index: 3; width: 40cqw; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 7cqw; cursor: pointer;
  display: grid; place-items: center; align-content: center; gap: 2.4cqw; background: #fff; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1.6cqw color-mix(in srgb, var(--orange-500) 12%, transparent), 0 26px 60px -26px rgba(14, 20, 51, .5);
  transition: width .8s var(--spring), padding .8s var(--spring), box-shadow .4s; animation: orbBreathe 7s ease-in-out infinite; }
.orb__core img { width: 100%; height: auto; }
.orb__tap { display: inline-flex; align-items: center; gap: .5em; padding: .55em 1.1em; border-radius: 999px; background: var(--neel-900); color: #fff; font: 800 clamp(.6rem, 2.2cqw, .78rem) var(--sans); letter-spacing: .1em; text-transform: uppercase; transition: transform .4s var(--spring); }
.orb__core:hover .orb__tap { transform: scale(1.06); }
.orb.is-open .orb__core { width: 28cqw; padding: 4.6cqw; box-shadow: 0 22px 50px -24px rgba(14, 20, 51, .5); }
.orb.is-open .orb__tap { display: none; }
@keyframes orbBreathe { 50% { transform: translate(-50%, -50%) scale(1.03); } }
.orb__ring { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; }
.orb.is-open .orb__ring { animation: orbSpin 120s linear infinite; }
.orb__node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --k: 0; --a: calc(var(--k) * 360deg / 7);
  transform: rotate(var(--a)) translateY(calc(-1 * var(--R))) rotate(calc(-1 * var(--a))); transition: transform 1s var(--spring), opacity .45s var(--glide); transition-delay: calc(var(--k) * 70ms); }
.orb__node:nth-child(2) { --k: 1; } .orb__node:nth-child(3) { --k: 2; } .orb__node:nth-child(4) { --k: 3; }
.orb__node:nth-child(5) { --k: 4; } .orb__node:nth-child(6) { --k: 5; } .orb__node:nth-child(7) { --k: 6; }
.fl-js .orb:not(.is-open) .orb__node { transform: rotate(var(--a)) translateY(0) rotate(calc(-1 * var(--a))) scale(.2); opacity: 0; pointer-events: none; transition-delay: 0s; transition-duration: .45s; }
.orb__in { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.orb.is-open .orb__in { animation: orbSpinBack 120s linear infinite; }
@keyframes orbSpinBack { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
.orb__ring:has(.orb__a:hover, .orb__a:focus-visible), .orb__ring:has(.orb__a:hover, .orb__a:focus-visible) .orb__in,
.orb.is-still .orb__ring, .orb.is-still .orb__in, .orb.is-still .orb__rings, .orb.is-still .orb__pool, .orb.is-still .orb__core,
.orb.is-away .orb__ring, .orb.is-away .orb__in, .orb.is-away .orb__rings, .orb.is-away .orb__pool, .orb.is-away .orb__core { animation-play-state: paused !important; }
.orb__a { display: grid; justify-items: center; gap: 6px; width: clamp(96px, 22cqw, 140px); text-decoration: none; color: var(--ink); text-align: center; transition: opacity .35s var(--glide); }
.orb__ring:has(.orb__a:hover) .orb__a:not(:hover) { opacity: .4; }
.orb__img { display: block; --b: clamp(54px, 14cqw, 84px); width: var(--b); height: var(--b); flex: none; overflow: hidden; border-radius: 50%; background: #fff; padding: calc(var(--b) * .14);
  box-shadow: 0 0 0 2px var(--accent), 0 14px 26px -14px rgba(14, 20, 51, .5); transition: transform .5s var(--spring), box-shadow .3s; }
.orb__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.orb__a b { font: 800 clamp(.7rem, 2.1cqw, .88rem)/1.15 var(--sans); letter-spacing: -.005em; text-wrap: balance; padding: 3px 9px; border-radius: 999px; background: rgb(255 255 255 / .88); box-shadow: 0 4px 12px -8px rgba(14, 20, 51, .35); }
.orb__a small { font: 700 .66rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--accent-ink, var(--accent)); margin-top: -2px; }
.orb__a:hover .orb__img, .orb__a:focus-visible .orb__img { transform: scale(1.1); box-shadow: 0 0 0 3px var(--accent), 0 18px 30px -14px rgba(14, 20, 51, .55); }
@media (max-width: 1279px) { .orb__a small { display: none; } }
.orb__bar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; }
.orb__hint { margin: 0; font: 700 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.orb__pause { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 800 .72rem var(--sans); letter-spacing: .06em; cursor: pointer; }
.orb__pause:hover { border-color: var(--ink); }
.orb__pause i { width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.orb__pause[aria-pressed="true"] i { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
@media (prefers-reduced-motion: reduce) {
  .orb__ring, .orb__in, .orb__rings, .orb__core, .orb.is-open .orb__pool { animation: none !important; }
  .orb__node, .orb__core, .orb__pool { transition-duration: .01s !important; transition-delay: 0s !important; }
  .orb__pause { display: none; }
}
@media print { .fl-r { opacity: 1 !important; transform: none !important; } }

/* ---------- catalogue: no empty slots; small groups widen instead of leaving gaps ---------- */
@media (min-width: 1100px) {
  .phero--catalogue .phero__extra { grid-column: 2 !important; grid-row: 1 / span 5; align-self: center; }
  .phero--catalogue .shelf--wide { height: clamp(320px, 30vw, 440px); }
  .catalogue .rail__track { display: flex !important; flex-wrap: wrap; gap: 20px; }
  .catalogue .rail__track > li { flex: 1 1 calc((100% - (var(--cols, 4) - 1) * 20px) / var(--cols, 4)); max-width: 100%; min-width: 0; container-type: inline-size; }
  .catalogue .rail__track > li[hidden] { display: none; }
}
@media (min-width: 1100px) {
  .catalogue .pcard.is-wide { position: relative; }
  .catalogue .pcard.is-wide .pcard__link { display: grid !important; grid-template-columns: minmax(220px, 40%) minmax(0, 1fr); height: clamp(260px, 22vw, 320px); }
  .catalogue .pcard.is-wide .pcard__media { aspect-ratio: auto !important; height: 100%; }
  .catalogue .pcard.is-wide .pcard__body { align-self: center; padding: 24px 32px 76px !important; }
  .catalogue .pcard.is-wide .pcard__name { font-size: 1.4rem !important; }
  .catalogue .pcard.is-wide .pcard__foot { position: absolute; left: 40%; right: 0; bottom: 0; padding: 0 32px 22px; border: 0; }
}

/* ---------- reveal on scroll: sections rise in as they arrive, only below the first screen ---------- */
.fl-r { opacity: 0; transform: translateY(28px); }
.fl-r.fl-in { opacity: 1; transform: none; transition: opacity .8s var(--glide), transform 1s cubic-bezier(.22, .8, .22, 1); transition-delay: var(--fl-d, 0s); }
.fl-r:focus-within { opacity: 1; transform: none; transition: none; }

/* ---------- menu: a clear close state, calm layout ---------- */
.fl-open .site-header .menu-btn, .fl-closing .site-header .menu-btn { background: #fff; color: var(--neel-900); }
.fl-open .dots4 i, .fl-closing .dots4 i { background: var(--neel-900) !important; }
.site-header .menu-btn .dots4 { order: -1; }
.fl-closing .site-header { z-index: 90; }
.fl-closing .site-header::before { opacity: 0; }
.drawer.fl:not(.in) { pointer-events: none; }
.drawer.fl { display: grid; align-content: safe center; }
.drawer.fl .drawer__divs a { line-height: 1.2; min-height: 60px; }

/* ---------- older site fixes found in testing ---------- */
.wrap.signoff { padding-left: var(--gutter); padding-right: var(--gutter); }
.prod > *, .contact__ways > *, .doclist > *, .prod__body, .prod__media { min-width: 0; }
@media (max-width: 380px) { .btn { white-space: normal; text-align: center; } .doclist, .contact__ways { overflow-wrap: anywhere; } }
.orb__pause[hidden] { display: none; }
.orb.is-open .orb__rings .dot { opacity: 0; }
.orb__tap { white-space: nowrap; }
@media (max-width: 379px) { .hero10__copy .hero__actions { flex-wrap: wrap; } .hero10__copy .hero__actions .btn { flex: 1 1 100%; } }

/* ---- Investors: one page scroll, no boxes that trap the wheel or the thumb ---- */
.irlist { max-height: none; overflow: visible; overscroll-behavior: auto; }
.irlist.is-clipped li.is-over { display: none; }
.irmore { margin-top: 12px; display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 1.1em; border-radius: 999px; border: 2px solid var(--rule, #e5e1d8); background: var(--card, #fff); font: 700 .88rem var(--sans); color: var(--ink); cursor: pointer; transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .2s; }
.irmore:hover { transform: translateY(-2px); }
.irmore:active { transform: scale(.97); }
.irmore svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .3s; }
.irmore[aria-expanded="true"] svg { transform: rotate(180deg); }
.irmore[hidden] { display: none; }

/* ---- Videos ---- */
.vgrid { display: flex; flex-wrap: wrap; gap: 22px; }
.vgrid > .vcard { flex: 1 1 300px; }
.vrail { position: relative; }
.vrail__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(170px, 21vw, 250px); gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 20px); padding: 6px var(--gutter, 20px) 22px; margin: 0 calc(var(--gutter, 20px) * -1); scrollbar-width: thin; scroll-behavior: smooth; }
.vrail__track > .vcard { scroll-snap-align: start; }
.vrail__track:focus-visible { outline: 3px solid var(--focus, #f97316); outline-offset: 2px; }
.vrail__nav { display: flex; gap: 10px; justify-content: flex-end; margin: -6px 0 14px; }
.vrail__nav button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--rule, #e5e1d8); background: var(--card, #fff); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.vrail__nav button:hover { transform: translateY(-2px); }
.vrail__nav button:active { transform: scale(.94); }
.vrail__nav button:disabled { opacity: .35; cursor: default; transform: none; }
.vrail__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .vrail__track { grid-auto-columns: 62%; gap: 12px; } .vrail__nav { display: none; } }
.vcard { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card, #fff); box-shadow: var(--shadow); min-width: 0; }
.vcard__media { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; background: #11162e; border: 0; padding: 0; margin: 0; cursor: pointer; overflow: hidden; }
.vcard--wide .vcard__media { aspect-ratio: 16 / 9; }
.vcard__media img, .vcard__media video, .vcard__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.vcard--wide .vcard__media video { object-fit: contain; background: #000; }
.vcard__media img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.vcard__media:hover img { transform: scale(1.04); }
.vplay { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.vplay::after { content: ""; position: absolute; left: 27px; top: 22px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--orange-700, #c2410c); }
.vcard__media:hover .vplay, .vcard__media:focus-visible .vplay { transform: scale(1.1); }
.vcard__body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.vcard__body h3 { font: 700 1rem/1.3 var(--sans); margin: 0; letter-spacing: 0; text-align: left; }
.vcard__body a { font-size: .85rem; font-weight: 700; color: var(--orange-800, #9a3412); }
@media (max-width: 560px) { .vgrid { gap: 16px; } .vrail .vcard__body { padding: 10px 12px 12px; } .vrail .vcard__body h3 { font-size: .9rem; } }

/* ---- News ---- */
.ngrid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ncard { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--card, #fff); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.ncard:hover { transform: translateY(-4px); }
.ncard__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2, #f3efe6); }
.ncard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ncard__body { padding: 18px 20px 22px; display: grid; gap: 8px; }
.ncard__body small { font-weight: 800; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ncard__body strong { font: 620 1.25rem/1.25 var(--display); letter-spacing: -.01em; }
.ncard__body > span { color: var(--ink-2); font-size: .95rem; text-align: justify; hyphens: auto; }
.ncard__body em { font-style: normal; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; color: var(--orange-800, #9a3412); }
.ncard__body em svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; }
.article__meta { font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 0 0 18px; }
.article__fig { margin: 0 0 28px; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-2, #f3efe6); }
.article__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article__body p, .article__body li { text-align: justify; hyphens: auto; }
.article__body h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 1.6em 0 .5em; }
.article__body ul { padding-left: 1.2em; }
.article__back { margin-top: 32px; }
.wrap--narrow .prose p, .wrap--narrow .prose li { text-align: justify; hyphens: auto; }
.wrap--narrow .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.phero .chips { margin-top: 18px; }

/* ---- Orbit: one centre. Each logo sits exactly on the drawn ring; its label hangs below. ---- */
.orb { --R: 34cqw; --ob: clamp(52px, 13cqw, 80px); }
.orb__img { --b: var(--ob); }
.orb__in { width: 0; display: flex; justify-content: center; transform: translateY(calc(var(--ob) / -2)); transform-origin: 0 calc(var(--ob) / 2); }
.orb__in > .orb__a { flex: none; }
.orb.is-open .orb__in { animation-name: orbSpinBack2; }
@keyframes orbSpinBack2 { from { transform: translateY(calc(var(--ob) / -2)) rotate(0); } to { transform: translateY(calc(var(--ob) / -2)) rotate(-360deg); } }
.orb__a { gap: 5px; }
.orbwrap { padding-bottom: 6px; }

/* ---- Menus: solid panels, thumbnails that stay inside their tiles (Safari) ---- */
.mega, .menu { background: #fff; }
.mega__thumbs { overflow: hidden; box-sizing: border-box; }
.mega__thumb { height: 48px; width: 28px; min-width: 0; overflow: hidden; }
.mega__thumb img { display: block; width: auto; height: auto; max-width: 100%; max-height: 48px; }
.mega__item { align-items: center; min-height: 78px; }

/* ---- Catalogue: Complete / India / International ---- */
.mkt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
.mkt__btn { display: grid; gap: 2px; text-align: left; padding: 14px 18px; border-radius: 18px; border: 2px solid var(--rule, #e5e1d8); background: var(--card, #fff); color: var(--ink); cursor: pointer; font: inherit; transition: transform .4s var(--spring, cubic-bezier(.34,1.56,.64,1)), border-color .2s, background .2s, color .2s; }
.mkt__btn strong { font: 700 1.05rem/1.2 var(--display); }
.mkt__btn small { font: 700 .78rem var(--sans); color: var(--mute); letter-spacing: .02em; }
.mkt__btn:hover { transform: translateY(-2px); border-color: var(--ink); }
.mkt__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.mkt__btn[aria-pressed="true"] small { color: rgb(255 255 255 / .72); }
@media (max-width: 560px) { .mkt { gap: 6px; } .mkt__btn { padding: 10px 10px; border-radius: 14px; } .mkt__btn strong { font-size: .9rem; } .mkt__btn small { font-size: .68rem; } }
#catalogue[data-mkt="intl"] .chip[data-f-div]:not([data-f-div="vcb"]):not([data-f-div="intl"]),
#catalogue[data-mkt="intl"] .chip[data-f-brand]:not([data-f-brand^="vcb-"]):not([data-f-brand^="intl-"]),
#catalogue[data-mkt="in"] .chip[data-f-div="intl"], #catalogue[data-mkt="in"] .chip[data-f-brand^="intl-"] { display: none; }
.docgroup + .docgroup { margin-top: 18px; }
.docgroup__label { font: 800 .74rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 0 0 8px; }

/* ---- Contact: offices and plants ---- */
.offices { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.offices .card { padding: 20px 22px; border-radius: var(--r-lg, 20px); background: var(--card, #fff); box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.offices address { font-style: normal; line-height: 1.6; color: var(--ink-2); }
.offices .card a { font-weight: 700; font-size: .9rem; color: var(--orange-800, #9a3412); }
.offices--plants .card { border-top: 4px solid var(--div-vbsw, #2d5bd1); }
.offices-head { margin: 0 0 16px; }
.offices-head h2 { margin: 0; }
@media (min-width: 900px) { .foot__offices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { .foot__offices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Contract manufacturing ---- */
.cm__grid { display: grid; gap: 28px; }
@media (min-width: 1000px) { .cm__grid { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; } }
.cm__list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.cm__list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; text-align: left; }
.cm__list li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--div-vbsw, #2d5bd1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cm__steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cm__steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--card, #fff); box-shadow: var(--shadow); }
.cm__steps li::before { content: counter(s, decimal-leading-zero); font: 700 1.1rem var(--display); color: var(--div-vbsw, #2d5bd1); }
.cm__steps strong { display: block; font: 700 1rem var(--sans); margin-bottom: 2px; }
.cm__steps span { color: var(--ink-2); font-size: .94rem; }
.cm .specs { margin-top: 22px; }
.cm .prose p { text-align: justify; hyphens: auto; }

/* ---- NutraCare: the line of care, scroll-led ---- */
.life__track { position: relative; }
.life__stage { position: relative; background: #edeef1; }
.life__canvas { position: relative; }
.life__img { display: block; width: 100%; height: auto; }
.life__steps { list-style: none; margin: 0; padding: 24px var(--gutter, 20px) 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); max-width: var(--max, 1200px); margin-inline: auto; }
.life__step { padding: 16px 18px; border-radius: 18px; background: var(--card, #fff); box-shadow: var(--shadow); }
.life__step strong { display: block; font: 700 1.1rem/1.25 var(--display); color: #2b2fb3; margin: 4px 0 6px; }
.life__step p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55; text-align: justify; hyphens: auto; }
.life__tag { display: inline-block; font: 800 .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: #e6e7fb; color: #2b2fb3; }
.life__tag--now { background: #2b2fb3; color: #fff; }
.life__step .btn { margin-top: 12px; }
.life__cord { display: none; }
.life.is-live .life__track { height: calc(var(--n, 12) * 58svh + 100svh); }
.life.is-live .life__stage { position: sticky; top: var(--header, 72px); height: calc(100svh - var(--header, 72px)); overflow: hidden; }
.life.is-live .life__canvas { position: absolute; inset: 0; }
.life.is-live .life__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; }
.life.is-live .life__steps { position: absolute; left: 0; right: 0; bottom: 0; top: 0; padding: 0; margin: 0; max-width: none; display: block; pointer-events: none; }
.life.is-live .life__step { position: absolute; left: max(var(--gutter, 20px), calc((100% - var(--max, 1200px)) / 2 + var(--gutter, 20px))); bottom: 40px; width: min(380px, calc(100% - 2 * var(--gutter, 20px))); opacity: 0; transform: translateY(14px); transition: opacity .45s var(--glide, ease), transform .6s var(--spring, ease); box-shadow: 0 18px 40px -22px rgba(14, 20, 51, .45); background: rgb(255 255 255 / .96); }
.life.is-live .life__step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.life.is-live .life__cord { display: block; position: absolute; right: max(var(--gutter, 20px), calc((100% - var(--max, 1200px)) / 2 + var(--gutter, 20px))); top: 24px; bottom: 24px; width: 6px; border-radius: 6px; background: rgb(43 47 179 / .15); }
.life.is-live .life__fill { position: absolute; inset: 0; border-radius: inherit; background: #2b2fb3; transform-origin: top; transform: scaleY(var(--p, 0)); }
@media (max-width: 700px) {
  .life.is-live .life__step { left: var(--gutter, 16px); right: var(--gutter, 16px); width: auto; bottom: 16px; padding: 14px 16px; }
  .life.is-live .life__step p { font-size: .88rem; }
  .life.is-live .life__cord { top: 12px; bottom: auto; height: 40%; right: 10px; width: 4px; }
}
.contact { grid-template-columns: minmax(0, 1fr) !important; }
.contact__ways { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.orb__a { grid-template-columns: minmax(0, 1fr); }
.orb__a small { white-space: normal; text-wrap: balance; text-align: center; }
.life.is-live .life__img { box-shadow: 0 0 0 1px #edeef1; }

/* ---- Orbit v3: icons only, they unroll then float in place; hover shows what each company makes ---- */
.orb { --ob: clamp(58px, 15cqw, 92px); }
.orb.is-open .orb__ring, .orb.is-open .orb__in { animation: none !important; }
.orb__pause { display: none !important; }
.orb__a { width: auto; gap: 0; }
.orb.is-open .orb__a { animation: orbFloat 5.2s ease-in-out infinite; animation-delay: calc(var(--k) * -0.75s); }
@keyframes orbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.orb.is-away .orb__a { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .orb.is-open .orb__a { animation: none; } }
.orbwrap { position: relative; }
.orb__peek { position: absolute; left: 0; top: 0; z-index: 40; width: min(350px, 100%); padding: 16px 18px 14px; border-radius: 22px; background: #fff; border-top: 4px solid var(--accent, var(--orange-700));
  box-shadow: 0 34px 70px -30px rgba(14, 20, 51, .5), 0 0 0 1px rgba(18, 24, 51, .06); opacity: 0; visibility: hidden; transform: translateY(8px) scale(.96); transform-origin: 80% 50%;
  transition: opacity .2s var(--glide, ease), transform .45s var(--spring, ease), visibility 0s .2s; pointer-events: none; text-align: left; }
.orb__peek.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.orb__pk-k { margin: 0; font: 800 .66rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text, var(--accent)); }
.orb__pk-t { margin: 2px 0 10px; font: 700 1.02rem/1.25 var(--display); color: var(--ink); letter-spacing: -.01em; }
.orb__pk-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
.orb__pk-l li { display: grid; gap: 4px; justify-items: center; min-width: 0; }
.orb__pk-l span { display: grid; place-items: end center; width: 100%; height: 58px; border-radius: 12px; background: color-mix(in srgb, var(--accent, #f97316) 12%, #fff); padding: 5px 4px 3px; box-sizing: border-box; overflow: hidden; }
.orb__pk-l img { display: block; width: auto; height: auto; max-width: 100%; max-height: 50px; object-fit: contain; }
.orb__pk-l img.is-photo { max-height: 50px; border-radius: 6px; }
.orb__pk-l small { font: 700 .62rem/1.2 var(--sans); color: var(--ink-2); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.orb__pk-go { display: inline-block; margin-top: 10px; font: 800 .8rem var(--sans); color: var(--orange-800, #9a3412); text-decoration: none; }
.orb__pk-go:hover { text-decoration: underline; }
.orb__pk-go em { font-style: normal; color: var(--mute); }