@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
  
  
  :root {
     --navy: #10365b;
     --blue: #087fb5;
     --teal: #35c4b0;
     --ink: #19344d;
     --muted: #718294;
     --light: #f3f8fb;
     --white: #fff;
     --line: #e2edf3;
     --radius: 22px;
 }

 * {
     box-sizing: border-box
 }

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

 body {
     margin: 0;
     font-family: 'DM Sans', sans-serif;
     color: var(--ink);
     overflow-x: hidden;
     background: #fff;
 }

 h1,
 h2,
 h3,
 h4,
 h5 {
     font-family: 'Manrope', sans-serif;
     font-weight: 800;
 }

 a {
     transition: all .25s ease
 }

 img {
     max-width: 100%
 }

 .section-pad {
     padding: 100px 0
 }

 .section-kicker {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: var(--blue);
     font-size: 12px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 17px
 }

 .section-kicker:before {
     content: "";
     width: 26px;
     height: 3px;
     background: var(--teal);
     border-radius: 3px
 }

 .section-title {
     font-size: clamp(30px, 4vw, 49px);
     line-height: 1.17;
     letter-spacing: -1.7px;
     color: var(--navy);
     margin-bottom: 20px
 }

 .section-copy {
     color: var(--muted);
     font-size: 16px;
     line-height: 1.9
 }

 .btn-main {
     background: var(--teal);
     color: var(--navy);
     border: 1px solid var(--teal);
     border-radius: 50px;
     padding: 14px 24px;
     font-weight: 800;
     font-size: 13px;
     display: inline-flex;
     align-items: center;
     gap: 13px;
     text-decoration: none;
     color: #ffffff;
 }

 .btn-main:hover {
     background: #fff;
     color: var(--navy);
     transform: translateY(-3px)
 }

 .btn-outline-light {
     border: 1px solid rgba(255, 255, 255, .75);
     border-radius: 50px;
     padding: 13px 24px;
     color: #fff;
     font-size: 13px;
     font-weight: 700
 }

 .btn-outline-light:hover {
     background: #fff;
     color: var(--navy)
 }

 /* HEADER */
 .topbar {
     background: var(--navy);
     color: #d9e7f2;
     font-size: 12px;
     padding: 9px 0
 }

 .topbar a {
     color: #fff;
     text-decoration: none
 }

 .topbar .top-item {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     margin-right: 22px
 }

 .topbar i {
     color: var(--teal)
 }

 .main-nav {
     background: rgba(255, 255, 255, .97);
     border-bottom: 1px solid rgba(16, 54, 91, .08);
     position: sticky;
     top: 0;
     z-index: 1000;
     transition: box-shadow .3s ease
 }

 .main-nav.scrolled {
     box-shadow: 0 8px 30px rgba(16, 54, 91, .09)
 }

 .navbar {
     padding: 13px 0
 }

 .brand-logo {
     width: 175px;
     height: auto;
     max-height: 64px;
     object-fit: contain
 }

 .navbar-nav {
     align-items: center
 }

 .navbar-nav .nav-link {
     color: var(--navy) !important;
     font-weight: 700;
     font-size: 12px;
     padding: 15px 13px !important;
     white-space: nowrap
 }

 .navbar-nav .nav-link:hover,
 .navbar-nav .active>.nav-link {
     color: var(--blue) !important
 }

 .dropdown-menu {
     border: 1px solid var(--line);
     border-radius: 15px;
     padding: 12px;
     min-width: 235px;
     margin-top: 0;
     box-shadow: 0 18px 45px rgba(16, 54, 91, .12)
 }

 .dropdown-item {
     padding: 11px 13px;
     border-radius: 9px;
     color: var(--ink);
     font-size: 13px;
     font-weight: 600;
     white-space: normal
 }

 .dropdown-item:hover {
     background: #eff9fb;
     color: var(--blue)
 }

 .nav-cta {
     margin-left: 12px;
     font-size: 12px;
     padding: 12px 17px
 }

 .dropdown-toggle:after {
     vertical-align: middle;
     margin-left: 5px
 }

 @media(min-width:992px) {
     .navbar .dropdown:hover>.dropdown-menu {
         display: block;
         animation: dropIn .2s ease
     }
 }

 @keyframes dropIn {
     from {
         opacity: 0;
         transform: translateY(8px)
     }

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

 /* HERO SLIDER */
 .hero {
     height: calc(100vh - 40px);
     min-height: 600px;
     max-height: 900px;
     position: relative;
     background: #092744
 }

 .hero .carousel,
 .hero .carousel-inner,
 .hero .carousel-item {
     height: 100%
 }

 .hero .carousel-item {
     position: relative;
     overflow: hidden
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     animation: heroZoom 9s ease-in-out infinite alternate
 }

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

     to {
         transform: scale(1.09)
     }
 }

 .hero .carousel-item:after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(5, 27, 49, .82) 0%, rgba(7, 34, 57, .45) 53%, rgba(7, 34, 57, .08) 100%),
         linear-gradient(0deg, rgba(5, 27, 49, .22), transparent 40%)
 }

 .hero-caption {
     position: absolute;
     z-index: 2;
     left: 10%;
     top: 50%;
     transform: translateY(-43%);
     width: min(720px, 78%);
     color: #fff
 }

 .hero-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: #a4f4e8;
     text-transform: uppercase;
     font-size: 11px;
     letter-spacing: 3px;
     font-weight: 800;
     margin-bottom: 22px
 }

 .hero-eyebrow:before {
     content: "";
     width: 35px;
     height: 2px;
     background: var(--teal)
 }

 .hero-caption h1 {
     font-size: clamp(42px, 6.1vw, 80px);
     line-height: 1.04;
     letter-spacing: -3px;
     margin-bottom: 22px;
     max-width: 750px
 }

 .hero-caption h1 span {
     color: #6ce1d2
 }

 .hero-caption p {
     font-size: 17px;
     line-height: 1.8;
     color: #e1edf5;
     max-width: 550px;
     margin-bottom: 30px
 }

 .hero-actions {
     display: flex;
     align-items: center;
     gap: 13px;
     flex-wrap: wrap
 }

 .hero .carousel-indicators {
     bottom: 27px;
     justify-content: flex-start;
     left: 8%;
     margin-left: 0
 }

 .hero .carousel-indicators li {
     width: 30px;
     height: 3px;
     border: 0;
     border-radius: 5px;
     opacity: .5;
     background: #fff;
     margin-right: 8px
 }

 .hero .carousel-indicators li.active {
     width: 54px;
     background: var(--teal);
     opacity: 1
 }

 .hero-control {
     position: absolute;
     z-index: 5;
     right: 5%;
     bottom: 60px;
     display: flex;
     gap: 10px
 }

 .hero-control a {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, .6);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none
 }

 .hero-control a:hover {
     background: var(--teal);
     color: var(--navy);
     border-color: var(--teal)
 }

 /* MOVING STRIP */
 .trust-strip {
     background: var(--navy);
     color: #fff;
     overflow: hidden;
     padding: 21px 0
 }

 .strip-track {
     display: flex;
     align-items: center;
     justify-content: space-around;
     gap: 45px;
     min-width: 850px
 }

 .strip-item {
     display: flex;
     align-items: center;
     gap: 12px;
     white-space: nowrap;
     font-family: 'Manrope', sans-serif;
     font-size: 12px;
     font-weight: 800;
     letter-spacing: 1px;
     text-transform: uppercase
 }

 .strip-item i {
     font-size: 18px;
     color: var(--teal)
 }

 /* ABOUT */
 .about-section {
     overflow: hidden;
     position: relative
 }

 .about-visual {
     position: relative;
     padding: 0 25px 35px 0
 }

 .about-image {
     width: 100%;
     height: 490px;
     object-fit: cover;
     border-radius: 25px;
     background: #e8f2f7
 }

 .about-visual:after {
     content: "";
     position: absolute;
     z-index: -1;
     right: 0;
     bottom: 0;
     width: 72%;
     height: 70%;
     border-radius: 25px;
     background: #dff6f1
 }

 .about-badge {
     position: absolute;
     right: 0;
     bottom: 10px;
     background: #fff;
     padding: 23px 25px;
     border-radius: 18px;
     box-shadow: 0 15px 45px rgba(16, 54, 91, .13);
     max-width: 205px
 }

 .about-badge i {
     font-size: 24px;
     color: var(--blue);
     margin-bottom: 10px
 }

 .about-badge strong {
     display: block;
     color: var(--navy);
     font-size: 15px
 }

 .about-badge span {
     display: block;
     color: var(--muted);
     font-size: 12px;
     line-height: 1.6;
     margin-top: 5px
 }

 .about-points {
     display: flex;
     gap: 14px;
     margin-top: 26px
 }

 .about-point {
     display: flex;
     gap: 11px;
     align-items: flex-start;
     flex: 1;
     font-size: 12px;
     font-weight: 800;
     line-height: 1.6
 }

 .about-point i {
     color: var(--blue);
     font-size: 17px;
     margin-top: 2px
 }

 /* ANIMATED STATS */
 .stats-section {
     padding: 0 0 90px
 }

 .stats-wrap {
     background: linear-gradient(120deg, #0e3558, #087db1);
     border-radius: 24px;
     padding: 38px 22px;
     color: #fff;
     position: relative;
     overflow: hidden
 }

 .stats-wrap:before,
 .stats-wrap:after {
     content: "";
     position: absolute;
     border: 1px solid rgba(255, 255, 255, .12);
     width: 230px;
     height: 230px;
     border-radius: 50%;
     pointer-events: none
 }

 .stats-wrap:before {
     top: -145px;
     right: 14%
 }

 .stats-wrap:after {
     bottom: -180px;
     left: 25%
 }

 .stat-item {
     position: relative;
     z-index: 1;
     text-align: center;
     padding: 14px 8px
 }

 .stat-item i {
     font-size: 22px;
     color: var(--teal);
     margin-bottom: 13px
 }

 .stat-number {
     font-family: 'Manrope', sans-serif;
     font-size: 39px;
     font-weight: 800;
     line-height: 1.2
 }

 .stat-label {
     font-size: 11px;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: #d6e8f3;
     margin-top: 8px
 }

 /* PRODUCTS */
 .products-section {
     background: var(--light);
     position: relative;
     overflow: hidden
 }

 .products-section:before {
     content: "";
     position: absolute;
     top: 80px;
     right: -120px;
     width: 300px;
     height: 300px;
     border: 1px solid #dceaf1;
     border-radius: 50%
 }

 .products-heading {
     position: relative;
     z-index: 1
 }

 .product-card {
     background: #fff;
     /* border: 1px solid #e7eff4; */
     border-radius: 20px;
     overflow: hidden;
     height: 100%;
     position: relative;
     transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease
 }

 .product-card:hover {
     transform: translateY(-9px);
     box-shadow: 0 25px 55px rgba(16, 54, 91, .1);
     border-color: #c5eae4
 }

 .product-art {
     height: 205px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     background: linear-gradient(145deg, #f0f8fb, #e6f6f4)
 }

 .product-art:before {
     content: "";
     position: absolute;
     width: 165px;
     height: 165px;
     border-radius: 50%;
     border: 1px solid rgba(8, 127, 181, .13);
     display: none;
 }

 .product-art:after {
     content: "";
     position: absolute;
     width: 125px;
     height: 125px;
     border-radius: 50%;
     border: 1px solid rgba(8, 127, 181, .13);
     display: none;
 }

 .product-symbol {
     z-index: 1;
     width: 90px;
     height: 110px;
     border-radius: 15px 15px 19px 19px;
     background: linear-gradient(110deg, #fff, #e9f1f7 52%, #fff);
     box-shadow: 8px 15px 23px rgba(16, 54, 91, .16);
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform .35s ease
 }

 .product-card:hover .product-symbol {
     transform: translateY(-5px) rotate(-3deg)
 }

 .product-symbol:before {
     content: "";
     position: absolute;
     top: -13px;
     left: 25px;
     width: 40px;
     height: 15px;
     border-radius: 5px 5px 2px 2px;
     background: var(--navy)
 }

 .product-symbol .label {
     width: 100%;
     padding: 10px 4px;
     text-align: center;
     background: #fff;
     border-top: 4px solid var(--product-color);
     border-bottom: 3px solid var(--product-color);
     font-family: 'Manrope', sans-serif;
     font-size: 9px;
     font-weight: 800;
     color: var(--navy);
     line-height: 1.4
 }

 .product-art .art-glow {
     position: absolute;
     width: 75px;
     height: 75px;
     border-radius: 50%;
     background: var(--product-color);
     opacity: .12;
     filter: blur(5px)
 }

 .product-info {
     padding: 23px 22px 25px
 }

 .product-category {
     font-size: 10px;
     font-weight: 800;
     letter-spacing: 1.3px;
     text-transform: uppercase;
     color: var(--blue);
     margin-bottom: 9px
 }

 .product-info h3 {
     font-size: 19px;
     color: var(--navy);
     margin-bottom: 10px
 }

 .product-info p {
     font-size: 12px;
     line-height: 1.8;
     color: var(--muted);
     margin-bottom: 18px
 }

 .product-link {
     color: var(--navy);
     font-size: 12px;
     font-weight: 800;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 9px
 }

 .product-link i {
     color: var(--blue);
     transition: transform .25s ease
 }

 .product-link:hover {
     color: var(--blue)
 }

 .product-link:hover i {
     transform: translateX(5px)
 }

 .product-note {
     font-size: 12px;
     color: var(--muted);
     margin-top: 25px
 }

 /* THERAPEUTIC AREAS */
 .areas-section {
     background: #fff
 }

 .area-card {
     min-height: 260px;
     border-radius: 20px;
     padding: 30px 27px;
     background: #f3f8fb;
     /* border: 1px solid #e9f0f4; */
     position: relative;
     overflow: hidden;
     height: 100%;
     transition: all .35s ease
 }

 .area-card:hover {
     background: var(--navy);
     transform: translateY(-7px);
     border-color: var(--navy)
 }

 .area-icon {
     width: 55px;
     height: 55px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #dff7f1;
     color: #087e9f;
     border-radius: 16px;
     font-size: 22px;
     margin-bottom: 25px
 }

 .area-card h3 {
     font-size: 19px;
     color: var(--navy);
     margin-bottom: 12px;
     position: relative;
     z-index: 1
 }

 .area-card p {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.8;
     margin: 0;
     position: relative;
     z-index: 1
 }

 .area-card:hover h3 {
     color: #fff
 }

 .area-card:hover p {
     color: #d5e5ef
 }

 .area-card .area-bg-icon {
     position: absolute;
     right: -12px;
     bottom: -25px;
     font-size: 120px;
     color: var(--blue);
     opacity: .055;
     transition: all .4s ease
 }

 .area-card:hover .area-bg-icon {
     opacity: .16;
     transform: rotate(-12deg) scale(1.1)
 }

 /* QUALITY FEATURE */
 .quality-section {
     background: #f4f9fb;
     overflow: hidden
 }

 .quality-image-wrap {
     position: relative
 }

 .quality-image {
     height: 520px;
     width: 100%;
     object-fit: cover;
     border-radius: 25px
 }

 .quality-floating {
     position: absolute;
     bottom: 25px;
     left: -20px;
     max-width: 230px;
     padding: 22px;
     background: var(--teal);
     border-radius: 16px;
     color: var(--navy);
     box-shadow: 0 15px 40px rgba(16, 54, 91, .14);
     color: #ffffff;
 }

 .quality-floating i {
     font-size: 24px;
     margin-bottom: 12px
 }

 .quality-floating strong {
     display: block;
     font-size: 15px
 }

 .quality-floating span {
     font-size: 12px;
     line-height: 1.6;
     display: block;
     margin-top: 7px
 }

 .quality-list {
     list-style: none;
     padding: 0;
     margin: 26px 0
 }

 .quality-list li {
     display: flex;
     gap: 13px;
     margin-bottom: 17px;
     align-items: flex-start
 }

 .quality-list i {
     color: var(--blue);
     margin-top: 5px
 }

 .quality-list strong {
     font-size: 14px;
     color: var(--navy);
     display: block;
     margin-bottom: 4px
 }

 .quality-list span {
     font-size: 12px;
     color: var(--muted);
     line-height: 1.7;
     display: block
 }

 /* CTA */
 .cta-section {
     padding: 80px 0
 }

 .cta-box {
     border-radius: 25px;
     overflow: hidden;
     position: relative;
     padding: 65px 55px;
     color: #fff;
     background: linear-gradient(100deg, rgba(7, 42, 71, .95), rgba(8, 83, 119, .78)),
         url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=1800&q=85') center/cover
 }

 .cta-box:after {
     content: "";
     position: absolute;
     right: -80px;
     top: -170px;
     width: 400px;
     height: 400px;
     border: 1px solid rgba(255, 255, 255, .14);
     border-radius: 50%;
     pointer-events: none
 }

 .cta-box h2 {
     font-size: clamp(29px, 4vw, 45px);
     line-height: 1.2;
     margin-bottom: 15px
 }

 .cta-box p {
     font-size: 14px;
     line-height: 1.8;
     color: #d8e8f1;
     max-width: 590px;
     margin-bottom: 25px
 }

 .cta-content {
     position: relative;
     z-index: 1
 }

 /* CONTACT */
 .contact-section {
     background: #fff
 }

 .contact-card {
     background: #f4f9fb;
     border-radius: 20px;
     padding: 25px;
     height: 100%;
     display: flex;
     align-items: flex-start;
     gap: 16px
 }

 .contact-icon {
     width: 46px;
     height: 46px;
     flex-shrink: 0;
     border-radius: 14px;
     background: #dff7f1;
     color: var(--blue);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px
 }

 .contact-card h3 {
     font-size: 14px;
     margin: 3px 0 8px;
     color: var(--navy)
 }

 .contact-card p,
 .contact-card a {
     font-size: 12px;
     color: var(--muted);
     line-height: 1.8;
     margin: 0;
     word-break: break-word
 }

 .contact-card a:hover {
     color: var(--blue);
     text-decoration: none
 }

 .contact-form {
     border: 1px solid var(--line);
     border-radius: 22px;
     padding: 32px;
     box-shadow: 0 15px 45px rgba(16, 54, 91, .04)
 }

 .form-control {
     border: 1px solid #dce8ef;
     border-radius: 10px;
     padding: 13px 15px;
     height: auto;
     font-size: 13px;
     box-shadow: none !important
 }

 .form-control:focus {
     border-color: var(--blue)
 }

 textarea.form-control {
     min-height: 125px;
     resize: vertical
 }

 /* FOOTER */
 footer {
     background: #0b2945;
     color: #c1d3e0;
     padding: 70px 0 0
 }

 .footer-logo {
     width: 165px;
     max-height: 65px;
     object-fit: contain;
     background: #fff;
     border-radius: 8px;
     padding: 5px
 }

 .footer-about {
     font-size: 13px;
     line-height: 1.9;
     color: #b5cad9;
     margin-top: 22px;
     max-width: 330px
 }

 .footer-title {
     font-size: 13px;
     color: #fff;
     margin-bottom: 22px
 }

 .footer-links {
     list-style: none;
     padding: 0;
     margin: 0
 }

 .footer-links li {
     margin-bottom: 13px
 }

 .footer-links a {
     font-size: 12px;
     color: #b5cad9;
     text-decoration: none
 }

 .footer-links a:hover {
     color: var(--teal);
     padding-left: 4px
 }

 .footer-social {
     display: flex;
     gap: 9px;
     margin-top: 22px
 }

 .footer-social a {
     width: 37px;
     height: 37px;
     border: 1px solid rgba(255, 255, 255, .17);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     color: #fff;
     text-decoration: none;
     font-size: 13px
 }

 .footer-social a:hover {
     background: var(--teal);
     color: var(--navy)
 }

 .footer-bottom {
     margin-top: 55px;
     padding: 20px 0;
     border-top: 1px solid rgba(255, 255, 255, .1);
     font-size: 11px;
     color: #a9bdcc
 }

 .footer-bottom a {
     color: #fff;
     text-decoration: none
 }

 /* SCROLL ANIMATIONS */
 .reveal {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity .75s ease, transform .75s ease
 }

 .reveal.from-left {
     transform: translateX(-35px)
 }

 .reveal.from-right {
     transform: translateX(35px)
 }

 .reveal.visible {
     opacity: 1;
     transform: translate(0, 0)
 }

 .delay-1 {
     transition-delay: .12s
 }

 .delay-2 {
     transition-delay: .24s
 }

 .delay-3 {
     transition-delay: .36s
 }

 .float-animation {
     animation: floatY 5s ease-in-out infinite
 }

 @keyframes floatY {

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

     50% {
         transform: translateY(-10px)
     }
 }

 .back-top {
     position: fixed;
     right: 20px;
     bottom: 20px;
     width: 43px;
     height: 43px;
     border-radius: 50%;
     background: var(--teal);
     color: var(--navy);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 900;
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: all .25s ease;
     text-decoration: none
 }

 .back-top.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0)
 }

 .back-top:hover {
     color: var(--navy);
     transform: translateY(-4px)
 }

 /* RESPONSIVE */
 @media(max-width:1199px) {
     .navbar-nav .nav-link {
         padding-left: 8px !important;
         padding-right: 8px !important;
         font-size: 11px
     }

     .brand-logo {
         width: 145px
     }

     .nav-cta {
         padding: 11px 13px;
         margin-left: 5px
     }
 }

 @media(max-width:991px) {
     .section-pad {
         padding: 75px 0
     }

     .navbar-nav {
         align-items: stretch;
         padding: 12px 0
     }

     .navbar-nav .nav-link {
         padding: 11px 4px !important;
         font-size: 13px
     }

     .nav-cta {
         margin: 8px 0 0;
         display: inline-flex;
         width: max-content
     }

     .dropdown-menu {
         box-shadow: none;
         border-radius: 10px;
         border-color: #edf2f5
     }

     .hero {
         height: 78vh;
         min-height: 550px
     }

     .hero-caption {
         left: 7%;
         width: 84%
     }

     .hero .carousel-indicators {
         left: 7%
     }

     .hero-caption h1 {
         font-size: clamp(39px, 7vw, 64px)
     }

     .about-visual {
         margin-bottom: 35px
     }

     .quality-floating {
         left: 10px
     }

     .cta-box {
         padding: 45px 35px
     }
 }

 @media(max-width:767px) {

      .hero .carousel-item {
            height: 448px !important;
            width: 100%;
}


     .topbar {
         text-align: center
     }

     .topbar .top-item {
         margin: 3px 8px;
         font-size: 11px
     }

     .hero {
         height: 75vh;
         min-height: 530px;
         max-height: 720px
     }

     .hero-caption {
         left: 7%;
         width: 86%;
         top: 47%
     }

     .hero-caption h1 {
         font-size: clamp(37px, 10vw, 56px);
         letter-spacing: -1.8px
     }

     .hero-caption p {
         font-size: 14px;
         line-height: 1.7
     }

     .hero-eyebrow {
         font-size: 10px;
         letter-spacing: 2px
     }

     .hero-control {
         right: 6%;
         bottom: 60px
     }

     .hero-control a {
         width: 37px;
         height: 37px
     }

     .hero .carousel-indicators {
         bottom: 28px
     }

     .section-pad {
         padding: 65px 0
     }

     .section-title {
         letter-spacing: -1px
     }

     .about-image {
         height: 360px
     }

     .about-badge {
         right: 8px;
         bottom: 0;
         padding: 16px;
         max-width: 175px
     }

     .about-points {
         flex-direction: column
     }

     .stats-section {
         padding-bottom: 65px
     }

     .stats-wrap {
         padding: 25px 12px
     }

     .stat-number {
         font-size: 32px
     }

     .product-art {
         height: 185px
     }

     .quality-image {
         height: 380px
     }

     .quality-floating {
         bottom: 12px;
         max-width: 190px;
         padding: 17px
     }

     .cta-section {
         padding: 55px 0
     }

     .cta-box {
         padding: 38px 24px
     }

     .contact-form {
         padding: 23px
     }

     footer {
         padding-top: 55px
     }
 }

 @media(max-width:400px) {
     .brand-logo {
         width: 130px
     }

     .hero-actions {
         gap: 9px
     }

     .hero-actions .btn {
         font-size: 11px;
         padding: 12px 15px
     }

     .hero-control {
         display: none
     }
 }

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

     *,
     *:before,
     *:after {
         scroll-behavior: auto !important;
         animation-duration: .01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: .01ms !important
     }

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

 /* =========================================================
   DESIGN UPDATE — editorial, image-led pharmaceutical layout
   Existing copy, sections, links and form fields are preserved.
   ========================================================= */
 :root {
     --navy: #10365b;
     --blue: #087fb5;
     --teal: #35c4b0;
     --ink: #19344d;
     --muted: #718294;
     --light: #f5f8fa;
     --line: #dce7ed;
     --radius: 10px;
 }

 html {
     scroll-padding-top: 82px
 }

 body {
     font-size: 15px;
     letter-spacing: .005em
 }

 .section-pad {
     padding: 70px 0;
 }

 .section-kicker {
     font-size: 11px;
     letter-spacing: 2.4px;
     margin-bottom: 20px
 }

 .section-title {
     font-size: clamp(32px, 4vw, 44px);
     line-height: 1.12;
     letter-spacing: -2px
 }

 .section-copy {
     font-size: 15px;
     line-height: 1.95;
     max-width: 650px
 }

 .btn-main,
 .btn-outline-light {
     border-radius: 3px;
     letter-spacing: .6px;
     text-transform: uppercase
 }

 .btn-main {
     padding: 15px 23px;
     font-size: 11px
 }

 .btn-main:hover {
     transform: translateY(-2px);
     box-shadow: 0 9px 22px rgba(8, 127, 181, .14)
 }

 .btn-outline-light {
     padding: 14px 23px;
     font-size: 11px
 }

 /* Slimmer utility bar and crisp navigation */
 .topbar {
     padding: 8px 0;
     font-size: 11px;
     letter-spacing: .2px
 }

 .main-nav {
     background: rgba(255, 255, 255, .98);
     border-bottom: 1px solid #e8eef2
 }

 .navbar {
     padding: 10px 0;
 }

 .brand-logo {
     width: 180px;
     max-height: 78px;
 }

 .navbar-nav .nav-link {
     font-size: 13px;
     letter-spacing: .65px;
     padding: 14px 11px !important
 }

 .nav-cta {
     margin-left: 16px;
     padding: 13px 17px;
     font-size: 12px;
 }

 .dropdown-menu {
     border-radius: 4px;
     padding: 9px;
     box-shadow: 0 18px 45px rgba(16, 54, 91, .12)
 }

 .dropdown-item {
     border-radius: 3px;
     font-size: 13px;
 }

 /* Immersive hero with restrained overlay and editorial caption */
 .hero {
     /* height: calc(100vh - 36px); */
     min-height: 620px;
     max-height: 542px;
     background: #092744
 }

 .hero .carousel-item:after {
     background: linear-gradient(90deg, rgba(5, 25, 44, .76) 0%, rgba(7, 34, 57, .38) 48%, rgba(7, 34, 57, .02) 100%),
         linear-gradient(0deg, rgba(5, 27, 49, .30), transparent 48%);
 }

 .hero-caption {
     left: 9.5%;
     width: min(700px, 78%);
     transform: translateY(-44%)
 }

 .hero-eyebrow {
     font-size: 10px;
     letter-spacing: 3.2px;
     margin-bottom: 24px
 }

 .hero-caption h1 {
     font-size: clamp(48px, 6.6vw, 70px);
     line-height: 1.08;
     letter-spacing: -3.8px;
     margin-bottom: 22px;
 }

 .hero-caption p {
     font-size: 16px;
     line-height: 1.9;
     max-width: 510px;
     color: rgba(255, 255, 255, .86)
 }

 .hero .carousel-indicators {
     bottom: 31px
 }

 .hero .carousel-indicators li {
     height: 2px
 }

 .hero .carousel-indicators li.active {
     width: 48px
 }

 .hero-control {
     right: 5%;
     bottom: 58px
 }

 .hero-control a {
     border-radius: 3px;
     width: 42px;
     height: 42px
 }

 /* Horizontal values strip */
 .trust-strip {
     padding: 19px 0;
     background: var(--navy)
 }

 .strip-track {
     min-width: 0;
     display: flex;
     justify-content: space-between;
     gap: 22px;
     flex-wrap: wrap
 }

 .strip-item {
     font-size: 10px;
     letter-spacing: 1.2px
 }

 .strip-item i {
     font-size: 16px
 }

 /* Image-led company introduction */
 .about-visual {
     padding: 0 20px 24px 0
 }

 .about-image {
     height: 585px;
     border-radius: 4px;
     object-position: center
 }

 .about-visual:after {
     border-radius: 4px;
     right: 0;
     width: 68%;
     height: 62%;
     background: #e3f4f2
 }

 .about-badge {
     right: 0;
     bottom: 0;
     border-radius: 4px;
     padding: 22px;
     box-shadow: 0 10px 30px rgba(16, 54, 91, .12)
 }

 .about-badge i {
     color: var(--teal)
 }

 .about-points {
     gap: 22px
 }

 .about-point {
     font-size: 13px;
     letter-spacing: .1px
 }

 .about-point i {
     color: var(--teal)
 }

 /* Stats block: sharp editorial panel */
 .stats-section {
     padding-bottom: 70px;
 }

 .stats-wrap {
     border-radius: 4px;
     padding: 34px 22px;
     background: linear-gradient(115deg, #10365b, #087fb5)
 }

 .stat-item {
     padding: 18px 8px
 }

 .stat-number {
     font-size: 35px;
     letter-spacing: -1px
 }

 .stat-label {
     font-size: 10px;
     letter-spacing: 1.4px
 }

 /* Product cards: cleaner, more catalogue-like */
 .products-section {
     background: #f4f7f9
 }

 .products-section:before {
     border-color: #e1e9ed
 }

 .product-card {
     border-radius: 4px;
     border-color: #e4ebef;
     box-shadow: none
 }

 .product-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 18px 38px rgba(16, 54, 91, .09);
     border-color: #c4e7e1
 }

 .product-art {
     height: auto;
     background: linear-gradient(145deg, #f6f9fa, #e8f3f3)
 }

 .product-art:before,
 .product-art:after {
     border-color: rgba(8, 127, 181, .10)
 }

 .product-symbol {
     border-radius: 5px 5px 8px 8px;
     box-shadow: 6px 12px 20px rgba(16, 54, 91, .13)
 }

 .product-symbol:before {
     border-radius: 2px 2px 0 0
 }

 .product-info {
     padding: 25px 24px 27px
 }

 .product-category {
     font-size: 9px;
     letter-spacing: 1.5px
 }

 .product-info h3 {
     font-size: 20px;
     letter-spacing: -.4px
 }

 .product-info p {
     font-size: 12px;
     line-height: 1.9
 }

 .product-link {
     font-size: 10px;
     letter-spacing: .5px
 }

 .product-note {
     line-height: 1.7
 }

 /* Therapeutic cards with more negative space */
 .area-card {
     border-radius: 4px;
     min-height: 270px;
     padding: 31px 26px;
     background: #f5f8fa;
     border-color: #e8eef1
 }

 .area-card:hover {
     transform: translateY(-5px)
 }

 .area-icon {
     border-radius: 4px;
     background: #e2f5f1;
     margin-bottom: 27px
 }

 .area-card h3 {
     font-size: 18px;
     letter-spacing: -.4px
 }

 .area-card p {
     font-size: 12px;
     line-height: 1.9
 }

 /* Quality section and CTA */
 .quality-section {
     background: #f2f6f8
 }

 .quality-image {
     height: 535px;
     border-radius: 4px
 }

 .quality-floating {
     left: -14px;
     bottom: 22px;
     border-radius: 4px;
     box-shadow: none
 }

 .quality-list li {
     gap: 14px;
     margin-bottom: 20px
 }

 .quality-list i {
     color: var(--teal)
 }

 .quality-list strong {
     font-size: 13px;
     letter-spacing: .1px
 }

 .quality-list span {
     font-size: 12px
 }

 .cta-section {
     padding: 70px 0;
 }

 .cta-box {
     border-radius: 4px;
     padding: 66px 55px 40px;
     background-position: center 45%
 }

 .cta-box h2 {
     font-size: clamp(32px, 4vw, 50px);
     letter-spacing: -1.7px
 }

 .cta-box p {
     font-size: 14px;
     max-width: 560px
 }

 /* Contact form and footer */
 .contact-card {
     border-radius: 4px;
     padding: 24px;
     background: #f4f7f9
 }

 .contact-icon {
     border-radius: 4px;
     background: #e0f4f0
 }

 .contact-form {
     border-radius: 4px;
     padding: 34px;
     box-shadow: none;
     border-color: #e2eaef
 }

 .form-control {
     border-radius: 4px;
     padding: 14px 15px;
     font-size: 13px
 }

 .form-control:focus {
     border-color: var(--teal);
     box-shadow: 0 0 0 3px rgba(53, 196, 176, .12) !important
 }

 footer {
     padding-top: 76px
 }

 .footer-logo {
     border-radius: 3px
 }

 .footer-title {
     letter-spacing: .4px
 }

 .footer-social a {
     border-radius: 3px
 }

 .back-top {
     border-radius: 3px
 }

 /* Subtle, consistent motion */
 .reveal {
     transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1)
 }

 .delay-1 {
     transition-delay: .08s
 }

 .delay-2 {
     transition-delay: .16s
 }

 .delay-3 {
     transition-delay: .24s
 }

 @media(max-width:1199px) {
     .navbar-nav .nav-link {
         font-size: 9px;
         padding-left: 7px !important;
         padding-right: 7px !important
     }

     .brand-logo {
         width: 150px
     }
 }

 @media(max-width:991px) {
     .section-pad {
         padding: 82px 0
     }

     .hero {
         height: 78vh;
         min-height: 560px
     }

     .hero-caption {
         left: 7%;
         width: 86%
     }

     .hero-caption h1 {
         font-size: clamp(42px, 7vw, 68px);
         letter-spacing: -2.4px
     }

     .strip-track {
         justify-content: center
     }

     .about-image {
         height: 460px
     }

     .quality-floating {
         left: 12px
     }

     .cta-box {
         padding: 52px 38px
     }
 }

 @media(max-width:767px) {
     .section-pad {
         padding: 68px 0
     }

     .topbar .top-item {
         font-size: 10px
     }

     .hero {
         height: 76vh;
         min-height: 540px;
         max-height: 760px
     }

     .hero-caption {
         left: 7%;
         width: 86%;
         top: 47%
     }

     .hero-caption h1 {
         font-size: clamp(38px, 10vw, 58px);
         letter-spacing: -1.9px
     }

     .hero-caption p {
         font-size: 14px;
         line-height: 1.8
     }

     .hero-eyebrow {
         font-size: 9px;
         letter-spacing: 2px
     }

     .hero-control {
         right: 6%;
         bottom: 60px
     }

     .strip-track {
         gap: 18px 25px
     }

     .strip-item {
         font-size: 9px
     }

     .about-image {
         height: 365px
     }

     .about-badge {
         right: 6px;
         bottom: 0;
         max-width: 180px
     }

     .stats-section {
         padding-bottom: 68px
     }

     .stats-wrap {
         padding: 22px 10px
     }

     .stat-number {
         font-size: 29px
     }

     .product-art {
         /* height: 195px; */
     }

     .quality-image {
         height: 390px
     }

     .quality-floating {
         bottom: 12px;
         max-width: 200px
     }

     .cta-section {
         padding: 58px 0
     }

     .cta-box {
         padding: 39px 24px
     }

     .contact-form {
         padding: 24px
     }
 }

 @media(max-width:400px) {
     .brand-logo {
         width: 130px
     }

     .hero-actions {
         gap: 8px
     }

     .hero-actions .btn {
         font-size: 10px;
         padding: 12px 13px
     }
 }

 @media(prefers-reduced-motion:reduce) {
     .hero-bg {
         animation: none !important
     }

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



 /* FINAL LAYOUT REPAIR + CREATIVE FINISH */
 *,
 *::before,
 *::after {
     box-sizing: border-box
 }

 html {
     overflow-x: clip;
     scroll-behavior: smooth
 }

 body {
     overflow-x: hidden;
     color: #19344d
 }

 img {
     max-width: 100%
 }

 section[id] {
     scroll-margin-top: 92px
 }

 .container {
     width: 100%
 }

 .main-nav {
     z-index: 1030
 }

 .navbar {
     min-height: 76px
 }

 .navbar-toggler {
     border: 1px solid #dce7ed;
     padding: 8px 10px;
     outline: none !important
 }

 .navbar-toggler:focus {
     box-shadow: 0 0 0 3px rgba(8, 127, 181, .13)
 }

 .navbar-collapse {
     align-items: center
 }

 .dropdown-menu {
     margin-top: 0
 }

 .hero {
     position: relative;
     width: 100%;
     /* height: clamp(580px, calc(100vh - 36px), 900px); */
     min-height: 500px;
     overflow: hidden
 }

 .hero .carousel,
 .hero .carousel-inner,
 .hero .carousel-item {
     height: 547px;
     width: 100%
 }

 .hero .carousel-item {
     isolation: isolate
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
     z-index: -2;
     /* height: 500px; */
     /* background-position: left; */
 }

 .hero .carousel-item:after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     pointer-events: none;
     background: linear-gradient(90deg, rgba(5, 25, 44, .82) 0%, rgba(7, 34, 57, .55) 48%, rgba(7, 34, 57, .12) 100%), linear-gradient(0deg, rgba(5, 27, 49, .35), transparent 55%)
 }

 .hero-caption {
     position: absolute;
     top: 50%;
     left: clamp(24px, 7.5%, 150px);
     width: min(700px, 78%);
     transform: translateY(-50%);
     z-index: 2
 }

 .hero-caption h1 {
     max-width: 760px;
     overflow-wrap: normal;
     text-wrap: balance
 }

 .hero-caption p {
     max-width: 540px
 }

 .hero-actions {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 12px
 }

 .hero .carousel-indicators {
     z-index: 4
 }

 .hero-control {
     z-index: 4
 }

 .trust-strip {
     position: relative;
     z-index: 2
 }

 .strip-track {
     align-items: center
 }

 .strip-item {
     display: flex;
     align-items: center;
     gap: 10px
 }

 .about-visual,
 .quality-visual {
     position: relative;
     min-width: 0
 }

 .about-image,
 .quality-image {
     display: block;
     width: 100%;
     object-fit: cover
 }

 .about-badge,
 .quality-floating {
     z-index: 2;
     max-width: calc(100% - 20px)
 }

 .stats-wrap {
     overflow: hidden
 }

 .stat-item {
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center
 }

 .products-section .row>[class*="col-"],
 .areas-section .row>[class*="col-"] {
     display: flex;
     margin-bottom: 24px
 }

 .product-card,
 .area-card {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column
 }

 .product-info {
     display: flex;
     flex: 1;
     flex-direction: column;
     align-items: flex-start
 }

 .product-info p {
     flex: 1
 }

 .product-art {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .product-symbol {
     flex-shrink: 0
 }

 .area-card {
     min-height: 270px
 }

 .quality-list {
     padding-left: 0;
     list-style: none
 }

 .cta-box {
     position: relative;
     overflow: hidden;
     background-size: cover
 }

 .contact-section .row {
     align-items: stretch
 }

 .contact-section .row>[class*="col-"] {
     margin-bottom: 20px
 }

 .contact-card,
 .contact-form {
     height: 100%
 }

 .contact-form .form-control {
     width: 100%;
     min-height: 48px
 }

 .contact-form textarea.form-control {
     min-height: 130px;
     resize: vertical
 }

 .contact-form button,
 .contact-form input[type="submit"] {
     max-width: 100%;
     white-space: normal
 }

 footer {
     overflow: hidden
 }

 .footer-social {
     display: flex;
     flex-wrap: wrap;
     gap: 10px
 }

 .back-top {
     z-index: 1000
 }

 /* Clear visual hierarchy and avoid layout collisions on medium screens */
 @media(max-width:1199px) {
     .navbar {
         padding: 12px 0
     }

     .navbar-nav .nav-link {
         white-space: normal;
         line-height: 1.5
     }

     .nav-cta {
         margin-left: 8px
     }

     .hero-caption {
         width: min(680px, 84%)
     }
 }

 @media(max-width:991px) {
     .navbar-collapse {
         padding: 14px 0 8px;
         max-height: 70vh;
         overflow-y: auto
     }

     .navbar-nav .nav-link {
         padding: 11px 4px !important;
         font-size: 11px
     }

     .nav-cta {
         display: inline-block;
         margin: 10px 0 0
     }

     .dropdown-menu {
         border: 0;
         box-shadow: none;
         padding: 3px 12px;
         background: #f6f9fb
     }

     .hero {
         height: 76vh;
         min-height: 560px;
         max-height: 760px
     }

     .hero-caption {
         left: 7%;
         width: 86%
     }

     .hero-caption h1 {
         font-size: clamp(42px, 7vw, 68px);
         letter-spacing: -2px
     }

     .about-visual,
     .quality-visual {
         margin-bottom: 38px
     }

     .products-section .row>[class*="col-"],
     .areas-section .row>[class*="col-"] {
         margin-bottom: 20px
     }
 }

 @media(max-width:767px) {
     .section-pad {
         padding: 66px 0
     }

     .section-title {
         font-size: clamp(30px, 8vw, 42px);
         letter-spacing: -1.2px
     }

     .hero {
           height: 445px;
           min-height: 0;
           max-height: 82svh
     }

     .hero-caption {
         left: 24px;
         right: 24px;
     top: 46%;
         width: auto;
         transform: translateY(-45%)
     }

     .hero-caption h1 {
         font-size: clamp(37px, 10vw, 56px);
         line-height: 1.05;
         letter-spacing: -1.5px
     }

     .hero-caption p {
         font-size: 14px;
         line-height: 1.75;
         display: none;
     }

     .hero-eyebrow {
         margin-bottom: 17px
     }

     .hero-actions {
         gap: 9px
     }

     .hero-actions .btn {
         font-size: 10px;
         padding: 12px 13px
     }

     .hero-control {
         right: 20px;
         bottom: 50px
     }

     .hero .carousel-indicators {
         left: 24px;
         right: auto;
         bottom: 23px;
         margin: 0
     }

     .strip-track {
         justify-content: flex-start;
         gap: 16px 20px
     }

     .strip-item {
         width: calc(50% - 12px);
         font-size: 9px;
         letter-spacing: .6px
     }

     .about-image {
         height: 340px
     }

     .about-visual {
         padding-right: 10px
     }

     .about-badge {
         right: 0;
         padding: 16px
     }

     .stats-section {
         padding-bottom: 55px
     }

     .stats-wrap {
         padding: 14px 6px
     }

     .stat-item {
         padding: 16px 4px
     }

     .stat-number {
         font-size: 27px
     }

     .stat-label {
         font-size: 9px;
         letter-spacing: .8px
     }

     .product-art {
         /* height: 190px; */
     }

     .product-info {
         padding: 22px 20px
     }

     .area-card {
         min-height: unset;
         padding: 25px 22px
     }

     .quality-image {
         height: 340px
     }

     .quality-floating {
         left: 8px;
         bottom: 10px;
         padding: 16px
     }

     .cta-section {
         padding: 42px 0
     }

     .cta-box {
         padding: 34px 22px
     }

     .contact-form {
         padding: 22px
     }

     footer {
         padding-top: 55px
     }
 }

 @media(max-width:420px) {
     .brand-logo {
         width: 122px
     }

     .hero-caption {
         left: 57px;
         right: 19px
     }

     .hero-caption h1 {
         font-size: 36px
     }

     .hero-actions .btn {
         width: 91%;
         text-align: center;
         display: block;
     }

     .strip-item {
         font-size: 8px
     }

     .about-image,
     .quality-image {
         height: 300px
     }

     .contact-form {
         padding: 18px
     }
 }

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

     *,
     *::before,
     *::after {
         animation-duration: .01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: .01ms !important;
         scroll-behavior: auto !important
     }
 }



 /* SINGLE-PAGE SCROLL + 1240PX CONTENT GRID */
 html {
     height: auto !important;
     min-height: 100%;
     overflow-x: hidden !important;
     overflow-y: auto !important;
     scroll-behavior: smooth
 }

 body {
     height: auto !important;
     min-height: 100%;
     overflow-x: hidden !important;
     overflow-y: visible !important
 }

 html,
 body {
     overscroll-behavior-y: auto
 }

 .container {
     width: 100%;
     max-width: 1240px;
     padding-left: 20px;
     padding-right: 20px
 }

 @media(min-width:1200px) {
     .container {
         max-width: 1260px;
     }
 }

 @media(max-width:991px) {
     .navbar-collapse {
         max-height: none !important;
         overflow: visible !important
     }
 }

 /* Creative enquiry section */
 .contact-section {
     position: relative;
     isolation: isolate;
     padding: 70px 0;
     background: #f3f8fb
 }

 .contact-section:before {
     content: "";
     position: absolute;
     z-index: -1;
     left: -140px;
     top: 80px;
     width: 360px;
     height: 360px;
     border: 1px solid rgba(8, 127, 181, .10);
     border-radius: 50%;
     box-shadow: 0 0 0 38px rgba(8, 127, 181, .025), 0 0 0 78px rgba(8, 127, 181, .02)
 }

 .contact-section>.container>.row:first-child {
     margin-bottom: 38px !important
 }

 .contact-section>.container>.row:first-child .section-title {
     max-width: 650px;
     margin-bottom: 14px
 }

 .contact-section>.container>.row:first-child .section-copy {
     max-width: 560px
 }

 .contact-section>.container>.row:nth-child(2) {
     align-items: stretch
 }

 .contact-section>.container>.row:nth-child(2)>div:first-child {
     display: flex;
     flex-direction: column;
     gap: 14px
 }

 .contact-card {
     height: auto !important;
     min-height: 132px;
     margin: 0 !important;
     padding: 26px;
     background: rgba(255, 255, 255, .88);
     border: 1px solid #e1edf3;
     border-radius: 18px;
     box-shadow: 0 12px 32px rgba(16, 54, 91, .035);
     transition: transform .3s ease, border-color .3s ease
 }

 .contact-card:hover {
     transform: translateY(-4px);
     border-color: rgba(8, 127, 181, .35)
 }

 .contact-card h3 {
     font-size: 15px
 }

 .contact-card p,
 .contact-card a {
     font-size: 13px
 }

 .contact-icon {
     width: 50px;
     height: 50px;
     border-radius: 15px;
     background: linear-gradient(135deg, #dff8f2, #e6f4fc);
     font-size: 19px
 }

 .contact-form {
     height: auto !important;
     padding: clamp(24px, 4vw, 42px);
     background: #fff;
     border: 1px solid #e0ebf2;
     border-radius: 24px;
     box-shadow: 0 24px 70px rgba(16, 54, 91, .09)
 }

 .contact-form h3 {
     font-size: 26px !important;
     letter-spacing: -.7px;
     margin-bottom: 8px !important
 }

 .contact-form h3:after {
     content: "A few details will help us direct your enquiry to the right team.";
     display: block;
     margin-top: 10px;
     color: #718294;
     font: 400 13px/1.7 'DM Sans', sans-serif;
     letter-spacing: 0
 }

 .contact-form label {
     color: #19344d;
     font-size: 12px !important;
     margin-bottom: 8px
 }

 .contact-form .form-group {
     margin-bottom: 20px
 }

 .contact-form .form-control {
     min-height: 51px;
     border: 1px solid #dbe7ee;
     border-radius: 11px;
     padding: 13px 15px;
     background: #fbfdfe;
     color: #19344d;
     font-size: 13px;
     transition: border-color .2s ease, box-shadow .2s ease
 }

 .contact-form .form-control:focus {
     border-color: #087fb5;
     background: #fff;
     box-shadow: 0 0 0 4px rgba(8, 127, 181, .10) !important
 }

 .contact-form textarea.form-control {
     min-height: 85px;
     resize: vertical
 }

 .contact-form .btn-main {
     min-height: 50px;
     padding: 15px 24px;
     border-radius: 11px;
     background: #10365b;
     color: #fff;
     border-color: #10365b;
     justify-content: center
 }

 .contact-form .btn-main:hover {
     background: #087fb5;
     border-color: #087fb5;
     color: #fff;
     transform: translateY(-2px)
 }

 /* Schrödinger-inspired cinematic section: scroll-linked image movement and staged reveal */
 .pipeline-feature {
     position: relative;
     isolation: isolate;
     min-height: 680px;
     display: flex;
     align-items: center;
     overflow: hidden;
     padding: 110px 0 42px;
     background: #082b48;
     color: #fff;
     --pipeline-progress: 0
 }

 .pipeline-backdrop {
     position: absolute;
     z-index: -2;
     inset: 0;
     overflow: hidden;
     background: #082b48
 }

 .pipeline-backdrop:after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(5, 28, 48, .91) 0%, rgba(6, 37, 61, .78) 52%, rgba(6, 38, 61, .45) 100%), linear-gradient(0deg, rgba(3, 23, 40, .62), transparent 55%)
 }

 .pipeline-backdrop img {
     display: block;
     width: 100%;
     height: 100%;
     min-height: 680px;
     object-fit: cover;
     object-position: center 44%;
     transform: translate3d(0, calc(var(--pipeline-progress) * -5%), 0) scale(calc(1.08 + var(--pipeline-progress) * .12));
     transition: filter .25s ease;
     filter: saturate(.9);
     will-change: transform
 }

 .pipeline-inner {
     position: relative;
     z-index: 1
 }

 .pipeline-nameplate {
     display: inline-flex;
     align-items: center;
     gap: 11px;
     padding: 9px 13px;
     border: 1px solid rgba(255, 255, 255, .32);
     border-radius: 3px;
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 62px;
     opacity: 0;
     transform: translateY(22px);
     transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1)
 }

 .pipeline-nameplate span {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #55d8c4;
     box-shadow: 0 0 0 5px rgba(85, 216, 196, .14)
 }

 .pipeline-columns {
     display: grid;
     grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr);
     gap: clamp(42px, 8vw, 130px);
     align-items: end
 }

 .pipeline-main {
     max-width: 710px;
     opacity: 0;
     transform: translateY(38px);
     transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1)
 }

 .pipeline-overline {
     color: #8ce8da;
     font-size: 11px;
     letter-spacing: 2.2px;
     text-transform: uppercase;
     font-weight: 800;
     margin-bottom: 20px
 }

 .pipeline-main h2 {
     font-size: clamp(36px, 5vw, 56px);
     line-height: 1.06;
     letter-spacing: -2.5px;
     color: #fff;
     margin: 0 0 25px;
     max-width: 720px
 }

 .pipeline-copy {
     max-width: 630px;
     font-size: 16px;
     line-height: 1.9;
     color: rgba(255, 255, 255, .79);
     margin: 0
 }

 .pipeline-side {
     padding: 0 0 6px 27px;
     border-left: 1px solid rgba(255, 255, 255, .28);
     opacity: 0;
     transform: translateY(38px);
     transition: opacity .9s .16s ease, transform .9s .16s cubic-bezier(.2, .7, .2, 1)
 }

 .pipeline-mark {
     width: 49px;
     height: 49px;
     border: 1px solid rgba(133, 235, 219, .65);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #8ce8da;
     font-size: 20px;
     margin-bottom: 24px;
     transform: rotate(-4deg)
 }

 .pipeline-side h3 {
     font-size: clamp(19px, 2vw, 25px);
     line-height: 1.4;
     color: #fff;
     margin-bottom: 14px;
     letter-spacing: -.4px
 }

 .pipeline-side>p {
     font-size: 13px;
     line-height: 1.8;
     color: rgba(255, 255, 255, .7);
     margin-bottom: 25px
 }

 .pipeline-button {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     min-height: 58px;
     padding: 9px 10px 9px 18px;
     border: 1px solid rgba(255, 255, 255, .45);
     color: #fff;
     text-decoration: none;
     font-size: 13px;
     font-weight: 700;
     transition: background .25s ease, border-color .25s ease
 }

 .pipeline-button:hover {
     background: #087fb5;
     border-color: #087fb5;
     color: #fff;
     text-decoration: none
 }

 .pipeline-arrow {
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #35c4b0;
     color: #10365b;
     transition: transform .25s ease
 }

 .pipeline-button:hover .pipeline-arrow {
     transform: translateX(3px)
 }

 .pipeline-bottomline {
     display: flex;
     justify-content: space-between;
     gap: 20px;
     margin-top: 76px;
     padding-top: 20px;
     border-top: 1px solid rgba(255, 255, 255, .23);
     color: rgba(255, 255, 255, .62);
     font-size: 10px;
     letter-spacing: 1.3px;
     text-transform: uppercase;
     opacity: 0;
     transform: translateY(18px);
     transition: opacity .8s .25s ease, transform .8s .25s ease
 }

 .pipeline-feature.is-visible .pipeline-nameplate,
 .pipeline-feature.is-visible .pipeline-main,
 .pipeline-feature.is-visible .pipeline-side,
 .pipeline-feature.is-visible .pipeline-bottomline {
     opacity: 1;
     transform: translateY(0)
 }

 .pipeline-feature .pipeline-overline {
     opacity: 0;
     transform: translateY(14px);
     transition: opacity .7s .2s ease, transform .7s .2s ease
 }

 .pipeline-feature.is-visible .pipeline-overline {
     opacity: 1;
     transform: translateY(0)
 }

 .pipeline-feature .pipeline-main h2 {
     clip-path: inset(0 0 100% 0);
     transition: clip-path 1.05s .12s cubic-bezier(.2, .7, .2, 1)
 }

 .pipeline-feature.is-visible .pipeline-main h2 {
     clip-path: inset(0 0 0 0)
 }

 @media(max-width:767px) {
     .container {
         padding-left: 18px;
         padding-right: 18px
     }

     .contact-section {
         padding: 76px 0
     }

     .contact-section>.container>.row:first-child {
         margin-bottom: 25px !important
     }

     .contact-card {
         min-height: unset;
         padding: 21px
     }

     .contact-form {
         padding: 23px 19px;
         border-radius: 18px
     }

     .contact-form h3 {
         font-size: 23px !important
     }

     .pipeline-feature {
         min-height: unset;
         padding: 75px 0 25px
     }

     .pipeline-backdrop img {
         min-height: 100%;
         height: 100%;
         object-position: 58% center
     }

     .pipeline-nameplate {
         margin-bottom: 42px
     }

     .pipeline-columns {
         grid-template-columns: 1fr;
         gap: 35px
     }

     .pipeline-main h2 {
         font-size: clamp(36px, 10vw, 51px);
         letter-spacing: -1.5px
     }

     .pipeline-copy {
         font-size: 14px
     }

     .pipeline-side {
         padding: 0 0 0 19px
     }

     .pipeline-bottomline {
         margin-top: 50px;
         flex-direction: column;
         gap: 8px
     }
 }

 @media(prefers-reduced-motion:reduce) {
     .pipeline-backdrop img {
         transform: none !important;
         transition: none
     }

     .pipeline-nameplate,
     .pipeline-main,
     .pipeline-side,
     .pipeline-bottomline,
     .pipeline-overline,
     .pipeline-main h2 {
         opacity: 1 !important;
         transform: none !important;
         clip-path: none !important;
         transition: none !important
     }
 }


 /* Two additional animated editorial sections */
 .portfolio-motion {
     position: relative;
     padding: 70px 0 70px;
     background: #f5f9fc;
     overflow: hidden;
     isolation: isolate
 }

 .portfolio-motion:before {
     content: "";
     position: absolute;
     z-index: -1;
     width: 560px;
     height: 560px;
     border: 1px solid rgba(8, 127, 181, .13);
     border-radius: 50%;
     right: -240px;
     top: -220px;
     box-shadow: 0 0 0 55px rgba(8, 127, 181, .025), 0 0 0 110px rgba(8, 127, 181, .02)
 }

 .motion-heading {
     display: flex;
     align-items: end;
     justify-content: space-between;
     gap: 35px;
     margin-bottom: 50px
 }

 .motion-heading .section-title {
     max-width: 700px;
     margin: 12px 0 0;
     font-size: clamp(32px, 4vw, 52px);
     line-height: 1.12;
     letter-spacing: -1.5px
 }

 .motion-heading .section-copy {
     max-width: 370px;
     margin: 0;
     color: #617589;
     line-height: 1.8
 }

 .portfolio-grid {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 18px;
     perspective: 1200px
 }

 .portfolio-tile {
     position: relative;
     min-height: 370px;
     overflow: hidden;
     /* background: #0d3555; */
     color: #fff;
     transform: translateY(44px) rotateX(4deg);
     opacity: 0;
     transition: opacity .8s ease, transform .9s cubic-bezier(.2, .75, .2, 1);
     transition-delay: var(--delay, 0ms)
 }

 .portfolio-motion.is-visible .portfolio-tile {
     opacity: 1;
     transform: translateY(0) rotateX(0)
 }

 .portfolio-tile img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
     filter: saturate(.8)
 }

 .portfolio-tile:after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(5, 25, 44, .03) 15%, rgba(5, 25, 44, .24) 42%, rgba(5, 25, 44, .93) 100%)
 }

 .portfolio-tile:hover img {
     transform: scale(1.09);
     filter: saturate(1.08)
 }

 .portfolio-tile-content {
     position: absolute;
     z-index: 1;
     left: 27px;
     right: 27px;
     bottom: 28px;
     transform: translateY(12px);
     transition: transform .45s ease
 }

 .portfolio-tile:hover .portfolio-tile-content {
     transform: translateY(0)
 }

 .portfolio-index {
     display: flex;
     align-items: center;
     gap: 10px;
     color: #80e4d6;
     font-size: 10px;
     font-weight: 800;
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 13px
 }

 .portfolio-index:before {
     content: "";
     width: 26px;
     height: 1px;
     background: #80e4d6
 }

 .portfolio-tile h3 {
     font-size: clamp(21px, 2.2vw, 28px);
     line-height: 1.2;
     color: #fff;
     letter-spacing: -.5px;
     margin: 0 0 10px
 }

 .portfolio-tile p {
     font-size: 13px;
     line-height: 1.7;
     color: rgba(255, 255, 255, .8);
     margin: 0;
     max-width: 320px
 }

 .portfolio-tile .tile-arrow {
     position: absolute;
     right: 0;
     top: -3px;
     width: 37px;
     height: 37px;
     border: 1px solid rgba(255, 255, 255, .5);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     transition: background .3s, border-color .3s
 }

 .portfolio-tile:hover .tile-arrow {
     background: #35c4b0;
     border-color: #35c4b0;
     color: #10365b
 }

 .therapeutic-motion {
     position: relative;
     padding: 70px 0;
     background: #092e4d;
     color: #fff;
     overflow: hidden;
     isolation: isolate
 }

 .therapeutic-motion:before {
     content: "";
     position: absolute;
     z-index: -1;
     inset: 0;
     background: radial-gradient(circle at 85% 18%, rgba(53, 196, 176, .16), transparent 32%), linear-gradient(115deg, #082640 0%, #0c3c60 58%, #082640 100%)
 }

 .therapeutic-layout {
     display: grid;
     grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
     gap: clamp(42px, 8vw, 115px);
     align-items: center
 }

 .therapeutic-visual {
     position: relative;
     min-height: 510px;
     overflow: hidden;
     background: #123d5b;
     clip-path: inset(0 100% 0 0);
     transition: clip-path 1.1s cubic-bezier(.2, .7, .2, 1)
 }

 .therapeutic-motion.is-visible .therapeutic-visual {
     clip-path: inset(0 0 0 0)
 }

 .therapeutic-visual img {
     position: absolute;
     width: 100%;
     height: 100%;
     inset: 0;
     object-fit: cover;
     transform: scale(1.14);
     transition: transform 1.7s cubic-bezier(.2, .7, .2, 1);
     filter: saturate(.8)
 }

 .therapeutic-motion.is-visible .therapeutic-visual img {
     transform: scale(1)
 }

 .therapeutic-visual:after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg, rgba(4, 24, 40, .6), transparent 60%)
 }

 .therapeutic-caption {
     position: absolute;
     z-index: 1;
     left: 26px;
     bottom: 25px;
     font-size: 10px;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: rgba(255, 255, 255, .8)
 }

 .therapeutic-copy {
     opacity: 0;
     transform: translateY(35px);
     transition: opacity .8s .25s ease, transform .8s .25s cubic-bezier(.2, .7, .2, 1)
 }

 .therapeutic-motion.is-visible .therapeutic-copy {
     opacity: 1;
     transform: translateY(0)
 }

 .therapeutic-copy .section-kicker {
     color: #80e4d6
 }

 .therapeutic-copy .section-title {
     color: #fff;
     font-size: clamp(34px, 4vw, 48px);
     line-height: 1.12;
     letter-spacing: -1.5px;
     margin: 12px 0 20px
 }

 .therapeutic-copy>p {
     max-width: 540px;
     color: rgba(255, 255, 255, .73);
     font-size: 15px;
     line-height: 1.9;
     margin-bottom: 30px
 }

 .therapy-list {
     border-top: 1px solid rgba(255, 255, 255, .2)
 }

 .therapy-row {
     display: grid;
     grid-template-columns: 45px 1fr 24px;
     gap: 15px;
     align-items: center;
     padding: 19px 0;
     border-bottom: 1px solid rgba(255, 255, 255, .2);
     color: #fff;
     text-decoration: none !important;
     transition: padding .3s ease, color .3s ease
 }

 .therapy-row:hover {
     padding-left: 8px;
     color: #80e4d6
 }

 .therapy-row .therapy-no {
     font-size: 11px;
     color: #80e4d6;
     letter-spacing: 1px
 }

 .therapy-row strong {
     display: block;
     font-size: 16px;
     font-weight: 600
 }

 .therapy-row small {
     display: block;
     margin-top: 4px;
     color: rgba(255, 255, 255, .58);
     font-size: 12px;
     line-height: 1.6
 }

 .therapy-row>i {
     transition: transform .3s ease
 }

 .therapy-row:hover>i {
     transform: translateX(5px)
 }

 @media(max-width:991px) {
     .portfolio-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr))
     }
 }

 @media(max-width:767px) {

     .portfolio-motion,
     .therapeutic-motion {
         padding: 76px 0
     }

     .motion-heading {
         display: block;
         margin-bottom: 32px
     }

     .motion-heading .section-copy {
         margin-top: 16px
     }

     .portfolio-grid {
         grid-template-columns: 1fr;
         gap: 16px
     }

     .portfolio-tile {
         min-height: 330px
     }

     .therapeutic-layout {
         grid-template-columns: 1fr;
         gap: 35px
     }

     .therapeutic-visual {
         min-height: 340px
     }

     .therapeutic-copy .section-title {
         font-size: clamp(34px, 9vw, 46px)
     }
 }

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

     .portfolio-tile,
     .portfolio-tile img,
     .portfolio-tile-content,
     .therapeutic-visual,
     .therapeutic-visual img,
     .therapeutic-copy {
         opacity: 1 !important;
         transform: none !important;
         clip-path: none !important;
         transition: none !important
     }
 }


 /* Final requested alignment: CTA action on the right, hero arrows vertically centered */
 .cta-box .cta-content {
     position: relative;
     min-height: 220px;
     padding-right: 320px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center
 }

 .cta-box .cta-content .btn-main {
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     white-space: nowrap;
     margin: 0;
     z-index: 2
 }

 .cta-box .cta-content .btn-main:hover {
     transform: translateY(calc(-50% - 3px))
 }

 .hero-control {
     left: 0;
     right: 0;
     top: 50%;
     bottom: auto;
     width: 100%;
     transform: translateY(-50%);
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 28px;
     pointer-events: none;
     z-index: 8
 }

 .hero-control a {
     pointer-events: auto;
     width: 52px;
     height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(255, 255, 255, .58);
     border-radius: 50%;
     background: rgba(7, 34, 57, .28);
     color: #fff;
     text-decoration: none;
     backdrop-filter: blur(6px);
     transition: background .25s ease, border-color .25s ease, transform .25s ease
 }

 .hero-control a:hover {
     background: #087fb5;
     border-color: #087fb5;
     color: #fff;
     transform: scale(1.06)
 }

 @media(max-width:767.98px) {
     .cta-box .cta-content {
         min-height: 0;
         padding-right: 0;
         display: block
     }

     .cta-box .cta-content .btn-main {
         position: relative;
         top: auto;
         right: auto;
         transform: none;
         white-space: normal;
         display: inline-flex;
         margin-top: 4px
     }

     .cta-box .cta-content .btn-main:hover {
         transform: translateY(-2px)
     }

     .hero-control {
         padding: 0 12px
     }

     .hero-control a {
         width: 40px;
         height: 40px;
         font-size: 13px;
         background: rgba(7, 34, 57, .48)
     }

     .hero-caption {
         width: calc(100% - 92px)
     }
 }

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

     .hero-control a,
     .cta-box .cta-content .btn-main {
         transition: none
     }
 }