/* ============================================================
   GigOuts — enhancement layer (client revisions, round 2)
   Loaded after the main stylesheet; overrides only.
   ============================================================ */

/* ---- 1. Brighter, more visible blue accents ---------------- */
:root{
  --accent: #6ba0f5;
  --accent-dim: rgba(107,160,245,.72);
  --accent-soft: rgba(107,160,245,.20);
}
/* Hero technical line overlay — make the blueprint lines read */
.hero__lines path,
.hero__lines line{ stroke: var(--accent); stroke-opacity:.9; }
.hero__lines circle{ fill: var(--accent); }
.hero.gx-brand-scene .hero__lines line[data-brand-vline]{
  stroke:url(#gx-brand-line-fade);
  stroke-opacity:1;
}
/* Eyebrow dot + small accents a touch more luminous */
.hero__eyebrow .dot{ box-shadow:0 0 0 4px var(--accent-soft), 0 0 14px 2px var(--accent-dim); }

/* ---- 2. Dynamic hero background slideshow ------------------ */
.hero__media .gx-hero-fx{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero__media .gx-hero-slide{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1;
  object-fit:cover; object-position:62% center;
  transform:scale(1.015);
  opacity:0; transition:opacity 1.5s ease, transform 8s ease;
  filter:saturate(1) contrast(1.025);   /* Round 6: sin restar color */
  will-change:opacity;
}
.hero__media .gx-hero-slide.is-on{ opacity:1; transform:scale(1.045); }
.hero__media .gx-hero-brand-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  opacity:0;
  background:
    radial-gradient(ellipse 46% 62% at 79% 49%,rgba(107,160,245,.15),transparent 68%),
    linear-gradient(102deg,#07090d 0%,#0a0e14 48%,#111823 100%);
  transition:opacity 1.2s ease;
  will-change:opacity;
}
.hero__media .gx-hero-brand-bg::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.58;
  background-image:
    linear-gradient(to right,rgba(168,194,234,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(168,194,234,.045) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 58%,rgba(0,0,0,.7) 88%,transparent);
  mask-image:linear-gradient(90deg,transparent 22%,#000 58%,rgba(0,0,0,.7) 88%,transparent);
}
.hero__media .gx-hero-brand-bg::after{
  content:"";
  position:absolute;
  top:17%;
  right:6%;
  width:min(47vw,700px);
  height:66%;
  border-top:1px solid rgba(107,160,245,.19);
  border-right:1px solid rgba(107,160,245,.13);
}
.hero__media .gx-hero-brand-bg.is-on{ opacity:1; }
.hero__media .gx-hero-brand{
  position:absolute;
  z-index:2;
  top:49%;
  /* Round 5: al cliente le gusto la animacion de marca del hero, pidio
     "un poquito mas grande y un poquito mas a la izquierda".
     5.5vw quedo muy a la izquierda, 1vw pegado al titular, -4vw se paso; queda en -2vw.
     MAS NEGATIVO = MAS A LA DERECHA
     manteniendo el tamano mayor, para que quede centrada en la banda libre
     que deja el titular. Estos son los DOS numeros a tocar. */
  right:-2vw;
  width:min(68vw,1040px);
  aspect-ratio:16/9;
  object-fit:cover;
  pointer-events:none;
  opacity:0;
  transform:translateY(-50%) scale(1.46);
  transform-origin:center;
  filter:grayscale(1) invert(1) contrast(2.05) brightness(1.1);
  mix-blend-mode:screen;
  transition:opacity 1.2s ease;
  will-change:opacity;
}
.hero__media .gx-hero-brand.is-on{ opacity:.96; }
/* Keep the original still image as a fallback beneath the fx */
.hero__media .gx-hero-fx ~ .hero__scrim{ z-index:1; }

@media (max-width:980px) and (min-width:721px){
  .hero__media .gx-hero-brand{
    right:-18vw;
    width:78vw;
    opacity:0;
    transform:translateY(-50%) scale(1.3);
  }
  .hero__media .gx-hero-brand.is-on{ opacity:.78; }
}
@media (max-width:720px){
  .hero__media .gx-hero-brand,
  .hero__media .gx-hero-brand-bg{ display:none !important; }
}

/* ---- 3. Case study gallery: full colour + zoomable --------- */
.caseov__gallery img{
  filter:none !important;
  cursor:zoom-in;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.caseov__gallery figure{ position:relative; }
.caseov__gallery figure::after{
  content:""; position:absolute; right:12px; bottom:12px; width:34px; height:34px;
  border-radius:50%; background:rgba(12,14,17,.62); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
  opacity:0; transform:translateY(4px); transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.caseov__gallery figure:hover img{ transform:scale(1.04); }
.caseov__gallery figure:hover::after{ opacity:1; transform:translateY(0); }

/* ---- 4. Case study: Challenge / Result / Tools ------------- */
.caseov__lead-wrap.gx-cd-on .caseov__summary,
.caseov__lead-wrap.gx-cd-on .caseov__scope{ display:none; }
.caseov__lead-wrap.gx-cd-on{ display:block; }
.gx-cd{ display:flex; flex-direction:column; gap:26px; }
.gx-cd-item{ display:flex; flex-direction:column; gap:9px; }
.gx-cd-h{
  color:var(--accent); letter-spacing:.14em;
  position:relative; padding-left:16px;
}
.gx-cd-h::before{
  content:""; position:absolute; left:0; top:50%; width:9px; height:1px;
  background:var(--accent); transform:translateY(-50%);
}
.gx-cd-item p{ margin:0; color:var(--fg-dim, rgba(232,236,241,.8)); line-height:1.62; font-size:1.02rem; }
.gx-cd-tools .gx-cd-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.gx-cd-chip{
  display:inline-flex; align-items:center; padding:5px 11px;
  border:1px solid var(--accent-dim); border-radius:999px;
  color:var(--accent); background:var(--accent-soft); letter-spacing:.1em;
}
.gx-cd-caps{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px; }
.gx-cd-caps li{
  position:relative; padding-left:20px; line-height:1.5;
  color:var(--fg-dim, rgba(232,236,241,.8));
}
.gx-cd-caps li::before{
  content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
  border:1px solid var(--accent); transform:rotate(45deg);
}

/* ---- 5. Service portfolio images: color original, sin filtro (Round 7c) --- */
.svc__layer-img .fig__img,
.svc__row-img .fig__img{ filter:none !important; }
.svc__layer-img:hover .fig__img,
.svc__row-img:hover .fig__img{ filter:none !important; }

/* ---- 6. Fullscreen lightbox ------------------------------- */
.gx-lb{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background:rgba(6,8,11,.92); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
  padding:clamp(16px,4vw,64px);
}
.gx-lb.is-open{ opacity:1; visibility:visible; }
.gx-lb__img{
  max-width:100%; max-height:100%; object-fit:contain;
  border:1px solid rgba(255,255,255,.12); border-radius:4px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  transform:scale(.97); transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.gx-lb.is-open .gx-lb__img{ transform:scale(1); }
.gx-lb__btn{
  position:absolute; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  color:#fff; cursor:pointer; border-radius:50%;
  transition:background .25s ease, transform .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.gx-lb__btn:hover{ background:var(--accent); border-color:var(--accent); transform:scale(1.06); }
.gx-lb__close{ top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); width:46px; height:46px; }
.gx-lb__nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:26px; line-height:1; }
.gx-lb__nav:hover{ transform:translateY(-50%) scale(1.06); }
.gx-lb__prev{ left:clamp(10px,2.5vw,32px); }
.gx-lb__next{ right:clamp(10px,2.5vw,32px); }
.gx-lb__close svg{ width:20px; height:20px; }
.gx-lb__count{
  position:absolute; bottom:clamp(14px,3vw,28px); left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.72); letter-spacing:.18em;
}
@media (max-width:640px){
  .gx-lb__nav{ width:42px; height:42px; font-size:20px; }
}
@media (prefers-reduced-motion: reduce){
  .hero__media .gx-hero-slide,
  .hero__media .gx-hero-brand-bg,
  .hero__media .gx-hero-brand,
  .gx-lb, .gx-lb__img, .caseov__gallery img{ transition:none !important; }
}

/* Lightbox scroll lock */
html.gx-lb-lock{ overflow:hidden; }

/* ============================================================
   Round 2b — hero top clearance + premium collaboration cards
   ============================================================ */

/* ---- Hero: never let the headline slip under the nav -------- */
.hero{
  padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(12px,3vh,34px)) !important;
}
.hero__title{
  font-size: clamp(2.5rem, min(8vw, 11vh), 7rem) !important;
}
@media (max-height:780px){
  .hero__eyebrow{ margin-bottom:16px !important; }
  .hero__support{ margin-top:18px !important; }
  .hero__cta{ margin-top:20px !important; }
}

/* ---- Collaboration: clean, premium, 3D cards --------------- */
/* remove the broken connector line + off-centre arc rings */
.collab__flow{ display:none !important; }
.collab .card__arc{ display:none !important; }
.collab .card__grid{ opacity:.30 !important; }

.collab__deck{ position:relative; }

/* refined glass faces */
.collab .card__face{
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.085) !important;
}
.collab .card__face--front{
  background:
    radial-gradient(130% 92% at 16% -6%, rgba(95,143,216,.14), transparent 55%),
    linear-gradient(168deg, rgba(39,46,57,.88), rgba(11,14,19,.97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 36px 64px -34px rgba(0,0,0,.92) !important;
  overflow:hidden;
}
/* top-left accent tab */
.collab .card__face--front::after{
  content:""; position:absolute; left:0; top:0; width:46px; height:2px;
  background:linear-gradient(90deg, var(--accent), transparent);
  box-shadow:0 0 12px var(--accent-dim);
}
/* soft glow behind the icon */
.collab .card__face--front::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:clamp(2px,1vw,12px); left:clamp(0px,.6vw,8px);
  width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle at 42% 36%, rgba(95,143,216,.24), transparent 62%);
  filter:blur(5px);
}

/* premium circular icon badge */
.collab .card__ico{
  position:relative; z-index:1;
  width:76px !important; height:76px !important; border-radius:50% !important;
  border:1px solid rgba(150,185,235,.40) !important;
  background:radial-gradient(120% 120% at 30% 22%, rgba(122,162,232,.36), rgba(15,19,27,.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 0 22px rgba(90,140,220,.20),
    0 20px 34px -16px rgba(0,0,0,.85),
    0 0 0 6px rgba(95,143,216,.06) !important;
  color:#eef4fd !important;
}
.collab .card__ico svg{ width:36px; height:36px; filter:drop-shadow(0 0 7px rgba(95,143,216,.55)); }

/* typography polish */
.collab .card__n{ color:var(--accent) !important; letter-spacing:.22em; }
.collab .card__title{ letter-spacing:-.01em; }
.collab .card__more{ color:var(--accent) !important; opacity:.72; }

/* depth on hover (composes with the existing flip) */
.collab .card{ transition:filter .55s ease; }
.collab__slot:hover{ z-index:3; }
.collab .card:hover{ filter:drop-shadow(0 26px 34px rgba(0,0,0,.55)); }

/* elegant flow arrows sitting in the gaps (desktop only) */
@media (min-width:961px){
  .collab__deck::before, .collab__deck::after{
    content:""; position:absolute; z-index:2; top:clamp(48px,4.7vw,70px);
    width:26px; height:26px; transform:translate(-50%,-50%); opacity:.55;
    background:no-repeat center/contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%235f8fd8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E");
  }
  .collab__deck::before{ left:33.333%; }
  .collab__deck::after{ left:66.666%; }
}

/* ============================================================
   Round 2c — intro polish
   ============================================================ */
/* Prevent the pre-init flash: keep the intro net lines hidden until
   the JS assigns their real dash length and draws them on. */
[data-intro] .intro__lines line{ stroke-dasharray:3000; stroke-dashoffset:3000; }

/* ============================================================
   Round 2d — intro glow + centered case modal
   ============================================================ */

/* ---- Intro: replace the "scanner" streak with a soft logo glow ---- */
.intro__scan{ display:none !important; }
.intro__logo{ position:relative; }
.intro__logo::after{
  content:""; position:absolute; z-index:-1; left:50%; top:46%;
  width:132%; height:150%; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 52% 46% at 50% 50%,
     rgba(150,186,236,.22), rgba(120,160,220,.07) 46%, transparent 70%);
  filter:blur(26px); pointer-events:none;
  animation:gxBloom 5s ease-in-out infinite;
}
@keyframes gxBloom{
  0%,100%{ opacity:.65; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
  .intro__logo::after{ animation:none; opacity:.8; }
}

/* ---- Case study: centered wide modal (was a right-side panel) ---- */
.caseov{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,3.5vw,52px);
}
.caseov__panel{
  position:relative !important; inset:auto !important;
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  width:min(1160px,100%) !important;
  max-height:min(90vh,940px);
  border:1px solid var(--line) !important;
  border-radius:20px;
  transform:translateY(16px) scale(.99);
  box-shadow:0 44px 130px rgba(0,0,0,.66);
  overflow:hidden;
}
.caseov.is-open .caseov__panel{ transform:translateY(0) scale(1) !important; }

/* two-column body: text left, gallery right */
.caseov__inner{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
  gap:clamp(30px,3vw,58px);
  align-items:start;
  padding:clamp(34px,3.6vw,60px) clamp(30px,3.4vw,58px) 40px !important;
}
.caseov__header{ grid-column:1 / -1; }
.caseov__lead-wrap.gx-cd-on{
  grid-column:1; grid-row:2;
  margin:0 !important; padding-top:0 !important; border-top:0 !important;
}
.caseov__gallery{
  grid-column:2; grid-row:2;
  grid-template-columns:repeat(2,1fr) !important;
  align-content:start;
  position:sticky; top:0;
}
.caseov__gallery figure:first-child{ grid-column:1 / -1 !important; }

/* refined header spacing in the wider modal */
.caseov__title{ font-size:clamp(2rem,3.4vw,3rem) !important; }
.caseov__header{
  padding-bottom:clamp(18px,2vw,26px);
  border-bottom:1px solid var(--line);
  margin-bottom:2px;
}

/* stack on tablets/phones — reset explicit grid placement so nothing overlaps */
@media (max-width:900px){
  .caseov__inner{ grid-template-columns:1fr; gap:26px; }
  .caseov__lead-wrap.gx-cd-on{ grid-column:auto; grid-row:auto; }
  .caseov__gallery{ grid-column:auto; grid-row:auto; position:static; }
}
@media (max-width:600px){
  .caseov{ padding:0; }
  .caseov__panel{ width:100% !important; max-height:100vh; border-radius:0; }
  .caseov__gallery{ grid-template-columns:1fr !important; }
}

/* Keep the nav + floating hub out of the way while a case modal is open */
.caseov-open .nav,
.caseov-open [data-hub]{
  opacity:0 !important; pointer-events:none !important;
  transition:opacity .3s ease;
}

/* ============================================================
   Round 2e — bring back a visible, premium light sweep on the logo
   ============================================================ */
/* slightly stronger ambient bloom */
.intro__logo::after{
  background:radial-gradient(ellipse 54% 48% at 50% 50%,
     rgba(162,198,247,.30), rgba(120,160,220,.10) 46%, transparent 72%) !important;
}
/* a soft light band that sweeps across the logo, on a loop */
.intro__logo::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:46%; transform:translate(-50%,-50%);
  width:165%; height:140%;
  background:linear-gradient(100deg, transparent 40%, rgba(206,226,255,.60) 50%, transparent 60%);
  background-size:250% 100%; background-repeat:no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 45% 52% at 50% 50%, #000 50%, transparent 80%);
  mask-image:radial-gradient(ellipse 45% 52% at 50% 50%, #000 50%, transparent 80%);
  filter:blur(9px); mix-blend-mode:screen;
  animation:gxSweep 3.8s ease-in-out infinite;
}
@keyframes gxSweep{
  0%{ background-position:150% 0; opacity:0; }
  26%{ opacity:1; }
  72%{ opacity:1; }
  100%{ background-position:-40% 0; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .intro__logo::before{ animation:none; opacity:0; }
}

/* ============================================================
   Round 2f — replace the bloom with a premium light reflector
   that is masked to the logo (symbol + wordmark) only.
   ============================================================ */
/* neutralise the earlier circular bloom + old sweep */
.intro__logo::after{ background:none !important; animation:none !important; }
.intro__logo::before{ display:none !important; }

/* dim the logo a touch so the moving highlight reads on it */
.intro__word{ filter:brightness(.84); }
.intro__sym{ filter:brightness(.9); }

/* the reflector: a crisp specular streak that sweeps L→R, clipped to the logo */
.gx-logo-sheen{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  mix-blend-mode:screen; opacity:0; transition:opacity .8s ease;
  background:linear-gradient(100deg,
     rgba(255,255,255,0) 44%,
     rgba(226,238,255,.55) 48%,
     rgba(255,255,255,1) 50%,
     rgba(226,238,255,.55) 52%,
     rgba(255,255,255,0) 56%);
  background-size:260% 100%; background-repeat:no-repeat;
  background-position:-45% 0;
  -webkit-mask-repeat:no-repeat,no-repeat; mask-repeat:no-repeat,no-repeat;
  -webkit-mask-composite:source-over; mask-composite:add;
}
.gx-logo-sheen.is-live{ opacity:1; animation:gxReflect 3.2s ease-in-out infinite; }
@keyframes gxReflect{
  0%{ background-position:-40% 0; }
  100%{ background-position:140% 0; }
}
@media (prefers-reduced-motion: reduce){
  .gx-logo-sheen{ display:none !important; }
}

/* ============================================================
   Round 3 — intro: tagline closer to the logo
   ============================================================ */
[data-intro] .intro__core{ gap:9px !important; }
[data-intro] .intro__tag{ margin-top:-2px; }

/* round3: second batch removed — hide pillar markup entirely */
[data-intro] .intro__pillars{display:none !important;}
[data-intro] .intro__lines--p{display:none !important;}

/* ===== round4: symmetric node layout — labels extend OUTWARD, dots on the
   inner edge as the true line-connection point ===== */
[data-intro] .intro__mod{ align-items:center !important; }
/* left column (TL, BL): dot on the right/inner side, label reaches left */
[data-intro] .intro__mod[data-mod="0"],
[data-intro] .intro__mod[data-mod="3"]{ flex-direction:row-reverse !important; }
[data-intro] .intro__mod[data-mod="0"] .intro__mod-card,
[data-intro] .intro__mod[data-mod="3"] .intro__mod-card{
  margin-left:0 !important; margin-right:18px !important;
  align-items:flex-end !important; text-align:right !important;
}
/* right column (TR, BR): dot on the left/inner side, label reaches right */
[data-intro] .intro__mod[data-mod="1"],
[data-intro] .intro__mod[data-mod="2"]{ flex-direction:row !important; }
[data-intro] .intro__mod[data-mod="1"] .intro__mod-card,
[data-intro] .intro__mod[data-mod="2"] .intro__mod-card{
  margin-right:0 !important; margin-left:18px !important;
  align-items:flex-start !important; text-align:left !important;
}

/* ============================================================
   round5 — layout polish (client revisions)
   ============================================================ */

/* 1) Tighter vertical rhythm between sections + content lands
   near the top when navigating (less dead space above). */
section{ padding-block: clamp(22px, 2.4vw, 40px) !important; }
section.section--tight{ padding-block: clamp(16px, 1.8vw, 30px) !important; }
/* Navigation landing: pull sections higher so content sits just
   under the nav instead of leaving a big gap above it. */
section[id], main [id]{ scroll-margin-top: 38px !important; }

/* 2) Bottom-right contact hub — enlarge & better-centre the mark
   inside the circle (circle size unchanged). */
.hub__sym{ width:42px !important; height:42px !important; }
@media (max-width:720px){ .hub__sym{ width:37px !important; height:37px !important; } }

/* 3) Nav hover dropdown menus — premium "engineering console" panel
   ------------------------------------------------------------------ */
.gx-navmenu{
  --pad:9px;
  position:fixed; z-index:1300; min-width:300px; max-width:360px;
  padding:var(--pad);
  opacity:0; visibility:hidden; transform:translateY(-9px) scale(.985);
  transform-origin:top left;
  transition:opacity .34s cubic-bezier(.22,1,.36,1),
             transform .34s cubic-bezier(.22,1,.36,1),
             visibility .34s;
  background:
    radial-gradient(120% 80% at 12% -8%, rgba(107,160,245,.15), transparent 52%),
    linear-gradient(168deg, rgba(25,30,39,.985), rgba(9,11,15,.995));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    0 34px 70px -24px rgba(0,0,0,.96),
    0 2px 0 -1px rgba(107,160,245,.25),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 0 0 1px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  /* bevelled top-right corner — matches the site's technical cards */
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.gx-navmenu.is-open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

/* connector: a thin accent stem + node that ties the panel to its nav item
   (separate element, so the panel's bevel clip-path never crops it) */
.gx-navmenu-stem{
  position:fixed; z-index:1299; width:1px; transform:translateX(-.5px);
  background:linear-gradient(180deg, rgba(107,160,245,0), var(--accent,#6ba0f5));
  opacity:0; transition:opacity .3s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.gx-navmenu-stem.is-on{ opacity:.75; }
.gx-navmenu-stem::after{
  content:""; position:absolute; left:-2.5px; bottom:-2.5px; width:6px; height:6px;
  background:var(--accent,#6ba0f5); transform:rotate(45deg);
  box-shadow:0 0 9px 1px rgba(107,160,245,.7);
}

/* header row: category eyebrow + count, divided by a hairline */
.gx-navmenu__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:6px 10px 9px; margin-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
}
.gx-navmenu__head::after{
  content:""; position:absolute; left:10px; bottom:-1px; width:26px; height:1px;
  background:var(--accent,#6ba0f5);
}
.gx-navmenu__ey{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent,#6ba0f5);
}
.gx-navmenu__meta{
  font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gray-mid,#8a93a0);
}

.gx-navmenu__list{ display:flex; flex-direction:column; }

.gx-navmenu__item{
  position:relative; display:flex; align-items:center; gap:13px; width:100%;
  padding:9px 12px; border:0; background:transparent;
  text-align:left; cursor:pointer; color:var(--gray-soft,#c3c9d2);
  transition:background .28s cubic-bezier(.22,1,.36,1);
  /* staggered entrance */
  opacity:0; transform:translateY(6px);
}
.gx-navmenu.is-open .gx-navmenu__item{
  opacity:1; transform:translateY(0);
  transition:background .28s cubic-bezier(.22,1,.36,1),
             opacity .4s cubic-bezier(.22,1,.36,1) calc(var(--i) * 42ms + 60ms),
             transform .4s cubic-bezier(.22,1,.36,1) calc(var(--i) * 42ms + 60ms);
}
.gx-navmenu__item + .gx-navmenu__item{ border-top:1px solid rgba(255,255,255,.045); }
.gx-navmenu__item:hover, .gx-navmenu__item:focus-visible{
  background:linear-gradient(100deg, rgba(107,160,245,.16), rgba(107,160,245,.03) 70%);
  outline:none;
}
/* left accent bar grows on hover */
.gx-navmenu__bar{
  position:absolute; left:0; top:8px; bottom:8px; width:2px;
  background:var(--accent,#6ba0f5);
  transform:scaleY(0); transform-origin:center;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 10px 1px rgba(107,160,245,.55);
}
.gx-navmenu__item:hover .gx-navmenu__bar,
.gx-navmenu__item:focus-visible .gx-navmenu__bar{ transform:scaleY(1); }

.gx-navmenu__n{
  font-size:10px; letter-spacing:.08em; color:var(--gray-mid,#8a93a0);
  min-width:18px; padding-top:2px; align-self:flex-start;
  transition:color .28s var(--ease,ease);
}
.gx-navmenu__item:hover .gx-navmenu__n,
.gx-navmenu__item:focus-visible .gx-navmenu__n{ color:var(--accent,#6ba0f5); }

.gx-navmenu__body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.gx-navmenu__label{
  font-family:var(--font-display,"Barlow Condensed",sans-serif);
  font-weight:600; font-size:16.5px; line-height:1.05; letter-spacing:.005em;
  color:var(--gray-soft,#d3d9e0);
  transition:color .28s var(--ease,ease);
}
.gx-navmenu__item:hover .gx-navmenu__label,
.gx-navmenu__item:focus-visible .gx-navmenu__label{ color:var(--white-tech,#eef2f7); }
.gx-navmenu__desc{
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:10px; letter-spacing:.02em; line-height:1.35;
  color:var(--gray-mid,#79828f);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* arrow slides in on hover */
.gx-navmenu__arw{
  align-self:center; margin-left:auto; color:var(--accent,#6ba0f5);
  font-size:15px; line-height:1; opacity:0; transform:translateX(-6px);
  transition:opacity .28s var(--ease,ease), transform .28s cubic-bezier(.22,1,.36,1);
}
.gx-navmenu__item:hover .gx-navmenu__arw,
.gx-navmenu__item:focus-visible .gx-navmenu__arw{ opacity:1; transform:translateX(0); }

/* nav link stays lit while its menu is open */
.nav__link.nav__link--menu{ color:var(--white-tech,#eef2f7); }

@media (prefers-reduced-motion: reduce){
  .gx-navmenu, .gx-navmenu__item, .gx-navmenu__bar, .gx-navmenu__arw{ transition:none !important; }
  .gx-navmenu__item{ opacity:1; transform:none; }
}

/* 4) Sectors — raise Sector 02 (right) into the empty space beside the
   title; keep the stagger but flip which side sits higher.
   Sector 01 (left) stays where it is (client approved it). */
@media (min-width: 901px){
  .sectors__grid .sector--energy{ margin-top: 0 !important; }
  .sectors__grid .sector--machinery{ margin-top: clamp(-240px, -15vw, -110px) !important; }
}

/* ============================================================
   Round 6 — final client polish
   ============================================================ */

/* Keep the approved feathered reveal while making the clipping fail-safe.
   The parent is always masked by the symbol; the animated conic reveal lives
   on a child layer, so it can never flash as a square during the short intro. */
[data-intro] .intro__sym-fill{
  background:none !important;
  overflow:hidden;
  -webkit-mask-image:url(/assets/logo/gigouts-symbol-white.png) !important;
  mask-image:url(/assets/logo/gigouts-symbol-white.png) !important;
  -webkit-mask-composite:source-over !important;
  mask-composite:add !important;
}
[data-intro] .intro__sym-fill::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(60% 60% at 40% 35%,#fff,#dfe4ea 45%,#aeb6c0);
  -webkit-mask-image:conic-gradient(from 84deg,#000 0 var(--gx-fill,0%),transparent calc(var(--gx-fill,0%) + 6%));
  mask-image:conic-gradient(from 84deg,#000 0 var(--gx-fill,0%),transparent calc(var(--gx-fill,0%) + 6%));
}
[data-intro].is-done{
  pointer-events:none;
  will-change:opacity;
}

/* Keep selected Services rows comfortably centred below the fixed nav. */
[data-svc-row]{ scroll-margin-top:calc(var(--nav-offset) + 18px); }

/* Let selected real photography read naturally among the technical,
   monochrome renders. */
/* Round 7c: el cliente quiere las imagenes con su COLOR ORIGINAL, sin ningun
   filtro. Se anula el grayscale(.5) del CSS compilado dejando filter:none:
   cero filtros en todas las .fig__img (portadas de caso, galerias, servicios,
   sectores). Color puro como en el PDF. */
.fig__img{
  filter:none !important;
}
.fig:hover .fig__img,
a:hover .fig__img,
button:hover .fig__img,
.case:hover .fig__img{
  filter:none !important;
}

/* The fifth case is centred on desktop so the odd card count feels intentional. */
@media (min-width:901px){
  .cases__grid > .case:last-child:nth-child(odd){
    grid-column:1 / -1;
    width:calc(50% - 16px);
    justify-self:center;
  }
}

/* Round 7c: el cliente pidio quitar el filtro invert de las bombas. La portada
   del caso pasa a ser el render a color del skid (sin filtro, ver enhance.js). */
[data-case-open="industrial-pumps"] .fig__img{ filter:none !important; }
[data-case-open="industrial-pumps"]:hover .fig__img{ filter:none !important; }

/* Round 7c: Overview — el skid en contenedor es horizontal; el marco pasa de
   4:5 a 4:3 para que se vea completo sin deformar. */
#overview .who__frame{ aspect-ratio:4 / 3 !important; }

@media (max-width:900px){
  .cases__grid > .case:last-child:nth-child(odd){ width:100%; }
}

/* ---- Round 6: nada en el sitio debe verse desaturado -----------------
   El CSS compilado aplica saturate(.85) al video del panel CAD & Piping.
   Se anula aqui junto con cualquier resto de gris en imagenes y videos. */
video.cap__view-media,
.cap__view-media{
  filter:contrast(1.06) brightness(1.28) saturate(1) !important;
}

/* ============================================================
   Round 7 — pulido movil (revisiones cliente)
   Hash-independiente: se targetea por CLASE, nunca por el cid con hash.
   ============================================================ */

/* 7.2 — El nav flotante ya no tapa el eyebrow al llegar a una seccion.
   El scroll-margin de r5 (38px) es MENOR que el borde inferior del nav
   flotante en movil (~78px), asi que la etiqueta de inicio de seccion
   (SELECTED CASE STUDIES, SOFTWARE, STANDARDS & CAPABILITIES...) quedaba
   parcialmente debajo del nav. Se libra dejando el offset del nav + aire.
   Solo en movil: en desktop el 38px lo aprobo el cliente (r5). */
@media (max-width:720px){
  section[id], main [id]{
    scroll-margin-top: calc(var(--nav-offset, 96px) + 16px) !important;
  }
}

/* 7.1 — Boton flotante de contacto (hub): en movil se achica y se pega mas
   a la esquina para reducir la huella que solapa el contenido, y se reserva
   aire inferior en las secciones para que ningun texto termine debajo. */
@media (max-width:720px){
  .hub{
    --hub-btn:46px !important;
    --hub-node:38px !important;
    --hub-gap:9px !important;
    right:11px !important;
    bottom:calc(11px + env(safe-area-inset-bottom,0px)) !important;
  }
  .hub__sym{ width:29px !important; height:29px !important; }

  /* Reserva de aire inferior/derecho en los bloques que el boton solapaba:
     pie del panel de video (Capabilities), resumen de las tarjetas de caso,
     nota de "Direct integration" (Overview) y tags de sector. Asi el texto
     nunca cae bajo el disco de 46px anclado abajo-derecha. */
  .cap__view-cap{ padding-right:58px; }
  .cap__caps{ padding-bottom:60px; }
  .cases__grid .case:last-child{ padding-bottom:64px; }
  .cases__grid{ padding-bottom:8px; }
}

/* 7.3 — La tira de disciplinas (01 CAD & PIPING · 02 SIMULATION ·
   03 AUTOMATION) se desplaza en horizontal en movil pero nada lo indicaba:
   parecia cortada. Degradado + chevron al borde derecho, que se desvanece al
   llegar al final del desplazamiento (clase gx-rail-end la pone enhance.js). */
@media (max-width:720px){
  .cap__body{ position:relative; }
  .cap__body.gx-rail-scrollable::after{
    content:"\203A"; /* › */
    position:absolute; top:0; right:0;
    width:56px; height:62px;
    display:flex; align-items:center; justify-content:flex-end;
    padding-right:11px; padding-bottom:2px;
    font-family:var(--font-display,"Barlow Condensed",sans-serif);
    font-size:22px; line-height:1; color:var(--accent,#6ba0f5);
    background:linear-gradient(90deg,
      rgba(19,22,28,0), rgba(19,22,28,.88) 52%, rgba(19,22,28,.97));
    pointer-events:none; z-index:3;
    opacity:1; transition:opacity .3s ease;
  }
  .cap__body.gx-rail-scrollable.gx-rail-end::after{ opacity:0; }
}

/* ============================================================
   Round 7e — galeria de casos: MINIATURAS pequeñas (grid compacto),
   y al hacer clic se abre la imagen completa en grande (lightbox).
   Asi el pop-up se ve premium y no hay que bajar tanto.
   ============================================================ */
.caseov__gallery{
  grid-template-columns:repeat(2,1fr) !important;  /* 2 columnas compactas */
  position:static !important;                      /* que fluya, no sticky */
  gap:10px !important;
  align-content:start;
}
.caseov__gallery figure,
.caseov__gallery figure:first-child{
  aspect-ratio:4/3 !important;            /* miniatura uniforme y pequeña */
  grid-column:auto !important;
  background:var(--ink) !important;
  border-radius:6px;
  cursor:zoom-in;                         /* se entiende que abre en grande */
}
.caseov__gallery img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;            /* miniatura; el original se abre al click */
  display:block;
}

/* ============================================================
   Round 7d — WHO WE ARE: animacion del logo de marca en vez de la foto
   (la misma que se ve en el home). El recuadro pasa a fondo oscuro y
   dentro corre el video de marca con el mismo tratamiento del hero. */
#overview .who__frame.gx-who-brand{
  background:
    radial-gradient(ellipse 62% 72% at 50% 46%, rgba(107,160,245,.14), transparent 66%),
    linear-gradient(160deg,#0a0e14 0%,#0c0e11 100%) !important;
}
#overview .who__frame.gx-who-brand .who__img{ display:none !important; }
#overview .who__frame.gx-who-brand .who__annot{ display:none !important; }
.gx-who-video{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:cover;                 /* llena el recuadro */
  transform:scale(1.9);             /* Round 7f: logo aun mas grande (pedido cliente) */
  transform-origin:center;
  filter:grayscale(1) invert(1) contrast(2.05) brightness(1.1);
  mix-blend-mode:screen; pointer-events:none;
}

/* =====================================================================
   GigOuts — Mobile refinements (round 2) · additive · mobile-only
   Targets the real root causes seen on device. Desktop is untouched
   (every rule lives inside a mobile media query).
   ===================================================================== */

/* (A) INTRO — the floating stat modules & pillar labels are animated to
   desktop corner positions; on phones they fall off / get clipped and the
   intro looks broken. Hide them on phones so the intro reads clean
   (logo + tagline + skip). The same stats appear later on the page. */
@media (max-width:720px){
  .intro__modules[data-astro-cid-u43ozx4m],
  .intro__pillars[data-astro-cid-u43ozx4m]{ display:none !important; }
  #intro{ overflow:hidden; }
}

/* (B) NAV — floating pill reads as a solid element so page text no longer
   shows through it while scrolling. */
@media (max-width:720px){
  .nav__shell[data-astro-cid-dmqpwcec]{
    background:linear-gradient(180deg,#1b2027f5,#0c0e12f7) !important;
    border-color:rgba(255,255,255,.12) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.14),
               inset 0 0 0 1px rgba(255,255,255,.05),
               0 22px 46px -20px rgba(0,0,0,.9) !important;
  }
  .nav[data-astro-cid-dmqpwcec].is-stuck .nav__shell[data-astro-cid-dmqpwcec]{
    background:linear-gradient(180deg,#171b21f7,#0a0c0ffb) !important;
  }
}

/* (C) COLLAB "reveal" cards — on phones the 3D flip + fixed-height faces
   collapse / clip on mobile Safari ("no se ven, sale cortado").
   Replace the flip with a clean tap-to-reveal swap: the faces flow in
   normal document height (nothing absolute, nothing clipped); the front
   shows by default and tapping swaps to the back. No 3D at all. */
@media (max-width:900px){
  .card[data-astro-cid-7gsb6lky]{ aspect-ratio:auto !important; min-height:0 !important; }
  .card__inner[data-astro-cid-7gsb6lky],
  .card[data-astro-cid-7gsb6lky].is-flipped .card__inner[data-astro-cid-7gsb6lky]{
    transform:none !important; transition:none !important;
  }
  .card__face[data-astro-cid-7gsb6lky]{
    position:relative !important; inset:auto !important; height:auto !important;
    transform:none !important;
    backface-visibility:visible !important; -webkit-backface-visibility:visible !important;
  }
  .card__face--back[data-astro-cid-7gsb6lky]{ display:none !important; opacity:1 !important; }
  .card[data-astro-cid-7gsb6lky].is-flipped .card__face--front[data-astro-cid-7gsb6lky]{ display:none !important; }
  .card[data-astro-cid-7gsb6lky].is-flipped .card__face--back[data-astro-cid-7gsb6lky]{ display:flex !important; }
}

/* (D) SOFTWARE ECOSYSTEM tabs — make the three tabs share the row and
   always fit, so option 3 (Automation) is fully visible and easy to tap
   instead of being pushed into the corner behind a chevron. */
@media (max-width:860px){
  .cap__rail[data-astro-cid-l5aavh2a]{ overflow-x:hidden !important; }
  .cap__tab[data-astro-cid-l5aavh2a]{
    flex:1 1 0 !important; min-width:0 !important;
    padding:12px 8px !important; gap:6px !important;
    justify-content:flex-start !important;
  }
  .cap__tab-n[data-astro-cid-l5aavh2a]{ display:none !important; }
  .cap__tab-b[data-astro-cid-l5aavh2a]{ margin-left:0 !important; }
  .cap__tab-title[data-astro-cid-l5aavh2a]{
    font-size:.9rem !important; white-space:normal !important; word-break:break-word;
  }
  .cap__tab-meta[data-astro-cid-l5aavh2a]{ white-space:nowrap; }
}

/* (E) INTRO on phones — present the four stats as a clean, centered,
   symmetric column below the logo. This is a phone-only static list
   (the desktop GSAP-animated modules above stay 100% untouched). */
.gx-intro-stats{ display:none; }
@media (max-width:720px){
  .gx-intro-stats{
    display:flex; flex-direction:column; align-items:center; gap:9px;
    position:absolute; left:50%; top:58%; transform:translateX(-50%);
    width:min(300px,82vw); z-index:6; pointer-events:none;
    animation:gxIntroStats .75s ease .35s both;
  }
  .gx-istat{
    display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
    padding:9px 15px;
    background:linear-gradient(165deg,#343c48cc,#0f1217e0);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:inset 0 1px #ffffff2e,inset 0 -1px #0000008c,
               0 14px 30px -16px #000000f2,0 0 0 1px #00000059;
    -webkit-backdrop-filter:blur(14px) saturate(130%);
    backdrop-filter:blur(14px) saturate(130%);
    clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
  }
  .gx-istat-v{
    font-family:var(--font-display); font-weight:700; font-size:1.45rem; line-height:1;
    color:var(--white-tech); text-shadow:0 0 18px rgba(150,185,235,.28);
    min-width:46px; text-align:left; flex:none;
  }
  .gx-istat-l{
    font-family:var(--font-mono); font-size:9.5px; letter-spacing:.13em;
    text-transform:uppercase; color:var(--gray-soft); line-height:1.3;
  }
}
@keyframes gxIntroStats{
  from{ opacity:0; transform:translateX(-50%) translateY(10px); }
  to  { opacity:1; transform:translateX(-50%) translateY(0); }
}