/* =========================================================
   IBG · motion + sacred geometry layer
   Discreet, slow, ambient. 30–120s cycles. Nothing snaps.
   ========================================================= */

/* master switch - [data-motion="off"] kills all ambient movement */
[data-motion="off"] .geo,
[data-motion="off"] .freq-band,
[data-motion="off"] .scroll-cue,
[data-motion="off"] .ticker{display:none}

/* ---------- ambient geometry canvas ---------- */
/* opacity is set inline by ibg-motion.js from --geo-op (single source of truth) */
.geo{position:absolute;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.6s ease;--geo-op:.45}
.geo svg{display:block;width:100%;height:100%;overflow:visible}
.geo circle,.geo line,.geo path,.geo polygon{vector-effect:non-scaling-stroke}

/* rotation speeds - deliberately slow */
.geo-spin{animation:geoSpin 120s linear infinite}
.geo-spin-rev{animation:geoSpin 168s linear infinite reverse}
.geo-breathe{animation:geoBreathe 18s ease-in-out infinite}
@keyframes geoSpin{to{transform:rotate(360deg)}}
@keyframes geoBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* placements - target opacity declared once, as --geo-op.
   Kept low and pushed to the edges so nothing sits behind body copy. */
.geo-hero{top:-18%;right:-16%;width:min(620px,58vw);aspect-ratio:1/1;--geo-op:.22}
.geo-quality{top:-14%;right:-14%;width:min(440px,42vw);aspect-ratio:1/1;--geo-op:.14}
.geo-consult{bottom:-30%;left:-12%;width:min(460px,52vw);aspect-ratio:1/1;--geo-op:.16}
.geo-seal{width:132px;aspect-ratio:1/1;position:relative;--geo-op:.6}
.geo.fr-geo{--geo-op:.2}

/* stroke colours follow the active theme */
.geo .g-line{stroke:var(--accent);fill:none;stroke-width:.55;opacity:.5}
.geo .g-line-2{stroke:var(--accent);fill:none;stroke-width:.4;opacity:.28}
.geo .g-dot{fill:var(--accent);opacity:.4}
.s-alt .geo .g-line,.s-alt .geo .g-line-2{stroke:var(--alt-accent)}
.s-alt .geo .g-dot{fill:var(--alt-accent)}

/* keep content above geometry */
.hero-g,.qc,.cons,.container{position:relative;z-index:1}
.hero,#quality,#consult{position:relative;overflow:hidden}

/* ---------- frequency band (animated harmonics divider) ---------- */
.freq-band{position:relative;height:96px;overflow:hidden;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.freq-band.on-tint{background:var(--bg-2)}
.freq-band.on-alt{background:var(--alt-bg);border-color:var(--alt-line)}
.freq-band canvas{display:block;width:100%;height:100%}
.freq-band .fq-lb{position:absolute;left:32px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);z-index:1;background:linear-gradient(90deg,var(--bg) 60%,transparent);padding-right:26px}
.freq-band.on-tint .fq-lb{background:linear-gradient(90deg,var(--bg-2) 60%,transparent)}
.freq-band.on-alt .fq-lb{color:var(--alt-muted);background:linear-gradient(90deg,var(--alt-bg) 60%,transparent)}
.freq-band .fq-rb{position:absolute;right:32px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);z-index:1;background:linear-gradient(270deg,var(--bg) 60%,transparent);padding-left:26px}
.freq-band.on-tint .fq-rb{background:linear-gradient(270deg,var(--bg-2) 60%,transparent)}
.freq-band.on-alt .fq-rb{color:var(--alt-muted);background:linear-gradient(270deg,var(--alt-bg) 60%,transparent)}
@media(max-width:640px){.freq-band{height:72px}.freq-band .fq-lb,.freq-band .fq-rb{display:none}}

