:root {
    --navy: #071A2B;
    --navy2: #0c2740;
    --cyan: #11C5D9;
    --white: #fff;
    --mut: #9fb4c6;
    --r: 14px
}

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

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

body {
    font: 400 1.05rem/1.65 'DM Sans', sans-serif;
    background: var(--navy);
    color: var(--white);
    overflow-x: hidden
}

h1,
h2,
h3 {
    font-family: Manrope, sans-serif;
    line-height: 1.15;
    letter-spacing: -.02em
}

h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: 1rem
}

p {
    color: var(--mut);
    max-width: 60ch
}

a {
    color: inherit;
    text-decoration: none
}

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

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

section {
    padding: 6rem 0
}

.btn {
    display: inline-block;
    padding: .85rem 1.6rem;
    border-radius: 99px;
    font: 600 1rem Manrope, sans-serif;
    border: 1px solid var(--cyan);
    cursor: pointer;
    transition: .25s;
    background: none;
    color: #fff
}

.btn.p {
    background: var(--cyan);
    color: var(--navy)
}

.btn:hover {
    box-shadow: 0 0 28px #11c5d966;
    transform: translateY(-2px)
}

.rv {
    opacity: 0;
    transform: translateY(28px) scale(.985);
    transition: opacity .75s ease, transform .85s cubic-bezier(.2, .75, .25, 1)
}

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

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(26px) scale(.97)
    }

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

.service-card.in,
.principle-card.in,
.about-pillar.in,
.why-card.in {
    animation: cardReveal .7s cubic-bezier(.2, .75, .25, 1) both;
}

.service-card.in:nth-child(4n + 2),
.principle-card.in:nth-child(2),
.about-pillar.in:nth-child(2),
.why-card.in:nth-child(2) {
    animation-delay: .1s
}

.service-card.in:nth-child(4n + 3),
.principle-card.in:nth-child(3),
.about-pillar.in:nth-child(3),
.why-card.in:nth-child(3) {
    animation-delay: .2s
}

.service-card.in:nth-child(4n + 4),
.why-card.in:nth-child(4) {
    animation-delay: .3s
}

.approach-cta,
.why-top-cta,
.why-join,
.service-more,
.menu>li:last-child .btn {
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.approach-cta:hover,
.why-top-cta:hover,
.why-join:hover,
.service-more:hover,
.menu>li:last-child .btn:hover {
    transform: translateY(-3px);
}

/* nav */
header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    transition: .3s
}

header.solid {
    background: #071A2Bf2;
    box-shadow: 0 8px 30px #0008;
    backdrop-filter: blur(10px)
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px
}

.logo {
    font: 800 1.2rem Manrope;
    display: flex;
    align-items: center;
    gap: .6rem
}

.logo img {
    height: 44px
}

.menu {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    padding: 0
}

.menu>li {
    position: relative
}

.menu a.l {
    padding: .4rem 0;
    position: relative
}

.menu a.l:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 0;
    background: var(--cyan);
    transition: .3s
}

.menu a.l:hover:after,
.menu a.l.act:after {
    width: 100%
}

.dd {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 270px;
    padding: .6rem;
    background: var(--navy2);
    border: 1px solid #ffffff22;
    border-radius: var(--r);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .25s;
    list-style: none
}

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

.dd a {
    display: block;
    padding: .5rem .8rem;
    border-radius: 8px
}

.dd a:hover {
    background: #11c5d91f;
    color: var(--cyan)
}

.burger {
    display: none;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer
}

@media(max-width:900px) {
    .burger {
        display: block
    }

    .menu {
        position: fixed;
        inset: 76px 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem 4%;
        background: var(--navy);
        max-height: 0;
        overflow: hidden;
        padding-block: 0;
        transition: .4s
    }

    .menu.open {
        max-height: 90vh;
        padding-block: 1.5rem;
        overflow: auto
    }

    .dd {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        background: none;
        border: 0
    }

    .has.open .dd {
        display: block
    }
}

/* hero */
.hero {
    min-height: 100vh;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 75% 40%, #11c5d933, transparent 55%), var(--navy);
    overflow: hidden
}

.grid-bg {
    position: absolute;
    inset: -10%;
    background: linear-gradient(#ffffff0a 1px, transparent 1px) 0 0/48px 48px, linear-gradient(90deg, #ffffff0a 1px, transparent 1px) 0 0/48px 48px;
    will-change: transform
}

.slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    width: min(1180px, 92%);
    margin: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s, visibility .9s;
    padding-top: 76px
}

.slide.on {
    opacity: 1;
    visibility: visible
}

.slide h1 {
    font-size: clamp(2.2rem, 5.4vw, 4.4rem);
    margin-bottom: 1.2rem
}

.ctl {
    position: absolute;
    bottom: 2.2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    align-items: center;
    z-index: 5
}

.ctl button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #ffffff44;
    background: #ffffff10;
    color: #fff;
    cursor: pointer;
    font-size: 1.2rem
}

.ctl button:hover {
    border-color: var(--cyan)
}

.dots {
    display: flex;
    gap: .5rem
}

.dots button {
    width: 12px;
    height: 12px;
    padding: 0
}

.dots button.on {
    background: var(--cyan);
    border-color: var(--cyan);
    width: 34px;
    border-radius: 99px
}

@media(max-width:820px) {
    .slide {
        grid-template-columns: 1fr;
        align-content: center;
        text-align: left;
        gap: 0;
        padding-top: 96px
    }
}

/* placeholder art */
.ph {
    background: linear-gradient(145deg, #12385a, #0a2237);
    border: 1px dashed #11c5d966;
    border-radius: var(--r);
    display: grid;
    place-items: center;
    color: var(--cyan);
    font: 600 .85rem Manrope;
    text-align: center;
    padding: 1rem
}

/* about */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center
}

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

.about-img {
    aspect-ratio: 4/3;
    width: 100%;
    object-fit: contain;
    border-radius: var(--r);
    background: var(--navy2);
    box-shadow: 0 0 60px #11c5d922
}

/* marquee */
.mq {
    padding: 1.4rem 0;
    background: var(--navy2);
    border-block: 1px solid #11c5d933;
    overflow: hidden
}

.track {
    display: flex;
    width: max-content;
    animation: mq 40s linear infinite
}

.mq:hover .track {
    animation-play-state: paused
}

.track span {
    font: 800 clamp(1.3rem, 3vw, 2rem) Manrope;
    padding-right: 2.5rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 2.5rem
}

.track span:nth-child(even) {
    color: var(--cyan)
}

.track span:after {
    content: "◆";
    font-size: .7rem;
    color: var(--cyan)
}

@keyframes mq {
    to {
        transform: translateX(-50%)
    }
}

/* products */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.6rem
}

.card {
    padding: 1.2rem;
    transition: border-color .3s, box-shadow .3s, transform .15s;
    transform-style: preserve-3d
}

.card:hover {
    border-color: var(--cyan);
    box-shadow: 0 20px 50px #11c5d92e
}

.card .im {
    aspect-ratio: 1;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    display: grid;
    place-items: center
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .8rem;
    transition: transform .5s
}

.card:hover img {
    transform: scale(1.08)
}

.card h3 {
    font-size: 1.15rem;
    margin: 1rem 0 .4rem
}

@media(max-width:820px) {}

/* form */
form {
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

@media(max-width:620px) {
    form {
        grid-template-columns: 1fr
    }
}

label {
    display: block;
    font-size: .9rem;
    margin-bottom: .3rem
}

input,
select,
textarea {
    width: 100%;
    padding: .8rem 1rem;
    border-radius: 10px;
    border: 1px solid #ffffff33;
    background: #071A2B99;
    color: #fff;
    font: inherit
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--cyan);
    outline: 0;
    box-shadow: 0 0 0 3px #11c5d933
}

#msg {
    grid-column: 1/-1;
    font-weight: 600
}

footer {
    background: #041220;
    padding: 4rem 0 2rem;
    border-top: 1px solid #11c5d933
}

.fg {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: 2.5rem
}

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

footer h3 {
    font-size: 1rem;
    margin-bottom: 1rem
}

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

footer li {
    margin: .4rem 0;
    color: var(--mut)
}

footer a:hover {
    color: var(--cyan)
}

.copy {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #ffffff1a;
    color: var(--mut);
    font-size: .9rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem
}

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

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

/* Keep the showcase video fully visible; the image hover zoom crops its edges. */
.showcase-image video,
.showcase-image:hover video {
    object-fit: contain !important;
    transform: none !important;
}

/* RooFix-inspired navigation and hero banner */
body {
    background: #f5f7f9;
    color: #14202c
}

header {
    position: relative;
    inset: auto;
    background: #fff;
    color: #14202c;
    box-shadow: 0 1px 0 #e6ebef;
}

header.solid {
    background: #fff;
    box-shadow: 0 1px 0 #e6ebef;
    backdrop-filter: none
}

header .wrap {
    width: min(1240px, 96%)
}

nav {
    height: 66px;
    gap: 1rem
}

.logo {
    font-size: 1.15rem;
    color: #172434;
    white-space: nowrap
}

.logo img {
    height: 38px
}

.menu {
    gap: clamp(.65rem, 2vw, 1.7rem);
    padding: .35rem .65rem;
    background: #edf2f6;
    border-radius: 999px
}

.menu a.l {
    font-size: .88rem;
    padding: .25rem .15rem;
    color: #334252
}

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

.menu a.l.act {
    background: #fff;
    border-radius: 999px;
    padding: .3rem .7rem;
    color: #152434
}

.menu>li:last-child .btn {
    padding: .65rem 1.15rem;
    font-size: .83rem;
    background: #132438;
    color: #fff;
    border-color: #132438
}

.menu>li:last-child .btn:after {
    content: " ?";
    display: inline-grid;
    place-items: center;
    margin-left: .45rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ff6b35;
    color: #fff
}

.burger {
    color: #172434
}

.hero {
    width: min(1240px, 96%);
    min-height: 580px;
    height: min(68vw, 690px);
    margin: 8px auto 0;
    padding: 0;
    border-radius: 22px;
    align-items: stretch;
    display: block;
    background: linear-gradient(90deg, rgba(5, 19, 31, .38), rgba(5, 19, 31, .04) 58%, rgba(5, 19, 31, .18)), linear-gradient(0deg, rgba(4, 16, 25, .83), transparent 56%), url("images/hero-lab.png") center 43%/cover no-repeat;
    box-shadow: 0 10px 35px #14202c18
}

