/* ==========================================================================
   OxNeural, Phase 2
   Tokens, layout, components, motion. No framework, no build step.
   Human first, technology second: accents are punctuation, never surface.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:         #05070d;
  --surface:    #0a0e1a;
  --surface-2:  #0f1524;
  --surface-3:  #141c2e;
  --border:     #1b2438;
  --border-lit: #26344e;

  /* Type */
  --text:      #e8edf5;
  --text-soft: #b6c2d4;
  --muted:     #8a97ac;
  --faint:     #78869c;

  /* Brand */
  --cyan:   #22d3ee;
  --blue:   #3b82f6;
  --violet: #a855f7;
  --amber:  #f0b429;
  --green:  #22c55e;

  --font:      "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --max: 1200px;
  --gut: 24px;
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;  --r-pill: 30px;

  /* Motion */
  --t1: 150ms; --t2: 200ms; --t3: 250ms; --t4: 300ms; --t5: 500ms; --t-amb: 1500ms;
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-in:   cubic-bezier(.16, .84, .3, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.nav-open, body.modal-open { overflow: hidden; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.14; margin: 0; letter-spacing: -.02em; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
::selection { background: rgba(34,211,238,.25); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--r-sm); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--cyan); color: #04121a; padding: 12px 20px;
  font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.page-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(148,180,220,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,180,220,.028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.3) 45%, rgba(0,0,0,.14));
  mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.3) 45%, rgba(0,0,0,.14));
  opacity: 0; transition: opacity var(--t-amb) var(--ease);
}
body.ready .page-grid { opacity: 1; }

/* --- layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
section { position: relative; z-index: 1; padding: 96px 0; }
section + section { border-top: 1px solid var(--border); }

.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cyan); margin: 0 0 18px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }

.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 16px; text-wrap: balance; }
.section-head p { color: var(--muted); font-size: 17px; margin: 0; max-width: 62ch; text-wrap: pretty; }
.lede { font-size: 18px; color: var(--text-soft); text-wrap: pretty; }
.strip-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); margin: 0 0 16px; }

.ext svg, .work-cta svg { width: 14px; height: 14px; }

/* --- header -------------------------------------------------------------- */
.site-header {
  position: fixed; left: 0; right: 0; z-index: 200; top: env(safe-area-inset-top, 0px);
  background: rgba(5,7,13,.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t4) var(--ease), background var(--t4) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border); background: rgba(5,7,13,.94); }
.scroll-rail { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.scroll-rail span { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--blue) 55%, var(--violet)); }

.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { width: 34px; height: 34px; object-fit: contain; transition: transform var(--t5) var(--ease-out); }
.brand:hover .brand-mark { transform: rotate(-5deg) scale(1.04); }
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: .06em; }

.nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
/* The primary CTA lives outside the list on desktop, so the drawer carries its
   own copy. Without it there is no route to Contact on a phone. */
