/* ============================================================
   TOKENS — client palette: Navy #001c7a / Red #f40107
============================================================ */
:root {
    --navy: #040d2b;
    --navy-deep: #040e31;
    --navy-tint: #eef0f9;
    --navy-tint-2: #dde1f3;
    --red: #f40107;
    --red-dark: #c50107;
    --paper: #ffffff;
    --ink-text: #00113d;
    --muted: #aab2d6;
    --muted-dark: #5b638c;
    --line: rgba(255, 255, 255, 0.12);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    background: var(--paper);
    color: var(--ink-text);
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
    cursor: none;
}
::selection {
    background: var(--red);
    color: #fff;
}
a {
    text-decoration: none;
    color: inherit;
}
h1,
h2,
h3,
h4,
.display {
    font-family: "Space Grotesk", sans-serif;
    letter-spacing: -0.01em;
}
.mono {
    font-family: "JetBrains Mono", monospace;
}
.eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--red);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--red);
    display: inline-block;
}
.section {
    padding: 4rem 0;
    position: relative;
}
@media (max-width: 768px) {
    .section {
        padding: 4.5rem 0;
    }
}
.container-narrow {
    max-width: 1240px;
}



/* ------------ scroll bar -------------------- */

/* width */
::-webkit-scrollbar {
  width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #040e31; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #020c2e; 
}

/* ============================================================
   CUSTOM CURSOR
============================================================ */
#cursor-dot,
#cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
#cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--red);
    transition: opacity 0.2s;
}
#cursor-ring {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(244, 1, 7, 0.55);
    transition:
        width 0.25s var(--ease),
        height 0.25s var(--ease),
        border-color 0.25s,
        background 0.25s,
        opacity 0.2s;
}
#cursor-ring.hover {
    width: 64px;
    height: 64px;
    background: rgba(244, 1, 7, 0.1);
    border-color: var(--red);
}
#cursor-ring::before,
#cursor-ring::after {
    content: "";
    position: absolute;
    background: rgba(244, 1, 7, 0.6);
}
#cursor-ring::before {
    left: 50%;
    top: -9px;
    width: 1px;
    height: 6px;
    transform: translateX(-50%);
}
#cursor-ring::after {
    left: -9px;
    top: 50%;
    width: 6px;
    height: 1px;
    transform: translateY(-50%);
}
@media (hover: none), (max-width: 900px) {
    #cursor-dot,
    #cursor-ring {
        display: none;
    }
    body {
        cursor: auto;
    }
}
/* ============================================================
   REMOVE CUSTOM CURSOR — restore normal browser cursor everywhere
============================================================ */
#cursor-dot,
#cursor-ring{
  display:none !important;
}

*{
  cursor:auto !important;
}

a,
button,
.btn-red,
.btn-outline-line,
.btn-navy,
.nav-cta,
.btn-icon-circle,
.svc-panel,
.why-card,
.value-pill,
.news-card-v2,
.gal-item,
.lb-close,
.lb-prev,
.lb-next,
.office-card,
.filter-btn,
.ss-item,
.qc-fab,
.upload-box,
.field-float select,
.newsletter-v2 button{
  cursor:pointer !important;
}

input,
textarea,
select{
  cursor:text !important;
}


/* ============================================================
   PRELOADER — clean straight-split reveal (no curve, no gap)
============================================================ */
html.eye-lock,
html.eye-lock body {
    overflow: hidden !important;
    height: 100%;
}

#eye-preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

.eye-lid {
    position: fixed;
    left: 0;
    width: 100%;
    height: 50vh;
    background: var(--navy-deep, #00113d);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
}
.eye-lid-top {
    top: 0;
    align-items: flex-end;
    padding-bottom: 2.6rem;
}
.eye-lid-bottom {
    bottom: 0;
    align-items: flex-start;
    padding-top: 2.6rem;
}

.eye-logo {
    max-width: 220px;
    height: auto;
    opacity: 0;
    transform: translateY(8px);
    animation: eyeFade 0.6s var(--ease, ease) forwards 0.2s;
}

.eye-bar {
    width: 160px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    animation: eyeFade 0.6s var(--ease, ease) forwards 0.3s;
}
.eye-bar span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--red, #f40107);
    transition: width 0.25s linear;
}

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

/* Glowing seam line where the two panels meet while closed */
/* .eye-seam {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(50vh - 1px);
    height: 2px;
    z-index: 10001;
    background: linear-gradient(90deg, transparent, var(--red, #f40107) 15%, var(--red, #f40107) 85%, transparent);
    box-shadow: 0 0 18px 2px rgba(244, 1, 7, 0.65);
    opacity: 0.9;
    animation: seamPulse 1.4s ease-in-out infinite;
    transition: opacity 0.4s ease;
} */
@keyframes seamPulse {
    0%,
    100% {
        opacity: 0.55;
    }
    50% {
        opacity: 1;
    }
}

/* OPEN state — straight clean slide, nothing to leave a gap */
.eye-lid-top.eye-open {
    transform: translateY(-100%);
}
.eye-lid-bottom.eye-open {
    transform: translateY(100%);
}
.eye-seam.eye-open {
    opacity: 0;
}

#eye-preloader.eye-hidden {
    display: none;
}



/* ============================================================
   NAVBAR
============================================================ */
.navbar-custom {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.5rem 0;
    transition: all 0.4s var(--ease);
    background: transparent;
}
.navbar-custom.scrolled {
    padding: 0.7rem 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--navy-tint-2);
    box-shadow: 0 8px 30px -18px rgba(0, 17, 58, 0.35);
}
.nav-logo {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 1.35rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: color 0.4s var(--ease);
}
.nav-logo .logo-img-wrap {
    position: relative;
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    transition: height 0.4s var(--ease);
}
.navbar-custom.scrolled .nav-logo .logo-img-wrap {
    height: 38px;
}
.nav-logo .logo-img-wrap img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    /* height: 100%;
    width: auto; */
    transition: opacity 0.4s var(--ease);
}
.nav-logo .logo-light {
    opacity: 1;
}
.nav-logo .logo-dark {
    opacity: 0;
}
.navbar-custom.scrolled .nav-logo .logo-light {
    opacity: 0;
}
.navbar-custom.scrolled .nav-logo .logo-dark {
    opacity: 1;
}
.nav-logo small {
    display: block;
    font-family: "JetBrains Mono";
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    color: var(--muted);
    font-weight: 400;
    margin-top: 1px;
    transition: color 0.4s var(--ease);
}
.navbar-custom.scrolled .nav-logo {
    color: var(--navy);
}
.navbar-custom.scrolled .nav-logo small {
    color: var(--muted-dark);
}
.navbar-custom .nav-link {
    font-family: "Inter";
    font-weight: 700;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 0.1rem;
    position: relative;
    padding: 10px 22px !important;
    transition: color 0.4s var(--ease);
}
.navbar-custom .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--red);
    transition: width 0.3s var(--ease);
}
.navbar-custom .nav-link:hover::after,
.navbar-custom .nav-link.active::after {
    width: 100%;
}
.navbar-custom .nav-link:hover {
    color: #fff !important;
}
.navbar-custom.scrolled .nav-link {
    color: var(--navy) !important;
}
.navbar-custom.scrolled .nav-link:hover,
.navbar-custom.scrolled .nav-link.active {
    color: var(--red) !important;
}
.navbar-custom.scrolled .navbar-toggler {
    color: var(--navy);
}
.navbar-custom.scrolled .navbar-toggler i {
    color: var(--navy);
}

.main-inner-nav {
    background-color: #000a25;
    padding: 1rem 0;
}
/* .inner-nav .nav-link {
    color: var(--navy) !important;
} */


.nav-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #b30408;
    color: #fff !important;
    padding: 0.65rem 1.5rem !important;
    border-radius: 100px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    /* text-transform: uppercase; */
    box-shadow: 0 6px 18px -8px rgba(244, 1, 7, 0.65);
    transition:
        color 0.4s var(--ease),
        transform 0.3s var(--ease),
        box-shadow 0.4s var(--ease);
}
.nav-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
}
.nav-cta:hover::before {
    transform: scaleX(1);
}
.nav-cta:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(0, 28, 122, 0.55);
}
.nav-cta::after {
    content: "\f135";
    font-family: "bootstrap-icons";
    font-size: 0.7rem;
    margin-left: 0.5rem;
    display: inline-block;
    transition: transform 0.4s var(--ease);
}
.nav-cta:hover::after {
    transform: translateX(3px) rotate(45deg);
}

.nav-cta i{
    font-size: 18px;
}


.navbar-toggler {
    border: none;
    color: #fff;
}
.nav-phone {
    color: #fff;
    font-family: "JetBrains Mono";
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 1.2rem;
    transition: color 0.4s var(--ease);
}
.nav-phone i {
    color: var(--red);
}
.navbar-custom.scrolled .nav-phone {
    color: var(--navy);
}
.navbar-collapse {
    padding: 15px 0;
}

@media (max-width: 991px){
    .navbar-custom.scrolled .nav-link {
        color: #d2dcfb !important;
    }
}

