/* Gaiergy services page graphics (20261004s). Loaded only by services.html.
   Hero drawings, picture cards and track record emblems. Uses the site variables from gaiergy.css. */

.svx-body{min-width:0;container-type:inline-size;container-name:svx}

/* ---------- hero illustration panel */
.svx-hero{position:relative;margin:2.8rem 0 0;max-width:96rem;padding:2rem 2rem 1.4rem;
  border:1px solid var(--line);border-radius:1.4rem;overflow:hidden;
  background:
    radial-gradient(rgba(234,241,249,.07) 1px,transparent 1.2px) 0 0/2.2rem 2.2rem,
    radial-gradient(60rem 26rem at 85% 0%,rgba(71,200,227,.10),transparent 70%),
    linear-gradient(160deg,var(--ink-1),var(--ink-2))}
.svx-hero svg{display:block;width:100%;height:auto;overflow:visible}
.svx-hero .svx-tall{display:none}
.svx-cap{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);font-family:var(--mono);
  font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);line-height:1.5}
@container svx (max-width:639px){
  .svx-hero .svx-wide{display:none}
  .svx-hero .svx-tall{display:block;max-width:50rem;margin:0 auto}
  .svx-hero{padding:1.4rem .8rem 1.2rem}
  .svx-cap{padding-left:.6rem;padding-right:.6rem}
}
.svx-art{--k:1}
.svx-tall{--k:1.25}
.svx-art *{stroke-linecap:round;stroke-linejoin:round}
.svx-art .gly{fill:none}
.svx-art text{stroke:none}
.svx-art .o{fill:none;stroke:var(--bone);stroke-width:calc(2px * var(--k,1));stroke-opacity:0.44}
.svx-art .o2{fill:none;stroke:var(--bone);stroke-width:calc(2px * var(--k,1));stroke-opacity:0.7}
.svx-art .o4{fill:none;stroke:var(--bone);stroke-width:calc(1.5px * var(--k,1));stroke-opacity:0.22}
.svx-art .oc{fill:none;stroke:var(--cyan);stroke-width:calc(2.5px * var(--k,1))}
.svx-art .os{fill:none;stroke:var(--sage);stroke-width:calc(2.5px * var(--k,1))}
.svx-art .ob{fill:none;stroke:var(--blue);stroke-width:calc(2.5px * var(--k,1))}
.svx-art .obl{fill:none;stroke:var(--cyan);stroke-width:calc(2px * var(--k,1));stroke-opacity:0.55}
.svx-art .op{fill:none;stroke:var(--peri);stroke-width:calc(2.5px * var(--k,1))}
.svx-art .opd{fill:none;stroke:var(--peri);stroke-width:calc(2.5px * var(--k,1));stroke-dasharray:7 6}
.svx-art .dsh{fill:none;stroke:var(--bone);stroke-width:calc(1.5px * var(--k,1));stroke-opacity:0.3;stroke-dasharray:5 6}
.svx-art .dshc{fill:none;stroke:var(--cyan);stroke-width:calc(2px * var(--k,1));stroke-opacity:0.75;stroke-dasharray:7 7}
.svx-art .dshp{fill:none;stroke:var(--peri);stroke-width:calc(1.6px * var(--k,1));stroke-opacity:0.65;stroke-dasharray:4 6}
.svx-art .ldr{fill:none;stroke:var(--bone);stroke-width:calc(1.3px * var(--k,1));stroke-opacity:0.4}
.svx-art .flc{fill:none;stroke:var(--cyan);stroke-width:calc(3px * var(--k,1));stroke-dasharray:2 10}
.svx-art .fls{fill:none;stroke:var(--sage);stroke-width:calc(3px * var(--k,1));stroke-dasharray:2 10}
.svx-art .flb{fill:none;stroke:var(--blue);stroke-width:calc(3.2px * var(--k,1));stroke-dasharray:2 10}
.svx-art .bld{fill:var(--ink-2);stroke:var(--bone);stroke-width:calc(2px * var(--k,1));stroke-opacity:0.44}
.svx-art .bld2{fill:var(--ink-3);stroke:var(--bone);stroke-width:calc(2px * var(--k,1));stroke-opacity:0.5}
.svx-art .pin{fill:var(--ink-2);stroke:var(--cyan);stroke-width:calc(2.5px * var(--k,1))}
.svx-art .fc{fill:var(--cyan);fill-opacity:0.14;stroke:var(--cyan);stroke-width:calc(2px * var(--k,1))}
.svx-art .fs{fill:var(--sage);fill-opacity:0.16;stroke:var(--sage);stroke-width:calc(2px * var(--k,1))}
.svx-art .fb{fill:var(--blue);fill-opacity:0.25;stroke:var(--blue);stroke-width:calc(2px * var(--k,1))}
.svx-art .fp{fill:var(--peri);fill-opacity:0.16;stroke:var(--peri);stroke-width:calc(2px * var(--k,1))}
.svx-art .fbo{fill:var(--bone);fill-opacity:0.08;stroke:var(--bone);stroke-width:calc(1.6px * var(--k,1));stroke-opacity:0.44}
.svx-art .sc{fill:var(--cyan)}
.svx-art .ss{fill:var(--sage)}
.svx-art .sbo{fill:var(--bone);fill-opacity:0.75}
.svx-art .sfc{fill:var(--cyan);fill-opacity:0.22}
.svx-art .sfs{fill:var(--sage);fill-opacity:0.14}
.svx-art .earth{fill:var(--ink-3);fill-opacity:0.7}
.svx-art .water{fill:var(--blue);fill-opacity:0.13}
.svx-art .road{fill:var(--ink-3);stroke:var(--bone);stroke-width:calc(1.5px * var(--k,1));stroke-opacity:0.16}
.svx-art .rdk{fill:none;stroke:var(--ink-3);stroke-width:calc(28px * var(--k,1))}
.svx-art .rde{fill:none;stroke:var(--bone);stroke-width:calc(32px * var(--k,1));stroke-opacity:0.14}
.svx-art .gl{fill:none;stroke:var(--bone);stroke-width:calc(2.5px * var(--k,1));stroke-opacity:0.72}
.svx-art .pipe{fill:none;stroke:var(--cyan);stroke-width:calc(9px * var(--k,1))}
.svx-art .pipei{fill:none;stroke:var(--ink);stroke-width:calc(4px * var(--k,1))}
.svx-art .lab{font-family:var(--sans);fill:var(--bone);font-weight:500;fill-opacity:0.9}
.svx-art .mut{font-family:var(--sans);fill:var(--bone);font-weight:400;fill-opacity:0.62}
.svx-art .mc{font-family:var(--mono);fill:var(--cyan);font-weight:600;letter-spacing:0.08em}
.svx-art .mb{font-family:var(--mono);fill:var(--bone);font-weight:500;fill-opacity:0.66;letter-spacing:0.08em}
.svx-art .pn{font-family:var(--sans);fill:var(--cyan);font-weight:700}

