/* Homepage sections. Loaded only on the front page. */

/* ── Shared ── */
.section-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.section-reference {
    margin-top: 0.7rem;
    color: var(--text-quiet);
    font-size: 0.65rem;
    line-height: 1.55;
}
.section-reference a,
sup a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(37, 42, 76, 0.32);
    text-underline-offset: 0.16em;
}
sup {
    position: relative;
    top: -0.25em;
    margin-left: 0.08em;
    font-size: 0.68em;
    line-height: 0;
    vertical-align: baseline;
}

/* Section H2s share the hero's headline treatment. */
.insight h2,
.gray-zone h2,
.technology h2,
.company h2 {
    max-width: 32rem;
    color: rgba(37, 42, 76, 0.62);
    font-size: clamp(2.3rem, 3vw, 3.6rem);
    line-height: 1.15;
    text-wrap: balance;
}

/* Pill links used by the hero and the company section. */
.hero-btn,
.company-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: 0.9rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.64);
    color: rgba(37, 42, 76, 0.74);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1.45;
    text-align: center;
    text-transform: uppercase;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}
.hero-btn:hover,
.hero-btn:focus-visible,
.company-link:hover,
.company-link:focus-visible {
    border-color: rgba(172, 129, 242, 0.62);
    background: rgba(237, 233, 255, 0.72);
    color: var(--navy);
    transform: translateY(-1px);
}

/* ── Hero ── */
/* Sequence: headline, subhead, button slide up over the first 1.25s, then the
   artwork fades in, then the float begins. The float is the womb metaphor and
   runs for as long as it's on screen. */
.hero {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: var(--white);
}

.hero-inner {
    display: grid;
    grid-template-columns: minmax(25rem, 41vw) minmax(0, 1fr);
    align-items: center;
    /* Capped, and tied to width so a narrow window never gets a tall, empty hero. */
    height: clamp(640px, min(100vh, 60vw), 860px);
    padding-top: var(--nav-height);
}

.hero-copy {
    position: relative;
    z-index: 2;
    align-self: start;
    box-sizing: content-box;
    width: clamp(28rem, 33vw, 32rem);
    padding: clamp(6.7rem, 17vh, 11.8rem) 1rem 0 var(--page-gutter);
}

.hero h1 {
    max-width: 32rem;
    color: rgba(37, 42, 76, 0.62);
    font-size: clamp(2.3rem, 3vw, 3.6rem);
    line-height: 1.15;
    opacity: 0;
    transform: translateY(18px);
    animation: heroTextIn 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}

.hero-subhead {
    max-width: 23.75rem;
    margin-top: clamp(3.1rem, 6.8vh, 5.25rem);
    color: rgba(37, 42, 76, 0.76);
    font-size: clamp(1.12rem, 1.55vw, 1.65rem);
    line-height: 1.65;
    opacity: 0;
    transform: translateY(18px);
    animation: heroTextIn 650ms cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both;
}
.hero-subhead strong {
    color: var(--violet);
    font-weight: 500;
}

.hero-actions {
    margin-top: clamp(1.4rem, 3vh, 2.1rem);
    opacity: 0;
    transform: translateY(18px);
    animation: heroTextIn 650ms cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s both;
}

/* The artwork is a white-ground render that bleeds off the right edge. */
.hero-media {
    position: relative;
    z-index: 1;
    height: 100%;
    pointer-events: none;
}

.hero-fetus {
    position: absolute;
    top: -100px;
    left: -12%;
    width: 150%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: left center;
    opacity: 0;
    /* Fade waits for the copy; the float (infinite by design, paused by home.js
       once scrolled past) starts as the fade ends. */
    animation:
        heroFetusIn 1.8s ease 1.3s forwards,
        heroFetusFloat 16s ease-in-out 3.1s infinite alternate;
}
.hero.is-offscreen .hero-fetus { animation-play-state: paused; }

@keyframes heroTextIn {
    to { opacity: 1; transform: translateY(0); }
}
/* Ends on none, not blur(0), so no filter layer lingers under the float. */
@keyframes heroFetusIn {
    from { opacity: 0; filter: blur(10px); }
    to   { opacity: 1; filter: none; }
}
@keyframes heroFetusFloat {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(-8px, -10px, 0); }
    50%  { transform: translate3d(10px, -4px, 0); }
    75%  { transform: translate3d(4px, 10px, 0); }
    100% { transform: translate3d(-6px, 5px, 0); }
}

