/* ============================================================
   CALIISM MASTER STYLESHEET — REFACTORED
   Consolidated homepage + interior/service page CSS.
   Removed superseded contact/modal systems, repeated contact
   blocks, duplicate legacy footer, and invalid HTML residue.
   Current contact + modal systems retained as authoritative.
   Refactored 2026-09-26 from style(2).css.
   ============================================================ */


:root{
  --caliism--original-green: #8EC843;
  --caliism-heading: #355C7D;
  --caliism-blue-1: #26ADE1;
  --caliism-blue-2: #0F75BA;
  --dark-1: #06131d;
  --dark-2: #0b1d2f;
  --dark-3: #10263a;
  --white: #ffffff;
  --text: #1b2733;
  --text-soft: #586775;
  --text-bright: #C7D4DF;
  --border: rgba(15, 117, 186, 0.14);
  --shadow: 0 18px 45px rgba(8, 26, 45, 0.12);
  --radius-lg: 22px;
  --radius-xl: 30px;
  --max-width: 1320px;
  --transition: 0.28s ease;
}

*{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--text);
  line-height: 1.6;

  background:
    radial-gradient(
      circle at 15% 12%,
      rgba(38,173,225,0.08),
      transparent 34%
    ),

    radial-gradient(
      circle at 85% 22%,
      rgba(142,200,67,0.06),
      transparent 40%
    ),

    radial-gradient(
      circle at 50% 75%,
      rgba(38,173,225,0.04),
      transparent 50%
    ),

    linear-gradient(
      180deg,
      #04080c 0%,
      #06131d 30%,
      #081825 50%,
      #06131d 70%,
      #04080c 100%
    );

  background-attachment: fixed;
}


body.nav-open{
  overflow: hidden;
}

img{
  max-width: 100%;
  display: block;
}

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

.container{
  width: min(var(--max-width), calc(100% - 32px));
  margin: 0 auto;
}

.section-pad{
  padding: 0 0;
}


.nav-item{
  position: relative;
}

.nav-link,
.main-nav > a{
  color: rgba(255,255,255,0.82);
  font: inherit;
  font-weight: 700;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.nav-dropdown-toggle::after{
  content: "▾";
  margin-left: 7px;
  font-size: 0.72em;
  opacity: 0.75;
}

.nav-dropdown{
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);

  min-width: 260px;
  padding: 10px;

  /* Flat top, lightly rounded bottom */
  border-radius: 0 0 13px 13px;

  background:
    linear-gradient(
      135deg,
      rgba(8,24,37,0.96),
      rgba(5,17,26,0.92)
    );

  border: 1px solid rgba(255,255,255,0.12);
  border-top-color: rgba(110,214,255,0.16);

  box-shadow:
    0 22px 50px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.06);

  backdrop-filter: blur(14px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;

  z-index: 99999;
}

.has-dropdown::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}


.nav-dropdown a{
  display: block;
  padding: 11px 13px;

  border-radius: 14px;

  color: rgba(255,255,255,0.78);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-dropdown a:hover{
  color: #c8f08a;
  background: rgba(255,255,255,0.07);
}

.has-dropdown:hover .nav-dropdown,
.has-dropdown.open .nav-dropdown{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.has-dropdown:hover .nav-dropdown-toggle,
.has-dropdown.open .nav-dropdown-toggle{
  color: #c8f08a;
}


.rs-partner-card-logo img,
.rs-featured-partner-logo img{
  width:auto;
  height:auto;
  max-width:180px;
  max-height:90px;
  object-fit:contain;

  filter:
    brightness(0)
    invert(1);

  opacity:.90;

  transition:
    filter .25s ease,
    opacity .25s ease,
    transform .25s ease;
}

.rs-partner-card:hover .rs-partner-card-logo img,
.rs-featured-partner:hover .rs-featured-partner-logo img{
  opacity:1;
  transform:scale(1.04);
}


@media (max-width: 980px){
  .nav-item{
    width: 100%;
  }

  .nav-link,
  .main-nav > a{
    width: 100%;
    text-align: left;
  }

  .nav-dropdown{
    position: static;
    transform: none;

    min-width: 0;
    width: 100%;

    margin-top: 8px;
    padding: 8px;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    display: none;

    box-shadow: none;
  }

  .has-dropdown.open .nav-dropdown{
    display: block;
    transform: none;
  }

  .has-dropdown:hover .nav-dropdown{
    transform: none;
  }
}


.eyebrow{
  display: inline-block;
  margin-bottom: 10px;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--caliism-blue-2);
}

.section-title{
  margin: 22px 0 16px;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.05em;
  font-family: "Rajdhani", sans-serif;

  color: #D9ECF7;

  text-shadow:
      0 2px 10px rgba(0,0,0,.08);
}

.section-intro{
  margin: 0;
  max-width: 820px;
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text-bright);
}


/* ============================================================
   CALIISM GLASS BUTTON SYSTEM
   ============================================================ */

.btn,
button.btn{
  position: relative;

  display: inline-flex;
  align-items: stretch;
  justify-content: center;

  min-height: 52px;

  padding: 0;

  overflow: hidden;

  border:
    1px solid rgba(110, 214, 255, .52);

  border-radius: 7px;

  font-family: inherit;

  font-size: .82rem;
  font-weight: 800;

  letter-spacing: .09em;
  text-transform: uppercase;

  color: #EAF7FD;

  cursor: pointer;

  isolation: isolate;

  /*
   * Translucent glass interior.
   */

  background:
    linear-gradient(
      135deg,
      rgba(110, 214, 255, .12) 0%,
      rgba(20, 70, 100, .14) 48%,
      rgba(4, 20, 31, .32) 100%
    );

  backdrop-filter:
    blur(12px)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(12px)
    saturate(125%);

  /*
   * Crisp illuminated edge + restrained outer bloom.
   */

  box-shadow:
    0 0 0 1px rgba(110, 214, 255, .08),
    0 0 14px rgba(38, 173, 225, .14),
    0 0 30px rgba(38, 173, 225, .06),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .18);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease;
}


/* ============================================================
   GLASS SURFACE HIGHLIGHT
   ============================================================ */

.btn::before{
  content: "";

  position: absolute;

  left: 10px;
  right: 10px;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .72) 25%,
      rgba(110, 214, 255, .90) 50%,
      rgba(255, 255, 255, .72) 75%,
      transparent
    );

  opacity: .70;

  pointer-events: none;

  transition:
    left .22s ease,
    right .22s ease,
    opacity .22s ease;
}


/* ============================================================
   CALIISM GREEN EDGE ACCENT
   ============================================================ */

.btn::after{
  content: "";

  position: absolute;

  left: 18px;
  right: 18px;
  bottom: -1px;

  height: 2px;

  border-radius: 2px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(142, 200, 67, .25) 18%,
      #8EC843 50%,
      rgba(142, 200, 67, .25) 82%,
      transparent 100%
    );

  box-shadow:
    0 0 7px rgba(142, 200, 67, .28);

  opacity: .72;

  pointer-events: none;

  transition:
    left .22s ease,
    right .22s ease,
    opacity .22s ease,
    box-shadow .22s ease;

  z-index: 3;
}


/* ============================================================
   BUTTON ICON
   ============================================================ */

.btn-icon{
  position: relative;

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

  width: 48px;
  min-width: 48px;

  color: #8EC843;

  font-size: .92rem;

  background:
    linear-gradient(
      135deg,
      rgba(142, 200, 67, .075),
      rgba(110, 214, 255, .025)
    );

  border-right:
    1px solid rgba(110, 214, 255, .18);

  text-shadow:
    0 0 10px rgba(142, 200, 67, .30);

  transition:
    color .22s ease,
    background .22s ease,
    text-shadow .22s ease;
}


/* ============================================================
   BUTTON LABEL
   ============================================================ */

.btn-label{
  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    0
    22px;

  white-space: nowrap;
}


/* ============================================================
   PRIMARY GLASS BUTTON
   Request a Quote
   ============================================================ */

.btn-primary{
  color: #F2FAFE;

  border-color:
    rgba(110, 214, 255, .68);

  background:
    linear-gradient(
      135deg,
      rgba(110, 214, 255, .20) 0%,
      rgba(38, 173, 225, .13) 45%,
      rgba(5, 28, 42, .32) 100%
    );

  box-shadow:
    0 0 0 1px rgba(110, 214, 255, .08),
    0 0 16px rgba(38, 173, 225, .20),
    0 0 34px rgba(38, 173, 225, .08),
    0 12px 30px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(0, 0, 0, .20);
}


/* ============================================================
   OUTLINE GLASS BUTTON
   Explore Services
   ============================================================ */

.btn-outline{
  color: rgba(239, 249, 254, .92);

  border-color:
    rgba(110, 214, 255, .34);

  background:
    linear-gradient(
      135deg,
      rgba(110, 214, 255, .085),
      rgba(255, 255, 255, .025) 48%,
      rgba(3, 16, 25, .25)
    );

  box-shadow:
    0 0 0 1px rgba(110, 214, 255, .04),
    0 0 12px rgba(38, 173, 225, .09),
    0 10px 28px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}


/* ============================================================
   HOVER
   ============================================================ */

.btn:hover{
  color: #FFFFFF;

  border-color:
    rgba(110, 214, 255, .92);

  background:
    linear-gradient(
      135deg,
      rgba(110, 214, 255, .22),
      rgba(38, 173, 225, .13) 48%,
      rgba(5, 29, 44, .34)
    );

  transform:
    translateY(-2px);

  box-shadow:
    0 0 0 1px rgba(110, 214, 255, .13),
    0 0 12px rgba(110, 214, 255, .34),
    0 0 28px rgba(38, 173, 225, .20),
    0 0 48px rgba(38, 173, 225, .08),
    0 15px 32px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

.btn:hover::before{
  left: 5px;
  right: 5px;

  opacity: 1;
}

.btn:hover::after{
  left: 8px;
  right: 8px;

  opacity: 1;

  box-shadow:
    0 0 8px rgba(142, 200, 67, .60),
    0 0 16px rgba(142, 200, 67, .22);
}


/* ------------------------------------------------------------
   ICON RESPONSE
   ------------------------------------------------------------ */

.btn:hover .btn-icon{
  color: #B7EB72;

  background:
    linear-gradient(
      135deg,
      rgba(142, 200, 67, .13),
      rgba(110, 214, 255, .045)
    );

  text-shadow:
    0 0 12px rgba(142, 200, 67, .50);
}


/* ============================================================
   EXPLORE SERVICES CHEVRON
   ============================================================ */

.btn-chevron{
  display: flex;
  align-self: center;

  margin:
    0
    18px
    0
    -7px;

  font-size: .64rem;

  color:
    rgba(110, 214, 255, .72);

  transition:
    transform .22s ease,
    color .22s ease;
}

.services-menu-toggle:hover .btn-chevron{
  color: #8EC843;
}

.services-menu-toggle[aria-expanded="true"] .btn-chevron{
  transform:
    rotate(180deg);

  color: #8EC843;
}


/* ============================================================
   ACTIVE
   ============================================================ */

.btn:active{
  transform:
    translateY(0);

  box-shadow:
    0 0 0 1px rgba(110, 214, 255, .10),
    0 0 16px rgba(38, 173, 225, .18),
    inset 0 2px 5px rgba(0, 0, 0, .20);
}


/* ============================================================
   KEYBOARD FOCUS
   ============================================================ */

.btn:focus-visible{
  outline: none;

  border-color: #6ED6FF;

  box-shadow:
    0 0 0 1px rgba(110, 214, 255, .30),
    0 0 0 4px rgba(110, 214, 255, .10),
    0 0 24px rgba(38, 173, 225, .25);
}


.hero-services-menu{
  position: relative;
  display: inline-block;
}

.services-menu-toggle{
  position: relative;
}

.services-menu-toggle::after{
  content: "▾";
  margin-left: 10px;
  font-size: 0.9em;
  line-height: 1;
}

.services-dropdown{
  position: absolute;
  top: 0%;
  left: calc(82% + 18px);
  min-width: 320px;
  padding: 0px 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(7, 18, 31, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(-6px);
  transition: opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
  z-index: 100;
}

.services-dropdown a{
  display: block;
  padding: 12px 18px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  transition: background 0.22s ease, color 0.22s ease;
}

.services-dropdown a:hover{
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  color: #c8f08a;
}

.hero-services-menu:hover .services-dropdown, .hero-services-menu:focus-within .services-dropdown, .hero-services-menu.open .services-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 1000;
}

.hero{
  position: relative;
  overflow: visible;
  padding-top: 92px;
  color: #fff;

  background:
    linear-gradient(
      135deg,
      rgba(4,8,12,0.72) 0%,
      rgba(6,19,29,0.68) 45%,
      rgba(4,8,12,0.82) 100%
    ),
    var(--service-image) center center / cover no-repeat;
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(38,173,225,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,173,225,0.045) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
  pointer-events: none;
  z-index: 0;
}

.hero::after{
  display: none;
}

.hero .hero-fade{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to top,
    #04080c 0%,
    rgba(4,8,12,0.72) 42%,
    rgba(4,8,12,0) 100%
  );
}

.section-fade-in{
  position: relative;
}

.section-fade-in::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 160px;
  pointer-events: none;
  z-index: 0;

  background: linear-gradient(
    180deg,
    #04080c 0%,
    rgba(4,8,12,0.72) 35%,
    rgba(4,8,12,0) 100%
  );
}

.section-fade-in > .container{
  position: relative;
  z-index: 1;
}


.hero > .hero-content{
  position: relative;
  z-index: 2;
}


.hero-nav-shell{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

  background: transparent !important;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: blur(0);

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease,
    transform 0.25s ease;
}

.hero-nav-shell.scrolled{
  background: rgba(4, 8, 12, 0.72) !important;
  border-bottom-color: rgba(255,255,255,0.06);
  box-shadow: 0 14px 34px rgba(0,0,0,0.20);
  backdrop-filter: blur(14px);
}

.hero-nav-shell.nav-hidden{
  transform: translateY(-100%);
}

.hero-nav-row{
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
}

.hero-logo img{
  width: auto;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.24));
  margin-top: 15px;
}

.nav-toggle{
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 1002;
}

.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content: "";
  position: absolute;
  left: 10px;
  width: 28px;
  height: 2px;
  border-radius: 10px;
  background: #ffffff;
  transition: transform var(--transition), opacity var(--transition), top var(--transition);
}

.nav-toggle span{
  top: 23px;
}

.nav-toggle::before{
  top: 15px;
}

.nav-toggle::after{
  top: 31px;
}

.nav-toggle.active span{
  opacity: 0;
}

.nav-toggle.active::before{
  top: 23px;
  transform: rotate(45deg);
}

.nav-toggle.active::after{
  top: 23px;
  transform: rotate(-45deg);
}

.main-nav{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.main-nav a{
  padding: 10px 12px;
  font-size: 0.94rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  transition: color var(--transition), background var(--transition);
  border-radius: 999px;
}

.main-nav a:hover{
  color: #ffffff;
  background: rgba(255,255,255,0.08);
}

.header-cta{
  margin-left: 8px;
}

.hero-badge{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cbeafe;
}

.hero h1{
  font-family: "Rajdhani", sans-serif;
  margin: 22px 0 16px;
  font-size: clamp(2.0rem, 4.5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  font-weight: 700;
  white-space: nowrap;

    color:#F7FCFF;

    text-shadow:
        0 2px 0 rgba(255,255,255,.05),
        0 14px 28px rgba(0,0,0,.45);

  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: #D9ECF7;


}

.hero p{
  margin: 0;
  max-width: 760px;
  font-size: 1.08rem;
  line-height: 1.82;
  color: rgba(255,255,255,0.88);
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}

.back-to-top-link{
  display: inline-flex;
  margin-top: 18px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #cbeafe;
  align-items: center;
  gap: 8px;
}

.back-to-top-link:hover{
  color: #fff;
}

.hero-rotator{
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 360px;
  padding: 38px 36px 28px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(4, 14, 24, 0.22),
    0 1px 0 rgba(255,255,255,0.05) inset;
  backdrop-filter: blur(12px);
}

.hero-rotator::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(5,14,22,0.45), rgba(5,14,22,0.45)),


    radial-gradient(circle at top right, rgba(38,173,225,0.12), transparent 70%),
    radial-gradient(circle at bottom left, rgba(142,200,67,0.08), transparent 28%);
  pointer-events: none;
}

.hero-rotator::after{
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}

.hero-rotator > *{
  position: relative;
  z-index: 1;
}

.hero-rotator-label{
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ed9f3;
}

.hero-rotator-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.hero-rotator .slider-arrow{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: #fff;
  box-shadow: none;
}

.hero-rotator .slider-arrow:hover{
  background: rgba(255,255,255,0.12);
}

.hero-rotator .slider-dot{
  width: 9px;
  height: 9px;
  background: rgba(255,255,255,0.20);
}

.hero-rotator .slider-dot.active{
  background: #8EC843;
  transform: scale(1.15);
}

.hero-metrics-slider{
  position: relative;
  margin-top: 34px;
}

.hero-metrics-stage{
  position: relative;
  min-height: 170px;
}

.hero-metrics-slide{
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.hero-metrics-slide.active{
  display: grid;
  opacity: 1;
  transform: translateY(0);
}

.hero-metrics-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
}

.metric-box{
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.metric-box:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.12);
}


.hero-slide-cta{
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  transition: background 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease;
}

.hero-slide-cta:hover{
  background: rgba(142,200,67,0.18);
  border-color: rgba(142,200,67,0.5);
  color: #c8f08a;
  transform: translateY(-1px);
}

.hero-slide-cta::after{
  content: "→";
  margin-left: 8px;
  font-size: 0.9em;
  transition: transform 0.2s ease;
}

.hero-slide-cta:hover::after{
  transform: translateX(3px);
}


.intro-section-head{
  margin-bottom: 28px;
}

.intro-kicker{
  position: relative;
  display: inline-block;
  padding-left: 16px;
  margin-bottom: 12px;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #26ADE1;
}

.intro-kicker::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 2px;
  background: #8EC843;
  transform: translateY(-50%);
}


.intro-cards{
  position: relative;
  margin-top: -52px;
  z-index: 5;
}

.intro-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.intro-line{
  width: 72px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--caliism-heading), var(--caliism-blue-1));
  margin-bottom: 20px;
}

.intro-card h3{
  margin: 0 0 12px;
  font-size: 1.28rem;
  line-height: 1.2;
  font-weight: 800;
}

.intro-card p{
  margin: 0 0 20px;
  color: var(--text-soft);
  line-height: 1.8;
}

.intro-card{
  padding: 30px 28px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.intro-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--caliism-heading),
    var(--caliism-blue-1),
    var(--caliism-blue-2)
  );
}

.services-wrap{
  margin-top: 40px;
  padding: 22px;
  border-radius: 34px;
  background: linear-gradient(135deg, #07121b 0%, #0d2233 100%);
  overflow: hidden;
}

.slider-shell{
  position: relative;
}

.slider-track{
  display: flex;
  transition: transform 0.55s ease;
  will-change: transform;
}

.slide{
  min-width: 100%;
  padding: 6px;
}

.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.service-card{
  min-height: 100%;
  padding: 28px;
  border-radius: 24px;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.05);
}

.service-card .service-label{
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #c4f088;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.service-card h3{
  margin: 0 0 14px;
  font-size: 1.34rem;
  line-height: 1.2;
  font-weight: 800;
}

.service-card p{
  margin: 0 0 24px;
  font-size: 0.98rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.76);
}

.slider-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
}

.slider-dots{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.slider-dot{
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}

.slider-dot.active{
  transform: scale(1.18);
  background: var(--caliism-heading);
}

.slider-arrows{
  display: flex;
  gap: 12px;
}

.slider-arrow{
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition);
}

.slider-arrow:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.14);
}

.products-section{
  border-top: 1px solid rgba(15,117,186,0.06);
  border-bottom: 1px solid rgba(15,117,186,0.06);
}

.products-layout{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 40px;
  align-items: start;
}

.products-copy .cta-group{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.products-note{
  margin-top: 18px;
  color: var(--text-bright);
  line-height: 1.8;
}

.products-slider-wrap{
  position: relative;
  overflow: hidden;
  padding: 12px;
  margin: 0;
  border-radius: 34px;
}

.products-slider-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 34px;
  background: radial-gradient(circle at 80% 20%, rgba(110,214,255,0.08), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(142,200,67,0.06), transparent 45%),
    linear-gradient(
      135deg,
      rgba(16, 32, 46, 0.94),
      rgba(20, 46, 64, 0.90)
    );
  border: 1px solid rgba(110,214,255,0.08);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255,255,255,0.04);
  z-index: 0;
}

.products-track{
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  transition: transform 0.55s ease;
  will-change: transform;
}

.product-slide{
  min-width: 100%;
  width: 100%;
  flex: 0 0 100%;
  padding: 18px;
}

.product-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.product-card{
  position: relative;
  min-height: 100%;
  padding: 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 22px 42px rgba(8,26,45,0.10);
  overflow: hidden;
}

.product-card::before{
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--caliism-heading), var(--caliism-blue-1), var(--caliism-blue-2));
}

