:root {
    --navy: #0b3a7a;
    --teal: #0e9aa7;
    --mint: #eaf6f7;
    --ink: #14233a;
    --mut: #5a6b7d;
    --line: #d9e4ea;
    --paper: #fbfdfe;
    --white: #fff
}

* {
    box-sizing: border-box
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.6 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif
}

a {
    color: inherit
}

img {
    max-width: 100%;
    display: block
}

.wrap {
    max-width: 1140px;
    margin: auto;
    padding: 0 20px
}

.narrow {
    max-width: 820px
}

.center {
    text-align: center
}

.mut {
    color: var(--mut)
}

.lead {
    font-size: 19px;
    color: var(--navy);
    font-weight: 600
}

h1 {
    font-size: clamp(30px, 4.6vw, 44px);
    line-height: 1.12;
    margin: 0 0 14px;
    color: var(--navy);
    font-weight: 800;
    letter-spacing: -.02em
}

h2 {
    font-size: clamp(23px, 3vw, 31px);
    line-height: 1.2;
    margin: 28px 0 10px;
    color: var(--navy);
    font-weight: 700
}

h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: var(--navy)
}

.strip {
    background: var(--navy);
    color: #fff;
    text-align: center;
    font-size: 14px;
    padding: 7px 12px
}

.strip a {
    font-weight: 700
}

.hd {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20
}

.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    gap: 16px
}

.brand {
    text-decoration: none;
    font-size: 20px;
    color: var(--navy)
}

.brand b {
    font-weight: 800
}

.brand span {
    color: var(--teal);
    font-weight: 800
}

.nav {
    display: flex;
    gap: 6px;
    align-items: center
}

.nav>a,
.dd>a {
    padding: 10px 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-radius: 8px;
    display: block
}

.nav>a:hover,
.dd>a:hover {
    background: var(--mint);
    color: var(--navy)
}

.dd {
    position: relative
}

.sub {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 250px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(11, 58, 122, .12)
}

.sub a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px
}

.sub a:hover {
    background: var(--mint)
}

.dd:hover .sub,
.dd:focus-within .sub {
    display: block
}

.burger {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 22px;
    padding: 2px 10px;
    cursor: pointer;
    color: var(--navy)
}

.btn {
    display: inline-block;
    background: var(--teal);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 12px 22px;
    font: 700 15px inherit;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer
}

.btn:hover {
    background: #0b7f8a
}

.btn.ghost {
    background: transparent;
    color: var(--navy);
    border: 2px solid var(--navy)
}

.btn.ghost:hover {
    background: var(--mint)
}

.btn.sm {
    padding: 5px 12px;
    font-size: 13px;
    vertical-align: middle
}

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid #7cc9d1;
    outline-offset: 2px
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px
}

.hero {
    background: linear-gradient(180deg, var(--mint), var(--paper));
    padding: 44px 0 40px
}

.hero-g {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 36px;
    align-items: start
}

.banner {
    border-radius: 16px;
    margin-top: 18px;
    border: 1px solid var(--line)
}

.qcard {
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 5px solid var(--teal);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 12px 36px rgba(11, 58, 122, .1)
}

.qcard.flat {
    box-shadow: none;
    border-top-width: 1px
}

.qcard h3 {
    font-size: 21px
}

label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin: 10px 0 0;
    color: var(--ink)
}

input,
select {
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid #b9c9d3;
    border-radius: 9px;
    font: inherit;
    background: #fff;
    color: var(--ink)
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.ages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin: 2px 0 4px
}

.qcard .btn {
    width: 100%;
    margin-top: 16px
}

.chk {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 500
}

.chk input {
    width: auto;
    margin-top: 5px
}

.sec {
    padding: 44px 0
}

.sec.alt {
    background: var(--mint)
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    margin-top: 16px
}

.pcard {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column
}

.pcard:hover {
    border-color: var(--teal)
}

.pcard img {
    height: 170px;
    width: 100%;
    object-fit: cover;
    object-position: top
}

.pcard div {
    padding: 14px 16px 18px
}

.pcard p {
    margin: 0;
    color: var(--mut);
    font-size: 14px
}

.bcard {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    padding: 16px
}

.bcard p {
    margin: 0;
    color: var(--mut)
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px
}

.cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center
}

.cta img {
    border-radius: 16px;
    border: 1px solid var(--line)
}

ul.tick {
    list-style: none;
    padding: 0;
    margin: 8px 0
}

ul.tick li {
    padding: 6px 0 6px 30px;
    position: relative
}

ul.tick li:before {
    content: "";
    position: absolute;
    left: 2px;
    top: 12px;
    width: 14px;
    height: 8px;
    border-left: 3px solid var(--teal);
    border-bottom: 3px solid var(--teal);
    transform: rotate(-45deg)
}

.tbl {
    overflow-x: auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-top: 12px
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px
}

td,
th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left
}

th {
    background: #f1f7f9;
    color: var(--navy)
}

.flash {
    max-width: 1100px;
    margin: 14px auto;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 600
}

.flash.ok {
    background: #e4f6ec;
    color: #0b5a32;
    border: 1px solid #9bd5b4
}

.flash.err {
    background: #fdecec;
    color: #8a1c1c;
    border: 1px solid #f0b4b4
}

.gimg,
video {
    width: 100%;
    border-radius: 10px;
    background: #000
}

.ft {
    background: var(--navy);
    color: #d7e4f4;
    padding: 30px 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.9
}

.ft a {
    color: #fff
}

@media(max-width:860px) {

    .hero-g,
    .two-col,
    .cta,
    .two {
        grid-template-columns: 1fr
    }

    .burger {
        display: block
    }

    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        align-items: stretch;
        padding: 8px 14px 16px;
        border-bottom: 1px solid var(--line);
        max-height: 80vh;
        overflow: auto
    }

    body.open .nav {
        display: flex
    }

    .sub {
        display: block;
        position: static;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 14px
    }

    .hd {
        position: relative
    }
}

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

.social {
    display: inline-flex;
    gap: 8px;
    vertical-align: middle;
    margin-left: 10px
}

.social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    transition: background .15s
}

.social a:hover {
    background: var(--teal)
}

.ft .social {
    margin: 8px 0 0
}

.ft .social a {
    width: 38px;
    height: 38px
}

.sec .social a {
    background: var(--mint);
    color: var(--navy)
}

.sec .social a:hover {
    background: var(--teal);
    color: #fff
}

.sec .social {
    margin-left: 6px
}

/* ===== motion + visual polish ===== */
.hero {
    position: relative;
    overflow: hidden
}