.nav-cta-m { display: none; }
.nav-links a {
  position: relative; display: block; padding: 8px 14px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; color: var(--muted);
  transition: color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1px;
  background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t4) var(--ease-out);
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a.is-active { color: var(--cyan); }
.nav-links a.is-active::after { transform: scaleX(1); }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--border);
  background: var(--surface-2); border-radius: var(--r-sm); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 17px; height: 1.5px; background: var(--text); position: relative; transition: background var(--t1); }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--text);
  transition: transform var(--t4) var(--ease-out);
}
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--r-md); font-weight: 600; font-size: 15.5px;
  font-family: inherit; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--t4) var(--ease-out), box-shadow var(--t4) var(--ease-out),
              background var(--t2) var(--ease), border-color var(--t2) var(--ease),
              background-position var(--t5) var(--ease-out);
}
.btn svg { width: 16px; height: 16px; transition: transform var(--t4) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn-primary {
  color: #04121a;
  background: linear-gradient(110deg, var(--cyan) 0%, #38bdf8 46%, var(--blue) 100%);
  background-size: 190% 100%; background-position: 0% 50%;
  box-shadow: 0 8px 24px -16px rgba(34,211,238,.9);
}
.btn-primary:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(34,211,238,.6); }
.btn-ghost { border-color: var(--border-lit); color: var(--text); }
.btn-ghost:hover { border-color: var(--cyan); background: rgba(34,211,238,.07); transform: translateY(-2px); }
.btn-wa { border-color: rgba(37,211,102,.4); color: #7ee6a6; background: rgba(37,211,102,.08); }
.btn-wa:hover { border-color: #25d366; background: rgba(37,211,102,.15); transform: translateY(-2px); }
.btn-wa svg { width: 18px; height: 18px; }
.btn-wa:hover svg { transform: none; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 20px;
  font-size: 14.5px; font-weight: 600; color: var(--cyan);
  transition: gap var(--t4) var(--ease-out), color var(--t2) var(--ease);
}
.arrow-link svg { width: 15px; height: 15px; }
.arrow-link:hover { gap: 14px; color: #5fe6fb; }

.ext::after {
  content: ""; display: inline-block; width: .6em; height: .6em; margin-left: .36em;
  background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 10.8 10.8 5.2M6.4 5.2h4.4v4.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 10.8 10.8 5.2M6.4 5.2h4.4v4.4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: opacity var(--t2) var(--ease), transform var(--t4) var(--ease-out);
}
.ext:hover::after { opacity: 1; transform: translate(1px, -1px); }

/* --- hero ---------------------------------------------------------------- */
.hero { min-height: min(94svh, 860px); display: flex; align-items: center; padding: 128px 0 72px; border-top: 0; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,21,36,.55) 0%, transparent 45%, var(--bg) 100%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-inner { display: grid; grid-template-columns: 1.12fr .88fr; gap: 48px; align-items: center; }

.hero-eyebrow {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 22px;
}
.hero h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.035em; margin-bottom: 22px; text-wrap: balance; }
.grad { background: linear-gradient(100deg, var(--cyan) 0%, var(--blue) 52%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: clamp(17px, 1.9vw, 20px); color: var(--text-soft); max-width: 50ch; margin-bottom: 34px; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; list-style: none; margin: 0; padding: 26px 0 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.hero-meta li { display: inline-flex; align-items: center; }
.hero-meta li:not(:last-child)::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--border-lit); margin: 0 16px; }

.hero-art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero-mark { order: -1; width: 72px; height: 72px; opacity: .95; }

.console {
  width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border-lit);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(0,0,0,.9);
}
.console-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-lit); }
.console-bar p { margin: 0 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.console-body { padding: 16px; }
.crow {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: 8px; background: #070a12;
  font-family: var(--font-mono); font-size: 11.5px;
  opacity: .35; transform: translateY(5px);
  transition: opacity var(--t5) var(--ease-out), transform var(--t5) var(--ease-out), border-color var(--t5) var(--ease);
}
.crow.is-on { opacity: 1; transform: none; border-color: var(--border-lit); }
.ck { color: var(--cyan); }
.cv { color: var(--text-soft); }
.cs { padding: 2px 8px; border-radius: 5px; font-size: 10.5px; }
.cs.ok { color: #7dd3a0; background: rgba(34,197,94,.12); }
.cs.hold { color: var(--amber); background: rgba(240,180,41,.12); }
.cbar { height: 2px; border-radius: 2px; background: var(--border); overflow: hidden; margin: 14px 0 10px; }
.cbar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.console.is-done .cbar i { transform: scaleX(1); transition: transform var(--t-amb) var(--ease); }
.cnote { margin: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); letter-spacing: .06em; }

/* --- process ------------------------------------------------------------- */
.track { position: relative; margin-bottom: 36px; }
.track-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border); overflow: hidden; }
.track-line i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.js .track.running .track-line i { transform: scaleX(1); transition: transform var(--t-amb) var(--ease) 180ms; }
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; background: var(--border); }
.step { position: relative; padding: 28px 22px; background: var(--surface); transition: background var(--t4) var(--ease); }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%; }
.js .step.is-on::before { transform: scaleX(1); transition: transform var(--t5) var(--ease-out); }
.js .step { opacity: .42; transition: opacity var(--t5) var(--ease), background var(--t4) var(--ease); }
.js .step.is-on { opacity: 1; }
.step:hover { background: var(--surface-2); }
.step-n { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--cyan); letter-spacing: .14em; margin-bottom: 12px; }
.step h3 { font-size: 17px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--muted); margin: 0; }
.principle { padding: 24px 28px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border);
  border-left: 2px solid var(--cyan); color: var(--text-soft); font-size: 16px; margin: 0; max-width: 820px; text-wrap: pretty; }
.principle a { color: var(--cyan); border-bottom: 1px solid rgba(34,211,238,.3); }

/* --- contact ------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr .72fr; gap: 48px; align-items: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 500; color: var(--text-soft); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; font-family: inherit; font-size: 15px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text);
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.field textarea { resize: vertical; min-height: 124px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--cyan); background: var(--surface-3); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field .err { display: none; font-size: 13px; color: #f87171; margin-top: 6px; }
.field.invalid input, .field.invalid textarea { border-color: #f87171; }
.field.invalid .err { display: block; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.form-note { font-size: 13px; color: var(--faint); margin-top: 14px; line-height: 1.55; }
.form-status { margin-top: 14px; font-size: 14px; color: var(--cyan); display: none; }
.form-status.show { display: block; }
html:not(.js) #enquiry .form-actions { display: none; }
.facts { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin: 0; }
.fact { background: var(--surface); padding: 20px 24px; }
.fact dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.fact dd { margin: 0; font-size: 15px; color: var(--text); }
.fact dd a { color: var(--cyan); border-bottom: 1px solid rgba(34,211,238,.3); }

/* --- email chooser ------------------------------------------------------- */
/* A class selector beats the UA rule for [hidden], so display:none must be
   restated. Without this the overlay stays in the layer above the page and
   silently swallows every click on the site. */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; }
.modal-overlay { position: absolute; inset: 0; background: rgba(3,5,10,.78); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--t4) var(--ease); }
.modal.is-open .modal-overlay { opacity: 1; }
.modal-card {
  position: relative; width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-lit); border-radius: var(--r-xl);
  padding: 34px 34px 28px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.95);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity var(--t4) var(--ease-out), transform var(--t4) var(--ease-out);
}
.modal.is-open .modal-card { opacity: 1; transform: none; }
.modal-card h2 { font-size: 25px; margin-bottom: 10px; }
.modal-card > p { color: var(--muted); font-size: 14.5px; margin: 0 0 22px; text-wrap: pretty; }
.modal-x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--r-sm); color: var(--muted); cursor: pointer;
  transition: color var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.modal-x svg { width: 15px; height: 15px; }
.modal-x:hover { color: var(--text); border-color: var(--border-lit); }