.product-badge{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: #edf8ff;
  color: var(--caliism-blue-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product-card h3{
  margin: 16px 0 12px;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.16;
}

.product-card p{
  margin: 0 0 22px;
  color: var(--text-soft);
  line-height: 1.8;
}

.product-links{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.product-links a{
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--caliism-blue-2);
}

.product-links a:hover{
  text-decoration: underline;
}

.split-feature{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 42px;
}

.feature-panel{
  padding: 28px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}

.feature-panel h3{
  margin: 0 0 14px;
  font-size: 1.4rem;
  font-weight: 800;
}

.feature-panel p{
  margin: 0 0 20px;
  color: var(--text-soft);
  line-height: 1.8;
}

.testimonials-stage{
  position: relative;
  max-width: 1050px;
  margin: 0 auto;
  padding: 46px 56px;
  overflow: hidden;
  border-radius: 38px;
  background:
    radial-gradient(circle at top left, rgba(38,173,225,0.22), transparent 20%),
    radial-gradient(circle at 86% 80%, rgba(142,200,67,0.18), transparent 20%),
    linear-gradient(135deg, #06131d 0%, #0c2235 100%);
  color: #fff;
  min-height: 640px;
  box-shadow: 0 24px 60px rgba(6, 19, 29, 0.22);
}


.testimonials-stage-head{
  position: relative;
  z-index: 2;
  max-width: 950px;
  margin: 0 auto 34px;
  text-align: center;
}

.testimonials-stage-head .eyebrow{
  display: block;
  text-align: center;
  color: var(--caliism-blue-2);
}

.testimonials-stage-head .section-title{
  margin: 0 auto 14px;
  text-align: center;
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 1.02;
  color: #fff;
}

.testimonials-stage-head .section-intro{
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  color: rgba(255,255,255,0.74);
  font-size:1.2rem;
}


.testimonial-slide{
  display: none;
  position: relative;
  min-height: 360px;
  padding: 20px 0 8px;
  align-items: center;
  justify-content: center;
}

.testimonial-slide.active{
  display: flex;
}

.testimonial-quote-mark{
  position: absolute;
 left: -10px;
  top: -40px;

  font-family: Georgia, serif;
  font-size: 18rem;
  line-height: 1;

  color: rgba(255,255,255,0.07);
  opacity: 1;

  text-shadow:
    0 0 28px rgba(38,173,225,0.08),
    0 0 38px rgba(142,200,67,0.06);

  pointer-events: none;
  user-select: none;
}

.testimonial-content{
  min-height: 320px;
    display: flex;
    flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

.testimonial-text{
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.8;
  color: rgba(255,255,255,0.94);
}

.testimonial-line{
  width: 120px;
  height: 4px;
  margin: 28px 0 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--caliism-heading), var(--caliism-blue-1));
}

.testimonial-name{
  font-size: 1.08rem;
  font-weight: 800;
  color: #fff;
}

.testimonial-title{
  margin-top: 6px;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b8e2f7;
}


.testimonial-footer-wrap{
  display: flex;
  justify-content: center;
  margin-top: 26px;
}


.testimonials-stage-footer{
  display: inline-flex;

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

  gap: 18px;

  margin: 26px auto 0;
  padding: 7px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.07),
      rgba(255,255,255,0.025)
    );

  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 30px rgba(0,0,0,0.22);

  backdrop-filter: blur(10px);
}


.testimonial-controls{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 7px 12px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.07),
      rgba(255,255,255,0.025)
    );

  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 30px rgba(0,0,0,0.22);

  backdrop-filter: blur(10px);
}

.testimonial-controls .slider-dots{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
}
.testimonial-controls .slider-arrows{
  display: flex;
  align-items: center;
  gap: 8px;
}

.testimonial-controls .slider-arrow{
  width: 36px;
  height: 36px;

  border-radius: 50%;

  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;

  color: #fff;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.testimonial-controls .slider-arrow:hover{
  transform: translateY(-1px);

  background: rgba(142,200,67,0.22) !important;
  border-color: rgba(142,200,67,0.48) !important;
}

.testimonial-controls .slider-dot{
  width: 8px;
  height: 8px;

  background: rgba(255,255,255,0.34) !important;
}

.testimonial-controls .slider-dot.active{
  background: var(--caliism-heading) !important;
  transform: scale(1.25);
}

.testimonial-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.testimonial-cta .btn{
  margin: 0 !important;
  white-space: nowrap;
}

@media (max-width: 760px){
  .testimonials-stage-footer{
    flex-direction: column;
    align-items: stretch;
    border-radius: 28px;
  }

  .testimonial-controls,
  .testimonial-cta{
    justify-content: center;
  }
}


  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero-content{
  position: relative;
  z-index: 2;
  padding: 14px 0 0px;
}

.hero-top{
  display: grid;
  grid-template-columns: minmax(0, 980px) !important;
  gap: 0 !important;
  align-items: start;
}

.hero-copy{
  max-width: 980px;
}

.hero-copy p{
  max-width: 860px;
  font-size:1.2rem;
}

.hero-service-showcase::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(
      210deg,
      rgba(5,17,26,0.86) 0%,
      rgba(5,17,26,0.62) 24%,
      rgba(5,17,26,0.24) 44%,
      rgba(5,17,26,0.04) 62%,
      rgba(5,17,26,0) 100%
    ) !important;
}

.hero-service-showcase.bg-migration{
  --showcase-image: url("migration.jpg?v=201");
}

.hero-service-showcase.bg-relocation{
  --showcase-image: url("relocation.jpg?v=202");
}

.hero-service-showcase.bg-decommissioning{
  --showcase-image: url("decommissioning.jpg?v=203");
}

.hero-service-showcase.bg-destruction{
  --showcase-image: url("destruction.jpg?v=204");
}

.hero-service-showcase-copy .hero-rotator-label{
  color: #9ed9f3;
}

.hero-service-showcase-copy h2{
  margin: 0 0 16px !important;

  font-family: "Rajdhani", sans-serif !important;
  font-size: clamp(2.05rem, 3.5vw, 3.45rem) !important;

  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;

  color: #92CA4A !important;

  text-shadow:
    0 2px 4px rgba(0,0,0,0.85),
    0 8px 18px rgba(0,0,0,0.55),
    0 18px 42px rgba(0,0,0,0.42),
    0 0 18px rgba(113,210,255,0.18);

  position: relative;
  z-index: 2;
}

.hero-service-showcase-copy p{
  max-width: none !important;
  width: 100% !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 1.02rem !important;
  line-height: 1.82 !important;
}

.hero-service-showcase .hero-rotator, .hero-service-showcase .hero-rotator.bg-migration, .hero-service-showcase .hero-rotator.bg-relocation, .hero-service-showcase .hero-rotator.bg-decommissioning, .hero-service-showcase .hero-rotator.bg-destruction{
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  align-content: end !important;
  min-height: 330px !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  background-image: none !important;
  overflow: visible !important;
}

.hero-service-showcase .hero-rotator::before{
  content: "" !important;
  position: absolute !important;
  left: -18px !important;
  right: -18px !important;
  top: 120px !important;
  bottom: -18px !important;
  z-index: 0 !important;
  border-radius: 0 0 28px 28px !important;
  background: linear-gradient(
      180deg,
      rgba(5,17,26,0) 0%,
      rgba(5,17,26,0.10) 30%,
      rgba(5,17,26,0.45) 65%,
      rgba(5,17,26,0.85) 100%
    ) !important;
}

.hero-service-showcase .hero-rotating-slide, .hero-service-showcase .hero-rotator-footer{
  position: relative !important;
  z-index: 1 !important;
}

.hero-service-showcase .hero-rotator::after{
  display: none !important;
}

.hero-service-showcase .hero-slide-cta{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.20) !important;
  box-shadow: none !important;
}

.hero-service-showcase .hero-rotator-footer{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-top: 26px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.hero-service-showcase .slider-arrow{
  width: 42px !important;
  height: 42px !important;
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.16) !important;
}

.hero-service-showcase .slider-dot{
  background: rgba(255,255,255,0.28) !important;
}

.hero-service-showcase .slider-dot.active{
  background: var(--caliism-heading) !important;
}


.hero-service-showcase-copy{
  position: relative !important;
  z-index: 3 !important;
  margin-left: -49px;
  padding: clamp(22px, 3vw, 94px) !important;
  border-radius: 26px;
  background:
    linear-gradient(
      135deg,
      rgba(5,17,26,0.02),
      rgba(8,24,37,0.02)
    );

  border: 1px solid rgba(255,255,255,0.10);

  box-shadow:
    0 18px 44px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);

  backdrop-filter: blur(3px);
}


.hero-service-showcase-copy .hero-slide-cta{
  margin-top: 22px;
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.20) !important;
}

.hero-service-showcase .hero-rotator{
  position: relative !important;
  z-index: 2 !important;
  isolation: isolate !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  min-height: 330px !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.hero-service-showcase-copy, .hero-service-copy-slide{
  width: 100% !important;
  max-width: none !important;
}

.about-caliism-alt{
  padding: 10px 0;
  background: #000;
}

.about-caliism-row:nth-child(1){
  background: linear-gradient(90deg, rgba(38,173,225,0.44), transparent);
}

.about-caliism-row:nth-child(2){
  background: linear-gradient(90deg, rgba(142,200,67,0.44), transparent);
}

.about-caliism-row:nth-child(3){
  background: linear-gradient(90deg, rgba(15,117,186,0.44), transparent);
}

.about-caliism-narrow{
  max-width: 1200px;
  margin: 0 auto;
}

.about-caliism-alt-head{
  max-width: 1800px;
  margin-bottom: 40px;
}

.about-caliism-eyebrow{
  margin-bottom: 14px;
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0F75BA;
}

.about-caliism-alt-head h2{
  font-family: "Rajdhani", sans-serif;
  margin: 22px 0 16px;
  font-size: clamp(2.0rem, 3.5vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 10px 28px rgba(255,255,255,0.18);
  background: linear-gradient(90deg, #8EC843 0%, #C8F08A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-caliism-alt-head p{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.78);
}

.about-caliism-alt-list{
  border-top: 1px solid rgba(15,117,186,0.12);
}

.about-caliism-row{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(15,117,186,0.12);
  position: relative;
}

.about-caliism-row-kicker{
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8EC843;
  padding-left: 25px;
}

.about-caliism-row-content h3{
  margin: 0 0 10px;
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 800;
  color: #7FDFFF;
}

.about-caliism-row-content p{
  margin: 0;
  color: rgba(255,255,255,0.78);
  line-height: 1.85;
}

.about-caliism-alt-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-divider{
  position: relative;
  width: 100%;
  max-width: 1180px;
  height: 58px;
  margin: 30px auto 0;
  background: transparent;
}

.hero-divider::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(142,221,245,.08) 12%,
    rgba(118,198,236,.28) 34%,
    rgba(214,244,252,.70) 50%,
    rgba(118,198,236,.28) 66%,
    rgba(142,221,245,.08) 88%,
    transparent 100%
  );

  box-shadow:
      0 0 8px rgba(118,198,236,.20),
      0 0 18px rgba(214,244,252,.10);
}

.hero-divider::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(142,200,67,0.30) 0%,
    rgba(38,173,225,0.18) 38%,
    transparent 72%
  );
  filter: blur(8px);
  pointer-events: none;
}


.hero-divider2{
  position: relative;
  width: 100%;
  max-width: 1180px;
  height: 0px;
  margin: 30px auto 0;
  background: transparent;
}


.hero-divider2::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(142,221,245,.08) 12%,
    rgba(118,198,236,.28) 34%,
    rgba(214,244,252,.70) 50%,
    rgba(118,198,236,.28) 66%,
    rgba(142,221,245,.08) 88%,
    transparent 100%
  );

  box-shadow:
      0 0 8px rgba(118,198,236,.20),
      0 0 18px rgba(214,244,252,.10);
}

.hero-divider2::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(142,200,67,0.30) 0%,
    rgba(38,173,225,0.18) 38%,
    transparent 72%
  );
  filter: blur(8px);
  pointer-events: none;
}





.hero-service-showcase{
  position: relative !important;
  z-index: 2;
  display: grid !important;
  grid-template-columns: minmax(900px, 0.56fr) minmax(0, 0.44fr) !important;

  gap: clamp(18px, 3vw, 42px) !important;
  align-items: stretch !important;
  margin-top: -2px !important;
  min-height: 420px;
  padding: 10px clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px) !important;
  border: 0 !important;
  border-radius: 0 0 28px 28px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
  isolation: isolate;
  abackground: linear-gradient(180deg, rgba(5,17,26,0) 0%, rgba(5,17,26,0.38) 12%, rgba(5,17,26,0.82) 26%, rgba(5,17,26,0.96) 100%), radial-gradient(circle at 14% 24%, rgba(38,173,225,0.13), transparent 38%), radial-gradient(circle at 38% 90%, rgba(142,200,67,0.08), transparent 36%), linear-gradient(135deg, rgba(5,17,26,0.98) 0%, rgba(8,24,37,0.94) 48%, rgba(6,19,29,0.88) 100%) !important;
  -awebkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 3%, rgba(0,0,0,0.72) 8%, #000 15%) !important;
  amask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 3%, rgba(0,0,0,0.72) 8%, #000 15%) !important;
}

.hero-service-showcase::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 56% !important;
  z-index: -2 !important;
  background-image: var(--showcase-image, url("migration.jpg?v=201")) !important;
  background-size: cover !important;
  transform: none !important;
  opacity: 0.8 !important;
  transition: background-image 0.35s ease, opacity 0.35s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.10) 12%, rgba(0,0,0,0.30) 24%, rgba(0,0,0,0.60) 40%, rgba(0,0,0,0.85) 54%, #000 68%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.10) 12%, rgba(0,0,0,0.30) 24%, rgba(0,0,0,0.60) 40%, rgba(0,0,0,0.85) 54%, #000 68%) !important;
  background-position: 100% center !important;
  background-repeat: no-repeat !important;
}

