/* =========================================================
   DAWN WEBSITE
   COMPLETE HEADER + MENUS + HERO
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

  --navy:
    #071429;

  --navy-light:
    #102447;

  --text:
    #172033;

  --muted:
    #6c768b;

  --line:
    #e7eaf0;

  --purple:
    #7957ff;

  --cyan:
    #18c7e8;

  --pink:
    #ef4da8;

  --orange:
    #ff8a39;

  --green:
    #22c98b;

  --blue:
    #245dff;

  --blue-light:
    #43a2ff;

}


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

* {

  box-sizing:
    border-box;

}


html {

  scroll-behavior:
    smooth;

}


body {

  margin:
    0;

  overflow-x:
    hidden;

  font-family:
    Inter,
    Arial,
    sans-serif;

  color:
    var(--text);

  background:
    #ffffff;

}


body.menu-open {

  overflow:
    hidden;

}


a {

  color:
    inherit;

}


button {

  font-family:
    inherit;

}


/* =========================================================
   CONTAINER
========================================================= */

.nav-container {

  width:
    min(
      1740px,
      calc(
        100% - 72px
      )
    );

  margin:
    auto;

}


/* =========================================================
   HEADER
========================================================= */

.dawn-header {

  position:
    fixed;

  top:
    0;

  left:
    0;

  right:
    0;

  z-index:
    9999;

  height:
    92px;

  color:
    #ffffff;

  transition:
    height
    .35s
    ease,
    color
    .35s
    ease,
    background
    .35s
    ease,
    box-shadow
    .35s
    ease;

}


.dawn-header::after {

  content:
    "";

  position:
    absolute;

  left:
    3%;

  right:
    3%;

  bottom:
    0;

  height:
    1px;

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

}


/* =========================================================
   HEADER SCROLLED
========================================================= */

.dawn-header.scrolled {

  height:
    78px;

  color:
    var(--text);

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

  backdrop-filter:
    blur(24px)
    saturate(160%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(160%);

  border-bottom:
    1px solid
    rgba(
      16,
      24,
      40,
      .07
    );

  box-shadow:
    0
    14px
    45px
    rgba(
      15,
      23,
      42,
      .08
    );

}


.dawn-header.scrolled::after {

  opacity:
    0;

}


/* =========================================================
   HEADER GLOW
========================================================= */

.header-glow {

  position:
    absolute;

  pointer-events:
    none;

  border-radius:
    999px;

  opacity:
    .28;

  filter:
    blur(45px);

  transition:
    opacity
    .3s
    ease;

}


.header-glow-1 {

  width:
    220px;

  height:
    80px;

  left:
    12%;

  top:
    -55px;

  background:
    #4e73ff;

}


.header-glow-2 {

  width:
    180px;

  height:
    70px;

  right:
    14%;

  top:
    -50px;

  background:
    #2b8cff;

}


.dawn-header.scrolled
.header-glow {

  opacity:
    0;

}


/* =========================================================
   HEADER INNER
========================================================= */

.dawn-header
.nav-container {

  height:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

}


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

.dawn-logo {

  min-width:
    200px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  color:
    inherit;

  text-decoration:
    none;

}


.logo-symbol {

  position:
    relative;

  width:
    47px;

  height:
    47px;

  flex-shrink:
    0;

  transition:
    transform
    .35s
    ease;

}


.dawn-logo:hover
.logo-symbol {

  transform:
    scale(1.06)
    rotate(-2deg);

}


.logo-wing {

  position:
    absolute;

  top:
    4px;

  width:
    27px;

  height:
    39px;

  border-radius:
    70%
    20%
    70%
    30%;

}


.wing-left {

  left:
    3px;

  transform:
    rotate(-28deg);

  background:
    linear-gradient(
      145deg,
      #5fe4fa,
      #4664ff,
      #7849ff
    );

}


.wing-right {

  right:
    3px;

  transform:
    rotate(28deg)
    scaleX(-1);

  background:
    linear-gradient(
      145deg,
      #ff6aac,
      #7651ff,
      #26375e
    );

}


.logo-copy {

  display:
    flex;

  flex-direction:
    column;

}


.logo-copy strong {

  font-family:
    Manrope,
    sans-serif;

  font-size:
    29px;

  font-weight:
    800;

  letter-spacing:
    -.055em;

  line-height:
    1;

}


.logo-copy small {

  margin-top:
    5px;

  opacity:
    .62;

  font-size:
    6.7px;

  font-weight:
    700;

  letter-spacing:
    .14em;

}


/* =========================================================
   MAIN NAV
========================================================= */

.desktop-nav {

  flex:
    1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    30px;

}


.nav-item {

  position:
    relative;

}


.nav-link {

  height:
    78px;

  padding:
    0;

  border:
    0;

  outline:
    none;

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    inherit;

  background:
    transparent;

  font:
    inherit;

  font-size:
    14px;

  font-weight:
    700;

  white-space:
    nowrap;

  cursor:
    pointer;

  text-decoration:
    none;

}


/* =========================================================
   SINGLE BLUE UNDERLINE
========================================================= */

.nav-link::after {

  content:
    "";

  position:
    absolute;

  left:
    50%;

  right:
    50%;

  bottom:
    9px;

  height:
    3px;

  border-radius:
    999px;

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

  transition:
    .25s
    ease;

}


.nav-link:hover::after,
.has-dropdown:hover
.nav-link::after {

  left:
    0;

  right:
    0;

}


.nav-chevron {

  transition:
    transform
    .25s
    ease;

}


.has-dropdown:hover
.nav-chevron {

  transform:
    rotate(180deg);

}


/* =========================================================
   HEADER ACTION
========================================================= */

.header-actions {

  display:
    flex;

  align-items:
    center;

  flex-shrink:
    0;

}


/* =========================================================
   CONTACT US BUTTON
========================================================= */

.talk-btn {

  height:
    50px;

  min-width:
    155px;

  padding:
    0
    8px
    0
    21px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-radius:
    999px;

  color:
    #ffffff;

  text-decoration:
    none;

  background:
    linear-gradient(
      90deg,
      #6354ff,
      #397aff
    );

  box-shadow:
    0
    12px
    28px
    rgba(
      85,
      76,
      255,
      .28
    );

  overflow:
    hidden;

  position:
    relative;

  transition:
    .28s
    ease;

}


.talk-btn::before {

  content:
    "";

  position:
    absolute;

  width:
    80px;

  height:
    80px;

  left:
    -90px;

  top:
    -15px;

  border-radius:
    50%;

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

  transition:
    left
    .4s
    ease;

}


.talk-btn:hover::before {

  left:
    170px;

}


.talk-btn:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0
    18px
    38px
    rgba(
      75,
      72,
      245,
      .35
    );

}


.talk-btn span {

  position:
    relative;

  z-index:
    2;

  font-size:
    13px;

  font-weight:
    800;

}


.talk-btn i {

  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  position:
    relative;

  z-index:
    2;

  font-style:
    normal;

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

  transition:
    transform
    .28s
    ease;

}


.talk-btn:hover i {

  transform:
    rotate(45deg);

}


/* =========================================================
   FULL WIDTH MEGA MENU
========================================================= */

.mega-menu {

  position:
    fixed;

  top:
    82px;

  left:
    22px;

  right:
    22px;

  max-height:
    calc(
      100vh - 92px
    );

  overflow-y:
    auto;

  overflow-x:
    hidden;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(14px)
    scale(.988);

  transform-origin:
    top center;

  transition:
    opacity
    .22s
    ease,
    transform
    .28s
    ease,
    visibility
    .22s;

  scrollbar-width:
    thin;

  scrollbar-color:
    #c7cfdd
    transparent;

}


.mega-menu::-webkit-scrollbar {

  width:
    6px;

}


.mega-menu::-webkit-scrollbar-thumb {

  background:
    #c7cfdd;

  border-radius:
    999px;

}


.mega-menu::-webkit-scrollbar-track {

  background:
    transparent;

}


.dawn-header.scrolled
.mega-menu {

  top:
    78px;

  max-height:
    calc(
      100vh - 78px
    );

}


.has-dropdown:hover
.mega-menu {

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0)
    scale(1);

}


/* =========================================================
   MEGA MENU SHELL
========================================================= */

.mega-menu-inner {

  max-width:
    1740px;

  margin:
    auto;

  padding:
    30px
    38px
    28px;

  overflow:
    visible;

  position:
    relative;

  color:
    var(--text);

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

  border:
    1px solid
    rgba(
      16,
      24,
      40,
      .08
    );

  border-radius:
    0
    0
    24px
    24px;

  box-shadow:
    0
    40px
    90px
    rgba(
      14,
      24,
      49,
      .17
    );

}


/* blue border only */

.mega-menu-inner::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  top:
    0;

  height:
    3px;

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

}


.mega-menu-inner::after {

  content:
    "";

  position:
    absolute;

  width:
    420px;

  height:
    420px;

  right:
    -180px;

  top:
    -220px;

  border-radius:
    50%;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle,
      rgba(
        54,
        108,
        255,
        .10
      ),
      transparent
      70%
    );

}


/* =========================================================
   MEGA TOP
========================================================= */

.mega-top {

  position:
    relative;

  z-index:
    2;

  padding-bottom:
    24px;

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

}


/* Services does not have top-right CTA */

.services-mega-top {

  display:
    block;

}


/* Staff keeps CTA */

.staff-mega-top {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    40px;

}


.mega-heading {

  max-width:
    940px;

}


.staff-mega-top
.mega-heading {

  max-width:
    860px;

}


.mega-eyebrow {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  color:
    #6e788b;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    .16em;

}


.mega-eyebrow span {

  width:
    36px;

  height:
    2px;

  border-radius:
    999px;

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

}


.mega-heading h2 {

  margin:
    12px
    0
    7px;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    31px;

  line-height:
    1.15;

  letter-spacing:
    -.035em;

}


.mega-heading h2 em {

  color:
    #465cff;

  font-style:
    normal;

}


.mega-heading p {

  max-width:
    820px;

  margin:
    0;

  color:
    #748095;

  font-size:
    14px;

  line-height:
    1.55;

}


/* =========================================================
   STAFF TOP CTA
========================================================= */

.mega-all-link {

  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    8px
    8px
    8px
    18px;

  border:
    1px solid
    #dce2eb;

  border-radius:
    999px;

  color:
    #283347;

  text-decoration:
    none;

  background:
    #ffffff;

  font-size:
    12px;

  font-weight:
    800;

  white-space:
    nowrap;

  transition:
    .25s
    ease;

}


.mega-all-link i {

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    #ffffff;

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

  font-style:
    normal;

  transition:
    transform
    .25s
    ease;

}


.mega-all-link:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0
    12px
    28px
    rgba(
      35,
      49,
      92,
      .10
    );

}


.mega-all-link:hover i {

  transform:
    rotate(45deg);

}


/* =========================================================
   SERVICES GRID
========================================================= */

.mega-services-grid {

  position:
    relative;

  z-index:
    2;

  display:
    grid;

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

  gap:
    18px;

  padding:
    26px
    0
    0;

}


/* =========================================================
   SERVICE CARDS
========================================================= */

.mega-service-column {

  min-height:
    390px;

  padding:
    23px;

  border-radius:
    20px;

  border:
    1px solid
    #e5e9f0;

  background:
    #ffffff;

  position:
    relative;

  overflow:
    hidden;

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

}


.mega-service-column:hover {

  transform:
    translateY(-5px);

  border-color:
    #7da9ff;

  box-shadow:
    0
    18px
    42px
    rgba(
      25,
      37,
      70,
      .09
    );

}


/* individual card colors */

.service-ai {

  --accent:
    #7957ff;

}


.service-data {

  --accent:
    #ff8d41;

}


.service-digital {

  --accent:
    #e8489b;

}


.service-cloud {

  --accent:
    #13bfe1;

}


.service-app {

  --accent:
    #21bf87;

}


/* =========================================================
   SERVICE CARD HEADER
========================================================= */

.service-column-head {

  display:
    flex;

  gap:
    14px;

  align-items:
    center;

  padding-bottom:
    18px;

  border-bottom:
    1px solid
    #edf0f4;

}


.service-column-icon {

  width:
    50px;

  height:
    50px;

  flex-shrink:
    0;

  display:
    grid;

  place-items:
    center;

  border-radius:
    14px;

  color:
    var(--accent);

  background:
    color-mix(
      in srgb,
      var(--accent)
      10%,
      white
    );

  font-size:
    19px;

}


.service-column-head span {

  display:
    block;

  color:
    #99a2b1;

  font-size:
    9px;

  font-weight:
    800;

}


.service-column-head h3 {

  margin:
    5px
    0
    0;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    17px;

  line-height:
    1.2;

}


/* =========================================================
   SERVICE LINKS
========================================================= */

.mega-links {

  margin-top:
    15px;

}


.mega-links a {

  min-height:
    46px;

  padding:
    10px
    2px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  border-bottom:
    1px solid
    #eef1f5;

  color:
    #626e82;

  text-decoration:
    none;

  font-size:
    13px;

  line-height:
    1.35;

  transition:
    color
    .2s
    ease,
    padding
    .2s
    ease;

}


.mega-links a span {

  opacity:
    0;

  flex-shrink:
    0;

  color:
    var(--blue);

  transform:
    translateX(-5px);

  transition:
    .2s
    ease;

}


.mega-links a:hover {

  padding-left:
    6px;

  color:
    var(--blue);

}


.mega-links a:hover span {

  opacity:
    1;

  transform:
    none;

}


/* =========================================================
   STAFF GRID
========================================================= */

.staff-grid {

  position:
    relative;

  z-index:
    2;

  display:
    grid;

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

  gap:
    18px;

  padding:
    26px
    0
    0;

}


/* =========================================================
   STAFF CARD
========================================================= */

.staff-group {

  min-height:
    390px;

  padding:
    23px;

  border-radius:
    20px;

  border:
    1px solid
    #e5e9f0;

  background:
    #ffffff;

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

}


.staff-group:hover {

  transform:
    translateY(-5px);

  border-color:
    #7da9ff;

  box-shadow:
    0
    18px
    42px
    rgba(
      25,
      37,
      70,
      .09
    );

}


.group-purple {

  --staff-accent:
    #7657ff;

}


.group-pink {

  --staff-accent:
    #e94e9c;

}


.group-orange {

  --staff-accent:
    #f2853e;

}


.group-cyan {

  --staff-accent:
    #15bbdc;

}


.group-green {

  --staff-accent:
    #1abb82;

}


/* =========================================================
   STAFF HEADER
========================================================= */

.staff-group-head {

  min-height:
    76px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding-bottom:
    18px;

  border-bottom:
    1px solid
    #edf0f4;

}


.staff-icon {

  width:
    50px;

  height:
    50px;

  flex-shrink:
    0;

  display:
    grid;

  place-items:
    center;

  border-radius:
    14px;

  color:
    var(--staff-accent);

  background:
    color-mix(
      in srgb,
      var(--staff-accent)
      10%,
      white
    );

  font-size:
    19px;

}


.staff-group-head span {

  color:
    #939dad;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .10em;

}


.staff-group-head h3 {

  margin:
    5px
    0
    0;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    16px;

  line-height:
    1.22;

}


/* =========================================================
   STAFF LINKS
========================================================= */

.staff-links {

  margin-top:
    15px;

}


.staff-links a {

  min-height:
    45px;

  padding:
    10px
    2px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  border-bottom:
    1px solid
    #eef1f5;

  color:
    #626e82;

  text-decoration:
    none;

  font-size:
    12.5px;

  line-height:
    1.35;

  transition:
    color
    .2s
    ease,
    padding
    .2s
    ease;

}


.staff-links a span {

  opacity:
    0;

  flex-shrink:
    0;

  color:
    var(--blue);

  transform:
    translateX(-5px);

  transition:
    .2s
    ease;

}


.staff-links a:hover {

  padding-left:
    5px;

  color:
    var(--blue);

}


.staff-links a:hover span {

  opacity:
    1;

  transform:
    none;

}


/* =========================================================
   INDUSTRIES
========================================================= */

.small-mega {

  position:
    absolute;

  top:
    73px;

  left:
    50%;

  width:
    820px;

  padding:
    26px;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateX(-50%)
    translateY(14px);

  color:
    var(--text);

  border:
    1px solid
    #e2e6ed;

  border-top:
    3px solid
    var(--blue);

  border-radius:
    0
    0
    20px
    20px;

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

  box-shadow:
    0
    30px
    80px
    rgba(
      11,
      24,
      58,
      .17
    );

  transition:
    .25s
    ease;

}


.has-dropdown:hover
.small-mega {

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateX(-50%)
    translateY(0);

}


.small-menu-intro {

  padding-bottom:
    18px;

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

}


.small-menu-intro > span {

  color:
    var(--blue);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .13em;

}


.small-menu-intro h3 {

  margin:
    7px
    0
    5px;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    23px;

}


.small-menu-intro p {

  margin:
    0;

  color:
    #7a8496;

  font-size:
    12px;

  line-height:
    1.5;

}


.industry-menu-grid {

  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    5px
    10px;

  padding-top:
    15px;

}


.industry-menu-grid a {

  min-height:
    78px;

  padding:
    12px;

  display:
    grid;

  grid-template-columns:
    40px
    1fr
    20px;

  gap:
    11px;

  align-items:
    center;

  border-radius:
    12px;

  color:
    var(--text);

  text-decoration:
    none;

  transition:
    .2s
    ease;

}


.industry-menu-grid a:hover {

  background:
    #f5f8ff;

  transform:
    translateX(3px);

}


.industry-menu-grid i {

  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    11px;

  color:
    var(--blue);

  background:
    #edf3ff;

  font-style:
    normal;

}


.industry-menu-grid span {

  font-size:
    13px;

  font-weight:
    700;

}


.industry-menu-grid small {

  display:
    block;

  margin-top:
    5px;

  color:
    #8490a3;

  font-size:
    9.5px;

  font-weight:
    500;

}


.industry-menu-grid b {

  color:
    var(--blue);

}


/* =========================================================
   INSIGHTS / COMPANY
========================================================= */

.mini-dropdown {

  position:
    absolute;

  top:
    73px;

  left:
    50%;

  width:
    410px;

  padding:
    10px;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateX(-50%)
    translateY(12px);

  color:
    var(--text);

  border:
    1px solid
    #e2e6ed;

  border-top:
    3px solid
    var(--blue);

  border-radius:
    0
    0
    18px
    18px;

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

  box-shadow:
    0
    28px
    70px
    rgba(
      11,
      24,
      58,
      .16
    );

  transition:
    .22s
    ease;

}


.has-dropdown:hover
.mini-dropdown {

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateX(-50%)
    translateY(0);

}


.mini-dropdown > a {

  min-height:
    84px;

  display:
    grid;

  grid-template-columns:
    46px
    1fr
    20px;

  gap:
    12px;

  align-items:
    center;

  padding:
    12px;

  border-radius:
    13px;

  color:
    var(--text);

  text-decoration:
    none;

  transition:
    .2s
    ease;

}


.mini-dropdown > a:hover {

  background:
    #f5f8ff;

  transform:
    translateX(3px);

}


.mini-icon {

  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    13px;

  font-size:
    16px;

}


.mini-icon.purple {

  color:
    #7557f7;

  background:
    #eeeaff;

}


.mini-icon.orange {

  color:
    #f47c33;

  background:
    #fff0e7;

}


