/* =====================================================================
   PATHWAY EXPLORATION — shared components
   Used by the exploration pages (home-exploration.html,
   projects-exploration.html). Loaded after style.css; every class here is
   prefixed .lx- so nothing on the live pages is affected.
   ===================================================================== */
:root {
    /* Instruction-leaflet paper. Pure white so the product render's
       own white background meets the plate without a seam. */
    --lx-paper: #FFFFFF;
    --lx-rule: rgba(4, 0, 3, 0.12);
    --lx-ease: cubic-bezier(0.25, 1, 0.5, 1);
    --lx-radius-plate: 32px;
}

/* Visible keyboard focus — missing site-wide, added here to trial it */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--text-dark);
    outline-offset: 3px;
    border-radius: var(--radius-pill);
}

/* ── Hero ────────────────────────────────────────────────────── */
.lx-hero {
    padding-top: 176px;
    padding-bottom: var(--space-24);
}

.lx-headline {
    /* Sized from the container's content width (max 1400px, less the
       4vw gutters) so "Medical devices shouldn't" always fits on one
       line; ~14em covers that line with room to spare. */
    font-size: clamp(2.25rem, calc((min(1400px, 100vw) - 8vw) / 14.3), 6rem);
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: var(--weight-ui);
    color: var(--text-dark);
}

.lx-line {
    display: block;
    overflow: hidden;
    /* room for descenders inside the clip */
    padding-bottom: 0.06em;
}

.lx-line > span {
    display: block;
}

/* Hold the headline to exactly two lines; phones may wrap */
@media (min-width: 601px) {
    .lx-line > span {
        white-space: nowrap;
    }
}

.lx-intro {
    display: grid;
    gap: var(--space-8);
    margin-top: var(--space-10);
}

/* Runs the full container width; the size scales with it so a line
   stays around 70–75 characters rather than stretching thin. */
.lx-lede {
    font-size: clamp(var(--text-lead), 2.1vw, 1.875rem);
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--text-muted);
    text-wrap: pretty;
}

.lx-lede p + p {
    margin-top: var(--space-4);
}

main {
    padding-bottom: var(--space-24);
}

.lx-actions {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    font-size: var(--text-caption);
}

.lx-actions .lx-place {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.lx-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    background: var(--text-dark);
    color: var(--accent-yellow);
    font-weight: var(--weight-ui);
    transition: transform var(--transition-glass);
}

.lx-cta:hover {
    transform: translateY(-1px);
}


/* Black marker with a yellow numeral (process phase numbers) */
.lx-badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--text-dark);
    color: var(--accent-yellow);
    font-size: var(--text-micro);
    font-weight: var(--weight-emphasis);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.lx-link {
    flex: none;
    font-weight: var(--weight-ui);
    color: var(--text-dark);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

/* ── Load sequence: headline lines, then intro, then the film ──
   Initial hidden states live only inside no-preference, so with
   reduced motion everything simply renders in its final state. */
@media (prefers-reduced-motion: no-preference) {
    .lx-line > span {
        transform: translateY(105%);
        animation: lx-rise 0.9s var(--lx-ease) forwards;
        animation-delay: calc(80ms + var(--i) * 90ms);
    }

    .lx-intro,
    .lx-film {
        opacity: 0;
        transform: translateY(16px);
        animation: lx-settle 0.9s var(--lx-ease) forwards;
    }

    .lx-intro {
        animation-delay: 380ms;
    }

    .lx-film {
        animation-delay: 520ms;
    }
}

@keyframes lx-rise {
    to { transform: translateY(0); }
}

@keyframes lx-settle {
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .lx-hero {
        padding-top: 132px;
        padding-bottom: var(--space-16);
    }

    .lx-actions {
        flex-wrap: wrap;
    }

    .lx-film {
        margin-top: var(--space-10);
        border-radius: 24px;
    }

    .lx-film-toggle {
        right: var(--space-3);
        bottom: var(--space-3);
    }
}

/* =================================================================
   SECTIONS BELOW THE HERO
   Same content as the current homepage, re-set. One shared
   vocabulary: a dotted guide (the arrow's dots) opens each section
   and row, and yellow-on-ink markers carry over from the callouts.
   ================================================================= */
main {
    padding-bottom: 0;
}

.lx-section {
    padding-block: var(--space-24);
}

/* style.css fades every <section> in; respect reduced motion here */
@media (prefers-reduced-motion: reduce) {
    section {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.lx-head,
.lx-xrow,
.lx-focus li,
.lx-schedule {
    background-image: radial-gradient(circle at 4px 1.5px, rgba(4, 0, 3, 0.3) 1px, transparent 1.4px);
    background-size: 8px 3px;
    background-repeat: repeat-x;
}

.lx-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-6);
    padding-top: var(--space-6);
    margin-bottom: var(--space-12);
}

.lx-h2 {
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: var(--weight-ui);
    text-wrap: balance;
}

.lx-eyebrow {
    font-size: var(--text-caption);
    line-height: var(--text-caption-lh);
    font-weight: var(--weight-ui);
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin-bottom: var(--space-10);
}

/* ── Clients ───────────────────────────────────────────────────── */
.lx-clients {
    padding-block: var(--space-20) var(--space-16);
}

.lx-logos {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-10) var(--space-8);
    align-items: center;
}

