/* ============================================================
   GTG — ELEMENTOR + ASTRA COMPATIBILITY LAYER
   Loaded before the design system. Neutralises theme and page-
   builder defaults so the tokens below are the only authority.
   ============================================================ */

/* Astra: kill the content container so sections run full-bleed */
body.elementor-page .site-content > .ast-container{max-width:100%;padding:0}
body.elementor-page #primary{margin:0;padding:0}
body.elementor-page .entry-content > .elementor{margin:0}
.ast-plain-container.ast-no-sidebar #primary{padding-block:0}

/* Elementor: containers must not impose their own rhythm */
.e-con,.e-con-inner{--container-default-padding-block-start:0;--container-default-padding-block-end:0;
  --container-default-padding-inline-start:0;--container-default-padding-inline-end:0}
.elementor-widget:not(:last-child){margin-block-end:0}
.elementor-widget-container{line-height:inherit}

/* Elementor headings/text inherit our type system, not the widget defaults */
/* headings keep the design scale — never inherit from body */
.elementor-widget-text-editor{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}
.elementor-widget-text-editor p:last-child{margin-bottom:0}

/* HFE header wrapper: this is the element that goes fixed.
   !important is load-bearing — HFE's `.ehf-header #masthead{position:relative}`
   and Astra's `.ast-theme-transparent-header #masthead{position:absolute}` both
   carry a class and an id, so they outrank any selector that leans on the id
   alone. Lose this and the header falls back into flow and scrolls away. */
header.ehf-header,
header#masthead.site-header,
header#masthead,
body.elementor-page header#masthead{
  position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:999!important;
  background-color:transparent;border-bottom:1px solid transparent;
  transition:background-color 220ms cubic-bezier(.65,0,.35,1),
             border-color 220ms cubic-bezier(.65,0,.35,1),
             backdrop-filter 220ms cubic-bezier(.65,0,.35,1);
}
header.ehf-header.gtg-stuck,
header#masthead.gtg-stuck{
  background-color:rgba(4,18,31,.78);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.09);
}
header.ehf-header .e-con,
header#masthead .e-con{background:transparent}
header#masthead .ast-main-header-wrap,
header#masthead .main-header-bar{background:transparent!important;border:0!important}
.ehf-footer{position:relative;z-index:1}

/* HFE Navigation Menu widget -> our link language */
.hfe-nav-menu .menu-item a.hfe-menu-item{
  font-family:"IBM Plex Mono",ui-monospace,monospace!important;
  font-size:11px!important;font-weight:500!important;letter-spacing:.14em;
  text-transform:uppercase;color:#93A4BC!important;padding:8px 16px!important;
  position:relative;transition:color 220ms cubic-bezier(.65,0,.35,1);
}
.hfe-nav-menu .menu-item a.hfe-menu-item:hover,
.hfe-nav-menu .menu-item.current-menu-item a.hfe-menu-item{color:#fff!important;background:transparent!important}
.hfe-nav-menu .menu-item a.hfe-menu-item::after{
  content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;
  background:linear-gradient(90deg,#0B8FE3 0%,#15E0BE 50%,#4ECB5F 100%);
  transform:scaleX(0);transform-origin:left;
  transition:transform 220ms cubic-bezier(.22,1,.36,1);
}
.hfe-nav-menu .menu-item a.hfe-menu-item:hover::after,
.hfe-nav-menu .menu-item a.hfe-menu-item:focus-visible::after,
.hfe-nav-menu .menu-item.current-menu-item a.hfe-menu-item::after{transform:scaleX(1)}
.hfe-nav-menu a.hfe-menu-item:focus-visible{outline:2px solid #15E0BE;outline-offset:2px}

/* HFE mobile menu panel */
.hfe-nav-menu__toggle .hfe-nav-menu-icon svg{fill:#fff;width:22px;height:22px}
.hfe-nav-menu.hfe-menu-sub-item--none .sub-menu,
.hfe-nav-menu__layout-expandible .hfe-nav-menu{background:rgba(4,18,31,.98)}
@media(max-width:1024px){
  .hfe-nav-menu .menu-item a.hfe-menu-item{
    font-family:"Archivo",system-ui,sans-serif!important;font-size:28px!important;
    font-weight:600!important;letter-spacing:-.03em!important;text-transform:none!important;
    color:#fff!important;padding:14px 24px!important;
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .hfe-nav-menu .menu-item a.hfe-menu-item::after{display:none}
}

/* ============================================================
   GTG GLOBAL TECHNOLOGY — CONTINUUM
   Design system tokens. Every value traced to design/01-design-language.md
   ============================================================ */
:root{
  /* Ink ramp — dark key */
  --ink-900:#04121F; --ink-800:#071427; --ink-700:#0B1E38; --ink-600:#122B4C;
  /* Paper ramp — light key */
  --paper-000:#FFFFFF; --paper-050:#F1F4F8; --paper-100:#E4E9F0;
  /* Brand continuum */
  --blue-core:#0B8FE3; --blue-bright:#00B6FF; --blue-ink:#0A6FC2;
  --aqua:#15E0BE; --green:#4ECB5F; --green-bright:#52DE5B;
  /* Text */
  --text-on-dark:#FFFFFF; --text-dim-dark:#93A4BC;
  --text-on-light:#071427; --text-dim-light:#4A5B72;
  /* Lines */
  --hairline-dark:rgba(255,255,255,.09); --grid-dark:rgba(255,255,255,.035);
  --hairline-light:#D3DBE6; --grid-light:rgba(7,20,39,.05);
  /* Gradient — midpoint 50% = the node's measured position on the logo's rule */
  --grad-signal:linear-gradient(90deg,var(--blue-core) 0%,var(--aqua) 50%,var(--green) 100%);
  --grad-signal-v:linear-gradient(180deg,var(--blue-core) 0%,var(--aqua) 50%,var(--green) 100%);
  /* Spacing */
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px; --s32:32px;
  --s48:48px; --s64:64px; --s96:96px; --s128:128px; --s160:160px; --s200:200px;
  --sp-section:clamp(80px,10vw,160px);
  --sp-section-tall:clamp(96px,13vw,200px);
  --container:1280px;
  --gutter:clamp(24px,5vw,48px);
  /* Type */
  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --t-h1:clamp(2.75rem,1.15rem + 5.35vw,5.5rem);
  --t-h2:clamp(2.125rem,1.28rem + 2.8vw,3.75rem);
  --t-h3:clamp(1.5rem,1.28rem + .74vw,1.875rem);
  --t-h4:1.25rem;
  --t-lede:clamp(1.125rem,1.06rem + .22vw,1.25rem);
  --t-body:clamp(1rem,.98rem + .07vw,1.0625rem);
  --t-label:.75rem;
  /* Motion */
  --dur-micro:220ms; --dur-reveal:480ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-state:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink-900); color:var(--text-on-dark);
  font-family:var(--f-body); font-size:var(--t-body); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* No overflow-x:hidden on html/body — it breaks the Elementor editor canvas.
   Clip horizontal bleed on the sections that cause it, never globally. */
img{max-width:100%; display:block}
::selection{background:var(--aqua); color:var(--ink-900)}

/* ---------- Typography primitives ---------- */
h1,h2,h3,h4{margin:0; font-family:var(--f-display); font-weight:600; text-wrap:balance}
h1{font-size:var(--t-h1); line-height:.96; letter-spacing:-.035em; font-stretch:112%}
h2{font-size:var(--t-h2); line-height:1.04; letter-spacing:-.03em; font-stretch:112%}
h3{font-size:var(--t-h3); line-height:1.2; letter-spacing:-.02em; font-stretch:100%}
h4{font-size:var(--t-h4); line-height:1.3; letter-spacing:-.01em; font-stretch:100%}
p{margin:0}
.lede{font-size:var(--t-lede); line-height:1.65; max-width:38ch; color:var(--text-dim-dark)}
.prose{max-width:64ch; color:var(--text-dim-dark)}
.prose + .prose{margin-top:var(--s24)}
.is-light .lede,.is-light .prose{color:var(--text-dim-light)}
.grad-word{
  background:linear-gradient(90deg,var(--blue-core) 0%,var(--aqua) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Eyebrow: hairline + node + mono label ---------- */
.eyebrow{
  display:flex; align-items:center; gap:var(--s12);
  font-family:var(--f-mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim-dark);
  margin:0 0 var(--s24);
}
.is-light .eyebrow{color:var(--text-dim-light)}
.eyebrow::before{
  content:""; width:28px; height:1px; background:currentColor; opacity:.5; flex:none;
}
.eyebrow__node{
  width:5px; height:5px; flex:none; background:var(--aqua);
  transform:rotate(45deg); margin-left:-6px;
}
.eyebrow__node.is-green{background:var(--green)}

/* ---------- Layout ---------- */
.sec{position:relative; padding-block:var(--sp-section); border-top:1px solid var(--hairline-dark)}
.sec.is-light{background:var(--paper-050); color:var(--text-on-light); border-top-color:var(--hairline-light)}
.sec.is-tall{padding-block:var(--sp-section-tall)}
/* A seam continues the previous section rather than starting a new one,
   so it drops the rule, the node, and half its top padding. */
.sec.is-seam{border-top:0; padding-top:calc(var(--sp-section) * .5)}
/* Section junction node, sits on the top hairline at container-left */
.sec::before{
  content:""; position:absolute; top:-3px; left:50%;
  transform:translateX(calc(var(--container) / -2)) rotate(45deg);
  width:5px; height:5px; background:var(--blue-core); z-index:2;
}
.sec.is-seam::before{display:none}
@media (max-width:1376px){ .sec::before{left:var(--gutter); transform:rotate(45deg)} }

.inner{
  position:relative; z-index:1;
  width:min(var(--container),100% - var(--gutter)*2); margin-inline:auto;
}
/* The visible 12-column structure — opt-in. See .has-grid note in the build guide. */
.has-grid .inner::before{
  content:""; position:absolute; inset:calc(var(--sp-section) * -1) 0; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--grid-dark) 0 1px,transparent 1px calc(100%/12));
  z-index:-1;
}
.has-grid.is-light .inner::before{background-image:repeating-linear-gradient(90deg,var(--grid-light) 0 1px,transparent 1px calc(100%/12))}

.split{display:grid; grid-template-columns:1fr; gap:var(--s48)}
@media (min-width:900px){
  .split{grid-template-columns:4fr 8fr; gap:var(--s64)}
}

/* ---------- Page furniture: grain + spine ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.spine{
  position:fixed; left:clamp(10px,1.6vw,26px); top:0; bottom:0; width:1px; z-index:55;
  background:rgba(128,150,180,.22); pointer-events:none;
}
.spine__fill{
  position:absolute; inset:0 0 auto 0; height:0; background:var(--grad-signal-v);
  transform-origin:top;
}
.spine__node{
  position:absolute; left:50%; top:0; width:7px; height:7px; margin-left:-3.5px; margin-top:-3.5px;
  background:var(--aqua); transform:rotate(45deg);
  box-shadow:0 0 12px 2px rgba(21,224,190,.5);
}

/* ---------- Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background var(--dur-micro) var(--ease-state),
             border-color var(--dur-micro) var(--ease-state),
             backdrop-filter var(--dur-micro) var(--ease-state);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(4,18,31,.78); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--hairline-dark);
}
.nav__inner{
  width:min(var(--container),100% - var(--gutter)*2); margin-inline:auto;
  height:76px; display:flex; align-items:center; justify-content:space-between; gap:var(--s32);
}
/* Horizontal mark, cropped from the stacked master lockup.
   Master bbox measured: mark occupies x76..425, y165..276 of a 500x500 canvas. */
.brand{display:flex; align-items:center; gap:var(--s12); text-decoration:none}
.brand__mark{
  width:87.5px; height:28px; flex:none;
  background-image:url("/wp-content/uploads/gtg/gtg-mark.png");
  background-size:125px 125px; background-position:-19px -41.25px; background-repeat:no-repeat;
}
.brand__name{
  font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-dim-dark); border-left:1px solid var(--hairline-dark);
  padding-left:var(--s12); line-height:1.3; max-width:9ch;
}
.nav__links{display:none; gap:var(--s32); list-style:none; margin:0; padding:0}
/* Specificity must beat `.btn { display:inline-flex }`, which is declared later. */
.nav__inner .nav__cta{display:none}
@media (min-width:1000px){ .nav__links{display:flex} .nav__inner .nav__cta{display:inline-flex} }
@media (max-width:520px){ .brand__name{display:none} }

/* Mobile menu */
.nav__toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
}
@media (min-width:1000px){ .nav__toggle{display:none} }
.nav__toggle span{
  display:block; height:1px; background:var(--text-on-dark);
  transition:transform var(--dur-micro) var(--ease-state), opacity var(--dur-micro) var(--ease-state);
}
.nav__toggle span:nth-child(1){width:24px}
.nav__toggle span:nth-child(2){width:16px}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){width:24px; transform:translateY(-3px) rotate(-45deg)}
.nav__toggle:focus-visible{outline:2px solid var(--aqua); outline-offset:2px}

.menu{
  position:fixed; inset:0; z-index:45; background:rgba(4,18,31,.98);
  backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; gap:var(--s24);
  padding:var(--s96) var(--gutter) var(--s48);
  opacity:0; visibility:hidden;
  transition:opacity 300ms var(--ease-out), visibility 300ms var(--ease-out);
}
.menu.is-open{opacity:1; visibility:visible}
.menu a.menu__link{
  font-family:var(--f-display); font-weight:600; font-stretch:106%;
  font-size:clamp(1.75rem,8vw,2.5rem); letter-spacing:-.03em; line-height:1.1;
  color:var(--text-on-dark); text-decoration:none;
  opacity:0; transform:translateY(14px);
}
.menu.is-open a.menu__link{
  opacity:1; transform:none;
  transition:opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.menu.is-open a.menu__link:nth-child(1){transition-delay:60ms}
.menu.is-open a.menu__link:nth-child(2){transition-delay:120ms}
.menu.is-open a.menu__link:nth-child(3){transition-delay:180ms}
.menu.is-open a.menu__link:nth-child(4){transition-delay:240ms}
.menu.is-open a.menu__link:nth-child(5){transition-delay:300ms}
.menu a.menu__link:focus-visible{outline:2px solid var(--aqua); outline-offset:6px}
.menu__foot{margin-top:var(--s32); padding-top:var(--s24); border-top:1px solid var(--hairline-dark)}
body.menu-open{overflow:hidden}
.nav__link{
  position:relative; font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim-dark);
  text-decoration:none; padding-block:var(--s8);
  transition:color var(--dur-micro) var(--ease-state);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--grad-signal); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-micro) var(--ease-out);
}
.nav__link:hover,.nav__link:focus-visible{color:var(--text-on-dark)}
.nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--text-on-dark)}
.nav__link.is-active::after{transform:scaleX(1)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--s12);
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; padding:16px 28px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform var(--dur-micro) var(--ease-out),
             background-color var(--dur-micro) var(--ease-state),
             border-color var(--dur-micro) var(--ease-state),
             color var(--dur-micro) var(--ease-state);
}
.btn svg{width:14px; height:14px; flex:none; transition:transform var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-state)}
.btn--primary{background:var(--paper-000); color:var(--ink-900)}
.btn--primary:hover{transform:translateY(-2px)}
.btn--primary:hover svg{color:var(--green); transform:translate(2px,-2px)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{border-color:var(--hairline-dark); color:var(--text-on-dark)}
.btn--ghost:hover{border-color:rgba(21,224,190,.55); background:rgba(255,255,255,.04); transform:translateY(-2px)}
.btn--ghost:hover svg{transform:translate(2px,-2px)}
.btn--ghost:active{transform:translateY(0)}
.is-light .btn--ghost{border-color:var(--hairline-light); color:var(--text-on-light)}
.btn:focus-visible{outline:2px solid var(--aqua); outline-offset:3px}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s16)}

