@font-face {
    font-family: "Lato";
    src: url("../fonts/Lato-Thin.woff2") format("woff2"),
        url("../fonts/Lato-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lato";
    src: url("../fonts/Lato-Light.woff2") format("woff2"),
        url("../fonts/Lato-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lato";
    src: url("../fonts/Lato-Regular.woff2") format("woff2"),
        url("../fonts/Lato-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lato";
    src: url("../fonts/Lato-Bold.woff2") format("woff2"),
        url("../fonts/Lato-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Lato";
    src: url("../fonts/Lato-Black.woff2") format("woff2"),
        url("../fonts/Lato-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colors: */
    --color-primary: #284160;
    --color-secondary: #233853;
    --color-dcdcdc: #DCDCDC;
    --color-73444d: #73444D;
    --color-000000: #000000;
    --color-ffffff: #ffffff;
    --color-2e7bb6: #2E7BB6;

    /* Font/text values */
    --font-lato: Lato;

    --fw-thin: 100;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-bold: 700;
    --fw-black: 900;

    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-30: 30px;
    --fs-35: 35px;
    --fs-48: 48px;
    --fs-50: 50px;

    --lh-18: 18px;
    --lh-21: 21px;
    --lh-22: 22px;
    --lh-23: 23px;
    --lh-24: 24px;
    --lh-26: 26px;
    --lh-28: 28px;
    --lh-36: 36px;
    --lh-42: 42px;
    --lh-49: 49px;
    --lh-57: 57px;
    --lh-60: 60px;

    --br-40: 40px;
}

/* Character Styles */

.h1-title {
    font-size: clamp(1.5625rem, -1.2053rem + 5.7737vw, 3.125rem);
    line-height: clamp(1.875rem, -1.4463rem + 6.9284vw, 3.75rem);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
}
.h2-title {
    font-size: clamp(1.25rem, -0.8705rem + 4.4234vw, 3rem);
    line-height: clamp(1.5rem, -0.9991rem + 5.2133vw, 3.5625rem);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
}
.h3-title {
    font-size: clamp(1.25rem, 0.114rem + 2.3697vw, 2.1875rem);
    line-height: clamp(1.5rem, 0.1368rem + 2.8436vw, 2.625rem);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
}
.text-18 {
    font-size: var(--fs-18);
    line-height: var(--lh-24);
}
.character-style-1 {
    font-family: var(--font-lato);
    font-weight: var(--fw-bold);
    font-size: var(--fs-15);
    line-height: var(--lh-18);
}
.character-style-2 {
    font-family: var(--font-lato);
    font-size: var(--fs-15);
    line-height: var(--lh-21);
}
.character-style-3 {
    font-family: var(--font-lato);
    font-weight: var(--fw-bold);
    font-size: var(--fs-20);
    line-height: var(--lh-24);
}
.character-style-4 {
    font-family: var(--font-lato);
    font-size: var(--fs-20);
    line-height: var(--lh-28);
}
.character-style-5 {
    font-family: var(--font-lato);
    font-weight: var(--fw-bold);
    font-size: var(--fs-35);
    line-height: var(--lh-42);
}
.character-style-6 {
    font-family: var(--font-lato);
    font-size: var(--fs-35);
    line-height: var(--lh-49);
}
.character-style-7 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-15);
    line-height: var(--lh-18);
}
.character-style-8 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-20);
    line-height: var(--lh-24);
}
.character-style-9 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-35);
    line-height: var(--lh-42);
}
.character-style-10 {
    font-size: var(--fs-35);
    line-height: var(--lh-42);
}
.character-style-11 {
    font-size: var(--fs-15);
    line-height: var(--lh-18);
}
.character-style-12 {
    font-size: var(--fs-20);
    line-height: var(--lh-24);
}

/* Reset Style */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
:focus {
    outline: 0;
    box-shadow: none;
}
:focus-visible {
    outline: none;
}
html,
body {
    padding: 0;
    margin: 0;
    font-family: var(--font-lato);
    font-size: var(--fs-16);
    line-height: var(--lh-24);
    font-weight: var(--fw-normal);
    color: var(--color-secondary);
}
body {
    overflow-x: hidden;
}
a {
    color: var(--color-secondary);
    text-decoration: none;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: 0;
}
.primary-btn {
    position: relative;
    display: inline-block;
    overflow: hidden;
    text-transform: uppercase;
    border: 1px solid var(--color-ffffff);
    border-radius: 100px;
    font-size: var(--fs-16);
    line-height: var(--lh-23);
    color: var(--color-ffffff);
    padding: 10px 25px;
    min-width: 138px;
    transition: all 0.2s ease;
    z-index: 1;
}
.primary-btn span {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: var(--color-primary);
    transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.primary-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-ffffff);
}
.primary-btn:hover span {
    width: 225%;
    height: 562.5px;
}
.primary-btn:active {
    background-color: var(--color-primary);
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-75 {
    margin-bottom: 75px;
}
.bg-dcdcdc {
    background-color: var(--color-dcdcdc);
}
/* Landing Loader Css */
body.landing-page {
    overflow: hidden;
    /* background-color: #1e2e17; */
}
/* html:has(body.landing-page) {
    background-color: #1e2e17;
} */
.landing-loader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    min-height: 100dvh;
    overflow: hidden;
    background: #000;
    z-index: 9999;
}
/* Background */
.landing-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("../images/landing-bg.webp");
    background-repeat: no-repeat;
    background-position: 20% 0%;
    /* Fill the whole loader so the black loader background never bleeds
       through at the bottom when the loader is taller than the image
       (e.g. iPhone portrait with landing-bg-mobile.webp). */
    background-size: cover;
    transition:
        background-position 1.6s ease-out,
        background-size 1.6s ease-out;
}
.bg-pos-1 {
    background-position: 20% 0%;
}
.bg-pos-2 {
    background-position: 20% 24%;
}
.bg-pos-3 {
    background-position: 20% 80%;
}
.bg-pos-4 {
    background-position: 20% 95%;
}
.landing-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #284160 0%, #28416000 100%);
    opacity: 0;
    visibility: hidden;
    z-index: 5;
    transition:
        opacity .8s ease-out,
        visibility .8s ease-out;
}
.landing-overlay.show {
    opacity: 1;
    visibility: visible;
}
.landing-slide {
    position: absolute;
    inset: 0;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .6s ease-out,
        visibility .6s ease-out;
}
.landing-slide h1 {
    letter-spacing: 5px;
}
.landing-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.slide-content {
    position: absolute;
    word-wrap: break-word;
}
.slide-1 .slide-content {
    right: 20%;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    --title-width: 435px;
    --desc-width: 370px;
}
.slide-1 .slide-title {
    max-width: 435px;
    margin-left: auto;
}
.slide-1 .slide-desc {
    max-width: 370px;
    margin-left: auto;
    margin-right: -50%;
}
.slide-2 .slide-content {
    left: 19%;
    top: 23%;
    text-align: left;
    --title-width: 485px;
    --desc-width: 405px;
}
.slide-2 .slide-title {
    max-width: var(--title-width);
    text-align: right;
}
.slide-2 .slide-desc {
    max-width: var(--desc-width);
    margin-right: -44%;
    margin-left: auto;
}
.slide-3 .slide-content {
    right: 250px;
    top: 60px;
    text-align: right;
    --title-width: 920px;
}
.slide-3 .slide-title {
    max-width: var(--title-width);
    margin-left: auto;
}
/* Titles */
.slide-title {
    opacity: 0;
    transform: translateX(90px);
    transition: all 1.2s ease-out;
}
.slide-title.enter {
    opacity: 1;
    transform: translateX(0);
}
.slide-title.leave {
    opacity: 0;
    transform: translateX(-140px);
}
/* Description */
.slide-desc {
    margin-top: 20px;
    font-size: var(--fs-20);
    line-height: var(--lh-28);
    text-align: left;
    opacity: 0;
    transform: translateX(-70px);
    transition: all 1.2s ease-out .15s;
}
.slide-desc.enter {
    opacity: 1;
    transform: translateX(0);
}
.slide-desc.leave {
    opacity: 0;
    transform: translateX(120px);
}
.slide-3 .slide-title {
    transform: translateY(-150px);
    transition:
        transform 1.2s ease-out,
        opacity .9s ease-out;
}
.slide-3 .slide-title.enter {
    transform: translateY(0);
}
.slide-3 .slide-title.leave {
    transform: translateY(-150px);
}
/* Final Screen */
.slide-4 {
    display: flex;
    align-items: center;
    justify-content: center;
}
.final-content {
    position: relative;
    padding: 0 40px;
    z-index: 20;
    text-align: center;
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity .8s ease-out,
        transform .8s ease-out;
}
.final-content.show {
    opacity: 1;
    transform: translateY(0);
}
.loader-logo {
    display: block;
    margin: 0 auto 45px;
}
/* Skip Button — styled to match .tech-card-link (text + diagonal arrow, with
   an underline that retracts on hover). White on the dark landing overlay, so
   the colour shift .tech-card-link uses on hover is intentionally omitted. */
.skip-btn {
    position: absolute;
    top: 34px;
    right: 40px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-secondary);
    font-size: var(--fs-16);
    line-height: var(--lh-24);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .35s ease-in-out;
}
.skip-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform .35s ease-in-out;
}
.skip-btn-icon {
    transition: transform .35s ease-in-out;
}
.skip-btn:hover {
    transform: translateX(5px);
}
.skip-btn:hover::after {
    transform: scaleX(0);
}
.skip-btn:hover .skip-btn-icon {
    transform: translate(3px, -3px);
}
/* Loader Exit */
.landing-loader.hide {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .8s ease-out,
        visibility .8s ease-out;
}
/* Landing Loader Css End */
/* Header*/
.site-header {
    position: fixed;
    top: 34px;
    left: 0;
    right: 0;
    z-index: 1000;
    max-width: 1920px;
    margin: 0 auto;
}
.site-header__bar {
    margin: 0 auto;
    padding: 12px 20px;
    border-radius: 26px;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: opacity .25s ease, visibility .25s ease;
    background: rgba(102, 125, 152, 0.42);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .16);
    line-height: 0;
}
.site-header__bar.header-inner-page {
    background: rgb(65 65 65 / 38%);
}
.site-header__logo {
    display: inline-flex;
    width: fit-content;
    margin: 0 auto;
}
/* Hamburger / close toggle*/
.right-action {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 40px;
    top: 50%;
    right: 150px;
    transform: translateY(-50%);
}
.site-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 49px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
}
.site-nav-toggle__bar {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--color-ffffff);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease, width .3s ease;
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(1) {
    width: 100%;
    transform: translateY(9px) rotate(45deg);
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(2) {
    opacity: 0;
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(3) {
    width: 100%;
    transform: translateY(-7px) rotate(-45deg);
}
/* Off-canvas navigation panel*/
.site-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgb(0 0 0 / 81%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s ease, visibility .4s ease;
}
.site-nav-backdrop.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
body.nav-open {
    overflow: hidden;
    height: 100%;
}
.site-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    width: 50%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--color-primary);
    padding: 60px 0 0;
    transform: translateX(100%);
    transition: transform .45s ease;
    border-radius: 100px 0 0 100px;
}
.site-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.site-nav.show {
    transform: translateX(0);
}
.nav-close {
    position: absolute;
    top: 24px;
    right: clamp(3.75rem, -2.5283rem + 13.0969vw, 9.75rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-ffffff);
    cursor: pointer;
    transition: background .2s ease, transform .3s ease;
}
.nav-close:hover {
    background: rgba(255, 255, 255, .12);
    transform: rotate(90deg);
}
.site-nav__list {
    flex: 0 0 auto;
}
.site-nav__item {
    border-bottom: 1px solid var(--color-ffffff);
}
.site-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 23px;
    margin-block: 28px;
    margin-left: auto;
    margin-right: clamp(3.75rem, -2.5283rem + 13.0969vw, 9.75rem);
    border: 0;
    background: transparent;
    color: var(--color-ffffff);
    font-size: clamp(1.25rem, -0.5812rem + 3.8199vw, 3rem);
    font-weight: var(--fw-bold);
    line-height: 1.1875;
    text-transform: uppercase;
    cursor: pointer;
    width: fit-content;
    text-align: left;
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
    color: var(--color-ffffff);
}
.site-nav__label {
    position: relative;
}
a.site-nav__link::after,
.site-nav__label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s ease;
}
a.site-nav__link:hover::after,
a.site-nav__link:focus-visible::after,
.site-nav__toggle:hover .site-nav__label::after,
.site-nav__toggle:focus-visible .site-nav__label::after,
.site-nav__toggle[aria-expanded="true"] .site-nav__label::after {
    transform: scaleX(1);
}
.site-nav__arrow {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform .3s ease;
    top: -2px;
    position: relative;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__arrow {
    transform: rotate(-135deg);
    top: 3px;
}
.site-nav__submenu {
    display: none;
    margin-right: clamp(3.75rem, -2.5283rem + 13.0969vw, 9.75rem);
    margin-bottom: 40px;
    text-align: right;
}
.site-nav__submenu li+li {
    margin-top: 30px;
}
.site-nav__submenu a {
    color: var(--color-ffffff);
    font-size: clamp(0.9375rem, 0.75rem + 0.7vw, 1.25rem);
    line-height: 1.4;
}
.site-nav__submenu a:hover {
    opacity: .75;
}
.site-nav__contact {
    flex: 0 0 auto;
    padding: 40px 20px;
    background: var(--color-ffffff);
}
.site-nav.is-expanded .site-nav__contact {
    display: none;
}
.contact-wrap {
    flex-wrap: wrap;
    max-width: 750px;
    margin: 0 auto;
}
.address-info {
    flex-wrap: wrap;
}
.contact-brand img {
    max-width: 100%;
    height: auto;
}
.contact-wrap p {
    font-size: var(--fs-15);
    line-height: var(--lh-18);
}
.site-nav__contact a {
    color: var(--color-secondary);
}
.site-nav__contact a:hover {
    color: var(--color-73444d);
}
.site-nav__footer {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 25px 156px 25px 123px;
}
.bg-secondaryy {
    background-color: var(--color-secondary);
}
.site-nav__footer a {
    color: var(--color-ffffff);
    font-size: var(--fs-14);
    line-height: var(--lh-18);
    text-transform: uppercase;
    text-decoration: underline;
}
.site-nav__footer a:hover {
    opacity: .85;
}
/* Site background + overlay */
body.home-body {
    background-image: url("../images/home/homepage-bg.webp");
    background-repeat: no-repeat;
    background-position: top center;
}
.site-bg-overlay {
    position: absolute;
    inset: 0;
    height: 500px;
    z-index: -1;
    pointer-events: none;
    background: transparent linear-gradient(180deg, #284160 0%, #28416000 100%) 0% 0% no-repeat padding-box;
}
/* Home Hero Css */
.hero-wrap {
    position: relative;
    padding: 144px 0 50px;
}
.px-36 {
    padding-left: 36px;
    padding-right: 36px;
}
.container-fluid {
    max-width: 1920px;
}
.hero-box {
    background: rgb(255 255 255 / 87%);
    border-radius: var(--br-40);
    padding: 100px 64px;
    box-shadow: 5px 5px 12px #00000029;
    max-width: 1848px;
    margin: 0 auto;
}
.hero-title span {
    display: block;
    text-transform: uppercase;
    font-weight: var(--fw-black);
    line-height: 1.05;
    color: var(--color-2e7bb6);
    text-shadow: 0 3px 8px rgba(0, 0, 0, .16);
    font-weight: var(--fw-bold);
}
.hero-title span:first-child {
    font-size: clamp(2.1875rem, 0.875rem + 3.75vw, 4.4375rem);
    line-height: clamp(2.5rem, 1.4063rem + 3.125vw, 4.375rem);
}
.hero-title span:last-child {
    font-size: clamp(4.5rem, 2.0938rem + 6.875vw, 8.625rem);
    line-height: clamp(5.375rem, 4.4271rem + 2.7083vw, 7rem);
}
.hero-subtitle {
    font-weight: var(--fw-bold);
    font-size: var(--fs-30);
    line-height: var(--lh-36);
    margin-top: 30px;
    margin-bottom: 15px;
}
.hero-right {
    position: relative;
    padding-right: 50px;
}
.hero-image {
    display: block;
    border-radius: 24px;
    object-fit: cover;
    box-shadow: -5px 5px 6px #00000029;
}
.hero-side {
    position: absolute;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: -5px 5px 6px #00000029;
}
.hero-side-top {
    top: -30px;
    right: 8.7%;
}
.hero-side-bottom {
    top: 46%;
    right: 4.9%;
}
/* Home Hero Css End */
/* Hero Image Float Animation */
@keyframes heroImageFloatMain {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-8px, 9px);
    }
}
@keyframes heroImageFloatTop {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(8px, -9px);
    }
}
@keyframes heroImageFloatBottom {
    0% {
        transform: translate(0, 0);
    }
    30% {
        transform: translate(5px, -7px);
    }
    60% {
        transform: translate(-4px, -11px);
    }
    85% {
        transform: translate(-6px, -3px);
    }
    100% {
        transform: translate(0, 0);
    }
}
.hero-image {
    animation: heroImageFloatMain 7s ease-in-out infinite;
}
.hero-side-top {
    animation: heroImageFloatTop 7s ease-in-out infinite;
}
.hero-side-bottom {
    animation: heroImageFloatBottom 6s ease-in-out infinite;
    animation-delay: 0.8s;
}
/* Hero Image Float Animation End */
/* About Us Css */
.about-wrap {
    padding: 110px 0 870px;
    scroll-margin-top: 70px;
}
.about-content {
    max-width: 640px;
    margin-left: 105px;
}
.line-label {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: var(--fs-15);
    line-height: var(--lh-21);
    margin-bottom: 22px;
}
.about-label {
    margin-bottom: 22px;
    letter-spacing: 1px;
}
.label-line {
    flex: 1;
    height: 1px;
    background: currentColor;
}
.primary-btn.btn-outline-dark {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.primary-btn.btn-outline-dark:hover {
    color: var(--color-ffffff);
}
.lets-touch {
    background-color: var(--color-primary);
    padding-bottom: 190px;
    margin-bottom: -60px;
}
.lets-wrap {
    background-color: var(--color-73444d);
    border-radius: var(--br-40);
    padding: 65px 50px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
}
.lets-wrap p {
    margin-top: -15px;
    max-width: 300px;
}
.contact-action a {
    background: var(--color-ffffff);
    color: var(--color-73444d);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    transition: all 0.2s ease-out;
}
.contact-action a:hover {
    background: var(--color-primary);
    color: var(--color-ffffff);
}
/* About Us Css End */
/* Quality Css */
.quality-wrap {
    position: relative;
    /* background-color: var(--color-primary); */
}
.quality-wrap:before {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: transparent linear-gradient(360deg, #284160 0%, #28416000 100%) 0% 0% no-repeat padding-box;
    z-index: -1;
}
.quality-box {
    overflow: hidden;
    background: rgb(255 255 255 / 87%);
    border-radius: var(--br-40);
    padding: 45px;
    box-shadow: 5px 5px 12px #00000029;
}
.quality-slider-wrap {
    position: relative;
}
.quality-slider,
.quality-slider .slick-list,
.quality-slider .slick-track {
    height: 100%;
}
.quality-slider .quality-slide {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
.quality-slide-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--br-40);
}
.quality-slide-image {
    position: relative;
}
.quality-slide-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    border-radius: var(--br-40);
    z-index: 1;
    width: 100%;
    height: 281px;
    background: transparent linear-gradient(180deg, #F5F5F500 0%, #233853 100%) 0% 0% no-repeat padding-box;
}
.quality-content {
    color: var(--color-73444d);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    gap: 30px;
    padding: 50px 100px 50px 130px;
}
.quality-content .h2-title {
    margin-top: -13px;
}
.quality-content .primary-btn {
    border-color: var(--color-73444d);
    color: var(--color-73444d);
    width: fit-content;
}
.quality-content .primary-btn:hover {
    color: var(--color-ffffff);
    border-color: var(--color-primary);
}
.quality-slider-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}
.quality-slider-nav>* {
    pointer-events: auto;
}
.quality-slider-arrows {
    gap: 12px;
}
.quality-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--color-73444d);
    border-radius: 50%;
    background: var(--color-ffffff);
    backdrop-filter: blur(4px);
    color: var(--color-73444d);
    flex-shrink: 0;
    transition: background .2s ease;
}
.quality-arrow:hover {
    background: var(--color-73444d);
    color: var(--color-ffffff);
}
.quality-dots ul {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 5px;
    margin: 0;
    padding: 0;
}
.slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
}
.quality-dots li button {
    width: 16px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .60);
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
    transition: background .25s ease, width .25s ease;
}
.quality-dots li button:before {
    content: none;
}
.quality-dots li.slick-active button {
    width: 46px;
    background: var(--color-ffffff);
}
/* Quality Css End */
/* Our Technology Css */
.tech-wrap {
    position: relative;
    padding: 130px 0;
    background-color: var(--color-primary);
}
.tech-wrap .container-fluid {
    padding-left: 138px;
    padding-right: 138px;
}
.tech-left {
    color: var(--color-ffffff);
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tech-label {
    margin-bottom: 45px;
}
.tech-accordion {
    border-top: 1px solid rgba(255, 255, 255, .2);
}
.tech-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    width: 100%;
}
.tech-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 22px 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: rgba(255, 255, 255, .45);
    font-weight: var(--fw-bold);
    text-align: left;
    transition: color .3s ease;
    font-size: clamp(1.0625rem, -0.3007rem + 2.8436vw, 2.1875rem);
    line-height: clamp(1.3125rem, -0.2778rem + 3.3175vw, 2.625rem);
}
.tech-button:hover {
    color: var(--color-ffffff);
}
.tech-button::after {
    display: none;
    content: none;
}
.nav-pills .tech-button.active {
    color: var(--color-ffffff);
    font-weight: var(--fw-bold);
    background: transparent;
    box-shadow: none;
}
.tech-button-icon {
    display: inline-flex;
    flex-shrink: 0;
}
.tech-button-icon svg {
    display: block;
    opacity: .45;
    transition: transform .3s ease, opacity .3s ease;
}
.tech-button.active .tech-button-icon svg {
    opacity: 1;
    transform: rotate(45deg);
}
.tab-content>.tab-pane,
.tab-content {
    height: 100%;
}
.tech-media {
    position: relative;
    height: 100%;
}
.tech-image {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: var(--br-40);
    opacity: 1;
    transition: opacity .35s ease;
    height: 100%;
}
.tech-card {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--color-ffffff);
    border-radius: 16px;
    padding: 25px 45px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
    opacity: 1;
    transition: opacity .35s ease;
}
.tech-card p {
    max-width: 470px;
}
.tech-card-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform .35s ease-in-out;
}
.tech-card-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform .35s ease-in-out;
}
.tech-card-link svg {
    transition: transform .35s ease-in-out;
}
.tech-card-link:hover {
    color: var(--color-primary);
    transform: translateX(5px);
}
.tech-card-link:hover::after {
    transform: scaleX(0);
}
.tech-card-link:hover svg {
    transform: translate(3px, -3px);
}
/* Smooth fade effect */
#techTabContent .tab-pane:not(.show) .tech-image,
#techTabContent .tab-pane:not(.show) .tech-card {
    opacity: 0;
}
#techTabContent .tab-pane.show .tech-image,
#techTabContent .tab-pane.show .tech-card {
    opacity: 1;
}
/* Our Technology Css End */
/* Floating Badges + Actions */
.floating-badges {
    position: fixed;
    left: 0;
    bottom: 90px;
    z-index: 40;
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility .3s ease;
}
.floating-badges.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.floating-actions {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility .3s ease;
}
.floating-actions.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* Keep the floating actions visible while the tech-popup is open, even if
   the footer intersection observer in main.js flagged them .is-hidden. */
