/* =====================================================
   ASCENT IT SYSTEMS LLP
   ACCESSIBILITY + TYPOGRAPHY UPDATE
===================================================== */


/* =====================================================
   RESET
===================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #050608;
  color: #edf3fa;
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font-family: inherit;
}


/* =====================================================
   VARIABLES
===================================================== */

:root {

  --blue: #1687ff;
  --blue-light: #72b9ff;

  --text: #edf3fa;

  /* Brighter muted text for readability */
  --muted: #9aa8b7;

  --muted-light: #aeb9c5;

  --border:
    rgba(255,255,255,0.10);

  --max-width: 1240px;

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

/*
   Skip link for keyboard users
*/

.skip-link {

  position: fixed;

  left: 15px;
  top: -100px;

  z-index: 9999;

  padding: 12px 18px;

  background: #ffffff;
  color: #050608;

  border-radius: 6px;

  font-size: 14px;
  font-weight: 700;

  transition:
    top .2s ease;

}

.skip-link:focus {

  top: 15px;

}


/*
   Strong visible keyboard focus
*/

:focus-visible {

  outline:
    3px solid #63b3ff;

  outline-offset:
    4px;

}


/*
   Never remove keyboard focus
*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {

  outline:
    3px solid #63b3ff;

  outline-offset:
    3px;

}


/*
   Reduced motion
*/

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

  }

}


/* =====================================================
   BACKGROUND
===================================================== */

body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  background:

    radial-gradient(
      circle at 75% 5%,
      rgba(0,105,255,0.09),
      transparent 30%
    ),

    radial-gradient(
      circle at 15% 35%,
      rgba(0,80,180,0.045),
      transparent 28%
    );

  z-index: -3;

}


.background-grid {

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: .16;

  background-image:

    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    70px 70px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 80%
    );

  z-index: -2;

}


.background-glow {

  position: fixed;

  border-radius: 50%;

  filter: blur(100px);

  pointer-events: none;

  opacity: .12;

  z-index: -1;

}


.glow-blue {

  width: 320px;
  height: 320px;

  right: -50px;
  top: 15%;

  background: #087fff;

}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {
  width: min(
    var(--max-width),
    calc(100% - 48px)
  );

  height: 96px;

  margin: auto;

  display: flex;

  align-items: center;

  position: relative;

  z-index: 100;
}


/* =====================================================
   LOGO
===================================================== */

.brand {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  flex-shrink: 0;

}


.brand-logo {

  width: 50px;
  height: 50px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: transparent;

}


.brand-logo img {

  width: 50px;
  height: 50px;

  max-width: none;

  object-fit: contain;

  display: block;

}


.brand-text {

  display: flex;

  flex-direction: column;

  line-height: 1;

}


.brand-text strong {

  color: #eef4fb;

  font-size: 22px;

  font-weight: 700;

  letter-spacing: -.04em;

}


.brand-text span {

  margin-top: 6px;

  color: #718092;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .19em;

}


/* =====================================================
   DESKTOP NAV
===================================================== */

.desktop-nav {

  display: flex;

  align-items: center;

  gap: 42px;

  margin-left: auto;

  margin-right: 30px;

}


.desktop-nav a {

  color: #a0adba;

  font-size: 14px;

  font-weight: 600;

  transition: .25s ease;

}


.desktop-nav a:hover {

  color: #ffffff;

}


.nav-button {

  padding: 14px 20px;

  border:
    1px solid
    rgba(90,160,230,.32);

  border-radius: 8px;

  color: #d0deeb;

  font-size: 14px;

  font-weight: 600;

  transition: .25s ease;

}


.nav-button span {

  color: var(--blue-light);

  margin-left: 6px;

}


.nav-button:hover {

  border-color:
    rgba(90,160,230,.65);

  background:
    rgba(30,120,255,.07);

  color: white;

}


/* =====================================================
   MOBILE NAV
===================================================== */

.mobile-menu-button {

  display: none;

  margin-left: auto;

  width: 42px;
  height: 42px;

  border:
    1px solid
    var(--border);

  border-radius: 7px;

  background: transparent;

  cursor: pointer;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 6px;

}


.mobile-menu-button span {

  width: 18px;
  height: 2px;

  background: #d9e3ed;

  transition: .3s ease;

}