/* ---------- picture cards (the bullet lists): compact rows, icon on the left */
.svc ul.svx-cards{margin-top:2.4rem;max-width:none;list-style:none;display:block;column-count:3;column-gap:.8rem}
.svc .svx-cards li{display:flex;flex-direction:row;align-items:flex-start;gap:1.1rem;padding:1rem 1.2rem;
  border:1px solid var(--line);border-radius:.9rem;color:var(--bone-2);font-size:1.38rem;line-height:1.35;
  background:linear-gradient(165deg,rgba(18,32,56,.70),rgba(8,15,30,.45));break-inside:avoid;
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.svc .svx-cards li:last-child{border-bottom:1px solid var(--line)}
.svc .svx-cards li::before{content:none}
.svx-ic{flex:none;width:3.4rem;height:3.4rem;padding:.55rem;border-radius:.7rem;display:block;margin-top:.05rem;
  background:rgba(71,200,227,.07);border:1px solid rgba(71,200,227,.24)}
.svx-i{display:block;width:100%;height:100%;fill:none;stroke:var(--cyan);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.svx-t{min-width:0;padding-top:.05rem}
@media (hover:hover) and (pointer:fine){
  .svc .svx-cards li:hover{border-color:rgba(71,200,227,.42)}
}

/* ---------- track record emblem */
.track.svx-track{display:flex;align-items:flex-start;gap:1.5rem;margin-top:2rem;padding:1.3rem 1.6rem}
.svx-emb{flex:none;width:4.8rem;height:4.8rem;display:block}
.svx-e{display:block;width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.svx-e .e1{stroke:var(--cyan);stroke-opacity:.55;stroke-width:1.6}
.svx-e .e2{stroke:var(--cyan);stroke-width:1.4;fill:rgba(71,200,227,.08)}
.svx-e .e3{stroke:var(--cyan);stroke-width:3.2}
.svx-tt{min-width:0}

/* ---------- layout steps */
.svc .svx-cards li{margin-bottom:.8rem}
@media (max-width:1100px){ .svc ul.svx-cards{column-count:2} }
@media (max-width:600px){ .svc ul.svx-cards{column-count:1} .svc .svx-cards li{margin:0;padding:.85rem .2rem;background:none;border:0;border-top:1px solid var(--line);border-radius:0} .svc .svx-cards li:last-child{border-bottom:1px solid var(--line)} }
@media (max-width:600px){
  .svc .svx-cards li{font-size:1.4rem;gap:1.1rem}
  .svx-cap{font-size:1.2rem;letter-spacing:.1em}
  .svx-emb{width:4.2rem;height:4.2rem}
  .track.svx-track{gap:1.2rem;padding:1.2rem 1.3rem}
}

/* ---------- motion (only when services-graphics.js adds .svx-js; reduced motion stays static) */
.svx-js .svx-hero .d{stroke-dasharray:1 1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s var(--ease) calc(.15s + var(--i,0)*.12s)}
.svx-js .svx-hero .fd .d{transition-delay:calc(.2s + var(--i,0)*.14s)}
.svx-js .svx-hero.on .d{stroke-dashoffset:0}
.svx-js .svx-hero .fd{opacity:0;transform:translateY(10px);
  transition:opacity .9s var(--ease) calc(.2s + var(--i,0)*.14s),transform .9s var(--ease) calc(.2s + var(--i,0)*.14s)}
.svx-js .svx-hero.on .fd{opacity:1;transform:none}
.svx-js .svx-hero.on .flc,.svx-js .svx-hero.on .fls,.svx-js .svx-hero.on .flb{animation:svxflow 1.8s linear infinite}
@keyframes svxflow{to{stroke-dashoffset:-24}}
.svx-js .svx-cards li{opacity:0;transition:opacity .8s var(--ease) calc(var(--i,0)*.08s),border-color .4s var(--ease)}
.svx-js .svx-cards.on li{opacity:1}
.svx-js .svx-track .svx-e{opacity:0;transform:scale(.8);transition:opacity .8s var(--ease) .2s,transform .8s var(--ease) .2s}
.svx-js .svx-track.on .svx-e{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .svx-js .svx-hero .d{stroke-dasharray:none;stroke-dashoffset:0}
  .svx-js .svx-hero .fd,.svx-js .svx-cards li,.svx-js .svx-track .svx-e{opacity:1;transform:none}
  .svx-art .flc,.svx-art .fls,.svx-art .flb{animation:none}
}

/* ===================== MARINE BANNER (top of section 05) ===================
   2026-10-04. The photo and words from the former home page marine panel:
   the jack-up barge, darkened like it was there, with the panel text on it. */
.svx-banner{grid-column:1/-1;position:relative;overflow:hidden;border-radius:1.4rem;
  min-height:38rem;display:flex;align-items:flex-end;margin-bottom:5rem;background:var(--ink-2)}
.svx-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.svx-banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(5,9,18,.94) 22%,rgba(5,9,18,.5) 70%,rgba(5,9,18,.8)),
             linear-gradient(180deg,rgba(5,9,18,.3),transparent 40%,rgba(5,9,18,.75))}
.svx-banner-in{position:relative;z-index:1;padding:4.4rem 4rem;max-width:72rem}
.svx-banner .eyebrow{margin-bottom:1.6rem}
.svx-banner-h{font-size:clamp(3rem,4.4vw,6rem)!important;line-height:1;letter-spacing:-.045em;font-weight:600}
.svx-banner p{margin-top:1.8rem;color:var(--bone-2);font-size:1.65rem;max-width:52ch}
@media (max-width:760px){
  .svx-banner{min-height:30rem;margin-bottom:3.4rem;border-radius:1rem}
  .svx-banner-in{padding:2.8rem 2rem}
  .svx-banner-h{font-size:3.2rem!important}
  .svx-banner p{font-size:1.6rem}
}