.home-page main { overflow: clip; }
.archive-section, .products-section, .collection-teaser { width: min(100%, var(--page-max)); margin: 0 auto; padding: var(--space-8) var(--page-gutter); }

.hero-section { position: relative; display: flex; min-height: calc(100svh - var(--header-height)); flex-direction: column; overflow: hidden; color: rgb(255 255 255 / 94%); background: var(--color-dark); isolation: isolate; }
.hero-background { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-background img { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; object-position: left top; filter: grayscale(100%) saturate(0) contrast(1.05) brightness(.48) blur(.4px); opacity: .94; transform: scale(1.03); }
.hero-background::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 68%), rgb(0 0 0 / 58%) 42%, rgb(0 0 0 / 52%) 68%, rgb(0 0 0 / 66%)), linear-gradient(180deg, rgb(0 0 0 / 18%), rgb(0 0 0 / 44%) 78%, rgb(0 0 0 / 72%)), repeating-linear-gradient(90deg, rgb(255 255 255 / 11%) 0, rgb(255 255 255 / 11%) 1px, transparent 1px, transparent 4rem); content: ""; }
.hero-layout { display: grid; width: min(calc(100% - 4rem), 96.75rem); grid-template-columns: minmax(22rem, .9fr) minmax(31rem, 1.15fr) minmax(15rem, .58fr); flex: 1; gap: clamp(1.5rem, 2.2vw, 2.625rem); align-items: start; justify-content: center; margin: 0 auto; padding: clamp(3.75rem, 8vh, 6.25rem) 0 1.5rem; }
.hero-copy { display: flex; flex-direction: column; padding-top: clamp(1.5rem, 4vh, 3.5rem); }
.hero-section .section-kicker { color: rgb(255 255 255 / 86%); font-size: .6875rem; }
.hero-slide-picture { display: contents; }
.hero-copy h1 { max-width: 29rem; margin: 0; color: #fff; font-size: var(--text-2xl); font-weight: 500; line-height: .99; }
.hero-description { max-width: 28.5rem; margin: 1.625rem 0 0; color: rgb(255 255 255 / 72%); font-size: 1.125rem; line-height: 1.48; }
.hero-cta { width: 16.5rem; min-height: 3.625rem; margin-top: 1.875rem; color: var(--color-text); background: #fff; border-color: #fff; }
.hero-cta:hover:not(:disabled, .is-disabled) { color: var(--color-text); background: rgb(255 255 255 / 86%); border-color: rgb(255 255 255 / 86%); }
.hero-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.125rem; width: min(100%, 31.25rem); margin-top: clamp(1.75rem, 4vh, 2.625rem); }
.benefit-item { display: flex; min-width: 0; gap: .625rem; align-items: center; }
.benefit-icon { width: 1.875rem; height: 1.875rem; flex: 0 0 1.875rem; filter: invert(1); opacity: .58; }
.benefit-item p { margin: 0; color: rgb(255 255 255 / 50%); font-size: .6875rem; line-height: 1.24; }
.benefit-item strong, .benefit-item span { display: block; }
.benefit-item strong { color: rgb(255 255 255 / 68%); font-weight: 600; }

.hero-feature { min-width: 0; }
.social-card, .side-card { position: relative; overflow: hidden; background: #111; box-shadow: 0 1.375rem 3.5rem rgb(0 0 0 / 42%); isolation: isolate; }
.social-card { border-radius: var(--radius-md); }
.social-card-header { display: flex; height: 4.875rem; align-items: center; padding: 0 1.5rem; color: #fff; background: linear-gradient(90deg, #171717, #0e0e0e); }
.profile-avatar { overflow: hidden; width: 2.625rem; height: 2.625rem; flex: 0 0 2.625rem; margin-right: 1rem; border: 1px solid rgb(255 255 255 / 45%); border-radius: 50%; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) saturate(0) contrast(1.04) brightness(.84); }
.profile-name { font-size: 1.125rem; font-weight: 700; }
.card-dots { margin-left: auto; font-size: 1.25rem; letter-spacing: .15em; }
.social-card-media { position: relative; height: clamp(24rem, 43vh, 31rem); background: #161616; }
.social-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; filter: grayscale(100%) saturate(0) contrast(1.04) brightness(.84); opacity: 1; transition: opacity 120ms ease; }
.social-card-media img.is-changing { opacity: .72; }
.social-card-media::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgb(0 0 0 / 38%)), linear-gradient(90deg, rgb(255 255 255 / 4%), transparent 30%, rgb(0 0 0 / 16%)); content: ""; pointer-events: none; }
.hero-slider { display: flex; gap: .75rem; align-items: center; justify-content: center; margin-top: 1.125rem; color: rgb(255 255 255 / 64%); font-size: .75rem; letter-spacing: .08em; }
.hero-slider button { display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; padding: 0; color: inherit; background: transparent; border: 1px solid rgb(255 255 255 / 20%); border-radius: 50%; transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.hero-slider button:hover { color: #111; background: #fff; border-color: #fff; }
.slider-line { position: relative; display: block; width: clamp(6rem, 10vw, 10.125rem); height: 1px; overflow: hidden; background: rgb(255 255 255 / 28%); }
.slider-line > span { position: absolute; inset: 0 auto 0 0; width: 33.333%; background: rgb(255 255 255 / 84%); transition: width var(--motion-base) ease; }
.hero-side-cards { display: grid; min-width: 0; gap: 1rem; }
.side-card { width: 100%; height: clamp(11.5rem, 21.5vh, 13.75rem); padding: 0; color: #fff; border: 0; border-radius: var(--radius-md); text-align: left; }
.side-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(100%) saturate(0) contrast(1.04) brightness(.84); }
.side-card::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(0 0 0 / 4%), rgb(0 0 0 / 8%) 48%, rgb(0 0 0 / 58%)); content: ""; pointer-events: none; }
.side-card-caption { position: absolute; right: 1.5rem; bottom: 1.375rem; left: 1.5rem; z-index: 2; display: flex; align-items: center; justify-content: space-between; font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.side-card-caption span:last-child { font-size: 1.3125rem; font-weight: 400; letter-spacing: 0; }

.hero-ticker { position: relative; display: flex; height: 3.375rem; flex: 0 0 3.375rem; align-items: center; overflow: hidden; background: rgb(8 8 8 / 78%); border-top: 1px solid rgb(255 255 255 / 13%); }
.ticker-track { display: flex; width: max-content; min-width: max-content; align-items: center; color: rgb(255 255 255 / 68%); font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; will-change: transform; animation: ticker-marquee 34s linear infinite; }
.ticker-group { display: flex; flex: 0 0 auto; gap: clamp(1.125rem, 1.75vw, 2.25rem); align-items: center; padding-right: clamp(1.125rem, 1.75vw, 2.25rem); }
.ticker-group span:nth-child(even) { color: rgb(255 255 255 / 34%); font-size: .875rem; }
@keyframes ticker-marquee { to { transform: translate3d(-25%, 0, 0); } }

.archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.875rem, 1.6vw, 1.5rem); }
.archive-card { position: relative; display: flex; min-height: 24.375rem; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(1.25rem, 3vw, 2.125rem); color: #fff; background: #222; border-radius: var(--radius-md); isolation: isolate; }
.archive-card:nth-child(2) { min-height: 29.375rem; margin-top: 3.375rem; }
.archive-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.archive-card::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 8%), rgb(0 0 0 / 62%)); content: ""; }
.archive-card--sketch img { object-position: 50% 42%; }
.archive-card--card img { object-position: 50% 58%; }
.archive-card--care img { object-position: 50% 48%; }
.archive-number { color: rgb(255 255 255 / 72%); font-size: .75rem; letter-spacing: .2em; }
.archive-card h3 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.375rem); font-weight: 400; }