.mail-grid { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.mail-btn {
  width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center;
  gap: 4px 14px; padding: 13px 16px; cursor: pointer; text-align: left;
  font-family: inherit; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease), transform var(--t3) var(--ease-out);
}
.mail-btn:hover { border-color: var(--cyan); background: var(--surface-3); transform: translateX(3px); }
.mail-ic { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; color: var(--text-soft); }
.mail-ic svg { width: 24px; height: 24px; }
.mail-name { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 600; color: var(--text); }
.mail-hint { grid-column: 2; grid-row: 2; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.mail-go { grid-column: 3; grid-row: 1 / 3; color: var(--faint); transition: transform var(--t3) var(--ease-out), color var(--t2) var(--ease); }
.mail-go svg { width: 16px; height: 16px; }
.mail-btn:hover .mail-go { transform: translateX(3px); color: var(--cyan); }
.mail-foot { margin: 0; font-size: 13px; color: var(--faint); text-align: center; padding-top: 16px; border-top: 1px solid var(--border); }
.mail-foot strong { color: var(--text-soft); font-weight: 500; }

/* --- footer -------------------------------------------------------------- */
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 56px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; }
.footer-brand .brand-mark { width: 40px; height: 40px; }
.footer-brand p { grid-column: 1 / -1; color: var(--muted); font-size: 14.5px; max-width: 300px; margin: 8px 0 0; }
.footer-col h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: 15px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { font-size: 14.5px; color: var(--muted); transition: color var(--t2) var(--ease); }
.footer-col a:hover { color: var(--cyan); }

.connect { padding: 28px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.footer-col .social { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 10px; }
.soc { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  transition: color var(--t2) var(--ease), border-color var(--t2) var(--ease), transform var(--t3) var(--ease-out), background var(--t2) var(--ease); }
.soc svg { width: 19px; height: 19px; }
.soc:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(34,211,238,.08); transform: translateY(-3px); }
.soc::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(3px);
  padding: 4px 9px; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--border-lit);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--t2) var(--ease), transform var(--t3) var(--ease-out);
}
.soc:hover::after, .soc:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.footer-bottom p { margin: 0; font-size: 13px; color: var(--faint); }
.footer-slogan { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; }

/* ==========================================================================
   MOTION
   Four entrance behaviours, gated on .js so the page renders fully without it.
   ========================================================================== */
.js .intro { opacity: 0; transform: translateY(18px); }
.js body.ready .intro { opacity: 1; transform: none;
  transition: opacity var(--t5) var(--ease-in) var(--d, 0ms), transform var(--t5) var(--ease-in) var(--d, 0ms); }
.dly-60 { --d: 60ms; } .dly-100 { --d: 100ms; } .dly-180 { --d: 180ms; } .dly-300 { --d: 300ms; }
.dly-400 { --d: 400ms; } .dly-520 { --d: 520ms; }

.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity var(--t5) var(--ease-out), transform var(--t5) var(--ease-out); }

.js .reveal-blur { opacity: 0; filter: blur(9px); transform: translateY(6px); }
.js .reveal-blur.in { opacity: 1; filter: blur(0); transform: none;
  transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), transform 900ms var(--ease-out); }

/* Work cards wipe open, then settle. */
.js .mask-in { clip-path: inset(0 0 100% 0); opacity: 0; transform: scale(.985); }
.js .mask-in.in { clip-path: inset(0 0 0 0); opacity: 1; transform: none;
  transition: clip-path 780ms var(--ease-out), opacity 420ms var(--ease), transform 780ms var(--ease-out); }

.js .reveal .stagger-item { opacity: 0; transform: translateY(10px); }
.js .reveal.in .stagger-item { opacity: 1; transform: none;
  transition: opacity 480ms var(--ease-out) var(--d, 0ms), transform 480ms var(--ease-out) var(--d, 0ms); }

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .intro, .js .reveal, .js .reveal-blur, .js .reveal .stagger-item, .js .stage, .js .step, .crow {
    opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .mask-in { clip-path: none !important; opacity: 1 !important; transform: none !important; }
  .js .reveal-line > span { transform: none !important; }
  .js .seam::before { transform: scaleY(1) !important; }
  .js .seam-node { transform: rotate(45deg) scale(1) !important; }
  .js .track-line i, .js .pathway::after, .console .cbar i { transform: scaleX(1) !important; }
  .path-dot { background: var(--cyan) !important; border-color: var(--cyan) !important; }
  .page-grid { opacity: 1 !important; }
  .modal-card, .modal-overlay { opacity: 1 !important; transform: none !important; }
}

/* --- print --------------------------------------------------------------- */
@media print {
  .site-header, .hero-actions, .nav-toggle, .scroll-rail, .page-grid, .modal, .connect { display: none; }
  body { background: #fff; color: #000; }
}

/* --- nav: services dropdown ---------------------------------------------- */
.has-sub { position: relative; }
.caret { width: 12px; height: 12px; margin-left: 5px; transition: transform var(--t3) var(--ease-out); }
.has-sub > a { display: inline-flex; align-items: center; }
.has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(180deg); }
.sub {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 210;
  min-width: 290px; list-style: none; margin: 0; padding: 8px;
  background: var(--surface); border: 1px solid var(--border-lit); border-radius: var(--r-md);
  box-shadow: 0 30px 60px -36px rgba(0,0,0,.95);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease-out), visibility var(--t3);
}
.has-sub:hover .sub, .has-sub:focus-within .sub, .sub.open { opacity: 1; visibility: visible; transform: none; }
.sub a { display: block; padding: 10px 13px; border-radius: var(--r-sm); font-size: 14px; color: var(--muted); }
.sub a:hover, .sub a.is-active { color: var(--text); background: var(--surface-2); }
.sub a::after { display: none; }

/* --- page head (inner pages) --------------------------------------------- */
.page-head { padding: 136px 0 56px; border-top: 0; }
.page-head h1 { font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -.03em; margin-bottom: 20px; text-wrap: balance; }
.page-lede { font-size: clamp(16.5px, 1.7vw, 19px); color: var(--text-soft); max-width: 62ch; margin: 0; text-wrap: pretty; }
.page-head-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.page-art { display: flex; justify-content: center; }
.crumbs { font-size: 13px; color: var(--faint); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--cyan); }

