:root{
  --blue-900:#014558;
  --blue-800:#045d76;
  --blue-700:#007494;
  --blue-400:#4c9db4;
  --green-500:#7fc243;
  --rose-500:#a25665;
  --purple-700:#46417F;
  --purple-500:#665FAD;
  --gray-700:#323232;
  --gray-300:#c5c5c5;
  --gray-050:#f6f6f6;
  --ink-900:#0f1222;
  --ink-700:#1b2140;
  --ink-600:#2b3460;
  --ink-500:#586099;
  --paper:#ffffff;

  --radius:22px;
  --radius-sm:14px;

  /* Slightly tighter pill radius (more premium, less bubble) */
  --radius-pill:14px;

  --shadow-soft: 0 20px 55px rgba(1,69,88,.16);
  --shadow-card: 0 18px 40px rgba(15,18,34,.12);
  --shadow-tight: 0 10px 22px rgba(15,18,34,.10);

  --maxw: 1180px;

  --ease-out: cubic-bezier(.16,.84,.44,1);

  /* Animated brand gradient (subtle motion, used for text + card accents) */
  --grad-anim-strong: linear-gradient(135deg, var(--blue-700), var(--purple-500), var(--green-500), var(--blue-700));
  --grad-anim-soft: linear-gradient(135deg, rgba(0,116,148,.18), rgba(102,95,173,.18), rgba(127,194,67,.18), rgba(0,116,148,.18));
}

@keyframes gradShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink-900);
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(76,157,180,.25), transparent 60%),
    radial-gradient(900px 520px at 95% 0%, rgba(102,95,173,.20), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--gray-050) 100%);
}

img{max-width:100%; height:auto}
a{color:inherit; text-decoration:none}

/* ------------------------------------------------------------
   Sitewide link label normalization
   - Non-bold
   - Small-caps look (with uppercase fallback)
   Applies to content + footer links, excluding buttons.
------------------------------------------------------------- */
main a:not(.btn),
footer a:not(.btn){
  font-variant: small-caps;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 400;
}

/* Ensure common "link" label styles do not reintroduce boldness */
.card .link,
a.link,
.poctLink{
  font-weight: 400;
}

/* Mobile menu: Client Login must stay visible + Reliantcy green + ALL CAPS */
.mobilepanel a.mobile-login{
  display:block !important;
  color: var(--green-500) !important;
  text-transform: uppercase;
  letter-spacing: .14em;
}
p{margin:0 0 1rem}
h1,h2,h3,h4{margin:0 0 .75rem; letter-spacing:-.02em}
::selection{background:rgba(127,194,67,.25)}

.container{max-width:var(--maxw); margin:0 auto; padding:0 22px}
@media (min-width: 900px){.container{padding:0 28px}}

.skiplink{
  position:absolute; left:-999px; top:10px;
  background:var(--paper); border:1px solid rgba(15,18,34,.15);
  padding:10px 12px; border-radius:12px; z-index:9999;
}
.skiplink:focus{left:10px}

.topbar .row{display:flex; gap:10px; justify-content:space-between; align-items:center; padding:10px 0}
.topbar a{opacity:.92}
.topbar a:hover{opacity:1}

.nav{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(15,18,34,.08);
}
.nav .container{position:relative}
.nav .row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand img{height:40px; width:auto}
.brand .tag{
  font-size:12px;
  color:var(--ink-500);
  letter-spacing:.08em;
  text-transform:uppercase;
  display:none;
}
@media (min-width: 900px){.brand .tag{display:block}}

/* Primary links are desktop-only; mobile uses burger + panel */
.navlinks{
  display:none;
  gap:16px;
  align-items:center;
  font-size:11px;
  font-weight:650;
}
@media (min-width: 900px){.navlinks{display:flex}}
.navlinks a{
  padding:9px 9px;
  border-radius:12px;
  color:var(--ink-700);
  text-transform:uppercase;
  letter-spacing:.12em;
}

.navlinks a:hover{background:rgba(0,116,148,.08)}
.navlinks a[aria-current="page"]{
  background:rgba(0,116,148,.12);
  color:var(--blue-900);
}

.navcta{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 16px;
  border-radius: var(--radius-pill);
  font-weight:650;
  font-size:12px;
  border:1px solid rgba(15,18,34,.12);
  background:var(--paper);
  box-shadow:var(--shadow-tight);
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out), filter .18s var(--ease-out), opacity .18s var(--ease-out);
  cursor:pointer;
}
.btn:hover{
  /* No movement on hover; use a subtle dim instead */
  transform:none;
  box-shadow:var(--shadow-card);
  /* Opacity dim reads better on transparent "ghost" buttons (e.g., Client Login) */
  opacity:.92;
  filter:brightness(.98);
}
.btn.primary{
  border:none;
  color:#fff;
  background:linear-gradient(135deg, var(--blue-700), var(--purple-500));
}
.btn.ghost{
  background:transparent;
  box-shadow:none;
  border:1px solid rgba(15,18,34,.12);
}
.btn.ghost.green{
  background:rgba(127,194,67,.16);
  border-color:rgba(127,194,67,.30);
  box-shadow:var(--shadow-tight);
}
.btn.ghost.green:hover{
  background:rgba(127,194,67,.20);
}
.btn.small{padding:9px 12px; font-size:12px}
.btn .dot{
  width:9px; height:9px; border-radius:99px; background:var(--green-500);
  box-shadow:0 0 0 6px rgba(127,194,67,.18);
  transition: background .18s var(--ease-out), box-shadow .18s var(--ease-out);
}

/* Desktop header: Client Login should remain fully stable; only the dot changes color on hover/focus */
.btn.client-login-btn{
  /* Absolutely no animation/jitter (Safari tends to clip thin borders on hover) */
  transition:none !important;
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  box-shadow:none !important;

  background:transparent;
  border:none !important;
  position:relative;
  overflow:visible;
}
/* Draw the pill outline with a pseudo-element so it never "drops" a side on hover */
.btn.client-login-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(15,18,34,.14);
  pointer-events:none;
  transition:none !important;
}
.btn.client-login-btn:hover,
.btn.client-login-btn:focus,
.btn.client-login-btn:focus-visible{
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  box-shadow:none !important;
}
.btn.client-login-btn:hover .dot,
.btn.client-login-btn:focus-visible .dot{
  background:var(--purple-500);
  box-shadow:0 0 0 6px rgba(102,95,173,.18);
}
/* Keep Client Login dot change instant (no perceived animation) */
.btn.client-login-btn .dot{transition:none !important;}