.mini-icon.cyan {

  color:
    #14badc;

  background:
    #e4f8fc;

}


.mini-icon.green {

  color:
    #18bc84;

  background:
    #e7f9f2;

}


.mini-dropdown strong {

  display:
    block;

  font-size:
    13px;

}


.mini-dropdown small {

  display:
    block;

  margin-top:
    5px;

  color:
    #8490a3;

  font-size:
    10px;

  line-height:
    1.4;

}


.mini-dropdown b {

  color:
    var(--blue);

}


/* =========================================================
   MENU TOGGLE
========================================================= */

.menu-toggle {

  display:
    none;

}


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

.hero-banner {

  min-height:
    760px;

  position:
    relative;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  color:
    #ffffff;

  background:
    #071429;

}


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

.hero-background {

  position:
    absolute;

  inset:
    0;

  z-index:  
    0;

  background-image:
    url(
      "https://www.dawnitservice.com/images/ai-banner.webp"
    );

  background-size:
    cover;

  background-position:
    center
    center;

  background-repeat:
    no-repeat;

  transform:
    scale(1.035);

  animation:
    heroImageZoom
    18s
    ease-in-out
    infinite
    alternate;

}


@keyframes heroImageZoom {

  from {

    transform:
      scale(1.035);

  }


  to {

    transform:
      scale(1.095);

  }

}


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

.hero-overlay {

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  background:

    linear-gradient(
      90deg,

      rgba(
        4,
        14,
        43,
        .97
      )
      0%,

      rgba(
        6,
        20,
        57,
        .92
      )
      38%,

      rgba(
        8,
        27,
        73,
        .68
      )
      65%,

      rgba(
        7,
        20,
        58,
        .50
      )
      100%
    ),

    linear-gradient(
      180deg,

      rgba(
        4,
        13,
        40,
        .18
      ),

      rgba(
        4,
        13,
        40,
        .68
      )
    );

}


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

.hero-color-glow {

  position:
    absolute;

  z-index:
    2;

  pointer-events:
    none;

  border-radius:
    50%;

  filter:
    blur(15px);

}


.hero-glow-purple {

  width:
    480px;

  height:
    480px;

  left:
    -170px;

  bottom:
    -230px;

  background:
    radial-gradient(
      circle,
      rgba(
        111,
        76,
        255,
        .27
      ),
      transparent
      70%
    );

}


.hero-glow-cyan {

  width:
    360px;

  height:
    360px;

  right:
    10%;

  top:
    17%;

  background:
    radial-gradient(
      circle,
      rgba(
        24,
        199,
        232,
        .13
      ),
      transparent
      70%
    );

}


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

.hero-content {

  min-height:
    760px;

  padding-top:
    120px;

  padding-bottom:
    80px;

  position:
    relative;

  z-index:
    5;

  display:
    flex;

  align-items:
    center;

}


.hero-copy {

  max-width:
    910px;

}


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

.hero-eyebrow {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    23px;

  color:
    #a9bcff;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .17em;

}


.hero-eyebrow span {

  width:
    38px;

  height:
    2px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      #32b2ff
    );

}


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

.hero-copy h1 {

  max-width:
    900px;

  margin:
    0;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    clamp(
      30px,
      6.5vw,
      108px
    );

  line-height:
    .92;

  font-weight:
    700;

  letter-spacing:
    -.035em;

}


.hero-copy h1 strong {

  font-weight:
    700;

  background:
    linear-gradient(
      90deg,
      #ffffff
      0%,
      #9eeaff
      32%,
      #bba8ff
      69%,
      #ffb966
      100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

}


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

.hero-copy h2 {

  margin:
    28px
    0
    0;

  color:
    #ffffff;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    23px;

  font-weight:
    600;

  letter-spacing:
    -.02em;

}


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

.hero-copy > p {

  max-width:
    720px;

  margin:
    17px
    0
    0;

  color:
    rgba(
      230,
      236,
      249,
      .78
    );

  font-size:
    16px;

  line-height:
    1.75;

}


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

.hero-buttons {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    13px;

  margin-top:
    32px;

}


.hero-btn {

  min-height:
    54px;

  padding:
    0
    8px
    0
    22px;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    18px;

  text-decoration:
    none;

  font-size:
    12px;

  font-weight:
    800;

  transition:
    .25s
    ease;

}


.hero-btn i {

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  font-style:
    normal;

  transition:
    transform
    .28s
    ease;

}


.hero-btn:hover {

  transform:
    translateY(-3px);

}


.hero-btn:hover i {

  transform:
    rotate(45deg);

}


/* primary */

.hero-btn-primary {

  color:
    #ffffff;

  background:
    linear-gradient(
      90deg,
      #7556ff,
      #4673ff,
      #28bce8
    );

  box-shadow:
    0
    16px
    38px
    rgba(
      72,
      89,
      245,
      .30
    );

}


.hero-btn-primary i {

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

}


/* secondary */

.hero-btn-secondary {

  color:
    #ffffff;

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

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

  backdrop-filter:
    blur(12px);

}


.hero-btn-secondary:hover {

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

}


.hero-btn-secondary i {

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

}


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

.hero-proof {

  max-width:
    760px;

  margin-top:
    42px;

  padding-top:
    23px;

  display:
    grid;

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

  gap:
    15px;

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

}


.hero-proof div {

  position:
    relative;

}


.hero-proof div:not(:last-child)::after {

  content:
    "";

  position:
    absolute;

  right:
    9px;

  top:
    3px;

  width:
    1px;

  height:
    35px;

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

}


.hero-proof strong {

  display:
    block;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    21px;

  font-weight:
    700;

}


.hero-proof span {

  display:
    block;

  margin-top:
    5px;

  color:
    rgba(
      215,
      224,
      243,
      .63
    );

  font-size:
    8px;

}


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

.hero-scroll {

  position:
    absolute;

  z-index:
    7;

  right:
    40px;

  bottom:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  transform:
    rotate(90deg);

  transform-origin:
    bottom
    right;

}


.hero-scroll span {

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

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .14em;

}


.hero-scroll i {

  width:
    36px;

  height:
    1px;

  position:
    relative;

  overflow:
    hidden;

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

}


.hero-scroll i::after {

  content:
    "";

  position:
    absolute;

  left:
    -100%;

  top:
    0;

  width:
    100%;

  height:
    100%;

  background:
    #ffffff;

  animation:
    scrollLine
    2.2s
    ease-in-out
    infinite;

}


@keyframes scrollLine {

  0% {

    left:
      -100%;

  }

  50% {

    left:
      0;

  }

  100% {

    left:
      100%;

  }

}


/* =========================================================
   RESPONSIVE - LARGE LAPTOPS
========================================================= */

@media (
  max-width:
  1500px
) {

  .nav-container {

    width:
      calc(
        100% - 44px
      );

  }


  .desktop-nav {

    gap:
      21px;

  }


  .nav-link {

    font-size:
      12px;

  }


  .dawn-logo {

    min-width:
      175px;

  }


  .mega-menu-inner {

    padding:
      27px
      28px
      26px;

  }


  .mega-heading h2 {

    font-size:
      28px;

  }


  .mega-heading p {

    font-size:
      13px;

  }


  .mega-service-column,
  .staff-group {

    min-height:
      370px;

    padding:
      20px;

  }


  .mega-links a {

    font-size:
      12px;

  }


  .staff-links a {

    font-size:
      11.5px;

  }

}


/* =========================================================
   RESPONSIVE - SMALL DESKTOP
========================================================= */

@media (
  max-width:
  1250px
) {

  .desktop-nav {

    gap:
      14px;

  }


  .nav-link {

    font-size:
      11px;

  }


  .logo-copy small {

    display:
      none;

  }


  .mega-services-grid,
  .staff-grid {

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

  }


  .mega-menu {

    max-height:
      calc(
        100vh - 82px
      );

  }

}


/* =========================================================
   MOBILE / TABLET NAVIGATION
========================================================= */

@media (
  max-width:
  920px
) {

  .nav-container {

    width:
      calc(
        100% - 30px
      );

  }


  .dawn-header,
  .dawn-header.scrolled {

    height:
      74px;

  }


  .dawn-logo {

    min-width:
      0;

  }


  .desktop-nav {

    position:
      fixed;

    left:
      0;

    right:
      0;

    top:
      74px;

    height:
      calc(
        100vh - 74px
      );

    display:
      none;

    flex-direction:
      column;

    align-items:
      stretch;

    justify-content:
      flex-start;

    gap:
      0;

    padding:
      18px
      20px
      30px;

    overflow-y:
      auto;

    color:
      #182235;

    background:
      #ffffff;

  }


  .desktop-nav.open {

    display:
      flex;

  }


  .nav-item {

    width:
      100%;

  }


  .nav-link {

    width:
      100%;

    height:
      auto;

    padding:
      17px
      0;

    justify-content:
      space-between;

    border-bottom:
      1px solid
      #edf0f4;

    font-size:
      15px;

  }


  .nav-link::after {

    display:
      none;

  }


  .talk-btn {

    display:
      none;

  }


  /* mobile menu button */

  .menu-toggle {

    width:
      44px;

    height:
      44px;

    display:
      block;

    border:
      0;

    border-radius:
      50%;

    color:
      inherit;

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

    cursor:
      pointer;

  }


  .dawn-header.scrolled
  .menu-toggle {

    background:
      #f3f5f8;

  }


  .menu-toggle span {

    display:
      block;

    width:
      21px;

    height:
      2px;

    margin:
      5px
      auto;

    background:
      currentColor;

  }


  /* dropdowns */

  .mega-menu,
  .small-mega,
  .mini-dropdown {

    position:
      static;

    width:
      auto;

    display:
      none;

    max-height:
      none;

    overflow:
      visible;

    opacity:
      1;

    visibility:
      visible;

    transform:
      none;

    border:
      0;

    border-radius:
      0;

    box-shadow:
      none;

    background:
      transparent;

  }


  .nav-item.mobile-open
  > .mega-menu,

  .nav-item.mobile-open
  > .small-mega,

  .nav-item.mobile-open
  > .mini-dropdown {

    display:
      block;

  }


  .mega-menu-inner {

    padding:
      12px
      0
      16px;

    border:
      0;

    border-radius:
      0;

    box-shadow:
      none;

    background:
      transparent;

  }


  .mega-menu-inner::before,
  .mega-menu-inner::after {

    display:
      none;

  }


  /* hide big intro areas on mobile */

  .mega-top {

    display:
      none;

  }


  /* Services */

  .mega-services-grid {

    grid-template-columns:
      1fr;

    gap:
      10px;

    padding:
      10px
      0;

  }


  .mega-service-column {

    min-height:
      auto;

    padding:
      18px;

  }


  /* Staff */

  .staff-grid {

    grid-template-columns:
      1fr;

    gap:
      10px;

    padding:
      10px
      0;

  }


  .staff-group {

    min-height:
      auto;

    padding:
      18px;

  }


  .service-column-head h3 {

    font-size:
      16px;

  }


  .mega-links a,
  .staff-links a {

    min-height:
      42px;

    font-size:
      12px;

  }


  /* Industries */

  .small-mega {

    padding:
      12px
      0;

  }


  .small-menu-intro {

    display:
      none;

  }


  .industry-menu-grid {

    grid-template-columns:
      1fr;

    padding-top:
      0;

  }


  .industry-menu-grid a {

    margin-bottom:
      6px;

    background:
      #f7f9fd;

  }


  /* Insights / Company */

  .mini-dropdown {

    padding:
      10px
      0;

  }


  .mini-dropdown > a {

    margin-bottom:
      6px;

    background:
      #f7f9fd;

  }


  /* Hero */

  .hero-banner,
  .hero-content {

    min-height:
      720px;

  }


  .hero-content {

    padding-top:
      130px;

  }


  .hero-copy {

    max-width:
      100%;

  }


  .hero-copy h1 {

    font-size:
      clamp(
        52px,
        12vw,
        78px
      );

  }


  .hero-copy h2 {

    font-size:
      19px;

  }


  .hero-proof {

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

  }


  .hero-proof
  div::after {

    display:
      none;

  }


  .hero-scroll {

    display:
      none;

  }

}


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

@media (
  max-width:
  560px
) {

  .logo-copy small {

    display:
      none;

  }


  .logo-copy strong {

    font-size:
      25px;

  }


  .logo-symbol {

    width:
      38px;

    height:
      38px;

  }


  .hero-banner,
  .hero-content {

    min-height:
      740px;

  }


  .hero-background {

    background-position:
      60%
      center;

  }


  .hero-overlay {

    background:

      linear-gradient(
        90deg,

        rgba(
          4,
          14,
          43,
          .97
        )
        0%,

        rgba(
          5,
          16,
          46,
          .91
        )
        72%,

        rgba(
          5,
          16,
          46,
          .78
        )
        100%
      );

  }


  .hero-copy h1 {

    font-size:
      50px;

  }


  .hero-copy h2 {

    line-height:
      1.4;

  }


  .hero-copy > p {

    font-size:
      14px;

  }


  .hero-buttons {

    flex-direction:
      column;

    align-items:
      stretch;

  }


  .hero-btn {

    width:
      100%;

    justify-content:
      space-between;

  }


  .hero-proof {

    grid-template-columns:
      1fr
      1fr;

  }

}


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

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

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

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}

/* =========================================================
   COMPACT ENTERPRISE TRUST SECTION
========================================================= */

.enterprise-trust {

  position:
    relative;

  overflow:
    hidden;

  padding:
    54px 0 62px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f9fd 100%
    );

}


/* =========================================================
   PROOF STRIP
========================================================= */

.trust-proof-strip {

  display:
    grid;

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

  border:
    1px solid
    #e5e9f1;

  border-radius:
    18px;

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

  box-shadow:
    0
    18px
    50px
    rgba(
      18,
      28,
      50,
      .055
    );

  overflow:
    hidden;

}


/* =========================================================
   EACH PROOF ITEM
========================================================= */

.trust-proof-item {

  min-height:
    118px;

  padding:
    22px
    24px;

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  transition:
    background
    .25s
    ease,
    transform
    .25s
    ease;

}


.trust-proof-item:not(:last-child)::after {

  content:
    "";

  position:
    absolute;

  right:
    0;

  top:
    23px;

  bottom:
    23px;

  width:
    1px;

  background:
    #e8ebf1;

}


.trust-proof-item:hover {

  background:
    linear-gradient(
      145deg,
      #f4f7ff,
      #ffffff
    );

}


/* =========================================================
   PROOF NUMBER / SYMBOL
========================================================= */

.trust-proof-number,
.trust-proof-symbol {

  width:
    54px;

  height:
    54px;

  flex-shrink:
    0;

  display:
    grid;

  place-items:
    center;

  border-radius:
    15px;

  color:
    #245dff;

  background:
    #edf3ff;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    19px;

  font-weight:
    800;

  transition:
    transform
    .3s
    ease,
    background
    .3s
    ease;

}


.trust-proof-item:hover
.trust-proof-number,

.trust-proof-item:hover
.trust-proof-symbol {

  transform:
    translateY(-3px)
    rotate(-3deg);

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #245dff,
      #55aaff
    );

}


/* =========================================================
   PROOF COPY
========================================================= */

.trust-proof-copy span {

  display:
    block;

  margin-bottom:
    6px;

  color:
    #8a94a6;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .12em;

}


.trust-proof-copy strong {

  display:
    block;

  color:
    #1d2738;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    13px;

  line-height:
    1.35;

}


/* =========================================================
   CLIENT HEADING
========================================================= */

.client-row-heading {

  margin-top:
    48px;

  margin-bottom:
    24px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;

}


.client-row-kicker {

  display:
    block;

  margin-bottom:
    9px;

  color:
    #245dff;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .16em;

}


.client-row-heading h2 {

  max-width:
    790px;

  margin:
    0;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    clamp(
      28px,
      3vw,
      42px
    );

  line-height:
    1.08;

  letter-spacing:
    -.045em;

}


.client-row-heading h2 span {

  color:
    #5968ec;

}


.client-row-heading p {

  max-width:
    400px;

  margin:
    0;

  color:
    #778295;

  font-size:
    12px;

  line-height:
    1.6;

}


/* =========================================================
   CLIENT MARQUEE
========================================================= */

.client-marquee {

  position:
    relative;

  width:
    100%;

  overflow:
    hidden;

  padding:
    6px 0
    3px;

}


/* edge fades */

.client-marquee::before,
.client-marquee::after {

  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  z-index:
    5;

  width:
    100px;

  pointer-events:
    none;

}


.client-marquee::before {

  left:
    0;

  background:
    linear-gradient(
      90deg,
      #f7f9fd,
      transparent
    );

}


.client-marquee::after {

  right:
    0;

  background:
    linear-gradient(
      270deg,
      #f7f9fd,
      transparent
    );

}


/* track */

.client-track {

  width:
    max-content;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  animation:
    clientMarquee
    32s
    linear
    infinite;

}


.client-marquee:hover
.client-track {

  animation-play-state:
    paused;

}


@keyframes clientMarquee {

  to {

    transform:
      translateX(-50%);

  }

}


/* =========================================================
   CLIENT LOGO PLACEHOLDERS
========================================================= */

.client-logo-card {

  width:
    190px;

  height:
    86px;

  flex-shrink:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    #e4e8ef;

  border-radius:
    14px;

  background:
    #ffffff;

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

}


.client-logo-card:hover {

  transform:
    translateY(-4px);

  border-color:
    #b5caff;

  box-shadow:
    0
    15px
    35px
    rgba(
      23,
      35,
      63,
      .08
    );

}


.client-logo-card span {

  color:
    #a4adba;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .08em;

}


/* =========================================================
   ACTUAL CLIENT LOGO SUPPORT
========================================================= */

.client-logo-card img {

  max-width:
    68%;

  max-height:
    42px;

  object-fit:
    contain;

 

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

}


.client-logo-card:hover img {

  filter:
    grayscale(0);

  opacity:
    1;

  transform:
    scale(1.04);

}


/* =========================================================
   REVEAL
========================================================= */

.reveal {

  opacity:
    0;

  transform:
    translateY(20px);

  transition:
    opacity
    .65s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),
    transform
    .65s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    );

}


.reveal.visible {

  opacity:
    1;

  transform:
    none;

}


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

@media (
  max-width:
  1000px
) {

  .trust-proof-strip {

    grid-template-columns:
      1fr
      1fr;

  }


  .trust-proof-item:nth-child(2)::after {

    display:
      none;

  }


  .trust-proof-item:nth-child(-n+2) {

    border-bottom:
      1px solid
      #e8ebf1;

  }


  .client-row-heading {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      15px;

  }

}


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

@media (
  max-width:
  600px
) {

  .enterprise-trust {

    padding:
      42px 0
      48px;

  }


  .trust-proof-strip {

    grid-template-columns:
      1fr;

  }


  .trust-proof-item {

    min-height:
      100px;

    padding:
      18px;

  }


  .trust-proof-item::after {

    display:
      none;

  }


  .trust-proof-item:not(:last-child) {

    border-bottom:
      1px solid
      #e8ebf1;

  }


  .trust-proof-number,
  .trust-proof-symbol {

    width:
      46px;

    height:
      46px;

  }


  .client-row-heading {

    margin-top:
      38px;

  }


  .client-logo-card {

    width:
      155px;

    height:
      76px;

  }


  .client-marquee::before,
  .client-marquee::after {

    width:
      35px;

  }

}

