/* OPDEL graphics: category line art, "Product lines" band, product-page header art,
   how-it-works diagram. Everything is visible without JS; graphics.js arms the
   draw-in (.opg-armed) and the idle loops (.opg-live). Reduced motion stays static. */

.opg-band,.opg-how,.opg-head{--opg-ease:var(--op-ease,cubic-bezier(.2,.7,.2,1));--opg-paper:#fff;--opg-shade:#e8edf5;
  --opg-grid:rgba(13,42,85,.055)}
.opg-band *,.opg-how *{box-sizing:border-box}
/* explicit width: inside Elementor's column-wrap flex containers an inline-size container
   would otherwise be measured at zero width and come out far too tall */
.opg-band,.opg-how{display:block;width:100%;max-width:100%;box-sizing:border-box}

/* ---------- drawing primitives ---------- */
.opg-svg{display:block;width:100%;height:auto;overflow:visible;stroke-width:var(--opg-sw,1.5)}
.opg-svg .p,.opg-svg .pf{fill:var(--opg-paper);transition:fill .4s var(--opg-ease)}
.opg-svg .s,.opg-svg .sk{fill:var(--opg-shade)}
.opg-svg .t,.opg-svg .k,.opg-svg .hot{stroke-width:calc(var(--opg-sw,1.5)*.7)}
.opg-svg .tb{stroke-width:calc(var(--opg-sw,1.5)*2.35)}
.opg-svg .tc{stroke-width:calc(var(--opg-sw,1.5)*.9);stroke:var(--opg-paper)}
.opg-svg .pour{stroke-width:calc(var(--opg-sw,1.5)*2.7)}
.opg-svg .flow{stroke-width:calc(var(--opg-sw,1.5)*.75)}
.opg-svg .glow,.opg-svg .gw,.opg-svg .surf,.opg-svg .pool{transform-box:fill-box;transform-origin:50% 50%}
.opg-svg .pool{transform-origin:50% 100%}
.opg-svg .spin{transform-box:view-box;transform-origin:0 0}

/* armed: strokes wait for the reveal, accents wait for the strokes */
.opg-armed .opg-dr{stroke-dasharray:var(--l) var(--l);stroke-dashoffset:var(--l)}
.opg-armed.opg-in .opg-dr{stroke-dashoffset:0;
  transition:stroke-dashoffset .8s var(--opg-ease) calc(var(--opg-b,0ms) + var(--d,0ms))}
.opg-armed .hot,.opg-armed .glow,.opg-armed .fx,.opg-armed .s,.opg-armed .sk,.opg-armed .sh{opacity:0}
/* faces stay clear until the lines start, so nothing shows before the reveal */
.opg-armed :is(.p,.pf){fill-opacity:0}
.opg-armed.opg-in :is(.p,.pf){fill-opacity:1;transition:fill-opacity .5s var(--opg-ease) calc(var(--opg-b,0ms) + 120ms),fill .4s var(--opg-ease)}
.opg-armed.opg-in .s,.opg-armed.opg-in .sk,.opg-armed.opg-in .sh{opacity:1;transition:opacity .7s var(--opg-ease) calc(var(--opg-b,0ms) + 350ms)}
.opg-armed.opg-in .hot,.opg-armed.opg-in .glow,.opg-armed.opg-in .fx{opacity:1;
  transition:opacity .7s var(--opg-ease) calc(var(--opg-b,0ms) + var(--opg-hd,800ms))}
.opg-live .opg-dr{stroke-dasharray:none}

