:root {
    --b: #0a6ebd;
    --g: #1fa66a;
    --d: #0b2540;
    --t: #44566b;
    --bg: #fff;
    --s: #f3f8fc;
    --grad: linear-gradient(135deg, var(--b), var(--g))
}

* {
    box-sizing: border-box;
    margin: 0
}

html {
    scroll-behavior: smooth
}

body {
    font: 400 1rem/1.7 Inter, system-ui, sans-serif;
    color: var(--t);
    background: var(--bg);
    overflow-x: hidden
}

img,
svg,
iframe {
    max-width: 100%
}

a {
    color: var(--b)
}

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

.wrap {
    width: min(1140px, 92%);
    margin: auto
}

.skip {
    position: absolute;
    left: -999px
}

.skip:focus {
    left: 8px;
    top: 8px;
    background: #fff;
    padding: 8px;
    z-index: 99
}

:focus-visible {
    outline: 3px solid var(--g);
    outline-offset: 2px
}

#loader {
    position: fixed;
    inset: 0;
    background: #fff;
    display: grid;
    place-items: center;
    z-index: 200;
    transition: opacity .6s
}

#loader img {
    display: block;
    width: 180px;
    max-width: 60vw;
    height: auto;
    aspect-ratio: 500 / 501;
    object-fit: contain;
    image-rendering: auto;
    transform: translate3d(0, 0, 0);
    transform-origin: 50% 55%;
    will-change: transform, filter;
    filter: drop-shadow(0 5px 8px rgba(6, 62, 104, .16));
    animation: loader-mark-float 2.3s ease-in-out infinite
}

#loader.hide {
    opacity: 0;
    pointer-events: none
}

@keyframes loader-mark-float {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        filter: drop-shadow(0 5px 8px rgba(6, 62, 104, .16))
    }

    50% {
        transform: translate3d(0, -2px, 0);
        filter: drop-shadow(0 9px 13px rgba(6, 62, 104, .2))
    }
}

@media (prefers-reduced-motion: reduce) {
    #loader img {
        animation: none
    }
}

body.leave {
    opacity: 0;
    transition: opacity .3s
}

body {
    animation: fin .6s
}

@keyframes fin {
    from {
        opacity: 0
    }
}

.topbar {
    background: var(--d);
    color: #fff;
    text-align: center;
    font-size: .85rem;
    padding: 6px
}

.topbar a {
    color: #9fe3c2
}




.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #eaf5ff, #fff 55%, #e9f8f1);
    padding: clamp(70px, 12vw, 150px) 0
}

#dna {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.hero-in {
    position: relative
}

.hero h1 {
    font-size: clamp(2rem, 5.5vw, 4rem);
    line-height: 1.1;
    color: var(--d);
    max-width: 14ch;
    margin: .3em 0;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.eyebrow {
    color: var(--g);
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-size: .8rem
}

.lead {
    max-width: 62ch;
    font-size: 1.1rem;
    margin-bottom: 1em
}

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

.btn {
    display: inline-block;
    background: var(--grad);
    color: #fff;
    border: 0;
    padding: 13px 26px;
    border-radius: 50px;
    font: 600 .95rem Inter, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s, box-shadow .3s;
    box-shadow: 0 8px 22px rgba(10, 110, 189, .25)
}

.btn:hover {
    box-shadow: 0 12px 30px rgba(31, 166, 106, .35)
}

.btn.ghost {
    background: #fff;
    color: var(--b);
    border: 2px solid var(--b);
    box-shadow: none
}

.sec {
    padding: clamp(48px, 7vw, 90px) 0
}

.sec:nth-of-type(even) {
    background: var(--s)
}

h2 {
    color: var(--d);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    margin-bottom: .5em
}

h3 {
    color: var(--d);
    font-size: 1.15rem
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    margin-top: 24px
}

.glass {
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(10, 110, 189, .1);
    padding: 26px;
    transition: transform .35s, box-shadow .35s
}

.glass:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(31, 166, 106, .18)
}

.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s, transform .8s
}

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

.counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-top: 24px;
    text-align: center
}

.counters b {
    display: block;
    font-size: 2.6rem;
    color: var(--b)
}

.timeline {
    border-left: 3px solid var(--g);
    margin: 24px 0 0 12px;
    padding: 0
}

.timeline li {
    padding: 0 0 26px 26px;
    position: relative
}

