main { overflow: clip; background: var(--color-paper); }

[data-header-sentinel] {
    position: absolute;
    inset: 0 0 auto;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Hero — 79vw seating panel plus a 100vw philosophy panel. */
[data-hero] {
    --hero-progress: 0;
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 36rem;
    overflow: hidden;
    background: #3d3d3d;
    color: var(--color-white);
    direction: ltr;
}

[data-hero-track] {
    display: flex;
    width: 179vw;
    height: 100%;
    transform: translate3d(calc(var(--hero-progress) * -59vw), 0, 0);
    transition: transform 1.05s var(--ease-okamura);
    will-change: transform;
}

[data-hero][data-hero-progress="0"] [data-hero-track] { transform: translate3d(calc(var(--hero-progress) * -59vw), 0, 0); }

[data-hero-panel] {
    position: relative;
    flex: 0 0 auto;
    height: 100%;
    overflow: hidden;
    color: var(--color-white);
    text-decoration: none;
}

[data-hero-panel="seating"] { width: 79vw; }
[data-hero-panel="philosophy"] { width: 100vw; }

[data-hero-panel]::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(180deg, rgb(0 0 0 / 13%), transparent 34%, rgb(0 0 0 / 16%));
    content: "";
    pointer-events: none;
}

[data-hero-panel] > img,
[data-hero-panel] > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-hero-panel] > img { z-index: 1; }
[data-hero-panel] > video { z-index: 2; background: #a7a29d; }

[data-hero-panel] > span {
    position: absolute;
    inset: auto auto 2.5rem var(--gutter);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--text-sm);
}

[data-hero-panel] > span::after,
[data-product-copy] a::after,
[data-closing] a::after,
[data-philosophy] a::after {
    display: inline-grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "›";
    font-family: Arial, sans-serif;
    font-size: 1.4rem;
    line-height: 1;
}

[data-hero-copy-primary],
[data-hero-copy-secondary] {
    position: absolute;
    z-index: 5;
    inset-block-start: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity 650ms ease, transform 850ms var(--ease-okamura);
    will-change: opacity, transform;
}

[data-hero-copy-primary] { inset-inline-start: 39.5vw; }
[data-hero-copy-secondary] { inset-inline-start: 50%; opacity: 0; transform: translate(-42%, -50%); }
[data-hero][data-hero-progress]:not([data-hero-progress="0"]) [data-hero-copy-primary] { opacity: calc(1 - var(--hero-progress) * 2.4); transform: translate(calc(-50% - var(--hero-progress) * 4rem), -50%); }
[data-hero][data-hero-progress]:not([data-hero-progress="0"]) [data-hero-copy-secondary] { opacity: clamp(0, calc((var(--hero-progress) - 0.28) * 2.2), 1); transform: translate(calc(-42% + (1 - var(--hero-progress)) * 2rem), -50%); }
[data-hero][data-active-panel="philosophy"] [data-hero-copy-primary] { opacity: 0; transform: translate(-58%, -50%); }
[data-hero][data-active-panel="philosophy"] [data-hero-copy-secondary] { opacity: 1; transform: translate(-50%, -50%); }
[data-hero-copy-primary] h1,
[data-hero-copy-secondary] p { max-width: 34rem; color: inherit; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 400; line-height: 1.45; text-align: center; }