.burger{
  width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(15,18,34,.12); background:var(--paper);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-tight);
}
.burger svg{width:22px; height:22px}
@media (min-width: 900px){.burger{display:none}}

.mobilepanel{
  display:none;
  position:absolute;
  left:0; right:0;
  top:100%;
  z-index:1001;
  padding:6px 18px 12px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(12px);
  border-top:1px solid rgba(15,18,34,.08);
  border-bottom:1px solid rgba(15,18,34,.08);
  box-shadow:0 18px 40px rgba(15,18,34,.10);
}
.mobilepanel.open{display:block}
.mobilepanel a{
  display:block; padding:14px 4px;
  border-bottom:1px solid rgba(15,18,34,.06);
  font-weight:700;
  color:var(--ink-700);
  text-transform:uppercase;
}
.mobilepanel a:last-child{border-bottom:none}
.mobilepanel a.btn{
  display:inline-flex;
  width:auto;
  padding:11px 16px;
  margin:10px 0 4px;
  border-bottom:none;
}

/* Mobile menu: Client Login should be plain text (Reliantcy green), not a pill */
.mobilepanel a.mobile-login{
  display:block;
  margin:10px 0 4px;
  padding:14px 4px;
  border-bottom:none;
  background:transparent;
  box-shadow:none;
  border:none;
  color:var(--green-500) !important;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.mobilepanel a.mobile-login:hover,
.mobilepanel a.mobile-login:focus{
  opacity:.82;
}


.hero{
  position:relative;
  padding:38px 0 30px;
  overflow:hidden;
}
.hero .grid{
  display:grid; gap:22px;
}
@media (min-width: 980px){
  .hero{padding:56px 0 42px}
  .hero .grid{grid-template-columns: 1.05fr .95fr; gap:34px; align-items:center}
}

/* Brand orbit mark (rings rotate, center r stays fixed) */
.heroArt{display:flex; justify-content:flex-end; align-items:center; position:relative; min-height:260px}
.brandOrbit{
  position:relative;
  --orbit-size: min(380px, 42vw);
  width:var(--orbit-size);
  height:var(--orbit-size); /* fallback for browsers that mishandle aspect-ratio */
  aspect-ratio:1/1;
  pointer-events:none;
}
.brandOrbit--home{--orbit-size: min(520px, 52vw)}
.brandOrbit--sm{--orbit-size: min(260px, 45vw); opacity:.28}
.pageOrbit{
  position:absolute;
  right:-8%;
  top:8px;
  pointer-events:none;
}
@media (max-width: 720px){
  .pageOrbit{right:-22%; top:-10px}
  .brandOrbit--sm{--orbit-size: min(220px, 62vw); opacity:.22}
}
.brandOrbit img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.brandOrbit .rmark{width:22%; height:auto; inset:auto; left:54%; top:58%; transform:translate(-50%,-50%); opacity:.75}
.brandOrbit .rings{transform-origin:50% 50%}
.brandOrbitBg{
  position:absolute;
  width:min(520px, 60vw);
  right:-18%;
  top:50%;
  transform:translateY(-50%);
  opacity:.14;
  filter: blur(0.2px);
}

/* Home hero tweaks */
.heroArt--icon{justify-content:center; align-items:center; min-height:320px}
.heroArt--icon .brandOrbit{filter: drop-shadow(0 24px 60px rgba(18,30,52,.14));}
.heroArt--icon .brandOrbit--home{max-width:560px}
.heroArt--icon .brandOrbitBg{right:-10%; top:38%; opacity:.16; width:min(640px, 70vw); filter:saturate(1.10) contrast(1.05)}
.brandOrbit--home .rmark{width:13.6%; inset:auto; left:66%; top:62%; transform:translate(-50%,-50%)}
.brandOrbit--home .rings{filter:saturate(1.25) contrast(1.12)}

/* Home hero: mobile stability (iPhone portrait)
   Prevent the orbit mark from overflowing/clipping or forcing awkward heights. */
@media (max-width: 560px){
  .hero{padding:30px 0 26px}
  .hero .grid{gap:18px}
  .heroArt{min-height:unset; justify-content:center}
  .heroArt--icon{min-height:unset; padding-top:6px; padding-bottom:4px}
  /* Smaller on phone to reduce above-the-fold dominance */
  .brandOrbit--home{--orbit-size: min(180px, 42vw)}
}

@media (max-width: 390px){
  .brandOrbit--home{--orbit-size: min(160px, 46vw)}
}

/* Mobile: move Client Login into burger menu (hide pill in header) */
@media (max-width: 899px){
  .navcta .btn.small.ghost{display:none}
}

/* Updated orbit mark placement for interior heroes + about page cards:
   smaller "r" anchored lower-right (matches the home mark proportions). */
.brandOrbit--sm .rmark{width:13.6%; height:auto; inset:auto; left:66%; top:62%; transform:translate(-50%,-50%)}

/* Internal page hero rings: slightly stronger visibility */
.pageHero .brandOrbit--sm{opacity:.58}
.pageHero .brandOrbit--sm .rings{filter:saturate(1.35) contrast(1.16)}

/* Medium orbit for in-content showcases */
.brandOrbit--card{--orbit-size: min(300px, 46vw); opacity:1}
.brandOrbit--card .rmark{width:13.6%; height:auto; inset:auto; left:66%; top:62%; transform:translate(-50%,-50%)}
@keyframes orbitSpin{to{transform: rotate(360deg)}}
@media (prefers-reduced-motion: no-preference){
  .brandOrbit .rings{animation: orbitSpin 18s linear infinite;}
  .brandOrbitBg{animation: orbitSpin 40s linear infinite;}
}

.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-900);
  background:rgba(127,194,67,.14);
  border:1px solid rgba(127,194,67,.30);
  padding:8px 12px;
  border-radius:var(--radius-pill);
}
.kicker .mini{
  width:10px; height:10px; border-radius:999px; background:var(--green-500);
  box-shadow:0 0 0 6px rgba(127,194,67,.20);
}

