:root {
     --gold: #d3af37;
     --navy: #141b47;
     --ink: #080c28;
     --muted: #687087;
     --soft: #f5f5f3
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth;
     scroll-padding-top: 90px
 }

 body {
     font-family: "DM Sans", sans-serif;
     color: var(--ink);
     font-size: 14px;
     line-height: 1.75
 }

 a {
     text-decoration: none
 }

 .topbar {
     background: var(--navy);
     color: #d6d9e5;
     font-size: 9px;
     letter-spacing: .13em;
     padding: 7px 0
 }

 .topbar .container {
     display: flex;
     justify-content: space-between
 }

 .topbar a {
     color: #fff
 }

 .navbar {
     background: #fff;
     padding: 12px 0;
     box-shadow: 0 4px 22px #080c2810;
     z-index: 1000
 }

 .navbar-brand img {
     width: 235px;
     height: auto;
     display: block
 }

 .nav-link {
     font-size: 10px;
     text-transform: uppercase;
     font-weight: 700;
     letter-spacing: .045em;
     color: var(--ink) !important;
     padding: 12px 9px !important;
     position: relative
 }

 .nav-link:after {
     content: "";
     position: absolute;
     left: 9px;
     right: 100%;
     bottom: 5px;
     height: 2px;
     background: var(--gold);
     transition: .3s
 }

 .nav-link:hover:after,
 .nav-link.active:after {
     right: 9px
 }

 .btn {
     border-radius: 2px;
     text-transform: uppercase;
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .08em;
     padding: 13px 19px;
     transition: transform .25s, background .25s, box-shadow .25s
 }

 .btn:hover {
     transform: translateY(-2px)
 }

 .btn-gold {
     background: var(--gold);
     border: 1px solid var(--gold);
     color: var(--ink)
 }

 .btn-gold:hover {
     background: #e3c75f;
     border-color: #e3c75f;
     color: var(--ink);
     box-shadow: 0 8px 22px #d3af3738
 }

 .btn-navy {
     background: var(--navy);
     border: 1px solid var(--navy);
     color: #fff
 }

 .btn-navy:hover {
     background: #222d68;
     color: #fff
 }

 .page-hero {
     min-height: 490px;
     position: relative;
     display: flex;
     align-items: center;
     color: #fff;
     background-image: var(--hero);
     background-position: center;
     background-size: cover;
     background-attachment: fixed;
     overflow: hidden
 }

 .page-hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(8, 12, 40, .94), rgba(20, 27, 71, .78) 55%, rgba(20, 27, 71, .28))
 }

 .page-hero-content {
     position: relative;
     padding-top: 85px;
     padding-bottom: 85px;
     animation: heroIn .9s ease both
 }

 .page-hero h1 {
     font: 800 clamp(42px, 6vw, 68px)/1.08 Manrope;
     letter-spacing: -.055em;
     max-width: 800px;
     margin: 20px 0
 }

 .page-hero h1 em,
 h2 em {
     font-style: normal;
     color: var(--gold)
 }

 .page-hero p {
     max-width: 600px;
     color: #e1e4ec;
     font-size: 14px;
     line-height: 1.9;
     margin-bottom: 25px
 }

 .eyebrow {
     display: flex;
     align-items: center;
     gap: 9px;
     color: #9c8122;
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .17em;
     text-transform: uppercase
 }

 .eyebrow:before {
     content: "";
     width: 22px;
     height: 2px;
     background: var(--gold)
 }

 .eyebrow-light {
     color: #f1e6b9
 }

 .section {
     padding: 90px 0
 }

 .section-soft {
     background: var(--soft)
 }

 h2 {
     font: 800 clamp(33px, 4vw, 49px)/1.12 Manrope;
     letter-spacing: -.05em;
     color: var(--ink);
     margin: 15px 0 20px
 }

 .lead-copy {
     font: 600 16px/1.8 Manrope;
     color: #29304b
 }

 .section p {
     color: var(--muted);
     font-size: 15px;
     line-height: 1.95
 }

 .photo-wrap {
     position: relative;
     padding: 0 18px 18px 0
 }

 .photo-wrap:after {
     content: "";
     position: absolute;
     inset: 20px 0 0 20px;
     background: var(--gold);
     z-index: 0
 }

 .photo-wrap img {
     width: 100%;
     height: 400px;
     object-fit: cover;
     position: relative;
     z-index: 1
 }

 .photo-caption {
     position: absolute;
     z-index: 2;
     bottom: 0;
     left: 0;
     background: var(--navy);
     color: #fff;
     padding: 12px 18px;
     font-size: 8px;
     letter-spacing: .15em
 }

 .text-link {
     display: inline-block;
     color: var(--navy);
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .1em;
     text-transform: uppercase;
     border-bottom: 1px solid var(--gold);
     padding: 8px 0
 }

 .text-link b {
     color: #a8891e;
     margin-left: 10px
 }

 .section-heading {
     text-align: center;
     max-width: 700px;
     margin: 0 auto
 }

 .section-heading .eyebrow {
     justify-content: center
 }

 .section-heading p {
     max-width: 580px;
     margin: 0 auto
 }

 .cap-card {
     background: #fff;
     padding: 25px 22px;
     min-height: 290px;
     border: 1px solid #e9e9e7;
     box-shadow: 0 8px 28px #080c2808;
     transition: .3s;
     height: 100%
 }

 .cap-card:hover {
     transform: translateY(-7px);
     border-color: var(--gold);
     box-shadow: 0 18px 38px #080c2815
 }

 .cap-no {
     font-size: 8px;
     letter-spacing: .13em;
     font-weight: 800;
     color: #9b8124
 }

 .cap-icon {
     font-size: 30px;
     color: var(--gold);
     margin: 19px 0
 }

 .cap-card h3 {
     font: 800 18px/1.3 Manrope;
     color: var(--navy)
 }

 .cap-card p {
     font-size: 10px !important;
     min-height: 65px
 }

 .cap-card a {
     font-size: 9px;
     font-weight: 800;
     color: #927619;
     text-transform: uppercase;
     letter-spacing: .08em
 }

 .parallax-band {
     padding: 100px 0;
     color: #fff;
     background-image: linear-gradient(90deg, rgba(8, 12, 40, .94), rgba(20, 27, 71, .68)), url("https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=2000&q=85");
     background-size: cover;
     background-position: center;
     background-attachment: fixed
 }

 .parallax-band h2 {
     color: #fff;
     font-size: clamp(36px, 5vw, 56px);
     margin: 20px 0
 }

 .parallax-band p {
     color: #d9dce7;
     max-width: 550px;
     margin-bottom: 25px
 }

 .parallax-short {
     padding: 75px 0
 }

 .industry-tile {
     height: 310px;
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 24px;
     color: #fff;
     position: relative;
     isolation: isolate;
     overflow: hidden
 }

 .industry-tile:before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: linear-gradient(0deg, rgba(8, 12, 40, .95), rgba(8, 12, 40, .05));
     transition: .35s
 }

 .industry-tile:hover:before {
     background: linear-gradient(0deg, rgba(8, 12, 40, .98), rgba(8, 12, 40, .28))
 }

 .industry-tile:hover {
     color: #fff
 }

 .industry-tile span,
 .application-card span {
     font-size: 8px;
     color: var(--gold);
     font-weight: 800;
     letter-spacing: .14em
 }

 .industry-tile b {
     font: 800 18px Manrope;
     margin-top: 8px
 }

 .wide-photo {
     width: 100%;
     height: 410px;
     object-fit: cover
 }

 .principle {
     background: #fff;
     border: 1px solid #e8e8e5;
     padding: 28px;
     min-height: 210px;
     height: 100%;
     transition: .3s
 }

 .principle:hover {
     transform: translateY(-5px);
     border-color: var(--gold)
 }

 .principle>b {
     font: 800 30px Manrope;
     color: var(--gold)
 }

 .principle h3 {
     font: 800 17px Manrope;
     color: var(--navy);
     margin: 20px 0 10px
 }

 .principle p {
     font-size: 15px !important
 }

 .narrow-copy {
     max-width: 780px
 }

 .narrow-copy p {
     font-size: 15px
 }

 .tech-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 55px;
     align-items: center;
     padding: 55px 0;
     border-bottom: 1px solid #e8e8e5;
     scroll-margin-top: 100px
 }

 .tech-row img {
     width: 100%;
     height: 340px;
     object-fit: cover
 }

 .tech-row h2 {
     font-size: 35px
 }

 .tech-row h4 {
     font: 800 12px Manrope;
     color: var(--navy);
     margin-top: 22px
 }

 .tech-row ul {
     padding-left: 18px;
     color: var(--muted);
     font-size: 15px;
     line-height: 2
 }

 .tech-row.reverse img {
     order: 2
 }

 .tech-row.reverse div {
     order: 1
 }

 .application-card {
     background: #fff;
     box-shadow: 0 8px 30px #080c280c;
     height: 100%
 }

 .application-card img {
     width: 100%;
     height: 235px;
     object-fit: cover
 }

 .application-card div {
     padding: 23px
 }

 .application-card h3 {
     font: 800 20px Manrope;
     color: var(--navy);
     margin: 10px 0
 }

 .process-steps {
     max-width: 850px;
     margin-left: auto;
     margin-right: auto;
     position: relative
 }

 .process-steps:before {
     content: "";
     position: absolute;
     top: 15px;
     bottom: 30px;
     left: 28px;
     width: 1px;
     background: #dfd4a8
 }

 .process-step {
     display: grid;
     grid-template-columns: 58px 1fr;
     gap: 25px;
     position: relative;
     margin-bottom: 38px
 }

 .process-step>span {
     width: 58px;
     height: 58px;
     background: var(--navy);
     color: var(--gold);
     display: grid;
     place-items: center;
     font: 800 18px Manrope;
     border: 4px solid var(--soft);
     z-index: 1
 }

 .process-step h3 {
     font: 800 21px Manrope;
     color: var(--navy);
     margin: 8px 0
 }

 .process-step p,
 .process-step li {
     font-size: 11px;
     color: var(--muted)
 }

 .process-step ul {
     padding-left: 18px
 }

 .contact-detail {
     border-top: 1px solid #e6e6e3;
     padding: 17px 0
 }

 .contact-detail span {
     display: block;
     color: #927719;
     font-size: 8px;
     font-weight: 800;
     letter-spacing: .14em
 }

 .contact-detail a,
 .contact-detail p {
     font: 700 14px Manrope;
     color: var(--navy);
     margin: 5px 0 0
 }

 .enquiry-form {
     background: #fff;
     padding: 32px;
     box-shadow: 0 10px 38px #080c2810;
     border: 1px solid #e9e9e7
 }

 .enquiry-form h3 {
     font: 800 21px Manrope;
     color: var(--navy);
     margin-bottom: 22px
 }

 .enquiry-form label {
     display: block;
     font-size: 9px;
     text-transform: uppercase;
     letter-spacing: .08em;
     font-weight: 800;
     color: #535b70;
     margin-bottom: 7px
 }

 .form-control,
 .form-select {
     border-radius: 0;
     padding: 11px;
     font-size: 11px;
     border: 1px solid #dedfdf
 }

 .form-control:focus,
 .form-select:focus {
     border-color: var(--gold);
     box-shadow: 0 0 0 .2rem #d3af3722
 }

 .form-check-label {
     font-size: 9px !important;
     line-height: 1.6;
     color: var(--muted);
     text-transform: none !important;
     letter-spacing: 0 !important;
     font-weight: 400 !important
 }

 .enquiry-form small,
 .small-note {
     display: block;
     font-size: 9px;
     color: #8b91a0;
     margin-top: 12px
 }

 .form-status {
     font-size: 11px !important;
     color: #24613f !important;
     margin: 10px 0 0
 }

 .insight-card {
     background: #fff;
     border: 1px solid #e8e8e6;
     height: 100%;
     box-shadow: 0 8px 28px #080c2808;
     transition: .3s
 }

 .insight-card:hover {
     transform: translateY(-6px)
 }

 .insight-card img {
     width: 100%;
     height: 190px;
     object-fit: cover
 }

 .insight-card div {
     padding: 22px
 }

 .insight-card span {
     font-size: 8px;
     color: #927719;
     font-weight: 800;
     letter-spacing: .13em
 }

 .insight-card h3 {
     font: 800 17px/1.4 Manrope;
     color: var(--navy);
     margin: 10px 0
 }

 .insight-card p {
     min-height: 55px
 }

 .insight-card a {
     font-size: 9px;
     text-transform: uppercase;
     font-weight: 800;
     color: #927719
 }

 .cta-strip {
     padding: 48px 0;
     background: #eeeee9
 }

 .cta-strip span {
     font-size: 8px;
     color: #927719;
     letter-spacing: .15em;
     font-weight: 800
 }

 .cta-strip h2 {
     font-size: 28px;
     margin: 8px 0 0
 }

 footer {
     background: #101631;
     padding: 58px 0 20px
 }

 footer .footer-logo {
     width: 220px;
     padding: 8px
 }

 footer p {
     font-size: 10px;
     color: #9da6bc;
     max-width: 300px;
     margin-top: 17px
 }

 footer h4 {
     font-size: 15px;
     text-transform: uppercase;
     letter-spacing: .15em;
     color: var(--gold);
     margin-bottom: 17px
 }

 footer a,
 footer span {
     color: #c6cada;
     font-size: 14px;
     margin-bottom: 10px
 }

 footer a:hover {
     color: var(--gold)
 }

 .footer-legal {
     border: 1px solid #ffffff25;
     padding: 16px;
     margin-top: 28px
 }

 .footer-legal strong {
     font-size: 8px;
     color: var(--gold);
     letter-spacing: .14em
 }

 .footer-legal p {
     max-width: none;
     margin: 8px 0 0;
     font-size: 12px
 }

 .footer-bottom {
     display: flex;
     justify-content: space-between;
     gap: 15px;
     border-top: 1px solid #ffffff24;
     margin-top: 20px;
     padding-top: 18px;
     font-size: 9px;
     color: #8f98ad
 }

 .footer-bottom a {
     display: inline;
     color: #c6cada
 }

 .reveal {
     opacity: 0;
     transform: translateY(24px);
     transition: opacity .7s ease, transform .7s ease
 }

 .reveal.is-visible {
     opacity: 1;
     transform: translateY(0)
 }

 @keyframes heroIn {
     from {
         opacity: 0;
         transform: translateY(22px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 @media(max-width:1199px) {
     .navbar-brand img {
         width: 200px
     }

     .nav-link {
         padding: 10px 7px !important;
         font-size: 9px
     }
 }

 @media(max-width:767px) {
     .page-hero {
         min-height: 440px;
         background-attachment: scroll
     }

     .page-hero-content {
         padding-top: 65px;
         padding-bottom: 65px
     }

     .section {
         padding: 62px 0
     }

     .parallax-band {
         background-attachment: scroll;
         padding: 70px 0
     }

     .tech-row {
         grid-template-columns: 1fr;
         gap: 25px;
         padding: 38px 0
     }

     .tech-row.reverse img,
     .tech-row.reverse div {
         order: initial
     }

     .tech-row img {
         height: 260px
     }

     .wide-photo {
         height: 300px
     }

     .photo-wrap img {
         height: 300px
     }

     .footer-bottom {
         display: block
     }

     .footer-bottom span {
         margin-bottom: 8px
     }

     .cta-strip h2 {
         font-size: 24px
     }

     .cta-strip .btn {
         margin-top: 20px
     }

     .navbar-brand img {
         width: 190px
     }
 }

 @media(prefers-reduced-motion:reduce) {
     html {
         scroll-behavior: auto
     }

     *,
     *::before,
     *::after {
         animation: none !important;
         transition: none !important
     }

     .reveal {
         opacity: 1;
         transform: none
     }
 }


 /* ===== VIHARAA MODERN 2026 VISUAL SYSTEM ===== */
 :root {
     --gold: #d3af37;
     --navy: #141b47;
     --ink: #080c28;
     --paper: #f6f6f2;
     --muted: #73798c
 }

 body {
     font-family: "DM Sans", sans-serif;
     color: var(--ink);
     font-size: 15px;
     overflow-x: hidden
 }

 h1,
 h2,
 h3,
 h4,
 .navbar,
 .btn {
     font-family: "Manrope", sans-serif
 }

 .topbar {
     background: var(--ink);
     padding: 9px 0;
     font-size: 9px;
     letter-spacing: .16em
 }

 .topbar .container {
     display: flex;
     justify-content: space-between;
     align-items: center
 }

 .topbar i {
     display: inline-block;
     width: 5px;
     height: 5px;
     background: var(--gold);
     border-radius: 50%;
     margin: 0 10px 1px
 }

 .topbar a {
     color: #fff;
     font-weight: 700
 }

 .topbar a b {
     color: var(--gold);
     margin-left: 8px
 }

 .modern-nav {
     padding: 13px 0;
     background: #fff;
     box-shadow: 0 8px 30px #080c280b
 }

 .modern-nav .navbar-brand img {
     width: 205px
 }

 .modern-nav .nav-link {
     font-size: 13px;
     letter-spacing: .09em;
     font-weight: 800;
     padding: 12px 10px !important
 }

 .modern-nav .nav-link:after {
     height: 2px;
     bottom: 4px
 }

 .nav-cta {
     display: inline-flex;
     align-items: center;
     gap: 18px;
     padding: 13px 17px;
     background: var(--gold);
     color: var(--ink);
     font: 800 9px Manrope;
     letter-spacing: .08em;
     text-transform: uppercase
 }

 .nav-cta span {
     font-size: 15px
 }

 .hero-neo {
     height: min(790px, calc(100vh - 85px));
     min-height: 650px;
     position: relative;
     background: var(--ink);
     color: white;
     overflow: hidden
 }

 .hero-image {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: center 43%;
     transform: scale(1.06);
     animation: heroZoom 12s ease-out forwards
 }

 .hero-shade {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(8, 12, 40, .97) 0%, rgba(8, 12, 40, .82) 44%, rgba(8, 12, 40, .28) 100%), linear-gradient(0deg, rgba(8, 12, 40, .75), transparent 40%)
 }

 .hero-grid {
     height: 100%;
     position: relative;
     display: flex;
     align-items: center
 }

 .hero-copy {
     padding-bottom: 35px;
     max-width: 760px;
     animation: heroRise 1s .1s both
 }

 .eyebrow-light,
 .eyebrow {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 9px;
     letter-spacing: .19em;
     font-weight: 800
 }

 .eyebrow-dot {
     width: 7px;
     height: 7px;
     background: var(--gold);
     border-radius: 50%;
     box-shadow: 0 0 0 5px #d3af3725;
     display: inline-block
 }

 .hero-copy h1 {
     font: 800 clamp(76px, 10vw, 144px)/.91 Manrope;
     letter-spacing: -.095em;
     margin: 34px 0 28px
 }

 .hero-copy h1 em,
 .display-heading em,
 .statement-content h2 em,
 .contact-neo h2 em {
     font-style: normal;
     color: var(--gold)
 }

 .hero-copy>p {
     font-size: 16px;
     line-height: 1.8;
     color: #d5d8e4;
     max-width: 510px
 }

 .hero-actions {
     display: flex;
     align-items: center;
     gap: 30px;
     margin-top: 34px
 }

 .btn-neo-gold {
     background: var(--gold);
     color: var(--ink);
     padding: 17px 22px;
     font: 800 10px Manrope;
     letter-spacing: .08em;
     text-transform: uppercase;
     display: inline-flex;
     gap: 24px;
     align-items: center;
     transition: .3s
 }

 .btn-neo-gold:hover {
     background: #e7c94f;
     color: var(--ink);
     transform: translateY(-4px);
     box-shadow: 0 12px 30px #d3af3733
 }

 .btn-neo-gold span,
 .hero-text-link span {
     font-size: 16px
 }

 .hero-text-link {
     color: white;
     font: 700 10px Manrope;
     letter-spacing: .1em;
     text-transform: uppercase;
     border-bottom: 1px solid #ffffff66;
     padding: 12px 0
 }

 .hero-aside {
     position: absolute;
     right: 5%;
     top: 22%;
     width: 260px;
     height: 340px
 }

 .orbit-mark {
     position: relative;
     width: 230px;
     height: 230px;
     margin: auto
 }

 .orbit {
     position: absolute;
     border: 1px solid #d3af3777;
     border-radius: 50%;
     inset: 10px;
     animation: orbitSpin 24s linear infinite
 }

 .orbit-two {
     inset: 34px;
     border-style: dashed;
     animation-direction: reverse;
     animation-duration: 18s
 }

 .orbit:before,
 .orbit:after {
     content: "";
     position: absolute;
     width: 9px;
     height: 9px;
     background: var(--gold);
     border-radius: 50%;
     top: 25px;
     left: 27px;
     box-shadow: 0 0 18px var(--gold)
 }

 .orbit:after {
     top: auto;
     left: auto;
     bottom: 17px;
     right: 35px;
     width: 5px;
     height: 5px
 }

 .orbit-core {
     position: absolute;
     inset: 70px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: #d3af3718;
     border: 1px solid #d3af3788;
     color: var(--gold);
     font: 800 62px Manrope
 }

 .orbit-label {
     position: absolute;
     right: -30px;
     bottom: 12px;
     color: #fff;
     font: 700 8px/1.7 Manrope;
     letter-spacing: .17em
 }

 .hero-note {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 190px;
     border-left: 1px solid var(--gold);
     padding: 4px 0 5px 18px;
     display: grid;
     gap: 8px
 }

 .hero-note span {
     font-size: 8px;
     color: var(--gold);
     letter-spacing: .16em
 }

 .hero-note b {
     font: 700 15px/1.3 Manrope
 }

 .hero-note i {
     font-size: 9px;
     color: #c7cada;
     font-style: normal
 }

 .hero-bottomline {
     position: absolute;
     bottom: 27px;
     left: 12px;
     right: 12px;
     display: flex;
     justify-content: space-between;
     font-size: 8px;
     letter-spacing: .16em;
     color: #d4d7e2
 }

 .hero-bottomline b {
     color: var(--gold);
     padding: 0 7px
 }

 .hero-bottomline i {
     font-size: 14px;
     color: var(--gold);
     font-style: normal;
     margin-left: 8px
 }

 .hero-vertical {
     position: absolute;
     right: 20px;
     top: 50%;
     writing-mode: vertical-rl;
     transform: translateY(-50%);
     font-size: 7px;
     letter-spacing: .24em;
     color: #ffffff9c
 }

 .section-pad {
     padding: 125px 0
 }

 .intro-neo {
     background: var(--paper)
 }

 .eyebrow {
     color: #8c741d
 }

 .eyebrow>span {
     width: 23px;
     height: 2px;
     background: var(--gold)
 }

 .display-heading {
     font: 800 clamp(46px, 6vw, 78px)/1.02 Manrope;
     letter-spacing: -.075em;
     margin: 24px 0;
     color: var(--ink)
 }

 .intro-text {
     font-size: 15px !important;
     line-height: 1.9 !important;
     color: #50586f !important
 }

 .line-link {
     display: inline-flex;
     align-items: center;
     gap: 25px;
     color: var(--ink);
     font: 800 10px Manrope;
     letter-spacing: .1em;
     text-transform: uppercase;
     border-bottom: 1px solid var(--gold);
     padding: 13px 0;
     margin-top: 13px
 }

 .line-link b {
     color: #a4861e;
     font-size: 16px
 }

 .intro-image-wrap {
     height: 480px;
     margin-top: 70px;
     position: relative;
     overflow: hidden
 }

 .intro-image-wrap:after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, #080c2830, transparent 65%)
 }

 .intro-image-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 1s
 }

 .intro-image-wrap:hover img {
     transform: scale(1.035)
 }

 .image-stamp {
     position: absolute;
     z-index: 2;
     left: 5%;
     bottom: 0;
     background: var(--gold);
     width: 195px;
     height: 190px;
     padding: 22px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     color: var(--ink)
 }

 .image-stamp span,
 .image-stamp i {
     font: 800 8px Manrope;
     letter-spacing: .17em;
     font-style: normal
 }

 .image-stamp b {
     font: 800 26px/1.05 Manrope;
     letter-spacing: -.05em
 }

 .image-index {
     position: absolute;
     z-index: 2;
     right: 25px;
     bottom: 25px;
     color: white;
     font: 700 9px Manrope;
     letter-spacing: .16em
 }

 .image-index span {
     color: var(--gold);
     padding: 0 8px
 }

 .capabilities-neo {
     background: #fff
 }

 .section-topline {
     display: flex;
     justify-content: space-between;
     align-items: end;
     gap: 40px;
     margin-bottom: 52px
 }

 .section-topline>p {
     max-width: 330px;
     color: var(--muted);
     font-size: 13px;
     line-height: 1.9;
     margin-bottom: 12px
 }

 .capability-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     border-top: 1px solid #dfe0e1;
     border-bottom: 1px solid #dfe0e1
 }

 .capability-card {
     padding: 28px 24px 30px;
     min-height: 360px;
     color: var(--ink);
     position: relative;
     overflow: hidden;
     border-right: 1px solid #e3e3e3;
     transition: .35s
 }

 .capability-card:last-child {
     border: 0
 }

 .capability-card:before {
     content: "";
     position: absolute;
     inset: 100% 0 0;
     background: var(--navy);
     transition: .45s cubic-bezier(.2, .8, .2, 1);
     z-index: 0
 }

 .capability-card>* {
     position: relative;
     z-index: 1
 }

 .capability-card:hover {
     color: #fff;
     transform: translateY(-8px)
 }

 .capability-card:hover:before {
     inset: 0
 }

 .cap-index {
     font-size: 8px;
     letter-spacing: .16em;
     font-weight: 800;
     color: #9a8024
 }

 .capability-card:hover .cap-index,
 .capability-card:hover p {
     color: #c8ccdc
 }

 .capability-card h3 {
     font: 800 23px/1.2 Manrope;
     letter-spacing: -.05em;
     margin: 23px 0 13px
 }

 .capability-card p {
     font-size: 14px;
     line-height: 1.8;
     color: var(--muted);
 }

 .card-arrow {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-top: 1px solid #dfe0e1;
     padding-top: 17px;
     margin-top: 25px;
     font: 800 12px Manrope;
     letter-spacing: .1em;
     text-transform: uppercase
 }

 .capability-card:hover .card-arrow {
     border-color: #ffffff55
 }

 .card-arrow b {
     font-size: 19px;
     color: var(--gold)
 }

 .animated-icon {
     height: 74px;
     width: 74px;
     position: relative;
     margin: 27px 0 18px;
     color: var(--gold)
 }

 .icon-pulse i {
     position: absolute;
     border: 1px solid var(--gold);
     border-radius: 50%;
     inset: 8px;
     animation: pulseRing 2.4s ease-out infinite
 }

 .icon-pulse i:nth-child(2) {
     animation-delay: .8s
 }

 .icon-pulse i:nth-child(3) {
     animation-delay: 1.6s
 }

 .icon-form i {
     position: absolute;
     width: 11px;
     height: 58px;
     border: 1px solid var(--gold);
     top: 8px;
     left: 30px;
     transform: skew(-24deg);
     animation: formWave 2.4s ease-in-out infinite
 }

 .icon-form i:nth-child(2) {
     left: 45px;
     animation-delay: .2s
 }

 .icon-form i:nth-child(3) {
     left: 15px;
     animation-delay: .4s
 }

 .icon-flow i {
     position: absolute;
     width: 58px;
     height: 18px;
     border: 1px solid var(--gold);
     border-radius: 50%;
     left: 8px;
     top: 8px;
     animation: flowMove 2.2s ease-in-out infinite
 }

 .icon-flow i:nth-child(2) {
     top: 27px;
     animation-delay: .3s
 }

 .icon-flow i:nth-child(3) {
     top: 46px;
     animation-delay: .6s
 }

 .icon-ai i {
     position: absolute;
     width: 12px;
     height: 12px;
     border: 1px solid var(--gold);
     transform: rotate(45deg);
     left: 30px;
     top: 30px;
     animation: aiBlink 2s ease-in-out infinite
 }

 .icon-ai i:nth-child(2) {
     left: 6px;
     top: 6px;
     animation-delay: .3s
 }

 .icon-ai i:nth-child(3) {
     left: 54px;
     top: 54px;
     animation-delay: .6s
 }

 .statement-neo {
     position: relative;
     background: var(--ink);
     color: white;
     padding: 140px 0;
     overflow: hidden
 }

 .statement-bg {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, #080c28f2, #141b47b8), url("https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=2000&q=90") center/cover fixed;
     opacity: .9
 }

 .statement-content {
     position: relative
 }

 .statement-content h2 {
     font: 800 clamp(54px, 8vw, 104px)/.99 Manrope;
     letter-spacing: -.08em;
     margin: 34px 0 55px
 }

 .statement-foot {
     display: flex;
     justify-content: space-between;
     align-items: end;
     border-top: 1px solid #ffffff42;
     padding-top: 24px
 }

 .statement-foot p {
     max-width: 390px;
     color: #c7cbda;
     font-size: 13px;
     line-height: 1.9;
     margin: 0
 }

 .round-link {
     width: 60px;
     height: 60px;
     border: 1px solid var(--gold);
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: var(--gold);
     font-size: 24px;
     transition: .3s
 }

 .round-link:hover {
     background: var(--gold);
     color: var(--ink);
     transform: rotate(45deg)
 }

 .applications-neo {
     background: var(--paper)
 }

 .application-mosaic {
     display: grid;
     grid-template-columns: 1.35fr 1fr;
     grid-template-rows: 260px 260px;
     gap: 16px
 }

 .mosaic-item {
     position: relative;
     overflow: hidden;
     color: #fff;
     isolation: isolate
 }

 .mosaic-item:after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg, #080c28e8, transparent 70%);
     z-index: 0
 }

 .mosaic-item img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .7s
 }

 .mosaic-item:hover img {
     transform: scale(1.07)
 }

 .mosaic-large {
     grid-row: span 2
 }

 .mosaic-item>div {
     position: absolute;
     z-index: 1;
     left: 30px;
     bottom: 27px
 }

 .mosaic-item small {
     font-size: 8px;
     letter-spacing: .17em;
     color: var(--gold);
     font-weight: 800
 }

 .mosaic-item h3 {
     font: 800 25px/1.2 Manrope;
     letter-spacing: -.04em;
     margin: 9px 0 0
 }

 .mosaic-large h3 {
     font-size: 36px
 }

 .mosaic-number {
     position: absolute;
     z-index: 1;
     top: 22px;
     left: 25px;
     font: 800 11px Manrope;
     color: #fff
 }

 .mosaic-arrow {
     position: absolute;
     z-index: 1;
     right: 25px;
     bottom: 25px;
     width: 42px;
     height: 42px;
     border: 1px solid #ffffff9c;
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: var(--gold);
     transition: .3s
 }

 .mosaic-item:hover .mosaic-arrow {
     background: var(--gold);
     color: var(--ink);
     border-color: var(--gold)
 }

 .approach-neo {
     background: #fff
 }

 .approach-lead {
     color: var(--muted);
     font-size: 14px;
     line-height: 1.9;
     max-width: 360px;
     margin: 24px 0
 }

 .approach-step {
     display: grid;
     grid-template-columns: 45px 1fr 25px;
     gap: 20px;
     align-items: start;
     padding: 25px 0;
     border-bottom: 1px solid #e3e3e3;
     transition: .3s
 }

 .approach-step:first-child {
     border-top: 1px solid #e3e3e3
 }

 .approach-step>span {
     font: 800 12px Manrope;
     color: #a2872c;
     padding-top: 4px
 }

 .approach-step h3 {
     font: 800 19px Manrope;
     letter-spacing: -.04em;
     margin: 0 0 8px
 }

 .approach-step p {
     font-size: 11px;
     color: var(--muted);
     margin: 0;
     line-height: 1.8
 }

 .approach-step>b {
     color: var(--gold);
     font-size: 19px;
     transition: .3s
 }

 .approach-step:hover {
     padding-left: 10px
 }

 .approach-step:hover>b {
     transform: translate(3px, -3px)
 }

 .insight-neo {
     background: #f1f1ed
 }

 .insight-feature {
     display: grid;
     grid-template-columns: 1.1fr 1fr;
     background: #fff;
     min-height: 370px
 }

 .insight-feature>img {
     width: 100%;
     height: 100%;
     min-height: 370px;
     object-fit: cover
 }

 .insight-feature-copy {
     padding: 48px;
     align-self: center
 }

 .insight-feature-copy small {
     font-size: 8px;
     letter-spacing: .16em;
     color: #9a8024;
     font-weight: 800
 }

 .insight-feature-copy h3 {
     font: 800 clamp(27px, 3vw, 40px)/1.15 Manrope;
     letter-spacing: -.06em;
     margin: 20px 0
 }

 .insight-feature-copy p {
     color: var(--muted);
     font-size: 12px;
     line-height: 1.8
 }

 .insight-feature-copy a {
     display: inline-flex;
     gap: 22px;
     margin-top: 15px;
     color: var(--ink);
     font: 800 9px Manrope;
     letter-spacing: .1em;
     text-transform: uppercase;
     border-bottom: 1px solid var(--gold);
     padding-bottom: 10px
 }

 .insight-feature-copy a b {
     color: #a2872c
 }

 .contact-neo {
     padding: 105px 0;
     background: var(--navy);
     color: white;
     position: relative;
     overflow: hidden
 }

 .contact-neo:after {
     content: "V";
     position: absolute;
     right: 5%;
     top: -130px;
     font: 800 430px Manrope;
     color: #ffffff08;
     line-height: 1
 }

 .contact-neo .container {
     position: relative;
     z-index: 1
 }

 .contact-neo-row {
     display: flex;
     justify-content: space-between;
     align-items: center
 }

 .contact-neo h2 {
     font: 800 clamp(58px, 8vw, 98px)/.98 Manrope;
     letter-spacing: -.08em;
     margin: 32px 0;
     color:#fff;
 }

 .contact-neo>div>p {
     color: #c6cada;
     font-size: 13px
 }

 .contact-circle {
     width: 125px;
     height: 125px;
     border-radius: 50%;
     background: var(--gold);
     color: var(--ink);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font: 800 12px/1.35 Manrope;
     letter-spacing: .1em;
     transform: rotate(-12deg);
     transition: .4s
 }

 .contact-circle b {
     font-size: 21px;
     margin-top: 5px
 }

 .contact-circle:hover {
     transform: rotate(0) scale(1.07);
     color: var(--ink)
 }

 .footer-neo {
     background: #080c20;
     color: #c7cada;
     padding: 70px 0 20px
 }

 .footer-logo {
     width: 220px;
     padding: 7px
 }

 .footer-neo p {
     max-width: 290px;
     color: #9ba2b7;
     font-size: 14px;
     margin-top: 20px
 }

 .footer-neo h4 {
     font: 800 13px Manrope;
     letter-spacing: .17em;
     color: var(--gold);
     margin-bottom: 22px
 }

 .footer-neo a,
 .footer-neo span {
     display: inline-block;
     color: #c7cada;
     font-size: 14px;
     margin-bottom: 12px
 }

 .footer-neo a:hover {
     color: var(--gold)
 }

 .footer-neo .footer-email {
     font: 700 17px Manrope;
     color: #fff
 }

 .footer-legal-mini {
     border-left: 2px solid var(--gold);
     padding: 10px 14px;
     margin-top: 20px;
     color: #8e96ad;
     font-size: 13px;
     line-height: 1.7
 }

 .footer-bottom {
     display: flex;
     justify-content: space-between;
     border-top: 1px solid #ffffff22;
     margin-top: 55px;
     padding-top: 20px;
     color: #858da5;
     font-size: 9px
 }

 .footer-bottom a {
     display: inline;
     margin: 0;
     color: #bfc4d2
 }

 .reveal {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1)
 }

 .reveal.is-visible {
     opacity: 1;
     transform: translateY(0)
 }

 @keyframes heroRise {
     from {
         opacity: 0;
         transform: translateY(35px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 @keyframes heroZoom {
     to {
         transform: scale(1)
     }
 }

 @keyframes orbitSpin {
     to {
         transform: rotate(360deg)
     }
 }

 @keyframes pulseRing {
     0% {
         transform: scale(.55);
         opacity: 0
     }

     35% {
         opacity: 1
     }

     100% {
         transform: scale(1.25);
         opacity: 0
     }
 }

 @keyframes formWave {

     0%,
     100% {
         transform: skew(-24deg) scaleY(.7)
     }

     50% {
         transform: skew(24deg) scaleY(1.1)
     }
 }

 @keyframes flowMove {

     0%,
     100% {
         transform: translateX(-5px) scaleX(.85);
         opacity: .4
     }

     50% {
         transform: translateX(5px) scaleX(1.1);
         opacity: 1
     }
 }

 @keyframes aiBlink {

     0%,
     100% {
         opacity: .3;
         transform: rotate(45deg) scale(.7)
     }

     50% {
         opacity: 1;
         transform: rotate(135deg) scale(1.2)
     }
 }

 @media(max-width:1199px) {
     .hero-aside {
         right: 2%;
         transform: scale(.8);
         transform-origin: right center
     }

     .modern-nav .navbar-brand img {
         width: 185px
     }
 }

 @media(max-width:991px) {
     .hero-aside {
         display: none
     }

     .hero-neo {
         height: 690px;
         min-height: 600px
     }

     .capability-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .capability-card:nth-child(2) {
         border-right: 0
     }

     .capability-card:nth-child(-n+2) {
         border-bottom: 1px solid #e3e3e3
     }

     .section-pad {
         padding: 90px 0
     }

     .application-mosaic {
         grid-template-rows: 230px 230px
     }

     .insight-feature-copy {
         padding: 30px
     }
 }

 @media(max-width:767px) {
     .topbar {
         font-size: 7px
     }

     .hero-neo {
         height: 690px;
         min-height: 620px
     }

     .hero-copy h1 {
         font-size: 76px
     }

     .hero-copy>p {
         font-size: 13px;
         max-width: 340px
     }

     .hero-actions {
         align-items: flex-start;
         flex-direction: column;
         gap: 15px
     }

     .hero-bottomline {
         font-size: 6px;
         letter-spacing: .08em
     }

     .hero-vertical {
         display: none
     }

     .section-pad {
         padding: 75px 0
     }

     .display-heading {
         font-size: 48px
     }

     .intro-image-wrap {
         height: 330px;
         margin-top: 40px
     }

     .image-stamp {
         width: 145px;
         height: 145px;
         padding: 15px
     }

     .image-stamp b {
         font-size: 20px
     }

     .section-topline {
         display: block
     }

     .section-topline>p {
         margin-top: 20px
     }

     .capability-grid {
         grid-template-columns: 1fr
     }

     .capability-card {
         min-height: 300px;
         border-right: 0;
         border-bottom: 1px solid #e3e3e3 !important
     }

     .capability-card:last-child {
         border-bottom: 0 !important
     }

     .statement-neo {
         padding: 90px 0
     }

     .statement-content h2 {
         font-size: 55px
     }

     .statement-foot {
         align-items: center
     }

     .statement-foot p {
         max-width: 250px;
         font-size: 11px
     }

     .application-mosaic {
         display: flex;
         flex-direction: column
     }

     .mosaic-item,
     .mosaic-large {
         height: 280px
     }

     .mosaic-large h3 {
         font-size: 27px
     }

     .approach-step {
         grid-template-columns: 32px 1fr 20px;
         gap: 12px
     }

     .approach-step h3 {
         font-size: 16px
     }

     .insight-feature {
         grid-template-columns: 1fr
     }

     .insight-feature>img {
         min-height: 230px;
         height: 230px
     }

     .insight-feature-copy {
         padding: 28px
     }

     .contact-neo {
         padding: 75px 0
     }

     .contact-neo-row {
         align-items: flex-start;
         gap: 15px
     }

     .contact-neo h2 {
         font-size: 54px
     }

     .contact-circle {
         width: 85px;
         height: 85px;
         font-size: 9px;
         flex-shrink: 0
     }

     .footer-bottom {
         display: block
     }

     .footer-bottom>span {
         margin-bottom: 10px
     }
 }

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

     *,
     *:before,
     *:after {
         animation: none !important;
         transition: none !important;
         scroll-behavior: auto !important
     }

     .reveal {
         opacity: 1;
         transform: none
     }
 }
 .statement-neo .statement-content h2{color: #fff;}