.grid-bg {
    inset: 0;
    background: linear-gradient(0deg, #06172572, transparent 70%);
    pointer-events: none
}

.slide {
    inset: 0;
    width: calc(100% - 64px);
    padding: 0;
    display: flex;
    align-items: flex-end;
    pointer-events: none
}

.slide>div:first-child {
    width: min(55%, 620px);
    padding: 0 0 50px 18px;
    pointer-events: auto
}

.slide h1 {
    font: 400 clamp(2.6rem, 5vw, 4.5rem)/.98 Georgia, serif;
    letter-spacing: -.035em;
    max-width: 620px;
    text-shadow: 0 2px 18px #0009;
    margin-bottom: .7rem
}

.slide p {
    color: #edf3f5;
    max-width: 42ch;
    font-size: 1.04rem;
    text-shadow: 0 1px 12px #000
}

.slide .btn {
    background: #fff;
    color: #182636;
    border-color: #fff;
    font-size: .88rem;
    padding: .68rem 1.1rem
}

.slide .btn.p {
    background: #ff6b35;
    border-color: #ff6b35;
    color: #fff
}

.ctl {
    display: none
}

@media(max-width:900px) {
    nav {
        height: 62px
    }

    .menu {
        position: fixed;
        inset: 62px 2% auto;
        z-index: 60;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 16px 36px #14202c22
    }

    .menu.open {
        padding: 1.2rem
    }

    .menu>li:last-child .btn {
        display: inline-block
    }

    .hero {
        height: auto;
        min-height: 760px;
        background-position: 38% center
    }

    .slide {
        width: calc(100% - 36px);
        align-items: flex-end
    }

    .slide>div:first-child {
        width: 100%;
        padding: 0 0 26px
    }

    .slide h1 {
        max-width: 520px;
        font-size: clamp(2.35rem, 8vw, 3.5rem)
    }

    .slide p {
        max-width: 44ch
    }
}

@media(max-width:560px) {
    header .wrap {
        width: 94%
    }

    nav {
        height: 58px
    }

    .logo {
        font-size: 1rem
    }

    .logo img {
        height: 32px
    }

    .hero {
        width: 94%;
        min-height: 790px;
        margin-top: 7px;
        border-radius: 17px;
        background-position: 38% center
    }

    .slide {
        width: calc(100% - 30px)
    }

    .slide>div:first-child {
        padding-bottom: 22px
    }

    .slide h1 {
        font-size: clamp(2.15rem, 10vw, 3rem)
    }

    .slide p {
        font-size: .95rem
    }
}

@media(prefers-reduced-motion:reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Let the hero fill the viewport below the navigation */
.hero {
    height: calc(100vh - 74px);
    height: calc(100svh - 74px);
    min-height: 500px;
    max-height: none
}

@media(max-width:900px) {
    .hero {
        height: calc(100vh - 70px);
        height: calc(100svh - 70px);
        min-height: 0
    }
}

@media(max-width:560px) {
    .hero {
        height: calc(100vh - 66px);
        height: calc(100svh - 66px);
        min-height: 0
    }
}

/* Expand the hero banner to the full page width */
.hero {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0
}

@media(max-width:560px) {
    .hero {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0
    }
}

/* Reference layout: copy at left, quote card at right, framed banner */
.hero {
    width: 98%;
    margin: 8px auto 0;
    border-radius: 24px;
    height: calc(100vh - 82px);
    height: calc(100svh - 82px);
    min-height: 560px;
    overflow: hidden
}

.hero .slide {
    display: flex !important;
    width: calc(100% - 64px);
    align-items: flex-end;
    inset: 0;
    padding: 0;
    pointer-events: none
}

.hero .slide>div:first-child {
    display: block;
    width: min(55%, 620px);
    padding: 0 0 48px 12px;
    pointer-events: auto
}

.hero .slide h1 {
    font: 400 clamp(2.7rem, 5vw, 4.8rem)/.98 Georgia, serif;
    letter-spacing: -.035em;
    max-width: 620px;
    text-shadow: 0 2px 18px #0009;
    margin-bottom: .7rem
}

.hero .slide p {
    color: #edf3f5;
    max-width: 42ch;
    font-size: 1.04rem;
    text-shadow: 0 1px 12px #000
}

.hero .slide .btn {
    background: #fff;
    color: #182636;
    border-color: #fff;
    font-size: .88rem;
    padding: .68rem 1.1rem
}

.hero .slide .btn.p {
    background: #ff6b35;
    border-color: #ff6b35;
    color: #fff
}

@media(max-width:900px) {
    .hero {
        width: 98%;
        margin: 7px auto 0;
        border-radius: 20px;
        height: calc(100svh - 76px);
        min-height: 680px
    }

    .hero .slide {
        width: calc(100% - 36px)
    }

    .hero .slide>div:first-child {
        width: 100%;
        padding: 0 0 28px
    }

    .hero .slide h1 {
        font-size: clamp(2.35rem, 8vw, 3.5rem)
    }
}

@media(max-width:560px) {
    .hero {
        width: 96%;
        height: calc(100svh - 70px);
        min-height: 700px;
        margin-top: 7px;
        border-radius: 18px
    }

    .hero .slide {
        width: calc(100% - 28px)
    }

    .hero .slide>div:first-child {
        padding-bottom: 20px
    }

    .hero .slide h1 {
        font-size: clamp(2.1rem, 9vw, 3rem)
    }
}

/* Automatic photographic hero slider */
.hero {
    position: relative;
    background: #10283b;
    isolation: isolate
}

.hero-photos {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden
}

.hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 1.35s ease
}

.hero-photo.active {
    opacity: 1
}

.hero #gb {
    display: none
}

@media(prefers-reduced-motion:reduce) {
    .hero-photo {
        transition: none
    }
}

/* Instrument carousel section */
.services-section {
    padding: 5.5rem 0 4.8rem;
    background: #fff;
    color: #20282d;
    overflow: hidden
}

.services-wrap {
    width: min(1120px, 88%)
}

.services-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 2.6rem
}

.section-kicker {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .8rem;
    font: 700 .78rem Manrope, sans-serif;
    letter-spacing: .06em;
    color: #526168
}

.section-kicker i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #20a84c;
    box-shadow: 0 0 0 5px #20a84c1b
}

.services-head h2 {
    font: 400 clamp(2.5rem, 5vw, 4rem)/.98 Georgia, serif;
    letter-spacing: -.035em;
    color: #20282d;
    margin: 0
}

.services-head h2 em {
    font-style: italic
}

.services-intro {
    width: min(310px, 38%);
    display: grid;
    justify-items: end;
    gap: 1.15rem
}

.services-intro p {
    font-size: .95rem;
    line-height: 1.45;
    text-align: right;
    color: #69747a
}

.service-controls {
    display: flex;
    gap: .5rem
}

.service-controls button {
    width: 42px;
    height: 42px;
    border: 1px solid #cfd5d8;
    border-radius: 50%;
    background: #fff;
    color: #2c373d;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s
}

.service-controls button:last-child {
    background: #123b27;
    border-color: #123b27;
    color: #fff
}

.service-controls button:hover {
    transform: translateY(-2px);
    background: #bdf276;
    border-color: #bdf276;
    color: #173b25
}

.service-viewport {
    overflow: visible
}

.services-section .cards {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 0 .8rem;
    align-items: stretch
}

.services-section .cards::-webkit-scrollbar {
    display: none
}

.service-card {
    position: relative;
    flex: 0 0 clamp(260px, 27vw, 330px);
    height: 430px;
    border-radius: 18px;
    overflow: hidden;
    scroll-snap-align: start;
    background: #163247;
    color: #fff;
    isolation: isolate;
    transition: transform .65s cubic-bezier(.2, .75, .25, 1), box-shadow .35s;
}

.service-card.in:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 40px #1529352b
}

.service-card .im {
    position: absolute;
    inset: 0 0 auto;
    height: 50%;
    z-index: -2;
    background: #fff
}

.service-card .im img {
    width: 100%;
    height: 100%;
    padding: 1rem;
    object-fit: contain;
    transition: transform .7s ease
}

.service-card:hover .im img {
    transform: scale(1.06)
}

.service-card:after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    z-index: -1;
    background: linear-gradient(180deg, #163247 0%, #10283a 100%)
}

.service-label {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    padding: .45rem .75rem;
    border: 1px solid #dce8ec;
    border-radius: 99px;
    background: #f2f7f8;
    color: #173247;
    font: 600 .7rem Manrope, sans-serif;
    backdrop-filter: blur(7px)
}

.service-icon {
    position: absolute;
    right: 1.05rem;
    top: 1.05rem;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: #173b25;
    font-size: 1.5rem
}

.service-content {
    position: absolute;
    inset: 50% 1.2rem 1.2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-content: start;
    align-items: center;
    column-gap: .55rem;
    min-height: 0
}

.service-content h3 {
    font: 600 1.28rem/1.2 Manrope, sans-serif;
    display: -webkit-box;
    min-height: 2.35em;
    margin: 0 0 .4rem;
    color: #fff;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    grid-column: 1 / -1
}

.service-content p {
    font-size: .9rem;
    line-height: 1.4;
    color: #edf1f2;
    max-width: 38ch;
    margin: 0 0 .45rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    grid-column: 1 / -1
}

.service-details {
    position: relative;
    z-index: 2;
    grid-column: 1;
    justify-self: start;
    margin: .4rem 0 0;
    color: #fff;
    font-size: .72rem
}

.service-details summary {
    width: fit-content;
    cursor: pointer;
    color: var(--cyan);
    font: 600 .72rem Manrope, sans-serif
}

.service-details[open] {
    position: absolute;
    inset: 0;
    overflow: auto;
    z-index: 5;
    padding: 1rem;
    border: 1px solid #11c5d9;
    border-radius: 12px;
    background: #10283a;
    box-shadow: 0 12px 32px #061824bb;
    animation: cardDetailsReveal .28s ease-out both
}

.service-details[open] summary {
    margin-bottom: .7rem
}

.service-details[open] p {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
    max-width: none;
    margin: 0;
    color: #edf1f2;
    font-size: .82rem;
    line-height: 1.5
}

.service-more {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: .42rem .5rem .42rem 1rem;
    border-radius: 99px;
    background: #fff;
    color: #243137;
    font: 700 .78rem Manrope, sans-serif;
    grid-column: 2;
    justify-self: end;
    margin: .4rem 0 0
}

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

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

.service-more span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #173b25;
    color: #fff;
    font-size: 1rem
}

.service-more:hover {
    background: #bdf276;
    transform: translateY(-2px)
}

.service-all {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.1rem;
    font: 600 .85rem Manrope, sans-serif;
    color: #344047;
    text-underline-offset: 4px;
    text-decoration: underline
}

.service-all span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #173b25;
    color: #fff;
    text-decoration: none
}

@media(max-width:700px) {
    .services-section {
        padding: 3.7rem 0
    }

    .services-wrap {
        width: 90%
    }

    .services-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.2rem;
        margin-bottom: 1.6rem
    }

    .services-head h2 {
        font-size: clamp(2.4rem, 11vw, 3.5rem)
    }

    .services-intro {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem
    }

    .services-intro p {
        text-align: left;
        max-width: 34ch
    }

    .service-card {
        flex-basis: min(78vw, 330px);
        height: 400px
    }

    .service-controls button {
        width: 38px;
        height: 38px
    }
}

/* ABOUT CROWN editorial overview, highlights and three value cards */
.about-section {
    background: #fff;
    color: #18231d;
    padding: 4.5rem 0 4.8rem
}

.about-story {
    width: min(1440px, 94%);
    max-width: 1440px;
    margin: 0 auto
}

.about-overview {
    display: grid;
    grid-template-columns: minmax(290px, .78fr) minmax(0, 1.55fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center
}

.about-visual {
    width: 100%;
    max-width: none
}

.about-kicker {
    margin-bottom: 1rem;
    color: #4c5d53;
    font: 600 .74rem Manrope, sans-serif;
    letter-spacing: .08em
}

.about-kicker i {
    width: 10px;
    height: 10px;
    background: #a6e833;
    box-shadow: 0 0 0 5px #a6e83325
}

.about-img {
    width: 100%;
    height: clamp(190px, 19vw, 270px);
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 45%;
    border-radius: 15px;
    box-shadow: 0 10px 30px #14202c17
}

.about-copy {
    max-width: none
}

.about-copy .about-lead {
    font: 400 1rem/1.55 'DM Sans', sans-serif;
    letter-spacing: -.01em;
    color: #28342d;
    margin: 0;
    max-width: unset
}

.about-copy .about-lead strong {
    display: block;
    font: 700 clamp(1.2rem, 1.7vw, 1.55rem)/1.25 Manrope, sans-serif;
    letter-spacing: -.02em;
    margin-bottom: .55rem
}

.about-copy .about-link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin: .5rem .55rem .25rem 0;
    padding: .72rem 1.05rem;
    border: 1px solid #087fa8;
    border-radius: 999px;
    background: #087fa8;
    color: #fff;
    font: 700 .82rem/1.2 Manrope, sans-serif;
    box-shadow: 0 5px 14px #087fa82b;
    transition: transform .25s ease, box-shadow .25s ease
}