/* ---------- kicker pair (Scramble device, geometry glyph) ---------- */
.kick{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.kick .kg{display:none}
.kick .kg{width:15px;height:15px;flex:none;opacity:.9}
.kick .kg svg{display:block;width:100%;height:100%}
.kick .kg svg *{stroke:var(--accent);fill:none;stroke-width:1.1}
.s-alt .kick .kg svg *{stroke:var(--alt-accent)}
.kick .kg.filled svg *{fill:var(--accent);stroke:none}
.s-alt .kick .kg.filled svg *{fill:var(--alt-accent)}
.kick .kt{font-family:var(--mono);font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted)}
.s-alt .kick .kt{color:var(--alt-muted)}
.kick .kg{animation:kickTurn 46s linear infinite}
@keyframes kickTurn{to{transform:rotate(360deg)}}
[data-motion="off"] .kick .kg{animation:none}

/* ---------- resonance rings on the tile mark ---------- */
.brand .tile,.posbar .tile{position:relative;isolation:isolate}
.brand .tile::before,.brand .tile::after,
.posbar .tile::before,.posbar .tile::after{
  content:'';position:absolute;inset:0;border-radius:var(--r-tile);
  border:1px solid var(--accent);opacity:0;pointer-events:none;z-index:-1
}
.brand:hover .tile::before,.posbar:hover .tile::before{animation:ring 2.6s ease-out infinite}
.brand:hover .tile::after,.posbar:hover .tile::after{animation:ring 2.6s ease-out .85s infinite}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.85);opacity:0}}
[data-motion="off"] .brand:hover .tile::before,
[data-motion="off"] .brand:hover .tile::after{animation:none}
/* posbar tile breathes continuously - the "vibration" anchor */
.posbar .tile{animation:tileBreathe 7s ease-in-out infinite}
@keyframes tileBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
[data-motion="off"] .posbar .tile{animation:none}
.posbar{position:relative;overflow:hidden}

/* ---------- vertical scroll cue ---------- */
.scroll-cue{position:absolute;right:26px;bottom:0;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2;pointer-events:none}
.scroll-cue .lbl{font-family:var(--mono);font-size:8px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl}
.scroll-cue .trk{width:1px;height:52px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue .trk::after{content:'';position:absolute;left:0;top:0;width:1px;height:22px;background:var(--accent);animation:cueRun 2.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes cueRun{0%{transform:translateY(-22px);opacity:0}22%,78%{opacity:1}100%{transform:translateY(52px);opacity:0}}
@media(max-width:1200px){.scroll-cue{display:none}}

/* ---------- announcement ticker ---------- */
.ticker{background:var(--alt-bg);color:var(--alt-fg);overflow:hidden;padding:9px 0;border-bottom:1px solid var(--alt-line)}
.ticker-t{display:flex;gap:0;width:max-content;animation:tick 44s linear infinite}
.ticker:hover .ticker-t{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker-t span{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--alt-fg-dim);padding:0 26px;display:inline-flex;align-items:center;gap:26px;white-space:nowrap}
.ticker-t span::after{content:'';width:5px;height:5px;background:var(--alt-accent);display:block;transform:rotate(45deg)}

/* ---------- section geometry seal (footer / about) ---------- */
.seal-wrap{display:flex;align-items:center;gap:22px;margin-top:36px;padding-top:28px;border-top:1px solid var(--alt-line)}
.seal-wrap .sl-t{font-family:var(--mono);font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--alt-muted);line-height:2}
.seal-wrap .sl-t b{color:var(--alt-fg);font-weight:500;display:block;letter-spacing:.24em}

/* ---------- pillar hover geometry ---------- */
.svc{position:relative;overflow:hidden}
.svc .svc-geo{position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;opacity:0;transform:rotate(0deg);transition:opacity .5s ease,transform .9s ease;pointer-events:none}
.svc:hover .svc-geo{opacity:.14;transform:rotate(28deg)}
.svc .svc-geo svg *{stroke:var(--accent);fill:none;stroke-width:1}
[data-motion="off"] .svc .svc-geo{display:none}

/* ---------- imagery frames ---------- */
.img-frame{position:relative;border-radius:var(--r-card-lg);overflow:hidden;background:var(--bg-2)}
.img-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.img-frame:hover img{transform:scale(1.035)}
.img-frame .fr-geo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.5}
.img-frame .fr-cap{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;background:linear-gradient(0deg,rgba(12,11,18,.78),transparent);color:#fff;font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase}

/* imagery band */
.imgband{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:16px}
@media(max-width:960px){.imgband{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.imgband{grid-template-columns:1fr}}
.imgband .img-frame:first-child{grid-row:span 2}
@media(max-width:960px){.imgband .img-frame:first-child{grid-row:auto;grid-column:1/-1}}
.imgband .img-frame{min-height:212px}
.imgband .img-frame:first-child{min-height:440px}

/* motion toggle in the theme switcher */
.tsw .mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:9px;border-top:1px solid var(--line)}
.tsw .mrow .ml{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tsw .sw{width:38px;height:21px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);position:relative;cursor:pointer;padding:0;transition:background-color .2s,border-color .2s}
.tsw .sw::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--muted);transition:transform .2s,background-color .2s}
.tsw .sw[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent)}
.tsw .sw[aria-pressed="true"]::after{transform:translateX(17px);background:var(--accent)}