/* --- technical widgets ---------------------------------------------------- */
.wpanel { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border-lit);
  border-radius: var(--r-md); overflow: hidden; }
.wbar { display: flex; align-items: center; gap: 6px; padding: 10px 13px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.wbar span { width: 7px; height: 7px; border-radius: 50%; background: var(--border-lit); }
.wbar p { margin: 0 0 0 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.wpanel .code { border: 0; border-radius: 0; background: #070a12; font-size: 11.5px; }
.wnodes, .wrows { padding: 12px; display: grid; gap: 8px; }
.wnode, .wrow { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 12px; background: #070a12;
  font-family: var(--font-mono); font-size: 11.5px; }
.wnode p { margin: 0; color: var(--text-soft); }
.wnode span { color: var(--faint); font-size: 11px; }
.wrow { display: flex; justify-content: space-between; gap: 12px; }
.wrow b { color: var(--cyan); font-weight: 400; }
.wrow span { color: var(--faint); }
.wchart { display: flex; align-items: flex-end; gap: 7px; height: 108px; padding: 14px 14px 0; }
.wchart i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--cyan), rgba(59,130,246,.35)); }
.wfoot { display: flex; justify-content: space-between; padding: 10px 14px 12px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }

/* --- service cards -------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.svc-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden; position: relative;
  transition: border-color var(--t4) var(--ease), background var(--t4) var(--ease), transform var(--t5) var(--ease-out); }
.svc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; z-index: 2;
  background: linear-gradient(180deg, var(--cyan), var(--violet)); opacity: 0; transform: scaleY(.3);
  transition: opacity var(--t4) var(--ease), transform var(--t5) var(--ease-out); }
.svc-card:hover, .svc-card:focus-within { border-color: var(--border-lit); background: var(--surface-2); transform: translateY(-3px); }
.svc-card:hover::before, .svc-card:focus-within::before { opacity: 1; transform: scaleY(1); }
.svc-art { padding: 24px 24px 0; height: 210px; display: flex; align-items: stretch; justify-content: center;
  background: linear-gradient(150deg, rgba(34,211,238,.05), transparent 60%); }
.svc-card:nth-child(even) .svc-art { background: linear-gradient(150deg, rgba(168,85,247,.05), transparent 60%); }
.svc-art .wpanel { height: 100%; display: flex; flex-direction: column; transition: transform var(--t5) var(--ease-out); }
.svc-art .wrows, .svc-art .code, .svc-art .wchart { flex: 1; }
.svc-card:hover .svc-art .wpanel { transform: translateY(-3px); }
.svc-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.svc-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--cyan); margin-bottom: 12px; }
.svc-body h2, .svc-body h3 { font-size: clamp(19px, 1.9vw, 23px); margin-bottom: 12px; text-wrap: balance;
  transition: transform var(--t4) var(--ease-out); }
.svc-card:hover .svc-body h2, .svc-card:hover .svc-body h3 { transform: translateX(3px); }
.svc-body p { color: var(--muted); font-size: 15px; margin-bottom: 22px; text-wrap: pretty; }
.svc-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding: 10px 18px;
  border-radius: var(--r-sm); border: 1px solid var(--border-lit); font-size: 14px; font-weight: 600; color: var(--text);
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease), gap var(--t4) var(--ease-out); }
.svc-cta svg { width: 14px; height: 14px; }
.svc-cta:hover { border-color: var(--cyan); background: rgba(34,211,238,.08); gap: 13px; }

/* --- capabilities grid ---------------------------------------------------- */
.cap-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cap-grid li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px;
  transition: border-color var(--t4) var(--ease), background var(--t4) var(--ease); }
.cap-grid li:hover { border-color: var(--border-lit); background: var(--surface-2); }
.cap-grid h3 { font-size: 16px; margin-bottom: 8px; }
.cap-grid p { font-size: 14px; color: var(--muted); margin: 0; }

/* --- market trends -------------------------------------------------------- */
.trend-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.trend { background: var(--surface); padding: 28px 26px; }
.trend-n { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--cyan); margin-bottom: 14px; }
.trend h3 { font-size: 17px; margin-bottom: 10px; text-wrap: balance; }
.trend p { font-size: 14.5px; color: var(--muted); margin: 0; text-wrap: pretty; }

/* --- service detail: offer + stack --------------------------------------- */
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.offer-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; }
.offer-block h3 { font-size: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.offer-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.offer-block li { display: flex; gap: 11px; align-items: baseline; color: var(--text-soft); font-size: 14.5px; }
.offer-block li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; transform: translateY(-2px); }

.stack-grid { display: grid; gap: 24px; }
.stack-block h3 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); font-weight: 500; margin-bottom: 14px; }
.stack-block .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-block .chip { display: inline-flex; align-items: center; padding: 8px 11px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); color: var(--text-soft); font-size: 13px; line-height: 1.2;
  white-space: nowrap; }

.cap-note { padding: 30px 34px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border);
  border-left: 2px solid var(--cyan); max-width: 860px; margin-bottom: 40px; }
.cap-note h2 { font-size: 21px; margin-bottom: 12px; }
.cap-note p { color: var(--text-soft); font-size: 16px; margin: 0; text-wrap: pretty; }

.other-services { padding-top: 30px; border-top: 1px solid var(--border); }
.other-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.other-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: 14.5px; font-weight: 500;
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease); }
.other-list svg { width: 15px; height: 15px; color: var(--faint); transition: transform var(--t4) var(--ease-out), color var(--t2) var(--ease); }
.other-list a:hover { border-color: var(--cyan); background: var(--surface-2); }
.other-list a:hover svg { transform: translateX(3px); color: var(--cyan); }

