/* ============================================================
   PCL — "Crystal Sky · Elevate"  enhancement layer
   Premium pharmaceutical feel: glass materials, depth,
   light, animated hero, richer data band, scroll motion.
   Same palette & content. Loaded AFTER style.css.
   ============================================================ */
:root{
  --el-navy:#0A1444;
  --el-glass-border:linear-gradient(150deg,rgba(255,255,255,.9),rgba(93,207,237,.35) 40%,rgba(13,27,94,.12));
  --el-sh-lift:0 2px 6px rgba(13,27,94,.05),0 18px 44px rgba(13,27,94,.10);
  --el-sh-deep:0 8px 20px rgba(10,20,68,.10),0 36px 70px rgba(10,20,68,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{text-wrap:balance}p{text-wrap:pretty}

/* ---------- scroll progress bar ---------- */
.el-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;
  background:linear-gradient(90deg,var(--cyan-l),var(--cyan),var(--cyan-d));
  box-shadow:0 0 12px rgba(0,174,219,.6);transition:width .08s linear}

/* ============================================================
   HERO  — animated aurora + glass shards + 3D crystal
   ============================================================ */
.hero{isolation:isolate}
/* aurora mesh background (injected .el-aurora) */
.el-aurora{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;filter:blur(60px);opacity:.85}
.el-aurora span{position:absolute;border-radius:50%;mix-blend-mode:multiply;animation:elFloat 18s var(--ease) infinite alternate}
.el-aurora .a1{width:48vw;height:48vw;left:-6%;top:-12%;background:radial-gradient(circle at 50% 50%,rgba(93,207,237,.55),transparent 62%)}
.el-aurora .a2{width:42vw;height:42vw;right:-8%;top:2%;background:radial-gradient(circle at 50% 50%,rgba(0,174,219,.40),transparent 62%);animation-delay:-6s}
.el-aurora .a3{width:38vw;height:38vw;left:24%;bottom:-22%;background:radial-gradient(circle at 50% 50%,rgba(26,45,122,.28),transparent 62%);animation-delay:-11s}
@keyframes elFloat{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,4%,0) scale(1.08)}100%{transform:translate3d(-4%,-3%,0) scale(.96)}}

/* fine grid sheen overlay */
.hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(13,27,94,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(13,27,94,.035) 1px,transparent 1px);
  background-size:46px 46px;mask:radial-gradient(120% 90% at 50% 30%,#000 35%,transparent 80%)}

.hero-c{z-index:3}
/* glass shards */
.el-shard{position:absolute;z-index:1;border-radius:16px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.55),rgba(255,255,255,.12));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 40px rgba(13,27,94,.10),inset 0 1px 0 rgba(255,255,255,.8);
  will-change:transform}
.el-shard.s1{width:120px;height:120px;left:7%;top:22%;transform:rotate(18deg);animation:elBob 9s var(--ease) infinite alternate}
.el-shard.s2{width:74px;height:74px;right:11%;top:30%;transform:rotate(-12deg);animation:elBob 11s var(--ease) infinite alternate-reverse}
.el-shard.s3{width:50px;height:50px;right:24%;bottom:24%;transform:rotate(24deg);animation:elBob 7.5s var(--ease) infinite alternate}
@keyframes elBob{0%{transform:translateY(0) rotate(var(--r,0deg))}100%{transform:translateY(-22px) rotate(calc(var(--r,0deg) + 8deg))}}

/* 3D faceted crystal centerpiece — large, centered, low-opacity backdrop */
.el-gem-wrap{position:absolute;z-index:0;top:50%;left:50%;right:auto;
  transform:translate(-50%,-50%) scale(2.15);transform-origin:center;
  width:300px;height:380px;pointer-events:none;perspective:1100px;opacity:.16}
.el-gem-glow{position:absolute;inset:8% 14%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,174,219,.45),rgba(93,207,237,.12) 55%,transparent 72%);filter:blur(18px)}
.el-gem{position:absolute;inset:0;margin:auto;width:170px;height:300px;transform-style:preserve-3d;
  animation:elSpin 22s linear infinite}
.el-facet{position:absolute;left:50%;top:50%;width:150px;height:300px;margin:-150px 0 0 -75px;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(93,207,237,.55) 35%,rgba(0,144,188,.65) 70%,rgba(13,27,94,.55));
  border:1px solid rgba(255,255,255,.4);opacity:.78;backface-visibility:visible;
  box-shadow:inset 0 0 30px rgba(255,255,255,.35)}
