/* =========================================================
   Gyma – Header + Hero
   ========================================================= */

/* Base */
:root {
    --gyma-blue: #00A6E0;
    --gyma-blue-hover: #0091c4;
    --gyma-dark: #16222F;
    --topbar-height: 40px;
    --nav-height: 104px;
    --header-gutter: 45px;
}

body {
    font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;
    color: #16222F;
}

/* Inherit the base family across every text element, incl. form controls */
h1, h2, h3, h4, h5, h6,
p, a, span, li, label,
button, input, select, textarea, optgroup {
    font-family: inherit;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
    position: relative;
    z-index: 20;
}

.header-container {
    width: 100%;
    padding-left: var(--header-gutter);
    padding-right: var(--header-gutter);
}

/* =========================================================
   Top Bar
   ========================================================= */
.top-bar {
    height: var(--topbar-height);
    background-color: var(--gyma-dark);
}

.top-bar .header-container {
    height: 100%;
    gap: 36px;
}

.top-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transition: opacity .25s ease;
}

.top-bar__item:hover {
    color: #ffffff;
    opacity: .75;
}

.top-bar__item img {
    display: block;
    flex: 0 0 auto;
}

/* =========================================================
   Main Navigation
   ========================================================= */
.main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.main-nav .header-container {
    height: 100%;
}

.main-nav__brand img {
    display: block;
    width: 193px;
    height: auto;
}

.nav-menu {
    gap: 32px;
}

.nav-menu__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transition: color .25s ease;
}

.nav-menu__link:hover,
.nav-menu__link:focus,
.nav-menu .show > .nav-menu__link {
    color: var(--gyma-blue);
}

.nav-menu__link--toggle svg {
    margin-top: 2px;
    transition: transform .25s ease;
}

.nav-menu .show > .nav-menu__link--toggle svg {
    transform: rotate(180deg);
}

/* Services dropdown */
.nav-dropdown {
    margin-top: 18px;
    padding: 10px 0;
    border: none;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}

.nav-dropdown .dropdown-item {
    padding: 9px 22px;
    font-size: 15px;
    color: var(--gyma-dark);
}

.nav-dropdown .dropdown-item:hover,
.nav-dropdown .dropdown-item:focus {
    background-color: #f2f8fb;
    color: var(--gyma-blue);
}

/* Buttons */
.btn-gyma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--gyma-blue);
    color: #ffffff;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    border: none;
    transition: background-color .25s ease;
}

.btn-gyma:hover,
.btn-gyma:focus {
    background-color: var(--gyma-blue-hover);
    color: #ffffff;
}

.btn-gyma--contact {
    height: 52px;
    padding: 0 31px;
    margin-left: 34px;
    border-radius: 26px;
    font-size: 17px;
}

/* Hamburger */
.menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 7.5px;
    width: 46px;
    margin-left: 44px;
    padding: 0;
    background: none;
    border: none;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 1px;
    border-radius: 1px;
    background-color: #ffffff;
    transition: background-color .25s ease;
}

/* Staggered right-aligned lines (menu-bar.svg: 34.75 / 46 / 23.5 of 46) */
.menu-toggle span:nth-child(1) {
    width: 75.54%;
}

.menu-toggle span:nth-child(2) {
    width: 100%;
}

.menu-toggle span:nth-child(3) {
    width: 51.09%;
}

.menu-toggle:hover span {
    background-color: var(--gyma-blue);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
    position: relative;
    height: 51.5vw;
    min-height: 520px;
    max-height: 880px;
    overflow: hidden;
}

.hero picture {
    position: absolute;
    inset: 0;
}

.hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Hero Overlay */
.hero__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(11, 25, 40, .48);
}

/* =========================================================
   Hero Content
   ========================================================= */
.hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(70px, 12.3vw, 200px);
}

.hero__title {
	margin: 0 0 46px;
	color: #ffffff;
	font-size: 50px;
	font-weight: 500;
	line-height: 1.145;
	letter-spacing: -.01em;
}

.hero__desc {
	margin: 0 0 30px;
	color: #ffffff;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.45;
}

.btn-gyma--know-more {
    height: 48px;
    padding: 0 30px;
    border-radius: 24px;
    font-size: 17px;
}

/* =========================================================
   Who We Are
   ========================================================= */
.who-we-are {
    padding: 62px 0 59px;
    background-color: #ffffff;
}

/* The design aligns this section's content to the full 1320px container box */
.who-we-are .container,
.services .container {
    padding-left: 0;
    padding-right: 0;
}

/* Section Header */
.section-pill {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #d9dde3;
    border-radius: 999px;
    color: #16222F;
    font-size: 16px;
    font-style: italic;
    line-height: 1.4;
}

.section-title {
    margin: 13px 0 0;
    color: #16222F;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.section-desc {
    max-width: 800px;
    margin: 22px auto 0;
    color: #333333;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
}

/* Tabs */
.about-tabs {
    margin-top: 49px;
    border-bottom: 1px solid #e2e5e9;
}

.about-tabs .nav-item {
    margin-bottom: 0;
}

.about-tabs .nav-link {
    width: 100%;
    padding: 16px 0 17px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #6b7078;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    transition: color .25s ease, border-color .25s ease;
}

.about-tabs .nav-link:hover {
    color: var(--gyma-blue);
}

.about-tabs .nav-link.active {
    color: var(--gyma-blue);
    border-bottom-color: var(--gyma-blue);
}

/* Tab Content */
.about-tab-content {
    padding-top: 69px;
}

.about-text {
    padding-top: 27px;
}

.about-text__title {
    margin: 0 0 23px;
    color: #1B2A6E;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
}

.about-text__body {
    max-width: 538px;
    margin: 0;
    color: #333333;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.47;
}

.about-text__body--pending {
    color: #8a95a1;
    font-style: italic;
}

/* Image Composition */
.about-media {
    position: relative;
    width: 429px;
    /* keeps the offset inset inside the column when the grid narrows */
    max-width: 72%;
    margin-left: auto;
    margin-bottom: 49px;
}

.about-media__main {
    display: block;
    width: 100%;
    height: auto;
}

.about-media__inset {
    position: absolute;
    top: 53.6%;
    left: -38%;
    width: 62.5%;
    height: auto;
}

.media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px dashed #c8d0d8;
    border-radius: 14px;
    background-color: #f6f8fa;
    color: #8a95a1;
    font-size: 14px;
    font-style: italic;
    text-align: center;
}

.about-media--pending .about-media__main {
    aspect-ratio: 429 / 364;
}

.about-media--pending .about-media__inset {
    aspect-ratio: 268 / 218;
}

/* =========================================================
   Services
   ========================================================= */
.services {
    padding: 81px 0 66px;
    background-color: #ffffff;
}

/* Services Header */
.section-pill--services {
    padding: 5px 20px;
}

.services__title {
    max-width: 1010px;
    margin: 21px auto 0;
    color: #16222F;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.174;
    letter-spacing: -.01em;
}

/* Services Slider */
.services-slider {
    margin-top: 68px;
}

.services-slider .swiper-slide {
    height: auto;
}

/* Service Card */
.service-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 307 / 355;
}

/* The bottom-to-top dark gradient is baked into the source images */
.service-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Card Content */
.service-card__title {
    position: absolute;
    left: 23px;
    right: 23px;
    /* the block is centred on a fixed line, so 1- and 2-line titles sit symmetrically */
    bottom: 54px;
    transform: translateY(50%);
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.18;
}

/* View More Button */
.btn-view-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    margin-top: 42px;
    padding: 0 35px;
    border: 1px solid #d5d9de;
    border-radius: 24px;
    background-color: #ffffff;
    color: #16222F;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: border-color .25s ease, color .25s ease;
}

.btn-view-more:hover,
.btn-view-more:focus {
    border-color: var(--gyma-blue);
    color: var(--gyma-blue);
}

/* =========================================================
   Why Gyma
   ========================================================= */
.why-gyma {
    padding: 71px 0 69px;
    background-color: #ffffff;
}

/* Section Header */
.section-pill--why {
    padding: 4px 12px;
    font-size: 15px;
}

.why-gyma__title {
    max-width: 850px;
    margin: 27px auto 0;
    color: #16222F;
    font-size: 46px;
    font-weight: 400;
    line-height: 1.178;
    letter-spacing: -.005em;
}

/* Why Gyma Grid */
.why-gyma__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 74px;
    padding: 0 45px;
}

.wg-tile {
    overflow: hidden;
    margin: 0;
    border-radius: 14px;
    aspect-ratio: 369 / 310;
}

/* Image Blocks */
.wg-tile--image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Text Blocks */
.wg-tile--text {
    padding: 57px 41px 32px;
}

.wg-tile--grey {
    background-color: #F1F1F6;
}

.wg-tile--blue {
    background-color: var(--gyma-blue);
}

.wg-tile--purple {
    background-color: #382B6D;
}

.wg-tile__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.42;
}

.wg-tile__text {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.52;
}

/* The authored line breaks only apply once a tile is wide enough to hold the
   longest designed line (~265px of copy); below that the text wraps naturally. */
.wg-tile__title br,
.wg-tile__text br {
    display: none;
}

@media (min-width: 1520px) {

    .wg-tile__title br,
    .wg-tile__text br {
        display: initial;
    }
}

.wg-tile--grey .wg-tile__title {
    color: #16222F;
}

.wg-tile--grey .wg-tile__text {
    color: #333333;
}

.wg-tile--blue .wg-tile__title,
.wg-tile--purple .wg-tile__title {
    color: #ffffff;
}

.wg-tile--blue .wg-tile__text,
.wg-tile--purple .wg-tile__text {
    color: rgba(255, 255, 255, .95);
}

/* =========================================================
   Resources
   ========================================================= */
.resources {
    padding: 71px 0 83px;
    background-color: #F2F2F6;
}

.resources .container {
    padding-left: 0;
    padding-right: 0;
}

/* Resources Header */
.section-pill--resources {
    padding: 5px 19px;
}

.resources__title {
    margin: 18px 0 0;
    color: #16222F;
    font-size: 45px;
    font-weight: 500;
    line-height: 1.2;
}

.resources__layout {
    display: grid;
    grid-template-columns: 531fr 700fr;
    gap: 0 89px;
    margin-top: 41px;
}

/* Featured Resource */
.featured-resource {
    overflow: hidden;
    border-radius: 8px;
    background-color: #ffffff;
}

.featured-resource__img {
    display: block;
    width: 100%;
    height: auto;
}

.featured-resource__body {
    padding: 37px 32px 41px;
}

.featured-resource__title {
    margin: 20px 0 0;
    color: #16222F;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.17;
}

.featured-resource__text {
    margin: 13px 0 0;
    color: #4a4f57;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.33;
}

.featured-resource__date {
    margin: 33px 0 0;
    color: #6b7280;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
}

/* Resource List */
.resource-list {
    display: flex;
    flex-direction: column;
}