/* ============================================================
   HERO — VIDEO BANNER
============================================================ */
.hero {
    min-height: 100vh;
    background: var(--navy-deep);
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 7rem;
}
.hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-video-wrap video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
.hero-video-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(0, 17, 74, 0.93) 20%,
        rgba(0, 28, 122, 0.72) 55%,
        rgba(0, 17, 74, 0.55) 100%
    );
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(ellipse 80% 65% at 65% 40%, #000 40%, transparent 90%);
}
.hero svg.draft {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.hero svg.draft path,
.hero svg.draft line,
.hero svg.draft circle {
    stroke: rgba(244, 1, 7, 0.55);
    fill: none;
    stroke-width: 1;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: draw 2.6s var(--ease) forwards;
}
.hero svg.draft circle {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: draw 1.8s var(--ease) forwards 0.4s;
}
@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
.hero-content {
    position: relative;
    z-index: 2;
}
.hero h1 {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.03;
    margin-bottom: 1.4rem;
}
.hero h1 em {
    font-style: normal;
    color: var(--red);
}
.hero p.lead {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    max-width: 600px;
    font-weight: 400;
    margin-bottom: 2.4rem;
}


@media (max-width: 900px){
    .hero h1 {
        font-size: 31px;
    }
}
/* ============================================================
   BUTTONS — modern magnetic / sweep style
============================================================ */
.btn-red,
.btn-outline-line,
.btn-navy {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 7px 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    border-radius: 100px;
    transition:
        color 0.45s var(--ease),
        border-color 0.45s var(--ease),
        transform 0.35s var(--ease),
        box-shadow 0.45s var(--ease);
    cursor: none;
}
.btn-red span.bg,
.btn-outline-line span.bg,
.btn-navy span.bg {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}
.btn-red:hover span.bg,
.btn-outline-line:hover span.bg,
.btn-navy:hover span.bg {
    transform: scaleX(1);
}
.btn-red i,
.btn-outline-line i,
.btn-navy i {
    transition: transform 0.45s var(--ease);
    font-size: 0.85rem;
    transform: translateX(5px) rotate(360deg);
}
.btn-red:hover i,
.btn-outline-line:hover i,
.btn-navy:hover i {
    transform: translateX(5px) rotate(45deg);
}
.btn-red:active,
.btn-outline-line:active,
.btn-navy:active {
    transform: scale(0.96);
}

/* Red — solid fill that reveals navy on hover, glow shadow */
.btn-red {
    background: var(--red);
    color: #fff;
    border: 1px solid var(--red);
    box-shadow: 0 6px 20px -8px rgba(244, 1, 7, 0.65);
}
.btn-red span.bg {
    background: var(--navy);
}
.btn-red:hover {
    color: #fff;
    border-color: var(--navy);
    box-shadow: 0 10px 28px -8px rgba(0, 28, 122, 0.55);
    transform: translateY(-3px);
}

/* Outline (on video/dark hero) — glass border filling with red on hover */
.btn-outline-line {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-outline-line span.bg {
    background: var(--red);
}
.btn-outline-line:hover {
    color: #fff;
    border-color: var(--red);
    box-shadow: 0 10px 28px -8px rgba(244, 1, 7, 0.55);
    transform: translateY(-3px);
}

/* Navy — solid fill that reveals red on hover */
.btn-navy {
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy);
    box-shadow: 0 6px 20px -8px rgba(0, 28, 122, 0.55);
}
.btn-navy span.bg {
    background: var(--red);
}
.btn-navy:hover {
    color: #fff;
    border-color: var(--red);
    box-shadow: 0 10px 28px -8px rgba(244, 1, 7, 0.55);
    transform: translateY(-3px);
    border: none;
}

.hero-readouts {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 0;
    margin-top: 2rem;
    border-top: 1px solid var(--line);
}
.readout {
    flex: 1;
    padding: 1.3rem 1.6rem 0;
    border-right: 1px solid var(--line);
}
.readout:last-child {
    border-right: none;
}
.readout .num {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 22px;
    color: #fff;
}
.readout .num span {
    color: var(--red);
}
.readout .lbl {
    font-family: "JetBrains Mono";
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.3rem;
}
.scroll-cue {
    position: absolute;
    bottom: 2.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
}
.scroll-cue .line {
    width: 1px;
    height: 34px;
    background: linear-gradient(var(--red), transparent);
    animation: scrollpulse 1.8s ease-in-out infinite;
}
@keyframes scrollpulse {
    0%,
    100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* ============================================================
   REVEAL
============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 0.8s var(--ease),
        transform 0.8s var(--ease);
}
.reveal.in {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 {
    transition-delay: 0.1s;
}
.reveal-delay-2 {
    transition-delay: 0.22s;
}
.reveal-delay-3 {
    transition-delay: 0.34s;
}
.reveal-delay-4 {
    transition-delay: 0.46s;
}

/* ============================================================
   ABOUT
============================================================ */
.about-section {
    background: var(--paper);
}
.about-figure {
    position: relative;
}
.about-figure img {
    width: 100%;
    display: block;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

}
.about-frame {
    position: absolute;
    top: -18px;
    left: -18px;
    width: 100%;
    height: 100%;
    border: 19px solid #02124b;
    border-radius: 5px;
    z-index: -1;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.about-tag {
    position: absolute;
    bottom: -1.6rem;
    right: -1.2rem;
    background: var(--navy);
    color: #fff;
    padding: 1.4rem 1.6rem;
    max-width: 230px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.about-tag .n {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 2.1rem;
    color: var(--red);
}
.about-tag .t {
    font-family: "JetBrains Mono";
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-transform: uppercase;
}
h2.h-section {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.12;
    color: var(--ink-text);
}
.text-muted-strong {
    color: var(--muted-dark);
    font-size: 1.02rem;
    line-height: 1.75;
}
.reg-line {
    font-family: "JetBrains Mono";
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--muted-dark);
    border-top: 1px solid var(--navy-tint-2);
    padding-top: 1rem;
    margin-top: 1.6rem;
}

/* ============================================================
   SERVICES
============================================================ */
.services-section {
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.services-section .text-muted-strong {
    color: var(--muted);
}
.services-section::after {
    content: "";
    position: absolute;
    left: -10%;
    bottom: -30%;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(244, 1, 7, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

/* Expanding image panels */
.svc-row {
    display: flex;
    gap: 1rem;
    height: 600px;
}
.svc-panel {
    position: relative;
    flex: 1;
    overflow: hidden;
    border-radius: 14px;
    cursor: none;
    background-size: cover;
    background-position: center;
    transition: flex 0.7s var(--ease);
    isolation: isolate;
}
.svc-panel.active {
    flex: 2.5;
}
.svc-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(0, 17, 58, 0.97) 8%, rgba(0, 28, 122, 0.72) 45%, rgba(0, 17, 58, 0.35) 100%);
    transition: background 0.6s var(--ease);
}
.svc-panel.active::before {
    background: linear-gradient(
        0deg,
        rgba(0, 17, 58, 0.98) 20%,
        rgba(0, 28, 122, 0.55) 55%,
        rgba(244, 1, 7, 0.18) 100%
    );
}
.svc-panel-num {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    z-index: 2;
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 3.4rem;
    color: rgba(255, 255, 255, 0.14);
    line-height: 1;
    transition: color 0.5s var(--ease);
}
.svc-panel.active .svc-panel-num {
    color: rgba(244, 1, 7, 0.28);
}
.svc-panel-inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 2rem 1.6rem;
    display: flex;
    flex-direction: column;
}
.svc-ic {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 1.4rem;
    box-shadow: 0 8px 24px -8px rgba(244, 1, 7, 0.7);
    transition:
        transform 0.5s var(--ease),
        background 0.5s var(--ease);
}
.svc-panel.active .svc-ic {
    background: #fff;
    color: var(--red);
    transform: rotate(-8deg) scale(1.05);
}
.svc-tag {
    font-family: "JetBrains Mono";
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    color: var(--red);
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.svc-panel.active .svc-tag {
    color: #ffb3b0;
}
.svc-title {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 1.35rem;
    color: #fff;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
}
.svc-desc {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.75;
    margin-top: 1rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height 0.6s var(--ease),
        opacity 0.5s var(--ease) 0.05s,
        margin-top 0.5s var(--ease);
}
.svc-panel.active .svc-desc {
    max-height: 220px;
    opacity: 1;
}
.svc-panel:not(.active) .svc-tag,
.svc-panel:not(.active) .svc-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}
.svc-panel:not(.active) .svc-panel-inner {
    align-items: center;
    height: 100%;
    padding-bottom: 2.4rem;
}
.svc-panel:not(.active) .svc-title {
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}
.svc-panel:not(.active) .svc-tag {
    margin-bottom: 0;
    margin-top: 1rem;
    order: 2;
}

/* --SERVICES — mobile: force every panel fully open, no collapse -- */
@media (max-width: 900px){
  .svc-row{
    flex-direction:column;
    height:auto;
    gap:1.1rem;
  }

  .svc-panel{
    flex:none!important;
    height:auto!important;
    min-height:280px!important;
    border-radius:14px!important;
  }

  .svc-panel::before{
    background:linear-gradient(180deg,
      rgba(0,17,58,0.55) 0%,
      rgba(0,17,58,0.85) 45%,
      rgba(0,17,58,0.97) 100%)!important;
  }

  .svc-panel-num{
    top:1.2rem!important;
    right:1.2rem!important;
    font-size:2.4rem!important;
    color:rgba(244,1,7,0.25)!important;
  }

  .svc-panel-inner{
    /* position:static!important; */
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    height:auto!important;
    padding:1.8rem 1.4rem!important;
    z-index: 99;
    position: relative;

  }

  .svc-ic{
    background:#fff!important;
    color:var(--red)!important;
    margin-bottom:1.1rem!important;
  }

  /* Force correct stacking order for ALL panels, active or not */
  .svc-tag{
    writing-mode:horizontal-tb!important;
    transform:none!important;
    white-space:normal!important;
    order:0!important;
    margin-top:0!important;
    margin-bottom:.6rem!important;
    color:#ffb3b0!important;
  }
  .svc-title{
    writing-mode:horizontal-tb!important;
    transform:none!important;
    white-space:normal!important;
    order:1!important;
    font-size:1.25rem!important;
    line-height:1.3!important;
  }
  .svc-desc{
    writing-mode:horizontal-tb!important;
    max-height:none!important;
    opacity:1!important;
    overflow:visible!important;
    margin-top:.9rem!important;
    order:2!important;
    color:rgba(255,255,255,0.85)!important;
  }
}
/* ============================================================
   WHY CHOOSE
============================================================ */
.why-section {
    background: var(--navy-tint);
    position: relative;
    overflow: hidden;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
    gap: 1.3rem;
}

.why-tile {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transition:
        transform 0.45s var(--ease),
        box-shadow 0.45s var(--ease);
    transform-style: preserve-3d;
    will-change: transform;
}

/* Featured image tile — spans 2x2 */
.why-tile-hero {
    grid-column: span 2;
    grid-row: span 2;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 20px 50px -24px rgba(0, 17, 58, 0.45);
}
.why-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(0, 17, 58, 0.95) 10%,
        rgba(0, 28, 122, 0.55) 55%,
        rgba(0, 28, 122, 0.15) 100%
    );
}
.why-hero-content {
    position: relative;
    z-index: 2;
    padding: 2.2rem;
    color: #fff;
}
.why-hero-tag {
    font-family: "JetBrains Mono";
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--red);
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}
.why-hero-content h3 {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 1.5rem;
    max-width: 320px;
    margin-bottom: 1.4rem;
}
.why-hero-stats {
    display: flex;
    gap: 2rem;
}
.why-hero-stats div {
    display: flex;
    flex-direction: column;
    font-family: "JetBrains Mono";
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-transform: uppercase;
}
.why-hero-stats span {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--red);
    letter-spacing: 0;
}