@keyframes elSpin{to{transform:rotateY(360deg)}}
.el-gem-reflection{position:absolute;left:0;right:0;top:64%;height:34%;margin:auto;width:150px;
  background:linear-gradient(to bottom,rgba(0,144,188,.22),transparent 70%);
  filter:blur(7px);transform:scaleY(-1);opacity:.5;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

/* ---------- hero text polish ---------- */
.hero-pill{background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 6px 20px rgba(13,27,94,.10)}
h1.hh{letter-spacing:-.03em}
h1.hh .grad{background:linear-gradient(115deg,var(--cyan-l),var(--cyan) 35%,var(--navy));-webkit-background-clip:text;background-clip:text}
.hp{color:var(--text-m)}

/* ---------- hero stat band → premium data band ---------- */
.hstats{background:rgba(255,255,255,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.85);box-shadow:var(--el-sh-deep);border-radius:20px;position:relative;z-index:3}
.hstat{position:relative;overflow:hidden}
.hstat::after{content:'';position:absolute;left:24px;right:24px;bottom:16px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.hstat.el-in::after{transform:scaleX(1)}
.hstat:hover{background:rgba(240,250,254,.6)}
.hsn{background:linear-gradient(120deg,var(--cyan-d),var(--navy));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ============================================================
   GLASS CARDS — services, certs, news, perks, locations, values
   ============================================================ */
.sc,.cc,.ncard,.perk,.loc-card,.av{position:relative;background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid transparent;border-radius:18px;
  box-shadow:var(--el-sh-lift);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
/* gradient hairline border via mask */
.sc::after,.cc::after,.ncard::after,.perk::after,.loc-card::after,.av::after{content:'';position:absolute;inset:0;
  border-radius:inherit;padding:1px;background:var(--el-glass-border);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.sc:hover,.cc:hover,.ncard:hover,.perk:hover,.loc-card:hover,.av:hover{
  transform:translateY(-6px);box-shadow:var(--el-sh-deep)}
/* specular sweep on service cards */
.sc{overflow:hidden}
.sc>*{position:relative;z-index:1}
.sc .el-sheen{position:absolute;top:0;left:-60%;width:50%;height:100%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
  transition:left .7s var(--ease)}
.sc:hover .el-sheen{left:130%}
.sc-ico,.perk-ic,.loc-icon{box-shadow:0 8px 22px rgba(0,144,188,.28)}

/* tilt support */
.el-tilt{transform-style:preserve-3d;will-change:transform}

/* ============================================================
   Deepen dark panels (about visual, cta band, news header)
   ============================================================ */
.aimg,.svc-visual,.cwrap,.apply-left,.cta-band{
  background:linear-gradient(145deg,var(--el-navy) 0%,var(--navy) 45%,var(--cyan-d) 135%)!important}
.ni{background:linear-gradient(145deg,var(--el-navy),var(--cyan-d))}

/* ---------- buttons: shine ---------- */
.bc{position:relative;overflow:hidden}
.bc::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .6s var(--ease)}
.bc:hover::after{left:140%}

/* ---------- reveal: richer, supports stagger ---------- */
.el-reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.el-reveal.el-in{opacity:1;transform:none}

/* ---------- section heading accent rule ---------- */
.eyebrow::before,.page-eyebrow::before{transition:width .5s var(--ease)}

@media (max-width:880px){
  .el-gem-wrap{display:none}
  .el-shard{display:none}
}
@media (prefers-reduced-motion:reduce){
  .el-gem,.el-aurora span,.el-shard{animation:none!important}
  .el-reveal{opacity:1!important;transform:none!important}
}

/* ============================================================
   NAV — guaranteed fixed on scroll
   ============================================================ */
nav#nav{position:fixed!important;top:0;left:0;right:0;z-index:2000}
body{padding-top:0}

/* ============================================================
   DROPDOWN MENUS — cleaner alignment (Analyze & R&D)
   Anchor to the trigger's left edge, tidy aligned rows.
   ============================================================ */
.has-sub .submenu{
  left:auto;right:0;transform:translateY(8px);z-index:2100;
  min-width:max-content;width:max-content;padding:8px;display:flex;flex-direction:column;gap:2px}
.has-sub:hover .submenu{transform:translateY(0)}
.submenu li{width:100%}
.submenu li a{
  display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:center;column-gap:11px;
  white-space:nowrap;text-align:right;
  padding:10px 14px 10px 18px;border-radius:10px;line-height:1.2}
.submenu li a::before{
  content:'';width:7px;height:7px;border-radius:2px;transform:rotate(45deg);flex:none;
  background:var(--cyan);opacity:.55;transition:opacity .2s,transform .2s}
.submenu li a:hover::before{opacity:1;transform:rotate(45deg) scale(1.15)}
.submenu .sm-title{font-size:13.5px;font-weight:600;color:var(--navy);letter-spacing:.005em}
.submenu .sm-desc{display:none}

/* ============================================================
   Anchor jump offset (fixed nav) + button row centering on heroes
   ============================================================ */
#apply,#message,#controlled,#hpapi{scroll-margin-top:96px}
.page-hero .hbtns{justify-content:flex-start}

/* highlighted "Controlled Substances" entries (dropdown + quicknav) */
.submenu li a.sm-feat .sm-title{color:var(--cyan-d)}
.submenu li a.sm-feat::before{opacity:1;background:linear-gradient(135deg,var(--cyan-l),var(--cyan-d));box-shadow:0 0 8px rgba(0,174,219,.6)}
.quicknav a.qn-feat{border-color:var(--cyan);color:var(--cyan-d);background:var(--ice);font-weight:700}
.quicknav a.qn-feat::before{content:'\f3ed';font-family:'Font Awesome 6 Free';font-weight:900;margin-right:7px;font-size:11px}

/* cGMP block — emphasized treatment */
.svc-block.svc-featured .svc-tag{position:relative;background:linear-gradient(135deg,var(--cyan),var(--cyan-d));
  color:#fff;border:none;box-shadow:0 6px 18px rgba(0,144,188,.3);animation:pclTagGlow 2.8s var(--ease) infinite}
.svc-block.svc-featured .svc-tag i{color:#fff}
@keyframes pclTagGlow{0%,100%{box-shadow:0 6px 18px rgba(0,144,188,.3)}50%{box-shadow:0 6px 26px rgba(0,174,219,.6)}}
.svc-block.svc-featured .svc-content h2{position:relative;display:inline-block}
.svc-block.svc-featured .svc-content h2::after{content:'';position:absolute;left:0;bottom:-6px;height:3px;width:64px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),transparent)}

/* ============================================================
   CONTACT — meeting scheduler panel (CPHI / DCAT)
   ============================================================ */
.meeting-sched{background:var(--sky-wash);border:1px solid var(--border2);border-radius:14px;
  padding:18px 18px 6px;margin-top:4px;animation:schedIn .35s var(--ease)}
@keyframes schedIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.meeting-sched>label{display:flex;align-items:center;gap:9px;color:var(--cyan-d);font-size:12px;letter-spacing:.06em}
.meeting-sched>label i{color:var(--cyan-d)}
.meeting-sched .sched-hint{font-size:12.5px;color:var(--text-m);line-height:1.55;margin:6px 0 14px}
.meeting-sched .sub{font-size:10.5px;letter-spacing:.1em;color:var(--text-l)}
.meeting-sched input[type="date"]{color-scheme:light;cursor:pointer}

/* ============================================================
   FEATURED NEWS CARD — CPHI Milan
   ============================================================ */
.ncard-feat{grid-column:1 / -1;display:grid;grid-template-columns:300px 1fr;align-items:stretch;overflow:hidden}
.ncard-feat .ni{height:100%;min-height:230px;position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--el-navy,#0A1444),var(--cyan-d))}
.ncard-feat .ni svg{width:120px;height:120px}
.ni-flag{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.02em;padding:7px 13px;border-radius:30px;backdrop-filter:blur(6px)}
.ni-flag i{color:var(--cyan-l)}
.ncard-feat .nb{padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.ncard-feat .nb h3{font-size:24px;margin:8px 0 10px}
.ncard-feat .nb p{line-height:1.7}
.ncard-feat .nb p strong{color:var(--cyan-d);font-weight:700}
.news-cta{align-self:flex-start;margin-top:22px}
@media (max-width:760px){
  .ncard-feat{grid-template-columns:1fr}
  .ncard-feat .ni{min-height:170px}
}

/* ============================================================
   HUMAN VERIFICATION widget ("Essere Umano")
   ============================================================ */
.pcl-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}
.human-check{margin:4px 0 18px}
.hc-panel{background:var(--sky-wash);border:1px solid var(--border2);border-radius:14px;padding:16px 18px}
.hc-head{display:flex;align-items:center;gap:9px;color:var(--cyan-d);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.hc-head i{color:var(--cyan-d)}
.hc-row{margin-top:12px}
.hc-check{display:flex;align-items:center;gap:12px;cursor:pointer;margin-top:0}
.hc-check .hc-cb{position:absolute;opacity:0;width:0;height:0}
.hc-box{width:26px;height:26px;flex:none;border-radius:7px;border:2px solid var(--border2);background:#fff;
  display:flex;align-items:center;justify-content:center;transition:all .2s}
.hc-box i{color:#fff;font-size:13px;opacity:0;transform:scale(.5);transition:all .2s}
.hc-check .hc-cb:checked + .hc-box{background:var(--cyan-d);border-color:var(--cyan-d)}
.hc-check .hc-cb:checked + .hc-box i{opacity:1;transform:scale(1)}
.hc-txt{font-size:14px;color:var(--text);font-weight:500}
.hc-track{position:relative;height:46px;border-radius:24px;background:#fff;border:1px solid var(--border2);overflow:hidden;user-select:none}
.hc-fill{position:absolute;left:0;top:0;height:100%;width:42px;background:linear-gradient(90deg,var(--cyan-l),var(--cyan));opacity:.35}
.hc-slabel{position:absolute;left:0;right:0;top:0;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--text-l);letter-spacing:.04em;pointer-events:none}
.hc-slid .hc-slabel{color:var(--cyan-d);font-weight:600}
.hc-knob{position:absolute;left:0;top:2px;width:42px;height:40px;border:none;border-radius:21px;cursor:grab;
  background:var(--cyan-d);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,144,188,.4)}
.hc-knob:active{cursor:grabbing}
.hc-math{display:flex;align-items:center;gap:12px}
.hc-q{font-size:14px;color:var(--text)}.hc-q strong{color:var(--cyan-d)}
.hc-ans{width:84px;padding:9px 12px;border:1px solid var(--border2);border-radius:10px;font-size:15px;font-weight:600;text-align:center}
.hc-ans.hc-good{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,174,219,.14)}
.hc-ans.hc-bad{border-color:#e2574c}
.hc-ok{margin-top:14px;display:flex;align-items:center;gap:8px;color:#1F8A5B;font-weight:600;font-size:13.5px}
.hc-ok i{color:#1F8A5B}
.hc-verified .hc-panel{border-color:var(--cyan);background:#f1fbf6}
.hc-shake{animation:hcShake .45s}
@keyframes hcShake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-5px)}}
html[dir="rtl"] .hc-knob{left:auto;right:0}

/* ============================================================
   SAMPLE SUBMISSION form
   ============================================================ */
.fg-hint{display:block;font-size:11.5px;color:var(--text-l);margin-top:6px;letter-spacing:.01em}
.fg-group{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-d);
  margin:24px 0 6px;padding-top:18px;border-top:1px solid var(--border2)}
.fg-opt{color:var(--text-l);font-weight:500;letter-spacing:.02em;text-transform:none;font-size:11.5px}
.quote-code{display:flex;align-items:stretch;gap:0;border:1px solid var(--border2);border-radius:11px;overflow:hidden;background:#fff}
.quote-code input{border:none!important;border-radius:0!important;box-shadow:none!important;background:transparent;margin:0}
.quote-code #ss_qnum{flex:0 0 38%;text-align:right;font-weight:600}
.quote-code #ss_qyear{flex:0 0 30%;font-weight:600}
.quote-code .qc-fixed{display:flex;align-items:center;padding:0 6px;background:var(--sky-wash);color:var(--cyan-d);
  font-weight:700;font-size:15px;letter-spacing:.02em;border-left:1px solid var(--border2);border-right:1px solid var(--border2)}
.quote-code input:focus{background:var(--ice)}

.sample-table{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.st-head,.st-row{display:grid;grid-template-columns:54px 1fr 1.3fr 1fr 34px;gap:8px;align-items:center}
.st-head{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-l);font-weight:600;padding:0 2px}
.st-row input{margin:0}
.st-del{width:34px;height:38px;border:1px solid var(--border2);background:#fff;border-radius:9px;color:var(--text-l);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}
.st-del:hover{border-color:#e2574c;color:#e2574c;background:#fff5f4}
.st-add{margin-top:12px;display:inline-flex;align-items:center;gap:8px;background:var(--sky-wash);color:var(--cyan-d);
  border:1px dashed var(--border2);border-radius:10px;padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:'Inter',sans-serif;transition:all .18s}
.st-add:hover{border-color:var(--cyan);background:var(--ice)}
.fsbtn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}

/* e-signature opt-in toggle */
.esign-toggle{display:flex;align-items:flex-start;gap:13px;cursor:pointer;background:var(--sky-wash);
  border:1px solid var(--border2);border-radius:14px;padding:16px 18px;margin:4px 0 16px}
.esign-toggle input{position:absolute;opacity:0;width:0;height:0}
.esign-toggle .et-box{width:24px;height:24px;flex:none;border-radius:7px;border:2px solid var(--border2);background:#fff;
  display:flex;align-items:center;justify-content:center;transition:all .2s;margin-top:2px}
.esign-toggle .et-box i{color:#fff;font-size:12px;opacity:0;transform:scale(.5);transition:all .2s}
.esign-toggle input:checked + .et-box{background:var(--cyan-d);border-color:var(--cyan-d)}
.esign-toggle input:checked + .et-box i{opacity:1;transform:scale(1)}
.esign-toggle .et-txt{display:flex;flex-direction:column;gap:3px}
.esign-toggle .et-txt strong{font-size:13.5px;color:var(--text);font-weight:600}
.esign-toggle .et-txt span{font-size:12px;color:var(--text-m);line-height:1.5}
.esign-toggle .et-txt b{color:var(--cyan-d)}

/* e-signature note */
.esign-note{display:flex;gap:13px;align-items:flex-start;background:var(--sky-wash);border:1px solid var(--border2);
  border-radius:12px;padding:14px 16px;margin:4px 0 16px}
.esign-note>i{color:var(--cyan-d);font-size:18px;margin-top:2px;flex:none}
.esign-note strong{display:block;font-size:13px;color:var(--navy);margin-bottom:3px}
.esign-note span{font-size:12.5px;color:var(--text-m);line-height:1.55}
@media (max-width:680px){
  .st-head{display:none}
  .st-row{grid-template-columns:1fr 1fr;gap:6px;padding:10px;border:1px solid var(--border2);border-radius:10px}
  .st-row .st-analysis{grid-column:1 / -1}.st-row .st-note{grid-column:1 / 2}.st-row .st-del{grid-column:2;justify-self:end}
}

/* ============================================================
   CONTACT — stylized "global reach" graphic (map replacement)
   ============================================================ */
.reach-wrap{background:linear-gradient(145deg,var(--el-navy) 0%,var(--navy) 55%,var(--cyan-d) 145%)!important;
  border:1px solid var(--border2);border-radius:20px;overflow:hidden;padding:0!important;height:auto!important;
  box-shadow:var(--el-sh-deep);position:relative}
.reach-wrap::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:46px 46px;mask:radial-gradient(120% 100% at 48% 50%,#000,transparent 78%);pointer-events:none}
.reach-svg{display:block;width:100%;height:auto;position:relative;z-index:1}
/* flowing arrows from the hub */
.reach-arc{stroke-dasharray:7 9;animation:reachFlow 1.4s linear infinite;opacity:.85}
.reach-arc:nth-child(2){animation-duration:1.7s}.reach-arc:nth-child(3){animation-duration:1.2s}
.reach-arc:nth-child(4){animation-duration:1.9s}.reach-arc:nth-child(5){animation-duration:1.5s}
.reach-arc:nth-child(6){animation-duration:2.1s}.reach-arc:nth-child(7){animation-duration:1.6s}
.reach-arc:nth-child(8){animation-duration:1.8s}.reach-arc:nth-child(9){animation-duration:1.3s}
@keyframes reachFlow{to{stroke-dashoffset:-16}}
/* destination dots pulse */
.reach-dot{fill:#5DCFED;transform-box:fill-box;transform-origin:center;animation:reachDot 2.4s var(--ease) infinite}
.reach-dests g:nth-child(2) .reach-dot{animation-delay:.3s}
.reach-dests g:nth-child(3) .reach-dot{animation-delay:.6s}
.reach-dests g:nth-child(4) .reach-dot{animation-delay:.9s}
.reach-dests g:nth-child(5) .reach-dot{animation-delay:1.2s}
.reach-dests g:nth-child(6) .reach-dot{animation-delay:1.5s}
.reach-dests g:nth-child(7) .reach-dot{animation-delay:1.8s}
.reach-dests g:nth-child(8) .reach-dot{animation-delay:2.1s}
.reach-dests g:nth-child(9) .reach-dot{animation-delay:.9s}
@keyframes reachDot{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.35);opacity:1}}
/* hub pulse rings */
.reach-pulse{transform-box:view-box;transform-origin:480px 232px;opacity:0;animation:reachRing 3s ease-out infinite}
.reach-pulse.rp2{animation-delay:1.5s}
@keyframes reachRing{0%{transform:scale(.6);opacity:.7}100%{transform:scale(4);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .reach-arc,.reach-dot,.reach-pulse{animation:none!important}
}

/* ============================================================
   FOOTER — brand sign-off + company details ("payoff")
   ============================================================ */
.fb p{color:rgba(255,255,255,.55)}
footer .flogo img{opacity:1;filter:none;height:46px}
.fb .fb-name{color:#fff;font-weight:600;font-size:14px;letter-spacing:.005em;
  margin:2px 0 16px;padding-top:16px;position:relative;display:inline-block}
.fb .fb-name::before{content:'';position:absolute;top:0;left:0;width:40px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),transparent)}
.fb-details{display:flex;flex-direction:column;gap:13px;margin-bottom:22px;max-width:360px}
.fb-row{display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.62)}
.fb-row i{width:30px;height:30px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--cyan-l);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);margin-top:1px}
.fb-row a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s}
.fb-row a:hover{color:#fff}
.fb-lbl{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:2px;font-weight:600}

/* footer link columns — refined headings + interactive links */
.fc h4{position:relative;display:inline-flex;align-items:center;gap:9px;
  color:rgba(255,255,255,.92);letter-spacing:.2em;font-weight:700;padding-bottom:4px}
.fc h4::before{content:'';width:7px;height:7px;border-radius:2px;transform:rotate(45deg);flex:none;
  background:linear-gradient(135deg,var(--cyan-l),var(--cyan-d));box-shadow:0 0 8px rgba(0,174,219,.5)}
.fc ul li a{position:relative;display:inline-flex;align-items:center;gap:0;
  color:rgba(255,255,255,.6);font-size:13.5px;padding:6px 0;width:auto;
  transition:color .25s var(--ease),gap .25s var(--ease),transform .25s var(--ease)}
.fc ul li a::before{content:'\2192';font-family:'Font Awesome 6 Free',sans-serif;font-weight:900;
  width:0;opacity:0;overflow:hidden;color:var(--cyan-l);font-size:12px;
  transition:width .25s var(--ease),opacity .25s var(--ease),margin .25s var(--ease)}
.fc ul li a:hover{color:#fff}
.fc ul li a:hover::before{width:14px;opacity:1;margin-right:8px}

/* ============================================================
   LANGUAGE SELECTOR (full-site translate)
   ============================================================ */
.nlang{position:relative}
.lang-select{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--text-m);
  background:#fff;padding:8px 14px;border:1.5px solid var(--border2);border-radius:30px;
  transition:all .2s var(--ease);font-family:'Inter',sans-serif}
.lang-btn i:first-child{font-size:12px;color:var(--cyan-d)}
.lang-btn:hover{border-color:var(--cyan);color:var(--cyan-d);background:var(--ice)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;list-style:none;margin:0;padding:7px;
  min-width:170px;background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 16px 44px rgba(13,27,94,.18);display:none;z-index:2200}
.lang-select.open .lang-menu{display:block}
.lang-menu li{padding:9px 14px;border-radius:9px;font-size:13.5px;color:var(--text);cursor:pointer;
  font-weight:500;transition:background .15s,color .15s;white-space:nowrap}
.lang-menu li:hover{background:var(--ice);color:var(--cyan-d)}
.lang-menu li[aria-current="true"]{background:var(--sky-wash);color:var(--cyan-d);font-weight:700}
/* hide Google Translate's injected chrome */
.goog-te-banner-frame,.skiptranslate{display:none!important}
body{top:0!important}
#goog-gt-tt,.goog-te-balloon-frame{display:none!important}
font[style]{background:none!important;box-shadow:none!important}
/* RTL support (Arabic) */
html[dir="rtl"] .nlinks{flex-direction:row-reverse}
html[dir="rtl"] .lang-menu{right:auto;left:0}
@media (max-width:980px){
  .nlang{margin-top:6px}
  .lang-menu{right:auto;left:0}
}

/* ============================================================
   ICON ANIMATIONS — line illustrations (services, news, lab)
   Draw-on-reveal + pulsing accent dots + gentle float
   ============================================================ */
/* draw the stroked shapes when their card scrolls into view */
.svc-visual svg path,.svc-visual svg polygon,.svc-visual svg line,.svc-visual svg rect,
.ni svg path,.ni svg polygon,.ni svg line,.ni svg rect,
.lab-illustration svg path,.lab-illustration svg polygon,.lab-illustration svg line,.lab-illustration svg rect{
  stroke-dasharray:760;stroke-dashoffset:760}
.svc-block.el-in .svc-visual svg path,.svc-block.el-in .svc-visual svg polygon,
.svc-block.el-in .svc-visual svg line,.svc-block.el-in .svc-visual svg rect,
.ncard.el-in .ni svg path,.ncard.el-in .ni svg polygon,.ncard.el-in .ni svg line,.ncard.el-in .ni svg rect,
.aimg.el-in .lab-illustration svg path,.aimg.el-in .lab-illustration svg polygon,
.aimg.el-in .lab-illustration svg line,.aimg.el-in .lab-illustration svg rect{
  animation:pclDraw 1.5s var(--ease) forwards}
@keyframes pclDraw{to{stroke-dashoffset:0}}

/* ---- liquid bubbles: white droplets rise & fade inside the glassware ---- */
.svc-visual svg circle[fill="#ffffff"],.ni svg circle[fill="#ffffff"],.lab-illustration svg circle[fill="#ffffff"]{
  transform-box:fill-box;transform-origin:center;animation:pclBubble 3.4s var(--ease) infinite}
.svc-visual svg circle[fill="#ffffff"]:nth-of-type(2),.lab-illustration svg circle[fill="#ffffff"]:nth-of-type(2){animation-delay:.9s}
.svc-visual svg circle[fill="#ffffff"]:nth-of-type(3),.lab-illustration svg circle[fill="#ffffff"]:nth-of-type(3){animation-delay:1.8s}
.svc-visual svg circle[fill="#ffffff"]:nth-of-type(4),.lab-illustration svg circle[fill="#ffffff"]:nth-of-type(4){animation-delay:2.5s}
@keyframes pclBubble{0%{transform:translateY(5px) scale(.7);opacity:0}25%{opacity:.9}100%{transform:translateY(-15px) scale(1);opacity:0}}

/* ---- molecule atoms: active sites gently pulse & glow ---- */
.svc-visual svg circle[fill="#5DCFED"],.ni svg circle[fill="#5DCFED"],.lab-illustration svg circle[fill="#5DCFED"]{
  transform-box:fill-box;transform-origin:center;animation:pclAtom 2.6s var(--ease) infinite}
.svc-visual svg circle[fill="#5DCFED"]:nth-of-type(2),.lab-illustration svg circle[fill="#5DCFED"]:nth-of-type(2){animation-delay:.6s}
.svc-visual svg circle[fill="#5DCFED"]:nth-of-type(3),.lab-illustration svg circle[fill="#5DCFED"]:nth-of-type(3){animation-delay:1.2s}
@keyframes pclAtom{0%,100%{opacity:.55;transform:scale(.82)}50%{opacity:1;transform:scale(1.3)}}

/* ---- liquid body: quiet level shimmer (no unnatural motion) ---- */
.svc-visual svg [fill="#4FC3E8"],.svc-visual svg [fill^="url(#liq"],
.ni svg [fill^="url(#liq"],.lab-illustration svg [fill^="url(#liq"]{
  animation:pclLiquid 4.5s var(--ease) infinite}
@keyframes pclLiquid{0%,100%{opacity:.82}50%{opacity:1}}

/* ambient light breathing behind the apparatus (glassware itself stays still) */
.svc-visual .glow{animation:pclGlow 5.5s var(--ease) infinite}
@keyframes pclGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}

/* hover: brighten the line work */
.svc-visual:hover svg [stroke],.ncard:hover .ni svg [stroke]{stroke-opacity:1;transition:stroke-opacity .4s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .svc-visual svg *,.ni svg *,.lab-illustration svg *,.svc-visual .glow{animation:none!important}
  .svc-visual svg *,.ni svg *,.lab-illustration svg *{stroke-dashoffset:0!important}
}

/* ============================================================
   HPAPI / OEB5 — containment emphasis band + stylized loop
   ============================================================ */
.hpapi{background:linear-gradient(145deg,var(--el-navy) 0%,var(--navy) 48%,#06214a 130%);
  position:relative;overflow:hidden}
.hpapi::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;mask:radial-gradient(110% 90% at 80% 50%,#000,transparent 75%);pointer-events:none}
.hpapi-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,80px);
  align-items:center;max-width:1180px;margin:0 auto}
.hpapi-text h2{font-family:'Sora',sans-serif;color:#fff;font-size:clamp(30px,3.6vw,46px);font-weight:800;
  letter-spacing:-.02em;line-height:1.1;margin:14px 0 18px}
.hpapi-text p{color:rgba(255,255,255,.66);font-size:15.5px;line-height:1.8;max-width:540px}
.hpapi-text strong{color:var(--cyan-l);font-weight:700}
.hpapi-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hpapi-chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:30px;padding:9px 16px}
.hpapi-chip i{color:var(--cyan-l);font-size:12px}
.hpapi-visual{display:flex;justify-content:center;align-items:center}
.hpapi-svg{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 16px 50px rgba(0,174,219,.25))}

/* expanding containment rings */
.hp-ring{transform-box:view-box;transform-origin:210px 210px;opacity:0;animation:hpRing 4.2s ease-out infinite}
.hp-r2{animation-delay:1.4s}.hp-r3{animation-delay:2.8s}
@keyframes hpRing{0%{transform:scale(.5);opacity:0}15%{opacity:.7}100%{transform:scale(2.25);opacity:0}}
/* slow orbit boundary + orbiters */
.hp-orbit{transform-box:view-box;transform-origin:210px 210px;animation:hpSpin 26s linear infinite}
.hp-orbiters{transform-box:view-box;transform-origin:210px 210px;animation:hpSpin 16s linear infinite}
.hp-orbiters circle{transform-box:fill-box;transform-origin:center;animation:hpPulse 2.4s var(--ease) infinite}
@keyframes hpSpin{to{transform:rotate(360deg)}}
/* shield breathing + scan sweep + molecule rotation */
.hp-shield{transform-box:view-box;transform-origin:210px 210px;animation:hpShield 3.6s var(--ease) infinite}
@keyframes hpShield{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.04);opacity:1}}
.hp-scan{transform-box:view-box;transform-origin:210px 210px;animation:hpSpin 5.5s linear infinite}
.hp-mol{transform-box:view-box;transform-origin:210px 210px;animation:hpMol 22s linear infinite}
@keyframes hpMol{to{transform:rotate(360deg)}}
.hp-mol circle{transform-box:fill-box;transform-origin:center;animation:hpPulse 2.2s var(--ease) infinite}
.hp-mol circle:nth-of-type(2){animation-delay:.5s}.hp-mol circle:nth-of-type(3){animation-delay:1s}
@keyframes hpPulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.hp-label{animation:hpLabel 3.6s var(--ease) infinite}
@keyframes hpLabel{0%,100%{opacity:.85}50%{opacity:1}}

@media (max-width:860px){
  .hpapi-inner{grid-template-columns:1fr;gap:36px}
  .hpapi-visual{order:-1}
  .hpapi-svg{max-width:320px}
}
@media (prefers-reduced-motion:reduce){
  .hp-ring,.hp-orbit,.hp-orbiters,.hp-orbiters circle,.hp-shield,.hp-scan,.hp-mol,.hp-mol circle,.hp-label{animation:none!important}
  .hp-ring{opacity:.4}
}