/* Already seen this session (inline script in the head): skip the entrance. */
.hero-played .hero h1,
.hero-played .hero-subhead,
.hero-played .hero-actions {
    opacity: 1;
    transform: none;
    animation: none;
}
.hero-played .hero-fetus {
    opacity: 1;
    animation: heroFetusFloat 16s ease-in-out 0s infinite alternate;
}

/* ── Insight ── */
/* Tucks up under the hero so the photo runs behind the artwork's lower edge. */
.insight {
    --overlap: 175px; /* how far the section tucks under the hero */
    position: relative;
    isolation: isolate;
    min-height: clamp(560px, 46.1vw, 820px);
    margin-top: calc(-1 * var(--overlap));
    background: var(--white);
    overflow: hidden;
}

.insight-inner {
    display: grid;
    grid-template-columns: minmax(26rem, 0.78fr) minmax(22rem, 0.62fr);
    gap: clamp(4rem, 8vw, 9rem);
    align-items: center;
    /* Equal padding above and below once the strip hidden under the hero is
       excluded, so the copy centres in what is actually visible. */
    min-height: inherit;
    padding: calc(var(--overlap) + clamp(3.5rem, 5vw, 6rem)) clamp(5.5rem, 9vw, 11rem) clamp(3.5rem, 5vw, 6rem) clamp(8rem, 16vw, 30rem);
}

/* Keep the hand on the belly (top-left of the photo) in frame when the section
   is taller than the image's 2.17:1, which is every width under about 1200px. */
.insight .section-bg { object-position: 25% top; }

.insight h2 .accent { color: #564079; }

.insight-subhead {
    max-width: 24rem;
    margin-top: clamp(1.9rem, 3.8vh, 3.1rem);
    color: rgba(37, 42, 76, 0.76);
    font-size: clamp(1.12rem, 1.55vw, 1.65rem);
    line-height: 1.65;
}

.insight-copy {
    max-width: 33rem;
    color: var(--text);
    font-size: clamp(0.9rem, 1.02vw, 1rem);
    line-height: 2;
}

/* ── Gray zone ── */
.gray-zone {
    padding: clamp(6rem, 11vw, 11rem) 0 clamp(3rem, 5vw, 4.5rem);
    background: var(--white);
}

/* Handoff geometry: a 1280px wrap with its own inset, so the text block tops
   out around 1000px on wide screens instead of following the page gutter. */
.gray-zone-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    row-gap: clamp(1.5rem, 2.5vw, 2.5rem);
    column-gap: clamp(4rem, 7vw, 7.5rem);
    align-items: start;
    width: min(100% - 3rem, 1280px);
    margin-inline: auto;
    padding: 0 clamp(5.5rem, 8vw, 9rem);
}

.labor-infographic {
    position: relative;
    grid-column: 1 / -1;
    width: min(80%, 62.4rem);
    margin: 0 auto;
    padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
    aspect-ratio: 2028 / 632;
}
.labor-infographic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
}
.labor-blur { opacity: 0; }
/* Once in view, the blurred version fades over the clear one. */
.labor-infographic.is-visible .labor-blur  { animation: laborBlurIn 1.2s ease 0.6s forwards; }
.labor-infographic.is-visible .labor-clear { animation: laborClearOut 1.2s ease 0.6s forwards; }
@keyframes laborBlurIn   { to { opacity: 1; } }
@keyframes laborClearOut { to { opacity: 0; } }

.gray-copy {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: inherit;
    align-items: start;
}
.gray-copy h2 { grid-column: 1; grid-row: 1; }

.gray-subhead {
    grid-column: 1;
    grid-row: 2;
    max-width: 30rem;
    margin-top: clamp(1.9rem, 3.8vh, 3.1rem);
    color: rgba(37, 42, 76, 0.76);
    font-size: clamp(1.12rem, 1.55vw, 1.65rem);
    line-height: 1.65;
    text-wrap: pretty;
}