.h1{
  font-size:clamp(36px, 6vw, 60px);
  line-height:1.0;
  font-weight:900;
  letter-spacing:-.03em;
}
.grad{
  background:var(--grad-anim-strong);
  background-size:260% 260%;
  background-position:0% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

@media (prefers-reduced-motion: no-preference){
  .grad{animation: gradShift 10s ease-in-out infinite;}
}
.sub{
  font-size:clamp(16px, 1.6vw, 19px);
  line-height:1.55;
  color:var(--ink-600);
  max-width:56ch;
}

.heroCard{
  border-radius:var(--radius);
  background:rgba(255,255,255,.78);
  border:1px solid rgba(15,18,34,.10);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  position:relative;
}
.heroCard .pad{padding:20px}
@media (min-width: 900px){.heroCard .pad{padding:24px}}
.heroCard .headline{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid rgba(15,18,34,.08);
  padding:18px 20px;
  background:linear-gradient(180deg, rgba(0,116,148,.10), rgba(255,255,255,0));
}
.heroCard .headline h3{margin:0; font-size:14px; letter-spacing:.12em; text-transform:uppercase}
.heroCard .headline span{font-size:12px; color:var(--ink-500)}

.rings{
  position:absolute; inset:-120px -140px auto auto;
  width:520px; height:520px; opacity:.40; pointer-events:none;
  transform:rotate(12deg);
  filter:drop-shadow(0 20px 40px rgba(1,69,88,.18));
}
@media (prefers-reduced-motion: no-preference){
  .rings{animation:float 7.5s var(--ease-out) infinite alternate}
}
@keyframes float{from{transform:rotate(8deg) translateY(0)}to{transform:rotate(14deg) translateY(10px)}}

.pillRow{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.pill{
  font-size:13px; font-weight:600;
  padding:10px 12px;
  border-radius:var(--radius-pill);
  letter-spacing:.12em;
  border:1px solid rgba(15,18,34,.10);
  background:rgba(255,255,255,.80);
  box-shadow:var(--shadow-tight);
  transition:filter .18s var(--ease-out), opacity .18s var(--ease-out);
}
.pill:hover{filter:brightness(.97)}
.pill b{color:var(--blue-900)}

.section{padding:56px 0}
.section.tight{padding:40px 0}
.section .titleRow{
  display:flex; flex-direction:column; gap:10px;
}
@media (min-width: 900px){
  .section .titleRow{flex-direction:row; align-items:flex-end; justify-content:space-between}
}
.eyebrow{
  font-size:12px; font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-500);
}
.h2{
  font-size:clamp(26px, 3.5vw, 40px);
  line-height:1.1;
  font-weight:900;
}
.h2 .muted{color:var(--ink-500); font-weight:900}
.lede{color:var(--ink-600); max-width:68ch; line-height:1.6}

.grid3{display:grid; gap:14px; margin-top:22px}
@media (min-width: 900px){.grid3{grid-template-columns: repeat(3, 1fr)}}

.grid2{display:grid; gap:14px; margin-top:22px}
@media (min-width: 900px){.grid2{grid-template-columns: repeat(2, 1fr)}}

.card{
  border-radius:var(--radius);
  background:rgba(255,255,255,.78);
  border:1px solid rgba(15,18,34,.10);
  box-shadow:var(--shadow-card);
  padding:20px;
  position:relative;
  overflow:hidden;
}

/* Subtle animated gradient “life” inside cards (contest polish) */
.card:before{
  content:"";
  position:absolute;
  inset:-40%;
  background:var(--grad-anim-soft);
  background-size:240% 240%;
  background-position:0% 50%;
  opacity:.22;
  filter: blur(28px);
  pointer-events:none;
  transform: translateZ(0);
  z-index:0;
}
.card > *{position:relative; z-index:1}
@media (prefers-reduced-motion: no-preference){
  .card:before{animation: gradShift 16s ease-in-out infinite;}
}
.card:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion: no-preference){
  .card{transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out)}
  .card:hover{box-shadow:0 26px 60px rgba(15,18,34,.14)}
}
.card .icon{
  width:46px; height:46px; border-radius:16px;
  display:grid; place-items:center;
  background:var(--grad-anim-soft);
  background-size:240% 240%;
  background-position:0% 50%;
  border:1px solid rgba(15,18,34,.08);
  margin-bottom:12px;
}
@media (prefers-reduced-motion: no-preference){
  .card .icon{animation: gradShift 12s ease-in-out infinite;}
}
.card .icon svg{width:24px; height:24px}
.card h3{
  font-size:18px;
  margin:0 0 6px;
  font-weight:650;
  letter-spacing:.12em;
}
.card p{color:var(--ink-600); margin:0; line-height:1.6}
.card .link{
  margin-top:14px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-weight:500;
  color:var(--blue-800);
}
.card .link:hover{text-decoration:none}

/* Small-caps styling for link labels (these previously included a →) */
a.link,
.poctLink{
  font-variant: small-caps;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  letter-spacing: .14em;
  font-weight: 500;
}

/* Button-style links that use the same label treatment */
.btn.arrow-link{
  font-variant: small-caps;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  letter-spacing: .14em;
  font-weight: 500;
}

/* Small-card titles (Services cards + tag cards) */
#proof .grid3 .card h3,
.tagCard b,
.fullBleed .list b{
  font-variant: small-caps;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  letter-spacing: .14em;
}

.fullBleed{
  border-radius:var(--radius);
  border:1px solid rgba(15,18,34,.10);
  background:
    radial-gradient(800px 340px at 15% 25%, rgba(127,194,67,.18), transparent 62%),
    radial-gradient(700px 300px at 85% 15%, rgba(102,95,173,.18), transparent 62%),
    linear-gradient(135deg, rgba(1,69,88,.10), rgba(255,255,255,.84));
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  position:relative;
}
.fullBleed .inner{
  padding:26px;
  display:grid;
  gap:16px;
}
@media (min-width: 900px){
  .fullBleed .inner{grid-template-columns: 1.2fr .8fr; align-items:center; padding:32px}
}