/* idle loops: only once drawn, only while on screen */
.opg-svg .gw{opacity:.8;transition:opacity .45s var(--opg-ease),transform .6s var(--opg-ease)}
.opg-hover .opg-svg .gw{opacity:1;transform:scale(1.14)}
.opg-live .glow{animation:opg-pulse 2.8s ease-in-out infinite alternate}
.opg-live .em{animation:opg-ember 2.4s ease-out infinite}
.opg-live .e1{animation-delay:-.6s}.opg-live .e2{animation-delay:-1.2s}.opg-live .e3{animation-delay:-1.8s}
.opg-live .wv{animation:opg-wave 3s ease-in-out infinite}
.opg-live .w1{animation-delay:-1s}.opg-live .w2{animation-delay:-2s}
.opg-live .flow{animation:opg-flow .9s linear infinite}
.opg-live .spin{animation:opg-spin 24s linear infinite}
.opg-live .hot.pour{animation:opg-glint 1.8s ease-in-out infinite alternate}
.opg-off *{animation-play-state:paused!important}
@keyframes opg-pulse{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:scale(1.05)}}
@keyframes opg-ember{0%{opacity:0;transform:translateY(2px)}25%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
@keyframes opg-wave{0%{opacity:0;transform:translateY(5px)}40%{opacity:.95}100%{opacity:0;transform:translateY(-8px)}}
@keyframes opg-flow{to{stroke-dashoffset:-28}}
@keyframes opg-spin{to{transform:rotate(360deg)}}
@keyframes opg-glint{from{opacity:.85}to{opacity:1}}

/* ---------- shared heading + wrap ---------- */
.opg-wrap{width:min(1140px,calc(100% - 20px));margin:0 auto}
.opg-h{margin:0 0 24px!important}

/* ---------- Product lines band (home) ---------- */
.opg-band{padding:56px 0 20px;container-type:inline-size}
.opg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@container (min-width:600px){.opg-grid{gap:18px}}
@container (min-width:900px){.opg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
.opg-card{position:relative;margin:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--op-line,#e7eaf0);
  border-radius:var(--op-radius,14px);transition:border-color .35s var(--opg-ease),box-shadow .35s var(--opg-ease)}
.opg-art{--opg-paper:#f8fafc;position:relative;border-radius:calc(var(--op-radius,14px) - 1px) calc(var(--op-radius,14px) - 1px) 0 0;
  background-color:var(--opg-paper);
  background-image:linear-gradient(var(--opg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--opg-grid) 1px,transparent 1px);
  background-size:16px 16px;background-position:-1px -1px;border-bottom:1px solid var(--op-line,#e7eaf0);
  padding:4% 6% 0;transition:background-color .4s var(--opg-ease)}
.opg-card__b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}
.opg-band .opg-card__t{margin:0!important;font-size:var(--op-fs-base,16px)!important;line-height:1.3!important;font-weight:700!important;letter-spacing:-.01em}
@container (min-width:600px){.opg-band .opg-card__t{font-size:var(--op-fs-md,19px)!important}.opg-card__b{padding:16px 20px 20px}}
.opg-card__t a{color:var(--op-ink,#121a26)!important;text-decoration:none;display:inline-flex;align-items:baseline;gap:9px}
.opg-card__t a::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--op-gold,#b5832a);flex:none;transform:translateY(-1px)}
.opg-card__t a::after{content:"";position:absolute;inset:0;border-radius:var(--op-radius,14px);z-index:1}
@supports selector(:has(a)){
  .opg-band .opg-card__t a:focus-visible{outline:none!important}
  .opg-card:has(a:focus-visible){outline:3px solid var(--op-gold,#b5832a);outline-offset:3px}
}
.opg-card__d{margin:0;font-size:var(--op-fs-sm,13px);line-height:1.5;color:var(--op-muted,#6b7584)}
@container (min-width:600px){.opg-card__d{font-size:14.5px}}
.opg-card:hover{border-color:rgba(13,42,85,.28);box-shadow:var(--op-shadow,0 8px 24px rgba(13,42,85,.06))}
.opg-card:hover .opg-art{--opg-paper:#fcf7ee}
.opg-card:hover .opg-card__t a{color:var(--op-navy,#0d2a55)!important}

/* ---------- product page: header art in the title band ---------- */
.opg-head{display:none}
@media (min-width:768px){
  .opg-head{--opg-paper:#fff;display:block;position:absolute;z-index:1;top:50%;transform:translateY(-50%);width:140px;
    right:max(16px,calc((100% - 1180px)/2 + 24px))}
  .op-product-page .full-head-img:has(>.opg-head) .single-title{padding-right:168px!important}
}
@media (min-width:1025px){
  .opg-head{width:184px}
  .op-product-page .full-head-img:has(>.opg-head) .single-title{padding-right:220px!important}
}

/* ---------- how-it-works diagram ---------- */
.opg-how{container-type:inline-size;--opg-paper:#f8fafc}
.opg-how--home{padding:40px 0 64px}
.opg-how--page{margin:28px 0 12px}
.opg-how__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center}
@container (min-width:520px){.opg-how__fig{max-width:680px}}
@container (min-width:900px){.opg-how__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:32px}.opg-how__fig{max-width:none}}
.opg-how__fig{margin:0;padding:10px;border:1px solid var(--op-line,#e7eaf0);border-radius:var(--op-radius,14px);background-color:var(--opg-paper);
  background-image:linear-gradient(var(--opg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--opg-grid) 1px,transparent 1px);background-size:16px 16px}
.opg-how h3.opg-h{font-size:var(--op-fs-lg,22px)!important;margin-bottom:16px!important}
.opg-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
@container (min-width:520px) and (max-width:899px){.opg-steps{grid-template-columns:1fr 1fr;gap:6px 14px}}
.opg-step{margin:0;padding:10px 12px;border-radius:12px;transition:background-color .4s var(--opg-ease),opacity .4s var(--opg-ease)}
.opg-step__h{display:flex!important;align-items:center;gap:12px;width:100%;margin:0!important;padding:0!important;background:none!important;border:0!important;
  box-shadow:none!important;border-radius:0!important;color:var(--op-ink,#121a26)!important;font:700 var(--op-fs-base,16px)/1.3 var(--op-font,Inter,sans-serif)!important;
  text-align:left;text-transform:none!important;letter-spacing:0!important;min-height:0!important;transform:none!important}
button.opg-step__h{cursor:pointer}
button.opg-step__h::after{display:none!important}
.opg-step__n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;
  border:1.5px solid var(--op-navy,#0d2a55);color:var(--op-navy,#0d2a55);background:#fff;transition:background-color .4s,border-color .4s,color .4s}
.opg-step__c{margin:4px 0 0 40px!important;font-size:15px!important;line-height:1.55!important;color:var(--op-text,#3b4553)}
.opg-how.opg-armed .opg-step{opacity:.45}
.opg-how.opg-armed .opg-step.is-done{opacity:1}
.opg-how.opg-armed .opg-step.is-active{opacity:1;background-color:var(--op-gold-soft,#f6eedf)}
.opg-step.is-done .opg-step__n{background:var(--op-navy,#0d2a55);color:#fff}
.opg-step.is-active .opg-step__n{background:var(--op-gold,#b5832a);border-color:var(--op-gold,#b5832a);color:#fff}
.opg-how__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:14px 0 0 12px}
.opg-how__foot a{font-weight:600;font-size:15px}
.opg-replay{display:inline-flex!important;align-items:center;gap:8px;padding:7px 14px!important;border-radius:999px!important;border:1px solid var(--op-line,#e7eaf0)!important;
  background:#fff!important;color:var(--op-navy,#0d2a55)!important;font:600 14px/1 var(--op-font,Inter,sans-serif)!important;box-shadow:none!important;cursor:pointer;
  text-transform:none!important;letter-spacing:0!important;transform:none!important}
.opg-replay[hidden]{display:none!important}
.opg-replay:hover{border-color:var(--op-gold,#b5832a)!important}
.opg-replay svg{width:14px;height:14px}

/* diagram parts by step: the default (no JS) is the finished state */
.opg-how .ch{opacity:0}
.opg-how.opg-armed .ch{transition:opacity .6s var(--opg-ease) .5s}
.opg-how.opg-armed.opg-in .ch{opacity:1}
.opg-how.opg-armed :is(.s1,.cu,.wat,.s3,.s4,.glow){opacity:0;transition:opacity .6s var(--opg-ease)}
.opg-how.opg-armed .pool{transform:scaleY(0)}
.opg-how.opg-on1 .s1,.opg-how.opg-on2 :is(.cu,.wat),.opg-how.opg-on3 .s3,.opg-how.opg-on4 :is(.s4,.glow){opacity:1}
.opg-how.opg-armed.opg-on4 .ch{animation:opg-melt 3s ease-in forwards}
.opg-how.opg-armed.opg-on4 .pool{transform:none;transition:transform 1.4s var(--opg-ease) 1.8s}
@keyframes opg-melt{0%{fill:#a3adbb}30%{fill:#7c2a1a}55%{fill:#c94a1d}75%{fill:#ee8f2e;opacity:1}100%{fill:#f6c453;opacity:0}}
.opg-how.opg-live .glow{animation:none}
.opg-live.opg-on1 .cur{animation:opg-cur .9s linear infinite}
.opg-live.opg-on1 :is(.led,.wave){animation:opg-blink 1.4s ease-in-out infinite alternate}
.opg-live.opg-on2 .cu.L{animation:opg-ac 1.2s ease-in-out infinite}
.opg-live.opg-on2 .cu.R{animation:opg-ac 1.2s ease-in-out -.6s infinite}
.opg-live.opg-on3 .fl{animation:opg-field 5s ease-in-out infinite}
.opg-live.opg-on4 .ed .spin{animation:opg-spin 3.2s linear infinite}
.opg-live.opg-on4 .surf{animation:opg-wob 2.2s ease-in-out infinite alternate}
.opg-live.opg-on4 .rp{animation:opg-blink 1.1s ease-in-out infinite alternate}
.opg-how.opg-live.opg-on4 .glow{animation:opg-pulse 2.8s ease-in-out infinite alternate}
@keyframes opg-cur{to{stroke-dashoffset:-24}}
@keyframes opg-blink{from{opacity:.45}to{opacity:1}}
@keyframes opg-ac{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes opg-field{0%{stroke-dashoffset:0}45%,50%{stroke-dashoffset:-40}95%,100%{stroke-dashoffset:0}}
@keyframes opg-wob{from{transform:translateY(0) scaleY(1)}to{transform:translateY(.6px) scaleY(.9)}}
.opg-how .ed{stroke-width:1.8}
.opg-how .fl{stroke-opacity:.75}

/* ---------- reduced motion: finished drawings, no loops ---------- */
@media (prefers-reduced-motion:reduce){
  .opg-svg,.opg-svg *{animation:none!important;transition:none!important}
  .opg-armed .opg-dr{stroke-dasharray:none!important}
  .opg-armed .hot,.opg-armed .glow,.opg-armed .fx,.opg-armed .s,.opg-armed .sk,.opg-armed .sh{opacity:1!important}
  .opg-armed :is(.p,.pf){fill-opacity:1!important}
}