/* Resource Item */
.resource-item {
    padding: 27px 0 0;
    border-top: 1px solid #DDDDE2;
}

.resource-item + .resource-item {
    margin-top: 26px;
}

.resource-item__meta {
    display: flex;
    align-items: center;
    gap: 17px;
}

.resource-item__marker {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: var(--gyma-blue);
}

.resource-item__title {
    margin: 21px 0 0;
    color: #16222F;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.24;
}

.resource-item__text {
    margin: 18px 0 0;
    color: #4a4f57;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.33;
}

/* Article Badge */
.article-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    border-radius: 12px;
    background-color: #E7E9F0;
    color: #16222F;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

/* See All Button */
.btn-gyma--see-all {
    align-self: flex-start;
    height: 50px;
    margin-top: 49px;
    padding: 0 31px;
    border-radius: 25px;
    font-size: 17px;
}

/* the authored line breaks belong to the two-column desktop layout */
.featured-resource__text br,
.resource-item__text br {
    display: none;
}

@media (min-width: 992px) {

    .featured-resource__text br,
    .resource-item__text br {
        display: initial;
    }
}

/* =========================================================
   Featured APIs
   ========================================================= */
.featured-apis {
    position: relative;
    padding: 76px 0 87px;
    overflow: hidden;
    background-color: #2b2a6e;
    background-image:
        radial-gradient(150% 82% at 50% -10%, #1a58b8 0%, #1c4aa6 38%, rgba(28, 74, 166, 0) 72%),
        linear-gradient(180deg, #17357f 0%, #2a2a6f 46%, #3b3475 100%);
}

/* Badge */
.section-pill--light {
    padding: 4px 20px;
    border-color: rgba(255, 255, 255, .28);
    background-color: rgba(255, 255, 255, .07);
    color: #ffffff;
    font-size: 15px;
}

/* Heading */
.featured-apis__title {
    max-width: 1000px;
    margin: 16px auto 0;
    color: #ffffff;
    font-size: 45px;
    font-weight: 400;
    line-height: 1.378;
    letter-spacing: -.005em;
}

/* Description */
.featured-apis__desc {
    max-width: 995px;
    margin: 28px auto 0;
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.375;
}

/* CTA */
.btn-gyma--learn-more {
    height: 50px;
    margin-top: 46px;
    padding: 0 30px;
    border-radius: 25px;
    font-size: 17px;
}

/* Marquee */
.api-marquee {
    margin-top: 82px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .12) 0%, #000 25%, #000 75%, rgba(0, 0, 0, .12) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .12) 0%, #000 25%, #000 75%, rgba(0, 0, 0, .12) 100%);
}

.api-marquee__track {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: api-marquee-scroll 30s linear infinite;
}

.api-marquee:hover .api-marquee__track,
.api-marquee:focus-within .api-marquee__track {
    animation-play-state: paused;
}

@keyframes api-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Marquee Items */
.api-marquee__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 52px;
    margin-right: 12px;
    padding: 0 22px;
    border-radius: 26px;
    background-color: #ffffff;
    color: #16222F;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .api-marquee {
        overflow-x: auto;
    }

    .api-marquee__track {
        animation: none;
    }
}

/* =========================================================
   Client Logos
   ========================================================= */
.client-logos {
    /* the footer CTA banner is pulled up into this section's lower space */
    padding: 78px 0;
    background-color: #ffffff;
}

/* Client Logo Heading */
.client-logos__title {
    margin: 0;
    color: #16222F;
    font-size: 31px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

/* Client Logo Slider */
.client-logos__slider-wrap {
    margin-top: 64px;
    padding: 0 40px;
}

.client-slider .swiper-wrapper {
    align-items: center;
}

/* Client Logo Item */
.client-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 103px;
}

.client-slider__logo {
    display: block;
    width: 131px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
    padding-top: 0;
    background-color: #F2F2F5;
}
.ftr_box {
	background: #fff;
    position: relative;
}
/* Footer CTA */
.footer-cta {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 277px;
	overflow: hidden;
	border-radius: 16px;
}

/* CTA Background */
.footer-cta__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* CTA Content */
.footer-cta__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    height: 100%;
    padding: 0 106px 0 83px;
}
.ftr_box::after {
	content: '';
	background: #f2f2f5;
	width: 100%;
	height: 35%;
	position: absolute;
	bottom: 0;
	left: 0;
}
.footer-cta__title {
    margin: 0;
    color: #ffffff;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.2;
}

/* CTA Button */
.btn-gyma--connect {
    flex: 0 0 auto;
    height: 50px;
    padding: 0 30px;
    border-radius: 25px;
    font-size: 17px;
}

/* Footer Main */
.footer-main {
    margin-top: 79px;
}

.site-footer .container {
    padding-left: 0;
    padding-right: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 674fr 362fr 284fr;
}

.footer-heading {
    margin: 0;
    color: #16222F;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

/* Connect With Us */
.footer-subscribe {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 17px;
}

.footer-subscribe__input {
    width: 270px;
    height: 50px;
    padding: 0;
    border: none;
    border-bottom: 1px solid #b9bcc4;
    border-radius: 0;
    background-color: transparent;
    color: #16222F;
    font-size: 16px;
    line-height: 1.2;
}

.footer-subscribe__input::placeholder {
    color: #6b7280;
    opacity: 1;
}

.footer-subscribe__input:focus {
    outline: none;
    border-bottom-color: var(--gyma-blue);
}

.btn-gyma--explore {
    flex: 0 0 auto;
    height: 50px;
    padding: 0 30px;
    border-radius: 25px;
    font-size: 17px;
}

/* Social Icons */
.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 34px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #E7E9F0;
    transition: background-color .25s ease;
}

.footer-social a:hover {
    background-color: #d9dce6;
}

.footer-social img {
    display: block;
}

/* Footer Links */
.footer-links {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.2;
}

.footer-links li + li {
    margin-top: 9px;
}

.footer-links a {
    color: #16222F;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    transition: color .25s ease;
}

.footer-links a:hover {
    color: var(--gyma-blue);
}

/* Footer Bottom */
.footer-bottom {
    margin-top: 95px;
    border-top: 1px solid #DDDDE2;
    padding: 19px 0 56px;
}

.footer-bottom__text {
    margin: 0;
    color: #4a4f57;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
}

/* =========================================================
   Offcanvas Menu
   ========================================================= */
.gyma-offcanvas {
    width: 340px;
    background-color: var(--gyma-dark);
    color: #ffffff;
}

.gyma-offcanvas .offcanvas-header {
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.gyma-offcanvas .offcanvas-brand img {
    display: block;
    width: 160px;
    height: auto;
}

.gyma-offcanvas .offcanvas-body {
    padding: 28px;
}

.offcanvas-menu li + li {
    margin-top: 4px;
}

.offcanvas-menu a {
    display: block;
    padding: 12px 0;
    color: #ffffff;
    font-size: 17px;
    transition: color .25s ease;
}

.offcanvas-menu a:hover {
    color: var(--gyma-blue);
}

.gyma-offcanvas .btn-gyma--contact {
    margin-left: 0;
}

.offcanvas-contact {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.offcanvas-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 15px;
}

.offcanvas-contact a + a {
    margin-top: 14px;
}

/* =========================================================
   Responsive
   ========================================================= */

/* Large desktop */
@media (max-width: 1399.98px) {
    :root {
        --nav-height: 92px;
        --header-gutter: 32px;
    }

    .main-nav__brand img {
        width: 172px;
    }

    .nav-menu {
        gap: 26px;
    }

    .nav-menu__link {
        font-size: 16px;
    }

    .btn-gyma--contact {
        height: 48px;
        padding: 0 24px;
        margin-left: 26px;
        border-radius: 24px;
        font-size: 16px;
    }

    .menu-toggle {
        margin-left: 32px;
    }

    .hero__title {
        font-size: 52px;
        margin-bottom: 40px;
    }

    .section-title {
        font-size: 42px;
    }

    .about-text__title {
        font-size: 32px;
    }

    .featured-apis__title {
        max-width: 880px;
        font-size: 42px;
    }

    .featured-apis__desc {
        max-width: 900px;
    }

    .services__title {
        max-width: 880px;
        font-size: 40px;
    }

    .why-gyma__title {
        max-width: 780px;
        font-size: 42px;
    }

    .resources__title {
        font-size: 42px;
    }

    .resources__layout {
        gap: 0 56px;
    }

    .client-logos__title {
        font-size: 28px;
    }

    .client-logos__slider-wrap {
        padding: 0 32px;
    }

    .footer-cta__inner {
        padding: 0 56px;
    }

    .footer-cta__title {
        font-size: 42px;
    }

    .footer-grid {
        grid-template-columns: 1fr 340px 260px;
    }

    .why-gyma__grid {
        padding: 0 32px;
    }

    .wg-tile--text {
        padding: 40px 30px 26px;
    }

    .wg-tile__title {
        font-size: 20px;
    }

    .wg-tile__text {
        font-size: 15px;
    }
}

/* Tablet landscape */
@media (max-width: 1199.98px) {
    :root {
        --nav-height: 84px;
    }

    .main-nav__brand img {
        width: 160px;
    }

    .hero {
        height: 62vw;
        min-height: 500px;
    }

    .hero__title {
        font-size: 44px;
        margin-bottom: 34px;
    }

    .who-we-are .container,
    .services .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .services {
        padding: 70px 0 60px;
    }

    .services__title {
        max-width: 760px;
        font-size: 36px;
    }

    .services-slider {
        margin-top: 54px;
    }

    .why-gyma {
        padding: 66px 0 60px;
    }

    .why-gyma__title {
        max-width: 660px;
        font-size: 36px;
    }

    .why-gyma__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 54px;
        padding: 0 24px;
    }

    .resources {
        padding: 66px 0 70px;
    }

    .resources .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .resources__title {
        font-size: 36px;
    }

    .resources__layout {
        gap: 0 40px;
        margin-top: 34px;
    }

    .resource-item__title {
        font-size: 20px;
    }

    .wg-tile--text {
        padding: 44px 34px 28px;
    }

    .who-we-are {
        padding: 70px 0 60px;
    }

    .about-tab-content {
        padding-top: 52px;
    }

    .about-text {
        padding-top: 8px;
    }

    .featured-apis {
        padding: 66px 0 74px;
    }

    .featured-apis__title {
        max-width: 760px;
        font-size: 38px;
    }

    .featured-apis__desc {
        max-width: 800px;
        margin-top: 24px;
    }

    .btn-gyma--learn-more {
        margin-top: 40px;
    }

    .api-marquee {
        margin-top: 66px;
    }
}