.hero-service-copy-slide{
  display: none;
  max-width: none !important;
  min-height: 170px !important;
  width: 100% !important;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.hero-service-copy-slide.active{
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-service-copy-slide h2, .hero-service-copy-slide p{
  max-width: none !important;
  width: 100% !important;

}

.hero-service-copy-slide p{
font-size:1.2rem;
}


.hero-service-showcase .hero-rotator::before, .hero-service-showcase .hero-rotator::after{
  display: none !important;
}

@media (max-width: 768px){

  .hero-services-menu{
    width: 100%;
  }

  .services-menu-toggle{
    width: 100%;
  }

  .services-dropdown{
    position: static;
    min-width: 100%;
    margin-top: 10px;
    transform: none;
    display: none;
    opacity: 1;
    visibility: visible;
  }

  .hero-services-menu.open .services-dropdown{
    display: block;
  }


  .hero-metrics-slide{
    grid-template-columns: 1fr;
  }

  .hero-metrics-controls{
    flex-direction: column;
    align-items: flex-start;
  }

  .section-pad{
    padding: 72px 0;
  }

  .intro-cards{
    margin-top: -28px;
  }

  .intro-grid, .services-grid, .split-feature, .product-grid, .contact-card form, .modal-form, .hero-metrics{
    grid-template-columns: 1fr;
  }

  .footer-inner{
    grid-template-columns: 1fr;
  }

  .about-card, .contact-card, .modal-box, .intro-card, .feature-panel, .product-card, .hero-rotator{
    padding: 26px;
  }

  .slider-controls, .testimonial-controls, .hero-rotator-footer{
    flex-direction: column;
    align-items: flex-start;
  }

  .slider-arrows{
    order: -1;
  }

  .hero-content{
    padding: 26px 0 76px !important;
  }

  .hero-service-showcase{
    margin-top: 18px !important;
    padding: 24px !important;
    border-radius: 0 0 24px 24px !important;
    min-height: auto !important;
  }

  .hero-service-showcase-copy h2, .hero-service-showcase .hero-rotating-slide h2{
    font-size: clamp(2rem, 10vw, 2.65rem) !important;
  }

  .hero-service-showcase .hero-rotator-footer{
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .hero-service-showcase .slider-arrows{
    order: -1;
  }

}

@media (max-width: 980px){

  .hero-metrics-slide{
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-nav-row{
    min-height: 78px;
  }

  .nav-toggle{
    display: block;
  }

  .main-nav{
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px 16px 18px;
    background: rgba(5,17,26,0.96);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 35px rgba(10, 30, 46, 0.28);
  }

  .main-nav.open{
    display: flex;
  }

  .main-nav a{
    padding: 14px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .main-nav a:last-child{
    border-bottom: 0;
  }

  .header-cta{
    margin: 12px 0 0;
    width: 100%;
  }

.hero-metrics{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.testimonial-slide{
  display: none;
  padding: 60px 64px;
  min-height: 430px;
  align-items: center;
  position: relative;
  justify-content: center;
}

  .testimonial-quote-mark{
    margin-right: 0;
    margin-bottom: 12px;
  }

}

@media (max-width: 1180px){

  .hero-top, .products-layout, .about-grid{
    grid-template-columns: 1fr;
  }

  .intro-grid, .services-grid, .split-feature, .product-grid{
    grid-template-columns: 1fr 1fr;
  }

  .hero-service-showcase{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .hero-service-showcase::before{
    width: 100% !important;
    opacity: 0.82 !important;
  }

  .hero-service-showcase::after{
    background: linear-gradient(
        180deg,
        rgba(5,17,26,0.88) 0%,
        rgba(5,17,26,0.72) 48%,
        rgba(5,17,26,0.66) 100%
      ) !important;
  }

  .hero-service-showcase .hero-rotator{
    min-height: 290px !important;
    padding: 10px 0 0 !important;
  }

  .hero-service-showcase .hero-rotator::before{
    inset: auto -12px -12px -12px !important;
    height: 62% !important;
  }

}

@media (max-width: 560px){

  .container{
    width: min(var(--max-width), calc(100% - 22px));
  }

  .hero-logo img{
    height: 40px;
  }

  .hero p, .section-intro{
    font-size: 1rem;
  }

  .hero-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn{
    width: 100%;
  }

  .services-wrap{
    padding: 16px;
  }

  .service-card, .testimonial-slide, .about-card, .contact-card, .modal-box, .hero-rotator{
    padding: 22px;
  }

  .hero h1{
    font-size: 2.3rem;
    white-space: normal !important;
  }

  .hero-service-showcase{
    padding: 20px !important;
  }

}

@media (max-width: 900px){

  .about-caliism-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .about-caliism-row-kicker{
    padding-top: 0;
  }

}


.slider-nav{
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;

  border-radius: 999px;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);

  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  transition: all .25s ease;
}

.slider-nav:hover{
  background: rgba(142,200,67,0.18);
  border-color: rgba(142,200,67,0.42);
}

.nav-arrow{
  font-size: 1rem;
  line-height: 1;
}

.nav-label{
  opacity: 0.85;
}


.hero-service-showcase .hero-rotator{
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  min-height: 330px !important;
  padding: clamp(18px, 3vw, 34px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.hero-service-showcase .hero-rotator-footer{
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label arrows"
    "dots  arrows";
  align-items: center;
  gap: 8px 16px;

  padding: 14px 16px;
  border-radius: 999px;

  background: rgba(5,17,26,0.58);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);

  box-shadow:
    0 14px 34px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.hero-rotator-control-label{
  grid-area: label;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.64);
  line-height: 1;
}

.hero-service-showcase .slider-dots{
  grid-area: dots;
  display: flex;
  gap: 8px;
}

.hero-service-showcase .slider-arrows{
  grid-area: arrows;
  display: flex;
  gap: 8px;
}

.hero-service-showcase .slider-arrow{
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff;
}

.hero-service-showcase .slider-arrow:hover{
  background: rgba(142,200,67,0.22) !important;
  border-color: rgba(142,200,67,0.46) !important;
}

.hero-service-showcase .slider-dot{
  width: 8px !important;
  height: 8px !important;
  background: rgba(255,255,255,0.35) !important;
}

.hero-service-showcase .slider-dot.active{
  background: var(--caliism-heading) !important;
  transform: scale(1.25);
}


.hero-service-showcase .hero-rotator{
  align-self: end !important;
  justify-self: end !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 22px 22px 0 !important;
}

.hero-service-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 22px;
  padding: 7px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.07),
      rgba(255,255,255,0.025)
    );

  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 30px rgba(0,0,0,0.22);

  backdrop-filter: blur(10px);
}

.hero-service-actions .btn{
  margin: 0 !important;
  white-space: nowrap;
}

.hero-service-controls{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 0;

  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.hero-service-controls .slider-dots{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
}

.hero-service-controls .slider-arrow{
  width: 36px;
  height: 36px;
  border-radius: 50%;

  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #fff;
}

.hero-service-controls .slider-arrow:hover{
  background: rgba(142,200,67,0.22) !important;
  border-color: rgba(142,200,67,0.48) !important;
}

.hero-service-controls .slider-dot{
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.32) !important;
}

.hero-service-controls .slider-dot.active{
  background: var(--caliism-heading) !important;
  transform: scale(1.25);
}

.services-section{
  position: relative;
  overflow: hidden;
  color: #fff;
}

.services-head{
  max-width: 1100px;
  margin: 0 auto 42px;
  text-align: center;
}

.services-head .eyebrow{
  display: block;
  text-align: center;
}

.services-head .section-title{
  margin: 0 auto 18px;
  text-align: center;
  font-family: "Rajdhani", sans-serif;
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;

  color: #EEF8FE;
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;

  text-shadow:
      0 2px 0 rgba(255,255,255,.04),
      0 12px 28px rgba(0,0,0,.42);
}


.services-head .section-intro{
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.85;
}

.lifecycle-services-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  position: relative;
}

.lifecycle-service-card{
  position: relative;
  min-width: 0;
  min-height: 320px;
  padding: 11px;
  border-radius: 24px;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(110,214,255,0.22),
      transparent 38%
    ),

    radial-gradient(
      circle at 20% 10%,
      rgba(38,173,225,0.12),
      transparent 45%
    ),

    linear-gradient(
      135deg,
      rgba(20,48,72,0.96) 0%,
      rgba(14,36,56,0.96) 45%,
      rgba(10,28,44,0.98) 100%
    );

  border: 1px solid rgba(110,214,255,0.18);

  box-shadow:
    0 18px 42px rgba(0,0,0,0.24),
    0 0 24px rgba(110,214,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);

  display: flex;
  flex-direction: column;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.lifecycle-service-card::after{
  content: "";
  position: absolute;
  top: 38px;
  right: -14px;
  width: 14px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      rgba(142,200,67,0.85),
      rgba(110,214,255,0.75)
    );

  box-shadow:
    0 0 8px rgba(110,214,255,0.25);
}

.lifecycle-service-card:last-child::after{
  display: none;
}


.lifecycle-service-card:hover{
  transform: translateY(-4px);

  border-color: rgba(110,214,255,0.35);

  box-shadow:
    0 24px 50px rgba(0,0,0,0.28),
    0 0 34px rgba(110,214,255,0.14),
    inset 0 1px 0 rgba(255,255,255,0.08);
}


.lifecycle-card-head{
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;
  margin: 0 auto 18px;

  padding: 6px 10px 6px 6px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.02)
    );

  border: 1px solid rgba(255,255,255,0.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 22px rgba(0,0,0,0.18);

  backdrop-filter: blur(10px);

  width: fit-content;
}

.lifecycle-step{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  border-radius: 50%;

  color: #fff;
  font-weight: 900;
  flex-shrink: 0;

  background: #3a9fd2;

  box-shadow:
    0 0 16px rgba(58,159,210,0.26),
    0 0 26px rgba(58,159,210,0.14);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.lifecycle-card-head .service-label{
  margin: 0;
  padding: 0;

  background: none;
  border: 0;

  color: #9ed9f3;

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lifecycle-service-card .service-label{
  display: inline-flex;
  align-items: center;

  margin-bottom: 0;

  padding: 7px 11px;
  border-radius: 999px;

  background: rgba(255,255,255,0.08);

  color: #9ed9f3;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* 01 ----------------------------------------------------------*/
.lifecycle-service-card:nth-child(1) .lifecycle-step{
    background:linear-gradient(135deg,#A8E8FA,#74CDEB);
    box-shadow:
        0 0 16px rgba(116,205,235,.30),
        0 0 28px rgba(116,205,235,.18);
}
.lifecycle-service-card:nth-child(1) .service-label{
    color:#A8E8FA;
}

/* 02 ----------------------------------------------------------*/
.lifecycle-service-card:nth-child(2) .lifecycle-step{
    background:linear-gradient(135deg,#87DDF7,#5BC5EC);
    box-shadow:
        0 0 16px rgba(91,197,236,.30),
        0 0 28px rgba(91,197,236,.18);
}
.lifecycle-service-card:nth-child(2) .service-label{
    color:#87DDF7;
}

/* 03 ----------------------------------------------------------*/
.lifecycle-service-card:nth-child(3) .lifecycle-step{
    background:linear-gradient(135deg,#69D1EF,#3FB5D8);
    box-shadow:
        0 0 16px rgba(63,181,216,.30),
        0 0 28px rgba(63,181,216,.18);
}
.lifecycle-service-card:nth-child(3) .service-label{
    color:#69D1EF;
}

/* 04 ----------------------------------------------------------*/
.lifecycle-service-card:nth-child(4) .lifecycle-step{
    background:linear-gradient(135deg,#67D2EA,#45B7D9);
    box-shadow:
        0 0 16px rgba(69,183,217,.30),
        0 0 28px rgba(69,183,217,.18);
}
.lifecycle-service-card:nth-child(4) .service-label{
    color:#7DDCF2;
}

/* 05 ----------------------------------------------------------*/
.lifecycle-service-card:nth-child(5) .lifecycle-step{
    background:linear-gradient(135deg,#69D7C4,#56C5AA);
    box-shadow:
        0 0 16px rgba(86,197,170,.30),
        0 0 28px rgba(86,197,170,.18);
}
.lifecycle-service-card:nth-child(5) .service-label{
    color:#84E5D2;
}

/* 06 ----------------------------------------------------------*/
.lifecycle-service-card:nth-child(6) .lifecycle-step{
    background:linear-gradient(135deg,#7AD6B0,#63C69A);
    box-shadow:
        0 0 16px rgba(99,198,154,.32),
        0 0 28px rgba(99,198,154,.20);
}
.lifecycle-service-card:nth-child(6) .service-label{
    color:#A3E8C9;
}

.lifecycle-service-card:hover .lifecycle-step{
  transform: scale(1.08);
}

.lifecycle-service-card:nth-child(1) .lifecycle-card-head{
  border-color: rgba(142,221,245,0.28);
}

.lifecycle-service-card:nth-child(2) .lifecycle-card-head{
  border-color: rgba(111,199,242,0.28);
}

.lifecycle-service-card:nth-child(3) .lifecycle-card-head{
  border-color: rgba(91,159,240,0.28);
}

.lifecycle-service-card:nth-child(4) .lifecycle-card-head{
  border-color: rgba(115,127,232,0.28);
}

.lifecycle-service-card:nth-child(5) .lifecycle-card-head{
  border-color: rgba(150,120,223,0.28);
}

.lifecycle-service-card:nth-child(6) .lifecycle-card-head{
  border-color: rgba(182,111,197,0.28);
}


.lifecycle-service-card h3{
  margin: 0 0 14px;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.lifecycle-service-card p{
  margin: 0 0 22px;
  color: rgba(255,255,255,0.74);
  font-size: 0.95rem;
  line-height: 1.7;
}

.lifecycle-service-card .btn{
  margin-top: auto;
}

@media (max-width: 1180px){
  .lifecycle-services-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lifecycle-service-card::after{
    display: none;
  }
}

@media (max-width: 700px){
  .lifecycle-services-grid{
    grid-template-columns: 1fr;
  }
}


.products-section{
  position: relative;
  overflow: hidden;
  color: #fff;
  border-top: 0 !important;
  box-shadow: none !important;
}

.products-ecosystem{
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
  gap: 48px;
  align-items: center;
}

.products-copy .cta-group{
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: center;
  margin-top: 28px;
}

.products-note{
  margin-top: 20px;
  color: var(--text-bright);
  line-height: 1.85;
}

.products-network-panel{
  padding: 34px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 18%, rgba(38,173,225,0.18), transparent 38%),
    radial-gradient(circle at 20% 90%, rgba(142,200,67,0.14), transparent 42%),
    linear-gradient(135deg, rgba(6,19,29,0.98), rgba(10,31,47,0.96));
  border: 1px solid rgba(255,255,255,0.08);
}

.network-panel-head span,
.vendor-list span{
  display: block;
  margin-bottom: 10px;
  color: #9ed9f3;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.network-panel-head h3{
  margin: 0 0 12px;
  color: #fff;
  font-size: 1.55rem;
  line-height: 1.2;
}

.network-panel-head p{
  margin: 0 0 26px;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
}

.network-flow{
  display: grid;
  gap: 14px;
}

.network-flow article{
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 3px;
  align-items: start;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.09);
}

.network-flow article span{
  grid-column: 1;
  grid-row: 1 / span 2;

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

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background:
      linear-gradient(
          180deg,
          rgba(255,255,255,.10),
          rgba(255,255,255,.04)
      );

  border:1px solid rgba(190,228,247,.18);

  color:#C6EAFB;

  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 8px 20px rgba(0,0,0,.20);
}
}


.network-flow article h4{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.15;
}

.network-flow article p{
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  min-width: 0;
  color: rgba(255,255,255,0.74);
  line-height: 1.55;
}

.vendor-list{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.vendor-list p{
  margin: 0;
  color: rgba(255,255,255,0.84);
  line-height: 1.7;
}

.product-support-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  margin-top: 34px;
  clear: both;
}

.product-support-row article{
  position: relative;

  min-width: 0;
  padding: 28px;
  border-radius: 24px;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(110,214,255,0.18),
      transparent 38%
    ),

    radial-gradient(
      circle at 18% 10%,
      rgba(38,173,225,0.10),
      transparent 42%
    ),

    linear-gradient(
      135deg,
      rgba(18,42,64,0.96) 0%,
      rgba(12,32,52,0.96) 50%,
      rgba(8,24,37,0.98) 100%
    );

  border: 1px solid rgba(110,214,255,0.16);

  box-shadow:
    0 18px 42px rgba(0,0,0,0.24),
    0 0 24px rgba(110,214,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);

  color: #fff;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.product-support-row article:hover{
  transform: translateY(-4px);

  border-color: rgba(110,214,255,0.32);

  box-shadow:
    0 24px 50px rgba(0,0,0,0.28),
    0 0 34px rgba(110,214,255,0.14),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.testimonial-controls{
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-nav-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  min-width: 90px;
}

.testimonial-control-label{
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.64);
}

.product-support-row h3{
  margin: 0 0 14px;

  color: #8EE4FF;

  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.15;

  text-shadow:
    0 2px 4px rgba(0,0,0,0.65),
    0 0 18px rgba(113,210,255,0.12);
}

.product-support-row p{
  margin: 0;
  color: rgba(255,255,255,0.74);
  line-height: 1.75;
}

@media (max-width: 980px){
  .products-ecosystem,
  .product-support-row{
    grid-template-columns: 1fr;
  }
}


.why-caliism-section{
  position: relative;
  color: #fff;
  background: transparent;
}

.why-caliism-panel{
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 34px;

  background:
    radial-gradient(circle at 14% 18%, rgba(38,173,225,0.12), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(142,200,67,0.10), transparent 38%),
    linear-gradient(135deg, rgba(6,19,29,0.58), rgba(8,24,37,0.42));

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 24px 60px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.05);

  backdrop-filter: blur(8px);
  overflow: hidden;
}

.why-caliism-head{
  max-width: 920px;
  margin: 0 auto 34px;
  text-align: center;
}

.why-caliism-head .eyebrow{
  display: block;
  text-align: center;
}

.why-caliism-head h2{
  margin: 0 0 16px;

  font-family: "Rajdhani", sans-serif;
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;

  color: #D9ECF7;

  text-shadow:
    0 3px 8px rgba(0,0,0,0.72),
    0 0 24px rgba(113,210,255,0.18);
}

.why-caliism-head p{
  max-width: 820px;
  margin: 0 auto;

  color: rgba(255,255,255,0.76);
  font-size: 1.06rem;
  line-height: 1.85;
}

.why-caliism-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.why-caliism-card{
  position: relative;
  min-height: 300px;
  padding: 28px;
  border-radius: 26px;

  background:
    radial-gradient(circle at 82% 18%, rgba(38,173,225,0.12), transparent 38%),
    linear-gradient(135deg, rgba(12,28,44,0.88), rgba(7,20,31,0.96));

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 18px 42px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.why-caliism-card.featured{
  background:
    radial-gradient(circle at 82% 18%, rgba(142,200,67,0.18), transparent 38%),
    linear-gradient(135deg, rgba(12,34,44,0.94), rgba(8,24,37,0.96));
}

.why-card-head{
  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 14px;

  width: 100%;
  max-width: 320px;

  margin: 0 auto 32px;
  padding: 10px 18px 10px 10px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.03)
    );

  border: 1px solid rgba(255,255,255,0.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 24px rgba(0,0,0,0.18);
}

.why-card-number{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 58px;
  height: 58px;
  min-width: 58px;

  margin: 0;
  padding: 0;

  border-radius: 50%;

background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.04)
    );

border:1px solid rgba(180,225,247,.20);

color:#B8E6FA;

  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;

  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 10px 24px rgba(46,135,189,.22),
      0 0 18px rgba(120,205,245,.12);
}
.why-card-number i{
  display: block;
  font-size: 2rem;
  line-height: 1;

  filter: drop-shadow(
    0 0 8px rgba(142,200,67,0.22)
  );
}

.why-card-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 40px;

  margin: 0;
  padding: 0;

  color: #9ed9f3;

  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  line-height: 40px;
}

.why-caliism-card h3{
  margin: 0 0 18px;

  color: #fff;
  text-align: center;

  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.15;
}

.why-caliism-card p{
  margin: 0;

  color: rgba(255,255,255,0.74);
  line-height: 1.75;
}

.why-card-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;
  min-width: 50px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      rgba(142,200,67,0.42),
      rgba(38,173,225,0.26)
    );

  color: #c8f08a;

  font-size: 1.5rem;

  box-shadow:
    0 0 14px rgba(142,200,67,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.why-caliism-proof{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;

  margin-top: 18px;
}

.why-caliism-proof div{
  padding: 18px 20px;
  border-radius: 20px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.why-caliism-proof strong{
  display: block;
  margin-bottom: 6px;

  color: #B7DBEF;

  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.why-caliism-proof span{
  display: block;

  color: rgba(255,255,255,0.70);
  line-height: 1.65;
}

.about-modern-actions{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  gap: 14px;
  margin-top: 34px;
}

@media (max-width: 980px){
  .why-caliism-grid,
  .why-caliism-proof{
    grid-template-columns: 1fr;
  }

  .why-card-head{
    max-width: 100%;
  }
}



.site-footer{
  position: relative;
  color: #d9e6ef;

  background:
    radial-gradient(circle at 15% 20%, rgba(38,173,225,0.08), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(142,200,67,0.06), transparent 35%),
    linear-gradient(
      180deg,
      rgba(4,8,12,0.96),
      rgba(6,19,29,1)
    );

  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-inner{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 42px;
  padding: 70px 0 50px;
}

.footer-logo{
  max-width: 220px;
  margin-bottom: 18px;
}

.footer-brand p{
  max-width: 380px;
  color: rgba(255,255,255,0.72);
  line-height: 1.8;
}

.footer-column h4{
  margin: 0 0 18px;

  color: #fff;

  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-column{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-column a{
  color: rgba(255,255,255,0.74);
  text-decoration: none;
  transition: .2s ease;
}

.footer-column a:hover{
  color: #8EE4FF;
}

.footer-column p{
  margin: 0;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}

.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 20px 0 30px;

  border-top: 1px solid rgba(255,255,255,0.08);

  color: rgba(255,255,255,0.54);
  font-size: 0.9rem;
}


.footer-column h4{
  position: relative;

  margin: 0 0 26px;

  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-column h4::after{
  content: "";

  position: absolute;
  left: 0;
  bottom: -12px;

  width: 64px;
  height: 3px;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    var(--caliism-heading),
    var(--caliism-blue-1)
  );

  box-shadow:
    0 0 10px rgba(142,200,67,0.35),
    0 0 16px rgba(38,173,225,0.25);
}


@media (max-width: 980px){
  .footer-inner{
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom{
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

@media (max-width: 700px){
  .footer-inner{
    grid-template-columns: 1fr;
  }
}


/* =========================
   Hero Metrics / Partner Cards
========================= */

.hero-metrics{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
  align-items: stretch;
}

/* Card shell */

.metric-card{
  width: 100%;
  min-height: 170px;
  perspective: 1200px;
  position: relative;
  z-index: 1;
  overflow: visible;
  opacity: 1;
  filter: none;
  transform: translateZ(0);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.metric-card-inner{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 170px;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform 0.65s ease;
  will-change: transform;
}

/* Flip behavior */

.metric-card:hover .metric-card-inner,
.metric-card:focus-within .metric-card-inner{
  transform: rotateY(180deg);
}

/* Dim non-hovered cards */

.hero-metrics:hover .metric-card{
  opacity: 0.68;
  filter: saturate(0.75);
}

.hero-metrics:hover .metric-card:hover{
  opacity: 1;
  filter: none;
  z-index: 10;
}

/* Front / Back shared */

.metric-card-front,
.metric-card-back{
  position: absolute;
  inset: 0;
  padding: 14px 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  overflow: hidden;
}

/* Front */

.metric-card-front{
  display: flex;
  flex-direction: column;
  background: rgba(15,117,186,0.25);
  border-color: rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
  backdrop-filter: blur(10px);
  transform: translateZ(0);
}

/* Back */

.metric-card-back{
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  transform: rotateY(180deg) translateZ(0);
  background:
    radial-gradient(circle at 80% 20%, rgba(110,214,255,0.10), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(142,200,67,0.08), transparent 45%),
    linear-gradient(135deg, rgba(10,22,34,0.96), rgba(12,28,44,0.94));
  box-shadow:
    0 14px 34px rgba(0,0,0,0.28),
    0 0 24px rgba(110,214,255,0.10);
}

/* Hover glow */

.metric-card:hover .metric-card-front,
.metric-card:hover .metric-card-back{
  border-color: rgba(142,200,67,0.42);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.34),
    0 0 18px rgba(38,173,225,0.28),
    0 0 32px rgba(142,200,67,0.22);
}

/* Front content */

.metric-label{
  position: relative;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #b7dbef;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.metric-label::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.25),
    transparent
  );
}

.metric-value{
  margin-top: -8px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  color: #fff;
}

/* Logo handling */

.metric-value.metric-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 70px;
}

.metric-logo img,
.metric-value.metric-logo img{
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
    filter:
        brightness(0)
        invert(1);

    opacity:.95;

    transition:
        filter .25s ease,
        opacity .25s ease,
        transform .25s ease;
}

.metric-card:hover .metric-logo img{
  opacity: 1;
  transform: scale(1.04);
}

/* Back content */

.metric-back-title{
  margin-bottom: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.metric-card-back p{
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.84);
}

.metric-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 30px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease;
}

.metric-cta:hover{
  background: rgba(142,200,67,0.16);
  border-color: rgba(142,200,67,0.4);
  color: #c8f08a;
  transform: translateY(-1px);
}

/* Responsive */

@media (max-width: 1200px){
  .hero-metrics{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .hero-metrics{
    grid-template-columns: 1fr;
  }

  .metric-card,
  .metric-card-inner{
    min-height: 170px;
  }
}


/* ============================================================
   CALIISM INTERIOR PAGE SYSTEM
   Load AFTER style.css
   ============================================================ */

:root{
  --interior-blue:#26ADE1;
  --interior-blue-light:#6ED6FF;
  --interior-blue-deep:#0F75BA;

  --interior-accent:#BFEFFF;
  --interior-accent-bright:#E8F8FF;

  --interior-ink:#04080c;
  --interior-panel:#071722;

  --interior-rule:rgba(110,214,255,.16);

  --interior-text:rgba(255,255,255,.78);
  --interior-muted:rgba(255,255,255,.56);
}

.service-page{
  color:#fff;
  overflow:hidden;
}


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

.interior-hero{
  position:relative;
  min-height:760px;
  padding:150px 0 74px;
  isolation:isolate;
  overflow:hidden;
  background:#04080c;
}

.interior-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(4,8,12,.98) 0%,
      rgba(4,8,12,.94) 36%,
      rgba(4,8,12,.66) 57%,
      rgba(4,8,12,.22) 100%
    ),
    var(--service-image) center right / cover no-repeat;
}

.interior-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;

  background:
    linear-gradient(
      rgba(110,214,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(110,214,255,.045) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 22% 46%,
      rgba(38,173,225,.11),
      transparent 30%
    ),
    linear-gradient(
      to top,
      #04080c 0%,
      transparent 24%
    );

  background-size:
    42px 42px,
    42px 42px,
    auto,
    auto;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      black 0%,
      black 58%,
      rgba(0,0,0,.38) 84%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      black 0%,
      black 58%,
      rgba(0,0,0,.38) 84%,
      transparent 100%
    );
}

.interior-hero-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(320px,.72fr);

  gap:clamp(46px,7vw,110px);

  align-items:end;

  min-height:530px;
}

.interior-hero-copy{
  max-width:780px;
}

.interior-service-id{
  display:flex;
  align-items:center;

  gap:14px;

  margin-bottom:28px;

  font:
    700
    .78rem/1
    "Inter",
    sans-serif;

  letter-spacing:.19em;
  text-transform:uppercase;

  color:var(--interior-blue-light);
}

.interior-service-id::before{
  content:"";

  width:48px;
  height:2px;

  background:
    linear-gradient(
      90deg,
      var(--interior-blue-light),
      var(--interior-blue)
    );

  box-shadow:
    0 0 14px rgba(38,173,225,.35);
}

.interior-hero h1{
  max-width:800px;

  margin:0;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:
    clamp(3.2rem,6.1vw,6.4rem);

  font-weight:600;
  line-height:.9;
  letter-spacing:-.055em;

  color:#fff;

  text-wrap:balance;
}

.interior-hero h1 .accent{
  color:#6ED6FF;

  text-shadow:
    0 0 28px rgba(38,173,225,.18);
}

.interior-hero-lede{
  max-width:720px;

  margin:
    30px
    0
    0;

  font-size:
    clamp(1.05rem,1.35vw,1.24rem);

  line-height:1.78;

  color:
    rgba(255,255,255,.80);
}

.interior-hero-actions{
  display:flex;
  flex-wrap:wrap;

  gap:14px;

  margin-top:34px;
}

.interior-hero-context{
  position:relative;
  align-self:end;
  isolation:isolate;
  margin-bottom:8px;

  padding:
    32px
    32px
    32px
    42px;

  border-left:
    1px solid rgba(142, 200, 67, 1.0);

  border-radius:
    0 18px 18px 0;


  background:
    linear-gradient(
      270deg,
      rgba(8,45,68,.88) 0%,
      rgba(7,35,53,.78) 38%,
      rgba(5,24,37,.58) 68%,
      rgba(4,8,12,.12) 100%
    );

  box-shadow:
    18px 0 42px rgba(0,0,0,.12);

  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}


.interior-hero-context::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:2;
  pointer-events:none;

  border-radius:
    0 18px 18px 0;

  background:

    /* Top border: green at left, fades right */
    linear-gradient(
      90deg,
      rgba(142,200,67,.72) 0%,
      rgba(142,200,67,.38) 28%,
      rgba(110,214,255,.14) 62%,
      transparent 100%
    ) top left / 100% 1px no-repeat,

    /* Bottom border: green at left, fades right */
    linear-gradient(
      90deg,
      rgba(142,200,67,.72) 0%,
      rgba(142,200,67,.38) 28%,
      rgba(110,214,255,.14) 62%,
      transparent 100%
    ) bottom left / 100% 1px no-repeat,

    /* Left vertical green accent */
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(142,200,67,.18) 12%,
      rgba(142,200,67,.72) 50%,
      rgba(142,200,67,.18) 88%,
      transparent 100%
    ) left center / 1px 84% no-repeat;

  filter:
    drop-shadow(0 0 8px rgba(142,200,67,.14));
}



.interior-hero-context .context-label{
  display:block;

  margin-bottom:12px;

  font-size:.68rem;
  font-weight:800;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:var(--interior-blue-light);
}

.interior-hero-context h2{
  margin:0 0 14px;

  font-family:"Rajdhani",sans-serif;
  font-size:clamp(1.7rem,2.3vw,2.45rem);
  font-weight:600;
  line-height:1.05;

  color:#fff;

  text-shadow:
    0 2px 12px rgba(0,0,0,.38);
}

.interior-hero-context p{
  margin:0;
  max-width:420px;

  color:rgba(255,255,255,.82);

  line-height:1.75;

  text-shadow:
    0 1px 8px rgba(0,0,0,.35);
}


/* ============================================================
   OUTCOME RAIL
   ============================================================ */

.outcome-section{
  padding:
    0
    0
    74px;
}

.outcome-rail{
  position:relative;

  display:grid;

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

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

  border-bottom:
    1px solid rgba(255,255,255,.08);
}

.outcome-rail::before{
  content:"";

  position:absolute;

  left:0;
  top:-1px;

  width:90px;
  height:2px;

  background:
    var(--interior-blue-light);

  box-shadow:
    0 0 16px rgba(142,200,67,.3);
}

.outcome-item{
  position:relative;

  min-height:185px;

  padding:
    30px
    30px
    30px
    0;
}

.outcome-item + .outcome-item{
  padding-left:30px;

  border-left:
    1px solid rgba(255,255,255,.075);
}

.outcome-number{
  display:block;

  margin-bottom:25px;

  color:
    var(--interior-blue-light);

  font-size:.67rem;
  font-weight:800;

  letter-spacing:.18em;
}

.outcome-item h3{
  margin:
    0
    0
    10px;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:1.5rem;
  font-weight:600;
  line-height:1.05;

  color:#fff;
}

.outcome-item p{
  margin:0;

  color:
    var(--interior-muted);

  line-height:1.65;

  font-size:.94rem;
}


/* ============================================================
   EDITORIAL / WHY
   ============================================================ */

.interior-editorial{
  padding:
    82px
    0
    100px;
}

.editorial-grid{
  display:grid;

  grid-template-columns:
    minmax(0,.92fr)
    minmax(0,1.08fr);

  gap:
    clamp(55px,8vw,125px);

  align-items:center;
}

.editorial-visual{
  position:relative;

  min-height:520px;

  overflow:hidden;

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

  border-right:
    1px solid rgba(142,200,67,1.0);

  border-radius:
    9px 0 0 9px;

  background:
    var(--service-image)
    center /
    cover
    no-repeat;

  box-shadow:
    0 30px 80px rgba(0,0,0,.28);

  isolation:isolate;
}


/* Dark atmospheric treatment over reused service image */

.editorial-visual::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(4,8,12,.12) 0%,
      rgba(4,8,12,.22) 42%,
      rgba(5,24,37,.48) 72%,
      rgba(7,35,53,.72) 100%
    ),
    linear-gradient(
      0deg,
      rgba(4,8,12,.42) 0%,
      transparent 38%,
      rgba(4,8,12,.10) 100%
    );
}


