/* The introduction is deliberately manual: every slide waits for the reader. */
.gallery { position: relative; color: #fff; background: #0f3e66; overflow: hidden; }
.gallery::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 40%, #2b6481aa, transparent 65%), linear-gradient(115deg, #0d365a, #174e75); pointer-events: none; }
.gallery-viewport { position: relative; display: grid; }
.gallery-slide { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: opacity .45s ease, visibility .45s; pointer-events: none; }
.gallery-slide.active { visibility: visible; opacity: 1; pointer-events: auto; }
.gallery-layout { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; min-height: 600px; gap: 60px; padding-block: 55px 85px; }
.gallery-copy { position: relative; z-index: 2; padding-bottom: 10px; }
.gallery-copy .eyebrow { color: #c4dfec; font-size: 10px; letter-spacing: .18em; display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.gallery-copy .eyebrow > span { height: 6px; width: 6px; border-radius: 50%; background: #c5e5dd; box-shadow: 0 0 0 5px #c5e5dd12; }
.gallery-title { color: #fff; font: 400 clamp(43px, 4.3vw, 64px)/1.07 var(--serif); letter-spacing: -.04em; max-width: 630px; margin: 0 0 28px; text-wrap: balance; }
.gallery-description { color: #d6e6ef; font-size: 16px; max-width: 470px; line-height: 1.8; margin-bottom: 30px; }
.gallery-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.hero-text-link { font-size: 12px; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 16px; min-height: 44px; border-bottom: 1px solid #ffffff4a; }
.hero-text-link:hover { border-color: #c5e5dd; color: #c5e5dd; }
.gallery-art { position: relative; min-width: 0; width: 100%; aspect-ratio: 1; max-width: 470px; justify-self: end; display: grid; place-items: center; isolation: isolate; }
.gallery-art::before { content: ''; position: absolute; width: 73%; height: 86%; background: linear-gradient(145deg, #d2e7e3, #a9c9cf); border-radius: 48% 48% 4% 4%; top: 3%; transform: rotate(9deg); box-shadow: 30px 25px 65px #052d4c40; z-index: -1; }
.art-orbit { position: absolute; width: 98%; height: 98%; border: 1px solid #d2e7ed30; border-radius: 50%; transform: rotate(-25deg) scaleY(.78); pointer-events: none; }
.orbit-two { width: 118%; height: 118%; border-color: #d2e7ed16; }
.orbit-three { width: 76%; height: 76%; border-color: #ffffff60; transform: rotate(20deg) scaleY(.95); }
.art-disc { width: 63%; aspect-ratio: 1; border-radius: 50%; background: #f7fbf8; border: 1px solid #fff; box-shadow: 0 12px 35px #15496a20, 0 0 0 18px #ffffff14; display: grid; place-items: center; }
.art-disc img { width: 88%; height: auto; }
.art-dot { position: absolute; width: 9px; height: 9px; background: #c5e5dd; border: 2px solid #e7f5f1; border-radius: 50%; }
.dot-one { top: 10%; left: 8%; }
.dot-two { bottom: 17%; right: 7%; width: 6px; height: 6px; }
.art-label { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 12px; background: #f7fbfa; border: 1px solid #fff; border-radius: 5px; padding: 14px 19px; color: #163d57; font: 500 12px/1.5 var(--sans); box-shadow: 0 12px 25px #052d4c15; }
.art-label-top { left: -3%; top: 21%; transform: rotate(-5deg); }
.art-label-bottom { right: -2%; bottom: 16%; transform: rotate(4deg); }
.art-label-bottom > span { font-size: 20px; color: var(--blue-dark); }
.art-label-dot { width: 7px; height: 7px; border-radius: 50%; background: #368575; box-shadow: 0 0 0 5px #3685750d; }
.art-caption { position: absolute; bottom: -4%; font: 500 8px/1.6 var(--sans); letter-spacing: .22em; color: #bfd7e4; text-align: center; }
.gallery-bottom { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ffffff26; min-height: 70px; }
.gallery-note { margin: 0; color: #bdd4e3; font-size: 11px; letter-spacing: .05em; }
.gallery-controls { display: flex; align-items: center; gap: 18px; }
.gallery-arrow { display: grid; place-items: center; border: 1px solid #8bafc7; border-radius: 50%; background: transparent; color: #fff; width: 38px; height: 38px; font-size: 18px; line-height: 1; transition: background .2s; }
.gallery-arrow:hover { background: #ffffff18; }
.gallery-count { font: 12px var(--sans); font-variant-numeric: tabular-nums; color: #fff; }
.gallery-count span { color: #b4cfdf; margin-left: 4px; }
.gallery-dots { display: flex; align-items: center; gap: 2px; }
.gallery-dot { display: grid; place-items: center; width: 28px; height: 38px; padding: 0; background: none; border: 0; }
.gallery-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #87a8be; transition: width .2s, background .2s; }
.gallery-dot.active::after { background: #c5e5dd; width: 18px; border-radius: 3px; }
/* Without scripting, all copy remains available and controls stay out of the way. */
body:not(.js-ready) .gallery-slide { grid-area: auto; visibility: visible; opacity: 1; pointer-events: auto; }
body:not(.js-ready) .gallery-bottom { display: none; }
body:not(.js-ready) .gallery-slide + .gallery-slide { border-top: 1px solid #ffffff30; }
body:not(.js-ready) .menu-toggle { display: none; }
@media (max-width: 1150px) {
    .gallery-layout { gap: 35px; min-height: 570px; }
    .gallery-title { font-size: clamp(40px, 4.7vw, 55px); }
    .gallery-description { font-size: 15px; }
    .art-label { font-size: 11px; padding: 11px 14px; }
    .art-label-top { left: -6%; }
    .art-label-bottom { right: -3%; }
}
@media (max-width: 850px) {
    .gallery-layout { grid-template-columns: 1.2fr .8fr; gap: 24px; min-height: 550px; padding-block: 45px 100px; }
    .gallery-title { font-size: 44px; }
    .gallery-description { font-size: 14px; }
    .gallery-actions { gap: 15px; }
    .gallery-actions .button { padding: 12px 17px; font-size: 12px; gap: 15px; }
    .art-label { font-size: 9px; padding: 9px 11px; gap: 8px; }
    .art-caption { font-size: 7px; letter-spacing: .12em; bottom: -10%; }
}
@media (max-width: 620px) {
    .gallery-layout { grid-template-columns: 1fr; gap: 16px; min-height: 0; padding-block: 40px 95px; }
    .gallery-copy { padding-bottom: 0; }
    .gallery-copy .eyebrow { font-size: 9px; letter-spacing: .12em; margin-bottom: 25px; }
    .gallery-title { font-size: clamp(38px, 9.7vw, 56px); margin-bottom: 22px; max-width: 510px; }
    .gallery-description { font-size: 14px; line-height: 1.75; max-width: 480px; margin-bottom: 22px; }
    .gallery-actions { gap: 18px; }
    .gallery-actions .button { min-height: 48px; padding-inline: 17px; }
    .hero-text-link { font-size: 11px; gap: 8px; }
    .gallery-art { width: min(80%, 290px); margin: 12px auto 0; justify-self: center; }
    .art-label { font-size: 10px; padding: 10px 12px; }
    .art-label-top { left: -10%; }
    .art-label-bottom { right: -10%; bottom: 14%; }
    .art-caption { bottom: -8%; }
    .gallery-bottom { min-height: 65px; }
    .gallery-note { font-size: 9px; max-width: 100px; letter-spacing: 0; }
    .gallery-controls { gap: 10px; }
    .gallery-arrow { width: 36px; height: 36px; }
    .gallery-count { font-size: 10px; }
    .gallery-dots { gap: 0; }
    .gallery-dot { width: 23px; }
}
@media (prefers-reduced-motion: reduce) { .gallery-slide { transition: none; } }