.mobile-menu {

  display: none;

  position: fixed;

  top: 70px;

  left: 15px;
  right: 15px;

  padding: 15px;

  border:
    1px solid
    var(--border);

  border-radius: 12px;

  background:
    rgba(5,8,12,.98);

  backdrop-filter:
    blur(20px);

  z-index: 99;

}


.mobile-menu.active {

  display: flex;

  flex-direction: column;

}


.mobile-menu a {

  padding: 15px;

  color: #aeb9c5;

  font-size: 14px;

  border-radius: 6px;

}


.mobile-menu a:hover {

  background:
    rgba(30,120,255,.07);

  color: white;

}


/* =====================================================
   COMMON
===================================================== */

.eyebrow {

  display: flex;

  align-items: center;

  gap: 9px;

  color: #7d9abb;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .18em;

}


.eyebrow-dot {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--blue);

  box-shadow:
    0 0 12px
    rgba(20,130,255,.8);

}


.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 48px;

  padding: 0 21px;

  border-radius: 7px;

  font-size: 12px;

  font-weight: 600;

  transition: .3s ease;

}


.button-primary {

  background: #086ac7;

  color: white;

}


.button-primary:hover {

  background: #0b7ce4;

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 35px
    rgba(0,100,255,.18);

}


.button-secondary {

  border:
    1px solid
    var(--border);

  color: #aebdcb;

  background:
    rgba(255,255,255,.015);

}


.button-secondary:hover {

  color: white;

  border-color:
    rgba(100,160,220,.35);

}


/* =====================================================
   HERO
===================================================== */

.hero {

  width:
    min(
      var(--max-width),
      calc(100% - 48px)
    );

  min-height: 700px;

  margin: auto;

  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items: center;

  gap: 50px;

}


.hero-content {

  padding-top: 40px;

}


.hero h1 {

  max-width: 720px;

  margin-top: 25px;

  font-size:
    clamp(48px,5.8vw,79px);

  line-height: .98;

  letter-spacing: -.065em;

  font-weight: 700;

}


.hero h1 span {

  display: block;

  color: #76a9d9;

}


.hero-text {

  max-width: 620px;

  margin-top: 28px;

  color: #a1adba;

  font-size: 16px;

  line-height: 1.8;

}


.hero-buttons {

  display: flex;

  gap: 10px;

  margin-top: 30px;

}


.hero-meta {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 55px;

  color: #607183;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .13em;

}


.hero-meta i {

  width: 24px;

  height: 1px;

  background:
    rgba(90,130,170,.3);

}


/* =====================================================
   HERO VISUAL
===================================================== */

.hero-visual {

  height: 560px;

  position: relative;

}


.orbit {

  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%,-50%);

  border:
    1px solid
    rgba(55,145,230,.12);

  border-radius: 50%;

}


.orbit-one {

  width: 330px;
  height: 330px;

}


.orbit-two {

  width: 460px;
  height: 460px;

  border-color:
    rgba(55,145,230,.07);

}


.orbit-three {

  width: 590px;
  height: 590px;

  border-color:
    rgba(55,145,230,.04);

}


.security-core {

  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%,-50%);

  width: 170px;
  height: 170px;

  border-radius: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background:
    radial-gradient(
      circle,
      rgba(15,85,155,.25),
      rgba(3,7,12,.9) 65%
    );

  border:
    1px solid
    rgba(75,155,240,.2);

  box-shadow:
    0 0 80px
    rgba(0,110,255,.14);

}


.shield svg {

  width: 55px;
  height: 55px;

  fill: none;

  stroke: #73baff;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

}


.security-status {

  display: flex;

  align-items: center;

  gap: 5px;

  margin-top: 7px;

  color: #7d9ab5;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .1em;

}


.security-status span {

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #20c983;

  box-shadow:
    0 0 8px
    rgba(30,220,130,.7);

}


.node {

  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #51a9ff;

  box-shadow:
    0 0 18px
    rgba(40,150,255,.8);

}


.node-one {

  top: 22%;
  left: 31%;

}


.node-two {

  top: 29%;
  right: 19%;

}


.node-three {

  bottom: 24%;
  left: 23%;

}


.node-four {

  bottom: 16%;
  right: 31%;

}