/* Contact page: “Start with resources” links should never look broken */
.resourceLinks{
  display:grid;
  gap:10px;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(15,18,34,.10);
  box-shadow:var(--shadow-tight);
}

.split{
  display:grid; gap:14px;
}
@media (min-width: 900px){.split{grid-template-columns: 1fr 1fr}}

.wfStack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.wfStack .tagCard{
  padding:16px 18px;
  border-radius:18px;
}
.wfStack .tagCard .t{
  font-weight:560;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.wfStack .tagCard .d{margin-top:4px}

.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.chip{
  font-size:12px; font-weight:650;
  padding:8px 10px; border-radius:var(--radius-pill);
  border:1px solid rgba(15,18,34,.10);
  background:rgba(255,255,255,.78);
}
.chip.green{border-color:rgba(127,194,67,.35); background:rgba(127,194,67,.12)}
.chip.purple{border-color:rgba(102,95,173,.35); background:rgba(102,95,173,.12)}
.chip.blue{border-color:rgba(0,116,148,.30); background:rgba(0,116,148,.10)}

.list{
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.list li{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 0;
  border-top:1px solid rgba(15,18,34,.08);
}
.list li:first-child{border-top:none}

/* Smaller check icons in resource lists */
.list li > svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
  margin-top:3px;
  opacity:0.9;
}

.check{
  width:18px; height:18px; border-radius:99px;
  background:rgba(127,194,67,.22);
  border:1px solid rgba(127,194,67,.45);
  display:grid; place-items:center;
  flex:0 0 auto;
  margin-top:2px;
}

.mark{
  width:18px; height:18px; border-radius:99px;
  background:rgba(0,116,148,.18);
  border:1px solid rgba(0,116,148,.35);
  display:grid; place-items:center;
  flex:0 0 auto;
  margin-top:2px;
  color:rgba(0,116,148,1);
}

.footer{
  padding:32px 0 46px;
  color:rgba(255,255,255,.92);
  background:linear-gradient(135deg, var(--blue-900), var(--purple-700));
  margin-top:54px;
}
.footerLogo{height:34px; max-width:220px; width:auto; display:block}
.footer .row{
  display:grid; gap:18px;
}
@media (min-width: 900px){.footer .row{grid-template-columns: 1.2fr .8fr .8fr 1fr}}
.footer a:not(.btn){opacity:.92}
.footer a{transition:opacity .15s var(--ease-out)}
/* Footer button (Client Login) must stay fully opaque for proper contrast */
.footer a.btn{opacity:1 !important}
.footer a:not(.btn):hover{opacity:.72; text-decoration:none}
.footer a.btn:hover{opacity:1; text-decoration:none; filter:brightness(.97)}
.footer .fine{
  margin-top:14px;
  font-size:12px;
  opacity:.85;
}

.pageHero{
  position:relative;
  overflow:hidden;
  padding:38px 0 14px;
}
.breadcrumb{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  color:var(--ink-500); font-size:13px; font-weight:700;
}
.breadcrumb a:hover{text-decoration:none}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(15,18,34,.10);
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow-card);
}
.table th,.table td{
  padding:14px 16px;
  border-bottom:1px solid rgba(15,18,34,.08);
  text-align:left;
  vertical-align:top;
}
.table th{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-500);
}
.table tr:last-child td{border-bottom:none}

.form{
  display:grid; gap:12px;
}
.field label{
  display:block; font-size:12px; font-weight:900;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-500);
  margin:0 0 8px;
}
.field input,.field textarea, .field select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(15,18,34,.14);
  background:rgba(255,255,255,.86);
  font-size:15px;
  outline:none;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:rgba(0,116,148,.55);
  box-shadow:0 0 0 6px rgba(0,116,148,.12);
}

.notice{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(127,194,67,.40);
  background:rgba(127,194,67,.14);
  color:var(--blue-900);
}
.noticeTitle{font-weight:650; letter-spacing:.14em; text-transform:uppercase; font-variant-caps: all-small-caps; color:var(--blue-900)}

.hr{
  height:1px; background:rgba(15,18,34,.10); margin:18px 0;
}

.miniGrid{
  display:grid; gap:12px; margin-top:14px;
}
@media (min-width: 900px){.miniGrid{grid-template-columns: repeat(3, 1fr)}}

.tagCard{
  border-radius:var(--radius);
  background:rgba(255,255,255,.78);
  border:1px solid rgba(15,18,34,.10);
  box-shadow:var(--shadow-card);
  padding:18px;
}
.tagCard .t{font-weight:900}
.tagCard .d{color:var(--ink-600); margin-top:6px; line-height:1.6}

/* Ensure consistent stacking even when HTML uses inline elements (e.g. <b> + <span>) */
.tagCard b{display:block; margin:0; font-weight:900}
.tagCard span{display:block; margin-top:6px; color:var(--ink-600); line-height:1.6}

.muted{color:var(--ink-600)}
.small{font-size:13px}
.center{text-align:center}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto}
}


/* --- Envelope upgrades --- */
body.page-home{--accent:var(--green-500);--accent2:var(--blue-700)}
body.page-services{--accent:var(--blue-700);--accent2:var(--purple-600)}
body.page-industries{--accent:var(--purple-600);--accent2:var(--blue-700)}
body.page-resources,body.page-resource{--accent:var(--green-500);--accent2:var(--blue-700)}
body.page-contact{--accent:var(--blue-700);--accent2:var(--green-500)}
body.page-about{--accent:var(--purple-600);--accent2:var(--green-500)}

.hero{position:relative; overflow:hidden}
.hero:before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(60% 60% at 70% 30%, rgba(127,194,67,.18), rgba(0,0,0,0) 60%),
    radial-gradient(55% 55% at 30% 70%, rgba(102,95,173,.18), rgba(0,0,0,0) 55%),
    radial-gradient(50% 50% at 50% 50%, rgba(0,116,148,.18), rgba(0,0,0,0) 60%);
  filter: blur(18px);
  transform: translateZ(0);
  pointer-events:none;
}
.orbital{
  position:absolute; right:-120px; top:-140px;
  width:min(720px, 110vw); height:min(720px, 110vw);
  opacity:.85; pointer-events:none;
  transform: translate3d(0,0,0);
}
.orbitalSvg{width:100%; height:100%}