/* ==========================================================
   WHAT WE DO — ENTERPRISE VERSION
========================================================== */

.dawn-capabilities {
    position: relative;
    padding: 100px 0 110px;
    background: #f7f9fc;
    overflow: hidden;
}


/* ==========================================================
   HEADER
========================================================== */

.dawn-cap-head {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 90px;
    align-items: end;
    margin-bottom: 55px;
}


.dawn-cap-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;

    color: #3164f4;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}


.dawn-cap-eyebrow span {
    width: 36px;
    height: 2px;
    background: #3164f4;
}


.dawn-cap-title h2 {
    max-width: 850px;
    margin: 0;

    color: #111c35;

    font-family: Manrope, sans-serif;

    font-size: clamp(42px, 4.3vw, 68px);
    line-height: 1.03;

    letter-spacing: -.055em;
}


.dawn-cap-title h2 span {
    color: #3164f4;
}


.dawn-cap-intro {
    max-width: 520px;
    justify-self: end;
}


.dawn-cap-intro p {
    margin: 0 0 22px;

    color: #69758a;

    font-size: 15px;
    line-height: 1.75;
}


.dawn-cap-all {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    color: #17233b;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}


.dawn-cap-all span {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;
    background: #3164f4;

    transition: .3s ease;
}


.dawn-cap-all:hover span {
    transform: rotate(45deg);
}


/* ==========================================================
   MAIN EXPERIENCE
========================================================== */

.dawn-cap-experience {
    display: grid;
    grid-template-columns: .95fr 1.05fr;

    min-height: 650px;

    overflow: hidden;

    border: 1px solid #dfe5ef;
    border-radius: 28px;

    background: white;

    box-shadow:
        0 30px 80px rgba(22, 35, 65, .08);
}


/* ==========================================================
   LEFT VISUAL
========================================================== */

.dawn-cap-visual {
    position: relative;

    min-height: 650px;

    overflow: hidden;

    padding: 46px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #081a42 0%,
            #0c275d 52%,
            #123b84 100%
        );
}


/* subtle grid */

.dawn-cap-grid {
    position: absolute;
    inset: 0;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.12) 1px,
            transparent 1px
        );

    background-size: 62px 62px;
}


.dawn-cap-glow {
    position: absolute;

    width: 560px;
    height: 560px;

    right: -280px;
    top: 20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(54, 119, 255, .48),
            transparent 68%
        );

    filter: blur(5px);
}


/* ==========================================================
   VISUAL TOP
========================================================== */

.dawn-cap-visual-top {
    position: relative;
    z-index: 5;

    display: flex;
    justify-content: space-between;
    align-items: center;
}


.dawn-cap-index {
    color: rgba(255,255,255,.45);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .12em;
}


.dawn-cap-status {
    display: flex;
    align-items: center;
    gap: 8px;

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

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

    letter-spacing: .12em;
}


.dawn-cap-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #5da2ff;

    box-shadow:
        0 0 12px #5da2ff;
}


/* ==========================================================
   MAIN COPY
========================================================== */

.dawn-cap-visual-content {
    position: relative;
    z-index: 6;

    max-width: 510px;

    margin-top: 105px;
}


.dawn-cap-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 28px;

    display: grid;
    place-items: center;

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

    border-radius: 14px;

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

    backdrop-filter: blur(10px);

    color: #9cc8ff;

    font-size: 13px;
    font-weight: 800;

    transition: .3s ease;
}


.dawn-cap-category {
    display: block;

    margin-bottom: 15px;

    color: #91bdff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .15em;
}


.dawn-cap-visual-content h3 {
    margin: 0;

    max-width: 500px;

    font-family: Manrope, sans-serif;

    font-size: clamp(36px, 3.5vw, 53px);
    line-height: 1.04;

    letter-spacing: -.05em;
}


.dawn-cap-visual-content h3 span {
    color: #83b8ff;
}


.dawn-cap-visual-content p {
    max-width: 500px;

    margin: 22px 0 0;

    color: rgba(224,235,255,.69);

    font-size: 13px;
    line-height: 1.75;
}


.dawn-cap-visual-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 28px;

    color: white;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


.dawn-cap-visual-link span {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

    transition: .3s ease;
}


.dawn-cap-visual-link:hover span {
    color: #123b84;
    background: white;

    transform: rotate(45deg);
}


/* ==========================================================
   ABSTRACT VISUAL
========================================================== */

.dawn-cap-network {
    position: absolute;

    width: 430px;
    height: 430px;

    right: -175px;
    bottom: -90px;

    opacity: .7;
}


.dawn-network-ring {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border:
        1px solid rgba(137,183,255,.24);

    border-radius: 50%;
}


.ring-a {
    width: 170px;
    height: 170px;
}


.ring-b {
    width: 280px;
    height: 280px;

    animation:
        dawnRingRotate 18s linear infinite;
}


.ring-c {
    width: 410px;
    height: 410px;

    animation:
        dawnRingRotate 28s linear infinite reverse;
}


@keyframes dawnRingRotate {

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


.network-core {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 82px;
    height: 82px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #5da2ff,
            #2457dc
        );

    box-shadow:
        0 0 55px rgba(69,126,255,.55);
}


.network-core span {
    font-size: 25px;
    font-weight: 800;
}


.network-dot {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #80baff;

    box-shadow:
        0 0 14px #80baff;

    animation:
        dawnPulse 2.5s ease-in-out infinite;
}


.dot-a {
    top: 36px;
    left: 208px;
}


.dot-b {
    right: 52px;
    top: 185px;

    animation-delay: .5s;
}


.dot-c {
    left: 43px;
    bottom: 128px;

    animation-delay: 1s;
}


.dot-d {
    right: 132px;
    bottom: 30px;

    animation-delay: 1.5s;
}


@keyframes dawnPulse {

    50% {
        opacity: .35;
        transform: scale(.65);
    }

}


.dawn-cap-visual-bottom {
    position: absolute;

    left: 46px;
    bottom: 35px;

    z-index: 5;

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

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

    letter-spacing: .15em;
}


/* ==========================================================
   RIGHT CAPABILITY LIST
========================================================== */

.dawn-cap-list {
    padding: 16px 38px;
}


/* ==========================================================
   CAPABILITY ITEM
========================================================== */

.dawn-cap-item {
    border-bottom: 1px solid #e5e9f0;
}


.dawn-cap-item:last-child {
    border-bottom: 0;
}


.dawn-cap-trigger {
    width: 100%;

    min-height: 92px;

    padding: 0;

    display: grid;

    grid-template-columns:
        48px 1fr 44px;

    gap: 14px;

    align-items: center;

    border: 0;

    background: transparent;

    cursor: pointer;

    text-align: left;
}


.dawn-cap-item-number {
    color: #9aa4b4;

    font-size: 10px;
    font-weight: 800;
}


.dawn-cap-item-name {
    color: #182238;

    font-family: Manrope, sans-serif;

    font-size: 24px;
    font-weight: 600;

    letter-spacing: -.025em;

    transition: color .25s ease;
}


.dawn-cap-arrow {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    justify-self: end;

    border: 1px solid #dde3ed;
    border-radius: 50%;

    color: #315fd7;

    transition:
        .3s ease;
}


.dawn-cap-trigger:hover
.dawn-cap-item-name {
    color: #315fd7;
}


.dawn-cap-trigger:hover
.dawn-cap-arrow {
    color: white;

    border-color: #315fd7;

    background: #315fd7;

    transform: rotate(45deg);
}


/* ==========================================================
   EXPANDED CONTENT
========================================================== */

.dawn-cap-detail {
    max-height: 0;

    overflow: hidden;

    padding-left: 62px;

    opacity: 0;

    transition:
        max-height .45s ease,
        opacity .35s ease,
        padding .45s ease;
}


.dawn-cap-item.active
.dawn-cap-detail {
    max-height: 230px;

    padding-bottom: 28px;

    opacity: 1;
}


.dawn-cap-item.active
.dawn-cap-item-name {
    color: #315fd7;
}


.dawn-cap-item.active
.dawn-cap-arrow {
    color: white;

    border-color: #315fd7;

    background: #315fd7;

    transform: rotate(45deg);
}


.dawn-cap-detail p {
    max-width: 550px;

    margin: -4px 0 17px;

    color: #727e91;

    font-size: 12px;
    line-height: 1.6;
}


/* ==========================================================
   SERVICE PILLS — BLUE/NEUTRAL ONLY
========================================================== */

.dawn-cap-services {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.dawn-cap-services span {
    padding: 7px 10px;

    border: 1px solid #e1e7f1;

    border-radius: 999px;

    color: #536177;

    background: #f6f8fc;

    font-size: 8px;
    font-weight: 600;

    transition: .25s ease;
}


.dawn-cap-services span:hover {
    color: #2457dc;

    border-color: #b8cbff;

    background: #edf3ff;
}


/* ==========================================================
   CONTENT CHANGE ANIMATION
========================================================== */

.dawn-cap-visual-content.cap-changing {
    opacity: 0;

    transform: translateY(12px);
}


.dawn-cap-visual-content {
    transition:
        opacity .25s ease,
        transform .25s ease;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1050px) {

    .dawn-cap-head {
        grid-template-columns: 1fr;
        gap: 25px;
    }


    .dawn-cap-intro {
        justify-self: start;
    }


    .dawn-cap-experience {
        grid-template-columns: 1fr;
    }


    .dawn-cap-visual {
        min-height: 560px;
    }


    .dawn-cap-list {
        padding: 15px 30px;
    }

}


@media (max-width: 650px) {

    .dawn-capabilities {
        padding: 70px 0;
    }


    .dawn-cap-title h2 {
        font-size: 39px;
    }


    .dawn-cap-visual {
        min-height: 520px;

        padding: 28px;
    }


    .dawn-cap-visual-content {
        margin-top: 70px;
    }


    .dawn-cap-visual-content h3 {
        font-size: 36px;
    }


    .dawn-cap-network {
        opacity: .28;
    }


    .dawn-cap-visual-bottom {
        left: 28px;
    }


    .dawn-cap-list {
        padding: 8px 22px;
    }


    .dawn-cap-trigger {
        min-height: 82px;

        grid-template-columns:
            35px 1fr 38px;
    }


    .dawn-cap-item-name {
        font-size: 18px;
    }


    .dawn-cap-detail {
        padding-left: 49px;
    }


    .dawn-cap-item.active
    .dawn-cap-detail {
        max-height: 320px;
    }

}

/* =========================================================
   MOBILE NAVIGATION FIX
   APPEND THIS AT END OF EXISTING style.css

   IMPORTANT:
   This does NOT replace existing desktop/menu/hero styles.
========================================================= */


/* =========================================================
   MOBILE CONTACT
   HIDDEN BY DEFAULT ON DESKTOP
========================================================= */

.mobile-contact-item {
  display: none;
}


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media (max-width: 920px) {


  /* =======================================================
     HEADER SIZE
  ======================================================= */

  .dawn-header,
  .dawn-header.scrolled {
    height: 74px;
  }


  .dawn-logo {
    min-width: 0;
  }


  /* =======================================================
     DESKTOP CONTACT BUTTON
     HIDE ONLY ON MOBILE
  ======================================================= */

  .header-actions .talk-btn {
    display: none;
  }


  /* =======================================================
     HAMBURGER
  ======================================================= */

  .menu-toggle {
    width: 46px;
    height: 46px;

    padding: 0;

    position: relative;

    display: block;

    flex-shrink: 0;

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

    border-radius: 50%;

    color: inherit;

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

    cursor: pointer;

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


  .dawn-header.scrolled
  .menu-toggle {
    background: #f3f5f8;

    border-color: #e4e8ef;
  }


  .menu-toggle span {
    width: 20px;
    height: 2px;

    margin: 0;

    position: absolute;

    left: 50%;

    border-radius: 999px;

    background: currentColor;

    transform:
      translateX(-50%);

    transition:
      top .28s ease,
      transform .28s ease,
      opacity .22s ease;
  }


  .menu-toggle span:first-child {
    top: 18px;
  }


  .menu-toggle span:last-child {
    top: 25px;
  }


  body.menu-open
  .menu-toggle span:first-child {
    top: 22px;

    transform:
      translateX(-50%)
      rotate(45deg);
  }


  body.menu-open
  .menu-toggle span:last-child {
    top: 22px;

    transform:
      translateX(-50%)
      rotate(-45deg);
  }


  /* =======================================================
     MOBILE NAVIGATION DRAWER
  ======================================================= */

  .desktop-nav {
    position: fixed !important;

    top: 74px !important;

    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    height:
      calc(100dvh - 74px);

    display: none;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    gap: 0;

    padding:
      10px
      20px
      35px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

    color: #172033;

    background: #ffffff;

    box-shadow:
      0
      24px
      70px
      rgba(11, 24, 58, .14);
  }


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


  /* =======================================================
     MAIN MOBILE MENU ITEMS
  ======================================================= */

  .desktop-nav > .nav-item {
    width: 100%;
  }


  .desktop-nav
  .nav-link {
    width: 100%;

    height: auto;

    min-height: 66px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    border: 0;

    border-bottom:
      1px solid #e9edf3;

    color: #172033;

    background: transparent;

    font-size: 16px;

    font-weight: 700;

    text-align: left;

    white-space: normal;
  }


  /* remove desktop hover underline */

  .desktop-nav
  .nav-link::after {
    display: none !important;
  }


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

  .desktop-nav
  .nav-chevron {
    width: 14px;
    height: 14px;

    flex-shrink: 0;

    transform: none !important;

    transition:
      transform .3s ease;
  }


  .desktop-nav
  .nav-item.mobile-open
  > .nav-link
  .nav-chevron {
    transform:
      rotate(180deg) !important;
  }


  /* =======================================================
     IMPORTANT
     REMOVE ALL DESKTOP DROPDOWN POSITIONING ON MOBILE
  ======================================================= */

  .desktop-nav
  .mega-menu,

  .desktop-nav
  .small-mega,

  .desktop-nav
  .mini-dropdown {
    position: static !important;

    top: auto !important;

    left: auto !important;
    right: auto !important;

    width: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    padding: 0;

    display: none;

    overflow: visible !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    transform-origin:
      initial !important;

    border: 0 !important;

    border-radius: 0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    transition:
      none !important;
  }


  /* =======================================================
     SHOW CLICKED SUBMENU
  ======================================================= */

  .desktop-nav
  .nav-item.mobile-open
  > .mega-menu,

  .desktop-nav
  .nav-item.mobile-open
  > .small-mega,

  .desktop-nav
  .nav-item.mobile-open
  > .mini-dropdown {
    display: block !important;
  }


  /* =======================================================
     MEGA MENU CONTAINER
  ======================================================= */

  .desktop-nav
  .mega-menu-inner {
    width: 100%;

    max-width: none;

    margin: 0;

    padding:
      12px 0
      17px;

    overflow: visible;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;
  }


  .desktop-nav
  .mega-menu-inner::before,

  .desktop-nav
  .mega-menu-inner::after {
    display: none;
  }


  /* Desktop title area not needed inside accordion */

  .desktop-nav
  .mega-top {
    display: none !important;
  }


  /* =======================================================
     SERVICES
     KEEP ORIGINAL SERVICE COLORS
  ======================================================= */

  .desktop-nav
  .mega-services-grid {
    width: 100%;

    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 10px;

    padding:
      10px 0
      14px;
  }


  .desktop-nav
  .mega-service-column {
    width: 100%;

    min-height: auto;

    padding: 17px;

    transform: none !important;

    box-shadow: none;
  }


  /*
     IMPORTANT:
     No color/background overrides here.

     service-ai
     service-data
     service-digital
     service-cloud
     service-app

     continue using your existing colors.
  */


  .desktop-nav
  .service-column-head {
    gap: 13px;

    padding-bottom: 13px;
  }


  .desktop-nav
  .service-column-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border-radius: 12px;

    font-size: 17px;
  }


  .desktop-nav
  .service-column-head h3 {
    margin-top: 4px;

    font-size: 16px;

    line-height: 1.25;
  }


  .desktop-nav
  .mega-links {
    margin-top: 8px;
  }


  .desktop-nav
  .mega-links a {
    min-height: 42px;

    padding:
      9px
      1px;

    font-size: 12.5px;

    line-height: 1.4;
  }


  .desktop-nav
  .mega-links a span {
    opacity: 1;

    transform: none;
  }


  /* =======================================================
     STAFF AUGMENTATION
     KEEP ORIGINAL GROUP COLORS
  ======================================================= */

  .desktop-nav
  .staff-grid {
    width: 100%;

    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 10px;

    padding:
      10px 0
      14px;
  }


  .desktop-nav
  .staff-group {
    width: 100%;

    min-height: auto;

    padding: 17px;

    transform: none !important;

    box-shadow: none;
  }


  /*
     Original:
     group-purple
     group-pink
     group-orange
     group-cyan
     group-green

     remain untouched.
  */


  .desktop-nav
  .staff-group-head {
    min-height: auto;

    gap: 13px;

    padding-bottom: 13px;
  }


  .desktop-nav
  .staff-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border-radius: 12px;

    font-size: 17px;
  }


  .desktop-nav
  .staff-group-head h3 {
    margin-top: 4px;

    font-size: 16px;

    line-height: 1.25;
  }


  .desktop-nav
  .staff-links {
    margin-top: 8px;
  }


  .desktop-nav
  .staff-links a {
    min-height: 42px;

    padding:
      9px
      1px;

    font-size: 12.5px;

    line-height: 1.4;
  }


  .desktop-nav
  .staff-links a span {
    opacity: 1;

    transform: none;
  }


  /* =======================================================
     INDUSTRIES
  ======================================================= */

  .desktop-nav
  .small-mega {
    padding:
      10px 0
      15px !important;
  }


  .desktop-nav
  .small-menu-intro {
    display: none;
  }


  .desktop-nav
  .industry-menu-grid {
    width: 100%;

    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 7px;

    padding: 0;
  }


  .desktop-nav
  .industry-menu-grid a {
    width: 100%;

    min-height: 70px;

    margin: 0;

    padding:
      11px
      13px;

    display: grid;

    grid-template-columns:
      40px
      minmax(0, 1fr)
      20px;

    gap: 12px;

    align-items: center;

    border:
      1px solid #e6ebf3;

    border-radius: 13px;

    background: #f9fbff;

    transform: none !important;
  }


  .desktop-nav
  .industry-menu-grid i {
    width: 40px;
    height: 40px;
  }


  .desktop-nav
  .industry-menu-grid span {
    min-width: 0;

    font-size: 13px;
  }


  .desktop-nav
  .industry-menu-grid small {
    margin-top: 4px;

    font-size: 9.5px;

    line-height: 1.4;
  }


  /* =======================================================
     INSIGHTS + COMPANY
  ======================================================= */

  .desktop-nav
  .mini-dropdown {
    padding:
      9px 0
      15px !important;
  }


  .desktop-nav
  .mini-dropdown > a {
    width: 100%;

    min-height: 70px;

    margin-bottom: 7px;

    padding:
      11px
      13px;

    display: grid;

    grid-template-columns:
      44px
      minmax(0, 1fr)
      20px;

    gap: 12px;

    align-items: center;

    border:
      1px solid #e6ebf3;

    border-radius: 13px;

    background: #f9fbff;

    transform: none !important;
  }


  /*
     Do not override:
       .mini-icon.purple
       .mini-icon.orange
       .mini-icon.cyan
       .mini-icon.green

     Existing colors remain.
  */


  .desktop-nav
  .mini-dropdown strong {
    font-size: 13px;
  }


  .desktop-nav
  .mini-dropdown small {
    margin-top: 4px;

    font-size: 9.5px;

    line-height: 1.4;
  }


  /* =======================================================
     MOBILE CONTACT US
  ======================================================= */

  .mobile-contact-item {
    display: block;

    margin-top: 12px;

    padding:
      12px 0
      8px;
  }


  .mobile-contact-link {
    width: 100%;

    min-height: 56px;

    padding:
      0
      8px
      0
      21px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    overflow: hidden;

    position: relative;

    border-radius: 999px;

    color: #ffffff;

    text-decoration: none;

    background:
      linear-gradient(
        90deg,
        #6354ff,
        #397aff
      );

    box-shadow:
      0
      14px
      30px
      rgba(85, 76, 255, .25);
  }


  .mobile-contact-link::before {
    content: "";

    position: absolute;

    top: -15px;
    left: -90px;

    width: 80px;
    height: 80px;

    border-radius: 50%;

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

    transition:
      left .4s ease;
  }


  .mobile-contact-link:hover::before {
    left: calc(100% + 10px);
  }


  .mobile-contact-link > span {
    position: relative;

    z-index: 2;

    font-size: 14px;

    font-weight: 800;
  }


  .mobile-contact-link i {
    width: 40px;
    height: 40px;

    position: relative;

    z-index: 2;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

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

    font-style: normal;

    transition:
      transform .28s ease;
  }


  .mobile-contact-link:hover i {
    transform:
      rotate(45deg);
  }

}


