@font-face {
    font-family: "Montserrat";
    src: url("https://res.cloudinary.com/qedze54q/raw/upload/v1790153384/montserrat-v31-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("https://res.cloudinary.com/qedze54q/raw/upload/v1790153384/montserrat-v31-latin-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("https://res.cloudinary.com/qedze54q/raw/upload/v1790153384/montserrat-v31-latin-600italic.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif SC";
    src: url("https://res.cloudinary.com/qedze54q/raw/upload/v1790153388/noto-serif-sc-v35-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif SC";
    src: url("https://res.cloudinary.com/qedze54q/raw/upload/v1790153386/noto-serif-sc-v35-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Caveat";
    src: url("https://res.cloudinary.com/qedze54q/raw/upload/v1790153387/caveat-v23-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}



/* ---------- 1. Global ---------- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #11110f;
    color: #11110f;
    font-family: "Montserrat", Arial, "Microsoft YaHei", sans-serif;
}

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

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

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

figure,
blockquote,
p,
h1,
h2,
h3 {
    margin: 0;
}

button {
    font: inherit;
}

.page {
    width: 100%;
    max-width: 1257px;
    margin: 0 auto;
    overflow: hidden;
    background: #e9e6df;
}

.section-light {
    background: #e9e6df;
    color: #11110f;
}

.section-dark {
    background: #121211;
    color: #eeeae1;
}

.eyebrow {
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 1.5px;
}

.accent {
    color: #c23d33;
}

.section-title {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-top: 19px;
}

.section-title h2 {
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    font-size: 138px;
    line-height: 130px;
    font-weight: 900;
    letter-spacing: 5px;
}

.section-title small {
    padding-bottom: 35px;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.section-title--accent {
    color: #c23d33;
}

.section-intro {
    padding-top: 31px;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 19px;
    line-height: 37px;
    letter-spacing: .85px;
}

.section-intro-en {
    display: block;
    padding-top: 10px;
    font-size: 10px;
    line-height: 17px;
    letter-spacing: .8px;
    opacity: .65;
}

.site-header {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 50%;
    width: min(100%, 1257px);
    height: 70px;
    padding: 0 50px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.site-logo {
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.site-logo__cn {
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2.7px;
}

.site-logo__en {
    font-size: 9px;
    letter-spacing: .99px;
}

.site-nav__list {
    display: flex;
    gap: 28px;
}

.site-nav__item a {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1.68px;
}

.site-nav__item small {
    margin-left: 5px;
    font-size: 8px;
    letter-spacing: .88px;
    opacity: .6;
}

.hero {
    position: relative;
    height: 815px;
    background: #111;
    color: #f4f0e9;
}

.hero__image {
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    height: 815px;
    overflow: hidden;
}

.hero__image img {
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #111 0%, rgba(17, 17, 16, .76) 32%, rgba(17, 17, 16, .10) 75%);
}

.hero__content {
    position: absolute;
    z-index: 2;
    top: 154px;
    left: 97px;
    width: 760px;
}

.hero h1 {
    padding-top: 32px;
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    font-size: 138px;
    line-height: 101px;
    font-weight: 900;
    letter-spacing: -2px;
}

.hero h1 span {
    display: block;
    padding-top: 35px;
    color: #a82f28;
    line-height: 143px;
}

.hero__lead {
    padding-top: 29px;
    color: #d8d4cd;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 19px;
    line-height: 32px;
    letter-spacing: .85px;
}

.hero__lead-en {
    display: block;
    padding-top: 10px;
    color: #d8d4cd;
    font-size: 10px;
    line-height: 17px;
    letter-spacing: .8px;
    opacity: .65;
}

.walk-button {
    display: flex;
    align-items: center;
    gap: 15px;
    width: max-content;
    margin-top: 55px;
}

.walk-button__footprints {
    position: relative;
    width: 21px;
    height: 38px;
}

.walk-button__footprints i {
    position: absolute;
    width: 10px;
    height: 15px;
    background: #a82f28;
    border-radius: 50%;
}

.walk-button__footprints i:first-child {
    top: 0;
    left: 0;
    transform: rotate(26deg);
}

.walk-button__footprints i:last-child {
    right: 0;
    bottom: 0;
    transform: rotate(-17deg);
}

.walk-button__text {
    font-size: 14px;
    letter-spacing: 1.4px;
}

.walk-button__text small {
    display: block;
    padding-top: 4px;
    font-size: 9px;
    letter-spacing: 1.17px;
    opacity: .56;
}

.walk-button__arrow {
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, .48);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.hero__scroll {
    position: absolute;
    bottom: 30px;
    left: 50px;
    font-size: 9px;
    letter-spacing: .9px;
}

/* ---------- 4. Passing ---------- */
.passing {
    position: relative;
    height: 3153px;
    padding: 120px 100px 120px 97px;
}

.passing__header {
    width: 983px;
}

.passing__axis {
    position: absolute;
    top: 455px;
    left: 641px;
    height: 2575px;
    border-left: 1px dashed #aaa69d;
}

.passing__note {
    position: absolute;
    left: 97px;
    width: 233px;
    color: #2a2a2a;
}

.passing__note p {
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    font-size: 16.48px;
    line-height: 28.35px;
    letter-spacing: .41px;
}

.passing__note small {
    display: block;
    padding-top: 15px;
    font-size: 9.44px;
    line-height: 14.16px;
    letter-spacing: .94px;
    opacity: .7;
}

.passing__note--one {
    top: 720px;
}

.passing__note--two {
    top: 1770px;
}

.photo-story {
    position: absolute;
}

.photo-story figure {
    position: relative;
}

.photo-story__image {
    overflow: hidden;
    background: #161615;
    box-shadow: 0 13px 26px rgba(20, 20, 18, .16);
}

.photo-story__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.photo-story--one {
    top: 521px;
    left: 454px;
    width: 701px;
}

.photo-story--one .photo-story__image {
    height: 442px;
}

.photo-story--two {
    top: 1153px;
    left: 189px;
    width: 810px;
}

.photo-story--two .photo-story__image {
    height: 462px;
}

.photo-story--three {
    top: 1815px;
    left: 416px;
    width: 739px;
}

.photo-story--three .photo-story__image {
    height: 454px;
}

.photo-story--four {
    top: 2482px;
    left: 189px;
    width: 758px;
}

.photo-story--four .photo-story__image {
    height: 413px;
}

.photo-card {
    position: absolute;
    z-index: 2;
    width: 195px;
    padding: 18px 19px 17px;
    background: #f1ece1;
    color: #181714;
    box-shadow: 7px 8px rgba(73, 68, 58, .12);
}

.photo-card small {
    color: #8b2821;
    font-size: 9px;
    line-height: 12px;
    letter-spacing: 1.08px;
}

.photo-card h3 {
    padding-top: 13px;
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    font-size: 24px;
    line-height: 30px;
}

.photo-card p {
    padding-top: 7px;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 24.5px;
}

.photo-card--left {
    top: 52px;
    left: -106px;
    width: 176px;
}

.photo-card--right-top {
    top: -65px;
    right: -85px;
    width: 172px;
}

.photo-card--left-bottom {
    left: -68px;
    bottom: 55px;
}

.photo-card--right-bottom {
    right: -137px;
    bottom: -72px;
}

.frame-link {
    display: grid;
    grid-template-columns: 55px 16px;
    width: 98px;
    min-height: 31px;
    padding: 5px 7px 5px 10px;
    border: 1px solid rgba(242, 238, 231, .58);
    background: rgba(17, 17, 15, .82);
    color: #f2eee7;
    font-size: 10px;
    line-height: 10px;
    opacity: .76;
}

.frame-link small {
    grid-column: 1;
    padding-top: 2px;
    font-size: 7px;
    line-height: 7px;
    letter-spacing: .91px;
}

.frame-link span {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 15px;
}

.staying {
    position: relative;
    height: 1207px;
    padding-top: 120px;
}

.staying__header {
    position: absolute;
    z-index: 2;
    top: 120px;
    left: 97px;
    width: 302px;
}

.staying .section-title h2 {
    font-size: 126px;
    line-height: 118px;
    letter-spacing: -4px;
}

.staying__photo {
    position: absolute;
    top: 220px;
    left: 310px;
    width: 637px;
    height: 382px;
}

.staying__photo .photo-reveal,
.staying__photo img {
    width: 100%;
    height: 100%;
}

.recordings {
    position: absolute;
    top: 712px;
    left: 0;
    width: 100%;
}

.recordings__header {
    display: flex;
    justify-content: space-between;
    padding: 0 97px 41px;
}

.recordings__header h3 {
    color: #c23d33;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.5px;
}

.recordings__header p {
    color: #bbb5a8;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    letter-spacing: .45px;
}

.recordings__list {
    display: flex;
    gap: 88px;
    padding: 0 126px;
}

.recordings__list li {
    width: 277px;
}

.recording {
    min-height: 208px;
    padding-top: 21px;
    border-top: 1px solid rgba(235, 230, 219, .37);
}

.recording blockquote {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 21px;
    line-height: 32.5px;
    letter-spacing: .42px;
}

.recording cite {
    display: block;
    padding-top: 23px;
    color: #a8a399;
    font-size: 9px;
    font-style: normal;
    letter-spacing: .9px;
}

.audio-button {
    display: grid;
    grid-template-columns: 27px 1fr 54px;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 22px;
    padding: 11px 0;
    border: 1px solid rgba(236, 231, 219, .35);
    border-right: 0;
    border-left: 0;
    background: transparent;
    color: #eeebe2;
    cursor: pointer;
}

.audio-button > span {
    width: 25px;
    height: 25px;
    border: 1px solid rgba(238, 235, 226, .8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.audio-button i {
    height: 22px;
    background: repeating-linear-gradient(90deg, #d8d2c6 0 1px, transparent 1px 8px);
    opacity: .8;
}

.audio-button small {
    color: #aaa69d;
    font-size: 8px;
}

.street-quotes {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 96px;
    padding: 25px 0 30px;
    overflow: hidden;
    border-top: 1px solid rgba(235, 230, 219, .2);
    border-bottom: 1px solid rgba(235, 230, 219, .2);
}

.street-quotes__track {
    display: flex;
    align-items: center;
    gap: 29px;
    width: max-content;
    white-space: nowrap;

}

.street-quotes__track span {
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    font-size: 35px;
    line-height: 39px;
}

.street-quotes__track span small {
    color: #918c82;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 16px;
}

.street-quotes__track b {
    color: #c23d33;
    font-size: 24px;
}

.seeing {
    height: 1318px;
    padding-top: 120px;
}

.seeing__header {
    display: flex;
    align-items: flex-start;
    height: 525px;
    padding-left: 97px;
}

.seeing__header > .eyebrow {
    width: 251px;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 17px;
    line-height: 32px;
    letter-spacing: .42px;
}

.seeing__title-group {
    width: 420px;
}

.seeing__title-group h2 {
    width: 161px;
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    font-size: 138px;
    line-height: 139px;
    font-weight: 900;
    letter-spacing: -7.6px;
}

.seeing__title-group > small {
    display: block;
    padding-top: 18px;
    font-size: 10px;
    letter-spacing: 1.2px;
    opacity: .65;
}

.seeing__title-group > p {
    padding-top: 18px;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 17px;
    line-height: 32.3px;
    letter-spacing: .42px;
}

.seeing__viewport {
    width: 100%;
    height: 575px;
    padding-left: 97px;
    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;
    scrollbar-color: #8c887f transparent;
}

.seeing__list {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    width: max-content;
    min-width: 100%;
}

.seeing__item {
    flex: 0 0 364.5px;
    width: 364.5px;
}

.seeing__item--low {
    padding-top: 72px;
}

.seeing__item--mid {
    padding-top: 25px;
}

.seeing__item figure {
    width: 100%;
}

.photo-reveal {
    height: 480px;
    overflow: hidden;
    background: #161615;
}

.photo-reveal img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.seeing__item figcaption {
    height: 33px;
    padding-top: 10px;
    font-size: 11px;
    letter-spacing: .88px;
}

.crop-baby img {
    object-position: 35% center;
}

.crop-children img {
    object-position: 70% center;
}

.crop-shoulder img {
    object-position: center top;
}

.crop-worker img {
    object-position: 35% center;
}

.trace {
    position: relative;
    height: 800px;
}

.trace__copy {
    position: absolute;
    top: 141px;
    left: 97px;
    width: 438px;
}

.trace__note {
    width: 384px;
    margin-top: 2px;
    color: #c7c1b5;
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    font-size: 16.48px;
    line-height: 28.35px;
    letter-spacing: .41px;
}

.trace__note-en {
    display: block;
    width: 384px;
    padding-top: 9px;
    color: #c7c1b5;
    font-size: 9.44px;
    line-height: 14px;
    letter-spacing: .94px;
    opacity: .7;
}

.route-map {
    position: absolute;
    top: 140px;
    left: 723px;
    width: 432px;
    height: 520px;
    overflow: hidden;
    border: 1px solid #64615c;
    background: #161615;
}

.route-map__vectors {
    position: absolute;
    inset: 0;
}

.vector {
    position: absolute;
    width: auto;
    height: auto;
}

/* 原始 SVG 按 Figma 路线图比例定位 */
.vector--0 { left: 55.29%; top: 22.48%; width: 4.71%; height: 55.16%; }
.vector--1 { left: 54.57%; top: 22.36%; width: 4.57%; height: 55.40%; }
.vector--2 { left: 58.71%; top: 28.64%; width: 34.72%; height: 1.90%; }
.vector--3 { left: 5.86%;  top: 42.60%; width: 52.57%; height: 8.47%; }
.vector--4 { left: 58%;    top: 55.34%; width: 36%;    height: .80%; }
.vector--5 { left: 5.57%;  top: 62.34%; width: 51.72%; height: 10.32%; }
.vector--6 { left: 29.86%; top: 26.27%; width: 5.57%;  height: 14.24%; }
.vector--7 { left: 75.14%; top: 31.61%; width: 5%;     height: 15.66%; }
.vector--8  { left: 35.29%; top: 63.17%; width: 4.57%;  height: 14.12%; }
.vector--9  { left: 76.62%; top: 53.46%; width: 6.02%;  height: 17.88%; }
.vector--10 { left: 53.47%; top: 23.08%; width: 7.41%;  height: 47.31%; }

.route-map__direction {
    position: absolute;
    z-index: 4;
    left: 14px;
    padding: 5px 7px;
    background: rgba(17, 17, 15, .7);
    color: #eeebe4;
    font-size: 10px;
    letter-spacing: 1px;
}

.route-map__direction--north {
    top: 10px;
}

.route-map__direction--south {
    bottom: 10px;
}

.route-map__street {
    position: absolute;
    z-index: 3;
    color: #afaaa0;
    font-size: 7.4px;
}

.route-map__street--chaozong { top: 48.2%; left: 62%; color: #e4dfd5; }
.route-map__street--beizheng { top: 28.2%; left: 68.9%; }
.route-map__street--liansheng { top: 40.8%; left: 20.7%; }
.route-map__street--shuidao   { top: 52.9%; left: 71%; }
.route-map__street--sangui    { top: 61.5%; left: 18.3%; }

.route-point {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    color: #f2eee6;
    white-space: nowrap;
}

.route-point span {
    width: 37px;
    height: 37px;
    border: 1px solid #817c72;
    border-radius: 50%;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.route-point b {
    margin-left: 14px;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.route-point--01 { left: 331px; top: 62px; }
.route-point--02 { left: 254px; top: 140px; }
.route-point--03 { left: 228px; top: 218px; }
.route-point--04 { left: 202px; top: 290px; }
.route-point--05 { left: 250px; top: 347px; }
.route-point--06 { left: 176px; top: 394px; }
.route-point--07 { left: 103px; top: 435px; }
.route-point--08 { left: 138px; top: 321px; }

.route-map__footprints {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.route-footprint {
    position: absolute;
    width: auto;
    height: auto;
    max-width: none;

}

.route-footprint--1 { left: 58.3%; top: 53.2%; width: 14px; height: 17px; animation-delay: 0s; }
.route-footprint--2 { left: 55.0%; top: 61.7%; width: 14px; height: 17px; animation-delay: .6s; }
.route-footprint--3 { left: 52.2%; top: 69.5%; width: 16px; height: 18px; animation-delay: 1.2s; }
.route-footprint--4 { left: 58.0%; top: 75.6%; width: 16px; height: 18px; animation-delay: 1.8s; }



/* ---------- 8. About ---------- */
.about {
    position: relative;
    height: 850px;
}

.about__header {
    position: absolute;
    top: 135px;
    left: 97px;
    width: 263px;
}

.section-title--vertical {
    display: block;
}

.section-title--vertical small {
    display: block;
    padding-top: 25px;
}

.about__text {
    position: absolute;
    top: 175px;
    left: 459px;
    width: 275px;
}

.about__text > p:not(.about__concept) {
    padding-bottom: 10px;
    color: #4f4d48;
    font-size: 14px;
    line-height: 28.7px;
    letter-spacing: .56px;
}

.about__text > small {
    display: block;
    padding-bottom: 27px;
    color: #4f4d48;
    font-size: 10px;
    line-height: 17px;
    letter-spacing: .8px;
    opacity: .65;
}

.about__concept {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 19px;
    line-height: 37px;
    letter-spacing: .85px;
}

.about__photo {
    position: absolute;
    top: 175px;
    left: 776px;
    width: 379px;
}

.about__photo .photo-reveal {
    height: 510px;
}

/* ---------- 9. Footer ---------- */
.site-footer {
    min-height: 420px;
    padding: 82px 126px 34px;
    background: #11110f;
    color: #ece7dc;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 72px 154px 30px;
    column-gap: 24px;
}

.site-footer__brand span {
    display: block;
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    font-size: 50px;
    line-height: 50px;
    font-weight: 700;
    letter-spacing: 4px;
}

.site-footer__brand small {
    display: block;
    padding-top: 11px;
    color: #b7b1a5;
    font-size: 9px;
    letter-spacing: 1.62px;
}

.site-footer__sentence {
    justify-self: end;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 19px;
    line-height: 33px;
    letter-spacing: .85px;
}

.site-footer__sentence span {
    color: #c23d33;
}

.site-footer__nav {
    grid-column: 1 / -1;
    align-self: end;
    display: flex;
    gap: 24px;
    font-size: 11px;
    letter-spacing: 1.1px;
}

.site-footer__bottom {
    grid-column: 1 / -1;
    border-top: 1px solid #4b4943;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    color: #9d998f;
    font-size: 9px;
    letter-spacing: .9px;
}

/* =========================================================
   10. Responsive Design
   课堂方式：使用 @media，根据屏幕宽度重新安排布局。
   ========================================================= */

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    .site-header {
        padding: 0 32px;
    }

    .hero__content {
        left: 7vw;
    }

    .passing {
        height: 2850px;
        padding-right: 6vw;
        padding-left: 6vw;
    }

    .passing__axis {
        left: 51%;
        height: 2300px;
    }

    .passing__note {
        left: 6vw;
    }

    .photo-story--one { left: 38%; width: 56%; }
    .photo-story--two { left: 15%; width: 68%; top: 1100px; }
    .photo-story--three { left: 34%; width: 60%; top: 1680px; }
    .photo-story--four { left: 15%; width: 64%; top: 2260px; }

    .staying__header {
        left: 6vw;
    }

    .staying__photo {
        left: 25%;
        width: 58%;
    }

    .recordings__header {
        padding-right: 6vw;
        padding-left: 6vw;
    }

    .recordings__list {
        gap: 5vw;
        padding: 0 7vw;
    }

    .recordings__list li {
        flex: 1;
    }

    .seeing__header,
    .seeing__viewport {
        padding-left: 6vw;
    }

    .trace__copy {
        left: 6vw;
        width: 38%;
    }

    .route-map {
        left: auto;
        right: 6vw;
    }

    .about__header {
        left: 6vw;
    }

    .about__text {
        left: 36%;
    }

    .about__photo {
        right: 6vw;
        left: auto;
        width: 31%;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .page {
        max-width: none;
    }

    .site-header {
        height: 60px;
        padding: 0 20px;
    }

    .site-logo__en,
    .site-nav__item small {
        display: none;
    }

    .site-nav__list {
        gap: 12px;
    }

    .site-nav__item a {
        font-size: 11px;
    }

    .hero {
        min-height: 650px;
        height: 100svh;
    }

    .hero__image {
        width: 100%;
        height: 100%;
        opacity: .55;
    }

    .hero__content {
        top: 22vh;
        right: 20px;
        left: 20px;
        width: auto;
    }

    .hero h1 {
        font-size: 58px;
        line-height: 54px;
    }

    .hero h1 span {
        padding-top: 16px;
        line-height: 62px;
    }

    .hero__scroll {
        left: 20px;
    }

    .section-title h2,
    .staying .section-title h2 {
        font-size: 68px;
        line-height: 70px;
        letter-spacing: 1px;
    }

    .section-title small {
        padding-bottom: 15px;
    }

    .passing {
        height: auto;
        padding: 80px 20px;
    }

    .passing__header {
        width: 100%;
    }

    .passing__axis {
        display: none;
    }

    .passing__note,
    .photo-story {
        position: static;
        width: 100%;
    }

    .passing__note {
        margin: 55px 0;
    }

    .photo-story {
        margin-bottom: 85px;
    }

    .photo-story__image,
    .photo-story--one .photo-story__image,
    .photo-story--two .photo-story__image,
    .photo-story--three .photo-story__image,
    .photo-story--four .photo-story__image {
        height: auto;
        aspect-ratio: 1.6 / 1;
    }

    .photo-card,
    .photo-card--left,
    .photo-card--right-top,
    .photo-card--left-bottom,
    .photo-card--right-bottom {
        position: static;
        width: 100%;
        box-shadow: none;
    }

    .staying {
        height: auto;
        padding: 80px 20px 0;
    }

    .staying__header,
    .staying__photo,
    .recordings {
        position: static;
        width: 100%;
    }

    .staying__photo {
        height: auto;
        margin-top: 45px;
    }

    .staying__photo .photo-reveal {
        height: auto;
        aspect-ratio: 1.67 / 1;
    }

    .recordings {
        margin-top: 70px;
    }

    .recordings__header {
        display: block;
        padding: 0 0 35px;
    }

    .recordings__header p {
        padding-top: 12px;
    }

    .recordings__list {
        display: block;
        padding: 0;
    }

    .recordings__list li {
        width: 100%;
        margin-bottom: 35px;
    }

    .street-quotes {
        position: relative;
        width: calc(100% + 40px);
        margin-left: -20px;
    }

    .seeing {
        height: auto;
        padding: 80px 0;
    }

    .seeing__header {
        display: block;
        height: auto;
        padding: 0 20px 55px;
    }

    .seeing__header > .eyebrow {
        width: auto;
        font-size: 12px;
    }

    .seeing__title-group {
        width: 100%;
        padding-top: 25px;
    }

    .seeing__title-group h2 {
        font-size: 82px;
        line-height: 78px;
    }

    .seeing__viewport {
        height: auto;
        padding-left: 20px;
    }

    .seeing__item {
        flex-basis: 76vw;
        width: 76vw;
    }

    .seeing__item--low,
    .seeing__item--mid {
        padding-top: 0;
    }

    .trace {
        height: auto;
        padding: 80px 20px;
    }

    .trace__copy,
    .route-map {
        position: static;
        width: 100%;
    }

    .trace__copy {
        margin-bottom: 55px;
    }

    .route-map {
        max-width: 432px;
        margin: 0 auto;
    }

    .about {
        height: auto;
        padding: 80px 20px;
    }

    .about__header,
    .about__text,
    .about__photo {
        position: static;
        width: 100%;
    }

    .about__text {
        margin-top: 45px;
    }

    .about__photo {
        margin-top: 45px;
    }

    .site-footer {
        min-height: 420px;
        padding: 60px 20px 30px;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 45px;
    }

    .site-footer__sentence,
    .site-footer__nav,
    .site-footer__bottom {
        grid-column: 1;
        justify-self: start;
    }

    .site-footer__nav {
        flex-wrap: wrap;
    }
}

/* ---------- Small Mobile ---------- */
@media (max-width: 480px) {
    .site-nav__list {
        gap: 8px;
    }

    .site-nav__item a {
        font-size: 10px;
    }

    .hero h1 {
        font-size: 48px;
        line-height: 48px;
    }

    .section-title h2,
    .staying .section-title h2 {
        font-size: 58px;
        line-height: 62px;
    }

    .seeing__item {
        flex-basis: 82vw;
        width: 82vw;
    }

    .route-map {
        transform-origin: top left;
    }
}

/* 尊重系统“减少动态效果”设置 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .street-quotes__track,
    .route-footprint {
        animation: none !important;
        transition: none !important;
    }

    .photo-reveal img,
    .photo-story__image img {
        animation: none !important;
        transition: none !important;
    }
}

@media (min-width: 1025px) {
    :root { --u: calc(100vw / 1257); }

    body { width: 100%; overflow-x: hidden; }
    .page { width: 100%; max-width: none; margin: 0; }

    /* Header */
    .site-header {
        left: 0; width: 100%; height: calc(70 * var(--u));
        padding: 0 calc(50 * var(--u)); transform: none;
    }
    .site-logo { gap: calc(15 * var(--u)); }
    .site-logo__cn { font-size: calc(18 * var(--u)); letter-spacing: calc(2.7 * var(--u)); }
    .site-logo__en { font-size: calc(9 * var(--u)); }
    .site-nav__list { gap: calc(28 * var(--u)); }
    .site-nav__item a { font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u)); }
    .site-nav__item small { margin-left: calc(5 * var(--u)); font-size: calc(8 * var(--u)); }

    /* Hero */
    .hero { height: calc(815 * var(--u)); }
    .hero__image { width: 62%; height: 100%; }
    .hero__content {
        top: calc(154 * var(--u)); left: calc(97 * var(--u));
        width: calc(760 * var(--u));
    }
    .hero h1 {
        padding-top: calc(32 * var(--u));
        font-size: calc(138 * var(--u));
        line-height: calc(101 * var(--u));
        letter-spacing: calc(-2 * var(--u));
    }
    .hero h1 span { padding-top: calc(35 * var(--u)); line-height: calc(143 * var(--u)); }
    .hero__lead {
        padding-top: calc(29 * var(--u));
        font-size: calc(19 * var(--u)); line-height: calc(32 * var(--u));
    }
    .hero__lead-en {
        padding-top: calc(10 * var(--u));
        font-size: calc(10 * var(--u)); line-height: calc(17 * var(--u));
    }
    .walk-button { gap: calc(15 * var(--u)); margin-top: calc(55 * var(--u)); }
    .walk-button__footprints { width: calc(21 * var(--u)); height: calc(38 * var(--u)); }
    .walk-button__footprints i { width: calc(10 * var(--u)); height: calc(15 * var(--u)); }
    .walk-button__text { font-size: calc(14 * var(--u)); }
    .walk-button__text small { font-size: calc(9 * var(--u)); }
    .walk-button__arrow {
        width: calc(35 * var(--u)); height: calc(35 * var(--u));
        font-size: calc(18 * var(--u));
    }
    .hero__scroll {
        left: calc(50 * var(--u)); bottom: calc(30 * var(--u));
        font-size: calc(9 * var(--u));
    }

    /* Shared typography */
    .eyebrow { font-size: calc(10 * var(--u)); line-height: calc(15 * var(--u)); }
    .section-title { gap: calc(12 * var(--u)); padding-top: calc(19 * var(--u)); }
    .section-title h2 {
        font-size: calc(138 * var(--u)); line-height: calc(130 * var(--u));
        letter-spacing: calc(5 * var(--u));
    }
    .section-title small { padding-bottom: calc(35 * var(--u)); font-size: calc(10 * var(--u)); }
    .section-intro {
        padding-top: calc(31 * var(--u));
        font-size: calc(19 * var(--u)); line-height: calc(37 * var(--u));
    }
    .section-intro-en {
        padding-top: calc(10 * var(--u));
        font-size: calc(10 * var(--u)); line-height: calc(17 * var(--u));
    }

    /* 01 Passing */
    .passing {
        height: calc(3153 * var(--u));
        padding: calc(120 * var(--u)) calc(100 * var(--u))
                 calc(120 * var(--u)) calc(97 * var(--u));
    }
    .passing__header { width: calc(983 * var(--u)); }
    .passing__axis {
        top: calc(455 * var(--u)); left: calc(641 * var(--u));
        height: calc(2575 * var(--u));
    }
    .passing__note { left: calc(97 * var(--u)); width: calc(233 * var(--u)); }
    .passing__note--one { top: calc(720 * var(--u)); }
    .passing__note--two { top: calc(1770 * var(--u)); }
    .passing__note p { font-size: calc(16.48 * var(--u)); line-height: calc(28.35 * var(--u)); }
    .passing__note small { font-size: calc(9.44 * var(--u)); line-height: calc(14.16 * var(--u)); }

    .photo-story--one {
        top: calc(521 * var(--u)); left: calc(454 * var(--u));
        width: calc(701 * var(--u));
    }
    .photo-story--one .photo-story__image { height: calc(442 * var(--u)); }
    .photo-story--two {
        top: calc(1153 * var(--u)); left: calc(189 * var(--u));
        width: calc(810 * var(--u));
    }
    .photo-story--two .photo-story__image { height: calc(462 * var(--u)); }
    .photo-story--three {
        top: calc(1815 * var(--u)); left: calc(416 * var(--u));
        width: calc(739 * var(--u));
    }
    .photo-story--three .photo-story__image { height: calc(454 * var(--u)); }
    .photo-story--four {
        top: calc(2482 * var(--u)); left: calc(189 * var(--u));
        width: calc(758 * var(--u));
    }
    .photo-story--four .photo-story__image { height: calc(413 * var(--u)); }

    .photo-card {
        width: calc(195 * var(--u));
        padding: calc(18 * var(--u)) calc(19 * var(--u)) calc(17 * var(--u));
    }
    .photo-card small { font-size: calc(9 * var(--u)); }
    .photo-card h3 {
        padding-top: calc(13 * var(--u));
        font-size: calc(24 * var(--u)); line-height: calc(30 * var(--u));
    }
    .photo-card p {
        padding-top: calc(7 * var(--u));
        font-size: calc(14 * var(--u)); line-height: calc(24.5 * var(--u));
    }
    .photo-card--left {
        top: calc(52 * var(--u)); left: calc(-106 * var(--u));
        width: calc(176 * var(--u));
    }
    .photo-card--right-top {
        top: calc(-65 * var(--u)); right: calc(-85 * var(--u));
        width: calc(172 * var(--u));
    }
    .photo-card--left-bottom { left: calc(-68 * var(--u)); bottom: calc(55 * var(--u)); }
    .photo-card--right-bottom { right: calc(-137 * var(--u)); bottom: calc(-72 * var(--u)); }

    /* 02 Staying */
    .staying { height: calc(1207 * var(--u)); padding-top: calc(120 * var(--u)); }
    .staying__header {
        top: calc(120 * var(--u)); left: calc(97 * var(--u));
        width: calc(302 * var(--u));
    }
    .staying .section-title h2 {
        font-size: calc(126 * var(--u)); line-height: calc(118 * var(--u));
        letter-spacing: calc(-4 * var(--u));
    }
    .staying__photo {
        top: calc(220 * var(--u)); left: calc(310 * var(--u));
        width: calc(637 * var(--u)); height: calc(382 * var(--u));
    }
    .recordings { top: calc(712 * var(--u)); }
    .recordings__header {
        padding: 0 calc(97 * var(--u)) calc(41 * var(--u));
    }
    .recordings__list { gap: calc(88 * var(--u)); padding: 0 calc(126 * var(--u)); }
    .recordings__list li { width: calc(277 * var(--u)); }
    .recording { min-height: calc(208 * var(--u)); padding-top: calc(21 * var(--u)); }
    .recording blockquote { font-size: calc(21 * var(--u)); line-height: calc(32.5 * var(--u)); }
    .recording cite { padding-top: calc(23 * var(--u)); font-size: calc(9 * var(--u)); }
    .street-quotes { height: calc(96 * var(--u)); }
    .street-quotes__track { gap: calc(29 * var(--u)); }
    .street-quotes__track span { font-size: calc(35 * var(--u)); line-height: calc(39 * var(--u)); }
    .street-quotes__track span small { font-size: calc(16 * var(--u)); }

    /* 03 Seeing */
    .seeing { height: calc(1318 * var(--u)); padding-top: calc(120 * var(--u)); }
    .seeing__header {
        height: calc(525 * var(--u)); padding-left: calc(97 * var(--u));
    }
    .seeing__header > .eyebrow {
        width: calc(251 * var(--u));
        font-size: calc(17 * var(--u)); line-height: calc(32 * var(--u));
    }
    .seeing__title-group { width: calc(420 * var(--u)); }
    .seeing__title-group h2 {
        width: calc(161 * var(--u));
        font-size: calc(138 * var(--u)); line-height: calc(139 * var(--u));
        letter-spacing: calc(-7.6 * var(--u));
    }
    .seeing__title-group > p {
        font-size: calc(17 * var(--u)); line-height: calc(32.3 * var(--u));
    }
    .seeing__viewport {
        height: calc(575 * var(--u)); padding-left: calc(97 * var(--u));
    }
    .seeing__list { gap: calc(7 * var(--u)); }
    .seeing__item {
        flex: 0 0 calc(364.5 * var(--u));
        width: calc(364.5 * var(--u));
    }
    .seeing__item--low { padding-top: calc(72 * var(--u)); }
    .seeing__item--mid { padding-top: calc(25 * var(--u)); }
    .photo-reveal { height: calc(480 * var(--u)); }
    .seeing__item figcaption {
        height: calc(33 * var(--u)); padding-top: calc(10 * var(--u));
        font-size: calc(11 * var(--u));
    }

    /* 04 Trace
       内部仍使用 432×520 的 Figma 坐标系，
       整体缩放，保证 11 个 SVG、节点和文字不会互相错位。 */
    .trace { height: calc(800 * var(--u)); }
    .trace__copy {
        top: calc(141 * var(--u)); left: calc(97 * var(--u));
        width: calc(438 * var(--u));
    }
    .trace__note, .trace__note-en { width: calc(384 * var(--u)); }
    .trace__note {
        font-size: calc(16.48 * var(--u)); line-height: calc(28.35 * var(--u));
    }
    .route-map {
        top: calc(140 * var(--u)); right: calc(102 * var(--u)); left: auto;
        width: 432px; height: 520px;
        transform: scale(calc(100vw / 1257));
        transform-origin: top right;
    }

    /* 05 About */
    .about { height: calc(850 * var(--u)); }
    .about__header {
        top: calc(135 * var(--u)); left: calc(97 * var(--u));
        width: calc(263 * var(--u));
    }
    .about__text {
        top: calc(175 * var(--u)); left: calc(459 * var(--u));
        width: calc(275 * var(--u));
    }
    .about__text > p:not(.about__concept) {
        font-size: calc(14 * var(--u)); line-height: calc(28.7 * var(--u));
    }
    .about__text > small {
        padding-bottom: calc(27 * var(--u));
        font-size: calc(10 * var(--u)); line-height: calc(17 * var(--u));
    }
    .about__concept { font-size: calc(19 * var(--u)); line-height: calc(37 * var(--u)); }
    .about__photo {
        top: calc(175 * var(--u)); left: calc(776 * var(--u));
        width: calc(379 * var(--u));
    }
    .about__photo .photo-reveal { height: calc(510 * var(--u)); }

    /* Footer */
    .site-footer {
        min-height: calc(420 * var(--u));
        padding: calc(82 * var(--u)) calc(126 * var(--u)) calc(34 * var(--u));
        grid-template-rows: calc(72 * var(--u)) calc(154 * var(--u)) calc(30 * var(--u));
        column-gap: calc(24 * var(--u));
    }
    .site-footer__brand span {
        font-size: calc(50 * var(--u)); line-height: calc(50 * var(--u));
        letter-spacing: calc(4 * var(--u));
    }
    .site-footer__brand small { padding-top: calc(11 * var(--u)); font-size: calc(9 * var(--u)); }
    .site-footer__sentence { font-size: calc(19 * var(--u)); line-height: calc(33 * var(--u)); }
    .site-footer__nav { gap: calc(24 * var(--u)); font-size: calc(11 * var(--u)); }
    .site-footer__bottom { padding-top: calc(16 * var(--u)); font-size: calc(9 * var(--u)); }
}


/* =========================================================
   V4 TRACE — FIXED FIGMA COORDINATE SYSTEM
   route-map__canvas 永远为 432 × 520。
   所有路线元素共享这一个定位参照；响应式只缩放整个 canvas。
   ========================================================= */

.route-map {
    --route-scale: 1;
    position: absolute;
    width: calc(432px * var(--route-scale));
    height: calc(520px * var(--route-scale));
    overflow: visible;
    border: 0;
    background: transparent;
    transform: none;
}

.route-map__canvas {
    position: relative;
    width: 432px;
    height: 520px;
    overflow: hidden;
    border: 1px solid #64615c;
    background: #161615;
    transform: scale(var(--route-scale));
    transform-origin: top left;
}

/* 所有内部元素只认 432 × 520 画布，不再跟随断点分别改坐标 */
.route-map__vectors,
.route-map__footprints {
    position: absolute;
    inset: 0;
}

.route-map__vectors {
    pointer-events: none;
}

.route-map__footprints {
    z-index: 5;
    pointer-events: none;
}

.route-map__direction,
.route-map__street,
.route-point,
.route-footprint,
.vector {
    position: absolute;
}

/* Desktop：1257px Figma = 1:1，整张地图一起缩放 */
@media (min-width: 1025px) {
    .route-map {
        --route-scale: calc(100vw / 1257);
        top: calc(140 * var(--u));
        right: calc(102 * var(--u));
        left: auto;
    }
}

/* Tablet：文案在上，路线图在下 */
@media (min-width: 769px) and (max-width: 1024px) {
    .trace {
        height: auto;
        min-height: 1050px;
        padding: 82px 6vw 100px;
    }

    .trace__copy {
        position: relative;
        top: auto;
        left: auto;
        width: min(620px, 100%);
        margin: 0;
    }

    .trace__note,
    .trace__note-en {
        width: min(520px, 100%);
    }

    .route-map {
        --route-scale: min(1.35, calc(88vw / 432));
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        margin: 64px auto 0;
    }
}

/* Mobile：路线图按可用屏幕宽度整体缩小 */
@media (max-width: 768px) {
    .trace {
        height: auto;
        min-height: 0;
        padding: 72px 20px 84px;
    }

    .trace__copy {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 0;
    }

    .trace__note,
    .trace__note-en {
        width: 100%;
    }

    .route-map {
        --route-scale: min(1, calc((100vw - 40px) / 432));
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        margin: 48px auto 0;
    }
}

@media (max-width: 480px) {
    .trace {
        padding-right: 16px;
        padding-left: 16px;
    }

    .route-map {
        --route-scale: min(1, calc((100vw - 32px) / 432));
        margin-top: 38px;
    }
}

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


/* =========================================================
   V4.1 TRACE — SAFE FIT
   解决窄屏时路线图被右侧裁切：
   - 内部仍固定 432 × 520，不改任何节点坐标；
   - 外层只改变整张地图的 scale；
   - 使用明确的 @media 缩放档位，避免浏览器对
     length/length calc() 支持差异造成 scale 失效。
   ========================================================= */

.trace {
    overflow: hidden;
}

.route-map {
    overflow: visible;
}

.route-map__canvas {
    overflow: hidden;
}

/* 平板：路线图完整居中显示 */
@media (min-width: 769px) and (max-width: 1024px) {
    .route-map {
        --route-scale: 1;
        width: 432px;
        height: 520px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* 601–768px */
@media (min-width: 601px) and (max-width: 768px) {
    .route-map {
        --route-scale: .90;
        width: 388.8px;
        height: 468px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* 481–600px */
@media (min-width: 481px) and (max-width: 600px) {
    .route-map {
        --route-scale: .78;
        width: 336.96px;
        height: 405.6px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* 391–480px */
@media (min-width: 391px) and (max-width: 480px) {
    .route-map {
        --route-scale: .68;
        width: 293.76px;
        height: 353.6px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* <=390px */
@media (max-width: 390px) {
    .route-map {
        --route-scale: .60;
        width: 259.2px;
        height: 312px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    .trace {
        overflow: hidden;
    }

    .route-map__canvas {
        transform: scale(var(--route-scale));
        transform-origin: top left;
    }
}


/* =========================================================
   V4.2 TRACE — CONTINUOUS FLUID FIT
   无论视口多窄，整张 432×520 路线图始终完整显示。
   关键：不用固定缩放档位；使用 CSS 自定义属性计算可用宽度，
   再由 transform: scale() 连续缩放。
   ========================================================= */

@media (max-width: 768px) {
    .trace {
        --trace-side-space: 32px;
        overflow: hidden;
    }

    /*
       外层宽度始终等于“当前可用宽度”。
       aspect-ratio 保持 Figma 432:520 比例，
       所以占位高度也会同步连续变化。
    */
    .route-map {
        --route-width: min(432px, calc(100vw - var(--trace-side-space)));
        --route-scale: calc(var(--route-width) / 432px);

        position: relative;
        top: auto;
        right: auto;
        left: auto;

        width: var(--route-width);
        height: auto;
        aspect-ratio: 432 / 520;

        margin: 48px auto 0;
        overflow: visible;
    }

    /*
       内部仍然永远是 432×520。
       11 个 SVG / 01–08 / 街道名 / 脚印完全不改坐标。
    */
    .route-map__canvas {
        width: 432px;
        height: 520px;

        transform: scale(var(--route-scale));
        transform-origin: top left;
    }
}

/* 极窄屏幕只缩小 section 左右留白，地图仍连续适配 */
@media (max-width: 480px) {
    .trace {
        --trace-side-space: 24px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .route-map {
        margin-top: 38px;
    }
}

@media (max-width: 320px) {
    .trace {
        --trace-side-space: 16px;
        padding-right: 8px;
        padding-left: 8px;
    }
}


/* =========================================================
   V4.3 TRACE MOBILE NATURAL HEIGHT
   移动端轨迹 section 高度完全由内容自然撑开，
   消除路线图下方的大面积空白。
   ========================================================= */

@media (max-width: 768px) {
    .trace {
        height: auto;
        min-height: 0;
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .trace__copy {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 0;
    }

    .route-map {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        margin-top: 48px;
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .trace {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .route-map {
        margin-top: 38px;
    }
}

.seeing__viewport {
    overflow: visible;
}

@media (max-width: 768px) {
    .seeing {
        height: auto;
        padding-bottom: 72px;
    }

    .seeing__viewport {
        height: auto;
        padding: 0 20px;
        overflow: visible;
    }

    .seeing__list {
        display: block;
        width: 100%;
    }

    .seeing__item,
    .seeing__item--low,
    .seeing__item--mid {
        width: 100%;
        max-width: 430px;
        margin: 0 auto 28px;
        padding-top: 0;
    }

    .seeing__item .photo-reveal {
        width: 100%;
        height: auto;
        aspect-ratio: 364.5 / 480;
    }

    .seeing__item figcaption {
        height: auto;
        padding-top: 10px;
    }
}

/* 路线图只做静态展示：脚印保留在 Figma 位置，但不移动。 */
.route-footprint {
    transform: none;
}

/* 1. HERO：开始行走上移，首屏底部不再掉出画面 */
.walk-button {
    margin-top: 34px;
}

.hero__scroll {
    bottom: 48px;
}

/* 首屏顶部不额外留黑色条带 */
.hero,
.hero__image {
    top: 0;
    margin-top: 0;
}

/* 2. 经过：桌面端整体稍微上移，让进入下一屏后更快看到图文 */
@media (min-width: 1025px) {
    .passing {
        height: calc(3075 * var(--u));
        padding-top: calc(86 * var(--u));
    }

    .passing__axis {
        top: calc(410 * var(--u));
        height: calc(2540 * var(--u));
    }

    .passing__note--one { top: calc(670 * var(--u)); }
    .passing__note--two { top: calc(1720 * var(--u)); }

    .photo-story--one { top: calc(471 * var(--u)); }
    .photo-story--two { top: calc(1103 * var(--u)); }
    .photo-story--three { top: calc(1765 * var(--u)); }
    .photo-story--four { top: calc(2432 * var(--u)); }

    /* HERO 桌面比例下同步修正“开始行走” */
    .walk-button {
        margin-top: calc(34 * var(--u));
    }

    .hero__scroll {
        bottom: calc(48 * var(--u));
    }
}

/* 3. 停留：去掉底部多余的浅色/白色细条 */
.staying,
.street-quotes {
    margin-bottom: 0;
}

.street-quotes {
    border-bottom: 0;
}

.seeing {
    margin-top: 0;
    border-top: 0;
}

/* 4. 轨迹文案恢复 Figma 的“两段式”节奏：
      第一段靠近标题，第二段明显下移 */
.trace__note {
    margin-top: 122px;
}

/* 路线图 02：把“北正街”从“车厢里的片刻”文字旁移开 */
.route-map__street--beizheng {
    top: 25.6%;
    left: 65.2%;
}

/* 5. Footer：导航与横线拉开距离 */
.site-footer__nav {
    padding-bottom: 24px;
}

.site-footer__bottom {
    padding-top: 18px;
}

/* 桌面端按 Figma 比例同步 footer 间距 */
@media (min-width: 1025px) {
    .trace__note {
        margin-top: calc(122 * var(--u));
    }

    .site-footer__nav {
        padding-bottom: calc(24 * var(--u));
    }

    .site-footer__bottom {
        padding-top: calc(18 * var(--u));
    }
}

/* 平板/手机不强行保留桌面的大段空隙，避免窄屏出现过量留白 */
@media (max-width: 1024px) {
    .trace__note {
        margin-top: 56px;
    }
}

@media (max-width: 768px) {
    .trace__note {
        margin-top: 38px;
    }

    .site-footer__nav {
        padding-bottom: 20px;
    }
}


/* =========================================================
   V5.2 HERO — ONE SCREEN FIT
   首屏始终以浏览器可视高度为边界：
   Header / 主标题 / 文案 / 开始行走 / SCROLL 全部在一屏内。
   仅使用基础 CSS + @media。
   ========================================================= */

.hero {
    position: relative;
    height: 100vh;
    min-height: 620px;
    max-height: none;
    overflow: hidden;
}

/* 首图跟随首屏高度，不再按照页面宽度把 Hero 一起纵向放大 */
.hero__image {
    height: 100%;
}

/* 桌面端恢复以“视口高度”为主要尺度，而不是之前的 --u 宽度尺度 */
@media (min-width: 1025px) {
    .hero {
        height: 100vh;
        min-height: 620px;
    }

    .hero__image {
        top: 0;
        height: 100%;
    }

    .hero__content {
        top: 18vh;
    }

    .hero__eyebrow {
        margin-bottom: 2.6vh;
    }

    .hero__title {
        font-size: min(10.3vw, 18vh);
        line-height: .90;
    }

    .hero__intro {
        margin-top: 4.2vh;
        font-size: min(1.55vw, 2.6vh);
        line-height: 1.55;
    }

    .hero__intro-en {
        margin-top: 1.8vh;
        font-size: min(.82vw, 1.35vh);
    }

    .walk-button {
        margin-top: 5.8vh;
    }

    .hero__scroll {
        bottom: 2.2vh;
    }
}

/* 较矮的笔记本屏幕进一步压缩纵向间距，确保内容仍完整露出 */
@media (min-width: 1025px) and (max-height: 760px) {
    .hero__content {
        top: 15vh;
    }

    .hero__title {
        font-size: min(9.5vw, 16.5vh);
    }

    .hero__intro {
        margin-top: 3vh;
    }

    .walk-button {
        margin-top: 4vh;
    }

    .hero__scroll {
        bottom: 1.6vh;
    }
}


/* =========================================================
   V5.3 HERO — MORE BREATHING ROOM
   保持一屏完整显示，同时减小主标题并整体略上移。
   ========================================================= */

@media (min-width: 1025px) {
    .hero__content {
        top: 13.5vh;
    }

    .hero__eyebrow {
        margin-bottom: 2.2vh;
    }

    .hero__title {
        font-size: min(9.25vw, 15.8vh);
        line-height: .91;
    }

    .hero__intro {
        margin-top: 3.2vh;
        font-size: min(1.42vw, 2.35vh);
        line-height: 1.5;
    }

    .hero__intro-en {
        margin-top: 1.35vh;
        font-size: min(.78vw, 1.25vh);
    }

    .walk-button {
        margin-top: 4.2vh;
    }

    .hero__scroll {
        bottom: 2.4vh;
    }
}

@media (min-width: 1025px) and (max-height: 760px) {
    .hero__content {
        top: 12vh;
    }

    .hero__title {
        font-size: min(8.8vw, 14.6vh);
    }

    .hero__intro {
        margin-top: 2.5vh;
    }

    .walk-button {
        margin-top: 3.2vh;
    }
}


/* =========================================================
   V5.3-HOME-MATCH
   只在 V5.3 基础上重做首页 Hero。
   目标：严格匹配用户提供的 1257×768 参考版式。
   其他章节不修改。
   ========================================================= */

@media (min-width: 1025px) {
    .page {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .site-header {
        left: 0;
        width: 100%;
        height: 70px;
        padding: 0 48px;
        transform: none;
    }

    .site-logo {
        gap: 15px;
    }

    .site-logo__cn {
        font-size: 18px;
        letter-spacing: 2.7px;
    }

    .site-logo__en {
        font-size: 9px;
        letter-spacing: .99px;
    }

    .site-nav__list {
        gap: 28px;
    }

    .site-nav__item a {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 1.68px;
    }

    .site-nav__item small {
        margin-left: 5px;
        font-size: 8px;
        letter-spacing: .88px;
    }

    .hero {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 700px;
        max-height: none;
        overflow: hidden;
        background: #111;
    }

    /* 参考图：图片从约 38% 处开始，一直到屏幕最右侧 */
    .hero__image {
        top: 0;
        right: 0;
        width: 62%;
        height: 100%;
        overflow: hidden;
    }

    .hero__image img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center bottom;
        }

    .hero__image::after {
        background:
            linear-gradient(
                90deg,
                #111 0%,
                rgba(17,17,16,.92) 12%,
                rgba(17,17,16,.70) 34%,
                rgba(17,17,16,.18) 72%,
                rgba(17,17,16,0) 100%
            );
    }

    /* 1257×768 参考图中的主内容位置 */
    .hero__content {
        top: 145px;
        left: 90px;
        width: 760px;
    }

    .hero__content > .eyebrow {
        margin: 0;
        padding: 0;
        font-size: 10px;
        line-height: 19px;
        letter-spacing: 1.5px;
    }

    .hero h1 {
        margin: 0;
        padding-top: 29px;
        font-size: 138px;
        line-height: 101px;
        letter-spacing: -2px;
        white-space: nowrap;
    }

    .hero h1 span {
        padding-top: 35px;
        line-height: 143px;
    }

    .hero__lead {
        margin: 0;
        padding-top: 27px;
        font-size: 19px;
        line-height: 32px;
        letter-spacing: .85px;
    }

    .hero__lead-en {
        padding-top: 8px;
        font-size: 10px;
        line-height: 17px;
        letter-spacing: .8px;
    }

    .walk-button {
        margin-top: 54px;
    }

    .hero__scroll {
        left: 45px;
        bottom: 24px;
        font-size: 9px;
        letter-spacing: .9px;
    }
}

/* 参考图高度附近：确保“开始行走”和 SCROLL 都完整留在首屏 */
@media (min-width: 1025px) and (max-height: 800px) {
    .hero__content {
        top: 145px;
    }

    .hero h1 {
        font-size: 138px;
        line-height: 101px;
    }

    .hero h1 span {
        padding-top: 35px;
        line-height: 143px;
    }

    .hero__lead {
        padding-top: 27px;
    }

    .walk-button {
        margin-top: 54px;
    }
}

/* 仅当桌面高度明显更矮时才做最小限度压缩，不改变版式关系 */
@media (min-width: 1025px) and (max-height: 720px) {
    .hero__content {
        top: 118px;
    }

    .hero h1 {
        font-size: 122px;
        line-height: 92px;
    }

    .hero h1 span {
        padding-top: 28px;
        line-height: 126px;
    }

    .hero__lead {
        padding-top: 20px;
    }

    .walk-button {
        margin-top: 32px;
    }
}


/* =========================================================
   STAY TOP ALIGN — 真正顶部对齐
   STAY 是 .section-title 内的 flex 子元素，因此不能靠 top 移动。
   ========================================================= */
@media (min-width: 1025px) {
    .staying .section-title {
        align-items: flex-start;
    }

    .staying .section-title small {
        padding-bottom: 0;
        padding-top: 0;
        margin-top: 0;
        align-self: flex-start;
    }
}

/* FRAME 02：标题“车厢里的片刻”保持一行显示 */
@media (min-width: 769px) {
    .photo-story--two .photo-card--right-top {
        width: 230px;
    }

    .photo-story--two .photo-card--right-top h3 {
        white-space: nowrap;
    }
}

@media (min-width: 1025px) {
    .photo-story--two .photo-card--right-top {
        width: calc(230 * var(--u));
    }
}

/* =========================================================
   V5.3.4 HERO PHOTO — 保持照片顶部连续，不再用黑条硬切
   通过取景位置 + 顶部渐暗保证人物完整、导航清晰。
   ========================================================= */
@media (min-width: 1025px) {
    .hero__image {
        top: 0;
        right: 0;
        width: 62%;
        height: 100%;
    }

    .hero__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 42%;
    }

    .hero__image::after {
        background:
            linear-gradient(180deg, rgba(17, 17, 16, .52) 0%, rgba(17, 17, 16, .12) 17%, rgba(17, 17, 16, 0) 34%),
            linear-gradient(90deg, #111 0%, rgba(17, 17, 16, .76) 32%, rgba(17, 17, 16, .10) 75%);
    }
}

/* V5.3.5 — 首页“开始行走”双层脚印
   仅增加右下方深灰实体残影，不改 Hero 人物取景、导航和其他布局。 */
.walk-button__footprints i {
    box-shadow: 5px 7px 0 rgba(92, 92, 92, .48);
}

@media (min-width: 1025px) {
    .walk-button__footprints i {
        box-shadow: calc(5 * var(--u)) calc(7 * var(--u)) 0 rgba(92, 92, 92, .48);
    }
}


/* =========================================================
   V5.3.7 · PASSING / FRAME 05
   按最新 Figma 截图：第五组延续纵向轴线节奏，图片居中偏右，
   文案卡从图片左侧叠入；不改 V5.3.5 已确认的首页。
   ========================================================= */
@media (min-width: 1025px) {
    .passing {
        height: calc(3760 * var(--u));
    }

    .passing__axis {
        height: calc(3265 * var(--u));
    }

    .photo-story--five {
        top: calc(3060 * var(--u));
        left: calc(355 * var(--u));
        width: calc(760 * var(--u));
    }

    .photo-story--five .photo-story__image {
        height: calc(430 * var(--u));
    }

    .photo-story--five .photo-story__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 48%;
    }

    .photo-card--frame05 {
        left: calc(-145 * var(--u));
        bottom: calc(58 * var(--u));
        width: calc(210 * var(--u));
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .passing {
        height: 3520px;
    }

    .passing__axis {
        height: 2970px;
    }

    .photo-story--five {
        top: 2820px;
        left: 29%;
        width: 62%;
    }

    .photo-story--five .photo-story__image {
        height: auto;
        aspect-ratio: 760 / 430;
    }

    .photo-card--frame05 {
        left: -19%;
        bottom: 13%;
    }
}

@media (max-width: 768px) {
    .photo-story--five .photo-story__image {
        height: auto;
        aspect-ratio: 760 / 430;
    }

    .photo-card--frame05 {
        position: static;
        width: 100%;
        box-shadow: none;
    }
}

/* =========================================================
   V5.3.8 · FRAME 01 / FRAME 05 文案保持单行
   仅调整两张说明卡的宽度与正文换行，不改变其他版式。
   ========================================================= */
.photo-card--left p,
.photo-card--frame05 p {
    white-space: nowrap;
}

@media (min-width: 1025px) {
    .photo-card--left {
        width: calc(235 * var(--u));
    }

    .photo-card--frame05 {
        width: calc(300 * var(--u));
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .photo-card--left {
        width: 235px;
    }

    .photo-card--frame05 {
        width: 300px;
    }
}

@media (max-width: 768px) {
    .photo-card--left p,
    .photo-card--frame05 p {
        white-space: normal;
    }
}


/* =========================================================
   V5.3.8 TRACE — SVG X / Y COORDINATE VERSION
   老师课堂方式：整张路线图使用 432 × 520 SVG 坐标系。
   左上角为 (0,0)，x 向右，y 向下。
   路线、街名、节点和脚印都直接使用 SVG 坐标定位。
   ========================================================= */
.route-map__canvas { display: none !important; }

.route-map__svg {
    display: block;
    width: 432px;
    height: 520px;
    overflow: hidden;
    border: 1px solid #64615c;
    background: #161615;
    transform: scale(var(--route-scale));
    transform-origin: top left;
}

.route-map__background { fill: #161615; }
.route-map__vectors { pointer-events: none; }

.route-map__directions rect { fill: rgba(17, 17, 15, .7); }
.route-map__directions text {
    fill: #eeebe4;
    font-size: 10px;
    letter-spacing: 1px;
}

.route-map__streets text {
    fill: #afaaa0;
    font-size: 7.4px;
}
.route-map__streets .route-map__street--main { fill: #e4dfd5; }

.route-map__points a { text-decoration: none; }
.route-map__points circle {
    fill: #111;
    stroke: #817c72;
    stroke-width: 1;
}
.route-map__points text { fill: #f2eee6; }
.route-map__points .route-point__number {
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}
.route-map__points .route-point__title {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.route-map__footprints { pointer-events: none; }

/* 新版 SVG 本身就是固定 432×520 画布，响应式仍只缩放整张地图 */
@media (max-width: 768px) {
    .route-map__svg {
        width: 432px;
        height: 520px;
        transform: scale(var(--route-scale));
        transform-origin: top left;
    }
}


/* 原生 HTML5 音频播放器：不使用 JavaScript */
.native-audio {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 18px;
    border-top: 1px solid rgba(238, 234, 225, 0.32);
    border-bottom: 1px solid rgba(238, 234, 225, 0.32);
    padding: 7px 0;
    color-scheme: dark;
    background: transparent;
}

.native-audio:focus {
    outline: none;
}

/* ABOUT 文案：手写风格字体 */
.about__text {
    font-family: "Caveat", "Trebuchet MS", Arial, sans-serif;
}

.about__text > p:not(.about__concept),
.about__text > small,
.about__concept {
    font-family: inherit;
}

/* ABOUT 文案：更明显的钢笔手记风格（V2） */
.about__text {
    font-family: "Caveat", "Trebuchet MS", Arial, sans-serif;
    font-weight: 400;
}

.about__text > p:not(.about__concept) {
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.045em;
}

.about__text > small {
    font-family: "Caveat", "Trebuchet MS", Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.035em;
}

.about__concept {
    font-family: "Caveat", "Trebuchet MS", Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0.055em;
}

/* ABOUT 总结句：恢复原字体，并保持单行 */
.about__concept {
    font-family: "Montserrat", Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .85px;
    white-space: nowrap;
}

.about__concept + small {
    font-family: "Montserrat", Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .8px;
    white-space: nowrap;
}

/* ABOUT 手写正文可读性微调 V4：仅放大手写正文，不改变总结句与版式 */
.about__text > p:not(.about__concept) {
    font-size: 16px;
    line-height: 31.5px;
}

.about__text > small:not(.about__concept + small) {
    font-size: 11px;
    line-height: 18.5px;
}

@media (min-width: 1025px) {
    .about__text > p:not(.about__concept) {
        font-size: calc(16 * var(--u));
        line-height: calc(31.5 * var(--u));
    }

    .about__text > small:not(.about__concept + small) {
        font-size: calc(11 * var(--u));
        line-height: calc(18.5 * var(--u));
    }
}

/* =========================================================
   ABOUT 响应式防遮挡修正
   中间文字与右侧照片始终保留安全间距；总结句保持单行。
   ========================================================= */
@media (min-width: 1025px) {
    .about__text {
        width: calc(300 * var(--u));
        z-index: 2;
    }

    .about__photo {
        left: calc(815 * var(--u));
        width: calc(340 * var(--u));
        z-index: 1;
    }

    .about__photo .photo-reveal {
        height: calc(510 * var(--u));
    }

    .about__concept {
        font-size: calc(18 * var(--u));
        letter-spacing: calc(.55 * var(--u));
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .about__text {
        left: 34%;
        width: 30%;
        z-index: 2;
    }

    .about__photo {
        left: auto;
        right: 4.5vw;
        width: 29%;
        z-index: 1;
    }

    .about__concept {
        font-size: clamp(14px, 1.7vw, 17px);
        letter-spacing: .35px;
        white-space: nowrap;
    }

    .about__concept + small {
        font-size: clamp(8px, 1vw, 10px);
        white-space: nowrap;
    }
}

/* =========================================================
   SEEING 横向摄影画廊｜纯 CSS 左右滑动
   不使用 JavaScript：触控板、Shift+滚轮、触屏拖动均可横向浏览。
   ========================================================= */
.seeing__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.seeing__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: max-content;
    min-width: 100%;
}

.seeing__item {
    flex: 0 0 364.5px;
    scroll-snap-align: start;
}

/* 小屏仍保持横向摄影长廊，不改成纵向列表 */
@media (max-width: 768px) {
    .seeing {
        height: auto;
        padding-bottom: 72px;
    }

    .seeing__viewport {
        height: 575px;
        padding-left: 20px;
        padding-right: 20px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .seeing__list {
        display: flex;
        width: max-content;
        gap: 7px;
    }

    .seeing__item,
    .seeing__item--low,
    .seeing__item--mid {
        width: min(78vw, 364.5px);
        max-width: none;
        margin: 0;
        flex: 0 0 min(78vw, 364.5px);
    }

    .seeing__item--low { padding-top: 72px; }
    .seeing__item--mid { padding-top: 25px; }

    .seeing__item .photo-reveal {
        width: 100%;
        height: 480px;
        aspect-ratio: auto;
    }
}

/* =========================================================
   SEEING 横向画廊修正｜完整显示图注 + 隐藏滚动条
   保留横向滚动功能，只隐藏浏览器原生滚动条。
   ========================================================= */
.seeing__viewport {
    height: 620px;
    padding-bottom: 28px;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* 旧版 Edge / IE */
}

.seeing__viewport::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;                  /* Chrome / Edge / Safari */
}

/* 给每张错落照片的图注留出完整空间 */
.seeing__item figure {
    overflow: visible;
}

.seeing__item figcaption {
    min-height: 33px;
    height: auto;
    padding-bottom: 8px;
    overflow: visible;
}

@media (max-width: 768px) {
    .seeing__viewport {
        height: 620px;
        padding-bottom: 28px;
        scrollbar-width: none;
    }

    .seeing__viewport::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
}

/* =========================================================
   SEEING 自适应修正｜横向画廊图注始终完整显示
   原因：桌面端照片会随 --u 放大，viewport 高度也必须同步缩放。
   ========================================================= */
.seeing__viewport {
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.seeing__viewport::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

@media (min-width: 1025px) {
    .seeing__viewport {
        /* 72 错落 + 480 照片 + 图注空间，并随 Figma 基准比例一起缩放 */
        height: calc(630 * var(--u));
        padding-bottom: calc(28 * var(--u));
    }

    .seeing__item figcaption {
        min-height: calc(33 * var(--u));
        height: auto;
        padding-bottom: calc(8 * var(--u));
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .seeing__viewport {
        height: 630px;
        padding-bottom: 28px;
    }
}

@media (max-width: 768px) {
    .seeing__viewport {
        height: 630px;
        padding-bottom: 28px;
    }
}

/* =========================================================
   交互动效｜仅 HTML + CSS
   1. 首页：96 个透明感应格覆盖整个 Hero，减少镜头跳格感。
   2. 经过 / 停留 / 看见：彩色图与黑白图完全重叠，鼠标位置局部显色。
   ========================================================= */
.hero { --lens-x:50%; --lens-y:50%; isolation:isolate; }
.hero-lens-stage { position:relative; z-index:3; }
.hero-lens-scene {
    position:absolute; z-index:7; inset:0;
    background:url("assets/images/lens-scene.webp") center / cover no-repeat;
    clip-path:circle(0 at var(--lens-x) var(--lens-y)); opacity:0;
    pointer-events:none;
    transition:clip-path .12s linear, opacity .12s ease;
}
.hero-lens-ring {
    position:absolute; z-index:9; left:var(--lens-x); top:var(--lens-y);
    width:190px; height:190px; border:2px solid rgba(242,238,230,.85); border-radius:50%;
    box-shadow:0 0 0 9px rgba(12,12,11,.35), inset 0 0 0 3px rgba(12,12,11,.42);
    opacity:0; transform:translate(-50%,-50%) scale(.96); pointer-events:none;
    transition:left .11s linear, top .11s linear, opacity .12s ease, transform .12s ease;
}
.hero-lens-zones {
    position:absolute; z-index:10; inset:0; display:grid;
    grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(8,1fr);
}
.hero-lens-zones i { display:block; min-width:0; min-height:0; }
.hero:has(.hero-lens-zones i:hover) .hero-lens-scene { opacity:1; clip-path:circle(95px at var(--lens-x) var(--lens-y)); }
.hero:has(.hero-lens-zones i:hover) .hero-lens-ring { opacity:1; transform:translate(-50%,-50%) scale(1); }
.hero:has(.hero-lens-zones i:nth-child(1):hover){--lens-x:1.389%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(2):hover){--lens-x:4.167%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(3):hover){--lens-x:6.944%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(4):hover){--lens-x:9.722%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(5):hover){--lens-x:12.500%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(6):hover){--lens-x:15.278%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(7):hover){--lens-x:18.056%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(8):hover){--lens-x:20.833%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(9):hover){--lens-x:23.611%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(10):hover){--lens-x:26.389%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(11):hover){--lens-x:29.167%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(12):hover){--lens-x:31.944%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(13):hover){--lens-x:34.722%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(14):hover){--lens-x:37.500%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(15):hover){--lens-x:40.278%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(16):hover){--lens-x:43.056%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(17):hover){--lens-x:45.833%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(18):hover){--lens-x:48.611%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(19):hover){--lens-x:51.389%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(20):hover){--lens-x:54.167%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(21):hover){--lens-x:56.944%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(22):hover){--lens-x:59.722%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(23):hover){--lens-x:62.500%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(24):hover){--lens-x:65.278%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(25):hover){--lens-x:68.056%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(26):hover){--lens-x:70.833%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(27):hover){--lens-x:73.611%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(28):hover){--lens-x:76.389%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(29):hover){--lens-x:79.167%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(30):hover){--lens-x:81.944%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(31):hover){--lens-x:84.722%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(32):hover){--lens-x:87.500%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(33):hover){--lens-x:90.278%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(34):hover){--lens-x:93.056%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(35):hover){--lens-x:95.833%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(36):hover){--lens-x:98.611%;--lens-y:2.083%}.hero:has(.hero-lens-zones i:nth-child(37):hover){--lens-x:1.389%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(38):hover){--lens-x:4.167%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(39):hover){--lens-x:6.944%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(40):hover){--lens-x:9.722%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(41):hover){--lens-x:12.500%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(42):hover){--lens-x:15.278%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(43):hover){--lens-x:18.056%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(44):hover){--lens-x:20.833%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(45):hover){--lens-x:23.611%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(46):hover){--lens-x:26.389%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(47):hover){--lens-x:29.167%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(48):hover){--lens-x:31.944%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(49):hover){--lens-x:34.722%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(50):hover){--lens-x:37.500%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(51):hover){--lens-x:40.278%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(52):hover){--lens-x:43.056%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(53):hover){--lens-x:45.833%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(54):hover){--lens-x:48.611%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(55):hover){--lens-x:51.389%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(56):hover){--lens-x:54.167%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(57):hover){--lens-x:56.944%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(58):hover){--lens-x:59.722%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(59):hover){--lens-x:62.500%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(60):hover){--lens-x:65.278%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(61):hover){--lens-x:68.056%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(62):hover){--lens-x:70.833%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(63):hover){--lens-x:73.611%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(64):hover){--lens-x:76.389%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(65):hover){--lens-x:79.167%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(66):hover){--lens-x:81.944%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(67):hover){--lens-x:84.722%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(68):hover){--lens-x:87.500%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(69):hover){--lens-x:90.278%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(70):hover){--lens-x:93.056%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(71):hover){--lens-x:95.833%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(72):hover){--lens-x:98.611%;--lens-y:6.250%}.hero:has(.hero-lens-zones i:nth-child(73):hover){--lens-x:1.389%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(74):hover){--lens-x:4.167%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(75):hover){--lens-x:6.944%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(76):hover){--lens-x:9.722%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(77):hover){--lens-x:12.500%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(78):hover){--lens-x:15.278%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(79):hover){--lens-x:18.056%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(80):hover){--lens-x:20.833%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(81):hover){--lens-x:23.611%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(82):hover){--lens-x:26.389%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(83):hover){--lens-x:29.167%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(84):hover){--lens-x:31.944%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(85):hover){--lens-x:34.722%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(86):hover){--lens-x:37.500%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(87):hover){--lens-x:40.278%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(88):hover){--lens-x:43.056%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(89):hover){--lens-x:45.833%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(90):hover){--lens-x:48.611%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(91):hover){--lens-x:51.389%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(92):hover){--lens-x:54.167%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(93):hover){--lens-x:56.944%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(94):hover){--lens-x:59.722%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(95):hover){--lens-x:62.500%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(96):hover){--lens-x:65.278%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(97):hover){--lens-x:68.056%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(98):hover){--lens-x:70.833%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(99):hover){--lens-x:73.611%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(100):hover){--lens-x:76.389%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(101):hover){--lens-x:79.167%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(102):hover){--lens-x:81.944%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(103):hover){--lens-x:84.722%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(104):hover){--lens-x:87.500%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(105):hover){--lens-x:90.278%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(106):hover){--lens-x:93.056%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(107):hover){--lens-x:95.833%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(108):hover){--lens-x:98.611%;--lens-y:10.417%}.hero:has(.hero-lens-zones i:nth-child(109):hover){--lens-x:1.389%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(110):hover){--lens-x:4.167%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(111):hover){--lens-x:6.944%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(112):hover){--lens-x:9.722%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(113):hover){--lens-x:12.500%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(114):hover){--lens-x:15.278%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(115):hover){--lens-x:18.056%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(116):hover){--lens-x:20.833%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(117):hover){--lens-x:23.611%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(118):hover){--lens-x:26.389%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(119):hover){--lens-x:29.167%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(120):hover){--lens-x:31.944%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(121):hover){--lens-x:34.722%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(122):hover){--lens-x:37.500%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(123):hover){--lens-x:40.278%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(124):hover){--lens-x:43.056%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(125):hover){--lens-x:45.833%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(126):hover){--lens-x:48.611%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(127):hover){--lens-x:51.389%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(128):hover){--lens-x:54.167%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(129):hover){--lens-x:56.944%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(130):hover){--lens-x:59.722%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(131):hover){--lens-x:62.500%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(132):hover){--lens-x:65.278%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(133):hover){--lens-x:68.056%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(134):hover){--lens-x:70.833%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(135):hover){--lens-x:73.611%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(136):hover){--lens-x:76.389%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(137):hover){--lens-x:79.167%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(138):hover){--lens-x:81.944%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(139):hover){--lens-x:84.722%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(140):hover){--lens-x:87.500%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(141):hover){--lens-x:90.278%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(142):hover){--lens-x:93.056%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(143):hover){--lens-x:95.833%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(144):hover){--lens-x:98.611%;--lens-y:14.583%}.hero:has(.hero-lens-zones i:nth-child(145):hover){--lens-x:1.389%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(146):hover){--lens-x:4.167%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(147):hover){--lens-x:6.944%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(148):hover){--lens-x:9.722%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(149):hover){--lens-x:12.500%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(150):hover){--lens-x:15.278%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(151):hover){--lens-x:18.056%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(152):hover){--lens-x:20.833%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(153):hover){--lens-x:23.611%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(154):hover){--lens-x:26.389%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(155):hover){--lens-x:29.167%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(156):hover){--lens-x:31.944%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(157):hover){--lens-x:34.722%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(158):hover){--lens-x:37.500%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(159):hover){--lens-x:40.278%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(160):hover){--lens-x:43.056%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(161):hover){--lens-x:45.833%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(162):hover){--lens-x:48.611%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(163):hover){--lens-x:51.389%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(164):hover){--lens-x:54.167%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(165):hover){--lens-x:56.944%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(166):hover){--lens-x:59.722%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(167):hover){--lens-x:62.500%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(168):hover){--lens-x:65.278%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(169):hover){--lens-x:68.056%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(170):hover){--lens-x:70.833%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(171):hover){--lens-x:73.611%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(172):hover){--lens-x:76.389%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(173):hover){--lens-x:79.167%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(174):hover){--lens-x:81.944%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(175):hover){--lens-x:84.722%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(176):hover){--lens-x:87.500%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(177):hover){--lens-x:90.278%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(178):hover){--lens-x:93.056%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(179):hover){--lens-x:95.833%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(180):hover){--lens-x:98.611%;--lens-y:18.750%}.hero:has(.hero-lens-zones i:nth-child(181):hover){--lens-x:1.389%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(182):hover){--lens-x:4.167%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(183):hover){--lens-x:6.944%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(184):hover){--lens-x:9.722%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(185):hover){--lens-x:12.500%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(186):hover){--lens-x:15.278%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(187):hover){--lens-x:18.056%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(188):hover){--lens-x:20.833%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(189):hover){--lens-x:23.611%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(190):hover){--lens-x:26.389%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(191):hover){--lens-x:29.167%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(192):hover){--lens-x:31.944%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(193):hover){--lens-x:34.722%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(194):hover){--lens-x:37.500%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(195):hover){--lens-x:40.278%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(196):hover){--lens-x:43.056%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(197):hover){--lens-x:45.833%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(198):hover){--lens-x:48.611%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(199):hover){--lens-x:51.389%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(200):hover){--lens-x:54.167%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(201):hover){--lens-x:56.944%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(202):hover){--lens-x:59.722%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(203):hover){--lens-x:62.500%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(204):hover){--lens-x:65.278%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(205):hover){--lens-x:68.056%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(206):hover){--lens-x:70.833%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(207):hover){--lens-x:73.611%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(208):hover){--lens-x:76.389%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(209):hover){--lens-x:79.167%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(210):hover){--lens-x:81.944%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(211):hover){--lens-x:84.722%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(212):hover){--lens-x:87.500%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(213):hover){--lens-x:90.278%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(214):hover){--lens-x:93.056%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(215):hover){--lens-x:95.833%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(216):hover){--lens-x:98.611%;--lens-y:22.917%}.hero:has(.hero-lens-zones i:nth-child(217):hover){--lens-x:1.389%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(218):hover){--lens-x:4.167%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(219):hover){--lens-x:6.944%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(220):hover){--lens-x:9.722%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(221):hover){--lens-x:12.500%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(222):hover){--lens-x:15.278%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(223):hover){--lens-x:18.056%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(224):hover){--lens-x:20.833%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(225):hover){--lens-x:23.611%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(226):hover){--lens-x:26.389%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(227):hover){--lens-x:29.167%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(228):hover){--lens-x:31.944%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(229):hover){--lens-x:34.722%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(230):hover){--lens-x:37.500%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(231):hover){--lens-x:40.278%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(232):hover){--lens-x:43.056%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(233):hover){--lens-x:45.833%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(234):hover){--lens-x:48.611%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(235):hover){--lens-x:51.389%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(236):hover){--lens-x:54.167%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(237):hover){--lens-x:56.944%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(238):hover){--lens-x:59.722%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(239):hover){--lens-x:62.500%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(240):hover){--lens-x:65.278%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(241):hover){--lens-x:68.056%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(242):hover){--lens-x:70.833%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(243):hover){--lens-x:73.611%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(244):hover){--lens-x:76.389%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(245):hover){--lens-x:79.167%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(246):hover){--lens-x:81.944%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(247):hover){--lens-x:84.722%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(248):hover){--lens-x:87.500%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(249):hover){--lens-x:90.278%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(250):hover){--lens-x:93.056%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(251):hover){--lens-x:95.833%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(252):hover){--lens-x:98.611%;--lens-y:27.083%}.hero:has(.hero-lens-zones i:nth-child(253):hover){--lens-x:1.389%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(254):hover){--lens-x:4.167%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(255):hover){--lens-x:6.944%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(256):hover){--lens-x:9.722%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(257):hover){--lens-x:12.500%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(258):hover){--lens-x:15.278%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(259):hover){--lens-x:18.056%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(260):hover){--lens-x:20.833%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(261):hover){--lens-x:23.611%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(262):hover){--lens-x:26.389%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(263):hover){--lens-x:29.167%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(264):hover){--lens-x:31.944%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(265):hover){--lens-x:34.722%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(266):hover){--lens-x:37.500%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(267):hover){--lens-x:40.278%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(268):hover){--lens-x:43.056%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(269):hover){--lens-x:45.833%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(270):hover){--lens-x:48.611%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(271):hover){--lens-x:51.389%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(272):hover){--lens-x:54.167%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(273):hover){--lens-x:56.944%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(274):hover){--lens-x:59.722%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(275):hover){--lens-x:62.500%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(276):hover){--lens-x:65.278%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(277):hover){--lens-x:68.056%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(278):hover){--lens-x:70.833%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(279):hover){--lens-x:73.611%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(280):hover){--lens-x:76.389%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(281):hover){--lens-x:79.167%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(282):hover){--lens-x:81.944%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(283):hover){--lens-x:84.722%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(284):hover){--lens-x:87.500%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(285):hover){--lens-x:90.278%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(286):hover){--lens-x:93.056%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(287):hover){--lens-x:95.833%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(288):hover){--lens-x:98.611%;--lens-y:31.250%}.hero:has(.hero-lens-zones i:nth-child(289):hover){--lens-x:1.389%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(290):hover){--lens-x:4.167%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(291):hover){--lens-x:6.944%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(292):hover){--lens-x:9.722%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(293):hover){--lens-x:12.500%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(294):hover){--lens-x:15.278%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(295):hover){--lens-x:18.056%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(296):hover){--lens-x:20.833%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(297):hover){--lens-x:23.611%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(298):hover){--lens-x:26.389%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(299):hover){--lens-x:29.167%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(300):hover){--lens-x:31.944%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(301):hover){--lens-x:34.722%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(302):hover){--lens-x:37.500%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(303):hover){--lens-x:40.278%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(304):hover){--lens-x:43.056%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(305):hover){--lens-x:45.833%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(306):hover){--lens-x:48.611%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(307):hover){--lens-x:51.389%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(308):hover){--lens-x:54.167%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(309):hover){--lens-x:56.944%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(310):hover){--lens-x:59.722%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(311):hover){--lens-x:62.500%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(312):hover){--lens-x:65.278%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(313):hover){--lens-x:68.056%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(314):hover){--lens-x:70.833%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(315):hover){--lens-x:73.611%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(316):hover){--lens-x:76.389%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(317):hover){--lens-x:79.167%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(318):hover){--lens-x:81.944%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(319):hover){--lens-x:84.722%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(320):hover){--lens-x:87.500%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(321):hover){--lens-x:90.278%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(322):hover){--lens-x:93.056%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(323):hover){--lens-x:95.833%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(324):hover){--lens-x:98.611%;--lens-y:35.417%}.hero:has(.hero-lens-zones i:nth-child(325):hover){--lens-x:1.389%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(326):hover){--lens-x:4.167%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(327):hover){--lens-x:6.944%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(328):hover){--lens-x:9.722%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(329):hover){--lens-x:12.500%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(330):hover){--lens-x:15.278%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(331):hover){--lens-x:18.056%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(332):hover){--lens-x:20.833%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(333):hover){--lens-x:23.611%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(334):hover){--lens-x:26.389%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(335):hover){--lens-x:29.167%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(336):hover){--lens-x:31.944%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(337):hover){--lens-x:34.722%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(338):hover){--lens-x:37.500%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(339):hover){--lens-x:40.278%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(340):hover){--lens-x:43.056%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(341):hover){--lens-x:45.833%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(342):hover){--lens-x:48.611%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(343):hover){--lens-x:51.389%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(344):hover){--lens-x:54.167%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(345):hover){--lens-x:56.944%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(346):hover){--lens-x:59.722%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(347):hover){--lens-x:62.500%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(348):hover){--lens-x:65.278%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(349):hover){--lens-x:68.056%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(350):hover){--lens-x:70.833%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(351):hover){--lens-x:73.611%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(352):hover){--lens-x:76.389%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(353):hover){--lens-x:79.167%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(354):hover){--lens-x:81.944%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(355):hover){--lens-x:84.722%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(356):hover){--lens-x:87.500%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(357):hover){--lens-x:90.278%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(358):hover){--lens-x:93.056%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(359):hover){--lens-x:95.833%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(360):hover){--lens-x:98.611%;--lens-y:39.583%}.hero:has(.hero-lens-zones i:nth-child(361):hover){--lens-x:1.389%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(362):hover){--lens-x:4.167%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(363):hover){--lens-x:6.944%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(364):hover){--lens-x:9.722%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(365):hover){--lens-x:12.500%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(366):hover){--lens-x:15.278%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(367):hover){--lens-x:18.056%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(368):hover){--lens-x:20.833%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(369):hover){--lens-x:23.611%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(370):hover){--lens-x:26.389%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(371):hover){--lens-x:29.167%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(372):hover){--lens-x:31.944%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(373):hover){--lens-x:34.722%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(374):hover){--lens-x:37.500%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(375):hover){--lens-x:40.278%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(376):hover){--lens-x:43.056%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(377):hover){--lens-x:45.833%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(378):hover){--lens-x:48.611%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(379):hover){--lens-x:51.389%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(380):hover){--lens-x:54.167%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(381):hover){--lens-x:56.944%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(382):hover){--lens-x:59.722%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(383):hover){--lens-x:62.500%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(384):hover){--lens-x:65.278%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(385):hover){--lens-x:68.056%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(386):hover){--lens-x:70.833%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(387):hover){--lens-x:73.611%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(388):hover){--lens-x:76.389%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(389):hover){--lens-x:79.167%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(390):hover){--lens-x:81.944%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(391):hover){--lens-x:84.722%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(392):hover){--lens-x:87.500%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(393):hover){--lens-x:90.278%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(394):hover){--lens-x:93.056%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(395):hover){--lens-x:95.833%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(396):hover){--lens-x:98.611%;--lens-y:43.750%}.hero:has(.hero-lens-zones i:nth-child(397):hover){--lens-x:1.389%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(398):hover){--lens-x:4.167%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(399):hover){--lens-x:6.944%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(400):hover){--lens-x:9.722%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(401):hover){--lens-x:12.500%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(402):hover){--lens-x:15.278%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(403):hover){--lens-x:18.056%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(404):hover){--lens-x:20.833%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(405):hover){--lens-x:23.611%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(406):hover){--lens-x:26.389%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(407):hover){--lens-x:29.167%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(408):hover){--lens-x:31.944%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(409):hover){--lens-x:34.722%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(410):hover){--lens-x:37.500%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(411):hover){--lens-x:40.278%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(412):hover){--lens-x:43.056%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(413):hover){--lens-x:45.833%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(414):hover){--lens-x:48.611%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(415):hover){--lens-x:51.389%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(416):hover){--lens-x:54.167%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(417):hover){--lens-x:56.944%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(418):hover){--lens-x:59.722%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(419):hover){--lens-x:62.500%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(420):hover){--lens-x:65.278%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(421):hover){--lens-x:68.056%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(422):hover){--lens-x:70.833%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(423):hover){--lens-x:73.611%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(424):hover){--lens-x:76.389%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(425):hover){--lens-x:79.167%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(426):hover){--lens-x:81.944%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(427):hover){--lens-x:84.722%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(428):hover){--lens-x:87.500%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(429):hover){--lens-x:90.278%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(430):hover){--lens-x:93.056%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(431):hover){--lens-x:95.833%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(432):hover){--lens-x:98.611%;--lens-y:47.917%}.hero:has(.hero-lens-zones i:nth-child(433):hover){--lens-x:1.389%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(434):hover){--lens-x:4.167%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(435):hover){--lens-x:6.944%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(436):hover){--lens-x:9.722%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(437):hover){--lens-x:12.500%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(438):hover){--lens-x:15.278%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(439):hover){--lens-x:18.056%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(440):hover){--lens-x:20.833%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(441):hover){--lens-x:23.611%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(442):hover){--lens-x:26.389%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(443):hover){--lens-x:29.167%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(444):hover){--lens-x:31.944%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(445):hover){--lens-x:34.722%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(446):hover){--lens-x:37.500%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(447):hover){--lens-x:40.278%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(448):hover){--lens-x:43.056%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(449):hover){--lens-x:45.833%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(450):hover){--lens-x:48.611%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(451):hover){--lens-x:51.389%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(452):hover){--lens-x:54.167%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(453):hover){--lens-x:56.944%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(454):hover){--lens-x:59.722%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(455):hover){--lens-x:62.500%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(456):hover){--lens-x:65.278%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(457):hover){--lens-x:68.056%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(458):hover){--lens-x:70.833%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(459):hover){--lens-x:73.611%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(460):hover){--lens-x:76.389%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(461):hover){--lens-x:79.167%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(462):hover){--lens-x:81.944%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(463):hover){--lens-x:84.722%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(464):hover){--lens-x:87.500%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(465):hover){--lens-x:90.278%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(466):hover){--lens-x:93.056%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(467):hover){--lens-x:95.833%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(468):hover){--lens-x:98.611%;--lens-y:52.083%}.hero:has(.hero-lens-zones i:nth-child(469):hover){--lens-x:1.389%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(470):hover){--lens-x:4.167%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(471):hover){--lens-x:6.944%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(472):hover){--lens-x:9.722%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(473):hover){--lens-x:12.500%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(474):hover){--lens-x:15.278%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(475):hover){--lens-x:18.056%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(476):hover){--lens-x:20.833%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(477):hover){--lens-x:23.611%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(478):hover){--lens-x:26.389%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(479):hover){--lens-x:29.167%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(480):hover){--lens-x:31.944%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(481):hover){--lens-x:34.722%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(482):hover){--lens-x:37.500%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(483):hover){--lens-x:40.278%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(484):hover){--lens-x:43.056%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(485):hover){--lens-x:45.833%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(486):hover){--lens-x:48.611%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(487):hover){--lens-x:51.389%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(488):hover){--lens-x:54.167%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(489):hover){--lens-x:56.944%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(490):hover){--lens-x:59.722%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(491):hover){--lens-x:62.500%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(492):hover){--lens-x:65.278%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(493):hover){--lens-x:68.056%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(494):hover){--lens-x:70.833%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(495):hover){--lens-x:73.611%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(496):hover){--lens-x:76.389%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(497):hover){--lens-x:79.167%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(498):hover){--lens-x:81.944%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(499):hover){--lens-x:84.722%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(500):hover){--lens-x:87.500%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(501):hover){--lens-x:90.278%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(502):hover){--lens-x:93.056%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(503):hover){--lens-x:95.833%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(504):hover){--lens-x:98.611%;--lens-y:56.250%}.hero:has(.hero-lens-zones i:nth-child(505):hover){--lens-x:1.389%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(506):hover){--lens-x:4.167%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(507):hover){--lens-x:6.944%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(508):hover){--lens-x:9.722%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(509):hover){--lens-x:12.500%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(510):hover){--lens-x:15.278%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(511):hover){--lens-x:18.056%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(512):hover){--lens-x:20.833%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(513):hover){--lens-x:23.611%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(514):hover){--lens-x:26.389%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(515):hover){--lens-x:29.167%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(516):hover){--lens-x:31.944%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(517):hover){--lens-x:34.722%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(518):hover){--lens-x:37.500%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(519):hover){--lens-x:40.278%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(520):hover){--lens-x:43.056%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(521):hover){--lens-x:45.833%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(522):hover){--lens-x:48.611%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(523):hover){--lens-x:51.389%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(524):hover){--lens-x:54.167%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(525):hover){--lens-x:56.944%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(526):hover){--lens-x:59.722%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(527):hover){--lens-x:62.500%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(528):hover){--lens-x:65.278%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(529):hover){--lens-x:68.056%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(530):hover){--lens-x:70.833%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(531):hover){--lens-x:73.611%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(532):hover){--lens-x:76.389%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(533):hover){--lens-x:79.167%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(534):hover){--lens-x:81.944%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(535):hover){--lens-x:84.722%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(536):hover){--lens-x:87.500%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(537):hover){--lens-x:90.278%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(538):hover){--lens-x:93.056%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(539):hover){--lens-x:95.833%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(540):hover){--lens-x:98.611%;--lens-y:60.417%}.hero:has(.hero-lens-zones i:nth-child(541):hover){--lens-x:1.389%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(542):hover){--lens-x:4.167%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(543):hover){--lens-x:6.944%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(544):hover){--lens-x:9.722%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(545):hover){--lens-x:12.500%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(546):hover){--lens-x:15.278%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(547):hover){--lens-x:18.056%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(548):hover){--lens-x:20.833%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(549):hover){--lens-x:23.611%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(550):hover){--lens-x:26.389%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(551):hover){--lens-x:29.167%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(552):hover){--lens-x:31.944%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(553):hover){--lens-x:34.722%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(554):hover){--lens-x:37.500%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(555):hover){--lens-x:40.278%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(556):hover){--lens-x:43.056%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(557):hover){--lens-x:45.833%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(558):hover){--lens-x:48.611%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(559):hover){--lens-x:51.389%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(560):hover){--lens-x:54.167%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(561):hover){--lens-x:56.944%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(562):hover){--lens-x:59.722%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(563):hover){--lens-x:62.500%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(564):hover){--lens-x:65.278%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(565):hover){--lens-x:68.056%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(566):hover){--lens-x:70.833%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(567):hover){--lens-x:73.611%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(568):hover){--lens-x:76.389%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(569):hover){--lens-x:79.167%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(570):hover){--lens-x:81.944%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(571):hover){--lens-x:84.722%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(572):hover){--lens-x:87.500%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(573):hover){--lens-x:90.278%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(574):hover){--lens-x:93.056%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(575):hover){--lens-x:95.833%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(576):hover){--lens-x:98.611%;--lens-y:64.583%}.hero:has(.hero-lens-zones i:nth-child(577):hover){--lens-x:1.389%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(578):hover){--lens-x:4.167%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(579):hover){--lens-x:6.944%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(580):hover){--lens-x:9.722%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(581):hover){--lens-x:12.500%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(582):hover){--lens-x:15.278%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(583):hover){--lens-x:18.056%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(584):hover){--lens-x:20.833%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(585):hover){--lens-x:23.611%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(586):hover){--lens-x:26.389%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(587):hover){--lens-x:29.167%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(588):hover){--lens-x:31.944%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(589):hover){--lens-x:34.722%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(590):hover){--lens-x:37.500%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(591):hover){--lens-x:40.278%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(592):hover){--lens-x:43.056%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(593):hover){--lens-x:45.833%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(594):hover){--lens-x:48.611%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(595):hover){--lens-x:51.389%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(596):hover){--lens-x:54.167%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(597):hover){--lens-x:56.944%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(598):hover){--lens-x:59.722%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(599):hover){--lens-x:62.500%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(600):hover){--lens-x:65.278%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(601):hover){--lens-x:68.056%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(602):hover){--lens-x:70.833%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(603):hover){--lens-x:73.611%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(604):hover){--lens-x:76.389%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(605):hover){--lens-x:79.167%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(606):hover){--lens-x:81.944%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(607):hover){--lens-x:84.722%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(608):hover){--lens-x:87.500%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(609):hover){--lens-x:90.278%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(610):hover){--lens-x:93.056%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(611):hover){--lens-x:95.833%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(612):hover){--lens-x:98.611%;--lens-y:68.750%}.hero:has(.hero-lens-zones i:nth-child(613):hover){--lens-x:1.389%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(614):hover){--lens-x:4.167%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(615):hover){--lens-x:6.944%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(616):hover){--lens-x:9.722%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(617):hover){--lens-x:12.500%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(618):hover){--lens-x:15.278%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(619):hover){--lens-x:18.056%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(620):hover){--lens-x:20.833%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(621):hover){--lens-x:23.611%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(622):hover){--lens-x:26.389%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(623):hover){--lens-x:29.167%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(624):hover){--lens-x:31.944%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(625):hover){--lens-x:34.722%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(626):hover){--lens-x:37.500%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(627):hover){--lens-x:40.278%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(628):hover){--lens-x:43.056%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(629):hover){--lens-x:45.833%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(630):hover){--lens-x:48.611%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(631):hover){--lens-x:51.389%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(632):hover){--lens-x:54.167%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(633):hover){--lens-x:56.944%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(634):hover){--lens-x:59.722%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(635):hover){--lens-x:62.500%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(636):hover){--lens-x:65.278%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(637):hover){--lens-x:68.056%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(638):hover){--lens-x:70.833%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(639):hover){--lens-x:73.611%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(640):hover){--lens-x:76.389%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(641):hover){--lens-x:79.167%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(642):hover){--lens-x:81.944%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(643):hover){--lens-x:84.722%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(644):hover){--lens-x:87.500%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(645):hover){--lens-x:90.278%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(646):hover){--lens-x:93.056%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(647):hover){--lens-x:95.833%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(648):hover){--lens-x:98.611%;--lens-y:72.917%}.hero:has(.hero-lens-zones i:nth-child(649):hover){--lens-x:1.389%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(650):hover){--lens-x:4.167%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(651):hover){--lens-x:6.944%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(652):hover){--lens-x:9.722%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(653):hover){--lens-x:12.500%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(654):hover){--lens-x:15.278%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(655):hover){--lens-x:18.056%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(656):hover){--lens-x:20.833%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(657):hover){--lens-x:23.611%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(658):hover){--lens-x:26.389%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(659):hover){--lens-x:29.167%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(660):hover){--lens-x:31.944%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(661):hover){--lens-x:34.722%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(662):hover){--lens-x:37.500%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(663):hover){--lens-x:40.278%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(664):hover){--lens-x:43.056%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(665):hover){--lens-x:45.833%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(666):hover){--lens-x:48.611%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(667):hover){--lens-x:51.389%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(668):hover){--lens-x:54.167%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(669):hover){--lens-x:56.944%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(670):hover){--lens-x:59.722%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(671):hover){--lens-x:62.500%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(672):hover){--lens-x:65.278%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(673):hover){--lens-x:68.056%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(674):hover){--lens-x:70.833%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(675):hover){--lens-x:73.611%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(676):hover){--lens-x:76.389%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(677):hover){--lens-x:79.167%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(678):hover){--lens-x:81.944%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(679):hover){--lens-x:84.722%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(680):hover){--lens-x:87.500%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(681):hover){--lens-x:90.278%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(682):hover){--lens-x:93.056%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(683):hover){--lens-x:95.833%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(684):hover){--lens-x:98.611%;--lens-y:77.083%}.hero:has(.hero-lens-zones i:nth-child(685):hover){--lens-x:1.389%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(686):hover){--lens-x:4.167%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(687):hover){--lens-x:6.944%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(688):hover){--lens-x:9.722%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(689):hover){--lens-x:12.500%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(690):hover){--lens-x:15.278%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(691):hover){--lens-x:18.056%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(692):hover){--lens-x:20.833%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(693):hover){--lens-x:23.611%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(694):hover){--lens-x:26.389%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(695):hover){--lens-x:29.167%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(696):hover){--lens-x:31.944%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(697):hover){--lens-x:34.722%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(698):hover){--lens-x:37.500%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(699):hover){--lens-x:40.278%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(700):hover){--lens-x:43.056%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(701):hover){--lens-x:45.833%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(702):hover){--lens-x:48.611%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(703):hover){--lens-x:51.389%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(704):hover){--lens-x:54.167%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(705):hover){--lens-x:56.944%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(706):hover){--lens-x:59.722%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(707):hover){--lens-x:62.500%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(708):hover){--lens-x:65.278%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(709):hover){--lens-x:68.056%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(710):hover){--lens-x:70.833%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(711):hover){--lens-x:73.611%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(712):hover){--lens-x:76.389%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(713):hover){--lens-x:79.167%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(714):hover){--lens-x:81.944%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(715):hover){--lens-x:84.722%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(716):hover){--lens-x:87.500%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(717):hover){--lens-x:90.278%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(718):hover){--lens-x:93.056%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(719):hover){--lens-x:95.833%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(720):hover){--lens-x:98.611%;--lens-y:81.250%}.hero:has(.hero-lens-zones i:nth-child(721):hover){--lens-x:1.389%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(722):hover){--lens-x:4.167%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(723):hover){--lens-x:6.944%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(724):hover){--lens-x:9.722%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(725):hover){--lens-x:12.500%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(726):hover){--lens-x:15.278%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(727):hover){--lens-x:18.056%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(728):hover){--lens-x:20.833%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(729):hover){--lens-x:23.611%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(730):hover){--lens-x:26.389%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(731):hover){--lens-x:29.167%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(732):hover){--lens-x:31.944%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(733):hover){--lens-x:34.722%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(734):hover){--lens-x:37.500%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(735):hover){--lens-x:40.278%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(736):hover){--lens-x:43.056%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(737):hover){--lens-x:45.833%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(738):hover){--lens-x:48.611%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(739):hover){--lens-x:51.389%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(740):hover){--lens-x:54.167%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(741):hover){--lens-x:56.944%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(742):hover){--lens-x:59.722%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(743):hover){--lens-x:62.500%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(744):hover){--lens-x:65.278%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(745):hover){--lens-x:68.056%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(746):hover){--lens-x:70.833%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(747):hover){--lens-x:73.611%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(748):hover){--lens-x:76.389%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(749):hover){--lens-x:79.167%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(750):hover){--lens-x:81.944%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(751):hover){--lens-x:84.722%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(752):hover){--lens-x:87.500%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(753):hover){--lens-x:90.278%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(754):hover){--lens-x:93.056%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(755):hover){--lens-x:95.833%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(756):hover){--lens-x:98.611%;--lens-y:85.417%}.hero:has(.hero-lens-zones i:nth-child(757):hover){--lens-x:1.389%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(758):hover){--lens-x:4.167%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(759):hover){--lens-x:6.944%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(760):hover){--lens-x:9.722%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(761):hover){--lens-x:12.500%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(762):hover){--lens-x:15.278%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(763):hover){--lens-x:18.056%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(764):hover){--lens-x:20.833%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(765):hover){--lens-x:23.611%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(766):hover){--lens-x:26.389%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(767):hover){--lens-x:29.167%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(768):hover){--lens-x:31.944%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(769):hover){--lens-x:34.722%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(770):hover){--lens-x:37.500%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(771):hover){--lens-x:40.278%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(772):hover){--lens-x:43.056%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(773):hover){--lens-x:45.833%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(774):hover){--lens-x:48.611%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(775):hover){--lens-x:51.389%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(776):hover){--lens-x:54.167%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(777):hover){--lens-x:56.944%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(778):hover){--lens-x:59.722%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(779):hover){--lens-x:62.500%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(780):hover){--lens-x:65.278%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(781):hover){--lens-x:68.056%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(782):hover){--lens-x:70.833%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(783):hover){--lens-x:73.611%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(784):hover){--lens-x:76.389%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(785):hover){--lens-x:79.167%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(786):hover){--lens-x:81.944%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(787):hover){--lens-x:84.722%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(788):hover){--lens-x:87.500%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(789):hover){--lens-x:90.278%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(790):hover){--lens-x:93.056%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(791):hover){--lens-x:95.833%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(792):hover){--lens-x:98.611%;--lens-y:89.583%}.hero:has(.hero-lens-zones i:nth-child(793):hover){--lens-x:1.389%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(794):hover){--lens-x:4.167%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(795):hover){--lens-x:6.944%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(796):hover){--lens-x:9.722%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(797):hover){--lens-x:12.500%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(798):hover){--lens-x:15.278%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(799):hover){--lens-x:18.056%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(800):hover){--lens-x:20.833%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(801):hover){--lens-x:23.611%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(802):hover){--lens-x:26.389%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(803):hover){--lens-x:29.167%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(804):hover){--lens-x:31.944%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(805):hover){--lens-x:34.722%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(806):hover){--lens-x:37.500%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(807):hover){--lens-x:40.278%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(808):hover){--lens-x:43.056%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(809):hover){--lens-x:45.833%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(810):hover){--lens-x:48.611%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(811):hover){--lens-x:51.389%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(812):hover){--lens-x:54.167%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(813):hover){--lens-x:56.944%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(814):hover){--lens-x:59.722%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(815):hover){--lens-x:62.500%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(816):hover){--lens-x:65.278%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(817):hover){--lens-x:68.056%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(818):hover){--lens-x:70.833%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(819):hover){--lens-x:73.611%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(820):hover){--lens-x:76.389%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(821):hover){--lens-x:79.167%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(822):hover){--lens-x:81.944%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(823):hover){--lens-x:84.722%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(824):hover){--lens-x:87.500%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(825):hover){--lens-x:90.278%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(826):hover){--lens-x:93.056%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(827):hover){--lens-x:95.833%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(828):hover){--lens-x:98.611%;--lens-y:93.750%}.hero:has(.hero-lens-zones i:nth-child(829):hover){--lens-x:1.389%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(830):hover){--lens-x:4.167%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(831):hover){--lens-x:6.944%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(832):hover){--lens-x:9.722%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(833):hover){--lens-x:12.500%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(834):hover){--lens-x:15.278%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(835):hover){--lens-x:18.056%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(836):hover){--lens-x:20.833%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(837):hover){--lens-x:23.611%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(838):hover){--lens-x:26.389%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(839):hover){--lens-x:29.167%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(840):hover){--lens-x:31.944%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(841):hover){--lens-x:34.722%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(842):hover){--lens-x:37.500%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(843):hover){--lens-x:40.278%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(844):hover){--lens-x:43.056%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(845):hover){--lens-x:45.833%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(846):hover){--lens-x:48.611%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(847):hover){--lens-x:51.389%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(848):hover){--lens-x:54.167%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(849):hover){--lens-x:56.944%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(850):hover){--lens-x:59.722%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(851):hover){--lens-x:62.500%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(852):hover){--lens-x:65.278%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(853):hover){--lens-x:68.056%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(854):hover){--lens-x:70.833%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(855):hover){--lens-x:73.611%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(856):hover){--lens-x:76.389%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(857):hover){--lens-x:79.167%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(858):hover){--lens-x:81.944%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(859):hover){--lens-x:84.722%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(860):hover){--lens-x:87.500%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(861):hover){--lens-x:90.278%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(862):hover){--lens-x:93.056%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(863):hover){--lens-x:95.833%;--lens-y:97.917%}.hero:has(.hero-lens-zones i:nth-child(864):hover){--lens-x:98.611%;--lens-y:97.917%}

/* 局部显色通用结构：经过、停留、看见共用。 */
.photo-reveal { position:relative; overflow:hidden; --focus-x:50%; --focus-y:50%; }
.photo-reveal > img:first-child { position:relative; z-index:1; }
.photo-reveal > .photo-colour {
    position:absolute; z-index:2; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:inherit;
    clip-path:circle(0 at var(--focus-x) var(--focus-y));
    transition:clip-path .16s linear; pointer-events:none;
}
.photo-focus-zones {
    position:absolute; z-index:3; inset:0; display:grid;
    grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(4,1fr);
}
.photo-focus-zones i { display:block; min-width:0; min-height:0; }
.photo-reveal:has(.photo-focus-zones i:hover) > .photo-colour { clip-path:circle(28% at var(--focus-x) var(--focus-y)); }
.photo-reveal:has(.photo-focus-zones i:nth-child(1):hover){--focus-x:10.0%;--focus-y:12.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(2):hover){--focus-x:30.0%;--focus-y:12.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(3):hover){--focus-x:50.0%;--focus-y:12.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(4):hover){--focus-x:70.0%;--focus-y:12.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(5):hover){--focus-x:90.0%;--focus-y:12.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(6):hover){--focus-x:10.0%;--focus-y:37.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(7):hover){--focus-x:30.0%;--focus-y:37.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(8):hover){--focus-x:50.0%;--focus-y:37.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(9):hover){--focus-x:70.0%;--focus-y:37.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(10):hover){--focus-x:90.0%;--focus-y:37.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(11):hover){--focus-x:10.0%;--focus-y:62.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(12):hover){--focus-x:30.0%;--focus-y:62.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(13):hover){--focus-x:50.0%;--focus-y:62.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(14):hover){--focus-x:70.0%;--focus-y:62.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(15):hover){--focus-x:90.0%;--focus-y:62.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(16):hover){--focus-x:10.0%;--focus-y:87.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(17):hover){--focus-x:30.0%;--focus-y:87.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(18):hover){--focus-x:50.0%;--focus-y:87.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(19):hover){--focus-x:70.0%;--focus-y:87.5%}.photo-reveal:has(.photo-focus-zones i:nth-child(20):hover){--focus-x:90.0%;--focus-y:87.5%}

/* 经过：不改变原有 photo-story 尺寸，只叠加彩色层。 */
.passing-reveal > img { width:100%; height:100%; object-fit:cover; display:block; }

/* 停留：由“点击整张显色”改为“鼠标位置局部显色”。 */
.staying-reveal, .staying-reveal > img { width:100%; height:100%; }
.staying-reveal > img { object-fit:cover; }

/* 离开：保留原有滚动褪色 / 颗粒效果。 */
.about__photo .photo-reveal { position:relative; overflow:hidden; }
.leave-colour { position:absolute; z-index:2; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; pointer-events:none; }
.leave-grain { position:absolute; z-index:3; inset:0; pointer-events:none; opacity:0; background-image:radial-gradient(circle,rgba(235,231,220,.58) 0 1px,transparent 1.4px); background-size:13px 13px; mix-blend-mode:screen; }
@supports (animation-timeline:view()) {
 .leave-colour { animation:leave-colour-fade linear both; animation-timeline:view(); animation-range:entry 12% cover 70%; }
 .leave-grain { animation:leave-grain-disperses linear both; animation-timeline:view(); animation-range:entry 30% cover 90%; }
}
@keyframes leave-colour-fade { 0%,22%{opacity:1;filter:none} 72%{opacity:.15;filter:grayscale(.8)} 100%{opacity:0;filter:grayscale(1)} }
@keyframes leave-grain-disperses { 0%{opacity:0;transform:scale(.98)} 35%{opacity:.55} 100%{opacity:0;transform:scale(1.08);background-size:22px 22px} }

@media (hover:none) {
 .hero-lens-zones,.hero-lens-ring { display:none; }
 .photo-focus-zones,.photo-colour { display:none; }
}
@media (prefers-reduced-motion:reduce) {
 .hero-lens-scene,.hero-lens-ring,.photo-colour,.leave-colour,.leave-grain { transition:none!important; animation:none!important; }
}


/* =========================================================
   V3 交互完善｜首页全屏镜头 + 离开局部显色
   仍然只使用 HTML + CSS。
   ========================================================= */

/* 首页：感应层真正覆盖首屏，包括顶部 Header 与右侧人物照片。 */
.hero-lens-zones {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(36, 1fr);
    grid-template-rows: repeat(24, 1fr);
}

/* 让首屏所有区域都由镜头感应层接收鼠标；视觉排版完全不变。 */
.site-header { pointer-events: none; }

/* 镜头里的场景也按整个浏览器首屏铺满，而不是只铺 Hero 内部。 */
.hero-lens-scene {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("https://res.cloudinary.com/qedze54q/image/upload/v1790181131/lens-scene.webp");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 97;
}

.hero-lens-ring {
    position: fixed;
    z-index: 99;
}

/* 镜头圆心移动更紧凑，降低格子之间的“停顿感”。 */
.hero-lens-scene {
    transition: clip-path .065s linear, opacity .08s ease;
}
.hero-lens-ring {
    transition: left .065s linear, top .065s linear, opacity .08s ease, transform .08s ease;
}

/* 离开：取消原来的滚动褪色，改成与经过 / 停留 / 看见一致的鼠标局部显色。 */
.leave-reveal > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.leave-reveal > .leave-colour {
    animation: none !important;
    opacity: 1;
    filter: none;
    transition: clip-path .12s ease-out;
}
.leave-reveal:has(.photo-focus-zones i:hover) > .leave-colour {
    clip-path: circle(28% at var(--focus-x) var(--focus-y));
}
.leave-grain { display: none !important; }

/* 离开照片同样使用 5 × 4 的透明感应网格。 */
.leave-reveal .photo-focus-zones {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

/* 离开首屏后，不让首页的 fixed 感应层继续挡住后续内容。
   现代 Chrome/Edge 支持 animation-timeline:view()，纯 CSS 完成。 */
@supports (animation-timeline: view()) {
    .hero-lens-zones {
        animation: hero-hit-layer linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 815px;
    }
    @keyframes hero-hit-layer {
        0%, 98% { visibility: visible; pointer-events: auto; }
        100% { visibility: hidden; pointer-events: none; }
    }
}

@media (max-width: 1024px), (hover: none) {
    .hero-lens-zones { display: none; }
    .site-header { pointer-events: auto; }
}

/* ===== Three-font system =====
   1. Noto Serif SC: Chinese narrative / large section titles
   2. Montserrat: navigation, labels, numbers and functional English
   3. Caveat: handwritten accent text only
   Each stack includes safe fallback fonts.
   ================================= */
.site-logo__en,
.eyebrow,
small,
.hero__lead-en,
.section-intro-en,
.trace__note-en,
.site-footer__bottom > span {
    font-family: "Montserrat", Arial, sans-serif;
}

/* Handwritten accent: keep Caveat limited so the documentary layout stays restrained. */
.street-quote,
.street-quotes blockquote,
.handwritten {
    font-family: "Caveat", "Trebuchet MS", Arial, sans-serif;
}

/* ---------- Route map Chinese font fallback fix ----------
   Keep the original SVG coordinates, size and colors unchanged.
   These labels use system Chinese fonts directly so the Latin-only
   webfont files cannot hide the Chinese glyphs inside SVG <text>. */
.route-map__streets text {
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
    font-weight: 400;
    opacity: 1;
}

.route-map__points .route-point__title {
    font-family: Tinos, "Times New Roman", "Songti SC", SimSun, serif;
}


/* ===== Preferred Chinese typography restored from 含动画(5) ===== */
.about__text {
    font-family: "STXingkai", "华文行楷", "Kaiti SC", "STKaiti", "KaiTi", cursive;
    font-weight: 400;
}

.about__text > p:not(.about__concept) {
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.045em;
}

.about__concept {
    font-family: Tinos, "Times New Roman", serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .85px;
    white-space: nowrap;
}

.about__concept + small {
    font-family: Tinos, "Times New Roman", serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: .8px;
    white-space: nowrap;
}


/* =========================================================
   13. CSS-only interaction details
   仅使用 :hover / transition / @keyframes，不使用 JavaScript
   ========================================================= */

/* 首页：向下箭头悬停填充红色并轻微下移 */
.walk-button__arrow {
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.walk-button__arrow:hover {
    background: #c23d33;
    border-color: #c23d33;
    transform: translateY(4px);
}

/* 首页导航：悬停时横线从中间展开 */
.site-nav__item a {
    position: relative;
}

.site-nav__item a::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 0;
    height: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: width .28s ease;
    pointer-events: none;
}

.site-nav__item a:hover::after {
    width: 108%;
}

/* 黑白照片：四角取景框鼠标样式；原有局部显色交互保持不变 */
.photo-reveal {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M2 11V2h9M23 2h9v9M32 23v9h-9M11 32H2v-9' fill='none' stroke='%23f2eee7' stroke-width='2'/%3E%3Cpath d='M3 11V3h8M23 3h8v8M31 23v8h-8M11 31H3v-8' fill='none' stroke='%23111111' stroke-width='.65' opacity='.7'/%3E%3C/svg%3E") 17 17, crosshair;
}



/* “查看此刻”：悬停时由深色切换为浅色信息卡 */
.frame-link {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.frame-link:hover {
    background: #e9e6df;
    color: #292927;
    border-color: #e9e6df;
    opacity: 1;
    transform: translateY(-2px);
}

/* 停留：街边语录横向无缝循环 */
.street-quotes__track {
    gap: 0;
    animation: streetQuotesLoop 30s linear infinite;
    will-change: transform;
}

.street-quotes__group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 29px;
    padding-right: 29px;
}

@keyframes streetQuotesLoop {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.street-quotes:hover .street-quotes__track {
    animation-play-state: paused;
}

/* Chrome / Edge：原生 audio 播放键悬停时加入红色反馈 */
.native-audio {
    transition: filter .22s ease;
}

.native-audio:hover::-webkit-media-controls-play-button {
    background-color: #c23d33;
    border-radius: 50%;
}

/* 轨迹：现有四枚红色 SVG 脚印按顺序出现，模拟行走 */
.route-map__footprints image {
    opacity: .16;
    transform-box: fill-box;
    transform-origin: center;
    animation: routeFootStep 3.2s ease-in-out infinite;
}

.route-map__footprints image:nth-child(1) { animation-delay: 0s; }
.route-map__footprints image:nth-child(2) { animation-delay: .55s; }
.route-map__footprints image:nth-child(3) { animation-delay: 1.10s; }
.route-map__footprints image:nth-child(4) { animation-delay: 1.65s; }

@keyframes routeFootStep {
    0%, 18%, 100% { opacity: .10; transform: translateY(2px) scale(.92); }
    28%, 48% { opacity: .95; transform: translateY(0) scale(1); }
    62% { opacity: .32; transform: translateY(-1px) scale(.98); }
}

/* Footer：三个导航词悬停变红 */
.site-footer__nav a {
    transition: color .22s ease;
}

.site-footer__nav a:hover {
    color: #c23d33;
}

@media (prefers-reduced-motion: reduce) {
    .street-quotes__track,
    .route-map__footprints image {
        animation: none;
    }
}


/* =========================================================
   轨迹｜8 枚红色脚印：北 → 南依次若隐若现
   复用现有 SVG 脚印；纯 CSS，不使用 JavaScript。
   ========================================================= */
.route-map__footprints {
    display: block;
    pointer-events: none;
}

.route-map__footprints image {
    display: block;
    visibility: visible;
    opacity: .22;
    transform-box: fill-box;
    transform-origin: center;
    animation: routeFootstepNorthSouth 6.4s ease-in-out infinite;
}

.route-map__footprints image:nth-child(1) { animation-delay: 0s; }
.route-map__footprints image:nth-child(2) { animation-delay: .55s; }
.route-map__footprints image:nth-child(3) { animation-delay: 1.10s; }
.route-map__footprints image:nth-child(4) { animation-delay: 1.65s; }
.route-map__footprints image:nth-child(5) { animation-delay: 2.20s; }
.route-map__footprints image:nth-child(6) { animation-delay: 2.75s; }
.route-map__footprints image:nth-child(7) { animation-delay: 3.30s; }
.route-map__footprints image:nth-child(8) { animation-delay: 3.85s; }

@keyframes routeFootstepNorthSouth {
    0%, 12%, 100% {
        opacity: .16;
        transform: translateY(1px) scale(.97);
    }
    20%, 42% {
        opacity: .88;
        transform: translateY(0) scale(1);
    }
    58% {
        opacity: .30;
        transform: translateY(-1px) scale(.99);
    }
}

@media (prefers-reduced-motion: reduce) {
    .route-map__footprints image {
        animation: none;
        opacity: .62;
        transform: none;
    }
}


/* =========================================================
   V7｜首页交互层修正 + 经过脚印加密
   纯 CSS：让导航和“开始行走”优先接收鼠标事件，
   镜头感应层仍覆盖首屏其余区域。
   ========================================================= */

/* fixed 镜头网格仍负责首屏取景，但真正的链接位于它上方。 */
.site-header {
    position: absolute;
    z-index: 120;
    pointer-events: auto;
}

.site-header .site-logo,
.site-header .site-nav,
.site-header .site-nav a {
    pointer-events: auto;
}

.walk-button {
    position: relative;
    z-index: 120;
    pointer-events: auto;
}

/* 箭头自身与整块“开始行走”都可触发箭头反馈，避免圆形镜头抢 hover。 */
.walk-button:hover .walk-button__arrow,
.walk-button__arrow:hover {
    background: #c23d33;
    border-color: #c23d33;
    transform: translateY(4px);
}


/* ===== Route point hover interaction =====
   Pure CSS: hover/focus a route point to fill the circle red,
   enlarge the circle slightly, and gently enlarge its title. */
.route-map__points a circle,
.route-map__points a .route-point__number,
.route-map__points a .route-point__title {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.22s ease, fill 0.22s ease, stroke 0.22s ease;
}

.route-map__points a:hover circle,
.route-map__points a:focus-visible circle {
    fill: #cf3b32;
    stroke: #cf3b32;
    transform: scale(1.12);
}

.route-map__points a:hover .route-point__number,
.route-map__points a:focus-visible .route-point__number {
    transform: scale(1.04);
}

.route-map__points a:hover .route-point__title,
.route-map__points a:focus-visible .route-point__title {
    transform: scale(1.06);
}

.route-map__points a:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .route-map__points a circle,
    .route-map__points a .route-point__number,
    .route-map__points a .route-point__title {
        transition: none;
    }
}


/* =========================================================
   V9｜首页模拟相机镜头视觉
   在原有纯 CSS 取景交互上增加多层镜片、焦距数字与 FOCUS 标记。
   不改变 96 格鼠标感应方式，也不遮挡导航和“开始行走”。
   ========================================================= */
.hero:has(.hero-lens-zones i:hover) .hero-lens-scene {
    clip-path: circle(170px at var(--lens-x) var(--lens-y));
}

.hero-lens-ring {
    width: 340px;
    height: 340px;
    border: 1.5px dashed rgba(232, 228, 219, .72);
    background: rgba(18, 18, 17, .05);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .22);
    overflow: visible;
}

.hero-lens-ring__outer,
.hero-lens-ring__middle,
.hero-lens-ring__inner {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hero-lens-ring__outer {
    width: 270px;
    height: 270px;
    border: 24px solid rgba(39, 39, 37, .92);
    box-shadow:
        0 0 0 2px rgba(218, 215, 205, .42),
        inset 0 0 0 2px rgba(218, 215, 205, .42),
        0 8px 18px rgba(0, 0, 0, .28);
}

.hero-lens-ring__middle {
    width: 188px;
    height: 188px;
    border: 4px solid rgba(196, 193, 184, .55);
    box-shadow:
        0 0 0 2px rgba(20, 20, 19, .78),
        inset 0 0 0 2px rgba(20, 20, 19, .68);
}

.hero-lens-ring__inner {
    width: 112px;
    height: 112px;
    border: 3px solid rgba(232, 228, 219, .82);
    box-shadow:
        0 0 0 2px rgba(20, 20, 19, .72),
        inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.hero-lens-ring__number,
.hero-lens-ring__focus {
    position: absolute;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    color: rgba(244, 241, 233, .92);
    font-family: "Montserrat", Arial, sans-serif;
    font-style: normal;
    line-height: 1;
    letter-spacing: .08em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .72);
    white-space: nowrap;
}

.hero-lens-ring__number {
    top: 12px;
    font-size: 13px;
    letter-spacing: .04em;
}

.hero-lens-ring__focus {
    bottom: 15px;
    font-size: 12px;
    letter-spacing: .14em;
}

/* 保持 V7 的重要修正：镜头只负责视觉，导航和按钮仍能正常 hover。 */
.hero-lens-ring,
.hero-lens-ring * {
    pointer-events: none;
}

@media (max-width: 1024px), (hover: none) {
    .hero-lens-ring__outer,
    .hero-lens-ring__middle,
    .hero-lens-ring__inner,
    .hero-lens-ring__number,
    .hero-lens-ring__focus {
        display: none;
    }
}

.hero-lens-zones {
    grid-template-columns: repeat(36, 1fr);
    grid-template-rows: repeat(24, 1fr);
}

.hero-lens-scene {
    transition: clip-path .075s cubic-bezier(.25,.46,.45,.94), opacity .06s ease;
    will-change: clip-path;
}

.hero-lens-ring {
    transition: left .075s cubic-bezier(.25,.46,.45,.94),
                top .075s cubic-bezier(.25,.46,.45,.94),
                opacity .06s ease,
                transform .075s ease;
    will-change: left, top, transform;
}


/* V12 lens-trail invalid duplicate removed to preserve the original rendered layout. */

.staying-cinema {
    position: static;
}

.staying__photo {
    transform: scale(1);
    transform-origin: center center;
    transition: transform .62s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    z-index: 3;
}

@media (hover: hover) and (pointer: fine) {
    .staying__photo:hover {
        transform: scale(1.62);
        z-index: 10;
    }
}

@media (prefers-reduced-motion: reduce) {
    .staying__photo {
        transition-duration: .01ms;
    }
}

.staying__header {
    z-index: 12;
}

.staying__photo {
    z-index: 3;
    transition:
        transform .62s cubic-bezier(.22,.61,.36,1),
        z-index 0s linear .24s;
}

@media (hover: hover) and (pointer: fine) {
    .staying__photo:hover {
        transform: scale(1.62);
        z-index: 20;
        transition:
            transform .62s cubic-bezier(.22,.61,.36,1),
            z-index 0s linear .24s;
    }
}


/* =========================================================
   V21 RESPONSIVE MEDIA SYSTEM
   目标：
   1. 宽屏 / 笔记本 / 平板 / 手机均保持合理布局；
   2. 桌面保留 hover；触屏用 :active / :focus-visible 提供对应反馈；
   3. 不改变 1257px Figma 桌面基准构图。
   ========================================================= */

/* ---------- 全局流体保护 ---------- */
html {
    width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    min-width: 280px;
    overflow-x: hidden;
}

.page {
    width: 100%;
    max-width: none;
}

img,
svg,
video,
audio {
    max-width: 100%;
}

.site-header,
.hero,
.passing,
.staying,
.seeing,
.trace,
.about,
.site-footer {
    max-width: 100vw;
}

/* ---------- 大屏：继续按 1257 Figma 比例扩展 ---------- */
@media (min-width: 1258px) {
    .page {
        width: 100%;
    }

    .site-header {
        width: 100%;
        max-width: none;
        padding-right: clamp(50px, 4vw, 78px);
        padding-left: clamp(50px, 4vw, 78px);
    }
}

/* ---------- 中等桌面 / 平板横屏 ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
    .site-header {
        width: 100%;
        padding-right: 32px;
        padding-left: 32px;
    }

    .site-nav__list {
        gap: clamp(14px, 2.2vw, 24px);
    }

    .section-title h2,
    .seeing__title-group h2 {
        font-size: clamp(78px, 12vw, 118px);
        line-height: .94;
    }

    .staying {
        overflow: hidden;
    }

    .staying__photo {
        max-width: 62vw;
    }

    .recordings__list {
        gap: 28px;
    }

    .recordings__list li {
        min-width: 0;
        flex: 1 1 0;
    }

    .about__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ---------- 手机 / 平板竖屏 ---------- */
@media (max-width: 768px) {
    .page {
        width: 100%;
        overflow: hidden;
    }

    .site-header {
        position: absolute;
        width: 100%;
        height: auto;
        min-height: 64px;
        padding: 14px 20px;
        gap: 14px;
        align-items: flex-start;
    }

    .site-logo {
        flex: 0 0 auto;
        gap: 8px;
    }

    .site-logo__cn {
        font-size: 15px;
        letter-spacing: 1.6px;
    }

    .site-logo__en {
        display: none;
    }

    .site-nav {
        min-width: 0;
    }

    .site-nav__list {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px 14px;
    }

    .site-nav__item a {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .site-nav__item small {
        display: none;
    }

    .hero {
        min-height: 620px;
        height: 100svh;
    }

    .hero__image {
        width: 72%;
        height: 100%;
        opacity: .72;
    }

    .hero__content {
        z-index: 5;
        width: min(86vw, 620px);
    }

    .hero__title {
        font-size: clamp(66px, 18vw, 112px);
        line-height: .88;
    }

    .hero__lead {
        max-width: 76vw;
        font-size: clamp(14px, 3.8vw, 18px);
        line-height: 1.7;
    }

    .section-title {
        gap: 8px;
    }

    .section-title h2,
    .seeing__title-group h2 {
        font-size: clamp(70px, 22vw, 112px);
        line-height: .92;
        letter-spacing: 2px;
    }

    .section-title small {
        padding-bottom: 16px;
    }

    /* 停留：移动端改为自然文档流，避免绝对定位互相压住 */
    .staying {
        height: auto;
        min-height: 0;
        padding: 72px 20px 0;
        overflow: hidden;
    }

    .staying__header {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        z-index: 12;
    }

    .staying__photo {
        position: relative;
        top: auto;
        left: auto;
        width: min(100%, 680px);
        height: auto;
        aspect-ratio: 637 / 382;
        margin: 36px auto 0;
        transform-origin: center center;
    }

    .recordings {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-top: 72px;
        padding-bottom: 72px;
    }

    .recordings__header {
        gap: 24px;
        align-items: flex-start;
    }

    .recordings__list {
        flex-direction: column;
        gap: 28px;
    }

    .recordings__list li {
        width: 100%;
    }

    .street-quotes {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 0;
    }

    /* 看见继续保留横向浏览交互 */
    .seeing__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
    }

    .seeing__list {
        display: flex;
        width: max-content;
        min-width: 100%;
        gap: 7px;
    }

    .seeing__item,
    .seeing__item--low,
    .seeing__item--mid {
        flex: 0 0 min(78vw, 364.5px);
        width: min(78vw, 364.5px);
        max-width: none;
        margin: 0;
    }

    .seeing__item--low { padding-top: 72px; }
    .seeing__item--mid { padding-top: 25px; }

    .seeing__viewport {
        height: 630px;
        padding: 0 20px 28px;
    }

    .seeing__item .photo-reveal {
        height: 480px;
        aspect-ratio: auto;
    }

    /* About 改成纵向，不让文字和照片在窄屏重叠 */
    .about {
        height: auto;
        min-height: 0;
        padding: 72px 20px;
    }

    .about__header,
    .about__text,
    .about__photo {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
    }

    .about__text {
        margin-top: 34px;
    }

    .about__photo {
        width: min(100%, 520px);
        height: auto;
        aspect-ratio: 379 / 510;
        margin: 38px auto 0;
    }

    .about__concept,
    .about__concept + small {
        white-space: normal;
    }
}

/* ---------- 极窄手机 ---------- */
@media (max-width: 480px) {
    .site-header {
        padding-right: 14px;
        padding-left: 14px;
    }

    .site-nav__list {
        gap: 7px 10px;
    }

    .hero__image {
        width: 82%;
    }

    .hero__content {
        width: 90vw;
    }

    .hero__title {
        font-size: clamp(58px, 19vw, 88px);
    }

    .hero__lead {
        max-width: 84vw;
    }

    .staying,
    .about {
        padding-right: 16px;
        padding-left: 16px;
    }

    .seeing__viewport {
        padding-right: 16px;
        padding-left: 16px;
    }

    .seeing__item,
    .seeing__item--low,
    .seeing__item--mid {
        flex-basis: 84vw;
        width: 84vw;
    }
}

/* ---------- 交互：鼠标设备 ---------- */
@media (hover: hover) and (pointer: fine) {
    .staying__photo:hover {
        transform: scale(1.62);
        z-index: 20;
    }

    .photo-reveal:hover,
    .passing-reveal:hover,
    .leave-reveal:hover {
        cursor: crosshair;
    }
}

/* ---------- 交互：触屏设备 ----------
   触屏没有 hover，因此用按下 (:active) / 键盘焦点提供反馈。
   不让 Hero 的透明感应网格拦截手机正常滚动。
*/
@media (hover: none), (pointer: coarse) {
    .hero-lens-zones {
        display: none !important;
        pointer-events: none !important;
    }

    .hero-lens-ring {
        display: block;
        opacity: 0;
        pointer-events: none;
    }

    .hero:active .hero-lens-scene {
        opacity: 1;
        clip-path: circle(clamp(72px, 24vw, 120px) at 50% 50%);
    }

    .hero:active .hero-lens-ring {
        opacity: 1;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(.78);
    }

    .staying__photo:active {
        transform: scale(1.18);
        z-index: 20;
    }

    .photo-reveal:active .photo-colour,
    .passing-reveal:active .photo-colour,
    .leave-reveal:active .leave-colour {
        opacity: 1;
    }

    .frame-link:active,
    .walk-button:active,
    .site-footer a:active,
    .site-nav__item a:active {
        transform: translateY(2px);
    }

    .route-point:active circle {
        fill: #c23d33;
    }

    .route-point:active {
        transform: scale(1.08);
        transform-origin: center;
    }
}

/* 键盘操作也保留可见交互反馈 */
a:focus-visible,
button:focus-visible,
audio:focus-visible {
    outline: 2px solid #c23d33;
    outline-offset: 4px;
}

/* 用户明确要求交互存在，因此这里只减少速度，不直接关闭交互。 */
@media (prefers-reduced-motion: reduce) {
    .staying__photo,
    .hero-lens-scene,
    .hero-lens-ring,
    .photo-colour,
    .leave-colour {
        transition-duration: .12s !important;
    }
}