.hero .wrap {
    position: relative;
    z-index: 1
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    z-index: 0;
    animation: drift 16s ease-in-out infinite alternate
}

.b1 {
    width: 420px;
    height: 420px;
    background: #b9e6ec;
    top: -150px;
    left: -120px
}

.b2 {
    width: 360px;
    height: 360px;
    background: #cddffb;
    bottom: -140px;
    right: 6%;
    animation-delay: -7s
}

@keyframes drift {
    to {
        transform: translate(50px, 34px) scale(1.12)
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(22px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.js .hero h1,
.js .hero .lead,
.js .hero p.mut,
.js .hero .chips,
.js .hero .banner,
.js .hero>.wrap>.qcard {
    opacity: 0;
    animation: rise .8s cubic-bezier(.2, .7, .2, 1) forwards
}

.js .hero .lead {
    animation-delay: .12s
}

.js .hero p.mut {
    animation-delay: .2s
}

.js .hero .chips {
    animation-delay: .3s
}

.js .hero>.wrap>.qcard {
    animation-delay: .25s
}

.chips .btn {
    transition: transform .2s, box-shadow .2s, background .2s
}

.chips .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(14, 154, 167, .3)
}

.btn {
    transition: transform .2s, box-shadow .2s, background .2s
}

.qcard .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(14, 154, 167, .35)
}

.hd {
    transition: box-shadow .25s
}

.hd.scrolled {
    box-shadow: 0 6px 24px rgba(11, 58, 122, .12)
}

/* photo band */
.band {
    padding: 56px 0 20px
}

.band-g {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 44px;
    align-items: center
}

.pframe {
    position: relative;
    border-radius: 28px 80px 28px 80px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(11, 58, 122, .2)
}

.pframe img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform 1.2s ease
}

.pframe:hover img {
    transform: scale(1.05)
}

.pcap {
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--navy), #0e5fa8);
    color: #fff;
    font-weight: 700;
    padding: 10px 22px 10px 18px;
    border-radius: 0 18px 0 0
}

.fb {
    position: absolute;
    background: rgba(255, 255, 255, .95);
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 14px 7px 12px;
    border-radius: 99px;
    box-shadow: 0 8px 20px rgba(11, 58, 122, .18);
    animation: bob 4.5s ease-in-out infinite
}

.fb:before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--teal);
    margin-right: 8px;
    box-shadow: 0 0 0 4px rgba(14, 154, 167, .2)
}

.f1 {
    top: 8%;
    left: 5%
}

.f2 {
    top: 30%;
    right: 4%;
    animation-delay: -1.5s
}

.f3 {
    top: 56%;
    left: 4%;
    animation-delay: -3s
}

@keyframes bob {
    50% {
        transform: translateY(-9px)
    }
}

.icos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin: 18px 0
}

.ico {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 12px;
    text-align: center;
    transition: transform .25s, box-shadow .25s, border-color .25s
}

.ico:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(11, 58, 122, .12);
    border-color: var(--teal)
}

.ico span {
    display: inline-flex;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mint);
    color: var(--teal);
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    transition: background .25s, color .25s, transform .4s
}

.ico:hover span {
    background: var(--teal);
    color: #fff;
    transform: rotate(-8deg) scale(1.08)
}

.ico b {
    display: block;
    font-size: 14px;
    color: var(--navy);
    line-height: 1.3
}

/* cards */
.pcard,
.bcard {
    transition: transform .3s, box-shadow .3s, border-color .3s
}

.pcard {
    position: relative
}

.pcard:hover,
.bcard:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 34px rgba(11, 58, 122, .15)
}

.pcard img {
    transition: transform .7s ease
}

.pcard:hover img {
    transform: scale(1.07)
}

.pcard>div {
    position: relative;
    background: var(--white)
}

.pcard:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 0;
    background: var(--teal);
    transition: width .4s
}

.pcard:hover:after {
    width: 100%
}

.cta img {
    transition: transform .5s
}

.cta:hover img {
    transform: rotate(-1.5deg) scale(1.02)
}

ul.tick li {
    transition: transform .2s
}

ul.tick li:hover {
    transform: translateX(5px)
}

.sec.alt {
    background: linear-gradient(180deg, var(--mint), #f4fafb)
}

/* scroll reveal */
.js .rv {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--d, 0s)
}

.js .rv.in {
    opacity: 1;
    transform: none
}

/* floating call button */
.callfab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    box-shadow: 0 10px 24px rgba(14, 154, 167, .45)
}

.callfab:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--teal);
    animation: ring 2.2s ease-out infinite
}

@keyframes ring {
    from {
        transform: scale(1);
        opacity: .8
    }

    to {
        transform: scale(1.7);
        opacity: 0
    }
}

.social a {
    transition: background .2s, transform .2s
}

.social a:hover {
    transform: translateY(-3px) rotate(-6deg)
}

@media(max-width:860px) {
    .band-g {
        grid-template-columns: 1fr
    }

    .f2 {
        right: 3%
    }
}

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

    .blob,
    .fb,
    .callfab:before {
        animation: none
    }

    .js .hero h1,
    .js .hero .lead,
    .js .hero p.mut,
    .js .hero .chips,
    .js .hero .banner,
    .js .hero>.wrap>.qcard {
        opacity: 1;
        animation: none
    }

    .js .rv {
        opacity: 1;
        transform: none;
        transition: none
    }
}

.icos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px
}

.icos .ico {
    flex: 1 1 150px;
    max-width: 190px
}

/* promo block (home hero, right side) */
.promo {
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 5px solid var(--teal);
    border-radius: 16px;
    padding: 22px 22px 16px;
    box-shadow: 0 12px 36px rgba(11, 58, 122, .1);
    text-align: center
}

.js .hero .promo {
    opacity: 0;
    animation: rise .8s .25s cubic-bezier(.2, .7, .2, 1) forwards
}

.pm-top {
    display: flex;
    align-items: center;
    margin-bottom: 6px
}