.about-copy .about-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: #05afd0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.2, .75, .25, 1)
}

.about-copy .about-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px #087fa845
}

.about-copy .about-link:hover::before {
    transform: scaleX(1)
}

.about-copy .about-link span {
    position: relative;
    transition: transform .25s ease
}

.about-copy .about-link:hover span {
    transform: translate(2px, -2px)
}

.about-copy .about-link:focus-visible {
    outline: 3px solid #05afd0;
    outline-offset: 3px
}

.about-lead strong {
    font-weight: 700;
    color: #1d2922
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.8rem 0 1.1rem
}

.about-stats>div {
    display: grid;
    gap: .22rem
}

.about-stats strong {
    font: 600 clamp(1.55rem, 2.5vw, 2.2rem)/1 Manrope, sans-serif;
    letter-spacing: -.04em;
    color: #1c2b21
}

.about-stats span {
    font: 500 .73rem/1.35 'DM Sans', sans-serif;
    color: #69756d
}

.about-link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: #285439;
    font: 700 .8rem Manrope, sans-serif;
    text-decoration: none
}

.about-link span {
    font-size: 1rem
}

.about-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 3rem
}

.about-pillar {
    position: relative;
    min-height: 178px;
    padding: 2.4rem 1.45rem 1.35rem;
    border-radius: 12px;
    background: #f4f5f3;
    color: #18231d;
    text-align: center;
    transition: transform .35s, box-shadow .35s, opacity .75s
}

.about-pillar:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px #182b1b12
}

.pillar-icon {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #a7e937;
    color: #24512f;
    box-shadow: 0 4px 12px #527d3022
}

.pillar-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.about-pillar h3 {
    font: 600 .98rem/1.25 Manrope, sans-serif;
    color: #202b24;
    margin: 0 0 .65rem
}

.about-pillar p {
    max-width: 38ch;
    margin: 0 auto;
    color: #68736b;
    font-size: .82rem;
    line-height: 1.45
}

@media(max-width:850px) {
    .about-section {
        padding: 3.5rem 0
    }

    .about-overview {
        grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
        gap: 1.6rem
    }

    .about-copy .about-lead {
        font-size: 1.3rem
    }

    .about-pillars {
        gap: .8rem;
        margin-top: 2.7rem
    }

    .about-pillar {
        padding-left: 1rem;
        padding-right: 1rem
    }
}

@media(max-width:650px) {
    .about-section {
        padding: 3rem 0
    }

    .about-story {
        width: 90%
    }

    .about-overview {
        grid-template-columns: 1fr;
        gap: 1.3rem
    }

    .about-img {
        height: 220px
    }

    .about-copy .about-lead {
        font-size: 1.2rem
    }

    .about-stats {
        margin: 1.3rem 0 1rem;
        gap: .5rem
    }

    .about-stats strong {
        font-size: 1.45rem
    }

    .about-stats span {
        font-size: .68rem
    }

    .about-pillars {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        margin-top: 2.7rem
    }

    .about-pillar {
        min-height: 145px;
        padding: 2.2rem 1rem 1.1rem
    }

    .about-pillar h3 {
        font-size: .94rem
    }

    .about-pillar p {
        font-size: .8rem
    }
}

@media(prefers-reduced-motion:reduce) {
    .about-pillar {
        transition: none !important
    }
}

/* Match the navbar container to the shared section grid */
header .wrap {
    width: min(1440px, 94%)
}

@media(max-width:700px) {
    header .wrap {
        width: 90%
    }
}

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

    .services-section::before {
        animation: none;
    }
}

/* Site-wide spacing and light-theme alignment refinements */
section {
    padding: 4.25rem 0
}

.about-section {
    padding: 1.2rem 0 3.8rem
}

.services-section {
    padding: 4rem 0 3.2rem
}

.principles-section {
    padding: 2rem 0 3.6rem
}

.benefits-section {
    padding: 3.8rem 0 3.2rem
}

footer {
    color: #fff
}

footer p {
    color: #c0ccd2
}

.mq .track span {
    color: #f1f7fa
}

.mq .track span:nth-child(even) {
    color: var(--cyan)
}

.menu>li:last-child .btn:after {
    content: "\2197"
}

@media(max-width:700px) {
    section {
        padding: 3.4rem 0
    }

    .about-section {
        padding: 1rem 0 2.8rem
    }

    .services-section {
        padding: 3.4rem 0 2.8rem
    }

    .principles-section {
        padding: 2rem 0 2.8rem
    }

    .benefits-section {
        padding: 3.2rem 0 2.8rem
    }
}

/* Why choose Crown: four clear benefit cards */
.why-section {
    background: #e4ebd8;
    color: #173522;
    padding: 4.2rem 0 4.5rem;
    overflow: hidden
}

.why-wrap {
    width: min(1200px, 88%)
}

.why-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 2.4rem
}

.why-head h2 {
    font: 400 clamp(2.6rem, 4.5vw, 4rem)/.98 Georgia, serif;
    letter-spacing: -.04em;
    margin: .75rem 0 0;
    color: #14351f
}

.why-head h2 em {
    font-style: italic
}

.why-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: 520px;
    padding-bottom: .35rem
}

.why-intro p {
    max-width: 36ch;
    margin: 0;
    color: #4b5e4b;
    font-size: .95rem;
    line-height: 1.5
}

.why-top-cta,
.why-join {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    border-radius: 99px;
    text-decoration: none;
    font: 600 .78rem Manrope, sans-serif;
    white-space: nowrap;
    transition: transform .22s, background .22s, color .22s
}

.why-top-cta {
    background: #10351e;
    color: #fff;
    padding: .7rem .85rem .7rem 1.15rem
}

.why-top-cta span,
.why-join span {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #d8ef91;
    color: #173522;
    font-size: 1rem
}

.why-top-cta:hover,
.why-join:hover {
    transform: translateY(-2px)
}

.why-card {
    min-width: 0;
    min-height: 245px;
    padding: 1.35rem 1.25rem 1.15rem;
    border-radius: 17px;
    background: #d2e0c3;
    color: #193724;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: none;
    transition: transform .35s, background .3s, opacity .7s, visibility .7s
}

.why-card:nth-child(2) {
    background: #d8e5ca;
    transition-delay: 80ms
}

.why-card:nth-child(3) {
    background: #cfdfbf;
    transition-delay: 150ms
}

.why-card:nth-child(4) {
    background: #d9e5cd;
    transition-delay: 220ms
}

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

.why-card.featured {
    background: #10351e;
    color: #f5f8ed
}

.why-card>svg {
    width: 34px;
    height: 34px;
    margin-bottom: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.why-card h3 {
    font: 500 1.28rem/1.12 'DM Sans', sans-serif;
    letter-spacing: -.025em;
    margin: 0 0 .65rem;
    max-width: 14ch;
    color: inherit
}

.why-card p {
    font: 400 .82rem/1.4 'DM Sans', sans-serif;
    color: inherit;
    opacity: .78;
    margin: 0 0 1.1rem;
    max-width: 30ch
}

.why-join {
    margin-top: auto;
    background: #f7f8ef;
    color: #193724;
    padding: .48rem .55rem .48rem .9rem;
    font-size: .7rem
}

.why-join span {
    background: #143b24;
    color: #fff;
    width: 24px;
    height: 24px
}

.featured .why-join {
    background: #dcedb9;
    color: #18351f
}

.featured .why-join span {
    background: #0e2d19;
    color: #fff
}

@media(max-width:900px) {
    .why-card {
        min-height: 225px
    }
}

@media(max-width:600px) {
    .why-section {
        padding: 3.2rem 0
    }

    .why-wrap {
        width: 90%
    }

    .why-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1.5rem
    }

    .why-head h2 {
        font-size: 3rem
    }

    .why-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem
    }

    .why-intro p {
        font-size: .9rem
    }

    .why-card {
        min-height: 220px;
        padding: 1rem;
        border-radius: 14px
    }

    .why-card h3 {
        font-size: 1.12rem
    }

    .why-card p {
        font-size: .78rem
    }

    .why-card>svg {
        margin-bottom: 1rem
    }
}

@media(max-width:390px) {
    .why-card {
        min-height: 195px
    }
}

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

    .why-card,
    .why-top-cta,
    .why-join {
        transition: none !important
    }
}

/* Crown journey timeline replacing the previous instrument benefit cards */
.benefits-section {
    background: #fff;
    padding: 4.5rem 0 4rem;
    color: #1b2520;
    overflow: hidden
}

.journey-wrap {
    width: min(1320px, 92%);
    max-width: 1320px;
    margin: 0 auto
}

.journey-intro {
    max-width: 500px;
    position: relative;
    z-index: 2
}

.journey-tag {
    display: inline-block;
    padding: .28rem .75rem;
    border-radius: 99px;
    background: #2d693c;
    color: #fff;
    font: 600 .66rem Manrope, sans-serif;
    letter-spacing: .035em;
    text-transform: uppercase
}

.journey-intro h2 {
    font: 400 clamp(2.25rem, 4vw, 3.45rem)/1.06 Georgia, serif;
    letter-spacing: -.035em;
    color: #202a24;
    margin: .8rem 0 .8rem
}

.journey-intro p {
    max-width: 46ch;
    color: #58645c;
    font-size: .92rem;
    line-height: 1.5;
    margin: 0
}

.journey-steps {
    height: 355px;
    position: relative;
    margin-top: -12px
}

.journey-path {
    position: absolute;
    left: 17%;
    right: 4%;
    top: 0;
    height: 240px;
    pointer-events: none;
    z-index: 0
}

.journey-path svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible
}

.journey-path path {
    fill: none;
    stroke: #76a477;
    stroke-width: 2.2;
    stroke-dasharray: 5 7;
    vector-effect: non-scaling-stroke
}

.journey-step {
    position: absolute;
    width: 220px;
    text-align: center;
    z-index: 1
}

.step-one {
    left: 15%;
    top: 125px
}

.step-two {
    left: 50%;
    top: 38px
}

.step-three {
    left: 84%;
    top: -4px
}

.journey-photo {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto .8rem;
    border-radius: 50%;
    padding: 6px;
    background: #fff;
    border: 1px solid #c8d8c4;
    box-shadow: 0 6px 20px #15351d18
}

.journey-photo:before {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid #a9c5a2;
    border-radius: 50%;
    opacity: .65
}

.journey-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: .3rem;
    background: #f3f6f7;
    border-radius: 50%
}

.journey-photo>span:not(.journey-photo-clip) {
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #17612f;
    color: #fff;
    font: 600 .72rem Manrope, sans-serif;
    box-shadow: 0 2px 8px #173c2480
}

.journey-step h3 {
    font: 600 .95rem/1.2 Manrope, sans-serif;
    color: #28543a;
    margin: 0 0 .35rem
}

.journey-step p {
    font-size: .76rem;
    line-height: 1.35;
    color: #68736b;
    margin: 0 auto;
    max-width: 29ch
}