/* Subtle Caliism green edge glow */

.editorial-visual::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:2;
  pointer-events:none;

  background:

    /* Top border: green at right, fades left */
    linear-gradient(
      270deg,
      rgba(142,200,67,.72) 0%,
      rgba(142,200,67,.38) 28%,
      rgba(110,214,255,.14) 62%,
      transparent 100%
    ) top right / 100% 1px no-repeat,

    /* Bottom border: green at right, fades left */
    linear-gradient(
      270deg,
      rgba(142,200,67,.72) 0%,
      rgba(142,200,67,.38) 28%,
      rgba(110,214,255,.14) 62%,
      transparent 100%
    ) bottom right / 100% 1px no-repeat,

    /* Right vertical green accent */
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(142,200,67,.18) 12%,
      rgba(142,200,67,.72) 50%,
      rgba(142,200,67,.18) 88%,
      transparent 100%
    ) right center / 1px 84% no-repeat;

  filter:
    drop-shadow(0 0 8px rgba(142,200,67,.14));
}


.editorial-visual-tag{
  position:absolute;

  left:24px;
  bottom:22px;

  z-index:2;

  font-size:.68rem;
  font-weight:800;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:#fff;
}

.editorial-copy .eyebrow{
  margin-bottom:18px;

  color:
    var(--interior-blue-light);

  font-size:.76rem;
}

.editorial-copy h2,
.process-heading h2,
.approach-heading h2,
.lifecycle-nav-heading h2{
  margin:0;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:
    clamp(2.55rem,4vw,4.5rem);

  font-weight:500;
  line-height:.98;

  letter-spacing:-.04em;

  color:#fff;
}

.editorial-copy .lead{
  margin:
    26px
    0
    16px;

  font-size:1.25rem;
  line-height:1.65;

  color:
    rgba(255,255,255,.88);
}

.editorial-copy p:not(.lead){
  margin:0;

  color:
    var(--interior-text);

  line-height:1.85;
}

.editorial-datum{
  display:grid;

  grid-template-columns:
    8px
    1fr;

  gap:14px;

  margin-top:28px;

  padding-top:22px;

  border-top:
    1px solid rgba(255,255,255,.08);

  color:
    rgba(255,255,255,.63);

  line-height:1.65;
}

.editorial-datum::before{
  content:"";

  width:8px;
  height:8px;

  margin-top:8px;

  background:
    var(--interior-blue-light);

  box-shadow:
    0 0 12px rgba(142,200,67,.35);
}


/* ============================================================
   PROCESS
   ============================================================ */

.interior-process{
  padding:
    94px
    0
    104px;

  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(38,173,225,.055),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.015),
      transparent 35%
    );

  border-top:
    1px solid rgba(255,255,255,.055);

  border-bottom:
    1px solid rgba(255,255,255,.055);
}

.process-heading{
  max-width:900px;

  margin-bottom:55px;
}

.process-heading p{
  max-width:760px;

  margin:
    22px
    0
    0;

  color:
    var(--interior-text);

  font-size:1.06rem;
  line-height:1.8;
}

.process-track{
  display:grid;

  grid-template-columns:
    repeat(6,minmax(0,1fr));

  margin-bottom:62px;
}

.process-track-item{
  position:relative;

  padding:
    0
    18px
    24px
    0;

  border-bottom:
    1px solid rgba(110,214,255,.20);
}

.process-track-item::after{
  content:"";

  position:absolute;

  right:-4px;
  bottom:-4px;

  width:7px;
  height:7px;

  background:#0a1a26;

  border:
    1px solid var(--interior-blue-light);

  transform:
    rotate(45deg);
}

.process-track-item:last-child::after{
  background:
    var(--interior-blue-light);

  border-color:
    var(--interior-blue-light);

  box-shadow:
    0 0 12px rgba(142,200,67,.35);
}

.process-track-item span{
  display:block;

  margin-bottom:10px;

  font-size:.65rem;
  font-weight:800;

  letter-spacing:.16em;

  color:
    var(--interior-blue-light);
}

.process-track-item strong{
  font-family:
    "Rajdhani",
    sans-serif;

  font-size:1.1rem;
  font-weight:600;

  text-transform:uppercase;
  letter-spacing:.05em;

  color:#fff;
}

.process-list{
  counter-reset:process;
}

.process-row{
  display:grid;

  grid-template-columns:
    110px
    minmax(260px,.8fr)
    minmax(0,1.25fr);

  gap:
    clamp(28px,5vw,72px);

  align-items:start;

  padding:
    42px
    0;

  border-top:
    1px solid rgba(255,255,255,.075);
}

.process-row:last-child{
  border-bottom:
    1px solid rgba(255,255,255,.075);
}

.process-row:nth-child(even) .process-row-title{
  color:#BFEFFF;
}

.process-row-number{
  font-family:
    "Rajdhani",
    sans-serif;

  font-size:3.5rem;
  font-weight:300;
  line-height:.8;

  color:
    rgba(110,214,255,.35);
}

.process-row-title span{
  display:block;

  margin-bottom:8px;

  font-size:.67rem;
  font-weight:800;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:
    var(--interior-blue-light);
}

.process-row-title h3{
  margin:0;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:
    clamp(1.7rem,2.4vw,2.4rem);

  font-weight:600;
  line-height:1.05;

  color:inherit;
}

.process-row p{
  margin:0;

  max-width:650px;

  color:
    var(--interior-text);

  line-height:1.8;
}


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

.interior-approach{
  padding:
    100px
    0
    92px;
}

.approach-heading{
  max-width:760px;

  margin-bottom:50px;
}

.approach-grid{
  display:grid;

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

  border-top:
    1px solid var(--interior-rule);
}

.approach-item{
  padding:
    34px
    38px
    20px
    0;
}

.approach-item + .approach-item{
  padding-left:38px;

  border-left:
    1px solid rgba(255,255,255,.075);
}

.approach-item span{
  display:block;

  margin-bottom:18px;

  color:
    var(--interior-blue-light);

  font-size:.68rem;
  font-weight:800;

  letter-spacing:.18em;
}

.approach-item h3{
  margin:
    0
    0
    12px;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:1.75rem;
  font-weight:600;

  color:#fff;
}

.approach-item p{
  margin:0;

  color:
    var(--interior-muted);

  line-height:1.72;
}


/* ============================================================
   LIFECYCLE NAVIGATION
   ============================================================ */

.interior-lifecycle-nav{
  padding:
    82px
    0
    96px;

  border-top:
    1px solid rgba(255,255,255,.06);
}

.lifecycle-nav-heading{
  display:flex;

  justify-content:space-between;
  align-items:end;

  gap:40px;

  margin-bottom:38px;
}

.lifecycle-nav-heading p{
  max-width:470px;

  margin:0;

  color:
    var(--interior-muted);

  line-height:1.7;
}

.lifecycle-nav-grid{
  display:grid;

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

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

  border-bottom:
    1px solid rgba(255,255,255,.08);
}

.lifecycle-nav-link{
  position:relative;

  min-height:145px;

  padding:
    25px
    18px
    22px;

  color:
    rgba(255,255,255,.58);

  transition:
    .25s ease;
}

.lifecycle-nav-link + .lifecycle-nav-link{
  border-left:
    1px solid rgba(255,255,255,.065);
}

.lifecycle-nav-link:hover{
  color:#fff;

  background:
    rgba(38,173,225,.035);
}

.lifecycle-nav-link.is-current{
  color:#fff;

  background:
    linear-gradient(
      180deg,
      rgba(142,200,67,.075),
      transparent
    );
}

.lifecycle-nav-link.is-current::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:-1px;

  height:2px;

  background:
    var(--interior-blue-light);

  box-shadow:
    0 0 14px rgba(142,200,67,.32);
}

.lifecycle-nav-link .nav-num{
  display:block;

  margin-bottom:24px;

  font-size:.64rem;
  font-weight:800;

  letter-spacing:.16em;

  color:
    var(--interior-blue-light);
}

.lifecycle-nav-link .nav-action{
  display:block;

  margin-bottom:5px;

  font-size:.66rem;
  font-weight:800;

  letter-spacing:.15em;
  text-transform:uppercase;

  color:
    var(--interior-blue-light);
}

.lifecycle-nav-link strong{
  display:block;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:1.12rem;
  font-weight:600;
  line-height:1.1;
}


/* ============================================================
   CTA
   ============================================================ */

.interior-cta{
  padding:
    0
    0
    100px;
    
    
     position:relative;

  background:
    radial-gradient(
      circle at 78% 50%,
      rgba(38,173,225,.10),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(8,22,32,.88) 0%,
      rgba(5,14,21,.84) 48%,
      rgba(4,8,12,.82) 100%
    );

  border-top:
    1px solid rgba(110,214,255,.12);

  border-bottom:
    1px solid rgba(110,214,255,.08); 
    
    
}

.interior-cta-inner{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:40px;

  align-items:center;

  padding:
    46px
    0;

  border-top:
    1px solid rgba(110,214,255,.18);

  border-bottom:
    1px solid rgba(255,255,255,.08);
}

.interior-cta .eyebrow{
  font-size:.7rem;

  color:
    var(--interior-blue-light);
}

.interior-cta h2{
  max-width:820px;

  margin:
    8px
    0
    12px;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:
    clamp(2.4rem,4vw,4.2rem);

  font-weight:500;
  line-height:.98;

  color:#fff;
}

.interior-cta p{
  max-width:720px;

  margin:0;

  color:
    var(--interior-text);

  line-height:1.75;
}

.interior-cta-actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;

  gap:12px;

  min-width:250px;
}

.interior-cta-phone{
  text-align:center;

  color:
    rgba(255,255,255,.66);

  font-size:.9rem;
  font-weight:700;
}

.interior-cta-phone:hover{
  color:#fff;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width:1050px){

  .interior-hero{
    min-height:auto;
    padding-top:132px;
  }

  .interior-hero-grid{
    grid-template-columns:1fr;

    min-height:auto;

    gap:52px;
  }

  .interior-hero-context{
    max-width:620px;

    margin:0;

    padding:
      22px
      0
      0;

    border-left:0;

    border-top:
      1px solid rgba(110,214,255,.2);
      
  }






  .outcome-rail{
    grid-template-columns:
      repeat(2,1fr);
  }

  .outcome-item:nth-child(3){
    border-left:0;

    border-top:
      1px solid rgba(255,255,255,.075);

    padding-left:0;
  }

  .outcome-item:nth-child(4){
    border-top:
      1px solid rgba(255,255,255,.075);
  }

  .editorial-grid{
    grid-template-columns:1fr;
  }

  .editorial-visual{
    min-height:440px;
    order:2;
  }

  .process-track{
    grid-template-columns:
      repeat(3,1fr);

    row-gap:28px;
  }

  .process-row{
    grid-template-columns:
      80px
      minmax(220px,.7fr)
      1fr;
  }

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

  .lifecycle-nav-link:nth-child(4){
    border-left:0;

    border-top:
      1px solid rgba(255,255,255,.065);
  }

  .lifecycle-nav-link:nth-child(5),
  .lifecycle-nav-link:nth-child(6){
    border-top:
      1px solid rgba(255,255,255,.065);
  }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width:760px){

  .interior-hero{
    padding:
      118px
      0
      58px;
  }

  .interior-hero::before{
    background:
      linear-gradient(
        180deg,
        rgba(4,8,12,.68),
        rgba(4,8,12,.96) 54%,
        #04080c 100%
      ),
      var(--service-image)
      center top /
      auto 46%
      no-repeat;
  }

  .interior-hero::after{
    -webkit-mask-image:none;
    mask-image:none;

    opacity:.6;
  }

  .interior-hero-grid{
    padding-top:190px;
  }

  .interior-hero h1{
    font-size:
      clamp(3rem,14vw,4.5rem);
  }

  .interior-hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .outcome-section{
    padding-bottom:48px;
  }

  .outcome-rail{
    grid-template-columns:1fr;
  }

  .outcome-item,
  .outcome-item + .outcome-item,
  .outcome-item:nth-child(3){
    min-height:auto;

    padding:
      24px
      0;

    border-left:0;

    border-top:
      1px solid rgba(255,255,255,.075);
  }

  .outcome-item:first-child{
    border-top:0;
  }

  .interior-editorial,
  .interior-process,
  .interior-approach{
    padding:
      68px
      0;
  }

  .editorial-visual{
    min-height:330px;
  }

  .process-track{
    grid-template-columns:
      repeat(2,1fr);
  }

  .process-row{
    grid-template-columns:
      52px
      1fr;

    gap:
      18px
      20px;

    padding:
      30px
      0;
  }

  .process-row p{
    grid-column:2;
  }

  .process-row-number{
    font-size:2.5rem;
  }

  .approach-grid{
    grid-template-columns:1fr;
  }

  .approach-item,
  .approach-item + .approach-item{
    padding:
      28px
      0;

    border-left:0;

    border-top:
      1px solid rgba(255,255,255,.075);
  }

  .approach-item:first-child{
    border-top:0;
  }

  .lifecycle-nav-heading{
    display:block;
  }

  .lifecycle-nav-heading p{
    margin-top:18px;
  }

  .lifecycle-nav-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .lifecycle-nav-link:nth-child(3),
  .lifecycle-nav-link:nth-child(5){
    border-left:0;
  }

  .lifecycle-nav-link:nth-child(3),
  .lifecycle-nav-link:nth-child(4),
  .lifecycle-nav-link:nth-child(5),
  .lifecycle-nav-link:nth-child(6){
    border-top:
      1px solid rgba(255,255,255,.065);
  }

  .interior-cta-inner{
    grid-template-columns:1fr;
  }

  .interior-cta-actions{
    min-width:0;
  }

}


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

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

  .service-page *{
    scroll-behavior:auto !important;

    transition-duration:.01ms !important;

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;
  }

}


/* ============================================================
   LIFECYCLE SECTION
   ============================================================ */

.lifecycle-section{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}



/* ============================================================
   SECTION-LOCAL DATA RAIN CANVAS
   ============================================================ */

#lifecycle-data-rain{
  position: absolute;

  top: 0;
  left: 0;

  display: block;

  width: 100% !important;
  height: 100% !important;

  max-width: 100%;

  margin: 0;
  padding: 0;

  border: 0;

  overflow: hidden;

  pointer-events: none;

  z-index: 0;

  opacity: .24;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.80) 8%,
      black 18%,
      black 82%,
      rgba(0,0,0,.72) 93%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.80) 8%,
      black 18%,
      black 82%,
      rgba(0,0,0,.72) 93%,
      transparent 100%
    );
}


/* ============================================================
   SUBTLE ATMOSPHERIC LIGHT BEHIND DATA FIELD
   ============================================================ */


.lifecycle-section::before{
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 14% 36%,
      rgba(38, 173, 225, .055),
      transparent 35%
    ),

    radial-gradient(
      ellipse at 88% 66%,
      rgba(142, 200, 67, .035),
      transparent 34%
    );
}


/* ============================================================
   KEEP CONTENT ABOVE DATA RAIN
   ============================================================ */

.lifecycle-section > .container{
  position: relative;
  z-index: 2;
}


/* ============================================================
   SECTION HEADING
   ============================================================ */

.lifecycle-heading{
  position: relative;

  max-width: 980px;

  margin:
    0
    auto
    30px;

  text-align: center;
}

.lifecycle-heading .section-intro{
  max-width: 860px;

  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   LIFECYCLE DIAGRAM
   ============================================================ */

.lifecycle-diagram{
  position: relative;

  box-sizing: border-box;

  width: min(1240px, 100%);
  height: 820px;

  margin:
    30px
    auto
    70px;

  padding:
    30px
    38px;

  isolation: isolate;

  border:
    1px solid rgba(110, 214, 255, .18);

  border-radius: 18px;

  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(38,173,225,.105) 0%,
      rgba(38,173,225,.035) 30%,
      transparent 57%
    ),
    radial-gradient(
      ellipse at 12% 82%,
      rgba(142,200,67,.055) 0%,
      transparent 36%
    ),
    radial-gradient(
      ellipse at 88% 16%,
      rgba(110,214,255,.065) 0%,
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(13,32,45,.08) 0%,
      rgba(5,17,26,.02) 48%,
      rgba(8,25,37,.04) 100%
  );

  box-shadow:
    0 22px 65px rgba(0, 0, 0, .18),
    0 0 35px rgba(38, 173, 225, .035),
    inset 0 1px 0 rgba(255, 255, 255, .035),
    inset 0 0 90px rgba(0, 0, 0, .18);

  backdrop-filter:
    blur(0px);
}