[data-hero-scroll] {
    position: absolute;
    z-index: 5;
    inset: auto 1.4rem 0 auto;
    width: 1px;
    height: 4rem;
    overflow: hidden;
    background: rgb(255 255 255 / 38%);
}
[data-hero-scroll]::after { position: absolute; inset: -100% 0 auto; height: 100%; background: #fff; content: ""; animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 0% { transform: translateY(0); } 100% { transform: translateY(200%); } }

/* Editorial banner — the about copy occupies the same full-bleed block as Okamura. */
[data-feature] {
    position: relative;
    min-height: 90svh;
    overflow: hidden;
    background: #9b938d;
    color: var(--color-white);
}
[data-event-media],
[data-event-media]::after { position: absolute; inset: 0; }
[data-event-media]::after { background: linear-gradient(180deg, rgb(0 0 0 / 8%), rgb(0 0 0 / 23%)); content: ""; }
[data-event-media] img { width: 100%; height: 110%; object-fit: cover; }
[data-event-copy] {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 90svh;
    padding: clamp(5rem, 11vh, 8rem) var(--gutter);
    text-align: center;
}
[data-event-eyebrow],
[data-philosophy-kicker],
[data-closing-kicker] { margin-block-end: 1.1rem; font-size: var(--text-xs); letter-spacing: 0.06em; }
[data-event-copy] h2 { max-width: 28ch; font-size: clamp(1.8rem, 3vw, 2.7rem); }
[data-event-copy] p { max-width: 50rem; margin-block-start: 1.1rem; font-size: var(--text-sm); line-height: 1.9; }
[data-event-copy] [data-event-detail] { max-width: 42rem; margin-block-start: 0.55rem; opacity: 0.82; font-size: var(--text-xs); }
[data-event-copy] a,
[data-event-copy] > span:last-child { margin-block-start: 1.6rem; color: inherit; font-size: var(--text-xs); text-decoration: none; }

/* Products — scroll-driven records beside one sticky environment viewport. */
[data-products] { position: relative; background: var(--color-paper); color: var(--color-ink); }
[data-product-stage] { display: grid; grid-template-columns: 1fr 1fr; align-items: start; min-height: calc(var(--product-record-count, 4) * 100svh); }
[data-products][data-products-enhanced] { min-height: 0; }
[data-product-stage][data-product-enhanced] { min-height: calc(var(--product-record-count, 4) * 100svh); }
[data-product-environments] { position: sticky; top: 0; align-self: start; height: 100svh; overflow: hidden; background: #a8a39d; }
[data-product-environment] { position: absolute; inset: 0; z-index: 0; opacity: 0; visibility: hidden; transition: opacity 320ms ease; }
[data-product-stage]:not([data-product-enhanced]) [data-product-environment]:first-child { opacity: 1; visibility: visible; }
[data-product-environment] img { width: 100%; height: 100%; object-fit: cover; }
[data-product-environment][data-product-active] { z-index: 2; opacity: 1; visibility: visible; }
[data-product-records] { min-width: 0; position: relative; height: auto; overflow: visible; }
[data-product-record] { position: relative; display: grid; min-height: 100svh; overflow: hidden; padding: clamp(5rem, 10vh, 7rem) clamp(2rem, 5vw, 5rem) clamp(2rem, 6vh, 4rem); background: var(--color-paper); }
[data-product-mobile-environment] { display: none; }
[data-product-cutout] { position: relative; align-self: center; width: min(82%, 34rem); aspect-ratio: 1 / 1; margin-inline: auto; }
[data-product-cutout] > span { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 520ms ease; }
[data-product-stage]:not([data-product-enhanced]) [data-product-cutout] > span:first-child,
[data-product-cutout] > span[data-cutout-active] { opacity: 1; }
[data-product-cutout] img { width: 100%; height: 100%; object-fit: contain; }
[data-product-copy] { align-self: end; display: grid; grid-template-columns: 1fr auto; gap: 0.8rem 1.5rem; align-items: end; direction: rtl; }
[data-product-copy] h3 { grid-column: 1; font-size: clamp(1.7rem, 2.2vw, 2.2rem); font-weight: 400; }
[data-product-copy] p { grid-column: 1; max-width: 30rem; font-size: var(--text-sm); line-height: 1.8; }
[data-product-copy] a { grid-column: 2; grid-row: 1 / span 2; align-self: end; color: transparent; font-size: 0; text-decoration: none; }
[data-product-copy] a::after { color: var(--color-ink); }

/* Philosophy — an editorial split with a quiet image reveal and generous whitespace. */
[data-philosophy] { position: relative; display: grid; grid-template-columns: minmax(0, 43.7%) minmax(0, 56.3%); grid-template-rows: 1fr; min-height: 133svh; overflow: hidden; background: var(--color-paper); color: var(--color-ink); direction: ltr; }
[data-philosophy] > div { position: relative; inset: auto; z-index: 3; display: grid; align-content: start; justify-items: end; grid-column: 1; grid-row: 1; min-height: 100svh; padding: clamp(7rem, 15vh, 11rem) clamp(2rem, 7vw, 8rem) 4rem clamp(2rem, 5vw, 5rem); text-align: right; direction: rtl; }
[data-philosophy] > div::before { display: none; }
[data-philosophy] h2 { max-width: 30ch; font-size: var(--text-heading); }
[data-philosophy] p { max-width: 52rem; margin-block-start: 1.2rem; font-size: var(--text-sm); line-height: 1.95; }
[data-philosophy] [data-philosophy-detail] { max-width: 47rem; opacity: 0.86; font-size: var(--text-xs); }
[data-philosophy] a,
[data-philosophy] > div > span:last-child { display: inline-flex; align-items: center; gap: 0.8rem; margin-block-start: 1.6rem; color: inherit; font-size: var(--text-xs); text-decoration: none; }
[data-philosophy-media] { position: relative; z-index: 1; grid-column: 2; grid-row: 1; width: 100%; height: 100svh; overflow: hidden; }
[data-philosophy-media]::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 4%), rgb(0 0 0 / 16%)); content: ""; pointer-events: none; }
[data-philosophy-media] img { width: 100%; height: 108%; object-fit: cover; }