/* Feature cards */
.why-card {
    background: var(--paper);
    border: 1px solid var(--navy-tint-2);
    padding: 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    cursor: none;
}
.why-card:hover {
    box-shadow: 0 24px 50px -22px rgba(0, 17, 58, 0.3);
}
.why-num {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--navy-tint-2);
    line-height: 1;
    transition: color 0.4s var(--ease);
}
.why-card:hover .why-num {
    color: rgba(244, 1, 7, 0.18);
}
.why-ic {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 1.1rem;
    transition:
        background 0.4s var(--ease),
        transform 0.4s var(--ease);
    padding: 15px;
}
.why-card:hover .why-ic {
    background: var(--red);
    transform: rotate(-8deg) scale(1.06);
}
.why-card h5 {
    font-weight: 600;
    font-size: 1.02rem;
    margin-bottom: 0.6rem;
    color: var(--ink-text);
}
.why-card p {
    color: var(--muted-dark);
    font-size: 0.87rem;
    line-height: 1.65;
    margin-bottom: 0;
}
.why-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--red);
    transition: width 0.5s var(--ease);
}
.why-card:hover::after {
    width: 100%;
}
.why-card-accent {
    background: var(--red);
    border-color: var(--red);
}
.why-card-accent .why-num {
    color: rgba(255, 255, 255, 0.25);
}
.why-card-accent:hover .why-num {
    color: rgba(255, 255, 255, 0.4);
}
.why-card-accent .why-ic {
    background: #fff;
    color: var(--red);
}
.why-card-accent:hover .why-ic {
    background: var(--navy);
    color: #fff;
}
.why-card-accent h5,
.why-card-accent p {
    color: #fff;
}
.why-card-accent p {
    color: rgba(255, 255, 255, 0.85);
}
.why-card-accent::after {
    background: #fff;
}

@media (max-width: 900px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
    }
    .why-tile-hero {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 280px;
    }
    .why-card {
        grid-column: span 1;
    }
}
@media (max-width: 576px) {
    .why-grid {
        grid-template-columns: 1fr;
    }
    .why-tile-hero {
        grid-column: span 1;
    }
}


/* ============================================================
   STATS
============================================================ */
.stats-band {
    background: var(--navy-deep);
    color: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.stat {
    padding: 3rem 1rem;
    text-align: center;
    border-right: 1px solid var(--line);
}
.stat:last-child {
    border-right: none;
}
.stat .count {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--red);
}
.stat .lbl {
    font-family: "JetBrains Mono";
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.4rem;
}

/* ============================================================
   WHY CHOOSE JUBARAH GALLERY BAND
============================================================ */
.why-gallery {
    background: var(--paper);
    padding: 0;
}
.why-gallery img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}

/* ============================================================
   CTA
============================================================ */
.cta-band {
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
}
.cta-band::after {
    content: "";
    position: absolute;
    right: -6%;
    top: 50%;
    transform: translateY(-50%);
    width: 340px;
    height: 340px;
    border: 1px solid rgba(244, 1, 7, 0.25);
    border-radius: 50%;
}
.cta-band::before {
    content: "";
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    height: 220px;
    border: 1px solid rgba(244, 1, 7, 0.18);
    border-radius: 50%;
}
.cta-band h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    font-weight: 700;
    max-width: 640px;
}

/* ============================================================
   NEWS
============================================================ */
.news-section {
    background: var(--paper);
}

.news-card-v2 {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    height: 420px;
    isolation: isolate;
    cursor: none;
    text-decoration: none;
    box-shadow: 0 20px 50px -28px rgba(0, 17, 58, 0.4);
}
.news-v2-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    transition: transform 0.8s var(--ease);
}
.news-card-v2:hover .news-v2-img {
    transform: scale(1.15);
}

.news-v2-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(0, 17, 58, 0.95) 15%, rgba(0, 17, 58, 0.55) 48%, rgba(0, 28, 122, 0.1) 78%);
    transition: background 0.5s var(--ease);
}
.news-card-v2:hover .news-v2-overlay {
    background: linear-gradient(0deg, rgba(0, 17, 58, 0.97) 20%, rgba(244, 1, 7, 0.28) 55%, rgba(0, 28, 122, 0.15) 80%);
}

.news-v2-date {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    z-index: 2;
    background: var(--red);
    color: #fff;
    font-family: "JetBrains Mono";
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    border-radius: 100px;
}

.news-v2-arrow {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    transform: translateY(-14px) scale(0.8);
    opacity: 0;
    transition: all 0.45s var(--ease);
}
.news-card-v2:hover .news-v2-arrow {
    transform: translateY(0) scale(1);
    opacity: 1;
    background: var(--red);
    border-color: var(--red);
}

.news-v2-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.7rem 1.5rem;
    transform: translateY(6px);
    transition: transform 0.5s var(--ease);
}
.news-card-v2:hover .news-v2-body {
    transform: translateY(0);
}

.news-v2-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: "JetBrains Mono";
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.6rem;
    letter-spacing: 0.03em;
}
.news-v2-body h5 {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 1.12rem;
    color: #fff;
    margin-bottom: 0.9rem;
    line-height: 1.3;
}
.news-v2-rm {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "JetBrains Mono";
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height 0.5s var(--ease),
        opacity 0.4s var(--ease);
}
.news-v2-rm i {
    transition: transform 0.35s var(--ease);
}
.news-card-v2:hover .news-v2-rm {
    max-height: 30px;
    opacity: 1;
}
.news-card-v2:hover .news-v2-rm i {
    transform: translateX(4px);
    color: var(--red);
}

@media (max-width: 991px) {
    .news-card-v2 {
        height: 360px;
    }
}
@media (max-width: 767px) {
    .news-v2-body {
        transform: translateY(0);
    }
    .news-v2-rm {
        max-height: 30px;
        opacity: 1;
    }
}


/* ============================================================
   CONTACT
============================================================ */
.contact-section {
    background: var(--navy-tint);
}

.contact-console {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0, 17, 58, 0.35);
}

/* ---- Left info panel ---- */
.contact-panel {
    position: relative;
    background: var(--navy);
    color: #fff;
    padding: 3rem 2.6rem;
    overflow: hidden;
}
.contact-panel-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, #000 30%, transparent 85%);
}
.contact-panel-inner {
    position: relative;
    z-index: 1;
}
.contact-panel-inner h3 {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.25;
    margin-bottom: 0.8rem;
    max-width: 320px;
}
.contact-panel-inner > p {
    color: var(--muted);
    font-size: 0.92rem;
    margin-bottom: 2.4rem;
}

.contact-item-v2 {
    display: flex;
    gap: 1rem;
    padding: 1.2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.civ-ic {
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(244, 1, 7, 0.15);
    border: 1px solid rgba(244, 1, 7, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    font-size: 1rem;
    transition:
        background 0.35s var(--ease),
        transform 0.35s var(--ease);
}
.contact-item-v2:hover .civ-ic {
    background: var(--red);
    color: #fff;
    transform: scale(1.08) rotate(-6deg);
}
.civ-label {
    display: block;
    font-family: "JetBrains Mono";
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.3rem;
}
.contact-item-v2 a {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    transition: color 0.3s;
}
.contact-item-v2:hover a {
    color: var(--red);
}
.civ-sub {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

/* ---- Right form panel ---- */
.contact-form-panel {
    background: var(--paper);
    padding: 3rem 2.8rem;
}

.field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

.field-float {
    position: relative;
    margin-bottom: 1.9rem;
}
.field-float input,
.field-float textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--navy-tint-2);
    padding: 0.7rem 0.1rem;
    font-size: 1rem;
    color: var(--ink-text);
    font-family: "Inter";
    resize: none;
}
.field-float input:focus,
.field-float textarea:focus {
    outline: none;
}
.field-float label {
    position: absolute;
    left: 0.1rem;
    top: 0.75rem;
    font-size: 1rem;
    color: var(--muted-dark);
    pointer-events: none;
    transition: all 0.3s var(--ease);
}
.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label,
.field-float textarea:focus + label,
.field-float textarea:not(:placeholder-shown) + label {
    top: -0.75rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--red);
    text-transform: uppercase;
    font-family: "JetBrains Mono";
}
.field-line {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1.5px;
    width: 0;
    background: var(--red);
    transition: width 0.4s var(--ease);
}
.field-float input:focus ~ .field-line,
.field-float textarea:focus ~ .field-line {
    width: 100%;
}

.submit-btn {
    border: none;
    margin-top: 0.4rem;
}
.submit-btn.is-sending {
    pointer-events: none;
    opacity: 0.75;
}
.submit-btn.is-sent {
    background: var(--navy);
    border-color: var(--navy);
}

@media (max-width: 900px) {
    .contact-console {
        grid-template-columns: 1fr;
    }
    .field-group {
        grid-template-columns: 1fr;
    }
    .contact-panel,
    .contact-form-panel {
        padding: 2.4rem 1.8rem;
    }
}

/* ============================================================
   COVERAGE / RADAR MAP — real regional map inside circle frame
============================================================ */
.coverage-section {
    position: relative;
    background: #040d2b;
    color: #fff;
    padding: 2rem 2.5rem;
    overflow: hidden;
    margin-top: 15px;
    border-radius: 20px;
}

.coverage-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3rem;
    align-items: center;
}
@media (max-width: 991px) {
    .coverage-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- left text panel ---- */
.cov-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 2.2rem;
    flex-wrap: wrap;
}
.cov-index {
    font-family: "JetBrains Mono";
    font-size: 0.75rem;
    color: #4e8ef7;
}
.cov-line {
    width: 34px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    display: inline-block;
}
.cov-label {
    font-family: "JetBrains Mono";
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: var(--muted);
    text-transform: uppercase;
}
.cov-arabic {
    font-family: "Inter";
    font-size: 0.85rem;
    color: var(--muted);
    margin-left: auto;
}

.cov-heading {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    color: #f4f2ec;
    font-size: 43px;
    line-height: 1;
    margin-bottom: 1.6rem;
}
.cov-heading em {
    font-style: italic;
    color: #d8d4c8;
    font-size:33px;
}

.cov-sub {
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.75;
    max-width: 420px;
    margin-bottom: 2.2rem;
}

.cov-list {
    list-style: none;
    margin: 0 0 2.2rem;
    padding: 0;
}
.cov-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cov-dot {
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    background: #4e8ef7;
    margin-top: 0.5rem;
    position: relative;
}
.cov-dot-hq {
    background: #f49601;
}
.cov-dot-hq::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(244, 150, 1, 0.5);
    animation: covPulse 2.2s ease-out infinite;
}
@keyframes covPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}
.cov-item h4 {
    font-family: Georgia, serif;
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0 0 0.3rem;
    color: #fff;
}
.cov-item p {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0;
}

.cov-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.cov-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "JetBrains Mono";
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    color: var(--muted);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 100px;
    padding: 0.4rem 0.85rem;
}
.cov-tag i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4e8ef7;
    display: inline-block;
}
.cov-tag-hq {
    color: #fff;
    border-color: rgba(244, 150, 1, 0.4);
}
.cov-tag-hq i {
    background: #d40107;
}