/* ============================================================
   DIAGRAM ATMOSPHERE
   ============================================================ */

.lifecycle-diagram::before{
  content: "";

  position: absolute;
  inset: 28px;

  border-radius: 50%;

  pointer-events: none;

  z-index: 0;

  opacity: .55;

  background:
    radial-gradient(
      ellipse at center,
      transparent 0 43%,
      rgba(110, 214, 255, .055) 43.2%,
      transparent 43.7%,
      transparent 55%,
      rgba(110, 214, 255, .035) 55.2%,
      transparent 55.7%,
      transparent 68%,
      rgba(142, 200, 67, .025) 68.2%,
      transparent 68.7%
    );
}


.lifecycle-diagram::after{
  content: "";

  position: absolute;

  width: 620px;
  height: 360px;

  left: 50%;
  top: 50%;

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

  border-radius: 50%;

  pointer-events: none;

  z-index: 0;

  background:
    radial-gradient(
      ellipse at center,
      rgba(38, 173, 225, .09),
      rgba(38, 173, 225, .025) 42%,
      transparent 72%
    );

  filter:
    blur(22px);
}


/* ============================================================
   SVG CONNECTION SYSTEM
   ============================================================ */

.lifecycle-connections{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;

  z-index: 1;
}


/* ============================================================
   STATIC LIFECYCLE ORBIT
   ============================================================ */

.lifecycle-ring{
  fill: none;

  stroke:
    rgba(110, 214, 255, .22);

  stroke-width: 1.2;

  stroke-dasharray:
    4 10;

  opacity: .85;
}


/* ============================================================
   CLOCKWISE LIFECYCLE TRACER
   ============================================================ */

.lifecycle-ring-trace{
  fill: none;

  stroke:
    url(#lifecycleLineGradient);

  stroke-width: 2.5;
  stroke-linecap: round;

  stroke-dasharray:
    5 95;

  filter:
    drop-shadow(
      0 0 4px rgba(38, 173, 225, .75)
    )
    drop-shadow(
      0 0 8px rgba(142, 200, 67, .35)
    );

  animation:
    lifecycleOrbit 9s linear infinite;
}


@keyframes lifecycleOrbit {

  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -100;
  }

}


/* ============================================================
   STATIC HUB CONNECTION
   ============================================================ */

.lifecycle-spoke{
  fill: none;

  stroke:
    rgba(110, 214, 255, .15);

  stroke-width: 1.2;

  stroke-dasharray:
    3 7;
}


/* ============================================================
   BLUE DATA STREAM
   ============================================================ */

.lifecycle-spoke-trace{
  fill: none;

  stroke:
    rgba(110, 214, 255, .78);

  stroke-width: 2;
  stroke-linecap: round;

  stroke-dasharray:
    2 7
    5 10
    2 12;

  stroke-dashoffset: 0;

  filter:
    drop-shadow(
      0 0 3px rgba(110, 214, 255, .55)
    )
    drop-shadow(
      0 0 7px rgba(38, 173, 225, .22)
    );

  animation:
    lifecycleDataStream 2.4s linear infinite;
}


/* ============================================================
   GREEN CALIISM DATA PACKETS
   ============================================================ */

.lifecycle-spoke-data-accent{
  fill: none;

  stroke:
    rgba(142, 200, 67, .92);

  stroke-width: 2.6;
  stroke-linecap: round;

  stroke-dasharray:
    2.5 47.5;

  stroke-dashoffset: -17;

  filter:
    drop-shadow(
      0 0 3px rgba(142, 200, 67, .72)
    )
    drop-shadow(
      0 0 8px rgba(142, 200, 67, .28)
    );

  animation:
    lifecycleDataStreamAccent 2.4s linear infinite;
}


@keyframes lifecycleDataStream {

  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -100;
  }

}


@keyframes lifecycleDataStreamAccent {

  from {
    stroke-dashoffset: -17;
  }

  to {
    stroke-dashoffset: -117;
  }

}


/* ============================================================
   CONNECTION MARKERS
   ============================================================ */

.lifecycle-marker{
  fill: #8EC843;

  stroke:
    rgba(142, 200, 67, .20);

  stroke-width: 5;

  paint-order: stroke;

  transform-box: fill-box;
  transform-origin: center;

  opacity: .65;

  filter:
    drop-shadow(
      0 0 5px rgba(142, 200, 67, .30)
    );
}


.marker-01{
  animation:
    lifecycleMarker01 9s linear infinite;
}

.marker-02{
  animation:
    lifecycleMarker02 9s linear infinite;
}

.marker-03{
  animation:
    lifecycleMarker03 9s linear infinite;
}

.marker-04{
  animation:
    lifecycleMarker04 9s linear infinite;
}

.marker-05{
  animation:
    lifecycleMarker05 9s linear infinite;
}

.marker-06{
  animation:
    lifecycleMarker06 9s linear infinite;
}


/* ============================================================
   MARKER ARRIVAL ANIMATIONS
   ============================================================ */

@keyframes lifecycleMarker01 {

  0%,
  1% {
    opacity: .65;
    transform: scale(1);
  }

  2.5% {
    opacity: 1;
    transform: scale(1.65);
  }

  4%,
  100% {
    opacity: .65;
    transform: scale(1);
  }

}


@keyframes lifecycleMarker02 {

  0%,
  14% {
    opacity: .65;
    transform: scale(1);
  }

  15.5% {
    opacity: 1;
    transform: scale(1.65);
  }

  17%,
  100% {
    opacity: .65;
    transform: scale(1);
  }

}


@keyframes lifecycleMarker03 {

  0%,
  33% {
    opacity: .65;
    transform: scale(1);
  }

  34.5% {
    opacity: 1;
    transform: scale(1.65);
  }

  36%,
  100% {
    opacity: .65;
    transform: scale(1);
  }

}


@keyframes lifecycleMarker04 {

  0%,
  49% {
    opacity: .65;
    transform: scale(1);
  }

  50.5% {
    opacity: 1;
    transform: scale(1.65);
  }

  52%,
  100% {
    opacity: .65;
    transform: scale(1);
  }

}


@keyframes lifecycleMarker05 {

  0%,
  65% {
    opacity: .65;
    transform: scale(1);
  }

  66.5% {
    opacity: 1;
    transform: scale(1.65);
  }

  68%,
  100% {
    opacity: .65;
    transform: scale(1);
  }

}


@keyframes lifecycleMarker06 {

  0%,
  83% {
    opacity: .65;
    transform: scale(1);
  }

  84.5% {
    opacity: 1;
    transform: scale(1.65);
  }

  86%,
  100% {
    opacity: .65;
    transform: scale(1);
  }

}


/* ============================================================
   SERVICE NODE ARRIVAL ANIMATIONS
   ============================================================ */

.lifecycle-node-1{
  animation:
    lifecycleNode01 9s linear infinite;
}

.lifecycle-node-2{
  animation:
    lifecycleNode02 9s linear infinite;
}

.lifecycle-node-3{
  animation:
    lifecycleNode03 9s linear infinite;
}

.lifecycle-node-4{
  animation:
    lifecycleNode04 9s linear infinite;
}

.lifecycle-node-5{
  animation:
    lifecycleNode05 9s linear infinite;
}

.lifecycle-node-6{
  animation:
    lifecycleNode06 9s linear infinite;
}


@keyframes lifecycleNode01 {

  0%,
  1% {
    filter: brightness(1);
  }

  2.5% {
    filter:
      brightness(1.25)
      drop-shadow(
        0 0 10px rgba(110, 214, 255, .22)
      );
  }

  4%,
  100% {
    filter: brightness(1);
  }

}


@keyframes lifecycleNode02 {

  0%,
  14% {
    filter: brightness(1);
  }

  15.5% {
    filter:
      brightness(1.25)
      drop-shadow(
        0 0 10px rgba(110, 214, 255, .22)
      );
  }

  17%,
  100% {
    filter: brightness(1);
  }

}


@keyframes lifecycleNode03 {

  0%,
  33% {
    filter: brightness(1);
  }

  34.5% {
    filter:
      brightness(1.25)
      drop-shadow(
        0 0 10px rgba(110, 214, 255, .22)
      );
  }

  36%,
  100% {
    filter: brightness(1);
  }

}


@keyframes lifecycleNode04 {

  0%,
  49% {
    filter: brightness(1);
  }

  50.5% {
    filter:
      brightness(1.25)
      drop-shadow(
        0 0 10px rgba(110, 214, 255, .22)
      );
  }

  52%,
  100% {
    filter: brightness(1);
  }

}


@keyframes lifecycleNode05 {

  0%,
  65% {
    filter: brightness(1);
  }

  66.5% {
    filter:
      brightness(1.25)
      drop-shadow(
        0 0 10px rgba(110, 214, 255, .22)
      );
  }

  68%,
  100% {
    filter: brightness(1);
  }

}


@keyframes lifecycleNode06 {

  0%,
  83% {
    filter: brightness(1);
  }

  84.5% {
    filter:
      brightness(1.25)
      drop-shadow(
        0 0 10px rgba(110, 214, 255, .22)
      );
  }

  86%,
  100% {
    filter: brightness(1);
  }

}


/* ============================================================
   CALIISM CENTER HUB
   ============================================================ */

.lifecycle-center{
  position: absolute;

  left: 50%;
  top: 50%;

  width: 340px;
  height: 175px;

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

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

  padding:
    28px
    34px;

  text-align: center;

  border:
    1px solid rgba(110, 214, 255, .22);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(38, 173, 225, .13),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      rgba(14, 32, 46, .98),
      rgba(7, 18, 28, .98)
    );

  box-shadow:
    0 24px 60px rgba(0, 0, 0, .34),
    0 0 35px rgba(38, 173, 225, .08),
    inset 0 1px 0 rgba(255, 255, 255, .05);

  z-index: 4;
}


.lifecycle-center::before{
  content: "";

  position: absolute;

  top: -1px;
  left: 35px;
  right: 35px;

  height: 2px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #8EC843 20%,
      #26ADE1 70%,
      transparent
    );

  box-shadow:
    0 0 14px rgba(38, 173, 225, .35);
}


.lifecycle-center-glow{
  position: absolute;

  left: -80px;
  right: -80px;

  top: 20px;
  bottom: 20px;

  border-radius: 20px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(38, 173, 225, .10),
      rgba(142, 200, 67, .035) 42%,
      transparent 72%
    );

  filter:
    blur(18px);

  pointer-events: none;

  z-index: -1;
}


.lifecycle-logo{
  width: 205px;
  max-width: 82%;
  max-height: 70px;

  object-fit: contain;

  margin-bottom: 16px;
}


.lifecycle-center-rule{
  width: 72px;
  height: 1px;

  margin-bottom: 13px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #8EC843,
      #26ADE1,
      transparent
    );
}


.lifecycle-center span{
  display: block;

  margin-bottom: 2px;

  font-size: .64rem;
  font-weight: 800;

  letter-spacing: .22em;
  text-transform: uppercase;

  color: #6ED6FF;
}


.lifecycle-center strong{
  display: block;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size: 1.18rem;
  line-height: 1.15;
  font-weight: 600;

  letter-spacing: .03em;

  color:
    rgba(255, 255, 255, .90);
}


/* ============================================================
   SERVICE NODES
   ============================================================ */

.lifecycle-node{
  position: absolute;

  display: grid;

  grid-template-columns:
    42px
    1fr;

  align-items: center;

  gap: 13px;

  width: 310px;

  padding:
    12px
    4px;

  color: inherit;
  text-decoration: none;

  z-index: 5;

  transition:
    transform .25s ease,
    opacity .25s ease,
    filter .25s ease;
}


/* ============================================================
   NODE POSITIONS
   ============================================================ */

.lifecycle-node-1{
  top: 10px;
  left: 50%;

  transform:
    translateX(-50%);
}


.lifecycle-node-2{
  top: 160px;
  right: 20px;
}


.lifecycle-node-3{
  right: 20px;
  bottom: 145px;
}


.lifecycle-node-4{
  bottom: 5px;
  left: 50%;

  transform:
    translateX(-50%);
}


.lifecycle-node-5{
  left: 20px;
  bottom: 145px;
}


.lifecycle-node-6{
  top: 160px;
  left: 20px;
}


/* ============================================================
   NODE NUMBER
   ============================================================ */

.lifecycle-node-number{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  border:
    1px solid rgba(142, 200, 67, .32);

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(142, 200, 67, .16),
      rgba(8, 20, 29, .90)
    );

  font-family:
    "Rajdhani",
    sans-serif;

  font-size: .90rem;
  font-weight: 700;

  color: #B9E67A;

  box-shadow:
    0 0 18px rgba(142, 200, 67, .07);

  transform-origin: center;

  animation: none;
}


/* ============================================================
   NODE TEXT
   ============================================================ */

.lifecycle-node-action{
  display: block;

  margin-bottom: 2px;

  font-size: .65rem;
  font-weight: 800;

  letter-spacing: .18em;
  text-transform: uppercase;

  color: #6ED6FF;
}


.lifecycle-node h3{
  margin:
    0
    0
    3px;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size: 1.18rem;
  line-height: 1.1;
  font-weight: 700;

  color:
    rgba(255, 255, 255, .95);
}


.lifecycle-node p{
  margin: 0;

  font-size: .78rem;
  line-height: 1.45;

  color:
    rgba(255, 255, 255, .56);
}


/* ============================================================
   NODE HOVER
   ============================================================ */

.lifecycle-node:hover{
  z-index: 10;
}


.lifecycle-node-2:hover,
.lifecycle-node-3:hover,
.lifecycle-node-5:hover,
.lifecycle-node-6:hover{
  transform:
    translateY(-3px);
}


.lifecycle-node-1:hover,
.lifecycle-node-4:hover{
  transform:
    translateX(-50%)
    translateY(-3px);
}


.lifecycle-node:hover .lifecycle-node-number{
  color: #D6F7AA;

  border-color:
    rgba(142, 200, 67, .65);

  box-shadow:
    0 0 22px rgba(142, 200, 67, .20);
}


.lifecycle-node:hover h3{
  color: #6ED6FF;
}


@media (hover: hover){

  .lifecycle-diagram:has(.lifecycle-node:hover)
  .lifecycle-node:not(:hover){
    opacity: .42;
  }

}


/* ============================================================
   TEXT SERVICE INDEX
   ============================================================ */

.lifecycle-details{
  display: none;
}


.lifecycle-detail{
  display: grid;

  grid-template-columns:
    145px
    minmax(220px, .72fr)
    1.4fr;

  gap: 26px;

  align-items: start;

  padding:
    22px
    4px;

  border-bottom:
    1px solid rgba(110, 214, 255, .10);
}


.lifecycle-detail > span{
  padding-top: 3px;

  font-size: .68rem;
  font-weight: 800;

  letter-spacing: .16em;
  text-transform: uppercase;

  color: #8EC843;
}


.lifecycle-detail h3{
  margin: 0;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size: 1.18rem;
  line-height: 1.25;

  color: #6ED6FF;
}


.lifecycle-detail p{
  margin: 0;

  font-size: .91rem;
  line-height: 1.7;

  color:
    rgba(255, 255, 255, .66);
}


/* ============================================================
   CTA
   ============================================================ */

.lifecycle-cta{
  width:
    min(760px, 100%);

  margin:
    55px
    auto
    20px;

  text-align: center;
}


.lifecycle-cta h2{
  margin:
    4px
    0
    12px;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:
    clamp(1.9rem, 3vw, 2.7rem);

  line-height: 1.08;

  color:
    rgba(255, 255, 255, .95);
}


.lifecycle-cta p{
  max-width: 640px;

  margin:
    0
    auto
    24px;

  line-height: 1.75;

  color:
    rgba(255, 255, 255, .64);
}


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

@media (max-width: 1050px){

  .lifecycle-diagram{
    height: auto;

    display: grid;

    grid-template-columns:
      1fr
      1fr;

    gap:
      0
      30px;

    margin-top: 45px;
  }


  .lifecycle-connections{
    display: none;
  }


  .lifecycle-center{
    position: relative;

    left: auto;
    top: auto;

    grid-column:
      1 / -1;

    width: 340px;
    max-width: 90%;
    height: 175px;

    margin:
      0
      auto
      35px;

    padding:
      28px
      34px;

    transform: none;
  }


  .lifecycle-center{
    animation: lifecycleHubBreathMobile 5.5s ease-in-out infinite;
  }



  /*
   * Hide radial service nodes on tablet/mobile.
   * The readable lifecycle-detail index takes over.
   */

  .lifecycle-node{
    display: none;
  }


  .lifecycle-details{
    display: block !important;
  }

}


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

@media (max-width: 700px){

  #lifecycle-data-rain{
    opacity: .17;
  }


  .lifecycle-heading{
    text-align: left;
  }


  .lifecycle-diagram{
    display: block;

    padding:
      26px
      18px;

    margin-top: 35px;
  }


  .lifecycle-center{
    width: 300px;
    max-width: 92%;
    height: 160px;

    margin:
      0
      auto;

    padding:
      24px
      28px;
  }


  .lifecycle-logo{
    width: 180px;
    max-width: 82%;
    max-height: 60px;

    margin-bottom: 12px;
  }


  .lifecycle-center-rule{
    margin-bottom: 10px;
  }


  .lifecycle-center span{
    font-size: .60rem;
  }


  .lifecycle-center strong{
    font-size: 1.08rem;
  }


  .lifecycle-details{
    margin-top: 30px;
  }


  .lifecycle-detail{
    grid-template-columns:
      1fr;

    gap: 5px;

    padding:
      20px
      0;
  }


  .lifecycle-detail h3{
    margin-bottom: 4px;
  }

}


/* ============================================================
   DESKTOP DISPLAY MODE
   ============================================================ */

@media (min-width: 1051px){

  .lifecycle-details{
    display: none !important;
  }

}


/* ============================================================
   TIMING CALIBRATION
   Preserves existing orbit/node synchronization
   ============================================================ */

.lifecycle-node-1,
.lifecycle-node-2,
.lifecycle-node-3,
.lifecycle-node-4,
.lifecycle-node-5,
.lifecycle-node-6,

.marker-01,
.marker-02,
.marker-03,
.marker-04,
.marker-05,
.marker-06{
  animation-delay:
    -2.6s;
}


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

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

  .lifecycle-ring-trace,
  .lifecycle-spoke-trace,
  .lifecycle-spoke-data-accent,
  .lifecycle-marker,
  .lifecycle-node{
    animation: none !important;
  }


  #lifecycle-data-rain{
    opacity: .09;
  }

}


/* ============================================================
   LIFECYCLE STATEMENT
   ============================================================ */

.lifecycle-heading{
  position: relative;
  max-width: 1120px;
  margin: 0 auto 54px;
  padding: 34px 0 30px;
}


/* subtle architectural rule */

.lifecycle-heading::before{
  content: "";
  position: absolute;

  top: 0;
  left: 50%;

  width: min(760px, 72%);
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(110,214,255,.18) 18%,
      rgba(110,214,255,.65) 50%,
      rgba(110,214,255,.18) 82%,
      transparent
    );

  box-shadow:
    0 0 16px rgba(38,173,225,.18);
}


.lifecycle-statement{
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 8px;

  margin: 0;

  text-align: center;

  font-family: "Rajdhani", sans-serif;
  line-height: 1;
}


/* EXPERTISE */

.lifecycle-statement__lead{
  position: relative;

  display: inline-block;

  font-size: clamp(2.7rem, 5.4vw, 5.4rem);
  font-weight: 700;

  line-height: .92;

  letter-spacing: -.035em;

  color: #fff;

  text-shadow:
    0 0 26px rgba(38,173,225,.12);
}


/* small green datum beneath Expertise */

.lifecycle-statement__lead::after{
  content: "";

  position: absolute;

  left: 50%;
  bottom: -10px;

  width: 42px;
  height: 2px;

  transform: translateX(-50%);

  background: #8EC843;

  box-shadow:
    0 0 10px rgba(142,200,67,.35);
}


/* SUPPORTING STATEMENT */

.lifecycle-statement__body{
  display: block;

  max-width: 940px;

  margin-top: 18px;

  font-size: clamp(1.45rem, 2.45vw, 2.25rem);
  font-weight: 400;

  line-height: 1.15;

  letter-spacing: -.012em;

  color: rgba(255,255,255,.68);
}


/* EVERY STAGE */

.lifecycle-statement__body strong{
  position: relative;

  font-weight: 600;
  color: #6ED6FF;

  text-shadow:
    0 0 16px rgba(38,173,225,.15);
}


/* lower architectural rule */

.lifecycle-heading::after{
  content: "";

  position: absolute;

  bottom: 0;
  left: 50%;

  width: 92px;
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(142,200,67,.75),
      transparent
    );
}