@media(max-width:740px) {
    .benefits-section {
        padding: 3.2rem 0
    }

    .journey-wrap {
        width: 90%
    }

    .journey-intro {
        max-width: unset
    }

    .journey-intro h2 {
        font-size: 2.65rem
    }

    .journey-steps {
        height: auto;
        margin: 1.7rem 0 0;
        display: grid;
        gap: .85rem
    }

    .journey-path {
        display: none
    }

    .journey-step {
        position: relative;
        inset: auto;
        width: auto;
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 1rem;
        align-items: center;
        text-align: left;
        padding: .75rem;
        border: 1px solid #e5eae3;
        border-radius: 16px;
        background: #fbfcfa
    }

    .journey-photo {
        grid-column: 1;
        grid-row: 1/3;
        width: 76px;
        height: 76px;
        margin: 0
    }

    .journey-step h3 {
        align-self: end;
        margin: 0 0 .25rem
    }

    .journey-step p {
        align-self: start;
        margin: 0;
        max-width: 44ch
    }

    .journey-photo>span:not(.journey-photo-clip) {
        width: 21px;
        height: 21px;
        font-size: .65rem
    }
}

@media(prefers-reduced-motion:reduce) {
    .journey-step {
        transition: none !important
    }
}

.journey-path path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1
}

.journey-path.in path {
    animation: journeyDraw 1.65s cubic-bezier(.4, 0, .2, 1) .15s forwards
}

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

.journey-step {
    transition-delay: .12s
}

.journey-step.step-two {
    transition-delay: .3s
}

.journey-step.step-three {
    transition-delay: .48s
}

.journey-step .journey-photo {
    opacity: 0;
    transform: scale(.72)
}

.journey-step.in .journey-photo {
    animation: journeyPop .68s cubic-bezier(.2, .85, .25, 1.25) .14s both
}

.journey-step.step-two.in .journey-photo {
    animation-delay: .32s
}

.journey-step.step-three.in .journey-photo {
    animation-delay: .5s
}

@keyframes journeyPop {
    0% {
        opacity: 0;
        transform: scale(.72)
    }

    72% {
        opacity: 1;
        transform: scale(1.08)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@media(prefers-reduced-motion:reduce) {
    .journey-step .journey-photo {
        opacity: 1;
        transform: none
    }

    .journey-path path {
        stroke-dashoffset: 0
    }
}

.journey-path path {
    stroke: #76a477;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 0 10;
    stroke-dashoffset: 0
}

.journey-path.in path {
    animation: journeyDottedFlow 1.2s linear .15s infinite
}

@keyframes journeyDottedFlow {
    to {
        stroke-dashoffset: -10px
    }
}

@media(prefers-reduced-motion:reduce) {
    .journey-path.in path {
        animation: none
    }
}

/* Wide company showcase directly below Our Instruments */
.showcase-section {
    background: #f7f5ef;
    padding: 4.2rem 0 3.8rem;
    color: #17221b
}

.showcase-wrap {
    width: min(1320px, 92%);
    max-width: 1320px;
    margin: 0 auto
}

.showcase-head {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
    align-items: start;
    margin-bottom: 1.7rem
}

.showcase-head h2 {
    font: 500 clamp(2rem, 3.5vw, 3.35rem)/1.08 Manrope, sans-serif;
    letter-spacing: -.045em;
    color: #17221b;
    margin: 0;
    max-width: 19ch
}

.showcase-head>div {
    padding-top: .3rem
}

.showcase-head p {
    font-size: .9rem;
    line-height: 1.5;
    color: #5c665f;
    margin: 0 0 .9rem;
    max-width: 50ch
}

.showcase-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font: 600 .8rem Manrope, sans-serif;
    color: #284d34;
    text-decoration: underline;
    text-underline-offset: 4px
}

.showcase-link span {
    font-size: 1rem;
    text-decoration: none
}

.showcase-image {
    width: 100%;
    height: clamp(260px, 34vw, 430px);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background: #071a2b;
    border-radius: 2px
}

.showcase-image::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -18px;
    background: linear-gradient(rgba(7, 26, 43, .28), rgba(7, 26, 43, .28)), url("images/hero-lab-2.png") center 45% / cover no-repeat;
    filter: blur(16px);
}

.showcase-image img,
.showcase-image video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    transition: transform .8s cubic-bezier(.2, .75, .25, 1)
}

.showcase-image video {
    position: relative;
    z-index: 1;
    object-fit: contain;
    background: transparent;
}

.showcase-image:hover img,
.showcase-image:hover video {
    transform: scale(1.025)
}

.showcase-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.7rem .5rem .3rem;
    text-align: center
}

.showcase-facts>div {
    display: grid;
    gap: .25rem;
    justify-items: center
}

.showcase-facts strong {
    font: 500 clamp(1.7rem, 3vw, 2.6rem)/1 Manrope, sans-serif;
    letter-spacing: -.045em;
    color: #1f3125
}

.showcase-facts span {
    font: 600 .72rem/1.35 'DM Sans', sans-serif;
    color: #5c665f
}

@media(max-width:700px) {
    .showcase-section {
        padding: 3.2rem 0
    }

    .showcase-wrap {
        width: 90%
    }

    .showcase-head {
        grid-template-columns: 1fr;
        gap: .8rem;
        margin-bottom: 1.2rem
    }

    .showcase-head h2 {
        font-size: 2.2rem
    }

    .showcase-head p {
        font-size: .86rem
    }

    .showcase-image {
        height: 250px
    }

    .showcase-facts {
        gap: .8rem .35rem;
        padding: 1.3rem 0 .2rem
    }

    .showcase-facts strong {
        font-size: 1.5rem
    }

    .showcase-facts span {
        font-size: .67rem
    }
}

@media(max-width:420px) {
    .showcase-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 1rem
    }

    .showcase-image {
        height: 215px
    }
}

@media(prefers-reduced-motion:reduce) {
    .showcase-image img,
    .showcase-image video {
        transition: none !important
    }
}

/* OUR APPROACH: editorial heading beside three instrument cards */
.principles-section {
    background: #f8f9f8;
    color: #101a2b;
    padding: 4.8rem 0 5rem;
    overflow: hidden
}

.principles-layout {
    width: min(1440px, 94%);
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1.5rem;
    align-items: center
}

.principles-intro {
    position: relative;
    min-width: 0;
    padding: .3rem 0
}

.approach-kicker {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
    color: #456178;
    font: 600 .72rem Manrope, sans-serif;
    letter-spacing: .28em
}

.approach-kicker i {
    display: block;
    width: 48px;
    height: 2px;
    background: #05bcd7
}

.principles-heading {
    font: 400 clamp(3.1rem, 4.2vw, 4.8rem)/.96 Georgia, serif;
    letter-spacing: -.055em;
    color: #0b172b;
    margin: 0 0 1.6rem;
    padding: 0
}

.principles-heading em {
    font-style: italic;
    white-space: nowrap
}

.principles-heading b {
    font-weight: 400;
    font-style: normal;
    color: #07bfd9
}

.principles-intro>p {
    max-width: 39ch;
    color: #596b78;
    font-size: clamp(.95rem, 1.3vw, 1.2rem);
    line-height: 1.48;
    margin: 0 0 1.7rem
}

.approach-cta {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    padding: .45rem .45rem .45rem 1.3rem;
    border-radius: 99px;
    background: #08bfd9;
    color: #fff;
    font: 700 .8rem Manrope, sans-serif;
    letter-spacing: .04em;
    box-shadow: 0 10px 26px #05bcd733;
    transition: transform .25s, box-shadow .25s
}

.approach-cta span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #047c9b;
    color: #fff;
    font-size: 1.25rem
}

.approach-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px #05bcd74a
}

.principle-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    min-width: 0
}

.principle-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e5e9ea;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 36px #11283a0d;
    transition: transform .55s cubic-bezier(.2, .75, .25, 1), border-color .3s, box-shadow .3s, opacity .75s
}

.principle-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px #11283a19
}

.principle-card.featured {
    border: 2px solid #05bfd9;
    box-shadow: 0 16px 36px #05bfd929
}

.principle-image {
    height: clamp(250px, 29vw, 390px);
    position: relative;
    overflow: hidden;
    background: #f2f5f6
}

.principle-image:after {
    content: "";
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(transparent, #06172545);
    opacity: .65;
    pointer-events: none
}

.principle-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 1rem;
    filter: none;
    transition: transform .75s cubic-bezier(.2, .75, .25, 1)
}

.principle-card:hover .principle-image img {
    transform: scale(1.045)
}

.principle-link {
    position: absolute;
    z-index: 2;
    right: 1rem;
    bottom: 1rem;
    width: 48px;
    height: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #06b8d2;
    font-size: 1.5rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: 0 5px 18px #06172526;
    transition: background .2s, color .2s, transform .2s
}

.principle-card.featured .principle-link {
    background: #05bfd9;
    color: #fff
}

.principle-link:hover {
    transform: translateX(3px);
    background: #05bfd9;
    color: #fff
}

.principle-body {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
    min-height: 170px;
    padding: 1.2rem 1rem 1.3rem
}

.principle-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #06bfd9
}

.principle-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.principle-body strong {
    display: block;
    color: #10203a;
    font: 700 .82rem/1.3 Manrope, sans-serif;
    letter-spacing: .015em;
    margin: .1rem 0 .65rem
}

.principle-body i {
    display: block;
    width: 46px;
    height: 2px;
    background: #06bfd9;
    margin: 0 0 .7rem
}

.principle-body p {
    font-size: .84rem;
    line-height: 1.45;
    color: #60717e;
    margin: 0;
    max-width: 34ch
}

@media(max-width:1150px) {
    .principles-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        width: 92%
    }

    .principles-intro {
        width: 100%;
        max-width: 650px
    }

    .principle-cards {
        grid-template-columns: repeat(3, minmax(250px, 1fr));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 0 0 .6rem
    }

    .principle-cards::-webkit-scrollbar {
        display: none
    }

    .principle-card {
        scroll-snap-align: start
    }

    .principle-image {
        height: 330px
    }
}

@media(max-width:650px) {
    .principles-section {
        padding: 3.4rem 0
    }

    .principles-layout {
        width: 90%;
        gap: 1.5rem
    }

    .approach-kicker {
        margin-bottom: 1rem
    }

    .principles-heading {
        font-size: clamp(2.65rem, 10vw, 3.7rem);
        margin-bottom: 1rem
    }

    .principles-heading em {
        white-space: normal
    }

    .principles-intro>p {
        font-size: .94rem;
        margin-bottom: 1.2rem
    }

    .approach-cta {
        padding: .35rem .4rem .35rem 1rem
    }

    .approach-cta span {
        width: 36px;
        height: 36px
    }

    .principle-cards {
        grid-template-columns: repeat(3, 82vw);
        gap: .8rem
    }

    .principle-image {
        height: 320px
    }

    .principle-body {
        min-height: 145px;
        padding: 1rem
    }

    .principle-body p {
        font-size: .82rem
    }
}

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

    .principle-card,
    .principle-image img,
    .principle-link,
    .approach-cta {
        transition: none !important
    }
}

/* Match every section's content width to the OUR APPROACH section */
body>section:not(.hero)>.wrap,
.services-wrap,
.principles-layout,
.journey-wrap,
.showcase-wrap,
.why-wrap {
    width: min(1440px, 94%);
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

@media(max-width:700px) {

    body>section:not(.hero)>.wrap,
    .services-wrap,
    .principles-layout,
    .journey-wrap,
    .showcase-wrap,
    .why-wrap {
        width: 90%
    }
}

/* Show four instruments at once on desktop, then advance the carousel */
#why .why {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0
}

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