.shield {
    flex: 0 0 150px;
    height: 168px;
    position: relative;
    background: linear-gradient(160deg, #5b9bea, #0b3a7a);
    clip-path: url(#shieldClip);
    z-index: 2;
    transition: transform .4s
}

.shield img {
    position: absolute;
    inset: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    object-fit: cover;
    object-position: 58% 40%;
    clip-path: url(#shieldClip)
}

.promo:hover .shield {
    transform: scale(1.04) rotate(-1.5deg)
}

.ribbon {
    flex: 1;
    margin-left: -26px;
    padding: 16px 30px 16px 44px;
    text-align: left;
    background: #e8f1fe;
    clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%);
    border-radius: 14px 0 0 14px;
    position: relative
}

.ribbon span {
    display: block;
    font-size: 17px;
    font-weight: 500;
    color: var(--ink)
}

.ribbon b {
    display: block;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.1;
    color: var(--navy);
    font-weight: 800;
    letter-spacing: -.01em
}

.ribbon em {
    display: block;
    font-style: normal;
    font-size: 14px;
    color: var(--ink);
    margin-top: 2px
}

.ribbon strong {
    font-weight: 800
}

.pm-h {
    margin: 22px 0 0;
    font-size: clamp(25px, 3vw, 32px);
    line-height: 1.2;
    font-weight: 400;
    color: var(--ink)
}

.pm-s {
    margin: 2px 0 0;
    font-size: clamp(19px, 2.2vw, 23px);
    color: var(--ink)
}

.pm-s b {
    font-weight: 800
}

.pm-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 22px 0 8px
}

.pm-st p {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink)
}

.pm-st b {
    font-weight: 800
}

.pm-ic {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    color: #3b7bd8;
    position: relative;
    transition: transform .35s
}

.pm-ic:before {
    content: "";
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffe27a;
    z-index: 0
}

.pm-ic svg {
    position: relative;
    z-index: 1
}

.pm-st:hover .pm-ic {
    transform: translateY(-5px) scale(1.08)
}

.pm-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: var(--mut)
}

.qsec {
    padding: 34px 0 10px
}

@media(max-width:520px) {
    .shield {
        flex-basis: 104px;
        height: 118px
    }

    .ribbon {
        padding: 10px 18px 10px 36px
    }

    .ribbon span {
        font-size: 14px
    }

    .pm-st p {
        font-size: 12px
    }

    .pm-stats {
        gap: 6px
    }
}

@media(prefers-reduced-motion:reduce) {
    .js .hero .promo {
        opacity: 1;
        animation: none
    }
}

.ribbon b {
    white-space: nowrap;
    font-size: clamp(26px, 3vw, 36px)
}

/* ===== promo block restyled to match the reference landing page (scoped to .promo only) ===== */
.promo {
    font-family: "Poppins", "Plus Jakarta Sans", system-ui, sans-serif;
    background: #fff;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 2px 0 rgba(11, 58, 122, .04);
    padding: 26px 22px 14px
}

.promo .shield {
    flex: 0 0 170px;
    height: 190px;
    background: linear-gradient(160deg, #4f93e8, #12509e 60%, #0b3a7a)
}

.promo .shield img {
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px)
}

.promo .ribbon {
    margin-left: -34px;
    padding: 20px 34px 20px 52px;
    background: #e9f2ff;
    border-radius: 18px 0 0 18px;
    clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%)
}

.promo .ribbon span {
    font-size: clamp(16px, 1.7vw, 20px);
    font-weight: 500;
    color: #1b2a3d
}

.promo .ribbon b {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 700;
    color: #24508f;
    letter-spacing: -.01em;
    line-height: 1.15
}

.promo .ribbon em {
    font-size: clamp(13px, 1.2vw, 16px);
    color: #1b2a3d
}

.promo .ribbon strong {
    font-weight: 700
}

.promo .pm-h {
    margin-top: 30px;
    font-size: clamp(24px, 2.7vw, 36px);
    font-weight: 400;
    letter-spacing: .005em;
    color: #14233a
}

.promo .pm-s {
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 400;
    color: #14233a;
    margin-top: 0
}

.promo .pm-s b {
    font-weight: 700
}

.promo .pm-stats {
    margin: 34px 0 10px;
    gap: 14px
}

.promo .pm-ic {
    width: 68px;
    height: 68px;
    color: #3f84e0
}

.promo .pm-ic svg {
    width: 38px;
    height: 38px
}

.promo .pm-ic:before {
    top: 8px;
    right: 10px;
    width: 22px;
    height: 22px;
    background: #ffd93d;
    opacity: .95
}

.promo .pm-st p {
    font-size: clamp(13px, 1.2vw, 15.5px);
    line-height: 1.65;
    margin-top: 12px;
    font-weight: 400;
    color: #1b2a3d
}

.promo .pm-st b {
    font-weight: 700;
    color: #0f1f33
}

.promo .pm-note {
    font-size: 11px;
    color: #7a8896;
    margin-top: 8px
}

@media(max-width:520px) {
    .promo .shield {
        flex-basis: 110px;
        height: 124px
    }

    .promo .ribbon {
        padding: 12px 20px 12px 42px;
        margin-left: -26px
    }

    .promo .pm-ic {
        width: 54px;
        height: 54px
    }

    .promo .pm-ic svg {
        width: 30px;
        height: 30px
    }
}

.hero-g {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr)
}

.hero-g>* {
    min-width: 0
}

@media(max-width:860px) {
    .hero-g {
        grid-template-columns: 1fr
    }
}

.promo .shield {
    flex-basis: 150px;
    height: 168px
}

.promo .ribbon {
    margin-left: -28px;
    padding: 16px 26px 16px 44px;
    min-width: 0
}

.promo .ribbon b {
    font-size: clamp(25px, 2.9vw, 38px)
}

.promo .ribbon em {
    font-size: clamp(12px, 1.1vw, 14.5px)
}

.promo .pm-h {
    font-size: clamp(21px, 2.3vw, 30px);
    margin-top: 26px
}

.promo .pm-s {
    font-size: clamp(17px, 1.8vw, 23px)
}

.promo .pm-st p {
    font-size: clamp(12.5px, 1.1vw, 14px)
}

.promo .pm-stats {
    gap: 8px;
    margin-top: 28px
}

@media(max-width:520px) {
    .promo .shield {
        flex-basis: 104px;
        height: 118px
    }

    .promo .ribbon {
        margin-left: -24px;
        padding: 10px 16px 10px 36px
    }

    .promo .ribbon b {
        font-size: 24px
    }
}

/* quote section: photo panel + form side by side */
.qgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch
}

.qgrid .qcard {
    height: 100%
}

.qside {
    position: relative;
    border-radius: 28px 70px 28px 70px;
    overflow: hidden;
    min-height: 560px;
    background: #0b3a7a;
    box-shadow: 0 20px 44px rgba(11, 58, 122, .18)
}

.qshots,
.qshot {
    position: absolute;
    inset: 0
}

.qshot {
    opacity: 0;
    animation: qfade 15s infinite
}

.qshot:nth-child(2) {
    animation-delay: 5s
}

.qshot:nth-child(3) {
    animation-delay: 10s
}

.qshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%
}

.qshot span {
    position: absolute;
    top: 18px;
    left: 18px;
    background: rgba(255, 255, 255, .95);
    color: var(--navy);
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 99px;
    box-shadow: 0 6px 16px rgba(11, 58, 122, .2)
}