/* ---- right radar map ---- */
.coverage-map {
    display: flex;
    justify-content: center;
}
.radar-ring {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1/1;
}
.radar-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.radar-inner {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    overflow: hidden;
    background: #0a0e1f;
}
.radar-map-img{
  position:absolute;
  width:391.30%;
  height:195.65%;
  left:-232.99%;
  top:-24.73%;
  object-fit:cover;
  filter:grayscale(100%) brightness(.6) contrast(1.2);
  opacity:.6;
}
.radar-map-overlay{
  position:absolute;inset:0;
  background:radial-gradient(circle at 16.66% 43.74%,rgba(244,150,1,0.25),transparent 45%),
             radial-gradient(ellipse 100% 100% at 50% 50%,transparent 55%,rgba(10,14,31,0.7) 100%);
}
.radar-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.radar-lines line {
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 0.25;
    stroke-dasharray: 1.2 1.2;
}

.radar-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}
.radar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #4e8ef7;
    transition:
        transform 0.3s var(--ease),
        background 0.3s var(--ease);
}
.radar-pin:hover .radar-dot {
    background: #d40107;
    border-color: #fff;
    transform: scale(1.3);
}

.radar-pin-hq .radar-dot {
    width: 12px;
    height: 12px;
    background: #d40107;
    border-color: #fff;
}
.radar-pulse {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #d4010893;
    animation: covPulse 2s ease-out infinite;
}

.radar-label {
    position: absolute;
    top: 135%;
    left: 50%;
    transform: translateX(-50%);
    font-family: "JetBrains Mono";
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.22rem 0.5rem;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
}
.radar-pin:hover .radar-label {
    opacity: 1;
}
.radar-label-right {
    left: auto;
    right: 0;
    transform: none;
}

.radar-label-hq {
    position: absolute;
    top: 50%;
    left: 140%;
    transform: translateY(-50%);
    background: #d40107;
    color: #1a1200;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 3px;
    border: none;
    opacity: 1;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .coverage-section {
        padding: 3.2rem 1.2rem;
    }
    .radar-label-hq {
        left: 50%;
        top: 140%;
        transform: translateX(-50%);
    }
    .radar-label-right {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ============================================================
   LOCATIONS MAP — corrected, calculated from real coordinates
============================================================ */
.loc-map-wrap{
  position:relative;
  width:100%;
  aspect-ratio:3/1;
  border-radius:14px;
  overflow:hidden;
  background:var(--navy);
}
.loc-map-img{
  position:absolute;
  width:400%;
  height:600%;
  left:-238.89%;
  top:-180.00%;
  object-fit:cover;
  filter:grayscale(100%) brightness(.55) contrast(1.15);
  opacity:.7;
}

/* Desktop pin positions */
.loc-pin[data-city="jubail"]  { left:16.29%; top:30.00%; }
.loc-pin[data-city="riyadh"]  { left:12.97%; top:37.62%; }
.loc-pin[data-city="jeddah"]  { left:4.66%;  top:48.38%; }
.loc-pin[data-city="dubai"]   { left:22.52%; top:35.98%; }
.loc-pin[data-city="manama"]  { left:17.32%; top:32.57%; }
.loc-pin[data-city="calicut"] { left:45.31%; top:82.47%; }
.loc-pin[data-city="shanghai"]{ left:96.08%; top:15.90%; }

@media (max-width: 767px) {
    .locations-card {
        padding: 1.6rem;
    }

    .loc-map-wrap {
        aspect-ratio: 4/3;
    }

    .loc-map-img {
        width: 400%;
        height: 266.67%;
        left: -238.89%;
        top: -51.85%;
    }

    /* Mobile pin positions — same horizontal crop as desktop, recalculated vertical */
    .loc-pin[data-city="jubail"]  { left:16.29%; top:41.48%; }
    .loc-pin[data-city="riyadh"]  { left:12.97%; top:44.87%; }
    .loc-pin[data-city="jeddah"]  { left:4.66%;  top:49.65%; }
    .loc-pin[data-city="dubai"]   { left:22.52%; top:44.14%; }
    .loc-pin[data-city="manama"]  { left:17.32%; top:42.62%; }
    .loc-pin[data-city="calicut"] { left:45.31%; top:64.80%; }
    .loc-pin[data-city="shanghai"]{ left:96.08%; top:35.22%; }

    .loc-pin-tip {
        white-space: normal;
        width: 150px;
        bottom: auto;
        top: 135%;
    }
    .loc-pin-tip::after {
        top: auto;
        bottom: 100%;
        border-top-color: transparent;
        border-bottom-color: var(--navy);
    }

    /* Edge pins — flip tooltip so it doesn't clip off the map */
    .loc-pin[data-city="jeddah"] .loc-pin-tip {
        left: 0;
        transform: translateX(0) translateY(6px);
    }
    .loc-pin[data-city="jeddah"]:hover .loc-pin-tip {
        transform: translateX(0) translateY(0);
    }
    .loc-pin[data-city="jeddah"] .loc-pin-tip::after {
        left: 14px;
        transform: translateX(-50%);
    }

    .loc-pin[data-city="shanghai"] .loc-pin-tip {
        left: auto;
        right: 0;
        transform: translateX(0) translateY(6px);
    }
    .loc-pin[data-city="shanghai"]:hover .loc-pin-tip {
        transform: translateX(0) translateY(0);
    }
    .loc-pin[data-city="shanghai"] .loc-pin-tip::after {
        left: auto;
        right: 14px;
        transform: translateX(50%);
    }
}

.loc-pin[data-city="shanghai"] .loc-pin-tip{
  left:auto;right:0;transform:translateX(0) translateY(6px);
}
.loc-pin[data-city="shanghai"]:hover .loc-pin-tip{
  transform:translateX(0) translateY(0);
}
.loc-pin[data-city="shanghai"] .loc-pin-tip::after{
  left:auto;right:14px;transform:translateX(50%);
}

/* ============================================================
   FOOTER
============================================================ */
.footer-v2 {
    position: relative;
    background: var(--navy-deep);
    color: var(--muted);
    overflow: hidden;
}

/* Giant faint watermark wordmark */
.footer-watermark {
    position: absolute;
    left: 50%;
    bottom: -4.2rem;
    transform: translateX(-50%);
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: clamp(4rem, 14vw, 11rem);
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.02em;
    z-index: 0;
}

/* Top CTA strip */
.footer-cta-strip {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid var(--line);
    padding: 3.4rem 0;
}
.fcs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.fcs-text h3 {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: #fff;
    line-height: 1.25;
    margin: 0;
}
.fcs-btn {
    white-space: nowrap;
}

.footer-v2 .foot-top {
    position: relative;
    z-index: 1;
    padding: 4.4rem 1rem 3rem;
}
.footer-v2 h6 {
    font-family: "JetBrains Mono";
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.9rem;
}
.footer-v2 h6::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 2px;
    background: var(--red);
}
.foot-about {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--muted);
}
.foot-logo {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 1.6rem;
    color: #fff;
}

/* Social icons */
.social-row-v2 {
    display: flex;
    gap: 0.7rem;
}
.social-row-v2 a {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    transition:
        border-color 0.4s var(--ease),
        transform 0.4s var(--ease);
}
.social-row-v2 a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--red);
    transform: scale(0);
    border-radius: 50%;
    transition: transform 0.4s var(--ease);
}
.social-row-v2 a:hover::before {
    transform: scale(1);
}
.social-row-v2 a:hover {
    border-color: var(--red);
    transform: translateY(-4px);
    box-shadow: 0 10px 22px -10px rgba(244, 1, 7, 0.6);
}

/* Footer nav links with slide underline */
.footer-v2 a.flink {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    font-size: 0.92rem;
    margin-bottom: 0.85rem;
    transition:
        color 0.3s var(--ease),
        padding-left 0.3s var(--ease);
    width: fit-content;
}
.footer-v2 a.flink::before {
    content: "";
    width: 0;
    height: 1px;
    background: var(--red);
    margin-right: 0;
    transition:
        width 0.3s var(--ease),
        margin-right 0.3s var(--ease);
}
.footer-v2 a.flink:hover {
    color: #fff;
}
.footer-v2 a.flink:hover::before {
    width: 12px;
    margin-right: 8px;
}

/* Newsletter pill form */
.newsletter-v2 {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 0.35rem 0.35rem 0.35rem 1.2rem;
    transition: border-color 0.35s var(--ease);
}
.newsletter-v2:focus-within {
    border-color: var(--red);
}
.newsletter-v2 input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}
.newsletter-v2 input::placeholder {
    color: var(--muted);
}
.newsletter-v2 button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    border: none;
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    transition:
        background 0.35s var(--ease),
        transform 0.35s var(--ease);
}
.newsletter-v2 button:hover {
    background: #fff;
    color: var(--red);
    transform: rotate(45deg);
}
.newsletter-msg {
    display: block;
    margin-top: 0.7rem;
    font-size: 0.8rem;
    color: var(--red);
    min-height: 1.2em;
    font-family: "JetBrains Mono";
}

/* Bottom bar */
.footer-v2 .foot-bottom {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--line);
    padding: 1.7rem 0;
    font-size: 0.82rem;
    color: var(--muted);
}
.foot-tags i.bi-dot {
    color: var(--red);
}

@media (max-width: 767px) {
    .fcs-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-watermark {
        display: none;
    }
    .foot-bottom {
        flex-direction: column;
        gap: 0.6rem;
        text-align: center;
    }
}

.btn-icon-circle {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    border: 1px solid var(--red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px -8px rgba(244, 1, 7, 0.65);
    transition:
        transform 0.35s var(--ease),
        box-shadow 0.4s var(--ease);
    cursor: none;
}
.btn-icon-circle::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--navy);
    transform: scale(0);
    border-radius: 50%;
    transition: transform 0.45s var(--ease);
}
.btn-icon-circle:hover::before {
    transform: scale(1);
}
.btn-icon-circle i {
    transition: transform 0.4s var(--ease);
    position: relative;
    z-index: 1;
}
.btn-icon-circle:hover i {
    transform: translateX(3px) rotate(45deg);
}
.btn-icon-circle:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -8px rgba(0, 28, 122, 0.55);
}
.btn-icon-circle:active {
    transform: scale(0.92);
}

#backToTop {
    position: fixed;
    bottom: 2rem;
    right: 1rem;
    width: 46px;
    height: 46px;
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    border-radius: 50%;
    transition:
        opacity 0.3s,
        transform 0.3s;
}
#backToTop.show {
    opacity: 1;
    pointer-events: auto;
}
#backToTop:hover {
    transform: translateY(-4px);
    background: #10266e;
}

@media (max-width: 767px) {
    .hero-readouts {
        flex-wrap: wrap;
    }
    .readout {
        flex: 0 0 50%;
        margin-bottom: 1.2rem;
    }
    .about-tag {
        position: static;
        margin-top: 1.2rem;
        max-width: 100%;
    }
    .about-frame {
        display: none;
    }
    .why-gallery img {
        height: 200px;
    }
}