/* Tertiary text link */
.tlink{
  display:inline-flex; align-items:center; gap:var(--s8); position:relative;
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-on-dark); text-decoration:none; padding-bottom:4px;
}
.is-light .tlink{color:var(--text-on-light)}
.tlink::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--grad-signal); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-micro) var(--ease-out);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1)}
.tlink svg{width:13px; height:13px; transition:transform var(--dur-micro) var(--ease-out)}
.tlink:hover svg{transform:translate(2px,-2px)}
.tlink:focus-visible{outline:2px solid var(--aqua); outline-offset:4px}

/* ============================================================
   01 · HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block:calc(76px + var(--s96)) var(--s96);
  background:
    radial-gradient(120% 90% at 78% 42%,rgba(11,143,227,.11) 0%,transparent 58%),
    radial-gradient(100% 80% at 50% 0%,#0E2A4E 0%,var(--ink-900) 62%);
  overflow:hidden; border-top:0;
}
.hero::before{display:none}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
/* Below 900px the routing field has no room to sit clear of the headline,
   so it steps down to the diagonal-band atmosphere layer instead of
   crowding the type. Nothing overlaps; nothing is "simplified" away. */
@media (max-width:899px){
  .hero__canvas{display:none}
  .hero{
    background:
      linear-gradient(118deg,transparent 63%,rgba(11,143,227,.075) 63%,rgba(11,143,227,.075) 71%,transparent 71%),
      linear-gradient(118deg,transparent 77%,rgba(21,224,190,.05) 77%,rgba(21,224,190,.05) 82%,transparent 82%),
      radial-gradient(120% 80% at 80% 26%,rgba(11,143,227,.11) 0%,transparent 60%),
      radial-gradient(100% 80% at 50% 0%,#0E2A4E 0%,var(--ink-900) 62%);
  }
}
/* Mouse spotlight — hero and CTA band only */
.hero__spot{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(11,143,227,.10),transparent 70%);
  transition:opacity 600ms var(--ease-out);
}
.hero__content{position:relative; z-index:2; max-width:min(640px,100%)}
.hero h1{margin-bottom:var(--s32)}
.hero .lede{margin-bottom:var(--s48)}
.hero__rule{
  position:absolute; left:0; right:0; bottom:0; height:1px; z-index:1;
  background:linear-gradient(90deg,transparent,var(--hairline-dark) 18%,var(--hairline-dark) 82%,transparent);
}
.hero__cue{
  position:absolute; z-index:2; bottom:var(--s32); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:var(--s12);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim-dark); opacity:.6;
}
.hero__cue span{display:block; width:1px; height:22px; background:linear-gradient(180deg,var(--text-dim-dark),transparent)}
@media (max-width:900px){ .hero__cue{display:none} }

/* ============================================================
   02 · CONVERGENCE — the client's sentence, drawn
   ============================================================ */
.conv__statement{font-size:var(--t-h3); line-height:1.45; letter-spacing:-.015em; max-width:26ch; color:var(--text-on-dark); font-family:var(--f-display); font-weight:400; font-stretch:100%}
.junction{margin-top:var(--s64)}
.junction__row{display:flex; flex-wrap:wrap; gap:var(--s16) var(--s32)}
.junction__item{display:flex; align-items:center; gap:var(--s12); font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim-dark)}
.junction__dot{width:5px; height:5px; flex:none; transform:rotate(45deg); background:var(--blue-core)}
.junction__row.is-out .junction__dot{background:var(--green)}
.junction__rule{
  position:relative; height:1px; margin:var(--s32) 0; background:var(--grad-signal); opacity:.55;
  transform:scaleX(0); transform-origin:left;
}
.junction__rule::after{
  content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  background:var(--aqua); transform:rotate(45deg); box-shadow:0 0 14px 3px rgba(21,224,190,.45);
}
.junction__cap{font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim-dark); opacity:.65; margin-bottom:var(--s16)}
.junction__cap.is-out{margin:var(--s16) 0 0}

/* ============================================================
   03 · VISION
   ============================================================ */