/* Tablet portrait */
@media (max-width: 991.98px) {
    :root {
        --header-gutter: 24px;
    }

    .hero {
        height: 78vw;
        min-height: 480px;
    }

    .hero__image {
        object-position: 55% center;
    }

    .hero__title {
        font-size: 38px;
    }

    .hero__title br {
        display: none;
    }

    .about-tabs {
        margin-top: 40px;
    }

    .about-tab-content {
        padding-top: 40px;
    }

    .about-text {
        padding-top: 0;
    }

    .about-media {
        width: 72%;
        max-width: 429px;
        margin: 44px 0 49px auto;
    }

    .featured-apis__title {
        max-width: 640px;
        font-size: 34px;
    }

    .services__title {
        max-width: 640px;
        font-size: 32px;
    }

    .why-gyma__title {
        max-width: 560px;
        font-size: 32px;
    }

    .resources__title {
        font-size: 32px;
    }

    .resources__layout {
        grid-template-columns: 1fr;
        gap: 44px 0;
    }

    .featured-resource {
        max-width: 531px;
    }

    .client-logos {
        padding: 62px 0 150px;
    }

    .client-logos__title {
        font-size: 26px;
    }

    .client-logos__slider-wrap {
        margin-top: 48px;
        padding: 0 24px;
    }

    .site-footer .container {
        padding-left: 12px;
        padding-right: 12px;
    }


    .footer-cta__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 48px 40px;
    }

    .footer-cta__title {
        font-size: 34px;
    }

    .footer-cta__title br {
        display: none;
    }

    .footer-main {
        margin-top: 60px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 44px 32px;
    }

    .footer-bottom {
        margin-top: 60px;
        padding: 19px 0 36px;
    }

    .featured-apis__desc {
        max-width: 680px;
        font-size: 15px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    :root {
        --topbar-height: 36px;
        --nav-height: 72px;
        --header-gutter: 14px;
    }

    .top-bar .header-container {
        gap: 14px;
        justify-content: center;
    }

    .top-bar__item {
        gap: 6px;
        font-size: 12px;
    }

    .top-bar__item img {
        width: 16px;
        height: 16px;
    }

    .main-nav__brand img {
        width: 132px;
    }

    .btn-gyma--contact {
        display: none;
    }

    .menu-toggle {
        width: 30px;
        gap: 5px;
        margin-left: 0;
    }

    .hero {
        height: 118vw;
        min-height: 440px;
        max-height: 600px;
    }

    .hero__image {
        object-position: 52% center;
    }

    .hero__content {
        padding-bottom: 56px;
    }

    .hero__title {
        margin-bottom: 26px;
        font-size: 32px;
        line-height: 1.22;
    }

    .btn-gyma--know-more {
        height: 44px;
        padding: 0 22px;
        border-radius: 22px;
        font-size: 15px;
    }

    .who-we-are {
        padding: 54px 0 48px;
    }

    .section-pill {
        font-size: 14px;
    }

    .section-title {
        font-size: 32px;
    }

    .section-desc {
        margin-top: 16px;
        font-size: 16px;
    }

    .about-tabs {
        margin-top: 32px;
    }

    .about-tabs .nav-link {
        padding: 12px 4px 13px;
        font-size: 15px;
    }

    .about-tab-content {
        padding-top: 32px;
    }

    .about-text__title {
        margin-bottom: 16px;
        font-size: 26px;
    }

    .about-text__body {
        font-size: 16px;
    }

    .about-media {
        margin-top: 36px;
        margin-bottom: 40px;
    }

    .site-footer {
        padding-top: 60px;
    }

 

    .footer-cta__inner {
        gap: 22px;
        padding: 32px 24px;
    }

    .footer-cta__title {
        font-size: 26px;
        line-height: 1.28;
    }

    .btn-gyma--connect,
    .btn-gyma--explore {
        height: 46px;
        padding: 0 24px;
        border-radius: 23px;
        font-size: 15px;
    }

    .footer-main {
        margin-top: 44px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .footer-subscribe {
        flex-wrap: wrap;
        gap: 14px;
    }

    .footer-subscribe__input {
        width: 100%;
        height: 46px;
    }

    .footer-bottom {
        margin-top: 44px;
        padding: 17px 0 28px;
    }

    .client-logos {
        padding: 46px 0 120px;
    }

    .client-logos__title {
        font-size: 22px;
        line-height: 1.3;
    }

    .client-logos__slider-wrap {
        margin-top: 34px;
        padding: 0 16px;
    }

    .resources {
        padding: 50px 0 52px;
    }

    .section-pill--resources {
        padding: 4px 16px;
        font-size: 14px;
    }

    .resources__title {
        margin-top: 16px;
        font-size: 26px;
        line-height: 1.28;
    }

    .resources__layout {
        gap: 34px 0;
        margin-top: 28px;
    }

    .featured-resource__body {
        padding: 28px 24px 30px;
    }

    .resource-item__title {
        font-size: 19px;
    }

    .btn-gyma--see-all {
        height: 46px;
        margin-top: 34px;
        padding: 0 26px;
        border-radius: 23px;
        font-size: 15px;
    }

    .why-gyma {
        padding: 50px 0 46px;
    }

    .section-pill--why {
        font-size: 14px;
    }

    .why-gyma__title {
        margin-top: 16px;
        font-size: 26px;
        line-height: 1.28;
    }

    .why-gyma__grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 34px;
        padding: 0 18px;
    }

    .wg-tile {
        aspect-ratio: auto;
    }

    .wg-tile--image {
        aspect-ratio: 369 / 310;
    }

    .wg-tile--text {
        padding: 32px 26px;
    }

    .wg-tile__title {
        font-size: 20px;
    }

    .services {
        padding: 54px 0 48px;
    }

    .section-pill--services {
        padding: 4px 16px;
        font-size: 14px;
    }

    .services__title {
        margin-top: 16px;
        font-size: 26px;
        line-height: 1.28;
    }

    .services-slider {
        margin-top: 34px;
    }

    .service-card__title {
        left: 18px;
        right: 18px;
        bottom: 40px;
        font-size: 18px;
    }

    .btn-view-more {
        height: 44px;
        margin-top: 30px;
        padding: 0 26px;
        border-radius: 22px;
        font-size: 15px;
    }

    .featured-apis {
        padding: 50px 0 58px;
    }

    .section-pill--light {
        padding: 3px 16px;
        font-size: 14px;
    }

    .featured-apis__title {
        font-size: 26px;
        line-height: 1.32;
    }

    .featured-apis__desc {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.5;
    }

    .btn-gyma--learn-more {
        height: 46px;
        margin-top: 30px;
        padding: 0 26px;
        border-radius: 23px;
        font-size: 15px;
    }

    .api-marquee {
        margin-top: 46px;
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .12) 0%, #000 16%, #000 84%, rgba(0, 0, 0, .12) 100%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, .12) 0%, #000 16%, #000 84%, rgba(0, 0, 0, .12) 100%);
    }

    .api-marquee__item {
        height: 44px;
        margin-right: 10px;
        padding: 0 18px;
        border-radius: 22px;
        font-size: 14px;
    }
}

/* Small mobile */
@media (max-width: 400px) {
    .top-bar__item span {
        font-size: 12px;
    }

    .hero__title {
        font-size: 28px;
    }

    .section-title {
        font-size: 28px;
    }

    .about-tabs .nav-link {
        font-size: 13px;
    }
}

/* =========================================================
   Our Legacy (About)
   ========================================================= */
.legacy {
    padding: 76px 0 80px;
    background-color: #ffffff;
}

.legacy .section-title {
    margin-top: 0;
}

.legacy__desc {
    max-width: 1080px;
}

.legacy__desc strong {
    font-weight: 600;
    color: #16222F;
}

.legacy-stats {
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
    margin-top: 52px;
}

.legacy-stat {
    padding-top: 26px;
    border-top: 1px solid #e2e5e9;
}

.legacy-stat__number {
    margin: 0;
    color: var(--gyma-blue);
    font-size: 64px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.01em;
}

.legacy-stat__label {
    margin: 21px 0 0;
    color: #16222F;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
}

@media (max-width: 1399.98px) {
    .legacy-stat__number {
        font-size: 56px;
    }
}

@media (max-width: 1199.98px) {
    .legacy-stats {
        --bs-gutter-x: 32px;
    }

    .legacy-stat__number {
        font-size: 50px;
    }
}

@media (max-width: 991.98px) {
    .legacy {
        padding: 66px 0 70px;
    }

    .legacy-stats {
        margin-top: 44px;
    }

    .legacy-stat__number {
        font-size: 46px;
    }
}

@media (max-width: 767.98px) {
    .legacy {
        padding: 50px 0 52px;
    }

    .legacy-stats {
        --bs-gutter-x: 24px;
        --bs-gutter-y: 32px;
        margin-top: 34px;
    }

    .legacy-stat {
        padding-top: 20px;
    }

    .legacy-stat__number {
        font-size: 38px;
    }

    .legacy-stat__label {
        margin-top: 14px;
        font-size: 15px;
    }
}

@media (max-width: 400px) {
    .legacy-stat__number {
        font-size: 32px;
    }

    .legacy-stat__label {
        font-size: 14px;
    }
}

/* =========================================================
   Our Mission / Our Vision / Our Values (About)
   ========================================================= */
.mvv {
    padding: 74px 0 78px;
    background-color: #F2F2F6;
}

/* Vertical tab list */
.mvv-tabs {
    display: block;
    max-width: 280px;
}

.mvv-tabs__link {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 0;
    background: none;
    border: none;
    border-bottom: 1px solid #dcdce3;
    border-radius: 0;
    color: #838383;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    transition: color .25s ease;
}

/* The icon colour is tracked separately from the label colour */
.mvv-tabs__icon {
    flex: 0 0 auto;
    color: #838383;
    transition: color .25s ease;
}

.mvv-tabs__link:hover {
    color: #16222F;
}

.mvv-tabs__link.active {
    color: #16222F;
    font-weight: 600;
}

.mvv-tabs__link.active .mvv-tabs__icon {
    color: var(--gyma-blue);
}

/* Image panel */
.mvv-panel {
    position: relative;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
}

.mvv-panel__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 875 / 523;
    object-fit: cover;
}

.mvv-panel__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 150px 40px 40px;
    background: linear-gradient(to top,
            rgba(6, 12, 8, .88) 0%,
            rgba(6, 12, 8, .55) 40%,
            rgba(6, 12, 8, 0) 100%);
}

.mvv-panel__text {
    max-width: 730px;
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
}

.mvv-panel__text--pending {
    font-style: italic;
    opacity: .85;
}

@media (max-width: 1199.98px) {
    .mvv-tabs {
        max-width: 260px;
    }

    .mvv-tabs__link {
        font-size: 16px;
    }

    .mvv-panel__caption {
        padding: 130px 32px 32px;
    }

    .mvv-panel__text {
        font-size: 16px;
    }
}

@media (max-width: 991.98px) {
    .mvv {
        padding: 62px 0 66px;
    }

    .mvv-tabs {
        max-width: none;
        margin-bottom: 34px;
    }
}