/* ----------------- sticky social media icons----------- */

.sticky-social {
    position: fixed;
    left: 1.6rem;
    top: 50%;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1.2rem 0.65rem;
    border-radius: 100px;
    background: rgba(0, 17, 58, 0.72);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 60px -28px rgba(0, 17, 58, 0.6);
    opacity: 0;
    transform: translateY(-50%) translateX(-16px);
    transition:
        opacity 0.8s var(--ease),
        transform 0.8s var(--ease);
}
.sticky-social.show {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Scroll progress indicator */
.ss-progress-track {
    width: 2px;
    height: 44px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
    margin-bottom: 0.2rem;
}
.ss-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--red);
    border-radius: 2px;
    transition: height 0.08s linear;
}

/* Icon stack */
.ss-icons {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.ss-item {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition:
        background 0.35s var(--ease),
        border-color 0.35s var(--ease),
        transform 0.35s var(--ease);
    cursor: none;
}
.ss-item:hover {
    background: var(--red);
    border-color: var(--red);
    transform: translateX(4px) scale(1.08);
}

/* Tooltip that slides out on hover */
.ss-tip {
    position: absolute;
    left: 130%;
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    background: var(--red);
    color: #fff;
    font-family: "JetBrains Mono";
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.3s var(--ease),
        transform 0.3s var(--ease);
}
.ss-tip::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px solid var(--red);
}
.ss-item:hover .ss-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Small live-pulse dot beneath the icons */
.ss-icons::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    margin: 0.2rem auto 0;
    position: relative;
}

@media (max-width: 991px) {
    .sticky-social {
        display: none;
    }
}


/* ------------------------ end ------------------------- */

/* ============================================================
   FIX: Mobile nav collapse — solid panel instead of transparent overlay
============================================================ */
@media (max-width: 991.98px) {
    .navbar-custom {
        padding: 1.1rem 0;
    }
    .navbar-custom .container {
        position: relative;
    }

    #navMenu {
        position: absolute;
        top: calc(100% + 0.8rem);
        left: 0;
        right: 0;
        background: rgba(0, 17, 58, 0.98);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        padding: 1.2rem 1.4rem 1.5rem;
        box-shadow: 0 30px 60px -20px rgba(0, 17, 58, 0.65);
        z-index: 1050;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    .navbar-custom .navbar-nav {
        width: 100%;
    }

    .navbar-custom .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .navbar-custom .nav-item:last-child {
        border-bottom: none;
    }

    .navbar-custom .nav-link {
        color: rgba(255, 255, 255, 0.92) !important;
        padding: 0.9rem 0.2rem !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
        font-size: 0.98rem;
    }
    .navbar-custom .nav-link::after {
        display: none;
    }
    .navbar-custom .nav-link.active {
        color: var(--red) !important;
    }

    .nav-phone {
        color: #fff !important;
        justify-content: center;
        padding: 0.9rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        margin-top: 0.4rem;
    }

    .nav-cta {
        width: 100%;
        justify-content: center;
        margin-top: 1rem;
        padding: 0.85rem 1.5rem !important;
    }

    /* Toggler button — visible box + morphs to X when open */
    .navbar-toggler {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
        transition:
            background 0.3s var(--ease),
            border-color 0.3s var(--ease);
    }
    .navbar-custom.scrolled .navbar-toggler {
        border-color: rgba(0, 28, 122, 0.25) !important;
        background: rgba(0, 28, 122, 0.06);
    }
    .navbar-toggler:focus {
        box-shadow: none;
    }
    .navbar-toggler i {
        font-size: 1.4rem;
        transition: transform 0.3s var(--ease);
    }
    .navbar-toggler[aria-expanded="true"] {
        background: var(--red);
        border-color: var(--red) !important;
    }
    .navbar-toggler[aria-expanded="true"] i {
        transform: rotate(90deg);
    }
}

/* ============================================================
   FIX: Horizontal overflow / stray side white-space
============================================================ */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}
.hero-video-wrap video {
    max-width: none;
} /* video is allowed to overflow ITS OWN wrapper, not the page */
img,
video {
    /* max-width: 100%; */
    height: auto;
}
* {
    min-width: 0;
} /* prevents flex/grid children (svc-panel, why-tile, etc.) from forcing page width */

@media (max-width: 991px) {
    .sticky-social {
        display: none;
    } /* already hidden on mobile — confirms it isn't the culprit, but keep it explicit */
}



/* ============================================================
   STICKY CALL / MESSAGE WIDGET — works on desktop + mobile
============================================================ */
.qc-stack{
  position:fixed;right:1.2rem;top:70%;z-index:950;
  display:flex;flex-direction:column;gap:1rem;
  transform:translateY(-50%);
}

.qc-fab{
  position:relative;width:45px;height:45px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.20rem;
  box-shadow:0 12px 28px -10px rgba(0,17,58,0.5);
  isolation:isolate;overflow:visible;
  cursor:none;
  opacity:0;transform:scale(.3);
  animation:qcBounceIn .7s cubic-bezier(.34,1.56,.64,1) forwards;
}
.qc-fab-msg{animation-delay:.3s;}
.qc-fab-call{animation-delay:.5s;}

@keyframes qcBounceIn{
  0%{opacity:0;transform:scale(.3);}
  60%{opacity:1;transform:scale(1.12);}
  100%{opacity:1;transform:scale(1);}
}

/* gentle idle float once settled */
.qc-fab{animation-fill-mode:forwards;}
.qc-fab-msg::before,.qc-fab-call::before{
  content:"";position:absolute;inset:0;border-radius:50%;
}
.qc-fab-msg{
  background:#fff;color:var(--navy);
  animation-name:qcBounceIn,qcFloat;
  animation-duration:.7s,3.2s;
  animation-delay:.3s,1.4s;
  animation-timing-function:cubic-bezier(.34,1.56,.64,1),ease-in-out;
  animation-iteration-count:1,infinite;
}
.qc-fab-call{
  background:linear-gradient(145deg,var(--red),#c50107);color:#fff;
  animation-name:qcBounceIn,qcFloat;
  animation-duration:.7s,3.2s;
  animation-delay:.5s,1.6s;
  animation-timing-function:cubic-bezier(.34,1.56,.64,1),ease-in-out;
  animation-iteration-count:1,infinite;
}
@keyframes qcFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

.qc-fab:hover{
  animation-play-state:paused;
  transform:translateY(-4px) scale(1.08)!important;
  box-shadow:0 18px 36px -12px rgba(0,17,58,0.6);
}

/* unread-style dot on the message bubble */
.qc-dot{
  position:absolute;top:-2px;right:-2px;width:13px;height:13px;border-radius:50%;
  background:var(--red);border:2px solid #fff;
  animation:qcDotPulse 1.8s ease-in-out infinite;
}
@keyframes qcDotPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.25);}
}

/* pulsing ripple ring behind the call button */
.qc-ripple{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--red);opacity:.7;
  animation:qcRipple 2s ease-out infinite;
}
@keyframes qcRipple{
  0%{transform:scale(1);opacity:.7;}
  100%{transform:scale(1.8);opacity:0;}
}

/* slide-out tooltip label */
.qc-tip{
  position:absolute;right:130%;top:50%;transform:translateY(-50%) translateX(8px);
  background:var(--navy);color:#fff;
  padding:.6rem 1rem;border-radius:10px;white-space:nowrap;
  font-family:'Inter';font-size:.82rem;font-weight:600;
  display:flex;flex-direction:column;gap:.1rem;
  opacity:0;pointer-events:none;
  box-shadow:0 16px 34px -14px rgba(0,17,58,0.6);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.qc-tip small{font-family:'JetBrains Mono';font-size:.66rem;color:var(--muted);font-weight:400;}
.qc-tip::after{
  content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left-color:var(--navy);
}
.qc-fab:hover .qc-tip{opacity:1;transform:translateY(-50%) translateX(0);}

/* Mobile: smaller, tucked closer to the edge, tap feedback instead of tooltip */
@media(max-width:767px){
  .qc-stack{right:.9rem;top:88%;gap:.8rem;}
  .qc-fab{width:46px;height:46px;font-size:1.15rem;}
  .qc-dot{width:11px;height:11px;}
  .qc-tip{display:none;}
  .qc-fab:active{transform:scale(.9)!important;}
}

/*  */



/* ================ inner page styles ================== */

.inner-page{
    margin-top: 6rem;
}

/* -------------------- about page ------------------ */



/* ================= ABOUT US ================= */
.about-figure {
    position: relative;
}
.about-figure img {
    width: 100%;
    display: block;
    border-radius: 4px;
}
.about-frame {
    position: absolute;
    top: -18px;
    left: -18px;
    width: 100%;
    height: 100%;
    border: 1.5px solid var(--red);
    z-index: -1;
}
.about-tag {
    position: absolute;
    bottom: -1.6rem;
    right: -1.2rem;
    background: var(--navy);
    color: #fff;
    padding: 1.4rem 1.6rem;
    max-width: 230px;
    box-shadow: 0 24px 50px -20px rgba(0, 17, 58, 0.5);
}
.about-tag .n {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 2.1rem;
    color: var(--red);
}
.about-tag .t {
    font-family: "JetBrains Mono";
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-transform: uppercase;
}
.reg-line {
    font-family: "JetBrains Mono";
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--muted-dark);
    border-top: 1px solid var(--navy-tint-2);
    padding-top: 1rem;
    margin-top: 1.8rem;
}

@media (max-width: 991px) {
    .about-tag {
        position: static;
        margin-top: 1.4rem;
        max-width: 100%;
    }
    .about-frame {
        display: none;
    }
}

