/* ==========================================================================
   ServiceLine — Home
   --------------------------------------------------------------------------
   Hero (WebGL environment + editorial headline), manifesto, marquee,
   the RAW/PLAN/BUILD/FINISH journey, and the three teaser sections.
   Loaded only on the home route (see resources/layouts/partials/meta.php).

   Progressive enhancement: everything below is styled in its VISIBLE
   resting state — the entrance/scroll animation (pages/home/*.js) sets
   its own initial states via GSAP at runtime. No-JS and no-GSAP
   visitors always get a complete, static hero.
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-obsidian);
}

/* Photographic environment — the RAW lot under a heavy dark grade
   (Phase 01). This is the no-JS / reduced-motion resting state; the
   JS entrance opens far closer and darker, then resolves to roughly
   this framing. Object-position favours the ground plane so the crop
   reads as raw material, not sky, at every viewport. */
.hero__photo {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
    overflow: hidden;
}

.hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    transform: scale(1.12);
    will-change: transform;
    filter: saturate(0.68) brightness(0.58) contrast(1.07);
}

.hero__canvas {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 1);
    width: 100%;
    height: 100%;
    display: block;
}

.hero__vignette {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 2);
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10, 10, 11, 0.88) 0%, rgba(10, 10, 11, 0.55) 34%, transparent 62%),
        linear-gradient(180deg, rgba(10, 10, 11, 0.62) 0%, transparent 30%, transparent 58%, rgba(10, 10, 11, 0.9) 100%);
}

.hero__setout {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 3);
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
}

.hero__setout [data-setout-line] {
    fill: none;
    stroke: rgba(242, 240, 236, 0.28);
    stroke-width: 1;
}

.hero__setout [data-setout-accent] {
    stroke: rgba(241, 90, 41, 0.5);
}

@media (max-width: 767px) {
    .hero__setout {
        display: none; /* hairlines read as clutter at phone scale */
    }
}

.hero__sweep {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 26vw;
    z-index: calc(var(--z-base) + 2);
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 226, 194, 0.05) 40%, rgba(241, 90, 41, 0.045) 55%, transparent);
    transform: translateX(-30vw) skewX(-8deg);
    animation: hero-sweep 14s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes hero-sweep {
    0%, 62%   { transform: translateX(-32vw) skewX(-8deg); }
    78%       { transform: translateX(132vw) skewX(-8deg); }
    100%      { transform: translateX(132vw) skewX(-8deg); }
}

.hero__grain {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 4);
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: var(--z-content);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Extra bottom padding reserves room for the absolute meta bar —
       CTAs were overlapping it on shorter viewports. */
    padding-block: var(--space-10) clamp(9rem, 20vh, 12rem);
}

@media (max-height: 720px) {
    .hero__headline {
        font-size: clamp(2.25rem, 5.6vw, 4.5rem);
    }
}

/* Mobile: recompute the display headline for a narrow column so the
   heavier, tighter caps never overflow or force a horizontal scroll.
   Composition is redesigned for portrait — the headline sits lower,
   giving the raw material more of the frame above it. */
.hero {
    min-height: min(90vh, 760px);
}

@media (max-width: 767px) {
    .hero {
        min-height: min(90vh, 720px);
    }

    .hero__photo img {
        object-position: center 44%;
    }

    .hero__content {
        justify-content: flex-end;
        padding: var(--space-7) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
        width: min(100%, 92vw);
        margin-inline: auto;
    }

    .hero__headline {
        font-size: clamp(2.4rem, 9.5vw, 3.2rem);
        max-width: 13ch;
        line-height: 1.04;
        margin-bottom: var(--space-4);
    }

    .hero__eyebrow {
        margin-bottom: var(--space-4);
    }

    .hero__sub {
        font-size: 1rem;
        max-width: 28rem;
        margin-top: var(--space-5);
    }

    .hero__ctas {
        flex-direction: column;
        gap: var(--space-4);
        margin-top: var(--space-6);
    }

    .hero__ctas .btn {
        width: 100%;
        max-width: 100%;
    }

    .hero__meta {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        margin-top: var(--space-6);
    }

    .hero__meta > * {
        width: 100%;
    }

    .hero__scroll-hint {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--space-3);
    }

    .hero__scroll-line {
        height: 36px;
    }

    .hero__meta > .text-meta:last-child {
        display: block;
    }
}