.related-all-link { display: inline-flex; flex: 0 0 auto; gap: .625rem; align-items: center; margin-bottom: .5rem; color: color-mix(in srgb, var(--color-text) 64%, transparent); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.related-all-link img { width: .9375rem; height: .9375rem; }
.home-empty { min-height: 18rem; padding: 2rem 0; color: var(--color-muted); }

.collection-teaser { display: grid; grid-template-columns: minmax(20rem, .92fr) minmax(20rem, .72fr); gap: clamp(1.75rem, 5vw, 5.5rem); align-items: center; }
.teaser-visual { position: relative; min-height: clamp(23.75rem, 56vw, 45rem); overflow: hidden; background: var(--color-soft); border-radius: var(--radius-md); isolation: isolate; }
.teaser-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.teaser-copy { max-width: 35rem; }
.teaser-copy h2 { margin: 0; font-size: var(--text-xl); font-weight: 400; }
.teaser-copy > p:not(.section-kicker) { margin: 1.625rem 0 0; color: var(--color-muted); }
.teaser-copy .text-link { margin-top: 2.125rem; }

@media (max-width: 82.5rem) {
    .hero-section { min-height: auto; }
    .hero-layout { grid-template-columns: minmax(20rem, .82fr) minmax(27rem, 1fr); width: min(calc(100% - 4rem), 68.75rem); padding-top: 4rem; }
    .hero-benefits { grid-template-columns: 1fr; gap: .875rem; }
    .hero-side-cards { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .side-card { height: 15.625rem; }
}

@media (max-width: 68.75rem) {
    .hero-layout { grid-template-columns: 1fr; width: min(calc(100% - 3rem), 47.5rem); padding-top: 3rem; padding-bottom: 1.875rem; }
    .hero-copy { padding-top: 0; }
    .hero-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-side-cards { grid-column: auto; }
    .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .archive-card:nth-child(2) { margin-top: 0; }
    .archive-card:nth-child(3) { grid-column: span 2; min-height: 20rem; }
}

@media (max-width: 48rem) {
    .hero-layout { display: flex; width: 100%; flex-direction: column; gap: 1.25rem; padding: 1.875rem var(--page-gutter); }
    .hero-copy h1 { font-size: clamp(2.75rem, 13vw, 3.875rem); }
    .hero-description { margin-top: 1.25rem; font-size: 1rem; }
    .hero-cta { width: min(100%, 17.125rem); }
    .hero-benefits { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.125rem; }
    .social-card-header { height: 4rem; padding: 0 1rem; }
    .profile-avatar { width: 2.125rem; height: 2.125rem; flex-basis: 2.125rem; margin-right: .75rem; }
    .profile-name { font-size: .9375rem; }
    .social-card-media { height: clamp(20rem, 78vw, 28.75rem); }
    .hero-side-cards { grid-template-columns: 1fr; }
    .side-card { height: 15.625rem; }
    .hero-ticker { height: 3.25rem; flex-basis: 3.25rem; }
    .archive-section, .products-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .archive-grid { grid-template-columns: 1fr; }
    .archive-card, .archive-card:nth-child(2), .archive-card:nth-child(3) { grid-column: auto; min-height: 18.75rem; }
    .section-heading--row .related-all-link { margin-top: 1.375rem; }
}

@media (max-width: 47.5rem) {
    .collection-teaser { grid-template-columns: 1fr; gap: 1.75rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .teaser-visual { min-height: clamp(20rem, 82vw, 31.25rem); }
}

@media (max-width: 26.25rem) {
    .hero-copy h1 { font-size: 2.45rem; }
    .hero-slider { gap: .5rem; }
    .slider-line { width: 5rem; }
    .archive-card { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; transform: none; }
}