.lx-logos li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
}

.lx-logos img {
    width: 100%;
    max-width: 120px;
    height: 40px;
    object-fit: contain;
    /* same flat grey as the current marquee */
    filter: brightness(0) saturate(100%) invert(29%) sepia(2%) saturate(0%) hue-rotate(185deg) brightness(97%) contrast(90%);
    opacity: 0.65;
    transition: opacity 0.3s ease;
}

.lx-logos img:hover {
    opacity: 1;
}

/* this SVG carries extra internal padding */
.lx-logos .lx-logo--tall {
    height: 61px;
}

.lx-logos-more {
    font-size: var(--text-caption);
    line-height: var(--text-caption-lh);
    color: var(--text-muted);
    text-align: center;
}

/* ── Expertise index ───────────────────────────────────────────── */
.lx-expertise {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-12);
    /* media panel stretches to the list's height: no gap beneath */
    align-items: stretch;
}

.lx-xlist {
    list-style: none;
}

.lx-xlist li:last-child .lx-xrow {
    padding-bottom: 0;
}

.lx-xrow {
    display: block;
    padding: var(--space-6) 0 var(--space-8);
    color: var(--text-muted);
    transition: color 0.4s var(--lx-ease);
}

.lx-xrow.is-active {
    color: var(--text-dark);
}

/* Active row: the heading is highlighted in sunlight yellow, swept in
   left to right. Yellow as a fill behind dark text (as on the
   Get In Touch pill) — yellow text itself would be unreadable. */
.lx-xrow-title {
    display: inline;
    padding: 0.04em 0.28em;
    margin-left: -0.28em;
    border-radius: 0.3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-image: linear-gradient(var(--accent-yellow), var(--accent-yellow));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.5s var(--lx-ease);
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    line-height: 1.35;
    letter-spacing: -0.02em;
    font-weight: var(--weight-ui);
}

.lx-xrow.is-active .lx-xrow-title {
    background-size: 100% 100%;
}

.lx-xrow-desc {
    display: block;
    margin-top: var(--space-2);
    max-width: 46ch;
    font-size: var(--text-callout);
    line-height: var(--text-callout-lh);
    color: var(--text-muted);
}

.lx-xmedia {
    position: relative;
    min-height: 360px;
    border-radius: var(--lx-radius-plate);
    overflow: hidden;
    background: var(--bg-2);
}

.lx-xmedia > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s var(--lx-ease);
}

.lx-xmedia > .is-active {
    opacity: 1;
}

/* ── Focus ─────────────────────────────────────────────────────── */
.lx-focus {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
}

.lx-focus li {
    padding-top: var(--space-8);
}

.lx-focus h3 {
    max-width: 12ch;
    margin-bottom: var(--space-3);
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: var(--weight-ui);
}

.lx-focus p {
    font-size: var(--text-callout);
    line-height: var(--text-callout-lh);
    color: var(--text-muted);
}

/* ── Selected work bento ────────────────────────────────────────
   Linked project tiles: a glass label with name, one line and the
   dotted arrow, and they respond to hover. Plain tiles are work
   imagery only — no label, no arrow, not links. */
.lx-bento {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(180px, 19vw, 280px);
    grid-auto-flow: dense;
    gap: var(--space-4);
}

.lx-b {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: var(--bg-2);
}

.lx-b--wide {
    grid-column: span 2;
}

.lx-b--big {
    grid-column: span 2;
    grid-row: span 2;
}

.lx-b-link {
    display: block;
    height: 100%;
}

.lx-b img,
.lx-b video,
.lx-phase-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--lx-ease);
}

.lx-b--play:hover video,
.lx-b--project:hover img,
.lx-phase:hover video {
    transform: scale(1.03);
}

/* Still tiles have no motion of their own, so on hover they get a
   slower, deeper push-in */
.lx-b > img {
    transition: transform 1.4s var(--lx-ease);
}

.lx-b:hover > img {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .lx-b img,
    .lx-b video,
    .lx-phase-media video {
        transition: none;
        transform: none !important;
    }
}

.lx-b-label {
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
    border-radius: 20px;
    background: var(--glass-tint);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(4, 0, 3, 0.07);
    box-shadow: var(--glass-shadow);
    transition: background var(--transition-glass);
}

.lx-b-text {
    min-width: 0;
}

.lx-b-name {
    display: block;
    font-size: var(--text-h4);
    line-height: var(--text-h4-lh);
    letter-spacing: -0.02em;
    font-weight: var(--weight-ui);
    color: var(--text-dark);
}