/* --- about ---------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
.about-col h2 { font-size: 22px; margin-bottom: 16px; }
.about-col p { color: var(--muted); font-size: 16px; text-wrap: pretty; }

/* --- CTA band ------------------------------------------------------------- */
.band { border-top: 1px solid var(--border); }
.band-inner { display: grid; grid-template-columns: 1.3fr auto; gap: 36px; align-items: center;
  padding: 40px 42px; border-radius: var(--r-xl); border: 1px solid var(--border-lit);
  background: linear-gradient(130deg, rgba(34,211,238,.07), rgba(168,85,247,.05) 60%, transparent), var(--surface); }
.band-inner h2 { font-size: clamp(22px, 2.6vw, 31px); margin-bottom: 10px; text-wrap: balance; }
.band-inner p { color: var(--muted); font-size: 16px; margin: 0; max-width: 58ch; text-wrap: pretty; }
.band-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.contact-note { margin-top: 24px; padding: 24px 26px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.contact-note h2 { font-size: 17px; margin-bottom: 10px; }
.contact-note p { font-size: 14.5px; color: var(--muted); margin: 0; }
.opt { color: var(--faint); font-weight: 400; }
.footer-loc { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.footer-col h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: 15px; }
/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-inner, .page-head-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-art, .page-art { align-items: flex-start; justify-content: flex-start; }
  .offer-grid, .other-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .contact-grid, .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .process, .trend-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 28px; }
}
@media (max-width: 820px) {
  .nav-links { position: fixed; inset: 76px 0 auto 0; flex-direction: column; gap: 0; max-height: calc(100dvh - 76px); overflow-y: auto;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px var(--gut) 22px; display: none; }
  .nav-links.open { display: flex; }
  .nav-links > li > a { padding: 14px 4px; font-size: 16px; border-radius: 0; }
  .nav-links a::after { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .caret { display: none; }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
    box-shadow: none; background: none; border: 0; border-left: 1px solid var(--border); border-radius: 0;
    margin: 0 0 6px 6px; padding: 0 0 0 12px; }
  .sub a { padding: 11px 4px; font-size: 14.5px; }
  .nav-cta-m { display: block; margin-top: 14px; }
  .nav-cta-m a { display: flex; align-items: center; justify-content: center; padding: 14px 20px;
    border-radius: var(--r-md); font-weight: 600; color: #04121a;
    background: linear-gradient(110deg, var(--cyan) 0%, #38bdf8 46%, var(--blue) 100%); }
  section { padding: 72px 0; }
  .hero { padding: 112px 0 56px; min-height: auto; }
  .page-head { padding: 108px 0 44px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .svc-grid, .offer-grid, .other-list, .cap-grid, .trend-grid, .process { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .modal-card { padding: 28px 22px 22px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  :root { --gut: 18px; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
  .hero-meta li:not(:last-child)::after { margin: 0 10px; }
  .form-actions .btn { flex: 1 1 100%; }
  .band-actions .btn { flex: 1 1 100%; }
}

/* Selected Work */
.portfolio-feature{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);
  gap:clamp(32px,6vw,88px);
  align-items:center;
  margin-top:48px;
  padding:28px 0 12px;
  border-top:1px solid rgba(255,255,255,.12);
}
.portfolio-visual{min-width:0}
.portfolio-browser{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#0b0e15;
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}
.portfolio-browser-bar{
  height:38px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:#080a0f;
}
.portfolio-browser-bar span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.28);
}
.portfolio-browser-bar small{
  margin-left:10px;
  color:rgba(255,255,255,.38);
  font:500 10px/1 'JetBrains Mono',monospace;
}
.portfolio-screen{
  min-height:360px;
  padding:30px;
  background:#f4f1e9;
  color:#111318;
}
.portfolio-screen-nav{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:11px;
  color:#20242b;
}
.portfolio-screen-nav strong{
  font:500 18px/1 Georgia,serif;
}
.portfolio-screen-title{
  margin-top:92px;
  font:500 clamp(32px,4vw,62px)/.92 Georgia,serif;
  letter-spacing:-.045em;
}
.portfolio-screen-line{
  width:110px;
  height:1px;
  margin-top:30px;
  background:#20242b;
}
.portfolio-copy{min-width:0}
.portfolio-meta{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
  color:rgba(255,255,255,.46);
  font:500 10px/1.3 'JetBrains Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.portfolio-copy h3{
  margin:0 0 18px;
  font-size:clamp(30px,3vw,46px);
  line-height:1.02;
}
.portfolio-copy>p{
  max-width:560px;
  margin:0;
  color:rgba(255,255,255,.68);
  line-height:1.75;
}
.portfolio-facts{
  margin:30px 0 34px;
  border-top:1px solid rgba(255,255,255,.1);
}
.portfolio-facts div{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.portfolio-facts span{
  color:rgba(255,255,255,.4);
  font:500 10px/1.4 'JetBrains Mono',monospace;
  text-transform:uppercase;
}
.portfolio-facts strong{
  max-width:65%;
  text-align:right;
  font-size:12px;
  font-weight:500;
}
@media (max-width:900px){
  .portfolio-feature{grid-template-columns:1fr}
  .portfolio-screen{min-height:300px}
}
@media (max-width:600px){
  .portfolio-screen{min-height:250px;padding:20px}
  .portfolio-screen-nav span{display:none}
  .portfolio-screen-title{margin-top:65px;font-size:38px}
  .portfolio-facts div{display:block}
  .portfolio-facts strong{display:block;max-width:none;text-align:left;margin-top:6px}
}

.healthcare-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}



/* Premium healthcare project */
.portfolio-feature-health{
  margin-top:72px;
}

.healthcare-premium{
  overflow:hidden;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  box-shadow:0 24px 70px rgba(15,23,42,.10);
}

.healthcare-premium-top{
  height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 22px;
  background:#fff;
  border-bottom:1px solid #e7edf3;
}

.healthcare-brand{
  display:flex;
  align-items:center;
  gap:9px;
  color:#142033;
  font-size:13px;
  letter-spacing:-.01em;
}

.healthcare-brand-icon{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#176b68;
  color:#fff;
  font-size:17px;
  font-weight:400;
}

.healthcare-mini-nav{
  display:flex;
  gap:18px;
  color:#64748b;
  font-size:9px;
}

.healthcare-book{
  padding:8px 12px;
  border-radius:6px;
  background:#142033;
  color:#fff;
  font-size:9px;
  white-space:nowrap;
}

.healthcare-premium-main{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:30px;
  align-items:center;
  min-height:390px;
  padding:42px;
  background:#f5f8f9;
}

.healthcare-premium-copy{
  position:relative;
  z-index:2;
}

.healthcare-kicker{
  color:#176b68;
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
}

.healthcare-premium-copy h4{
  margin:13px 0 15px;
  color:#142033;
  font:500 38px/1.08 Georgia,serif;
  letter-spacing:-.025em;
}

.healthcare-premium-copy h4 em{
  color:#176b68;
  font-style:normal;
}

.healthcare-premium-copy p{
  max-width:315px;
  margin:0;
  color:#64748b;
  font-size:11px;
  line-height:1.75;
}

.healthcare-premium-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
  font-size:9px;
  font-weight:600;
}

.healthcare-primary{
  padding:11px 14px;
  border-radius:7px;
  background:#176b68;
  color:#fff;
}

.healthcare-primary b{
  margin-left:6px;
  font-size:12px;
}

.healthcare-secondary{
  padding:10px 13px;
  border:1px solid #d7dee5;
  border-radius:7px;
  background:#fff;
  color:#142033;
}

.healthcare-trust{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:24px;
  color:#64748b;
  font-size:8px;
}

.healthcare-trust b{
  display:block;
  margin-bottom:2px;
  color:#142033;
  font-size:10px;
}

.healthcare-premium-image{
  position:relative;
  height:310px;
  overflow:hidden;
  border-radius:16px;
  background:#dce8e8;
  box-shadow:0 18px 45px rgba(15,23,42,.14);
}

.healthcare-premium-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.healthcare-photo-card{
  position:absolute;
  left:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:11px 14px;
  border-radius:9px;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 28px rgba(15,23,42,.15);
}

.healthcare-photo-card strong{
  color:#142033;
  font-size:9px;
}

.healthcare-photo-card span{
  color:#64748b;
  font-size:7px;
}

.healthcare-premium-footer{
  display:flex;
  justify-content:space-around;
  gap:12px;
  padding:15px 20px;
  background:#fff;
  border-top:1px solid #e7edf3;
  color:#475569;
  font-size:8px;
  font-weight:600;
}

@media(max-width:900px){
  .healthcare-premium-main{
    grid-template-columns:1fr;
    padding:30px;
  }

  .healthcare-premium-image{
    height:280px;
  }

  .healthcare-mini-nav{
    display:none;
  }
}

@media(max-width:600px){
  .healthcare-premium-top{
    padding:0 14px;
  }

  .healthcare-premium-main{
    padding:24px 20px;
  }

  .healthcare-premium-copy h4{
    font-size:31px;
  }

  .healthcare-premium-image{
    height:230px;
  }

  .healthcare-premium-footer{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* =========================================================
   OXNEURAL DELIVERY NETWORK
   ========================================================= */

html{
  scroll-behavior:smooth;
}

.ox-team-section{
  position:relative;
  overflow:hidden;
  padding:120px 0 110px;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,214,255,.055), transparent 28%),
    radial-gradient(circle at 85% 45%, rgba(111,76,255,.055), transparent 30%);
}

.ox-team-heading{
  display:grid;
  grid-template-columns:1.1fr .75fr;
  gap:80px;
  align-items:end;
  margin-bottom:64px;
}

.ox-team-heading h2{
  margin:14px 0 0;
  max-width:760px;
  font-size:clamp(42px,5vw,72px);
  line-height:.98;
  letter-spacing:-.045em;
}

.ox-team-heading h2 span{
  background:linear-gradient(90deg,#fff,#72ddff 45%,#a18cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.ox-team-intro{
  max-width:430px;
  padding-bottom:5px;
}

.ox-team-intro p{
  margin:0;
  color:rgba(255,255,255,.62);
  font-size:14px;
  line-height:1.85;
}

.ox-team-network{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.ox-team-card{
  position:relative;
  min-height:390px;
  padding:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  box-shadow:0 20px 70px rgba(0,0,0,.20);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),
             border-color .45s ease,
             box-shadow .45s ease;
}

.ox-team-card::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  top:-100px;
  right:-90px;
  border-radius:50%;
  background:rgba(0,214,255,.10);
  filter:blur(35px);
  transition:transform .5s ease;
}

.ox-team-card:hover{
  transform:translateY(-10px);
  border-color:rgba(92,218,255,.32);
  box-shadow:0 30px 90px rgba(0,0,0,.30),
             0 0 45px rgba(0,214,255,.06);
}

.ox-team-card:hover::before{
  transform:scale(1.5);
}

.ox-team-lead{
  border-color:rgba(98,220,255,.24);
  background:
    radial-gradient(circle at 80% 0%,rgba(0,214,255,.10),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018));
}

.ox-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:28px;
}