@media (max-width: 700px){

  .lifecycle-heading{
    margin-bottom: 38px;
    padding: 26px 18px 25px;
  }

  .lifecycle-statement{
    gap: 5px;
  }

  .lifecycle-statement__lead{
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  .lifecycle-statement__body{
    max-width: 560px;

    font-size: clamp(1.3rem, 6vw, 1.75rem);
    line-height: 1.18;
  }

}

.lifecycle-heading .section-intro{
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;

  font-size: clamp(1.2rem, 1.45vw, 1.45rem);
  line-height: 1.65;

  color: rgba(255,255,255,.76);
}


/* ============================================================
   CALIISM HUB — SUBTLE BREATHING
   ============================================================ */

.lifecycle-center{
  animation:
    lifecycleHubBreath 5.5s ease-in-out infinite;

  transform-origin: center center;
  will-change: transform, box-shadow, border-color;
}


@keyframes lifecycleHubBreath {

  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(1);

    border-color:
      rgba(110,214,255,.22);

    box-shadow:
      0 22px 55px rgba(0,0,0,.32),
      0 0 24px rgba(38,173,225,.07),
      inset 0 1px 0 rgba(255,255,255,.05);
  }


  50% {
    transform:
      translate(-50%, -50%)
      scale(1.000);

    border-color:
      rgba(110,214,255,.36);

    box-shadow:
      0 24px 60px rgba(0,0,0,.32),
      0 0 38px rgba(38,173,225,.15),
      0 0 70px rgba(142,200,67,.045),
      inset 0 1px 0 rgba(255,255,255,.07);
  }

}


@keyframes lifecycleHubBreathMobile {

  0%,
  100% {
    transform: scale(1);

    border-color:
      rgba(110,214,255,.22);

    box-shadow:
      0 22px 55px rgba(0,0,0,.32),
      0 0 24px rgba(38,173,225,.07),
      inset 0 1px 0 rgba(255,255,255,.05);
  }

  50% {
    transform: scale(1);

    border-color:
      rgba(110,214,255,.36);

    box-shadow:
      0 24px 60px rgba(0,0,0,.32),
      0 0 38px rgba(38,173,225,.15),
      0 0 70px rgba(142,200,67,.045),
      inset 0 1px 0 rgba(255,255,255,.07);
  }

.lifecycle-center{
    animation: none;
    transform: none;
  }




}




/* ============================================================
   PRODUCTS + TECHNOLOGY PAGE
   Caliism Data Solutions
   ============================================================ */


/* ------------------------------------------------------------
   PRODUCTS HERO
   Uses the existing interior hero framework.
   ------------------------------------------------------------ */

.products-page{
  position:relative;
  background:#04080c;
  color:#fff;
}


.products-hero .interior-hero-copy{
  max-width:880px;
}


/* ============================================================
   TECHNOLOGY ECOSYSTEM INTRO
   ============================================================ */

.products-intro{
  position:relative;

  padding:
    clamp(78px,8vw,120px)
    0;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 82% 30%,
      rgba(38,173,225,.08),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(7,16,24,.78) 0%,
      rgba(5,11,16,.68) 100%
    );

  border-top:
    1px solid rgba(110,214,255,.08);

  border-bottom:
    1px solid rgba(110,214,255,.08);
}


.products-intro::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.20;

  background-image:
    linear-gradient(
      rgba(110,214,255,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(110,214,255,.055) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}


.products-intro-grid{
  position:relative;
  z-index:1;

  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(420px,.95fr);

  gap:
    clamp(60px,7vw,110px);

  align-items:center;
}


.products-intro-copy{
  max-width:760px;
}


.products-intro-copy h2{
  margin:
    12px
    0
    22px;

  max-width:760px;

  font-family:"Rajdhani",sans-serif;

  font-size:
    clamp(2.5rem,4vw,4.4rem);

  font-weight:600;

  line-height:.98;

  letter-spacing:-.035em;

  color:#fff;
}


.products-intro-copy .lead{
  margin:0;

  max-width:700px;

  color:
    rgba(255,255,255,.72);

  font-size:
    clamp(1rem,1.25vw,1.16rem);

  line-height:1.8;
}


/* ------------------------------------------------------------
   TECHNOLOGY SPECTRUM
   ------------------------------------------------------------ */

.technology-spectrum{
  position:relative;

  display:grid;

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

  border-top:
    1px solid rgba(110,214,255,.18);

  border-left:
    1px solid rgba(110,214,255,.10);
}


.technology-spectrum::before{
  content:"";

  position:absolute;

  top:-1px;
  left:0;

  width:120px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      #6ED6FF,
      rgba(110,214,255,0)
    );

  box-shadow:
    0 0 14px rgba(110,214,255,.24);
}


.technology-spectrum-item{
  min-height:96px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  gap:7px;

  padding:
    22px
    26px;

  border-right:
    1px solid rgba(110,214,255,.10);

  border-bottom:
    1px solid rgba(110,214,255,.10);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.018),
      rgba(38,173,225,.025)
    );

  transition:
    background .25s ease,
    border-color .25s ease;
}


.technology-spectrum-item:hover{
  background:
    linear-gradient(
      135deg,
      rgba(110,214,255,.07),
      rgba(38,173,225,.025)
    );

  border-color:
    rgba(110,214,255,.20);
}


.technology-spectrum-item span{
  font-family:"Rajdhani",sans-serif;

  font-size:.72rem;

  font-weight:600;

  letter-spacing:.16em;

  color:#6ED6FF;
}


.technology-spectrum-item strong{
  font-family:"Rajdhani",sans-serif;

  font-size:
    clamp(1.1rem,1.4vw,1.35rem);

  font-weight:600;

  letter-spacing:.01em;

  color:#fff;
}


/* ============================================================
   TECHNOLOGY DIRECTORY
   Shared by vendors and distributors
   ============================================================ */

.technology-directory{
  position:relative;

  padding:
    clamp(86px,8vw,130px)
    0;

  overflow:hidden;

  /*
   * Deliberately translucent.
   * Allows the Caliism Data Rain layer to remain visible
   * without overwhelming directory content.
   */

  background:
    rgba(4,8,12,.72);
}


.technology-directory::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(38,173,225,.055),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 76%,
      rgba(110,214,255,.035),
      transparent 26%
    );
}


/* ------------------------------------------------------------
   DIRECTORY HEADING
   ------------------------------------------------------------ */

.technology-directory-heading{
  position:relative;
  z-index:1;

  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(320px,.65fr);

  gap:
    clamp(40px,7vw,110px);

  align-items:end;

  margin-bottom:
    clamp(54px,6vw,84px);

  padding-bottom:32px;

  border-bottom:
    1px solid rgba(110,214,255,.12);
}


.technology-directory-heading::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-1px;

  width:
    clamp(120px,18vw,280px);

  height:1px;

  background:
    linear-gradient(
      90deg,
      #6ED6FF,
      rgba(110,214,255,0)
    );

  box-shadow:
    0 0 14px rgba(110,214,255,.22);
}


.technology-directory-heading h2{
  margin:
    10px
    0
    0;

  max-width:850px;

  font-family:"Rajdhani",sans-serif;

  font-size:
    clamp(2.5rem,4vw,4.4rem);

  font-weight:600;

  line-height:.98;

  letter-spacing:-.035em;

  color:#fff;
}


.technology-directory-heading > p{
  margin:0;

  max-width:560px;

  color:
    rgba(255,255,255,.64);

  font-size:1rem;

  line-height:1.75;
}


/* ============================================================
   DIRECTORY GRID
   ============================================================ */

.technology-entry-grid{
  position:relative;
  z-index:1;

  display:grid;

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

  border-top:
    1px solid rgba(110,214,255,.12);

  border-left:
    1px solid rgba(110,214,255,.08);
}


/* ============================================================
   INDIVIDUAL TECHNOLOGY ENTRY

   Deliberately not styled as a floating card.
   Entries share structural grid lines.
   ============================================================ */

.technology-entry{
  position:relative;

  min-width:0;

  min-height:410px;

  display:grid;

  grid-template-rows:
    150px
    1fr;

  padding:
    clamp(26px,3vw,38px);

  border-right:
    1px solid rgba(110,214,255,.08);

  border-bottom:
    1px solid rgba(110,214,255,.08);

  background:
    linear-gradient(
      145deg,
      rgba(7,16,24,.62) 0%,
      rgba(4,10,16,.54) 52%,
      rgba(5,17,25,.58) 100%
    );

  overflow:hidden;

  isolation:isolate;

  transition:
    background .3s ease,
    border-color .3s ease;
}


/* subtle technical glow */

.technology-entry::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:-1;

  pointer-events:none;

  opacity:0;

  background:
    radial-gradient(
      circle at 20% 18%,
      rgba(110,214,255,.09),
      transparent 38%
    );

  transition:
    opacity .3s ease;
}


.technology-entry:hover{
  border-color:
    rgba(110,214,255,.17);

  background:
    linear-gradient(
      145deg,
      rgba(8,22,32,.68) 0%,
      rgba(5,13,20,.60) 52%,
      rgba(5,22,32,.64) 100%
    );
}


.technology-entry:hover::before{
  opacity:1;
}


/* small energized edge */

.technology-entry::after{
  content:"";

  position:absolute;

  top:34px;
  right:-1px;

  width:1px;
  height:72px;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(142,200,67,.52),
      transparent
    );

  opacity:.42;

  transition:
    opacity .3s ease,
    height .3s ease;
}


.technology-entry:hover::after{
  opacity:.75;
  height:100px;
}


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

.technology-entry-logo{
  position:relative;

  display:flex;

  align-items:center;

  justify-content:flex-start;

  min-width:0;

  padding:
    0
    10px
    28px
    0;
}


.technology-entry-logo::after{
  content:"";

  position:absolute;

  left:0;
  bottom:14px;

  width:72px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(110,214,255,.42),
      transparent
    );
}


.technology-entry-logo img{
  display:block;

  width:auto;
  height:auto;

  max-width:220px;
  max-height:100px;

  object-fit:contain;

  object-position:left center;

  filter:
    drop-shadow(
      0 10px 20px rgba(0,0,0,.24)
    );

  transition:
    transform .3s ease,
    filter .3s ease;
}


.technology-entry:hover
.technology-entry-logo img{
  transform:
    translateY(-2px);

  filter:
    drop-shadow(
      0 12px 24px rgba(0,0,0,.28)
    )
    drop-shadow(
      0 0 12px rgba(110,214,255,.08)
    );
}


/* ============================================================
   ENTRY CONTENT
   ============================================================ */

.technology-entry-content{
  display:flex;

  flex-direction:column;

  align-items:flex-start;

  min-width:0;
}


.technology-entry-type{
  display:block;

  margin-bottom:9px;

  font-family:"Rajdhani",sans-serif;

  font-size:.70rem;

  font-weight:600;

  line-height:1.2;

  letter-spacing:.15em;

  text-transform:uppercase;

  color:#6ED6FF;
}


.technology-entry-content h3{
  margin:
    0
    0
    14px;

  font-family:"Rajdhani",sans-serif;

  font-size:
    clamp(1.55rem,2vw,2rem);

  font-weight:600;

  line-height:1.05;

  letter-spacing:-.015em;

  color:#fff;
}


.technology-entry-content p{
  margin:
    0
    0
    20px;

  max-width:600px;

  color:
    rgba(255,255,255,.68);

  font-size:.96rem;

  line-height:1.7;
}


/* ============================================================
   TECHNOLOGY TAGS
   ============================================================ */

.technology-entry-tags{
  display:flex;

  flex-wrap:wrap;

  gap:
    7px
    8px;

  margin:
    auto
    0
    22px;
}


.technology-entry-tags span{
  display:inline-flex;

  align-items:center;

  min-height:26px;

  padding:
    5px
    9px;

  border:
    1px solid rgba(110,214,255,.12);

  border-radius:3px;

  background:
    rgba(110,214,255,.025);

  font-family:"Rajdhani",sans-serif;

  font-size:.67rem;

  font-weight:600;

  line-height:1;

  letter-spacing:.08em;

  text-transform:uppercase;

  color:
    rgba(232,248,255,.70);
}


/* ============================================================
   EXTERNAL LINK
   ============================================================ */

.technology-entry-link{
  display:inline-flex;

  align-items:center;

  gap:9px;

  margin-top:auto;

  padding-bottom:4px;

  border-bottom:
    1px solid rgba(110,214,255,.18);

  color:#E8F8FF;

  font-family:"Rajdhani",sans-serif;

  font-size:.82rem;

  font-weight:600;

  line-height:1;

  letter-spacing:.08em;

  text-decoration:none;

  text-transform:uppercase;

  transition:
    color .2s ease,
    border-color .2s ease,
    gap .2s ease;
}


.technology-entry-link i{
  font-size:.70rem;

  color:#6ED6FF;

  transition:
    transform .2s ease;
}


.technology-entry-link:hover{
  gap:12px;

  color:#6ED6FF;

  border-color:
    rgba(110,214,255,.52);
}


.technology-entry-link:hover i{
  transform:
    translate(2px,-2px);
}


/* ============================================================
   DISTRIBUTION INTRO
   Visual transition between manufacturers and distribution.
   ============================================================ */

.distribution-intro{
  position:relative;

  padding:
    clamp(78px,8vw,118px)
    0;

  overflow:hidden;

  /*
   * Slightly darker than the directories so this section
   * remains a visual transition while still allowing the
   * Data Rain atmosphere to show through.
   */

  background:
    linear-gradient(
      135deg,
      rgba(10,27,40,.82) 0%,
      rgba(7,19,29,.76) 46%,
      rgba(4,8,12,.72) 100%
    );

  border-top:
    1px solid rgba(110,214,255,.10);

  border-bottom:
    1px solid rgba(110,214,255,.10);
}


.distribution-intro::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:
    clamp(180px,28vw,500px);

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(110,214,255,.72),
      transparent
    );

  box-shadow:
    0 0 18px rgba(110,214,255,.18);
}


.distribution-intro::after{
  content:"";

  position:absolute;

  right:-10%;
  top:-80%;

  width:600px;
  height:600px;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(38,173,225,.09),
      transparent 68%
    );
}


.distribution-intro-grid{
  position:relative;
  z-index:1;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(360px,.8fr);

  gap:
    clamp(50px,8vw,130px);

  align-items:center;
}


.distribution-intro h2{
  margin:
    12px
    0
    0;

  max-width:800px;

  font-family:"Rajdhani",sans-serif;

  font-size:
    clamp(2.5rem,4vw,4.4rem);

  font-weight:600;

  line-height:.98;

  letter-spacing:-.035em;

  color:#fff;
}


.distribution-intro .lead{
  margin:
    0
    0
    18px;

  color:
    rgba(255,255,255,.80);

  font-size:
    clamp(1.02rem,1.25vw,1.16rem);

  line-height:1.75;
}


.distribution-intro p:not(.lead){
  margin:0;

  color:
    rgba(255,255,255,.60);

  line-height:1.75;
}


/* ============================================================
   DISTRIBUTOR DIRECTORY
   Slightly different atmosphere from vendors.
   ============================================================ */

.distributor-directory{
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(38,173,225,.055),
      transparent 32%
    ),
    rgba(4,8,12,.72);
}


.distributor-directory
.technology-entry{
  min-height:360px;
}


.distributor-directory
.technology-entry-logo{
  min-height:128px;
}


/* Distributor entries have no tags in current markup.
   Link naturally remains at the bottom. */

.distributor-directory
.technology-entry-content p{
  margin-bottom:26px;
}


/* ============================================================
   PRODUCTS VALUE / WHY THE NETWORK MATTERS
   Existing interior-approach framework does most of the work.
   ============================================================ */

.products-value{
  position:relative;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1100px){

  .products-intro-grid{
    grid-template-columns:
      1fr;

    gap:54px;
  }


  .technology-spectrum{
    max-width:760px;
  }


  .technology-directory-heading{
    grid-template-columns:
      1fr;

    gap:24px;
  }


  .technology-directory-heading > p{
    max-width:720px;
  }


  .distribution-intro-grid{
    grid-template-columns:
      1fr;

    gap:34px;
  }

}


@media (max-width:860px){

  .technology-entry-grid{
    grid-template-columns:
      1fr;
  }


  .technology-entry{
    min-height:0;

    grid-template-rows:
      auto
      1fr;
  }


  .technology-entry-logo{
    min-height:120px;
  }


  .technology-entry-tags{
    margin-top:6px;
  }

}


@media (max-width:640px){

  .products-intro,
  .technology-directory,
  .distribution-intro{
    padding:
      70px
      0;
  }


  .technology-spectrum{
    grid-template-columns:
      1fr;
  }


  .technology-spectrum-item{
    min-height:76px;

    padding:
      18px
      20px;
  }


  .technology-entry{
    padding:
      26px
      22px;
  }


  .technology-entry-logo{
    min-height:100px;

    padding-bottom:24px;
  }


  .technology-entry-logo img{
    max-width:190px;
    max-height:86px;
  }


  .technology-entry-content h3{
    font-size:1.55rem;
  }


  .technology-entry-content p{
    font-size:.94rem;
  }


  .technology-entry-tags{
    gap:6px;
  }

}


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

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

  .technology-entry,
  .technology-entry::before,
  .technology-entry::after,
  .technology-entry-logo img,
  .technology-entry-link,
  .technology-entry-link i,
  .technology-spectrum-item{
    transition:none;
  }

}


/* ============================================================
   TECHNOLOGY LOGOS
   Caliism light-blue monochrome treatment
   ============================================================ */

.technology-entry-logo img{
  display:block;

  width:auto;
  height:auto;

  max-width:220px;
  max-height:100px;

  object-fit:contain;
  object-position:left center;

  /*
     Convert transparent logo artwork to Caliism light blue.
     Target: approximately #6ED6FF
  */

  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(25%)
    saturate(1184%)
    hue-rotate(166deg)
    brightness(103%)
    contrast(102%)
    opacity(.82)
    drop-shadow(0 8px 18px rgba(0,0,0,.20));

  transition:
    transform .3s ease,
    filter .3s ease;
}


.technology-entry:hover
.technology-entry-logo img{
  transform:translateY(-2px);

  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(25%)
    saturate(1184%)
    hue-rotate(166deg)
    brightness(108%)
    contrast(102%)
    opacity(1)
    drop-shadow(0 10px 22px rgba(0,0,0,.24))
    drop-shadow(0 0 12px rgba(110,214,255,.20));
}

/* ============================================================
   TESTIMONIALS PAGE
   ============================================================ */

.testimonials-page{
  position:relative;
  color:#fff;
  background:#04080c;
}


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

.testimonials-hero{
  min-height:700px;
}


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

.testimonials-intro{
  position:relative;

  padding:
    clamp(72px,8vw,118px)
    0
    clamp(58px,6vw,86px);

  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(38,173,225,.07),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #07131d 0%,
      #04080c 100%
    );

  border-top:
    1px solid rgba(110,214,255,.08);
}


.testimonials-intro-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(320px,.75fr);

  gap:
    clamp(48px,7vw,110px);

  align-items:end;
}


.testimonials-intro .section-title{
  max-width:760px;
  margin-bottom:0;
}


.testimonials-intro .section-title span{
  color:#6ED6FF;
}


.testimonials-intro-copy{
  max-width:600px;

  margin:0;

  color:
    rgba(255,255,255,.70);

  font-size:
    clamp(16px,1.3vw,18px);

  line-height:1.8;
}


/* ============================================================
   TESTIMONIAL DIRECTORY
   ============================================================ */

.testimonials-directory{
  position:relative;

  padding:
    0
    0
    clamp(90px,9vw,140px);

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #04080c 0%,
      #061019 50%,
      #04080c 100%
    );
}


/* subtle atmospheric light */

.testimonials-directory::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(38,173,225,.055),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 72%,
      rgba(110,214,255,.035),
      transparent 26%
    );
}


.testimonials-list{
  position:relative;
  z-index:1;

  border-top:
    1px solid rgba(110,214,255,.12);
}


/* ============================================================
   INDIVIDUAL TESTIMONIAL
   ============================================================ */

.testimonial-entry{
  position:relative;

  display:grid;

  grid-template-columns:
    clamp(72px,8vw,130px)
    minmax(0,1fr);

  gap:
    clamp(22px,4vw,64px);

  padding:
    clamp(46px,6vw,84px)
    clamp(10px,2vw,28px);

  border-bottom:
    1px solid rgba(110,214,255,.10);

  transition:
    background .3s ease,
    border-color .3s ease;
}


.testimonial-entry::before{
  content:"";

  position:absolute;

  left:0;
  top:-1px;

  width:0;
  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(110,214,255,.85),
      rgba(38,173,225,.30),
      transparent
    );

  transition:
    width .45s ease;
}


.testimonial-entry:hover{
  background:
    linear-gradient(
      90deg,
      rgba(38,173,225,.035),
      rgba(38,173,225,.008) 52%,
      transparent 100%
    );

  border-color:
    rgba(110,214,255,.18);
}


.testimonial-entry:hover::before{
  width:
    clamp(180px,28vw,480px);
}


/* ============================================================
   QUOTATION MARK
   ============================================================ */

.testimonial-entry-mark{
  align-self:start;

  color:
    rgba(110,214,255,.30);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(92px,9vw,150px);

  font-weight:400;

  line-height:.70;

  user-select:none;

  transition:
    color .3s ease,
    text-shadow .3s ease;
}


.testimonial-entry:hover
.testimonial-entry-mark{
  color:
    rgba(110,214,255,.50);

  text-shadow:
    0 0 28px rgba(38,173,225,.12);
}


/* ============================================================
   TESTIMONIAL COPY
   ============================================================ */

.testimonial-entry-body{
  max-width:1080px;
}


.testimonial-entry blockquote{
  margin:0;
  padding:0;
}


.testimonial-entry blockquote p{
  margin:0;

  color:
    rgba(255,255,255,.90);

  font-size:
    clamp(20px,2vw,29px);

  font-weight:400;

  line-height:1.65;

  letter-spacing:-.01em;
}