.vision__statement{
  font-family:var(--f-display); font-weight:600; font-stretch:106%;
  font-size:clamp(1.75rem,1.1rem + 2.2vw,2.75rem); line-height:1.18; letter-spacing:-.028em;
  max-width:20ch; color:var(--text-on-dark);
}
.is-light .vision__statement{color:var(--text-on-light)}
/* Tonal squircle cluster — from the supplied white-abstract reference */
.sec.is-light{overflow:hidden}
/* Tonal squircle cluster, 45° — the light key's atmosphere layer.
   One layer only, clustered in a corner, most of the canvas left empty. */
.squircles{position:absolute; right:-10%; bottom:-34%; width:min(820px,74vw); aspect-ratio:1; pointer-events:none; z-index:0}
.squircles i{position:absolute; display:block; background:var(--paper-100); border-radius:17%; transform:rotate(45deg)}
.squircles i:nth-child(1){width:58%; height:58%; right:2%; top:0}
.squircles i:nth-child(2){width:46%; height:46%; right:34%; top:30%; background:#DCE3ED}
.squircles i:nth-child(3){width:52%; height:52%; right:-8%; top:41%; opacity:.55}

/* ============================================================
   04 · WHAT WE DELIVER
   ============================================================ */
.grid-cells{display:grid; grid-template-columns:1fr; gap:0; margin-top:var(--s64); border-top:1px solid var(--hairline-light)}
@media (min-width:640px){ .grid-cells{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .grid-cells{grid-template-columns:repeat(4,1fr)} }
.cell{
  position:relative; padding:var(--s32); min-height:210px;
  border-bottom:1px solid var(--hairline-light); border-right:1px solid var(--hairline-light);
  display:flex; flex-direction:column; gap:var(--s16); text-decoration:none; color:inherit;
  background:var(--paper-050); /* opaque so the column grid stops at the cell edge */
  transition:background-color var(--dur-micro) var(--ease-state), transform var(--dur-micro) var(--ease-out);
}
@media (min-width:1024px){ .cell{padding:var(--s32) var(--s32) var(--s48)} }
.cell:first-child{border-left:1px solid var(--hairline-light)}
@media (min-width:640px){ .cell:nth-child(2n+1){border-left:1px solid var(--hairline-light)} }
@media (min-width:1024px){
  .cell{border-left:0}
  .cell:nth-child(4n+1){border-left:1px solid var(--hairline-light)}
}
.cell__top{position:absolute; inset:0 auto auto 0; width:100%; height:1px; background:var(--grad-signal); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-micro) var(--ease-out)}
.cell:hover{background:var(--paper-000); transform:translateY(-4px)}
.cell:hover .cell__top{transform:scaleX(1)}
.cell:focus-visible{outline:2px solid var(--blue-ink); outline-offset:-2px}
.cell svg.icon{width:24px; height:24px; stroke-width:1.5; color:var(--text-dim-light); transition:color var(--dur-micro) var(--ease-state)}
.cell:hover svg.icon{color:var(--blue-ink)}
.cell h4{color:var(--text-on-light)}
.cell__arrow{margin-top:auto; width:16px; height:16px; stroke-width:1.5; color:var(--text-dim-light); transition:transform var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-state)}
.cell:hover .cell__arrow{transform:translate(3px,-3px); color:var(--green)}
.cell--link{justify-content:center; align-items:flex-start; background:var(--paper-100)}
.cell--link:hover{background:var(--paper-000)}

/* ============================================================
   05 · FLAGSHIP — SPORTIX
   ============================================================ */
.flagship{
  background:
    radial-gradient(90% 70% at 76% 46%,rgba(11,143,227,.13) 0%,transparent 60%),
    var(--ink-900);
  overflow:hidden;
}
.flagship__grid{display:grid; grid-template-columns:1fr; gap:var(--s64); align-items:center}
@media (min-width:1000px){ .flagship__grid{grid-template-columns:1fr 1fr; gap:var(--s96)} }
.flagship__word{
  font-family:var(--f-display); font-weight:600; font-stretch:118%;
  font-size:clamp(3.25rem,1.6rem + 6vw,7rem); line-height:.9; letter-spacing:.015em;
  margin:var(--s16) 0 var(--s32); color:var(--text-on-dark);
}
.pitch{width:100%; height:auto; overflow:visible}
.pitch .ln{fill:none; stroke:rgba(255,255,255,.16); stroke-width:1}
.pitch .nd{fill:var(--blue-core)}
.pitch .nd-a{fill:var(--aqua)}
.pitch .lk{stroke:rgba(21,224,190,.3); stroke-width:.75; fill:none}
.audience{display:flex; flex-wrap:wrap; gap:var(--s12) var(--s24); margin-top:var(--s48); padding-top:var(--s24); border-top:1px solid var(--hairline-dark)}
.audience span{display:flex; align-items:center; gap:var(--s8); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim-dark)}
.audience i{width:4px; height:4px; background:var(--aqua); transform:rotate(45deg); flex:none}
.figure-note{margin-top:var(--s16); font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim-dark); opacity:.55}

/* ============================================================
   06 · CONNECTS — the values resolution
   ============================================================ */
.values{margin-top:var(--s96)}
.values__rule{position:relative; height:1px; background:var(--grad-signal); transform:scaleX(0); transform-origin:left}
/* Nodes straddle the rule — four points on one line, not a row beneath it */
.values__row{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s48) var(--s16); margin-top:-3.5px}
@media (min-width:760px){ .values__row{grid-template-columns:repeat(4,1fr); margin-top:-3.5px} }
.value{display:flex; flex-direction:column}
.value b{margin-top:var(--s24)}
.value b{
  font-family:var(--f-display); font-weight:600; font-stretch:106%;
  font-size:clamp(1.25rem,1rem + 1vw,1.75rem); letter-spacing:-.02em; line-height:1.1;
  color:var(--text-on-dark);
}
.value i{width:7px; height:7px; transform:rotate(45deg); font-style:normal; flex:none}
.value:nth-child(1) i{background:var(--blue-core)}
.value:nth-child(2) i{background:#0FBBD0}
.value:nth-child(3) i{background:var(--aqua)}
.value:nth-child(4) i{background:var(--green); box-shadow:0 0 12px 2px rgba(78,203,95,.4)}

/* ============================================================
   07 · CTA BAND
   ============================================================ */
.cta{position:relative; text-align:center; overflow:hidden; background:var(--ink-800)}
.cta__spot{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(21,224,190,.09),transparent 70%);
  transition:opacity 600ms var(--ease-out);
}
.cta .eyebrow{justify-content:center}
.cta h2{max-width:18ch; margin-inline:auto}
.cta .btn-row{justify-content:center; margin-top:var(--s48)}

/* ============================================================
   08 · FOOTER
   ============================================================ */
.footer{background:var(--ink-900); border-top:1px solid var(--hairline-dark); padding-block:var(--s96) var(--s48)}
.footer__grid{display:grid; grid-template-columns:1fr; gap:var(--s48)}
@media (min-width:820px){ .footer__grid{grid-template-columns:2fr 1fr 1fr; gap:var(--s64)} }
/* Mark only. The stacked lockup's tagline renders illegibly below ~140px tall,
   so the footer uses the mark at a size it can actually hold. */
.footer__mark{
  width:137.5px; height:44px;
  background-image:url("/wp-content/uploads/gtg/gtg-mark.png");
  background-size:196.4px 196.4px; background-position:-29.9px -64.8px; background-repeat:no-repeat;
  margin-bottom:var(--s24);
}
.footer h5{margin:0 0 var(--s16); font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim-dark)}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s12)}
.footer a{color:var(--text-dim-dark); text-decoration:none; font-size:.9375rem; transition:color var(--dur-micro) var(--ease-state)}
.footer a:hover,.footer a:focus-visible{color:var(--text-on-dark)}
.footer a:focus-visible{outline:2px solid var(--aqua); outline-offset:3px}
.footer__tag{color:var(--text-dim-dark); max-width:34ch}
.footer__base{
  margin-top:var(--s64); padding-top:var(--s24); border-top:1px solid var(--hairline-dark);
  display:flex; flex-wrap:wrap; gap:var(--s16) var(--s32); justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim-dark);
}
.footer__base a{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em}
.footer__legal{display:flex; gap:var(--s24); flex-wrap:wrap}

/* ---------- Reveal state (GSAP toggles .is-in) ---------- */
.r{opacity:0; transform:translateY(20px)}
.r.is-in{opacity:1; transform:none; transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .r{opacity:1; transform:none}
  .junction__rule,.values__rule{transform:scaleX(1)}
  .hero__spot,.cta__spot{display:none}
}

/* ============================================================
   INNER PAGES
   ============================================================ */

/* ---------- Page masthead — the hero's quieter sibling ---------- */
.masthead{
  position:relative; overflow:hidden; border-top:0;
  padding-block:calc(76px + var(--s96)) var(--sp-section);
  background:
    linear-gradient(118deg,transparent 68%,rgba(11,143,227,.07) 68%,rgba(11,143,227,.07) 76%,transparent 76%),
    radial-gradient(110% 80% at 76% 20%,rgba(11,143,227,.10) 0%,transparent 58%),
    radial-gradient(100% 80% at 50% 0%,#0E2A4E 0%,var(--ink-900) 62%);
}
.masthead::before{display:none}
.masthead h1{max-width:14ch; margin-bottom:var(--s32)}
.masthead .lede{max-width:52ch}
.masthead__rule{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--hairline-dark) 18%,var(--hairline-dark) 82%,transparent);
}

/* ---------- Stacked prose rows: heading left, body right ---------- */
.rows{border-top:1px solid var(--hairline-dark)}
.is-light .rows{border-top-color:var(--hairline-light)}
.row{
  display:grid; grid-template-columns:1fr; gap:var(--s16);
  padding-block:var(--s48); border-bottom:1px solid var(--hairline-dark);
}
.is-light .row{border-bottom-color:var(--hairline-light)}
@media (min-width:900px){
  .row{grid-template-columns:4fr 8fr; gap:var(--s64); align-items:start}
}
.row__head{display:flex; align-items:flex-start; gap:var(--s16)}
.row__num{
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  color:var(--text-dim-dark); padding-top:.45em; flex:none;
}
.is-light .row__num{color:var(--text-dim-light)}
.row svg.icon{width:24px; height:24px; stroke-width:1.5; flex:none; color:var(--blue-core); margin-top:.15em}
.is-light .row svg.icon{color:var(--blue-ink)}
.row h3{color:var(--text-on-dark)}
.is-light .row h3{color:var(--text-on-light)}
.row p{max-width:62ch; color:var(--text-dim-dark)}
.is-light .row p{color:var(--text-dim-light)}