.network-line {

  position: absolute;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(40,140,240,.22),
      transparent
    );

}


.network-one {

  width: 230px;

  top: 27%;
  left: 32%;

  transform:
    rotate(28deg);

}


.network-two {

  width: 220px;

  top: 31%;
  left: 35%;

  transform:
    rotate(145deg);

}


.network-three {

  width: 250px;

  bottom: 25%;
  left: 23%;

  transform:
    rotate(-25deg);

}


.floating-card {

  position: absolute;

  padding: 15px 17px;

  border:
    1px solid
    rgba(80,140,200,.18);

  border-radius: 8px;

  background:
    rgba(4,9,15,.85);

  backdrop-filter:
    blur(15px);

}


.floating-top {

  top: 13%;
  right: 5%;

}


.floating-bottom {

  bottom: 14%;
  left: 4%;

  display: flex;

  align-items: center;

  gap: 10px;

}


.floating-card small {

  display: block;

  color: #6696c2;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: .14em;

}


.floating-card strong {

  display: block;

  margin-top: 4px;

  color: #d0deeb;

  font-size: 11px;

}


.floating-card em {

  display: block;

  margin-top: 5px;

  color: #5e6d7d;

  font-size: 6px;

  font-style: normal;

  letter-spacing: .1em;

}


.check-icon {

  width: 27px;
  height: 27px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(20,140,255,.08);

  border:
    1px solid
    rgba(50,150,255,.18);

  color: #64b2ff;

  font-size: 12px;

}


/* =====================================================
   INTRO
===================================================== */

.intro {

  width:
    min(
      var(--max-width),
      calc(100% - 48px)
    );

  margin:
    100px auto 0;

  padding:
    80px 0;

  border-top:
    1px solid
    var(--border);

  border-bottom:
    1px solid
    var(--border);

}


.section-label {

  display: flex;

  align-items: center;

  gap: 9px;

  color: #7890a8;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .16em;

}


.section-label span {

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--blue);

}


.intro-grid {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 90px;

  margin-top: 55px;

}


.intro-grid h2 {

  font-size:
    clamp(43px,5vw,68px);

  line-height: 1;

  letter-spacing: -.06em;

}


.intro-grid h2 span {

  display: block;

  color: #70a9dc;

}


.intro-copy p {

  margin-bottom: 20px;

  color: #a0acb9;

  font-size: 15px;

  line-height: 1.85;

}


/* =====================================================
   MISSION
===================================================== */

.mission-grid {

  width:
    min(
      var(--max-width),
      calc(100% - 48px)
    );

  margin:
    90px auto 0;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 14px;

}


.mission-card {

  min-height: 280px;

  padding: 38px;

  border:
    1px solid
    var(--border);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(20,75,130,.11),
      rgba(255,255,255,.015)
    );

  transition: .3s ease;

}


.mission-card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(70,150,235,.3);

}


.mission-card > span {

  color: #70a9dc;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .15em;

}


.mission-card h3 {

  margin-top: 22px;

  max-width: 500px;

  font-size: 28px;

  line-height: 1.2;

  letter-spacing: -.04em;

}


.mission-card p {

  margin-top: 20px;

  max-width: 520px;

  color: #9ba8b6;

  font-size: 14px;

  line-height: 1.8;

}


/* =====================================================
   CAPABILITIES
===================================================== */

.capabilities {

  width:
    min(
      var(--max-width),
      calc(100% - 48px)
    );

  margin:
    160px auto 0;

}


.section-heading {

  display: grid;

  grid-template-columns:
    1fr .65fr;

  gap: 70px;

  align-items: end;

  margin-bottom: 55px;

}


.section-heading h2 {

  margin-top: 18px;

  max-width: 700px;

  font-size:
    clamp(43px,5vw,67px);

  line-height: 1;

  letter-spacing: -.06em;

}


.section-heading h2 span {

  display: block;

  color: #6fa9dc;

}


.section-heading > p {

  color: #a0acb9;

  font-size: 14px;

  line-height: 1.8;

}


/* =====================================================
   CAPABILITY GRID
===================================================== */

.capability-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 14px;

}


.capability-card {

  position: relative;

  min-height: 340px;

  padding: 28px;

  overflow: hidden;

  cursor: pointer;

  border:
    1px solid
    var(--border);

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.008)
    );

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

}