@keyframes qfade {
    0% {
        opacity: 0;
        transform: scale(1)
    }

    6%,
    32% {
        opacity: 1
    }

    40%,
    100% {
        opacity: 0;
        transform: scale(1.07)
    }
}

.qside:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 58, 122, 0) 38%, rgba(11, 58, 122, .88) 72%, #0b3a7a 100%)
}

.qtxt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 28px 28px;
    color: #fff;
    z-index: 2
}

.qtxt h3 {
    color: #fff;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.25;
    margin: 0 0 12px
}

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

.qtxt li {
    padding: 5px 0 5px 30px;
    position: relative;
    font-size: 15px;
    color: #e6f1fb
}

.qtxt li:before {
    content: "";
    position: absolute;
    left: 3px;
    top: 11px;
    width: 13px;
    height: 7px;
    border-left: 3px solid #6fe0ea;
    border-bottom: 3px solid #6fe0ea;
    transform: rotate(-45deg)
}

.f4 {
    top: 18px;
    right: 16px;
    z-index: 3;
    font-size: 12px
}

@media(max-width:860px) {
    .qgrid {
        grid-template-columns: 1fr
    }

    .qside {
        min-height: 420px
    }
}

@media(prefers-reduced-motion:reduce) {
    .qshot {
        animation: none
    }

    .qshot:first-child {
        opacity: 1
    }
}

.qside .f4 {
    top: 64px;
    right: 16px
}

@media(max-width:520px) {
    .qside .f4 {
        font-size: 11px;
        padding: 6px 10px
    }

    .qshot span {
        font-size: 12px
    }
}

@media(max-width:860px) {
    .qside {
        min-height: 520px
    }
}

@media(max-width:520px) {
    .qside .f4 {
        display: none
    }

    .qside {
        min-height: 500px
    }
}

/* photo panel on the right, form on the left (desktop) */
@media(min-width:861px) {
    .qgrid .qcard {
        grid-column: 1;
        grid-row: 1
    }

    .qgrid .qside {
        grid-column: 2;
        grid-row: 1
    }
}

/* gallery: categories, filter tabs, grids, lightbox */
.gtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 6px
}

.gtab {
    font: 600 14px inherit;
    font-family: inherit;
    background: var(--white);
    color: var(--navy);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s
}

.gtab small {
    opacity: .7;
    margin-left: 4px
}

.gtab:hover {
    border-color: var(--teal)
}

.gtab.on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff
}

.gcat {
    padding-top: 10px;
    scroll-margin-top: 84px
}

.gcat[hidden] {
    display: none
}

.gcat h2 {
    border-left: 5px solid var(--teal);
    padding-left: 12px;
    margin-top: 34px
}

.gdesc {
    margin: 0 0 4px
}

.gsub {
    margin: 18px 0 0;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mut)
}

.ggrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 10px
}

.ggrid.vid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}

.gitem {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #000;
    aspect-ratio: 4/3
}

.gitem .gimg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform .4s
}

.gitem:hover .gimg {
    transform: scale(1.05)
}

.ggrid video {
    aspect-ratio: 16/9;
    object-fit: contain
}

.lb {
    position: fixed;
    inset: 0;
    background: rgba(5, 15, 30, .92);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.lb[hidden] {
    display: none
}

.lb img {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    border-radius: 8px;
    background: none
}

.lb button {
    position: absolute;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 0;
    cursor: pointer;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    font-size: 28px;
    line-height: 1
}

.lb button:hover {
    background: var(--teal)
}

.lb-x {
    top: 16px;
    right: 16px
}

.lb-p {
    left: 14px;
    top: 50%;
    transform: translateY(-50%)
}

.lb-n {
    right: 14px;
    top: 50%;
    transform: translateY(-50%)
}

@media(max-width:520px) {

    .ggrid,
    .ggrid.vid {
        grid-template-columns: 1fr 1fr
    }

    .ggrid.vid {
        grid-template-columns: 1fr
    }

    .gtabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px
    }

    .gtab {
        white-space: nowrap
    }
}

/* ===== swapped cards: senior card in hero, promo card beside the quote form ===== */
.hero .heroside {
    min-height: 540px;
    align-self: stretch
}

.js .hero .heroside {
    opacity: 0;
    animation: rise .8s .25s cubic-bezier(.2, .7, .2, 1) forwards
}

@media(prefers-reduced-motion:reduce) {
    .js .hero .heroside {
        opacity: 1;
        animation: none
    }
}

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

.qpromo .promo {
    width: 100%;
    border: 1px solid var(--line);
    border-top: 5px solid var(--teal);
    box-shadow: 0 20px 44px rgba(11, 58, 122, .12)
}

@media(min-width:861px) {
    .qgrid .qpromo {
        grid-column: 2;
        grid-row: 1
    }
}

/* advisor button (above "click below to get a policy") */
.advtop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 6px 0 16px
}

.advtop span {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mut)
}

.btn.adv {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ff8a1f, #e8590c);
    color: #fff;
    border: 0;
    padding: 13px 24px;
    box-shadow: 0 8px 20px rgba(232, 89, 12, .32)
}

.btn.adv:hover {
    background: linear-gradient(135deg, #ff9a3c, #d9500a);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(232, 89, 12, .4)
}

.btn.adv svg {
    transition: transform .2s
}

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

.js .hero .advtop {
    opacity: 0;
    animation: rise .8s .2s cubic-bezier(.2, .7, .2, 1) forwards
}

@media(prefers-reduced-motion:reduce) {
    .js .hero .advtop {
        opacity: 1;
        animation: none
    }
}

/* ===== professional footer ===== */
.ft {
    background: #082a59;
    color: #c5d5ea;
    padding: 0;
    text-align: left;
    font-size: 14.5px;
    line-height: 1.7;
    margin-top: 30px
}

.ft a {
    color: #c5d5ea;
    text-decoration: none;
    transition: color .15s, transform .15s
}

.ft-cta {
    background: linear-gradient(110deg, #0e9aa7, #0b5fa8 60%, #0b3a7a)
}

.ft-cta-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 30px;
    padding-bottom: 30px
}

.ft-cta h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: clamp(20px, 2.4vw, 26px)
}

.ft-cta p {
    margin: 0;
    color: #e3f2f8
}

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

.ft .btn.ft-call {
    background: #fff;
    color: var(--navy)
}

.ft .btn.ft-call:hover {
    background: #eaf6f7
}

.ft .btn.ft-quote {
    background: #ff8a1f;
    color: #fff
}

.ft .btn.ft-quote:hover {
    background: #e8590c
}