/* ---------- Statement: a single client line given room ---------- */
.statement{
  font-family:var(--f-display); font-weight:600; font-stretch:106%;
  font-size:clamp(1.5rem,1rem + 1.9vw,2.5rem); line-height:1.2; letter-spacing:-.028em;
  max-width:22ch; color:var(--text-on-dark);
}
.is-light .statement{color:var(--text-on-light)}
.note{
  margin-top:var(--s48); padding-top:var(--s24);
  border-top:1px solid var(--hairline-dark); max-width:58ch; color:var(--text-dim-dark);
}
.is-light .note{border-top-color:var(--hairline-light); color:var(--text-dim-light)}

/* ---------- Values / partner cells on dark ---------- */
.grid-cells.on-dark{border-top-color:var(--hairline-dark)}
.grid-cells.on-dark .cell{
  background:var(--ink-900);
  border-bottom-color:var(--hairline-dark); border-right-color:var(--hairline-dark);
}
.grid-cells.on-dark .cell:first-child,
.grid-cells.on-dark .cell:nth-child(2n+1),
.grid-cells.on-dark .cell:nth-child(4n+1){border-left-color:var(--hairline-dark)}
.grid-cells.on-dark .cell h4{color:var(--text-on-dark)}
.grid-cells.on-dark .cell p{color:var(--text-dim-dark); font-size:.9375rem; line-height:1.65}
.grid-cells.on-dark .cell svg.icon{color:var(--text-dim-dark)}
.grid-cells.on-dark .cell:hover{background:var(--ink-700)}
.grid-cells.on-dark .cell:hover svg.icon{color:var(--aqua)}
.cell--static{cursor:default}
.grid-cells.cols-3{grid-template-columns:1fr}
@media (min-width:640px){ .grid-cells.cols-3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){
  .grid-cells.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid-cells.cols-3 .cell{border-left:0}
  .grid-cells.cols-3 .cell:nth-child(3n+1){border-left:1px solid var(--hairline-dark)}
}

/* ---------- Contact ---------- */
.contact__grid{display:grid; grid-template-columns:1fr; gap:var(--s64)}
@media (min-width:960px){ .contact__grid{grid-template-columns:5fr 7fr; gap:var(--s96)} }
.deflist{border-top:1px solid var(--hairline-dark)}
.deflist div{
  display:flex; flex-wrap:wrap; gap:var(--s8) var(--s24); justify-content:space-between;
  padding-block:var(--s16); border-bottom:1px solid var(--hairline-dark);
}
.deflist dt{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dim-dark); margin:0;
}
.deflist dd{margin:0; color:var(--text-on-dark)}
.deflist dd a{color:var(--text-on-dark); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2)}
.deflist dd a:hover{border-bottom-color:var(--aqua)}
.deflist dd a:focus-visible{outline:2px solid var(--aqua); outline-offset:3px}
.address{font-style:normal; color:var(--text-dim-dark); line-height:1.9}
.address strong{color:var(--text-on-dark); font-weight:500}
.map{
  position:relative; margin-top:var(--s24); aspect-ratio:16/10; background:var(--ink-800);
  border:1px solid var(--hairline-dark); display:flex; align-items:center; justify-content:center;
  background-image:repeating-linear-gradient(90deg,var(--grid-dark) 0 1px,transparent 1px 40px),
                   repeating-linear-gradient(180deg,var(--grid-dark) 0 1px,transparent 1px 40px);
}
.map span{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim-dark); text-align:center; max-width:30ch; line-height:1.8;
  margin-top:52px; /* clears the pin above it */
}
.map i{
  position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-46px 0 0 -4.5px;
  background:var(--aqua); transform:rotate(45deg); box-shadow:0 0 14px 3px rgba(21,224,190,.45);
}

/* ---------- Form: hairline-bottom fields, not boxes ---------- */
.form{display:grid; grid-template-columns:1fr; gap:var(--s32)}
@media (min-width:680px){ .form{grid-template-columns:1fr 1fr} }
.field{display:flex; flex-direction:column; gap:var(--s8)}
.field.is-wide{grid-column:1/-1}
.field label{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dim-dark);
  transition:color var(--dur-micro) var(--ease-state);
}
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--text-on-dark);
  background:transparent; border:0; border-bottom:1px solid var(--hairline-dark);
  padding:10px 0; width:100%; border-radius:0;
  transition:border-color var(--dur-micro) var(--ease-state);
}
.field textarea{resize:vertical; min-height:96px}
.field select{appearance:none; cursor:pointer}
.field select option{background:var(--ink-800); color:var(--text-on-dark)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-bottom-color:transparent}
.field{position:relative}
.field::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--grad-signal); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-micro) var(--ease-out);
}
.field:focus-within::after{transform:scaleX(1)}
.field:focus-within label{color:var(--aqua)}
.form__actions{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:var(--s24); align-items:center}
.form__note{font-size:.875rem; color:var(--text-dim-dark)}

/* ============================================================
   SCROLL-SCRUBBED WORD CONVERGENCE
   Words start dim and slightly out of place, then converge and
   ignite one by one as the block travels the viewport. The pass-
   through colour is the logo's junction aqua, so the type itself
   runs the blue-to-white continuum. Scrubbed, so the reader
   controls it.
   ============================================================ */