.capability-card:hover,
.capability-card:focus-within {

  transform:
    translateY(-7px);

  border-color:
    rgba(70,150,235,.4);

  box-shadow:
    0 22px 55px
    rgba(0,70,150,.14);

}


.card-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 48px;

}


.card-top > span {

  color: #7189a1;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .13em;

}


.card-icon {

  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(60,145,235,.2);

  border-radius: 7px;

  color: #67b0f3;

  font-size: 14px;

  background:
    rgba(20,110,200,.035);

}


.capability-card h3 {

  color: #e3ebf2;

  font-size: 20px;

  line-height: 1.3;

  letter-spacing: -.025em;

}


.card-summary {

  margin-top: 16px;

  color: #9aa8b7;

  font-size: 14px;

  line-height: 1.75;

  transition:
    opacity .3s ease;

}


/* =====================================================
   HOVER / FOCUS CAPABILITY PANEL
===================================================== */

.hover-content {

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  padding:
    21px 28px 26px;

  background:
    linear-gradient(
      to bottom,
      rgba(7,11,17,.94),
      rgba(7,11,17,.99)
    );

  border-top:
    1px solid
    rgba(55,145,235,.25);

  transform:
    translateY(100%);

  opacity: 0;

  transition:
    transform .35s ease,
    opacity .35s ease;

  z-index: 5;

}


.hover-content small {

  display: block;

  margin-bottom: 12px;

  color: #67a9e5;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .15em;

}


.tags {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

}


.tags span {

  padding:
    7px 9px;

  border:
    1px solid
    rgba(75,145,215,.20);

  border-radius: 5px;

  background:
    rgba(25,100,180,.07);

  color: #a8bdd1;

  font-size: 10px;

  line-height: 1.25;

}


/*
   Mouse hover
*/

.capability-card:hover
.hover-content {


  transform:
    translateY(0);

  opacity: 1;

}


/*
   Keyboard focus
*/

.capability-card:focus-within
.hover-content {

  transform:
    translateY(0);

  opacity: 1;

}


.capability-card:hover
.card-summary,
.capability-card:focus-within
.card-summary {

  opacity: .08;

}


.capability-card:hover
h3,
.capability-card:focus-within
h3 {

  color: #f0f6fc;

}


/* =====================================================
   APPROACH
===================================================== */

.approach {

  width:
    min(
      var(--max-width),
      calc(100% - 48px)
    );

  margin:
    170px auto 0;

  display: grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap: 70px;

  align-items: center;

}


.approach-copy h2 {

  margin-top: 20px;

  font-size:
    clamp(43px,5vw,67px);

  line-height: .98;

  letter-spacing: -.06em;

}


.approach-copy h2 span {

  display: block;

  color: #6fa9dc;

}


.approach-copy p {

  max-width: 490px;

  margin-top: 25px;

  color: #9daab8;

  font-size: 15px;

  line-height: 1.85;

}


.text-link {

  display: inline-flex;

  gap: 10px;

  margin-top: 28px;

  color: #78b9f0;

  font-size: 11px;

  font-weight: 600;

}


/* =====================================================
   APPROACH VISUAL
===================================================== */

.approach-visual {

  height: 520px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}


.approach-ring {

  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%,-50%);

  border:
    1px solid
    rgba(60,145,235,.12);

  border-radius: 50%;

}


.ring-a {

  width: 180px;
  height: 180px;

}


.ring-b {

  width: 310px;
  height: 310px;

}


.ring-c {

  width: 440px;
  height: 440px;

}


.approach-center {

  width: 110px;
  height: 110px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  border:
    1px solid
    rgba(65,155,245,.28);

  background:
    radial-gradient(
      circle,
      rgba(25,100,170,.2),
      rgba(3,8,14,.9)
    );

  position: relative;

  z-index: 2;

}


.approach-center strong {

  color: #65aff1;

  font-size: 20px;

}


.approach-center span {

  margin-top: 5px;

  color: #7895ae;

  font-size: 7px;

  letter-spacing: .15em;

  font-weight: 700;

}