.ox-team-number{
  color:rgba(255,255,255,.35);
  font:500 11px/1 "JetBrains Mono",monospace;
}

.ox-team-status{
  display:flex;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.48);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.ox-team-status i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#54e5a2;
  box-shadow:0 0 10px rgba(84,229,162,.7);
  animation:oxStatusPulse 2s ease-in-out infinite;
}

@keyframes oxStatusPulse{
  0%,100%{opacity:.5;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.25)}
}

.ox-avatar{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin-bottom:24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:17px;
  background:linear-gradient(145deg,#182535,#0b111b);
  color:#8be8ff;
  font:600 16px/1 "JetBrains Mono",monospace;
  box-shadow:inset 0 0 25px rgba(0,214,255,.06);
}

.ox-avatar-primary{
  background:linear-gradient(145deg,#173c50,#101727);
  border-color:rgba(89,220,255,.28);
}

.ox-team-card h3{
  position:relative;
  margin:0 0 7px;
  color:#fff;
  font-size:18px;
  letter-spacing:-.025em;
}

.ox-role{
  position:relative;
  margin:0 0 17px;
  color:#71dfff;
  font-size:10px;
  line-height:1.5;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.ox-card-text{
  position:relative;
  margin:0;
  color:rgba(255,255,255,.50);
  font-size:11px;
  line-height:1.75;
}

.ox-linkedin{
  position:absolute;
  left:24px;
  bottom:23px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:rgba(255,255,255,.68);
  font-size:10px;
  text-decoration:none;
  transition:color .25s ease,gap .25s ease;
}

.ox-linkedin span{
  color:#67ddff;
}

.ox-linkedin:hover{
  color:#fff;
  gap:11px;
}

.ox-network-line,
.ox-network-pulse{
  display:none;
}

.ox-team-divider{
  display:flex;
  align-items:center;
  gap:18px;
  margin:76px 0 28px;
}

.ox-team-divider span{
  color:rgba(255,255,255,.38);
  font:500 9px/1 "JetBrains Mono",monospace;
  letter-spacing:.14em;
}

.ox-team-divider i{
  height:1px;
  flex:1;
  background:linear-gradient(90deg,rgba(255,255,255,.12),transparent);
}

.ox-specialist-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:16px;
}

.ox-specialist-card{
  display:flex;
  gap:18px;
  min-height:190px;
  padding:24px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:rgba(255,255,255,.025);
  transition:transform .35s ease,border-color .35s ease,background .35s ease;
}

.ox-specialist-card:hover{
  transform:translateY(-6px);
  border-color:rgba(119,214,255,.22);
  background:rgba(255,255,255,.04);
}

.ox-specialist-icon{
  flex:0 0 46px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(93,218,255,.16);
  border-radius:13px;
  color:#6edfff;
  background:rgba(50,190,230,.055);
  font:600 14px/1 "JetBrains Mono",monospace;
}

.ox-specialist-card h3{
  margin:2px 0 8px;
  color:#fff;
  font-size:15px;
}

.ox-specialist-card p{
  margin:0 0 15px;
  color:rgba(255,255,255,.45);
  font-size:10px;
  line-height:1.65;
}

.ox-specialists{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.ox-specialists span{
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.025);
  font-size:8px;
}

.ox-team-process{
  margin-top:86px;
  padding:36px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:
    radial-gradient(circle at 0 50%,rgba(0,214,255,.06),transparent 30%),
    rgba(255,255,255,.025);
}

.ox-process-heading{
  margin-bottom:30px;
}

.ox-process-heading h3{
  margin:10px 0 0;
  color:#fff;
  font-size:25px;
  letter-spacing:-.025em;
}

.ox-process-flow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ox-process-flow > div{
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:90px;
}

.ox-process-flow b{
  color:#66ddff;
  font:500 9px/1 "JetBrains Mono",monospace;
}

.ox-process-flow span{
  color:rgba(255,255,255,.68);
  font-size:10px;
  line-height:1.4;
}

.ox-process-flow > i{
  flex:1;
  height:1px;
  min-width:25px;
  background:linear-gradient(90deg,rgba(89,220,255,.35),rgba(255,255,255,.08));
  position:relative;
  overflow:hidden;
}

.ox-process-flow > i::after{
  content:"";
  position:absolute;
  top:0;
  left:-30%;
  width:30%;
  height:100%;
  background:#6de4ff;
  box-shadow:0 0 12px rgba(109,228,255,.8);
  animation:oxFlow 3s linear infinite;
}

@keyframes oxFlow{
  to{left:110%}
}

.ox-team-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  margin-top:20px;
  padding:38px 40px;
  border:1px solid rgba(99,219,255,.14);
  border-radius:20px;
  background:linear-gradient(100deg,rgba(0,214,255,.055),rgba(123,87,255,.045));
}

.ox-team-cta h3{
  margin:9px 0 5px;
  color:#fff;
  font-size:25px;
  letter-spacing:-.025em;
}

.ox-team-cta p{
  margin:0;
  color:rgba(255,255,255,.48);
  font-size:11px;
}

@media(max-width:1050px){
  .ox-team-heading{
    grid-template-columns:1fr;
    gap:25px;
  }

  .ox-team-network{
    grid-template-columns:repeat(2,1fr);
  }

  .ox-specialist-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .ox-team-section{
    padding:85px 0 75px;
  }

  .ox-team-heading{
    margin-bottom:42px;
  }

  .ox-team-heading h2{
    font-size:40px;
  }

  .ox-team-network{
    grid-template-columns:1fr;
  }

  .ox-team-card{
    min-height:350px;
  }

  .ox-team-process{
    padding:25px 20px;
  }

  .ox-process-flow{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
  }

  .ox-process-flow > i{
    display:none;
  }

  .ox-team-cta{
    flex-direction:column;
    align-items:flex-start;
    padding:28px 24px;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .ox-team-card,
  .ox-specialist-card,
  .ox-linkedin{
    transition:none;
  }

  .ox-team-status i,
  .ox-process-flow > i::after{
    animation:none;
  }
}

.ox-specialist-grid{
  grid-template-columns:repeat(3,1fr);
}

.ox-specialist-card{
  position:relative;
  min-height:220px;
  align-items:flex-start;
}

.ox-specialist-card > div:last-child{
  padding-right:28px;
}

.ox-specialist-label{
  display:block;
  margin:2px 0 10px;
  color:rgba(255,255,255,.35);
  font:500 8px/1 "JetBrains Mono",monospace;
  letter-spacing:.14em;
}

.ox-specialist-role{
  color:#70ddff !important;
  font-size:10px !important;
  margin-bottom:12px !important;
}

.ox-specialist-card .ox-linkedin{
  left:auto;
  right:24px;
  bottom:22px;
}

@media(max-width:1050px){
  .ox-specialist-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:720px){
  .ox-specialist-grid{
    grid-template-columns:1fr;
  }
}


/* Team interactive experience */
.ox-interactive-card{
  --mx:50%;
  --my:50%;
  transform-style:preserve-3d;
  will-change:transform;
  transition:
    transform .18s ease-out,
    border-color .4s ease,
    box-shadow .4s ease;
}

.ox-interactive-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(
      260px circle at var(--mx) var(--my),
      rgba(94,220,255,.13),
      transparent 62%
    );
  opacity:0;
  transition:opacity .35s ease;
}

.ox-interactive-card:hover::after{
  opacity:1;
}

.ox-interactive-card h3,
.ox-interactive-card .ox-role,
.ox-interactive-card .ox-card-text,
.ox-interactive-card .ox-linkedin,
.ox-interactive-card .ox-card-top{
  transform:translateZ(14px);
}

.ox-interactive-card .ox-card-top{
  position:relative;
}

.ox-interactive-card:hover{
  border-color:rgba(99,220,255,.38);
  box-shadow:
    0 28px 80px rgba(0,0,0,.30),
    0 0 35px rgba(0,214,255,.08);
}

.ox-team-network{
  perspective:1200px;
}

.ox-team-network::before{
  content:"";
  position:absolute;
  inset:-80px -30px;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 40%,rgba(0,214,255,.045),transparent 20%),
    radial-gradient(circle at 80% 60%,rgba(125,91,255,.045),transparent 22%);
  animation:oxNetworkAmbient 8s ease-in-out infinite alternate;
}