@media(max-width:390px) {
    #why .why {
        grid-template-columns: 1fr
    }
}

.services-section .cards {
    gap: 1.2rem;
    scroll-behavior: smooth
}

.services-section .service-card {
    flex-basis: calc((100% - 3.6rem)/4)
}

@media(max-width:900px) {
    .services-section .service-card {
        flex-basis: calc((100% - 1.2rem)/2.25)
    }
}

@media(max-width:700px) {
    .services-section .service-card {
        flex-basis: min(78vw, 330px)
    }
}

/* Final spacing override for the redesigned ABOUT CROWN section */
.about-section {
    padding: 4.5rem 0 4.8rem
}

@media(max-width:650px) {
    .about-section {
        padding: 3rem 0
    }
}

/* Crown logo palette: deep navy, clear cyan, and cool blue-tinted surfaces */
:root {
    --navy: #082d46;
    --navy2: #0b4262;
    --cyan: #05afd0;
    --mut: #617989;
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

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

.menu>li:last-child .btn,
.menu>li:last-child .btn:after,
.slide .btn.p,
.approach-cta,
.why-top-cta,
.why-card.featured,
.journey-tag,
.journey-photo>span:not(.journey-photo-clip) {
    background-color: #087fa8;
    border-color: #087fa8;
}

.menu>li:last-child .btn:after,
.approach-cta span {
    background: #05afd0;
}

.slide .btn.p:hover,
.why-top-cta:hover,
.why-join:hover,
.service-more:hover {
    background: #05afd0;
    border-color: #05afd0;
    color: #fff;
}

.about-section,
.benefits-section,
.principles-section {
    color: #12334a;
}

.about-kicker,
.about-copy .about-lead,
.about-lead strong,
.about-stats strong,
.about-link,
.about-pillar h3,
.journey-intro h2,
.journey-step h3,
.showcase-head h2,
.showcase-facts strong,
.principles-heading {
    color: #082d46;
}

.about-kicker i,
.pillar-icon,
.approach-kicker i,
.principle-card.featured .principle-link {
    background-color: #05afd0;
    border-color: #05afd0;
    color: #fff;
}

.principle-card.featured {
    background: #fff;
    border-color: #05afd0;
}

.principle-icon {
    background: transparent;
    color: #05afd0;
}

.about-pillar,
.why-card,
.why-card:nth-child(2),
.why-card:nth-child(3),
.why-card:nth-child(4) {
    background: #eaf5f8;
    color: #12334a;
}

.why-section {
    background: #f1f8fa;
    color: #12334a;
}

.why-card.featured {
    background: #087fa8;
    color: #fff;
}

.why-head h2,
.why-card h3 {
    color: #082d46;
}

.why-card.featured h3 {
    color: #fff;
}

.why-top-cta,
.why-join,
.why-card.featured .why-join,
.why-join span,
.why-card.featured .why-join span {
    background: #087fa8;
    color: #fff;
}

.journey-photo {
    border-color: #a7d8e4;
    box-shadow: 0 6px 20px #087fa81a;
}

.journey-photo:before,
.journey-path path,
.journey-path.in path {
    border-color: #67bfd3;
    stroke: #1599b9;
}

.showcase-section {
    background: #fff;
    color: #12334a;
}

.showcase-link,
.showcase-head p,
.showcase-facts span,
.about-stats span,
.about-pillar p,
.journey-intro p,
.journey-step p {
    color: #5d7482;
}

.showcase-image {
    background: #e4f1f5;
}

.service-more span,
.service-all span {
    background: #087fa8;
}

.service-more:hover span {
    background: #075574;
}

.principles-section {
    background: #fff;
}

.services-section {
    background: #f1f8fa;
    position: relative;
    isolation: isolate;
}

.services-section::before {
    content: "";
    position: absolute;
    inset: -12% -18%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 28%, #c8f3f5aa 0, transparent 42%),
        radial-gradient(ellipse at 82% 72%, #d9e8fbaa 0, transparent 44%),
        linear-gradient(120deg, #f1f8fa, #eaf7f8 48%, #f7fafc);
    background-size: 150% 150%;
    animation: servicesBackgroundFlow 18s ease-in-out infinite alternate;
}

@keyframes servicesBackgroundFlow {
    from {
        background-position: 0% 20%;
    }

    to {
        background-position: 100% 80%;
    }
}

.principles-heading b,
.principle-link,
.approach-kicker {
    color: #087fa8;
}

.principle-card.featured {
    box-shadow: 0 16px 36px #05afd026;
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}

/* Keep navigation available while moving through the page */
header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    box-shadow: 0 3px 18px #082d4612;
}

header.solid {
    background: #fffffff2;
    box-shadow: 0 3px 18px #082d4618;
    backdrop-filter: blur(12px);
}

/* Crop the whitespace built into the supplied Crown logo artwork */
header .logo {
    position: relative;
    display: block;
    flex: 0 0 170px;
    width: 170px;
    height: 64px;
    overflow: hidden;
}

header .logo img {
    position: absolute;
    top: -9px;
    left: -98px;
    width: 370px;
    height: 81px;
    max-width: none;
}

/* Hero content follows the framed editorial banner layout */
.hero {
    position: relative;
    isolation: isolate;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, #071a2b55 0%, #071a2b08 58%, #071a2b36 100%), linear-gradient(0deg, #061a2bd9 0%, #061a2b00 53%);
}

.hero-social {
    position: absolute;
    z-index: 5;
    top: clamp(1.2rem, 3vw, 2.4rem);
    left: clamp(1.2rem, 4vw, 3.5rem);
    color: #fff;
    text-shadow: 0 2px 12px #06172580;
}

.hero-social>span {
    display: block;
    margin-bottom: .65rem;
    font: 700 .68rem Manrope, sans-serif;
    letter-spacing: .16em;
}

.hero-social>div {
    display: flex;
    gap: .45rem;
}

.hero-social i {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 1px solid #ffffffb5;
    border-radius: 50%;
    background: #ffffffed;
    color: #087fa8;
    font: 700 .72rem Manrope, sans-serif;
    font-style: normal;
    text-shadow: none;
}

.hero .slide,
.hero .slide.on {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .75fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1.2rem clamp(1.5rem, 5vw, 5rem);
    inset: 0;
    z-index: 2;
    width: calc(100% - clamp(40px, 8vw, 120px));
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.5rem) 0;
    pointer-events: none;
}

.hero .slide>div:first-child {
    width: auto;
    padding: 0;
}

.hero-feature {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: min(350px, 100%);
    overflow: hidden;
    padding: .65rem;
    border: 1px solid #ffffff72;
    border-radius: 18px;
    background: #eff8f8df;
    color: #0b3049;
    box-shadow: 0 18px 50px #00121f38;
    backdrop-filter: blur(12px);
    pointer-events: auto;
}

.hero-feature-label {
    display: inline-flex;
    margin: .25rem .35rem .55rem;
    padding: .35rem .65rem;
    border-radius: 99px;
    background: #d9f2f7;
    color: #087fa8;
    font: 700 .62rem Manrope, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hero-feature-image {
    display: block;
    width: 100%;
    height: clamp(105px, 12vw, 160px);
    border-radius: 12px;
    background: #fff;
    object-fit: contain;
}

.hero-feature-copy {
    display: grid;
    gap: .3rem;
    padding: .7rem .4rem .35rem;
}

.hero-feature-copy strong {
    font: 700 .86rem/1.25 Manrope, sans-serif;
}

.hero-feature-copy>span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #617989;
    font-size: .72rem;
}

.hero-feature-copy b {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #087fa8;
    color: #fff;
    font-size: .95rem;
}

.hero-main {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    pointer-events: auto;
}

.hero .slide h1 {
    max-width: 720px;
    margin: 0;
    color: #fff;
    font: 400 clamp(2.8rem, 6.2vw, 6rem)/.96 Georgia, serif;
    letter-spacing: -.045em;
    text-shadow: 0 3px 28px #00121f6e;
}

.hero-sidecopy {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    width: min(390px, 100%);
    padding-bottom: .3rem;
    pointer-events: auto;
}

.hero .slide .hero-sidecopy p {
    margin: 0 0 1rem;
    color: #f2f8fb;
    font-size: clamp(.95rem, 1.2vw, 1.12rem);
    line-height: 1.5;
    text-shadow: 0 2px 16px #00121f99;
}

.hero-action {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: .42rem .48rem .42rem 1.1rem;
    border-radius: 99px;
    background: #fff;
    color: #12334a;
    font: 700 .78rem Manrope, sans-serif;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.hero-action span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #05afd0;
    color: #fff;
    font-size: 1.1rem;
}

.hero-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px #00121f55;
}

.hero .ctl {
    display: none;
}

@media(max-width:900px) {

    .hero .slide,
    .hero .slide.on {
        width: calc(100% - 48px);
        grid-template-columns: minmax(0, 1fr) minmax(220px, .75fr);
        gap: 1.2rem;
    }

    .hero-feature {
        width: min(300px, 100%);
    }
}