@media (max-width: 767.98px) {
    .mvv {
        padding: 50px 0 52px;
    }

    .mvv-tabs {
        margin-bottom: 26px;
    }

    .mvv-tabs__link {
        gap: 12px;
        padding: 12px 0;
        font-size: 15px;
    }

    .mvv-tabs__icon {
        width: 20px;
        height: 20px;
    }

    .mvv-panel {
        border-radius: 12px;
    }

    .mvv-panel__image {
        aspect-ratio: 4 / 3;
    }

    .mvv-panel__caption {
        padding: 90px 20px 20px;
    }

    .mvv-panel__text {
        font-size: 15px;
        line-height: 1.5;
    }
}

/* =========================================================
   About Timeline Slider
   ========================================================= */
.about-slider {
    padding: 56px 0 90px;
    background-color: #ffffff;
}

/* Aligns the slide content to the full container box, like Who We Are */
.about-slider .container {
    padding-left: 0;
    padding-right: 0;
}

.about-slider__stage {
    position: relative;
}

/* Each slide clips its own bleed, so the off-screen slides sitting either side
   of the active one cannot leak their timeline into view. The top padding gives
   the decorative shape headroom inside that clip. */
.about-slider__swiper .swiper-slide {
    padding-top: 40px;
    overflow: hidden;
}

/* Timeline strip – bleeds past the container so the upcoming year sits at the
   viewport edge. */
.about-slider__timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-right: calc(50% - 50vw);
    padding-right: 34px;
}

/* Starts at the trailing edge of the active marker and runs right */
.about-slider__line {
    position: absolute;
    top: 89px;
    right: 0;
    left: 62px;
    z-index: 1;
    height: 1px;
    background-color: #DCDCE3;
}

.about-slider__node {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.about-slider__node--current {
    align-items: flex-start;
}

.about-slider__node--upcoming {
    align-items: center;
}

.about-slider__year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 18px;
    border-radius: 17px;
    color: #ffffff;
    font-size: 15px;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
}

.about-slider__node--current .about-slider__year {
    background-color: #332E63;
}

.about-slider__node--upcoming .about-slider__year {
    background-color: #BAB8C9;
}

/* A fixed-height slot keeps both markers centred on the same line */
.about-slider__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-top: 24px;
}

.about-slider__marker::before {
    content: "";
    display: block;
    border-radius: 50%;
}

.about-slider__node--current .about-slider__marker {
    background-color: #ffffff;
    border: 1px solid #DCDCE3;
    border-radius: 50%;
}

.about-slider__node--current .about-slider__marker::before {
    width: 26px;
    height: 26px;
    background-color: var(--gyma-blue);
}

.about-slider__node--upcoming .about-slider__marker::before {
    width: 21px;
    height: 21px;
    background-color: #BAB8C9;
}

/* Slide body */
.about-slider__body {
    margin-top: 58px;
}

.about-slider__title {
    margin: 0;
    color: #16222F;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.about-slider__text {
    max-width: 450px;
    margin: 27px 0 0;
    color: #333333;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
}

/* The media is lifted so it overlaps the timeline, as per the design */
.about-slider__media {
    position: relative;
    width: 394px;
    max-width: 100%;
    margin-top: -162px;
    margin-left: 9%;
}

.about-slider__image {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 394 / 414;
    object-fit: cover;
    border-radius: 12px;
}

.about-slider__shape {
    position: absolute;
    top: -50px;
    right: -46px;
    z-index: 0;
}

/* Navigation */
.about-slider__navbar {
    position: absolute;
    right: 0;
    bottom: 64px;
    left: 0;
}

.about-slider__nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.about-slider__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background: none;
    border: 1px solid #DCDCE3;
    border-radius: 50%;
    color: #16222F;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
    z-index: 999;
}

.about-slider__btn:hover {
    background-color: var(--gyma-blue);
    border-color: var(--gyma-blue);
    color: #ffffff;
}

.about-slider__btn.swiper-button-disabled {
    opacity: .4;
    pointer-events: none;
}

@media (max-width: 1199.98px) {
    .about-slider__title {
        font-size: 28px;
    }

    .about-slider__text {
        font-size: 16px;
    }
}

@media (max-width: 991.98px) {
    .about-slider {
        padding: 66px 0 70px;
    }

    .about-slider .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .about-slider__line {
        top: 79px;
        left: 54px;
    }

    .about-slider__year {
        height: 32px;
        padding: 0 16px;
        border-radius: 16px;
        font-size: 14px;
    }

    .about-slider__marker {
        width: 54px;
        height: 54px;
        margin-top: 20px;
    }

    .about-slider__node--current .about-slider__marker::before {
        width: 22px;
        height: 22px;
    }

    .about-slider__body {
        margin-top: 42px;
    }

    /* Stacked: the media returns to the normal flow */
    .about-slider__media {
        margin-top: 36px;
        margin-left: 0;
    }

    .about-slider__navbar {
        position: static;
        margin-top: 30px;
    }
}

@media (max-width: 767.98px) {
    .about-slider {
        padding: 50px 0 52px;
    }

    .about-slider__timeline {
        padding-right: 20px;
    }

    .about-slider__line {
        top: 69px;
        left: 46px;
    }

    .about-slider__year {
        height: 30px;
        padding: 0 14px;
        border-radius: 15px;
        font-size: 13px;
    }

    .about-slider__marker {
        width: 46px;
        height: 46px;
        margin-top: 16px;
    }

    .about-slider__node--current .about-slider__marker::before {
        width: 20px;
        height: 20px;
    }

    .about-slider__node--upcoming .about-slider__marker::before {
        width: 17px;
        height: 17px;
    }

    .about-slider__body {
        margin-top: 32px;
    }

    .about-slider__title {
        font-size: 24px;
    }

    .about-slider__text {
        margin-top: 18px;
        font-size: 15px;
    }

    .about-slider__shape {
        width: 100px;
        height: 100px;
        top: -34px;
        right: -20px;
    }

    .about-slider__btn {
        width: 48px;
        height: 48px;
    }
}

/* =========================================================
   Our Leadership
   ========================================================= */
.leadership {
    padding: 100px 0 115px;
    background-color: #332E63;
    background-image: radial-gradient(125% 95% at 60% -8%,
            #1668C4 0%,
            #21489F 30%,
            #2C2F73 65%,
            #332E63 100%);
}

.leadership .container {
    padding-left: 0;
    padding-right: 0;
}

.leadership__title {
    margin: 0;
    color: #ffffff;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

/* Rule with the quote tile pinned to its right end */
.leadership__rule {
    display: flex;
    align-items: flex-end;
    margin-top: 14px;
}

.leadership__line {
    flex: 1;
    height: 1px;
    margin-bottom: 1px;
    background-color: rgba(255, 255, 255, .28);
}

.leadership__quote {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background-color: var(--gyma-blue);
}

/* Profiles */
.leadership__profile {
    margin-top: 48px;
}

.leadership__profile + .leadership__profile {
    margin-top: 44px;
}

.leadership__media {
    position: relative;
    display: block;
    width: 416px;
    max-width: 100%;
    padding: 0;
    background: none;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
}

/* Reversed profile – the card sits against the container's right edge */
.leadership__media--end {
    margin-left: auto;
}

.leadership__poster {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 416 / 395;
    object-fit: cover;
}

.leadership__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--gyma-blue);
    transition: background-color .25s ease;
}

.leadership__media:hover .leadership__play,
.leadership__media:focus-visible .leadership__play {
    background-color: var(--gyma-blue-hover);
}

.leadership__body {
    max-width: 620px;
}

.leadership__name {
    margin: 0;
    color: #ffffff;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
}

.leadership__text {
    margin: 30px 0 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.67;
}

.leadership__badge {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    height: 32px;
    margin-top: 70px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
}

.leadership__badge span {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
}

.leadership__badge span + span {
    border-left: 1px solid rgba(255, 255, 255, .35);
}

/* Video lightbox */
.leadership-modal__content {
    position: relative;
    background-color: #000000;
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

.leadership-modal__video {
    width: 100%;
    height: 100%;
    background-color: #000000;
}

.leadership-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 8px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .55);
    opacity: 1;
}

@media (max-width: 1199.98px) {
    .leadership {
        padding: 80px 0 90px;
    }

    .leadership__title {
        font-size: 38px;
    }

    .leadership__name {
        font-size: 24px;
    }

    .leadership__text {
        margin-top: 24px;
        font-size: 17px;
        line-height: 1.6;
    }

    .leadership__badge {
        margin-top: 46px;
    }
}

@media (max-width: 991.98px) {
    .leadership {
        padding: 66px 0 70px;
    }

    .leadership .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .leadership__profile {
        margin-top: 38px;
    }

    .leadership__profile + .leadership__profile {
        margin-top: 46px;
    }

    /* Stacked: poster first, then the copy */
    .leadership__media,
    .leadership__media--end {
        width: 100%;
        max-width: 520px;
        margin-left: 0;
    }

    .leadership__body {
        max-width: none;
        margin-top: 28px;
    }

    .leadership__badge {
        margin-top: 30px;
    }
}

@media (max-width: 767.98px) {
    .leadership {
        padding: 52px 0 56px;
    }

    .leadership__title {
        font-size: 30px;
    }

    .leadership__quote {
        width: 46px;
        height: 46px;
        border-radius: 7px;
    }

    .leadership__name {
        font-size: 22px;
    }

    .leadership__text {
        margin-top: 18px;
        font-size: 16px;
        line-height: 1.55;
    }

    .leadership__play {
        width: 50px;
        height: 50px;
    }

    /* Let the role badge wrap instead of forcing the page wider */
    .leadership__badge {
        height: auto;
        margin-top: 24px;
        font-size: 14px;
    }

    .leadership__badge span {
        min-width: 0;
        padding: 7px 10px;
    }
}

/* =========================================================
   Our Partnership
   ========================================================= */
.partnership {
    padding: 80px 0 90px;
    background-color: #ffffff;
}

.partnership .container {
    padding-left: 0;
    padding-right: 0;
}

/* 5 tracks of 256px across the 1320 container. The intro takes the first two
   cells of row 1, so the 13 cards flow 3 / 5 / 5 on their own. */
.partnership__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.partnership__intro {
    grid-column: span 2;
}

.partnership__title {
    margin: 0;
    color: #16222F;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.partnership__text {
    max-width: 460px;
    margin: 20px 0 0;
    color: #333333;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
}

.partnership__card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 175px;
    padding: 16px;
    background-color: #F2F2F6;
    border-radius: 10px;
}

/* Logos sit at their intrinsic size and only shrink if the card gets smaller */
.partnership__card img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 1199.98px) {
    .partnership__title {
        font-size: 38px;
    }

    .partnership__text {
        margin-top: 16px;
        font-size: 17px;
    }

    .partnership__card {
        height: 145px;
    }
}

@media (max-width: 991.98px) {
    .partnership {
        padding: 66px 0 70px;
    }

    .partnership .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Stacked: the intro takes its own row above a 3-up grid */
    .partnership__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .partnership__intro {
        grid-column: 1 / -1;
        margin-bottom: 8px;
    }

    .partnership__text {
        max-width: none;
    }

    .partnership__card {
        height: 140px;
    }
}