.gray-body {
    grid-column: 2;
    grid-row: 1 / span 2;
    max-width: 35rem;
    margin-top: 0.35rem;
    color: var(--text);
    font-size: clamp(0.9rem, 1.02vw, 1rem);
    line-height: 2;
    text-wrap: pretty;
}
.gray-body p + p { margin-top: 1.05rem; }
.gray-body strong { font-weight: 500; }

/* ── Technology ── */
.technology {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 4rem) var(--page-gutter) clamp(4.5rem, 7vw, 6.5rem);
    background: #dcecff url('../img/technology-bg.webp') center top / cover no-repeat;
}
.technology::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(87, 158, 226, 0.04), rgba(87, 158, 226, 0.08));
}

.technology-head,
.product-card {
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 28px 80px rgba(37, 42, 76, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.technology-head {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 0.8fr);
    gap: clamp(4rem, 8vw, 8.5rem);
    align-items: center;
    padding: clamp(2.4rem, 4.5vw, 3.8rem);
}

.technology-deck {
    max-width: 42rem;
    color: var(--text);
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1.78;
    text-wrap: pretty;
}

.product-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3rem);
    margin-top: 12px;
}
.product-row.has-expanded-card { align-items: start; }

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: clamp(32rem, 45vw, 45rem);
    padding: clamp(2rem, 3.8vw, 3.8rem);
}

/* Cards fade in as a whole; their children slide in from the left, staggered. */
.product-card.reveal {
    transform: none;
    transition: opacity 700ms ease;
}
.product-card > * {
    opacity: 0;
    transform: translateX(-120px);
    transition: opacity 1050ms ease, transform 1050ms cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card.is-visible > * {
    opacity: 1;
    transform: translateX(0);
}
.product-card.is-visible > :nth-child(2) { transition-delay: 80ms; }
.product-card.is-visible > :nth-child(3) { transition-delay: 150ms; }
.product-card.is-visible > :nth-child(4) { transition-delay: 220ms; }

.product-name {
    display: flex;
    align-items: center;
    min-height: 64px;
    margin-bottom: clamp(1.35rem, 2.4vw, 2rem);
    color: var(--violet);
    font-family: var(--font-body);
    font-size: clamp(1.55rem, 2.35vw, 2.45rem);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.product-name sup {
    top: auto;
    margin-left: 0.12em;
    font-size: 0.38em;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-0.82em);
}

.product-tagline {
    position: relative;
    top: -10px;
    max-width: 21ch;
    color: var(--navy);
    font-family: var(--font-body);
    font-size: clamp(1.55rem, 2.35vw, 2.45rem);
    line-height: 1.12;
    text-wrap: balance;
}

.product-summary,
.product-more p {
    max-width: 35rem;
    color: var(--text-muted);
    font-size: clamp(0.98rem, 1.25vw, 1.15rem);
    line-height: 1.78;
    text-wrap: pretty;
}
.product-summary {
    position: relative;
    top: -10px;
    margin-top: clamp(1.15rem, 2vw, 1.55rem);
}

.product-more-toggle {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-left: 0.45rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--violet-deep);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
    cursor: pointer;
}
.product-more-toggle:hover { color: var(--navy); }
.product-more-toggle__symbol { font-size: 1.1em; font-weight: 400; }

.product-card > .product-more {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: none;
    transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
}
.product-card > .product-more.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}
.product-more__inner { min-height: 0; overflow: hidden; }
.product-more p { margin-top: 1.25rem; }
.product-more p + p { margin-top: 1rem; }

.product-image {
    width: min(100%, 25rem);
    margin-top: auto;
    padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
    aspect-ratio: 2530 / 2896;
    overflow: hidden;
}
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#lumerah .product-image img { transform: translateY(-8%) scale(1.2); }

/* ── Impact ── */
.impact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(34rem, 46vw, 47rem);
    background: var(--navy);
}
/* Slow pan across the photo. Infinite by design; paused offscreen by home.js. */
.impact-bg {
    inset: 0 -8%;
    width: 116%;
    animation: impactPan 42s ease-in-out infinite alternate;
}
.impact.is-offscreen .impact-bg { animation-play-state: paused; }
@keyframes impactPan {
    from { transform: translateX(4%); }
    to   { transform: translateX(-4%); }
}