.words{--w-from:#22344A; --w-mid:var(--aqua); --w-to:#FFFFFF}
.is-light .words{--w-from:#C2CBD8; --w-mid:var(--blue-ink); --w-to:var(--text-on-light)}
.words .w{display:inline-block; color:var(--w-from); will-change:transform,opacity,color}
.words.is-split{color:transparent}
@media (prefers-reduced-motion:reduce){
  .words .w{color:var(--w-to) !important; opacity:1 !important; transform:none !important}
}

/* ---------- Eyebrow: rule draws, node ignites, tracking settles ---------- */
.eyebrow{letter-spacing:.30em; transition:letter-spacing 760ms var(--ease-out)}
.eyebrow.is-lit{letter-spacing:.18em}
.eyebrow::before{transform:scaleX(0); transform-origin:left; transition:transform 640ms var(--ease-out)}
.eyebrow.is-lit::before{transform:scaleX(1)}
.eyebrow__node{
  transform:rotate(45deg) scale(.2); opacity:0;
  transition:transform 460ms var(--ease-out) 200ms, opacity 380ms var(--ease-out) 200ms, box-shadow 600ms var(--ease-out) 260ms;
}
.eyebrow.is-lit .eyebrow__node{
  transform:rotate(45deg) scale(1); opacity:1;
  box-shadow:0 0 10px 2px rgba(21,224,190,.45);
}
.eyebrow.is-lit .eyebrow__node.is-green{box-shadow:0 0 10px 2px rgba(78,203,95,.45)}
@media (prefers-reduced-motion:reduce){
  .eyebrow{letter-spacing:.18em}
  .eyebrow::before{transform:scaleX(1)}
  .eyebrow__node{transform:rotate(45deg) scale(1); opacity:1}
}

/* ============================================================
   FIGURE — layered talent graph
   ============================================================ */
.figure{position:relative}
.pitch{width:100%; height:auto; display:block; overflow:visible}
.pitch .ln{fill:none; stroke:rgba(255,255,255,.15); stroke-width:1}
.pitch .ln-soft{fill:none; stroke:rgba(255,255,255,.08); stroke-width:1}
.pitch .lk{fill:none; stroke:rgba(21,224,190,.26); stroke-width:.9}
.pitch .nd{fill:var(--blue-core)}
.pitch .nd-a{fill:var(--aqua)}
.pitch .nd-c{fill:rgba(147,164,188,.5)}
.pitch .scan{mix-blend-mode:screen}
.figure__hud{
  display:flex; justify-content:space-between; gap:var(--s16); flex-wrap:wrap;
  margin-top:var(--s16); padding-top:var(--s12); border-top:1px solid var(--hairline-dark);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-dim-dark); opacity:.55;
}

/* ============================================================
   LAYERED ECOSYSTEM STACK  (replaces the pitch)
   Four isometric surfaces — the client's own four verbs — with one
   talent path threaded through all of them. Layers separate on
   scroll and track the pointer, so the stack reads as depth.
   ============================================================ */
.stack3d{width:100%; height:auto; display:block; overflow:visible}
.stack3d .pf{fill:url(#fxPlane)}
.stack3d .pm{fill:url(#fxMesh); stroke:rgba(255,255,255,.22); stroke-width:1}
.stack3d .lyr:first-of-type .pm{stroke:rgba(21,224,190,.34)}
.stack3d .tick{stroke:rgba(255,255,255,.18); stroke-width:1}
.stack3d .lbl{
  font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.18em;
  fill:var(--text-dim-dark); text-transform:uppercase;
}
.stack3d .lbl--n{fill:rgba(255,255,255,.82); letter-spacing:.14em}
.stack3d .nd{fill:var(--blue-core)}
.stack3d .nd-a{fill:var(--aqua)}
.stack3d .nd-c{fill:rgba(147,164,188,.45)}
.stack3d .thread{stroke:url(#fxThread); stroke-width:1.4; fill:none; opacity:.75}
.stack3d .tpulse{fill:#fff; filter:drop-shadow(0 0 6px rgba(21,224,190,.9))}
.is-light .stack3d .lbl{fill:var(--text-dim-light)}
.is-light .stack3d .lbl--n{fill:var(--text-on-light)}
.is-light .stack3d .pm{stroke:rgba(7,20,39,.16)}
.is-light .stack3d .tick{stroke:rgba(7,20,39,.18)}
.is-light .figure__hud{border-top-color:var(--hairline-light); color:var(--text-dim-light)}

/* ============================================================
   STICKY PATTERNS — one per page, deliberately not shared
   ============================================================ */

/* A · Sticky column (About / Our Approach) — the heading holds
      while the steps move past it. CSS only. */
.sticky-col{position:sticky; top:140px; align-self:start}
@media (max-width:899px){ .sticky-col{position:static; top:auto} }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s24);
  padding-block:var(--s32); border-bottom:1px solid var(--hairline-dark);
  align-items:baseline; opacity:.42;
  transition:opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.step.is-active{opacity:1}
.step__n{
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  color:var(--text-dim-dark); position:relative; padding-left:var(--s16);
}
.step__n::before{
  content:""; position:absolute; left:0; top:.42em; width:5px; height:5px;
  background:var(--blue-core); transform:rotate(45deg) scale(.4); opacity:.4;
  transition:transform 420ms var(--ease-out), opacity 420ms var(--ease-out), background 420ms var(--ease-out);
}
.step.is-active .step__n::before{transform:rotate(45deg) scale(1); opacity:1; background:var(--aqua)}
.step h3{color:var(--text-on-dark)}

/* B · Horizontal pinned track (Solutions) — the section holds and
      the cards travel sideways. Falls back to a native swipe rail. */
.pinwrap{position:relative; overflow:hidden}
.track{display:flex; gap:var(--s24); will-change:transform; padding-block:var(--s16)}
.scard{
  flex:0 0 clamp(260px,78vw,380px); min-height:300px;
  display:flex; flex-direction:column; gap:var(--s16);
  padding:var(--s32); background:var(--paper-000); border:1px solid var(--hairline-light);
  transition:transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-state);
}
.scard:hover{transform:translateY(-4px); border-color:rgba(11,143,227,.42)}
.scard svg.icon{width:24px; height:24px; stroke-width:1.5; color:var(--blue-ink)}
.scard h3{color:var(--text-on-light); font-size:1.375rem}
.scard p{color:var(--text-dim-light); font-size:.9375rem; line-height:1.7}
.scard__n{
  margin-top:auto; font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-dim-light); opacity:.7;
}
.track__rail{
  height:1px; background:var(--hairline-light); margin-top:var(--s32); position:relative; overflow:hidden;
}
.track__rail i{position:absolute; inset:0 auto 0 0; width:22%; background:var(--grad-signal); transform-origin:left}
@media (max-width:899px){
  .pinwrap{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
  .pinwrap::-webkit-scrollbar{display:none}
  .track{transform:none !important; padding-inline:0 var(--gutter)}
  .scard{scroll-snap-align:start}
  .track__rail{display:none}
}

/* C · Sticky card stack (Partners) — the cards pile up as you pass. */
.stack{display:flex; flex-direction:column; gap:var(--s24)}
.stack__card{
  position:sticky; top:calc(76px + var(--s48));
  background:var(--ink-800); border:1px solid var(--hairline-dark);
  padding:var(--s48) var(--s32); display:grid; gap:var(--s24);
  grid-template-columns:1fr; align-items:start;
  transform-origin:top center;
}
@media (min-width:820px){ .stack__card{grid-template-columns:auto 5fr 7fr; gap:var(--s48); padding:var(--s48)} }
.stack__card + .stack__card{margin-top:0}
.stack__n{
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  color:var(--aqua); padding-top:.35em;
}
.stack__card h3{color:var(--text-on-dark)}
.stack__card p{color:var(--text-dim-dark)}
.stack__card svg.icon{width:24px; height:24px; stroke-width:1.5; color:var(--text-dim-dark); margin-bottom:var(--s12)}
@media (max-width:819px){ .stack__card{position:static; top:auto} }

/* ---------- Footer locator: the office, on every page ---------- */
.footer__locate{
  margin-top:var(--s48); padding-top:var(--s32); border-top:1px solid var(--hairline-dark);
  display:grid; grid-template-columns:1fr; gap:var(--s32); align-items:center;
}
@media (min-width:820px){ .footer__locate{grid-template-columns:7fr 5fr; gap:var(--s64)} }
.footer__locate .address{line-height:1.8; font-size:.9375rem}
.minimap{
  position:relative; aspect-ratio:16/7; border:1px solid var(--hairline-dark); background:var(--ink-800);
  display:flex; align-items:center; justify-content:center; text-decoration:none; overflow:hidden;
  background-image:repeating-linear-gradient(90deg,var(--grid-dark) 0 1px,transparent 1px 34px),
                   repeating-linear-gradient(180deg,var(--grid-dark) 0 1px,transparent 1px 34px);
  transition:border-color var(--dur-micro) var(--ease-state);
}
.minimap:hover,.minimap:focus-visible{border-color:rgba(21,224,190,.5)}
.minimap:focus-visible{outline:2px solid var(--aqua); outline-offset:3px}
.minimap span{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim-dark); text-align:center; margin-top:44px;
}
.minimap i{
  position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-38px 0 0 -4px;
  background:var(--aqua); transform:rotate(45deg); box-shadow:0 0 12px 3px rgba(21,224,190,.4);
}

/* Card stack on the light key (Partners) */
.is-light .stack__card{background:var(--paper-000); border-color:var(--hairline-light)}
.is-light .stack__card h3{color:var(--text-on-light)}
.is-light .stack__card p{color:var(--text-dim-light)}
.is-light .stack__card svg.icon{color:var(--blue-ink)}
.is-light .stack__n{color:var(--blue-ink)}

/* A pinned section must fit the viewport, so it runs a tighter rhythm */
.sec.is-pinned{padding-block:var(--s96)}
@media (min-width:900px){ .sec.is-pinned .scard{min-height:280px} }

/* ============================================================
   STICKY PATTERNS — one per page, deliberately not shared
   ============================================================ */

/* A · Sticky column (About / Our Approach) — the heading holds
      while the steps move past it. CSS only. */
.sticky-col{position:sticky; top:140px; align-self:start}
@media (max-width:899px){ .sticky-col{position:static; top:auto} }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s24);
  padding-block:var(--s32); border-bottom:1px solid var(--hairline-dark);
  align-items:baseline; opacity:.42;
  transition:opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.step.is-active{opacity:1}
.step__n{
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  color:var(--text-dim-dark); position:relative; padding-left:var(--s16);
}
.step__n::before{
  content:""; position:absolute; left:0; top:.42em; width:5px; height:5px;
  background:var(--blue-core); transform:rotate(45deg) scale(.4); opacity:.4;
  transition:transform 420ms var(--ease-out), opacity 420ms var(--ease-out), background 420ms var(--ease-out);
}
.step.is-active .step__n::before{transform:rotate(45deg) scale(1); opacity:1; background:var(--aqua)}
.step h3{color:var(--text-on-dark)}

/* B · Horizontal pinned track (Solutions) — the section holds and
      the cards travel sideways. Falls back to a native swipe rail. */
.pinwrap{position:relative; overflow:hidden}
.track{display:flex; gap:var(--s24); will-change:transform; padding-block:var(--s16)}
.scard{
  flex:0 0 clamp(260px,78vw,380px); min-height:300px;
  display:flex; flex-direction:column; gap:var(--s16);
  padding:var(--s32); background:var(--paper-000); border:1px solid var(--hairline-light);
  transition:transform var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-state);
}
.scard:hover{transform:translateY(-4px); border-color:rgba(11,143,227,.42)}
.scard svg.icon{width:24px; height:24px; stroke-width:1.5; color:var(--blue-ink)}
.scard h3{color:var(--text-on-light); font-size:1.375rem}
.scard p{color:var(--text-dim-light); font-size:.9375rem; line-height:1.7}
.scard__n{
  margin-top:auto; font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-dim-light); opacity:.7;
}
.track__rail{
  height:1px; background:var(--hairline-light); margin-top:var(--s32); position:relative; overflow:hidden;
}
.track__rail i{position:absolute; inset:0 auto 0 0; width:22%; background:var(--grad-signal); transform-origin:left}
@media (max-width:899px){
  .pinwrap{overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
  .pinwrap::-webkit-scrollbar{display:none}
  .track{transform:none !important; padding-inline:0 var(--gutter)}
  .scard{scroll-snap-align:start}
  .track__rail{display:none}
}

/* C · Sticky card stack (Partners) — the cards pile up as you pass. */
.stack{display:flex; flex-direction:column; gap:var(--s24)}
.stack__card{
  position:sticky; top:calc(76px + var(--s48));
  background:var(--ink-800); border:1px solid var(--hairline-dark);
  padding:var(--s48) var(--s32); display:grid; gap:var(--s24);
  grid-template-columns:1fr; align-items:start;
  transform-origin:top center;
}
@media (min-width:820px){ .stack__card{grid-template-columns:auto 5fr 7fr; gap:var(--s48); padding:var(--s48)} }
.stack__card + .stack__card{margin-top:0}
.stack__n{
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  color:var(--aqua); padding-top:.35em;
}
.stack__card h3{color:var(--text-on-dark)}
.stack__card p{color:var(--text-dim-dark)}
.stack__card svg.icon{width:24px; height:24px; stroke-width:1.5; color:var(--text-dim-dark); margin-bottom:var(--s12)}
@media (max-width:819px){ .stack__card{position:static; top:auto} }

/* ---------- Footer locator: the office, on every page ---------- */
.footer__locate{
  margin-top:var(--s48); padding-top:var(--s32); border-top:1px solid var(--hairline-dark);
  display:grid; grid-template-columns:1fr; gap:var(--s32); align-items:center;
}
@media (min-width:820px){ .footer__locate{grid-template-columns:7fr 5fr; gap:var(--s64)} }
.footer__locate .address{line-height:1.8; font-size:.9375rem}
.minimap{
  position:relative; aspect-ratio:16/7; border:1px solid var(--hairline-dark); background:var(--ink-800);
  display:flex; align-items:center; justify-content:center; text-decoration:none; overflow:hidden;
  background-image:repeating-linear-gradient(90deg,var(--grid-dark) 0 1px,transparent 1px 34px),
                   repeating-linear-gradient(180deg,var(--grid-dark) 0 1px,transparent 1px 34px);
  transition:border-color var(--dur-micro) var(--ease-state);
}
.minimap:hover,.minimap:focus-visible{border-color:rgba(21,224,190,.5)}
.minimap:focus-visible{outline:2px solid var(--aqua); outline-offset:3px}
.minimap span{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim-dark); text-align:center; margin-top:44px;
}
.minimap i{
  position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-38px 0 0 -4px;
  background:var(--aqua); transform:rotate(45deg); box-shadow:0 0 12px 3px rgba(21,224,190,.4);
}

/* Card stack on the light key (Partners) */
.is-light .stack__card{background:var(--paper-000); border-color:var(--hairline-light)}
.is-light .stack__card h3{color:var(--text-on-light)}
.is-light .stack__card p{color:var(--text-dim-light)}
.is-light .stack__card svg.icon{color:var(--blue-ink)}
.is-light .stack__n{color:var(--blue-ink)}

/* A pinned section must fit the viewport, so it runs a tighter rhythm */
.sec.is-pinned{padding-block:var(--s96)}
@media (min-width:900px){ .sec.is-pinned .scard{min-height:280px} }

/* ============================================================
   CONVERGENCE — the SPORTIX flagship
   Four disciplines arrive from four corners, fuse into one
   ecosystem, and only then does the content exist.
   ============================================================ */
.conv{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding-block:var(--s96); overflow:hidden;
  background:radial-gradient(120% 90% at 50% 50%,#0A2140 0%,var(--ink-900) 66%);
}
.conv::before{display:none}
.conv__stage{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:0}
.conv__svg{width:min(1340px,166%); height:auto; overflow:visible}
.conv__scrim{
  position:absolute; inset:0; opacity:0;
  background:radial-gradient(closest-side at 50% 50%,rgba(4,18,31,.78) 0%,rgba(4,18,31,.44) 48%,rgba(4,18,31,0) 82%);
}
.conv__content{position:relative; z-index:2; text-align:center; max-width:780px}
.conv__content .eyebrow{justify-content:center}
.conv__content .prose{max-width:60ch; margin-inline:auto}
.conv__content .audience{justify-content:center; border-top:0; padding-top:0; margin-top:var(--s48)}
.conv__cta{margin-top:var(--s48)}
.conv .flagship__word{
  font-family:var(--f-display); font-weight:600; font-stretch:118%;
  font-size:clamp(3rem,1.4rem + 6vw,7rem); line-height:.9; letter-spacing:.015em;
  margin:var(--s16) 0 var(--s32); color:var(--text-on-dark);
}

/* --- the four incoming systems --- */
.sys{opacity:0}
.sys .ln1{stroke:rgba(255,255,255,.36); stroke-width:1; fill:none}
.sys .ln2{stroke:rgba(11,143,227,.55); stroke-width:1; fill:none}
.sys .ln3{stroke:rgba(255,255,255,.07); stroke-width:1; fill:none}
.sys .sq rect{fill:rgba(11,143,227,.8)}
.sys .nc{stroke:rgba(21,224,190,.52); stroke-width:1.1; fill:none}
.sys .nn circle{fill:var(--aqua); opacity:.85}
.sys .st{stroke:rgba(11,143,227,.40); stroke-width:1; stroke-dasharray:3 9; fill:none}
.sys .bar rect{fill:rgba(21,224,190,.22)}
.sys .mx circle{fill:rgba(255,255,255,.3)}
.sys .fld{stroke:rgba(255,255,255,.16); stroke-width:1; fill:none}
.sys .vec{stroke:rgba(78,203,95,.52); stroke-width:1.1; fill:none}
.sys .pos circle{fill:var(--green); opacity:.8}
.sys-lbl{
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.2em;
  fill:var(--text-dim-dark); text-transform:uppercase;
}
.sys[data-sys="ai"] .sys-lbl,.sys[data-sys="industry"] .sys-lbl{text-anchor:end}

/* --- the fused ecosystem --- */
.eco{opacity:0}
.eco-field{stroke:rgba(255,255,255,.13); stroke-width:1; fill:none}
.eco-link{stroke:rgba(21,224,190,.44); stroke-width:1; fill:none}
.eco-spine{stroke:url(#cvThread); stroke-width:1.6; fill:none; opacity:.9}
.eco-node{fill:var(--blue-core)}
.eco-node--a{fill:var(--aqua)}
.eco-node--c{fill:rgba(147,164,188,.5)}
.eco-pulse{fill:#fff; filter:drop-shadow(0 0 7px rgba(21,224,190,.95)); opacity:0}

@media (max-width:899px){
  .conv{min-height:auto; padding-block:var(--sp-section-tall)}
  .conv__svg{width:152%}
  .conv .flagship__word{margin-top:var(--s12)}
}
@media (prefers-reduced-motion:reduce){
  .sys{display:none}
  .eco{opacity:1}
  .conv__scrim{opacity:1}
}

/* ============================================================
   LEAD STATEMENT — a single client sentence, centred and alone.
   The spine visibly runs into it in blue and leaves in aqua:
   the sentence IS the transformation, so the line changes across it.
   ============================================================ */
.lead-block{text-align:center}
.lead-block .eyebrow{justify-content:center; margin-bottom:var(--s32)}
.statement-lead{
  font-family:var(--f-display); font-weight:400; font-stretch:100%;
  font-size:clamp(1.375rem,.9rem + 1.95vw,2.375rem);
  line-height:1.35; letter-spacing:-.02em;
  max-width:26ch; margin-inline:auto; color:var(--text-on-dark);
}
.is-light .statement-lead{color:var(--text-on-light)}
.thru{position:relative; width:1px; height:clamp(48px,7vw,84px); margin:0 auto; transform:scaleY(0); transform-origin:top}
.thru--in{background:linear-gradient(180deg,transparent,var(--blue-core)); margin-bottom:var(--s48)}
.thru--out{background:linear-gradient(180deg,var(--aqua),transparent); margin-top:var(--s48); transform-origin:top}
.thru i{position:absolute; left:50%; width:7px; height:7px; margin-left:-3.5px; transform:rotate(45deg)}
.thru--in i{bottom:-3.5px; background:var(--blue-core)}
.thru--out i{top:-3.5px; background:var(--aqua); box-shadow:0 0 12px 2px rgba(21,224,190,.4)}
@media (prefers-reduced-motion:reduce){ .thru{transform:scaleY(1)} }

/* ============================================================
   THE SPORTIX CORE
   Four architectural planes in real CSS 3D. They resolve their
   rotation, converge on one axis, and lock into a laminated block.
   No node graph, no mesh, no glow bloom — the drama is precision.
   ============================================================ */
.corex{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-block:var(--s64);
  background:radial-gradient(110% 80% at 50% 40%,#0A2140 0%,var(--ink-900) 68%);
}
.corex::before{display:none}

.corex__stage{
  position:relative; z-index:1; width:100%; height:clamp(230px,27vw,340px);
  display:grid; place-items:center;
  perspective:1600px; perspective-origin:50% 46%;
}
.corex__rig{
  position:relative;
  width:clamp(276px,32vw,430px); aspect-ratio:3/2;
  transform-style:preserve-3d;
  transform:rotateX(58deg) rotateZ(-32deg);
}
.corex__plane{
  position:absolute; inset:0; transform-style:preserve-3d; opacity:0;
  background:linear-gradient(135deg,rgba(11,143,227,.07),rgba(21,224,190,.018) 62%,transparent);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
}
.corex__plane svg{width:100%; height:100%; display:block; overflow:visible}

/* the shared plane frame */
.corex__plane .pe{stroke:rgba(255,255,255,.20); stroke-width:1}
.corex__plane .cm{stroke:rgba(255,255,255,.42); stroke-width:1.4}
/* 01 identification */
.corex__plane .dot circle{fill:rgba(147,164,188,.42)}
.corex__plane .hit{fill:var(--aqua)}
.corex__plane .ret{stroke:var(--aqua); stroke-width:1.3; opacity:.85}
.corex__plane .arc{stroke:rgba(255,255,255,.34); stroke-width:1}
.corex__plane .half{stroke:rgba(255,255,255,.30); stroke-width:1; fill:none}
.corex__plane .spot{fill:rgba(255,255,255,.55)}
/* 02 evaluation */
.corex__plane .tk{stroke:rgba(255,255,255,.34); stroke-width:1}
.corex__plane .ref{stroke:rgba(255,255,255,.09); stroke-width:1}
.corex__plane .read{stroke:var(--aqua); stroke-width:2}
/* 03 management */
.corex__plane .pl{stroke:rgba(255,255,255,.22); stroke-width:1; fill:none}
.corex__plane .bay{fill:rgba(11,143,227,.13); stroke:none}
/* 04 connection */
.corex__plane .fan{stroke:rgba(21,224,190,.34); stroke-width:1}
.corex__plane .end circle{fill:rgba(147,164,188,.6)}
.corex__plane .hub{fill:var(--aqua)}

/* the core: one point, one ring. Nothing else. */
.corex__core{
  position:absolute; left:50%; top:50%; width:0; height:0;
  transform:translate(-50%,-50%) translateZ(0);
  transform-style:preserve-3d; opacity:0;
}
.corex__core i{
  position:absolute; left:-4px; top:-4px; width:8px; height:8px;
  background:var(--green); transform:rotate(45deg);
  box-shadow:0 0 16px 4px rgba(78,203,95,.55);
}
.corex__core b{
  position:absolute; left:-60px; top:-60px; width:120px; height:120px;
  border:1px solid var(--aqua); border-radius:50%; opacity:0; transform:scale(.25);
}

/* instrumentation */
.corex__layers{
  list-style:none; margin:var(--s24) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s16) var(--s32);
  font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-dim-dark);
}
.corex__layers li{display:flex; align-items:center; gap:var(--s8); opacity:.3}
.corex__layers i{width:5px; height:5px; flex:none; background:rgba(147,164,188,.5); transform:rotate(45deg)}
.corex__layers span{color:rgba(255,255,255,.45)}
.corex__delta{
  margin-top:var(--s16); font-family:var(--f-mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim-dark); opacity:0;
}
.corex__delta b{color:var(--aqua); font-weight:500; font-variant-numeric:tabular-nums}

/* content */
.corex__content{position:relative; z-index:2; text-align:center; max-width:720px; margin-top:var(--s32)}
.corex__content .eyebrow{justify-content:center}
.corex__content .prose{max-width:56ch; margin-inline:auto}
.corex__content .audience{justify-content:center; border-top:0; padding-top:0; margin-top:var(--s32)}
.corex__cta{margin-top:var(--s32)}
.corex__word{
  font-family:var(--f-display); font-weight:600; font-stretch:118%;
  font-size:clamp(2.5rem,1.3rem + 4.2vw,4.75rem); line-height:.92; letter-spacing:.015em;
  margin:var(--s12) 0 var(--s24); color:var(--text-on-dark);
}

@media (max-width:899px){
  .corex{min-height:auto; padding-block:var(--sp-section-tall)}
  .corex__stage{height:clamp(230px,52vw,300px); perspective:1100px}
  .corex__rig{width:clamp(180px,46vw,240px)}
  .corex__layers{gap:var(--s12) var(--s24)}
}
@media (prefers-reduced-motion:reduce){
  .corex__plane{opacity:1}
  .corex__core{opacity:1}
  .corex__layers li{opacity:1}
  .corex__delta{opacity:.6}
}

/* ============================================================
   LIGHT-KEY VARIANTS
   Added when the section rhythm moved to strict dark / light
   alternation. Every component that flipped key gets its pair.
   ============================================================ */

/* Gradient keyword — the dark-key pair is too pale on paper,
   so the light key runs blue-ink into a deeper teal. Large display
   text only, which clears AA at 3:1. */
.is-light .grad-word{
  background:linear-gradient(90deg,var(--blue-ink) 0%,#0B8E7C 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Values line */
.is-light .value b{color:var(--text-on-light)}

/* Sticky steps */
.is-light .step{border-bottom-color:var(--hairline-light)}
.is-light .step h3{color:var(--text-on-light)}
.is-light .step__n{color:var(--text-dim-light)}
.is-light .step__n::before{background:var(--blue-ink)}
.is-light .step.is-active .step__n::before{background:#0B8E7C}

/* Contact: details, address, map and form on paper */
.is-light .deflist{border-top-color:var(--hairline-light)}
.is-light .deflist div{border-bottom-color:var(--hairline-light)}
.is-light .deflist dt{color:var(--text-dim-light)}
.is-light .deflist dd{color:var(--text-on-light)}
.is-light .deflist dd a{color:var(--text-on-light); border-bottom-color:rgba(7,20,39,.25)}
.is-light .deflist dd a:hover{border-bottom-color:var(--blue-ink)}
.is-light .address{color:var(--text-dim-light)}
.is-light .address strong{color:var(--text-on-light)}
.is-light .map{
  background:var(--paper-000); border-color:var(--hairline-light);
  background-image:repeating-linear-gradient(90deg,var(--grid-light) 0 1px,transparent 1px 34px),
                   repeating-linear-gradient(180deg,var(--grid-light) 0 1px,transparent 1px 34px);
}
.is-light .map span{color:var(--text-dim-light)}
.is-light .map i{background:var(--blue-ink); box-shadow:0 0 14px 3px rgba(10,111,194,.28)}
.is-light .field label{color:var(--text-dim-light)}
.is-light .field input,.is-light .field select,.is-light .field textarea{
  color:var(--text-on-light); border-bottom-color:var(--hairline-light);
}
.is-light .field select option{background:var(--paper-000); color:var(--text-on-light)}
.is-light .field:focus-within label{color:var(--blue-ink)}
.is-light .form__note{color:var(--text-dim-light)}
.is-light .btn--primary{background:var(--ink-900); color:var(--paper-000)}
.is-light .btn--primary:hover svg{color:var(--green-bright)}

/* Junction dots + captions on paper */
.is-light .junction__item,.is-light .junction__cap{color:var(--text-dim-light)}

/* ============================================================
   NATIVE-WIDGET STRUCTURES
   Every element that carries client copy is a real Elementor widget,
   editable in the visual editor. The decorative nodes that used to be
   markup children are pseudo-elements, so the widgets stay clean.
   HTML widgets are decoration only — they contain no words at all.
   ============================================================ */

/* ---- Values line: container.value holding one Text widget ---- */
.values__row .value{position:relative; display:block; padding-top:var(--s32)}
.values__row .value::before{
  content:""; position:absolute; top:-3.5px; left:0;
  width:7px; height:7px; transform:rotate(45deg);
}
.values__row .value:nth-child(1)::before{background:var(--blue-core)}
.values__row .value:nth-child(2)::before{background:#0FBBD0}
.values__row .value:nth-child(3)::before{background:var(--aqua)}
.values__row .value:nth-child(4)::before{background:var(--green); box-shadow:0 0 12px 2px rgba(78,203,95,.4)}
.values__row .value b,.values__row .value strong,
.values__row .value .elementor-heading-title{
  display:block; margin-top:0;
  font-family:var(--f-display); font-weight:600; font-stretch:106%;
  font-size:clamp(1.25rem,1rem + 1vw,1.75rem); letter-spacing:-.02em; line-height:1.1;
  color:var(--text-on-dark);
}
.is-light .values__row .value b,.is-light .values__row .value strong,
.is-light .values__row .value .elementor-heading-title{color:var(--text-on-light)}

/* ---- Audience: an Elementor Icon List widget ---- */
.audience .elementor-icon-list-items{
  display:flex; flex-wrap:wrap; gap:var(--s12) var(--s24); margin:0; padding:0;
}
.audience .elementor-icon-list-icon{display:none}
.audience .elementor-icon-list-item{
  position:relative; padding-left:14px; margin:0;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dim-dark);
}
.audience .elementor-icon-list-item::before{
  content:""; position:absolute; left:0; top:.6em;
  width:4px; height:4px; background:var(--aqua); transform:rotate(45deg);
}
.corex__content .audience .elementor-icon-list-items{justify-content:center}

/* ---- SPORTIX layer labels: four native Text widgets ---- */
.corex__layer{
  display:flex; align-items:center; gap:var(--s8); opacity:.3;
  font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-dim-dark);
}
.corex__layer-node{
  width:5px; height:5px; flex:none; transform:rotate(45deg);
  background:rgba(147,164,188,.5);
}
.corex__layer b,.corex__layer strong{color:rgba(255,255,255,.45); font-weight:500}

/* ---- Contact details: native containers, not a <dl> ---- */
.deflist__row{
  display:flex; flex-wrap:wrap; gap:var(--s8) var(--s24); justify-content:space-between;
  padding-block:var(--s16); border-bottom:1px solid var(--hairline-dark);
}
.is-light .deflist__row{border-bottom-color:var(--hairline-light)}
.deflist__row:first-child{border-top:1px solid var(--hairline-dark)}
.is-light .deflist__row:first-child{border-top-color:var(--hairline-light)}
.deflist__k{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dim-dark);
}
.is-light .deflist__k{color:var(--text-dim-light)}
.deflist__v{color:var(--text-on-dark)}
.is-light .deflist__v{color:var(--text-on-light)}
.deflist__v a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(7,20,39,.25)}
.deflist__v a:hover{border-bottom-color:var(--blue-ink)}

/* ---- Google Maps widget wearing the map frame ---- */
.map .elementor-widget-container,
.map iframe{width:100%; height:100%; border:0; display:block}
.map:has(iframe){background-image:none; background:transparent}

/* ============================================================
   ASTRA NATIVE HEADER
   Works whether the header is built in Astra's Header Builder or
   in Elementor via HFE. Same design either way.
   ============================================================ */
header#masthead.site-header{
  position:fixed; top:0; left:0; right:0; z-index:999;
  background-color:transparent;
  border-bottom:1px solid transparent;
  transition:background-color 220ms cubic-bezier(.65,0,.35,1),
             border-color 220ms cubic-bezier(.65,0,.35,1),
             backdrop-filter 220ms cubic-bezier(.65,0,.35,1);
}
header#masthead.gtg-stuck{
  background-color:rgba(4,18,31,.78);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.09);
}
/* Astra paints backgrounds and borders on several inner wrappers */
#masthead .ast-main-header-wrap,
#masthead .ast-primary-header-bar,
#masthead .main-header-bar,
#masthead .site-primary-header-wrap,
#masthead #ast-desktop-header,
#masthead #ast-mobile-header{background:transparent!important; border:0!important}

/* the bar height — identical in both states, which is what stops the jump */
#masthead .ast-primary-header-bar,
#masthead .main-header-bar{min-height:76px!important}
#masthead .site-primary-header-wrap{padding-block:0!important}
#masthead .ast-container{max-width:1280px; padding-inline:48px}
@media (max-width:921px){ #masthead .ast-container{padding-inline:32px} }
@media (max-width:544px){ #masthead .ast-container{padding-inline:24px} }

/* logo, and hide the site-title text — the mark carries the name */
#masthead .site-logo-img img.custom-logo{width:88px!important; height:auto!important}
#masthead .ast-site-title-wrap{display:none!important}
@media (max-width:921px){ #masthead .site-logo-img img.custom-logo{width:80px!important} }
@media (max-width:544px){ #masthead .site-logo-img img.custom-logo{width:76px!important} }

/* primary menu */
#masthead .main-header-menu > .menu-item > .menu-link{
  font-family:var(--f-mono)!important; font-size:11px!important; font-weight:500!important;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim-dark)!important;
  padding:8px 16px!important; position:relative; line-height:1.2;
  transition:color 220ms cubic-bezier(.65,0,.35,1);
}
#masthead .main-header-menu > .menu-item > .menu-link:hover,
#masthead .main-header-menu > .current-menu-item > .menu-link,
#masthead .main-header-menu > .current-menu-ancestor > .menu-link{
  color:#fff!important; background:transparent!important;
}
#masthead .main-header-menu > .menu-item > .menu-link::after{
  content:""; position:absolute; left:16px; right:16px; bottom:0; height:1px;
  background:var(--grad-signal); transform:scaleX(0); transform-origin:left;
  transition:transform 220ms cubic-bezier(.22,1,.36,1);
}
#masthead .main-header-menu > .menu-item > .menu-link:hover::after,
#masthead .main-header-menu > .menu-item > .menu-link:focus-visible::after,
#masthead .main-header-menu > .current-menu-item > .menu-link::after,
#masthead .main-header-menu > .current-menu-ancestor > .menu-link::after{transform:scaleX(1)}
#masthead .main-header-menu > .menu-item > .menu-link:focus-visible{
  outline:2px solid var(--aqua); outline-offset:2px;
}

/* header button */
#masthead .ast-custom-button{
  font-family:var(--f-mono)!important; font-size:11px!important; font-weight:500!important;
  letter-spacing:.12em!important; text-transform:uppercase!important;
  color:#fff!important; background:transparent!important;
  border:1px solid var(--hairline-dark)!important; border-radius:0!important;
  padding:16px 28px!important;
  transition:transform 220ms cubic-bezier(.22,1,.36,1),
             background-color 220ms cubic-bezier(.65,0,.35,1),
             border-color 220ms cubic-bezier(.65,0,.35,1);
}
#masthead .ast-custom-button:hover{
  transform:translateY(-2px);
  border-color:rgba(21,224,190,.55)!important;
  background:rgba(255,255,255,.04)!important;
}
@media (max-width:921px){ #masthead .ast-builder-button-wrap{display:none!important} }

/* mobile toggle + panel */
#masthead .menu-toggle,
#masthead .ast-mobile-menu-trigger-minimal,
#masthead .ast-mobile-menu-trigger-fill{background:transparent!important; border:0!important; color:#fff!important}
#masthead .menu-toggle .ast-mobile-svg{fill:#fff; width:22px; height:22px}
#masthead .main-header-bar-navigation{
  background:rgba(4,18,31,.98)!important;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}