.approach-label {

  position: absolute;

  padding:
    8px 11px;

  border:
    1px solid
    rgba(60,140,220,.18);

  border-radius: 5px;

  background:
    rgba(4,9,15,.9);

  color: #7891a9;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: .1em;

}


/* =====================================================
   SISTER COMPANIES
===================================================== */

.group-section {

  width:
    min(
      var(--max-width),
      calc(100% - 48px)
    );

  margin:
    150px auto 0;

  padding: 55px;

  border:
    1px solid
    var(--border);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(15,40,70,.18),
      rgba(255,255,255,.012)
    );

}


.group-heading {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

}


.group-heading h2 {

  margin-top: 18px;

  font-size:
    clamp(40px,4vw,58px);

  line-height: 1;

  letter-spacing: -.06em;

}


.group-heading h2 span {

  display: block;

  color: #6da9dc;

}


.group-heading > p {

  color: #718396;

  font-size: 11px;

}


.sister-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 14px;

  margin-top: 45px;

}


.sister-card {

  height: 190px;

  position: relative;

  padding: 14px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 11px;

  background:
    rgba(0,0,0,.18);

  transition: .3s ease;

}


.sister-card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(50,145,240,.32);

}


.logo-placeholder {

  width: 100%;
  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border:
    1px dashed
    rgba(90,135,180,.2);

  border-radius: 7px;

  color: #607386;

  font-size: 9px;

  letter-spacing: .15em;

}


.logo-placeholder strong {

  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(70,145,230,.22);

  border-radius: 50%;

  color: #67a7e3;

  font-size: 18px;

}


.sister-card > small {

  position: absolute;

  top: 22px;
  right: 24px;

  color: #4f6276;

  font-size: 8px;

}


/* =====================================================
   CONTACT
===================================================== */

.contact-section {

  width:
    min(
      var(--max-width),
      calc(100% - 48px)
    );

  margin:
    120px auto 0;

  padding: 65px;

  border:
    1px solid
    rgba(60,145,235,.18);

  border-radius: 19px;

  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(0,100,255,.08),
      transparent 32%
    ),

    linear-gradient(
      145deg,
      rgba(15,40,70,.18),
      rgba(255,255,255,.01)
    );

}


.contact-heading h2 {

  margin-top: 18px;

  max-width: 750px;

  font-size:
    clamp(43px,5vw,68px);

  line-height: 1;

  letter-spacing: -.06em;

}


.contact-heading h2 span {

  display: block;

  color: #6caeff;

}


.contact-heading p {

  max-width: 580px;

  margin-top: 23px;

  color: #9daab8;

  font-size: 15px;

  line-height: 1.8;

}


.contact-form {

  margin-top: 48px;

}


.form-grid {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 18px;

}


.form-field.full {

  grid-column:
    1 / -1;

}


.form-field label {

  display: block;

  margin-bottom: 9px;

  color: #8ca4bb;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .14em;

  text-transform: uppercase;

}


.form-field input,
.form-field textarea {

  width: 100%;

  outline: none;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 7px;

  background:
    rgba(0,0,0,.22);

  color: white;

  transition: .25s ease;

}


.form-field input {

  height: 50px;

  padding: 0 14px;

  font-size: 14px;

}


.form-field textarea {

  min-height: 140px;

  padding: 14px;

  resize: vertical;

  font-size: 14px;

}


.form-field input::placeholder,
.form-field textarea::placeholder {

  color: #667585;

}


.form-field input:focus,
.form-field textarea:focus {

  border-color:
    rgba(55,145,240,.6);

  box-shadow:
    0 0 0 3px
    rgba(30,120,255,.08);

}


.form-bottom {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  margin-top: 22px;

}


.form-bottom > span {

  color: #718294;

  font-size: 10px;

}


/* =====================================================
   CONTACT DETAILS
===================================================== */

.contact-details {

  width:
    min(
      var(--max-width),
      calc(100% - 48px)
    );

  margin:
    15px auto 0;

  display: grid;

  grid-template-columns:
    1fr 1fr 1.6fr;

  gap: 1px;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 13px;

  background:
    var(--border);

}


.contact-detail {

  min-height: 135px;

  padding: 27px;

  background:
    rgba(7,11,17,.9);

}


.contact-detail small {

  display: block;

  color: #68a9e5;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .15em;

}


