:root {
            --bg: #071525;
            --surface: #0d2034;
            --surface2: #102942;
            --text: #f5f3ef;
            --muted: #b7b4bd;
            --red: #075985;
            --red2: #168BFF;
            --line: rgba(255, 255, 255, .13);
            --max: 1160px
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

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

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

        .wrap {
            width: min(var(--max), calc(100% - 40px));
            margin: auto
        }

        header {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 1000;
                border-bottom: 1px solid rgba(255, 255, 255, .12);
                background: rgba(5, 16, 29, .91);
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
        }

        .nav {
            height: 76px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px
        }

        .logo {
            font-weight: 900;
            letter-spacing: .08em;
            font-size: .95rem
        }

        .logo span {
            color: #36C8FF
        }

        .links {
            display: flex;
            gap: 25px;
            align-items: center;
            font-size: .84rem;
            color: #e0dce0
        }

        .links a:hover {
            color: #36C8FF
        }

        .navbtn {
            border: 1px solid rgba(255, 255, 255, .45);
            padding: 9px 4px;
            border-radius: 3px
        }

        .hero {
            min-height: 700px;
            display: flex;
            align-items: center;
            position: relative;
            isolation: isolate;
            overflow: hidden;
            background: #071525
        }

        .hero:before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image: url('../images/kunwar-ali-cutout.png');
    background-repeat: no-repeat;
    background-position: right 7% bottom;
    background-size: auto 84%;
}

        .hero:after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, #071525 0%, rgba(7,21,37,.97) 34%, rgba(7,21,37,.72) 56%, rgba(7,21,37,.16) 100%), linear-gradient(0deg, #071525 0%, transparent 35%);
    pointer-events: none;
}

        .hero-content {
            padding: 128px 0 70px;
            max-width: 740px
        }

        .eyebrow {
            color: #36C8FF;
            text-transform: uppercase;
            font-size: .72rem;
            letter-spacing: .2em;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 11px
        }

        .eyebrow:before {
            content: "";
            width: 30px;
            height: 2px;
            background: #168BFF
        }

        h1 {
            font-size: clamp(3.8rem, 8vw, 7.3rem);
            letter-spacing: -.075em;
            line-height: .92;
            margin: 18px 0 18px;
            font-weight: 850
        }

        h1 span {
            color: #36C8FF
        }

        .role {
            font-size: clamp(1.05rem, 2vw, 1.35rem);
            font-weight: 650;
            max-width: 620px;
            line-height: 1.5
        }

        .lead {
            color: #B9C9D8;
            max-width: 610px;
            margin: 17px 0 28px;
            font-size: 1rem
        }

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

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 13px 18px;
            font-size: .86rem;
            font-weight: 800;
            border: 1px solid var(--line);
            transition: .2s
        }

        .btn-primary {
            background: var(--red);
            border-color: var(--red)
        }

        .btn:hover {
            transform: translateY(-2px);
            border-color: #36C8FF
        }

        .hero-note {
            display: flex;
            gap: 25px;
            margin-top: 42px;
            color: #A9BBCD;
            font-size: .82rem
        }

        .hero-note strong {
            color: white
        }

        .hero-note div {
            border-left: 2px solid var(--red);
            padding-left: 12px
        }

        .ticker {
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            background: #17171c
        }

        .ticker-inner {
            display: grid;
            grid-template-columns: repeat(4, 1fr)
        }

        .ticker-item {
            padding: 20px 18px;
            border-right: 1px solid var(--line)
        }

        .ticker-item:first-child {
            padding-left: 0
        }

        .ticker-item:last-child {
            border: 0
        }

        .ticker-item b {
            display: block;
            font-size: 1rem
        }

        .ticker-item small {
            color: var(--muted);
            font-size: .78rem
        }

        .section {
            padding: 76px 0
        }

        .section-top {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 30px;
            margin-bottom: 32px
        }

        .kicker {
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .18em;
            color: #36C8FF;
            font-weight: 850
        }

        .section h2 {
            font-size: clamp(2rem, 4vw, 3.5rem);
            letter-spacing: -.055em;
            line-height: 1.04;
            margin: 10px 0 0;
            max-width: 690px
        }

        .intro {
            color: var(--muted);
            max-width: 440px;
            margin: 0;
            font-size: .93rem
        }

        .about-grid {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 54px
        }

        .quote {
            background: linear-gradient(145deg, #0A2C4A, #075985);
            padding: 29px;
            min-height: 250px;
            display: flex;
            flex-direction: column;
            justify-content: space-between
        }

        .quote-mark {
            font-size: 3rem;
            line-height: 1;
            color: #8AE8FF
        }

        .quote p {
            font-size: 1.35rem;
            line-height: 1.42;
            letter-spacing: -.025em;
            margin: 16px 0
        }

        .quote small {
            color: #CBEFFF
        }

        .about-copy p {
            color: var(--muted);
            margin: 0 0 16px
        }

        .about-copy strong {
            color: var(--text)
        }

        .taglist {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 20px
        }

        .tag {
            border: 1px solid var(--line);
            padding: 7px 11px;
            font-size: .78rem;
            color: #E0EFFA
        }

        .dark-section {
            background: #15151a;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line)
        }

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

        .tile {
            background: var(--surface);
            border: 1px solid var(--line);
            padding: 24px;
            min-height: 190px;
            position: relative
        }

        .tile:before {
            content: "";
            position: absolute;
            top: -1px;
            left: 24px;
            width: 40px;
            height: 3px;
            background: var(--red2)
        }

        .tile .num {
            font-size: .72rem;
            letter-spacing: .15em;
            color: #36C8FF;
            font-weight: 850
        }

        .tile h3 {
            margin: 13px 0 8px;
            font-size: 1.05rem;
            line-height: 1.25
        }

        .tile p {
            margin: 0;
            color: var(--muted);
            font-size: .86rem
        }

        .stack {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 22px
        }

        .stack span {
            font-size: .78rem;
            background: #222229;
            padding: 8px 11px;
            color: #D5E7F5;
            border: 1px solid var(--line)
        }

        .career {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px
        }

        .career-card {
            padding: 25px;
            background: var(--surface);
            border: 1px solid var(--line)
        }

        .career-card .label {
            color: #36C8FF;
            text-transform: uppercase;
            font-size: .7rem;
            letter-spacing: .15em;
            font-weight: 800
        }

        .career-card h3 {
            margin: 10px 0 3px;
            font-size: 1.25rem
        }

        .career-card .sub {
            color: var(--muted);
            font-size: .86rem
        }

        .career-card ul {
            padding-left: 18px;
            margin: 18px 0 0;
            color: #C1D4E5;
            font-size: .88rem
        }

        .career-card li {
            margin: 7px 0
        }

        .media-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px
        }

        .media-card {
            display: flex;
            flex-direction: column;
            padding: 25px;
            background: var(--surface);
            border: 1px solid var(--line);
            min-height: 200px
        }

        .media-brand {
            font-size: .7rem;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: #36C8FF;
            font-weight: 850
        }

        .media-card h3 {
            font-size: 1.25rem;
            line-height: 1.3;
            margin: 12px 0
        }

        .media-card p {
            color: var(--muted);
            font-size: .88rem;
            margin: 0 0 20px
        }

        .media-card a {
            margin-top: auto;
            color: #36C8FF;
            font-weight: 800;
            font-size: .86rem
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px
        }

        .step {
            padding: 19px 16px;
            border-top: 2px solid var(--red);
            background: var(--surface)
        }

        .step b {
            display: block;
            font-size: .85rem;
            margin: 8px 0
        }

        .step span {
            font-size: .72rem;
            color: #36C8FF;
            letter-spacing: .1em;
            font-weight: 850
        }

        .step p {
            font-size: .8rem;
            color: var(--muted);
            margin: 0
        }

        .contact {
            padding: 0 0 75px
        }

        .contact-box {
            padding: 40px;
            background: linear-gradient(110deg, #08223A, #0d2034 78%);
            border: 1px solid rgba(54, 200, 255, .32);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px
        }

        .contact-box h2 {
            font-size: clamp(2rem, 4vw, 3.4rem);
            line-height: 1;
            margin: 10px 0
        }

        .contact-box p {
            color: #AFC5D9;
            max-width: 560px;
            margin: 0
        }

        .contact-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap
        }

        footer {
            border-top: 1px solid var(--line);
            padding: 20px 0;
            color: #91A8BE;
            font-size: .78rem
        }

        .foot {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            flex-wrap: wrap
        }

        .foot strong {
            color: #f4f3f0
        }

        @media(max-width:850px) {
            .hero {
                min-height: 640px
            }

            

            .hero:after {
                background: linear-gradient(90deg, #071525 0%, rgba(7, 21, 37, .90) 48%, rgba(7, 21, 37, .4) 100%), linear-gradient(0deg, #071525 0%, transparent 45%)
            }

            .hero-content {
                max-width: 620px
            }

            .about-grid {
                grid-template-columns: 1fr;
                gap: 22px
            }

            .quote {
                min-height: 190px
            }

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

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

            .section-top {
                display: block
            }

            .intro {
                margin-top: 14px
            }

            .contact-box {
                align-items: flex-start;
                flex-direction: column
            }

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

            .ticker-item:nth-child(2) {
                border-right: 0
            }

            .ticker-item:nth-child(-n+2) {
                border-bottom: 1px solid var(--line)
            }
        }

        @media(max-width:560px) {
            .wrap {
                width: calc(100% - 30px)
            }

            .nav {
                height: 65px
            }

            .links {
                gap: 12px
            }

            .links a:not(.navbtn) {
                display: none
            }

            .hero {
                min-height: 690px
            }

            

            .hero:after {
                background: linear-gradient(180deg, rgba(7, 21, 37, .12) 0%, rgba(7, 21, 37, .6) 27%, #071525 58%, #071525 100%)
            }

            .hero-content {
                padding: 315px 0 38px
            }

            h1 {
                font-size: 4rem;
                margin: 17px 0
            }

            .role {
                font-size: 1.05rem
            }

            .lead {
                font-size: .92rem
            }

            .hero-note {
                gap: 14px;
                flex-wrap: wrap;
                margin-top: 26px
            }

            .section {
                padding: 52px 0
            }

            .grid3,
            .media-grid,
            .career {
                grid-template-columns: 1fr
            }

            .tile {
                padding: 21px;
                min-height: 0
            }

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

            .step {
                padding: 15px 12px
            }

            .contact-box {
                padding: 26px 22px
            }

            .contact-buttons .btn {
                width: 100%;
                justify-content: center
            }

            .ticker-item {
                padding: 15px 10px
            }

            .ticker-item:first-child {
                padding-left: 0
            }

            .ticker-item b {
                font-size: .9rem
            }
        }

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

            * {
                transition: none !important
            }
        }

        .hero {
            background: #071525;
}

@media (max-width: 850px) {
    
}
@media (max-width: 600px) {
    .hero { padding-top: 62px; }
    
    .hero-content { padding-top: 330px; }
}

/* Single portrait only: responsive placement */
@media (max-width: 850px) {
  .hero:before { background-position: right 4% bottom; background-size: auto 78%; }
}
@media (max-width: 600px) {
  .hero:before { background-position: center top 76px; background-size: auto 48%; }
}

/* Hero stats row aligned to the supplied reference */
.hero-note {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}
.hero-note > div {
  min-width: 0;
  padding: 4px 16px;
  border-left: 2px solid #36C8FF;
}
.hero-note > div:first-child { padding-left: 16px; }
.hero-note strong { display: inline-block; margin-bottom: 3px; }
@media (max-width: 600px) {
  .hero-note { grid-template-columns: 1fr; gap: 12px; }
}

/* Header wordmark image */
.brand-logo {
  display: block;
  width: 154px;
  height: auto;
  max-height: 42px;
  object-fit: contain;
}
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
@media (max-width: 600px) {
  .brand-logo { width: 132px; max-height: 36px; }
}

/* Premium wordmark sizing */
.brand-logo {
  width: 150px;
  height: 34px;
  max-height: 34px;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 600px) {
  .brand-logo { width: 128px; height: 30px; max-height: 30px; }
}

/* Refined executive navigation: clean links with cyan underline; one strong CTA */
header .links,
header nav.links {
  display: flex;
  align-items: center;
  gap: 25px;
}
header .links a:not(.contact-btn),
header nav.links a:not(.contact-btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
  color: #C9D8E8;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  transition: color .2s ease;
}
header .links a:not(.contact-btn)::after,
header nav.links a:not(.contact-btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 3px;
  height: 2px;
  background: linear-gradient(90deg, #168BFF, #36C8FF);
  transition: right .22s ease;
}
header .links a:not(.contact-btn):hover,
header nav.links a:not(.contact-btn):hover {
  color: #FFFFFF;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
header .links a:not(.contact-btn):hover::after,
header nav.links a:not(.contact-btn):hover::after {
  right: 0;
}
header .links a.contact-btn,
header nav.links a.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  color: #061525;
  background: linear-gradient(110deg, #36C8FF, #168BFF);
  border: 1px solid #36C8FF;
  border-radius: 5px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(22, 139, 255, .18);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
header .links a.contact-btn:hover,
header nav.links a.contact-btn:hover {
  color: #04101E;
  background: linear-gradient(110deg, #72DEFF, #369DFF);
  border-color: #72DEFF;
  box-shadow: 0 7px 22px rgba(54, 200, 255, .28);
  transform: translateY(-1px);
}
@media (max-width: 850px) {
  header .links, header nav.links { gap: 15px; }
}
@media (max-width: 600px) {
  header .links, header nav.links { gap: 10px; }
  header .links a:not(.contact-btn), header nav.links a:not(.contact-btn) { padding: 8px 0; }
  header .links a.contact-btn, header nav.links a.contact-btn { padding: 8px 10px; }
}