/* Brand hero mark: logo + rotating green orbits */
.orbital--logo{opacity:.95}
.orbital--logo .orbitalSvg,
.orbital--logo .orbitalDots{display:none}

.orbitSystem{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center}
.orbitSystem:before{
  content:"";
  position:absolute; inset:18%;
  background: radial-gradient(closest-side, rgba(127,194,67,.18), rgba(127,194,67,0));
  filter: blur(2px);
}
.orbitLogo{
  width: min(240px, 32%);
  height:auto;
  z-index:3;
  filter: drop-shadow(0 18px 40px rgba(6,18,24,.16));
}

.orbitRing{
  position:absolute;
  left:50%; top:50%;
  border-radius:999px;
  border:2px solid rgba(127,194,67,.28);
  box-shadow: 0 0 0 1px rgba(127,194,67,.06) inset, 0 0 26px rgba(127,194,67,.14);
  transform: translate(-50%,-50%);
  z-index:2;
}
.orbitRing:after{
  /* Decorative "satellite" dots removed per feedback (keep clean orbit rings) */
  content:none;
}
.orbitRing.r1{width:72%; height:72%; animation: ring1 22s linear infinite}
.orbitRing.r2{width:58%; height:58%; border-color: rgba(127,194,67,.24); animation: ring2 28s linear infinite}
.orbitRing.r3{width:46%; height:46%; border-color: rgba(127,194,67,.20); animation: ring3 34s linear infinite}

@keyframes ring1{from{transform: translate(-50%,-50%) rotate(0deg)} to{transform: translate(-50%,-50%) rotate(360deg)}}
@keyframes ring2{from{transform: translate(-50%,-50%) rotate(18deg) scaleY(.84)} to{transform: translate(-50%,-50%) rotate(378deg) scaleY(.84)}}
@keyframes ring3{from{transform: translate(-50%,-50%) rotate(-22deg) scaleY(.74)} to{transform: translate(-50%,-50%) rotate(-382deg) scaleY(.74)}}

@media (max-width: 980px){
  .orbital{right:-240px; top:-190px; opacity:.85}
  .orbitLogo{width:min(200px, 36%)}
}
@media (max-width: 760px){
  .orbital{right:-300px; top:-230px; opacity:.78}
  .orbitLogo{width:min(170px, 40%)}
}
.orbitalSvg path{
  stroke: rgba(127,194,67,.9);
  stroke-width:3;
  stroke-linecap:round;
  fill:none;
  stroke-dasharray: 1200;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 18px rgba(127,194,67,.22));
  animation: dash 10s ease-in-out infinite;
}
@keyframes dash{
  0%{stroke-dashoffset:0; opacity:.75}
  50%{stroke-dashoffset:-220; opacity:1}
  100%{stroke-dashoffset:0; opacity:.75}
}
.orbitalSvg{animation: spin 26s linear infinite}
@keyframes spin{to{transform: rotate(360deg)}}

.orbitalDots{position:absolute; inset:0}
.orbitalDots .dot{
  position:absolute; width:10px; height:10px; border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(127,194,67,.15), 0 0 22px rgba(127,194,67,.35);
  transform: translate(-50%,-50%);
}
.orbitalDots .d1{left:63%; top:26%; animation: orb1 8s linear infinite}
.orbitalDots .d2{left:78%; top:52%; width:7px; height:7px; animation: orb2 10s linear infinite}
.orbitalDots .d3{left:56%; top:74%; width:8px; height:8px; animation: orb3 12s linear infinite}
.orbitalDots .d4{left:36%; top:64%; width:6px; height:6px; animation: orb4 9s linear infinite}
.orbitalDots .d5{left:40%; top:36%; width:9px; height:9px; animation: orb5 11s linear infinite}
.orbitalDots .d6{left:22%; top:48%; width:7px; height:7px; background: var(--accent2); box-shadow: 0 0 0 6px rgba(102,95,173,.14), 0 0 22px rgba(102,95,173,.28); animation: orb6 13s linear infinite}

@keyframes orb1{to{transform: translate(-50%,-50%) rotate(360deg) translateX(120px) rotate(-360deg)}}
@keyframes orb2{to{transform: translate(-50%,-50%) rotate(-360deg) translateX(170px) rotate(360deg)}}
@keyframes orb3{to{transform: translate(-50%,-50%) rotate(360deg) translateX(210px) rotate(-360deg)}}
@keyframes orb4{to{transform: translate(-50%,-50%) rotate(-360deg) translateX(140px) rotate(360deg)}}
@keyframes orb5{to{transform: translate(-50%,-50%) rotate(360deg) translateX(190px) rotate(-360deg)}}
@keyframes orb6{to{transform: translate(-50%,-50%) rotate(-360deg) translateX(230px) rotate(360deg)}}

/* Scroll reveal */
.reveal{opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease}
.reveal.is-in{opacity:1; transform:none}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.delay-3{transition-delay:.24s}

