/* base reset */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* ============================ site ============================ */
/* ============================================================
   Comtech — design tokens sampled from the source designs
   ============================================================ */
:root{
  --navy:#010C2C;
  --navy-soft:#0A1A45;
  --blue:#0971B7;
  --blue-deep:#075C95;
  --blue-bright:#1789D6;
  --tint:#DDE9FF;
  --tint-line:#C4D6F5;
  --ink:#09090A;
  --body:#1C1E21;
  --muted:#5B6474;
  --muted-soft:#8C94A3;
  --card:#FFFFFF;
  --page:#FFFFFF;
  --line:#E3E9F3;
  --shadow-sm:0 1px 2px rgba(1,12,44,.05), 0 4px 14px rgba(1,12,44,.06);
  --shadow-md:0 2px 6px rgba(1,12,44,.06), 0 14px 34px rgba(1,12,44,.09);
  --maxw:1248px;
  --pad:24px;
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-pill:999px;

  /* ---- type scale ----------------------------------------------
     a 1.25 ladder off a 17px body, rounded to whole pixels. every
     piece of text on the site resolves to one of these steps, so a
     heading can never land halfway between two sizes. */
  --fs-micro:11.5px;   /* badges, menu overlines                   */
  --fs-mono:12px;      /* monospace labels (reads ~1px smaller)    */
  --fs-100:13px;       /* micro labels, table captions             */
  --fs-200:15px;       /* secondary copy, captions                 */
  --fs-ctl:16px;       /* buttons + inputs (>=16px: no iOS zoom)   */
  --fs-300:17px;       /* body                                     */
  --fs-lede:19px;      /* section lede, one step above body        */
  --fs-400:22px;       /* card title                               */
  --fs-500:26px;       /* h3                                       */
  --fs-550:30px;       /* band heading                             */
  --fs-600:clamp(27px,3.1vw,40px);   /* h2                         */
  --fs-700:clamp(30px,3.6vw,46px);   /* page h1                    */
  --fs-800:clamp(34px,4.4vw,56px);   /* hero h1                    */

  /* ---- line height: tight for display, open for reading -------- */
  --lh-display:1.08;
  --lh-head:1.2;
  --lh-snug:1.4;
  --lh-tight:1.5;
  --lh-body:1.62;
  --lh-long:1.72;

  /* ---- spacing: a 8px rhythm, 4px for the smallest gaps -------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:40px; --sp-8:56px; --sp-9:72px; --sp-10:96px;

  /* ---- control sizes ------------------------------------------- */
  --ctl-h:60px;        /* primary call to action                   */
  --ctl-h-sm:48px;     /* inline / compact button                  */
  --ctl-h-field:52px;  /* text input                               */
  --tap:44px;          /* minimum touch target                     */
  --hdr-h:62px;
  --hdr-top:18px;
  --bg-about:url("../img/backgrounds/about.jpg");
  --bg-career:url("../img/backgrounds/careers.jpg");
  --bg-contact:url("../img/backgrounds/contact.jpg");
  --bg-services:url("../img/backgrounds/services.jpg");
  --bg-contract:url("../img/backgrounds/contracts.jpg");
  --bg-band:url("../img/backgrounds/band.jpg");
  --bg-plat:url("../img/backgrounds/platforms.jpg");
  --font:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--page);
  color:var(--body);
  font-family:var(--font);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);line-height:var(--lh-head);text-wrap:balance;font-weight:700;letter-spacing:-.015em}
p{margin:0}
figure,figcaption,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blue-bright);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type scale ---------- */
.h1{font-size:var(--fs-800);font-weight:700;line-height:var(--lh-display);letter-spacing:-.022em}
.h2{font-size:var(--fs-600);font-weight:700;line-height:1.14;letter-spacing:-.018em}
.h3{font-size:var(--fs-500);font-weight:700;line-height:1.22;letter-spacing:-.015em}
.h4{font-size:var(--fs-400);font-weight:700;line-height:1.28;letter-spacing:-.012em}
.h5{font-size:var(--fs-lede);font-weight:700;line-height:1.32;letter-spacing:-.01em}
.eyebrow{
  font-size:var(--fs-200);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-deep);margin:0
}
/* a lede must read as a step above body, not the same size as it */
.lede{font-size:var(--fs-lede);line-height:var(--lh-body);color:var(--body)}
.muted{color:var(--muted)}
.accent{color:var(--blue)}
.center{text-align:center}
/* 45-75 characters is the readable line; nothing here goes past it */
.measure{max-width:66ch}
.measure-wide{max-width:76ch}

/* ---------- buttons ---------- */
/* every variant carries the same 1.5px border, transparent on the solid
   one, so filled and outlined buttons measure the same height to the pixel */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:var(--ctl-h);padding:0 30px;border:1.5px solid transparent;
  border-radius:var(--r-pill);
  font-size:var(--fs-ctl);font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  line-height:1.2;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:15px;height:15px;flex:none}
.btn-sm{min-height:var(--ctl-h-sm);padding:0 24px}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep)}
.btn-ghost{border-color:rgba(255,255,255,.85);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-outline{border-color:var(--blue-deep);color:var(--blue-deep)}
.btn-outline:hover{background:var(--blue-deep);color:#fff}
.link-more{
  display:inline-flex;align-items:center;gap:5px;min-height:24px;
  color:var(--blue-deep);font-size:var(--fs-200);font-weight:600
}
.link-more:hover{color:var(--navy-soft);text-decoration:underline;text-underline-offset:3px}

/* ---------- header ---------- */
.hdr-wrap{position:sticky;top:var(--hdr-top);z-index:120}
.hdr{
  margin:0 24px;height:var(--hdr-h);
  background:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 48%,#EFEFEF 100%);
  border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px 0 24px;
  box-shadow:0 8px 24px rgba(1,12,44,.15);
}
.brand img{height:29px;width:auto}
.nav{display:flex;align-items:center;gap:23px}
.nav > * {position:relative}
.nav-link{
  font-size:var(--fs-200);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);padding:7px 0;display:inline-flex;align-items:center;gap:6px;
  min-height:38px;
  transition:color .16s ease
}
.nav-link:hover{color:var(--blue)}
.nav-link.is-active{color:var(--blue)}
.nav-link .chev{width:12px;height:12px;transition:transform .2s ease}
.has-menu.open .chev{transform:rotate(180deg)}
.menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:270px;background:#fff;border-radius:var(--r);
  box-shadow:var(--shadow-md);border:1px solid var(--line);
  padding:10px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease
}
.has-menu.open .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu a{
  display:block;padding:11px 16px;border-radius:var(--r-sm);
  font-size:var(--fs-ctl);font-weight:600;color:var(--body)
}
.menu a:hover{background:var(--tint);color:var(--blue)}
.menu-head{
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:6px 16px 8px
}
.menu-wide{min-width:600px}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.menu-start{left:0;transform:translateX(0) translateY(-6px)}
.has-menu.open .menu-start{transform:translateX(0) translateY(0)}
.menu-end{left:auto;right:0;transform:translateX(0) translateY(-6px)}
.has-menu.open .menu-end{transform:translateX(0) translateY(0)}
.burger{display:none;width:var(--tap);height:var(--tap);align-items:center;justify-content:center;border-radius:var(--r-sm)}
.burger svg{width:23px;height:23px}

/* ---------- page shell ---------- */
main{margin-top:calc(-1 * (var(--hdr-h) + var(--hdr-top)))}
.page{display:none}
.page.is-on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ---------- sections ---------- */
.sec{padding-top:var(--sp-9);padding-bottom:var(--sp-9)}
.sec-tight{padding-top:52px;padding-bottom:52px}
.sec-tint{background:var(--tint)}
.sec-white{background:#fff}
.stack{display:flex;flex-direction:column;gap:22px}
.stack-sm{display:flex;flex-direction:column;gap:14px}
.sec-head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:36px}
.sec-head p.measure-wide{color:var(--body)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--navy);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center right;
}
.hero-about::before{background-image:var(--bg-about)}
.hero-career::before{background-image:var(--bg-career)}
.hero-contact::before{background-image:var(--bg-contact)}
.hero-services::before{background-image:var(--bg-services)}
.hero-contract::before{background-image:var(--bg-contract);background-position:center}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(97deg,rgba(1,12,44,.94) 0%,rgba(1,12,44,.80) 34%,rgba(1,12,44,.30) 62%,rgba(1,12,44,.12) 100%);
}
/* live particle network — a canvas laid over whatever image the hero uses.
   The mask keeps it to the right of the headline, whatever the image is. */
.hero-stars{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.95;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 50%,#000 72%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,transparent 50%,#000 72%,#000 95%,transparent 100%);
}
/* narrower viewports: the copy column takes more of the width, so the
   field has to start further right to stay clear of it */
@media (max-width:1180px){
  .hero-stars{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 62%,#000 80%,#000 96%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,transparent 62%,#000 80%,#000 96%,transparent 100%)
  }
}
@media (max-width:820px){
  .hero-stars{
    opacity:.5;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 92%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 92%,transparent 100%)
  }
}
/* ---------- home hero: flat navy + the live AI scene, all drawn in code ---------- */
.hero-ai{background:var(--navy)}
.hero-ai::before{background-image:none}
.hero-ai::after{
  background:linear-gradient(97deg,rgba(1,12,44,.72) 0%,rgba(1,12,44,.42) 34%,rgba(1,12,44,0) 62%)
}
/* the node field that drifts across the whole banner */
.hero-bgnet{
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  pointer-events:none;opacity:.9
}
.hero-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:30px;align-items:center}
/* the headline keeps the site's full heading size and stays on two lines:
   it is allowed to run a little past its column, into empty space, rather
   than wrapping to three */
@media (min-width:861px){
  .hero-ai .hero-copy .h1{width:max-content;max-width:none}
}
.hero-ai .hero-inner{padding-top:143px;padding-bottom:46px}
@media (max-width:900px){
  .hero-ai .hero-inner{padding-top:136px}
}
/* the copy starts at the top of the row, so the band of space under the
   header is the same width at every screen size; the scene, which is usually
   the taller of the two, stays centred against it */
.hero-ai .hero-copy{align-self:start}
/* the scene rides a little higher than the copy beside it. A transform, so
   only the picture moves and the text keeps the position it has */
@media (min-width:861px){
  .hero-ai .hero-stage{transform:translateY(-25px)}
}
/* the two buttons sit side by side under the paragraph, both the same width,
   sized to the wider of the two labels */
.hero-ai .hero-copy .hero-actions{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  width:max-content;max-width:none;gap:12px;margin-top:6px
}
.hero-ai .hero-copy .hero-actions .btn{
  justify-content:center;padding-left:14px;padding-right:14px;gap:9px
}
/* the row may run a little past the text column rather than stretching the
   column and squeezing the scene beside it */
.hero-ai .hero-copy{min-width:0}
/* under 1300px there is not room for both at full label width, so they share
   the column half and half - still side by side, with the label wrapping */