/* Closing image. */
[data-closing] { position: relative; min-height: 100svh; overflow: hidden; background: #aaa; color: var(--color-white); }
[data-closing-media],
[data-closing-media]::after { position: absolute; inset: 0; }
[data-closing-media]::after { background: rgb(0 0 0 / 22%); content: ""; }
[data-closing-media] img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-okamura); }
[data-closing] > div { position: relative; z-index: 2; display: grid; align-content: center; justify-items: center; min-height: 100svh; padding: var(--space-6) var(--gutter); text-align: center; }
[data-closing] h2 { max-width: 32ch; font-size: var(--text-heading); }
[data-closing] a,
[data-closing] > div > span:last-child { display: inline-flex; align-items: center; gap: 0.8rem; margin-block-start: 1.5rem; color: inherit; font-size: var(--text-xs); text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
    [data-feature]:hover [data-event-media] img,
    [data-closing]:hover [data-closing-media] img { transform: scale(1.025); }
}

@media (max-width: 899px) {
    [data-hero] { height: 100svh; min-height: 40rem; }
    [data-hero-track] { display: block; width: 100%; height: 200svh; transform: translate3d(0, -90px, 0); }
    [data-hero][data-hero-progress="0"] [data-hero-track] { transform: translate3d(0, -90px, 0); }
    [data-hero][data-active-panel="philosophy"] [data-hero-track] { transform: translate3d(0, -100svh, 0); }
    [data-hero-panel="seating"],
    [data-hero-panel="philosophy"] { display: block; width: 100%; height: 100svh; }
    [data-hero-panel="philosophy"] { height: 100svh; }
    [data-hero-copy-primary],
    [data-hero-copy-secondary] { inset-inline-start: 50%; width: calc(100% - 3rem); }
    [data-hero-panel] > span { inset-block-end: 1.4rem; }

    [data-feature],
    [data-event-copy] { min-height: 92svh; }
    [data-event-copy] { padding-block: 6rem 4rem; }

    [data-product-stage] { display: block; min-height: 0; }
    [data-product-environments] { display: none; }
    [data-product-record] { display: block; min-height: 0; padding: 0 0 3.5rem; }
    [data-product-mobile-environment] { display: block; height: 76svh; }
    [data-product-mobile-environment] img { width: 100%; height: 100%; object-fit: cover; }
    [data-product-cutout] { width: min(82vw, 31rem); margin-block: 2rem 0.5rem; }
    [data-product-copy] { padding-inline: var(--gutter); }

    [data-philosophy] { display: flex; flex-direction: column; min-height: auto; color: var(--color-ink); direction: rtl; }
    [data-philosophy] > div { position: relative; min-height: auto; padding-block: 4.5rem; }
    [data-philosophy] > div::before { display: none; }
    [data-philosophy-media] { position: relative; height: 78svh; order: -1; }
}

@media (max-width: 599px) {
    [data-hero-copy-primary] h1,
    [data-hero-copy-secondary] p { font-size: 1.2rem; }
    [data-event-copy] h2 { font-size: 1.7rem; }
    [data-event-copy] p,
    [data-philosophy] p { line-height: 1.8; }
    [data-product-mobile-environment] { height: 68svh; }
    [data-product-copy] { grid-template-columns: 1fr auto; }
    [data-philosophy-media] { height: 65svh; }
}

@media (prefers-reduced-motion: reduce) {
    [data-hero-track] { transition: none; }
    [data-product-cutout] > span { animation: none; }
    [data-product-cutout] > span:first-child { opacity: 1; }
    [data-product-stage] { display: block; min-height: 0; }
    [data-product-environments] { display: none; }
    [data-product-record] { min-height: auto; }
    [data-product-stage][data-product-enhanced] [data-product-record] {
        position: relative;
        inset: auto;
        min-height: auto;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        clip-path: none !important;
    }
    [data-product-stage][data-product-enhanced] [data-product-copy] {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    [data-product-mobile-environment] { display: block; height: 70svh; }
    [data-product-mobile-environment] img { width: 100%; height: 100%; object-fit: cover; }
}

/* Sila story: seamless white image surfaces. */
[data-products][data-product-story-bridge],
[data-products][data-product-story-bridge] [data-product-environments],
[data-products][data-product-story-bridge] [data-product-record],
[data-products][data-product-story-bridge] [data-product-mobile-environment] {
    background: #fff !important;
}

[data-products][data-product-story-bridge] [data-product-cutout] img {
    filter: brightness(1.08);
}