@media (max-width: 767.98px) {
    .partnership {
        padding: 52px 0 56px;
    }

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

    .partnership__title {
        font-size: 30px;
    }

    .partnership__text {
        font-size: 16px;
    }

    .partnership__card {
        height: 124px;
        padding: 14px;
    }
}

@media (max-width: 400px) {
    .partnership__card {
        height: 108px;
        padding: 12px;
    }
}

/* =========================================================
   Our Global Presence
   ========================================================= */
.presence {
    padding: 0px 0 96px;
    background-color: #ffffff;
}

.presence__title {
    margin-top: 0;
}

/* Markers are placed in % of this box, so they track the map as it scales */
.presence__stage {
    position: relative;
    width: 1073px;
    max-width: 100%;
    margin: 56px auto 0;
}

.presence__map {
    display: block;
    width: 100%;
    height: auto;
}

.presence__marker {
    position: absolute;
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    padding: 0;
    background: none;
    border: none;
    line-height: 0;
    cursor: pointer;
    transition: transform .2s ease;
}

.presence__marker img {
    display: block;
    width: 100%;
    height: 100%;
}

.presence__marker:hover,
.presence__marker.is-active {
    transform: translate(-50%, -50%) scale(1.12);
}

/* One popup, repositioned and refilled for whichever marker is open */
.presence__popup {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 250px;
    max-width: 78%;
    padding: 14px 18px;
    background-color: #ffffff;
    border: 1px solid #E6E8EC;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(22, 34, 47, .13);
    transform: translate(-50%, calc(-100% - 26px));
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.presence__popup.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Edge flips so the card is never clipped by the stage */
.presence__popup--below {
    transform: translate(-50%, 26px);
}

.presence__popup--left {
    transform: translate(calc(-100% + 22px), calc(-100% - 26px));
}

.presence__popup--left.presence__popup--below {
    transform: translate(calc(-100% + 22px), 26px);
}

.presence__popup--right {
    transform: translate(-22px, calc(-100% - 26px));
}

.presence__popup--right.presence__popup--below {
    transform: translate(-22px, 26px);
}

.presence__popup-title {
    margin: 0;
    color: #16222F;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.presence__popup-text {
    margin: 6px 0 0;
    color: #6b7078;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.presence__popup-text--pending {
    font-style: italic;
}

@media (max-width: 1199.98px) {
    .presence {
        padding: 60px 0 76px;
    }

    .presence__stage {
        margin-top: 44px;
    }

    .presence__marker {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 991.98px) {
    .presence {
        padding: 52px 0 62px;
    }

    .presence__stage {
        margin-top: 34px;
    }

    .presence__marker {
        width: 28px;
        height: 28px;
    }

    .presence__popup {
        width: 220px;
        padding: 12px 14px;
    }
}

@media (max-width: 767.98px) {
    .presence {
        padding: 44px 0 52px;
    }

    .presence__stage {
        margin-top: 26px;
    }

    .presence__marker {
        width: 24px;
        height: 24px;
    }

    .presence__popup {
        width: 190px;
        transform: translate(-50%, calc(-100% - 18px));
    }

    .presence__popup--below {
        transform: translate(-50%, 18px);
    }

    .presence__popup--left {
        transform: translate(calc(-100% + 16px), calc(-100% - 18px));
    }

    .presence__popup--left.presence__popup--below {
        transform: translate(calc(-100% + 16px), 18px);
    }

    .presence__popup--right {
        transform: translate(-16px, calc(-100% - 18px));
    }

    .presence__popup--right.presence__popup--below {
        transform: translate(-16px, 18px);
    }

    .presence__popup-title {
        font-size: 15px;
    }

    .presence__popup-text {
        font-size: 13px;
    }
}

/* =========================================================
   Business Development – Introductory Content
   ========================================================= */
.bd-intro {
    padding: 20px 0 0;
    background-color: #ffffff;
}
.bd-intro-bio{
    padding: 20px 0 70px;
}

/* Aligns the divider to the full container box */
.bd-intro .container {
    padding-left: 0;
    padding-right: 0;
}

.bd-intro__crumbs {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.4;
}

.bd-intro__crumbs .breadcrumb-item a {
    color: #9a9fa6;
    font-weight: 400;
    transition: color .25s ease;
}

.bd-intro__crumbs .breadcrumb-item a:hover {
    color: var(--gyma-blue);
}

.bd-intro__crumbs .breadcrumb-item + .breadcrumb-item::before {
    color: #9a9fa6;
}

.bd-intro__crumbs .breadcrumb-item.active {
    color: #16222F;
    font-weight: 500;
}

.bd-intro__body {
    margin-top: 74px;
}

.bd-intro__title {
    margin: 0;
    color: #16222F;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.23;
    letter-spacing: -.01em;
}

/* Sits against the right edge of its column, as per the design */
.bd-intro__text {
    max-width: 583px;
    margin: 12px 0 0 auto;
    color: #333333;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}
.bd2-intro__text {
    margin: 12px 0 0 auto;
    color: #333333;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

.bd-intro__rule {
    height: 0;
    margin: 92px 0 0;
    background: none;
    border: none;
    border-top: 1px solid #e2e5e9;
    opacity: 1;
}

@media (max-width: 1199.98px) {
    .bd-intro__body {
        margin-top: 56px;
    }

    .bd-intro__title {
        font-size: 38px;
    }

    .bd-intro__text {
        font-size: 17px;
    }

    .bd-intro__rule {
        margin-top: 70px;
    }
}

@media (max-width: 991.98px) {
    .bd-intro .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .bd-intro__body {
        margin-top: 40px;
    }

    /* Stacked: the copy runs full width under the heading */
    .bd-intro__text {
        max-width: none;
        margin: 24px 0 0;
    }

    .bd-intro__rule {
        margin-top: 52px;
    }
}

@media (max-width: 767.98px) {
    .bd-intro__crumbs {
        font-size: 14px;
    }

    .bd-intro__body {
        margin-top: 30px;
    }

    .bd-intro__title {
        font-size: 30px;
        line-height: 1.25;
    }

    .bd-intro__text {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.55;
    }

    .bd-intro__rule {
        margin-top: 40px;
    }
}

/* =========================================================
   Business Development – Import / Shipping + Joint Venture
   ========================================================= */
.bd-blocks__band {
    padding: 76px 0 96px;
    background-color: #ffffff;
}

.bd-blocks__band--tint {
    padding-top: 72px;
    background-color: #F2F2F6;
}

.bd-blocks .container {
    padding-left: 0;
    padding-right: 0;
}

/* overflow keeps the photo inside the card's rounded corners on every side,
   so the same rule covers both the reversed desktop layouts and the stack */
.bd-block {
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
}

.bd-block--bordered {
    border: 1px solid #e2e5e9;
}

.bd-block__media {
    display: flex;
    min-height: var(--media-min, 0);
}

.bd-block__media img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.bd-block__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 45px;
}

.bd-block__title {
    margin: 0 0 38px;
    color: #16222F;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.bd-block__text {
    margin: 0;
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}

.bd-block__text + .bd-block__text {
    margin-top: 26px;
}

@media (max-width: 1199.98px) {
    .bd-blocks__band {
        padding: 60px 0 72px;
    }

    .bd-blocks__band--tint {
        padding-top: 58px;
    }

    .bd-block__body {
        padding: 44px 40px;
    }

    .bd-block__title {
        margin-bottom: 28px;
        font-size: 38px;
    }
}

@media (max-width: 991.98px) {
    .bd-blocks__band {
        padding: 52px 0 60px;
    }

    .bd-blocks__band--tint {
        padding-top: 50px;
    }

    .bd-blocks .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Stacked: the photo sits on top at its natural aspect ratio */
    .bd-block__media {
        min-height: 0;
    }

    .bd-block__media img {
        height: auto;
    }

    .bd-block__body {
        padding: 36px 30px;
    }
}

@media (max-width: 767.98px) {
    .bd-blocks__band {
        padding: 42px 0 48px;
    }

    .bd-blocks__band--tint {
        padding-top: 40px;
    }

    .bd-block {
        border-radius: 12px;
    }

    .bd-block__body {
        padding: 28px 22px;
    }

    .bd-block__title {
        margin-bottom: 20px;
        font-size: 28px;
    }

    .bd-block__text {
        font-size: 15px;
        line-height: 1.65;
    }

    .bd-block__text + .bd-block__text {
        margin-top: 20px;
    }
}

/* =========================================================
   Business Development – Custom Synthesis
   ========================================================= */
.cs {
    position: relative;
    min-height: 665px;
    padding: 180px 0 0px;
    background-image: url("../images/Custom%20Synthesis.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Tint sits over the photo but under the card, so the image is never edited */
.cs::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(108, 120, 190, .52);
}

.cs .container {
    position: relative;
    z-index: 1;
    padding-left: 0;
    padding-right: 0;
}

.cs__card {
    max-width: 593px;
    padding: 60px;
    background-color: #EDEFF4;
    background-image: linear-gradient(210deg, #EBEEF3 0%, #EDEFF4 55%, #F7F8FA 100%);
    border-radius: 16px;
}

.cs__title {
    margin: 0 0 30px;
    color: #16222F;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.cs__text {
    margin: 0;
    color: #333333;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
}

@media (max-width: 1199.98px) {
    .cs {
        min-height: 0;
        padding: 130px 0 56px;
    }

    .cs__card {
        max-width: 540px;
        padding: 48px;
    }

    .cs__title {
        margin-bottom: 24px;
        font-size: 38px;
    }

    .cs__text {
        font-size: 16px;
    }
}

@media (max-width: 991.98px) {
    .cs {
        padding: 100px 0 48px;
    }

    .cs .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .cs__card {
        max-width: none;
        padding: 40px 36px;
    }

    .cs__title {
        font-size: 34px;
    }
}

@media (max-width: 767.98px) {
    .cs {
        padding: 64px 0 44px;
    }

    .cs .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cs__card {
        padding: 28px 22px;
        border-radius: 12px;
    }

    .cs__title {
        margin-bottom: 18px;
        font-size: 26px;
    }

    .cs__text {
        font-size: 15px;
        line-height: 1.65;
    }
}

/* =========================================================
   Business Development – Why Partner with Gyma
   ========================================================= */
.wpg {
    padding: 80px 0 92px;
    background-color: #ffffff;
}

.wpg .container {
    padding-left: 0;
    padding-right: 0;
}

.wpg__title {
    margin: 0;
    color: #16222F;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-align: center;
}

/* 32px gutters put three 418px cards across the 1320 container */
.wpg__grid {
    --bs-gutter-x: 32px;
    --bs-gutter-y: 32px;
    margin-top: 58px;
}

.wpg__card {
    height: 100%;
    padding: 48px 40px;
    background-color: #ffffff;
    border: 1px solid #e2e5e9;
    border-radius: 16px;
}

.wpg__icon {
    display: block;
    width: 60px;
    height: 65px;
}

.wpg__card-title {
    margin: 32px 0 0;
    color: #16222F;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.36;
    letter-spacing: -.01em;
}

.wpg__card-text {
    margin: 26px 0 0;
    color: #333333;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.45;
}

@media (max-width: 1199.98px) {
    .wpg {
        padding: 66px 0 76px;
    }

    .wpg__title {
        font-size: 38px;
    }

    .wpg__grid {
        --bs-gutter-x: 24px;
        --bs-gutter-y: 24px;
        margin-top: 44px;
    }

    .wpg__card {
        padding: 36px 30px;
    }

    .wpg__card-title {
        margin-top: 26px;
        font-size: 20px;
    }

    .wpg__card-text {
        margin-top: 20px;
        font-size: 16px;
    }
}

@media (max-width: 991.98px) {
    .wpg {
        padding: 56px 0 62px;
    }

    .wpg .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .wpg__grid {
        margin-top: 36px;
    }
}

@media (max-width: 767.98px) {
    .wpg {
        padding: 46px 0 52px;
    }

    .wpg__title {
        font-size: 30px;
    }

    .wpg__grid {
        --bs-gutter-y: 20px;
        margin-top: 28px;
    }

    .wpg__card {
        padding: 28px 24px;
    }

    .wpg__card-title {
        margin-top: 22px;
        font-size: 19px;
    }

    .wpg__card-text {
        font-size: 15px;
        line-height: 1.55;
    }
}

/* =========================================================
   Business Development – Our Services at a glance
   ========================================================= */
.svc {
    padding: 0px 0 70px;
    background-color: #ffffff;
    overflow: hidden;
}
.vet-svc{
    padding:70px 0 70px;
}

.svc__title {
    margin: 0 0 40px;
    color: #16222F;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-align: center;
}

/* The track runs the full viewport width so the neighbouring cards stay
   visible at both edges; Swiper clips whatever falls outside. */
.svc__swiper {
    width: 100%;
}

.svc__slide {
    width: 720px;
    max-width: calc(100vw - 48px);
    height: auto;
}

/* Reversed so the photo leads the card: in the reference the gap falls between
   a text panel and the image to its right, i.e. each image belongs to the text
   that follows it. Source order stays text-then-image for reading order. */
.svc__card {
    display: flex;
    flex-direction: row-reverse;
    height: 349px;
    border-radius: 12px;
    overflow: hidden;
}

.svc__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 48px;
    background-color: #F2F2F6;
}

.svc__media {
    flex: 0 0 309px;
}

.svc__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svc__card-title {
    margin: 0;
    color: #16222F;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.36;
    letter-spacing: -.01em;
}

.svc__card-text {
    max-width: 250px;
    margin: 22px 0 0;
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

/* Navigation */
.svc__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 44px;
}

.svc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid #DCDCE3;
    border-radius: 50%;
    color: #16222F;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.svc__btn:hover {
    background-color: var(--gyma-blue);
    border-color: var(--gyma-blue);
    color: #ffffff;
}

@media (max-width: 1199.98px) {
    .svc {
        padding: 50px 0 60px;
    }

    .svc__title {
        margin-bottom: 32px;
        font-size: 38px;
    }

    .svc__slide {
        width: 640px;
    }

    .svc__card {
        height: 320px;
    }

    .svc__body {
        padding: 0 36px;
    }

    .svc__media {
        flex-basis: 275px;
    }

    .svc__card-title {
        font-size: 20px;
    }

    .svc__nav {
        margin-top: 34px;
    }
}

@media (max-width: 767.98px) {
    .svc {
        padding: 42px 0 50px;
    }

    .svc__title {
        margin-bottom: 26px;
        font-size: 30px;
    }

    .svc__slide {
        width: 520px;
        max-width: calc(100vw - 32px);
    }

    .svc__card {
        height: 300px;
    }

    .svc__body {
        padding: 0 26px;
    }

    .svc__media {
        flex-basis: 200px;
    }

    .svc__card-title {
        font-size: 19px;
    }

    .svc__card-text {
        margin-top: 16px;
        font-size: 15px;
    }

    .svc__btn {
        width: 48px;
        height: 48px;
    }
}

/* Very small screens: the split card stops being readable, so stack it */
@media (max-width: 575.98px) {
    .svc__card {
        flex-direction: column;
        height: auto;
    }

    .svc__media {
        flex-basis: auto;
        order: -1;
    }

    .svc__media img {
        height: 200px;
    }

    .svc__body {
        padding: 26px;
    }

    .svc__card-text {
        max-width: none;
    }
}

/* =========================================================
   Business Development – Trusted by top manufacturers
   ========================================================= */
.tm {
	position: relative;
	padding: 70px 0 85px;
	background-color: #ffffff;
	overflow: hidden;
	border-top: 1px solid #e2e5e9;
	border-bottom: 1px solid #e2e5e9;
	margin-bottom: 50px;
}

/* Divider and tint are full-bleed, so they meet at the viewport centre while
   the copy stays on the container grid. */
.tm__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: #e2e5e9;
}

.tm__glow {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    background-image: radial-gradient(105% 105% at 104% 100%,
            #D6EBF8 0%,
            rgba(214, 235, 248, .55) 32%,
            rgba(214, 235, 248, 0) 68%);
}

.tm .container {
    position: relative;
    z-index: 1;
    padding-left: 0;
    padding-right: 0;
}

/* Left panel */
.tm__title {
    margin: 0;
    color: #16222F;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.21;
    letter-spacing: -.01em;
}

.tm__text {
    max-width: 500px;
    margin: 37px 0 0;
    color: #333333;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.53;
}

.tm__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 75px;
}

.tm__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid #C7CAD1;
    border-radius: 50%;
    color: #16222F;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.tm__btn:hover {
    background-color: var(--gyma-blue);
    border-color: var(--gyma-blue);
    color: #ffffff;
}