.ft-grid {
    display: grid;
    grid-template-columns: 1.5fr .9fr 1.1fr 1.2fr;
    gap: 36px;
    padding-top: 46px;
    padding-bottom: 36px
}

.ft-col h4 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 10px
}

.ft-col h4:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: var(--teal)
}

.ft-col>a {
    display: block;
    padding: 4px 0
}

.ft-col>a:hover {
    color: #fff;
    transform: translateX(4px)
}

.ft-logo {
    display: inline-block;
    font-size: 22px;
    color: #fff !important;
    margin-bottom: 12px
}

.ft-logo b {
    font-weight: 800
}

.ft-logo span {
    color: #4fd1dc;
    font-weight: 800
}

.ft-brand p {
    margin: 0 0 16px;
    max-width: 330px
}

.ft-social .social {
    margin: 0
}

.ft-social .social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .1)
}

.ft-social .social a:hover {
    background: var(--teal);
    transform: translateY(-3px)
}

.ft .ft-ct {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0
}

.ft .ft-ct:hover {
    transform: none;
    color: #fff
}

.ft-ct span {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4fd1dc
}

.ft-ct em {
    font-style: normal;
    font-size: 12.5px;
    line-height: 1.35;
    color: #9fb6d3
}

.ft-ct em b {
    display: block;
    font-size: 15.5px;
    color: #fff;
    font-weight: 700
}

.ft-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px
}

.ft-badges i {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .2);
    color: #dbe8f7
}

.ft-bot {
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: #061f44
}

.ft-bot .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px 24px;
    flex-wrap: wrap;
    padding-top: 16px;
    padding-bottom: 16px
}

.ft-bot small {
    font-size: 12.5px;
    color: #93abcb
}

.ft-disc {
    max-width: 620px;
    text-align: right
}

@media(max-width:960px) {
    .ft-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:860px) {
    .hero .heroside {
        min-height: 520px
    }
}

@media(max-width:560px) {
    .ft-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .ft-bot .wrap {
        flex-direction: column;
        align-items: flex-start
    }

    .ft-disc {
        text-align: left
    }

    .ft-cta-btns .btn {
        flex: 1;
        text-align: center
    }
}

/* logo in navbar */
.brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto
}

.brand img {
    display: block;
    height: 76px;
    width: auto;
    transition: transform .25s
}

.brand:hover img {
    transform: scale(1.04)
}

.bar {
    min-height: 88px;
    padding-top: 6px;
    padding-bottom: 6px
}

@media(max-width:860px) {
    .brand img {
        height: 62px
    }

    .bar {
        min-height: 74px
    }
}