/* Tilt cards */
.tilt{transform-style:preserve-3d; will-change:transform}
.tilt .tiltGlow{
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0;
  background: radial-gradient(220px 220px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  transition: opacity .2s ease;
}
.tilt:hover .tiltGlow{opacity:1}

/* Page hero variations */
.pageHero{position:relative; overflow:hidden}
.pageHero:before{
  content:""; position:absolute; inset:-35%;
  background:
    radial-gradient(55% 55% at 20% 30%, rgba(0,116,148,.18), rgba(0,0,0,0) 58%),
    radial-gradient(55% 55% at 80% 70%, rgba(127,194,67,.16), rgba(0,0,0,0) 55%);
  filter: blur(16px); pointer-events:none;
}
body.page-industries .pageHero:before{
  background:
    radial-gradient(55% 55% at 25% 35%, rgba(102,95,173,.18), rgba(0,0,0,0) 60%),
    radial-gradient(55% 55% at 78% 68%, rgba(0,116,148,.16), rgba(0,0,0,0) 55%);
}
body.page-resources .pageHero:before, body.page-resource .pageHero:before{
  background:
    radial-gradient(55% 55% at 25% 35%, rgba(127,194,67,.18), rgba(0,0,0,0) 60%),
    radial-gradient(55% 55% at 78% 68%, rgba(0,116,148,.16), rgba(0,0,0,0) 55%);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .orbitalSvg, .orbitalSvg path, .orbitalDots .dot, .orbitRing,
  .brandOrbit .rings, .brandOrbitBg,
  .grad, .card:before, .card .icon{animation:none !important}
  .reveal{transition:none}
}

.ill{width:100%;max-width:210px;height:auto;display:block;margin:0 0 10px}
.card .ill{opacity:.95}
@media (min-width:900px){.card .ill{max-width:240px}}

/* --- Final tweaks: nav + media cards + workflow checks --- */
.navcta .btn{white-space:nowrap}

/* Home hero CTA placement */
.heroCtaRow{display:flex;justify-content:flex-start;gap:10px;flex-wrap:wrap}
.hero .heroCtaRow{margin-top:14px}
@media (max-width: 760px){.heroCtaRow{justify-content:flex-start}}

/* Integrations/ATS graphic card
   Goal: always readable, never cropped, never offsets weirdly across browsers.
   We use flex-centering and let the image size itself with object-fit:contain. */
.mediaCard{
  padding:0 !important;
  overflow:hidden;
  min-height:260px;
  display:flex;
  /* Services uses this component as an "image over actions" stack.
     Column layout prevents CTAs from getting squeezed/cropped. */
  flex-direction:column;
  align-items:stretch;
  justify-content:stretch;
  background:linear-gradient(135deg, rgba(0,116,148,.06), rgba(102,95,173,.06));
}
.mediaCard > img{
  width:100%;
  height:auto;
  max-width:none;
  max-height:none;
  /* Use contain so the ATS list never clips (cropping reads as “broken” in judge-eyes QA). */
  object-fit:contain;
  object-position:center;
  display:block;
  flex: 1 1 auto;
}

/* Center the service illustrations only (keep body text left-aligned) */
.svcMain .ill{margin:0 auto 14px;}

.wfTitle{display:flex; align-items:center; gap:10px; font-weight:650; font-variant-caps: all-small-caps; letter-spacing:.10em}
.wfTitle .check{margin-top:0}

/* Main vertical cards on Services page */
.svcMain h3{letter-spacing:.12em; font-variant-caps: all-small-caps; font-weight:650}

.iconShowcase{background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important}


.footerTitle{font-weight:650; letter-spacing:.12em; font-size:13px; opacity:.9; color:rgba(255,255,255,.72); font-variant-caps: all-small-caps; text-transform:none}
/* Short divider above footer column headings (Explore / Legal / Get In Touch) — mobile only */
.footerTitle:before{content:none;display:none}
@media (max-width: 980px){
  .footerTitle:before{content:none !important; display:none !important}
}
/* About page orbit showcase: remove card chrome */
.iconShowcase{background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important}

.resourceSearchRow{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
@media (max-width:520px){.resourceSearchRow .btn{width:100%}}

/* FAQ + Glossary */
.faqList{margin-top:18px; display:grid; gap:12px}
.faqItem{border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); border-radius:16px; padding:14px 16px}
.faqItem summary{cursor:pointer; list-style:none; display:flex; gap:10px; align-items:flex-start; font-weight:700}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem summary:before{content:"+"; width:18px; height:18px; display:inline-grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:8px; flex:0 0 auto; margin-top:2px}
.faqItem[open] summary:before{content:"–"}
.faqItem .answer{margin-top:10px; color:rgba(255,255,255,.82)}
.glossaryGrid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:14px}
@media (max-width: 820px){.glossaryGrid{grid-template-columns:1fr}}
.glossTerm{border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); border-radius:16px; padding:14px}
.glossTerm b{display:block}

/* POCT callout */
.poctCallout{margin-top:22px; border-radius:22px; border:1px solid rgba(127,194,67,.28); background:linear-gradient(135deg, rgba(127,194,67,.12), rgba(0,116,148,.10), rgba(102,95,173,.08)); padding:18px 18px}
.poctCallout .row{display:flex; gap:18px; align-items:center; justify-content:space-between}
.poctCallout h3{margin:0; font-size:18px}
.poctCallout p{margin:6px 0 0 0; max-width:62ch}
@media (max-width: 820px){.poctCallout .row{flex-direction:column; align-items:flex-start}}

/* POCT section (Home) */
.poctSection{
  padding:34px 0;
  background:linear-gradient(135deg, rgba(127,194,67,.14), rgba(0,116,148,.12), rgba(102,95,173,.10));
  border-top:1px solid rgba(197,197,197,.35);
  border-bottom:1px solid rgba(197,197,197,.35);
}
.poctSection .lede{max-width:72ch}
@media (max-width: 820px){
  .poctSection{padding:28px 0}
  .poctSection .grid2{gap:16px}
  .poctSection .grid2 > div:last-child{justify-content:flex-start}
}

/* POCT page (instant-tests.html) */
.page-poct .pageHero{padding-bottom:34px}
.poctJump{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
@media (max-width: 980px){.poctJump{grid-template-columns:1fr}}
.poctJumpCard{display:flex; gap:16px; align-items:center; text-decoration:none; color:inherit; padding:18px}
.poctMini{
  width:96px; height:96px; flex:0 0 96px;
  display:grid; place-items:center;
  border-radius:22px;
  border:1px solid rgba(15,18,34,.10);
  background:linear-gradient(135deg, rgba(127,194,67,.12), rgba(0,116,148,.10), rgba(102,95,173,.08));
  box-shadow:var(--shadow-tight);
}
.poctMini img{width:62px; height:62px; display:block}
.poctLink{display:inline-flex; gap:8px; align-items:center; margin-top:12px; font-weight:500; color:var(--blue-800)}
.poctJumpCard:hover .poctLink{text-decoration:none}

.poctBlock{margin-top:22px}
.poctSteps{display:grid; gap:10px}
.poctSteps .step{display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid rgba(15,18,34,.10); border-radius:16px; background:rgba(255,255,255,.70)}
.stepIcon{width:30px; height:30px; border-radius:12px; display:grid; place-items:center; font-weight:500; background:rgba(0,116,148,.12); border:1px solid rgba(0,116,148,.18); color:rgba(0,116,148,.95); flex:0 0 auto}

.poctTips{display:grid; gap:10px}
@media (min-width: 700px){.poctTips{grid-template-columns:repeat(3, minmax(0,1fr))}}
.poctTips .tip{padding:12px; border:1px solid rgba(15,18,34,.10); border-radius:16px; background:rgba(255,255,255,.70)}

.poctNote{padding:12px 14px; border-radius:16px; border:1px dashed rgba(15,18,34,.18); background:rgba(255,255,255,.64)}


/* Insights */
.insightsGrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:16px}
@media (max-width: 980px){.insightsGrid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 640px){.insightsGrid{grid-template-columns:1fr}}
.insightCard{position:relative; overflow:hidden}
.insightCard .meta{display:flex; gap:10px; align-items:center; font-size:12px; opacity:.78}