@keyframes oxNetworkAmbient{
  from{transform:translate3d(-12px,0,0) scale(1)}
  to{transform:translate3d(12px,-8px,0) scale(1.04)}
}

.ox-team-divider i{
  position:relative;
  overflow:hidden;
}

.ox-team-divider i::after{
  content:"";
  position:absolute;
  top:0;
  left:-15%;
  width:15%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(91,220,255,.9),
    transparent
  );
  animation:oxDividerScan 4s linear infinite;
}

@keyframes oxDividerScan{
  from{left:-15%}
  to{left:115%}
}

.ox-specialist-card{
  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    border-color .4s ease,
    box-shadow .4s ease;
}

.ox-specialist-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 24px 65px rgba(0,0,0,.24),
    0 0 28px rgba(0,214,255,.045);
}

.ox-specialist-icon{
  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

.ox-specialist-card:hover .ox-specialist-icon{
  transform:translateY(-3px) scale(1.05);
  border-color:rgba(100,222,255,.38);
  box-shadow:0 0 24px rgba(0,214,255,.10);
}

.ox-team-cta{
  position:relative;
  overflow:hidden;
}

.ox-team-cta::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-90px;
  top:-130px;
  border-radius:50%;
  background:rgba(76,210,255,.07);
  filter:blur(35px);
  animation:oxCtaGlow 6s ease-in-out infinite alternate;
}