/* Right panel – only this side slides */
.tm__right {
    padding-left: 76px;
    padding-top: 24px;
}

.tm__quote {
    max-width: 510px;
    margin: 0;
    color: #16222F;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
}

.tm__person {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 48px 0 0;
}

.tm__person img {
    display: block;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
}

.tm__name,
.tm__role {
    display: block;
    line-height: 1.4;
}

.tm__name {
    color: #16222F;
    font-size: 16px;
    font-weight: 600;
}

.tm__role {
    margin-top: 6px;
    color: #333333;
    font-size: 16px;
    font-weight: 400;
}

@media (max-width: 1199.98px) {
    .tm {
        padding: 58px 0 66px;
    }

    .tm__title {
        font-size: 38px;
    }

    .tm__text {
        margin-top: 26px;
        font-size: 16px;
    }

    .tm__nav {
        margin-top: 50px;
    }

    .tm__right {
        padding-left: 48px;
    }

    .tm__quote {
        font-size: 17px;
    }

    .tm__person {
        margin-top: 36px;
    }
}

@media (max-width: 991.98px) {
    .tm {
        padding: 52px 0 58px;
    }

    .tm .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Stacked: the split rule becomes a horizontal one between the two blocks */
    .tm__divider {
        display: none;
    }

    .tm__glow {
        left: 0;
    }

    .tm__nav {
        margin-top: 36px;
    }

    .tm__right {
        margin-top: 36px;
        padding-top: 36px;
        padding-left: 0;
        border-top: 1px solid #e2e5e9;
    }

    .tm__quote {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .tm {
        padding: 42px 0 48px;
    }

    .tm__title {
        font-size: 30px;
    }

    .tm__text {
        margin-top: 20px;
        font-size: 15px;
    }

    .tm__nav {
        margin-top: 28px;
    }

    .tm__btn {
        width: 48px;
        height: 48px;
    }

    .tm__quote {
        font-size: 16px;
        line-height: 1.6;
    }

    .tm__person {
        gap: 16px;
        margin-top: 28px;
    }

    .tm__person img {
        width: 56px;
        height: 56px;
    }

    .tm__name,
    .tm__role {
        font-size: 15px;
    }
}

/* =========================================================
   Veterinary – Capabilities (accordion over photo)
   ========================================================= */
.vet-cap {
    padding: 92px 0 100px;
    overflow: hidden;
    background-color: #2f2c70;
    background-image:
        radial-gradient(128% 74% at 50% -8%, #1e49ab 0%, rgba(30, 73, 171, 0) 64%),
        linear-gradient(180deg, #24378a 0%, #2c2c73 46%, #383172 100%);
}

/* The design runs this section against the full 1320px container box */
.vet-cap .container {
    padding-left: 0;
    padding-right: 0;
}

.vet-cap__title {
    max-width: 1160px;
    margin: 0;
    color: #ffffff;
    font-size: 45px;
    font-weight: 500;
    line-height: 1.27;
    letter-spacing: -.01em;
}

.vet-cap__text {
    max-width: 1210px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.72;
}

/* The photo, the tint and the accordion all share this box; the design ratio
   keeps the desktop height, smaller screens fall back to the content height */
.vet-cap__stage {
    position: relative;
    display: flex;
    align-items: center;
    aspect-ratio: 1320 / 515;
    margin-top: 36px;
    border-radius: 16px;
    overflow: hidden;
}

.vet-cap__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cyan wash that carries the copy on the left and clears the cat on the right */
.vet-cap__overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg,
            rgba(0, 132, 186, .78) 0%,
            rgba(0, 154, 209, .58) 24%,
            rgba(0, 166, 224, .3) 44%,
            rgba(0, 166, 224, .08) 62%,
            rgba(0, 166, 224, 0) 78%);
}

/* The margin nudges the stack above the optical centre, as per the design */
.vet-cap__accordion {
    position: relative;
    width: 474px;
    max-width: 100%;
    margin: 0 0 40px 72px;
}

.vet-cap__item {
    background-color: #ffffff;
    border-radius: 12px;
    transition: background-color .3s ease;
}

.vet-cap__item + .vet-cap__item {
    margin-top: 22px;
}

.vet-cap__item.is-open {
    background-color: rgba(206, 238, 242, .92);
}

.vet-cap__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 14px 22px;
    background: none;
    border: none;
    text-align: left;
}

.vet-cap__item.is-open .vet-cap__head {
    padding-top: 22px;
    padding-bottom: 8px;
}

.vet-cap__head-title {
    color: #16222F;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

.vet-cap__icon {
    flex: 0 0 auto;
    display: flex;
    color: #16222F;
}

/* Minus once the panel is open – the upright stroke is the only difference */
.vet-cap__icon-bar {
    transform-origin: 50% 50%;
    transition: opacity .3s ease, transform .3s ease;
}

.vet-cap__item.is-open .vet-cap__icon-bar {
    opacity: 0;
    transform: rotate(90deg);
}

/* 0fr → 1fr animates the panel to its own height without measuring it in JS */
.vet-cap__panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s ease, opacity .3s ease;
}