@media(max-width:560px) {
    .hero-social {
        top: 1rem;
        left: 1rem;
    }

    .hero-social>span {
        font-size: .56rem;
    }

    .hero-social i {
        width: 27px;
        height: 27px;
    }

    .hero .slide,
    .hero .slide.on {
        width: calc(100% - 32px);
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(200px, 1fr) auto auto;
        gap: .9rem .75rem;
        padding: 1.2rem 0 1.4rem;
    }

    .hero-feature {
        grid-column: 2;
        grid-row: 1;
        width: min(190px, 100%);
        padding: .42rem;
        border-radius: 13px;
    }

    .hero-feature-label {
        margin: .15rem .25rem .35rem;
        font-size: .52rem;
    }

    .hero-feature-image {
        height: 82px;
        border-radius: 9px;
    }

    .hero-feature-copy {
        gap: .2rem;
        padding: .45rem .25rem .2rem;
    }

    .hero-feature-copy strong {
        font-size: .66rem;
    }

    .hero-feature-copy>span {
        font-size: .58rem;
    }

    .hero-feature-copy b {
        width: 21px;
        height: 21px;
    }

    .hero-main {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .hero .slide h1 {
        font-size: clamp(2.55rem, 12vw, 4.1rem);
    }

    .hero-sidecopy {
        grid-column: 1 / -1;
        grid-row: 3;
        width: min(360px, 100%);
        justify-self: start;
    }

    .hero .slide .hero-sidecopy p {
        font-size: .9rem;
        margin-bottom: .7rem;
    }
}

/* Responsive navigation panel and accessible animated menu button */
.burger {
    display: none;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 1px solid #d6e5eb;
    border-radius: 12px;
    background: #f1f8fa;
    color: #082d46;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.burger span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .22s ease, opacity .18s ease;
}

.burger.open span:first-child {
    transform: translateY(7px) rotate(45deg);
}

.burger.open span:nth-child(2) {
    opacity: 0;
}

.burger.open span:last-child {
    transform: translateY(-7px) rotate(-45deg);
}

@media(max-width:900px) {
    header .wrap {
        width: 94%;
    }

    header nav {
        height: 66px;
    }

    .burger {
        display: flex;
    }

    header .menu {
        position: fixed;
        top: 66px;
        left: 3%;
        right: 3%;
        bottom: auto;
        z-index: 110;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .2rem;
        max-height: 0;
        margin: 0;
        padding: 0 1rem;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        border: 1px solid transparent;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 18px 40px #082d4626;
        transition: max-height .3s ease, opacity .2s ease, padding .3s ease, visibility .3s ease;
    }

    header .menu.open {
        max-height: calc(100svh - 82px);
        padding: .7rem 1rem 1rem;
        overflow-y: auto;
        visibility: visible;
        opacity: 1;
        border-color: #dce9ee;
    }

    header .menu>li {
        width: 100%;
    }

    header .menu a.l {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 44px;
        padding: .65rem .8rem;
        border-radius: 10px;
        color: #12334a;
    }

    header .menu a.l.act,
    header .menu a.l:hover {
        background: #eaf5f8;
    }

    header .menu .has {
        position: static;
    }

    header .menu .dd {
        position: static;
        display: none;
        min-width: 0;
        margin: 0 0 .35rem .7rem;
        padding: .2rem 0 .2rem .55rem;
        border: 0;
        border-left: 2px solid #b7e6ef;
        border-radius: 0;
        background: transparent;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
    }

    header .menu .has.open .dd {
        display: block;
    }

    header .menu .dd a {
        padding: .55rem .75rem;
        color: #426071;
    }

    header .menu>li:last-child {
        padding-top: .55rem;
    }

    header .menu>li:last-child .btn {
        display: inline-flex;
        justify-content: center;
        width: 100%;
    }
}

/* Clear, compact product menu on desktop and mobile */
header .menu .dd {
    width: min(340px, 84vw);
    max-height: min(65vh, 520px);
    overflow-y: auto;
    padding: .55rem;
    border: 1px solid #dce9ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 38px #082d4624;
}

header .menu .dd li+li {
    margin-top: .2rem;
}

header .menu .dd a.dd-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .62rem .7rem;
    border-radius: 9px;
    color: #12334a;
    font-size: .84rem;
    line-height: 1.35;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

header .menu .dd a.dd-link:hover {
    background: #eaf5f8;
    color: #087fa8;
}

header .menu .dd a.dd-link b,
header .menu .dd .dd-all a span {
    flex: 0 0 25px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #e1f4f8;
    color: #087fa8;
    font-size: .9rem;
}

header .menu .dd .dd-all {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid #e4edf1;
}

header .menu .dd .dd-all a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .62rem .7rem;
    border-radius: 9px;
    background: #087fa8;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

header .menu .dd .dd-all a span {
    background: #ffffff2a;
    color: #fff;
}

@media(max-width:900px) {
    header .menu.open {
        background: #fff;
    }

    header .menu .dd {
        width: 100%;
        max-height: min(44vh, 360px);
        margin: .2rem 0 .35rem;
        padding: .4rem;
        border: 1px solid #e1edf1;
        border-radius: 12px;
        background: #f6fafb;
        box-shadow: none;
    }

    header .menu .dd a.dd-link {
        min-height: 42px;
        padding: .55rem .6rem;
        font-size: .82rem;
    }

    header .menu .dd .dd-all {
        padding-top: .4rem;
    }

    header .menu .has>a::after {
        content: "?";
        display: inline-block;
        margin-left: auto;
        color: #087fa8;
        font-size: 1.1rem;
        transition: transform .2s ease;
    }

    header .menu .has.open>a::after {
        transform: rotate(180deg);
    }
}

/* Let the journey product photos pop forward on pointer hover */
.journey-photo img {
    position: relative;
    z-index: 1;
    cursor: zoom-in;
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, filter .3s ease;
}

.journey-photo-clip {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.journey-photo>span:not(.journey-photo-clip) {
    z-index: 2;
}

@media(hover:hover) and (pointer:fine) {
    .journey-step:hover {
        z-index: 6;
    }

    .journey-photo:hover {
        z-index: 7;
        border-color: #05afd0;
        box-shadow: 0 10px 28px #087fa82e;
    }

    .journey-photo:hover img {
        z-index: 1;
        transform: scale(1.45);
        filter: saturate(1.12);
        box-shadow: 0 12px 30px #082d4640;
    }
}

@media(prefers-reduced-motion:reduce) {
    .journey-photo img {
        transition: none;
    }
}

/* Modern Crown footer */
footer.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 3rem 0 1.5rem;
    border-top: 1px solid #27b7d333;
    background: radial-gradient(ellipse at 85% 0%, #0b4262 0%, transparent 38%), #062238;
    color: #f5fbfd;
}

.footer-wrap {
    position: relative;
    z-index: 1;
    width: min(1440px, 94%);
    max-width: 1440px;
    margin: 0 auto;
}

.footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.4rem, 3vw, 2.5rem);
    margin-bottom: 3.2rem;
    border: 1px solid #8bd8e84a;
    border-radius: 22px;
    background: linear-gradient(115deg, #0c4967, #087fa8);
    box-shadow: 0 18px 44px #00152235;
}

.footer-eyebrow {
    display: block;
    margin-bottom: .75rem;
    color: #a8ecf5;
    font: 700 .66rem Manrope, sans-serif;
    letter-spacing: .14em;
}

.footer-cta h2 {
    margin: 0 0 .55rem;
    color: #fff;
    font: 500 clamp(1.55rem, 3.2vw, 2.5rem)/1.12 Manrope, sans-serif;
    letter-spacing: -.04em;
}

.footer-cta p {
    margin: 0;
    color: #d5eef3;
    font-size: .92rem;
}

.footer-cta-link,
.footer-contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: 0 0 auto;
    padding: .45rem .5rem .45rem 1.1rem;
    border-radius: 99px;
    background: #fff;
    color: #082d46;
    font: 700 .78rem Manrope, sans-serif;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
}

.footer-cta-link span,
.footer-contact-link span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #05afd0;
    color: #fff;
    font-size: 1rem;
}

.footer-cta-link:hover,
.footer-contact-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px #00152238;
    color: #082d46;
}

.footer-grid {
    grid-template-columns: 1.45fr .8fr 1.15fr 1fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    padding: 0 0 2.5rem;
}

.footer-grid h3 {
    margin: .35rem 0 1rem;
    color: #fff;
    font: 700 .78rem Manrope, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.footer-logo {
    position: relative;
    display: block;
    width: 170px;
    height: 58px;
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: 9px;
    background: #fff;
}

.footer-logo img {
    position: absolute;
    top: -11px;
    left: -98px;
    width: 370px;
    height: 81px;
    max-width: none;
}

.footer-brand p,
.footer-contact-copy {
    max-width: 34ch;
    margin: 0 0 .8rem;
    color: #b9ccd5;
    font-size: .88rem;
    line-height: 1.55;
}

.footer-since {
    color: #76d7e7;
    font: 600 .72rem Manrope, sans-serif;
}

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

.footer-grid li {
    margin: .15rem 0;
    color: #bdcfd7;
    font-size: .84rem;
}

.footer-grid li a {
    display: inline-block;
    padding: .28rem 0;
    color: #bdcfd7;
    line-height: 1.35;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.footer-grid li a:hover {
    color: #72d9e9;
    transform: translateX(3px);
}

.footer-contact-link {
    margin-top: 1rem;
    padding: .35rem .4rem .35rem .9rem;
    font-size: .7rem;
}

.footer-contact-link span {
    width: 28px;
    height: 28px;
}

.site-footer .copy {
    margin-top: 0;
    padding-top: 1.25rem;
    border-top: 1px solid #ffffff20;
    color: #a9bfca;
    font-size: .76rem;
}

.site-footer .copy>span:last-child {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
}

.site-footer .copy a {
    color: #a9bfca;
    text-decoration: none;
}

.site-footer .copy a:hover {
    color: #72d9e9;
}

.site-footer .copy i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #72d9e9;
}

@media(max-width:900px) {
    .footer-grid {
        grid-template-columns: 1.2fr 1fr;
    }
}

@media(max-width:560px) {
    footer.site-footer {
        padding-top: 2rem;
    }

    .footer-cta {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.2rem;
        margin-bottom: 2.2rem;
        border-radius: 18px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem 1rem;
        padding-bottom: 1.8rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-grid h3 {
        font-size: .72rem;
    }

    .footer-grid li {
        font-size: .78rem;
    }

    .footer-brand p,
    .footer-contact-copy {
        font-size: .82rem;
    }

    .site-footer .copy {
        flex-direction: column;
        gap: .65rem;
        font-size: .7rem;
    }
}

/* Industries and applications section below Why Crown */
.sectors-section {
    padding: clamp(3.5rem, 7vw, 6.5rem) 0;
    background: #fff;
    color: #082d46;
}

.sectors-wrap {
    width: min(1440px, 94%);
    max-width: 1440px;
    margin: 0 auto;
}

.sectors-heading {
    margin-bottom: clamp(1.8rem, 4vw, 3.2rem);
}

.sectors-heading .section-kicker {
    margin-bottom: .85rem;
}

.sectors-heading h2 {
    max-width: 950px;
    color: #082d46;
    font: 500 clamp(1.8rem, 4.1vw, 3.5rem)/1.12 Manrope, sans-serif;
    letter-spacing: -.045em;
}

.sectors-content {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    align-items: stretch;
    gap: clamp(1.5rem, 3vw, 3rem);
}

.sectors-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    padding: 0;
}

.sectors-list li {
    border-bottom: 1px solid #cbd9df;
}

.sectors-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 58px;
    padding: .65rem .15rem .65rem .35rem;
    color: #12334a;
    font: 600 clamp(.95rem, 1.35vw, 1.12rem)/1.3 Manrope, sans-serif;
    text-decoration: none;
    transition: color .22s ease, padding .22s ease;
}

.sectors-list a b {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    color: #087fa8;
    font-size: 1.2rem;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}

.sectors-list a:hover {
    padding-left: .8rem;
    color: #087fa8;
}

.sectors-list a:hover b {
    background: #087fa8;
    color: #fff;
    transform: rotate(45deg);
}

.sectors-photo {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    border-radius: 22px;
    background: #0d3148;
    box-shadow: 0 18px 45px #082d4618;
}

.sectors-photo::after {
    content: "";
    position: absolute;
    inset: 30% 0 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent, #041a2b9c);
    pointer-events: none;
}

.sectors-photo img {
    display: block;
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    filter: grayscale(.88);
    transition: transform .65s cubic-bezier(.2, .75, .25, 1), filter .5s ease;
}

.sectors-photo:hover img {
    transform: scale(1.045);
    filter: grayscale(.35);
}

.sectors-photo>span {
    position: absolute;
    z-index: 3;
    top: 1.2rem;
    right: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .5rem .45rem .85rem;
    border: 1px solid #ffffff70;
    border-radius: 99px;
    background: #ffffffdf;
    color: #082d46;
    font: 700 .74rem Manrope, sans-serif;
    backdrop-filter: blur(10px);
}

.sectors-photo>span b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #087fa8;
    color: #fff;
    font-size: 1rem;
}

.sectors-canvas {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sectors-canvas[hidden] {
    display: none;
}

/* Swiper instrument carousel */
.service-viewport {
    overflow: hidden;
}

.services-section .cards.swiper {
    display: block;
    overflow: visible;
    padding: 0 0 .8rem;
}

.services-section .swiper-wrapper {
    align-items: stretch;
}

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

.services-section .swiper-slide .service-card {
    width: 100%;
    height: 430px;
    flex: none;
}

.services-section .service-card .im img {
    max-width: 100%;
}

/* SplitType reveal on the visible approach heading */
.principles-heading.split-ready {
    font-kerning: none;
}

.principles-heading.split-ready .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(.32em);
    transition: opacity .55s ease, transform .7s cubic-bezier(.2, .75, .25, 1);
    transition-delay: calc(var(--char-index, 0) * 13ms);
}