/* =========================================================
   PHONE NAVIGATION
========================================================= */

@media (max-width: 560px) {

  .desktop-nav {
    padding:
      8px
      15px
      28px;
  }


  .desktop-nav
  .nav-link {
    min-height: 62px;

    font-size: 15px;
  }


  .desktop-nav
  .mega-service-column,

  .desktop-nav
  .staff-group {
    padding: 15px;
  }


  .desktop-nav
  .mega-links a,

  .desktop-nav
  .staff-links a {
    font-size: 12px;
  }

}

/* =========================================================
   NEXT STEP / TRANSFORMATION PRIORITIES
========================================================= */

.journey-section {
  position: relative;

  overflow: hidden;

  padding:
    115px 0
    120px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcff 100%
    );
}


/* =========================================================
   3D WAVE BACKGROUND
========================================================= */

.journey-wave-wrap {
  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;

  z-index: 0;

  perspective: 1200px;
}


.journey-wave-svg {
  position: absolute;

  width: 118%;
  height: 100%;

  left: -9%;
  top: 0;

  opacity: .98;

  overflow: visible;

  transform-style: preserve-3d;

  will-change:
    transform;
}


/* common wave layers */

.journey-wave {
  transform-origin: center;

  will-change:
    transform,
    opacity;
}


/* main ribbon */

.journey-wave-main {
  animation:
    journeyMainRibbon
    4.6s
    ease-in-out
    infinite
    alternate;
}


/* depth ribbon */

.journey-wave-depth {
  animation:
    journeyDepthRibbon
    5.2s
    ease-in-out
    infinite
    alternate;
}


/* shadow */

.journey-wave-shadow {
  animation:
    journeyShadowMove
    5.8s
    ease-in-out
    infinite
    alternate;
}


/* highlight */

.journey-wave-highlight {
  opacity: .92;

  animation:
    journeyHighlightMove
    2.9s
    ease-in-out
    infinite
    alternate;
}


/* fine edge */

.journey-wave-edge {
  animation:
    journeyEdgeMove
    3.6s
    ease-in-out
    infinite
    alternate;
}


/* secondary ribbon */

.journey-wave-secondary {
  animation:
    journeySecondaryMove
    4.8s
    ease-in-out
    infinite
    alternate;
}


/* =========================================================
   3D RIBBON ANIMATIONS
========================================================= */

@keyframes journeyMainRibbon {

  0% {
    transform:
      translate3d(
        -28px,
        18px,
        0
      )
      scaleX(1)
      scaleY(.98);
  }

  50% {
    transform:
      translate3d(
        22px,
        -14px,
        38px
      )
      scaleX(1.05)
      scaleY(1.04);
  }

  100% {
    transform:
      translate3d(
        52px,
        -30px,
        12px
      )
      scaleX(1.10)
      scaleY(1);
  }

}


@keyframes journeyDepthRibbon {

  0% {
    transform:
      translate3d(
        25px,
        -8px,
        -20px
      )
      scaleX(1.02);
  }

  50% {
    transform:
      translate3d(
        -20px,
        14px,
        18px
      )
      scaleX(1.07);
  }

  100% {
    transform:
      translate3d(
        -48px,
        28px,
        -5px
      )
      scaleX(1.12);
  }

}


@keyframes journeyShadowMove {

  0% {
    transform:
      translate3d(
        -12px,
        20px,
        -32px
      )
      scale(1.02);

    opacity: .48;
  }

  100% {
    transform:
      translate3d(
        38px,
        -18px,
        -10px
      )
      scale(1.09);

    opacity: .72;
  }

}


@keyframes journeyHighlightMove {

  0% {
    transform:
      translate3d(
        -40px,
        10px,
        38px
      )
      scaleX(.98);

    opacity: .55;
  }

  50% {
    transform:
      translate3d(
        16px,
        -18px,
        62px
      )
      scaleX(1.05);

    opacity: 1;
  }

  100% {
    transform:
      translate3d(
        56px,
        -28px,
        32px
      )
      scaleX(1.11);

    opacity: .72;
  }

}


@keyframes journeyEdgeMove {

  0% {
    transform:
      translate3d(
        -18px,
        4px,
        48px
      );
  }

  100% {
    transform:
      translate3d(
        42px,
        -22px,
        66px
      );
  }

}


@keyframes journeySecondaryMove {

  0% {
    transform:
      translate3d(
        32px,
        -2px,
        -15px
      )
      scaleX(1);
  }

  50% {
    transform:
      translate3d(
        -8px,
        18px,
        14px
      )
      scaleX(1.05);
  }

  100% {
    transform:
      translate3d(
        -52px,
        26px,
        0
      )
      scaleX(1.10);
  }

}


/* =========================================================
   MOVING LIGHT SWEEP
========================================================= */

.journey-wave-wrap::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  left: -360px;

  width: 320px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .18),
      rgba(151, 217, 255, .20),
      rgba(255, 255, 255, .14),
      transparent
    );

  filter:
    blur(20px);

  transform:
    skewX(-18deg);

  animation:
    journeyLightSweep
    3.8s
    linear
    infinite;
}


@keyframes journeyLightSweep {

  from {
    left: -360px;
  }

  to {
    left:
      calc(
        100% + 360px
      );
  }

}


/* =========================================================
   LAYOUT
========================================================= */

.journey-layout {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    .72fr
    1.28fr;

  gap: 85px;

  align-items: start;
}


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

.journey-intro {
  position: sticky;

  top: 140px;

  max-width: 540px;
}


.journey-kicker {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 18px;

  color: #245dff;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .15em;
}


.journey-kicker::before {
  content: "";

  width: 36px;
  height: 2px;

  background: #245dff;
}


.journey-intro h2 {
  max-width: 540px;

  margin: 0;

  color: #111d3b;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    clamp(
      44px,
      4.2vw,
      68px
    );

  font-weight: 600;

  line-height: 1.04;

  letter-spacing: -.055em;
}


.journey-intro h2 span {
  color: #245dff;
}


.journey-intro p {
  max-width: 490px;

  margin:
    24px 0 0;

  color: #657187;

  font-size: 15px;

  line-height: 1.75;
}


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

.journey-cta {
  margin-top: 30px;

  display: inline-flex;

  align-items: center;

  gap: 13px;

  color: #152039;

  text-decoration: none;

  font-size: 12px;

  font-weight: 800;
}


.journey-cta i {
  width: 39px;
  height: 39px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #245dff,
      #4b8fff
    );

  font-style: normal;

  box-shadow:
    0
    9px
    25px
    rgba(36, 93, 255, .22);

  transition:
    transform .28s ease,
    box-shadow .28s ease;
}


.journey-cta:hover i {
  transform:
    rotate(45deg);

  box-shadow:
    0
    14px
    32px
    rgba(36, 93, 255, .32);
}


/* =========================================================
   RIGHT LIST
========================================================= */

.journey-list {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(223, 230, 243, .78);

  border-radius: 24px;

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

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    0
    28px
    70px
    rgba(28, 42, 74, .06);
}


/* =========================================================
   ITEMS
========================================================= */

.journey-item {
  position: relative;

  border-bottom:
    1px solid
    rgba(216, 224, 237, .95);

  transition:
    background .3s ease;
}


.journey-item:last-child {
  border-bottom: 0;
}


.journey-item.active {
  background:
    linear-gradient(
      90deg,
      rgba(240, 245, 255, .90),
      rgba(255, 255, 255, .95)
    );
}


/* left activation line */

.journey-item::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 3px;

  transform:
    scaleY(0);

  transform-origin:
    center;

  background:
    linear-gradient(
      180deg,
      #245dff,
      #72c7ff
    );

  transition:
    transform .3s ease;
}


.journey-item:hover::before,
.journey-item.active::before {
  transform:
    scaleY(1);
}


/* =========================================================
   TRIGGER
========================================================= */

.journey-trigger {
  width: 100%;

  min-height: 122px;

  padding:
    24px
    28px;

  display: grid;

  grid-template-columns:
    48px
    1fr
    48px;

  gap: 18px;

  align-items: center;

  border: 0;

  background: transparent;

  text-align: left;
}


.journey-number {
  color: #9aa4b6;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .10em;
}


.journey-title {
  max-width: 530px;

  color: #13204b;

  font-family:
    Manrope,
    sans-serif;

  font-size: 24px;

  font-weight: 600;

  line-height: 1.22;

  letter-spacing: -.03em;

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


.journey-icon {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  justify-self: end;

  border:
    1px solid
    #d9e0eb;

  border-radius: 50%;

  color: #245dff;

  background: #ffffff;

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


.journey-trigger:hover
.journey-title {
  color: #245dff;

  transform:
    translateX(4px);
}


.journey-trigger:hover
.journey-icon,
.journey-item.active
.journey-icon {
  color: #ffffff;

  border-color: #245dff;

  background: #245dff;

  transform:
    rotate(45deg);
}


.journey-item.active
.journey-title {
  color: #245dff;
}


/* =========================================================
   EXPANDED DETAIL
========================================================= */

.journey-detail {
  max-height: 0;

  padding:
    0
    76px
    0
    94px;

  overflow: hidden;

  opacity: 0;

  transition:
    max-height .45s ease,
    padding .45s ease,
    opacity .35s ease;
}


.journey-item.active
.journey-detail {
  max-height: 160px;

  padding:
    0
    76px
    28px
    94px;

  opacity: 1;
}


.journey-detail p {
  max-width: 680px;

  margin: 0;

  color: #667287;

  font-size: 14px;

  line-height: 1.7;
}


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

@media (max-width: 1050px) {

  .journey-layout {
    grid-template-columns:
      1fr;

    gap: 48px;
  }


  .journey-intro {
    position: relative;

    top: auto;

    max-width: 760px;
  }


  .journey-intro h2 {
    max-width: 760px;
  }


  .journey-intro p {
    max-width: 680px;
  }

}


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

@media (max-width: 650px) {

  .journey-section {
    padding:
      75px 0
      80px;
  }


  .journey-layout {
    gap: 34px;
  }


  .journey-intro h2 {
    font-size: 40px;
  }


  .journey-list {
    border-radius: 18px;
  }


  .journey-trigger {
    min-height: 98px;

    padding:
      20px
      18px;

    grid-template-columns:
      30px
      1fr
      38px;

    gap: 10px;
  }


  .journey-title {
    font-size: 18px;
  }


  .journey-icon {
    width: 36px;
    height: 36px;
  }


  .journey-detail {
    padding-left: 58px;

    padding-right: 20px;
  }


  .journey-item.active
  .journey-detail {
    padding:
      0
      20px
      22px
      58px;
  }


  .journey-detail p {
    font-size: 12.5px;
  }


  .journey-wave-svg {
    width: 175%;

    left: -38%;

    opacity: .80;
  }


  .journey-wave-wrap::after {
    animation-duration:
      4.8s;
  }

}


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

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

  .journey-wave,
  .journey-wave-wrap::after {
    animation:
      none !important;
  }

}

/* =========================================================
   WHY DAWN / STORY SECTION
========================================================= */

.dawn-story {
  position: relative;

  width: 100%;

  min-height: 760px;

  overflow: hidden;

  display: flex;

  align-items: center;

  background: #0d2b52;
}


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

.dawn-story-bg {
  position: absolute;

  inset: 0;

  z-index: 0;

  background-image:
    url("../images/mission.webp");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;

  transform:
    scale(1.025);

  will-change:
    transform;

  animation:
    dawnStoryZoom
    14s
    ease-in-out
    infinite
    alternate;
}


@keyframes dawnStoryZoom {

  from {
    transform:
      scale(1.025);
  }

  to {
    transform:
      scale(1.07);
  }

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.dawn-story-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(3, 18, 45, .04) 0%,
      rgba(3, 18, 45, .02) 45%,
      rgba(3, 18, 45, .10) 68%,
      rgba(3, 18, 45, .24) 100%
    );
}


/* =========================================================
   INNER WRAPPER
========================================================= */

.dawn-story-inner {
  position: relative;

  z-index: 3;

  min-height: 760px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  padding-top: 55px;

  padding-bottom: 55px;
}


/* =========================================================
   FLOATING WHITE CARD
========================================================= */

.dawn-story-card {
  width: 485px;

  min-height: 585px;

  padding:
    58px
    54px
    50px;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  position: relative;

  overflow: hidden;

  border-radius: 18px;

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

  box-shadow:
    0
    34px
    90px
    rgba(7, 20, 48, .18);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  transition:
    transform .4s
    cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease;
}


.dawn-story-card:hover {
  transform:
    translateY(-7px);

  box-shadow:
    0
    44px
    110px
    rgba(7, 20, 48, .24);
}


/* =========================================================
   KICKER
========================================================= */

.dawn-story-kicker {
  display: block;

  margin-bottom: 23px;

  color: #245dff;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .16em;
}


/* =========================================================
   TITLE
========================================================= */

.dawn-story-card h2 {
  max-width: 390px;

  margin: 0;

  color: #0d1b4c;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    clamp(
      32px,
      2.7vw,
      43px
    );

  line-height: 1.10;

  font-weight: 600;

  letter-spacing: -.045em;
}


.dawn-story-card h2 span {
  display: block;

  color: #245dff;
}


/* =========================================================
   BODY COPY
========================================================= */

.dawn-story-card p {
  max-width: 390px;

  margin:
    24px 0 0;

  color: #263765;

  font-size: 14px;

  line-height: 1.72;
}


.dawn-story-card p + p {
  margin-top: 14px;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.dawn-story-play {
  position: relative;

  width: 74px;
  height: 74px;

  margin-top: auto;

  padding: 0;

  border: 0;

  border-radius: 50%;

  display: grid;

  place-items: center;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #4132ea,
      #245dff
    );

  cursor: pointer;

  box-shadow:
    0
    16px
    36px
    rgba(47, 68, 235, .28);

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


.dawn-story-play:hover {
  transform:
    translateY(-4px)
    scale(1.05);

  box-shadow:
    0
    22px
    46px
    rgba(47, 68, 235, .36);
}


.dawn-story-play-icon {
  position: relative;

  z-index: 2;

  display: grid;

  place-items: center;

  transform:
    translateX(2px);
}


/* =========================================================
   PLAY PULSE
========================================================= */

.dawn-story-play-pulse {
  position: absolute;

  inset: 0;

  border:
    1px solid
    rgba(46, 79, 255, .48);

  border-radius: 50%;

  animation:
    dawnStoryPulse
    2s
    ease-out
    infinite;
}


@keyframes dawnStoryPulse {

  0% {
    opacity: .75;

    transform:
      scale(1);
  }

  75% {
    opacity: 0;

    transform:
      scale(1.42);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.42);
  }

}


/* =========================================================
   VIDEO MODAL
========================================================= */

.mission-video-modal {
  position: fixed;

  inset: 0;

  z-index: 99999;

  padding: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  visibility: hidden;

  transition:
    opacity .35s ease,
    visibility .35s ease;
}


.mission-video-modal.active {
  opacity: 1;

  visibility: visible;
}


.mission-video-modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(3, 10, 28, .90);

  backdrop-filter:
    blur(18px);

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


.mission-video-modal-content {
  position: relative;

  z-index: 3;

  width:
    min(
      1100px,
      92vw
    );

  opacity: 0;

  transform:
    translateY(30px)
    scale(.97);

  transition:
    transform .45s
    cubic-bezier(.2,.8,.2,1),
    opacity .35s ease;
}


.mission-video-modal.active
.mission-video-modal-content {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


.mission-video-frame {
  position: relative;

  overflow: hidden;

  aspect-ratio:
    16 / 9;

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

  border-radius: 18px;

  background: #030814;

  box-shadow:
    0
    45px
    110px
    rgba(0,0,0,.52);
}


.mission-video-frame video {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  background: #030814;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.mission-video-close {
  position: absolute;

  z-index: 5;

  top: -52px;
  right: 0;

  width: 42px;
  height: 42px;

  padding: 0;

  display: grid;

  place-items: center;

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

  border-radius: 50%;

  color: #ffffff;

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

  font-size: 26px;

  cursor: pointer;

  transition:
    background .25s ease,
    transform .25s ease;
}


.mission-video-close:hover {
  background:
    rgba(255,255,255,.20);

  transform:
    rotate(90deg);
}


body.video-modal-open {
  overflow: hidden;
}


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

@media (max-width: 1100px) {

  .dawn-story,
  .dawn-story-inner {
    min-height: 680px;
  }


  .dawn-story-card {
    width: 440px;

    min-height: 535px;

    padding:
      45px
      42px
      42px;
  }

}


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

@media (max-width: 720px) {

  .dawn-story {
    min-height: 820px;

    align-items: flex-end;
  }


  .dawn-story-bg {
    background-position:
      42% center;
  }


  .dawn-story-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(4, 14, 40, .04) 0%,
        rgba(4, 14, 40, .12) 45%,
        rgba(4, 14, 40, .58) 100%
      );
  }


  .dawn-story-inner {
    min-height: 820px;

    align-items: flex-end;

    justify-content: center;

    padding-top: 220px;

    padding-bottom: 24px;
  }


  .dawn-story-card {
    width: 100%;

    min-height: auto;

    padding:
      32px
      27px
      28px;

    border-radius: 18px;
  }


  .dawn-story-card h2 {
    font-size: 32px;
  }


  .dawn-story-card p {
    font-size: 13px;
  }


  .dawn-story-play {
    width: 62px;
    height: 62px;

    margin-top: 28px;
  }


  .mission-video-modal {
    padding: 18px;
  }


  .mission-video-modal-content {
    width: 100%;
  }

}

/* =========================================================
   COMPACT SUCCESS STORIES
========================================================= */

.compact-stories {
  position: relative;

  padding:
    76px 0
    82px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #f7f8fa 0%,
      #f4f6f9 100%
    );
}


/* =========================================================
   HEADER
========================================================= */