.contact-detail a,
.contact-detail p {

  display: block;

  margin-top: 12px;

  color: #aebac6;

  font-size: 13px;

  line-height: 1.75;

}


.contact-detail a:hover {

  color: white;

}


/* =====================================================
   FOOTER
===================================================== */

footer {

  width:
    min(
      var(--max-width),
      calc(100% - 48px)
    );

  margin:
    90px auto 0;

  padding-bottom: 25px;

}


.footer-main {

  display: grid;

  grid-template-columns:
    1.5fr 1fr 1fr;

  gap: 70px;

  padding:
    50px 0;

  border-top:
    1px solid
    var(--border);

}


.footer-brand > p {

  margin-top: 18px;

  color: #687a8d;

  font-size: 9px;

  letter-spacing: .12em;

}


.footer-column {

  display: flex;

  flex-direction: column;

  gap: 11px;

}


.footer-column strong {

  margin-bottom: 6px;

  color: #71879e;

  font-size: 8px;

  letter-spacing: .15em;

}


.footer-column a,
.footer-column p {

  color: #8d9baa;

  font-size: 11px;

}


.footer-column a:hover {

  color: white;

}


.footer-bottom {

  display: flex;

  justify-content: space-between;

  padding-top: 20px;

  border-top:
    1px solid
    var(--border);

  color: #596979;

  font-size: 8px;

  letter-spacing: .08em;

}


/* =====================================================
   SCROLL ANIMATION
===================================================== */

.reveal {

  opacity: 0;

  transform:
    translateY(20px);

  transition:
    opacity .6s ease,
    transform .6s ease;

}