#masthead .main-header-bar-navigation .menu-link{
  font-family:var(--f-display)!important; font-size:28px!important; font-weight:600!important;
  letter-spacing:-.03em!important; text-transform:none!important; color:#fff!important;
  padding:14px 24px!important; border-bottom:1px solid var(--hairline-dark)!important;
}
#masthead .main-header-bar-navigation .menu-link::after{display:none}

/* ============================================================
   ELEMENTOR SECTIONS / COLUMNS BRIDGE
   The build uses classic Sections + Inner Sections, not Flexbox
   Containers. These rules let the layout classes work on that markup.
   ============================================================ */
.sec > .elementor-container{max-width:1280px}

/* .split must reproduce the prototype's `grid-template-columns:4fr 8fr` with a
   64px gap. Elementor columns are flex items sized in %, so a `gap` on the flex
   container would overflow by exactly the gap. Drive the container as a grid
   instead and let the columns fill the tracks — then the column % set in the
   editor no longer matters, and the second column starts where the reference
   puts it. Single column below 900px, matching the prototype's breakpoint
   (Elementor would otherwise keep them side by side down to 767px). */
.split > .elementor-container{align-items:flex-start}

/* `.split{display:grid}` above (the prototype rule) also matches the Elementor
   inner section, whose only child is .elementor-container — the container ends
   up inside the first 4fr track and everything within it is squeezed. Keep the
   section a plain block and put the grid on the container. */