.principles-heading.split-show .char {
    opacity: 1;
    transform: translateY(0);
}

/* Subtle moving Crown-color wash above the hero photography */
.hero-gradient {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
}

.hero-social {
    z-index: 2;
}

.hero .slide {
    z-index: 2;
}

@media(max-width:900px) {
    .services-section .swiper-slide .service-card {
        height: 430px;
    }
}

@media(max-width:700px) {
    .services-section .swiper-slide .service-card {
        height: 410px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .principles-heading.split-ready .char {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Consistent, polished hover and keyboard feedback across the site */
a:focus-visible,
button:focus-visible {
    outline: 3px solid #05afd0;
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {

    .about-pillar,
    .why-card,
    .service-card,
    .principle-card,
    .showcase-image,
    .sectors-photo {
        transition: transform .38s cubic-bezier(.2, .75, .25, 1),
            box-shadow .38s ease, border-color .3s ease;
    }

    .about-pillar:hover,
    .why-card:hover,
    .service-card:hover,
    .principle-card:hover,
    .showcase-image:hover,
    .sectors-photo:hover {
        transform: translateY(-7px);
        box-shadow: 0 22px 48px #082d4620;
    }

    .service-card:hover,
    .principle-card:hover {
        border-color: #05afd0;
    }

    .about-img,
    .showcase-image img,
    .showcase-image video,
    .sectors-photo img,
    .service-card .im img,
    .principle-image img {
        transition: transform .65s cubic-bezier(.2, .75, .25, 1), filter .45s ease;
    }

    .about-visual:hover .about-img,
    .showcase-image:hover img,
    .showcase-image:hover video,
    .sectors-photo:hover img,
    .service-card:hover .im img,
    .principle-card:hover .principle-image img {
        transform: scale(1.045);
        filter: saturate(1.08);
    }

    .btn,
    .approach-cta,
    .why-join,
    .service-more,
    .hero-action,
    .footer-cta-link,
    .footer-contact-link,
    .why-top-cta {
        transition: transform .25s ease, box-shadow .3s ease, background-color .25s ease;
    }

    .btn:hover,
    .approach-cta:hover,
    .why-join:hover,
    .service-more:hover,
    .hero-action:hover,
    .footer-cta-link:hover,
    .footer-contact-link:hover,
    .why-top-cta:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px #082d4630;
    }

    .footer-grid li a {
        transition: color .2s ease, padding-left .25s ease;
    }

    .footer-grid li a:hover {
        padding-left: 4px;
    }
}

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

    .about-pillar,
    .why-card,
    .service-card,
    .principle-card,
    .showcase-image,
    .sectors-photo,
    .about-img,
    .showcase-image img,
    .showcase-image video,
    .sectors-photo img,
    .service-card .im img,
    .principle-image img {
        transition-duration: .01ms !important;
    }
}

/* Refined product showcase cards */
.principle-card {
    border: 1px solid #dfe9ed;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 34px #082d4610;
    transition: transform .4s cubic-bezier(.2, .75, .25, 1), box-shadow .4s ease, border-color .3s ease;
}

.principle-card:hover {
    transform: translateY(-8px);
    border-color: #8adce8;
    box-shadow: 0 24px 52px #087fa823;
}

.principle-card.featured {
    border: 1px solid #05afd0;
    box-shadow: 0 18px 42px #05afd01f;
}

.principle-image {
    height: clamp(230px, 24vw, 310px);
    padding: 1rem;
    background: #fff;
}

.principle-image:after {
    display: none;
}

.principle-image img {
    width: 100%;
    height: 100%;
    padding: .8rem;
    border: 1px solid #edf2f4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 20px #082d460d;
}

.principle-card:hover .principle-image img {
    transform: scale(1.035);
}

.principle-link,
.principle-card.featured .principle-link {
    right: 1.5rem;
    bottom: 1.5rem;
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #05afd0, #087fa8);
    color: #fff;
    box-shadow: 0 8px 20px #087fa83b;
}

.principle-body {
    min-height: 158px;
    padding: 1.2rem 1.15rem 1.35rem;
    background: linear-gradient(180deg, #fff, #fbfdfe);
}

.principle-icon {
    width: 46px;
    height: 46px;
    padding: .65rem;
    border-radius: 50%;
    background: #e9f9fb;
}

@media(max-width:650px) {
    .principle-image {
        height: 260px;
    }
}

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

    .principle-card,
    .principle-image img {
        transition: none;
    }
}

/* Applications section styled to match the supplied reference. */
.benefits-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 4.8rem 0 4.4rem;
    background: #031a2d;
    color: #eaf6ff;
}

.benefits-section::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    height: 470px;
    pointer-events: none;
    background:
        linear-gradient(90deg, #031a2d 0%, #031a2df5 29%, #031a2d9c 51%, #031a2d12 100%),
        linear-gradient(0deg, #031a2d 0%, transparent 38%),
        url("images/hero-lab-2.png") right 42% / cover no-repeat;
}

.benefits-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 365px 0 0;
    pointer-events: none;
    opacity: .42;
    background-image: radial-gradient(#10bce6 1px, transparent 1.5px);
    background-size: 17px 17px;
    mask-image: linear-gradient(transparent, #000 26%, transparent 92%);
    animation: applicationsDotsFlow 2.4s linear infinite;
}

@keyframes applicationsDotsFlow {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 17px;
    }
}

.journey-wrap {
    position: relative;
    z-index: 1;
    width: min(1440px, 94%);
    max-width: 1440px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: center;
    column-gap: 2rem;
}

.journey-intro {
    grid-column: 1;
    max-width: 760px;
    min-height: 355px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.journey-tag {
    align-self: flex-start;
    padding: .4rem .9rem;
    border: 1px solid #08d8f4;
    border-radius: 999px;
    background: #06324a;
    color: #eafaff;
    font-size: .78rem;
    letter-spacing: .08em;
}

.journey-intro h2 {
    margin: 1rem 0 .9rem;
    color: #f4f8ff;
    font: 700 clamp(2.7rem, 4.1vw, 4.1rem)/1.02 Georgia, serif;
    letter-spacing: -.045em;
}

.journey-intro h2 em {
    color: #09c7ef;
    font-style: normal;
}

.journey-intro p {
    max-width: 54ch;
    color: #c1d4e5;
    font-size: 1rem;
    line-height: 1.55;
}

.journey-steps {
    grid-column: 1 / -1;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(3rem, 7vw, 7rem);
    width: min(1400px, 100%);
    max-width: 1400px;
    height: auto;
    min-height: 0;
    margin: 1.2rem auto 0;
}

.journey-path {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: -30px;
    height: 100px;
    z-index: 0;
    opacity: .9;
}

.journey-path path {
    fill: none;
    stroke: #77e9ff;
    stroke-width: 3.2;
    stroke-dasharray: 1 8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px #03bfe8);
}

.journey-step,
.journey-step.step-one,
.journey-step.step-two,
.journey-step.step-three {
    position: relative;
    inset: auto;
    z-index: 1;
    width: auto;
    min-width: 0;
    overflow: visible;
    padding: 0 0 1.25rem;
    border: 1px solid #08bde5;
    border-radius: 22px;
    background: linear-gradient(155deg, #082c47f2, #031e35f5);
    box-shadow: 0 16px 36px #00101f66, inset 0 1px #ffffff14;
    text-align: left;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.journey-step:hover {
    z-index: 2;
    transform: translateY(-6px);
    border-color: #27e1ff;
    box-shadow: 0 22px 46px #00bfe933, 0 0 20px #00c8ed22;
}

.journey-photo {
    width: auto;
    height: clamp(140px, 15vw, 180px);
    margin: 0 0 1.15rem;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 21px 21px 12px 12px;
    background: transparent;
    box-shadow: none;
}

.journey-photo:before {
    display: none;
}

.journey-photo-clip {
    border-radius: 21px 21px 12px 12px;
}

.journey-photo img {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: inherit;
    object-fit: cover;
    background: #092a43;
}

.journey-photo>span:not(.journey-photo-clip) {
    left: 1rem;
    top: -22px;
    bottom: auto;
    width: 64px;
    height: 64px;
    transform: none;
    border: 5px solid #08caee;
    outline: 3px solid #65dff7a6;
    background: #073957;
    color: #fff;
    font: 700 1.35rem Manrope, sans-serif;
    box-shadow: 0 0 20px #00c8ef66;
}

.journey-step h3 {
    margin: 0 1.1rem .55rem;
    color: #f2f8ff;
    font: 700 clamp(1.1rem, 1.6vw, 1.42rem)/1.15 Georgia, serif;
}

.journey-step p {
    max-width: none;
    margin: 0 1.1rem;
    color: #c4d7e8;
    font-size: .91rem;
    line-height: 1.48;
}

.journey-details {
    margin: .75rem 1.1rem 0;
    color: #c4d7e8;
}

.journey-details summary {
    width: fit-content;
    cursor: pointer;
    color: #22d5f4;
    font: 600 .78rem Manrope, sans-serif;
}

.journey-details summary::marker {
    color: #22d5f4;
}

.journey-details p {
    margin: .55rem 0 0;
    color: #c4d7e8;
    font-size: .84rem;
    line-height: 1.5;
}

@media(max-width:900px) {
    .journey-path {
        display: none;
    }

    .benefits-section::before {
        height: 440px;
        background-position: right center;
    }

    .journey-wrap {
        grid-template-columns: 1fr;
    }

    .journey-intro {
        min-height: 330px;
    }

    .journey-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .journey-step.step-three {
        grid-column: 1 / -1;
    }

    .journey-photo {
        height: 170px;
    }
}

@media(max-width:650px) {
    .benefits-section {
        padding: 3.7rem 0 3rem;
    }

    .benefits-section::before {
        height: 380px;
        background-image:
            linear-gradient(90deg, #031a2df2, #031a2d8c),
            linear-gradient(0deg, #031a2d 0%, transparent 55%),
            url("images/hero-lab-2.png");
        background-position: 58% center;
    }

    .journey-intro {
        min-height: 340px;
    }

    .journey-intro h2 {
        font-size: clamp(2.6rem, 11vw, 3.4rem);
    }

    .journey-intro p {
        font-size: .93rem;
    }

    .journey-steps {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        margin-top: .6rem;
    }

    .journey-step.step-three {
        grid-column: auto;
    }

    .journey-path {
        display: none;
    }

    .journey-photo {
        height: 160px;
    }

    .journey-step h3 {
        font-size: 1.28rem;
    }
}

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

    .journey-step,
    .journey-photo img {
        transition: none;
    }

    .journey-step:hover {
        transform: none;
    }
}

.benefits-section .journey-step .journey-photo {
    opacity: 1;
    transform: none;
    animation: none !important;
}

.benefits-section .journey-photo img,
.benefits-section .journey-photo:hover img {
    cursor: default;
    transform: none;
    filter: none;
    box-shadow: none;
    transition: none;
}

@media(prefers-reduced-motion:reduce) {
    .benefits-section::after {
        animation: none;
    }
}

@media(max-width:760px) {
    .sectors-content {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .sectors-list a {
        min-height: 54px;
    }

    .sectors-photo,
    .sectors-photo img {
        min-height: 280px;
    }
}

/* Let the about photo match the height of its text column on wider screens. */
@media(min-width:651px) {
    .about-overview {
        align-items: stretch;
    }

    .about-visual {
        display: flex;
        flex-direction: column;
    }

    .about-img {
        flex: 1 1 auto;
        height: auto;
        min-height: 270px;
    }
}

@media(max-width:850px) {
    .about-copy .about-lead {
        font-size: 1rem;
    }
}

@media(max-width:650px) {
    .about-overview {
        align-items: initial;
    }

    .about-visual {
        display: block;
    }

    .about-img {
        flex: none;
        height: 220px;
        min-height: 0;
    }
}

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

    .about-copy .about-link,
    .about-copy .about-link::before,
    .about-copy .about-link span {
        transition: none;
    }
}

@media(max-width:480px) {
    .sectors-wrap {
        width: 90%;
    }

    .sectors-heading h2 br {
        display: none;
    }

    .sectors-photo,
    .sectors-photo img {
        min-height: 230px;
    }
}

/* Keep application cards aligned and the same height within each row. */
.benefits-section .journey-steps {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.benefits-section .journey-step,
.benefits-section .journey-step.step-one,
.benefits-section .journey-step.step-two,
.benefits-section .journey-step.step-three {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 360px;
    transform: none;
    transition: box-shadow .3s ease, border-color .3s ease;
}

.benefits-section .journey-step.rv,
.benefits-section .journey-step.rv.in {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

.benefits-section .journey-step:hover {
    transform: none;
}

.benefits-section .journey-step .journey-photo {
    flex: 0 0 clamp(140px, 15vw, 180px);
    position: relative;
    cursor: pointer;
}

.benefits-section .journey-image-overlay {
    position: absolute;
    top: 180px;
    right: .45rem;
    bottom: .5rem;
    left: .45rem;
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .7rem .75rem;
    overflow: hidden;
    border: 1px solid #08bde5;
    border-radius: 16px;
    background: #031a2df2;
    color: #f4f8ff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 14px 30px #00101f99;
    transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
    transform: translateY(-8px);
}

.benefits-section .journey-step.image-content-open .journey-image-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.benefits-section .journey-step.image-content-open {
    z-index: 10;
}

.benefits-section .journey-details {
    display: none;
}

.benefits-section .journey-step>h3,
.benefits-section .journey-step>p {
    visibility: visible;
}

.benefits-section .journey-step.image-content-open>h3,
.benefits-section .journey-step.image-content-open>p {
    visibility: hidden;
}

.benefits-section .journey-step .journey-photo::after {
    content: "Click image for full details";
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 3;
    padding: .35rem .55rem;
    border: 1px solid #35d7f2;
    border-radius: 999px;
    background: #031a2de8;
    color: #f4f8ff;
    font: 600 .68rem Manrope, sans-serif;
}

.benefits-section .journey-step.image-content-open .journey-photo::after {
    content: "Click to close details";
}

.benefits-section .journey-image-overlay h3 {
    min-height: 0;
    margin: 0 1.7rem .1rem 0;
    color: #f4f8ff;
    font: 700 .93rem/1.15 Georgia, serif;
}

.benefits-section .journey-image-overlay p {
    margin: 0;
    color: #d2e3f0;
    font-size: .72rem;
    line-height: 1.32;
}

.benefits-section .journey-overlay-close {
    position: absolute;
    top: .65rem;
    right: .65rem;
    align-self: flex-end;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: 0;
    border: 1px solid #37d8f4;
    border-radius: 50%;
    background: #087da2;
    color: white;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.benefits-section .journey-image-overlay h3 {
    padding-right: 1.5rem;
}

.benefits-section .journey-step h3 {
    min-height: 2.3em;
}

@media(max-width:900px) {
    .benefits-section .journey-step .journey-photo {
        flex-basis: 170px;
    }

    .benefits-section .journey-image-overlay {
        top: 170px;
    }
}

@media(max-width:650px) {
    .benefits-section .journey-step {
        min-height: 0;
    }

    .benefits-section .journey-step .journey-photo {
        flex-basis: 160px;
    }

    .benefits-section .journey-image-overlay {
        top: 160px;
    }

    .benefits-section .journey-step h3 {
        min-height: 0;
    }

}

@media(prefers-reduced-motion:reduce) {
    .benefits-section .journey-image-overlay {
        transition: none;
    }
}

/* Add a soft light sweep and lively icon response to the Why Crown cards. */
.why-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid #cfe5ec;
    transition: transform .35s cubic-bezier(.2, .75, .25, 1),
        box-shadow .35s ease, border-color .35s ease,
        background-color .35s ease;
}

.why-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 22%, #ffffff55 48%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s cubic-bezier(.2, .75, .25, 1);
}

.why-card>* {
    position: relative;
    z-index: 1;
}

.why-card:hover {
    transform: translateY(-7px);
    border-color: #52c9df;
    box-shadow: 0 18px 38px #087fa825, 0 0 0 3px #05afd014;
}

.why-card:hover::after {
    transform: translateX(120%);
}

.why-card>svg {
    transform-origin: center;
    transition: transform .4s cubic-bezier(.2, .75, .25, 1), filter .4s ease;
}

.why-card:hover>svg {
    transform: translateY(-3px) rotate(-8deg) scale(1.12);
    filter: drop-shadow(0 3px 7px #05afd055);
}

.why-join span {
    transition: transform .3s ease, background-color .3s ease;
}

.why-join:hover span {
    transform: translate(2px, -2px) rotate(45deg);
}

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

    .why-card,
    .why-card::after,
    .why-card>svg,
    .why-join span {
        transition: none !important;
    }

    .why-card:hover {
        transform: none;
    }
}

/* Modern checklist rows in the product selection section. */
.sectors-list {
    gap: .7rem;
    counter-reset: selection-item;
}

.sectors-list li {
    counter-increment: selection-item;
    border: 0;
}

.sectors-list a {
    position: relative;
    min-height: 74px;
    padding: .9rem 1rem .9rem 4.35rem;
    border: 1px solid #dcebf0;
    border-radius: 15px;
    background: linear-gradient(110deg, #f8fcfd, #f1f8fa);
    box-shadow: 0 5px 15px #082d4608;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}

.sectors-list a::before {
    content: counter(selection-item, decimal-leading-zero);
    position: absolute;
    left: 1rem;
    top: 50%;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #b9e5ee;
    border-radius: 13px;
    background: #e6f7fa;
    color: #087fa8;
    font: 700 .78rem Manrope, sans-serif;
    transform: translateY(-50%);
    transition: color .28s ease, background .28s ease, border-color .28s ease;
}

.sectors-list a b {
    background: #fff;
    box-shadow: 0 3px 10px #087fa81a;
}

.sectors-list a:hover {
    padding-left: 4.65rem;
    border-color: #8fd9e8;
    background: #fff;
    box-shadow: 0 12px 25px #087fa815;
    transform: translateX(4px);
}

.sectors-list a:hover::before {
    border-color: #087fa8;
    background: #087fa8;
    color: #fff;
}

.selection-followup {
    margin: 1.4rem 0 0;
    padding: 1rem 1.15rem;
    border-left: 3px solid #08afd0;
    border-radius: 0 12px 12px 0;
    background: #f1f8fa;
    color: #587185;
    line-height: 1.6;
}

@media(max-width:650px) {
    .sectors-list {
        gap: .55rem;
    }

    .sectors-list a {
        min-height: 68px;
        padding: .8rem .7rem .8rem 3.7rem;
        font-size: .9rem;
    }

    .sectors-list a::before {
        left: .75rem;
        width: 36px;
        height: 36px;
    }

    .sectors-list a:hover {
        padding-left: 3.7rem;
        transform: translateX(2px);
    }
}

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

    .sectors-list a,
    .sectors-list a::before {
        transition: none;
    }

    .sectors-list a:hover {
        transform: none;
    }
}

/* Final footer polish and a full-height logo window. */
.footer-grid {
    align-items: stretch;
    gap: clamp(1.2rem, 3vw, 2.8rem);
}

.footer-grid>div:not(.footer-brand) {
    padding: .35rem 0 0;
}

.footer-grid h3 {
    position: relative;
    display: inline-block;
    margin-bottom: 1.15rem;
    padding-bottom: .65rem;
    letter-spacing: .08em;
}

.footer-grid h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 2px;
    border-radius: 2px;
    background: #10bfdc;
}

.footer-logo {
    width: 190px;
    height: 70px;
    margin-bottom: 1.15rem;
    /* border: 1px solid #ffffff25; */
    /* border-radius: 12px; */
    /* box-shadow: 0 8px 22px #00152230; */
}

.footer-logo img {
    top: -4px;
    left: -95px;
    width: 370px;
    height: 81px;
}

.footer-brand {
    align-self: start;
    padding: 1.15rem;
    border: 1px solid #ffffff16;
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff0c, #ffffff04);
}

.footer-brand p {
    max-width: 38ch;
}

.footer-grid li a {
    transition: color .2s ease, transform .2s ease, padding .2s ease;
}

.footer-grid li a:hover {
    padding-left: 5px;
    color: #72e2f1;
}

.footer-contact-link {
    border: 1px solid #ffffff30;
    background: #0c4967;
    color: #fff;
}

.footer-contact-link:hover {
    background: #087fa8;
    color: #fff;
}

.site-footer .copy {
    margin-top: 1.5rem;
}

/* Give the footer enquiry callout its own light, clearly separated panel. */
.footer-cta {
    position: relative;
    margin: 0 0 3rem;
    padding: clamp(1.6rem, 3.5vw, 3rem);
    border: 1px solid #bfe8f0;
    border-radius: 24px;
    background: linear-gradient(115deg, #f3fbfd 0%, #e5f6fa 58%, #d8f0f6 100%);
    box-shadow: 0 18px 42px #00152242;
}

.footer-eyebrow {
    color: #087fa8;
}

.footer-cta h2 {
    color: #082d46;
}

.footer-cta p {
    color: #4c687b;
}

.footer-cta-link {
    border: 1px solid #c2e9f0;
    background: #087fa8;
    color: #fff;
    box-shadow: 0 8px 20px #087fa827;
}

.footer-cta-link span {
    background: #13b8d7;
}

.footer-cta-link:hover {
    background: #066d91;
    color: #fff;
}

/* Lighten the complete footer area, keeping the enquiry panel distinct. */
.footer-cta-section {
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #eaf4f7;
}

.footer-cta-section .footer-cta {
    margin: 0;
}

footer.site-footer {
    border-top-color: #cce6ed;
    background:
        radial-gradient(ellipse at 88% 5%, #d8f0f6 0%, transparent 38%),
        linear-gradient(180deg, #f4fafc, #eaf4f7);
    color: #12334a;
}

.footer-brand {
    /* border-color: #d6e8ed; */
    /* background: linear-gradient(145deg, #ffffff, #f5fbfc); */
    /* box-shadow: 0 12px 30px #082d460c; */
}

.footer-grid h3 {
    color: #082d46;
}

.footer-grid li,
.footer-grid li a {
    color: #567185;
}

.footer-grid li a:hover {
    color: #087fa8;
}

.footer-brand p,
.footer-contact-copy {
    color: #567185;
}

.footer-since {
    color: #087fa8;
}

.site-footer .copy {
    border-top-color: #cbdfe5;
    color: #698092;
}

.site-footer .copy a {
    color: #567185;
}

.site-footer .copy a:hover {
    color: #087fa8;
}

.site-footer .copy i {
    background: #08afd0;
}

.footer-three-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: .3;
    pointer-events: none;
}

@media(max-width:560px) {
    .footer-logo {
        width: 190px;
        height: 70px;
    }

    .footer-brand {
        padding: 1rem;
    }

    .footer-cta {
        border-radius: 18px;
    }
}