/* Core values pillars */
.values-row {
    margin-top: 3.4rem;
}
.value-pill {
    background: var(--navy-tint);
    border: 1px solid var(--navy-tint-2);
    border-radius: 14px;
    padding: 1.8rem 1.5rem;
    height: 100%;
    transition:
        transform 0.4s var(--ease),
        box-shadow 0.4s var(--ease),
        border-color 0.4s var(--ease);
    cursor: none;
}
.value-pill:hover {
    transform: translateY(-6px);
    border-color: rgba(244, 1, 7, 0.4);
    box-shadow: 0 22px 44px -22px rgba(0, 17, 58, 0.3);
}
.value-pill .vp-ic {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 1.1rem;
    transition:
        background 0.4s var(--ease),
        transform 0.4s var(--ease);
}
.value-pill:hover .vp-ic {
    background: var(--red);
    transform: rotate(-8deg) scale(1.05);
}
.value-pill h5 {
    font-weight: 700;
    font-size: 1.02rem;
    margin-bottom: 0.5rem;
}
.value-pill p {
    color: var(--muted-dark);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

/* ================= GM MESSAGE ================= */
.gm-section {
    background: #000721;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.gm-section::after {
    content: "";
    position: absolute;
    left: -8%;
    bottom: -25%;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(244, 1, 7, 0.14);
    border-radius: 50%;
    pointer-events: none;
}
.gm-section .eyebrow {
    color: var(--red);
}
.gm-section .h-section {
    color: #fff;
}

.gm-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}
.gm-photo-wrap {
    position: relative;
    height: 100%;
    min-height: 380px;
}
.gm-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 380px;
    filter: grayscale(15%);
}
.gm-photo-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 17, 58, 0.7) 0%, transparent 45%),
        linear-gradient(90deg, rgba(0, 17, 58, 0.35), transparent 40%);
}
.gm-quote-mark {
    position: absolute;
    top: 1.3rem;
    left: 1.3rem;
    z-index: 2;
    font-family: "Space Grotesk";
    font-size: 4.2rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
.gm-photo-caption {
    position: absolute;
    left: 1.4rem;
    bottom: 1.3rem;
    z-index: 2;
}
.gm-photo-caption .gm-name {
    color: #fff;
}
.gm-photo-caption .gm-title {
    color: var(--muted);
}

.gm-body {
    padding: 2.8rem 2.6rem;
}
.gm-pull {
    font-family: "Space Grotesk";
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.45;
    color: #fff;
    margin-bottom: 1.6rem;
}
.gm-pull span {
    color: var(--red);
}
.gm-body .text-muted-strong {
    color: var(--muted);
    font-size: 0.95rem;
}
.gm-sign-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 1rem;
}
.gm-name {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--ink-text);
}
.gm-title {
    font-family: "JetBrains Mono";
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-dark);
}
.gm-signature {
    font-family: "Space Grotesk";
    font-style: italic;
    font-weight: 600;
    font-size: 1.7rem;
    color: var(--red);
    opacity: 0.9;
    transform: rotate(-3deg);
}

/* ================= CTA BAND ================= */
.cta-band {
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0;
}
.cta-band::after {
    content: "";
    position: absolute;
    right: -6%;
    top: 50%;
    transform: translateY(-50%);
    width: 320px;
    height: 320px;
    border: 1px solid rgba(244, 1, 7, 0.22);
    border-radius: 50%;
}
.cta-band h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 700;
    max-width: 600px;
}
.btn-red {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1rem 2.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    border-radius: 100px;
    background: var(--red);
    color: #fff;
    border: 1px solid var(--red);
    box-shadow: 0 6px 20px -8px rgba(244, 1, 7, 0.65);
    transition: all 0.4s var(--ease);
    cursor: none;
}
.btn-red span.bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--navy-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}
.btn-red:hover span.bg {
    transform: scaleX(1);
}
.btn-red:hover {
    border-color: var(--navy-deep);
    transform: translateY(-3px);
}
.btn-red i {
    transition: transform 0.4s var(--ease);
}
.btn-red:hover i {
    transform: translateX(4px) rotate(-45deg);
}



/* --------------------------- end ---------------------------- */


/* ====================  carrer page -------------------- */
/* ================= APPLICATION FORM ================= */
.apply-section {
    background: var(--navy-tint);
}
.apply-card {
    background: var(--paper);
    border-radius: 20px;
    border: 1px solid var(--navy-tint-2);
    padding: 2.8rem;
    box-shadow: 0 30px 60px -32px rgba(0, 17, 58, 0.3);
}
.field-float {
    position: relative;
    margin-bottom: 1.9rem;
}
.field-float input,
.field-float select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--navy-tint-2);
    padding: 0.7rem 0.1rem;
    font-size: 1rem;
    color: var(--ink-text);
    font-family: "Inter";
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
}
.field-float select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b638c' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    cursor: none;
}
.field-float input:focus,
.field-float select:focus {
    outline: none;
}
.field-float label {
    position: absolute;
    left: 0.1rem;
    top: 0.75rem;
    font-size: 1rem;
    color: var(--muted-dark);
    pointer-events: none;
    transition: all 0.3s var(--ease);
}
.field-float.has-select label,
.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label {
    top: -0.75rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--red);
    text-transform: uppercase;
    font-family: "JetBrains Mono";
}
.field-line {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1.5px;
    width: 0;
    background: var(--red);
    transition: width 0.4s var(--ease);
}
.field-float input:focus ~ .field-line,
.field-float select:focus ~ .field-line {
    width: 100%;
}

.field-group-label {
    font-family: "JetBrains Mono";
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-dark);
    margin-bottom: 0.6rem;
    display: block;
}

/* File upload */
.upload-box {
    position: relative;
    border: 1.5px dashed var(--navy-tint-2);
    border-radius: 12px;
    padding: 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition:
        border-color 0.35s var(--ease),
        background 0.35s var(--ease);
    cursor: none;
}
.upload-box:hover,
.upload-box.dragover {
    border-color: var(--red);
    background: rgba(244, 1, 7, 0.03);
}
.upload-box input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.upload-ic {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.upload-text {
    font-size: 0.92rem;
    color: var(--ink-text);
    font-weight: 600;
}
.upload-sub {
    font-size: 0.78rem;
    color: var(--muted-dark);
    font-family: "JetBrains Mono";
    margin-top: 0.15rem;
}

.submit-btn {
    border: none;
    margin-top: 0.6rem;
}
.btn-red {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1rem 2.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    border-radius: 100px;
    background: var(--red);
    color: #fff;
    border: 1px solid var(--red);
    box-shadow: 0 6px 20px -8px rgba(244, 1, 7, 0.65);
    transition: all 0.4s var(--ease);
    cursor: none;
}
.btn-red span.bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}
.btn-red:hover span.bg {
    transform: scaleX(1);
}
.btn-red:hover {
    border-color: var(--navy);
    transform: translateY(-3px);
}
.btn-red i {
    transition: transform 0.4s var(--ease);
}
.btn-red:hover i {
    transform: translateX(4px) rotate(-45deg);
}
.submit-btn.is-sending {
    pointer-events: none;
    opacity: 0.75;
}
.submit-btn.is-sent {
    background: var(--navy);
    border-color: var(--navy);
}

/* -------------------------- end ---------------- */


/* -------------------- gallery page ------------------ */
/* ================= FILTERS ================= */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 3rem;
}
.filter-btn {
    font-family: "JetBrains Mono";
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.6rem 1.3rem;
    border-radius: 100px;
    border: 1px solid var(--navy-tint-2);
    color: var(--muted-dark);
    background: transparent;
    cursor: none;
    transition: all 0.35s var(--ease);
}
.filter-btn:hover {
    border-color: var(--red);
    color: var(--red);
}
.filter-btn.active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* ================= MASONRY GRID ================= */
.gal-grid {
    column-count: 3;
    column-gap: 1.2rem;
}
@media (max-width: 991px) {
    .gal-grid {
        column-count: 2;
    }
}
@media (max-width: 575px) {
    .gal-grid {
        column-count: 1;
    }
}

.gal-item {
    break-inside: avoid;
    margin-bottom: 1.2rem;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    cursor: none;
    isolation: isolate;
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition:
        opacity 0.5s var(--ease),
        transform 0.5s var(--ease);
}
.gal-item.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.gal-item.hide {
    display: none;
}

.gal-item img {
    width: 100%;
    display: block;
    transition: transform 0.7s var(--ease);
}
.gal-item:hover img {
    transform: scale(1.08);
}

.gal-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(0, 17, 58, 0.92) 0%, rgba(0, 17, 58, 0.15) 55%, transparent 80%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    display: flex;
    align-items: flex-end;
    padding: 1.3rem;
}
.gal-item:hover .gal-overlay {
    opacity: 1;
}
.gal-tag {
    font-family: "JetBrains Mono";
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
    display: block;
    margin-bottom: 0.3rem;
}
.gal-title {
    color: #fff;
    font-family: "Space Grotesk";
    font-weight: 600;
    font-size: 1.02rem;
}
.gal-zoom {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.4s var(--ease);
}
.gal-item:hover .gal-zoom {
    opacity: 1;
    transform: scale(1);
}

/* ================= LIGHTBOX ================= */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(0, 10, 41, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.4s var(--ease),
        visibility 0.4s var(--ease);
}
.lightbox.open {
    opacity: 1;
    visibility: visible;
}
.lightbox-inner {
    position: relative;
    max-width: 88vw;
    max-height: 82vh;
}
.lightbox-inner img {
    max-width: 88vw;
    max-height: 82vh;
    border-radius: 10px;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
}
.lightbox-caption {
    position: absolute;
    left: 0;
    bottom: -2.6rem;
    color: #fff;
    font-family: "Space Grotesk";
    font-weight: 600;
}
.lightbox-caption span {
    display: block;
    font-family: "JetBrains Mono";
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}
.lb-close,
.lb-prev,
.lb-next {
    position: fixed;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: none;
    transition:
        background 0.3s,
        border-color 0.3s,
        transform 0.3s;
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
    background: var(--red);
    border-color: var(--red);
}
.lb-close {
    top: 1.6rem;
    right: 1.6rem;
}
.lb-prev {
    left: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
}
.lb-next {
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 700px) {
    .lb-prev,
    .lb-next {
        width: 42px;
        height: 42px;
    }
    .lb-prev {
        left: 0.6rem;
    }
    .lb-next {
        right: 0.6rem;
    }
    .lb-close {
        top: 0.8rem;
        right: 0.8rem;
    }
}


/* -------------------------- end --------------- */

/* =============== contact page ========================= */

/* ================= OFFICE CARDS ================= */
.office-card {
    background: var(--paper);
    border: 1px solid var(--navy-tint-2);
    border-radius: 16px;
    padding: 2rem 1.8rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.4s var(--ease),
        box-shadow 0.4s var(--ease),
        border-color 0.4s var(--ease);
    cursor: none;
}
.office-card:hover {
    transform: translateY(-6px);
    border-color: rgba(244, 1, 7, 0.35);
    box-shadow: 0 26px 50px -26px rgba(0, 17, 58, 0.32);
}
.office-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 0;
    background: var(--red);
    transition: width 0.5s var(--ease);
}
.office-card:hover::before {
    width: 100%;
}
.office-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: "JetBrains Mono";
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
    background: rgba(244, 1, 7, 0.08);
    border: 1px solid rgba(244, 1, 7, 0.25);
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 1.2rem;
}
.office-ic {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 1.2rem;
    transition:
        background 0.4s var(--ease),
        transform 0.4s var(--ease);
}
.office-card:hover .office-ic {
    background: var(--red);
    transform: rotate(-8deg) scale(1.05);
}
.office-card h5 {
    font-weight: 700;
    font-size: 1.08rem;
    margin-bottom: 0.9rem;
}
.office-card p {
    color: var(--muted-dark);
    font-size: 0.9rem;
    line-height: 1.75;
    margin-bottom: 0;
}
.office-card a.o-link {
    display: block;
    color: var(--navy);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}