@keyframes oxCtaGlow{
  from{transform:translate(0,0)}
  to{transform:translate(-35px,25px)}
}

@media(max-width:720px){
  .ox-interactive-card{
    transform:none !important;
  }

  .ox-interactive-card::after{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .ox-network-ambient,
  .ox-team-network::before,
  .ox-team-divider i::after,
  .ox-team-cta::before{
    animation:none;
  }

  .ox-interactive-card,
  .ox-specialist-card,
  .ox-specialist-icon{
    transition:none;
    transform:none !important;
  }
}


/* Mobile navigation refinement */
@media (max-width: 700px){
  .nav-mobile .services-menu,
  .mobile-nav .services-menu{
    gap: 0;
  }

  .nav-mobile .services-menu a,
  .mobile-nav .services-menu a{
    padding: 11px 0;
    line-height: 1.35;
  }

  .nav-mobile .services-menu,
  .mobile-nav .services-menu{
    margin-top: 6px;
    margin-bottom: 8px;
  }
}


/* Mobile Services accordion */
@media (max-width: 700px){
  .nav-mobile .sub,
  .mobile-nav .sub{
    display:none;
  }

  .nav-mobile .sub.mobile-open,
  .mobile-nav .sub.mobile-open{
    display:block;
  }
}


/* Final mobile navigation behavior */
@media (max-width: 700px){

  #navlinks li.has-sub > ul.sub{
    display:none !important;
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }

  #navlinks li.has-sub.mobile-open > ul.sub{
    display:block !important;
  }

  #navlinks li.has-sub > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  #navlinks li.has-sub.mobile-open > a .chev,
  #navlinks li.has-sub.mobile-open > a .caret{
    transform:rotate(180deg);
  }

  #navlinks > li{
    display:block;
  }

  #navlinks > li > a{
    display:flex;
    width:100%;
  }
}