body.tech-popup-open .floating-actions.is-hidden {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.floating-badges .img-bx {
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(6px) brightness(1.11);
    -webkit-backdrop-filter: blur(6px) brightness(1.11);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.floating-badges .img-bx:first-child {
    padding: 15px 25px 15px 30px;
    border-radius: 0 15px 15px 0;
}
.floating-badges .img-bx:last-child {
    border-radius: 50%;
    width: 75px;
    height: 74px;
    text-align: center;
    align-content: center;
}
.floating-badges p {
    margin-top: 10px;
    font-size: var(--fs-15);
    line-height: var(--lh-21);
    background: rgba(255, 255, 255, 0.63);
    backdrop-filter: blur(6px) brightness(1.11);
    -webkit-backdrop-filter: blur(6px) brightness(1.11);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    padding: 9px;
    border-radius: 0 15px 15px 0;
}
.floating-actions {
    position: fixed;
    right: 52px;
    bottom: 90px;
    z-index: 40;
}
.floating-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 59px;
    border: 0;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-ffffff);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    transition: background .2s ease;
}
.floating-btn:first-child {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    opacity: 1;
    background: rgb(220 220 220 / 40%);
}
.floating-btn:hover {
    background: var(--color-secondary);
    color: var(--color-ffffff);
}
#scrollTopBtn svg {
    transition: transform .3s ease;
}
#scrollTopBtn:hover svg {
    transform: translateY(-4px);
}
/* Floating Badges + Actions End */
/* Footer Css */
.footer-wrap {
    background: var(--color-secondary);
    color: var(--color-ffffff);
    padding-top: 70px;
    border-radius: 60px 60px 0 0;
    box-shadow: 0px -3px 10px #00000043;
    z-index: 1;
    position: relative;
}
.footer-wrap .container-fluid {
    padding-left: 170px;
    padding-right: 220px;
}
.footer-inner {
    font-size: var(--fs-18);
    line-height: var(--lh-26);
}
.footer-logo {
    max-width: 100%;
    height: auto;
}
.footer-wrap a {
    color: var(--color-ffffff);
}
.footer-wrap a:hover {
    opacity: .8;
}
.footer-links li+li {
    margin-top: 24px;
}
.footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 535px;
    justify-content: space-between;
    margin-left: auto;
}
.footer-bottom {
    background: var(--color-ffffff);
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 90px;
}
.footer-bottom :is(p, a) {
    color: #9D9D9D;
}
.footer-copy {
    font-size: var(--fs-15);
}
.footer-policy {
    text-transform: uppercase;
    text-decoration: underline;
}
.footer-policy:hover {
    color: var(--color-primary);
}
/* Mobile-only */
.footer-contact-icons {
    display: flex;
    gap: 16px;
}
.footer-wrap a.footer-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background: var(--color-ffffff);
    color: var(--color-secondary);
}
.footer-wrap a.footer-icon-btn:hover {
    opacity: .85;
}
/* Footer Css End */
/* Responsive */
.inner-hero-wrap {
    position: relative;
    padding: 143px 36px 50px;
    height: 100vh;
    margin-bottom: -1px;
}
.inner-hero-wrap::before {
    content: '';
    inset: 0;
    position: absolute;
    height: 100dvh;
    width: 100%;
    background-image: url('../images/hero-gradient-bg.svg');
    background-size: cover;
    background-position: center top;
}
.inner-hero-wrap .container-fluid {
    padding: 0;
}
.hero-bg-wrap {
    position: relative;
    height: calc(100dvh - 180px);
    overflow: hidden;
    border-radius: var(--br-40);
    transition: all 0.3s ease;
}
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--br-40);
}
.hero-content-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: self-end;
    justify-content: center;
    height: 100%;
    padding-bottom: 65px;
}
.hero-content {
    width: 806px;
    padding: 25px;
    border-radius: var(--br-40);
    background: rgba(255, 255, 255, .87);
    box-shadow: 5px 5px 12px #00000029;
}
.hero-content-inner {
    max-width: 470px;
    margin: 0 auto;
}
.hero-content-inner .hero-info {
    margin: 17px 0 36px;
}
.hero-scroll {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
    color: var(--color-secondary);
    opacity: 0.45;
    transition: all 0.2s ease;
}
.hero-scroll:hover {
    color: var(--color-secondary);
    opacity: 1;
}
.hero-scroll-mouse {
    display: block;
    width: 24px;
    height: 35px;
    border: 2px solid currentColor;
    border-radius: 8px;
    position: relative;
}
.hero-scroll-wheel {
    position: absolute;
    left: 50%;
    top: 5px;
    width: 2px;
    height: 7px;
    background: currentColor;
    transform: translateX(-50%);
    animation: wheel 2s infinite;
}
.scroll-arrow {
    gap: 2px;
}
.scroll-arrow svg {
    animation: arrowMove 2s infinite;
}
.scroll-arrow svg:last-child {
    animation-delay: .15s;
}

@keyframes wheel {

    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 10px);
        opacity: 0;
    }

}
@keyframes arrowMove {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }

}


/* Company Profile */
.profile-wrap,
.track-wrap {
    background-color: var(--color-dcdcdc);
}
.profile-wrap {
    padding: 170px 115px 130px;
}
.top-label .label-line {
    max-width: 164px;
}
.top-label {
    justify-content: center;
    text-align: center;
}
.profile-brand {
    margin-bottom: 43px;
}
.profile-text {
    max-width: 626px;
}
.profile-text p+p {
    margin-top: 24px;
}
.view-cert {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform .35s ease-in-out;
}
.view-cert::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform .35s ease-in-out;
}
.view-cert svg {
    transition: transform .35s ease-in-out;
}
.view-cert:hover {
    color: var(--color-primary);
    transform: translateX(5px);
}
.view-cert:hover::after {
    transform: scaleX(0);
}
.view-cert:hover svg {
    transform: translate(3px, -3px);
}
/* Track Records */
.track-wrap {
    padding: 0 115px 130px;
}
.track-item {
    padding: 25px 0;
    border-bottom: 1px solid #707070;
    font-size: 22px;
    line-height: 32px;
}
body.cert-modal-open {
    overflow: hidden;
}
.cert-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.cert-modal.is-open {
    opacity: 1;
    visibility: visible;
}
.cert-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 34%);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}
.cert-modal__close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 3;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
    box-shadow: 5px 4px 6px #0000004D;
}
.cert-modal__close:hover {
    background: var(--color-primary);
}
.cert-modal__info {
    position: absolute;
    top: 90px;
    right: 24px;
    z-index: 2;
    background: var(--color-secondary);
    color: var(--color-ffffff);
    padding: 25px;
    text-align: right;
    max-width: 280px;
    box-shadow: 5px 4px 6px #0000004D;
    font-size: var(--fs-18);
    line-height: var(--lh-22);
}
.cert-modal__info-label {
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 700;
}
.cert-modal__nav {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 48px;
    border: 0px;
    background: var(--color-secondary);
    color: var(--color-ffffff);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
    margin: 0 25px;
    transition: .25s ease;
}
#certPrev.is-disabled,
#certNext.is-disabled {
    background: #777;
    cursor: default;
    pointer-events: none;
    opacity: 0.5;
}
.cert-modal__nav:hover {
    background: var(--color-primary);
}
.cert-modal__slider {
    position: relative;
    z-index: 1;
    max-width: 691px;
    aspect-ratio: 691 / 977;
    max-height: calc(100vh - 100px);
    height: 100%;
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
}
.cert-modal__slider .slick-list,
.cert-modal__slider .slick-track,
.cert-modal__slider .cert-slide {
    height: 100%;
}
.cert-modal__slider .slick-track {
    display: flex;
    align-items: center;
}
.cert-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* About Us - Quality  */
.excellence-wrap {
    padding: 170px 0 240px;
}
.excellence-row {
    display: flex;
    flex-direction: column;
    gap: 45px;
    margin: 0 auto 37px;
    max-width: 1041px;
}
.excellence-item {
    position: relative;
}
.excellence-toggle {
    position: relative;
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
}
.excellence-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.excellence-scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 218px;
    background: transparent linear-gradient(180deg, #F5F5F500 0%, #233853 100%) 0% 0% no-repeat padding-box;
}
/* Title + arrow share a flex caption anchored to the bottom of the tile,
   so aligning them is just a matter of gap/justify — no absolute juggling. */
.excellence-caption {
    position: absolute;
    left: 45px;
    right: 50px;
    bottom: 57px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: var(--color-ffffff);
}
.excellence-title {
    font-weight: var(--fw-bold);
    font-size: clamp(1rem, -0.0602rem + 2.2117vw, 1.875rem);
    line-height: clamp(1.1875rem, -0.0999rem + 2.6856vw, 2.25rem);
    text-transform: uppercase;
}
.excellence-icon {
    position: relative;
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    color: var(--color-ffffff);
    background: transparent;
}
.excellence-icon-shaft,
.excellence-icon-arm-top,
.excellence-icon-arm-right {
    position: absolute;
    background: currentColor;
    transition: transform .35s ease, opacity .35s ease, width .35s ease, height .35s ease, top .35s ease, left .35s ease, right .35s ease;
    transform-origin: center;
}
.excellence-icon-shaft {
    top: 50%;
    left: 50%;
    width: 35px;
    height: 1px;
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* Top edge line (part of arrowhead corner) — spans full width at top. */
.excellence-icon-arm-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
}
/* Right edge line (part of arrowhead corner) — spans full height on right. */
.excellence-icon-arm-right {
    top: 0;
    right: 0;
    left: auto;
    width: 1px;
    height: 100%;
}
/* Open (X) state: top edge rotates & collapses to become the second
   diagonal of the X (top-left to bottom-right); right edge fades. */
.excellence-item.is-open .excellence-icon-arm-top {
    top: 50%;
    left: 50%;
    width: 35px;
    transform: translate(-50%, -50%) rotate(45deg);
}
.excellence-item.is-open .excellence-icon-arm-right {
    opacity: 0;
}
.excellence-panel {
    display: none;
    position: relative;
    background: var(--color-ffffff);
    box-shadow: 5px 5px 12px #00000029;
}
.excellence-panel.is-open {
    display: block;
}
.excellence-panel-inner {
    padding: 32px 28px;
    position: relative;
}
/* CSS-drawn X (two 1px pseudo-element lines rotated ±45°). Positioned as a
   direct child of .excellence-panel — so on mobile it stays put at the
   panel's top-right while the inner content scrolls beneath it. */
.excellence-panel-close {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: var(--color-secondary);
    padding: 0;
    cursor: pointer;
    z-index: 5;
}
.excellence-panel-close::before,
.excellence-panel-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1px;
    background: currentColor;
    border-radius: 1px;
    transform-origin: center;
}
.excellence-panel-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.excellence-panel-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.excellence-panel-title {
    font-weight: var(--fw-bold);
    margin-bottom: 16px;
}
.excellence-panel-inner p+p {
    margin-top: 14px;
}
.excellence-panel-bar {
    display: none;
}
/* ==========================================================================
   Our Technology page — 3x2 product grid.
   Hero uses the shared .inner-hero-wrap defined earlier.
   ========================================================================== */
/* Products grid — flush 3x2 on desktop */
.tech-grid-wrap {
    background: var(--color-ffffff);
    margin-bottom: -55px;
}
.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
/* XD proportions: row 1 tiles = 564px tall @ 1440 desktop, row 2 tiles = 621px.
   Scale linearly down to 380/420 at the 767px breakpoint. Mobile block resets
   these to auto so its aspect-ratio takes over below 768px. */
.tech-tile {
    position: relative;
    display: block;
    height: clamp(380px, calc(380px + (100vw - 767px) * 0.273), 564px);
    overflow: hidden;
    border: none;
    text-align: left;
}
.tech-tile:nth-child(n+4) {
    height: clamp(420px, calc(420px + (100vw - 767px) * 0.299), 621px);
}
.tech-tile__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tech-tile__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(35, 56, 83, .55) 0%, rgba(35, 56, 83, .15) 40%, rgba(35, 56, 83, .55) 100%);
    z-index: 1;
    pointer-events: none;
    transition: opacity .35s ease;
}
/* Hover-only overlay: dark 315° gradient that fades in on top of the scrim,
   giving the tile a moodier feel when interacted with. */
.tech-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent linear-gradient(315deg, #00000000 0%, #1A1A1A 100%) 0% 0% no-repeat padding-box;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.tech-tile:hover::after {
    opacity: 1;
}
/* Title + arrow share a flex caption anchored to the top of the tile. */
.tech-tile__caption {
    position: absolute;
    top: 36px;
    left: 56px;
    right: 36px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    align-items: last baseline;
    justify-content: flex-start;
    gap: 25px;
    color: var(--color-ffffff);
}
/* Nudge the arrow up so it visually aligns with the title's last-line
   baseline instead of sitting on the line-box bottom (the extra pixels are
   the descender space of the text line-height). Works for both flex-end
   and last-baseline alignment. */
.tech-tile__caption .tech-tile__icon {
    margin-bottom: 6px;
}
.tech-tile__title {
    position: relative;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    /* XD spec: 14px @ 375 mobile → 35px @ 1440 desktop, line-height ~1.2.
       Linear ramp: 0.413rem + 1.97vw, clamped between 14px and 35px. */
    font-size: clamp(14px, 0.413rem + 1.97vw, 35px);
    line-height: 1.2;
    letter-spacing: .5px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
/* Animated underline: grows from 0 → 100% width, left → right on hover. */
.tech-tile__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 1px;
    width: 0;
    background: currentColor;
    transition: width .45s ease;
}
.tech-tile:hover .tech-tile__title::after {
    width: 100%;
}
/* Inline SVG arrow icon (viewBox 20.98 × 19.887). The svg fills the
   .tech-tile__icon box and rotates 45° clockwise on hover for the → effect. */
.tech-tile__icon {
    flex-shrink: 0;
    width: 22px;
    height: 20px;
    color: var(--color-ffffff);
    transition: transform .35s ease;
}
.tech-tile__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.tech-tile:hover .tech-tile__icon {
    transform: rotate(45deg);
}
.is-hidden-for-popup {
    display: none !important;
}
.tech-popup {
    display: none;
    width: 100%;
    height: calc(100vh + 55px);
    background: var(--color-73444d);
    margin-bottom: -55px;
}
.tech-popup.is-open {
    display: block;
}
.tech-popup__panel {
    display: none;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    width: 100%;
}
.tech-popup__panel.is-active {
    display: grid;
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--color-secondary);
    transform: translateX(var(--pt-x, 0%));
    pointer-events: none;
    will-change: transform;
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
/* Snap to parked (off-screen right) without any animation. Used between
   the "arrived" state and the next "leaving" click so the leave animation
   starts from the RIGHT edge, not the LEFT. */
body.pt-parked::before {
    transition: none;
}
/* Lock body scroll while the overlay is covering / animating. Prevents
   the user from wheel/touch-scrolling underneath the (invisible-through)
   overlay, which could jump the page to an unexpected position once the
   overlay slides away. */
html.pt-animating,
body.pt-animating {
    overflow: hidden;
}
/* When JS isn't available, hide the overlay so the page is still usable. */
html.no-js body::before {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    body::before {
        display: none;
    }

    .page-transition-overlay {
        display: none;
    }
}

/* Popup entrance animations — fire when a panel becomes active. Uses CSS
   keyframes (not AOS) because the popup lives outside the scroll flow and
   AOS's viewport-based triggers can't reliably see it. Respects reduced
   motion by disabling the keyframes when the user opts out. */