.vet-cap__item.is-open .vet-cap__panel {
    grid-template-rows: 1fr;
    opacity: 1;
}

.vet-cap__panel-inner {
    min-height: 0;
    overflow: hidden;
}

.vet-cap__panel-text {
    margin: 0;
    padding: 6px 22px 24px;
    color: #16222F;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
}

@media (max-width: 1199.98px) {
    .vet-cap {
        padding: 72px 0 80px;
    }

    .vet-cap__title {
        font-size: 38px;
    }

    /* Below the design width the photo takes its height from the accordion */
    .vet-cap__stage {
        aspect-ratio: auto;
        padding: 56px 44px;
        margin-top: 42px;
    }

    .vet-cap__accordion {
        margin: 0;
    }
}

@media (max-width: 991.98px) {
    .vet-cap {
        padding: 60px 0 68px;
    }

    .vet-cap .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .vet-cap__title {
        font-size: 34px;
    }

    .vet-cap__text {
        margin-top: 22px;
        font-size: 16px;
        line-height: 1.75;
    }

    .vet-cap__stage {
        padding: 44px 36px;
        margin-top: 36px;
    }
}

@media (max-width: 767.98px) {
    .vet-cap {
        padding: 46px 0 52px;
    }

    .vet-cap__title {
        font-size: 28px;
        line-height: 1.25;
    }

    .vet-cap__text {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.7;
    }

    .vet-cap__stage {
        padding: 28px 16px;
        margin-top: 28px;
        border-radius: 12px;
    }

    /* Keeps the wash readable once the accordion covers the full width */
    .vet-cap__overlay {
        background-image: linear-gradient(120deg,
                rgba(0, 132, 186, .82) 0%,
                rgba(0, 154, 209, .64) 38%,
                rgba(0, 166, 224, .34) 66%,
                rgba(0, 166, 224, .12) 100%);
    }

    .vet-cap__accordion {
        width: 100%;
    }

    .vet-cap__item + .vet-cap__item {
        margin-top: 14px;
    }

    .vet-cap__head {
        padding: 14px 18px;
    }

    .vet-cap__head-title {
        font-size: 15px;
    }

    .vet-cap__panel-text {
        padding: 6px 18px 20px;
        font-size: 14px;
    }
}

/* =========================================================
   Veterinary – FAQs
   ========================================================= */
.vet-faq {
    padding: 20px 0 90px;
    background-color: #ffffff;
}

.vet-faq__title {
    margin: 0 0 36px;
    color: #16222F;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-align: center;
}

.vet-faq__list {
    max-width: 936px;
    margin: 0 auto;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
}

/* The rules run edge to edge, so the last row leans on the container border */
.vet-faq__item + .vet-faq__item {
    border-top: 1px solid #e8e8e8;
}

.vet-faq__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 25px 32px;
    background: none;
    border: none;
    text-align: left;
}

.vet-faq__item.is-open .vet-faq__head {
    padding-top: 26px;
    padding-bottom: 0;
}

.vet-faq__question {
    color: #16222F;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.45;
}

.vet-faq__item.is-open .vet-faq__question {
    font-weight: 600;
}

.vet-faq__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.vet-faq__icon-img {
    display: block;
    width: 24px;
    height: 24px;
}

.vet-faq__icon-img--close,
.vet-faq__item.is-open .vet-faq__icon-img--plus {
    display: none;
}

.vet-faq__item.is-open .vet-faq__icon-img--close {
    display: block;
}

/* 0fr → 1fr animates the answer to its own height without measuring it in JS */
.vet-faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s ease, opacity .3s ease;
}

.vet-faq__item.is-open .vet-faq__panel {
    grid-template-rows: 1fr;
    opacity: 1;
}

.vet-faq__panel-inner {
    min-height: 0;
    overflow: hidden;
}

/* max-width covers the padding too, so the copy keeps the reference measure */
.vet-faq__answer {
    max-width: 856px;
    margin: 0;
    padding: 16px 32px 24px;
    color: #4a4a4a;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}

@media (max-width: 1199.98px) {
    .vet-faq {
        padding: 60px 0 76px;
    }

    .vet-faq__title {
        margin-bottom: 32px;
        font-size: 38px;
    }
}

@media (max-width: 991.98px) {
    .vet-faq {
        padding: 52px 0 64px;
    }

    .vet-faq__title {
        font-size: 34px;
    }

    .vet-faq__head {
        padding: 22px 26px;
    }

    .vet-faq__answer {
        padding: 14px 26px 22px;
    }
}

@media (max-width: 767.98px) {
    .vet-faq {
        padding: 42px 0 52px;
    }

    .vet-faq__title {
        margin-bottom: 24px;
        font-size: 28px;
    }

    .vet-faq__head {
        gap: 16px;
        padding: 18px 18px;
    }

    .vet-faq__question {
        font-size: 16px;
        line-height: 1.5;
    }

    /* The row grows with the wrapped question, so pin the icon to the first line */
    .vet-faq__icon {
        align-self: flex-start;
        margin-top: 1px;
        width: 20px;
        height: 20px;
    }

    .vet-faq__icon-img {
        width: 20px;
        height: 20px;
    }

    .vet-faq__answer {
        padding: 12px 18px 20px;
        font-size: 15px;
        line-height: 1.65;
    }
}

/* =========================================================
   Biotech – Basic Research Products & Services
   ========================================================= */
.bio-research {
    padding: 80px 0 90px;
    background-color: #F2F2F6;
}

.bio-research__title {
    margin: 0 0 22px;
    color: #16222F;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-align: center;
}

/* Bootstrap drives the switching; everything below is this section's own skin,
   scoped so the shared .nav / .nav-link defaults stay untouched elsewhere */
.bio-research__tabs {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 3px;
    flex-wrap: nowrap;
    background-color: #FAFAFC;
    border: 1px solid #E4E4EA;
    border-radius: 10px;
}

.bio-research__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    padding: 0 17px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #8A8A93;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease;
}

.bio-research__tab:hover {
    color: #16222F;
}

.bio-research__tab.active {
    background-color: #2E2A6B;
    color: #ffffff;
}

.bio-research__content {
    margin-top: 42px;
}

.bio-research__card {
    display: flex;
    align-items: center;
    gap: 63px;
    max-width: 1023px;
    margin: 0 auto;
    padding: 32px;
    background-color: #ffffff;
    border: 1px solid #E8E8EE;
    border-radius: 12px;
}

.bio-research__media {
    flex: 0 0 auto;
}

.bio-research__media img {
    display: block;
    width: 362px;
    height: 258px;
    object-fit: contain;
    border-radius: 12px;
}

.bio-research__body {
    flex: 1 1 0;
    min-width: 0;
}