.timeline li:before {
    content: "";
    position: absolute;
    left: -11px;
    top: 4px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--grad)
}

.timeline b {
    display: block;
    color: var(--d)
}

.faq-i {
    border-bottom: 1px solid #d5e3ee
}

.faq button {
    all: unset;
    display: block;
    width: 100%;
    padding: 16px 28px 16px 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--d);
    position: relative
}

.faq button:after {
    content: "+";
    position: absolute;
    right: 4px;
    color: var(--g);
    font-size: 1.4rem
}

.faq button[aria-expanded=true]:after {
    content: "\2212"
}

.faq-a {
    padding-bottom: 16px
}

.form {
    display: grid;
    gap: 10px;
    max-width: 640px;
    margin-top: 20px
}

label {
    display: grid;
    gap: 4px;
    font-weight: 600;
    color: var(--d);
    font-size: .9rem
}

input,
textarea,
select {
    font: inherit;
    padding: 12px;
    border: 1px solid #bcd0e0;
    border-radius: 10px;
    background: #fff
}

input.bad,
textarea.bad {
    border-color: #c0392b
}

.err {
    color: #b3261e;
    font-size: .82rem;
    min-height: 1em
}

.ok {
    color: var(--g);
    font-weight: 600
}

.sf {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    max-width: 520px
}

.sf caption {
    font-weight: 700;
    padding: 10px;
    color: var(--d)
}

.sf th {
    background: var(--d);
    color: #fff
}

.sf th,
.sf td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e3edf5
}

.scroll {
    overflow-x: auto
}

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    align-items: center
}

.mock {
    perspective: 900px;
    display: grid;
    place-items: center;
    padding: 30px
}

.box {
    width: 170px;
    height: 240px;
    background: var(--grad);
    color: #fff;
    border-radius: 14px;
    display: grid;
    place-content: center;
    text-align: center;
    font-weight: 700;
    transform: rotateY(-25deg) rotateX(6deg);
    box-shadow: 20px 24px 40px rgba(11, 37, 64, .3);
    animation: float 5s ease-in-out infinite
}

.box small {
    font-weight: 400
}

@keyframes float {
    50% {
        transform: rotateY(-12deg) rotateX(6deg) translateY(-14px)
    }
}

.map {
    position: relative;
    aspect-ratio: 5/3;
    margin-top: 20px;
    padding: 0
}

.map svg {
    width: 100%;
    height: 100%
}

.map path {
    fill: #d7ebf9;
    stroke: var(--b);
    stroke-width: .3
}

.draw {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: dr 3s forwards
}

@keyframes dr {
    to {
        stroke-dashoffset: 0
    }
}

.line {
    width: 100%;
    max-height: 50px
}

.line path {
    fill: none;
    stroke: var(--g);
    stroke-width: 3
}

.pin {
    position: absolute;
    background: none;
    border: 0;
    cursor: pointer;
    transform: translate(-50%, -50%)
}

.pin i {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--g);
    box-shadow: 0 0 0 0 rgba(31, 166, 106, .6);
    animation: ping 2s infinite
}

.pin em {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    background: var(--d);
    color: #fff;
    font-style: normal;
    font-size: .75rem;
    padding: 2px 8px;
    border-radius: 6px;
    opacity: 0;
    transition: .2s;
    white-space: nowrap
}

.pin:hover em,
.pin:focus em {
    opacity: 1
}

@keyframes ping {
    to {
        box-shadow: 0 0 0 16px transparent
    }
}

.team {
    text-align: center
}

.av {
    width: 84px;
    height: 84px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 2rem;
    transition: transform .4s
}

.team:hover .av {
    transform: rotate(360deg) scale(1.1)
}

.modal {
    border: 0;
    border-radius: 20px;
    padding: 30px;
    max-width: 480px;
    width: 90%;
    margin: auto
}

.modal::backdrop {
    background: rgba(11, 37, 64, .55);
    backdrop-filter: blur(4px)
}

.cta {
    background: var(--grad) !important;
    color: #fff;
    text-align: center
}

.cta h2,
.cta .lead {
    color: #fff;
    margin-inline: auto
}

.cta .btn {
    background: #fff;
    color: var(--b)
}

.gmap {
    width: 100%;
    height: 380px;
    border: 0;
    border-radius: 20px;
    margin-top: 20px
}

.foot {
    background: var(--d);
    color: #c5d6e6;
    padding-top: 60px
}