.office-card a.o-link:hover {
    color: var(--red);
}

/* ================= CONTACT CONSOLE ================= */
.contact-section {
    background: var(--navy-tint);
}
.contact-console {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0, 17, 58, 0.35);
}
.contact-panel {
    position: relative;
    background: var(--navy);
    color: #fff;
    padding: 3rem 2.6rem;
    overflow: hidden;
}
.contact-panel-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, #000 30%, transparent 85%);
}
.contact-panel-inner {
    position: relative;
    z-index: 1;
}
.contact-panel-inner h3 {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.25;
    margin-bottom: 0.8rem;
    max-width: 320px;
}
.contact-panel-inner > p {
    color: var(--muted);
    font-size: 0.92rem;
    margin-bottom: 2.4rem;
}
.contact-item-v2 {
    display: flex;
    gap: 1rem;
    padding: 1.2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.civ-ic {
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(244, 1, 7, 0.15);
    border: 1px solid rgba(244, 1, 7, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    font-size: 1rem;
    transition:
        background 0.35s var(--ease),
        transform 0.35s var(--ease);
}
.contact-item-v2:hover .civ-ic {
    background: var(--red);
    color: #fff;
    transform: scale(1.08) rotate(-6deg);
}
.civ-label {
    display: block;
    font-family: "JetBrains Mono";
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.3rem;
}
.contact-item-v2 a,
.contact-item-v2 span.civ-val {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    transition: color 0.3s;
}
.contact-item-v2:hover a {
    color: var(--red);
}
.civ-sub {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

.contact-form-panel {
    background: var(--paper);
    padding: 3rem 2.8rem;
}
.field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}
.field-float {
    position: relative;
    margin-bottom: 1.9rem;
}
.field-float input,
.field-float textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--navy-tint-2);
    padding: 0.7rem 0.1rem;
    font-size: 1rem;
    color: var(--ink-text);
    font-family: "Inter";
    resize: none;
}
.field-float input:focus,
.field-float textarea:focus {
    outline: none;
}
.field-float label {
    position: absolute;
    left: 0.1rem;
    top: 0.75rem;
    font-size: 1rem;
    color: var(--muted-dark);
    pointer-events: none;
    transition: all 0.3s var(--ease);
}
.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label,
.field-float textarea:focus + label,
.field-float textarea:not(:placeholder-shown) + label {
    top: -0.75rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--red);
    text-transform: uppercase;
    font-family: "JetBrains Mono";
}
.field-line {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1.5px;
    width: 0;
    background: var(--red);
    transition: width 0.4s var(--ease);
}
.field-float input:focus ~ .field-line,
.field-float textarea:focus ~ .field-line {
    width: 100%;
}
.submit-btn {
    border: none;
    margin-top: 0.4rem;
}
.btn-red {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1rem 2.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    border-radius: 100px;
    background: var(--red);
    color: #fff;
    border: 1px solid var(--red);
    box-shadow: 0 6px 20px -8px rgba(244, 1, 7, 0.65);
    transition: all 0.4s var(--ease);
    cursor: none;
}
.btn-red span.bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}
.btn-red:hover span.bg {
    transform: scaleX(1);
}
.btn-red:hover {
    border-color: var(--navy);
    transform: translateY(-3px);
}
.btn-red i {
    transition: transform 0.4s var(--ease);
}
.btn-red:hover i {
    transform: translateX(4px) rotate(-45deg);
}
.submit-btn.is-sending {
    pointer-events: none;
    opacity: 0.75;
}
.submit-btn.is-sent {
    background: var(--navy);
    border-color: var(--navy);
}

@media (max-width: 900px) {
    .contact-console {
        grid-template-columns: 1fr;
    }
    .field-group {
        grid-template-columns: 1fr;
    }
    .contact-panel,
    .contact-form-panel {
        padding: 2.4rem 1.8rem;
    }
}

/* ================= MAP ================= */
.map-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -32px rgba(0, 17, 58, 0.3);
    border: 1px solid var(--navy-tint-2);
}
.map-card iframe {
    width: 100%;
    height: 440px;
    border: 0;
    display: block;
    filter: grayscale(25%) contrast(1.05);
}
.map-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.map-head a.btn-navy-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "JetBrains Mono";
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy);
    border: 1px solid var(--navy-tint-2);
    padding: 0.6rem 1.2rem;
    border-radius: 100px;
    transition: all 0.3s var(--ease);
}
.map-head a.btn-navy-outline:hover {
    border-color: var(--red);
    color: var(--red);
}


/* =========================== end ===================== */


/* ================= Services Page ======================== */

/* ================= LAYOUT ================= */
.svc-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 991px) {
    .svc-layout {
        grid-template-columns: 1fr;
    }
}

/* sticky sidebar */
.svc-sidebar {
    position: sticky;
    top: 110px;
}
.svc-sidebar-inner {
    background: var(--navy-tint);
    border: 1px solid var(--navy-tint-2);
    border-radius: 16px;
    padding: 1.4rem;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}
.svc-nav-title {
    font-family: "JetBrains Mono";
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-dark);
    margin-bottom: 1rem;
    padding: 0 0.4rem;
}
.svc-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.55rem 0.6rem;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: bold;
    color: #333c69;
    transition: all 0.3s var(--ease);
    margin: 5px;
    cursor: none;
}
.svc-nav-link i {
    font-size: 0.9rem;
    color: var(--navy);
    transition: color 0.3s var(--ease);
}
.svc-nav-link:hover {
    background: #fff;
    color: var(--ink-text);
}
.svc-nav-link.active {
    background: var(--navy);
    color: #fff;
}
.svc-nav-link.active i {
    color: var(--red);
}
@media (max-width: 991px) {
    .svc-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 2rem;
    }
    .svc-sidebar-inner {
        max-height: none;
    }
}

/* service rows */
.svc-row-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.4rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--navy-tint-2);
    scroll-margin-top: 110px;
}
.svc-row-item:first-child {
    padding-top: 0;
}
.svc-medallion {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition:
        background 0.4s var(--ease),
        transform 0.4s var(--ease);
}
.svc-row-item:hover .svc-medallion {
    background: var(--red);
    transform: rotate(-6deg) scale(1.04);
}
.svc-row-item h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
}
.svc-row-item p {
    color: var(--muted-dark);
    font-size: 0.94rem;
    line-height: 1.8;
    margin-bottom: 0;
}
.svc-badge {
    display: inline-flex;
    font-family: "JetBrains Mono";
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* FIX: Horizontal overflow / stray side white-space */
html{
  max-width:100%;
}
body{
  max-width:100%;
  overflow-x:clip;
}


/* ======================= end ================================= */

/* ================= Job Offers Page ======================== */
.job-card {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
    background: var(--paper);
    border: 1px solid var(--navy-tint-2);
    border-radius: 16px;
    padding: 1.8rem 2rem;
    margin-bottom: 1.2rem;
    transition:
        transform 0.4s var(--ease),
        box-shadow 0.4s var(--ease),
        border-color 0.4s var(--ease);
    position: relative;
    overflow: hidden;
}
.job-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--red);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s var(--ease);
}
.job-card:hover::before {
    transform: scaleY(1);
}
.job-card:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 1, 7, 0.35);
    box-shadow: 0 26px 50px -26px rgba(0, 17, 58, 0.28);
}
.job-ic {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition:
        background 0.4s var(--ease),
        transform 0.4s var(--ease);
}
.job-card:hover .job-ic {
    background: var(--red);
    transform: rotate(-8deg) scale(1.05);
}
.job-main {
    flex: 1;
    min-width: 240px;
}
.job-title {
    font-weight: 700;
    font-size: 1.12rem;
    margin-bottom: 0.35rem;
}
.job-desc {
    color: var(--muted-dark);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}
.job-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: "JetBrains Mono";
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red);
    background: rgba(244, 1, 7, 0.08);
    border: 1px solid rgba(244, 1, 7, 0.2);
    padding: 0.25rem 0.65rem;
    border-radius: 100px;
    margin-bottom: 0.5rem;
}

.nofit-card {
    background: var(--navy-tint);
    border: 1px dashed var(--navy-tint-2);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    margin-top: 2rem;
}
.nofit-card h5 {
    font-weight: 700;
    margin-bottom: 0.6rem;
}
.nofit-card p {
    color: var(--muted-dark);
    font-size: 0.92rem;
    margin-bottom: 1.2rem;
}

@media (max-width: 575px) {
    .job-card {
        padding: 1.5rem;
    }
    .job-card .btn-red {
        width: 100%;
        justify-content: center;
    }
}
/* ======================= end ================================= */

/* ============================================================
   CLIENTS — sliding logo marquee
============================================================ */
.clients-section{
  background:var(--paper);padding:6rem 0 5rem;overflow:hidden;
}

.clients-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:1.5rem;margin-bottom:3.2rem;
}
.cl-eyebrow{display:flex;align-items:center;gap:.7rem;margin-bottom:1.6rem;flex-wrap:wrap;}
.cl-index{font-family:'JetBrains Mono';font-size:.75rem;color:var(--red);}
.cl-line{width:34px;height:1px;background:var(--navy-tint-2);display:inline-block;}
.cl-label{font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.2em;color:var(--muted-dark);text-transform:uppercase;}
.cl-arabic{font-family:'Inter';font-size:.85rem;color:var(--muted-dark);}

.cl-heading{
  font-family:Georgia,'Times New Roman',serif;font-weight:400;color:var(--ink-text);
  font-size:clamp(2rem,4vw,3.2rem);line-height:1.12;margin:0;
}
.cl-heading em{font-style:italic;color:var(--muted-dark);}

.cl-hint{
  font-family:'Inter';font-size:.92rem;color:var(--muted-dark);margin:0 0 .3rem;white-space:nowrap;
}

/* ---- marquee rows ---- */
.cl-marquee-row{
  position:relative;overflow:hidden;
  border-top:1px solid var(--navy-tint-2);
  padding:2.4rem 0;
}
.cl-row-alt{border-bottom:1px solid var(--navy-tint-2);}

.cl-marquee-row::before,
.cl-marquee-row::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.cl-marquee-row::before{left:0;background:linear-gradient(90deg,var(--paper),transparent);}
.cl-marquee-row::after{right:0;background:linear-gradient(-90deg,var(--paper),transparent);}

.cl-track{
  display:flex;align-items:center;gap:4.5rem;width:max-content;
}
.cl-track-1{animation:clScrollLeft 34s linear infinite;}
.cl-track-2{animation:clScrollRight 34s linear infinite;}
.cl-marquee-row:hover .cl-track{animation-play-state:paused;}