.tech-popup__panel.is-active .tech-popup__header {
    animation: techPopupFadeIn .55s ease-out both;
}
.tech-popup__panel.is-active .tech-popup__right-inner {
    animation: techPopupFadeUp .7s ease-out .18s both;
}
@keyframes techPopupFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes techPopupFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .tech-popup__panel.is-active .tech-popup__header,
    .tech-popup__panel.is-active .tech-popup__right-inner {
        animation: none;
    }
}
/* Left side — full-bleed product photo with dark scrim + heading */
.tech-popup__left {
    position: relative;
    overflow: hidden;
    background: #000;
}
.tech-popup__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tech-popup__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .55) 100%);
    z-index: 1;
}
.tech-popup__left-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 170px 60px 60px;
    color: var(--color-ffffff);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
}
.tech-popup__left-content .logo-wrp {
    margin-left: 90px;
}
.tech-popup__header {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    color: var(--color-ffffff);
}
/* Back button — 69×69, left-pointing chevron centered in the circle. On
   hover: the chevron shifts left by a few pixels and a horizontal line
   grows in from the right edge, forming a stretched ← arrow. */
.tech-popup__close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 69px;
    height: 69px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: transparent;
    color: var(--color-ffffff);
    flex-shrink: 0;
    cursor: pointer;
    transition: background .2s ease;
}
.tech-popup__close svg {
    display: block;
    transform: rotate(-90deg);
    transition: transform .35s ease;
}
.tech-popup__close::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 18px;
    height: 1px;
    width: 0;
    background: currentColor;
    transform: translateY(-50%);
    transition: width .35s ease;
}
.tech-popup__close:hover {
    background: rgba(255, 255, 255, .12);
}
.tech-popup__close:hover svg {
    transform: translateX(-6px) rotate(-90deg);
}
.tech-popup__close:hover::after {
    width: 26px;
}
.tech-popup__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    text-transform: uppercase;
    /* XD spec: 12px @ mobile (375) → 15px @ desktop (1440), line-height ~1.4 */
    font-size: clamp(0.75rem, 0.684rem + 0.282vw, 0.9375rem);
    line-height: 1.4;
    letter-spacing: 1px;
    color: var(--color-ffffff);
    margin-bottom: 14px;
}
.tech-popup__eyebrow-line {
    display: block;
    width: 250px;
    height: 1px;
    background: currentColor;
}
.tech-popup__title {
    color: var(--color-ffffff);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    /* XD spec: 35px / line-height 42, scales down on smaller viewports. */
    font-size: clamp(1.25rem, 0.5rem + 1.5vw, 2.1875rem);
    line-height: 1.2;
    letter-spacing: .5px;
    margin: 0;
}
/* Right side — burgundy content area */
.tech-popup__right {
    background: var(--color-73444d);
    color: var(--color-ffffff);
    overflow-y: auto;
    padding: 180px 20px 140px 105px;
}
.tech-popup__panel[data-panel="dnv"] .tech-popup__right {
    padding-top: 145px;
}
.tech-popup__right-inner {
    max-width: 670px;
}
.tech-popup__desc {
    font-size: var(--fs-18);
    line-height: 30px;
    max-width: 610px;
}
.tech-popup__panel[data-panel="dnv"] .tech-popup__desc {
    max-width: 622px;
}

.tech-popup__desc p+p {
    margin-top: 20px;
}
.tech-popup__divider {
    margin: 50px 0;
    height: 1px;
    background: #ffffff;
}
.tech-popup__catalog-title {
    font-weight: var(--fw-bold);
    /* XD spec: 22px @ mobile (375) → 28px @ desktop (1440), line-height ~1.22 */
    font-size: clamp(1.375rem, 1.243rem + 0.563vw, 1.75rem);
    line-height: 1.22;
    text-transform: uppercase;
    margin-bottom: 24px;
    letter-spacing: .5px;
}
.tech-popup__catalogs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
    width: fit-content;
}
.tech-popup__catalogs--2col {
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}
.catalog-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 31px;
    border: 1px solid #fff;
    border-radius: 14px;
    color: var(--color-ffffff);
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    width: 100%;
    max-width: 100%;
}
.tech-popup__panel[data-panel="silencers"] .catalog-btn {
    padding: 10px 20px;
}
.catalog-btn:hover {
    background: var(--color-ffffff);
    color: var(--color-73444d);
    border-color: var(--color-ffffff);
}
.catalog-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Popup responsive */
/* ==========================================================================
   Contact Us Page — split layout: form + address on the left, embedded
   Google Map on the right. Follows the XD reference. Header is fixed above,
   footer sits naturally below.
   ========================================================================== */
.contact-wrap-page {
    /* Map side runs full-bleed from the top; form side reserves header space
       via its own padding so the fields stay clear of the fixed header.
       Negative bottom margin lets the footer's rounded top curl up over the
       section (same technique used on tech-grid and tech-popup). */
    margin-bottom: -50px;
}
.contact-split {
    display: grid;
    /* minmax(0, 1fr) forces exact 50/50 split — plain 1fr lets a column
       widen to fit its content's min-content size (long labels, big padding),
       which was making the form column push wider than the map column. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.contact-form-side {
    padding: 186px 50px 190px 160px;
}
.contact-form-inner {
    max-width: 580px;
}
.contact-title {
    color: var(--color-secondary);
    margin-bottom: 20px;
}
.contact-lede {
    color: var(--color-secondary);
    margin-bottom: 45px;
    margin-top: 10px;
}
.contact-form {
    margin-bottom: 40px;
}
.contact-label {
    display: block;
    font-weight: var(--fw-bold);
    font-size: var(--fs-16);
    line-height: 19px;
    color: var(--color-secondary);
    margin-bottom: 6px;
}
.contact-input {
    display: block;
    width: 100%;
    padding: 7px 16px;
    background: #D1D1D1;
    border: 1px solid #A7A7A7;
    border-radius: 7px;
    font-family: var(--font-lato);
    font-size: var(--fs-15);
    line-height: var(--lh-21);
    color: var(--color-secondary);
    transition: border-color .2s ease, background .2s ease;
}
.contact-input:focus {
    outline: none;
    background: var(--color-ffffff);
    border-color: var(--color-primary);
}
/* Form validation states + submit loader + response banner. Scoped to the
   contact form so nothing else is affected. */
.contact-input.is-invalid {
    border-color: #c2452b;
    background: #fdf3f0;
}
.contact-check.is-invalid .contact-check__box {
    border-color: #c2452b;
    box-shadow: 0 0 0 3px rgba(194, 69, 43, .12);
}
.contact-error {
    margin-top: 6px;
    color: #c2452b;
    font-size: 13px;
    line-height: 1.4;
}
.contact-submit.is-loading {
    opacity: .85;
    cursor: not-allowed;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.contact-submit__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: contact-spin .7s linear infinite;
}
@keyframes contact-spin {
    to {
        transform: rotate(360deg);
    }
}
.contact-status {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}
.contact-status--success {
    background: #e8f4ec;
    border: 1px solid #a9d4b6;
    color: #1f5d34;
}
.contact-status--error {
    background: #fdecea;
    border: 1px solid #f0b1a3;
    color: #8a2e18;
}
.contact-textarea {
    resize: vertical;
    min-height: 180px;
}
/* Custom checkbox */
.contact-check {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--color-secondary);
    font-size: 14px;
    line-height: 20px;
    user-select: none;
}
.contact-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.contact-check__box {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #D1D1D1;
    border: 1px solid #A7A7A7;
    border-radius: 5px;
    flex-shrink: 0;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}
.contact-check input[type="checkbox"]:checked+.contact-check__box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.contact-check input[type="checkbox"]:checked+.contact-check__box::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 4px;
    width: 8px;
    height: 16px;
    border: solid var(--color-ffffff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.contact-check input[type="checkbox"]:focus-visible+.contact-check__box {
    box-shadow: 0 0 0 3px rgba(40, 65, 96, .25);
}
.contact-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.contact-submit {
    min-width: 100px;
    padding: 12px 28px;
    border: 0px;
    border-radius: 11px;
    background: var(--color-primary);
    color: var(--color-ffffff);
    cursor: pointer;
    transition: background 0.2s;
}
.contact-submit:hover {
    background: var(--color-secondary);
}
/* Info block below the form */
.contact-info {
    display: flex;
    gap: 26px;
}
.contact-info__label {
    font-weight: var(--fw-bold);
    font-size: var(--fs-15);
    line-height: 20px;
    text-transform: uppercase;
    margin-bottom: 9px;
}
.contact-info__value {
    margin-bottom: 0;
}
.address-bx {
    border-right: 1px solid #9D9D9D;
    padding-bottom: 20px;
    padding-right: 30px;
    min-width: 200px;
}
.contact-info__row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.contact-info__row:last-child {
    margin-bottom: 0;
}
.contact-info__row a {
    color: var(--color-secondary);
}
.contact-info__row a:hover {
    color: var(--color-73444d);
}
.contact-info__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-ffffff);
    color: var(--color-primary);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
/* Map side — Google Maps iframe embed. Google's own marker (from the
   ?q= address in the iframe src) shows at Biztech Centre and drags with
   the map. The custom +/- buttons rewrite the iframe's z= parameter to
   change zoom (see contact-map.js). */
.contact-map-side {
    position: relative;
}
.contact-map {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.contact-map__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 0;
    filter: grayscale(100%) contrast(1.05) brightness(1.02);
}
.contact-map__frame.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
/* Bottom-fade overlay — 367px tall gradient from transparent → dark navy,
   layered above the map but not blocking pointer events. */
