/* Vignanaveda · the R&D centre page. Builds on site.css, pages.css and gs.css. */

/* ── 1 · hero: full-bleed lab photograph, the name with its meaning ── */
.vv-hero{position:relative;min-height:min(100vh,920px);display:flex;flex-direction:column;justify-content:flex-end;padding:150px 0 0;color:#fffaf0;isolation:isolate;overflow:hidden}
.vv-hero-media{position:absolute;inset:0;z-index:-2}
.vv-hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;transform:scale(1.06);animation:vvDrift 22s ease-in-out infinite alternate}
@keyframes vvDrift{to{transform:scale(1.12) translate(-1.5%,-1%)}}
.vv-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,26,24,.86) 0%,rgba(12,26,24,.62) 42%,rgba(12,26,24,.12) 75%),linear-gradient(0deg,rgba(12,26,24,.75) 0%,transparent 45%)}
.vv-hero .crumbs,.vv-hero .crumbs a{color:rgba(255,250,240,.72)}
.vv-hero-in{padding-bottom:40px}
.vv-kicker{display:inline-flex;align-items:center;gap:10px;margin:18px 0 8px;font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#e3bf70}
.vv-kicker .dot{width:8px;height:8px;border-radius:50%;background:#9fcf6a;box-shadow:0 0 0 0 rgba(159,207,106,.6);animation:vvPulse 2.4s infinite}
@keyframes vvPulse{70%{box-shadow:0 0 0 10px rgba(159,207,106,0)}100%{box-shadow:0 0 0 0 rgba(159,207,106,0)}}
.vv-name{margin:30px 0 0;color:#fffaf0;font-weight:300;font-size:clamp(64px,11.5vw,180px);line-height:.9;letter-spacing:-.055em;white-space:nowrap}
.vv-name .w{position:relative;display:inline-block;outline:none;cursor:help;transition:color .35s}
.vv-name .w::after{content:attr(data-mean);position:absolute;left:4px;bottom:100%;margin-bottom:6px;font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#12241f;background:#e3bf70;padding:8px 12px;border-radius:99px;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.3,1);pointer-events:none}
.vv-name .w::before{content:"";position:absolute;left:2px;right:2px;bottom:.06em;height:2px;background:linear-gradient(90deg,#9fcf6a,#e3bf70);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.vv-name .w:hover,.vv-name .w:focus-visible,.vv-name .w.show{color:#f3e2b8}
.vv-name .w:hover::after,.vv-name .w:focus-visible::after,.vv-name .w.show::after{opacity:1;transform:none}
.vv-name .w:hover::before,.vv-name .w:focus-visible::before,.vv-name .w.show::before{transform:scaleX(1)}
.vv-name .stop{color:#9fcf6a}
.vv-sub{max-width:560px;margin:22px 0 0;font-size:18px;line-height:1.55;color:rgba(255,250,240,.86)}
.vv-hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:30px}
.vv-ghost{color:#fffaf0;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(227,191,112,.7);padding-bottom:6px}
.vv-ghost:hover{color:#e3bf70}
.vv-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:0 auto;padding:0;border-top:1px solid rgba(255,250,240,.22)}
.vv-facts div{padding:22px 0 26px;border-left:1px solid rgba(255,250,240,.16);padding-left:22px}
.vv-facts div:first-child{border-left:0;padding-left:0}
.vv-facts dt{font:500 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,250,240,.6)}
.vv-facts dd{margin:8px 0 0;font:300 34px/1 var(--display);letter-spacing:-.03em;color:#fffaf0}

/* ── 2 · journey: a sticky stage that follows the steps ── */
.vv-j-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;margin-top:40px;align-items:start}
.vv-stage{position:sticky;top:max(100px,calc(50vh - 290px))}
.vv-stage-frame{position:relative;aspect-ratio:4/3.2;border-radius:26px;overflow:hidden;background:#12241f;box-shadow:0 40px 90px -40px rgba(18,30,30,.5)}
.vv-stage-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 1.6s cubic-bezier(.2,.7,.3,1)}
.vv-stage-frame img.on{opacity:1;transform:none}
.vv-stage-bar{display:flex;align-items:center;gap:14px;margin-top:16px;font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--muted)}
.vv-stage-bar b{font:400 22px/1 var(--display);color:var(--forest-deep);letter-spacing:-.02em;min-width:2ch}
.vv-track{flex:1;height:2px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.vv-track i{display:block;height:100%;width:calc(var(--jp,0) * 100%);background:linear-gradient(90deg,var(--leaf),var(--gold));transition:width .2s linear}
.vv-steps{list-style:none;margin:0;padding:0}
.vv-steps li{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:20px 0 20px 28px;border-left:2px solid var(--line-soft);position:relative;transition:border-color .4s}
.vv-steps li::before{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--line-soft);transition:background .4s,border-color .4s,transform .4s}
.vv-steps li.on{border-left-color:var(--gold)}
.vv-steps li.on::before{background:var(--gold);border-color:var(--gold);transform:scale(1.25)}
.vv-steps .n{font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--leaf-text)}
.vv-steps h3{margin:10px 0 10px;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.035em;transition:color .4s}
.vv-steps p{margin:0;color:var(--muted);font-size:17px;line-height:1.6;max-width:42ch}
.vv-steps li:not(.on) h3{color:rgba(24,48,47,.35)}
.vv-steps li:not(.on) p{opacity:.55}
.vv-steps .m-only{display:none}

/* ── 3 · departments: four panels, one opens wide ── */
.vv-depts{display:flex;gap:12px;height:520px;margin-top:36px}
.vv-dept{all:unset;box-sizing:border-box;position:relative;flex:1;min-width:0;border-radius:24px;overflow:hidden;cursor:pointer;color:#fffaf0;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;transition:flex-grow .7s cubic-bezier(.2,.7,.3,1)}
.vv-dept.on{flex-grow:3.4}
.vv-dept .bg{position:absolute;inset:0;z-index:-2}
.vv-dept .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.vv-dept:hover .bg img,.vv-dept.on .bg img{transform:scale(1)}
.vv-dept:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vv-dept .n{position:absolute;top:24px;left:26px;font:500 11px/1 var(--mono);letter-spacing:.16em;color:#e3bf70}
.vv-dept .t{font:300 30px/1.08 var(--display);letter-spacing:-.03em;transition:font-size .5s}
.vv-dept:not(.on) .t{writing-mode:vertical-rl;transform:rotate(180deg);font-size:24px;align-self:flex-start;white-space:nowrap}
.vv-dept .d{display:block;max-width:46ch;margin-top:12px;font-size:15.5px;line-height:1.55;color:rgba(255,250,240,.86);opacity:0;max-height:0;overflow:hidden;transition:opacity .4s .15s}
.vv-dept.on .d{opacity:1;max-height:240px}
.vv-dept .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.vv-dept .tags em{color:#fffaf0;font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:99px;background:rgba(255,250,240,.12);border:1px solid rgba(255,250,240,.25);backdrop-filter:blur(6px)}

/* ── 4 · hotspots on a real photograph ── */
.vv-spots{display:grid;grid-template-columns:1.55fr .45fr;gap:28px;margin-top:36px;align-items:center}
.vv-spots-fig{position:relative;margin:0;border-radius:24px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(18,30,30,.45)}
.vv-spots-fig img{display:block;width:100%;height:auto}
.spot{all:unset;position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.spot span{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(194,145,47,.55),0 4px 14px rgba(0,0,0,.35);transition:transform .3s,background .3s}
.spot::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.85);animation:vvRing 2.6s infinite}
@keyframes vvRing{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.5);opacity:0}}
.spot:hover span,.spot.on span{transform:scale(1.25);background:var(--gold)}
.spot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vv-spot-list{list-style:none;margin:0;padding:0;counter-reset:s}
.vv-spot-list li{counter-increment:s;padding:14px 0 14px 40px;border-bottom:1px solid var(--line-soft);position:relative;cursor:pointer;transition:opacity .3s}
.vv-spot-list li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:16px;font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--muted)}
.vv-spot-list b{display:block;font:400 18px/1.2 var(--display);color:var(--forest-deep);letter-spacing:-.015em}
.vv-spot-list span{display:block;font-size:14px;color:var(--muted);line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s,opacity .35s,margin .3s}
.vv-spot-list li.on span{max-height:120px;opacity:1;margin-top:6px}
.vv-spot-list li.on::before{color:var(--gold)}
.vv-spot-list li:not(.on){opacity:.6}
.vv-spot-list li:hover{opacity:1}

/* ── 5 · film strip of the team ── */
.vv-people-head{display:flex;justify-content:space-between;align-items:end;gap:24px}
.vv-strip-nav{display:flex;gap:10px}
.vv-strip-nav button{all:unset;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line-soft);background:#fff;color:var(--forest-deep);font:400 18px/1 var(--display);transition:background .3s,color .3s}
.vv-strip-nav button:hover{background:var(--forest-deep);color:#fff}
.vv-strip-nav button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vv-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px max(24px,calc((100vw - 1200px)/2)) 10px;scrollbar-width:none;cursor:grab;outline:none}
.vv-strip::-webkit-scrollbar{display:none}
.vv-strip.drag{cursor:grabbing;scroll-snap-type:none}
.vv-strip.drag img{pointer-events:none}
.vv-strip figure{flex:0 0 auto;width:min(520px,78vw);aspect-ratio:16/10.5;margin:0;position:relative;border-radius:20px;overflow:hidden;scroll-snap-align:start;background:#12241f}
.vv-strip figure.tall{width:min(320px,60vw)}
.vv-strip img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1);user-select:none;-webkit-user-drag:none}
.vv-strip figure:hover img{transform:scale(1.04)}
.vv-strip figcaption{position:absolute;left:16px;bottom:14px;font:600 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fffaf0;background:rgba(12,26,24,.55);backdrop-filter:blur(8px);padding:7px 11px;border-radius:99px}

/* ── 6 · the name ── */
.vv-mark-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.vv-mark figure{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:1;box-shadow:0 30px 70px -40px rgba(18,30,30,.4)}
.vv-mark figure img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.vv-mark h2{font-size:clamp(36px,4.6vw,64px)}

/* ── 7 · publication filter ── */
.vv-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.vv-filter button{all:unset;cursor:pointer;padding:10px 14px;border-radius:99px;border:1px solid var(--line-soft);background:#fff;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--forest-deep);transition:background .3s,color .3s,border-color .3s}
.vv-filter button small{margin-left:6px;opacity:.6;font-size:10px}
.vv-filter button[aria-pressed="true"]{background:var(--forest-deep);color:#fff;border-color:var(--forest-deep)}
.vv-filter button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vv-record li{transition:opacity .35s,transform .35s}
.vv-record li.out{display:none}
.vv-record li.in-now{animation:vvIn .45s cubic-bezier(.2,.7,.3,1)}
@keyframes vvIn{from{opacity:0;transform:translateY(10px)}}

/* ── responsive ── */
@media (max-width:980px){
  .vv-hero{min-height:auto;padding-top:130px}
  .vv-name{white-space:normal}
  .vv-facts{grid-template-columns:1fr 1fr}
  .vv-facts div:nth-child(3){border-left:0;padding-left:0}
  .vv-j-grid{grid-template-columns:1fr;gap:0}
  .vv-stage{display:none}
  .vv-steps li{min-height:0;padding:0 0 36px 24px}
  .vv-steps li h3,.vv-steps li p{color:inherit;opacity:1}
  .vv-steps li:not(.on) h3{color:var(--forest-deep)}
  .vv-steps li:not(.on) p{opacity:1}
  .vv-steps .m-only{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;margin-bottom:16px}
  .vv-depts{flex-direction:column;height:auto}
  .vv-dept{min-height:96px;flex:none}
  .vv-dept.on{min-height:360px}
  .vv-dept:not(.on) .t{writing-mode:horizontal-tb;transform:none;align-self:auto}
  .vv-spots{grid-template-columns:1fr}
  .vv-mark-in{grid-template-columns:1fr;gap:28px}
  .vv-mark figure{max-width:420px}
}
@media (max-width:560px){
  .vv-facts dd{font-size:26px}
  .vv-people-head{flex-direction:column;align-items:start}
}
@media (prefers-reduced-motion:reduce){
  .vv-hero-media img,.vv-kicker .dot,.spot::before{animation:none}
}

/* departments: a light cream wash over the photo (cream #f6ecda), a little fuller at the
   bottom where the text sits; text in the site's dark green */
.vv-dept{color:var(--forest-deep)}
.vv-dept::before{content:"";position:absolute;inset:0;z-index:-1;transition:background .5s;
  background:linear-gradient(0deg,rgba(251,245,234,.9) 0%,rgba(246,236,218,.62) 30%,rgba(246,236,218,.26) 62%,rgba(246,236,218,.14) 100%)}
.vv-dept:not(.on)::before{background:linear-gradient(0deg,rgba(251,245,234,.86) 0%,rgba(246,236,218,.5) 45%,rgba(246,236,218,.28) 100%)}
.vv-dept .n{color:#8a6a24}
.vv-dept .t{color:var(--forest-deep)}
.vv-dept .d{color:#3c4a40}
.vv-dept .tags em{color:var(--forest-deep);background:rgba(255,253,248,.7);border-color:rgba(194,145,47,.45)}

/* ── quality control: the instruments, as a bento of the QC lab (22 Oct 2026). A light scan passes over a
   picture when it is pointed at; captions name the instrument. ── */
.qcg-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(64px,6.2vw,92px);gap:16px;margin-top:40px}
.qcg{position:relative;margin:0;overflow:hidden;border-radius:26px;background:#dfe5df;isolation:isolate;box-shadow:0 30px 60px -36px rgba(19,36,27,.5)}
.qcg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.3,1),filter .6s}
.qcg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 55%,rgba(10,26,22,.55));pointer-events:none}
.qcg::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(153,198,88,.22) 60%,rgba(212,228,141,.55) 98%,transparent);opacity:0}
.qcg:hover img{transform:scale(1.05);filter:saturate(1.1) contrast(1.04)}
.qcg:hover::after{animation:qcScan 1.6s cubic-bezier(.4,0,.2,1) 1}
.qcg figcaption{position:absolute;left:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:8px 14px 8px 12px;border-radius:999px;background:rgba(255,253,248,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:500 12.5px/1.25 var(--body);color:var(--forest-deep)}
.qcg figcaption i{flex:none;width:8px;height:8px;border-radius:50%;background:#7fae45;box-shadow:0 0 0 0 rgba(127,174,69,.5);animation:qcPulse 2.4s ease-out infinite}
.qcg.g1{grid-column:span 7;grid-row:span 5}
.qcg.g2{grid-column:span 5;grid-row:span 3}
.qcg.g3{grid-column:span 5;grid-row:span 2}
.qcg.g4{grid-column:span 4;grid-row:span 3}
.qcg.g5{grid-column:span 4;grid-row:span 3}
.qcg.g6{grid-column:span 4;grid-row:span 3}
@keyframes qcScan{0%{top:-30%;opacity:1}100%{top:100%;opacity:1}}
@keyframes qcPulse{70%{box-shadow:0 0 0 8px rgba(127,174,69,0)}100%{box-shadow:0 0 0 0 rgba(127,174,69,0)}}
@media (max-width:900px){
  .qcg-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:78px;gap:12px}
  .qcg.g1{grid-column:span 6;grid-row:span 4}
  .qcg.g2,.qcg.g3{grid-column:span 6;grid-row:span 3}
  .qcg.g4,.qcg.g5{grid-column:span 3;grid-row:span 3}
  .qcg.g6{grid-column:span 6;grid-row:span 3}
  .qcg figcaption{font-size:11.5px;left:10px;bottom:10px;max-width:calc(100% - 20px)}
}
@media (prefers-reduced-motion:reduce){.qcg figcaption i{animation:none}.qcg:hover::after{animation:none}}