/* =========================================================
   SERVICE ICON MOTION
   Each icon animates only while its tile carries .anim.
   A controller in ibg-motion.js switches a few on at a time.
   ========================================================= */
.svc .st2 svg *{transform-box:fill-box}
.svc .st2 .dsh{stroke-dasharray:var(--len,44);stroke-dashoffset:0}

/* 01 sales · the line keeps climbing, on a loop */
.st2.anim .climb{animation:climb 2.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes climb{0%{stroke-dashoffset:44}55%{stroke-dashoffset:0}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-44;opacity:0}}
.st2.anim .tip{animation:tipIn 2.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes tipIn{0%,40%{opacity:0;transform:translate(-3px,3px)}62%,80%{opacity:1;transform:none}100%{opacity:0;transform:translate(3px,-3px)}}

/* 02 marketing · broadcast out */
.st2.anim .wv{animation:wv 2.4s ease-out infinite;transform-origin:center}
.st2.anim .wv2{animation-delay:.3s}
.st2.anim .wv3{animation-delay:.6s}
@keyframes wv{0%{opacity:0;transform:scale(.45)}25%{opacity:1}100%{opacity:0;transform:scale(1.18)}}
.st2.anim .core{animation:core 2.4s ease-in-out infinite;transform-origin:center}
@keyframes core{0%,100%{transform:scale(1)}12%{transform:scale(1.5)}}

/* 03 strategy · connecting the dots */
.st2.anim .lk{stroke-dasharray:30;stroke-dashoffset:30;animation:lk 3.4s ease-in-out infinite}
.st2.anim .lk2{animation-delay:.42s}
.st2.anim .lk3{animation-delay:.84s}
.st2.anim .lk4{animation-delay:1.26s}
@keyframes lk{0%{stroke-dashoffset:30}22%,72%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:30}}
.st2.anim .nd{animation:nd 3.4s ease-in-out infinite;transform-origin:center}
.st2.anim .nd2{animation-delay:.42s}
.st2.anim .nd3{animation-delay:.84s}
@keyframes nd{0%,10%{transform:scale(.7);opacity:.45}26%{transform:scale(1.25);opacity:1}40%,100%{transform:scale(1);opacity:1}}

/* 04 leadership · shaking hands */
.st2.anim .hnd{animation:shake 1.5s ease-in-out infinite;transform-origin:center}
@keyframes shake{0%,100%{transform:translateY(0)}25%{transform:translateY(-1.6px)}75%{transform:translateY(1.6px)}}
.st2.anim .hl{animation:reachL 3s ease-in-out infinite}
.st2.anim .hr{animation:reachR 3s ease-in-out infinite}
@keyframes reachL{0%{transform:translateX(-3.5px);opacity:.5}22%,100%{transform:none;opacity:1}}
@keyframes reachR{0%{transform:translateX(3.5px);opacity:.5}22%,100%{transform:none;opacity:1}}