.reveal.visible {

  opacity: 1;

  transform:
    translateY(0);

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

  .desktop-nav,
  .nav-button {

    display: none;

  }


  .mobile-menu-button {

    display: flex;

  }


  .hero {

    grid-template-columns: 1fr;

    padding-top: 70px;

  }


  .hero-visual {

    margin-top: -20px;

  }


  .intro-grid {

    grid-template-columns: 1fr;

    gap: 35px;

  }


  .section-heading {

    grid-template-columns: 1fr;

    gap: 25px;

  }


  .capability-grid {

    grid-template-columns:
      repeat(2,1fr);

  }


  .approach {

    grid-template-columns: 1fr;

  }


  .group-heading {

    flex-direction: column;

    align-items: flex-start;

    gap: 20px;

  }


  .contact-details {

    grid-template-columns: 1fr;

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  .navbar,
  .hero,
  .intro,
  .mission-grid,
  .capabilities,
  .approach,
  .group-section,
  .contact-section,
  .contact-details,
  footer {

    width:
      calc(100% - 30px);

  }


  .navbar {

    height: 70px;

  }


  .mobile-menu {

    top: 70px;

  }


  .brand-logo {

    width: 30px;
    height: 30px;

  }


  .brand-logo img {

    width: 42px;
    height: 42px;

  }


  .brand-text strong {

    font-size: 15px;

  }


  .brand-text span {

    font-size: 6px;

  }


  .hero {

    padding-top: 60px;

  }


  .hero h1 {

    font-size: 47px;

  }


  .hero-text {

    font-size: 15px;

  }


  .hero-buttons {

    flex-direction: column;

  }


  .hero-buttons .button {

    width: 100%;

  }


  .hero-visual {

    height: 390px;

  }


  .orbit-one {

    width: 230px;
    height: 230px;

  }


  .orbit-two {

    width: 320px;
    height: 320px;

  }


  .orbit-three {

    width: 410px;
    height: 410px;

  }


  .security-core {

    width: 135px;
    height: 135px;

  }


  .intro {

    margin-top: 60px;

  }


  .intro-copy p {

    font-size: 15px;

  }


  .mission-grid {

    grid-template-columns: 1fr;

  }


  .mission-card p {

    font-size: 14px;

  }


  .capability-grid {

    grid-template-columns: 1fr;

  }


  /*
     Mobile has no mouse hover.
     Tap/click opens the details.
  */

  .capability-card.mobile-open
  .hover-content {

    transform:
      translateY(0);

    opacity: 1;

  }


  .capability-card.mobile-open
  .card-summary {

    opacity: .08;

  }


  .capability-card h3 {

    font-size: 20px;

  }


  .card-summary {

    font-size: 14px;

  }


  .tags span {

    font-size: 10px;

  }


  .approach-visual {

    height: 390px;

  }


  .ring-c {

    width: 340px;
    height: 340px;

  }


  .group-section,
  .contact-section {

    padding:
      35px 22px;

  }


  .sister-grid {

    grid-template-columns: 1fr;

  }


  .form-grid {

    grid-template-columns: 1fr;

  }


  .form-field.full {

    grid-column: auto;

  }


  .form-bottom {

    flex-direction: column;

    align-items: stretch;

  }


  .form-bottom .button {

    width: 100%;

  }


  .footer-main {

    grid-template-columns: 1fr;

    gap: 35px;

  }


  .footer-bottom {

    flex-direction: column;

    gap: 10px;

  }

}

/* =====================================================
   OLD + NEW LOGO ROTATION
===================================================== */

.brand-logo-switch {

  position: relative;

  overflow: hidden;

}


/* Both logos occupy exactly the same position */

.brand-logo-switch img {

  position: absolute;

  width: 40px;
  height: 40px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  object-fit: contain;

}


/* OLD LOGO */

.brand-logo-switch .logo-old {

  opacity: 1;

  animation:
    old-logo-cycle 10s infinite ease-in-out;

  filter:
    drop-shadow(
      0 0 2px
      rgba(255,255,255,0.20)
    );

}


/* NEW LOGO */

.brand-logo-switch .logo-new {

  opacity: 0;

  animation:
    new-logo-cycle 10s infinite ease-in-out;

}


/* =====================================================
   OLD LOGO
   Visible from 0–5 seconds
===================================================== */

@keyframes old-logo-cycle {

  0% {
    opacity: 1;
  }

  45% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  95% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

}


/* =====================================================
   NEW LOGO
   Visible from 5–10 seconds
===================================================== */

@keyframes new-logo-cycle {

  0% {
    opacity: 0;
  }

  45% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

}


/* =====================================================
   REDUCED MOTION ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .brand-logo-switch .logo-old,
  .brand-logo-switch .logo-new {

    animation: none;

  }

  .brand-logo-switch .logo-old {

    opacity: 1;

  }

  .brand-logo-switch .logo-new {

    opacity: 0;

  }

}

/* =====================================================
   CAPABILITY CARD - FULL HOVER PANEL
   Put this at the VERY BOTTOM of style.css
===================================================== */

.capability-card {
  position: relative;
  overflow: hidden;
}


/* Make the capability hover panel cover
   the ENTIRE card */

.capability-card .hover-content {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  padding: 30px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background:
    linear-gradient(
      145deg,
      rgba(5, 14, 25, 0.98),
      rgba(4, 10, 18, 0.99)
    );

  border: none;

  transform: translateY(100%);

  opacity: 0;

  transition:
    transform .35s ease,
    opacity .25s ease;

  z-index: 20;

  overflow-y: auto;
}


/* Mouse hover */

.capability-card:hover .hover-content {
  transform: translateY(0);
  opacity: 1;
}


/* Keyboard accessibility */

.capability-card:focus-within .hover-content {
  transform: translateY(0);
  opacity: 1;
}


/* Hide the original capability content */

.capability-card:hover .card-top,
.capability-card:hover h3,
.capability-card:hover .card-summary,

.capability-card:focus-within .card-top,
.capability-card:focus-within h3,
.capability-card:focus-within .card-summary {
  opacity: 0;
}


/* Hover panel heading */

.capability-card .hover-content small {
  display: block;

  margin-bottom: 16px;

  color: #67a9e5;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .15em;
}


/* Service tags */

.capability-card .tags {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


.capability-card .tags span {
  padding: 8px 10px;

  border:
    1px solid
    rgba(75,145,215,.22);

  border-radius: 5px;

  background:
    rgba(25,100,180,.08);

  color: #b4c7d9;

  font-size: 11px;

  line-height: 1.3;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  .capability-card.mobile-open .hover-content {
    transform: translateY(0);
    opacity: 1;
  }

  .capability-card.mobile-open .card-top,
  .capability-card.mobile-open h3,
  .capability-card.mobile-open .card-summary {
    opacity: 0;
  }

}