.contact-map::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 367px;
    background: transparent linear-gradient(180deg, #F5F5F500 0%, #233853 100%) 0% 0% no-repeat padding-box;
    pointer-events: none;
    z-index: 2;
}
.contact-map__controls {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.contact-map__zoom {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: #707070;
    color: var(--color-ffffff);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0px 0px 10px #00000096;
    transition: background .2s ease, transform .2s ease;
}
.contact-map__zoom:hover {
    background: var(--color-secondary);
}
.contact-map__zoom:active {
    transform: scale(.94);
}
.chat-popup {
    position: fixed;
    right: 36px;
    bottom: 36px;
    width: 510px;
    height: calc(100vh - 157px);
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

.chat-popup.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.chat-popup__window {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

.chat-popup__window iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.chat-popup__close {
    position: absolute;
    top: 0;
    left: -60px;
    width: 49px;
    height: 49px;
    border: 0;
    border-radius: 50%;
    background: var(--color-secondary);
    color: #fff;
    box-shadow: 5px 4px 6px #0000004D;
    z-index: 2;
    cursor: pointer;
}

.chat-popup__close span {
    position: absolute;
    width: 20px;
    height: 2px;
    background: currentColor;
    left: 14.5px;
    top: 23.5px;
}

.chat-popup__close span:first-child {
    transform: rotate(45deg);
}

.chat-popup__close span:last-child {
    transform: rotate(-45deg);
}
/* Up to 1499px */
@media (max-width: 1499.98px) {
    .chat-popup {
        width: 480px;
    }
    .chat-popup__close {
        width: 45px;
        height: 45px;
    }
    .chat-popup__close span {
        width: 18px;
        height: 1.5px;
        left: 13.5px;
        top: 22px;
    }
}

/* Up to 1365px */
@media (max-width: 1365.98px) {
    .chat-popup {
        width: 450px;
        height: calc(100vh - 140px);
    }
    .chat-popup__close {
        width: 42px;
        height: 42px;
        left: -55px;
    }
    .chat-popup__close span {
        width: 16px;
        left: 13px;
        top: 20.5px;
    }
}

/* Up to 1199px */
@media (max-width: 1199.98px) {
    .chat-popup {
        width: 420px;
        right: 27px;
    }
    .chat-popup__close {
        width: 40px;
        height: 40px;
        left: -50px;
    }
    .chat-popup__close span {
        width: 14px;
        left: 12px;
        top: 19px;
    }
}

/* Up to 1024px */
@media (max-width: 1024.98px) {
    .chat-popup {
        width: 400px;
        right: 25px;
        bottom: 40px;
        height: calc(100vh - 125px);
    }
    .chat-popup__close {
        width: 38px;
        height: 38px;
    }
    .chat-popup__close span {
        width: 14px;
        left: 11.5px;
        top: 18.5px;
    }
}
@media (max-width: 767.98px) {
    html.chat-open,
    body.chat-open {
        overflow: hidden;
        height: 100%;
        position: fixed;
        width: 100%;
    }
    .chat-popup {
        right: 12px;
        bottom: 35px;
        height: calc(100vh - 125px);
        z-index: 9999;
    }
}
@media (max-width: 639px) {
    .chat-popup {
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-bottom: 0;
    }

    .chat-popup__window {
        border-radius: 0;
    }

    .chat-popup__close {
        top: 11px;
        left: inherit;
        right: 16px;
        margin-left: auto;
        width: 43px;
        height: 43px;
    }
    .chat-popup__close span {
        position: absolute;
        width: 18px;
        height: 1.5px;
        background: currentColor;
        left: 12.5px;
        top: 19.5px;
    }
}
/* Responsive */

@media (prefers-reduced-motion: reduce) {
    .hero-image,
    .hero-side-top,
    .hero-side-bottom {
        animation: none;
    }
}

@media (min-width: 2000px) {
    body.home-body {
        background-size: 100%;
    }
}
@media (min-width: 1600px) {
    .tech-popup__panel[data-panel="dnv"] .tech-popup__right {
        padding-bottom: 90px;
    }
}
@media (min-width: 768px) {
    .excellence-row {
        flex-direction: row;
        align-items: stretch;
        position: relative;
    }
    .excellence-item {
        flex: 1 1 0;
        min-width: 0;
    }
    .excellence-toggle {
        height: 100%;
        min-height: 360px;
    }
    /* Panel is an absolute overlay so opening/closing does NOT reflow the
       clicked tile — the tile stays fixed in place. Panel sits on top of the
       sibling tile's slot AND extends 12px into the row gap so its edge
       touches the clicked tile's edge (no visible gap when open). */
    .excellence-panel {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        width: calc(50% + 23px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s ease, visibility .35s ease;
        z-index: 2;
        pointer-events: none;
    }
    .excellence-panel {
        overflow: hidden;
    }
    .excellence-panel-inner {
        white-space: normal;
        max-height: 100%;
        overflow-y: auto;
        padding: 28px 24px;
        scrollbar-width: thin;
        align-content: center;
        scrollbar-color: var(--color-secondary) rgba(35, 56, 83, .12);
    }
    .excellence-panel-inner::-webkit-scrollbar {
        width: 5px;
    }
    .excellence-panel-inner::-webkit-scrollbar-track {
        background: rgba(35, 56, 83, .12);
        border-radius: 3px;
    }
    .excellence-panel-inner::-webkit-scrollbar-thumb {
        background: var(--color-secondary);
        border-radius: 3px;
    }
    .excellence-panel.is-open {
        display: flex;
        align-items: stretch;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    /* Panel position mirrors the sibling tile it overlays.
       Row layout is: [tile-A][tile-B]. Opening tile-A shows its panel over
       tile-B's slot (right side); opening tile-B shows its panel over
       tile-A's slot (left side). */
    .excellence-panel[data-panel="certifications"],
    .excellence-panel[data-panel="industry"] {
        right: 0;
    }
    .excellence-panel[data-panel="engineering"],
    .excellence-panel[data-panel="global-testing"] {
        left: 0;
    }
    /* Make the covered sibling non-interactive while the panel is on top. */
    .excellence-row[data-open="certifications"] .excellence-item[data-item="engineering"],
    .excellence-row[data-open="engineering"] .excellence-item[data-item="certifications"],
    .excellence-row[data-open="industry"] .excellence-item[data-item="global-testing"],
    .excellence-row[data-open="global-testing"] .excellence-item[data-item="industry"] {
        pointer-events: none;
    }
}
@media (min-width: 992px) and (max-width: 1600px) {
    .hero-title span:last-child {
        font-size: clamp(5.4rem, 1.39rem + 6.49vw, 7.88rem);
        line-height: 1.05;
    }
}
@media (min-width: 768px) {
    body.nav-open .site-header__bar {
        opacity: 0;
        visibility: hidden;
        transition-duration: 0s;
    }
}
@media (max-width: 1599px) {
    .profile-wrap {
        padding: 100px 50px;
    }
    .track-wrap {
        padding: 0 50px 100px;
    }
    .tech-popup__right {
        padding: 180px 40px 140px;
    }
    .tech-popup__panel[data-panel="dnv"] .tech-popup__right {
        padding-top: 130px;
    }
    .contact-form-side {
        padding: 160px 40px 160px 100px;
    }
}
@media (max-width: 1499.98px) {
    .quality-dots li.slick-active button {
        width: 28px;
    }
    .profile-text {
        font-size: 15px;
        line-height: 20px;
    }
}
@media (min-width: 1280px) {
    .tech-button-icon svg {
        width: 20px;
    }
}
@media (max-width: 1365px) {
    .excellence-row {
        max-width: 70%;
    }
}
/* -------------------------------------------------------------------------
   Laptop / small-desktop intermediate step (768-1499). Fills the gap
   between the default sizes and the 1439 block so type, spacing, and
   containers don't jump abruptly on a typical 1440-wide laptop screen.
   Scoped with min-width: 768px so the completed mobile layout stays
   untouched. Values here are milder than the 1439 block so the scale
   cascades smoothly down to smaller breakpoints. */
@media (min-width: 768px) and (max-width: 1499.98px) {
    /* -------- Title clamps ---------------------------------------------
       Every title tag gets a tighter cap for laptop / small-desktop so
       type doesn't feel oversized. Each formula lands at its new max at
       1500vw and scales down to a reasonable min at 768. */
    .h1-title {
        font-size: clamp(1.375rem, 0.065rem + 2.73vw, 2.625rem);
        line-height: clamp(1.6875rem, 0.18rem + 3.14vw, 3.125rem);
    }
    .h2-title {
        font-size: clamp(1.625rem, 0.708rem + 1.91vw, 2.5rem);
        line-height: clamp(2rem, 0.95rem + 2.15vw, 3rem);
    }
    .h3-title {
        font-size: clamp(1.25rem, 0.726rem + 1.09vw, 1.75rem);
        line-height: clamp(1.5rem, 0.87rem + 1.31vw, 2.1rem);
    }
    /* Landing slider — big two-line hero title */
    .hero-title span:first-child {
        font-size: clamp(2.5rem, 1.32rem + 2.46vw, 3.625rem);
        line-height: clamp(2.8125rem, 1.435rem + 2.87vw, 4.125rem);
    }
    .hero-title span:last-child {
        font-size: clamp(4.0625rem, 1.11rem + 6.15vw, 6.875rem);
        line-height: clamp(4.375rem, 1.36rem + 6.28vw, 7.25rem);
    }
    /* Tech-wrap left column nav item ("Our Technology" links) */
    .tech-button {
        font-size: clamp(1.0625rem, 0.28rem + 1.62vw, 1.75rem);
        line-height: clamp(1.3125rem, 0.34rem + 2.02vw, 2.1rem);
    }
    /* Tech-grid tile titles */
    .tech-tile__title {
        font-size: clamp(1rem, 0.213rem + 1.64vw, 1.75rem);
    }
    /* Tech-popup right column heading */
    .tech-popup__title {
        font-size: clamp(1.375rem, 0.72rem + 1.37vw, 2rem);
    }
    /* Excellence accordion tile titles */
    .excellence-title {
        font-size: clamp(1.125rem, 0.732rem + 0.82vw, 1.5rem);
        line-height: clamp(1.375rem, 0.93rem + 0.93vw, 1.8rem);
    }
    /* Hero */
    .hero-box {
        padding: 85px 55px;
    }
    .hero-side-top,
    .hero-side-bottom {
        width: 28%;
    }
    /* About section (index) */
    .about-wrap {
        padding: 110px 0 700px;
    }
    .about-content {
        margin-left: 80px;
    }
    /* Quality section */
    .quality-box {
        padding: 38px;
    }
    .quality-content {
        padding: 40px 60px 40px 80px;
    }
    /* Tech + footer container-fluid horizontal padding */
    .tech-wrap .container-fluid {
        padding-left: 110px;
        padding-right: 110px;
    }
    .footer-wrap .container-fluid {
        padding-left: 130px;
        padding-right: 170px;
    }
    /* Excellence accordion */
    .excellence-wrap {
        padding: 140px 0 190px;
    }
    /* Tech popup */
    .tech-popup__left-content {
        padding: 150px 50px 50px;
    }
    .tech-popup__left-content .logo-wrp {
        margin-left: 60px;
    }
    .tech-popup__right {
        padding: 150px 40px 130px 60px;
    }
    .tech-popup__close {
        width: 60px;
        height: 60px;
    }
    /* Tech-grid tile caption spacing */
    .tech-tile__caption {
        top: 30px;
        left: 40px;
        right: 30px;
        gap: 20px;
    }
    /* Cert modal breathing room on shorter laptops */
    .cert-modal__slider {
        max-height: calc(100vh - 180px);
    }
    /* Contact page — narrower address column so form row doesn't overflow */
    .address-bx {
        min-width: 170px;
    }
    /* Landing slide 3 title offset */
    .slide-3 .slide-content {
        right: 180px;
    }
    /* Silencers popup — the 2-column catalog grid only collapsed to 1-col
       at ≤991, so laptop viewports (1024-1499) show 8 buttons in 2 cols
       with wildly different heights due to title wrapping. Force single
       column across the whole laptop range for a clean stacked look. */
    .tech-popup__catalogs--2col {
        grid-template-columns: 1fr;
    }
    /* Homepage tech-grid card overlay — the white card that sits on each
       .tech-media tile. Base padding is 25/45 and text is 18/24; nothing
       scales in the 1500→1199 range so the card feels chunky on laptop.
       These clamps land smoothly from desktop values at 1500 down to the
       existing 1199 override values at 768. */
    .tech-card {
        padding: clamp(1rem, 0.41rem + 1.23vw, 1.5625rem) clamp(1.5rem, 0.12rem + 2.87vw, 2.8125rem);
        gap: clamp(0.75rem, 0.23rem + 1.09vw, 1.25rem);
        left: clamp(0.75rem, 1.64vw, 1.5rem);
        right: clamp(0.75rem, 1.64vw, 1.5rem);
        bottom: clamp(0.75rem, 1.64vw, 1.5rem);
        border-radius: clamp(0.625rem, 0.35rem + 0.55vw, 1rem);
    }
    .tech-card p {
        font-size: clamp(0.875rem, 0.61rem + 0.55vw, 1.125rem);
        line-height: clamp(1.25rem, 0.99rem + 0.55vw, 1.5rem);
        max-width: clamp(280px, 100px + 12.3vw, 470px);
    }
    .tech-card-link {
        font-size: clamp(0.8125rem, 0.68rem + 0.27vw, 0.9375rem);
    }
    .tech-card-link svg {
        width: clamp(0.5rem, 0.34rem + 0.34vw, 0.75rem);
        height: auto;
    }
    /* Off-canvas sidebar nav — big nav links capped at 48px on the desktop
       clamp; tighten to 32px max at 1500 → 20px min at 768 for laptop. */
    .site-nav__link {
        font-size: clamp(1.25rem, 0.46rem + 1.64vw, 2rem);
        margin-block: 22px;
    }
    .site-nav__submenu a {
        font-size: clamp(0.875rem, 0.61rem + 0.55vw, 1.125rem);
    }
    .site-nav__submenu {
        margin-bottom: 32px;
    }
    .site-nav__submenu li+li {
        margin-top: 22px;
    }
    /* Footer body text — was fixed 18/26, scale down for laptop */
    .footer-inner {
        font-size: clamp(0.8125rem, 0.68rem + 0.27vw, 0.9375rem);
        line-height: clamp(1.125rem, 0.86rem + 0.55vw, 1.375rem);
    }
    .footer-links li+li {
        margin-top: clamp(0.75rem, 0.36rem + 0.82vw, 1.125rem);
    }
    .footer-copy {
        font-size: clamp(0.75rem, 0.62rem + 0.27vw, 0.875rem);
    }
    .footer-logo {
        max-width: 70%;
    }
    .footer-bottom {
        margin-top: clamp(40px, 21px + 1.28vw, 60px);
    }
    /* Client request: reduce the sticky 3-badge cluster (DNV pill, "SINCE
       1996" circle, "Proudly Made in Singapore" text) and the floating
       chatbot / return-to-top buttons by ~30% on laptop viewports.
       Using transform: scale() so every internal proportion (padding, gap,
       font-size, border-radius, image size) shrinks uniformly — no visual
       "empty space" pockets from mismatched percentage widths. */
    .floating-badges {
        transform: scale(0.7);
        transform-origin: bottom left;
        /* Base offset (90px) was tuned for the desktop-size cluster; scale
           it down so the shrunken cluster stays visually balanced against
           the bottom edge. */
        bottom: 60px;
    }
    .floating-actions {
        transform: scale(0.7);
        transform-origin: bottom right;
        /* Same proportional adjustment (base was right: 52px; bottom: 90px). */
        right: 35px;
        bottom: 60px;
    }
    /* Cert modal info panel — desktop values (padding: 25px; max-width:
       280px; 18/22 type) render as an oversized box on laptop viewports.
       Shrink it proportionally so it doesn't dominate the certificate. */
    .cert-modal__info {
        padding: 14px 18px;
        max-width: 200px;
        font-size: 14px;
        line-height: 18px;
    }
    .cert-modal__info-label {
        font-size: 13px;
        line-height: 17px;
        margin-bottom: 4px;
    }
    .cert-modal__info-title {
        font-size: 14px;
        line-height: 18px;
    }
}
@media (max-width: 1439px) {
    .site-nav {
        width: 70%;
    }
    .tech-wrap .container-fluid {
        padding-left: 90px;
        padding-right: 90px;
    }
    .footer-wrap .container-fluid {
        padding-left: 100px;
        padding-right: 140px;
    }
    .hero-box {
        padding: 80px 50px;
    }
    .about-wrap {
        padding: 110px 0 570px;
    }
    .contact-form-side {
        padding: 140px 40px 140px 70px;
    }
    .loader-logo {
        max-width: 70%;
    }
}
@media (max-width: 1199px) {
    :root {
        --br-40: 30px;
    }
    .mb-75 {
        margin-bottom: 50px;
    }
    .right-action {
        right: 30px;
    }
    .hero-box {
        padding: 60px 25px;
    }
    .hero-image {
        width: 80%;
    }
    .hero-side-top,
    .hero-side-bottom {
        width: 30%;
    }
    .about-wrap {
        padding: 70px 0 470px;
    }
    .tech-wrap {
        padding: 90px 0;
    }
    .lets-touch {
        padding-bottom: 150px;
    }
    .quality-box {
        padding: 35px;
    }
    .quality-content {
        padding: 0 0 0 20px;
    }
    .tech-wrap .container-fluid {
        padding-left: 60px;
        padding-right: 60px;
    }
    .footer-wrap .container-fluid {
        padding-left: 60px;
        padding-right: 80px;
    }
    .about-content {
        margin-left: 60px;
    }
    .lets-wrap {
        padding: 50px;
        gap: 40px;
    }
    .tech-card {
        padding: 20px 25px;
    }
    .tech-tile__caption {
        top: 22px;
        left: 24px;
        right: 22px;
        gap: 16px;
    }
    .tech-popup__left-content {
        padding: 150px 40px 40px;
    }
    .tech-popup__eyebrow {
        white-space: nowrap;
        min-width: 0;
        overflow: hidden;
    }
    .tech-popup__eyebrow-line {
        flex: 0 1 150px;
        width: auto;
        max-width: 150px;
        min-width: 150px;
    }
    .contact-form-inner {
        max-width: 100%;
    }
    .profile-wrap {
        padding: 80px 30px;
    }
    .track-wrap {
        padding: 0 30px 80px;
    }
    .contact-form-side {
        padding: 120px 32px 120px 40px;
    }
    .cert-modal {
        padding: 210px 20px 50px;
    }
    .cert-modal__info {
        top: 80px;
        right: 20px;
    }
    .cert-modal__slider {
        max-width: 691px;
        max-height: calc(100vh - 260px);
    }
    .cert-modal__nav {
        width: 34px;
        height: 44px;
        margin: 0 10px;
    }
    .excellence-wrap {
        padding: 100px 0 140px;
    }
    .excellence-row {
        gap: 30px;
    }
}
@media (max-width: 1024px) {
    .track-item {
        padding: 20px 0;
        font-size: 20px;
        line-height: 28px;
    }
    .tech-popup__right {
        padding: 150px 40px 140px;
    }
    .slide-3 .slide-content {
        right: auto;
        top: 60px;
        left: 13%;
    }
    body.home-body {
        background-image: url("../images/home/homepage-bg-tab.webp");
        background-position: center 110%;
    }
}
@media (max-width: 992px) {
    .loader-logo {
        margin: 0 auto 35px;
    }
    .slide-desc {
        margin-top: 15px;
        font-size: var(--fs-16);
        line-height: var(--lh-24);
    }
    .slide-1 .slide-desc {
        max-width: 220px;
    }
    .slide-2 .slide-desc {
        max-width: 250px;
    }
    .excellence-row {
        max-width: 90%;
    }
}
@media (max-width: 991.98px) {
    .slide-3 .slide-content {
        left: 25%;
    }
    .site-nav__contact {
        padding: 40px 20px;
    }
    .site-nav {
        width: 90%;
    }
    .site-nav__link {
        margin-block: 30px;
    }
    .site-nav__submenu li+li {
        margin-top: 20px;
    }
    .site-nav__submenu {
        margin-bottom: 30px;
    }
    .footer-links li+li {
        margin-top: 15px;
    }
    .tech-wrap .container-fluid {
        padding-left: 36px;
        padding-right: 36px;
    }
    .footer-wrap .container-fluid {
        padding-left: 36px;
        padding-right: 36px;
    }
    .about-content {
        margin-left: 0;
    }
    .hero-box {
        padding: 35px 50px 70px;
    }
    .hero-right {
        padding-right: 0;
        margin: 30px auto;
    }
    .hero-scroll {
        margin-top: 20px;
    }
    .hero-image {
        display: block;
        width: 78%;
        margin: 0 auto;
    }
    .hero-side-top {
        top: auto;
        bottom: -5%;
        left: 4%;
        right: auto;
        width: 34%;
    }
    .hero-side-bottom {
        top: auto;
        bottom: -7%;
        right: 4%;
        left: auto;
        width: 30%;
    }
    .quality-slider {
        min-height: 0;
    }
    .quality-slider-nav {
        top: auto;
        bottom: 20px;
        width: 100%;
    }
    .quality-content {
        padding: 40px 0;
    }
    .tech-card {
        padding: 20px 30px;
    }
    .tech-button-icon svg {
        display: block;
        opacity: .45;
        transition: transform .3s ease, opacity .3s ease;
        width: 19px;
    }
    .tech-popup__panel.is-active {
        display: block;
        overflow-y: auto;
    }
    .tech-popup {
        height: 100%;
        padding-bottom: 30px;
    }
    .tech-popup__left {
        min-height: 75vh;
    }
    .tech-popup__left-content {
        padding: 130px 32px 40px;
    }
    .tech-popup__right,
    .tech-popup__panel[data-panel="dnv"] .tech-popup__right {
        overflow-y: visible;
        padding: 40px 32px 120px;
    }
    .tech-popup__right-inner,
    .tech-popup__desc {
        max-width: 100%;
    }
    .tech-popup__catalogs--2col {
        grid-template-columns: 1fr;
    }
    .tech-popup__divider {
        margin: 32px 0;
    }
    .tech-popup__close {
        width: 50px;
        height: 50px;
        padding: 13px;
    }
    .tech-popup__eyebrow {
        margin-bottom: 10px;
    }
    .tech-popup__close:hover::after {
        width: 16px;
    }
    .contact-wrap-page {
        padding-top: 100px;
    }
    .contact-split {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .contact-form-side {
        padding: 50px 40px 80px;
        order: 1;
    }
    .contact-map-side {
        order: 2;
        min-height: 500px;
    }
    .contact-map::after {
        height: 200px;
    }
    /* Long email should wrap inside the phone/email column instead of
       overflowing into the map area next to it. */
    .contact-info__row a {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .excellence-caption {
        left: 28px;
        right: 24px;
        bottom: 32px;
        gap: 12px;
    }
    .hero-content-wrap {
        align-items: center;
        padding-bottom: 0;
        padding: 20px;
    }
    .profile-wrap {
        padding: 70px 0;
    }
    .profile-col-text {
        order: 2;
        width: fit-content;
        margin: 35px auto 0;
    }
    body.home-body {
        background-position: center 230%;
    }
}
@media (max-width: 767px) {
    .landing-loader {
        height: auto;
        min-height: auto;
    }
    .landing-bg {
        background-image: url(../images/landing-bg-mobile.webp);
    }
    .bg-pos-1 {
        background-position: 100% 0%;
    }
    .bg-pos-2 {
        background-position: 100% 10%;
    }
    .bg-pos-3 {
        background-position: 100% 25%;
    }
    .bg-pos-4 {
        background-position: 100% 55%;
    }
    .slide-desc {
        margin-top: 10px;
        font-size: 14px;
        line-height: 20px;
    }
    .slide-1 .slide-content {
        right: 30%;
        top: 150px;
        transform: none;
    }
    .slide-1 .slide-desc {
        max-width: 185px;
        display: inline-block;
    }
    .slide-2 .slide-content {
        text-align: right;
        left: 25px;
    }
    .slide-2 .slide-desc {
        max-width: 220px;
        display: inline-block;
    }
    .slide-3 .slide-content {
        right: 40px;
        top: 120px;
        width: 285px;
    }
    .loader-logo {
        margin: 0 auto 32px;
        max-width: 100%;
    }
    .site-header {
        top: 25px;
    }
    .right-action .primary-btn,
    .site-nav__contact,
    .nav-close {
        display: none;
    }
    .site-header__bar {
        z-index: 9999;
        position: relative;
        margin: 0 auto;
        padding: 10px 20px;
    }
    .right-action {
        right: 22px;
    }
    .site-nav-toggle {
        width: 25px;
        height: 18px;
    }
    .site-nav-toggle__bar {
        height: 2px;
    }
    .site-header__logo img {
        max-width: 38px;
        height: auto;
    }
    .hero-wrap {
        padding: 95px 0 70px;
    }
    .px-36 {
        padding-left: 12px;
        padding-right: 12px;
    }
    .mb-40 {
        margin-bottom: 25px;
    }
    body.home-body {
        background-image: url("../images/home/homepage-bg-mobile.webp");
        background-position: top center;
    }

    .hero-box {
        padding: 35px 30px 150px;
        border-radius: 28px;
    }
    .hero-subtitle {
        font-size: 20px;
        line-height: 24px;
        margin-top: 15px;
        margin-bottom: 7px;
    }
    .hero-title span:last-child {
        margin-top: -10px;
    }
    .hero-box .hero-text {
        font-size: 14px;
        line-height: 20px;
        max-width: 197px;
        margin: 0 auto;
        br {
            display: none;
        }
    }
    .inner-hero-wrap {
        padding: 100px 12px 50px;
    }
    .hero-content-inner .hero-info {
        font-size: 14px;
        line-height: 20px;
    }
    .primary-btn {
        font-size: 13px;
        line-height: 19px;
    }
    .hero-image {
        max-width: 214px;
    }
    .hero-side-top {
        bottom: -120px;
        left: 0;
        width: 165px;
    }
    .hero-side-bottom {
        bottom: -150px;
        right: 12px;
        width: 120px;
    }
    .about-content {
        margin-left: 0;
        padding: 0 18px;
    }
    .about-wrap {
        padding: 0 0 385px;
    }
    .about-text {
        max-width: 100%;
    }
    .quality-wrap:before {
        top: 0;
        background: linear-gradient(to top,
                #284160 0%,
                #284160 55%,
                rgba(40, 65, 96, 0) 100%);
        pointer-events: none;
    }
    .quality-box {
        padding: 20px 20px 40px;
    }
    .quality-slide-image {
        height: 377px;
    }
    .quality-slider-nav {
        top: auto;
        bottom: 20px;
    }
    .quality-content {
        padding: 26px 0 0;
        gap: 25px;
    }
    .quality-arrow {
        width: 30px;
        height: 30px;
        padding: 10px;
    }
    .quality-dots li button {
        height: 3px;
    }
    .quality-slide-image::after {
        height: 191px;
    }
    .tech-wrap {
        padding: 60px 0;
    }
    .tech-left {
        padding: 0 27px;
    }
    .tech-button {
        padding: 16px 0;
    }
    .tech-button-icon svg {
        width: 15px;
    }
    .tech-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        gap: 12px;
        padding: 16px;
    }
    .tech-card p {
        font-size: 9px;
        line-height: 13px;
        max-width: 200px;
    }
    .tech-card-link {
        font-size: 10px;
        line-height: 14px;
    }
    .tech-card-link svg {
        width: 7px;
    }
    .skip-btn {
        top: 20px;
        right: 20px;
        font-size: 12px;
        line-height: 17px;
    }
    .skip-btn-icon {
        width: 8px;
    }
    .floating-btn {
        width: 45px;
        height: 45px;
    }
    .floating-btn svg {
        width: 17px;
    }
    .floating-badges,
    .floating-actions {
        bottom: 20px;
    }
    .floating-actions {
        right: 16px;
        gap: 10px !important;
    }
    .footer-wrap {
        padding: 50px 0 0;
        border-radius: 44px 44px 0 0;
    }
    .footer-inner {
        padding: 0 40px;
        font-size: 12px;
        line-height: 17px;
    }
    .footer-address {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        align-items: end;
    }
    .footer-logo {
        max-width: 205px;
    }
    .footer-menu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px 16px;
        max-width: 100%;
        margin-left: 0;
    }
    .footer-bottom {
        padding: 16px 0;
        margin-top: 50px;
    }
    .footer-copy {
        font-size: 9px;
        line-height: 13px;
    }
    .footer-bottom a {
        font-size: 10px;
        line-height: 14px;
    }
    .about-content {
        max-width: 100%;
    }
    .tech-wrap .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
    .footer-wrap .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
    .site-nav {
        width: 100%;
        border-radius: 0;
        height: auto;
        padding: 100px 0 0;
    }
    .site-nav__footer {
        padding: 13px 45px;
        background-color: #fff;
        margin-top: 0;
    }
    .site-nav__footer a {
        color: var(--color-secondary);
        font-size: 13px;
    }
    .lets-wrap {
        padding: 60px 50px;
    }
    .lets-wrap p {
        max-width: 280px;
    }
    .site-nav-backdrop {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(7px);
    }
    .floating-badges p {
        font-size: 10px;
        line-height: 14px;
        padding: 10px 20px;
    }
    .floating-badges .img-bx:first-child {
        padding: 8px 14px 8px 19px;
        border-radius: 0 15px 15px 0;
    }
    .floating-badges .img-bx:first-child img {
        max-width: 47px;
    }
    .floating-badges .img-bx:last-child {
        width: 42px;
        height: 42px;
        img {
            max-width: 35px;
        }
    }
    .mb-75 {
        margin-bottom: 35px;
    }
    .hero-bg-wrap {
        height: calc(100vh - 150px);
    }
    .profile-wrap {
        padding: 70px 25px;
    }
    .profile-brand {
        max-width: 268px;
        margin: 0 auto 30px;
    }
    .profile-text {
        font-size: 12px;
        line-height: 17px;
    }
    .profile-col-text {
        order: 2;
        width: fit-content;
        margin: 35px auto 0;
        text-align: center;
    }
    .view-cert {
        font-size: 12px;
        line-height: 17px;
        gap: 10px;
    }
    .track-wrap {
        padding: 0 25px 80px;
    }
    .track-item {
        font-size: 13px;
        padding: 15px 0;
        line-height: 19px;
    }
    .cert-modal {
        /* Tight vertical padding so the certificate can grow to true full
           width (aspect-ratio locks height from width, so more available
           height = larger width). */
        padding: 100px 0 40px;
    }
    .cert-modal__close {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        padding: 8px;
    }
    .cert-modal__info {
        /* Shifted UP to sit level with the close X so the panel no longer
           overlaps the certificate top. right: 72px = 56px (close X: 40px
           wide + 16px right offset) + 16px breathing gap between panel
           and X. max-width prevents it from crossing under the X. */
        top: 16px;
        right: 72px;
        left: auto;
        bottom: auto;
        max-width: calc(100% - 88px);
        text-align: right;
        padding: 8px 14px;
    }
    .cert-modal__info-label {
        font-size: 14px;
        margin-bottom: 0;
        line-height: 20px;
    }
    .cert-modal__info-title {
        font-size: 14px;
    }
    /* Slider fills the full mobile viewport width — no gap on the sides. */
    .cert-modal__slider {
        max-width: 100%;
        width: 100%;
        max-height: calc(100vh - 140px);
    }
    /* Arrows overlaid on the certificate's left and right edges, centred
       vertically on the image itself. */
    .cert-modal__nav {
        position: absolute;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        z-index: 3;
        margin: 0;
    }
    .cert-modal__nav--prev {
        left: 0;
        right: auto;
        margin-left: 0;
    }
    .cert-modal__nav--next {
        left: auto;
        right: 0;
        margin-left: 0;
    }
    .excellence-wrap {
        padding: 70px 0 120px;
    }
    .excellence-scrim {
        height: 100px;
    }
    .excellence-cert-link-wrap {
        margin-top: -30px;
    }
    .excellence-caption {
        left: 20px;
        right: 16px;
        bottom: 16px;
        gap: 12px;
    }
    .excellence-row {
        gap: 25px;
        padding: 0 68px;
        margin-bottom: 25px;
        max-width: 100%;
    }
    .excellence-icon {
        width: 15px;
        height: 15px;
    }
    .excellence-icon-shaft {
        width: 21px;
    }
    .excellence-item.is-open .excellence-icon-arm-top {
        width: 21px;
    }
    .excellence-panel {
        padding: 40px 22px 20px 20px;
    }
    .excellence-panel-inner {
        padding: 0;
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-right: 14px;
        font-size: 14px;
        line-height: 17px;
    }
    .excellence-panel-inner::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
    /* Custom always-visible scrollbar (iOS hides the native one entirely) */
    .excellence-scrollbar {
        position: absolute;
        top: 40px;
        right: 10px;
        bottom: 20px;
        width: 4px;
        background: rgba(35, 56, 83, .12);
        border-radius: 3px;
        pointer-events: none;
        z-index: 5;
    }
    .excellence-scrollbar__thumb {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 4px;
        min-height: 24px;
        background: var(--color-secondary);
        border-radius: 3px;
    }
    .excellence-scrollbar.is-hidden {
        display: none;
    }
    .excellence-panel-close {
        display: block;
    }
    .excellence-item.is-open {
        display: none;
    }
    /* Mobile keeps 3 columns; XD row 1 tile is 125×319 and row 2 is 125×357. */
    .tech-tile {
        height: auto;
        aspect-ratio: 125 / 319;
    }
    .tech-tile:nth-child(n+4) {
        height: auto;
        aspect-ratio: 125 / 357;
    }
    .tech-grid-wrap {
        margin-bottom: -40px;
    }
    .tech-tile__caption {
        top: 30px;
        left: 9px;
        right: 9px;
        gap: 6px;
        align-items: flex-start;
    }
    .tech-tile__icon svg {
        stroke-width: 2px;
    }
    /* Let the title shrink and wrap so the arrow always stays inside the
       tile (long titles were pushing the icon past the right edge before). */
    .tech-tile__title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        line-height: 1.214;
        word-break: normal;
        overflow-wrap: anywhere;
    }
    .tech-tile__caption .tech-tile__icon {
        width: 10px;
        height: 10px;
        margin-bottom: 0;
        margin-top: 5px;
    }
    .tech-popup__left {
        aspect-ratio: 390 / 484;
        min-height: 0;
    }
    .tech-popup__left-content {
        padding: 110px 20px 28px;
        gap: 16px;
    }
    .tech-popup__left-content .logo-wrp {
        margin-left: 60px;
        max-width: 70px;
    }
    .tech-popup__eyebrow {
        margin-bottom: 5px;
    }
    .tech-popup__right {
        padding: 30px 30px 150px;
    }
    .tech-popup__close {
        width: 38px;
        height: 38px;
        padding: 9px;
    }
    .tech-popup__desc {
        font-size: 13px;
        line-height: 20px;
    }
    .tech-popup__eyebrow {
        font-size: 13px;
        gap: 10px;
        white-space: nowrap;
        min-width: 0;
        overflow: hidden;
    }
    .tech-popup__eyebrow-line {
        flex: 0 1 100px;
        width: auto;
        max-width: 100px;
        min-width: 100px;
    }
    .tech-popup__close::after {
        right: 13px;
    }
    .tech-popup__header {
        align-items: start;
    }
    .tech-popup__divider {
        margin: 24px 0;
    }
    .tech-popup__catalog-title {
        font-size: 22px;
        line-height: 1.227;
        margin-bottom: 18px;
    }
    .tech-popup__catalogs {
        width: 100%;

    }
    .catalog-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    .contact-wrap-page {
        padding-top: 90px;
    }
    .contact-form-side {
        padding: 40px 20px 60px;
    }
    /* Mobile map bottom overlay: 89px height, multi-stop gradient per XD. */
    .contact-map::after {
        height: 89px;
        background: linear-gradient(180deg, #F5F5F500 0%, #6B798BA6 25%, #41536ADA 55%, #2D415BF2 80%, #233853 100%) no-repeat padding-box;
        bottom: 10px;
    }
    /* Stack the address / phone / email rows only on true mobile — tablet
       and above keep the side-by-side layout so the info block stays
       compact next to the form. */
    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .address-bx {
        border-right: 0;
        border-bottom: 1px solid #9D9D9D;
        padding-bottom: 20px;
        padding-right: 0;
    }
    .contact-title {
        margin-bottom: 14px;
    }
    .contact-lede {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 24px;
    }
    .contact-input {
        padding: 6px 16px;
    }
    .contact-textarea {
        min-height: 160px;
    }
    /* .contact-submit-row {
        justify-content: stretch;
    }
    .contact-submit {
        width: 100%;
    } */
    .contact-map-side {
        min-height: 500px;
    }
}
@media (max-width: 675px) {
    .footer-menu {
        gap: 24px;
    }
}
@media (max-width: 575px) {
    .hero-content {
        border-radius: 24px;
        padding: 32px 22px;
    }
    .hero-content .h1-title {
        font-size: clamp(2rem, 7vw, 2.8rem);
    }

}
@media (max-width: 349px) {
    .hero-box {
        padding: 28px 16px;
    }
    .hero-title span:last-child {
        font-size: 3.7rem;
    }
}
/* =======================================================================
   PROPORTIONAL LAPTOP/TABLET SCALING — 7 discrete tiers (768-1499).
   Placed at the end of the file so tier-specific values override any
   earlier max-width rules within the same range. Mobile (<=767) and
   desktop (>=1500) untouched. Values scale monotonically smaller with
   viewport width, per client feedback (2026-08-11).
   ======================================================================= */

/* ============================================================
   TIER 1/7 — 1440-1499px
   Tight, tier-specific scaling for this viewport range.
   Applied AFTER all earlier blocks so it wins in the cascade.
   ============================================================ */
@media (min-width: 1440px) and (max-width: 1499.98px) {
    /* Header */
    .site-header {
        top: 28px;
    }
    .site-header__bar {
        padding: 11px 20px;
        border-radius: 24px;
    }
    .site-header__logo img {
        max-width: 54px;
        height: auto;
    }
    .right-action {
        gap: 28px;
        right: 120px;
    }
    .site-nav-toggle {
        width: 46px;
        height: 28px;
    }

    /* Type scale */
    .h1-title {
        font-size: 2.4rem;
        line-height: 2.9rem;
    }
    .h2-title {
        font-size: 2.25rem;
        line-height: 2.75rem;
    }
    .h3-title {
        font-size: 1.6rem;
        line-height: 2rem;
    }
    .hero-title span:first-child {
        font-size: 3.2rem;
        line-height: 3.6rem;
    }
    .hero-title span:last-child {
        font-size: 6rem;
        line-height: 6.4rem;
    }
    .hero-subtitle {
        font-size: 22px;
        line-height: 28px;
    }
    .hero-text {
        font-size: 14px;
        line-height: 20px;
    }

    /* Buttons */
    .primary-btn {
        font-size: 15px;
        padding: 10px 24px;
        min-width: 130px;
        line-height: 1.4;
    }

    /* Home hero */
    .hero-box {
        padding: 90px 56px;
    }
    .hero-image {
        max-height: 62vh;
        width: 100%;
        object-fit: cover;
    }
    .hero-side-top,
    .hero-side-bottom {
        width: 26%;
        right: 0;
    }
    .hero-scroll {
        margin-top: 22px;
    }
    .hero-scroll-mouse {
        width: 24px;
        height: 36px;
    }

    /* About / Quality section */
    .about-wrap {
        padding: 130px 0 720px;
    }
    .about-content p,
    .quality-content p {
        font-size: 15px;
        line-height: 23px;
    }
    .quality-box {
        padding: 36px;
    }
    .quality-content {
        padding: 40px 60px 40px 80px;
    }
    .quality-slide-image .quality-slider .quality-slide img {
        max-height: 60vh;
        object-fit: cover;
        width: 100%;
    }

    /* Container padding for tech + footer */
    .tech-wrap .container-fluid {
        padding-left: 110px;
        padding-right: 110px;
    }
    .footer-wrap .container-fluid {
        padding-left: 120px;
        padding-right: 150px;
    }

    /* Lets Get In Touch */
    .lets-touch {
        padding-bottom: 160px;
    }
    .lets-wrap {
        padding: 58px 48px;
        gap: 40px;
    }
    .contact-action a svg {
        width: 15px;
        height: auto;
    }
    .hero-content-wrap {
        padding: 40px;
    }
    .hero-content {
        width: 700px;
        max-width: 100%;
    }
    .hero-content-inner {
        max-width: 420px;
    }
    .hero-content-inner .hero-info {
        margin: 14px 0 26px;
        font-size: 15px;
        line-height: 22px;
    }

    /* Excellence (Quality page) */
    .excellence-wrap {
        padding: 150px 0 200px;
    }
    .excellence-caption {
        left: 34px;
        right: 30px;
        bottom: 34px;
    }
    .excellence-title {
        font-size: 1.4rem;
        line-height: 1.7rem;
    }

    /* Company Profile / Track Records */
    .profile-wrap {
        padding: 130px 80px 100px;
    }
    .track-wrap {
        padding: 0 80px 100px;
    }
    .track-item {
        padding: 22px 0;
        font-size: 20px;
        line-height: 28px;
    }

    /* View Certifications link */
    .view-cert {
        gap: 16px;
        font-size: 15px;
    }

    /* Cert modal */
    .cert-modal {
        padding: 130px 40px 40px;
    }
    .cert-modal__close {
        width: 48px;
        height: 48px;
    }
    .cert-modal__close svg {
        width: 26px;
        height: 26px;
    }
    .cert-modal__nav {
        width: 32px;
        height: 44px;
        margin: 0 22px;
    }
    .cert-modal__nav svg {
        width: 10px;
        height: auto;
    }
    .cert-modal__slider {
        max-height: calc(100vh - 170px);
    }

    /* Tech popup */
    .tech-popup__desc {
        font-size: 17px;
        line-height: 27px;
    }
    .tech-popup__title {
        font-size: 1.9rem;
    }
    .tech-popup__catalog-title {
        font-size: 1.6rem;
        margin-bottom: 22px;
    }
    .tech-popup__eyebrow {
        font-size: 14px;
    }
    .tech-popup__eyebrow-line {
        width: 220px;
        max-width: 220px;
        min-width: 220px;
        flex: 0 1 220px;
    }
    .tech-popup__divider {
        margin: 30px 0;
    }
    .tech-popup__left-content {
        padding: 140px 44px 44px;
    }
    .tech-popup__close {
        width: 56px;
        height: 56px;
    }
    .tech-popup__catalogs {
        gap: 14px;
    }
    .catalog-btn {
        font-size: 15px;
        padding: 9px 26px;
        gap: 14px;
        line-height: 1.35;
    }
    .catalog-btn__icon,
    .catalog-btn__icon svg {
        width: 15px;
        height: auto;
    }

    /* Contact page */
    .contact-form-side {
        padding: 130px 44px 130px 100px;
    }
    .contact-lede {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 34px;
    }
    .contact-label {
        font-size: 15px;
    }
    .contact-input {
        font-size: 15px;
    }
    .contact-submit {
        padding: 11px 30px;
        font-size: 15px;
        min-width: 150px;
    }
    .contact-info__icon {
        width: 30px;
        height: 30px;
    }
    .contact-info__icon svg {
        width: 14px;
        height: auto;
    }
    .contact-info__label {
        font-size: 15px;
        line-height: 1.35;
    }
    .contact-info__row {
        font-size: 15px;
        line-height: 22px;
    }
    .contact-info__value {
        font-size: 15px;
        line-height: 22px;
    }
    .address-bx {
        padding: 0 24px 20px 0;
        min-width: 180px;
    }

    /* Sidebar nav */
    .site-nav__link {
        font-size: 1.75rem;
        margin-block: 26px;
    }
    .site-nav__submenu a {
        font-size: 16px;
    }
    .site-nav__submenu {
        margin-bottom: 30px;
    }
    .site-nav__submenu li+li {
        margin-top: 22px;
    }

    /* Footer */
    .footer-inner {
        font-size: 15px;
        line-height: 22px;
    }
    .footer-links li+li {
        margin-top: 16px;
    }
    .footer-copy {
        font-size: 14px;
    }
    .footer-bottom {
        margin-top: 60px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* Home tech-card overlay */
    .tech-card {
        padding: 24px 40px;
        gap: 20px;
    }
    .tech-card p {
        font-size: 17px;
        line-height: 25px;
    }
    .tech-card-link {
        font-size: 14px;
    }
    .tech-card-link svg {
        width: 10px;
        height: auto;
    }

    /* Tech tile grid (product page) */
    .tech-tile__caption {
        top: 30px;
        left: 38px;
        right: 32px;
        gap: 18px;
    }
    .tech-tile__title {
        font-size: 1.6rem;
    }

    /* Floating badges + actions */
    .floating-badges {
        transform: scale(0.82);
        transform-origin: bottom left;
        bottom: 70px;
    }
    .floating-actions {
        transform: scale(0.82);
        transform-origin: bottom right;
        right: 40px;
        bottom: 70px;
    }


    /* 1. Homepage background composition */
    body.home-body {
        background-position: center -20%;
    }

    /* 2. Quality slider prev/next arrows */
    .quality-arrow {
        width: 42px;
        height: 42px;
        border-width: 2px;
    }
    .quality-arrow svg {
        width: 10px;
        height: auto;
    }
    .quality-slider-arrows {
        gap: 10px;
    }

    /* 3. Let's Get In Touch — flex parent + gap replaces per-anchor margin */
    .contact-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
    }
    .contact-action a {
        width: 40px;
        height: 40px;
        margin: 0;
    }

    /* 4. Footer disclaimer link */
    .footer-policy {
        font-size: 13px;
    }
    /* 6. Company Profile — brand block + narrow text column */
    .profile-brand {
        margin-bottom: 36px;
    }
    .profile-text {
        max-width: 580px;
    }

    /* 7. About-Quality — thumbnails smaller + popup content font tighter */
    .excellence-toggle {
        min-height: 300px;
    }
    .excellence-panel-title {
        font-size: 1.35rem;
        line-height: 1.25;
        margin-bottom: 14px;
    }
    .excellence-panel-inner {
        padding: 26px 22px;
    }
    .excellence-panel-inner p {
        font-size: 15px;
        line-height: 22px;
    }

    /* 8. Tech popup — reduce top padding on right pane */
    .tech-popup__right {
        padding: 150px 30px 110px 85px;
        padding-top: 120px;
    }
    .tech-popup__panel[data-panel="dnv"] .tech-popup__right {
        padding-top: 104px;
    }

    /* 9. Cert modal info box (200px slot) — tighter font */
    .cert-modal__info {
        max-width: 200px;
        padding: 12px 16px;
    }
    .cert-modal__info-label {
        margin-bottom: 4px;
        font-size: 14px;
        line-height: 18px;
    }
    .cert-modal__info-title {
        font-size: 13px;
        line-height: 16px;
    }
}


/* ============================================================
   TIER 2/7 — 1366-1439px
   Tight, tier-specific scaling for this viewport range.
   Applied AFTER all earlier blocks so it wins in the cascade.
   ============================================================ */
@media (min-width: 1366px) and (max-width: 1439.98px) {
    /* Header */
    .site-header {
        top: 26px;
    }
    .site-header__bar {
        padding: 10px 18px;
        border-radius: 22px;
    }
    .site-header__logo img {
        max-width: 50px;
        height: auto;
    }
    .right-action {
        gap: 26px;
        right: 105px;
    }
    .site-nav-toggle {
        width: 44px;
        height: 26px;
    }
    .inner-hero-wrap {
        padding: 130px 36px 50px;
    }

    /* Type scale */
    .h1-title {
        font-size: 2.25rem;
        line-height: 2.75rem;
    }
    .h2-title {
        font-size: 2.1rem;
        line-height: 2.6rem;
    }
    .h3-title {
        font-size: 1.55rem;
        line-height: 1.95rem;
    }
    .hero-title span:first-child {
        font-size: 3rem;
        line-height: 3.4rem;
    }
    .hero-title span:last-child {
        font-size: 5.4rem;
        line-height: 5.8rem;
    }
    .hero-subtitle {
        font-size: 20px;
        line-height: 26px;
    }
    .hero-text {
        font-size: 14px;
        line-height: 20px;
    }

    /* Buttons */
    .primary-btn {
        font-size: 15px;
        padding: 9px 22px;
        min-width: 125px;
        line-height: 1.4;
    }

    /* Home hero */
    .hero-box {
        padding: 75px 50px;
    }
    .hero-image {
        max-height: 60vh;
        width: 100%;
        object-fit: cover;
    }
    .hero-side-top,
    .hero-side-bottom {
        width: 25%;
    }
    .hero-scroll {
        margin-top: 20px;
    }
    .hero-scroll-mouse {
        width: 23px;
        height: 34px;
    }

    /* About / Quality section */
    .about-wrap {
        padding: 110px 0 610px;
    }
    .about-content p,
    .quality-content p {
        font-size: 15px;
        line-height: 23px;
    }
    .quality-box {
        padding: 34px;
    }
    .quality-content {
        padding: 36px 50px 36px 70px;
    }
    .quality-slide-image .quality-slider .quality-slide img {
        max-height: 58vh;
        object-fit: cover;
        width: 100%;
    }

    /* Container padding for tech + footer */
    .tech-wrap .container-fluid {
        padding-left: 100px;
        padding-right: 100px;
    }
    .footer-wrap .container-fluid {
        padding-left: 110px;
        padding-right: 130px;
    }

    /* Lets Get In Touch */
    .lets-touch {
        padding-bottom: 150px;
    }
    .lets-wrap {
        padding: 50px 44px;
        gap: 34px;
    }
    .contact-action a svg {
        width: 14px;
        height: auto;
    }

    .hero-content-wrap {
        padding: 36px;
    }
    .hero-content {
        width: 660px;
        max-width: 100%;
    }
    .hero-content-inner {
        max-width: 400px;
    }
    .hero-content-inner .hero-info {
        margin: 12px 0 24px;
        font-size: 14px;
        line-height: 22px;
    }

    /* Excellence (Quality page) */
    .excellence-wrap {
        padding: 130px 0 170px;
    }
    .excellence-caption {
        left: 32px;
        right: 28px;
        bottom: 32px;
    }
    .excellence-title {
        font-size: 1.35rem;
        line-height: 1.65rem;
    }

    /* Company Profile / Track Records */
    .profile-wrap {
        padding: 120px 70px 90px;
    }
    .track-wrap {
        padding: 0 70px 90px;
    }
    .track-item {
        padding: 20px 0;
        font-size: 19px;
        line-height: 26px;
    }

    /* View Certifications link */
    .view-cert {
        gap: 14px;
        font-size: 15px;
    }

    /* Cert modal */
    .cert-modal {
        padding: 110px 36px 36px;
    }
    .cert-modal__close {
        width: 44px;
        height: 44px;
    }
    .cert-modal__close svg {
        width: 24px;
        height: 24px;
    }
    .cert-modal__nav {
        width: 30px;
        height: 42px;
        margin: 0 18px;
    }
    .cert-modal__nav svg {
        width: 9px;
        height: auto;
    }
    .cert-modal__slider {
        max-height: calc(100vh - 190px);
    }

    /* Tech popup */
    .tech-popup__desc {
        font-size: 16px;
        line-height: 25px;
    }
    .tech-popup__title {
        font-size: 1.75rem;
    }
    .tech-popup__catalog-title {
        font-size: 1.55rem;
        margin-bottom: 20px;
    }
    .tech-popup__eyebrow {
        font-size: 14px;
    }
    .tech-popup__eyebrow-line {
        width: 200px;
        max-width: 200px;
        min-width: 200px;
        flex: 0 1 200px;
    }
    .tech-popup__divider {
        margin: 28px 0;
    }
    .tech-popup__left-content {
        padding: 130px 40px 40px;
    }
    .tech-popup__close {
        width: 54px;
        height: 54px;
    }
    .tech-popup__catalogs {
        gap: 12px;
    }
    .catalog-btn {
        font-size: 14px;
        padding: 8px 24px;
        gap: 12px;
        line-height: 1.35;
    }
    .catalog-btn__icon,
    .catalog-btn__icon svg {
        width: 14px;
        height: auto;
    }

    /* Contact page */
    .contact-form-side {
        padding: 120px 40px 120px 80px;
    }
    .contact-lede {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 30px;
    }
    .contact-label {
        font-size: 15px;
    }
    .contact-input {
        font-size: 15px;
    }
    .contact-submit {
        padding: 10px 28px;
        font-size: 15px;
        min-width: 140px;
    }
    .contact-info__icon {
        width: 28px;
        height: 28px;
    }
    .contact-info__icon svg {
        width: 13px;
        height: auto;
    }
    .contact-info__label {
        font-size: 14px;
        line-height: 1.35;
    }
    .contact-info__row {
        font-size: 14px;
        line-height: 21px;
    }
    .contact-info__value {
        font-size: 14px;
        line-height: 21px;
    }
    .address-bx {
        padding: 0 22px 20px 0;
        min-width: 170px;
    }

    /* Sidebar nav */
    .site-nav__link {
        font-size: 1.65rem;
        margin-block: 24px;
    }
    .site-nav__submenu a {
        font-size: 15px;
    }
    .site-nav__submenu {
        margin-bottom: 28px;
    }
    .site-nav__submenu li+li {
        margin-top: 20px;
    }

    /* Footer */
    .footer-inner {
        font-size: 14px;
        line-height: 21px;
    }
    .footer-links li+li {
        margin-top: 14px;
    }
    .footer-copy {
        font-size: 13px;
    }
    .footer-bottom {
        margin-top: 50px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* Home tech-card overlay */
    .tech-card {
        padding: 22px 36px;
        gap: 18px;
    }
    .tech-card p {
        font-size: 16px;
        line-height: 24px;
    }
    .tech-card-link {
        font-size: 14px;
    }
    .tech-card-link svg {
        width: 10px;
        height: auto;
    }

    /* Tech tile grid (product page) */
    .tech-tile__caption {
        top: 28px;
        left: 34px;
        right: 28px;
        gap: 16px;
    }
    .tech-tile__title {
        font-size: 1.5rem;
    }
    /* Floating badges + actions */
    .floating-badges {
        transform: scale(0.78);
        transform-origin: bottom left;
        bottom: 65px;
    }
    .floating-actions {
        transform: scale(0.78);
        transform-origin: bottom right;
        right: 38px;
        bottom: 65px;
    }


    /* 1. Homepage background composition */
    body.home-body {
        background-position: center -50%;
    }

    /* 2. Quality slider prev/next arrows */
    .quality-arrow {
        width: 40px;
        height: 40px;
        border-width: 2px;
    }
    .quality-arrow svg {
        width: 10px;
        height: auto;
    }
    .quality-slider-arrows {
        gap: 10px;
    }

    /* 3. Let's Get In Touch — flex parent + gap replaces per-anchor margin */
    .contact-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }
    .contact-action a {
        width: 36px;
        height: 36px;
        margin: 0;
    }

    /* 4. Footer disclaimer link */
    .footer-policy {
        font-size: 13px;
    }
    /* 6. Company Profile — brand block + narrow text column */
    .profile-brand {
        margin-bottom: 32px;
    }
    .profile-text {
        max-width: 540px;
    }

    /* 7. About-Quality — thumbnails smaller + popup content font tighter */
    .excellence-toggle {
        min-height: 280px;
    }
    .excellence-panel-title {
        font-size: 1.25rem;
        line-height: 1.25;
        margin-bottom: 13px;
    }
    .excellence-panel-inner {
        padding: 24px 20px;
    }
    .excellence-panel-inner p {
        font-size: 14px;
        line-height: 21px;
    }

    /* 8. Tech popup — reduce top padding on right pane */
    .tech-popup__right {
        padding: 130px 28px 100px 70px;
    }

    /* 9. Cert modal info box (200px slot) — tighter font */
    .cert-modal__info {
        max-width: 195px;
        padding: 11px 14px;
    }
    .cert-modal__info-label {
        margin-bottom: 4px;
        font-size: 13px;
        line-height: 17px;
    }
    .cert-modal__info-title {
        font-size: 13px;
        line-height: 16px;
    }
}


/* ============================================================
   TIER 3/7 — 1280-1365px
   Tight, tier-specific scaling for this viewport range.
   Applied AFTER all earlier blocks so it wins in the cascade.
   ============================================================ */
@media (min-width: 1280px) and (max-width: 1365.98px) {
    /* Header */
    .site-header {
        top: 24px;
    }
    .site-header__bar {
        padding: 10px 16px;
        border-radius: 22px;
    }
    .site-header__logo img {
        max-width: 46px;
        height: auto;
    }
    .right-action {
        gap: 24px;
        right: 95px;
    }
    .site-nav-toggle {
        width: 42px;
        height: 26px;
    }

    /* Type scale */
    .h1-title {
        font-size: 2.1rem;
        line-height: 2.6rem;
    }
    .h2-title {
        font-size: 1.95rem;
        line-height: 2.45rem;
    }
    .h3-title {
        font-size: 1.5rem;
        line-height: 1.85rem;
    }
    .hero-title span:first-child {
        font-size: 2.6rem;
        line-height: 3rem;
    }
    .hero-title span:last-child {
        font-size: 4.8rem;
        line-height: 5.2rem;
    }
    .hero-subtitle {
        font-size: 19px;
        line-height: 25px;
    }
    .hero-text {
        font-size: 13px;
        line-height: 19px;
    }
    .inner-hero-wrap {
        padding: 130px 36px 50px;
    }
    /* Buttons */
    .primary-btn {
        font-size: 14px;
        padding: 8px 20px;
        min-width: 120px;
        line-height: 1.4;
    }

    /* Home hero */
    .hero-box {
        padding: 60px 46px;
    }
    .hero-image {
        max-height: 58vh;
        width: 100%;
        object-fit: cover;
    }
    .hero-side-top,
    .hero-side-bottom {
        width: 24%;
    }
    .hero-scroll {
        margin-top: 18px;
    }
    .hero-scroll-mouse {
        width: 22px;
        height: 33px;
    }
    .hero-wrap {
        padding: 120px 0 0;
    }
    /* About / Quality section */
    .about-wrap {
        padding: 100px 0 540px;
    }
    .about-content p,
    .quality-content p {
        font-size: 15px;
        line-height: 22px;
    }
    .quality-box {
        padding: 30px;
    }
    .quality-content {
        padding: 32px 44px 32px 60px;
    }
    .quality-slide-image .quality-slider .quality-slide img {
        max-height: 56vh;
        object-fit: cover;
        width: 100%;
    }

    /* Container padding for tech + footer */
    .tech-wrap .container-fluid {
        padding-left: 90px;
        padding-right: 90px;
    }
    .footer-wrap .container-fluid {
        padding-left: 100px;
        padding-right: 115px;
    }

    /* Lets Get In Touch */
    .lets-touch {
        padding-bottom: 150px;
    }
    .lets-wrap {
        padding: 44px 40px;
        gap: 30px;
    }
    .contact-action a svg {
        width: 14px;
        height: auto;
    }
    .hero-content-wrap {
        padding: 32px;
    }
    .hero-content {
        width: 620px;
        max-width: 100%;
    }
    .hero-content-inner {
        max-width: 380px;
    }
    .hero-content-inner .hero-info {
        margin: 12px 0 22px;
        font-size: 14px;
        line-height: 20px;
    }

    /* Excellence (Quality page) */
    .excellence-wrap {
        padding: 120px 0 150px;
    }
    .excellence-caption {
        left: 30px;
        right: 26px;
        bottom: 30px;
    }
    .excellence-title {
        font-size: 1.25rem;
        line-height: 1.55rem;
    }

    /* Company Profile / Track Records */
    .profile-wrap {
        padding: 110px 60px 80px;
    }
    .track-wrap {
        padding: 0 60px 80px;
    }
    .track-item {
        padding: 18px 0;
        font-size: 17px;
        line-height: 24px;
    }

    /* View Certifications link */
    .view-cert {
        gap: 12px;
        font-size: 14px;
    }

    /* Cert modal */
    .cert-modal {
        padding: 96px 32px 32px;
    }
    .cert-modal__close {
        width: 40px;
        height: 40px;
    }
    .cert-modal__close svg {
        width: 22px;
        height: 22px;
    }
    .cert-modal__nav {
        width: 28px;
        height: 40px;
        margin: 0 16px;
    }
    .cert-modal__nav svg {
        width: 8px;
        height: auto;
    }
    .cert-modal__slider {
        max-height: calc(100vh - 210px);
    }

    /* Tech popup */
    .tech-popup__desc {
        font-size: 15px;
        line-height: 23px;
    }
    .tech-popup__title {
        font-size: 1.6rem;
    }
    .tech-popup__catalog-title {
        font-size: 1.45rem;
        margin-bottom: 18px;
    }
    .tech-popup__eyebrow {
        font-size: 13px;
    }
    .tech-popup__eyebrow-line {
        width: 180px;
        max-width: 180px;
        min-width: 180px;
        flex: 0 1 180px;
    }
    .tech-popup__divider {
        margin: 26px 0;
    }
    .tech-popup__left-content {
        padding: 120px 36px 36px;
    }
    .tech-popup__close {
        width: 52px;
        height: 52px;
    }
    .tech-popup__catalogs {
        gap: 12px;
    }
    .catalog-btn {
        font-size: 14px;
        padding: 8px 22px;
        gap: 12px;
        line-height: 1.35;
    }
    .catalog-btn__icon,
    .catalog-btn__icon svg {
        width: 14px;
        height: auto;
    }

    /* Contact page */
    .contact-form-side {
        padding: 108px 36px 108px 60px;
    }
    .contact-lede {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 28px;
    }
    .contact-label {
        font-size: 14px;
    }
    .contact-input {
        font-size: 14px;
    }
    .contact-submit {
        padding: 10px 26px;
        font-size: 14px;
        min-width: 130px;
    }
    .contact-info__icon {
        width: 26px;
        height: 26px;
    }
    .contact-info__icon svg {
        width: 12px;
        height: auto;
    }
    .contact-info__label {
        font-size: 14px;
        line-height: 1.35;
    }
    .contact-info__row {
        font-size: 14px;
        line-height: 20px;
    }
    .contact-info__value {
        font-size: 14px;
        line-height: 20px;
    }
    .address-bx {
        padding: 0 22px 18px 0;
        min-width: 160px;
    }

    /* Sidebar nav */
    .site-nav__link {
        font-size: 1.55rem;
        margin-block: 22px;
    }
    .site-nav__submenu a {
        font-size: 15px;
    }
    .site-nav__submenu {
        margin-bottom: 26px;
    }
    .site-nav__submenu li+li {
        margin-top: 18px;
    }

    /* Footer */
    .footer-inner {
        font-size: 14px;
        line-height: 20px;
    }
    .footer-links li+li {
        margin-top: 12px;
    }
    .footer-copy {
        font-size: 13px;
    }
    .footer-bottom {
        margin-top: 44px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* Home tech-card overlay */
    .tech-card {
        padding: 20px 32px;
        gap: 16px;
    }
    .tech-card p {
        font-size: 15px;
        line-height: 22px;
    }
    .tech-card-link {
        font-size: 13px;
    }
    .tech-card-link svg {
        width: 9px;
        height: auto;
    }

    /* Tech tile grid (product page) */
    .tech-tile__caption {
        top: 26px;
        left: 30px;
        right: 26px;
        gap: 16px;
    }
    .tech-tile__title {
        font-size: 1.4rem;
    }

    /* Floating badges + actions */
    .floating-badges {
        transform: scale(0.74);
        transform-origin: bottom left;
        bottom: 62px;
    }
    .floating-actions {
        transform: scale(0.74);
        transform-origin: bottom right;
        right: 36px;
        bottom: 62px;
    }


    /* 1. Homepage background composition */
    body.home-body {
        background-position: center -100%;
    }

    /* 2. Quality slider prev/next arrows */
    .quality-arrow {
        width: 38px;
        height: 38px;
        border-width: 2px;
    }
    .quality-arrow svg {
        width: 9px;
        height: auto;
    }
    .quality-slider-arrows {
        gap: 10px;
    }

    /* 3. Let's Get In Touch — flex parent + gap replaces per-anchor margin */
    .contact-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }
    .contact-action a {
        width: 34px;
        height: 34px;
        margin: 0;
    }

    /* 4. Footer disclaimer link */
    .footer-policy {
        font-size: 12px;
    }

    /* 6. Company Profile — brand block + narrow text column */
    .profile-brand {
        margin-bottom: 28px;
    }
    .profile-text {
        max-width: 500px;
        font-size: 15px;
        line-height: 22px;
    }

    /* 7. About-Quality — thumbnails smaller + popup content font tighter */
    .excellence-toggle {
        min-height: 260px;
    }
    .excellence-panel-title {
        font-size: 1.2rem;
        line-height: 1.25;
        margin-bottom: 12px;
    }
    .excellence-panel-inner {
        padding: 22px 18px;
    }
    .excellence-panel-inner p {
        font-size: 14px;
        line-height: 20px;
    }

    /* 8. Tech popup — reduce top padding on right pane */
    .tech-popup__right {
        padding: 130px 26px 90px 60px;
    }

    /* 9. Cert modal info box (200px slot) — tighter font */
    .cert-modal__info {
        max-width: 190px;
        padding: 10px 14px;
    }
    .cert-modal__info-label {
        margin-bottom: 4px;
        font-size: 12px;
        line-height: 16px;
    }
    .cert-modal__info-title {
        font-size: 12px;
        line-height: 15px;
    }
}


/* ============================================================
   TIER 4/7 — 1200-1279px
   Tight, tier-specific scaling for this viewport range.
   Applied AFTER all earlier blocks so it wins in the cascade.
   ============================================================ */
@media (min-width: 1200px) and (max-width: 1279.98px) {
    /* Header */
    .site-header {
        top: 22px;
    }
    .site-header__bar {
        padding: 9px 16px;
        border-radius: 20px;
    }
    .site-header__logo img {
        max-width: 42px;
        height: auto;
    }
    .inner-hero-wrap {
        padding: 120px 36px 50px;
    }
    .hero-bg-wrap {
        height: calc(100dvh - 170px);
    }
    .right-action {
        gap: 22px;
        right: 85px;
    }
    .site-nav-toggle {
        width: 40px;
        height: 24px;
    }

    /* Type scale */
    .h1-title {
        font-size: 2rem;
        line-height: 2.45rem;
    }
    .h2-title {
        font-size: 1.85rem;
        line-height: 2.3rem;
    }
    .h3-title {
        font-size: 1.4rem;
        line-height: 1.75rem;
    }
    .hero-title span:first-child {
        font-size: 2.4rem;
        line-height: 2.8rem;
    }
    .hero-title span:last-child {
        font-size: 4.2rem;
        line-height: 4.6rem;
    }
    .hero-subtitle {
        font-size: 18px;
        line-height: 24px;
    }
    .hero-text {
        font-size: 13px;
        line-height: 19px;
    }

    /* Buttons */
    .primary-btn {
        font-size: 14px;
        padding: 8px 20px;
        min-width: 118px;
        line-height: 1.4;
    }

    /* Home hero */
    .hero-box {
        padding: 50px 40px;
    }
    .hero-image {
        max-height: 54vh;
        width: 100%;
        object-fit: cover;
    }
    .hero-side-top,
    .hero-side-bottom {
        width: 23%;
        right: 0;
    }
    .hero-scroll {
        margin-top: 16px;
    }
    .hero-scroll-mouse {
        width: 21px;
        height: 32px;
    }
    .hero-wrap {
        padding: 120px 0 0;
    }
    /* About / Quality section */
    .about-wrap {
        padding: 88px 0 490px;
    }
    .about-content p,
    .quality-content p {
        font-size: 15px;
        line-height: 22px;
    }
    .quality-box {
        padding: 28px;
    }
    .quality-content {
        padding: 28px 38px 28px 50px;
    }
    .quality-slide-image .quality-slider .quality-slide img {
        max-height: 54vh;
        object-fit: cover;
        width: 100%;
    }

    /* Container padding for tech + footer */
    .tech-wrap .container-fluid {
        padding-left: 80px;
        padding-right: 80px;
    }
    .footer-wrap .container-fluid {
        padding-left: 90px;
        padding-right: 100px;
    }

    /* Lets Get In Touch */
    .lets-touch {
        padding-bottom: 150px;
    }
    .lets-wrap {
        padding: 40px 36px;
        gap: 26px;
    }
    .contact-action a svg {
        width: 13px;
        height: auto;
    }

    .hero-content-wrap {
        padding: 28px;
    }
    .hero-content {
        width: 580px;
        max-width: 100%;
    }
    .hero-content-inner {
        max-width: 360px;
    }
    .hero-content-inner .hero-info {
        margin: 12px 0 20px;
        font-size: 14px;
        line-height: 20px;
    }

    /* Excellence (Quality page) */
    .excellence-wrap {
        padding: 108px 0 138px;
    }
    .excellence-caption {
        left: 28px;
        right: 24px;
        bottom: 28px;
    }
    .excellence-title {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }

    /* Company Profile / Track Records */
    .profile-wrap {
        padding: 98px 54px 76px;
    }
    .track-wrap {
        padding: 0 54px 76px;
    }
    .track-item {
        padding: 16px 0;
        font-size: 16px;
        line-height: 22px;
    }

    /* View Certifications link */
    .view-cert {
        gap: 12px;
        font-size: 14px;
    }

    /* Cert modal */
    .cert-modal {
        padding: 88px 30px 30px;
    }
    .cert-modal__close {
        width: 38px;
        height: 38px;
    }
    .cert-modal__close svg {
        width: 20px;
        height: 20px;
    }
    .cert-modal__nav {
        width: 26px;
        height: 36px;
        margin: 0 12px;
    }
    .cert-modal__nav svg {
        width: 8px;
        height: auto;
    }
    .cert-modal__slider {
        max-height: calc(100vh - 230px);
    }

    /* Tech popup */
    .tech-popup__desc {
        font-size: 15px;
        line-height: 22px;
    }
    .tech-popup__title {
        font-size: 1.5rem;
    }
    .tech-popup__catalog-title {
        font-size: 1.4rem;
        margin-bottom: 16px;
    }
    .tech-popup__eyebrow {
        font-size: 13px;
    }
    .tech-popup__eyebrow-line {
        width: 160px;
        max-width: 160px;
        min-width: 160px;
        flex: 0 1 160px;
    }
    .tech-popup__divider {
        margin: 24px 0;
    }
    .tech-popup__left-content {
        padding: 108px 32px 32px;
    }
    .tech-popup__close {
        width: 50px;
        height: 50px;
    }
    .tech-popup__catalogs {
        gap: 10px;
    }
    .catalog-btn {
        font-size: 13px;
        padding: 8px 20px;
        gap: 10px;
        line-height: 1.35;
    }
    .catalog-btn__icon,
    .catalog-btn__icon svg {
        width: 13px;
        height: auto;
    }

    /* Contact page */
    .contact-form-side {
        padding: 96px 32px 96px 50px;
    }
    .contact-lede {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 26px;
    }
    .contact-label {
        font-size: 14px;
    }
    .contact-input {
        font-size: 14px;
    }
    .contact-submit {
        padding: 9px 24px;
        font-size: 14px;
        min-width: 120px;
    }
    .contact-info__icon {
        width: 24px;
        height: 24px;
    }
    .contact-info__icon svg {
        width: 12px;
        height: auto;
    }
    .contact-info__label {
        font-size: 13px;
        line-height: 1.35;
    }
    .contact-info__row {
        font-size: 13px;
        line-height: 19px;
    }
    .contact-info__value {
        font-size: 13px;
        line-height: 19px;
    }
    .address-bx {
        padding: 0 20px 18px 0;
        min-width: 150px;
    }

    /* Sidebar nav */
    .site-nav__link {
        font-size: 1.45rem;
        margin-block: 20px;
    }
    .site-nav__submenu a {
        font-size: 14px;
    }
    .site-nav__submenu {
        margin-bottom: 24px;
    }
    .site-nav__submenu li+li {
        margin-top: 16px;
    }

    /* Footer */
    .footer-inner {
        font-size: 13px;
        line-height: 19px;
    }
    .footer-links li+li {
        margin-top: 10px;
    }
    .footer-copy {
        font-size: 12px;
    }
    .footer-bottom {
        margin-top: 36px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* Home tech-card overlay */
    .tech-card {
        padding: 18px 28px;
        gap: 14px;
    }
    .tech-card p {
        font-size: 15px;
        line-height: 22px;
    }
    .tech-card-link {
        font-size: 13px;
    }
    .tech-card-link svg {
        width: 9px;
        height: auto;
    }

    /* Tech tile grid (product page) */
    .tech-tile__caption {
        top: 24px;
        left: 26px;
        right: 24px;
        gap: 14px;
    }
    .tech-tile__title {
        font-size: 1.3rem;
    }

    /* Floating badges + actions */
    .floating-badges {
        transform: scale(0.7);
        transform-origin: bottom left;
        bottom: 58px;
    }
    .floating-actions {
        transform: scale(0.7);
        transform-origin: bottom right;
        right: 34px;
        bottom: 58px;
    }


    /* 1. Homepage background composition */
    body.home-body {
        background-position: center -250%;
    }

    /* 2. Quality slider prev/next arrows */
    .quality-arrow {
        width: 36px;
        height: 36px;
        border-width: 1.5px;
    }
    .quality-arrow svg {
        width: 9px;
        height: auto;
    }
    .quality-slider-arrows {
        gap: 10px;
    }

    /* 3. Let's Get In Touch — flex parent + gap replaces per-anchor margin */
    .contact-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }
    .contact-action a {
        width: 32px;
        height: 32px;
        margin: 0;
    }

    /* 4. Footer disclaimer link */
    .footer-policy {
        font-size: 12px;
    }


    /* 6. Company Profile — brand block + narrow text column */
    .profile-brand {
        margin-bottom: 26px;
    }
    .profile-text {
        max-width: 460px;
        font-size: 14px;
        line-height: 21px;
    }

    /* 7. About-Quality — thumbnails smaller + popup content font tighter */
    .excellence-toggle {
        min-height: 240px;
    }
    .excellence-panel-title {
        font-size: 1.15rem;
        line-height: 1.25;
        margin-bottom: 12px;
    }
    .excellence-panel-inner {
        padding: 20px 16px;
    }
    .excellence-panel-inner p {
        font-size: 13px;
        line-height: 20px;
    }

    /* 8. Tech popup — reduce top padding on right pane */
    .tech-popup__right {
        padding: 110px 24px 78px 50px;
    }
    .tech-popup__panel[data-panel="dnv"] .tech-popup__right {
        padding-top: 110px;
    }

    /* 9. Cert modal info box (200px slot) — tighter font */
    .cert-modal__info {
        max-width: 180px;
        padding: 10px 12px;
    }
    .cert-modal__info-label {
        margin-bottom: 4px;
        font-size: 12px;
        line-height: 15px;
    }
    .cert-modal__info-title {
        font-size: 12px;
        line-height: 15px;
    }
}


/* ============================================================
   TIER 5/7 — 1025-1199px
   Tight, tier-specific scaling for this viewport range.
   Applied AFTER all earlier blocks so it wins in the cascade.
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1199.98px) {
    /* Header */
    .site-header {
        top: 20px;
    }
    .site-header__bar {
        padding: 9px 14px;
        border-radius: 20px;
    }
    .site-header__logo img {
        max-width: 40px;
        height: auto;
    }
    .inner-hero-wrap {
        padding: 120px 36px 50px;
    }
    .hero-bg-wrap {
        height: calc(100dvh - 170px);
    }
    .right-action {
        gap: 20px;
        right: 70px;
    }
    .site-nav-toggle {
        width: 38px;
        height: 23px;
    }

    /* Type scale */
    .h1-title {
        font-size: 1.85rem;
        line-height: 2.3rem;
    }
    .h2-title {
        font-size: 1.7rem;
        line-height: 2.15rem;
    }
    .h3-title {
        font-size: 1.3rem;
        line-height: 1.65rem;
    }
    .hero-title span:first-child {
        font-size: 2.1rem;
        line-height: 2.5rem;
    }
    .hero-title span:last-child {
        font-size: 3.7rem;
        line-height: 4.1rem;
    }
    .hero-subtitle {
        font-size: 17px;
        line-height: 22px;
    }
    .hero-text {
        font-size: 13px;
        line-height: 18px;
    }

    /* Buttons */
    .primary-btn {
        font-size: 13px;
        padding: 7px 18px;
        min-width: 108px;
        line-height: 1.4;
    }

    /* Home hero */
    .hero-box {
        padding: 40px 34px;
    }
    .hero-image {
        max-height: 52vh;
        width: 100%;
        object-fit: cover;
    }

    .hero-scroll {
        margin-top: 14px;
    }
    .hero-scroll-mouse {
        width: 20px;
        height: 30px;
    }
    .hero-side-top,
    .hero-side-bottom {
        right: 0;
    }

    .hero-wrap {
        padding: 120px 0 0;
    }
    /* About / Quality section */
    .about-wrap {
        padding: 78px 0 450px;
    }
    .about-content p,
    .quality-content p {
        font-size: 14px;
        line-height: 21px;
    }
    .quality-box {
        padding: 24px;
    }
    .quality-content {
        padding: 24px 32px 24px 40px;
    }
    .quality-slide-image .quality-slider .quality-slide img {
        max-height: 52vh;
        object-fit: cover;
        width: 100%;
    }

    /* Container padding for tech + footer */
    .tech-wrap .container-fluid {
        padding-left: 70px;
        padding-right: 70px;
    }
    .footer-wrap .container-fluid {
        padding-left: 80px;
        padding-right: 85px;
    }

    /* Lets Get In Touch */
    .lets-touch {
        padding-bottom: 140px;
    }
    .lets-wrap {
        padding: 36px 32px;
        gap: 22px;
    }
    .contact-action a svg {
        width: 12px;
        height: auto;
    }

    .hero-content-wrap {
        padding: 26px;
    }
    .hero-content {
        width: 520px;
        max-width: 100%;
    }
    .hero-content-inner {
        max-width: 340px;
    }
    .hero-content-inner .hero-info {
        margin: 10px 0 18px;
        font-size: 13px;
        line-height: 19px;
    }

    /* Excellence (Quality page) */
    .excellence-wrap {
        padding: 96px 0 122px;
    }
    .excellence-caption {
        left: 26px;
        right: 22px;
        bottom: 26px;
    }
    .excellence-title {
        font-size: 1.1rem;
        line-height: 1.4rem;
    }

    /* Company Profile / Track Records */
    .profile-wrap {
        padding: 86px 48px 68px;
    }
    .track-wrap {
        padding: 0 48px 68px;
    }
    .track-item {
        padding: 14px 0;
        font-size: 15px;
        line-height: 21px;
    }

    /* View Certifications link */
    .view-cert {
        gap: 10px;
        font-size: 13px;
    }

    /* Cert modal */
    .cert-modal {
        padding: 78px 26px 26px;
    }
    .cert-modal__close {
        width: 34px;
        height: 34px;
    }
    .cert-modal__close svg {
        width: 20px;
        height: 20px;
    }
    .cert-modal__nav {
        width: 26px;
        height: 36px;
        margin: 0 10px;
    }
    .cert-modal__nav svg {
        width: 7px;
        height: auto;
    }
    .cert-modal__slider {
        max-height: calc(100vh - 250px);
    }

    /* Tech popup */
    .tech-popup__desc {
        font-size: 14px;
        line-height: 22px;
    }
    .tech-popup__title {
        font-size: 1.4rem;
    }
    .tech-popup__catalog-title {
        font-size: 1.3rem;
        margin-bottom: 14px;
    }
    .tech-popup__eyebrow {
        font-size: 12px;
    }
    .tech-popup__eyebrow-line {
        width: 140px;
        max-width: 140px;
        min-width: 140px;
        flex: 0 1 140px;
    }
    .tech-popup__divider {
        margin: 22px 0;
    }
    .tech-popup__left-content {
        padding: 96px 30px 30px;
    }
    .tech-popup__close {
        width: 48px;
        height: 48px;
    }
    .tech-popup__catalogs {
        gap: 10px;
    }
    .catalog-btn {
        font-size: 13px;
        padding: 7px 18px;
        gap: 10px;
        line-height: 1.35;
    }
    .catalog-btn__icon,
    .catalog-btn__icon svg {
        width: 13px;
        height: auto;
    }

    /* Contact page */
    .contact-form-side {
        padding: 84px 30px 84px 44px;
    }
    .contact-lede {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 24px;
    }
    .contact-label {
        font-size: 14px;
    }
    .contact-input {
        font-size: 14px;
    }
    .contact-submit {
        padding: 8px 22px;
        font-size: 13px;
        min-width: 110px;
    }
    .contact-info__icon {
        width: 22px;
        height: 22px;
    }
    .contact-info__icon svg {
        width: 11px;
        height: auto;
    }
    .contact-info__label {
        font-size: 13px;
        line-height: 1.35;
    }
    .contact-info__row {
        font-size: 13px;
        line-height: 19px;
    }
    .contact-info__value {
        font-size: 13px;
        line-height: 19px;
    }
    .address-bx {
        padding: 0 18px 16px 0;
        min-width: 140px;
    }

    /* Sidebar nav */
    .site-nav__link {
        font-size: 1.35rem;
        margin-block: 18px;
    }
    .site-nav__submenu a {
        font-size: 14px;
    }
    .site-nav__submenu {
        margin-bottom: 22px;
    }
    .site-nav__submenu li+li {
        margin-top: 14px;
    }

    /* Footer */
    .footer-inner {
        font-size: 13px;
        line-height: 19px;
    }
    .footer-links li+li {
        margin-top: 10px;
    }
    .footer-copy {
        font-size: 12px;
    }
    .footer-bottom {
        margin-top: 30px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* Home tech-card overlay */
    .tech-card {
        padding: 16px 24px;
        gap: 12px;
    }
    .tech-card p {
        font-size: 14px;
        line-height: 20px;
    }
    .tech-card-link {
        font-size: 12px;
    }
    .tech-card-link svg {
        width: 8px;
        height: auto;
    }

    /* Tech tile grid (product page) */
    .tech-tile__caption {
        top: 22px;
        left: 24px;
        right: 22px;
        gap: 14px;
    }
    .tech-tile__title {
        font-size: 1.2rem;
    }

    /* Floating badges + actions */
    .floating-badges {
        transform: scale(0.66);
        transform-origin: bottom left;
        bottom: 52px;
    }
    .floating-actions {
        transform: scale(0.66);
        transform-origin: bottom right;
        right: 30px;
        bottom: 52px;
    }


    /* 1. Homepage background composition */
    body.home-body {
        background-position: center 251%;
    }

    /* 2. Quality slider prev/next arrows */
    .quality-arrow {
        width: 34px;
        height: 34px;
        border-width: 1.5px;
    }
    .quality-arrow svg {
        width: 8px;
        height: auto;
    }
    .quality-slider-arrows {
        gap: 10px;
    }

    /* 3. Let's Get In Touch — flex parent + gap replaces per-anchor margin */
    .contact-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
    .contact-action a {
        width: 30px;
        height: 30px;
        margin: 0;
    }

    /* 4. Footer disclaimer link */
    .footer-policy {
        font-size: 11px;
    }


    /* 6. Company Profile — brand block + narrow text column */
    .profile-brand {
        margin-bottom: 22px;
    }
    .profile-text {
        max-width: 420px;
        font-size: 14px;
        line-height: 21px;
    }

    /* 7. About-Quality — thumbnails smaller + popup content font tighter */
    .excellence-toggle {
        min-height: 220px;
    }
    .excellence-panel-title {
        font-size: 1.1rem;
        line-height: 1.25;
        margin-bottom: 10px;
    }
    .excellence-panel-inner {
        padding: 18px 14px;
    }
    .excellence-panel-inner p {
        font-size: 13px;
        line-height: 19px;
    }

    /* 8. Tech popup — reduce top padding on right pane */
    .tech-popup__right {
        padding: 100px 22px 72px 44px;
    }
    .tech-popup__panel[data-panel="dnv"] .tech-popup__right {
        padding-top: 100px;
    }

    /* 9. Cert modal info box (200px slot) — tighter font */
    .cert-modal__info {
        max-width: 170px;
        padding: 9px 12px;
    }
    .cert-modal__info-label {
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 14px;
    }
    .cert-modal__info-title {
        font-size: 11px;
        line-height: 14px;
    }
}


/* ============================================================
   TIER 6/7 — 821-1024px
   Tight, tier-specific scaling for this viewport range.
   Applied AFTER all earlier blocks so it wins in the cascade.
   ============================================================ */
@media (min-width: 821px) and (max-width: 1024.98px) {
    /* Header */
    .site-header {
        top: 18px;
    }
    .site-header__bar {
        padding: 8px 14px;
        border-radius: 18px;
    }
    .site-header__logo img {
        max-width: 38px;
        height: auto;
    }
    .inner-hero-wrap {
        padding: 110px 36px 50px;
    }
    .hero-bg-wrap {
        height: calc(100dvh - 160px);
    }
    .right-action {
        gap: 18px;
        right: 60px;
    }
    .site-nav-toggle {
        width: 36px;
        height: 22px;
    }

    /* Type scale */
    .h1-title {
        font-size: 1.7rem;
        line-height: 2.15rem;
    }
    .h2-title {
        font-size: 1.55rem;
        line-height: 2rem;
    }
    .h3-title {
        font-size: 1.25rem;
        line-height: 1.6rem;
    }
    .hero-title span:first-child {
        font-size: 1.85rem;
        line-height: 2.25rem;
    }
    .hero-title span:last-child {
        font-size: 3.3rem;
        line-height: 3.7rem;
    }
    .hero-subtitle {
        font-size: 16px;
        line-height: 21px;
    }
    .hero-text {
        font-size: 12px;
        line-height: 18px;
    }

    /* Buttons */
    .primary-btn {
        font-size: 13px;
        padding: 7px 16px;
        min-width: 100px;
        line-height: 1.4;
    }

    /* Home hero */
    .hero-box {
        padding: 34px 28px;
    }
    .hero-image {
        max-height: 50vh;
        object-fit: cover;
    }
    .hero-side-top,
    .hero-side-bottom {
        width: 21%;
    }
    .hero-scroll {
        margin-top: 12px;
    }
    .hero-scroll-mouse {
        width: 19px;
        height: 28px;
    }
    .hero-wrap {
        padding: 100px 0 0;
    }
    /* About / Quality section */
    .about-wrap {
        padding: 68px 0 400px;
    }
    .about-content p,
    .quality-content p {
        font-size: 14px;
        line-height: 20px;
    }
    .quality-box {
        padding: 22px;
    }
    .quality-content {
        padding: 22px 28px 22px 32px;
    }
    .quality-slide-image .quality-slider .quality-slide img {
        max-height: 50vh;
        object-fit: cover;
        width: 100%;
    }

    /* Container padding for tech + footer */
    .tech-wrap .container-fluid {
        padding-left: 60px;
        padding-right: 60px;
    }
    .footer-wrap .container-fluid {
        padding-left: 60px;
        padding-right: 70px;
    }

    /* Lets Get In Touch */
    .lets-touch {
        padding-bottom: 140px;
    }
    .lets-wrap {
        padding: 32px 28px;
        gap: 20px;
    }
    .contact-action a svg {
        width: 12px;
        height: auto;
    }

    .hero-content-wrap {
        padding: 24px;
    }
    .hero-content {
        width: 480px;
        max-width: 100%;
    }
    .hero-content-inner {
        max-width: 320px;
    }
    .hero-content-inner .hero-info {
        margin: 10px 0 16px;
        font-size: 13px;
        line-height: 18px;
    }

    /* Excellence (Quality page) */
    .excellence-wrap {
        padding: 86px 0 108px;
    }
    .excellence-caption {
        left: 24px;
        right: 20px;
        bottom: 24px;
    }
    .excellence-title {
        font-size: 1.05rem;
        line-height: 1.35rem;
    }

    /* Company Profile / Track Records */
    .profile-wrap {
        padding: 74px 40px 60px;
    }
    .track-wrap {
        padding: 0 40px 60px;
    }
    .track-item {
        padding: 12px 0;
        font-size: 14px;
        line-height: 20px;
    }

    /* View Certifications link */
    .view-cert {
        gap: 10px;
        font-size: 13px;
    }

    /* Cert modal */
    .cert-modal {
        padding: 68px 22px 22px;
    }
    .cert-modal__close {
        width: 32px;
        height: 32px;
    }
    .cert-modal__close svg {
        width: 18px;
        height: 18px;
    }
    .cert-modal__nav {
        width: 24px;
        height: 34px;
        margin: 0 8px;
    }
    .cert-modal__nav svg {
        width: 7px;
        height: auto;
    }
    .cert-modal__slider {
        max-height: calc(100vh - 270px);
    }

    /* Tech popup */
    .tech-popup__desc {
        font-size: 14px;
        line-height: 20px;
    }
    .tech-popup__title {
        font-size: 1.3rem;
    }
    .tech-popup__catalog-title {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }
    .tech-popup__eyebrow {
        font-size: 12px;
    }
    .tech-popup__eyebrow-line {
        width: 120px;
        max-width: 120px;
        min-width: 120px;
        flex: 0 1 120px;
    }
    .tech-popup__divider {
        margin: 20px 0;
    }
    .tech-popup__left-content {
        padding: 84px 28px 28px;
    }
    .tech-popup__close {
        width: 46px;
        height: 46px;
    }
    .tech-popup__catalogs {
        gap: 10px;
    }
    .catalog-btn {
        font-size: 12px;
        padding: 6px 16px;
        gap: 10px;
        line-height: 1.35;
    }
    .catalog-btn__icon,
    .catalog-btn__icon svg {
        width: 12px;
        height: auto;
    }
    .contact-lede {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 22px;
    }
    .contact-label {
        font-size: 13px;
    }
    .contact-input {
        font-size: 13px;
    }
    .contact-submit {
        padding: 8px 20px;
        font-size: 13px;
        min-width: 104px;
    }
    .contact-info__icon {
        width: 20px;
        height: 20px;
    }
    .contact-info__icon svg {
        width: 10px;
        height: auto;
    }
    .contact-info__label {
        font-size: 12px;
        line-height: 1.35;
    }
    .contact-info__row {
        font-size: 12px;
        line-height: 18px;
    }
    .contact-info__value {
        font-size: 12px;
        line-height: 18px;
    }
    .address-bx {
        padding: 0 16px 14px 0;
        min-width: 130px;
    }

    /* Sidebar nav */
    .site-nav__link {
        font-size: 1.25rem;
        margin-block: 16px;
    }
    .site-nav__submenu a {
        font-size: 13px;
    }
    .site-nav__submenu {
        margin-bottom: 20px;
    }
    .site-nav__submenu li+li {
        margin-top: 12px;
    }

    /* Footer */
    .footer-inner {
        font-size: 12px;
        line-height: 18px;
    }
    .footer-links li+li {
        margin-top: 8px;
    }
    .footer-copy {
        font-size: 12px;
    }
    .footer-bottom {
        margin-top: 26px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* Home tech-card overlay */
    .tech-card {
        padding: 14px 20px;
        gap: 12px;
    }
    .tech-card p {
        font-size: 13px;
        line-height: 19px;
    }
    .tech-card-link {
        font-size: 12px;
    }
    .tech-card-link svg {
        width: 8px;
        height: auto;
    }

    /* Tech tile grid (product page) */
    .tech-tile__caption {
        top: 20px;
        left: 22px;
        right: 20px;
        gap: 12px;
    }
    .tech-tile__title {
        font-size: 1.1rem;
    }
    /* Floating badges + actions */
    .floating-badges {
        transform: scale(0.62);
        transform-origin: bottom left;
        bottom: 48px;
    }
    .floating-actions {
        transform: scale(0.62);
        transform-origin: bottom right;
        right: 28px;
        bottom: 48px;
    }

    /* 2. Quality slider prev/next arrows */
    .quality-arrow {
        width: 32px;
        height: 32px;
        border-width: 1.5px;
    }
    .quality-arrow svg {
        width: 8px;
        height: auto;
    }
    .quality-slider-arrows {
        gap: 10px;
    }

    /* 3. Let's Get In Touch — flex parent + gap replaces per-anchor margin */
    .contact-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
    .contact-action a {
        width: 28px;
        height: 28px;
        margin: 0;
    }

    /* 4. Footer disclaimer link */
    .footer-policy {
        font-size: 11px;
    }


    /* 6. Company Profile — brand block + narrow text column */
    .profile-brand {
        margin-bottom: 20px;
    }
    .profile-text {
        font-size: 14px;
        line-height: 21px;
    }

    /* 7. About-Quality — thumbnails smaller + popup content font tighter */
    .excellence-toggle {
        min-height: 200px;
    }
    .excellence-panel-title {
        font-size: 1.05rem;
        line-height: 1.25;
        margin-bottom: 10px;
    }
    .excellence-panel-inner {
        padding: 16px 12px;
    }
    .excellence-panel-inner p {
        font-size: 12px;
        line-height: 18px;
    }

    /* 8. Tech popup — reduce top padding on right pane */
    .tech-popup__right {
        padding: 90px 20px 66px 36px;
    }
    .tech-popup__panel[data-panel="dnv"] .tech-popup__right {
        padding-top: 60px;
    }

    /* 9. Cert modal info box (200px slot) — tighter font */
    .cert-modal__info {
        max-width: 160px;
        padding: 8px 10px;
    }
    .cert-modal__info-label {
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 14px;
    }
    .cert-modal__info-title {
        font-size: 11px;
        line-height: 14px;
    }
    .mb-40 {
        margin-bottom: 30px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .tech-popup__right,
    .tech-popup__panel[data-panel="dnv"] .tech-popup__right {
        overflow-y: visible;
        padding: 40px 32px 120px;
    }
}
/* ============================================================
   TIER 7/7 — 768-820px
   Tight, tier-specific scaling for this viewport range.
   Applied AFTER all earlier blocks so it wins in the cascade.
   ============================================================ */
@media (min-width: 768px) and (max-width: 820.98px) {
    .mb-40 {
        margin-bottom: 30px;
    }
    /* Header */
    .site-header {
        top: 16px;
    }
    .site-header__bar {
        padding: 8px 12px;
        border-radius: 18px;
    }
    .site-header__logo img {
        max-width: 36px;
        height: auto;
    }
    .inner-hero-wrap {
        padding: 100px 36px 50px;
    }
    .hero-bg-wrap {
        height: calc(100dvh - 150px);
    }
    .right-action {
        gap: 16px;
        right: 50px;
    }
    .site-nav-toggle {
        width: 34px;
        height: 22px;
    }

    /* Type scale */
    .h1-title {
        font-size: 1.55rem;
        line-height: 2rem;
    }
    .h2-title {
        font-size: 1.45rem;
        line-height: 1.85rem;
    }
    .h3-title {
        font-size: 1.2rem;
        line-height: 1.55rem;
    }
    .hero-title span:first-child {
        font-size: 1.65rem;
        line-height: 2.05rem;
    }
    .hero-title span:last-child {
        font-size: 2.9rem;
        line-height: 3.3rem;
    }
    .hero-subtitle {
        font-size: 15px;
        line-height: 20px;
    }
    .hero-text {
        font-size: 12px;
        line-height: 17px;
    }

    /* Buttons */
    .primary-btn {
        font-size: 12px;
        padding: 7px 14px;
        min-width: 92px;
        line-height: 1.4;
    }

    /* Home hero */
    .hero-box {
        padding: 28px 24px;
        padding: 35px 30px 150px;
    }
    .hero-side-top {
        bottom: -120px;
        left: 0;
        width: 165px;
    }
    .hero-side-bottom {
        bottom: -150px;
        right: 12px;
        width: 120px;
    }
    .hero-image {
        max-height: 48vh;
        object-fit: cover;
    }
    .hero-side-top,
    .hero-side-bottom {
        width: 20%;
    }
    .hero-scroll {
        margin-top: 10px;
    }
    .hero-scroll-mouse {
        width: 18px;
        height: 26px;
    }
    .hero-wrap {
        padding: 100px 0 0;
    }
    /* About / Quality section */
    .about-wrap {
        padding: 60px 0 360px;
    }
    .about-content p,
    .quality-content p {
        font-size: 13px;
        line-height: 19px;
    }
    .quality-box {
        padding: 20px;
    }
    .quality-content {
        padding: 20px 24px 20px 26px;
    }
    .quality-slide-image .quality-slider .quality-slide img {
        max-height: 48vh;
        object-fit: cover;
        width: 100%;
    }

    /* Container padding for tech + footer */
    .tech-wrap .container-fluid {
        padding-left: 50px;
        padding-right: 50px;
    }
    .footer-wrap .container-fluid {
        padding-left: 48px;
        padding-right: 56px;
    }

    /* Lets Get In Touch */
    .lets-touch {
        padding-bottom: 140px;
    }
    .lets-wrap {
        padding: 28px 24px;
        gap: 18px;
    }
    .contact-action a svg {
        width: 11px;
        height: auto;
    }

    .hero-content-wrap {
        padding: 22px;
    }
    .hero-content {
        width: 440px;
        max-width: 100%;
    }
    .hero-content-inner {
        max-width: 300px;
    }
    .hero-content-inner .hero-info {
        margin: 8px 0 14px;
        font-size: 12px;
        line-height: 18px;
    }

    /* Excellence (Quality page) */
    .excellence-wrap {
        padding: 76px 0 94px;
    }
    .excellence-caption {
        left: 22px;
        right: 18px;
        bottom: 22px;
    }
    .excellence-title {
        font-size: 1rem;
        line-height: 1.3rem;
    }

    /* Company Profile / Track Records */
    .profile-wrap {
        padding: 62px 32px 52px;
    }
    .track-wrap {
        padding: 0 32px 52px;
    }
    .track-item {
        padding: 10px 0;
        font-size: 13px;
        line-height: 19px;
    }

    /* View Certifications link */
    .view-cert {
        gap: 10px;
        font-size: 12px;
    }

    /* Cert modal */
    .cert-modal {
        padding: 58px 18px 18px;
    }
    .cert-modal__close {
        width: 30px;
        height: 30px;
    }
    .cert-modal__close svg {
        width: 18px;
        height: 18px;
    }
    .cert-modal__nav {
        width: 22px;
        height: 32px;
        margin: 0 6px;
    }
    .cert-modal__nav svg {
        width: 6px;
        height: auto;
    }
    .cert-modal__slider {
        max-height: calc(100vh - 290px);
    }

    /* Tech popup */
    .tech-popup__desc {
        font-size: 13px;
        line-height: 19px;
    }
    .tech-popup__title {
        font-size: 1.2rem;
    }
    .tech-popup__catalog-title {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    .tech-popup__eyebrow {
        font-size: 11px;
    }
    .tech-popup__eyebrow-line {
        width: 100px;
        max-width: 100px;
        min-width: 100px;
        flex: 0 1 100px;
    }
    .tech-popup__divider {
        margin: 18px 0;
    }
    .tech-popup__left-content {
        padding: 72px 24px 24px;
    }
    .tech-popup__close {
        width: 44px;
        height: 44px;
    }
    .tech-popup__catalogs {
        gap: 8px;
    }
    .catalog-btn {
        font-size: 12px;
        padding: 6px 14px;
        gap: 8px;
        line-height: 1.35;
    }
    .catalog-btn__icon,
    .catalog-btn__icon svg {
        width: 12px;
        height: auto;
    }

    /* Contact page */
    .contact-lede {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 20px;
    }
    .contact-label {
        font-size: 13px;
    }
    .contact-input {
        font-size: 13px;
    }
    .contact-submit {
        padding: 7px 18px;
        font-size: 12px;
        min-width: 96px;
    }
    .contact-info__icon {
        width: 18px;
        height: 18px;
    }
    .contact-info__icon svg {
        width: 10px;
        height: auto;
    }
    .contact-info__label {
        font-size: 12px;
        line-height: 1.35;
    }
    .contact-info__row {
        font-size: 12px;
        line-height: 18px;
    }
    .contact-info__value {
        font-size: 12px;
        line-height: 18px;
    }
    .address-bx {
        padding: 0 14px 12px 0;
        min-width: 120px;
    }

    /* Sidebar nav */
    .site-nav__link {
        font-size: 1.15rem;
        margin-block: 14px;
    }
    .site-nav__submenu a {
        font-size: 13px;
    }
    .site-nav__submenu {
        margin-bottom: 18px;
    }
    .site-nav__submenu li+li {
        margin-top: 12px;
    }

    /* Footer */
    .footer-inner {
        font-size: 12px;
        line-height: 17px;
    }
    .footer-links li+li {
        margin-top: 8px;
    }
    .footer-copy {
        font-size: 11px;
    }
    .footer-bottom {
        margin-top: 22px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* Home tech-card overlay */
    .tech-card {
        padding: 12px 18px;
        gap: 10px;
    }
    .tech-card p {
        font-size: 13px;
        line-height: 18px;
    }
    .tech-card-link {
        font-size: 11px;
    }
    .tech-card-link svg {
        width: 7px;
        height: auto;
    }

    /* Tech tile grid (product page) */
    .tech-tile__caption {
        top: 18px;
        left: 20px;
        right: 18px;
        gap: 10px;
    }
    .tech-tile__title {
        font-size: 1rem;
    }

    /* Floating badges + actions */
    .floating-badges {
        transform: scale(0.58);
        transform-origin: bottom left;
        bottom: 44px;
    }
    .floating-actions {
        transform: scale(0.58);
        transform-origin: bottom right;
        right: 26px;
        bottom: 44px;
    }
    /* 2. Quality slider prev/next arrows */
    .quality-arrow {
        width: 30px;
        height: 30px;
        border-width: 1.5px;
    }
    .quality-arrow svg {
        width: 7px;
        height: auto;
    }
    .quality-slider-arrows {
        gap: 10px;
    }

    /* 3. Let's Get In Touch — flex parent + gap replaces per-anchor margin */
    .contact-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .contact-action a {
        width: 26px;
        height: 26px;
        margin: 0;
    }

    /* 4. Footer disclaimer link */
    .footer-policy {
        font-size: 11px;
    }


    /* 6. Company Profile — brand block + narrow text column */
    .profile-brand {
        margin-bottom: 18px;
    }
    .profile-text {
        font-size: 14px;
        line-height: 21px;
    }

    /* 7. About-Quality — thumbnails smaller + popup content font tighter */
    .excellence-toggle {
        min-height: 180px;
    }
    .excellence-panel-title {
        font-size: 1rem;
        line-height: 1.25;
        margin-bottom: 10px;
    }
    .excellence-panel-inner {
        padding: 14px 10px;
    }
    .excellence-panel-inner p {
        font-size: 12px;
        line-height: 18px;
    }

    /* 8. Tech popup — reduce top padding on right pane */
    .tech-popup__right {
        padding: 66px 18px 60px 32px;
        padding-top: 58px;
    }
    .tech-popup__panel[data-panel="dnv"] .tech-popup__right {
        padding-top: 54px;
    }

    /* 9. Cert modal info box (200px slot) — tighter font */
    .cert-modal__info {
        max-width: 150px;
        padding: 8px 10px;
    }
    .cert-modal__info-label {
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 14px;
    }
    .cert-modal__info-title {
        font-size: 11px;
        line-height: 14px;
    }
}

/* ==========================================================================
   Info Modal — shared popup used for Privacy Policy & Disclaimer content.
   Triggered by any element with data-info-trigger="privacy|disclaimer".
   The same modal element carries both content variants; the trigger's
   data-info-trigger value picks which .info-modal__content is shown.
   ========================================================================== */

/* Lock scroll AND compensate for the vertical scrollbar that disappears
   when overflow:hidden is applied — prevents the page + fixed header
   jumping right by ~15px on Windows Chrome when the popup opens.
   JS sets --info-modal-sbw to the measured scrollbar width. */
body.info-modal-open {
    overflow: hidden;
    padding-right: var(--info-modal-sbw, 0px);
}
body.info-modal-open .site-header {
    padding-right: var(--info-modal-sbw, 0px);
}

.info-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    opacity: 0;
    visibility: hidden;
    /* Faster fade so overlay + panel appear together immediately —
       0.3s was long enough that the panel was visible before the
       blurred overlay finished compositing. */
    transition: opacity .05s ease, visibility .05s ease;
}
.info-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.info-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .34);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    /* Force the blur onto its own compositor layer so the overlay
       is painted on the same frame the modal becomes visible. */
    will-change: backdrop-filter, opacity;
    transform: translateZ(0);
}

.info-modal__panel {
    position: relative;
    z-index: 1;
    background: #dcdcdc;
    color: var(--color-secondary, #233853);
    max-width: 948px;
    width: 100%;
    max-height: calc(100vh - 145px);
    padding: 50px 30px 20px;
    box-shadow: 5px 4px 6px #0000004D;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.info-modal__close {
    position: absolute;
    top: 35px;
    right: 28px;
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-secondary, #233853);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    transition: background .2s ease, transform .2s ease;
}
.info-modal__close:hover {
    background: var(--color-primary, #667d98);
}
.info-modal__close svg {
    width: 25px;
    height: 25px;
    display: block;
}

.info-modal__title {
    text-align: center;
    margin: 0 0 28px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--color-secondary, #233853);
}

/* Body itself is the scroller. Native scrollbar is hidden; the custom
   track+thumb below is a SIBLING of body (positioned by JS to align
   with body's rect) so we get an inside-looking scrollbar without
   wrapping content — no risk of collapsing body's flex height. */
.info-modal__body {
    position: relative;
    overflow-y: auto;
    padding-right: 30px;
    flex: 1 1 auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.info-modal__body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}
.info-modal__body a:hover {
    color: var(--color-73444d);
}
/* Custom JS-driven scrollbar.
   Track:  #717171 @ 22% opacity, radius 6px  |  Thumb: #233853, radius 6px
   Positioned absolutely against .info-modal__panel; JS sets top + height
   from getBoundingClientRect so it visually overlays the body region. */
.info-modal__scrollbar {
    position: absolute;
    right: 30px;
    width: 9px;
    background: rgba(113, 113, 113, .22);
    border-radius: 6px;
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}
.info-modal__scrollbar.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.info-modal__scrollbar-thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 40px;
    background: var(--color-secondary, #233853);
    border-radius: 6px;
    cursor: grab;
    transition: background-color .2s ease;
}
.info-modal__scrollbar-thumb:hover,
.info-modal__scrollbar-thumb.is-dragging {
    background: var(--color-primary, #667d98);
}
.info-modal__scrollbar-thumb.is-dragging {
    cursor: grabbing;
}

.info-modal__content {
    display: none;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-secondary, #233853);
}
.info-modal__content.is-active {
    display: block;
}
.info-modal__content p {
    margin: 0 0 14px;
}
.info-modal__content .info-modal__updated {
    font-size: 13px;
    color: #717171;
    margin: 0 0 18px;
}
.info-modal__content .info-modal__updated strong {
    color: var(--color-secondary, #233853);
    font-weight: 700;
}
.info-modal__content h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 20px 0 8px;
    color: var(--color-secondary, #233853);
}
.info-modal__content h3:first-of-type {
    margin-top: 8px;
}
.info-modal__content ul {
    padding-left: 20px;
    margin: 0 0 14px;
    list-style: disc;
}
.info-modal__content li {
    margin-bottom: 4px;
}
.info-modal__content .info-modal__contact {
    line-height: 22px;
}
.info-modal__content .info-modal__contact p {
    margin: 0;
}

/* Laptop / small desktop — trim padding and type slightly. */
@media (min-width: 768px) and (max-width: 1499.98px) {
    .info-modal__title {
        font-size: 20px;
        margin-bottom: 22px;
    }
    .info-modal__content {
        font-size: 13.5px;
        line-height: 20px;
    }
}

/* Mobile — full-width panel, tighter padding, smaller close button. */
@media (max-width: 767px) {
    .info-modal {
        padding: 20px 16px;
    }
    .info-modal__panel {
        padding: 30px 20px 24px;
        max-height: calc(100dvh - 80px);
    }
    .info-modal__close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }
    .info-modal__close svg {
        width: 20px;
        height: 20px;
    }
    .info-modal__title {
        font-size: 17px;
        margin-bottom: 18px;
        letter-spacing: .5px;
    }
    .info-modal__body {
        padding-right: 8px;
    }
    .info-modal__content {
        font-size: 13px;
        line-height: 20px;
    }
    .info-modal__content h3 {
        font-size: 14px;
        margin-top: 16px;
    }
    .info-modal__content ul {
        padding-left: 18px;
    }
    .info-modal__scrollbar {
        right: 10px;
        width: 7px;
    }
}