.impact-inner {
    display: grid;
    grid-template-columns: minmax(21rem, 0.4fr) minmax(0, 1fr);
    gap: clamp(2.25rem, 4.5vw, 4.75rem);
    align-items: center;
    min-height: inherit;
    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);
}

.impact h2 {
    max-width: 32rem;
    color: var(--ice);
    font-size: clamp(2.3rem, 3vw, 3.6rem);
    line-height: 1.15;
    text-wrap: balance;
}

.impact-copy {
    max-width: 64rem;
    color: var(--ice);
    font-size: clamp(0.96rem, 1.08vw, 1.08rem);
    line-height: 1.9;
    text-wrap: pretty;
}
.impact-copy p + p { margin-top: 1.1rem; }

/* ── Company ── */
.company {
    padding: clamp(4.5rem, 7vw, 7rem) var(--page-gutter);
    background: linear-gradient(180deg, var(--white), var(--paper));
}

.company-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
    gap: clamp(4rem, 8vw, 8.5rem);
    align-items: start;
}

.company-copy {
    color: var(--text);
    font-size: clamp(0.96rem, 1.08vw, 1.08rem);
    line-height: 1.9;
    text-wrap: pretty;
}

.company-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: clamp(1.8rem, 3vw, 2.4rem);
}

/* ── Motion ── */
@media (prefers-reduced-motion: reduce) {
    .hero h1, .hero-subhead, .hero-actions,
    .product-card > * {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }
    .hero-fetus, .impact-bg { animation: none; }
    .hero-fetus { opacity: 1; }
    .labor-infographic.is-visible .labor-blur,
    .labor-infographic.is-visible .labor-clear { animation: none; }
    .product-card > .product-more { transition: none; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
    /* Two columns hold; the artwork gets smaller and sets the hero's height,
       so no empty band opens up above the next section. */
    .hero-inner {
        grid-template-columns: minmax(19rem, 46vw) minmax(0, 1fr);
        align-items: start;
        height: auto;
        min-height: 0;
    }
    .hero-copy {
        width: auto;
        box-sizing: border-box;
        padding: clamp(3.5rem, 9vh, 6rem) 1rem 0.5rem var(--page-gutter);
    }
    .hero-subhead { margin-top: clamp(1.75rem, 4vh, 3rem); }
    .hero-media { height: auto; }
    .hero-fetus {
        position: relative;
        top: 0;
        left: -6%;
        width: 118%;
        height: auto;
    }

    .insight {
        --overlap: 0px;
        min-height: 0;
    }
    .insight-inner,
    .gray-zone-inner,
    .technology-head,
    .impact-inner,
    .company-inner {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Same left edge as the hero copy above it. */
    .insight-inner {
        gap: 2rem;
        padding: 2.5rem var(--page-gutter) 4.5rem;
    }
    .gray-zone-inner { padding: 0 1.5rem; }
    .gray-copy { grid-template-columns: 1fr; }
    .gray-copy h2, .gray-subhead, .gray-body {
        grid-column: 1;
        grid-row: auto;
    }
    .gray-body { margin-top: 2.25rem; }
    .labor-infographic { width: 100%; }

    .technology { padding-top: 2rem; }
    .technology-head {
        gap: 1.5rem;
        padding: 2rem;
    }
    .product-row { grid-template-columns: 1fr; }
    .company-links { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .hero-inner {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        min-height: 0;
        padding-bottom: 0;
    }
    .hero-media {
        order: 1;
        width: 100%;
    }
    .hero-fetus {
        left: 0;
        width: 100%;
    }
    .hero-copy {
        order: 2;
        padding: 0 1.5rem 0.5rem;
    }
    .insight-inner { padding: 2.5rem 1.5rem 4rem; }
    .hero h1, .hero-subhead, .hero-actions {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .hero-fetus {
        opacity: 1;
        animation: heroFetusFloat 16s ease-in-out 1s infinite alternate;
    }
    .hero-subhead { margin-top: 1.5rem; }
}

@media (max-width: 480px) {
}