@media (max-width:1299px){
  .hero-ai .hero-copy .hero-actions{
    grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;gap:12px
  }
  .hero-ai .hero-copy .hero-actions .btn{
    text-align:center;white-space:normal;min-width:0;
    padding:0 12px;gap:7px;line-height:1.12;font-size:var(--fs-200);
    height:60px   /* the same height as "Learn more about us" further down */
  }
}
@media (max-width:620px){
  .hero-ai .hero-copy .hero-actions .btn{height:54px}
}
.hero-stage{position:relative;width:100%;height:clamp(430px,44vw,560px)}
#heroScene{position:absolute;inset:0;width:100%;height:100%}
.hero-center{position:absolute;left:0;top:0;width:0;height:0}
.hero-ring{
  position:absolute;border-radius:50%;border:2px solid #3FD0FF;opacity:.9;pointer-events:none;
  animation:heroRing 2.2s ease-out forwards
}
@keyframes heroRing{to{transform:scale(var(--sc,3));opacity:0}}
svg.hero-links{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none;z-index:3}
svg.hero-links line{stroke:#8CC8FF;stroke-width:1.8;stroke-dasharray:6 6;filter:drop-shadow(0 0 4px #4A9DFF)}

/* the boxes that pop out of the circle */
.hero-chip{
  position:absolute;left:0;top:0;z-index:4;display:flex;align-items:center;gap:11px;
  padding:10px 16px 10px 10px;border-radius:16px;will-change:transform,opacity;
  background:linear-gradient(135deg,rgba(24,70,180,.92),rgba(8,28,92,.94));
  border:1px solid #7CBCFF;
  box-shadow:0 0 22px rgba(63,140,255,.53),0 0 4px rgba(159,212,255,.9),inset 0 0 14px rgba(90,168,255,.2);
  backdrop-filter:blur(4px)
}
.hero-chip .chip-i{
  flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#4F9BFF,#0D3290);box-shadow:0 0 12px #5AAAFF
}
.hero-chip .chip-i svg{width:21px;height:21px;color:#fff}
.hero-chip .chip-i.num{font-style:normal;font-weight:800;font-size:var(--fs-300);color:#fff;line-height:1}
.hero-chip b{display:block;font-size:var(--fs-200);font-weight:700;color:#fff;line-height:1.2}
.hero-chip .chip-t{min-width:0;flex:1;text-align:center}
.hero-chip span.chip-d{display:block;margin-top:3px;font-size:var(--fs-micro);color:#BCD9FF;line-height:1.3}
.hero-chip.is-hl{border-color:#A8ECFF;box-shadow:0 0 30px rgba(63,208,255,.8),0 0 6px #D6F6FF,inset 0 0 16px rgba(90,208,255,.27)}
.hero-chip.is-stat{padding:11px 18px}
.hero-chip.is-stat b{font-size:var(--fs-400);color:#AEE6FF;letter-spacing:.2px}
/* the Why Comtech cards read as a quiet label with the figure under it */
.hero-chip .chip-l{display:block;font-size:var(--fs-100);font-weight:500;color:#CFE1FF;line-height:1.2}
.hero-chip.is-figure b{font-size:var(--fs-400);letter-spacing:.2px;margin-top:2px}

/* the small label that names the set on show */
.hero-tag{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:5;opacity:0;white-space:nowrap;
  font-size:var(--fs-200);font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#E4F2FF;text-shadow:0 1px 10px rgba(1,12,44,.85),0 0 22px rgba(10,30,80,.8)
}
/* on a roomy stage the set name sits low inside the circle, over the portrait */
.hero-tag.is-inside{
  transform:translate(-50%,-100%);white-space:normal;text-align:center;line-height:1.26
}
@media (max-width:1080px){
  .hero-grid{gap:22px}
  .hero-stage{height:clamp(400px,46vw,500px)}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .hero-stage{height:440px}
  .hero-chip{padding:8px 12px 8px 8px;gap:8px}
  .hero-chip .chip-i{width:32px;height:32px}
  .hero-chip .chip-i svg{width:17px;height:17px}
  .hero-chip b{font-size:var(--fs-100)}
  .hero-chip .chip-l{font-size:var(--fs-micro)}
  .hero-chip.is-figure b{font-size:var(--fs-300)}
  .hero-chip.is-stat b{font-size:var(--fs-lede)}
  .hero-chip span.chip-d{font-size:var(--fs-micro)}
}
@media (max-width:520px){
  .hero-stage{height:380px}
}
.hero-inner{padding-top:136px;padding-bottom:78px;color:#fff;position:relative;z-index:1}
.hero-inner h1{color:#fff}
.hero-copy{max-width:600px;display:flex;flex-direction:column;gap:22px}
.hero-copy p{color:#EAEEF7}
/* sits between the h1 and the body copy in scale */
.hero-sub{
  font-size:clamp(19px,1.9vw,26px);font-weight:600;line-height:1.35;
  letter-spacing:-.012em;color:#CFE0F4;margin-top:-4px
}
.hero-actions{display:flex;flex-wrap:wrap;gap:22px;margin-top:6px}
/* the home hero's three buttons sit centred across the full page width,
   as equal-width columns sized to the widest label */
.hero-actions-center{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:22px;width:max-content;max-width:100%;margin:46px auto 0
}
.hero-actions-center .btn{justify-content:center}
@media (max-width:760px){
  .hero-actions-center{
    grid-auto-flow:row;grid-auto-columns:auto;width:auto;gap:14px;margin-top:34px
  }
}
/* ---------- breadcrumb ----------
   One rule for every page: same size, same weight, same tracking, same
   colours, and always directly above the page title. Links are the light
   accent blue, the separators are dimmer, and the page you are on is a
   plain neutral so it does not read as another link. */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;
  font-size:var(--fs-200);font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;line-height:1.3;color:#C9D8EF
}
.crumb a{color:#7FC4F6;transition:color .18s ease}
.crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumb span{color:#6E88B4}
.crumb .here{color:#C9D8EF}

/* the same trail where the hero behind it is light rather than navy */
.crumb-light{color:var(--muted)}
.crumb-light a{color:var(--blue-deep)}
.crumb-light a:hover{color:var(--navy)}
.crumb-light span{color:var(--muted-soft)}
.crumb-light .here{color:var(--muted)}

/* short hero used on the contract pages */
.hero-band .hero-inner{padding-top:134px;padding-bottom:70px}
.hero-band h1{font-size:var(--fs-700)}

/* certification strip inside the home hero */
.certs{display:flex;flex-wrap:wrap;gap:20px;margin-top:34px}
.cert{
  background:rgba(226,236,255,.92);border-radius:var(--r-sm);
  width:132px;height:64px;display:flex;align-items:center;justify-content:center;padding:8px
}
.cert img{max-height:100%;width:auto}

/* ---------- about split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:78px;align-items:center}
.split img{border-radius:var(--r);box-shadow:var(--shadow-md);width:100%}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.stat{
  display:flex;flex-direction:column;gap:6px;
  padding:var(--sp-5) var(--sp-5) var(--sp-5);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(146,196,246,.26);border-radius:var(--r);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .3s ease,background .3s ease,transform .3s cubic-bezier(.22,.9,.3,1)
}
.stat:hover{border-color:rgba(146,196,246,.55);background:rgba(255,255,255,.085);transform:translateY(-3px)}
.stat svg{width:24px;height:24px;color:#7FC4F6;flex:none}
.stat b{font-size:var(--fs-550);font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.stat span{font-size:var(--fs-200);font-weight:600;color:#A9BFDD;line-height:1.3}

/* the certifications sit on a white card so the marks keep their own colour */
.cert-card{
  background:#fff;border-radius:var(--r);padding:var(--sp-5) var(--sp-6);
  box-shadow:0 2px 6px rgba(1,12,44,.18),0 20px 44px rgba(1,12,44,.28)
}

/* ---------- home: about + certifications over the building photo ---------- */
.abcert{position:relative;isolation:isolate;overflow:hidden;background:var(--navy)}
.abcert-bg{
  position:absolute;inset:0;z-index:-1;
  background:url("../img/photos/office-building-reston.jpg") center 32% / cover no-repeat
}
/* the navy wash keeps the site's own colour on top of the photograph */
.abcert-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(104deg,rgba(1,12,44,.95) 0%,rgba(1,12,44,.88) 44%,rgba(10,26,69,.76) 100%),
    radial-gradient(90% 70% at 85% 10%,rgba(23,137,214,.30),rgba(23,137,214,0) 62%)
}
.abcert-in{display:flex;flex-direction:column;gap:var(--sp-8)}
.abcert-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-9);align-items:center}
/* certifications: copy on the left, the four marks two-by-two on the right.
   The text column is the wider of the two and the white box is held back,
   so the paragraph has room to run. */
.abcert-row-b{grid-template-columns:1fr 1.55fr;gap:var(--sp-8)}
.abcert-row-b .cert-card{order:1}
.abcert-row-b .stack{order:2}
.abcert .abcert-row-b p{max-width:72ch}
.abcert-row-b .cert-card{
  width:100%;padding:var(--sp-3);position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,.9,.3,1),box-shadow .45s ease
}
/* a band of light travels across the marks when the box is hovered */
.abcert-row-b .cert-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(126,190,250,0) 36%,rgba(126,190,250,.38) 50%,rgba(126,190,250,0) 64%);
  transform:translateX(-130%);
  transition:transform .9s cubic-bezier(.22,.9,.3,1)
}
.abcert-row-b .cert-card:hover{
  transform:translateY(-5px);
  box-shadow:
    0 2px 8px rgba(1,12,44,.20),
    0 26px 58px rgba(23,80,180,.40),
    0 0 0 1px rgba(126,190,250,.6)
}
.abcert-row-b .cert-card:hover::after{transform:translateX(130%)}

/* the cross between the four marks is drawn on the grid itself, so the
   marks are free to move without dragging the lines with them */
.abcert-row-b .cert-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;align-items:center;justify-items:stretch;
  background:
    linear-gradient(var(--tint-line),var(--tint-line)) center / 3px calc(100% - 28px) no-repeat,
    linear-gradient(var(--tint-line),var(--tint-line)) center / calc(100% - 28px) 3px no-repeat
}
.abcert-row-b .cert-row img{
  width:100%;height:98px;object-fit:contain;padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-sm);
  transition:transform .4s cubic-bezier(.22,.9,.3,1),background .3s ease
}
.abcert-row-b .cert-row img:hover{
  background:rgba(23,137,214,.07);transform:scale(1.07)
}
@media (prefers-reduced-motion:reduce){
  .abcert-row-b .cert-card,
  .abcert-row-b .cert-card::after,
  .abcert-row-b .cert-row img{transition:none}
  .abcert-row-b .cert-card:hover{transform:none}
  .abcert-row-b .cert-card:hover::after{transform:translateX(-130%)}
  .abcert-row-b .cert-row img:hover{transform:none}
}
.abcert .eyebrow{color:#7FC4F6}
.abcert h2,.abcert .h2,.abcert .h3{color:#fff}
.abcert p{color:#C9D8EF;max-width:52ch}
.abcert-rule{
  height:3px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,rgba(146,196,246,.78),rgba(146,196,246,.12))
}
@media (max-width:980px){
  .abcert-row{grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}
  /* stacked on a phone the heading leads, with the marks under it */
  .abcert-row-b .stack{order:1}
  .abcert-row-b .cert-card{order:2}
  .abcert-in{gap:var(--sp-7)}
  .abcert p{max-width:none}
  .cert-card{padding:var(--sp-5)}
}
@media (max-width:560px){
  .stats{gap:var(--sp-3)}
  .stat{padding:var(--sp-4)}
  .cert-row{gap:18px}
  .cert-row img{height:52px}
}

/* ---------- generic cards ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{
  background:var(--card);border-radius:var(--r);padding:34px 28px;
  box-shadow:var(--shadow-sm);
}
.card-svc{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:40px 24px}
.card-svc .ico{width:56px;height:56px;color:var(--ink)}
.card-svc h3{font-size:var(--fs-400)}

/* ---------- industry image cards ---------- */
.ind{
  position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:5/6.2;box-shadow:var(--shadow-sm);display:flex;align-items:flex-end
}
.ind img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ind-health img{object-position:46% 38%}
.ind .veil{
  position:relative;width:100%;padding:26px 20px 24px;text-align:center;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.92) 100%)
}
.ind h3{color:#fff;font-size:var(--fs-400);margin-bottom:8px}
.g5 .ind h3{font-size:var(--fs-lede)}
.g5 .ind .veil{padding:22px 14px 20px}
.g5 .ind p{font-size:var(--fs-100)}
.ind p{font-size:var(--fs-200);color:#E8EDF6;line-height:var(--lh-tight)}
/* each card is a link to another page, so it says so: an arrow badge sits in
   the corner at all times, and hovering lifts the card, eases the picture in,
   deepens the wash and lights the arrow up */
.ind{transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s ease}
.ind img{transition:transform .55s cubic-bezier(.22,.9,.3,1)}
.ind .veil{transition:background .3s ease}
.ind .veil::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:0;height:3px;border-radius:2px;background:var(--blue-bright);
  transition:width .34s cubic-bezier(.22,.9,.3,1)
}
.ind-go{
  position:absolute;top:14px;right:14px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .28s ease,border-color .28s ease,transform .28s cubic-bezier(.22,.9,.3,1)
}
.ind-go svg{width:16px;height:16px;color:#fff;transition:transform .28s ease}
.ind:hover,.ind:focus-visible{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.ind:focus-visible{outline:3px solid var(--blue-bright);outline-offset:3px}
.ind:hover img,.ind:focus-visible img{transform:scale(1.07)}
.ind:hover .veil,.ind:focus-visible .veil{
  background:linear-gradient(180deg,rgba(1,12,44,0) 0%,rgba(1,12,44,.72) 32%,rgba(1,12,44,.95) 100%)
}
.ind:hover .veil::before,.ind:focus-visible .veil::before{width:46px}
.ind:hover .ind-go,.ind:focus-visible .ind-go{
  background:var(--blue-bright);border-color:var(--blue-bright);transform:scale(1.08)
}
.ind:hover .ind-go svg,.ind:focus-visible .ind-go svg{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){
  .ind,.ind img,.ind .veil,.ind .veil::before,.ind-go,.ind-go svg{transition:none}
  .ind:hover,.ind:focus-visible{transform:none}
  .ind:hover img,.ind:focus-visible img{transform:none}
  .ind:hover .ind-go,.ind:focus-visible .ind-go{transform:none}
}

/* ---------- auto-scrolling carousels ---------- */
.marquee{
  overflow:hidden;position:relative;padding:16px 0;margin:-16px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.marquee-track{
  display:flex;align-items:stretch;gap:var(--gap,26px);width:max-content;
  animation:marquee var(--dur,44s) linear infinite;will-change:transform
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}

/* ---------- a marquee you can also drive yourself ----------
   JS swaps the CSS animation for a real scroller, so the row can be
   dragged, swiped, flicked with the wheel, stepped with the arrow
   buttons or walked with the keyboard. The drift continues on its own
   whenever nobody is touching it. */
.marquee.is-manual{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
  cursor:grab;scroll-behavior:auto
}
.marquee.is-manual::-webkit-scrollbar{display:none}
.marquee.is-manual .marquee-track{animation:none;width:max-content}
.marquee.is-manual.is-drag{cursor:grabbing;scroll-snap-type:none}
.marquee.is-manual.is-drag a{pointer-events:none}

.rail{position:relative}
.rail-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:var(--tap);height:var(--tap);border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--tint-line);color:var(--navy);
  box-shadow:0 4px 16px rgba(10,40,120,.16);cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease
}
.rail-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.rail-btn svg{width:17px;height:17px}
.rail-prev{left:-6px}
.rail-next{right:-6px}
.rail-prev svg{transform:rotate(180deg)}
@media (max-width:860px){
  /* on a phone the row is swiped, so the buttons only take up room */
  .rail-btn{display:none}
}

/* ---------- back to top ---------- */
.totop{
  position:fixed;right:18px;bottom:18px;z-index:130;
  width:42px;height:42px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;border:1px solid rgba(146,196,246,.4);
  box-shadow:0 6px 20px rgba(1,12,44,.3);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease,background .2s ease
}
.totop svg{width:16px;height:16px}
.totop:hover{background:var(--blue)}
.totop.is-on{opacity:1;visibility:visible;transform:none}
@media (max-width:560px){
  .totop{right:14px;bottom:14px;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .totop{transition:none}
}
@keyframes marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - (var(--gap,26px) / 2)),0,0)}
}
.cnum{font-variant-numeric:tabular-nums}

/* ---------- contact ---------- */
.ct-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:44px;
  flex-wrap:wrap;margin-bottom:40px
}
.ct-head .eyebrow{margin-bottom:10px}
.ct-head .h2{margin:0}
.ct-head > p{flex:1 1 400px;max-width:60ch;font-size:var(--fs-300);line-height:var(--lh-body);color:var(--muted)}

.ct-mails{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ct-mail{
  display:flex;flex-direction:column;gap:12px;
  background:#fff;border:1px solid var(--tint-line);border-radius:var(--r);
  padding:32px 30px 28px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease
}
.ct-mail:hover{border-color:var(--blue-bright);box-shadow:var(--shadow-sm)}
.ct-mail-ico{
  width:54px;height:54px;border-radius:var(--r);background:var(--tint);
  display:flex;align-items:center;justify-content:center;margin-bottom:6px
}
.ct-mail-ico svg{width:25px;height:25px;color:var(--blue)}
.ct-mail h3{font-size:var(--fs-400);font-weight:700;color:var(--ink)}
.ct-mail p{font-size:var(--fs-200);line-height:var(--lh-body);color:var(--muted)}
.ct-mail-at{
  margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:9px;
  font-size:var(--fs-300);font-weight:700;color:var(--blue-deep);overflow-wrap:anywhere
}
.ct-mail-at svg{width:14px;height:14px;flex:none;transition:transform .18s ease}
.ct-mail:hover .ct-mail-at{color:var(--blue-deep)}
.ct-mail:hover .ct-mail-at svg{transform:translate(3px,-3px)}
.ct-fact-link{color:var(--blue);font-weight:600}
/* the address reads as plain text and only shows it is a link on hover */
.ct-fact-addr{color:inherit;text-decoration:none}
.ct-fact-addr:hover{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}
.ct-fact-link:hover{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}

.ct-panel{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-md)
}
.ct-info{padding:48px 46px;display:flex;flex-direction:column}
.ct-info .h2{margin:8px 0 0}
.ct-info .rule-accent{margin:18px 0 16px}
.ct-blurb{font-size:var(--fs-300);line-height:var(--lh-body);color:var(--body)}
.ct-facts{display:flex;flex-direction:column;margin-top:30px}
.ct-facts li{
  display:flex;gap:18px;align-items:flex-start;
  padding:20px 0;border-top:1px solid var(--line)
}
.ct-facts li:last-child{border-bottom:1px solid var(--line)}
.ct-fact-ico{
  flex:none;width:44px;height:44px;border-radius:50%;background:var(--blue);
  display:flex;align-items:center;justify-content:center
}
.ct-fact-ico svg{width:20px;height:20px;color:#fff}
.ct-fact-txt{font-size:var(--fs-200);line-height:var(--lh-tight);color:var(--body)}
.ct-fact-txt b{
  display:block;font-size:var(--fs-100);font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px
}
.ct-map{position:relative;min-height:460px;background:var(--tint)}
.ct-map-fallback{position:absolute;inset:0;width:100%;height:100%;display:block}
.ct-map-fallback img{width:100%;height:100%;object-fit:cover}
.ct-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1}

@media (max-width:980px){
  .ct-mails{grid-template-columns:1fr}
  .ct-panel{grid-template-columns:1fr}
  .ct-info{padding:34px 26px}
  .ct-map{min-height:320px}
}

/* ---------- services: hexagon flower ---------- */
.hexf-wrap{display:flex;justify-content:center}
/* three hexes across and two and a half down, so one aspect ratio sizes
   the whole flower and every tile is a percentage of it */
.hexf{
  position:relative;width:100%;max-width:820px;
  aspect-ratio:3 / 2.8868;margin:44px auto 40px
}
.hx{
  position:absolute;width:33.333%;height:40%;
  /* only the clipped face takes pointer events, so the transparent corners of
     this box never catch a hover meant for a neighbour — :hover still reaches
     here from the face inside it, and the shadow is free to fall outside */
  pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(1,12,44,.05)) drop-shadow(0 4px 14px rgba(1,12,44,.06));
  transition:transform .34s cubic-bezier(.22,.9,.3,1),filter .3s ease;
  cursor:default;outline:none
}
.hx:focus-visible,.hx-core:focus-visible{
  filter:drop-shadow(0 0 0 2px var(--blue-bright))
         drop-shadow(0 0 10px rgba(23,137,214,.85))
         drop-shadow(0 14px 34px rgba(1,12,44,.12))
}
.hx-nw{left:16.666%;top:0}
.hx-ne{left:50%;top:0}
.hx-w{left:0;top:30%}
.hx-core{left:33.333%;top:30%}
.hx-e{left:66.666%;top:30%}
.hx-sw{left:16.666%;top:60%}
.hx-se{left:50%;top:60%}

/* the outer layer is the 2px edge, in the same brand blue the core is filled
   with; the face sits 2px inside it */
.hx-in{
  position:absolute;inset:0;
  -webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
          clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(158deg,#1789D6,#5AA8E8 48%,#0971B7);
  pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:0 14%;
  transition:background .3s ease
}
/* the resting face: a pale blue wash out of the site's own tint family,
   deepening toward the lower right so the tile lifts off the tinted section */
.hx-in::before{
  content:"";position:absolute;inset:2px;
  -webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
          clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:
    radial-gradient(112% 82% at 26% 8%,rgba(255,255,255,.62),rgba(255,255,255,0) 58%),
    linear-gradient(158deg,#DCEAFD 0%,#C2DAF7 52%,#A6C8EF 100%);
  transition:background .3s ease
}
.hx-in > *{position:relative;z-index:1}
.hx-ico{
  width:56px;height:56px;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:width .3s ease,height .3s ease
}
.hx-ico svg{width:100%;height:100%;color:var(--ink);transition:color .3s ease,width .3s ease,height .3s ease}
.hx-name{
  font-size:23px;font-weight:700;line-height:1.2;color:var(--ink);
  letter-spacing:-.012em;transition:color .3s ease,font-size .3s ease
}

/* everything past the name is folded away until the tile opens */
.hx-more{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .34s cubic-bezier(.22,.9,.3,1),opacity .24s ease
}
.hx-more > *{overflow:hidden;min-height:0}
.hx-sub{font-size:9.3px;line-height:1.5;color:#D2DEF2;margin-bottom:6px}
.hx-list{display:flex;flex-direction:column;gap:2.5px}
.hx-list li{font-size:9.3px;line-height:1.38;color:#E4EBF8;font-weight:600}
.hx-list a{color:#CCE6FF;text-decoration:underline;text-underline-offset:2px}
/* the case-study links are parked for now; the pages themselves are still in
   the build and still reachable by their routes. Delete this one line to
   bring the links back. */
.hx-case{display:none}
.hx-case-on{display:flex;flex-direction:column;gap:1px;margin-top:6px}
.hx-case span{
  font-size:7.3px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9FB6D8
}
.hx-case a{font-size:9.3px;font-weight:700;color:#CCE6FF;text-decoration:underline;text-underline-offset:2px}

/* open: the tile grows to the same size it reached before, fills with the
   site navy, and unrolls its detail */
.hx:hover,.hx:focus-visible,.hx:has(:focus-visible),.hx.is-open{
  transform:scale(1.65);z-index:5;
  filter:drop-shadow(0 2px 6px rgba(1,12,44,.06)) drop-shadow(0 14px 34px rgba(1,12,44,.10))
}
.hx-core:hover,.hx-core:focus-visible,.hx-core:has(:focus-visible),.hx-core.is-open{
  transform:scale(1.58);z-index:6;
  filter:drop-shadow(0 2px 6px rgba(1,12,44,.06)) drop-shadow(0 14px 34px rgba(1,12,44,.10))
}
.hx:hover .hx-in,.hx:focus-visible .hx-in,.hx:has(:focus-visible) .hx-in,.hx.is-open .hx-in{
  background:linear-gradient(158deg,#5AA8E8,#B6DCFF 46%,#1789D6)
}
.hx:hover .hx-in::before,.hx:focus-visible .hx-in::before,.hx:has(:focus-visible) .hx-in::before,.hx.is-open .hx-in::before{
  inset:0;
  background:
    radial-gradient(118% 88% at 24% 6%,rgba(86,146,226,.46),rgba(86,146,226,0) 58%),
    linear-gradient(158deg,#0F2A5C 0%,#0A1A45 48%,#123A76 100%)
}
.hx:hover .hx-ico,.hx:focus-visible .hx-ico,.hx:has(:focus-visible) .hx-ico,.hx.is-open .hx-ico{width:26px;height:26px}
.hx:hover .hx-ico svg,.hx:focus-visible .hx-ico svg,.hx:has(:focus-visible) .hx-ico svg,.hx.is-open .hx-ico svg{color:#fff}
.hx:hover .hx-name,.hx:focus-visible .hx-name,.hx:has(:focus-visible) .hx-name,.hx.is-open .hx-name{color:#fff;font-size:12.6px}
.hx:hover .hx-more,.hx:focus-visible .hx-more,.hx:has(:focus-visible) .hx-more,.hx.is-open .hx-more{grid-template-rows:1fr;opacity:1}

/* the core carries the accent so it reads as the hub */
.hx-core .hx-in{background:linear-gradient(158deg,#1789D6,#5AA8E8 48%,#0971B7)}
.hx-core .hx-in::before{
  inset:0;
  background:
    radial-gradient(120% 90% at 22% 6%,rgba(219,240,255,.55),rgba(219,240,255,0) 58%),
    linear-gradient(158deg,#1789D6 0%,#0971B7 52%,#0A63A0 100%)
}
.hx-core .hx-ico svg{color:#fff}
.hx-core .hx-name{color:#fff}
.hx-core:hover .hx-in,.hx-core:focus-visible .hx-in,.hx-core:has(:focus-visible) .hx-in,.hx-core.is-open .hx-in{
  background:linear-gradient(158deg,#B6DCFF,#EAF6FF 48%,#7FC0FF)
}
.hx-core:hover .hx-in::before,.hx-core:focus-visible .hx-in::before,.hx-core:has(:focus-visible) .hx-in::before,.hx-core.is-open .hx-in::before{
  inset:0;
  background:
    radial-gradient(120% 90% at 22% 6%,rgba(226,244,255,.5),rgba(226,244,255,0) 58%),
    linear-gradient(158deg,#0E7CC4 0%,#075C95 52%,#054A7C 100%)
}

/* below this the hexagons are too small to read, so the same content
   becomes a plain stack with everything already visible */
@media (max-width:900px){
  .hexf{position:static;aspect-ratio:auto;max-width:560px;display:flex;flex-direction:column;gap:14px;margin:24px auto 0}
  .hx{position:static;width:100%;height:auto;transform:none !important;z-index:auto;
      pointer-events:auto;filter:none !important}
  .hx-in{
    position:relative;inset:auto;-webkit-clip-path:none;clip-path:none;border-radius:var(--r);
    padding:22px 24px;gap:12px;align-items:flex-start;text-align:left
  }
  .hx-in::before{-webkit-clip-path:none;clip-path:none;border-radius:calc(var(--r) - 2px)}
  .hx-name{font-size:21px !important}
  .hx-ico{width:52px !important;height:52px !important;border-radius:15px !important}
  .hx-ico svg{width:26px !important;height:26px !important}
  .hx-more{grid-template-rows:1fr;opacity:1}
  .hx-sub,.hx-list li,.hx-case a{font-size:15.5px}
  .hx-case span{font-size:11px}
  .hx-list{gap:5px}
  .hx-sub{color:var(--muted)}
  .hx-list li{color:var(--body)}
  .hx-list a,.hx-case a{color:var(--blue)}
  .hx-case span{color:var(--muted)}
  .hx-core .hx-name,.hx-core .hx-sub,.hx-core .hx-list li{color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .hx,.hx-more{transition:none}
}

/* ---------- current job openings: hexagon comb ---------- */
.comb-sec{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--tint);padding:76px 0 84px
}

/* the comb itself — tiles are placed by script so the rows stay
   interlocked however many are showing */
.comb{position:relative;width:100%}
.hex{
  position:absolute;top:0;left:0;padding:0;border:0;background:none;
  width:var(--hw,208px);height:var(--hh,240px);cursor:pointer;
  filter:drop-shadow(0 1px 2px rgba(1,12,44,.05)) drop-shadow(0 4px 14px rgba(1,12,44,.06));
  transition:transform .28s cubic-bezier(.22,.9,.3,1),filter .26s ease
}
.hex-in{
  position:absolute;inset:0;
  -webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
          clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:0 12% 30px;
  transition:background .25s ease
}
.hex-in::before{
  content:"";position:absolute;inset:2px;
  -webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
          clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--card);
  transition:background .25s ease
}
.hex-in > *{position:relative;z-index:1}
.hex-ico{
  width:46px;height:46px;flex:none;
  display:flex;align-items:center;justify-content:center
}
.hex-ico svg{width:100%;height:100%;color:var(--ink);transition:color .25s ease}
.hex-title{
  font-size:19px;font-weight:700;line-height:1.2;color:var(--ink);letter-spacing:-.012em
}
.hex-loc{font-size:11px;font-weight:700;line-height:1.32;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.hex:hover,.hex:focus-visible{
  transform:translate(var(--x,0),var(--y,0)) scale(1.045);z-index:2;
  filter:drop-shadow(0 2px 6px rgba(1,12,44,.06)) drop-shadow(0 14px 34px rgba(1,12,44,.10))
}
.hex:focus-visible{
  outline:none;
  filter:drop-shadow(0 0 0 2px var(--blue-bright))
         drop-shadow(0 0 10px rgba(23,137,214,.85))
         drop-shadow(0 14px 34px rgba(1,12,44,.12))
}
.hex:hover .hex-in,.hex:focus-visible .hex-in{background:linear-gradient(158deg,#2E4478,#5A6FA4 46%,var(--navy-soft))}
.hex:hover .hex-in::before,
.hex:focus-visible .hex-in::before{background:linear-gradient(158deg,#010C2C 0%,#0A1A45 54%,#16295A 100%)}
.hex:hover .hex-ico svg,.hex:focus-visible .hex-ico svg{color:#fff}
.hex:hover .hex-title,.hex:focus-visible .hex-title{color:#fff}
.hex:hover .hex-loc,.hex:focus-visible .hex-loc{color:#AFC1DE}
/* the role a visitor picked stays filled in while its panel is open */
.hex.is-open{
  transform:translate(var(--x,0),var(--y,0)) scale(1.045);z-index:2;
  filter:drop-shadow(0 2px 6px rgba(1,12,44,.06)) drop-shadow(0 14px 34px rgba(1,12,44,.10))
}
.hex.is-open .hex-in{background:linear-gradient(158deg,#2E4478,#5A6FA4 46%,var(--navy-soft))}
.hex.is-open .hex-in::before{background:linear-gradient(158deg,#010C2C 0%,#0A1A45 54%,#16295A 100%)}
.hex.is-open .hex-ico svg{color:#fff}
.hex.is-open .hex-title{color:#fff}
.hex.is-open .hex-loc{color:#AFC1DE}
.hex-title.t-long{font-size:15.5px;line-height:1.22}
.hex-title.t-xlong{font-size:13.2px;line-height:1.2}

/* the same comb, drawn as interlocking circles: three over two, rims touching */
.comb.rings .hex-in{
  -webkit-clip-path:none;clip-path:none;border-radius:50%;
  background:var(--tint-line);padding:0 15%;gap:8px
}
.comb.rings .hex-in::before{
  -webkit-clip-path:none;clip-path:none;border-radius:50%;inset:0
}
.comb.rings .hex{
  filter:drop-shadow(0 1px 2px rgba(1,12,44,.06)) drop-shadow(0 6px 18px rgba(1,12,44,.07))
}
/* every circle carries its name at one size, set to the largest the longest
   of the five can hold, so none of them is bigger or smaller than another */
.comb.rings .hex-title,
.comb.rings .hex-title.t-long,
.comb.rings .hex-title.t-xlong{font-size:17px;line-height:1.2}
/* the panel's badge follows the shape of the tiles above it */
.ring-panel .role-mark{
  -webkit-clip-path:none;clip-path:none;border-radius:50%;width:76px;height:76px
}
.comb.rings .hex:hover,
.comb.rings .hex:focus-visible,
.comb.rings .hex.is-open{
  transform:translate(var(--x,0),var(--y,0)) scale(1.055);z-index:3;
  filter:drop-shadow(0 2px 6px rgba(1,12,44,.07)) drop-shadow(0 16px 38px rgba(1,12,44,.13))
}

/* one panel the whole comb opens into, so no role needs a page of its own */
.role-panel{
  position:relative;margin-top:38px;
  background:#fff;border:2px solid var(--blue-bright);border-radius:var(--r);
  box-shadow:var(--shadow-md);padding:34px 60px 34px 34px;
  display:grid;grid-template-columns:76px 1fr;gap:28px;align-items:start;
  animation:rolepop .3s cubic-bezier(.22,.9,.3,1)
}
.role-panel[hidden]{display:none}
@keyframes rolepop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.role-mark{
  width:76px;height:86px;flex:none;
  display:flex;align-items:center;justify-content:center;
  -webkit-clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
          clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(158deg,#0F2A5C 0%,#0A1A45 48%,#123A76 100%)
}
.role-mark svg{width:34px;height:34px;color:#fff}
.role-panel .eyebrow{margin-bottom:6px}
.role-panel .h3{margin:0 0 16px;font-size:var(--fs-500)}
.role-copy{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.role-copy p{font-size:var(--fs-300);line-height:var(--lh-long);color:var(--body);max-width:72ch}
.role-close{
  position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--tint-line);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  transition:background .18s ease,color .18s ease,border-color .18s ease
}
.role-close:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.role-close svg{width:15px;height:15px}

/* health care — four roles, each with its write-up on the card itself */
.role-card{
  background:#fff;border:2px solid var(--blue-bright);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:30px 30px 32px;
  display:flex;flex-direction:column;gap:14px;
  transition:box-shadow .22s ease,transform .22s ease
}
.role-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.role-card .role-mark{width:58px;height:66px}
.role-card .role-mark svg{width:26px;height:26px}
.role-card h3{font-size:var(--fs-400);font-weight:700;line-height:1.28;color:var(--ink);letter-spacing:-.012em}
.role-card p{font-size:var(--fs-200);line-height:var(--lh-tight);color:var(--body)}
@media (max-width:760px){
  .role-panel{grid-template-columns:1fr;gap:18px;padding:28px 22px 30px}
  .role-mark{width:62px;height:70px}
  .role-panel .h3{font-size:var(--fs-400)}
  .role-copy p{font-size:var(--fs-200)}
  .role-card{padding:24px 22px 26px}
  .role-card h3{font-size:var(--fs-lede)}
}

/* current job openings — the stacked position cards */
.job-filters{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 26px}
/* stands in for the list when there is nothing open */
.job-none{
  display:flex;gap:30px;align-items:flex-start;
  background:#fff;border:1px solid var(--tint-line);border-radius:var(--r);
  padding:var(--sp-7) var(--sp-7)
}
.job-none[hidden]{display:none}
/* these three are flex, so the hidden attribute needs saying out loud */
.job-list[hidden],.job-filters[hidden],.doc-search[hidden]{display:none}
.job-none .nofit-mark{background:var(--navy)}
.job-none p{font-size:var(--fs-300);line-height:var(--lh-body)}
@media (max-width:760px){
  .job-none{flex-direction:column;gap:20px;padding:28px 24px}
}
.job-list{display:flex;flex-direction:column;gap:16px}
.job{
  background:#fff;border:1px solid var(--tint-line);border-radius:var(--r-sm);
  padding:26px 28px;display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap
}
.job:hover{border-color:var(--blue-bright)}
.job-main{flex:1 1 520px;display:flex;flex-direction:column;gap:10px}
.job-main h3{font-size:var(--fs-400);font-weight:700;color:var(--ink)}
.job-main p{font-size:var(--fs-300);line-height:var(--lh-body);max-width:66ch}
.job-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:2px}
.job-meta li{
  display:flex;align-items:center;gap:7px;
  font-size:var(--fs-100);font-weight:600;letter-spacing:.02em;color:var(--muted)
}
.job-meta svg{width:15px;height:15px;flex:none;color:var(--blue)}
.job-cta{flex:none}
.job-empty{margin-top:26px;font-size:var(--fs-300);color:var(--muted)}

.nofit{
  display:flex;gap:30px;align-items:flex-start;
  background:var(--tint);border-radius:var(--r);padding:var(--sp-7) var(--sp-7)
}
.nofit-mark{
  flex:none;width:66px;height:66px;border-radius:16px;background:var(--blue);
  display:flex;align-items:center;justify-content:center
}
.nofit-mark svg{width:32px;height:32px;color:#fff}
.nofit p{font-size:var(--fs-300);line-height:var(--lh-body);max-width:72ch}
@media (max-width:760px){
  .hex-in{padding:0 11% 26px;gap:7px}
  .hex-ico{width:40px;height:40px}
  .hex-title{font-size:15.5px}
  .hex-title.t-long{font-size:12.6px}
  .hex-title.t-xlong{font-size:11px}
  .hex-loc{font-size:10px;letter-spacing:.04em}
  .comb.rings .hex-in{padding:0 14%;gap:7px}
  .comb.rings .hex-title,
  .comb.rings .hex-title.t-long,
  .comb.rings .hex-title.t-xlong{font-size:12.5px;line-height:1.2}
}
@media (max-width:520px){
  .hex-in{padding:0 10% 20px;gap:5px}
  .hex-ico{width:33px;height:33px}
  .hex-title{font-size:13px;line-height:1.18}
  .hex-title.t-long{font-size:10.6px}
  .hex-title.t-xlong{font-size:9.4px}
  .hex-loc{font-size:9px;letter-spacing:.03em}
  .comb.rings .hex-in{padding:0 13%;gap:5px}
  .comb.rings .hex-title,
  .comb.rings .hex-title.t-long,
  .comb.rings .hex-title.t-xlong{font-size:9.4px;line-height:1.2}
}
@media (max-width:820px){
  .comb-sec{padding:56px 0 64px}
  .job{padding:22px 22px;align-items:flex-start}
  .job-cta,.job-cta .btn{width:100%;justify-content:center}
  .nofit{flex-direction:column;gap:20px;padding:30px 24px}
}
/* a comb drops to the next tile size a little before the type does. A hexagon
   absorbs that; a circle, which pinches in at top and bottom, does not — so in
   those two narrow bands the names take the next size down early */
@media (min-width:761px) and (max-width:808px){
  .comb.rings .hex-in{padding:0 14%;gap:7px}
  .comb.rings .hex-ico{width:40px;height:40px}
  .comb.rings .hex-title,
  .comb.rings .hex-title.t-long,
  .comb.rings .hex-title.t-xlong{font-size:12.5px;line-height:1.2}
  .comb.rings .hex-loc{font-size:10px;letter-spacing:.04em}
}
@media (min-width:521px) and (max-width:568px){
  .comb.rings .hex-in{padding:0 13%;gap:5px}
  .comb.rings .hex-ico{width:33px;height:33px}
  .comb.rings .hex-title,
  .comb.rings .hex-title.t-long,
  .comb.rings .hex-title.t-xlong{font-size:9.4px;line-height:1.2}
  .comb.rings .hex-loc{font-size:9px;letter-spacing:.03em}
}
@media (prefers-reduced-motion:reduce){
  .hex:hover,.hex:focus-visible{transform:translate(var(--x,0),var(--y,0))}
  .comb.rings .hex:hover,
  .comb.rings .hex:focus-visible,
  .comb.rings .hex.is-open{transform:translate(var(--x,0),var(--y,0))}
}

/* a whole logo rail is one big link through to About Us */
.logo-rail{cursor:pointer;border-radius:var(--r);outline-offset:6px}
.logo-rail:focus-visible{outline:2px solid var(--blue)}
.rail-head{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:34px;text-align:left}
.rail-head .h2{margin:0}
.rail-more{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:24px;font-size:var(--fs-200);font-weight:600;color:var(--blue-deep);white-space:nowrap}
.rail-more svg{width:13px;height:13px;transition:transform .18s ease}
.logo-rail:hover .rail-more svg{transform:translateX(4px)}
@media (max-width:640px){.rail-head{flex-direction:column;align-items:flex-start;gap:8px}}
/* every service card in the home carousel holds the same width */
.marquee .card-svc{flex:0 0 282px}
@media (max-width:560px){.marquee .card-svc{flex:0 0 244px}}
.marquee .quote{flex:0 0 374px}
@media (max-width:560px){.marquee .quote{flex:0 0 286px}}
.marquee-gap-b{margin-bottom:12px}
.marquee .logo-slide{
  flex:0 0 180px;display:flex;align-items:center;justify-content:center;height:94px
}
.marquee .logo-slide img{max-height:100%;max-width:160px;width:auto;object-fit:contain}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto}
  .marquee-track{animation:none}
}

/* ---------- logo walls ---------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:34px 62px}
.logos.grid-wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:56px 30px;justify-items:center;align-items:center}
.logos figure{margin:0;display:flex;align-items:center;justify-content:center;height:104px;width:100%}
.logos img{max-height:100%;max-width:min(170px,100%);width:auto;object-fit:contain}

/* ---------- dark network band ---------- */
.band{
  position:relative;isolation:isolate;background:#031B52;color:#fff;overflow:hidden
}
.band::before{
  content:"";position:absolute;inset:0;z-index:-1;background-image:var(--bg-band);
  background-size:cover;background-position:center
}
.band-inner{padding-top:56px;padding-bottom:56px}
.band h2{color:#fff}
.band p{color:#D9E4F7;max-width:72ch}

/* ---------- CTA strips ---------- */
.cta-dark{
  background:var(--navy);border-radius:var(--r);color:#fff;
  padding:var(--sp-7) var(--sp-7);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap
}
.cta-dark strong{font-size:var(--fs-400);font-weight:700;line-height:1.3;letter-spacing:.02em;text-transform:uppercase}
.cta-tint{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap
}
.cta-tint h2{font-size:var(--fs-550)}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:#fff}
.foot-top{
  /* the three link columns are exactly equal; only Contact, which carries
     the address, takes the extra room */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.3fr;gap:40px;
  padding-top:58px;padding-bottom:40px
}
.foot h4{color:#fff;font-size:var(--fs-550);font-weight:600;letter-spacing:-.02em;margin-bottom:26px}
.foot ul{display:flex;flex-direction:column;gap:14px}
.foot a{font-size:var(--fs-300);color:#EDF1F8}
.foot a:hover{color:var(--blue-bright)}
.foot-contact{text-align:right}
.foot-contact ul{gap:16px}
.foot-contact li{display:flex;gap:14px;justify-content:flex-end;align-items:flex-start;font-size:var(--fs-300);color:#EDF1F8}
.foot-contact svg{width:19px;height:19px;flex:none;margin-top:4px;order:-1;color:#fff}
.foot-contact address{font-style:normal;text-align:right;line-height:1.5}
.foot-contact address a{display:inline-block}
.foot-contact a{transition:color .16s ease}
.foot-contact a:hover{color:var(--blue-bright);text-decoration:underline;text-underline-offset:3px}
.foot-bot{
  border-top:1px solid rgba(255,255,255,.22);padding-top:26px;padding-bottom:26px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap
}
.foot-bot p{font-size:var(--fs-200);color:#E2E8F3}
.social{display:flex;gap:13px}
.social a{
  width:34px;height:34px;border-radius:50%;background:#fff;color:var(--navy);
  display:flex;align-items:center;justify-content:center
}
.social a:hover{background:var(--blue-bright);color:#fff}
.social svg{width:17px;height:17px}

/* ---------- service detail cards (Services page) ---------- */
.svc-detail{display:flex;flex-direction:column;gap:18px;padding:32px 30px}
.svc-detail .top{display:grid;grid-template-columns:74px 1fr;gap:20px;align-items:start}
.svc-badge{
  width:74px;height:74px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center
}
.svc-badge svg{width:38px;height:38px}
.svc-detail h3{margin-bottom:6px}
.svc-detail .sub{font-size:var(--fs-200);color:var(--body);line-height:var(--lh-tight)}
.bullets li{position:relative;padding-left:20px;font-size:var(--fs-200);margin-bottom:5px}
.bullets li::before{content:"";position:absolute;left:5px;top:11px;width:4px;height:4px;border-radius:50%;background:var(--body)}
.case-label{font-size:var(--fs-200);font-weight:700;color:var(--ink);margin-bottom:4px}
.case-list li{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--tint-line)}

/* ---------- why-partner tiles ---------- */
.why{background:var(--navy);border-radius:var(--r-lg);padding:var(--sp-8) var(--sp-7);color:#fff}
.why h2,.why .eyebrow{color:#fff}
.why .eyebrow{color:var(--blue-bright)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:38px}
.why-tile{
  border:1px solid rgba(255,255,255,.34);border-radius:var(--r);
  padding:30px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px
}
.why-tile svg{width:44px;height:44px;color:#fff}
.why-tile h3{color:#fff;font-size:var(--fs-400)}
.why-tile p{font-size:var(--fs-200);color:#D7E0F0;line-height:var(--lh-tight)}

/* ---------- stat band ---------- */
.statband{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-lg);
  background:rgba(1,12,44,.34);backdrop-filter:blur(2px);overflow:hidden
}
.statband > div{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:var(--sp-7) var(--sp-5);position:relative
}
.statband > div + div::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.30),transparent)
}
.statband b{
  font-size:clamp(38px,4.2vw,54px);font-weight:800;color:#fff;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums
}
.statband .bar{width:38px;height:3px;border-radius:2px;background:var(--blue-bright)}
.statband span{
  font-size:var(--fs-100);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#C6D8F2;text-align:center
}

/* ---------- values / benefits ---------- */
.value-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-5)}
.value-card svg{width:52px;height:52px;color:var(--ink)}
.value-card h3{font-size:var(--fs-400)}
.value-card p{font-size:var(--fs-200);color:var(--body);line-height:var(--lh-tight)}
/* every benefit is a card of the same height with the same rounded edge, so a
   two-line one and a five-line one still read as the same object */
.benefit{
  text-align:center;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;
  height:100%;padding:var(--sp-6) var(--sp-5);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm)
}
.benefit svg{width:52px;height:52px;color:var(--blue);flex:none}
.benefit h3{font-size:var(--fs-400)}
.benefit p{font-size:var(--fs-200);color:var(--muted);line-height:var(--lh-tight);max-width:32ch}
.benefit:hover{border-color:var(--blue-bright)}

/* ---------- life at comtech ---------- */
.life{background:var(--navy);border-radius:var(--r-lg);padding:var(--sp-7);display:grid;grid-template-columns:290px minmax(0,1fr);gap:var(--sp-7);align-items:center}
.life > *{min-width:0}
.life h2{color:#fff;font-size:var(--fs-550)}
.life .rule{width:96px;height:2px;background:rgba(255,255,255,.5);margin:18px 0}
.life p{color:#D9E1F0;font-size:var(--fs-200);line-height:var(--lh-tight);margin-bottom:22px}
.life-li{
  display:inline-flex;align-items:center;
  padding:13px 24px;border-radius:var(--r-pill);background:#fff;
  transition:background .16s ease,transform .16s ease
}
.life-li:hover{background:#EDF3FB;transform:translateY(-1px)}
.life-li img{height:22px;width:auto;flex:none}
.life-shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;min-width:0}
.shot{border-radius:var(--r-sm);overflow:hidden;background:#071640;border:1px solid rgba(255,255,255,.14);min-width:0;display:flex;flex-direction:column}
.shot img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.shot figcaption{
  padding:11px 8px;text-align:center;font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.045em;text-transform:uppercase;color:#fff;line-height:1.35;
  overflow-wrap:break-word
}

/* ---------- testimonials ---------- */
.quote{padding:30px 28px;display:flex;flex-direction:column;gap:22px;justify-content:space-between}
.quote .qmark{width:26px;height:26px;color:var(--blue);flex:none}
.quote .qtop{display:flex;gap:8px}
.quote p{font-size:var(--fs-300);line-height:var(--lh-body)}
.who{display:flex;align-items:center;gap:16px}
.who > span{display:block}
.who img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.who b{display:block;font-size:var(--fs-200);font-weight:700;color:var(--ink)}
.who span{font-size:var(--fs-100);color:var(--muted)}

/* ---------- contact ---------- */
.contact-feats{display:flex;flex-wrap:wrap;gap:30px;margin-top:12px}
.feat{display:flex;gap:16px;align-items:flex-start;flex:0 1 250px}
.hero-contact .hero-copy{max-width:880px}
.hero-contact .hero-copy > p{max-width:560px}
.feat .box{
  width:56px;height:56px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center;flex:none
}
.feat svg{width:26px;height:26px;color:#fff}
.feat b{display:block;font-size:var(--fs-lede);font-weight:700;color:#fff;margin-bottom:2px}
.feat span{font-size:var(--fs-200);color:#DCE4F2;line-height:var(--lh-tight)}
.form{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{position:relative;display:flex;align-items:center}
.field svg{position:absolute;left:18px;width:17px;height:17px;color:var(--muted-soft)}
.field textarea ~ svg,.field.ta svg{top:20px}
.field input,.field textarea{
  width:100%;font:inherit;font-size:var(--fs-ctl);min-height:var(--ctl-h-field);color:var(--body);
  background:#EDF3FF;border:1px solid var(--tint-line);border-radius:var(--r-sm);
  padding:16px 18px 16px 46px;
}
.field textarea{min-height:186px;resize:vertical;padding-top:16px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-soft)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff}
/* a border colour change alone is a weak focus cue; add a real ring */
.field input:focus-visible,.field textarea:focus-visible{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,137,214,.38)
}
.privacy{font-size:var(--fs-100);color:var(--muted)}
.info-card{
  background:#fff;border-radius:var(--r);padding:22px 26px;display:flex;gap:20px;align-items:center;
  box-shadow:var(--shadow-sm)
}
.info-card .badge{
  width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center
}
.info-card .badge svg{width:28px;height:28px}
.info-card b{display:block;font-size:var(--fs-400);font-weight:700;color:var(--ink);margin-bottom:2px}
.info-card span{font-size:var(--fs-200);color:var(--body)}

/* ---------- accordions (contract pages) ---------- */
.acc{display:flex;flex-direction:column;gap:14px}
.acc-item{border-radius:var(--r-sm)}
.acc-head{
  width:100%;background:#fff;border-radius:var(--r-sm);
  padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:var(--fs-lede);font-weight:700;color:var(--ink);text-align:left;
  box-shadow:0 1px 2px rgba(1,12,44,.05)
}
.acc-head:hover{color:var(--blue)}
.acc-item.open > .acc-head{background:transparent;box-shadow:none}
.acc-sign{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--blue);color:var(--blue);
  display:flex;align-items:center;justify-content:center;flex:none;background:#fff
}
.acc-sign svg{width:15px;height:15px}
.acc-body{display:none;padding:4px 26px 30px}
.acc-item.open .acc-body{display:block}
.acc-body .stack-sm{gap:16px}
a.acc-head .acc-sign svg{width:14px;height:14px}
a.acc-head:hover .acc-sign{background:var(--blue);color:#fff}
.acc-body p{font-size:var(--fs-300)}
.dl{display:grid;grid-template-columns:230px 1fr;gap:2px 24px}
.dl dt{
  font-size:var(--fs-100);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  padding:10px 0;border-bottom:1px solid var(--tint-line)
}
.dl dd{margin:0;padding:10px 0;font-size:var(--fs-300);font-weight:600;color:var(--body);border-bottom:1px solid var(--tint-line);overflow-wrap:anywhere}
.dl dd a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.pending{
  font-size:var(--fs-200);color:var(--muted);font-style:italic;
  border-left:3px solid var(--tint-line);padding-left:14px
}

/* ---------- file links ---------- */
.file-pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:var(--r-pill);
  border:1.5px solid var(--blue);color:var(--blue);
  font-size:var(--fs-100);font-weight:700;letter-spacing:.06em;
  transition:background .16s ease,color .16s ease
}
.dl dd a.file-pill,.file-pill{text-decoration:none}
.file-pill:hover{background:var(--blue);color:#fff}
.file-pill svg{width:15px;height:15px;flex:none}
.res-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.doc-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:30px}
.doc-actions .btn{min-height:var(--ctl-h-sm);padding:0 24px;font-size:var(--fs-ctl)}

/* ---------- platforms page ---------- */
.rule-accent{width:56px;height:4px;border-radius:2px;background:var(--blue)}
.plat-hero{
  background:var(--navy);
  background-image:var(--bg-plat);background-size:cover;background-position:center right;
}
.plat-hero-inner{
  padding-top:136px;padding-bottom:96px;max-width:var(--maxw);
  display:flex;flex-direction:column;align-items:flex-start;gap:22px
}
.plat-hero h1{color:#fff}
.plat-hero p:not(.crumb){max-width:48ch;font-size:var(--fs-lede);line-height:var(--lh-body);color:#E5ECF9}

.plat-hero .rule-accent{background:var(--blue-bright)}
.plat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;align-items:stretch}
.plat-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column
}
.plat-logo{
  background:radial-gradient(120% 140% at 70% 20%,#12294F 0%,#08142E 60%,#050D20 100%);
  min-height:210px;display:flex;align-items:center;justify-content:center;padding:34px
}
.plat-logo img{width:auto;max-width:74%}
.plat-body{padding:30px 30px 34px;display:flex;flex-direction:column;gap:14px;flex:1}
.plat-body p{margin-bottom:10px}
.plat-body p{font-size:var(--fs-300);line-height:var(--lh-body)}
.plat-btn{align-self:flex-start;margin-top:auto;min-height:var(--ctl-h-sm);padding:0 24px;font-size:var(--fs-ctl)}

/* ---------- certifications strip (home) ---------- */
.cert-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(30px,6vw,86px);margin:0}
.cert-row img{height:78px;width:auto}

/* ---------- embedded map ---------- */
.map-embed{
  position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-md);background:#E8EFF8
}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- contract document pages ---------- */
.doc-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--tint-line);border:1px solid var(--tint-line);
  border-radius:var(--r);overflow:hidden;margin-bottom:36px
}
.fact{background:#fff;padding:16px 20px;display:flex;flex-direction:column;gap:2px}
.fact dt{font-size:var(--fs-100);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.fact dd{font-size:var(--fs-300);font-weight:600;color:var(--ink);overflow-wrap:anywhere}

.doc-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:18px
}
.doc-head p{font-size:var(--fs-200)}
.doc-search{position:relative;display:flex;align-items:center;min-width:320px;flex:0 1 380px}
.doc-search svg{position:absolute;left:16px;width:17px;height:17px;color:var(--muted-soft)}
.doc-search input{
  width:100%;font:inherit;font-size:var(--fs-ctl);min-height:var(--ctl-h-field);color:var(--body);
  background:#fff;border:1px solid var(--tint-line);border-radius:var(--r-pill);
  padding:13px 18px 13px 44px
}
.doc-search input:focus{outline:none;border-color:var(--blue)}
.doc-search input:focus-visible{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,137,214,.38)}

.table-wrap{
  overflow-x:auto;background:#fff;border:1px solid var(--tint-line);
  border-radius:var(--r);box-shadow:var(--shadow-sm)
}
.dtable{border-collapse:collapse;width:100%;min-width:940px;font-size:var(--fs-200)}
.dtable th{
  text-align:left;font-size:var(--fs-100);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:var(--navy);padding:14px 16px;white-space:nowrap;
  position:sticky;top:0;z-index:1
}
.dtable td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:top;line-height:1.45}
.dtable tbody tr:nth-child(even) td{background:#F7FAFF}
.dtable tbody tr:hover td{background:var(--tint)}
.dtable .num,.dtable th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dtable .mono{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.dtable td b{display:block;color:var(--ink);font-weight:700}
.cell-desc{display:block;margin-top:4px;font-size:var(--fs-100);color:var(--muted);max-width:56ch}
.doc-note{margin-top:20px;font-size:var(--fs-200);color:var(--muted);text-align:center}

.doc-sheets{display:flex;flex-direction:column;gap:26px}
.sheet{
  background:#fff;border:1px solid var(--tint-line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm)
}
.sheet img{width:100%;height:auto}
.sheet figcaption{
  padding:11px 18px;border-top:1px solid var(--line);
  font-size:var(--fs-100);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)
}
@media (max-width:620px){
  .doc-search{min-width:0;flex:1 1 100%}
}

/* ---------- staffing service tiles ---------- */
.tile{
  background:#fff;border-radius:var(--r-sm);border-top:3px solid var(--navy);
  padding:34px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.tile .badge{
  width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center
}
.tile .badge svg{width:25px;height:25px}
.tile h3{font-size:var(--fs-lede);color:var(--navy);line-height:1.32}

.map-img{width:100%;border-radius:var(--r);box-shadow:var(--shadow-md)}
.contact-cols{align-items:center}

/* ---------- case study article ---------- */
.cs-hero{background:linear-gradient(160deg,#EEF4FF 0%,#DDE9FF 100%);padding-top:118px;padding-bottom:76px}
.cs-hero .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.cs-hero .rule{width:64px;height:5px;background:var(--blue);border-radius:3px;margin:26px 0 22px}
.cs-hero h1{font-size:var(--fs-700);color:var(--navy)}
.cs-body{max-width:72ch;display:flex;flex-direction:column;gap:34px}
.cs-hero .cs-sub{font-size:var(--fs-lede);font-weight:600;color:var(--navy);line-height:var(--lh-tight)}
.cs-lede{font-size:var(--fs-lede);line-height:var(--lh-body);color:var(--body)}
.cs-bullets li{position:relative;padding-left:26px;margin-bottom:14px;font-size:var(--fs-300);line-height:var(--lh-body)}
.cs-bullets li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.phase{border-left:3px solid var(--tint-line);padding-left:20px;display:flex;flex-direction:column;gap:8px}
.phase h3{color:var(--blue)}
.cs-block{display:flex;flex-direction:column;gap:14px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.cs-block:last-child{border-bottom:0;padding-bottom:0}
.cs-cta{
  background:#F2F6FF;border-radius:var(--r);padding:var(--sp-6) var(--sp-7);margin-top:var(--sp-8);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap
}
.cs-cta h3{font-size:var(--fs-500)}
.cs-cta .btn{background:var(--navy);color:#fff}
.cs-cta .btn:hover{background:var(--blue)}

/* ---------- page banner (staffing pages) ---------- */
.pbanner{background:var(--navy);color:#fff;padding-top:124px;padding-bottom:34px}
.pbanner .inner{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.pbanner h1{color:#fff;font-size:var(--fs-700)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .lead-grid{gap:12px}
  .lead-card{padding:11px 11px 14px;gap:8px}
  .lead-card h3{font-size:15px}
  .lead-role{font-size:12.5px}
  .lead-link{font-size:12.5px;gap:6px}
  .lead-link .li-badge{width:19px;height:19px}
}
@media (max-width:820px){
  .lead-grid{gap:9px}
  .lead-card{padding:9px 9px 12px}
  .lead-card h3{font-size:13.5px}
  .lead-role{font-size:11.5px;line-height:1.3}
  .lead-link span:not(.li-badge){display:none}
  .lead-link{font-size:0}
  .lead-card .rule-accent{width:24px}
}
@media (max-width:1080px){
  .nav{gap:18px}
  .nav-link{font-size:var(--fs-200)}
  .hdr{padding:0 26px}
  .split{gap:44px}
  .foot-top{grid-template-columns:1fr 1fr;gap:36px}
  .foot-contact{grid-column:1 / -1;text-align:left}
  .foot-contact li{justify-content:flex-start}
  .foot-contact address{text-align:left}
  .life{grid-template-columns:1fr}
}
@media (max-width:980px){
  .burger{display:flex}
  .nav{
    position:absolute;top:calc(100% + 14px);right:0;left:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:#fff;border-radius:var(--r);border:1px solid var(--line);
    box-shadow:var(--shadow-md);padding:12px;display:none
  }
  .nav.open{display:flex}
  .nav-link{padding:12px 14px;border-radius:10px}
  .nav-link:hover{background:var(--tint)}
  .menu,.menu-start,.menu-end{
    position:static;transform:none;opacity:1;visibility:visible;
    box-shadow:none;border:0;padding:0 0 6px 12px;min-width:0;display:none
  }
  .has-menu.open .menu,
  .has-menu.open .menu-start,
  .has-menu.open .menu-end{display:block;transform:none}
  .menu-cols{grid-template-columns:1fr;gap:0}
  .menu-head{padding:10px 16px 4px}
  .nav{max-height:min(72vh,620px);overflow-y:auto}
}
@media (max-width:900px){
  :root{--hdr-h:56px}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4,.g3,.g2,.why-grid,.life-shots,.statband,.logos.grid-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plat-grid{grid-template-columns:1fr}
  .plat-hero-inner{padding-top:118px;padding-bottom:70px}
  .split{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:24px}
  .hero-inner{padding-top:118px;padding-bottom:72px}
  .sec{padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
  .dl{grid-template-columns:1fr;gap:0}
  .dl dt{border-bottom:0;padding-bottom:0}
  .cta-dark,.cs-cta,.cta-tint{flex-direction:column;align-items:flex-start}
  .why{padding:var(--sp-6) var(--sp-5)}
}
@media (max-width:620px){
  body{font-size:var(--fs-300)}
  .g5,.g4,.g3,.g2,.why-grid,.statband,.logos.grid-wall{grid-template-columns:1fr}
  .lead-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .lead-card{padding:12px 12px 15px}
  .lead-card h3{font-size:15px}
  .lead-role{font-size:12.5px}
  .lead-link{font-size:12.5px}
  .lead-link span:not(.li-badge){display:inline}
  .cert-row{gap:24px}
  .cert-row img{height:60px}
  .life-shots{grid-template-columns:repeat(2,1fr)}
  .form .row2{grid-template-columns:1fr}
  .hdr{margin:0 12px;padding:0 16px 0 20px}
  .hero-actions{gap:14px}
  .btn{min-height:52px;padding:14px 24px;font-size:var(--fs-ctl);
       max-width:100%;white-space:normal;text-align:center}
  .acc-head{font-size:var(--fs-300);padding:18px}
  .acc-body{padding:4px 18px 24px}
  .logos.grid-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
  /* the logos were running past the edge of their tiles on phones */
  .logos figure{height:84px}
  .logos img{max-width:100%;max-height:100%}
  #page-about .logos.grid-wall figure{height:92px;padding:12px 10px}
  #page-about .logos.grid-wall img{max-width:100%;max-height:100%;object-fit:contain}
}

/* ====================== msp hub microsite ====================== */
/* ============================================================
   MSPHUB — a deliberately separate visual world from Comtech.
   Everything is scoped to #page-msphub so nothing leaks out.
   ============================================================ */
body.hub-mode .hdr-wrap,
body.hub-mode footer.foot{display:none}
body.hub-mode main{margin-top:0}

#page-msphub{
  --hub-bg:#040E26;
  --hub-deep:#133370;
  --hub-deep-2:#0C2049;
  --hub-accent:#1789D6;
  --hub-accent-lt:#6FBDF2;
  --hub-alert:#ED2734;          /* kept for threat / "don't" markers only */
  --hub-sky:#5AA8E8;
  --ink:#EFF5FD;
  --mute:#A5BBD8;
  --hair:rgba(255,255,255,.13);
  --hub-max:1280px;
  --disp:"Sora","Plus Jakarta Sans",system-ui,sans-serif;
  --body-f:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  background:var(--hub-bg);
  color:var(--ink);
  font-family:var(--body-f);
  font-size:var(--fs-300);
  line-height:1.6;
}
:where(#page-msphub) h1,:where(#page-msphub) h2,
:where(#page-msphub) h3,:where(#page-msphub) h4{
  font-family:var(--disp);color:var(--ink);margin:0;letter-spacing:-.03em;line-height:var(--lh-head)
}
:where(#page-msphub) p{margin:0;color:var(--mute);max-width:74ch}
:where(#page-msphub) a{color:inherit;text-decoration:none}
:where(#page-msphub) ul{margin:0;padding:0;list-style:none}
:where(#page-msphub) li{color:var(--mute)}
#page-msphub .hub-wrap{width:100%;max-width:var(--hub-max);margin:0 auto;padding:0 40px}
#page-msphub .hub-sec{padding:var(--sp-10) 0;position:relative}
#page-msphub .tag{
  font-family:var(--mono);font-size:var(--fs-mono);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--hub-accent-lt)
}
#page-msphub .h-xl{font-size:var(--fs-800);line-height:var(--lh-display)}
#page-msphub .h-lg{font-size:var(--fs-600);line-height:1.14}
#page-msphub .h-md{font-size:var(--fs-500);line-height:1.22}
#page-msphub .h-sm{font-size:var(--fs-400);letter-spacing:-.02em;line-height:1.28}
#page-msphub .lede{font-size:var(--fs-lede);line-height:var(--lh-long);max-width:66ch;color:var(--mute)}
#page-msphub .rule{height:1px;background:var(--hair)}

/* ---------- nav ---------- */
.hub-nav{
  position:sticky;top:0;z-index:60;
  background:rgba(4,14,38,.86);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--hair)
}
.hub-nav-in{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.hub-brand img{height:30px;width:auto}
.hub-links{display:flex;gap:30px;font-size:var(--fs-100);color:#C6D8EE;font-family:var(--mono);letter-spacing:.04em}
.hub-links a:hover{color:#fff}
.hub-nav-right{display:flex;align-items:center;gap:18px}
/* the way back to the main site: a proper button, not a small grey label,
   so a non-technical visitor can see it at a glance */
.hub-back{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body-f);font-size:var(--fs-ctl);font-weight:700;letter-spacing:.01em;
  color:#fff;background:rgba(23,137,214,.22);
  border:1.5px solid rgba(111,189,242,.6);
  min-height:44px;padding:0 19px;border-radius:999px;white-space:nowrap;
  transition:background .2s ease,border-color .2s ease
}
.hub-back svg{width:17px;height:17px;flex:none;transition:transform .2s ease}
.hub-back:hover{background:var(--hub-accent);border-color:var(--hub-accent);color:#fff}
.hub-back:hover svg{transform:translateX(-3px)}
.hub-cta{
  border:1px solid rgba(255,255,255,.26);padding:11px 19px;border-radius:999px;
  font-size:var(--fs-100);font-weight:600;white-space:nowrap
}
.hub-cta:hover{background:#fff;color:var(--hub-bg);border-color:#fff}

/* ---------- buttons ---------- */
.hub-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:999px;
  font-weight:700;font-size:var(--fs-ctl);letter-spacing:.01em;transition:.2s ease
}
.hub-btn-p{background:#fff;color:#06122D}
.hub-btn-p:hover{background:var(--hub-accent-lt);color:#fff}
.hub-btn-s{border:1px solid rgba(255,255,255,.28);color:#fff}
.hub-btn-s:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- hero ---------- */
.hub-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 74% 34%,rgba(23,137,214,.40),transparent 42%),
    radial-gradient(circle at 92% 78%,rgba(90,168,232,.20),transparent 34%),
    linear-gradient(118deg,#040E26 0%,#0C2049 52%,var(--hub-deep) 100%);
}
.hub-hero-in{
  display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;
  padding:104px 0 96px
}
.hub-hero h1{margin:20px 0 24px;max-width:14ch}
.hub-hero .lede{color:#CFE0F3}
.hub-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hub-hero-art{display:flex;align-items:center;justify-content:center}
.hub-hero-art svg{width:100%;max-width:540px;height:auto}

/* ---------- stat strip ---------- */
.hub-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair);margin-top:56px}
.hub-stat{padding:26px 28px 4px 0;border-right:1px solid var(--hair)}
.hub-stat:not(:first-child){padding-left:28px}
.hub-stat:last-child{border-right:0}
.hub-stat b{display:block;font-family:var(--disp);font-size:var(--fs-550);letter-spacing:-.04em;color:#fff}
.hub-stat span{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.05em;color:var(--mute)}

/* ---------- two-column section head ---------- */
.hub-head{display:grid;grid-template-columns:.92fr 1.08fr;gap:80px;align-items:start}
.hub-head-r{padding-top:6px}
.hub-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.hub-split-even{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}

/* ---------- service grid ---------- */
.hub-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);margin-top:52px
}
.hub-cell{background:#09193B;padding:var(--sp-6) var(--sp-6) var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-4);transition:background .22s ease}
.hub-cell:nth-child(even){background:#0B1E45}
.hub-cell:hover{background:#0F2A5C}
.hub-cell .num{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.16em;color:var(--hub-accent-lt)}
.hub-cell svg.ico{width:34px;height:34px;color:var(--hub-accent-lt)}
.hub-cell p{font-size:var(--fs-200);line-height:var(--lh-body)}

/* ---------- platform module list ---------- */
.hub-mods{margin-top:34px;border-top:1px solid var(--hair)}
.hub-mod{
  display:grid;grid-template-columns:34px 1fr auto;gap:18px;align-items:baseline;
  padding:19px 0;border-bottom:1px solid var(--hair)
}
.hub-mod .k{font-family:var(--mono);font-size:var(--fs-mono);color:var(--hub-accent-lt)}
.hub-mod b{font-family:var(--disp);font-size:var(--fs-lede);font-weight:600;letter-spacing:-.02em}
.hub-mod span{font-size:var(--fs-200);color:var(--mute);text-align:right}

/* ---------- feature tiles ---------- */
.hub-feats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.hub-feat{background:#081736;padding:28px 26px;display:flex;flex-direction:column;gap:9px}
.hub-feat h3{font-size:var(--fs-lede)}
.hub-feat p{font-size:var(--fs-200);line-height:var(--lh-tight)}

/* ---------- cost ladder ---------- */
.hub-ladder{margin-top:46px;border-top:1px solid var(--hair)}
.hub-rung{
  display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--hair)
}
.hub-rung .amt{font-family:var(--disp);font-size:clamp(22px,2.4vw,30px);letter-spacing:-.04em;color:#fff}
.hub-rung .per{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--hub-accent-lt)}
.hub-rung .bar{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--hub-accent),var(--hub-sky))}
.hub-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:48px}
.hub-fact{background:#071534;padding:28px 24px}
.hub-fact b{display:block;font-family:var(--disp);font-size:var(--fs-550);letter-spacing:-.04em;color:var(--hub-accent-lt);margin-bottom:8px}
.hub-fact p{font-size:var(--fs-200);line-height:var(--lh-tight)}

/* ---------- light sections ---------- */
.hub-light{background:#F1F6FD;color:#0C1A38}
.hub-light h2,.hub-light h3{color:#0C1A38}
.hub-light p{color:#55657E}
#page-msphub .hub-light .tag{color:#0971B7}
#page-msphub .hub-light .rule{background:#D3E1F2}
.hub-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#D3E1F2;border:1px solid #D3E1F2;margin-top:var(--sp-8)}
/* a two-up variant as a class, so the responsive rules below can still
   collapse it — an inline grid-template could not be overridden */
.hub-cards.is-two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.hub-card{background:#FAFCFE;padding:32px 28px;display:flex;flex-direction:column;gap:12px}
.hub-card h3{font-size:var(--fs-400)}
.hub-card p{font-size:var(--fs-200);line-height:var(--lh-body)}
.hub-card svg{width:30px;height:30px;color:#0971B7}

/* ---------- VAPT deliverables ---------- */
.hub-deliv{border-top:1px solid var(--hair)}
.hub-deliv > div{padding:24px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:30px 1fr;gap:20px}
.hub-deliv .n{font-family:var(--mono);font-size:var(--fs-mono);color:var(--hub-accent-lt)}
.hub-deliv b{display:block;font-family:var(--disp);font-size:var(--fs-400);letter-spacing:-.02em;margin-bottom:6px}
.hub-deliv p{font-size:var(--fs-200)}

/* ---------- process steps ---------- */
.hub-steps{border-top:1px solid var(--hair)}
.hub-step{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--hair)}
.hub-step .n{font-family:var(--mono);font-weight:600;color:var(--hub-accent-lt);font-size:var(--fs-mono);letter-spacing:.1em}
.hub-step h3{font-size:var(--fs-lede);margin-bottom:5px}
.hub-step p{font-size:var(--fs-200)}

/* ---------- diagram frames ---------- */
.hub-figure{margin-top:52px;border:1px solid var(--hair);background:#061331;padding:8px}
.hub-figure .scroll{overflow-x:auto}
.hub-figure svg{display:block;min-width:900px;width:100%;height:auto}
.hub-figure figcaption{
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;
  color:#7C92B4;padding:14px 16px 10px;border-top:1px solid var(--hair);margin-top:8px
}

/* ---------- awareness field guide ---------- */
.hub-guide{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:48px}
.hub-panel{background:#0A1B3F;padding:34px 30px}
.hub-panel h3{font-size:var(--fs-400);margin-bottom:18px}
.hub-dd{display:grid;gap:22px}
.hub-dd h4{
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:10px;display:inline-block;padding:5px 12px;border-radius:999px
}
.hub-dd .do h4{background:rgba(74,220,150,.14);color:#57DFA0}
.hub-dd .dont h4{background:rgba(237,39,52,.15);color:#FF7A83}
.hub-dd li{position:relative;padding-left:18px;font-size:var(--fs-200);color:var(--mute);margin-bottom:8px;line-height:var(--lh-tight)}
.hub-dd .do li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:#57DFA0}
.hub-dd .dont li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:#FF7A83}
.hub-quote{
  background:#0D2350;border-left:3px solid var(--hub-accent);padding:20px 22px;margin-top:8px;
  font-size:var(--fs-200);line-height:var(--lh-body);color:#CBDDF1;font-style:italic
}

/* ---------- closing CTA ---------- */
.hub-close{
  text-align:center;padding:var(--sp-10) 0 var(--sp-10);
  background:radial-gradient(circle at 50% 0,rgba(23,137,214,.36),transparent 42%),var(--hub-bg)
}
.hub-close h2{max-width:18ch;margin:16px auto 22px}
.hub-close p{max-width:60ch;margin:0 auto}
.hub-close .hub-actions{justify-content:center}

/* ---------- footer ---------- */
.hub-foot{background:#030A1C;border-top:1px solid var(--hair);padding:44px 0 34px}
.hub-foot-in{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start}
.hub-foot img{height:26px;width:auto;margin-bottom:14px}
.hub-foot p,.hub-foot a{font-family:var(--mono);font-size:var(--fs-mono);color:#7C92B4;letter-spacing:.03em}
.hub-foot a:hover{color:var(--hub-accent-lt)}
.hub-foot-col{display:flex;flex-direction:column;gap:9px}
.hub-foot-bot{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap
}

@media (max-width:1080px){
  #page-msphub .hub-wrap{padding:0 26px}
  .hub-links{display:none}
  .hub-hero-in,.hub-head,.hub-split,.hub-split-even{grid-template-columns:1fr;gap:48px}
  .hub-grid,.hub-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-facts{grid-template-columns:1fr 1fr}
  #page-msphub .hub-sec{padding:var(--sp-9) 0}
}
@media (max-width:680px){
  .hub-nav-right{gap:10px}
  .hub-back{font-size:var(--fs-100);padding:0 14px;min-height:var(--tap);gap:7px}
  .hub-back .bk{display:none}
  .hub-cta{padding:0 16px;min-height:40px;font-size:var(--fs-100)}
  .hub-grid,.hub-cards,.hub-feats,.hub-guide,.hub-facts,.hub-stats{grid-template-columns:minmax(0,1fr)}
  .hub-stat{border-right:0;border-bottom:1px solid var(--hair);padding:20px 0 !important}
  .hub-rung{grid-template-columns:104px 1fr;gap:14px}
  .hub-mod{grid-template-columns:26px 1fr;gap:12px}
  .hub-mod span{grid-column:2;text-align:left;margin-top:4px}
  .hub-hero-in{padding:72px 0 68px}
}

/* ==================================================================
   hexagon tiles — the modern treatment
   Same shapes and the same layout, restyled to sit in the same family
   as the cards that pop out of the home page circle: a glassy light
   face at rest with a bright blue edge, the icon on its own gradient
   disc, and a deep navy fill with a luminous rim and a blue glow once
   a tile is hovered or opened.
   ================================================================== */

/* ---- the comb tiles (IT staffing) and the health care circles ---- */
.hex-in{
  background:radial-gradient(115% 78% at 22% 2%,rgba(255,255,255,.96),rgba(255,255,255,0) 52%),
    radial-gradient(95% 76% at 96% 106%,rgba(23,137,214,.34),rgba(23,137,214,0) 60%),
    linear-gradient(158deg,#E6F0FF 0%,#CDE1FD 48%,#ACCAEF 100%)
}
.hex-in::before{
  inset:0;
  background:
    radial-gradient(115% 78% at 22% 2%,rgba(255,255,255,.96),rgba(255,255,255,0) 52%),
    radial-gradient(95% 76% at 96% 106%,rgba(23,137,214,.34),rgba(23,137,214,0) 60%),
    linear-gradient(158deg,#E6F0FF 0%,#CDE1FD 48%,#ACCAEF 100%)
}
.comb.rings .hex-in{
  background:radial-gradient(115% 78% at 22% 2%,rgba(255,255,255,.96),rgba(255,255,255,0) 52%),
    radial-gradient(95% 76% at 96% 106%,rgba(23,137,214,.34),rgba(23,137,214,0) 60%),
    linear-gradient(158deg,#E6F0FF 0%,#CDE1FD 48%,#ACCAEF 100%)
}
.hex-ico{
  width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 34% 26%,#FFFFFF,#D9EAFF 56%,#A8CCF3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(23,137,214,.16),0 6px 16px rgba(23,137,214,.26);
  transition:background .26s ease,box-shadow .26s ease,transform .26s cubic-bezier(.22,.9,.3,1)
}
.hex-ico svg{width:26px;height:26px;color:#0F2A5C}
.hex{
  filter:drop-shadow(0 2px 4px rgba(23,80,180,.12)) drop-shadow(0 12px 26px rgba(23,80,180,.16))
}
.hex:hover,.hex:focus-visible,.hex.is-open{
  filter:drop-shadow(0 2px 6px rgba(10,40,120,.14)) drop-shadow(0 16px 36px rgba(10,40,120,.26))
         drop-shadow(0 0 16px rgba(63,140,255,.34))
}
.hex:hover .hex-in,.hex:focus-visible .hex-in,.hex.is-open .hex-in,
.comb.rings .hex:hover .hex-in,.comb.rings .hex:focus-visible .hex-in,.comb.rings .hex.is-open .hex-in{
  background:
    radial-gradient(118% 86% at 24% 6%,rgba(86,146,226,.42),rgba(86,146,226,0) 58%),
    linear-gradient(158deg,#0B1F4E 0%,#0A1A45 46%,#123A76 100%)
}
.hex:hover .hex-in::before,.hex:focus-visible .hex-in::before,.hex.is-open .hex-in::before{
  inset:0;
  background:
    radial-gradient(118% 86% at 24% 6%,rgba(86,146,226,.42),rgba(86,146,226,0) 58%),
    linear-gradient(158deg,#0B1F4E 0%,#0A1A45 46%,#123A76 100%)
}
.hex:hover .hex-ico,.hex:focus-visible .hex-ico,.hex.is-open .hex-ico{
  background:radial-gradient(circle at 35% 30%,#4F9BFF,#0D3290);
  box-shadow:inset 0 0 0 1px rgba(168,236,255,.45),0 0 16px rgba(90,170,255,.75);
  transform:translateY(-1px)
}
.hex:hover .hex-ico svg,.hex:focus-visible .hex-ico svg,.hex.is-open .hex-ico svg{color:#fff}
.hex:hover .hex-loc,.hex:focus-visible .hex-loc,.hex.is-open .hex-loc{color:#BCD9FF}

/* ---- the service flower ---- */
.hx{
  filter:drop-shadow(0 2px 4px rgba(23,80,180,.12)) drop-shadow(0 12px 26px rgba(23,80,180,.16))
}
.hx-in{
  background:radial-gradient(115% 78% at 22% 2%,rgba(255,255,255,.96),rgba(255,255,255,0) 52%),
    radial-gradient(95% 76% at 96% 106%,rgba(23,137,214,.34),rgba(23,137,214,0) 60%),
    linear-gradient(158deg,#E6F0FF 0%,#CDE1FD 48%,#ACCAEF 100%)
}
.hx-in::before{
  inset:0;
  background:
    radial-gradient(115% 78% at 22% 2%,rgba(255,255,255,.96),rgba(255,255,255,0) 52%),
    radial-gradient(95% 76% at 96% 106%,rgba(23,137,214,.34),rgba(23,137,214,0) 60%),
    linear-gradient(158deg,#E6F0FF 0%,#CDE1FD 48%,#ACCAEF 100%)
}
.hx-ico{
  width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 34% 26%,#FFFFFF,#D9EAFF 56%,#A8CCF3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(23,137,214,.16),0 6px 16px rgba(23,137,214,.26);
  transition:width .3s ease,height .3s ease,background .3s ease,box-shadow .3s ease
}
.hx-ico svg{width:50%;height:50%;color:#0F2A5C}
.hx:hover,.hx:focus-visible,.hx:has(:focus-visible),.hx.is-open,
.hx-core:hover,.hx-core:focus-visible,.hx-core:has(:focus-visible),.hx-core.is-open{
  filter:drop-shadow(0 2px 6px rgba(10,40,120,.14)) drop-shadow(0 16px 36px rgba(10,40,120,.26))
         drop-shadow(0 0 16px rgba(63,140,255,.34))
}
.hx:hover .hx-in,.hx:focus-visible .hx-in,.hx:has(:focus-visible) .hx-in,.hx.is-open .hx-in{
  background:
    radial-gradient(118% 86% at 24% 6%,rgba(86,146,226,.42),rgba(86,146,226,0) 58%),
    linear-gradient(158deg,#0B1F4E 0%,#0A1A45 46%,#123A76 100%)
}
.hx:hover .hx-in::before,.hx:focus-visible .hx-in::before,.hx:has(:focus-visible) .hx-in::before,.hx.is-open .hx-in::before{
  inset:0;
  background:
    radial-gradient(118% 86% at 24% 6%,rgba(86,146,226,.42),rgba(86,146,226,0) 58%),
    linear-gradient(158deg,#0B1F4E 0%,#0A1A45 46%,#123A76 100%)
}
.hx:hover .hx-ico,.hx:focus-visible .hx-ico,.hx:has(:focus-visible) .hx-ico,.hx.is-open .hx-ico{
  width:30px;height:30px;
  background:radial-gradient(circle at 35% 30%,#4F9BFF,#0D3290);
  box-shadow:inset 0 0 0 1px rgba(168,236,255,.45),0 0 14px rgba(90,170,255,.7)
}
.hx:hover .hx-ico svg,.hx:focus-visible .hx-ico svg,.hx:has(:focus-visible) .hx-ico svg,.hx.is-open .hx-ico svg{
  width:56%;height:56%;color:#fff
}
/* the core keeps its accent, so its disc is navy from the start */
.hx-core .hx-in{background:linear-gradient(158deg,#3F8CFF,#A8ECFF 48%,#1789D6)}
.hx-core .hx-in::before{
  inset:0;
  background:
    radial-gradient(120% 90% at 22% 6%,rgba(219,240,255,.5),rgba(219,240,255,0) 58%),
    linear-gradient(158deg,#1789D6 0%,#0971B7 52%,#0A63A0 100%)
}
.hx-core .hx-ico{
  background:radial-gradient(circle at 35% 30%,#4F9BFF,#0D3290);
  box-shadow:inset 0 0 0 1px rgba(168,236,255,.4),0 0 14px rgba(90,170,255,.55)
}
.hx-core .hx-ico svg{color:#fff}

/* ---- the badge on the role panel, so it matches the tiles above it ---- */
.role-mark{
  background:linear-gradient(158deg,#123A76 0%,#0A1A45 48%,#16397F 100%);
  filter:drop-shadow(0 8px 20px rgba(10,40,120,.28))
}
.role-mark svg{filter:drop-shadow(0 0 8px rgba(90,170,255,.6))}

@media (prefers-reduced-motion:reduce){
  .hex-ico,.hx-ico{transition:none}
  .hex:hover .hex-ico,.hex:focus-visible .hex-ico,.hex.is-open .hex-ico{transform:none}
}

/* ==================================================================
   voices of comtech — a spotlight deck rather than a scrolling rail
   One quote holds the stage on a navy glass card; its neighbours sit
   behind it, smaller and dimmed. It advances on its own, with a thin
   progress rail, and stops the moment anyone takes hold of it.
   ================================================================== */
.voices{position:relative;max-width:980px;margin:0 auto}
/* the side cards peek out past the stage by design; clip (not hidden) keeps
   that look while stopping them from widening the page on narrow screens */
.voice-stage{
  position:relative;min-height:clamp(340px,26vw,375px);
  perspective:1400px;
  overflow-x:clip;overflow-y:visible;overflow-clip-margin:160px
}
.voice{
  position:absolute;left:50%;top:50%;margin:0;
  width:min(620px,86%);
  padding:34px 40px 30px;border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(86,146,226,.34),rgba(86,146,226,0) 60%),
    linear-gradient(158deg,#0B1F4E 0%,#0A1A45 46%,#123A76 100%);
  border:1px solid rgba(124,188,255,.42);
  box-shadow:0 1px 0 rgba(168,236,255,.18) inset,
             0 26px 60px rgba(10,40,120,.3),
             0 0 38px rgba(63,140,255,.16);
  display:flex;flex-direction:column;gap:16px;
  opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(.82);
  transition:transform .62s cubic-bezier(.22,.9,.3,1),opacity .5s ease,filter .5s ease
}
.voice-mark{
  width:34px;height:34px;color:#4F9BFF;opacity:.85;flex:none;
  filter:drop-shadow(0 0 12px rgba(79,155,255,.55))
}
.voice blockquote{
  margin:0;font-size:clamp(15px,1.15vw,17px);line-height:var(--lh-body);
  color:#EAF2FF;font-weight:500
}
.voice figcaption{display:flex;flex-direction:column;gap:3px;margin-top:auto}
.voice figcaption b{font-size:var(--fs-200);font-weight:800;color:#fff;letter-spacing:-.01em}
.voice figcaption span{font-size:var(--fs-100);font-weight:600;color:#9FC4F0;letter-spacing:.02em}
/* the one on stage, and the two waiting behind it */
.voice.is-on{
  opacity:1;pointer-events:auto;z-index:3;
  transform:translate(-50%,-50%) scale(1)
}
.voice.is-prev,.voice.is-next{
  opacity:.34;z-index:2;filter:blur(1px) saturate(.8)
}
.voice.is-prev{transform:translate(-50%,-50%) translateX(-42%) scale(.86) rotateY(14deg)}
.voice.is-next{transform:translate(-50%,-50%) translateX(42%) scale(.86) rotateY(-14deg)}

.voice-rail{
  position:relative;height:3px;border-radius:2px;overflow:hidden;
  background:rgba(23,137,214,.16);max-width:320px;margin:4px auto 20px
}
.voice-fill{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,#1789D6,#5AA8E8)
}
.voices.is-running .voice-fill{transition:width linear}

.voice-ctl{display:flex;align-items:center;justify-content:center;gap:18px}
.voice-nav{
  width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid var(--tint-line);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--navy);
  box-shadow:0 4px 14px rgba(10,40,120,.1);
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease
}
.voice-nav svg{width:17px;height:17px}
.voice-prev svg{transform:rotate(180deg)}
.voice-nav:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.voice-nav:focus-visible{outline:3px solid var(--blue-bright);outline-offset:3px}
.voice-dots{display:flex;align-items:center;gap:2px;min-width:0}
/* the dot still reads as 9px, but the button around it is 24px square so it
   can actually be hit on a phone */
.voice-dot{
  width:24px;height:24px;flex:0 1 24px;min-width:18px;
  border-radius:var(--r-pill);cursor:pointer;padding:0;border:0;
  background:none;display:inline-flex;align-items:center;justify-content:center
}
.voice-dot::before{
  content:"";display:block;width:9px;height:9px;border-radius:var(--r-pill);
  background:rgba(10,40,120,.22);transition:background .22s ease,width .28s ease
}
.voice-dot:hover::before{background:rgba(10,40,120,.4)}
.voice-dot[aria-selected="true"]{width:41px;flex:0 0 41px}
.voice-dot[aria-selected="true"]::before{background:var(--blue);width:26px}
.voice-dot:focus-visible{outline:2px solid var(--blue-bright);outline-offset:1px}

@media (max-width:620px){
  .voice{width:92%;padding:30px 24px 26px;border-radius:var(--r-lg)}
  .voice.is-prev,.voice.is-next{opacity:0}
  /* the narrower the card, the more lines a long quote takes, so the stage
     has to grow with it or the longest ones spill over the controls */
  .voice-stage{min-height:430px}
}
@media (max-width:420px){
  .voice-stage{min-height:470px}
}
@media (prefers-reduced-motion:reduce){
  .voice{transition:opacity .2s ease}
  .voice.is-prev,.voice.is-next{opacity:0}
  .voices.is-running .voice-fill{transition:none}
}

/* ==================================================================
   about us — the same words, given room to move
   Three pillars that light up as you reach them, a framed team shot
   with the story running down an accent line beside it, and logo
   walls that settle in a few at a time and come to colour on hover.
   ================================================================== */
/* the reveal is only armed once the script is running, so if it never runs
   nothing is left hidden */
.reveal-on [data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,.9,.3,1) var(--d,0ms),
             transform .62s cubic-bezier(.22,.9,.3,1) var(--d,0ms)
}
.reveal-on [data-reveal].is-in{opacity:1;transform:none}

/* ---- the three pillars ---- */
.pillars{
  display:grid;grid-template-columns:1fr 1.06fr;gap:22px;align-items:start
}
.pillar{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg,#FFFFFF 0%,#F7FAFF 58%,#EFF5FF 100%);
  border:1px solid var(--tint-line);border-radius:var(--r);
  padding:34px 32px 32px;
  box-shadow:0 1px 2px rgba(10,40,120,.04),0 8px 24px rgba(10,40,120,.06);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s ease,border-color .3s ease
}
.pillar-wide{grid-row:span 2}
/* an accent that draws itself down the edge as you arrive on the card */
.pillar::before{
  content:"";position:absolute;left:0;top:0;width:4px;height:0;
  background:linear-gradient(180deg,#3F8CFF,#A8ECFF);
  transition:height .5s cubic-bezier(.22,.9,.3,1)
}
.pillar:hover{
  transform:translateY(-5px);border-color:var(--blue-bright);
  box-shadow:0 2px 6px rgba(10,40,120,.07),0 18px 40px rgba(10,40,120,.14)
}
.pillar:hover::before{height:100%}
.pillar-ico{
  width:56px;height:56px;border-radius:50%;margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 26%,#FFFFFF,#D9EAFF 56%,#A8CCF3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(23,137,214,.16),0 6px 16px rgba(23,137,214,.26);
  transition:background .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.22,.9,.3,1)
}
.pillar-ico svg{width:26px;height:26px;color:#0F2A5C;transition:color .3s ease}
.pillar:hover .pillar-ico{
  background:radial-gradient(circle at 35% 30%,#4F9BFF,#0D3290);
  box-shadow:inset 0 0 0 1px rgba(168,236,255,.45),0 0 16px rgba(90,170,255,.7);
  transform:translateY(-2px) scale(1.04)
}
.pillar:hover .pillar-ico svg{color:#fff}
.pillar h2{margin-bottom:14px}
.pillar p{font-size:var(--fs-300);line-height:var(--lh-long);color:var(--body);margin-bottom:12px}
.pillar p:last-child{margin-bottom:0}
.will{display:flex;flex-direction:column;gap:18px;margin:0;padding:0;list-style:none}
.will li{display:flex;gap:14px;align-items:flex-start;font-size:var(--fs-300);line-height:var(--lh-long);color:var(--body)}
.will-mark{
  flex:none;width:11px;height:11px;margin-top:9px;border-radius:3px;
  background:linear-gradient(140deg,#3F8CFF,#A8ECFF);
  box-shadow:0 0 10px rgba(63,140,255,.5);transform:rotate(45deg)
}

/* ---- our team ---- */
.about-team{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.media-frame{
  margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  box-shadow:0 2px 6px rgba(10,40,120,.08),0 22px 50px rgba(10,40,120,.16)
}
.media-frame::after{
  content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(124,188,255,.5);
  background:linear-gradient(200deg,rgba(63,140,255,.16),rgba(63,140,255,0) 46%)
}
.media-frame img{display:block;width:100%;border-radius:0;box-shadow:none;
  transition:transform .8s cubic-bezier(.22,.9,.3,1)}
.media-frame:hover img{transform:scale(1.05)}
.about-story h2{margin-bottom:22px}
.story-line{position:relative;padding-left:28px}
.story-line::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#3F8CFF,rgba(63,140,255,.12))
}
.story-line p{position:relative;font-size:var(--fs-300);line-height:var(--lh-long);color:var(--body);margin-bottom:18px}
.story-line p:last-child{margin-bottom:0}
.story-line p::before{
  content:"";position:absolute;left:-33px;top:11px;width:10px;height:10px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px #3F8CFF,0 0 10px rgba(63,140,255,.5)
}

/* ---- the logo walls ---- */
#page-about .logos.grid-wall{gap:20px}
#page-about .logos.grid-wall figure{
  height:120px;padding:18px 16px;border-radius:var(--r);
  background:#fff;border:1px solid var(--tint-line);
  box-shadow:0 1px 2px rgba(10,40,120,.04);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s ease,border-color .3s ease
}
#page-about .logos.grid-wall img{
  transition:transform .35s cubic-bezier(.22,.9,.3,1)
}
#page-about .logos.grid-wall figure:hover{
  transform:translateY(-6px);border-color:var(--blue-bright);
  box-shadow:0 2px 6px rgba(10,40,120,.07),0 16px 34px rgba(10,40,120,.15)
}
#page-about .logos.grid-wall figure:hover img{transform:scale(1.05)}

@media (max-width:980px){
  .pillars{grid-template-columns:1fr}
  .pillar-wide{grid-row:auto}
  .about-team{grid-template-columns:1fr;gap:34px}
}
@media (max-width:620px){
  .pillar{padding:26px 22px 24px}
  .pillar p,.will li,.story-line p{font-size:var(--fs-200)}
  #page-about .logos.grid-wall figure{height:92px;padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .reveal-on [data-reveal]{opacity:1;transform:none;transition:none}
  .pillar,.pillar-ico,.media-frame img,#page-about .logos.grid-wall figure{transition:none}
  .pillar:hover,#page-about .logos.grid-wall figure:hover{transform:none}
  .media-frame:hover img{transform:none}
}


/* ==================================================================
   a light touch of the same life across the rest of the site
   Blocks settle in as you reach them, and the repeating cards lift
   on hover with the site's own blue in the shadow. Deliberately
   small: one movement, one shadow, nothing that asks for attention.
   ================================================================== */
.card,.card-svc,.value-card,.why-tile,.benefit,.fact,.cs-block,.sheet,.shot,
.hub-card,.hub-feat,.plat-card{
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s ease,border-color .3s ease
}
.card:hover,.card-svc:hover,.value-card:hover,.why-tile:hover,.benefit:hover,
.fact:hover,.cs-block:hover,.sheet:hover,.shot:hover,.hub-card:hover,
.hub-feat:hover,.plat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 6px rgba(23,80,180,.08),0 16px 34px rgba(23,80,180,.15)
}
/* the section headings get a short accent that draws itself in underneath */
.sec-head .h2::after{
  content:"";display:block;width:0;height:3px;border-radius:2px;margin:14px auto 0;
  background:linear-gradient(90deg,#3F8CFF,#A8ECFF);
  transition:width .6s cubic-bezier(.22,.9,.3,1) .18s
}
.reveal-on .sec-head.is-in .h2::after{width:54px}
@media (prefers-reduced-motion:reduce){
  .card,.card-svc,.value-card,.why-tile,.benefit,.fact,.cs-block,.sheet,.shot,
  .hub-card,.hub-feat,.plat-card{transition:none}
  .card:hover,.card-svc:hover,.value-card:hover,.why-tile:hover,.benefit:hover,
  .fact:hover,.cs-block:hover,.sheet:hover,.shot:hover,.hub-card:hover,
  .hub-feat:hover,.plat-card:hover{transform:none}
  .sec-head .h2::after{transition:none}
}