.compact-stories-head {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 50px;

  margin-bottom: 34px;
}


.compact-stories-kicker {
  display: block;

  margin-bottom: 9px;

  color: #245dff;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .15em;
}


.compact-stories-head h2 {
  margin: 0;

  color: #12204a;

  font-family:
    Manrope,
    sans-serif;

  font-size:
    clamp(
      38px,
      3.5vw,
      54px
    );

  line-height: 1.02;

  letter-spacing: -.05em;
}


.compact-stories-head h2 span {
  color: #245dff;
}


.compact-stories-head p {
  max-width: 560px;

  margin:
    12px 0 0;

  color: #6d7687;

  font-size: 13px;

  line-height: 1.6;
}


/* =========================================================
   VIEW ALL
========================================================= */

.compact-stories-all {
  min-height: 44px;

  padding:
    0
    18px;

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  gap: 13px;

  border:
    1px solid #cfd5df;

  border-radius: 999px;

  color: #26334e;

  background: #ffffff;

  text-decoration: none;

  font-size: 11px;

  font-weight: 700;

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


.compact-stories-all i {
  font-style: normal;

  transition:
    transform .25s ease;
}


.compact-stories-all:hover {
  color: #245dff;

  border-color: #9db5ff;

  transform:
    translateY(-2px);

  box-shadow:
    0
    8px
    24px
    rgba(36, 93, 255, .10);
}


.compact-stories-all:hover i {
  transform:
    translateX(4px);
}


/* =========================================================
   MAIN GRID
========================================================= */

.compact-stories-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 20px;

  align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.compact-story-card {
  position: relative;

  overflow: hidden;

  border:
    1px solid #e1e5eb;

  border-radius: 20px;

  background: #ffffff;

  box-shadow:
    0
    12px
    34px
    rgba(24, 34, 58, .06);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
}


.compact-story-card:hover {
  transform:
    translateY(-5px);

  border-color: #b8c9f5;

  box-shadow:
    0
    22px
    48px
    rgba(24, 34, 58, .10);
}


/* =========================================================
   FEATURED STORY
========================================================= */

.compact-story-featured {
  display: grid;

  /*
     Increased from 300px.
     Gives the image significantly more visual presence.
  */

  grid-template-rows:
    390px
    auto;
}


/* =========================================================
   FEATURED IMAGE
========================================================= */

.compact-story-image {
  position: relative;

  overflow: hidden;

  margin:
    18px
    18px
    0;

  border-radius: 17px;

  background: #071a3d;
}


.compact-story-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  /*
     Important:
     Shows more of the lower half of your generated image.
  */

  object-position:
    center 62%;

  transform:
    scale(1.01);

  transition:
    transform .7s
    cubic-bezier(.2,.8,.2,1),
    filter .5s ease;
}


.compact-story-card:hover
.compact-story-image img {
  transform:
    scale(1.045);
}


/* =========================================================
   OPTIONAL PLACEHOLDER
   ONLY USED UNTIL REAL IMAGE IS ADDED
========================================================= */

.compact-story-image-placeholder {
  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

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

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .12em;

  background:
    radial-gradient(
      circle at 75% 35%,
      rgba(255,255,255,.16),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      #173887,
      #5648d9
    );

  transition:
    transform .5s
    cubic-bezier(.2,.8,.2,1);
}


.compact-story-card:hover
.compact-story-image-placeholder {
  transform:
    scale(1.04);
}


/* =========================================================
   TAG
========================================================= */

.compact-story-tag {
  position: absolute;

  z-index: 4;

  top: 18px;
  left: 18px;

  padding:
    7px
    10px;

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

  border-radius: 999px;

  color: #ffffff;

  background:
    rgba(7, 20, 52, .55);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .12em;
}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.compact-story-content {
  padding:
    24px
    29px
    27px;
}


.compact-story-content h3 {
  margin: 0;

  color: #293448;

  font-family:
    Manrope,
    sans-serif;

  font-size: 22px;

  line-height: 1.2;

  letter-spacing: -.03em;
}


.compact-story-content > p {
  max-width: 620px;

  margin:
    9px 0 0;

  color: #6c7687;

  font-size: 12.5px;

  line-height: 1.6;
}


/* =========================================================
   FEATURED METRICS
========================================================= */

.compact-story-meta {
  margin-top: 18px;

  display: flex;

  gap: 10px;
}


.compact-story-meta > div {
  min-width: 135px;

  padding:
    9px
    13px;

  border:
    1px solid #e6eaf0;

  border-radius: 11px;

  background: #f8f9fc;

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


.compact-story-meta > div:hover {
  transform:
    translateY(-2px);

  border-color: #c9d6f8;

  background: #f4f7ff;
}


.compact-story-meta strong {
  display: block;

  color: #245dff;

  font-family:
    Manrope,
    sans-serif;

  font-size: 18px;
}


.compact-story-meta span {
  display: block;

  margin-top: 2px;

  color: #7a8494;

  font-size: 8px;
}


/* =========================================================
   LINKS
========================================================= */

.compact-story-link,
.compact-story-small-bottom a {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #245dff;

  text-decoration: none;

  font-size: 11px;

  font-weight: 700;
}


.compact-story-link {
  margin-top: 18px;
}


.compact-story-link span,
.compact-story-small-bottom a span {
  transition:
    transform .25s ease;
}


.compact-story-link:hover span,
.compact-story-small-bottom a:hover span {
  transform:
    translateX(5px);
}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.compact-story-side {
  display: grid;

  grid-template-rows:
    1fr
    1fr;

  gap: 20px;
}


/* =========================================================
   SMALL STORIES
========================================================= */

.compact-story-small {
  min-height: 295px;

  padding: 18px;

  display: grid;

  grid-template-columns:
    43%
    57%;

  gap: 22px;
}


/* =========================================================
   SMALL STORY IMAGE
========================================================= */

.compact-story-small-image {
  min-height: 255px;

  position: relative;

  overflow: hidden;

  border-radius: 15px;

  background: #102d67;
}


.compact-story-small-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transform:
    scale(1.01);

  transition:
    transform .6s
    cubic-bezier(.2,.8,.2,1);
}


.compact-story-small:hover
.compact-story-small-image img {
  transform:
    scale(1.05);
}


/*
   Keep placeholder support if images
   have not yet been added.
*/

.compact-story-small-image
.compact-story-image-placeholder {
  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;
}


/* =========================================================
   SMALL CONTENT
========================================================= */

.compact-story-small-content {
  min-width: 0;

  padding:
    5px
    14px
    5px
    0;

  display: flex;

  flex-direction: column;
}


.compact-story-tag-inline {
  margin-bottom: 9px;

  color: #245dff;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .13em;
}


.compact-story-small-content h3 {
  margin: 0;

  color: #394557;

  font-family:
    Manrope,
    sans-serif;

  font-size: 18px;

  line-height: 1.18;

  letter-spacing: -.025em;
}


.compact-story-small-content p {
  margin:
    9px 0 0;

  color: #707a89;

  font-size: 11.5px;

  line-height: 1.55;
}


/* =========================================================
   SMALL STORY FOOTER
========================================================= */

.compact-story-small-bottom {
  margin-top: auto;

  padding-top: 14px;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 15px;
}


.compact-story-small-bottom strong {
  color: #245dff;

  font-family:
    Manrope,
    sans-serif;

  font-size: 19px;
}


.compact-story-small-bottom strong small {
  display: block;

  margin-top: 2px;

  color: #8a93a2;

  font-family:
    Inter,
    sans-serif;

  font-size: 7.5px;

  font-weight: 600;
}


/* =========================================================
   SUBTLE IMAGE SHINE
========================================================= */

.compact-story-image::after,
.compact-story-small-image::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  left: -55%;

  width: 35%;

  pointer-events: none;

  opacity: 0;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255,255,255,.15),
      transparent
    );

  transform:
    skewX(-15deg);
}


.compact-story-card:hover
.compact-story-image::after,
.compact-story-card:hover
.compact-story-small-image::after {
  opacity: 1;

  animation:
    compactStoryShine
    1.1s
    ease;
}


@keyframes compactStoryShine {

  from {
    left: -55%;
  }

  to {
    left: 125%;
  }

}


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

@media (max-width: 1000px) {

  .compact-stories-head {
    align-items: flex-start;
  }


  .compact-stories-grid {
    grid-template-columns:
      1fr;
  }


  .compact-story-featured {
    grid-template-rows:
      400px
      auto;
  }


  .compact-story-side {
    grid-template-columns:
      1fr
      1fr;

    grid-template-rows:
      auto;
  }


  .compact-story-small {
    grid-template-columns:
      1fr;

    gap: 15px;
  }


  .compact-story-small-image {
    min-height: 240px;
  }


  .compact-story-small-content {
    padding:
      4px
      8px
      8px;
  }

}


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

@media (max-width: 700px) {

  .compact-stories {
    padding:
      64px 0
      70px;
  }


  .compact-stories-head {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 26px;
  }


  .compact-stories-head h2 {
    font-size: 39px;
  }


  /*
     Keep a decent image height even
     on mobile.
  */

  .compact-story-featured {
    grid-template-rows:
      285px
      auto;
  }


  .compact-story-image {
    margin:
      12px
      12px
      0;

    border-radius: 14px;
  }


  .compact-story-image img {
    /*
       Mobile gets slightly less aggressive crop.
    */

    object-position:
      center 58%;
  }


  .compact-story-content {
    padding:
      21px
      20px
      24px;
  }


  .compact-story-content h3 {
    font-size: 20px;
  }


  .compact-story-meta {
    flex-wrap: wrap;
  }


  .compact-story-meta > div {
    flex:
      1 1
      120px;
  }


  .compact-story-side {
    grid-template-columns:
      1fr;
  }


  .compact-story-small {
    grid-template-columns:
      1fr;

    min-height: auto;

    padding: 12px;

    gap: 17px;
  }


  .compact-story-small-image {
    min-height: 230px;
  }


  .compact-story-small-content {
    padding:
      3px
      10px
      10px;
  }

}

/* =========================================================
   DAWN HOMEPAGE
   GLOBAL BODY DESIGN SYSTEM

   IMPORTANT:
   Keep this block at the VERY END of style.css.
   Does not modify HEADER or HERO.
========================================================= */


/* =========================================================
   BODY DESIGN TOKENS
========================================================= */

:root {

  /* Brand */
  --dawn-primary:
    #245dff;

  --dawn-primary-hover:
    #174ee5;

  --dawn-primary-soft:
    #edf3ff;


  /* Text */
  --dawn-heading:
    #14213d;

  --dawn-heading-soft:
    #26344f;

  --dawn-body:
    #5f6c80;

  --dawn-muted:
    #8792a5;

  --dawn-caption:
    #9aa4b4;


  /* Surfaces */
  --dawn-bg:
    #ffffff;

  --dawn-bg-soft:
    #f7f9fc;

  --dawn-line:
    #e3e8f0;


  /* Typography */
  --dawn-font-heading:
    "Manrope",
    sans-serif;

  --dawn-font-body:
    "Inter",
    Arial,
    sans-serif;


  /* Standard sizes */
  --dawn-section-title:
    clamp(
      42px,
      3.7vw,
      60px
    );

  --dawn-card-title:
    24px;

  --dawn-body-size:
    15px;

  --dawn-small-size:
    13px;

  --dawn-kicker-size:
    10px;

}


/* =========================================================
   BODY DEFAULTS
========================================================= */

main {
  color:
    var(--dawn-heading);

  font-family:
    var(--dawn-font-body);
}


/*
   Normal body text should never
   randomly inherit colors from
   individual components.
*/

.enterprise-trust,
.dawn-capabilities,
.journey-section,
.dawn-story,
.compact-stories {

  font-family:
    var(--dawn-font-body);

}


/* =========================================================
   GLOBAL SECTION EYEBROWS / KICKERS
========================================================= */

.client-row-kicker,
.dawn-cap-eyebrow,
.journey-kicker,
.dawn-story-kicker,
.compact-stories-kicker {

  color:
    var(--dawn-primary) !important;

  font-family:
    var(--dawn-font-body);

  font-size:
    var(--dawn-kicker-size) !important;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;

}


/* Lines beside eyebrow */

.dawn-cap-eyebrow span,
.journey-kicker::before {

  background:
    var(--dawn-primary) !important;

}


/* =========================================================
   GLOBAL SECTION HEADINGS
========================================================= */

/*
   Primary section headings now use
   exactly the same typography scale.
*/

.client-row-heading h2,
.dawn-cap-title h2,
.journey-intro h2,
.compact-stories-head h2 {

  color:
    var(--dawn-heading) !important;

  font-family:
    var(--dawn-font-heading) !important;

  font-size:
    var(--dawn-section-title) !important;

  font-weight:
    600 !important;

  line-height:
    1.06 !important;

  letter-spacing:
    -.045em !important;

}


/* Highlighted heading words */

.client-row-heading h2 span,
.dawn-cap-title h2 span,
.journey-intro h2 span,
.compact-stories-head h2 span {

  color:
    var(--dawn-primary) !important;

}


/* =========================================================
   GLOBAL SECTION INTRO COPY
========================================================= */

.client-row-heading > p,
.dawn-cap-intro p,
.journey-intro > p,
.compact-stories-head p {

  color:
    var(--dawn-body) !important;

  font-family:
    var(--dawn-font-body);

  font-size:
    var(--dawn-body-size) !important;

  font-weight:
    400;

  line-height:
    1.72 !important;

}


/* =========================================================
   WHAT WE DO
   MAIN DARK PANEL
========================================================= */

.dawn-cap-category {

  color:
    #8dbbff;

  font-size:
    var(--dawn-kicker-size) !important;

}


.dawn-cap-visual-content h3 {

  font-family:
    var(--dawn-font-heading);

  font-size:
    clamp(
      38px,
      3.2vw,
      52px
    ) !important;

  font-weight:
    600;

  line-height:
    1.06 !important;

  letter-spacing:
    -.045em !important;

}


.dawn-cap-visual-content p {

  color:
    rgba(
      230,
      238,
      255,
      .76
    ) !important;

  font-size:
    15px !important;

  line-height:
    1.7 !important;

}


.dawn-cap-visual-link {

  font-size:
    12px !important;

}


/* =========================================================
   WHAT WE DO
   RIGHT SIDE CAPABILITY LIST
========================================================= */

.dawn-cap-item-name {

  color:
    var(--dawn-heading) !important;

  font-family:
    var(--dawn-font-heading);

  font-size:
    22px !important;

  font-weight:
    600;

  line-height:
    1.25;

  letter-spacing:
    -.025em;

}


.dawn-cap-item.active
.dawn-cap-item-name,

.dawn-cap-trigger:hover
.dawn-cap-item-name {

  color:
    var(--dawn-primary) !important;

}


.dawn-cap-detail p {

  color:
    var(--dawn-body) !important;

  font-size:
    14px !important;

  line-height:
    1.65 !important;

}


/* Service pills */

.dawn-cap-services span {

  color:
    #5f6d82 !important;

  font-size:
    10px !important;

  font-weight:
    600;

}


/* =========================================================
   WHERE WE CREATE IMPACT
========================================================= */

.journey-title {

  color:
    var(--dawn-heading) !important;

  font-family:
    var(--dawn-font-heading);

  font-size:
    22px !important;

  font-weight:
    600;

  line-height:
    1.28;

  letter-spacing:
    -.025em;

}


.journey-item.active
.journey-title,

.journey-trigger:hover
.journey-title {

  color:
    var(--dawn-primary) !important;

}


.journey-number {

  color:
    var(--dawn-caption) !important;

  font-size:
    10px !important;

}


.journey-detail p {

  color:
    var(--dawn-body) !important;

  font-size:
    14px !important;

  line-height:
    1.7 !important;

}


/* =========================================================
   WHY DAWN STORY CARD
========================================================= */

/*
   This is a contained story card,
   so its title should be smaller than
   full-width section titles.
*/

.dawn-story-card h2 {

  color:
    var(--dawn-heading) !important;

  font-family:
    var(--dawn-font-heading);

  font-size:
    clamp(
      32px,
      2.5vw,
      42px
    ) !important;

  font-weight:
    600 !important;

  line-height:
    1.10 !important;

  letter-spacing:
    -.04em !important;

}


.dawn-story-card h2 span {

  color:
    var(--dawn-primary) !important;

}


.dawn-story-card p {

  color:
    var(--dawn-body) !important;

  font-size:
    15px !important;

  line-height:
    1.72 !important;

}


/* =========================================================
   SUCCESS STORIES
   FEATURED CARD
========================================================= */

.compact-story-content h3 {

  color:
    var(--dawn-heading) !important;

  font-family:
    var(--dawn-font-heading);

  font-size:
    24px !important;

  font-weight:
    600;

  line-height:
    1.24 !important;

  letter-spacing:
    -.03em;

}


.compact-story-content > p {

  color:
    var(--dawn-body) !important;

  font-size:
    14px !important;

  line-height:
    1.65 !important;

}


/* =========================================================
   SUCCESS STORIES
   SECONDARY STORIES
========================================================= */

.compact-story-tag-inline {

  color:
    var(--dawn-primary) !important;

  font-size:
    9px !important;

  font-weight:
    800;

  letter-spacing:
    .13em;

}


.compact-story-small-content h3 {

  color:
    var(--dawn-heading) !important;

  font-family:
    var(--dawn-font-heading);

  font-size:
    20px !important;

  font-weight:
    600;

  line-height:
    1.25 !important;

  letter-spacing:
    -.025em;

}


.compact-story-small-content p {

  color:
    var(--dawn-body) !important;

  font-size:
    13px !important;

  line-height:
    1.65 !important;

}


/* =========================================================
   SUCCESS STORY METRICS
========================================================= */

.compact-story-meta strong,
.compact-story-small-bottom strong {

  color:
    var(--dawn-primary) !important;

  font-family:
    var(--dawn-font-heading);

}


.compact-story-meta strong {

  font-size:
    20px !important;

}


.compact-story-meta span {

  color:
    var(--dawn-muted) !important;

  font-size:
    10px !important;

  line-height:
    1.4;

}


.compact-story-small-bottom strong {

  font-size:
    21px !important;

}


.compact-story-small-bottom
strong small {

  color:
    var(--dawn-muted) !important;

  font-family:
    var(--dawn-font-body);

  font-size:
    9px !important;

  line-height:
    1.4;

}


/* =========================================================
   ALL BODY LINKS / CTAs
========================================================= */

.dawn-cap-all,
.dawn-cap-visual-link,
.journey-cta,
.compact-stories-all,
.compact-story-link,
.compact-story-small-bottom a {

  font-family:
    var(--dawn-font-body);

  font-size:
    12px !important;

  font-weight:
    700;

}


/* Blue links */

.compact-story-link,
.compact-story-small-bottom a {

  color:
    var(--dawn-primary) !important;

}


/* =========================================================
   CLIENT TRUST
========================================================= */

.trust-proof-copy span {

  color:
    var(--dawn-muted) !important;

  font-size:
    9px !important;

}


.trust-proof-copy strong {

  color:
    var(--dawn-heading) !important;

  font-family:
    var(--dawn-font-heading);

  font-size:
    14px !important;

  font-weight:
    600;

  line-height:
    1.4;

}


/* =========================================================
   CONSISTENT TEXT SELECTION
========================================================= */

main ::selection {

  color:
    #ffffff;

  background:
    var(--dawn-primary);

}


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