/* 05 360 · smiling face, sources circling */
.st2.anim .ring{animation:ringSpin 7s linear infinite;transform-origin:center}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.st2.anim .smile{stroke-dasharray:16;stroke-dashoffset:16;animation:smile 3.2s ease-in-out infinite}
@keyframes smile{0%,8%{stroke-dashoffset:16}34%,78%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:16}}
.st2.anim .eye{animation:blink 3.2s ease-in-out infinite;transform-origin:center}
@keyframes blink{0%,88%,100%{transform:scaleY(1)}93%{transform:scaleY(.15)}}

/* 06 psych · brain being stimulated */
.st2.anim .syn{animation:syn 1.9s ease-in-out infinite;transform-origin:center}
.st2.anim .syn2{animation-delay:.38s}
.st2.anim .syn3{animation-delay:.76s}
.st2.anim .syn4{animation-delay:1.14s}
@keyframes syn{0%,100%{opacity:.2;transform:scale(.6)}45%{opacity:1;transform:scale(1.5)}}
.st2.anim .brain{animation:brainPulse 1.9s ease-in-out infinite;transform-origin:center}
@keyframes brainPulse{0%,100%{opacity:.85}45%{opacity:1}}

/* 07 agents · pulse travels the network */
.st2.anim .an{animation:anPulse 2.2s ease-in-out infinite;transform-origin:center}
.st2.anim .an2{animation-delay:.35s}
.st2.anim .an3{animation-delay:.7s}
.st2.anim .an4{animation-delay:1.05s}
@keyframes anPulse{0%,100%{opacity:.35;transform:scale(.85)}30%{opacity:1;transform:scale(1.3)}}
.st2.anim .hexr{animation:hexr 6s linear infinite;transform-origin:center}
@keyframes hexr{to{transform:rotate(360deg)}}

/* 08 vera · code block verifies cell by cell */
.st2.anim .cl{animation:cl 2.8s steps(1,end) infinite}
.st2.anim .cl2{animation-delay:.35s}
.st2.anim .cl3{animation-delay:.7s}
.st2.anim .cl4{animation-delay:1.05s}
@keyframes cl{0%,100%{opacity:.22}18%,64%{opacity:1}}
.st2.anim .shld{animation:shld 2.8s ease-in-out infinite;transform-origin:center}
@keyframes shld{0%,100%{transform:scale(1)}70%{transform:scale(1.05)}}

/* 09 upskilling · the arc sweeps up over the steps */
.st2.anim .arc{stroke-dasharray:34;stroke-dashoffset:34;animation:arc 3s ease-in-out infinite}
@keyframes arc{0%{stroke-dashoffset:34}45%,72%{stroke-dashoffset:0}100%{stroke-dashoffset:-34}}
.st2.anim .stp{animation:stp 3s ease-in-out infinite;transform-origin:bottom}
.st2.anim .stp2{animation-delay:.18s}
.st2.anim .stp3{animation-delay:.36s}
@keyframes stp{0%,100%{transform:scaleY(1)}42%{transform:scaleY(1.14)}}

@media(prefers-reduced-motion:reduce){.st2.anim *{animation:none!important}}
[data-motion="off"] .st2.anim *{animation:none!important}
@media print{.geo,.freq-band,.ticker,.scroll-cue,.tsw{display:none!important}}

@media(prefers-reduced-motion:reduce){
  .geo-spin,.geo-spin-rev,.geo-breathe,.kick .kg,.posbar .tile,.ticker-t,.scroll-cue .trk::after{animation:none!important}
  .img-frame:hover img{transform:none}
  .rv{opacity:1;transform:none;transition:none}
}