/* Services page — core competencies as teaser rows */
.svcRow{margin-top:18px}
.svcLabel{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.svcBadge{width:44px; height:44px; border-radius:16px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(197,197,197,.55); background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(246,246,246,.60)); box-shadow:0 18px 48px rgba(20,28,55,.10); color:rgba(11,18,37,.92)}
.svcBadge svg{width:20px; height:20px}
.svcRow .lede{max-width:62ch}

/* IMPORTANT: .grid2 becomes 2 columns at 900px; keep reverse swap aligned to avoid implicit columns and broken layouts (821–899px). */
@media (min-width: 900px){
  .fullBleed.reverse .inner > :first-child{grid-column:2}
  .fullBleed.reverse .inner > :nth-child(2){grid-column:1}
}

.svcVisualCard{padding:0 !important; overflow:hidden}
.svcVisualCard .mediaCard{
  min-height:260px;
  padding:22px !important;
  align-items:center;
  justify-content:center;
  position:relative;
}
/*
  Services visuals: on some mobile browsers (notably iOS Safari), SVG <img> elements inside
  flex containers can mis-measure and end up left-aligned or visually "cropped".
  Anchor the illustration absolutely so it always stays centered and fully contained.
*/
.svcVisualCard .mediaCard > img{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(360px, 88%);
  height:auto;
  max-width:calc(100% - 44px);
  max-height:calc(100% - 44px);
  object-fit:contain;
  flex:0 0 auto;
}

/* Optical centering tweaks for specific illustrations */
.svcVisualCard .mediaCard > img[src*="ill-drug"]{
  top:46.5%;
}
.svcActions{display:flex; gap:10px; padding:14px 16px; border-top:1px solid rgba(197,197,197,.45); background:rgba(255,255,255,.56); backdrop-filter: blur(10px); justify-content:center; flex-wrap:wrap; margin-top:auto; width:100%}
.svcActions .btn{flex:1 1 220px; justify-content:center}

@media (max-width: 820px){
  .svcVisualCard .mediaCard{min-height:220px; padding:16px !important}
  .svcVisualCard .mediaCard > img{width:min(340px, 92%); max-width:calc(100% - 32px); max-height:calc(100% - 32px)}
  .svcActions{flex-direction:column; align-items:stretch}
  .svcActions .btn{width:100%; justify-content:center}
}

/* Services page — split layout (used for Drug Testing to guarantee icon centering within its own media window) */
.svcSplit{display:grid; grid-template-columns:1fr; gap:14px; align-items:stretch}
@media (min-width: 980px){
  .svcSplit{grid-template-columns:1fr 1fr; gap:18px}
  /* Match the existing reverse behavior so the visual card sits left and copy sits right */
  .svcSplitRow.reverse .svcSplitLeft{grid-column:1}
  .svcSplitRow.reverse .svcSplitRight{grid-column:2}
  .svcSplitRow:not(.reverse) .svcSplitLeft{grid-column:2}
  .svcSplitRow:not(.reverse) .svcSplitRight{grid-column:1}
}

.svcSplitCard{padding:0 !important; overflow:hidden}

/* LEFT: stable media window + stacked CTAs */
.svcSplitMedia{position:relative; padding:22px; min-height:260px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.svcSplitBg{position:absolute; inset:0; background:linear-gradient(135deg, rgba(127,194,67,.12), rgba(246,246,246,.35), rgba(102,95,173,.10))}
.svcSplitMediaInner{position:relative; border-radius:22px; padding:18px; background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.06); box-shadow:0 18px 48px rgba(20,28,55,.10)}
.svcSplitImg{display:block; width:min(300px, 70vw); height:auto; max-width:100%; object-fit:contain}

.svcSplitButtons{padding:16px; border-top:1px solid rgba(197,197,197,.45); background:rgba(255,255,255,.56); backdrop-filter: blur(10px); display:flex; flex-direction:column; gap:10px}
.svcSplitButtons .btn{width:100%; justify-content:center}

/* RIGHT: content card with CTAs pinned to bottom */
.svcSplitRight{padding:22px !important; display:flex; flex-direction:column}
.svcSplitRight .lede{max-width:62ch}
.svcSplitCtas{margin-top:auto; padding-top:16px; display:flex; flex-direction:column; gap:10px}
.svcSplitCtas .btn{width:100%; justify-content:center}

@media (max-width: 820px){
  .svcSplitMedia{min-height:220px; padding:16px}
  .svcSplitMediaInner{padding:16px}
  .svcSplitImg{width:min(280px, 78vw)}
  .svcSplitRight{padding:18px !important}
}


/* --- Services: feature layout (robust, icon centered in its own window) --- */
.svcShowcase{ margin-top: 10px; }
.svcFeatureStack{ display:flex; flex-direction:column; gap:18px; }
.svcFeatureGrid{ display:flex; flex-wrap:wrap; gap:28px; align-items:stretch; }
.svcFeatureGrid--reverse{ flex-direction:row-reverse; }

.svcFeatureCopy{ flex:1 1 460px; min-width:280px; }
.svcFeatureMedia{ flex:0 0 340px; display:flex; flex-direction:column; gap:12px; }

.svcMediaWindow{
  height:220px;
  border-radius:24px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.55);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.svcMediaWindow::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(800px 260px at 10% 10%, rgba(127,194,67,.14), transparent 60%),
    radial-gradient(700px 240px at 90% 25%, rgba(102,95,173,.16), transparent 55%),
    radial-gradient(700px 260px at 35% 100%, rgba(0,116,148,.18), transparent 60%);
}
.svcMediaImg{ width:62%; max-width:220px; height:auto; position:relative; }

