/* =========================================================
   VICTOR GRAFIX — Interactive visual layer (enhance.css)
   Loaded after the base styles. Remove the <link> to roll back.
   Subtle & premium: motion supports content, never fights it.
========================================================= */
:root{
  --vg-teal: #009598;
  --vg-teal-deep: #006e70;
  /* Tonal palette built around the corporate teal (#009598, hue ~181°) */
  --vg-teal-ink: #00585a;   /* deepest — text/accents on white */
  --vg-aqua: #2fd3c4;       /* bright */
  --vg-mint: #b8f5ec;       /* soft — accents on teal */
  --vg-yellow: #ffd84d;     /* sunny accent for vibrancy */
  --vg-yellow-deep: #f2c200;
  /* teal → aqua → lime → yellow (echoes the site's original yellow-green-teal gradient) */
  --vg-grad-light: linear-gradient(90deg, #007a7c 0%, #00a59c 32%, #5cc46a 66%, #f2c200 100%); /* on white */
  --vg-grad-dark:  linear-gradient(90deg, #ffffff 0%, #b8f5ec 28%, #d6f36b 64%, #ffd84d 100%); /* on teal */
  --vg-grad-text:  linear-gradient(90deg, #00585a 0%, #009598 50%, #3fae5a 100%);  /* gradient TEXT on white (stays readable) */
  --vg-grad: var(--vg-grad-light);
  --vg-focus: #00585a;
  --vg-ease-out: cubic-bezier(.16, 1, .3, 1);
}
/* Teal surfaces switch to the light-on-dark version automatically */
.primary, header.theme-dark{ --vg-grad: var(--vg-grad-dark); --vg-focus: #ffffff; }
header.theme-light{ --vg-grad: var(--vg-grad-text); --vg-grad-bar: var(--vg-grad-light); }

/* Re-tone the original accents in the base stylesheet to match */
.chip:hover{ background: var(--vg-grad); -webkit-background-clip: text; background-clip: text; }
.svc-icon{ background: linear-gradient(#fff,#fff) padding-box, var(--vg-grad-light) border-box; }
#services .card::after{ background: radial-gradient(circle at 30% 30%, rgba(0,149,152,.16), transparent 60%); }

/* ---------- 1. Top scroll progress ---------- */
.fx-progress{
  position: fixed; top: 0; left: 0; z-index: 90;
  width: 100%; height: 3px;
  background: var(--vg-grad-dark);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  pointer-events: none;
  transition: transform 140ms linear;
}

/* ---------- 2. Nav: active section underline ---------- */
.nav-links .chip{ position: relative; }
.nav-links .chip::after{
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--vg-grad-bar, var(--vg-grad));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--vg-ease-out);
}
.nav-links .chip:hover::after,
.nav-links .chip.is-active::after{ transform: scaleX(1); }
.nav-links .chip.is-active{ font-weight: 600; }

/* ---------- 3. Side dots: pill + labelled tooltips ---------- */
.progress-label{ display: none !important; }
.p-dot{ position: relative; transition: height 380ms var(--vg-ease-out), transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease); }
.p-dot.active{ height: 28px; border-radius: 99px; }
.p-dot::after{
  content: attr(data-label);
  position: absolute; right: 22px; top: 50%;
  transform: translate(6px, -50%);
  white-space: nowrap; pointer-events: none;
  font: 600 .68rem/1 "Open Sans", system-ui, sans-serif;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: #fff; background: rgba(0, 40, 42, .82);
  padding: 7px 11px; border-radius: 99px;
  opacity: 0;
  transition: opacity 220ms var(--ease), transform 320ms var(--vg-ease-out);
}
.p-dot:hover::after, .p-dot:focus-visible::after{ opacity: 1; transform: translate(0, -50%); }
.p-dot:focus-visible{ outline: 2px solid var(--vg-focus); outline-offset: 3px; }

/* ---------- 4. Section counter (desktop) ---------- */
.fx-counter{
  position: fixed; left: 24px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  font-family: "Anta", sans-serif; font-size: .78rem; letter-spacing: 1.6px;
  text-transform: uppercase; color: rgba(255,255,255,.8);
  pointer-events: none;
  padding: 8px 14px; border-radius: 99px;
  background: rgba(0,70,72,.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color 300ms var(--ease), background 300ms var(--ease);
}
.fx-counter .fx-counter-num{ font-size: 1rem; color: #fff; transition: color 300ms var(--ease); }
.fx-counter .fx-counter-line{ width: 34px; height: 1px; background: currentColor; opacity: .5; }
body.fx-on-light .fx-progress{ background: var(--vg-grad-light); }
body.fx-on-light .fx-counter{ color: rgba(0,149,152,.75); background: rgba(255,255,255,.82); box-shadow: 0 6px 20px -10px rgba(0,0,0,.25); }
body.fx-on-light .fx-counter .fx-counter-num{ color: var(--vg-teal); }
.fx-counter-label{ display: inline-block; }
.fx-counter-label.fx-swap{ animation: fxLabelIn 520ms var(--vg-ease-out); }
@keyframes fxLabelIn{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }

/* ---------- 5. Buttons: magnetic + shine ---------- */
.btn{ position: relative; overflow: hidden; isolation: isolate; will-change: transform; }
.btn::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 25%, color-mix(in srgb, currentColor 22%, transparent) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 750ms var(--vg-ease-out);
}
.btn:hover::before{ transform: translateX(120%); }
.btn:focus-visible{ outline: 2px solid var(--vg-focus); outline-offset: 3px; }
.btn .fx-arrow{ display: inline-block; transition: transform 300ms var(--vg-ease-out); }
.btn:hover .fx-arrow{ transform: translateX(4px); }

/* ---------- 6. Ambient aurora on teal panels ---------- */
.fx-aurora{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.panel.primary > .container{ position: relative; z-index: 1; }
.fx-aurora .fx-blob{
  position: absolute; border-radius: 50%;
  filter: blur(60px); mix-blend-mode: screen; will-change: transform;
}
.fx-aurora .fx-blob:nth-child(1){
  width: 44vw; height: 44vw; left: -12vw; top: -18vw; opacity: .34;
  background: radial-gradient(circle, #2fd3c4 0%, transparent 62%);
  animation: fxDrift1 24s ease-in-out infinite alternate;
}
.fx-aurora .fx-blob:nth-child(2){
  width: 36vw; height: 36vw; right: -10vw; bottom: -16vw; opacity: .55;
  background: radial-gradient(circle, #00585a 0%, transparent 62%);
  mix-blend-mode: multiply;
  animation: fxDrift2 28s ease-in-out infinite alternate;
}
.fx-aurora .fx-blob:nth-child(3){
  width: 30vw; height: 30vw; left: 38vw; top: 30%; opacity: .30;
  background: radial-gradient(circle, #b8f5ec 0%, transparent 62%);
  animation: fxDrift3 32s ease-in-out infinite alternate;
}
.fx-aurora::before{ /* fine dot grid, fades out at edges */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 65% 45%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 55% at 65% 45%, #000 10%, transparent 75%);
}
.fx-aurora::after{ /* soft light that follows the cursor */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(520px circle at var(--mx, 60%) var(--my, 40%), rgba(255,255,255,.09), transparent 45%);
  transition: opacity 400ms var(--ease);
}
.fx-aurora.is-soft .fx-blob{ opacity: .16; }
.fx-aurora.is-soft::before{ opacity: .6; }

@keyframes fxDrift1{ to{ transform: translate(14vw, 10vh) scale(1.12); } }
@keyframes fxDrift2{ to{ transform: translate(-12vw, -12vh) scale(1.18); } }
@keyframes fxDrift3{ to{ transform: translate(-16vw, 14vh) scale(.88); } }

/* ---------- 7. Hero details ---------- */
.hero .kicker::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #7ff7e6; box-shadow: 0 0 0 0 rgba(127,247,230,.6);
  animation: fxPulse 2.6s ease-out infinite;
}
@keyframes fxPulse{
  0%{ box-shadow: 0 0 0 0 rgba(127,247,230,.55); }
  70%{ box-shadow: 0 0 0 10px rgba(127,247,230,0); }
  100%{ box-shadow: 0 0 0 0 rgba(127,247,230,0); }
}

/* Headline: word-by-word rise */
.fx-word{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.fx-word > span{ display: inline-block; transform: translateY(105%); }
.fx-split.is-in .fx-word > span{
  transform: none;
  transition: transform 900ms var(--vg-ease-out);
  transition-delay: calc(var(--w, 0) * 85ms + 150ms);
}
.fx-highlight{ position: relative; display: inline-block; }
.fx-nowrap{ white-space: nowrap; }
/* Highlighted word ("performance"): gradient text, applied from the first paint */
.hero h1 > span:not(.fx-word):not(.fx-nowrap),
.fx-highlight .fx-word > span{
  background: var(--vg-grad-dark);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* once split into words, the gradient lives on the inner word spans only */
.fx-highlight{ background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; }

/* Floating hero image */
.hero-image img{ animation: fxFloat 7s ease-in-out infinite; }
@keyframes fxFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
.hero-visual{ transition: transform 600ms var(--vg-ease-out); }

/* Meta cards */
.meta-card{
  transition: transform 350ms var(--vg-ease-out), border-color 300ms var(--ease), background 300ms var(--ease);
}
.meta-card:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.09); }

/* Scroll hint (desktop) */
.fx-hint{
  position: absolute; left: 50%; bottom: 26px; z-index: 2;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: "Anta", sans-serif; font-size: .74rem; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.78); background: none; border: 0; cursor: pointer; padding: 8px 12px;
  transition: opacity 500ms var(--ease), color 220ms var(--ease);
}
.fx-hint:hover{ color: #fff; }
.fx-hint .fx-mouse{
  width: 20px; height: 30px; border: 1.5px solid currentColor; border-radius: 12px; position: relative;
}
.fx-hint .fx-mouse::after{
  content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px;
  border-radius: 2px; background: currentColor; animation: fxWheel 1.8s ease-in-out infinite;
}
.fx-hint .fx-hint-arrow{ display: inline-block; animation: fxNudge 1.8s ease-in-out infinite; }
.fx-hint.is-gone{ opacity: 0; pointer-events: none; }
@keyframes fxWheel{ 0%{ transform: translateY(0); opacity: 1; } 70%{ transform: translateY(8px); opacity: 0; } 100%{ opacity: 0; } }
@keyframes fxNudge{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(6px); } }

/* ---------- 8. Section titles: drawn accent ---------- */
.title::after{
  content: ""; display: block; width: 64px; height: 3px; margin-top: 12px; border-radius: 3px;
  background: var(--vg-grad); transform: scaleX(0); transform-origin: left center;
  transition: transform 1000ms var(--vg-ease-out) 350ms;
}
.reveal.show .title::after{ transform: scaleX(1); }

/* ---------- 9. Spotlight surfaces (cursor-following glow) ---------- */
.fx-spot{ position: relative; isolation: isolate; --mx: 50%; --my: 50%; }
.fx-spot::before{
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--spot, rgba(255,255,255,.13)), transparent 45%);
  opacity: 0; transition: opacity 350ms var(--ease);
}
.fx-spot:hover::before{ opacity: 1; }
.white .fx-spot{ --spot: rgba(0,149,152,.10); }

/* ---------- 10. Services cards ---------- */
#services .card{
  position: relative;
  border-radius: 24px;
  border: 1px solid transparent;
  transition: transform 300ms var(--ease), border-color 350ms var(--ease), box-shadow 450ms var(--vg-ease-out), background 350ms var(--ease), opacity var(--speed) var(--ease);
}
#services .card:hover{
  background: #fff;
  border-color: rgba(0,149,152,.16);
  box-shadow: 0 26px 60px -28px rgba(0,149,152,.45);
}
#services .card::after{ transition: opacity 400ms var(--ease), transform 600ms var(--vg-ease-out); }
#services .card:hover::after{ opacity: 1; transform: scale(1.6); }
.svc-icon{ transition: transform 500ms var(--vg-ease-out), box-shadow 400ms var(--ease); }
#services .card:hover .svc-icon{ transform: rotate(-6deg) scale(1.06); box-shadow: 0 10px 24px -10px rgba(0,149,152,.5); }
/* ---------- 10b. Services: 3D isometric line-art illustrations ---------- */
#services .svc-icon.is-iso{
  width: 150px; height: 112px; margin: -8px 0 8px -12px;
  display: block; border: 0; border-radius: 0; background: none; box-shadow: none;
}
#services .card:hover .svc-icon.is-iso{ transform: none; box-shadow: none; }
#services .card:has(.svc-icon.is-iso)::after{ display: none; }
.svc-icon.is-iso svg.iso{ width: 100%; height: 100%; display: block; overflow: visible; fill: none; stroke: none; }
.iso path, .iso circle, .iso rect, .iso ellipse{
  stroke: var(--vg-teal); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round;
}
/* faces: light from the top-left */
.iso .t{ fill: #ffffff; }
.iso .l{ fill: #e9f7f7; }
.iso .r{ fill: #d2eded; }
.iso .a1{ fill: #c9f4ee; }
.iso .a2{ fill: #5fe3d0; }
.iso .a2f{ fill: #2fd3c4; }
.iso .a3{ fill: var(--vg-yellow); }
.iso .dot{ fill: #fff; }
.iso .ln{ fill: none; }
.iso .lnr{ fill: #fff; }
.iso .thin{ stroke-width: .9; opacity: .55; }
.iso .dash2{ stroke-dasharray: 2 3; }
.iso .anchor{ fill: #fff; }
.iso .cur{ fill: #fff; stroke: var(--vg-teal-ink); stroke-width: 1.4; }
.iso .spk{ fill: var(--vg-yellow); stroke: var(--vg-teal); stroke-width: .8; }
.iso .pkt{ fill: var(--vg-yellow); stroke: var(--vg-teal-ink); stroke-width: .8; }
/* platform */
.iso .bt{ fill: #f3fbfb; stroke: rgba(0,149,152,.35); }
.iso .bl{ fill: #e4f4f4; stroke: rgba(0,149,152,.35); }
.iso .br{ fill: #d7eeee; stroke: rgba(0,149,152,.35); }
.iso .dash{ fill: none; stroke: rgba(0,149,152,.45); stroke-dasharray: 2.5 3.5; stroke-width: 1; }
.iso .sh{ fill: rgba(0,149,152,.11); stroke: none; transform-box: fill-box; transform-origin: center; transition: transform 600ms var(--vg-ease-out), opacity 600ms var(--ease); }
.iso .flow{ fill: none; stroke: var(--vg-teal); stroke-width: 1.3; stroke-dasharray: 3 3; }

/* transform helpers */
.iso g{ transition: transform 650ms var(--vg-ease-out); }
.iso .spkw, .iso .ring, .iso .bar, .iso .cta, .iso .sw{ transform-box: fill-box; transform-origin: center; }
.iso .bar{ transform-origin: 50% 100%; }

/* ===== Ambient animation (runs only while the Services panel is on screen) ===== */
.iso *{ animation-play-state: paused; }
#services.fx-inview .iso *{ animation-play-state: running; }

.iso .fl{ animation: isoFloat 6s ease-in-out infinite; }
.iso .cursor{ animation: isoFloat 6s ease-in-out -2s infinite; }
.iso .march{ animation: isoMarch 2.4s linear infinite; }
.iso .spkw{ animation: isoTwinkle 3.2s ease-in-out infinite; }
.iso .spkw.s2{ animation-delay: -1.6s; animation-duration: 2.8s; }
.iso .bob{ animation: isoBob 4.2s ease-in-out infinite; }
.iso .bob2{ animation-delay: -2.1s; }
/* web: dots blink, layout lines type in, yellow CTA pulses */
.iso .blink{ animation: isoBlink 2.4s ease-in-out infinite; }
.iso .k2{ animation-delay: .3s; } .iso .k3{ animation-delay: .6s; }
#services .iso .type{ animation: isoType 5.5s var(--vg-ease-out) infinite; }
#services .iso .t2{ animation-delay: .25s; } #services .iso .t3{ animation-delay: .5s; }
.iso .img{ animation: isoGlow 4s ease-in-out infinite; }
.iso .cta{ animation: isoPop 2.8s ease-in-out infinite; }
/* CMS: layers breathe apart */
.iso .br3{ animation: isoBreathe3 5s ease-in-out infinite; }
.iso .br2{ animation: isoBreathe2 5s ease-in-out infinite; }
/* commerce: bolt flickers, data packets travel the links */
.iso .flow{ animation: isoFlow 1.6s linear infinite; }
.iso .zap{ animation: isoZap 3.6s linear infinite; }
.iso .pkt{ animation: isoPacket 2.4s var(--ease) infinite; }
.iso .pk2{ animation-delay: -1.2s; }
/* branding: logo ring pulses, swatches cycle, pen curve draws and undraws */
.iso .ring{ animation: isoRing 3s ease-in-out infinite; }
.iso .sw{ animation: isoSwatch 3.6s ease-in-out infinite; }
.iso .sw2{ animation-delay: .35s; } .iso .sw3{ animation-delay: .7s; }
#services .iso .curve{ animation: isoCurve 6s var(--vg-ease-out) infinite; }
/* UI/UX: bars grow, cursor taps the card */
.iso .bar{ animation: isoBar 3.6s var(--vg-ease-out) infinite; }
.iso .b2{ animation-delay: .2s; } .iso .b3{ animation-delay: .4s; }
.iso .tap{ animation: isoTap 4s var(--vg-ease-out) infinite; }
.iso .click{ stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: 0; animation: isoRays 4s var(--vg-ease-out) infinite; }

@keyframes isoFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-3px); } }
@keyframes isoBob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-3.5px); } }
@keyframes isoMarch{ to{ stroke-dashoffset: -12; } }
@keyframes isoTwinkle{ 0%,100%{ transform: scale(.35) rotate(0deg); opacity: .25; } 50%{ transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes isoBlink{ 0%,60%,100%{ opacity: 1; } 30%{ opacity: .25; } }
@keyframes isoType{ 0%{ stroke-dashoffset: 1; opacity: 1; } 25%{ stroke-dashoffset: 0; } 82%{ stroke-dashoffset: 0; opacity: 1; } 100%{ stroke-dashoffset: 0; opacity: 0; } }
@keyframes isoGlow{ 0%,100%{ opacity: 1; } 50%{ opacity: .6; } }
@keyframes isoPop{ 0%,70%,100%{ transform: scale(1); } 80%{ transform: scale(1.12); } 90%{ transform: scale(.97); } }
@keyframes isoBreathe3{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
@keyframes isoBreathe2{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } }
@keyframes isoFlow{ to{ stroke-dashoffset: -12; } }
@keyframes isoZap{ 0%,78%,100%{ opacity: 1; } 82%{ opacity: .25; } 86%{ opacity: 1; } 90%{ opacity: .4; } 94%{ opacity: 1; } }
@keyframes isoPacket{ 0%{ transform: translate(0,0); opacity: 0; } 15%{ opacity: 1; } 85%{ opacity: 1; } 100%{ transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes isoRing{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.14); } }
@keyframes isoSwatch{ 0%,40%,100%{ transform: translateY(0); } 20%{ transform: translateY(-3px); } }
@keyframes isoCurve{ 0%{ stroke-dasharray: 1; stroke-dashoffset: 1; } 35%{ stroke-dashoffset: 0; } 80%{ stroke-dashoffset: 0; } 100%{ stroke-dasharray: 1; stroke-dashoffset: -1; } }
@keyframes isoBar{ 0%{ transform: scaleY(.25); } 35%,80%{ transform: scaleY(1); } 100%{ transform: scaleY(.25); } }
@keyframes isoTap{ 0%,100%{ transform: translate(0,0); } 35%{ transform: translate(-9px,-12px); } 45%{ transform: translate(-9px,-12px) scale(.9); } 55%{ transform: translate(-9px,-12px); } 75%{ transform: translate(0,0); } }
@keyframes isoRays{ 0%,42%{ opacity: 0; } 50%{ opacity: 1; } 65%,100%{ opacity: 0; } }

/* ===== Hover: lift + one detail per illustration ===== */
#services .card:hover .iso .lift{ transform: translateY(-6px); }
#services .card:hover .iso .sh{ transform: scale(.82); opacity: .7; }
#services .card:hover .iso .p2{ transform: translate(4px, -4px); }
#services .card:hover .iso .ly3{ transform: translateY(-7px); }
#services .card:hover .iso .ly2{ transform: translateY(-3px); }
#services .card:hover .iso .n1{ transform: translate(3px, -3px); }
#services .card:hover .iso .n2{ transform: translate(-3px, -2px); }
#services .card:hover .iso .pen{ transform: translateY(-4px); }
#services .card:hover .iso .fcard{ transform: translate(5px, -5px); }

/* entrance: static content lines draw in when the card is revealed */
.iso .ln:not(.curve):not(.click){ stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal.show .iso .ln:not(.curve):not(.type):not(.click){ animation: isoDraw 1200ms var(--vg-ease-out) 350ms both; animation-play-state: running; }
@keyframes isoDraw{ from{ stroke-dasharray: 1; stroke-dashoffset: 1; } to{ stroke-dasharray: 1; stroke-dashoffset: 0; } }

@media (max-width: 900px){
  #services .svc-icon.is-iso{ width: 132px; height: 99px; margin-left: -10px; }
}
@media (min-width: 901px) and (min-height: 960px){
  #services .svc-icon.is-iso{ width: 176px; height: 132px; }
}
@media (min-width: 901px) and (max-height: 820px){
  .fx-counter{ display: none; }
}
@media (min-width: 901px) and (max-height: 860px){
  #services .svc-icon.is-iso{ width: 120px; height: 90px; margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce){
  .iso *{ animation: none !important; }
  .iso .ln{ stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .iso .pkt, .iso .click{ display: none; }
}

.fx-index{
  position: absolute; top: 18px; right: 22px;
  font-family: "Anta", sans-serif; font-size: 2.2rem; line-height: 1;
  color: rgba(0,149,152,.13); pointer-events: none;
  transition: color 300ms var(--ease), transform 500ms var(--vg-ease-out);
}
#services .card:hover .fx-index{
  background: var(--vg-grad-text); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; transform: translateY(-3px);
}
#services .card h3{ transition: letter-spacing 400ms var(--vg-ease-out); }
#services .card:hover h3{ letter-spacing: 1.3px; }

/* ---------- 11. Process: rail, ghost number, timer ---------- */
.step-list{ position: relative; padding-left: 26px; }
.step-list::before, .step-list::after{
  content: ""; position: absolute; left: 7px; top: var(--rail-top, 22px); width: 2px; border-radius: 2px;
}
.step-list::before{ bottom: var(--rail-bottom, 22px); background: rgba(255,255,255,.16); }
.step-list::after{
  height: var(--fill, 0px); background: linear-gradient(#fff, rgba(255,255,255,.65));
  box-shadow: 0 0 12px rgba(255,255,255,.5);
  transition: height 600ms var(--vg-ease-out);
}
.step{ position: relative; }
.step::before{
  content: ""; position: absolute; left: -24px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.45); background: var(--vg-teal); z-index: 1;
  transition: background 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease), transform 400ms var(--vg-ease-out);
}
.step.is-done::before{ background: #fff; border-color: #fff; }
.step[aria-selected="true"]::before{ background: #fff; border-color: #fff; transform: scale(1.25); box-shadow: 0 0 0 5px rgba(255,255,255,.18); }
.step[aria-selected="true"]{ box-shadow: 0 18px 40px -24px rgba(0,0,0,.5); }
.step[aria-selected="true"] .badge{ background: var(--vg-grad-dark); color: var(--vg-teal-ink); font-weight: 700; }
.step .badge{ transition: background 300ms var(--ease), color 300ms var(--ease); }
.step:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }

.step-detail{ transition: transform 300ms var(--vg-ease-out), opacity 300ms var(--ease); }
.step-detail > *{ position: relative; z-index: 1; }
.detail-ghost{
  position: absolute !important; z-index: 0 !important; right: 18px; bottom: -34px;
  font-family: "Anta", sans-serif; font-size: clamp(7rem, 13vw, 11rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.2);
  pointer-events: none; user-select: none;
}
.detail-ghost.fx-swap{ animation: fxGhost 700ms var(--vg-ease-out); }
@keyframes fxGhost{ from{ opacity: 0; transform: translateY(30px); } to{ opacity: 1; transform: none; } }

.step-detail .bullets{ list-style: none; padding-left: 0; }
.step-detail .bullets li{ position: relative; padding-left: 28px; }
.step-detail .bullets li::before{
  content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat;
}
.bullets li.fx-in{ animation: fxRise 520ms var(--vg-ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }
@keyframes fxRise{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }

.fx-timer{
  position: absolute !important; left: 22px; right: 22px; bottom: 16px; height: 2px;
  background: rgba(255,255,255,.15); border-radius: 2px; overflow: hidden;
}
.fx-timer i{ display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.fx-timer.is-running i{ animation: fxTimer var(--dur, 6s) linear forwards; }
.fx-paused .fx-timer.is-running i,
.fx-timer.is-paused i{ animation-play-state: paused; }
@keyframes fxTimer{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

/* ---------- 12. Proof: stats + testimonial ---------- */
.stat{
  position: relative; overflow: hidden;
  transition: transform 350ms var(--vg-ease-out), border-color 300ms var(--ease), box-shadow 400ms var(--ease), opacity var(--speed) var(--ease);
}
.stat::after{
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--vg-grad); transform: scaleX(0); transform-origin: left;
  transition: transform 600ms var(--vg-ease-out);
}
.stat:hover{ transform: translateY(-4px); border-color: rgba(0,149,152,.3); box-shadow: 0 22px 44px -26px rgba(0,149,152,.5); }
.stat:hover::after{ transform: scaleX(1); }
.stat .num{ transition: letter-spacing 400ms var(--vg-ease-out); }
.stat:hover .num{ letter-spacing: .5px; }

.quote{ transition: transform 320ms var(--vg-ease-out), opacity 320ms var(--ease), box-shadow 300ms var(--ease); }
.quote:hover{ box-shadow: 0 22px 50px -20px rgba(0,149,152,.35); }
.fx-qfoot{ display: flex; align-items: center; gap: 14px; margin-top: 16px; position: relative; z-index: 1; }
.fx-qdots{ display: flex; gap: 8px; }
.fx-qdot{
  width: 8px; height: 8px; padding: 0; border-radius: 99px; border: 0; cursor: pointer;
  background: rgba(0,149,152,.22);
  transition: width 400ms var(--vg-ease-out), background 300ms var(--ease);
}
.fx-qdot.is-active{ width: 26px; background: var(--vg-teal); }
.fx-qdot:focus-visible{ outline: 2px solid var(--vg-focus); outline-offset: 2px; }
.fx-qbar{ flex: 1; max-width: 160px; height: 2px; border-radius: 2px; background: rgba(0,149,152,.14); overflow: hidden; }
.fx-qbar i{ display: block; height: 100%; background: var(--vg-grad); transform-origin: left; transform: scaleX(0); }
.fx-qbar.is-running i{ animation: fxTimer var(--dur, 7s) linear forwards; }
.fx-qbar.is-paused i{ animation-play-state: paused; }
.icon-btn{ color: var(--vg-teal); font-size: 1rem; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease); }
.icon-btn:hover{ background: var(--vg-teal); color: #fff; border-color: var(--vg-teal); }
.icon-btn:focus-visible{ outline: 2px solid var(--vg-focus); outline-offset: 3px; }

/* Fit the proof panel on shorter desktop screens */
@media (min-width: 901px) and (max-height: 980px){
  #proof .stats, #proof .carousel{ margin-top: 14px; }
  #proof .stat{ padding: 14px 18px; }
  #proof .stat .hint{ margin-top: 4px; }
  #proof .quote{ min-height: 0; padding: 18px 22px; }
  #proof .sub{ margin: 0; }
}

/* ---------- 13. Portfolio ---------- */
.work-thumb::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,60,62,.55), rgba(0,60,62,0) 55%);
  opacity: 0; transition: opacity 400ms var(--ease);
}
.work-card:hover .work-thumb::after{ opacity: 1; }
.fx-work-cta{
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 99px;
  background: var(--vg-teal); color: #fff;
  font-family: "Anta", sans-serif; font-size: .74rem; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 300ms var(--ease), transform 400ms var(--vg-ease-out);
}
.work-card:hover .fx-work-cta, .work-card:focus-visible .fx-work-cta{ opacity: 1; transform: none; }
.work-card .work-title{ transition: color 300ms var(--ease); }
.work-card:focus-visible{ outline: 2px solid var(--vg-focus); outline-offset: 4px; }
/* after the staggered entrance, remove the delay so hovers feel instant */
.portfolio-grid .work-card.fx-settled{
  transition: opacity .8s var(--ease), transform 350ms var(--vg-ease-out), box-shadow 400ms var(--ease) !important;
  transition-delay: 0s !important;
}
.portfolio-grid .work-card.fx-settled:hover{
  box-shadow: 0 0 0 1px rgba(0,149,152,.3), 0 28px 56px -24px rgba(0,149,152,.55);
}
.work-img{ transition: transform 900ms var(--vg-ease-out) !important; }
.work-card:hover .work-img{ transform: scale(1.06) !important; }

/* Modal entrance */
.work-modal.show .work-backdrop{ animation: fxFade 320ms var(--ease) both; }
.work-modal.show .work-dialog{ animation: fxPop 560ms var(--vg-ease-out) both; }
.work-modal.show .work-preview{ animation: fxRise 600ms var(--vg-ease-out) 120ms both; }
.work-modal.show .work-meta{ animation: fxRise 600ms var(--vg-ease-out) 200ms both; }
.work-modal.show .work-highlights li{ animation: fxRise 500ms var(--vg-ease-out) both; }
.work-modal.show .work-highlights li:nth-child(1){ animation-delay: 260ms; }
.work-modal.show .work-highlights li:nth-child(2){ animation-delay: 320ms; }
.work-modal.show .work-highlights li:nth-child(3){ animation-delay: 380ms; }
.work-modal.show .work-highlights li:nth-child(4){ animation-delay: 440ms; }
.work-modal.show .work-highlights li:nth-child(n+5){ animation-delay: 500ms; }
.work-modal.is-closing .work-backdrop{ animation: fxFadeOut 260ms var(--ease) both; }
.work-modal.is-closing .work-dialog{ animation: fxPopOut 260ms var(--ease) both; }
.work-meta .btn-primary{ background: var(--vg-teal); color: #fff; border-color: var(--vg-teal); }
.work-meta .btn-primary:hover{ background: var(--vg-teal-deep); border-color: var(--vg-teal-deep); color: #fff; box-shadow: 0 14px 30px -14px rgba(0,149,152,.7); }
.work-tag{ transition: background 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease); }
.work-tag:hover{ background: var(--vg-teal); color: #fff; border-color: var(--vg-teal); }
.work-close{ transition: transform 300ms var(--vg-ease-out), background 250ms var(--ease), color 250ms var(--ease); color: var(--vg-teal); font-size: 1.3rem; }
.work-close:hover{ transform: rotate(90deg); background: var(--vg-teal); color: #fff; }
@keyframes fxFade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes fxFadeOut{ from{ opacity: 1; } to{ opacity: 0; } }
@keyframes fxPop{ from{ opacity: 0; transform: translateY(24px) scale(.96); } to{ opacity: 1; transform: none; } }
@keyframes fxPopOut{ from{ opacity: 1; transform: none; } to{ opacity: 0; transform: translateY(12px) scale(.98); } }

/* "View" cursor over portfolio cards */
@media (pointer: fine){
  .cursor-outline{ display: grid; place-items: center; transition: width .3s var(--vg-ease-out), height .3s var(--vg-ease-out), background-color .25s, border-color .25s; }
  .cursor-outline::after{
    content: "View"; font: 400 .68rem/1 "Anta", sans-serif; letter-spacing: 1.4px; text-transform: uppercase;
    color: #fff; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s var(--vg-ease-out);
  }
  body.fx-cursor-view .cursor-outline{
    width: 78px !important; height: 78px !important;
    background-color: rgba(0,149,152,.92) !important; border-color: transparent !important;
    mix-blend-mode: normal;
  }
  body.fx-cursor-view .cursor-outline::after{ opacity: 1; transform: none; }
  body.fx-cursor-view .cursor-dot{ opacity: 0; }
}

/* ---------- 14. Contact form micro-interactions ---------- */
.field label{ transition: color 250ms var(--ease), transform 300ms var(--vg-ease-out); display: inline-block; justify-self: start; }
.field:focus-within label{ color: #fff; transform: translateX(3px); }
input, textarea{ transition: border-color 250ms var(--ease), box-shadow 300ms var(--ease), background-color 300ms var(--ease); }
input:focus, textarea:focus{
  background-color: rgba(0,0,0,.42);
  box-shadow: 0 0 0 4px rgba(255,255,255,.10), 0 12px 28px -14px rgba(0,0,0,.6);
}
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.42); font-family: inherit; }
textarea{ font-family: inherit; }
.contact-card input:not([type="hidden"]):valid:not(:placeholder-shown){
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ff7e6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.fx-touched input:invalid, .fx-touched textarea:invalid{ border-color: rgba(255,170,160,.85); }
.field .fx-err{
  font-size: .8rem; color: #ffd0c9; min-height: 0; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 300ms var(--ease), opacity 250ms var(--ease);
}
.fx-touched:has(input:invalid) .fx-err{ max-height: 24px; opacity: 1; }
.fx-shake{ animation: fxShake 420ms var(--ease); }
@keyframes fxShake{ 0%,100%{ transform: none; } 20%{ transform: translateX(-6px); } 40%{ transform: translateX(5px); } 60%{ transform: translateX(-3px); } 80%{ transform: translateX(2px); } }
.btn.is-loading{ pointer-events: none; opacity: .85; }
.btn .fx-spinner{
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: fxSpin 700ms linear infinite;
}
@keyframes fxSpin{ to{ transform: rotate(360deg); } }
#formNote.fx-success{
  display: flex; align-items: center; gap: 10px; color: #fff;
  padding: 10px 14px; border-radius: 12px; background: rgba(127,247,230,.14); border: 1px solid rgba(127,247,230,.35);
  animation: fxRise 600ms var(--vg-ease-out) both;
}
#formNote.fx-success::before{ content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #7ff7e6; color: var(--vg-teal-deep); font-weight: 700; font-size: .8rem; flex: none; }
.contact-card a{ background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 400ms var(--vg-ease-out); }
.contact-card a:hover{ background-size: 100% 1px; }
.contact-card{ transition: border-color 300ms var(--ease), background 300ms var(--ease); }
.contact-card:hover{ border-color: rgba(255,255,255,.26); }

/* ---------- 15. Mobile ---------- */
@media (max-width: 900px){
  .fx-counter, .fx-hint{ display: none; }
  .step-list{ padding-left: 24px; }
  .fx-aurora .fx-blob{ filter: blur(40px); }
  .fx-aurora .fx-blob:nth-child(1){ width: 90vw; height: 90vw; }
  .fx-aurora .fx-blob:nth-child(2){ width: 80vw; height: 80vw; }
  .fx-aurora .fx-blob:nth-child(3){ width: 70vw; height: 70vw; left: 20vw; }
  .detail-ghost{ font-size: 7rem; bottom: -20px; }
}

/* ---------- 16. Reduced motion: keep it calm ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-aurora .fx-blob, .hero-image img, .hero .kicker::before, .fx-hint *{ animation: none !important; }
  .fx-word > span{ transform: none !important; }
  .title::after{ transform: scaleX(1) !important; }
  .fx-timer, .fx-qbar{ display: none !important; }
}

/* =========================================================
   17. LIGHT-GREEN INTERACTIVE ELEMENTS (all links & buttons except the logo)
   Rule of thumb: light-green FILL + deep-teal text on any surface;
   light-green TEXT only on teal; on white, links get a light-green bar.
========================================================= */
:root{
  --vg-btn: #a8ec7a;          /* button fill — light green */
  --vg-btn-hover: #c6f5a6;    /* lighter on hover */
  --vg-btn-deep: #4fb84e;     /* small active markers on white */
  --vg-btn-ink: #00585a;      /* text on light green (≈6:1 contrast) */
  --vg-btn-glow: 0 14px 30px -14px rgba(92,196,106,.8);
}

/* --- Solid buttons: nav CTA, hero primary, Submit, Visit Website, scroll-top --- */
.btn.reversebg, .theme-light .btn.reversebg, .btn-primary, .work-meta .btn-primary, .scroll-top-btn, .scroll-top-btn.reversebg{
  background: var(--vg-btn); color: var(--vg-btn-ink); border-color: var(--vg-btn);
}
.btn.reversebg:hover, .theme-light .btn.reversebg:hover, .btn-primary:hover, .work-meta .btn-primary:hover, .scroll-top-btn:hover{
  background: var(--vg-btn-hover); color: var(--vg-btn-ink); border-color: var(--vg-btn-hover); box-shadow: var(--vg-btn-glow);
}

/* --- Ghost button (hero "See our process") --- */
.btn-ghost{ color: var(--vg-btn); border-color: rgba(168,236,122,.7); }
.btn-ghost:hover{ color: var(--vg-btn-ink); background: var(--vg-btn); border-color: var(--vg-btn); box-shadow: var(--vg-btn-glow); }

/* --- Nav text links --- */
.chip:hover{ color: inherit; -webkit-background-clip: border-box; background-clip: border-box; background: none; -webkit-text-fill-color: currentColor; }
header.theme-dark .nav-links .chip{ color: var(--vg-btn); }
header.theme-dark .nav-links .chip:hover, header.theme-dark .nav-links .chip.is-active{ color: var(--vg-btn-hover); }
.nav-links .chip::after{ background: var(--vg-btn) !important; }
@media (min-width: 901px){
  /* light (white) header: deep-teal text with a light-green bar; hover/active becomes a light-green pill */
  header.theme-light .nav-links .chip{
    color: var(--vg-btn-ink); border-radius: 99px;
    background: linear-gradient(var(--vg-btn), var(--vg-btn)) no-repeat 12px calc(100% - 4px) / calc(100% - 24px) 3px;
    transition: background-size 320ms var(--vg-ease-out), background-position 320ms var(--vg-ease-out), transform 220ms var(--ease);
  }
  header.theme-light .nav-links .chip:hover, header.theme-light .nav-links .chip.is-active{
    background-size: 100% 100%; background-position: 0 0; font-weight: 600;
  }
  header.theme-light .nav-links .chip::after{ display: none; }
}
/* mobile menu (dark panel) */
@media (max-width: 900px){
  .nav.open .nav-links .chip{ color: var(--vg-btn); }
}

/* --- Mobile hamburger --- */
.nav-toggle, header.theme-light .nav-toggle{ background: var(--vg-btn); color: var(--vg-btn-ink); border-color: var(--vg-btn); }
.nav-toggle:hover{ background: var(--vg-btn-hover); border-color: var(--vg-btn-hover); }

/* --- Side progress dots --- */
.p-dot{ border-color: rgba(168,236,122,.75); }
.p-dot:hover{ background: rgba(168,236,122,.45); }
.p-dot.active, .progress.on-light-bg .p-dot.active{ background: var(--vg-btn); border-color: var(--vg-btn); }
.progress.on-light-bg .p-dot{ border-color: rgba(0,88,90,.35); }
.progress.on-light-bg .p-dot.active{ border-color: var(--vg-btn-deep); box-shadow: 0 0 0 1px rgba(0,88,90,.25); }
.progress.on-light-bg .p-dot:hover{ background: var(--vg-btn); border-color: var(--vg-btn-deep); }

/* --- Hero scroll hint --- */
.fx-hint{ color: var(--vg-btn); }
.fx-hint:hover{ color: var(--vg-btn-hover); }

/* --- Process steps (clickable tabs) --- */
.step .badge{ background: var(--vg-btn); color: var(--vg-btn-ink); }
.step[aria-selected="true"] .badge{ background: var(--vg-btn); color: var(--vg-btn-ink); box-shadow: 0 0 0 4px rgba(168,236,122,.3); }
.step:hover{ border-color: rgba(168,236,122,.55); }
.step[aria-selected="true"]{ border-color: var(--vg-btn); }
.step[aria-selected="true"]::before, .step.is-done::before{ background: var(--vg-btn); border-color: var(--vg-btn); }
.step-list::after{ background: linear-gradient(var(--vg-btn), rgba(168,236,122,.6)); box-shadow: 0 0 12px rgba(168,236,122,.5); }

/* --- Testimonial controls --- */
.icon-btn{ background: var(--vg-btn); color: var(--vg-btn-ink); border-color: var(--vg-btn); font-weight: 700; }
.icon-btn:hover{ background: var(--vg-btn-hover); color: var(--vg-btn-ink); border-color: var(--vg-btn-hover); box-shadow: var(--vg-btn-glow); }
.fx-qdot{ background: rgba(0,149,152,.22); }
.fx-qdot.is-active{ background: var(--vg-btn-deep); }

/* --- Portfolio --- */
.fx-work-cta{ background: var(--vg-btn); color: var(--vg-btn-ink); }
.portfolio-grid .work-card.fx-settled:hover{ box-shadow: 0 0 0 2px var(--vg-btn), 0 28px 56px -24px rgba(92,196,106,.55); }
@media (pointer: fine){
  body.fx-cursor-view .cursor-outline{ background-color: rgba(168,236,122,.95) !important; }
  .cursor-outline::after{ color: var(--vg-btn-ink); font-weight: 700; }
}
.work-close{ background: var(--vg-btn); color: var(--vg-btn-ink); border-color: var(--vg-btn); }
.work-close:hover{ background: var(--vg-btn-hover); color: var(--vg-btn-ink); }

/* --- Contact links (on teal card) --- */
.contact-card a{ color: var(--vg-btn); }
.contact-card a:hover{ color: var(--vg-btn-hover); }

/* --- Focus rings follow the same colour on teal --- */
.primary, header.theme-dark{ --vg-focus: var(--vg-btn); }

/* =========================================================
   18. MOBILE NAV — full-height drawer sliding in from the right
========================================================= */
.fx-nav-backdrop{ display: none; }
.fx-nav-foot{ display: none; }
@media (max-width: 900px){
  .nav-toggle{ position: relative; z-index: 3; transition: transform 300ms var(--vg-ease-out), background 220ms var(--ease); }
  .nav.open .nav-toggle{ transform: rotate(90deg); }

  .nav-links, .nav.open .nav-links{
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 2;
    width: min(86vw, 380px); height: 100vh; height: 100dvh; max-height: none;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 96px 28px calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    background:
      radial-gradient(420px 300px at 100% 0%, rgba(168,236,122,.16), transparent 60%),
      radial-gradient(380px 380px at 0% 100%, rgba(47,211,196,.18), transparent 60%),
      linear-gradient(160deg, #007a7c 0%, #00585a 100%);
    border-radius: 0; opacity: 1;
    box-shadow: -30px 0 60px -20px rgba(0,30,32,.55);
    transform: translateX(105%); visibility: hidden;
    transition: transform 520ms var(--vg-ease-out), visibility 0s linear 520ms;
    will-change: transform;
  }
  .nav.open .nav-links{
    transform: none; visibility: visible;
    transition: transform 520ms var(--vg-ease-out), visibility 0s;
  }

  /* links: large, left-aligned, numbered, stagger in from the right */
  .nav-links{ counter-reset: fxnav; }
  .nav-links > a.chip,
  .nav.open .nav-links > a.chip{
    counter-increment: fxnav;
    width: 100%; justify-content: flex-start; display: flex; align-items: baseline; gap: 14px;
    padding: 16px 4px; border-radius: 0;
    font-family: "Anta", sans-serif; font-size: 1.45rem; letter-spacing: 1px; text-transform: uppercase;
    color: #fff !important; background: none !important;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .nav-links > a.chip::before{
    content: counter(fxnav, decimal-leading-zero);
    font-size: .75rem; letter-spacing: 1.5px; color: var(--vg-btn); opacity: .9;
  }
  .nav-links > a.chip::after{ display: none !important; }
  .nav-links > a.chip:hover, .nav-links > a.chip.is-active,
  .nav.open .nav-links > a.chip:hover, .nav.open .nav-links > a.chip.is-active{ color: var(--vg-btn) !important; }
  .nav-links > a.chip:hover{ transform: translateX(4px); }

  .nav-links > a.btn, .nav.open .nav-links > a.btn{ width: 100%; justify-content: center; margin-top: 22px; padding: 15px 18px; }

  .nav .nav-links > *{ opacity: 0; transform: translateX(28px); transition: opacity 260ms var(--ease), transform 420ms var(--vg-ease-out); }
  .nav.open .nav-links > *{ opacity: 1; transform: none; }
  .nav.open .nav-links > *:nth-child(1){ transition-delay: 120ms; }
  .nav.open .nav-links > *:nth-child(2){ transition-delay: 170ms; }
  .nav.open .nav-links > *:nth-child(3){ transition-delay: 220ms; }
  .nav.open .nav-links > *:nth-child(4){ transition-delay: 270ms; }
  .nav.open .nav-links > *:nth-child(5){ transition-delay: 320ms; }
  .nav.open .nav-links > *:nth-child(6){ transition-delay: 370ms; }

  /* contact footer inside the drawer */
  .fx-nav-foot{
    display: grid; gap: 6px; margin-top: auto; padding-top: 28px;
    font-size: .9rem; color: rgba(255,255,255,.7);
  }
  .fx-nav-foot .fx-nav-foot-label{ font-family: "Anta", sans-serif; font-size: .72rem; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.5); }
  .fx-nav-foot a{ color: var(--vg-btn); }

  /* dimmed page behind the drawer */
  .fx-nav-backdrop{
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(0,30,32,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease);
  }
  body.fx-nav-open .fx-nav-backdrop{ opacity: 1; pointer-events: auto; }
  html.fx-nav-open, body.fx-nav-open{ overflow: hidden !important; }
  body.fx-nav-open .scroll-top-btn{ opacity: 0 !important; pointer-events: none !important; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce){
  .nav-links, .nav-links > *{ transition: none !important; }
}

/* =========================================================
   19. BACKGROUND LINE-ART — soft, blurred, slowly drifting shapes
   Depth: z1 = far (most blur, faintest), z3 = near (sharp, strongest)
========================================================= */
.panel > .container{ position: relative; z-index: 1; }
.fx-bgart{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --px: 0; --py: 0; }
.fx-bg-item{
  position: absolute; width: calc(var(--size) * 1px); aspect-ratio: 1;
  color: var(--vg-teal);
  transform: translate3d(calc(var(--px) * var(--pz) * 1px), calc(var(--py) * var(--pz) * 1px), 0);
  transition: transform 1.4s var(--vg-ease-out);
}
.fx-bg-item.z1{ --pz: 14; opacity: .13; filter: blur(3px); }
.fx-bg-item.z2{ --pz: 30; opacity: .18; filter: blur(1.2px); }
.fx-bg-item.z3{ --pz: 52; opacity: .24; }
.fx-bg-item.is-accent{ color: var(--vg-btn-deep); opacity: .32; }
.primary .fx-bg-item{ color: #fff; }
.primary .fx-bg-item.z1{ opacity: .10; } .primary .fx-bg-item.z2{ opacity: .14; } .primary .fx-bg-item.z3{ opacity: .18; }
.primary .fx-bg-item.is-accent{ color: var(--vg-btn); opacity: .45; }
.fx-bg-drift, .fx-bg-drift svg{ width: 100%; height: 100%; display: block; overflow: visible; }
.fx-bg-drift svg *{ fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fx-bg-drift svg .fill{ fill: currentColor; stroke: none; }
.fx-bg-drift svg .fx-bg-faint{ opacity: .5; }

.fx-bg-drift{ animation: fxBgDrift var(--dur, 28s) ease-in-out var(--delay, 0s) infinite alternate; will-change: transform; }
.fx-bg-spark{ animation: fxBgTwinkle 6s ease-in-out var(--delay, 0s) infinite; }
.fx-bg-ring .orbit{ transform-box: fill-box; transform-origin: center; animation: fxSpin 48s linear infinite; }
.fx-bgart *{ animation-play-state: paused; }
.panel.fx-live .fx-bgart *{ animation-play-state: running; }
/* soft colour glows on white panels */
.fx-bg-glow{ position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: fxBgDrift 34s ease-in-out infinite alternate; --dx: -60px; --dy: 40px; --rot: 0deg; }
.fx-bg-glow.g1{ width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; right: -12vw; top: -18vw; background: radial-gradient(circle, rgba(47,211,196,.28), transparent 65%); }
.fx-bg-glow.g2{ width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; left: -12vw; bottom: -16vw; background: radial-gradient(circle, rgba(168,236,122,.30), transparent 65%); animation-duration: 40s; --dx: 70px; --dy: -40px; }
@keyframes fxBgDrift{
  from{ transform: translate(0, 0) rotate(0deg); }
  to{ transform: translate(var(--dx, 16px), var(--dy, -20px)) rotate(var(--rot, 8deg)); }
}
@keyframes fxBgTwinkle{ 0%,100%{ transform: scale(.6) rotate(0deg); opacity: .5; } 50%{ transform: scale(1) rotate(45deg); opacity: 1; } }

@media (max-width: 900px){
  .fx-bg-item{ width: calc(var(--size) * .7px); }
  .fx-bg-item.m-hide{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .fx-bgart *{ animation: none !important; }
  .fx-bg-item{ transform: none !important; }
}

/* =========================================================
   20. BRAND CURSOR — teal / light green / yellow (no blend-mode inversion)
========================================================= */
@media (pointer: fine){
  .cursor-dot, .cursor-outline{ mix-blend-mode: normal !important; }
  /* centre = site icon mark: white on teal panels, teal on white panels (like the logo) */
  .cursor-dot{
    width: 20px; height: 20px; border: 0; border-radius: 0; background: transparent !important;
    color: #fff; filter: drop-shadow(0 0 .6px #00585a) drop-shadow(0 0 .6px #00585a) drop-shadow(0 0 4px rgba(168,236,122,.7));
    transition: opacity .2s, transform .3s var(--vg-ease-out), color .25s;
  }
  .cursor-dot svg{ width: 100%; height: 100%; display: block; fill: currentColor; }
  .cursor-outline{
    border: 1.5px solid var(--vg-btn) !important; background-color: transparent !important;
    box-shadow: 0 0 14px -4px rgba(168,236,122,.6);
  }
  /* rotating dashed orbit carrying a small yellow sparkle */
  .fx-cur-orbit{
    position: absolute; inset: -7px; border-radius: 50%;
    border: 1px dashed rgba(168,236,122,.75);
    animation: fxSpin 7s linear infinite;
    transition: inset .3s var(--vg-ease-out), opacity .25s;
  }
  .fx-cur-spark{
    position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px;
    background: var(--vg-yellow);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: fxCurTwinkle 1.6s ease-in-out infinite;
  }
  @keyframes fxCurTwinkle{ 0%,100%{ transform: scale(.7) rotate(0deg); } 50%{ transform: scale(1.15) rotate(45deg); } }

  /* on white panels: teal ring, teal dot with a green halo */
  body.fx-on-light .cursor-outline{ border-color: var(--vg-teal) !important; box-shadow: 0 0 14px -6px rgba(0,149,152,.5); }
  body.fx-on-light .fx-cur-orbit{ border-color: rgba(0,149,152,.45); }
  body.fx-on-light .cursor-dot{ color: var(--vg-teal); filter: drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 5px rgba(168,236,122,.6)); }
  body.fx-on-light .fx-cur-spark{ background: var(--vg-yellow-deep); }

  /* hovering anything clickable: ring fills with light green, orbit tightens and spins faster */
  body.fx-cur-hover .cursor-outline{ background-color: rgba(168,236,122,.2) !important; border-color: var(--vg-btn) !important; }
  body.fx-on-light.fx-cur-hover .cursor-outline{ background-color: rgba(0,149,152,.10) !important; border-color: var(--vg-btn-deep) !important; }
  body.fx-cur-hover .fx-cur-orbit{ inset: -4px; animation-duration: 2.4s; }
  body.fx-cur-hover .cursor-dot{ transform: translate(-50%,-50%) scale(1.2) rotate(-12deg); }

  /* portfolio "View" mode keeps its solid light-green disc */
  body.fx-cursor-view .fx-cur-orbit{ opacity: 0; }

  /* click ripple + sparkle trail */
  .fx-cur-ripple, .fx-cur-trail{ position: fixed; z-index: 9998; pointer-events: none; transform: translate(-50%,-50%); }
  .fx-cur-ripple{
    width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--vg-btn);
    animation: fxCurRipple 620ms var(--vg-ease-out) forwards;
  }
  body.fx-on-light .fx-cur-ripple{ border-color: var(--vg-teal); }
  @keyframes fxCurRipple{ from{ transform: translate(-50%,-50%) scale(.2); opacity: .9; } to{ transform: translate(-50%,-50%) scale(1.5); opacity: 0; } }
  .fx-cur-trail{
    width: var(--s, 8px); height: var(--s, 8px); background: var(--c, var(--vg-btn));
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: fxCurTrail 1000ms var(--vg-ease-out) forwards;
  }
  @keyframes fxCurTrail{
    from{ transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity: .9; }
    to{ transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 12px))) scale(.2) rotate(90deg); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce){
  .fx-cur-orbit, .fx-cur-spark{ animation: none !important; }
  .fx-cur-trail, .fx-cur-ripple{ display: none !important; }
}
@media (pointer: fine){
  body.fx-cursor-view.fx-cur-hover .cursor-outline,
  body.fx-on-light.fx-cursor-view.fx-cur-hover .cursor-outline{ background-color: rgba(168,236,122,.95) !important; border-color: transparent !important; }
}