@media (max-width: 1000px) {

  :root {

    --dawn-section-title:
      clamp(
        40px,
        6vw,
        52px
      );

  }


  .dawn-cap-item-name,
  .journey-title {

    font-size:
      20px !important;

  }

}


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

@media (max-width: 700px) {

  :root {

    --dawn-section-title:
      38px;

    --dawn-body-size:
      14px;

    --dawn-small-size:
      12.5px;

    --dawn-kicker-size:
      9px;

  }


  .client-row-heading h2,
  .dawn-cap-title h2,
  .journey-intro h2,
  .compact-stories-head h2 {

    font-size:
      38px !important;

    line-height:
      1.08 !important;

  }


  .dawn-cap-visual-content h3 {

    font-size:
      34px !important;

  }


  .dawn-story-card h2 {

    font-size:
      31px !important;

  }


  .dawn-cap-item-name,
  .journey-title {

    font-size:
      18px !important;

  }


  .compact-story-content h3 {

    font-size:
      21px !important;

  }


  .compact-story-small-content h3 {

    font-size:
      19px !important;

  }


  .dawn-cap-visual-content p,
  .dawn-story-card p,
  .compact-story-content > p {

    font-size:
      14px !important;

  }


  .dawn-cap-detail p,
  .journey-detail p,
  .compact-story-small-content p {

    font-size:
      13px !important;

  }

}

/* =========================================================
   INSIGHTS / BLOG SECTION
========================================================= */

.insights-section {
  position: relative;
  padding: 82px 0 88px;
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f9fc 100%
    );
}


/* =========================================================
   HEADER
========================================================= */

.insights-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;

  margin-bottom: 34px;
}