.lx-b-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-caption);
    line-height: var(--text-caption-lh);
    color: var(--text-muted);
}

.lx-b-arrow {
    flex: none;
    width: 40px;
    height: 40px;
    color: var(--text-dark);
}

/* grey, not white, so it still reads on white product shots */
.lx-b-arrow-bg {
    fill: var(--bg-1);
    transition: fill var(--transition-glass);
}

.lx-b--project:hover .lx-b-label {
    background: var(--glass-tint-hover);
}

.lx-b--project:hover .lx-b-arrow-bg,
.lx-b--project .lx-b-link:focus-visible .lx-b-arrow-bg,
.lx-b--more:hover .lx-b-arrow-bg {
    fill: var(--accent-yellow);
}

.lx-b-link:focus-visible {
    outline: 2px solid var(--text-dark);
    outline-offset: -4px;
    border-radius: 24px;
}

/* Closing tile: a plain panel, same label language */
.lx-b--more {
    background: var(--text-dark);
}

.lx-b--more .lx-b-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-6);
}

.lx-b--more .lx-b-name {
    color: var(--accent-yellow);
}

/* ── Process ───────────────────────────────────────────────────── */
.lx-process {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}

.lx-phase {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* number marker, then a dotted connector running to the next phase */
.lx-phase-num {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-micro);
    font-weight: var(--weight-emphasis);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.lx-phase-num::after {
    content: '';
    flex: 1;
    height: 3px;
    background-image: radial-gradient(circle at 4px 1.5px, rgba(4, 0, 3, 0.3) 1px, transparent 1.4px);
    background-size: 8px 3px;
}

.lx-phase-name {
    margin-top: var(--space-3);
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: var(--weight-ui);
}

.lx-phase-steps {
    font-size: var(--text-callout);
    line-height: 1.7;
    color: var(--text-muted);
}

.lx-phase-media {
    display: block;
    margin-top: var(--space-3);
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    background: var(--bg-2);
}

/* ── Schedule ──────────────────────────────────────────────────── */
.lx-schedule {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-12);
    align-items: start;
    padding-top: var(--space-6);
}

.lx-schedule-copy {
    position: sticky;
    top: 140px;
}

.lx-schedule-copy p {
    margin-top: var(--space-6);
    max-width: 34ch;
    font-size: var(--text-lead);
    line-height: var(--text-lead-lh);
    color: var(--text-muted);
}

.lx-schedule-copy .lx-schedule-alt {
    font-size: var(--text-callout);
}

.lx-calendly {
    height: 720px;
    border-radius: var(--lx-radius-plate);
    overflow: hidden;
    background: var(--lx-paper);
}

/* ── Closing + footer ──────────────────────────────────────────── */
.lx-closing {
    padding-block: var(--space-16) var(--space-24);
}

.lx-closing p {
    max-width: 18ch;
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: var(--weight-ui);
}

footer.lx-footer {
    margin-top: 0;
    padding-block: var(--space-10);
    border-top: 1px solid var(--lx-rule);
}

.lx-footer-top,
.lx-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.lx-footer-logo img {
    display: block;
    width: 48px;
    height: 48px;
}

.lx-footer-nav,
.lx-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
}

.lx-footer-nav {
    font-size: var(--text-callout);
    font-weight: var(--weight-ui);
}

.lx-footer-bottom {
    margin-top: var(--space-10);
    font-size: var(--text-caption);
    color: var(--text-muted);
}

.lx-footer a:hover {
    color: var(--text-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Narrow screens ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lx-section {
        padding-block: var(--space-16);
    }

    .lx-head {
        flex-wrap: wrap;
        margin-bottom: var(--space-8);
    }

    .lx-logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-8) var(--space-4);
    }

    .lx-expertise,
    .lx-focus,
    .lx-schedule {
        grid-template-columns: 1fr;
    }

    .lx-focus {
        gap: var(--space-2);
    }

    .lx-xmedia {
        align-self: start;
        min-height: 0;
        order: -1;
        aspect-ratio: 16 / 10;
        border-radius: 24px;
    }

    .lx-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 44vw;
        gap: var(--space-3);
    }

    .lx-b--big {
        grid-row: span 2;
    }

    .lx-b-label {
        left: var(--space-3);
        right: var(--space-3);
        bottom: var(--space-3);
        padding-left: var(--space-4);
    }

    .lx-b-desc {
        display: none;
    }

    .lx-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-10) var(--space-4);
    }

    .lx-schedule-copy {
        position: static;
    }

    .lx-calendly {
        height: 1000px;
        border-radius: 24px;
    }
}

@media (max-width: 560px) {
    .lx-process {
        grid-template-columns: 1fr;
    }

    .lx-phase-media {
        aspect-ratio: 16 / 10;
    }
}