/* ELITA — Insights pages and floating WhatsApp button. Loaded after the existing styles. */

/* ---------- Insight cards with a featured photo ---------- */
.insight-image.has-photo{background:#2a1736}
.insight-image.has-photo:before{display:none}
.insight-image.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.insight-image.has-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,16,37,.62) 0%,rgba(27,16,37,0) 42%,rgba(27,16,37,.35) 100%)}
.insight-image.has-photo>span{position:relative;z-index:1}
.insight-image.has-photo>.insight-image-arrow{position:absolute;z-index:1;background:rgba(27,16,37,.28);backdrop-filter:blur(4px)}
.v2-insight-card:hover .insight-image.has-photo img{transform:scale(1.04)}
.insight-copy h3{color:var(--company-ink,#191329);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.insight-excerpt{margin:-8px 0 20px;color:#6b6175;font-size:13px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v2-insight-card:focus-visible{outline:3px solid #a320d0;outline-offset:3px}

/* ---------- Insights listing ---------- */
.insight-hero{padding:86px 0 92px}
.insight-hero h1{max-width:760px}
.insight-hero p{max-width:620px}
.insight-list-section{padding:64px 0 90px;background:#fff}
.insight-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.insight-filter{display:inline-flex;align-items:center;padding:10px 18px;border:1px solid #e6dbea;border-radius:40px;font-size:12px;font-weight:700;color:#5d5066;background:#fff;transition:background .2s,color .2s,border-color .2s}
.insight-filter:hover{border-color:#c79bd6;color:#8626a2}
.insight-filter.is-active{background:#1b1025;border-color:#1b1025;color:#fff}
.insight-count{margin:0 0 22px;color:#7a6e82;font-size:13px}
.insight-empty{padding:56px 32px;border:1px dashed #dccbe2;border-radius:18px;text-align:center;background:#fcfafc}
.insight-empty h2{font-size:24px;color:var(--company-ink,#191329);margin:0 0 10px}
.insight-empty p{color:#6b6175;margin:0 0 22px}

.insight-pagination{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:44px;flex-wrap:wrap}
.insight-page-numbers{display:flex;gap:6px;flex-wrap:wrap}
.insight-page{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid #e6dbea;border-radius:40px;font-size:13px;font-weight:700;color:#4b3d55;background:#fff}
a.insight-page:hover{border-color:#c79bd6;color:#8626a2}
.insight-page.is-active{background:#8c2ba8;border-color:#8c2ba8;color:#fff}
.insight-page.is-gap{border-color:transparent}
.insight-page.is-disabled{opacity:.45}

/* ---------- Insight article ---------- */
.insight-article-hero{padding:72px 0 78px}
.insight-article-head{max-width:900px}
.insight-article-hero h1{font-size:clamp(32px,4.4vw,54px);letter-spacing:-1.6px;line-height:1.14}
.insight-breadcrumb{font-size:12px;font-weight:700;letter-spacing:.06em;color:#e5b8ef}
.insight-breadcrumb a{color:#fff}
.insight-breadcrumb a:hover{text-decoration:underline}
.insight-article-meta{display:flex;gap:10px;align-items:center;margin:0;color:#e6d8ed;font-size:14px}
.insight-article-section{padding:56px 0 80px;background:#fff}
.insight-article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.insight-article{min-width:0;max-width:760px}
.insight-article-cover{margin:0 0 36px;border-radius:20px;overflow:hidden;background:#f5eef7}
.insight-article-cover img{width:100%;height:auto;display:block}
.insight-prose{color:#3b3043;font-size:17px;line-height:1.85}
.insight-prose>*:first-child{margin-top:0}
.insight-prose p{margin:0 0 1.2em}
.insight-prose h2{font-size:clamp(23px,2.4vw,29px);line-height:1.3;letter-spacing:-.6px;color:var(--company-ink,#191329);margin:1.8em 0 .6em}
.insight-prose h3{font-size:21px;line-height:1.35;color:var(--company-ink,#191329);margin:1.6em 0 .5em}
.insight-prose h4,.insight-prose h5,.insight-prose h6{font-size:18px;color:var(--company-ink,#191329);margin:1.4em 0 .5em}
.insight-prose ul,.insight-prose ol{margin:0 0 1.3em;padding-left:1.4em}
.insight-prose li{margin:.35em 0}
.insight-prose li::marker{color:#a320d0}
.insight-prose a{color:#8626a2;text-decoration:underline;text-underline-offset:3px}
.insight-prose a:hover{color:#5e1479}
.insight-prose strong,.insight-prose b{color:#26182e}
.insight-prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid #d97ff3;color:#4f4258;font-style:italic}
.insight-prose img{max-width:100%;height:auto;border-radius:14px}
.insight-prose figure{margin:1.8em 0}
.insight-prose figcaption{font-size:13px;color:#7a6e82;margin-top:8px}
.insight-prose table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:15px;display:block;overflow-x:auto}
.insight-prose th,.insight-prose td{border:1px solid #eadfec;padding:10px 12px;text-align:left;vertical-align:top}
.insight-prose th{background:#faf5fb}
.insight-prose pre{overflow-x:auto;padding:16px;border-radius:12px;background:#1b1025;color:#f3e9f6;font-size:14px}
.insight-source{margin:36px 0 0;padding-top:20px;border-top:1px solid #eee5f0;color:#7a6e82;font-size:14px}
.insight-source a{color:#8626a2;font-weight:700}
.insight-aside{position:sticky;top:110px}
.insight-aside-card{padding:28px;border:1px solid #eadfec;border-radius:20px;background:#fcfafc;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.insight-aside-card h2{font-size:23px;line-height:1.3;color:var(--company-ink,#191329);margin:0}
.insight-aside-card p{margin:0;color:#6b6175;font-size:14px;line-height:1.7}
.insight-aside-card .v2-btn{width:100%}
.insight-related{background:#faf7fb;padding:80px 0}

@media(max-width:1024px){
  .insight-article-layout{grid-template-columns:1fr;gap:36px}
  .insight-aside{position:static}
  .insight-article{max-width:none}
}
@media(max-width:820px){
  .insight-list-grid>a:last-child{grid-column:auto}
}
@media(max-width:600px){
  .insight-prose{font-size:16px}
  .insight-pagination{justify-content:center}
  .insight-page-step{flex:1 1 40%}
}

/* ---------- Floating WhatsApp button ---------- */
.wa-float{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:90;display:inline-flex;align-items:center;justify-content:center;height:58px;min-width:58px;padding:0 15px;border-radius:40px;background:#25d366;color:#fff;font-size:14px;font-weight:800;box-shadow:0 12px 30px rgba(18,140,74,.35),0 2px 6px rgba(0,0,0,.12);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.wa-float:hover{background:#1ebe5b;transform:translateY(-3px);box-shadow:0 16px 36px rgba(18,140,74,.42),0 2px 6px rgba(0,0,0,.12)}
.wa-float:focus-visible{outline:3px solid #1b1025;outline-offset:3px}
.wa-float-icon{flex:none;width:28px;height:28px}
/* The "Free Consultation" label is always visible, on every screen size. */
.wa-float{padding:0 20px 0 15px}
.wa-float-label{margin-left:10px;white-space:nowrap;letter-spacing:.01em;display:inline-grid;overflow:hidden}
/* Hover/focus: "Free Consultation" slides up and fades out while "Chat with us" slides in from below. */
.wa-float-text{grid-area:1/1;text-align:center;transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .3s ease}
.wa-float-text.is-hover{transform:translateY(110%);opacity:0}
.wa-float:hover .wa-float-text.is-default,.wa-float:focus-visible .wa-float-text.is-default{transform:translateY(-110%);opacity:0}
.wa-float:hover .wa-float-text.is-hover,.wa-float:focus-visible .wa-float-text.is-hover{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.wa-float-text{transition:opacity .2s ease}.wa-float-text.is-hover,.wa-float:hover .wa-float-text.is-default,.wa-float:focus-visible .wa-float-text.is-default{transform:none}}
@media(max-width:600px){
  .wa-float{height:50px;min-width:50px;padding:0 16px 0 12px;font-size:13px}
  .wa-float .wa-float-icon{width:24px;height:24px}
  .wa-float-label{margin-left:8px}
}
@media(prefers-reduced-motion:reduce){
  .wa-float,.insight-image.has-photo img{transition:none}
  .wa-float:hover{transform:none}
}
@media print{.wa-float{display:none}}

/* ---------- Contact form labels: keep text and required marker on one line ---------- */
.v2-contact-form label>.v2-field-label{display:inline-flex;align-items:baseline;gap:3px;color:#4b3d51;line-height:1.3}
.v2-contact-form .v2-required{color:#bc43c8;font-weight:800}

/* ---------- Audio Visual: solution family cards & brand logos ---------- */
.av-family-list{margin:10px 0 16px;padding-left:18px;color:#6b6175;font-size:13px;line-height:1.75}
.av-family-list li::marker{color:#a320d0}
.av-brand-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:8px 0 26px}
@media(max-width:900px){.av-brand-logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.av-brand-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- AV study cases ---------- */
.study-case-group{padding:72px 0}
.study-case-group.is-alt{background:#faf7fb}
.study-case-group .company-gallery-body h3{margin-bottom:0}

/* ---------- Cyber security pillars ---------- */
.cyber-pillar{padding:34px 0;border-top:1px solid #eee5f0;scroll-margin-top:110px}
.cyber-pillar:first-of-type{border-top:0}
.cyber-pillar-head span{font-size:10px;letter-spacing:.12em;font-weight:800;color:#8d34a6}
.cyber-pillar-head h3{font-size:clamp(24px,2.6vw,32px);color:#191329;margin:8px 0 20px;letter-spacing:-.6px}
.cyber-pillar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cyber-item{padding:22px;border:1px solid #eadfec;border-radius:16px;background:#fff;transition:box-shadow .2s,transform .2s}
.cyber-item:hover{transform:translateY(-3px);box-shadow:0 18px 36px #2b12351a}
.cyber-item h4{font-size:16px;color:#26182e;margin:0 0 8px}
.cyber-item p{font-size:13px;line-height:1.7;color:#6b6175;margin:0}
@media(max-width:900px){.cyber-pillar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cyber-pillar-grid{grid-template-columns:1fr}}

/* ---------- Other solutions ---------- */
.other-solution-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:start;padding:44px 0;border-top:1px solid #eee5f0;scroll-margin-top:110px}
.other-solution-row:first-of-type{border-top:0}
.other-solution-media{border-radius:20px;overflow:hidden;background:#f5eef7;aspect-ratio:4/3}
.other-solution-media img{width:100%;height:100%;object-fit:cover;display:block}
.other-solution-copy h3{font-size:clamp(26px,2.8vw,34px);color:#191329;margin:10px 0 12px;letter-spacing:-.6px}
.other-solution-copy>p{color:#5f5468;font-size:15px;line-height:1.8;margin:0 0 22px}
.other-solution-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px 26px}
.other-solution-groups h4{font-size:14px;color:#26182e;margin:0 0 8px}
.other-solution-groups ul{margin:0;padding-left:18px;color:#6b6175;font-size:13px;line-height:1.8}
.other-solution-groups li::marker{color:#a320d0}
.other-solution-brands{margin-top:26px}
.other-solution-brands>span{display:block;font-size:10px;letter-spacing:.12em;font-weight:800;color:#8d34a6;margin-bottom:12px}
.other-solution-brands>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:900px){.other-solution-row{grid-template-columns:1fr;gap:24px}}
@media(max-width:600px){.other-solution-brands>div{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Topbar: hide on scroll down, show on scroll up ---------- */
.site-chrome{position:sticky;top:0;z-index:60;transition:transform .3s ease}
.site-chrome .site-header{position:relative;top:auto}
.site-chrome.topbar-hidden{transform:translateY(calc(-1 * var(--topbar-h, 39px)))}
/* Keep the topbar reachable for keyboard users */
.site-chrome.topbar-hidden:has(.topbar :focus-visible){transform:none}
@media(prefers-reduced-motion:reduce){.site-chrome{transition:none}}

/* ---------- Hero photos (replacing illustrations) ---------- */
.hero-photo{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:#2a1736;box-shadow:0 28px 70px rgba(31,13,42,.22);isolation:isolate}
.hero-photo img{width:100%;height:115%;object-fit:cover;display:block;transform:translate3d(0,var(--parallax,0px),0) scale(1.02);will-change:transform}
.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,16,37,0) 55%,rgba(27,16,37,.45) 100%);pointer-events:none}
.hero-photo-badge{position:absolute;z-index:1;left:18px;bottom:18px;padding:10px 16px;border-radius:40px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:#26182e;font-size:12px;font-weight:800;box-shadow:0 10px 26px rgba(31,13,42,.18)}
.hero-photo-badge-top{top:18px;bottom:auto;left:auto;right:18px}
.stage-frame img{width:100%;height:100%;object-fit:cover}
.v2-feature-media img{object-fit:cover}
@media(max-width:820px){.hero-photo{aspect-ratio:16/10}.hero-photo-badge{font-size:11px}}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--progress,0));background:linear-gradient(90deg,#8c2ba8,#e34acb,#f1a4e7)}

/* ---------- Reveal on scroll (only when JS + motion are available) ---------- */
.anim-ready .reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .7s cubic-bezier(.2,.65,.3,1),transform .7s cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0ms)}
.anim-ready .reveal.reveal-left{transform:translate3d(-36px,0,0)}
.anim-ready .reveal.reveal-right{transform:translate3d(36px,0,0)}
.anim-ready .reveal.reveal-zoom{transform:scale(.94)}
.anim-ready .reveal.is-visible{opacity:1;transform:none}

/* ---------- Hero entrance ---------- */
@keyframes elita-rise{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@keyframes elita-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
.anim-ready .v2-hero-copy>*,.anim-ready .company-hero-grid>div:first-child>*,.anim-ready .av-hero-grid>div:first-child>*,.anim-ready .detail-hero-layout>div:first-child>*,.anim-ready .av-subhero .container>*,.anim-ready .insight-hero .container>*{animation:elita-rise .8s cubic-bezier(.2,.65,.3,1) both}
.anim-ready .v2-hero-copy>:nth-child(2),.anim-ready .company-hero-grid>div:first-child>:nth-child(2),.anim-ready .av-hero-grid>div:first-child>:nth-child(2),.anim-ready .detail-hero-layout>div:first-child>:nth-child(2),.anim-ready .av-subhero .container>:nth-child(2),.anim-ready .insight-hero .container>:nth-child(2){animation-delay:.08s}
.anim-ready .v2-hero-copy>:nth-child(3),.anim-ready .company-hero-grid>div:first-child>:nth-child(3),.anim-ready .av-hero-grid>div:first-child>:nth-child(3),.anim-ready .detail-hero-layout>div:first-child>:nth-child(3),.anim-ready .av-subhero .container>:nth-child(3),.anim-ready .insight-hero .container>:nth-child(3){animation-delay:.16s}
.anim-ready .v2-hero-copy>:nth-child(n+4),.anim-ready .company-hero-grid>div:first-child>:nth-child(n+4),.anim-ready .av-hero-grid>div:first-child>:nth-child(n+4),.anim-ready .detail-hero-layout>div:first-child>:nth-child(n+4),.anim-ready .av-subhero .container>:nth-child(n+4),.anim-ready .insight-hero .container>:nth-child(n+4){animation-delay:.24s}
.anim-ready .v2-hero-stage,.anim-ready .hero-photo,.anim-ready .company-hero-side{animation:elita-rise 1s .2s cubic-bezier(.2,.65,.3,1) both}
.anim-ready .stage-float-one{animation:elita-float 6s ease-in-out infinite}
.anim-ready .stage-float-two{animation:elita-float 7s 1.2s ease-in-out infinite}

/* ---------- Interactive hover ---------- */
.company-gallery-photo,.av-photo-thumb,.v2-feature-media{overflow:hidden}
.company-gallery-photo img,.v2-feature-media img{transition:transform .6s cubic-bezier(.2,.65,.3,1)}
.company-gallery-card:hover .company-gallery-photo img,.v2-feature-card:hover .v2-feature-media img{transform:scale(1.05)}
.company-gallery-card,.company-capabilities-grid>a,.v2-service-grid>a,.company-mission-list article{transition:transform .3s ease,box-shadow .3s ease}
.company-gallery-card:hover,.company-capabilities-grid>a:hover,.company-mission-list article:hover{transform:translateY(-5px);box-shadow:0 22px 44px #2b12351f}
/* Partner & portfolio logos: consistent size. Without JS the image files (trimmed of empty padding)
   fill a fixed box; with JS (script.js) each logo is sized by its aspect ratio for an even visual weight. */
.company-brand-tile img{height:34px;width:auto;max-width:82%;max-height:none;object-fit:contain}
.company-client-tile img{height:52px;width:auto;max-width:84%;max-height:none;object-fit:contain}
.company-brand-tile img.is-sized,.company-client-tile img.is-sized,.brand-logo-tile img.is-sized{max-width:none;max-height:none;object-fit:contain}
/* Partner & portfolio logos are always shown in their original colours */
.company-brand-tile img,.company-client-tile img,.brand-logo-tile img,.brand-rail-logos img{filter:none;opacity:1;transition:transform .3s ease}
.company-brand-tile:hover img,.company-client-tile:hover img,.brand-logo-tile:hover img{transform:scale(1.06)}
.tilt-card{transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease}
.tilt-card.is-tilting{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-4px)}
.v2-btn,.button,.nav-cta{position:relative;overflow:hidden}
.v2-btn:after,.button:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease;pointer-events:none}
.v2-btn:hover:after,.button:hover:after{transform:translateX(120%)}

@media(prefers-reduced-motion:reduce){
  .hero-photo img{transform:none}
  .company-gallery-photo img,.v2-feature-media img,.company-brand-tile img,.company-client-tile img,.tilt-card,.v2-btn:after,.button:after{transition:none}
  .scroll-progress{display:none}
}
@media print{.scroll-progress{display:none}.anim-ready .reveal{opacity:1;transform:none}}

/* ---------- Cyber security pillars: photo + intro ---------- */
.cyber-pillar-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center;margin-bottom:24px}
.cyber-pillar.is-reverse .cyber-pillar-media{order:2}
.cyber-pillar-media{position:relative;margin:0;border-radius:20px;overflow:hidden;aspect-ratio:3/2;background:#1b1025;box-shadow:0 20px 44px rgba(31,13,42,.16)}
.cyber-pillar-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.65,.3,1)}
.cyber-pillar:hover .cyber-pillar-media img{transform:scale(1.04)}
.cyber-pillar-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,16,37,0) 50%,rgba(27,16,37,.55) 100%);pointer-events:none}
.cyber-pillar-media figcaption{position:absolute;z-index:1;left:16px;bottom:14px;padding:7px 13px;border-radius:30px;background:rgba(255,255,255,.92);color:#26182e;font-size:11px;font-weight:800;letter-spacing:.04em}
.cyber-pillar-intro h3{margin-bottom:10px}
.cyber-pillar-intro p{margin:0;color:#5f5468;font-size:16px;line-height:1.75;max-width:520px}
@media(max-width:900px){
  .cyber-pillar-head{grid-template-columns:1fr;gap:20px}
  .cyber-pillar.is-reverse .cyber-pillar-media{order:0}
}
@media(prefers-reduced-motion:reduce){.cyber-pillar-media img{transition:none}}

/* ---------- Audio Visual hero: secondary button readable on the dark background ---------- */
.av-hero .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.av-hero .button-quiet{color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(6px);transition:background .2s ease,border-color .2s ease,transform .2s ease}
.av-hero .button-quiet:hover{background:rgba(255,255,255,.18);border-color:#fff;transform:translateY(-2px)}
.av-hero .button-quiet:focus-visible{outline:3px solid #f1a4e7;outline-offset:3px}

/* ---------- Abstract background shapes for light sections ----------
   Rounded diamonds (from the ELITA company profile), soft blobs, rings and dot grids.
   Purely decorative: drawn with pseudo-elements behind the content. */
main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section){position:relative;isolation:isolate;overflow:clip}
main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::before,
main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::after{content:"";position:absolute;z-index:-1;pointer-events:none;background-repeat:no-repeat}

/* Shape 1: large rounded diamond with outline, top-right */
main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::before{
  top:-140px;right:-160px;width:520px;height:520px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c35ad6' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%237a2a9a' stop-opacity='.03'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='42' y='42' width='116' height='116' rx='30' transform='rotate(45 100 100)' fill='url(%23g)'/%3E%3Crect x='20' y='20' width='160' height='160' rx='40' transform='rotate(45 100 100)' fill='none' stroke='%23a33cbf' stroke-opacity='.14' stroke-width='1'/%3E%3C/svg%3E");
  background-size:contain;animation:elita-drift 22s ease-in-out infinite}

/* Shape 2: dot grid fading out + small ring, bottom-left */
main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::after{
  left:-40px;bottom:-30px;width:360px;height:300px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='34' fill='none' stroke='%23d27be6' stroke-opacity='.28' stroke-width='1.4'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%23e8a6f0' fill-opacity='.35'/%3E%3C/svg%3E"),
    radial-gradient(circle,rgba(149,42,177,.18) 1.4px,transparent 1.6px);
  background-size:120px 120px,18px 18px;
  background-position:right 10px top 0,0 0;
  background-repeat:no-repeat,repeat;
  -webkit-mask-image:radial-gradient(ellipse at 30% 70%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at 30% 70%,#000 25%,transparent 72%)}

/* Alternate sections mirror the composition so pages don't repeat the same look */
main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section):nth-of-type(even)::before{right:auto;left:-180px;top:auto;bottom:-170px;width:460px;height:460px;animation-delay:-8s}
main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section):nth-of-type(even)::after{left:auto;right:-30px;bottom:auto;top:30px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at 70% 30%,#000 25%,transparent 72%);background-position:left 10px bottom 0,0 0}

/* Every third section adds a soft colour glow for depth */
main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section):nth-of-type(3n)::before{
  background-image:radial-gradient(circle at 50% 50%,rgba(241,164,231,.22),transparent 62%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect x='42' y='42' width='116' height='116' rx='30' transform='rotate(45 100 100)' fill='none' stroke='%23a33cbf' stroke-opacity='.16' stroke-width='1'/%3E%3Crect x='70' y='70' width='60' height='60' rx='16' transform='rotate(45 100 100)' fill='%23c35ad6' fill-opacity='.07'/%3E%3C/svg%3E");
  background-size:contain,contain}

/* Short sections get smaller shapes */
main > :is(.av-note-band,.company-cyber-deck)::before{width:340px;height:340px}

@keyframes elita-drift{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(-18px,14px,0) rotate(6deg)}}

@media(max-width:820px){
  main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::before{width:300px;height:300px;right:-130px;top:-90px;opacity:.8}
  main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section):nth-of-type(even)::before{left:-130px;bottom:-110px;width:280px;height:280px}
  main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::after{width:220px;height:200px;opacity:.7}
}
@media(prefers-reduced-motion:reduce){
  main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::before{animation:none}
}
@media print{
  main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::before,
  main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::after{display:none}
}

/* ---------- Page header shapes ----------
   Dark headers (home, company, portfolio, insights, AV pages) use light shapes;
   light headers (cyber security, other solutions) use purple shapes. */
:is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero){position:relative;isolation:isolate}
:is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero)::before,
:is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero)::after{content:"";position:absolute;z-index:-1;pointer-events:none;background-repeat:no-repeat}

/* Large double rounded diamond, right side */
:is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero)::before{top:-18%;right:-10%;width:min(62vw,760px);aspect-ratio:1;background-size:contain;animation:elita-header-spin 40s linear infinite}
:is(.v2-hero,.company-hero,.av-hero,.av-subhero)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f1a4e7' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='22' y='22' width='156' height='156' rx='38' transform='rotate(45 100 100)' fill='none' stroke='%23f1a4e7' stroke-opacity='.28' stroke-width='.7'/%3E%3Crect x='52' y='52' width='96' height='96' rx='24' transform='rotate(45 100 100)' fill='url(%23g)' stroke='%23ffffff' stroke-opacity='.18' stroke-width='.7' stroke-dasharray='3 4'/%3E%3Ccircle cx='100' cy='13' r='2.4' fill='%23f1a4e7' fill-opacity='.8'/%3E%3C/svg%3E")}
.detail-hero::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c35ad6' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%23c35ad6' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='22' y='22' width='156' height='156' rx='38' transform='rotate(45 100 100)' fill='none' stroke='%23a33cbf' stroke-opacity='.22' stroke-width='.7'/%3E%3Crect x='52' y='52' width='96' height='96' rx='24' transform='rotate(45 100 100)' fill='url(%23g)' stroke='%23a33cbf' stroke-opacity='.18' stroke-width='.7' stroke-dasharray='3 4'/%3E%3Ccircle cx='100' cy='13' r='2.4' fill='%23a33cbf' fill-opacity='.6'/%3E%3C/svg%3E")}

/* Small floating accents near the edges: plus sign, ring, mini diamond and a soft glow */
:is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero)::after{inset:0;animation:elita-header-float 14s ease-in-out infinite;
  background-size:22px 22px,46px 46px,60px 60px,520px 520px;
  background-position:3% 16%,54% 94%,97% 86%,-140px calc(100% + 160px)}
:is(.v2-hero,.company-hero,.av-hero,.av-subhero)::after{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2v16M2 10h16' stroke='%23f1a4e7' stroke-opacity='.75' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='2'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='10' y='10' width='20' height='20' rx='5' transform='rotate(45 20 20)' fill='%23e34acb' fill-opacity='.55'/%3E%3C/svg%3E"),
  radial-gradient(circle,rgba(227,74,203,.22),transparent 65%)}
.detail-hero::after{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2v16M2 10h16' stroke='%23a33cbf' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23a33cbf' stroke-opacity='.3' stroke-width='2'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='10' y='10' width='20' height='20' rx='5' transform='rotate(45 20 20)' fill='%23c35ad6' fill-opacity='.35'/%3E%3C/svg%3E"),
  radial-gradient(circle,rgba(241,164,231,.35),transparent 65%)}

/* Home already has its own orbs: keep the diamond a little softer there */
.v2-hero::before{opacity:.8}

@keyframes elita-header-spin{to{transform:rotate(360deg)}}
@keyframes elita-header-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}}

@media(max-width:820px){
  :is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero)::before{width:110vw;top:-30%;right:-55%;opacity:.7}
  :is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero)::after{background-size:16px 16px,32px 32px,42px 42px,360px 360px;background-position:4% 8%,60% 98%,96% 94%,-120px calc(100% + 120px)}
}
@media(prefers-reduced-motion:reduce){
  :is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero)::before,
  :is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero)::after{animation:none}
}
@media print{
  :is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero)::before,
  :is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero)::after{display:none}
}

/* ---------- Moving shapes for light sections (injected by animations.js) ---------- */
.section-shapes{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.section-shapes .shape{position:absolute;display:block;will-change:transform}
.section-shapes .shape-diamond{top:12%;right:7%;width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,rgba(227,74,203,.38),rgba(140,43,168,.12));box-shadow:0 12px 30px rgba(140,43,168,.14);animation:elita-shape-float 9s ease-in-out infinite}
.section-shapes .shape-ring{bottom:12%;left:5%;width:74px;height:74px;border-radius:50%;border:2px solid rgba(163,60,191,.24);animation:elita-shape-orbit 16s linear infinite}
.section-shapes .shape-dot{top:24%;left:11%;width:14px;height:14px;border-radius:50%;background:rgba(227,74,203,.5);box-shadow:0 0 0 8px rgba(227,74,203,.08),0 0 24px rgba(227,74,203,.35);animation:elita-shape-bob 6s ease-in-out infinite}
.section-shapes .shape-plus{bottom:20%;right:20%;width:22px;height:22px;background:linear-gradient(rgba(163,60,191,.42),rgba(163,60,191,.42)) center/100% 2.5px no-repeat,linear-gradient(rgba(163,60,191,.42),rgba(163,60,191,.42)) center/2.5px 100% no-repeat;animation:elita-shape-spin 12s linear infinite}
.section-shapes .shape-outline{top:58%;right:3%;width:30px;height:30px;border-radius:8px;border:2px solid rgba(195,90,214,.32);animation:elita-shape-sway 11s ease-in-out infinite}

/* Mirror the layout on alternating sections */
.section-shapes.is-mirrored .shape-diamond{right:auto;left:7%}
.section-shapes.is-mirrored .shape-ring{left:auto;right:5%}
.section-shapes.is-mirrored .shape-dot{left:auto;right:11%}
.section-shapes.is-mirrored .shape-plus{right:auto;left:20%}
.section-shapes.is-mirrored .shape-outline{right:auto;left:3%}

/* Pause when the section is off-screen */
.section-shapes.is-paused .shape,main > .is-shapes-paused::before,main > .is-shapes-paused::after{animation-play-state:paused}

/* Make the existing section decorations move a little more visibly */
main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::before{animation:elita-drift-wide 18s ease-in-out infinite}
main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::after{animation:elita-shape-bob 10s ease-in-out infinite}

@keyframes elita-shape-float{0%,100%{transform:translate3d(0,0,0) rotate(45deg)}50%{transform:translate3d(-10px,-26px,0) rotate(135deg)}}
@keyframes elita-shape-orbit{from{transform:rotate(0deg) translateX(22px) rotate(0deg)}to{transform:rotate(360deg) translateX(22px) rotate(-360deg)}}
@keyframes elita-shape-bob{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-18px,0) scale(1.08)}}
@keyframes elita-shape-spin{to{transform:rotate(360deg)}}
@keyframes elita-shape-sway{0%,100%{transform:translate3d(0,0,0) rotate(45deg)}50%{transform:translate3d(-22px,12px,0) rotate(-15deg)}}
@keyframes elita-drift-wide{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(-34px,26px,0) rotate(10deg)}}

@media(max-width:820px){
  .section-shapes .shape-dot,.section-shapes .shape-outline{display:none}
  .section-shapes .shape-diamond{width:34px;height:34px;top:6%}
  .section-shapes .shape-ring{width:52px;height:52px;bottom:5%}
  .section-shapes .shape-plus{bottom:6%}
}
@media(prefers-reduced-motion:reduce){
  .section-shapes .shape,
  main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::before,
  main > :is(.v2-solutions,.v2-about,.v2-insights,.company-section,.detail-content,.av-section-intro,.av-detail-list,.brand-matrix-section,.av-category-section,.av-note-band,.insight-list-section,.insight-article-section)::after{animation:none}
}
@media print{.section-shapes{display:none}}

/* ---------- Home: transparent navbar over the hero, white after scrolling past it ---------- */
.home-v2 .site-chrome{position:fixed;top:0;left:0;right:0}
.home-v2 .v2-hero{padding-top:calc(var(--hero-pad,89px) + var(--chrome-h,127px))}
@media(max-width:820px){.home-v2 .v2-hero{--hero-pad:64px}}
@media(max-width:600px){.home-v2 .v2-hero{--hero-pad:51px}}

.site-chrome .topbar,.site-chrome .site-header{transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
.site-chrome .company-brand-mark,.site-chrome .company-brand-caption,.site-chrome .main-nav>a,.site-chrome .nav-dropdown-trigger,.site-chrome .nav-cta,.site-chrome .menu-toggle span{transition:color .35s ease,background-color .35s ease,filter .35s ease}

/* Transparent only while the pointer and keyboard focus are elsewhere: hovering the navbar fades it to the default white style. */
.site-chrome.is-transparent:not(:hover):not(:focus-within) .topbar{background:transparent;border-bottom:0}
.site-chrome.is-transparent:not(:hover):not(:focus-within) .site-header{background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none}
.site-chrome.is-transparent:not(:hover):not(:focus-within) .company-brand-mark{filter:brightness(0) invert(1)}
.site-chrome.is-transparent:not(:hover):not(:focus-within) .company-brand-caption{color:rgba(255,255,255,.8)}
.site-chrome.is-transparent:not(:hover):not(:focus-within) .menu-toggle span{background:#fff}
@media(min-width:821px){
  .site-chrome.is-transparent:not(:hover):not(:focus-within) .main-nav>a:not(.nav-cta),.site-chrome.is-transparent:not(:hover):not(:focus-within) .nav-dropdown-trigger{color:rgba(255,255,255,.88)}
  /* Active item stays readable on the dark hero; !important beats `.company-subpage .main-nav a.active` in company.css. */
  .site-chrome.is-transparent:not(:hover):not(:focus-within) .main-nav>a.active,.site-chrome.is-transparent:not(:hover):not(:focus-within) .nav-dropdown-trigger.active{color:#f1a4e7!important}
  .site-chrome.is-transparent:not(:hover):not(:focus-within) .main-nav .nav-cta{background:#f1a4e7;color:#29152f!important}
}

/* Pages whose first section is a dark hero get the same overlay navbar as home (assets/script.js toggles .is-transparent). */
body:has(> main > :is(.av-hero,.av-subhero,.company-hero):first-child) .site-chrome{position:fixed;top:0;left:0;right:0}
/* The transparent border reserves room for the fixed navbar while the hero background still paints behind it. */
body:has(> main > :is(.av-hero,.av-subhero,.company-hero):first-child) main > :is(.av-hero,.av-subhero,.company-hero):first-child{border-top:var(--chrome-h,127px) solid transparent;background-origin:border-box!important}
@media(prefers-reduced-motion:reduce){
  .site-chrome .topbar,.site-chrome .site-header,.site-chrome .company-brand-mark,.site-chrome .company-brand-caption,.site-chrome .main-nav>a,.site-chrome .nav-dropdown-trigger,.site-chrome .nav-cta,.site-chrome .menu-toggle span{transition:none}
}

/* ---------- Footer background shapes ---------- */
.site-footer{position:relative;isolation:isolate;overflow:hidden}
.site-footer::before,.site-footer::after{content:"";position:absolute;z-index:-1;pointer-events:none;background-repeat:no-repeat}
/* Large outline diamond, top-right, drifting slowly */
.site-footer::before{top:-180px;right:-140px;width:520px;height:520px;background-size:contain;animation:elita-drift-wide 24s ease-in-out infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e34acb' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%23e34acb' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='22' y='22' width='156' height='156' rx='38' transform='rotate(45 100 100)' fill='none' stroke='%23f1a4e7' stroke-opacity='.16' stroke-width='.8'/%3E%3Crect x='56' y='56' width='88' height='88' rx='22' transform='rotate(45 100 100)' fill='url(%23g)' stroke='%23ffffff' stroke-opacity='.08' stroke-width='.8' stroke-dasharray='3 4'/%3E%3C/svg%3E")}
/* Glow, dot grid, plus sign and ring on the left */
.site-footer::after{inset:0;animation:elita-header-float 16s ease-in-out infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2v16M2 10h16' stroke='%23f1a4e7' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='2'/%3E%3C/svg%3E"),
    radial-gradient(circle,rgba(227,74,203,.16),transparent 65%),
    radial-gradient(circle,rgba(241,164,231,.16) 1.3px,transparent 1.5px);
  background-size:18px 18px,44px 44px,560px 560px,18px 18px;
  background-position:46% 18%,30% 88%,-200px calc(100% + 220px),0 0;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.6) 28%,transparent 55%);mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.6) 28%,transparent 55%)}
@media(max-width:820px){.site-footer::before{width:320px;height:320px;top:-120px;right:-150px}}
@media(prefers-reduced-motion:reduce){.site-footer::before,.site-footer::after{animation:none}}

/* ---------- Floating back-to-top button (above the WhatsApp button) ---------- */
.to-top{position:fixed;z-index:90;right:max(23px,calc(env(safe-area-inset-right) + 3px));bottom:calc(max(20px,env(safe-area-inset-bottom)) + 58px + 14px);width:52px;height:52px;padding:0;border:0;border-radius:50%;background:#1b1025;color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 12px 28px rgba(27,16,37,.3);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s,background .2s ease}
.to-top[hidden]{display:none}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease,visibility 0s,background .2s ease}
.to-top:hover{background:#8c2ba8}
.to-top:hover .to-top-icon{transform:translateY(-2px)}
.to-top:focus-visible{outline:3px solid #f1a4e7;outline-offset:3px}
.to-top-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.to-top-ring circle{fill:none;stroke-width:2.5}
.to-top-track{stroke:rgba(255,255,255,.14)}
.to-top-progress{stroke:#f1a4e7;stroke-linecap:round;transition:stroke-dashoffset .15s linear}
.to-top-icon{position:relative;transition:transform .2s ease}
@media(max-width:600px){.to-top{width:46px;height:46px;right:max(24px,calc(env(safe-area-inset-right) + 4px));bottom:calc(max(20px,env(safe-area-inset-bottom)) + 50px + 12px)}}
/* Hover / keyboard focus: the round button expands horizontally into a pill (growing to the left, since it is
   anchored on the right) and "Back to top" fades in to the right of the arrow. The circular progress ring fades out
   while expanded, so it never gets stretched. */
.to-top{display:flex;align-items:center;justify-content:center;width:auto;min-width:52px;padding:0 16px;border-radius:30px}
.to-top-label{max-width:0;margin-left:0;overflow:hidden;white-space:nowrap;opacity:0;font-size:12px;font-weight:800;letter-spacing:.02em;
  transition:max-width .35s cubic-bezier(.2,.7,.3,1),margin .35s cubic-bezier(.2,.7,.3,1),opacity .25s ease}
.to-top:hover .to-top-label,.to-top:focus-visible .to-top-label{max-width:110px;margin-left:8px;opacity:1}
.to-top-ring{transition:opacity .2s ease}
.to-top:hover .to-top-ring,.to-top:focus-visible .to-top-ring{opacity:0}
@media(max-width:600px){.to-top{min-width:46px;padding:0 13px}}
@media(prefers-reduced-motion:reduce){.to-top,.to-top.is-visible,.to-top-progress,.to-top-icon,.to-top-label,.to-top-ring{transition:none}}
@media print{.to-top{display:none}}

/* ---------- Office map in the homepage inquiry section ---------- */
.office-map{position:relative;display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);margin-top:64px;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 60px rgba(10,4,16,.35);backdrop-filter:blur(8px)}
.office-map-card{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:40px 36px}
.office-map-kicker{display:flex;align-items:center;gap:10px;color:#d8a6e4;font-size:10px;font-weight:800;letter-spacing:.17em}
.office-map-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:#d879e6;box-shadow:0 0 0 4px #7a3f8966}
.office-map-card h3{margin:0;color:#fff;font-size:24px;line-height:1.3;letter-spacing:-.5px}
.office-map-card address{font-style:normal;color:#e6d8ed;font-size:14px;line-height:1.8}
.office-map-frame{position:relative;min-height:360px;background:#2a1736}
.office-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.office-map-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.office-map-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:40px;border:1px solid rgba(255,255,255,.35);color:#f9eefb;font-size:12px;font-weight:800;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.office-map-btn:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.office-map-btn-primary{background:#f1a4e7;border-color:#f1a4e7;color:#29152f}
.office-map-btn-primary:hover{background:#ffd0f5;border-color:#ffd0f5}
.office-map-btn:focus-visible{outline:3px solid #f1a4e7;outline-offset:3px}
@media(max-width:820px){
  .office-map{grid-template-columns:1fr;margin-top:44px}
  .office-map-card{padding:28px 24px}
  .office-map-frame{min-height:0;aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){.office-map-btn{transition:none}}

/* ---------- Insight cards: category label readable on any photo (light or dark) ---------- */
.insight-image.has-photo>span:not(.insight-image-arrow),.insight-image .insight-category{display:inline-flex;align-items:center;padding:7px 12px;border-radius:30px;background:rgba(27,16,37,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:9px;font-weight:800;letter-spacing:.12em;line-height:1.2;box-shadow:0 4px 14px rgba(0,0,0,.18)}

/* ---------- Home hero: clickable Audio Visual / Cyber Security cards ---------- */
a.stage-float{color:#29182f;cursor:pointer;transition:box-shadow .25s ease}
a.stage-float:hover{box-shadow:0 20px 48px #15062077,0 0 0 2px #f1a4e7}
a.stage-float .float-arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f7e7f7;transition:background .2s ease,color .2s ease,transform .2s ease}
a.stage-float:hover .float-arrow{background:#982db5;color:#fff;transform:translate(2px,-2px)}
a.stage-float:focus-visible{outline:3px solid #f1a4e7;outline-offset:3px}
@media(prefers-reduced-motion:reduce){a.stage-float,a.stage-float .float-arrow{transition:none}}

/* ---------- AV Solutions: study cases merged into each solution row ---------- */
.av-case-main{position:relative;margin:0}
.av-case-main figcaption{position:absolute;z-index:2;left:16px;bottom:16px;padding:8px 14px;border-radius:30px;background:rgba(27,16,37,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.av-case-strip{margin-top:24px;padding-top:20px;border-top:1px solid #eee5f0}
.av-case-strip h3{margin-top:0}
.av-case-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.av-case-thumb{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#f5eef7;box-shadow:0 10px 24px rgba(31,13,42,.1)}
.av-case-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.65,.3,1)}
.av-case-thumb:hover img{transform:scale(1.06)}
.av-case-thumb figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;background:linear-gradient(180deg,transparent,rgba(27,16,37,.82));color:#fff;font-size:12px;font-weight:800;line-height:1.3}
@media(prefers-reduced-motion:reduce){.av-case-thumb img{transition:none}}

/* ---------- AV Solutions: family filter links (/solutions/av-solutions/{family}) ---------- */
.av-family-links a{transition:color .2s,border-color .2s}
.av-family-links a:hover{color:#fff;border-bottom-color:#fff}
.av-family-links a.is-active{color:#fff;border-bottom:2px solid #fff}

/* ---------- Cyber security: clickable pillar cards (overview + "more pillars") ---------- */
.cyber-pillar-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cyber-pillar-cards.is-compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.cyber-pillar-card{display:flex;flex-direction:column;border:1px solid #eadfec;border-radius:18px;overflow:hidden;background:#fff;color:inherit;box-shadow:0 10px 35px rgba(44,9,54,.04);transition:transform .25s,box-shadow .25s,border-color .25s;scroll-margin-top:120px}
.cyber-pillar-card:hover{transform:translateY(-5px);border-color:#dcc4e3;box-shadow:0 22px 44px rgba(43,18,53,.12)}
.cyber-pillar-card:focus-visible{outline:3px solid #b84ec3;outline-offset:3px}
.cyber-pillar-card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#1b1025}
.cyber-pillar-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.cyber-pillar-card:hover .cyber-pillar-card-media img{transform:scale(1.045)}
.cyber-pillar-card-media>span{position:absolute;left:14px;top:14px;background:#5d147b;color:#fff;border-radius:30px;padding:6px 11px;font-size:12px;font-weight:700}
.cyber-pillar-card-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.cyber-pillar-card-body small{font-size:10px;letter-spacing:.12em;font-weight:800;color:#8d34a6}
.cyber-pillar-card-body h3{font-size:clamp(20px,2vw,24px);color:#191329;margin:8px 0 8px;letter-spacing:-.4px}
.cyber-pillar-card-body p{margin:0 0 16px;color:#6b6175;font-size:13px;line-height:1.7}
.cyber-pillar-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.cyber-pillar-card-tags li{padding:5px 10px;border-radius:30px;background:#f6eff8;color:#5b3b64;font-size:11px;font-weight:700}
.cyber-pillar-card-body b{margin-top:auto;color:#8626a2;font-size:12px}
.cyber-pillar-cards.is-compact .cyber-pillar-card-tags{display:none}
.cyber-other-pillars{background:#faf7fb}
@media(max-width:900px){.cyber-pillar-cards.is-compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cyber-pillar-cards,.cyber-pillar-cards.is-compact{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cyber-pillar-card,.cyber-pillar-card-media img{transition:none}}

/* ---------- Cyber security pillar detail: one illustrated card per solution ---------- */
.cyber-solution-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cyber-solution-grid.is-quad{grid-template-columns:repeat(4,minmax(0,1fr))}
.cyber-solution-grid.is-pair{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin-inline:auto}
.cyber-solution-card{display:flex;flex-direction:column;border:1px solid #eadfec;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 10px 35px rgba(44,9,54,.04);transition:transform .25s,box-shadow .25s;scroll-margin-top:120px}
.cyber-solution-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(43,18,53,.11)}
.cyber-solution-media{position:relative;display:grid;place-items:center;margin:0;padding:28px 20px;background:radial-gradient(circle at 50% 45%,#fff 0,#f6eff8 62%,#efe3f3 100%)}
.cyber-solution-media img{width:112px;height:112px;object-fit:contain;transition:transform .4s cubic-bezier(.2,.65,.3,1)}
.cyber-solution-card:hover .cyber-solution-media img{transform:scale(1.07) translateY(-2px)}
.cyber-solution-media span{position:absolute;left:14px;top:14px;padding:5px 10px;border-radius:30px;background:#5d147b;color:#fff;font-size:11px;font-weight:800}
.cyber-solution-body{padding:20px 22px 24px}
.cyber-solution-body h3{margin:0 0 10px;font-size:18px;line-height:1.3;color:#191329;letter-spacing:-.3px}
.cyber-solution-body p{margin:0 0 10px;color:#5f5468;font-size:13.5px;line-height:1.7}
.cyber-solution-body ul{margin:4px 0 12px;padding:0;list-style:none;display:grid;gap:7px}
.cyber-solution-body li{position:relative;padding-left:22px;color:#3f3347;font-size:13.5px;line-height:1.5}
.cyber-solution-body li:before{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;background:#f3e6f7;box-shadow:inset 0 0 0 3.5px #b84ec3}
.cyber-solution-note{padding:10px 12px;border-left:3px solid #b84ec3;border-radius:0 10px 10px 0;background:#faf7fb;font-size:12.5px!important;color:#5b3b64!important}
.cyber-solution-body>:last-child{margin-bottom:0}
@media(max-width:1100px){.cyber-solution-grid.is-quad{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.cyber-solution-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cyber-solution-grid,.cyber-solution-grid.is-quad,.cyber-solution-grid.is-pair{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cyber-solution-card,.cyber-solution-media img{transition:none}}

/* Portfolio organization without a logo file yet: show its name as a wordmark */
.company-client-tile.is-text span{font-family:'Manrope',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;color:#26182e;text-align:center;line-height:1.2}

/* ---------- Page header parallax (assets/animations.js sets --hero-y / --hero-p on main's first header) ----------
   Uses the individual `translate` property so it composes with the entrance, spin and floating animations, which use `transform`. */
.anim-ready :is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero){--hero-y:0;--hero-p:0}
/* Large background diamond drifts down with the copy. The small-shape layer (::after) stays put: it is clipped at its
   own box, so moving it would reveal that edge as a hard line on the left of the header. */
.anim-ready :is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero)::before{translate:0 calc(var(--hero-y) * .55px)}
/* Copy and photo move as one scene: both lag behind the scroll in the same direction (the photo only slightly
   less, for depth) and fade together, so they stay in sync. Speeds live in custom properties. */
.anim-ready main>:first-child{--copy-speed:.38;--photo-speed:.3;--image-speed:.12;--card-speed:-.1}
.anim-ready :is(.company-hero-grid,.av-hero-grid,.detail-hero-layout)>div:first-child,
.anim-ready .av-subhero>.container,
.anim-ready .insight-hero>.container,
.anim-ready .insight-article-head,
.anim-ready .v2-hero-copy{translate:0 calc(var(--hero-y) * var(--copy-speed) * 1px);opacity:calc(1 - var(--hero-p) * 1.3);will-change:translate,opacity}
.anim-ready :is(.av-hero,.detail-hero) .hero-photo,
.anim-ready .company-hero-side,
.anim-ready .v2-hero-stage{translate:0 calc(var(--hero-y) * var(--photo-speed) * 1px);scale:calc(1 - var(--hero-p) * .08);opacity:calc(1 - var(--hero-p) * 1.1);will-change:translate,scale,opacity}
/* Inside the frame the photo drifts further down (window effect), zooms in and darkens. It is 140% tall and starts
   shifted up by 1/7 of its height, leaving equal room above and below, so it always covers the frame. */
.anim-ready main>:first-child :is(.hero-photo,.stage-frame,.company-hero-side) img{
  height:140%;transform-origin:50% 50%;will-change:transform;
  transform:translate3d(0,calc(-14.28% + var(--hero-y) * var(--image-speed) * 1px),0) scale(calc(1.02 + var(--hero-p) * .18));
  filter:brightness(calc(1 - var(--hero-p) * .3))!important}
/* Home: the floating solution cards lift slightly against the photo, for a third layer of depth. */
.anim-ready .v2-hero .stage-float-one{translate:0 calc(var(--hero-y) * var(--card-speed) * 1px)}
.anim-ready .v2-hero .stage-float-two{translate:0 calc(var(--hero-y) * var(--card-speed) * 1.6px)}

/* Stacked layout on small screens: gentler, so the copy does not slide over the photo below it. */
@media(max-width:820px){
  /* Copy and photo move at the same speed here: any difference would close the gap between them while scrolling. */
  .anim-ready main>:first-child{--copy-speed:.14;--photo-speed:.14;--image-speed:.07;--card-speed:-.04}
  .anim-ready :is(.company-hero-grid,.av-hero-grid,.detail-hero-layout)>div:first-child,
  .anim-ready .av-subhero>.container,.anim-ready .insight-hero>.container,.anim-ready .insight-article-head,
  .anim-ready .v2-hero-copy,.anim-ready :is(.av-hero,.detail-hero) .hero-photo,.anim-ready .company-hero-side,.anim-ready .v2-hero-stage{opacity:1}
}

/* Home hero layers */
.anim-ready .v2-hero-noise{translate:0 calc(var(--hero-y) * .12px)}
.anim-ready .v2-hero-orb.orb-one{translate:0 calc(var(--hero-y) * .65px)}
.anim-ready .v2-hero-orb.orb-two{translate:0 calc(var(--hero-y) * -.35px)}
.anim-ready .v2-hero-footer{opacity:calc(1 - var(--hero-p) * 2.2)}

/* ---------- Dark page header: fade its bottom edge into the light content below ----------
   A mask fades the whole header (background, shapes and parallax layers) to transparent, so the light page
   background shows through. The extra bottom padding keeps the copy and photos out of the faded strip. */
main{--hero-fade:220px}
/* Eased fade: the dark colour lingers through the first part of the strip and only clears near the bottom,
   so it reads as dark melting into white rather than white creeping up into the header. */
main>:is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero):first-child{
  z-index:1;
  --hero-fade-mask:linear-gradient(180deg,
    #000 calc(100% - var(--hero-fade)),
    rgba(0,0,0,.97) calc(100% - var(--hero-fade) * .85),
    rgba(0,0,0,.9) calc(100% - var(--hero-fade) * .7),
    rgba(0,0,0,.76) calc(100% - var(--hero-fade) * .55),
    rgba(0,0,0,.56) calc(100% - var(--hero-fade) * .4),
    rgba(0,0,0,.34) calc(100% - var(--hero-fade) * .26),
    rgba(0,0,0,.15) calc(100% - var(--hero-fade) * .13),
    transparent);
  -webkit-mask-image:var(--hero-fade-mask);
  mask-image:var(--hero-fade-mask)}
/* Content and accents stay entirely above the fading strip, with breathing room, so nothing gets washed out. */
main>:is(.company-hero,.av-hero,.av-subhero,.detail-hero):first-child{padding-bottom:calc(var(--hero-fade) + 56px)}
main>.v2-hero:first-child .v2-hero-footer{margin-bottom:calc(var(--hero-fade) + 8px)}
/* Small header accents (plus, ring, mini diamond) are lifted out of the strip; the soft glow may fade naturally. */
main>:is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero):first-child::after{
  background-position:left 3% top 16%,left 54% bottom calc(var(--hero-fade) + 20px),right 3% bottom calc(var(--hero-fade) + 44px),-140px calc(100% + 160px)}
/* The next section slides up under the faded strip (its background also paints below a transparent top border),
   so the header fades straight into that section's own colour on every page, whatever it is. */
main>:is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero):first-child+*{
  margin-top:calc(-1 * var(--hero-fade));border-top:var(--hero-fade) solid transparent;
  background-origin:border-box;
  /* Anchor links (e.g. #capabilities) land on the content, not on the hidden strip. */
  scroll-margin-top:calc(-1 * var(--hero-fade))}
@media(max-width:820px){
  main{--hero-fade:140px}
  main>:is(.company-hero,.av-hero,.av-subhero,.detail-hero):first-child{padding-bottom:calc(var(--hero-fade) + 36px)}
  main>:is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero):first-child::after{
    /* The plus sign sits low on the right on phones: at the top-left it collided with the breadcrumb and eyebrow. */
    background-position:right 7% bottom calc(var(--hero-fade) + 96px),left 60% bottom calc(var(--hero-fade) + 12px),right 4% bottom calc(var(--hero-fade) + 28px),-120px calc(100% + 120px)}
}

/* ---------- Home: auto-scrolling brand logo carousel (partials/brand-marquee) ----------
   Row 1 moves right, row 2 moves left. Each track holds two identical groups and moves exactly -50%,
   so the loop is seamless. The edges fade out; hover or keyboard focus pauses it. */
.brand-marquee{display:grid;gap:12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.brand-marquee-row{overflow:hidden;padding:4px 0}
.brand-marquee-track{display:flex;width:max-content;will-change:transform;animation:brand-marquee-left var(--marquee-duration,48s) linear infinite}
.brand-marquee-row.is-right .brand-marquee-track{animation-name:brand-marquee-right}
.brand-marquee-group{display:flex;flex:none;gap:12px;padding-right:12px}
.brand-marquee .company-brand-tile{flex:none;width:184px;min-height:83px}
.brand-marquee:hover .brand-marquee-track,.brand-marquee:focus-within .brand-marquee-track{animation-play-state:paused}
@keyframes brand-marquee-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes brand-marquee-right{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@media(max-width:600px){.brand-marquee .company-brand-tile{width:142px;min-height:70px;padding:14px 10px}}
/* Reduced motion: no movement; each row can be scrolled sideways instead and the duplicate copy is dropped. */
@media(prefers-reduced-motion:reduce){
  .brand-marquee{-webkit-mask-image:none;mask-image:none}
  .brand-marquee-row{overflow-x:auto}
  .brand-marquee-track{animation:none!important}
  .brand-marquee-group[aria-hidden="true"]{display:none}
}

/* Home "Other solutions" cards: line icons inside the existing rounded badge */
.v2-service-grid .service-symbol svg{display:block;width:24px;height:24px;transition:transform .25s ease}
.v2-service-grid a:hover .service-symbol svg{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){.v2-service-grid .service-symbol svg{transition:none}}

/* ---------- Page header image: 3D tilt on hover (assets/animations.js adds .hero-tilt and sets the variables) ----------
   The entrance animation keeps only its start state ("backwards"), otherwise its final `transform:none` would block the tilt. */
.anim-ready main>:first-child :is(.v2-hero-stage,.hero-photo,.company-hero-side){animation-fill-mode:backwards}
.hero-tilt{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .7s cubic-bezier(.2,.65,.3,1),box-shadow .4s ease}
.hero-tilt.is-tilting{transition-duration:.18s,.4s}
.hero-tilt:is(.hero-photo,.company-hero-side).is-tilting,.hero-tilt.is-tilting .stage-frame{box-shadow:0 40px 90px rgba(16,7,24,.45)}
/* Soft light that follows the pointer across the photo */
.tilt-glare{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%),rgba(255,255,255,.32),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light}
.is-tilting .tilt-glare{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-tilt{transform:none;transition:none}.tilt-glare{display:none}}

/* ---------- Navbar logo: looping animation while the navbar is hovered or focused ----------
   One cycle (3.6s): fade out → fade in → hold → swipe out to the right → swipe back in from the left → hold.
   The swipe is a wipe (clip-path) plus a small slide. Uses `translate` so it never conflicts with other transforms. */
@keyframes elita-logo-loop{
  0%,8%{opacity:1;clip-path:inset(0 0 0 0);translate:0 0}
  20%{opacity:0;clip-path:inset(0 0 0 0);translate:0 0}
  34%,46%{opacity:1;clip-path:inset(0 0 0 0);translate:0 0}
  60%{opacity:.2;clip-path:inset(0 0 0 100%);translate:14px 0}
  60.01%{opacity:.2;clip-path:inset(0 100% 0 0);translate:-14px 0}
  76%,100%{opacity:1;clip-path:inset(0 0 0 0);translate:0 0}
}
/* Identical copy: used to restart the animation for the automatic replay (see .logo-replay-b below). */
@keyframes elita-logo-loop-b{
  0%,8%{opacity:1;clip-path:inset(0 0 0 0);translate:0 0}
  20%{opacity:0;clip-path:inset(0 0 0 0);translate:0 0}
  34%,46%{opacity:1;clip-path:inset(0 0 0 0);translate:0 0}
  60%{opacity:.2;clip-path:inset(0 0 0 100%);translate:14px 0}
  60.01%{opacity:.2;clip-path:inset(0 100% 0 0);translate:-14px 0}
  76%,100%{opacity:1;clip-path:inset(0 0 0 0);translate:0 0}
}
.site-header .brand :is(.company-brand-mark,.company-brand-caption){will-change:opacity,clip-path,translate}
/* Every page load: play the cycle twice, starting shortly after the page appears.
   The caption below the logo runs the same animation, a beat later, so it follows the logo. */
.anim-ready .site-header .brand .company-brand-mark{animation:elita-logo-loop 3.6s cubic-bezier(.45,0,.25,1) .5s 2}
.anim-ready .site-header .brand .company-brand-caption{animation:elita-logo-loop 3.6s cubic-bezier(.45,0,.25,1) .62s 2}
/* Hovering or focusing the navbar keeps it looping. Same animation and timing, only the count changes,
   so it continues smoothly instead of restarting. */
.anim-ready .site-header:is(:hover,:focus-within) .brand :is(.company-brand-mark,.company-brand-caption){animation-iteration-count:infinite}
/* Automatic replay every 45 seconds (assets/animations.js toggles .logo-replay-b on the logo link).
   Switching to an identical keyframes name restarts the animation, so it plays its two cycles again. */
.anim-ready .site-header .brand.logo-replay-b :is(.company-brand-mark,.company-brand-caption){animation-name:elita-logo-loop-b}
@media(prefers-reduced-motion:reduce){.site-header .brand :is(.company-brand-mark,.company-brand-caption){animation:none!important}}

/* ---------- AV Solutions: study-case carousel (partials/av-case-carousel, assets/script.js) ----------
   Slides are stacked and cross-fade; with JS off only the first one shows (the others are `hidden`). */
.av-case-carousel{min-width:0;display:flex;flex-direction:column;gap:12px}
.av-detail-row.reverse .av-case-carousel{order:2}
.av-case-viewport{position:relative;overflow:hidden;border-radius:22px;min-height:340px;aspect-ratio:4/3;background:#eee4f3;box-shadow:0 18px 44px rgba(31,13,42,.12);touch-action:pan-y}
.av-case-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.av-case-slide.is-active{opacity:1;visibility:visible;transition:opacity .5s ease}
.av-case-slide[hidden]{display:block}
.av-case-slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 6s ease}
.av-case-slide.is-active img{transform:scale(1)}
.av-case-slide figcaption{position:absolute;z-index:2;left:16px;bottom:16px;padding:8px 14px;border-radius:30px;background:rgba(27,16,37,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.av-case-counter{position:absolute;z-index:2;right:16px;top:16px;padding:6px 12px;border-radius:30px;background:rgba(255,255,255,.9);color:#5d147b;font-size:11px;font-weight:700}
.av-case-indicators{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.av-case-indicator{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 12px 6px 6px;border:1px solid #eadfec;border-radius:14px;background:#fff;color:#4a3a52;font:inherit;font-size:12px;font-weight:700;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s,color .2s}
.av-case-indicator img{flex:none;width:56px;height:42px;border-radius:9px;object-fit:cover;opacity:.7;transition:opacity .2s}
.av-case-indicator span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.av-case-indicator:hover{border-color:#d8b4e0}
.av-case-indicator:hover img,.av-case-indicator.is-active img{opacity:1}
.av-case-indicator.is-active{border-color:#b84ec3;color:#5d147b;box-shadow:0 0 0 2px rgba(184,78,195,.18)}
.av-case-indicator:focus-visible{outline:3px solid #ce75e8;outline-offset:2px}
@media(max-width:900px){.av-case-viewport{min-height:260px}}
@media(max-width:600px){
  .av-detail-row.reverse .av-case-carousel{order:0}
  .av-case-viewport{min-height:220px}
  .av-case-indicators{grid-auto-flow:row;grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.av-case-slide,.av-case-slide.is-active,.av-case-slide img,.av-case-indicator{transition:none}.av-case-slide img{transform:none}}

/* ---------- Audio Visual: study-case card carousel (partials/case-card-carousel) ---------- */
.case-teaser-action{margin-top:28px}
.case-card-carousel{min-width:0}
.case-card-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:20px;outline-offset:4px}
.case-card-track::-webkit-scrollbar{display:none}
.case-card-track:focus-visible{outline:3px solid #ce75e8}
.case-card-slide{flex:0 0 100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;scroll-snap-align:start;padding:2px}
/* View-only cards (not links): no hover lift or pointer cursor. */
.case-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid #eadfec;border-radius:18px;background:#fff;color:#21152e;box-shadow:0 10px 30px rgba(44,9,54,.06);cursor:default}
.case-card-media{display:block;aspect-ratio:4/3;overflow:hidden;background:#eee4f3}
.case-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.case-card-body{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px}
.case-card-body small{font-size:10px;font-weight:800;letter-spacing:.12em;color:#8d34a6}
.case-card-body strong{font-family:'Manrope',sans-serif;font-size:17px;line-height:1.3;letter-spacing:-.02em}
.case-card-body span{font-size:12px;color:#7a6d80}
.case-card-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.case-card-controls[hidden]{display:none}
.case-card-arrow{display:grid;place-items:center;width:42px;height:42px;border:1px solid #e1d3e7;border-radius:50%;background:#fff;color:#5d147b;font-size:17px;cursor:pointer;transition:background .2s,border-color .2s}
.case-card-arrow:hover{background:#f6eff8;border-color:#b84ec3}
.case-card-arrow:focus-visible,.case-card-dot:focus-visible{outline:3px solid #ce75e8;outline-offset:2px}
.case-card-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.case-card-dot{width:9px;height:9px;padding:0;border:0;border-radius:10px;background:#dccbe3;cursor:pointer;transition:width .3s,background .3s}
.case-card-dot.is-active{width:26px;background:#8d34a6}
@media(max-width:600px){.case-card-slide{grid-template-columns:1fr}.case-card-media{aspect-ratio:16/9}}
@media(prefers-reduced-motion:reduce){.case-card-dot{transition:none}}

/* ---------- Home "Other solutions" cards: one consistent responsive grid ----------
   Replaces the older, conflicting breakpoints (redesign.css spanned the last card over 2 columns while
   company.css forced 1 column, which created a stray implicit column on phones). */
.v2-service-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.v2-service-grid>a,.v2-service-grid>a:last-child{grid-column:auto!important;min-width:0}
@media(max-width:1024px){
  .v2-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  .v2-service-grid>a,.v2-service-grid>a:last-child{min-height:200px}
}
/* Phones: one card per row, icon beside the text, so titles and descriptions get the full width. */
@media(max-width:600px){
  .v2-service-grid{grid-template-columns:1fr!important;gap:10px}
  .v2-service-grid>a,.v2-service-grid>a:last-child{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;align-items:start;min-height:0;padding:16px 44px 16px 16px}
  .v2-service-grid .service-number{grid-column:1/-1;margin-bottom:8px}
  .v2-service-grid .service-symbol{grid-row:span 2;margin:0}
  .v2-service-grid h4{font-size:15px;margin:2px 0 4px}
  .v2-service-grid p{font-size:12.5px;padding-right:0}
  .v2-service-grid .service-go{position:absolute;right:16px;top:16px}
}

/* Tablets: stack section headings (title above intro text) earlier, so two-line titles are not squeezed
   into a narrow column next to the paragraph. company.css only stacked them below 720px. */
@media(max-width:900px){
  .company-section-heading{flex-direction:column;align-items:flex-start;gap:14px}
  .company-section-heading>p{max-width:none}
}

/* ---------- Other Solutions: one visual per point, as in the company profile slides ----------
   Each solution: heading + intro, then a grid of group cards (photo or illustration/logo + points), then brands. */
.other-solution-row{display:block;padding:56px 0}
.other-solution-row .other-solution-copy{max-width:780px;margin-bottom:26px}
.other-solution-row .other-solution-copy>p{margin:0}
.other-group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.other-group-grid.is-4{grid-template-columns:repeat(3,minmax(0,1fr))}
.other-group-grid.is-products{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.other-group{display:flex;flex-direction:column;min-width:0;border:1px solid #eadfec;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(44,9,54,.05)}
.other-group.is-wide{grid-column:1/-1;flex-direction:row;align-items:stretch}
.other-group-visual{margin:0;flex:none;overflow:hidden;background:radial-gradient(circle at 50% 45%,#fff 0,#f6eff8 62%,#efe3f3 100%)}
.other-group-visual img{display:block;width:100%;height:100%}
.other-group-visual.is-photo{aspect-ratio:16/10;background:#eee4f3}
.other-group-visual.is-photo img{object-fit:cover}
.other-group-visual.is-diagram{aspect-ratio:16/10;padding:8px;background:#fff;border-bottom:1px solid #f1e8f4}
.other-group-visual.is-diagram img{object-fit:contain}
.other-group-visual.is-icon{display:grid;place-items:center;aspect-ratio:16/10;padding:22px}
.other-group-visual.is-icon img{width:auto;height:auto;max-width:72%;max-height:130px;object-fit:contain}
.other-group.is-wide .other-group-visual{width:min(38%,380px);aspect-ratio:auto;min-height:200px}
.other-group-body{padding:18px 20px 22px}
.other-group-body h4{margin:0 0 8px;font-size:16px;line-height:1.3;color:#191329;letter-spacing:-.2px}
.other-group-body p{margin:0 0 10px;color:#5f5468;font-size:13px;line-height:1.65}
.other-group-body ul{margin:0;padding-left:18px;color:#6b6175;font-size:13px;line-height:1.8}
.other-group-body li::marker{color:#a320d0}
/* Customer Engagement Platform has many modules: two columns. */
.other-group-grid:not(.is-products) .other-group:first-child:has(li:nth-child(6)) ul{columns:2;column-gap:18px}
.other-group.is-wide .other-group-body{align-self:center;padding:22px 26px}
.other-group.is-wide ul{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.other-group.is-wide li{padding:6px 12px;border-radius:30px;background:#f6eff8;color:#5b3b64;font-size:12.5px;font-weight:700;line-height:1.4}
/* IT Peripheral: compact product tiles (illustration + name). */
.other-group-grid.is-products .other-group-visual.is-icon{aspect-ratio:1;padding:18px}
.other-group-grid.is-products .other-group-visual.is-icon img{max-width:82%;max-height:120px}
.other-group-grid.is-products .other-group-body{padding:14px 14px 16px;text-align:center}
.other-group-grid.is-products .other-group-body h4{font-size:14px;margin:0}
.other-solution-row .other-solution-brands{margin-top:22px}
.other-solution-row .other-solution-brands>div{grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:1024px){
  .other-group-grid.is-products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .other-solution-row .other-solution-brands>div{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
  .other-group-grid,.other-group-grid.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .other-group-grid:not(.is-products) .other-group:first-child:has(li:nth-child(6)){grid-column:1/-1}
}
@media(max-width:600px){
  .other-solution-row{padding:40px 0}
  .other-group-grid,.other-group-grid.is-4{grid-template-columns:1fr}
  .other-group-grid.is-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .other-group.is-wide{flex-direction:column}
  .other-group.is-wide .other-group-visual{width:100%;aspect-ratio:16/9;min-height:0}
  .other-solution-row .other-solution-brands>div{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Stacked page headers (tablet / phone): clear space between the buttons and the header photo. */
@media(max-width:900px){
  :is(.detail-hero-layout,.av-hero-grid,.company-hero-grid){row-gap:36px}
  :is(.detail-hero,.av-hero) .hero-actions{flex-wrap:wrap;row-gap:12px}
}
@media(max-width:600px){
  :is(.detail-hero-layout,.av-hero-grid,.company-hero-grid){row-gap:30px}
}

/* Footer: email + WhatsApp directly under the office address (partials/footer-contact). */
.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px}
.footer-contact a{display:inline-flex;align-items:center;gap:9px;color:#e6d8ec;font-size:12px;font-weight:700;transition:color .2s}
.footer-contact a:hover{color:#f1a4e7}
.footer-contact svg{flex:none;color:#ca85d3}

/* Other Solutions: realistic product cut-outs on a purple diamond, as in the company profile slides. */
.other-group-visual.is-product{position:relative;display:grid;place-items:center;aspect-ratio:16/10;padding:20px;isolation:isolate}
.other-group-visual.is-product::before{content:"";position:absolute;z-index:-1;left:50%;top:52%;width:52%;aspect-ratio:1;border-radius:22%;background:linear-gradient(145deg,#c58bd8,#8e3fae);opacity:.5;transform:translate(-50%,-50%) rotate(45deg)}
.other-group-visual.is-product img{width:auto;height:auto;max-width:86%;max-height:170px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(31,13,42,.22))}
.other-group-grid.is-products .other-group-visual.is-product{aspect-ratio:1}
.other-group-grid.is-products .other-group-visual.is-product img{max-height:150px}

/* ---------- Stacked image + text sections (phones): title and description first, image below ----------
   Covers the side-by-side blocks that collapse to one column: AV solution rows (640px, av-experience.css),
   the cyber security split and the home "Who we are" block (720px, company.css). Page headers already stack
   text-first; cards keep their image header. Both selectors are listed so .reverse rows (order:0 above) follow too. */
@media(max-width:640px){
  .av-detail-row .av-detail-copy,.av-detail-row.reverse .av-detail-copy{order:1}
  .av-detail-row .av-case-carousel,.av-detail-row.reverse .av-case-carousel{order:2}
}
@media(max-width:720px){
  .company-split-copy,.company-about-text{order:1}
  .company-split-photo,.company-about-photo{order:2}
}

/* ---------- Page header parallax: small accents (plus, ring, mini diamond) ----------
   They live on the header's ::after layer, which must not be translated (its clipped edge would show as a hard line).
   Each accent moves through its own background-position instead, driven by --hero-y from assets/animations.js, at its
   own speed for depth: the plus fastest, the ring slowest. The soft glow (4th layer) stays put. Overrides the static
   positions in "Dark page header" above; keep the layer order (plus, ring, diamond, glow) in sync. */
.anim-ready main>:is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero):first-child::after{
  background-position:
    left 3% top calc(16% + var(--hero-y,0) * .55px),
    left 54% bottom calc(var(--hero-fade) + 20px - var(--hero-y,0) * .22px),
    right 3% bottom calc(var(--hero-fade) + 44px - var(--hero-y,0) * .42px),
    -140px calc(100% + 160px);
  opacity:calc(1 - var(--hero-p,0) * 1.2)}
@media(max-width:820px){
  /* Gentler on phones, like the copy and photo; accents stay fully visible. */
  .anim-ready main>:is(.v2-hero,.company-hero,.av-hero,.av-subhero,.detail-hero):first-child::after{
    background-position:
      right 7% bottom calc(var(--hero-fade) + 96px - var(--hero-y,0) * .2px),
      left 60% bottom calc(var(--hero-fade) + 12px - var(--hero-y,0) * .08px),
      right 4% bottom calc(var(--hero-fade) + 28px - var(--hero-y,0) * .15px),
      -120px calc(100% + 120px);
    opacity:1}
}