/* ==========================================================================
   VERNEX — base.css
   Reset · design tokens · typography · layout utilities
   All colour, spacing and radius values live here as custom properties.
   Never hardcode a colour anywhere else.
   ========================================================================== */

:root{
  /* base */
  --vx-black:        #04090A;   /* page background */
  --vx-bg-2:         #071314;   /* alternating section background */
  --vx-surface:      #0C1B1C;   /* cards */
  --vx-surface-2:    #112626;   /* raised cards / hover */
  --vx-line:         rgba(1,193,163,0.14);  /* hairline borders */

  /* brand teal (from the V mark) */
  --vx-teal:         #01C1A3;   /* primary */
  --vx-teal-bright:  #00E5C0;   /* highlight / hover */
  --vx-glow:         #68FAE6;   /* glow, light edges */
  --vx-teal-deep:    #018369;   /* gradient dark stop */

  /* metal (from the wordmark) */
  --vx-silver:       #D7DDE0;
  --vx-silver-dim:   #9AA7AB;

  /* text */
  --vx-text:         #E8F1F0;
  --vx-muted:        #8FA3A2;

  /* signature gradients */
  --vx-grad-metal:   linear-gradient(135deg,#F2F6F7 0%,#B9C4C8 38%,#FFFFFF 52%,#8E9DA2 70%,#D7DDE0 100%);
  --vx-grad-teal:    linear-gradient(135deg,#68FAE6 0%,#00E5C0 35%,#01C1A3 65%,#018369 100%);

  /* glass */
  --vx-glass-bg:     linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  --vx-glass-border: rgba(255,255,255,0.12);
  --vx-glass-blur:   22px;
  --vx-glass-shadow:
      0 8px 32px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.22),
      inset 0 -1px 0 rgba(1,193,163,0.14);

  /* type */
  --vx-font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --vx-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --vx-font-mono:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* radii */
  --vx-r-sm: 12px;
  --vx-r-md: 18px;
  --vx-r-lg: 22px;   /* iOS-ish continuous curve */
  --vx-r-xl: 30px;
  --vx-r-pill: 999px;

  /* spacing / rhythm */
  --vx-section-y: clamp(4.5rem, 9vw, 9rem);
  --vx-gap:       clamp(1rem, 1.6vw, 1.75rem);
  --vx-wrap:      1240px;
  --vx-nav-h:     84px;

  /* easing */
  --vx-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --vx-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* noise overlay (inline SVG, no extra request) */
  --vx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
/* class rules like .wa-float{display:grid} would otherwise beat the UA's
   [hidden]{display:none}, so anything hidden stays hidden. */
[hidden]{ display:none !important; }
*{ margin:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  color-scheme:dark;
}
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  background:var(--vx-black);
  color:var(--vx-text);
  font-family:var(--vx-font-body);
  font-size:clamp(1rem, 1.05vw, 1.125rem);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
table{ border-collapse:collapse; }
::selection{ background:var(--vx-teal); color:var(--vx-black); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--vx-font-display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-0.03em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.75rem, 7vw, 6.5rem); }
h2{ font-size:clamp(2rem, 4.4vw, 3.75rem); }
h3{ font-size:clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing:-0.02em; }
h4{ font-size:clamp(1.05rem, 1.3vw, 1.2rem); font-weight:600; letter-spacing:-0.01em; }
p{ text-wrap:pretty; }

.lead{
  font-size:clamp(1.05rem, 1.35vw, 1.3rem);
  color:var(--vx-muted);
  line-height:1.65;
}
.measure-sm{ max-width:48ch; }

/* brushed-metal headline fill — echoes the wordmark. Use sparingly. */
.metal{
  background:var(--vx-grad-metal);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
/* keeps the letterforms from disappearing if background-clip is unsupported */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .metal,.teal-text{ color:var(--vx-silver); -webkit-text-fill-color:var(--vx-silver); }
}
.teal-text{
  background:var(--vx-grad-teal);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* mono eyebrow — "// 02 — SERVICES" */
.eyebrow{
  font-family:var(--vx-font-mono);
  font-weight:500;
  font-size:clamp(0.68rem, 0.78vw, 0.78rem);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--vx-teal);
  display:inline-flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{
  content:"";
  width:clamp(18px,3vw,34px);
  height:1px;
  background:linear-gradient(90deg, var(--vx-teal), transparent);
}

/* --------------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------------- */
.wrap{ width:min(var(--vx-wrap), 92vw); margin-inline:auto; }
.section{ padding-block:var(--vx-section-y); position:relative; overflow-x:clip; }
/* overflow-x:clip contains the decorative glow blobs without creating a scroll
   container, so position:sticky inside a section keeps working. */
.section--alt{ background:var(--vx-bg-2); }
.section--tight{ padding-block:clamp(3rem,5vw,5rem); }

.section-head{
  display:grid;
  gap:1.1rem;
  max-width:70ch;
  margin-bottom:clamp(2.5rem,4vw,4rem);
}
.section-head--split{
  max-width:none;
  grid-template-columns:minmax(0,1fr);
  align-items:end;
}
@media (min-width:900px){
  .section-head--split{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:2rem 3rem; }
  .section-head--split .section-head__aside{ grid-column:2; grid-row:1 / span 3; align-self:center; }
}

.stack{ display:grid; gap:var(--vx-gap); }
.mt-lg{ margin-top:clamp(2rem,3.5vw,3.25rem); }

/* accessibility helpers */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:-100px; left:50%; transform:translateX(-50%);
  z-index:1200; padding:0.85rem 1.4rem; border-radius:0 0 var(--vx-r-md) var(--vx-r-md);
  background:var(--vx-teal); color:var(--vx-black); font-weight:600;
  transition:top .25s var(--vx-ease-out);
}
.skip-link:focus{ top:0; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--vx-teal-bright);
  outline-offset:3px;
  border-radius:4px;
}

/* ambient glow blobs used behind sections */
.glow{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(90px); opacity:.5;
}
.glow--teal{ background:radial-gradient(circle, var(--vx-teal-deep) 0%, transparent 70%); }
.grain{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:var(--vx-noise);
  opacity:.28; mix-blend-mode:overlay;
}
.section > .wrap, .section > .wrap-wide{ position:relative; z-index:2; }

/* scroll-reveal starting state — JS clears it, CSS fallback shows content if JS never runs */
.js [data-reveal]{ opacity:0; }
.js [data-reveal].is-in{ opacity:1; }

/* --------------------------------------------------------------------------
   Reduced motion — non-negotiable
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.15s!important;
    scroll-behavior:auto!important;
  }
  .js [data-reveal]{ opacity:1!important; transform:none!important; }
}