.foot h2,
.foot h3 {
    color: #fff;
    margin-bottom: 10px
}

.foot a {
    color: #c5d6e6;
    text-decoration: none
}

.foot a:hover {
    color: #6fe0a8
}

.fgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px
}

.foot label {
    color: #fff
}

.fbot {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    border-top: 1px solid #254562;
    margin-top: 40px;
    padding: 20px 0;
    font-size: .85rem
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto
    }

    .reveal {
        opacity: 1;
        transform: none
    }

    .draw {
        stroke-dashoffset: 0
    }
}

:root {
    --b: #0580d0;
    --g: #187349;
    --d: #033865;
    --s: #f1f8fd;
    --grad: linear-gradient(135deg, #0580d0, #187349)
}

.brand img {
    height: 44px;
    width: auto
}

.flogo {
    width: 190px;
    height: auto;
    margin-bottom: 12px
}

.hero {
    background: url(../assets/molecules.svg) right/60% no-repeat, linear-gradient(160deg, #eaf5ff, #fff 55%, #e9f8f1)
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: var(--grad);
    opacity: .12;
    animation: float 7s ease-in-out infinite
}

.s1 {
    width: 180px;
    height: 180px;
    right: 8%;
    top: 12%
}

.s2 {
    width: 90px;
    height: 90px;
    right: 30%;
    bottom: 10%;
    animation-delay: -2s
}

.s3 {
    width: 60px;
    height: 60px;
    left: 6%;
    bottom: 14%;
    animation-delay: -4s
}


.slider {
    max-width: 760px;
    margin: 24px auto 0;
    text-align: center;
    position: relative
}

.slide {
    display: none
}

.slide.on {
    display: block;
    animation: fin .6s
}

.slide blockquote {
    font-size: 1.25rem;
    color: var(--d)
}

.slide figcaption {
    margin-top: 12px;
    color: var(--g);
    font-weight: 600
}

.sl-c {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px
}

.sl-c button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--b);
    background: #fff;
    color: var(--b);
    font-size: 1.4rem;
    cursor: pointer
}

.wa {
    position: fixed;
    left: 18px;
    bottom: 18px;
    background: #25d366;
    color: #fff;
    padding: 12px 18px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    z-index: 70;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25)
}

.totop {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: var(--grad);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 70
}

.totop[hidden] {
    display: none
}

@media(max-width:900px) {
    .hero {
        background-size: 100%, auto
    }
}

/* v2 additions */
.ic {
    width: 44px;
    height: 44px;
    stroke: var(--b);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 8px
}

.page-hero {
    padding: clamp(50px, 8vw, 100px);
    margin-top: -76px;

}

.page-hero h1 {
    max-width: 20ch
}

.hero-in.split {
    align-items: center
}

.ticks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px 24px
}

.ticks li {
    padding-left: 28px;
    position: relative
}

.ticks li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 14px;
    height: 8px;
    border-left: 3px solid var(--g);
    border-bottom: 3px solid var(--g);
    transform: rotate(-45deg)
}

.note {
    background: #fff8e1;
    border-left: 4px solid #e0a800;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 16px 0;
    color: #5c4400;
    font-size: .92rem
}

.ph {
    aspect-ratio: 4/3;
    border: 2px dashed #9cc3e0;
    border-radius: 20px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--b);
    background: rgba(255, 255, 255, .6);
    padding: 20px;
    font-weight: 600
}

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

.small {
    font-size: .8rem;
    padding: 16px 0 24px;
    color: #9db6cc
}

.foot address {
    font-style: normal;
    line-height: 1.8
}

.timeline b {
    font-size: 1.05rem
}

.team p {
    text-align: left
}

.sec p+p {
    margin-top: .8em
}

/* ===== Header v3: floating card, dropdowns, mobile drawer ===== */
html {
    scroll-padding-top: 96px
}

.nav {
    position: sticky;
    top: 10px;
    z-index: 100;
    padding: 0 2%;
    margin-top: 10px
}

.navin {
    position: relative;
    max-width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(14px);
    border: 1px solid #e3edf5;
    border-radius: 18px;
    padding: 10px 22px;
    box-shadow: 0 8px 30px rgba(3, 56, 101, .1);
    transition: box-shadow .3s, padding .3s
}

.nav.stuck .navin {
    box-shadow: 0 14px 40px rgba(3, 56, 101, .2);
    padding-block: 7px
}