@keyframes clScrollLeft{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@keyframes clScrollRight{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}

.cl-logo{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:1.5rem;letter-spacing:.01em;white-space:nowrap;
  color:var(--ink-text);
  filter:grayscale(100%);opacity:.4;
  transition:opacity .4s var(--ease),filter .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
  cursor:default;
}
.cl-logo:hover{
  opacity:1;filter:grayscale(0%);color:var(--red);transform:translateY(-2px);
}

@media(max-width:767px){
  .clients-section{padding:4rem 0 3.2rem;}
  .clients-head{align-items:flex-start;}
  .cl-hint{white-space:normal;}
  .cl-logo{font-size:1.15rem;}
  .cl-track{gap:2.6rem;}
  .cl-marquee-row::before,.cl-marquee-row::after{width:50px;}
}

/* ============================== */

/* =============== Product Page ==================== */
/* ================= CATEGORY FILTERS ================= */
.cat-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 2.8rem;
}
.cat-filter-btn {
    font-family: "JetBrains Mono";
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.6rem 1.3rem;
    border-radius: 100px;
    border: 1px solid var(--navy-tint-2);
    color: var(--muted-dark);
    background: transparent;
    transition: all 0.35s var(--ease);
    cursor: pointer;
}
.cat-filter-btn:hover {
    border-color: var(--red);
    color: var(--red);
}
.cat-filter-btn.active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* ================= CATEGORY GRID ================= */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}
@media (max-width: 991px) {
    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) {
    .cat-grid {
        grid-template-columns: 1fr;
    }
}

.cat-card {
    background: var(--paper);
    border: 1px solid var(--navy-tint-2);
    border-radius: 14px;
    padding: 1.6rem 1.5rem;
    transition:
        border-color 0.35s var(--ease),
        box-shadow 0.35s var(--ease);
    grid-column: span 1;
    align-self: start;
}
.cat-card:hover {
    border-color: rgba(244, 1, 7, 0.35);
    box-shadow: 0 22px 46px -26px rgba(0, 17, 58, 0.28);
}
.cat-card.hide {
    display: none;
}

.cat-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    cursor: pointer;
    gap: 1rem;
}
.cat-meta {
    font-family: "JetBrains Mono";
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.5rem;
}
.cat-title {
    font-weight: 700;
    font-size: 1.02rem;
    margin-bottom: 0.3rem;
}
.cat-count {
    font-family: "JetBrains Mono";
    font-size: 0.74rem;
    color: var(--muted-dark);
}
.cat-chevron {
    font-size: 1rem;
    color: var(--muted-dark);
    transition: transform 0.4s var(--ease);
    flex-shrink: 0;
    margin-top: 0.2rem;
}
.cat-card.open .cat-chevron {
    transform: rotate(180deg);
    color: var(--red);
}

.cat-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--ease);
}
.cat-card.open .cat-body {
    max-height: 900px;
}
.cat-items {
    margin-top: 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--navy-tint-2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.8rem;
}
.cat-items li {
    list-style: none;
    font-size: 0.84rem;
    color: var(--muted-dark);
    position: relative;
    padding-left: 0.9rem;
}
.cat-items li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--red);
}

/* ================= SPECIALIZED PRODUCTS ================= */
.special-section {
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.special-section::after {
    content: "";
    position: absolute;
    left: -8%;
    bottom: -25%;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(244, 1, 7, 0.14);
    border-radius: 50%;
    pointer-events: none;
}
.special-section .eyebrow {
    color: var(--red);
}
.special-section .text-muted-strong {
    color: var(--muted);
}

.special-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
}
@media (max-width: 767px) {
    .special-grid {
        grid-template-columns: 1fr;
    }
}

.special-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 2rem;
    transition:
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease),
        background 0.4s var(--ease);
    position: relative;
    overflow: hidden;
}
.special-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 0;
    background: var(--red);
    transition: width 0.5s var(--ease);
}
.special-card:hover::before {
    width: 100%;
}
.special-card:hover {
    transform: translateY(-6px);
    border-color: rgba(244, 1, 7, 0.4);
    background: rgba(244, 1, 7, 0.04);
}
.special-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: "JetBrains Mono";
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
    background: rgba(244, 1, 7, 0.1);
    border: 1px solid rgba(244, 1, 7, 0.3);
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 1.2rem;
}
.special-ic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1.3rem;
    box-shadow: 0 10px 28px -10px rgba(244, 1, 7, 0.7);
    transition: transform 0.4s var(--ease);
}
.special-card:hover .special-ic {
    transform: rotate(-8deg) scale(1.06);
}
.special-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
    color: #fff;
}
.special-card p {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.75;
    margin-bottom: 1.2rem;
}
.special-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.special-chip {
    font-family: "JetBrains Mono";
    font-size: 0.65rem;
    color: var(--muted);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    padding: 0.3rem 0.7rem;
}

/* ================= BRANDS WE SUPPLY ================= */
.brands-section {
    background: var(--navy-tint);
}

.brand-ticker {
    background: var(--navy-deep);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 3rem;
    padding: 1rem 0;
    position: relative;
}
.brand-ticker::before,
.brand-ticker::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70px;
    z-index: 2;
    pointer-events: none;
}
.brand-ticker::before {
    left: 0;
    background: linear-gradient(90deg, var(--navy-deep), transparent);
}
.brand-ticker::after {
    right: 0;
    background: linear-gradient(-90deg, var(--navy-deep), transparent);
}
.ticker-track {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    width: max-content;
    animation: tickerScroll 38s linear infinite;
}
.brand-ticker:hover .ticker-track {
    animation-play-state: paused;
}
@keyframes tickerScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
.ticker-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: "JetBrains Mono";
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: #fff;
    white-space: nowrap;
}
.ticker-item i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--red);
    display: inline-block;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.1rem;
}
@media (max-width: 991px) {
    .brand-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 575px) {
    .brand-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.brand-mark img{
  max-width:85%;
  max-height:70%;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.75;
  transition:filter .35s var(--ease),opacity .35s var(--ease);
}
.brand-card:hover .brand-mark img{
  filter:grayscale(0%);
  opacity:1;
}

.brand-card {
    background: var(--paper);
    border: 1px solid var(--navy-tint-2);
    border-radius: 10px;
    padding: 1.5rem 1rem 0;
    overflow: hidden;
    transition:
        transform 0.35s var(--ease),
        box-shadow 0.35s var(--ease),
        border-color 0.35s var(--ease);
}
.brand-card.hide {
    display: none;
}
.brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -20px rgba(0, 17, 58, 0.3);
    border-color: rgba(244, 1, 7, 0.3);
}
.brand-mark {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Space Grotesk";
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink-text);
    text-align: center;
}
.brand-foot {
    background: var(--navy);
    color: #fff;
    font-family: "JetBrains Mono";
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.55rem 0.4rem;
    margin: 1.2rem -1rem 0;
}

.brand-toggle-wrap {
    text-align: center;
    margin-top: 2.4rem;
}
.brand-toggle-btn {
    font-family: "JetBrains Mono";
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy);
    border: 1px solid var(--navy-tint-2);
    background: var(--paper);
    padding: 0.75rem 1.6rem;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.35s var(--ease);
    cursor: pointer;
}
.brand-toggle-btn:hover {
    border-color: var(--red);
    color: var(--red);
}
.brand-toggle-btn i {
    transition: transform 0.35s var(--ease);
}
.brand-toggle-btn.expanded i {
    transform: rotate(180deg);
}

/* ================== end ================================ */
/* ============================================================
   REGIONAL PRESENCE
============================================================ */
.reg-section {
    background: var(--navy-deep);
    color: #fff;
    padding: 5.5rem 0 6rem;
}
.reg-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2.6rem;
}
.reg-eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1rem;
}
.reg-title {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.01em;
}
.reg-regions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.reg-regions i {
    color: var(--red);
    font-size: 1.15rem;
}

/* connected 3-column bordered grid */
.reg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(255, 255, 255, 0.75);
}
.reg-card {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.7rem 1.5rem;
    min-height: 230px;
    border-right: 1px solid rgba(255, 255, 255, 0.75);
    transition: background 0.4s var(--ease);
}
.reg-card:last-child {
    border-right: none;
}
.reg-card:hover {
    background: rgba(244, 1, 7, 0.07);
}

.reg-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.4rem;
}
.reg-tag {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
}
.reg-card-top i {
    color: var(--red);
    font-size: 0.95rem;
    transition: transform 0.4s var(--ease);
}
.reg-card:hover .reg-card-top i {
    transform: translateY(-3px);
}

.reg-card h3 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: #fff;
    margin: 0 0 0.5rem;
}
.reg-desc {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0 0 1.6rem;
}

.reg-card-foot {
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.reg-card-foot a {
    font-size: 0.74rem;
    color: #fff;
    transition: color 0.3s var(--ease);
}
.reg-card-foot a:hover {
    color: var(--red);
}

@media (max-width: 900px) {
    .reg-grid {
        grid-template-columns: 1fr;
    }
    .reg-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.75);
        min-height: 0;
    }
    .reg-card:last-child {
        border-bottom: none;
    }
    .reg-head {
        align-items: flex-start;
    }
}

/* ============================================================
   START A CONVERSATION (red band)
============================================================ */
.quote-band {
    background: #b30408;
    color: #fff;
    padding: 4.2rem 0;
}
.quote-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.quote-eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}
.quote-band h2 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.2;
    max-width: 520px;
    margin: 0;
}
.quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    background: #f4f1ea;
    color: var(--navy-deep);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.95rem 1.5rem;
    border-radius: 2px;
    transition:
        background 0.35s var(--ease),
        color 0.35s var(--ease),
        transform 0.35s var(--ease);
}
.quote-btn:hover {
    background: var(--navy-deep);
    color: #fff;
    transform: translateY(-3px);
}
.quote-btn i {
    font-size: 0.95rem;
}

/* ============================================================
   MINIMAL FOOTER
============================================================ */
.footer-min {
    background: var(--navy-deep);
    color: var(--muted);
}
.fm-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 3.2rem 0 2.8rem;
}
.fm-brand img {
    display: block;
    margin-bottom: 1.1rem;
}
.fm-brand p {
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--muted);
    max-width: 290px;
    margin: 0;
}

.fm-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.fm-links a {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.3s var(--ease);
}
.fm-links a:hover {
    color: #fff;
}

.fm-bottom-wrap {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.fm-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 1.3rem 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(170, 178, 214, 0.75);
}
.fm-bottom a {
    color: inherit;
}
.fm-bottom a:hover {
    color: #fff;
}

@media (max-width: 767px) {
    .fm-top {
        align-items: flex-start;
    }
    .fm-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* ========= end ================= */