.bio-research__name {
    margin: 0;
    color: #1C2670;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

/* The copy keeps the reference measure rather than filling the whole column */
.bio-research__text {
    max-width: 505px;
    margin: 18px 0 0;
    color: #333333;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
}

@media (max-width: 1199.98px) {
    .bio-research {
        padding: 64px 0 76px;
    }

    .bio-research__title {
        font-size: 38px;
    }

    .bio-research__card {
        gap: 40px;
        padding: 28px;
    }
}

@media (max-width: 991.98px) {
    .bio-research {
        padding: 56px 0 64px;
    }

    .bio-research__title {
        font-size: 34px;
    }

    .bio-research__content {
        margin-top: 34px;
    }

    .bio-research__card {
        gap: 30px;
        padding: 24px;
    }

    /* Fixed basis, no shrink – the text column absorbs the remaining width */
    .bio-research__media {
        flex: 0 0 280px;
    }

    .bio-research__media img {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 767.98px) {
    .bio-research {
        padding: 44px 0 52px;
    }

    .bio-research__title {
        margin-bottom: 20px;
        font-size: 28px;
    }

    /* Narrow screens scroll the strip rather than pushing the page sideways */
    .bio-research__tabs {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bio-research__tab {
        height: 38px;
        padding: 0 16px;
        font-size: 14px;
    }

    .bio-research__content {
        margin-top: 26px;
    }

    .bio-research__card {
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
        padding: 18px;
        border-radius: 10px;
    }

    .bio-research__media {
        flex: 0 0 auto;
    }

    .bio-research__media img {
        width: 100%;
        max-width: 362px;
        margin: 0 auto;
    }

    .bio-research__name {
        font-size: 18px;
    }

    .bio-research__text {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.7;
    }
}

/* =========================================================
   Biotech – Experimental Services
   ========================================================= */
.bio-exp {
    padding: 112px 0;
    overflow: hidden;
    background-color: #2f2c70;
    background-image:
        radial-gradient(90% 120% at 0% 10%, rgba(58, 96, 200, .34) 0%, rgba(58, 96, 200, 0) 64%),
        linear-gradient(180deg, #2b3c90 0%, #2d3381 42%, #383274 78%, #342f6e 100%);
}

/* The design runs this section against the full 1320px container box */
.bio-exp .container {
    padding-left: 0;
    padding-right: 0;
}

/* g-0 drops the gutter, so the copy column carries the column gap itself */
.bio-exp__body {
    padding-right: 24px;
}

.bio-exp__title {
    margin: 0;
    color: #ffffff;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.01em;
}

/* Holds the reference measure – the copy stops short of the column edge */
.bio-exp__text {
    max-width: 618px;
    margin: 32px 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.72;
}

.bio-exp__media {
    display: flex;
    justify-content: flex-end;
}

.bio-exp__media img {
    display: block;
    width: 615px;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

@media (max-width: 1199.98px) {
    .bio-exp {
        padding: 84px 0;
    }

    .bio-exp__title {
        font-size: 38px;
    }

    .bio-exp__text {
        margin-top: 26px;
    }
}

@media (max-width: 991.98px) {
    .bio-exp {
        padding: 66px 0;
    }

    .bio-exp .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .bio-exp__title {
        font-size: 34px;
    }

    /* Stacked: the photo sits under the copy at the column's own width */
    .bio-exp__body {
        padding-right: 0;
    }

    .bio-exp__media {
        justify-content: flex-start;
        margin-top: 40px;
    }
}

@media (max-width: 767.98px) {
    .bio-exp {
        padding: 48px 0;
    }

    .bio-exp__title {
        font-size: 28px;
        line-height: 1.25;
    }

    .bio-exp__text {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.7;
    }

    .bio-exp__media {
        margin-top: 30px;
    }

    .bio-exp__media img {
        border-radius: 14px;
    }
}

/* =========================================================
   Scientific & Regulatory Affairs – What sets us apart
   ========================================================= */
.sra-apart {
    padding: 66px 0 64px;
    background-color: #ffffff;
}

/* The design runs this section against the full 1320px container box */
.sra-apart .container {
    padding-left: 0;
    padding-right: 0;
}

.sra-apart__inner {
    display: flex;
    align-items: flex-start;
}

/* Both columns shrink together, so the overlap survives narrower desktops */
.sra-apart__media {
    flex: 0 1 645px;
    min-width: 0;
}

.sra-apart__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* The heavier right border is the cyan accent – the radius blends it into the
   hairline on the other three sides, exactly as per the design */
.sra-apart__card {
    flex: 0 1 662px;
    min-width: 0;
    margin: 66px 0 0 -45px;
    padding: 50px 56px;
    background-color: #ffffff;
    border: 1px solid #ECECF1;
    border-right: 3px solid var(--gyma-blue);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(16, 34, 47, .08);
}

.sra-apart__title {
    margin: 0;
    color: #16222F;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}

/* Holds the reference measure, which is a touch tighter than the card allows */
.sra-apart__text {
    max-width: 536px;
    margin: 18px 0 0;
    color: #333333;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.83;
}

@media (max-width: 1199.98px) {
    .sra-apart {
        padding: 56px 0 60px;
    }

    .sra-apart__card {
        margin-top: 54px;
        padding: 38px 40px;
    }

    .sra-apart__title {
        font-size: 25px;
    }
}

@media (max-width: 991.98px) {
    .sra-apart {
        padding: 48px 0 52px;
    }

    .sra-apart .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Stacked: the card keeps its overlap, riding up over the photo's foot */
    .sra-apart__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .sra-apart__media {
        flex: 0 0 auto;
    }

    .sra-apart__card {
        flex: 0 0 auto;
        width: calc(100% - 48px);
        margin: -60px auto 0;
    }
}

@media (max-width: 767.98px) {
    .sra-apart {
        padding: 40px 0 44px;
    }

    .sra-apart__media img {
        border-radius: 12px;
    }

    .sra-apart__card {
        width: calc(100% - 24px);
        margin-top: -40px;
        padding: 28px 22px;
        border-radius: 12px;
    }

    .sra-apart__title {
        font-size: 22px;
    }

    .sra-apart__text {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.7;
    }
}

/* =========================================================
   Scientific & Regulatory Affairs – Regulatory Stats
   ========================================================= */
.sra-stats {
    padding: 60px 0 35px;
    position: relative;
}
.sra-stats::after {
	content: '';
	background: #f2f2f6;
	width: 100%;
	position: absolute;
	height: 30%;
	bottom: 0;
	z-index: -1;
}
/* The design runs this section against the full 1320px container box */
.sra-stats .container {
    padding-left: 0;
    padding-right: 0;
}

.sra-stats__panel {
    padding: 72px 136px 52px;
    background-color: #2a2966;
    background-image: linear-gradient(150deg, #2e2d73 0%, #2a2966 55%, #242252 100%);
    border-radius: 24px;
}

.sra-stats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 75px;
}

/* The hairline above each column is the item's own top rule */
.sra-stats__item {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    border-radius: 15px 15px 0 0;
}

.sra-stats__num {
    display: block;
    color: var(--gyma-blue);
    font-size: 68px;
    font-weight: 400;
    line-height: 1.1;
}

.sra-stats__label {
    margin: 15px 0 0;
    color: rgba(255, 255, 255, .92);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.53;
}

@media (max-width: 1199.98px) {
    .sra-stats {
        padding: 52px 0 48px;
    }

    .sra-stats__panel {
        padding: 58px 60px 48px;
    }

    .sra-stats__grid {
        gap: 44px;
    }

    .sra-stats__num {
        font-size: 56px;
    }

    .sra-stats__item {
        padding-top: 12px;
    }

    .sra-stats__label {
        margin-top: 13px;
        font-size: 17px;
    }
}

@media (max-width: 991.98px) {
    .sra-stats .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .sra-stats__panel {
        padding: 46px 36px 40px;
    }

    .sra-stats__grid {
        gap: 30px;
    }

    .sra-stats__num {
        font-size: 46px;
    }

    .sra-stats__item {
        padding-top: 10px;
    }

    .sra-stats__label {
        margin-top: 12px;
        font-size: 16px;
    }
}

@media (max-width: 767.98px) {
    .sra-stats {
        padding: 40px 0 44px;
    }

    /* Stacked: each stat keeps its own rule, so the rhythm carries over */
    .sra-stats__panel {
        padding: 34px 26px 38px;
        border-radius: 18px;
    }

    .sra-stats__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sra-stats__num {
        font-size: 42px;
    }

    .sra-stats__label {
        font-size: 15px;
    }
}

/* =========================================================
   Scientific & Regulatory Affairs – ANDA / 505(b)(2)
   ========================================================= */
.sra-anda {
    padding: 70px 0;
    background-color: #F2F2F6;
}

/* The design runs this section against the full 1320px container box */
.sra-anda .container {
    padding-left: 0;
    padding-right: 0;
}

/* overflow keeps the photo inside the card's rounded corners on the right */
.sra-anda__card {
    display: flex;
    align-items: stretch;
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
}

/* Both columns shrink together, so the split holds on narrower desktops */
.sra-anda__body {
    flex: 0 1 697px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 65px;
}

/* The ratio gives the card its height; the photo then fills whatever the
   flex line settles on, so the copy can never leave a gap beneath it */
.sra-anda__media {
    position: relative;
    flex: 0 1 623px;
    min-width: 0;
    aspect-ratio: 623 / 597;
}

.sra-anda__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sra-anda__title {
    margin: 0;
    color: #16222F;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -.01em;
}

/* Holds the reference measure, a shade tighter than the column allows */
.sra-anda__text {
    max-width: 556px;
    margin: 30px 0 0;
    color: #333333;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
}

.sra-anda__text + .sra-anda__text {
    margin-top: 26px;
}

@media (max-width: 1199.98px) {
    .sra-anda {
        padding: 110px 0 76px;
    }

    .sra-anda__body {
        padding: 36px 44px;
    }

    .sra-anda__title {
        font-size: 38px;
    }

    .sra-anda__text {
        margin-top: 24px;
    }
}

@media (max-width: 991.98px) {
    .sra-anda {
        padding: 80px 0 64px;
    }

    .sra-anda .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Stacked: the copy sits above the photo, which keeps the card's radius */
    .sra-anda__card {
        flex-direction: column;
    }

    .sra-anda__body {
        flex: 0 0 auto;
        padding: 44px 40px;
    }

    .sra-anda__media {
        flex: 0 0 auto;
        aspect-ratio: 16 / 10;
    }

    .sra-anda__title {
        font-size: 34px;
    }
}

@media (max-width: 767.98px) {
    .sra-anda {
        padding: 52px 0 48px;
    }

    .sra-anda__card {
        border-radius: 14px;
    }

    .sra-anda__body {
        padding: 30px 22px;
    }

    .sra-anda__media {
        aspect-ratio: 4 / 3;
    }

    .sra-anda__title {
        font-size: 27px;
        line-height: 1.3;
    }

    .sra-anda__text {
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.65;
    }

    .sra-anda__text + .sra-anda__text {
        margin-top: 20px;
    }
}

/* =========================================================
   Scientific & Regulatory Affairs – Regulatory Filing Updates
   ========================================================= */
.rfu {
    padding: 78px 0 80px;
    background-color: #ffffff;
}

/* The design runs this section against the full 1320px container box */
.rfu .container {
    padding-left: 0;
    padding-right: 0;
}

.rfu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 55px;
}

.rfu__title {
    margin: 0;
    color: #16222F;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.rfu__nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rfu__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid #C7CAD1;
    border-radius: 50%;
    color: #16222F;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.rfu__btn:hover {
    border-color: var(--gyma-blue);
    color: var(--gyma-blue);
}

/* Slides stretch so every card in the row shares the tallest height */
.rfu__slide {
    height: auto;
}

.rfu__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 355px;
    padding: 34px 40px 52px;
    border-radius: 12px;
}

.rfu__card--grey {
    background-color: #F4F4F4;
}

.rfu__card--cyan {
    background-color: #C9E8EE;
}

.rfu__card--blue {
    background-color: #CFE3F8;
}

.rfu__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    background-color: #ffffff;
    border-radius: 6px;
    color: #16222F;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .02em;
}

.rfu__badge-dot {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    background-color: #0FC9A9;
}

.rfu__card-title {
    margin: 33px 0 0;
    color: #16222F;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65;
}

.rfu__card-text {
    margin: 19px 0 0;
    color: #6E7480;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

/* auto margin drops the link onto the card's baseline, whatever the copy runs to */
.rfu__link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 0 14px 9px 0;
    border-bottom: 1px solid #A9B2C0;
    color: #1D6FD8;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: color .25s ease, border-color .25s ease;
}

.rfu__link:hover {
    border-bottom-color: #1D6FD8;
    color: #1D6FD8;
}

@media (max-width: 1199.98px) {
    .rfu {
        padding: 62px 0 66px;
    }

    .rfu__head {
        margin-bottom: 40px;
    }

    .rfu__title {
        font-size: 38px;
    }

    .rfu__card {
        min-height: 330px;
        padding: 28px 30px 32px;
    }
}

@media (max-width: 991.98px) {
    .rfu {
        padding: 54px 0 58px;
    }

    .rfu .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .rfu__title {
        font-size: 34px;
    }

    .rfu__btn {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 767.98px) {
    .rfu {
        padding: 44px 0 48px;
    }

    .rfu__head {
        margin-bottom: 30px;
    }

    .rfu__title {
        font-size: 28px;
    }

    .rfu__btn {
        width: 44px;
        height: 44px;
    }

    .rfu__card {
        min-height: 300px;
        padding: 24px 24px 28px;
    }

    .rfu__card-title {
        font-size: 17px;
    }
}

/* =========================================================
   Featured APIs - marquee item modal
   Additive only: the .api-marquee__item rules above are untouched,
   this just adds the click affordance and the shared dialog.
   ========================================================= */

.api-marquee__item {
    cursor: pointer;
}

.api-marquee__item:focus-visible {
    outline: 2px solid var(--gyma-blue);
    outline-offset: 2px;
}

.has-api-modal {
    overflow: hidden;
}

.api-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.api-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.api-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(22, 34, 47, .55);
}

.api-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 36px 40px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(22, 34, 47, .22);
    transform: translateY(16px);
    transition: transform .25s ease;
}

.api-modal.is-visible .api-modal__dialog {
    transform: translateY(0);
}

.api-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    color: #16222F;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}

.api-modal__close:hover {
    background-color: #F1F3F6;
    color: var(--gyma-blue);
}

.api-modal__title {
    margin: 0 0 12px;
    padding-right: 34px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: #16222F;
}

.api-modal__text {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #56606B;
}

@media (max-width: 767.98px) {
    .api-modal {
        padding: 16px;
    }

    .api-modal__dialog {
        max-height: calc(100vh - 32px);
        padding: 28px 22px;
        border-radius: 14px;
    }

    .api-modal__title {
        font-size: 20px;
    }

    .api-modal__text {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .api-modal,
    .api-modal__dialog {
        transition: none;
    }
}