.split.elementor-section{display:block!important}

/* Elementor's default column gap adds 10px of inline padding to the top-level
   column wrap, insetting every section by 10px against the reference. The
   container max-width already owns the gutter. Top-level columns only —
   .grid-cells__col keeps its padding for the cell borders. */
.sec > .elementor-container > .elementor-column > .elementor-widget-wrap{
  padding-inline:0!important}

.split > .elementor-container{
  display:grid!important; grid-template-columns:1fr; gap:var(--s48);
  align-items:start;
}
@media (min-width:900px){
  .split > .elementor-container{grid-template-columns:4fr 8fr; gap:var(--s64)}
}
.split > .elementor-container > .elementor-column{width:auto!important; max-width:none}
.split > .elementor-container > .elementor-column > .elementor-widget-wrap{
  padding-inline:0!important}
.grid-cells > .elementor-container{max-width:1280px}
.grid-cells__col > .elementor-widget-wrap{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--hairline-light);
}
@media (max-width:1024px){ .grid-cells__col > .elementor-widget-wrap{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .grid-cells__col > .elementor-widget-wrap{grid-template-columns:1fr} }
.grid-cells__col > .elementor-widget-wrap > .cell{
  margin:0; padding:var(--s32);
  border-bottom:1px solid var(--hairline-light);
  border-right:1px solid var(--hairline-light);
  display:flex; flex-direction:column; gap:var(--s16); min-height:210px;
}
.btn-row > .elementor-container{justify-content:flex-start; gap:var(--s16)}
.btn-row .elementor-column{width:auto!important}
.corex__layers > .elementor-container{justify-content:center; gap:var(--s32); flex-wrap:wrap}
.corex__layers .elementor-column{width:auto!important}
.values__row > .elementor-container{gap:var(--s16)}
.cta > .elementor-container{text-align:center}
.cta .btn-row > .elementor-container{justify-content:center}


/* ============================================================
   ELEMENTOR WIDGET NORMALISATION  (added after live testing)
   ============================================================ */
.elementor-widget-heading h1.elementor-heading-title{
  font-family:var(--f-display)!important;font-weight:600!important;
  font-size:var(--t-h1)!important;line-height:.96!important;
  letter-spacing:-.035em!important;font-stretch:112%!important;color:var(--text-on-dark)!important;
}
.elementor-widget-heading h2.elementor-heading-title{
  font-family:var(--f-display)!important;font-weight:600!important;
  font-size:var(--t-h2)!important;line-height:1.04!important;
  letter-spacing:-.03em!important;font-stretch:112%!important;color:var(--text-on-dark)!important;
}
.elementor-widget-heading h3.elementor-heading-title{
  font-family:var(--f-display)!important;font-weight:600!important;
  font-size:var(--t-h3)!important;line-height:1.2!important;
  letter-spacing:-.02em!important;font-stretch:100%!important;color:var(--text-on-dark)!important;
}
.is-light .elementor-widget-heading h1.elementor-heading-title,
.is-light .elementor-widget-heading h2.elementor-heading-title,
.is-light .elementor-widget-heading h3.elementor-heading-title{color:var(--text-on-light)!important}

/* our layout classes land on Elementor WRAPPERS — strip wrapper chrome */
.elementor-widget-button.btn,
.elementor-widget-button.btn--ghost,
.elementor-widget-button.btn--primary{border:0!important;background:none!important;padding:0!important;box-shadow:none!important}
.elementor-widget-button{width:auto!important;display:inline-block!important;margin:0 16px 0 0!important}
.elementor-button{
  display:inline-flex!important;align-items:center!important;width:auto!important;line-height:1!important;
  font-family:var(--f-mono)!important;font-size:11px!important;font-weight:500!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
  padding:16px 28px!important;border-radius:0!important;box-shadow:none!important;
  transition:transform 220ms var(--ease-out),background-color 220ms var(--ease-state),border-color 220ms var(--ease-state)!important;
}
.btn--primary .elementor-button{background:var(--paper-000)!important;color:var(--ink-900)!important;border:0!important}
.btn--ghost .elementor-button{background:transparent!important;color:var(--text-on-dark)!important;border:1px solid var(--hairline-dark)!important}
.is-light .btn--primary .elementor-button{background:var(--ink-900)!important;color:var(--paper-000)!important}
.is-light .btn--ghost .elementor-button{color:var(--text-on-light)!important;border-color:var(--hairline-light)!important}
.btn--primary .elementor-button:hover,.btn--ghost .elementor-button:hover{transform:translateY(-2px)}
.btn--ghost .elementor-button:hover{border-color:rgba(21,224,190,.55)!important;background:rgba(255,255,255,.04)!important}

/* Eyebrow without relying on an empty span (Elementor strips them).
   Rule and node are both flex items ordered ahead of the text, so `gap` spaces
   all three and the group centres correctly. Do NOT position the node
   absolutely — it lands wrong on any centred eyebrow and crowds the first
   letter on left-aligned ones. Elementor emits a bare text node here, which is
   an anonymous flex item at order:0, so negative orders sequence in front. */
.eyebrow{display:inline-flex;align-items:center;gap:var(--s12)}
.eyebrow::before{content:"";order:-2;flex:none;width:28px;height:1px;background:currentColor;opacity:.5}
.eyebrow::after{content:"";order:-1;flex:none;width:5px;height:5px;background:var(--aqua);transform:rotate(45deg)}
.eyebrow .eyebrow__node{display:none}

/* absolutely-positioned decoration must escape Elementor's wrappers */
/* .corex must NOT be !important — ScrollTrigger pins it with an inline
   position:fixed, and a stylesheet !important overrides inline, which kills the
   pin and lets the section scroll away while the animation is still scrubbing. */
.hero{position:relative!important}
.corex{position:relative}
.hero > .elementor-container,.hero .elementor-column,.hero .elementor-widget-wrap,.hero .elementor-widget-html,
.corex > .elementor-container,.corex .elementor-column,.corex .elementor-widget-wrap,.corex .elementor-widget-html{position:static!important}
.hero__content,.corex__content{position:relative!important;z-index:2}
.hero .hero__canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:0}

/* centred lead statement on an Elementor column */
.lead-block{text-align:center}
.lead-block .eyebrow{justify-content:center}
/* The eyebrow is excluded — it must shrink-wrap so the rule/node/text group
   centres as a unit rather than the text centring inside a full-width box. */
.lead-block .elementor-widget:not(.eyebrow){width:100%!important}
.lead-block .eyebrow{width:auto!important;margin-inline:auto!important}
.lead-block .statement-lead{margin-inline:auto}
.thru{margin-inline:auto!important}

/* HFE adds .ehf-header to BODY as well as the header element — never let body go fixed */
body.ehf-header{position:static!important;z-index:auto!important}