.brand {
    display: flex;
    align-items: center;
    flex: none
}

.brand img {
    height: 46px;
    width: auto;
    display: block
}

.menu {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    min-width: 0
}

.menu>li {
    position: relative;
    padding-left: 10px;
}

.row {
    display: flex;
    align-items: center
}

.menu a.l {
    position: relative;
    display: block;
    line-height: 1.5;
    padding: 10px 5px;
    font-size: .76rem;
    font-weight: 500;
    color: var(--d);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 10px;
    transition: color .2s
}

.menu a.l:after {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 3px;
    height: 2px;
    background: var(--b);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform .3s
}

.menu a.l:hover,
.menu a.l[aria-current=page] {
    color: var(--b)
}

.menu a.l:hover:after,
.menu a.l[aria-current=page]:after {
    transform: scaleX(1)
}

.sub-t {
    all: unset;
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 22px;
    height: 30px;
    color: var(--d);
    border-radius: 8px
}

.sub-t:focus-visible {
    outline: 3px solid var(--g)
}

.chev {
    transition: transform .25s
}

.sub {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 14px;
    background: #fff;
    border: 1px solid #e3edf5;
    border-radius: 16px;
    box-shadow: 0 22px 55px rgba(3, 56, 101, .2);
    padding: 10px;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s, transform .25s, visibility .25s;
    z-index: 5
}

.sub:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px
}

.sub.wide {
    display: grid;
    grid-template-columns: 210px 290px;
    min-width: 520px;
    padding: 12px
}

.sub-l {
    display: grid;
    gap: 2px;
    align-content: start
}

.sub-l a {
    display: flex;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: .88rem;
    color: var(--d);
    text-decoration: none
}

.sub-l a.ar:after {
    content: "\203A";
    font-size: 1.2rem;
    line-height: 1
}

.sub-l a:hover,
.sub-l a:focus-visible,
.sub-l:not(:hover) a:first-child {
    background: #e8f2fc;
    color: var(--b)
}

.sub:not(.wide) .sub-l:not(:hover) a:first-child {
    background: none;
    color: var(--d)
}

.sub:not(.wide) .sub-l a:hover {
    background: #e8f2fc;
    color: var(--b)
}

.feat {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-left: 1px solid #e3edf5;
    text-decoration: none;
    color: var(--t);
    font-size: .85rem;
    line-height: 1.45
}

.feat strong {
    display: block;
    color: var(--d);
    font-size: 1rem
}

.feat em {
    display: block;
    margin-top: 6px;
    color: var(--b);
    font-style: normal;
    font-weight: 600
}

.pbox {
    flex: none;
    width: 72px;
    height: 96px;
    border-radius: 8px;
    background: linear-gradient(160deg, #187349, #0f5a38);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 20px rgba(24, 115, 73, .35);
    transform: rotate(-4deg);
    transition: transform .4s
}

.pbox b {
    color: #fff;
    font-size: .62rem;
    writing-mode: vertical-rl
}

.feat:hover .pbox {
    transform: rotate(0) scale(1.06)
}

.nav-act {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
    padding-left: 14px;
    border-left: 1px solid #dbe6ef
}

.srch-b {
    all: unset;
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--d);
    transition: background .2s
}

.srch-b:hover {
    background: #e8f2fc;
    color: var(--b)
}

.srch-b:focus-visible {
    outline: 3px solid var(--g)
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #033865, #187349);
    color: #fff;
    border-radius: 50px;
    padding: 11px 20px;
    font-weight: 600;
    font-size: .86rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(3, 56, 101, .25);
    transition: transform .25s, box-shadow .25s
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(24, 115, 73, .35)
}

.btn-cta svg {
    transition: transform .25s
}

.btn-cta:hover svg {
    transform: translateX(4px)
}

.burger {
    all: unset;
    display: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--d);
    border-radius: 10px
}

.burger:focus-visible {
    outline: 3px solid var(--g)
}

.burger path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .3s, opacity .2s
}

.burger[aria-expanded=true] .b1 {
    transform: translateY(5px) rotate(45deg)
}

.burger[aria-expanded=true] .b2 {
    opacity: 0
}

.burger[aria-expanded=true] .b3 {
    transform: translateY(-5px) rotate(-45deg)
}