@media(max-width:420px) {
    .brand img {
        height: 54px
    }
}
/* ===== v2 updates ===== */
/* hero headline as animated tag buttons */
.hero h1.eq{display:flex;flex-wrap:wrap;align-items:center;gap:12px 10px;font-size:inherit;line-height:1;margin:0 0 14px}
.eqb{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:13px 22px 13px 14px;border-radius:99px;color:#fff;text-decoration:none;font-weight:700;font-size:clamp(16px,1.9vw,22px);line-height:1.1;font-family:inherit;box-shadow:0 10px 24px rgba(11,58,122,.25);transition:transform .25s,box-shadow .25s;animation:eqpop .7s cubic-bezier(.2,1.4,.4,1) both,eqfloat 4.5s ease-in-out infinite}
.eqb:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 16px 32px rgba(11,58,122,.35)}
.eqb:after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:eqshine 3.6s ease-in-out infinite}
.eqi{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);flex:none}
.eq1{background:linear-gradient(135deg,#0b3a7a,#2c6fd1)}
.eq2{background:linear-gradient(135deg,#0e9aa7,#2fd0b5);animation-delay:.25s,.4s}
.eq2:after{animation-delay:.9s}
.eq3{background:linear-gradient(135deg,#f08a1c,#e5484d);animation-delay:.6s,.8s;font-size:clamp(18px,2.2vw,26px);padding:15px 26px 15px 16px}
.eq3:after{animation-delay:1.8s}
.eq3:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(240,138,28,.55);animation:eqring 2.2s ease-out infinite}
.eq3 .eqi svg{animation:eqbeat 1.6s ease-in-out infinite}
.eqo{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--teal);font-weight:800;font-size:26px;line-height:1;box-shadow:0 6px 16px rgba(11,58,122,.15);animation:eqspin 1s .5s cubic-bezier(.2,1.4,.4,1) both}
.eqe{animation-delay:.85s}
@keyframes eqpop{from{opacity:0;transform:translateY(24px) scale(.6)}to{opacity:1;transform:none}}
@keyframes eqfloat{50%{translate:0 -5px}}
@keyframes eqshine{0%,55%{left:-70%}100%{left:130%}}
@keyframes eqring{to{box-shadow:0 0 0 16px rgba(240,138,28,0)}}
@keyframes eqbeat{50%{transform:scale(1.3)}}
@keyframes eqspin{from{opacity:0;transform:rotate(-180deg) scale(0)}to{opacity:1;transform:none}}
.js .hero h1.eq{opacity:1;animation:none}
@media(max-width:520px){.eqb{padding:11px 16px 11px 11px}.eqo{width:30px;height:30px;font-size:20px}}

/* hero slider: image + features switch together */
.qshot{animation:none;opacity:0;transition:opacity .9s ease}
.qshot.on{opacity:1}
.qshot img{transform:scale(1);transition:transform 6s ease-out}
.qshot.on img{transform:scale(1.07)}
.qtxt{display:grid}
.qpanel{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s;pointer-events:none}
.qpanel.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.25s}
.qdots{grid-area:2/1;display:flex;gap:8px;margin-top:14px}
.qdot{width:10px;height:10px;border-radius:99px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.45);transition:width .3s,background .3s}
.qdot.on{width:30px;background:#6fe0ea}
@media(prefers-reduced-motion:reduce){.qshot,.qshot img,.qpanel{transition:none}.qshot.on img{transform:none}.eqb,.eqb:after,.eqb:before,.eqo,.eq3 .eqi svg{animation:none!important}}

/* promo: ribbon removed, shield centred */
.promo .pm-top{justify-content:center}
.promo .shield{flex-basis:170px;height:190px}
.promo .pm-h{margin-top:18px}

/* advisor image: zoom in instead of tilt */
.zoom{overflow:hidden;border-radius:16px;border:1px solid var(--line)}
.zoom img{display:block;width:100%;border:0;border-radius:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cta:hover .zoom img,.zoom:hover img{transform:scale(1.12)}
.js .zoom.rv{opacity:1;transform:none}
.js .zoom.rv img{transform:scale(.82);opacity:0}
.js .zoom.rv.in img{transform:scale(1);opacity:1;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .8s}

/* about page */
.abt-hero{background:linear-gradient(180deg,var(--mint),var(--paper));padding:56px 0 34px}
.abt{padding:64px 0}
.abt-in{display:grid;grid-template-columns:120px 1fr;gap:34px;align-items:center;max-width:980px}
.abt-ic{display:grid;place-items:center;width:110px;height:110px;border-radius:30px 8px 30px 8px}
.abt-k{display:block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.abt h2{margin:0 0 12px;font-size:clamp(28px,3.6vw,40px)}
.abt p{font-size:17px;line-height:1.7;margin:0}
.abt-vision{background:#fff}.abt-vision .abt-ic{background:var(--mint);color:var(--teal)}.abt-vision .abt-k{color:var(--teal)}
.abt-mission{background:linear-gradient(135deg,#0b3a7a,#0e6f9a);color:#e6f1fb}.abt-mission h2{color:#fff}.abt-mission .abt-ic{background:rgba(255,255,255,.14);color:#6fe0ea}.abt-mission .abt-k{color:#6fe0ea}
@media(max-width:640px){.abt-in{grid-template-columns:1fr;gap:18px}.abt{padding:44px 0}}

/* videos: never leave gaps */
.ggrid.vid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ggrid.vid video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000;border-radius:12px;display:block}
.ggrid.vid.portrait{grid-template-columns:repeat(auto-fit,minmax(220px,300px));justify-content:center}
.ggrid.vid video.p{aspect-ratio:9/16;object-fit:cover}
@media(max-width:520px){.ggrid.vid.portrait{grid-template-columns:1fr 1fr}}

/* mixed portrait + landscape videos: same height, widths follow each video, so no gaps or black bars */
.ggrid.vid.mixed{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px}
.ggrid.vid.mixed video{height:min(72vh,480px);width:auto;max-width:100%;aspect-ratio:var(--ar,9/16);object-fit:cover;flex:none}
.ggrid.vid video{aspect-ratio:var(--ar,16/9)}
.ggrid.vid video.p{aspect-ratio:var(--ar,9/16)}
@media(max-width:700px){.ggrid.vid.mixed video{width:100%;height:auto}}

/* banner (shield + discount) under the four insurance buttons */
.hbanner{display:flex;align-items:center;margin-top:22px;max-width:520px}
.hbanner .shield{flex:0 0 120px;height:136px;position:relative;background:linear-gradient(160deg,#4f93e8,#12509e 60%,#0b3a7a);clip-path:url(#shieldClip);z-index:2}
.hbanner .shield img{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);object-fit:cover;object-position:58% 40%;clip-path:url(#shieldClip)}
.hbanner .ribbon{flex:1;margin-left:-24px;padding:14px 30px 14px 40px;background:#e9f2ff;border-radius:16px 0 0 16px;clip-path:polygon(0 0,100% 0,95% 50%,100% 100%,0 100%);min-width:0;text-align:left}
.hbanner .ribbon span{display:block;font-size:15px;font-weight:500;color:#1b2a3d}
.hbanner .ribbon b{display:block;font-size:clamp(26px,3vw,36px);font-weight:700;color:#24508f;line-height:1.15;letter-spacing:-.01em}
.hbanner .ribbon em{display:block;font-style:normal;font-size:13px;color:#1b2a3d;margin-top:2px}
.hbanner .ribbon strong{font-weight:700}
@media(max-width:520px){.hbanner .shield{flex-basis:92px;height:106px}.hbanner .ribbon{padding:10px 20px 10px 34px}.hbanner .ribbon b{font-size:22px}}

/* "Why choose a Health Insurance Friend?" box beside the quote form */
.promo.wfbox{text-align:left;padding:30px 28px;font-family:inherit}
.wfbox h2{margin:0 0 6px;font-size:clamp(22px,2.4vw,30px);color:var(--navy)}
.wfbox .mut{margin:0 0 18px}
.wf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.wf-list li{position:relative;padding-left:32px;font-size:16.5px;color:#14233a;line-height:1.45}
.wf-list li:before{content:"";position:absolute;left:3px;top:6px;width:13px;height:7px;border-left:3px solid var(--teal);border-bottom:3px solid var(--teal);transform:rotate(-45deg)}

/* vision & mission page */
.vm-k{display:block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.vm-hero .lead{max-width:640px;margin-left:auto;margin-right:auto}
.vm-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.vm-jump a{background:#fff;border:1px solid var(--line);color:var(--navy);font-weight:600;font-size:14px;padding:8px 16px;border-radius:99px;transition:background .2s,color .2s}
.vm-jump a:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.vm-sec{scroll-margin-top:90px}
.vm-alt{background:var(--mint)}
.vm-row{display:grid;grid-template-columns:5fr 6fr;gap:44px;align-items:center}
.vm-row.rev{grid-template-columns:6fr 5fr}
.vm-row.rev .vm-img{order:2}
.vm-img img{display:block;width:100%;height:100%;max-height:480px;object-fit:cover;border-radius:28px 70px 28px 70px;box-shadow:0 20px 44px rgba(11,58,122,.16)}
.vm-row.rev .vm-img img{border-radius:70px 28px 70px 28px}
.vm-txt h2{margin:0 0 12px}
.vm-quote{font-size:19px;line-height:1.55;font-weight:600;color:var(--navy);border-left:4px solid var(--teal);padding-left:16px;margin:0 0 14px}
.vm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:28px}
.vm-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 20px;box-shadow:0 10px 26px rgba(11,58,122,.07);transition:transform .25s,box-shadow .25s}
.vm-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(11,58,122,.13)}
.vm-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px 6px 16px 6px;background:var(--mint);color:var(--teal);margin-bottom:14px}
.vm-card h3{margin:0 0 8px;font-size:18px;color:var(--navy)}
.vm-card p{margin:0;font-size:14.5px;color:var(--mut);line-height:1.6}
.vm-who{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:28px}
.vm-w{display:block;background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 26px rgba(11,58,122,.08);color:inherit;transition:transform .25s}
.vm-w:hover{transform:translateY(-4px)}
.vm-w img{display:block;width:100%;height:220px;object-fit:cover;object-position:center 25%}
.vm-w div{padding:16px 18px 20px}
.vm-w h3{margin:0 0 6px;color:var(--navy);font-size:19px}
.vm-w p{margin:0;font-size:14.5px;color:var(--mut)}
.vm-vals{display:flex;flex-direction:column;margin-top:22px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.vm-vals div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 20px;border-top:1px solid var(--line);align-items:center}
.vm-vals div:first-child{border-top:0}
.vm-vals b{color:var(--navy);font-size:17px}
.vm-vals span{color:var(--ink);font-size:15px}
.vm-cta{background:linear-gradient(135deg,#0b3a7a,#0e6f9a);color:#e6f1fb;padding:56px 0}
.vm-cta h2{color:#fff;margin:0 0 8px}
.vm-cta p{margin:0 0 20px}
.vm-cta .btn{background:#fff;color:var(--navy)}
.vm-cta .btn:hover{background:#6fe0ea}
.vm-cta .btn.ghost.light{background:transparent;color:#fff;border:2px solid #fff}
.vm-cta .btn.ghost.light:hover{background:rgba(255,255,255,.15)}
@media(max-width:860px){.vm-row,.vm-row.rev{grid-template-columns:1fr;gap:24px}.vm-row.rev .vm-img{order:0}.vm-img img{max-height:340px}}
@media(max-width:560px){.vm-vals div{grid-template-columns:1fr;gap:4px}.vm-quote{font-size:17px}}

/* hero slider: shorter box, compact text so faces stay visible */
.hero .heroside{min-height:420px;height:420px;align-self:start}
.heroside .qshot img{object-position:center 12%;transition:transform 3.5s ease-out}
.heroside .qshot{transition:opacity .6s ease}
.heroside:after{background:linear-gradient(180deg,rgba(11,58,122,0) 50%,rgba(11,58,122,.85) 80%,#0b3a7a 100%)}
.heroside .qtxt{padding:16px 24px 20px}
.heroside .qtxt h3{font-size:clamp(17px,1.8vw,21px);margin:0 0 6px}
.heroside .qtxt li{font-size:14px;padding:3px 0 3px 28px}
.heroside .qtxt li:before{top:9px}
.heroside .qpanel{transition:opacity .4s,transform .4s}
.heroside .qpanel.on{transition-delay:.1s}
.heroside .qdots{margin-top:10px}
@media(max-width:860px){.hero .heroside{min-height:400px;height:400px}}
.vm-jump a.on{background:var(--teal);color:#fff;border-color:var(--teal)}

/* hero: slider runs from the top down to the insurance buttons; banner sits below */
@media(min-width:861px){
  .hero-g{grid-template-rows:auto 1fr;row-gap:0}
  .hero-l{display:contents}
  .hero-top{grid-column:1;grid-row:1}
  .hbanner{grid-column:1;grid-row:2;align-self:start}
  .hero .heroside{grid-column:2;grid-row:1;align-self:stretch;height:auto;min-height:520px}
}
.heroside .qshot img{object-fit:cover;object-position:center 15%}

/* gallery photos: fixed columns, full rows only, no stretching */
.ggrid.ph{grid-template-columns:repeat(var(--cols,4),1fr)}
.ggrid.ph .gitem{aspect-ratio:16/9;background:#eef3f8}
.ggrid.ph .gimg{object-fit:cover}
@media(max-width:860px){.ggrid.ph{grid-template-columns:repeat(2,1fr)}}

/* exactly 3 videos: one line, same height, widths follow each video's ratio */
@media(min-width:701px){
  .ggrid.vid.three{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:16px}
  .ggrid.vid.three video{flex:0 1 auto;min-width:0;height:min(48vh,380px);width:auto;max-width:33%;aspect-ratio:var(--ar,16/9);object-fit:cover}
}


/* discount banner above "Get a free quote" heading (home page) - stays inside the card */
.qcard .qbanner {
    margin: 0 0 16px;
    max-width: 100%;
    overflow: hidden;
    border-radius: 12px
}

.qcard .qbanner img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto
}

/* quote form + "Why choose" box: same height, aligned */
@media(min-width:861px) {
    .qgrid {
        align-items: stretch
    }

    .qgrid .qpromo {
        align-items: stretch
    }

    .qgrid .qpromo .promo.wfbox {
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    /* Gallery is the last menu item: open its dropdown leftwards so it is never cut off */
    .nav .dd:last-child .sub {
        left: auto;
        right: 0
    }
}

/* hero headline: "Trusted Insurance Advisor + Convenience" on one row, "= Health Insurance Friend" on the next */
.hero h1.eq{container-type:inline-size}
.eqbr{display:none}
@container (min-width:400px){
  .hero h1.eq .eqb{font-size:clamp(12px,2.9cqw,20px);gap:.5em;padding:.6em 1em .6em .6em}
  .hero h1.eq .eqb .eqi{width:1.7em;height:1.7em}
  .hero h1.eq .eqb .eqi svg{width:1em;height:1em}
  .hero h1.eq .eqo{width:1.9em;height:1.9em;font-size:clamp(18px,3.6cqw,26px)}
  .hero h1.eq .eqo:not(.eqe){width:2.2em;height:2.2em;font-size:clamp(14px,3.2cqw,20px)}
  .eqbr{display:block;flex:0 0 100%;height:0;margin-top:-12px}
}

/* "Why choose a Health Insurance Friend?" box: a visual sits next to each list, in the free space on the right */
.wfbox{container-type:inline-size}
.wf-sec{display:flex;align-items:stretch;gap:16px}
.wf-sec+.wf-sec{margin-top:22px}
.wf-main{flex:1;min-width:0}
.wf-main h3{margin-top:0}
.wf-side{flex:0 0 128px;margin-top:2px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;position:relative;padding:16px 8px;border-radius:22px}
.wf-side em{font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.02em;position:relative}
.wf-online{background:linear-gradient(180deg,#f6f8fa,#eceff3);border:1px dashed #c3ced8;color:#6f8196}
.wf-online .wfo-art{display:block;max-width:100%;height:auto}
.wf-online .wfo-q{animation:wfbob 3.2s ease-in-out infinite}
.wf-online .wfo-d{animation:wfbob 3.2s .8s ease-in-out infinite}
.wf-online small{font-size:11.5px;line-height:1.3;color:#8a98a7;font-weight:500}
@keyframes wfbob{50%{transform:translateY(-4px)}}
.wf-friend{padding:0;overflow:hidden;justify-content:flex-end;color:#fff;border:0;box-shadow:0 10px 24px rgba(11,58,122,.2);background:#0b3a7a}
.wf-friend .wfp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;transition:transform 4s ease-out}
.wf-friend:hover .wfp{transform:scale(1.06)}
.wf-friend:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,58,122,0) 45%,rgba(11,58,122,.88) 100%)}
.wf-friend .wfb{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 8px 12px}
.wf-friend .wfl{width:68px;height:auto;display:block;background:#fff;border-radius:12px;padding:5px;box-shadow:0 6px 14px rgba(0,0,0,.25);animation:wftfloat 4.5s ease-in-out infinite}
.wf-friend em{color:#fff}
@keyframes wftfloat{50%{transform:translateY(-4px)}}
@container (min-width:440px){.wf-side{display:flex}}
@media(prefers-reduced-motion:reduce){.wf-friend .wfl,.wf-online .wfo-q,.wf-online .wfo-d{animation:none}}

/* fix: "One Plan. Complete Care." caption was clipped by the frame's rounded bottom-left corner */
.pframe .pcap{left:38px;bottom:22px;right:auto;max-width:calc(100% - 76px);white-space:nowrap;border-radius:99px;padding:10px 22px;box-shadow:0 8px 20px rgba(11,58,122,.3)}
@media(max-width:420px){.pframe .pcap{left:30px;bottom:18px;max-width:calc(100% - 60px);padding:8px 16px;font-size:14px}}

/* home page reviews */
.rvw{overflow:hidden}
.rvw-k{display:inline-flex;align-items:center;gap:14px;font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.rvw-k i{display:block;width:52px;height:2px;background:var(--teal)}
.rvw .center h2{margin:0 0 10px}
.rvw .center .mut{max-width:680px;margin:0 auto}
.rvw-nav{display:flex;justify-content:flex-end;gap:22px;margin:18px 0 14px}
.rvw-b{background:none;border:0;color:var(--navy);cursor:pointer;padding:4px 6px;border-radius:8px;transition:color .2s,transform .2s}
.rvw-b:hover{color:var(--teal)}#rvwPrev:hover{transform:translateX(-4px)}#rvwNext:hover{transform:translateX(4px)}
.rvw-b:focus-visible,.rvw-track:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.rvw-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;scrollbar-width:none}
.rvw-track::-webkit-scrollbar{display:none}
.rvw-item{margin:0;flex:0 0 calc((100% - 24px)/2);scroll-snap-align:start}
.rvw-q{position:relative;margin:0 0 36px;background:#eef3fb;border-radius:14px;padding:26px 28px 22px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;transition:transform .25s,box-shadow .25s}
.rvw-q:after{content:"";position:absolute;left:26px;bottom:-24px;border:14px solid transparent;border-top:24px solid #eef3fb;border-bottom:0;border-left-width:16px;border-right-width:16px}
.rvw-item:hover .rvw-q{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,58,122,.12)}
.rvw-q p{margin:0;font-size:18px;line-height:1.6;color:var(--mut)}
.rvw-st{display:flex;justify-content:flex-end;gap:2px;color:#f5a623}
.rvw-who{display:flex;align-items:center;gap:14px}
.rvw-av{display:grid;place-items:center;flex:0 0 auto;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;font-weight:700;font-size:20px;letter-spacing:.03em}
.rvw-who b{display:block;color:var(--navy);font-size:19px}
.rvw-who em{display:block;font-style:normal;color:var(--mut);font-size:14.5px;margin-top:2px}
@media(max-width:760px){.rvw-item{flex-basis:100%}.rvw-q p{font-size:16.5px}.rvw-nav{justify-content:center}}
@media(prefers-reduced-motion:reduce){.rvw-track{scroll-behavior:auto}}

/* contact page */
.ct-hero{padding:64px 0 40px;background:radial-gradient(circle at 15% 20%,rgba(14,154,167,.14),transparent 45%),radial-gradient(circle at 85% 10%,rgba(11,58,122,.10),transparent 40%),linear-gradient(180deg,var(--mint),var(--paper))}
.ct-hero h1{font-size:clamp(34px,5vw,52px);margin:0 0 10px}
.ct-hero .lead{max-width:640px;margin:0 auto}
.ct-hbtns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.ct-cards-sec{padding-top:0;margin-top:-6px}
.ct-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.ct-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 22px;box-shadow:0 12px 30px rgba(11,58,122,.08);color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s}
a.ct-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(11,58,122,.16);border-color:var(--teal)}
.ct-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:18px 6px 18px 6px;background:var(--mint);color:var(--teal);margin-bottom:14px}
.ct-card h3{margin:0 0 6px;font-size:20px;color:var(--navy)}
.ct-card p{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--mut);flex:1}
.ct-card b{color:var(--teal);font-size:16px}
.ct-soc .social{display:flex;gap:10px}
.ct-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.ct-info h2{margin:0 0 12px}
.ct-help{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.ct-help li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;transition:transform .25s,box-shadow .25s}
.ct-help li:hover{transform:translateX(4px);box-shadow:0 10px 24px rgba(11,58,122,.1)}
.ct-help li>span{display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:14px 5px 14px 5px;background:var(--mint);color:var(--teal)}
.ct-help b{display:block;color:var(--navy);font-size:17px;margin-bottom:2px}
.ct-help p{margin:0;font-size:14.5px;color:var(--mut);line-height:1.55}
.ct-form{position:sticky;top:100px;scroll-margin-top:100px}
.ct-note{margin:10px 4px 0;font-size:13px;color:var(--mut);text-align:center}
#quoteForm{scroll-margin-top:100px}
.ct-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:30px;counter-reset:s}
.ct-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 20px 22px;box-shadow:0 10px 26px rgba(11,58,122,.07);text-align:center}
.ct-step i{position:absolute;top:-20px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;font-style:normal;font-weight:700;box-shadow:0 6px 14px rgba(11,58,122,.25)}
.ct-step h3{margin:6px 0 8px;font-size:18px;color:var(--navy)}
.ct-step p{margin:0;font-size:14.5px;color:var(--mut);line-height:1.6}
.ct-faq{margin-top:24px;display:grid;gap:12px}
.ct-faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 18px;transition:box-shadow .2s}
.ct-faq details[open]{box-shadow:0 10px 24px rgba(11,58,122,.1);border-color:var(--teal)}
.ct-faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-weight:700;color:var(--navy);position:relative}
.ct-faq summary::-webkit-details-marker{display:none}
.ct-faq summary:after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;color:var(--teal);line-height:1}
.ct-faq details[open] summary:after{content:"\2212"}
.ct-faq details p{margin:0 0 16px;color:var(--mut);line-height:1.65}
.ct-faq a{color:var(--teal);font-weight:600;text-decoration:underline}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr;gap:28px}.ct-form{position:static}}

/* top strip: phone + social icons aligned to the right end, in line with the header */
.strip-in{display:flex;align-items:center;justify-content:flex-end;gap:10px}

/* vision-mission: show full infographic images without cropping */
.vm-row{align-items:center}
.vm-img.full img{height:auto;max-height:none;object-fit:initial;background:#eef3fb}