@charset "utf-8";
:root {
  --red: #c60022;
  --red2: #9e001b;
  --navy: #09233f;
  --ink: #141414;
  --cream: #fbf7f0;
  --paper: #fffdfa;
  --muted: #6d6a66;
  --line: #ddd5ca;
  --gold: #caa869;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --shadow: 0 24px 70px rgba(32, 18, 10, .13)
}

@font-face {
    font-family: 'SourceSansRegular';
    src: url('fonts/SourceSans3-Regular.eot');
    src: url('fonts/SourceSans3-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/SourceSans3-Regular.woff2') format('woff2'),
         url('fonts/SourceSans3-Regular.woff') format('woff'),
         url('fonts/SourceSans3-Regular.ttf')  format('truetype'),
         url('fonts/SourceSans3-Regular.svg#Source Sans 3') format('svg');
}

* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden
}
a {
  color: inherit;
  text-decoration: none
}
button, input, textarea {
  font: inherit
}
img {
  max-width: 100%;
  display: block
}
::selection {
  background: #ffc8d1;
  color: #630011
}
.skip {
  position: fixed;
  left: 16px;
  top: -60px;
  background: #fff;
  padding: 12px 16px;
  z-index: 9999;
  border: 1px solid var(--ink)
}
.skip:focus {
  top: 16px
}
.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1000;
  background: transparent
}
.progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red)
}
.shell {
  width: min(1280px, calc(100% - 54px));
   /* padding: 0 20px;*/
  margin: auto
}
.eyebrow {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .19em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red)
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 17px 21px;
  border-radius: 2px;
  background: var(--red);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 11px;
  font-weight: 700;
  transition: .3s var(--ease)
}
.btn span {
  font-size: 18px
}
.btn:hover {
  background: var(--navy);
  transform: translateY(-2px);
    color: #fff;
}
.btn.alt {
  background: transparent;
  color: var(--navy);
  border: 1px solid rgba(9, 35, 63, .35)
}
.btn.alt:hover {
  background: var(--navy);
  color: #fff
}
.ribbon {
  background: var(--navy);
  color: #fff;
  height: 34px;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .18em
}
.ribbon-track {
  white-space: nowrap;
  animation: marquee 28s linear infinite
}
.ribbon b {
  color: #ff687f;
  margin: 0 22px
}
@keyframes marquee {
  to {
    transform: translateX(-50%)
  }
}
header {
  height: 94px;
  background: rgba(251, 247, 240, .94);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 500;
  border-bottom: 1px solid rgba(20, 20, 20, .1)
}
.nav-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px
}
.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: SourceSansRegular, serif;
}
.brand img {
  width: 98px;
  height: 55px;
  object-fit: contain
}
.brand div {
  border-left: 1px solid var(--line);
  padding-left: 15px
}
.brand strong {
  display: block;
  /*font-family: Georgia, serif;*/
  color: var(--navy);
  font-weight: bolder;
  font-size: 18px
}
.brand small {
  display: block;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: #777;
  margin-top: 4px
}
nav {
  display: flex;
  gap: 34px;
  align-items: center
}
nav a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  position: relative;
  padding: 8px 0;
  font-family: SourceSansRegular, serif;
}
nav a:after {
  content: "";
  position: absolute;
  height: 1px;
  width: 0;
  left: 0;
  bottom: 0;
  background: var(--red);
  transition: .25s
}
nav a:hover:after {
  width: 100%
}
.nav-cta {
  padding: 13px 17px !important;
  background: var(--ink);
  color: #fff
}
.nav-cta:after {
  display: none
}
.menu {
  display: none;
  background: none;
  border: 0;
  width: 42px;
  height: 42px;
  position: relative
}
.menu i, .menu i:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 1px;
  background: var(--ink);
  left: 9px;
  top: 16px;
  transition: .3s
}
.menu i:after {
  left: 0;
  top: 8px
}
.mobile-panel {
  display: none
}
.hero {
  min-height: 760px;
  position: relative;
  background: var(--paper);
  overflow: hidden
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
  min-height: 760px
}
.hero-copy {
  padding: 94px 60px 80px max(0px, calc((100vw - 1280px)/2));
  padding-left: max(27px, calc((100vw - 1280px)/2));
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2
}
.hero-copy:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 52%;
  height: 100%;
  background: linear-gradient(90deg, rgba(198, 0, 34, .06), transparent);
  pointer-events: none
}
.hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(57px, 6vw, 94px);
  line-height: .93;
  letter-spacing: -.055em;
  font-weight: 400;
  margin: 19px 0 30px;
  color: var(--navy);
  position: relative
}
.hero h1 em {
  font-weight: 400;
  color: var(--red)
}
.hero-copy > p {
  font-size: 17px;
  line-height: 1.75;
  color: #4f5051;
  max-width: 580px;
  margin: 0 0 36px;
  position: relative
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative
}
.hero-micro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 58px;
  max-width: 610px;
  position: relative
}
.hero-micro div {
  background: var(--paper);
  padding: 19px 16px
}
.hero-micro strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  color: var(--red)
}
.hero-micro span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .13em;
  line-height: 1.45;
  color: #666
}
.hero-visual {
  position: relative;
  min-height: 760px;
  background: #f2eee8;
  overflow: hidden
}
.hero-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}
.hero-overlay-card {
  position: absolute;
  left: 35px;
  bottom: 35px;
  width: min(430px, calc(100% - 70px));
  padding: 26px;
  background: rgba(7, 27, 49, .92);
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow)
}
.hero-overlay-card .topline {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #ff9dac
}
.hero-overlay-card h2 {
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1.06;
  font-weight: 400;
  margin: 34px 0 18px
}
.hero-overlay-card p {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
  margin: 0
}
.hero-overlay-card .bar {
  margin-top: 25px;
  height: 2px;
  background: rgba(255, 255, 255, .2);
  position: relative
}
.hero-overlay-card .bar i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 45%;
  background: #ff4161;
  animation: pulsebar 4s ease-in-out infinite
}
@keyframes pulsebar {
  0%, 100% {
    width: 20%
  }
  50% {
    width: 88%
  }
}
.hero-badge {
  position: absolute;
  right: 28px;
  top: 30px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1.6;
  transform: rotate(8deg);
  box-shadow: 0 16px 40px rgba(125, 0, 23, .25)
}
.intro {
  padding: 145px 0 125px
}
.intro-grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 100px
}
.intro h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(52px, 5.7vw, 88px);
  line-height: 1.02;
  letter-spacing: -.045em;
  margin: 0;
  color: var(--navy)
}
.intro h2 em {
  color: var(--red);
  font-weight: 400
}
.intro-copy > p {
  font-family: Georgia, serif;
  font-size: 31px;
  line-height: 1.35;
  margin: 0 0 53px;
  color: #292928
}
.value-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line)
}
.value-list article {
  padding: 28px 15px 15px 15px;
  border-right: 1px solid var(--line);
  margin-right: 24px
}
.value-list article:last-child {
  border: 0;
  margin: 0
}
.value-list b {
  color: var(--red);
  font-size: 16px
}
.value-list h3 {
  font-size: 14px;
  margin: 26px 0 10px
}
.value-list p {
  font-size: 12px;
  line-height: 1.65;
  color: #67635d;
  margin: 0
}
.capabilities {
  background: #fff;
  padding: 130px 0;
}
.section-head {
  display: grid;
  grid-template-columns: .65fr 1.1fr .75fr;
  gap: 50px;
  align-items: end;
  margin-bottom: 76px
}
.section-head h2 {
  font-family: Georgia, serif;
  font-size: clamp(52px, 5.7vw, 88px);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -.05em;
  margin: 0;
  color: var(--navy)
}
.section-head h2 em {
  font-weight: 400;
  color: var(--red)
}
.section-head > p {
  font-size: 13px;
  line-height: 1.75;
  color: #666;
  margin: 0
}
.solution-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 250px;
  gap: 14px
}
.sol-card {
  position: relative;
  overflow: hidden;
  padding: 27px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  isolation: isolate;
  cursor: pointer;
  transition: .4s var(--ease);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06)
}
.sol-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(16, 14, 12, .18)
}
.sol-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 19, 34, .05), rgba(4, 19, 34, .85));
  z-index: -1
}
.sol-card svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2
}
.sol-card .num {
  font-size: 9px;
  letter-spacing: .15em
}
.sol-card h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 33px;
  line-height: 1.08;
  margin: 0 0 10px
}
.sol-card p {
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
  max-width: 370px;
  color: rgba(255, 255, 255, .76)
}
.sol-card .arrow {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  transition: .3s
}
.sol-card:hover .arrow {
  background: #fff;
  color: #111;
  transform: rotate(45deg)
}
.s1 {
  grid-column: span 7;
  grid-row: span 2
}
.s2 {
  grid-column: span 5
}
.s3 {
  grid-column: span 5
}
.s4 {
  grid-column: span 4
}
.s5 {
  grid-column: span 4
}
.s6 {
  grid-column: span 4
}
.explorer {
  padding: 130px 0;
  background: var(--cream)
}
.explorer-wrap {
  display: grid;
  grid-template-columns: 390px 1fr;
  min-height: 680px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow)
}
.tabs {
  background: var(--navy);
  color: #fff;
  padding: 42px 0
}
.tabs .eyebrow {
  color: #ff7a91;
  padding: 0 34px 28px
}
.tab-btn {
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: #fff;
  padding: 23px 34px;
  text-align: left;
  display: grid;
  grid-template-columns: 32px 1fr 25px;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  transition: .3s
}
.tab-btn:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .14)
}
.tab-btn span:first-child {
  font-size: 9px;
  color: #ff8097
}
.tab-btn b {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 400
}
.tab-btn i {
  font-style: normal;
  font-size: 17px
}
.tab-btn.active, .tab-btn:hover {
  background: var(--red)
}
.tab-content {
  padding: 60px 68px;
  position: relative;
  overflow: hidden
}
.tab-pane {
  display: none;
  animation: fade .45s ease
}
.tab-pane.active {
  display: block
}
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(12px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.tab-pane h3 {
  font-family: Georgia, serif;
  font-size: 52px;
  line-height: 1.02;
  color: var(--navy);
  font-weight: 400;
  letter-spacing: -.04em;
  margin: 13px 0 25px
}
.tab-pane > p {
  font-size: 15px;
  line-height: 1.75;
  max-width: 720px;
  color: #56534f
}
.tab-points {
    font-family: SourceSansRegular, serif !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 45px
}
.tab-points div {
  background: #fff;
  padding: 22px 23px;
  min-height: 100px
}
.tab-points b {
  display: block;
  font-size: 14px;
  margin-bottom: 9px
}
.tab-points p {
  font-size: 13px;
  line-height: 1.55;
  color: #666;
  margin: 0
}
.mini-diagram {
  margin-top: 42px;
  height: 145px;
  border: 1px solid var(--line);
  position: relative;
  background: linear-gradient(90deg, #fff, #fff7f8);
  overflow: hidden
}
.mini-diagram svg {
  width: 100%;
  height: 100%
}
.maritime {
  background: #061d34;
  color: #fff;
  padding: 135px 0;
  overflow: hidden
}
.maritime-grid {
  display: grid;
  grid-template-columns: .83fr 1.17fr;
  gap: 85px;
  align-items: center
}
.maritime-copy h2 {
  font-family: Georgia, serif;
  font-size: clamp(52px, 5.7vw, 88px);
  line-height: .94;
  font-weight: 400;
  letter-spacing: -.05em;
  margin: 19px 0 30px
}
.maritime-copy h2 em {
  color: #ff5c78;
  font-weight: 400
}
.maritime-copy > p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .68);
  max-width: 600px
}
.maritime-list {
  margin: 42px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 24px
}
.maritime-list div {
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 11px;
  letter-spacing: .04em
}
.maritime-visual {
  position: relative;
  min-height: 620px
}
.port-frame {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(160deg, #163a5c, #071826 70%);
  overflow: hidden
}
.port-frame svg {
  width: 100%;
  height: 100%
}
.floating-stat {
  position: absolute;
  background: #fff;
  color: var(--navy);
  padding: 20px 22px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .22)
}
.floating-stat strong {
  font-family: Georgia, serif;
  font-size: 35px;
  font-weight: 400;
  color: var(--red);
  display: block
}
.floating-stat span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .13em
}
.fs1 {
  left: -30px;
  top: 42px
}
.fs2 {
  right: -25px;
  bottom: 50px;
  background: var(--red);
  color: #fff
}
.fs2 strong {
  color: #fff
}
.process {
  padding: 130px 0;
  background: #fff
}
.process-head {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  align-items: end;
  margin-bottom: 65px
}
.process-head h2 {
  font-family: Georgia, serif;
  font-size: clamp(52px, 5.7vw, 88px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.05em;
  margin: 14px 0 0;
  color: var(--navy)
}
.process-head p {
  max-width: 430px;
  font-size: 13px;
  line-height: 1.7;
  color: #666
}
.process-line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}
.step {
  padding: 33px 26px 38px;
  border-right: 1px solid var(--line);
  min-height: 310px;
  position: relative;
  transition: .3s
}
.step:last-child {
  border-right: 0
}
.step:hover {
  background: #fff6f7;
  transform: translateY(-7px)
}
.step .circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--red);
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--red);
  font-size: 16px;
    font-weight: bold;
  margin-bottom: 55px
}
.step h3 {
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  margin: 0 0 14px;
  color: var(--navy)
}
.step p {
  font-size: 13px;
  line-height: 1.65;
  color: #68645f;
  margin: 0
}
.step:after {
  content: "→";
  position: absolute;
  right: -11px;
  top: 49px;
  background: #fff;
  padding: 0 4px;
  color: var(--red);
  z-index: 2
}
.step:last-child:after {
  display: none
}
.sectors {
  padding: 130px 0;
  background: var(--cream)
}
.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 65px
}
.sector-card {
  background: #fff;
  border: 1px solid var(--line);
  min-height: 375px;
  position: relative;
  overflow: hidden;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: .35s
}
.sector-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow)
}
.sector-card svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 68%
}
.sector-card .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, #fff 65%)
}
.sector-card h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 27px;
  color: var(--navy);
  margin: 0 0 9px;
  position: relative
}
.sector-card p {
  font-size: 13px;
  line-height: 1.55;
  color: #666;
  margin: 0;
  position: relative
}
.sector-card small {
  position: absolute;
  left: 24px;
  top: 23px;
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--red);
  z-index: 3
}
.insights {
  padding: 130px 0;
  background: #fff
}
.insights-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  gap: 15px;
  margin-top: 65px
}
.insight {
  border: 1px solid var(--line);
  min-height: 410px;
  padding: 31px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: #fff
}
.insight.featured {
  background: var(--red);
  color: #fff;
  min-height: 515px
}
.insight svg {
  position: absolute;
  right: -40px;
  top: -20px;
  width: 64%;
  height: 65%;
  opacity: .75
}
.insight .type {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--red)
}
.insight.featured .type {
  color: #ffc1cb
}
.insight h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 31px;
  line-height: 1.12;
  margin: auto 0 22px;
  position: relative
}
.insight.featured h3 {
  font-size: 47px;
  max-width: 630px
}
.insight p {
  font-size: 11px;
  line-height: 1.65;
  color: #68645f;
  margin: 0 0 30px;
  position: relative
}
.insight.featured p {
  color: rgba(255, 255, 255, .72)
}
.insight a {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .13em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  align-self: flex-start;
  position: relative
}
.contact {
  padding: 135px 0 55px;
  background: #091f38;
  color: #fff;
  position: relative;
  overflow: hidden
}
.contact:after {
  content: "L";
  position: absolute;
  right: -80px;
  bottom: -300px;
  font-family: Georgia, serif;
  font-size: 800px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .1);
  font-style: italic
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 95px;
  position: relative;
  z-index: 2
}
.contact h2 {
  font-family: Georgia, serif;
  font-size: clamp(52px, 5.7vw, 88px);
  line-height: .95;
  font-weight: 400;
  letter-spacing: -.05em;
  margin: 18px 0 30px
}
.contact h2 em {
  color: #ff607b;
  font-weight: 400
}
.contact-copy p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .65);
  max-width: 570px
}
.contact-details {
  margin-top: 45px;
  display: grid;
  gap: 14px;
  font-size: 12px
}
.contact-details a {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding: 13px 0
}
.contact-details span {
  color: #ff8296
}
form {
  background: #fff;
  color: var(--ink);
  padding: 35px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .22)
}
.field {
  margin-bottom: 19px
}
.field label {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 8px;
  color: #666
}
.field input, .field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #bbb;
  padding: 11px 0;
  background: transparent;
  outline: none;
  font-size: 12px;
}
.field input::placeholder, .field textarea::placeholder {
  font-weight: bold;
  opacity: 0.2;
  color: #000000;
}
.field input:focus, .field textarea:focus {
  border-color: var(--red)
}
.field textarea {
  min-height: 95px;
  resize: vertical
}
form .btn {
  border: 0;
  cursor: pointer;
  margin-top: 10px
}
.footer {
  border-top: 1px solid rgba(255, 255, 255, .16);
  margin-top: 100px;
  padding-top: 33px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  position: relative;
  z-index: 2
}
.footer img {
  width: 100px;
  filter: brightness(0) invert(1)
}
.footer p {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(255, 255, 255, .5);
  line-height: 1.8;
  text-align: left;
}
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s var(--ease), transform .8s var(--ease)
}
.reveal.show {
  opacity: 1;
  transform: none
}
@media(max-width:1024px) {
    .footer p {

  text-align: right;
}
}
@media(max-width:1050px) {
  nav {
    display: none
  }
  .menu {
    display: block
  }
    
    .mobile-panel {
    position: fixed;
    inset: 80px 0 0;
    background: var(--cream);
    z-index: 450;
    padding: 45px 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateX(100%);
    transition: .35s var(--ease)
  }
    
    .mobile-panel.open {
    transform: none
  }
    .mobile-panel a {
    font-family: Georgia, serif;
    font-size: 24px;
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
    color: var(--navy)
  }
  .hero-grid {
    grid-template-columns: 1fr
  }
  .hero-copy {
    min-height: 690px;
    padding-left: 27px
  }
  .hero-visual {
    min-height: 620px
  }
  .intro-grid, .maritime-grid, .contact-grid {
    grid-template-columns: 1fr;
    gap: 65px
  }
  .section-head {
    grid-template-columns: 1fr;
    gap: 25px
  }
  .solution-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 330px
  }
  .s1, .s2, .s3, .s4, .s5, .s6 {
    grid-column: span 1;
    grid-row: span 1
  }
  .explorer-wrap {
    grid-template-columns: 300px 1fr
  }
  .tab-content {
    padding: 45px
  }
  .process-line {
    grid-template-columns: repeat(2, 1fr)
  }
  .step {
    border-bottom: 1px solid var(--line)
  }
  .sector-grid {
    grid-template-columns: repeat(2, 1fr)
  }
  .insights-grid {
    grid-template-columns: 1fr 1fr
  }
  .insight.featured {
    grid-column: 1/-1
  }
}
@media(max-width:700px) {
  .shell {
    width: min(100% - 28px, 1280px)
  }
  header {
    height: 80px
  }
  .brand img {
    width: 82px
  }
  .brand div {
    display: none
  }
  .hero {
    min-height: auto
  }
  .hero-grid {
    min-height: auto
  }
  .hero-copy {
    padding: 70px 14px;
    min-height: 650px
  }
  .hero h1 {
    font-size: 57px
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start
  }
  .hero-micro {
    grid-template-columns: 1fr
  }
  .hero-visual {
    min-height: 460px
  }
  .hero-overlay-card {
    left: 15px;
    bottom: 15px;
    width: calc(100% - 30px)
  }
  .hero-badge {
    width: 85px;
    height: 85px;
    right: 14px;
    top: 14px;
    font-size: 7px
  }
  .intro, .capabilities, .explorer, .maritime, .process, .sectors, .insights, .careers, .contact {
    padding: 92px 0
  }
  .intro-grid {
    gap: 45px
  }
  .intro-copy > p {
    font-size: 25px
  }
  .value-list {
    grid-template-columns: 1fr
  }
  .value-list article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    margin: 0;
    padding: 25px 0
  }
  .solution-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 380px
  }
  .explorer-wrap {
    grid-template-columns: 1fr
  }
  .tabs {
    padding: 28px 0
  }
  .tab-btn {
    padding: 18px 24px
  }
  .tab-content {
    padding: 35px 25px
  }
  .tab-pane h3 {
    font-size: 39px
  }
  .tab-points {
    grid-template-columns: 1fr
  }
  .maritime-list {
    grid-template-columns: 1fr
  }
  .maritime-visual {
    min-height: 450px
  }
  .fs1 {
    left: 10px;
    top: 20px
  }
  .fs2 {
    right: 10px;
    bottom: 25px
  }
  .process-head {
    display: block
  }
  .process-line {
    grid-template-columns: 1fr
  }
  .step {
    border-right: 0
  }
  .step:after {
    display: none
  }
  .sector-grid {
    grid-template-columns: 1fr
  }
  .insights-grid {
    grid-template-columns: 1fr
  }
  .insight.featured {
    grid-column: auto
  }
  .insight.featured h3 {
    font-size: 38px
  }
  .footer {
    flex-direction: column;
    align-items: flex-start
  }
  .footer p {
    text-align: left
  }
  .mobile-panel {
    position: fixed;
    inset: 80px 0 0;
    background: var(--cream);
    z-index: 450;
    padding: 45px 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateX(100%);
    transition: .35s var(--ease)
  }
  .mobile-panel.open {
    transform: none
  }
  .mobile-panel a {
    font-family: Georgia, serif;
    font-size: 24px;
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
    color: var(--navy)
  }
  body.menu-open {
    overflow: hidden
  }
}
/* --- Hero gateway full-width overrides --- */
.hero.hero-gateway {
  min-height: 900px;
  position: relative;
  background: var(--paper);
  overflow: visible;
  padding-bottom: 90px
}
.hero-grid.hero-grid-full {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "stack";
  min-height: clamp(760px, 88vh, 980px);
  position: relative
}
.hero-grid.hero-grid-full .hero-visual, .hero-grid.hero-grid-full .hero-copy {
  grid-area: stack
}
.hero-visual.hero-visual-full {
  position: relative;
  min-height: clamp(760px, 88vh, 980px);
  background: #f2eee8;
  overflow: hidden
}
.hero-visual.hero-visual-full > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block
}
.hero-copy.hero-copy-overlay {
  max-width: min(720px, 48vw);
  padding: 110px 60px 180px max(0px, calc((100vw - 1280px)/2));
  padding-left: max(27px, calc((100vw - 1280px)/2));
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 6;
  min-height: clamp(760px, 88vh, 980px)
}
.hero-copy.hero-copy-overlay:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(980px, 74vw);
  background: linear-gradient(90deg, rgba(255, 252, 248, .97) 0%, rgba(255, 252, 248, .93) 32%, rgba(255, 252, 248, .72) 56%, rgba(255, 252, 248, .24) 80%, rgba(255, 252, 248, 0) 100%);
  pointer-events: none
}
.hero-copy.hero-copy-overlay > * {
  position: relative;
  z-index: 1
}
.hero-copy.hero-copy-overlay .hero-micro {
  max-width: 620px;
  background: rgba(221, 213, 202, .72);
  backdrop-filter: blur(8px)
}
.hero-copy.hero-copy-overlay .hero-micro div {
  background: rgba(255, 253, 250, .92)
}
.hero-badge {
  z-index: 7
}
.hero-flow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none
}
.hero-flow-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  filter: drop-shadow(0 0 7px rgba(198, 0, 34, .15))
}
.hero-flow-line-1 {
  stroke: rgba(198, 0, 34, .96);
  stroke-width: 10;
  animation: heroLineDraw 1.9s .25s forwards cubic-bezier(.2, .7, .1, 1)
}
.hero-flow-line-2 {
  stroke: rgba(255, 84, 110, .68);
  stroke-width: 7;
  animation: heroLineDraw 2.05s .42s forwards cubic-bezier(.2, .7, .1, 1)
}
.hero-flow-line-3 {
  stroke: rgba(198, 0, 34, .4);
  stroke-width: 4;
  animation: heroLineDraw 2.18s .58s forwards cubic-bezier(.2, .7, .1, 1)
}
.hero-flow-line-4 {
  stroke: rgba(255, 146, 164, .52);
  stroke-width: 3;
  animation: heroLineDraw 2.3s .74s forwards cubic-bezier(.2, .7, .1, 1)
}
.hero-flow-sweep {
  position: absolute;
  left: -18%;
  bottom: 11%;
  width: 54%;
  height: 19%;
  background: linear-gradient(90deg, rgba(198, 0, 34, .88), rgba(255, 98, 120, .45), rgba(255, 255, 255, 0));
  transform: translateX(-110%) skewX(-16deg);
  filter: blur(20px);
  opacity: .76;
  z-index: 2;
  animation: heroSweep 1.65s .2s forwards cubic-bezier(.2, .7, .1, 1)
}
.hero-gateway-mask {
  position: absolute;
  left: 66.9%;
  top: 57.7%;
  transform: translate(-50%, -50%);
  width: min(15.5vw, 235px);
  height: min(18.6vw, 282px);
  background: linear-gradient(180deg, rgba(252, 248, 242, .98), rgba(248, 243, 236, .98));
  clip-path: polygon(15% 100%, 15% 37%, 23% 24%, 35% 13%, 50% 9%, 65% 13%, 77% 24%, 85% 37%, 85% 100%);
  box-shadow: 0 0 0 2px rgba(255, 250, 244, .4) inset, 0 0 26px rgba(255, 250, 244, .55);
  z-index: 4;
  opacity: .97
}
.hero-logo-glow {
  position: absolute;
  left: 66.9%;
  top: 57.7%;
  transform: translate(-50%, -50%);
  width: min(18vw, 275px);
  height: min(18vw, 275px);
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .4) 36%, rgba(255, 255, 255, 0) 70%);
  z-index: 5;
  opacity: 0;
  animation: heroLogoGlow 1.9s 3.05s forwards ease-out
}
.hero-flash-logo {
  position: absolute;
  left: 66.9%;
  top: 57.7%;
  transform: translate(-50%, -50%) scale(.72);
  width: min(14vw, 210px);
  z-index: 6;
  opacity: 0;
  animation: heroLogoFlash 1.95s 3.05s forwards cubic-bezier(.2, .7, .1, 1)
}
.hero-flash-logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, .88)) drop-shadow(0 0 18px rgba(198, 0, 34, .22))
}
.hero-overlay-card.hero-overlay-lowered {
  left: auto;
  right: clamp(26px, 4vw, 60px);
  bottom: -56px;
  width: min(420px, calc(100% - 52px));
  z-index: 7
}
@keyframes heroLineDraw {
  to {
    stroke-dashoffset: 0
  }
}
@keyframes heroSweep {
  to {
    transform: translateX(185%) skewX(-16deg);
    opacity: 0
  }
}
@keyframes heroLogoGlow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82)
  }
  50% {
    opacity: .42;
    transform: translate(-50%, -50%) scale(1.02)
  }
  100% {
    opacity: .26;
    transform: translate(-50%, -50%) scale(1.14)
  }
}
@keyframes heroLogoFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82);
    filter: brightness(.98)
  }
  35% {
    opacity: .32;
    transform: translate(-50%, -50%) scale(.9);
    filter: brightness(1.02)
  }
  70% {
    opacity: .72;
    transform: translate(-50%, -50%) scale(.97);
    filter: brightness(1.06)
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1)
  }
}
@media(max-width:1050px) {
  .hero.hero-gateway {
    padding-bottom: 76px
  }
  .hero-grid.hero-grid-full, .hero-visual.hero-visual-full, .hero-copy.hero-copy-overlay {
    min-height: 760px
  }
  .hero-copy.hero-copy-overlay {
    max-width: min(720px, 60vw);
    padding-top: 95px;
    padding-bottom: 160px
  }
  .hero-copy.hero-copy-overlay:before {
    width: min(820px, 86vw)
  }
  .hero-gateway-mask, .hero-logo-glow, .hero-flash-logo {
    left: 69%;
    top: 58.5%
  }
  .hero-overlay-card.hero-overlay-lowered {
    bottom: -46px
  }
}
@media(max-width:700px) {
  .hero.hero-gateway {
    padding-bottom: 26px
  }
  .hero-grid.hero-grid-full {
    min-height: auto
  }
  .hero-visual.hero-visual-full {
    min-height: 520px
  }
  .hero-visual.hero-visual-full > img {
    object-position: 62% center
  }
  .hero-copy.hero-copy-overlay {
    max-width: none;
    min-height: auto;
    padding: 70px 14px 34px
  }
  .hero-copy.hero-copy-overlay:before {
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 252, 248, .97) 0%, rgba(255, 252, 248, .92) 42%, rgba(255, 252, 248, .42) 74%, rgba(255, 252, 248, 0) 100%)
  }
  .hero-copy.hero-copy-overlay .hero-micro {
    grid-template-columns: 1fr
  }
  .hero-overlay-card.hero-overlay-lowered {
    right: 15px;
    bottom: 15px;
    width: calc(100% - 30px)
  }
  .hero-badge {
    width: 85px;
    height: 85px;
    right: 14px;
    top: 14px;
    font-size: 7px
  }
  .hero-gateway-mask {
    left: 71.8%;
    top: 59.5%;
    width: 136px;
    height: 168px
  }
  .hero-logo-glow {
    left: 71.8%;
    top: 59.5%;
    width: 150px;
    height: 150px
  }
  .hero-flash-logo {
    left: 71.8%;
    top: 59.5%;
    width: 118px
  }
  .hero-flow-sweep {
    bottom: 18%;
    width: 70%;
    height: 20%
  }
  .hero-flow-svg {
    height: 88%
  }
}
/* ===== Cinematic 4K hero update ===== */
.cinema-hero {
  position: relative;
  min-height: 100vh;
  background: var(--paper);
  overflow: hidden
}
.cinema-scene {
  position: relative;
  min-height: 100vh
}
.cinema-backdrop, .cinema-animation {
  position: absolute;
  inset: 0
}
.cinema-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scale(1.015)
}
.cinema-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 251, 247, .22) 0%, rgba(255, 251, 247, .08) 22%, rgba(255, 251, 247, 0) 45%), linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, .07));
  pointer-events: none
}
.cinema-animation {
  z-index: 2;
  pointer-events: none
}
.route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}
.route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5200;
  stroke-dashoffset: 5200;
  filter: drop-shadow(0 0 7px rgba(198, 0, 34, .18))
}
.route-in path:nth-child(1) {
  stroke: #d61527;
  stroke-width: 17;
  animation: flowIn 5.6s .45s forwards cubic-bezier(.21, .7, .13, 1)
}
.route-in path:nth-child(2) {
  stroke: rgba(224, 37, 49, .88);
  stroke-width: 11;
  animation: flowIn 5.95s .65s forwards cubic-bezier(.21, .7, .13, 1)
}
.route-in path:nth-child(3) {
  stroke: rgba(238, 76, 93, .62);
  stroke-width: 7;
  animation: flowIn 6.25s .85s forwards cubic-bezier(.21, .7, .13, 1)
}
.route-in path:nth-child(4) {
  stroke: rgba(196, 0, 34, .38);
  stroke-width: 4;
  animation: flowIn 6.45s 1.05s forwards cubic-bezier(.21, .7, .13, 1)
}
.route-in path:nth-child(5) {
  stroke: rgba(255, 120, 135, .26);
  stroke-width: 3;
  animation: flowIn 6.7s 1.15s forwards cubic-bezier(.21, .7, .13, 1)
}
.route-out path:nth-child(1) {
  stroke: #d61527;
  stroke-width: 12;
  animation: flowOut 4.4s 5.55s forwards cubic-bezier(.23, .72, .16, 1)
}
.route-out path:nth-child(2) {
  stroke: rgba(224, 37, 49, .82);
  stroke-width: 8;
  animation: flowOut 4.6s 5.82s forwards cubic-bezier(.23, .72, .16, 1)
}
.route-out path:nth-child(3) {
  stroke: rgba(214, 21, 39, .46);
  stroke-width: 5;
  animation: flowOut 4.85s 6.0s forwards cubic-bezier(.23, .72, .16, 1)
}
.route-out path:nth-child(4) {
  stroke: rgba(255, 108, 128, .28);
  stroke-width: 3;
  animation: flowOut 5.05s 6.18s forwards cubic-bezier(.23, .72, .16, 1)
}
.portal-glow {
  position: absolute;
  left: 64.6%;
  top: 50.7%;
  width: min(8vw, 170px);
  height: min(8vw, 170px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 35, 48, .22) 0%, rgba(230, 35, 48, .08) 36%, rgba(230, 35, 48, 0) 72%);
  opacity: 0;
  animation: portalPulse 1.8s 5.1s ease-out forwards
}
.cinema-lockup {
  position: absolute;
  left: max(42px, 5vw);
  top: 50%;
  transform: translateY(-42%);
  z-index: 3;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  animation: logoReveal 1.55s 9.35s forwards cubic-bezier(.19, .7, .14, 1)
}
.cinema-lockup img {
  width: min(26vw, 420px);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 28px rgba(255, 255, 255, .58))
}
.india-reveal {
  font-family: Georgia, serif;
  font-size: clamp(28px, 2.5vw, 46px);
  line-height: 1;
  color: var(--navy);
  padding-left: 18px;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(16px);
  animation: indiaReveal 1.0s 10.2s forwards cubic-bezier(.22, .7, .16, 1)
}
.india-reveal:before, .india-reveal:after {
  content: '';
  display: inline-block;
  width: 68px;
  height: 1px;
  background: rgba(198, 0, 34, .35);
  vertical-align: middle;
  margin: 0 16px 0 0
}
.india-reveal:after {
  margin: 0 0 0 16px
}
@keyframes flowIn {
  0% {
    stroke-dashoffset: 5200;
    opacity: 0
  }
  8% {
    opacity: 1
  }
  85% {
    opacity: 1
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0
  }
}
@keyframes flowOut {
  0% {
    stroke-dashoffset: 4200;
    opacity: 0
  }
  10% {
    opacity: 1
  }
  85% {
    opacity: 1
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0
  }
}
@keyframes portalPulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.3)
  }
  35% {
    opacity: .95;
    transform: translate(-50%, -50%) scale(1)
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8)
  }
}
@keyframes logoReveal {
  0% {
    opacity: 0;
    transform: translateY(-34%) translateX(-18px)
  }
  100% {
    opacity: 1;
    transform: translateY(-42%) translateX(0)
  }
}
@keyframes indiaReveal {
  0% {
    opacity: 0;
    transform: translateY(16px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
.hero-lead {
  padding: 105px 0 88px;
  background: linear-gradient(180deg, #fffdf9 0%, #fbf7f1 100%)
}
.hero-lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: 44px;
  align-items: start
}
.hero-lead h1 {
  font-family: Georgia, serif;
  font-size: clamp(52px, 5.7vw, 88px);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 400;
  margin: 19px 0 26px;
  color: var(--navy)
}
.hero-lead h1 em {
  font-weight: 400;
  color: var(--red)
}
.hero-lead p {
  font-size: 17px;
  line-height: 1.75;
  color: #4f5051;
  max-width: 620px;
  margin: 0 0 32px
}
.lead-side {
  display: flex;
  flex-direction: column;
  gap: 22px
}
.lead-note-card {
  padding: 26px;
  background: rgba(7, 27, 49, .96);
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  border-radius: 0
}
.lead-note-card .topline {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #ff9dac
}
.lead-note-card h2 {
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1.06;
  font-weight: 400;
  margin: 34px 0 18px
}
.lead-note-card p {
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
  margin: 0
}
.lead-note-card .bar {
  margin-top: 25px;
  height: 2px;
  background: rgba(255, 255, 255, .2);
  position: relative
}
.lead-note-card .bar i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 45%;
  background: #ff4161;
  animation: pulsebar 4s ease-in-out infinite
}
@media (min-width:2200px) {
  .cinema-lockup img {
    width: min(23vw, 500px)
  }
  .portal-glow {
    left: 64.7%;
    top: 50.8%
  }
  .hero-lead {
    padding-top: 118px
  }
}
@media (max-width:1180px) {
  .cinema-lockup img {
    width: min(31vw, 350px)
  }
  .portal-glow {
    left: 64.4%;
    top: 51.4%
  }
  .hero-lead-grid {
    grid-template-columns: 1fr
  }
  .hero-lead p {
    max-width: none
  }
}
@media (max-width:820px) {
  .cinema-hero, .cinema-scene {
    min-height: 74vh
  }
  .cinema-backdrop img {
    object-position: 68% center
  }
  .portal-glow {
    left: 67.8%;
    top: 51.2%;
    width: 120px;
    height: 120px
  }
  .cinema-lockup {
    left: 18px;
    top: auto;
    bottom: 18px;
    transform: none;
    animation: mobileLogoReveal 1.4s 9.35s forwards cubic-bezier(.19, .7, .14, 1)
  }
  .cinema-lockup img {
    width: min(56vw, 280px)
  }
  .india-reveal {
    font-size: 28px;
    padding-left: 8px
  }
  .india-reveal:before, .india-reveal:after {
    width: 32px;
    margin: 0 10px 0 0
  }
  .india-reveal:after {
    margin: 0 0 0 10px
  }
  .hero-lead {
    padding-top: 78px
  }
  .hero-lead .hero-actions {
    flex-wrap: wrap
  }
  .hero-lead .hero-micro {
    grid-template-columns: 1fr
  }
}
@keyframes mobileLogoReveal {
  0% {
    opacity: 0;
    transform: translateY(22px)
  }
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}
/* Animated risk / ESG graphic */
#risk .mini-diagram.risk-guardian {
  height: 220px;
  background: linear-gradient(90deg, #fff, #fff6f7 48%, #fff);
  overflow: hidden
}
#risk .mini-diagram.risk-guardian svg {
  width: 100%;
  height: 100%;
  display: block
}
#risk .risk-bg-glow {
  opacity: .5
}
#risk .risk-node-group, #risk .risk-label, #risk .risk-value {
  opacity: .92
}
#risk .risk-route, #risk .risk-shield-path, #risk .risk-tick, #risk .risk-orbit {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}
#risk .risk-route {
  stroke: #d8d0c6;
  stroke-width: 2.6
}
#risk .risk-route.hot {
  stroke: #c60022;
  opacity: .92
}
#risk .risk-node-dot {
  fill: #09233f
}
#risk .risk-node-core {
  fill: #c60022
}
#risk .risk-chip {
  fill: #fff;
  stroke: #e6ddd6
}
#risk .risk-orbit {
  stroke: #c60022;
  opacity: .18;
  stroke-dasharray: 6 8
}
#risk .risk-shield-path {
  stroke: #c60022;
  stroke-width: 2.3;
  fill: #fff3f5
}
#risk .risk-tick {
  stroke: #09233f;
  stroke-width: 7
}
#risk .risk-pulse {
  fill: none;
  stroke: #c60022;
  opacity: .18
}
#risk .risk-label {
  font: 600 10px Arial, sans-serif;
  letter-spacing: 1.8px;
  fill: #09233f
}
#risk .risk-value {
  font: 700 8px Arial, sans-serif;
  letter-spacing: 1.5px;
  fill: #c60022
}
#risk .risk-center-copy {
  font: 700 10px Arial, sans-serif;
  letter-spacing: 1.8px;
  fill: #09233f
}
#risk .risk-metric {
  font: 700 8px Arial, sans-serif;
  letter-spacing: 1.4px;
  fill: #c60022
}
#risk .risk-grid {
  stroke: #efe8e1;
  stroke-width: 1
}
#risk.active .risk-node-group {
  opacity: 0;
  transform-origin: center;
  animation: rgPop .55s cubic-bezier(.2, .8, .2, 1) forwards
}
#risk.active .risk-node-group.n1 {
  animation-delay: .12s
}
#risk.active .risk-node-group.n2 {
  animation-delay: .3s
}
#risk.active .risk-node-group.n3 {
  animation-delay: .48s
}
#risk.active .risk-node-group.n4 {
  animation-delay: .66s
}
#risk.active .risk-route.hot {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: rgDraw .95s ease forwards
}
#risk.active .risk-route.r1 {
  animation-delay: .25s
}
#risk.active .risk-route.r2 {
  animation-delay: .5s
}
#risk.active .risk-route.r3 {
  animation-delay: .75s
}
#risk.active .risk-route.r4 {
  animation-delay: 1s
}
#risk.active .risk-shield-path {
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
  animation: rgDraw 1.15s ease forwards 1.2s, rgGlow 3s ease-in-out infinite 2.45s
}
#risk.active .risk-tick {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: rgDraw .6s ease forwards 1.95s
}
#risk.active .risk-orbit {
  transform-origin: 380px 110px;
  animation: rgSpin 14s linear infinite 1.15s
}
#risk.active .risk-pulse.p1 {
  animation: rgPulse 2.6s ease-out infinite .9s
}
#risk.active .risk-pulse.p2 {
  animation: rgPulse 2.6s ease-out infinite 1.5s
}
#risk.active .risk-pulse.p3 {
  animation: rgPulse 2.6s ease-out infinite 2.1s
}
#risk.active .risk-spark {
  animation: rgBlink 2.8s ease-in-out infinite
}
#risk.active .risk-spark.s2 {
  animation-delay: .6s
}
#risk.active .risk-spark.s3 {
  animation-delay: 1.2s
}
#risk.active .risk-spark.s4 {
  animation-delay: 1.8s
}
#risk.active .risk-beacon {
  animation: rgBeacon 2.4s ease-in-out infinite .8s
}
@keyframes rgDraw {
  to {
    stroke-dashoffset: 0
  }
}
@keyframes rgPop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(.92)
  }
  100% {
    opacity: 1;
    transform: none
  }
}
@keyframes rgPulse {
  0% {
    opacity: 0;
    transform: scale(.72)
  }
  30% {
    opacity: .22
  }
  100% {
    opacity: 0;
    transform: scale(1.12)
  }
}
@keyframes rgSpin {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}
@keyframes rgGlow {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(198, 0, 34, 0))
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(198, 0, 34, .15))
  }
}
@keyframes rgBlink {
  0%, 100% {
    opacity: .35
  }
  50% {
    opacity: 1
  }
}
@keyframes rgBeacon {
  0%, 100% {
    transform: scale(1);
    opacity: .75
  }
  50% {
    transform: scale(1.08);
    opacity: 1
  }
}
@media(max-width:700px) {
  #risk .mini-diagram.risk-guardian {
    height: 260px
  }
}
/* Animated digital / data / AI graphic */
#digital .mini-diagram.digital-core {
  height: 145px;
  background: linear-gradient(90deg, #fff, #fff8f9 48%, #fff);
  overflow: hidden
}
#digital .mini-diagram.digital-core svg {
  width: 100%;
  height: 100%;
  display: block
}
#digital .dg-base, #digital .dg-axis, #digital .dg-ring, #digital .dg-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}
#digital .dg-base {
  stroke: #e6ddd6;
  stroke-width: 1.4
}
#digital .dg-axis.h {
  stroke: #c60022;
  stroke-width: 2.2
}
#digital .dg-axis.v {
  stroke: #c60022;
  stroke-width: 1.6;
  opacity: .92
}
#digital .dg-ring {
  stroke: #d8d0c6;
  stroke-width: 1.4
}
#digital .dg-ring.dashed {
  stroke-dasharray: 5 10;
  opacity: .55
}
#digital .dg-pulse {
  stroke: #c60022;
  opacity: .18
}
#digital .dg-node {
  fill: #09233f
}
#digital .dg-core-dot, #digital .dg-trace, #digital .dg-spark {
  fill: #c60022
}
#digital .dg-spark.alt {
  fill: #09233f
}
#digital .dg-soft-glow {
  opacity: .55
}
#digital.active .dg-axis.h {
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
  animation: dgDraw .9s ease forwards .08s
}
#digital.active .dg-axis.v {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: dgDraw .42s ease forwards .82s
}
#digital.active .dg-ring {
  opacity: 0;
  transform-origin: 380px 72px
}
#digital.active .dg-ring.r1 {
  animation: dgRingIn .55s ease forwards .36s, dgHalo 4.8s ease-in-out infinite 1.25s
}
#digital.active .dg-ring.r2 {
  animation: dgRingIn .72s ease forwards .56s
}
#digital.active .dg-ring.r3 {
  animation: dgRingIn .9s ease forwards .74s
}
#digital.active .dg-node {
  opacity: 0;
  transform-origin: center
}
#digital.active .dg-node.left {
  animation: dgPop .34s cubic-bezier(.2, .8, .2, 1) forwards .32s
}
#digital.active .dg-node.right {
  animation: dgPop .34s cubic-bezier(.2, .8, .2, 1) forwards .5s
}
#digital.active .dg-node.center {
  animation: dgPop .42s cubic-bezier(.2, .8, .2, 1) forwards .9s
}
#digital.active .dg-core-dot {
  opacity: 0;
  animation: dgPop .3s ease forwards 1s, dgBlink 2.6s ease-in-out infinite 1.5s
}
#digital.active .dg-pulse.p1 {
  animation: dgPulse 3s ease-out infinite 1.15s
}
#digital.active .dg-pulse.p2 {
  animation: dgPulse 3s ease-out infinite 1.8s
}
#digital.active .dg-trace.left {
  animation: dgPacketLeft 3.8s ease-in-out infinite 1.15s
}
#digital.active .dg-trace.right {
  animation: dgPacketRight 3.8s ease-in-out infinite 1.65s
}
#digital.active .dg-spark {
  animation: dgBlink 2.4s ease-in-out infinite
}
#digital.active .dg-spark.s2 {
  animation-delay: .35s
}
#digital.active .dg-spark.s3 {
  animation-delay: .7s
}
#digital.active .dg-spark.s4 {
  animation-delay: 1.05s
}
@keyframes dgDraw {
  to {
    stroke-dashoffset: 0
  }
}
@keyframes dgPop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(.84)
  }
  100% {
    opacity: 1;
    transform: none
  }
}
@keyframes dgRingIn {
  0% {
    opacity: 0;
    transform: scale(.72)
  }
  100% {
    opacity: 1;
    transform: scale(1)
  }
}
@keyframes dgPulse {
  0% {
    opacity: 0;
    transform: scale(.72)
  }
  32% {
    opacity: .2
  }
  100% {
    opacity: 0;
    transform: scale(1.22)
  }
}
@keyframes dgHalo {
  0%, 100% {
    opacity: .92
  }
  50% {
    opacity: .55
  }
}
@keyframes dgBlink {
  0%, 100% {
    opacity: .35
  }
  50% {
    opacity: 1
  }
}
@keyframes dgPacketLeft {
  0% {
    opacity: 0;
    transform: translateX(0)
  }
  12% {
    opacity: 1
  }
  82% {
    opacity: 1
  }
  100% {
    opacity: 0;
    transform: translateX(-235px)
  }
}
@keyframes dgPacketRight {
  0% {
    opacity: 0;
    transform: translateX(0)
  }
  12% {
    opacity: 1
  }
  82% {
    opacity: 1
  }
  100% {
    opacity: 0;
    transform: translateX(235px)
  }
}
@media(max-width:700px) {
  #digital .mini-diagram.digital-core {
    height: 165px
  }
}
/* Animated projects / delivery graphic */
#projects .mini-diagram.project-delivery {
  height: 145px;
  background: linear-gradient(90deg, #fff, #fff7f8 50%, #fff);
  overflow: hidden
}
#projects .mini-diagram.project-delivery svg {
  width: 100%;
  height: 100%;
  display: block
}
#projects .pr-baseline, #projects .pr-curve {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}
#projects .pr-baseline {
  stroke: #ddd4cb;
  stroke-width: 1.5
}
#projects .pr-curve.ghost {
  stroke: #edd9de;
  stroke-width: 4.8;
  opacity: .9
}
#projects .pr-curve.live {
  stroke: #c60022;
  stroke-width: 4.2
}
#projects .pr-node {
  fill: #09233f
}
#projects .pr-pulse {
  fill: none;
  stroke: #c60022;
  stroke-width: 1.3;
  opacity: 0
}
#projects .pr-orb {
  fill: #c60022;
  filter: drop-shadow(0 0 4px rgba(198, 0, 34, .22))
}
#projects.active .pr-baseline {
  stroke-dasharray: 663;
  stroke-dashoffset: 663;
  animation: prDrawBase .6s ease forwards .06s
}
#projects.active .pr-curve.live {
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: prDrawCurve 1.35s cubic-bezier(.34, .08, .18, .98) forwards .18s
}
#projects.active .pr-node {
  opacity: 0;
  transform-origin: center
}
#projects.active .pr-node.n1 {
  animation: prPop .3s ease forwards .22s
}
#projects.active .pr-node.n2 {
  animation: prPop .34s ease forwards .72s
}
#projects.active .pr-node.n3 {
  animation: prPop .34s ease forwards 1.02s
}
#projects.active .pr-node.n4 {
  animation: prPop .34s ease forwards 1.38s
}
#projects.active .pr-pulse.p1 {
  animation: prPulse 2.8s ease-out infinite .45s
}
#projects.active .pr-pulse.p2 {
  animation: prPulse 2.8s ease-out infinite 1s
}
#projects.active .pr-pulse.p3 {
  animation: prPulse 2.8s ease-out infinite 1.35s
}
#projects.active .pr-pulse.p4 {
  animation: prPulse 2.8s ease-out infinite 1.72s
}
#projects.active .pr-orb.o1 {
  animation: prTravel 4.2s linear infinite 1.15s
}
#projects.active .pr-orb.o2 {
  animation: prTravel 4.2s linear infinite 3.05s;
  opacity: .7
}
@keyframes prDrawBase {
  to {
    stroke-dashoffset: 0
  }
}
@keyframes prDrawCurve {
  to {
    stroke-dashoffset: 0
  }
}
@keyframes prPop {
  0% {
    opacity: 0;
    transform: scale(.7)
  }
  70% {
    opacity: 1;
    transform: scale(1.08)
  }
  100% {
    opacity: 1;
    transform: scale(1)
  }
}
@keyframes prPulse {
  0% {
    opacity: 0;
    transform: scale(.72)
  }
  26% {
    opacity: .22
  }
  100% {
    opacity: 0;
    transform: scale(2.55)
  }
}
@keyframes prTravel {
  0% {
    offset-distance: 0%;
    opacity: 0
  }
  8% {
    opacity: 1
  }
  90% {
    opacity: 1
  }
  100% {
    offset-distance: 100%;
    opacity: 0
  }
}
#projects .pr-orb {
  offset-path: path('M52 112 C124 58 198 70 258 82 C319 95 385 92 453 62 C535 25 622 24 715 75');
  offset-rotate: 0deg
}
@media(max-width:700px) {
  #projects .mini-diagram.project-delivery {
    height: 165px
  }
}