@media (max-width: 640px) {
    .hero__headline {
        font-size: clamp(2.2rem, 11vw, 3.0rem);
        max-width: 12ch;
    }
    .hero__content {
        padding: var(--space-6) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    }
    .hero__sub {
        margin-top: var(--space-4);
    }
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.hero__eyebrow-rule {
    display: inline-block;
    width: 44px;
    height: 1px;
    background-color: var(--accent);
    transform-origin: left center;
}

.hero__headline {
    max-width: 16ch;
}

.hero__line-mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.06em; /* keep descenders inside the mask */
    margin-bottom: -0.06em;
}

.hero__line {
    display: inline-block;
    will-change: transform;
}

.hero__sub {
    max-width: 34rem;
    margin-top: var(--space-6);
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-7);
}

/* ---- Bottom meta bar ------------------------------------------------------- */

.hero__meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-content);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-6) var(--container-gutter);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hero__scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.hero__scroll-line {
    position: relative;
    width: 1px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.hero__scroll-line-fill {
    position: absolute;
    inset: 0;
    background-color: var(--accent);
    transform-origin: top center;
}

@media (max-width: 767px) {
    .hero__meta {
        position: relative;
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--space-4);
        padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .hero__meta > * {
        width: 100%;
    }

    .hero__meta > .text-meta:last-child {
        display: block;
    }
}

/* ==========================================================================
   Manifesto
   ========================================================================== */

.manifesto {
    position: relative;
    padding-block: var(--space-11) var(--space-10);
}

.manifesto__headline {
    margin-top: var(--space-6);
    max-width: 18ch;
}

.manifesto__body {
    max-width: 42rem;
    margin-top: var(--space-7);
}

/* ==========================================================================
   Marquee — RAW / PLAN / BUILD / FINISH strip
   ========================================================================== */

.marquee {
    overflow: hidden;
    padding-block: var(--space-7);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.marquee__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.marquee__term {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.9rem, 7vw, 4.2rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-concrete-500);
    padding-inline: var(--space-5);
    transition: color var(--duration-section) var(--ease-precise);
}

@media (max-width: 767px) {
    .marquee__term {
        font-size: clamp(1.65rem, 8vw, 3.2rem);
        padding-inline: var(--space-4);
    }
}

.marquee__term:hover {
    color: var(--accent);
    -webkit-text-stroke-color: var(--accent);
}

.marquee__dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background-color: var(--accent);
}

/* ==========================================================================
   The Brick — pinned cinematic scene
   --------------------------------------------------------------------------
   See resources/components/brick-scene.php + pages/home/brick-scene.js.
   ========================================================================== */

.brick-scene {
    position: relative;
    background:
        radial-gradient(ellipse 60% 45% at 50% 78%, rgba(46, 46, 48, 0.5), transparent 65%),
        var(--color-obsidian);
}

.brick-scene__pin {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.brick-scene__canvas {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
    width: 100%;
    height: 100%;
    display: block;
}

/* Mobile: the SAME pinned fullscreen scene — the pin stays 100vh, the canvas
   fills the frame, the headline stays pinned to the top and the captions to
   the bottom (all from the base rules below). Only responsive sizing changes:
   a slightly higher headline and lifted captions so both clear the phone's
   safe areas over the fullscreen brick. NO position/height overrides — those
   were what broke the pin geometry and opened the black gap. */
@media (max-width: 767px) {
    .brick-scene__headline {
        top: clamp(3.5rem, 12vh, 6rem);
        gap: var(--space-3);
    }
    .brick-scene__captions {
        bottom: calc(clamp(2.5rem, 9vh, 5rem) + env(safe-area-inset-bottom));
    }
}

.brick-scene__grain {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 1);
    pointer-events: none;
}

.brick-scene__headline {
    position: absolute;
    top: clamp(4.5rem, 11vh, 7rem);
    left: 0;
    right: 0;
    z-index: var(--z-content);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-inline: var(--container-gutter);
    pointer-events: none;
    opacity: 0;
}

.brick-scene__captions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(3rem, 10vh, 6rem);
    z-index: var(--z-content);
    pointer-events: none;
}

.brick-scene__caption {
    position: absolute;
    left: var(--container-gutter);
    right: var(--container-gutter);
    bottom: 0;
    max-width: 30rem;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    opacity: 0;
}

.brick-scene__caption-index {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    color: var(--accent);
    letter-spacing: var(--tracking-wide);
}

/* ---- Static fallback --------------------------------------------------------- */