.svcFeatureButtons{ display:flex; flex-direction:column; gap:10px; }
.svcBadge img.svcMiniIcon{ width:18px; height:18px; display:block; }

 /* Services page — core competency label prominence */
.svcShowcase .svcLabel .eyebrow{
  font-size:16px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-variant-caps: normal;
  color:var(--blue-800);
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .svcShowcase .svcLabel .eyebrow{
    background:linear-gradient(90deg, rgba(0,116,148,.98), rgba(102,95,173,.95), rgba(127,194,67,.95));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}
@media (max-width: 520px){
  .svcShowcase .svcLabel .eyebrow{font-size:14px; letter-spacing:.20em}
}


@media (max-width: 980px){
  .svcFeatureMedia{ flex:1 1 340px; }
}
@media (max-width: 720px){
  .svcMediaWindow{ height:200px; }
}
@media (max-width: 520px){
  .svcFeatureGrid{ gap:18px; }
  .svcMediaWindow{ height:180px; }
  .svcMediaImg{ width:70%; }
}



/* -----------------------------------------
   Contest polish: interaction + responsive
----------------------------------------- */

/* Consistent keyboard focus across the site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible{
  outline:3px solid rgba(0,116,148,.38);
  outline-offset:3px;
  border-radius:14px;
}

/* Smooth scrolling (respects reduced motion) */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* Anchor targets: account for sticky nav */
section[id], [id].anchorTarget, .anchorTarget{
  scroll-margin-top:96px;
}

/* Desktop hover polish (avoid sticky hover on touch) */
@media (hover:hover) and (pointer:fine){
  .navlinks a:hover{background:rgba(0,116,148,.08)}
  .navlinks a:active{transform:translateY(1px)}
}

/* Make :hover effects behave on touch devices */
@media (hover:none){
  .card:hover{transform:none; box-shadow:var(--shadow-card)}
  .btn:hover{transform:none; box-shadow:var(--shadow-tight)}
}

/* POCT category cards: clearer affordance + nicer hover/focus */
.poctJumpCard{
  border-color:rgba(15,18,34,.12);
  will-change:transform, box-shadow;
}
.poctJumpCard:focus-visible{
  outline:3px solid rgba(0,116,148,.40);
  outline-offset:4px;
}
@media (hover:hover) and (pointer:fine){
  .poctJumpCard:hover{
    border-color:rgba(0,116,148,.26);
    box-shadow:0 28px 70px rgba(15,18,34,.14);
  }
  .poctJumpCard:hover .poctMini{
    transform:translateY(-1px) scale(1.02);
    box-shadow:0 18px 44px rgba(15,18,34,.12);
  }
}
.poctLink{
  position:relative;
  text-decoration:none;
}
.poctLink::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  height:2px;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:rgba(0,116,148,.55);
  transition:transform .18s var(--ease-out);
}
.poctJumpCard:hover .poctLink::after,
.poctJumpCard:focus-visible .poctLink::after{
  transform:scaleX(1);
}

/* POCT responsive tightening */
@media (max-width: 520px){
  .poctJump{gap:12px}
  .poctJumpCard{padding:16px; gap:14px}
  .poctMini{
    width:78px; height:78px; flex:0 0 78px;
    border-radius:20px;
  }
  .poctMini img{width:52px; height:52px}
  .pageHero.poctHero .h1{font-size:clamp(30px,7.2vw,44px) !important}
}

/* -----------------------------------------
   Contest polish: mobile + micro-interactions
----------------------------------------- */

/* Mobile CTAs: stack + full width for better tap targets */
@media (max-width: 520px){
  .heroCtaRow{flex-direction:column; align-items:stretch}
  .heroCtaRow .btn{width:100%; justify-content:center}
}

/* Buttons: consistent active press on desktop */
@media (hover:hover) and (pointer:fine){
  .btn:active{transform:none; box-shadow:var(--shadow-tight)}
}

/* Card links: no underline; dim on hover/focus (sitewide) */
.card a.link{position:relative; text-decoration:none}
.card:hover a.link,
.card a.link:focus-visible{opacity:.78}

/* POCT: make mini icon tile feel "clickable" */
.poctMini{transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out)}

/* POCT: improve FAQ contrast + affordance inside light cards */
.page-poct .poctFaq .faqItem{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,18,34,.10);
}
.page-poct .poctFaq summary{color:var(--ink-900)}
.page-poct .poctFaq summary:before{border-color:rgba(15,18,34,.18)}
.page-poct .poctFaq .answer{color:var(--ink-700)}
@media (hover:hover) and (pointer:fine){
  .page-poct .poctFaq .faqItem:hover{border-color:rgba(0,116,148,.22)}
}


/* Mobile hero refinements (no visual change to desktop) */
@media (max-width: 980px){
  /* Place the brand orbit icon above the hero copy on mobile */
  .hero .grid{display:flex; flex-direction:column; align-items:flex-start}
  /* Right-align and scale down the orbit icon on mobile */
  .hero .heroArt{order:-1; width:100%; justify-content:flex-end; min-height:160px; margin:0 0 8px}
  .hero .brandOrbit--home{--orbit-size: min(132px, 35vw)}
  /* Slightly smaller "Human decisions • system clarity" pill */
  .hero .kicker{font-size:11px; padding:5px 9px; gap:7px}
  .hero .kicker .mini{width:8px; height:8px}
  /* Remove the "Trusted by..." line on mobile */
  .hero .trustedLine{display:none !important}
}


/* =========================
   Link hover behavior
   - No underline on hover/focus
   - Dim text slightly (non-button links)
   ========================= */
a:hover,
a:focus {
  text-decoration: none !important;
  border-bottom: none !important;
}

a:not(.btn):not(.pill):not(.nav-cta):not(.chip):not(.badge):hover,
a:not(.btn):not(.pill):not(.nav-cta):not(.chip):not(.badge):focus {
  opacity: 0.72;
}

/* Remove any decorative underline effects implemented via pseudo-elements */
.card a.link::after,
.poctLink::after,
a.link::after{
  content:none !important;
  display:none !important;
  background:none !important;
  transform:none !important;
}