/* ============================================================
   ATTRIBUTION
   ============================================================ */

.testimonial-entry-source{
  position:relative;

  margin-top:
    clamp(28px,3vw,42px);

  padding-left:24px;
}


.testimonial-entry-source::before{
  content:"";

  position:absolute;

  left:0;
  top:3px;
  bottom:3px;

  width:2px;

  background:
    linear-gradient(
      180deg,
      #6ED6FF,
      rgba(38,173,225,.18)
    );

  box-shadow:
    0 0 12px rgba(110,214,255,.12);
}


.testimonial-entry-person{
  color:#fff;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:18px;

  font-weight:700;

  line-height:1.2;

  letter-spacing:.055em;

  text-transform:uppercase;
}


.testimonial-entry-meta{
  margin-top:5px;

  color:
    rgba(110,214,255,.72);

  font-size:14px;

  font-weight:500;

  line-height:1.5;

  letter-spacing:.04em;
}


/* ============================================================
   CTA
   ============================================================ */

.testimonials-cta{
  position:relative;

  background:
    radial-gradient(
      circle at 78% 50%,
      rgba(38,173,225,.10),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(8,22,32,.96) 0%,
      rgba(5,14,21,.94) 48%,
      rgba(4,8,12,.96) 100%
    );

  border-top:
    1px solid rgba(110,214,255,.12);

  border-bottom:
    1px solid rgba(110,214,255,.08);
}


.testimonials-cta::before{
  content:"";

  position:absolute;

  top:-1px;
  left:0;

  width:
    clamp(160px,24vw,420px);

  height:1px;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(110,214,255,.75),
      rgba(110,214,255,.18) 55%,
      transparent
    );

  box-shadow:
    0 0 18px rgba(110,214,255,.16);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:900px){

  .testimonials-intro-grid{
    grid-template-columns:1fr;

    gap:30px;
  }


  .testimonials-intro-copy{
    max-width:760px;
  }


  .testimonial-entry{
    grid-template-columns:
      68px
      minmax(0,1fr);

    gap:22px;
  }

}


@media (max-width:640px){

  .testimonials-hero{
    min-height:auto;
  }


  .testimonials-intro{
    padding:
      64px
      0
      48px;
  }


  .testimonials-directory{
    padding-bottom:78px;
  }


  .testimonial-entry{
    display:block;

    padding:
      44px
      4px;
  }


  .testimonial-entry-mark{
    height:58px;

    margin-bottom:14px;

    font-size:96px;
  }


  .testimonial-entry blockquote p{
    font-size:
      clamp(19px,5vw,23px);

    line-height:1.6;
  }


  .testimonial-entry-source{
    margin-top:28px;
  }

}



/* ============================================================
   ABOUT CALIISM
   ============================================================ */

.about-page{
  position:relative;
  color:#fff;
  background:#04080c;
}


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

.about-page .about-hero{
  min-height:700px;
}


/* ============================================================
   ABOUT THE COMPANY
   ============================================================ */

.about-company{
  position:relative;

  padding:
    clamp(82px,8vw,126px)
    0
    clamp(86px,8vw,126px);

  overflow:hidden;

  background:
    radial-gradient(
      circle at 82% 28%,
      rgba(38,173,225,.075),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #07131d 0%,
      #04080c 100%
    );
}


/* Subtle top transition */

.about-company::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:
    clamp(180px,28vw,480px);

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(110,214,255,.70),
      rgba(110,214,255,.16) 55%,
      transparent
    );

  box-shadow:
    0 0 18px rgba(110,214,255,.12);

  pointer-events:none;
}


.about-company-grid{
  display:grid;

  grid-template-columns:
    minmax(300px,.70fr)
    minmax(0,1.30fr);

  gap:
    clamp(60px,8vw,130px);

  align-items:start;
}


/* ------------------------------------------------------------
   Company heading
   ------------------------------------------------------------ */

.about-company-heading{
  position:relative;
}


.about-company-heading .section-eyebrow{
  margin-bottom:18px;
}


.about-company-heading h2{
  max-width:520px;

  margin:0;

  color:#fff;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:
    clamp(42px,4.2vw,64px);

  font-weight:600;

  line-height:.98;

  letter-spacing:-.035em;
}


.about-company-heading h2 span{
  display:block;

  color:#6ED6FF;
}


/* ------------------------------------------------------------
   Company narrative
   ------------------------------------------------------------ */

.about-company-copy{
  position:relative;

  max-width:800px;

  padding-left:
    clamp(30px,4vw,58px);

  border-left:
    1px solid rgba(110,214,255,.13);
}


.about-company-copy::before{
  content:"";

  position:absolute;

  left:-1px;
  top:0;

  width:1px;
  height:120px;

  background:
    linear-gradient(
      180deg,
      rgba(110,214,255,.72),
      rgba(38,173,225,.24),
      transparent
    );

  box-shadow:
    0 0 16px rgba(110,214,255,.12);
}


.about-company-copy p{
  margin:
    0
    0
    24px;

  color:
    rgba(231,241,247,.88);

  font-size:
    clamp(16px,1.2vw,18px);

  line-height:1.82;
}

.about-company-copy p:first-child{
  color:#F2F8FB;

  font-size:
    clamp(18px,1.55vw,22px);

  line-height:1.72;
}


.about-company-copy p:last-child{
  margin-bottom:0;
}


/* ============================================================
   LEADERSHIP INTRODUCTION
   ============================================================ */

.about-leadership{
  position:relative;

  padding:
    clamp(82px,8vw,124px)
    0
    0;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #04080c 0%,
      #061019 45%,
      #04080c 100%
    );
}


.about-leadership-intro{
  max-width:900px;

  margin-bottom:
    clamp(64px,7vw,104px);
}


.about-leadership-intro .section-eyebrow{
  margin-bottom:18px;
}


.about-leadership-intro h2{
  max-width:800px;

  margin:
    0
    0
    22px;

  color:#fff;

  font-family:
    "Rajdhani",
    sans-serif;

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

  font-weight:600;

  line-height:1;

  letter-spacing:-.035em;
}


.about-leadership-intro h2 span{
  color:#6ED6FF;
}


.about-leadership-intro p{
  max-width:720px;

  margin:0;

  color:
    rgba(231,241,247,.86);

  font-size:
    clamp(16px,1.2vw,18px);

  line-height:1.75;
}


/* ============================================================
   LEADERSHIP PROFILES
   ============================================================ */

.leadership-list{
  position:relative;
}


/* ------------------------------------------------------------
   Individual profile
   ------------------------------------------------------------ */

.leadership-profile{
  position:relative;

  display:grid;

  grid-template-columns:
    minmax(320px,.82fr)
    minmax(0,1.18fr);

  gap:
    clamp(56px,7vw,118px);

  align-items:center;

  padding:
    clamp(74px,8vw,124px)
    0;

  border-top:
    1px solid rgba(110,214,255,.09);
}


/* Alternate image/text positions */

.leadership-profile:nth-child(even){
  grid-template-columns:
    minmax(0,1.18fr)
    minmax(320px,.82fr);
}


.leadership-profile:nth-child(even)
.leadership-profile__media{
  grid-column:2;
  grid-row:1;
}


.leadership-profile:nth-child(even)
.leadership-profile__content{
  grid-column:1;
  grid-row:1;
}


/* ============================================================
   PROFILE IMAGE
   ============================================================ */

.leadership-profile__media{
  position:relative;

  min-width:0;
}


.leadership-profile__image{
  position:relative;

  aspect-ratio:
    4 / 5;

  max-height:620px;

  overflow:hidden;

  background:#08131c;
}


/* Technical atmosphere behind portrait */

.leadership-profile__image::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:1;

  background:
    linear-gradient(
      180deg,
      transparent 58%,
      rgba(4,8,12,.32) 78%,
      rgba(4,8,12,.68) 100%
    );

  pointer-events:none;
}


.leadership-profile__image::after{
  content:"";

  position:absolute;

  left:0;
  bottom:0;

  z-index:2;

  width:
    clamp(110px,12vw,210px);

  height:2px;

  background:
    linear-gradient(
      90deg,
      #6ED6FF,
      rgba(38,173,225,.28),
      transparent
    );

  box-shadow:
    0 0 16px rgba(110,214,255,.16);

  pointer-events:none;
}


.leadership-profile__image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;

  transition:
    transform .65s ease;
}


.leadership-profile:hover
.leadership-profile__image img{
  transform:
    scale(1.018);
}


/* ------------------------------------------------------------
   Portrait number
   ------------------------------------------------------------ */

.leadership-profile__number{
  position:absolute;

  right:-12px;
  bottom:22px;

  z-index:3;

  color:
    rgba(255,255,255,.10);

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:
    clamp(68px,7vw,108px);

  font-weight:700;

  line-height:.8;

  letter-spacing:-.05em;

  pointer-events:none;
}


/* ============================================================
   PROFILE CONTENT
   ============================================================ */

.leadership-profile__content{
  min-width:0;

  max-width:790px;
}


/* ------------------------------------------------------------
   Name
   ------------------------------------------------------------ */

.leadership-profile__name{
  margin:
    0
    0
    5px;

  color:#fff;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:
    clamp(38px,3.7vw,58px);

  font-weight:600;

  line-height:1;

  letter-spacing:-.03em;
}


/* ------------------------------------------------------------
   Position
   ------------------------------------------------------------ */

.leadership-profile__title{
  margin-bottom:
    clamp(28px,3vw,40px);

  color:#8EC843;

  font-family:
    "Rajdhani",
    sans-serif;

  font-size:
    clamp(17px,1.5vw,21px);

  font-weight:700;

  line-height:1.2;

  letter-spacing:.10em;

  text-transform:uppercase;
}


/* ------------------------------------------------------------
   Biography
   ------------------------------------------------------------ */

.leadership-profile__bio{
  position:relative;

  max-width:760px;
}


.leadership-profile__bio p{
  margin:
    0
    0
    22px;

  color:
    rgba(231,241,247,.86);

  font-size:
    clamp(15.5px,1.1vw,17px);

  line-height:1.80;
}


.leadership-profile__bio p:first-child{
  color:#F2F8FB;
}


.leadership-profile__bio p:last-child{
  margin-bottom:0;
}


/* ============================================================
   CTA
   ============================================================ */

.about-cta{
  position:relative;

  background:
    radial-gradient(
      circle at 78% 50%,
      rgba(38,173,225,.10),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(8,22,32,.96) 0%,
      rgba(5,14,21,.94) 48%,
      rgba(4,8,12,.96) 100%
    );

  border-top:
    1px solid rgba(110,214,255,.12);

  border-bottom:
    1px solid rgba(110,214,255,.08);
}


.about-cta::before{
  content:"";

  position:absolute;

  top:-1px;
  left:0;

  width:
    clamp(160px,24vw,420px);

  height:1px;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(110,214,255,.75),
      rgba(110,214,255,.18) 55%,
      transparent
    );

  box-shadow:
    0 0 18px rgba(110,214,255,.16);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:980px){

  .about-company-grid{
    grid-template-columns:1fr;

    gap:42px;
  }


  .about-company-heading h2{
    max-width:700px;
  }


  .about-company-copy{
    max-width:800px;

    padding:
      30px
      0
      0;

    border-left:0;

    border-top:
      1px solid rgba(110,214,255,.13);
  }


  .about-company-copy::before{
    top:-1px;
    left:0;

    width:
      clamp(150px,35vw,320px);

    height:1px;

    background:
      linear-gradient(
        90deg,
        rgba(110,214,255,.72),
        rgba(38,173,225,.24),
        transparent
      );
  }


  .leadership-profile,
  .leadership-profile:nth-child(even){
    grid-template-columns:
      minmax(260px,.72fr)
      minmax(0,1.28fr);

    gap:
      clamp(36px,5vw,64px);
  }


  .leadership-profile:nth-child(even)
  .leadership-profile__media{
    grid-column:1;
    grid-row:1;
  }


  .leadership-profile:nth-child(even)
  .leadership-profile__content{
    grid-column:2;
    grid-row:1;
  }

}


@media (max-width:760px){

  .about-page .about-hero{
    min-height:auto;
  }


  .about-company{
    padding:
      68px
      0
      74px;
  }


  .about-leadership{
    padding-top:68px;
  }


  .about-leadership-intro{
    margin-bottom:42px;
  }


  .leadership-profile,
  .leadership-profile:nth-child(even){
    display:flex;

    flex-direction:column;

    gap:38px;

    align-items:stretch;

    padding:
      58px
      0;
  }


  .leadership-profile:nth-child(even)
  .leadership-profile__media,
  .leadership-profile:nth-child(even)
  .leadership-profile__content{
    grid-column:auto;
    grid-row:auto;
  }


  .leadership-profile__media{
    width:min(100%,520px);
  }


  .leadership-profile__image{
    max-height:none;
  }


  .leadership-profile__content{
    max-width:720px;
  }

}


@media (max-width:480px){

  .about-company-heading h2,
  .about-leadership-intro h2{
    font-size:
      clamp(36px,11vw,46px);
  }


  .leadership-profile__name{
    font-size:
      clamp(36px,11vw,46px);
  }


  .leadership-profile__number{
    right:8px;
  }

}


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

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

  .leadership-profile__image img{
    transition:none;
  }


  .leadership-profile:hover
  .leadership-profile__image img{
    transform:none;
  }

}


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

.contact-section{
  position:relative;
  overflow:hidden;

  padding:
    clamp(82px,8vw,128px)
    0;

  background:
    radial-gradient(
      circle at 82% 38%,
      rgba(38,173,225,.08),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #071018 0%,
      #050c12 48%,
      #04080c 100%
    );

  border-top:1px solid rgba(110,214,255,.10);
}


/* subtle illuminated edge */

.contact-section::before{
  content:"";

  position:absolute;
  top:-1px;
  left:0;

  width:clamp(180px,28vw,460px);
  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(110,214,255,.72),
      rgba(110,214,255,.16) 58%,
      transparent
    );

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

  pointer-events:none;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.contact-panel{
  display:grid;

  grid-template-columns:
    minmax(0,.92fr)
    minmax(440px,1.08fr);

  gap:clamp(64px,8vw,120px);

  align-items:start;

  padding:0;

  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}


/* ============================================================
   LEFT SIDE
   ============================================================ */

.contact-copy{
  max-width:650px;
}


.contact-copy .eyebrow{
  display:block;

  margin-bottom:20px;

  color:#8EC843;

  font-size:12px;
  font-weight:700;
  line-height:1;

  letter-spacing:.15em;
  text-transform:uppercase;
}


.contact-copy .section-title{
  margin:0;

  max-width:620px;

  color:#fff;

  font-size:clamp(34px,3.2vw,50px);
  font-weight:500;
  line-height:1.06;

  letter-spacing:-.035em;
}


.contact-copy > p{
  margin:
    clamp(24px,2.4vw,32px)
    0
    0;

  max-width:610px;

  color:rgba(255,255,255,.66);

  font-size:16px;
  line-height:1.8;
}


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

.contact-info-grid{
  display:grid;

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

  gap:0;

  margin-top:clamp(38px,4vw,54px);

  border-top:1px solid rgba(110,214,255,.11);
}


.contact-info-card{
  padding:
    24px
    28px
    0
    0;

  background:none;
  border:0;
  border-radius:0;
}


.contact-info-card + .contact-info-card{
  padding-left:28px;

  border-left:1px solid rgba(110,214,255,.10);
}


.contact-info-card > span{
  display:block;

  margin-bottom:10px;

  color:#6ED6FF;

  font-size:11px;
  font-weight:700;
  line-height:1;

  letter-spacing:.14em;
  text-transform:uppercase;
}


.contact-info-card p{
  margin:0;

  color:rgba(255,255,255,.70);

  font-size:14px;
  line-height:1.7;
}


.contact-info-card a{
  color:rgba(255,255,255,.82);

  text-decoration:none;

  transition:color .2s ease;
}


.contact-info-card a:hover{
  color:#6ED6FF;
}


/* ============================================================
   FORM SIDE
   ============================================================ */

.contact-form-card{
  position:relative;

  padding:
    4px
    0
    4px
    clamp(42px,5vw,72px);

  text-align:left !important;

  background:none;
  border:0;
  border-left:1px solid rgba(110,214,255,.12);
  border-radius:0;
  box-shadow:none;
}


/* small illuminated portion of divider */

.contact-form-card::before{
  content:"";

  position:absolute;

  top:0;
  left:-1px;

  width:1px;
  height:120px;

  background:
    linear-gradient(
      180deg,
      #6ED6FF,
      rgba(110,214,255,.22),
      transparent
    );

  box-shadow:
    0 0 16px rgba(110,214,255,.16);
}


.contact-form-card > .eyebrow{
  display:block;

  margin-bottom:16px;

  color:#8EC843;

  font-size:12px;
  font-weight:700;
  line-height:1;

  letter-spacing:.15em;
  text-transform:uppercase;
}


.contact-form-card h3{
  margin:0;

  color:#fff;

  font-size:clamp(28px,2.4vw,38px);
  font-weight:500;
  line-height:1.08;

  letter-spacing:-.025em;
}


.contact-form-intro{
  margin:14px 0 0;

  max-width:520px;

  color:rgba(255,255,255,.58);

  font-size:14px;
  line-height:1.65;
}


/* ============================================================
   FORM GRID
   ============================================================ */

.contact-form-card form{
  display:grid;

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

  gap:18px;

  margin-top:32px;
}


.contact-form-card .field-full{
  grid-column:1 / -1;
}


/* ============================================================
   FLOATING FIELDS
   ============================================================ */

.contact-field{
  position:relative;
}


.contact-field input,
.contact-field textarea{
  display:block;

  width:100%;

  margin:0;

  padding:
    24px
    16px
    10px;

  color:#fff;

  font:inherit;
  font-size:15px;
  line-height:1.4;

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

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

  border-radius:3px;

  outline:none;

  box-shadow:none;

  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}


.contact-field input{
  height:58px;
}


.contact-field textarea{
  min-height:150px;

  padding-top:27px;

  resize:vertical;
}


/* floating label */

.contact-field label{
  position:absolute;

  top:18px;
  left:16px;

  margin:0;

  color:rgba(255,255,255,.46);

  font-size:14px;
  font-weight:500;
  line-height:1;

  pointer-events:none;

  transform-origin:left top;

  transition:
    top .18s ease,
    color .18s ease,
    font-size .18s ease,
    letter-spacing .18s ease;
}


/* active / populated */

.contact-field input:focus + label,
.contact-field input:not(:placeholder-shown) + label,
.contact-field textarea:focus + label,
.contact-field textarea:not(:placeholder-shown) + label{
  top:9px;

  color:#6ED6FF;

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

  letter-spacing:.08em;
  text-transform:uppercase;
}


/* field focus */

.contact-field input:focus,
.contact-field textarea:focus{
  border-color:rgba(110,214,255,.52);

  background:
    rgba(110,214,255,.045);

  box-shadow:
    0 0 0 1px rgba(110,214,255,.05),
    0 0 22px rgba(38,173,225,.05);
}


/* browser autofill */

.contact-field input:-webkit-autofill,
.contact-field input:-webkit-autofill:hover,
.contact-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;

  box-shadow:
    0 0 0 1000px #09131b inset;

  transition:
    background-color 9999s ease-in-out 0s;
}


/* ============================================================
   MESSAGE FIELD
   ============================================================ */

.contact-field--message{
  padding-bottom:26px;
}