.brick-scene--static .brick-scene__pin {
    height: auto;
    overflow: visible;
    padding-block: var(--space-10);
}

.brick-scene--static .brick-scene__canvas {
    display: none;
}

.brick-scene--static .brick-scene__headline {
    position: static;
    opacity: 1;
    margin-bottom: var(--space-7);
}

.brick-scene--static .brick-scene__captions {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.brick-scene--static .brick-scene__caption {
    position: static;
    opacity: 1;
}

/* ==========================================================================
   The Journey — RAW / PLAN / BUILD / FINISH
   --------------------------------------------------------------------------
   See resources/components/journey.php + pages/home/journey.js.
   `.journey--stacked` is the reduced-motion / GSAP-unavailable
   fallback: plain stacked flow, no pin, no canvas.
   ========================================================================== */

.journey {
    position: relative;
    background-color: var(--stage-raw-bg);
}

.journey__pin {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

@media (max-width: 767px) {
    /* The SAME pinned crossfade sequence — the pin stays 100vh and the
       frames, intro and stages stay absolutely layered inside it (base
       rules). Only responsive sizing changes: the copy column goes full
       width and the side progress ticks are hidden. NO position:static —
       that was what let the stages overflow the clipped 100vh pin and get
       cut off. */
    .journey__stage {
        padding: var(--space-8) var(--space-5);
    }
    .journey__stage-content {
        max-width: 100%;
        margin-left: 0;
    }
    .journey__progress {
        display: none;
    }
}

/* Photographic frames — the four AI keyframes of the same lot. */
.journey__frames {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
}

.journey__frame {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.journey__frame:first-child {
    opacity: 1; /* pre-JS default: RAW visible */
}

.journey__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    filter: saturate(0.9) brightness(0.82);
}

.journey__seam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6%;
    width: 2px;
    background-color: var(--accent);
    box-shadow: 0 0 30px 4px rgba(241, 90, 41, 0.55);
    opacity: 0;
    z-index: 2;
}

.journey__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(10, 10, 11, 0.82) 0%, rgba(10, 10, 11, 0.45) 40%, transparent 68%),
        linear-gradient(180deg, rgba(10, 10, 11, 0.6) 0%, transparent 30%, transparent 60%, rgba(10, 10, 11, 0.78) 100%);
}

.journey__exit-fade {
    position: absolute;
    inset: 0;
    z-index: 3;
    background-color: var(--color-charcoal); /* the next section's surface */
    opacity: 0;
    pointer-events: none;
}

.journey__intro {
    position: absolute;
    inset: 0;
    z-index: var(--z-content);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-5);
    max-width: 46rem;
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}

.journey__intro .section-header,
.journey__intro .text-display {
    text-align: center;
}

.journey__stages {
    position: absolute;
    inset: 0;
    z-index: var(--z-content);
}

.journey__stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: var(--space-9) var(--container-gutter);
    opacity: 0;
    pointer-events: none;
}

.journey__stage-content {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    margin-left: clamp(0px, 5vw, 6rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Copy sits over the darkened left side of the photos (see
   .journey__shade) — always light text, every stage. */
.journey__stage .stage-badge {
    background-color: rgba(10, 10, 11, 0.45);
    backdrop-filter: blur(4px);
}

.journey__progress {
    position: absolute;
    left: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-content);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.journey__progress-tick {
    position: relative;
    width: 2px;
    height: 44px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.14);
}

.journey__progress-tick-fill {
    position: absolute;
    inset: 0;
    background-color: var(--accent);
    transform: scaleY(0);
    transform-origin: top center;
}

/* ---- Stacked fallback (reduced motion, or GSAP unavailable) ------------------ */

.journey--stacked .journey__pin {
    height: auto;
    overflow: visible;
}

.journey--stacked .journey__seam,
.journey--stacked .journey__shade,
.journey--stacked .journey__progress {
    display: none;
}

.journey--stacked .journey__frames {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-inline: var(--container-gutter);
    padding-top: var(--space-8);
}

.journey--stacked .journey__frame {
    position: static;
    opacity: 1;
}

.journey--stacked .journey__frame img {
    aspect-ratio: 16 / 9;
    filter: none;
}

.journey--stacked .journey__stages {
    position: static;
}

.journey--stacked .journey__intro {
    position: static;
    padding-block: var(--space-9) var(--space-6);
}

.journey--stacked .journey__stage {
    position: static;
    opacity: 1;
    pointer-events: auto;
    padding-block: var(--space-8);
    border-top: var(--line-thin);
}

@media (max-width: 767px) {
    .journey__progress {
        display: none;
    }

    .journey__stage-content {
        max-width: 100%;
        margin-left: 0;
    }
}

/* ==========================================================================
   Capabilities teaser
   ========================================================================== */

.capability-teaser-grid {
    margin-top: var(--space-9);
    display: grid;
    gap: 1px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .capability-teaser-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.capability-teaser-card {
    position: relative;
    background-color: var(--surface-secondary);
    padding: var(--space-7) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 17rem;
    overflow: hidden;
    transition: background-color var(--duration-section) var(--ease-precise);
}

@media (max-width: 767px) {
    .capability-teaser-card {
        padding: var(--space-6) var(--space-5);
        min-height: auto;
    }
}

.capability-teaser-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-section) var(--ease-reveal);
}

