) ──────────── */\n.sec-8-home-12__item {\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n border-radius: 16px;\n overflow: hidden;\n transition: border-color 0.3s ease;\n}\n.sec-8-home-12__item[open] {\n border-color: var(--at-neutral-300);\n}\n\n.sec-8-home-12__summary {\n list-style: none;\n cursor: pointer;\n padding: 22px 24px 22px 28px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n column-gap: 16px;\n user-select: none;\n}\n.sec-8-home-12__summary::-webkit-details-marker {\n display: none;\n}\n.sec-8-home-12__summary::marker {\n content: \"\";\n}\n\n.sec-8-home-12__question {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 17px;\n line-height: 1.3;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n}\n\n.sec-8-home-12__toggle {\n flex-shrink: 0;\n position: relative;\n width: 32px;\n height: 32px;\n border-radius: 999px;\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n.sec-8-home-12__bar {\n position: absolute;\n background-color: currentColor;\n border-radius: 1px;\n transition: opacity 0.25s ease, transform 0.25s ease;\n}\n\n.sec-8-home-12__bar--h {\n width: 14px;\n height: 1.6px;\n}\n\n.sec-8-home-12__bar--v {\n width: 1.6px;\n height: 14px;\n}\n\n.sec-8-home-12__item[open] .sec-8-home-12__toggle {\n background-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n}\n\n.sec-8-home-12__item[open] .sec-8-home-12__bar--v {\n opacity: 0;\n transform: scaleY(0);\n}\n\n.sec-8-home-12__answer {\n padding: 0 24px 22px 28px;\n display: flex;\n flex-direction: column;\n row-gap: 16px;\n}\n.sec-8-home-12__answer p {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n.sec-8-home-12__divider {\n display: block;\n width: 100%;\n height: 1px;\n background-color: var(--at-neutral-100);\n margin-top: -2px;\n}\n\n/* ── Responsive ─────────────────────────────────── */\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-8-home-12 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-8-home-12 {\n padding-top: 90px;\n padding-bottom: 90px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-8-home-12 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n .sec-8-home-12__header {\n margin-bottom: 48px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-home-12 {\n padding-top: 64px;\n padding-bottom: 64px;\n }\n .sec-8-home-12__header {\n margin-bottom: 40px;\n }\n .sec-8-home-12__summary {\n padding: 20px 22px 20px 24px;\n }\n .sec-8-home-12__answer {\n padding: 0 22px 20px 24px;\n }\n .sec-8-home-12__question {\n font-size: 16px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-8-home-12 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n .sec-8-home-12__header {\n margin-bottom: 32px;\n row-gap: 12px;\n }\n .sec-8-home-12__list {\n row-gap: 10px;\n }\n .sec-8-home-12__summary {\n padding: 18px 20px 18px 22px;\n column-gap: 12px;\n }\n .sec-8-home-12__answer {\n padding: 0 20px 20px 22px;\n row-gap: 14px;\n }\n .sec-8-home-12__answer p {\n font-size: 15px;\n }\n .sec-8-home-12__question {\n font-size: 15px;\n line-height: 1.35;\n }\n .sec-8-home-12__toggle {\n width: 28px;\n height: 28px;\n }\n .sec-8-home-12__bar--h {\n width: 12px;\n }\n .sec-8-home-12__bar--v {\n height: 12px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-8-home-12 {\n padding-top: 48px;\n padding-bottom: 48px;\n }\n .sec-8-home-12__header {\n margin-bottom: 28px;\n }\n .sec-8-home-12__list {\n row-gap: 8px;\n }\n .sec-8-home-12__item {\n border-radius: 14px;\n }\n .sec-8-home-12__summary {\n padding: 16px 18px 16px 20px;\n column-gap: 12px;\n }\n .sec-8-home-12__answer {\n padding: 0 18px 18px 20px;\n row-gap: 12px;\n }\n .sec-8-home-12__answer p {\n font-size: 14.5px;\n }\n .sec-8-home-12__question {\n font-size: 14.5px;\n line-height: 1.4;\n }\n .sec-8-home-12__toggle {\n width: 26px;\n height: 26px;\n }\n .sec-8-home-12__bar--h {\n width: 11px;\n }\n .sec-8-home-12__bar--v {\n height: 11px;\n }\n}\n/* Home 13 / Section 1 — Hero (Orisa® Architecture) */\n.sec-1-home-13 {\n background-color: var(--at-neutral-50);\n padding: 160px 32px 32px;\n}\n\n.sec-1-home-13__inner {\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n margin-inline: auto;\n}\n\n/* ── Top row ─────────────────────────────────── */\n.sec-1-home-13__top {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 24px;\n width: 100%;\n}\n\n.sec-1-home-13__brand {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(48px, 11vw, 188px);\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n white-space: nowrap;\n}\n.sec-1-home-13__brand sup {\n font-size: 0.5em;\n top: -0.55em;\n font-weight: 600;\n}\n\n.sec-1-home-13__since {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n text-decoration: underline;\n text-underline-offset: 4px;\n white-space: nowrap;\n flex-shrink: 0;\n transition: opacity 0.3s ease;\n}\n.sec-1-home-13__since:hover, .sec-1-home-13__since:focus-visible {\n color: var(--at-neutral-900);\n opacity: 0.7;\n}\n\n/* ── Hero card ───────────────────────────────── */\n.sec-1-home-13__card {\n position: relative;\n width: 100%;\n height: 760px;\n border-radius: 32px;\n overflow: hidden;\n isolation: isolate;\n}\n\n/* ── Main slider ─────────────────────────────── */\n.sec-1-home-13__main {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n}\n.sec-1-home-13__main .swiper-wrapper,\n.sec-1-home-13__main .swiper-slide {\n height: 100%;\n}\n\n.sec-1-home-13__slide {\n position: relative;\n overflow: hidden;\n}\n\n.sec-1-home-13__bg {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n z-index: 0;\n}\n\n.sec-1-home-13__overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.55) 100%);\n z-index: 1;\n}\n\n.sec-1-home-13__content {\n position: absolute;\n inset: 0;\n padding: 48px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n gap: 19px;\n z-index: 2;\n /* leave room for the thumbs strip */\n padding-bottom: 200px;\n}\n\n.sec-1-home-13__tagline {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 16px;\n line-height: 1.2;\n color: var(--at-common-white);\n letter-spacing: 0;\n}\n.sec-1-home-13__tagline span {\n display: inline-block;\n}\n\n.sec-1-home-13__headline {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(28px, 4vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.05em;\n color: var(--at-common-white);\n max-width: 871px;\n}\n\n/* ── Vertical nav buttons ────────────────────── */\n.sec-1-home-13__nav {\n position: absolute;\n top: 50%;\n right: 48px;\n transform: translateY(-50%);\n z-index: 4;\n flex-direction: column;\n gap: 12px;\n /* prev arrow points up, next arrow points down */\n}\n.sec-1-home-13__nav .swiper-btn-prev svg,\n.sec-1-home-13__nav .swiper-btn-next svg {\n transform: rotate(90deg);\n}\n\n/* ── Thumbs slider ───────────────────────────── */\n.sec-1-home-13__thumbs {\n position: absolute;\n left: 48px;\n right: 48px;\n bottom: 48px;\n z-index: 3;\n}\n.sec-1-home-13__thumbs .swiper-slide {\n height: auto;\n}\n\n.sec-1-home-13__service {\n position: relative;\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 12px 20px 12px 12px;\n background-color: var(--at-common-white);\n border: 0;\n border-radius: 16px;\n box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);\n min-width: 0;\n cursor: pointer;\n text-align: left;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n.sec-1-home-13__service::after {\n content: \"\";\n position: absolute;\n top: 8px;\n right: 8px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n opacity: 0;\n transform: scale(0.4);\n transition: opacity 0.3s ease, transform 0.3s ease;\n pointer-events: none;\n}\n.sec-1-home-13__service:hover {\n transform: translateY(-2px);\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.14);\n}\n.sec-1-home-13__service.swiper-slide-thumb-active {\n box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.18);\n}\n.sec-1-home-13__service.swiper-slide-thumb-active::after {\n opacity: 1;\n transform: scale(1);\n}\n.sec-1-home-13__service.swiper-slide-thumb-active .sec-1-home-13__service-img {\n border-radius: 16px;\n}\n\n.sec-1-home-13__service-img {\n flex-shrink: 0;\n width: 64px;\n height: 64px;\n border-radius: 4px;\n overflow: hidden;\n display: block;\n transition: border-radius 0.3s ease;\n}\n.sec-1-home-13__service-img img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n\n.sec-1-home-13__service-meta {\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 0;\n}\n\n.sec-1-home-13__service-num {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n.sec-1-home-13__service-name {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 18px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-1-home-13__card {\n height: 680px;\n }\n .sec-1-home-13__content {\n padding: 40px;\n padding-bottom: 180px;\n }\n .sec-1-home-13__thumbs {\n left: 40px;\n right: 40px;\n bottom: 40px;\n }\n .sec-1-home-13__nav {\n right: 40px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-1-home-13 {\n padding: 48px 24px 24px;\n }\n .sec-1-home-13__card {\n height: 620px;\n }\n .sec-1-home-13__content {\n padding: 32px;\n padding-bottom: 200px;\n }\n .sec-1-home-13__thumbs {\n left: 32px;\n right: 32px;\n bottom: 32px;\n }\n .sec-1-home-13__nav {\n right: 32px;\n gap: 10px;\n }\n .sec-1-home-13__service {\n padding: 10px 14px 10px 10px;\n gap: 10px;\n }\n .sec-1-home-13__service-img {\n width: 52px;\n height: 52px;\n }\n .sec-1-home-13__service-name {\n font-size: 16px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-1-home-13 {\n padding: 36px 20px 20px;\n }\n .sec-1-home-13__card {\n height: 560px;\n }\n .sec-1-home-13__content {\n padding: 28px;\n padding-bottom: 180px;\n }\n .sec-1-home-13__thumbs {\n left: 24px;\n right: 24px;\n bottom: 24px;\n }\n .sec-1-home-13__nav {\n right: 24px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-home-13 {\n padding: 128px 16px 16px;\n }\n .sec-1-home-13__top {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n .sec-1-home-13__brand {\n white-space: normal;\n }\n .sec-1-home-13__card {\n height: 540px;\n border-radius: 24px;\n }\n .sec-1-home-13__content {\n padding: 24px;\n padding-bottom: 220px;\n }\n .sec-1-home-13__thumbs {\n left: 16px;\n right: 16px;\n bottom: 16px;\n }\n .sec-1-home-13__nav {\n right: 16px;\n gap: 8px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-1-home-13__card {\n height: 520px;\n }\n .sec-1-home-13__content {\n padding-bottom: 200px;\n }\n .sec-1-home-13__service-name {\n font-size: 14px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-1-home-13 {\n padding: 100px 12px 12px;\n }\n .sec-1-home-13__card {\n height: 500px;\n border-radius: 20px;\n }\n .sec-1-home-13__content {\n padding: 18px;\n padding-bottom: 180px;\n }\n .sec-1-home-13__headline {\n font-size: 26px;\n }\n .sec-1-home-13__thumbs {\n left: 12px;\n right: 12px;\n bottom: 12px;\n }\n .sec-1-home-13__nav {\n right: 12px;\n }\n}\n/* Cascading mobile pivot: stack top row + wrap brand from tablet down */\n@media (max-width: 991.98px) {\n .sec-1-home-13__top {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n .sec-1-home-13__brand {\n white-space: normal;\n }\n}\n/* Home 13 / Section 2 — About Us */\n.sec-2-home-13 {\n background-color: var(--at-neutral-50);\n padding: 120px 96px 0;\n}\n\n.sec-2-home-13__inner {\n display: flex;\n flex-direction: column;\n gap: 80px;\n width: 100%;\n}\n\n/* ── Top row ─────────────────────────────────── */\n.sec-2-home-13__top {\n display: grid;\n grid-template-columns: 380px 1fr;\n gap: 96px;\n align-items: start;\n}\n\n/* ── Left column ─────────────────────────────── */\n.sec-2-home-13__left {\n display: flex;\n flex-direction: column;\n gap: 184px;\n}\n\n.sec-2-home-13__label {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\n.sec-2-home-13__label-dot {\n width: 8px;\n height: 8px;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n}\n\n.sec-2-home-13__label-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n}\n\n.sec-2-home-13__intro {\n display: flex;\n flex-direction: column;\n gap: 16px;\n align-items: flex-start;\n}\n\n.sec-2-home-13__intro-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n}\n.sec-2-home-13__intro-text strong {\n font-weight: 700;\n}\n\n.sec-2-home-13__team {\n display: inline-flex;\n align-items: center;\n padding-left: 0;\n}\n\n.sec-2-home-13__team-avatar {\n width: 65px;\n height: 65px;\n border-radius: 50%;\n overflow: hidden;\n border: 4px solid var(--at-neutral-0);\n box-sizing: border-box;\n background-color: var(--at-neutral-100);\n}\n.sec-2-home-13__team-avatar + .sec-2-home-13__team-avatar {\n margin-left: -25px;\n}\n.sec-2-home-13__team-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n\n.sec-2-home-13__cta {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n height: 50px;\n padding: 14px 27px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n border-radius: 50px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n text-decoration: none;\n transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.sec-2-home-13__cta:hover, .sec-2-home-13__cta:focus-visible {\n color: var(--at-neutral-0);\n opacity: 0.9;\n}\n.sec-2-home-13__cta svg {\n transition: transform 0.3s ease;\n}\n.sec-2-home-13__cta:hover svg, .sec-2-home-13__cta:focus-visible svg {\n transform: translate(2px, -2px);\n}\n\n/* ── Right column ────────────────────────────── */\n.sec-2-home-13__right {\n display: flex;\n flex-direction: column;\n gap: 64px;\n min-width: 0;\n}\n\n.sec-2-home-13__head {\n display: flex;\n flex-direction: column;\n gap: 11px;\n align-items: flex-start;\n}\n\n.sec-2-home-13__pill {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n border-radius: 999px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n}\n\n.sec-2-home-13__pill-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: #22c55e;\n flex-shrink: 0;\n box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);\n}\n\n.sec-2-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(32px, 3.2vw, 56px);\n line-height: 1.143;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-2-home-13__grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n align-items: start;\n}\n\n.sec-2-home-13__col {\n display: flex;\n flex-direction: column;\n gap: 16px;\n min-width: 0;\n}\n\n.sec-2-home-13__media {\n width: 100%;\n border-radius: 16px;\n overflow: hidden;\n}\n.sec-2-home-13__media img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n\n.sec-2-home-13__caption-title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 36px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n margin-bottom: 16px !important;\n}\n\n.sec-2-home-13__caption-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n}\n\n/* ── Stats row ───────────────────────────────── */\n.sec-2-home-13__stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n border-top: 1px solid var(--at-neutral-100);\n padding: 64px 0 96px;\n margin: 0;\n}\n\n.sec-2-home-13__stat {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 0 32px;\n}\n.sec-2-home-13__stat:first-child {\n padding-left: 0;\n}\n.sec-2-home-13__stat:last-child {\n padding-right: 0;\n}\n\n.sec-2-home-13__stat-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n}\n\n.sec-2-home-13__stat-icon {\n width: 42px;\n height: 42px;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.sec-2-home-13__stat-icon img {\n width: 26px;\n height: 26px;\n object-fit: contain;\n}\n\n.sec-2-home-13__stat-tag {\n display: inline-flex;\n align-items: center;\n padding: 5px 10px;\n background-color: rgba(240, 70, 14, 0.12);\n color: var(--at-theme-primary);\n border-radius: 999px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 11px;\n line-height: 1.2;\n letter-spacing: -0.02em;\n white-space: nowrap;\n}\n\n.sec-2-home-13__stat-num {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(48px, 5.5vw, 84px);\n line-height: 1.05;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n\n.sec-2-home-13__stat-cap {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-2-home-13 {\n padding: 96px 32px 0;\n }\n .sec-2-home-13__top {\n grid-template-columns: 320px 1fr;\n gap: 64px;\n }\n .sec-2-home-13__left {\n gap: 96px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-2-home-13 {\n padding: 80px 24px 0;\n }\n .sec-2-home-13__inner {\n gap: 64px;\n }\n .sec-2-home-13__top {\n grid-template-columns: 280px 1fr;\n gap: 48px;\n }\n .sec-2-home-13__left {\n gap: 64px;\n }\n .sec-2-home-13__right {\n gap: 48px;\n }\n .sec-2-home-13__media {\n height: 280px;\n }\n .sec-2-home-13__media--tall {\n height: 460px;\n }\n .sec-2-home-13__stats {\n padding: 48px 0 64px;\n }\n .sec-2-home-13__stat {\n padding: 0 20px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-2-home-13 {\n padding: 64px 20px 0;\n }\n .sec-2-home-13__top {\n grid-template-columns: 1fr;\n gap: 48px;\n }\n .sec-2-home-13__left {\n gap: 32px;\n }\n .sec-2-home-13__media {\n height: 240px;\n }\n .sec-2-home-13__media--tall {\n height: 380px;\n }\n .sec-2-home-13__caption-title {\n font-size: 28px;\n }\n .sec-2-home-13__stats {\n grid-template-columns: repeat(2, 1fr);\n padding: 48px 0 64px;\n gap: 48px 0;\n }\n .sec-2-home-13__stat {\n padding: 0 16px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-2-home-13 {\n padding: 48px 30px 0;\n }\n .sec-2-home-13__inner {\n gap: 48px;\n }\n .sec-2-home-13__grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-2-home-13 {\n padding: 36px 30px 0;\n }\n .sec-2-home-13__intro-text {\n font-size: 15px;\n }\n .sec-2-home-13__team-avatar {\n width: 56px;\n height: 56px;\n }\n .sec-2-home-13__title {\n font-size: 28px;\n }\n .sec-2-home-13__stats {\n grid-template-columns: 1fr;\n gap: 32px 0;\n padding: 36px 0 48px;\n }\n .sec-2-home-13__stat {\n padding: 0;\n }\n}\n@media (max-width: 574.98px) {\n .sec-2-home-13 {\n padding: 36px 30px 0;\n }\n .sec-2-home-13__media--tall {\n height: 280px;\n }\n .sec-2-home-13__caption-title {\n font-size: 24px;\n }\n .sec-2-home-13__stats {\n grid-template-columns: 1fr;\n gap: 32px 0;\n padding: 36px 0 48px;\n }\n .sec-2-home-13__stat {\n padding: 0;\n }\n}\n/* Cascading mobile pivot: stack top grid for tablet & phone */\n@media (max-width: 991.98px) {\n .sec-2-home-13__top {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n .sec-2-home-13__left {\n gap: 32px;\n }\n .sec-2-home-13__right {\n gap: 32px;\n }\n}\n/* Cascading mobile pivot: single-column media grid for phone */\n@media (max-width: 767.98px) {\n .sec-2-home-13__grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n}\n/* Home 13 / Section 3 — Selected Projects */\n.sec-3-home-13 {\n background-color: var(--at-neutral-50);\n padding: 120px 96px;\n}\n\n.sec-3-home-13__inner {\n display: flex;\n flex-direction: column;\n gap: 80px;\n}\n\n/* ── Header ──────────────────────────────────── */\n.sec-3-home-13__header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 32px;\n}\n\n.sec-3-home-13__head-text {\n display: flex;\n flex-direction: column;\n gap: 32px;\n}\n\n.sec-3-home-13__label {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\n.sec-3-home-13__label-dot {\n width: 8px;\n height: 8px;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n}\n\n.sec-3-home-13__label-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 13px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-700);\n}\n\n.sec-3-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(36px, 4.4vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n max-width: 100%;\n}\n\n.sec-3-home-13__title-italic {\n display: block;\n font-style: italic;\n}\n\n.sec-3-home-13__cta {\n display: inline-flex;\n align-items: center;\n gap: 0;\n text-decoration: none;\n transition: opacity 0.3s ease;\n}\n.sec-3-home-13__cta:hover, .sec-3-home-13__cta:focus-visible {\n opacity: 0.9;\n}\n.sec-3-home-13__cta:hover .sec-3-home-13__cta-icon svg, .sec-3-home-13__cta:focus-visible .sec-3-home-13__cta-icon svg {\n transform: translate(2px, -2px);\n}\n\n.sec-3-home-13__cta-label {\n display: inline-flex;\n align-items: center;\n height: 50px;\n padding: 14px 27px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n border-radius: 50px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n white-space: nowrap;\n}\n\n.sec-3-home-13__cta-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n height: 50px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n border-radius: 50%;\n margin-left: -1px;\n}\n.sec-3-home-13__cta-icon svg {\n transition: transform 0.3s ease;\n}\n\n/* ── Project list ────────────────────────────── */\n.sec-3-home-13__list {\n display: flex;\n flex-direction: column;\n}\n\n.sec-3-home-13__card {\n display: grid;\n grid-template-columns: 360px 680px 1fr;\n gap: 48px;\n padding: 40px 8px;\n border-top: 1px solid var(--at-neutral-100);\n align-items: start;\n}\n.sec-3-home-13__card:last-child {\n border-bottom: 1px solid var(--at-neutral-100);\n}\n\n/* ── Card meta (left) ────────────────────────── */\n.sec-3-home-13__card-meta {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 12px 0;\n}\n\n.sec-3-home-13__card-loc {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n white-space: nowrap;\n}\n\n.sec-3-home-13__card-title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 32px;\n line-height: 1.1875;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-3-home-13__card-link {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-950);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n.sec-3-home-13__card-link:hover, .sec-3-home-13__card-link:focus-visible {\n color: var(--at-theme-primary);\n}\n\n.sec-3-home-13__card-link-dots {\n color: var(--at-neutral-500);\n font-size: 11px;\n letter-spacing: 0.08em;\n line-height: 1;\n}\n\n/* ── Card media (middle) ─────────────────────── */\n.sec-3-home-13__card-media {\n display: block;\n width: 100%;\n overflow: hidden;\n}\n.sec-3-home-13__card-media img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.6s ease;\n}\n.sec-3-home-13__card-media:hover img, .sec-3-home-13__card-media:focus-visible img {\n transform: scale(1.04);\n}\n\n/* ── Card info (right) ───────────────────────── */\n.sec-3-home-13__card-info {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding-top: 12px;\n min-width: 0;\n}\n\n.sec-3-home-13__card-desc {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n.sec-3-home-13__card-specs {\n display: flex;\n flex-direction: column;\n margin: 0;\n}\n\n.sec-3-home-13__card-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 0;\n border-bottom: 1px solid var(--at-neutral-100);\n gap: 16px;\n}\n.sec-3-home-13__card-row:first-child {\n border-top: 1px solid transparent;\n}\n.sec-3-home-13__card-row:last-child {\n border-bottom: none;\n}\n.sec-3-home-13__card-row dt {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n margin: 0;\n}\n.sec-3-home-13__card-row dd {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n margin: 0;\n text-align: right;\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-3-home-13 {\n padding: 96px 32px;\n }\n .sec-3-home-13__card {\n grid-template-columns: 280px 540px 1fr;\n gap: 32px;\n }\n .sec-3-home-13__card-media,\n .sec-3-home-13__card-meta {\n height: 380px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-3-home-13 {\n padding: 80px 24px;\n }\n .sec-3-home-13__inner {\n gap: 56px;\n }\n .sec-3-home-13__card {\n grid-template-columns: 240px 420px 1fr;\n gap: 24px;\n padding: 32px 0;\n }\n .sec-3-home-13__card-media,\n .sec-3-home-13__card-meta {\n height: 320px;\n }\n .sec-3-home-13__card-title {\n font-size: 26px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-3-home-13 {\n padding: 64px 20px;\n }\n .sec-3-home-13__header {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n .sec-3-home-13__card {\n grid-template-columns: 1fr 1fr;\n grid-template-areas: \"media media\" \"meta info\";\n gap: 24px;\n padding: 32px 0;\n }\n .sec-3-home-13__card-media {\n grid-area: media;\n height: 340px;\n }\n .sec-3-home-13__card-meta {\n grid-area: meta;\n height: auto;\n gap: 16px;\n justify-content: flex-start;\n }\n .sec-3-home-13__card-info {\n grid-area: info;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-3-home-13 {\n padding: 48px 30px;\n }\n .sec-3-home-13__inner {\n gap: 40px;\n }\n .sec-3-home-13__card {\n grid-template-columns: 1fr;\n grid-template-areas: \"media\" \"meta\" \"info\";\n gap: 20px;\n padding: 24px 0;\n }\n .sec-3-home-13__card-media {\n height: 280px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-3-home-13 {\n padding: 36px 30px;\n }\n .sec-3-home-13__cta-label {\n padding: 14px 20px;\n }\n .sec-3-home-13__card-media {\n height: 240px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-3-home-13 {\n padding: 36px 30px;\n }\n .sec-3-home-13__card-title {\n font-size: 22px;\n }\n .sec-3-home-13__card-row dd {\n font-size: 14px;\n }\n}\n/* Cascading mobile pivot: stack header for tablet & phone */\n@media (max-width: 1199.98px) {\n .sec-3-home-13__header {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n}\n/* Cascading mobile pivot: single-column card layout for phone */\n@media (max-width: 767.98px) {\n .sec-3-home-13__card {\n grid-template-columns: 1fr;\n grid-template-areas: \"media\" \"meta\" \"info\";\n gap: 20px;\n padding: 24px 0;\n }\n .sec-3-home-13__card-media {\n grid-area: media;\n height: auto;\n }\n .sec-3-home-13__card-meta {\n grid-area: meta;\n height: auto;\n gap: 16px;\n justify-content: flex-start;\n }\n .sec-3-home-13__card-info {\n grid-area: info;\n }\n}\n/* Home 13 / Section 4 — Build with us CTA */\n.sec-4-home-13 {\n background-color: var(--at-neutral-50);\n padding: 32px;\n}\n\n.sec-4-home-13__card {\n position: relative;\n width: 100%;\n min-height: 800px;\n background-color: #0f0f0f;\n background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);\n background-size: 48px 48px;\n background-position: 0 0;\n border-radius: 32px;\n overflow: hidden;\n isolation: isolate;\n padding: 48px 56px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n color: var(--at-common-white);\n}\n\n.sec-4-home-13__glow {\n position: absolute !important;\n width: 1200px;\n height: 800px;\n bottom: 0;\n right: 0;\n transform: translateY(20%) translateX(20%);\n background: radial-gradient(closest-side, rgba(240, 70, 14, 0.7) 0%, rgba(240, 70, 14, 0.28) 45%, rgba(240, 70, 14, 0) 75%);\n pointer-events: none;\n z-index: 0;\n opacity: 0.5;\n}\n\n.sec-4-home-13__card > * {\n position: relative;\n z-index: 1;\n}\n\n/* ── Top meta bar ────────────────────────────── */\n.sec-4-home-13__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: rgba(255, 255, 255, 0.55);\n}\n\n.sec-4-home-13__bar-left {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n color: rgba(255, 255, 255, 0.85);\n}\n\n.sec-4-home-13__bar-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n box-shadow: 0 0 10px rgba(240, 70, 14, 0.6);\n flex-shrink: 0;\n}\n\n/* ── Heading ─────────────────────────────────── */\n.sec-4-home-13__head {\n display: flex;\n flex-direction: column;\n gap: 32px;\n padding-top: 56px;\n}\n\n.sec-4-home-13__tag {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: 0.04em;\n color: var(--at-theme-primary);\n text-transform: uppercase;\n}\n\n.sec-4-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(64px, 14vw, 240px);\n line-height: 0.95;\n letter-spacing: -0.05em;\n color: var(--at-common-white);\n}\n.sec-4-home-13__title em {\n font-style: italic;\n font-weight: 600;\n}\n\n/* ── Bottom row ──────────────────────────────── */\n.sec-4-home-13__bottom {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 64px;\n}\n\n.sec-4-home-13__copy {\n flex: 0 1 560px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n@media (max-width: 1440px) {\n .sec-4-home-13__copy {\n flex: 0 1 260px;\n }\n}\n\n.sec-4-home-13__lede {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: rgba(255, 255, 255, 0.65);\n}\n\n.sec-4-home-13__chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 0;\n}\n\n.sec-4-home-13__chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n border: 1px solid rgba(255, 255, 255, 0.18);\n border-radius: 999px;\n color: var(--at-common-white);\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: -0.02em;\n text-decoration: none;\n transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;\n}\n.sec-4-home-13__chip:hover, .sec-4-home-13__chip:focus-visible {\n background-color: var(--at-common-white);\n color: #0f0f0f;\n border-color: var(--at-common-white);\n}\n\n.sec-4-home-13__contact {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n text-align: right;\n}\n\n.sec-4-home-13__contact-label {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: rgba(255, 255, 255, 0.55);\n}\n\n.sec-4-home-13__contact-row {\n display: inline-flex;\n align-items: center;\n gap: 16px;\n color: var(--at-common-white);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n.sec-4-home-13__contact-row:hover, .sec-4-home-13__contact-row:focus-visible {\n color: var(--at-theme-primary);\n}\n\n.sec-4-home-13__contact-mail {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 22px;\n line-height: 1.2;\n letter-spacing: -0.02em;\n}\n\n.sec-4-home-13__contact-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n color: var(--at-common-white);\n transition: transform 0.3s ease;\n}\n.sec-4-home-13__contact-row:hover .sec-4-home-13__contact-arrow, .sec-4-home-13__contact-row:focus-visible .sec-4-home-13__contact-arrow {\n transform: rotate(-12deg);\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-4-home-13 {\n padding: 24px;\n }\n .sec-4-home-13__card {\n min-height: 700px;\n padding: 40px 48px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-4-home-13__card {\n min-height: 600px;\n padding: 32px 40px;\n border-radius: 24px;\n }\n .sec-4-home-13__head {\n gap: 24px;\n padding-top: 32px;\n }\n .sec-4-home-13__bottom {\n gap: 32px;\n }\n .sec-4-home-13__contact-mail {\n font-size: 18px;\n }\n .sec-4-home-13__glow {\n width: 900px;\n height: 600px;\n right: -80px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-4-home-13 {\n padding: 16px;\n }\n .sec-4-home-13__card {\n min-height: 540px;\n padding: 28px 32px;\n }\n .sec-4-home-13__bar-center {\n display: none;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-home-13__card {\n min-height: 500px;\n padding: 24px;\n border-radius: 20px;\n gap: 56px;\n }\n .sec-4-home-13__head {\n padding-top: 40px;\n }\n .sec-4-home-13__bottom {\n flex-direction: column;\n align-items: flex-start;\n gap: 40px;\n }\n .sec-4-home-13__contact {\n align-items: flex-start;\n text-align: left;\n }\n .sec-4-home-13__bar-right {\n display: none;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-4-home-13 {\n padding: 12px;\n }\n .sec-4-home-13__card {\n min-height: 500px;\n padding: 20px;\n }\n .sec-4-home-13__bar {\n font-size: 10px;\n gap: 12px;\n }\n .sec-4-home-13__contact-mail {\n font-size: 16px;\n }\n .sec-4-home-13__contact-arrow {\n width: 48px;\n height: 48px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-4-home-13__card {\n min-height: 500px;\n padding: 18px;\n }\n .sec-4-home-13__title {\n font-size: 56px;\n }\n .sec-4-home-13__chip {\n font-size: 12px;\n }\n}\n/* Cascading mobile pivot: stack bottom row + left-align contact for tablet & phone */\n@media (max-width: 991.98px) {\n .sec-4-home-13__bottom {\n flex-direction: column;\n align-items: flex-start;\n gap: 40px;\n }\n .sec-4-home-13__copy {\n flex: 0 1 auto;\n }\n .sec-4-home-13__contact {\n align-items: flex-start;\n text-align: left;\n }\n .sec-4-home-13__bar-right {\n display: none;\n }\n}\n/* Phone: hide center coord bar; loosen card */\n@media (max-width: 574.98px) {\n .sec-4-home-13__bar-center {\n display: none;\n }\n .sec-4-home-13__card {\n gap: 40px;\n }\n}\n/* Home 13 / Section 5 — Our Expertise */\n.sec-5-home-13 {\n background-color: var(--at-neutral-50);\n padding: 120px 96px;\n}\n\n.sec-5-home-13__inner {\n display: flex;\n flex-direction: column;\n gap: 42px;\n}\n\n/* ── Header ──────────────────────────────────── */\n.sec-5-home-13__header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 32px;\n}\n\n.sec-5-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(48px, 5.5vw, 84px);\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n\n.sec-5-home-13__hint {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n text-transform: uppercase;\n max-width: 600px;\n}\n\n.sec-5-home-13__hint-dot {\n width: 8px;\n height: 8px;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n}\n\n/* ── List ────────────────────────────────────── */\n.sec-5-home-13__list {\n display: flex;\n flex-direction: column;\n gap: 47px;\n}\n\n/* ── Card ────────────────────────────────────── */\n.sec-5-home-13__card {\n display: grid;\n grid-template-columns: 583px 1fr;\n gap: 60px;\n background-color: var(--at-neutral-0);\n padding: 42px;\n align-items: center;\n border-radius: 4px;\n}\n\n.sec-5-home-13__card-media {\n width: 100%;\n height: 310px;\n overflow: hidden;\n}\n.sec-5-home-13__card-media img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.6s ease;\n}\n.sec-5-home-13__card:hover .sec-5-home-13__card-media img {\n transform: scale(1.04);\n}\n\n.sec-5-home-13__card-body {\n display: flex;\n flex-direction: column;\n gap: 20px;\n min-width: 0;\n padding-right: 16px;\n}\n\n.sec-5-home-13__card-head {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 24px;\n border-bottom: 1px solid var(--at-neutral-100);\n padding-bottom: 19px;\n}\n\n.sec-5-home-13__card-title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 36px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n}\n\n.sec-5-home-13__card-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.sec-5-home-13__card-tag-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n white-space: nowrap;\n}\n\n.sec-5-home-13__card-toggle {\n width: 18px;\n height: 18px;\n background: transparent;\n border: 0;\n padding: 0;\n color: var(--at-neutral-900);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: transform 0.3s ease, color 0.3s ease;\n}\n.sec-5-home-13__card-toggle:hover, .sec-5-home-13__card-toggle:focus-visible {\n color: var(--at-theme-primary);\n transform: rotate(90deg);\n}\n\n.sec-5-home-13__card-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.45;\n letter-spacing: -0.05em;\n color: var(--at-neutral-500);\n max-width: 803px;\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-5-home-13 {\n padding: 96px 32px;\n }\n .sec-5-home-13__card {\n grid-template-columns: 460px 1fr;\n gap: 40px;\n padding: 32px;\n }\n .sec-5-home-13__card-media {\n height: 260px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-5-home-13 {\n padding: 80px 24px;\n }\n .sec-5-home-13__list {\n gap: 32px;\n }\n .sec-5-home-13__card {\n grid-template-columns: 380px 1fr;\n gap: 32px;\n padding: 24px;\n }\n .sec-5-home-13__card-media {\n height: 240px;\n }\n .sec-5-home-13__card-title {\n font-size: 28px;\n }\n .sec-5-home-13__card-text {\n font-size: 18px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-5-home-13 {\n padding: 64px 20px;\n }\n .sec-5-home-13__header {\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n }\n .sec-5-home-13__card {\n grid-template-columns: 320px 1fr;\n gap: 24px;\n padding: 20px;\n }\n .sec-5-home-13__card-media {\n height: 220px;\n }\n .sec-5-home-13__card-head {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n .sec-5-home-13__card-title {\n font-size: 24px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-5-home-13 {\n padding: 48px 30px;\n }\n .sec-5-home-13__list {\n gap: 24px;\n }\n .sec-5-home-13__card {\n grid-template-columns: 1fr;\n padding: 20px;\n }\n .sec-5-home-13__card-media {\n height: 240px;\n }\n .sec-5-home-13__card-text {\n font-size: 16px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-5-home-13 {\n padding: 36px 30px;\n }\n .sec-5-home-13__card-media {\n height: 200px;\n }\n .sec-5-home-13__card-title {\n font-size: 22px;\n }\n .sec-5-home-13__card-tag-text {\n font-size: 13px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-5-home-13 {\n padding: 36px 30px;\n }\n .sec-5-home-13__card {\n padding: 16px;\n }\n .sec-5-home-13__card-media {\n height: 180px;\n }\n .sec-5-home-13__card-title {\n font-size: 20px;\n }\n .sec-5-home-13__card-text {\n font-size: 15px;\n }\n}\n/* Cascading mobile pivot: stack header + card-head for tablet & phone */\n@media (max-width: 1199.98px) {\n .sec-5-home-13__header {\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n }\n .sec-5-home-13__card-head {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n}\n/* Cascading mobile pivot: single-column card layout for phone */\n@media (max-width: 767.98px) {\n .sec-5-home-13__card {\n grid-template-columns: 1fr;\n }\n}\n/* Home 13 / Section 6 — Our Process Timeline */\n.sec-6-home-13 {\n background-color: var(--at-neutral-50);\n padding: 0 96px 120px 96px;\n position: relative;\n overflow: hidden;\n}\n\n.sec-6-home-13__dots {\n position: absolute;\n inset: 0;\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);\n background-size: 96px 96px;\n pointer-events: none;\n z-index: 0;\n mask-image: radial-gradient(ellipse 80% 60% at center, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));\n -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));\n}\n\n.sec-6-home-13__inner {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n gap: 80px;\n}\n\n/* ── Header ──────────────────────────────────── */\n.sec-6-home-13__header {\n display: grid;\n grid-template-columns: minmax(0, 900px) 440px;\n gap: 96px;\n align-items: start;\n}\n\n.sec-6-home-13__head-left {\n display: flex;\n flex-direction: column;\n gap: 32px;\n}\n\n.sec-6-home-13__label {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\n.sec-6-home-13__label-dot {\n width: 8px;\n height: 8px;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n}\n\n.sec-6-home-13__label-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 13px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-700);\n}\n\n.sec-6-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(40px, 4.4vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-6-home-13__head-right {\n display: flex;\n flex-direction: column;\n gap: 32px;\n padding-top: 16px;\n}\n\n.sec-6-home-13__desc {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n}\n\n.sec-6-home-13__metrics {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0;\n padding: 0;\n}\n\n.sec-6-home-13__metric {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.sec-6-home-13__metric-num {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 32px;\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-6-home-13__metric-label {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n}\n\n/* ── Timeline ────────────────────────────────── */\n.sec-6-home-13__timeline {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 0;\n border-top: 1px solid var(--at-neutral-100);\n padding-top: 24px;\n}\n\n.sec-6-home-13__phase {\n display: flex;\n flex-direction: column;\n gap: 0;\n padding: 0 0 0 28px;\n border-left: 1px solid var(--at-neutral-100);\n position: relative;\n}\n.sec-6-home-13__phase:first-child {\n border-left: none;\n padding-left: 0;\n}\n.sec-6-home-13__phase:first-child .sec-6-home-13__phase-head {\n padding-left: 28px;\n}\n.sec-6-home-13__phase:first-child .sec-6-home-13__phase-body,\n.sec-6-home-13__phase:first-child .sec-6-home-13__phase-deliv {\n padding-left: 28px;\n}\n\n.sec-6-home-13__phase-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding-bottom: 80px;\n}\n\n.sec-6-home-13__phase-id {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\n.sec-6-home-13__phase-dot {\n position: relative;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-300);\n flex-shrink: 0;\n transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;\n}\n.sec-6-home-13__phase-dot::before, .sec-6-home-13__phase-dot::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n opacity: 0;\n pointer-events: none;\n}\n\n.sec-6-home-13__phase-num {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 14px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n}\n\n.sec-6-home-13__phase-week {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.04em;\n color: var(--at-neutral-500);\n white-space: nowrap;\n padding-right: 28px;\n}\n\n.sec-6-home-13__phase-body {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-bottom: 32px;\n padding-right: 28px;\n}\n\n.sec-6-home-13__phase-title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 32px;\n line-height: 1.125;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-6-home-13__phase-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n.sec-6-home-13__phase-deliv {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-top: 20px;\n padding-right: 28px;\n border-top: 1px solid var(--at-neutral-100);\n}\n\n.sec-6-home-13__phase-deliv-label {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 11px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n}\n\n.sec-6-home-13__phase-deliv-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 0;\n}\n.sec-6-home-13__phase-deliv-list li {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 13px;\n line-height: 1.2;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n}\n.sec-6-home-13__phase-deliv-list li span:first-child {\n color: var(--at-theme-primary);\n font-weight: 600;\n width: 8px;\n text-align: center;\n}\n\n/* Active phase state */\n.sec-6-home-13__phase--active .sec-6-home-13__phase-dot {\n width: 12px;\n height: 12px;\n background-color: var(--at-theme-primary);\n}\n.sec-6-home-13__phase--active .sec-6-home-13__phase-dot::before, .sec-6-home-13__phase--active .sec-6-home-13__phase-dot::after {\n animation: sec-6-home-13-ripple 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;\n}\n.sec-6-home-13__phase--active .sec-6-home-13__phase-dot::after {\n animation-delay: 0.9s;\n}\n\n@keyframes sec-6-home-13-ripple {\n 0% {\n opacity: 0.55;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(4);\n }\n}\n/* ── Responsive ──────────────────────────────── */\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-6-home-13 {\n padding: 96px 32px;\n }\n .sec-6-home-13__header {\n grid-template-columns: 1fr 360px;\n gap: 48px;\n }\n .sec-6-home-13__phase-title {\n font-size: 26px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-6-home-13 {\n padding: 80px 24px;\n }\n .sec-6-home-13__inner {\n gap: 56px;\n }\n .sec-6-home-13__header {\n grid-template-columns: 1fr 320px;\n gap: 32px;\n }\n .sec-6-home-13__phase {\n padding-left: 16px;\n }\n .sec-6-home-13__phase:first-child .sec-6-home-13__phase-head,\n .sec-6-home-13__phase:first-child .sec-6-home-13__phase-body,\n .sec-6-home-13__phase:first-child .sec-6-home-13__phase-deliv {\n padding-left: 16px;\n }\n .sec-6-home-13__phase-head,\n .sec-6-home-13__phase-body,\n .sec-6-home-13__phase-deliv {\n padding-right: 16px;\n }\n .sec-6-home-13__phase-title {\n font-size: 22px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-6-home-13 {\n padding: 64px 20px;\n }\n .sec-6-home-13__header {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n .sec-6-home-13__head-right {\n padding-top: 0;\n }\n .sec-6-home-13__timeline {\n grid-template-columns: repeat(2, 1fr);\n gap: 32px 0;\n }\n .sec-6-home-13__phase {\n padding-bottom: 0;\n border-bottom: 1px solid var(--at-neutral-100);\n border-left-width: 0;\n }\n .sec-6-home-13__phase:nth-child(2n+1) {\n border-left: none;\n padding-left: 16px;\n }\n .sec-6-home-13__phase:nth-child(2n+1) .sec-6-home-13__phase-head,\n .sec-6-home-13__phase:nth-child(2n+1) .sec-6-home-13__phase-body,\n .sec-6-home-13__phase:nth-child(2n+1) .sec-6-home-13__phase-deliv {\n padding-left: 16px;\n }\n .sec-6-home-13__phase:nth-child(2n) {\n border-left: 1px solid var(--at-neutral-100);\n padding-left: 16px;\n }\n .sec-6-home-13__phase:nth-child(2n) .sec-6-home-13__phase-head,\n .sec-6-home-13__phase:nth-child(2n) .sec-6-home-13__phase-body,\n .sec-6-home-13__phase:nth-child(2n) .sec-6-home-13__phase-deliv {\n padding-left: 16px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-6-home-13 {\n padding: 48px 16px;\n }\n .sec-6-home-13__inner {\n gap: 40px;\n }\n .sec-6-home-13__timeline {\n grid-template-columns: 1fr;\n }\n .sec-6-home-13__phase {\n padding: 24px 16px !important;\n border-left: none !important;\n border-top: 1px solid var(--at-neutral-100);\n }\n .sec-6-home-13__phase .sec-6-home-13__phase-head,\n .sec-6-home-13__phase .sec-6-home-13__phase-body,\n .sec-6-home-13__phase .sec-6-home-13__phase-deliv {\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n .sec-6-home-13__phase-head {\n padding-bottom: 24px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-6-home-13 {\n padding: 36px 12px;\n }\n .sec-6-home-13__metric-num {\n font-size: 24px;\n }\n .sec-6-home-13__phase-title {\n font-size: 20px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-6-home-13 {\n padding: 28px 30px;\n }\n .sec-6-home-13__inner {\n gap: 32px;\n }\n .sec-6-home-13__metric-num {\n font-size: 22px;\n }\n .sec-6-home-13__phase-title {\n font-size: 20px;\n }\n}\n/* Cascading mobile pivot: single-column header for tablet & phone */\n@media (max-width: 1199.98px) {\n .sec-6-home-13__header {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n .sec-6-home-13__head-right {\n padding-top: 0;\n }\n .sec-6-home-13__dots {\n background-size: 48px 48px;\n }\n}\n/* Cascading mobile pivot: single-column timeline for phone */\n@media (max-width: 767.98px) {\n .sec-6-home-13__timeline {\n grid-template-columns: 1fr;\n gap: 0;\n }\n .sec-6-home-13__phase {\n padding: 24px 16px !important;\n border-left: none !important;\n border-top: 1px solid var(--at-neutral-100);\n }\n .sec-6-home-13__phase:first-child .sec-6-home-13__phase-head,\n .sec-6-home-13__phase:first-child .sec-6-home-13__phase-body,\n .sec-6-home-13__phase:first-child .sec-6-home-13__phase-deliv {\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n .sec-6-home-13__phase:nth-child(2n+1), .sec-6-home-13__phase:nth-child(2n) {\n border-left: none !important;\n padding-left: 16px !important;\n }\n .sec-6-home-13__phase:nth-child(2n+1) .sec-6-home-13__phase-head,\n .sec-6-home-13__phase:nth-child(2n+1) .sec-6-home-13__phase-body,\n .sec-6-home-13__phase:nth-child(2n+1) .sec-6-home-13__phase-deliv, .sec-6-home-13__phase:nth-child(2n) .sec-6-home-13__phase-head,\n .sec-6-home-13__phase:nth-child(2n) .sec-6-home-13__phase-body,\n .sec-6-home-13__phase:nth-child(2n) .sec-6-home-13__phase-deliv {\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n .sec-6-home-13__phase-head {\n padding-bottom: 24px;\n }\n}\n/* Home 13 / Section 7 — Testimonial */\n.sec-7-home-13 {\n background-color: var(--at-neutral-0);\n padding: 120px 96px;\n}\n\n.sec-7-home-13__inner {\n display: grid;\n grid-template-columns: 620px 1fr;\n gap: 64px;\n align-items: stretch;\n}\n\n/* ── Media ───────────────────────────────────── */\n.sec-7-home-13__media {\n width: 100%;\n height: 760px;\n border-radius: 24px;\n overflow: hidden;\n background-color: var(--at-neutral-100);\n}\n.sec-7-home-13__media img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n\n.sec-7-home-13__media-slider {\n width: 100%;\n height: 100%;\n cursor: grab;\n}\n.sec-7-home-13__media-slider:active {\n cursor: grabbing;\n}\n.sec-7-home-13__media-slider .swiper-wrapper,\n.sec-7-home-13__media-slider .swiper-slide {\n height: 100%;\n}\n\n.sec-7-home-13__quote-slider {\n width: 100%;\n cursor: grab;\n}\n.sec-7-home-13__quote-slider:active {\n cursor: grabbing;\n}\n.sec-7-home-13__quote-slider .swiper-slide {\n height: auto;\n}\n\n/* ── Content ─────────────────────────────────── */\n.sec-7-home-13__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 32px;\n min-width: 0;\n}\n@media (min-width: 1200px) {\n .sec-7-home-13__content {\n min-height: 760px;\n }\n}\n\n/* ── Head ────────────────────────────────────── */\n.sec-7-home-13__head {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.sec-7-home-13__label {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\n.sec-7-home-13__label-dot {\n width: 8px;\n height: 8px;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n}\n\n.sec-7-home-13__label-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n}\n\n.sec-7-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(32px, 3.2vw, 56px);\n line-height: 1.143;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-7-home-13__lede {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 20px;\n line-height: 1.45;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n max-width: 773px;\n}\n\n/* ── Quote ───────────────────────────────────── */\n.sec-7-home-13__quote {\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin: 0;\n}\n\n.sec-7-home-13__quote-mark {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 96px;\n line-height: 0.65;\n color: var(--at-theme-primary);\n display: inline-block;\n}\n\n.sec-7-home-13__quote-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 22px;\n line-height: 1.45;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n}\n\n.sec-7-home-13__quote-foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding-top: 16px;\n flex-wrap: wrap;\n}\n\n.sec-7-home-13__author {\n display: inline-flex;\n align-items: center;\n gap: 16px;\n}\n\n.sec-7-home-13__author-name {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 18px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n font-style: normal;\n}\n\n.sec-7-home-13__author-sep {\n width: 24px;\n height: 1px;\n background-color: var(--at-neutral-500);\n}\n\n.sec-7-home-13__author-project {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n.sec-7-home-13__stars {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 0;\n}\n\n/* ── CTA ─────────────────────────────────────── */\n.sec-7-home-13__cta {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n align-self: flex-start;\n transition: opacity 0.3s ease;\n}\n.sec-7-home-13__cta:hover, .sec-7-home-13__cta:focus-visible {\n opacity: 0.85;\n}\n\n.sec-7-home-13__cta-label {\n display: inline-flex;\n align-items: center;\n height: 50px;\n padding: 14px 27px;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n color: var(--at-neutral-900);\n border-radius: 50px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n white-space: nowrap;\n}\n\n.sec-7-home-13__cta-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n height: 50px;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n color: var(--at-neutral-900);\n border-radius: 50%;\n margin-left: -1px;\n}\n.sec-7-home-13__cta-icon svg {\n transition: transform 0.3s ease;\n}\n\n.sec-7-home-13__cta:hover .sec-7-home-13__cta-icon svg,\n.sec-7-home-13__cta:focus-visible .sec-7-home-13__cta-icon svg {\n transform: rotate(-12deg);\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-7-home-13 {\n padding: 96px 32px;\n }\n .sec-7-home-13__inner {\n grid-template-columns: 480px 1fr;\n gap: 48px;\n }\n .sec-7-home-13__media,\n .sec-7-home-13__content {\n height: 640px;\n min-height: 640px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-7-home-13 {\n padding: 80px 24px;\n }\n .sec-7-home-13__inner {\n grid-template-columns: 400px 1fr;\n gap: 32px;\n }\n .sec-7-home-13__media,\n .sec-7-home-13__content {\n height: 560px;\n min-height: 560px;\n }\n .sec-7-home-13__quote-text {\n font-size: 18px;\n }\n .sec-7-home-13__lede {\n font-size: 18px;\n }\n}\n/* Stack inner as flex column on tablet & phone */\n@media (max-width: 1199.98px) {\n .sec-7-home-13__inner {\n display: flex;\n flex-direction: column;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-7-home-13 {\n padding: 64px 20px;\n }\n .sec-7-home-13__inner {\n gap: 32px;\n }\n .sec-7-home-13__media {\n height: 480px;\n }\n .sec-7-home-13__content {\n min-height: auto;\n height: auto;\n gap: 32px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-7-home-13 {\n padding: 48px 30px;\n }\n .sec-7-home-13__media {\n height: 420px;\n border-radius: 16px;\n }\n .sec-7-home-13__title {\n font-size: 28px;\n }\n .sec-7-home-13__quote-mark {\n font-size: 72px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-7-home-13 {\n padding: 36px 30px;\n }\n .sec-7-home-13__media {\n height: 360px;\n }\n .sec-7-home-13__quote-foot {\n align-items: flex-start;\n flex-direction: column;\n gap: 16px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-7-home-13 {\n padding: 36px 30px;\n }\n .sec-7-home-13__media {\n height: 320px;\n }\n .sec-7-home-13__title {\n font-size: 24px;\n }\n .sec-7-home-13__quote-text {\n font-size: 16px;\n }\n}\n/* Home 13 / Section 8 — The Orisa Distinction */\n.sec-8-home-13 {\n background-color: var(--at-neutral-50);\n padding: 120px 96px;\n}\n\n.sec-8-home-13__inner {\n display: flex;\n flex-direction: column;\n gap: 80px;\n}\n\n/* ── Top wrapper ─────────────────────────────── */\n.sec-8-home-13__top {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 32px;\n}\n\n.sec-8-home-13__head {\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 1100px;\n}\n\n.sec-8-home-13__tag {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n.sec-8-home-13__tag:hover, .sec-8-home-13__tag:focus-visible {\n color: var(--at-theme-primary);\n}\n.sec-8-home-13__tag svg {\n transition: transform 0.3s ease;\n}\n.sec-8-home-13__tag:hover svg, .sec-8-home-13__tag:focus-visible svg {\n transform: translate(2px, -2px);\n}\n\n.sec-8-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(40px, 5vw, 72px);\n line-height: 1.111;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-8-home-13__cta {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n height: 50px;\n padding: 14px 27px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n border-radius: 50px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n text-decoration: none;\n flex-shrink: 0;\n transition: opacity 0.3s ease;\n}\n.sec-8-home-13__cta:hover, .sec-8-home-13__cta:focus-visible {\n color: var(--at-neutral-0);\n opacity: 0.9;\n}\n.sec-8-home-13__cta svg {\n transition: transform 0.3s ease;\n}\n.sec-8-home-13__cta:hover svg, .sec-8-home-13__cta:focus-visible svg {\n transform: translate(2px, -2px);\n}\n\n/* ── Body ────────────────────────────────────── */\n.sec-8-home-13__body {\n display: grid;\n grid-template-columns: 620px 1fr;\n gap: 64px;\n align-items: start;\n}\n\n/* ── Left ────────────────────────────────────── */\n.sec-8-home-13__left {\n display: flex;\n flex-direction: column;\n gap: 32px;\n}\n\n.sec-8-home-13__media {\n width: 100%;\n overflow: hidden;\n}\n.sec-8-home-13__media img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n.sec-8-home-13__media.is-changing img {\n opacity: 0;\n}\n\n.sec-8-home-13__lede {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.45;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n.sec-8-home-13__lede.is-changing {\n opacity: 0;\n}\n\n/* ── List ────────────────────────────────────── */\n.sec-8-home-13__list {\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n border-top: 1px solid var(--at-neutral-100);\n}\n\n.sec-8-home-13__item {\n border-bottom: 1px solid var(--at-neutral-100);\n transition: border-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n.sec-8-home-13__row {\n display: grid;\n grid-template-columns: 100px 1fr auto;\n gap: 32px;\n align-items: center;\n padding: 28px 8px;\n text-decoration: none;\n transition: background-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n.sec-8-home-13__row-num {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 32px;\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n transition: color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n.sec-8-home-13__row-name {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 28px;\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n transition: color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), font-size 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n.sec-8-home-13__row-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: 1px solid var(--at-neutral-300);\n color: var(--at-neutral-950);\n background-color: transparent;\n flex-shrink: 0;\n transition: background-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n.sec-8-home-13__row-arrow svg {\n transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n/* Active / hover state */\n.sec-8-home-13__item--active .sec-8-home-13__row .sec-8-home-13__row-name,\n.sec-8-home-13__row:hover .sec-8-home-13__row-name,\n.sec-8-home-13__row:focus-visible .sec-8-home-13__row-name {\n font-size: 36px;\n}\n.sec-8-home-13__item--active .sec-8-home-13__row .sec-8-home-13__row-arrow,\n.sec-8-home-13__row:hover .sec-8-home-13__row-arrow,\n.sec-8-home-13__row:focus-visible .sec-8-home-13__row-arrow {\n width: 56px;\n height: 56px;\n background-color: var(--at-theme-primary);\n border-color: var(--at-theme-primary);\n color: var(--at-common-white);\n}\n.sec-8-home-13__item--active .sec-8-home-13__row .sec-8-home-13__row-arrow svg,\n.sec-8-home-13__row:hover .sec-8-home-13__row-arrow svg,\n.sec-8-home-13__row:focus-visible .sec-8-home-13__row-arrow svg {\n width: 22px;\n height: 22px;\n}\n\n.sec-8-home-13__row:hover .sec-8-home-13__row-arrow,\n.sec-8-home-13__row:focus-visible .sec-8-home-13__row-arrow {\n transform: rotate(-12deg);\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-8-home-13 {\n padding: 96px 32px;\n }\n .sec-8-home-13__body {\n grid-template-columns: 480px 1fr;\n gap: 48px;\n }\n .sec-8-home-13__media {\n height: 420px;\n }\n .sec-8-home-13__row-name {\n font-size: 22px;\n }\n .sec-8-home-13__item--active .sec-8-home-13__row .sec-8-home-13__row-name,\n .sec-8-home-13__row:hover .sec-8-home-13__row-name {\n font-size: 28px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-8-home-13 {\n padding: 80px 24px;\n }\n .sec-8-home-13__inner {\n gap: 56px;\n }\n .sec-8-home-13__body {\n grid-template-columns: 380px 1fr;\n gap: 32px;\n }\n .sec-8-home-13__media {\n height: 360px;\n }\n .sec-8-home-13__lede {\n font-size: 18px;\n }\n .sec-8-home-13__row {\n grid-template-columns: 80px 1fr auto;\n gap: 16px;\n padding: 20px 8px;\n }\n .sec-8-home-13__row-num {\n font-size: 24px;\n }\n .sec-8-home-13__row-name {\n font-size: 18px;\n }\n .sec-8-home-13__item--active .sec-8-home-13__row .sec-8-home-13__row-name,\n .sec-8-home-13__row:hover .sec-8-home-13__row-name {\n font-size: 22px;\n }\n}\n/* Stack body as flex column on tablet & phone */\n@media (max-width: 1199.98px) {\n .sec-8-home-13__body {\n display: flex;\n flex-direction: column;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-8-home-13 {\n padding: 64px 20px;\n }\n .sec-8-home-13__top {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n .sec-8-home-13__body {\n gap: 32px;\n }\n .sec-8-home-13__media {\n height: 380px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-home-13 {\n padding: 48px 30px;\n }\n .sec-8-home-13__inner {\n gap: 40px;\n }\n .sec-8-home-13__media {\n height: 320px;\n }\n .sec-8-home-13__row-arrow {\n width: 36px;\n height: 36px;\n }\n .sec-8-home-13__item--active .sec-8-home-13__row .sec-8-home-13__row-arrow,\n .sec-8-home-13__row:hover .sec-8-home-13__row-arrow {\n width: 44px;\n height: 44px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-8-home-13 {\n padding: 36px 30px;\n }\n .sec-8-home-13__media {\n height: 260px;\n }\n .sec-8-home-13__row {\n grid-template-columns: 60px 1fr auto;\n padding: 16px 4px;\n }\n .sec-8-home-13__row-num {\n font-size: 20px;\n }\n .sec-8-home-13__row-name {\n font-size: 16px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-8-home-13 {\n padding: 36px 30px;\n }\n .sec-8-home-13__title {\n font-size: 32px;\n }\n .sec-8-home-13__lede {\n font-size: 16px;\n }\n .sec-8-home-13__row-name {\n font-size: 14px;\n }\n}\n/* Cascading mobile pivot: stack top wrapper for tablet & phone */\n@media (max-width: 1199.98px) {\n .sec-8-home-13__top {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n}\n/* Cascading mobile pivot: shrink row grid for small phones */\n@media (max-width: 574.98px) {\n .sec-8-home-13__row {\n grid-template-columns: 56px 1fr auto;\n gap: 12px;\n padding: 16px 4px;\n }\n .sec-8-home-13__row-num {\n font-size: 18px;\n }\n}\n/* ===========================================================\n Section 1 — Home 14 (Photography Hero)\n =========================================================== */\n.sec-1-home-14 {\n padding-top: 164px;\n padding-bottom: 80px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-home-14 {\n padding-top: 148px;\n padding-bottom: 64px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-14 {\n padding-top: 136px;\n padding-bottom: 48px;\n }\n}\n.sec-1-home-14__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-1-home-14__inner {\n padding-left: 60px;\n padding-right: 60px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-1-home-14__inner {\n padding-left: 40px;\n padding-right: 40px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-home-14__inner {\n padding-left: 30px;\n padding-right: 30px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-14__inner {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n.sec-1-home-14 {\n /* Top row */\n}\n.sec-1-home-14__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n margin-bottom: 32px;\n}\n.sec-1-home-14__tagline {\n font-family: var(--at-ff-body);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--at-neutral-950);\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-14__tagline {\n font-size: 10px;\n letter-spacing: 1.5px;\n }\n}\n.sec-1-home-14__counter {\n font-family: var(--at-ff-body);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 2px;\n color: var(--at-neutral-950);\n}\n.sec-1-home-14 {\n /* Headline */\n}\n.sec-1-home-14__headline {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(40px, 6.5vw, 110px);\n line-height: 1;\n letter-spacing: -0.045em;\n color: var(--at-neutral-950);\n margin-bottom: 28px;\n}\n@media (max-width: 574.98px) {\n .sec-1-home-14__headline br {\n display: none;\n }\n}\n.sec-1-home-14 {\n /* Sub row */\n}\n.sec-1-home-14__sub {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 32px;\n margin-bottom: 48px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-14__sub {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n}\n.sec-1-home-14__copy {\n font-family: var(--at-ff-body);\n font-size: 18px;\n line-height: 1.5;\n color: var(--at-neutral-500);\n max-width: 720px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-1-home-14__copy {\n font-size: 17px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-14__copy {\n font-size: 16px;\n }\n .sec-1-home-14__copy br {\n display: none;\n }\n}\n.sec-1-home-14__cta {\n display: inline-flex;\n align-items: center;\n gap: 34px;\n flex-shrink: 0;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-14__cta {\n flex-wrap: wrap;\n gap: 20px;\n }\n}\n.sec-1-home-14__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n}\n.sec-1-home-14__btn-primary .sec-1-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n white-space: nowrap;\n line-height: 1;\n}\n.sec-1-home-14__btn-primary .sec-1-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n}\n.sec-1-home-14__btn-primary:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n}\n.sec-1-home-14__btn-link {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--at-neutral-900);\n color: var(--at-neutral-900);\n text-decoration: none;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n line-height: 1;\n transition: opacity 0.3s ease;\n}\n.sec-1-home-14__btn-link:hover {\n opacity: 0.7;\n color: var(--at-neutral-900);\n}\n.sec-1-home-14 {\n /* Hero image card */\n}\n.sec-1-home-14__hero {\n position: relative;\n margin: 0 0 24px 0;\n overflow: hidden;\n border-radius: 16px;\n aspect-ratio: 1720/880;\n}\n@media (max-width: 574.98px) {\n .sec-1-home-14__hero {\n aspect-ratio: 4/5;\n }\n}\n.sec-1-home-14__hero-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n}\n.sec-1-home-14__hero-overlay {\n position: absolute;\n inset: 0;\n padding: 48px 56px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n color: var(--at-common-white);\n pointer-events: none;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-home-14__hero-overlay {\n padding: 36px 40px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-14__hero-overlay {\n padding: 24px 20px;\n }\n}\n.sec-1-home-14__hero-top {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n font-size: 11px;\n color: var(--at-common-white);\n}\n@media (max-width: 574.98px) {\n .sec-1-home-14__hero-top {\n flex-direction: column;\n gap: 8px;\n }\n}\n.sec-1-home-14__hero-caption {\n font-family: var(--at-ff-body);\n font-weight: 500;\n letter-spacing: 2px;\n text-transform: uppercase;\n}\n.sec-1-home-14__hero-credit {\n font-family: var(--at-ff-body);\n font-weight: 400;\n opacity: 0.7;\n letter-spacing: 0.4px;\n}\n.sec-1-home-14__hero-bottom {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 16px;\n color: var(--at-common-white);\n}\n@media (max-width: 574.98px) {\n .sec-1-home-14__hero-bottom {\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n }\n}\n.sec-1-home-14__hero-meta {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.sec-1-home-14__hero-title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 28px;\n letter-spacing: -0.5px;\n line-height: 1;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-14__hero-title {\n font-size: 22px;\n }\n}\n.sec-1-home-14__hero-sub {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n letter-spacing: 0.6px;\n opacity: 0.7;\n}\n.sec-1-home-14__hero-scroll {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n}\n.sec-1-home-14__hero-scroll-label {\n font-weight: 500;\n font-size: 11px;\n letter-spacing: 2px;\n}\n.sec-1-home-14__hero-scroll-arrow {\n font-weight: 500;\n font-size: 14px;\n}\n.sec-1-home-14 {\n /* Tags row */\n}\n.sec-1-home-14__tags {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n padding: 20px 0;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-14__tags {\n flex-wrap: wrap;\n justify-content: flex-start;\n gap: 18px 24px;\n }\n}\n.sec-1-home-14__tag {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n}\n.sec-1-home-14__tag-num {\n font-size: 11px;\n letter-spacing: 1.2px;\n color: var(--at-neutral-500);\n}\n.sec-1-home-14__tag-name {\n font-size: 14px;\n letter-spacing: 0.4px;\n color: var(--at-neutral-950);\n}\n\n/* ===========================================================\n Section 2 — Home 14 (The Studio)\n =========================================================== */\n.sec-2-home-14 {\n padding-top: 80px;\n padding-bottom: 0;\n background-color: var(--at-neutral-0);\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-2-home-14 {\n padding-top: 60px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-2-home-14 {\n padding-top: 50px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-14 {\n padding-top: 46px;\n }\n}\n.sec-2-home-14__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-2-home-14__inner {\n padding-left: 60px;\n padding-right: 60px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-2-home-14__inner {\n padding-left: 40px;\n padding-right: 40px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-2-home-14__inner {\n padding-left: 30px;\n padding-right: 30px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-14__inner {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n.sec-2-home-14 {\n /* Eyebrow */\n}\n.sec-2-home-14__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 32px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n}\n.sec-2-home-14__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n}\n.sec-2-home-14__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n}\n.sec-2-home-14__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n}\n.sec-2-home-14 {\n /* Main row */\n}\n.sec-2-home-14__main {\n display: grid;\n grid-template-columns: 640px 1fr;\n gap: 80px;\n align-items: start;\n}\n@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-2-home-14__main {\n grid-template-columns: 540px 1fr;\n gap: 60px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-2-home-14__main {\n grid-template-columns: 460px 1fr;\n gap: 48px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-14__main {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n}\n.sec-2-home-14 {\n /* Portrait column */\n}\n.sec-2-home-14__portrait-col {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n.sec-2-home-14__portrait {\n position: relative;\n aspect-ratio: 640/800;\n overflow: hidden;\n border-radius: 4px;\n background-color: var(--at-neutral-900);\n}\n.sec-2-home-14__portrait-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n}\n.sec-2-home-14__portrait-overlay {\n position: absolute;\n inset: 0;\n padding: 24px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n color: var(--at-common-white);\n pointer-events: none;\n}\n.sec-2-home-14__portrait-tag {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 10px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--at-common-white);\n opacity: 0.7;\n}\n.sec-2-home-14__portrait-caption {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n letter-spacing: 0.4px;\n color: var(--at-common-white);\n}\n.sec-2-home-14__portrait-name {\n font-weight: 500;\n}\n.sec-2-home-14__portrait-year {\n font-weight: 400;\n opacity: 0.7;\n}\n.sec-2-home-14__portrait-note {\n font-family: var(--at-ff-body);\n font-size: 13px;\n line-height: 1.5;\n color: var(--at-neutral-500);\n}\n.sec-2-home-14 {\n /* Manifesto column */\n}\n.sec-2-home-14__manifesto-col {\n display: flex;\n flex-direction: column;\n}\n.sec-2-home-14__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(36px, 5.2vw, 88px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n margin-bottom: 40px;\n}\n@media (max-width: 574.98px) {\n .sec-2-home-14__title br {\n display: none;\n }\n}\n.sec-2-home-14__body {\n font-family: var(--at-ff-body);\n font-size: 18px;\n line-height: 1.65;\n color: var(--at-neutral-950);\n margin-bottom: 40px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-14__body {\n font-size: 16px;\n }\n}\n.sec-2-home-14__body p {\n margin-bottom: 1.5em;\n}\n.sec-2-home-14__body p:last-child {\n margin-bottom: 0;\n}\n.sec-2-home-14__signature {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n flex-wrap: wrap;\n}\n.sec-2-home-14__signature-block {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.sec-2-home-14__signature-name {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 28px;\n letter-spacing: -0.5px;\n line-height: 1;\n color: var(--at-neutral-950);\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-14__signature-name {\n font-size: 24px;\n }\n}\n.sec-2-home-14__signature-role {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n letter-spacing: 0.4px;\n color: var(--at-neutral-500);\n}\n.sec-2-home-14__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n}\n.sec-2-home-14__btn-primary .sec-2-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n}\n.sec-2-home-14__btn-primary .sec-2-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n}\n.sec-2-home-14__btn-primary:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n}\n.sec-2-home-14 {\n /* Stats row */\n}\n.sec-2-home-14__stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n margin-top: 100px;\n padding: 40px 0;\n border-top: 1px solid var(--at-neutral-200);\n border-bottom: 1px solid var(--at-neutral-200);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-2-home-14__stats {\n margin-top: 80px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-2-home-14__stats {\n grid-template-columns: repeat(2, 1fr);\n row-gap: 32px;\n margin-top: 60px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-14__stats {\n grid-template-columns: repeat(2, 1fr);\n row-gap: 24px;\n margin-top: 48px;\n padding: 32px 0;\n }\n}\n.sec-2-home-14__stat {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 0 24px;\n border-left: 1px solid var(--at-neutral-200);\n}\n.sec-2-home-14__stat:first-child {\n border-left: 0;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-14__stat {\n padding: 0 16px;\n gap: 8px;\n }\n .sec-2-home-14__stat:nth-child(odd) {\n border-left: 0;\n }\n}\n.sec-2-home-14__stat-num {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 84px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-2-home-14__stat-num {\n font-size: 64px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-14__stat-num {\n font-size: 56px;\n }\n}\n.sec-2-home-14__stat-label {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n letter-spacing: -0.32px;\n color: var(--at-neutral-500);\n}\n.sec-2-home-14__stat-note {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 11px;\n letter-spacing: 0.6px;\n color: var(--at-neutral-500);\n text-transform: uppercase;\n}\n\n/* ===========================================================\n Section 3 — Home 14 (Selected Series)\n =========================================================== */\n.sec-3-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-0);\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-3-home-14 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-3-home-14 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-3-home-14 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n}\n.sec-3-home-14__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-3-home-14__inner {\n padding-left: 60px;\n padding-right: 60px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-3-home-14__inner {\n padding-left: 40px;\n padding-right: 40px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-3-home-14__inner {\n padding-left: 30px;\n padding-right: 30px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-3-home-14__inner {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n.sec-3-home-14 {\n /* Header row */\n}\n.sec-3-home-14__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 40px;\n margin-bottom: 64px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-3-home-14__head {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n}\n.sec-3-home-14__head-left {\n display: flex;\n flex-direction: column;\n gap: 24px;\n max-width: 1100px;\n}\n.sec-3-home-14__head-right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n max-width: 360px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-3-home-14__head-right {\n align-items: flex-start;\n max-width: none;\n }\n}\n.sec-3-home-14__head-copy {\n font-family: var(--at-ff-body);\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n text-align: right;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-3-home-14__head-copy {\n text-align: left;\n }\n .sec-3-home-14__head-copy br {\n display: none;\n }\n}\n.sec-3-home-14 {\n /* Eyebrow */\n}\n.sec-3-home-14__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n}\n.sec-3-home-14__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n}\n.sec-3-home-14__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n}\n.sec-3-home-14__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n}\n.sec-3-home-14 {\n /* Title */\n}\n.sec-3-home-14__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(36px, 4.8vw, 80px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n}\n@media (max-width: 574.98px) {\n .sec-3-home-14__title br {\n display: none;\n }\n}\n.sec-3-home-14 {\n /* Primary button */\n}\n.sec-3-home-14__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n}\n.sec-3-home-14__btn-primary .sec-3-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n}\n.sec-3-home-14__btn-primary .sec-3-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n}\n.sec-3-home-14__btn-primary:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n}\n.sec-3-home-14 {\n /* Grid */\n}\n.sec-3-home-14__grid {\n display: grid;\n grid-template-columns: minmax(0, 960fr) minmax(0, 720fr);\n gap: 40px;\n align-items: start;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-3-home-14__grid {\n grid-template-columns: 1fr;\n gap: 48px;\n }\n}\n.sec-3-home-14 {\n /* Featured */\n}\n.sec-3-home-14__featured {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n.sec-3-home-14__featured-link {\n display: block;\n text-decoration: none;\n color: inherit;\n}\n.sec-3-home-14__featured-link:hover .sec-3-home-14__featured-img {\n transform: scale(1.08) rotate(-1.2deg);\n filter: saturate(1.12) contrast(1.04);\n}\n.sec-3-home-14__featured-link:hover .sec-3-home-14__featured-frame::after {\n opacity: 1;\n}\n.sec-3-home-14__featured-link:hover .sec-3-home-14__featured-arrow {\n background: var(--at-neutral-950);\n color: var(--at-common-white);\n transform: rotate(-45deg);\n}\n.sec-3-home-14__featured-link:hover .sec-3-home-14__featured-badge {\n background: var(--at-common-white);\n color: var(--at-neutral-950);\n}\n.sec-3-home-14__featured-frame {\n position: relative;\n aspect-ratio: 960/980;\n overflow: hidden;\n border-radius: 4px;\n background-color: var(--at-neutral-900);\n}\n.sec-3-home-14__featured-frame::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 100%);\n opacity: 0;\n transition: opacity 0.6s ease;\n pointer-events: none;\n z-index: 1;\n}\n.sec-3-home-14__featured-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n transform-origin: center;\n transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;\n}\n.sec-3-home-14__featured-overlay {\n position: absolute;\n inset: 0;\n padding: 28px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n color: var(--at-common-white);\n pointer-events: none;\n z-index: 2;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-3-home-14__featured-overlay {\n padding: 20px;\n }\n}\n.sec-3-home-14__featured-top {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n.sec-3-home-14__featured-num {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 11px;\n letter-spacing: 2px;\n color: var(--at-common-white);\n}\n.sec-3-home-14__featured-badge {\n display: inline-flex;\n align-items: center;\n border: 1px solid var(--at-common-white);\n color: var(--at-common-white);\n padding: 6px 12px;\n border-radius: 999px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 10px;\n letter-spacing: 2px;\n line-height: 1;\n transition: background-color 0.4s ease, color 0.4s ease;\n}\n.sec-3-home-14__featured-bot {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 24px;\n}\n.sec-3-home-14__featured-meta {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.sec-3-home-14__featured-title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 48px;\n line-height: 1;\n letter-spacing: -1px;\n color: var(--at-common-white);\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-3-home-14__featured-title {\n font-size: 36px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-3-home-14__featured-title {\n font-size: 28px;\n }\n}\n.sec-3-home-14__featured-sub {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 13px;\n letter-spacing: 0.4px;\n color: var(--at-common-white);\n opacity: 0.75;\n}\n.sec-3-home-14__featured-arrow {\n flex-shrink: 0;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: var(--at-common-white);\n color: var(--at-neutral-950);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n pointer-events: auto;\n transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);\n}\n.sec-3-home-14__featured-desc {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n}\n.sec-3-home-14 {\n /* List */\n}\n.sec-3-home-14__list {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n.sec-3-home-14__item {\n border-bottom: 1px solid var(--at-neutral-200);\n}\n.sec-3-home-14__item:last-child {\n border-bottom: 0;\n}\n.sec-3-home-14__item-link {\n display: grid;\n grid-template-columns: 220px 1fr;\n gap: 24px;\n align-items: center;\n padding: 24px 0;\n text-decoration: none;\n color: inherit;\n}\n@media (max-width: 574.98px) {\n .sec-3-home-14__item-link {\n grid-template-columns: 140px 1fr;\n gap: 16px;\n }\n}\n.sec-3-home-14__item-link:hover .sec-3-home-14__item-img img {\n transform: scale(1.08) rotate(-1.2deg);\n filter: saturate(1.12) contrast(1.04);\n}\n.sec-3-home-14__item-link:hover .sec-3-home-14__item-img::after {\n opacity: 1;\n}\n.sec-3-home-14__item-link:hover .sec-3-home-14__item-title {\n transform: translateX(6px);\n}\n.sec-3-home-14__item-link:hover .sec-3-home-14__item-view {\n transform: translateX(4px);\n}\n.sec-3-home-14__item-img {\n display: block;\n position: relative;\n aspect-ratio: 220/260;\n overflow: hidden;\n}\n.sec-3-home-14__item-img img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform-origin: center;\n transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;\n}\n.sec-3-home-14__item-meta {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-width: 0;\n}\n.sec-3-home-14__item-top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n}\n.sec-3-home-14__item-num {\n font-weight: 600;\n letter-spacing: 2px;\n color: var(--at-neutral-500);\n}\n.sec-3-home-14__item-view {\n font-weight: 500;\n letter-spacing: 0.4px;\n color: var(--at-neutral-950);\n transition: transform 0.4s ease;\n}\n.sec-3-home-14__item-title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 42px;\n line-height: 1.05;\n letter-spacing: -0.8px;\n color: var(--at-neutral-950);\n transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-3-home-14__item-title {\n font-size: 36px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-3-home-14__item-title {\n font-size: 32px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-3-home-14__item-title {\n font-size: 26px;\n }\n}\n.sec-3-home-14__item-sub {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 13px;\n line-height: 1.5;\n letter-spacing: 0.2px;\n color: var(--at-neutral-500);\n}\n\n/* ===========================================================\n Section 4 — Home 14 (Gallery / Archive)\n =========================================================== */\n.sec-4-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-0);\n border-top: 1px solid var(--at-neutral-200);\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-4-home-14 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-home-14 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-14 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n}\n.sec-4-home-14__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-4-home-14__inner {\n padding-left: 60px;\n padding-right: 60px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-4-home-14__inner {\n padding-left: 40px;\n padding-right: 40px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-home-14__inner {\n padding-left: 30px;\n padding-right: 30px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-14__inner {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n.sec-4-home-14 {\n /* Header */\n}\n.sec-4-home-14__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 40px;\n margin-bottom: 48px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-14__head {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n}\n.sec-4-home-14__head-left {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n.sec-4-home-14__head-right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n max-width: 380px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-14__head-right {\n align-items: flex-start;\n max-width: none;\n }\n}\n.sec-4-home-14__head-copy {\n font-family: var(--at-ff-body);\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n text-align: right;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-14__head-copy {\n text-align: left;\n }\n .sec-4-home-14__head-copy br {\n display: none;\n }\n}\n.sec-4-home-14__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n}\n.sec-4-home-14__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n}\n.sec-4-home-14__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n}\n.sec-4-home-14__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n}\n.sec-4-home-14__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(40px, 5vw, 84px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n}\n@media (max-width: 574.98px) {\n .sec-4-home-14__title br {\n display: none;\n }\n}\n.sec-4-home-14__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n}\n.sec-4-home-14__btn-primary .sec-4-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n}\n.sec-4-home-14__btn-primary .sec-4-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n}\n.sec-4-home-14__btn-primary:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n}\n.sec-4-home-14 {\n /* Filter tabs */\n}\n.sec-4-home-14__tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n padding: 12px 0;\n border-top: 1px solid var(--at-neutral-200);\n border-bottom: 1px solid var(--at-neutral-200);\n margin-bottom: 48px;\n}\n.sec-4-home-14__tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 10px 18px;\n border: 1px solid var(--at-neutral-200);\n background: transparent;\n border-radius: 999px;\n cursor: pointer;\n font-family: var(--at-ff-body);\n line-height: 1;\n color: var(--at-neutral-950);\n transition: all 0.25s ease;\n}\n.sec-4-home-14__tab.is-active {\n background-color: var(--at-neutral-950);\n border-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n}\n.sec-4-home-14__tab.is-active .sec-4-home-14__tab-count {\n color: var(--at-neutral-0);\n opacity: 0.7;\n}\n.sec-4-home-14__tab:hover:not(.is-active) {\n border-color: var(--at-neutral-950);\n}\n.sec-4-home-14__tab-label {\n font-weight: 500;\n font-size: 13px;\n}\n.sec-4-home-14__tab-count {\n font-weight: 400;\n font-size: 11px;\n letter-spacing: 0.4px;\n color: var(--at-neutral-500);\n}\n.sec-4-home-14 {\n /* Masonry */\n}\n.sec-4-home-14__masonry {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 24px;\n margin-bottom: 48px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-home-14__masonry {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-14__masonry {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n}\n.sec-4-home-14__col {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n.sec-4-home-14__col--offset-60 {\n padding-top: 60px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-14__col--offset-60 {\n padding-top: 0;\n }\n}\n.sec-4-home-14__col--offset-30 {\n padding-top: 30px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-14__col--offset-30 {\n padding-top: 0;\n }\n}\n.sec-4-home-14__tile {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 20px;\n border-radius: 4px;\n overflow: hidden;\n text-decoration: none;\n color: var(--at-common-white);\n background-color: var(--at-neutral-900);\n}\n.sec-4-home-14__tile--h420 {\n aspect-ratio: 557/420;\n}\n.sec-4-home-14__tile--h440 {\n aspect-ratio: 557/440;\n}\n.sec-4-home-14__tile--h480 {\n aspect-ratio: 557/480;\n}\n.sec-4-home-14__tile--h500 {\n aspect-ratio: 557/500;\n}\n.sec-4-home-14__tile--h520 {\n aspect-ratio: 557/520;\n}\n.sec-4-home-14__tile--h540 {\n aspect-ratio: 557/540;\n}\n.sec-4-home-14__tile--h560 {\n aspect-ratio: 557/560;\n}\n.sec-4-home-14__tile--h600 {\n aspect-ratio: 557/600;\n}\n.sec-4-home-14__tile--h620 {\n aspect-ratio: 557/620;\n}\n.sec-4-home-14__tile--h700 {\n aspect-ratio: 557/700;\n}\n.sec-4-home-14__tile--h720 {\n aspect-ratio: 557/720;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-14__tile {\n aspect-ratio: 4/5 !important;\n }\n}\n.sec-4-home-14__tile:hover {\n color: var(--at-common-white);\n}\n.sec-4-home-14__tile:hover .sec-4-home-14__tile-img {\n transform: scale(1.08) rotate(-1.2deg);\n filter: saturate(1.12) contrast(1.04);\n}\n.sec-4-home-14__tile-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n border-radius: 4px;\n transform-origin: center;\n transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;\n}\n.sec-4-home-14__tile-top {\n position: relative;\n z-index: 2;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 10px;\n color: #fff;\n opacity: 0.6;\n}\n.sec-4-home-14__tile-num {\n letter-spacing: 2px;\n}\n.sec-4-home-14__tile-year {\n letter-spacing: 0.4px;\n}\n.sec-4-home-14__tile-meta {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-family: var(--at-ff-body);\n color: #fff;\n}\n.sec-4-home-14__tile-title {\n font-weight: 500;\n font-size: 18px;\n letter-spacing: -0.3px;\n line-height: 1.1;\n}\n.sec-4-home-14__tile-sub {\n font-weight: 400;\n font-size: 11px;\n letter-spacing: 0.4px;\n opacity: 0.7;\n}\n.sec-4-home-14 {\n /* Bottom row */\n}\n.sec-4-home-14__bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 24px;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-14__bottom {\n flex-direction: column;\n align-items: flex-start;\n }\n}\n.sec-4-home-14__bottom-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 11px;\n letter-spacing: 2px;\n color: var(--at-neutral-500);\n}\n\n/* ===========================================================\n Section 5 — Home 14 (Services list)\n\n Note: this section uses an inverted (dark) palette in light mode.\n In dark mode it inherits inverse colors via the --at-neutral-*\n token swap, becoming light-on-dark.\n =========================================================== */\n.sec-5-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-5-home-14 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-5-home-14 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-home-14 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n}\n.sec-5-home-14__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-5-home-14__inner {\n padding-left: 60px;\n padding-right: 60px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-5-home-14__inner {\n padding-left: 40px;\n padding-right: 40px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-5-home-14__inner {\n padding-left: 30px;\n padding-right: 30px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-home-14__inner {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n.sec-5-home-14 {\n /* Header */\n}\n.sec-5-home-14__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 40px;\n margin-bottom: 64px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-home-14__head {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n}\n.sec-5-home-14__head-left {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n.sec-5-home-14__head-right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n max-width: 380px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-home-14__head-right {\n align-items: flex-start;\n max-width: none;\n }\n}\n.sec-5-home-14__head-copy {\n font-family: var(--at-ff-body);\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n text-align: right;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-home-14__head-copy {\n text-align: left;\n }\n .sec-5-home-14__head-copy br {\n display: none;\n }\n}\n.sec-5-home-14__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n}\n.sec-5-home-14__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-0);\n}\n.sec-5-home-14__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-0);\n letter-spacing: 2px;\n}\n.sec-5-home-14__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n}\n.sec-5-home-14__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(40px, 5vw, 84px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-0);\n}\n@media (max-width: 574.98px) {\n .sec-5-home-14__title br {\n display: none;\n }\n}\n.sec-5-home-14 {\n /* Primary button on dark — neutral-700 (lighter than bg) */\n}\n.sec-5-home-14__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n}\n.sec-5-home-14__btn-primary .sec-5-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-700);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n}\n.sec-5-home-14__btn-primary .sec-5-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-700);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n}\n.sec-5-home-14__btn-primary:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n}\n.sec-5-home-14 {\n /* List */\n}\n.sec-5-home-14__list {\n display: flex;\n flex-direction: column;\n}\n.sec-5-home-14__row {\n border-bottom: 1px solid var(--at-neutral-500);\n}\n.sec-5-home-14__row:first-child {\n border-top: 1px solid var(--at-neutral-500);\n}\n.sec-5-home-14__row-link {\n display: grid;\n grid-template-columns: 80px 80px 1fr 280px auto;\n align-items: center;\n gap: 40px;\n padding: 40px 0;\n text-decoration: none;\n color: inherit;\n transition: opacity 0.25s ease, padding 0.7s cubic-bezier(0.22, 1, 0.36, 1);\n}\n.sec-5-home-14__row-link:hover {\n padding-left: 24px;\n padding-right: 24px;\n}\n.sec-5-home-14__row-link:hover .sec-5-home-14__row-icon img {\n transform: scale(1.12) rotate(-6deg);\n filter: saturate(1.12) contrast(1.04);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-5-home-14__row-link {\n grid-template-columns: 60px 80px 1fr 240px auto;\n gap: 32px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-5-home-14__row-link {\n grid-template-columns: 80px 1fr 200px auto;\n gap: 24px;\n row-gap: 16px;\n }\n .sec-5-home-14__row-link .sec-5-home-14__row-num {\n grid-column: 1/5;\n margin-bottom: -8px;\n }\n .sec-5-home-14__row-link .sec-5-home-14__row-icon {\n grid-column: 1;\n grid-row: 2;\n }\n .sec-5-home-14__row-link .sec-5-home-14__row-meta {\n grid-column: 2;\n grid-row: 2;\n }\n .sec-5-home-14__row-link .sec-5-home-14__row-price {\n grid-column: 3;\n grid-row: 2;\n }\n .sec-5-home-14__row-link .sec-5-home-14__row-arrow {\n grid-column: 4;\n grid-row: 2;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-home-14__row-link {\n grid-template-columns: 64px 1fr auto;\n gap: 16px;\n row-gap: 12px;\n padding: 28px 0;\n }\n .sec-5-home-14__row-link .sec-5-home-14__row-num {\n grid-column: 1/4;\n margin-bottom: 0;\n }\n .sec-5-home-14__row-link .sec-5-home-14__row-icon {\n grid-column: 1;\n grid-row: 2;\n }\n .sec-5-home-14__row-link .sec-5-home-14__row-meta {\n grid-column: 2/4;\n grid-row: 2;\n }\n .sec-5-home-14__row-link .sec-5-home-14__row-price {\n grid-column: 2/4;\n grid-row: 3;\n align-items: flex-start;\n text-align: left;\n }\n .sec-5-home-14__row-link .sec-5-home-14__row-arrow {\n display: none;\n }\n}\n.sec-5-home-14__row-link:hover {\n opacity: 0.85;\n}\n.sec-5-home-14__row-link:hover .sec-5-home-14__row-arrow {\n transform: translateX(4px) translateY(-4px);\n}\n.sec-5-home-14__row-num {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n letter-spacing: 2px;\n color: var(--at-neutral-500);\n}\n.sec-5-home-14__row-icon {\n display: block;\n width: 80px;\n height: 80px;\n border-radius: 8px;\n overflow: hidden;\n background-color: var(--at-neutral-900);\n flex-shrink: 0;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-home-14__row-icon {\n width: 64px;\n height: 64px;\n border-radius: 6px;\n }\n}\n.sec-5-home-14__row-icon img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform-origin: center;\n transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;\n}\n.sec-5-home-14__row-meta {\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 0;\n}\n.sec-5-home-14__row-title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 32px;\n letter-spacing: -0.5px;\n line-height: 1.1;\n color: var(--at-neutral-0);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-5-home-14__row-title {\n font-size: 28px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-5-home-14__row-title {\n font-size: 22px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-5-home-14__row-title {\n font-size: 18px;\n }\n}\n.sec-5-home-14__row-desc {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n}\n.sec-5-home-14__row-price {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 6px;\n text-align: right;\n}\n.sec-5-home-14__row-price-amount {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n letter-spacing: 0.2px;\n color: var(--at-neutral-0);\n}\n.sec-5-home-14__row-price-cta {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n letter-spacing: 0.4px;\n color: var(--at-neutral-500);\n}\n.sec-5-home-14__row-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--at-neutral-0);\n transition: transform 0.25s ease;\n}\n\n/* ===========================================================\n Section 6 — Home 14 (Our Process)\n =========================================================== */\n.sec-6-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-0);\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-6-home-14 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-6-home-14 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-6-home-14 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n}\n.sec-6-home-14__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-6-home-14__inner {\n padding-left: 60px;\n padding-right: 60px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-6-home-14__inner {\n padding-left: 40px;\n padding-right: 40px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-6-home-14__inner {\n padding-left: 30px;\n padding-right: 30px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-6-home-14__inner {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n.sec-6-home-14 {\n /* Header */\n}\n.sec-6-home-14__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 40px;\n margin-bottom: 64px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-6-home-14__head {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n}\n.sec-6-home-14__head-left {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n.sec-6-home-14__head-right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n max-width: 380px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-6-home-14__head-right {\n align-items: flex-start;\n max-width: none;\n }\n}\n.sec-6-home-14__head-copy {\n font-family: var(--at-ff-body);\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n text-align: right;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-6-home-14__head-copy {\n text-align: left;\n }\n .sec-6-home-14__head-copy br {\n display: none;\n }\n}\n.sec-6-home-14__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n}\n.sec-6-home-14__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n}\n.sec-6-home-14__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n}\n.sec-6-home-14__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n}\n.sec-6-home-14__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(40px, 5vw, 84px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n}\n@media (max-width: 574.98px) {\n .sec-6-home-14__title br {\n display: none;\n }\n}\n.sec-6-home-14__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n}\n.sec-6-home-14__btn-primary .sec-6-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n}\n.sec-6-home-14__btn-primary .sec-6-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n}\n.sec-6-home-14__btn-primary:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n}\n.sec-6-home-14 {\n /* Phases */\n}\n.sec-6-home-14__phases {\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n counter-reset: phase;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-6-home-14__phases {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-6-home-14__phases {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-6-home-14__phases {\n grid-template-columns: 1fr;\n }\n}\n.sec-6-home-14__phase {\n display: flex;\n flex-direction: column;\n gap: 20px;\n padding: 40px 32px;\n border-left: 1px solid var(--at-neutral-200);\n min-height: 420px;\n}\n.sec-6-home-14__phase:first-child {\n border-left: 0;\n}\n.sec-6-home-14__phase:hover .sec-6-home-14__phase-dot {\n border-radius: 0;\n background-color: var(--at-theme-primary);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-6-home-14__phase {\n padding: 32px 24px;\n gap: 16px;\n min-height: 360px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-6-home-14__phase {\n min-height: 0;\n padding: 28px 20px;\n }\n .sec-6-home-14__phase:nth-child(odd) {\n border-left: 0;\n }\n .sec-6-home-14__phase:nth-child(n+3) {\n border-top: 1px solid var(--at-neutral-200);\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-6-home-14__phase {\n min-height: 0;\n padding: 24px 0;\n border-left: 0;\n border-top: 1px solid var(--at-neutral-200);\n }\n .sec-6-home-14__phase:first-child {\n border-top: 0;\n padding-top: 0;\n }\n}\n.sec-6-home-14__phase-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n transition: border-radius 0.3s ease, background-color 0.3s ease;\n}\n.sec-6-home-14__phase-num {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 64px;\n line-height: 1;\n letter-spacing: -2px;\n color: var(--at-neutral-950);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-6-home-14__phase-num {\n font-size: 52px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-6-home-14__phase-num {\n font-size: 44px;\n }\n}\n.sec-6-home-14__phase-name {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 22px;\n letter-spacing: -0.3px;\n line-height: 1.1;\n color: var(--at-neutral-950);\n margin-top: -8px;\n}\n.sec-6-home-14__phase-desc {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 13px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n}\n.sec-6-home-14__phase-time {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 11px;\n letter-spacing: 1.6px;\n text-transform: uppercase;\n color: var(--at-neutral-500);\n margin-top: auto;\n}\n\n/* ===========================================================\n Section 7 — Home 14 (Client Stories / Testimonial)\n =========================================================== */\n.sec-7-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-0);\n border-top: 1px solid var(--at-neutral-200);\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-7-home-14 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-7-home-14 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-14 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n}\n.sec-7-home-14__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-7-home-14__inner {\n padding-left: 60px;\n padding-right: 60px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-7-home-14__inner {\n padding-left: 40px;\n padding-right: 40px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-7-home-14__inner {\n padding-left: 30px;\n padding-right: 30px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-14__inner {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n.sec-7-home-14 {\n /* Header */\n}\n.sec-7-home-14__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 40px;\n margin-bottom: 64px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-14__head {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n}\n.sec-7-home-14__head-left {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n.sec-7-home-14__head-right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n}\n.sec-7-home-14__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n}\n.sec-7-home-14__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n}\n.sec-7-home-14__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n}\n.sec-7-home-14__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n}\n.sec-7-home-14__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(36px, 4.8vw, 80px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n}\n@media (max-width: 574.98px) {\n .sec-7-home-14__title br {\n display: none;\n }\n}\n.sec-7-home-14__nav {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n.sec-7-home-14__nav-count {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n letter-spacing: 1.4px;\n color: var(--at-neutral-950);\n}\n.sec-7-home-14__nav-btn {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.25s ease;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-950);\n color: var(--at-neutral-950);\n}\n.sec-7-home-14__nav-btn--next {\n background-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n border-color: var(--at-neutral-950);\n}\n.sec-7-home-14__nav-btn:hover {\n background-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n}\n.sec-7-home-14__head-link {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n color: var(--at-neutral-950);\n text-decoration: none;\n transition: opacity 0.25s ease;\n}\n.sec-7-home-14__head-link:hover {\n opacity: 0.7;\n color: var(--at-neutral-950);\n}\n.sec-7-home-14 {\n /* Main */\n}\n.sec-7-home-14__main {\n display: grid;\n grid-template-columns: 640px 1fr;\n gap: 80px;\n align-items: stretch;\n}\n@media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-7-home-14__main {\n grid-template-columns: 520px 1fr;\n gap: 60px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-7-home-14__main {\n grid-template-columns: 440px 1fr;\n gap: 48px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-14__main {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n}\n.sec-7-home-14 {\n /* Portrait */\n}\n.sec-7-home-14__portrait {\n position: relative;\n aspect-ratio: 640/720;\n overflow: hidden;\n border-radius: 4px;\n background-color: var(--at-neutral-900);\n}\n.sec-7-home-14__portrait-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n}\n.sec-7-home-14__portrait-overlay {\n position: absolute;\n inset: 0;\n padding: 28px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n color: var(--at-common-white);\n pointer-events: none;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-14__portrait-overlay {\n padding: 20px;\n }\n}\n.sec-7-home-14__portrait-top {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 10px;\n color: var(--at-common-white);\n}\n.sec-7-home-14__portrait-tag {\n letter-spacing: 2px;\n}\n.sec-7-home-14__portrait-counter {\n letter-spacing: 0.4px;\n}\n.sec-7-home-14__portrait-bot {\n display: flex;\n flex-direction: column;\n gap: 6px;\n color: var(--at-common-white);\n}\n.sec-7-home-14__portrait-name {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 22px;\n letter-spacing: -0.3px;\n line-height: 1.1;\n}\n.sec-7-home-14__portrait-role {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n letter-spacing: 0.4px;\n opacity: 0.7;\n}\n.sec-7-home-14 {\n /* Quote */\n}\n.sec-7-home-14__quote {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.sec-7-home-14__quote-mark {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 200px;\n line-height: 0.8;\n color: var(--at-neutral-950);\n margin-bottom: 16px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-14__quote-mark {\n font-size: 140px;\n }\n}\n.sec-7-home-14__stars {\n display: inline-flex;\n gap: 4px;\n margin-bottom: 28px;\n}\n.sec-7-home-14__star {\n width: 18px;\n height: 18px;\n background-color: var(--at-neutral-950);\n border-radius: 3px;\n clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n}\n.sec-7-home-14__quote-text {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 34px;\n line-height: 1.35;\n letter-spacing: -0.5px;\n color: var(--at-neutral-950);\n padding: 0;\n border: 0;\n margin-bottom: 40px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-7-home-14__quote-text {\n font-size: 28px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-7-home-14__quote-text {\n font-size: 24px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-14__quote-text {\n font-size: 20px;\n }\n}\n.sec-7-home-14__project {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 24px;\n padding-top: 24px;\n border-top: 1px solid var(--at-neutral-200);\n width: 100%;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-14__project {\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n }\n}\n.sec-7-home-14__project-meta {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.sec-7-home-14__project-title {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n letter-spacing: 0.2px;\n color: var(--at-neutral-950);\n}\n.sec-7-home-14__project-sub {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 11px;\n letter-spacing: 0.4px;\n color: var(--at-neutral-500);\n}\n.sec-7-home-14__project-link {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n color: var(--at-neutral-950);\n text-decoration: none;\n transition: opacity 0.25s ease;\n}\n.sec-7-home-14__project-link:hover {\n opacity: 0.7;\n color: var(--at-neutral-950);\n}\n\n/* ===========================================================\n Section 8 — Home 14 (Recognition Index: Press + Awards)\n =========================================================== */\n.sec-8-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-50);\n overflow: hidden;\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-8-home-14 {\n padding-top: 110px;\n padding-bottom: 110px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-home-14 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-14 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n}\n.sec-8-home-14__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-8-home-14__inner {\n padding-left: 60px;\n padding-right: 60px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-8-home-14__inner {\n padding-left: 40px;\n padding-right: 40px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-home-14__inner {\n padding-left: 30px;\n padding-right: 30px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-14__inner {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n.sec-8-home-14 {\n /* ---------- Header ---------- */\n}\n.sec-8-home-14__head {\n display: grid;\n grid-template-columns: 1.1fr 1fr;\n gap: 60px;\n align-items: end;\n margin-bottom: 56px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-8-home-14__head {\n gap: 48px;\n padding-bottom: 48px;\n margin-bottom: 48px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-8-home-14__head {\n grid-template-columns: 1fr;\n gap: 32px;\n align-items: start;\n padding-bottom: 40px;\n margin-bottom: 40px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-8-home-14__head {\n grid-template-columns: 1fr;\n gap: 24px;\n padding-bottom: 32px;\n margin-bottom: 32px;\n }\n}\n.sec-8-home-14__head-left {\n display: flex;\n flex-direction: column;\n gap: 32px;\n}\n.sec-8-home-14__head-right {\n display: flex;\n flex-direction: column;\n gap: 40px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-14__head-right {\n gap: 28px;\n }\n}\n.sec-8-home-14 {\n /* Shared eyebrow */\n}\n.sec-8-home-14__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n}\n.sec-8-home-14__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n flex-shrink: 0;\n}\n.sec-8-home-14__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n}\n.sec-8-home-14__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n}\n.sec-8-home-14__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(40px, 5vw, 84px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n}\n@media (max-width: 574.98px) {\n .sec-8-home-14__title br {\n display: none;\n }\n}\n.sec-8-home-14__head-copy {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 16px;\n line-height: 1.55;\n letter-spacing: -0.01em;\n color: var(--at-neutral-700);\n}\n@media (max-width: 574.98px) {\n .sec-8-home-14__head-copy br {\n display: none;\n }\n}\n.sec-8-home-14 {\n /* Metrics row (24 / 12 / 07) */\n}\n.sec-8-home-14__metrics {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 24px;\n padding-top: 32px;\n}\n@media (max-width: 574.98px) {\n .sec-8-home-14__metrics {\n gap: 16px;\n padding-top: 24px;\n }\n}\n.sec-8-home-14__metric {\n display: flex;\n flex-direction: column-reverse;\n gap: 8px;\n}\n.sec-8-home-14__metric-key {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--at-neutral-500);\n}\n.sec-8-home-14__metric-val {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(36px, 3.5vw, 56px);\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n font-feature-settings: \"tnum\" 1;\n}\n.sec-8-home-14 {\n /* ---------- Press ticker ---------- */\n}\n.sec-8-home-14__ticker {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n gap: 32px;\n padding: 28px 0;\n border-top: 1px solid var(--at-neutral-200);\n border-bottom: 1px solid var(--at-neutral-200);\n margin-bottom: 100px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-8-home-14__ticker {\n margin-bottom: 80px;\n gap: 24px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-home-14__ticker {\n grid-template-columns: 1fr;\n gap: 20px;\n padding: 24px 0;\n margin-bottom: 64px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-14__ticker {\n grid-template-columns: 1fr;\n gap: 16px;\n padding: 20px 0;\n margin-bottom: 48px;\n }\n}\n.sec-8-home-14__ticker-label {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--at-neutral-950);\n white-space: nowrap;\n}\n.sec-8-home-14__ticker-label-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n}\n.sec-8-home-14__ticker-viewport {\n overflow: hidden;\n mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);\n -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);\n}\n.sec-8-home-14__ticker-track {\n display: inline-flex;\n width: max-content;\n animation: sec8home14TickerScroll 32s linear infinite;\n will-change: transform;\n}\n.sec-8-home-14__ticker-track:hover {\n animation-play-state: paused;\n}\n.sec-8-home-14__ticker-list {\n display: inline-flex;\n align-items: center;\n gap: 48px;\n padding-right: 48px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-home-14__ticker-list {\n gap: 36px;\n padding-right: 36px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-14__ticker-list {\n gap: 28px;\n padding-right: 28px;\n }\n}\n.sec-8-home-14__ticker-item {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 28px;\n line-height: 1;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--at-neutral-950);\n white-space: nowrap;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-8-home-14__ticker-item {\n font-size: 24px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-home-14__ticker-item {\n font-size: 22px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-14__ticker-item {\n font-size: 18px;\n letter-spacing: 1.5px;\n }\n}\n.sec-8-home-14__ticker-item[aria-hidden=true] {\n color: var(--at-neutral-300);\n font-size: 14px;\n}\n@keyframes sec8home14TickerScroll {\n from {\n transform: translate3d(0, 0, 0);\n }\n to {\n transform: translate3d(-50%, 0, 0);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .sec-8-home-14__ticker-track {\n animation: none;\n }\n}\n.sec-8-home-14 {\n /* ---------- Awards roster ---------- */\n}\n.sec-8-home-14__roster-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding-bottom: 20px;\n margin-bottom: 8px;\n border-bottom: 1px solid var(--at-neutral-300);\n}\n.sec-8-home-14__roster-key {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--at-neutral-950);\n}\n.sec-8-home-14__roster-cols {\n display: grid;\n grid-template-columns: 64px 96px 1fr 200px;\n gap: 32px;\n flex: 1;\n max-width: 70%;\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-8-home-14__roster-cols {\n max-width: 66%;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-8-home-14__roster-cols {\n max-width: 60%;\n grid-template-columns: 56px 80px 1fr 160px;\n gap: 24px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-14__roster-cols {\n display: none;\n }\n}\n.sec-8-home-14__roster-col {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 11px;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n color: var(--at-neutral-500);\n}\n.sec-8-home-14__roster-col:last-child {\n text-align: right;\n}\n.sec-8-home-14 {\n /* Award rows */\n}\n.sec-8-home-14__awards {\n display: flex;\n flex-direction: column;\n}\n.sec-8-home-14__award {\n position: relative;\n display: grid;\n grid-template-columns: 64px 96px 1fr 200px;\n align-items: center;\n gap: 32px;\n padding: 28px 0;\n border-bottom: 1px solid var(--at-neutral-200);\n transition: padding-left 0.35s ease, background-color 0.35s ease;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-8-home-14__award {\n grid-template-columns: 56px 80px 1fr 160px;\n gap: 24px;\n padding: 24px 0;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-8-home-14__award {\n grid-template-columns: 48px 72px 1fr 140px;\n gap: 20px;\n padding: 22px 0;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-home-14__award {\n grid-template-columns: 44px 64px 1fr 120px;\n gap: 18px;\n padding: 20px 0;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-8-home-14__award {\n grid-template-columns: 40px 1fr auto;\n grid-template-areas: \"idx body result\" \"yr body result\";\n row-gap: 4px;\n column-gap: 16px;\n padding: 20px 0;\n }\n}\n@media (max-width: 574.98px) {\n .sec-8-home-14__award {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"idx yr\" \"body body\" \"result result\";\n row-gap: 12px;\n column-gap: 12px;\n padding: 20px 0;\n }\n}\n.sec-8-home-14__award:hover {\n padding-left: 16px;\n background-color: var(--at-neutral-0);\n}\n.sec-8-home-14__award:hover .sec-8-home-14__award-result {\n color: var(--at-theme-primary);\n}\n.sec-8-home-14__award:hover .sec-8-home-14__award-index {\n color: var(--at-neutral-950);\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-14__award:hover {\n padding-left: 0;\n background-color: transparent;\n }\n}\n.sec-8-home-14__award-badge {\n position: absolute;\n top: 12px;\n right: 0;\n display: inline-flex;\n align-items: center;\n height: 22px;\n padding: 0 10px;\n background-color: var(--at-theme-primary);\n color: var(--at-neutral-0);\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 10px;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n line-height: 1;\n border-radius: 999px;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-14__award-badge {\n position: static;\n order: -1;\n grid-column: 1/-1;\n align-self: flex-start;\n margin-bottom: 4px;\n }\n}\n.sec-8-home-14__award-index {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 18px;\n line-height: 1;\n letter-spacing: 0;\n color: var(--at-neutral-300);\n font-feature-settings: \"tnum\" 1;\n transition: color 0.35s ease;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-8-home-14__award-index {\n grid-area: idx;\n font-size: 16px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-8-home-14__award-index {\n grid-area: idx;\n font-size: 14px;\n color: var(--at-neutral-500);\n }\n}\n.sec-8-home-14__award-year {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(28px, 2.6vw, 40px);\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n font-feature-settings: \"tnum\" 1;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-8-home-14__award-year {\n grid-area: yr;\n font-size: 22px;\n color: var(--at-neutral-700);\n }\n}\n@media (max-width: 574.98px) {\n .sec-8-home-14__award-year {\n grid-area: yr;\n font-size: 18px;\n color: var(--at-neutral-700);\n text-align: right;\n align-self: center;\n }\n}\n.sec-8-home-14__award-body {\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-width: 0;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-8-home-14__award-body {\n grid-area: body;\n }\n}\n@media (max-width: 574.98px) {\n .sec-8-home-14__award-body {\n grid-area: body;\n }\n}\n.sec-8-home-14__award-name {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(20px, 1.8vw, 26px);\n line-height: 1.2;\n letter-spacing: -0.015em;\n color: var(--at-neutral-950);\n}\n.sec-8-home-14__award-cat {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 13px;\n line-height: 1.4;\n letter-spacing: 0.2px;\n color: var(--at-neutral-500);\n}\n.sec-8-home-14__award-result {\n justify-self: end;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n color: var(--at-neutral-700);\n line-height: 1;\n transition: color 0.35s ease;\n text-align: right;\n}\n.sec-8-home-14__award-result--finalist {\n color: var(--at-neutral-950);\n}\n.sec-8-home-14__award-result--gold {\n color: var(--at-theme-primary);\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-8-home-14__award-result {\n grid-area: result;\n justify-self: end;\n align-self: center;\n font-size: 11px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-8-home-14__award-result {\n grid-area: result;\n justify-self: start;\n font-size: 12px;\n }\n}\n.sec-8-home-14 {\n /* Latest row — subtle emphasis (without breaking grid) */\n}\n.sec-8-home-14__award--latest {\n background-color: var(--at-neutral-0);\n padding-left: 16px;\n padding-right: 16px;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-14__award--latest {\n padding-left: 12px;\n padding-right: 12px;\n }\n}\n.sec-8-home-14 {\n /* Roster footer */\n}\n.sec-8-home-14__roster-foot {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n margin-top: 32px;\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 13px;\n letter-spacing: 0.4px;\n color: var(--at-neutral-500);\n}\n@media (max-width: 574.98px) {\n .sec-8-home-14__roster-foot {\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 24px;\n }\n}\n.sec-8-home-14__roster-foot-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--at-neutral-300);\n flex-shrink: 0;\n}\n.sec-8-home-14__roster-foot-link {\n color: var(--at-neutral-950);\n text-decoration: none;\n font-weight: 500;\n border-bottom: 1px solid var(--at-neutral-300);\n padding-bottom: 1px;\n transition: color 0.25s ease, border-color 0.25s ease;\n}\n.sec-8-home-14__roster-foot-link:hover {\n color: var(--at-theme-primary);\n border-bottom-color: var(--at-theme-primary);\n}\n\n/* ===========================================================\n Section 9 — Home 14 (From the Feed)\n =========================================================== */\n.sec-9-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-0);\n border-top: 1px solid var(--at-neutral-200);\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-9-home-14 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-9-home-14 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-14 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n}\n.sec-9-home-14__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-9-home-14__inner {\n padding-left: 60px;\n padding-right: 60px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-9-home-14__inner {\n padding-left: 40px;\n padding-right: 40px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-9-home-14__inner {\n padding-left: 30px;\n padding-right: 30px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-14__inner {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n.sec-9-home-14 {\n /* Header */\n}\n.sec-9-home-14__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 40px;\n margin-bottom: 64px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-14__head {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n}\n.sec-9-home-14__head-left {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n.sec-9-home-14__head-right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n max-width: 380px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-14__head-right {\n align-items: flex-start;\n max-width: none;\n }\n}\n.sec-9-home-14__head-copy {\n font-family: var(--at-ff-body);\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n text-align: right;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-14__head-copy {\n text-align: left;\n }\n .sec-9-home-14__head-copy br {\n display: none;\n }\n}\n.sec-9-home-14__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n}\n.sec-9-home-14__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n}\n.sec-9-home-14__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n}\n.sec-9-home-14__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n}\n.sec-9-home-14__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(40px, 5vw, 84px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n}\n@media (max-width: 574.98px) {\n .sec-9-home-14__title br {\n display: none;\n }\n}\n.sec-9-home-14__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n}\n.sec-9-home-14__btn-primary .sec-9-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n}\n.sec-9-home-14__btn-primary .sec-9-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n}\n.sec-9-home-14__btn-primary:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n}\n.sec-9-home-14 {\n /* Gallery */\n}\n.sec-9-home-14__gallery {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 24px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-9-home-14__gallery {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-14__gallery {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n}\n.sec-9-home-14__col {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n.sec-9-home-14__col--offset-80 {\n padding-top: 80px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-14__col--offset-80 {\n padding-top: 0;\n }\n}\n.sec-9-home-14__col--offset-40 {\n padding-top: 40px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-14__col--offset-40 {\n padding-top: 0;\n }\n}\n.sec-9-home-14__tile {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 20px;\n border-radius: 4px;\n overflow: hidden;\n text-decoration: none;\n color: var(--at-common-white);\n background-color: var(--at-neutral-900);\n}\n.sec-9-home-14__tile--h380 {\n aspect-ratio: 557/380;\n}\n.sec-9-home-14__tile--h420 {\n aspect-ratio: 557/420;\n}\n.sec-9-home-14__tile--h480 {\n aspect-ratio: 557/480;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-14__tile {\n aspect-ratio: 4/5 !important;\n }\n}\n.sec-9-home-14__tile:hover {\n color: var(--at-common-white);\n}\n.sec-9-home-14__tile-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n border-radius: 4px;\n}\n.sec-9-home-14__tile-top {\n position: relative;\n z-index: 2;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n font-family: var(--at-ff-body);\n font-size: 10px;\n letter-spacing: 0.4px;\n color: var(--at-common-white);\n}\n.sec-9-home-14__tile-handle {\n font-weight: 500;\n opacity: 0.6;\n}\n.sec-9-home-14__tile-tag {\n font-weight: 400;\n opacity: 0.4;\n}\n.sec-9-home-14__tile-meta {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-family: var(--at-ff-body);\n color: var(--at-common-white);\n}\n.sec-9-home-14__tile-title {\n font-weight: 500;\n font-size: 18px;\n letter-spacing: -0.3px;\n line-height: 1.1;\n}\n.sec-9-home-14__tile-sub {\n font-weight: 400;\n font-size: 11px;\n letter-spacing: 0.4px;\n opacity: 0.7;\n}\n\n/* ===========================================================\n Section 1 — Home 15 (Agency Hero)\n =========================================================== */\n.sec-1-home-15 {\n padding-top: 66px;\n padding-bottom: 80px;\n background-color: var(--at-neutral-0);\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-home-15 {\n padding-top: 60px;\n padding-bottom: 56px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15 {\n padding-top: 60px;\n padding-bottom: 40px;\n }\n}\n.sec-1-home-15 {\n /* ---- Hero card ---- */\n}\n.sec-1-home-15__card {\n position: relative;\n width: 100%;\n height: 637px;\n max-height: calc(100vh - 160px);\n overflow: hidden;\n border-radius: 16px;\n background-color: var(--at-neutral-900);\n isolation: isolate;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-1-home-15__card {\n height: 560px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-1-home-15__card {\n height: 520px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-home-15__card {\n height: 480px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-1-home-15__card {\n height: 560px;\n max-height: none;\n }\n}\n@media (max-width: 574.98px) {\n .sec-1-home-15__card {\n height: 520px;\n max-height: none;\n border-radius: 12px;\n }\n}\n.sec-1-home-15__bg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: 1;\n pointer-events: none;\n}\n.sec-1-home-15__grid {\n position: absolute;\n inset: 0;\n z-index: 2;\n pointer-events: none;\n background-repeat: no-repeat;\n background-position: center center;\n background-size: 80% auto;\n opacity: 0.5;\n mix-blend-mode: screen;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15__grid {\n opacity: 0.35;\n background-size: 130% auto;\n }\n}\n.sec-1-home-15 {\n /* ---- Top row (coordinates + email) ---- */\n}\n.sec-1-home-15__top {\n position: absolute;\n top: 30px;\n left: 35px;\n right: 35px;\n z-index: 4;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n color: var(--at-common-white);\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15__top {\n top: 20px;\n left: 20px;\n right: 20px;\n }\n}\n.sec-1-home-15__coord {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-common-white);\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15__coord {\n font-size: 12px;\n gap: 6px;\n }\n}\n.sec-1-home-15__coord-icon {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15__coord-icon {\n width: 16px;\n height: 16px;\n }\n}\n.sec-1-home-15__email {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-common-white);\n text-decoration: none;\n transition: opacity 0.3s ease;\n}\n.sec-1-home-15__email:hover, .sec-1-home-15__email:focus-visible {\n color: var(--at-common-white);\n opacity: 0.7;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15__email {\n font-size: 12px;\n }\n}\n.sec-1-home-15 {\n /* ---- Scroll indicator (right side, mid-height) ---- */\n}\n.sec-1-home-15__scroll {\n position: absolute;\n right: 40px;\n top: 50%;\n z-index: 4;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 18px;\n transform: translateY(-50%);\n color: var(--at-neutral-100);\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15__scroll {\n display: none;\n }\n}\n.sec-1-home-15__scroll-line {\n display: block;\n width: 1px;\n height: 70px;\n background-color: #fff;\n opacity: 0.7;\n animation: secOneHome15ScrollLine 2.4s ease-in-out infinite;\n}\n.sec-1-home-15__scroll-label {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n writing-mode: vertical-rl;\n transform: rotate(180deg);\n}\n@keyframes secOneHome15ScrollLine {\n 0%, 100% {\n transform: scaleY(0.4);\n transform-origin: top;\n opacity: 0.4;\n }\n 50% {\n transform: scaleY(1);\n transform-origin: top;\n opacity: 0.9;\n }\n}\n.sec-1-home-15 {\n /* ---- Bottom row (tags + clients) ---- */\n}\n.sec-1-home-15__bottom {\n position: absolute;\n left: 35px;\n right: 35px;\n bottom: 40px;\n z-index: 4;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 32px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-home-15__bottom {\n flex-direction: column;\n align-items: flex-start;\n gap: 20px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15__bottom {\n left: 20px;\n right: 20px;\n bottom: 24px;\n flex-direction: column;\n align-items: flex-start;\n gap: 18px;\n }\n}\n.sec-1-home-15__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n max-width: 540px;\n padding: 0;\n margin: 0;\n list-style: none;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15__tags {\n max-width: none;\n }\n}\n.sec-1-home-15__tag {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 15px 19px;\n background-color: rgba(70, 70, 70, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.3);\n border-radius: 32px;\n backdrop-filter: blur(24px);\n -webkit-backdrop-filter: blur(24px);\n color: #fff;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n white-space: nowrap;\n}\n.sec-1-home-15__tag svg {\n flex-shrink: 0;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15__tag {\n padding: 11px 14px;\n font-size: 13px;\n gap: 8px;\n }\n}\n.sec-1-home-15__clients {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 15px;\n color: var(--at-common-white);\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15__clients {\n align-items: flex-start;\n }\n}\n.sec-1-home-15__avatars {\n display: inline-flex;\n align-items: center;\n}\n.sec-1-home-15__avatar {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n border: 2px solid var(--at-common-white);\n object-fit: cover;\n background-color: var(--at-neutral-700);\n}\n.sec-1-home-15__avatar + .sec-1-home-15__avatar {\n margin-left: -12px;\n}\n.sec-1-home-15__clients-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.25;\n letter-spacing: -0.02em;\n text-align: right;\n color: var(--at-common-white);\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15__clients-text {\n text-align: left;\n }\n .sec-1-home-15__clients-text br {\n display: none;\n }\n}\n@media (max-width: 574.98px) {\n .sec-1-home-15__clients-text {\n font-size: 14px;\n }\n}\n.sec-1-home-15 {\n /* ---- Title block under the hero card ---- */\n}\n.sec-1-home-15__title-block {\n position: relative;\n padding-top: 44px;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-1-home-15__title-block {\n padding-top: 36px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-home-15__title-block {\n padding-top: 28px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-home-15__title-block {\n padding-top: 22px;\n }\n}\n.sec-1-home-15__title {\n font-family: var(--at-ff-heading);\n font-weight: 700;\n font-size: 173px;\n line-height: 1;\n letter-spacing: -0.05em;\n text-align: center;\n color: var(--at-neutral-900);\n margin: 0;\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px) {\n .sec-1-home-15__title {\n font-size: 150px;\n }\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-1-home-15__title {\n font-size: 128px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-1-home-15__title {\n font-size: 110px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-1-home-15__title {\n font-size: 92px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-home-15__title {\n font-size: 72px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-1-home-15__title {\n font-size: 56px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-1-home-15__title {\n font-size: 40px;\n }\n}\n.sec-1-home-15__title-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n margin-top: -22px;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-1-home-15__title-meta {\n margin-top: -16px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-home-15__title-meta {\n margin-top: -10px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-1-home-15__title-meta {\n margin-top: 8px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-1-home-15__title-meta {\n margin-top: 10px;\n flex-wrap: wrap;\n gap: 8px;\n }\n}\n.sec-1-home-15__title-side {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n text-decoration: underline;\n text-underline-offset: 3px;\n color: var(--at-neutral-900);\n}\n@media (max-width: 574.98px) {\n .sec-1-home-15__title-side {\n font-size: 13px;\n }\n}\n\n/* ===========================================================\n Section 2 — Home 15 (About Us)\n =========================================================== */\n.sec-2-home-15 {\n background-color: var(--at-neutral-0);\n border-top: 1px solid var(--at-neutral-200);\n /* ---- Top heading ---- */\n}\n.sec-2-home-15__heading {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 48px;\n line-height: 1.08;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-2-home-15__heading {\n font-size: 42px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-2-home-15__heading {\n font-size: 38px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-2-home-15__heading {\n font-size: 34px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-2-home-15__heading {\n font-size: 30px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-2-home-15__heading {\n font-size: 26px;\n }\n}\n.sec-2-home-15 {\n /* ---- Media (big image) ---- */\n}\n.sec-2-home-15__media-1 {\n position: relative;\n width: 100%;\n aspect-ratio: 553/533;\n overflow: hidden;\n border-radius: 16px;\n background-color: var(--at-neutral-200);\n}\n.sec-2-home-15__media-1-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.sec-2-home-15 {\n /* ---- Floating glass badge on media-1 ---- */\n}\n.sec-2-home-15__media-1-badge {\n position: absolute;\n right: 20px;\n bottom: 20px;\n z-index: 2;\n display: inline-flex;\n align-items: center;\n gap: 14px;\n padding: 12px 18px;\n border-radius: 14px;\n background-color: rgba(37, 99, 235, 0.32);\n border: 1px solid rgba(255, 255, 255, 0.28);\n backdrop-filter: blur(16px) saturate(1.2);\n -webkit-backdrop-filter: blur(16px) saturate(1.2);\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n color: #fff;\n max-width: calc(100% - 32px);\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-2-home-15__media-1-badge {\n right: 16px;\n bottom: 16px;\n padding: 10px 14px;\n gap: 12px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-15__media-1-badge {\n right: 12px;\n bottom: 12px;\n padding: 10px 12px;\n gap: 10px;\n border-radius: 12px;\n }\n}\n.sec-2-home-15__media-1-badge-dot {\n position: relative;\n flex-shrink: 0;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #4ade80;\n box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);\n animation: sec-2-home-15-pulse 1.8s ease-out infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n .sec-2-home-15__media-1-badge-dot {\n animation: none;\n }\n}\n.sec-2-home-15__media-1-badge-text {\n display: inline-flex;\n flex-direction: column;\n line-height: 1.2;\n min-width: 0;\n}\n.sec-2-home-15__media-1-badge-title {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 14px;\n letter-spacing: -0.01em;\n color: #fff;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-15__media-1-badge-title {\n font-size: 13px;\n }\n}\n.sec-2-home-15__media-1-badge-meta {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n letter-spacing: 0;\n color: rgba(255, 255, 255, 0.82);\n}\n@media (max-width: 574.98px) {\n .sec-2-home-15__media-1-badge-meta {\n font-size: 11px;\n }\n}\n.sec-2-home-15 {\n /* ---- Right column content ---- */\n}\n.sec-2-home-15__content {\n display: flex;\n flex-direction: column;\n gap: 40px;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-2-home-15__content {\n gap: 32px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-15__content {\n gap: 24px;\n }\n}\n.sec-2-home-15__body {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 24px;\n line-height: 1.3;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n max-width: 620px;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-2-home-15__body {\n font-size: 22px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-2-home-15__body {\n font-size: 20px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-15__body {\n font-size: 18px;\n }\n}\n.sec-2-home-15 {\n /* ---- Features 2x2 ---- */\n}\n.sec-2-home-15__features {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 20px 39px;\n max-width: 620px;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-15__features {\n grid-template-columns: 1fr;\n gap: 14px;\n }\n}\n.sec-2-home-15__feature {\n display: flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n}\n@media (max-width: 574.98px) {\n .sec-2-home-15__feature {\n font-size: 15px;\n }\n}\n.sec-2-home-15__feature-icon {\n flex-shrink: 0;\n color: var(--at-neutral-900);\n}\n.sec-2-home-15 {\n /* ---- Compact contact form ---- */\n}\n.sec-2-home-15__form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n max-width: 620px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-15__form {\n gap: 16px;\n }\n}\n.sec-2-home-15__form-label {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 18px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-15__form-label {\n font-size: 16px;\n }\n}\n.sec-2-home-15__form-row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0 32px;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-15__form-row {\n grid-template-columns: 1fr;\n gap: 0;\n }\n}\n.sec-2-home-15__form-textarea {\n min-height: 96px;\n}\n.sec-2-home-15__form-actions {\n margin-top: 12px;\n margin-bottom: 0;\n}\n.sec-2-home-15 {\n /* ---- Floating 3D cube object ---- */\n}\n.sec-2-home-15__object {\n position: absolute;\n right: 24px;\n bottom: -40px;\n z-index: 1;\n pointer-events: none;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-2-home-15__object {\n right: 16px;\n transform: scale(0.85);\n transform-origin: right bottom;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-15__object {\n display: none;\n }\n}\n.sec-2-home-15 {\n /* ---- Stats with odometer ---- */\n}\n.sec-2-home-15__stats {\n margin-left: 0;\n margin-right: 0;\n}\n.sec-2-home-15__stat {\n display: flex;\n flex-direction: column;\n}\n.sec-2-home-15__stat-num {\n display: inline-flex;\n align-items: baseline;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 84px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-2-home-15__stat-num {\n font-size: 72px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-2-home-15__stat-num {\n font-size: 64px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-2-home-15__stat-num {\n font-size: 56px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-2-home-15__stat-num {\n font-size: 56px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-2-home-15__stat-num {\n font-size: 48px;\n }\n}\n.sec-2-home-15__stat-num .odometer {\n font: inherit;\n color: inherit;\n}\n.sec-2-home-15__stat-num .odometer-inside,\n.sec-2-home-15__stat-num .odometer-digit,\n.sec-2-home-15__stat-num .odometer-formatting-mark {\n font: inherit !important;\n color: inherit !important;\n}\n.sec-2-home-15__stat-suffix {\n display: inline-block;\n font: inherit;\n color: inherit;\n}\n.sec-2-home-15__stat-label {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n max-width: 200px;\n}\n@media (max-width: 574.98px) {\n .sec-2-home-15__stat-label {\n font-size: 14px;\n }\n}\n.sec-2-home-15 {\n /* ---- Secondary image ---- */\n}\n.sec-2-home-15__media-2 {\n position: relative;\n width: 100%;\n aspect-ratio: 322/401;\n overflow: hidden;\n border-radius: 16px;\n background-color: var(--at-neutral-200);\n}\n.sec-2-home-15__media-2-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.sec-2-home-15 {\n /* ---- Floating glass badge on media-2 (compact) ---- */\n}\n.sec-2-home-15__media-2-badge {\n position: absolute;\n right: 14px;\n bottom: 14px;\n z-index: 2;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n border-radius: 12px;\n background-color: rgba(37, 99, 235, 0.32);\n border: 1px solid rgba(255, 255, 255, 0.28);\n backdrop-filter: blur(16px) saturate(1.2);\n -webkit-backdrop-filter: blur(16px) saturate(1.2);\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n color: #fff;\n max-width: calc(100% - 28px);\n}\n@media (max-width: 574.98px) {\n .sec-2-home-15__media-2-badge {\n right: 10px;\n bottom: 10px;\n padding: 8px 11px;\n gap: 8px;\n border-radius: 10px;\n }\n}\n.sec-2-home-15__media-2-badge-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.18);\n color: #ffd166;\n}\n@media (max-width: 574.98px) {\n .sec-2-home-15__media-2-badge-icon {\n width: 24px;\n height: 24px;\n }\n .sec-2-home-15__media-2-badge-icon svg {\n width: 14px;\n height: 14px;\n }\n}\n.sec-2-home-15__media-2-badge-text {\n display: inline-flex;\n flex-direction: column;\n line-height: 1.2;\n min-width: 0;\n}\n.sec-2-home-15__media-2-badge-title {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 13px;\n letter-spacing: -0.01em;\n color: #fff;\n}\n@media (max-width: 574.98px) {\n .sec-2-home-15__media-2-badge-title {\n font-size: 12px;\n }\n}\n.sec-2-home-15__media-2-badge-meta {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 11px;\n color: rgba(255, 255, 255, 0.82);\n}\n.sec-2-home-15 {\n /* ---- Statement (shape icon + text) ---- */\n}\n.sec-2-home-15__statement {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 32px;\n max-width: 323px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-home-15__statement {\n gap: 20px;\n }\n}\n.sec-2-home-15__statement-icon {\n width: 40px;\n height: 40px;\n object-fit: contain;\n flex-shrink: 0;\n}\n.sec-2-home-15__statement-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 20px;\n line-height: 1.3;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-2-home-15__statement-text {\n font-size: 18px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-2-home-15__statement-text {\n font-size: 16px;\n }\n}\n\n@keyframes sec-2-home-15-pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);\n }\n 70% {\n box-shadow: 0 0 0 12px rgba(74, 222, 128, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);\n }\n}\n/* ===========================================================\n Section 3 — Home 15 (Brand strip with auto-marquee)\n =========================================================== */\n.sec-3-home-15 {\n overflow-x: hidden;\n background-color: var(--at-neutral-0);\n padding-top: 24px;\n padding-bottom: 24px;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-3-home-15 {\n padding-top: 16px;\n padding-bottom: 16px;\n }\n}\n.sec-3-home-15 {\n /* carouselTicker plugin handles infinite horizontal scroll on the ul. */\n}\n.sec-3-home-15__strip {\n width: 100%;\n}\n.sec-3-home-15 {\n /* Match Figma fill + responsive card sizes. */\n}\n.sec-3-home-15 .at-brand-item {\n background-color: var(--at-neutral-50);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-3-home-15 .at-brand-item {\n width: 170px;\n height: 170px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-3-home-15 .at-brand-item {\n width: 150px;\n height: 150px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-3-home-15 .at-brand-item {\n width: 140px;\n height: 140px;\n }\n}\n\n/* ===========================================================\n Section 4 — Home 15 (Selected work)\n =========================================================== */\n.sec-4-home-15 {\n background-color: var(--at-neutral-0);\n /* ---- Title bar ---- */\n}\n.sec-4-home-15__title-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 32px;\n padding: 30px;\n border: 1px solid var(--at-neutral-200);\n border-radius: 16px;\n background-color: var(--at-neutral-0);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-4-home-15__title-bar {\n padding: 26px;\n margin-bottom: 72px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-home-15__title-bar {\n padding: 24px;\n margin-bottom: 56px;\n flex-direction: column;\n align-items: flex-start;\n gap: 20px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-15__title-bar {\n padding: 20px;\n margin-bottom: 40px;\n flex-direction: column;\n align-items: flex-start;\n gap: 18px;\n }\n}\n.sec-4-home-15__heading {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 72px;\n line-height: 1.05;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n margin: 0;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-4-home-15__heading {\n font-size: 60px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-4-home-15__heading {\n font-size: 52px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-home-15__heading {\n font-size: 44px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-4-home-15__heading {\n font-size: 38px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-4-home-15__heading {\n font-size: 32px;\n }\n}\n.sec-4-home-15 {\n /* ---- Project cards stack ---- */\n}\n.sec-4-home-15__cards {\n display: flex;\n flex-direction: column;\n gap: 92px;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-4-home-15__cards {\n gap: 72px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-home-15__cards {\n gap: 56px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-15__cards {\n gap: 40px;\n }\n}\n.sec-4-home-15__card {\n position: relative;\n display: block;\n width: 100%;\n aspect-ratio: 1428/1011;\n overflow: hidden;\n border-radius: 16px;\n background-color: var(--at-neutral-200);\n text-decoration: none;\n}\n@media (max-width: 574.98px) {\n .sec-4-home-15__card {\n border-radius: 12px;\n aspect-ratio: 4/5;\n }\n}\n.sec-4-home-15__card:hover, .sec-4-home-15__card:focus-visible {\n color: inherit;\n}\n.sec-4-home-15__card-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n}\n.sec-4-home-15__card-badge {\n position: absolute;\n top: 23px;\n right: 23px;\n z-index: 3;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 8px 10px;\n border-radius: 20px;\n background-color: var(--at-common-white);\n color: var(--at-neutral-950);\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 10px;\n line-height: 1;\n letter-spacing: -0.02em;\n text-transform: uppercase;\n white-space: nowrap;\n}\n.sec-4-home-15__card-bar {\n position: absolute;\n left: 20px;\n right: 20px;\n bottom: 21px;\n z-index: 3;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding: 0 45px;\n height: 100px;\n background-color: var(--at-neutral-0);\n border-radius: 16px;\n overflow: hidden;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-home-15__card-bar {\n padding: 0 32px;\n height: 84px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-4-home-15__card-bar {\n padding: 0 22px;\n height: 72px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-4-home-15__card-bar {\n left: 12px;\n right: 12px;\n bottom: 12px;\n padding: 0 16px;\n height: 64px;\n gap: 12px;\n }\n}\n.sec-4-home-15__card-name {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 64px;\n line-height: 1.1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n white-space: nowrap;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-4-home-15__card-name {\n font-size: 56px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-4-home-15__card-name {\n font-size: 44px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-home-15__card-name {\n font-size: 38px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-4-home-15__card-name {\n font-size: 30px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-4-home-15__card-name {\n font-size: 22px;\n }\n}\n.sec-4-home-15__card-cta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: -0.02em;\n text-transform: uppercase;\n color: var(--at-neutral-900);\n white-space: nowrap;\n transition: opacity 0.3s ease;\n}\n.sec-4-home-15__card-cta svg {\n flex-shrink: 0;\n transition: transform 0.3s ease;\n}\n.sec-4-home-15__card:hover .sec-4-home-15__card-cta, .sec-4-home-15__card:focus-visible .sec-4-home-15__card-cta {\n opacity: 0.85;\n}\n.sec-4-home-15__card:hover .sec-4-home-15__card-cta svg, .sec-4-home-15__card:focus-visible .sec-4-home-15__card-cta svg {\n transform: rotate(45deg);\n}\n.sec-4-home-15 {\n /* ---- Repo strip ---- */\n}\n.sec-4-home-15__repos {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n margin-top: 32px;\n padding: 0;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-4-home-15__repos {\n margin-top: 72px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-home-15__repos {\n margin-top: 56px;\n justify-content: center;\n gap: 24px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-home-15__repos {\n margin-top: 40px;\n justify-content: center;\n gap: 14px 20px;\n }\n}\n.sec-4-home-15__repos a {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n text-decoration: none;\n transition: opacity 0.3s ease;\n}\n.sec-4-home-15__repos a:hover, .sec-4-home-15__repos a:focus-visible {\n color: var(--at-neutral-900);\n opacity: 0.7;\n}\n@media (max-width: 574.98px) {\n .sec-4-home-15__repos a {\n font-size: 14px;\n }\n}\n\n/* ===========================================================\n Section 5 — Home 15 (From idea to final project)\n =========================================================== */\n.sec-5-home-15 {\n background-color: var(--at-neutral-950);\n color: var(--at-common-white);\n padding-top: 140px;\n padding-bottom: 140px;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-5-home-15 {\n padding-top: 110px;\n padding-bottom: 110px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-5-home-15 {\n padding-top: 90px;\n padding-bottom: 90px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-home-15 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n}\n.sec-5-home-15 {\n /* ---- Eyebrow ---- */\n}\n.sec-5-home-15__eyebrow {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n margin-bottom: 28px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n}\n.sec-5-home-15__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 4px;\n background-color: var(--at-common-white);\n flex-shrink: 0;\n}\n.sec-5-home-15__eyebrow-key {\n font-weight: 600;\n color: var(--at-common-white);\n letter-spacing: 2px;\n}\n.sec-5-home-15__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n}\n.sec-5-home-15 {\n /* ---- Heading ---- */\n}\n.sec-5-home-15__heading {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 84px;\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-common-white);\n margin: 0;\n max-width: 1100px;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-5-home-15__heading {\n font-size: 72px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-5-home-15__heading {\n font-size: 60px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-5-home-15__heading {\n font-size: 52px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-5-home-15__heading {\n font-size: 42px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-5-home-15__heading {\n font-size: 34px;\n }\n .sec-5-home-15__heading br {\n display: none;\n }\n}\n.sec-5-home-15 {\n /* ---- Right column: copy + CTA ---- */\n}\n.sec-5-home-15__intro {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-home-15__intro {\n align-items: flex-start;\n }\n}\n.sec-5-home-15__copy {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-50);\n text-align: right;\n max-width: 446px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-home-15__copy {\n text-align: left;\n max-width: none;\n }\n}\n.sec-5-home-15 {\n /* Orange-themed CTA group — uses theme primary instead of neutral-900 */\n}\n.sec-5-home-15__cta.at-btn-group .at-btn-circle,\n.sec-5-home-15__cta.at-btn-group .at-btn {\n background-color: var(--at-theme-primary);\n color: var(--at-common-white);\n border-color: var(--at-theme-primary);\n}\n.sec-5-home-15__cta.at-btn-group .at-btn:hover,\n.sec-5-home-15__cta.at-btn-group .at-btn:focus-visible,\n.sec-5-home-15__cta.at-btn-group .at-btn-circle:hover,\n.sec-5-home-15__cta.at-btn-group .at-btn-circle:focus-visible {\n background-color: var(--at-theme-primary);\n color: var(--at-common-white);\n opacity: 0.92;\n}\n.sec-5-home-15 {\n /* ---- Phases row ---- */\n}\n.sec-5-home-15__phases {\n --bs-gutter-x: 0;\n}\n.sec-5-home-15 {\n /* Vertical separators between phases (skip first column at the active breakpoint). */\n}\n.sec-5-home-15__phase {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0;\n height: 100%;\n padding: 40px 32px;\n color: var(--at-common-white);\n border-left: 1px solid var(--at-neutral-800);\n transition: background-color 0.4s ease, transform 0.4s ease;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-home-15__phase {\n padding: 32px 24px;\n }\n}\n.sec-5-home-15__phase:hover {\n background-color: rgba(255, 255, 255, 0.025);\n transform: translateY(-5px);\n}\n.sec-5-home-15 {\n /* Drop the left border on the first phase per row at each breakpoint */\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-5-home-15 .row-cols-xxl-5 > .col:nth-child(5n+1) .sec-5-home-15__phase {\n border-left: 0;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-5-home-15 .row-cols-xl-5 > .col:nth-child(5n+1) .sec-5-home-15__phase {\n border-left: 0;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-5-home-15 .row-cols-lg-3 > .col:nth-child(3n+1) .sec-5-home-15__phase {\n border-left: 0;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-5-home-15 .row-cols-md-2 > .col:nth-child(2n+1) .sec-5-home-15__phase {\n border-left: 0;\n }\n}\n@media (max-width: 574.98px) {\n .sec-5-home-15 .row-cols-1 > .col .sec-5-home-15__phase {\n border-left: 0;\n border-top: 1px solid var(--at-neutral-800);\n }\n}\n@media (max-width: 574.98px) {\n .sec-5-home-15 .row-cols-1 > .col:first-child .sec-5-home-15__phase {\n border-top: 0;\n }\n}\n.sec-5-home-15 {\n /* Phase dot — default = white circle; on phase hover or via --active modifier\n it morphs into an orange square (process \"active\" indicator). */\n}\n.sec-5-home-15__phase-dot {\n width: 12px;\n height: 12px;\n background-color: var(--at-common-white);\n border-radius: 50%;\n margin-bottom: 32px;\n flex-shrink: 0;\n transition: background-color 0.4s ease, border-radius 0.4s ease, transform 0.4s ease;\n}\n.sec-5-home-15__phase-dot--active {\n border-radius: 0;\n background-color: var(--at-theme-primary);\n}\n.sec-5-home-15__phase:hover .sec-5-home-15__phase-dot {\n background-color: var(--at-theme-primary);\n border-radius: 0;\n transform: scale(1.1);\n}\n.sec-5-home-15__phase-num {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 64px;\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-common-white);\n margin-bottom: 20px;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-5-home-15__phase-num {\n font-size: 56px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-5-home-15__phase-num {\n font-size: 52px;\n }\n}\n.sec-5-home-15__phase-title {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.2;\n letter-spacing: -0.013em;\n color: var(--at-common-white);\n margin-bottom: 12px;\n}\n@media (max-width: 574.98px) {\n .sec-5-home-15__phase-title {\n font-size: 20px;\n }\n}\n.sec-5-home-15__phase-desc {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 13px;\n line-height: 1.6;\n color: var(--at-common-white);\n margin-bottom: 24px;\n max-width: 280px;\n}\n.sec-5-home-15__phase-duration {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 11px;\n line-height: 1;\n letter-spacing: 1.6px;\n text-transform: uppercase;\n color: var(--at-theme-primary);\n margin-bottom: 20px;\n}\n.sec-5-home-15 {\n /* Hidden by default; revealed on phase card hover with a soft slide-up + fade. */\n}\n.sec-5-home-15__phase-thumb {\n position: relative;\n width: 100%;\n max-width: 280px;\n aspect-ratio: 280/84;\n overflow: hidden;\n border-radius: 8px;\n background-color: var(--at-neutral-100);\n margin-top: auto;\n opacity: 0;\n transform: translateY(10px);\n transition: opacity 0.45s ease, transform 0.45s ease;\n}\n.sec-5-home-15__phase:hover .sec-5-home-15__phase-thumb {\n opacity: 1;\n transform: translateY(0);\n}\n.sec-5-home-15__phase-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.05);\n transition: transform 0.6s ease;\n}\n.sec-5-home-15__phase:hover .sec-5-home-15__phase-img {\n transform: scale(1);\n}\n\n/*----------------------------------------*/\n/* sec-6-home-15 (Home 15 — Meet our team + throwable logos)\n/*----------------------------------------*/\n.sec-6-home-15 {\n position: relative;\n padding-top: clamp(48px, 6vw, 100px);\n padding-bottom: clamp(56px, 8vw, 140px);\n background: var(--at-neutral-0, #fefefe);\n overflow: hidden;\n}\n.sec-6-home-15__container {\n max-width: 2200px;\n margin: 0 auto;\n padding-left: clamp(20px, 5.2vw, 100px);\n padding-right: clamp(20px, 5.2vw, 100px);\n}\n.sec-6-home-15__layout {\n display: flex;\n flex-direction: column;\n gap: clamp(28px, 4vw, 40px);\n}\n@media (min-width: 1200px) {\n .sec-6-home-15__layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(220px, min(28vw, 407px)) minmax(0, 1fr);\n grid-template-rows: auto auto auto;\n gap: clamp(6px, 0.8vw, 10px);\n align-items: start;\n }\n}\n.sec-6-home-15__title-block {\n text-align: center;\n}\n@media (min-width: 1200px) {\n .sec-6-home-15__title-block {\n grid-column: 2;\n grid-row: 1/span 2;\n align-self: center;\n justify-self: center;\n z-index: 2;\n max-width: min(765px, 100%);\n padding: clamp(16px, 3vw, 48px) 0;\n pointer-events: none;\n }\n .sec-6-home-15__title-block .sec-6-home-15__eyebrow,\n .sec-6-home-15__title-block .sec-6-home-15__title {\n pointer-events: auto;\n }\n}\n.sec-6-home-15__eyebrow img {\n width: 14px;\n height: 13px;\n}\n.sec-6-home-15__eyebrow-text {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900, #1d1d1d);\n}\n.sec-6-home-15__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(40px, 6vw, 84px);\n line-height: 0.95;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950, #0f0f0f);\n text-wrap: balance;\n}\n.sec-6-home-15__member {\n min-width: 0;\n backface-visibility: hidden;\n transform-style: preserve-3d;\n}\n@media (min-width: 1200px) {\n .sec-6-home-15__member {\n max-width: 407px;\n }\n .sec-6-home-15__member--1 {\n grid-column: 1;\n grid-row: 1;\n justify-self: start;\n }\n .sec-6-home-15__member--2 {\n grid-column: 3;\n grid-row: 1;\n justify-self: end;\n margin-top: 0;\n }\n .sec-6-home-15__member--3 {\n grid-column: 1;\n grid-row: 2;\n justify-self: start;\n margin-top: 0;\n }\n .sec-6-home-15__member--4 {\n grid-column: 3;\n grid-row: 2;\n justify-self: end;\n margin-top: clamp(4px, 1vw, 14px);\n }\n}\n.sec-6-home-15__member-link {\n display: block;\n color: inherit;\n text-decoration: none;\n transition: opacity 0.3s ease;\n}\n.sec-6-home-15__member-link:hover {\n opacity: 0.92;\n}\n.sec-6-home-15__member-frame {\n position: relative;\n border-radius: 16px;\n overflow: hidden;\n background: var(--at-neutral-100, #dfdfdf);\n aspect-ratio: 407/550;\n}\n.sec-6-home-15__member-img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center top;\n}\n.sec-6-home-15__member-overlay {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n min-height: 34.5%;\n padding: clamp(28px, 3vw, 40px) clamp(24px, 3.5vw, 46px);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n background: linear-gradient(180deg, rgba(26, 26, 26, 0) 11.9%, rgba(26, 26, 26, 0.92) 100%);\n backdrop-filter: blur(3px);\n pointer-events: none;\n}\n.sec-6-home-15__member-name {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(26px, 2.2vw, 32px);\n line-height: 1.1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-0, #fefefe);\n}\n.sec-6-home-15__member-role {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: clamp(18px, 1.4vw, 22px);\n line-height: 1.2;\n letter-spacing: -0.02em;\n color: var(--at-neutral-0, #fefefe);\n opacity: 0.8;\n}\n.sec-6-home-15__member-fab {\n position: absolute;\n top: clamp(20px, 2vw, 26px);\n right: clamp(20px, 2vw, 26px);\n z-index: 2;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n}\n.sec-6-home-15__member-fab--light {\n background: var(--at-neutral-0, #fefefe);\n color: var(--at-neutral-900, #1d1d1d);\n}\n.sec-6-home-15__member-fab--dark {\n background: var(--at-neutral-900, #1d1d1d);\n color: var(--at-neutral-0, #fefefe);\n}\n@media (min-width: 1200px) {\n .sec-6-home-15__foot {\n grid-column: 2/-1;\n grid-row: 3;\n justify-self: end;\n max-width: min(775px, 100%);\n text-align: left;\n }\n}\n.sec-6-home-15__foot-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(22px, 2.2vw, 36px);\n line-height: 1.2;\n letter-spacing: -0.05em;\n text-transform: capitalize;\n color: var(--at-neutral-700, #303030);\n}\n.sec-6-home-15__cta {\n height: 50px;\n padding: 14px 27px;\n border-radius: 50px;\n background: var(--at-neutral-900, #1d1d1d);\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-0, #fefefe) !important;\n text-decoration: none !important;\n white-space: nowrap;\n transition: background 0.25s ease, color 0.25s ease;\n}\n.sec-6-home-15__cta:hover {\n background: var(--at-theme-primary);\n color: var(--at-neutral-0) !important;\n}\n.sec-6-home-15__cta-arrow {\n flex-shrink: 0;\n color: currentColor;\n}\n.sec-6-home-15 {\n /* --- Throwable logos scene (scoped layout; physics from throwable.js) --- */\n}\n.sec-6-home-15__throw {\n margin-top: 0;\n position: absolute;\n bottom: 0;\n height: 600px;\n z-index: 1;\n width: 100%;\n}\n.sec-6-home-15__throw .client-capsule-wrapper {\n margin-top: 0;\n height: 380px;\n}\n@media (min-width: 768px) {\n .sec-6-home-15__throw .client-capsule-wrapper {\n height: 460px;\n }\n}\n@media (min-width: 992px) {\n .sec-6-home-15__throw .client-capsule-wrapper {\n height: 520px;\n }\n}\n@media (min-width: 1400px) {\n .sec-6-home-15__throw .client-capsule-wrapper {\n height: 580px;\n }\n}\n.sec-6-home-15__throw .client-box--brand-h15 {\n background-color: var(--at-theme-primary);\n}\n\n/*----------------------------------------*/\n/* sec-7-home-15 (Home 15 — What we do)\n/*----------------------------------------*/\n.sec-7-home-15 {\n position: relative;\n background: var(--at-neutral-50, #f2f2f2);\n padding-top: 120px;\n padding-bottom: 140px;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-7-home-15 {\n padding-top: 100px;\n padding-bottom: 110px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-7-home-15 {\n padding-top: 80px;\n padding-bottom: 90px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-15 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n}\n.sec-7-home-15 {\n /* ---- Header ---- */\n}\n.sec-7-home-15__head {\n max-width: 1430px;\n margin-bottom: 60px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-7-home-15__head {\n margin-bottom: 48px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-15__head {\n margin-bottom: 36px;\n }\n}\n.sec-7-home-15__eyebrow {\n color: var(--at-neutral-900, #1d1d1d);\n margin-bottom: 16px;\n}\n.sec-7-home-15__eyebrow svg {\n flex-shrink: 0;\n}\n.sec-7-home-15__eyebrow-text {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n}\n.sec-7-home-15__heading {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(32px, 4.6vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900, #1d1d1d);\n}\n.sec-7-home-15__heading-muted {\n color: var(--at-neutral-300, #b7b7b7);\n}\n.sec-7-home-15 {\n /* ---- Body ---- */\n}\n.sec-7-home-15__body {\n align-items: flex-start;\n}\n.sec-7-home-15 {\n /* ---- Left: image + caption ---- */\n}\n.sec-7-home-15__media {\n margin-bottom: 28px;\n}\n.sec-7-home-15__media-frame {\n position: relative;\n border-radius: 16px;\n overflow: hidden;\n aspect-ratio: 551/345;\n}\n.sec-7-home-15__media-img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n.sec-7-home-15__caption {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: clamp(18px, 1.4vw, 22px);\n line-height: 1.45;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950, #0f0f0f);\n max-width: 551px;\n}\n.sec-7-home-15 {\n /* ---- Right: services list ---- */\n}\n.sec-7-home-15__services {\n border-top: 1px solid var(--at-neutral-200, #cdcccc);\n border-bottom: 1px solid var(--at-neutral-200, #cdcccc);\n}\n.sec-7-home-15__service + .sec-7-home-15__service {\n border-top: 1px solid var(--at-neutral-200, #cdcccc);\n}\n.sec-7-home-15__service-link {\n display: flex;\n align-items: center;\n gap: 32px;\n padding: 28px 8px;\n color: inherit;\n text-decoration: none;\n transition: padding-left 0.35s ease;\n}\n.sec-7-home-15__service-link:hover {\n padding-left: 16px;\n}\n.sec-7-home-15__service-link:hover .sec-7-home-15__service-title {\n font-size: clamp(26px, 2.5vw, 36px);\n}\n.sec-7-home-15__service-link:hover .sec-7-home-15__service-fab {\n width: 56px;\n height: 56px;\n background: var(--at-theme-primary, #f0460e);\n border-color: var(--at-theme-primary, #f0460e);\n color: var(--at-neutral-0, #fefefe);\n}\n.sec-7-home-15__service-link:hover .sec-7-home-15__service-fab svg {\n width: 16px;\n height: 15px;\n stroke-width: 1.5;\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-15__service-link {\n gap: 16px;\n padding: 22px 4px;\n }\n .sec-7-home-15__service-link:hover {\n padding-left: 8px;\n }\n}\n.sec-7-home-15__service-index {\n flex-shrink: 0;\n width: 100px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(22px, 2.2vw, 32px);\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950, #0f0f0f);\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-15__service-index {\n width: 64px;\n }\n}\n.sec-7-home-15__service-title {\n flex: 1 1 auto;\n min-width: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(22px, 2vw, 28px);\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950, #0f0f0f);\n transition: font-size 0.3s ease;\n}\n.sec-7-home-15__service-fab {\n flex-shrink: 0;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: 1px solid var(--at-neutral-200, #cdcccc);\n background: transparent;\n color: var(--at-neutral-950, #0f0f0f);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;\n}\n.sec-7-home-15__service-fab svg {\n transition: width 0.3s ease, height 0.3s ease, stroke-width 0.3s ease;\n}\n.sec-7-home-15 {\n /* ---- CTA block ---- */\n}\n.sec-7-home-15__cta-block {\n max-width: 590px;\n margin-top: 64px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-7-home-15__cta-block {\n margin-top: 48px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-home-15__cta-block {\n margin-top: 36px;\n }\n}\n.sec-7-home-15__cta-mark {\n display: inline-flex;\n width: 40px;\n height: 40px;\n margin-bottom: 24px;\n}\n.sec-7-home-15__cta-copy {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: clamp(16px, 1.3vw, 20px);\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900, #1d1d1d);\n margin-bottom: 28px;\n}\n.sec-7-home-15__cta-actions {\n gap: 0;\n}\n\n/*----------------------------------------*/\n/* sec-8-home-15 (Home 15 — Testimonials)\n/*----------------------------------------*/\n.sec-8-home-15 {\n position: relative;\n padding-top: 100px;\n padding-bottom: 110px;\n border-bottom: 1px solid var(--at-neutral-200, #cdcccc);\n text-align: center;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-8-home-15 {\n padding-top: 88px;\n padding-bottom: 96px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-home-15 {\n padding-top: 72px;\n padding-bottom: 80px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-15 {\n padding-top: 56px;\n padding-bottom: 64px;\n }\n}\n.sec-8-home-15 {\n /* ---- Eyebrow ---- */\n}\n.sec-8-home-15__eyebrow {\n color: var(--at-neutral-900, #1d1d1d);\n margin-bottom: 56px;\n}\n.sec-8-home-15__eyebrow svg {\n flex-shrink: 0;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-home-15__eyebrow {\n margin-bottom: 44px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-15__eyebrow {\n margin-bottom: 32px;\n }\n}\n.sec-8-home-15__eyebrow-text {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n}\n.sec-8-home-15 {\n /* ---- Main slider ---- */\n}\n.sec-8-home-15__slider {\n max-width: 1330px;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 64px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-home-15__slider {\n margin-bottom: 48px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-8-home-15__slider {\n margin-bottom: 36px;\n }\n}\n.sec-8-home-15__slide {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.sec-8-home-15__quote {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(22px, 3.4vw, 48px);\n line-height: 1.085;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950, #0f0f0f);\n max-width: 1330px;\n}\n.sec-8-home-15 {\n /* ---- Thumbs slider ---- */\n}\n.sec-8-home-15__thumbs {\n max-width: 814px;\n margin-left: auto;\n margin-right: auto;\n}\n.sec-8-home-15__thumbs .swiper-wrapper {\n align-items: center;\n}\n.sec-8-home-15__thumb {\n flex-shrink: 0;\n height: auto;\n aspect-ratio: 1/1;\n padding: 0;\n background: transparent;\n border: 5px solid var(--at-neutral-50, #f2f2f2);\n cursor: pointer;\n overflow: hidden;\n transition: border-color 0.3s ease;\n}\n.sec-8-home-15__thumb:hover {\n border-color: var(--at-neutral-200, #cdcccc);\n}\n.sec-8-home-15__thumb.swiper-slide-thumb-active {\n border-color: var(--at-theme-primary, #f0460e);\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-home-15__thumb {\n border-width: 4px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-8-home-15__thumb {\n border-width: 4px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-8-home-15__thumb {\n border-width: 3px;\n }\n}\n.sec-8-home-15__thumb-img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n/* ===========================================================\n Section 9 — Home 15 (Inside / Article & blogs)\n =========================================================== */\n.sec-9-home-15 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-0);\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-9-home-15 {\n padding-top: 110px;\n padding-bottom: 110px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-9-home-15 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-15 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n}\n.sec-9-home-15__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-9-home-15__inner {\n padding-left: 60px;\n padding-right: 60px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-9-home-15__inner {\n padding-left: 40px;\n padding-right: 40px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-9-home-15__inner {\n padding-left: 30px;\n padding-right: 30px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-9-home-15__inner {\n padding-left: 20px;\n padding-right: 20px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-9-home-15__inner {\n padding-left: 16px;\n padding-right: 16px;\n }\n}\n.sec-9-home-15 {\n /* ---- Header row ---- */\n}\n.sec-9-home-15__head {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 32px;\n padding-bottom: 42px;\n border-bottom: 1px solid var(--at-neutral-100);\n margin-bottom: 42px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-9-home-15__head {\n padding-bottom: 32px;\n margin-bottom: 32px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-15__head {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n padding-bottom: 28px;\n margin-bottom: 28px;\n }\n}\n.sec-9-home-15__head-left {\n display: flex;\n flex-direction: column;\n gap: 16px;\n min-width: 0;\n}\n.sec-9-home-15__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-neutral-900);\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-15__eyebrow {\n font-size: 13px;\n }\n}\n.sec-9-home-15__eyebrow-label {\n white-space: nowrap;\n}\n.sec-9-home-15__eyebrow-icon {\n flex-shrink: 0;\n display: inline-block;\n}\n.sec-9-home-15__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 124px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px) {\n .sec-9-home-15__title {\n font-size: 110px;\n }\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-9-home-15__title {\n font-size: 96px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-9-home-15__title {\n font-size: 84px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-9-home-15__title {\n font-size: 76px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-9-home-15__title {\n font-size: 64px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-9-home-15__title {\n font-size: 56px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-9-home-15__title {\n font-size: 44px;\n }\n}\n.sec-9-home-15__cta {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 14px 27px;\n border-radius: 50px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;\n}\n.sec-9-home-15__cta:hover, .sec-9-home-15__cta:focus-visible {\n background-color: var(--at-neutral-700, #2a2a2a);\n color: var(--at-neutral-0);\n transform: translateY(-2px);\n}\n@media (max-width: 574.98px) {\n .sec-9-home-15__cta {\n font-size: 14px;\n padding: 12px 22px;\n }\n}\n.sec-9-home-15__cta-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.sec-9-home-15 {\n /* ---- Articles list ---- */\n}\n.sec-9-home-15__list {\n display: flex;\n flex-direction: column;\n gap: 42px;\n margin-left: 372px;\n}\n@media only screen and (min-width: 1700px) and (max-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1700px) {\n .sec-9-home-15__list {\n margin-left: 240px;\n }\n}\n@media only screen and (min-width: 1400px) and (max-width: 1599px) {\n .sec-9-home-15__list {\n margin-left: 160px;\n }\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-9-home-15__list {\n margin-left: 80px;\n gap: 36px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-9-home-15__list {\n margin-left: 0;\n gap: 32px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-15__list {\n margin-left: 0;\n gap: 24px;\n }\n}\n.sec-9-home-15 {\n /* ---- Single article row ---- */\n}\n.sec-9-home-15__item {\n display: grid;\n grid-template-columns: minmax(0, 1.5fr) 339px minmax(0, 0.9fr);\n align-items: center;\n gap: 64px;\n padding-bottom: 42px;\n border-bottom: 1px solid var(--at-neutral-100);\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-9-home-15__item {\n grid-template-columns: minmax(0, 1.4fr) 280px minmax(0, 0.9fr);\n gap: 40px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-9-home-15__item {\n grid-template-columns: minmax(0, 1.3fr) 240px minmax(0, 1fr);\n gap: 32px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-9-home-15__item {\n grid-template-columns: minmax(0, 1fr) 200px;\n grid-template-areas: \"lead thumb\" \"meta meta\";\n gap: 24px 28px;\n padding-bottom: 32px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-15__item {\n grid-template-columns: 1fr;\n grid-template-areas: \"thumb\" \"lead\" \"meta\";\n gap: 20px;\n padding-bottom: 24px;\n }\n}\n.sec-9-home-15__item--last {\n border-bottom: 0;\n padding-bottom: 0;\n}\n.sec-9-home-15__item-lead {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 26px;\n max-width: 557px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-9-home-15__item-lead {\n grid-area: lead;\n gap: 18px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-15__item-lead {\n grid-area: lead;\n gap: 14px;\n max-width: none;\n }\n}\n.sec-9-home-15__tag {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 10px 19px;\n border: 1px solid var(--at-neutral-100);\n border-radius: 32px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: -0.02em;\n text-transform: uppercase;\n color: var(--at-neutral-900);\n background-color: transparent;\n}\n.sec-9-home-15__item-title {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 24px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n margin: 0;\n}\n.sec-9-home-15__item-title a {\n color: inherit;\n text-decoration: none;\n background-image: linear-gradient(currentColor, currentColor);\n background-size: 0% 1px;\n background-position: 0 100%;\n background-repeat: no-repeat;\n transition: background-size 0.4s ease;\n}\n.sec-9-home-15__item-title a:hover, .sec-9-home-15__item-title a:focus-visible {\n color: inherit;\n background-size: 100% 1px;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-9-home-15__item-title {\n font-size: 22px;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-9-home-15__item-title {\n font-size: 20px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-9-home-15__item-title {\n font-size: 20px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-9-home-15__item-title {\n font-size: 18px;\n }\n}\n.sec-9-home-15__item-thumb {\n position: relative;\n display: block;\n overflow: hidden;\n border-radius: 16px;\n aspect-ratio: 339/210;\n width: 100%;\n background-color: var(--at-neutral-100);\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-9-home-15__item-thumb {\n grid-area: thumb;\n aspect-ratio: 4/3;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-15__item-thumb {\n grid-area: thumb;\n aspect-ratio: 16/10;\n }\n}\n.sec-9-home-15__item-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n}\n.sec-9-home-15__item-meta {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 32px;\n height: 100%;\n min-height: 120px;\n max-width: 312px;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-9-home-15__item-meta {\n grid-area: meta;\n gap: 16px;\n max-width: none;\n min-height: 0;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-9-home-15__item-meta {\n grid-area: meta;\n gap: 14px;\n max-width: none;\n min-height: 0;\n }\n}\n.sec-9-home-15__item-excerpt {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n@media (max-width: 574.98px) {\n .sec-9-home-15__item-excerpt {\n font-size: 15px;\n }\n}\n.sec-9-home-15__item-byline {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n@media (max-width: 574.98px) {\n .sec-9-home-15__item-byline {\n font-size: 15px;\n }\n}\n.sec-9-home-15__item-author {\n color: #f0460e;\n text-decoration: none;\n transition: opacity 0.3s ease;\n}\n.sec-9-home-15__item-author:hover, .sec-9-home-15__item-author:focus-visible {\n color: #f0460e;\n opacity: 0.8;\n}\n\n/* Slideshow — 6 layout variants in one partial.\n Wrapper: .slideshow\n - default (no modifier) → Horizontal Cinema\n - .is-split → Editorial Split + Orbital\n - .is-stack → Typographic Stack + bottom progress bar\n - .is-curtain → Diagonal Curtain Reveal\n - .is-zstack → 3D Z-Stack Reveal\n - .is-vista → Slideshow-faithful vertical scroll + central minimap\n All rules scoped under the wrapper to avoid global pollution.\n*/\n.slideshow {\n /* Common shell --------------------------------------------------------- */\n position: fixed;\n inset: 0;\n width: 100%;\n height: 100svh;\n overflow: hidden;\n font-family: inherit;\n}\n.slideshow *,\n.slideshow *::before,\n.slideshow *::after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n.slideshow button {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n font: inherit;\n}\n.slideshow a {\n color: inherit;\n text-decoration: none;\n}\n.slideshow .project-list {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.slideshow {\n /* Cinema — wrapper-level palette (only when no other variant active).\n Uses Orisa's themed CSS vars so colors invert with the dark-mode toggle. */\n}\n.slideshow:not(.is-split):not(.is-stack):not(.is-horizontal) {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n}\n.slideshow {\n /* ===================================================================== *\n * CINEMA (default) — horizontal slides + side rail\n * ===================================================================== */\n}\n.slideshow .project {\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100svh;\n display: grid;\n grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);\n gap: 4rem;\n padding: 7rem 8rem 4rem 6rem;\n will-change: transform;\n}\n.slideshow .project-frame {\n position: relative;\n width: 100%;\n height: 100%;\n max-height: calc(100svh - 11rem);\n overflow: hidden;\n}\n.slideshow .project-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.5);\n will-change: transform;\n}\n.slideshow .project-meta {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 2rem;\n}\n.slideshow .project-num {\n display: inline-block;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n padding-bottom: 0.75rem;\n border-bottom: 1px solid rgba(var(--at-common-white-rgb), 0.4);\n}\n.slideshow .project-title {\n font-size: clamp(2.75rem, 7vw, 6.5rem);\n line-height: 0.95;\n font-weight: 600;\n letter-spacing: -0.03em;\n text-transform: uppercase;\n max-width: 12ch;\n}\n.slideshow .project-meta-bottom {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n opacity: 0.7;\n gap: 1rem;\n}\n.slideshow .rail {\n position: absolute;\n top: 50%;\n right: 1.5rem;\n transform: translateY(-50%);\n width: 80px;\n height: 360px;\n overflow: hidden;\n mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);\n -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);\n z-index: 5;\n}\n.slideshow .rail-track {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.slideshow .rail-item {\n position: absolute;\n top: calc(50% - 30px);\n left: 0;\n width: 100%;\n height: 60px;\n display: flex;\n align-items: center;\n gap: 0.6rem;\n padding: 0 0.5rem;\n will-change: transform;\n opacity: 0.5;\n transition: opacity 0.3s ease;\n}\n.slideshow .rail-item.is-active {\n opacity: 1;\n}\n.slideshow .rail-thumb {\n flex-shrink: 0;\n width: 44px;\n height: 44px;\n overflow: hidden;\n position: relative;\n border: 1px solid rgba(var(--at-common-white-rgb), 0.2);\n transition: border-color 0.3s ease, transform 0.3s ease;\n}\n.slideshow .rail-thumb img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.slideshow .rail-item.is-active .rail-thumb {\n border-color: var(--at-common-white);\n transform: scale(1.06);\n}\n.slideshow .rail-index {\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n opacity: 0.8;\n}\n.slideshow .rail-item.is-active .rail-index {\n opacity: 1;\n}\n.slideshow {\n /* Cinema responsive */\n}\n@media (max-width: 991px) {\n .slideshow .project {\n grid-template-columns: 1fr;\n grid-template-rows: minmax(0, 1fr) auto;\n gap: 1.5rem;\n padding: 5rem 5rem 2rem 1.25rem;\n }\n .slideshow .project-frame {\n max-height: 55vh;\n }\n .slideshow .project-title {\n font-size: clamp(2rem, 11vw, 3.5rem);\n }\n .slideshow .rail {\n right: 0.5rem;\n width: 56px;\n height: 280px;\n }\n .slideshow .rail-thumb {\n width: 34px;\n height: 34px;\n }\n}\n@media (max-width: 575px) {\n .slideshow .project {\n padding: 4.5rem 4rem 1.5rem 1rem;\n gap: 1rem;\n }\n .slideshow .project-frame {\n max-height: 50vh;\n }\n .slideshow .project-title {\n font-size: clamp(1.75rem, 12vw, 2.75rem);\n }\n .slideshow .project-num,\n .slideshow .project-meta-bottom {\n font-size: 0.65rem;\n }\n .slideshow .rail {\n right: 0.25rem;\n width: 48px;\n height: 240px;\n }\n .slideshow .rail-thumb {\n width: 30px;\n height: 30px;\n }\n .slideshow .rail-index {\n font-size: 0.6rem;\n }\n}\n.slideshow {\n /* ===================================================================== *\n * SPLIT — editorial 35/65, orbital nav corner\n * ===================================================================== */\n}\n.slideshow.is-split {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n}\n.slideshow.is-split .split-project {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100svh;\n display: grid;\n grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);\n gap: 4rem;\n padding: 6rem 6rem 4rem;\n will-change: transform;\n}\n.slideshow.is-split .split-frame {\n position: relative;\n width: 100%;\n height: 100%;\n max-height: calc(100svh - 10rem);\n overflow: hidden;\n}\n.slideshow.is-split .split-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.5);\n will-change: transform;\n}\n.slideshow.is-split .split-meta {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 1.5rem;\n max-width: 640px;\n padding-right: 7rem;\n}\n.slideshow.is-split .split-num {\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n opacity: 0.6;\n}\n.slideshow.is-split .split-title {\n font-size: clamp(2.5rem, 6vw, 5.5rem);\n line-height: 0.95;\n font-weight: 600;\n letter-spacing: -0.03em;\n text-transform: uppercase;\n}\n.slideshow.is-split .split-info {\n display: flex;\n gap: 2rem;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n opacity: 0.7;\n padding-top: 0.75rem;\n border-top: 1px solid rgba(var(--at-common-black-rgb), 0.2);\n}\n.slideshow.is-split .split-desc {\n font-size: 1rem;\n line-height: 1.55;\n max-width: 520px;\n color: rgba(var(--at-common-black-rgb), 0.75);\n}\n.slideshow.is-split {\n /* Orbital corner navigator */\n}\n.slideshow.is-split .orbital {\n position: absolute;\n top: 6rem;\n right: 2.5rem;\n width: 140px;\n height: 140px;\n z-index: 5;\n}\n.slideshow.is-split .orbital-ring {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 110px;\n height: 110px;\n border: 1px solid rgba(var(--at-common-black-rgb), 0.3);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n}\n.slideshow.is-split .orbital-dot {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: rgba(var(--at-common-black-rgb), 0.4);\n transition: background-color 0.3s ease, transform 0.3s ease;\n}\n.slideshow.is-split .orbital-dot.is-active {\n background-color: var(--at-neutral-950);\n}\n.slideshow.is-split .orbital-indicator {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 55px;\n height: 1px;\n background-color: var(--at-neutral-950);\n transform-origin: 0 50%;\n transform: translateY(-50%) rotate(-90deg);\n pointer-events: none;\n}\n.slideshow.is-split .orbital-indicator::after {\n content: \"\";\n position: absolute;\n right: -4px;\n top: 50%;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n transform: translateY(-50%);\n}\n.slideshow.is-split .orbital-label {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n gap: 0.25rem;\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n pointer-events: none;\n}\n.slideshow.is-split .orbital-current {\n color: var(--at-neutral-950);\n}\n.slideshow.is-split .orbital-total {\n opacity: 0.45;\n}\n@media (max-width: 991px) {\n .slideshow.is-split .split-project {\n grid-template-columns: 1fr;\n grid-template-rows: 40vh auto;\n gap: 1.5rem;\n padding: 5rem 1.5rem 2rem;\n }\n .slideshow.is-split .split-meta {\n padding-right: 0;\n }\n .slideshow.is-split .split-title {\n font-size: clamp(2rem, 9vw, 3.25rem);\n }\n .slideshow.is-split .orbital {\n top: 4.5rem;\n right: 1rem;\n width: 100px;\n height: 100px;\n }\n .slideshow.is-split .orbital-ring {\n width: 78px;\n height: 78px;\n }\n .slideshow.is-split .orbital-indicator {\n width: 39px;\n }\n}\n@media (max-width: 575px) {\n .slideshow.is-split .split-project {\n padding: 4rem 1rem 1.5rem;\n }\n .slideshow.is-split .split-title {\n font-size: clamp(1.75rem, 10vw, 2.75rem);\n }\n .slideshow.is-split .split-desc {\n font-size: 0.9rem;\n }\n .slideshow.is-split .orbital {\n top: 4rem;\n right: 0.5rem;\n width: 80px;\n height: 80px;\n }\n .slideshow.is-split .orbital-ring {\n width: 62px;\n height: 62px;\n }\n .slideshow.is-split .orbital-indicator {\n width: 31px;\n }\n .slideshow.is-split .orbital-dot {\n width: 8px;\n height: 8px;\n }\n .slideshow.is-split .orbital-label {\n font-size: 0.6rem;\n }\n}\n.slideshow {\n /* ===================================================================== *\n * STACK — typographic backdrop, image accent, bottom progress bar\n * ===================================================================== */\n}\n.slideshow.is-stack {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n}\n.slideshow.is-stack .stack-project {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100svh;\n will-change: transform;\n overflow: hidden;\n}\n.slideshow.is-stack .stack-num-bg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: clamp(20rem, 75vh, 75vh);\n line-height: 0.85;\n font-weight: 800;\n color: transparent;\n -webkit-text-stroke: 2px rgba(var(--at-common-black-rgb), 0.18);\n letter-spacing: -0.05em;\n pointer-events: none;\n user-select: none;\n white-space: nowrap;\n}\n.slideshow.is-stack .stack-frame {\n position: absolute;\n top: 50%;\n right: 12vw;\n transform: translateY(-50%);\n width: 36vw;\n height: 60vh;\n max-width: 480px;\n max-height: 600px;\n overflow: hidden;\n}\n.slideshow.is-stack .stack-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.5);\n will-change: transform;\n}\n.slideshow.is-stack .stack-overlay {\n position: absolute;\n left: 8vw;\n bottom: 14vh;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n max-width: 50vw;\n z-index: 2;\n}\n.slideshow.is-stack .stack-title {\n font-size: clamp(2.25rem, 5.5vw, 4.5rem);\n line-height: 0.95;\n font-weight: 600;\n letter-spacing: -0.03em;\n text-transform: uppercase;\n}\n.slideshow.is-stack .stack-info {\n display: flex;\n gap: 1.5rem;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n opacity: 0.7;\n}\n.slideshow.is-stack {\n /* Bottom progress bar */\n}\n.slideshow.is-stack .stack-progress {\n position: absolute;\n bottom: 4rem;\n left: 50%;\n transform: translateX(-50%);\n width: 320px;\n height: 1px;\n background-color: rgba(var(--at-common-black-rgb), 0.2);\n z-index: 5;\n}\n.slideshow.is-stack .stack-progress-fill {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n background-color: var(--at-neutral-950);\n}\n.slideshow.is-stack .stack-progress-dot {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: rgba(var(--at-common-black-rgb), 0.35);\n transition: background-color 0.3s ease, transform 0.3s ease;\n}\n.slideshow.is-stack .stack-progress-dot.is-active {\n background-color: var(--at-neutral-950);\n transform: translate(-50%, -50%) scale(1.5);\n}\n.slideshow.is-stack .stack-progress-dot::before {\n content: attr(data-num);\n position: absolute;\n top: -1.6rem;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.65rem;\n font-weight: 600;\n letter-spacing: 0.15em;\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n}\n.slideshow.is-stack .stack-progress-dot.is-active::before,\n.slideshow.is-stack .stack-progress-dot:hover::before {\n opacity: 0.8;\n}\n@media (max-width: 991px) {\n .slideshow.is-stack .stack-num-bg {\n font-size: clamp(14rem, 55vh, 55vh);\n }\n .slideshow.is-stack .stack-frame {\n right: 6vw;\n width: 50vw;\n height: 50vh;\n }\n .slideshow.is-stack .stack-overlay {\n left: 6vw;\n bottom: 16vh;\n max-width: 75vw;\n }\n .slideshow.is-stack .stack-title {\n font-size: clamp(1.75rem, 8vw, 3rem);\n }\n .slideshow.is-stack .stack-progress {\n width: 240px;\n bottom: 3rem;\n }\n}\n@media (max-width: 575px) {\n .slideshow.is-stack .stack-num-bg {\n font-size: clamp(10rem, 40vh, 40vh);\n -webkit-text-stroke-width: 1.5px;\n }\n .slideshow.is-stack .stack-frame {\n right: 50%;\n top: 35vh;\n transform: translate(50%, -50%);\n width: 70vw;\n height: 38vh;\n }\n .slideshow.is-stack .stack-overlay {\n left: 1.25rem;\n bottom: 8vh;\n max-width: calc(100vw - 2.5rem);\n }\n .slideshow.is-stack .stack-title {\n font-size: clamp(1.5rem, 9vw, 2.25rem);\n }\n .slideshow.is-stack .stack-progress {\n width: 180px;\n bottom: 2.5rem;\n }\n .slideshow.is-stack .stack-progress-dot {\n width: 6px;\n height: 6px;\n }\n}\n.slideshow {\n /* ===================================================================== *\n * CURTAIN — diagonal clip-path wipe, no slide translate\n * ===================================================================== */\n}\n.slideshow.is-curtain {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n}\n.slideshow.is-curtain .curtain-stage {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.slideshow.is-curtain .curtain-slot {\n position: absolute;\n inset: 0;\n will-change: clip-path;\n overflow: hidden;\n}\n.slideshow.is-curtain .curtain-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.slideshow.is-curtain .curtain-overlay {\n position: absolute;\n left: 8vw;\n bottom: 12vh;\n max-width: 50vw;\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n z-index: 2;\n}\n.slideshow.is-curtain .curtain-num {\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n opacity: 0.85;\n color: #fff;\n}\n.slideshow.is-curtain .curtain-title {\n font-size: clamp(2.5rem, 7vw, 6rem);\n line-height: 0.95;\n font-weight: 700;\n letter-spacing: -0.03em;\n text-transform: uppercase;\n max-width: 14ch;\n color: #fff;\n}\n.slideshow.is-curtain .curtain-meta {\n display: flex;\n gap: 2rem;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n opacity: 0.85;\n color: #fff;\n}\n.slideshow.is-curtain {\n /* Diagonal slits — left edge */\n}\n.slideshow.is-curtain .curtain-nav {\n position: absolute;\n left: 2.5rem;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n z-index: 5;\n color: #fff;\n}\n.slideshow.is-curtain .curtain-slit {\n display: block;\n width: 30px;\n height: 3px;\n background-color: rgba(var(--at-common-black-rgb), 0.4);\n transform: skewX(-30deg);\n transition: width 0.3s ease, background-color 0.3s ease;\n padding: 0;\n}\n.slideshow.is-curtain .curtain-slit.is-active {\n width: 60px;\n background-color: #fff;\n}\n@media (max-width: 991px) {\n .slideshow.is-curtain .curtain-overlay {\n left: 1.5rem;\n bottom: 6vh;\n max-width: 80vw;\n }\n .slideshow.is-curtain .curtain-title {\n font-size: clamp(1.75rem, 9vw, 3.25rem);\n }\n .slideshow.is-curtain .curtain-nav {\n left: 1rem;\n gap: 0.5rem;\n }\n .slideshow.is-curtain .curtain-slit {\n width: 24px;\n }\n .slideshow.is-curtain .curtain-slit.is-active {\n width: 48px;\n }\n}\n@media (max-width: 575px) {\n .slideshow.is-curtain .curtain-overlay {\n left: 1rem;\n bottom: 4vh;\n gap: 0.75rem;\n }\n .slideshow.is-curtain .curtain-title {\n font-size: clamp(1.5rem, 11vw, 2.5rem);\n }\n .slideshow.is-curtain .curtain-meta {\n gap: 1rem;\n font-size: 0.65rem;\n }\n}\n.slideshow {\n /* ===================================================================== *\n * Z-STACK — 3D perspective stack reveal\n * ===================================================================== */\n}\n.slideshow.is-zstack {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n}\n.slideshow.is-zstack .project-list {\n perspective: 1500px;\n perspective-origin: center;\n transform-style: preserve-3d;\n}\n.slideshow.is-zstack .zstack-project {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n backface-visibility: hidden;\n will-change: transform, opacity;\n}\n.slideshow.is-zstack .zstack-card {\n width: 70vw;\n max-width: 1100px;\n height: 75vh;\n max-height: 720px;\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n}\n.slideshow.is-zstack .zstack-frame {\n position: relative;\n width: 100%;\n flex: 1;\n overflow: hidden;\n}\n.slideshow.is-zstack .zstack-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.slideshow.is-zstack .zstack-caption {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n.slideshow.is-zstack .zstack-caption-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n opacity: 0.7;\n}\n.slideshow.is-zstack .zstack-title {\n font-size: clamp(1.5rem, 3vw, 2.5rem);\n font-weight: 600;\n line-height: 1;\n letter-spacing: -0.02em;\n text-transform: uppercase;\n}\n.slideshow.is-zstack {\n /* Right-side index navigator */\n}\n.slideshow.is-zstack .zstack-index {\n position: absolute;\n right: 3rem;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n flex-direction: column;\n gap: 0.6rem;\n z-index: 10;\n}\n.slideshow.is-zstack .zstack-index-btn {\n font-size: 0.85rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n color: rgba(var(--at-common-black-rgb), 0.35);\n transition: color 0.3s ease, transform 0.3s ease, font-size 0.3s ease;\n text-align: right;\n padding: 0.25rem 0;\n}\n.slideshow.is-zstack .zstack-index-btn.is-active {\n color: var(--at-neutral-950);\n font-size: 1.05rem;\n font-weight: 700;\n transform: scale(1.1);\n}\n@media (max-width: 991px) {\n .slideshow.is-zstack .zstack-card {\n width: 80vw;\n height: 70vh;\n }\n .slideshow.is-zstack .zstack-index {\n right: 1rem;\n }\n}\n@media (max-width: 575px) {\n .slideshow.is-zstack .zstack-card {\n width: 88vw;\n height: 65vh;\n gap: 0.75rem;\n }\n .slideshow.is-zstack .zstack-title {\n font-size: clamp(1.25rem, 5vw, 1.75rem);\n }\n .slideshow.is-zstack .zstack-index {\n right: 0.5rem;\n gap: 0.4rem;\n }\n .slideshow.is-zstack .zstack-index-btn {\n font-size: 0.7rem;\n }\n .slideshow.is-zstack .zstack-index-btn.is-active {\n font-size: 0.85rem;\n }\n}\n.slideshow {\n /* ===================================================================== *\n * VISTA — Slideshow-faithful vertical infinite parallax + central minimap\n * ===================================================================== */\n}\n.slideshow.is-vista {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n}\n.slideshow.is-vista .vista-project {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100svh;\n display: block;\n padding: 0;\n will-change: transform;\n overflow: hidden;\n}\n.slideshow.is-vista .vista-project img {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.5);\n will-change: transform;\n}\n.slideshow.is-vista {\n /* Central minimap card */\n}\n.slideshow.is-vista .minimap {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 75%;\n max-width: 720px;\n height: calc(250px + 3rem);\n background-color: var(--at-common-white);\n color: var(--at-common-black);\n padding: 1.5rem;\n overflow: hidden;\n z-index: 5;\n}\n.slideshow.is-vista .minimap-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n}\n.slideshow.is-vista .minimap-img-preview {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 35%;\n height: 100%;\n overflow: hidden;\n}\n.slideshow.is-vista .minimap-img-item {\n position: absolute;\n width: 100%;\n height: 100%;\n will-change: transform;\n overflow: hidden;\n}\n.slideshow.is-vista .minimap-img-item img {\n position: relative;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.5);\n will-change: transform;\n}\n.slideshow.is-vista .minimap-info-list {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n.slideshow.is-vista .minimap-item-info {\n position: absolute;\n width: 100%;\n height: 250px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n will-change: transform;\n}\n.slideshow.is-vista .minimap-item-info-row {\n width: 100%;\n display: flex;\n justify-content: space-between;\n padding: 0.5rem;\n}\n.slideshow.is-vista .minimap-item-info p {\n margin: 0;\n text-transform: uppercase;\n font-size: 0.85rem;\n font-weight: 600;\n letter-spacing: -0.0125rem;\n}\n.slideshow.is-vista {\n /* Bottom-center pagination dots */\n}\n.slideshow.is-vista .vista-nav {\n position: absolute;\n bottom: 2.5rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 0.75rem;\n z-index: 6;\n}\n.slideshow.is-vista .vista-nav-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n border: 1px solid #ffffff;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n transition: background-color 0.3s ease, transform 0.3s ease;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.slideshow.is-vista .vista-nav-dot.is-active {\n background-color: #ffffff;\n transform: scale(1.35);\n}\n.slideshow.is-vista {\n /* Side buttons — Next (left) / Preview (right) */\n}\n.slideshow.is-vista .vista-next,\n.slideshow.is-vista .vista-prev {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 1.25rem;\n background: transparent;\n border: none;\n padding: 1rem;\n color: #ffffff;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n cursor: pointer;\n z-index: 6;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);\n transition: gap 0.3s ease, opacity 0.3s ease;\n}\n.slideshow.is-vista .vista-next {\n left: 2.5rem;\n}\n.slideshow.is-vista .vista-prev {\n right: 2.5rem;\n}\n.slideshow.is-vista .vista-next:hover,\n.slideshow.is-vista .vista-prev:hover {\n gap: 1.6rem;\n}\n.slideshow.is-vista .vista-arrow {\n display: block;\n width: 80px;\n height: 10px;\n filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));\n flex-shrink: 0;\n}\n@media (max-width: 991px) {\n .slideshow.is-vista .minimap {\n width: 90%;\n }\n .slideshow.is-vista .minimap-img-preview {\n left: unset;\n right: 0;\n transform: translate(0, -50%);\n }\n .slideshow.is-vista .minimap-item-info-row {\n flex-direction: column;\n gap: 0.25rem;\n }\n .slideshow.is-vista .vista-next {\n left: 1rem;\n }\n .slideshow.is-vista .vista-prev {\n right: 1rem;\n }\n .slideshow.is-vista .vista-next,\n .slideshow.is-vista .vista-prev {\n gap: 0.6rem;\n padding: 0.5rem;\n font-size: 0.65rem;\n }\n .slideshow.is-vista .vista-arrow {\n width: 40px;\n }\n}\n@media (max-width: 575px) {\n .slideshow.is-vista .minimap {\n width: 92%;\n padding: 1rem;\n }\n .slideshow.is-vista .minimap-item-info p {\n font-size: 0.7rem;\n }\n .slideshow.is-vista .vista-next,\n .slideshow.is-vista .vista-prev {\n display: none;\n }\n}\n.slideshow {\n /* ===================================================================== *\n * HORIZONTAL — infinite ribbon of pre-scaled images, parallax follows\n * each slide's distance from viewport center. Slides are JS-generated;\n * .horizon-track is the single transformed element.\n * ===================================================================== */\n}\n.slideshow.is-horizontal {\n user-select: none;\n cursor: grab;\n}\n.slideshow.is-horizontal:active {\n cursor: grabbing;\n}\n.slideshow.is-horizontal .horizon-track {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n display: flex;\n will-change: transform;\n}\n.slideshow.is-horizontal .horizon-slide {\n flex-shrink: 0;\n width: 350px;\n height: 500px;\n margin: 0 20px;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n flex-direction: column;\n cursor: pointer;\n overflow: visible;\n}\n.slideshow.is-horizontal .horizon-slide.is-mobile {\n width: 175px;\n height: 250px;\n}\n.slideshow.is-horizontal .horizon-frame {\n width: 100%;\n height: 100%;\n flex: 1;\n overflow: hidden;\n}\n.slideshow.is-horizontal .horizon-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(2.25);\n will-change: transform;\n user-select: none;\n pointer-events: none;\n}\n.slideshow.is-horizontal .horizon-overlay {\n position: absolute;\n left: 0;\n right: 0;\n bottom: -1.75rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n opacity: 1;\n pointer-events: none;\n z-index: 10;\n}\n.slideshow.is-horizontal .horizon-title {\n margin: 0;\n font-size: 0.8rem;\n font-weight: 500;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n}\n.slideshow.is-horizontal .horizon-arrow {\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n display: inline-flex;\n}\n.slideshow.is-horizontal .horizon-arrow svg {\n width: 100%;\n height: 100%;\n}\n.slideshow.is-horizontal {\n /* Prev / Next circular buttons — vertically centered on the sides */\n}\n.slideshow.is-horizontal .horizon-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 56px;\n height: 56px;\n border-radius: 50%;\n border: 1px solid rgba(var(--at-common-white-rgb), 0.35);\n background-color: rgba(var(--at-common-black-rgb), 0.25);\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n cursor: pointer;\n z-index: 6;\n transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;\n}\n.slideshow.is-horizontal .horizon-nav:hover {\n background-color: rgba(var(--at-common-white-rgb), 0.95);\n border-color: rgba(var(--at-common-white-rgb), 0.95);\n color: var(--at-neutral-950);\n}\n.slideshow.is-horizontal .horizon-nav:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 3px;\n}\n.slideshow.is-horizontal .horizon-nav svg {\n width: 22px;\n height: 22px;\n display: block;\n}\n.slideshow.is-horizontal .horizon-nav-prev {\n left: 2.5rem;\n}\n.slideshow.is-horizontal .horizon-nav-next {\n right: 2.5rem;\n}\n.slideshow.is-horizontal {\n /* Pagination — bottom-center row of dots, one per source project */\n}\n.slideshow.is-horizontal .horizon-pagination {\n position: absolute;\n left: 50%;\n bottom: 2rem;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.5rem 1rem;\n z-index: 6;\n}\n.slideshow.is-horizontal .horizon-pagination-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n border: 1px solid rgba(var(--at-common-white-rgb), 0.7);\n background-color: transparent;\n padding: 0;\n cursor: pointer;\n transition: background-color 0.3s ease, transform 0.3s ease, width 0.3s ease;\n}\n.slideshow.is-horizontal .horizon-pagination-dot:hover {\n background-color: rgba(var(--at-common-white-rgb), 0.5);\n}\n.slideshow.is-horizontal .horizon-pagination-dot.is-active {\n background-color: var(--at-common-white);\n border-color: var(--at-common-white);\n width: 28px;\n border-radius: 999px;\n}\n.slideshow.is-horizontal .horizon-pagination-dot:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 3px;\n}\n@media (max-width: 991px) {\n .slideshow.is-horizontal .horizon-slide {\n width: 175px;\n height: 250px;\n margin: 0 15px;\n }\n .slideshow.is-horizontal .horizon-overlay {\n bottom: -1.5rem;\n }\n .slideshow.is-horizontal .horizon-title {\n font-size: 0.7rem;\n }\n .slideshow.is-horizontal .horizon-nav {\n width: 44px;\n height: 44px;\n }\n .slideshow.is-horizontal .horizon-nav svg {\n width: 18px;\n height: 18px;\n }\n .slideshow.is-horizontal .horizon-nav-prev {\n left: 1rem;\n }\n .slideshow.is-horizontal .horizon-nav-next {\n right: 1rem;\n }\n .slideshow.is-horizontal .horizon-pagination {\n bottom: 1.5rem;\n gap: 0.5rem;\n }\n}\n@media (max-width: 575px) {\n .slideshow.is-horizontal .horizon-slide {\n width: 160px;\n height: 230px;\n margin: 0 12px;\n }\n .slideshow.is-horizontal .horizon-overlay {\n bottom: -1.25rem;\n }\n .slideshow.is-horizontal .horizon-title {\n font-size: 0.65rem;\n }\n .slideshow.is-horizontal .horizon-arrow {\n width: 14px;\n height: 14px;\n }\n .slideshow.is-horizontal .horizon-nav {\n width: 38px;\n height: 38px;\n }\n .slideshow.is-horizontal .horizon-nav svg {\n width: 16px;\n height: 16px;\n }\n .slideshow.is-horizontal .horizon-nav-prev {\n left: 0.5rem;\n }\n .slideshow.is-horizontal .horizon-nav-next {\n right: 0.5rem;\n }\n .slideshow.is-horizontal .horizon-pagination {\n bottom: 1rem;\n gap: 0.4rem;\n padding: 0.25rem 0.5rem;\n }\n .slideshow.is-horizontal .horizon-pagination-dot {\n width: 8px;\n height: 8px;\n }\n .slideshow.is-horizontal .horizon-pagination-dot.is-active {\n width: 22px;\n }\n}\n\n/* Portfolio - Horizontal Scroll Gallery\n ---------------------------------------------------------------\n Two scoped wrappers:\n .hsg-intro - normal-flow lead-in section above the gallery\n .hsg-stage - the pinned section driven by GSAP ScrollTrigger\n (see assets/js/horizontal-scroll-gallery.js)\n\n Everything is namespaced under .hsg- to avoid clashing with the\n other slideshow variants in _slideshow.scss.\n*/\n/* =====================================================================\n INTRO - lead-in section before the pin\n ===================================================================== */\n.hsg-intro {\n position: relative;\n min-height: 70svh;\n display: flex;\n align-items: center;\n padding: 8rem 0 6rem;\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n overflow: hidden;\n}\n.hsg-intro .hsg-intro__eyebrow {\n display: inline-block;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n padding-bottom: 0.5rem;\n border-bottom: 1px solid currentColor;\n opacity: 0.75;\n margin-bottom: 1.75rem;\n}\n.hsg-intro .hsg-intro__title {\n font-size: clamp(2.5rem, 7vw, 6rem);\n line-height: 0.95;\n font-weight: 600;\n letter-spacing: -0.03em;\n text-transform: uppercase;\n max-width: 16ch;\n margin: 0 0 1.5rem;\n}\n.hsg-intro .hsg-intro__desc {\n font-size: clamp(1rem, 1.2vw, 1.15rem);\n line-height: 1.55;\n max-width: 56ch;\n opacity: 0.8;\n margin: 0 0 3rem;\n}\n.hsg-intro .hsg-intro__hint {\n display: inline-flex;\n align-items: center;\n gap: 1rem;\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n opacity: 0.7;\n}\n.hsg-intro .hsg-intro__hint-line {\n display: block;\n width: 80px;\n height: 1px;\n background-color: currentColor;\n animation: hsgHintPulse 2.4s ease-in-out infinite;\n}\n@media (max-width: 991px) {\n .hsg-intro {\n min-height: 60svh;\n padding: 6rem 0 4rem;\n }\n}\n@media (max-width: 575px) {\n .hsg-intro {\n min-height: 55svh;\n padding: 5rem 0 3rem;\n }\n .hsg-intro .hsg-intro__hint-line {\n width: 56px;\n }\n}\n\n@keyframes hsgHintPulse {\n 0%, 100% {\n opacity: 0.35;\n transform: translateX(0);\n }\n 50% {\n opacity: 1;\n transform: translateX(8px);\n }\n}\n/* =====================================================================\n STAGE - the pinned horizontal scroll section\n ===================================================================== */\n.hsg-stage {\n position: relative;\n width: 100%;\n height: 100svh;\n overflow: hidden;\n color: #fefefe;\n background-color: var(--at-neutral-950);\n}\n.hsg-stage * {\n box-sizing: border-box;\n}\n.hsg-stage {\n /* -------------------- Background layer -------------------- */\n}\n.hsg-stage .hsg-bg-layer {\n position: absolute;\n inset: 0;\n z-index: 0;\n}\n.hsg-stage .hsg-bg {\n position: absolute;\n inset: 0;\n opacity: 0;\n transform: scale(1.12);\n transition: opacity 0.8s ease, transform 6s ease-out;\n will-change: opacity, transform;\n}\n.hsg-stage {\n /* Ken-Burns-style slow drift on the active background — the longer the\n user lingers on a slide, the more the image breathes. */\n}\n.hsg-stage .hsg-bg.is-active {\n opacity: 1;\n transform: scale(1) translateX(-1%);\n}\n.hsg-stage .hsg-bg__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n filter: brightness(0.7) saturate(0.9);\n}\n.hsg-stage {\n /* Tint veil on top of all backgrounds to lift card contrast. */\n}\n.hsg-stage .hsg-bg__veil {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.6) 100%);\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n pointer-events: none;\n}\n.hsg-stage {\n /* -------------------- Track of cards -------------------- */\n}\n.hsg-stage .hsg-track-wrap {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n overflow: hidden;\n z-index: 1;\n}\n.hsg-stage .hsg-track {\n display: flex;\n align-items: center;\n will-change: transform;\n /* Side padding (centers the first/last slide) and inter-slide gap\n (margin-left: 50svw) are applied by horizontal-scroll-gallery.js so\n the spacing rule lives next to the scroll logic that depends on it. */\n}\n.hsg-stage {\n /* -------------------- Slide card --------------------\n Vertical layout: media on top (~40%), body fills the rest with\n a solid black panel that holds title + tags. */\n}\n.hsg-stage .hsg-slide {\n /* Hover palette — kept as CSS vars so a future per-slide accent\n (e.g. data-accent) could override just these three values. */\n --hsg-hover-bg: #212121;\n --hsg-hover-fg: #fefefe;\n --hsg-hover-border: #212121;\n flex: 0 0 auto;\n width: 36vw;\n max-width: 520px;\n min-width: 320px;\n height: 76vh;\n max-height: 760px;\n position: relative;\n background-color: #0F0F0F;\n /* Transparent border by default so hover doesn't reflow the layout. */\n border: 5px solid transparent;\n /* Exit pose driven by --hsg-exit (set by JS to the slide's segment\n progress, 0..1). When this card becomes active and the user keeps\n scrolling, exit ramps from 0 to 1 across its segment:\n - translate X right by up to 80px\n - scale down to 0.65\n Once past its segment the slide holds the exit pose; the track\n then carries it offscreen-left so the reset is never visible.\n\n translate/scale have NO transition so the motion stays tight to\n scroll. Hover/active color swaps still transition. */\n translate: calc(var(--hsg-exit, 0) * 80px) 0;\n scale: calc(1 - var(--hsg-exit, 0) * 0.35);\n transition: box-shadow 0.6s ease, background-color 0.4s ease, border-color 0.4s ease;\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);\n}\n.hsg-stage .hsg-slide.is-active {\n box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);\n}\n.hsg-stage {\n /* Hover / keyboard-focus state — swap to the accent palette and\n reveal the border. :focus-within picks up keyboard users on the\n inner . Parallax dim on the body is also neutralized so the\n card feels \"lit up\" regardless of where it sits on the track. */\n}\n.hsg-stage .hsg-slide:hover,\n.hsg-stage .hsg-slide:focus-within {\n background-color: var(--hsg-hover-bg);\n border-color: var(--hsg-hover-border);\n}\n.hsg-stage .hsg-slide__link {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n color: inherit;\n text-decoration: none;\n overflow: hidden;\n isolation: isolate;\n}\n.hsg-stage .hsg-slide__media {\n /* Height is driven by the image's fixed 2400:1600 (3:2) aspect ratio\n (set on .hsg-slide__img), not by a flex basis. Because all slides\n share the same width at any given breakpoint, all thumbnails end up\n the same height across cards. */\n position: relative;\n flex: 0 0 auto;\n width: 100%;\n overflow: hidden;\n}\n.hsg-stage {\n /* The image is intentionally over-scaled so the parallax translateX never\n reveals an empty edge inside the frame. `scale` and `translate` are set\n as individual transform properties so we can transition them separately:\n scale animates over 1.2s on .is-active, translate updates instantly to\n follow the scroll-driven --hsg-norm value. */\n}\n.hsg-stage .hsg-slide__img {\n width: 100%;\n height: auto;\n aspect-ratio: 2400/1600;\n object-fit: cover;\n display: block;\n scale: 1.18;\n translate: calc(var(--hsg-norm, 0) * -14%) 0;\n transition: scale 1.2s ease;\n will-change: transform;\n}\n.hsg-stage .hsg-slide.is-active .hsg-slide__img {\n scale: 1.04;\n}\n.hsg-stage .hsg-slide__body {\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 2.25rem 2rem 2rem;\n background-color: #0F0F0F;\n color: #fefefe;\n min-height: 0;\n /* Centered cards are fully opaque; off-center cards dim toward 0.45.\n This complements the binary .is-active state with a smooth fade. */\n opacity: calc(0.45 + var(--hsg-centeredness, 1) * 0.55);\n transition: background-color 0.4s ease, color 0.4s ease, opacity 0.35s ease;\n}\n.hsg-stage .hsg-slide:hover .hsg-slide__body,\n.hsg-stage .hsg-slide:focus-within .hsg-slide__body {\n background-color: var(--hsg-hover-bg);\n color: var(--hsg-hover-fg);\n opacity: 1;\n}\n.hsg-stage .hsg-slide__title {\n margin: 0;\n letter-spacing: -0.02em;\n color: #fefefe;\n overflow-wrap: break-word;\n translate: 0 calc(var(--hsg-norm, 0) * -10px);\n transition: color 0.4s ease;\n}\n.hsg-stage .hsg-slide:hover .hsg-slide__title,\n.hsg-stage .hsg-slide:focus-within .hsg-slide__title {\n color: var(--hsg-hover-fg);\n}\n.hsg-stage .hsg-slide__tags {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.65rem;\n font-size: 0.85rem;\n font-weight: 500;\n letter-spacing: 0.02em;\n color: rgba(255, 255, 255, 0.9);\n /* Slight opposite-direction drift to the image — image translates left,\n tags drift right (and vice versa). Small magnitude keeps it subtle. */\n translate: calc(var(--hsg-norm, 0) * 6px) 0;\n transition: color 0.4s ease;\n}\n.hsg-stage .hsg-slide:hover .hsg-slide__tags,\n.hsg-stage .hsg-slide:focus-within .hsg-slide__tags {\n color: #fefefe;\n}\n.hsg-stage .hsg-slide__tag-sep {\n display: inline-block;\n color: rgba(255, 255, 255, 0.35);\n font-weight: 400;\n transform: translateY(-1px);\n transition: color 0.4s ease;\n}\n.hsg-stage .hsg-slide:hover .hsg-slide__tag-sep,\n.hsg-stage .hsg-slide:focus-within .hsg-slide__tag-sep {\n color: rgba(0, 0, 0, 0.35);\n}\n.hsg-stage {\n /* -------------------- Progress bar -------------------- */\n}\n.hsg-stage .hsg-progress {\n position: absolute;\n left: 50%;\n bottom: 2.5rem;\n transform: translateX(-50%);\n width: clamp(180px, 28vw, 360px);\n height: 2px;\n background-color: rgba(255, 255, 255, 0.2);\n z-index: 4;\n overflow: hidden;\n}\n.hsg-stage .hsg-progress__bar {\n display: block;\n width: 100%;\n height: 100%;\n background-color: #fefefe;\n transform-origin: 0 50%;\n transform: scaleX(0);\n transition: transform 0.08s linear;\n}\n.hsg-stage {\n /* -------------------- Counter --------------------\n Centered horizontally and parked 30px above the progress bar.\n The bottom offset is `progress.bottom + progress.height + 30px`,\n so keep the responsive overrides in lock-step with .hsg-progress. */\n}\n.hsg-stage .hsg-counter {\n position: absolute;\n left: 50%;\n bottom: calc(2.5rem + 2px + 30px);\n transform: translateX(-50%);\n display: inline-flex;\n align-items: baseline;\n gap: 0.35rem;\n font-size: 0.85rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n color: #fefefe;\n z-index: 4;\n}\n.hsg-stage .hsg-counter__current {\n font-size: 1.5rem;\n line-height: 1;\n}\n.hsg-stage .hsg-counter__sep,\n.hsg-stage .hsg-counter__total {\n opacity: 0.6;\n}\n.hsg-stage {\n /* -------------------- Responsive -------------------- */\n}\n@media (max-width: 991px) {\n .hsg-stage .hsg-slide {\n width: 56vw;\n height: 70vh;\n min-width: 280px;\n }\n .hsg-stage .hsg-slide__body {\n padding: 1.75rem 1.5rem 1.5rem;\n }\n .hsg-stage .hsg-counter {\n bottom: calc(1.75rem + 2px + 30px);\n }\n .hsg-stage .hsg-progress {\n bottom: 1.75rem;\n }\n}\n@media (max-width: 575px) {\n .hsg-stage .hsg-slide {\n width: 78vw;\n height: 64vh;\n max-height: 560px;\n min-width: 0;\n }\n .hsg-stage .hsg-slide__body {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n .hsg-stage .hsg-slide__title {\n font-size: clamp(1rem, 4.5vw, 1.5rem);\n max-width: 6ch;\n }\n .hsg-stage .hsg-slide__tags {\n font-size: 0.75rem;\n gap: 0.5rem;\n }\n .hsg-stage .hsg-progress {\n bottom: 1.25rem;\n width: 50vw;\n }\n .hsg-stage .hsg-counter {\n bottom: calc(1.25rem + 2px + 30px);\n font-size: 0.7rem;\n }\n .hsg-stage .hsg-counter__current {\n font-size: 1.15rem;\n }\n}\n.hsg-stage {\n /* Respect users who prefer reduced motion - keep layout, drop the\n decorative parallax. ScrollTrigger still drives the track. */\n}\n@media (prefers-reduced-motion: reduce) {\n .hsg-stage .hsg-bg,\n .hsg-stage .hsg-slide,\n .hsg-stage .hsg-slide__img,\n .hsg-stage .hsg-slide__title,\n .hsg-stage .hsg-slide__tags,\n .hsg-stage .hsg-slide__body {\n transition: none;\n }\n .hsg-stage .hsg-bg {\n transform: none;\n }\n .hsg-stage .hsg-slide {\n translate: 0 0;\n scale: 1;\n }\n .hsg-stage .hsg-slide__img {\n scale: 1;\n translate: 0 0;\n }\n .hsg-stage .hsg-slide__title,\n .hsg-stage .hsg-slide__tags {\n translate: 0 0;\n }\n .hsg-stage .hsg-slide__body {\n opacity: 1;\n }\n}\n\n/*----------------------------------------*/\n/* Portfolio Details 3 — Editorial Split\n/*----------------------------------------*/\n/* JS injects `.anim-zoomin-wrap` around every `.anim-zoomin` ![]()
.\n Our image hosts position the ![]()
as absolute fill inside an\n aspect-ratio box — make the injected wrap fill the same box. */\n.sec-1-portfolio-details-3__portrait .anim-zoomin-wrap,\n.sec-3-portfolio-details-3__cell .anim-zoomin-wrap,\n.sec-5-portfolio-details-3__media .anim-zoomin-wrap,\n.sec-7-portfolio-details-3__media .anim-zoomin-wrap,\n.sec-8-portfolio-details-3__thumb .anim-zoomin-wrap {\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n/* ---------- shared plus glyph ---------- */\n.sec-8-portfolio-details-3__plus, .sec-6-portfolio-details-3__plus, .sec-4-portfolio-details-3__plus, .sec-3-portfolio-details-3__plus, .sec-2-portfolio-details-3__plus {\n width: 14px;\n height: 14px;\n position: relative;\n display: inline-block;\n}\n.sec-8-portfolio-details-3__plus::before, .sec-6-portfolio-details-3__plus::before, .sec-4-portfolio-details-3__plus::before, .sec-3-portfolio-details-3__plus::before, .sec-2-portfolio-details-3__plus::before, .sec-8-portfolio-details-3__plus::after, .sec-6-portfolio-details-3__plus::after, .sec-4-portfolio-details-3__plus::after, .sec-3-portfolio-details-3__plus::after, .sec-2-portfolio-details-3__plus::after {\n content: \"\";\n position: absolute;\n background: currentColor;\n}\n.sec-8-portfolio-details-3__plus::before, .sec-6-portfolio-details-3__plus::before, .sec-4-portfolio-details-3__plus::before, .sec-3-portfolio-details-3__plus::before, .sec-2-portfolio-details-3__plus::before {\n top: 50%;\n left: 0;\n width: 100%;\n height: 1.5px;\n transform: translateY(-50%);\n}\n.sec-8-portfolio-details-3__plus::after, .sec-6-portfolio-details-3__plus::after, .sec-4-portfolio-details-3__plus::after, .sec-3-portfolio-details-3__plus::after, .sec-2-portfolio-details-3__plus::after {\n left: 50%;\n top: 0;\n width: 1.5px;\n height: 100%;\n transform: translateX(-50%);\n}\n\n/* ===========================================\n SEC 1 — Hero split\n =========================================== */\n.sec-1-portfolio-details-3 {\n background-color: var(--at-neutral-0);\n}\n.sec-1-portfolio-details-3__title {\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n.sec-1-portfolio-details-3__title sup {\n margin-left: 4px;\n line-height: 1;\n}\n.sec-1-portfolio-details-3__tagline {\n letter-spacing: -0.04em;\n}\n.sec-1-portfolio-details-3__demo {\n padding: 14px 26px;\n color: var(--at-neutral-0);\n transition: transform 0.35s ease, background-color 0.35s ease;\n}\n.sec-1-portfolio-details-3__demo svg {\n transition: transform 0.35s ease;\n}\n.sec-1-portfolio-details-3__demo:hover {\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n transform: translateY(-2px);\n}\n.sec-1-portfolio-details-3__demo:hover svg {\n transform: translate(3px, -3px);\n}\n.sec-1-portfolio-details-3__portrait {\n position: relative;\n width: 100%;\n aspect-ratio: 4/5;\n overflow: hidden;\n border-radius: 8px;\n background-color: var(--at-neutral-100);\n}\n.sec-1-portfolio-details-3__portrait img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n}\n.sec-1-portfolio-details-3__portrait:hover img {\n transform: scale(1.04);\n}\n.sec-1-portfolio-details-3__meta .col-md-3,\n.sec-1-portfolio-details-3__meta .col-sm-6 {\n position: relative;\n}\n@media only screen and (min-width: 1200px) and (max-width: 1399px) {\n .sec-1-portfolio-details-3__portrait {\n aspect-ratio: 4/5;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-1-portfolio-details-3__portrait {\n aspect-ratio: 4/5;\n max-width: 480px;\n margin-left: auto;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-portfolio-details-3 {\n padding-top: 100px;\n padding-bottom: 80px;\n }\n .sec-1-portfolio-details-3__portrait {\n aspect-ratio: 16/11;\n margin-top: 30px;\n }\n .sec-1-portfolio-details-3__tagline {\n margin-bottom: 30px !important;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-1-portfolio-details-3 {\n padding-top: 90px;\n padding-bottom: 70px;\n }\n .sec-1-portfolio-details-3__portrait {\n aspect-ratio: 16/11;\n margin-top: 20px;\n }\n .sec-1-portfolio-details-3__demo {\n padding: 12px 22px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-1-portfolio-details-3 {\n padding-top: 80px;\n padding-bottom: 60px;\n }\n .sec-1-portfolio-details-3__title {\n font-size: 54px !important;\n margin-bottom: 16px !important;\n }\n .sec-1-portfolio-details-3__tagline {\n margin-bottom: 24px !important;\n }\n .sec-1-portfolio-details-3__portrait {\n aspect-ratio: 4/5;\n margin-top: 16px;\n }\n .sec-1-portfolio-details-3__demo {\n padding: 12px 20px;\n }\n .sec-1-portfolio-details-3__demo span {\n font-size: 14px;\n }\n .sec-1-portfolio-details-3__meta {\n margin-top: 40px !important;\n padding-top: 30px !important;\n }\n}\n\n/* ===========================================\n SEC 2 — 3-col Intro\n =========================================== */\n.sec-2-portfolio-details-3 {\n background-color: var(--at-neutral-0);\n}\n.sec-2-portfolio-details-3__plus {\n color: var(--at-neutral-950);\n}\n.sec-2-portfolio-details-3__headline {\n letter-spacing: -0.04em;\n line-height: 1.15;\n}\n.sec-2-portfolio-details-3__paragraph {\n line-height: 1.6;\n letter-spacing: -0.02em;\n}\n.sec-2-portfolio-details-3__stats {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n.sec-2-portfolio-details-3__stat {\n padding-bottom: 22px;\n border-bottom: 1px solid var(--at-neutral-100);\n}\n.sec-2-portfolio-details-3__stat:last-child {\n border-bottom: 0;\n padding-bottom: 0;\n}\n.sec-2-portfolio-details-3__stat-number {\n font-size: 48px;\n letter-spacing: -0.05em;\n margin-bottom: 8px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-2-portfolio-details-3__stat-number {\n font-size: 40px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-2-portfolio-details-3 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-2-portfolio-details-3__stat-number {\n font-size: 40px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-2-portfolio-details-3 {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n .sec-2-portfolio-details-3__stat-number {\n font-size: 38px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-2-portfolio-details-3 {\n padding-top: 40px;\n padding-bottom: 40px;\n }\n .sec-2-portfolio-details-3__headline {\n font-size: 24px !important;\n }\n .sec-2-portfolio-details-3__stat-number {\n font-size: 36px;\n }\n}\n\n/* ===========================================\n SEC 3 — Bento Gallery\n =========================================== */\n.sec-3-portfolio-details-3 {\n background-color: var(--at-neutral-0);\n}\n.sec-3-portfolio-details-3__plus {\n color: var(--at-neutral-950);\n}\n.sec-3-portfolio-details-3__bento {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: repeat(2, minmax(0, 1fr));\n gap: 16px;\n aspect-ratio: 16/9;\n}\n.sec-3-portfolio-details-3__cell {\n position: relative;\n margin: 0;\n overflow: hidden;\n border-radius: 8px;\n background-color: var(--at-neutral-100);\n}\n.sec-3-portfolio-details-3__cell img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n}\n.sec-3-portfolio-details-3__cell:hover img {\n transform: scale(1.05);\n}\n.sec-3-portfolio-details-3__cell--large {\n grid-column: 1/span 2;\n grid-row: 1/span 2;\n}\n.sec-3-portfolio-details-3__cell--small {\n grid-column: span 1;\n grid-row: span 1;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-3-portfolio-details-3 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-3-portfolio-details-3__bento {\n aspect-ratio: 16/11;\n gap: 12px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-3-portfolio-details-3 {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n .sec-3-portfolio-details-3__bento {\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(3, minmax(0, 1fr));\n aspect-ratio: 4/5;\n gap: 12px;\n }\n .sec-3-portfolio-details-3__cell--large {\n grid-column: 1/span 2;\n grid-row: 1/span 1;\n }\n .sec-3-portfolio-details-3__cell--small {\n grid-column: span 1;\n grid-row: span 1;\n }\n}\n@media (max-width: 574.98px) {\n .sec-3-portfolio-details-3 {\n padding-top: 40px;\n padding-bottom: 40px;\n }\n .sec-3-portfolio-details-3__bento {\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(3, minmax(0, 1fr));\n aspect-ratio: 3/5;\n gap: 10px;\n }\n .sec-3-portfolio-details-3__cell--large {\n grid-column: 1/span 2;\n grid-row: 1/span 1;\n }\n}\n\n/* ===========================================\n SEC 4 — Process timeline (dark)\n =========================================== */\n.sec-4-portfolio-details-3 {\n background-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n}\n.sec-4-portfolio-details-3__plus {\n color: var(--at-neutral-0);\n}\n.sec-4-portfolio-details-3__title {\n letter-spacing: -0.04em;\n line-height: 1.15;\n}\n.sec-4-portfolio-details-3__steps {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n position: relative;\n}\n.sec-4-portfolio-details-3__steps::before {\n content: \"\";\n position: absolute;\n top: 5px;\n left: 0;\n right: 0;\n height: 1px;\n background: var(--at-neutral-500);\n opacity: 0.5;\n}\n.sec-4-portfolio-details-3__step {\n position: relative;\n padding-top: 36px;\n}\n.sec-4-portfolio-details-3__marker {\n position: absolute;\n top: 0;\n left: 0;\n}\n.sec-4-portfolio-details-3__dot {\n display: block;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: var(--at-neutral-0);\n}\n.sec-4-portfolio-details-3__num {\n letter-spacing: -0.02em;\n margin-bottom: 16px;\n opacity: 0.8;\n}\n.sec-4-portfolio-details-3__heading {\n letter-spacing: -0.04em;\n margin-bottom: 12px;\n}\n.sec-4-portfolio-details-3__desc {\n color: var(--at-neutral-100);\n line-height: 1.55;\n letter-spacing: -0.02em;\n opacity: 0.85;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-portfolio-details-3 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-4-portfolio-details-3__steps {\n grid-template-columns: repeat(2, 1fr);\n row-gap: 40px;\n }\n .sec-4-portfolio-details-3__steps::before {\n display: none;\n }\n .sec-4-portfolio-details-3__step {\n padding-top: 28px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-4-portfolio-details-3 {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n .sec-4-portfolio-details-3__steps {\n grid-template-columns: repeat(2, 1fr);\n row-gap: 36px;\n gap: 18px;\n }\n .sec-4-portfolio-details-3__steps::before {\n display: none;\n }\n}\n@media (max-width: 574.98px) {\n .sec-4-portfolio-details-3 {\n padding-top: 40px;\n padding-bottom: 40px;\n }\n .sec-4-portfolio-details-3__title {\n font-size: 26px !important;\n }\n .sec-4-portfolio-details-3__steps {\n grid-template-columns: 1fr;\n row-gap: 32px;\n }\n .sec-4-portfolio-details-3__steps::before {\n display: none;\n }\n}\n\n/* ===========================================\n SEC 5 — Quote overlay\n =========================================== */\n.sec-5-portfolio-details-3 {\n position: relative;\n min-height: 700px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--at-neutral-0);\n}\n.sec-5-portfolio-details-3__media {\n position: absolute;\n inset: 0;\n overflow: hidden;\n z-index: 0;\n}\n.sec-5-portfolio-details-3__media img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.sec-5-portfolio-details-3__veil {\n position: absolute;\n inset: 0;\n background: rgba(15, 15, 15, 0.55);\n}\n.sec-5-portfolio-details-3__content {\n position: relative;\n z-index: 1;\n width: 100%;\n padding: 120px 0;\n}\n.sec-5-portfolio-details-3__mark {\n font-family: var(--at-ff-heading);\n font-size: 120px;\n line-height: 1;\n display: inline-block;\n opacity: 0.85;\n margin-bottom: -20px;\n}\n.sec-5-portfolio-details-3__quote {\n font-size: 36px;\n line-height: 1.4;\n letter-spacing: -0.03em;\n font-style: normal;\n padding: 0;\n border: 0;\n}\n.sec-5-portfolio-details-3__author {\n letter-spacing: -0.02em;\n}\n.sec-5-portfolio-details-3__role {\n color: var(--at-neutral-100);\n opacity: 0.8;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-5-portfolio-details-3 {\n min-height: 600px;\n }\n .sec-5-portfolio-details-3__quote {\n font-size: 30px;\n }\n .sec-5-portfolio-details-3__mark {\n font-size: 100px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-5-portfolio-details-3 {\n min-height: 520px;\n }\n .sec-5-portfolio-details-3__content {\n padding: 90px 0;\n }\n .sec-5-portfolio-details-3__quote {\n font-size: 26px;\n }\n .sec-5-portfolio-details-3__mark {\n font-size: 88px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-5-portfolio-details-3 {\n min-height: 460px;\n }\n .sec-5-portfolio-details-3__content {\n padding: 70px 0;\n }\n .sec-5-portfolio-details-3__quote {\n font-size: 22px;\n }\n .sec-5-portfolio-details-3__mark {\n font-size: 72px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-5-portfolio-details-3 {\n min-height: 420px;\n }\n .sec-5-portfolio-details-3__content {\n padding: 60px 0;\n }\n .sec-5-portfolio-details-3__quote {\n font-size: 20px;\n line-height: 1.5;\n }\n .sec-5-portfolio-details-3__mark {\n font-size: 60px;\n margin-bottom: -10px;\n }\n}\n\n/* ===========================================\n SEC 6 — Solution + Outcome (2-col w/ divider)\n =========================================== */\n.sec-6-portfolio-details-3 {\n background-color: var(--at-neutral-0);\n}\n.sec-6-portfolio-details-3__plus {\n color: var(--at-neutral-950);\n}\n.sec-6-portfolio-details-3__col--right {\n position: relative;\n}\n.sec-6-portfolio-details-3__pair {\n position: relative;\n}\n.sec-6-portfolio-details-3__pair::before {\n content: \"\";\n position: absolute;\n top: 12px;\n bottom: 12px;\n left: 50%;\n width: 1px;\n background: var(--at-neutral-100);\n transform: translateX(-50%);\n}\n.sec-6-portfolio-details-3__list {\n list-style: none;\n}\n.sec-6-portfolio-details-3__list li {\n position: relative;\n padding-left: 22px;\n padding-top: 10px;\n padding-bottom: 10px;\n color: var(--at-neutral-900);\n font-size: var(--at-fz-font-md);\n border-top: 1px solid var(--at-neutral-100);\n}\n.sec-6-portfolio-details-3__list li:last-child {\n border-bottom: 1px solid var(--at-neutral-100);\n}\n.sec-6-portfolio-details-3__list li::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 50%;\n width: 8px;\n height: 8px;\n background: var(--at-neutral-950);\n border-radius: 50%;\n transform: translateY(-50%);\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-6-portfolio-details-3__pair::before {\n top: 0;\n bottom: 0;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-6-portfolio-details-3 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-6-portfolio-details-3__pair::before {\n display: none;\n }\n .sec-6-portfolio-details-3__col {\n padding-bottom: 30px;\n }\n .sec-6-portfolio-details-3__col + .sec-6-portfolio-details-3__col--right {\n border-top: 1px solid var(--at-neutral-100);\n padding-top: 40px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-6-portfolio-details-3 {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n .sec-6-portfolio-details-3__pair::before {\n display: none;\n }\n .sec-6-portfolio-details-3__col + .sec-6-portfolio-details-3__col--right {\n border-top: 1px solid var(--at-neutral-100);\n padding-top: 40px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-6-portfolio-details-3 {\n padding-top: 40px;\n padding-bottom: 40px;\n }\n .sec-6-portfolio-details-3__pair::before {\n display: none;\n }\n .sec-6-portfolio-details-3__col + .sec-6-portfolio-details-3__col--right {\n border-top: 1px solid var(--at-neutral-100);\n padding-top: 30px;\n margin-top: 20px;\n }\n .sec-6-portfolio-details-3 h3 {\n font-size: 24px !important;\n }\n}\n\n/* ===========================================\n SEC 7 — Big image strip\n =========================================== */\n.sec-7-portfolio-details-3__media {\n position: relative;\n width: 100%;\n aspect-ratio: 16/7;\n overflow: hidden;\n}\n.sec-7-portfolio-details-3__media img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-7-portfolio-details-3__media {\n aspect-ratio: 16/10;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-7-portfolio-details-3__media {\n aspect-ratio: 4/3;\n }\n}\n@media (max-width: 574.98px) {\n .sec-7-portfolio-details-3__media {\n aspect-ratio: 4/3;\n }\n}\n\n/* ===========================================\n SEC 8 — Related projects (2 large cards)\n =========================================== */\n.sec-8-portfolio-details-3 {\n background-color: var(--at-neutral-0);\n}\n.sec-8-portfolio-details-3__plus {\n color: var(--at-neutral-950);\n}\n.sec-8-portfolio-details-3__title {\n letter-spacing: -0.04em;\n line-height: 1.15;\n}\n.sec-8-portfolio-details-3__card {\n text-decoration: none;\n color: inherit;\n transition: transform 0.4s ease;\n}\n.sec-8-portfolio-details-3__card:hover {\n color: inherit;\n transform: translateY(-4px);\n}\n.sec-8-portfolio-details-3__card:hover .sec-8-portfolio-details-3__thumb img {\n transform: scale(1.04);\n}\n.sec-8-portfolio-details-3__card:hover .sec-8-portfolio-details-3__arrow {\n transform: translate(3px, -3px);\n}\n.sec-8-portfolio-details-3__thumb {\n position: relative;\n margin: 0 0 26px 0;\n width: 100%;\n aspect-ratio: 4/3;\n overflow: hidden;\n border-radius: 8px;\n background-color: var(--at-neutral-100);\n}\n.sec-8-portfolio-details-3__thumb img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n}\n.sec-8-portfolio-details-3__meta {\n display: flex;\n flex-direction: column;\n gap: 14px;\n}\n.sec-8-portfolio-details-3__tag {\n align-self: flex-start;\n padding: 8px 16px;\n background: var(--at-neutral-50);\n border-radius: 25px;\n color: var(--at-neutral-900);\n letter-spacing: 0.05em;\n}\n.sec-8-portfolio-details-3__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\n.sec-8-portfolio-details-3__name {\n color: var(--at-neutral-950);\n}\n.sec-8-portfolio-details-3__arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n transition: transform 0.35s ease;\n flex-shrink: 0;\n}\n.sec-8-portfolio-details-3__desc {\n line-height: 1.55;\n letter-spacing: -0.02em;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-8-portfolio-details-3 {\n padding-top: 60px;\n padding-bottom: 100px;\n }\n .sec-8-portfolio-details-3__thumb {\n aspect-ratio: 5/4;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-8-portfolio-details-3 {\n padding-top: 50px;\n padding-bottom: 80px;\n }\n .sec-8-portfolio-details-3__thumb {\n aspect-ratio: 4/3;\n margin-bottom: 20px;\n }\n .sec-8-portfolio-details-3__arrow {\n width: 40px;\n height: 40px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-8-portfolio-details-3 {\n padding-top: 40px;\n padding-bottom: 70px;\n }\n .sec-8-portfolio-details-3__title {\n font-size: 24px !important;\n }\n .sec-8-portfolio-details-3__thumb {\n aspect-ratio: 4/3;\n margin-bottom: 18px;\n }\n .sec-8-portfolio-details-3__name {\n font-size: 26px !important;\n }\n .sec-8-portfolio-details-3__arrow {\n width: 38px;\n height: 38px;\n }\n .sec-8-portfolio-details-3__arrow svg {\n width: 18px;\n height: 18px;\n }\n}\n\n/*----------------------------------------*/\n/* Portfolio Details 4 — Sticky Sidebar + Chapters\n/* Brand accent: var(--at-theme-primary) (#F0460E)\n/*----------------------------------------*/\n/* JS injects `.anim-zoomin-wrap` around every `.anim-zoomin` ![]()
.\n Image hosts use absolute-fill img inside aspect-ratio box. */\n.sec-2-portfolio-details-4__inline-fig .anim-zoomin-wrap,\n.sec-4-portfolio-details-4__cell .anim-zoomin-wrap,\n.sec-5-portfolio-details-4__media .anim-zoomin-wrap {\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n/* =========================================================\n SEC 1 — Compact title block\n ========================================================= */\n.sec-1-portfolio-details-4 {\n background-color: var(--at-neutral-0);\n}\n.sec-1-portfolio-details-4__crumbs {\n letter-spacing: 0.1em;\n}\n.sec-1-portfolio-details-4__crumbs span {\n margin: 0 8px;\n color: var(--at-neutral-300);\n}\n.sec-1-portfolio-details-4__title {\n letter-spacing: -0.05em;\n}\n.sec-1-portfolio-details-4__title sup {\n margin-left: 4px;\n line-height: 1;\n}\n.sec-1-portfolio-details-4__tagline {\n letter-spacing: -0.03em;\n line-height: 1.35;\n}\n.sec-1-portfolio-details-4__tags {\n gap: 8px;\n}\n.sec-1-portfolio-details-4__tag {\n padding: 8px 18px;\n background: var(--at-neutral-50);\n color: var(--at-neutral-900);\n border-radius: 25px;\n letter-spacing: 0.05em;\n}\n.sec-1-portfolio-details-4__demo {\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: gap 0.3s ease;\n}\n.sec-1-portfolio-details-4__demo span {\n transition: transform 0.3s ease;\n}\n.sec-1-portfolio-details-4__demo:hover {\n color: var(--at-theme-primary);\n gap: 12px;\n}\n.sec-1-portfolio-details-4__demo:hover span {\n transform: translate(3px, -3px);\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-portfolio-details-4 {\n padding-top: 100px;\n padding-bottom: 40px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-portfolio-details-4 {\n padding-top: 90px;\n padding-bottom: 30px;\n }\n .sec-1-portfolio-details-4__title {\n margin-bottom: 18px !important;\n }\n .sec-1-portfolio-details-4__tagline {\n margin-bottom: 30px;\n }\n .sec-1-portfolio-details-4__crumbs span {\n margin: 0 6px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-1-portfolio-details-4__title {\n font-size: 54px !important;\n }\n}\n\n/* =========================================================\n SEC 2 — Sticky sidebar + chapters\n ========================================================= */\n.sec-2-portfolio-details-4 {\n background-color: var(--at-neutral-0);\n}\n.sec-2-portfolio-details-4__sidebar-col {\n position: relative;\n}\n.sec-2-portfolio-details-4__sidebar {\n position: sticky;\n top: 120px;\n background: var(--at-neutral-50);\n border-radius: 8px;\n padding: 32px;\n}\n.sec-2-portfolio-details-4__sidebar-eyebrow {\n letter-spacing: 0.1em;\n margin-bottom: 16px;\n}\n.sec-2-portfolio-details-4__meta {\n padding-top: 0;\n}\n.sec-2-portfolio-details-4__meta-row {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: 16px;\n padding: 14px 0;\n border-top: 1px solid var(--at-neutral-100);\n}\n.sec-2-portfolio-details-4__meta-row dt {\n margin: 0;\n flex-shrink: 0;\n}\n.sec-2-portfolio-details-4__meta-row dd {\n text-align: right;\n letter-spacing: -0.02em;\n}\n.sec-2-portfolio-details-4__meta-row:last-child {\n border-bottom: 1px solid var(--at-neutral-100);\n}\n.sec-2-portfolio-details-4__services li {\n padding: 6px 0;\n color: var(--at-neutral-900);\n font-size: var(--at-fz-font-md);\n letter-spacing: -0.02em;\n}\n.sec-2-portfolio-details-4__services li::before {\n content: \"— \";\n color: var(--at-theme-primary);\n margin-right: 4px;\n}\n.sec-2-portfolio-details-4__cta {\n padding: 14px 22px;\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n border-radius: 23px;\n text-decoration: none;\n transition: background-color 0.3s ease, transform 0.3s ease;\n}\n.sec-2-portfolio-details-4__cta span {\n transition: transform 0.3s ease;\n}\n.sec-2-portfolio-details-4__cta:hover {\n background: var(--at-theme-primary);\n color: var(--at-neutral-0);\n transform: translateY(-2px);\n}\n.sec-2-portfolio-details-4__cta:hover span {\n transform: translate(3px, -3px);\n}\n.sec-2-portfolio-details-4__content-col {\n padding-left: 60px;\n}\n.sec-2-portfolio-details-4__chapter {\n padding-bottom: 70px;\n margin-bottom: 70px;\n border-bottom: 1px solid var(--at-neutral-100);\n}\n.sec-2-portfolio-details-4__chapter:last-child {\n padding-bottom: 0;\n margin-bottom: 0;\n border-bottom: 0;\n}\n.sec-2-portfolio-details-4__chapter-head {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-bottom: 16px;\n letter-spacing: 0.1em;\n}\n.sec-2-portfolio-details-4__chapter-num {\n color: var(--at-theme-primary);\n}\n.sec-2-portfolio-details-4__chapter-title {\n font-size: 44px;\n letter-spacing: -0.04em;\n line-height: 1.15;\n margin-bottom: 24px;\n}\n.sec-2-portfolio-details-4__chapter-body {\n line-height: 1.65;\n letter-spacing: -0.02em;\n margin-bottom: 40px;\n}\n.sec-2-portfolio-details-4 {\n /* Inline image grid (chapter 01) */\n}\n.sec-2-portfolio-details-4__inline-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n}\n.sec-2-portfolio-details-4__inline-fig {\n position: relative;\n margin: 0;\n aspect-ratio: 7/5;\n overflow: hidden;\n border-radius: 6px;\n background: var(--at-neutral-100);\n}\n.sec-2-portfolio-details-4__inline-fig img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n}\n.sec-2-portfolio-details-4__inline-fig:hover img {\n transform: scale(1.04);\n}\n.sec-2-portfolio-details-4 {\n /* Pull-quote (chapter 02) — brand-1 left bar */\n}\n.sec-2-portfolio-details-4__pull-quote {\n position: relative;\n margin: 0;\n padding: 10px 0 10px 32px;\n border-left: 4px solid var(--at-theme-primary);\n}\n.sec-2-portfolio-details-4__pull-quote p {\n letter-spacing: -0.03em;\n line-height: 1.4;\n}\n.sec-2-portfolio-details-4 {\n /* Steps (chapter 03) */\n}\n.sec-2-portfolio-details-4__steps {\n margin: 0;\n}\n.sec-2-portfolio-details-4__step {\n display: grid;\n grid-template-columns: 80px 1fr 2fr;\n gap: 20px;\n align-items: baseline;\n padding: 22px 0;\n border-top: 1px solid var(--at-neutral-100);\n}\n.sec-2-portfolio-details-4__step:last-child {\n border-bottom: 1px solid var(--at-neutral-100);\n}\n.sec-2-portfolio-details-4__step-num {\n color: var(--at-theme-primary);\n letter-spacing: -0.02em;\n}\n.sec-2-portfolio-details-4__step-title {\n letter-spacing: -0.03em;\n}\n.sec-2-portfolio-details-4__step-desc {\n line-height: 1.55;\n letter-spacing: -0.02em;\n}\n.sec-2-portfolio-details-4 {\n /* Stats (chapter 04) */\n}\n.sec-2-portfolio-details-4__stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n}\n.sec-2-portfolio-details-4__stat {\n padding-top: 20px;\n border-top: 1px solid var(--at-neutral-950);\n}\n.sec-2-portfolio-details-4__stat-num {\n font-size: 48px;\n letter-spacing: -0.05em;\n margin-bottom: 8px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-2-portfolio-details-4__content-col {\n padding-left: 40px;\n }\n .sec-2-portfolio-details-4__chapter-title {\n font-size: 38px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-2-portfolio-details-4 {\n padding-top: 70px;\n padding-bottom: 70px;\n }\n .sec-2-portfolio-details-4__sidebar {\n position: static;\n top: auto;\n margin-bottom: 50px;\n }\n .sec-2-portfolio-details-4__content-col {\n padding-left: 12px;\n }\n .sec-2-portfolio-details-4__chapter-title {\n font-size: 34px;\n }\n .sec-2-portfolio-details-4__step {\n grid-template-columns: 60px 1fr;\n row-gap: 8px;\n column-gap: 16px;\n }\n .sec-2-portfolio-details-4__step-desc {\n grid-column: 1/-1;\n padding-left: 76px;\n }\n .sec-2-portfolio-details-4__stats {\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n }\n .sec-2-portfolio-details-4__stat-num {\n font-size: 36px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-portfolio-details-4 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-2-portfolio-details-4__sidebar {\n position: static;\n padding: 24px;\n margin-bottom: 40px;\n }\n .sec-2-portfolio-details-4__content-col {\n padding-left: 12px;\n }\n .sec-2-portfolio-details-4__chapter {\n padding-bottom: 50px;\n margin-bottom: 50px;\n }\n .sec-2-portfolio-details-4__chapter-title {\n font-size: 28px;\n }\n .sec-2-portfolio-details-4__chapter-body {\n margin-bottom: 30px;\n }\n .sec-2-portfolio-details-4__inline-grid {\n grid-template-columns: 1fr;\n gap: 12px;\n }\n .sec-2-portfolio-details-4__inline-fig {\n aspect-ratio: 4/3;\n }\n .sec-2-portfolio-details-4__pull-quote {\n padding: 8px 0 8px 20px;\n }\n .sec-2-portfolio-details-4__pull-quote p {\n font-size: 20px !important;\n }\n .sec-2-portfolio-details-4__step {\n grid-template-columns: 60px 1fr;\n row-gap: 8px;\n }\n .sec-2-portfolio-details-4__step-desc {\n grid-column: 1/-1;\n padding-left: 76px;\n }\n .sec-2-portfolio-details-4__stats {\n grid-template-columns: 1fr;\n }\n .sec-2-portfolio-details-4__stat-num {\n font-size: 36px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-2-portfolio-details-4__chapter-head {\n gap: 8px;\n }\n .sec-2-portfolio-details-4__chapter-title {\n font-size: 24px;\n }\n}\n\n/* =========================================================\n SEC 3 — Pull-quote callout (centered)\n ========================================================= */\n.sec-3-portfolio-details-4 {\n background-color: var(--at-neutral-50);\n}\n.sec-3-portfolio-details-4__mark {\n display: inline-block;\n font-family: var(--at-ff-heading);\n font-size: 180px;\n line-height: 0.8;\n color: var(--at-theme-primary);\n margin-bottom: -10px;\n letter-spacing: -0.05em;\n}\n.sec-3-portfolio-details-4__quote {\n font-size: 34px;\n line-height: 1.4;\n letter-spacing: -0.03em;\n margin-top: 30px;\n padding: 0;\n border: 0;\n}\n.sec-3-portfolio-details-4__divider {\n width: 60px;\n height: 1px;\n background: var(--at-neutral-300);\n}\n.sec-3-portfolio-details-4__author {\n letter-spacing: -0.02em;\n}\n.sec-3-portfolio-details-4__role {\n letter-spacing: 0.1em;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-3-portfolio-details-4 {\n padding-top: 70px;\n padding-bottom: 70px;\n }\n .sec-3-portfolio-details-4__mark {\n font-size: 140px;\n }\n .sec-3-portfolio-details-4__quote {\n font-size: 28px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-3-portfolio-details-4 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-3-portfolio-details-4__mark {\n font-size: 120px;\n }\n .sec-3-portfolio-details-4__quote {\n font-size: 22px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-3-portfolio-details-4__mark {\n font-size: 100px;\n }\n .sec-3-portfolio-details-4__quote {\n font-size: 20px;\n }\n}\n\n/* =========================================================\n SEC 4 — Visual showcase 3 rows\n ========================================================= */\n.sec-4-portfolio-details-4 {\n background-color: var(--at-neutral-0);\n}\n.sec-4-portfolio-details-4__row {\n display: grid;\n gap: 20px;\n margin-bottom: 20px;\n}\n.sec-4-portfolio-details-4__row:last-child {\n margin-bottom: 0;\n}\n.sec-4-portfolio-details-4__row--split {\n grid-template-columns: 6fr 4fr;\n}\n.sec-4-portfolio-details-4__row--full {\n grid-template-columns: 1fr;\n}\n.sec-4-portfolio-details-4__row--triple {\n grid-template-columns: repeat(3, 1fr);\n}\n.sec-4-portfolio-details-4__cell {\n position: relative;\n margin: 0;\n aspect-ratio: 16/11;\n overflow: hidden;\n border-radius: 6px;\n background: var(--at-neutral-100);\n}\n.sec-4-portfolio-details-4__cell img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n}\n.sec-4-portfolio-details-4__cell:hover img {\n transform: scale(1.05);\n}\n.sec-4-portfolio-details-4__cell--wide {\n aspect-ratio: 13/9;\n}\n.sec-4-portfolio-details-4__cell--narrow {\n aspect-ratio: 13/9;\n}\n.sec-4-portfolio-details-4__cell--full {\n aspect-ratio: 22/7;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-portfolio-details-4 {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n .sec-4-portfolio-details-4__row {\n gap: 14px;\n margin-bottom: 14px;\n }\n .sec-4-portfolio-details-4__cell--full {\n aspect-ratio: 16/7;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px) {\n .sec-4-portfolio-details-4 {\n padding-top: 40px;\n padding-bottom: 40px;\n }\n .sec-4-portfolio-details-4__row {\n gap: 12px;\n margin-bottom: 12px;\n }\n .sec-4-portfolio-details-4__row--split, .sec-4-portfolio-details-4__row--triple {\n grid-template-columns: 1fr 1fr;\n }\n .sec-4-portfolio-details-4__cell--full {\n aspect-ratio: 4/3;\n }\n}\n@media (max-width: 574.98px) {\n .sec-4-portfolio-details-4 {\n padding-top: 40px;\n padding-bottom: 40px;\n }\n .sec-4-portfolio-details-4__row {\n gap: 10px;\n margin-bottom: 10px;\n }\n .sec-4-portfolio-details-4__row--split, .sec-4-portfolio-details-4__row--triple {\n grid-template-columns: 1fr;\n }\n .sec-4-portfolio-details-4__cell--full {\n aspect-ratio: 4/3;\n }\n}\n\n/* =========================================================\n SEC 5 — Next project banner\n ========================================================= */\n.sec-5-portfolio-details-4 {\n position: relative;\n}\n.sec-5-portfolio-details-4__link {\n position: relative;\n text-decoration: none;\n color: var(--at-neutral-0);\n display: block;\n}\n.sec-5-portfolio-details-4__link:hover {\n color: var(--at-neutral-0);\n}\n.sec-5-portfolio-details-4__link:hover .sec-5-portfolio-details-4__media img {\n transform: scale(1.04);\n}\n.sec-5-portfolio-details-4__link:hover .sec-5-portfolio-details-4__disk-inner {\n transform: scale(1.08);\n}\n.sec-5-portfolio-details-4__media {\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n.sec-5-portfolio-details-4__media img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n}\n.sec-5-portfolio-details-4__veil {\n position: absolute;\n inset: 0;\n background: rgba(15, 15, 15, 0.68);\n}\n.sec-5-portfolio-details-4__content {\n position: relative;\n z-index: 1;\n padding: 140px 0;\n}\n.sec-5-portfolio-details-4__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.15em;\n margin-bottom: 30px;\n}\n.sec-5-portfolio-details-4__name {\n font-size: 180px;\n letter-spacing: -0.05em;\n line-height: 0.95;\n color: var(--at-neutral-0);\n}\n.sec-5-portfolio-details-4__tagline {\n color: var(--at-neutral-100);\n letter-spacing: -0.03em;\n}\n.sec-5-portfolio-details-4__meta {\n color: var(--at-neutral-0);\n letter-spacing: 0.15em;\n opacity: 0.6;\n}\n.sec-5-portfolio-details-4__disk {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 220px;\n height: 220px;\n border-radius: 50%;\n border: 1px solid rgba(254, 254, 254, 0.35);\n}\n.sec-5-portfolio-details-4__disk-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 140px;\n height: 140px;\n border-radius: 50%;\n background: var(--at-theme-primary);\n color: var(--at-neutral-0);\n transition: transform 0.4s ease;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-5-portfolio-details-4__content {\n padding: 110px 0;\n }\n .sec-5-portfolio-details-4__name {\n font-size: 140px;\n }\n .sec-5-portfolio-details-4__disk {\n width: 180px;\n height: 180px;\n }\n .sec-5-portfolio-details-4__disk-inner {\n width: 110px;\n height: 110px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-5-portfolio-details-4__content {\n padding: 90px 0;\n }\n .sec-5-portfolio-details-4__name {\n font-size: 100px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-portfolio-details-4__content {\n padding: 70px 0;\n }\n .sec-5-portfolio-details-4__name {\n font-size: 72px;\n }\n .sec-5-portfolio-details-4__tagline {\n font-size: 20px;\n }\n .sec-5-portfolio-details-4__eyebrow {\n margin-bottom: 20px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-5-portfolio-details-4__content {\n padding: 60px 0;\n }\n .sec-5-portfolio-details-4__name {\n font-size: 56px;\n }\n .sec-5-portfolio-details-4__tagline {\n font-size: 18px;\n }\n}\n\n/*----------------------------------------*/\n/* Portfolio Details 5 — Swiper Fade + Cinematic\n/* Brand accent: var(--at-theme-primary) (#F0460E)\n/*----------------------------------------*/\n/* JS injects `.anim-zoomin-wrap` around every `.anim-zoomin` ![]()
.\n Image hosts use absolute-fill img inside aspect-ratio box. */\n.sec-4-portfolio-details-5__cell .anim-zoomin-wrap,\n.sec-7-portfolio-details-5__media .anim-zoomin-wrap {\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n/* =========================================================\n SEC 1 — Swiper fade hero (full-bleed)\n ========================================================= */\n.sec-1-portfolio-details-5 {\n position: relative;\n height: 820px;\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n}\n.sec-1-portfolio-details-5__slider {\n position: absolute;\n inset: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n}\n.sec-1-portfolio-details-5__slider .swiper-wrapper,\n.sec-1-portfolio-details-5__slider .swiper-slide {\n height: 100%;\n}\n.sec-1-portfolio-details-5__slide {\n position: relative;\n overflow: hidden;\n}\n.sec-1-portfolio-details-5__slide img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.sec-1-portfolio-details-5__veil {\n position: absolute;\n left: 0;\n right: 0;\n pointer-events: none;\n z-index: 1;\n}\n.sec-1-portfolio-details-5__veil--top {\n top: 0;\n height: 100%;\n background: rgba(15, 15, 15, 0.35);\n}\n.sec-1-portfolio-details-5__veil--bottom {\n bottom: 0;\n height: 240px;\n background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0.55) 100%);\n}\n.sec-1-portfolio-details-5__content {\n position: absolute;\n left: 0;\n right: 0;\n top: 50%;\n transform: translateY(-58%);\n z-index: 2;\n}\n.sec-1-portfolio-details-5__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.15em;\n}\n.sec-1-portfolio-details-5__title {\n color: var(--at-neutral-0);\n letter-spacing: -0.05em;\n justify-content: center;\n}\n.sec-1-portfolio-details-5__title sup {\n margin-left: 4px;\n line-height: 1;\n}\n.sec-1-portfolio-details-5__tagline {\n color: var(--at-neutral-100);\n letter-spacing: -0.03em;\n}\n.sec-1-portfolio-details-5 {\n /* Controls bar at the bottom of hero */\n}\n.sec-1-portfolio-details-5__controls {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 40px;\n z-index: 3;\n}\n.sec-1-portfolio-details-5__counter {\n display: inline-flex;\n align-items: baseline;\n gap: 6px;\n color: var(--at-neutral-0);\n}\n.sec-1-portfolio-details-5__counter-num {\n font-size: 48px;\n line-height: 1;\n letter-spacing: -0.03em;\n}\n.sec-1-portfolio-details-5__counter-total {\n font-size: 18px;\n opacity: 0.65;\n letter-spacing: -0.02em;\n}\n.sec-1-portfolio-details-5__pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n /* Swiper bullets injected here */\n}\n.sec-1-portfolio-details-5__pagination .swiper-pagination-bullet {\n width: 60px;\n height: 3px;\n border-radius: 2px;\n background: var(--at-neutral-0);\n opacity: 0.3;\n transition: background 0.3s ease, opacity 0.3s ease;\n}\n.sec-1-portfolio-details-5__pagination .swiper-pagination-bullet-active {\n background: var(--at-theme-primary);\n opacity: 1;\n}\n.sec-1-portfolio-details-5__nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n border: 1px solid rgba(254, 254, 254, 0.4);\n background: transparent;\n color: var(--at-neutral-0);\n cursor: pointer;\n transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;\n}\n.sec-1-portfolio-details-5__nav:hover {\n transform: translateY(-2px);\n}\n.sec-1-portfolio-details-5__nav--next {\n background: var(--at-theme-primary);\n border-color: var(--at-theme-primary);\n}\n.sec-1-portfolio-details-5__nav--next:hover {\n background: var(--at-neutral-0);\n color: var(--at-theme-primary);\n border-color: var(--at-neutral-0);\n}\n.sec-1-portfolio-details-5__nav--prev:hover {\n background: var(--at-neutral-0);\n color: var(--at-neutral-950);\n border-color: var(--at-neutral-0);\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-1-portfolio-details-5 {\n height: 720px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-portfolio-details-5 {\n height: 620px;\n }\n .sec-1-portfolio-details-5__controls {\n bottom: 30px;\n }\n .sec-1-portfolio-details-5__counter-num {\n font-size: 40px;\n }\n .sec-1-portfolio-details-5__nav {\n width: 48px;\n height: 48px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-portfolio-details-5 {\n height: 560px;\n }\n .sec-1-portfolio-details-5__content {\n transform: translateY(-50%);\n }\n .sec-1-portfolio-details-5__controls {\n bottom: 24px;\n }\n .sec-1-portfolio-details-5__counter-num {\n font-size: 32px;\n }\n .sec-1-portfolio-details-5__counter-total {\n font-size: 14px;\n }\n .sec-1-portfolio-details-5__nav {\n width: 44px;\n height: 44px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-1-portfolio-details-5 {\n height: 520px;\n }\n .sec-1-portfolio-details-5__title {\n font-size: 60px !important;\n }\n}\n\n/* =========================================================\n SEC 2 — Project brief strip\n ========================================================= */\n.sec-2-portfolio-details-5 {\n background: var(--at-neutral-0);\n}\n.sec-2-portfolio-details-5__meta-row {\n border-top: 1px solid var(--at-neutral-100);\n border-bottom: 1px solid var(--at-neutral-100);\n margin: 0;\n}\n.sec-2-portfolio-details-5__meta-cell {\n padding: 24px 24px;\n position: relative;\n}\n.sec-2-portfolio-details-5__meta-cell + .sec-2-portfolio-details-5__meta-cell {\n border-left: 1px solid var(--at-neutral-100);\n}\n.sec-2-portfolio-details-5__lead {\n font-size: 30px;\n line-height: 1.4;\n letter-spacing: -0.04em;\n}\n.sec-2-portfolio-details-5__chips {\n gap: 10px;\n}\n.sec-2-portfolio-details-5__chip {\n padding: 10px 20px;\n background: var(--at-neutral-50);\n color: var(--at-neutral-900);\n border-radius: 25px;\n letter-spacing: 0.05em;\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-2-portfolio-details-5 {\n padding-top: 60px;\n padding-bottom: 70px;\n }\n .sec-2-portfolio-details-5__meta-cell {\n padding: 18px 18px;\n }\n .sec-2-portfolio-details-5__meta-cell:nth-child(3) {\n border-left: 0;\n border-top: 1px solid var(--at-neutral-100);\n }\n .sec-2-portfolio-details-5__meta-cell:nth-child(4) {\n border-top: 1px solid var(--at-neutral-100);\n }\n .sec-2-portfolio-details-5__lead {\n font-size: 26px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-portfolio-details-5 {\n padding-top: 50px;\n padding-bottom: 60px;\n }\n .sec-2-portfolio-details-5__meta-cell {\n padding: 16px 12px;\n }\n .sec-2-portfolio-details-5__meta-cell:nth-child(2) {\n border-left: 1px solid var(--at-neutral-100);\n }\n .sec-2-portfolio-details-5__meta-cell:nth-child(3), .sec-2-portfolio-details-5__meta-cell:nth-child(4) {\n border-top: 1px solid var(--at-neutral-100);\n }\n .sec-2-portfolio-details-5__meta-cell:nth-child(4) {\n border-left: 1px solid var(--at-neutral-100);\n }\n .sec-2-portfolio-details-5__lead {\n font-size: 22px;\n margin-top: 50px !important;\n margin-bottom: 50px !important;\n }\n}\n\n/* =========================================================\n SEC 3 — Services + Stats (2-col)\n ========================================================= */\n.sec-3-portfolio-details-5 {\n background: var(--at-neutral-50);\n}\n.sec-3-portfolio-details-5__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n}\n.sec-3-portfolio-details-5__heading {\n font-size: 48px;\n letter-spacing: -0.05em;\n line-height: 1.15;\n}\n.sec-3-portfolio-details-5__intro {\n line-height: 1.6;\n letter-spacing: -0.02em;\n}\n.sec-3-portfolio-details-5__services {\n padding: 0;\n}\n.sec-3-portfolio-details-5__service {\n display: flex;\n align-items: baseline;\n gap: 24px;\n padding: 18px 0;\n border-top: 1px solid var(--at-neutral-200);\n}\n.sec-3-portfolio-details-5__service:last-child {\n border-bottom: 1px solid var(--at-neutral-200);\n}\n.sec-3-portfolio-details-5__service-num {\n color: var(--at-theme-primary);\n flex: 0 0 60px;\n}\n.sec-3-portfolio-details-5__service-title {\n letter-spacing: -0.03em;\n}\n.sec-3-portfolio-details-5__stats {\n padding: 0;\n}\n.sec-3-portfolio-details-5__stat {\n padding: 24px 0;\n border-top: 1px solid var(--at-neutral-950);\n}\n.sec-3-portfolio-details-5__stat:last-child {\n border-bottom: 1px solid var(--at-neutral-950);\n}\n.sec-3-portfolio-details-5__stat-num {\n font-size: 88px;\n letter-spacing: -0.05em;\n color: var(--at-theme-primary);\n margin-bottom: 16px;\n}\n.sec-3-portfolio-details-5__stat-desc {\n line-height: 1.5;\n letter-spacing: -0.02em;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-3-portfolio-details-5__heading {\n font-size: 40px;\n }\n .sec-3-portfolio-details-5__stat-num {\n font-size: 72px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-3-portfolio-details-5 {\n padding-top: 70px;\n padding-bottom: 70px;\n }\n .sec-3-portfolio-details-5__heading {\n font-size: 36px;\n }\n .sec-3-portfolio-details-5__stat-num {\n font-size: 64px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-3-portfolio-details-5 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-3-portfolio-details-5__heading {\n font-size: 30px;\n }\n .sec-3-portfolio-details-5__stat-num {\n font-size: 56px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-3-portfolio-details-5__heading {\n font-size: 26px;\n }\n .sec-3-portfolio-details-5__service {\n gap: 16px;\n padding: 14px 0;\n }\n .sec-3-portfolio-details-5__service-num {\n flex: 0 0 40px;\n }\n .sec-3-portfolio-details-5__stat-num {\n font-size: 48px;\n }\n}\n\n/* =========================================================\n SEC 4 — Image grid asymmetric (magazine)\n ========================================================= */\n.sec-4-portfolio-details-5 {\n background: var(--at-neutral-0);\n}\n.sec-4-portfolio-details-5__row {\n display: grid;\n gap: 20px;\n margin-bottom: 20px;\n}\n.sec-4-portfolio-details-5__row:last-child {\n margin-bottom: 0;\n}\n.sec-4-portfolio-details-5__row--a {\n grid-template-columns: 1fr 2fr;\n}\n.sec-4-portfolio-details-5__row--b {\n grid-template-columns: 2fr 1fr;\n}\n.sec-4-portfolio-details-5__cell {\n position: relative;\n margin: 0;\n aspect-ratio: 7/5;\n overflow: hidden;\n border-radius: 6px;\n background: var(--at-neutral-100);\n}\n.sec-4-portfolio-details-5__cell img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n}\n.sec-4-portfolio-details-5__cell:hover img {\n transform: scale(1.05);\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-portfolio-details-5 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-4-portfolio-details-5__row {\n gap: 16px;\n margin-bottom: 16px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-portfolio-details-5 {\n padding-top: 50px;\n padding-bottom: 50px;\n }\n .sec-4-portfolio-details-5__row {\n grid-template-columns: 1fr !important;\n gap: 12px;\n margin-bottom: 12px;\n }\n .sec-4-portfolio-details-5__cell {\n aspect-ratio: 4/3;\n }\n}\n\n/* =========================================================\n SEC 5 — Vertical timeline alternating L/R\n ========================================================= */\n.sec-5-portfolio-details-5 {\n background: var(--at-neutral-0);\n}\n.sec-5-portfolio-details-5__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n}\n.sec-5-portfolio-details-5__heading {\n font-size: 54px;\n letter-spacing: -0.05em;\n line-height: 1.15;\n}\n.sec-5-portfolio-details-5__timeline {\n position: relative;\n padding: 30px 0;\n /* Center vertical line (desktop only) */\n}\n.sec-5-portfolio-details-5__timeline::before {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n width: 1px;\n background: var(--at-neutral-200);\n transform: translateX(-50%);\n}\n.sec-5-portfolio-details-5__step {\n position: relative;\n width: 50%;\n padding-bottom: 70px;\n}\n.sec-5-portfolio-details-5__step:last-child {\n padding-bottom: 0;\n}\n.sec-5-portfolio-details-5__step--left {\n padding-right: 60px;\n text-align: right;\n}\n.sec-5-portfolio-details-5__step--right {\n margin-left: 50%;\n padding-left: 60px;\n text-align: left;\n}\n.sec-5-portfolio-details-5__step-dot {\n position: absolute;\n top: 8px;\n width: 14px;\n height: 14px;\n background: var(--at-theme-primary);\n border-radius: 50%;\n border: 3px solid var(--at-neutral-0);\n box-shadow: 0 0 0 1px var(--at-neutral-200);\n z-index: 1;\n}\n.sec-5-portfolio-details-5__step--left .sec-5-portfolio-details-5__step-dot {\n right: -7px;\n}\n.sec-5-portfolio-details-5__step--right .sec-5-portfolio-details-5__step-dot {\n left: -7px;\n}\n.sec-5-portfolio-details-5__step-body {\n max-width: 580px;\n}\n.sec-5-portfolio-details-5__step--left .sec-5-portfolio-details-5__step-body {\n margin-left: auto;\n}\n.sec-5-portfolio-details-5__step-num {\n font-size: 64px;\n color: var(--at-theme-primary);\n letter-spacing: -0.04em;\n}\n.sec-5-portfolio-details-5__step-title {\n letter-spacing: -0.03em;\n}\n.sec-5-portfolio-details-5__step-desc {\n line-height: 1.55;\n letter-spacing: -0.02em;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-5-portfolio-details-5__heading {\n font-size: 44px;\n }\n .sec-5-portfolio-details-5__step-num {\n font-size: 56px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-5-portfolio-details-5 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n .sec-5-portfolio-details-5__heading {\n font-size: 38px;\n }\n .sec-5-portfolio-details-5__step-num {\n font-size: 48px;\n }\n .sec-5-portfolio-details-5__timeline::before {\n left: 20px;\n transform: none;\n }\n .sec-5-portfolio-details-5__step {\n width: 100%;\n margin-left: 0 !important;\n padding-left: 60px !important;\n padding-right: 0 !important;\n text-align: left !important;\n }\n .sec-5-portfolio-details-5__step-dot {\n left: 14px !important;\n right: auto !important;\n }\n .sec-5-portfolio-details-5__step-body {\n margin-left: 0 !important;\n max-width: none;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-portfolio-details-5 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-5-portfolio-details-5__heading {\n font-size: 30px;\n }\n .sec-5-portfolio-details-5__step-num {\n font-size: 40px;\n }\n .sec-5-portfolio-details-5__timeline::before {\n left: 14px;\n transform: none;\n }\n .sec-5-portfolio-details-5__step {\n width: 100%;\n margin-left: 0 !important;\n padding-left: 44px !important;\n padding-right: 0 !important;\n padding-bottom: 50px;\n text-align: left !important;\n }\n .sec-5-portfolio-details-5__step-dot {\n left: 8px !important;\n right: auto !important;\n }\n .sec-5-portfolio-details-5__step-body {\n margin-left: 0 !important;\n max-width: none;\n }\n}\n@media (max-width: 574.98px) {\n .sec-5-portfolio-details-5__heading {\n font-size: 26px;\n }\n}\n\n/* =========================================================\n SEC 6 — Awards & Recognition (dark)\n ========================================================= */\n.sec-6-portfolio-details-5 {\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n}\n.sec-6-portfolio-details-5__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n}\n.sec-6-portfolio-details-5__heading {\n color: var(--at-neutral-0);\n font-size: 54px;\n letter-spacing: -0.05em;\n line-height: 1.15;\n}\n.sec-6-portfolio-details-5__list {\n border-top: 1px solid var(--at-neutral-700);\n}\n.sec-6-portfolio-details-5__row {\n border-bottom: 1px solid var(--at-neutral-700);\n}\n.sec-6-portfolio-details-5__link {\n display: grid;\n grid-template-columns: 120px 1fr 320px 60px;\n align-items: center;\n gap: 24px;\n padding: 28px 0;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: padding 0.35s ease, background-color 0.35s ease;\n}\n.sec-6-portfolio-details-5__link:hover {\n color: var(--at-neutral-0);\n padding-left: 16px;\n padding-right: 16px;\n background: rgba(254, 254, 254, 0.03);\n}\n.sec-6-portfolio-details-5__link:hover .sec-6-portfolio-details-5__arrow {\n transform: translate(4px, -4px);\n}\n.sec-6-portfolio-details-5__year {\n color: var(--at-neutral-0);\n opacity: 0.6;\n letter-spacing: 0.1em;\n}\n.sec-6-portfolio-details-5__title {\n font-size: 32px;\n letter-spacing: -0.04em;\n}\n.sec-6-portfolio-details-5__org {\n color: var(--at-neutral-0);\n opacity: 0.75;\n letter-spacing: -0.02em;\n text-align: right;\n}\n.sec-6-portfolio-details-5__arrow {\n color: var(--at-theme-primary);\n font-size: 22px;\n text-align: right;\n transition: transform 0.35s ease;\n display: inline-block;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-6-portfolio-details-5__heading {\n font-size: 44px;\n }\n .sec-6-portfolio-details-5__title {\n font-size: 28px;\n }\n .sec-6-portfolio-details-5__link {\n grid-template-columns: 100px 1fr 220px 50px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-6-portfolio-details-5 {\n padding-top: 70px;\n padding-bottom: 70px;\n }\n .sec-6-portfolio-details-5__heading {\n font-size: 38px;\n }\n .sec-6-portfolio-details-5__title {\n font-size: 24px;\n }\n .sec-6-portfolio-details-5__link {\n grid-template-columns: 80px 1fr auto 40px;\n gap: 16px;\n }\n .sec-6-portfolio-details-5__org {\n font-size: 14px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-6-portfolio-details-5 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-6-portfolio-details-5__heading {\n font-size: 30px;\n }\n .sec-6-portfolio-details-5__title {\n font-size: 20px;\n }\n .sec-6-portfolio-details-5__link {\n grid-template-columns: 70px 1fr 30px;\n gap: 12px;\n padding: 20px 0;\n }\n .sec-6-portfolio-details-5__org {\n display: none;\n }\n .sec-6-portfolio-details-5__arrow {\n font-size: 18px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-6-portfolio-details-5__heading {\n font-size: 26px;\n }\n .sec-6-portfolio-details-5__title {\n font-size: 18px;\n }\n .sec-6-portfolio-details-5__link {\n grid-template-columns: 56px 1fr 24px;\n gap: 10px;\n }\n}\n\n/* =========================================================\n SEC 7 — Next project side-by-side (light)\n ========================================================= */\n.sec-7-portfolio-details-5 {\n background: var(--at-neutral-0);\n}\n.sec-7-portfolio-details-5__group {\n text-decoration: none;\n color: inherit;\n display: block;\n}\n.sec-7-portfolio-details-5__group:hover {\n color: inherit;\n}\n.sec-7-portfolio-details-5__group:hover .sec-7-portfolio-details-5__cta span {\n transform: translate(4px, -4px);\n}\n.sec-7-portfolio-details-5__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.15em;\n}\n.sec-7-portfolio-details-5__name {\n font-size: 200px;\n line-height: 0.95;\n letter-spacing: -0.05em;\n}\n.sec-7-portfolio-details-5__tagline {\n letter-spacing: -0.03em;\n line-height: 1.4;\n}\n.sec-7-portfolio-details-5__meta {\n letter-spacing: 0.1em;\n}\n.sec-7-portfolio-details-5__cta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n position: relative;\n padding-bottom: 6px;\n border-bottom: 1px solid var(--at-neutral-950);\n}\n.sec-7-portfolio-details-5__cta span {\n display: inline-block;\n transition: transform 0.35s ease;\n}\n.sec-7-portfolio-details-5__media {\n position: relative;\n width: 100%;\n aspect-ratio: 4/5;\n overflow: hidden;\n border-radius: 8px;\n background: var(--at-neutral-100);\n}\n.sec-7-portfolio-details-5__media img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n}\n.sec-7-portfolio-details-5__media:hover img {\n transform: scale(1.04);\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-7-portfolio-details-5__name {\n font-size: 140px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-7-portfolio-details-5 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n .sec-7-portfolio-details-5__name {\n font-size: 110px;\n }\n .sec-7-portfolio-details-5__media {\n aspect-ratio: 4/5;\n max-width: 500px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-portfolio-details-5 {\n padding-top: 60px;\n padding-bottom: 80px;\n }\n .sec-7-portfolio-details-5__name {\n font-size: 80px;\n }\n .sec-7-portfolio-details-5__tagline {\n font-size: 18px;\n }\n .sec-7-portfolio-details-5__media {\n aspect-ratio: 4/5;\n margin-top: 30px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-7-portfolio-details-5__name {\n font-size: 60px;\n }\n}\n\n/*----------------------------------------*/\n/* Portfolio Details 6 — Editorial + Marquee + Accordion\n/* Brand accent: var(--at-theme-primary)\n/*----------------------------------------*/\n/* JS injects `.anim-zoomin-wrap` — fit aspect-ratio hosts */\n.sec-2-portfolio-details-6__media .anim-zoomin-wrap,\n.sec-3-portfolio-details-6__cell .anim-zoomin-wrap,\n.sec-5-portfolio-details-6__media .anim-zoomin-wrap,\n.sec-7-portfolio-details-6__media .anim-zoomin-wrap {\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n/* =========================================================\n SEC 1 — Hero + marquee strip\n ========================================================= */\n.sec-1-portfolio-details-6 {\n background: var(--at-neutral-50);\n}\n.sec-1-portfolio-details-6__byline {\n letter-spacing: 0.15em;\n}\n.sec-1-portfolio-details-6__title {\n font-size: 240px;\n letter-spacing: -0.05em;\n line-height: 1;\n justify-content: center;\n}\n.sec-1-portfolio-details-6__title sup {\n margin-left: 4px;\n line-height: 1;\n}\n.sec-1-portfolio-details-6__tagline {\n letter-spacing: -0.03em;\n}\n.sec-1-portfolio-details-6__credits {\n margin: 0;\n}\n.sec-1-portfolio-details-6__credit-cell {\n padding: 22px 24px;\n position: relative;\n}\n.sec-1-portfolio-details-6__credit-cell + .sec-1-portfolio-details-6__credit-cell {\n border-left: 1px solid var(--at-neutral-200);\n}\n.sec-1-portfolio-details-6 {\n /* Marquee strip */\n}\n.sec-1-portfolio-details-6__marquee {\n background: var(--at-neutral-950);\n overflow: hidden;\n padding: 24px 0;\n}\n.sec-1-portfolio-details-6__marquee-track {\n display: inline-flex;\n white-space: nowrap;\n animation: pd6-marquee 28s linear infinite;\n will-change: transform;\n}\n.sec-1-portfolio-details-6__marquee-text {\n display: inline-block;\n color: var(--at-neutral-0);\n font-family: var(--at-ff-heading);\n font-size: 44px;\n font-weight: 500;\n line-height: 1;\n letter-spacing: -0.02em;\n padding-right: 60px;\n flex-shrink: 0;\n}\n.sec-1-portfolio-details-6__marquee-dot {\n color: var(--at-theme-primary);\n margin: 0 18px;\n font-size: 0.4em;\n vertical-align: middle;\n}\n@media (prefers-reduced-motion: reduce) {\n .sec-1-portfolio-details-6__marquee-track {\n animation: none;\n }\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-1-portfolio-details-6__title {\n font-size: 180px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-1-portfolio-details-6__title {\n font-size: 140px;\n }\n .sec-1-portfolio-details-6__marquee-text {\n font-size: 36px;\n }\n .sec-1-portfolio-details-6__credit-cell {\n padding: 18px 16px;\n }\n .sec-1-portfolio-details-6__credit-cell:nth-child(3) {\n border-left: 0;\n border-top: 1px solid var(--at-neutral-200);\n }\n .sec-1-portfolio-details-6__credit-cell:nth-child(4) {\n border-top: 1px solid var(--at-neutral-200);\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-1-portfolio-details-6__title {\n font-size: 96px;\n }\n .sec-1-portfolio-details-6__tagline {\n font-size: 22px !important;\n }\n .sec-1-portfolio-details-6__marquee-text {\n font-size: 28px;\n }\n .sec-1-portfolio-details-6__credit-cell {\n padding: 14px 12px;\n }\n .sec-1-portfolio-details-6__credit-cell:nth-child(2) {\n border-left: 1px solid var(--at-neutral-200);\n }\n .sec-1-portfolio-details-6__credit-cell:nth-child(3), .sec-1-portfolio-details-6__credit-cell:nth-child(4) {\n border-top: 1px solid var(--at-neutral-200);\n }\n .sec-1-portfolio-details-6__credit-cell:nth-child(4) {\n border-left: 1px solid var(--at-neutral-200);\n }\n}\n@media (max-width: 574.98px) {\n .sec-1-portfolio-details-6__title {\n font-size: 72px;\n }\n}\n\n@keyframes pd6-marquee {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-33.3333%);\n }\n}\n/* =========================================================\n SEC 2 — Magazine 2-col + drop cap\n ========================================================= */\n.sec-2-portfolio-details-6 {\n background: var(--at-neutral-0);\n}\n.sec-2-portfolio-details-6__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n}\n.sec-2-portfolio-details-6__lead {\n font-size: 18px;\n line-height: 1.65;\n letter-spacing: -0.01em;\n}\n.sec-2-portfolio-details-6__dropcap {\n float: left;\n font-family: var(--at-ff-heading);\n font-size: 124px;\n font-weight: 500;\n line-height: 0.85;\n letter-spacing: -0.06em;\n color: var(--at-theme-primary);\n margin: 6px 16px 0 0;\n padding: 0;\n}\n.sec-2-portfolio-details-6__two-col {\n column-count: 2;\n column-gap: 32px;\n}\n.sec-2-portfolio-details-6__two-col p {\n font-size: 16px;\n line-height: 1.65;\n letter-spacing: -0.01em;\n break-inside: avoid-column;\n}\n.sec-2-portfolio-details-6__two-col p + p {\n margin-top: 18px;\n}\n.sec-2-portfolio-details-6__pullout {\n letter-spacing: -0.02em;\n}\n.sec-2-portfolio-details-6__media {\n position: relative;\n width: 100%;\n aspect-ratio: 4/5;\n overflow: hidden;\n border-radius: 8px;\n background: var(--at-neutral-100);\n}\n.sec-2-portfolio-details-6__media img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n}\n.sec-2-portfolio-details-6__media:hover img {\n transform: scale(1.04);\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-2-portfolio-details-6 {\n padding-top: 70px;\n padding-bottom: 70px;\n }\n .sec-2-portfolio-details-6__dropcap {\n font-size: 96px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-2-portfolio-details-6 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-2-portfolio-details-6__dropcap {\n font-size: 80px;\n margin-right: 12px;\n }\n .sec-2-portfolio-details-6__two-col {\n column-count: 1;\n column-gap: 0;\n }\n}\n@media (max-width: 574.98px) {\n .sec-2-portfolio-details-6__dropcap {\n font-size: 64px;\n }\n}\n\n/* =========================================================\n SEC 3 — Horizontal scroll Swiper gallery\n ========================================================= */\n.sec-3-portfolio-details-6 {\n background: var(--at-neutral-0);\n}\n.sec-3-portfolio-details-6__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n}\n.sec-3-portfolio-details-6__heading {\n font-size: 42px;\n letter-spacing: -0.05em;\n line-height: 1.15;\n}\n.sec-3-portfolio-details-6__hint {\n letter-spacing: 0.1em;\n}\n.sec-3-portfolio-details-6__slider {\n padding-left: max((100vw - 1320px) / 2 + 12px, 12px);\n padding-right: max((100vw - 1320px) / 2 + 12px, 12px);\n cursor: grab;\n}\n.sec-3-portfolio-details-6__slider:active {\n cursor: grabbing;\n}\n@media (min-width: 1400px) {\n .sec-3-portfolio-details-6__slider {\n padding-left: max((100vw - 1320px) / 2, 12px);\n padding-right: max((100vw - 1320px) / 2, 12px);\n }\n}\n.sec-3-portfolio-details-6__slide {\n width: 60%;\n}\n.sec-3-portfolio-details-6__cell {\n position: relative;\n width: 100%;\n aspect-ratio: 7/5;\n overflow: hidden;\n border-radius: 6px;\n background: var(--at-neutral-100);\n margin: 0;\n}\n.sec-3-portfolio-details-6__cell img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n}\n.sec-3-portfolio-details-6__cell:hover img {\n transform: scale(1.04);\n}\n.sec-3-portfolio-details-6__caption {\n letter-spacing: -0.02em;\n}\n.sec-3-portfolio-details-6__caption-num {\n margin-right: 8px;\n}\n.sec-3-portfolio-details-6__nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: 1px solid var(--at-neutral-900);\n background: transparent;\n color: var(--at-neutral-900);\n cursor: pointer;\n transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;\n}\n.sec-3-portfolio-details-6__nav:hover {\n transform: translateY(-2px);\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n}\n.sec-3-portfolio-details-6__nav--next {\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n}\n.sec-3-portfolio-details-6__nav--next:hover {\n background: var(--at-theme-primary);\n border-color: var(--at-theme-primary);\n}\n.sec-3-portfolio-details-6 .mt-40 {\n margin-top: 40px;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-3-portfolio-details-6__heading {\n font-size: 36px;\n }\n .sec-3-portfolio-details-6__slide {\n width: 70%;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-3-portfolio-details-6 {\n padding-top: 70px;\n padding-bottom: 70px;\n }\n .sec-3-portfolio-details-6__heading {\n font-size: 30px;\n }\n .sec-3-portfolio-details-6__slide {\n width: 80%;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-3-portfolio-details-6 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-3-portfolio-details-6__heading {\n font-size: 26px;\n }\n .sec-3-portfolio-details-6__slide {\n width: 90%;\n }\n .sec-3-portfolio-details-6__nav {\n width: 44px;\n height: 44px;\n }\n}\n\n/* =========================================================\n SEC 4 — Stats grid (4 inline with dot dividers)\n ========================================================= */\n.sec-4-portfolio-details-6 {\n background: var(--at-neutral-50);\n}\n.sec-4-portfolio-details-6__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n}\n.sec-4-portfolio-details-6__heading {\n font-size: 42px;\n letter-spacing: -0.05em;\n line-height: 1.15;\n}\n.sec-4-portfolio-details-6__stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n align-items: start;\n position: relative;\n}\n.sec-4-portfolio-details-6__stat {\n text-align: center;\n position: relative;\n}\n.sec-4-portfolio-details-6__stat:not(:last-child)::after {\n content: \"\";\n position: absolute;\n top: 50px;\n right: -12px;\n width: 6px;\n height: 6px;\n background: var(--at-neutral-950);\n border-radius: 50%;\n}\n.sec-4-portfolio-details-6__stat-num {\n font-size: 84px;\n color: var(--at-theme-primary);\n letter-spacing: -0.05em;\n margin-bottom: 16px;\n}\n.sec-4-portfolio-details-6__stat-label {\n line-height: 1.4;\n letter-spacing: -0.02em;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-4-portfolio-details-6__heading {\n font-size: 36px;\n }\n .sec-4-portfolio-details-6__stat-num {\n font-size: 64px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-4-portfolio-details-6 {\n padding-top: 70px;\n padding-bottom: 70px;\n }\n .sec-4-portfolio-details-6__stats {\n grid-template-columns: repeat(2, 1fr);\n gap: 40px;\n }\n .sec-4-portfolio-details-6__stat:not(:last-child)::after {\n display: none;\n }\n .sec-4-portfolio-details-6__stat-num {\n font-size: 64px;\n }\n .sec-4-portfolio-details-6__heading {\n font-size: 30px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-4-portfolio-details-6 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-4-portfolio-details-6__stats {\n grid-template-columns: repeat(2, 1fr);\n gap: 30px;\n }\n .sec-4-portfolio-details-6__stat:not(:last-child)::after {\n display: none;\n }\n .sec-4-portfolio-details-6__stat-num {\n font-size: 52px;\n }\n .sec-4-portfolio-details-6__heading {\n font-size: 26px;\n }\n}\n\n/* =========================================================\n SEC 5 — Quote + portrait side-by-side\n ========================================================= */\n.sec-5-portfolio-details-6 {\n background: var(--at-neutral-0);\n}\n.sec-5-portfolio-details-6__media {\n position: relative;\n width: 100%;\n aspect-ratio: 5/4;\n overflow: hidden;\n border-radius: 6px;\n background: var(--at-neutral-100);\n}\n.sec-5-portfolio-details-6__media img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n}\n.sec-5-portfolio-details-6__media:hover img {\n transform: scale(1.04);\n}\n.sec-5-portfolio-details-6__content {\n padding-left: 20px;\n}\n.sec-5-portfolio-details-6__mark {\n display: inline-block;\n font-family: var(--at-ff-heading);\n font-size: 140px;\n line-height: 0.8;\n color: var(--at-theme-primary);\n margin-bottom: -10px;\n}\n.sec-5-portfolio-details-6__quote {\n font-size: 28px;\n line-height: 1.5;\n letter-spacing: -0.03em;\n padding: 0;\n border: 0;\n}\n.sec-5-portfolio-details-6__divider {\n width: 60px;\n height: 1px;\n background: var(--at-neutral-950);\n}\n.sec-5-portfolio-details-6__role {\n letter-spacing: 0.1em;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-5-portfolio-details-6__quote {\n font-size: 24px;\n }\n .sec-5-portfolio-details-6__mark {\n font-size: 120px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-5-portfolio-details-6 {\n padding-top: 70px;\n padding-bottom: 70px;\n }\n .sec-5-portfolio-details-6__content {\n padding-left: 0;\n }\n .sec-5-portfolio-details-6__quote {\n font-size: 22px;\n }\n .sec-5-portfolio-details-6__mark {\n font-size: 100px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-5-portfolio-details-6 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-5-portfolio-details-6__content {\n padding-left: 0;\n }\n .sec-5-portfolio-details-6__quote {\n font-size: 20px;\n }\n .sec-5-portfolio-details-6__mark {\n font-size: 80px;\n }\n}\n\n/* =========================================================\n SEC 6 — Accordion FAQ \"Project details\"\n ========================================================= */\n.sec-6-portfolio-details-6 {\n background: var(--at-neutral-0);\n}\n.sec-6-portfolio-details-6__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n}\n.sec-6-portfolio-details-6__heading {\n font-size: 48px;\n letter-spacing: -0.05em;\n line-height: 1.15;\n}\n.sec-6-portfolio-details-6__list {\n border-top: 1px solid var(--at-neutral-200);\n}\n.sec-6-portfolio-details-6__row {\n border-bottom: 1px solid var(--at-neutral-200);\n}\n.sec-6-portfolio-details-6__item {\n /* Native
element */\n}\n.sec-6-portfolio-details-6__item[open] .sec-6-portfolio-details-6__icon-bar--v {\n transform: scaleY(0);\n}\n.sec-6-portfolio-details-6__item[open] .sec-6-portfolio-details-6__icon-bar:not(.sec-6-portfolio-details-6__icon-bar--v) {\n background: var(--at-theme-primary);\n}\n.sec-6-portfolio-details-6__item[open] .sec-6-portfolio-details-6__q {\n color: var(--at-theme-primary);\n}\n.sec-6-portfolio-details-6__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding: 26px 0;\n cursor: pointer;\n list-style: none;\n transition: padding 0.3s ease;\n /* Remove default arrow on details/summary */\n}\n.sec-6-portfolio-details-6__head::-webkit-details-marker {\n display: none;\n}\n.sec-6-portfolio-details-6__head::marker {\n display: none;\n content: \"\";\n}\n.sec-6-portfolio-details-6__head:hover {\n padding-left: 12px;\n}\n.sec-6-portfolio-details-6__head:hover .sec-6-portfolio-details-6__q {\n color: var(--at-theme-primary);\n}\n.sec-6-portfolio-details-6__q {\n font-size: 24px;\n letter-spacing: -0.03em;\n transition: color 0.3s ease;\n}\n.sec-6-portfolio-details-6__icon {\n position: relative;\n flex-shrink: 0;\n width: 22px;\n height: 22px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.sec-6-portfolio-details-6__icon-bar {\n position: absolute;\n background: var(--at-neutral-950);\n transition: transform 0.3s ease, background-color 0.3s ease;\n}\n.sec-6-portfolio-details-6__icon-bar:not(.sec-6-portfolio-details-6__icon-bar--v) {\n width: 22px;\n height: 2px;\n}\n.sec-6-portfolio-details-6__icon-bar--v {\n width: 2px;\n height: 22px;\n}\n.sec-6-portfolio-details-6__body {\n padding: 0 0 30px 0;\n max-width: 1100px;\n}\n.sec-6-portfolio-details-6__body p {\n line-height: 1.65;\n letter-spacing: -0.01em;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-6-portfolio-details-6__heading {\n font-size: 40px;\n }\n .sec-6-portfolio-details-6__q {\n font-size: 22px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-6-portfolio-details-6 {\n padding-top: 70px;\n padding-bottom: 70px;\n }\n .sec-6-portfolio-details-6__heading {\n font-size: 34px;\n }\n .sec-6-portfolio-details-6__q {\n font-size: 20px;\n }\n .sec-6-portfolio-details-6__head {\n padding: 22px 0;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-6-portfolio-details-6 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-6-portfolio-details-6__heading {\n font-size: 28px;\n }\n .sec-6-portfolio-details-6__q {\n font-size: 18px;\n }\n .sec-6-portfolio-details-6__head {\n padding: 18px 0;\n gap: 16px;\n }\n .sec-6-portfolio-details-6__head:hover {\n padding-left: 0;\n }\n}\n@media (max-width: 574.98px) {\n .sec-6-portfolio-details-6__heading {\n font-size: 24px;\n }\n .sec-6-portfolio-details-6__q {\n font-size: 16px;\n }\n .sec-6-portfolio-details-6__icon {\n width: 18px;\n height: 18px;\n }\n .sec-6-portfolio-details-6__icon-bar:not(.sec-6-portfolio-details-6__icon-bar--v) {\n width: 18px;\n }\n .sec-6-portfolio-details-6__icon-bar--v {\n height: 18px;\n }\n}\n\n/* =========================================================\n SEC 7 — Next project compact dark card\n ========================================================= */\n.sec-7-portfolio-details-6 {\n background: var(--at-neutral-0);\n}\n.sec-7-portfolio-details-6__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.15em;\n}\n.sec-7-portfolio-details-6__heading {\n color: var(--at-neutral-950);\n font-size: 36px;\n letter-spacing: -0.04em;\n}\n.sec-7-portfolio-details-6__card {\n display: block;\n text-decoration: none;\n color: var(--at-neutral-0);\n background: var(--at-neutral-950);\n border-radius: 12px;\n overflow: hidden;\n transition: transform 0.4s ease;\n}\n.sec-7-portfolio-details-6__card:hover {\n color: var(--at-neutral-0);\n transform: translateY(-4px);\n}\n.sec-7-portfolio-details-6__card:hover .sec-7-portfolio-details-6__media img {\n transform: scale(1.04);\n}\n.sec-7-portfolio-details-6__card:hover .sec-7-portfolio-details-6__cta span {\n transform: translate(3px, -3px);\n}\n.sec-7-portfolio-details-6__media {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 560px;\n overflow: hidden;\n background: var(--at-neutral-800);\n}\n.sec-7-portfolio-details-6__media img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n}\n.sec-7-portfolio-details-6__content {\n padding: 60px;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.sec-7-portfolio-details-6__num {\n color: var(--at-theme-primary);\n letter-spacing: 0.15em;\n}\n.sec-7-portfolio-details-6__name {\n color: var(--at-neutral-0);\n font-size: 140px;\n letter-spacing: -0.05em;\n line-height: 0.95;\n}\n.sec-7-portfolio-details-6__tagline {\n color: var(--at-neutral-100);\n letter-spacing: -0.03em;\n line-height: 1.4;\n}\n.sec-7-portfolio-details-6__meta {\n color: var(--at-neutral-300);\n letter-spacing: 0.1em;\n}\n.sec-7-portfolio-details-6__tags {\n gap: 8px;\n}\n.sec-7-portfolio-details-6__tag {\n padding: 8px 16px;\n border: 1px solid var(--at-neutral-700);\n border-radius: 25px;\n color: var(--at-neutral-0);\n letter-spacing: 0.05em;\n}\n.sec-7-portfolio-details-6__cta {\n color: var(--at-theme-primary);\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding-bottom: 6px;\n border-bottom: 1px solid var(--at-theme-primary);\n align-self: flex-start;\n}\n.sec-7-portfolio-details-6__cta span {\n display: inline-block;\n transition: transform 0.35s ease;\n}\n@media only screen and (min-width: 992px) and (max-width: 1199px) {\n .sec-7-portfolio-details-6__name {\n font-size: 96px;\n }\n .sec-7-portfolio-details-6__content {\n padding: 50px 40px;\n }\n}\n@media only screen and (min-width: 768px) and (max-width: 991px) {\n .sec-7-portfolio-details-6 {\n padding-top: 70px;\n padding-bottom: 70px;\n }\n .sec-7-portfolio-details-6__heading {\n font-size: 30px;\n }\n .sec-7-portfolio-details-6__name {\n font-size: 84px;\n }\n .sec-7-portfolio-details-6__media {\n min-height: 380px;\n aspect-ratio: 4/3;\n }\n .sec-7-portfolio-details-6__content {\n padding: 40px 32px;\n }\n}\n@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {\n .sec-7-portfolio-details-6 {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n .sec-7-portfolio-details-6__heading {\n font-size: 26px;\n }\n .sec-7-portfolio-details-6__name {\n font-size: 64px;\n }\n .sec-7-portfolio-details-6__media {\n min-height: 300px;\n aspect-ratio: 4/3;\n }\n .sec-7-portfolio-details-6__content {\n padding: 36px 24px;\n }\n .sec-7-portfolio-details-6__tagline {\n font-size: 18px;\n }\n}\n@media (max-width: 574.98px) {\n .sec-7-portfolio-details-6__name {\n font-size: 48px;\n }\n}\n\n/*----------------------------------------*/\n/* 2.3 Back to top\n/*----------------------------------------*/\n.back-to-top-wrapper {\n position: fixed;\n right: 50px;\n bottom: 0;\n height: 44px;\n width: 44px;\n cursor: pointer;\n display: block;\n border-radius: 50%;\n z-index: 99;\n opacity: 0;\n visibility: hidden;\n}\n@media (max-width: 574.98px) {\n .back-to-top-wrapper {\n right: 20px;\n bottom: 20px;\n }\n}\n.back-to-top-wrapper.back-to-top-btn-show {\n visibility: visible;\n opacity: 1;\n bottom: 50px;\n}\n\n.back-to-top-btn {\n display: inline-block;\n width: 44px;\n height: 44px;\n line-height: 44px;\n text-align: center;\n background: var(--at-common-white);\n box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3);\n color: var(--at-common-black);\n border-radius: 50%;\n -webkit-transition: all 0.3s ease-out;\n -moz-transition: all 0.3s ease-out;\n -ms-transition: all 0.3s ease-out;\n -o-transition: all 0.3s ease-out;\n transition: all 0.3s ease-out;\n}\n.back-to-top-btn svg {\n -webkit-transform: translateY(-2px);\n -moz-transform: translateY(-2px);\n -ms-transform: translateY(-2px);\n -o-transform: translateY(-2px);\n transform: translateY(-2px);\n}\n.back-to-top-btn:hover {\n -webkit-transform: translateY(-4px);\n -moz-transform: translateY(-4px);\n -ms-transform: translateY(-4px);\n -o-transform: translateY(-4px);\n transform: translateY(-4px);\n}\n\n/*----------------------------------------*/\n/* 2.5 Buttons\n/*----------------------------------------*/\n.at-btn {\n gap: 8px;\n line-height: 1;\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n padding: 17px 25px;\n text-transform: capitalize;\n color: #FEFEFE;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: #1D1D1D;\n border-radius: 50px;\n}\n.at-btn:hover {\n color: #FEFEFE;\n}\n.at-btn:hover span span.text-1 {\n -webkit-transform: translateY(-150%);\n transform: translateY(-150%);\n}\n.at-btn:hover span span.text-2 {\n top: 50%;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.at-btn:hover i svg:first-child {\n transform: translate(16px, -16px);\n}\n.at-btn:hover i svg:last-child {\n opacity: 1;\n visibility: visible;\n transform: translate(13px, -13px);\n}\n.at-btn:hover i.icon-arrow-right svg:first-child {\n transform: translate(16px, 0);\n}\n.at-btn:hover i.icon-arrow-right svg:last-child {\n transform: translate(16px, 0);\n}\n.at-btn:hover i.icon-arrow-up-left svg:first-child {\n transform: translate(-16px, -16px);\n}\n.at-btn:hover i.icon-arrow-up-left svg:last-child {\n transform: translate(-16px, -16px);\n}\n.at-btn span {\n position: relative;\n z-index: 1;\n overflow: hidden;\n display: inline-block;\n}\n.at-btn span span.text-1 {\n position: relative;\n display: block;\n transition: 0.3s;\n}\n.at-btn span span.text-2 {\n position: absolute;\n top: 100%;\n display: block;\n transition: 0.3s;\n}\n.at-btn i {\n position: relative;\n overflow: hidden;\n width: 16px;\n height: 16px;\n display: inline-flex;\n margin-left: 4px;\n}\n.at-btn i svg {\n transform: translateY(-2px);\n position: absolute;\n bottom: -1px;\n left: 1px;\n transition: all 0.2s ease-out;\n}\n.at-btn i svg:last-child {\n left: -12px;\n bottom: -12px;\n transform: translate(0, 0);\n opacity: 0;\n}\n.at-btn i.icon-arrow-right svg:last-child {\n left: -16px;\n bottom: 0;\n}\n.at-btn i.icon-arrow-up-left svg:last-child {\n left: 16px;\n bottom: -16px;\n}\n.at-btn.btn-sm {\n padding: 10px 20px;\n}\n.at-btn.filter-btn {\n border-radius: 100px;\n border: 1px solid var(--at-neutral-100, #DFDFDF);\n background: var(--at-neutral-0, #FEFEFE);\n color: var(--at-neutral-900);\n}\n.at-btn.active {\n background: var(--at-neutral-900);\n border-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n}\n.at-btn-border-white {\n border: 1px solid rgba(255, 255, 255, 0.3);\n background: rgba(255, 255, 255, 0.25);\n}\n.at-btn-group {\n display: flex;\n width: fit-content;\n}\n.at-btn-group > *:nth-child(1) {\n transform: scale3d(0.5, 0.5, 1);\n margin-inline-end: -52px;\n}\n.at-btn-group > *:nth-child(2) {\n transform: scale3d(1, 1, 1);\n}\n.at-btn-group > *:nth-child(3) {\n transform: scale3d(1, 1, 1);\n margin-inline-start: 0;\n}\n.at-btn-group:hover > *:nth-child(1) {\n transform: scale3d(1, 1, 1);\n margin-inline-end: 0;\n background: #1D1D1D;\n}\n.at-btn-group:hover > *:nth-child(2) {\n transform: scale3d(1, 1, 1);\n background: #1D1D1D;\n}\n.at-btn-group:hover > *:nth-child(3) {\n transform: scale3d(0.5, 0.5, 1);\n margin-inline-start: -52px;\n background: #1D1D1D;\n}\n.at-btn-group .at-btn-circle {\n text-align: center;\n width: 50px;\n height: 50px;\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n border-radius: 100%;\n display: flex;\n gap: 10px;\n align-items: center;\n justify-content: center;\n background-color: #1D1D1D;\n color: #FEFEFE;\n}\n.at-btn-group .at-btn-circle i {\n transform: rotate(-45deg);\n}\n.at-btn-group-transparent .at-btn {\n background: #FEFEFE;\n border: 1px solid rgba(38, 38, 38, 0.1);\n color: #1D1D1D;\n}\n.at-btn-group-transparent .at-btn-circle {\n background-color: #FEFEFE;\n color: #1D1D1D;\n border: 1px solid rgba(38, 38, 38, 0.1);\n}\n.at-btn-group-transparent:hover > *:nth-child(2) {\n background: #FEFEFE;\n}\n.at-btn-group-transparent:hover > *:nth-child(1) {\n background: #FEFEFE;\n}\n.at-btn-group-transparent-2 .at-btn {\n background: #fff5f3;\n border: 1px solid rgba(38, 38, 38, 0.1);\n color: #1D1D1D;\n}\n.at-btn-group-transparent-2 .at-btn-circle {\n background-color: #fff5f3;\n color: #1D1D1D;\n border: 1px solid rgba(38, 38, 38, 0.1);\n}\n.at-btn-group-transparent-2:hover > *:nth-child(2) {\n background: #fff5f3;\n}\n.at-btn-group-transparent-2:hover > *:nth-child(1) {\n background: #fff5f3;\n}\n.at-btn-group.btn-brand-1 .at-btn {\n background: #F0460E;\n border: 1px solid #F0460E;\n color: #FEFEFE;\n}\n.at-btn-group.btn-brand-1 .at-btn-circle {\n background-color: #F0460E;\n color: #FEFEFE;\n border: 1px solid #F0460E;\n}\n.at-btn.has-dot {\n position: relative;\n}\n.at-btn.has-dot::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 0;\n transform: translate(-50%, -50%);\n width: 8px;\n height: 8px;\n background-color: #fff;\n border-radius: 50%;\n opacity: 50%;\n}\n\n/*----------------------------------------*/\n/* 2.1 Animations\n/*----------------------------------------*/\n@-webkit-keyframes rotate-infinite {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@-moz-keyframes rotate-infinite {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@-ms-keyframes rotate-infinite {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes rotate-infinite {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.rotate-infinite {\n -webkit-animation: rotate-infinite 15s linear infinite;\n animation: rotate-infinite 15s linear infinite;\n}\n\n@-webkit-keyframes rotate-infinite-2 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(-360deg);\n }\n}\n@-moz-keyframes rotate-infinite-2 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(-360deg);\n }\n}\n@-ms-keyframes rotate-infinite-2 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(-360deg);\n }\n}\n@keyframes rotate-infinite-2 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(-360deg);\n }\n}\n.rotate-infinite-2 {\n -webkit-animation: rotate-infinite-2 15s linear infinite;\n animation: rotate-infinite-2 15s linear infinite;\n}\n\n@keyframes animate-pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.2);\n }\n 40% {\n box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 255, 255, 0.2);\n }\n 80% {\n box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0);\n }\n}\n@keyframes arrowLineRotation {\n to {\n transform: rotate(180deg);\n }\n}\n@keyframes arrowLineRotationRev {\n to {\n transform: rotate(-180deg);\n }\n}\n.hover-up {\n transition: transform 0.2s ease-in-out;\n}\n.hover-up:hover {\n transform: translateY(-3px);\n}\n\n/*----------------------------------------*/\n/* 2.10 Preloader\n/*----------------------------------------*/\n#preloader {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1000;\n background-color: var(--at-theme-primary);\n}\n\n.preloader {\n width: 50px;\n height: 50px;\n display: inline-block;\n padding: 0px;\n text-align: left;\n box-sizing: border-box;\n position: absolute;\n top: 50%;\n left: 50%;\n margin-left: -25px;\n margin-top: -25px;\n}\n\n.preloader span {\n position: absolute;\n display: inline-block;\n width: 50px;\n height: 50px;\n border-radius: 100%;\n background: var(--at-common-white);\n animation: preloader 1.3s linear infinite;\n -webkit-animation: preloader 1.3s linear infinite;\n}\n\n.preloader span:last-child {\n animation-delay: -0.9s;\n -webkit-animation-delay: -0.9s;\n}\n\n@keyframes preloader {\n 0% {\n transform: scale(0, 0);\n opacity: 0.5;\n }\n 100% {\n transform: scale(1, 1);\n opacity: 0;\n }\n}\n@-webkit-keyframes preloader {\n 0% {\n -webkit-transform: scale(0, 0);\n opacity: 0.5;\n }\n 100% {\n -webkit-transform: scale(1, 1);\n opacity: 0;\n }\n}\n/*--- end of preloader ---*/\n/*----------------------------------------*/\n/* 2.11 search style\n/*----------------------------------------*/\n.at-search-form-toggle {\n position: fixed;\n top: 115px;\n left: 50%;\n max-width: 1136px;\n width: 100%;\n padding: 50px 60px 60px;\n border-radius: 16px;\n}\n@media (max-width: 574.98px) {\n .at-search-form-toggle {\n padding: 15px;\n }\n}\n.at-search-form-toggle {\n background-color: rgba(var(--at-neutral-50-rgb), 0.9);\n backdrop-filter: blur(20px);\n opacity: 0;\n -webkit-transform: translate(-50%, calc(-100% - 80px));\n -ms-transform: translate(-50%, calc(-100% - 80px));\n transform: translate(-50%, calc(-100% - 80px));\n -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;\n transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;\n transition-delay: 0s, 0s, 0s;\n -webkit-transition-delay: 0.5s;\n transition-delay: 0.5s;\n z-index: 9999;\n pointer-events: none;\n visibility: hidden;\n}\n.at-search-form-toggle.active {\n opacity: 1;\n pointer-events: auto;\n visibility: visible;\n -webkit-transform: translate(-50%, 0);\n -ms-transform: translate(-50%, 0);\n transform: translate(-50%, 0);\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n}\n.at-search-form-toggle.active .at-search-form-input {\n transform: translate(0, 0) !important;\n opacity: 1;\n transition-delay: 0.5s;\n}\n.at-search-form-btn {\n position: absolute;\n top: 50%;\n right: 12px;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n font-size: 16px;\n border-radius: 8px;\n}\n.at-search-form-input {\n position: relative;\n transform: translateY(-40px);\n transition: all 0.3s ease-in-out !important;\n transition-delay: 0.5s;\n padding: 12px 15px 12px 32px;\n border-radius: 8px;\n opacity: 0;\n border: 1px solid var(--at-neutral-100);\n background: var(--at-neutral-0);\n overflow: hidden;\n}\n.at-search-form-input input {\n width: 100%;\n height: 100%;\n border: 0;\n outline: 0;\n font-size: 24px;\n font-weight: 400;\n color: var(--at-common-black);\n display: inline-flex;\n justify-content: space-between;\n align-items: center;\n gap: 636px;\n background: var(--at-neutral-0);\n transition-delay: 0.5s;\n transition: all 0.3s ease-in-out !important;\n}\n.at-search-form-input input::-webkit-input-placeholder {\n /* Chrome/Opera/Safari */\n font-size: 24px;\n color: var(--at-neutral-500);\n}\n.at-search-form-input input::-moz-placeholder {\n /* Firefox 19+ */\n font-size: 24px;\n color: var(--at-neutral-500);\n}\n.at-search-form-input input:-moz-placeholder {\n /* Firefox 4-18 */\n font-size: 24px;\n color: var(--at-neutral-500);\n}\n.at-search-form-input input:-ms-input-placeholder {\n /* IE 10+ Edge*/\n font-size: 24px;\n color: var(--at-neutral-500);\n}\n.at-search-form-input input::placeholder {\n /* MODERN BROWSER */\n font-size: 24px;\n color: var(--at-neutral-500);\n}\n.at-search-form-input input:focus {\n border-color: transparent;\n}\n.at-search-form-input input:focus ~ .at-search-focus-border {\n width: 100%;\n left: 0;\n right: auto;\n transition: all 2s;\n}\n.at-search-form-input .at-search-focus-border {\n position: absolute;\n bottom: 0;\n left: auto;\n right: 0;\n width: 0;\n height: 1px;\n background-color: var(--at-common-black);\n transition: all 0.5s;\n}\n.at-search-close {\n color: var(--at-common-black);\n font-size: 40px;\n transition: all 0.3s ease;\n}\n.at-search-close:hover {\n color: var(--at-neutral-500);\n transform: rotate(180deg);\n}\n.at-search-body-overlay {\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: rgba(24, 24, 24, 0.5);\n z-index: 99;\n cursor: -webkit-zoom-out;\n cursor: zoom-out;\n pointer-events: none;\n -webkit-transform: translateY(calc(-100% - 80px));\n -ms-transform: translateY(calc(-100% - 80px));\n transform: translateY(calc(-100% - 80px));\n -webkit-transition: all 0.5s ease-in-out 0s;\n transition: all 0.5s ease-in-out 0s;\n -webkit-transition-delay: 0.3s;\n transition-delay: 0.3s;\n}\n.at-search-body-overlay.active {\n pointer-events: auto;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n}\n.at-search-dark {\n background-color: var(--at-common-black);\n}\n.at-search-dark .at-search-form-input input {\n color: var(--at-common-white);\n border-bottom: 1px solid var(--at-border-3);\n}\n.at-search-dark .at-search-form-input input ~ .at-search-focus-border {\n background-color: var(--at-common-white);\n}\n.at-search-dark .at-search-close {\n color: var(--at-common-white);\n}\n.at-search-dark .at-search-close:hover {\n color: var(--at-grey-2);\n}\n.at-search-dark .at-search-form-icon {\n color: var(--at-common-white);\n}\n\n.at-categories-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--at-neutral-900);\n margin-bottom: 16px;\n margin-top: 50px;\n}\n.at-categories-list {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n}\n.at-categories-item {\n display: flex;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 18px;\n border-radius: 100px;\n border: 1px solid var(--at-neutral-100);\n background: var(--at-neutral-0);\n color: var(--at-neutral-900);\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n letter-spacing: -0.8px;\n transition: all 0.3s ease;\n}\n.at-categories-item:hover {\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n border-color: var(--at-neutral-900);\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n/*----------------------------------------*/\n/* 2.8 Magic Cursor\n/*----------------------------------------*/\nbody.at-magic-cursor #magic-cursor {\n display: block;\n}\n\n#magic-cursor {\n position: absolute;\n display: none;\n width: 10px;\n height: 10px;\n pointer-events: none;\n z-index: 99999;\n opacity: 0;\n top: 0;\n left: 0;\n}\n\n/* Disable magic cursor on tablet/mobile (≤991px) and on touch/no-hover devices. */\n@media (max-width: 991.98px), (hover: none), (pointer: coarse) {\n body.at-magic-cursor #magic-cursor,\n #magic-cursor,\n #ball {\n display: none !important;\n }\n}\n#ball {\n position: fixed;\n display: flex;\n align-items: center;\n pointer-events: none;\n border-radius: 50%;\n color: transparent;\n justify-content: center;\n mix-blend-mode: difference;\n background-color: var(--at-common-black);\n}\n\n.cursor-bg-red #ball {\n background-color: #FF535B !important;\n}\n.cursor-bg-red #ball .ball-view {\n color: var(--at-common-white);\n}\n\n.cursor-bg-red-2 #ball {\n background-color: #FF481F !important;\n}\n.cursor-bg-red-2 #ball .ball-view {\n color: var(--at-common-white);\n}\n\n.cursor-bg-yellow #ball {\n background-color: #FFF669 !important;\n}\n.cursor-bg-yellow #ball .ball-view {\n color: var(--at-common-black);\n}\n\n.cursor-white-bg #ball .ball-view {\n color: var(--at-common-black);\n}\n\n/* Ball view \n============= */\n#ball .ball-view {\n position: absolute;\n opacity: 0;\n visibility: hidden;\n padding: 0 5px;\n font-size: 15px;\n font-weight: 500;\n line-height: 1.3;\n text-align: center;\n transform: scale(0);\n color: var(--at-common-black);\n}\n\n/* Ball drag \n============= */\n#ball .ball-drag {\n position: absolute;\n display: block;\n width: 100%;\n padding: 0 5px;\n font-size: 15px;\n font-weight: 600;\n line-height: 1.2;\n text-align: center;\n transition: all 0.3s;\n color: var(--at-common-black);\n}\n\n#ball .ball-drag::before,\n#ball .ball-drag::after {\n position: absolute;\n top: 50%;\n margin-top: -5px;\n font-size: 19px;\n height: 10px;\n line-height: 10px;\n font-weight: 900;\n display: inline-block;\n font-style: normal;\n font-variant: normal;\n text-rendering: auto;\n color: var(--at-common-white);\n font-family: \"Font Awesome 6 Pro\";\n -webkit-font-smoothing: antialiased;\n}\n\n#ball .ball-drag::before {\n content: \"\\f104\";\n /* Font Awesome */\n left: 0;\n transform: translate3d(-30px, 0, 0);\n transition: all 0.25s;\n}\n\n#ball .ball-drag::after {\n content: \"\\f105\";\n /* Font Awesome */\n right: 0;\n transform: translate3d(30px, 0, 0);\n transition: all 0.25s;\n}\n\n#ball.with-blur {\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n}\n\n/* Ball close \n============== */\n#ball.ball-close-enabled {\n opacity: 1 !important;\n}\n\n#ball .ball-close {\n position: absolute;\n padding: 0 5px;\n font-size: 14px;\n font-weight: 600;\n line-height: 1;\n text-align: center;\n color: var(--at-common-black);\n}\n\n.at-magnetic-wrap {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/*----------------------------------------*/\n/* 2.9 Nice Select\n/*----------------------------------------*/\n.nice-select {\n -webkit-tap-highlight-color: transparent;\n box-sizing: border-box;\n clear: both;\n cursor: pointer;\n display: block;\n outline: none;\n position: relative;\n -webkit-transition: all 0.2s ease-in-out;\n transition: all 0.2s ease-in-out;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n white-space: nowrap;\n width: auto;\n color: var(--at-neutral-900);\n padding-left: 55px;\n font-weight: 500;\n background-color: var(--at-neutral-0);\n border-radius: 5px;\n font-size: 20px;\n height: 50px;\n line-height: 48px;\n padding-right: 30px;\n font-family: var(--at-ff-body);\n}\n.nice-select:hover {\n border-color: ar(--at-theme-primary);\n}\n.nice-select::before {\n position: absolute;\n content: \"\";\n width: 48px;\n height: 2px;\n background-color: var(--at-neutral-900);\n top: 50%;\n left: 0;\n -webkit-transition: all 0.15s ease-in-out;\n transition: all 0.15s ease-in-out;\n margin-top: 0;\n transform-origin: center;\n -webkit-transform: translateY(-50%);\n -moz-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n -o-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.nice-select::after {\n position: absolute;\n content: \"\\f107\";\n top: 50%;\n right: 0;\n font-family: var(--at-ff-fontawesome);\n color: var(--at-neutral-900);\n font-weight: 600;\n pointer-events: none;\n font-size: 18px;\n -webkit-transition: all 0.15s ease-in-out;\n transition: all 0.15s ease-in-out;\n margin-top: 0;\n transform-origin: center;\n -webkit-transform: translateY(-50%);\n -moz-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n -o-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.nice-select.open::after {\n -webkit-transform: translateY(-50%) rotate(-180deg);\n -moz-transform: translateY(-50%) rotate(-180deg);\n -ms-transform: translateY(-50%) rotate(-180deg);\n -o-transform: translateY(-50%) rotate(-180deg);\n transform: translateY(-50%) rotate(-180deg);\n}\n.nice-select.open .list {\n opacity: 1;\n pointer-events: auto;\n -webkit-transform: scale(1) translateY(0);\n -ms-transform: scale(1) translateY(0);\n transform: scale(1) translateY(0);\n}\n.nice-select.disabled {\n border-color: #ededed;\n color: #999;\n pointer-events: none;\n}\n.nice-select.disabled::after {\n border-color: #cccccc;\n}\n.nice-select.wide {\n width: 100%;\n}\n.nice-select.wide .list {\n left: 0 !important;\n right: 0 !important;\n}\n.nice-select.right {\n float: right;\n}\n.nice-select.right .list {\n left: auto;\n right: 0;\n}\n.nice-select.small {\n font-size: 12px;\n height: 36px;\n line-height: 34px;\n}\n.nice-select.small::after {\n height: 4px;\n width: 4px;\n}\n.nice-select.small .option {\n line-height: 34px;\n min-height: 34px;\n}\n.nice-select .list {\n background-color: var(--at-neutral-0);\n width: 200px;\n border-radius: 5px;\n box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);\n box-sizing: border-box;\n margin-top: 4px;\n opacity: 0;\n overflow: hidden;\n padding: 10px;\n pointer-events: none;\n position: absolute;\n top: 100%;\n left: 0;\n -webkit-transform-origin: 50% 0;\n -ms-transform-origin: 50% 0;\n transform-origin: 50% 0;\n -webkit-transform: scale(0.75) translateY(-21px);\n -ms-transform: scale(0.75) translateY(-21px);\n transform: scale(0.75) translateY(-21px);\n -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;\n transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;\n z-index: 9;\n}\n.nice-select .option {\n cursor: pointer;\n font-weight: 500;\n line-height: 40px;\n list-style: none;\n min-height: 40px;\n outline: none;\n padding-left: 18px;\n padding-right: 29px;\n text-align: left;\n -webkit-transition: all 0.2s;\n transition: all 0.2s;\n border-radius: 12px;\n}\n.nice-select .option:hover {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-900);\n}\n.nice-select .option.disabled {\n background-color: transparent;\n color: #999;\n cursor: default;\n}\n.nice-select .option.selected {\n font-weight: 400;\n color: var(--at-theme-primary);\n}\n\n.no-csspointerevents .nice-select .list {\n display: none;\n}\n\n.no-csspointerevents .nice-select.open .list {\n display: block;\n}\n\n[data-bs-theme=dark] {\n --at-common-white: var(--at-common-dark-white);\n --at-common-white-rgb: var(--at-common-dark-white-rgb);\n --at-common-black: var(--at-common-dark-black);\n --at-common-black-rgb: var(--at-common-dark-black-rgb);\n --at-common-bubbles: var(--at-common-dark-bubbles);\n --at-neutral-0: var(--at-neutral-dark-0);\n --at-neutral-0-rgb: var(--at-neutral-dark-0-rgb);\n --at-neutral-50: var(--at-neutral-dark-50);\n --at-neutral-50-rgb: var(--at-neutral-dark-50-rgb);\n --at-neutral-100: var(--at-neutral-dark-100);\n --at-neutral-200: var(--at-neutral-dark-200);\n --at-neutral-300: var(--at-neutral-dark-300);\n --at-neutral-500: var(--at-neutral-dark-500);\n --at-neutral-700: var(--at-neutral-dark-700);\n --at-neutral-800: var(--at-neutral-dark-800);\n --at-neutral-900: var(--at-neutral-dark-900);\n --at-neutral-950: var(--at-neutral-dark-950);\n}\n[data-bs-theme=dark] .invert-1 {\n filter: invert(0);\n}\n[data-bs-theme=dark] .at-header-logo img,\n[data-bs-theme=dark] .at-offcanvas-logo img {\n filter: invert(1);\n}\n[data-bs-theme=dark] .invert-0 {\n filter: invert(0) !important;\n}\n[data-bs-theme=dark] .dark-mode-invert {\n filter: invert(1);\n}\n[data-bs-theme=dark] .at-main-menu nav ul li.has-dropdown > a::after {\n filter: invert(1);\n}\n[data-bs-theme=dark] .changeless {\n --at-common-white: #ffffff;\n --at-common-white-rgb: 255, 255, 255;\n --at-common-black: #1e1e1e;\n --at-common-bubbles: #e1eeb7;\n --at-neutral-950: #0f0f0f;\n --at-neutral-900: #1d1d1d;\n --at-neutral-800: #212121;\n --at-neutral-700: #303030;\n --at-neutral-500: #585959;\n --at-neutral-300: #b7b7b7;\n --at-neutral-100: #dfdfdf;\n --at-neutral-50: #f2f2f2;\n --at-neutral-0: #fefefe;\n}\n\n.dark-light-mode .toggle {\n display: grid;\n place-items: center;\n cursor: pointer;\n line-height: 1;\n}\n\n.dark-light-mode .input {\n display: none;\n}\n\n.dark-light-mode label {\n margin-bottom: 0 !important;\n}\n\n.dark-light-mode .icon {\n grid-column: 1/1;\n grid-row: 1/1;\n transition: transform 500ms;\n line-height: 0.1;\n}\n\n.dark-light-mode .icon--moon {\n transition-delay: 200ms;\n}\n\n.dark-light-mode .icon--sun {\n transform: scale(0);\n}\n\n.dark-light-mode #switch:checked + .icon--moon {\n transform: rotate(360deg) scale(0);\n}\n\n.dark-light-mode #switch:checked ~ .icon--sun {\n transition-delay: 200ms;\n transform: scale(1) rotate(360deg);\n}","@use '../utils' as *;\r\n/*-----------------------------------------------------------------------------------\r\n\r\n Template Name: Orisa - Creative Portfolio Agency HTML Template\r\n Author: AliThemes\r\n Support: https://alithemes.ticksy.com/\r\n Description: Orisa - Creative Portfolio Agency HTML Template\r\n Version: 1.0.0\r\n\r\n\r\n\r\n**********************************************/\r\n\r\n\r\n/*----------------------------------------*/\r\n/* 1.1 Default\r\n/*----------------------------------------*/\r\n\r\n@import url($font-url);\r\n\r\n* {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tbox-sizing: border-box;\r\n}\r\n\r\n/*---------------------------------\r\n\ttypography css start \r\n---------------------------------*/\r\nbody {\r\n\tfont-size: 16px;\r\n\tline-height: 1.2;\r\n\tfont-weight: normal;\r\n\tcolor: var(--at-neutral-900);\r\n\tbackground-color: var(--at-neutral-0);\r\n\tfont-family: var(--at-ff-body);\r\n}\r\n\r\nimg {\r\n\tmax-width: 100%;\r\n\theight: auto;\r\n}\r\n\r\na {\r\n\ttext-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n\tmargin-top: 0px;\r\n\tfont-weight: 700;\r\n\tline-height: 1.2;\r\n\tletter-spacing: -5%;\r\n\t@include at-transition(color);\r\n\tcolor: var(--at-neutral-900);\r\n\tfont-family: var(--at-ff-body);\r\n}\r\n\r\nh1,\r\n.h1 {\r\n\tfont-size: 70px;\r\n}\r\n\r\nh2,\r\n.h2 {\r\n\tfont-size: 60px;\r\n}\r\n\r\nh3,\r\n.h3 {\r\n\tfont-size: 52px;\r\n}\r\n\r\nh4,\r\n.h4 {\r\n\tfont-size: 38px;\r\n}\r\n\r\nh5,\r\n.h5 {\r\n\tfont-size: 26px;\r\n}\r\n\r\nh6,\r\n.h6 {\r\n\tfont-size: 20px;\r\n}\r\n\r\n.fz-font-lg {\r\n\tfont-size: 18px !important;\r\n}\r\n\r\n@media screen and (min-width: 1401px) {\r\n\r\n\th1,\r\n\t.h1 {\r\n\t\tfont-size: 84px;\r\n\t}\r\n\r\n\th2,\r\n\t.h2 {\r\n\t\tfont-size: 72px;\r\n\t}\r\n\r\n\th3,\r\n\t.h3 {\r\n\t\tfont-size: 64px;\r\n\t}\r\n\r\n\th4,\r\n\t.h4 {\r\n\t\tfont-size: 48px;\r\n\t}\r\n\r\n\th5,\r\n\t.h5 {\r\n\t\tfont-size: 34px;\r\n\t}\r\n\r\n\th6,\r\n\t.h6 {\r\n\t\tfont-size: 24px;\r\n\t}\r\n\r\n\t.fz-font-lg {\r\n\t\tfont-size: 20px !important;\r\n\t}\r\n\r\n\t.col-3xl-6 {\r\n\t\twidth: 50% !important;\r\n\t}\r\n}\r\n\r\nul {\r\n\tmargin: 0px;\r\n\tpadding: 0px;\r\n}\r\n\r\np {\r\n\tfont-size: 16px;\r\n\tfont-weight: 500;\r\n\tmargin-bottom: 15px;\r\n\tletter-spacing: -2%;\r\n\tline-height: 1.2;\r\n\tfont-family: var(--at-ff-body);\r\n\tcolor: var(--at-neutral-500);\r\n}\r\n\r\n\r\na,\r\nbutton,\r\np,\r\ninput,\r\nselect,\r\ntextarea,\r\nli,\r\n.transition-3 {\r\n\t@extend %transition;\r\n}\r\n\r\na:not([href]):not([class]),\r\na:not([href]):not([class]):hover {\r\n\tcolor: inherit;\r\n\ttext-decoration: none;\r\n}\r\n\r\na:focus,\r\n.button:focus {\r\n\ttext-decoration: none;\r\n\toutline: none;\r\n}\r\n\r\na:focus,\r\na:hover {\r\n\tcolor: inherit;\r\n\ttext-decoration: none;\r\n}\r\n\r\na,\r\nbutton {\r\n\tcolor: inherit;\r\n\toutline: none;\r\n\tborder: none;\r\n\tbackground: transparent;\r\n}\r\n\r\nbutton:hover {\r\n\tcursor: pointer;\r\n}\r\n\r\nbutton:focus {\r\n\toutline: 0;\r\n}\r\n\r\n.uppercase {\r\n\ttext-transform: uppercase;\r\n}\r\n\r\n.capitalize {\r\n\ttext-transform: capitalize;\r\n}\r\n\r\ninput[type=\"text\"],\r\ninput[type=\"email\"],\r\ninput[type=\"tel\"],\r\ninput[type=\"number\"],\r\ninput[type=\"password\"],\r\ninput[type=\"url\"],\r\ntextarea {\r\n\toutline: none;\r\n\theight: 56px;\r\n\twidth: 100%;\r\n\tline-height: 56px;\r\n\tfont-size: 14px;\r\n\tcolor: var(--at-neutral-900);\r\n\r\n\t@include at-placeholder {\r\n\t\tcolor: var(--at-neutral-500);\r\n\t}\r\n\r\n\t&:focus {\r\n\t\tborder-color: var(--at-neutral-900);\r\n\r\n\t\t&::placeholder {\r\n\t\t\topacity: 0;\r\n\t\t}\r\n\t}\r\n\r\n}\r\n\r\ntextarea {\r\n\tline-height: 1.4;\r\n\tpadding-top: 17px;\r\n\tpadding-bottom: 17px;\r\n}\r\n\r\ninput[type=\"color\"] {\r\n\tappearance: none;\r\n\t-moz-appearance: none;\r\n\t-webkit-appearance: none;\r\n\tbackground: none;\r\n\tborder: 0;\r\n\tcursor: pointer;\r\n\theight: 100%;\r\n\twidth: 100%;\r\n\tpadding: 0;\r\n\tborder-radius: 50%;\r\n}\r\n\r\n*::-moz-selection {\r\n\tbackground: var(--at-neutral-900);\r\n\tcolor: var(--at-neutral-0);\r\n\ttext-shadow: none;\r\n}\r\n\r\n::-moz-selection {\r\n\tbackground: var(--at-neutral-900);\r\n\tcolor: var(--at-neutral-0);\r\n\ttext-shadow: none;\r\n}\r\n\r\n::selection {\r\n\tbackground: var(--at-neutral-900);\r\n\tcolor: var(--at-neutral-0);\r\n\ttext-shadow: none;\r\n}\r\n\r\n*::-moz-placeholder {\r\n\tcolor: var(--at-neutral-900);\r\n\tfont-size: 14px;\r\n\topacity: 1;\r\n}\r\n\r\n*::placeholder {\r\n\tcolor: var(--at-neutral-900);\r\n\tfont-size: 14px;\r\n\topacity: 1;\r\n}","/* beautify ignore:start */\r\n$colors: (\r\n 'common': (\r\n 'white': #ffffff,\r\n 'white-rgb': (255, 255, 255),\r\n 'black': #1e1e1e,\r\n 'black-rgb': (30, 30, 30),\r\n 'bubbles': #e1eeb7,\r\n ),\r\n 'common-dark': (\r\n 'white': #1e1e1e,\r\n 'white-rgb': (30, 30, 30),\r\n 'black': #FFFFFF,\r\n 'black-rgb': (255, 255, 255),\r\n 'bubbles': #040403,\r\n ),\r\n 'neutral': (\r\n '0': #FEFEFE,\r\n '0-rgb': (254, 254, 254),\r\n '50': #F2F2F2,\r\n '50-rgb': (242, 242, 242),\r\n '100': #DFDFDF,\r\n '200': #CDCCCC,\r\n '300': #B7B7B7,\r\n '500': #585959,\r\n '700': #303030,\r\n '800': #212121,\r\n '900': #1D1D1D,\r\n '950': #0F0F0F,\r\n ),\r\n 'neutral-dark': (\r\n '0': #0C0C0C,\r\n '0-rgb': (12, 12, 12),\r\n '50': #141414,\r\n '50-rgb': (20, 20, 20),\r\n '100': #212121,\r\n '200': #2D2D2D,\r\n '300': #404040,\r\n '500': #B3B3B3,\r\n '700': #535353,\r\n '800': #EAEAEA,\r\n '900': #EFEFEF,\r\n '950': #F4F4F4,\r\n ),\r\n 'grey': (\r\n '1':#5e5959,\r\n '2':#f3f3f3,\r\n '3':#b6bcc6,\r\n '4':#f6f6f6,\r\n '5':#d7cdcd,\r\n ),\r\n 'theme': ('primary': #F0460E,\r\n ),\r\n 'gradient':('primary': linear-gradient(90deg, #a020f0 0%, #00ffd1 100%),\r\n ),\r\n);","@use './mixins' as *;\r\n\r\n%include-bg {\r\n\t@include at-background();\r\n}\r\n\r\n%transition {\r\n\t@include at-transition();\r\n}\r\n\r\n// svg\r\n\r\n%svg-1 {\r\n\t@include at-transform(translateY(-1px));\r\n}\r\n\r\n%svg-2 {\r\n\t@include at-transform(translateY(-2px));\r\n}\r\n\r\n%svg-3 {\r\n\t@include at-transform(translateY(-3px));\r\n}\r\n\r\n%svg-4 {\r\n\t@include at-transform(translateY(-4px));\r\n}\r\n\r\n\r\n/* transform */\r\n%translateY2 {\r\n\t@include at-transform(translateY(-50%));\r\n}\r\n\r\n%translateX2 {\r\n\t@include at-transform(translateX(-50%));\r\n}\r\n\r\n%translate2 {\r\n\t@include at-transform(translate(-50%, -50%));\r\n}\r\n\r\n\r\n// bg thumbnails\r\n%bg-thumb {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}"," @use \"sass:selector\";\r\n\r\n @mixin root($child) {\r\n @at-root #{selector.unify(&, $child)} {\r\n @content;\r\n }\r\n }\r\n\r\n // placeholder input\r\n @mixin at-placeholder {\r\n &::-webkit-input-placeholder {\r\n /* Chrome/Opera/Safari */\r\n @content;\r\n }\r\n\r\n &::-moz-placeholder {\r\n /* Firefox 19+ */\r\n @content;\r\n }\r\n\r\n &:-moz-placeholder {\r\n /* Firefox 4-18 */\r\n @content;\r\n }\r\n\r\n &:-ms-input-placeholder {\r\n /* IE 10+ Edge*/\r\n @content;\r\n }\r\n\r\n &::placeholder {\r\n /* MODERN BROWSER */\r\n @content;\r\n }\r\n }\r\n\r\n // keyframes \r\n @mixin keyframes($name) {\r\n @-webkit-keyframes #{$name} {\r\n @content;\r\n }\r\n\r\n @-moz-keyframes #{$name} {\r\n @content;\r\n }\r\n\r\n @-ms-keyframes #{$name} {\r\n @content;\r\n }\r\n\r\n @keyframes #{$name} {\r\n @content;\r\n }\r\n }\r\n\r\n // gradient \r\n @mixin at-gradient($value, $type : \"linear\") {\r\n\r\n @if $type ==linear {\r\n background-image: -webkit-linear-gradient($value);\r\n background-image: -moz-linear-gradient($value);\r\n background-image: -ms-linear-gradient($value);\r\n background-image: -o-linear-gradient($value);\r\n background-image: linear-gradient($value);\r\n }\r\n\r\n @else {\r\n background-image: -webkit-radial-gradient($value);\r\n background-image: -moz-radial-gradient($value);\r\n background-image: -ms-radial-gradient($value);\r\n background-image: -o-radial-gradient($value);\r\n background-image: radial-gradient($value);\r\n }\r\n }\r\n\r\n // animate \r\n @mixin animation($property) {\r\n -webkit-animation: $property;\r\n -moz-animation: $property;\r\n -ms-animation: $property;\r\n -o-animation: $property;\r\n animation: $property;\r\n }\r\n\r\n //backgroud \r\n @mixin at-background {\r\n background-position: center;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n // transition specific\r\n @mixin at-transition($property: all, $time: .3s, $func : ease-out) {\r\n -webkit-transition: $property $time $func;\r\n -moz-transition: $property $time $func;\r\n -ms-transition: $property $time $func;\r\n -o-transition: $property $time $func;\r\n transition: $property $time $func;\r\n }\r\n\r\n // transition multiple\r\n @mixin at-transition-mul($property) {\r\n -webkit-transition: $property;\r\n -moz-transition: $property;\r\n -ms-transition: $property;\r\n -o-transition: $property;\r\n transition: $property ;\r\n }\r\n\r\n\r\n // transform\r\n @mixin at-transform($transforms) {\r\n -webkit-transform: $transforms;\r\n -moz-transform: $transforms;\r\n -ms-transform: $transforms;\r\n -o-transform: $transforms;\r\n transform: $transforms;\r\n }\r\n\r\n // Flexbox display\r\n @mixin flexbox() {\r\n display: -webkit-box;\r\n display: -moz-box;\r\n display: -ms-flexbox;\r\n display: -webkit-flex;\r\n display: flex;\r\n }\r\n\r\n // gradient\r\n @mixin at-textGradient() {\r\n background: linear-gradient(90deg, #a020f0 0%, #00ffd1 100%);\r\n background-clip: text;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n // border--botom-default\r\n @mixin bgborder ($color, $bgsize, $bgsize2) {\r\n background-image: linear-gradient($color, $color), linear-gradient($color, $color);\r\n background-size: $bgsize 1px, $bgsize2 1px;\r\n background-position: 100% 100%, 0 100%;\r\n background-repeat: no-repeat;\r\n transition: background-size 0.3s linear;\r\n }","/* beautify ignore:start */\r\n\r\n// font url\r\n\r\n$font-url: 'https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&display=swap\"';\r\n\r\n// font family\r\n$font-family: (\r\n 'ff': (\r\n 'body': \"'DM Sans', sans-serif\",\r\n 'heading': \"'DM Sans', sans-serif\",\r\n 'fontawesome': '\"Font Awesome 6 Pro\"',\r\n ),\r\n);\r\n\r\n// font size\r\n$font-size: (\r\n 'fz': (\r\n 'body': 14px,\r\n 'font-label': 12px,\r\n 'font-md': 16px,\r\n 'font-lg': 20px,\r\n 'font-xl': 22px,\r\n 'font-2xl': 28px,\r\n 'font-3xl': 32px,\r\n 'ds-1': 124px,\r\n '24': 24px,\r\n '10': 10px,\r\n ),\r\n);\r\n// font size lg\r\n$font-size-lg: (\r\n 'fz': (\r\n 'body': 16px,\r\n 'font-label': 12px,\r\n 'font-md': 18px,\r\n 'font-lg': 20px,\r\n 'font-xl': 22px,\r\n 'font-2xl': 26px,\r\n 'font-3xl': 28px,\r\n 'ds-1': 72px,\r\n ),\r\n);\r\n// font size md\r\n$font-size-md: (\r\n 'fz': (\r\n 'body': 14px,\r\n 'font-label': 12px,\r\n 'font-md': 16px,\r\n 'font-lg': 18px,\r\n 'font-xl': 20px,\r\n 'font-2xl': 24px,\r\n 'font-3xl': 26px,\r\n 'ds-1': 60px,\r\n ),\r\n);\r\n// font size xs\r\n$font-size-xs: (\r\n 'fz': (\r\n 'body': 14px,\r\n 'font-label': 12px,\r\n 'font-md': 14px,\r\n 'font-lg': 16px,\r\n 'font-xl': 18px,\r\n 'font-2xl': 22px,\r\n 'font-3xl': 24px,\r\n 'ds-1': 54px,\r\n ),\r\n);\r\n","$theme-prifix: 'at';\r\n@use './breakpoints' as *;\r\n\r\n.rotate-90 {\r\n rotate: 90deg;\r\n}\r\n\r\n.fz-150 {\r\n font-size: 120px;\r\n}\r\n\r\n.fz-170 {\r\n font-size: 130px;\r\n}\r\n\r\n.fz-180 {\r\n font-size: 160px;\r\n}\r\n\r\n.fz-200 {\r\n font-size: 150px;\r\n}\r\n\r\n.fz-240 {\r\n font-size: 240px;\r\n}\r\n\r\n.fz-290 {\r\n font-size: 220px;\r\n}\r\n\r\n.fz-120 {\r\n font-size: 80px;\r\n}\r\n\r\n.fz-ds-1 {\r\n font-size: 80px !important;\r\n}\r\n\r\n@media screen and (min-width: 1441px) {\r\n .fz-150 {\r\n font-size: 150px;\r\n }\r\n\r\n .fz-170 {\r\n font-size: 170px;\r\n }\r\n\r\n .fz-180 {\r\n font-size: 180px;\r\n }\r\n\r\n .fz-200 {\r\n font-size: 200px;\r\n }\r\n\r\n .fz-290 {\r\n font-size: 290px;\r\n }\r\n\r\n .fz-120 {\r\n font-size: 120px;\r\n }\r\n\r\n .fz-ds-1 {\r\n font-size: 124px !important;\r\n }\r\n\r\n .footer-2-connect-title {\r\n font-size: 220px;\r\n }\r\n\r\n .col-xxl-10 {\r\n flex: 0 0 auto;\r\n width: 66.66666667% !important;\r\n }\r\n}\r\n\r\n.fz-60 {\r\n font-size: 60px;\r\n}\r\n\r\n.fz-18 {\r\n font-size: 18px;\r\n}\r\n\r\n.opacity-10 {\r\n opacity: 0.1;\r\n}\r\n\r\n.invert-0 {\r\n filter: invert(0);\r\n}\r\n\r\n.invert-1 {\r\n filter: invert(1);\r\n}\r\n\r\n.topbar {\r\n border-bottom-right-radius: 16px;\r\n border-bottom-left-radius: 16px;\r\n padding: 7px 0;\r\n}\r\n\r\n.category-tag {\r\n display: inline-flex;\r\n padding: 10px 12px;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 4px;\r\n border-radius: 25px;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n background: var(--at-neutral-0, #fefefe);\r\n color: var(--at-neutral-900);\r\n font-size: 12px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: normal;\r\n letter-spacing: -0.24px;\r\n text-transform: uppercase;\r\n position: relative;\r\n\r\n & .dot {\r\n width: 6px;\r\n height: 6px;\r\n background: #45a557;\r\n border-radius: 50%;\r\n }\r\n}\r\n\r\n.odometer {\r\n letter-spacing: 12px;\r\n}\r\n\r\n.sec-1-services {\r\n padding-top: 86px;\r\n}\r\n\r\n.cilent-word-wide {\r\n &-content {\r\n border-radius: 8px;\r\n background: rgba(254, 254, 254, 0.6);\r\n backdrop-filter: blur(4px);\r\n padding: 20px;\r\n\r\n & .avatar {\r\n width: 56px;\r\n height: 56px;\r\n margin-left: -25px;\r\n border-radius: 86.296px;\r\n border: 3.5px solid var(--at-neutral-0);\r\n overflow: hidden;\r\n transition: all 0.3s ease-in-out;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n &:first-child {\r\n margin-left: 0;\r\n }\r\n\r\n &:hover {\r\n transform: translateY(-2px);\r\n }\r\n }\r\n }\r\n}\r\n\r\n.bg-coating {\r\n position: relative;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n backdrop-filter: blur(0px);\r\n z-index: 1;\r\n }\r\n}\r\n\r\n.fill-primary {\r\n path {\r\n fill: var(--at-theme-primary);\r\n }\r\n}\r\n\r\n.px-blur-bottom {\r\n -webkit-backdrop-filter: blur(10px);\r\n backdrop-filter: blur(10px);\r\n bottom: 0;\r\n -webkit-box-flex: 0;\r\n -ms-flex: none;\r\n flex: none;\r\n height: 80px;\r\n left: 0;\r\n -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)) add;\r\n -webkit-mask: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 100%) add;\r\n mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)) add;\r\n mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 100%) add;\r\n overflow: visible;\r\n position: fixed;\r\n right: 0;\r\n pointer-events: none;\r\n z-index: 999;\r\n}\r\n\r\n.block-author {\r\n .avatar {\r\n margin-right: -22px;\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 100px;\r\n border: 4px solid var(--at-common-white);\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n :nth-last-child(1) {\r\n margin-right: 0;\r\n }\r\n}\r\n\r\n.at-brand-area {\r\n position: relative;\r\n padding: 50px 0;\r\n border-top: 1px solid var(--at-neutral-100);\r\n border-bottom: 1px solid var(--at-neutral-100);\r\n\r\n &::before {\r\n position: absolute;\r\n content: '';\r\n width: 230px;\r\n height: 100%;\r\n background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--at-neutral-0) 100%);\r\n left: 0;\r\n top: 0;\r\n z-index: 3;\r\n }\r\n\r\n &::after {\r\n position: absolute;\r\n content: '';\r\n width: 230px;\r\n height: 100%;\r\n background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--at-neutral-0) 100%);\r\n right: 0;\r\n top: 0;\r\n z-index: 3;\r\n transform: rotate(-180deg);\r\n }\r\n}\r\n\r\n.page-loader {\r\n position: fixed;\r\n width: 100vw;\r\n height: 100vh;\r\n z-index: 99999;\r\n display: flex;\r\n top: 0;\r\n}\r\n\r\n.page-loader .page-loader-logo {\r\n display: inline;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-50%);\r\n}\r\n\r\n.bar {\r\n width: 10vw;\r\n height: 105vh;\r\n background: #1d1d1d;\r\n}\r\n\r\n// Swiper customize\r\n.swiper-button-wrapper {\r\n display: flex;\r\n gap: 10px;\r\n}\r\n\r\n.swiper-btn-next,\r\n.swiper-btn-prev {\r\n display: flex;\r\n width: 50px;\r\n height: 50px;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 100px;\r\n border: 1px solid var(--at-neutral-700);\r\n background-color: var(--at-neutral-800);\r\n transition: all 0.3s ease-in-out;\r\n color: var(--at-common-white);\r\n\r\n &::after {\r\n content: '';\r\n }\r\n\r\n &:hover,\r\n :active {\r\n border-color: rgba(255, 255, 255, 0.3);\r\n background-color: var(--at-neutral-700);\r\n transition: all 0.3s ease-in-out;\r\n }\r\n}\r\n\r\n.swiper-pagination {\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 5px 8px;\r\n align-items: center;\r\n left: 50% !important;\r\n width: unset !important;\r\n gap: 5px;\r\n border-radius: 100px;\r\n background: rgba(255, 255, 255, 0.5);\r\n backdrop-filter: blur(1px);\r\n transform: translateX(-50%);\r\n\r\n .swiper-pagination-bullet {\r\n width: 8px;\r\n height: 8px;\r\n text-align: center;\r\n line-height: 8px;\r\n font-size: 12px;\r\n color: var(--at-neutral-900);\r\n opacity: 1;\r\n background-color: var(--at-neutral-0);\r\n }\r\n\r\n .swiper-pagination-bullet-active {\r\n color: var(--at-neutral-900);\r\n background-color: var(--at-neutral-900);\r\n }\r\n}\r\n\r\n.pagination {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n list-style: none;\r\n margin-top: 70px;\r\n padding: 0;\r\n\r\n .pagination_item {\r\n background: var(--at-neutral-0);\r\n border-radius: 50%;\r\n border: 1px solid var(--at-neutral-100);\r\n width: 42px;\r\n height: 42px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: var(--at-fz-font-lg);\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-900);\r\n transition: all 0.3s ease-in-out;\r\n\r\n svg {\r\n path {\r\n fill: var(--at-neutral-900) !important;\r\n }\r\n }\r\n\r\n &:hover {\r\n color: var(--at-neutral-0) !important;\r\n background: var(--at-neutral-900) !important;\r\n border-color: var(--at-neutral-900) !important;\r\n\r\n svg {\r\n path {\r\n fill: var(--at-neutral-0) !important;\r\n }\r\n }\r\n }\r\n\r\n &:focus {\r\n box-shadow: none;\r\n background-color: var(--at-neutral-900) !important;\r\n border-color: var(--at-neutral-900);\r\n color: var(--at-neutral-0) !important;\r\n\r\n svg {\r\n path {\r\n fill: var(--at-neutral-0) !important;\r\n }\r\n }\r\n }\r\n\r\n &.current {\r\n color: var(--at-neutral-0) !important;\r\n background: var(--at-neutral-900) !important;\r\n border-color: var(--at-neutral-900) !important;\r\n\r\n svg {\r\n path {\r\n fill: var(--at-neutral-0) !important;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.slider-testimonial-thumbs {\r\n .swiper-wrapper {\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n .swiper-slide:nth-child(1) {\r\n position: absolute;\r\n top: 25%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n margin-left: -200px;\r\n }\r\n\r\n .swiper-slide:nth-child(2) {\r\n position: absolute;\r\n top: 10%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n margin-left: -100px;\r\n }\r\n\r\n .swiper-slide:nth-child(3) {\r\n position: relative;\r\n z-index: 5;\r\n }\r\n\r\n .swiper-slide:nth-child(4) {\r\n position: absolute;\r\n z-index: 4;\r\n top: 10%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n margin-left: 100px;\r\n }\r\n\r\n .swiper-slide:nth-child(5) {\r\n position: absolute;\r\n z-index: 3;\r\n top: 25%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n margin-left: 200px;\r\n }\r\n\r\n @media #{$xs} {\r\n .swiper-slide:nth-child(1) {\r\n margin-left: -95px;\r\n }\r\n\r\n .swiper-slide:nth-child(2) {\r\n margin-left: -45px;\r\n }\r\n\r\n .swiper-slide:nth-child(4) {\r\n margin-left: 45px;\r\n }\r\n\r\n .swiper-slide:nth-child(5) {\r\n margin-left: 95px;\r\n }\r\n }\r\n\r\n .swiper-slide {\r\n width: 150px !important;\r\n height: 150px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n @media #{$xs} {\r\n width: 70px !important;\r\n height: 70px;\r\n }\r\n\r\n &.swiper-slide-thumb-active {\r\n .avatar-thumbnail {\r\n transform: scale(1.05);\r\n transition: all 0.3s ease-in-out;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.image-slider {\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--at-neutral-100, #dfdfdf);\r\n}\r\n\r\n.avatar-thumbnail {\r\n width: 150px;\r\n height: 150px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n border: 8px solid var(--at-neutral-0);\r\n\r\n @media #{$xl,$lg,$md} {\r\n width: 120px;\r\n height: 120px;\r\n }\r\n\r\n @media #{$xs} {\r\n width: 60px;\r\n height: 60px;\r\n border-width: 4px;\r\n }\r\n}\r\n\r\n/* Text Truncation */\r\n\r\n.text-truncate-1 {\r\n display: -webkit-box;\r\n -webkit-line-clamp: 1;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-height: 1.5em;\r\n}\r\n\r\n.text-truncate-2 {\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-height: 3em;\r\n}\r\n\r\n.text-truncate-3 {\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-height: 4.5em;\r\n}\r\n\r\n.text-truncate-4 {\r\n display: -webkit-box;\r\n -webkit-line-clamp: 4;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-height: 6em;\r\n}\r\n\r\n.text-truncate-5 {\r\n display: -webkit-box;\r\n -webkit-line-clamp: 5;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-height: 8em;\r\n}\r\n\r\n.at-image-hover {\r\n .content {\r\n opacity: 0;\r\n transition: all 0.5s ease;\r\n transform: translateY(-15px);\r\n }\r\n\r\n .zoom-blur-image {\r\n transition: all 0.5s ease;\r\n }\r\n\r\n &:hover {\r\n .content {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .zoom-blur-image {\r\n transition: all 0.5s ease;\r\n filter: blur(5px);\r\n scale: 1.05;\r\n }\r\n }\r\n}\r\n\r\n.border-bottom-900 {\r\n border-bottom: 1px solid var(--at-neutral-900);\r\n}\r\n\r\n.border-bottom-950 {\r\n border-bottom: 1px solid var(--at-neutral-950);\r\n}\r\n\r\n.border-100 {\r\n border: 1px solid var(--at-neutral-100) !important;\r\n}\r\n\r\n.border-bottom-opacity {\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.border-top-opacity {\r\n border-top: 1px solid rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.border-top-100 {\r\n border-top: 1px solid var(--at-neutral-100) !important;\r\n}\r\n\r\n.border-bottom-100 {\r\n border-bottom: 1px solid var(--at-neutral-100) !important;\r\n}\r\n\r\n.sec-1-home-3 {\r\n @media #{$md,$xs} {\r\n .mb-100 {\r\n margin-bottom: 50px;\r\n }\r\n }\r\n}\r\n\r\n.card-item {\r\n &__bg {\r\n border-radius: 16px;\r\n border: 9px solid rgba(255, 255, 255, 0.3);\r\n overflow: hidden;\r\n }\r\n\r\n &-avatar {\r\n margin: 30px;\r\n\r\n img {\r\n border-radius: 100px;\r\n border: 4px solid var(--at-neutral-0);\r\n display: inline-flex;\r\n height: 65px;\r\n justify-content: flex-end;\r\n align-items: center;\r\n }\r\n }\r\n\r\n &-content {\r\n margin: 40px;\r\n\r\n svg {\r\n width: 40px;\r\n height: 40px;\r\n margin-bottom: 19px;\r\n }\r\n }\r\n}\r\n\r\n.at-brand-item {\r\n display: flex;\r\n width: 180px;\r\n height: 180px;\r\n padding: 0 29px 0 30px;\r\n justify-content: center;\r\n align-items: center;\r\n flex-shrink: 0;\r\n border-radius: 16px;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n background: var(--at-neutral-0, #fefefe);\r\n\r\n @media #{$md,$xs} {\r\n width: 165px;\r\n height: 165px;\r\n }\r\n}\r\n\r\n.home-3-section-12 {\r\n .box-newsletter {\r\n position: relative;\r\n border-radius: 42px;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n bottom: -20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: -1;\r\n width: 90%;\r\n height: 20%;\r\n border-radius: 42px;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n background: var(--at-neutral-0, #fefefe);\r\n }\r\n }\r\n}\r\n\r\n.scroll-active-item {\r\n & .item {\r\n &.active {\r\n .block-number {\r\n background: var(--at-theme-primary) !important;\r\n transition: all 0.3s ease;\r\n\r\n .number {\r\n color: var(--at-neutral-0);\r\n transition: all 0.3s ease;\r\n }\r\n }\r\n\r\n & .rectangular {\r\n &::after {\r\n opacity: 1;\r\n width: 99px;\r\n height: 99px;\r\n transition: all 0.3s ease;\r\n }\r\n }\r\n }\r\n\r\n & .rectangular {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 90%;\r\n height: 50px;\r\n background: var(--at-neutral-800);\r\n border-radius: 16px;\r\n border: 1px solid var(--at-neutral-700);\r\n padding: 50px;\r\n z-index: -2;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 0;\r\n height: 0;\r\n background: var(--at-theme-primary);\r\n filter: blur(125px);\r\n opacity: 0;\r\n z-index: -1;\r\n transition: all 0.5s ease;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.input-subscribe {\r\n position: relative;\r\n background: #fefefe;\r\n padding: 12px 14px 12px 32px;\r\n border-radius: 8px;\r\n\r\n & input {\r\n width: 100%;\r\n height: 100%;\r\n border: none !important;\r\n outline: none;\r\n }\r\n}\r\n\r\n.navigation-section-10 {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n\r\n .item {\r\n width: 100px;\r\n height: 100px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n transition: all 0.3s ease;\r\n\r\n @media #{$xl,$lg} {\r\n width: 70px;\r\n height: 70px;\r\n }\r\n\r\n @media #{$xs} {\r\n width: 58px;\r\n height: 58px;\r\n }\r\n\r\n &.active {\r\n scale: 0.9;\r\n transition: all 0.3s ease;\r\n }\r\n }\r\n}\r\n\r\n.navigation-sec4home3 {\r\n .item {\r\n padding: 10px 0;\r\n border-bottom: 1px solid var(--at-neutral-100);\r\n transition: all 0.3s ease;\r\n\r\n .content {\r\n span {\r\n flex: 0 0 60px;\r\n }\r\n\r\n .h6 {\r\n flex: 1;\r\n }\r\n\r\n svg {\r\n opacity: 0;\r\n transition: all 0.3s ease;\r\n }\r\n }\r\n\r\n &.active {\r\n background-color: var(--at-neutral-100);\r\n\r\n .content {\r\n margin: 0 16px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n svg {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.border-white\\/01 {\r\n border-right: 1px solid var(--at-neutral-100);\r\n}\r\n\r\n.border-dark\\/01 {\r\n border-right: 1px solid var(--at-neutral-900);\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .md\\:grid-cols-7 {\r\n grid-template-columns: repeat(7, minmax(0, 1fr));\r\n }\r\n}\r\n\r\n.icon-shape {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.w-lg-50 {\r\n @media #{$lg} {\r\n width: 50%;\r\n }\r\n}\r\n\r\n@media #{$xs} {\r\n .w-50 {\r\n width: 100% !important;\r\n }\r\n}\r\n\r\n.size-30 {\r\n width: 30px;\r\n height: 30px;\r\n}\r\n\r\n.size-40 {\r\n width: 40px;\r\n height: 40px;\r\n}\r\n\r\n.size-50 {\r\n width: 50px;\r\n height: 50px;\r\n}\r\n\r\n.size-56 {\r\n width: 56px;\r\n height: 56px;\r\n}\r\n\r\n.size-80 {\r\n width: 80px;\r\n height: 80px;\r\n}\r\n\r\n.size-100 {\r\n width: 100px !important;\r\n height: 100px !important;\r\n}\r\n\r\n.size-190 {\r\n width: 190px;\r\n height: 190px;\r\n}\r\n\r\n.cart-stats {\r\n &__item {\r\n display: flex;\r\n align-items: flex-end;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n border-bottom: 1px solid var(--at-neutral-100);\r\n padding-bottom: 42px;\r\n margin-bottom: 50px;\r\n\r\n &-title {\r\n flex: 1;\r\n letter-spacing: -1.2px;\r\n }\r\n\r\n &-content {\r\n flex: 0 0 500px;\r\n margin-top: 16px;\r\n }\r\n }\r\n}\r\n\r\n/* Allow page scroll when cursor is in empty area; children (.client-capsule-wrapper > *) keep pointer-events: auto for drag */\r\n.client-capsule-wrapper-box {\r\n pointer-events: none;\r\n}\r\n\r\n.client-capsule-wrapper {\r\n position: relative;\r\n overflow: hidden;\r\n pointer-events: none;\r\n margin-top: -200px;\r\n height: 633px;\r\n}\r\n\r\n.client-box {\r\n width: 250px;\r\n height: 100px;\r\n padding: 10px 20px;\r\n background-color: var(--at-neutral-900);\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 100px;\r\n transform: translate(-50%, -50%) rotate(0rad);\r\n\r\n @media #{$xl,$lg} {\r\n width: 200px;\r\n height: 75px;\r\n }\r\n\r\n @media #{$md} {\r\n width: 150px;\r\n height: 60px;\r\n }\r\n\r\n @media #{$xs} {\r\n width: 100px;\r\n height: 40px;\r\n }\r\n}\r\n\r\n.client-capsule-wrapper>* {\r\n position: absolute;\r\n display: inline-block;\r\n margin-bottom: 0;\r\n left: 0;\r\n top: 0;\r\n user-select: none;\r\n pointer-events: auto;\r\n transition: none;\r\n}\r\n\r\n.client-box img {\r\n pointer-events: none;\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\n// countdown\r\n.box-count {\r\n text-align: left;\r\n margin: 0px 0px 20px 0px;\r\n\r\n .deals-countdown {\r\n border-radius: 0px;\r\n display: flex;\r\n padding: 4px 0px;\r\n width: 100%;\r\n margin: auto;\r\n max-width: 100%;\r\n\r\n .countdown-section {\r\n display: inline-block;\r\n text-align: center;\r\n width: 25%;\r\n line-height: 12px;\r\n position: relative;\r\n\r\n span {\r\n display: block;\r\n color: var(--at-common-white);\r\n }\r\n\r\n .countdown-period {\r\n text-transform: capitalize;\r\n }\r\n\r\n &:last-child {\r\n &::before {\r\n display: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.box-count-square {\r\n margin-bottom: 5px;\r\n\r\n .deals-countdown {\r\n background-color: var(--at-neutral-0);\r\n width: 100%;\r\n margin: auto;\r\n text-align: left;\r\n display: flex;\r\n max-width: 100%;\r\n\r\n .countdown-section {\r\n display: inline-block;\r\n text-align: center;\r\n line-height: 12px;\r\n position: relative;\r\n margin: 0px 16px 0px 0px;\r\n width: auto;\r\n\r\n .countdown-period {\r\n color: var(--at-neutral-900);\r\n font-size: 24px;\r\n line-height: normal;\r\n font-weight: 600;\r\n\r\n @media #{$md} {\r\n font-size: 20px;\r\n line-height: 20px;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 16px;\r\n line-height: 16px;\r\n }\r\n }\r\n }\r\n\r\n .countdown-amount {\r\n background-color: var(--at-neutral-50);\r\n border-radius: 12px;\r\n color: var(--at-neutral-900);\r\n width: 176px;\r\n padding: 50px 40px;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n height: 180px;\r\n display: inline-block;\r\n margin-bottom: 5px;\r\n font-size: 72px !important;\r\n font-weight: 600;\r\n line-height: 76px !important;\r\n\r\n @media #{$md} {\r\n width: 130px;\r\n height: 140px;\r\n padding: 50px 40px;\r\n font-size: 40px !important;\r\n line-height: 40px !important;\r\n }\r\n\r\n @media #{$xs} {\r\n width: 65px;\r\n height: 70px;\r\n padding: 22px 5px;\r\n font-size: 24px !important;\r\n line-height: 24px !important;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.menu-list {\r\n .menu-list__item {\r\n transition: all 0.3s ease;\r\n border-bottom: 1px solid var(--at-neutral-300);\r\n position: relative;\r\n\r\n .text {\r\n transition: all 0.3s ease;\r\n font-weight: 600;\r\n }\r\n\r\n &.hasdot {\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: 0;\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background-color: var(--at-neutral-0);\r\n transform: translateY(-50%) translateX(-100%);\r\n transition: all 0.3s ease;\r\n opacity: 0;\r\n }\r\n\r\n &:hover {\r\n &::before {\r\n opacity: 50%;\r\n transform: translateY(-50%) translateX(0);\r\n }\r\n }\r\n }\r\n\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n right: 0;\r\n width: 12px;\r\n height: 12px;\r\n transform: translateY(-50%) translateX(-100%);\r\n background-image: url('data:image/svg+xml,');\r\n background-size: auto;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n opacity: 0.5;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n &:hover {\r\n .text {\r\n margin-left: 18px;\r\n }\r\n\r\n &::after {\r\n opacity: 1;\r\n transform: translateY(-50%) translateX(-5px);\r\n }\r\n }\r\n }\r\n\r\n &.style-2 {\r\n .menu-list__item {\r\n &.hasdot {\r\n &::before {\r\n background-color: var(--at-neutral-900);\r\n }\r\n }\r\n\r\n &::after {\r\n filter: invert(1);\r\n }\r\n }\r\n }\r\n}\r\n\r\n.line-underline {\r\n display: inline-block;\r\n width: 60px;\r\n height: 1px;\r\n background-color: var(--at-neutral-900);\r\n}\r\n\r\n.reveal-text {\r\n &.indent {\r\n .split-line:first-child {\r\n padding-left: 20px;\r\n }\r\n }\r\n}\r\n\r\n@media #{$xs} {\r\n .reveal-text {\r\n &.indent {\r\n .split-line:first-child {\r\n padding-left: 0;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.text-indent {\r\n text-indent: 20px;\r\n}","@use 'colors' as *;\r\n@use 'typography' as *;\r\n@use 'typography' as *;\r\n\r\n:root {\r\n\r\n /**\r\n @font family declaration\r\n */\r\n @each $ff, $shades in $font-family {\r\n @each $shade, $value in $shades {\r\n --at-#{$ff}-#{$shade}: #{$value};\r\n }\r\n }\r\n\r\n /**\r\n @font size declaration\r\n */\r\n @each $fz, $shades in $font-size {\r\n @each $shade, $value in $shades {\r\n --at-#{$fz}-#{$shade}: #{$value};\r\n }\r\n }\r\n\r\n /**\r\n @color declaration\r\n */\r\n @each $color, $shades in $colors {\r\n @each $shade, $value in $shades {\r\n --at-#{$color}-#{$shade}: #{$value};\r\n }\r\n }\r\n\r\n}","@use '../utils' as *;\r\n\r\n/*---------------------------------\r\n 1.1 Common Classes\r\n---------------------------------*/\r\n.overflow-unset {\r\n\toverflow: unset !important;\r\n}\r\n\r\n.w-img {\r\n\t& img {\r\n\t\twidth: 100%;\r\n\t}\r\n}\r\n\r\n.m-img {\r\n\t& img {\r\n\t\tmax-width: 100%;\r\n\t}\r\n}\r\n\r\n.fix {\r\n\toverflow: hidden\r\n}\r\n\r\n.clear {\r\n\tclear: both;\r\n}\r\n\r\n.z-n1 {\r\n\tposition: relative;\r\n\tz-index: -1;\r\n}\r\n\r\n.z-index-1 {\r\n\tposition: relative;\r\n\tz-index: 1;\r\n}\r\n\r\n.z-index-2 {\r\n\tposition: relative;\r\n\tz-index: 2;\r\n}\r\n\r\n.z-index-3 {\r\n\tposition: relative;\r\n\tz-index: 3;\r\n}\r\n\r\n.z-index-4 {\r\n\tposition: relative;\r\n\tz-index: 4;\r\n}\r\n\r\n.z-index-5 {\r\n\tposition: relative;\r\n\tz-index: 5;\r\n}\r\n\r\n.z-index-6 {\r\n\tposition: relative;\r\n\tz-index: 6;\r\n}\r\n\r\n.z-index-7 {\r\n\tposition: relative;\r\n\tz-index: 7;\r\n}\r\n\r\n.z-index-8 {\r\n\tposition: relative;\r\n\tz-index: 8;\r\n}\r\n\r\n.z-index-9 {\r\n\tposition: relative;\r\n\tz-index: 9;\r\n}\r\n\r\n.z-index-10 {\r\n\tposition: relative;\r\n\tz-index: 10;\r\n}\r\n\r\n.gx-5 {\r\n\t--bs-gutter-x: 5px;\r\n}\r\n\r\n.gx-10 {\r\n\t--bs-gutter-x: 10px;\r\n}\r\n\r\n.gx-20 {\r\n\t--bs-gutter-x: 20px;\r\n}\r\n\r\n.gx-30 {\r\n\t--bs-gutter-x: 30px;\r\n}\r\n\r\n.gx-40 {\r\n\t--bs-gutter-x: 40px;\r\n}\r\n\r\n.gx-45 {\r\n\t--bs-gutter-x: 45px;\r\n}\r\n\r\n.gx-50 {\r\n\t--bs-gutter-x: 50px;\r\n\r\n\t@media #{$xl,$lg,$md,$sm,$xs} {\r\n\t\t--bs-gutter-x: 30px;\r\n\t}\r\n}\r\n\r\n.gx-60 {\r\n\t--bs-gutter-x: 60px;\r\n\r\n\t@media #{$xl,$lg,$md,$sm,$xs} {\r\n\t\t--bs-gutter-x: 30px;\r\n\t}\r\n}\r\n\r\n.gx-70 {\r\n\t--bs-gutter-x: 70px;\r\n\r\n\t@media #{$xl,$lg,$md,$sm,$xs} {\r\n\t\t--bs-gutter-x: 30px;\r\n\t}\r\n}\r\n\r\n.gx-80 {\r\n\t--bs-gutter-x: 80px;\r\n\r\n\t@media #{$xl,$lg,$md,$sm,$xs} {\r\n\t\t--bs-gutter-x: 30px;\r\n\t}\r\n}\r\n\r\n.gx-90 {\r\n\t--bs-gutter-x: 90px;\r\n\r\n\t@media #{$xl,$lg,$md,$sm,$xs} {\r\n\t\t--bs-gutter-x: 30px;\r\n\t}\r\n}\r\n\r\n.gx-100 {\r\n\t--bs-gutter-x: 100px;\r\n\r\n\t@media #{$xl,$lg,$md,$sm,$xs} {\r\n\t\t--bs-gutter-x: 30px;\r\n\t}\r\n}\r\n\r\n.overflow-y-visible {\r\n\toverflow-x: hidden;\r\n\toverflow-y: visible;\r\n}\r\n\r\n.p-relative {\r\n\tposition: relative;\r\n}\r\n\r\n.p-absolute {\r\n\tposition: absolute;\r\n}\r\n\r\n.bg-position {\r\n\tbackground-position: bottom center;\r\n\tbackground-size: cover;\r\n\tbackground-repeat: no-repeat;\r\n}\r\n\r\n.slide-transtion {\r\n\t-webkit-transition-timing-function: linear;\r\n\ttransition-timing-function: linear;\r\n\r\n\t& .swiper-slide {\r\n\t\twidth: auto;\r\n\t}\r\n}\r\n\r\n.common-underline {\r\n\t@include bgborder(currentColor, 0, 0);\r\n\t@include at-transition(all .4s ease);\r\n\r\n\t&:hover {\r\n\t\t@include bgborder(currentColor, 0, 100%);\r\n\t\t@include at-transition(all .4s ease);\r\n\t}\r\n}\r\n\r\n.img-cover {\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tobject-fit: cover;\r\n}\r\n\r\n.bg-cover {\r\n\tbackground-size: cover;\r\n\tbackground-position: center;\r\n\tbackground-repeat: no-repeat;\r\n}\r\n\r\n.text-red {\r\n\tcolor: var(--at-theme-primary);\r\n}\r\n\r\n$container: (\r\n\t1136,\r\n\t2200\r\n);\r\n\r\n@each $number in $container {\r\n\t@media (min-width:1400px) {\r\n\t\t.container-#{$number} {\r\n\t\t\tmax-width: #{$number}px;\r\n\t\t\tmargin-left: auto;\r\n\t\t\tmargin-right: auto;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// at-font-famely-variables\r\n@each $font, $famely in $font-family {\r\n\t@each $key, $value in $famely {\r\n\t\t.at-#{$font}-#{$key} {\r\n\t\t\tfont-family: var(--at-#{$font}-#{$key});\r\n\t\t}\r\n\t}\r\n}\r\n\r\n/* Font weight */\r\n$font-weight: 100;\r\n\r\n@while $font-weight < 1000 {\r\n\t.fw-#{$font-weight} {\r\n\t\tfont-weight: (#{$font-weight});\r\n\t}\r\n\r\n\t$font-weight: $font-weight + 100;\r\n}\r\n\r\n/* Font size */\r\n@each $size, $shades in $font-size {\r\n\t@each $key, $value in $shades {\r\n\t\t.#{$size}-#{$key} {\r\n\t\t\tfont-size: var(--at-#{$size}-#{$key});\r\n\t\t}\r\n\t}\r\n}\r\n\r\n/* Color */\r\n@each $color, $shades in $colors {\r\n\t@each $shade, $value in $shades {\r\n\t\t.#{$color}-#{$shade} {\r\n\t\t\tcolor: var(--at-#{$color}-#{$shade}) !important;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n/* Background Color */\r\n@each $color, $shades in $colors {\r\n\t@each $shade, $value in $shades {\r\n\t\t.bg-#{$color}-#{$shade} {\r\n\t\t\tbackground-color: var(--at-#{$color}-#{$shade}) !important;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n/*---------------------------------\r\n Footer Fixed Bottom Effect (Kanso Style)\r\n---------------------------------*/\r\n#smooth-content {\r\n\t// Allow clicks to pass through to footer underneath\r\n\tpointer-events: none;\r\n\r\n\t// Re-enable pointer events for all children\r\n\t>* {\r\n\t\tpointer-events: auto;\r\n\t}\r\n\r\n\tmain {\r\n\t\tposition: relative;\r\n\t\tz-index: 2;\r\n\t\twill-change: transform;\r\n\t\tmin-height: 100vh;\r\n\t}\r\n\r\n\r\n\t// Placeholder should not block clicks\r\n\t.footer-placeholder {\r\n\t\tpointer-events: none;\r\n\t}\r\n}\r\n\r\n// Footer will be moved outside smooth-content via JS and fixed to bottom\r\n.footer-fixed-bottom {\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\twidth: 100%;\r\n\tz-index: 1;\r\n\ttransform-origin: center bottom;\r\n\twill-change: transform;\r\n\r\n\t// Ensure footer has solid background\r\n\t.at-footer-area {\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n\t}\r\n}\r\n\r\n// Placeholder to maintain scroll height\r\n.footer-placeholder {\r\n\twidth: 100%;\r\n\tpointer-events: none;\r\n}\r\n\r\n.bg-primary-1 {\r\n\tbackground-color: var(--at-theme-primary);\r\n}\r\n\r\n.text-dark {\r\n\tcolor: var(--at-neutral-950) !important;\r\n}","@use '../utils' as *;\r\n/*---------------------------------\r\n 1.2 Default Spacing\r\n---------------------------------*/\r\n\r\n.pt-170 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 115px;\r\n }\r\n}\r\n\r\n.pt-165 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 110px;\r\n }\r\n}\r\n\r\n.pt-160 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 100px;\r\n }\r\n}\r\n\r\n.pt-155 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 100px;\r\n }\r\n}\r\n\r\n.pt-150 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 100px;\r\n }\r\n}\r\n\r\n.pt-145 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 100px;\r\n }\r\n}\r\n\r\n.pt-140 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 100px;\r\n }\r\n}\r\n\r\n.pt-135 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 95px;\r\n }\r\n}\r\n\r\n.pt-130 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 90px;\r\n }\r\n}\r\n\r\n.pt-125 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 85px;\r\n }\r\n}\r\n\r\n.pt-120 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 80px;\r\n }\r\n}\r\n\r\n.pt-115 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 75px;\r\n }\r\n}\r\n\r\n.pt-110 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 70px;\r\n }\r\n}\r\n\r\n.pt-105 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 65px;\r\n }\r\n}\r\n\r\n.pt-100 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 60px;\r\n }\r\n}\r\n\r\n.pb-170 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 100px;\r\n }\r\n}\r\n\r\n.pt-180 {\r\n @media #{$lg,$md,$sm,$xs} {\r\n padding-top: 100px;\r\n }\r\n}\r\n\r\n.pt-190 {\r\n @media #{$lg,$md,$sm,$xs} {\r\n padding-top: 110px;\r\n }\r\n}\r\n\r\n.pb-165 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 100px;\r\n }\r\n}\r\n\r\n.pb-160 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 100px;\r\n }\r\n}\r\n\r\n.pb-155 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 100px;\r\n }\r\n}\r\n\r\n.pb-150 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 100px;\r\n }\r\n}\r\n\r\n.pb-145 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 100px;\r\n }\r\n}\r\n\r\n.pb-140 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 100px;\r\n }\r\n}\r\n\r\n.pb-135 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 95px;\r\n }\r\n}\r\n\r\n.pb-130 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 90px;\r\n }\r\n}\r\n\r\n.pb-125 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 85px;\r\n }\r\n}\r\n\r\n.pb-120 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 80px;\r\n }\r\n}\r\n\r\n.pb-115 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 75px;\r\n }\r\n}\r\n\r\n.pb-110 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 70px;\r\n }\r\n}\r\n\r\n.pb-105 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 65px;\r\n }\r\n}\r\n\r\n.pb-100 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 60px;\r\n }\r\n}\r\n\r\n.pb-95 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 55px;\r\n }\r\n}\r\n\r\n.pb-90 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-bottom: 50px;\r\n }\r\n}\r\n\r\n.pt-90 {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 50px;\r\n }\r\n}","@use '../utils' as *;\r\n@use '../utils/breakpoints' as *;\r\n\r\n@media #{$xl,$lg} {\r\n\r\n\t/* Font size */\r\n\t@each $size, $shades in $font-size-lg {\r\n\t\t@each $key, $value in $shades {\r\n\t\t\t.#{$size}-#{$key} {\r\n\t\t\t\tfont-size: #{$value} !important;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\th1,\r\n\t.h1 {\r\n\t\tfont-size: 58px;\r\n\t}\r\n\r\n\th2,\r\n\t.h2 {\r\n\t\tfont-size: 50px;\r\n\t}\r\n\r\n\th3,\r\n\t.h3 {\r\n\t\tfont-size: 42px;\r\n\t}\r\n\r\n\th4,\r\n\t.h4 {\r\n\t\tfont-size: 30px;\r\n\t}\r\n\r\n\th5,\r\n\t.h5 {\r\n\t\tfont-size: 28px;\r\n\t}\r\n\r\n\th6,\r\n\t.h6 {\r\n\t\tfont-size: 20px;\r\n\t}\r\n\r\n\r\n\t.fz-150 {\r\n\t\tfont-size: 100px;\r\n\t}\r\n\r\n\t.fz-170 {\r\n\t\tfont-size: 100px;\r\n\t}\r\n\r\n\t.fz-180 {\r\n\t\tfont-size: 140px;\r\n\t}\r\n\r\n\t.fz-200 {\r\n\t\tfont-size: 120px;\r\n\t}\r\n\r\n\t.fz-290 {\r\n\t\tfont-size: 180px;\r\n\t}\r\n\r\n\t.fz-120 {\r\n\t\tfont-size: 84px;\r\n\t}\r\n\r\n\t.fz-60 {\r\n\t\tfont-size: 60px;\r\n\t}\r\n\r\n\t.scroll-section {\r\n\t\t.pb-80 {\r\n\t\t\tpadding-bottom: 0;\r\n\t\t}\r\n\t}\r\n\r\n\t.d-md-none {\r\n\t\tdisplay: none;\r\n\t}\r\n}\r\n\r\n@media #{$md} {\r\n\r\n\t/* Font size */\r\n\t@each $size, $shades in $font-size-md {\r\n\t\t@each $key, $value in $shades {\r\n\t\t\t.#{$size}-#{$key} {\r\n\t\t\t\tfont-size: #{$value} !important;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\th1,\r\n\t.h1 {\r\n\t\tfont-size: 54px;\r\n\t}\r\n\r\n\th2,\r\n\t.h2 {\r\n\t\tfont-size: 52px;\r\n\t}\r\n\r\n\th3,\r\n\t.h3 {\r\n\t\tfont-size: 40px;\r\n\t}\r\n\r\n\th4,\r\n\t.h4 {\r\n\t\tfont-size: 36px;\r\n\t}\r\n\r\n\th5,\r\n\t.h5 {\r\n\t\tfont-size: 24px;\r\n\t}\r\n\r\n\th6,\r\n\t.h6 {\r\n\t\tfont-size: 20px;\r\n\t}\r\n\r\n\r\n\t.fz-150 {\r\n\t\tfont-size: 110px;\r\n\t}\r\n\r\n\t.fz-170 {\r\n\t\tfont-size: 70px;\r\n\t}\r\n\r\n\t.fz-180 {\r\n\t\tfont-size: 70px;\r\n\t}\r\n\r\n\t.fz-200 {\r\n\t\tfont-size: 80px;\r\n\t}\r\n\r\n\t.fz-240 {\r\n\t\tfont-size: 100px;\r\n\t}\r\n\r\n\t.fz-290 {\r\n\t\tfont-size: 180px;\r\n\t}\r\n\r\n\t.fz-120 {\r\n\t\tfont-size: 100px;\r\n\t}\r\n\r\n\t.fz-60 {\r\n\t\tfont-size: 60px;\r\n\t}\r\n\r\n\t.scroll-section {\r\n\t\t.pb-80 {\r\n\t\t\tpadding-bottom: 0;\r\n\t\t}\r\n\t}\r\n\r\n\tbr {\r\n\t\tdisplay: none;\r\n\t}\r\n\r\n\t.d-md-none {\r\n\t\tdisplay: none;\r\n\t}\r\n}\r\n\r\n@media #{$xs} {\r\n\t/* Font size */\r\n\r\n\t@each $size, $shades in $font-size-xs {\r\n\t\t@each $key, $value in $shades {\r\n\t\t\t.#{$size}-#{$key} {\r\n\t\t\t\tfont-size: #{$value} !important;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\th1,\r\n\t.h1 {\r\n\t\tfont-size: 50px;\r\n\t}\r\n\r\n\th2,\r\n\t.h2 {\r\n\t\tfont-size: 42px;\r\n\t}\r\n\r\n\th3,\r\n\t.h3 {\r\n\t\tfont-size: 36px;\r\n\t}\r\n\r\n\th4,\r\n\t.h4 {\r\n\t\tfont-size: 30px;\r\n\t}\r\n\r\n\th5,\r\n\t.h5 {\r\n\t\tfont-size: 20px;\r\n\t}\r\n\r\n\th6,\r\n\t.h6 {\r\n\t\tfont-size: 16px;\r\n\t}\r\n\r\n\r\n\t.fz-150 {\r\n\t\tfont-size: 52px;\r\n\t}\r\n\r\n\t.fz-170 {\r\n\t\tfont-size: 30px;\r\n\t}\r\n\r\n\t.fz-180 {\r\n\t\tfont-size: 38px;\r\n\t}\r\n\r\n\t.fz-200 {\r\n\t\tfont-size: 38px;\r\n\t}\r\n\r\n\t.fz-240 {\r\n\t\tfont-size: 100px;\r\n\t}\r\n\r\n\t.fz-290 {\r\n\t\tfont-size: 100px;\r\n\t}\r\n\r\n\t.fz-120 {\r\n\t\tfont-size: 90px;\r\n\t}\r\n\r\n\t.fz-60 {\r\n\t\tfont-size: 60px;\r\n\t}\r\n\r\n\t.w-75 {\r\n\t\twidth: 100% !important;\r\n\t}\r\n\r\n\tbr {\r\n\t\tdisplay: none;\r\n\t}\r\n\r\n\t.scroll-section {\r\n\t\t.pb-80 {\r\n\t\t\tpadding-bottom: 0;\r\n\t\t}\r\n\t}\r\n\r\n\r\n\t.d-xs-none {\r\n\t\tdisplay: none;\r\n\t}\r\n}\r\n\r\n@media (min-width: 1400px) {\r\n\t.container {\r\n\t\tmax-width: 1750px;\r\n\t}\r\n}","/* HEADER CSS */\r\n@forward 'header';","@use '../../utils' as *;\r\n/*----------------------------------------*/\r\n/* 3.2 Header main\r\n/*----------------------------------------*/\r\n\r\n.at-header {\r\n &-sidebar {\r\n &-btn {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n width: 40px;\r\n height: 40px;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50px;\r\n\r\n }\r\n }\r\n\r\n &-logo {\r\n display: flex;\r\n align-items: center;\r\n\r\n a {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n }\r\n\r\n &-spacing {\r\n padding: 10px 0;\r\n }\r\n}\r\n\r\n.header-transparent {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 9;\r\n width: 100%;\r\n}\r\n\r\n/*----------------------------------------*/\r\n/* Header 7 (toggle inline nav)\r\n/*----------------------------------------*/\r\n\r\n.header-7 {\r\n $h7-ease: cubic-bezier(0.65, 0, 0.35, 1);\r\n\r\n #header7Nav,\r\n #header10Nav {\r\n max-width: 0;\r\n opacity: 0;\r\n visibility: hidden;\r\n overflow-x: clip;\r\n overflow-y: visible;\r\n transform: translateX(24px);\r\n margin-inline-end: -1rem;\r\n pointer-events: none;\r\n height: 48px;\r\n transition:\r\n max-width 0.55s $h7-ease,\r\n margin 0.55s $h7-ease,\r\n opacity 0.35s ease,\r\n transform 0.55s $h7-ease,\r\n visibility 0s linear 0.55s;\r\n\r\n &.at-main-menu nav ul li .submenu {\r\n background: rgba(var(--at-neutral-0-rgb), 1);\r\n }\r\n }\r\n\r\n &.is-menu-open #header7Nav,\r\n &.is-menu-open #header10Nav {\r\n max-width: 900px;\r\n opacity: 1;\r\n visibility: visible;\r\n overflow: visible;\r\n transform: translateX(0);\r\n margin-inline-end: 0;\r\n pointer-events: auto;\r\n transition:\r\n max-width 0.55s $h7-ease,\r\n margin 0.55s $h7-ease,\r\n opacity 0.4s ease 0.1s,\r\n transform 0.55s $h7-ease,\r\n visibility 0s linear 0s;\r\n }\r\n\r\n &.header-10 {\r\n .at-hamburger {\r\n color: var(--at-neutral-950);\r\n }\r\n }\r\n\r\n .at-hamburger {\r\n cursor: pointer;\r\n background: transparent;\r\n border: 0;\r\n padding: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #fff;\r\n\r\n &__box {\r\n position: relative;\r\n display: block;\r\n width: 20px;\r\n height: 14px;\r\n }\r\n\r\n &__bar {\r\n position: absolute;\r\n left: 0;\r\n height: 2px;\r\n background: currentColor;\r\n border-radius: 2px;\r\n transition:\r\n transform 0.5s $h7-ease,\r\n width 0.5s $h7-ease,\r\n top 0.45s $h7-ease,\r\n opacity 0.25s ease;\r\n\r\n &:nth-child(1) {\r\n top: 0;\r\n width: 100%;\r\n }\r\n\r\n &:nth-child(2) {\r\n top: 6px;\r\n width: 65%;\r\n }\r\n\r\n &:nth-child(3) {\r\n top: 12px;\r\n width: 85%;\r\n }\r\n }\r\n\r\n &:hover &__bar {\r\n &:nth-child(1) {\r\n width: 65%;\r\n transform: translateX(35%);\r\n }\r\n\r\n &:nth-child(2) {\r\n width: 100%;\r\n }\r\n\r\n &:nth-child(3) {\r\n width: 75%;\r\n transform: translateX(25%);\r\n }\r\n }\r\n }\r\n\r\n &.is-menu-open .at-hamburger__bar {\r\n &:nth-child(1) {\r\n top: 6px;\r\n width: 100%;\r\n transform: rotate(45deg);\r\n }\r\n\r\n &:nth-child(2) {\r\n opacity: 0;\r\n transform: scaleX(0);\r\n }\r\n\r\n &:nth-child(3) {\r\n top: 6px;\r\n width: 100%;\r\n transform: rotate(-45deg);\r\n }\r\n }\r\n}\r\n\r\n\r\n/*----------------------------------------*/\r\n/* Header 8 — primary-coloured CTA button\r\n/*----------------------------------------*/\r\n\r\n.header-8 {\r\n .at-btn-theme {\r\n background-color: var(--at-theme-primary);\r\n padding: 12px 25px;\r\n\r\n &:hover {\r\n background-color: var(--at-theme-primary);\r\n opacity: .88;\r\n }\r\n }\r\n}\r\n\r\n:root {\r\n --basic-ease: cubic-bezier(.625, .05, 0, 1);\r\n}\r\n\r\n.at-title {\r\n &-text {\r\n & span {\r\n display: inline-block;\r\n text-shadow: 0 1.05em var(--at-theme-primary);\r\n transition: translate .3s var(--basic-ease), text-shadow .1s .15s ease;\r\n }\r\n }\r\n\r\n &-anim {\r\n &:hover {\r\n .at-title-text span {\r\n text-shadow: 0 1.05em currentColor;\r\n translate: 0 -1.05em 0;\r\n transition: translate .5s calc((var(--char) - 1) * .024s) var(--basic-ease), text-shadow .175s calc((var(--char) - 1) * .024s + .225s) ease;\r\n }\r\n }\r\n\r\n &-inner {\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n display: flex;\r\n overflow-y: clip;\r\n }\r\n }\r\n}\r\n\r\n\r\n.header-10 {\r\n &__bar {\r\n position: absolute;\r\n z-index: 9;\r\n width: 100%;\r\n background: transparent;\r\n border-bottom: 0;\r\n\r\n }\r\n\r\n &__logo-link {\r\n color: inherit;\r\n }\r\n\r\n &__mark {\r\n display: block;\r\n width: 27px;\r\n height: 30px;\r\n object-fit: contain;\r\n flex-shrink: 0;\r\n }\r\n\r\n &__brand {\r\n font-family: var(--at-ff-body);\r\n font-weight: 700;\r\n font-size: 24px;\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-950);\r\n }\r\n\r\n &__actions {\r\n column-gap: 16px;\r\n row-gap: 12px;\r\n }\r\n\r\n &__pill {\r\n display: inline-flex;\r\n align-items: center;\r\n min-height: 41px;\r\n padding: 0 18px;\r\n\r\n &--tools {\r\n gap: 18px;\r\n }\r\n }\r\n\r\n &__hamburger {\r\n padding: 0;\r\n min-width: 24px;\r\n color: var(--at-neutral-950);\r\n background: transparent;\r\n border: 0;\r\n }\r\n\r\n .at-hamburger__box {\r\n width: 24px;\r\n height: 16px;\r\n }\r\n\r\n .at-hamburger__bar {\r\n &:nth-child(1) {\r\n top: 0;\r\n width: 100%;\r\n }\r\n\r\n &:nth-child(2) {\r\n top: 7px;\r\n width: 100%;\r\n }\r\n\r\n &:nth-child(3) {\r\n top: 14px;\r\n width: 100%;\r\n }\r\n }\r\n\r\n .at-hamburger:hover .at-hamburger__bar {\r\n\r\n &:nth-child(1),\r\n &:nth-child(2),\r\n &:nth-child(3) {\r\n width: 100%;\r\n transform: none;\r\n }\r\n }\r\n\r\n &.header-7.is-menu-open .at-hamburger__bar {\r\n &:nth-child(1) {\r\n top: 7px;\r\n }\r\n\r\n &:nth-child(3) {\r\n top: 7px;\r\n }\r\n }\r\n\r\n &__icon-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0;\r\n margin: 0;\r\n border: 0;\r\n background: transparent;\r\n color: var(--at-neutral-950);\r\n line-height: 0;\r\n cursor: pointer;\r\n transition: opacity 0.25s ease, color 0.25s ease;\r\n\r\n &:hover {\r\n opacity: 0.75;\r\n color: var(--at-theme-primary);\r\n }\r\n\r\n svg {\r\n display: block;\r\n }\r\n }\r\n\r\n /* Collapsible mega menu track — match pill glass */\r\n &.header-7 #header10Nav {\r\n height: 41px;\r\n }\r\n\r\n #header10Nav.at-main-menu.menu-light.style-1 {\r\n border: 0;\r\n background: transparent;\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n }\r\n\r\n #header10Nav.at-main-menu.menu-light.style-1 nav ul li .submenu {\r\n background: rgba(var(--at-neutral-0-rgb), 0.98);\r\n }\r\n\r\n .at-main-menu.menu-light nav ul li.has-dropdown>a {\r\n color: var(--at-neutral-950);\r\n\r\n &::after {\r\n filter: none;\r\n }\r\n }\r\n\r\n .at-main-menu.menu-light nav ul li:hover.has-dropdown>a {\r\n color: var(--at-neutral-950);\r\n background: color-mix(in srgb, var(--at-neutral-950) 8%, transparent);\r\n }\r\n\r\n .dark-light-mode .toggle {\r\n color: var(--at-neutral-950);\r\n }\r\n}\r\n\r\n/* Header 12 (Home 12) */\r\n.header-12 {\r\n .at-main-menu {\r\n background-color: var(--at-neutral-0);\r\n padding: 10px 15px;\r\n border-radius: 50px;\r\n }\r\n}\r\n\r\n/* Header 14 (Home 14 — Photography Showcase) */\r\n.header-14 {\r\n &__meta {\r\n background-color: var(--at-neutral-0);\r\n border-bottom: 1px solid var(--at-neutral-200);\r\n font-size: 11px;\r\n line-height: 1;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n }\r\n\r\n &__meta-inner {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 12px 100px;\r\n max-width: 2200px;\r\n margin: 0 auto;\r\n\r\n @media #{$xxl} {\r\n padding: 12px 40px;\r\n }\r\n\r\n @media #{$xl} {\r\n padding: 12px 30px;\r\n }\r\n\r\n @media #{$lg},\r\n #{$md} {\r\n padding: 10px 24px;\r\n }\r\n\r\n @media #{$sm} {\r\n padding: 10px 16px;\r\n font-size: 10px;\r\n }\r\n\r\n @media #{$xs} {\r\n padding: 10px 16px;\r\n font-size: 10px;\r\n }\r\n }\r\n\r\n &__meta-group {\r\n display: flex;\r\n align-items: center;\r\n gap: 28px;\r\n\r\n @media #{$md},\r\n #{$sm} {\r\n gap: 16px;\r\n }\r\n\r\n @media #{$xs} {\r\n gap: 10px;\r\n }\r\n }\r\n\r\n &__meta-key {\r\n color: var(--at-neutral-950);\r\n font-weight: 500;\r\n font-family: var(--at-ff-body);\r\n }\r\n\r\n &__meta-val {\r\n color: var(--at-neutral-500);\r\n font-weight: 500;\r\n font-family: var(--at-ff-body);\r\n\r\n @media #{$sm},\r\n #{$xs} {\r\n display: none;\r\n }\r\n }\r\n\r\n &__meta-quiet {\r\n color: var(--at-neutral-500);\r\n font-weight: 400;\r\n text-transform: none;\r\n letter-spacing: 0.02em;\r\n\r\n @media #{$xs} {\r\n font-size: 10px;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 5.2 Postbox css\r\n/*----------------------------------------*/\r\n\r\n.postbox {\r\n &-item {\r\n &:not(:last-child) {\r\n border-bottom: 1px solid rgba(30, 30, 30, 0.08);\r\n padding-bottom: 50px;\r\n margin-bottom: 60px;\r\n }\r\n\r\n &:hover {\r\n & .postbox-thumb {\r\n & img {\r\n transform: scale(1.1);\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-thumb {\r\n border-radius: 42px;\r\n overflow: hidden;\r\n\r\n\r\n & img {\r\n border-radius: 42px;\r\n transition: all .8s ease;\r\n }\r\n }\r\n\r\n &-play-btn {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n\r\n & a {\r\n height: 80px;\r\n width: 80px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 77px;\r\n text-align: center;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.30);\r\n backdrop-filter: blur(5px);\r\n animation: animate-pulse 3s linear infinite;\r\n\r\n & svg {\r\n margin-left: 3px;\r\n display: inline-block;\r\n }\r\n }\r\n }\r\n}\r\n\r\n// Postbox scroll-zoom: ảnh full-width, mặt nạ hở 200x100px ở trung tâm, mở rộng dần khi scroll.\r\n// Phần bị clip để lộ marquee text chạy ngang phía sau.\r\n.postbox-scroll-zoom {\r\n .postbox-item-wrap {\r\n width: 100%;\r\n height: 200vh;\r\n }\r\n\r\n .postbox-item {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100vh;\r\n }\r\n\r\n .postbox-thumb {\r\n width: 100%;\r\n height: 100%;\r\n background-color: var(--at-neutral-50, #f5f5f5);\r\n }\r\n\r\n .postbox-scroll-zoom-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n clip-path: inset(calc(50% - 50px) calc(50% - 100px) calc(50% - 50px) calc(50% - 100px) round 4px);\r\n will-change: clip-path;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .postbox-scroll-zoom-play {\r\n z-index: 3;\r\n }\r\n\r\n .postbox-scroll-zoom-marquee {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-around;\r\n align-items: stretch;\r\n padding: 4% 0;\r\n pointer-events: none;\r\n overflow: hidden;\r\n will-change: opacity;\r\n }\r\n\r\n .postbox-scroll-zoom-marquee-row {\r\n display: flex;\r\n width: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n\r\n &.dir-left .postbox-scroll-zoom-marquee-track {\r\n animation: postbox-marquee-left 30s linear infinite;\r\n }\r\n\r\n &.dir-right .postbox-scroll-zoom-marquee-track {\r\n animation: postbox-marquee-right 35s linear infinite;\r\n }\r\n }\r\n\r\n .postbox-scroll-zoom-marquee-track {\r\n display: inline-flex;\r\n flex-shrink: 0;\r\n align-items: center;\r\n gap: 40px;\r\n font-family: inherit;\r\n font-weight: 600;\r\n font-size: clamp(48px, 8vw, 120px);\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-100, #dfdfdf);\r\n padding-right: 40px;\r\n\r\n & > span {\r\n display: inline-block;\r\n flex-shrink: 0;\r\n }\r\n }\r\n}\r\n\r\n@keyframes postbox-marquee-left {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(-50%);\r\n }\r\n}\r\n\r\n@keyframes postbox-marquee-right {\r\n 0% {\r\n transform: translateX(-50%);\r\n }\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .postbox-scroll-zoom .postbox-scroll-zoom-marquee-row .postbox-scroll-zoom-marquee-track {\r\n animation: none;\r\n }\r\n}","@use '../../utils' as *;\r\n/*----------------------------------------*/\r\n/* 5.1 Blog css\r\n/*----------------------------------------*/\r\n\r\n.blog-card {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 25px;\r\n\r\n &__thumb {\r\n position: relative;\r\n width: 100%;\r\n }\r\n\r\n &__img-link {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n &__img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n &__content {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 24px;\r\n width: 100%;\r\n }\r\n\r\n &__title {\r\n font-weight: 600;\r\n color: var(--at-neutral-900);\r\n margin: 0;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-height: 4.5em;\r\n }\r\n\r\n &__title-link {\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n\r\n &__meta {\r\n font-family: var(--at-ff-body);\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 100%;\r\n color: #585959;\r\n margin: 0;\r\n }\r\n\r\n &__meta-text {\r\n color: #585959;\r\n }\r\n\r\n &__author {\r\n color: var(--at-neutral-900);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary, var(--at-neutral-900));\r\n }\r\n }\r\n}\r\n\r\n/* Blog card 2 – horizontal 3-column layout */\r\n.blog-card-2 {\r\n display: flex;\r\n align-items: center;\r\n gap: 40px;\r\n width: 100%;\r\n padding-bottom: 32px;\r\n border-bottom: 1px solid rgba(30, 30, 30, 0.08);\r\n\r\n .blog-card-2-wrap:last-child & {\r\n border-bottom: none;\r\n padding-bottom: 0;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 24px;\r\n }\r\n\r\n &__left {\r\n flex: 0 1 40%;\r\n min-width: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 26px;\r\n\r\n @media #{$md,$sm,$xs} {\r\n flex: none;\r\n order: 1;\r\n }\r\n }\r\n\r\n &__category {\r\n display: inline-block;\r\n font-family: var(--at-ff-body);\r\n font-size: 12px;\r\n font-weight: 600;\r\n line-height: 1;\r\n letter-spacing: 0.02em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-900);\r\n padding: 8px 16px;\r\n background: var(--at-common-white);\r\n border: 1px solid var(--at-neutral-100);\r\n border-radius: 50px;\r\n width: fit-content;\r\n }\r\n\r\n &__title {\r\n margin: 0;\r\n\r\n @media #{$xs} {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n &__title-link {\r\n color: inherit;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n\r\n &__thumb {\r\n flex: 0 0 340px;\r\n width: 340px;\r\n height: 210px;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n flex-shrink: 0;\r\n\r\n @media #{$md,$sm,$xs} {\r\n flex: none;\r\n width: 100%;\r\n height: 220px;\r\n order: 2;\r\n }\r\n }\r\n\r\n &__img-link {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n &__img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 12px;\r\n transition: transform 0.5s ease;\r\n\r\n .blog-card-2:hover & {\r\n transform: scale(1.05);\r\n }\r\n }\r\n\r\n &__right {\r\n flex: 1;\r\n min-width: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 56px;\r\n justify-content: center;\r\n\r\n @media #{$md,$sm,$xs} {\r\n gap: 26px;\r\n flex: none;\r\n order: 3;\r\n }\r\n }\r\n\r\n &__excerpt {\r\n font-family: var(--at-ff-body);\r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n color: #585959;\r\n margin: 0;\r\n }\r\n\r\n &__meta {\r\n font-family: var(--at-ff-body);\r\n font-size: 14px;\r\n font-weight: 500;\r\n line-height: 1;\r\n color: #585959;\r\n margin: 0;\r\n }\r\n\r\n &__meta-text {\r\n color: #585959;\r\n }\r\n\r\n &__author {\r\n color: var(--at-theme-primary, #c94b2a);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n\r\n &:hover {\r\n color: var(--at-common-black);\r\n }\r\n }\r\n}\r\n\r\n/* Blog card 3 – sidebar Flash news (compact horizontal) */\r\n.blog-card-3-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n margin-top: 24px;\r\n\r\n .blog-card-3:last-child {\r\n border-bottom: none;\r\n padding-bottom: 0;\r\n }\r\n}\r\n\r\n.blog-card-3 {\r\n display: flex;\r\n flex-direction: row-reverse;\r\n align-items: center;\r\n gap: 16px;\r\n width: 100%;\r\n padding-bottom: 20px;\r\n margin-bottom: 20px;\r\n border-bottom: 1px solid rgba(30, 30, 30, 0.08);\r\n\r\n &__thumb {\r\n flex: 0 0 115px;\r\n width: 115px;\r\n height: 115px;\r\n }\r\n\r\n &__img-link {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n &__img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.4s ease;\r\n\r\n .blog-card-3:hover & {\r\n transform: scale(1.05);\r\n }\r\n }\r\n\r\n &__content {\r\n flex: 1;\r\n min-width: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n }\r\n\r\n &__title {\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n line-height: normal;\r\n letter-spacing: -1.2px;\r\n color: var(--at-neutral-900);\r\n margin: 0;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n &__title-link {\r\n color: inherit;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n\r\n &__meta {\r\n color: var(--at-neutral-500);\r\n }\r\n\r\n\r\n &__author {\r\n color: var(--at-theme-primary, #c94b2a);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n\r\n &:hover {\r\n color: var(--at-common-black);\r\n }\r\n }\r\n}\r\n\r\n/* Product card – shop archive */\r\n.product-card {\r\n display: flex;\r\n flex-direction: column;\r\n\r\n &__inner {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 24px;\r\n padding: 0;\r\n }\r\n\r\n &__thumb {\r\n position: relative;\r\n background-color: var(--at-neutral-50, #f2f2f2);\r\n overflow: hidden;\r\n border-radius: 16px;\r\n width: 100%;\r\n height: 490px;\r\n flex-shrink: 0;\r\n }\r\n\r\n &__img-link {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n\r\n\r\n &__content {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n padding: 0 24px 24px;\r\n width: 100%;\r\n }\r\n\r\n &__brand {\r\n font-size: 12px;\r\n font-weight: 600;\r\n line-height: 100%;\r\n letter-spacing: -0.24px;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-500, #585959);\r\n margin: 0;\r\n }\r\n\r\n &__row {\r\n display: flex;\r\n align-items: flex-end;\r\n justify-content: space-between;\r\n gap: 12px;\r\n width: 100%;\r\n }\r\n\r\n &__title {\r\n font-size: 18px;\r\n font-weight: 600;\r\n line-height: normal;\r\n letter-spacing: -0.9px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n margin: 0;\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n &__title-link {\r\n color: inherit;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n\r\n &__price {\r\n font-size: 18px;\r\n font-weight: 600;\r\n line-height: normal;\r\n letter-spacing: -0.9px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n text-align: right;\r\n margin: 0;\r\n flex-shrink: 0;\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 4.1 Mobile Menu\r\n/*----------------------------------------*/\r\n\r\n.at-main {\r\n &-menu {\r\n padding: 5px 8px;\r\n\r\n &.menu-light {\r\n &.style-1 {\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n background: rgba(255, 255, 255, 0.25);\r\n backdrop-filter: blur(2px);\r\n height: 48px;\r\n }\r\n\r\n & nav {\r\n & ul {\r\n & li {\r\n &:hover {\r\n &>.submenu {\r\n visibility: visible;\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n &.has-dropdown {\r\n &>a {\r\n color: #fff;\r\n background: rgba(255, 255, 255, 0.2);\r\n }\r\n }\r\n }\r\n\r\n &.has-dropdown {\r\n &>a {\r\n color: #fff;\r\n\r\n &::after {\r\n filter: invert(1);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n & nav {\r\n & ul {\r\n & li {\r\n list-style: none;\r\n display: inline-block;\r\n position: relative;\r\n\r\n &.has-dropdown {\r\n &>a {\r\n color: var(--at-common-black);\r\n position: relative;\r\n @include at-transition(all 0.4s ease);\r\n\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 12px;\r\n right: 12px;\r\n width: 8px;\r\n height: 8px;\r\n background-size: auto;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n z-index: 0;\r\n background-image: url('data:image/svg+xml,');\r\n }\r\n }\r\n }\r\n\r\n &:hover {\r\n &>.submenu {\r\n visibility: visible;\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n &.has-dropdown {\r\n &>a {\r\n @include at-transition(all 0.4s ease);\r\n }\r\n }\r\n }\r\n\r\n & a {\r\n font-family: var(--at-ff-body);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.02em;\r\n color: var(--at-common-black);\r\n padding: 10px 24px;\r\n display: inline-block;\r\n line-height: 1;\r\n\r\n &:hover {\r\n color: var(--at-common-black);\r\n }\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n bottom: -20px;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -1;\r\n }\r\n }\r\n\r\n & .submenu {\r\n position: absolute;\r\n top: 120%;\r\n left: 0;\r\n width: 260px;\r\n z-index: 99;\r\n opacity: 0;\r\n padding: 12px 0;\r\n transition: 0.5s;\r\n text-align: start;\r\n visibility: hidden;\r\n transform-origin: 0 0;\r\n transform: scale(1, 0);\r\n backdrop-filter: blur(20px);\r\n background: rgba(var(--at-neutral-0-rgb), 0.9);\r\n box-shadow: 0 20px 30px -8px rgba(19, 19, 22, 0.1);\r\n\r\n & li {\r\n width: 100%;\r\n padding: 0 12px;\r\n border-radius: 8px;\r\n margin: 0;\r\n\r\n & a {\r\n position: relative;\r\n font-weight: 500;\r\n font-size: 16px;\r\n line-height: 1;\r\n color: var(--at-neutral-500);\r\n padding: 12px 18px;\r\n display: inline-block;\r\n letter-spacing: -0.01em;\r\n text-align: start;\r\n width: 100%;\r\n font-family: var(--at-ff-body);\r\n transition:\r\n padding-left 0.35s cubic-bezier(.65, 0, .35, 1),\r\n background 0.3s ease,\r\n color 0.3s ease;\r\n }\r\n\r\n & .submenu {\r\n top: 0;\r\n left: 100%;\r\n }\r\n\r\n &:hover {\r\n &>a {\r\n background: var(--at-neutral-50);\r\n color: var(--at-neutral-900) !important;\r\n padding-left: 23px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n & .at-megamenu {\r\n width: 720px;\r\n padding: 30px 30px;\r\n\r\n & li {\r\n padding: 0;\r\n }\r\n\r\n &-title {\r\n font-size: 20px;\r\n font-weight: 600;\r\n padding-left: 18px;\r\n padding-right: 6px;\r\n color: var(--at-common-black);\r\n font-family: var(--at-ff-body);\r\n\r\n &-wrap {\r\n display: block;\r\n padding-bottom: 10px;\r\n margin-bottom: 10px;\r\n border-bottom: 1px solid rgba($color: #000000, $alpha: 0.08);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.at-megamenu-title {\r\n font-size: 16px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n color: var(--at-common-black);\r\n font-family: var(--at-ff-body);\r\n}\r\n\r\n.at-megamenu-title-wrap {\r\n display: block;\r\n padding-bottom: 10px;\r\n margin-bottom: 10px;\r\n border-bottom: 1px solid var(--at-neutral-100);\r\n}\r\n\r\n/*----------------------------------------*/\r\n/* 4.x Main menu — text swap hover animation\r\n/* Wrapper .at-link-swap is injected by main.js (section 47c)\r\n/*----------------------------------------*/\r\n.at-main-menu>nav>ul>li>a {\r\n /* Descender room: wrapper has 4px padding-bottom for \"g\",\"p\" tails;\r\n compensate link's bottom padding so total height stays 36px. */\r\n --link-desc-room: 4px;\r\n padding-bottom: calc(10px - var(--link-desc-room));\r\n\r\n .at-link-swap {\r\n position: relative;\r\n display: inline-block;\r\n overflow: hidden;\r\n vertical-align: top;\r\n line-height: inherit;\r\n padding-bottom: var(--link-desc-room);\r\n\r\n .text-1,\r\n .text-2 {\r\n display: block;\r\n line-height: inherit;\r\n /* Wavy easing: cubic-bezier with overshoot creates a bounce/settle\r\n feel that reads as a subtle wave during the swap. */\r\n transition: transform 0.45s cubic-bezier(.5, 1.5, .35, 1);\r\n }\r\n\r\n .text-1 {\r\n position: relative;\r\n }\r\n\r\n .text-2 {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n /* Park text-2 fully below the wrapper's padding-box\r\n (own height + descender room) so it never leaks at rest. */\r\n transform: translateY(calc(100% + var(--link-desc-room)));\r\n }\r\n }\r\n\r\n}\r\n\r\n/* Trigger swap on the parent :hover so the hit area covers the\r\n entire menu item (incl. empty space inside .menu-light.style-1\r\n where is shorter than the 48px container). */\r\n.at-main-menu>nav>ul>li:hover>a {\r\n .at-link-swap .text-1 {\r\n /* Push text-1 up enough to clear both content + padding-bottom area. */\r\n transform: translateY(calc(-100% - var(--link-desc-room)));\r\n }\r\n\r\n .at-link-swap .text-2 {\r\n transform: translateY(0);\r\n }\r\n}","@use '../../utils' as *;\r\n/*----------------------------------------*/\r\n/* 4.3 offcanvas scss\r\n/*----------------------------------------*/\r\n\r\n.body-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n z-index: 995;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(24, 24, 24, 0.5);\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: 0.45s ease-in-out;\r\n\r\n &.apply {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n &:hover {\r\n cursor: url(../imgs/icons/cross-out.webp), pointer;\r\n }\r\n}\r\n\r\n.at-offcanvas {\r\n background-position: center;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n position: fixed;\r\n top: 0;\r\n right: -100%;\r\n width: 460px;\r\n bottom: 0;\r\n box-shadow: 0 16px -32px 0 rgba(0, 0, 0, .8);\r\n background-color: var(--at-common-white);\r\n z-index: 997;\r\n padding: 50px;\r\n scrollbar-width: none;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: 0.45s ease-in-out;\r\n overflow-y: scroll;\r\n\r\n @media #{$xs} {\r\n width: 100%;\r\n padding: 40px 35px;\r\n }\r\n\r\n @media #{$sm} {\r\n width: 400px;\r\n padding: 40px;\r\n }\r\n\r\n &-logo {\r\n a {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n }\r\n\r\n\r\n &.opened {\r\n opacity: 1;\r\n visibility: visible;\r\n right: 0;\r\n -webkit-transition: all .4s cubic-bezier(0.785, 0.135, 0.15, 0.86);\r\n -moz-transition: all .4s cubic-bezier(0.785, 0.135, 0.15, 0.86);\r\n transition: all .4s cubic-bezier(0.785, 0.135, 0.15, 0.86);\r\n transition-duration: .6s;\r\n }\r\n\r\n &-top {\r\n margin-bottom: 50px;\r\n }\r\n\r\n &-close {\r\n &-btn {\r\n & button {\r\n color: rgba($color: var(--at-common-black), $alpha: 1);\r\n\r\n &:hover {\r\n opacity: 1;\r\n @include at-transform(rotate(90deg));\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-menu {\r\n & .at-megamenu-box {\r\n margin-bottom: 30px;\r\n\r\n & li {\r\n & a {\r\n padding: 8px 20px;\r\n border-radius: 10px;\r\n font-size: 17px;\r\n\r\n &:hover {\r\n background-color: var(--at-neutral-50);\r\n color: var(--at-common-black);\r\n }\r\n }\r\n }\r\n }\r\n\r\n & .at-megamenu {\r\n margin-top: 15px;\r\n }\r\n }\r\n\r\n\r\n\r\n &-title {\r\n font-size: 64px;\r\n line-height: 1;\r\n letter-spacing: -0.8px;\r\n font-weight: 700;\r\n color: var(--at-common-black);\r\n\r\n &.sm {\r\n font-size: 36px;\r\n font-weight: 600;\r\n margin-bottom: 15px;\r\n color: var(--at-common-black);\r\n }\r\n }\r\n\r\n &-contact {\r\n margin-bottom: 55px;\r\n\r\n & ul {\r\n & li {\r\n list-style: none;\r\n\r\n &:not(:last-child) {\r\n margin-bottom: 2px;\r\n }\r\n\r\n & a {\r\n display: inline-block;\r\n color: var(--at-neutral-900);\r\n position: relative;\r\n font-family: var(--at-ff-body);\r\n\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-gallery {\r\n margin-bottom: 65px;\r\n\r\n &-img {\r\n width: 65px;\r\n height: 65px;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n padding: 4px;\r\n background: var(--at-neutral-50);\r\n\r\n & img {\r\n transition: .9s;\r\n border-radius: 4px;\r\n filter: grayscale(100%);\r\n }\r\n\r\n &:hover {\r\n & img {\r\n transform: scale(1.2) rotate(-2deg);\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-content {\r\n & p {\r\n font-size: 20px;\r\n font-weight: 500;\r\n line-height: normal;\r\n color: var(--at-neutral-900);\r\n font-family: var(--at-ff-body);\r\n }\r\n }\r\n\r\n}\r\n\r\n.at-offcanvas-social {\r\n margin-top: 40px;\r\n margin-bottom: 60px;\r\n\r\n @media #{$md,$xs} {\r\n margin-bottom: 40px;\r\n }\r\n\r\n &__grid {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 6px 24px;\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n &__link {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n width: 100%;\r\n color: var(--at-common-black);\r\n font-size: 16px;\r\n font-weight: 500;\r\n font-family: var(--at-ff-body);\r\n text-decoration: none;\r\n transition: color 0.3s ease, opacity 0.3s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary, var(--at-common-black));\r\n opacity: 0.85;\r\n }\r\n\r\n & svg {\r\n flex-shrink: 0;\r\n width: 18px;\r\n height: 18px;\r\n }\r\n }\r\n}\r\n\r\n$bg-duration: 0.7s;\r\n$ease: cubic-bezier(.2, .8, .2, 1);\r\n\r\n// OPEN delays\r\n$left-delay: calc(#{$bg-duration} + 0.06s);\r\n$menu-inner-delay: calc(#{$left-delay} + 0.2s);\r\n$btn-box-delay: calc(#{$menu-inner-delay} + 0.15s);\r\n$right-delay: calc(#{$btn-box-delay} + 0.2s);\r\n\r\n// CLOSE delays (reverse order)\r\n$right-close-delay: 0s;\r\n$btn-box-close-delay: 0.2s;\r\n$menu-inner-close-delay: 0.4s;\r\n$left-close-delay: 0.6s;\r\n\r\n\r\n\r\n// -------- at-offcanvas-2 -------//\r\n\r\n.at-offcanvas-2 {\r\n &-wrapper {\r\n padding: 100px 100px 0px;\r\n position: relative;\r\n z-index: 2;\r\n\r\n @media #{$xl,$lg} {\r\n padding: 80px 50px 0px;\r\n padding-right: 60px;\r\n }\r\n\r\n @media #{$md} {\r\n padding: 60px 50px 0px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n padding: 60px 30px 0px;\r\n }\r\n\r\n\r\n & .at-offcanvas-menu {\r\n &>nav {\r\n &>ul {\r\n &>li {\r\n overflow: hidden;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 1.5s ease-in-out !important;\r\n\r\n &:nth-child(2) {\r\n &>a {\r\n transition-delay: 1.7s;\r\n }\r\n }\r\n\r\n &:nth-child(3) {\r\n &>a {\r\n transition-delay: 1.8s;\r\n }\r\n }\r\n\r\n &:nth-child(3) {\r\n &>a {\r\n transition-delay: 1.9s;\r\n }\r\n }\r\n\r\n &:nth-child(4) {\r\n &>a {\r\n transition-delay: 2s;\r\n }\r\n }\r\n\r\n &:nth-child(5) {\r\n &>a {\r\n transition-delay: 2.1s;\r\n }\r\n }\r\n\r\n &>a {\r\n font-size: 48px;\r\n padding: 0;\r\n font-weight: 600;\r\n line-height: 1.2;\r\n letter-spacing: -0.04em;\r\n color: var(--at-common-black);\r\n font-family: var(--at-ff-body);\r\n @include at-transform(translateY(-300px));\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 1.5s ease-in-out !important;\r\n\r\n @media #{$xl} {\r\n font-size: 42px;\r\n }\r\n\r\n @media #{$lg,$md} {\r\n font-size: 54px;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 50px;\r\n }\r\n }\r\n\r\n & .at-menu-close {\r\n & i {\r\n font-size: 28px;\r\n color: var(--at-common-black);\r\n }\r\n }\r\n\r\n & .submenu {\r\n &>li {\r\n &>a {\r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 1;\r\n transition: 0.3s;\r\n color: var(--at-neutral-900);\r\n letter-spacing: -0.02em;\r\n font-family: var(--at-ff-body);\r\n position: relative;\r\n\r\n &:hover {\r\n background-color: initial;\r\n transform: translateX(15px);\r\n color: var(--at-common-black);\r\n }\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n left: 0;\r\n width: 5px;\r\n height: 5px;\r\n z-index: -1;\r\n background-color: var(--at-neutral-900);\r\n border-radius: 50%;\r\n transition: 0.3s;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n & nav {\r\n & ul {\r\n & li {\r\n & .at-megamenu {\r\n width: auto;\r\n\r\n & .col-xl-6 {\r\n width: 100%;\r\n }\r\n\r\n & .col-xl-4 {\r\n width: 100%;\r\n }\r\n\r\n & li {\r\n & a {\r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 1;\r\n transition: 0.3s;\r\n color: var(--at-neutral-900);\r\n letter-spacing: -0.8px;\r\n font-family: var(--at-ff-body);\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n left: 0;\r\n width: 5px;\r\n height: 5px;\r\n z-index: -1;\r\n background-color: var(--at-neutral-900);\r\n border-radius: 50%;\r\n transition: 0.3s;\r\n }\r\n\r\n &:hover {\r\n background-color: initial;\r\n transform: translateX(15px);\r\n color: var(--at-common-black);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n & .hamburger-close-btn {\r\n color: var(--at-common-black);\r\n cursor: pointer;\r\n transition: all .4s ease;\r\n\r\n &:hover {\r\n @include at-transform(rotate(90deg));\r\n }\r\n }\r\n\r\n & .hamburger-mobile-close-btn {\r\n &:hover {\r\n @include at-transform(rotate(0));\r\n }\r\n }\r\n\r\n & .hamburger-mobile-close-btn {\r\n position: absolute;\r\n bottom: -100px;\r\n left: 0;\r\n right: 0;\r\n text-align: center;\r\n font-size: 20px;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary)\r\n }\r\n }\r\n\r\n & .at-header-logo {\r\n @include at-transform(translateY(-80px));\r\n visibility: hidden;\r\n opacity: 0;\r\n transition-delay: 0s;\r\n transition: all 1.5s ease-in-out !important;\r\n }\r\n }\r\n\r\n &-left {\r\n opacity: 0;\r\n animation-delay: 1s;\r\n transform: translateY(20px);\r\n\r\n & .at-offcanvas-menu {\r\n border-bottom: 1px solid var(--at-neutral-100);\r\n padding-bottom: 105px;\r\n\r\n @media #{$xxl,$xl} {\r\n margin-bottom: 65px;\r\n }\r\n\r\n @media #{$md,$xs} {\r\n margin-bottom: 0;\r\n }\r\n\r\n & ul {\r\n overflow: hidden;\r\n overflow-y: scroll;\r\n scrollbar-width: none;\r\n max-height: 450px;\r\n padding-top: 10px;\r\n\r\n @media #{$xl,$lg} {\r\n max-height: 350px;\r\n\r\n }\r\n }\r\n }\r\n\r\n\r\n }\r\n}\r\n\r\n.at-offcanvas-2-area.menu-open,\r\n.at-offcanvas-2-area.menu-open-temp {\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n left: auto;\r\n height: 100%;\r\n transition: all 0s 2s;\r\n width: 600px;\r\n z-index: 1000;\r\n\r\n @media #{$md,$sm,$xs} {\r\n width: 100%;\r\n }\r\n}\r\n\r\n.at-offcanvas-2-area {\r\n position: fixed;\r\n left: 100%;\r\n\r\n .offcanvas-bg {\r\n inset: 0;\r\n border-radius: 20px;\r\n clip-path: circle(0% at calc(100% - 45px) 45px);\r\n transition: clip-path 0.7s ease-in-out;\r\n position: fixed;\r\n width: 570px;\r\n margin: 20px;\r\n right: 0;\r\n left: auto;\r\n z-index: 2;\r\n backdrop-filter: blur(20px);\r\n background: rgb(var(--at-neutral-0-rgb), .9);\r\n box-shadow: 0 20px 30px -8px rgba(19, 19, 22, 0.1);\r\n\r\n @media #{$md,$sm,$xs} {\r\n margin: 0;\r\n border-radius: 0;\r\n width: 100%;\r\n }\r\n }\r\n\r\n &.menu-open {\r\n .offcanvas-bg {\r\n clip-path: circle(150% at calc(100% - 45px) 45px);\r\n }\r\n\r\n .offcanvas-menu {\r\n pointer-events: auto;\r\n }\r\n\r\n & .at-offcanvas-menu {\r\n &>nav {\r\n &>ul {\r\n &>li {\r\n visibility: visible;\r\n opacity: 1;\r\n\r\n & a {\r\n visibility: visible;\r\n opacity: 1;\r\n @include at-transform(translateY(0));\r\n }\r\n\r\n }\r\n\r\n }\r\n }\r\n }\r\n\r\n & .at-header-logo {\r\n visibility: visible;\r\n opacity: 1;\r\n @include at-transform(translateY(0));\r\n }\r\n\r\n .at-offcanvas-2-left {\r\n opacity: 1;\r\n transform: translateY(0);\r\n transition-delay: $left-delay;\r\n\r\n .at-offcanvas-menu {\r\n opacity: 1;\r\n transform: translateY(0);\r\n transition: opacity 0.6s $ease, transform 0.6s $ease;\r\n transition-delay: $menu-inner-delay;\r\n }\r\n }\r\n }\r\n\r\n &:not(.menu-open) {\r\n .offcanvas-menu {\r\n pointer-events: none;\r\n }\r\n\r\n .at-offcanvas-2-left {\r\n transition-delay: $left-close-delay;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n\r\n .at-offcanvas-menu {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition-delay: $menu-inner-close-delay;\r\n }\r\n\r\n .at-offcanvas-2-left-btn-box {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition-delay: $btn-box-close-delay;\r\n }\r\n }\r\n\r\n .offcanvas-bg {\r\n clip-path: circle(0% at calc(100% - 45px) 45px);\r\n transition-delay: .4s;\r\n }\r\n }\r\n}\r\n\r\n.hamburger-sticky-menu {\r\n border-radius: 16px;\r\n border: 1px solid var(--at-neutral-100, #DFDFDF);\r\n background: var(--at-neutral-0, #FEFEFE);\r\n color: var(--at-neutral-950);\r\n font-size: 16px;\r\n font-weight: 600;\r\n display: inline-flex;\r\n padding: 15px 24px;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 8px;\r\n position: absolute;\r\n top: 40px;\r\n right: 20px;\r\n z-index: 10;\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: scale(.5);\r\n transition-delay: .4s;\r\n\r\n @media #{$sm,$xs} {\r\n top: 20px;\r\n right: 20px;\r\n padding: 5px 10px;\r\n font-size: 14px;\r\n }\r\n\r\n &.header-sticky {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: scale(1);\r\n position: fixed;\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 4.2 Mobile Menu\r\n/*----------------------------------------*/\r\n\r\n\r\n.at-offcanvas-menu {\r\n .at-megamenu-box li a {\r\n font-weight: 400;\r\n }\r\n\r\n & ul {\r\n list-style: none;\r\n\r\n & li {\r\n position: relative;\r\n\r\n &>a {\r\n padding: 7px 0;\r\n display: block;\r\n font-size: 18px;\r\n font-weight: 600;\r\n }\r\n\r\n &.active {\r\n &>a {\r\n color: var(--at-common-black);\r\n\r\n }\r\n\r\n &>.at-menu-close {\r\n & i {\r\n top: 10px;\r\n @include at-transform(rotate(90deg));\r\n }\r\n }\r\n }\r\n\r\n & .submenu {\r\n display: none;\r\n\r\n & .submenu {\r\n margin-left: 30px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n & .at-submenu>li>a {\r\n padding: 8px 20px;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n\r\n &:hover {\r\n background-color: #f8f8fb;\r\n color: var(--at-common-black);\r\n }\r\n }\r\n}\r\n\r\n.at-menu-close {\r\n position: absolute;\r\n right: 7px;\r\n top: 12px;\r\n\r\n & i {\r\n transition: all 0.3s;\r\n font-size: 18px;\r\n font-weight: 500;\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 6.1 Footer Style 1\r\n/*----------------------------------------*/\r\n.#{$theme-prifix}-footer {\r\n &-link {\r\n & .at-hero-social {\r\n justify-content: flex-start;\r\n }\r\n }\r\n\r\n &-copyright {\r\n font-weight: 500;\r\n font-size: 16px;\r\n opacity: .5;\r\n color: var(--at-common-black);\r\n }\r\n}\r\n\r\n\r\n.alt-footer {\r\n\r\n &-social {\r\n &-item {\r\n & ul {\r\n & li {\r\n position: relative;\r\n list-style: none;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 1px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.30);\r\n }\r\n\r\n & a {\r\n font-weight: 500;\r\n font-size: 16px;\r\n letter-spacing: -0.32px;\r\n line-height: 1;\r\n color: var(--at-neutral-300);\r\n transition: all .5s ease;\r\n padding: 15px 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n & .icon-social {\r\n color: #fefefe;\r\n }\r\n\r\n\r\n &:hover {\r\n color: #ffffff;\r\n margin: 0 12px;\r\n\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.white-mode {\r\n & ul {\r\n & li {\r\n &::before {\r\n border-bottom: 1px solid rgba(33, 33, 33, 0.30);\r\n }\r\n\r\n & a {\r\n & .icon-social {\r\n color: var(--at-neutral-900);\r\n }\r\n\r\n color: var(--at-neutral-500);\r\n\r\n &:hover {\r\n color: var(--at-neutral-900);\r\n margin: 0 12px;\r\n\r\n }\r\n }\r\n\r\n\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-link {\r\n &-item {\r\n & ul {\r\n & li {\r\n list-style: none;\r\n\r\n & a {\r\n font-weight: 400;\r\n font-size: 22px;\r\n letter-spacing: -0.02em;\r\n line-height: 1;\r\n color: var(--at-neutral-300);\r\n position: relative;\r\n @include bgborder(currentColor, 0, 0);\r\n @include at-transition(all .4s ease);\r\n\r\n &::before {\r\n content: '';\r\n width: 14px;\r\n height: 13px;\r\n background-image: url('data:image/svg+xml,');\r\n margin-left: 14px;\r\n position: absolute;\r\n left: 100%;\r\n top: 50%;\r\n opacity: 0;\r\n transition: all .5s ease;\r\n transform: translate(-15px, -40%);\r\n }\r\n\r\n &.fz-font-md {\r\n &::before {\r\n width: 12px;\r\n height: 12px;\r\n background-image: url('data:image/svg+xml,');\r\n\r\n }\r\n }\r\n\r\n &:hover {\r\n @include bgborder(currentColor, 0, 100%);\r\n @include at-transition(all .4s ease);\r\n color: var(--at-neutral-0);\r\n\r\n &::before {\r\n opacity: 1;\r\n transform: translate(-50%, -50%);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-wrap {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n margin-left: 0;\r\n margin-right: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n}\r\n\r\n.mp-footer {\r\n &-style {\r\n & .at-hero-social a {\r\n color: var(--at-common-white);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n\r\n &:hover {\r\n background: var(--at-common-white);\r\n color: var(--at-common-black);\r\n }\r\n }\r\n\r\n & .at-footer-copyright {\r\n color: var(--at-common-white);\r\n }\r\n\r\n\r\n & .at-about-border {\r\n border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n }\r\n}\r\n\r\n\r\n.text-scale-anim {\r\n white-space: pre-wrap;\r\n transform-origin: top left;\r\n}\r\n\r\n.at-letter-span {\r\n display: inline-block;\r\n}\r\n\r\n.at-word-span {\r\n display: inline-block;\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* Footer Style 2\r\n/*----------------------------------------*/\r\n\r\n\r\n\r\n.footer-2-follow-label {\r\n font-size: 12px;\r\n letter-spacing: 0.02em;\r\n font-weight: 500;\r\n}\r\n\r\n\r\n.footer-2-border {\r\n border-top: 1px solid rgba(255, 255, 255, 0.30);\r\n\r\n}\r\n\r\n.footer-2-connect-title {\r\n font-weight: 500;\r\n font-size: 160px;\r\n letter-spacing: -11px;\r\n line-height: 1.1;\r\n\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n letter-spacing: 0;\r\n font-size: clamp(3rem, 4vw, 3rem);\r\n }\r\n\r\n @media #{$md} {\r\n font-size: clamp(4rem, 4vw, 3rem);\r\n }\r\n\r\n}\r\n\r\n.sale-off {\r\n color: var(--at-neutral-900);\r\n text-align: center;\r\n font-size: 14px;\r\n font-weight: 700;\r\n line-height: 17.506px;\r\n display: inline-flex;\r\n transform: rotate(-8.359deg);\r\n padding: 4.265px 16px 3.264px 16px;\r\n justify-content: center;\r\n align-items: center;\r\n background: var(--at-theme-primary);\r\n}\r\n\r\n.footer-3-logo {\r\n transform: translateX(-30px);\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* Footer style 7 (Home 7)\r\n/*----------------------------------------*/\r\n\r\n.footer-7 {\r\n padding-top: 40px;\r\n background: #0f0f0f;\r\n color: #fefefe;\r\n\r\n &__top {\r\n padding-bottom: 26px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.12);\r\n margin-bottom: 44px;\r\n }\r\n\r\n &__nav {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px 32px;\r\n }\r\n\r\n &__nav-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n font-size: 18px;\r\n font-weight: 400;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: #b7b7b7;\r\n text-decoration: none;\r\n transition: color .25s ease, opacity .25s ease;\r\n\r\n &:hover {\r\n color: #fefefe;\r\n\r\n .footer-7__nav-arrow {\r\n opacity: 0.6;\r\n visibility: visible;\r\n transform: translate(2px, -2px);\r\n }\r\n }\r\n\r\n &.is-active {\r\n color: #fefefe;\r\n text-decoration: underline;\r\n text-underline-offset: 6px;\r\n }\r\n }\r\n\r\n &__nav-arrow {\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity .25s ease, transform .25s ease, visibility .25s ease;\r\n }\r\n\r\n &__mid {\r\n padding-bottom: 38px;\r\n position: relative;\r\n }\r\n\r\n &__object {\r\n margin-top: 16px;\r\n opacity: 0.9;\r\n }\r\n\r\n &__social-icon {\r\n width: 30px;\r\n height: 30px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 6px;\r\n background: rgba(255, 255, 255, 0.08);\r\n color: #fefefe;\r\n flex-shrink: 0;\r\n }\r\n\r\n &__social-arrow {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transform: rotate(90deg);\r\n color: #fefefe;\r\n opacity: 0.9;\r\n }\r\n\r\n &__contact {\r\n font-size: 18px;\r\n font-weight: 500;\r\n letter-spacing: -0.05em;\r\n color: #fefefe;\r\n\r\n a {\r\n color: inherit;\r\n text-decoration: none;\r\n transition: color .25s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n }\r\n\r\n &__address {\r\n font-size: 18px;\r\n font-weight: 500;\r\n letter-spacing: -0.05em;\r\n color: #fefefe;\r\n }\r\n\r\n &__hours {\r\n &-label {\r\n opacity: 0.5;\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n &-value {\r\n font-size: 20px;\r\n font-weight: 500;\r\n letter-spacing: -0.05em;\r\n }\r\n }\r\n\r\n &__newsletter-title {\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.05em;\r\n color: #fefefe;\r\n opacity: 1;\r\n }\r\n\r\n &__form {\r\n display: grid;\r\n gap: 8px;\r\n }\r\n\r\n &__input {\r\n height: 50px;\r\n padding: 0 24px;\r\n border-radius: 16px;\r\n background: #1d1d1d;\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n color: #fefefe;\r\n outline: none;\r\n\r\n &::placeholder {\r\n color: rgba(254, 254, 254, 0.5);\r\n }\r\n\r\n &:focus {\r\n border-color: rgba(240, 70, 14, 0.65);\r\n }\r\n }\r\n\r\n &__submit {\r\n height: 50px;\r\n border-radius: 16px;\r\n background: #1d1d1d;\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n color: #fefefe;\r\n font-size: 16px;\r\n font-weight: 600;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n transition: background .25s ease, border-color .25s ease, transform .25s ease;\r\n\r\n // Label slide (same pattern as `.at-btn`, scoped here so layout stays `footer-7__submit`)\r\n & > span {\r\n position: relative;\r\n z-index: 1;\r\n overflow: hidden;\r\n display: inline-block;\r\n line-height: 1.2;\r\n\r\n & span {\r\n &.text-1 {\r\n position: relative;\r\n display: block;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n &.text-2 {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n width: 100%;\r\n display: block;\r\n transition: top 0.3s ease, transform 0.3s ease;\r\n }\r\n }\r\n }\r\n\r\n & > i {\r\n position: relative;\r\n overflow: hidden;\r\n width: 16px;\r\n height: 16px;\r\n display: inline-flex;\r\n flex-shrink: 0;\r\n font-style: normal;\r\n\r\n & svg {\r\n transform: translateY(-2px);\r\n position: absolute;\r\n bottom: -1px;\r\n left: 1px;\r\n transition: transform 0.2s ease-out, opacity 0.2s ease-out;\r\n\r\n &:last-child {\r\n left: -12px;\r\n bottom: -12px;\r\n transform: translate(0, 0);\r\n opacity: 0;\r\n }\r\n }\r\n }\r\n\r\n &:hover {\r\n background: rgba(29, 29, 29, 0.75);\r\n border-color: rgba(255, 255, 255, 0.14);\r\n transform: translateY(-1px);\r\n color: #fefefe;\r\n\r\n & > span span {\r\n &.text-1 {\r\n transform: translateY(-150%);\r\n }\r\n\r\n &.text-2 {\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n }\r\n\r\n & > i svg:first-child {\r\n transform: translate(16px, -16px);\r\n }\r\n\r\n & > i svg:last-child {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translate(13px, -13px);\r\n }\r\n }\r\n }\r\n\r\n &__word {\r\n font-family: var(--at-heading-font);\r\n font-weight: 900;\r\n font-size: clamp(3.25rem, 10vw, 15.25rem);\r\n line-height: 0.93;\r\n letter-spacing: 0;\r\n color: #fefefe;\r\n margin-top: 70px;\r\n padding-bottom: 10px;\r\n white-space: nowrap;\r\n text-align: center;\r\n\r\n @media #{$md,$sm,$xs} {\r\n white-space: normal;\r\n }\r\n }\r\n\r\n &__bottom {\r\n padding: 18px 0 30px;\r\n }\r\n\r\n &__bottom-inner {\r\n border-top: 1px solid rgba(255, 255, 255, 0.12);\r\n padding-top: 15px;\r\n }\r\n\r\n &__copy {\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n opacity: 0.5;\r\n }\r\n\r\n &__policies {\r\n a {\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n opacity: 0.5;\r\n color: #fefefe;\r\n text-decoration: none;\r\n transition: opacity .25s ease, color .25s ease;\r\n\r\n &:hover {\r\n opacity: 1;\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* Footer style 8 (Home 8)\r\n/*----------------------------------------*/\r\n\r\n.footer-8 {\r\n padding-top: 40px;\r\n background: #0f0f0f;\r\n color: #fefefe;\r\n position: relative;\r\n\r\n &__bg {\r\n position: absolute;\r\n inset: 50% auto auto 50%;\r\n transform: translate(-50%, -50%);\r\n width: 1920px;\r\n height: 1012px;\r\n pointer-events: none;\r\n z-index: 0;\r\n opacity: 0.9;\r\n\r\n img {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &__container {\r\n position: relative;\r\n z-index: 1;\r\n max-width: 1920px;\r\n padding-left: clamp(20px, 5.5vw, 104px);\r\n padding-right: clamp(20px, 5.5vw, 104px);\r\n }\r\n\r\n &__top {\r\n padding-bottom: 26px;\r\n border-bottom: 1px solid #212121;\r\n margin-bottom: 44px;\r\n }\r\n\r\n &__nav {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px 32px;\r\n }\r\n\r\n &__nav-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n font-size: 18px;\r\n font-weight: 400;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: #b7b7b7;\r\n text-decoration: none;\r\n transition: color .28s ease, text-decoration-color .28s ease;\r\n text-decoration: underline;\r\n text-decoration-color: transparent;\r\n text-underline-offset: 6px;\r\n\r\n &:hover {\r\n color: #fefefe;\r\n text-decoration-color: currentColor;\r\n\r\n .footer-8__nav-arrow {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translate(2px, -2px);\r\n }\r\n }\r\n\r\n &.is-active {\r\n color: #b7b7b7;\r\n text-decoration-color: transparent;\r\n }\r\n }\r\n\r\n &__nav-arrow {\r\n width: 14px;\r\n height: 13px;\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translate(0, 0);\r\n transition: opacity .28s ease, transform .28s ease, visibility .28s ease;\r\n }\r\n\r\n &__mid {\r\n padding-bottom: 38px;\r\n }\r\n\r\n &__contact {\r\n font-size: 18px;\r\n font-weight: 500;\r\n letter-spacing: -0.05em;\r\n color: #fefefe;\r\n\r\n a {\r\n color: inherit;\r\n text-decoration: none;\r\n transition: color .25s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n }\r\n\r\n &__address {\r\n font-size: 18px;\r\n font-weight: 500;\r\n letter-spacing: -0.05em;\r\n color: #fefefe;\r\n }\r\n\r\n &__hours {\r\n &-label {\r\n opacity: 0.5;\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n &-value {\r\n font-size: 20px;\r\n font-weight: 500;\r\n letter-spacing: -0.05em;\r\n }\r\n }\r\n\r\n &__socials {\r\n max-width: 279px;\r\n padding-top: 6px;\r\n }\r\n\r\n &__social-link {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n padding: 6px 0;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.3);\r\n text-decoration: none;\r\n color: #b7b7b7;\r\n transition: color .25s ease, border-color .25s ease, transform .25s ease;\r\n\r\n &:hover {\r\n color: #fefefe;\r\n border-color: rgba(255, 255, 255, 0.45);\r\n transform: translateX(2px);\r\n }\r\n\r\n &.is-active {\r\n color: #fefefe;\r\n }\r\n\r\n &.no-border {\r\n border-bottom: 0;\r\n }\r\n }\r\n\r\n &__social-left {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n &__social-icon {\r\n width: 30px;\r\n height: 30px;\r\n flex-shrink: 0;\r\n }\r\n\r\n &__social-arrow {\r\n width: 16px;\r\n height: 15px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transform: rotate(90deg);\r\n opacity: 0.9;\r\n\r\n img {\r\n width: 15px;\r\n height: 16px;\r\n }\r\n }\r\n\r\n &__newsletter-title {\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.05em;\r\n color: #fefefe;\r\n }\r\n\r\n &__form {\r\n display: grid;\r\n gap: 8px;\r\n max-width: 410px;\r\n }\r\n\r\n &__input {\r\n height: 50px;\r\n padding: 0 24px;\r\n border-radius: 16px;\r\n background: #1d1d1d;\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n color: #fefefe;\r\n outline: none;\r\n\r\n &::placeholder {\r\n color: rgba(254, 254, 254, 0.5);\r\n }\r\n\r\n &:focus {\r\n border-color: rgba(240, 70, 14, 0.65);\r\n }\r\n }\r\n\r\n &__submit {\r\n height: 50px;\r\n border-radius: 16px;\r\n background: #1d1d1d;\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n color: #fefefe;\r\n font-size: 16px;\r\n font-weight: 600;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n transition: background .25s ease, border-color .25s ease, transform .25s ease;\r\n\r\n img {\r\n width: 14px;\r\n height: 13px;\r\n transform: translateY(-1px);\r\n }\r\n\r\n &:hover {\r\n background: rgba(29, 29, 29, 0.75);\r\n border-color: rgba(255, 255, 255, 0.14);\r\n transform: translateY(-1px);\r\n color: #fefefe;\r\n }\r\n }\r\n\r\n &__bottom {\r\n border-top: 1px solid #212121;\r\n padding: 26px 0;\r\n }\r\n\r\n &__copy {\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n opacity: 0.5;\r\n }\r\n\r\n &__policies {\r\n a {\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n color: rgba(254, 254, 254, 0.5);\r\n text-decoration: none;\r\n transition: color .25s ease;\r\n\r\n &:hover {\r\n color: #fefefe;\r\n }\r\n }\r\n }\r\n}\r\n\r\n","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* Footer style 9 (Home 9)\r\n/*----------------------------------------*/\r\n\r\n.footer-9 {\r\n position: relative;\r\n padding-top: clamp(48px, 5.5vw, 87px);\r\n padding-bottom: 0;\r\n background: var(--at-neutral-50, #f2f2f2);\r\n color: var(--at-neutral-950, #0f0f0f);\r\n\r\n &__container {\r\n max-width: 2200px;\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n }\r\n\r\n &__top {\r\n margin-bottom: clamp(32px, 4vw, 56px);\r\n }\r\n\r\n &__label {\r\n margin: 0 0 clamp(18px, 2vw, 24px);\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: 12px;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n opacity: 0.5;\r\n }\r\n\r\n /* Same structure / hover as footer-6 alt-footer-link-item; links stay neutral-950 on light bg */\r\n &__quick-links {\r\n margin-left: 0;\r\n margin-right: 0;\r\n\r\n .alt-footer-link-item ul li {\r\n list-style: none;\r\n\r\n a {\r\n display: inline-flex;\r\n align-items: center;\r\n font-family: var(--at-ff-body);\r\n font-weight: 400;\r\n font-size: clamp(17px, 1.25vw, 20px);\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n text-decoration: none;\r\n position: relative;\r\n transition: all 0.5s ease;\r\n\r\n &::before {\r\n content: '';\r\n width: 14px;\r\n height: 13px;\r\n background-image: url('data:image/svg+xml,');\r\n margin-left: 14px;\r\n position: absolute;\r\n left: 100%;\r\n top: 50%;\r\n opacity: 0;\r\n transition: all 0.5s ease;\r\n transform: translate(-15px, -40%);\r\n }\r\n\r\n &:hover {\r\n @include bgborder(currentColor, 0, 100%);\r\n margin-left: 5px;\r\n transition: all 0.5s ease;\r\n\r\n &::before {\r\n opacity: 0.85;\r\n transform: translate(-50%, -50%);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &__contact-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: clamp(24px, 4vw, 48px);\r\n align-items: flex-start;\r\n }\r\n\r\n &__contact {\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: clamp(17px, 1.25vw, 20px);\r\n line-height: 1.45;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n\r\n a {\r\n color: inherit;\r\n text-decoration: none;\r\n transition: color 0.25s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n }\r\n\r\n &__contact-line+&__contact-line {\r\n margin-top: 16px;\r\n }\r\n\r\n &__address {\r\n margin-top: 16px;\r\n }\r\n\r\n &__hours {\r\n &-label {\r\n margin-bottom: 6px;\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: 12px;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n opacity: 0.5;\r\n }\r\n\r\n &-value {\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: clamp(17px, 1.25vw, 20px);\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n }\r\n\r\n /* Same HTML pattern as footer-7 `.alt-footer-social-item`; neutral-950 text/icons on light bg */\r\n &__socials {\r\n max-width: 436px;\r\n margin-left: auto;\r\n padding-top: 4px;\r\n\r\n @media (max-width: 1199px) {\r\n margin-left: 0;\r\n }\r\n\r\n &.alt-footer-social-item.white-mode ul li a {\r\n color: var(--at-neutral-950, #0f0f0f);\r\n\r\n .icon-social {\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n &>svg {\r\n flex-shrink: 0;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n /* Keep neutral-950 on hover (override white-mode neutral-900) */\r\n &:hover {\r\n color: var(--at-neutral-950, #0f0f0f);\r\n\r\n .icon-social,\r\n &>svg {\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n }\r\n }\r\n }\r\n\r\n &__brand {\r\n margin: 0 auto clamp(40px, 6vw, 80px);\r\n max-width: 100%;\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(42px, 12vw, 192px);\r\n line-height: 0.88;\r\n letter-spacing: -0.05em;\r\n text-align: center;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n &__bottom {\r\n padding-top: 24px;\r\n }\r\n\r\n &__bottom-bar {\r\n padding-bottom: clamp(20px, 2.5vw, 28px);\r\n }\r\n\r\n &__copy {\r\n font-family: var(--at-ff-body);\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-500, #585959);\r\n }\r\n\r\n &__policies {\r\n a {\r\n font-family: var(--at-ff-body);\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-500, #585959);\r\n text-decoration: none;\r\n white-space: nowrap;\r\n transition: color 0.25s ease;\r\n\r\n &:hover {\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n }\r\n }\r\n\r\n &__line {\r\n width: 100%;\r\n max-width: 1720px;\r\n margin: 0 auto;\r\n\r\n img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* Footer style 10 (Home 10)\r\n/*----------------------------------------*/\r\n\r\n.footer-10 {\r\n position: relative;\r\n padding-top: clamp(48px, 6vw, 100px);\r\n padding-bottom: clamp(24px, 3vw, 36px);\r\n background: var(--at-neutral-950);\r\n color: var(--at-neutral-0);\r\n\r\n &__bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n pointer-events: none;\r\n overflow: hidden;\r\n }\r\n\r\n &__bg-img {\r\n position: absolute;\r\n left: 50%;\r\n top: 0;\r\n transform: translateX(-50%);\r\n width: min(2096px, 160%);\r\n max-width: none;\r\n height: auto;\r\n opacity: 0.28;\r\n object-fit: cover;\r\n mix-blend-mode: lighten;\r\n }\r\n\r\n .container-2200 {\r\n z-index: 1;\r\n }\r\n\r\n &__hero {\r\n padding-bottom: clamp(40px, 6vw, 72px);\r\n margin-bottom: clamp(8px, 2vw, 24px);\r\n }\r\n\r\n &__deco {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n pointer-events: none;\r\n z-index: 0;\r\n width: min(200px, 18vw);\r\n\r\n img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n transform-origin: center center;\r\n will-change: transform;\r\n }\r\n\r\n &--left {\r\n left: 0;\r\n\r\n @media (min-width: 1400px) {\r\n left: clamp(8px, 4vw, 48px);\r\n }\r\n }\r\n\r\n &--right {\r\n right: 0;\r\n\r\n @media (min-width: 1400px) {\r\n right: clamp(8px, 4vw, 48px);\r\n }\r\n }\r\n }\r\n\r\n &__headline {\r\n max-width: 18ch;\r\n margin-left: auto;\r\n margin-right: auto;\r\n margin-bottom: clamp(24px, 3.5vw, 36px) !important;\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(32px, 4.5vw, 64px);\r\n line-height: 1.12;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n text-wrap: balance;\r\n color: var(--at-neutral-0);\r\n }\r\n\r\n &__cta-row {\r\n gap: 0;\r\n }\r\n\r\n &__cta {\r\n display: inline-flex;\r\n align-items: center;\r\n text-decoration: none;\r\n color: var(--at-neutral-0);\r\n transition: transform 0.25s ease, filter 0.25s ease;\r\n\r\n &:hover {\r\n transform: translateY(-2px);\r\n color: var(--at-neutral-0);\r\n }\r\n }\r\n\r\n &__cta-pill {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 50px;\r\n padding: 12px 27px;\r\n border-radius: 50px;\r\n background: var(--at-theme-primary);\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 16px;\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n color: var(--at-neutral-0);\r\n }\r\n\r\n &__cta-round {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 50px;\r\n height: 50px;\r\n flex-shrink: 0;\r\n margin-left: 0;\r\n border-radius: 50%;\r\n background: var(--at-theme-primary);\r\n color: var(--at-neutral-0);\r\n\r\n svg {\r\n display: block;\r\n }\r\n }\r\n\r\n &__mid {\r\n padding-bottom: clamp(28px, 4vw, 48px);\r\n }\r\n\r\n &__nav-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 14px;\r\n }\r\n\r\n &__nav-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n width: fit-content;\r\n font-family: var(--at-ff-body);\r\n font-weight: 400;\r\n font-size: 18px;\r\n line-height: 1.33;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-300);\r\n text-decoration: underline;\r\n text-decoration-color: transparent;\r\n text-underline-offset: 4px;\r\n text-decoration-thickness: 1px;\r\n transition:\r\n color 0.4s cubic-bezier(0.4, 0, 0.2, 1),\r\n text-decoration-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n &:hover {\r\n color: var(--at-neutral-0);\r\n text-decoration-color: currentColor;\r\n\r\n .footer-10__nav-arrow {\r\n max-width: 14px;\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n\r\n &:focus-visible {\r\n color: var(--at-neutral-0);\r\n text-decoration-color: currentColor;\r\n outline: 2px solid var(--at-theme-primary);\r\n outline-offset: 3px;\r\n\r\n .footer-10__nav-arrow {\r\n max-width: 14px;\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n }\r\n\r\n &__nav-arrow {\r\n display: block;\r\n flex-shrink: 0;\r\n width: 14px;\r\n height: 13px;\r\n max-width: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n object-fit: contain;\r\n transform: translateX(-6px);\r\n transition:\r\n max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),\r\n opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),\r\n transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n &__contact-hours {\r\n align-items: flex-start;\r\n }\r\n\r\n &__contact {\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: 18px;\r\n line-height: 1.45;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-0);\r\n\r\n a {\r\n color: inherit;\r\n text-decoration: none;\r\n transition: color 0.25s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n }\r\n\r\n &__address {\r\n font-weight: 500;\r\n color: var(--at-neutral-0);\r\n }\r\n\r\n &__hours {\r\n &-label {\r\n margin-bottom: 6px;\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: 16px;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-0);\r\n opacity: 0.5;\r\n }\r\n\r\n &-value {\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: 20px;\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-0);\r\n }\r\n }\r\n\r\n /* Newsletter — same interaction pattern as `.footer-7__form` / `.footer-7__submit` */\r\n &__newsletter-title {\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.05em;\r\n line-height: 1.35;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-0);\r\n }\r\n\r\n &__form {\r\n display: grid;\r\n gap: 8px;\r\n max-width: 410px;\r\n }\r\n\r\n &__input {\r\n height: 50px;\r\n padding: 0 24px;\r\n border-radius: 16px;\r\n background: var(--at-neutral-900);\r\n border: 1px solid rgba(var(--at-neutral-0-rgb), 0.08);\r\n color: var(--at-neutral-0);\r\n outline: none;\r\n font-size: 16px;\r\n letter-spacing: -0.05em;\r\n\r\n &::placeholder {\r\n color: rgba(var(--at-neutral-0-rgb), 0.5);\r\n }\r\n\r\n &:focus {\r\n border-color: rgba(240, 70, 14, 0.65);\r\n }\r\n }\r\n\r\n &__submit {\r\n height: 50px;\r\n border-radius: 16px;\r\n background: var(--at-neutral-900);\r\n border: 1px solid rgba(var(--at-neutral-0-rgb), 0.08);\r\n color: var(--at-neutral-0);\r\n font-size: 16px;\r\n font-weight: 600;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n transition:\r\n background 0.25s ease,\r\n border-color 0.25s ease,\r\n transform 0.25s ease;\r\n\r\n & > span {\r\n position: relative;\r\n z-index: 1;\r\n overflow: hidden;\r\n display: inline-block;\r\n line-height: 1.2;\r\n\r\n & span {\r\n &.text-1 {\r\n position: relative;\r\n display: block;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n &.text-2 {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n width: 100%;\r\n display: block;\r\n transition:\r\n top 0.3s ease,\r\n transform 0.3s ease;\r\n }\r\n }\r\n }\r\n\r\n & > i {\r\n position: relative;\r\n overflow: hidden;\r\n width: 16px;\r\n height: 16px;\r\n display: inline-flex;\r\n flex-shrink: 0;\r\n font-style: normal;\r\n\r\n & svg {\r\n transform: translateY(-2px);\r\n position: absolute;\r\n bottom: -1px;\r\n left: 1px;\r\n transition:\r\n transform 0.2s ease-out,\r\n opacity 0.2s ease-out;\r\n\r\n &:last-child {\r\n left: -12px;\r\n bottom: -12px;\r\n transform: translate(0, 0);\r\n opacity: 0;\r\n }\r\n }\r\n }\r\n\r\n &:hover {\r\n background: color-mix(in srgb, var(--at-neutral-900) 82%, var(--at-neutral-0));\r\n border-color: rgba(var(--at-neutral-0-rgb), 0.14);\r\n transform: translateY(-1px);\r\n color: var(--at-neutral-0);\r\n\r\n & > span span {\r\n &.text-1 {\r\n transform: translateY(-150%);\r\n }\r\n\r\n &.text-2 {\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n }\r\n\r\n & > i svg:first-child {\r\n transform: translate(16px, -16px);\r\n }\r\n\r\n & > i svg:last-child {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translate(13px, -13px);\r\n }\r\n }\r\n }\r\n\r\n &__bottom {\r\n padding-top: 0;\r\n }\r\n\r\n &__bottom-inner {\r\n border-top: 1px solid rgba(var(--at-neutral-0-rgb), 0.12);\r\n padding-top: clamp(14px, 2vw, 18px);\r\n }\r\n\r\n &__copy,\r\n &__since {\r\n font-family: var(--at-ff-body);\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-0);\r\n opacity: 0.5;\r\n }\r\n}\r\n","@use '../../utils' as *;\n\n/*----------------------------------------*/\n/* Footer style 11 (Home 11)\n/*----------------------------------------*/\n\n.footer-11 {\n position: relative;\n padding-top: clamp(48px, 6vw, 100px);\n padding-bottom: clamp(24px, 3vw, 36px);\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n\n &__bg {\n position: absolute;\n inset: 0;\n z-index: 0;\n pointer-events: none;\n overflow: hidden;\n }\n\n // ── Animated lines background ──────────────────────────────────\n &__bg-lines {\n position: absolute;\n inset: 0;\n overflow: hidden;\n\n // Diagonal grid pattern, drifts slowly\n &::before {\n content: '';\n position: absolute;\n inset: -100%;\n background-image: repeating-linear-gradient(\n 135deg,\n transparent,\n transparent 56px,\n rgba(255, 255, 255, 0.022) 56px,\n rgba(255, 255, 255, 0.022) 57px\n );\n animation: footer11-grid 14s linear infinite;\n }\n\n // Soft radial glow at bottom-center\n &::after {\n content: '';\n position: absolute;\n bottom: -20%;\n left: 50%;\n transform: translateX(-50%);\n width: 60%;\n height: 60%;\n background: radial-gradient(ellipse at center, rgba(255, 90, 0, 0.07) 0%, transparent 70%);\n pointer-events: none;\n }\n\n // Vertical scan lines\n span {\n position: absolute;\n top: -30%;\n width: 1px;\n height: 35%;\n animation: footer11-scan linear infinite;\n opacity: 0;\n }\n\n // White lines\n span:nth-child(1) {\n left: 6%;\n background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.18), transparent);\n animation-duration: 4s;\n animation-delay: 0s;\n }\n\n span:nth-child(2) {\n left: 19%;\n background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);\n animation-duration: 5.5s;\n animation-delay: -1.4s;\n }\n\n span:nth-child(3) {\n left: 34%;\n background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.14), transparent);\n height: 25%;\n animation-duration: 3.8s;\n animation-delay: -2.6s;\n }\n\n span:nth-child(4) {\n left: 51%;\n background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);\n animation-duration: 6.2s;\n animation-delay: -0.8s;\n }\n\n span:nth-child(5) {\n left: 66%;\n background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.16), transparent);\n height: 40%;\n animation-duration: 4.6s;\n animation-delay: -3.2s;\n }\n\n span:nth-child(6) {\n left: 80%;\n background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);\n animation-duration: 5s;\n animation-delay: -1.9s;\n }\n\n // Orange accent lines\n span:nth-child(7) {\n left: 27%;\n width: 1px;\n background: linear-gradient(to bottom, transparent, var(--at-theme-primary), transparent);\n height: 20%;\n animation-duration: 7s;\n animation-delay: -0.5s;\n opacity: 0;\n filter: blur(0.5px);\n }\n\n span:nth-child(8) {\n left: 72%;\n width: 1px;\n background: linear-gradient(to bottom, transparent, var(--at-theme-primary), transparent);\n height: 28%;\n animation-duration: 8.5s;\n animation-delay: -4s;\n opacity: 0;\n filter: blur(0.5px);\n }\n }\n\n @keyframes footer11-grid {\n from { transform: translate(0, 0); }\n to { transform: translate(57px, 57px); }\n }\n\n @keyframes footer11-scan {\n 0% { top: -40%; opacity: 0; }\n 8% { opacity: 1; }\n 88% { opacity: 1; }\n 100% { top: 115%; opacity: 0; }\n }\n\n .container-2200 {\n z-index: 1;\n }\n\n /* ---- CTA hero ---- */\n &__hero {\n padding-bottom: clamp(40px, 6vw, 72px);\n margin-bottom: clamp(8px, 2vw, 24px);\n }\n\n &__deco {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n width: min(200px, 18vw);\n\n img {\n display: block;\n width: 100%;\n height: auto;\n transform-origin: center center;\n will-change: transform;\n }\n\n &--left {\n left: 0;\n\n @media (min-width: 1400px) {\n left: clamp(8px, 4vw, 48px);\n }\n }\n\n &--right {\n right: 0;\n\n @media (min-width: 1400px) {\n right: clamp(8px, 4vw, 48px);\n }\n }\n }\n\n &__headline {\n max-width: 20ch;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: clamp(24px, 3.5vw, 36px) !important;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(32px, 4.5vw, 64px);\n line-height: 1.12;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n text-wrap: balance;\n color: var(--at-neutral-0);\n }\n\n &__cta-row {\n gap: 0;\n }\n\n &__cta {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n color: var(--at-neutral-0);\n transition: transform 0.25s ease, filter 0.25s ease;\n\n &:hover {\n transform: translateY(-2px);\n color: var(--at-neutral-0);\n }\n }\n\n &__cta-pill {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 50px;\n padding: 12px 27px;\n border-radius: 50px;\n background: var(--at-theme-primary);\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n white-space: nowrap;\n color: var(--at-neutral-0);\n }\n\n &__cta-round {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n height: 50px;\n flex-shrink: 0;\n margin-left: 0;\n border-radius: 50%;\n background: var(--at-theme-primary);\n color: var(--at-neutral-0);\n\n svg {\n display: block;\n }\n }\n\n /* ---- Mid section ---- */\n &__mid {\n padding-bottom: clamp(28px, 4vw, 48px);\n }\n\n &__nav-list {\n display: flex;\n flex-direction: column;\n gap: 14px;\n }\n\n &__nav-link {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n width: fit-content;\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 18px;\n line-height: 1.33;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-neutral-300);\n text-decoration: underline;\n text-decoration-color: transparent;\n text-underline-offset: 4px;\n text-decoration-thickness: 1px;\n transition:\n color 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n text-decoration-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n\n &:hover {\n color: var(--at-neutral-0);\n text-decoration-color: currentColor;\n\n .footer-11__nav-arrow {\n max-width: 14px;\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n &:focus-visible {\n color: var(--at-neutral-0);\n text-decoration-color: currentColor;\n outline: 2px solid var(--at-theme-primary);\n outline-offset: 3px;\n\n .footer-11__nav-arrow {\n max-width: 14px;\n opacity: 1;\n transform: translateX(0);\n }\n }\n }\n\n &__nav-arrow {\n display: block;\n flex-shrink: 0;\n width: 14px;\n height: 13px;\n max-width: 0;\n opacity: 0;\n overflow: hidden;\n object-fit: contain;\n transform: translateX(-6px);\n transition:\n max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),\n opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n /* ---- Contact & Hours ---- */\n &__contact-hours {\n align-items: flex-start;\n }\n\n &__contact {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 18px;\n line-height: 1.45;\n letter-spacing: -0.05em;\n color: var(--at-neutral-0);\n\n a {\n color: inherit;\n text-decoration: none;\n transition: color 0.25s ease;\n\n &:hover {\n color: var(--at-theme-primary);\n }\n }\n }\n\n &__address {\n font-weight: 500;\n color: var(--at-neutral-0);\n }\n\n &__hours {\n &-label {\n margin-bottom: 6px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-0);\n opacity: 0.5;\n }\n\n &-value {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 20px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--at-neutral-0);\n }\n }\n\n /* ---- Newsletter ---- */\n &__newsletter-title {\n font-size: 14px;\n font-weight: 500;\n letter-spacing: -0.05em;\n line-height: 1.35;\n text-transform: uppercase;\n color: var(--at-neutral-0);\n }\n\n &__form {\n display: grid;\n gap: 8px;\n max-width: 410px;\n }\n\n &__input {\n height: 50px;\n padding: 0 24px;\n border-radius: 16px;\n background: var(--at-neutral-900);\n border: 1px solid rgba(var(--at-neutral-0-rgb), 0.08);\n color: var(--at-neutral-0);\n outline: none;\n font-size: 16px;\n letter-spacing: -0.05em;\n\n &::placeholder {\n color: rgba(var(--at-neutral-0-rgb), 0.5);\n }\n\n &:focus {\n border-color: rgba(240, 70, 14, 0.65);\n }\n }\n\n &__submit {\n height: 50px;\n border-radius: 16px;\n background: var(--at-neutral-900);\n border: 1px solid rgba(var(--at-neutral-0-rgb), 0.08);\n color: var(--at-neutral-0);\n font-size: 16px;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n transition:\n background 0.25s ease,\n border-color 0.25s ease,\n transform 0.25s ease;\n\n & > span {\n position: relative;\n z-index: 1;\n overflow: hidden;\n display: inline-block;\n line-height: 1.2;\n\n & span {\n &.text-1 {\n position: relative;\n display: block;\n transition: transform 0.3s ease;\n }\n\n &.text-2 {\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n display: block;\n transition:\n top 0.3s ease,\n transform 0.3s ease;\n }\n }\n }\n\n & > i {\n position: relative;\n overflow: hidden;\n width: 16px;\n height: 16px;\n display: inline-flex;\n flex-shrink: 0;\n font-style: normal;\n\n & svg {\n transform: translateY(-2px);\n position: absolute;\n bottom: -1px;\n left: 1px;\n transition:\n transform 0.2s ease-out,\n opacity 0.2s ease-out;\n\n &:last-child {\n left: -12px;\n bottom: -12px;\n transform: translate(0, 0);\n opacity: 0;\n }\n }\n }\n\n &:hover {\n background: color-mix(in srgb, var(--at-neutral-900) 82%, var(--at-neutral-0));\n border-color: rgba(var(--at-neutral-0-rgb), 0.14);\n transform: translateY(-1px);\n color: var(--at-neutral-0);\n\n & > span span {\n &.text-1 {\n transform: translateY(-150%);\n }\n\n &.text-2 {\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n & > i svg:first-child {\n transform: translate(16px, -16px);\n }\n\n & > i svg:last-child {\n opacity: 1;\n visibility: visible;\n transform: translate(13px, -13px);\n }\n }\n }\n\n /* ---- Social links ---- */\n &__socials-label {\n font-size: 14px;\n font-weight: 500;\n letter-spacing: -0.05em;\n line-height: 1.35;\n text-transform: uppercase;\n color: var(--at-neutral-0);\n margin-bottom: 12px;\n }\n\n &__social-list {\n display: flex;\n flex-wrap: wrap;\n gap: 8px 20px;\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n &__social-link {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 16px;\n letter-spacing: -0.02em;\n color: var(--at-neutral-300);\n text-decoration: none;\n transition: color 0.3s ease;\n\n svg {\n flex-shrink: 0;\n opacity: 0.7;\n transition: opacity 0.3s ease;\n }\n\n &:hover {\n color: var(--at-neutral-0);\n\n svg {\n opacity: 1;\n }\n }\n\n &:focus-visible {\n outline: 2px solid var(--at-theme-primary);\n outline-offset: 3px;\n }\n }\n\n /* ---- Bottom bar ---- */\n &__bottom {\n padding-top: 0;\n }\n\n &__bottom-inner {\n border-top: 1px solid rgba(var(--at-neutral-0-rgb), 0.12);\n padding-top: clamp(14px, 2vw, 18px);\n }\n\n &__copy,\n &__since,\n &__tagline {\n font-family: var(--at-ff-body);\n font-size: 16px;\n font-weight: 500;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-0);\n opacity: 0.5;\n }\n\n &__tagline {\n text-transform: uppercase;\n letter-spacing: 0.02em;\n }\n}\n","@use '../../utils' as *;\n\n/* Footer 12 (Home 12) — Always-dark CTA + main footer */\n.footer-12 {\n background-color: #0f0f0f;\n color: #fefefe;\n position: relative;\n}\n\n/* ── CTA strip ──────────────────────────────────── */\n.footer-12__cta {\n padding-top: 120px;\n padding-bottom: 120px;\n background-color: #0f0f0f;\n}\n\n.footer-12__cta-inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n row-gap: 32px;\n}\n\n.footer-12__cta-pill {\n display: inline-flex;\n align-items: center;\n column-gap: 8px;\n padding: 7px 14px;\n background-color: #212121;\n border: 1px solid #303030;\n border-radius: 999px;\n}\n\n.footer-12__cta-pill-dot {\n display: inline-block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n}\n\n.footer-12__cta-pill-text {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: #fefefe;\n white-space: nowrap;\n}\n\n.footer-12__cta-title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(40px, 6.5vw, 84px);\n line-height: 1;\n letter-spacing: -0.05em;\n color: #fefefe;\n text-align: center;\n}\n\n.footer-12__cta-sub {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 18px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: #b7b7b7;\n}\n\n.footer-12__cta-form {\n --footer12-cta-pad: 8px; /* uniform inset between pill border and inner controls */\n --footer12-cta-control-h: 44px; /* shared height of input + submit button */\n\n display: inline-flex;\n align-items: stretch; /* so input matches button height; pad becomes visually equal on all sides */\n column-gap: var(--footer12-cta-pad);\n padding: var(--footer12-cta-pad);\n background-color: #212121;\n border: 1px solid #303030;\n border-radius: 999px;\n max-width: 100%;\n}\n\n/* `input.` selector matches the global theme rule `input[type=\"email\"]` in\n specificity (1 element + 1 class) AND comes later in source order, so this\n reliably overrides the theme's height: 56px / line-height: 56px on this\n input only — without touching the global rule. */\ninput.footer-12__cta-input {\n flex: 1 1 auto;\n min-width: 0;\n height: var(--footer12-cta-control-h);\n padding: 0 16px;\n background: transparent;\n border: 0;\n color: #fefefe;\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 15px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n outline: none;\n\n &::placeholder {\n color: #585959;\n }\n}\n\n.footer-12__cta-submit {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: var(--footer12-cta-control-h);\n padding: 0 22px;\n background-color: var(--at-theme-primary);\n color: #fefefe;\n border: 0;\n border-radius: 999px;\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 14px;\n line-height: 1;\n letter-spacing: -0.02em;\n cursor: pointer;\n transition: background-color 0.3s ease, transform 0.3s ease;\n\n &:hover,\n &:focus-visible {\n background-color: #ff6128;\n }\n}\n\n/* ── Footer main ────────────────────────────────── */\n.footer-12__main {\n padding-top: 72px;\n padding-bottom: 32px;\n background-color: #0f0f0f;\n display: flex;\n flex-direction: column;\n}\n\n.footer-12__divider {\n display: block;\n width: 100%;\n height: 1px;\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.footer-12__columns {\n display: grid;\n grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) minmax(0, 0.9fr);\n column-gap: 48px;\n row-gap: 48px;\n padding: 64px 0;\n}\n\n.footer-12__col {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: 18px;\n min-width: 0;\n}\n\n.footer-12__col--brand {\n max-width: 420px;\n row-gap: 24px;\n}\n\n/* Brand */\n.footer-12__brand {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n color: #fefefe;\n\n &:hover,\n &:focus-visible {\n color: #fefefe;\n }\n}\n\n.footer-12__brand-logo {\n display: block;\n height: 30px;\n width: auto;\n}\n\n.footer-12__brand-desc {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 15px;\n line-height: 1.6;\n letter-spacing: -0.02em;\n color: #b7b7b7;\n}\n\n/* Socials — uses .at-hero-social pill pattern (shared with footer-1).\n Compound selector (.at-hero-social.footer-12__socials) keeps specificity\n above the global .at-hero-social rule from _hero.scss, which is loaded\n later in the cascade and would otherwise win on equal specificity. */\n.at-hero-social.footer-12__socials {\n justify-content: flex-start;\n gap: 8px;\n\n & a {\n color: var(--at-common-white);\n background: rgba(255, 255, 255, 0.06);\n border: 1px solid rgba(255, 255, 255, 0.32);\n\n &:hover,\n &:focus-visible {\n background: var(--at-theme-primary);\n border-color: var(--at-theme-primary);\n color: var(--at-common-white);\n }\n }\n}\n\n/* Column links */\n.footer-12__col-title {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.96px;\n color: #585959;\n text-transform: uppercase;\n}\n\n.footer-12__col-links {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n row-gap: 12px;\n\n a {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 15px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: #fefefe;\n text-decoration: none;\n transition: color 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-theme-primary);\n }\n }\n}\n\n/* Hours column */\n.footer-12__col--hours {\n row-gap: 13px;\n}\n\n.footer-12__hours-value {\n font-family: var(--at-ff-heading);\n font-weight: 400;\n font-size: 20px;\n line-height: 1.25;\n letter-spacing: -0.05em;\n color: #fefefe;\n}\n\n/* ── Bottom bar ─────────────────────────────────── */\n.footer-12__bottom {\n padding-top: 24px;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n column-gap: 24px;\n row-gap: 12px;\n}\n\n.footer-12__copy {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: #585959;\n}\n\n.footer-12__legal {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-wrap: wrap;\n column-gap: 24px;\n row-gap: 8px;\n\n a {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: #b7b7b7;\n text-decoration: none;\n transition: color 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-theme-primary);\n }\n }\n}\n\n/* ── Responsive ─────────────────────────────────── */\n@media #{$xxl} {\n .footer-12__cta {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n\n@media #{$xl} {\n .footer-12__cta {\n padding-top: 90px;\n padding-bottom: 90px;\n }\n .footer-12__columns {\n column-gap: 36px;\n }\n}\n\n@media #{$lg} {\n .footer-12__cta {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n .footer-12__cta-inner {\n row-gap: 24px;\n }\n .footer-12__main {\n padding-top: 56px;\n }\n .footer-12__columns {\n grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));\n padding: 48px 0;\n column-gap: 32px;\n row-gap: 32px;\n }\n .footer-12__col--hours {\n grid-column: 1 / -1;\n flex-direction: row;\n align-items: center;\n column-gap: 18px;\n row-gap: 0;\n }\n}\n\n@media #{$md} {\n .footer-12__cta {\n padding-top: 64px;\n padding-bottom: 64px;\n }\n .footer-12__cta-inner {\n row-gap: 20px;\n }\n .footer-12__main {\n padding-top: 48px;\n }\n .footer-12__columns {\n grid-template-columns: 1fr 1fr;\n column-gap: 32px;\n row-gap: 32px;\n padding: 40px 0;\n }\n .footer-12__col--brand {\n grid-column: 1 / -1;\n max-width: 100%;\n }\n .footer-12__col--hours {\n grid-column: 1 / -1;\n flex-direction: row;\n align-items: center;\n column-gap: 18px;\n row-gap: 0;\n }\n}\n\n@media #{$sm} {\n .footer-12__cta {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n .footer-12__cta-inner {\n row-gap: 18px;\n }\n .footer-12__cta-form {\n width: 100%;\n max-width: 420px;\n --footer12-cta-control-h: 40px;\n }\n .footer-12__cta-submit {\n padding: 0 18px;\n font-size: 13px;\n }\n .footer-12__main {\n padding-top: 40px;\n }\n .footer-12__columns {\n grid-template-columns: 1fr 1fr;\n column-gap: 20px;\n row-gap: 28px;\n padding: 36px 0;\n }\n .footer-12__col--brand {\n grid-column: 1 / -1;\n }\n .footer-12__col--hours {\n grid-column: 1 / -1;\n flex-direction: row;\n align-items: center;\n column-gap: 14px;\n row-gap: 0;\n }\n .footer-12__bottom {\n column-gap: 18px;\n }\n .footer-12__legal {\n column-gap: 18px;\n }\n}\n\n@media #{$xs} {\n .footer-12__cta {\n padding-top: 48px;\n padding-bottom: 48px;\n }\n .footer-12__cta-inner {\n row-gap: 16px;\n }\n .footer-12__cta-pill-text {\n font-size: 12px;\n }\n .footer-12__cta-sub {\n font-size: 16px;\n }\n /* On mobile the pill wrapper looks cramped; lay out as two stacked\n full-width controls with their own rounded corners — no outer pill. */\n .footer-12__cta-form {\n width: 100%;\n flex-direction: column;\n column-gap: 0;\n row-gap: 10px;\n padding: 0;\n background-color: transparent;\n border: 0;\n border-radius: 0;\n --footer12-cta-control-h: 48px;\n }\n input.footer-12__cta-input {\n width: 100%;\n text-align: center;\n padding: 0 16px;\n background-color: #212121;\n border: 1px solid #303030;\n border-radius: 999px;\n }\n .footer-12__cta-submit {\n padding: 0 16px;\n width: 100%;\n font-size: 14px;\n }\n .footer-12__main {\n padding-top: 32px;\n padding-bottom: 24px;\n }\n .footer-12__columns {\n grid-template-columns: 1fr;\n column-gap: 0;\n row-gap: 24px;\n padding: 28px 0;\n }\n .footer-12__col {\n row-gap: 14px;\n }\n .footer-12__col--brand {\n row-gap: 18px;\n }\n .footer-12__col--hours {\n flex-direction: row;\n column-gap: 12px;\n }\n .footer-12__hours-value {\n font-size: 18px;\n }\n .footer-12__brand-logo {\n height: 26px;\n }\n .footer-12__brand-desc {\n font-size: 14px;\n }\n .footer-12__col-links a {\n font-size: 14px;\n }\n .footer-12__bottom {\n flex-direction: column;\n align-items: flex-start;\n row-gap: 10px;\n }\n}\n","@use '../../utils' as *;\n\n/* Footer 13 — Architecture */\n.footer-13 {\n background-color: var(--at-neutral-0);\n border-top: 1px solid var(--at-neutral-200);\n color: var(--at-neutral-950);\n}\n\n/* ── Meta bar ────────────────────────────────── */\n.footer-13__meta {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding: 24px 96px;\n border-bottom: 1px solid var(--at-neutral-200);\n}\n\n.footer-13__meta-item {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n white-space: nowrap;\n}\n\n.footer-13__meta-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n}\n\n.footer-13__meta-key {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 11px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n}\n\n.footer-13__meta-val {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n}\n\n/* ── Body ────────────────────────────────────── */\n.footer-13__body {\n display: flex;\n flex-direction: column;\n gap: 96px;\n padding: 80px 96px 0;\n background-image: url('../imgs/pages/home-13/footer13-bg.webp');\n background-repeat: no-repeat;\n background-position: right bottom;\n}\n\n/* ── Top row ─────────────────────────────────── */\n.footer-13__top {\n display: grid;\n grid-template-columns: 640px 1fr;\n gap: 64px;\n align-items: start;\n}\n\n/* Brand */\n.footer-13__brand {\n display: flex;\n flex-direction: column;\n gap: 32px;\n align-items: flex-start;\n}\n\n.footer-13__logo {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n text-decoration: none;\n color: var(--at-neutral-950);\n\n img {\n width: 27px;\n height: 30px;\n object-fit: contain;\n display: block;\n }\n}\n\n.footer-13__logo-text {\n font-family: var(--at-ff-heading);\n font-weight: 700;\n font-size: 24px;\n line-height: 1.25;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n\n.footer-13__intro {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 18px;\n line-height: 1.555;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n max-width: 100%;\n}\n\n/* Newsletter form */\n.footer-13__form {\n display: flex;\n flex-direction: column;\n gap: 14px;\n width: 100%;\n padding-top: 16px;\n}\n\n.footer-13__form-label {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 11px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n}\n\n.footer-13__form-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 14px 0;\n border-bottom: 1px solid var(--at-neutral-200);\n}\n\n.footer-13__form-input {\n flex: 1 1 auto;\n min-width: 0;\n background: transparent;\n border: 0;\n padding: 0;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n\n &::placeholder {\n color: var(--at-neutral-500);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.footer-13__form-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: transparent;\n border: 0;\n padding: 0;\n cursor: pointer;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-950);\n transition: color 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-theme-primary);\n }\n}\n\n.footer-13__form-arrow {\n color: var(--at-theme-primary);\n font-size: 14px;\n line-height: 1;\n transition: transform 0.3s ease;\n}\n\n.footer-13__form-btn:hover .footer-13__form-arrow,\n.footer-13__form-btn:focus-visible .footer-13__form-arrow {\n transform: translateX(4px);\n}\n\n/* Link columns */\n.footer-13__cols {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 48px;\n align-items: start;\n}\n\n.footer-13__col {\n display: flex;\n flex-direction: column;\n gap: 24px;\n min-width: 0;\n}\n\n.footer-13__col-title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 11px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n}\n\n.footer-13__col-list {\n display: flex;\n flex-direction: column;\n gap: 14px;\n padding: 0;\n\n a {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n text-decoration: none;\n transition: color 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-theme-primary);\n }\n }\n}\n\n/* ── Studios row ─────────────────────────────── */\n.footer-13__studios {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 0;\n padding: 48px 0 0;\n border-top: 1px solid var(--at-neutral-200);\n margin: 0;\n max-width: 80%;\n}\n\n.footer-13__studio {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 0 32px;\n border-right: 1px solid var(--at-neutral-200);\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n border-right: none;\n }\n}\n\n.footer-13__studio-head {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\n.footer-13__studio-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-300);\n flex-shrink: 0;\n}\n\n.footer-13__studio-dot--active {\n background-color: var(--at-theme-primary);\n box-shadow: 0 0 0 3px rgba(240, 70, 14, 0.18);\n}\n\n.footer-13__studio-name {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 24px;\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.footer-13__studio-addr {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n line-height: 1.571;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n font-style: normal;\n}\n\n.footer-13__studio-status {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 11px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n}\n\n.footer-13__studio-status--open {\n color: var(--at-neutral-700);\n}\n\n/* ── Big brand text ──────────────────────────── */\n.footer-13__bigbrand {\n padding-top: 48px;\n width: 100%;\n overflow: hidden;\n}\n\n.footer-13__bigbrand-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(64px, 11vw, 188px);\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n white-space: nowrap;\n\n sup {\n font-size: 0.5em;\n top: -0.55em;\n font-weight: 600;\n }\n}\n\n/* ── Legal bar ───────────────────────────────── */\n.footer-13__legal {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding: 28px 96px;\n border-top: 1px solid var(--at-neutral-200);\n flex-wrap: wrap;\n}\n\n.footer-13__copy {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n.footer-13__social,\n.footer-13__legal-links {\n display: inline-flex;\n align-items: center;\n gap: 24px;\n padding: 0;\n flex-wrap: wrap;\n\n a {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: -0.02em;\n text-decoration: none;\n transition: color 0.3s ease;\n }\n}\n\n.footer-13__social a {\n color: var(--at-neutral-950);\n\n &:hover,\n &:focus-visible {\n color: var(--at-theme-primary);\n }\n}\n\n.footer-13__legal-links a {\n color: var(--at-neutral-500);\n\n &:hover,\n &:focus-visible {\n color: var(--at-neutral-950);\n }\n}\n\n/* ── Responsive ──────────────────────────────── */\n/* Desktop fine-tuning (range-based) */\n@media #{$xxl} {\n\n .footer-13__meta,\n .footer-13__legal {\n padding-inline: 32px;\n }\n\n .footer-13__body {\n padding: 64px 32px 0;\n }\n\n .footer-13__top {\n grid-template-columns: 480px 1fr;\n gap: 48px;\n }\n}\n\n@media #{$xl} {\n\n .footer-13__meta,\n .footer-13__legal {\n padding-inline: 24px;\n }\n\n .footer-13__body {\n padding: 56px 24px 0;\n gap: 64px;\n }\n\n .footer-13__top {\n grid-template-columns: 380px 1fr;\n gap: 32px;\n }\n\n .footer-13__cols {\n gap: 24px;\n }\n\n .footer-13__intro {\n font-size: 16px;\n }\n}\n\n/* Tablet & phone (≤1199px): stack top row, shrink paddings */\n@media (max-width: 1199.98px) {\n .footer-13__meta {\n flex-wrap: wrap;\n gap: 16px;\n padding: 16px 20px;\n }\n\n .footer-13__body {\n padding: 48px 20px 0;\n gap: 48px;\n }\n\n .footer-13__top {\n display: flex;\n flex-direction: column;\n gap: 48px;\n }\n\n .footer-13__legal {\n padding: 24px 20px;\n gap: 16px;\n }\n\n .footer-13__studios {\n padding-top: 32px;\n max-width: 100%;\n }\n\n .footer-13__intro {\n font-size: 16px;\n }\n}\n\n/* Tablet portrait & phone (≤991px): 2-col link cols, single-col studios, stacked legal */\n@media (max-width: 991.98px) {\n .footer-13__meta,\n .footer-13__legal {\n padding-inline: 16px;\n }\n\n .footer-13__body {\n padding: 40px 16px 0;\n gap: 40px;\n }\n\n .footer-13__cols {\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n }\n\n .footer-13__studios {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n\n .footer-13__studio {\n padding: 24px 0 0;\n border-right: none;\n border-top: 1px solid var(--at-neutral-200);\n\n &:first-child {\n padding-top: 0;\n border-top: none;\n }\n }\n\n .footer-13__legal {\n padding: 20px 16px;\n flex-direction: column;\n align-items: flex-start;\n }\n}\n\n/* Phone (≤767px): single-col link cols, form wraps */\n@media (max-width: 767.98px) {\n .footer-13__meta-item--lead {\n flex: 1 1 100%;\n }\n\n .footer-13__body {\n background-image: none;\n }\n\n .footer-13__cols {\n grid-template-columns: 1fr;\n }\n\n .footer-13__form-row {\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .footer-13__form-input {\n flex: 1 1 100%;\n }\n}\n\n/* Small phone (≤574px) */\n@media #{$xs} {\n .footer-13__intro {\n font-size: 15px;\n }\n\n .footer-13__studio-name {\n font-size: 20px;\n }\n\n .footer-13__bigbrand-text {\n font-size: clamp(44px, 8vw, 188px);\n }\n}","@use '../../utils' as *;\n\n/* ===========================================================\n Footer 14 — Photography Studio\n\n Designed dark in light mode. Inverts to light-on-dark via\n the --at-neutral-* token swap in dark mode (handled centrally\n in components/_dark-mode.scss).\n =========================================================== */\n\n.footer-14 {\n background-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n\n /* Meta strip */\n &__meta {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n gap: 12px 32px;\n padding: 16px 100px;\n border-bottom: 1px solid var(--at-neutral-800);\n\n @media #{$xxl} {\n padding: 16px 60px;\n }\n\n @media #{$xl} {\n padding: 16px 40px;\n }\n\n @media #{$lg},\n #{$md} {\n padding: 14px 30px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding: 12px 16px;\n gap: 10px 20px;\n }\n }\n\n &__meta-item {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n }\n\n &__meta-key {\n font-weight: 600;\n letter-spacing: 2px;\n color: var(--at-neutral-0);\n text-transform: uppercase;\n }\n\n &__meta-val {\n font-weight: 400;\n letter-spacing: 0.4px;\n color: var(--at-neutral-500);\n }\n\n /* Body */\n &__body {\n padding: 80px 100px 60px;\n\n @media #{$xxl} {\n padding: 72px 60px 56px;\n }\n\n @media #{$xl} {\n padding: 64px 40px 48px;\n }\n\n @media #{$lg},\n #{$md} {\n padding: 56px 30px 40px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding: 40px 16px 32px;\n }\n }\n\n /* Studios row */\n &__studios {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n\n @media #{$sm},\n #{$xs} {\n grid-template-columns: 1fr;\n margin: 32px 0 48px;\n padding: 24px 0;\n }\n }\n\n &__studio {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 0 24px;\n border-left: 1px solid var(--at-neutral-800);\n\n &:first-child {\n padding-left: 0;\n border-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n\n @media #{$sm},\n #{$xs} {\n padding: 16px 0 !important;\n border-left: 0 !important;\n border-top: 1px solid var(--at-neutral-500);\n\n &:first-child {\n border-top: 0;\n padding-top: 0 !important;\n }\n }\n }\n\n &__studio-head {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n }\n\n &__studio-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-500);\n\n &--active {\n background-color: var(--at-theme-primary);\n }\n }\n\n &__studio-name {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 20px;\n letter-spacing: -0.3px;\n line-height: 1;\n color: var(--at-neutral-0);\n }\n\n &__studio-addr {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n line-height: 1.6;\n letter-spacing: 0.2px;\n color: var(--at-neutral-500);\n font-style: normal;\n }\n\n &__studio-status {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 11px;\n letter-spacing: 1.6px;\n color: var(--at-neutral-500);\n\n &--open {\n color: var(--at-theme-primary);\n }\n }\n\n /* Big brand */\n &__bigbrand {\n position: relative;\n overflow: hidden;\n padding-top: 100px;\n }\n\n &__bigbrand-text {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(54px, 11.5vw, 220px);\n line-height: 0.95;\n letter-spacing: -0.027em;\n color: var(--at-neutral-0);\n white-space: nowrap;\n }\n\n &__bigbrand-badge {\n position: absolute;\n top: 30%;\n right: 6%;\n display: inline-block;\n padding: 5px 14px;\n background: var(--at-theme-primary);\n color: var(--at-neutral-900);\n font-family: var(--at-ff-body);\n font-weight: 700;\n font-size: 14px;\n line-height: 1.25;\n letter-spacing: 0.04em;\n transform: rotate(-8.36deg);\n white-space: nowrap;\n\n @media #{$lg},\n #{$md} {\n font-size: 12px;\n padding: 4px 10px;\n }\n\n @media #{$sm},\n #{$xs} {\n font-size: 10px;\n padding: 3px 8px;\n right: 4%;\n }\n }\n\n /* Legal bar */\n &__legal {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 24px;\n padding: 24px 100px;\n border-top: 1px solid var(--at-neutral-800);\n flex-wrap: wrap;\n\n @media #{$xxl} {\n padding: 24px 60px;\n }\n\n @media #{$xl} {\n padding: 24px 40px;\n }\n\n @media #{$lg},\n #{$md} {\n padding: 24px 30px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding: 20px 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n }\n }\n\n &__copy {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n letter-spacing: 0.2px;\n color: var(--at-neutral-500);\n }\n\n &__social,\n &__policy {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n }\n\n &__policy {\n gap: 16px;\n }\n\n &__social {\n a {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 12px;\n letter-spacing: 0.2px;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.25s ease;\n\n &:hover {\n opacity: 0.7;\n color: var(--at-neutral-0);\n }\n }\n }\n\n &__policy {\n a {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n letter-spacing: 0.2px;\n color: var(--at-neutral-500);\n text-decoration: none;\n transition: color 0.25s ease;\n\n &:hover {\n color: var(--at-neutral-0);\n }\n }\n }\n}","@use '../../utils' as *;\n\n/* ===========================================================\n Footer 15 — Fashion Agency\n\n Layout: 2x2 panel grid of dark rounded cards.\n Row 1: nav+social (64.5%) | newsletter (35.5%)\n Row 2: brand+services (35.5%) | contact+legal (64.5%)\n\n Always-dark surface (does not swap in dark mode) — uses\n literal hex tokens to match Figma frame intent.\n =========================================================== */\n\n.footer-15 {\n --footer15-panel-bg: #0f0f0f;\n --footer15-panel-radius: 32px;\n --footer15-panel-pad: 64px;\n --footer15-panel-min-h: 369px;\n --footer15-gap: 8px;\n --footer15-text: #fefefe;\n --footer15-muted: #b7b7b7;\n --footer15-faint: #585959;\n --footer15-input-bg: #1d1d1d;\n --footer15-stroke: rgba(255, 255, 255, 0.3);\n\n padding: 80px 8px 80px 5px;\n background-color: var(--at-neutral-0);\n color: var(--footer15-text);\n}\n\n/* ── Grid ────────────────────────────────────────────────── */\n/* 3-col grid with staggered spans: row 1 = 2/3 + 1/3,\n row 2 = 1/3 + 2/3 (zigzag panel layout). */\n.footer-15__grid {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--footer15-gap);\n}\n\n.footer-15__panel {\n position: relative;\n overflow: hidden;\n min-height: var(--footer15-panel-min-h);\n padding: var(--footer15-panel-pad);\n background-color: var(--footer15-panel-bg);\n border-radius: var(--footer15-panel-radius);\n display: flex;\n flex-direction: column;\n}\n\n.footer-15__panel--nav {\n grid-column: span 2;\n}\n\n.footer-15__panel--news {\n grid-column: span 1;\n justify-content: center;\n}\n\n.footer-15__panel--brand {\n grid-column: span 1;\n justify-content: space-between;\n gap: 48px;\n}\n\n.footer-15__panel--contact {\n grid-column: span 2;\n justify-content: space-between;\n gap: 32px;\n}\n\n/* ── Panel 1 — Nav + social ─────────────────────────────── */\n.footer-15__panel--nav {\n flex-direction: row;\n align-items: flex-end;\n justify-content: space-between;\n gap: 48px;\n}\n\n.footer-15__nav-wrap {\n display: flex;\n align-items: flex-start;\n gap: 56px;\n flex: 0 0 auto;\n}\n\n.footer-15__nav {\n display: flex;\n flex-direction: column;\n gap: 14px;\n\n li {\n position: relative;\n }\n\n a {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: var(--at-ff-heading);\n font-weight: 400;\n font-size: 22px;\n line-height: 1.1;\n letter-spacing: -0.05em;\n color: var(--footer15-muted);\n text-decoration: none;\n transition: color 0.3s ease;\n\n &:hover,\n &:focus-visible,\n &.is-current {\n color: var(--footer15-text);\n }\n }\n}\n\n.footer-15__nav-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: currentColor;\n transition: transform 0.3s ease;\n\n a:hover &,\n a:focus-visible & {\n transform: translate(2px, -2px);\n }\n}\n\n.footer-15__social {\n flex: 1 1 auto;\n max-width: 360px;\n display: flex;\n flex-direction: column;\n gap: 26px;\n align-items: flex-start;\n}\n\n.footer-15__eyebrow {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.16em;\n color: var(--footer15-text);\n text-transform: uppercase;\n opacity: 0.5;\n}\n\n.footer-15__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n\n a {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 10px 19px;\n border: 1px solid var(--footer15-stroke);\n border-radius: 32px;\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 14px;\n line-height: 1.15;\n letter-spacing: -0.02em;\n color: var(--footer15-text);\n text-decoration: none;\n transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;\n\n svg {\n transition: transform 0.3s ease;\n }\n\n &:hover,\n &:focus-visible {\n background-color: var(--at-theme-primary);\n border-color: var(--at-theme-primary);\n color: var(--footer15-text);\n\n svg {\n transform: translate(2px, -2px);\n }\n }\n }\n}\n\n/* ── Panel 2 — Newsletter ───────────────────────────────── */\n.footer-15__news-bg {\n position: absolute;\n inset: 0;\n background-position: center center;\n background-repeat: no-repeat;\n background-size: cover;\n opacity: 0.42;\n pointer-events: none;\n z-index: 0;\n}\n\n.footer-15__news-inner {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n gap: 20px;\n width: 100%;\n max-width: 410px;\n margin-top: auto;\n margin-bottom: auto;\n}\n\n.footer-15__news-label {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 14px;\n line-height: 1.25;\n letter-spacing: -0.05em;\n color: var(--footer15-text);\n text-transform: uppercase;\n}\n\n.footer-15__form {\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 100%;\n}\n\ninput.footer-15__form-input {\n width: 100%;\n height: 50px;\n padding: 0 24px;\n background-color: var(--footer15-input-bg);\n border: 1px solid transparent;\n border-radius: 16px;\n font-family: var(--at-ff-heading);\n font-weight: 400;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.05em;\n color: var(--footer15-text);\n outline: none;\n transition: border-color 0.3s ease;\n\n &::placeholder {\n color: rgba(254, 254, 254, 0.5);\n }\n\n &:focus {\n border-color: rgba(255, 255, 255, 0.25);\n }\n}\n\n.footer-15__form-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 100%;\n height: 50px;\n padding: 0 24px;\n background-color: var(--footer15-input-bg);\n border: 0;\n border-radius: 16px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: 0.04em;\n color: var(--footer15-text);\n text-transform: uppercase;\n cursor: pointer;\n transition: background-color 0.3s ease, color 0.3s ease;\n\n svg {\n transition: transform 0.3s ease;\n }\n\n &:hover,\n &:focus-visible {\n background-color: var(--at-theme-primary);\n\n svg {\n transform: translate(2px, -2px);\n }\n }\n}\n\n/* ── Panel 3 — Brand + services ─────────────────────────── */\n.footer-15__brand-head {\n display: flex;\n align-items: flex-start;\n gap: 22px;\n}\n\n.footer-15__brand-mark {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: auto;\n text-decoration: none;\n}\n\n.footer-15__brand-icon {\n display: block;\n max-width: 100%;\n height: auto;\n}\n\n.footer-15__brand-title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(36px, 3.4vw, 48px);\n line-height: 1.08;\n letter-spacing: -0.05em;\n margin: 0;\n}\n\n.footer-15__brand-title-strong {\n color: var(--footer15-text);\n}\n\n.footer-15__brand-title-muted {\n color: var(--footer15-faint);\n}\n\n.footer-15__services {\n display: grid;\n grid-template-columns: 1fr 1fr;\n column-gap: 32px;\n row-gap: 14px;\n\n a {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--footer15-muted);\n text-decoration: none;\n transition: color 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--footer15-text);\n\n .footer-15__service-icon {\n transform: translate(2px, -2px);\n }\n }\n }\n\n .is-current a {\n color: var(--footer15-text);\n }\n}\n\n.footer-15__service-dot {\n flex-shrink: 0;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n}\n\n.footer-15__service-icon {\n display: inline-flex;\n align-items: center;\n color: currentColor;\n transition: transform 0.3s ease;\n}\n\n/* ── Panel 4 — Contact + legal ──────────────────────────── */\n.footer-15__contact-row {\n display: grid;\n grid-template-columns: 1.45fr 1fr;\n gap: 48px;\n align-items: start;\n}\n\n.footer-15__intro {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 20px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--footer15-text);\n max-width: 460px;\n}\n\n.footer-15__contact {\n display: flex;\n flex-direction: column;\n gap: 24px;\n font-style: normal;\n}\n\n.footer-15__contact-line {\n display: inline-block;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 24px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--footer15-text);\n text-decoration: none;\n transition: color 0.3s ease;\n\n &[href]:hover,\n &[href]:focus-visible {\n color: var(--at-theme-primary);\n }\n}\n\n.footer-15__legal {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.footer-15__copy {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.25;\n letter-spacing: -0.02em;\n color: rgba(254, 254, 254, 0.5);\n}\n\n.footer-15__legal-links {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n\n a {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 14px;\n line-height: 1.25;\n letter-spacing: -0.02em;\n color: rgba(254, 254, 254, 0.5);\n text-decoration: none;\n transition: color 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--footer15-text);\n }\n }\n}\n\n/* ── Responsive ─────────────────────────────────────────── */\n@media #{$xxl} {\n .footer-15 {\n --footer15-panel-pad: 52px;\n --footer15-panel-min-h: 340px;\n }\n\n .footer-15__nav-wrap {\n gap: 44px;\n }\n\n .footer-15__nav a {\n font-size: 20px;\n }\n\n .footer-15__intro {\n font-size: 18px;\n }\n\n .footer-15__contact-line {\n font-size: 22px;\n }\n}\n\n@media #{$xl} {\n .footer-15 {\n --footer15-panel-pad: 44px;\n --footer15-panel-min-h: 320px;\n }\n\n .footer-15__nav-wrap {\n gap: 36px;\n }\n\n .footer-15__nav a {\n font-size: 18px;\n }\n\n .footer-15__brand-title {\n font-size: 38px;\n }\n\n .footer-15__intro {\n font-size: 17px;\n }\n\n .footer-15__contact-line {\n font-size: 20px;\n }\n\n .footer-15__contact-row {\n gap: 32px;\n }\n}\n\n/* Tablet landscape — stack panel 1 (nav + social) vertically */\n@media #{$lg} {\n .footer-15 {\n padding: 56px 8px 56px 5px;\n --footer15-panel-pad: 40px;\n --footer15-panel-min-h: 0;\n }\n\n .footer-15__panel--nav {\n flex-direction: column;\n align-items: flex-start;\n gap: 36px;\n }\n\n .footer-15__nav-wrap {\n gap: 56px;\n }\n\n .footer-15__nav a {\n font-size: 18px;\n }\n\n .footer-15__brand-title {\n font-size: 36px;\n }\n\n .footer-15__intro {\n font-size: 16px;\n }\n\n .footer-15__contact-line {\n font-size: 20px;\n }\n\n .footer-15__contact-row {\n gap: 24px;\n }\n}\n\n/* Tablet portrait — single column stack */\n@media #{$md} {\n .footer-15 {\n padding: 48px 8px 48px 5px;\n --footer15-panel-pad: 32px;\n --footer15-panel-min-h: 0;\n }\n\n .footer-15__grid {\n grid-template-columns: 1fr;\n gap: 8px;\n }\n\n .footer-15__panel--nav,\n .footer-15__panel--news,\n .footer-15__panel--brand,\n .footer-15__panel--contact {\n grid-column: 1 / -1;\n }\n\n .footer-15__panel--nav {\n flex-direction: column;\n align-items: flex-start;\n gap: 32px;\n }\n\n .footer-15__nav-wrap {\n gap: 56px;\n }\n\n .footer-15__nav a {\n font-size: 18px;\n }\n\n .footer-15__panel--news {\n min-height: 280px;\n }\n\n .footer-15__news-inner {\n max-width: 100%;\n }\n\n .footer-15__brand-title {\n font-size: 36px;\n }\n\n .footer-15__contact-row {\n grid-template-columns: 1fr;\n gap: 28px;\n }\n\n .footer-15__intro {\n font-size: 18px;\n max-width: 100%;\n }\n\n .footer-15__contact-line {\n font-size: 22px;\n }\n}\n\n/* Phone */\n@media #{$sm} {\n .footer-15 {\n padding: 40px 8px 40px 5px;\n --footer15-panel-pad: 24px;\n --footer15-gap: 6px;\n }\n\n .footer-15__grid {\n grid-template-columns: 1fr;\n gap: 6px;\n }\n\n .footer-15__panel--nav,\n .footer-15__panel--news,\n .footer-15__panel--brand,\n .footer-15__panel--contact {\n grid-column: 1 / -1;\n }\n\n .footer-15__panel--nav {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n\n .footer-15__nav-wrap {\n gap: 40px;\n }\n\n .footer-15__nav a {\n font-size: 17px;\n }\n\n .footer-15__panel--news {\n min-height: 260px;\n }\n\n .footer-15__news-inner {\n max-width: 100%;\n gap: 16px;\n }\n\n .footer-15__brand-head {\n gap: 16px;\n }\n\n .footer-15__brand-title {\n font-size: 32px;\n }\n\n .footer-15__contact-row {\n grid-template-columns: 1fr;\n gap: 24px;\n }\n\n .footer-15__intro {\n font-size: 16px;\n max-width: 100%;\n }\n\n .footer-15__contact-line {\n font-size: 20px;\n }\n\n .footer-15__legal {\n gap: 16px;\n }\n}\n\n/* Small phone (≤574.98px) — explicit rules; ranges do NOT cascade */\n@media #{$xs} {\n .footer-15 {\n padding: 32px 8px 32px 5px;\n --footer15-panel-pad: 20px;\n --footer15-panel-radius: 24px;\n --footer15-gap: 5px;\n }\n\n .footer-15__grid {\n grid-template-columns: 1fr;\n gap: 5px;\n }\n\n .footer-15__panel--nav,\n .footer-15__panel--news,\n .footer-15__panel--brand,\n .footer-15__panel--contact {\n grid-column: 1 / -1;\n }\n\n .footer-15__panel--nav {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n\n .footer-15__nav-wrap {\n flex-direction: column;\n gap: 18px;\n }\n\n .footer-15__nav {\n gap: 10px;\n }\n\n .footer-15__nav a {\n font-size: 18px;\n }\n\n .footer-15__tags {\n gap: 6px;\n\n a {\n padding: 8px 14px;\n font-size: 13px;\n }\n }\n\n .footer-15__panel--news {\n min-height: 240px;\n }\n\n .footer-15__news-inner {\n max-width: 100%;\n gap: 14px;\n }\n\n input.footer-15__form-input,\n .footer-15__form-btn {\n height: 46px;\n font-size: 14px;\n padding: 0 18px;\n }\n\n .footer-15__brand-head {\n flex-direction: column;\n align-items: flex-start;\n gap: 14px;\n }\n\n .footer-15__brand-mark {\n width: 40px;\n }\n\n .footer-15__brand-title {\n font-size: 28px;\n }\n\n .footer-15__services {\n grid-template-columns: 1fr;\n row-gap: 10px;\n }\n\n .footer-15__services a {\n font-size: 15px;\n }\n\n .footer-15__contact-row {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n .footer-15__intro {\n font-size: 15px;\n }\n\n .footer-15__contact {\n gap: 16px;\n }\n\n .footer-15__contact-line {\n font-size: 18px;\n }\n\n .footer-15__legal {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n\n .footer-15__copy {\n font-size: 14px;\n }\n\n .footer-15__legal-links {\n gap: 12px;\n\n a {\n font-size: 13px;\n }\n }\n}\n","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 7.1 about css\r\n/*----------------------------------------*/\r\n.#{$theme-prifix}-about {\r\n\r\n &-subtitle {\r\n font-weight: 500;\r\n font-size: 16px;\r\n letter-spacing: -0.32px;\r\n color: var(--at-common-black);\r\n line-height: 20px;\r\n\r\n & svg {\r\n transform: translateY(-3px);\r\n margin-right: 4px;\r\n }\r\n }\r\n\r\n &-item {\r\n border-radius: 16px;\r\n }\r\n\r\n &-svg-wrap {\r\n position: relative;\r\n transform: translateY(-100px);\r\n\r\n &>svg:nth-child(1) {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n top: 34px;\r\n }\r\n\r\n &>svg:nth-child(3) {\r\n position: absolute;\r\n left: 56px;\r\n top: 34px;\r\n }\r\n }\r\n\r\n &-thumb {\r\n border-radius: 16px;\r\n overflow: hidden;\r\n height: 410px;\r\n\r\n & img {\r\n border-radius: 16px;\r\n width: 100%;\r\n height: 600px;\r\n object-fit: cover;\r\n margin-top: -50px;\r\n }\r\n\r\n &-wrap {\r\n @media #{$lg,$md,$sm,$xs} {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n\r\n &-title {\r\n font-size: 28px;\r\n letter-spacing: -0.05em;\r\n }\r\n\r\n &-dec {\r\n line-height: 162%;\r\n letter-spacing: -0.05em;\r\n color: var(--at-common-black);\r\n\r\n @media #{$xxl,$xl,$lg,$md,$sm,$xs} {\r\n & br {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n &-btn {\r\n &-transform {\r\n transform: translateY(-10px);\r\n\r\n @media #{$xs} {\r\n transform: translateY(0);\r\n margin-left: 0;\r\n width: 100%;\r\n margin-top: 15px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n/*----------------------------------------*/\r\n/* sec-4 about contact form \r\n/*----------------------------------------*/\r\n.sec-4-about-form {\r\n &__field {\r\n margin-bottom: 0;\r\n }\r\n\r\n &__input {\r\n display: block;\r\n width: 100%;\r\n padding: 16px 0;\r\n font-weight: 400;\r\n font-size: 16px;\r\n line-height: 1.5;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-500);\r\n background: transparent;\r\n border: none;\r\n border-bottom: 1px solid var(--at-neutral-900);\r\n border-radius: 0;\r\n outline: none;\r\n transition: border-color 0.2s ease;\r\n\r\n &::placeholder {\r\n color: var(--at-neutral-500);\r\n }\r\n\r\n &:focus {\r\n border-bottom-color: var(--at-neutral-900);\r\n }\r\n }\r\n\r\n &__textarea {\r\n min-height: 120px;\r\n resize: vertical;\r\n padding-top: 16px;\r\n }\r\n\r\n &__actions {\r\n margin-top: 40px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n &__btn-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n svg {\r\n flex-shrink: 0;\r\n }\r\n }\r\n\r\n &__disclaimer {\r\n margin: 0;\r\n font-size: 14px;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n color: var(--at-neutral-500);\r\n }\r\n\r\n &__link {\r\n color: var(--at-neutral-900);\r\n\r\n }\r\n}\r\n\r\n/*----------------------------------------*/\r\n/* About 2 - Sec 3 Our Journey / card-award-2\r\n/*----------------------------------------*/\r\n.sec-3-about {\r\n .card-award-2-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n }\r\n}\r\n\r\n.card-award-2 {\r\n border-bottom: 1px solid var(--at-neutral-100, #e5e5e5);\r\n transition: border-color 0.35s ease;\r\n\r\n &:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n &-link {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n align-items: flex-start;\r\n gap: 24px 32px;\r\n padding: 28px 0;\r\n text-decoration: none;\r\n color: inherit;\r\n position: relative;\r\n\r\n @media #{$md, $sm, $xs} {\r\n flex-wrap: wrap;\r\n gap: 16px;\r\n padding: 20px 0;\r\n }\r\n }\r\n\r\n &-year {\r\n flex: 0 0 220px;\r\n font-size: 20px;\r\n font-weight: 500;\r\n color: var(--at-neutral-900);\r\n\r\n @media #{$md} {\r\n flex: 0 0 180px;\r\n }\r\n\r\n @media #{$sm, $xs} {\r\n flex: 0 0 100%;\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n &-content {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n &-title {\r\n font-size: 24px;\r\n font-weight: 600;\r\n line-height: 1.35;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-900);\r\n margin-bottom: 8px;\r\n\r\n @media #{$xs} {\r\n font-size: 17px;\r\n }\r\n }\r\n\r\n &-desc {\r\n font-size: 15px;\r\n font-weight: 400;\r\n line-height: 1.6;\r\n color: var(--at-neutral-900);\r\n opacity: .5;\r\n font-family: var(--at-ff-body);\r\n max-width: 520px;\r\n }\r\n\r\n &-image-wrap {\r\n flex: 0 0 0;\r\n width: 0;\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n margin: 0 auto;\r\n align-self: center;\r\n\r\n @media #{$md, $sm, $xs} {\r\n order: 10;\r\n flex-basis: 100%;\r\n width: 100%;\r\n margin-left: 0;\r\n margin-right: 0;\r\n align-self: stretch;\r\n }\r\n }\r\n\r\n &:hover &-image-wrap {\r\n flex: 1;\r\n width: 500px;\r\n max-height: 310px;\r\n\r\n @media #{$md, $sm, $xs} {\r\n flex: 0 0 auto;\r\n flex-basis: 100%;\r\n width: 100%;\r\n max-height: 280px;\r\n }\r\n }\r\n\r\n &-image {\r\n width: 500px;\r\n min-width: 500px;\r\n height: 310px;\r\n overflow: hidden;\r\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n object-fit: cover;\r\n transform: translateY(-100%);\r\n transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n @media #{$md, $sm, $xs} {\r\n width: 100%;\r\n min-width: 0;\r\n height: auto;\r\n max-width: 480px;\r\n margin-left: auto;\r\n\r\n img {\r\n height: auto;\r\n }\r\n }\r\n }\r\n\r\n &:hover &-image img {\r\n transform: translateY(0);\r\n }\r\n\r\n &-icon {\r\n flex-shrink: 0;\r\n width: 24px;\r\n height: 24px;\r\n color: var(--at-neutral-700);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: color 0.25s ease, transform 0.25s ease;\r\n\r\n svg {\r\n width: 16px;\r\n height: 15px;\r\n }\r\n }\r\n\r\n &:hover &-icon {\r\n color: var(--at-common-black);\r\n transform: translate(3px, -2px);\r\n }\r\n}\r\n\r\n.wrapper-gallery {\r\n display: inline-flex;\r\n align-items: flex-end;\r\n padding: 0;\r\n}\r\n\r\n.moving-gallery li {\r\n width: 40vw;\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n box-sizing: border-box;\r\n list-style: none;\r\n}\r\n\r\n@media only screen and (max-width: 1199px) {\r\n .moving-gallery li {\r\n padding-left: 4px;\r\n padding-right: 4px;\r\n }\r\n}\r\n\r\n.moving-gallery li img {\r\n height: auto;\r\n margin: 0px;\r\n width: 100%;\r\n}\r\n\r\n.moving-gallery li:nth-child(1) {\r\n width: 20vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(1) {\r\n width: 40vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(2) {\r\n width: 25vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(2) {\r\n width: 50vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(3) {\r\n width: 30vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(3) {\r\n width: 60vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(4) {\r\n width: 25vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(4) {\r\n width: 50vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(5) {\r\n width: 25vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(5) {\r\n width: 50vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(6) {\r\n width: 30vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(6) {\r\n width: 60vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(7) {\r\n width: 25vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(7) {\r\n width: 50vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(8) {\r\n width: 20vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(8) {\r\n width: 40vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(9) {\r\n width: 25vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(9) {\r\n width: 50vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(10) {\r\n width: 30vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(10) {\r\n width: 60vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(11) {\r\n width: 25vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(11) {\r\n width: 50vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(12) {\r\n width: 25vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(12) {\r\n width: 50vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(13) {\r\n width: 30vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(13) {\r\n width: 60vw;\r\n }\r\n}\r\n\r\n.moving-gallery li:nth-child(14) {\r\n width: 25vw;\r\n}\r\n\r\n@media #{$sm} {\r\n .moving-gallery li:nth-child(14) {\r\n width: 50vw;\r\n }\r\n}\r\n\r\n/*----------------------------------------*/\r\n/* sec-2-about: process cards (scroll-section)\r\n/*----------------------------------------*/\r\n.process-scroll {\r\n\r\n .process-card {\r\n padding: 40px;\r\n background: var(--at-neutral-0);\r\n }\r\n\r\n .process-card__img-wrap {\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n }\r\n\r\n .process-card__content {\r\n padding-left: 0;\r\n }\r\n\r\n .process-card__header {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding-bottom: 16px;\r\n margin-bottom: 26px;\r\n border-bottom: 1px solid var(--at-neutral-100);\r\n }\r\n\r\n .process-card__title {\r\n font-weight: 600;\r\n line-height: normal;\r\n margin-bottom: 0;\r\n letter-spacing: -1.8px;\r\n color: var(--at-neutral-900);\r\n }\r\n\r\n .process-card__desc {\r\n line-height: 1.6;\r\n letter-spacing: -0.01em;\r\n color: var(--at-neutral-500);\r\n margin-bottom: 20px;\r\n max-width: 75%;\r\n }\r\n\r\n .process-card__meta {\r\n padding-top: 8px;\r\n }\r\n\r\n .process-card__meta-text {\r\n font-size: 16px;\r\n color: var(--at-neutral-900);\r\n font-weight: 600;\r\n }\r\n\r\n .process-card__meta-label {\r\n display: inline-block;\r\n margin-left: 4px;\r\n }\r\n\r\n @media #{$lg} {\r\n .process-card__title {\r\n font-size: 24px;\r\n }\r\n\r\n .process-card__desc {\r\n font-size: 16px;\r\n }\r\n\r\n .process-card__img-wrap {\r\n min-height: 240px;\r\n }\r\n }\r\n\r\n @media #{$md} {\r\n .process-card__img-wrap {\r\n aspect-ratio: 16 / 10;\r\n min-height: 220px;\r\n }\r\n\r\n .process-card__header {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n .process-card {\r\n padding-left: 24px;\r\n padding-right: 24px;\r\n }\r\n\r\n .process-card__title {\r\n font-size: 22px;\r\n }\r\n\r\n .process-card__desc {\r\n font-size: 15px;\r\n }\r\n\r\n .process-card__meta {\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n }\r\n\r\n .process-card__img-wrap {\r\n min-height: 200px;\r\n }\r\n\r\n .process-card__content {\r\n padding-top: 0;\r\n }\r\n }\r\n\r\n @media #{$xs} {\r\n .process-card__title {\r\n font-size: 20px;\r\n }\r\n\r\n .process-card__desc {\r\n font-size: 14px;\r\n }\r\n\r\n .process-card__img-wrap {\r\n min-height: 180px;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 7.14 hero css\r\n/*----------------------------------------*/\r\n\r\n.#{$theme-prifix}-hero {\r\n &-spacing {\r\n padding-top: 550px;\r\n padding-bottom: 80px;\r\n\r\n @media #{$xl,$lg,$md} {\r\n padding-bottom: 120px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n padding-bottom: 100px;\r\n }\r\n }\r\n\r\n &-title {\r\n line-height: 95%;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: var(--at-common-black);\r\n }\r\n\r\n &-dec {\r\n font-weight: 500;\r\n font-size: 18px;\r\n line-height: 156%;\r\n letter-spacing: -0.03em;\r\n color: var(--at-neutral-500);\r\n\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n & br {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n &-shape {\r\n transform: translateY(-10px);\r\n display: inline-block;\r\n margin-right: 7px;\r\n }\r\n\r\n &-social {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n justify-content: flex-end;\r\n\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n margin-left: 0;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n justify-content: flex-start;\r\n }\r\n\r\n & a {\r\n font-weight: 500;\r\n font-size: 14px;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-500);\r\n border: 1px solid rgba(38, 38, 38, 0.1);\r\n border-radius: 20px;\r\n padding: 6px 20px;\r\n display: inline-block;\r\n\r\n &:hover {\r\n background: var(--at-common-black);\r\n border-color: var(--at-common-black);\r\n color: var(--at-common-white);\r\n }\r\n }\r\n\r\n &.style-2 {\r\n & a {\r\n color: var(--at-common-black);\r\n border: 1px solid var(--at-common-black);\r\n background: var(--at-common-white);\r\n\r\n &:hover {\r\n background: var(--at-common-black);\r\n border-color: var(--at-common-black);\r\n color: var(--at-common-white);\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-slider {\r\n &-active {\r\n @media #{$sm,$xs} {\r\n padding-top: 40px;\r\n }\r\n\r\n & .swiper-slide {\r\n width: auto !important;\r\n }\r\n\r\n & .background-img {\r\n & img {\r\n width: 170px;\r\n height: 170px;\r\n object-fit: cover;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.alt-hero {\r\n &-spacing {\r\n padding-top: 83px;\r\n }\r\n\r\n &-video {\r\n width: 327px;\r\n height: 220px;\r\n border-bottom: 1px solid rgba(30, 30, 30, 0.1);\r\n padding-bottom: 250px;\r\n margin-bottom: 15px;\r\n\r\n @media #{$md,$xs} {\r\n width: 276px;\r\n padding-bottom: 220px;\r\n }\r\n\r\n & video {\r\n width: 100%;\r\n overflow: hidden;\r\n mask-size: contain;\r\n mask-repeat: no-repeat;\r\n background-position: center center;\r\n }\r\n }\r\n\r\n &-service {\r\n & ul {\r\n & li {\r\n list-style: none;\r\n\r\n &:not(:last-child) {\r\n margin-bottom: 3px;\r\n }\r\n\r\n & a {\r\n font-weight: 500;\r\n font-size: 22px;\r\n letter-spacing: -0.03em;\r\n color: var(--at-common-black);\r\n\r\n & .explore-text {\r\n position: relative;\r\n display: inline-block;\r\n padding: 0;\r\n transition: transform 0.5s;\r\n transform-origin: 50% 0;\r\n transform-style: preserve-3d;\r\n line-height: 1;\r\n\r\n &::before {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n content: attr(data-text);\r\n transition: color 0.5s;\r\n transform: rotateX(-90deg);\r\n transform-origin: 50% 0;\r\n text-align: center;\r\n z-index: -1;\r\n }\r\n }\r\n\r\n &:hover {\r\n & .explore-text {\r\n transform: rotateX(90deg) translateY(-12px);\r\n color: inhewrit;\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-title {\r\n font-family: var(--at-ff-body);\r\n font-size: 180px;\r\n letter-spacing: -0.01em;\r\n line-height: 83%;\r\n\r\n @media #{$xl,$lg,$md,$sm} {\r\n font-size: 125px;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 100px;\r\n }\r\n\r\n &-wrap {\r\n border-left: 1px solid rgba(30, 30, 30, 0.1);\r\n border-right: 1px solid rgba(30, 30, 30, 0.1);\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n border: none;\r\n }\r\n }\r\n }\r\n\r\n &-btn {\r\n width: 100%;\r\n background: var(--at-common-white);\r\n color: var(--at-common-black);\r\n justify-content: space-between;\r\n border-radius: 0;\r\n padding: 22px 25px;\r\n\r\n &:hover {\r\n color: var(--at-common-white);\r\n background: var(--at-theme-primary);\r\n }\r\n }\r\n\r\n &-dec {\r\n padding-top: 280px;\r\n\r\n @media #{$xxl,$xl,$lg,$md,$sm,$xs} {\r\n margin-left: 0;\r\n }\r\n\r\n @media #{$xl} {\r\n padding-top: 180px;\r\n }\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n padding-top: 0px;\r\n padding-bottom: 80px;\r\n }\r\n\r\n & p {\r\n font-weight: 500;\r\n font-size: 18px;\r\n line-height: 156%;\r\n letter-spacing: -0.03em;\r\n color: var(--at-common-black);\r\n display: flex;\r\n\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n & br {\r\n display: none;\r\n }\r\n }\r\n\r\n & svg {\r\n flex: 0 0 auto;\r\n margin-right: 15px;\r\n margin-top: 7px;\r\n }\r\n }\r\n }\r\n\r\n &-thumb {\r\n height: 720px;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n height: 500px;\r\n\r\n & img {\r\n height: 600px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.mp-hero {\r\n &-w {\r\n &-logo {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n left: 0;\r\n right: 0;\r\n margin: 0 auto;\r\n }\r\n }\r\n\r\n &-title {\r\n font-weight: 600;\r\n font-size: 82px;\r\n line-height: 110%;\r\n letter-spacing: -0.05em;\r\n\r\n @media #{$sm,$xs} {\r\n font-size: 60px;\r\n\r\n & br {\r\n display: none;\r\n }\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 37px;\r\n }\r\n }\r\n\r\n &-spacing {\r\n padding-top: 165px;\r\n padding-bottom: 105px;\r\n }\r\n\r\n &-magnetic {\r\n @media #{$sm} {\r\n column-count: 2;\r\n }\r\n\r\n &-image {\r\n border-radius: 22px;\r\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);\r\n background: #d9d9d9;\r\n border: 2px solid var(--at-common-black);\r\n\r\n &-wrap {\r\n & .mp-hero-magnetic-item {\r\n @for $i from 1 through 4 {\r\n &:nth-child(#{$i}) img {\r\n @if $i ==1 {\r\n rotate: calc(0deg - var(--velocity) * 0.25deg);\r\n --translateY: 0%;\r\n }\r\n\r\n @else if $i ==2 {\r\n rotate: calc(0deg - var(--velocity) * 0.25deg);\r\n --translateY: 0%;\r\n }\r\n\r\n @else if $i ==3 {\r\n rotate: calc(0deg - var(--velocity) * 0.25deg);\r\n --translateY: 0%;\r\n }\r\n\r\n @else if $i ==4 {\r\n rotate: calc(0deg - var(--velocity) * 0.25deg);\r\n --translateY: 0%;\r\n }\r\n }\r\n\r\n &:nth-child(n + #{$i}):nth-child(4n + #{$i}) img {\r\n @if $i ==1 {\r\n rotate: calc(0deg - var(--velocity) * 0.25deg);\r\n --translateY: 0%;\r\n }\r\n\r\n @else if $i ==2 {\r\n rotate: calc(0deg - var(--velocity) * 0.25deg);\r\n --translateY: 0%;\r\n }\r\n\r\n @else if $i ==3 {\r\n rotate: calc(0deg - var(--velocity) * 0.25deg);\r\n --translateY: 0%;\r\n }\r\n\r\n @else if $i ==4 {\r\n rotate: calc(0deg - var(--velocity) * 0.25deg);\r\n --translateY: 0%;\r\n }\r\n }\r\n }\r\n\r\n & img {\r\n pointer-events: auto;\r\n width: auto;\r\n height: 100%;\r\n user-select: none;\r\n object-fit: cover;\r\n will-change: transform;\r\n transform: translateX(calc(var(--offsetX) * 1px)) translateY(calc(var(--offsetY) * 1px + var(--translateY)));\r\n transition: transform .7s linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-bigtitle {\r\n font-size: 430px;\r\n line-height: 1;\r\n letter-spacing: -0.04em;\r\n text-transform: uppercase;\r\n\r\n @media #{$x4l} {\r\n font-size: 410px;\r\n }\r\n\r\n @media #{$x3l} {\r\n font-size: 385px;\r\n }\r\n\r\n @media #{$xxl} {\r\n font-size: 330px;\r\n }\r\n\r\n @media #{$xl} {\r\n font-size: 270px;\r\n }\r\n\r\n @media #{$lg} {\r\n font-size: 225px;\r\n }\r\n\r\n @media #{$md} {\r\n font-size: 165px;\r\n }\r\n\r\n @media #{$sm} {\r\n font-size: 125px;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 80px;\r\n }\r\n }\r\n\r\n &-content {\r\n @media #{$lg,$md,$sm,$xs} {\r\n margin-left: 0;\r\n }\r\n }\r\n}\r\n\r\n.bg-linear-opacity {\r\n position: relative;\r\n z-index: 1;\r\n overflow: hidden;\r\n\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0.84;\r\n background: linear-gradient(99deg, #000 5.05%, rgba(0, 0, 0, 0.44) 49.84%, #000 94.63%);\r\n z-index: -1;\r\n }\r\n}\r\n\r\n.at-hero {\r\n &-video {\r\n border-radius: 14px;\r\n background: rgba(255, 255, 255, 0.30);\r\n backdrop-filter: blur(2px);\r\n padding: 11px 11px 0;\r\n\r\n & video {\r\n width: 100%;\r\n border-radius: 8px;\r\n }\r\n }\r\n\r\n &-spacing {\r\n padding-top: 395px;\r\n padding-bottom: 70px;\r\n\r\n @media #{$lg} {\r\n padding-top: 300px;\r\n }\r\n\r\n @media #{$md,$sm} {\r\n padding-top: 250px;\r\n }\r\n\r\n @media #{$xs} {\r\n padding-top: 290px;\r\n }\r\n }\r\n\r\n &-service {\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.5);\r\n padding-bottom: 25px;\r\n\r\n @media #{$xxl,$xl,$lg,$md,$sm,$xs} {\r\n margin-right: 0;\r\n }\r\n\r\n & ul {\r\n padding-left: 13px;\r\n\r\n & li {\r\n margin-bottom: 0 !important;\r\n line-height: 1.6;\r\n\r\n & a {\r\n color: var(--at-common-white);\r\n font-size: 16px;\r\n }\r\n }\r\n }\r\n\r\n &-2 {\r\n & ul {\r\n & li {\r\n &::marker {\r\n width: 8px;\r\n height: 8px;\r\n color: rgba(255, 255, 255, 0.5);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-subtitle {\r\n font-style: italic;\r\n font-weight: 500;\r\n font-size: 16px;\r\n letter-spacing: -0.03em;\r\n }\r\n\r\n &-title {\r\n line-height: 121%;\r\n letter-spacing: -0.03em;\r\n\r\n @media #{$sm} {\r\n font-size: 42px;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 35px;\r\n }\r\n }\r\n\r\n &-button {\r\n @media #{$lg,$md,$sm,$xs} {\r\n padding-bottom: 30px;\r\n }\r\n }\r\n\r\n &-content {\r\n @media #{$xxl,$xl,$lg,$md,$sm,$xs} {\r\n margin-left: 0;\r\n }\r\n }\r\n\r\n &-bg {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -1;\r\n display: flex;\r\n justify-content: center;\r\n transform: translateY(50px);\r\n\r\n & img {\r\n object-fit: cover;\r\n\r\n @media #{$sm,$xs} {\r\n width: 600px;\r\n margin-bottom: -50px;\r\n height: auto;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.cs-hero {\r\n &-spacing {\r\n padding-top: 180px;\r\n padding-bottom: 130px;\r\n }\r\n\r\n &-video {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n margin-left: 0;\r\n }\r\n\r\n & video {\r\n border-radius: 16px;\r\n width: 256px;\r\n height: 147px;\r\n\r\n @media #{$lg} {\r\n width: 190px;\r\n height: 114px;\r\n }\r\n\r\n @media #{$md} {\r\n width: 130px;\r\n height: 77px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n margin-top: 20px;\r\n }\r\n }\r\n }\r\n\r\n &-title {\r\n font-size: 206px;\r\n line-height: .94;\r\n letter-spacing: -0.02em;\r\n\r\n @media #{$xl} {\r\n font-size: 165px;\r\n }\r\n\r\n @media #{$lg} {\r\n font-size: 130px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n font-size: 95px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n text-align: center;\r\n font-size: 75px;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 52px;\r\n }\r\n\r\n & .text-sm {\r\n font-weight: 600;\r\n font-size: 18px;\r\n line-height: 133%;\r\n letter-spacing: -0.05em;\r\n text-align: left;\r\n margin-top: 23px;\r\n margin-left: 20px;\r\n\r\n @media #{$md,$sm,$xs} {\r\n font-size: 14px;\r\n margin-top: 8px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n position: absolute;\r\n }\r\n\r\n &-video {\r\n margin-top: -100px;\r\n margin-right: 20px;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n margin-top: -65px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n margin-top: -36px;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.mg-hero {\r\n &-bg {\r\n & img {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n filter: saturate(0);\r\n z-index: -1;\r\n border-radius: 60px;\r\n overflow: hidden;\r\n\r\n @media #{$sm,$xs} {\r\n border-radius: 30px;\r\n }\r\n }\r\n }\r\n\r\n &-spacing {\r\n padding-top: 97px;\r\n\r\n &-inner {\r\n padding-top: 70px;\r\n padding-bottom: 30px;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n padding-left: 20px;\r\n padding-right: 20px;\r\n }\r\n\r\n &::before {\r\n position: absolute;\r\n content: \"\";\r\n background: rgba(30, 30, 30, 0.15);\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n border-radius: 60px;\r\n\r\n @media #{$sm,$xs} {\r\n border-radius: 30px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-dec {\r\n @media #{$xl,$lg} {\r\n margin-left: 40px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n margin-left: 0;\r\n }\r\n\r\n & p {\r\n font-weight: 500;\r\n font-size: 28px;\r\n line-height: 129%;\r\n\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n & br {\r\n display: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-awards {\r\n box-shadow: inset 0 1px 10px 0 rgba(0, 0, 0, 0.15), inset 0 1px 10px 0 rgba(0, 0, 0, 0.15);\r\n background: rgba(0, 0, 0, 0);\r\n\r\n @media #{$xl,$lg} {\r\n margin-right: 40px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n margin-right: 0;\r\n }\r\n }\r\n\r\n &-slider {\r\n &-title {\r\n font-size: 159px;\r\n line-height: 94%;\r\n letter-spacing: -0.06em;\r\n position: relative;\r\n\r\n @media #{$xl,$lg,$md} {\r\n font-size: 130px;\r\n }\r\n\r\n @media #{$sm} {\r\n font-size: 100px;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 60px;\r\n }\r\n }\r\n\r\n &-symbol {\r\n font-weight: 600;\r\n font-size: 30px;\r\n letter-spacing: -0.13em;\r\n border: 4px solid var(--at-common-white);\r\n border-radius: 20px;\r\n line-height: 1;\r\n width: 39px;\r\n height: 44px;\r\n position: absolute;\r\n top: 22px;\r\n right: -60px;\r\n text-align: center;\r\n padding-top: 3px;\r\n\r\n @media #{$xs} {\r\n top: 0;\r\n }\r\n }\r\n }\r\n\r\n &-tag {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n margin-left: 40px;\r\n margin-right: 0;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n margin-left: 0;\r\n }\r\n\r\n & ul {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n\r\n & li {\r\n list-style: none;\r\n\r\n & a {\r\n font-weight: 500;\r\n font-size: 14px;\r\n letter-spacing: -0.01em;\r\n color: var(--at-common-white);\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n border-radius: 50px;\r\n padding: 6px 16px;\r\n background: rgba(255, 255, 255, 0.04);\r\n display: inline-block;\r\n\r\n &:hover {\r\n background: var(--at-common-white);\r\n color: var(--at-common-black);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-scrool {\r\n @media #{$xl,$lg} {\r\n margin-right: 40px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n margin-right: 0;\r\n margin-top: 0;\r\n }\r\n\r\n & a {\r\n font-weight: 700;\r\n font-size: 20px;\r\n letter-spacing: -0.03em;\r\n color: var(--at-common-white);\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n\r\n & svg {\r\n margin-left: 5px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.shop-hero {\r\n &-spacing {\r\n padding-top: 120px;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n padding-top: 79px;\r\n }\r\n }\r\n\r\n &-item {\r\n &:hover {\r\n & .shop-hero-thumb {\r\n & img {\r\n transform: scale(1.1);\r\n }\r\n }\r\n }\r\n\r\n &-3 {\r\n & .shop-hero-thumb {\r\n & img {\r\n object-fit: cover;\r\n\r\n @media #{$md,$sm} {\r\n height: 600px;\r\n }\r\n\r\n @media #{$xs} {\r\n height: 400px;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-content {\r\n position: absolute;\r\n bottom: 60px;\r\n left: 0;\r\n right: 0;\r\n text-align: center;\r\n z-index: 2;\r\n padding: 0 30px;\r\n\r\n @media #{$xs} {\r\n bottom: 20px;\r\n }\r\n }\r\n\r\n &-title {\r\n font-size: 52px;\r\n line-height: 112%;\r\n letter-spacing: -0.03em;\r\n color: var(--at-common-white);\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n font-size: 40px;\r\n margin-bottom: 0;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 30px;\r\n }\r\n }\r\n\r\n &-dec {\r\n font-weight: 500;\r\n font-size: 22px;\r\n letter-spacing: -0.05em;\r\n color: var(--at-grey-5);\r\n\r\n @media #{$xs} {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n &-thumb {\r\n border-radius: 16px;\r\n position: relative;\r\n\r\n &::before {\r\n position: absolute;\r\n content: \"\";\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.2);\r\n border-radius: 16px;\r\n z-index: 1;\r\n }\r\n\r\n & img {\r\n border-radius: 16px;\r\n transition: all .9s ease;\r\n }\r\n }\r\n}\r\n\r\n/*----------------------------------------*/\r\n/* sec-1-home-4 (Orisa AI Solutions Hero)\r\n/*----------------------------------------*/\r\n\r\n.sec-1-home-4-wrap {\r\n padding-top: 140px;\r\n\r\n @media #{$sm,$xs} {\r\n padding-top: 100px;\r\n }\r\n\r\n .sec-1-home-4 {\r\n padding-top: 200px;\r\n\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n padding-top: 100px;\r\n }\r\n\r\n &__tagline {\r\n font-weight: 600;\r\n font-size: 16px;\r\n line-height: 1;\r\n letter-spacing: 0.15em;\r\n color: #FEFEFE;\r\n\r\n @media #{$xs} {\r\n font-size: 10px;\r\n letter-spacing: 0.1em;\r\n }\r\n }\r\n\r\n\r\n &__btns {\r\n .at-btn {\r\n padding: 14px 24px;\r\n font-size: 12px;\r\n font-weight: 500;\r\n letter-spacing: 0.05em;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0);\r\n background: transparent;\r\n\r\n\r\n &:hover {\r\n background: rgba(229, 229, 229, 0.10);\r\n border-color: rgba(255, 255, 255, 0.5);\r\n backdrop-filter: blur(3px);\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n background: rgba(229, 229, 229, 0.10);\r\n border-color: rgba(255, 255, 255, 0.5);\r\n backdrop-filter: blur(3px);\r\n }\r\n }\r\n\r\n\r\n }\r\n\r\n &__cards {\r\n justify-content: flex-end;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n justify-content: flex-start;\r\n }\r\n }\r\n\r\n &__card {\r\n flex: 1;\r\n max-width: 145px;\r\n aspect-ratio: 4/3;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\r\n\r\n // @media #{$lg} {\r\n // max-width: 120px;\r\n // }\r\n\r\n // @media #{$md,$sm,$xs} {\r\n // min-width: 70px;\r\n // }\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.4s ease;\r\n\r\n &:hover {\r\n transform: scale(1.05);\r\n }\r\n }\r\n }\r\n\r\n &__tags {\r\n justify-content: flex-end;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n justify-content: flex-start;\r\n }\r\n }\r\n\r\n &__tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-weight: 500;\r\n font-size: 16px;\r\n letter-spacing: -0.01em;\r\n color: #FEFEFE;\r\n padding: 6px 18px;\r\n border-radius: 50px;\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n background: rgba(70, 70, 70, 0.2);\r\n backdrop-filter: blur(24px);\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n\r\n &:hover {\r\n background: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.4);\r\n color: var(--at-common-white);\r\n }\r\n\r\n svg {\r\n flex-shrink: 0;\r\n opacity: 0.8;\r\n }\r\n }\r\n\r\n &__brand {\r\n font-weight: 700;\r\n font-size: 220px;\r\n line-height: 0.95;\r\n letter-spacing: -0.04em;\r\n margin-bottom: 0;\r\n\r\n @media #{$xl} {\r\n font-size: 150px;\r\n }\r\n\r\n @media #{$lg} {\r\n font-size: 100px;\r\n }\r\n\r\n @media #{$md} {\r\n font-size: 90px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n font-size: 32px;\r\n }\r\n }\r\n\r\n &__brand-suffix {\r\n font-size: 0.5em;\r\n font-weight: 600;\r\n vertical-align: middle;\r\n\r\n sup {\r\n font-size: 50px;\r\n vertical-align: super;\r\n opacity: 0.8;\r\n font-weight: 400;\r\n }\r\n }\r\n\r\n &__nav {\r\n li {\r\n position: relative;\r\n\r\n &:not(:first-child)::before {\r\n content: \"\";\r\n position: absolute;\r\n left: -12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 4px;\r\n height: 4px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.4);\r\n\r\n @media #{$xs} {\r\n left: -8px;\r\n width: 3px;\r\n height: 3px;\r\n }\r\n }\r\n }\r\n\r\n a {\r\n font-weight: 500;\r\n font-size: 14px;\r\n letter-spacing: -0.02em;\r\n color: rgba(255, 255, 255, 0.85);\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n transition: color 0.3s ease;\r\n\r\n &:hover {\r\n color: var(--at-common-white);\r\n }\r\n\r\n svg {\r\n flex-shrink: 0;\r\n opacity: 0.7;\r\n }\r\n }\r\n }\r\n }\r\n\r\n}\r\n\r\n/*----------------------------------------*/\r\n/* sec-3-home-4 (How We Work Process Cards)\r\n/*----------------------------------------*/\r\n.card {\r\n &__process-card {\r\n display: flex;\r\n gap: 20px;\r\n align-items: center;\r\n\r\n &.card-2 {\r\n margin-top: 80px;\r\n }\r\n\r\n &.card-3 {\r\n margin-top: 160px;\r\n }\r\n\r\n &.card-4 {\r\n margin-top: 240px;\r\n }\r\n\r\n @media #{$md} {\r\n &.card-2 {\r\n margin-top: 50px;\r\n }\r\n\r\n &.card-3 {\r\n margin-top: 50px;\r\n }\r\n\r\n &.card-4 {\r\n margin-top: 100px;\r\n }\r\n }\r\n\r\n @media #{$xs} {\r\n flex-direction: column;\r\n gap: 16px;\r\n margin-top: 0 !important;\r\n }\r\n }\r\n\r\n &__process-visual {\r\n position: relative;\r\n flex-shrink: 0;\r\n width: 100%;\r\n max-width: 100px;\r\n min-height: 270px;\r\n\r\n @media #{$md,$sm} {\r\n max-width: 100px;\r\n min-height: 240px;\r\n }\r\n\r\n @media #{$xs} {\r\n max-width: 80px;\r\n min-height: 200px;\r\n }\r\n }\r\n\r\n &__process-pill {\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 100%;\r\n height: 100%;\r\n max-height: 320px;\r\n border-radius: 9999px;\r\n overflow: hidden;\r\n\r\n &--1 {\r\n background-image: url(../imgs/pages/img-81.webp);\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n &--2 {\r\n background-image: url(../imgs/pages/img-82.webp);\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n &--3 {\r\n background-image: url(../imgs/pages/img-83.webp);\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n &--4 {\r\n background-image: url(../imgs/pages/img-84.webp);\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: repeating-linear-gradient(90deg,\r\n transparent,\r\n transparent 2px,\r\n rgba(255, 255, 255, 0.08) 2px,\r\n rgba(255, 255, 255, 0.08) 4px);\r\n opacity: 0.6;\r\n pointer-events: none;\r\n }\r\n }\r\n\r\n &__process-num {\r\n position: absolute;\r\n top: 24px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 50px;\r\n height: 50px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: var(--at-neutral-0, #FEFEFE);\r\n color: var(--at-common-black, #1D1D1D);\r\n font-size: 24px;\r\n font-weight: 600;\r\n line-height: 1;\r\n border-radius: 50%;\r\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);\r\n z-index: 1;\r\n\r\n @media #{$xs} {\r\n width: 40px;\r\n height: 40px;\r\n font-size: 18px;\r\n top: 16px;\r\n }\r\n }\r\n\r\n &__process-content {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n &__process-title {\r\n font-size: 24px;\r\n font-weight: 600;\r\n line-height: 1.25;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-900);\r\n margin-bottom: 12px;\r\n\r\n @media #{$xs} {\r\n font-size: 20px;\r\n }\r\n }\r\n\r\n &__process-desc {\r\n font-size: 16px;\r\n line-height: 1.5;\r\n color: var(--at-neutral-500);\r\n margin-bottom: 16px;\r\n\r\n @media #{$xs} {\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n &__process-divider {\r\n width: 100%;\r\n height: 1px;\r\n background: var(--at-neutral-900);\r\n }\r\n}\r\n\r\n\r\n/*----------------------------------------*/\r\n/* sec-4-home-4 (Featured Case Card)\r\n/*----------------------------------------*/\r\n.card {\r\n\r\n &_case__studies-card {\r\n display: flex;\r\n flex-direction: row;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n padding: 10px;\r\n background: #1D1D1D;\r\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);\r\n transition: box-shadow 0.3s ease;\r\n text-decoration: none;\r\n color: inherit;\r\n\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n flex-direction: column;\r\n }\r\n\r\n &:hover {\r\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);\r\n\r\n .card_case__studies-thumb img {\r\n transform: scale(1.04);\r\n }\r\n\r\n .card_case__studies-play {\r\n opacity: 0.95;\r\n }\r\n\r\n .card_case__studies-link svg {\r\n transform: rotate(90deg);\r\n }\r\n }\r\n }\r\n\r\n &_case__studies-left {\r\n flex: 1 0 50%;\r\n display: flex;\r\n flex-direction: column;\r\n padding: 70px;\r\n background: #1D1D1D;\r\n\r\n @media #{$xl,$lg,$md} {\r\n flex: none;\r\n padding: 32px 24px 28px;\r\n }\r\n\r\n @media #{$xs} {\r\n padding: 24px 20px 24px;\r\n }\r\n }\r\n\r\n\r\n &_case__studies-featured-tag {\r\n display: inline-block;\r\n align-self: flex-start;\r\n padding: 6px 10px;\r\n border-radius: 100px;\r\n background: var(--at-theme-primary);\r\n font-size: 10px;\r\n font-weight: 600;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n color: #FEFEFE;\r\n margin-bottom: 20px;\r\n }\r\n\r\n &_case__studies-title {\r\n font-weight: 600;\r\n line-height: 1.25;\r\n letter-spacing: -0.02em;\r\n color: #FEFEFE;\r\n max-width: 60%;\r\n\r\n @media #{$xs} {\r\n max-width: 100%;\r\n\r\n }\r\n }\r\n\r\n &_case__studies-desc {\r\n font-size: 16px;\r\n line-height: 1.6;\r\n color: rgba(254, 254, 254, 0.50);\r\n margin-bottom: 28px;\r\n max-width: 100%;\r\n max-width: 75%;\r\n\r\n @media #{$xs} {\r\n font-size: 14px;\r\n margin-bottom: 20px;\r\n }\r\n }\r\n\r\n &_case__studies-metrics {\r\n display: flex;\r\n gap: 32px;\r\n align-items: stretch;\r\n gap: 0;\r\n\r\n @media #{$xs} {\r\n margin-bottom: 50px;\r\n }\r\n }\r\n\r\n &_case__studies-metric {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n\r\n &:first-child {\r\n padding-right: 32px;\r\n }\r\n\r\n &:last-child {\r\n padding-left: 32px;\r\n }\r\n }\r\n\r\n &_case__studies-metric-divider {\r\n width: 1px;\r\n min-height: 36px;\r\n background: rgba(255, 255, 255, 0.25);\r\n flex-shrink: 0;\r\n }\r\n\r\n &_case__studies-metric-value {\r\n letter-spacing: -2.4px;\r\n color: #FEFEFE;\r\n }\r\n\r\n &_case__studies-metric-label {\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: rgba(255, 255, 255, 0.75);\r\n }\r\n\r\n &_case__studies-tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px 12px;\r\n max-width: 50%;\r\n\r\n @media #{$xs} {\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n &_case__studies-tag {\r\n display: inline-block;\r\n padding: 4px 20px;\r\n border-radius: 32px;\r\n border: 1px solid rgba(223, 223, 223, 0.50);\r\n background: transparent;\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n color: #FEFEFE;\r\n\r\n &:hover {\r\n background: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.4);\r\n color: #FEFEFE;\r\n }\r\n }\r\n\r\n &_case__studies-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-top: auto;\r\n color: #FEFEFE;\r\n font-size: 12px;\r\n font-weight: 600;\r\n line-height: normal;\r\n letter-spacing: -0.24px;\r\n text-transform: uppercase;\r\n\r\n svg {\r\n flex-shrink: 0;\r\n transition: transform 0.25s ease;\r\n }\r\n }\r\n\r\n\r\n &_case__studies-thumb {\r\n position: relative;\r\n width: 100%;\r\n height: 680px;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n height: 400px;\r\n }\r\n\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.5s ease;\r\n }\r\n }\r\n\r\n &_case__studies-play {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n\r\n &_case__studies-card--overlay {\r\n padding: 10px;\r\n flex-direction: column;\r\n display: flex;\r\n\r\n &:hover {\r\n .card_case__studies-visual img {\r\n transform: scale(1.04);\r\n }\r\n }\r\n }\r\n\r\n &_case__studies-visual {\r\n position: relative;\r\n border-radius: 12px;\r\n width: 100%;\r\n aspect-ratio: 16 / 10;\r\n overflow: hidden;\r\n min-height: 300px;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.5s ease;\r\n }\r\n }\r\n\r\n &_case__studies-metric-overlay {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 30px;\r\n padding: 24px 32px;\r\n border-radius: 16px;\r\n border: 1px solid var(--neutral-500, #585959);\r\n background: rgba(0, 0, 0, 0.50);\r\n backdrop-filter: blur(2px);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n\r\n @media #{$xs} {\r\n display: none;\r\n visibility: hidden;\r\n }\r\n\r\n .card_case__studies-metric-value {\r\n font-size: 48px;\r\n font-weight: 600;\r\n margin-bottom: 16px;\r\n letter-spacing: -0.02em;\r\n color: #FEFEFE;\r\n }\r\n\r\n .card_case__studies-metric-label {\r\n font-size: 20px;\r\n font-weight: 500;\r\n color: rgba(255, 255, 255, 0.85);\r\n }\r\n }\r\n\r\n &_case__studies-tags-overlay {\r\n position: absolute;\r\n bottom: 30px;\r\n right: 30px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n justify-content: flex-end;\r\n max-width: 42%;\r\n\r\n @media #{$xs} {\r\n max-width: 100%;\r\n }\r\n\r\n .card_case__studies-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-weight: 600;\r\n font-size: 12px;\r\n letter-spacing: -0.01em;\r\n color: #FEFEFE;\r\n padding: 6px 20px;\r\n border-radius: 50px;\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n background: rgba(70, 70, 70, 0.2);\r\n backdrop-filter: blur(24px);\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n\r\n &:hover {\r\n background: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.4);\r\n color: #FEFEFE;\r\n }\r\n }\r\n }\r\n\r\n &_case__studies-footer {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n padding: 20px 30px;\r\n background: var(--at-neutral-700);\r\n border-radius: 12px;\r\n\r\n @media #{$xs} {\r\n padding: 20px 20px;\r\n flex-wrap: wrap;\r\n }\r\n }\r\n\r\n &_case__studies-footer-title {\r\n font-weight: 600;\r\n letter-spacing: -1.8px;\r\n color: #FEFEFE;\r\n margin: 0;\r\n\r\n @media #{$xs} {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n &_case__studies-card--overlay .card_case__studies-link {\r\n\r\n margin-top: 0;\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 7.22 service css\r\n/*----------------------------------------*/\r\n.#{$theme-prifix}-service {\r\n &-card {\r\n max-height: 480px;\r\n min-height: 480px;\r\n\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n min-height: 400px;\r\n }\r\n\r\n &.card-1 {\r\n position: relative;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0.65;\r\n background: linear-gradient(99deg, #000 5.05%, rgba(0, 0, 0, 0.44) 49.84%, #000 94.63%);\r\n z-index: 0;\r\n }\r\n }\r\n\r\n &.no-before {\r\n &::before {\r\n display: none;\r\n }\r\n }\r\n\r\n &.card-2,\r\n .card-4 {\r\n background: var(--at-common-white);\r\n margin-top: 120px;\r\n\r\n @media #{$md,$sm,$xs} {\r\n margin-top: 0;\r\n }\r\n }\r\n\r\n &.card-3 {\r\n background: #0f0f0f;\r\n }\r\n &.style-2 {\r\n background: var(--at-neutral-0);\r\n border: 1px solid var(--at-neutral-950);\r\n position: relative;\r\n z-index: 1;\r\n transition: all 0.5s;\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 5px;\r\n right: 5px;\r\n z-index: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: 1px solid var(--at-neutral-950);\r\n background: var(--at-neutral-0);\r\n transition: all 0.5s;\r\n }\r\n &:hover {\r\n transform: translate(5px, 5px);\r\n }\r\n }\r\n }\r\n\r\n &-item {\r\n background-color: var(--at-neutral-0);\r\n border-bottom: 1px solid var(--at-neutral-100);\r\n padding-top: 21px;\r\n padding-bottom: 29px;\r\n display: grid;\r\n align-items: center;\r\n gap: 15px 30px;\r\n grid-template-columns: 100px 1fr 280px;\r\n pointer-events: auto;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n grid-template-columns: 70px 1fr 295px;\r\n }\r\n\r\n @media #{$xs} {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n & .number {\r\n color: var(--at-neutral-500);\r\n font-size: 36px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: normal;\r\n letter-spacing: -1.8px;\r\n opacity: 0.3;\r\n transition: all 0.5s;\r\n }\r\n\r\n & .content {\r\n & .title {\r\n color: var(--at-neutral-900);\r\n font-weight: 600;\r\n opacity: 0.3;\r\n transition: all 0.5s;\r\n margin-bottom: 0;\r\n\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n font-size: 42px;\r\n line-height: 42px;\r\n letter-spacing: -2.4px;\r\n }\r\n\r\n @media screen and (max-width: 1725px) {\r\n font-size: 50px;\r\n }\r\n }\r\n\r\n & .text {\r\n opacity: 0;\r\n max-height: 0px;\r\n transition: all 0.5s;\r\n max-width: 370px;\r\n margin-bottom: 0;\r\n }\r\n }\r\n\r\n & .thumb {\r\n text-align: right;\r\n\r\n img {\r\n width: 100%;\r\n max-width: 190px;\r\n height: auto;\r\n transition: all 0.5s;\r\n border-radius: 8px;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &:hover {\r\n & .number {\r\n color: var(--at-theme-primary);\r\n opacity: 1;\r\n }\r\n\r\n & .title {\r\n opacity: 1;\r\n transition: all 0.5s;\r\n }\r\n\r\n & .text {\r\n opacity: 1;\r\n max-height: 100px;\r\n transition: all 0.5s;\r\n }\r\n\r\n & .thumb {\r\n img {\r\n max-width: 284px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-content {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n margin-right: 0;\r\n }\r\n }\r\n\r\n &-img {\r\n &-wrapper {\r\n height: 450px;\r\n\r\n @media #{$md,$sm} {\r\n height: 440px;\r\n }\r\n\r\n @media #{$xs} {\r\n height: 300px;\r\n }\r\n\r\n &.image-container {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n & .hover-image {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 0;\r\n border-top-left-radius: 16px;\r\n border-top-right-radius: 16px;\r\n }\r\n\r\n & .hover-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n border-top-left-radius: 16px;\r\n border-top-right-radius: 16px;\r\n }\r\n }\r\n }\r\n\r\n &-list {\r\n &-wrap {\r\n @media #{$lg,$md,$sm,$xs} {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n}\r\n","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 7.17 portfolio\r\n/*----------------------------------------*/\r\n:root {\r\n --numOfSlides: 5;\r\n --slidingAT: 1.3s;\r\n --controlSize: 60px;\r\n}\r\n\r\n.alt-portfolio {\r\n &-content {\r\n background: var(--at-neutral-0);\r\n border-radius: 16px;\r\n padding: 16px 20px;\r\n }\r\n\r\n &-date {\r\n font-size: 14px;\r\n letter-spacing: 0.07em;\r\n color: #848282;\r\n }\r\n\r\n &-thumb {\r\n border-radius: 16px;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 50%;\r\n background: linear-gradient(180deg, rgba(26, 26, 26, 0) 11.93%, rgba(26, 26, 26, 0.76) 100%);\r\n z-index: 1;\r\n }\r\n }\r\n\r\n &-item {\r\n position: relative;\r\n z-index: 3;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n margin-top: 0 !important;\r\n padding-top: 0 !important;\r\n }\r\n\r\n &:hover {\r\n & .alt-portfolio-btn {\r\n transition: all 0.4s ease;\r\n transform: translateY(0);\r\n\r\n & .des {\r\n opacity: 1;\r\n visibility: visible;\r\n transition: all 0.4s ease;\r\n }\r\n }\r\n }\r\n\r\n &-2 {\r\n margin-top: -105px;\r\n }\r\n\r\n &-3 {\r\n margin-top: -200px;\r\n }\r\n\r\n &-4 {\r\n margin-top: 200px;\r\n }\r\n\r\n &-6 {\r\n margin-top: -200px;\r\n }\r\n }\r\n\r\n &-btn {\r\n position: absolute;\r\n left: 54px;\r\n bottom: 45px;\r\n right: 80px;\r\n z-index: 2;\r\n transition: all 0.4s ease;\r\n transform: translateY(40%);\r\n\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n left: 20px;\r\n bottom: 20px;\r\n right: 10px;\r\n\r\n & .h2 {\r\n font-size: 28px;\r\n }\r\n }\r\n\r\n & .des {\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n & .text {\r\n font-weight: 700;\r\n font-size: 14px;\r\n letter-spacing: -0.05em;\r\n text-align: center;\r\n color: var(--at-common-white);\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n left: 0;\r\n right: 0;\r\n margin: 0 auto;\r\n }\r\n }\r\n\r\n &-main {\r\n &-title {\r\n & span {\r\n font-style: italic;\r\n font-weight: 800;\r\n font-size: 42px;\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n\r\n & svg {\r\n margin-top: -60px;\r\n margin-left: 5px;\r\n }\r\n }\r\n\r\n &-wrap {\r\n margin-bottom: -270px;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n margin-bottom: 30px;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.at-hover-img canvas {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.cs-portfolio {\r\n &-tag {\r\n & ul {\r\n & li {\r\n list-style: none;\r\n display: inline-block;\r\n\r\n &:not(:first-child) {\r\n margin-left: 5px;\r\n }\r\n\r\n & a {\r\n font-weight: 600;\r\n font-size: 16px;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: var(--at-common-white);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 50px;\r\n padding: 8px 19px;\r\n line-height: 1;\r\n margin-bottom: 10px;\r\n display: inline-block;\r\n\r\n &:hover {\r\n background: var(--at-common-white);\r\n color: var(--at-common-black);\r\n border-color: var(--at-common-white);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.mg-portfolio {\r\n &-dec {\r\n letter-spacing: -0.03em;\r\n color: var(--at-common-black);\r\n\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n & br {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n &-content {\r\n padding: 23px 0 0 0;\r\n\r\n & .cs-portfolio-tag {\r\n width: 40%;\r\n\r\n @media #{$md} {\r\n width: 50%;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n width: 100%;\r\n }\r\n\r\n ul li a {\r\n font-size: 12px;\r\n color: var(--at-common-black);\r\n border: 1px solid var(--at-neutral-100);\r\n\r\n &:hover {\r\n border-color: var(--at-common-black);\r\n background: var(--at-common-black);\r\n color: var(--at-common-white);\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-item {\r\n border-radius: 10px;\r\n overflow: hidden;\r\n\r\n &-wrap {\r\n @media #{$xl,$lg,$md,$sm,$xs} {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n\r\n &-thumb {\r\n &.style-2 {\r\n position: relative;\r\n border-radius: 0 !important;\r\n overflow: hidden;\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: 26px;\r\n right: 26px;\r\n width: 40px;\r\n height: 40px;\r\n background-color: var(--at-neutral-0);\r\n z-index: 4;\r\n background-image: url('data:image/svg+xml,');\r\n background-size: 14px;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n border-radius: 50px;\r\n }\r\n & img {\r\n border-radius: 0;\r\n filter: grayscale(100%);\r\n transition: all 0.6s ease;\r\n }\r\n }\r\n border-radius: 10px;\r\n overflow: hidden;\r\n\r\n & img {\r\n border-radius: 10px;\r\n transition: all 0.6s ease;\r\n transform-origin: center center;\r\n }\r\n }\r\n}\r\n.mg-portfolio-item {\r\n transition: all 0.6s ease;\r\n &:hover {\r\n .mg-portfolio-thumb {\r\n &.style-2 {\r\n & img {\r\n filter: grayscale(0%);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n/*----------------------------------------*/\r\n/* Award Card Styles\r\n/*----------------------------------------*/\r\n.card-award {\r\n &.style-2 {\r\n background-color: var(--at-neutral-50);\r\n border: none;\r\n border-bottom: 1px solid var(--at-neutral-950);\r\n border-radius: 0;\r\n box-shadow: none;\r\n margin-bottom: 0;\r\n padding: 15px 0;\r\n &:hover {\r\n border-color: var(--at-neutral-950);\r\n transition: all 0.3s ease;\r\n background-color: var(--at-neutral-950);\r\n padding: 15px 20px;\r\n }\r\n }\r\n\r\n &.style-1 {\r\n background-color: var(--at-common-white, #ffffff);\r\n border-radius: 16px;\r\n border: 1px solid var(--at-neutral-100);\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\r\n padding: 20px 42px;\r\n transition: all 0.3s ease;\r\n margin-bottom: 24px;\r\n }\r\n &:hover {\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n border-color: var(--at-neutral-900);\r\n transition: all 0.3s ease;\r\n background-color: var(--at-neutral-900);\r\n\r\n .card-award-date {\r\n color: var(--at-neutral-300);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .card-award-image img {\r\n transform: scale(1.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .card-award-title {\r\n transition: all 0.3s ease;\r\n color: var(--at-common-white);\r\n }\r\n\r\n .card-award-web-excellence {\r\n transition: all 0.3s ease;\r\n color: var(--at-neutral-300);\r\n }\r\n\r\n .card-award-url {\r\n transition: all 0.3s ease;\r\n color: var(--at-neutral-300);\r\n }\r\n\r\n .card-award-icon {\r\n color: var(--at-common-white);\r\n transition: all 0.3s ease;\r\n }\r\n }\r\n\r\n &-link {\r\n text-decoration: none;\r\n color: inherit;\r\n gap: 0px;\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n\r\n @media #{$sm, $xs} {\r\n flex-wrap: wrap;\r\n gap: 5px;\r\n }\r\n\r\n @media (min-width: 1401px) {\r\n gap: 20px;\r\n }\r\n }\r\n\r\n &-date {\r\n flex: 0 0 200px;\r\n font-size: 14px;\r\n font-weight: 400;\r\n color: var(--at-neutral-500);\r\n white-space: nowrap;\r\n transition: all 0.3s ease;\r\n font-family: var(--at-ff-body);\r\n\r\n @media #{$md} {\r\n flex: 0 0 130px;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 12px;\r\n }\r\n }\r\n\r\n &-meta {\r\n flex: 1;\r\n }\r\n\r\n &-image {\r\n width: 90px;\r\n height: 62px;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n transition: all 0.3s ease;\r\n object-fit: cover;\r\n }\r\n\r\n @media #{$xs} {\r\n width: 60px;\r\n height: 42px;\r\n }\r\n }\r\n\r\n &-content {\r\n flex: 0 0 450px;\r\n display: flex;\r\n gap: 16px;\r\n align-items: center;\r\n min-width: 0;\r\n\r\n @media #{$md} {\r\n flex: 0 0 450px;\r\n }\r\n\r\n @media #{$sm, $xs} {\r\n flex: 1 1 100%;\r\n }\r\n\r\n @media (min-width: 1400px) {\r\n .container {\r\n flex: 0 0 600px;\r\n }\r\n }\r\n }\r\n\r\n &-title {\r\n color: var(--at-common-black, #1d1d1d);\r\n line-height: 1.4;\r\n margin-bottom: 4px;\r\n font-family: var(--at-ff-body);\r\n transition: all 0.3s ease;\r\n letter-spacing: -0.01em;\r\n\r\n @media #{$xs} {\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n &-web-excellence {\r\n flex: 0 0 400px;\r\n color: var(--at-neutral-500);\r\n gap: 8px;\r\n transition: all 0.3s ease;\r\n flex-wrap: wrap;\r\n font-family: var(--at-ff-body);\r\n\r\n @media #{$xs} {\r\n font-size: 12px;\r\n }\r\n }\r\n\r\n &-url {\r\n color: var(--at-common-black, #1d1d1d);\r\n }\r\n\r\n &-icon {\r\n flex-shrink: 0;\r\n transition: all 0.3s ease;\r\n width: 14px;\r\n height: 14px;\r\n color: var(--at-common-black, #1d1d1d);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n svg {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n @media #{$xs} {\r\n width: 12px;\r\n height: 12px;\r\n }\r\n }\r\n\r\n &-link:hover &-icon {\r\n transform: rotate(45deg);\r\n }\r\n}\r\n\r\n/* Card award expanded image preview (follows cursor, top-right of cursor, rotated -15deg) */\r\n.card-award-preview {\r\n position: fixed;\r\n left: 0;\r\n top: 0;\r\n width: 280px;\r\n pointer-events: none;\r\n z-index: 9999;\r\n opacity: 0;\r\n visibility: hidden;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);\r\n will-change: transform;\r\n transform-origin: left bottom;\r\n\r\n img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n object-fit: cover;\r\n }\r\n\r\n @media (max-width: 767px) {\r\n display: none !important;\r\n }\r\n}\r\n","@use '../../utils' as *;\r\n\r\n/* testimonial css start */\r\n\r\n.testimonial {\r\n &-cart-wrap {\r\n position: relative;\r\n border-radius: 16px;\r\n border: 1px solid var(--at-neutral-700);\r\n background: var(--at-neutral-800);\r\n\r\n & .rectangular {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 90%;\r\n height: 50px;\r\n background: var(--at-neutral-800);\r\n border-radius: 16px;\r\n border: 1px solid var(--at-neutral-700);\r\n padding: 50px;\r\n z-index: -2;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 0;\r\n height: 0;\r\n background: var(--at-theme-primary);\r\n filter: blur(125px);\r\n opacity: 0;\r\n z-index: -1;\r\n transition: all 0.5s ease;\r\n }\r\n }\r\n\r\n &:hover {\r\n .testimonial-content-author {\r\n &::before {\r\n transition: all 0.3s ease;\r\n width: 100px;\r\n background: var(--at-theme-primary);\r\n }\r\n }\r\n\r\n & .rectangular {\r\n &::after {\r\n opacity: 1;\r\n width: 99px;\r\n height: 99px;\r\n transition: all 0.3s ease;\r\n }\r\n }\r\n }\r\n\r\n &.style-2 {\r\n border: 1px solid var(--at-neutral-100, #DFDFDF);\r\n background: var(--at-neutral-0, #FEFEFE);\r\n\r\n & .rectangular {\r\n border: 1px solid var(--at-neutral-100, #DFDFDF);\r\n background: var(--at-neutral-0, #FEFEFE);\r\n }\r\n\r\n & .testimonial-left-img {\r\n margin-right: 20px;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n & .testimonial-author {\r\n margin-top: 100px;\r\n\r\n @media #{$md} {\r\n margin-top: 60px;\r\n }\r\n\r\n @media #{$xs} {\r\n margin-top: 40px;\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n &-top {\r\n margin-bottom: 45px;\r\n\r\n &-left-img {\r\n margin-right: 20px;\r\n width: 85px;\r\n height: 85px;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &-right-logo {\r\n margin-left: 20px;\r\n }\r\n }\r\n\r\n &-content-author {\r\n position: relative;\r\n margin-top: 80px;\r\n\r\n &::before {\r\n content: '';\r\n position: absolute;\r\n top: -20px;\r\n left: 0;\r\n width: 57px;\r\n height: 1px;\r\n background: var(--at-neutral-500);\r\n transition: all 0.3s ease;\r\n }\r\n }\r\n\r\n}\r\n\r\n.slider-testimonial {\r\n padding-bottom: 12px;\r\n\r\n .swiper-slide-active {\r\n .testimonial-cart-wrap {\r\n & .rectangular::after {\r\n opacity: 1;\r\n width: 99px;\r\n height: 99px;\r\n transition: all 0.5s ease;\r\n }\r\n\r\n & .rectangular::before {\r\n bottom: -12px;\r\n transition: all 0.3s ease;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.scroll-section {\r\n\r\n .wrapper {\r\n position: relative;\r\n height: auto;\r\n }\r\n\r\n .list {\r\n height: 100%;\r\n position: relative;\r\n }\r\n\r\n .item {\r\n min-height: 100vh;\r\n width: 100%;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: auto;\r\n\r\n &:first-child {\r\n min-height: 100%;\r\n height: 100%;\r\n }\r\n\r\n &:not(:first-child) {\r\n position: absolute;\r\n }\r\n }\r\n}\r\n\r\n/* testimonial css end */","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* Team Card Styles\r\n/*----------------------------------------*/\r\n\r\n.team-grid-wrap {\r\n position: relative;\r\n}\r\n\r\n.team-card {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n &-image {\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n background-color: #f5f5f5;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: all 0.5s ease;\r\n }\r\n }\r\n\r\n &-icon {\r\n color: var(--at-common-black);\r\n position: absolute;\r\n top: 22px;\r\n right: 20px;\r\n width: 26px;\r\n height: 26px;\r\n border-radius: 50%;\r\n background-color: var(--at-common-white);\r\n display: flex;\r\n justify-content: center;\r\n transition: all 0.5s ease;\r\n align-items: center;\r\n }\r\n\r\n &-content {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n border-radius: 12px;\r\n background: linear-gradient(180deg, rgba(26, 26, 26, 0.00) 11.93%, #1A1A1A 100%);\r\n backdrop-filter: blur(1.9500000476837158px);\r\n padding: 25px 81px 33px 30px;\r\n overflow: hidden;\r\n }\r\n\r\n &-name {\r\n\r\n .h6 {\r\n color: var(--at-common-white);\r\n font-weight: 600;\r\n letter-spacing: -0.02em;\r\n transition: color 0.3s ease;\r\n line-height: 24px;\r\n }\r\n\r\n }\r\n\r\n &-position {\r\n letter-spacing: -0.28px;\r\n margin-top: 4px;\r\n }\r\n\r\n}\r\n\r\n.team-card {\r\n &:hover {\r\n .team-card-image {\r\n img {\r\n transition: all 0.5s ease;\r\n filter: blur(5px);\r\n scale: 1.05;\r\n }\r\n }\r\n\r\n .team-card-icon {\r\n background: var(--at-common-black);\r\n color: var(--at-common-white);\r\n }\r\n }\r\n\r\n}\r\n\r\n@media #{$md,$sm,$xs} {\r\n .team-card {\r\n &-content {\r\n margin-top: 16px;\r\n }\r\n }\r\n}\r\n\r\n/*----------------------------------------*/\r\n/* Team Card 2 (Home 4 Sec 6) - Social overlay on hover\r\n/*----------------------------------------*/\r\n\r\n.team-card-2 {\r\n\r\n &__image {\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n border-radius: 16px;\r\n border: 1px solid var(--at-neutral-100, #DFDFDF);\r\n background: var(--at-neutral-100, #DFDFDF);\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.4s ease;\r\n }\r\n }\r\n\r\n &__social {\r\n position: absolute;\r\n left: 50px;\r\n right: 50px;\r\n bottom: 20px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translateY(8px);\r\n transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;\r\n z-index: 2;\r\n\r\n @media #{$xl} {\r\n left: 20px;\r\n right: 20px;\r\n }\r\n\r\n @media #{$md} {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0);\r\n }\r\n\r\n @media #{$xs} {\r\n left: 20px;\r\n right: 20px;\r\n bottom: 10px;\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n &:hover &__image img {\r\n transform: scale(1.05);\r\n }\r\n\r\n &:hover &__social {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0);\r\n }\r\n\r\n &__social-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 6px 16px;\r\n background: rgba(26, 26, 26, 0.1);\r\n border: 1px solid rgba(254, 254, 254, 0.30);\r\n border-radius: 100px;\r\n color: #FEFEFE;\r\n font-size: 16px;\r\n font-weight: 500;\r\n text-decoration: none;\r\n white-space: nowrap;\r\n transition: background 0.25s ease, color 0.25s ease;\r\n\r\n svg {\r\n flex-shrink: 0;\r\n }\r\n\r\n &:hover {\r\n background: rgba(255, 255, 255, 0.9);\r\n color: #1D1D1D;\r\n }\r\n }\r\n\r\n &__content {\r\n margin-top: 8px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 12px;\r\n padding: 26px 45px;\r\n min-height: 72px;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);\r\n border-radius: 16px;\r\n background: var(--at-neutral-0, #FEFEFE);\r\n\r\n @media #{$xs} {\r\n padding: 20px;\r\n }\r\n }\r\n\r\n &__name {\r\n text-decoration: none;\r\n color: var(--at-common-black);\r\n\r\n .h6 {\r\n font-weight: 600;\r\n letter-spacing: -0.02em;\r\n line-height: 1.3;\r\n transition: color 0.25s ease;\r\n }\r\n\r\n &:hover .h6 {\r\n color: var(--at-theme-primary, #6366f1);\r\n }\r\n }\r\n\r\n &__position {\r\n flex-shrink: 0;\r\n padding: 6px 16px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.02em;\r\n color: var(--at-common-black);\r\n background: transparent;\r\n border: 1px solid var(--at-common-black);\r\n border-radius: 100px;\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 7.11 faq css\r\n/*----------------------------------------*/\r\n\r\n.at-faq {\r\n @media #{$xxl,$xl,$lg,$md,$sm,$xs} {\r\n margin-left: 0;\r\n }\r\n\r\n &-dec {\r\n font-weight: 500;\r\n font-size: 22px;\r\n letter-spacing: -0.04em;\r\n }\r\n\r\n &-item {\r\n border-radius: 0;\r\n box-shadow: 0 0 2px 0 rgba(39, 39, 46, 0.04);\r\n background: var(--at-neutral-50);\r\n padding: 10px 30px 10px 30px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n &-body {\r\n font-size: 16px;\r\n line-height: 26px;\r\n padding-bottom: 14px;\r\n padding-right: 112px;\r\n padding-left: 45px;\r\n\r\n @media #{$sm,$xs} {\r\n padding-right: 0;\r\n }\r\n\r\n & p {\r\n font-weight: 400;\r\n font-size: 15px;\r\n line-height: 167%;\r\n color: var(--at-neutral-700);\r\n\r\n @media #{$xxl,$xl,$lg,$md,$sm,$xs} {\r\n & br {\r\n display: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &-number {\r\n font-size: 16px;\r\n font-weight: 600;\r\n display: flex;\r\n width: 30px;\r\n height: 30px;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 42px;\r\n background: var(--at-neutral-900);\r\n color: var(--at-common-white);\r\n }\r\n\r\n &-header {\r\n padding: 15px 0;\r\n }\r\n\r\n &-button {\r\n background: transparent;\r\n font-weight: 600;\r\n font-size: 24px;\r\n color: var(--at-common-black);\r\n font-family: var(--at-ff-body);\r\n position: relative;\r\n width: 100%;\r\n text-align: left;\r\n padding-right: 50px;\r\n\r\n @media #{$xs} {\r\n font-size: 18px;\r\n }\r\n\r\n & span {\r\n font-weight: 500;\r\n margin-right: 70px;\r\n\r\n @media #{$sm,$xs} {\r\n margin-right: 30px;\r\n }\r\n }\r\n\r\n &::before,\r\n &:after {\r\n content: \"\\f068\";\r\n font-family: \"Font Awesome 6 Pro\";\r\n position: absolute;\r\n right: 0;\r\n top: -3px;\r\n width: 36px;\r\n height: 36px;\r\n text-align: center;\r\n border-radius: 30px;\r\n line-height: 35px;\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: var(--at-common-black);\r\n transition: all .5s ease;\r\n }\r\n\r\n &.collapsed {\r\n\r\n\r\n &:after {\r\n content: \"\\f067\";\r\n }\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 7.3 banner\r\n/*----------------------------------------*/\r\n\r\n.#{$theme-prifix}-banner {\r\n &-thumb {\r\n height: 800px;\r\n\r\n @media #{$xl,$lg} {\r\n height: 600px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n height: 400px;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 7.13 gallery css\r\n/*----------------------------------------*/\r\n\r\n.#{$theme-prifix}-gallery {\r\n &-wrapper {\r\n background: var(--at-common-black);\r\n height: 1110px;\r\n overflow: hidden;\r\n border-radius: 30px;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n height: 630px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n height: 430px;\r\n }\r\n }\r\n\r\n &-item {\r\n overflow: hidden;\r\n border-radius: 20px;\r\n\r\n &:hover {\r\n & img {\r\n transform: scale(1.1);\r\n }\r\n }\r\n\r\n & img {\r\n border-radius: 20px;\r\n @include at-transition-mul(all .6s ease);\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n\r\n/*----------------------------------------*/\r\n/* Content product right – shop details \r\n/*----------------------------------------*/\r\n.content-product-right {\r\n position: relative;\r\n\r\n &__top {\r\n margin-bottom: 4px;\r\n }\r\n\r\n &__badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 6px 10px;\r\n border-radius: 30px;\r\n background-color: #6D9765;\r\n color: #fefefe;\r\n font-size: 12px;\r\n font-weight: 600;\r\n line-height: normal;\r\n letter-spacing: -0.24px;\r\n text-transform: capitalize;\r\n }\r\n\r\n &__brand {\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: -0.24px;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-500, #585959);\r\n }\r\n\r\n &__title {\r\n font-weight: 600;\r\n line-height: 1;\r\n letter-spacing: -1.8px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n margin: 0 0 12px;\r\n\r\n @media #{$sm,$xs} {\r\n font-size: 28px;\r\n letter-spacing: -1.2px;\r\n }\r\n }\r\n\r\n &__price {\r\n font-weight: 600;\r\n line-height: 1;\r\n letter-spacing: -1.2px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n margin: 0 0 8px;\r\n }\r\n\r\n &__shipping {\r\n font-size: 14px;\r\n font-weight: 500;\r\n font-style: italic;\r\n letter-spacing: -0.28px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n margin: 0 0 16px;\r\n }\r\n\r\n &__excerpt {\r\n &-text {\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: -0.32px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n margin: 0 0 8px;\r\n line-height: 1.4;\r\n }\r\n }\r\n\r\n &__read-more {\r\n font-size: 14px;\r\n font-weight: 600;\r\n letter-spacing: -0.28px;\r\n text-decoration: underline;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n transition: color 0.3s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n\r\n &__option--qty {\r\n width: 75%;\r\n\r\n @media #{$xl,$lg,$sm,$xs} {\r\n width: 100%;\r\n }\r\n\r\n }\r\n\r\n &__option-label {\r\n display: block;\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.8px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n margin-bottom: 12px;\r\n }\r\n\r\n &__sizes {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 9px;\r\n }\r\n\r\n &__size {\r\n width: 46px;\r\n height: 46px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 2px solid transparent;\r\n border-radius: 4px;\r\n background-color: var(--at-neutral-50, #f2f2f2);\r\n font-size: 14px;\r\n font-weight: 600;\r\n letter-spacing: -0.28px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n cursor: pointer;\r\n transition: border-color 0.2s ease, background-color 0.2s ease;\r\n\r\n &:hover {\r\n background-color: var(--at-neutral-100, #e5e5e5);\r\n }\r\n\r\n &.active {\r\n border-color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n }\r\n\r\n &__colors {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 9px;\r\n }\r\n\r\n &__color {\r\n width: 32px;\r\n height: 32px;\r\n border: 2px solid var(--at-neutral-0, #fefefe);\r\n border-radius: 50%;\r\n padding: 0;\r\n cursor: pointer;\r\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n\r\n &:hover {\r\n box-shadow: 0 0 0 1px var(--at-neutral-400);\r\n }\r\n\r\n &.active {\r\n border-color: var(--at-neutral-900, #1d1d1d);\r\n border-width: 2px;\r\n }\r\n }\r\n\r\n &__qty {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 155px;\r\n height: 50px;\r\n padding: 0 16px;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n border-radius: 100px;\r\n background: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__qty-btn {\r\n width: 32px;\r\n height: 32px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: none;\r\n background: none;\r\n font-size: 18px;\r\n font-weight: 600;\r\n letter-spacing: -0.36px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n cursor: pointer;\r\n transition: color 0.2s ease, opacity 0.2s ease;\r\n\r\n &:hover {\r\n opacity: 0.7;\r\n }\r\n }\r\n\r\n &__qty-val {\r\n font-size: 18px;\r\n font-weight: 600;\r\n letter-spacing: -0.36px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n min-width: 24px;\r\n text-align: center;\r\n }\r\n\r\n &__btn {\r\n &--outline {\r\n background-color: var(--at-neutral-0, #fefefe) !important;\r\n color: var(--at-neutral-900, #1d1d1d) !important;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n flex: 1;\r\n\r\n &:hover {\r\n color: var(--at-neutral-900);\r\n border-color: var(--at-neutral-900);\r\n }\r\n }\r\n\r\n &--primary {\r\n background-color: var(--at-neutral-900, #1d1d1d);\r\n color: var(--at-neutral-0, #fefefe);\r\n border: none;\r\n }\r\n }\r\n\r\n &__meta {\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.28px;\r\n color: var(--at-neutral-500, #585959);\r\n\r\n strong {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-weight: 700;\r\n }\r\n }\r\n\r\n &__meta-item {\r\n margin: 0 0 8px;\r\n }\r\n\r\n &__benefits {\r\n list-style: disc;\r\n padding-left: 21px;\r\n margin: 0;\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.28px;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n &__benefits li {\r\n margin-bottom: 4px;\r\n }\r\n\r\n &__share-label {\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: -0.24px;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-500, #585959);\r\n }\r\n\r\n &__share-icon {\r\n width: 30px;\r\n height: 30px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 14px;\r\n color: var(--at-neutral-900);\r\n transition: color 0.2s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n\r\n &__tab-nav {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 23px;\r\n border-bottom: 0;\r\n padding-bottom: 0;\r\n\r\n .nav-link {\r\n font-size: 20px;\r\n font-weight: 600;\r\n letter-spacing: -1px;\r\n color: var(--at-neutral-500, #585959);\r\n border: none;\r\n padding: 0 0 12px;\r\n background: none;\r\n border-radius: 0;\r\n position: relative;\r\n\r\n &.active {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n text-decoration: underline;\r\n }\r\n\r\n &:hover {\r\n color: var(--at-neutral-900);\r\n }\r\n }\r\n }\r\n\r\n &__tab-content {\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: -0.32px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n line-height: 1.5;\r\n }\r\n\r\n &__tab-lead {\r\n font-size: 20px;\r\n letter-spacing: -0.4px;\r\n margin-bottom: 24px;\r\n }\r\n\r\n &__tab-content p {\r\n margin-bottom: 16px;\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n }\r\n\r\n &__spec-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n\r\n th,\r\n td {\r\n padding: 10px 12px;\r\n border-bottom: 1px solid var(--at-neutral-100);\r\n text-align: left;\r\n }\r\n\r\n th {\r\n font-weight: 600;\r\n color: var(--at-neutral-900);\r\n width: 140px;\r\n }\r\n }\r\n\r\n &__no-reviews {\r\n margin: 0;\r\n color: var(--at-neutral-500);\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* Shop cart – list & items \r\n/*----------------------------------------*/\r\n\r\n.cart-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 25px;\r\n width: 100%;\r\n font-family: var(--at-ff-body);\r\n\r\n &__header {\r\n width: 100%;\r\n }\r\n\r\n &__select-all {\r\n cursor: pointer;\r\n gap: 5px;\r\n }\r\n\r\n &__check-wrap {\r\n width: 24px;\r\n height: 24px;\r\n flex-shrink: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n border-radius: 4px;\r\n background: var(--at-neutral-0, #fefefe);\r\n transition: border-color 0.2s ease, background-color 0.2s ease;\r\n }\r\n\r\n &__check-icon {\r\n width: 10px;\r\n height: 9px;\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n object-fit: contain;\r\n }\r\n\r\n .cart-select-all:checked+&__check-wrap {\r\n background: var(--at-neutral-900, #1d1d1d);\r\n border-color: var(--at-neutral-900, #1d1d1d);\r\n\r\n .cart-list__check-icon {\r\n opacity: 1;\r\n filter: brightness(0) invert(1);\r\n }\r\n }\r\n\r\n &__select-all-text {\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.8px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__items {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 13px;\r\n }\r\n}\r\n\r\n.cart-remove-selected {\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.8px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n cursor: pointer;\r\n transition: opacity 0.2s ease;\r\n\r\n &:hover {\r\n opacity: 0.7;\r\n }\r\n}\r\n\r\n/* Cart item card */\r\n.cart-item {\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n border-radius: 16px;\r\n min-height: 177px;\r\n overflow: hidden;\r\n background: var(--at-neutral-0, #fefefe);\r\n transition: box-shadow 0.2s ease;\r\n\r\n &:hover {\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n &__inner {\r\n padding: 9px 39px;\r\n min-height: 177px;\r\n }\r\n\r\n &__left {\r\n gap: 29px;\r\n }\r\n\r\n &__check-label {\r\n cursor: pointer;\r\n flex-shrink: 0;\r\n }\r\n\r\n &__check-wrap {\r\n width: 24px;\r\n height: 24px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n border-radius: 4px;\r\n background: var(--at-neutral-0, #fefefe);\r\n transition: border-color 0.2s ease, background-color 0.2s ease;\r\n }\r\n\r\n &__check-icon {\r\n width: 10px;\r\n height: 9px;\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n object-fit: contain;\r\n }\r\n\r\n & .cart-item-check:checked+&__check-wrap {\r\n background: var(--at-neutral-900, #1d1d1d);\r\n border-color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n & .cart-item-check:checked+&__check-wrap &__check-icon {\r\n opacity: 1;\r\n filter: brightness(0) invert(1);\r\n }\r\n\r\n &__main {\r\n gap: 23px;\r\n }\r\n\r\n &__img-wrap {\r\n width: 140px;\r\n height: 159px;\r\n flex-shrink: 0;\r\n border-radius: 8px;\r\n background: var(--at-neutral-50, #f2f2f2);\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n &__img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n &__info {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 13px;\r\n min-width: 0;\r\n max-width: 306px;\r\n }\r\n\r\n &__title {\r\n font-size: 24px;\r\n font-weight: 600;\r\n letter-spacing: -1.2px;\r\n line-height: 1;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n margin: 0;\r\n }\r\n\r\n &__meta {\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.28px;\r\n color: var(--at-neutral-500, #585959);\r\n margin: 0;\r\n }\r\n\r\n &__price {\r\n font-size: 18px;\r\n font-weight: 600;\r\n letter-spacing: -0.9px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n margin: 0;\r\n }\r\n\r\n &__right {\r\n width: 298px;\r\n flex-shrink: 0;\r\n }\r\n\r\n &__qty {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 155px;\r\n height: 50px;\r\n padding: 0 19.5px;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n border-radius: 100px;\r\n background: var(--at-neutral-0, #fefefe);\r\n font-size: 18px;\r\n font-weight: 600;\r\n letter-spacing: -0.36px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &-qty-minus,\r\n &-qty-plus {\r\n width: 32px;\r\n height: 32px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: none;\r\n background: none;\r\n color: inherit;\r\n font-size: inherit;\r\n cursor: pointer;\r\n transition: opacity 0.2s ease;\r\n padding: 0;\r\n line-height: 1;\r\n\r\n &:hover {\r\n opacity: 0.7;\r\n }\r\n }\r\n\r\n &-qty-val {\r\n min-width: 24px;\r\n text-align: center;\r\n }\r\n\r\n &-delete {\r\n width: 24px;\r\n height: 24px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: none;\r\n background: none;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n cursor: pointer;\r\n padding: 0;\r\n transition: color 0.2s ease, opacity 0.2s ease;\r\n\r\n &:hover {\r\n opacity: 0.7;\r\n color: var(--at-neutral-700);\r\n }\r\n\r\n i {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n @media #{$md} {\r\n &__inner {\r\n padding: 16px 20px;\r\n flex-wrap: wrap;\r\n gap: 16px;\r\n }\r\n\r\n &__right {\r\n width: 100%;\r\n justify-content: flex-start;\r\n gap: 16px;\r\n }\r\n\r\n &__info {\r\n max-width: 100%;\r\n }\r\n\r\n &__title {\r\n font-size: 20px;\r\n }\r\n }\r\n\r\n @media #{$xs} {\r\n &__inner {\r\n padding: 12px 16px;\r\n }\r\n\r\n &__img-wrap {\r\n width: 100px;\r\n height: 114px;\r\n }\r\n\r\n &__left {\r\n gap: 16px;\r\n }\r\n\r\n &__main {\r\n gap: 12px;\r\n }\r\n }\r\n}\r\n\r\n/*----------------------------------------*/\r\n/* Shop cart – summary \r\n/*----------------------------------------*/\r\n\r\n.cart-summary {\r\n background: var(--at-neutral-50, #f2f2f2);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n padding: 52px 49px 60px;\r\n font-family: var(--at-ff-body);\r\n width: 100%;\r\n align-self: flex-start;\r\n\r\n @media (min-width: 992px) {\r\n position: sticky;\r\n top: 120px;\r\n }\r\n\r\n &__title {\r\n font-size: 24px;\r\n font-weight: 600;\r\n letter-spacing: -1.2px;\r\n line-height: 1;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n margin: 0 0 24px;\r\n }\r\n\r\n &__coupon {\r\n margin-bottom: 24px;\r\n gap: 4px;\r\n }\r\n\r\n &__coupon-input {\r\n flex: 1;\r\n min-width: 0;\r\n max-width: 328px;\r\n height: 52px;\r\n padding: 0 24px;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf) !important;\r\n border-radius: 50px;\r\n background: var(--at-neutral-0, #fefefe);\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.28px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n\r\n &::placeholder {\r\n color: var(--at-neutral-500, #585959);\r\n }\r\n }\r\n\r\n &__coupon-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n height: 52px;\r\n padding: 0 24px;\r\n min-width: 118px;\r\n border: none;\r\n border-radius: 42px;\r\n background: var(--at-neutral-900, #1d1d1d);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.8px;\r\n color: var(--at-neutral-0, #fefefe);\r\n cursor: pointer;\r\n transition: opacity 0.2s ease;\r\n\r\n &:hover {\r\n opacity: 0.9;\r\n }\r\n }\r\n\r\n &__coupon-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n svg {\r\n display: block;\r\n }\r\n }\r\n\r\n &__divider {\r\n height: 1px;\r\n background: var(--at-neutral-100, #dfdfdf);\r\n margin: 0 0 24px;\r\n width: 100%;\r\n }\r\n\r\n &__rows {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n &__row {\r\n width: 100%;\r\n }\r\n\r\n &__label {\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: -0.32px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__value {\r\n font-size: 16px;\r\n font-weight: 700;\r\n letter-spacing: -0.32px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__checkout-btn {\r\n &:hover {\r\n color: var(--at-neutral-0, #fefefe);\r\n opacity: 0.9;\r\n }\r\n\r\n .icon-arrow-up-right {\r\n display: inline-flex;\r\n font-size: 0;\r\n\r\n svg {\r\n width: 14px;\r\n height: 14px;\r\n }\r\n }\r\n }\r\n\r\n &__delivery {\r\n margin: 24px 0 0;\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.28px;\r\n color: var(--at-neutral-700, #303030);\r\n }\r\n\r\n &__delivery-date {\r\n font-weight: 700;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n @media #{$md} {\r\n padding: 40px 24px 48px;\r\n\r\n &__coupon-input {\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n @media #{$xs} {\r\n padding: 32px 20px 40px;\r\n\r\n &__title {\r\n font-size: 20px;\r\n }\r\n\r\n &__checkout-btn {\r\n max-width: 100%;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* Shop checkout – Billing Details & Payment \r\n/*----------------------------------------*/\r\n\r\n/* Billing Details */\r\n.checkout-billing {\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--at-neutral-0, #fefefe);\r\n padding: 46px 62px 52px;\r\n font-family: var(--at-ff-body);\r\n margin-bottom: 32px;\r\n\r\n &__title {\r\n font-size: 36px;\r\n font-weight: 600;\r\n letter-spacing: -1.8px;\r\n line-height: 1;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n margin: 0 0 11px;\r\n }\r\n\r\n &__desc {\r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 24px;\r\n color: var(--at-neutral-700, #303030);\r\n margin: 0 0 38px;\r\n max-width: 584px;\r\n }\r\n\r\n &__form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 38px;\r\n }\r\n\r\n &__row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 26px 26px;\r\n width: 100%;\r\n\r\n &--half {\r\n .checkout-billing__field {\r\n flex: 1 1 calc(50% - 13px);\r\n min-width: 0;\r\n }\r\n }\r\n }\r\n\r\n &__field {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n min-width: 0;\r\n\r\n &--full {\r\n flex: 1 1 100%;\r\n }\r\n }\r\n\r\n &__label {\r\n font-size: 16px;\r\n font-weight: 700;\r\n letter-spacing: -0.32px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n line-height: normal;\r\n }\r\n\r\n &__input {\r\n height: 52px;\r\n padding: 0 24px;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n border-radius: 50px;\r\n background: var(--at-neutral-0, #fefefe);\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.28px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n width: 100%;\r\n transition: border-color 0.2s ease;\r\n\r\n &::placeholder {\r\n color: var(--at-neutral-500, #585959);\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n border-color: var(--at-neutral-300, #a3a3a3);\r\n }\r\n\r\n &--full {\r\n max-width: 100%;\r\n }\r\n\r\n &--phone {\r\n max-width: 100%;\r\n padding-left: 120px;\r\n }\r\n }\r\n\r\n &__phone-wrap {\r\n position: relative;\r\n max-width: 493px;\r\n width: 100%;\r\n height: 52px;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n border-radius: 50px;\r\n background: var(--at-neutral-0, #fefefe);\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n &__country-select {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n height: 100%;\r\n min-width: 100px;\r\n padding: 0 36px 0 26px;\r\n border: none;\r\n border-radius: 50px 0 0 50px;\r\n background: transparent;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.28px;\r\n cursor: pointer;\r\n appearance: none;\r\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.81864 8.58158L11.0436 5.35669L11.965 6.27809L7.81864 10.4244L3.67236 6.27809L4.59376 5.35669L7.81864 8.58158Z' fill='%231d1d1d'/%3E%3C/svg%3E\");\r\n background-repeat: no-repeat;\r\n background-position: right 12px center;\r\n background-size: 16px;\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n option {\r\n padding: 8px 12px;\r\n background: var(--at-neutral-0, #fefefe);\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n }\r\n\r\n @media (max-width: 991px) {\r\n padding: 40px 24px 48px;\r\n\r\n &__row--half .checkout-billing__field {\r\n flex: 1 1 100%;\r\n }\r\n\r\n &__input {\r\n max-width: 100%;\r\n }\r\n\r\n &__phone-wrap {\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n @media #{$xs} {\r\n padding: 32px 20px 40px;\r\n\r\n &__title {\r\n font-size: 28px;\r\n letter-spacing: -1.4px;\r\n }\r\n\r\n &__desc {\r\n font-size: 14px;\r\n margin-bottom: 28px;\r\n }\r\n\r\n &__form {\r\n gap: 28px;\r\n }\r\n }\r\n}\r\n\r\n/* Payment */\r\n.checkout-payment {\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--at-neutral-0, #fefefe);\r\n padding: 47px 62px 52px;\r\n font-family: var(--at-ff-body);\r\n\r\n &__title {\r\n font-size: 36px;\r\n font-weight: 600;\r\n letter-spacing: -1.8px;\r\n line-height: 1;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n margin: 0 0 11px;\r\n }\r\n\r\n &__desc {\r\n font-size: 16px;\r\n font-weight: 400;\r\n line-height: 24px;\r\n color: var(--at-neutral-700, #303030);\r\n margin: 0 0 38px;\r\n max-width: 584px;\r\n }\r\n\r\n &__form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 38px;\r\n }\r\n\r\n &__row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 20px 20px;\r\n width: 100%;\r\n align-items: flex-end;\r\n\r\n &--cards {\r\n .checkout-payment__field--card-number {\r\n flex: 1 1 369px;\r\n min-width: 0;\r\n }\r\n\r\n .checkout-payment__field:not(.checkout-payment__field--card-number) {\r\n flex: 0 1 299px;\r\n min-width: 200px;\r\n }\r\n }\r\n\r\n &--half {\r\n .checkout-payment__field {\r\n flex: 1 1 calc(50% - 13px);\r\n min-width: 0;\r\n }\r\n }\r\n }\r\n\r\n &__field {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n min-width: 0;\r\n }\r\n\r\n &__label {\r\n font-size: 16px;\r\n font-weight: 700;\r\n letter-spacing: -0.32px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n line-height: normal;\r\n }\r\n\r\n &__input {\r\n height: 52px;\r\n padding: 0 24px;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n border-radius: 50px;\r\n background: var(--at-neutral-0, #fefefe);\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.28px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n width: 100%;\r\n transition: border-color 0.2s ease;\r\n\r\n &::placeholder {\r\n color: var(--at-neutral-500, #585959);\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n border-color: var(--at-neutral-300, #a3a3a3);\r\n }\r\n\r\n &--card {\r\n max-width: 100%;\r\n padding-right: 160px;\r\n }\r\n }\r\n\r\n &__card-input-wrap {\r\n position: relative;\r\n max-width: 369px;\r\n width: 100%;\r\n }\r\n\r\n &__card-icons {\r\n position: absolute;\r\n right: 21px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n pointer-events: none;\r\n }\r\n\r\n &__card-icon {\r\n font-size: 10px;\r\n font-weight: 700;\r\n letter-spacing: 0.02em;\r\n color: var(--at-neutral-500, #585959);\r\n line-height: 1;\r\n }\r\n\r\n @media (max-width: 991px) {\r\n padding: 40px 24px 48px;\r\n\r\n &__row--cards {\r\n\r\n .checkout-payment__field--card-number,\r\n .checkout-payment__field:not(.checkout-payment__field--card-number) {\r\n flex: 1 1 100%;\r\n }\r\n }\r\n\r\n &__row--half .checkout-payment__field {\r\n flex: 1 1 100%;\r\n }\r\n\r\n &__input {\r\n max-width: 100%;\r\n }\r\n\r\n &__card-input-wrap {\r\n max-width: 100%;\r\n }\r\n\r\n &__input--card {\r\n padding-right: 24px;\r\n }\r\n\r\n }\r\n\r\n @media #{$xs} {\r\n padding: 32px 20px 40px;\r\n\r\n &__title {\r\n font-size: 28px;\r\n letter-spacing: -1.4px;\r\n }\r\n\r\n &__desc {\r\n font-size: 14px;\r\n margin-bottom: 28px;\r\n }\r\n\r\n &__form {\r\n gap: 28px;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 7.23 skill css\r\n/*----------------------------------------*/\r\n\r\n.at-skill {\r\n &-item {\r\n background: #f8f8f8;\r\n border-radius: 24px;\r\n padding: 71px 20px;\r\n\r\n @media #{$xl} {\r\n padding: 40px 20px;\r\n }\r\n }\r\n\r\n &-icon {\r\n width: 70px;\r\n height: 70px;\r\n }\r\n\r\n &-text {\r\n font-weight: 600;\r\n font-size: 28px;\r\n letter-spacing: -0.04em;\r\n color: var(--at-common-black);\r\n\r\n @media #{$xl} {\r\n font-size: 24px;\r\n }\r\n }\r\n}\r\n\r\n/*----------------------------------------*/\r\n/* sec-6-about: skill cards\r\n/*----------------------------------------*/\r\n.skill-cards {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 24px;\r\n}\r\n\r\n.skill-card {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 16px 24px;\r\n background: var(--at-neutral-0);\r\n border-radius: 16px;\r\n border: 1px solid var(--at-neutral-100);\r\n\r\n &__thumb {\r\n flex-shrink: 0;\r\n width: 90px;\r\n height: 62px;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &__content {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n &__title {\r\n flex: 0 0 500px;\r\n font-weight: 600;\r\n letter-spacing: -1.2px;\r\n color: var(--at-neutral-900);\r\n margin-bottom: 0px;\r\n\r\n @media #{$xl} {\r\n flex: 0 0 200px;\r\n }\r\n\r\n @media #{$md} {\r\n flex: 0 0 100px;\r\n }\r\n\r\n @media #{$sm} {\r\n flex: 0 0 100px;\r\n }\r\n\r\n @media #{$xs} {\r\n flex: 1;\r\n }\r\n }\r\n\r\n &__tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n }\r\n\r\n &__tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 10px 27px;\r\n font-size: 24px;\r\n font-weight: 600;\r\n letter-spacing: -1.2px;\r\n color: var(--at-neutral-900, #171717);\r\n background: var(--at-neutral-50, #fafafa);\r\n border: 1px solid var(--at-neutral-100, #e5e5e5);\r\n border-radius: 100px;\r\n transition: all 0.3s ease;\r\n\r\n &:hover {\r\n background: var(--at-neutral-0);\r\n border: 1px solid var(--at-neutral-900);\r\n }\r\n }\r\n\r\n &__tag-icon {\r\n flex-shrink: 0;\r\n object-fit: contain;\r\n }\r\n\r\n &__score {\r\n flex-shrink: 0;\r\n font-size: 24px;\r\n font-weight: 600;\r\n color: var(--at-neutral-900);\r\n\r\n .skill-card__score-value {\r\n font-size: 36px;\r\n\r\n .odometer {\r\n letter-spacing: 0px;\r\n\r\n }\r\n }\r\n }\r\n\r\n @media #{$lg} {\r\n gap: 20px;\r\n padding: 14px 20px;\r\n\r\n\r\n &__tag {\r\n font-size: 20px;\r\n padding: 5px 10px;\r\n }\r\n\r\n &__tag-icon {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n &__score {\r\n font-size: 15px;\r\n }\r\n }\r\n\r\n @media #{$md} {\r\n gap: 16px;\r\n padding: 14px 20px;\r\n\r\n\r\n &__tag {\r\n font-size: 16px;\r\n padding: 5px 10px;\r\n }\r\n\r\n &__tag-icon {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n &__score {\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 12px;\r\n padding: 16px;\r\n\r\n\r\n\r\n &__tags {\r\n gap: 6px;\r\n }\r\n\r\n &__tag {\r\n font-size: 16px;\r\n padding: 5px 10px;\r\n }\r\n\r\n &__tag-icon {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n &__score {\r\n font-size: 14px;\r\n align-self: flex-end;\r\n }\r\n }\r\n\r\n @media #{$xs} {\r\n padding: 14px;\r\n\r\n\r\n &__tag {\r\n font-size: 16px;\r\n padding: 4px 8px;\r\n }\r\n\r\n &__tag-icon {\r\n width: 14px;\r\n height: 14px;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n\r\n/*----------------------------------------*/\r\n/* Home 2 Section 11 - Price plan toggle\r\n/*----------------------------------------*/\r\n\r\n.change-price-plan {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.price-plan-toggle-label {\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: var(--at-neutral-900);\r\n cursor: pointer;\r\n user-select: none;\r\n transition: color 0.2s ease;\r\n\r\n}\r\n\r\n.price-plan-toggle {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n cursor: pointer;\r\n flex-shrink: 0;\r\n}\r\n\r\n.price-plan-toggle__input {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n\r\n.price-plan-toggle__track {\r\n display: block;\r\n width: 70px;\r\n height: 33px;\r\n background: var(--at-common-white);\r\n border: 1px solid var(--at-neutral-100);\r\n border-radius: 9999px;\r\n transition: background 0.25s ease;\r\n}\r\n\r\n.price-plan-toggle__thumb {\r\n position: absolute;\r\n left: 5px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 22px;\r\n height: 22px;\r\n background: var(--at-neutral-900);\r\n border-radius: 50%;\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);\r\n transition: transform 0.25s ease, left 0.25s ease;\r\n pointer-events: none;\r\n}\r\n\r\n.price-plan-toggle__input:checked+.price-plan-toggle__track {\r\n // background: #1A1A1A;\r\n}\r\n\r\n.price-plan-toggle__input:checked+.price-plan-toggle__track+.price-plan-toggle__thumb {\r\n left: 42px;\r\n}\r\n\r\n.price-plan-toggle__input:focus-visible+.price-plan-toggle__track {\r\n outline: 2px solid #1A1A1A;\r\n outline-offset: 2px;\r\n}\r\n\r\n/*----------------------------------------*/\r\n/* Home 2 Section 11 - Pricing cards\r\n/*----------------------------------------*/\r\n\r\n.home-2-pricing-card {\r\n position: relative;\r\n background: var(--at-neutral-0);\r\n border-radius: 16px;\r\n padding: 15px;\r\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n\r\n\r\n &__badge {\r\n position: absolute;\r\n top: 24px;\r\n right: 24px;\r\n font-size: 10px;\r\n font-weight: 600;\r\n letter-spacing: -0.2px;\r\n text-transform: uppercase;\r\n color: #fff;\r\n background: var(--at-theme-primary);\r\n padding: 6px 10px;\r\n border-radius: 9999px;\r\n\r\n @media #{$md,$xs} {\r\n top: 45px;\r\n right: 45px;\r\n }\r\n }\r\n\r\n &__body {\r\n flex: 0 0 auto;\r\n padding: 25px;\r\n background: var(--at-neutral-50);\r\n border-radius: 14px;\r\n }\r\n\r\n &--popular {\r\n & .home-2-pricing-card__body {\r\n background: rgba(240, 70, 14, 0.10);\r\n box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);\r\n }\r\n }\r\n\r\n &__title {\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: var(--at-neutral-900);\r\n margin-bottom: 16px;\r\n }\r\n\r\n &__price {\r\n margin-bottom: 16px;\r\n display: flex;\r\n align-items: baseline;\r\n flex-wrap: wrap;\r\n }\r\n\r\n &__price-value {\r\n font-size: 48px;\r\n font-weight: 600;\r\n line-height: 1;\r\n color: var(--at-neutral-900);\r\n font-family: var(--at-ff-body);\r\n letter-spacing: -2.4px;\r\n }\r\n\r\n &__price-period {\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: var(--at-neutral-500);\r\n margin-left: 2px;\r\n }\r\n\r\n &__desc {\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 1.6;\r\n color: var(--at-neutral-500);\r\n margin-bottom: 28px;\r\n }\r\n\r\n &__features {\r\n list-style: none;\r\n padding: 0;\r\n margin: 40px 25px 25px 25px;\r\n flex: 1 1 auto;\r\n }\r\n\r\n &__features li {\r\n display: flex;\r\n align-items: center;\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: var(--at-neutral-700);\r\n margin-bottom: 14px;\r\n font-family: var(--at-ff-body);\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n }\r\n\r\n &__feature-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 18px;\r\n height: 18px;\r\n min-width: 18px;\r\n border-radius: 50%;\r\n margin-right: 12px;\r\n\r\n svg {\r\n flex-shrink: 0;\r\n }\r\n }\r\n\r\n @media #{$md,$xs} {\r\n\r\n &__price-value {\r\n font-size: 42px;\r\n }\r\n\r\n &__title {\r\n font-size: 20px;\r\n }\r\n\r\n &__features li {\r\n font-size: 16px;\r\n }\r\n }\r\n\r\n @media #{$xs} {\r\n padding: 8px;\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-2-home-5 - Why Orisa 3 columns\r\n/*----------------------------------------*/\r\n.sec-2-home-5 {\r\n &__grid {\r\n align-items: stretch;\r\n }\r\n\r\n &__col {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n\r\n }\r\n\r\n &__card {\r\n &--hero {\r\n position: relative;\r\n min-height: 370px;\r\n background: var(--at-neutral-900, #1a1a1a);\r\n\r\n @media #{$md,$sm,$xs} {\r\n min-height: 320px;\r\n }\r\n }\r\n\r\n &--list {\r\n flex: 1;\r\n }\r\n\r\n &--testimonial {\r\n flex: 1;\r\n }\r\n\r\n &--product {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n &--small {\r\n &:not(:first-child) {\r\n border-radius: 16px;\r\n background: var(--at-neutral-0, #FEFEFE);\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n margin-top: 1rem;\r\n }\r\n }\r\n\r\n &--img {\r\n padding: 11px 0 0 30px;\r\n border-radius: 16px;\r\n background: var(--at-neutral-0, #FEFEFE);\r\n position: relative;\r\n min-height: 260px;\r\n\r\n .img {\r\n position: absolute;\r\n bottom: 0;\r\n right: 0;\r\n }\r\n }\r\n\r\n &--quote {\r\n min-height: 180px;\r\n padding: 57px 34px;\r\n border-radius: 16px;\r\n }\r\n }\r\n\r\n /* Hero block */\r\n &__hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(99deg, #000 5%, rgba(0, 0, 0, 0.44) 50%, #000 95%);\r\n opacity: 0.65;\r\n z-index: 1;\r\n }\r\n\r\n &__hero-img {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n z-index: 0;\r\n }\r\n\r\n &__hero-overlay {\r\n z-index: 2;\r\n }\r\n\r\n &__hero-title {\r\n font-size: clamp(1.125rem, 2.5vw, 1.5rem);\r\n line-height: 1.3;\r\n max-width: 85%;\r\n letter-spacing: -0.02em;\r\n\r\n @media #{$xs} {\r\n font-size: 1rem;\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n /* List with plus icon */\r\n &__list {\r\n &-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 8px 0;\r\n color: var(--at-neutral-900, #1a1a1a);\r\n font-size: 15px;\r\n font-weight: 500;\r\n line-height: 1.4;\r\n\r\n &::before {\r\n content: '+';\r\n flex-shrink: 0;\r\n width: 18px;\r\n height: 18px;\r\n border-radius: 50%;\r\n background: var(--at-neutral-900, #1a1a1a);\r\n color: var(--at-neutral-0);\r\n font-size: 14px;\r\n font-weight: 700;\r\n line-height: 24px;\r\n text-align: center;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n }\r\n }\r\n\r\n /* Testimonial */\r\n &__avatar {\r\n width: 48px;\r\n height: 48px;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &__avatars-row {\r\n flex-wrap: wrap;\r\n }\r\n\r\n &__avatar-sm {\r\n width: 65px;\r\n height: 65px;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n padding: 4px;\r\n background: var(--at-neutral-50);\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 4px;\r\n filter: grayscale(100%);\r\n }\r\n }\r\n\r\n &__stars {\r\n display: flex;\r\n gap: 2px;\r\n font-size: 14px;\r\n }\r\n\r\n &__star {\r\n color: var(--at-neutral-500, #e5e5e5);\r\n\r\n &--filled {\r\n color: var(--at-neutral-900, #1a1a1a);\r\n }\r\n }\r\n\r\n\r\n /* Stat */\r\n &__stat {\r\n font-size: clamp(2.5rem, 5vw, 3.5rem);\r\n font-weight: 700;\r\n line-height: 1.1;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-900, #1a1a1a);\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* at-brand-scroll - Vertical random scroll of 3 logos in each brand cell\r\n/*----------------------------------------*/\r\n\r\n.at-brand-scroll {\r\n .at-brand-item .brand {\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 100%;\r\n min-height: 100%;\r\n }\r\n\r\n /* Viewport: show only 1 logo, fixed height = 1 slide */\r\n .brand-logo-viewport {\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 70px;\r\n flex-shrink: 0;\r\n margin: auto;\r\n\r\n @media #{$md,$xs} {\r\n height: 50px;\r\n }\r\n }\r\n\r\n .brand-logo-track {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n flex-shrink: 0;\r\n will-change: transform;\r\n }\r\n\r\n .brand-logo-slide {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n height: 70px;\r\n min-height: 70px;\r\n flex-shrink: 0;\r\n\r\n @media #{$md,$xs} {\r\n height: 60px;\r\n min-height: 60px;\r\n }\r\n }\r\n\r\n .brand-logo-slide img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n display: block;\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* block-journey - Career Path & Expertise\r\n/* Header CTA: Book A Call Now | Hero card: SINCE 2012 + overlay | Journey list\r\n/*----------------------------------------*/\r\n.block-journey {\r\n\r\n /* CTA: Book A Call Now + white circle arrow */\r\n &__cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 14px 24px;\r\n border-radius: 100px;\r\n border: 1px solid var(--at-neutral-600, #4d4d4d);\r\n background: transparent;\r\n color: var(--at-neutral-0);\r\n font-size: 15px;\r\n font-weight: 500;\r\n text-decoration: none;\r\n transition: border-color 0.2s ease, background-color 0.2s ease;\r\n\r\n &:hover {\r\n border-color: var(--at-neutral-500, #585959);\r\n background: rgba(255, 255, 255, 0.05);\r\n color: var(--at-neutral-0);\r\n }\r\n }\r\n\r\n &__cta-text {\r\n letter-spacing: 0.01em;\r\n }\r\n\r\n &__cta-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: var(--at-neutral-0);\r\n color: var(--at-neutral-900, #1a1a1a);\r\n flex-shrink: 0;\r\n }\r\n\r\n /* Hero card: image + SINCE 2012 badge + overlay title */\r\n &__hero {\r\n border-radius: 16px;\r\n overflow: hidden;\r\n }\r\n\r\n &__hero-thumb {\r\n position: relative;\r\n display: block;\r\n }\r\n\r\n &__hero-badge {\r\n position: absolute;\r\n left: 20px;\r\n bottom: 80px;\r\n display: inline-block;\r\n padding: 6px 12px;\r\n border-radius: 100px;\r\n background: rgba(255, 255, 255, 0.2);\r\n color: var(--at-neutral-0);\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: 0.05em;\r\n text-transform: uppercase;\r\n z-index: 2;\r\n }\r\n\r\n &__hero-overlay {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n padding: 24px 20px 20px;\r\n background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);\r\n z-index: 1;\r\n }\r\n\r\n &__hero-title {\r\n font-size: 20px;\r\n line-height: 1.3;\r\n letter-spacing: -0.02em;\r\n max-width: 14ch;\r\n\r\n @media #{$md,$sm,$xs} {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n .journey-list-wrap {\r\n position: relative;\r\n padding-left: 80px;\r\n\r\n @media #{$sm,$xs} {\r\n padding-left: 30px;\r\n }\r\n }\r\n\r\n .journey-list-line {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 3px;\r\n height: 0;\r\n background: var(--at-neutral-700, #3d3d3d);\r\n will-change: height;\r\n }\r\n\r\n .journey-list {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n\r\n &__item {\r\n display: grid;\r\n grid-template-columns: minmax(140px, 180px) 1fr auto;\r\n gap: 24px 32px;\r\n align-items: flex-start;\r\n padding: 24px 0;\r\n border-bottom: 1px solid var(--at-neutral-700, #3d3d3d);\r\n\r\n &:first-child {\r\n padding-top: 0;\r\n }\r\n\r\n &:last-child {\r\n border-bottom: none !important;\r\n padding-bottom: 0;\r\n\r\n .journey-list__desc {\r\n margin-bottom: 0;\r\n }\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n grid-template-columns: 1fr auto;\r\n gap: 8px 16px;\r\n padding: 20px 0;\r\n\r\n .journey-list__date {\r\n grid-column: 1;\r\n }\r\n\r\n .journey-list__body {\r\n grid-column: 1;\r\n grid-row: 2;\r\n }\r\n\r\n .journey-list__link {\r\n grid-column: 2;\r\n grid-row: 1 / 3;\r\n align-self: center;\r\n }\r\n }\r\n }\r\n\r\n &__date {\r\n font-size: 14px;\r\n font-weight: 500;\r\n line-height: 1.4;\r\n letter-spacing: 0.01em;\r\n color: var(--at-neutral-0);\r\n flex-shrink: 0;\r\n padding-top: 2px;\r\n\r\n @media #{$md,$sm,$xs} {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n &__body {\r\n max-width: 75%;\r\n\r\n @media #{$sm,$xs} {\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n &__title {\r\n font-size: 24px;\r\n font-weight: 600;\r\n letter-spacing: -0.02em;\r\n line-height: 1.35;\r\n color: var(--at-neutral-0);\r\n margin: 0 0 6px 0;\r\n\r\n @media #{$md,$sm,$xs} {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n &__company {\r\n font-weight: 500;\r\n opacity: 0.9;\r\n }\r\n\r\n &__desc {\r\n font-size: 15px;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n letter-spacing: 0.01em;\r\n color: rgba(255, 255, 255, 0.65);\r\n margin-bottom: 40px;\r\n\r\n @media #{$md,$sm,$xs} {\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n &__link {\r\n display: inline-flex;\r\n align-items: flex-start;\r\n align-self: flex-start;\r\n justify-content: flex-start;\r\n color: var(--at-neutral-0);\r\n padding: 8px;\r\n margin: -8px;\r\n transition: opacity 0.2s ease;\r\n\r\n &:hover {\r\n opacity: 0.8;\r\n }\r\n\r\n svg {\r\n display: block;\r\n }\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-1-home-7 (Advancing Startup Innovation Hero)\r\n/*----------------------------------------*/\r\n\r\n// Hero-7 specific palette — the two solid panels come\r\n// and are not semantic tokens elsewhere in the template, so we keep them\r\n// scoped here. Brand accent still flows through --at-theme-primary.\r\n$sec1-home7-bg-left: #c7260a;\r\n$sec1-home7-bg-right: #800b01;\r\n\r\n.sec-1-home-7 {\r\n min-height: 100vh;\r\n color: #fff;\r\n padding-top: 130px;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n min-height: auto;\r\n padding-top: 110px;\r\n }\r\n\r\n // --- Split background ---------------------------------------------------\r\n &__bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: -1;\r\n }\r\n\r\n &__bg-left,\r\n &__bg-right {\r\n flex: 1 1 50%;\r\n }\r\n\r\n &__bg-left {\r\n background: $sec1-home7-bg-left;\r\n }\r\n\r\n &__bg-right {\r\n background: $sec1-home7-bg-right;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n &__bg {\r\n flex-direction: column;\r\n }\r\n\r\n &__bg-left {\r\n flex: 0 0 45%;\r\n }\r\n\r\n &__bg-right {\r\n flex: 1 1 auto;\r\n }\r\n }\r\n\r\n // --- Decorative 8-point asterisk sitting on the split -------------------\r\n &__star {\r\n position: absolute;\r\n top: 58%;\r\n left: 50%;\r\n width: 150px;\r\n height: 150px;\r\n transform: translate(-50%, -50%) rotate(22deg);\r\n z-index: 2;\r\n pointer-events: none;\r\n\r\n @media #{$xxl} {\r\n width: 130px;\r\n height: 130px;\r\n }\r\n\r\n @media #{$xl} {\r\n width: 110px;\r\n height: 110px;\r\n }\r\n\r\n @media #{$lg} {\r\n width: 90px;\r\n height: 90px;\r\n }\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n }\r\n\r\n // --- Left column --------------------------------------------------------\r\n &__left {\r\n min-height: 760px;\r\n padding: 0;\r\n\r\n @media #{$lg} {\r\n min-height: 640px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n min-height: auto;\r\n padding-bottom: 40px;\r\n }\r\n }\r\n\r\n &__img-wrap {\r\n position: absolute;\r\n inset: 0 0 0 0;\r\n overflow: hidden;\r\n max-width: 45%;\r\n margin-top: 80px;\r\n\r\n @media #{$md,$sm,$xs} {\r\n position: relative;\r\n height: 520px;\r\n }\r\n\r\n @media #{$xs} {\r\n height: 420px;\r\n }\r\n }\r\n\r\n &__img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center top;\r\n }\r\n\r\n &__coords {\r\n position: absolute;\r\n top: 140px;\r\n left: 130px;\r\n z-index: 2;\r\n color: #fff;\r\n font-size: 16px;\r\n letter-spacing: -0.05em;\r\n\r\n .text-scramble {\r\n cursor: default;\r\n font-variant-numeric: tabular-nums;\r\n font-feature-settings: 'tnum';\r\n }\r\n\r\n @media #{$xxl} {\r\n left: 90px;\r\n }\r\n\r\n @media #{$xl,$lg} {\r\n top: 120px;\r\n left: 60px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n top: 110px;\r\n left: 30px;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n &__tags {\r\n position: absolute;\r\n left: 100px;\r\n bottom: 60px;\r\n z-index: 2;\r\n max-width: 540px;\r\n\r\n @media #{$xxl} {\r\n left: 60px;\r\n }\r\n\r\n @media #{$xl,$lg} {\r\n left: 40px;\r\n bottom: 40px;\r\n max-width: 460px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n position: relative;\r\n left: auto;\r\n bottom: auto;\r\n padding: 24px 20px 0;\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n &__tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-weight: 500;\r\n font-size: 16px;\r\n letter-spacing: -0.02em;\r\n color: #fff;\r\n padding: 12px 20px;\r\n border-radius: 50px;\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n background: rgba(70, 70, 70, 0.2);\r\n backdrop-filter: blur(24px);\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n\r\n &:hover {\r\n background: rgba(255, 255, 255, 0.18);\r\n border-color: rgba(255, 255, 255, 0.5);\r\n color: #fff;\r\n }\r\n\r\n svg {\r\n flex-shrink: 0;\r\n opacity: 0.9;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 14px;\r\n padding: 10px 16px;\r\n }\r\n }\r\n\r\n // --- Right column -------------------------------------------------------\r\n &__right {\r\n display: flex;\r\n align-items: center;\r\n padding: 0;\r\n }\r\n\r\n &__content {\r\n width: 100%;\r\n max-width: 640px;\r\n padding: 30px 60px 60px 125px;\r\n\r\n @media #{$xl} {\r\n padding: 30px 50px 60px;\r\n max-width: 600px;\r\n }\r\n\r\n @media #{$lg} {\r\n padding: 30px 40px 60px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n padding: 40px 24px 60px;\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n &__brackets {\r\n font-weight: 400;\r\n font-size: 16px;\r\n color: #fff;\r\n letter-spacing: -0.02em;\r\n\r\n li {\r\n opacity: 0.9;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 14px;\r\n gap: 18px !important;\r\n }\r\n }\r\n\r\n &__headline-wrap {\r\n display: inline-block;\r\n max-width: 100%;\r\n }\r\n\r\n &__headline {\r\n font-family: var(--at-ff-heading);\r\n font-size: 92px;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n\r\n @media #{$xxl} {\r\n font-size: 82px;\r\n }\r\n\r\n @media #{$xl} {\r\n font-size: 72px;\r\n }\r\n\r\n @media #{$lg} {\r\n font-size: 62px;\r\n }\r\n\r\n @media #{$md} {\r\n font-size: 64px;\r\n }\r\n\r\n @media #{$sm} {\r\n font-size: 52px;\r\n }\r\n\r\n @media #{$xs} {\r\n font-size: 40px;\r\n }\r\n }\r\n\r\n &__headline-arrow-cover {\r\n position: absolute;\r\n top: 110px;\r\n right: 0px;\r\n transform: rotate(-45deg);\r\n\r\n &__headline-arrow {\r\n position: absolute;\r\n top: 10px;\r\n right: -30px;\r\n color: var(--at-common-white);\r\n transform: rotate(0deg);\r\n width: 70px;\r\n height: 53px;\r\n\r\n @media #{$xl} {\r\n width: 56px;\r\n height: 42px;\r\n right: -10px;\r\n }\r\n\r\n @media #{$lg} {\r\n width: 44px;\r\n height: 34px;\r\n right: 0;\r\n }\r\n\r\n @media #{$md} {\r\n width: 50px;\r\n height: 38px;\r\n right: 0;\r\n }\r\n\r\n svg {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n }\r\n }\r\n\r\n &__desc {\r\n font-weight: 500;\r\n font-size: 20px;\r\n line-height: 1.45;\r\n letter-spacing: -0.02em;\r\n max-width: 560px;\r\n\r\n @media #{$lg,$md} {\r\n font-size: 18px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n font-size: 16px;\r\n }\r\n }\r\n\r\n // --- CTA ---------------------------------------------------------------\r\n &__cta-btn,\r\n &__cta-arrow {\r\n background: var(--at-theme-primary);\r\n color: var(--at-common-white);\r\n transition: all 0.3s ease;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n background: var(--at-common-white);\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n\r\n &__cta-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 50px;\r\n padding: 0 27px;\r\n border-radius: 50px;\r\n font-weight: 600;\r\n font-size: 16px;\r\n letter-spacing: -0.05em;\r\n white-space: nowrap;\r\n }\r\n\r\n &__cta-arrow {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n flex-shrink: 0;\r\n\r\n svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n }\r\n\r\n // --- Social proof ------------------------------------------------------\r\n &__proof {\r\n @media #{$lg,$md,$sm,$xs} {\r\n justify-content: flex-start;\r\n }\r\n }\r\n\r\n &__avatars {\r\n display: inline-flex;\r\n align-items: center;\r\n }\r\n\r\n &__avatar {\r\n width: 65px;\r\n height: 65px;\r\n border-radius: 50%;\r\n border: 4px solid #fff;\r\n overflow: hidden;\r\n display: inline-block;\r\n flex-shrink: 0;\r\n\r\n &:not(:first-child) {\r\n margin-left: -25px;\r\n }\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n @media #{$xs} {\r\n width: 52px;\r\n height: 52px;\r\n border-width: 3px;\r\n\r\n &:not(:first-child) {\r\n margin-left: -20px;\r\n }\r\n }\r\n }\r\n\r\n &__proof-text {\r\n font-size: 16px;\r\n letter-spacing: -0.02em;\r\n max-width: 220px;\r\n\r\n @media #{$xs} {\r\n font-size: 14px;\r\n max-width: 100%;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-2-home-7 (We Power the World's Fastest Growing Startups)\r\n/*----------------------------------------*/\r\n\r\n.sec-2-home-7 {\r\n position: relative;\r\n border-bottom: 1px solid var(--at-neutral-100, #dfdfdf);\r\n overflow: hidden;\r\n\r\n // --- Intro row ---------------------------------------------------------\r\n &__eyebrow {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n\r\n svg {\r\n transition: transform .35s ease;\r\n }\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n\r\n svg {\r\n transform: translate(2px, -2px);\r\n }\r\n }\r\n }\r\n\r\n &__headline {\r\n font-family: var(--at-heading-font);\r\n color: var(--at-neutral-950, #0f0f0f);\r\n font-size: clamp(2.25rem, 5vw, 4.5rem); // 36px -> 72px\r\n font-weight: 600;\r\n line-height: 1.05;\r\n letter-spacing: -0.05em;\r\n\r\n &-strong {\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n &-muted {\r\n color: var(--at-neutral-300, #b7b7b7);\r\n }\r\n }\r\n\r\n &__desc {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: 22px;\r\n font-weight: 500;\r\n line-height: 1.4;\r\n letter-spacing: -0.025em;\r\n\r\n strong {\r\n font-weight: 700;\r\n }\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n // --- Staircase grid ----------------------------------------------------\r\n &__grid {\r\n border-top: 1px solid var(--at-neutral-100, #dfdfdf);\r\n\r\n // Vertical guide lines (5 columns) using a repeating linear-gradient.\r\n // We start the first line at 20% so it lives between col-1 and col-2.\r\n background-image: linear-gradient(to right,\r\n transparent 0,\r\n transparent calc(20% - 1px),\r\n var(--at-neutral-100, #dfdfdf) calc(20% - 1px),\r\n var(--at-neutral-100, #dfdfdf) 20%,\r\n transparent 20%,\r\n transparent calc(40% - 1px),\r\n var(--at-neutral-100, #dfdfdf) calc(40% - 1px),\r\n var(--at-neutral-100, #dfdfdf) 40%,\r\n transparent 40%,\r\n transparent calc(60% - 1px),\r\n var(--at-neutral-100, #dfdfdf) calc(60% - 1px),\r\n var(--at-neutral-100, #dfdfdf) 60%,\r\n transparent 60%,\r\n transparent calc(80% - 1px),\r\n var(--at-neutral-100, #dfdfdf) calc(80% - 1px),\r\n var(--at-neutral-100, #dfdfdf) 80%,\r\n transparent 80%);\r\n\r\n @media #{$md,$sm,$xs} {\r\n background-image: none;\r\n border-top: 0;\r\n }\r\n }\r\n\r\n &__row {\r\n display: grid;\r\n grid-template-columns: repeat(5, 1fr);\r\n column-gap: 30px;\r\n align-items: center;\r\n padding: 40px 0;\r\n border-bottom: 1px solid var(--at-neutral-100, #dfdfdf);\r\n\r\n &:last-child {\r\n border-bottom: 0;\r\n }\r\n\r\n @media #{$xl} {\r\n column-gap: 24px;\r\n padding: 32px 0;\r\n }\r\n\r\n @media #{$lg} {\r\n column-gap: 20px;\r\n padding: 28px 0;\r\n grid-template-columns: repeat(5, 1fr);\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 28px;\r\n padding: 40px 0;\r\n }\r\n }\r\n\r\n // Column placement modifiers (desktop-only; stacked on mobile)\r\n &__col-1 {\r\n grid-column: 1 / span 1;\r\n }\r\n\r\n &__col-2 {\r\n grid-column: 2 / span 1;\r\n }\r\n\r\n &__col-3 {\r\n grid-column: 3 / span 1;\r\n }\r\n\r\n &__col-4 {\r\n grid-column: 4 / span 1;\r\n }\r\n\r\n &__col-5 {\r\n grid-column: 5 / span 1;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n\r\n &__col-1,\r\n &__col-2,\r\n &__col-3,\r\n &__col-4,\r\n &__col-5 {\r\n grid-column: auto;\r\n width: 100%;\r\n }\r\n }\r\n\r\n // --- Cells -------------------------------------------------------------\r\n &__cell {\r\n min-width: 0;\r\n\r\n &--img {\r\n .sec-2-home-7__img-wrap {\r\n position: relative;\r\n width: 100%;\r\n max-width: 270px;\r\n aspect-ratio: 270 / 329;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--at-neutral-0, #fefefe);\r\n\r\n .thumb {\r\n height: 330px;\r\n }\r\n\r\n img {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform .6s ease;\r\n border-radius: 16px;\r\n }\r\n\r\n &:hover img {\r\n transform: scale(1.05);\r\n }\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n .sec-2-home-7__img-wrap {\r\n max-width: 100%;\r\n aspect-ratio: 16 / 10;\r\n }\r\n }\r\n }\r\n\r\n &--feature {\r\n max-width: 260px;\r\n\r\n @media #{$md,$sm,$xs} {\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n &--stat {\r\n max-width: 320px;\r\n\r\n @media #{$md,$sm,$xs} {\r\n max-width: 100%;\r\n }\r\n }\r\n }\r\n\r\n // --- Feature block -----------------------------------------------------\r\n &__feature-icon {\r\n width: 40px;\r\n height: 40px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n\r\n svg {\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n }\r\n }\r\n\r\n &__feature-title {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-family: var(--at-heading-font);\r\n font-size: 36px;\r\n font-weight: 600;\r\n line-height: 1.1;\r\n letter-spacing: -0.05em;\r\n margin-bottom: 16px;\r\n\r\n @media #{$xl,$lg} {\r\n font-size: 30px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n font-size: 28px;\r\n }\r\n }\r\n\r\n &__feature-desc {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 1.45;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n // --- Stat block --------------------------------------------------------\r\n &__stat-value {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-family: var(--at-heading-font);\r\n font-size: 84px;\r\n font-weight: 600;\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n\r\n @media #{$xxl} {\r\n font-size: 76px;\r\n }\r\n\r\n @media #{$xl} {\r\n font-size: 64px;\r\n }\r\n\r\n @media #{$lg} {\r\n font-size: 54px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n font-size: 64px;\r\n }\r\n }\r\n\r\n &__stat-label {\r\n color: var(--at-neutral-500, #585959);\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 1.45;\r\n letter-spacing: -0.02em;\r\n }\r\n}\r\n\r\n.at-item-anime.marque {\r\n overflow: hidden;\r\n border-radius: 16px;\r\n\r\n img {\r\n transition: transform .6s ease;\r\n }\r\n\r\n &:hover {\r\n img {\r\n transform: scale(1.05);\r\n filter: brightness(1.1);\r\n transition: transform .6s ease;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-4-home-7 (Our mission — dual reveal-text headline + locations)\r\n/*----------------------------------------*/\r\n\r\n.sec-4-home-7 {\r\n &__eyebrow {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n }\r\n\r\n &__frame {\r\n position: relative;\r\n max-width: 319px;\r\n aspect-ratio: 319 / 368;\r\n margin-inline: auto;\r\n overflow: hidden;\r\n }\r\n\r\n &__img {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n pointer-events: none;\r\n }\r\n\r\n &__img--bg {\r\n object-position: 65% center;\r\n transform: scale(1.08);\r\n }\r\n\r\n &__img--helmet {\r\n object-fit: cover;\r\n object-position: 50% 18%;\r\n width: 118%;\r\n height: 128%;\r\n left: -9%;\r\n top: -6%;\r\n }\r\n\r\n &__title {\r\n font-family: var(--at-heading-font);\r\n font-size: clamp(2.25rem, 4vw, 4rem);\r\n font-weight: 600;\r\n line-height: 1.12;\r\n letter-spacing: -0.05em;\r\n max-width: 1040px;\r\n }\r\n\r\n // Two inline `.reveal-text` spans → SplitText + scrub per phrase; colors match (950 / 300)\r\n &__title-part {\r\n display: inline;\r\n font: inherit;\r\n letter-spacing: inherit;\r\n line-height: inherit;\r\n vertical-align: baseline;\r\n }\r\n\r\n &__title-part--950 {\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n &__title-part--300 {\r\n color: var(--at-neutral-300, #b7b7b7);\r\n }\r\n\r\n &__cta-btn {\r\n border-radius: 50px 0 0 50px;\r\n padding-inline: 27px;\r\n min-height: 50px;\r\n }\r\n\r\n &__cta-circle {\r\n width: 50px;\r\n min-width: 50px;\r\n height: 50px;\r\n background: #1D1D1D;\r\n border-radius: 50%;\r\n margin-left: 0;\r\n text-decoration: none;\r\n transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;\r\n\r\n &:hover {\r\n background: var(--at-theme-primary);\r\n color: var(--at-common-white);\r\n transform: translateY(-2px);\r\n }\r\n }\r\n\r\n &__loc-title {\r\n font-size: 24px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__loc-body {\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 1.5;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-500, #585959);\r\n\r\n @media (min-width: 992px) {\r\n &--solo {\r\n padding-top: 44px;\r\n }\r\n }\r\n }\r\n\r\n &__loc-strong {\r\n font-weight: 500;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n text-decoration: none;\r\n transition: color 0.25s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-5-home-7 (Specialized services + accordion + throwable logos)\r\n/*----------------------------------------*/\r\n\r\n.sec-5-home-7 {\r\n &__eyebrow {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n }\r\n\r\n &__title {\r\n font-family: var(--at-heading-font);\r\n font-size: clamp(2.25rem, 4.5vw, 4.5rem);\r\n font-weight: 600;\r\n line-height: 1.06;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n max-width: 560px;\r\n }\r\n\r\n &__cta-btn {\r\n border-radius: 50px 0 0 50px;\r\n padding-inline: 27px;\r\n min-height: 50px;\r\n }\r\n\r\n &__cta-circle {\r\n width: 50px;\r\n min-width: 50px;\r\n height: 50px;\r\n background: #1D1D1D;\r\n border-radius: 50%;\r\n margin-left: 0;\r\n text-decoration: none;\r\n transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;\r\n\r\n &:hover {\r\n background: var(--at-theme-primary);\r\n color: var(--at-common-white);\r\n transform: translateY(-2px);\r\n }\r\n }\r\n\r\n &__photo {\r\n max-width: 493px;\r\n margin-inline: auto;\r\n aspect-ratio: 493 / 582;\r\n overflow: hidden;\r\n background: var(--at-neutral-300, #b7b7b7);\r\n\r\n img {\r\n display: block;\r\n }\r\n }\r\n\r\n // --- Accordion\r\n &__accordion {\r\n --sec5-acc-gap: 39px;\r\n }\r\n\r\n &__acc-item {\r\n margin-bottom: var(--sec5-acc-gap);\r\n background: transparent;\r\n border: 0;\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n }\r\n\r\n &__acc-btn {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n padding: 10px;\r\n font-size: 24px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n background: var(--at-neutral-0, #fefefe);\r\n border: solid var(--at-neutral-100, #dfdfdf);\r\n border-width: 1px 0;\r\n border-radius: 0;\r\n box-shadow: none;\r\n\r\n &::after {\r\n display: none;\r\n }\r\n\r\n &:not(.collapsed) {\r\n background: var(--at-neutral-100, #dfdfdf);\r\n border-color: var(--at-neutral-100, #dfdfdf);\r\n color: var(--at-neutral-950, #0f0f0f);\r\n box-shadow: none;\r\n }\r\n\r\n &:focus {\r\n box-shadow: none;\r\n border-color: var(--at-neutral-100, #dfdfdf);\r\n }\r\n\r\n &.collapsed {\r\n background: var(--at-neutral-0, #fefefe);\r\n }\r\n }\r\n\r\n &__acc-title {\r\n flex: 1 1 auto;\r\n text-align: left;\r\n min-width: 0;\r\n }\r\n\r\n &__acc-toggle {\r\n flex-shrink: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 12px;\r\n height: 12px;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n &__acc-plus {\r\n display: block;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n &__acc-btn:not(.collapsed) .sec-5-home-7__acc-plus {\r\n transform: rotate(45deg);\r\n }\r\n\r\n &__acc-body {\r\n padding: 0 10px 0;\r\n border: 0;\r\n background: transparent;\r\n }\r\n\r\n &__acc-text {\r\n max-width: 420px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 1.5;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n &__tag {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 10.5px 19px;\r\n border-radius: 32px;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: -0.02em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n // --- Throwable area (scoped layout; physics from throwable.js)\r\n &__throw {\r\n .client-capsule-wrapper {\r\n margin-top: 0;\r\n height: 420px;\r\n\r\n @media (min-width: 992px) {\r\n height: 520px;\r\n }\r\n\r\n @media (min-width: 1400px) {\r\n height: 580px;\r\n }\r\n }\r\n\r\n .client-box--brand-h7 {\r\n background-color: var(--at-theme-primary);\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-6-home-7 (The Process — Growth Engine)\r\n/*----------------------------------------*/\r\n\r\n.sec-6-home-7 {\r\n position: relative;\r\n border-top: 1px solid var(--at-neutral-100, #dfdfdf);\r\n\r\n // --- Header ------------------------------------------------------------\r\n &__eyebrow {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n\r\n svg {\r\n transition: transform .35s ease;\r\n }\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n\r\n svg {\r\n transform: translate(2px, -2px);\r\n }\r\n }\r\n }\r\n\r\n &__title {\r\n font-family: var(--at-heading-font);\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: clamp(2.5rem, 5.5vw, 4.5rem); // 40px → 72px\r\n font-weight: 600;\r\n line-height: 1.05;\r\n letter-spacing: -0.05em;\r\n }\r\n\r\n &__desc {\r\n max-width: 494px;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: 18px;\r\n font-weight: 600;\r\n line-height: 1.45;\r\n letter-spacing: -0.05em;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n font-size: 16px;\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n // --- Waterfall staircase chips -----------------------------------------\r\n //\r\n // The four chips cascade both horizontally and vertically, each step\r\n // shifting down 65px and starting from a different x% within the row.\r\n // The widths/offsets are percentages of the container for fluid scaling\r\n // on desktop; on < lg viewports we hide them (d-none d-lg-flex).\r\n &__chips {\r\n gap: 10px;\r\n // Container must be as wide as the last chip's end so alignment works.\r\n width: 100%;\r\n }\r\n\r\n &__chip {\r\n display: inline-flex;\r\n align-items: center;\r\n height: 55px;\r\n padding: 0 30px;\r\n background: var(--at-neutral-950, #0f0f0f);\r\n color: var(--at-neutral-0, #fefefe);\r\n overflow: hidden;\r\n\r\n // Subtle hover lift — makes the stepper feel interactive without\r\n // stealing focus from the cards below.\r\n transition: transform .35s ease, background .35s ease;\r\n\r\n &:hover {\r\n background: var(--at-theme-primary);\r\n transform: translateX(4px);\r\n }\r\n\r\n // Percentages derived artboard:\r\n // chip-1: x 0, w 345 → 0% / 20.06%\r\n // chip-2: x 243, w 515 → 14.13% / 29.94%\r\n // chip-3: x 619, w 784 → 35.99% / 45.58%\r\n // chip-4: x 1108, w 612 → 64.42% / 35.58%\r\n &--1 {\r\n margin-left: 0;\r\n width: 20.06%;\r\n min-width: 280px;\r\n }\r\n\r\n &--2 {\r\n margin-left: 14.13%;\r\n width: 29.94%;\r\n min-width: 300px;\r\n }\r\n\r\n &--3 {\r\n margin-left: 35.99%;\r\n width: 45.58%;\r\n min-width: 340px;\r\n }\r\n\r\n &--4 {\r\n margin-left: 64.42%;\r\n width: 35.58%;\r\n min-width: 300px;\r\n }\r\n }\r\n\r\n &__chip-text {\r\n font-family: var(--at-heading-font);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n }\r\n\r\n // --- Process cards -----------------------------------------------------\r\n &__cards {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 30px;\r\n\r\n @media #{$xl} {\r\n gap: 24px;\r\n }\r\n\r\n @media #{$lg} {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n @media #{$md} {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n }\r\n\r\n &__card-wrap {\r\n min-width: 0;\r\n }\r\n\r\n &__card {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n height: 100%;\r\n min-height: 487px;\r\n padding: 51px 52px;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n border-radius: 8px;\r\n background: var(--at-neutral-0, #fefefe);\r\n overflow: hidden;\r\n transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease;\r\n\r\n &:hover {\r\n border-color: var(--at-neutral-300, #b7b7b7);\r\n transform: translateY(-4px);\r\n box-shadow: 0 20px 40px -20px rgba(15, 15, 15, 0.12);\r\n\r\n .sec-6-home-7__card-media img {\r\n transform: scale(1.06);\r\n }\r\n }\r\n\r\n @media #{$xl,$lg} {\r\n min-height: 440px;\r\n padding: 40px 36px;\r\n }\r\n\r\n @media #{$md,$sm} {\r\n min-height: 420px;\r\n padding: 36px 32px;\r\n }\r\n\r\n @media #{$xs} {\r\n min-height: auto;\r\n padding: 32px 24px;\r\n }\r\n }\r\n\r\n &__card-body {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 17px;\r\n margin-bottom: 24px;\r\n }\r\n\r\n &__card-num {\r\n font-family: var(--at-heading-font);\r\n font-size: 24px;\r\n font-weight: 600;\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-300, #b7b7b7);\r\n }\r\n\r\n &__card-title {\r\n font-family: var(--at-heading-font);\r\n font-size: 24px;\r\n font-weight: 600;\r\n line-height: 1.15;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__card-desc {\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 1.45;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__card-media {\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 305 / 185;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n background: var(--at-neutral-100, #dfdfdf);\r\n\r\n img {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n filter: grayscale(0%);\r\n transition: transform .6s ease, filter .4s ease;\r\n }\r\n\r\n &:hover {\r\n img {\r\n\r\n filter: grayscale(100%);\r\n transition: transform .6s ease, filter .4s ease;\r\n }\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-7-home-7 (CTA — Ready to Build the Future?)\r\n/*----------------------------------------*/\r\n\r\n.sec-7-home-7 {\r\n position: relative;\r\n background: #7f0b01;\r\n color: #fefefe;\r\n\r\n &__media {\r\n width: 100%;\r\n max-width: 798px;\r\n aspect-ratio: 1 / 1;\r\n overflow: hidden;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n }\r\n\r\n &__eyebrow {\r\n color: #fefefe;\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n }\r\n\r\n &__headline {\r\n font-family: var(--at-heading-font);\r\n font-size: 48px;\r\n font-weight: 600;\r\n line-height: 52px;\r\n letter-spacing: -0.05em;\r\n color: #fefefe;\r\n max-width: 650px;\r\n\r\n @media #{$lg,$md} {\r\n font-size: 40px;\r\n line-height: 1.15;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n font-size: 32px;\r\n line-height: 1.2;\r\n }\r\n }\r\n\r\n &__features {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 16px 39px;\r\n max-width: 560px;\r\n\r\n @media #{$sm,$xs} {\r\n grid-template-columns: 1fr;\r\n gap: 14px;\r\n }\r\n }\r\n\r\n &__feature {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n color: #fefefe;\r\n margin: 0;\r\n }\r\n\r\n &__cta-btn {\r\n background: var(--at-theme-primary, #f0460e);\r\n border-radius: 50px 0 0 50px;\r\n padding-inline: 27px;\r\n min-height: 50px;\r\n }\r\n\r\n &__cta-circle {\r\n width: 50px;\r\n min-width: 50px;\r\n height: 50px;\r\n background: var(--at-theme-primary, #f0460e);\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: transform 0.35s ease, background 0.35s ease;\r\n\r\n &:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n img {\r\n display: block;\r\n }\r\n }\r\n\r\n &__star {\r\n position: absolute;\r\n right: 100px;\r\n bottom: 120px;\r\n width: 100px;\r\n height: 100px;\r\n pointer-events: none;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n animation: sec7Home7Spin 12s linear infinite;\r\n }\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n right: 24px;\r\n bottom: 24px;\r\n opacity: 0.9;\r\n }\r\n }\r\n}\r\n\r\n@keyframes sec7Home7Spin {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-8-home-7 (Team — Dedicated Team + Staggered Portrait Grid)\r\n/*----------------------------------------*/\r\n\r\n.sec-8-home-7 {\r\n position: relative;\r\n padding: 120px 0;\r\n\r\n @media #{$xl,$lg,$md} {\r\n padding: 90px 0;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n padding: 60px 0;\r\n }\r\n\r\n // --- Left column (lead) ------------------------------------------------\r\n &__lead {\r\n padding-top: 60px;\r\n\r\n @media #{$xl} {\r\n padding-top: 40px;\r\n }\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n padding-top: 0;\r\n }\r\n }\r\n\r\n &__eyebrow {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n\r\n svg {\r\n transition: transform .35s ease;\r\n }\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n\r\n svg {\r\n transform: translate(2px, -2px);\r\n }\r\n }\r\n }\r\n\r\n // Huge display heading: spec is DM Sans Medium 124px / 124 line-height.\r\n &__heading {\r\n font-family: var(--at-heading-font);\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: clamp(3.5rem, 8.5vw, 7.75rem); // 56px → 124px\r\n font-weight: 500;\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n\r\n // On desktop the phrase intentionally wraps to 2 lines (\"Dedicated\" /\r\n // \"Team\"). Cap width so the break happens naturally around 600px.\r\n max-width: 600px;\r\n\r\n @media #{$lg,$md,$sm,$xs} {\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n &__desc {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: 32px;\r\n font-weight: 400;\r\n line-height: 1.25;\r\n letter-spacing: -0.05em;\r\n max-width: 605px;\r\n\r\n @media #{$xl} {\r\n font-size: 26px;\r\n }\r\n\r\n @media #{$lg,$md} {\r\n font-size: 22px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n font-size: 18px;\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n // --- CTA: \"Join our Team\" pill + separate arrow pill ------------------\r\n &__cta-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n height: 50px;\r\n padding: 0 27px;\r\n border-radius: 50px;\r\n background: var(--at-neutral-900, #1d1d1d);\r\n color: var(--at-neutral-0, #fefefe);\r\n font-family: var(--at-heading-font);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n text-decoration: none;\r\n transition: background .35s ease, color .35s ease, transform .35s ease;\r\n\r\n &:hover {\r\n background: var(--at-theme-primary);\r\n color: var(--at-common-white);\r\n transform: translateX(2px);\r\n }\r\n }\r\n\r\n &__cta-arrow {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n background: var(--at-neutral-900, #1d1d1d);\r\n color: var(--at-neutral-0, #fefefe);\r\n transition: background .35s ease, transform .35s ease;\r\n\r\n svg {\r\n width: 20px;\r\n height: 20px;\r\n display: block;\r\n transition: transform .35s ease;\r\n }\r\n\r\n &:hover {\r\n background: var(--at-theme-primary);\r\n transform: rotate(-15deg);\r\n\r\n svg {\r\n transform: scale(1.1);\r\n }\r\n }\r\n }\r\n\r\n // --- Right column: staggered 2-col grid --------------------------------\r\n &__grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 30px;\r\n align-items: start;\r\n\r\n @media #{$md} {\r\n gap: 24px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n grid-template-columns: 1fr;\r\n gap: 24px;\r\n }\r\n }\r\n\r\n &__col {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 40px;\r\n\r\n @media #{$md} {\r\n gap: 24px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n gap: 24px;\r\n }\r\n\r\n // Right column offsets down\r\n // (col 1 top = 140, col 2 top = 242).\r\n &--offset {\r\n @media (min-width: 992px) {\r\n margin-top: 100px;\r\n }\r\n }\r\n }\r\n\r\n // --- Card --------------------------------------------------------------\r\n &__card {\r\n position: relative;\r\n display: block;\r\n width: 100%;\r\n aspect-ratio: 407 / 549;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--at-neutral-100, #dfdfdf);\r\n text-decoration: none;\r\n isolation: isolate;\r\n\r\n &:hover {\r\n .sec-8-home-7__photo img {\r\n transform: scale(1.05);\r\n }\r\n\r\n .sec-8-home-7__badge {\r\n transform: translate(2px, -2px);\r\n }\r\n }\r\n }\r\n\r\n &__photo {\r\n position: absolute;\r\n inset: 0;\r\n overflow: hidden;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center top;\r\n transition: transform .7s ease;\r\n }\r\n }\r\n\r\n // Gradient fade + subtle backdrop blur\n // [2.985px] bg-gradient rgba(26,26,26,0) → #1a1a1a\" overlay.\r\n &__info {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n padding: 38px 40px 40px;\r\n height: 38%;\r\n color: var(--at-common-white, #fefefe);\r\n background: linear-gradient(\r\n to bottom,\r\n rgba(26, 26, 26, 0) 0%,\r\n rgba(26, 26, 26, 0.55) 45%,\r\n rgba(26, 26, 26, 1) 100%\r\n );\r\n backdrop-filter: blur(3px);\r\n -webkit-backdrop-filter: blur(3px);\r\n mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);\r\n -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n gap: 12px;\r\n pointer-events: none;\r\n\r\n @media #{$md,$sm,$xs} {\r\n padding: 28px 30px 30px;\r\n }\r\n }\r\n\r\n &__name {\r\n font-family: var(--at-heading-font);\r\n font-size: 32px;\r\n font-weight: 600;\r\n line-height: 1.15;\r\n letter-spacing: -0.05em;\r\n color: #fefefe;\r\n\r\n @media #{$xl,$lg} {\r\n font-size: 28px;\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n font-size: 26px;\r\n }\r\n }\r\n\r\n &__role {\r\n font-family: var(--at-heading-font);\r\n font-size: 18px;\r\n font-weight: 500;\r\n line-height: 1.3;\r\n letter-spacing: -0.02em;\r\n opacity: 0.8;\r\n color: #fefefe;\r\n }\r\n\r\n // --- Arrow badge (top-right of every card) ----------------------------\r\n &__badge {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: var(--at-neutral-0, #fefefe);\r\n color: var(--at-neutral-900, #1d1d1d);\r\n transition: transform .35s ease, background .35s ease, color .35s ease;\r\n z-index: 2;\r\n\r\n svg {\r\n width: 15px;\r\n height: 14px;\r\n display: block;\r\n }\r\n\r\n &--dark {\r\n background: var(--at-neutral-900, #1d1d1d);\r\n color: var(--at-neutral-0, #fefefe);\r\n }\r\n }\r\n}\r\n","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-9-home-7 (Marquee — carouselTicker + GSAP scroll-move)\r\n/* Structure mirrors Home 3 sec-2: .carouselTicker > ul.carouselTicker__list\r\n/*----------------------------------------*/\r\n\r\n.sec-9-home-7 {\r\n background: #0f0f0f;\r\n padding: 40px 0;\r\n overflow: hidden;\r\n\r\n @media #{$md,$sm,$xs} {\r\n padding: 28px 0;\r\n }\r\n\r\n // Inner wrapper (matches Home 3: bg + carouselTicker on same node)\r\n &__ticker {\r\n background: #0f0f0f;\r\n }\r\n\r\n &__row {\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n }\r\n\r\n &__list {\r\n gap: 31px !important;\r\n white-space: nowrap;\r\n\r\n @media #{$md,$sm,$xs} {\r\n gap: 18px !important;\r\n }\r\n }\r\n\r\n &__item {\r\n font-family: var(--at-heading-font);\r\n font-size: 48px;\r\n font-weight: 600;\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-0, #fefefe);\r\n flex-shrink: 0;\r\n\r\n @media #{$xl,$lg} {\r\n font-size: 42px;\r\n }\r\n\r\n @media #{$md} {\r\n font-size: 32px;\r\n line-height: 1;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n font-size: 24px;\r\n line-height: 40px;\r\n }\r\n\r\n &--sm {\r\n font-size: 36px;\r\n letter-spacing: -0.05em;\r\n text-transform: none;\r\n\r\n @media #{$xl,$lg} {\r\n font-size: 32px;\r\n }\r\n\r\n @media #{$md} {\r\n font-size: 26px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n font-size: 20px;\r\n }\r\n }\r\n }\r\n\r\n &__sep {\r\n flex-shrink: 0;\r\n width: 40px;\r\n height: 40px;\r\n flex: 0 0 40px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n width: 28px;\r\n height: 28px;\r\n flex-basis: 28px;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-10-home-7 (Insights for Founders — blog grid)\r\n/*----------------------------------------*/\r\n\r\n.sec-10-home-7 {\r\n &__eyebrow {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n\r\n svg {\r\n transition: transform .35s ease;\r\n }\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n\r\n svg {\r\n transform: translate(2px, -2px);\r\n }\r\n }\r\n }\r\n\r\n &__title {\r\n font-family: var(--at-heading-font);\r\n font-size: clamp(2.5rem, 5vw, 4rem); // 40px → 64px\r\n font-weight: 600;\r\n line-height: 1.12;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n max-width: 400px;\r\n }\r\n\r\n &__lead {\r\n font-family: var(--at-heading-font);\r\n font-size: 20px;\r\n font-weight: 500;\r\n line-height: 1.4;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n max-width: 720px;\r\n\r\n @media #{$sm,$xs} {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n &__btn-all {\r\n height: 50px;\r\n padding: 0 27px;\r\n border-radius: 50px;\r\n background: var(--at-neutral-900, #1d1d1d);\r\n color: var(--at-neutral-0, #fefefe);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n transition: background .35s ease, color .35s ease, transform .35s ease;\r\n\r\n &:hover {\r\n background: var(--at-theme-primary);\r\n color: var(--at-common-white);\r\n transform: translateY(-2px);\r\n }\r\n }\r\n\r\n // Staggered image heights (per column)\r\n &__grid {\r\n .blog-card__thumb {\r\n overflow: hidden;\r\n }\r\n\r\n .blog-card__thumb img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n @media (min-width: 992px) {\r\n > div:nth-child(1) .blog-card__thumb {\r\n height: 360px;\r\n }\r\n\r\n > div:nth-child(2) .blog-card__thumb {\r\n height: 298px;\r\n }\r\n\r\n > div:nth-child(3) .blog-card__thumb {\r\n height: 396px;\r\n }\r\n\r\n > div:nth-child(4) .blog-card__thumb {\r\n height: 329px;\r\n }\r\n }\r\n\r\n @media #{$md,$sm,$xs} {\r\n .blog-card__thumb {\r\n height: 280px;\r\n }\r\n }\r\n }\r\n\r\n // Design: Lucas (4th card) — author name in brand primary\r\n &__grid > div:nth-child(4) .blog-card__author {\r\n color: var(--at-theme-primary);\r\n\r\n &:hover {\r\n color: var(--at-neutral-900);\r\n }\r\n }\r\n}\r\n","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-11-home-7 (Get in touch — contact form)\r\n/*----------------------------------------*/\r\n\r\n.sec-11-home-7 {\r\n background: var(--at-neutral-50, #f2f2f2);\r\n\r\n &__eyebrow {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n }\r\n\r\n &__title {\r\n font-family: var(--at-heading-font);\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n font-weight: 600;\r\n line-height: 1.12;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n max-width: 520px;\r\n }\r\n\r\n &__form {\r\n max-width: 720px;\r\n\r\n .sec-4-about-form__textarea {\r\n min-height: 192px;\r\n resize: vertical;\r\n }\r\n }\r\n}\r\n","@use '../../utils' as *;\r\n\r\n/*------------------------------------------------------------------\r\n Home 8 — Section 1: Hero\r\n------------------------------------------------------------------*/\r\n\r\n.sec-1-home-8 {\r\n background-color: var(--at-neutral-0);\r\n\r\n // -------------------------------------------------------\r\n // Decorative column guide lines (6 pairs, ~278 px apart)\r\n // -------------------------------------------------------\r\n .h8-grid-lines {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n pointer-events: none;\r\n\r\n // Two hairlines 5 px apart, then a 273 px transparent gap\r\n background-image: repeating-linear-gradient(to right,\r\n var(--at-neutral-100) 0px,\r\n var(--at-neutral-100) 1px,\r\n transparent 1px,\r\n transparent 5px,\r\n var(--at-neutral-100) 5px,\r\n var(--at-neutral-100) 6px,\r\n transparent 6px,\r\n transparent 278px);\r\n background-size: 278px 100%;\r\n // Offset so first pair aligns with the container's first column edge\r\n background-position: 265px 0;\r\n }\r\n\r\n // -------------------------------------------------------\r\n // Container — mirrors the 100 px horizontal padding\r\n // -------------------------------------------------------\r\n .h8-container {\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n // -------------------------------------------------------\r\n // Row 1: headline + photos-top\r\n // -------------------------------------------------------\r\n .h8-row-1 {\r\n padding-top: clamp(130px, 9.5vw, 185px); // clear the transparent header\r\n padding-bottom: clamp(30px, 3vw, 55px);\r\n }\r\n\r\n .h8-col-left {\r\n display: flex;\r\n align-items: flex-start;\r\n }\r\n\r\n // Badge + headline sit side-by-side on xl+\r\n .h8-headline-group {\r\n gap: clamp(20px, 2.9vw, 55px);\r\n align-items: flex-start;\r\n }\r\n\r\n // -------------------------------------------------------\r\n // \"Let's Talk\" blob badge\r\n // -------------------------------------------------------\r\n .h8-badge {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: clamp(80px, 7.34vw, 141px);\r\n height: clamp(80px, 7.34vw, 141px);\r\n flex-shrink: 0;\r\n text-decoration: none;\r\n transition: transform 0.3s ease;\r\n\r\n &:hover {\r\n transform: scale(1.06);\r\n }\r\n\r\n &__bg {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n &__inner {\r\n position: relative;\r\n z-index: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 7px;\r\n color: #fff;\r\n\r\n span {\r\n font-size: clamp(10px, 0.83vw, 16px);\r\n font-weight: 700;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n }\r\n\r\n svg {\r\n width: clamp(10px, 0.73vw, 14px);\r\n height: auto;\r\n }\r\n }\r\n }\r\n\r\n // -------------------------------------------------------\r\n // Outline / stroke headline\r\n // -------------------------------------------------------\r\n .h8-headline {\r\n font-size: clamp(32px, 3.33vw, 64px);\r\n font-weight: 600;\r\n line-height: 1.125;\r\n letter-spacing: 0;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-0);\r\n -webkit-text-stroke: 1.5px var(--at-neutral-950);\r\n paint-order: stroke fill;\r\n max-width: clamp(280px, 35.7vw, 686px);\r\n }\r\n\r\n // -------------------------------------------------------\r\n // Right column (photos top set)\r\n // -------------------------------------------------------\r\n .h8-col-right {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: flex-end;\r\n }\r\n\r\n // -------------------------------------------------------\r\n // Photo trios (shared styles for both rows)\r\n // -------------------------------------------------------\r\n .h8-photos {\r\n gap: clamp(16px, 4.3vw, 82px);\r\n align-items: flex-start;\r\n }\r\n\r\n .h8-photo-box {\r\n width: clamp(100px, 10.1vw, 194px);\r\n overflow: hidden;\r\n flex-shrink: 0;\r\n will-change: transform;\r\n\r\n img {\r\n width: 100%;\r\n height: clamp(130px, 12.76vw, 245px);\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n // Middle photo in top set is slightly shorter and pushed down\r\n &.h8-photo-down img {\r\n height: clamp(112px, 11.2vw, 215px);\r\n margin-top: clamp(8px, 0.78vw, 15px);\r\n }\r\n }\r\n\r\n // -------------------------------------------------------\r\n // Row 2: photos-bottom + stats\r\n // -------------------------------------------------------\r\n .h8-row-2 {\r\n padding-bottom: clamp(50px, 5vw, 0px);\r\n }\r\n\r\n .h8-col-left-2 {\r\n display: flex;\r\n align-items: flex-start;\r\n }\r\n\r\n .h8-col-right-2 {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: flex-end;\r\n padding-top: clamp(20px, 2vw, 30px);\r\n }\r\n\r\n // -------------------------------------------------------\r\n // Statistics\r\n // -------------------------------------------------------\r\n .h8-stats {\r\n gap: clamp(24px, 3.8vw, 73px);\r\n }\r\n\r\n .h8-stat {\r\n &-num {\r\n font-size: clamp(56px, 6.46vw, 124px);\r\n font-weight: 500;\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900);\r\n margin-bottom: clamp(8px, 0.5vw, 12px);\r\n\r\n // Override global .odometer letter-spacing from _custom.scss\r\n .odometer {\r\n letter-spacing: -0.05em;\r\n }\r\n }\r\n\r\n &-desc {\r\n font-size: clamp(14px, 1.25vw, 24px);\r\n font-weight: 500;\r\n letter-spacing: -0.05em;\r\n line-height: 1.4;\r\n color: var(--at-neutral-900);\r\n max-width: clamp(180px, 17vw, 326px);\r\n margin-bottom: 0;\r\n }\r\n }\r\n\r\n // -------------------------------------------------------\r\n // Bottom band: oversized \"ORISA® / STUDIO\" type\r\n // -------------------------------------------------------\r\n .h8-bottom-band {\r\n position: relative;\r\n z-index: 1;\r\n overflow: hidden;\r\n padding-top: 70px;\r\n }\r\n\r\n .h8-big-title {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: clamp(6px, 1.5vw, 24px);\r\n font-size: clamp(52px, 12.5vw, 240px);\r\n font-weight: 800;\r\n line-height: 1.05;\r\n letter-spacing: -0.07em;\r\n text-transform: uppercase;\r\n color: var(--at-theme-primary);\r\n white-space: nowrap;\r\n padding: clamp(8px, 1vw, 20px) 0 clamp(10px, 1.2vw, 24px);\r\n margin-bottom: 0;\r\n }\r\n\r\n .h8-registered {\r\n font-size: 0.22em;\r\n vertical-align: super;\r\n line-height: 1;\r\n color: var(--at-theme-primary);\r\n font-style: normal;\r\n }\r\n\r\n // Parallelogram-clipped portrait image\r\n .h8-portrait-frame {\r\n display: inline-block;\r\n width: clamp(60px, 10.6vw, 204px);\r\n height: clamp(55px, 9.74vw, 187px);\r\n overflow: hidden;\r\n flex-shrink: 0;\r\n // Parallelogram shape vector\r\n clip-path: polygon(25.35% 0%, 100% 0%, 74.65% 100%, 0% 100%);\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center top;\r\n display: block;\r\n pointer-events: none;\r\n }\r\n }\r\n\r\n // Bottom metadata bar (email | coordinates)\r\n .h8-bottom-meta {\r\n padding: clamp(8px, 0.8vw, 16px) clamp(20px, 5.2vw, 100px) clamp(24px, 2vw, 40px);\r\n\r\n svg {\r\n color: var(--at-neutral-900);\r\n flex-shrink: 0;\r\n }\r\n }\r\n\r\n .h8-meta-text {\r\n font-size: clamp(12px, 1.46vw, 28px);\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-900);\r\n white-space: nowrap;\r\n }\r\n\r\n // -------------------------------------------------------\r\n // Responsive: tablet & below\r\n // -------------------------------------------------------\r\n @media (max-width: 1199px) {\r\n\r\n .h8-col-right,\r\n .h8-col-right-2 {\r\n justify-content: flex-start;\r\n margin-top: 30px;\r\n }\r\n\r\n .h8-photos {\r\n flex-wrap: wrap;\r\n overflow: visible;\r\n }\r\n\r\n .h8-big-title {\r\n flex-wrap: wrap;\r\n white-space: normal;\r\n text-align: center;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n // Tablet (iPad ~820px): prevent horizontal scrolling photo strip,\r\n // use a tidy 3-column grid for each photo trio.\r\n @media (min-width: 768px) and (max-width: 1199px) {\r\n .h8-photos {\r\n display: grid;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap: 18px;\r\n width: 100%;\r\n }\r\n\r\n .h8-photo-box {\r\n width: auto;\r\n }\r\n\r\n .h8-photo-box img {\r\n height: clamp(160px, 22vw, 210px);\r\n }\r\n\r\n .h8-photo-box.h8-photo-down img {\r\n height: clamp(150px, 20vw, 198px);\r\n margin-top: 0;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .h8-headline-group {\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n\r\n .h8-stats {\r\n flex-direction: column;\r\n gap: 30px;\r\n }\r\n\r\n .h8-photos {\r\n gap: 12px;\r\n }\r\n\r\n .h8-big-title {\r\n font-size: clamp(40px, 10vw, 80px);\r\n letter-spacing: -0.05em;\r\n }\r\n\r\n .h8-portrait-frame {\r\n display: none;\r\n }\r\n\r\n .h8-bottom-meta {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 8px;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* Home 8 — Section 2 (Orange marquee — carouselTicker-left)\r\n/* Brand-1 bar, 32px semibold white, 20px gap, 16px star\r\n/*----------------------------------------*/\r\n\r\n.sec-2-home-8 {\r\n overflow: hidden;\r\n\r\n &__row {\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n }\r\n\r\n &__ticker {\r\n background-color: var(--at-theme-primary);\r\n }\r\n\r\n &__list {\r\n gap: 20px !important;\r\n white-space: nowrap;\r\n\r\n @media #{$md,$sm,$xs} {\r\n gap: 16px !important;\r\n }\r\n }\r\n\r\n &__item {\r\n font-family: var(--at-heading-font);\r\n font-size: 32px;\r\n font-weight: 600;\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-0);\r\n flex-shrink: 0;\r\n\r\n @media #{$md} {\r\n font-size: 26px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n font-size: 20px;\r\n }\r\n }\r\n\r\n &__sep {\r\n flex-shrink: 0;\r\n width: 16px;\r\n height: 16px;\r\n flex: 0 0 16px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n object-fit: contain;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n width: 14px;\r\n height: 14px;\r\n flex-basis: 14px;\r\n }\r\n }\r\n\r\n // Ruled accent strip (~28px) — thin orange lines on page background\r\n &__rules {\r\n height: 28px;\r\n width: 100%;\r\n background-color: var(--at-neutral-0);\r\n background-image: linear-gradient(to bottom,\r\n var(--at-theme-primary) 0,\r\n var(--at-theme-primary) 1px,\r\n transparent 1px,\r\n transparent 6px,\r\n var(--at-theme-primary) 6px,\r\n var(--at-theme-primary) 7px,\r\n transparent 7px,\r\n transparent 11px,\r\n var(--at-theme-primary) 11px,\r\n var(--at-theme-primary) 12px,\r\n transparent 12px,\r\n transparent 15px,\r\n var(--at-theme-primary) 15px,\r\n var(--at-theme-primary) 16px,\r\n transparent 16px,\r\n transparent 19px,\r\n var(--at-theme-primary) 19px,\r\n var(--at-theme-primary) 20px,\r\n transparent 20px);\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*------------------------------------------------------------------\r\n Home 8 — Section 3 (About block + staggered photos)\r\n------------------------------------------------------------------*/\r\n\r\n.sec-3-home-8 {\r\n background-color: var(--at-neutral-0);\r\n padding-top: clamp(60px, 5.9vw, 113px);\r\n padding-bottom: clamp(60px, 7.5vw, 145px);\r\n\r\n &__container {\r\n padding-left: clamp(20px, 4.5vw, 86px);\r\n padding-right: clamp(20px, 4.5vw, 86px);\r\n }\r\n\r\n &__title {\r\n font-size: clamp(40px, 4.375vw, 84px);\r\n font-weight: 600;\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-950);\r\n max-width: 644px;\r\n margin-bottom: clamp(24px, 2.1vw, 40px);\r\n }\r\n\r\n &__title-accent {\r\n color: var(--at-theme-primary);\r\n }\r\n\r\n &__lead {\r\n font-size: clamp(18px, 1.25vw, 24px);\r\n font-weight: 500;\r\n line-height: 1.3;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-950);\r\n max-width: 600px;\r\n margin-bottom: clamp(28px, 2.2vw, 40px);\r\n }\r\n\r\n &__tags {\r\n gap: 6px;\r\n max-width: 360px;\r\n }\r\n\r\n &__tag {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 10.5px 19px;\r\n border: 1px solid var(--at-neutral-100);\r\n border-radius: 32px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: -0.02em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-900);\r\n line-height: 1;\r\n }\r\n\r\n &__media {\r\n gap: clamp(16px, 1.56vw, 30px);\r\n }\r\n\r\n &__photo {\r\n overflow: hidden;\r\n flex-shrink: 0;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n &--narrow {\r\n width: min(100%, 334px);\r\n height: clamp(220px, 19.4vw, 373px);\r\n margin-top: clamp(32px, 4.8vw, 92px);\r\n }\r\n\r\n &--wide {\r\n width: min(100%, 407px);\r\n height: clamp(280px, 24.2vw, 465px);\r\n }\r\n }\r\n\r\n\r\n\r\n @media (max-width: 991px) {\r\n .sec-3-home-8__media {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .sec-3-home-8__photo--narrow {\r\n margin-top: 0;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* Home 8 — Section 4 (Services + Home 1 sec-4 GSAP hover stack)\r\n/*----------------------------------------*/\r\n\r\n.sec-4-home-8 {\r\n background-color: var(--at-neutral-0);\r\n border-top: 1px solid var(--at-neutral-100);\r\n position: relative;\r\n\r\n &__top {\r\n width: 100%;\r\n }\r\n\r\n &__kicker {\r\n font-size: 16px;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900);\r\n }\r\n\r\n &__kicker-icon {\r\n display: inline-flex;\r\n color: var(--at-neutral-900);\r\n line-height: 0;\r\n }\r\n\r\n &__since {\r\n color: var(--at-neutral-900);\r\n }\r\n\r\n &__card {\r\n overflow: hidden;\r\n padding-bottom: clamp(20px, 2vw, 28px);\r\n }\r\n\r\n // Taller preview (~410px image band)\r\n &__img-stack {\r\n height: 410px;\r\n margin-bottom: clamp(16px, 1.8vw, 24px);\r\n\r\n @media #{$sm,$xs} {\r\n height: 300px;\r\n }\r\n\r\n .hover-image img {\r\n border-radius: 0;\r\n }\r\n }\r\n\r\n &__caption {\r\n color: var(--at-neutral-950);\r\n letter-spacing: -0.02em;\r\n line-height: 1.4;\r\n padding-left: clamp(16px, 2vw, 24px);\r\n padding-right: clamp(16px, 2vw, 24px);\r\n }\r\n\r\n &__deco {\r\n display: flex;\r\n justify-content: flex-end;\r\n padding-right: clamp(16px, 4vw, 48px);\r\n position: absolute;\r\n top: 60%;\r\n left: 30%;\r\n\r\n // Same cube stack as Home 1 sec-2; reset global translateY from _about.scss for this card\r\n .at-about-svg-wrap {\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n &__list-wrap {\r\n .at-service-item {\r\n padding-top: 34px;\r\n padding-bottom: 34px;\r\n grid-template-columns: 80px 1fr 300px;\r\n gap: 15px 45px;\r\n\r\n @media #{$lg,$md} {\r\n grid-template-columns: 70px 1fr 240px;\r\n gap: 12px 24px;\r\n }\r\n\r\n @media #{$sm,$xs} {\r\n grid-template-columns: 1fr;\r\n padding-top: 24px;\r\n padding-bottom: 24px;\r\n }\r\n\r\n .number {\r\n font-size: 24px;\r\n letter-spacing: -0.05em;\r\n }\r\n\r\n .content .title {\r\n font-size: clamp(40px, 4.6vw, 72px);\r\n line-height: 1.05;\r\n letter-spacing: -0.05em;\r\n opacity: 1;\r\n }\r\n\r\n .content .text {\r\n opacity: 1;\r\n max-height: none;\r\n font-size: 20px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n max-width: 480px;\r\n color: var(--at-neutral-900);\r\n }\r\n\r\n .thumb img {\r\n border-radius: 0;\r\n max-width: 190px;\r\n width: 190px;\r\n height: 115px;\r\n object-fit: cover;\r\n transition: transform 0.35s ease, filter 0.35s ease;\r\n }\r\n\r\n // Default inactive row: muted index\r\n &:not(.active):not(:hover) .number {\r\n color: var(--at-neutral-500);\r\n opacity: 0.3;\r\n }\r\n\r\n &.active .number,\r\n &:hover .number {\r\n color: var(--at-theme-primary);\r\n opacity: 1;\r\n }\r\n\r\n // First row: larger thumbnail\r\n &:first-child .thumb img,\r\n &:first-child:hover .thumb img {\r\n max-width: 284px;\r\n width: 284px;\r\n height: 174px;\r\n }\r\n\r\n // Rows 2–4: keep compact thumb even on hover\r\n &:not(:first-child):hover .thumb img {\r\n max-width: 190px;\r\n width: 190px;\r\n height: 115px;\r\n }\r\n }\r\n\r\n // Hover on the whole should animate the thumbnail image.\r\n // This is scoped here (not nested inside img) to avoid incorrect \"&\" expansion.\r\n a:hover .at-service-item .thumb {\r\n overflow: hidden;\r\n }\r\n\r\n a:hover .at-service-item .thumb img {\r\n transform: scale(1.06);\r\n filter: brightness(1.08);\r\n will-change: transform, filter;\r\n }\r\n }\r\n\r\n\r\n}","@use '../../utils' as *;\r\n\r\n/*------------------------------------------------------------------\r\n Home 8 — Section 6 (Selected works)\r\n------------------------------------------------------------------*/\r\n\r\n.sec-6-home-8 {\r\n background-color: var(--at-neutral-50);\r\n padding-top: clamp(70px, 6vw, 110px);\r\n padding-bottom: clamp(70px, 6vw, 110px);\r\n\r\n &__container {\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n }\r\n\r\n &__top {\r\n margin-bottom: clamp(28px, 3.2vw, 60px);\r\n }\r\n\r\n &__kicker {\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-900);\r\n }\r\n\r\n &__kicker-icon {\r\n display: inline-flex;\r\n color: var(--at-neutral-900);\r\n line-height: 0;\r\n }\r\n\r\n &__view-all {\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-900);\r\n text-decoration: underline;\r\n text-underline-offset: 3px;\r\n }\r\n\r\n &__grid {\r\n display: grid;\r\n gap: 30px;\r\n grid-template-columns: 408px 1fr 408px;\r\n grid-auto-rows: min-content;\r\n align-items: start;\r\n\r\n @media (max-width: 1399px) {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n &__card {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n text-decoration: none;\r\n color: inherit;\r\n will-change: transform;\r\n\r\n &:hover .sec-6-home-8__img img {\r\n transform: scale(1.06);\r\n filter: brightness(1.05);\r\n }\r\n }\r\n\r\n &__img {\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--at-neutral-200);\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.35s ease, filter 0.35s ease;\r\n }\r\n }\r\n\r\n &__meta {\r\n height: 88px;\r\n border-radius: 16px;\r\n background: var(--at-neutral-0);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 0 45px;\r\n overflow: hidden;\r\n }\r\n\r\n &__title {\r\n font-size: 36px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900);\r\n }\r\n\r\n &__plus {\r\n display: inline-flex;\r\n color: var(--at-neutral-900);\r\n line-height: 0;\r\n }\r\n\r\n // Sizes\r\n &__card--sm .sec-6-home-8__img {\r\n height: 320px;\r\n }\r\n\r\n &__card--md .sec-6-home-8__img {\r\n height: 350px;\r\n }\r\n\r\n &__card--lg .sec-6-home-8__img {\r\n height: 450px;\r\n }\r\n\r\n @media (min-width: 1441px) {\r\n\r\n // Sizes\r\n &__card--sm .sec-6-home-8__img {\r\n height: 358px;\r\n }\r\n\r\n &__card--md .sec-6-home-8__img {\r\n height: 632px;\r\n }\r\n\r\n &__card--lg .sec-6-home-8__img {\r\n height: 751px;\r\n }\r\n }\r\n\r\n // Desktop positioning to match the mosaic\r\n @media (min-width: 1400px) {\r\n &__card--lt {\r\n grid-column: 1;\r\n grid-row: 1;\r\n margin-top: 67px;\r\n }\r\n\r\n &__card--lb {\r\n grid-column: 1;\r\n grid-row: 3;\r\n margin-top: 0;\r\n }\r\n\r\n &__card--ct {\r\n grid-column: 2;\r\n grid-row: 1;\r\n }\r\n\r\n &__card--cm {\r\n grid-column: 2;\r\n grid-row: 2;\r\n margin-top: 52px;\r\n }\r\n\r\n &__card--cb {\r\n grid-column: 2;\r\n grid-row: 3;\r\n }\r\n\r\n &__card--rt {\r\n grid-column: 3;\r\n grid-row: 1;\r\n margin-top: 260px;\r\n }\r\n\r\n &__card--rb {\r\n grid-column: 3;\r\n grid-row: 3;\r\n margin-top: 0;\r\n }\r\n\r\n\r\n }\r\n\r\n\r\n\r\n @media (max-width: 767px) {\r\n &__grid {\r\n gap: 18px;\r\n }\r\n\r\n &__meta {\r\n padding: 0 18px;\r\n height: 70px;\r\n }\r\n\r\n &__title {\r\n font-size: 24px;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*------------------------------------------------------------------\r\n Home 8 — Section 7 (Image rails with scroll-move-right/left)\r\n------------------------------------------------------------------*/\r\n\r\n.sec-7-home-8 {\r\n background-color: var(--at-neutral-0);\r\n padding-top: clamp(70px, 6vw, 130px);\r\n padding-bottom: clamp(70px, 6vw, 130px);\r\n\r\n &__container {\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n }\r\n\r\n &__title {\r\n font-size: clamp(36px, 3.75vw, 72px);\r\n font-weight: 600;\r\n line-height: 1.05;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900);\r\n max-width: 920px;\r\n }\r\n\r\n &__cta {\r\n background: var(--at-neutral-900);\r\n }\r\n\r\n &__rails {\r\n margin-top: clamp(28px, 3.2vw, 55px);\r\n overflow: hidden;\r\n }\r\n\r\n &__rail {\r\n padding: 0;\r\n\r\n // Ensure the swiper fills width and looks like a rail\r\n .swiper {\r\n width: 100%;\r\n }\r\n\r\n .swiper-slide {\r\n width: auto;\r\n }\r\n\r\n .about-me-slider-thumb {\r\n overflow: hidden;\r\n border-radius: 16px;\r\n background: var(--at-neutral-300);\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n }\r\n }\r\n\r\n // Row 2: taller cards (780px)\r\n &__rail--reverse {\r\n margin-top: 30px;\r\n\r\n // Visual reverse direction without affecting image orientation\r\n transform: scaleX(-1);\r\n\r\n .swiper,\r\n .swiper-slide,\r\n .about-me-slider-thumb,\r\n img {\r\n transform: scaleX(-1);\r\n }\r\n }\r\n\r\n &__about {\r\n margin-top: clamp(34px, 3.8vw, 72px);\r\n justify-content: flex-end;\r\n max-width: 820px;\r\n margin-left: auto;\r\n }\r\n\r\n &__mark {\r\n flex: 0 0 83px;\r\n width: 83px;\r\n height: 83px;\r\n color: var(--at-neutral-900);\r\n }\r\n\r\n &__desc {\r\n font-size: 36px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n line-height: 1.35;\r\n color: var(--at-neutral-900);\r\n max-width: 700px;\r\n }\r\n\r\n &__desc-muted {\r\n color: var(--at-neutral-300);\r\n font-weight: 600;\r\n }\r\n\r\n @media (max-width: 1399px) {\r\n &__rail .about-me-slider-thumb {\r\n height: 420px;\r\n }\r\n\r\n &__rail--reverse .about-me-slider-thumb {\r\n height: 520px;\r\n }\r\n\r\n &__desc {\r\n font-size: 24px;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n &__rail .about-me-slider-thumb {\r\n height: 300px;\r\n }\r\n\r\n &__rail--reverse .about-me-slider-thumb {\r\n height: 360px;\r\n }\r\n\r\n &__mark {\r\n width: 58px;\r\n height: 58px;\r\n flex-basis: 58px;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*------------------------------------------------------------------\r\n Home 8 — Section 8 (Testimonials)\r\n------------------------------------------------------------------*/\r\n\r\n.sec-8-home-8 {\r\n background: var(--at-neutral-50);\r\n padding-top: clamp(70px, 6vw, 130px);\r\n padding-bottom: clamp(70px, 6vw, 130px);\r\n\r\n &__container {\r\n padding-left: clamp(20px, 5.2vw, 102px);\r\n padding-right: clamp(20px, 5.2vw, 102px);\r\n }\r\n\r\n &__kicker {\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-900);\r\n white-space: nowrap;\r\n }\r\n\r\n &__kicker-icon {\r\n width: 14px;\r\n height: 13px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n }\r\n }\r\n\r\n &__trusted {\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-900);\r\n white-space: nowrap;\r\n text-underline-offset: 3px;\r\n }\r\n\r\n &__stage {\r\n position: relative;\r\n min-height: 1150px;\r\n }\r\n\r\n &__center {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -58%);\r\n text-align: center;\r\n width: min(595px, 92vw);\r\n }\r\n\r\n &__asterisk {\r\n width: 122px;\r\n height: auto;\r\n display: block;\r\n margin: 0 auto 22px;\r\n transform-origin: 50% 50%;\r\n }\r\n\r\n &__title {\r\n font-size: clamp(44px, 4.375vw, 84px);\r\n font-weight: 600;\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900);\r\n }\r\n\r\n &__group {\r\n position: absolute;\r\n width: 408px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n }\r\n\r\n &__namebar {\r\n height: 88px;\r\n background: var(--at-neutral-0);\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 0 45px;\r\n overflow: hidden;\r\n }\r\n\r\n &__name {\r\n font-size: 24px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900);\r\n white-space: nowrap;\r\n }\r\n\r\n &__plus {\r\n font-size: 24px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-500);\r\n flex-shrink: 0;\r\n }\r\n\r\n &__card {\r\n height: 450px;\r\n background: var(--at-neutral-0);\r\n border-radius: 16px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n &__role {\r\n position: absolute;\r\n top: 52px;\r\n right: 37px;\r\n text-align: right;\r\n font-size: 16px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-900);\r\n line-height: 1.2;\r\n\r\n span {\r\n display: block;\r\n }\r\n }\r\n\r\n &__body {\r\n position: absolute;\r\n left: 48px;\r\n top: 117px;\r\n width: 323px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 32px;\r\n }\r\n\r\n &__avatar {\r\n width: 65px;\r\n height: 65px;\r\n border-radius: 8px;\r\n border: 4px solid var(--at-neutral-50);\r\n overflow: hidden;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n }\r\n\r\n &__quote {\r\n font-size: 20px;\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-500);\r\n line-height: 1.4;\r\n }\r\n\r\n &__stars {\r\n position: absolute;\r\n left: 48px;\r\n bottom: 62px;\r\n display: flex;\r\n gap: 4px;\r\n\r\n img {\r\n width: 18px;\r\n height: 17px;\r\n display: block;\r\n }\r\n }\r\n\r\n // Desktop placements coordinates\r\n &__group--a {\r\n left: 0;\r\n top: 30px;\r\n }\r\n\r\n &__group--b {\r\n right: 0;\r\n top: 324px;\r\n }\r\n\r\n &__group--c {\r\n left: 145px;\r\n top: 827px;\r\n }\r\n\r\n &__group--d {\r\n left: 50%;\r\n top: 1028px;\r\n }\r\n\r\n\r\n\r\n @media (max-width: 1399px) {\r\n &__stage {\r\n min-height: auto;\r\n }\r\n\r\n &__center {\r\n position: static;\r\n transform: none;\r\n margin: 0 auto 40px;\r\n }\r\n\r\n &__group {\r\n position: static;\r\n width: 100%;\r\n max-width: 560px;\r\n margin: 0 auto 24px;\r\n }\r\n\r\n &__card {\r\n height: auto;\r\n padding: 40px 24px 90px;\r\n }\r\n\r\n &__role {\r\n position: static;\r\n text-align: left;\r\n margin-bottom: 18px;\r\n }\r\n\r\n &__body {\r\n position: static;\r\n width: auto;\r\n }\r\n\r\n &__stars {\r\n left: 24px;\r\n bottom: 32px;\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*------------------------------------------------------------------\r\n Home 8 — Section 9 (CTA)\r\n------------------------------------------------------------------*/\r\n\r\n.sec-9-home-8 {\r\n position: relative;\r\n background: var(--at-neutral-900);\r\n overflow: hidden;\r\n padding-top: clamp(80px, 7vw, 140px);\r\n padding-bottom: clamp(80px, 7vw, 140px);\r\n\r\n &__bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n pointer-events: none;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n filter: blur(69px);\r\n transform: scale(1.08);\r\n opacity: 0.65;\r\n }\r\n }\r\n\r\n &__container {\r\n position: relative;\r\n z-index: 1;\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n }\r\n\r\n &__title {\r\n font-size: clamp(36px, 3.75vw, 72px);\r\n font-weight: 600;\r\n line-height: 1.05;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-0);\r\n max-width: 660px;\r\n margin-bottom: 18px;\r\n }\r\n\r\n &__lead {\r\n font-size: clamp(16px, 1.15vw, 22px);\r\n font-weight: 500;\r\n letter-spacing: -0.05em;\r\n color: rgba(var(--at-neutral-0-rgb), 0.92);\r\n max-width: 430px;\r\n margin-bottom: 38px;\r\n }\r\n\r\n &__cta {\r\n display: inline-flex;\r\n align-items: center;\r\n }\r\n\r\n &__cta-btn {\r\n height: 50px;\r\n display: inline-flex;\r\n align-items: center;\r\n padding: 0 27px;\r\n border-radius: 50px;\r\n background: var(--at-neutral-0);\r\n color: var(--at-neutral-900);\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n text-decoration: none;\r\n transition: transform 0.25s ease, background 0.25s ease;\r\n\r\n &:hover {\r\n transform: translateY(-2px);\r\n }\r\n }\r\n\r\n &__cta-icon {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 100px;\r\n background: var(--at-neutral-0);\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-left: 0;\r\n text-decoration: none;\r\n transition: transform 0.25s ease;\r\n\r\n &:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n img {\r\n width: 24px;\r\n height: 24px;\r\n display: block;\r\n }\r\n }\r\n\r\n &__card {\r\n display: block;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--at-neutral-100);\r\n position: relative;\r\n height: 457px;\r\n text-decoration: none;\r\n }\r\n\r\n &__card-media {\r\n position: absolute;\r\n inset: 0;\r\n }\r\n\r\n &__card-figure {\r\n position: absolute;\r\n left: 50%;\r\n top: 0;\r\n transform: translateX(-50%);\r\n width: 610px;\r\n height: 457px;\r\n object-fit: cover;\r\n display: block;\r\n pointer-events: none;\r\n }\r\n\r\n &__card-visors {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 0;\r\n transform: translateX(-50%);\r\n width: 100%;\r\n height: auto;\r\n -o-object-fit: cover;\r\n object-fit: cover;\r\n display: block;\r\n pointer-events: none;\r\n mix-blend-mode: multiply;\r\n opacity: 1;\r\n }\r\n\r\n &__card-overlay {\r\n position: absolute;\r\n left: 43px;\r\n right: 43px;\r\n bottom: 38px;\r\n z-index: 2;\r\n color: #fff;\r\n }\r\n\r\n &__card-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n margin-bottom: 12px;\r\n\r\n img {\r\n width: 14px;\r\n height: 13px;\r\n display: block;\r\n }\r\n }\r\n\r\n &__card-text {\r\n font-size: 24px;\r\n font-weight: 600;\r\n letter-spacing: -0.05em;\r\n max-width: 360px;\r\n line-height: 1.25;\r\n color: #fff;\r\n }\r\n\r\n @media (max-width: 1199px) {\r\n &__card {\r\n height: auto;\r\n min-height: 380px;\r\n }\r\n }\r\n}","@use '../../utils' as *;\n\n/*----------------------------------------*/\n/* sec-1-home-9 (Modern Agency Hero)\n/*----------------------------------------*/\n\n// Design reference: frame 1920x1066 with 100px horizontal padding.\n// Everything here scales fluidly from the desktop design down via clamp().\n\n.sec-1-home-9 {\n position: relative;\n background: var(--at-neutral-900);\n color: var(--at-common-white);\n padding-top: clamp(110px, 9.9vw, 190px);\n padding-bottom: clamp(50px, 4.95vw, 95px);\n overflow: hidden;\n\n @media #{$md,$sm,$xs} {\n padding-top: 140px;\n padding-bottom: 70px;\n }\n\n .text-theme {\n color: var(--at-theme-primary);\n }\n\n // -------------------------------------------------------\n // Container mirrors the 100 px horizontal padding\n // -------------------------------------------------------\n &__container {\n max-width: 2200px;\n margin: 0 auto;\n padding-left: clamp(20px, 5.2vw, 100px);\n padding-right: clamp(20px, 5.2vw, 100px);\n }\n\n // -------------------------------------------------------\n // Row layout — 3 stacked rows row 1/row 2/row 3\n // -------------------------------------------------------\n &__row {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: clamp(16px, 1.56vw, 30px);\n\n @media #{$md,$sm,$xs} {\n flex-wrap: wrap;\n align-items: flex-start;\n }\n }\n\n &__row--top {\n @media #{$md,$sm,$xs} {\n gap: 30px;\n }\n }\n\n &__row--middle {\n @media #{$md,$sm,$xs} {\n gap: 30px;\n margin-top: 10px;\n }\n }\n\n &__row--bottom {\n align-items: flex-end;\n margin-top: clamp(60px, 6.15vw, 118px);\n\n @media #{$md,$sm,$xs} {\n margin-top: 50px;\n gap: 40px;\n }\n }\n\n // -------------------------------------------------------\n // Giant display headings \"Modern\" / \"Agency\"\n // -------------------------------------------------------\n &__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(52px, 10.3vw, 198px);\n line-height: 0.93;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-common-white);\n margin: 0;\n white-space: nowrap;\n\n @media #{$md,$sm} {\n font-size: clamp(64px, 13vw, 120px);\n }\n\n @media #{$xs} {\n font-size: clamp(44px, 18vw, 84px);\n }\n }\n\n &__title--modern {\n flex: 0 0 auto;\n }\n\n &__title--agency {\n flex: 0 0 auto;\n\n @media #{$md,$sm,$xs} {\n order: -1; // Show Agency above kicker column on mobile for better flow\n }\n }\n\n // -------------------------------------------------------\n // Row 1 : small intro block on the right (globe + paragraph)\n // -------------------------------------------------------\n &__intro {\n display: flex;\n align-items: flex-start;\n gap: clamp(8px, 0.78vw, 15px);\n flex: 0 1 auto;\n max-width: clamp(300px, 35vw, 678px);\n padding-bottom: clamp(14px, 1.5vw, 28px); // Baseline align with Modern heading\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: clamp(13px, 1.25vw, 24px);\n line-height: 1.5;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-common-white);\n\n @media #{$md,$sm,$xs} {\n max-width: 100%;\n font-size: 16px;\n padding-bottom: 0;\n flex-basis: 100%;\n }\n\n p {\n margin: 0;\n max-width: 450px;\n }\n }\n\n &__intro-icon {\n flex: 0 0 auto;\n width: clamp(16px, 1.6vw, 31px);\n line-height: 0;\n margin-top: clamp(4px, 0.4vw, 8px);\n color: var(--at-common-white);\n\n svg {\n display: block;\n width: 100%;\n height: auto;\n }\n }\n\n // -------------------------------------------------------\n // Row 2 : left column — kicker + CTA button\n // -------------------------------------------------------\n &__left {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n gap: clamp(12px, 1.1vw, 21px);\n width: clamp(210px, 16.3vw, 313px);\n padding-bottom: clamp(18px, 2.25vw, 43px);\n\n @media #{$md,$sm,$xs} {\n width: 100%;\n max-width: 420px;\n padding-bottom: 0;\n gap: 18px;\n }\n }\n\n &__kicker {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(14px, 1.25vw, 24px);\n line-height: 1.5;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-common-white);\n margin: 0;\n\n @media #{$md,$sm,$xs} {\n font-size: 20px;\n }\n }\n\n // `.at-btn` is defined in components (loaded after layout) with `background-color: #1D1D1D`.\n // Double class bumps specificity so neutral-700 wins over the default button fill.\n &__btn.at-btn {\n width: 100%;\n max-width: clamp(200px, 15.9vw, 305px);\n padding: clamp(10px, 0.73vw, 14px) clamp(16px, 1.4vw, 27px);\n justify-content: center;\n gap: 12px;\n background-color: var(--at-neutral-700);\n color: var(--at-neutral-50);\n border-radius: 0;\n font-weight: 600;\n font-size: clamp(12px, 0.83vw, 16px);\n letter-spacing: -0.05em;\n text-transform: uppercase;\n line-height: 1;\n\n @media #{$md,$sm,$xs} {\n max-width: 260px;\n padding: 14px 22px;\n font-size: 14px;\n }\n\n &:hover {\n background-color: var(--at-theme-primary);\n color: var(--at-common-white);\n }\n }\n\n // -------------------------------------------------------\n // Row 2 : right column — 3 thumbnails\n // -------------------------------------------------------\n &__thumbs {\n display: flex;\n align-items: center;\n gap: clamp(10px, 0.94vw, 18px);\n flex: 0 0 auto;\n padding-bottom: clamp(0px, 0vw, 0px); // kept consistent with bottom-aligned middle row\n\n // Percent widths on children need a definite parent width; otherwise one thumb can\n // expand to ~100% (circular % resolution). Full row + equal flex children fixes mobile.\n @media #{$md,$sm,$xs} {\n width: 100%;\n flex-basis: 100%;\n justify-content: flex-start;\n gap: 12px;\n }\n }\n\n &__thumb {\n width: clamp(86px, 7.55vw, 145px);\n height: clamp(60px, 5.2vw, 100px);\n background: var(--at-common-white);\n border-radius: 4px;\n overflow: hidden;\n flex: 0 0 auto;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.35s ease;\n }\n\n &:hover img {\n transform: scale(1.04);\n }\n\n @media #{$md,$sm,$xs} {\n flex: 1 1 0;\n min-width: 0;\n width: auto;\n height: auto;\n aspect-ratio: 145 / 100;\n }\n }\n\n // -------------------------------------------------------\n // Divider — 2 hairlines stacked 4px apart, 1124px wide\n // -------------------------------------------------------\n &__divider {\n position: relative;\n width: clamp(360px, 58.6vw, 1124px); // 1124/1920 ≈ 58.6%\n max-width: 100%;\n margin-top: clamp(14px, 1.5vw, 29px);\n height: 4px;\n\n @media #{$md,$sm,$xs} {\n width: 100%;\n margin-top: 40px;\n }\n }\n\n &__divider-line {\n position: absolute;\n left: 0;\n right: auto;\n width: 0;\n max-width: 100%;\n height: 1px;\n background: color-mix(in srgb, var(--at-neutral-0) 28%, transparent);\n will-change: width;\n\n &:nth-child(1) {\n top: 0;\n }\n\n &:nth-child(2) {\n top: 4px;\n }\n\n @media (prefers-reduced-motion: reduce) {\n width: 100%;\n will-change: auto;\n }\n }\n\n // -------------------------------------------------------\n // Row 3 : partners (left)\n // -------------------------------------------------------\n &__partners {\n flex: 0 1 auto;\n max-width: clamp(360px, 41.5vw, 797px);\n\n @media #{$md,$sm,$xs} {\n max-width: 100%;\n flex-basis: 100%;\n }\n }\n\n &__brands-title {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: clamp(10px, 0.83vw, 16px);\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-neutral-50);\n text-decoration: underline;\n margin: 0 0 clamp(16px, 1.4vw, 27px);\n }\n\n &__brands-list {\n display: flex;\n flex-wrap: wrap;\n gap: clamp(14px, 1.56vw, 30px) clamp(24px, 2.7vw, 52px);\n align-items: center;\n }\n\n &__brand {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: center;\n height: clamp(28px, 2.5vw, 48px);\n\n img {\n display: block;\n height: 100%;\n width: auto;\n max-width: none;\n object-fit: contain;\n }\n\n @media #{$xs} {\n height: 26px;\n }\n }\n\n // -------------------------------------------------------\n // Row 3 : services wrap (right) — asterisk + services list\n // -------------------------------------------------------\n &__services-wrap {\n flex: 0 1 auto;\n display: flex;\n align-items: flex-start;\n gap: clamp(22px, 2.65vw, 51px);\n\n @media #{$md,$sm,$xs} {\n flex-basis: 100%;\n gap: 28px;\n }\n }\n\n &__star {\n flex: 0 0 auto;\n width: clamp(48px, 5.16vw, 99px);\n height: clamp(48px, 5.16vw, 99px);\n object-fit: contain;\n\n @media #{$xs} {\n display: none;\n }\n }\n\n &__services {\n flex: 1 1 auto;\n width: 100%;\n max-width: clamp(280px, 24.1vw, 462px);\n\n @media #{$md,$sm,$xs} {\n max-width: 100%;\n }\n }\n\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-2-home-9 (Home 9 — stats / odometer row)\r\n/*----------------------------------------*/\r\n\r\n.sec-2-home-9 {\r\n position: relative;\r\n overflow: hidden;\r\n\r\n &__container {\r\n max-width: 2200px;\r\n margin: 0 auto;\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n }\r\n\r\n &__stats {\r\n display: grid;\r\n grid-template-columns: repeat(5, minmax(0, 1fr));\r\n column-gap: clamp(16px, 2vw, 32px);\r\n row-gap: clamp(28px, 2.2vw, 32px);\r\n align-items: start;\r\n justify-items: start;\r\n padding-top: clamp(48px, 5.1vw, 98px);\r\n padding-bottom: clamp(28px, 3.2vw, 62px);\r\n\r\n @media #{$lg} {\r\n column-gap: 20px;\r\n }\r\n\r\n @media #{$md,$sm} {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n }\r\n\r\n @media #{$xs} {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n &__stat {\r\n max-width: 232px;\r\n width: 100%;\r\n\r\n @media #{$xs} {\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n &__value {\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(40px, 4.4vw, 84px);\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900);\r\n margin-bottom: clamp(20px, 1.9vw, 29px);\r\n\r\n .odometer {\r\n letter-spacing: -0.05em;\r\n }\r\n }\r\n\r\n &__label {\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: 16px;\r\n line-height: 1.35;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-950);\r\n }\r\n\r\n &__lines {\r\n width: 100%;\r\n line-height: 0;\r\n\r\n img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n max-width: 1720px;\r\n }\r\n }\r\n}\r\n","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-3-home-9 (Home 9 — about + 3 pillars)\r\n/*----------------------------------------*/\r\n\r\n.sec-3-home-9 {\r\n position: relative;\r\n overflow: hidden;\r\n padding-top: clamp(60px, 6.5vw, 130px);\r\n padding-bottom: clamp(60px, 6.5vw, 130px);\r\n\r\n &__container {\r\n max-width: 2200px;\r\n margin: 0 auto;\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n }\r\n\r\n // Left column: hero image\r\n &__visual {\r\n max-width: 699px;\r\n }\r\n\r\n &__hero-thumb {\r\n position: relative;\r\n width: 100%;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--at-neutral-100);\r\n aspect-ratio: 699 / 415;\r\n\r\n img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n // Right column: intro\r\n &__intro {\r\n padding-top: 0;\r\n max-width: 872px;\r\n margin-left: auto;\r\n\r\n @media #{$lg} {\r\n padding-top: 0;\r\n }\r\n }\r\n\r\n &__eyebrow {\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 16px;\r\n line-height: 1.3;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900);\r\n text-decoration: none;\r\n margin-bottom: 22px;\r\n transition: color 0.3s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n\r\n &__eyebrow-icon {\r\n display: inline-flex;\r\n line-height: 0;\r\n\r\n img {\r\n display: block;\r\n }\r\n }\r\n\r\n &__headline {\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(32px, 3.35vw, 64px);\r\n line-height: 1.125;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-950);\r\n margin-bottom: 22px;\r\n }\r\n\r\n &__lede {\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: clamp(16px, 1.05vw, 20px);\r\n line-height: 1.5;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900);\r\n }\r\n\r\n // Pillar list\r\n &__features {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 32px;\r\n margin-top: 42px;\r\n max-width: 872px;\r\n }\r\n\r\n &__feature {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 30px;\r\n\r\n @media #{$xs} {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n }\r\n\r\n &__feature-thumb {\r\n position: relative;\r\n flex: 0 0 auto;\r\n width: 100%;\r\n max-width: 348px;\r\n height: 139px;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n background: var(--at-neutral-100);\r\n\r\n @media #{$xs} {\r\n max-width: 100%;\r\n }\r\n\r\n img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &__feature-text {\r\n flex: 1 1 0;\r\n min-width: 0;\r\n max-width: 448px;\r\n }\r\n\r\n &__feature-title {\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(24px, 1.9vw, 36px);\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900);\r\n margin-bottom: 16px;\r\n }\r\n\r\n &__feature-desc {\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: 16px;\r\n line-height: 1.45;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-900);\r\n }\r\n}\r\n","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-4-home-9 (Home 9 — Selected work)\r\n/*----------------------------------------*/\r\n\r\n.sec-4-home-9 {\r\n position: relative;\r\n padding-top: clamp(48px, 4.2vw, 80px);\r\n padding-bottom: clamp(60px, 6.5vw, 130px);\r\n border-top: 1px solid var(--at-neutral-200, #cdcccc);\r\n\r\n &__container {\r\n max-width: 2200px;\r\n margin: 0 auto;\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n }\r\n\r\n &__title {\r\n margin: 0 auto clamp(28px, 3vw, 48px);\r\n max-width: 100%;\r\n font-family: var(--at-ff-heading);\r\n font-weight: 800;\r\n font-size: clamp(52px, 10.3vw, 198px);\r\n line-height: 0.95;\r\n letter-spacing: -0.07em;\r\n text-align: center;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n &__filters {\r\n margin-bottom: clamp(36px, 3.6vw, 72px);\r\n\r\n .at-btn.filter-btn {\r\n padding: 12px 24px;\r\n font-size: 16px;\r\n letter-spacing: -0.05em;\r\n }\r\n }\r\n\r\n &__grid {\r\n --sec4-gap: clamp(20px, 1.56vw, 30px);\r\n display: grid;\r\n gap: var(--sec4-gap);\r\n grid-template-columns: 1fr;\r\n\r\n @media (min-width: 992px) {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n align-items: start;\r\n }\r\n }\r\n\r\n &__col {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--sec4-gap);\r\n min-width: 0;\r\n }\r\n\r\n @media #{$lg} {\r\n &__col--offset {\r\n margin-top: -20px;\r\n }\r\n }\r\n\r\n &__card {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n }\r\n\r\n &__visual {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--at-neutral-0, #fefefe);\r\n aspect-ratio: 845 / 542;\r\n }\r\n\r\n &__visual-link {\r\n display: block;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n color: inherit;\r\n text-decoration: none;\r\n\r\n img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &__badge {\r\n position: absolute;\r\n top: clamp(16px, 1.2vw, 23px);\r\n right: clamp(16px, 1.2vw, 23px);\r\n z-index: 2;\r\n padding: 8px 10px;\r\n border-radius: 20px;\r\n background: var(--at-theme-primary, #f0460e);\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 10px;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-0, #fefefe);\r\n pointer-events: none;\r\n }\r\n\r\n &__overlay {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n min-height: 49.5%;\r\n padding: clamp(28px, 2.8vw, 45px) clamp(24px, 2.8vw, 53px);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-end;\r\n gap: clamp(14px, 1.15vw, 22px);\r\n background: linear-gradient(180deg, rgba(26, 26, 26, 0) 11.9%, rgba(26, 26, 26, 0.76) 100%);\r\n pointer-events: none;\r\n }\r\n\r\n &__tag {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 10.5px 19px;\r\n border-radius: 32px;\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 12px;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__metric {\r\n margin: 0;\r\n max-width: 100%;\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(28px, 2.5vw, 48px);\r\n line-height: 1.08;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__excerpt {\r\n margin: 0;\r\n max-width: min(473px, 100%);\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: clamp(16px, 1.05vw, 20px);\r\n line-height: 1.35;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__bar {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n min-height: 88px;\r\n padding: 16px clamp(24px, 2.35vw, 45px);\r\n border-radius: 16px;\r\n background: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__project {\r\n margin: 0;\r\n flex: 1;\r\n min-width: 0;\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(22px, 1.9vw, 36px);\r\n line-height: 1.1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__case {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n flex-shrink: 0;\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 12px;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n transition: color 0.25s ease;\r\n\r\n img {\r\n display: block;\r\n width: 12px;\r\n height: auto;\r\n }\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n\r\n &__cta {\r\n margin-top: clamp(40px, 4vw, 72px);\r\n margin-left: auto;\r\n max-width: 627px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: clamp(20px, 1.56vw, 30px);\r\n }\r\n\r\n &__cta-text {\r\n margin: 0;\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: clamp(22px, 1.9vw, 36px);\r\n line-height: 1.25;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n &__cta-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n height: 50px;\r\n padding: 14px 27px;\r\n border-radius: 50px;\r\n border: none;\r\n background: #1d1d1d;\r\n color: #fefefe !important;\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 16px;\r\n letter-spacing: -0.05em;\r\n text-transform: none;\r\n text-decoration: none;\r\n transition: background 0.25s ease, color 0.25s ease;\r\n\r\n img {\r\n display: block;\r\n flex-shrink: 0;\r\n }\r\n\r\n &:hover {\r\n background: var(--at-theme-primary);\r\n color: var(--at-neutral-0) !important;\r\n }\r\n }\r\n}\r\n","@use '../../utils' as *;\n\n/*----------------------------------------*/\n/* sec-5-home-9 (Home 9 — Marquee / contact)\n/*----------------------------------------*/\n\n.sec-5-home-9 {\n --sec5-text: var(--at-neutral-0, #fefefe);\n\n position: relative;\n min-height: clamp(520px, 78vh, 920px);\n padding-top: clamp(72px, 8.2vw, 158px);\n padding-bottom: clamp(56px, 6vw, 120px);\n background: var(--at-neutral-200, #cdcccc);\n\n [data-bs-theme='dark'] & {\n --sec5-text: var(--at-neutral-950, #f4f4f4);\n }\n\n &__bg {\n position: absolute;\n inset: 0;\n overflow: hidden;\n pointer-events: none;\n z-index: 0;\n }\n\n &__bg-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n /* Source asset is 1024×512; avoid extra CSS scale — export @2x for retina. */\n }\n\n &__container {\n position: relative;\n z-index: 1;\n max-width: 2200px;\n margin: 0 auto;\n padding-left: clamp(20px, 5.2vw, 100px);\n padding-right: clamp(20px, 5.2vw, 100px);\n mix-blend-mode: difference\n }\n\n &__meta {\n margin-bottom: clamp(32px, 4vw, 72px);\n }\n\n &__block {\n display: flex;\n flex-direction: column;\n gap: clamp(16px, 1.25vw, 24px);\n }\n\n &__label {\n margin: 0;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 12px;\n line-height: 1;\n letter-spacing: -0.02em;\n text-transform: uppercase;\n color: var(--sec5-text);\n opacity: 0.5;\n }\n\n &__value {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(18px, 1.25vw, 24px);\n line-height: 1.35;\n letter-spacing: -0.05em;\n color: var(--sec5-text);\n\n /* Global `p {}` uses --at-neutral-500; override for stacked contact lines */\n p {\n margin-bottom: 0;\n color: inherit;\n }\n\n &--stack {\n display: flex;\n flex-direction: column;\n gap: 7px;\n }\n }\n\n &__mailto {\n color: inherit;\n text-decoration: none;\n transition: opacity 0.25s ease;\n\n &:hover {\n opacity: 0.85;\n }\n }\n\n &__marquee-shell {\n overflow-x: hidden;\n overflow-y: visible;\n width: 100%;\n margin-bottom: clamp(28px, 3vw, 48px);\n position: relative;\n z-index: 2;\n min-height: clamp(4.5rem, 15vw, 14rem);\n padding-block: clamp(0.25rem, 0.6vw, 0.75rem);\n }\n\n /* Blend on wrapper only — children must not create separate blend layers with GSAP/CSS transform conflicts */\n &__marquee {\n mix-blend-mode: difference;\n color: var(--at-neutral-0, #fefefe);\n\n .at-marquee__track {\n display: flex;\n width: max-content;\n will-change: transform;\n animation: sec5-home-9-marquee 55s linear infinite;\n }\n\n .at-marquee__group {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n white-space: nowrap;\n }\n }\n\n &__marquee-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: clamp(42px, 10.3vw, 198px);\n line-height: 1.05;\n letter-spacing: -0.05em;\n color: inherit;\n -webkit-font-smoothing: antialiased;\n }\n\n &__marquee-sep {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: clamp(42px, 10.3vw, 198px);\n line-height: 1.05;\n letter-spacing: -0.05em;\n opacity: 0.85;\n color: inherit;\n -webkit-font-smoothing: antialiased;\n }\n\n &__cta-wrap {\n display: flex;\n justify-content: center;\n }\n\n &__cta {\n display: inline-flex;\n align-items: center;\n height: 50px;\n padding: 0 5px 0 27px;\n border-radius: 50px;\n background: var(--at-theme-primary);\n text-decoration: none;\n color: var(--at-neutral-0, #fefefe) !important;\n gap: 10px;\n transition: filter 0.25s ease;\n\n &:hover {\n filter: brightness(1.05);\n color: var(--at-neutral-0, #fefefe) !important;\n }\n }\n\n &__cta-label {\n display: inline-flex;\n align-items: center;\n padding: 0;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.05em;\n }\n\n &__cta-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n\n img {\n display: block;\n width: 24px;\n height: 24px;\n }\n }\n}\n\n@keyframes sec5-home-9-marquee {\n from {\n transform: translate3d(0, 0, 0);\n }\n\n to {\n transform: translate3d(-50%, 0, 0);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .sec-5-home-9__marquee .sec-5-home-9__marquee-track {\n animation: none;\n transform: none;\n }\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-6-home-9 (Home 9 — Meet our team)\r\n/*----------------------------------------*/\r\n\r\n.sec-6-home-9 {\r\n position: relative;\r\n padding-top: clamp(56px, 6vw, 120px);\r\n padding-bottom: clamp(64px, 7vw, 160px);\r\n\r\n &__container {\r\n max-width: 2200px;\r\n margin: 0 auto;\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n }\r\n\r\n &__header {\r\n text-align: center;\r\n max-width: 1100px;\r\n margin: 0 auto clamp(40px, 5vw, 88px);\r\n }\r\n\r\n &__tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n margin-bottom: clamp(20px, 2.5vw, 38px);\r\n }\r\n\r\n &__tag-text {\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: 16px;\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__title {\r\n margin: 0;\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: clamp(48px, 8.6vw, 124px);\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n &__title-accent {\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n &__body {\r\n position: relative;\r\n }\r\n\r\n &__list {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n max-width: 1718px;\r\n margin: 0 auto;\r\n }\r\n\r\n &__card {\r\n @media (min-width: 768px) {\r\n cursor: pointer;\r\n }\r\n\r\n display: grid;\r\n gap: clamp(16px, 2vw, 24px);\r\n align-items: center;\r\n padding: clamp(16px, 2vw, 20px) clamp(20px, 3vw, 42px);\r\n border: 1px solid var(--at-neutral-100, #dfdfdf);\r\n background: var(--at-neutral-0, #fefefe);\r\n border-radius: 0;\r\n transition: all 0.3s ease;\r\n\r\n @media (min-width: 992px) {\r\n grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 1.1fr);\r\n gap: clamp(20px, 2vw, 32px);\r\n }\r\n\r\n @media (hover: hover) and (pointer: fine) {\r\n &:hover {\r\n border-radius: 24px;\r\n padding: clamp(16px, 2vw, 20px) clamp(30px, 5vw, 52px);\r\n transition: all 0.3s ease;\r\n }\r\n }\r\n\r\n &--accent {\r\n border-color: var(--at-neutral-200, #cdcccc);\r\n }\r\n }\r\n\r\n &__quote {\r\n margin: 0;\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: 16px;\r\n line-height: 1.35;\r\n letter-spacing: -0.02em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-800, #212121);\r\n }\r\n\r\n &__person {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n\r\n &__avatar {\r\n flex-shrink: 0;\r\n width: 68px;\r\n height: 68px;\r\n border-radius: 100px;\r\n overflow: hidden;\r\n background: var(--at-neutral-100, #dfdfdf);\r\n\r\n img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &__meta {\r\n min-width: 0;\r\n }\r\n\r\n &__name {\r\n margin: 0 0 4px;\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(26px, 2.5vw, 36px);\r\n line-height: 1.1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__role {\r\n margin: 0;\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: 16px;\r\n line-height: 1.2;\r\n letter-spacing: -0.02em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-500, #585959);\r\n }\r\n\r\n &__skills {\r\n margin: 0;\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: 16px;\r\n line-height: 1.35;\r\n letter-spacing: -0.02em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-800, #212121);\r\n\r\n @media (min-width: 992px) {\r\n text-align: right;\r\n justify-self: end;\r\n }\r\n }\r\n\r\n &__footer {\r\n display: grid;\r\n gap: clamp(32px, 4vw, 48px);\r\n max-width: 1100px;\r\n margin: clamp(48px, 6vw, 100px) auto 0;\r\n\r\n @media (min-width: 768px) {\r\n grid-template-columns: 1fr 1fr;\r\n align-items: start;\r\n }\r\n }\r\n\r\n &__footer-primary {\r\n display: flex;\r\n gap: 24px;\r\n align-items: flex-start;\r\n }\r\n\r\n &__footer-icon {\r\n flex-shrink: 0;\r\n\r\n img {\r\n display: block;\r\n width: 40px;\r\n height: auto;\r\n }\r\n }\r\n\r\n &__footer-heading {\r\n margin: 0 0 18px;\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: 24px;\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__footer-lines {\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: 16px;\r\n line-height: 1.5;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-500, #585959);\r\n\r\n p {\r\n margin: 0 0 0.35em;\r\n color: inherit;\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n }\r\n }\r\n\r\n &__footer-secondary {\r\n @media (min-width: 768px) {\r\n margin-top: 44px;\r\n }\r\n }\r\n\r\n &__footer-link {\r\n color: var(--at-neutral-900, #1d1d1d);\r\n text-decoration: none;\r\n transition: color 0.2s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-7-home-9 (Home 9 — Collective)\r\n/*----------------------------------------*/\r\n\r\n.sec-7-home-9 {\r\n position: relative;\r\n padding-top: clamp(56px, 7vw, 148px);\r\n padding-bottom: clamp(64px, 8vw, 120px);\r\n background: var(--at-neutral-900, #1d1d1d);\r\n color: var(--at-neutral-0, #fefefe);\r\n\r\n &__container {\r\n max-width: 2200px;\r\n margin: 0 auto;\r\n padding-left: clamp(20px, 5.2vw, 105px);\r\n padding-right: clamp(20px, 5.2vw, 105px);\r\n }\r\n\r\n &__lead {\r\n margin: 0 0 clamp(40px, 5vw, 72px);\r\n max-width: 1194px;\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(28px, 4.2vw, 48px);\r\n line-height: 1.08;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__main {\r\n align-items: flex-start;\r\n }\r\n\r\n &__visual {\r\n position: relative;\r\n width: 100%;\r\n max-width: 714px;\r\n aspect-ratio: 714 / 438;\r\n overflow: hidden;\r\n background: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__visual-base {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n z-index: 1;\r\n }\r\n\r\n &__visual-layer {\r\n position: absolute;\r\n z-index: 2;\r\n left: -7%;\r\n top: -12%;\r\n width: 128%;\r\n height: 139%;\r\n object-fit: cover;\r\n object-position: center;\r\n opacity: 0.88;\r\n pointer-events: none;\r\n }\r\n\r\n &__aside {\r\n position: relative;\r\n padding-top: clamp(8px, 1.5vw, 24px);\r\n }\r\n\r\n &__deco {\r\n display: none;\r\n position: absolute;\r\n right: clamp(-20px, -2vw, 0px);\r\n top: clamp(-40px, -3vw, -20px);\r\n width: 99px;\r\n height: 99px;\r\n pointer-events: none;\r\n opacity: 0.45;\r\n\r\n img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n transform-origin: center center;\r\n animation: sec-7-home-9-deco-spin 14s linear infinite;\r\n }\r\n\r\n @media (min-width: 992px) {\r\n display: block;\r\n }\r\n }\r\n\r\n &__quote {\r\n margin: 0 0 clamp(28px, 3.5vw, 40px);\r\n padding: 0;\r\n border: none;\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: clamp(17px, 1.56vw, 20px);\r\n line-height: 1.45;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n max-width: 534px;\r\n }\r\n\r\n &__tag {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n padding: 15px 19px;\r\n border-radius: 32px;\r\n text-decoration: none;\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: 16px;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-0, #fefefe);\r\n border: 1px solid color-mix(in srgb, var(--at-neutral-0, #fefefe) 30%, transparent);\r\n background: color-mix(in srgb, var(--at-neutral-700, #303030) 35%, transparent);\r\n backdrop-filter: blur(24px);\r\n -webkit-backdrop-filter: blur(24px);\r\n transition:\r\n background 0.25s ease,\r\n border-color 0.25s ease,\r\n transform 0.25s ease;\r\n\r\n img {\r\n display: block;\r\n flex-shrink: 0;\r\n width: 9px;\r\n height: 9px;\r\n }\r\n\r\n &:hover {\r\n color: var(--at-neutral-0, #fefefe);\r\n border-color: color-mix(in srgb, var(--at-neutral-0, #fefefe) 55%, transparent);\r\n background: color-mix(in srgb, var(--at-neutral-700, #303030) 55%, transparent);\r\n transform: translateY(-2px);\r\n }\r\n }\r\n}\r\n\r\n@keyframes sec-7-home-9-deco-spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .sec-7-home-9__deco img {\r\n animation: none;\r\n }\r\n}\r\n","@use '../../utils' as *;\n\n.home-9-testimonial-area {\n overflow: hidden;\n\n .testimonial-9-title-wrap {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n margin-bottom: 50px;\n\n @media #{$md, $sm, $xs} {\n margin-bottom: 60px;\n }\n }\n\n .testimonial-9-card {\n display: flex;\n gap: 75px;\n align-items: flex-start;\n\n @media #{$xl} {\n gap: 50px;\n }\n\n @media #{$lg, $md, $sm, $xs} {\n flex-direction: column;\n gap: 30px;\n }\n\n .testimonial-img {\n width: 192px;\n height: 192px;\n position: relative;\n background: var(--at-neutral-100);\n overflow: hidden;\n flex-shrink: 0;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n\n .testimonial-content {\n max-width: 803px;\n\n .testimonial-quote {\n font-family: var(--at-ff-heading);\n font-size: 48px;\n font-weight: 600;\n line-height: 1.08;\n letter-spacing: -2.4px;\n color: var(--at-neutral-950);\n margin-bottom: 37px;\n\n @media #{$lg, $md} {\n font-size: var(--at-fz-font-3xl);\n letter-spacing: -1.5px;\n }\n\n @media #{$sm, $xs} {\n font-size: var(--at-fz-font-2xl);\n letter-spacing: -1px;\n }\n }\n\n .author-logo {\n height: 25px;\n margin-bottom: 12px;\n\n img {\n height: 100%;\n width: auto;\n }\n }\n\n .author-name {\n font-size: 24px;\n letter-spacing: -1.2px;\n margin-bottom: 4px;\n }\n\n .author-position {\n font-size: var(--at-fz-font-md);\n letter-spacing: -0.32px;\n }\n }\n }\n}","@use '../../utils' as *;\n\n.home-9-contact-area {\n .contact-title {\n @media #{$md, $sm, $xs} {\n font-size: var(--at-fz-font-3xl) !important;\n letter-spacing: -1.5px !important;\n line-height: 1.2 !important;\n }\n }\n\n .home-9-contact-btn {\n transition: all 0.3s ease;\n &:hover {\n transform: translateY(-3px);\n .btn-icon {\n background-color: var(--at-common-white) !important;\n img {\n filter: invert(1);\n }\n }\n }\n .btn-text {\n background-color: var(--at-theme-primary);\n transition: all 0.3s ease;\n }\n .btn-icon {\n background-color: var(--at-theme-primary);\n transition: all 0.3s ease;\n }\n }\n\n .moving-gallery-wrap {\n .moving-gallery {\n ul.wrapper-gallery {\n display: flex;\n align-items: flex-end;\n li {\n margin: 0 15px;\n img {\n height: auto;\n }\n }\n }\n }\n }\n}\n","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* Home 10 — placeholder section spacing\r\n/*----------------------------------------*/\r\n\r\n.home-10-sec {\r\n padding-top: clamp(72px, 10vw, 120px);\r\n padding-bottom: clamp(72px, 10vw, 120px);\r\n\r\n &__label {\r\n font-family: var(--at-ff-body);\r\n font-size: clamp(16px, 1.2vw, 18px);\r\n font-weight: 500;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-600, #6b6b6b);\r\n }\r\n\r\n &--alt {\r\n background: var(--at-neutral-50, #f2f2f2);\r\n }\r\n}\r\n","@use '../../utils' as *;\n\n/*------------------------------------------------------------------\n Home 10 — Section 1: Creative 3D Studio Hero\n------------------------------------------------------------------*/\n\n@keyframes h10-marquee {\n from {\n transform: translateX(0);\n }\n\n to {\n transform: translateX(-50%);\n }\n}\n\n.sec-1-home-10 {\n position: relative;\n background-color: var(--at-neutral-0);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n min-height: 100svh;\n\n &__cursor-trail {\n position: absolute;\n inset: 0;\n z-index: 1;\n pointer-events: none;\n overflow: hidden;\n }\n\n &__cursor-trail-img {\n position: absolute;\n width: auto;\n height: auto;\n max-width: clamp(110px, 10vw, 180px);\n max-height: clamp(110px, 10vw, 180px);\n object-fit: contain;\n border-radius: 6px;\n transform-origin: center;\n pointer-events: none;\n will-change: transform;\n filter: saturate(1.02) contrast(1.02);\n opacity: 0.95;\n }\n\n &__bg-lines {\n position: absolute;\n inset: 0;\n z-index: 0;\n pointer-events: none;\n opacity: 0.04;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n }\n\n // ── Giant running headline ──────────────────────────────────\n\n &__headline-wrap {\n position: relative;\n z-index: 1;\n padding-top: clamp(120px, 14vw, 250px);\n padding-bottom: clamp(32px, 3.5vw, 56px);\n }\n\n &__headline-track {\n display: flex;\n white-space: nowrap;\n animation: h10-marquee 24s linear infinite;\n }\n\n &__big-title {\n font-size: clamp(56px, 13.75vw, 198px);\n font-weight: 700;\n line-height: 1;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-neutral-950);\n white-space: nowrap;\n display: inline-block;\n flex-shrink: 0;\n margin-bottom: 0;\n }\n\n // ── Middle content row ──────────────────────────────────────\n\n &__mid {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 0 clamp(20px, 6.7vw, 96px);\n gap: clamp(20px, 2vw, 32px);\n flex: 1;\n }\n\n // Left: description + buttons\n\n &__left {\n flex: 0 0 auto;\n max-width: clamp(280px, 38.6vw, 555px);\n display: flex;\n flex-direction: column;\n gap: clamp(16px, 1.5vw, 22px);\n }\n\n &__desc {\n font-size: clamp(22px, 2.5vw, 36px);\n font-weight: 600;\n line-height: 1.15;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n margin-bottom: 0;\n }\n\n &__btns {\n display: flex;\n align-items: center;\n gap: clamp(20px, 2.4vw, 34px);\n flex-wrap: wrap;\n }\n\n &__btn-launch {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n\n &:hover .sec-1-home-10__btn-label,\n &:hover .sec-1-home-10__btn-circle {\n background-color: var(--at-neutral-700);\n }\n }\n\n &__btn-label {\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n height: 50px;\n padding: 0 clamp(18px, 1.88vw, 27px);\n border-radius: 50px;\n font-size: clamp(14px, 1.11vw, 16px);\n font-weight: 600;\n letter-spacing: -0.05em;\n white-space: nowrap;\n display: inline-flex;\n align-items: center;\n transition: background-color 0.3s ease;\n }\n\n &__btn-circle {\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-left: 4px;\n transition: background-color 0.3s ease;\n\n svg {\n width: 20px;\n height: 20px;\n }\n }\n\n &__btn-cases {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n text-decoration: none;\n border-bottom: 1px solid var(--at-neutral-900);\n padding-bottom: 8px;\n color: var(--at-neutral-900);\n font-size: clamp(14px, 1.11vw, 16px);\n font-weight: 600;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n white-space: nowrap;\n transition: color 0.3s ease, border-color 0.3s ease;\n\n &:hover {\n color: var(--at-theme-primary);\n border-color: var(--at-theme-primary);\n }\n }\n\n // Center: location badge\n\n &__location {\n display: none;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n align-self: flex-start;\n\n @media (min-width: 1441px) {\n display: flex;\n }\n }\n\n &__globe {\n color: var(--at-neutral-950);\n flex-shrink: 0;\n width: clamp(20px, 1.88vw, 27px);\n height: auto;\n }\n\n &__coords {\n font-size: clamp(16px, 1.67vw, 24px);\n font-weight: 600;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-neutral-950);\n white-space: nowrap;\n }\n\n // Right: cards\n\n &__right {\n display: flex;\n align-items: flex-end;\n gap: clamp(16px, 1.8vw, 26px);\n flex-shrink: 0;\n }\n\n &__glass-card {\n background: rgba(181, 181, 181, 0.3);\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n border-radius: 14px;\n width: clamp(220px, 20.3vw, 292px);\n height: clamp(200px, 17.5vw, 252px);\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n }\n\n &__glass-img {\n background-color: var(--at-neutral-950);\n border-radius: 8px;\n overflow: hidden;\n margin: 11px auto 0;\n width: calc(100% - 22px);\n flex: 1;\n\n img,\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n }\n\n &__glass-footer {\n padding: 12px 16px 16px;\n }\n\n &__glass-link {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n text-decoration: none;\n color: var(--at-neutral-950);\n font-size: clamp(14px, 1.11vw, 16px);\n font-weight: 600;\n letter-spacing: -0.05em;\n white-space: nowrap;\n transition: color 0.3s ease;\n\n &:hover {\n color: var(--at-theme-primary);\n }\n }\n\n &__info-card {\n display: flex;\n flex-direction: column;\n gap: 15px;\n max-width: clamp(180px, 16vw, 230px);\n align-self: flex-end;\n padding-bottom: 19px;\n flex-shrink: 0;\n }\n\n &__info-icon {\n width: 48px;\n height: 48px;\n flex-shrink: 0;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n display: block;\n }\n }\n\n &__info-text {\n font-size: clamp(13px, 1.11vw, 16px);\n font-weight: 500;\n line-height: 1.55;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n margin-bottom: 0;\n }\n\n // ── Bottom terms strip ──────────────────────────────────────\n\n &__terms {\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: clamp(40px, 5vw, 80px) clamp(20px, 6.7vw, 96px) clamp(24px, 2.5vw, 40px);\n\n span {\n font-size: clamp(13px, 1.11vw, 16px);\n font-weight: 500;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n white-space: nowrap;\n }\n }\n\n // ── Responsive ──────────────────────────────────────────────\n\n @media (max-width: 1399px) {\n &__right {\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n }\n\n &__glass-card {\n width: 100%;\n max-width: 280px;\n }\n\n &__info-card {\n max-width: 280px;\n padding-bottom: 0;\n }\n }\n\n @media (max-width: 1199px) {\n &__mid {\n flex-wrap: wrap;\n gap: 32px;\n }\n\n &__location {\n order: -1;\n width: 100%;\n }\n\n &__right {\n flex-direction: row;\n align-items: flex-end;\n width: 100%;\n }\n\n &__glass-card {\n width: 260px;\n max-width: 260px;\n }\n\n &__info-card {\n flex: 1;\n max-width: 100%;\n }\n }\n\n @media (max-width: 767px) {\n min-height: auto;\n\n &__mid {\n flex-direction: column;\n gap: 24px;\n }\n\n &__left {\n max-width: 100%;\n }\n\n &__location {\n flex-wrap: wrap;\n }\n\n &__coords {\n font-size: 16px;\n }\n\n &__right {\n flex-direction: column;\n width: 100%;\n }\n\n &__glass-card {\n width: 100%;\n max-width: 100%;\n height: 200px;\n }\n\n &__info-card {\n max-width: 100%;\n padding-bottom: 0;\n }\n\n &__terms {\n flex-wrap: wrap;\n gap: 10px 20px;\n justify-content: flex-start;\n }\n }\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-2-home-10 (Home 10 — Panoramic scene)\r\n/*----------------------------------------*/\r\n\r\n.sec-2-home-10 {\r\n position: relative;\r\n background: transparent;\r\n // Up to 1440px (tablet through large laptop): shorter scene\r\n height: 500px;\r\n\r\n @media (min-width: 1441px) {\r\n height: 750px;\r\n }\r\n\r\n &__img {\r\n width: 100%;\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-3-home-10 (Home 10 — Selected projects / masonry)\r\n/*----------------------------------------*/\r\n\r\n.sec-3-home-10 {\r\n position: relative;\r\n padding-top: clamp(56px, 7vw, 120px);\r\n padding-bottom: clamp(64px, 9vw, 140px);\r\n background: var(--at-neutral-0);\r\n\r\n &__container {\r\n max-width: 2200px;\r\n margin: 0 auto;\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n }\r\n\r\n &__header {\r\n margin-bottom: clamp(40px, 6vw, 80px) !important;\r\n }\r\n\r\n &__eyebrow-text {\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 16px;\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900);\r\n }\r\n\r\n &__title {\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(36px, 5.5vw, 72px);\r\n line-height: 1.05;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-950);\r\n text-wrap: balance;\r\n }\r\n\r\n &__intro {\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: clamp(18px, 1.5vw, 22px);\r\n line-height: 1.45;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900);\r\n\r\n strong {\r\n font-weight: 700;\r\n color: var(--at-neutral-950);\r\n }\r\n }\r\n\r\n &__grid {\r\n display: grid;\r\n gap: clamp(28px, 4vw, 40px);\r\n\r\n @media (min-width: 992px) {\r\n grid-template-columns: minmax(0, 0.372fr) minmax(0, 0.628fr);\r\n align-items: start;\r\n }\r\n }\r\n\r\n &__card {\r\n display: flex;\r\n flex-direction: column;\r\n gap: clamp(20px, 2.2vw, 28px);\r\n\r\n @media (min-width: 992px) {\r\n &--pos1 {\r\n grid-column: 1;\r\n grid-row: 1;\r\n }\r\n\r\n &--pos2 {\r\n grid-column: 2;\r\n grid-row: 1;\r\n }\r\n\r\n &--pos3 {\r\n grid-column: 1;\r\n grid-row: 2;\r\n }\r\n\r\n &--pos4 {\r\n grid-column: 2;\r\n grid-row: 2;\r\n }\r\n\r\n &--pos5 {\r\n grid-column: 2;\r\n grid-row: 3;\r\n }\r\n }\r\n }\r\n\r\n &__media {\r\n display: block;\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n background: transparent;\r\n text-decoration: none;\r\n transition: opacity 0.3s ease;\r\n\r\n &:hover {\r\n opacity: 0.92;\r\n }\r\n\r\n img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &__body {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n max-width: 380px;\r\n }\r\n\r\n &__name {\r\n margin: 0;\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(20px, 1.8vw, 24px);\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n\r\n a {\r\n color: var(--at-neutral-900);\r\n text-decoration: none;\r\n transition: color 0.25s ease;\r\n\r\n &:hover {\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n }\r\n\r\n &__tag {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 10px 19px;\r\n border-radius: 32px;\r\n border: 1px solid var(--at-neutral-100);\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 12px;\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-900);\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-4-home-10 (Home 10 — Our services)\r\n/*----------------------------------------*/\r\n\r\n.sec-4-home-10 {\r\n position: relative;\r\n padding-top: clamp(56px, 7vw, 120px);\r\n padding-bottom: clamp(64px, 9vw, 140px);\r\n background: var(--at-neutral-900, #1d1d1d);\r\n color: var(--at-neutral-0, #fefefe);\r\n\r\n &__container {\r\n max-width: 2200px;\r\n margin: 0 auto;\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n }\r\n\r\n &__stage {\r\n display: flex;\r\n flex-direction: column;\r\n gap: clamp(32px, 4vw, 48px);\r\n\r\n @media (min-width: 992px) {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) minmax(240px, 0.82fr) minmax(0, 1fr);\r\n grid-template-rows: auto auto;\r\n gap: clamp(20px, 2vw, 32px);\r\n align-items: start;\r\n }\r\n }\r\n\r\n &__title-block {\r\n text-align: center;\r\n\r\n @media (min-width: 992px) {\r\n grid-column: 2;\r\n grid-row: 1 / span 2;\r\n align-self: center;\r\n justify-self: center;\r\n z-index: 1;\r\n max-width: min(520px, 100%);\r\n padding: clamp(12px, 2vw, 28px) 0;\r\n pointer-events: none;\r\n\r\n .sec-4-home-10__eyebrow,\r\n .sec-4-home-10__title {\r\n pointer-events: auto;\r\n }\r\n }\r\n }\r\n\r\n &__eyebrow-text {\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 16px;\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__eyebrow-arrow {\r\n flex-shrink: 0;\r\n color: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__title {\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(28px, 3.6vw, 56px);\r\n line-height: 1.08;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-0, #fefefe);\r\n text-wrap: balance;\r\n }\r\n\r\n &__card {\r\n position: relative;\r\n z-index: 2;\r\n min-width: 0;\r\n width: 100%;\r\n\r\n @media (min-width: 992px) {\r\n &--pos1 {\r\n grid-column: 1;\r\n grid-row: 1;\r\n justify-self: start;\r\n max-width: 550px;\r\n }\r\n\r\n &--pos2 {\r\n grid-column: 3;\r\n grid-row: 1;\r\n justify-self: end;\r\n max-width: 410px;\r\n }\r\n\r\n &--pos3 {\r\n grid-column: 1;\r\n grid-row: 2;\r\n justify-self: start;\r\n max-width: 410px;\r\n }\r\n\r\n &--pos4 {\r\n grid-column: 3;\r\n grid-row: 2;\r\n justify-self: end;\r\n max-width: 560px;\r\n }\r\n }\r\n }\r\n\r\n &__card-inner {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n height: 100%;\r\n }\r\n\r\n &__visual {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--at-neutral-800, #2a2a2a);\r\n\r\n @media (max-width: 991.98px) {\r\n aspect-ratio: 16 / 10;\r\n }\r\n }\r\n\r\n &__visual-link {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n color: inherit;\r\n text-decoration: none;\r\n transition: opacity 0.3s ease;\r\n\r\n &:hover {\r\n opacity: 0.94;\r\n }\r\n\r\n img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n }\r\n\r\n &__overlay {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n min-height: 46%;\r\n padding: clamp(22px, 2.4vw, 40px) clamp(20px, 2.4vw, 44px);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n background: linear-gradient(180deg, rgba(26, 26, 26, 0) 8%, rgba(26, 26, 26, 0.78) 100%);\r\n pointer-events: none;\r\n }\r\n\r\n &__excerpt {\r\n max-width: min(420px, 100%);\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: clamp(15px, 1.05vw, 18px);\r\n line-height: 1.4;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__bar {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 16px;\r\n min-height: 88px;\r\n padding: 16px clamp(20px, 2.2vw, 40px);\r\n border-radius: 16px;\r\n background: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__service-name {\r\n flex: 1;\r\n min-width: 0;\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(20px, 1.75vw, 32px);\r\n line-height: 1.1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__expand {\r\n flex-shrink: 0;\r\n width: 44px;\r\n height: 44px;\r\n padding: 0;\r\n border: 1px solid var(--at-neutral-200, #e0e0e0);\r\n border-radius: 50%;\r\n background: transparent;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: border-color 0.25s ease, background 0.25s ease;\r\n\r\n &:hover {\r\n border-color: var(--at-neutral-900, #1d1d1d);\r\n background: var(--at-neutral-50, #f7f7f7);\r\n }\r\n }\r\n\r\n &__expand-icon {\r\n position: relative;\r\n width: 14px;\r\n height: 14px;\r\n display: block;\r\n\r\n &::before,\r\n &::after {\r\n content: '';\r\n position: absolute;\r\n background: var(--at-neutral-900, #1d1d1d);\r\n border-radius: 1px;\r\n }\r\n\r\n &::before {\r\n left: 0;\r\n right: 0;\r\n top: 50%;\r\n height: 2px;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &::after {\r\n top: 0;\r\n bottom: 0;\r\n left: 50%;\r\n width: 2px;\r\n transform: translateX(-50%);\r\n }\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-5-home-10 (Home 10 — About + metrics)\r\n/*----------------------------------------*/\r\n\r\n.sec-5-home-10 {\r\n position: relative;\r\n padding-top: clamp(48px, 6vw, 100px);\r\n padding-bottom: clamp(56px, 8vw, 140px);\r\n background: var(--at-neutral-50, #f2f2f2);\r\n\r\n &__container {\r\n max-width: 2200px;\r\n margin: 0 auto;\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n }\r\n\r\n &__intro-row {\r\n margin-bottom: clamp(40px, 6vw, 88px);\r\n position: relative;\r\n z-index: 3;\r\n }\r\n\r\n &__eyebrow-text {\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 16px;\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__eyebrow {\r\n transition: opacity 0.25s ease;\r\n\r\n &:hover {\r\n opacity: 0.75;\r\n }\r\n }\r\n\r\n &__title {\r\n max-width: 1250px;\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(28px, 3.4vw, 48px);\r\n line-height: 1.15;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n text-wrap: balance;\r\n }\r\n\r\n &__cta {\r\n height: 50px;\r\n padding: 14px 27px;\r\n border-radius: 50px;\r\n background: var(--at-neutral-900, #1d1d1d);\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 16px;\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-0, #fefefe) !important;\r\n text-decoration: none !important;\r\n white-space: nowrap;\r\n transition: background 0.25s ease, color 0.25s ease;\r\n\r\n &:hover {\r\n background: var(--at-theme-primary);\r\n color: var(--at-neutral-0) !important;\r\n }\r\n }\r\n\r\n &__cta-arrow {\r\n flex-shrink: 0;\r\n color: currentColor;\r\n }\r\n\r\n &__figure {\r\n position: relative;\r\n z-index: 1;\r\n margin-bottom: clamp(48px, 7vw, 120px);\r\n max-width: min(480px, 72vw);\r\n width: 100%;\r\n }\r\n\r\n &__figure-img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n &__stats {\r\n position: relative;\r\n z-index: 1;\r\n align-items: flex-start;\r\n }\r\n\r\n &__stat {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n max-width: 370px;\r\n\r\n @media (min-width: 768px) {\r\n &--1 {\r\n align-items: flex-start;\r\n text-align: left;\r\n margin-right: auto;\r\n }\r\n\r\n &--2 {\r\n margin-left: auto;\r\n margin-right: auto;\r\n margin-top: clamp(48px, 9vw, 160px);\r\n }\r\n\r\n &--3 {\r\n align-items: flex-end;\r\n text-align: right;\r\n margin-left: auto;\r\n margin-top: clamp(96px, 16vw, 280px);\r\n }\r\n }\r\n }\r\n\r\n &__stat-value {\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: clamp(64px, 10vw, 124px);\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__stat-label {\r\n margin-top: clamp(8px, 1.2vw, 16px);\r\n max-width: 284px;\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: clamp(18px, 1.6vw, 24px);\r\n line-height: 1.25;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n}","@use '../../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* sec-6-home-10 (Home 10 — Meet the team)\r\n/*----------------------------------------*/\r\n\r\n.sec-6-home-10 {\r\n position: relative;\r\n padding-top: clamp(48px, 6vw, 100px);\r\n padding-bottom: clamp(56px, 8vw, 140px);\r\n background: var(--at-neutral-0, #fefefe);\r\n overflow: hidden;\r\n\r\n &__container {\r\n max-width: 2200px;\r\n margin: 0 auto;\r\n padding-left: clamp(20px, 5.2vw, 100px);\r\n padding-right: clamp(20px, 5.2vw, 100px);\r\n }\r\n\r\n &__layout {\r\n display: flex;\r\n flex-direction: column;\r\n gap: clamp(28px, 4vw, 40px);\r\n\r\n @media (min-width: 1200px) {\r\n display: grid;\r\n grid-template-columns: minmax(0, 1fr) minmax(220px, min(28vw, 407px)) minmax(0, 1fr);\r\n grid-template-rows: auto auto auto;\r\n gap: clamp(20px, 2.5vw, 32px);\r\n align-items: start;\r\n }\r\n }\r\n\r\n &__title-block {\r\n text-align: center;\r\n\r\n @media (min-width: 1200px) {\r\n grid-column: 2;\r\n grid-row: 1 / span 2;\r\n align-self: center;\r\n justify-self: center;\r\n z-index: 2;\r\n max-width: min(765px, 100%);\r\n padding: clamp(16px, 3vw, 48px) 0;\r\n pointer-events: none;\r\n\r\n .sec-6-home-10__eyebrow,\r\n .sec-6-home-10__title {\r\n pointer-events: auto;\r\n }\r\n }\r\n }\r\n\r\n &__eyebrow-text {\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 16px;\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &__title {\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(40px, 6vw, 84px);\r\n line-height: 0.95;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n text-wrap: balance;\r\n }\r\n\r\n &__member {\r\n min-width: 0;\r\n\r\n @media (min-width: 1200px) {\r\n max-width: 407px;\r\n\r\n &--1 {\r\n grid-column: 1;\r\n grid-row: 1;\r\n justify-self: start;\r\n }\r\n\r\n &--2 {\r\n grid-column: 3;\r\n grid-row: 1;\r\n justify-self: end;\r\n margin-top: clamp(48px, 12vw, 200px);\r\n }\r\n\r\n &--3 {\r\n grid-column: 1;\r\n grid-row: 2;\r\n justify-self: start;\r\n margin-top: clamp(24px, 6vw, 80px);\r\n }\r\n\r\n &--4 {\r\n grid-column: 3;\r\n grid-row: 2;\r\n justify-self: end;\r\n margin-top: clamp(40px, 8vw, 120px);\r\n }\r\n }\r\n }\r\n\r\n &__member-link {\r\n display: block;\r\n color: inherit;\r\n text-decoration: none;\r\n transition: opacity 0.3s ease;\r\n\r\n &:hover {\r\n opacity: 0.92;\r\n }\r\n }\r\n\r\n &__member-frame {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--at-neutral-100, #dfdfdf);\r\n aspect-ratio: 407 / 550;\r\n }\r\n\r\n &__member-img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center top;\r\n }\r\n\r\n &__member-overlay {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n min-height: 34.5%;\r\n padding: clamp(28px, 3vw, 40px) clamp(24px, 3.5vw, 46px);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 12px;\r\n background: linear-gradient(180deg, rgba(26, 26, 26, 0) 11.9%, rgba(26, 26, 26, 0.92) 100%);\r\n backdrop-filter: blur(3px);\r\n pointer-events: none;\r\n }\r\n\r\n &__member-name {\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(26px, 2.2vw, 32px);\r\n line-height: 1.1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-0, #fefefe);\r\n }\r\n\r\n &__member-role {\r\n font-family: var(--at-ff-body);\r\n font-weight: 500;\r\n font-size: clamp(18px, 1.4vw, 22px);\r\n line-height: 1.2;\r\n letter-spacing: -0.02em;\r\n color: var(--at-neutral-0, #fefefe);\r\n opacity: 0.8;\r\n }\r\n\r\n &__member-fab {\r\n position: absolute;\r\n top: clamp(20px, 2vw, 26px);\r\n right: clamp(20px, 2vw, 26px);\r\n z-index: 2;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n\r\n &--light {\r\n background: var(--at-neutral-0, #fefefe);\r\n color: var(--at-neutral-900, #1d1d1d);\r\n }\r\n\r\n &--dark {\r\n background: var(--at-neutral-900, #1d1d1d);\r\n color: var(--at-neutral-0, #fefefe);\r\n }\r\n }\r\n\r\n &__foot {\r\n @media (min-width: 1200px) {\r\n grid-column: 2 / -1;\r\n grid-row: 3;\r\n justify-self: end;\r\n max-width: min(775px, 100%);\r\n text-align: left;\r\n }\r\n }\r\n\r\n &__foot-text {\r\n font-family: var(--at-ff-heading);\r\n font-weight: 600;\r\n font-size: clamp(22px, 2.2vw, 36px);\r\n line-height: 1.2;\r\n letter-spacing: -0.05em;\r\n text-transform: uppercase;\r\n color: var(--at-neutral-950, #0f0f0f);\r\n }\r\n\r\n &__cta {\r\n height: 50px;\r\n padding: 14px 27px;\r\n border-radius: 50px;\r\n background: var(--at-neutral-900, #1d1d1d);\r\n font-family: var(--at-ff-body);\r\n font-weight: 600;\r\n font-size: 16px;\r\n line-height: 1;\r\n letter-spacing: -0.05em;\r\n color: var(--at-neutral-0, #fefefe) !important;\r\n text-decoration: none !important;\r\n white-space: nowrap;\r\n transition: background 0.25s ease, color 0.25s ease;\r\n\r\n &:hover {\r\n background: var(--at-theme-primary);\r\n color: var(--at-neutral-0) !important;\r\n }\r\n }\r\n\r\n &__cta-arrow {\r\n flex-shrink: 0;\r\n color: currentColor;\r\n }\r\n}","@use '../../utils' as *;\n\n/*==================================================================\n Home 11 — Motion & Video Creative Studio\n==================================================================*/\n\n// ─── Shared spacing tokens ──────────────────────────────────────\n$h11-section-py: clamp(80px, 10vw, 140px);\n$h11-container-px: clamp(20px, 5.5vw, 96px);\n\n// ─── Shared eyebrow/dot ─────────────────────────────────────────\n.sec-1-home-11,\n.sec-2-home-11,\n.sec-3-home-11,\n.sec-4-home-11,\n.sec-5-home-11,\n.sec-6-home-11,\n.sec-7-home-11,\n.sec-8-home-11 {\n\n // Eyebrow dot shared across all sections\n &__eyebrow-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n }\n\n &__eyebrow-text {\n font-size: 13px;\n font-weight: 500;\n letter-spacing: 0.1em;\n color: var(--at-neutral-500);\n }\n}\n\n/*------------------------------------------------------------------\n Section 1 — Cinematic Hero\n------------------------------------------------------------------*/\n.sec-1-home-11 {\n position: relative;\n display: flex;\n flex-direction: column;\n background-color: var(--at-neutral-950);\n color: var(--at-common-white);\n overflow: hidden;\n\n // Full-bleed background\n &__bg {\n position: absolute;\n inset: 0;\n z-index: 0;\n }\n\n &__bg-video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n pointer-events: none;\n }\n\n &__bg-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to bottom,\n rgba(#0f0f0f, 0.55) 0%,\n rgba(#0f0f0f, 0.3) 40%,\n rgba(#0f0f0f, 0.75) 100%);\n }\n\n // Top navigation bar\n &__topbar {\n position: relative;\n z-index: 2;\n display: flex;\n align-items: center;\n gap: 16px;\n padding: clamp(20px, 2vw, 32px) $h11-container-px;\n padding-top: clamp(100px, 12vw, 140px);\n }\n\n &__topbar-label {\n font-size: 12px;\n letter-spacing: 0.12em;\n font-weight: 500;\n color: rgba(255, 255, 255, 0.65);\n }\n\n &__topbar-divider {\n width: 28px;\n height: 1px;\n background: rgba(255, 255, 255, 0.3);\n flex-shrink: 0;\n }\n\n // Hero headline\n &__headline {\n position: relative;\n z-index: 2;\n flex: 1;\n display: flex;\n align-items: flex-start;\n padding: 0 $h11-container-px;\n }\n\n &__title {\n font-size: clamp(64px, 14vw, 200px);\n font-weight: 700;\n line-height: 0.9;\n letter-spacing: -0.04em;\n text-transform: uppercase;\n color: var(--at-common-white);\n margin-bottom: 0;\n }\n\n // Footer row\n &__footer {\n position: relative;\n z-index: 2;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 24px;\n padding: clamp(32px, 4vw, 56px) $h11-container-px;\n }\n\n &__desc {\n font-size: clamp(14px, 1.1vw, 16px);\n line-height: 1.7;\n color: rgba(255, 255, 255, 0.7);\n max-width: 340px;\n margin-bottom: 0;\n }\n\n // Play reel button\n &__reel {\n display: inline-flex;\n align-items: center;\n gap: 14px;\n text-decoration: none;\n color: var(--at-common-white);\n transition: gap 0.3s ease;\n\n &:hover {\n gap: 20px;\n color: var(--at-common-white);\n\n .sec-1-home-11__reel-ring {\n background-color: var(--at-theme-primary);\n }\n }\n }\n\n &__reel-ring {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.4);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.3s ease, border-color 0.3s ease;\n flex-shrink: 0;\n }\n\n &__reel-icon {\n color: var(--at-common-white);\n margin-left: 2px;\n }\n\n &__reel-label {\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n\n // Scroll indicator\n &__scroll {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n }\n\n &__scroll-line {\n display: block;\n width: 1px;\n height: 48px;\n position: relative;\n background: rgba(255, 255, 255, 0.2);\n overflow: hidden;\n\n &::after {\n content: '';\n position: absolute;\n top: -100%;\n left: 0;\n width: 100%;\n height: 40%;\n background: linear-gradient(to bottom, transparent, var(--at-theme-primary) 50%, transparent);\n animation: scroll-line-drop 1.6s ease-in-out infinite;\n }\n }\n\n @keyframes scroll-line-drop {\n 0% { top: -40%; }\n 100% { top: 140%; }\n }\n\n &__scroll-text {\n font-size: 10px;\n letter-spacing: 0.14em;\n color: rgba(255, 255, 255, 0.5);\n writing-mode: vertical-rl;\n text-orientation: mixed;\n }\n\n // Award badge\n &__badge {\n position: absolute;\n top: 50%;\n right: clamp(20px, 5.5vw, 96px);\n transform: translateY(-50%);\n z-index: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: 16px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n\n @media (max-width: 767px) {\n display: none;\n }\n }\n\n &__badge-value {\n font-size: 10px;\n letter-spacing: 0.15em;\n font-weight: 700;\n color: var(--at-theme-primary);\n text-transform: uppercase;\n }\n\n &__badge-label {\n font-size: 11px;\n color: rgba(255, 255, 255, 0.7);\n display: block;\n margin-top: 4px;\n }\n\n &__badge-year {\n font-size: 24px;\n font-weight: 700;\n color: var(--at-common-white);\n line-height: 1;\n display: block;\n margin-top: 2px;\n }\n}\n\n// Hero reel modal (Bootstrap; markup follows sec-1 include)\n.sec-1-home-11__reel-modal {\n .modal-dialog {\n max-width: min(1100px, 96vw);\n }\n\n .sec-1-home-11__reel-modal-close {\n z-index: 2;\n opacity: 0.85;\n\n &:hover {\n opacity: 1;\n }\n }\n\n .sec-1-home-11__reel-modal-video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n/*------------------------------------------------------------------\n Section 2 — Trusted Clients Marquee\n------------------------------------------------------------------*/\n.sec-2-home-11 {\n background-color: var(--at-neutral-50);\n overflow: hidden;\n\n &__inner {\n padding: clamp(48px, 6vw, 80px) 0;\n }\n\n &__label {\n text-align: center;\n font-size: 12px;\n letter-spacing: 0.12em;\n color: var(--at-neutral-500);\n margin-bottom: 32px;\n }\n\n &__track-wrap {\n overflow: hidden;\n margin-bottom: 16px;\n\n &--reverse {\n margin-bottom: 0;\n }\n }\n\n &__track {\n display: flex;\n align-items: center;\n gap: clamp(32px, 5vw, 64px);\n width: max-content;\n }\n\n &__logo-item {\n flex-shrink: 0;\n opacity: 0.45;\n transition: opacity 0.3s ease;\n\n &:hover {\n opacity: 0.9;\n }\n\n img {\n max-height: 36px;\n width: auto;\n display: block;\n filter: grayscale(1);\n transition: filter 0.3s ease;\n\n &:hover {\n filter: grayscale(0);\n }\n }\n }\n}\n\n/*------------------------------------------------------------------\n Section 3 — About Studio\n------------------------------------------------------------------*/\n.sec-3-home-11 {\n &__container {\n max-width: 1400px;\n margin: 0 auto;\n padding: $h11-section-py $h11-container-px;\n }\n\n // ── Header ──────────────────────────────────────────────────\n &__head {\n padding-bottom: clamp(48px, 6vw, 80px);\n border-bottom: 1px solid var(--at-neutral-100);\n }\n\n &__eyebrow-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n }\n\n &__eyebrow-text {\n font-size: 13px;\n font-weight: 500;\n letter-spacing: 0.1em;\n color: var(--at-neutral-500);\n }\n\n &__title {\n font-size: clamp(40px, 5.5vw, 80px);\n font-weight: 700;\n line-height: 1.05;\n letter-spacing: -0.04em;\n color: var(--at-neutral-950);\n }\n\n &__intro {\n font-size: clamp(15px, 1.1vw, 17px);\n line-height: 1.75;\n color: var(--at-neutral-500);\n max-width: 440px;\n margin-left: auto;\n\n @media (max-width: 991px) {\n max-width: 100%;\n margin-left: 0;\n }\n }\n\n // ── Media / Images ──────────────────────────────────────────\n &__media-a,\n &__side {\n position: relative;\n }\n\n &__img-frame {\n border-radius: 4px;\n overflow: hidden;\n\n &--sq {\n aspect-ratio: 4 / 5;\n }\n }\n\n &__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n // ── Metric card ─────────────────────────────────────────────\n &__metric {\n position: absolute;\n bottom: -24px;\n right: -20px;\n background: var(--at-theme-primary);\n color: var(--at-common-white);\n padding: 20px 24px;\n text-align: center;\n z-index: 2;\n\n @media (max-width: 575px) {\n right: 0;\n bottom: 0;\n }\n }\n\n &__metric-value {\n font-size: clamp(32px, 4vw, 48px);\n font-weight: 700;\n line-height: 1;\n letter-spacing: -0.03em;\n }\n\n &__metric-label {\n font-size: 12px;\n letter-spacing: 0.06em;\n margin-top: 6px;\n line-height: 1.4;\n text-transform: uppercase;\n }\n\n // ── Year badge ──────────────────────────────────────────────\n &__year-badge {\n position: absolute;\n top: 24px;\n left: -16px;\n background: var(--at-neutral-950);\n color: var(--at-common-white);\n padding: 12px 18px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n z-index: 2;\n\n @media (max-width: 991px) {\n left: 16px;\n }\n }\n\n &__year-badge-est {\n font-size: 10px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n opacity: 0.6;\n }\n\n &__year-badge-num {\n font-size: 20px;\n font-weight: 700;\n letter-spacing: -0.03em;\n line-height: 1;\n }\n\n // ── Content column ──────────────────────────────────────────\n &__content {\n padding-top: clamp(16px, 2.5vw, 28px);\n }\n\n &__body {\n font-size: clamp(15px, 1.1vw, 17px);\n line-height: 1.75;\n color: var(--at-neutral-500);\n }\n\n &__divider {\n height: 1px;\n background: var(--at-neutral-100);\n margin: clamp(24px, 3vw, 40px) 0;\n }\n\n // ── Process steps ───────────────────────────────────────────\n &__steps {\n display: flex;\n flex-direction: column;\n gap: 22px;\n }\n\n &__step {\n display: flex;\n gap: 20px;\n align-items: flex-start;\n }\n\n &__step-num {\n flex-shrink: 0;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.1em;\n color: var(--at-theme-primary);\n padding-top: 3px;\n min-width: 22px;\n }\n\n &__step-copy {\n font-size: 14px;\n line-height: 1.65;\n color: var(--at-neutral-500);\n\n p {\n font-size: inherit;\n line-height: inherit;\n }\n }\n\n &__step-title {\n display: block;\n font-size: 15px;\n font-weight: 600;\n color: var(--at-neutral-950);\n margin-bottom: 4px;\n }\n\n // ── Quote ───────────────────────────────────────────────────\n &__quote {\n margin: 24px 0 0;\n padding: 20px 24px;\n border-left: 2px solid var(--at-theme-primary);\n background: var(--at-neutral-50);\n }\n\n &__quote-text {\n font-size: 15px;\n font-style: italic;\n color: var(--at-neutral-700);\n line-height: 1.65;\n }\n\n &__quote-attr {\n display: block;\n font-size: 11px;\n letter-spacing: 0.08em;\n color: var(--at-neutral-400);\n text-transform: uppercase;\n }\n\n // ── CTA ─────────────────────────────────────────────────────\n &__cta {\n font-size: 15px;\n font-weight: 500;\n color: var(--at-neutral-950);\n text-decoration: none;\n border-bottom: 1px solid currentColor;\n padding-bottom: 2px;\n transition: color 0.3s ease, gap 0.3s ease;\n\n &:hover {\n color: var(--at-theme-primary);\n }\n }\n\n // ── Stats bar ───────────────────────────────────────────────\n &__stats-bar {\n border-top: 1px solid var(--at-neutral-100);\n margin-top: clamp(48px, 7vw, 96px);\n }\n\n &__stat {\n padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);\n border-right: 1px solid var(--at-neutral-100);\n\n &:last-child {\n border-right: none;\n }\n\n @media (max-width: 767px) {\n border-bottom: 1px solid var(--at-neutral-100);\n\n &:nth-child(2n) {\n border-right: none;\n }\n }\n }\n\n &__stat-num {\n font-size: clamp(36px, 4vw, 56px);\n font-weight: 700;\n letter-spacing: -0.04em;\n color: var(--at-neutral-950);\n line-height: 1;\n }\n\n &__stat-label {\n font-size: 13px;\n color: var(--at-neutral-500);\n letter-spacing: 0.04em;\n margin-top: 6px;\n text-transform: uppercase;\n }\n}\n\n/*------------------------------------------------------------------\n Section 4 — Featured Works\n------------------------------------------------------------------*/\n.sec-4-home-11 {\n background-color: var(--at-neutral-50);\n\n &__container {\n max-width: 1400px;\n margin: 0 auto;\n padding: $h11-section-py $h11-container-px;\n }\n\n &__title {\n font-size: clamp(36px, 5vw, 72px);\n font-weight: 700;\n line-height: 1.05;\n letter-spacing: -0.04em;\n color: var(--at-neutral-950);\n margin-bottom: 0;\n }\n\n &__intro {\n font-size: clamp(14px, 1.1vw, 16px);\n line-height: 1.7;\n color: var(--at-neutral-500);\n }\n\n &__view-all {\n font-size: 14px;\n font-weight: 500;\n color: var(--at-neutral-950);\n text-decoration: none;\n border-bottom: 1px solid currentColor;\n padding-bottom: 2px;\n transition: color 0.3s ease;\n\n &:hover {\n color: var(--at-theme-primary);\n }\n }\n\n // Override default portfolio card styles for this section\n &__list {\n .mg-portfolio-item {\n padding-top: clamp(24px, 3vw, 40px);\n }\n\n .mg-portfolio-thumb {\n border-radius: 4px;\n overflow: hidden;\n\n a.cursor-hide {\n position: relative;\n display: block;\n }\n }\n\n .sec-4-home-11__thumb-title {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-sizing: border-box;\n width: max-content;\n max-width: calc(100% - clamp(24px, 6vw, 48px));\n padding: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 28px);\n font-size: clamp(54px, 6.6vw, 84px);\n font-weight: 600;\n line-height: 1.15;\n letter-spacing: -0.02em;\n text-align: center;\n color: var(--at-common-white);\n pointer-events: none;\n z-index: 2;\n }\n\n .cs-portfolio-title {\n font-size: clamp(20px, 2.5vw, 32px);\n font-weight: 600;\n letter-spacing: -0.02em;\n }\n }\n}\n\n/*------------------------------------------------------------------\n Section 5 — Services (modernized)\n------------------------------------------------------------------*/\n.sec-5-home-11 {\n position: relative;\n background-color: var(--at-neutral-0);\n overflow: hidden;\n\n // Subtle background decorative grid\n &__bg-deco {\n position: absolute;\n inset: 0;\n pointer-events: none;\n background-image:\n radial-gradient(circle at 20% 30%, rgba(var(--at-theme-primary-rgb, 240, 70, 14), 0.03) 0%, transparent 50%),\n radial-gradient(circle at 80% 70%, rgba(var(--at-theme-primary-rgb, 240, 70, 14), 0.02) 0%, transparent 50%);\n }\n\n &__container {\n max-width: 1400px;\n margin: 0 auto;\n padding: $h11-section-py $h11-container-px;\n position: relative;\n z-index: 1;\n }\n\n &__title {\n font-size: clamp(36px, 5vw, 72px);\n font-weight: 700;\n line-height: 1.05;\n letter-spacing: -0.04em;\n color: var(--at-neutral-950);\n margin-bottom: 0;\n }\n\n // Card\n &__card {\n position: relative;\n background-color: var(--at-common-white);\n border: 1px solid var(--at-neutral-100);\n border-radius: 6px;\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n box-shadow 0.4s ease,\n border-color 0.4s ease;\n\n &:hover {\n transform: translateY(-4px);\n box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08);\n border-color: transparent;\n\n .sec-5-home-11__card-accent {\n transform: scaleY(1);\n }\n\n .sec-5-home-11__card-num {\n color: var(--at-theme-primary);\n transform: translateX(2px);\n }\n }\n\n // Large cards (with image)\n &--lg {\n .sec-5-home-11__card-body {\n padding: clamp(24px, 3vw, 36px);\n }\n }\n\n // Small cards (text-only)\n &--sm {\n .sec-5-home-11__card-body {\n padding: clamp(28px, 3.5vw, 44px);\n }\n }\n }\n\n // Left accent border — scales up on hover\n &__card-accent {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: var(--at-theme-primary);\n transform: scaleY(0.3);\n transform-origin: top;\n transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n z-index: 2;\n }\n\n &__card-media {\n position: relative;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n }\n\n // Featured tag on first card\n &__card-tag {\n position: absolute;\n top: 16px;\n right: 16px;\n z-index: 2;\n padding: 4px 12px;\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--at-common-white);\n background: var(--at-theme-primary);\n border-radius: 2px;\n pointer-events: none;\n }\n\n &__card-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top,\n rgba(#0f0f0f, 0.45) 0%,\n rgba(#0f0f0f, 0.1) 50%,\n transparent 100%);\n pointer-events: none;\n transition: opacity 0.4s ease;\n }\n\n &__card-body {\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n // Card head: number + title row\n &__card-head {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n margin-bottom: 12px;\n }\n\n &__card-num {\n font-size: clamp(32px, 4vw, 48px);\n font-weight: 700;\n line-height: 0.85;\n letter-spacing: -0.04em;\n color: var(--at-neutral-100);\n flex-shrink: 0;\n transition: color 0.4s ease, transform 0.4s ease;\n min-width: clamp(40px, 5vw, 56px);\n }\n\n &__card-name {\n font-size: clamp(18px, 1.8vw, 24px);\n font-weight: 600;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n margin-bottom: 0;\n padding-top: 4px;\n }\n\n &__card-desc {\n font-size: 14px;\n line-height: 1.7;\n color: var(--at-neutral-500);\n }\n\n &__card-link {\n font-size: 13px;\n font-weight: 500;\n color: var(--at-neutral-950);\n text-decoration: none;\n border-bottom: 1px solid currentColor;\n padding-bottom: 1px;\n margin-top: auto;\n transition: color 0.3s ease, gap 0.3s ease;\n align-self: flex-start;\n\n &:hover {\n color: var(--at-theme-primary);\n gap: 10px;\n }\n }\n}\n\n/*------------------------------------------------------------------\n Section 6 — Studio Process\n------------------------------------------------------------------*/\n.sec-6-home-11 {\n background-color: var(--at-neutral-50);\n\n &__container {\n max-width: 1400px;\n margin: 0 auto;\n padding: $h11-section-py $h11-container-px;\n }\n\n &__title-block {\n padding-bottom: 40px;\n }\n\n &__title {\n font-size: clamp(36px, 5vw, 64px);\n font-weight: 700;\n line-height: 1.05;\n letter-spacing: -0.04em;\n color: var(--at-neutral-950);\n margin-bottom: 0;\n }\n\n &__intro {\n font-size: clamp(14px, 1.1vw, 16px);\n line-height: 1.7;\n color: var(--at-neutral-500);\n max-width: 380px;\n }\n\n &__cta {\n font-size: 14px;\n font-weight: 500;\n color: var(--at-neutral-950);\n text-decoration: none;\n border-bottom: 1px solid currentColor;\n padding-bottom: 2px;\n transition: color 0.3s ease;\n align-self: flex-start;\n\n &:hover {\n color: var(--at-theme-primary);\n }\n }\n\n // Steps list\n &__steps {\n padding: 0;\n }\n\n // Scroll stacking (same mechanics as home-6 sec-2 — `.scroll-section` + `section-fix`)\n &__scroll-stack {\n &.scroll-section {\n .wrapper {\n position: relative;\n }\n\n .sec-6-home-11__steps.list {\n position: relative;\n height: 100%;\n }\n\n .sec-6-home-11__step.item {\n border-top: none;\n border-bottom: none;\n background-color: var(--at-neutral-50);\n }\n\n // Tighter than default `100vh` cards so copy + media fit the stack viewport\n .item {\n min-height: min(88vh, 860px);\n\n &:first-child {\n min-height: min(88vh, 860px);\n height: auto;\n }\n }\n }\n }\n\n &__step {\n padding: clamp(32px, 4vw, 56px) 0;\n border-top: 1px solid var(--at-neutral-100);\n\n &:last-child {\n border-bottom: 1px solid var(--at-neutral-100);\n }\n }\n\n @media (max-width: 991px) {\n &__scroll-stack.scroll-section {\n .sec-6-home-11__steps.list {\n height: auto;\n }\n\n .sec-6-home-11__step.item {\n padding: clamp(24px, 5vw, 40px) 0;\n background: transparent;\n border: none;\n border-radius: 0;\n box-shadow: none;\n border-top: 1px solid var(--at-neutral-100);\n\n &:last-child {\n border-bottom: 1px solid var(--at-neutral-100);\n }\n }\n\n .item {\n position: relative !important;\n inset: auto !important;\n width: 100% !important;\n min-height: 0 !important;\n height: auto !important;\n transform: none !important;\n\n &:first-child {\n min-height: 0 !important;\n height: auto !important;\n }\n }\n }\n }\n\n &__step-num {\n font-size: clamp(48px, 6vw, 72px);\n font-weight: 700;\n letter-spacing: -0.04em;\n color: var(--at-neutral-100);\n line-height: 1;\n flex-shrink: 0;\n min-width: clamp(64px, 8vw, 100px);\n }\n\n &__step-title {\n font-size: clamp(22px, 2.5vw, 36px);\n font-weight: 600;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n }\n\n &__step-body {\n font-size: clamp(14px, 1.1vw, 16px);\n line-height: 1.7;\n color: var(--at-neutral-500);\n max-width: 480px;\n }\n\n &__step-media {\n margin-top: 20px;\n border-radius: 4px;\n overflow: hidden;\n aspect-ratio: 16 / 10;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n }\n\n &__tag {\n display: inline-flex;\n align-items: center;\n padding: 5px 12px;\n border: 1px solid var(--at-neutral-100);\n font-size: 11px;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n border-radius: 100px;\n }\n}\n\n/*------------------------------------------------------------------\n Section 7 — Testimonials\n------------------------------------------------------------------*/\n.sec-7-home-11 {\n &__container {\n max-width: 1400px;\n margin: 0 auto;\n padding: $h11-section-py $h11-container-px;\n }\n\n &__title {\n font-size: clamp(36px, 5vw, 72px);\n font-weight: 700;\n line-height: 1.05;\n letter-spacing: -0.04em;\n color: var(--at-neutral-950);\n margin-bottom: 0;\n }\n\n &__nav {\n gap: 8px;\n\n .swiper-btn-prev,\n .swiper-btn-next {\n border: 1px solid var(--at-neutral-100);\n border-radius: 50%;\n background: transparent;\n color: var(--at-neutral-950);\n transition: background 0.3s ease, color 0.3s ease;\n\n &:hover {\n background: var(--at-theme-primary);\n border-color: var(--at-theme-primary);\n color: var(--at-common-white);\n }\n }\n }\n\n &__swiper {\n .testimonial-cart-wrap {\n background: var(--at-neutral-50);\n border: 1px solid var(--at-neutral-100);\n }\n }\n}\n\n/*------------------------------------------------------------------\n Section 8 — Call to Action\n------------------------------------------------------------------*/\n.sec-8-home-11 {\n position: relative;\n overflow: hidden;\n background-color: var(--at-neutral-950);\n color: var(--at-common-white);\n\n &__bg {\n position: absolute;\n inset: 0;\n z-index: 0;\n }\n\n &__bg-wrap {\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n\n &__bg-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n &__bg-overlay {\n position: absolute;\n inset: 0;\n background: rgba(#0f0f0f, 0.82);\n }\n\n &__inner {\n position: relative;\n z-index: 1;\n padding: $h11-section-py 0;\n padding-bottom: 0;\n }\n\n // Scrolling type rows\n &__type-wrap {\n overflow: hidden;\n }\n\n &__big-line {\n font-size: clamp(48px, 10vw, 140px);\n font-weight: 700;\n line-height: 1.05;\n letter-spacing: -0.04em;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 0.08);\n white-space: nowrap;\n }\n\n // Inline image pills embedded inside scrolling text rows\n &__img-pill {\n display: inline-block;\n vertical-align: middle;\n height: 0.85em;\n overflow: hidden;\n border-radius: 16px;\n margin: 0 0.15em;\n position: relative;\n top: -0.04em;\n\n img {\n height: 100%;\n width: auto;\n display: block;\n object-fit: cover;\n }\n }\n\n // Unique rotation per pill — alternates direction across rows\n &__type-wrap {\n &:nth-child(1) {\n .sec-8-home-11__img-pill:nth-of-type(1) { transform: rotate(-5deg); }\n .sec-8-home-11__img-pill:nth-of-type(2) { transform: rotate(6deg); }\n }\n\n &:nth-child(2) {\n .sec-8-home-11__img-pill:nth-of-type(1) { transform: rotate(7deg); }\n .sec-8-home-11__img-pill:nth-of-type(2) { transform: rotate(-4deg); }\n }\n\n &:nth-child(3) {\n .sec-8-home-11__img-pill:nth-of-type(1) { transform: rotate(-6deg); }\n .sec-8-home-11__img-pill:nth-of-type(2) { transform: rotate(5deg); }\n }\n }\n\n // CTA block\n &__cta-block {\n padding: clamp(48px, 8vw, 120px) $h11-container-px;\n }\n\n &__cta-heading {\n font-size: clamp(40px, 7vw, 104px);\n font-weight: 700;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-common-white);\n margin-bottom: 0;\n }\n\n &__cta-sub {\n font-size: clamp(15px, 1.2vw, 18px);\n color: rgba(255, 255, 255, 0.6);\n margin-top: 20px;\n margin-bottom: 0;\n }\n\n &__btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 16px 32px;\n background: var(--at-theme-primary);\n color: var(--at-common-white);\n font-size: 15px;\n font-weight: 500;\n letter-spacing: 0.02em;\n text-decoration: none;\n border: 1px solid var(--at-theme-primary);\n transition: background 0.3s ease, color 0.3s ease;\n\n &:hover {\n background: transparent;\n color: var(--at-theme-primary);\n }\n }\n\n &__btn-secondary {\n display: inline-flex;\n align-items: center;\n padding: 16px 32px;\n background: transparent;\n color: var(--at-common-white);\n font-size: 15px;\n font-weight: 500;\n letter-spacing: 0.02em;\n text-decoration: none;\n border: 1px solid rgba(255, 255, 255, 0.25);\n transition: border-color 0.3s ease, color 0.3s ease;\n\n &:hover {\n border-color: var(--at-common-white);\n color: var(--at-common-white);\n }\n }\n\n &__email {\n font-size: clamp(13px, 1vw, 15px);\n color: rgba(255, 255, 255, 0.4);\n text-decoration: none;\n letter-spacing: 0.05em;\n transition: color 0.3s ease;\n\n &:hover {\n color: var(--at-common-white);\n }\n }\n}","@use '../../utils' as *;\n\n/* Home 12 / Section 1 — Hero (Pure Design. Potent Storytelling) */\n.sec-1-home-12 {\n --sec1h12-brand-2: #7f0b01;\n --sec1h12-tile-w: 370px;\n --sec1h12-tile-h: 360px;\n --sec1h12-tile-gap: 16px;\n\n background-color: var(--at-neutral-50);\n overflow: hidden;\n position: relative;\n}\n\n.sec-1-home-12__hero {\n padding-top: 56px;\n padding-bottom: 64px;\n}\n\n.sec-1-home-12__hero-inner {\n row-gap: 24px;\n}\n\n/* ── Social proof pill ───────────────────────────── */\n.sec-1-home-12__pill {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 6px 16px 6px 8px;\n background-color: var(--at-neutral-0);\n border-radius: 999px;\n}\n\n.sec-1-home-12__avatars {\n display: inline-flex;\n align-items: center;\n}\n\n.sec-1-home-12__avatar {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n object-fit: cover;\n box-shadow: 0 0 0 2px var(--at-neutral-0);\n\n &+& {\n margin-left: -10px;\n }\n}\n\n.sec-1-home-12__pill-text {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 14px;\n line-height: 1;\n letter-spacing: -0.28px;\n color: var(--at-neutral-700);\n white-space: nowrap;\n}\n\n/* ── Headline ────────────────────────────────────── */\n.sec-1-home-12__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(40px, 6.5vw, 84px);\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n\n /* SplitText line wrappers — clip overflow so chars rise from below */\n .split-line {\n overflow: hidden;\n padding-bottom: 0.12em;\n }\n}\n\n/* ── Subline ─────────────────────────────────────── */\n.sec-1-home-12__sub {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n max-width: 540px;\n}\n\n/* ── CTAs ────────────────────────────────────────── */\n.sec-1-home-12__ctas {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding-top: 8px;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.sec-1-home-12__btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n height: 50px;\n padding: 0;\n background: transparent;\n color: var(--at-neutral-0);\n text-decoration: none;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n transition: opacity 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-neutral-0);\n opacity: 0.9;\n }\n\n &:hover .sec-1-home-12__btn-primary-icon svg,\n &:focus-visible .sec-1-home-12__btn-primary-icon svg {\n transform: translate(2px, -2px);\n }\n}\n\n.sec-1-home-12__btn-primary-label {\n display: inline-flex;\n align-items: center;\n height: 50px;\n padding: 14px 27px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n border-radius: 50px;\n white-space: nowrap;\n}\n\n.sec-1-home-12__btn-primary-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n height: 50px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n border-radius: 50%;\n\n svg {\n transition: transform 0.3s ease;\n }\n}\n\n.sec-1-home-12__btn-secondary {\n display: inline-flex;\n align-items: center;\n height: 50px;\n padding: 14px 28px;\n border-radius: 999px;\n color: var(--at-neutral-950);\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 4px;\n transition: opacity 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-neutral-950);\n opacity: 0.7;\n }\n}\n\n/* ── Image strip — Swiper marquee ────────────────── */\n.sec-1-home-12__strip {\n position: relative;\n overflow: hidden;\n padding-inline: 24px;\n}\n\n.sec-1-home-12-slider {\n overflow: visible;\n\n .swiper-wrapper {\n /* Linear timing for continuous marquee feel */\n transition-timing-function: linear !important;\n }\n}\n\n.sec-1-home-12__tile {\n flex-shrink: 0;\n height: var(--sec1h12-tile-h);\n border-radius: 16px;\n overflow: hidden;\n position: relative;\n display: block;\n}\n\n.sec-1-home-12__tile-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.6s ease;\n}\n\n.sec-1-home-12__tile:hover .sec-1-home-12__tile-img,\n.sec-1-home-12__tile:focus-visible .sec-1-home-12__tile-img {\n transform: scale(1.05);\n}\n\n.sec-1-home-12__tile--brand-1 {\n background-color: var(--at-theme-primary);\n}\n\n.sec-1-home-12__tile--brand-2 {\n background-color: var(--sec1h12-brand-2);\n}\n\n.sec-1-home-12__tile--neutral-100 {\n background-color: var(--at-neutral-100);\n}\n\n.sec-1-home-12__tile--neutral-300 {\n background-color: var(--at-neutral-300);\n}\n\n.sec-1-home-12__tile--neutral-800 {\n background-color: var(--at-neutral-800);\n}\n\n/* ── Responsive ──────────────────────────────────── */\n@media #{$xxl} {\n .sec-1-home-12 {\n --sec1h12-tile-w: 320px;\n --sec1h12-tile-h: 320px;\n }\n}\n\n@media #{$xl} {\n .sec-1-home-12 {\n --sec1h12-tile-w: 280px;\n --sec1h12-tile-h: 280px;\n }\n}\n\n@media #{$lg} {\n .sec-1-home-12 {\n --sec1h12-tile-w: 240px;\n --sec1h12-tile-h: 240px;\n }\n .sec-1-home-12__hero {\n padding-top: 48px;\n padding-bottom: 48px;\n }\n}\n\n@media #{$md} {\n .sec-1-home-12 {\n --sec1h12-tile-w: 220px;\n --sec1h12-tile-h: 220px;\n --sec1h12-tile-gap: 12px;\n }\n .sec-1-home-12__hero {\n padding-top: 40px;\n padding-bottom: 48px;\n }\n}\n\n@media #{$sm} {\n .sec-1-home-12 {\n --sec1h12-tile-w: 220px;\n --sec1h12-tile-h: 220px;\n --sec1h12-tile-gap: 12px;\n }\n .sec-1-home-12__hero {\n padding-top: 32px;\n padding-bottom: 40px;\n }\n .sec-1-home-12__hero-inner {\n row-gap: 18px;\n }\n .sec-1-home-12__sub {\n max-width: 100%;\n }\n}\n\n@media #{$xs} {\n .sec-1-home-12 {\n --sec1h12-tile-w: 200px;\n --sec1h12-tile-h: 200px;\n --sec1h12-tile-gap: 10px;\n }\n .sec-1-home-12__hero {\n padding-top: 28px;\n padding-bottom: 32px;\n }\n .sec-1-home-12__hero-inner {\n row-gap: 16px;\n }\n .sec-1-home-12__pill-text {\n font-size: 13px;\n }\n .sec-1-home-12__btn-primary-label {\n padding: 14px 20px;\n }\n .sec-1-home-12__btn-secondary {\n padding: 14px 18px;\n }\n .sec-1-home-12__strip {\n padding-inline: 16px;\n }\n}\n","@use '../../utils' as *;\n\n/* Home 12 / Section 2 — Selected Projects */\n.sec-2-home-12 {\n background-color: var(--at-neutral-50);\n padding-top: 120px;\n}\n\n/* ── Section header ─────────────────────────────── */\n.sec-2-home-12__header {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n row-gap: 16px;\n margin-bottom: 64px;\n}\n\n.sec-2-home-12__eyebrow {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.24px;\n color: var(--at-theme-primary);\n text-transform: uppercase;\n}\n\n.sec-2-home-12__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(48px, 8vw, 124px);\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n\n.sec-2-home-12__sub {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n max-width: 620px;\n}\n\n/* ── Cards container ────────────────────────────── */\n.sec-2-home-12__cards {\n display: flex;\n flex-direction: column;\n row-gap: 32px;\n margin-inline: auto;\n max-width: 1280px;\n}\n\n/* ── Project card ───────────────────────────────── */\n.card-home-12-project {\n display: flex;\n align-items: center;\n gap: 48px;\n padding: 32px;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n border-radius: 24px;\n overflow: hidden;\n text-decoration: none;\n color: inherit;\n box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.18);\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n\n /* JS-driven stack: ScrollTrigger pins each card; transform-origin keeps the\n scale-down \"tucking under\" feel anchored at the top of each card. */\n transform-origin: 50% 0%;\n will-change: transform;\n\n &:hover,\n &:focus-visible {\n border-color: var(--at-neutral-300);\n box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.12);\n color: inherit;\n }\n\n &:hover .card-home-12-project__img,\n &:focus-visible .card-home-12-project__img {\n transform: scale(1.04);\n }\n\n &:hover .card-home-12-project__title,\n &:focus-visible .card-home-12-project__title {\n color: var(--at-theme-primary);\n }\n}\n\n.card-home-12-project__image {\n flex: 0 0 480px;\n width: 480px;\n height: 400px;\n border-radius: 16px;\n overflow: hidden;\n background-color: var(--at-neutral-100);\n position: relative;\n}\n\n.card-home-12-project__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.6s ease;\n}\n\n.card-home-12-project__content {\n flex: 1 1 0;\n min-width: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: 24px;\n}\n\n.card-home-12-project__top {\n display: flex;\n align-items: center;\n column-gap: 12px;\n}\n\n.card-home-12-project__num {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.24px;\n color: var(--at-theme-primary);\n}\n\n.card-home-12-project__dot {\n display: inline-block;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background-color: var(--at-neutral-300);\n}\n\n.card-home-12-project__label {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.24px;\n color: var(--at-neutral-500);\n text-transform: uppercase;\n}\n\n.card-home-12-project__title {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 36px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n transition: color 0.3s ease;\n}\n\n.card-home-12-project__desc {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n.card-home-12-project__tags {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n\n li {\n display: inline-flex;\n }\n}\n\n.card-home-12-project__tag {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 10.5px 19px;\n border: 1px solid var(--at-neutral-100);\n border-radius: 32px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: -0.24px;\n color: var(--at-neutral-900);\n text-transform: uppercase;\n white-space: nowrap;\n background-color: transparent;\n transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;\n\n &.is-filled {\n background-color: var(--at-neutral-900);\n border-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n }\n}\n\n/* ── Responsive ─────────────────────────────────── */\n@media #{$xxl} {\n .sec-2-home-12 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n\n .card-home-12-project__image {\n flex: 0 0 420px;\n width: 420px;\n height: 360px;\n }\n\n .card-home-12-project__title {\n font-size: 32px;\n }\n}\n\n@media #{$xl} {\n .sec-2-home-12 {\n padding-top: 90px;\n padding-bottom: 90px;\n }\n\n .card-home-12-project {\n gap: 32px;\n padding: 24px;\n }\n\n .card-home-12-project__image {\n flex: 0 0 360px;\n width: 360px;\n height: 320px;\n }\n\n .card-home-12-project__title {\n font-size: 30px;\n }\n}\n\n@media #{$lg} {\n .sec-2-home-12 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n\n .sec-2-home-12__header {\n margin-bottom: 48px;\n }\n\n .card-home-12-project {\n gap: 24px;\n padding: 20px;\n }\n\n .card-home-12-project__image {\n flex: 0 0 320px;\n width: 320px;\n height: 300px;\n }\n\n .card-home-12-project__content {\n row-gap: 16px;\n }\n\n .card-home-12-project__title {\n font-size: 28px;\n }\n}\n\n@media #{$md} {\n .sec-2-home-12 {\n padding-top: 64px;\n padding-bottom: 64px;\n }\n\n .sec-2-home-12__header {\n margin-bottom: 40px;\n row-gap: 12px;\n }\n\n .sec-2-home-12__cards {\n row-gap: 24px;\n }\n\n .card-home-12-project {\n flex-direction: column;\n align-items: stretch;\n gap: 24px;\n padding: 20px;\n }\n\n .card-home-12-project__image {\n flex: 0 0 auto;\n width: 100%;\n height: 360px;\n }\n\n .card-home-12-project__title {\n font-size: 28px;\n }\n}\n\n@media #{$sm} {\n .sec-2-home-12 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n\n .sec-2-home-12__header {\n margin-bottom: 32px;\n row-gap: 12px;\n }\n\n .sec-2-home-12__cards {\n row-gap: 20px;\n }\n\n .card-home-12-project {\n flex-direction: column;\n align-items: stretch;\n gap: 20px;\n padding: 16px;\n }\n\n .card-home-12-project__image {\n flex: 0 0 auto;\n width: 100%;\n height: 280px;\n }\n\n .card-home-12-project__content {\n row-gap: 14px;\n }\n\n .card-home-12-project__title {\n font-size: 24px;\n }\n\n .card-home-12-project__tag {\n padding: 9px 16px;\n font-size: 11px;\n }\n}\n\n@media #{$xs} {\n .sec-2-home-12 {\n padding-top: 48px;\n padding-bottom: 48px;\n }\n\n .sec-2-home-12__header {\n margin-bottom: 28px;\n }\n\n .card-home-12-project {\n flex-direction: column;\n align-items: stretch;\n gap: 18px;\n padding: 14px;\n border-radius: 20px;\n }\n\n .card-home-12-project__image {\n flex: 0 0 auto;\n width: 100%;\n height: 240px;\n }\n\n .card-home-12-project__content {\n row-gap: 12px;\n }\n\n .card-home-12-project__title {\n font-size: 22px;\n }\n\n .card-home-12-project__desc {\n font-size: 15px;\n }\n\n .card-home-12-project__tag {\n padding: 8px 14px;\n font-size: 10.5px;\n }\n}","@use '../../utils' as *;\n\n/* Home 12 / Section 3 — Our Services */\n.sec-3-home-12 {\n background-color: var(--at-neutral-50);\n padding-top: 120px;\n padding-bottom: 120px;\n}\n\n/* ── Section header ─────────────────────────────── */\n.sec-3-home-12__header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 48px;\n max-width: 1280px;\n margin-inline: auto;\n margin-bottom: 64px;\n}\n\n.sec-3-home-12__header-left {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: 16px;\n flex: 1 1 0;\n min-width: 0;\n}\n\n.sec-3-home-12__eyebrow {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.96px;\n color: var(--at-theme-primary);\n text-transform: uppercase;\n}\n\n.sec-3-home-12__title {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(36px, 5vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n\n.sec-3-home-12__lede {\n flex: 0 0 380px;\n max-width: 380px;\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n}\n\n/* ── Services grid ──────────────────────────────── */\n.sec-3-home-12__grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 24px;\n max-width: 1280px;\n margin-inline: auto;\n}\n\n/* ── Service card ───────────────────────────────── */\n.card-home-12-service {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n row-gap: 24px;\n padding: 32px;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n border-radius: 24px;\n text-decoration: none;\n color: inherit;\n transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;\n\n &:hover,\n &:focus-visible {\n border-color: var(--at-neutral-300);\n box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.12);\n color: inherit;\n }\n\n &:hover .card-home-12-service__title,\n &:focus-visible .card-home-12-service__title {\n color: var(--at-theme-primary);\n }\n\n &:hover .card-home-12-service__icon:not(.is-filled),\n &:focus-visible .card-home-12-service__icon:not(.is-filled) {\n background-color: var(--at-theme-primary);\n color: var(--at-neutral-0);\n }\n\n &:hover .card-home-12-service__icon svg,\n &:focus-visible .card-home-12-service__icon svg {\n transform: translate(2px, -2px);\n }\n}\n\n.card-home-12-service__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n}\n\n.card-home-12-service__num-wrap {\n display: inline-flex;\n align-items: center;\n column-gap: 8px;\n}\n\n.card-home-12-service__num-line {\n display: inline-block;\n width: 20px;\n height: 1px;\n background-color: var(--at-theme-primary);\n}\n\n.card-home-12-service__num {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.96px;\n color: var(--at-theme-primary);\n}\n\n.card-home-12-service__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 999px;\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n flex-shrink: 0;\n transition: background-color 0.3s ease, color 0.3s ease;\n\n svg {\n transition: transform 0.3s ease;\n }\n\n &.is-filled {\n background-color: var(--at-theme-primary);\n color: var(--at-neutral-0);\n }\n}\n\n.card-home-12-service__title {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 36px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n transition: color 0.3s ease;\n}\n\n.card-home-12-service__desc {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n}\n\n.card-home-12-service__tags {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n\n li {\n display: inline-flex;\n }\n}\n\n.card-home-12-service__tag {\n display: inline-flex;\n align-items: center;\n padding: 6px 10px;\n border: 1px solid var(--at-neutral-200, #cdcccc);\n border-radius: 999px;\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 12px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n white-space: nowrap;\n}\n\n/* ── Responsive ─────────────────────────────────── */\n@media #{$xxl} {\n .sec-3-home-12 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n\n@media #{$xl} {\n .sec-3-home-12 {\n padding-top: 90px;\n padding-bottom: 90px;\n }\n .card-home-12-service {\n padding: 24px;\n }\n .card-home-12-service__title {\n font-size: 30px;\n }\n}\n\n@media #{$lg} {\n .sec-3-home-12 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n .sec-3-home-12__header {\n margin-bottom: 48px;\n gap: 32px;\n }\n .sec-3-home-12__lede {\n flex-basis: 320px;\n max-width: 320px;\n }\n .sec-3-home-12__grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .card-home-12-service {\n padding: 24px;\n row-gap: 18px;\n }\n .card-home-12-service__title {\n font-size: 28px;\n }\n}\n\n@media #{$md} {\n .sec-3-home-12 {\n padding-top: 64px;\n padding-bottom: 64px;\n }\n .sec-3-home-12__header {\n flex-direction: column;\n align-items: flex-start;\n gap: 20px;\n margin-bottom: 40px;\n }\n .sec-3-home-12__lede {\n flex: 0 0 auto;\n max-width: 100%;\n }\n .sec-3-home-12__grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 16px;\n }\n .card-home-12-service {\n padding: 22px;\n row-gap: 16px;\n }\n .card-home-12-service__title {\n font-size: 26px;\n }\n}\n\n@media #{$sm} {\n .sec-3-home-12 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n .sec-3-home-12__header {\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n margin-bottom: 32px;\n }\n .sec-3-home-12__lede {\n flex: 0 0 auto;\n max-width: 100%;\n }\n .sec-3-home-12__grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n .card-home-12-service {\n padding: 20px;\n row-gap: 14px;\n border-radius: 20px;\n }\n .card-home-12-service__title {\n font-size: 26px;\n }\n}\n\n@media #{$xs} {\n .sec-3-home-12 {\n padding-top: 48px;\n padding-bottom: 48px;\n }\n .sec-3-home-12__header {\n flex-direction: column;\n align-items: flex-start;\n gap: 14px;\n margin-bottom: 28px;\n }\n .sec-3-home-12__lede {\n flex: 0 0 auto;\n max-width: 100%;\n font-size: 15px;\n }\n .sec-3-home-12__grid {\n grid-template-columns: 1fr;\n gap: 14px;\n }\n .card-home-12-service {\n padding: 18px;\n row-gap: 12px;\n border-radius: 18px;\n }\n .card-home-12-service__title {\n font-size: 24px;\n }\n .card-home-12-service__desc {\n font-size: 15px;\n }\n}\n","@use '../../utils' as *;\n\n/* Home 12 / Section 4 — Process Philosophy */\n.sec-4-home-12 {\n background-color: var(--at-neutral-50);\n padding-top: 120px;\n padding-bottom: 120px;\n}\n\n/* ── Section header ─────────────────────────────── */\n.sec-4-home-12__header {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n row-gap: 16px;\n margin-bottom: 64px;\n}\n\n.sec-4-home-12__eyebrow {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.96px;\n color: var(--at-neutral-500);\n text-transform: uppercase;\n}\n\n.sec-4-home-12__title {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(36px, 5vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n max-width: 980px;\n}\n\n/* ── Cards row ──────────────────────────────────── */\n.sec-4-home-12__row {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 24px;\n max-width: 1280px;\n margin-inline: auto;\n}\n\n/* ── Process card ───────────────────────────────── */\n.card-home-12-process {\n display: flex;\n flex-direction: column;\n row-gap: 24px;\n padding: 24px 24px 32px;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n border-radius: 24px;\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n\n &:hover,\n &:focus-within {\n border-color: var(--at-neutral-300);\n box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.12);\n }\n\n &:hover .card-home-12-process__img,\n &:focus-within .card-home-12-process__img {\n transform: scale(1.05);\n }\n}\n\n.card-home-12-process__image {\n width: 100%;\n aspect-ratio: 1 / 1;\n background-color: var(--at-neutral-50);\n border-radius: 16px;\n overflow: hidden;\n position: relative;\n}\n\n.card-home-12-process__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.6s ease;\n}\n\n.card-home-12-process__text {\n display: flex;\n flex-direction: column;\n row-gap: 8px;\n}\n\n.card-home-12-process__title {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 28px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n\n.card-home-12-process__desc {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n/* ── Responsive ─────────────────────────────────── */\n@media #{$xxl} {\n .sec-4-home-12 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n\n@media #{$xl} {\n .sec-4-home-12 {\n padding-top: 90px;\n padding-bottom: 90px;\n }\n .card-home-12-process {\n padding: 20px 20px 28px;\n }\n}\n\n@media #{$lg} {\n .sec-4-home-12 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n .sec-4-home-12__header {\n margin-bottom: 48px;\n }\n .sec-4-home-12__row {\n gap: 20px;\n }\n .card-home-12-process {\n padding: 20px 20px 24px;\n row-gap: 18px;\n }\n .card-home-12-process__title {\n font-size: 24px;\n }\n}\n\n@media #{$md} {\n .sec-4-home-12 {\n padding-top: 64px;\n padding-bottom: 64px;\n }\n .sec-4-home-12__header {\n margin-bottom: 40px;\n }\n .sec-4-home-12__row {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 16px;\n }\n .card-home-12-process {\n padding: 18px 18px 24px;\n row-gap: 16px;\n }\n .card-home-12-process__title {\n font-size: 24px;\n }\n}\n\n@media #{$sm} {\n .sec-4-home-12 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n .sec-4-home-12__header {\n margin-bottom: 32px;\n row-gap: 12px;\n }\n .sec-4-home-12__row {\n grid-template-columns: 1fr;\n gap: 16px;\n max-width: 480px;\n }\n .card-home-12-process {\n padding: 18px 18px 24px;\n row-gap: 16px;\n border-radius: 20px;\n }\n .card-home-12-process__title {\n font-size: 24px;\n }\n}\n\n@media #{$xs} {\n .sec-4-home-12 {\n padding-top: 48px;\n padding-bottom: 48px;\n }\n .sec-4-home-12__header {\n margin-bottom: 28px;\n row-gap: 12px;\n }\n .sec-4-home-12__row {\n grid-template-columns: 1fr;\n gap: 14px;\n }\n .card-home-12-process {\n padding: 16px 16px 20px;\n row-gap: 14px;\n border-radius: 18px;\n }\n .card-home-12-process__title {\n font-size: 22px;\n }\n .card-home-12-process__desc {\n font-size: 15px;\n }\n}\n","@use '../../utils' as *;\n\n/* Home 12 / Section 5 — Pricing */\n.sec-5-home-12 {\n background-color: var(--at-neutral-50);\n padding-top: 120px;\n padding-bottom: 120px;\n position: relative;\n overflow: hidden;\n}\n\n/* ── Dot pattern background ─────────────────────── */\n.sec-5-home-12__dots {\n position: absolute;\n inset: 0;\n pointer-events: none;\n opacity: 0.18;\n background-image:\n radial-gradient(circle, rgba(0, 0, 0, 0.45) 1.2px, transparent 1.4px),\n radial-gradient(circle, rgba(0, 0, 0, 0.45) 1.2px, transparent 1.4px);\n background-size: 96px 96px, 96px 96px;\n background-position: 0 0, 48px 48px;\n}\n\n/* ── Section header ─────────────────────────────── */\n.sec-5-home-12__header {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n row-gap: 16px;\n margin-bottom: 64px;\n}\n\n.sec-5-home-12__eyebrow {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.96px;\n color: var(--at-neutral-500);\n text-transform: uppercase;\n}\n\n.sec-5-home-12__title {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(36px, 5vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n\n/* ── Tables row ─────────────────────────────────── */\n.sec-5-home-12__tables {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 30px;\n max-width: 1287px;\n margin-inline: auto;\n margin-bottom: 64px;\n}\n\n/* ── Pricing card ───────────────────────────────── */\n.card-home-12-price {\n position: relative;\n background-color: var(--at-neutral-0);\n border-radius: 16px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.card-home-12-price__top {\n position: relative;\n background-color: var(--at-neutral-50);\n border-radius: 14px;\n margin: 16px 16px 0;\n padding: 25px 29px 32px;\n min-height: 289px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: 7px;\n}\n\n.card-home-12-price.is-popular .card-home-12-price__top {\n background-color: rgba(240, 70, 14, 0.1);\n}\n\n.card-home-12-price__badge {\n position: absolute;\n top: 23px;\n right: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 8px 10px;\n border-radius: 20px;\n background-color: var(--at-theme-primary);\n color: var(--at-neutral-0);\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 10px;\n line-height: 1;\n letter-spacing: -0.02em;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.card-home-12-price__plan {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 18px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n text-transform: capitalize;\n}\n\n.card-home-12-price__price {\n display: flex;\n align-items: flex-end;\n column-gap: 0;\n}\n\n.card-home-12-price__amount {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 48px;\n line-height: 52px;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n}\n\n.card-home-12-price__period {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n align-self: flex-end;\n padding-bottom: 4px;\n}\n\n.card-home-12-price__desc {\n margin: 24px 0 0;\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.45;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n max-width: 100%;\n}\n\n.card-home-12-price__cta {\n margin-top: auto;\n align-self: flex-start;\n display: inline-flex;\n align-items: center;\n column-gap: 12px;\n height: 50px;\n padding: 14px 42px;\n border-radius: 50px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n text-decoration: none;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.05em;\n transition: background-color 0.3s ease, transform 0.3s ease;\n\n &:hover,\n &:focus-visible {\n background-color: var(--at-theme-primary);\n color: var(--at-neutral-0);\n }\n\n &:hover .card-home-12-price__cta-icon svg,\n &:focus-visible .card-home-12-price__cta-icon svg {\n transform: translate(2px, -2px);\n }\n}\n\n.card-home-12-price__cta-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n svg {\n transition: transform 0.3s ease;\n }\n}\n\n/* ── Features list ──────────────────────────────── */\n.card-home-12-price__features {\n list-style: none;\n margin: 0;\n padding: 24px 45px 32px;\n display: flex;\n flex-direction: column;\n row-gap: 20px;\n\n li {\n display: flex;\n align-items: center;\n column-gap: 12px;\n }\n}\n\n.card-home-12-price__feature-icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n}\n\n.card-home-12-price__feature-text {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n}\n\n/* ── Custom pricing CTA ─────────────────────────── */\n.sec-5-home-12__custom {\n position: relative;\n display: flex;\n align-items: flex-start;\n column-gap: 10px;\n max-width: 483px;\n margin: 0 auto;\n padding-top: 8px;\n}\n\n.sec-5-home-12__custom-icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n margin-top: 4px;\n}\n\n.sec-5-home-12__custom-text {\n display: flex;\n flex-direction: column;\n row-gap: 17px;\n}\n\n.sec-5-home-12__custom-title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 24px;\n line-height: 1.3;\n letter-spacing: -0.05em;\n color: var(--at-neutral-800);\n}\n\n.sec-5-home-12__custom-desc {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 20px;\n line-height: 1.35;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n}\n\n.sec-5-home-12__custom-link {\n color: var(--at-neutral-700);\n text-decoration: underline;\n text-underline-offset: 3px;\n transition: color 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-theme-primary);\n }\n}\n\n/* ── Responsive ─────────────────────────────────── */\n@media #{$xxl} {\n .sec-5-home-12 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n\n@media #{$xl} {\n .sec-5-home-12 {\n padding-top: 90px;\n padding-bottom: 90px;\n }\n .sec-5-home-12__tables {\n gap: 20px;\n }\n .card-home-12-price__top {\n padding: 22px 24px 28px;\n }\n .card-home-12-price__features {\n padding: 22px 32px 28px;\n }\n .card-home-12-price__cta {\n padding: 14px 28px;\n }\n}\n\n@media #{$lg} {\n .sec-5-home-12 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n .sec-5-home-12__header {\n margin-bottom: 48px;\n }\n .sec-5-home-12__tables {\n gap: 18px;\n margin-bottom: 48px;\n }\n .card-home-12-price__top {\n padding: 20px 22px 26px;\n }\n .card-home-12-price__features {\n padding: 20px 26px 26px;\n row-gap: 16px;\n }\n .card-home-12-price__cta {\n padding: 14px 22px;\n font-size: 15px;\n }\n .card-home-12-price__amount {\n font-size: 42px;\n line-height: 46px;\n }\n}\n\n@media #{$md} {\n .sec-5-home-12 {\n padding-top: 64px;\n padding-bottom: 64px;\n }\n .sec-5-home-12__header {\n margin-bottom: 40px;\n }\n .sec-5-home-12__tables {\n grid-template-columns: 1fr;\n gap: 20px;\n max-width: 480px;\n margin-bottom: 40px;\n }\n .card-home-12-price__top {\n padding: 24px 28px 32px;\n min-height: auto;\n }\n .card-home-12-price__features {\n padding: 24px 32px 32px;\n }\n .sec-5-home-12__custom-title {\n font-size: 22px;\n }\n .sec-5-home-12__custom-desc {\n font-size: 18px;\n }\n}\n\n@media #{$sm} {\n .sec-5-home-12 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n .sec-5-home-12__header {\n margin-bottom: 32px;\n row-gap: 12px;\n }\n .sec-5-home-12__tables {\n grid-template-columns: 1fr;\n gap: 16px;\n margin-bottom: 32px;\n }\n .card-home-12-price__top {\n padding: 20px 22px 28px;\n min-height: auto;\n }\n .card-home-12-price__features {\n padding: 20px 26px 28px;\n row-gap: 14px;\n }\n .card-home-12-price__amount {\n font-size: 40px;\n line-height: 44px;\n }\n .sec-5-home-12__custom-title {\n font-size: 20px;\n }\n .sec-5-home-12__custom-desc {\n font-size: 16px;\n }\n}\n\n@media #{$xs} {\n .sec-5-home-12 {\n padding-top: 48px;\n padding-bottom: 48px;\n }\n .sec-5-home-12__header {\n margin-bottom: 28px;\n }\n .sec-5-home-12__tables {\n grid-template-columns: 1fr;\n gap: 14px;\n margin-bottom: 28px;\n }\n .card-home-12-price {\n border-radius: 14px;\n }\n .card-home-12-price__top {\n margin: 12px 12px 0;\n padding: 18px 18px 24px;\n border-radius: 12px;\n }\n .card-home-12-price__features {\n padding: 18px 20px 24px;\n row-gap: 12px;\n }\n .card-home-12-price__amount {\n font-size: 36px;\n line-height: 40px;\n }\n .card-home-12-price__cta {\n padding: 13px 20px;\n font-size: 14px;\n }\n .sec-5-home-12__dots {\n background-size: 64px 64px, 64px 64px;\n background-position: 0 0, 32px 32px;\n }\n}\n","@use '../../utils' as *;\n\n/* Home 12 / Section 6 — About + Brand logos (dark) */\n.sec-6-home-12 {\n background-color: #0f0f0f;\n color: var(--at-common-white);\n padding-bottom: 100px;\n padding-top: 32px;\n overflow: hidden;\n}\n\n/* ── Top bar with line ──────────────────────────── */\n.sec-6-home-12__topbar {\n position: relative;\n margin-bottom: 0;\n}\n\n.sec-6-home-12__topline {\n display: block;\n width: 100%;\n height: 1px;\n background-color: rgba(255, 255, 255, 0.18);\n margin-bottom: 24px;\n}\n\n.sec-6-home-12__topbar-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n column-gap: 24px;\n}\n\n.sec-6-home-12__topbar-label {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 14px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-0);\n white-space: nowrap;\n}\n\n/* ── Lede paragraph ─────────────────────────────── */\n.sec-6-home-12__lede-wrap {\n padding: 96px 0;\n}\n\n.sec-6-home-12__lede {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(24px, 3.5vw, 64px);\n line-height: 1.18;\n letter-spacing: -0.03em;\n color: var(--at-neutral-0);\n max-width: 100%;\n}\n\n/* ── Brand logos — Swiper marquee ────────────────── */\n.sec-6-home-12__brands-strip {\n position: relative;\n overflow: hidden;\n padding-inline: 24px;\n color: var(--at-neutral-0);\n}\n\n.sec-6-home-12-slider {\n overflow: visible;\n\n .swiper-wrapper {\n /* Linear timing for continuous marquee feel */\n transition-timing-function: linear !important;\n align-items: center;\n }\n}\n\n.sec-6-home-12__brand-slide {\n flex-shrink: 0;\n display: flex !important;\n align-items: center;\n justify-content: center;\n height: 64px;\n}\n\n.sec-6-home-12__brand-img {\n display: inline-block;\n height: 40px;\n width: auto;\n max-width: 100%;\n object-fit: contain;\n filter: brightness(0) invert(1);\n opacity: 0.95;\n}\n\n.sec-6-home-12__brand {\n display: inline-flex;\n align-items: center;\n column-gap: 8px;\n color: var(--at-neutral-0);\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 22px;\n line-height: 1;\n letter-spacing: -0.04em;\n}\n\n.sec-6-home-12__brand-mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 26px;\n height: 26px;\n color: var(--at-neutral-0);\n}\n\n.sec-6-home-12__brand-name {\n color: var(--at-neutral-0);\n}\n\n.sec-6-home-12__brand-name--logo {\n font-size: 24px;\n margin-right: 2px;\n}\n\n.sec-6-home-12__brand-loop {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n border: 2px solid var(--at-neutral-0);\n margin-right: 1px;\n\n &+& {\n margin-left: -7px;\n }\n}\n\n.sec-6-home-12__brand-name--oslo {\n display: inline-flex;\n align-items: baseline;\n font-weight: 600;\n font-size: 26px;\n letter-spacing: -0.04em;\n}\n\n.sec-6-home-12__brand-dot {\n color: var(--at-theme-primary);\n font-size: 1em;\n}\n\n/* ── Responsive ─────────────────────────────────── */\n@media #{$xxl} {\n .sec-6-home-12__lede-wrap {\n padding: 80px 0;\n }\n}\n\n@media #{$xl} {\n .sec-6-home-12__lede-wrap {\n padding: 72px 0;\n }\n .sec-6-home-12__brand-slide {\n height: 56px;\n }\n .sec-6-home-12__brand-img {\n height: 36px;\n }\n}\n\n@media #{$lg} {\n .sec-6-home-12 {\n padding-bottom: 80px;\n }\n .sec-6-home-12__lede-wrap {\n padding: 56px 0;\n }\n .sec-6-home-12__brand-slide {\n height: 52px;\n }\n .sec-6-home-12__brand-img {\n height: 32px;\n }\n .sec-6-home-12__brand {\n font-size: 20px;\n }\n}\n\n@media #{$md} {\n .sec-6-home-12 {\n padding-bottom: 64px;\n }\n .sec-6-home-12__lede-wrap {\n padding: 48px 0;\n }\n .sec-6-home-12__brand-slide {\n height: 48px;\n }\n .sec-6-home-12__brand-img {\n height: 28px;\n }\n .sec-6-home-12__brand {\n font-size: 18px;\n }\n}\n\n@media #{$sm} {\n .sec-6-home-12 {\n padding-bottom: 56px;\n }\n .sec-6-home-12__topline {\n margin-bottom: 18px;\n }\n .sec-6-home-12__lede-wrap {\n padding: 36px 0;\n }\n .sec-6-home-12__brand-slide {\n height: 44px;\n }\n .sec-6-home-12__brand-img {\n height: 24px;\n }\n .sec-6-home-12__brand {\n font-size: 17px;\n }\n .sec-6-home-12__topbar-label {\n font-size: 13px;\n }\n}\n\n@media #{$xs} {\n .sec-6-home-12 {\n padding-bottom: 48px;\n padding-top: 24px;\n }\n .sec-6-home-12__topline {\n margin-bottom: 14px;\n }\n .sec-6-home-12__lede-wrap {\n padding: 28px 0;\n }\n .sec-6-home-12__lede {\n font-size: 22px;\n line-height: 1.25;\n }\n .sec-6-home-12__brand-slide {\n height: 40px;\n }\n .sec-6-home-12__brand-img {\n height: 22px;\n }\n .sec-6-home-12__brand {\n font-size: 16px;\n }\n .sec-6-home-12__topbar-label {\n font-size: 12px;\n }\n}\n","@use '../../utils' as *;\n\n/* Home 12 / Section 7 — Testimonials */\n.sec-7-home-12 {\n background-color: var(--at-neutral-50);\n border-bottom: 1px solid var(--at-neutral-200, #cdcccc);\n padding-top: 120px;\n padding-bottom: 120px;\n}\n\n/* ── Section header ─────────────────────────────── */\n.sec-7-home-12__header {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n row-gap: 16px;\n margin-bottom: 80px;\n}\n\n.sec-7-home-12__eyebrow {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.96px;\n color: var(--at-neutral-500);\n text-transform: uppercase;\n}\n\n.sec-7-home-12__title {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(36px, 5vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n\n/* ── Cards row (3 staggered columns) ────────────── */\n.sec-7-home-12__row {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 24px;\n max-width: 1280px;\n margin-inline: auto;\n align-items: start;\n}\n\n.sec-7-home-12__col {\n display: flex;\n flex-direction: column;\n row-gap: 24px;\n}\n\n.sec-7-home-12__col--offset-lg {\n padding-top: 48px;\n}\n\n.sec-7-home-12__col--offset-sm {\n padding-top: 16px;\n}\n\n/* ── Testimonial card ───────────────────────────── */\n.card-home-12-testimonial {\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n border-radius: 20px;\n padding: 24px;\n display: flex;\n flex-direction: column;\n row-gap: 16px;\n transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;\n\n &:hover,\n &:focus-within {\n border-color: var(--at-neutral-300);\n box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.12);\n }\n}\n\n.card-home-12-testimonial--dark {\n background-color: var(--at-neutral-950);\n border-color: var(--at-neutral-950);\n\n .card-home-12-testimonial__quote {\n color: var(--at-neutral-0);\n }\n\n .card-home-12-testimonial__name {\n color: var(--at-neutral-0);\n }\n\n .card-home-12-testimonial__role {\n color: var(--at-neutral-300);\n }\n\n &:hover,\n &:focus-within {\n border-color: var(--at-neutral-800);\n }\n}\n\n.card-home-12-testimonial__quote {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n}\n\n.card-home-12-testimonial__author {\n display: flex;\n align-items: center;\n column-gap: 12px;\n}\n\n.card-home-12-testimonial__avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n flex-shrink: 0;\n}\n\n.card-home-12-testimonial__meta {\n display: flex;\n flex-direction: column;\n row-gap: 4px;\n line-height: 1;\n}\n\n.card-home-12-testimonial__name {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 15px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n}\n\n.card-home-12-testimonial__role {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n/* ── Responsive ─────────────────────────────────── */\n@media #{$xxl} {\n .sec-7-home-12 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n\n@media #{$xl} {\n .sec-7-home-12 {\n padding-top: 90px;\n padding-bottom: 90px;\n }\n .sec-7-home-12__row {\n gap: 18px;\n }\n .sec-7-home-12__col {\n row-gap: 18px;\n }\n}\n\n@media #{$lg} {\n .sec-7-home-12 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n .sec-7-home-12__header {\n margin-bottom: 56px;\n }\n .sec-7-home-12__row {\n gap: 16px;\n }\n .sec-7-home-12__col {\n row-gap: 16px;\n }\n .sec-7-home-12__col--offset-lg {\n padding-top: 32px;\n }\n .sec-7-home-12__col--offset-sm {\n padding-top: 12px;\n }\n}\n\n@media #{$md} {\n .sec-7-home-12 {\n padding-top: 64px;\n padding-bottom: 64px;\n }\n .sec-7-home-12__header {\n margin-bottom: 48px;\n }\n .sec-7-home-12__row {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 16px;\n }\n .sec-7-home-12__col {\n row-gap: 16px;\n padding-top: 0 !important;\n }\n .card-home-12-testimonial {\n padding: 20px;\n }\n}\n\n@media #{$sm} {\n .sec-7-home-12 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n .sec-7-home-12__header {\n margin-bottom: 40px;\n row-gap: 12px;\n }\n .sec-7-home-12__row {\n grid-template-columns: 1fr;\n gap: 14px;\n }\n .sec-7-home-12__col {\n row-gap: 14px;\n padding-top: 0 !important;\n }\n .card-home-12-testimonial {\n padding: 18px;\n border-radius: 18px;\n }\n}\n\n@media #{$xs} {\n .sec-7-home-12 {\n padding-top: 48px;\n padding-bottom: 48px;\n }\n .sec-7-home-12__header {\n margin-bottom: 32px;\n row-gap: 12px;\n }\n .sec-7-home-12__row {\n grid-template-columns: 1fr;\n gap: 12px;\n }\n .sec-7-home-12__col {\n row-gap: 12px;\n padding-top: 0 !important;\n }\n .card-home-12-testimonial {\n padding: 16px;\n border-radius: 16px;\n row-gap: 14px;\n }\n .card-home-12-testimonial__quote {\n font-size: 15px;\n }\n}\n","@use '../../utils' as *;\n\n/* Home 12 / Section 8 — FAQ accordion */\n.sec-8-home-12 {\n background-color: var(--at-neutral-50);\n padding-top: 120px;\n padding-bottom: 120px;\n}\n\n/* ── Section header ─────────────────────────────── */\n.sec-8-home-12__header {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n row-gap: 16px;\n margin-bottom: 64px;\n}\n\n.sec-8-home-12__eyebrow {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.96px;\n color: var(--at-neutral-500);\n text-transform: uppercase;\n}\n\n.sec-8-home-12__title {\n margin: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(36px, 5vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n\n/* ── List ───────────────────────────────────────── */\n.sec-8-home-12__list {\n display: flex;\n flex-direction: column;\n row-gap: 12px;\n max-width: 800px;\n margin-inline: auto;\n}\n\n/* ── Accordion item (native
) ──────────── */\n.sec-8-home-12__item {\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n border-radius: 16px;\n overflow: hidden;\n transition: border-color 0.3s ease;\n\n &[open] {\n border-color: var(--at-neutral-300);\n }\n}\n\n.sec-8-home-12__summary {\n list-style: none;\n cursor: pointer;\n padding: 22px 24px 22px 28px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n column-gap: 16px;\n user-select: none;\n\n &::-webkit-details-marker {\n display: none;\n }\n\n &::marker {\n content: '';\n }\n}\n\n.sec-8-home-12__question {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 17px;\n line-height: 1.3;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n}\n\n.sec-8-home-12__toggle {\n flex-shrink: 0;\n position: relative;\n width: 32px;\n height: 32px;\n border-radius: 999px;\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n\n.sec-8-home-12__bar {\n position: absolute;\n background-color: currentColor;\n border-radius: 1px;\n transition: opacity 0.25s ease, transform 0.25s ease;\n}\n\n.sec-8-home-12__bar--h {\n width: 14px;\n height: 1.6px;\n}\n\n.sec-8-home-12__bar--v {\n width: 1.6px;\n height: 14px;\n}\n\n.sec-8-home-12__item[open] .sec-8-home-12__toggle {\n background-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n}\n\n.sec-8-home-12__item[open] .sec-8-home-12__bar--v {\n opacity: 0;\n transform: scaleY(0);\n}\n\n.sec-8-home-12__answer {\n padding: 0 24px 22px 28px;\n display: flex;\n flex-direction: column;\n row-gap: 16px;\n\n p {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n }\n}\n\n.sec-8-home-12__divider {\n display: block;\n width: 100%;\n height: 1px;\n background-color: var(--at-neutral-100);\n margin-top: -2px;\n}\n\n/* ── Responsive ─────────────────────────────────── */\n@media #{$xxl} {\n .sec-8-home-12 {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n}\n\n@media #{$xl} {\n .sec-8-home-12 {\n padding-top: 90px;\n padding-bottom: 90px;\n }\n}\n\n@media #{$lg} {\n .sec-8-home-12 {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n .sec-8-home-12__header {\n margin-bottom: 48px;\n }\n}\n\n@media #{$md} {\n .sec-8-home-12 {\n padding-top: 64px;\n padding-bottom: 64px;\n }\n .sec-8-home-12__header {\n margin-bottom: 40px;\n }\n .sec-8-home-12__summary {\n padding: 20px 22px 20px 24px;\n }\n .sec-8-home-12__answer {\n padding: 0 22px 20px 24px;\n }\n .sec-8-home-12__question {\n font-size: 16px;\n }\n}\n\n@media #{$sm} {\n .sec-8-home-12 {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n .sec-8-home-12__header {\n margin-bottom: 32px;\n row-gap: 12px;\n }\n .sec-8-home-12__list {\n row-gap: 10px;\n }\n .sec-8-home-12__summary {\n padding: 18px 20px 18px 22px;\n column-gap: 12px;\n }\n .sec-8-home-12__answer {\n padding: 0 20px 20px 22px;\n row-gap: 14px;\n\n p {\n font-size: 15px;\n }\n }\n .sec-8-home-12__question {\n font-size: 15px;\n line-height: 1.35;\n }\n .sec-8-home-12__toggle {\n width: 28px;\n height: 28px;\n }\n .sec-8-home-12__bar--h {\n width: 12px;\n }\n .sec-8-home-12__bar--v {\n height: 12px;\n }\n}\n\n@media #{$xs} {\n .sec-8-home-12 {\n padding-top: 48px;\n padding-bottom: 48px;\n }\n .sec-8-home-12__header {\n margin-bottom: 28px;\n }\n .sec-8-home-12__list {\n row-gap: 8px;\n }\n .sec-8-home-12__item {\n border-radius: 14px;\n }\n .sec-8-home-12__summary {\n padding: 16px 18px 16px 20px;\n column-gap: 12px;\n }\n .sec-8-home-12__answer {\n padding: 0 18px 18px 20px;\n row-gap: 12px;\n\n p {\n font-size: 14.5px;\n }\n }\n .sec-8-home-12__question {\n font-size: 14.5px;\n line-height: 1.4;\n }\n .sec-8-home-12__toggle {\n width: 26px;\n height: 26px;\n }\n .sec-8-home-12__bar--h {\n width: 11px;\n }\n .sec-8-home-12__bar--v {\n height: 11px;\n }\n}\n","@use '../../utils' as *;\n\n/* Home 13 / Section 1 — Hero (Orisa® Architecture) */\n.sec-1-home-13 {\n background-color: var(--at-neutral-50);\n padding: 160px 32px 32px;\n}\n\n.sec-1-home-13__inner {\n display: flex;\n flex-direction: column;\n gap: 24px;\n width: 100%;\n margin-inline: auto;\n}\n\n/* ── Top row ─────────────────────────────────── */\n.sec-1-home-13__top {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 24px;\n width: 100%;\n}\n\n.sec-1-home-13__brand {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(48px, 11vw, 188px);\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n white-space: nowrap;\n\n sup {\n font-size: 0.5em;\n top: -0.55em;\n font-weight: 600;\n }\n}\n\n.sec-1-home-13__since {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n text-decoration: underline;\n text-underline-offset: 4px;\n white-space: nowrap;\n flex-shrink: 0;\n transition: opacity 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-neutral-900);\n opacity: 0.7;\n }\n}\n\n/* ── Hero card ───────────────────────────────── */\n.sec-1-home-13__card {\n position: relative;\n width: 100%;\n height: 760px;\n border-radius: 32px;\n overflow: hidden;\n isolation: isolate;\n}\n\n/* ── Main slider ─────────────────────────────── */\n.sec-1-home-13__main {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n\n .swiper-wrapper,\n .swiper-slide {\n height: 100%;\n }\n}\n\n.sec-1-home-13__slide {\n position: relative;\n overflow: hidden;\n}\n\n.sec-1-home-13__bg {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center;\n z-index: 0;\n}\n\n.sec-1-home-13__overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.55) 100%);\n z-index: 1;\n}\n\n.sec-1-home-13__content {\n position: absolute;\n inset: 0;\n padding: 48px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n gap: 19px;\n z-index: 2;\n\n /* leave room for the thumbs strip */\n padding-bottom: 200px;\n}\n\n.sec-1-home-13__tagline {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 16px;\n line-height: 1.2;\n color: var(--at-common-white);\n letter-spacing: 0;\n\n span {\n display: inline-block;\n }\n}\n\n.sec-1-home-13__headline {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(28px, 4vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.05em;\n color: var(--at-common-white);\n max-width: 871px;\n}\n\n/* ── Vertical nav buttons ────────────────────── */\n.sec-1-home-13__nav {\n position: absolute;\n top: 50%;\n right: 48px;\n transform: translateY(-50%);\n z-index: 4;\n flex-direction: column;\n gap: 12px;\n\n /* prev arrow points up, next arrow points down */\n .swiper-btn-prev svg,\n .swiper-btn-next svg {\n transform: rotate(90deg);\n }\n}\n\n/* ── Thumbs slider ───────────────────────────── */\n.sec-1-home-13__thumbs {\n position: absolute;\n left: 48px;\n right: 48px;\n bottom: 48px;\n z-index: 3;\n\n .swiper-slide {\n height: auto;\n }\n}\n\n.sec-1-home-13__service {\n position: relative;\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 12px 20px 12px 12px;\n background-color: var(--at-common-white);\n border: 0;\n border-radius: 16px;\n box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);\n min-width: 0;\n cursor: pointer;\n text-align: left;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n\n &::after {\n content: '';\n position: absolute;\n top: 8px;\n right: 8px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n opacity: 0;\n transform: scale(0.4);\n transition: opacity 0.3s ease, transform 0.3s ease;\n pointer-events: none;\n }\n\n &:hover {\n transform: translateY(-2px);\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.14);\n }\n\n &.swiper-slide-thumb-active {\n box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.18);\n\n &::after {\n opacity: 1;\n transform: scale(1);\n }\n\n .sec-1-home-13__service-img {\n border-radius: 16px;\n }\n }\n}\n\n.sec-1-home-13__service-img {\n flex-shrink: 0;\n width: 64px;\n height: 64px;\n border-radius: 4px;\n overflow: hidden;\n display: block;\n transition: border-radius 0.3s ease;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n}\n\n.sec-1-home-13__service-meta {\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 0;\n}\n\n.sec-1-home-13__service-num {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n.sec-1-home-13__service-name {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 18px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media #{$xxl} {\n .sec-1-home-13__card {\n height: 680px;\n }\n\n .sec-1-home-13__content {\n padding: 40px;\n padding-bottom: 180px;\n }\n\n .sec-1-home-13__thumbs {\n left: 40px;\n right: 40px;\n bottom: 40px;\n }\n\n .sec-1-home-13__nav {\n right: 40px;\n }\n}\n\n@media #{$xl} {\n .sec-1-home-13 {\n padding: 48px 24px 24px;\n }\n\n .sec-1-home-13__card {\n height: 620px;\n }\n\n .sec-1-home-13__content {\n padding: 32px;\n padding-bottom: 200px;\n }\n\n .sec-1-home-13__thumbs {\n left: 32px;\n right: 32px;\n bottom: 32px;\n }\n\n .sec-1-home-13__nav {\n right: 32px;\n gap: 10px;\n }\n\n .sec-1-home-13__service {\n padding: 10px 14px 10px 10px;\n gap: 10px;\n }\n\n .sec-1-home-13__service-img {\n width: 52px;\n height: 52px;\n }\n\n .sec-1-home-13__service-name {\n font-size: 16px;\n }\n}\n\n@media #{$lg} {\n .sec-1-home-13 {\n padding: 36px 20px 20px;\n }\n\n .sec-1-home-13__card {\n height: 560px;\n }\n\n .sec-1-home-13__content {\n padding: 28px;\n padding-bottom: 180px;\n }\n\n .sec-1-home-13__thumbs {\n left: 24px;\n right: 24px;\n bottom: 24px;\n }\n\n .sec-1-home-13__nav {\n right: 24px;\n }\n}\n\n@media #{$md} {\n .sec-1-home-13 {\n padding: 128px 16px 16px;\n }\n\n .sec-1-home-13__top {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n\n .sec-1-home-13__brand {\n white-space: normal;\n }\n\n .sec-1-home-13__card {\n height: 540px;\n border-radius: 24px;\n }\n\n .sec-1-home-13__content {\n padding: 24px;\n padding-bottom: 220px;\n }\n\n .sec-1-home-13__thumbs {\n left: 16px;\n right: 16px;\n bottom: 16px;\n }\n\n .sec-1-home-13__nav {\n right: 16px;\n gap: 8px;\n }\n}\n\n@media #{$sm} {\n .sec-1-home-13__card {\n height: 520px;\n }\n\n .sec-1-home-13__content {\n padding-bottom: 200px;\n }\n\n .sec-1-home-13__service-name {\n font-size: 14px;\n }\n}\n\n@media #{$xs} {\n .sec-1-home-13 {\n padding: 100px 12px 12px;\n }\n\n .sec-1-home-13__card {\n height: 500px;\n border-radius: 20px;\n }\n\n .sec-1-home-13__content {\n padding: 18px;\n padding-bottom: 180px;\n }\n\n .sec-1-home-13__headline {\n font-size: 26px;\n }\n\n .sec-1-home-13__thumbs {\n left: 12px;\n right: 12px;\n bottom: 12px;\n }\n\n .sec-1-home-13__nav {\n right: 12px;\n }\n}\n\n/* Cascading mobile pivot: stack top row + wrap brand from tablet down */\n@media (max-width: 991.98px) {\n .sec-1-home-13__top {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n\n .sec-1-home-13__brand {\n white-space: normal;\n }\n}","@use '../../utils' as *;\n\n/* Home 13 / Section 2 — About Us */\n.sec-2-home-13 {\n background-color: var(--at-neutral-50);\n padding: 120px 96px 0;\n}\n\n.sec-2-home-13__inner {\n display: flex;\n flex-direction: column;\n gap: 80px;\n width: 100%;\n}\n\n/* ── Top row ─────────────────────────────────── */\n.sec-2-home-13__top {\n display: grid;\n grid-template-columns: 380px 1fr;\n gap: 96px;\n align-items: start;\n}\n\n/* ── Left column ─────────────────────────────── */\n.sec-2-home-13__left {\n display: flex;\n flex-direction: column;\n gap: 184px;\n}\n\n.sec-2-home-13__label {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\n.sec-2-home-13__label-dot {\n width: 8px;\n height: 8px;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n}\n\n.sec-2-home-13__label-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n}\n\n.sec-2-home-13__intro {\n display: flex;\n flex-direction: column;\n gap: 16px;\n align-items: flex-start;\n}\n\n.sec-2-home-13__intro-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n\n strong {\n font-weight: 700;\n }\n}\n\n.sec-2-home-13__team {\n display: inline-flex;\n align-items: center;\n padding-left: 0;\n}\n\n.sec-2-home-13__team-avatar {\n width: 65px;\n height: 65px;\n border-radius: 50%;\n overflow: hidden;\n border: 4px solid var(--at-neutral-0);\n box-sizing: border-box;\n background-color: var(--at-neutral-100);\n\n &+& {\n margin-left: -25px;\n }\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n}\n\n.sec-2-home-13__cta {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n height: 50px;\n padding: 14px 27px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n border-radius: 50px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n text-decoration: none;\n transition: opacity 0.3s ease, transform 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-neutral-0);\n opacity: 0.9;\n }\n\n svg {\n transition: transform 0.3s ease;\n }\n\n &:hover svg,\n &:focus-visible svg {\n transform: translate(2px, -2px);\n }\n}\n\n/* ── Right column ────────────────────────────── */\n.sec-2-home-13__right {\n display: flex;\n flex-direction: column;\n gap: 64px;\n min-width: 0;\n}\n\n.sec-2-home-13__head {\n display: flex;\n flex-direction: column;\n gap: 11px;\n align-items: flex-start;\n}\n\n.sec-2-home-13__pill {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n border-radius: 999px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n}\n\n.sec-2-home-13__pill-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: #22c55e;\n flex-shrink: 0;\n box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);\n}\n\n.sec-2-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(32px, 3.2vw, 56px);\n line-height: 1.143;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-2-home-13__grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n align-items: start;\n}\n\n.sec-2-home-13__col {\n display: flex;\n flex-direction: column;\n gap: 16px;\n min-width: 0;\n}\n\n.sec-2-home-13__media {\n width: 100%;\n border-radius: 16px;\n overflow: hidden;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n}\n\n\n.sec-2-home-13__caption-title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 36px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n margin-bottom: 16px !important;\n}\n\n.sec-2-home-13__caption-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n}\n\n/* ── Stats row ───────────────────────────────── */\n.sec-2-home-13__stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n border-top: 1px solid var(--at-neutral-100);\n padding: 64px 0 96px;\n margin: 0;\n}\n\n.sec-2-home-13__stat {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 0 32px;\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n}\n\n.sec-2-home-13__stat-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n}\n\n.sec-2-home-13__stat-icon {\n width: 42px;\n height: 42px;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n img {\n width: 26px;\n height: 26px;\n object-fit: contain;\n }\n}\n\n.sec-2-home-13__stat-tag {\n display: inline-flex;\n align-items: center;\n padding: 5px 10px;\n background-color: rgba(240, 70, 14, 0.12);\n color: var(--at-theme-primary);\n border-radius: 999px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 11px;\n line-height: 1.2;\n letter-spacing: -0.02em;\n white-space: nowrap;\n}\n\n.sec-2-home-13__stat-num {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(48px, 5.5vw, 84px);\n line-height: 1.05;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n\n.sec-2-home-13__stat-cap {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media #{$xxl} {\n .sec-2-home-13 {\n padding: 96px 32px 0;\n }\n\n .sec-2-home-13__top {\n grid-template-columns: 320px 1fr;\n gap: 64px;\n }\n\n .sec-2-home-13__left {\n gap: 96px;\n }\n}\n\n@media #{$xl} {\n .sec-2-home-13 {\n padding: 80px 24px 0;\n }\n\n .sec-2-home-13__inner {\n gap: 64px;\n }\n\n .sec-2-home-13__top {\n grid-template-columns: 280px 1fr;\n gap: 48px;\n }\n\n .sec-2-home-13__left {\n gap: 64px;\n }\n\n .sec-2-home-13__right {\n gap: 48px;\n }\n\n .sec-2-home-13__media {\n height: 280px;\n }\n\n .sec-2-home-13__media--tall {\n height: 460px;\n }\n\n .sec-2-home-13__stats {\n padding: 48px 0 64px;\n }\n\n .sec-2-home-13__stat {\n padding: 0 20px;\n }\n}\n\n@media #{$lg} {\n .sec-2-home-13 {\n padding: 64px 20px 0;\n }\n\n .sec-2-home-13__top {\n grid-template-columns: 1fr;\n gap: 48px;\n }\n\n .sec-2-home-13__left {\n gap: 32px;\n }\n\n .sec-2-home-13__media {\n height: 240px;\n }\n\n .sec-2-home-13__media--tall {\n height: 380px;\n }\n\n .sec-2-home-13__caption-title {\n font-size: 28px;\n }\n\n .sec-2-home-13__stats {\n grid-template-columns: repeat(2, 1fr);\n padding: 48px 0 64px;\n gap: 48px 0;\n }\n\n .sec-2-home-13__stat {\n padding: 0 16px;\n }\n}\n\n@media #{$md} {\n .sec-2-home-13 {\n padding: 48px 30px 0;\n }\n\n .sec-2-home-13__inner {\n gap: 48px;\n }\n\n .sec-2-home-13__grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n}\n\n@media #{$sm} {\n .sec-2-home-13 {\n padding: 36px 30px 0;\n }\n\n .sec-2-home-13__intro-text {\n font-size: 15px;\n }\n\n .sec-2-home-13__team-avatar {\n width: 56px;\n height: 56px;\n }\n\n .sec-2-home-13__title {\n font-size: 28px;\n }\n\n .sec-2-home-13__stats {\n grid-template-columns: 1fr;\n gap: 32px 0;\n padding: 36px 0 48px;\n }\n\n .sec-2-home-13__stat {\n padding: 0;\n }\n}\n\n@media #{$xs} {\n .sec-2-home-13 {\n padding: 36px 30px 0;\n }\n\n .sec-2-home-13__media--tall {\n height: 280px;\n }\n\n .sec-2-home-13__caption-title {\n font-size: 24px;\n }\n\n .sec-2-home-13__stats {\n grid-template-columns: 1fr;\n gap: 32px 0;\n padding: 36px 0 48px;\n }\n\n .sec-2-home-13__stat {\n padding: 0;\n }\n}\n\n/* Cascading mobile pivot: stack top grid for tablet & phone */\n@media (max-width: 991.98px) {\n .sec-2-home-13__top {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n .sec-2-home-13__left {\n gap: 32px;\n }\n\n .sec-2-home-13__right {\n gap: 32px;\n }\n}\n\n/* Cascading mobile pivot: single-column media grid for phone */\n@media (max-width: 767.98px) {\n .sec-2-home-13__grid {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n}","@use '../../utils' as *;\n\n/* Home 13 / Section 3 — Selected Projects */\n.sec-3-home-13 {\n background-color: var(--at-neutral-50);\n padding: 120px 96px;\n}\n\n.sec-3-home-13__inner {\n display: flex;\n flex-direction: column;\n gap: 80px;\n}\n\n/* ── Header ──────────────────────────────────── */\n.sec-3-home-13__header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 32px;\n}\n\n.sec-3-home-13__head-text {\n display: flex;\n flex-direction: column;\n gap: 32px;\n}\n\n.sec-3-home-13__label {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\n.sec-3-home-13__label-dot {\n width: 8px;\n height: 8px;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n}\n\n.sec-3-home-13__label-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 13px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-700);\n}\n\n.sec-3-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(36px, 4.4vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n max-width: 100%;\n}\n\n.sec-3-home-13__title-italic {\n display: block;\n font-style: italic;\n}\n\n.sec-3-home-13__cta {\n display: inline-flex;\n align-items: center;\n gap: 0;\n text-decoration: none;\n transition: opacity 0.3s ease;\n\n &:hover,\n &:focus-visible {\n opacity: 0.9;\n }\n\n &:hover .sec-3-home-13__cta-icon svg,\n &:focus-visible .sec-3-home-13__cta-icon svg {\n transform: translate(2px, -2px);\n }\n}\n\n.sec-3-home-13__cta-label {\n display: inline-flex;\n align-items: center;\n height: 50px;\n padding: 14px 27px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n border-radius: 50px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n white-space: nowrap;\n}\n\n.sec-3-home-13__cta-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n height: 50px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n border-radius: 50%;\n margin-left: -1px;\n\n svg {\n transition: transform 0.3s ease;\n }\n}\n\n/* ── Project list ────────────────────────────── */\n.sec-3-home-13__list {\n display: flex;\n flex-direction: column;\n}\n\n.sec-3-home-13__card {\n display: grid;\n grid-template-columns: 360px 680px 1fr;\n gap: 48px;\n padding: 40px 8px;\n border-top: 1px solid var(--at-neutral-100);\n align-items: start;\n\n &:last-child {\n border-bottom: 1px solid var(--at-neutral-100);\n }\n}\n\n/* ── Card meta (left) ────────────────────────── */\n.sec-3-home-13__card-meta {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 12px 0;\n}\n\n.sec-3-home-13__card-loc {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n white-space: nowrap;\n}\n\n.sec-3-home-13__card-title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 32px;\n line-height: 1.1875;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-3-home-13__card-link {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-950);\n text-decoration: none;\n transition: color 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-theme-primary);\n }\n}\n\n.sec-3-home-13__card-link-dots {\n color: var(--at-neutral-500);\n font-size: 11px;\n letter-spacing: 0.08em;\n line-height: 1;\n}\n\n/* ── Card media (middle) ─────────────────────── */\n.sec-3-home-13__card-media {\n display: block;\n width: 100%;\n overflow: hidden;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.6s ease;\n }\n\n &:hover img,\n &:focus-visible img {\n transform: scale(1.04);\n }\n}\n\n/* ── Card info (right) ───────────────────────── */\n.sec-3-home-13__card-info {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding-top: 12px;\n min-width: 0;\n}\n\n.sec-3-home-13__card-desc {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n.sec-3-home-13__card-specs {\n display: flex;\n flex-direction: column;\n margin: 0;\n}\n\n.sec-3-home-13__card-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 0;\n border-bottom: 1px solid var(--at-neutral-100);\n gap: 16px;\n\n &:first-child {\n border-top: 1px solid transparent;\n }\n\n &:last-child {\n border-bottom: none;\n }\n\n dt {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n margin: 0;\n }\n\n dd {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n margin: 0;\n text-align: right;\n }\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media #{$xxl} {\n .sec-3-home-13 {\n padding: 96px 32px;\n }\n\n .sec-3-home-13__card {\n grid-template-columns: 280px 540px 1fr;\n gap: 32px;\n }\n\n .sec-3-home-13__card-media,\n .sec-3-home-13__card-meta {\n height: 380px;\n }\n}\n\n@media #{$xl} {\n .sec-3-home-13 {\n padding: 80px 24px;\n }\n\n .sec-3-home-13__inner {\n gap: 56px;\n }\n\n .sec-3-home-13__card {\n grid-template-columns: 240px 420px 1fr;\n gap: 24px;\n padding: 32px 0;\n }\n\n .sec-3-home-13__card-media,\n .sec-3-home-13__card-meta {\n height: 320px;\n }\n\n .sec-3-home-13__card-title {\n font-size: 26px;\n }\n}\n\n@media #{$lg} {\n .sec-3-home-13 {\n padding: 64px 20px;\n }\n\n .sec-3-home-13__header {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n\n .sec-3-home-13__card {\n grid-template-columns: 1fr 1fr;\n grid-template-areas:\n \"media media\"\n \"meta info\";\n gap: 24px;\n padding: 32px 0;\n }\n\n .sec-3-home-13__card-media {\n grid-area: media;\n height: 340px;\n }\n\n .sec-3-home-13__card-meta {\n grid-area: meta;\n height: auto;\n gap: 16px;\n justify-content: flex-start;\n }\n\n .sec-3-home-13__card-info {\n grid-area: info;\n }\n}\n\n@media #{$md} {\n .sec-3-home-13 {\n padding: 48px 30px;\n }\n\n .sec-3-home-13__inner {\n gap: 40px;\n }\n\n .sec-3-home-13__card {\n grid-template-columns: 1fr;\n grid-template-areas:\n \"media\"\n \"meta\"\n \"info\";\n gap: 20px;\n padding: 24px 0;\n }\n\n .sec-3-home-13__card-media {\n height: 280px;\n }\n}\n\n@media #{$sm} {\n .sec-3-home-13 {\n padding: 36px 30px;\n }\n\n .sec-3-home-13__cta-label {\n padding: 14px 20px;\n }\n\n .sec-3-home-13__card-media {\n height: 240px;\n }\n}\n\n@media #{$xs} {\n .sec-3-home-13 {\n padding: 36px 30px;\n }\n\n .sec-3-home-13__card-title {\n font-size: 22px;\n }\n\n .sec-3-home-13__card-row dd {\n font-size: 14px;\n }\n}\n\n/* Cascading mobile pivot: stack header for tablet & phone */\n@media (max-width: 1199.98px) {\n .sec-3-home-13__header {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n}\n\n/* Cascading mobile pivot: single-column card layout for phone */\n@media (max-width: 767.98px) {\n .sec-3-home-13__card {\n grid-template-columns: 1fr;\n grid-template-areas:\n \"media\"\n \"meta\"\n \"info\";\n gap: 20px;\n padding: 24px 0;\n }\n\n .sec-3-home-13__card-media {\n grid-area: media;\n height: auto;\n }\n\n .sec-3-home-13__card-meta {\n grid-area: meta;\n height: auto;\n gap: 16px;\n justify-content: flex-start;\n }\n\n .sec-3-home-13__card-info {\n grid-area: info;\n }\n}","@use '../../utils' as *;\n\n/* Home 13 / Section 4 — Build with us CTA */\n.sec-4-home-13 {\n background-color: var(--at-neutral-50);\n padding: 32px;\n}\n\n.sec-4-home-13__card {\n position: relative;\n width: 100%;\n min-height: 800px;\n background-color: #0f0f0f;\n background-image:\n linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);\n background-size: 48px 48px;\n background-position: 0 0;\n border-radius: 32px;\n overflow: hidden;\n isolation: isolate;\n padding: 48px 56px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n color: var(--at-common-white);\n}\n\n.sec-4-home-13__glow {\n position: absolute !important;\n width: 1200px;\n height: 800px;\n bottom: 0;\n right: 0;\n transform: translateY(20%) translateX(20%);\n background: radial-gradient(closest-side, rgba(240, 70, 14, 0.7) 0%, rgba(240, 70, 14, 0.28) 45%, rgba(240, 70, 14, 0) 75%);\n pointer-events: none;\n z-index: 0;\n opacity: 0.5;\n}\n\n.sec-4-home-13__card>* {\n position: relative;\n z-index: 1;\n}\n\n/* ── Top meta bar ────────────────────────────── */\n.sec-4-home-13__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: rgba(255, 255, 255, 0.55);\n}\n\n.sec-4-home-13__bar-left {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n color: rgba(255, 255, 255, 0.85);\n}\n\n.sec-4-home-13__bar-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n box-shadow: 0 0 10px rgba(240, 70, 14, 0.6);\n flex-shrink: 0;\n}\n\n/* ── Heading ─────────────────────────────────── */\n.sec-4-home-13__head {\n display: flex;\n flex-direction: column;\n gap: 32px;\n padding-top: 56px;\n}\n\n.sec-4-home-13__tag {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: 0.04em;\n color: var(--at-theme-primary);\n text-transform: uppercase;\n}\n\n.sec-4-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(64px, 14vw, 240px);\n line-height: 0.95;\n letter-spacing: -0.05em;\n color: var(--at-common-white);\n\n em {\n font-style: italic;\n font-weight: 600;\n }\n}\n\n/* ── Bottom row ──────────────────────────────── */\n.sec-4-home-13__bottom {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 64px;\n}\n\n.sec-4-home-13__copy {\n flex: 0 1 560px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n\n @media (max-width: 1440px) {\n flex: 0 1 260px;\n }\n}\n\n\n\n.sec-4-home-13__lede {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: rgba(255, 255, 255, 0.65);\n}\n\n.sec-4-home-13__chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 0;\n}\n\n.sec-4-home-13__chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n border: 1px solid rgba(255, 255, 255, 0.18);\n border-radius: 999px;\n color: var(--at-common-white);\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 13px;\n line-height: 1;\n letter-spacing: -0.02em;\n text-decoration: none;\n transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;\n\n &:hover,\n &:focus-visible {\n background-color: var(--at-common-white);\n color: #0f0f0f;\n border-color: var(--at-common-white);\n }\n}\n\n.sec-4-home-13__contact {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n text-align: right;\n}\n\n.sec-4-home-13__contact-label {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: rgba(255, 255, 255, 0.55);\n}\n\n.sec-4-home-13__contact-row {\n display: inline-flex;\n align-items: center;\n gap: 16px;\n color: var(--at-common-white);\n text-decoration: none;\n transition: color 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-theme-primary);\n }\n}\n\n.sec-4-home-13__contact-mail {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 22px;\n line-height: 1.2;\n letter-spacing: -0.02em;\n}\n\n.sec-4-home-13__contact-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n color: var(--at-common-white);\n transition: transform 0.3s ease;\n\n .sec-4-home-13__contact-row:hover &,\n .sec-4-home-13__contact-row:focus-visible & {\n transform: rotate(-12deg);\n }\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media #{$xxl} {\n .sec-4-home-13 {\n padding: 24px;\n }\n\n .sec-4-home-13__card {\n min-height: 700px;\n padding: 40px 48px;\n }\n}\n\n@media #{$xl} {\n .sec-4-home-13__card {\n min-height: 600px;\n padding: 32px 40px;\n border-radius: 24px;\n }\n\n .sec-4-home-13__head {\n gap: 24px;\n padding-top: 32px;\n }\n\n .sec-4-home-13__bottom {\n gap: 32px;\n }\n\n .sec-4-home-13__contact-mail {\n font-size: 18px;\n }\n\n .sec-4-home-13__glow {\n width: 900px;\n height: 600px;\n right: -80px;\n }\n}\n\n@media #{$lg} {\n .sec-4-home-13 {\n padding: 16px;\n }\n\n .sec-4-home-13__card {\n min-height: 540px;\n padding: 28px 32px;\n }\n\n .sec-4-home-13__bar-center {\n display: none;\n }\n}\n\n@media #{$md} {\n .sec-4-home-13__card {\n min-height: 500px;\n padding: 24px;\n border-radius: 20px;\n gap: 56px;\n }\n\n .sec-4-home-13__head {\n padding-top: 40px;\n }\n\n .sec-4-home-13__bottom {\n flex-direction: column;\n align-items: flex-start;\n gap: 40px;\n }\n\n .sec-4-home-13__contact {\n align-items: flex-start;\n text-align: left;\n }\n\n .sec-4-home-13__bar-right {\n display: none;\n }\n}\n\n@media #{$sm} {\n .sec-4-home-13 {\n padding: 12px;\n }\n\n .sec-4-home-13__card {\n min-height: 500px;\n padding: 20px;\n }\n\n .sec-4-home-13__bar {\n font-size: 10px;\n gap: 12px;\n }\n\n .sec-4-home-13__contact-mail {\n font-size: 16px;\n }\n\n .sec-4-home-13__contact-arrow {\n width: 48px;\n height: 48px;\n }\n}\n\n@media #{$xs} {\n .sec-4-home-13__card {\n min-height: 500px;\n padding: 18px;\n }\n\n .sec-4-home-13__title {\n font-size: 56px;\n }\n\n .sec-4-home-13__chip {\n font-size: 12px;\n }\n}\n\n/* Cascading mobile pivot: stack bottom row + left-align contact for tablet & phone */\n@media (max-width: 991.98px) {\n .sec-4-home-13__bottom {\n flex-direction: column;\n align-items: flex-start;\n gap: 40px;\n }\n\n .sec-4-home-13__copy {\n flex: 0 1 auto;\n }\n\n .sec-4-home-13__contact {\n align-items: flex-start;\n text-align: left;\n }\n\n .sec-4-home-13__bar-right {\n display: none;\n }\n}\n\n/* Phone: hide center coord bar; loosen card */\n@media (max-width: 574.98px) {\n .sec-4-home-13__bar-center {\n display: none;\n }\n\n .sec-4-home-13__card {\n gap: 40px;\n }\n}","@use '../../utils' as *;\n\n/* Home 13 / Section 5 — Our Expertise */\n.sec-5-home-13 {\n background-color: var(--at-neutral-50);\n padding: 120px 96px;\n}\n\n.sec-5-home-13__inner {\n display: flex;\n flex-direction: column;\n gap: 42px;\n}\n\n/* ── Header ──────────────────────────────────── */\n.sec-5-home-13__header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 32px;\n}\n\n.sec-5-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(48px, 5.5vw, 84px);\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n}\n\n.sec-5-home-13__hint {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n text-transform: uppercase;\n max-width: 600px;\n}\n\n.sec-5-home-13__hint-dot {\n width: 8px;\n height: 8px;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n}\n\n/* ── List ────────────────────────────────────── */\n.sec-5-home-13__list {\n display: flex;\n flex-direction: column;\n gap: 47px;\n}\n\n/* ── Card ────────────────────────────────────── */\n.sec-5-home-13__card {\n display: grid;\n grid-template-columns: 583px 1fr;\n gap: 60px;\n background-color: var(--at-neutral-0);\n padding: 42px;\n align-items: center;\n border-radius: 4px;\n}\n\n.sec-5-home-13__card-media {\n width: 100%;\n height: 310px;\n overflow: hidden;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.6s ease;\n }\n\n .sec-5-home-13__card:hover & img {\n transform: scale(1.04);\n }\n}\n\n.sec-5-home-13__card-body {\n display: flex;\n flex-direction: column;\n gap: 20px;\n min-width: 0;\n padding-right: 16px;\n}\n\n.sec-5-home-13__card-head {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 24px;\n border-bottom: 1px solid var(--at-neutral-100);\n padding-bottom: 19px;\n}\n\n.sec-5-home-13__card-title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 36px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n}\n\n.sec-5-home-13__card-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.sec-5-home-13__card-tag-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n white-space: nowrap;\n}\n\n.sec-5-home-13__card-toggle {\n width: 18px;\n height: 18px;\n background: transparent;\n border: 0;\n padding: 0;\n color: var(--at-neutral-900);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: transform 0.3s ease, color 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-theme-primary);\n transform: rotate(90deg);\n }\n}\n\n.sec-5-home-13__card-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.45;\n letter-spacing: -0.05em;\n color: var(--at-neutral-500);\n max-width: 803px;\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media #{$xxl} {\n .sec-5-home-13 {\n padding: 96px 32px;\n }\n\n .sec-5-home-13__card {\n grid-template-columns: 460px 1fr;\n gap: 40px;\n padding: 32px;\n }\n\n .sec-5-home-13__card-media {\n height: 260px;\n }\n}\n\n@media #{$xl} {\n .sec-5-home-13 {\n padding: 80px 24px;\n }\n\n .sec-5-home-13__list {\n gap: 32px;\n }\n\n .sec-5-home-13__card {\n grid-template-columns: 380px 1fr;\n gap: 32px;\n padding: 24px;\n }\n\n .sec-5-home-13__card-media {\n height: 240px;\n }\n\n .sec-5-home-13__card-title {\n font-size: 28px;\n }\n\n .sec-5-home-13__card-text {\n font-size: 18px;\n }\n}\n\n@media #{$lg} {\n .sec-5-home-13 {\n padding: 64px 20px;\n }\n\n .sec-5-home-13__header {\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n }\n\n .sec-5-home-13__card {\n grid-template-columns: 320px 1fr;\n gap: 24px;\n padding: 20px;\n }\n\n .sec-5-home-13__card-media {\n height: 220px;\n }\n\n .sec-5-home-13__card-head {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n\n .sec-5-home-13__card-title {\n font-size: 24px;\n }\n}\n\n@media #{$md} {\n .sec-5-home-13 {\n padding: 48px 30px;\n }\n\n .sec-5-home-13__list {\n gap: 24px;\n }\n\n .sec-5-home-13__card {\n grid-template-columns: 1fr;\n padding: 20px;\n }\n\n .sec-5-home-13__card-media {\n height: 240px;\n }\n\n .sec-5-home-13__card-text {\n font-size: 16px;\n }\n}\n\n@media #{$sm} {\n .sec-5-home-13 {\n padding: 36px 30px;\n }\n\n .sec-5-home-13__card-media {\n height: 200px;\n }\n\n .sec-5-home-13__card-title {\n font-size: 22px;\n }\n\n .sec-5-home-13__card-tag-text {\n font-size: 13px;\n }\n}\n\n@media #{$xs} {\n .sec-5-home-13 {\n padding: 36px 30px;\n }\n\n .sec-5-home-13__card {\n padding: 16px;\n }\n\n .sec-5-home-13__card-media {\n height: 180px;\n }\n\n .sec-5-home-13__card-title {\n font-size: 20px;\n }\n\n .sec-5-home-13__card-text {\n font-size: 15px;\n }\n}\n\n/* Cascading mobile pivot: stack header + card-head for tablet & phone */\n@media (max-width: 1199.98px) {\n .sec-5-home-13__header {\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n }\n\n .sec-5-home-13__card-head {\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n }\n}\n\n/* Cascading mobile pivot: single-column card layout for phone */\n@media (max-width: 767.98px) {\n .sec-5-home-13__card {\n grid-template-columns: 1fr;\n }\n}","@use '../../utils' as *;\n\n/* Home 13 / Section 6 — Our Process Timeline */\n.sec-6-home-13 {\n background-color: var(--at-neutral-50);\n padding: 0 96px 120px 96px;\n position: relative;\n overflow: hidden;\n}\n\n.sec-6-home-13__dots {\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);\n background-size: 96px 96px;\n pointer-events: none;\n z-index: 0;\n mask-image: radial-gradient(ellipse 80% 60% at center, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));\n -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));\n}\n\n.sec-6-home-13__inner {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n gap: 80px;\n}\n\n/* ── Header ──────────────────────────────────── */\n.sec-6-home-13__header {\n display: grid;\n grid-template-columns: minmax(0, 900px) 440px;\n gap: 96px;\n align-items: start;\n}\n\n.sec-6-home-13__head-left {\n display: flex;\n flex-direction: column;\n gap: 32px;\n}\n\n.sec-6-home-13__label {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\n.sec-6-home-13__label-dot {\n width: 8px;\n height: 8px;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n}\n\n.sec-6-home-13__label-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 13px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-700);\n}\n\n.sec-6-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(40px, 4.4vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-6-home-13__head-right {\n display: flex;\n flex-direction: column;\n gap: 32px;\n padding-top: 16px;\n}\n\n.sec-6-home-13__desc {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n}\n\n.sec-6-home-13__metrics {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0;\n padding: 0;\n}\n\n.sec-6-home-13__metric {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.sec-6-home-13__metric-num {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 32px;\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-6-home-13__metric-label {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n}\n\n/* ── Timeline ────────────────────────────────── */\n.sec-6-home-13__timeline {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 0;\n border-top: 1px solid var(--at-neutral-100);\n padding-top: 24px;\n}\n\n.sec-6-home-13__phase {\n display: flex;\n flex-direction: column;\n gap: 0;\n padding: 0 0 0 28px;\n border-left: 1px solid var(--at-neutral-100);\n position: relative;\n\n &:first-child {\n border-left: none;\n padding-left: 0;\n\n .sec-6-home-13__phase-head {\n padding-left: 28px;\n }\n\n .sec-6-home-13__phase-body,\n .sec-6-home-13__phase-deliv {\n padding-left: 28px;\n }\n }\n}\n\n.sec-6-home-13__phase-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding-bottom: 80px;\n}\n\n.sec-6-home-13__phase-id {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\n.sec-6-home-13__phase-dot {\n position: relative;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-300);\n flex-shrink: 0;\n transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n opacity: 0;\n pointer-events: none;\n }\n}\n\n.sec-6-home-13__phase-num {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 14px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n}\n\n.sec-6-home-13__phase-week {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.04em;\n color: var(--at-neutral-500);\n white-space: nowrap;\n padding-right: 28px;\n}\n\n.sec-6-home-13__phase-body {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-bottom: 32px;\n padding-right: 28px;\n}\n\n.sec-6-home-13__phase-title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 32px;\n line-height: 1.125;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-6-home-13__phase-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n.sec-6-home-13__phase-deliv {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-top: 20px;\n padding-right: 28px;\n border-top: 1px solid var(--at-neutral-100);\n}\n\n.sec-6-home-13__phase-deliv-label {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 11px;\n line-height: 1;\n letter-spacing: 0.08em;\n color: var(--at-neutral-500);\n}\n\n.sec-6-home-13__phase-deliv-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 0;\n\n li {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 13px;\n line-height: 1.2;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n\n span:first-child {\n color: var(--at-theme-primary);\n font-weight: 600;\n width: 8px;\n text-align: center;\n }\n }\n}\n\n/* Active phase state */\n.sec-6-home-13__phase--active {\n .sec-6-home-13__phase-dot {\n width: 12px;\n height: 12px;\n background-color: var(--at-theme-primary);\n\n &::before,\n &::after {\n animation: sec-6-home-13-ripple 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;\n }\n\n &::after {\n animation-delay: 0.9s;\n }\n }\n}\n\n@keyframes sec-6-home-13-ripple {\n 0% {\n opacity: 0.55;\n transform: scale(1);\n }\n\n 100% {\n opacity: 0;\n transform: scale(4);\n }\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media #{$xxl} {\n .sec-6-home-13 {\n padding: 96px 32px;\n }\n\n .sec-6-home-13__header {\n grid-template-columns: 1fr 360px;\n gap: 48px;\n }\n\n .sec-6-home-13__phase-title {\n font-size: 26px;\n }\n}\n\n@media #{$xl} {\n .sec-6-home-13 {\n padding: 80px 24px;\n }\n\n .sec-6-home-13__inner {\n gap: 56px;\n }\n\n .sec-6-home-13__header {\n grid-template-columns: 1fr 320px;\n gap: 32px;\n }\n\n .sec-6-home-13__phase {\n padding-left: 16px;\n\n &:first-child {\n\n .sec-6-home-13__phase-head,\n .sec-6-home-13__phase-body,\n .sec-6-home-13__phase-deliv {\n padding-left: 16px;\n }\n }\n }\n\n .sec-6-home-13__phase-head,\n .sec-6-home-13__phase-body,\n .sec-6-home-13__phase-deliv {\n padding-right: 16px;\n }\n\n .sec-6-home-13__phase-title {\n font-size: 22px;\n }\n}\n\n@media #{$lg} {\n .sec-6-home-13 {\n padding: 64px 20px;\n }\n\n .sec-6-home-13__header {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n .sec-6-home-13__head-right {\n padding-top: 0;\n }\n\n .sec-6-home-13__timeline {\n grid-template-columns: repeat(2, 1fr);\n gap: 32px 0;\n }\n\n .sec-6-home-13__phase {\n padding-bottom: 0;\n border-bottom: 1px solid var(--at-neutral-100);\n border-left-width: 0;\n\n &:nth-child(2n+1) {\n border-left: none;\n padding-left: 16px;\n\n .sec-6-home-13__phase-head,\n .sec-6-home-13__phase-body,\n .sec-6-home-13__phase-deliv {\n padding-left: 16px;\n }\n }\n\n &:nth-child(2n) {\n border-left: 1px solid var(--at-neutral-100);\n padding-left: 16px;\n\n .sec-6-home-13__phase-head,\n .sec-6-home-13__phase-body,\n .sec-6-home-13__phase-deliv {\n padding-left: 16px;\n }\n }\n }\n}\n\n@media #{$md} {\n .sec-6-home-13 {\n padding: 48px 16px;\n }\n\n .sec-6-home-13__inner {\n gap: 40px;\n }\n\n .sec-6-home-13__timeline {\n grid-template-columns: 1fr;\n }\n\n .sec-6-home-13__phase {\n padding: 24px 16px !important;\n border-left: none !important;\n border-top: 1px solid var(--at-neutral-100);\n\n .sec-6-home-13__phase-head,\n .sec-6-home-13__phase-body,\n .sec-6-home-13__phase-deliv {\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n }\n\n .sec-6-home-13__phase-head {\n padding-bottom: 24px;\n }\n}\n\n@media #{$sm} {\n .sec-6-home-13 {\n padding: 36px 12px;\n }\n\n .sec-6-home-13__metric-num {\n font-size: 24px;\n }\n\n .sec-6-home-13__phase-title {\n font-size: 20px;\n }\n}\n\n@media #{$xs} {\n .sec-6-home-13 {\n padding: 28px 30px;\n }\n\n .sec-6-home-13__inner {\n gap: 32px;\n }\n\n .sec-6-home-13__metric-num {\n font-size: 22px;\n }\n\n .sec-6-home-13__phase-title {\n font-size: 20px;\n }\n}\n\n/* Cascading mobile pivot: single-column header for tablet & phone */\n@media (max-width: 1199.98px) {\n .sec-6-home-13__header {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n\n .sec-6-home-13__head-right {\n padding-top: 0;\n }\n\n .sec-6-home-13__dots {\n background-size: 48px 48px;\n }\n}\n\n/* Cascading mobile pivot: single-column timeline for phone */\n@media (max-width: 767.98px) {\n .sec-6-home-13__timeline {\n grid-template-columns: 1fr;\n gap: 0;\n }\n\n .sec-6-home-13__phase {\n padding: 24px 16px !important;\n border-left: none !important;\n border-top: 1px solid var(--at-neutral-100);\n\n &:first-child {\n\n .sec-6-home-13__phase-head,\n .sec-6-home-13__phase-body,\n .sec-6-home-13__phase-deliv {\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n }\n\n &:nth-child(2n+1),\n &:nth-child(2n) {\n border-left: none !important;\n padding-left: 16px !important;\n\n .sec-6-home-13__phase-head,\n .sec-6-home-13__phase-body,\n .sec-6-home-13__phase-deliv {\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n }\n }\n\n .sec-6-home-13__phase-head {\n padding-bottom: 24px;\n }\n}","@use '../../utils' as *;\n\n/* Home 13 / Section 7 — Testimonial */\n.sec-7-home-13 {\n background-color: var(--at-neutral-0);\n padding: 120px 96px;\n}\n\n.sec-7-home-13__inner {\n display: grid;\n grid-template-columns: 620px 1fr;\n gap: 64px;\n align-items: stretch;\n}\n\n/* ── Media ───────────────────────────────────── */\n.sec-7-home-13__media {\n width: 100%;\n height: 760px;\n border-radius: 24px;\n overflow: hidden;\n background-color: var(--at-neutral-100);\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n}\n\n.sec-7-home-13__media-slider {\n width: 100%;\n height: 100%;\n cursor: grab;\n\n &:active {\n cursor: grabbing;\n }\n\n .swiper-wrapper,\n .swiper-slide {\n height: 100%;\n }\n}\n\n.sec-7-home-13__quote-slider {\n width: 100%;\n cursor: grab;\n\n &:active {\n cursor: grabbing;\n }\n\n .swiper-slide {\n height: auto;\n }\n}\n\n/* ── Content ─────────────────────────────────── */\n.sec-7-home-13__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 32px;\n min-width: 0;\n\n @media (min-width: 1200px) {\n min-height: 760px;\n }\n}\n\n/* ── Head ────────────────────────────────────── */\n.sec-7-home-13__head {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.sec-7-home-13__label {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n\n.sec-7-home-13__label-dot {\n width: 8px;\n height: 8px;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n}\n\n.sec-7-home-13__label-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n}\n\n.sec-7-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(32px, 3.2vw, 56px);\n line-height: 1.143;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-7-home-13__lede {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 20px;\n line-height: 1.45;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n max-width: 773px;\n}\n\n/* ── Quote ───────────────────────────────────── */\n.sec-7-home-13__quote {\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin: 0;\n}\n\n.sec-7-home-13__quote-mark {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 96px;\n line-height: 0.65;\n color: var(--at-theme-primary);\n display: inline-block;\n}\n\n.sec-7-home-13__quote-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 22px;\n line-height: 1.45;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n}\n\n.sec-7-home-13__quote-foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding-top: 16px;\n flex-wrap: wrap;\n}\n\n.sec-7-home-13__author {\n display: inline-flex;\n align-items: center;\n gap: 16px;\n}\n\n.sec-7-home-13__author-name {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 18px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n font-style: normal;\n}\n\n.sec-7-home-13__author-sep {\n width: 24px;\n height: 1px;\n background-color: var(--at-neutral-500);\n}\n\n.sec-7-home-13__author-project {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n}\n\n.sec-7-home-13__stars {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 0;\n}\n\n/* ── CTA ─────────────────────────────────────── */\n.sec-7-home-13__cta {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n align-self: flex-start;\n transition: opacity 0.3s ease;\n\n &:hover,\n &:focus-visible {\n opacity: 0.85;\n }\n}\n\n.sec-7-home-13__cta-label {\n display: inline-flex;\n align-items: center;\n height: 50px;\n padding: 14px 27px;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n color: var(--at-neutral-900);\n border-radius: 50px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n white-space: nowrap;\n}\n\n.sec-7-home-13__cta-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n height: 50px;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-100);\n color: var(--at-neutral-900);\n border-radius: 50%;\n margin-left: -1px;\n\n svg {\n transition: transform 0.3s ease;\n }\n}\n\n.sec-7-home-13__cta:hover .sec-7-home-13__cta-icon svg,\n.sec-7-home-13__cta:focus-visible .sec-7-home-13__cta-icon svg {\n transform: rotate(-12deg);\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media #{$xxl} {\n .sec-7-home-13 {\n padding: 96px 32px;\n }\n .sec-7-home-13__inner {\n grid-template-columns: 480px 1fr;\n gap: 48px;\n }\n .sec-7-home-13__media,\n .sec-7-home-13__content {\n height: 640px;\n min-height: 640px;\n }\n}\n\n@media #{$xl} {\n .sec-7-home-13 {\n padding: 80px 24px;\n }\n .sec-7-home-13__inner {\n grid-template-columns: 400px 1fr;\n gap: 32px;\n }\n .sec-7-home-13__media,\n .sec-7-home-13__content {\n height: 560px;\n min-height: 560px;\n }\n .sec-7-home-13__quote-text {\n font-size: 18px;\n }\n .sec-7-home-13__lede {\n font-size: 18px;\n }\n}\n\n/* Stack inner as flex column on tablet & phone */\n@media (max-width: 1199.98px) {\n .sec-7-home-13__inner {\n display: flex;\n flex-direction: column;\n }\n}\n\n@media #{$lg} {\n .sec-7-home-13 {\n padding: 64px 20px;\n }\n .sec-7-home-13__inner {\n gap: 32px;\n }\n .sec-7-home-13__media {\n height: 480px;\n }\n .sec-7-home-13__content {\n min-height: auto;\n height: auto;\n gap: 32px;\n }\n}\n\n@media #{$md} {\n .sec-7-home-13 {\n padding: 48px 30px;\n }\n .sec-7-home-13__media {\n height: 420px;\n border-radius: 16px;\n }\n .sec-7-home-13__title {\n font-size: 28px;\n }\n .sec-7-home-13__quote-mark {\n font-size: 72px;\n }\n}\n\n@media #{$sm} {\n .sec-7-home-13 {\n padding: 36px 30px;\n }\n .sec-7-home-13__media {\n height: 360px;\n }\n .sec-7-home-13__quote-foot {\n align-items: flex-start;\n flex-direction: column;\n gap: 16px;\n }\n}\n\n@media #{$xs} {\n .sec-7-home-13 {\n padding: 36px 30px;\n }\n .sec-7-home-13__media {\n height: 320px;\n }\n .sec-7-home-13__title {\n font-size: 24px;\n }\n .sec-7-home-13__quote-text {\n font-size: 16px;\n }\n}\n","@use '../../utils' as *;\n\n/* Home 13 / Section 8 — The Orisa Distinction */\n.sec-8-home-13 {\n background-color: var(--at-neutral-50);\n padding: 120px 96px;\n}\n\n.sec-8-home-13__inner {\n display: flex;\n flex-direction: column;\n gap: 80px;\n}\n\n/* ── Top wrapper ─────────────────────────────── */\n.sec-8-home-13__top {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 32px;\n}\n\n.sec-8-home-13__head {\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 1100px;\n}\n\n.sec-8-home-13__tag {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n text-decoration: none;\n transition: color 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-theme-primary);\n }\n\n svg {\n transition: transform 0.3s ease;\n }\n\n &:hover svg,\n &:focus-visible svg {\n transform: translate(2px, -2px);\n }\n}\n\n.sec-8-home-13__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(40px, 5vw, 72px);\n line-height: 1.111;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n}\n\n.sec-8-home-13__cta {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n height: 50px;\n padding: 14px 27px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n border-radius: 50px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n text-decoration: none;\n flex-shrink: 0;\n transition: opacity 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-neutral-0);\n opacity: 0.9;\n }\n\n svg {\n transition: transform 0.3s ease;\n }\n\n &:hover svg,\n &:focus-visible svg {\n transform: translate(2px, -2px);\n }\n}\n\n/* ── Body ────────────────────────────────────── */\n.sec-8-home-13__body {\n display: grid;\n grid-template-columns: 620px 1fr;\n gap: 64px;\n align-items: start;\n}\n\n/* ── Left ────────────────────────────────────── */\n.sec-8-home-13__left {\n display: flex;\n flex-direction: column;\n gap: 32px;\n}\n\n.sec-8-home-13__media {\n width: 100%;\n overflow: hidden;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);\n }\n\n &.is-changing img {\n opacity: 0;\n }\n}\n\n.sec-8-home-13__lede {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.45;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);\n\n &.is-changing {\n opacity: 0;\n }\n}\n\n/* ── List ────────────────────────────────────── */\n.sec-8-home-13__list {\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n border-top: 1px solid var(--at-neutral-100);\n}\n\n.sec-8-home-13__item {\n border-bottom: 1px solid var(--at-neutral-100);\n transition: border-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n.sec-8-home-13__row {\n display: grid;\n grid-template-columns: 100px 1fr auto;\n gap: 32px;\n align-items: center;\n padding: 28px 8px;\n text-decoration: none;\n transition: background-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n.sec-8-home-13__row-num {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 32px;\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n transition: color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n.sec-8-home-13__row-name {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 28px;\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n transition: color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),\n font-size 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n\n.sec-8-home-13__row-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: 1px solid var(--at-neutral-300);\n color: var(--at-neutral-950);\n background-color: transparent;\n flex-shrink: 0;\n transition: background-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),\n border-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),\n color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),\n width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),\n height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),\n transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);\n\n svg {\n transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),\n height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);\n }\n}\n\n/* Active / hover state */\n.sec-8-home-13__item--active .sec-8-home-13__row,\n.sec-8-home-13__row:hover,\n.sec-8-home-13__row:focus-visible {\n .sec-8-home-13__row-name {\n font-size: 36px;\n }\n\n .sec-8-home-13__row-arrow {\n width: 56px;\n height: 56px;\n background-color: var(--at-theme-primary);\n border-color: var(--at-theme-primary);\n color: var(--at-common-white);\n\n svg {\n width: 22px;\n height: 22px;\n }\n }\n}\n\n.sec-8-home-13__row:hover .sec-8-home-13__row-arrow,\n.sec-8-home-13__row:focus-visible .sec-8-home-13__row-arrow {\n transform: rotate(-12deg);\n}\n\n/* ── Responsive ──────────────────────────────── */\n@media #{$xxl} {\n .sec-8-home-13 {\n padding: 96px 32px;\n }\n\n .sec-8-home-13__body {\n grid-template-columns: 480px 1fr;\n gap: 48px;\n }\n\n .sec-8-home-13__media {\n height: 420px;\n }\n\n .sec-8-home-13__row-name {\n font-size: 22px;\n }\n\n .sec-8-home-13__item--active .sec-8-home-13__row .sec-8-home-13__row-name,\n .sec-8-home-13__row:hover .sec-8-home-13__row-name {\n font-size: 28px;\n }\n}\n\n@media #{$xl} {\n .sec-8-home-13 {\n padding: 80px 24px;\n }\n\n .sec-8-home-13__inner {\n gap: 56px;\n }\n\n .sec-8-home-13__body {\n grid-template-columns: 380px 1fr;\n gap: 32px;\n }\n\n .sec-8-home-13__media {\n height: 360px;\n }\n\n .sec-8-home-13__lede {\n font-size: 18px;\n }\n\n .sec-8-home-13__row {\n grid-template-columns: 80px 1fr auto;\n gap: 16px;\n padding: 20px 8px;\n }\n\n .sec-8-home-13__row-num {\n font-size: 24px;\n }\n\n .sec-8-home-13__row-name {\n font-size: 18px;\n }\n\n .sec-8-home-13__item--active .sec-8-home-13__row .sec-8-home-13__row-name,\n .sec-8-home-13__row:hover .sec-8-home-13__row-name {\n font-size: 22px;\n }\n}\n\n/* Stack body as flex column on tablet & phone */\n@media (max-width: 1199.98px) {\n .sec-8-home-13__body {\n display: flex;\n flex-direction: column;\n }\n}\n\n@media #{$lg} {\n .sec-8-home-13 {\n padding: 64px 20px;\n }\n\n .sec-8-home-13__top {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n\n .sec-8-home-13__body {\n gap: 32px;\n }\n\n .sec-8-home-13__media {\n height: 380px;\n }\n}\n\n@media #{$md} {\n .sec-8-home-13 {\n padding: 48px 30px;\n }\n\n .sec-8-home-13__inner {\n gap: 40px;\n }\n\n .sec-8-home-13__media {\n height: 320px;\n }\n\n .sec-8-home-13__row-arrow {\n width: 36px;\n height: 36px;\n }\n\n .sec-8-home-13__item--active .sec-8-home-13__row .sec-8-home-13__row-arrow,\n .sec-8-home-13__row:hover .sec-8-home-13__row-arrow {\n width: 44px;\n height: 44px;\n }\n}\n\n@media #{$sm} {\n .sec-8-home-13 {\n padding: 36px 30px;\n }\n\n .sec-8-home-13__media {\n height: 260px;\n }\n\n .sec-8-home-13__row {\n grid-template-columns: 60px 1fr auto;\n padding: 16px 4px;\n }\n\n .sec-8-home-13__row-num {\n font-size: 20px;\n }\n\n .sec-8-home-13__row-name {\n font-size: 16px;\n }\n}\n\n@media #{$xs} {\n .sec-8-home-13 {\n padding: 36px 30px;\n }\n\n .sec-8-home-13__title {\n font-size: 32px;\n }\n\n .sec-8-home-13__lede {\n font-size: 16px;\n }\n\n .sec-8-home-13__row-name {\n font-size: 14px;\n }\n}\n\n/* Cascading mobile pivot: stack top wrapper for tablet & phone */\n@media (max-width: 1199.98px) {\n .sec-8-home-13__top {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n}\n\n/* Cascading mobile pivot: shrink row grid for small phones */\n@media (max-width: 574.98px) {\n .sec-8-home-13__row {\n grid-template-columns: 56px 1fr auto;\n gap: 12px;\n padding: 16px 4px;\n }\n\n .sec-8-home-13__row-num {\n font-size: 18px;\n }\n}","@use '../../utils' as *;\n\n/* ===========================================================\n Section 1 — Home 14 (Photography Hero)\n =========================================================== */\n\n.sec-1-home-14 {\n padding-top: 164px;\n padding-bottom: 80px;\n\n @media #{$lg},\n #{$md} {\n padding-top: 148px;\n padding-bottom: 64px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding-top: 136px;\n padding-bottom: 48px;\n }\n\n &__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n\n @media #{$x4l},\n #{$x3l},\n #{$xxl} {\n padding-left: 60px;\n padding-right: 60px;\n }\n\n @media #{$xl} {\n padding-left: 40px;\n padding-right: 40px;\n }\n\n @media #{$lg},\n #{$md} {\n padding-left: 30px;\n padding-right: 30px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n\n /* Top row */\n &__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n margin-bottom: 32px;\n }\n\n &__tagline {\n font-family: var(--at-ff-body);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--at-neutral-950);\n\n @media #{$sm},\n #{$xs} {\n font-size: 10px;\n letter-spacing: 1.5px;\n }\n }\n\n &__counter {\n font-family: var(--at-ff-body);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 2px;\n color: var(--at-neutral-950);\n }\n\n /* Headline */\n &__headline {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(40px, 6.5vw, 110px);\n line-height: 1;\n letter-spacing: -0.045em;\n color: var(--at-neutral-950);\n margin-bottom: 28px;\n\n @media #{$xs} {\n br {\n display: none;\n }\n }\n }\n\n /* Sub row */\n &__sub {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 32px;\n margin-bottom: 48px;\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n }\n }\n\n &__copy {\n font-family: var(--at-ff-body);\n font-size: 18px;\n line-height: 1.5;\n color: var(--at-neutral-500);\n max-width: 720px;\n\n @media #{$lg} {\n font-size: 17px;\n }\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n font-size: 16px;\n\n br {\n display: none;\n }\n }\n }\n\n &__cta {\n display: inline-flex;\n align-items: center;\n gap: 34px;\n flex-shrink: 0;\n\n @media #{$sm},\n #{$xs} {\n flex-wrap: wrap;\n gap: 20px;\n }\n }\n\n &__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n\n .sec-1-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n white-space: nowrap;\n line-height: 1;\n }\n\n .sec-1-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n }\n\n &:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n }\n }\n\n &__btn-link {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--at-neutral-900);\n color: var(--at-neutral-900);\n text-decoration: none;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n line-height: 1;\n transition: opacity 0.3s ease;\n\n &:hover {\n opacity: 0.7;\n color: var(--at-neutral-900);\n }\n }\n\n /* Hero image card */\n &__hero {\n position: relative;\n margin: 0 0 24px 0;\n overflow: hidden;\n border-radius: 16px;\n aspect-ratio: 1720 / 880;\n\n @media #{$xs} {\n aspect-ratio: 4 / 5;\n }\n }\n\n &__hero-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n }\n\n &__hero-overlay {\n position: absolute;\n inset: 0;\n padding: 48px 56px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n color: var(--at-common-white);\n pointer-events: none;\n\n @media #{$lg},\n #{$md} {\n padding: 36px 40px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding: 24px 20px;\n }\n }\n\n &__hero-top {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n font-size: 11px;\n color: var(--at-common-white);\n\n @media #{$xs} {\n flex-direction: column;\n gap: 8px;\n }\n }\n\n &__hero-caption {\n font-family: var(--at-ff-body);\n font-weight: 500;\n letter-spacing: 2px;\n text-transform: uppercase;\n }\n\n &__hero-credit {\n font-family: var(--at-ff-body);\n font-weight: 400;\n opacity: 0.7;\n letter-spacing: 0.4px;\n }\n\n &__hero-bottom {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 16px;\n color: var(--at-common-white);\n\n @media #{$xs} {\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n }\n }\n\n &__hero-meta {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n &__hero-title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 28px;\n letter-spacing: -0.5px;\n line-height: 1;\n\n @media #{$sm},\n #{$xs} {\n font-size: 22px;\n }\n }\n\n &__hero-sub {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n letter-spacing: 0.6px;\n opacity: 0.7;\n }\n\n &__hero-scroll {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n }\n\n &__hero-scroll-label {\n font-weight: 500;\n font-size: 11px;\n letter-spacing: 2px;\n }\n\n &__hero-scroll-arrow {\n font-weight: 500;\n font-size: 14px;\n }\n\n /* Tags row */\n &__tags {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n padding: 20px 0;\n\n @media #{$sm},\n #{$xs} {\n flex-wrap: wrap;\n justify-content: flex-start;\n gap: 18px 24px;\n }\n }\n\n &__tag {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n }\n\n &__tag-num {\n font-size: 11px;\n letter-spacing: 1.2px;\n color: var(--at-neutral-500);\n }\n\n &__tag-name {\n font-size: 14px;\n letter-spacing: 0.4px;\n color: var(--at-neutral-950);\n }\n}","@use '../../utils' as *;\n\n/* ===========================================================\n Section 2 — Home 14 (The Studio)\n =========================================================== */\n\n.sec-2-home-14 {\n padding-top: 80px;\n padding-bottom: 0;\n background-color: var(--at-neutral-0);\n\n @media #{$xxl},\n #{$xl} {\n padding-top: 60px;\n }\n\n @media #{$lg},\n #{$md} {\n padding-top: 50px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding-top: 46px;\n }\n\n &__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n\n @media #{$x4l},\n #{$x3l},\n #{$xxl} {\n padding-left: 60px;\n padding-right: 60px;\n }\n\n @media #{$xl} {\n padding-left: 40px;\n padding-right: 40px;\n }\n\n @media #{$lg},\n #{$md} {\n padding-left: 30px;\n padding-right: 30px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n\n /* Eyebrow */\n &__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 32px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n letter-spacing: 0.18em;\n }\n\n &__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n }\n\n &__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n }\n\n &__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n }\n\n /* Main row */\n &__main {\n display: grid;\n grid-template-columns: 640px 1fr;\n gap: 80px;\n align-items: start;\n\n @media #{$x3l},\n #{$xxl} {\n grid-template-columns: 540px 1fr;\n gap: 60px;\n }\n\n @media #{$xl} {\n grid-template-columns: 460px 1fr;\n gap: 48px;\n }\n\n @media #{$lg},\n #{$md},\n #{$sm},\n #{$xs} {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n }\n\n /* Portrait column */\n &__portrait-col {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n &__portrait {\n position: relative;\n aspect-ratio: 640 / 800;\n overflow: hidden;\n border-radius: 4px;\n background-color: var(--at-neutral-900);\n }\n\n &__portrait-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n }\n\n &__portrait-overlay {\n position: absolute;\n inset: 0;\n padding: 24px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n color: var(--at-common-white);\n pointer-events: none;\n }\n\n &__portrait-tag {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 10px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--at-common-white);\n opacity: 0.7;\n }\n\n &__portrait-caption {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n letter-spacing: 0.4px;\n color: var(--at-common-white);\n }\n\n &__portrait-name {\n font-weight: 500;\n }\n\n &__portrait-year {\n font-weight: 400;\n opacity: 0.7;\n }\n\n &__portrait-note {\n font-family: var(--at-ff-body);\n font-size: 13px;\n line-height: 1.5;\n color: var(--at-neutral-500);\n }\n\n /* Manifesto column */\n &__manifesto-col {\n display: flex;\n flex-direction: column;\n }\n\n &__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(36px, 5.2vw, 88px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n margin-bottom: 40px;\n\n @media #{$xs} {\n br {\n display: none;\n }\n }\n }\n\n &__body {\n font-family: var(--at-ff-body);\n font-size: 18px;\n line-height: 1.65;\n color: var(--at-neutral-950);\n margin-bottom: 40px;\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n font-size: 16px;\n }\n\n p {\n margin-bottom: 1.5em;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n &__signature {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n flex-wrap: wrap;\n }\n\n &__signature-block {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n &__signature-name {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 28px;\n letter-spacing: -0.5px;\n line-height: 1;\n color: var(--at-neutral-950);\n\n @media #{$sm},\n #{$xs} {\n font-size: 24px;\n }\n }\n\n &__signature-role {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n letter-spacing: 0.4px;\n color: var(--at-neutral-500);\n }\n\n &__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n\n .sec-2-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n }\n\n .sec-2-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n }\n\n &:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n }\n }\n\n /* Stats row */\n &__stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n margin-top: 100px;\n padding: 40px 0;\n border-top: 1px solid var(--at-neutral-200);\n border-bottom: 1px solid var(--at-neutral-200);\n\n @media #{$xl},\n #{$lg} {\n margin-top: 80px;\n }\n\n @media #{$md} {\n grid-template-columns: repeat(2, 1fr);\n row-gap: 32px;\n margin-top: 60px;\n }\n\n @media #{$sm},\n #{$xs} {\n grid-template-columns: repeat(2, 1fr);\n row-gap: 24px;\n margin-top: 48px;\n padding: 32px 0;\n }\n }\n\n &__stat {\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 0 24px;\n border-left: 1px solid var(--at-neutral-200);\n\n &:first-child {\n border-left: 0;\n }\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n padding: 0 16px;\n gap: 8px;\n\n &:nth-child(odd) {\n border-left: 0;\n }\n }\n }\n\n &__stat-num {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 84px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n\n @media #{$xl},\n #{$lg} {\n font-size: 64px;\n }\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n font-size: 56px;\n }\n }\n\n &__stat-label {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n letter-spacing: -0.32px;\n color: var(--at-neutral-500);\n }\n\n &__stat-note {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 11px;\n letter-spacing: 0.6px;\n color: var(--at-neutral-500);\n text-transform: uppercase;\n }\n}","@use '../../utils' as *;\n\n/* ===========================================================\n Section 3 — Home 14 (Selected Series)\n =========================================================== */\n\n.sec-3-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-0);\n\n @media #{$xxl},\n #{$xl} {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n\n @media #{$lg},\n #{$md} {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n\n &__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n\n @media #{$x4l},\n #{$x3l},\n #{$xxl} {\n padding-left: 60px;\n padding-right: 60px;\n }\n\n @media #{$xl} {\n padding-left: 40px;\n padding-right: 40px;\n }\n\n @media #{$lg},\n #{$md} {\n padding-left: 30px;\n padding-right: 30px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n\n /* Header row */\n &__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 40px;\n margin-bottom: 64px;\n\n @media #{$lg},\n #{$md},\n #{$sm},\n #{$xs} {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n }\n\n &__head-left {\n display: flex;\n flex-direction: column;\n gap: 24px;\n max-width: 1100px;\n }\n\n &__head-right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n max-width: 360px;\n\n @media #{$lg},\n #{$md},\n #{$sm},\n #{$xs} {\n align-items: flex-start;\n max-width: none;\n }\n }\n\n &__head-copy {\n font-family: var(--at-ff-body);\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n text-align: right;\n\n @media #{$lg},\n #{$md},\n #{$sm},\n #{$xs} {\n text-align: left;\n\n br {\n display: none;\n }\n }\n }\n\n /* Eyebrow */\n &__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n }\n\n &__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n }\n\n &__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n }\n\n &__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n }\n\n /* Title */\n &__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(36px, 4.8vw, 80px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n\n @media #{$xs} {\n br {\n display: none;\n }\n }\n }\n\n /* Primary button */\n &__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n\n .sec-3-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n }\n\n .sec-3-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n }\n\n &:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n }\n }\n\n /* Grid */\n &__grid {\n display: grid;\n grid-template-columns: minmax(0, 960fr) minmax(0, 720fr);\n gap: 40px;\n align-items: start;\n\n @media #{$lg},\n #{$md},\n #{$sm},\n #{$xs} {\n grid-template-columns: 1fr;\n gap: 48px;\n }\n }\n\n /* Featured */\n &__featured {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n\n &__featured-link {\n display: block;\n text-decoration: none;\n color: inherit;\n\n &:hover {\n .sec-3-home-14__featured-img {\n transform: scale(1.08) rotate(-1.2deg);\n filter: saturate(1.12) contrast(1.04);\n }\n\n .sec-3-home-14__featured-frame::after {\n opacity: 1;\n }\n\n .sec-3-home-14__featured-arrow {\n background: var(--at-neutral-950);\n color: var(--at-common-white);\n transform: rotate(-45deg);\n }\n\n .sec-3-home-14__featured-badge {\n background: var(--at-common-white);\n color: var(--at-neutral-950);\n }\n }\n }\n\n &__featured-frame {\n position: relative;\n aspect-ratio: 960 / 980;\n overflow: hidden;\n border-radius: 4px;\n background-color: var(--at-neutral-900);\n\n &::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 100%);\n opacity: 0;\n transition: opacity 0.6s ease;\n pointer-events: none;\n z-index: 1;\n }\n }\n\n &__featured-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n transform-origin: center;\n transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),\n filter 0.6s ease;\n }\n\n &__featured-overlay {\n position: absolute;\n inset: 0;\n padding: 28px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n color: var(--at-common-white);\n pointer-events: none;\n z-index: 2;\n\n @media #{$sm},\n #{$xs} {\n padding: 20px;\n }\n }\n\n &__featured-top {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n }\n\n &__featured-num {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 11px;\n letter-spacing: 2px;\n color: var(--at-common-white);\n }\n\n &__featured-badge {\n display: inline-flex;\n align-items: center;\n border: 1px solid var(--at-common-white);\n color: var(--at-common-white);\n padding: 6px 12px;\n border-radius: 999px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 10px;\n letter-spacing: 2px;\n line-height: 1;\n transition: background-color 0.4s ease, color 0.4s ease;\n }\n\n &__featured-bot {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 24px;\n }\n\n &__featured-meta {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n &__featured-title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 48px;\n line-height: 1;\n letter-spacing: -1px;\n color: var(--at-common-white);\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n font-size: 36px;\n }\n\n @media #{$xs} {\n font-size: 28px;\n }\n }\n\n &__featured-sub {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 13px;\n letter-spacing: 0.4px;\n color: var(--at-common-white);\n opacity: 0.75;\n }\n\n &__featured-arrow {\n flex-shrink: 0;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: var(--at-common-white);\n color: var(--at-neutral-950);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n pointer-events: auto;\n transition: background-color 0.4s ease, color 0.4s ease,\n transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);\n }\n\n &__featured-desc {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n }\n\n /* List */\n &__list {\n display: flex;\n flex-direction: column;\n gap: 0;\n }\n\n &__item {\n border-bottom: 1px solid var(--at-neutral-200);\n\n &:last-child {\n border-bottom: 0;\n }\n }\n\n &__item-link {\n display: grid;\n grid-template-columns: 220px 1fr;\n gap: 24px;\n align-items: center;\n padding: 24px 0;\n text-decoration: none;\n color: inherit;\n\n @media #{$xs} {\n grid-template-columns: 140px 1fr;\n gap: 16px;\n }\n\n &:hover {\n .sec-3-home-14__item-img img {\n transform: scale(1.08) rotate(-1.2deg);\n filter: saturate(1.12) contrast(1.04);\n }\n\n .sec-3-home-14__item-img::after {\n opacity: 1;\n }\n\n .sec-3-home-14__item-title {\n transform: translateX(6px);\n }\n\n .sec-3-home-14__item-view {\n transform: translateX(4px);\n }\n }\n }\n\n &__item-img {\n display: block;\n position: relative;\n aspect-ratio: 220 / 260;\n overflow: hidden;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform-origin: center;\n transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),\n filter 0.6s ease;\n }\n }\n\n &__item-meta {\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-width: 0;\n }\n\n &__item-top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n }\n\n &__item-num {\n font-weight: 600;\n letter-spacing: 2px;\n color: var(--at-neutral-500);\n }\n\n &__item-view {\n font-weight: 500;\n letter-spacing: 0.4px;\n color: var(--at-neutral-950);\n transition: transform 0.4s ease;\n }\n\n &__item-title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 42px;\n line-height: 1.05;\n letter-spacing: -0.8px;\n color: var(--at-neutral-950);\n transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);\n\n @media #{$xl},\n #{$lg} {\n font-size: 36px;\n }\n\n @media #{$md},\n #{$sm} {\n font-size: 32px;\n }\n\n @media #{$xs} {\n font-size: 26px;\n }\n }\n\n &__item-sub {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 13px;\n line-height: 1.5;\n letter-spacing: 0.2px;\n color: var(--at-neutral-500);\n }\n}","@use '../../utils' as *;\n\n/* ===========================================================\n Section 4 — Home 14 (Gallery / Archive)\n =========================================================== */\n\n.sec-4-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-0);\n border-top: 1px solid var(--at-neutral-200);\n\n @media #{$xxl},\n #{$xl} {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n\n @media #{$lg},\n #{$md} {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n\n &__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n\n @media #{$x4l},\n #{$x3l},\n #{$xxl} {\n padding-left: 60px;\n padding-right: 60px;\n }\n\n @media #{$xl} {\n padding-left: 40px;\n padding-right: 40px;\n }\n\n @media #{$lg},\n #{$md} {\n padding-left: 30px;\n padding-right: 30px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n\n /* Header */\n &__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 40px;\n margin-bottom: 48px;\n\n @media #{$lg},\n #{$md},\n #{$sm},\n #{$xs} {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n }\n\n &__head-left {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n &__head-right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n max-width: 380px;\n\n @media #{$lg},\n #{$md},\n #{$sm},\n #{$xs} {\n align-items: flex-start;\n max-width: none;\n }\n }\n\n &__head-copy {\n font-family: var(--at-ff-body);\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n text-align: right;\n\n @media #{$lg},\n #{$md},\n #{$sm},\n #{$xs} {\n text-align: left;\n\n br {\n display: none;\n }\n }\n }\n\n &__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n }\n\n &__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n }\n\n &__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n }\n\n &__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n }\n\n &__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(40px, 5vw, 84px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n\n @media #{$xs} {\n br {\n display: none;\n }\n }\n }\n\n &__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n\n .sec-4-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n }\n\n .sec-4-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n }\n\n &:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n }\n }\n\n /* Filter tabs */\n &__tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n padding: 12px 0;\n border-top: 1px solid var(--at-neutral-200);\n border-bottom: 1px solid var(--at-neutral-200);\n margin-bottom: 48px;\n }\n\n &__tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 10px 18px;\n border: 1px solid var(--at-neutral-200);\n background: transparent;\n border-radius: 999px;\n cursor: pointer;\n font-family: var(--at-ff-body);\n line-height: 1;\n color: var(--at-neutral-950);\n transition: all 0.25s ease;\n\n &.is-active {\n background-color: var(--at-neutral-950);\n border-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n\n .sec-4-home-14__tab-count {\n color: var(--at-neutral-0);\n opacity: 0.7;\n }\n }\n\n &:hover:not(.is-active) {\n border-color: var(--at-neutral-950);\n }\n }\n\n &__tab-label {\n font-weight: 500;\n font-size: 13px;\n }\n\n &__tab-count {\n font-weight: 400;\n font-size: 11px;\n letter-spacing: 0.4px;\n color: var(--at-neutral-500);\n }\n\n /* Masonry */\n &__masonry {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 24px;\n margin-bottom: 48px;\n\n @media #{$md} {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n @media #{$sm},\n #{$xs} {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n }\n\n &__col {\n display: flex;\n flex-direction: column;\n gap: 24px;\n\n &--offset-60 {\n padding-top: 60px;\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n padding-top: 0;\n }\n }\n\n &--offset-30 {\n padding-top: 30px;\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n padding-top: 0;\n }\n }\n }\n\n &__tile {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 20px;\n border-radius: 4px;\n overflow: hidden;\n text-decoration: none;\n color: var(--at-common-white);\n background-color: var(--at-neutral-900);\n\n &--h420 {\n aspect-ratio: 557 / 420;\n }\n\n &--h440 {\n aspect-ratio: 557 / 440;\n }\n\n &--h480 {\n aspect-ratio: 557 / 480;\n }\n\n &--h500 {\n aspect-ratio: 557 / 500;\n }\n\n &--h520 {\n aspect-ratio: 557 / 520;\n }\n\n &--h540 {\n aspect-ratio: 557 / 540;\n }\n\n &--h560 {\n aspect-ratio: 557 / 560;\n }\n\n &--h600 {\n aspect-ratio: 557 / 600;\n }\n\n &--h620 {\n aspect-ratio: 557 / 620;\n }\n\n &--h700 {\n aspect-ratio: 557 / 700;\n }\n\n &--h720 {\n aspect-ratio: 557 / 720;\n }\n\n @media #{$sm},\n #{$xs} {\n aspect-ratio: 4 / 5 !important;\n }\n\n &:hover {\n color: var(--at-common-white);\n\n .sec-4-home-14__tile-img {\n transform: scale(1.08) rotate(-1.2deg);\n filter: saturate(1.12) contrast(1.04);\n }\n }\n }\n\n &__tile-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n border-radius: 4px;\n transform-origin: center;\n transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),\n filter 0.6s ease;\n }\n\n &__tile-top {\n position: relative;\n z-index: 2;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 10px;\n color: #fff;\n opacity: 0.6;\n }\n\n &__tile-num {\n letter-spacing: 2px;\n }\n\n &__tile-year {\n letter-spacing: 0.4px;\n }\n\n &__tile-meta {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-family: var(--at-ff-body);\n color: #fff;\n }\n\n &__tile-title {\n font-weight: 500;\n font-size: 18px;\n letter-spacing: -0.3px;\n line-height: 1.1;\n }\n\n &__tile-sub {\n font-weight: 400;\n font-size: 11px;\n letter-spacing: 0.4px;\n opacity: 0.7;\n }\n\n /* Bottom row */\n &__bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 24px;\n\n @media #{$sm},\n #{$xs} {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n &__bottom-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 11px;\n letter-spacing: 2px;\n color: var(--at-neutral-500);\n }\n}","@use '../../utils' as *;\n\n/* ===========================================================\n Section 5 — Home 14 (Services list)\n\n Note: this section uses an inverted (dark) palette in light mode.\n In dark mode it inherits inverse colors via the --at-neutral-*\n token swap, becoming light-on-dark.\n =========================================================== */\n\n.sec-5-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n\n @media #{$xxl}, #{$xl} {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n\n @media #{$lg}, #{$md} {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n\n @media #{$sm}, #{$xs} {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n\n &__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n\n @media #{$x4l}, #{$x3l}, #{$xxl} {\n padding-left: 60px;\n padding-right: 60px;\n }\n\n @media #{$xl} {\n padding-left: 40px;\n padding-right: 40px;\n }\n\n @media #{$lg}, #{$md} {\n padding-left: 30px;\n padding-right: 30px;\n }\n\n @media #{$sm}, #{$xs} {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n\n /* Header */\n &__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 40px;\n margin-bottom: 64px;\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n }\n\n &__head-left {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n &__head-right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n max-width: 380px;\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n align-items: flex-start;\n max-width: none;\n }\n }\n\n &__head-copy {\n font-family: var(--at-ff-body);\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n text-align: right;\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n text-align: left;\n\n br {\n display: none;\n }\n }\n }\n\n &__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n }\n\n &__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-0);\n }\n\n &__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-0);\n letter-spacing: 2px;\n }\n\n &__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n }\n\n &__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(40px, 5vw, 84px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-0);\n\n @media #{$xs} {\n br {\n display: none;\n }\n }\n }\n\n /* Primary button on dark — neutral-700 (lighter than bg) */\n &__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n\n .sec-5-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-700);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n }\n\n .sec-5-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-700);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n }\n\n &:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n }\n }\n\n /* List */\n &__list {\n display: flex;\n flex-direction: column;\n }\n\n &__row {\n border-bottom: 1px solid var(--at-neutral-500);\n\n &:first-child {\n border-top: 1px solid var(--at-neutral-500);\n }\n }\n\n &__row-link {\n display: grid;\n grid-template-columns: 80px 80px 1fr 280px auto;\n align-items: center;\n gap: 40px;\n padding: 40px 0;\n text-decoration: none;\n color: inherit;\n transition: opacity 0.25s ease,\n padding 0.7s cubic-bezier(0.22, 1, 0.36, 1);\n\n &:hover {\n padding-left: 24px;\n padding-right: 24px;\n\n .sec-5-home-14__row-icon img {\n transform: scale(1.12) rotate(-6deg);\n filter: saturate(1.12) contrast(1.04);\n }\n }\n\n @media #{$xl} {\n grid-template-columns: 60px 80px 1fr 240px auto;\n gap: 32px;\n }\n\n @media #{$lg} {\n grid-template-columns: 80px 1fr 200px auto;\n gap: 24px;\n row-gap: 16px;\n\n .sec-5-home-14__row-num {\n grid-column: 1 / 5;\n margin-bottom: -8px;\n }\n\n .sec-5-home-14__row-icon {\n grid-column: 1;\n grid-row: 2;\n }\n\n .sec-5-home-14__row-meta {\n grid-column: 2;\n grid-row: 2;\n }\n\n .sec-5-home-14__row-price {\n grid-column: 3;\n grid-row: 2;\n }\n\n .sec-5-home-14__row-arrow {\n grid-column: 4;\n grid-row: 2;\n }\n }\n\n @media #{$md}, #{$sm}, #{$xs} {\n grid-template-columns: 64px 1fr auto;\n gap: 16px;\n row-gap: 12px;\n padding: 28px 0;\n\n .sec-5-home-14__row-num {\n grid-column: 1 / 4;\n margin-bottom: 0;\n }\n\n .sec-5-home-14__row-icon {\n grid-column: 1;\n grid-row: 2;\n }\n\n .sec-5-home-14__row-meta {\n grid-column: 2 / 4;\n grid-row: 2;\n }\n\n .sec-5-home-14__row-price {\n grid-column: 2 / 4;\n grid-row: 3;\n align-items: flex-start;\n text-align: left;\n }\n\n .sec-5-home-14__row-arrow {\n display: none;\n }\n }\n\n &:hover {\n opacity: 0.85;\n\n .sec-5-home-14__row-arrow {\n transform: translateX(4px) translateY(-4px);\n }\n }\n }\n\n &__row-num {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n letter-spacing: 2px;\n color: var(--at-neutral-500);\n }\n\n &__row-icon {\n display: block;\n width: 80px;\n height: 80px;\n border-radius: 8px;\n overflow: hidden;\n background-color: var(--at-neutral-900);\n flex-shrink: 0;\n\n @media #{$md}, #{$sm}, #{$xs} {\n width: 64px;\n height: 64px;\n border-radius: 6px;\n }\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform-origin: center;\n transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),\n filter 0.5s ease;\n }\n }\n\n &__row-meta {\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 0;\n }\n\n &__row-title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 32px;\n letter-spacing: -0.5px;\n line-height: 1.1;\n color: var(--at-neutral-0);\n\n @media #{$xl}, #{$lg} {\n font-size: 28px;\n }\n\n @media #{$md}, #{$sm} {\n font-size: 22px;\n }\n\n @media #{$xs} {\n font-size: 18px;\n }\n }\n\n &__row-desc {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n }\n\n &__row-price {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 6px;\n text-align: right;\n }\n\n &__row-price-amount {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n letter-spacing: 0.2px;\n color: var(--at-neutral-0);\n }\n\n &__row-price-cta {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n letter-spacing: 0.4px;\n color: var(--at-neutral-500);\n }\n\n &__row-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--at-neutral-0);\n transition: transform 0.25s ease;\n }\n}\n","@use '../../utils' as *;\n\n/* ===========================================================\n Section 6 — Home 14 (Our Process)\n =========================================================== */\n\n.sec-6-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-0);\n\n @media #{$xxl}, #{$xl} {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n\n @media #{$lg}, #{$md} {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n\n @media #{$sm}, #{$xs} {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n\n &__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n\n @media #{$x4l}, #{$x3l}, #{$xxl} {\n padding-left: 60px;\n padding-right: 60px;\n }\n\n @media #{$xl} {\n padding-left: 40px;\n padding-right: 40px;\n }\n\n @media #{$lg}, #{$md} {\n padding-left: 30px;\n padding-right: 30px;\n }\n\n @media #{$sm}, #{$xs} {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n\n /* Header */\n &__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 40px;\n margin-bottom: 64px;\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n }\n\n &__head-left {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n &__head-right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n max-width: 380px;\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n align-items: flex-start;\n max-width: none;\n }\n }\n\n &__head-copy {\n font-family: var(--at-ff-body);\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n text-align: right;\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n text-align: left;\n\n br {\n display: none;\n }\n }\n }\n\n &__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n }\n\n &__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n }\n\n &__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n }\n\n &__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n }\n\n &__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(40px, 5vw, 84px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n\n @media #{$xs} {\n br {\n display: none;\n }\n }\n }\n\n &__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n\n .sec-6-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n }\n\n .sec-6-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n }\n\n &:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n }\n }\n\n /* Phases */\n &__phases {\n display: grid;\n grid-template-columns: repeat(5, minmax(0, 1fr));\n counter-reset: phase;\n\n @media #{$xl}, #{$lg} {\n grid-template-columns: repeat(5, minmax(0, 1fr));\n }\n\n @media #{$md} {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n @media #{$sm}, #{$xs} {\n grid-template-columns: 1fr;\n }\n }\n\n &__phase {\n display: flex;\n flex-direction: column;\n gap: 20px;\n padding: 40px 32px;\n border-left: 1px solid var(--at-neutral-200);\n min-height: 420px;\n\n &:first-child {\n border-left: 0;\n }\n\n &:hover .sec-6-home-14__phase-dot {\n border-radius: 0;\n background-color: var(--at-theme-primary);\n }\n\n @media #{$xl}, #{$lg} {\n padding: 32px 24px;\n gap: 16px;\n min-height: 360px;\n }\n\n @media #{$md} {\n min-height: 0;\n padding: 28px 20px;\n\n &:nth-child(odd) {\n border-left: 0;\n }\n\n &:nth-child(n+3) {\n border-top: 1px solid var(--at-neutral-200);\n }\n }\n\n @media #{$sm}, #{$xs} {\n min-height: 0;\n padding: 24px 0;\n border-left: 0;\n border-top: 1px solid var(--at-neutral-200);\n\n &:first-child {\n border-top: 0;\n padding-top: 0;\n }\n }\n }\n\n &__phase-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n transition: border-radius 0.3s ease, background-color 0.3s ease;\n }\n\n &__phase-num {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 64px;\n line-height: 1;\n letter-spacing: -2px;\n color: var(--at-neutral-950);\n\n @media #{$xl}, #{$lg} {\n font-size: 52px;\n }\n\n @media #{$sm}, #{$xs} {\n font-size: 44px;\n }\n }\n\n &__phase-name {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 22px;\n letter-spacing: -0.3px;\n line-height: 1.1;\n color: var(--at-neutral-950);\n margin-top: -8px;\n }\n\n &__phase-desc {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 13px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n }\n\n &__phase-time {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 11px;\n letter-spacing: 1.6px;\n text-transform: uppercase;\n color: var(--at-neutral-500);\n margin-top: auto;\n }\n}\n","@use '../../utils' as *;\n\n/* ===========================================================\n Section 7 — Home 14 (Client Stories / Testimonial)\n =========================================================== */\n\n.sec-7-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-0);\n border-top: 1px solid var(--at-neutral-200);\n\n @media #{$xxl}, #{$xl} {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n\n @media #{$lg}, #{$md} {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n\n @media #{$sm}, #{$xs} {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n\n &__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n\n @media #{$x4l}, #{$x3l}, #{$xxl} {\n padding-left: 60px;\n padding-right: 60px;\n }\n\n @media #{$xl} {\n padding-left: 40px;\n padding-right: 40px;\n }\n\n @media #{$lg}, #{$md} {\n padding-left: 30px;\n padding-right: 30px;\n }\n\n @media #{$sm}, #{$xs} {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n\n /* Header */\n &__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 40px;\n margin-bottom: 64px;\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n }\n\n &__head-left {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n &__head-right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n }\n\n &__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n }\n\n &__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n }\n\n &__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n }\n\n &__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n }\n\n &__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(36px, 4.8vw, 80px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n\n @media #{$xs} {\n br {\n display: none;\n }\n }\n }\n\n &__nav {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n }\n\n &__nav-count {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n letter-spacing: 1.4px;\n color: var(--at-neutral-950);\n }\n\n &__nav-btn {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.25s ease;\n background-color: var(--at-neutral-0);\n border: 1px solid var(--at-neutral-950);\n color: var(--at-neutral-950);\n\n &--next {\n background-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n border-color: var(--at-neutral-950);\n }\n\n &:hover {\n background-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n }\n }\n\n &__head-link {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n color: var(--at-neutral-950);\n text-decoration: none;\n transition: opacity 0.25s ease;\n\n &:hover {\n opacity: 0.7;\n color: var(--at-neutral-950);\n }\n }\n\n /* Main */\n &__main {\n display: grid;\n grid-template-columns: 640px 1fr;\n gap: 80px;\n align-items: stretch;\n\n @media #{$x3l}, #{$xxl} {\n grid-template-columns: 520px 1fr;\n gap: 60px;\n }\n\n @media #{$xl} {\n grid-template-columns: 440px 1fr;\n gap: 48px;\n }\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n }\n\n /* Portrait */\n &__portrait {\n position: relative;\n aspect-ratio: 640 / 720;\n overflow: hidden;\n border-radius: 4px;\n background-color: var(--at-neutral-900);\n }\n\n &__portrait-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n }\n\n &__portrait-overlay {\n position: absolute;\n inset: 0;\n padding: 28px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n color: var(--at-common-white);\n pointer-events: none;\n\n @media #{$sm}, #{$xs} {\n padding: 20px;\n }\n }\n\n &__portrait-top {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 10px;\n color: var(--at-common-white);\n }\n\n &__portrait-tag {\n letter-spacing: 2px;\n }\n\n &__portrait-counter {\n letter-spacing: 0.4px;\n }\n\n &__portrait-bot {\n display: flex;\n flex-direction: column;\n gap: 6px;\n color: var(--at-common-white);\n }\n\n &__portrait-name {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 22px;\n letter-spacing: -0.3px;\n line-height: 1.1;\n }\n\n &__portrait-role {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n letter-spacing: 0.4px;\n opacity: 0.7;\n }\n\n /* Quote */\n &__quote {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__quote-mark {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 200px;\n line-height: 0.8;\n color: var(--at-neutral-950);\n margin-bottom: 16px;\n\n @media #{$md}, #{$sm}, #{$xs} {\n font-size: 140px;\n }\n }\n\n &__stars {\n display: inline-flex;\n gap: 4px;\n margin-bottom: 28px;\n }\n\n &__star {\n width: 18px;\n height: 18px;\n background-color: var(--at-neutral-950);\n border-radius: 3px;\n clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n }\n\n &__quote-text {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 34px;\n line-height: 1.35;\n letter-spacing: -0.5px;\n color: var(--at-neutral-950);\n padding: 0;\n border: 0;\n margin-bottom: 40px;\n\n @media #{$lg} {\n font-size: 28px;\n }\n\n @media #{$md} {\n font-size: 24px;\n }\n\n @media #{$sm}, #{$xs} {\n font-size: 20px;\n }\n }\n\n &__project {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 24px;\n padding-top: 24px;\n border-top: 1px solid var(--at-neutral-200);\n width: 100%;\n\n @media #{$sm}, #{$xs} {\n flex-direction: column;\n align-items: flex-start;\n gap: 16px;\n }\n }\n\n &__project-meta {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n\n &__project-title {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 14px;\n letter-spacing: 0.2px;\n color: var(--at-neutral-950);\n }\n\n &__project-sub {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 11px;\n letter-spacing: 0.4px;\n color: var(--at-neutral-500);\n }\n\n &__project-link {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n color: var(--at-neutral-950);\n text-decoration: none;\n transition: opacity 0.25s ease;\n\n &:hover {\n opacity: 0.7;\n color: var(--at-neutral-950);\n }\n }\n}\n","@use '../../utils' as *;\n\n/* ===========================================================\n Section 8 — Home 14 (Recognition Index: Press + Awards)\n =========================================================== */\n\n.sec-8-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-50);\n overflow: hidden;\n\n @media #{$xxl},\n #{$xl} {\n padding-top: 110px;\n padding-bottom: 110px;\n }\n\n @media #{$lg},\n #{$md} {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n\n &__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n\n @media #{$x4l},\n #{$x3l},\n #{$xxl} {\n padding-left: 60px;\n padding-right: 60px;\n }\n\n @media #{$xl} {\n padding-left: 40px;\n padding-right: 40px;\n }\n\n @media #{$lg},\n #{$md} {\n padding-left: 30px;\n padding-right: 30px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n\n /* ---------- Header ---------- */\n &__head {\n display: grid;\n grid-template-columns: 1.1fr 1fr;\n gap: 60px;\n align-items: end;\n margin-bottom: 56px;\n\n @media #{$lg} {\n gap: 48px;\n padding-bottom: 48px;\n margin-bottom: 48px;\n }\n\n @media #{$md},\n #{$sm} {\n grid-template-columns: 1fr;\n gap: 32px;\n align-items: start;\n padding-bottom: 40px;\n margin-bottom: 40px;\n }\n\n @media #{$xs} {\n grid-template-columns: 1fr;\n gap: 24px;\n padding-bottom: 32px;\n margin-bottom: 32px;\n }\n }\n\n &__head-left {\n display: flex;\n flex-direction: column;\n gap: 32px;\n }\n\n &__head-right {\n display: flex;\n flex-direction: column;\n gap: 40px;\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n gap: 28px;\n }\n }\n\n /* Shared eyebrow */\n &__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n }\n\n &__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n flex-shrink: 0;\n }\n\n &__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n }\n\n &__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n }\n\n &__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(40px, 5vw, 84px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n\n @media #{$xs} {\n br {\n display: none;\n }\n }\n }\n\n &__head-copy {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 16px;\n line-height: 1.55;\n letter-spacing: -0.01em;\n color: var(--at-neutral-700);\n\n @media #{$xs} {\n br {\n display: none;\n }\n }\n }\n\n /* Metrics row (24 / 12 / 07) */\n &__metrics {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 24px;\n padding-top: 32px;\n\n @media #{$xs} {\n gap: 16px;\n padding-top: 24px;\n }\n }\n\n &__metric {\n display: flex;\n flex-direction: column-reverse;\n gap: 8px;\n }\n\n &__metric-key {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--at-neutral-500);\n }\n\n &__metric-val {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(36px, 3.5vw, 56px);\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950);\n font-feature-settings: \"tnum\" 1;\n }\n\n /* ---------- Press ticker ---------- */\n &__ticker {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n gap: 32px;\n padding: 28px 0;\n border-top: 1px solid var(--at-neutral-200);\n border-bottom: 1px solid var(--at-neutral-200);\n margin-bottom: 100px;\n\n @media #{$lg} {\n margin-bottom: 80px;\n gap: 24px;\n }\n\n @media #{$md} {\n grid-template-columns: 1fr;\n gap: 20px;\n padding: 24px 0;\n margin-bottom: 64px;\n }\n\n @media #{$sm},\n #{$xs} {\n grid-template-columns: 1fr;\n gap: 16px;\n padding: 20px 0;\n margin-bottom: 48px;\n }\n }\n\n &__ticker-label {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--at-neutral-950);\n white-space: nowrap;\n }\n\n &__ticker-label-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-theme-primary);\n flex-shrink: 0;\n }\n\n &__ticker-viewport {\n overflow: hidden;\n mask-image: linear-gradient(to right,\n transparent 0,\n #000 8%,\n #000 92%,\n transparent 100%);\n -webkit-mask-image: linear-gradient(to right,\n transparent 0,\n #000 8%,\n #000 92%,\n transparent 100%);\n }\n\n &__ticker-track {\n display: inline-flex;\n width: max-content;\n animation: sec8home14TickerScroll 32s linear infinite;\n will-change: transform;\n\n &:hover {\n animation-play-state: paused;\n }\n }\n\n &__ticker-list {\n display: inline-flex;\n align-items: center;\n gap: 48px;\n padding-right: 48px;\n\n @media #{$md} {\n gap: 36px;\n padding-right: 36px;\n }\n\n @media #{$sm},\n #{$xs} {\n gap: 28px;\n padding-right: 28px;\n }\n }\n\n &__ticker-item {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 28px;\n line-height: 1;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--at-neutral-950);\n white-space: nowrap;\n\n @media #{$lg} {\n font-size: 24px;\n }\n\n @media #{$md} {\n font-size: 22px;\n }\n\n @media #{$sm},\n #{$xs} {\n font-size: 18px;\n letter-spacing: 1.5px;\n }\n\n &[aria-hidden=\"true\"] {\n color: var(--at-neutral-300);\n font-size: 14px;\n }\n }\n\n @keyframes sec8home14TickerScroll {\n from {\n transform: translate3d(0, 0, 0);\n }\n\n to {\n transform: translate3d(-50%, 0, 0);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n &__ticker-track {\n animation: none;\n }\n }\n\n /* ---------- Awards roster ---------- */\n &__roster-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding-bottom: 20px;\n margin-bottom: 8px;\n border-bottom: 1px solid var(--at-neutral-300);\n }\n\n &__roster-key {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--at-neutral-950);\n }\n\n &__roster-cols {\n display: grid;\n grid-template-columns: 64px 96px 1fr 200px;\n gap: 32px;\n flex: 1;\n max-width: 70%;\n\n @media #{$xxl} {\n max-width: 66%;\n }\n\n @media #{$xl} {\n max-width: 60%;\n grid-template-columns: 56px 80px 1fr 160px;\n gap: 24px;\n }\n\n @media #{$lg},\n #{$md},\n #{$sm},\n #{$xs} {\n display: none;\n }\n }\n\n &__roster-col {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 11px;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n color: var(--at-neutral-500);\n\n &:last-child {\n text-align: right;\n }\n }\n\n /* Award rows */\n &__awards {\n display: flex;\n flex-direction: column;\n }\n\n &__award {\n position: relative;\n display: grid;\n grid-template-columns: 64px 96px 1fr 200px;\n align-items: center;\n gap: 32px;\n padding: 28px 0;\n border-bottom: 1px solid var(--at-neutral-200);\n transition: padding-left 0.35s ease, background-color 0.35s ease;\n\n @media #{$xl} {\n grid-template-columns: 56px 80px 1fr 160px;\n gap: 24px;\n padding: 24px 0;\n }\n\n @media #{$lg} {\n grid-template-columns: 48px 72px 1fr 140px;\n gap: 20px;\n padding: 22px 0;\n }\n\n @media #{$md} {\n grid-template-columns: 44px 64px 1fr 120px;\n gap: 18px;\n padding: 20px 0;\n }\n\n @media #{$sm} {\n grid-template-columns: 40px 1fr auto;\n grid-template-areas:\n \"idx body result\"\n \"yr body result\";\n row-gap: 4px;\n column-gap: 16px;\n padding: 20px 0;\n }\n\n @media #{$xs} {\n grid-template-columns: auto 1fr;\n grid-template-areas:\n \"idx yr\"\n \"body body\"\n \"result result\";\n row-gap: 12px;\n column-gap: 12px;\n padding: 20px 0;\n }\n\n &:hover {\n padding-left: 16px;\n background-color: var(--at-neutral-0);\n\n .sec-8-home-14__award-result {\n color: var(--at-theme-primary);\n }\n\n .sec-8-home-14__award-index {\n color: var(--at-neutral-950);\n }\n }\n\n @media #{$sm},\n #{$xs} {\n &:hover {\n padding-left: 0;\n background-color: transparent;\n }\n }\n }\n\n &__award-badge {\n position: absolute;\n top: 12px;\n right: 0;\n display: inline-flex;\n align-items: center;\n height: 22px;\n padding: 0 10px;\n background-color: var(--at-theme-primary);\n color: var(--at-neutral-0);\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 10px;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n line-height: 1;\n border-radius: 999px;\n\n @media #{$sm},\n #{$xs} {\n position: static;\n order: -1;\n grid-column: 1 / -1;\n align-self: flex-start;\n margin-bottom: 4px;\n }\n }\n\n &__award-index {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 18px;\n line-height: 1;\n letter-spacing: 0;\n color: var(--at-neutral-300);\n font-feature-settings: \"tnum\" 1;\n transition: color 0.35s ease;\n\n @media #{$sm} {\n grid-area: idx;\n font-size: 16px;\n }\n\n @media #{$xs} {\n grid-area: idx;\n font-size: 14px;\n color: var(--at-neutral-500);\n }\n }\n\n &__award-year {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(28px, 2.6vw, 40px);\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950);\n font-feature-settings: \"tnum\" 1;\n\n @media #{$sm} {\n grid-area: yr;\n font-size: 22px;\n color: var(--at-neutral-700);\n }\n\n @media #{$xs} {\n grid-area: yr;\n font-size: 18px;\n color: var(--at-neutral-700);\n text-align: right;\n align-self: center;\n }\n }\n\n &__award-body {\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-width: 0;\n\n @media #{$sm} {\n grid-area: body;\n }\n\n @media #{$xs} {\n grid-area: body;\n }\n }\n\n &__award-name {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(20px, 1.8vw, 26px);\n line-height: 1.2;\n letter-spacing: -0.015em;\n color: var(--at-neutral-950);\n }\n\n &__award-cat {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 13px;\n line-height: 1.4;\n letter-spacing: 0.2px;\n color: var(--at-neutral-500);\n }\n\n &__award-result {\n justify-self: end;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 13px;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n color: var(--at-neutral-700);\n line-height: 1;\n transition: color 0.35s ease;\n text-align: right;\n\n &--finalist {\n color: var(--at-neutral-950);\n }\n\n &--gold {\n color: var(--at-theme-primary);\n }\n\n @media #{$sm} {\n grid-area: result;\n justify-self: end;\n align-self: center;\n font-size: 11px;\n }\n\n @media #{$xs} {\n grid-area: result;\n justify-self: start;\n font-size: 12px;\n }\n }\n\n /* Latest row — subtle emphasis (without breaking grid) */\n &__award--latest {\n background-color: var(--at-neutral-0);\n padding-left: 16px;\n padding-right: 16px;\n\n @media #{$sm},\n #{$xs} {\n padding-left: 12px;\n padding-right: 12px;\n }\n }\n\n /* Roster footer */\n &__roster-foot {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n margin-top: 32px;\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 13px;\n letter-spacing: 0.4px;\n color: var(--at-neutral-500);\n\n @media #{$xs} {\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 24px;\n }\n }\n\n &__roster-foot-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: var(--at-neutral-300);\n flex-shrink: 0;\n }\n\n &__roster-foot-link {\n color: var(--at-neutral-950);\n text-decoration: none;\n font-weight: 500;\n border-bottom: 1px solid var(--at-neutral-300);\n padding-bottom: 1px;\n transition: color 0.25s ease, border-color 0.25s ease;\n\n &:hover {\n color: var(--at-theme-primary);\n border-bottom-color: var(--at-theme-primary);\n }\n }\n}","@use '../../utils' as *;\n\n/* ===========================================================\n Section 9 — Home 14 (From the Feed)\n =========================================================== */\n\n.sec-9-home-14 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-0);\n border-top: 1px solid var(--at-neutral-200);\n\n @media #{$xxl}, #{$xl} {\n padding-top: 100px;\n padding-bottom: 100px;\n }\n\n @media #{$lg}, #{$md} {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n\n @media #{$sm}, #{$xs} {\n padding-top: 56px;\n padding-bottom: 56px;\n }\n\n &__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n\n @media #{$x4l}, #{$x3l}, #{$xxl} {\n padding-left: 60px;\n padding-right: 60px;\n }\n\n @media #{$xl} {\n padding-left: 40px;\n padding-right: 40px;\n }\n\n @media #{$lg}, #{$md} {\n padding-left: 30px;\n padding-right: 30px;\n }\n\n @media #{$sm}, #{$xs} {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n\n /* Header */\n &__head {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 40px;\n margin-bottom: 64px;\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n flex-direction: column;\n align-items: flex-start;\n gap: 28px;\n }\n }\n\n &__head-left {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n &__head-right {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n max-width: 380px;\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n align-items: flex-start;\n max-width: none;\n }\n }\n\n &__head-copy {\n font-family: var(--at-ff-body);\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-500);\n text-align: right;\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n text-align: left;\n\n br {\n display: none;\n }\n }\n }\n\n &__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n }\n\n &__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n }\n\n &__eyebrow-key {\n font-weight: 600;\n color: var(--at-neutral-950);\n letter-spacing: 2px;\n }\n\n &__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n }\n\n &__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: clamp(40px, 5vw, 84px);\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-neutral-950);\n\n @media #{$xs} {\n br {\n display: none;\n }\n }\n }\n\n &__btn-primary {\n display: inline-flex;\n align-items: stretch;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: opacity 0.3s ease;\n\n .sec-9-home-14__btn-label {\n display: inline-flex;\n align-items: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n padding: 14px 27px;\n border-radius: 50px 0 0 50px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n }\n\n .sec-9-home-14__btn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--at-neutral-900);\n color: var(--at-neutral-0);\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-left: 2px;\n }\n\n &:hover {\n opacity: 0.85;\n color: var(--at-neutral-0);\n }\n }\n\n /* Gallery */\n &__gallery {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 24px;\n\n @media #{$md} {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n @media #{$sm}, #{$xs} {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n }\n\n &__col {\n display: flex;\n flex-direction: column;\n gap: 24px;\n\n &--offset-80 {\n padding-top: 80px;\n\n @media #{$md}, #{$sm}, #{$xs} {\n padding-top: 0;\n }\n }\n\n &--offset-40 {\n padding-top: 40px;\n\n @media #{$md}, #{$sm}, #{$xs} {\n padding-top: 0;\n }\n }\n }\n\n &__tile {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 20px;\n border-radius: 4px;\n overflow: hidden;\n text-decoration: none;\n color: var(--at-common-white);\n background-color: var(--at-neutral-900);\n\n &--h380 { aspect-ratio: 557 / 380; }\n &--h420 { aspect-ratio: 557 / 420; }\n &--h480 { aspect-ratio: 557 / 480; }\n\n @media #{$sm}, #{$xs} {\n aspect-ratio: 4 / 5 !important;\n }\n\n &:hover {\n color: var(--at-common-white);\n }\n }\n\n &__tile-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n border-radius: 4px;\n }\n\n &__tile-top {\n position: relative;\n z-index: 2;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n font-family: var(--at-ff-body);\n font-size: 10px;\n letter-spacing: 0.4px;\n color: var(--at-common-white);\n }\n\n &__tile-handle {\n font-weight: 500;\n opacity: 0.6;\n }\n\n &__tile-tag {\n font-weight: 400;\n opacity: 0.4;\n }\n\n &__tile-meta {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-family: var(--at-ff-body);\n color: var(--at-common-white);\n }\n\n &__tile-title {\n font-weight: 500;\n font-size: 18px;\n letter-spacing: -0.3px;\n line-height: 1.1;\n }\n\n &__tile-sub {\n font-weight: 400;\n font-size: 11px;\n letter-spacing: 0.4px;\n opacity: 0.7;\n }\n}\n","@use '../../utils' as *;\n\n/* ===========================================================\n Section 1 — Home 15 (Agency Hero)\n =========================================================== */\n\n.sec-1-home-15 {\n padding-top: 66px;\n padding-bottom: 80px;\n background-color: var(--at-neutral-0);\n\n @media #{$lg},\n #{$md} {\n padding-top: 60px;\n padding-bottom: 56px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding-top: 60px;\n padding-bottom: 40px;\n }\n\n /* ---- Hero card ---- */\n &__card {\n position: relative;\n width: 100%;\n height: 637px;\n max-height: calc(100vh - 160px);\n overflow: hidden;\n border-radius: 16px;\n background-color: var(--at-neutral-900);\n isolation: isolate;\n\n @media #{$xl} {\n height: 560px;\n }\n\n @media #{$lg} {\n height: 520px;\n }\n\n @media #{$md} {\n height: 480px;\n }\n\n @media #{$sm} {\n height: 560px;\n max-height: none;\n }\n\n @media #{$xs} {\n height: 520px;\n max-height: none;\n border-radius: 12px;\n }\n }\n\n &__bg {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: 1;\n pointer-events: none;\n }\n\n &__grid {\n position: absolute;\n inset: 0;\n z-index: 2;\n pointer-events: none;\n background-repeat: no-repeat;\n background-position: center center;\n background-size: 80% auto;\n opacity: 0.5;\n mix-blend-mode: screen;\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n opacity: 0.35;\n background-size: 130% auto;\n }\n }\n\n /* ---- Top row (coordinates + email) ---- */\n &__top {\n position: absolute;\n top: 30px;\n left: 35px;\n right: 35px;\n z-index: 4;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n color: var(--at-common-white);\n\n @media #{$sm},\n #{$xs} {\n top: 20px;\n left: 20px;\n right: 20px;\n }\n }\n\n &__coord {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-common-white);\n\n @media #{$sm},\n #{$xs} {\n font-size: 12px;\n gap: 6px;\n }\n }\n\n &__coord-icon {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n\n @media #{$sm},\n #{$xs} {\n width: 16px;\n height: 16px;\n }\n }\n\n &__email {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-common-white);\n text-decoration: none;\n transition: opacity 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-common-white);\n opacity: 0.7;\n }\n\n @media #{$sm},\n #{$xs} {\n font-size: 12px;\n }\n }\n\n /* ---- Scroll indicator (right side, mid-height) ---- */\n &__scroll {\n position: absolute;\n right: 40px;\n top: 50%;\n z-index: 4;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 18px;\n transform: translateY(-50%);\n color: var(--at-neutral-100);\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n display: none;\n }\n }\n\n &__scroll-line {\n display: block;\n width: 1px;\n height: 70px;\n background-color: #fff;\n opacity: 0.7;\n animation: secOneHome15ScrollLine 2.4s ease-in-out infinite;\n }\n\n &__scroll-label {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n writing-mode: vertical-rl;\n transform: rotate(180deg);\n }\n\n @keyframes secOneHome15ScrollLine {\n\n 0%,\n 100% {\n transform: scaleY(0.4);\n transform-origin: top;\n opacity: 0.4;\n }\n\n 50% {\n transform: scaleY(1);\n transform-origin: top;\n opacity: 0.9;\n }\n }\n\n /* ---- Bottom row (tags + clients) ---- */\n &__bottom {\n position: absolute;\n left: 35px;\n right: 35px;\n bottom: 40px;\n z-index: 4;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 32px;\n\n @media #{$md} {\n flex-direction: column;\n align-items: flex-start;\n gap: 20px;\n }\n\n @media #{$sm},\n #{$xs} {\n left: 20px;\n right: 20px;\n bottom: 24px;\n flex-direction: column;\n align-items: flex-start;\n gap: 18px;\n }\n }\n\n &__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n max-width: 540px;\n padding: 0;\n margin: 0;\n list-style: none;\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n max-width: none;\n }\n }\n\n &__tag {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 15px 19px;\n background-color: rgba(70, 70, 70, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.3);\n border-radius: 32px;\n backdrop-filter: blur(24px);\n -webkit-backdrop-filter: blur(24px);\n color: #fff;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n white-space: nowrap;\n\n svg {\n flex-shrink: 0;\n }\n\n @media #{$sm},\n #{$xs} {\n padding: 11px 14px;\n font-size: 13px;\n gap: 8px;\n }\n }\n\n &__clients {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 15px;\n color: var(--at-common-white);\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n align-items: flex-start;\n }\n }\n\n &__avatars {\n display: inline-flex;\n align-items: center;\n }\n\n &__avatar {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n border: 2px solid var(--at-common-white);\n object-fit: cover;\n background-color: var(--at-neutral-700);\n\n &+& {\n margin-left: -12px;\n }\n }\n\n &__clients-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.25;\n letter-spacing: -0.02em;\n text-align: right;\n color: var(--at-common-white);\n\n @media #{$md},\n #{$sm},\n #{$xs} {\n text-align: left;\n\n br {\n display: none;\n }\n }\n\n @media #{$xs} {\n font-size: 14px;\n }\n }\n\n /* ---- Title block under the hero card ---- */\n &__title-block {\n position: relative;\n padding-top: 44px;\n\n @media #{$xl} {\n padding-top: 36px;\n }\n\n @media #{$lg},\n #{$md} {\n padding-top: 28px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding-top: 22px;\n }\n }\n\n &__title {\n font-family: var(--at-ff-heading);\n font-weight: 700;\n font-size: 173px;\n line-height: 1;\n letter-spacing: -0.05em;\n text-align: center;\n color: var(--at-neutral-900);\n margin: 0;\n\n @media #{$x4l},\n #{$x3l} {\n font-size: 150px;\n }\n\n @media #{$xxl} {\n font-size: 128px;\n }\n\n @media #{$xl} {\n font-size: 110px;\n }\n\n @media #{$lg} {\n font-size: 92px;\n }\n\n @media #{$md} {\n font-size: 72px;\n }\n\n @media #{$sm} {\n font-size: 56px;\n }\n\n @media #{$xs} {\n font-size: 40px;\n }\n }\n\n &__title-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n margin-top: -22px;\n\n @media #{$xl} {\n margin-top: -16px;\n }\n\n @media #{$lg},\n #{$md} {\n margin-top: -10px;\n }\n\n @media #{$sm} {\n margin-top: 8px;\n }\n\n @media #{$xs} {\n margin-top: 10px;\n flex-wrap: wrap;\n gap: 8px;\n }\n }\n\n &__title-side {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n text-decoration: underline;\n text-underline-offset: 3px;\n color: var(--at-neutral-900);\n\n @media #{$xs} {\n font-size: 13px;\n }\n }\n}","@use '../../utils' as *;\n\n/* ===========================================================\n Section 2 — Home 15 (About Us)\n =========================================================== */\n\n.sec-2-home-15 {\n background-color: var(--at-neutral-0);\n border-top: 1px solid var(--at-neutral-200);\n\n /* ---- Top heading ---- */\n &__heading {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 48px;\n line-height: 1.08;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n\n @media #{$xl} {\n font-size: 42px;\n }\n\n @media #{$lg} {\n font-size: 38px;\n }\n\n @media #{$md} {\n font-size: 34px;\n }\n\n @media #{$sm} {\n font-size: 30px;\n }\n\n @media #{$xs} {\n font-size: 26px;\n }\n }\n\n /* ---- Media (big image) ---- */\n &__media-1 {\n position: relative;\n width: 100%;\n aspect-ratio: 553 / 533;\n overflow: hidden;\n border-radius: 16px;\n background-color: var(--at-neutral-200);\n }\n\n &__media-1-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n /* ---- Floating glass badge on media-1 ---- */\n &__media-1-badge {\n position: absolute;\n right: 20px;\n bottom: 20px;\n z-index: 2;\n display: inline-flex;\n align-items: center;\n gap: 14px;\n padding: 12px 18px;\n border-radius: 14px;\n background-color: rgba(37, 99, 235, 0.32);\n border: 1px solid rgba(255, 255, 255, 0.28);\n backdrop-filter: blur(16px) saturate(1.2);\n -webkit-backdrop-filter: blur(16px) saturate(1.2);\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n color: #fff;\n max-width: calc(100% - 32px);\n\n @media #{$md} {\n right: 16px;\n bottom: 16px;\n padding: 10px 14px;\n gap: 12px;\n }\n\n @media #{$sm}, #{$xs} {\n right: 12px;\n bottom: 12px;\n padding: 10px 12px;\n gap: 10px;\n border-radius: 12px;\n }\n }\n\n &__media-1-badge-dot {\n position: relative;\n flex-shrink: 0;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #4ade80;\n box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);\n animation: sec-2-home-15-pulse 1.8s ease-out infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n }\n\n &__media-1-badge-text {\n display: inline-flex;\n flex-direction: column;\n line-height: 1.2;\n min-width: 0;\n }\n\n &__media-1-badge-title {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 14px;\n letter-spacing: -0.01em;\n color: #fff;\n\n @media #{$sm}, #{$xs} {\n font-size: 13px;\n }\n }\n\n &__media-1-badge-meta {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 12px;\n letter-spacing: 0;\n color: rgba(255, 255, 255, 0.82);\n\n @media #{$xs} {\n font-size: 11px;\n }\n }\n\n /* ---- Right column content ---- */\n &__content {\n display: flex;\n flex-direction: column;\n gap: 40px;\n\n @media #{$xl} {\n gap: 32px;\n }\n\n @media #{$md}, #{$sm}, #{$xs} {\n gap: 24px;\n }\n }\n\n &__body {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 24px;\n line-height: 1.3;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n max-width: 620px;\n\n @media #{$xl} {\n font-size: 22px;\n }\n\n @media #{$lg}, #{$md} {\n font-size: 20px;\n }\n\n @media #{$sm}, #{$xs} {\n font-size: 18px;\n }\n }\n\n /* ---- Features 2x2 ---- */\n &__features {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 20px 39px;\n max-width: 620px;\n\n @media #{$sm}, #{$xs} {\n grid-template-columns: 1fr;\n gap: 14px;\n }\n }\n\n &__feature {\n display: flex;\n align-items: center;\n gap: 12px;\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-700);\n\n @media #{$xs} {\n font-size: 15px;\n }\n }\n\n &__feature-icon {\n flex-shrink: 0;\n color: var(--at-neutral-900);\n }\n\n /* ---- Compact contact form ---- */\n &__form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n max-width: 620px;\n\n @media #{$md}, #{$sm}, #{$xs} {\n gap: 16px;\n }\n }\n\n &__form-label {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 18px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n\n @media #{$sm}, #{$xs} {\n font-size: 16px;\n }\n }\n\n &__form-row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0 32px;\n\n @media #{$sm}, #{$xs} {\n grid-template-columns: 1fr;\n gap: 0;\n }\n }\n\n &__form-textarea {\n min-height: 96px;\n }\n\n &__form-actions {\n margin-top: 12px;\n margin-bottom: 0;\n }\n\n /* ---- Floating 3D cube object ---- */\n &__object {\n position: absolute;\n right: 24px;\n bottom: -40px;\n z-index: 1;\n pointer-events: none;\n\n @media #{$xl} {\n right: 16px;\n transform: scale(0.85);\n transform-origin: right bottom;\n }\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n display: none;\n }\n }\n\n /* ---- Stats with odometer ---- */\n &__stats {\n margin-left: 0;\n margin-right: 0;\n }\n\n &__stat {\n display: flex;\n flex-direction: column;\n }\n\n &__stat-num {\n display: inline-flex;\n align-items: baseline;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 84px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n\n @media #{$xl} {\n font-size: 72px;\n }\n\n @media #{$lg} {\n font-size: 64px;\n }\n\n @media #{$md} {\n font-size: 56px;\n }\n\n @media #{$sm} {\n font-size: 56px;\n }\n\n @media #{$xs} {\n font-size: 48px;\n }\n\n .odometer {\n font: inherit;\n color: inherit;\n }\n\n .odometer-inside,\n .odometer-digit,\n .odometer-formatting-mark {\n font: inherit !important;\n color: inherit !important;\n }\n }\n\n &__stat-suffix {\n display: inline-block;\n font: inherit;\n color: inherit;\n }\n\n &__stat-label {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n max-width: 200px;\n\n @media #{$xs} {\n font-size: 14px;\n }\n }\n\n /* ---- Secondary image ---- */\n &__media-2 {\n position: relative;\n width: 100%;\n aspect-ratio: 322 / 401;\n overflow: hidden;\n border-radius: 16px;\n background-color: var(--at-neutral-200);\n }\n\n &__media-2-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n /* ---- Floating glass badge on media-2 (compact) ---- */\n &__media-2-badge {\n position: absolute;\n right: 14px;\n bottom: 14px;\n z-index: 2;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n border-radius: 12px;\n background-color: rgba(37, 99, 235, 0.32);\n border: 1px solid rgba(255, 255, 255, 0.28);\n backdrop-filter: blur(16px) saturate(1.2);\n -webkit-backdrop-filter: blur(16px) saturate(1.2);\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n color: #fff;\n max-width: calc(100% - 28px);\n\n @media #{$xs} {\n right: 10px;\n bottom: 10px;\n padding: 8px 11px;\n gap: 8px;\n border-radius: 10px;\n }\n }\n\n &__media-2-badge-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.18);\n color: #ffd166;\n\n @media #{$xs} {\n width: 24px;\n height: 24px;\n\n svg {\n width: 14px;\n height: 14px;\n }\n }\n }\n\n &__media-2-badge-text {\n display: inline-flex;\n flex-direction: column;\n line-height: 1.2;\n min-width: 0;\n }\n\n &__media-2-badge-title {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 13px;\n letter-spacing: -0.01em;\n color: #fff;\n\n @media #{$xs} {\n font-size: 12px;\n }\n }\n\n &__media-2-badge-meta {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 11px;\n color: rgba(255, 255, 255, 0.82);\n }\n\n /* ---- Statement (shape icon + text) ---- */\n &__statement {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 32px;\n max-width: 323px;\n\n @media #{$md}, #{$sm}, #{$xs} {\n gap: 20px;\n }\n }\n\n &__statement-icon {\n width: 40px;\n height: 40px;\n object-fit: contain;\n flex-shrink: 0;\n }\n\n &__statement-text {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 20px;\n line-height: 1.3;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n\n @media #{$xl} {\n font-size: 18px;\n }\n\n @media #{$xs} {\n font-size: 16px;\n }\n }\n}\n\n@keyframes sec-2-home-15-pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);\n }\n\n 70% {\n box-shadow: 0 0 0 12px rgba(74, 222, 128, 0);\n }\n\n 100% {\n box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);\n }\n}\n","@use '../../utils' as *;\n\n/* ===========================================================\n Section 3 — Home 15 (Brand strip with auto-marquee)\n =========================================================== */\n\n.sec-3-home-15 {\n overflow-x: hidden;\n background-color: var(--at-neutral-0);\n padding-top: 24px;\n padding-bottom: 24px;\n\n @media #{$sm}, #{$xs} {\n padding-top: 16px;\n padding-bottom: 16px;\n }\n\n /* carouselTicker plugin handles infinite horizontal scroll on the ul. */\n &__strip {\n width: 100%;\n }\n\n /* Match Figma fill + responsive card sizes. */\n .at-brand-item {\n background-color: var(--at-neutral-50);\n\n @media #{$xl}, #{$lg} {\n width: 170px;\n height: 170px;\n }\n\n @media #{$sm} {\n width: 150px;\n height: 150px;\n }\n\n @media #{$xs} {\n width: 140px;\n height: 140px;\n }\n }\n}\n","@use '../../utils' as *;\n\n/* ===========================================================\n Section 4 — Home 15 (Selected work)\n =========================================================== */\n\n.sec-4-home-15 {\n background-color: var(--at-neutral-0);\n\n /* ---- Title bar ---- */\n &__title-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 32px;\n padding: 30px;\n border: 1px solid var(--at-neutral-200);\n border-radius: 16px;\n background-color: var(--at-neutral-0);\n\n @media #{$xl} {\n padding: 26px;\n margin-bottom: 72px;\n }\n\n @media #{$lg},\n #{$md} {\n padding: 24px;\n margin-bottom: 56px;\n flex-direction: column;\n align-items: flex-start;\n gap: 20px;\n }\n\n @media #{$sm},\n #{$xs} {\n padding: 20px;\n margin-bottom: 40px;\n flex-direction: column;\n align-items: flex-start;\n gap: 18px;\n }\n }\n\n &__heading {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 72px;\n line-height: 1.05;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n margin: 0;\n\n @media #{$xl} {\n font-size: 60px;\n }\n\n @media #{$lg} {\n font-size: 52px;\n }\n\n @media #{$md} {\n font-size: 44px;\n }\n\n @media #{$sm} {\n font-size: 38px;\n }\n\n @media #{$xs} {\n font-size: 32px;\n }\n }\n\n /* ---- Project cards stack ---- */\n &__cards {\n display: flex;\n flex-direction: column;\n gap: 92px;\n\n @media #{$xl} {\n gap: 72px;\n }\n\n @media #{$lg},\n #{$md} {\n gap: 56px;\n }\n\n @media #{$sm},\n #{$xs} {\n gap: 40px;\n }\n }\n\n &__card {\n position: relative;\n display: block;\n width: 100%;\n aspect-ratio: 1428 / 1011;\n overflow: hidden;\n border-radius: 16px;\n background-color: var(--at-neutral-200);\n text-decoration: none;\n\n @media #{$xs} {\n border-radius: 12px;\n aspect-ratio: 4 / 5;\n }\n\n &:hover,\n &:focus-visible {\n color: inherit;\n }\n }\n\n &__card-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n }\n\n &__card-badge {\n position: absolute;\n top: 23px;\n right: 23px;\n z-index: 3;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 8px 10px;\n border-radius: 20px;\n background-color: var(--at-common-white);\n color: var(--at-neutral-950);\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 10px;\n line-height: 1;\n letter-spacing: -0.02em;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n &__card-bar {\n position: absolute;\n left: 20px;\n right: 20px;\n bottom: 21px;\n z-index: 3;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding: 0 45px;\n height: 100px;\n background-color: var(--at-neutral-0);\n border-radius: 16px;\n overflow: hidden;\n\n @media #{$lg},\n #{$md} {\n padding: 0 32px;\n height: 84px;\n }\n\n @media #{$sm} {\n padding: 0 22px;\n height: 72px;\n }\n\n @media #{$xs} {\n left: 12px;\n right: 12px;\n bottom: 12px;\n padding: 0 16px;\n height: 64px;\n gap: 12px;\n }\n }\n\n &__card-name {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: 64px;\n line-height: 1.1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n white-space: nowrap;\n\n @media #{$xl} {\n font-size: 56px;\n }\n\n @media #{$lg} {\n font-size: 44px;\n }\n\n @media #{$md} {\n font-size: 38px;\n }\n\n @media #{$sm} {\n font-size: 30px;\n }\n\n @media #{$xs} {\n font-size: 22px;\n }\n }\n\n &__card-cta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: -0.02em;\n text-transform: uppercase;\n color: var(--at-neutral-900);\n white-space: nowrap;\n transition: opacity 0.3s ease;\n\n svg {\n flex-shrink: 0;\n transition: transform 0.3s ease;\n }\n }\n\n &__card:hover &__card-cta,\n &__card:focus-visible &__card-cta {\n opacity: 0.85;\n\n svg {\n transform: rotate(45deg);\n }\n }\n\n /* ---- Repo strip ---- */\n &__repos {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n margin-top: 32px;\n padding: 0;\n\n @media #{$xl} {\n margin-top: 72px;\n }\n\n @media #{$lg},\n #{$md} {\n margin-top: 56px;\n justify-content: center;\n gap: 24px;\n }\n\n @media #{$sm},\n #{$xs} {\n margin-top: 40px;\n justify-content: center;\n gap: 14px 20px;\n }\n\n a {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900);\n text-decoration: none;\n transition: opacity 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: var(--at-neutral-900);\n opacity: 0.7;\n }\n\n @media #{$xs} {\n font-size: 14px;\n }\n }\n }\n}","@use '../../utils' as *;\n\n/* ===========================================================\n Section 5 — Home 15 (From idea to final project)\n =========================================================== */\n\n.sec-5-home-15 {\n background-color: var(--at-neutral-950);\n color: var(--at-common-white);\n padding-top: 140px;\n padding-bottom: 140px;\n\n @media #{$xl} {\n padding-top: 110px;\n padding-bottom: 110px;\n }\n\n @media #{$lg}, #{$md} {\n padding-top: 90px;\n padding-bottom: 90px;\n }\n\n @media #{$sm}, #{$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n\n /* ---- Eyebrow ---- */\n &__eyebrow {\n display: inline-flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n margin-bottom: 28px;\n font-family: var(--at-ff-body);\n font-size: 11px;\n line-height: 1;\n text-transform: uppercase;\n }\n\n &__eyebrow-dot {\n width: 8px;\n height: 8px;\n border-radius: 4px;\n background-color: var(--at-common-white);\n flex-shrink: 0;\n }\n\n &__eyebrow-key {\n font-weight: 600;\n color: var(--at-common-white);\n letter-spacing: 2px;\n }\n\n &__eyebrow-meta {\n font-weight: 400;\n color: var(--at-neutral-500);\n letter-spacing: 1.2px;\n }\n\n /* ---- Heading ---- */\n &__heading {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 84px;\n line-height: 1;\n letter-spacing: -0.025em;\n color: var(--at-common-white);\n margin: 0;\n max-width: 1100px;\n\n @media #{$xl} {\n font-size: 72px;\n }\n\n @media #{$lg} {\n font-size: 60px;\n }\n\n @media #{$md} {\n font-size: 52px;\n }\n\n @media #{$sm} {\n font-size: 42px;\n }\n\n @media #{$xs} {\n font-size: 34px;\n\n br {\n display: none;\n }\n }\n }\n\n /* ---- Right column: copy + CTA ---- */\n &__intro {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 16px;\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n align-items: flex-start;\n }\n }\n\n &__copy {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 14px;\n line-height: 1.6;\n color: var(--at-neutral-50);\n text-align: right;\n max-width: 446px;\n\n @media #{$lg}, #{$md}, #{$sm}, #{$xs} {\n text-align: left;\n max-width: none;\n }\n }\n\n /* Orange-themed CTA group — uses theme primary instead of neutral-900 */\n &__cta.at-btn-group {\n\n .at-btn-circle,\n .at-btn {\n background-color: var(--at-theme-primary);\n color: var(--at-common-white);\n border-color: var(--at-theme-primary);\n }\n\n .at-btn:hover,\n .at-btn:focus-visible,\n .at-btn-circle:hover,\n .at-btn-circle:focus-visible {\n background-color: var(--at-theme-primary);\n color: var(--at-common-white);\n opacity: 0.92;\n }\n }\n\n /* ---- Phases row ---- */\n &__phases {\n --bs-gutter-x: 0;\n }\n\n /* Vertical separators between phases (skip first column at the active breakpoint). */\n &__phase {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0;\n height: 100%;\n padding: 40px 32px;\n color: var(--at-common-white);\n border-left: 1px solid var(--at-neutral-800);\n transition:\n background-color 0.4s ease,\n transform 0.4s ease;\n\n @media #{$sm}, #{$xs} {\n padding: 32px 24px;\n }\n\n &:hover {\n background-color: rgba(255, 255, 255, 0.025);\n transform: translateY(-5px);\n }\n }\n\n /* Drop the left border on the first phase per row at each breakpoint */\n .row-cols-xxl-5 > .col:nth-child(5n+1) .sec-5-home-15__phase {\n @media #{$x4l}, #{$x3l}, #{$xxl} {\n border-left: 0;\n }\n }\n\n .row-cols-xl-5 > .col:nth-child(5n+1) .sec-5-home-15__phase {\n @media #{$xl} {\n border-left: 0;\n }\n }\n\n .row-cols-lg-3 > .col:nth-child(3n+1) .sec-5-home-15__phase {\n @media #{$lg} {\n border-left: 0;\n }\n }\n\n .row-cols-md-2 > .col:nth-child(2n+1) .sec-5-home-15__phase {\n @media #{$md}, #{$sm} {\n border-left: 0;\n }\n }\n\n .row-cols-1 > .col .sec-5-home-15__phase {\n @media #{$xs} {\n border-left: 0;\n border-top: 1px solid var(--at-neutral-800);\n }\n }\n\n .row-cols-1 > .col:first-child .sec-5-home-15__phase {\n @media #{$xs} {\n border-top: 0;\n }\n }\n\n /* Phase dot — default = white circle; on phase hover or via --active modifier\n it morphs into an orange square (process \"active\" indicator). */\n &__phase-dot {\n width: 12px;\n height: 12px;\n background-color: var(--at-common-white);\n border-radius: 50%;\n margin-bottom: 32px;\n flex-shrink: 0;\n transition:\n background-color 0.4s ease,\n border-radius 0.4s ease,\n transform 0.4s ease;\n\n &--active {\n border-radius: 0;\n background-color: var(--at-theme-primary);\n }\n }\n\n &__phase:hover &__phase-dot {\n background-color: var(--at-theme-primary);\n border-radius: 0;\n transform: scale(1.1);\n }\n\n &__phase-num {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 64px;\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-common-white);\n margin-bottom: 20px;\n\n @media #{$xl} {\n font-size: 56px;\n }\n\n @media #{$lg}, #{$md} {\n font-size: 52px;\n }\n }\n\n &__phase-title {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 22px;\n line-height: 1.2;\n letter-spacing: -0.013em;\n color: var(--at-common-white);\n margin-bottom: 12px;\n\n @media #{$xs} {\n font-size: 20px;\n }\n }\n\n &__phase-desc {\n font-family: var(--at-ff-body);\n font-weight: 400;\n font-size: 13px;\n line-height: 1.6;\n color: var(--at-common-white);\n margin-bottom: 24px;\n max-width: 280px;\n }\n\n &__phase-duration {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 11px;\n line-height: 1;\n letter-spacing: 1.6px;\n text-transform: uppercase;\n color: var(--at-theme-primary);\n margin-bottom: 20px;\n }\n\n /* Hidden by default; revealed on phase card hover with a soft slide-up + fade. */\n &__phase-thumb {\n position: relative;\n width: 100%;\n max-width: 280px;\n aspect-ratio: 280 / 84;\n overflow: hidden;\n border-radius: 8px;\n background-color: var(--at-neutral-100);\n margin-top: auto;\n opacity: 0;\n transform: translateY(10px);\n transition:\n opacity 0.45s ease,\n transform 0.45s ease;\n }\n\n &__phase:hover &__phase-thumb {\n opacity: 1;\n transform: translateY(0);\n }\n\n &__phase-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.05);\n transition: transform 0.6s ease;\n }\n\n &__phase:hover &__phase-img {\n transform: scale(1);\n }\n}\n","@use '../../utils' as *;\n\n/*----------------------------------------*/\n/* sec-6-home-15 (Home 15 — Meet our team + throwable logos)\n/*----------------------------------------*/\n\n.sec-6-home-15 {\n position: relative;\n padding-top: clamp(48px, 6vw, 100px);\n padding-bottom: clamp(56px, 8vw, 140px);\n background: var(--at-neutral-0, #fefefe);\n overflow: hidden;\n\n &__container {\n max-width: 2200px;\n margin: 0 auto;\n padding-left: clamp(20px, 5.2vw, 100px);\n padding-right: clamp(20px, 5.2vw, 100px);\n }\n\n &__layout {\n display: flex;\n flex-direction: column;\n gap: clamp(28px, 4vw, 40px);\n\n @media (min-width: 1200px) {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(220px, min(28vw, 407px)) minmax(0, 1fr);\n grid-template-rows: auto auto auto;\n gap: clamp(6px, 0.8vw, 10px);\n align-items: start;\n }\n }\n\n &__title-block {\n text-align: center;\n\n @media (min-width: 1200px) {\n grid-column: 2;\n grid-row: 1 / span 2;\n align-self: center;\n justify-self: center;\n z-index: 2;\n max-width: min(765px, 100%);\n padding: clamp(16px, 3vw, 48px) 0;\n pointer-events: none;\n\n .sec-6-home-15__eyebrow,\n .sec-6-home-15__title {\n pointer-events: auto;\n }\n }\n }\n\n &__eyebrow {\n img {\n width: 14px;\n height: 13px;\n }\n }\n\n &__eyebrow-text {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900, #1d1d1d);\n }\n\n &__title {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(40px, 6vw, 84px);\n line-height: 0.95;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950, #0f0f0f);\n text-wrap: balance;\n }\n\n &__member {\n min-width: 0;\n backface-visibility: hidden;\n transform-style: preserve-3d;\n\n @media (min-width: 1200px) {\n max-width: 407px;\n\n &--1 {\n grid-column: 1;\n grid-row: 1;\n justify-self: start;\n }\n\n &--2 {\n grid-column: 3;\n grid-row: 1;\n justify-self: end;\n margin-top: 0;\n }\n\n &--3 {\n grid-column: 1;\n grid-row: 2;\n justify-self: start;\n margin-top: 0;\n }\n\n &--4 {\n grid-column: 3;\n grid-row: 2;\n justify-self: end;\n margin-top: clamp(4px, 1vw, 14px);\n }\n }\n }\n\n &__member-link {\n display: block;\n color: inherit;\n text-decoration: none;\n transition: opacity 0.3s ease;\n\n &:hover {\n opacity: 0.92;\n }\n }\n\n &__member-frame {\n position: relative;\n border-radius: 16px;\n overflow: hidden;\n background: var(--at-neutral-100, #dfdfdf);\n aspect-ratio: 407 / 550;\n }\n\n &__member-img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center top;\n }\n\n &__member-overlay {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n min-height: 34.5%;\n padding: clamp(28px, 3vw, 40px) clamp(24px, 3.5vw, 46px);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n background: linear-gradient(180deg, rgba(26, 26, 26, 0) 11.9%, rgba(26, 26, 26, 0.92) 100%);\n backdrop-filter: blur(3px);\n pointer-events: none;\n }\n\n &__member-name {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(26px, 2.2vw, 32px);\n line-height: 1.1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-0, #fefefe);\n }\n\n &__member-role {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: clamp(18px, 1.4vw, 22px);\n line-height: 1.2;\n letter-spacing: -0.02em;\n color: var(--at-neutral-0, #fefefe);\n opacity: 0.8;\n }\n\n &__member-fab {\n position: absolute;\n top: clamp(20px, 2vw, 26px);\n right: clamp(20px, 2vw, 26px);\n z-index: 2;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n\n &--light {\n background: var(--at-neutral-0, #fefefe);\n color: var(--at-neutral-900, #1d1d1d);\n }\n\n &--dark {\n background: var(--at-neutral-900, #1d1d1d);\n color: var(--at-neutral-0, #fefefe);\n }\n }\n\n &__foot {\n @media (min-width: 1200px) {\n grid-column: 2 / -1;\n grid-row: 3;\n justify-self: end;\n max-width: min(775px, 100%);\n text-align: left;\n }\n }\n\n &__foot-text {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(22px, 2.2vw, 36px);\n line-height: 1.2;\n letter-spacing: -0.05em;\n text-transform: capitalize;\n color: var(--at-neutral-700, #303030);\n }\n\n &__cta {\n height: 50px;\n padding: 14px 27px;\n border-radius: 50px;\n background: var(--at-neutral-900, #1d1d1d);\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-0, #fefefe) !important;\n text-decoration: none !important;\n white-space: nowrap;\n transition: background 0.25s ease, color 0.25s ease;\n\n &:hover {\n background: var(--at-theme-primary);\n color: var(--at-neutral-0) !important;\n }\n }\n\n &__cta-arrow {\n flex-shrink: 0;\n color: currentColor;\n }\n\n /* --- Throwable logos scene (scoped layout; physics from throwable.js) --- */\n &__throw {\n margin-top: 0;\n position: absolute;\n bottom: 0;\n height: 600px;\n z-index: 1;\n width: 100%;\n\n .client-capsule-wrapper {\n margin-top: 0;\n height: 380px;\n\n @media (min-width: 768px) {\n height: 460px;\n }\n\n @media (min-width: 992px) {\n height: 520px;\n }\n\n @media (min-width: 1400px) {\n height: 580px;\n }\n }\n\n .client-box--brand-h15 {\n background-color: var(--at-theme-primary);\n }\n }\n}","@use '../../utils' as *;\n\n/*----------------------------------------*/\n/* sec-7-home-15 (Home 15 — What we do)\n/*----------------------------------------*/\n\n.sec-7-home-15 {\n position: relative;\n background: var(--at-neutral-50, #f2f2f2);\n padding-top: 120px;\n padding-bottom: 140px;\n\n @media #{$xl} {\n padding-top: 100px;\n padding-bottom: 110px;\n }\n\n @media #{$lg}, #{$md} {\n padding-top: 80px;\n padding-bottom: 90px;\n }\n\n @media #{$sm}, #{$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n\n /* ---- Header ---- */\n &__head {\n max-width: 1430px;\n margin-bottom: 60px;\n\n @media #{$lg}, #{$md} {\n margin-bottom: 48px;\n }\n\n @media #{$sm}, #{$xs} {\n margin-bottom: 36px;\n }\n }\n\n &__eyebrow {\n color: var(--at-neutral-900, #1d1d1d);\n margin-bottom: 16px;\n\n svg {\n flex-shrink: 0;\n }\n }\n\n &__eyebrow-text {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n }\n\n &__heading {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(32px, 4.6vw, 64px);\n line-height: 1.125;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900, #1d1d1d);\n }\n\n &__heading-muted {\n color: var(--at-neutral-300, #b7b7b7);\n }\n\n /* ---- Body ---- */\n &__body {\n align-items: flex-start;\n }\n\n /* ---- Left: image + caption ---- */\n &__media {\n margin-bottom: 28px;\n }\n\n &__media-frame {\n position: relative;\n border-radius: 16px;\n overflow: hidden;\n aspect-ratio: 551 / 345;\n }\n\n &__media-img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n\n &__caption {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: clamp(18px, 1.4vw, 22px);\n line-height: 1.45;\n letter-spacing: -0.02em;\n color: var(--at-neutral-950, #0f0f0f);\n max-width: 551px;\n }\n\n /* ---- Right: services list ---- */\n &__services {\n border-top: 1px solid var(--at-neutral-200, #cdcccc);\n border-bottom: 1px solid var(--at-neutral-200, #cdcccc);\n }\n\n &__service {\n & + & {\n border-top: 1px solid var(--at-neutral-200, #cdcccc);\n }\n }\n\n &__service-link {\n display: flex;\n align-items: center;\n gap: 32px;\n padding: 28px 8px;\n color: inherit;\n text-decoration: none;\n transition: padding-left 0.35s ease;\n\n &:hover {\n padding-left: 16px;\n\n .sec-7-home-15__service-title {\n font-size: clamp(26px, 2.5vw, 36px);\n }\n\n .sec-7-home-15__service-fab {\n width: 56px;\n height: 56px;\n background: var(--at-theme-primary, #f0460e);\n border-color: var(--at-theme-primary, #f0460e);\n color: var(--at-neutral-0, #fefefe);\n\n svg {\n width: 16px;\n height: 15px;\n stroke-width: 1.5;\n }\n }\n }\n\n @media #{$sm}, #{$xs} {\n gap: 16px;\n padding: 22px 4px;\n\n &:hover {\n padding-left: 8px;\n }\n }\n }\n\n &__service-index {\n flex-shrink: 0;\n width: 100px;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(22px, 2.2vw, 32px);\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950, #0f0f0f);\n\n @media #{$sm}, #{$xs} {\n width: 64px;\n }\n }\n\n &__service-title {\n flex: 1 1 auto;\n min-width: 0;\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(22px, 2vw, 28px);\n line-height: 1;\n letter-spacing: -0.03em;\n color: var(--at-neutral-950, #0f0f0f);\n transition: font-size 0.3s ease;\n }\n\n &__service-fab {\n flex-shrink: 0;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: 1px solid var(--at-neutral-200, #cdcccc);\n background: transparent;\n color: var(--at-neutral-950, #0f0f0f);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;\n\n svg {\n transition: width 0.3s ease, height 0.3s ease, stroke-width 0.3s ease;\n }\n }\n\n /* ---- CTA block ---- */\n &__cta-block {\n max-width: 590px;\n margin-top: 64px;\n\n @media #{$lg}, #{$md} {\n margin-top: 48px;\n }\n\n @media #{$sm}, #{$xs} {\n margin-top: 36px;\n }\n }\n\n &__cta-mark {\n display: inline-flex;\n width: 40px;\n height: 40px;\n margin-bottom: 24px;\n }\n\n &__cta-copy {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: clamp(16px, 1.3vw, 20px);\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-900, #1d1d1d);\n margin-bottom: 28px;\n }\n\n &__cta-actions {\n gap: 0;\n }\n}\n","@use '../../utils' as *;\n\n/*----------------------------------------*/\n/* sec-8-home-15 (Home 15 — Testimonials)\n/*----------------------------------------*/\n\n.sec-8-home-15 {\n position: relative;\n padding-top: 100px;\n padding-bottom: 110px;\n border-bottom: 1px solid var(--at-neutral-200, #cdcccc);\n text-align: center;\n\n @media #{$xl} {\n padding-top: 88px;\n padding-bottom: 96px;\n }\n\n @media #{$lg}, #{$md} {\n padding-top: 72px;\n padding-bottom: 80px;\n }\n\n @media #{$sm}, #{$xs} {\n padding-top: 56px;\n padding-bottom: 64px;\n }\n\n /* ---- Eyebrow ---- */\n &__eyebrow {\n color: var(--at-neutral-900, #1d1d1d);\n margin-bottom: 56px;\n\n svg {\n flex-shrink: 0;\n }\n\n @media #{$lg}, #{$md} {\n margin-bottom: 44px;\n }\n\n @media #{$sm}, #{$xs} {\n margin-bottom: 32px;\n }\n }\n\n &__eyebrow-text {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n }\n\n /* ---- Main slider ---- */\n &__slider {\n max-width: 1330px;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 64px;\n\n @media #{$lg}, #{$md} {\n margin-bottom: 48px;\n }\n\n @media #{$sm}, #{$xs} {\n margin-bottom: 36px;\n }\n }\n\n &__slide {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &__quote {\n font-family: var(--at-ff-heading);\n font-weight: 600;\n font-size: clamp(22px, 3.4vw, 48px);\n line-height: 1.085;\n letter-spacing: -0.05em;\n color: var(--at-neutral-950, #0f0f0f);\n max-width: 1330px;\n }\n\n /* ---- Thumbs slider ---- */\n &__thumbs {\n max-width: 814px;\n margin-left: auto;\n margin-right: auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n }\n\n &__thumb {\n flex-shrink: 0;\n height: auto;\n aspect-ratio: 1 / 1;\n padding: 0;\n background: transparent;\n border: 5px solid var(--at-neutral-50, #f2f2f2);\n cursor: pointer;\n overflow: hidden;\n transition: border-color 0.3s ease;\n\n &:hover {\n border-color: var(--at-neutral-200, #cdcccc);\n }\n\n &.swiper-slide-thumb-active {\n border-color: var(--at-theme-primary, #f0460e);\n }\n\n @media #{$md} {\n border-width: 4px;\n }\n\n @media #{$sm} {\n border-width: 4px;\n }\n\n @media #{$xs} {\n border-width: 3px;\n }\n }\n\n &__thumb-img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n}\n","@use '../../utils' as *;\n\n/* ===========================================================\n Section 9 — Home 15 (Inside / Article & blogs)\n =========================================================== */\n\n.sec-9-home-15 {\n padding-top: 140px;\n padding-bottom: 140px;\n background-color: var(--at-neutral-0);\n\n @media #{$xxl}, #{$xl} {\n padding-top: 110px;\n padding-bottom: 110px;\n }\n\n @media #{$lg}, #{$md} {\n padding-top: 80px;\n padding-bottom: 80px;\n }\n\n @media #{$sm}, #{$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n }\n\n &__inner {\n max-width: 1920px;\n margin: 0 auto;\n padding-left: 100px;\n padding-right: 100px;\n\n @media #{$x4l}, #{$x3l}, #{$xxl} {\n padding-left: 60px;\n padding-right: 60px;\n }\n\n @media #{$xl} {\n padding-left: 40px;\n padding-right: 40px;\n }\n\n @media #{$lg}, #{$md} {\n padding-left: 30px;\n padding-right: 30px;\n }\n\n @media #{$sm} {\n padding-left: 20px;\n padding-right: 20px;\n }\n\n @media #{$xs} {\n padding-left: 16px;\n padding-right: 16px;\n }\n }\n\n /* ---- Header row ---- */\n &__head {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 32px;\n padding-bottom: 42px;\n border-bottom: 1px solid var(--at-neutral-100);\n margin-bottom: 42px;\n\n @media #{$md} {\n padding-bottom: 32px;\n margin-bottom: 32px;\n }\n\n @media #{$sm}, #{$xs} {\n flex-direction: column;\n align-items: flex-start;\n gap: 24px;\n padding-bottom: 28px;\n margin-bottom: 28px;\n }\n }\n\n &__head-left {\n display: flex;\n flex-direction: column;\n gap: 16px;\n min-width: 0;\n }\n\n &__eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n line-height: 1;\n letter-spacing: -0.05em;\n text-transform: uppercase;\n color: var(--at-neutral-900);\n\n @media #{$sm}, #{$xs} {\n font-size: 13px;\n }\n }\n\n &__eyebrow-label {\n white-space: nowrap;\n }\n\n &__eyebrow-icon {\n flex-shrink: 0;\n display: inline-block;\n }\n\n &__title {\n font-family: var(--at-ff-heading);\n font-weight: 500;\n font-size: 124px;\n line-height: 1;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n\n @media #{$x4l}, #{$x3l} {\n font-size: 110px;\n }\n\n @media #{$xxl} {\n font-size: 96px;\n }\n\n @media #{$xl} {\n font-size: 84px;\n }\n\n @media #{$lg} {\n font-size: 76px;\n }\n\n @media #{$md} {\n font-size: 64px;\n }\n\n @media #{$sm} {\n font-size: 56px;\n }\n\n @media #{$xs} {\n font-size: 44px;\n }\n }\n\n &__cta {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 14px 27px;\n border-radius: 50px;\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 16px;\n letter-spacing: -0.05em;\n line-height: 1;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;\n\n &:hover,\n &:focus-visible {\n background-color: var(--at-neutral-700, #2a2a2a);\n color: var(--at-neutral-0);\n transform: translateY(-2px);\n }\n\n @media #{$xs} {\n font-size: 14px;\n padding: 12px 22px;\n }\n }\n\n &__cta-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n /* ---- Articles list ---- */\n &__list {\n display: flex;\n flex-direction: column;\n gap: 42px;\n margin-left: 372px;\n\n @media #{$x4l}, #{$x3l} {\n margin-left: 240px;\n }\n\n @media #{$xxl} {\n margin-left: 160px;\n }\n\n @media #{$xl} {\n margin-left: 80px;\n gap: 36px;\n }\n\n @media #{$lg}, #{$md} {\n margin-left: 0;\n gap: 32px;\n }\n\n @media #{$sm}, #{$xs} {\n margin-left: 0;\n gap: 24px;\n }\n }\n\n /* ---- Single article row ---- */\n &__item {\n display: grid;\n grid-template-columns: minmax(0, 1.5fr) 339px minmax(0, 0.9fr);\n align-items: center;\n gap: 64px;\n padding-bottom: 42px;\n border-bottom: 1px solid var(--at-neutral-100);\n\n @media #{$xl} {\n grid-template-columns: minmax(0, 1.4fr) 280px minmax(0, 0.9fr);\n gap: 40px;\n }\n\n @media #{$lg} {\n grid-template-columns: minmax(0, 1.3fr) 240px minmax(0, 1fr);\n gap: 32px;\n }\n\n @media #{$md} {\n grid-template-columns: minmax(0, 1fr) 200px;\n grid-template-areas:\n \"lead thumb\"\n \"meta meta\";\n gap: 24px 28px;\n padding-bottom: 32px;\n }\n\n @media #{$sm}, #{$xs} {\n grid-template-columns: 1fr;\n grid-template-areas:\n \"thumb\"\n \"lead\"\n \"meta\";\n gap: 20px;\n padding-bottom: 24px;\n }\n\n &--last {\n border-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n &__item-lead {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 26px;\n max-width: 557px;\n\n @media #{$md} {\n grid-area: lead;\n gap: 18px;\n }\n\n @media #{$sm}, #{$xs} {\n grid-area: lead;\n gap: 14px;\n max-width: none;\n }\n }\n\n &__tag {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 10px 19px;\n border: 1px solid var(--at-neutral-100);\n border-radius: 32px;\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 12px;\n line-height: 1;\n letter-spacing: -0.02em;\n text-transform: uppercase;\n color: var(--at-neutral-900);\n background-color: transparent;\n }\n\n &__item-title {\n font-family: var(--at-ff-body);\n font-weight: 600;\n font-size: 24px;\n line-height: 1.2;\n letter-spacing: -0.05em;\n color: var(--at-neutral-900);\n margin: 0;\n\n a {\n color: inherit;\n text-decoration: none;\n background-image: linear-gradient(currentColor, currentColor);\n background-size: 0% 1px;\n background-position: 0 100%;\n background-repeat: no-repeat;\n transition: background-size 0.4s ease;\n\n &:hover,\n &:focus-visible {\n color: inherit;\n background-size: 100% 1px;\n }\n }\n\n @media #{$xl} {\n font-size: 22px;\n }\n\n @media #{$lg} {\n font-size: 20px;\n }\n\n @media #{$md}, #{$sm} {\n font-size: 20px;\n }\n\n @media #{$xs} {\n font-size: 18px;\n }\n }\n\n &__item-thumb {\n position: relative;\n display: block;\n overflow: hidden;\n border-radius: 16px;\n aspect-ratio: 339 / 210;\n width: 100%;\n background-color: var(--at-neutral-100);\n\n @media #{$md} {\n grid-area: thumb;\n aspect-ratio: 4 / 3;\n }\n\n @media #{$sm}, #{$xs} {\n grid-area: thumb;\n aspect-ratio: 16 / 10;\n }\n }\n\n &__item-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n }\n\n &__item-meta {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 32px;\n height: 100%;\n min-height: 120px;\n max-width: 312px;\n\n @media #{$md} {\n grid-area: meta;\n gap: 16px;\n max-width: none;\n min-height: 0;\n }\n\n @media #{$sm}, #{$xs} {\n grid-area: meta;\n gap: 14px;\n max-width: none;\n min-height: 0;\n }\n }\n\n &__item-excerpt {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.5;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n\n @media #{$xs} {\n font-size: 15px;\n }\n }\n\n &__item-byline {\n font-family: var(--at-ff-body);\n font-weight: 500;\n font-size: 16px;\n line-height: 1.4;\n letter-spacing: -0.02em;\n color: var(--at-neutral-500);\n\n @media #{$xs} {\n font-size: 15px;\n }\n }\n\n &__item-author {\n color: #f0460e;\n text-decoration: none;\n transition: opacity 0.3s ease;\n\n &:hover,\n &:focus-visible {\n color: #f0460e;\n opacity: 0.8;\n }\n }\n}\n","/* Slideshow — 6 layout variants in one partial.\n Wrapper: .slideshow\n - default (no modifier) → Horizontal Cinema\n - .is-split → Editorial Split + Orbital\n - .is-stack → Typographic Stack + bottom progress bar\n - .is-curtain → Diagonal Curtain Reveal\n - .is-zstack → 3D Z-Stack Reveal\n - .is-vista → Slideshow-faithful vertical scroll + central minimap\n All rules scoped under the wrapper to avoid global pollution.\n*/\n\n.slideshow {\n /* Common shell --------------------------------------------------------- */\n position: fixed;\n inset: 0;\n width: 100%;\n height: 100svh;\n overflow: hidden;\n font-family: inherit;\n\n *,\n *::before,\n *::after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n button {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n font: inherit;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n .project-list {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n /* Cinema — wrapper-level palette (only when no other variant active).\n Uses Orisa's themed CSS vars so colors invert with the dark-mode toggle. */\n &:not(.is-split):not(.is-stack):not(.is-horizontal) {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n }\n\n /* ===================================================================== *\n * CINEMA (default) — horizontal slides + side rail\n * ===================================================================== */\n\n .project {\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100svh;\n display: grid;\n grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);\n gap: 4rem;\n padding: 7rem 8rem 4rem 6rem;\n will-change: transform;\n }\n\n .project-frame {\n position: relative;\n width: 100%;\n height: 100%;\n max-height: calc(100svh - 11rem);\n overflow: hidden;\n }\n\n .project-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.5);\n will-change: transform;\n }\n\n .project-meta {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 2rem;\n }\n\n .project-num {\n display: inline-block;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n padding-bottom: 0.75rem;\n border-bottom: 1px solid rgba(var(--at-common-white-rgb), 0.4);\n }\n\n .project-title {\n font-size: clamp(2.75rem, 7vw, 6.5rem);\n line-height: 0.95;\n font-weight: 600;\n letter-spacing: -0.03em;\n text-transform: uppercase;\n max-width: 12ch;\n }\n\n .project-meta-bottom {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n opacity: 0.7;\n gap: 1rem;\n }\n\n .rail {\n position: absolute;\n top: 50%;\n right: 1.5rem;\n transform: translateY(-50%);\n width: 80px;\n height: 360px;\n overflow: hidden;\n mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);\n -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);\n z-index: 5;\n }\n\n .rail-track {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .rail-item {\n position: absolute;\n top: calc(50% - 30px);\n left: 0;\n width: 100%;\n height: 60px;\n display: flex;\n align-items: center;\n gap: 0.6rem;\n padding: 0 0.5rem;\n will-change: transform;\n opacity: 0.5;\n transition: opacity 0.3s ease;\n }\n\n .rail-item.is-active {\n opacity: 1;\n }\n\n .rail-thumb {\n flex-shrink: 0;\n width: 44px;\n height: 44px;\n overflow: hidden;\n position: relative;\n border: 1px solid rgba(var(--at-common-white-rgb), 0.2);\n transition: border-color 0.3s ease, transform 0.3s ease;\n }\n\n .rail-thumb img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .rail-item.is-active .rail-thumb {\n border-color: var(--at-common-white);\n transform: scale(1.06);\n }\n\n .rail-index {\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n opacity: 0.8;\n }\n\n .rail-item.is-active .rail-index {\n opacity: 1;\n }\n\n /* Cinema responsive */\n @media (max-width: 991px) {\n .project {\n grid-template-columns: 1fr;\n grid-template-rows: minmax(0, 1fr) auto;\n gap: 1.5rem;\n padding: 5rem 5rem 2rem 1.25rem;\n }\n\n .project-frame {\n max-height: 55vh;\n }\n\n .project-title {\n font-size: clamp(2rem, 11vw, 3.5rem);\n }\n\n .rail {\n right: 0.5rem;\n width: 56px;\n height: 280px;\n }\n\n .rail-thumb {\n width: 34px;\n height: 34px;\n }\n }\n\n @media (max-width: 575px) {\n .project {\n padding: 4.5rem 4rem 1.5rem 1rem;\n gap: 1rem;\n }\n\n .project-frame {\n max-height: 50vh;\n }\n\n .project-title {\n font-size: clamp(1.75rem, 12vw, 2.75rem);\n }\n\n .project-num,\n .project-meta-bottom {\n font-size: 0.65rem;\n }\n\n .rail {\n right: 0.25rem;\n width: 48px;\n height: 240px;\n }\n\n .rail-thumb {\n width: 30px;\n height: 30px;\n }\n\n .rail-index {\n font-size: 0.6rem;\n }\n }\n\n /* ===================================================================== *\n * SPLIT — editorial 35/65, orbital nav corner\n * ===================================================================== */\n &.is-split {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n\n .split-project {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100svh;\n display: grid;\n grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);\n gap: 4rem;\n padding: 6rem 6rem 4rem;\n will-change: transform;\n }\n\n .split-frame {\n position: relative;\n width: 100%;\n height: 100%;\n max-height: calc(100svh - 10rem);\n overflow: hidden;\n }\n\n .split-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.5);\n will-change: transform;\n }\n\n .split-meta {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 1.5rem;\n max-width: 640px;\n padding-right: 7rem;\n }\n\n .split-num {\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n opacity: 0.6;\n }\n\n .split-title {\n font-size: clamp(2.5rem, 6vw, 5.5rem);\n line-height: 0.95;\n font-weight: 600;\n letter-spacing: -0.03em;\n text-transform: uppercase;\n }\n\n .split-info {\n display: flex;\n gap: 2rem;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n opacity: 0.7;\n padding-top: 0.75rem;\n border-top: 1px solid rgba(var(--at-common-black-rgb), 0.2);\n }\n\n .split-desc {\n font-size: 1rem;\n line-height: 1.55;\n max-width: 520px;\n color: rgba(var(--at-common-black-rgb), 0.75);\n }\n\n /* Orbital corner navigator */\n .orbital {\n position: absolute;\n top: 6rem;\n right: 2.5rem;\n width: 140px;\n height: 140px;\n z-index: 5;\n }\n\n .orbital-ring {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 110px;\n height: 110px;\n border: 1px solid rgba(var(--at-common-black-rgb), 0.3);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n }\n\n .orbital-dot {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: rgba(var(--at-common-black-rgb), 0.4);\n transition: background-color 0.3s ease, transform 0.3s ease;\n }\n\n .orbital-dot.is-active {\n background-color: var(--at-neutral-950);\n }\n\n .orbital-indicator {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 55px;\n height: 1px;\n background-color: var(--at-neutral-950);\n transform-origin: 0 50%;\n transform: translateY(-50%) rotate(-90deg);\n pointer-events: none;\n }\n\n .orbital-indicator::after {\n content: \"\";\n position: absolute;\n right: -4px;\n top: 50%;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--at-neutral-950);\n transform: translateY(-50%);\n }\n\n .orbital-label {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n gap: 0.25rem;\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n pointer-events: none;\n }\n\n .orbital-current {\n color: var(--at-neutral-950);\n }\n\n .orbital-total {\n opacity: 0.45;\n }\n\n @media (max-width: 991px) {\n .split-project {\n grid-template-columns: 1fr;\n grid-template-rows: 40vh auto;\n gap: 1.5rem;\n padding: 5rem 1.5rem 2rem;\n }\n\n .split-meta {\n padding-right: 0;\n }\n\n .split-title {\n font-size: clamp(2rem, 9vw, 3.25rem);\n }\n\n .orbital {\n top: 4.5rem;\n right: 1rem;\n width: 100px;\n height: 100px;\n }\n\n .orbital-ring {\n width: 78px;\n height: 78px;\n }\n\n .orbital-indicator {\n width: 39px;\n }\n }\n\n @media (max-width: 575px) {\n .split-project {\n padding: 4rem 1rem 1.5rem;\n }\n\n .split-title {\n font-size: clamp(1.75rem, 10vw, 2.75rem);\n }\n\n .split-desc {\n font-size: 0.9rem;\n }\n\n .orbital {\n top: 4rem;\n right: 0.5rem;\n width: 80px;\n height: 80px;\n }\n\n .orbital-ring {\n width: 62px;\n height: 62px;\n }\n\n .orbital-indicator {\n width: 31px;\n }\n\n .orbital-dot {\n width: 8px;\n height: 8px;\n }\n\n .orbital-label {\n font-size: 0.6rem;\n }\n }\n }\n\n /* ===================================================================== *\n * STACK — typographic backdrop, image accent, bottom progress bar\n * ===================================================================== */\n &.is-stack {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n\n .stack-project {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100svh;\n will-change: transform;\n overflow: hidden;\n }\n\n .stack-num-bg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: clamp(20rem, 75vh, 75vh);\n line-height: 0.85;\n font-weight: 800;\n color: transparent;\n -webkit-text-stroke: 2px rgba(var(--at-common-black-rgb), 0.18);\n letter-spacing: -0.05em;\n pointer-events: none;\n user-select: none;\n white-space: nowrap;\n }\n\n .stack-frame {\n position: absolute;\n top: 50%;\n right: 12vw;\n transform: translateY(-50%);\n width: 36vw;\n height: 60vh;\n max-width: 480px;\n max-height: 600px;\n overflow: hidden;\n }\n\n .stack-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.5);\n will-change: transform;\n }\n\n .stack-overlay {\n position: absolute;\n left: 8vw;\n bottom: 14vh;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n max-width: 50vw;\n z-index: 2;\n }\n\n .stack-title {\n font-size: clamp(2.25rem, 5.5vw, 4.5rem);\n line-height: 0.95;\n font-weight: 600;\n letter-spacing: -0.03em;\n text-transform: uppercase;\n }\n\n .stack-info {\n display: flex;\n gap: 1.5rem;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n opacity: 0.7;\n }\n\n /* Bottom progress bar */\n .stack-progress {\n position: absolute;\n bottom: 4rem;\n left: 50%;\n transform: translateX(-50%);\n width: 320px;\n height: 1px;\n background-color: rgba(var(--at-common-black-rgb), 0.2);\n z-index: 5;\n }\n\n .stack-progress-fill {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n background-color: var(--at-neutral-950);\n }\n\n .stack-progress-dot {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: rgba(var(--at-common-black-rgb), 0.35);\n transition: background-color 0.3s ease, transform 0.3s ease;\n }\n\n .stack-progress-dot.is-active {\n background-color: var(--at-neutral-950);\n transform: translate(-50%, -50%) scale(1.5);\n }\n\n .stack-progress-dot::before {\n content: attr(data-num);\n position: absolute;\n top: -1.6rem;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.65rem;\n font-weight: 600;\n letter-spacing: 0.15em;\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n }\n\n .stack-progress-dot.is-active::before,\n .stack-progress-dot:hover::before {\n opacity: 0.8;\n }\n\n @media (max-width: 991px) {\n .stack-num-bg {\n font-size: clamp(14rem, 55vh, 55vh);\n }\n\n .stack-frame {\n right: 6vw;\n width: 50vw;\n height: 50vh;\n }\n\n .stack-overlay {\n left: 6vw;\n bottom: 16vh;\n max-width: 75vw;\n }\n\n .stack-title {\n font-size: clamp(1.75rem, 8vw, 3rem);\n }\n\n .stack-progress {\n width: 240px;\n bottom: 3rem;\n }\n }\n\n @media (max-width: 575px) {\n .stack-num-bg {\n font-size: clamp(10rem, 40vh, 40vh);\n -webkit-text-stroke-width: 1.5px;\n }\n\n .stack-frame {\n right: 50%;\n top: 35vh;\n transform: translate(50%, -50%);\n width: 70vw;\n height: 38vh;\n }\n\n .stack-overlay {\n left: 1.25rem;\n bottom: 8vh;\n max-width: calc(100vw - 2.5rem);\n }\n\n .stack-title {\n font-size: clamp(1.5rem, 9vw, 2.25rem);\n }\n\n .stack-progress {\n width: 180px;\n bottom: 2.5rem;\n }\n\n .stack-progress-dot {\n width: 6px;\n height: 6px;\n }\n }\n }\n\n /* ===================================================================== *\n * CURTAIN — diagonal clip-path wipe, no slide translate\n * ===================================================================== */\n &.is-curtain {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n\n .curtain-stage {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .curtain-slot {\n position: absolute;\n inset: 0;\n will-change: clip-path;\n overflow: hidden;\n }\n\n .curtain-img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .curtain-overlay {\n position: absolute;\n left: 8vw;\n bottom: 12vh;\n max-width: 50vw;\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n z-index: 2;\n }\n\n .curtain-num {\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n opacity: 0.85;\n color: #fff;\n }\n\n .curtain-title {\n font-size: clamp(2.5rem, 7vw, 6rem);\n line-height: 0.95;\n font-weight: 700;\n letter-spacing: -0.03em;\n text-transform: uppercase;\n max-width: 14ch;\n color: #fff;\n }\n\n .curtain-meta {\n display: flex;\n gap: 2rem;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n opacity: 0.85;\n color: #fff;\n }\n\n /* Diagonal slits — left edge */\n .curtain-nav {\n position: absolute;\n left: 2.5rem;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n z-index: 5;\n color: #fff;\n }\n\n .curtain-slit {\n display: block;\n width: 30px;\n height: 3px;\n background-color: rgba(var(--at-common-black-rgb), 0.4);\n transform: skewX(-30deg);\n transition: width 0.3s ease, background-color 0.3s ease;\n padding: 0;\n }\n\n .curtain-slit.is-active {\n width: 60px;\n background-color: #fff;\n }\n\n @media (max-width: 991px) {\n .curtain-overlay {\n left: 1.5rem;\n bottom: 6vh;\n max-width: 80vw;\n }\n\n .curtain-title {\n font-size: clamp(1.75rem, 9vw, 3.25rem);\n }\n\n .curtain-nav {\n left: 1rem;\n gap: 0.5rem;\n }\n\n .curtain-slit {\n width: 24px;\n }\n\n .curtain-slit.is-active {\n width: 48px;\n }\n }\n\n @media (max-width: 575px) {\n .curtain-overlay {\n left: 1rem;\n bottom: 4vh;\n gap: 0.75rem;\n }\n\n .curtain-title {\n font-size: clamp(1.5rem, 11vw, 2.5rem);\n }\n\n .curtain-meta {\n gap: 1rem;\n font-size: 0.65rem;\n }\n }\n }\n\n /* ===================================================================== *\n * Z-STACK — 3D perspective stack reveal\n * ===================================================================== */\n &.is-zstack {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n\n .project-list {\n perspective: 1500px;\n perspective-origin: center;\n transform-style: preserve-3d;\n }\n\n .zstack-project {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n backface-visibility: hidden;\n will-change: transform, opacity;\n }\n\n .zstack-card {\n width: 70vw;\n max-width: 1100px;\n height: 75vh;\n max-height: 720px;\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n }\n\n .zstack-frame {\n position: relative;\n width: 100%;\n flex: 1;\n overflow: hidden;\n }\n\n .zstack-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .zstack-caption {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .zstack-caption-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n opacity: 0.7;\n }\n\n .zstack-title {\n font-size: clamp(1.5rem, 3vw, 2.5rem);\n font-weight: 600;\n line-height: 1;\n letter-spacing: -0.02em;\n text-transform: uppercase;\n }\n\n /* Right-side index navigator */\n .zstack-index {\n position: absolute;\n right: 3rem;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n flex-direction: column;\n gap: 0.6rem;\n z-index: 10;\n }\n\n .zstack-index-btn {\n font-size: 0.85rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n color: rgba(var(--at-common-black-rgb), 0.35);\n transition: color 0.3s ease, transform 0.3s ease, font-size 0.3s ease;\n text-align: right;\n padding: 0.25rem 0;\n }\n\n .zstack-index-btn.is-active {\n color: var(--at-neutral-950);\n font-size: 1.05rem;\n font-weight: 700;\n transform: scale(1.1);\n }\n\n @media (max-width: 991px) {\n .zstack-card {\n width: 80vw;\n height: 70vh;\n }\n\n .zstack-index {\n right: 1rem;\n }\n }\n\n @media (max-width: 575px) {\n .zstack-card {\n width: 88vw;\n height: 65vh;\n gap: 0.75rem;\n }\n\n .zstack-title {\n font-size: clamp(1.25rem, 5vw, 1.75rem);\n }\n\n .zstack-index {\n right: 0.5rem;\n gap: 0.4rem;\n }\n\n .zstack-index-btn {\n font-size: 0.7rem;\n }\n\n .zstack-index-btn.is-active {\n font-size: 0.85rem;\n }\n }\n }\n\n /* ===================================================================== *\n * VISTA — Slideshow-faithful vertical infinite parallax + central minimap\n * ===================================================================== */\n &.is-vista {\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n\n .vista-project {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100svh;\n display: block;\n padding: 0;\n will-change: transform;\n overflow: hidden;\n }\n\n .vista-project img {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.5);\n will-change: transform;\n }\n\n /* Central minimap card */\n .minimap {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 75%;\n max-width: 720px;\n height: calc(250px + 3rem);\n background-color: var(--at-common-white);\n color: var(--at-common-black);\n padding: 1.5rem;\n overflow: hidden;\n z-index: 5;\n }\n\n .minimap-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .minimap-img-preview {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 35%;\n height: 100%;\n overflow: hidden;\n }\n\n .minimap-img-item {\n position: absolute;\n width: 100%;\n height: 100%;\n will-change: transform;\n overflow: hidden;\n }\n\n .minimap-img-item img {\n position: relative;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(1.5);\n will-change: transform;\n }\n\n .minimap-info-list {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n\n .minimap-item-info {\n position: absolute;\n width: 100%;\n height: 250px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n will-change: transform;\n }\n\n .minimap-item-info-row {\n width: 100%;\n display: flex;\n justify-content: space-between;\n padding: 0.5rem;\n }\n\n .minimap-item-info p {\n margin: 0;\n text-transform: uppercase;\n font-size: 0.85rem;\n font-weight: 600;\n letter-spacing: -0.0125rem;\n }\n\n /* Bottom-center pagination dots */\n .vista-nav {\n position: absolute;\n bottom: 2.5rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 0.75rem;\n z-index: 6;\n }\n\n .vista-nav-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n border: 1px solid #ffffff;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n transition: background-color 0.3s ease, transform 0.3s ease;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n }\n\n .vista-nav-dot.is-active {\n background-color: #ffffff;\n transform: scale(1.35);\n }\n\n /* Side buttons — Next (left) / Preview (right) */\n .vista-next,\n .vista-prev {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 1.25rem;\n background: transparent;\n border: none;\n padding: 1rem;\n color: #ffffff;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n cursor: pointer;\n z-index: 6;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);\n transition: gap 0.3s ease, opacity 0.3s ease;\n }\n\n .vista-next {\n left: 2.5rem;\n }\n\n .vista-prev {\n right: 2.5rem;\n }\n\n .vista-next:hover,\n .vista-prev:hover {\n gap: 1.6rem;\n }\n\n .vista-arrow {\n display: block;\n width: 80px;\n height: 10px;\n filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));\n flex-shrink: 0;\n }\n\n @media (max-width: 991px) {\n .minimap {\n width: 90%;\n }\n\n .minimap-img-preview {\n left: unset;\n right: 0;\n transform: translate(0, -50%);\n }\n\n .minimap-item-info-row {\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .vista-next {\n left: 1rem;\n }\n\n .vista-prev {\n right: 1rem;\n }\n\n .vista-next,\n .vista-prev {\n gap: 0.6rem;\n padding: 0.5rem;\n font-size: 0.65rem;\n }\n\n .vista-arrow {\n width: 40px;\n }\n }\n\n @media (max-width: 575px) {\n .minimap {\n width: 92%;\n padding: 1rem;\n }\n\n .minimap-item-info p {\n font-size: 0.7rem;\n }\n\n .vista-next,\n .vista-prev {\n display: none;\n }\n }\n }\n\n /* ===================================================================== *\n * HORIZONTAL — infinite ribbon of pre-scaled images, parallax follows\n * each slide's distance from viewport center. Slides are JS-generated;\n * .horizon-track is the single transformed element.\n * ===================================================================== */\n &.is-horizontal {\n user-select: none;\n cursor: grab;\n\n &:active {\n cursor: grabbing;\n }\n\n .horizon-track {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n display: flex;\n will-change: transform;\n }\n\n .horizon-slide {\n flex-shrink: 0;\n width: 350px;\n height: 500px;\n margin: 0 20px;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n flex-direction: column;\n cursor: pointer;\n overflow: visible;\n }\n\n .horizon-slide.is-mobile {\n width: 175px;\n height: 250px;\n }\n\n .horizon-frame {\n width: 100%;\n height: 100%;\n flex: 1;\n overflow: hidden;\n }\n\n .horizon-frame img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transform: scale(2.25);\n will-change: transform;\n user-select: none;\n pointer-events: none;\n }\n\n .horizon-overlay {\n position: absolute;\n left: 0;\n right: 0;\n bottom: -1.75rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n opacity: 1;\n pointer-events: none;\n z-index: 10;\n }\n\n .horizon-title {\n margin: 0;\n font-size: 0.8rem;\n font-weight: 500;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n }\n\n .horizon-arrow {\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n display: inline-flex;\n }\n\n .horizon-arrow svg {\n width: 100%;\n height: 100%;\n }\n\n /* Prev / Next circular buttons — vertically centered on the sides */\n .horizon-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 56px;\n height: 56px;\n border-radius: 50%;\n border: 1px solid rgba(var(--at-common-white-rgb), 0.35);\n background-color: rgba(var(--at-common-black-rgb), 0.25);\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n cursor: pointer;\n z-index: 6;\n transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;\n }\n\n .horizon-nav:hover {\n background-color: rgba(var(--at-common-white-rgb), 0.95);\n border-color: rgba(var(--at-common-white-rgb), 0.95);\n color: var(--at-neutral-950);\n }\n\n .horizon-nav:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 3px;\n }\n\n .horizon-nav svg {\n width: 22px;\n height: 22px;\n display: block;\n }\n\n .horizon-nav-prev {\n left: 2.5rem;\n }\n\n .horizon-nav-next {\n right: 2.5rem;\n }\n\n /* Pagination — bottom-center row of dots, one per source project */\n .horizon-pagination {\n position: absolute;\n left: 50%;\n bottom: 2rem;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.5rem 1rem;\n z-index: 6;\n }\n\n .horizon-pagination-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n border: 1px solid rgba(var(--at-common-white-rgb), 0.7);\n background-color: transparent;\n padding: 0;\n cursor: pointer;\n transition: background-color 0.3s ease, transform 0.3s ease, width 0.3s ease;\n }\n\n .horizon-pagination-dot:hover {\n background-color: rgba(var(--at-common-white-rgb), 0.5);\n }\n\n .horizon-pagination-dot.is-active {\n background-color: var(--at-common-white);\n border-color: var(--at-common-white);\n width: 28px;\n border-radius: 999px;\n }\n\n .horizon-pagination-dot:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 3px;\n }\n\n @media (max-width: 991px) {\n .horizon-slide {\n width: 175px;\n height: 250px;\n margin: 0 15px;\n }\n\n .horizon-overlay {\n bottom: -1.5rem;\n }\n\n .horizon-title {\n font-size: 0.7rem;\n }\n\n .horizon-nav {\n width: 44px;\n height: 44px;\n }\n\n .horizon-nav svg {\n width: 18px;\n height: 18px;\n }\n\n .horizon-nav-prev {\n left: 1rem;\n }\n\n .horizon-nav-next {\n right: 1rem;\n }\n\n .horizon-pagination {\n bottom: 1.5rem;\n gap: 0.5rem;\n }\n }\n\n @media (max-width: 575px) {\n .horizon-slide {\n width: 160px;\n height: 230px;\n margin: 0 12px;\n }\n\n .horizon-overlay {\n bottom: -1.25rem;\n }\n\n .horizon-title {\n font-size: 0.65rem;\n }\n\n .horizon-arrow {\n width: 14px;\n height: 14px;\n }\n\n .horizon-nav {\n width: 38px;\n height: 38px;\n }\n\n .horizon-nav svg {\n width: 16px;\n height: 16px;\n }\n\n .horizon-nav-prev {\n left: 0.5rem;\n }\n\n .horizon-nav-next {\n right: 0.5rem;\n }\n\n .horizon-pagination {\n bottom: 1rem;\n gap: 0.4rem;\n padding: 0.25rem 0.5rem;\n }\n\n .horizon-pagination-dot {\n width: 8px;\n height: 8px;\n }\n\n .horizon-pagination-dot.is-active {\n width: 22px;\n }\n }\n }\n}","/* Portfolio - Horizontal Scroll Gallery\n ---------------------------------------------------------------\n Two scoped wrappers:\n .hsg-intro - normal-flow lead-in section above the gallery\n .hsg-stage - the pinned section driven by GSAP ScrollTrigger\n (see assets/js/horizontal-scroll-gallery.js)\n\n Everything is namespaced under .hsg- to avoid clashing with the\n other slideshow variants in _slideshow.scss.\n*/\n\n/* =====================================================================\n INTRO - lead-in section before the pin\n ===================================================================== */\n.hsg-intro {\n position: relative;\n min-height: 70svh;\n display: flex;\n align-items: center;\n padding: 8rem 0 6rem;\n background-color: var(--at-neutral-50);\n color: var(--at-neutral-950);\n overflow: hidden;\n\n .hsg-intro__eyebrow {\n display: inline-block;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n padding-bottom: 0.5rem;\n border-bottom: 1px solid currentColor;\n opacity: 0.75;\n margin-bottom: 1.75rem;\n }\n\n .hsg-intro__title {\n font-size: clamp(2.5rem, 7vw, 6rem);\n line-height: 0.95;\n font-weight: 600;\n letter-spacing: -0.03em;\n text-transform: uppercase;\n max-width: 16ch;\n margin: 0 0 1.5rem;\n }\n\n .hsg-intro__desc {\n font-size: clamp(1rem, 1.2vw, 1.15rem);\n line-height: 1.55;\n max-width: 56ch;\n opacity: 0.8;\n margin: 0 0 3rem;\n }\n\n .hsg-intro__hint {\n display: inline-flex;\n align-items: center;\n gap: 1rem;\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n opacity: 0.7;\n }\n\n .hsg-intro__hint-line {\n display: block;\n width: 80px;\n height: 1px;\n background-color: currentColor;\n animation: hsgHintPulse 2.4s ease-in-out infinite;\n }\n\n @media (max-width: 991px) {\n min-height: 60svh;\n padding: 6rem 0 4rem;\n }\n\n @media (max-width: 575px) {\n min-height: 55svh;\n padding: 5rem 0 3rem;\n\n .hsg-intro__hint-line {\n width: 56px;\n }\n }\n}\n\n@keyframes hsgHintPulse {\n\n 0%,\n 100% {\n opacity: 0.35;\n transform: translateX(0);\n }\n\n 50% {\n opacity: 1;\n transform: translateX(8px);\n }\n}\n\n/* =====================================================================\n STAGE - the pinned horizontal scroll section\n ===================================================================== */\n.hsg-stage {\n position: relative;\n width: 100%;\n height: 100svh;\n overflow: hidden;\n color: #fefefe;\n background-color: var(--at-neutral-950);\n\n * {\n box-sizing: border-box;\n }\n\n /* -------------------- Background layer -------------------- */\n .hsg-bg-layer {\n position: absolute;\n inset: 0;\n z-index: 0;\n }\n\n .hsg-bg {\n position: absolute;\n inset: 0;\n opacity: 0;\n transform: scale(1.12);\n transition: opacity 0.8s ease, transform 6s ease-out;\n will-change: opacity, transform;\n }\n\n /* Ken-Burns-style slow drift on the active background — the longer the\n user lingers on a slide, the more the image breathes. */\n .hsg-bg.is-active {\n opacity: 1;\n transform: scale(1) translateX(-1%);\n }\n\n .hsg-bg__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n filter: brightness(0.7) saturate(0.9);\n }\n\n /* Tint veil on top of all backgrounds to lift card contrast. */\n .hsg-bg__veil {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg,\n rgba(0, 0, 0, 0.25) 0%,\n rgba(0, 0, 0, 0.35) 60%,\n rgba(0, 0, 0, 0.6) 100%);\n backdrop-filter: blur(2px);\n -webkit-backdrop-filter: blur(2px);\n pointer-events: none;\n }\n\n /* -------------------- Track of cards -------------------- */\n .hsg-track-wrap {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n overflow: hidden;\n z-index: 1;\n }\n\n .hsg-track {\n display: flex;\n align-items: center;\n will-change: transform;\n /* Side padding (centers the first/last slide) and inter-slide gap\n (margin-left: 50svw) are applied by horizontal-scroll-gallery.js so\n the spacing rule lives next to the scroll logic that depends on it. */\n }\n\n /* -------------------- Slide card --------------------\n Vertical layout: media on top (~40%), body fills the rest with\n a solid black panel that holds title + tags. */\n .hsg-slide {\n /* Hover palette — kept as CSS vars so a future per-slide accent\n (e.g. data-accent) could override just these three values. */\n --hsg-hover-bg: #212121;\n --hsg-hover-fg: #fefefe;\n --hsg-hover-border: #212121;\n\n flex: 0 0 auto;\n width: 36vw;\n max-width: 520px;\n min-width: 320px;\n height: 76vh;\n max-height: 760px;\n position: relative;\n background-color: #0F0F0F;\n /* Transparent border by default so hover doesn't reflow the layout. */\n border: 5px solid transparent;\n\n /* Exit pose driven by --hsg-exit (set by JS to the slide's segment\n progress, 0..1). When this card becomes active and the user keeps\n scrolling, exit ramps from 0 to 1 across its segment:\n - translate X right by up to 80px\n - scale down to 0.65\n Once past its segment the slide holds the exit pose; the track\n then carries it offscreen-left so the reset is never visible.\n\n translate/scale have NO transition so the motion stays tight to\n scroll. Hover/active color swaps still transition. */\n translate: calc(var(--hsg-exit, 0) * 80px) 0;\n scale: calc(1 - var(--hsg-exit, 0) * 0.35);\n transition:\n box-shadow 0.6s ease,\n background-color 0.4s ease,\n border-color 0.4s ease;\n box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);\n }\n\n .hsg-slide.is-active {\n box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);\n }\n\n /* Hover / keyboard-focus state — swap to the accent palette and\n reveal the border. :focus-within picks up keyboard users on the\n inner . Parallax dim on the body is also neutralized so the\n card feels \"lit up\" regardless of where it sits on the track. */\n .hsg-slide:hover,\n .hsg-slide:focus-within {\n background-color: var(--hsg-hover-bg);\n border-color: var(--hsg-hover-border);\n }\n\n .hsg-slide__link {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n color: inherit;\n text-decoration: none;\n overflow: hidden;\n isolation: isolate;\n }\n\n .hsg-slide__media {\n /* Height is driven by the image's fixed 2400:1600 (3:2) aspect ratio\n (set on .hsg-slide__img), not by a flex basis. Because all slides\n share the same width at any given breakpoint, all thumbnails end up\n the same height across cards. */\n position: relative;\n flex: 0 0 auto;\n width: 100%;\n overflow: hidden;\n }\n\n /* The image is intentionally over-scaled so the parallax translateX never\n reveals an empty edge inside the frame. `scale` and `translate` are set\n as individual transform properties so we can transition them separately:\n scale animates over 1.2s on .is-active, translate updates instantly to\n follow the scroll-driven --hsg-norm value. */\n .hsg-slide__img {\n width: 100%;\n height: auto;\n aspect-ratio: 2400 / 1600;\n object-fit: cover;\n display: block;\n scale: 1.18;\n translate: calc(var(--hsg-norm, 0) * -14%) 0;\n transition: scale 1.2s ease;\n will-change: transform;\n }\n\n .hsg-slide.is-active .hsg-slide__img {\n scale: 1.04;\n }\n\n .hsg-slide__body {\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 2.25rem 2rem 2rem;\n background-color: #0F0F0F;\n color: #fefefe;\n min-height: 0;\n /* Centered cards are fully opaque; off-center cards dim toward 0.45.\n This complements the binary .is-active state with a smooth fade. */\n opacity: calc(0.45 + var(--hsg-centeredness, 1) * 0.55);\n transition:\n background-color 0.4s ease,\n color 0.4s ease,\n opacity 0.35s ease;\n }\n\n .hsg-slide:hover .hsg-slide__body,\n .hsg-slide:focus-within .hsg-slide__body {\n background-color: var(--hsg-hover-bg);\n color: var(--hsg-hover-fg);\n opacity: 1;\n }\n\n .hsg-slide__title {\n margin: 0;\n letter-spacing: -0.02em;\n color: #fefefe;\n overflow-wrap: break-word;\n translate: 0 calc(var(--hsg-norm, 0) * -10px);\n transition: color 0.4s ease;\n }\n\n .hsg-slide:hover .hsg-slide__title,\n .hsg-slide:focus-within .hsg-slide__title {\n color: var(--hsg-hover-fg);\n }\n\n .hsg-slide__tags {\n margin: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.65rem;\n font-size: 0.85rem;\n font-weight: 500;\n letter-spacing: 0.02em;\n color: rgba(255, 255, 255, 0.9);\n /* Slight opposite-direction drift to the image — image translates left,\n tags drift right (and vice versa). Small magnitude keeps it subtle. */\n translate: calc(var(--hsg-norm, 0) * 6px) 0;\n transition: color 0.4s ease;\n }\n\n .hsg-slide:hover .hsg-slide__tags,\n .hsg-slide:focus-within .hsg-slide__tags {\n color: #fefefe;\n }\n\n .hsg-slide__tag-sep {\n display: inline-block;\n color: rgba(255, 255, 255, 0.35);\n font-weight: 400;\n transform: translateY(-1px);\n transition: color 0.4s ease;\n }\n\n .hsg-slide:hover .hsg-slide__tag-sep,\n .hsg-slide:focus-within .hsg-slide__tag-sep {\n color: rgba(0, 0, 0, 0.35);\n }\n\n /* -------------------- Progress bar -------------------- */\n .hsg-progress {\n position: absolute;\n left: 50%;\n bottom: 2.5rem;\n transform: translateX(-50%);\n width: clamp(180px, 28vw, 360px);\n height: 2px;\n background-color: rgba(255, 255, 255, 0.2);\n z-index: 4;\n overflow: hidden;\n }\n\n .hsg-progress__bar {\n display: block;\n width: 100%;\n height: 100%;\n background-color: #fefefe;\n transform-origin: 0 50%;\n transform: scaleX(0);\n transition: transform 0.08s linear;\n }\n\n /* -------------------- Counter --------------------\n Centered horizontally and parked 30px above the progress bar.\n The bottom offset is `progress.bottom + progress.height + 30px`,\n so keep the responsive overrides in lock-step with .hsg-progress. */\n .hsg-counter {\n position: absolute;\n left: 50%;\n bottom: calc(2.5rem + 2px + 30px);\n transform: translateX(-50%);\n display: inline-flex;\n align-items: baseline;\n gap: 0.35rem;\n font-size: 0.85rem;\n font-weight: 600;\n letter-spacing: 0.25em;\n color: #fefefe;\n z-index: 4;\n }\n\n .hsg-counter__current {\n font-size: 1.5rem;\n line-height: 1;\n }\n\n .hsg-counter__sep,\n .hsg-counter__total {\n opacity: 0.6;\n }\n\n /* -------------------- Responsive -------------------- */\n @media (max-width: 991px) {\n .hsg-slide {\n width: 56vw;\n height: 70vh;\n min-width: 280px;\n }\n\n .hsg-slide__body {\n padding: 1.75rem 1.5rem 1.5rem;\n }\n\n .hsg-counter {\n bottom: calc(1.75rem + 2px + 30px);\n }\n\n .hsg-progress {\n bottom: 1.75rem;\n }\n }\n\n @media (max-width: 575px) {\n .hsg-slide {\n width: 78vw;\n height: 64vh;\n max-height: 560px;\n min-width: 0;\n }\n\n .hsg-slide__body {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n\n .hsg-slide__title {\n font-size: clamp(1rem, 4.5vw, 1.5rem);\n max-width: 6ch;\n }\n\n .hsg-slide__tags {\n font-size: 0.75rem;\n gap: 0.5rem;\n }\n\n .hsg-progress {\n bottom: 1.25rem;\n width: 50vw;\n }\n\n .hsg-counter {\n bottom: calc(1.25rem + 2px + 30px);\n font-size: 0.7rem;\n }\n\n .hsg-counter__current {\n font-size: 1.15rem;\n }\n }\n\n /* Respect users who prefer reduced motion - keep layout, drop the\n decorative parallax. ScrollTrigger still drives the track. */\n @media (prefers-reduced-motion: reduce) {\n\n .hsg-bg,\n .hsg-slide,\n .hsg-slide__img,\n .hsg-slide__title,\n .hsg-slide__tags,\n .hsg-slide__body {\n transition: none;\n }\n\n .hsg-bg {\n transform: none;\n }\n\n .hsg-slide {\n translate: 0 0;\n scale: 1;\n }\n\n .hsg-slide__img {\n scale: 1;\n translate: 0 0;\n }\n\n .hsg-slide__title,\n .hsg-slide__tags {\n translate: 0 0;\n }\n\n .hsg-slide__body {\n opacity: 1;\n }\n }\n}","@use '../../utils' as *;\n\n/*----------------------------------------*/\n/* Portfolio Details 3 — Editorial Split\n/*----------------------------------------*/\n\n/* JS injects `.anim-zoomin-wrap` around every `.anim-zoomin` ![]()
.\n Our image hosts position the ![]()
as absolute fill inside an\n aspect-ratio box — make the injected wrap fill the same box. */\n.sec-1-portfolio-details-3__portrait,\n.sec-3-portfolio-details-3__cell,\n.sec-5-portfolio-details-3__media,\n.sec-7-portfolio-details-3__media,\n.sec-8-portfolio-details-3__thumb {\n .anim-zoomin-wrap {\n position: absolute;\n inset: 0;\n overflow: hidden;\n }\n}\n\n/* ---------- shared plus glyph ---------- */\n%pd3-plus {\n width: 14px;\n height: 14px;\n position: relative;\n display: inline-block;\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n background: currentColor;\n }\n\n &::before {\n top: 50%;\n left: 0;\n width: 100%;\n height: 1.5px;\n transform: translateY(-50%);\n }\n\n &::after {\n left: 50%;\n top: 0;\n width: 1.5px;\n height: 100%;\n transform: translateX(-50%);\n }\n}\n\n/* ===========================================\n SEC 1 — Hero split\n =========================================== */\n.sec-1-portfolio-details-3 {\n background-color: var(--at-neutral-0);\n\n &__title {\n letter-spacing: -0.05em;\n color: var(--at-neutral-950);\n\n sup {\n margin-left: 4px;\n line-height: 1;\n }\n }\n\n &__tagline {\n letter-spacing: -0.04em;\n }\n\n &__demo {\n padding: 14px 26px;\n color: var(--at-neutral-0);\n transition: transform 0.35s ease, background-color 0.35s ease;\n\n svg {\n transition: transform 0.35s ease;\n }\n\n &:hover {\n background-color: var(--at-neutral-900);\n color: var(--at-neutral-0);\n transform: translateY(-2px);\n\n svg {\n transform: translate(3px, -3px);\n }\n }\n }\n\n &__portrait {\n position: relative;\n width: 100%;\n aspect-ratio: 4 / 5;\n overflow: hidden;\n border-radius: 8px;\n background-color: var(--at-neutral-100);\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n\n &:hover img {\n transform: scale(1.04);\n }\n }\n\n &__meta {\n .col-md-3,\n .col-sm-6 {\n position: relative;\n }\n }\n\n @media #{$xl} {\n &__portrait {\n aspect-ratio: 4 / 5;\n }\n }\n\n @media #{$lg} {\n &__portrait {\n aspect-ratio: 4 / 5;\n max-width: 480px;\n margin-left: auto;\n }\n }\n\n @media #{$md} {\n padding-top: 100px;\n padding-bottom: 80px;\n\n &__portrait {\n aspect-ratio: 16 / 11;\n margin-top: 30px;\n }\n\n &__tagline {\n margin-bottom: 30px !important;\n }\n }\n\n @media #{$sm} {\n padding-top: 90px;\n padding-bottom: 70px;\n\n &__portrait {\n aspect-ratio: 16 / 11;\n margin-top: 20px;\n }\n\n &__demo {\n padding: 12px 22px;\n }\n }\n\n @media #{$xs} {\n padding-top: 80px;\n padding-bottom: 60px;\n\n &__title {\n font-size: 54px !important;\n margin-bottom: 16px !important;\n }\n\n &__tagline {\n margin-bottom: 24px !important;\n }\n\n &__portrait {\n aspect-ratio: 4 / 5;\n margin-top: 16px;\n }\n\n &__demo {\n padding: 12px 20px;\n\n span {\n font-size: 14px;\n }\n }\n\n &__meta {\n margin-top: 40px !important;\n padding-top: 30px !important;\n }\n }\n}\n\n/* ===========================================\n SEC 2 — 3-col Intro\n =========================================== */\n.sec-2-portfolio-details-3 {\n background-color: var(--at-neutral-0);\n\n &__plus {\n @extend %pd3-plus;\n color: var(--at-neutral-950);\n }\n\n &__headline {\n letter-spacing: -0.04em;\n line-height: 1.15;\n }\n\n &__paragraph {\n line-height: 1.6;\n letter-spacing: -0.02em;\n }\n\n &__stats {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n\n &__stat {\n padding-bottom: 22px;\n border-bottom: 1px solid var(--at-neutral-100);\n\n &:last-child {\n border-bottom: 0;\n padding-bottom: 0;\n }\n\n &-number {\n font-size: 48px;\n letter-spacing: -0.05em;\n margin-bottom: 8px;\n }\n }\n\n @media #{$lg} {\n &__stat-number {\n font-size: 40px;\n }\n }\n\n @media #{$md} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__stat-number {\n font-size: 40px;\n }\n }\n\n @media #{$sm} {\n padding-top: 50px;\n padding-bottom: 50px;\n\n &__stat-number {\n font-size: 38px;\n }\n }\n\n @media #{$xs} {\n padding-top: 40px;\n padding-bottom: 40px;\n\n &__headline {\n font-size: 24px !important;\n }\n\n &__stat-number {\n font-size: 36px;\n }\n }\n}\n\n/* ===========================================\n SEC 3 — Bento Gallery\n =========================================== */\n.sec-3-portfolio-details-3 {\n background-color: var(--at-neutral-0);\n\n &__plus {\n @extend %pd3-plus;\n color: var(--at-neutral-950);\n }\n\n &__bento {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: repeat(2, minmax(0, 1fr));\n gap: 16px;\n aspect-ratio: 16 / 9;\n }\n\n &__cell {\n position: relative;\n margin: 0;\n overflow: hidden;\n border-radius: 8px;\n background-color: var(--at-neutral-100);\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n\n &:hover img {\n transform: scale(1.05);\n }\n\n &--large {\n grid-column: 1 / span 2;\n grid-row: 1 / span 2;\n }\n\n &--small {\n grid-column: span 1;\n grid-row: span 1;\n }\n }\n\n @media #{$md} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__bento {\n aspect-ratio: 16 / 11;\n gap: 12px;\n }\n }\n\n @media #{$sm} {\n padding-top: 50px;\n padding-bottom: 50px;\n\n &__bento {\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(3, minmax(0, 1fr));\n aspect-ratio: 4 / 5;\n gap: 12px;\n }\n\n &__cell--large {\n grid-column: 1 / span 2;\n grid-row: 1 / span 1;\n }\n\n &__cell--small {\n grid-column: span 1;\n grid-row: span 1;\n }\n }\n\n @media #{$xs} {\n padding-top: 40px;\n padding-bottom: 40px;\n\n &__bento {\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(3, minmax(0, 1fr));\n aspect-ratio: 3 / 5;\n gap: 10px;\n }\n\n &__cell--large {\n grid-column: 1 / span 2;\n grid-row: 1 / span 1;\n }\n }\n}\n\n/* ===========================================\n SEC 4 — Process timeline (dark)\n =========================================== */\n.sec-4-portfolio-details-3 {\n background-color: var(--at-neutral-950);\n color: var(--at-neutral-0);\n\n &__plus {\n @extend %pd3-plus;\n color: var(--at-neutral-0);\n }\n\n &__title {\n letter-spacing: -0.04em;\n line-height: 1.15;\n }\n\n &__steps {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n top: 5px;\n left: 0;\n right: 0;\n height: 1px;\n background: var(--at-neutral-500);\n opacity: 0.5;\n }\n }\n\n &__step {\n position: relative;\n padding-top: 36px;\n }\n\n &__marker {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n &__dot {\n display: block;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: var(--at-neutral-0);\n }\n\n &__num {\n letter-spacing: -0.02em;\n margin-bottom: 16px;\n opacity: 0.8;\n }\n\n &__heading {\n letter-spacing: -0.04em;\n margin-bottom: 12px;\n }\n\n &__desc {\n color: var(--at-neutral-100);\n line-height: 1.55;\n letter-spacing: -0.02em;\n opacity: 0.85;\n }\n\n @media #{$md} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__steps {\n grid-template-columns: repeat(2, 1fr);\n row-gap: 40px;\n\n &::before {\n display: none;\n }\n }\n\n &__step {\n padding-top: 28px;\n }\n }\n\n @media #{$sm} {\n padding-top: 50px;\n padding-bottom: 50px;\n\n &__steps {\n grid-template-columns: repeat(2, 1fr);\n row-gap: 36px;\n gap: 18px;\n\n &::before {\n display: none;\n }\n }\n }\n\n @media #{$xs} {\n padding-top: 40px;\n padding-bottom: 40px;\n\n &__title {\n font-size: 26px !important;\n }\n\n &__steps {\n grid-template-columns: 1fr;\n row-gap: 32px;\n\n &::before {\n display: none;\n }\n }\n }\n}\n\n/* ===========================================\n SEC 5 — Quote overlay\n =========================================== */\n.sec-5-portfolio-details-3 {\n position: relative;\n min-height: 700px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--at-neutral-0);\n\n &__media {\n position: absolute;\n inset: 0;\n overflow: hidden;\n z-index: 0;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n\n &__veil {\n position: absolute;\n inset: 0;\n background: rgba(15, 15, 15, 0.55);\n }\n\n &__content {\n position: relative;\n z-index: 1;\n width: 100%;\n padding: 120px 0;\n }\n\n &__mark {\n font-family: var(--at-ff-heading);\n font-size: 120px;\n line-height: 1;\n display: inline-block;\n opacity: 0.85;\n margin-bottom: -20px;\n }\n\n &__quote {\n font-size: 36px;\n line-height: 1.4;\n letter-spacing: -0.03em;\n font-style: normal;\n padding: 0;\n border: 0;\n }\n\n &__author {\n letter-spacing: -0.02em;\n }\n\n &__role {\n color: var(--at-neutral-100);\n opacity: 0.8;\n }\n\n @media #{$lg} {\n min-height: 600px;\n\n &__quote {\n font-size: 30px;\n }\n\n &__mark {\n font-size: 100px;\n }\n }\n\n @media #{$md} {\n min-height: 520px;\n\n &__content {\n padding: 90px 0;\n }\n\n &__quote {\n font-size: 26px;\n }\n\n &__mark {\n font-size: 88px;\n }\n }\n\n @media #{$sm} {\n min-height: 460px;\n\n &__content {\n padding: 70px 0;\n }\n\n &__quote {\n font-size: 22px;\n }\n\n &__mark {\n font-size: 72px;\n }\n }\n\n @media #{$xs} {\n min-height: 420px;\n\n &__content {\n padding: 60px 0;\n }\n\n &__quote {\n font-size: 20px;\n line-height: 1.5;\n }\n\n &__mark {\n font-size: 60px;\n margin-bottom: -10px;\n }\n }\n}\n\n/* ===========================================\n SEC 6 — Solution + Outcome (2-col w/ divider)\n =========================================== */\n.sec-6-portfolio-details-3 {\n background-color: var(--at-neutral-0);\n\n &__plus {\n @extend %pd3-plus;\n color: var(--at-neutral-950);\n }\n\n &__col--right {\n position: relative;\n }\n\n &__pair {\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n top: 12px;\n bottom: 12px;\n left: 50%;\n width: 1px;\n background: var(--at-neutral-100);\n transform: translateX(-50%);\n }\n }\n\n &__list {\n list-style: none;\n\n li {\n position: relative;\n padding-left: 22px;\n padding-top: 10px;\n padding-bottom: 10px;\n color: var(--at-neutral-900);\n font-size: var(--at-fz-font-md);\n border-top: 1px solid var(--at-neutral-100);\n\n &:last-child {\n border-bottom: 1px solid var(--at-neutral-100);\n }\n\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n width: 8px;\n height: 8px;\n background: var(--at-neutral-950);\n border-radius: 50%;\n transform: translateY(-50%);\n }\n }\n }\n\n @media #{$lg} {\n &__pair::before {\n top: 0;\n bottom: 0;\n }\n }\n\n @media #{$md} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__pair::before {\n display: none;\n }\n\n &__col {\n padding-bottom: 30px;\n }\n\n &__col + &__col--right {\n border-top: 1px solid var(--at-neutral-100);\n padding-top: 40px;\n }\n }\n\n @media #{$sm} {\n padding-top: 50px;\n padding-bottom: 50px;\n\n &__pair::before {\n display: none;\n }\n\n &__col + &__col--right {\n border-top: 1px solid var(--at-neutral-100);\n padding-top: 40px;\n }\n }\n\n @media #{$xs} {\n padding-top: 40px;\n padding-bottom: 40px;\n\n &__pair::before {\n display: none;\n }\n\n &__col + &__col--right {\n border-top: 1px solid var(--at-neutral-100);\n padding-top: 30px;\n margin-top: 20px;\n }\n\n h3 {\n font-size: 24px !important;\n }\n }\n}\n\n/* ===========================================\n SEC 7 — Big image strip\n =========================================== */\n.sec-7-portfolio-details-3 {\n &__media {\n position: relative;\n width: 100%;\n aspect-ratio: 16 / 7;\n overflow: hidden;\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n\n @media #{$md} {\n &__media {\n aspect-ratio: 16 / 10;\n }\n }\n\n @media #{$sm} {\n &__media {\n aspect-ratio: 4 / 3;\n }\n }\n\n @media #{$xs} {\n &__media {\n aspect-ratio: 4 / 3;\n }\n }\n}\n\n/* ===========================================\n SEC 8 — Related projects (2 large cards)\n =========================================== */\n.sec-8-portfolio-details-3 {\n background-color: var(--at-neutral-0);\n\n &__plus {\n @extend %pd3-plus;\n color: var(--at-neutral-950);\n }\n\n &__title {\n letter-spacing: -0.04em;\n line-height: 1.15;\n }\n\n &__card {\n text-decoration: none;\n color: inherit;\n transition: transform 0.4s ease;\n\n &:hover {\n color: inherit;\n transform: translateY(-4px);\n\n .sec-8-portfolio-details-3__thumb img {\n transform: scale(1.04);\n }\n\n .sec-8-portfolio-details-3__arrow {\n transform: translate(3px, -3px);\n }\n }\n }\n\n &__thumb {\n position: relative;\n margin: 0 0 26px 0;\n width: 100%;\n aspect-ratio: 4 / 3;\n overflow: hidden;\n border-radius: 8px;\n background-color: var(--at-neutral-100);\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n }\n\n &__meta {\n display: flex;\n flex-direction: column;\n gap: 14px;\n }\n\n &__tag {\n align-self: flex-start;\n padding: 8px 16px;\n background: var(--at-neutral-50);\n border-radius: 25px;\n color: var(--at-neutral-900);\n letter-spacing: 0.05em;\n }\n\n &__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n }\n\n &__name {\n color: var(--at-neutral-950);\n }\n\n &__arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n transition: transform 0.35s ease;\n flex-shrink: 0;\n }\n\n &__desc {\n line-height: 1.55;\n letter-spacing: -0.02em;\n }\n\n @media #{$md} {\n padding-top: 60px;\n padding-bottom: 100px;\n\n &__thumb {\n aspect-ratio: 5 / 4;\n }\n }\n\n @media #{$sm} {\n padding-top: 50px;\n padding-bottom: 80px;\n\n &__thumb {\n aspect-ratio: 4 / 3;\n margin-bottom: 20px;\n }\n\n &__arrow {\n width: 40px;\n height: 40px;\n }\n }\n\n @media #{$xs} {\n padding-top: 40px;\n padding-bottom: 70px;\n\n &__title {\n font-size: 24px !important;\n }\n\n &__thumb {\n aspect-ratio: 4 / 3;\n margin-bottom: 18px;\n }\n\n &__name {\n font-size: 26px !important;\n }\n\n &__arrow {\n width: 38px;\n height: 38px;\n\n svg {\n width: 18px;\n height: 18px;\n }\n }\n }\n}\n","@use '../../utils' as *;\n\n/*----------------------------------------*/\n/* Portfolio Details 4 — Sticky Sidebar + Chapters\n/* Brand accent: var(--at-theme-primary) (#F0460E)\n/*----------------------------------------*/\n\n/* JS injects `.anim-zoomin-wrap` around every `.anim-zoomin` ![]()
.\n Image hosts use absolute-fill img inside aspect-ratio box. */\n.sec-2-portfolio-details-4__inline-fig,\n.sec-4-portfolio-details-4__cell,\n.sec-5-portfolio-details-4__media {\n .anim-zoomin-wrap {\n position: absolute;\n inset: 0;\n overflow: hidden;\n }\n}\n\n/* =========================================================\n SEC 1 — Compact title block\n ========================================================= */\n.sec-1-portfolio-details-4 {\n background-color: var(--at-neutral-0);\n\n &__crumbs {\n letter-spacing: 0.1em;\n\n span {\n margin: 0 8px;\n color: var(--at-neutral-300);\n }\n }\n\n &__title {\n letter-spacing: -0.05em;\n\n sup {\n margin-left: 4px;\n line-height: 1;\n }\n }\n\n &__tagline {\n letter-spacing: -0.03em;\n line-height: 1.35;\n }\n\n &__tags {\n gap: 8px;\n }\n\n &__tag {\n padding: 8px 18px;\n background: var(--at-neutral-50);\n color: var(--at-neutral-900);\n border-radius: 25px;\n letter-spacing: 0.05em;\n }\n\n &__demo {\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: gap 0.3s ease;\n\n span {\n transition: transform 0.3s ease;\n }\n\n &:hover {\n color: var(--at-theme-primary);\n gap: 12px;\n\n span {\n transform: translate(3px, -3px);\n }\n }\n }\n\n @media #{$md} {\n padding-top: 100px;\n padding-bottom: 40px;\n }\n\n @media #{$sm,$xs} {\n padding-top: 90px;\n padding-bottom: 30px;\n\n &__title {\n margin-bottom: 18px !important;\n }\n\n &__tagline {\n margin-bottom: 30px;\n }\n\n &__crumbs span {\n margin: 0 6px;\n }\n }\n\n @media #{$xs} {\n &__title {\n font-size: 54px !important;\n }\n }\n}\n\n/* =========================================================\n SEC 2 — Sticky sidebar + chapters\n ========================================================= */\n.sec-2-portfolio-details-4 {\n background-color: var(--at-neutral-0);\n\n &__sidebar-col {\n position: relative;\n }\n\n &__sidebar {\n position: sticky;\n top: 120px;\n background: var(--at-neutral-50);\n border-radius: 8px;\n padding: 32px;\n }\n\n &__sidebar-eyebrow {\n letter-spacing: 0.1em;\n margin-bottom: 16px;\n }\n\n &__meta {\n padding-top: 0;\n }\n\n &__meta-row {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: 16px;\n padding: 14px 0;\n border-top: 1px solid var(--at-neutral-100);\n\n dt {\n margin: 0;\n flex-shrink: 0;\n }\n\n dd {\n text-align: right;\n letter-spacing: -0.02em;\n }\n\n &:last-child {\n border-bottom: 1px solid var(--at-neutral-100);\n }\n }\n\n &__services {\n li {\n padding: 6px 0;\n color: var(--at-neutral-900);\n font-size: var(--at-fz-font-md);\n letter-spacing: -0.02em;\n\n &::before {\n content: '— ';\n color: var(--at-theme-primary);\n margin-right: 4px;\n }\n }\n }\n\n &__cta {\n padding: 14px 22px;\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n border-radius: 23px;\n text-decoration: none;\n transition: background-color 0.3s ease, transform 0.3s ease;\n\n span {\n transition: transform 0.3s ease;\n }\n\n &:hover {\n background: var(--at-theme-primary);\n color: var(--at-neutral-0);\n transform: translateY(-2px);\n\n span {\n transform: translate(3px, -3px);\n }\n }\n }\n\n &__content-col {\n padding-left: 60px;\n }\n\n &__chapter {\n padding-bottom: 70px;\n margin-bottom: 70px;\n border-bottom: 1px solid var(--at-neutral-100);\n\n &:last-child {\n padding-bottom: 0;\n margin-bottom: 0;\n border-bottom: 0;\n }\n }\n\n &__chapter-head {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-bottom: 16px;\n letter-spacing: 0.1em;\n }\n\n &__chapter-num {\n color: var(--at-theme-primary);\n }\n\n &__chapter-title {\n font-size: 44px;\n letter-spacing: -0.04em;\n line-height: 1.15;\n margin-bottom: 24px;\n }\n\n &__chapter-body {\n line-height: 1.65;\n letter-spacing: -0.02em;\n margin-bottom: 40px;\n }\n\n /* Inline image grid (chapter 01) */\n &__inline-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n }\n\n &__inline-fig {\n position: relative;\n margin: 0;\n aspect-ratio: 7 / 5;\n overflow: hidden;\n border-radius: 6px;\n background: var(--at-neutral-100);\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n\n &:hover img {\n transform: scale(1.04);\n }\n }\n\n /* Pull-quote (chapter 02) — brand-1 left bar */\n &__pull-quote {\n position: relative;\n margin: 0;\n padding: 10px 0 10px 32px;\n border-left: 4px solid var(--at-theme-primary);\n\n p {\n letter-spacing: -0.03em;\n line-height: 1.4;\n }\n }\n\n /* Steps (chapter 03) */\n &__steps {\n margin: 0;\n }\n\n &__step {\n display: grid;\n grid-template-columns: 80px 1fr 2fr;\n gap: 20px;\n align-items: baseline;\n padding: 22px 0;\n border-top: 1px solid var(--at-neutral-100);\n\n &:last-child {\n border-bottom: 1px solid var(--at-neutral-100);\n }\n }\n\n &__step-num {\n color: var(--at-theme-primary);\n letter-spacing: -0.02em;\n }\n\n &__step-title {\n letter-spacing: -0.03em;\n }\n\n &__step-desc {\n line-height: 1.55;\n letter-spacing: -0.02em;\n }\n\n /* Stats (chapter 04) */\n &__stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n }\n\n &__stat {\n padding-top: 20px;\n border-top: 1px solid var(--at-neutral-950);\n }\n\n &__stat-num {\n font-size: 48px;\n letter-spacing: -0.05em;\n margin-bottom: 8px;\n }\n\n @media #{$lg} {\n &__content-col {\n padding-left: 40px;\n }\n\n &__chapter-title {\n font-size: 38px;\n }\n }\n\n @media #{$md} {\n padding-top: 70px;\n padding-bottom: 70px;\n\n &__sidebar {\n position: static;\n top: auto;\n margin-bottom: 50px;\n }\n\n &__content-col {\n padding-left: 12px;\n }\n\n &__chapter-title {\n font-size: 34px;\n }\n\n &__step {\n grid-template-columns: 60px 1fr;\n row-gap: 8px;\n column-gap: 16px;\n }\n\n &__step-desc {\n grid-column: 1 / -1;\n padding-left: 76px;\n }\n\n &__stats {\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n }\n\n &__stat-num {\n font-size: 36px;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__sidebar {\n position: static;\n padding: 24px;\n margin-bottom: 40px;\n }\n\n &__content-col {\n padding-left: 12px;\n }\n\n &__chapter {\n padding-bottom: 50px;\n margin-bottom: 50px;\n }\n\n &__chapter-title {\n font-size: 28px;\n }\n\n &__chapter-body {\n margin-bottom: 30px;\n }\n\n &__inline-grid {\n grid-template-columns: 1fr;\n gap: 12px;\n }\n\n &__inline-fig {\n aspect-ratio: 4 / 3;\n }\n\n &__pull-quote {\n padding: 8px 0 8px 20px;\n\n p {\n font-size: 20px !important;\n }\n }\n\n &__step {\n grid-template-columns: 60px 1fr;\n row-gap: 8px;\n }\n\n &__step-desc {\n grid-column: 1 / -1;\n padding-left: 76px;\n }\n\n &__stats {\n grid-template-columns: 1fr;\n }\n\n &__stat-num {\n font-size: 36px;\n }\n }\n\n @media #{$xs} {\n &__chapter-head {\n gap: 8px;\n }\n\n &__chapter-title {\n font-size: 24px;\n }\n }\n}\n\n/* =========================================================\n SEC 3 — Pull-quote callout (centered)\n ========================================================= */\n.sec-3-portfolio-details-4 {\n background-color: var(--at-neutral-50);\n\n &__mark {\n display: inline-block;\n font-family: var(--at-ff-heading);\n font-size: 180px;\n line-height: 0.8;\n color: var(--at-theme-primary);\n margin-bottom: -10px;\n letter-spacing: -0.05em;\n }\n\n &__quote {\n font-size: 34px;\n line-height: 1.4;\n letter-spacing: -0.03em;\n margin-top: 30px;\n padding: 0;\n border: 0;\n }\n\n &__divider {\n width: 60px;\n height: 1px;\n background: var(--at-neutral-300);\n }\n\n &__author {\n letter-spacing: -0.02em;\n }\n\n &__role {\n letter-spacing: 0.1em;\n }\n\n @media #{$md} {\n padding-top: 70px;\n padding-bottom: 70px;\n\n &__mark {\n font-size: 140px;\n }\n\n &__quote {\n font-size: 28px;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__mark {\n font-size: 120px;\n }\n\n &__quote {\n font-size: 22px;\n }\n }\n\n @media #{$xs} {\n &__mark {\n font-size: 100px;\n }\n\n &__quote {\n font-size: 20px;\n }\n }\n}\n\n/* =========================================================\n SEC 4 — Visual showcase 3 rows\n ========================================================= */\n.sec-4-portfolio-details-4 {\n background-color: var(--at-neutral-0);\n\n &__row {\n display: grid;\n gap: 20px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n &--split {\n grid-template-columns: 6fr 4fr;\n }\n\n &--full {\n grid-template-columns: 1fr;\n }\n\n &--triple {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n\n &__cell {\n position: relative;\n margin: 0;\n aspect-ratio: 16 / 11;\n overflow: hidden;\n border-radius: 6px;\n background: var(--at-neutral-100);\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n\n &:hover img {\n transform: scale(1.05);\n }\n\n &--wide {\n aspect-ratio: 13 / 9;\n }\n\n &--narrow {\n aspect-ratio: 13 / 9;\n }\n\n &--full {\n aspect-ratio: 22 / 7;\n }\n }\n\n @media #{$md} {\n padding-top: 50px;\n padding-bottom: 50px;\n\n &__row {\n gap: 14px;\n margin-bottom: 14px;\n }\n\n &__cell--full {\n aspect-ratio: 16 / 7;\n }\n }\n\n @media #{$sm} {\n padding-top: 40px;\n padding-bottom: 40px;\n\n &__row {\n gap: 12px;\n margin-bottom: 12px;\n\n &--split,\n &--triple {\n grid-template-columns: 1fr 1fr;\n }\n }\n\n &__cell--full {\n aspect-ratio: 4 / 3;\n }\n }\n\n @media #{$xs} {\n padding-top: 40px;\n padding-bottom: 40px;\n\n &__row {\n gap: 10px;\n margin-bottom: 10px;\n\n &--split,\n &--triple {\n grid-template-columns: 1fr;\n }\n }\n\n &__cell--full {\n aspect-ratio: 4 / 3;\n }\n }\n}\n\n/* =========================================================\n SEC 5 — Next project banner\n ========================================================= */\n.sec-5-portfolio-details-4 {\n position: relative;\n\n &__link {\n position: relative;\n text-decoration: none;\n color: var(--at-neutral-0);\n display: block;\n\n &:hover {\n color: var(--at-neutral-0);\n\n .sec-5-portfolio-details-4__media img {\n transform: scale(1.04);\n }\n\n .sec-5-portfolio-details-4__disk-inner {\n transform: scale(1.08);\n }\n }\n }\n\n &__media {\n position: absolute;\n inset: 0;\n overflow: hidden;\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n }\n\n &__veil {\n position: absolute;\n inset: 0;\n background: rgba(15, 15, 15, 0.68);\n }\n\n &__content {\n position: relative;\n z-index: 1;\n padding: 140px 0;\n }\n\n &__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.15em;\n margin-bottom: 30px;\n }\n\n &__name {\n font-size: 180px;\n letter-spacing: -0.05em;\n line-height: 0.95;\n color: var(--at-neutral-0);\n }\n\n &__tagline {\n color: var(--at-neutral-100);\n letter-spacing: -0.03em;\n }\n\n &__meta {\n color: var(--at-neutral-0);\n letter-spacing: 0.15em;\n opacity: 0.6;\n }\n\n &__disk {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 220px;\n height: 220px;\n border-radius: 50%;\n border: 1px solid rgba(254, 254, 254, 0.35);\n }\n\n &__disk-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 140px;\n height: 140px;\n border-radius: 50%;\n background: var(--at-theme-primary);\n color: var(--at-neutral-0);\n transition: transform 0.4s ease;\n }\n\n @media #{$lg} {\n &__content {\n padding: 110px 0;\n }\n\n &__name {\n font-size: 140px;\n }\n\n &__disk {\n width: 180px;\n height: 180px;\n }\n\n &__disk-inner {\n width: 110px;\n height: 110px;\n }\n }\n\n @media #{$md} {\n &__content {\n padding: 90px 0;\n }\n\n &__name {\n font-size: 100px;\n }\n }\n\n @media #{$sm,$xs} {\n &__content {\n padding: 70px 0;\n }\n\n &__name {\n font-size: 72px;\n }\n\n &__tagline {\n font-size: 20px;\n }\n\n &__eyebrow {\n margin-bottom: 20px;\n }\n }\n\n @media #{$xs} {\n &__content {\n padding: 60px 0;\n }\n\n &__name {\n font-size: 56px;\n }\n\n &__tagline {\n font-size: 18px;\n }\n }\n}\n","@use '../../utils' as *;\n\n/*----------------------------------------*/\n/* Portfolio Details 5 — Swiper Fade + Cinematic\n/* Brand accent: var(--at-theme-primary) (#F0460E)\n/*----------------------------------------*/\n\n/* JS injects `.anim-zoomin-wrap` around every `.anim-zoomin` ![]()
.\n Image hosts use absolute-fill img inside aspect-ratio box. */\n.sec-4-portfolio-details-5__cell,\n.sec-7-portfolio-details-5__media {\n .anim-zoomin-wrap {\n position: absolute;\n inset: 0;\n overflow: hidden;\n }\n}\n\n/* =========================================================\n SEC 1 — Swiper fade hero (full-bleed)\n ========================================================= */\n.sec-1-portfolio-details-5 {\n position: relative;\n height: 820px;\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n\n &__slider {\n position: absolute;\n inset: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n\n .swiper-wrapper,\n .swiper-slide {\n height: 100%;\n }\n }\n\n &__slide {\n position: relative;\n overflow: hidden;\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n }\n\n &__veil {\n position: absolute;\n left: 0;\n right: 0;\n pointer-events: none;\n z-index: 1;\n\n &--top {\n top: 0;\n height: 100%;\n background: rgba(15, 15, 15, 0.35);\n }\n\n &--bottom {\n bottom: 0;\n height: 240px;\n background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0.55) 100%);\n }\n }\n\n &__content {\n position: absolute;\n left: 0;\n right: 0;\n top: 50%;\n transform: translateY(-58%);\n z-index: 2;\n }\n\n &__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.15em;\n }\n\n &__title {\n color: var(--at-neutral-0);\n letter-spacing: -0.05em;\n justify-content: center;\n\n sup {\n margin-left: 4px;\n line-height: 1;\n }\n }\n\n &__tagline {\n color: var(--at-neutral-100);\n letter-spacing: -0.03em;\n }\n\n /* Controls bar at the bottom of hero */\n &__controls {\n position: absolute;\n left: 0;\n right: 0;\n bottom: 40px;\n z-index: 3;\n }\n\n &__counter {\n display: inline-flex;\n align-items: baseline;\n gap: 6px;\n color: var(--at-neutral-0);\n }\n\n &__counter-num {\n font-size: 48px;\n line-height: 1;\n letter-spacing: -0.03em;\n }\n\n &__counter-total {\n font-size: 18px;\n opacity: 0.65;\n letter-spacing: -0.02em;\n }\n\n &__pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 12px;\n\n /* Swiper bullets injected here */\n .swiper-pagination-bullet {\n width: 60px;\n height: 3px;\n border-radius: 2px;\n background: var(--at-neutral-0);\n opacity: 0.3;\n transition: background 0.3s ease, opacity 0.3s ease;\n }\n\n .swiper-pagination-bullet-active {\n background: var(--at-theme-primary);\n opacity: 1;\n }\n }\n\n &__nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n border: 1px solid rgba(254, 254, 254, 0.4);\n background: transparent;\n color: var(--at-neutral-0);\n cursor: pointer;\n transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;\n\n &:hover {\n transform: translateY(-2px);\n }\n\n &--next {\n background: var(--at-theme-primary);\n border-color: var(--at-theme-primary);\n\n &:hover {\n background: var(--at-neutral-0);\n color: var(--at-theme-primary);\n border-color: var(--at-neutral-0);\n }\n }\n\n &--prev:hover {\n background: var(--at-neutral-0);\n color: var(--at-neutral-950);\n border-color: var(--at-neutral-0);\n }\n }\n\n @media #{$lg} {\n height: 720px;\n }\n\n @media #{$md} {\n height: 620px;\n\n &__controls {\n bottom: 30px;\n }\n\n &__counter-num {\n font-size: 40px;\n }\n\n &__nav {\n width: 48px;\n height: 48px;\n }\n }\n\n @media #{$sm,$xs} {\n height: 560px;\n\n &__content {\n transform: translateY(-50%);\n }\n\n &__controls {\n bottom: 24px;\n }\n\n &__counter-num {\n font-size: 32px;\n }\n\n &__counter-total {\n font-size: 14px;\n }\n\n &__nav {\n width: 44px;\n height: 44px;\n }\n }\n\n @media #{$xs} {\n height: 520px;\n\n &__title {\n font-size: 60px !important;\n }\n }\n}\n\n/* =========================================================\n SEC 2 — Project brief strip\n ========================================================= */\n.sec-2-portfolio-details-5 {\n background: var(--at-neutral-0);\n\n &__meta-row {\n border-top: 1px solid var(--at-neutral-100);\n border-bottom: 1px solid var(--at-neutral-100);\n margin: 0;\n }\n\n &__meta-cell {\n padding: 24px 24px;\n position: relative;\n\n & + & {\n border-left: 1px solid var(--at-neutral-100);\n }\n }\n\n &__lead {\n font-size: 30px;\n line-height: 1.4;\n letter-spacing: -0.04em;\n }\n\n &__chips {\n gap: 10px;\n }\n\n &__chip {\n padding: 10px 20px;\n background: var(--at-neutral-50);\n color: var(--at-neutral-900);\n border-radius: 25px;\n letter-spacing: 0.05em;\n }\n\n @media #{$md} {\n padding-top: 60px;\n padding-bottom: 70px;\n\n &__meta-cell {\n padding: 18px 18px;\n\n &:nth-child(3) {\n border-left: 0;\n border-top: 1px solid var(--at-neutral-100);\n }\n &:nth-child(4) {\n border-top: 1px solid var(--at-neutral-100);\n }\n }\n\n &__lead {\n font-size: 26px;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 50px;\n padding-bottom: 60px;\n\n &__meta-cell {\n padding: 16px 12px;\n\n &:nth-child(2) {\n border-left: 1px solid var(--at-neutral-100);\n }\n\n &:nth-child(3),\n &:nth-child(4) {\n border-top: 1px solid var(--at-neutral-100);\n }\n\n &:nth-child(4) {\n border-left: 1px solid var(--at-neutral-100);\n }\n }\n\n &__lead {\n font-size: 22px;\n margin-top: 50px !important;\n margin-bottom: 50px !important;\n }\n }\n}\n\n/* =========================================================\n SEC 3 — Services + Stats (2-col)\n ========================================================= */\n.sec-3-portfolio-details-5 {\n background: var(--at-neutral-50);\n\n &__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n }\n\n &__heading {\n font-size: 48px;\n letter-spacing: -0.05em;\n line-height: 1.15;\n }\n\n &__intro {\n line-height: 1.6;\n letter-spacing: -0.02em;\n }\n\n &__services {\n padding: 0;\n }\n\n &__service {\n display: flex;\n align-items: baseline;\n gap: 24px;\n padding: 18px 0;\n border-top: 1px solid var(--at-neutral-200);\n\n &:last-child {\n border-bottom: 1px solid var(--at-neutral-200);\n }\n }\n\n &__service-num {\n color: var(--at-theme-primary);\n flex: 0 0 60px;\n }\n\n &__service-title {\n letter-spacing: -0.03em;\n }\n\n &__stats {\n padding: 0;\n }\n\n &__stat {\n padding: 24px 0;\n border-top: 1px solid var(--at-neutral-950);\n\n &:last-child {\n border-bottom: 1px solid var(--at-neutral-950);\n }\n }\n\n &__stat-num {\n font-size: 88px;\n letter-spacing: -0.05em;\n color: var(--at-theme-primary);\n margin-bottom: 16px;\n }\n\n &__stat-desc {\n line-height: 1.5;\n letter-spacing: -0.02em;\n }\n\n @media #{$lg} {\n &__heading {\n font-size: 40px;\n }\n\n &__stat-num {\n font-size: 72px;\n }\n }\n\n @media #{$md} {\n padding-top: 70px;\n padding-bottom: 70px;\n\n &__heading {\n font-size: 36px;\n }\n\n &__stat-num {\n font-size: 64px;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__heading {\n font-size: 30px;\n }\n\n &__stat-num {\n font-size: 56px;\n }\n }\n\n @media #{$xs} {\n &__heading {\n font-size: 26px;\n }\n\n &__service {\n gap: 16px;\n padding: 14px 0;\n }\n\n &__service-num {\n flex: 0 0 40px;\n }\n\n &__stat-num {\n font-size: 48px;\n }\n }\n}\n\n/* =========================================================\n SEC 4 — Image grid asymmetric (magazine)\n ========================================================= */\n.sec-4-portfolio-details-5 {\n background: var(--at-neutral-0);\n\n &__row {\n display: grid;\n gap: 20px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n &--a {\n grid-template-columns: 1fr 2fr;\n }\n\n &--b {\n grid-template-columns: 2fr 1fr;\n }\n }\n\n &__cell {\n position: relative;\n margin: 0;\n aspect-ratio: 7 / 5;\n overflow: hidden;\n border-radius: 6px;\n background: var(--at-neutral-100);\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n\n &:hover img {\n transform: scale(1.05);\n }\n }\n\n @media #{$md} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__row {\n gap: 16px;\n margin-bottom: 16px;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 50px;\n padding-bottom: 50px;\n\n &__row {\n grid-template-columns: 1fr !important;\n gap: 12px;\n margin-bottom: 12px;\n }\n\n &__cell {\n aspect-ratio: 4 / 3;\n }\n }\n}\n\n/* =========================================================\n SEC 5 — Vertical timeline alternating L/R\n ========================================================= */\n.sec-5-portfolio-details-5 {\n background: var(--at-neutral-0);\n\n &__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n }\n\n &__heading {\n font-size: 54px;\n letter-spacing: -0.05em;\n line-height: 1.15;\n }\n\n &__timeline {\n position: relative;\n padding: 30px 0;\n\n /* Center vertical line (desktop only) */\n &::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n width: 1px;\n background: var(--at-neutral-200);\n transform: translateX(-50%);\n }\n }\n\n &__step {\n position: relative;\n width: 50%;\n padding-bottom: 70px;\n\n &:last-child {\n padding-bottom: 0;\n }\n\n &--left {\n padding-right: 60px;\n text-align: right;\n }\n\n &--right {\n margin-left: 50%;\n padding-left: 60px;\n text-align: left;\n }\n }\n\n &__step-dot {\n position: absolute;\n top: 8px;\n width: 14px;\n height: 14px;\n background: var(--at-theme-primary);\n border-radius: 50%;\n border: 3px solid var(--at-neutral-0);\n box-shadow: 0 0 0 1px var(--at-neutral-200);\n z-index: 1;\n }\n\n &__step--left &__step-dot {\n right: -7px;\n }\n\n &__step--right &__step-dot {\n left: -7px;\n }\n\n &__step-body {\n max-width: 580px;\n }\n\n &__step--left &__step-body {\n margin-left: auto;\n }\n\n &__step-num {\n font-size: 64px;\n color: var(--at-theme-primary);\n letter-spacing: -0.04em;\n }\n\n &__step-title {\n letter-spacing: -0.03em;\n }\n\n &__step-desc {\n line-height: 1.55;\n letter-spacing: -0.02em;\n }\n\n @media #{$lg} {\n &__heading {\n font-size: 44px;\n }\n\n &__step-num {\n font-size: 56px;\n }\n }\n\n @media #{$md} {\n padding-top: 80px;\n padding-bottom: 80px;\n\n &__heading {\n font-size: 38px;\n }\n\n &__step-num {\n font-size: 48px;\n }\n\n &__timeline {\n &::before {\n left: 20px;\n transform: none;\n }\n }\n\n &__step {\n width: 100%;\n margin-left: 0 !important;\n padding-left: 60px !important;\n padding-right: 0 !important;\n text-align: left !important;\n\n &-dot {\n left: 14px !important;\n right: auto !important;\n }\n\n &-body {\n margin-left: 0 !important;\n max-width: none;\n }\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__heading {\n font-size: 30px;\n }\n\n &__step-num {\n font-size: 40px;\n }\n\n &__timeline {\n &::before {\n left: 14px;\n transform: none;\n }\n }\n\n &__step {\n width: 100%;\n margin-left: 0 !important;\n padding-left: 44px !important;\n padding-right: 0 !important;\n padding-bottom: 50px;\n text-align: left !important;\n\n &-dot {\n left: 8px !important;\n right: auto !important;\n }\n\n &-body {\n margin-left: 0 !important;\n max-width: none;\n }\n }\n }\n\n @media #{$xs} {\n &__heading {\n font-size: 26px;\n }\n }\n}\n\n/* =========================================================\n SEC 6 — Awards & Recognition (dark)\n ========================================================= */\n.sec-6-portfolio-details-5 {\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n\n &__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n }\n\n &__heading {\n color: var(--at-neutral-0);\n font-size: 54px;\n letter-spacing: -0.05em;\n line-height: 1.15;\n }\n\n &__list {\n border-top: 1px solid var(--at-neutral-700);\n }\n\n &__row {\n border-bottom: 1px solid var(--at-neutral-700);\n }\n\n &__link {\n display: grid;\n grid-template-columns: 120px 1fr 320px 60px;\n align-items: center;\n gap: 24px;\n padding: 28px 0;\n color: var(--at-neutral-0);\n text-decoration: none;\n transition: padding 0.35s ease, background-color 0.35s ease;\n\n &:hover {\n color: var(--at-neutral-0);\n padding-left: 16px;\n padding-right: 16px;\n background: rgba(254, 254, 254, 0.03);\n\n .sec-6-portfolio-details-5__arrow {\n transform: translate(4px, -4px);\n }\n }\n }\n\n &__year {\n color: var(--at-neutral-0);\n opacity: 0.6;\n letter-spacing: 0.1em;\n }\n\n &__title {\n font-size: 32px;\n letter-spacing: -0.04em;\n }\n\n &__org {\n color: var(--at-neutral-0);\n opacity: 0.75;\n letter-spacing: -0.02em;\n text-align: right;\n }\n\n &__arrow {\n color: var(--at-theme-primary);\n font-size: 22px;\n text-align: right;\n transition: transform 0.35s ease;\n display: inline-block;\n }\n\n @media #{$lg} {\n &__heading {\n font-size: 44px;\n }\n\n &__title {\n font-size: 28px;\n }\n\n &__link {\n grid-template-columns: 100px 1fr 220px 50px;\n }\n }\n\n @media #{$md} {\n padding-top: 70px;\n padding-bottom: 70px;\n\n &__heading {\n font-size: 38px;\n }\n\n &__title {\n font-size: 24px;\n }\n\n &__link {\n grid-template-columns: 80px 1fr auto 40px;\n gap: 16px;\n }\n\n &__org {\n font-size: 14px;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__heading {\n font-size: 30px;\n }\n\n &__title {\n font-size: 20px;\n }\n\n &__link {\n grid-template-columns: 70px 1fr 30px;\n gap: 12px;\n padding: 20px 0;\n }\n\n &__org {\n display: none;\n }\n\n &__arrow {\n font-size: 18px;\n }\n }\n\n @media #{$xs} {\n &__heading {\n font-size: 26px;\n }\n\n &__title {\n font-size: 18px;\n }\n\n &__link {\n grid-template-columns: 56px 1fr 24px;\n gap: 10px;\n }\n }\n}\n\n/* =========================================================\n SEC 7 — Next project side-by-side (light)\n ========================================================= */\n.sec-7-portfolio-details-5 {\n background: var(--at-neutral-0);\n\n &__group {\n text-decoration: none;\n color: inherit;\n display: block;\n\n &:hover {\n color: inherit;\n\n .sec-7-portfolio-details-5__cta span {\n transform: translate(4px, -4px);\n }\n }\n }\n\n &__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.15em;\n }\n\n &__name {\n font-size: 200px;\n line-height: 0.95;\n letter-spacing: -0.05em;\n }\n\n &__tagline {\n letter-spacing: -0.03em;\n line-height: 1.4;\n }\n\n &__meta {\n letter-spacing: 0.1em;\n }\n\n &__cta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n position: relative;\n padding-bottom: 6px;\n border-bottom: 1px solid var(--at-neutral-950);\n\n span {\n display: inline-block;\n transition: transform 0.35s ease;\n }\n }\n\n &__media {\n position: relative;\n width: 100%;\n aspect-ratio: 4 / 5;\n overflow: hidden;\n border-radius: 8px;\n background: var(--at-neutral-100);\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n\n &:hover img {\n transform: scale(1.04);\n }\n }\n\n @media #{$lg} {\n &__name {\n font-size: 140px;\n }\n }\n\n @media #{$md} {\n padding-top: 80px;\n padding-bottom: 80px;\n\n &__name {\n font-size: 110px;\n }\n\n &__media {\n aspect-ratio: 4 / 5;\n max-width: 500px;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 60px;\n padding-bottom: 80px;\n\n &__name {\n font-size: 80px;\n }\n\n &__tagline {\n font-size: 18px;\n }\n\n &__media {\n aspect-ratio: 4 / 5;\n margin-top: 30px;\n }\n }\n\n @media #{$xs} {\n &__name {\n font-size: 60px;\n }\n }\n}\n","@use '../../utils' as *;\n\n/*----------------------------------------*/\n/* Portfolio Details 6 — Editorial + Marquee + Accordion\n/* Brand accent: var(--at-theme-primary)\n/*----------------------------------------*/\n\n/* JS injects `.anim-zoomin-wrap` — fit aspect-ratio hosts */\n.sec-2-portfolio-details-6__media,\n.sec-3-portfolio-details-6__cell,\n.sec-5-portfolio-details-6__media,\n.sec-7-portfolio-details-6__media {\n .anim-zoomin-wrap {\n position: absolute;\n inset: 0;\n overflow: hidden;\n }\n}\n\n/* =========================================================\n SEC 1 — Hero + marquee strip\n ========================================================= */\n.sec-1-portfolio-details-6 {\n background: var(--at-neutral-50);\n\n &__byline {\n letter-spacing: 0.15em;\n }\n\n &__title {\n font-size: 240px;\n letter-spacing: -0.05em;\n line-height: 1;\n justify-content: center;\n\n sup {\n margin-left: 4px;\n line-height: 1;\n }\n }\n\n &__tagline {\n letter-spacing: -0.03em;\n }\n\n &__credits {\n margin: 0;\n }\n\n &__credit-cell {\n padding: 22px 24px;\n position: relative;\n\n & + & {\n border-left: 1px solid var(--at-neutral-200);\n }\n }\n\n /* Marquee strip */\n &__marquee {\n background: var(--at-neutral-950);\n overflow: hidden;\n padding: 24px 0;\n }\n\n &__marquee-track {\n display: inline-flex;\n white-space: nowrap;\n animation: pd6-marquee 28s linear infinite;\n will-change: transform;\n }\n\n &__marquee-text {\n display: inline-block;\n color: var(--at-neutral-0);\n font-family: var(--at-ff-heading);\n font-size: 44px;\n font-weight: 500;\n line-height: 1;\n letter-spacing: -0.02em;\n padding-right: 60px;\n flex-shrink: 0;\n }\n\n &__marquee-dot {\n color: var(--at-theme-primary);\n margin: 0 18px;\n font-size: 0.4em;\n vertical-align: middle;\n }\n\n @media (prefers-reduced-motion: reduce) {\n &__marquee-track {\n animation: none;\n }\n }\n\n @media #{$lg} {\n &__title {\n font-size: 180px;\n }\n }\n\n @media #{$md} {\n &__title {\n font-size: 140px;\n }\n\n &__marquee-text {\n font-size: 36px;\n }\n\n &__credit-cell {\n padding: 18px 16px;\n\n &:nth-child(3) {\n border-left: 0;\n border-top: 1px solid var(--at-neutral-200);\n }\n &:nth-child(4) {\n border-top: 1px solid var(--at-neutral-200);\n }\n }\n }\n\n @media #{$sm,$xs} {\n &__title {\n font-size: 96px;\n }\n\n &__tagline {\n font-size: 22px !important;\n }\n\n &__marquee-text {\n font-size: 28px;\n }\n\n &__credit-cell {\n padding: 14px 12px;\n\n &:nth-child(2) {\n border-left: 1px solid var(--at-neutral-200);\n }\n &:nth-child(3),\n &:nth-child(4) {\n border-top: 1px solid var(--at-neutral-200);\n }\n &:nth-child(4) {\n border-left: 1px solid var(--at-neutral-200);\n }\n }\n }\n\n @media #{$xs} {\n &__title {\n font-size: 72px;\n }\n }\n}\n\n@keyframes pd6-marquee {\n from { transform: translateX(0); }\n to { transform: translateX(-33.3333%); }\n}\n\n/* =========================================================\n SEC 2 — Magazine 2-col + drop cap\n ========================================================= */\n.sec-2-portfolio-details-6 {\n background: var(--at-neutral-0);\n\n &__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n }\n\n &__lead {\n font-size: 18px;\n line-height: 1.65;\n letter-spacing: -0.01em;\n }\n\n &__dropcap {\n float: left;\n font-family: var(--at-ff-heading);\n font-size: 124px;\n font-weight: 500;\n line-height: 0.85;\n letter-spacing: -0.06em;\n color: var(--at-theme-primary);\n margin: 6px 16px 0 0;\n padding: 0;\n }\n\n &__two-col {\n column-count: 2;\n column-gap: 32px;\n\n p {\n font-size: 16px;\n line-height: 1.65;\n letter-spacing: -0.01em;\n break-inside: avoid-column;\n }\n\n p + p {\n margin-top: 18px;\n }\n }\n\n &__pullout {\n letter-spacing: -0.02em;\n }\n\n &__media {\n position: relative;\n width: 100%;\n aspect-ratio: 4 / 5;\n overflow: hidden;\n border-radius: 8px;\n background: var(--at-neutral-100);\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n\n &:hover img {\n transform: scale(1.04);\n }\n }\n\n @media #{$md} {\n padding-top: 70px;\n padding-bottom: 70px;\n\n &__dropcap {\n font-size: 96px;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__dropcap {\n font-size: 80px;\n margin-right: 12px;\n }\n\n &__two-col {\n column-count: 1;\n column-gap: 0;\n }\n }\n\n @media #{$xs} {\n &__dropcap {\n font-size: 64px;\n }\n }\n}\n\n/* =========================================================\n SEC 3 — Horizontal scroll Swiper gallery\n ========================================================= */\n.sec-3-portfolio-details-6 {\n background: var(--at-neutral-0);\n\n &__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n }\n\n &__heading {\n font-size: 42px;\n letter-spacing: -0.05em;\n line-height: 1.15;\n }\n\n &__hint {\n letter-spacing: 0.1em;\n }\n\n &__slider {\n padding-left: max(calc((100vw - 1320px) / 2 + 12px), 12px);\n padding-right: max(calc((100vw - 1320px) / 2 + 12px), 12px);\n cursor: grab;\n\n &:active {\n cursor: grabbing;\n }\n\n @media (min-width: 1400px) {\n padding-left: max(calc((100vw - 1320px) / 2), 12px);\n padding-right: max(calc((100vw - 1320px) / 2), 12px);\n }\n }\n\n &__slide {\n width: 60%;\n }\n\n &__cell {\n position: relative;\n width: 100%;\n aspect-ratio: 7 / 5;\n overflow: hidden;\n border-radius: 6px;\n background: var(--at-neutral-100);\n margin: 0;\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n\n &:hover img {\n transform: scale(1.04);\n }\n }\n\n &__caption {\n letter-spacing: -0.02em;\n }\n\n &__caption-num {\n margin-right: 8px;\n }\n\n &__nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n border: 1px solid var(--at-neutral-900);\n background: transparent;\n color: var(--at-neutral-900);\n cursor: pointer;\n transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;\n\n &:hover {\n transform: translateY(-2px);\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n }\n\n &--next {\n background: var(--at-neutral-950);\n color: var(--at-neutral-0);\n\n &:hover {\n background: var(--at-theme-primary);\n border-color: var(--at-theme-primary);\n }\n }\n }\n\n .mt-40 {\n margin-top: 40px;\n }\n\n @media #{$lg} {\n &__heading {\n font-size: 36px;\n }\n\n &__slide {\n width: 70%;\n }\n }\n\n @media #{$md} {\n padding-top: 70px;\n padding-bottom: 70px;\n\n &__heading {\n font-size: 30px;\n }\n\n &__slide {\n width: 80%;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__heading {\n font-size: 26px;\n }\n\n &__slide {\n width: 90%;\n }\n\n &__nav {\n width: 44px;\n height: 44px;\n }\n }\n}\n\n/* =========================================================\n SEC 4 — Stats grid (4 inline with dot dividers)\n ========================================================= */\n.sec-4-portfolio-details-6 {\n background: var(--at-neutral-50);\n\n &__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n }\n\n &__heading {\n font-size: 42px;\n letter-spacing: -0.05em;\n line-height: 1.15;\n }\n\n &__stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n align-items: start;\n position: relative;\n }\n\n &__stat {\n text-align: center;\n position: relative;\n\n &:not(:last-child)::after {\n content: '';\n position: absolute;\n top: 50px;\n right: -12px;\n width: 6px;\n height: 6px;\n background: var(--at-neutral-950);\n border-radius: 50%;\n }\n }\n\n &__stat-num {\n font-size: 84px;\n color: var(--at-theme-primary);\n letter-spacing: -0.05em;\n margin-bottom: 16px;\n }\n\n &__stat-label {\n line-height: 1.4;\n letter-spacing: -0.02em;\n }\n\n @media #{$lg} {\n &__heading {\n font-size: 36px;\n }\n\n &__stat-num {\n font-size: 64px;\n }\n }\n\n @media #{$md} {\n padding-top: 70px;\n padding-bottom: 70px;\n\n &__stats {\n grid-template-columns: repeat(2, 1fr);\n gap: 40px;\n }\n\n &__stat:not(:last-child)::after {\n display: none;\n }\n\n &__stat-num {\n font-size: 64px;\n }\n\n &__heading {\n font-size: 30px;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__stats {\n grid-template-columns: repeat(2, 1fr);\n gap: 30px;\n }\n\n &__stat:not(:last-child)::after {\n display: none;\n }\n\n &__stat-num {\n font-size: 52px;\n }\n\n &__heading {\n font-size: 26px;\n }\n }\n}\n\n/* =========================================================\n SEC 5 — Quote + portrait side-by-side\n ========================================================= */\n.sec-5-portfolio-details-6 {\n background: var(--at-neutral-0);\n\n &__media {\n position: relative;\n width: 100%;\n aspect-ratio: 5 / 4;\n overflow: hidden;\n border-radius: 6px;\n background: var(--at-neutral-100);\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n\n &:hover img {\n transform: scale(1.04);\n }\n }\n\n &__content {\n padding-left: 20px;\n }\n\n &__mark {\n display: inline-block;\n font-family: var(--at-ff-heading);\n font-size: 140px;\n line-height: 0.8;\n color: var(--at-theme-primary);\n margin-bottom: -10px;\n }\n\n &__quote {\n font-size: 28px;\n line-height: 1.5;\n letter-spacing: -0.03em;\n padding: 0;\n border: 0;\n }\n\n &__divider {\n width: 60px;\n height: 1px;\n background: var(--at-neutral-950);\n }\n\n &__role {\n letter-spacing: 0.1em;\n }\n\n @media #{$lg} {\n &__quote {\n font-size: 24px;\n }\n\n &__mark {\n font-size: 120px;\n }\n }\n\n @media #{$md} {\n padding-top: 70px;\n padding-bottom: 70px;\n\n &__content {\n padding-left: 0;\n }\n\n &__quote {\n font-size: 22px;\n }\n\n &__mark {\n font-size: 100px;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__content {\n padding-left: 0;\n }\n\n &__quote {\n font-size: 20px;\n }\n\n &__mark {\n font-size: 80px;\n }\n }\n}\n\n/* =========================================================\n SEC 6 — Accordion FAQ \"Project details\"\n ========================================================= */\n.sec-6-portfolio-details-6 {\n background: var(--at-neutral-0);\n\n &__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.1em;\n }\n\n &__heading {\n font-size: 48px;\n letter-spacing: -0.05em;\n line-height: 1.15;\n }\n\n &__list {\n border-top: 1px solid var(--at-neutral-200);\n }\n\n &__row {\n border-bottom: 1px solid var(--at-neutral-200);\n }\n\n &__item {\n /* Native
element */\n &[open] {\n .sec-6-portfolio-details-6__icon-bar--v {\n transform: scaleY(0);\n }\n\n .sec-6-portfolio-details-6__icon-bar:not(.sec-6-portfolio-details-6__icon-bar--v) {\n background: var(--at-theme-primary);\n }\n\n .sec-6-portfolio-details-6__q {\n color: var(--at-theme-primary);\n }\n }\n }\n\n &__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding: 26px 0;\n cursor: pointer;\n list-style: none;\n transition: padding 0.3s ease;\n\n /* Remove default arrow on details/summary */\n &::-webkit-details-marker {\n display: none;\n }\n\n &::marker {\n display: none;\n content: '';\n }\n\n &:hover {\n padding-left: 12px;\n\n .sec-6-portfolio-details-6__q {\n color: var(--at-theme-primary);\n }\n }\n }\n\n &__q {\n font-size: 24px;\n letter-spacing: -0.03em;\n transition: color 0.3s ease;\n }\n\n &__icon {\n position: relative;\n flex-shrink: 0;\n width: 22px;\n height: 22px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n &__icon-bar {\n position: absolute;\n background: var(--at-neutral-950);\n transition: transform 0.3s ease, background-color 0.3s ease;\n\n &:not(.sec-6-portfolio-details-6__icon-bar--v) {\n width: 22px;\n height: 2px;\n }\n\n &--v {\n width: 2px;\n height: 22px;\n }\n }\n\n &__body {\n padding: 0 0 30px 0;\n max-width: 1100px;\n\n p {\n line-height: 1.65;\n letter-spacing: -0.01em;\n }\n }\n\n @media #{$lg} {\n &__heading {\n font-size: 40px;\n }\n\n &__q {\n font-size: 22px;\n }\n }\n\n @media #{$md} {\n padding-top: 70px;\n padding-bottom: 70px;\n\n &__heading {\n font-size: 34px;\n }\n\n &__q {\n font-size: 20px;\n }\n\n &__head {\n padding: 22px 0;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__heading {\n font-size: 28px;\n }\n\n &__q {\n font-size: 18px;\n }\n\n &__head {\n padding: 18px 0;\n gap: 16px;\n }\n\n &__head:hover {\n padding-left: 0;\n }\n }\n\n @media #{$xs} {\n &__heading {\n font-size: 24px;\n }\n\n &__q {\n font-size: 16px;\n }\n\n &__icon {\n width: 18px;\n height: 18px;\n }\n\n &__icon-bar {\n &:not(.sec-6-portfolio-details-6__icon-bar--v) {\n width: 18px;\n }\n &--v {\n height: 18px;\n }\n }\n }\n}\n\n/* =========================================================\n SEC 7 — Next project compact dark card\n ========================================================= */\n.sec-7-portfolio-details-6 {\n background: var(--at-neutral-0);\n\n &__eyebrow {\n color: var(--at-theme-primary);\n letter-spacing: 0.15em;\n }\n\n &__heading {\n color: var(--at-neutral-950);\n font-size: 36px;\n letter-spacing: -0.04em;\n }\n\n &__card {\n display: block;\n text-decoration: none;\n color: var(--at-neutral-0);\n background: var(--at-neutral-950);\n border-radius: 12px;\n overflow: hidden;\n transition: transform 0.4s ease;\n\n &:hover {\n color: var(--at-neutral-0);\n transform: translateY(-4px);\n\n .sec-7-portfolio-details-6__media img {\n transform: scale(1.04);\n }\n\n .sec-7-portfolio-details-6__cta span {\n transform: translate(3px, -3px);\n }\n }\n }\n\n &__media {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 560px;\n overflow: hidden;\n background: var(--at-neutral-800);\n\n img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n }\n }\n\n &__content {\n padding: 60px;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n &__num {\n color: var(--at-theme-primary);\n letter-spacing: 0.15em;\n }\n\n &__name {\n color: var(--at-neutral-0);\n font-size: 140px;\n letter-spacing: -0.05em;\n line-height: 0.95;\n }\n\n &__tagline {\n color: var(--at-neutral-100);\n letter-spacing: -0.03em;\n line-height: 1.4;\n }\n\n &__meta {\n color: var(--at-neutral-300);\n letter-spacing: 0.1em;\n }\n\n &__tags {\n gap: 8px;\n }\n\n &__tag {\n padding: 8px 16px;\n border: 1px solid var(--at-neutral-700);\n border-radius: 25px;\n color: var(--at-neutral-0);\n letter-spacing: 0.05em;\n }\n\n &__cta {\n color: var(--at-theme-primary);\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding-bottom: 6px;\n border-bottom: 1px solid var(--at-theme-primary);\n align-self: flex-start;\n\n span {\n display: inline-block;\n transition: transform 0.35s ease;\n }\n }\n\n @media #{$lg} {\n &__name {\n font-size: 96px;\n }\n\n &__content {\n padding: 50px 40px;\n }\n }\n\n @media #{$md} {\n padding-top: 70px;\n padding-bottom: 70px;\n\n &__heading {\n font-size: 30px;\n }\n\n &__name {\n font-size: 84px;\n }\n\n &__media {\n min-height: 380px;\n aspect-ratio: 4 / 3;\n }\n\n &__content {\n padding: 40px 32px;\n }\n }\n\n @media #{$sm,$xs} {\n padding-top: 60px;\n padding-bottom: 60px;\n\n &__heading {\n font-size: 26px;\n }\n\n &__name {\n font-size: 64px;\n }\n\n &__media {\n min-height: 300px;\n aspect-ratio: 4 / 3;\n }\n\n &__content {\n padding: 36px 24px;\n }\n\n &__tagline {\n font-size: 18px;\n }\n }\n\n @media #{$xs} {\n &__name {\n font-size: 48px;\n }\n }\n}\n","@use '../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 2.3 Back to top\r\n/*----------------------------------------*/\r\n\r\n.back-to-top-wrapper {\r\n\tposition: fixed;\r\n\tright: 50px;\r\n\tbottom: 0;\r\n\theight: 44px;\r\n\twidth: 44px;\r\n\tcursor: pointer;\r\n\tdisplay: block;\r\n\tborder-radius: 50%;\r\n\tz-index: 99;\r\n\topacity: 0;\r\n\tvisibility: hidden;\r\n\t@extend %transition;\r\n\r\n\t@media #{$xs} {\r\n\t\tright: 20px;\r\n\t\tbottom: 20px;\r\n\t}\r\n\r\n\t&.back-to-top-btn-show {\r\n\t\tvisibility: visible;\r\n\t\topacity: 1;\r\n\t\tbottom: 50px;\r\n\t}\r\n}\r\n\r\n.back-to-top-btn {\r\n\tdisplay: inline-block;\r\n\twidth: 44px;\r\n\theight: 44px;\r\n\tline-height: 44px;\r\n\ttext-align: center;\r\n\tbackground: var(--at-common-white);\r\n\tbox-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3);\r\n\tcolor: var(--at-common-black);\r\n\tborder-radius: 50%;\r\n\t@include at-transition(all, .3s);\r\n\r\n\t& svg {\r\n\t\t@include at-transform(translateY(-2px));\r\n\t}\r\n\r\n\t&:hover {\r\n\t\t@include at-transform(translateY(-4px));\r\n\t}\r\n\r\n}","@use '../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 2.5 Buttons\r\n/*----------------------------------------*/\r\n\r\n.at-btn {\r\n\tgap: 8px;\r\n\tline-height: 1;\r\n\tfont-weight: 600;\r\n\tfont-size: 16px;\r\n\tletter-spacing: -0.05em;\r\n\tpadding: 17px 25px;\r\n\ttext-transform: capitalize;\r\n\tcolor: #FEFEFE;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tbackground-color: #1D1D1D;\r\n\t;\r\n\tborder-radius: 50px;\r\n\r\n\t&:hover {\r\n\t\tcolor: #FEFEFE;\r\n\r\n\t\t& span {\r\n\t\t\t& span {\r\n\t\t\t\t&.text-1 {\r\n\t\t\t\t\t-webkit-transform: translateY(-150%);\r\n\t\t\t\t\ttransform: translateY(-150%);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.text-2 {\r\n\t\t\t\t\ttop: 50%;\r\n\t\t\t\t\t-webkit-transform: translateY(-50%);\r\n\t\t\t\t\ttransform: translateY(-50%);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t& i {\r\n\t\t\t& svg:first-child {\r\n\t\t\t\ttransform: translate(16px, -16px);\r\n\t\t\t}\r\n\r\n\t\t\t& svg:last-child {\r\n\t\t\t\topacity: 1;\r\n\t\t\t\tvisibility: visible;\r\n\t\t\t\ttransform: translate(13px, -13px);\r\n\t\t\t}\r\n\r\n\t\t\t&.icon-arrow-right {\r\n\t\t\t\t& svg:first-child {\r\n\t\t\t\t\ttransform: translate(16px, 0);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t& svg:last-child {\r\n\t\t\t\t\ttransform: translate(16px, 0);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t&.icon-arrow-up-left {\r\n\t\t\t\t& svg:first-child {\r\n\t\t\t\t\ttransform: translate(-16px, -16px);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t& svg:last-child {\r\n\t\t\t\t\ttransform: translate(-16px, -16px);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t& span {\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n\t\toverflow: hidden;\r\n\t\tdisplay: inline-block;\r\n\r\n\t\t& span {\r\n\t\t\t&.text-1 {\r\n\t\t\t\tposition: relative;\r\n\t\t\t\tdisplay: block;\r\n\t\t\t\ttransition: 0.3s;\r\n\t\t\t}\r\n\r\n\t\t\t&.text-2 {\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\ttop: 100%;\r\n\t\t\t\tdisplay: block;\r\n\t\t\t\ttransition: 0.3s;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t& i {\r\n\t\tposition: relative;\r\n\t\toverflow: hidden;\r\n\t\twidth: 16px;\r\n\t\theight: 16px;\r\n\t\tdisplay: inline-flex;\r\n\t\tmargin-left: 4px;\r\n\r\n\t\t& svg {\r\n\t\t\ttransform: translateY(-2px);\r\n\t\t\tposition: absolute;\r\n\t\t\tbottom: -1px;\r\n\t\t\tleft: 1px;\r\n\t\t\ttransition: all 0.2s ease-out;\r\n\r\n\t\t\t&:last-child {\r\n\t\t\t\tleft: -12px;\r\n\t\t\t\tbottom: -12px;\r\n\t\t\t\ttransform: translate(0, 0);\r\n\t\t\t\topacity: 0;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&.icon-arrow-right {\r\n\t\t\t& svg:last-child {\r\n\t\t\t\tleft: -16px;\r\n\t\t\t\tbottom: 0;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&.icon-arrow-up-left {\r\n\t\t\t& svg:last-child {\r\n\t\t\t\tleft: 16px;\r\n\t\t\t\tbottom: -16px;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&.btn-sm {\r\n\t\tpadding: 10px 20px;\r\n\t}\r\n\r\n\t&.filter-btn {\r\n\t\tborder-radius: 100px;\r\n\t\tborder: 1px solid var(--at-neutral-100, #DFDFDF);\r\n\t\tbackground: var(--at-neutral-0, #FEFEFE);\r\n\t\tcolor: var(--at-neutral-900);\r\n\t}\r\n\r\n\t&.active {\r\n\t\tbackground: var(--at-neutral-900);\r\n\t\tborder-color: var(--at-neutral-900);\r\n\t\tcolor: var(--at-neutral-0);\r\n\t}\r\n\r\n\t&-border {\r\n\r\n\t\t&-white {\r\n\t\t\tborder: 1px solid rgba(255, 255, 255, 0.3);\r\n\t\t\tbackground: rgba(255, 255, 255, 0.25);\r\n\t\t}\r\n\t}\r\n\r\n\t&-group {\r\n\t\tdisplay: flex;\r\n\t\twidth: fit-content;\r\n\r\n\t\t>*:nth-child(1) {\r\n\t\t\ttransform: scale3d(0.5, 0.5, 1);\r\n\t\t\tmargin-inline-end: -52px;\r\n\t\t}\r\n\r\n\t\t>*:nth-child(2) {\r\n\t\t\ttransform: scale3d(1, 1, 1);\r\n\t\t}\r\n\r\n\t\t>*:nth-child(3) {\r\n\t\t\ttransform: scale3d(1, 1, 1);\r\n\t\t\tmargin-inline-start: 0;\r\n\t\t}\r\n\r\n\t\t&:hover {\r\n\t\t\t>*:nth-child(1) {\r\n\t\t\t\ttransform: scale3d(1, 1, 1);\r\n\t\t\t\tmargin-inline-end: 0;\r\n\t\t\t\tbackground: #1D1D1D;\r\n\t\t\t}\r\n\r\n\t\t\t>*:nth-child(2) {\r\n\t\t\t\ttransform: scale3d(1, 1, 1);\r\n\t\t\t\tbackground: #1D1D1D;\r\n\t\t\t}\r\n\r\n\t\t\t>*:nth-child(3) {\r\n\t\t\t\ttransform: scale3d(0.5, 0.5, 1);\r\n\t\t\t\tmargin-inline-start: -52px;\r\n\t\t\t\tbackground: #1D1D1D;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t& .at-btn-circle {\r\n\t\t\ttext-align: center;\r\n\t\t\twidth: 50px;\r\n\t\t\theight: 50px;\r\n\t\t\tfont-weight: 500;\r\n\t\t\tfont-size: 16px;\r\n\t\t\tline-height: 1.5;\r\n\t\t\tborder-radius: 100%;\r\n\t\t\tdisplay: flex;\r\n\t\t\tgap: 10px;\r\n\t\t\talign-items: center;\r\n\t\t\tjustify-content: center;\r\n\t\t\tbackground-color: #1D1D1D;\r\n\t\t\tcolor: #FEFEFE;\r\n\r\n\t\t\t& i {\r\n\t\t\t\ttransform: rotate(-45deg);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&-transparent {\r\n\t\t\t& .at-btn {\r\n\t\t\t\tbackground: #FEFEFE;\r\n\t\t\t\tborder: 1px solid rgba(38, 38, 38, 0.1);\r\n\t\t\t\tcolor: #1D1D1D;\r\n\t\t\t}\r\n\r\n\t\t\t& .at-btn-circle {\r\n\t\t\t\tbackground-color: #FEFEFE;\r\n\t\t\t\tcolor: #1D1D1D;\r\n\t\t\t\tborder: 1px solid rgba(38, 38, 38, 0.1);\r\n\t\t\t}\r\n\r\n\t\t\t&:hover {\r\n\t\t\t\t>*:nth-child(2) {\r\n\t\t\t\t\tbackground: #FEFEFE;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t>*:nth-child(1) {\r\n\t\t\t\t\tbackground: #FEFEFE;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t&-2 {\r\n\t\t\t\t& .at-btn {\r\n\t\t\t\t\tbackground: #fff5f3;\r\n\t\t\t\t\tborder: 1px solid rgba(38, 38, 38, 0.1);\r\n\t\t\t\t\tcolor: #1D1D1D;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t& .at-btn-circle {\r\n\t\t\t\t\tbackground-color: #fff5f3;\r\n\t\t\t\t\tcolor: #1D1D1D;\r\n\t\t\t\t\tborder: 1px solid rgba(38, 38, 38, 0.1);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&:hover {\r\n\t\t\t\t\t>*:nth-child(2) {\r\n\t\t\t\t\t\tbackground: #fff5f3;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t>*:nth-child(1) {\r\n\t\t\t\t\t\tbackground: #fff5f3;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&.btn-brand-1 {\r\n\t\t\t& .at-btn {\r\n\t\t\t\tbackground: #F0460E;\r\n\t\t\t\tborder: 1px solid #F0460E;\r\n\t\t\t\tcolor: #FEFEFE;\r\n\t\t\t}\r\n\r\n\t\t\t& .at-btn-circle {}\r\n\r\n\t\t\t& .at-btn-circle {\r\n\t\t\t\tbackground-color: #F0460E;\r\n\t\t\t\tcolor: #FEFEFE;\r\n\t\t\t\tborder: 1px solid #F0460E;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&.has-dot {\r\n\t\tposition: relative;\r\n\r\n\t\t&::before {\r\n\t\t\tcontent: '';\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 50%;\r\n\t\t\tleft: 0;\r\n\t\t\ttransform: translate(-50%, -50%);\r\n\t\t\twidth: 8px;\r\n\t\t\theight: 8px;\r\n\t\t\tbackground-color: #fff;\r\n\t\t\tborder-radius: 50%;\r\n\t\t\topacity: 50%;\r\n\t\t}\r\n\t}\r\n}","@use '../utils' as *;\r\n/*----------------------------------------*/\r\n/* 2.1 Animations\r\n/*----------------------------------------*/\r\n\r\n\r\n@include keyframes(rotate-infinite) {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n.rotate-infinite {\r\n -webkit-animation: rotate-infinite 15s linear infinite;\r\n animation: rotate-infinite 15s linear infinite;\r\n}\r\n\r\n@include keyframes(rotate-infinite-2) {\r\n 0% {\r\n transform: rotate(-0deg);\r\n }\r\n\r\n 100% {\r\n transform: rotate(-360deg);\r\n }\r\n}\r\n\r\n.rotate-infinite-2 {\r\n -webkit-animation: rotate-infinite-2 15s linear infinite;\r\n animation: rotate-infinite-2 15s linear infinite;\r\n}\r\n\r\n@keyframes animate-pulse {\r\n 0% {\r\n box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n 40% {\r\n box-shadow: 0 0 0 50px rgba(255, 109, 74, 0.0), 0 0 0 0 rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n 80% {\r\n box-shadow: 0 0 0 50px rgba(255, 109, 74, 0.0), 0 0 0 30px rgba(255, 109, 74, 0);\r\n }\r\n\r\n 100% {\r\n box-shadow: 0 0 0 0 rgba(255, 109, 74, 0.0), 0 0 0 30px rgba(255, 109, 74, 0);\r\n }\r\n}\r\n\r\n@keyframes arrowLineRotation {\r\n to {\r\n transform: rotate(180deg);\r\n }\r\n}\r\n\r\n@keyframes arrowLineRotationRev {\r\n to {\r\n transform: rotate(-180deg);\r\n }\r\n}\r\n\r\n.hover-up {\r\n transition: transform 0.2s ease-in-out;\r\n\r\n &:hover {\r\n transform: translateY(-3px);\r\n }\r\n}","@use '../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 2.10 Preloader\r\n/*----------------------------------------*/\r\n\r\n#preloader {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 1000;\r\n background-color: var(--at-theme-primary);\r\n}\r\n\r\n.preloader {\r\n width: 50px;\r\n height: 50px;\r\n display: inline-block;\r\n padding: 0px;\r\n text-align: left;\r\n box-sizing: border-box;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n margin-left: -25px;\r\n margin-top: -25px;\r\n\r\n}\r\n\r\n.preloader span {\r\n position: absolute;\r\n display: inline-block;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 100%;\r\n background: var(--at-common-white);\r\n animation: preloader 1.3s linear infinite;\r\n -webkit-animation: preloader 1.3s linear infinite;\r\n\r\n}\r\n\r\n.preloader span:last-child {\r\n animation-delay: -0.9s;\r\n -webkit-animation-delay: -0.9s;\r\n}\r\n\r\n\r\n\r\n@keyframes preloader {\r\n 0% {\r\n transform: scale(0, 0);\r\n opacity: 0.5;\r\n }\r\n\r\n 100% {\r\n transform: scale(1, 1);\r\n opacity: 0;\r\n }\r\n\r\n}\r\n\r\n@-webkit-keyframes preloader {\r\n\r\n 0% {\r\n -webkit-transform: scale(0, 0);\r\n opacity: 0.5;\r\n }\r\n\r\n 100% {\r\n -webkit-transform: scale(1, 1);\r\n opacity: 0;\r\n }\r\n\r\n}\r\n\r\n/*--- end of preloader ---*/","@use '../utils' as *;\r\n/*----------------------------------------*/\r\n/* 2.11 search style\r\n/*----------------------------------------*/\r\n\r\n.#{$theme-prifix}-search {\r\n &-form {\r\n &-toggle {\r\n position: fixed;\r\n top: 115px;\r\n left: 50%;\r\n max-width: 1136px;\r\n width: 100%;\r\n padding: 50px 60px 60px;\r\n border-radius: 16px;\r\n\r\n @media #{$xs} {\r\n padding: 15px;\r\n }\r\n background-color: rgba(var(--at-neutral-50-rgb), 0.9);\r\n backdrop-filter: blur(20px);\r\n opacity: 0;\r\n -webkit-transform: translate(-50%, calc(-100% - 80px));\r\n -ms-transform: translate(-50%, calc(-100% - 80px));\r\n transform: translate(-50%, calc(-100% - 80px));\r\n -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;\r\n transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;\r\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\r\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;\r\n transition-delay: 0s, 0s, 0s;\r\n -webkit-transition-delay: 0.5s;\r\n transition-delay: 0.5s;\r\n z-index: 9999;\r\n pointer-events: none;\r\n visibility: hidden;\r\n\r\n &.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n visibility: visible;\r\n -webkit-transform: translate(-50%, 0);\r\n -ms-transform: translate(-50%, 0);\r\n transform: translate(-50%, 0);\r\n -webkit-transition-delay: 0s;\r\n transition-delay: 0s;\r\n\r\n & .at-search-form-input {\r\n transform: translate(0, 0) !important;\r\n opacity: 1;\r\n transition-delay: .5s;\r\n }\r\n }\r\n }\r\n\r\n &-btn {\r\n position: absolute;\r\n top: 50%;\r\n right: 12px;\r\n -webkit-transform: translateY(-50%);\r\n -ms-transform: translateY(-50%);\r\n transform: translateY(-50%);\r\n font-size: 16px;\r\n border-radius: 8px;\r\n }\r\n\r\n &-input {\r\n position: relative;\r\n transform: translateY(-40px);\r\n transition: all 0.3s ease-in-out !important;\r\n transition-delay: 0.5s;\r\n padding: 12px 15px 12px 32px;\r\n border-radius: 8px;\r\n opacity: 0;\r\n border: 1px solid var(--at-neutral-100);\r\n background: var(--at-neutral-0);\r\n overflow: hidden;\r\n\r\n\r\n\r\n & input {\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n outline: 0;\r\n font-size: 24px;\r\n font-weight: 400;\r\n color: var(--at-common-black);\r\n display: inline-flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 636px;\r\n background: var(--at-neutral-0);\r\n transition-delay: 0.5s;\r\n transition: all 0.3s ease-in-out !important;\r\n\r\n @include at-placeholder {\r\n font-size: 24px;\r\n color: var(--at-neutral-500);\r\n }\r\n\r\n &:focus {\r\n border-color: transparent;\r\n }\r\n\r\n &:focus~.at-search-focus-border {\r\n width: 100%;\r\n left: 0;\r\n right: auto;\r\n transition: all 2s;\r\n }\r\n }\r\n\r\n\r\n & .at-search-focus-border {\r\n position: absolute;\r\n bottom: 0;\r\n left: auto;\r\n right: 0;\r\n width: 0;\r\n height: 1px;\r\n background-color: var(--at-common-black);\r\n transition: all 0.5s;\r\n }\r\n\r\n\r\n }\r\n }\r\n\r\n &-close {\r\n color: var(--at-common-black);\r\n font-size: 40px;\r\n transition: all .3s ease;\r\n\r\n &:hover {\r\n color: var(--at-neutral-500);\r\n transform: rotate(180deg);\r\n }\r\n }\r\n\r\n &-body {\r\n &-overlay {\r\n position: fixed;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(24, 24, 24, 0.5);\r\n z-index: 99;\r\n cursor: -webkit-zoom-out;\r\n cursor: zoom-out;\r\n pointer-events: none;\r\n -webkit-transform: translateY(calc(-100% - 80px));\r\n -ms-transform: translateY(calc(-100% - 80px));\r\n transform: translateY(calc(-100% - 80px));\r\n -webkit-transition: all 0.5s ease-in-out 0s;\r\n transition: all 0.5s ease-in-out 0s;\r\n -webkit-transition-delay: 0.3s;\r\n transition-delay: 0.3s;\r\n\r\n &.active {\r\n pointer-events: auto;\r\n -webkit-transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n transform: translateY(0);\r\n }\r\n }\r\n }\r\n\r\n &-dark {\r\n background-color: var(--at-common-black);\r\n\r\n & .at-search-form-input input {\r\n color: var(--at-common-white);\r\n border-bottom: 1px solid var(--at-border-3);\r\n\r\n &~.at-search-focus-border {\r\n background-color: var(--at-common-white);\r\n }\r\n }\r\n\r\n & .at-search-close {\r\n color: var(--at-common-white);\r\n }\r\n\r\n & .at-search-close:hover {\r\n color: var(--at-grey-2);\r\n }\r\n\r\n & .at-search-form-icon {\r\n color: var(--at-common-white);\r\n }\r\n }\r\n}\r\n\r\n.at-categories {\r\n &-title {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: var(--at-neutral-900);\r\n margin-bottom: 16px;\r\n margin-top: 50px;\r\n }\r\n\r\n &-list {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n &-item {\r\n display: flex;\r\n padding: 12px 24px;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 18px;\r\n border-radius: 100px;\r\n border: 1px solid var(--at-neutral-100);\r\n background: var(--at-neutral-0);\r\n color: var(--at-neutral-900);\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 600;\r\n line-height: normal;\r\n letter-spacing: -0.8px;\r\n transition: all 0.3s ease;\r\n\r\n &:hover {\r\n background: var(--at-neutral-900);\r\n color: var(--at-neutral-0);\r\n border-color: var(--at-neutral-900);\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n }\r\n }\r\n}","@use '../utils' as *;\r\n\r\n/*----------------------------------------*/\r\n/* 2.8 Magic Cursor\r\n/*----------------------------------------*/\r\n\r\n\r\nbody.at-magic-cursor #magic-cursor {\r\n\tdisplay: block;\r\n}\r\n\r\n#magic-cursor {\r\n\tposition: absolute;\r\n\tdisplay: none;\r\n\twidth: 10px;\r\n\theight: 10px;\r\n\tpointer-events: none;\r\n\tz-index: 99999;\r\n\topacity: 0;\r\n\ttop: 0;\r\n\tleft: 0;\r\n}\r\n\r\n/* Disable magic cursor on tablet/mobile (≤991px) and on touch/no-hover devices. */\r\n@media (max-width: 991.98px), (hover: none), (pointer: coarse) {\r\n\r\n\tbody.at-magic-cursor #magic-cursor,\r\n\t#magic-cursor,\r\n\t#ball {\r\n\t\tdisplay: none !important;\r\n\t}\r\n}\r\n\r\n#ball {\r\n\tposition: fixed;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tpointer-events: none;\r\n\tborder-radius: 50%;\r\n\tcolor: transparent;\r\n\tjustify-content: center;\r\n\tmix-blend-mode: difference;\r\n\tbackground-color: var(--at-common-black);\r\n}\r\n\r\n.cursor-bg-red {\r\n\t#ball {\r\n\t\tbackground-color: #FF535B !important;\r\n\t}\r\n\r\n\t#ball .ball-view {\r\n\t\tcolor: var(--at-common-white);\r\n\t}\r\n}\r\n\r\n.cursor-bg-red-2 {\r\n\t#ball {\r\n\t\tbackground-color: #FF481F !important;\r\n\t}\r\n\r\n\t#ball .ball-view {\r\n\t\tcolor: var(--at-common-white);\r\n\t}\r\n}\r\n\r\n.cursor-bg-yellow {\r\n\t#ball {\r\n\t\tbackground-color: #FFF669 !important;\r\n\t}\r\n\r\n\t#ball .ball-view {\r\n\t\tcolor: var(--at-common-black);\r\n\t}\r\n}\r\n\r\n.cursor-white-bg {\r\n\t#ball .ball-view {\r\n\t\tcolor: var(--at-common-black);\r\n\t}\r\n}\r\n\r\n\r\n/* Ball view \r\n============= */\r\n#ball .ball-view {\r\n\tposition: absolute;\r\n\topacity: 0;\r\n\tvisibility: hidden;\r\n\tpadding: 0 5px;\r\n\tfont-size: 15px;\r\n\tfont-weight: 500;\r\n\tline-height: 1.3;\r\n\ttext-align: center;\r\n\ttransform: scale(0);\r\n\tcolor: var(--at-common-black);\r\n}\r\n\r\n/* Ball drag \r\n============= */\r\n#ball .ball-drag {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\twidth: 100%;\r\n\tpadding: 0 5px;\r\n\tfont-size: 15px;\r\n\tfont-weight: 600;\r\n\tline-height: 1.2;\r\n\ttext-align: center;\r\n\ttransition: all 0.3s;\r\n\tcolor: var(--at-common-black);\r\n}\r\n\r\n#ball .ball-drag::before,\r\n#ball .ball-drag::after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tmargin-top: -5px;\r\n\tfont-size: 19px;\r\n\theight: 10px;\r\n\tline-height: 10px;\r\n\tfont-weight: 900;\r\n\tdisplay: inline-block;\r\n\tfont-style: normal;\r\n\tfont-variant: normal;\r\n\ttext-rendering: auto;\r\n\tcolor: var(--at-common-white);\r\n\tfont-family: \"Font Awesome 6 Pro\";\r\n\t-webkit-font-smoothing: antialiased;\r\n}\r\n\r\n#ball .ball-drag::before {\r\n\tcontent: \"\\f104\";\r\n\t/* Font Awesome */\r\n\tleft: 0;\r\n\ttransform: translate3d(-30px, 0, 0);\r\n\ttransition: all 0.25s;\r\n}\r\n\r\n#ball .ball-drag::after {\r\n\tcontent: \"\\f105\";\r\n\t/* Font Awesome */\r\n\tright: 0;\r\n\ttransform: translate3d(30px, 0, 0);\r\n\ttransition: all 0.25s;\r\n}\r\n\r\n#ball.with-blur {\r\n\t-webkit-backdrop-filter: blur(5px);\r\n\tbackdrop-filter: blur(5px);\r\n\t-webkit-transform: translate3d(0, 0, 0);\r\n\ttransform: translate3d(0, 0, 0);\r\n}\r\n\r\n\r\n/* Ball close \r\n============== */\r\n#ball.ball-close-enabled {\r\n\topacity: 1 !important;\r\n}\r\n\r\n#ball .ball-close {\r\n\tposition: absolute;\r\n\tpadding: 0 5px;\r\n\tfont-size: 14px;\r\n\tfont-weight: 600;\r\n\tline-height: 1;\r\n\ttext-align: center;\r\n\tcolor: var(--at-common-black);\r\n}\r\n\r\n.at-magnetic-wrap {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}","@use '../utils' as *;\r\n/*----------------------------------------*/\r\n/* 2.9 Nice Select\r\n/*----------------------------------------*/\r\n\r\n.nice-select {\r\n -webkit-tap-highlight-color: transparent;\r\n box-sizing: border-box;\r\n clear: both;\r\n cursor: pointer;\r\n display: block;\r\n outline: none;\r\n position: relative;\r\n -webkit-transition: all 0.2s ease-in-out;\r\n transition: all 0.2s ease-in-out;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n white-space: nowrap;\r\n width: auto;\r\n color: var(--at-neutral-900);\r\n padding-left: 55px;\r\n font-weight: 500;\r\n background-color: var(--at-neutral-0);\r\n border-radius: 5px;\r\n // border: solid 1px var(--at-neutral-100);\r\n font-size: 20px;\r\n height: 50px;\r\n line-height: 48px;\r\n padding-right: 30px;\r\n font-family: var(--at-ff-body);\r\n\r\n &:hover {\r\n border-color: ar(--at-theme-primary);\r\n }\r\n\r\n\r\n &::before {\r\n position: absolute;\r\n content: '';\r\n width: 48px;\r\n height: 2px;\r\n background-color: var(--at-neutral-900);\r\n top: 50%;\r\n left: 0;\r\n -webkit-transition: all 0.15s ease-in-out;\r\n transition: all 0.15s ease-in-out;\r\n margin-top: 0;\r\n transform-origin: center;\r\n @include at-transform(translateY(-50%));\r\n\r\n }\r\n\r\n &::after {\r\n position: absolute;\r\n content: '\\f107';\r\n top: 50%;\r\n right: 0;\r\n font-family: var(--at-ff-fontawesome);\r\n color: var(--at-neutral-900);\r\n font-weight: 600;\r\n pointer-events: none;\r\n font-size: 18px;\r\n -webkit-transition: all 0.15s ease-in-out;\r\n transition: all 0.15s ease-in-out;\r\n margin-top: 0;\r\n transform-origin: center;\r\n @include at-transform(translateY(-50%));\r\n\r\n }\r\n\r\n &.open {\r\n &::after {\r\n @include at-transform(translateY(-50%) rotate(-180deg));\r\n }\r\n\r\n & .list {\r\n opacity: 1;\r\n pointer-events: auto;\r\n -webkit-transform: scale(1) translateY(0);\r\n -ms-transform: scale(1) translateY(0);\r\n transform: scale(1) translateY(0);\r\n }\r\n }\r\n\r\n &.disabled {\r\n border-color: #ededed;\r\n color: #999;\r\n pointer-events: none;\r\n\r\n &::after {\r\n border-color: #cccccc;\r\n }\r\n }\r\n\r\n &.wide {\r\n width: 100%;\r\n\r\n & .list {\r\n left: 0 !important;\r\n right: 0 !important;\r\n }\r\n }\r\n\r\n &.right {\r\n float: right;\r\n\r\n & .list {\r\n left: auto;\r\n right: 0;\r\n }\r\n }\r\n\r\n &.small {\r\n font-size: 12px;\r\n height: 36px;\r\n line-height: 34px;\r\n\r\n &::after {\r\n height: 4px;\r\n width: 4px;\r\n }\r\n\r\n & .option {\r\n line-height: 34px;\r\n min-height: 34px;\r\n }\r\n }\r\n\r\n & .list {\r\n background-color: var(--at-neutral-0);\r\n width: 200px;\r\n border-radius: 5px;\r\n box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);\r\n box-sizing: border-box;\r\n margin-top: 4px;\r\n opacity: 0;\r\n overflow: hidden;\r\n padding: 10px;\r\n pointer-events: none;\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n -webkit-transform-origin: 50% 0;\r\n -ms-transform-origin: 50% 0;\r\n transform-origin: 50% 0;\r\n -webkit-transform: scale(0.75) translateY(-21px);\r\n -ms-transform: scale(0.75) translateY(-21px);\r\n transform: scale(0.75) translateY(-21px);\r\n -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;\r\n transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;\r\n z-index: 9;\r\n }\r\n\r\n & .option {\r\n cursor: pointer;\r\n font-weight: 500;\r\n line-height: 40px;\r\n list-style: none;\r\n min-height: 40px;\r\n outline: none;\r\n padding-left: 18px;\r\n padding-right: 29px;\r\n text-align: left;\r\n -webkit-transition: all 0.2s;\r\n transition: all 0.2s;\r\n border-radius: 12px;\r\n\r\n &:hover {\r\n background-color: var(--at-neutral-50);\r\n color: var(--at-neutral-900);\r\n }\r\n\r\n &.disabled {\r\n background-color: transparent;\r\n color: #999;\r\n cursor: default;\r\n }\r\n\r\n &.selected {\r\n font-weight: 400;\r\n color: var(--at-theme-primary);\r\n }\r\n }\r\n}\r\n\r\n.no-csspointerevents .nice-select .list {\r\n display: none;\r\n}\r\n\r\n.no-csspointerevents .nice-select.open .list {\r\n display: block;\r\n}","[data-bs-theme='dark'] {\r\n //common\r\n --at-common-white: var(--at-common-dark-white);\r\n --at-common-white-rgb: var(--at-common-dark-white-rgb);\r\n --at-common-black: var(--at-common-dark-black);\r\n --at-common-black-rgb: var(--at-common-dark-black-rgb);\r\n --at-common-bubbles: var(--at-common-dark-bubbles);\r\n --at-neutral-0: var(--at-neutral-dark-0);\r\n --at-neutral-0-rgb: var(--at-neutral-dark-0-rgb);\r\n --at-neutral-50: var(--at-neutral-dark-50);\r\n --at-neutral-50-rgb: var(--at-neutral-dark-50-rgb);\r\n --at-neutral-100: var(--at-neutral-dark-100);\r\n --at-neutral-200: var(--at-neutral-dark-200);\r\n --at-neutral-300: var(--at-neutral-dark-300);\r\n --at-neutral-500: var(--at-neutral-dark-500);\r\n --at-neutral-700: var(--at-neutral-dark-700);\r\n --at-neutral-800: var(--at-neutral-dark-800);\r\n --at-neutral-900: var(--at-neutral-dark-900);\r\n --at-neutral-950: var(--at-neutral-dark-950);\r\n\r\n //CUSTOM CLASS\r\n .invert-1 {\r\n filter: invert(0);\r\n }\r\n\r\n .at-header-logo,\r\n .at-offcanvas-logo {\r\n img {\r\n filter: invert(1);\r\n }\r\n }\r\n .invert-0 {\r\n filter: invert(0) !important;\r\n }\r\n\r\n .dark-mode-invert {\r\n filter: invert(1);\r\n }\r\n\r\n .at-main-menu nav ul li.has-dropdown > a::after {\r\n filter: invert(1);\r\n }\r\n\r\n .changeless {\r\n --at-common-white: #ffffff;\r\n --at-common-white-rgb: 255, 255, 255;\r\n --at-common-black: #1e1e1e;\r\n --at-common-bubbles: #e1eeb7;\r\n --at-neutral-950: #0f0f0f;\r\n --at-neutral-900: #1d1d1d;\r\n --at-neutral-800: #212121;\r\n --at-neutral-700: #303030;\r\n --at-neutral-500: #585959;\r\n --at-neutral-300: #b7b7b7;\r\n --at-neutral-100: #dfdfdf;\r\n --at-neutral-50: #f2f2f2;\r\n --at-neutral-0: #fefefe;\r\n }\r\n}\r\n\r\n.dark-light-mode .toggle {\r\n display: grid;\r\n place-items: center;\r\n cursor: pointer;\r\n line-height: 1;\r\n}\r\n\r\n.dark-light-mode .input {\r\n display: none;\r\n}\r\n\r\n.dark-light-mode label {\r\n margin-bottom: 0 !important;\r\n}\r\n\r\n.dark-light-mode .icon {\r\n grid-column: 1 / 1;\r\n grid-row: 1 / 1;\r\n transition: transform 500ms;\r\n line-height: 0.1;\r\n}\r\n\r\n.dark-light-mode .icon--moon {\r\n transition-delay: 200ms;\r\n}\r\n\r\n.dark-light-mode .icon--sun {\r\n transform: scale(0);\r\n}\r\n\r\n.dark-light-mode #switch:checked + .icon--moon {\r\n transform: rotate(360deg) scale(0);\r\n}\r\n\r\n.dark-light-mode #switch:checked ~ .icon--sun {\r\n transition-delay: 200ms;\r\n transform: scale(1) rotate(360deg);\r\n}\r\n"]}