.srch {
    border: 0;
    border-radius: 18px;
    padding: 18px;
    width: min(560px, 92%);
    margin: 12vh auto auto;
    box-shadow: 0 30px 80px rgba(3, 56, 101, .35)
}

.srch::backdrop {
    background: rgba(3, 56, 101, .5);
    backdrop-filter: blur(4px)
}

.srch form {
    display: flex;
    gap: 8px
}

.srch input {
    flex: 1;
    font: inherit;
    padding: 14px;
    border: 2px solid #cfe0ee;
    border-radius: 12px
}

.srch .x {
    all: unset;
    cursor: pointer;
    font-size: 1.8rem;
    padding: 0 12px;
    color: var(--d)
}

.srch-r {
    list-style: none;
    padding: 10px 0 0;
    margin: 0
}

.srch-r a {
    display: block;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--d);
    text-decoration: none
}

.srch-r a:hover,
.srch-r a:focus {
    background: #e8f2fc;
    color: var(--b)
}

.srch-r li {
    padding: 2px 0
}

@media(min-width:1100px) {

    .has-sub:hover>.sub,
    .has-sub:focus-within>.sub,
    .has-sub.open>.sub {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    .has-sub:hover .chev,
    .has-sub.open .chev {
        transform: rotate(180deg)
    }
}

.row a.l {
    flex: 1
}

.sub-t {
    height: 38px
}

.brand img {
    height: 42px
}

.btn-cta {
    padding: 10px 17px
}

@media(max-width:1099px) {
    .nav {
        top: 8px;
        padding: 0 3%;
        margin-top: 8px
    }

    .navin {
        padding: 8px 14px;
        border-radius: 16px
    }

    .brand img {
        height: 40px
    }

    .nav-act {
        margin-left: auto;
        padding: 0;
        border: 0
    }

    .btn-cta {
        display: none
    }

    .burger {
        display: grid
    }

    .menu {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border: 1px solid #e3edf5;
        border-radius: 16px;
        box-shadow: 0 22px 50px rgba(3, 56, 101, .2);
        padding: 10px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .25s, transform .25s, visibility .25s
    }

    .menu.open {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    .menu a.l {
        flex: 1;
        padding: 13px 14px;
        font-size: .95rem
    }

    .menu a.l:after {
        display: none
    }

    .menu a.l[aria-current=page] {
        background: #e8f2fc
    }

    .sub-t {
        width: 44px;
        height: 44px
    }

    .has-sub.open .chev {
        transform: rotate(180deg)
    }

    .sub,
    .sub.wide {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        min-width: 0;
        margin: 0;
        padding: 0 0 6px 14px
    }

    .sub:before {
        display: none
    }

    .has-sub.open>.sub {
        display: block
    }

    .sub-l a {
        padding: 11px 14px;
        font-size: .9rem
    }

    .sub-l a.ar:after {
        display: none
    }

    .sub .sub-l:not(:hover) a:first-child,
    .sub.wide .sub-l:not(:hover) a:first-child {
        background: none;
        color: var(--d)
    }

    .feat {
        display: none
    }
}

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

    .menu,
    .sub {
        transition: none
    }
}

/* ===== Desktop header: matches approved design, fluid from 1100px up ===== */
@media(min-width:1100px) {
    .nav {
        padding: 0 1.5%
    }

    .navin {
        padding: 12px clamp(12px, 1.5vw, 24px);
        gap: clamp(6px, .8vw, 16px);
        border-radius: 20px
    }

    .brand img {
        height: clamp(38px, 2.9vw, 44px)
    }

    .menu {
        flex: 1 1 auto;
        justify-content: center;
        margin: 0
    }

    .menu a.l {
        font-size: clamp(.69rem, .35vw + .45rem, .78rem);
        padding: 10px clamp(3px, .35vw, 6px);
        font-weight: 500
    }

    .menu a.l:after {
        left: clamp(3px, .35vw, 6px);
        right: clamp(3px, .35vw, 6px);
        bottom: 2px;
        height: 2.5px
    }

    .has-sub:hover>.row,
    .has-sub.open>.row,
    .has-sub:focus-within>.row {
        background: #e8f2fc;
        border-radius: 10px
    }

    .has-sub:hover>.row a.l,
    .has-sub.open>.row a.l {
        color: var(--b)
    }

    .has-sub:hover>.row a.l:after {
        transform: scaleX(0)
    }

    .sub-t {
        width: clamp(16px, 1.3vw, 20px)
    }

    .nav-act {
        gap: clamp(8px, .9vw, 14px);
        padding-left: clamp(10px, 1.1vw, 16px)
    }

    .btn-cta {
        padding: clamp(8px, .7vw, 11px) clamp(12px, 1.2vw, 20px);
        font-size: clamp(.72rem, .3vw + .45rem, .84rem)
    }

    .pbox {
        background: linear-gradient(#fff 0 20%, transparent 20%), linear-gradient(160deg, #2f9e63, #0f5a38);
        border: 1px solid #cfe5d8
    }

    .pbox b {
        color: #fff;
        margin-top: 14px
    }
}/* ===== v4: top bar, flat desktop header (large logo), new footer ===== */
.tb{background:#033865;color:#fff;font-size:.78rem}.tb-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px clamp(14px,3vw,56px)}
.tb a,.tb span{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:7px}.tb svg{width:15px;height:15px;flex:none}.tb a:hover{color:#9fe3c2}
.tb-l,.tb-c,.tb-r{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}.tb-c span+span{padding-left:clamp(12px,1.6vw,26px);border-left:1px solid rgba(255,255,255,.3)}.tb-r a{width:26px;height:26px;justify-content:center}.tb-r svg{width:16px;height:16px}
@media(max-width:900px){.tb-c,.tb-r{display:none}.tb-in{justify-content:center}}@media(max-width:480px){.tb-l a:first-child{display:none}}
@media(min-width:1100px){
.nav{top:0;margin-top:0;padding:0;background:#fff;box-shadow:0 4px 24px rgba(3,56,101,.08)}
.navin{max-width:none;border:0;border-radius:0;background:#fff;backdrop-filter:none;box-shadow:none;padding:6px clamp(14px,1.8vw,40px)}
.nav.stuck .navin{box-shadow:none;padding-block:4px}.nav.stuck{box-shadow:0 8px 28px rgba(3,56,101,.14)}
.brand img{height:clamp(42px,3vw,66px)}}
@media(max-width:1099px){.brand img{height:44px}}
.bf{position:relative;overflow:hidden;background:linear-gradient(160deg,#04274a,#033865 60%,#064470);color:#c9d9ea;padding:clamp(40px,5vw,60px) 0 0}
.bf:before{content:"";position:absolute;inset:0;background:url(../assets/leaf-line.svg) left bottom/clamp(260px,32vw,460px) no-repeat;pointer-events:none}
.bf-in{position:relative;width:min(1240px,92%);margin:auto}.bf h3{color:#fff;font-size:1.05rem;margin-bottom:14px}
.bf-g{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.25fr}.bf-g>div{padding:0 clamp(14px,2.4vw,40px)}.bf-g>div:first-child{padding-left:0}.bf-g>div+div:nth-child(n+3){border-left:1px solid rgba(255,255,255,.12)}
.bf-logo{width:min(250px,100%);height:auto;display:block;margin-bottom:14px}.bf p{font-size:.9rem;line-height:1.6}
.bf ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.bf a{color:#d5e2ef;text-decoration:none;transition:color .2s}.bf a:hover{color:#6fe0a8}.bf li a{font-size:.88rem}
.bf-soc{display:flex;gap:10px;margin-top:18px}.bf-soc a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;transition:transform .25s,background .25s}.bf-soc a:hover{background:#187349;transform:translateY(-3px);color:#fff}.bf-soc svg{width:17px;height:17px}
.bf address{font-style:normal;display:grid;gap:10px}.bf address p{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;line-height:1.5}.bf address svg{width:17px;height:17px;flex:none;margin-top:2px;color:#fff}
.bf-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding:20px 0 8px;font-size:.84rem}
.bf-leg{display:flex;gap:18px;flex-wrap:wrap}.bf-tag{display:inline-flex;gap:8px;align-items:center;color:#9fe3c2;font-style:italic}.bf-tag svg{width:20px;height:20px}
.bf-fda{font-size:.74rem!important;opacity:.7;padding-bottom:22px}
@media(max-width:960px){.bf-g{grid-template-columns:1fr 1fr;row-gap:32px}.bf-g>div{padding:0 14px 0 0}.bf-g>div+div:nth-child(n+3){border:0}}
@media(max-width:560px){.bf-g{grid-template-columns:1fr}.bf-bot{flex-direction:column;align-items:flex-start}}

/* ===== v5: unified header (top bar + wave + nav), sticky as one block on desktop (>=1100px) ===== */
.hdr{display:contents}
.tb{position:relative;z-index:2;background:linear-gradient(90deg,#052f58,#0b4274 50%,#052f58)}
.tb .tb-wave{position:absolute;left:0;right:0;top:100%;width:100%;height:14px;max-width:none;fill:#0a3b69;pointer-events:none;display:block}
.tb-l a+a{padding-left:clamp(12px,1.6vw,26px);border-left:1px solid rgba(255,255,255,.3)}
.tb-r{padding-left:clamp(12px,1.6vw,26px);border-left:1px solid rgba(255,255,255,.3)}
@media(max-width:1099px){.nav{margin-top:18px}}
@media(min-width:1100px){
html{scroll-padding-top:130px}
.hdr{display:block;position:sticky;top:0;z-index:100}
.tb{font-size:clamp(.72rem,.45vw + .45rem,.8rem)}
.tb-in{padding:11px clamp(16px,3.3vw,56px)}
.nav{position:relative;top:auto;z-index:1;padding:8px 0 0;margin:0;background:#fff}
.navin{max-width:none;padding:8px clamp(16px,3.3vw,56px);gap:clamp(14px,2.2vw,34px)}
.nav.stuck .navin{padding-block:6px}
.brand img{height:clamp(46px,4.9vw,62px)}
.menu{flex:1 1 auto;justify-content:flex-start;margin:0}
.menu a.l{font-size:clamp(.66rem,.4vw + .38rem,.8rem);padding:10px clamp(2px,.45vw,7px);font-weight:500}
.menu a.l:after{left:clamp(2px,.45vw,7px);right:clamp(2px,.45vw,7px)}
.srch-b{display:none}
.nav-act{border:0;padding-left:0}
.btn-cta{padding:clamp(10px,.9vw,14px) clamp(16px,1.6vw,26px);font-size:clamp(.74rem,.3vw + .5rem,.86rem)}
}
@media(min-width:1100px){
.menu>li{padding-left:0}
.menu a.l{padding:10px clamp(3px,.5vw,9px)}
.menu a.l:after{left:clamp(3px,.5vw,9px);right:clamp(3px,.5vw,9px)}
.sub-t{width:clamp(14px,1.2vw,20px)}
.navin{gap:clamp(10px,1.8vw,30px)}
.brand img{height:clamp(44px,4.5vw,60px)}
.menu{gap:0}
.btn-cta{white-space:nowrap}
}
@media(min-width:1100px) and (max-width:1279px){
.brand img{height:clamp(44px,4.2vw,54px)}
.menu{justify-content:space-between}
.menu a.l{font-size:.7rem;padding-inline:4px}
.menu a.l:after{left:4px;right:4px}
.navin{gap:10px;padding-inline:16px}
.btn-cta{padding:10px 14px;font-size:.72rem;gap:6px}
.btn-cta svg{width:14px;height:14px}
}
@media(min-width:1280px){
.menu a.l{padding-inline:clamp(5px,.65vw,12px)}
.menu a.l:after{left:clamp(5px,.65vw,12px);right:clamp(5px,.65vw,12px)}
.navin{padding-inline:clamp(24px,3.3vw,56px)}
.brand img{height:clamp(52px,4.4vw,64px)}
}
@media(min-width:1280px) and (max-width:1365px){
.menu a.l{padding-inline:6px}
.menu a.l:after{left:6px;right:6px}
.brand img{height:54px}
}

/* ===== v9: Product dropdown featured image ===== */
.pbox{width:clamp(104px,8.5vw,132px);height:auto;background:none;border:0;box-shadow:none;transform:none;display:block}
.pbox img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 10px 22px rgba(6,62,104,.2)}
.pbox[data-product-image="hide"]{display:none!important}
.feat:hover .pbox{transform:scale(1.05)}
/* ===== v14: featured product follows the Global / US menu category ===== */
.sub-features{display:grid;align-content:stretch;min-width:0}
.sub-features>.feat{display:none;min-height:138px}
.sub-features>.feat.is-active{display:flex}
.sub-l a[data-product-target].is-product-active{background:#e8f2fc;color:var(--b)}
@media(max-width:1099px){.sub-features{display:none}}
/* ===== v11: every top banner (hero) stays inside a centered container: stable on 1480px+ screens and when zooming out ===== */
.bs-home-hero,.ct-hero,.bs-ab-hero,.bs-q-hero,.bs-i-hero,.bs-mk-hero,.bs-par-hero,.bs-sci-hero,.bs-lp-hero,.hero.page-hero{width:100%;max-width:1480px;margin-inline:auto}
@media(min-width:1481px){.bs-home-hero,.ct-hero,.bs-ab-hero,.bs-q-hero,.bs-i-hero,.bs-mk-hero,.bs-par-hero,.bs-sci-hero,.bs-lp-hero,.hero.page-hero{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}}
/* ===== v12: product flip (front -> back on hover / tap / Enter) ===== */
.pflip{position:relative;margin:0;padding:clamp(18px,3vw,34px) clamp(8px,2vw,24px) 0;border-radius:24px;background:radial-gradient(70% 60% at 50% 45%,#fff,rgba(255,255,255,0) 72%),linear-gradient(145deg,#e8f4fb,#f4faf8);cursor:pointer;outline-offset:4px;-webkit-tap-highlight-color:transparent}
.pf-in{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:569/363;perspective:1400px;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.2,.8,.2,1)}
.pf-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-backface-visibility:hidden;backface-visibility:hidden;filter:drop-shadow(0 22px 22px rgba(11,60,110,.28))}
.pf-back{transform:rotateY(180deg)}
.pf-shadow{display:block;width:62%;height:16px;margin:6px auto 0;border-radius:50%;background:radial-gradient(closest-side,rgba(11,60,110,.3),transparent);filter:blur(3px)}
.pf-hint{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0 16px;text-align:center}.pf-lab{font-weight:700;font-size:.85rem;color:#0b4a86}.pf-hint small{font-size:.75rem;color:#5a6b7b}
.pflip.is-flipped .pf-in{transform:rotateY(180deg)}
@media(hover:hover){.pflip:hover .pf-in{transform:rotateY(180deg)}.pflip:hover.is-flipped .pf-in{transform:rotateY(0)}}
.pflip:focus-visible{outline:3px solid #15956f}
@media(prefers-reduced-motion:reduce){.pf-in{transition:none;transform:none!important}.pf-face{transition:opacity .3s}.pf-back{transform:none;opacity:0}.pflip.is-flipped .pf-back{opacity:1}.pflip.is-flipped .pf-front{opacity:0}@media(hover:hover){.pflip:hover .pf-back{opacity:1}.pflip:hover .pf-front{opacity:0}.pflip:hover.is-flipped .pf-back{opacity:0}.pflip:hover.is-flipped .pf-front{opacity:1}}}
/* ===== v13: no announcement bar on mobile/tablet; navigation attached flat to the very top (mobile header mode: below 1100px) ===== */
@media(max-width:1099px){
.tb{display:none}
.nav{position:sticky;top:0;margin:0;padding:0;background:#fff;box-shadow:0 4px 18px rgba(3,56,101,.1)}
.navin{max-width:none;border:0;border-radius:0;background:#fff;backdrop-filter:none;box-shadow:none;padding:8px clamp(14px,3vw,28px)}
.nav.stuck .navin{box-shadow:none}
.menu{top:100%;left:0;right:0;margin:0;border:0;border-top:1px solid #e3edf5;border-radius:0 0 18px 18px;padding:10px clamp(12px,3vw,24px) 14px}
}
/* Products and markets dropdowns open on hover on desktop, while remaining keyboard-accessible. */
@media(min-width:1100px){
.menu>li.has-sub:hover>.sub,.menu>li.has-sub:focus-within>.sub,.menu>li.has-sub.open>.sub{opacity:1;visibility:visible;transform:translateY(0)}
}
/* Mobile nav stays in document flow but tucks away while scrolling down. */
@media(max-width:1099px){
 .nav{transition:transform .22s ease}
 .nav.nav-hidden{transform:translateY(calc(-100% - 8px));pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.nav{transition:none!important}}
@media(min-width:1100px){
 .feat.cold-flu-feature .pbox img{transform:perspective(650px) rotateY(-9deg) rotateX(2deg);transform-origin:center;filter:drop-shadow(5px 9px 5px rgba(4,43,82,.28));transition:transform .25s ease,filter .25s ease}
 .feat.cold-flu-feature:hover .pbox img{transform:perspective(650px) rotateY(-5deg) rotateX(1deg) translateY(-2px)}
}