.capability-teaser-card:hover {
    background-color: var(--color-charcoal-raised);
}

.capability-teaser-card:hover::after {
    transform: scaleX(1);
}

.capability-teaser-card__index {
    font-family: var(--font-display);
    color: var(--accent);
    font-size: 0.875rem;
}

.capability-teaser-card__title {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    letter-spacing: -0.01em;
}

/* ==========================================================================
   Work teaser
   ========================================================================== */

.work-teaser-grid {
    margin-top: var(--space-9);
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .work-teaser-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.work-teaser-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    transition: transform var(--duration-section) var(--ease-reveal);
}

.work-teaser-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 100%;
    height: 1px;
    background-color: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-section) var(--ease-reveal);
}

.work-teaser-card:hover {
    transform: translateY(-4px);
}

.work-teaser-card:hover::before {
    transform: scaleX(1);
}

.work-teaser-card__media {
    overflow: hidden;
    background-color: var(--color-charcoal);
    margin-bottom: var(--space-2);
}

.work-teaser-card__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 800ms var(--ease-heavy), filter var(--duration-section) var(--ease-precise);
    filter: saturate(0.8) brightness(0.8);
}

@media (max-width: 767px) {
    .work-teaser-card__media img {
        aspect-ratio: 16 / 9;
        object-position: center 44%;
    }
}

.work-teaser-card:hover .work-teaser-card__media img {
    transform: scale(1.06);
    filter: saturate(1) brightness(0.94);
}

.work-teaser-card__title {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
}

/* ==========================================================================
   About teaser
   ========================================================================== */

.about-teaser {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 992px) {
    .about-teaser {
        grid-template-columns: 1fr 1fr;
    }
}

.about-teaser__body {
    max-width: 32rem;
}

@media (max-width: 767px) {
    .about-teaser__body {
        max-width: 100%;
    }
}

/* ===========================================================================
   Typography composition
   ======================================================================== */

@media (min-width: 768px) {
    .hero__headline { max-width: var(--measure-display-wide); }
    .hero__sub {
        max-width: var(--measure-body-narrow);
        margin-top: var(--space-7);
    }
    .hero__eyebrow { margin-bottom: var(--space-5); }
}

.manifesto__headline {
    max-width: 13ch;
    margin-top: var(--space-7);
}
.manifesto__body {
    max-width: var(--measure-body);
    margin-top: var(--space-8);
}

.marquee__term {
    font-size: var(--type-display-lg);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
}

.journey__intro { max-width: 42rem; }
.journey__stage-content { max-width: var(--measure-body-narrow); }
.journey__stage-headline { max-width: 12ch; }
.journey__stage-body { max-width: 30rem; }

.capability-teaser-card__title,
.work-teaser-card__title {
    font-size: var(--type-subheading);
    line-height: var(--leading-subheading);
    letter-spacing: -0.018em;
}

@media (max-width: 640px) {
    .hero__headline {
        font-size: var(--type-display-xl);
        max-width: var(--measure-display-compact);
    }
    .hero__sub { margin-top: var(--space-5); }
    .hero__ctas { margin-top: var(--space-6); }
    .manifesto { padding-block: var(--space-10) var(--space-9); }
    .manifesto__headline { max-width: var(--measure-display-compact); }
    .manifesto__body { max-width: 100%; margin-top: var(--space-6); }
    .journey__intro { text-align: left; align-items: flex-start; }
    .journey__intro .section-header,
    .journey__intro .text-display { text-align: left; }
}