.contact-field__hint{
  position:absolute;

  left:1px;
  bottom:0;

  color:rgba(255,255,255,.38);

  font-size:11px;
  line-height:1.4;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.contact-form-actions{
  display:flex;

  align-items:center;

  gap:22px;

  margin-top:4px;
}


.contact-form-actions .btn{
  flex:0 0 auto;
}


.contact-form-note{
  max-width:260px;

  color:rgba(255,255,255,.38);

  font-size:11px;
  line-height:1.5;
}


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

@media (max-width:980px){

  .contact-panel{
    grid-template-columns:1fr;

    gap:56px;
  }


  .contact-copy{
    max-width:760px;
  }


  .contact-form-card{
    padding:
      42px
      0
      0;

    border-left:0;
    border-top:
      1px solid rgba(110,214,255,.12);
  }


  .contact-form-card::before{
    top:-1px;
    left:0;

    width:180px;
    height:1px;

    background:
      linear-gradient(
        90deg,
        #6ED6FF,
        rgba(110,214,255,.20),
        transparent
      );
  }

}


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

@media (max-width:640px){

  .contact-section{
    padding:
      72px
      0;
  }


  .contact-info-grid{
    grid-template-columns:1fr;
  }


  .contact-info-card{
    padding:
      22px
      0;
  }


  .contact-info-card + .contact-info-card{
    padding-left:0;

    border-left:0;
    border-top:
      1px solid rgba(110,214,255,.08);
  }


  .contact-form-card form{
    grid-template-columns:1fr;

    gap:14px;
  }


  .contact-form-card .field-full{
    grid-column:auto;
  }


  .contact-form-actions{
    align-items:flex-start;
    flex-direction:column;

    gap:16px;
  }


  .contact-form-note{
    max-width:none;
  }

}

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

.modal-overlay{
  position:fixed;
  inset:0;

  z-index:9999;

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

  padding:28px;

  background:
    rgba(2,6,10,.82);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  opacity:0;
  visibility:hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}


.modal-overlay.active{
  opacity:1;
  visibility:visible;
}

.modal-overlay.active .modal-box{
  transform:
    translateY(0)
    scale(1);
}

/* ============================================================
   MODAL PANEL
   ============================================================ */

.modal-box{
  position:relative;

  width:min(760px,100%);
  max-height:calc(100vh - 56px);

  overflow-y:auto;

  padding:
    clamp(42px,5vw,62px)
    clamp(34px,5vw,60px)
    clamp(38px,5vw,54px);

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(38,173,225,.10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #09151e 0%,
      #071018 48%,
      #050b10 100%
    );

  border:
    1px solid rgba(110,214,255,.15);

  border-radius:4px;

  box-shadow:
    0 30px 90px rgba(0,0,0,.58),
    0 0 60px rgba(38,173,225,.04);

  transform:translateY(12px) scale(.985);

  transition:
    transform .25s ease;
}



/* blue illuminated top edge */

.modal-box::before{
  content:"";

  position:absolute;
  top:-1px;
  left:-1px;

  width:clamp(180px,42%,320px);
  height:1px;

  background:
    linear-gradient(
      90deg,
      #6ED6FF,
      rgba(110,214,255,.24) 58%,
      transparent
    );

  box-shadow:
    0 0 18px rgba(110,214,255,.18);

  pointer-events:none;
}


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.modal-close{
  position:absolute;

  top:18px;
  right:20px;

  display:grid;
  place-items:center;

  width:38px;
  height:38px;

  padding:0;

  color:rgba(255,255,255,.52);

  font-family:Arial,sans-serif;
  font-size:27px;
  font-weight:300;
  line-height:1;

  background:transparent;

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

  border-radius:2px;

  cursor:pointer;

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}


.modal-close:hover{
  color:#fff;

  border-color:
    rgba(110,214,255,.30);

  background:
    rgba(110,214,255,.05);
}


/* ============================================================
   HEADING
   ============================================================ */

.modal-heading{
  max-width:620px;

  padding-right:46px;
}


.modal-heading .eyebrow{
  display:block;

  margin-bottom:16px;

  color:#8EC843;

  font-size:12px;
  font-weight:700;
  line-height:1;

  letter-spacing:.15em;
  text-transform:uppercase;
}


.modal-heading h2{
  margin:0;

  color:#fff;

  font-size:
    clamp(30px,4vw,44px);

  font-weight:500;
  line-height:1.05;

  letter-spacing:-.035em;
}


.modal-heading p{
  margin:
    18px
    0
    0;

  max-width:560px;

  color:
    rgba(255,255,255,.62);

  font-size:15px;
  line-height:1.7;
}


/* ============================================================
   FORM
   ============================================================ */

.modal-form{
  display:grid;

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

  gap:16px;

  margin-top:34px;
}


.modal-form .field-full{
  grid-column:1 / -1;
}


/* ============================================================
   FLOATING LABEL FIELDS
   ============================================================ */

.modal-field{
  position:relative;
}


.modal-field input,
.modal-field textarea{
  display:block;

  width:100%;

  margin:0;

  padding:
    24px
    16px
    10px;

  color:#fff;

  font:inherit;
  font-size:15px;
  line-height:1.4;

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

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

  border-radius:3px;

  outline:none;

  box-shadow:none;

  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}


.modal-field input{
  height:58px;
}


.modal-field textarea{
  min-height:138px;

  padding-top:27px;

  resize:vertical;
}


/* label */

.modal-field label{
  position:absolute;

  top:18px;
  left:16px;

  margin:0;

  color:
    rgba(255,255,255,.46);

  font-size:14px;
  font-weight:500;
  line-height:1;

  pointer-events:none;

  transform-origin:left top;

  transition:
    top .18s ease,
    color .18s ease,
    font-size .18s ease,
    letter-spacing .18s ease;
}


/* floating state */

.modal-field input:focus + label,
.modal-field input:not(:placeholder-shown) + label,
.modal-field textarea:focus + label,
.modal-field textarea:not(:placeholder-shown) + label{
  top:9px;

  color:#6ED6FF;

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

  letter-spacing:.08em;
  text-transform:uppercase;
}


/* focus */

.modal-field input:focus,
.modal-field textarea:focus{
  border-color:
    rgba(110,214,255,.52);

  background:
    rgba(110,214,255,.045);

  box-shadow:
    0 0 0 1px rgba(110,214,255,.05),
    0 0 22px rgba(38,173,225,.05);
}


/* autofill */

.modal-field input:-webkit-autofill,
.modal-field input:-webkit-autofill:hover,
.modal-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;

  box-shadow:
    0 0 0 1000px #09131b inset;

  transition:
    background-color 9999s ease-in-out 0s;
}


/* ============================================================
   MESSAGE
   ============================================================ */

.modal-field--message{
  padding-bottom:26px;
}


.modal-field__hint{
  position:absolute;

  left:1px;
  bottom:0;

  color:
    rgba(255,255,255,.36);

  font-size:11px;
  line-height:1.4;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.modal-actions{
  display:flex;

  align-items:center;

  gap:22px;

  margin-top:6px;
}


.modal-form-note{
  max-width:270px;

  color:
    rgba(255,255,255,.38);

  font-size:11px;
  line-height:1.5;
}


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

@media (max-width:640px){

  .modal-overlay{
    align-items:flex-start;

    padding:14px;
  }


  .modal-box{
    max-height:
      calc(100vh - 28px);

    padding:
      46px
      22px
      30px;
  }


  .modal-heading{
    padding-right:30px;
  }


  .modal-form{
    grid-template-columns:1fr;

    gap:14px;

    margin-top:28px;
  }


  .modal-form .field-full{
    grid-column:auto;
  }


  .modal-actions{
    align-items:flex-start;
    flex-direction:column;

    gap:15px;
  }


  .modal-form-note{
    max-width:none;
  }

}



/* ============================================================
   NAV DROPDOWN FINAL OVERRIDE
   ============================================================ */

.nav-dropdown a,
.nav-dropdown a:hover,
.nav-dropdown a:focus,
.nav-dropdown a:focus-visible{
  border-radius: 8px !important;
}

.nav-dropdown a:hover{
  color: #c8f08a;
  background: rgba(255,255,255,0.07);
}

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

.modal-overlay{
  position:fixed;
  inset:0;
  z-index:9999;

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

  padding:28px;

  background:rgba(2,6,10,.84);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  opacity:0;
  visibility:hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}


.modal-overlay.active{
  opacity:1;
  visibility:visible;
}


/* ============================================================
   MODAL PANEL
   ============================================================ */

.modal-box--contact{
  position:relative;

  width:min(1080px,100%);
  max-height:calc(100vh - 56px);

  overflow-y:auto;

  padding:0;

  background:

    /* bright blue atmosphere — upper left */
    radial-gradient(
      ellipse at 8% 12%,
      rgba(38,173,225,.24) 0%,
      rgba(38,173,225,.13) 24%,
      rgba(38,173,225,.045) 46%,
      transparent 68%
    ),

    /* softer cyan light — center/right */
    radial-gradient(
      ellipse at 78% 38%,
      rgba(110,214,255,.15) 0%,
      rgba(38,173,225,.075) 30%,
      transparent 62%
    ),

    /* subtle lower atmosphere */
    radial-gradient(
      ellipse at 42% 100%,
      rgba(15,117,186,.12) 0%,
      transparent 58%
    ),

    /* base */
    linear-gradient(
      135deg,
      #0b1d29 0%,
      #081721 42%,
      #061019 72%,
      #050b10 100%
    );

  border:
    1px solid rgba(110,214,255,.18);

  border-radius:3px;

  box-shadow:
    0 30px 90px rgba(0,0,0,.58),
    0 0 80px rgba(38,173,225,.07);

  transform:
    translateY(12px)
    scale(.985);

  transition:
    transform .25s ease;
}

.modal-overlay.active .modal-box--contact{
  transform:
    translateY(0)
    scale(1);
}


/* illuminated top edge */

.modal-box--contact::before{
  content:"";

  position:absolute;
  top:-1px;
  left:-1px;

  width:38%;
  height:1px;

  background:
    linear-gradient(
      90deg,
      #6ED6FF,
      rgba(110,214,255,.24) 58%,
      transparent
    );

  box-shadow:
    0 0 18px rgba(110,214,255,.18);

  pointer-events:none;
}


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.modal-close{
  position:absolute;
  top:18px;
  right:18px;

  z-index:5;

  display:grid;
  place-items:center;

  width:38px;
  height:38px;

  padding:0;

  color:rgba(255,255,255,.52);

  font-family:Arial,sans-serif;
  font-size:27px;
  font-weight:300;
  line-height:1;

  background:rgba(4,8,12,.36);

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

  cursor:pointer;

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}


.modal-close:hover{
  color:#fff;

  border-color:rgba(110,214,255,.30);

  background:rgba(110,214,255,.06);
}


/* ============================================================
   TWO COLUMN LAYOUT
   ============================================================ */

.modal-contact-grid{
  display:grid;

  grid-template-columns:
    minmax(0,.88fr)
    minmax(0,1.12fr);
}


/* ============================================================
   LEFT SIDE
   ============================================================ */

.modal-contact-info{
  position:relative;

  padding:
    clamp(46px,5vw,68px)
    clamp(36px,4.5vw,58px);

  background:
    radial-gradient(
      ellipse at 10% 18%,
      rgba(110,214,255,.10),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      rgba(18,47,65,.50) 0%,
      rgba(8,25,36,.32) 55%,
      rgba(5,15,23,.20) 100%
    );

  border-right:
    1px solid rgba(110,214,255,.14);
}

.modal-contact-info > .eyebrow{
  display:block;

  margin-bottom:18px;

  color:#8EC843;

  font-size:11px;
  font-weight:700;
  line-height:1;

  letter-spacing:.16em;
  text-transform:uppercase;
}


.modal-contact-info h2{
  margin:0;

  max-width:430px;

  color:#fff;

  font-size:
    clamp(30px,3.2vw,43px);

  font-weight:500;
  line-height:1.05;

  letter-spacing:-.035em;
}


.modal-contact-intro{
  margin:22px 0 0;

  max-width:450px;

  color:rgba(255,255,255,.62);

  font-size:14px;
  line-height:1.75;
}


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

.modal-contact-details{
  margin-top:38px;

  border-top:
    1px solid rgba(110,214,255,.11);
}


.modal-contact-detail{
  display:grid;

  grid-template-columns:
    34px
    minmax(0,1fr);

  gap:15px;

  align-items:start;

  padding:20px 0;

  color:inherit;
  text-decoration:none;

  border-bottom:
    1px solid rgba(110,214,255,.08);

  transition:
    background .2s ease;
}


a.modal-contact-detail:hover
.modal-contact-detail__icon{
  color:#fff;

  border-color:
    rgba(110,214,255,.38);

  background:
    rgba(110,214,255,.08);
}


a.modal-contact-detail:hover strong{
  color:#6ED6FF;
}


.modal-contact-detail__icon{
  display:grid;
  place-items:center;

  width:32px;
  height:32px;

  color:#6ED6FF;

  font-size:12px;

  border:
    1px solid rgba(110,214,255,.17);

  border-radius:2px;

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
}


.modal-contact-detail__label{
  display:block;

  margin-bottom:5px;

  color:rgba(255,255,255,.40);

  font-size:10px;
  font-weight:700;
  line-height:1;

  letter-spacing:.12em;
  text-transform:uppercase;
}


.modal-contact-detail strong,
.modal-contact-detail address{
  display:block;

  margin:0;

  color:rgba(255,255,255,.84);

  font-size:14px;
  font-style:normal;
  font-weight:500;
  line-height:1.55;

  transition:
    color .2s ease;
}


/* ============================================================
   LOCATION NOTE
   ============================================================ */

.modal-contact-location{
  margin-top:28px;
}


.modal-contact-location > span{
  display:block;

  margin-bottom:8px;

  color:#6ED6FF;

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

  letter-spacing:.13em;
  text-transform:uppercase;
}


.modal-contact-location p{
  margin:0;

  max-width:410px;

  color:rgba(255,255,255,.42);

  font-size:12px;
  line-height:1.65;
}


/* ============================================================
   RIGHT SIDE / FORM
   ============================================================ */

.modal-contact-form{
  padding:
    clamp(46px,5vw,68px)
    clamp(36px,4.5vw,58px);
}


.modal-form-heading{
  padding-right:40px;
}


.modal-form-heading__eyebrow{
  display:block;

  margin-bottom:14px;

  color:#6ED6FF;

  font-size:10px;
  font-weight:700;
  line-height:1;

  letter-spacing:.15em;
  text-transform:uppercase;
}


.modal-form-heading h3{
  margin:0;

  color:#fff;

  font-size:
    clamp(27px,2.6vw,36px);

  font-weight:500;
  line-height:1.08;

  letter-spacing:-.025em;
}


.modal-form-heading p{
  margin:12px 0 0;

  max-width:470px;

  color:rgba(255,255,255,.52);

  font-size:13px;
  line-height:1.65;
}


.modal-contact-form .modal-form{
  margin-top:30px;
}


/* ============================================================
   MODAL SERVICE SELECT
   ============================================================ */

.modal-field--select{
  position:relative;
}


.modal-field--select select{
  display:block;

  width:100%;
  height:58px;

  margin:0;

  padding:
    22px
    48px
    8px
    16px;

  color:rgba(255,255,255,.88);

  font:inherit;
  font-size:15px;
  line-height:1.4;

  appearance:none;
  -webkit-appearance:none;

  color-scheme:dark;

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

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

  border-radius:3px;

  outline:none;

  cursor:pointer;

  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}


/* floating label */

.modal-field--select label{
  position:absolute;

  top:9px;
  left:16px;

  margin:0;

  color:#6ED6FF;

  font-size:10px;
  font-weight:700;
  line-height:1;

  letter-spacing:.08em;
  text-transform:uppercase;

  pointer-events:none;
}


/* arrow */

.modal-field__select-icon{
  position:absolute;

  top:50%;
  right:17px;

  color:rgba(110,214,255,.68);

  font-size:11px;

  pointer-events:none;

  transform:translateY(-50%);

  transition:
    color .2s ease,
    transform .2s ease;
}


.modal-field--select:focus-within
.modal-field__select-icon{
  color:#6ED6FF;

  transform:
    translateY(-50%)
    rotate(180deg);
}


/* focus */

.modal-field--select select:focus{
  border-color:
    rgba(110,214,255,.52);

  background:
    rgba(110,214,255,.045);

  box-shadow:
    0 0 0 1px rgba(110,214,255,.05),
    0 0 22px rgba(38,173,225,.05);
}


/* native option menu */

.modal-field--select select option{
  color:#fff;
  background:#09131b;
}


/* disabled placeholder */

.modal-field--select select option:disabled{
  color:rgba(255,255,255,.42);
}


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

@media (max-width:900px){

  .modal-overlay{
    align-items:flex-start;
  }


  .modal-contact-grid{
    grid-template-columns:1fr;
  }


  .modal-contact-info{
    border-right:0;

    border-bottom:
      1px solid rgba(110,214,255,.11);
  }


  .modal-contact-details{
    display:grid;

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

    gap:20px;
  }


  .modal-contact-detail{
    display:block;

    border-bottom:0;
  }


  .modal-contact-detail__icon{
    margin-bottom:13px;
  }

}


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

@media (max-width:640px){

  .modal-overlay{
    padding:12px;
  }


  .modal-box--contact{
    max-height:
      calc(100vh - 24px);
  }


  .modal-contact-info,
  .modal-contact-form{
    padding:
      42px
      22px
      32px;
  }


  .modal-contact-details{
    display:block;
  }


  .modal-contact-detail{
    display:grid;

    grid-template-columns:
      34px
      minmax(0,1fr);

    border-bottom:
      1px solid rgba(110,214,255,.08);
  }


  .modal-contact-detail__icon{
    margin-bottom:0;
  }


  .modal-form-heading{
    padding-right:28px;
  }

}


/* ============================================================
   PAGE TRANSITION
   ============================================================ */

.page-transition{
  position:fixed;
  inset:0;

  z-index:999999;

  pointer-events:none;

  opacity:1;

  background:

    /* blue illumination */

    radial-gradient(
      ellipse at 72% 42%,
      rgba(110,214,255,.26) 0%,
      rgba(38,173,225,.14) 24%,
      rgba(15,117,186,.07) 44%,
      transparent 66%
    ),

    /* secondary atmosphere */

    radial-gradient(
      ellipse at 20% 72%,
      rgba(38,173,225,.10),
      transparent 54%
    ),

    /* dark base */

    linear-gradient(
      135deg,
      #081923 0%,
      #06131c 42%,
      #04080c 100%
    );

  visibility:visible;

  transition:
    opacity .38s ease,
    visibility .38s ease;
}


/* ------------------------------------------------------------
   Page has loaded
   ------------------------------------------------------------ */

.page-transition.is-ready{
  opacity:0;
  visibility:hidden;
}


/* ------------------------------------------------------------
   Leaving for another page
   ------------------------------------------------------------ */

.page-transition.is-ready.is-leaving{
  opacity:1;
  visibility:visible;
}


/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */

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

  .page-transition{
    transition:none;
  }

}


/* ============================================================
   EDITORIAL VISUAL OVERLAY TAG
   ============================================================ */

.editorial-visual{
  position:relative;
  overflow:hidden;
}


/* subtle atmosphere behind the centered label */

.editorial-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      transparent 48%,
      rgba(4,8,12,.08) 68%,
      rgba(4,8,12,.38) 100%
    );
}



.editorial-visual-tag{
  position:absolute;

  left:50%;
  bottom:28px;

  z-index:2;

  transform:translateX(-50%);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:max-content;
  max-width:calc(100% - 40px);

  padding:15px 26px 14px;

  color:rgba(255,255,255,.92);

  font-family:"Rajdhani",sans-serif;
  font-size:clamp(14px,1.15vw,18px);
  font-weight:500;
  line-height:1;
  letter-spacing:.065em;
  text-transform:uppercase;
  white-space:nowrap;

  padding:13px 22px 12px;

  background:
    linear-gradient(
      135deg,
      rgba(5,17,26,.62),
      rgba(8,31,44,.42)
    );

  border:1px solid rgba(110,214,255,.28);
  border-radius:2px;

  box-shadow:
    0 12px 34px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 28px rgba(38,173,225,.07);

  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);

  text-shadow:
    0 2px 12px rgba(0,0,0,.55);
}


/* Dark atmospheric treatment over reused service image */

.editorial-visual::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(4,8,12,.12) 0%,
      rgba(4,8,12,.22) 42%,
      rgba(5,24,37,.48) 72%,
      rgba(7,35,53,.72) 100%
    ),
    linear-gradient(
      0deg,
      rgba(4,8,12,.42) 0%,
      transparent 38%,
      rgba(4,8,12,.10) 100%
    );
}


/* Subtle Caliism green edge glow */

.editorial-visual::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:2;
  pointer-events:none;

  background:

    /* Top border: green at right, fades left */
    linear-gradient(
      270deg,
      rgba(142,200,67,.72) 0%,
      rgba(142,200,67,.38) 28%,
      rgba(110,214,255,.14) 62%,
      transparent 100%
    ) top right / 100% 1px no-repeat,

    /* Bottom border: green at right, fades left */
    linear-gradient(
      270deg,
      rgba(142,200,67,.72) 0%,
      rgba(142,200,67,.38) 28%,
      rgba(110,214,255,.14) 62%,
      transparent 100%
    ) bottom right / 100% 1px no-repeat,

    /* Right vertical green accent */
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(142,200,67,.18) 12%,
      rgba(142,200,67,.72) 50%,
      rgba(142,200,67,.18) 88%,
      transparent 100%
    ) right center / 1px 84% no-repeat;

  filter:
    drop-shadow(0 0 8px rgba(142,200,67,.14));
}


@media (max-width:640px){

  .editorial-visual-tag{
    bottom:18px;

    max-width:calc(100% - 30px);

    padding:13px 18px 12px;

    font-size:16px;
    letter-spacing:.055em;
  }

  .editorial-visual-tag::before,
  .editorial-visual-tag::after{
    flex-basis:14px;
    
  }

}

.caliism-data-rain{
  position:sticky;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:100vh;
  margin-bottom:-100vh;
  z-index:0;
  pointer-events:none;
  opacity:.90;
}


/* ============================================================
   RESPONSIVE LIFECYCLE HUB — FINAL OVERRIDE
   ============================================================ */

@media (max-width: 1050px){

  .lifecycle-center{
    position: relative !important;

    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;

    transform: none !important;
    animation: none !important;
  }

}

/* ============================================================
   MOBILE LIFECYCLE HUB GLOW
   ============================================================ */

@media (max-width: 700px){

  .lifecycle-center-glow{
    display:none !important;
  }

}

/* ============================================================
   CALIISM CENTER HUB — LAYERING
   ============================================================ */

.lifecycle-center{
  isolation: isolate;
}


/* Atmospheric glow behind hub content */

.lifecycle-center-glow{
  position: absolute;

  left: -80px;
  right: -80px;
  top: 20px;
  bottom: 20px;

  border-radius: 20px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(38,173,225,.10),
      rgba(142,200,67,.035) 42%,
      transparent 72%
    );

  filter: blur(18px);

  pointer-events: none;

  z-index: -1;
}