.insights-kicker {
  display: block;

  margin-bottom: 10px;

  color: var(--dawn-primary, #245dff);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}


.insights-head h2 {
  margin: 0;

  color: var(--dawn-heading, #14213d);

  font-family:
    var(--dawn-font-heading, Manrope, sans-serif);

  font-size:
    var(--dawn-section-title, clamp(42px, 3.7vw, 60px));

  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.045em;
}


.insights-head h2 span {
  color: var(--dawn-primary, #245dff);
}


.insights-head p {
  max-width: 560px;

  margin: 12px 0 0;

  color: var(--dawn-body, #5f6c80);

  font-size: 15px;
  line-height: 1.72;
}


/* =========================================================
   VIEW ALL
========================================================= */

.insights-view-all {
  min-height: 44px;

  padding: 0 18px;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  border: 1px solid #d6dce6;
  border-radius: 999px;

  color: var(--dawn-heading, #14213d);
  background: #ffffff;

  text-decoration: none;

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

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


.insights-view-all i {
  font-style: normal;

  transition:
    transform .25s ease;
}


.insights-view-all:hover {
  transform: translateY(-2px);

  color: var(--dawn-primary, #245dff);

  border-color: #aabfff;

  box-shadow:
    0 10px 25px
    rgba(36, 93, 255, .09);
}


.insights-view-all:hover i {
  transform: translateX(4px);
}


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

.insights-grid {
  display: grid;

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

  gap: 18px;
}


/* =========================================================
   CARD
========================================================= */

.insight-card {
  position: relative;

  overflow: hidden;

  border:
    1px solid #e3e8ef;

  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 10px 28px
    rgba(20, 32, 60, .05);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;
}


.insight-card:hover {
  transform:
    translateY(-6px);

  border-color:
    #c5d3f7;

  box-shadow:
    0 20px 42px
    rgba(20, 32, 60, .10);
}


/* =========================================================
   IMAGE
========================================================= */

.insight-image {
  position: relative;

  display: block;

  height: 210px;

  overflow: hidden;

  background: #0b1732;
}


.insight-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform:
    scale(1.01);

  transition:
    transform .65s
    cubic-bezier(.2,.8,.2,1),
    filter .45s ease;
}


.insight-card:hover
.insight-image img {
  transform:
    scale(1.07);
}


/* subtle overlay */

.insight-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(5, 14, 36, .32) 100%
    );

  pointer-events: none;
}


/* =========================================================
   CATEGORY TAG
========================================================= */

.insight-category {
  position: absolute;

  z-index: 3;

  top: 14px;
  left: 14px;

  padding:
    7px
    10px;

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

  border-radius: 999px;

  color: #ffffff;

  background:
    rgba(9, 21, 48, .52);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}


/* =========================================================
   CONTENT
========================================================= */

.insight-content {
  padding:
    22px
    22px
    24px;
}


.insight-meta {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 10px;

  color:
    var(--dawn-muted, #8792a5);

  font-size: 9px;
}


.insight-meta span + span::before {
  content: "•";

  margin-right: 9px;

  color: #bec6d2;
}


.insight-content h3 {
  margin: 0;

  color:
    var(--dawn-heading, #14213d);

  font-family:
    var(--dawn-font-heading, Manrope, sans-serif);

  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.025em;
}


.insight-content p {
  margin:
    11px 0 0;

  color:
    var(--dawn-body, #5f6c80);

  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   READ LINK
========================================================= */

.insight-link {
  margin-top: 20px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color:
    var(--dawn-primary, #245dff);

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;
}


.insight-link span {
  transition:
    transform .25s ease;
}


.insight-link:hover span {
  transform:
    translateX(4px);
}


/* =========================================================
   SUBTLE SHINE
========================================================= */

.insight-image::before {
  content: "";

  position: absolute;

  z-index: 2;

  top: 0;
  bottom: 0;

  left: -55%;

  width: 30%;

  opacity: 0;

  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255,255,255,.17),
      transparent
    );

  transform:
    skewX(-14deg);
}


.insight-card:hover
.insight-image::before {
  opacity: 1;

  animation:
    insightShine
    1.05s
    ease;
}


@keyframes insightShine {

  from {
    left: -55%;
  }

  to {
    left: 125%;
  }

}


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

@media (max-width: 1100px) {

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

}


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

@media (max-width: 700px) {

  .insights-section {
    padding:
      64px 0
      70px;
  }


  .insights-head {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 26px;
  }


  .insights-grid {
    grid-template-columns:
      1fr;
  }


  .insight-image {
    height: 230px;
  }


  .insight-content h3 {
    font-size: 19px;
  }


  .insight-content p {
    font-size: 13px;
  }

}

/* =========================================================
   FINAL CTA - PREMIUM COMPACT
========================================================= */

.final-cta-premium {
  position: relative;

  min-height: 290px;

  overflow: hidden;

  display: flex;
  align-items: center;

  padding:
    54px 0;

  color: #ffffff;

  background:
    #081429;
}


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

.final-cta-premium-bg {
  position: absolute;

  inset: -20%;

  z-index: 0;

  background:
    radial-gradient(
      circle at 20% 35%,
      rgba(55, 92, 255, .34),
      transparent 27%
    ),
    radial-gradient(
      circle at 80% 30%,
      rgba(16, 200, 196, .20),
      transparent 24%
    ),
    radial-gradient(
      circle at 62% 90%,
      rgba(103, 66, 255, .28),
      transparent 26%
    ),
    linear-gradient(
      118deg,
      #061225 0%,
      #0e2751 48%,
      #07162d 100%
    );

  background-size:
    130% 130%;

  animation:
    premiumCtaBackground
    8s
    ease-in-out
    infinite
    alternate;

  will-change:
    transform;
}


@keyframes premiumCtaBackground {

  0% {
    transform:
      translate3d(-2%, -1%, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(2%, 2%, 0)
      scale(1.04);
  }

  100% {
    transform:
      translate3d(-1%, 2%, 0)
      scale(1.02);
  }

}


/* =========================================================
   AURORA EFFECTS
========================================================= */

.cta-aurora {
  position: absolute;

  z-index: 1;

  border-radius: 50%;

  filter:
    blur(60px);

  pointer-events: none;

  mix-blend-mode:
    screen;
}


.cta-aurora-one {
  width: 300px;
  height: 180px;

  left: 4%;
  top: -50px;

  background:
    rgba(66, 95, 255, .36);

  animation:
    auroraOne
    5.5s
    ease-in-out
    infinite
    alternate;
}


.cta-aurora-two {
  width: 260px;
  height: 180px;

  right: 22%;
  top: 20px;

  background:
    rgba(25, 211, 194, .25);

  animation:
    auroraTwo
    6.5s
    ease-in-out
    infinite
    alternate;
}


.cta-aurora-three {
  width: 280px;
  height: 160px;

  right: 5%;
  bottom: -70px;

  background:
    rgba(111, 72, 255, .28);

  animation:
    auroraThree
    7s
    ease-in-out
    infinite
    alternate;
}


@keyframes auroraOne {

  to {
    transform:
      translate3d(
        55px,
        30px,
        0
      )
      scale(1.16);
  }

}


@keyframes auroraTwo {

  to {
    transform:
      translate3d(
        -45px,
        20px,
        0
      )
      scale(1.12);
  }

}


@keyframes auroraThree {

  to {
    transform:
      translate3d(
        -40px,
        -30px,
        0
      )
      scale(1.18);
  }

}


/* =========================================================
   MOVING LIGHT BEAMS
========================================================= */

.cta-beam {
  position: absolute;

  z-index: 2;

  width: 460px;
  height: 2px;

  pointer-events: none;

  opacity: .45;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(119, 170, 255, .95),
      rgba(65, 227, 218, .75),
      transparent
    );

  filter:
    blur(.4px);
}


.cta-beam-one {
  top: 30%;
  left: -35%;

  transform:
    rotate(-8deg);

  animation:
    beamMoveOne
    4.5s
    linear
    infinite;
}


.cta-beam-two {
  bottom: 22%;
  right: -35%;

  transform:
    rotate(9deg);

  animation:
    beamMoveTwo
    5.2s
    linear
    infinite;
}


@keyframes beamMoveOne {

  from {
    left: -35%;
  }

  to {
    left: 115%;
  }

}


@keyframes beamMoveTwo {

  from {
    right: -35%;
  }

  to {
    right: 115%;
  }

}


/* =========================================================
   ANIMATED MESH
========================================================= */

.cta-mesh {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  opacity: .09;

  background-image:
    linear-gradient(
      rgba(255,255,255,.16)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.16)
      1px,
      transparent 1px
    );

  background-size:
    48px
    48px;

  animation:
    meshShift
    10s
    linear
    infinite;
}


@keyframes meshShift {

  from {
    background-position:
      0 0;
  }

  to {
    background-position:
      48px 48px;
  }

}


/* =========================================================
   GLASS OBJECTS
========================================================= */

.cta-glass {
  position: absolute;

  z-index: 2;

  pointer-events: none;

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

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.015)
    );

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

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


.cta-glass-one {
  width: 95px;
  height: 95px;

  left: 48%;

  top: -20px;

  border-radius: 24px;

  transform:
    rotate(22deg);

  animation:
    glassOne
    5s
    ease-in-out
    infinite
    alternate;
}


.cta-glass-two {
  width: 66px;
  height: 66px;

  right: 13%;

  top: 28px;

  border-radius: 50%;

  animation:
    glassTwo
    6s
    ease-in-out
    infinite
    alternate;
}


.cta-glass-three {
  width: 125px;
  height: 55px;

  left: 57%;

  bottom: -15px;

  border-radius: 40px;

  transform:
    rotate(-12deg);

  animation:
    glassThree
    6.5s
    ease-in-out
    infinite
    alternate;
}


@keyframes glassOne {

  to {
    transform:
      translate3d(
        20px,
        16px,
        0
      )
      rotate(34deg);
  }

}


@keyframes glassTwo {

  to {
    transform:
      translate3d(
        -18px,
        22px,
        0
      )
      scale(1.08);
  }

}


@keyframes glassThree {

  to {
    transform:
      translate3d(
        -26px,
        -13px,
        0
      )
      rotate(-6deg);
  }

}


/* =========================================================
   PARTICLES
========================================================= */

.cta-particles {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;
}


.cta-particles span {
  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(142, 184, 255, .8);

  box-shadow:
    0 0 12px
    rgba(100, 163, 255, .8);

  animation:
    particleFloat
    5s
    ease-in-out
    infinite
    alternate;
}


.cta-particles span:nth-child(1) {
  left: 12%;
  top: 25%;
}


.cta-particles span:nth-child(2) {
  left: 31%;
  bottom: 20%;

  animation-delay: .8s;
}


.cta-particles span:nth-child(3) {
  left: 52%;
  top: 18%;

  animation-delay: 1.3s;
}


.cta-particles span:nth-child(4) {
  right: 31%;
  bottom: 22%;

  animation-delay: 1.8s;
}


.cta-particles span:nth-child(5) {
  right: 18%;
  top: 24%;

  animation-delay: 2.2s;
}


.cta-particles span:nth-child(6) {
  right: 6%;
  bottom: 29%;

  animation-delay: 2.8s;
}


@keyframes particleFloat {

  from {
    transform:
      translate3d(
        0,
        0,
        0
      );

    opacity: .35;
  }

  to {
    transform:
      translate3d(
        12px,
        -18px,
        0
      );

    opacity: 1;
  }

}


/* =========================================================
   INNER LAYOUT
========================================================= */

.final-cta-premium-inner {
  position: relative;

  z-index: 6;

  display: grid;

  grid-template-columns:
    1fr
    auto;

  align-items: center;

  gap: 80px;
}


/* =========================================================
   COPY
========================================================= */

.final-cta-premium-copy {
  max-width: 760px;
}


.final-cta-premium-kicker {
  display: block;

  margin-bottom: 9px;

  color:
    #9eb8ff;

  font-family:
    var(--dawn-font-body, Inter, sans-serif);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    .15em;
}


.final-cta-premium-copy h2 {
  margin: 0;

  color: #ffffff;

  font-family:
    var(--dawn-font-heading, Manrope, sans-serif);

  font-size:
    clamp(
      39px,
      3.7vw,
      55px
    );

  font-weight:
    600;

  line-height:
    1.04;

  letter-spacing:
    -.045em;
}


.final-cta-premium-copy h2 span {
  color:
    #92afff;
}


.final-cta-premium-copy p {
  max-width: 620px;

  margin:
    13px 0 0;

  color:
    rgba(225, 233, 249, .70);

  font-family:
    var(--dawn-font-body, Inter, sans-serif);

  font-size:
    15px;

  line-height:
    1.65;
}


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

.final-cta-premium-action {
  display: flex;

  justify-content: flex-end;

  align-items: center;
}


.final-cta-premium-button {
  position: relative;

  min-height: 60px;

  padding:
    7px
    7px
    7px
    25px;

  display: inline-flex;

  align-items: center;

  gap: 17px;

  white-space: nowrap;

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

  border-radius:
    999px;

  color:
    #14213d;

  background:
    #ffffff;

  text-decoration: none;

  font-family:
    var(--dawn-font-body, Inter, sans-serif);

  font-size:
    13px;

  font-weight:
    700;

  box-shadow:
    0
    20px
    45px
    rgba(0,0,0,.24);

  isolation: isolate;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


/* animated outer glow */

.final-cta-premium-button::before {
  content: "";

  position: absolute;

  inset: -2px;

  z-index: -1;

  border-radius: inherit;

  opacity: .65;

  background:
    linear-gradient(
      90deg,
      #3768ff,
      #48cfc5,
      #7255ff,
      #3768ff
    );

  background-size:
    300% 100%;

  filter:
    blur(7px);

  animation:
    buttonGlow
    3s
    linear
    infinite;
}


@keyframes buttonGlow {

  from {
    background-position:
      0% 50%;
  }

  to {
    background-position:
      300% 50%;
  }

}


.final-cta-premium-button i {
  width: 45px;
  height: 45px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #245dff,
      #597cff
    );

  font-style: normal;

  transition:
    transform .3s ease;
}


.final-cta-premium-button:hover {
  transform:
    translateY(-4px)
    scale(1.015);

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


.final-cta-premium-button:hover i {
  transform:
    rotate(45deg);
}


/* =========================================================
   BOTTOM ENERGY LINE
========================================================= */

.final-cta-premium::after {
  content: "";

  position: absolute;

  z-index: 5;

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

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      #456eff 28%,
      #4fe0d1 50%,
      #7458ff 72%,
      transparent 100%
    );

  background-size:
    200% 100%;

  animation:
    bottomEnergy
    4s
    linear
    infinite;
}


@keyframes bottomEnergy {

  from {
    background-position:
      0% 50%;
  }

  to {
    background-position:
      200% 50%;
  }

}


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

@media (max-width: 950px) {

  .final-cta-premium {
    min-height: auto;

    padding:
      52px 0;
  }


  .final-cta-premium-inner {
    grid-template-columns:
      1fr;

    gap: 27px;
  }


  .final-cta-premium-action {
    justify-content:
      flex-start;
  }

}


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

@media (max-width: 700px) {

  .final-cta-premium {
    padding:
      44px 0
      48px;
  }


  .final-cta-premium-inner {
    gap: 25px;
  }


  .final-cta-premium-copy h2 {
    font-size:
      37px;
  }


  .final-cta-premium-copy p {
    font-size:
      14px;
  }


  .final-cta-premium-button {
    min-height:
      56px;
  }


  .cta-glass-one {
    left: auto;
    right: 8%;

    opacity: .55;
  }


  .cta-glass-two,
  .cta-glass-three {
    display: none;
  }


  .cta-beam {
    opacity: .25;
  }

}


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

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

  .final-cta-premium-bg,
  .cta-aurora,
  .cta-beam,
  .cta-mesh,
  .cta-glass,
  .cta-particles span,
  .final-cta-premium::after,
  .final-cta-premium-button::before {

    animation:
      none !important;

  }

}

/* =========================================================
   FAQ SECTION
========================================================= */

.faq-section {
  position: relative;

  padding:
    82px 0
    88px;

  overflow: hidden;

  background:
    #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.faq-head {
  display: grid;

  grid-template-columns:
    1.1fr
    .9fr;

  gap: 70px;

  align-items: end;

  margin-bottom: 42px;
}


.faq-kicker {
  display: block;

  margin-bottom: 10px;

  color:
    var(--dawn-primary, #245dff);

  font-family:
    var(--dawn-font-body, Inter, sans-serif);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;
}


.faq-head h2 {
  margin: 0;

  color:
    var(--dawn-heading, #14213d);

  font-family:
    var(--dawn-font-heading, Manrope, sans-serif);

  font-size:
    var(--dawn-section-title, clamp(42px, 3.7vw, 60px));

  font-weight:
    600;

  line-height:
    1.06;

  letter-spacing:
    -.045em;
}


.faq-head h2 span {
  color:
    var(--dawn-primary, #245dff);
}


.faq-head > p {
  max-width: 500px;

  margin: 0;

  color:
    var(--dawn-body, #5f6c80);

  font-size:
    15px;

  line-height:
    1.72;
}


/* =========================================================
   FAQ LIST
========================================================= */

.faq-list {
  border-top:
    1px solid
    var(--dawn-line, #e3e8f0);
}


/* =========================================================
   FAQ ITEM
========================================================= */

.faq-item {
  position: relative;

  border-bottom:
    1px solid
    var(--dawn-line, #e3e8f0);

  transition:
    background .3s ease;
}


.faq-item.active {
  background:
    linear-gradient(
      90deg,
      rgba(36,93,255,.035),
      rgba(255,255,255,0)
    );
}


/* left active indicator */

.faq-item::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 3px;

  transform:
    scaleY(0);

  transform-origin:
    center;

  background:
    var(--dawn-primary, #245dff);

  transition:
    transform .3s ease;
}


.faq-item.active::before {
  transform:
    scaleY(1);
}


/* =========================================================
   QUESTION
========================================================= */

.faq-question {
  width: 100%;

  min-height: 90px;

  padding:
    0
    20px;

  display: grid;

  grid-template-columns:
    52px
    1fr
    46px;

  gap: 18px;

  align-items: center;

  border: 0;

  background: transparent;

  cursor: pointer;

  text-align: left;
}


.faq-number {
  color:
    var(--dawn-muted, #8792a5);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .08em;
}


.faq-question-text {
  max-width: 1050px;

  color:
    var(--dawn-heading, #14213d);

  font-family:
    var(--dawn-font-heading, Manrope, sans-serif);

  font-size:
    21px;

  font-weight:
    600;

  line-height:
    1.3;

  letter-spacing:
    -.025em;

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


.faq-question:hover
.faq-question-text,
.faq-item.active
.faq-question-text {
  color:
    var(--dawn-primary, #245dff);
}


/* =========================================================
   PLUS BUTTON
========================================================= */

.faq-icon {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  justify-self: end;

  border:
    1px solid
    #dbe2ec;

  border-radius: 50%;

  color:
    var(--dawn-primary, #245dff);

  background:
    #ffffff;

  font-size:
    21px;

  font-weight:
    400;

  line-height:
    1;

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


.faq-item.active
.faq-icon {
  color: #ffffff;

  border-color:
    var(--dawn-primary, #245dff);

  background:
    var(--dawn-primary, #245dff);

  transform:
    rotate(45deg);
}


/* =========================================================
   ANSWER
========================================================= */

.faq-answer {
  max-height: 0;

  overflow: hidden;

  opacity: 0;

  transition:
    max-height .45s ease,
    opacity .35s ease;
}


.faq-answer-inner {
  padding:
    0
    90px
    0
    90px;
}


.faq-answer-inner p {
  max-width: 950px;

  margin: 0;

  color:
    var(--dawn-body, #5f6c80);

  font-size:
    14px;

  line-height:
    1.72;
}


.faq-item.active
.faq-answer {
  max-height: 190px;

  opacity: 1;
}


.faq-item.active
.faq-answer-inner {
  padding-bottom:
    27px;
}


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

.faq-question:hover
.faq-icon {
  border-color:
    #b9caff;
}


.faq-question:hover
.faq-question-text {
  transform:
    translateX(3px);
}


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

@media (max-width: 950px) {

  .faq-head {
    grid-template-columns:
      1fr;

    gap: 22px;
  }


  .faq-question-text {
    font-size:
      20px;
  }

}


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

@media (max-width: 700px) {

  .faq-section {
    padding:
      64px 0
      70px;
  }


  .faq-head {
    margin-bottom:
      30px;
  }


  .faq-question {
    min-height:
      84px;

    padding:
      0
      8px;

    grid-template-columns:
      30px
      1fr
      38px;

    gap:
      10px;
  }


  .faq-question-text {
    font-size:
      17px;

    line-height:
      1.35;
  }


  .faq-icon {
    width:
      34px;

    height:
      34px;

    font-size:
      19px;
  }


  .faq-answer-inner {
    padding:
      0
      48px
      0
      40px;
  }


  .faq-item.active
  .faq-answer-inner {
    padding-bottom:
      22px;
  }


  .faq-answer-inner p {
    font-size:
      13px;
  }

}

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

.site-footer {
  position: relative;

  overflow: hidden;

  padding:
    76px 0
    0;

  color: #ffffff;

  background: #061225;
}


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

.footer-bg {
  position: absolute;

  inset: -20%;

  z-index: 0;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(60, 92, 255, .20),
      transparent 28%
    ),
    radial-gradient(
      circle at 80% 25%,
      rgba(36, 203, 194, .13),
      transparent 26%
    ),
    radial-gradient(
      circle at 55% 90%,
      rgba(108, 72, 255, .18),
      transparent 30%
    ),
    linear-gradient(
      125deg,
      #061225 0%,
      #0b1c3a 55%,
      #071529 100%
    );

  animation:
    footerBackgroundMove
    12s
    ease-in-out
    infinite
    alternate;
}


@keyframes footerBackgroundMove {

  from {
    transform:
      translate3d(
        -1%,
        -1%,
        0
      )
      scale(1);
  }

  to {
    transform:
      translate3d(
        2%,
        1%,
        0
      )
      scale(1.04);
  }

}


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

.footer-grid {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  opacity: .06;

  background-image:
    linear-gradient(
      rgba(255,255,255,.16)
      1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.16)
      1px,
      transparent 1px
    );

  background-size:
    52px
    52px;

  animation:
    footerGridMove
    14s
    linear
    infinite;
}


@keyframes footerGridMove {

  from {
    background-position:
      0 0;
  }

  to {
    background-position:
      52px 52px;
  }

}


/* =========================================================
   GLOW ORBS
========================================================= */

.footer-orb {
  position: absolute;

  z-index: 1;

  pointer-events: none;

  border-radius: 50%;

  filter:
    blur(60px);
}


.footer-orb-one {
  width: 300px;
  height: 300px;

  left: -120px;
  top: 90px;

  background:
    rgba(63, 94, 255, .18);

  animation:
    footerOrbOne
    8s
    ease-in-out
    infinite
    alternate;
}


.footer-orb-two {
  width: 270px;
  height: 270px;

  right: 10%;
  top: -80px;

  background:
    rgba(29, 207, 196, .14);

  animation:
    footerOrbTwo
    9s
    ease-in-out
    infinite
    alternate;
}


.footer-orb-three {
  width: 330px;
  height: 250px;

  right: -120px;
  bottom: -90px;

  background:
    rgba(105, 72, 255, .16);

  animation:
    footerOrbThree
    10s
    ease-in-out
    infinite
    alternate;
}


@keyframes footerOrbOne {

  to {
    transform:
      translate3d(
        50px,
        -25px,
        0
      )
      scale(1.1);
  }

}


@keyframes footerOrbTwo {

  to {
    transform:
      translate3d(
        -45px,
        35px,
        0
      )
      scale(1.12);
  }

}


@keyframes footerOrbThree {

  to {
    transform:
      translate3d(
        -45px,
        -30px,
        0
      )
      scale(1.08);
  }

}


/* =========================================================
   MOVING LIGHT LINES
========================================================= */

.footer-line {
  position: absolute;

  z-index: 2;

  width: 500px;
  height: 1px;

  pointer-events: none;

  opacity: .35;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(107, 153, 255, .8),
      rgba(59, 222, 208, .6),
      transparent
    );
}


.footer-line-one {
  top: 22%;
  left: -500px;

  transform:
    rotate(-7deg);

  animation:
    footerLineOne
    7s
    linear
    infinite;
}


.footer-line-two {
  bottom: 24%;
  right: -500px;

  transform:
    rotate(8deg);

  animation:
    footerLineTwo
    8s
    linear
    infinite;
}


@keyframes footerLineOne {

  from {
    left: -500px;
  }

  to {
    left: 110%;
  }

}


@keyframes footerLineTwo {

  from {
    right: -500px;
  }

  to {
    right: 110%;
  }

}


/* =========================================================
   MAIN CONTENT POSITION
========================================================= */

.site-footer
.nav-container {
  position: relative;

  z-index: 5;
}


/* =========================================================
   TOP GRID
========================================================= */

.footer-top {
  display: grid;

  grid-template-columns:
    1.45fr
    .85fr
    .9fr
    .75fr;

  gap: 56px;

  padding-bottom:
    52px;

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


/* =========================================================
   BRAND
========================================================= */

.footer-brand {
  max-width: 360px;
}


.footer-logo {
  display: inline-flex;

  align-items: center;

  gap: 13px;

  color: #ffffff;

  text-decoration: none;
}


.footer-logo-symbol {
  position: relative;

  width: 44px;
  height: 35px;
}


.footer-wing {
  position: absolute;

  top: 8px;

  width: 22px;
  height: 22px;

  border-radius:
    4px;

  background:
    linear-gradient(
      145deg,
      #68a0ff,
      #245dff
    );
}


.footer-wing.wing-left {
  left: 2px;

  transform:
    rotate(45deg);
}


.footer-wing.wing-right {
  right: 2px;

  opacity: .75;

  transform:
    rotate(45deg);
}


.footer-logo-copy {
  display: flex;

  flex-direction: column;
}


.footer-logo-copy strong {
  color: #ffffff;

  font-family:
    var(--dawn-font-heading, Manrope, sans-serif);

  font-size: 27px;

  line-height: 1;
}


.footer-logo-copy small {
  margin-top: 5px;

  color:
    rgba(223, 232, 248, .46);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: .12em;
}


.footer-brand > p {
  max-width: 340px;

  margin:
    24px 0 0;

  color:
    rgba(220, 229, 247, .62);

  font-size: 14px;

  line-height: 1.75;
}


/* =========================================================
   SOCIAL ICONS
   BRAND COLORS
========================================================= */

.footer-social {
  margin-top: 27px;

  display: flex;

  flex-wrap: wrap;

  gap: 9px;
}


.footer-social-link {
  position: relative;

  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  overflow: hidden;

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

  border-radius: 50%;

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

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

  text-decoration: none;

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


.footer-social-link svg {
  position: relative;

  z-index: 2;

  width: 18px;
  height: 18px;

  transition:
    transform .3s ease;
}


.footer-social-link:hover {
  transform:
    translateY(-4px);
}


.footer-social-link:hover svg {
  transform:
    scale(1.1);
}


/* =========================================================
   LINKEDIN
========================================================= */

.footer-social-link[aria-label="LinkedIn"]:hover {
  color: #ffffff;

  background: #0A66C2;

  border-color: #0A66C2;

  box-shadow:
    0
    10px
    26px
    rgba(10,102,194,.30);
}


/* =========================================================
   FACEBOOK
========================================================= */

.footer-social-link[aria-label="Facebook"]:hover {
  color: #ffffff;

  background: #1877F2;

  border-color: #1877F2;

  box-shadow:
    0
    10px
    26px
    rgba(24,119,242,.30);
}


/* =========================================================
   INSTAGRAM
========================================================= */

.footer-social-link[aria-label="Instagram"]:hover {
  color: #ffffff;

  background:
    radial-gradient(
      circle at 30% 105%,
      #fdf497 0%,
      #fdf497 5%,
      #fd5949 45%,
      #d6249f 60%,
      #285AEB 90%
    );

  border-color:
    rgba(225,72,146,.75);

  box-shadow:
    0
    10px
    28px
    rgba(214,36,159,.28);
}


/* =========================================================
   WHATSAPP
========================================================= */

.footer-social-link[aria-label="WhatsApp"]:hover {
  color: #ffffff;

  background: #25D366;

  border-color: #25D366;

  box-shadow:
    0
    10px
    26px
    rgba(37,211,102,.28);
}


/* =========================================================
   YOUTUBE
========================================================= */

.footer-social-link[aria-label="YouTube"]:hover {
  color: #ffffff;

  background: #FF0000;

  border-color: #FF0000;

  box-shadow:
    0
    10px
    26px
    rgba(255,0,0,.28);
}


/* =========================================================
   X / TWITTER
========================================================= */

.footer-social-link[aria-label="X"]:hover {
  color: #ffffff;

  background: #000000;

  border-color:
    rgba(255,255,255,.30);

  box-shadow:
    0
    10px
    26px
    rgba(0,0,0,.35);
}


/* =========================================================
   OPTIONAL SUBTLE BRAND INDICATOR
   BEFORE HOVER
========================================================= */

.footer-social-link[aria-label="LinkedIn"] {
  color: #5ba4e5;
}


.footer-social-link[aria-label="Facebook"] {
  color: #72aaf7;
}


.footer-social-link[aria-label="Instagram"] {
  color: #e779bb;
}


.footer-social-link[aria-label="WhatsApp"] {
  color: #55d987;
}


.footer-social-link[aria-label="YouTube"] {
  color: #ff6b6b;
}


.footer-social-link[aria-label="X"] {
  color: #d4d9e2;
}


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

@media (max-width: 480px) {

  .footer-social-link {
    width: 38px;
    height: 38px;
  }


  .footer-social-link svg {
    width: 17px;
    height: 17px;
  }

}


/* =========================================================
   LINK COLUMNS
========================================================= */

.footer-column h3 {
  margin:
    0 0
    19px;

  color: #ffffff;

  font-family:
    var(--dawn-font-heading, Manrope, sans-serif);

  font-size: 15px;

  font-weight: 600;
}


.footer-column a {
  position: relative;

  width: fit-content;

  display: block;

  margin-top: 12px;

  color:
    rgba(218, 227, 245, .60);

  text-decoration: none;

  font-size: 13px;

  line-height: 1.45;

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


.footer-column a::before {
  content: "";

  position: absolute;

  top: 50%;
  left: -15px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    #6795ff;

  opacity: 0;

  transform:
    translateY(-50%)
    scale(0);

  transition:
    .22s ease;
}


.footer-column a:hover {
  color: #ffffff;

  transform:
    translateX(7px);
}


.footer-column a:hover::before {
  opacity: 1;

  transform:
    translateY(-50%)
    scale(1);
}


/* =========================================================
   CONTACT + LOCATIONS
========================================================= */

.footer-contact-section {
  display: grid;

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

  gap: 70px;

  padding:
    46px 0
    44px;

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


.footer-label {
  display: block;

  margin-bottom: 14px;

  color:
    #82a8ff;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .15em;
}


/* EMAIL */

.footer-email {
  display: inline-block;

  color: #ffffff;

  text-decoration: none;

  font-family:
    var(--dawn-font-heading, Manrope, sans-serif);

  font-size:
    clamp(
      21px,
      2vw,
      29px
    );

  font-weight: 500;

  letter-spacing: -.02em;

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


.footer-email:hover {
  color:
    #83a8ff;

  transform:
    translateX(3px);
}


/* PHONES */

.footer-phone-row {
  margin-top: 25px;

  display: flex;

  gap: 38px;
}


.footer-phone-row div {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


.footer-phone-row span {
  color:
    rgba(218, 227, 245, .42);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .13em;
}


.footer-phone-row a {
  color:
    rgba(239, 244, 255, .82);

  text-decoration: none;

  font-size: 13px;

  transition:
    color .2s ease;
}


.footer-phone-row a:hover {
  color: #ffffff;
}


/* =========================================================
   LOCATIONS
========================================================= */

.footer-location-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 30px;
}


.footer-location {
  display: flex;

  gap: 16px;
}




.footer-location strong {
  color: #ffffff;

  font-family:
    var(--dawn-font-heading, Manrope, sans-serif);

  font-size: 14px;

  font-weight: 600;
}


.footer-location p {
  margin:
    7px 0 0;

  color:
    rgba(218, 227, 245, .55);

  font-size: 12px;

  line-height: 1.65;
}


/* =========================================================
   BOTTOM
========================================================= */

.footer-bottom {
  min-height: 76px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;
}


.footer-bottom p {
  margin: 0;

  color:
    rgba(218, 227, 245, .42);

  font-size: 10px;
}


.footer-bottom > div {
  display: flex;

  gap: 22px;
}


.footer-bottom a {
  color:
    rgba(218, 227, 245, .42);

  text-decoration: none;

  font-size: 10px;

  transition:
    color .2s ease;
}


.footer-bottom a:hover {
  color: #ffffff;
}


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

@media (max-width: 1050px) {

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


  .footer-column:last-child {
    grid-column:
      2;
  }


  .footer-contact-section {
    grid-template-columns:
      1fr;

    gap:
      38px;
  }

}


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

@media (max-width: 700px) {

  .site-footer {
    padding-top:
      58px;
  }


  .footer-top {
    grid-template-columns:
      1fr
      1fr;

    gap:
      38px
      22px;

    padding-bottom:
      40px;
  }


  .footer-brand {
    grid-column:
      1 / -1;
  }


  .footer-column:last-child {
    grid-column:
      auto;
  }


  .footer-contact-section {
    padding:
      38px 0;
  }


  .footer-phone-row {
    flex-direction:
      column;

    gap:
      16px;
  }


  .footer-location-grid {
    grid-template-columns:
      1fr;

    gap:
      24px;
  }


  .footer-bottom {
    padding:
      24px 0;

    flex-direction:
      column;

    align-items:
      flex-start;
  }

}


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

@media (max-width: 480px) {

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


  .footer-email {
    font-size:
      19px;
  }


  .footer-social-link {
    width:
      38px;

    height:
      38px;
  }

}


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

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

  .footer-bg,
  .footer-grid,
  .footer-orb,
  .footer-line {

    animation:
      none !important;

  }

}

/* =========================================================
   LOCATION FLAGS
========================================================= */

.footer-location {
  display: flex;

  align-items: flex-start;

  gap: 16px;
}


.footer-location-flag {
  position: relative;

  width: 48px;
  height: 48px;

  flex:
    0 0
    48px;

  display: grid;

  place-items: center;

  overflow: hidden;

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

  border-radius: 13px;

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

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08);

  font-size: 25px;

  line-height: 1;

  transition:
    transform .35s
    cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}


/* subtle glow */

.footer-location-flag::before {
  content: "";

  position: absolute;

  inset: -10px;

  z-index: -1;

  opacity: 0;

  border-radius: 50%;

  background:
    rgba(80,130,255,.20);

  filter:
    blur(15px);

  transition:
    opacity .35s ease;
}


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

.footer-location:hover
.footer-location-flag {
  transform:
    translateY(-4px)
    scale(1.04);

  border-color:
    rgba(130,168,255,.32);

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

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


.footer-location:hover
.footer-location-flag::before {
  opacity: 1;
}


/* =========================================================
   LOCATION CONTENT
========================================================= */

.footer-location-content {
  min-width: 0;
}


.footer-location-content strong {
  display: block;

  color: #ffffff;

  font-family:
    var(
      --dawn-font-heading,
      Manrope,
      sans-serif
    );

  font-size: 14px;

  font-weight: 600;

  line-height: 1.35;
}


.footer-location-content p {
  margin:
    7px 0 0;

  color:
    rgba(218,227,245,.55);

  font-family:
    var(
      --dawn-font-body,
      Inter,
      sans-serif
    );

  font-size: 12px;

  line-height: 1.65;
}


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

@media (max-width: 700px) {

  .footer-location-flag {
    width: 45px;
    height: 45px;

    flex-basis: 45px;

    font-size: 23px;
  }

}

/* =========================================================
   DAWN LOGO IMAGE
========================================================= */

.dawn-logoo {
  display: flex;
  align-items: center;

  flex-shrink: 0;

  text-decoration: none;
}


.dawn-logoo-image {
  display: block;

  width: auto;
  height: 60px;

  object-fit: contain;

  transition:
    transform .3s ease,
    opacity .3s ease;
}


.dawn-logoo:hover
.dawn-logoo-image {
  transform:
    scale(1.025);

  opacity: .96;
}


/* Scrolled header */

.dawn-header.scrolled
.dawn-logoo-image {
  height: 46px;
}


/* Tablet */

@media (max-width: 920px) {

  .dawn-logoo-image {
    height: 46px;
  }

}


/* Mobile */

@media (max-width: 600px) {

  .dawn-logoo-image {
    height: 42px;
  }

}

/* =========================================================
   DAWN LOGO - DARK / LIGHT HEADER STATES
========================================================= */

.dawn-logo {
  position: relative;

  width: 190px;
  height: 58px;

  display: flex;
  align-items: center;

  flex-shrink: 0;

  text-decoration: none;
}


.dawn-logo-image {
  position: absolute;

  left: 0;
  top: 50%;

  width: auto;
  height: 60px;

  object-fit: contain;

  transform:
    translateY(-50%);

  transition:
    opacity .3s ease,
    transform .3s ease;
}


/* =========================================================
   DEFAULT HEADER
   DARK HERO = WHITE LOGO
========================================================= */

.dawn-logo-white {
  opacity: 1;
  visibility: visible;
}


.dawn-logo-blue {
  opacity: 0;
  visibility: hidden;
}


/* =========================================================
   SCROLLED HEADER
   WHITE HEADER = BLUE LOGO
========================================================= */

.dawn-header.scrolled
.dawn-logo-white {
  opacity: 0;
  visibility: hidden;
}


.dawn-header.scrolled
.dawn-logo-blue {
  opacity: 1;
  visibility: visible;
}


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

.dawn-logo:hover
.dawn-logo-image {
  transform:
    translateY(-50%)
    scale(1.025);
}


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

@media (max-width: 920px) {

  .dawn-logo {
    width: 165px;
    height: 52px;
  }


  .dawn-logo-image {
    height: 46px;
  }

}


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

@media (max-width: 600px) {

  .dawn-logo {
    width: 145px;
    height: 48px;
  }


  .dawn-logo-image {
    height: 42px;
  }

}

/* =========================================================
   FINAL 2026 NAVIGATION + FAQ + REVEAL OVERRIDES
   White enterprise menu / TCS-inspired information hierarchy
========================================================= */

:root {
  --menu-blue: #245dff;
  --menu-heading: #14213d;
  --menu-body: #67758c;
  --menu-line: #e3e8f0;
  --menu-bg: #ffffff;
  --dawn-header-height: 92px;
  --dawn-header-scrolled-height: 78px;
}

.nav-item.has-dropdown {
  position: relative;
}

@media (min-width: 921px) {
  .nav-item.has-dropdown::after {
    content: "";
    position: absolute;
    left: -22px;
    right: -22px;
    top: 100%;
    height: 42px;
    background: transparent;
    pointer-events: auto;
  }
}

.dawn-enterprise-menu,
.dawn-simple-menu {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--dawn-header-height) !important;
  width: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-4px) !important;
  pointer-events: none !important;
  background: rgba(255,255,255,.992) !important;
  border: 0 !important;
  border-top: 1px solid rgba(36,93,255,.12) !important;
  border-radius: 0 !important;
  box-shadow: 0 28px 75px rgba(19,41,78,.14) !important;
  transition: opacity .2s ease, visibility .2s ease, transform .25s ease !important;
  z-index: 10030 !important;
}

.dawn-enterprise-menu {
  min-height: 485px;
  overflow: hidden;
}

.dawn-simple-menu {
  min-height: 300px;
  overflow: hidden;
}

.dawn-header.scrolled .dawn-enterprise-menu,
.dawn-header.scrolled .dawn-simple-menu {
  top: var(--dawn-header-scrolled-height) !important;
}

.nav-item:hover > .dawn-enterprise-menu,
.nav-item:hover > .dawn-simple-menu,
.nav-item.menu-open-desktop > .dawn-enterprise-menu,
.nav-item.menu-open-desktop > .dawn-simple-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.menu-bg-grid {
  position: absolute;
  inset: 0;
  opacity: .48;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(36,93,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,93,255,.025) 1px, transparent 1px);
  background-size: 54px 54px;
}

.menu-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.menu-bg-orb-one {
  width: 380px;
  height: 380px;
  right: 5%;
  top: -230px;
  background: rgba(36,93,255,.11);
}

.menu-bg-orb-two {
  width: 260px;
  height: 260px;
  left: 17%;
  bottom: -180px;
  background: rgba(104,137,255,.075);
}

.menu-bg-word {
  position: absolute;
  left: 3%;
  bottom: -48px;
  color: rgba(36,93,255,.022);
  font-family: Manrope, sans-serif;
  font-size: clamp(100px,12vw,190px);
  font-weight: 800;
  letter-spacing: -.07em;
  pointer-events: none;
}

.dawn-enterprise-menu-inner {
  position: relative !important;
  z-index: 3;
  width: min(1740px, calc(100% - 110px)) !important;
  min-height: 485px !important;
  margin: auto !important;
  padding: 48px 0 52px !important;
  display: grid !important;
  grid-template-columns: 310px 350px minmax(0,1fr) !important;
  gap: 58px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.enterprise-menu-intro {
  padding-right: 18px;
}

.enterprise-menu-label {
  display: block;
  margin-bottom: 16px;
  color: var(--menu-blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}

.enterprise-menu-intro h2 {
  margin: 0;
  color: var(--menu-heading);
  font-family: Manrope,sans-serif;
  font-size: 29px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.035em;
}

.enterprise-menu-intro h2 span {
  color: var(--menu-blue);
}

.enterprise-menu-intro p {
  max-width: 285px;
  margin: 19px 0 0;
  color: var(--menu-body);
  font-size: 13px;
  line-height: 1.7;
}

.enterprise-menu-cta {
  margin-top: 34px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #26364e;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: color .25s ease, gap .25s ease;
}

.enterprise-menu-cta span {
  color: var(--menu-blue);
  font-size: 19px;
}

.enterprise-menu-cta:hover {
  gap: 19px;
  color: var(--menu-blue);
}

.enterprise-menu-categories {
  align-self: start;
  border-top: 1px solid var(--menu-line);
}

.enterprise-category {
  width: 100%;
  min-height: 64px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 0;
  border-bottom: 1px solid var(--menu-line);
  color: #657187;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: color .25s ease, padding .25s ease, background .25s ease;
}

.enterprise-category i {
  color: #9aa6b8;
  font-style: normal;
  font-size: 26px;
  font-weight: 300;
  transition: color .25s ease, transform .25s ease;
}

.enterprise-category:hover,
.enterprise-category.active {
  padding-left: 16px;
  color: var(--menu-heading);
  background: linear-gradient(90deg, rgba(36,93,255,.075), rgba(36,93,255,.015));
}

.enterprise-category:hover i,
.enterprise-category.active i {
  color: var(--menu-blue);
  transform: translateX(3px);
}

.enterprise-category.active {
  box-shadow: inset 3px 0 0 var(--menu-blue);
}

.enterprise-menu-content {
  position: relative;
  align-self: start;
  min-height: 360px;
}

.enterprise-menu-panel {
  display: none !important;
  animation: finalMenuPanelReveal .32s ease both;
}

.enterprise-menu-panel.active {
  display: block !important;
}

@keyframes finalMenuPanelReveal {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.enterprise-link-column {
  max-width: 620px;
  display: flex;
  flex-direction: column;
}

.enterprise-column-title {
  margin-bottom: 12px;
  color: var(--menu-blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.enterprise-link-column a {
  position: relative;
  min-height: 56px;
  padding: 15px 34px 15px 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--menu-line);
  color: #657187;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
  transition: color .22s ease, padding-left .22s ease, background .22s ease;
}

.enterprise-link-column a::after {
  content: "→";
  position: absolute;
  right: 6px;
  opacity: 0;
  color: var(--menu-blue);
  transform: translateX(-6px);
  transition: opacity .22s ease, transform .22s ease;
}

.enterprise-link-column a:hover {
  padding-left: 10px;
  color: var(--menu-blue);
  background: linear-gradient(90deg, rgba(36,93,255,.045), transparent);
}

.enterprise-link-column a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.simple-menu-shell {
  position: relative;
  width: min(1500px, calc(100% - 110px));
  min-height: 300px;
  margin: auto;
  padding: 43px 0 45px;
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 80px;
  overflow: hidden;
}

.simple-menu-shell-compact,
.simple-menu-shell-company {
  max-width: 1080px;
}

.simple-menu-bg {
  position: absolute;
  width: 450px;
  height: 450px;
  right: -150px;
  top: -310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36,93,255,.11), rgba(36,93,255,.02) 55%, transparent 70%);
  pointer-events: none;
}

.simple-menu-intro {
  position: relative;
  z-index: 2;
}

.simple-menu-intro > span {
  display: block;
  margin-bottom: 14px;
  color: var(--menu-blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}

.simple-menu-intro strong {
  display: block;
  color: var(--menu-heading);
  font-family: Manrope,sans-serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -.025em;
}

.simple-menu-intro p {
  margin: 14px 0 0;
  color: var(--menu-body);
  font-size: 12px;
  line-height: 1.7;
}

.simple-menu-links {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 50px;
  align-content: start;
  border-top: 1px solid var(--menu-line);
}

.simple-menu-links.single-column {
  grid-template-columns: 1fr;
}

.simple-menu-links a {
  min-height: 57px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--menu-line);
  color: #657187;
  text-decoration: none;
  font-size: 14px;
  transition: color .23s ease, padding-left .23s ease, background .23s ease;
}

.simple-menu-links a span {
  opacity: 0;
  color: var(--menu-blue);
  transform: translateX(-6px);
  transition: opacity .23s ease, transform .23s ease;
}

.simple-menu-links a:hover {
  padding-left: 10px;
  color: var(--menu-blue);
  background: linear-gradient(90deg, rgba(36,93,255,.045), transparent);
}

.simple-menu-links a:hover span {
  opacity: 1;
  transform: translateX(0);
}

@media (min-width: 921px) {
  .dawn-enterprise-menu-inner > *,
  .simple-menu-shell > .simple-menu-intro,
  .simple-menu-shell > .simple-menu-links {
    opacity: 0;
    transform: translateY(10px);
  }

  .nav-item:hover .dawn-enterprise-menu-inner > *:nth-child(1),
  .nav-item.menu-open-desktop .dawn-enterprise-menu-inner > *:nth-child(1),
  .nav-item:hover .simple-menu-shell > .simple-menu-intro,
  .nav-item.menu-open-desktop .simple-menu-shell > .simple-menu-intro {
    animation: finalDawnMenuOpen .38s .03s ease forwards;
  }

  .nav-item:hover .dawn-enterprise-menu-inner > *:nth-child(2),
  .nav-item.menu-open-desktop .dawn-enterprise-menu-inner > *:nth-child(2),
  .nav-item:hover .simple-menu-shell > .simple-menu-links,
  .nav-item.menu-open-desktop .simple-menu-shell > .simple-menu-links {
    animation: finalDawnMenuOpen .38s .10s ease forwards;
  }

  .nav-item:hover .dawn-enterprise-menu-inner > *:nth-child(3),
  .nav-item.menu-open-desktop .dawn-enterprise-menu-inner > *:nth-child(3) {
    animation: finalDawnMenuOpen .38s .17s ease forwards;
  }
}

@keyframes finalDawnMenuOpen {
  to { opacity: 1; transform: translateY(0); }
}

/* Centered compact FAQ */
.faq-section {
  position: relative !important;
  padding: 78px 0 84px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg,#f8faff 0%,#fff 100%) !important;
}

.faq-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: 50%;
  top: -360px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(36,93,255,.08);
  filter: blur(110px);
}

.faq-head {
  position: relative !important;
  z-index: 2;
  max-width: 820px !important;
  margin: 0 auto 38px !important;
  display: block !important;
  text-align: center !important;
}

.faq-kicker {
  display: block;
  margin-bottom: 10px;
  color: #245dff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.faq-head h2 {
  margin: 0;
  color: #14213d;
  font-family: Manrope,sans-serif;
  font-size: clamp(38px,3.4vw,54px) !important;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.045em;
}

.faq-head h2 span { color: #245dff; }

.faq-head > p {
  max-width: 620px !important;
  margin: 16px auto 0 !important;
  color: #5f6c80;
  font-size: 13px !important;
  line-height: 1.7;
}

.faq-list {
  position: relative;
  z-index: 2;
  max-width: 960px !important;
  margin: auto !important;
  overflow: hidden;
  border: 1px solid #e1e7f0 !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 20px 55px rgba(22,42,80,.055) !important;
}

.faq-item {
  border-bottom: 1px solid #e5eaf1 !important;
  transition: background .3s ease;
}

.faq-item:last-child { border-bottom: 0 !important; }
.faq-item.active { background: #f6f8ff !important; }

.faq-question {
  width: 100%;
  min-height: 76px !important;
  padding: 0 20px !important;
  display: grid !important;
  grid-template-columns: 38px 1fr 36px !important;
  gap: 15px !important;
  align-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.faq-number { color: #98a2b3; font-size: 9px; font-weight: 800; }

.faq-question-text {
  color: #14213d;
  font-family: Manrope,sans-serif;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.018em;
  transition: color .25s ease, transform .25s ease;
}

.faq-question:hover .faq-question-text,
.faq-item.active .faq-question-text { color: #245dff; }
.faq-question:hover .faq-question-text { transform: translateX(3px); }

.faq-icon {
  width: 32px !important;
  height: 32px !important;
  display: grid;
  place-items: center;
  border: 1px solid #dce3ed;
  border-radius: 50%;
  color: #245dff;
  background: #fff;
  font-size: 17px !important;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

.faq-item.active .faq-icon {
  color: #fff;
  background: #245dff;
  border-color: #245dff;
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s ease, opacity .32s ease;
}

.faq-answer-inner { padding: 0 70px 0 73px !important; }

.faq-answer-inner p {
  max-width: 740px !important;
  margin: 0;
  color: #5f6c80;
  font-size: 13px !important;
  line-height: 1.72;
}

.faq-item.active .faq-answer { max-height: 300px !important; opacity: 1; }
.faq-item.active .faq-answer-inner { padding-bottom: 24px !important; }

/* Global reveal enhancement */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(3px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1), filter .7s cubic-bezier(.2,.8,.2,1) !important;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.dawn-sequence-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s ease, transform .62s cubic-bezier(.2,.8,.2,1);
}

.section-in-view .dawn-sequence-item { opacity: 1; transform: translateY(0); }
.section-in-view .dawn-sequence-item:nth-child(1) { transition-delay: .04s; }
.section-in-view .dawn-sequence-item:nth-child(2) { transition-delay: .11s; }
.section-in-view .dawn-sequence-item:nth-child(3) { transition-delay: .18s; }
.section-in-view .dawn-sequence-item:nth-child(4) { transition-delay: .25s; }
.section-in-view .dawn-sequence-item:nth-child(5) { transition-delay: .32s; }
.section-in-view .dawn-sequence-item:nth-child(6) { transition-delay: .39s; }

@media (max-width: 920px) {
  .nav-item.has-dropdown::after { display: none !important; }

  .dawn-enterprise-menu,
  .dawn-simple-menu {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
    background: #f8faff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
  }

  .nav-item.mobile-open > .dawn-enterprise-menu,
  .nav-item.mobile-open > .dawn-simple-menu { display: block !important; }

  .nav-item.has-dropdown { width: 100%; }

  .nav-item.has-dropdown > .dropdown-trigger {
    width: 100%;
    min-height: 56px;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-item.mobile-open > .dropdown-trigger .nav-chevron { transform: rotate(180deg) !important; }

  .menu-bg-grid,
  .menu-bg-orb,
  .menu-bg-word,
  .simple-menu-bg { display: none !important; }

  .dawn-enterprise-menu-inner {
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 15px 15px !important;
    display: block !important;
  }

  .enterprise-menu-intro { display: none !important; }

  .enterprise-menu-categories {
    display: block !important;
    border-top: 1px solid #e2e8f2;
  }

  .enterprise-category {
    min-height: 51px;
    padding: 0 11px;
    color: #526078;
    border-bottom: 1px solid #e2e8f2;
    background: transparent;
    font-size: 13px;
  }

  .enterprise-category:hover,
  .enterprise-category.active {
    padding-left: 15px;
    color: #245dff;
    background: #eef3ff;
    box-shadow: inset 3px 0 0 #245dff;
  }

  .enterprise-category i { color: #245dff; }
  .enterprise-menu-content { min-height: 0 !important; width: 100%; }

  .enterprise-menu-panel {
    display: none !important;
    padding: 9px 0 3px;
    animation: none !important;
  }

  .enterprise-menu-panel.active { display: block !important; }
  .enterprise-link-column { width: 100%; max-width: none; }
  .enterprise-column-title { margin: 13px 10px 5px; color: #245dff; }

  .enterprise-link-column a {
    min-height: 45px;
    padding: 10px 25px 10px 13px;
    color: #5f6c80;
    border-bottom: 1px solid #e5eaf2;
    font-size: 12px;
  }

  .enterprise-link-column a::after {
    opacity: 1;
    right: 11px;
    color: #245dff;
    transform: none;
  }

  .simple-menu-shell,
  .simple-menu-shell-compact,
  .simple-menu-shell-company {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 7px 15px 16px !important;
    display: block !important;
    overflow: visible !important;
  }

  .simple-menu-intro { display: none !important; }

  .simple-menu-links,
  .simple-menu-links.single-column {
    width: 100%;
    display: block !important;
    border-top: 1px solid #e2e8f2;
  }

  .simple-menu-links a {
    width: 100%;
    min-height: 49px;
    padding: 0 12px;
    color: #5f6c80;
    border-bottom: 1px solid #e2e8f2;
    font-size: 12px;
    background: transparent;
  }

  .simple-menu-links a span {
    opacity: 1;
    color: #245dff;
    transform: none;
  }

  .dawn-enterprise-menu-inner > *,
  .simple-menu-shell > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

@media (max-width: 700px) {
  .faq-section { padding: 62px 0 68px !important; }
  .faq-head { margin-bottom: 27px !important; text-align: left !important; }
  .faq-head > p { margin-left: 0 !important; }
  .faq-list { border-radius: 14px !important; }
  .faq-question {
    min-height: 72px !important;
    padding: 0 12px !important;
    grid-template-columns: 26px 1fr 32px !important;
    gap: 9px !important;
  }
  .faq-question-text { font-size: 14px !important; }
  .faq-icon { width: 30px !important; height: 30px !important; }
  .faq-answer-inner { padding: 0 47px !important; }
  .faq-item.active .faq-answer-inner { padding-bottom: 22px !important; }
  .faq-answer-inner p { font-size: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .dawn-sequence-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* =========================================================
   DAWN — BACK TO TOP BUTTON
========================================================= */

.dawn-back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;

  width: 54px;
  height: 54px;

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

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;

  background: linear-gradient(
    135deg,
    #635bff 0%,
    #2563ff 100%
  );

  color: #ffffff;

  box-shadow:
    0 12px 30px rgba(37, 99, 255, 0.25);

  cursor: pointer;
  z-index: 999;

  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.dawn-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dawn-back-to-top:hover {
  transform: translateY(-5px);

  box-shadow:
    0 16px 36px rgba(37, 99, 255, 0.35);
}

.dawn-back-to-top:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 4px;
}

.dawn-back-to-top svg {
  width: 21px;
  height: 21px;
  transition: transform 0.3s ease;
}

.dawn-back-to-top:hover svg {
  transform: translateY(-2px);
}

/* MOBILE */

@media (max-width: 767px) {

  .dawn-back-to-top {
    width: 46px;
    height: 46px;

    right: 18px;
    bottom: 20px;
  }

  .dawn-back-to-top svg {
    width: 19px;
    height: 19px;
  }
}

/* ACCESSIBILITY */

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

  .dawn-back-to-top,
  .dawn-back-to-top svg {
    transition: none;
  }
}