/* ==========================================================================
   Defpro dark "engineering" theme - loaded LAST on every page.
   Look and feel taken from the supplied about-page redesign: deep navy surfaces,
   sky-blue accents, Syne + Inter type, square 1px-bordered cards, angled-corner
   buttons, grid-line backgrounds. Content, layout and behaviour are the site's own.
   To switch the whole theme off, remove the theme.css <link> from the pages.
   ========================================================================== */

:root{
  /* palette from the reference */
  --bg:#04080F;--steel:#070D1A;--panel:#0C1526;--card:#0F1B2E;--rule:#1A2C45;
  --text:#E8F4FD;--body:#7FA8CC;--muted-blue:#5F86B0;
  --blue:#0EA5E9;--blue2:#38BDF8;--blue3:#7DD3FC;--accent:#00D4FF;

  /* existing tokens remapped so every older rule picks up the new palette */
  --ink:var(--text);
  --graphite:var(--card);--soft-black:var(--steel);--dark:var(--bg);
  --muted:var(--body);--muted-light:var(--muted-blue);
  --brand-blue:var(--blue);--brand-blue-dark:var(--blue2);
  --mustard:var(--blue);--mustard-dark:var(--blue2);--mustard-soft:rgba(14,165,233,.14);
  --cream:var(--bg);--off-white:var(--steel);--line:var(--rule);--line-dark:rgba(14,165,233,.16);
  --grey:var(--steel);--grey-rgb:7,13,26;--grey-panel:var(--panel);
  --r-sm:2px;--r-md:0;--r-lg:0;
  --shadow-card:0 14px 34px rgba(0,0,0,.4);
  --shadow-lift:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(14,165,233,.3);
  color-scheme:dark;
}
html{scrollbar-color:var(--rule) var(--bg);scrollbar-width:thin}
::selection{background:rgba(14,165,233,.35);color:#fff}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif}

/* ===== Typography ===== */
h1,h2,h3,h4{font-family:'Syne',sans-serif}
h1{font-size:clamp(38px,5.2vw,74px);font-weight:800;line-height:1.04;letter-spacing:-.02em}
h2{font-size:clamp(28px,3.6vw,48px);font-weight:700;line-height:1.1;letter-spacing:-.01em}
h3{font-weight:700;letter-spacing:-.005em}
h1 em,h2 em{color:var(--blue)}
h2>span:not(.split-word){color:var(--blue2)}
.intro h2,.why-defpro h2,.contact-box h2,.psu-directory h2{font-size:clamp(28px,3.8vw,52px);letter-spacing:-.01em;line-height:1.1}
.brand-body h3{font-size:clamp(26px,3vw,38px)}
.card-modal-title{font-weight:700;letter-spacing:-.005em}
.eyebrow{font-weight:600}
.section-label{color:var(--muted-blue);font-weight:600}
.section-label span{color:var(--body)}
.section-label:after{background:var(--rule)}

/* ===== Header / nav ===== */
.site-header{background:rgba(4,8,15,.94);border-bottom:1px solid var(--rule)}
.brand{font-weight:800;letter-spacing:.05em;color:var(--text)}
.brand b{color:var(--blue);font-weight:800}
.brand img{border-radius:0;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px)}
.nav-parent{color:var(--body)!important;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.nav-parent:hover{color:var(--text)!important}
.nav-parent.active{color:var(--blue)!important}
.nav-cta{background:linear-gradient(135deg,#38BDF8,#0EA5E9);color:#04080F!important;border:0;border-radius:0;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);padding:11px 22px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;box-shadow:none}
.nav-cta:hover{background:linear-gradient(135deg,#7DD3FC,#38BDF8)!important;color:#04080F!important;box-shadow:none;transform:translateY(-1px)}
.nav-dropdown{background:rgba(7,13,26,.98);border:1px solid var(--rule);border-radius:0;box-shadow:var(--shadow-lift)}
.nav-dropdown a{border-radius:0;color:var(--body)!important;font-weight:500}
.nav-dropdown a:hover{background:rgba(14,165,233,.1);color:var(--blue2)!important}
@media(max-width:1100px){
  .nav-links{border-top:1px solid var(--rule);box-shadow:0 20px 40px rgba(0,0,0,.5)}
  .nav-parent{border-bottom:1px solid var(--rule)}
  .nav-parent:hover{color:var(--text)!important}
  .nav-dropdown{border:0;background:transparent;box-shadow:none}
  .nav-dropdown a{color:var(--body)!important}
  .nav-links .nav-cta{border-bottom:0}
}

/* ===== Buttons ===== */
.button{border-radius:0;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);border:0;padding:16px 26px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;box-shadow:none}
.button:active{box-shadow:none!important}
.button-light,.button-dark{background:linear-gradient(135deg,#38BDF8,#0EA5E9);color:#04080F;border:0}
.button-light:hover,.button-dark:hover{background:linear-gradient(135deg,#7DD3FC,#38BDF8);color:#04080F;box-shadow:none;transform:translateY(-2px)}
.text-link{border-radius:0;border:1px solid rgba(232,244,253,.28);color:var(--text);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:15px 22px}
.text-link:hover{border-color:var(--blue);color:var(--blue2);transform:translateY(-2px)}
.arrow-link{border-bottom-color:var(--blue);color:var(--text);text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.arrow-link span{color:var(--blue)}
.arrow-link:hover{color:var(--blue2)}
.intro .arrow-link{color:var(--text);border-bottom-color:var(--blue)}

/* ===== Hero (homepage video + interior photo/video heroes) ===== */
.hero-shade{background:linear-gradient(90deg,rgba(4,8,15,.84) 0%,rgba(4,8,15,.4) 50%,rgba(4,8,15,.05) 85%),linear-gradient(0deg,rgba(4,8,15,.78) 0%,rgba(4,8,15,0) 46%)}
.hero-copy{color:#C9DDF0}
.page-hero.has-media{background-color:var(--bg);border-bottom:1px solid var(--rule)}
.page-hero.has-media:before{background:linear-gradient(100deg,rgba(4,8,15,.88) 0%,rgba(4,8,15,.52) 48%,rgba(4,8,15,.14) 100%)}
.page-hero.has-media:after{background:radial-gradient(circle,rgba(14,165,233,.22),transparent 70%)}
.page-hero.has-media p{color:#C9DDF0}

/* ===== Section backgrounds: alternating ink / steel with grid lines ===== */
.page-main,.solutions,.brands{background:var(--bg)}
.intro,.why-defpro,.clients{background:var(--steel)}
.page-main:before,.pattern-bg:before{
  background-image:repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(14,165,233,.055) 80px),repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(14,165,233,.055) 80px);
  background-size:auto;animation:none}
.page-main:after,.pattern-bg:after{
  background:radial-gradient(circle at 12% 18%,rgba(14,165,233,.1),transparent 34%),radial-gradient(circle at 88% 30%,rgba(14,165,233,.08),transparent 32%),radial-gradient(circle at 30% 88%,rgba(0,212,255,.06),transparent 34%)}
.page-network{opacity:.3}
.intro-network{opacity:.35}
.intro:before{background:radial-gradient(circle,rgba(14,165,233,.14),transparent 70%)}
.intro:after{background-image:linear-gradient(rgba(14,165,233,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.05) 1px,transparent 1px);background-size:80px 80px}
.intro-corner{border-color:rgba(14,165,233,.5)}
.why-defpro:before{background-image:linear-gradient(rgba(14,165,233,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.05) 1px,transparent 1px);background-size:80px 80px}
.sourcing-process .sourcing-bg:after{background:linear-gradient(180deg,rgba(4,8,15,.92) 0%,rgba(4,8,15,.6) 45%,rgba(4,8,15,.94) 100%),linear-gradient(90deg,rgba(4,8,15,.86),rgba(4,8,15,.3) 65%)}
.sourcing-process .section-heading p{color:#9fbad4}
.process-grid b{border-radius:0;background:var(--card);border:1px solid rgba(14,165,233,.5);clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px)}
.process-grid span{color:#9fbad4}

/* ===== Cards: square, 1px rule border, dark panel ===== */
.info-card,.psu-face{background:var(--card);border:1px solid var(--rule);border-radius:0}
.service-card{background:var(--card);border:1px solid var(--rule);border-radius:0}
.service-card.featured,.info-card.featured{border-color:rgba(14,165,233,.45)}
.service-card:hover,.info-card:hover{border-color:rgba(14,165,233,.6)}
.service-card p{color:#C9DDF0}
.info-card.featured p,.psu-back p{color:#9fbad4}
.info-card.featured .service-icon,.flip-front .service-icon{border-radius:0;background:rgba(14,165,233,.1);border:1.5px solid var(--blue);color:var(--blue)}
.tilt:after{background:radial-gradient(circle at var(--mx) var(--my),rgba(125,211,252,.2),transparent 55%)}
.why-card{border:1px solid var(--rule);border-radius:0}
.brand-feature{background:var(--card);border:1px solid var(--rule);border-radius:0}
.brand-feature:hover{border-color:rgba(14,165,233,.5)}
/* clients logo marquee: logos are dark-on-light artwork, so each sits on a light tile */
.client-logo{background:#fff;padding:10px 14px;box-sizing:border-box;height:84px;border-radius:0}
.client-logo-item b{border:1px solid rgba(14,165,233,.4);border-radius:0;background:var(--card)}
@media(max-width:620px){.client-logo{height:58px;padding:6px 10px;max-width:110px}}

/* ===== Card modal ===== */
.card-modal-panel{background:var(--card);border:1px solid var(--rule);border-radius:0}
.card-modal-close{border-radius:0;background:var(--panel);border:1px solid var(--rule);color:var(--text)}
.card-modal-close:hover{background:var(--blue);color:#04080F}
.card-modal-backdrop{background:rgba(2,5,10,.82)}

/* ===== Timeline (Our Journey) ===== */
.tl-card{background:var(--card);border:1px solid var(--rule);border-radius:0}
.tl-card:hover{border-color:rgba(14,165,233,.5)}
.tl-dot{background:var(--bg);border-color:var(--blue);box-shadow:0 0 0 0 rgba(14,165,233,.5)}
.tl-tag{border-radius:0;background:rgba(14,165,233,.12);color:var(--blue2)}
.tl-bar,.tl-bar i{border-radius:0;background-color:transparent}
.tl-bar{background:rgba(14,165,233,.14)}
.tl-brands a{background:transparent;border:1px solid var(--blue);color:var(--blue2);border-radius:0}
.tl-brands a:hover{background:var(--blue);color:#04080F}
.tl-next .tl-card{background:linear-gradient(135deg,#0C1E35,#0A2640);border-color:rgba(14,165,233,.5)}
.tl-next .tl-card p{color:#9fbad4}
.timeline-line{background:var(--rule);border-radius:0}
.timeline-fill{background:linear-gradient(180deg,var(--blue),var(--accent));border-radius:0;box-shadow:0 0 14px rgba(0,212,255,.45)}
@keyframes tlPulse{0%{box-shadow:0 0 0 0 rgba(14,165,233,.5)}100%{box-shadow:0 0 0 18px rgba(14,165,233,0)}}

/* ===== Contact page + CTA band ===== */
.contact-details{background:var(--panel);border:1px solid var(--rule);border-top:3px solid var(--blue);border-radius:0}
.contact-details:before{background-image:linear-gradient(rgba(14,165,233,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.05) 1px,transparent 1px);background-size:60px 60px}
.contact-form{background:var(--card);border:1px solid var(--rule);border-radius:0;box-shadow:none}
.contact-form input,.contact-form textarea,.contact-form select{background:var(--panel);color:var(--text);border:1px solid var(--rule);border-radius:0;font-family:'Inter',sans-serif}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#4A6A8F}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,165,233,.18)}
.contact-form option{background:#0C1526;color:#E8F4FD}
.form-status{color:#4ADE80}
.contact-box{background:linear-gradient(135deg,#0EA5E9,#0284C7);border-radius:0;clip-path:polygon(24px 0,100% 0,100% 100%,0 100%,0 24px);box-shadow:none}
.contact-box h2{color:#04080F}
.contact-box h2 em{color:#06344E}
.contact-box .eyebrow{color:rgba(4,8,15,.7)}
.contact-box .eyebrow:before{background:rgba(4,8,15,.55)}
.contact-box .button-dark{background:#04080F;color:var(--text)}
.contact-box .button-dark:hover{background:#000;color:var(--blue2);transform:translateY(-2px);box-shadow:none}

/* ===== Footer ===== */
footer{background:var(--steel);border-top:1px solid var(--rule)}
.footer-brand{color:var(--text)}
.footer-title{color:var(--muted-blue)!important}
.footer-grid a:not(.brand){color:var(--body)}
.footer-grid a:not(.brand):hover{color:var(--text)}
.footer-brand-link{border-radius:0}
.footer-brand-link:hover{background:rgba(14,165,233,.08)}
.footer-brand-link strong{color:var(--text)}
.footer-brand-link:hover strong{color:var(--blue2)}
.copyright{border-top:1px solid var(--rule);color:var(--muted-blue)}

/* ===== DIVA chat widget ===== */
.diva-panel{background:var(--panel);border:1px solid var(--rule);border-radius:0}
.diva-panel-header{background:var(--card);border-bottom:1px solid var(--rule)}
.diva-messages{background:var(--panel)}
.diva-msg{border-radius:0}
.diva-msg-bot{background:var(--card);border:1px solid var(--rule);color:var(--text);border-radius:0}
.diva-msg-user{background:linear-gradient(135deg,#38BDF8,#0EA5E9);color:#04080F;border-radius:0}
.diva-input-row{background:var(--card);border-top:1px solid var(--rule)}
.diva-input{background:var(--panel);border:1px solid var(--rule);border-radius:0;color:var(--text)}
.diva-input:focus{border-color:var(--blue)}
.diva-send{background:var(--blue);color:#04080F;border-radius:0}
.diva-send:hover{background:var(--blue2);color:#04080F}

/* ===== Small screens ===== */
@media(max-width:480px){h1{font-size:36px}h2{font-size:28px}}
@media(max-width:380px){.brand{gap:8px}.brand span{font-size:13px;letter-spacing:.02em}}

/* client logos: bigger, padded tiles so real logos read clearly (flat white tile, logo centred) */
.psu-logo-wrap img[hidden],.client-logo[hidden]{display:none}
.client-logo{width:150px;max-width:150px;object-fit:contain}
@media(max-width:620px){.client-logo{width:104px;max-width:104px}}
/* marquee now holds ~42 logos, slowed so the scroll speed stays about the same */
.client-list{animation-duration:62s}

/* clients page: three moving rows (same scrolling strip as the homepage), names written in full */
.client-rows{padding-top:40px}
.client-rows .client-track-wrap{margin-top:26px}
.client-rows .client-track-wrap:first-child{margin-top:44px}
.client-logo-item{width:170px}
.client-logo-item b{width:164px;height:84px;padding:8px 10px;box-sizing:border-box;background:var(--card);border:1px solid rgba(14,165,233,.4);border-radius:0;color:var(--text);font:600 12.5px/1.3 'Inter',sans-serif;letter-spacing:0;text-align:center}
.client-logo-item b[hidden]{display:none}
.client-logo-item.no-logo .client-logo-name{display:none}
.client-logo-name{max-width:170px}
@media(max-width:620px){.client-logo-item{width:120px}.client-logo-item b{width:116px;height:64px;font-size:11px;padding:6px}.client-logo-name{max-width:120px}}

/* wide wordmark-style logos get a wider tile so they stay legible */
.client-logo-item.wide{width:262px}
.client-logo-item.wide .client-logo{width:250px;max-width:250px}
@media(max-width:620px){.client-logo-item.wide{width:180px}.client-logo-item.wide .client-logo{width:172px;max-width:172px}}

/* homepage client strip: logos only - no cards, no captions. Logos sit straight on a white band so
   their own white backgrounds disappear (multiply) and only the artwork shows. */
.clients .client-track-wrap{background:none;padding:14px 0;margin-top:40px}
.clients .client-list{gap:44px;align-items:flex-start}
.clients .client-logo-item{width:210px;gap:16px}
.clients .client-logo{background:transparent;padding:0;border:0;height:116px;width:auto;max-width:200px;object-fit:contain;image-rendering:auto}
.clients .client-logo-item.wide{width:300px}
.clients .client-logo-item.wide .client-logo{width:auto;max-width:290px;height:84px;margin:16px 0}
.clients .client-logo-name{display:block;max-width:210px;font-size:13.5px;font-weight:600;line-height:1.35;color:#cfe3f5;text-align:center}
@media(max-width:620px){.clients .client-track-wrap{padding:8px 0}.clients .client-list{gap:26px}.clients .client-logo-item{width:150px;gap:12px}.clients .client-logo{height:84px;max-width:140px}.clients .client-logo-item.wide{width:210px}.clients .client-logo-item.wide .client-logo{max-width:200px;height:60px;margin:12px 0}.clients .client-logo-name{font-size:12px;max-width:150px}}
.clients .client-list{animation-duration:190s}

/* homepage strip: smooth motion. No filters on the logos, no mask on the moving layer (a mask forces the
   whole strip to be re-composited every frame), so the strip simply clips at its edges. The strip is
   always its own compositor layer so it never gets promoted/demoted while it enters or leaves the screen. */
.clients .client-track-wrap{position:relative;-webkit-mask-image:none;mask-image:none;contain:layout paint}
.clients .client-list{will-change:transform;backface-visibility:hidden;transform:translate3d(-50%,0,0)}
.clients .client-logo{transition:none}
.clients .client-logo-item:hover .client-logo{transform:none}
@keyframes clientScroll3d{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.clients .client-list{animation-name:clientScroll3d}
/* JS-driven strips (script.js runMarquee): no CSS animation, no mask; the script positions the strip on whole device pixels */
.client-list.js-marquee{animation:none!important;will-change:transform;backface-visibility:hidden}
.js-marquee-wrap{-webkit-mask-image:none;mask-image:none;contain:layout paint}
.clients .client-logo-name{max-width:none;width:100%}
.clients .client-logo{transition:none;image-rendering:auto}

/* ===== PERFORMANCE: no continuous decorative animation =====
   These looped forever and each one forces a repaint or re-composite of a large area every frame (animated SVG
   dashes/circles on every section (now kept, see below), drifting full-section blob/stripe layers, text-gradient shimmer, zoom on the
   hero video, Ken-Burns on every card photo, a truck animating `left`, pulsing box-shadows). Together they made
   the whole page flicker. Entrance reveals, hover effects and the logo / why-us strips are untouched. */
.hero-media{animation:none!important}
.hero h1 em .split-word span{animation:none!important;background-position:50% 0}
/* the animated dashed lines + pulsing dots behind each section are kept (requested); they only run while their section is on screen */
.page-network circle,.page-network line,.intro-network circle,.intro-network line{animation-play-state:paused}
.in-view>.page-network circle,.in-view>.page-network line,.intro.in-view .intro-network circle,.intro.in-view .intro-network line{animation-play-state:running}
.service-card .card-media img,.why-bg img{animation:none!important}
.pattern-bg:before,.pattern-bg:after,.page-main:before,.page-main:after{animation:none!important;will-change:auto!important}
/* delivery truck: drives from the first step to the last. Animates transform only (cheap, runs on the GPU) instead of `left`;
   cqw = % of the process grid width. Runs only while the section is on screen (existing in-view pause). */
.process-grid{container-type:inline-size}
@keyframes truckDrive{0%{transform:translateX(0) scaleX(-1);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(88cqw) scaleX(-1);opacity:0}}
.process-grid .process-truck{animation:truckDrive 7s ease-in-out infinite;will-change:transform}
.tl-item.in .tl-dot{animation:none!important}
.page-main.in-view:before,.page-main.in-view:after,.pattern-bg.in-view:before,.pattern-bg.in-view:after{will-change:auto!important}
.why-defpro.in-view .why-grid,.clients.in-view .client-list{will-change:auto}
.clients .client-list{gap:36px}
.clients .client-logo-name{font-size:13px}

/* ===== Light network animation (replaces the heavy one) =====
   Fewer nodes/lines (script.js buildNetworkSvg), thinner and fainter dashes, and the dashes crawl slowly in
   discrete steps (about 5 repaints a second instead of 60). Dots only fade (no scaling). The pause-off-screen
   rules above still apply because only the animation longhands are set here. */
@keyframes netFlowLight{to{stroke-dashoffset:-140}}
@keyframes netPulseLight{0%,100%{opacity:.3}50%{opacity:.8}}
.page-network,.intro-network{opacity:.3;contain:paint}
.page-network line,.intro-network line{stroke-width:1.2;stroke-dasharray:4 10;animation-name:netFlowLight;animation-duration:14s;animation-timing-function:steps(70);animation-iteration-count:infinite}
.page-network circle,.intro-network circle{animation-name:netPulseLight;animation-duration:6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.client-rows .client-track-wrap{margin-top:8px;padding:10px 0}
.client-rows .client-track-wrap:first-child{margin-top:36px}

/* ===== RESPONSIVE POLISH (phones / tablets / laptops / large screens) =====
   Audit result: no horizontal overflow on any page at 320-1920px. These fix what the audit did flag: dynamic-viewport
   heights (mobile browser address bar), tiny tap targets, 11px labels, iOS input zoom, short landscape phones. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,svg{max-width:100%}
@supports (height:100dvh){
  .hero{min-height:100dvh}
  .nav-links{max-height:calc(100dvh - 54px)}
  .card-modal-panel{max-height:86dvh}
  .diva-panel{max-height:calc(100dvh - 120px)}
}
@media(max-width:1100px){.hero{min-height:92vh}@supports (height:100dvh){.hero{min-height:92dvh}}}
/* readable small labels */
.eyebrow,.footer-title,.copyright,.section-label,.section-label span{font-size:max(12px,.75rem)}
/* comfortable tap targets on touch screens */
@media(pointer:coarse),(max-width:900px){
  .menu-toggle{min-width:44px;min-height:44px}
  .nav-links a{min-height:44px;display:flex;align-items:center}
  .button,.nav-cta,.arrow-link,.text-link{min-height:44px}
  .arrow-link,.text-link{padding-top:10px;padding-bottom:10px}
  footer a{display:inline-block;padding:9px 0;min-height:40px;line-height:1.4}
  footer .brand{padding:6px 0}
  .card-modal-close{width:44px;height:44px;font-size:22px}
}
/* stop iOS from zooming into form fields */
@media(max-width:900px){input,select,textarea{font-size:16px}}
/* short landscape phones: don't force a full-height hero */
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:84px}
  .hero-content{padding-top:30px;padding-bottom:40px}
  .page-hero.has-media{min-height:340px}
  .nav-links{max-height:calc(100vh - 54px)}
}
/* very small phones */
@media(max-width:360px){
  .section-shell{width:calc(100% - 32px)}
  .page-hero.has-media .section-shell{width:calc(100% - 32px)}
  .button,.nav-cta{padding-left:18px;padding-right:18px}
}
/* big monitors: keep line lengths and spacing sensible */
@media(min-width:1800px){.section-shell,.page-hero.has-media .section-shell{width:min(1400px,calc(100% - 96px))}}

/* ===== Background network: STATIC (requested) =====
   The dashed lines and dots stay as a still pattern behind the sections; nothing in them moves any more, so they cost
   nothing to render and cannot flicker. This comes last so it overrides every earlier network animation rule. */
.page-network line,.page-network circle,.intro-network line,.intro-network circle{animation:none!important;will-change:auto!important}
.page-network line,.intro-network line{stroke-dashoffset:0}
.page-network circle,.intro-network circle{opacity:.55}
/* truck (and the why-us strip) only run while their section is on screen */
.process-grid .process-truck{animation-play-state:paused}
.sourcing-process.in-view .process-truck{animation-play-state:running}

/* ===== Gentle scroll reveals (no flicker) =====
   Only opacity + transform (GPU-composited), slower and softer than before, stagger capped so a long list never queues
   up dozens of delayed transitions, and the per-word clipping mask is gone (it forced a repaint of every word). Body
   paragraphs now reveal as a single block (script.js) instead of one animated element per word. */
[data-reveal]{transform:translateY(18px);transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1);transition-delay:calc(min(var(--i,0),6) * 110ms)}
.info-card[data-reveal],.service-card[data-reveal],.brand-feature[data-reveal],.psu-card[data-reveal]{transform:translateY(24px)}
.split-word,[data-split-text].is-visible .split-word{overflow:visible}
.split-word span{transform:translateY(40%);transition:transform .9s cubic-bezier(.22,.61,.36,1),opacity .9s cubic-bezier(.22,.61,.36,1);transition-delay:calc(min(var(--i,0),10) * 70ms)}
[data-split-text].is-visible .split-word span{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){[data-reveal],.split-word span{transition:none!important;transform:none!important;opacity:1!important}}

/* ===== Floating air bubbles: part of each section's BACKGROUND (same layer as the dashed-line network) =====
   Faint rings rising behind the content. Each section gets 8-26 of them (script.js addBubbles). transform-only animation
   (GPU, no per-frame layout/paint), no blur/shadow/filter, size-contained layer, and they only move while their section
   is on screen (same in-view switch the rest of the page uses), so the cost is a handful of tiny layers at a time. */
.section-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;contain:strict;container-type:size;z-index:-1}
.pattern-bg>.section-bubbles{z-index:0}
.air-bubble{position:absolute;left:var(--x);bottom:0;width:var(--s);height:var(--s);border-radius:50%;opacity:var(--o);
  background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.7) 0,rgba(255,255,255,.16) 18%,rgba(125,211,252,.10) 52%,rgba(14,165,233,.05) 70%,rgba(14,165,233,0) 72%);
  border:1px solid rgba(186,230,253,.38);
  will-change:transform;
  animation:airBubbleRise var(--d) linear var(--delay) infinite;animation-play-state:paused}
.in-view>.section-bubbles .air-bubble{animation-play-state:running}
@keyframes airBubbleRise{
  0%{transform:translate3d(0,calc(var(--s) + 4px),0)}
  50%{transform:translate3d(var(--dx),-50cqh,0)}
  100%{transform:translate3d(calc(var(--dx) * -.5),calc(-100cqh - var(--s)),0)}}
@media(prefers-reduced-motion:reduce){.section-bubbles{display:none}}

/* ===== Dashed-line network: sparse + slow drift (replaces the earlier still version) =====
   Far fewer lines and dots (script.js buildNetworkSvg), thinner, sparser dashes. Instead of redrawing dashes every frame
   (what made it flicker), the finished pattern is moved as ONE layer by the GPU: a very slow drift (80s each way) using
   transform only. Only runs while its section is on screen; the layer is oversized so its edges never show. */
.page-network{inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);opacity:.28;animation:netDrift 80s ease-in-out infinite alternate;animation-play-state:paused}
.in-view>.page-network{animation-play-state:running;will-change:transform}
.page-network line{stroke-width:1;stroke-dasharray:3 14;stroke-dashoffset:0}
.page-network circle{opacity:.5}
@keyframes netDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-18px,26px,0)}}
@media(prefers-reduced-motion:reduce){.page-network{animation:none}}
.page-network{max-width:none}

/* make the dashed-line network clearly visible (still sparse + slow) */
.page-network{opacity:.8}
.page-network line{stroke:#38BDF8;stroke-width:1.6;stroke-dasharray:7 10}
.page-network circle{fill:#7DD3FC;opacity:.9;r:5px}

/* a little fainter than the "clearly visible" setting */
.page-network{opacity:.5}

/* smaller + a little fainter, even slower drift */
.page-network{opacity:.4;animation-duration:120s}
.page-network line{stroke-width:1.1;stroke-dasharray:5 12}
.page-network circle{r:2.4px;opacity:.7;fill:#38BDF8}
@keyframes netDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-12px,18px,0)}}

/* ===== About page: leadership / directors ===== */
.leaders{padding:90px 0 20px}
.leaders h2{margin:16px 0 40px}
@media(max-width:760px){.leaders{padding-top:64px}}

/* ===== Robustness (QA) =====
   If scripts are disabled or fail, the scroll-reveal start state (opacity 0) must not hide the page. */
@media (scripting:none){
  [data-reveal],[data-split-text],.split-word span,.tl-card,.tl-layer,.tl-dot{opacity:1!important;transform:none!important;transition:none!important}
  .tl-bar i{width:var(--w)}
}
/* the menu link "Client Directory" lands under the fixed header without this */
#psu-directory{scroll-margin-top:70px}

/* QA fix: on phones the page-title (h1) stayed at its 46px minimum, so long words ("requirement.", "Engineering",
   "hardware.") ran past the right edge of the screen and were cut off. The title now scales with the screen width. */
@media(max-width:620px){
  .page-hero h1,.page-hero.has-media h1{font-size:clamp(26px,8.2vw,46px);overflow-wrap:break-word}
}

/* Skip link: first thing a keyboard / screen-reader user reaches; invisible until focused */
.skip-link{position:absolute;left:12px;top:-64px;z-index:1000;padding:12px 18px;background:#38BDF8;color:#04080F;font:700 14px/1 'Inter',sans-serif;text-decoration:none;border-radius:2px}
.skip-link:focus{top:12px;outline:2px solid #04080F;outline-offset:2px}
main:focus{outline:none}

/* ===== Phase 1 (review): bigger logo + company name in the header ===== */
.site-header{height:70px}
.site-header .brand{gap:14px}
.site-header .brand img{width:52px;height:52px}
.site-header .brand span{font-size:23px;letter-spacing:.04em}
.nav-cta{padding-top:11px;padding-bottom:11px}
#psu-directory{scroll-margin-top:84px}
@media(max-width:1100px){
  .site-header{height:64px}
  .nav-links{top:64px;max-height:calc(100vh - 64px)}
  @supports (height:100dvh){.nav-links{max-height:calc(100dvh - 64px)}}
}
@media(max-width:620px){
  .site-header .brand{gap:11px}
  .site-header .brand img{width:44px;height:44px}
  .site-header .brand span{font-size:18px}
}
@media(max-width:380px){
  .site-header .brand{gap:9px}
  .site-header .brand img{width:40px;height:40px}
  .site-header .brand span{font-size:15px;letter-spacing:.02em}
}
@media(max-width:400px){
  .site-header .brand img{width:38px;height:38px}
  .site-header .brand span{font-size:13.5px}
}
@media(max-width:345px){
  .site-header .brand{gap:8px}
  .site-header .brand img{width:34px;height:34px}
  .site-header .brand span{font-size:12px;letter-spacing:.01em}
}
@media(max-width:480px){.site-header .brand span{font-size:16px}}
@media(max-width:400px){.site-header .brand span{font-size:13.5px}}
@media(max-width:345px){.site-header .brand span{font-size:12px}}

/* ===== Phase 2 (review): home page ===== */
/* Who we are - two numbered points instead of paragraphs */
.intro-points{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:18px}
.intro-points li{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;padding:20px 22px;background:var(--card);border:1px solid var(--rule);clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px)}
.intro-point-no{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#38BDF8,#0EA5E9);color:#04080F;font:800 18px 'Syne',sans-serif}
.intro-points strong{display:block;font:700 19px/1.3 'Syne',sans-serif;color:var(--text);margin:2px 0 8px}
.intro-points p{margin:0;color:var(--body);line-height:1.65;font-size:15px}
/* The DG World */
.dg-world{background:var(--steel);padding-bottom:90px}
.dg-world h2{margin:16px 0 40px}
.dg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dg-card{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:150px;padding:26px 26px 22px;background:var(--card);border:1px solid var(--rule);clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px);color:var(--text);text-decoration:none;transition:border-color .3s,transform .3s}
.dg-name{font:800 24px/1.15 'Syne',sans-serif;letter-spacing:.01em}
.dg-note{color:var(--body);font-size:14px}
.dg-go{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2)}
.dg-live:hover{border-color:rgba(56,189,248,.65);transform:translateY(-4px)}
.dg-soon{border-style:dashed;background:rgba(15,27,46,.55)}
.dg-badge{align-self:flex-start;padding:6px 12px;border:1px solid rgba(125,211,252,.35);color:var(--blue2);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:900px){.dg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.dg-grid{grid-template-columns:1fr}.dg-card{min-height:120px}.dg-name{font-size:21px}.intro-points li{grid-template-columns:38px 1fr;gap:14px;padding:16px}.intro-point-no{width:38px;height:38px;font-size:16px}}
/* sourcing: six steps */
.process-grid{grid-template-columns:repeat(6,1fr)}
@media(max-width:1000px){.process-grid{grid-template-columns:repeat(3,1fr);row-gap:30px}.process-truck{display:none}}
@media(max-width:900px){.process-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.process-grid{grid-template-columns:1fr}}

/* ===== Phase 3 (review): Tools / Chemicals / Electrical & Electronics ===== */
/* smaller cards (Tools) */
/* Electrical & Electronics: imported-instruments glimpse */
.origin-tag{display:inline-block;padding:5px 12px;margin-bottom:14px;border:1px solid rgba(125,211,252,.4);color:var(--blue2);font-size:11px;font-weight:700;letter-spacing:.16em}
/* ===== Phase 4 (review): Clients page - directory first, then a short sectors list ===== */
.sectors-block{padding:70px 0 30px}
.sectors-block h2{margin:16px 0 36px}
.sectors-grid{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sector-tile{display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:128px;padding:20px 22px;background:var(--card);border:1px solid var(--rule);clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);transition:border-color .3s}
.sector-tile:hover{border-color:rgba(56,189,248,.6)}
.sector-no{font:700 12px 'Inter',sans-serif;letter-spacing:.16em;color:var(--blue2)}
.sector-name{font:700 19px/1.25 'Syne',sans-serif;color:var(--text)}
@media(max-width:1000px){.sectors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sectors-grid{gap:12px}.sector-tile{min-height:104px;padding:16px}.sector-name{font-size:16px}}
#sectors{scroll-margin-top:84px}

/* ===== Phase 5 (review): About pillars, Team page, Journey target ===== */
.leaders-more{margin-top:34px}
/* Team page */
.team-block{padding:60px 0 20px}
.team-block h2{margin:16px 0 40px}
/* Clients & Sectors: bigger tiles with a photo behind each sector name */
.sectors-grid{gap:20px}
.sector-tile{position:relative;overflow:hidden;min-height:270px;padding:22px 24px;justify-content:flex-end;gap:8px;isolation:isolate}
.sector-tile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.sector-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,8,15,.05) 30%,rgba(4,8,15,.9) 100%)}
.sector-tile:hover img{transform:scale(1.06)}
.sector-no{position:absolute;top:18px;left:22px;padding:4px 10px;background:rgba(4,8,15,.72);color:#7DD3FC}
.sector-name{font-size:21px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
@media(max-width:1000px){.sector-tile{min-height:240px}}
@media(max-width:520px){.sector-tile{min-height:200px}.sector-name{font-size:18px}}
@media(prefers-reduced-motion:reduce){.sector-tile img{transition:none}.sector-tile:hover img{transform:none}}

/* ===== The DG World: richer cards (visual on top, brand name below) ===== */
.dg-grid{gap:22px}
.dg-card{padding:0;min-height:0;gap:0;justify-content:flex-start;overflow:hidden;border-radius:0}
.dg-visual{position:relative;height:170px;overflow:hidden;background:#0B1A2E}
.dg-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.dg-photo-light{background:linear-gradient(180deg,#F3F8FC,#DCEAF5)}
.dg-photo-light img{object-fit:contain;padding:8px 14px}
.dg-live:hover .dg-visual img{transform:scale(1.06)}
.dg-live-pill{position:absolute;top:14px;left:14px;padding:5px 11px 5px 24px;background:rgba(4,8,15,.82);color:#7DD3FC;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.dg-live-pill::before{content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#34D399}
.dg-body{display:flex;flex-direction:column;gap:10px;padding:20px 24px 24px;flex:1}
.dg-name{font:800 25px/1.15 'Syne',sans-serif;color:var(--text);letter-spacing:.005em}
.dg-name b{color:#38BDF8;font-weight:800}
.dg-note{color:var(--body);font-size:14px}
.dg-go{margin-top:auto;padding-top:6px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#38BDF8}
.dg-live{border-color:rgba(56,189,248,.35)}
.dg-live:hover{border-color:rgba(56,189,248,.8);transform:translateY(-5px)}
.dg-soon{border-style:solid;border-color:var(--rule);background:var(--card)}
.dg-mark{display:grid;place-items:center;background:radial-gradient(120% 140% at 15% 0%,var(--hue,#38BDF8) 0%,rgba(11,26,46,0) 62%),linear-gradient(135deg,#0B1A2E,#0F2742)}
.dg-mark span{font:800 76px/1 'Syne',sans-serif;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1.5px rgba(232,244,253,.55)}
.dg-hue-teal{--hue:rgba(45,212,191,.45)}
.dg-hue-violet{--hue:rgba(129,140,248,.5)}
.dg-hue-sky{--hue:rgba(56,189,248,.5)}
.dg-hue-amber{--hue:rgba(251,191,36,.38)}
.dg-badge{align-self:flex-start;margin-top:auto}
@media(max-width:900px){.dg-visual{height:150px}}
@media(max-width:520px){.dg-visual{height:140px}.dg-mark span{font-size:60px}.dg-name{font-size:22px}}
@media(prefers-reduced-motion:reduce){.dg-visual img{transition:none}}

/* Directors: photo cards (Team page + About page) */
.team-tagline{margin:-22px 0 40px;color:var(--body);font-size:17px;line-height:1.6;max-width:560px}
.director-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:900px}
.director-card{--dc:#38BDF8;text-align:center;padding:34px 28px 32px;background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--dc);clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px)}
.director-card.dir-gold{--dc:#FBBF24}.director-card.dir-rose{--dc:#F472B6}.director-photo{width:clamp(150px,22vw,200px);aspect-ratio:1;margin:0 auto 22px;border-radius:50%;overflow:hidden;border:3px solid var(--dc);box-shadow:0 0 0 6px rgba(255,255,255,.04)}
.director-photo img{display:block;width:100%;height:100%;object-fit:cover}
.director-card h3{font:700 24px/1.2 'Syne',sans-serif;color:var(--text);margin:0 0 8px}
.director-role{margin:0 0 14px;color:var(--dc);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:700px){.director-grid{grid-template-columns:1fr;max-width:420px}.team-tagline{margin-top:-14px}}
/* Team members (smaller cards under the leadership row) */
.member-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;max-width:1100px;margin-top:26px}
.director-card.is-member{padding:24px 16px 24px;border-top-width:2px;clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px)}
.is-member .director-photo{width:clamp(110px,13vw,150px);margin-bottom:16px;border-width:2px;box-shadow:none}
.is-member h3{font-size:18px}
.is-member .director-role{margin:0;font-size:11px;letter-spacing:.1em}
.m-orange{--dc:#FB923C}.m-teal{--dc:#2DD4BF}.m-red{--dc:#F43F5E}.m-sky{--dc:#60A5FA}.m-indigo{--dc:#818CF8}
@media(max-width:1000px){.member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.member-grid{gap:14px}}
/* Directors on top, rest of the team in one row below (5 across on desktop) */
.m-green{--dc:#84CC16}
.member-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
@media(max-width:1000px){.member-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.m-violet{--dc:#A78BFA}

/* What we source: icon tiles (Electrical & Electronics) */
.source-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.source-item{position:relative;display:flex;flex-direction:column;gap:18px;min-height:150px;padding:22px 22px 20px;background:linear-gradient(160deg,var(--card),#0A1626);border:1px solid var(--rule);border-left:3px solid #38BDF8;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);transition:transform .25s ease,border-color .25s ease,background .25s ease}
.source-item:hover{transform:translateY(-4px);border-color:rgba(56,189,248,.55);background:linear-gradient(160deg,#0F2036,#0B2A44)}
.source-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.28);color:#7DD3FC}
.source-no{position:absolute;top:20px;right:22px;font:800 12px 'Inter',sans-serif;letter-spacing:.18em;color:rgba(125,211,252,.45)}
.source-name{margin-top:auto;font:700 17px/1.3 'Syne',sans-serif;color:var(--text)}
@media(max-width:1000px){.source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.source-grid{grid-template-columns:1fr}.source-item{min-height:0;flex-direction:row;align-items:center;gap:16px}.source-name{margin-top:0}.source-no{display:none}}
/* Members without a photo yet: initials badge */
.m-pink{--dc:#F9A8D4}.m-lime{--dc:#A3E635}
/* Bubbles for sections that are not "pattern-bg": stacking context + bubbles sit behind the content, above the section's own background */
.has-bubbles{position:relative;isolation:isolate}
.has-bubbles>.section-bubbles{z-index:-1}
/* ===== Our Offerings: bento tiles (full-photo, number + source tag, hover lift) ===== */
.off-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:10px}
.off-tile{position:relative;display:block;grid-column:span 4;min-height:330px;overflow:hidden;isolation:isolate;background:#071324;border:1px solid var(--rule);border-top:3px solid #38BDF8;color:var(--text);text-decoration:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);transition:transform .3s ease,border-color .3s ease}
.off-tile.off-wide{grid-column:span 7;min-height:380px}
.off-tile.off-mid{grid-column:span 5;min-height:380px}
.off-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s ease}
.off-tile:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(4,8,15,.96) 6%,rgba(4,8,15,.62) 48%,rgba(4,8,15,.12) 100%)}
.off-tile:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.7)}
.off-tile:hover .off-img{transform:scale(1.06)}
.off-tile:focus-visible{outline:2px solid #7DD3FC;outline-offset:3px}
.off-no{position:absolute;top:18px;right:22px;font:800 44px/1 'Syne',sans-serif;color:rgba(255,255,255,.18);letter-spacing:.02em}
.off-tag{position:absolute;top:20px;left:22px;padding:6px 12px;background:rgba(4,8,15,.78);border:1px solid rgba(56,189,248,.45);color:#7DD3FC;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.off-body{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 24px;display:block}
.off-body h3{margin:0 0 10px;font:700 clamp(22px,2.2vw,30px)/1.15 'Syne',sans-serif;color:#fff}
.off-body p{margin:0 0 16px;max-width:520px;color:#C9DDF0;font-size:14.5px;line-height:1.6}
.off-cta{display:inline-flex;align-items:center;gap:10px;color:#38BDF8;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.off-cta i{font-style:normal;transition:transform .25s ease}
.off-tile:hover .off-cta i{transform:translateX(6px)}
/* the truck is a transparent PNG: show it whole on a cyan glow instead of cropping it */
.off-ev{background:radial-gradient(circle at 50% 38%,rgba(14,165,233,.38),transparent 62%),linear-gradient(160deg,#0B2A44,#071324)}
.off-ev .off-img{object-fit:contain;height:62%;padding:56px 18px 0;z-index:-1}
@media(max-width:1000px){.off-tile,.off-tile.off-mid{grid-column:span 6}.off-tile.off-wide{grid-column:span 12}.off-tile:last-child{grid-column:span 12}}
@media(max-width:620px){.off-grid{gap:14px}.off-tile,.off-tile.off-mid,.off-tile.off-wide,.off-tile:last-child{grid-column:span 12;min-height:300px}.off-no{font-size:34px}}
@media(prefers-reduced-motion:reduce){.off-tile,.off-img{transition:none}}
.off-ev:after{background:linear-gradient(0deg,rgba(4,8,15,.96) 8%,rgba(4,8,15,.55) 34%,rgba(4,8,15,0) 58%)}
.off-ev .off-img{height:58%;padding:60px 22px 0;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}

/* ===== Electrical & Electronics page redesign ===== */
.ee-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;padding-top:40px}
.ee-copy h2{margin:16px 0 22px}
.ee-copy p{color:var(--body);line-height:1.8;margin:0 0 16px}
.ee-photo{position:relative;margin:0;justify-self:center;width:min(100%,420px)}
.ee-photo:before{content:'';position:absolute;inset:18px -18px -18px 18px;border:2px solid rgba(56,189,248,.5);z-index:0}
.ee-photo img{position:relative;z-index:1;display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--rule)}
.ee-photo figcaption{position:absolute;z-index:2;left:-18px;bottom:28px;padding:12px 18px;background:#0EA5E9;color:#04080F;display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.ee-photo figcaption b{font:800 15px 'Syne',sans-serif;letter-spacing:.02em}
.ee-origins,.ee-sourcing,.ee-steps{padding-top:84px}
.ee-origin-grid{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:18px;margin-top:20px}
.ee-origin{position:relative;overflow:hidden;padding:30px 28px 28px;min-height:270px;background:linear-gradient(160deg,var(--card),#0A1626);border:1px solid var(--rule);clip-path:polygon(0 0,100% 0,100% 100%,18px 100%,0 calc(100% - 18px))}
.ee-big{position:absolute;right:-6px;bottom:-22px;font:800 clamp(86px,10vw,140px)/1 'Syne',sans-serif;color:transparent;-webkit-text-stroke:1.5px rgba(125,211,252,.16);letter-spacing:-.02em;pointer-events:none}
.ee-origin h3{position:relative;font:700 21px/1.25 'Syne',sans-serif;color:var(--text);margin:0 0 10px}
.ee-origin p{position:relative;margin:0;color:var(--body);font-size:14.5px;line-height:1.65;max-width:420px}
.ee-origin .origin-tag{position:relative}
.ee-origin-hot{border-color:rgba(56,189,248,.6);background:radial-gradient(circle at 85% 12%,rgba(14,165,233,.3),transparent 55%),linear-gradient(160deg,#0F2036,#0B2A44)}
.ee-origin-hot .ee-big{-webkit-text-stroke-color:rgba(125,211,252,.3)}
.ee-badge{position:absolute;top:22px;right:22px;padding:5px 11px;background:#0EA5E9;color:#04080F;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ee-steps ol{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:s}
.ee-steps li{position:relative;padding:28px 26px;background:var(--card);border:1px solid var(--rule);border-top:3px solid #38BDF8}
.ee-steps li span{display:block;font:800 40px/1 'Syne',sans-serif;color:rgba(56,189,248,.35);margin-bottom:16px}
.ee-steps li h3{margin:0 0 8px;font:700 19px/1.25 'Syne',sans-serif;color:var(--text)}
.ee-steps li p{margin:0;color:var(--body);font-size:14.5px;line-height:1.65}
.ee-steps li:not(:last-child):after{content:'';position:absolute;top:50%;right:-19px;width:20px;border-top:2px dashed rgba(56,189,248,.5)}
.ee-cta{position:relative;margin-top:84px;padding:46px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background-size:cover;background-position:center;border:1px solid var(--rule);isolation:isolate;overflow:hidden}
.ee-cta:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(4,8,15,.94) 0%,rgba(4,8,15,.78) 55%,rgba(4,8,15,.45) 100%)}
.ee-cta h3{margin:0 0 8px;font:700 clamp(22px,2.6vw,32px)/1.15 'Syne',sans-serif;color:#fff}
.ee-cta p{margin:0;color:#C9DDF0;max-width:480px}
@media(max-width:1000px){.ee-intro{grid-template-columns:1fr;gap:56px}.ee-origin-grid{grid-template-columns:1fr 1fr}.ee-origin-hot{grid-column:span 2}.ee-steps ol{grid-template-columns:1fr}.ee-steps li:not(:last-child):after{display:none}}
@media(max-width:620px){.ee-origin-grid{grid-template-columns:1fr}.ee-origin-hot{grid-column:auto}.ee-cta{padding:32px 24px}.ee-photo:before{inset:12px -10px -12px 10px}.ee-photo figcaption{left:-8px}}
.ee-cta .button{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;background:#0EA5E9;color:#04080F;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:0;text-decoration:none;transition:transform .25s ease,background .25s ease}
.ee-cta .button:hover{background:#38BDF8;transform:translateY(-2px)}

/* ===== Tools page redesign ===== */
.tp-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center;padding-top:40px}
.tp-copy h2{margin:16px 0 22px}
.tp-copy p{color:var(--body);line-height:1.8;margin:0 0 16px}
.tp-promise{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tp-promise li{position:relative;padding:20px 24px 20px 28px;background:linear-gradient(160deg,var(--card),#0A1626);border:1px solid var(--rule);border-left:3px solid #38BDF8;display:flex;flex-direction:column;gap:4px}
.tp-promise b{font:700 19px 'Syne',sans-serif;color:var(--text)}
.tp-promise span{color:var(--body);font-size:14.5px;line-height:1.55}
.tp-head{padding-top:84px}
.tp-head h2{margin:16px 0 30px}
.tp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tp-card{display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--rule);clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);transition:transform .3s ease,border-color .3s ease}
.tp-card:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.6)}
.tp-photo{position:relative;height:210px;overflow:hidden;background:#071324}
.tp-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tp-card:hover .tp-photo img{transform:scale(1.06)}
.tp-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,8,15,.7) 0%,rgba(4,8,15,0) 55%)}
.tp-no{position:absolute;z-index:1;left:18px;bottom:12px;font:800 34px/1 'Syne',sans-serif;color:rgba(255,255,255,.85)}
.tp-body{padding:22px 24px 28px;display:flex;flex-direction:column;gap:12px;border-top:3px solid #38BDF8;flex:1}
.tp-body h3{margin:0;font:700 21px/1.2 'Syne',sans-serif;color:var(--text)}
.tp-body p{margin:0;color:var(--body);font-size:14.5px;line-height:1.65}
.tp-chips{list-style:none;margin:auto 0 0;padding:6px 0 0;display:flex;flex-wrap:wrap;gap:7px}
.tp-chips li{padding:4px 10px;border:1px solid rgba(125,211,252,.28);background:rgba(56,189,248,.07);color:#7DD3FC;font-size:11.5px;font-weight:600;letter-spacing:.03em}
.tp-quote{margin-top:84px;padding:38px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:radial-gradient(circle at 90% 20%,rgba(14,165,233,.3),transparent 55%),linear-gradient(160deg,#0F2036,#0B2A44);border:1px solid rgba(56,189,248,.45)}
.tp-quote h3{margin:0 0 8px;font:700 clamp(22px,2.6vw,30px)/1.15 'Syne',sans-serif;color:#fff}
.tp-quote p{margin:0 0 14px;color:#C9DDF0}
.tp-quote ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tp-quote ul li{padding:7px 16px;background:rgba(4,8,15,.55);border:1px solid rgba(125,211,252,.4);color:#E8F4FD;font-size:13px;font-weight:700;letter-spacing:.06em}
.tp-quote .button{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;background:#0EA5E9;color:#04080F;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:0;text-decoration:none;transition:transform .25s ease,background .25s ease}
.tp-quote .button:hover{background:#38BDF8;transform:translateY(-2px)}
@media(max-width:1000px){.tp-intro{grid-template-columns:1fr;gap:40px}.tp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.tp-grid{grid-template-columns:1fr}.tp-quote{padding:28px 22px}.tp-photo{height:190px}}
@media(prefers-reduced-motion:reduce){.tp-card,.tp-photo img{transition:none}}
/* ===== Chemicals & Desiccants page redesign (zoom-on-reveal + zoom-on-hover) ===== */
.cx-img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.is-visible .cx-img{transform:scale(1)}
.cx-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center;padding-top:40px}
.cx-copy h2{margin:16px 0 22px}
.cx-copy p{color:var(--body);line-height:1.8;margin:0 0 16px}
.cx-points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cx-points li{padding:20px 24px 20px 28px;background:linear-gradient(160deg,var(--card),#0A1626);border:1px solid var(--rule);border-left:3px solid #38BDF8;display:flex;flex-direction:column;gap:4px}
.cx-points b{font:700 19px 'Syne',sans-serif;color:var(--text)}
.cx-points span{color:var(--body);font-size:14.5px;line-height:1.55}
.cx-silica{margin-top:84px;display:grid;grid-template-columns:.8fr 1.2fr;background:var(--card);border:1px solid rgba(56,189,248,.4);clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
.cx-zoom{position:relative;overflow:hidden;min-height:420px;background:#071324}
.cx-zoom .cx-img{position:absolute;inset:0;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.cx-silica:hover .cx-zoom .cx-img{transform:scale(1.08);transition-duration:.8s}
.cx-flag{position:absolute;left:18px;top:18px;padding:6px 12px;background:#0EA5E9;color:#04080F;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cx-silica-body{padding:38px 40px 40px}
.cx-silica-body h3{margin:10px 0 12px;font:700 clamp(24px,2.6vw,34px)/1.15 'Syne',sans-serif;color:var(--text)}
.cx-silica-body p{color:var(--body);line-height:1.7;margin:0 0 14px;font-size:15px}
.cx-what{padding:14px 16px;background:rgba(56,189,248,.07);border-left:3px solid #38BDF8}
.cx-what b{color:var(--text)}
.cx-used-title{margin:22px 0 12px!important;color:var(--text)!important;font:700 12.5px 'Inter',sans-serif!important;letter-spacing:.14em;text-transform:uppercase}
.cx-used{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cx-used li{padding:12px 14px;background:rgba(4,8,15,.45);border:1px solid var(--rule);display:flex;flex-direction:column;gap:3px}
.cx-used strong{color:#7DD3FC;font-size:13.5px}
.cx-used span{color:var(--body);font-size:12px;line-height:1.45}
.cx-head{padding-top:84px}
.cx-head h2{margin:16px 0 30px}
.cx-fams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cx-fam{position:relative;overflow:hidden;min-height:340px;isolation:isolate;background:#071324;border:1px solid var(--rule);border-top:3px solid #38BDF8;transition:transform .3s ease,border-color .3s ease;clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.cx-fam .cx-img{position:absolute;inset:0;z-index:-2}
.cx-fam:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(4,8,15,.96) 8%,rgba(4,8,15,.6) 52%,rgba(4,8,15,.15) 100%)}
.cx-fam:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.7)}
.cx-fam:hover .cx-img{transform:scale(1.1);transition-duration:.8s}
.cx-no{position:absolute;top:16px;right:22px;font:800 44px/1 'Syne',sans-serif;color:rgba(255,255,255,.2)}
.cx-fam-body{position:absolute;left:0;right:0;bottom:0;padding:24px 26px 24px}
.cx-fam-body h3{margin:0 0 8px;font:700 clamp(22px,2.2vw,28px)/1.15 'Syne',sans-serif;color:#fff}
.cx-fam-body p{margin:0 0 14px;max-width:460px;color:#C9DDF0;font-size:14.5px;line-height:1.6}
.cx-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.cx-chips li{padding:4px 11px;border:1px solid rgba(125,211,252,.4);background:rgba(4,8,15,.55);color:#7DD3FC;font-size:11.5px;font-weight:700;letter-spacing:.04em}
.cx-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.cx-panel{position:relative;overflow:hidden;min-height:300px;isolation:isolate;background:#071324;border:1px solid var(--rule);transition:transform .3s ease,border-color .3s ease}
.cx-panel .cx-img{position:absolute;inset:0;z-index:-2}
.cx-panel:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,8,15,.95) 0%,rgba(4,8,15,.78) 55%,rgba(4,8,15,.4) 100%)}
.cx-panel:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.7)}
.cx-panel:hover .cx-img{transform:scale(1.1);transition-duration:.8s}
.cx-panel-body{padding:34px 32px;max-width:480px}
.cx-panel-body h3{margin:0 0 10px;font:700 clamp(22px,2.2vw,28px)/1.15 'Syne',sans-serif;color:#fff}
.cx-panel-body p{margin:0 0 16px;color:#C9DDF0;font-size:14.5px;line-height:1.65}
.cx-cta{margin-top:84px;padding:38px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:radial-gradient(circle at 90% 20%,rgba(14,165,233,.3),transparent 55%),linear-gradient(160deg,#0F2036,#0B2A44);border:1px solid rgba(56,189,248,.45)}
.cx-cta h3{margin:0 0 8px;font:700 clamp(22px,2.6vw,30px)/1.15 'Syne',sans-serif;color:#fff}
.cx-cta p{margin:0;color:#C9DDF0}
.cx-cta .button{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;background:#0EA5E9;color:#04080F;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:0;text-decoration:none;transition:transform .25s ease,background .25s ease}
.cx-cta .button:hover{background:#38BDF8;transform:translateY(-2px)}
@media(max-width:1000px){.cx-intro{grid-template-columns:1fr;gap:40px}.cx-silica{grid-template-columns:1fr}.cx-zoom{min-height:320px}.cx-used{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.cx-fams,.cx-duo{grid-template-columns:1fr}.cx-silica-body{padding:28px 22px}.cx-used{grid-template-columns:1fr}.cx-cta{padding:28px 22px}.cx-fam{min-height:320px}}
@media(prefers-reduced-motion:reduce){.cx-img{transform:none!important;transition:none!important}.cx-fam,.cx-panel{transition:none}}
/* DG World cards: brand logo chip (taken from each brand's own website) */
.dg-logo{position:absolute;top:12px;right:12px;display:grid;place-items:center;padding:8px 12px;background:rgba(4,8,15,.9);border:1px solid rgba(56,189,248,.38)}
.dg-visual .dg-logo img{display:block;width:auto;height:46px;max-width:none;padding:0;object-fit:contain;transform:none}
.dg-live:hover .dg-visual .dg-logo img{transform:none}
@media(max-width:520px){.dg-visual .dg-logo img{height:38px}}
/* "Coming soon" faded tag on the placeholder DG cards */
.dg-mark{position:relative}
.dg-soon-tag{position:absolute;left:0;right:0;bottom:16px;text-align:center;font:700 13px 'Inter',sans-serif;font-style:normal;letter-spacing:.38em;text-transform:uppercase;color:rgba(232,244,253,.5);text-indent:.38em;pointer-events:none}
.dg-soon-tag:before,.dg-soon-tag:after{content:'';display:inline-block;width:26px;height:1px;vertical-align:middle;margin:0 12px;background:rgba(232,244,253,.3)}
@media(max-width:520px){.dg-soon-tag{font-size:11.5px;letter-spacing:.3em}}
/* ===== About page redesign ===== */
.ab-img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.is-visible .ab-img{transform:scale(1)}
.ab-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;padding-top:40px}
.ab-copy h2{margin:16px 0 22px}
.ab-copy p{color:var(--body);line-height:1.8;margin:0 0 16px}
.ab-copy .ab-lead{color:var(--text);font-size:18px;line-height:1.7}
.ab-photo{position:relative;margin:0;justify-self:center;width:min(100%,460px)}
.ab-photo:before{content:'';position:absolute;inset:18px -18px -18px 18px;border:2px solid rgba(56,189,248,.5);z-index:0}
.ab-photo{aspect-ratio:4/5}
.ab-photo .ab-img{position:relative;z-index:1;border:1px solid var(--rule)}
.ab-photo{overflow:visible}
.ab-photo .ab-img{height:100%}
.ab-photo figcaption{position:absolute;z-index:2;left:-18px;bottom:28px;padding:12px 18px;background:#0EA5E9;color:#04080F;display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.ab-photo figcaption b{font:800 15px 'Syne',sans-serif}
.ab-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:84px;border:1px solid var(--rule);background:linear-gradient(160deg,var(--card),#0A1626)}
.ab-facts div{padding:28px 30px;display:flex;flex-direction:column;gap:6px}
.ab-facts div+div{border-left:1px solid var(--rule)}
.ab-facts b{font:800 clamp(22px,2.3vw,30px)/1.1 'Syne',sans-serif;color:#38BDF8;white-space:nowrap}
.ab-facts span{color:var(--body);font-size:14px;line-height:1.5}
.ab-way{padding-top:84px}
.ab-way h2{margin:16px 0 30px}
.ab-pillars{padding-top:84px}
.ab-pillar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:20px}
.ab-pillar{position:relative;padding:28px 24px 30px;background:var(--card);border:1px solid var(--rule);border-top:3px solid #38BDF8;transition:transform .3s ease,border-color .3s ease;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.ab-pillar:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.7)}
.ab-ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:20px;border-radius:12px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.3);color:#7DD3FC}
.ab-pillar h3{margin:0 0 10px;font:700 20px/1.25 'Syne',sans-serif;color:var(--text)}
.ab-pillar p{margin:0;color:var(--body);font-size:14.5px;line-height:1.65}
.ab-cta{position:relative;margin-top:84px;padding:46px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background-size:cover;background-position:center;border:1px solid var(--rule);isolation:isolate;overflow:hidden}
.ab-cta:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(4,8,15,.94) 0%,rgba(4,8,15,.8) 55%,rgba(4,8,15,.5) 100%)}
.ab-cta h3{margin:0 0 8px;font:700 clamp(22px,2.6vw,32px)/1.15 'Syne',sans-serif;color:#fff}
.ab-cta p{margin:0;color:#C9DDF0;max-width:480px}
.ab-cta-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ab-cta .button{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;background:#0EA5E9;color:#04080F;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:0;text-decoration:none;transition:transform .25s ease,background .25s ease}
.ab-cta .button:hover{background:#38BDF8;transform:translateY(-2px)}
.ab-link{color:#7DD3FC;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(125,211,252,.5);padding-bottom:3px}
@media(max-width:1000px){.ab-intro{grid-template-columns:1fr;gap:56px}.ab-pillar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.ab-facts{grid-template-columns:1fr}.ab-facts div+div{border-left:0;border-top:1px solid var(--rule)}.ab-pillar-grid{grid-template-columns:1fr}.ab-cta{padding:32px 24px}.ab-photo:before{inset:12px -10px -12px 10px}.ab-photo figcaption{left:-8px}}
@media(prefers-reduced-motion:reduce){.ab-img{transform:none!important;transition:none!important}.ab-pillar{transition:none}}
/* About: "How we work" flow (replaces the two-box comparison) */
.ab-old{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-bottom:26px;padding:16px 22px;border:1px dashed rgba(125,211,252,.28);background:rgba(4,8,15,.5)}
.ab-old-tag{padding:5px 12px;border:1px solid var(--rule);color:var(--body);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ab-old-flow{display:inline-flex;align-items:center;gap:12px;font:700 15px 'Syne',sans-serif;color:rgba(232,244,253,.45)}
.ab-old-flow i{font-style:normal;padding:5px 12px;border:1px solid var(--rule);text-decoration:line-through;text-decoration-color:rgba(244,63,94,.6)}
.ab-old-flow b{color:rgba(125,211,252,.4)}
.ab-old-note{color:var(--body);font-size:14px;line-height:1.55;flex:1 1 260px}
.ab-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.ab-flow:before{content:'';position:absolute;left:6%;right:6%;top:62px;border-top:2px dashed rgba(56,189,248,.4)}
.ab-flow li{position:relative;padding:26px 22px 28px;background:linear-gradient(160deg,var(--card),#0A1626);border:1px solid var(--rule);border-top:3px solid #38BDF8;transition:transform .3s ease,border-color .3s ease;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.ab-flow li:hover{transform:translateY(-6px);border-color:rgba(56,189,248,.7)}
.ab-step{position:absolute;top:14px;right:18px;font:800 40px/1 'Syne',sans-serif;color:rgba(255,255,255,.1)}
.ab-fico{position:relative;display:grid;place-items:center;width:60px;height:60px;margin-bottom:22px;border-radius:50%;background:#0B2A44;border:2px solid #38BDF8;color:#7DD3FC;box-shadow:0 0 0 8px rgba(4,8,15,.9)}
.ab-flow h3{margin:0 0 10px;font:700 18px/1.3 'Syne',sans-serif;color:var(--text)}
.ab-flow p{margin:0;color:var(--body);font-size:14.5px;line-height:1.65}
.ab-flow-last{background:radial-gradient(circle at 92% 8%,rgba(14,165,233,.3),transparent 55%),linear-gradient(160deg,#0F2036,#0B2A44)!important;border-color:rgba(56,189,248,.6)!important}
.ab-flow-last .ab-fico{background:#0EA5E9;color:#04080F}
@media(max-width:1000px){.ab-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-flow:before{display:none}}
@media(max-width:560px){.ab-flow{grid-template-columns:1fr}.ab-old{padding:14px 16px}}
@media(prefers-reduced-motion:reduce){.ab-flow li{transition:none}}
/* Why Defpro strip: 5 cards x 4 repeats (two identical halves of 10) so wide screens never show a gap; slower to keep the same visual speed */
.why-grid{animation-duration:57s}

/* Honeypot field for the contact form: invisible to people and screen readers, bots fill it in */
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important}

/* Network dots: staggered pulse delay (was an inline style on each dot; CSP no longer allows inline styles) */
.page-network circle:nth-of-type(7n+1){animation-delay:0s}
.page-network circle:nth-of-type(7n+2){animation-delay:0.3s}
.page-network circle:nth-of-type(7n+3){animation-delay:0.6s}
.page-network circle:nth-of-type(7n+4){animation-delay:0.9s}
.page-network circle:nth-of-type(7n+5){animation-delay:1.2s}
.page-network circle:nth-of-type(7n+6){animation-delay:1.5s}
.page-network circle:nth-of-type(7n+7){animation-delay:1.8s}

/* Photo credits page */
.credit-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.credit-list li{display:flex;gap:16px;align-items:center;padding:12px 14px;background:var(--card);border:1px solid var(--rule)}
.credit-list img{flex:0 0 96px;width:96px;height:64px;object-fit:cover;border:1px solid var(--rule)}
.credit-list div{display:flex;flex-direction:column;gap:4px;min-width:0}
.credit-title{color:var(--text);font-weight:600;font-size:14.5px;line-height:1.35;text-decoration:none;overflow-wrap:anywhere}
.credit-title:hover{color:#38BDF8}
.credit-list span{color:var(--body);font-size:12.5px;line-height:1.5}
.credit-list span a{color:#7DD3FC}
.credit-note{margin:30px 0 0;max-width:820px;color:var(--body);font-size:13.5px;line-height:1.7}
@media(max-width:800px){.credit-list{grid-template-columns:1fr}}
/* Contact details heading is now an h2 (heading order h1 -> h2); same look as the old h3 */
.contact-details h2{font-size:28px;margin-bottom:30px}
/* Keyboard focus: one clear, branded ring everywhere (mouse clicks do not show it) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #38BDF8;outline-offset:3px}
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible{outline-offset:1px}
/* Images now carry width/height attributes (stops layout jumping while they load). Those attributes must only supply the aspect ratio, never force a size, so anything not sized by a class keeps height:auto. */
:where(img[width][height]){height:auto}

/* Team names: Syne's lowercase "g" has a short flat tail that looks cut off at small sizes (Pragati, Singh), so names use Inter,
   and each member name is sized to sit on one line inside its card (e.g. "Prarthana Pandey"). */
.director-card h3{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-.005em;line-height:1.3}
.director-card.is-member{padding-left:10px;padding-right:10px}
.is-member h3{font-size:16.5px}
@media(max-width:700px){.is-member h3{font-size:15px}}
/* Floating WhatsApp button (bottom-left; the DIVA chat button is bottom-right) */
.wa-float{position:fixed;left:22px;bottom:22px;z-index:79;display:inline-flex;align-items:center;justify-content:center;height:56px;min-width:56px;padding:0 13px;border-radius:999px;background:#25D366;color:#fff;text-decoration:none;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .25s ease,box-shadow .25s ease}
.wa-float svg{flex:0 0 auto;display:block}
.wa-float .wa-label{font:700 14px 'Inter',sans-serif;letter-spacing:.02em;max-width:0;margin-left:0;overflow:hidden;white-space:nowrap;transition:max-width .3s ease,margin-left .3s ease}
.wa-float:hover,.wa-float:focus-visible{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.5)}
.wa-float:hover .wa-label,.wa-float:focus-visible .wa-label{max-width:110px;margin-left:10px}
@media(max-width:620px){.wa-float{left:14px;bottom:14px;height:52px;min-width:52px;padding:0 11px}}
@media(prefers-reduced-motion:reduce){.wa-float,.wa-float .wa-label{transition:none}}
@media print{.wa-float{display:none}}
/* "Prefer email?" line inside the call-to-action bands */
.cta-mail{margin:12px 0 0!important;font-size:13.5px;color:#C9DDF0}
.cta-mail a{color:#7DD3FC;text-decoration:none;border-bottom:1px solid rgba(125,211,252,.5)}
/* Privacy policy page + contact form privacy note */
.prose{max-width:820px}
.prose-date{color:var(--body);font-size:13.5px;margin:0 0 6px}
.prose h2{font:700 clamp(20px,2.2vw,26px)/1.25 'Syne',sans-serif;color:var(--text);margin:38px 0 12px}
.prose p,.prose li{color:var(--body);font-size:15.5px;line-height:1.8}
.prose ul{margin:0 0 6px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose strong{color:var(--text)}
.prose a{color:#7DD3FC;text-decoration:underline;text-underline-offset:3px}
.form-privacy{margin:14px 0 0;color:var(--body);font-size:12.5px;line-height:1.6}
.form-privacy a{color:#7DD3FC}
/* Responsive polish: bigger close button on the card pop-up (was 26 px) and a badge text that is never below 11 px */
.card-modal-close{width:40px!important;height:40px!important;font-size:18px!important}
.ee-badge{font-size:11.5px}