/* =========================
   HOME PAGE
========================= */

/* -------------------------
   HERO
------------------------- */
.hero-section {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background: #000;
}

/* -------------------------
   HOME HERO — WebGL canvas + CSS-blob fallback
   The blob CSS (aurora-blob--*, keyframes, grain) lives in site.css so it
   is shared with inner pages. Only the home-specific wrapper rules are here.
------------------------- */

/* CSS-blob fallback: hidden until the WebGL self-heal reveals it */
.hero-aurora-css {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #000;
    display: none;
}
.hero-section.aurora-fallback .hero-aurora-css { display: block; }

.hero-aurora__field {
    position: absolute;
    inset: -14%;
    filter: blur(58px);
}

/* -------------------------
   AURORA WEBGL HERO BG
------------------------- */
.hero-aurora {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
}

.hero-blob-wrap { display: none; }

.hero-blob,
.hero-blob::before,
.hero-blob::after { display: none; }

.hero-section__bg { display: none; }



.hero-section__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100svh;
    max-width: none;
    margin: 0;
    padding: 0;
}

.hero-section__composition {
    position: absolute;
    left: 50%;
    top: 72%;
    transform: translate(-50%, -50%);
    width: min(1380px, calc(100% - 100px));
    display: grid;
    grid-template-columns: minmax(0, 900px) minmax(240px, 380px);
    align-items: center;
    column-gap: clamp(28px, 4vw, 64px);
}

.hero-showreel {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0e0e0e;
    pointer-events: none;
    transform-origin: center center;
    /* The block masks the video — overflow clips it to whatever size the
       block is scaled to during the reveal, so the video always fills it. */
    overflow: hidden;
    /* Hidden at rest (top of hero); GSAP scales/fades it in on scroll.
       Matches the gsap.set initial state, so there's no black flash
       before the script runs. */
    opacity: 0;
}

.hero-showreel__video {
    width: 100%;
    height: 100%;
    /* cover → fills the block at any size (no black bars); the block clips it */
    object-fit: cover;
}

.hero-section__text {
    justify-self: start;
    align-self: center;
    max-width: 900px;
}

.hero-section__headline {
    margin: 0;
    max-width: 13ch;
    color: #ffffff !important;
    font-size: var(--fs-h1) !important;
    line-height: var(--lh-heading) !important;
    font-weight: var(--fw-heading) !important;
    letter-spacing: var(--ls-heading) !important;
    text-align: left !important;
    font-family: var(--font-heading) !important;
}

.hero-section__logo {
    justify-self: end;
    align-self: center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hero-section__logo-image {
    width: clamp(290px, 26vw, 440px);
    height: auto;
    display: block;
}

.hero-section__circle { display: none; }

/* -------------------------
   BRAND BUILDER
------------------------- */
.brand-builder-section {
    position: relative;
    background:
        radial-gradient(130% 70% at 50% -16%, rgba(244,191,0,0.28) 0%, rgba(255,122,0,0.10) 34%, rgba(242,239,231,0) 64%),
        var(--ci-linen, #f2efe7);
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 5vw;
    overflow: hidden;
}

.brand-builder-section__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 5;
    width: 100%;
}

.brand-builder-section__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--ci-blue, #15275c);
    margin-bottom: 40px;
}

.brand-builder-section__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(21, 39, 92, 0.65);
    font-weight: var(--fw-body);
}

.brand-builder-section__circle {
    display: none;
}

/* White-text inversion layer — full-section overlay, clip-path tracks fill scaleY 1:1.
   Because inset(100%→0%) uses the section height as its coordinate space (same as scaleY),
   the inversion boundary rises in pixel-perfect sync with the orange fill. */
.bb-white-layer {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    display: flex;
    align-items: center;
    padding: 0 5vw;
}
.bb-content--white {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.bb-content--white .brand-builder-section__title { color: #ffffff; }
.bb-content--white .brand-builder-section__text  { color: rgba(255, 255, 255, 0.85); }

.brand-builder-squiggle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.brand-builder-fill {
    position: absolute;
    inset: 0;
    background: #f26200;
    transform-origin: bottom center;
    transform: scaleY(0);
    pointer-events: none;
    z-index: 1;
}

/* Linen curtain — rises above everything (text + fill) as the final exit wipe,
   matching the Services section's linen so the handoff is seamless. */
.brand-builder-curtain {
    position: absolute;
    inset: 0;
    background: var(--ci-linen, #f2efe7);
    transform-origin: bottom center;
    transform: scaleY(0);
    pointer-events: none;
    z-index: 7;
}

@media (max-width: 768px) {
    /* Keep full-height + the squiggle/fill so the pinned draw + flood
       animation runs on mobile exactly as on desktop. */
    .brand-builder-section {
        padding: 0 24px;
    }
    /* White inversion layer must use the SAME horizontal padding as the section,
       or the two text layers wrap differently and the inversion misaligns. */
    .bb-white-layer {
        padding: 0 24px;
    }
}


/* -------------------------
   SERVICES + OUR WORK — shared pin block
   Both sections sit as absolute layers inside this wrapper so the
   bottom-up clip wipe continues uninterrupted from service panels
   into the Our Work images — one pin, one timeline.
------------------------- */
.services-work-block {
    position: relative;
    height: 100vh;
}

/* Desktop: class set synchronously by inline <body> script before first paint,
   then managed by gsap.matchMedia — avoids the hard 769px cliff edge */
.desktop-anim .services-work-block {
    margin-top: -40vh;
    z-index: 101;
}

.services-section {
    position: absolute;
    inset: 0;
}

.services-section__panels {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── Panel base ── */
.service-panel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--panel-bg, #edebe5);
    display: flex;
    flex-direction: column;
}

.service-panel:nth-child(1) {
    --panel-bg: var(--ci-linen, #f2efe7);
    --panel-text: var(--ci-blue, #15275c);
    --panel-text-muted: rgba(21, 39, 92, 0.55);
    --panel-border: rgba(21, 39, 92, 0.15);
    --panel-num: rgba(21, 39, 92, 0.055);
}

.service-panel:nth-child(2) {
    --panel-bg: var(--ci-blue-deep, #0f1c45);
    --panel-text: #f2f2f0;
    --panel-text-muted: rgba(242, 242, 240, 0.55);
    --panel-border: rgba(255, 255, 255, 0.14);
    --panel-num: rgba(244, 191, 0, 0.07);
}

.service-panel:nth-child(3) {
    --panel-bg: #f4bf00;
    --panel-text: #111111;
    --panel-text-muted: rgba(17, 17, 17, 0.62);
    --panel-border: rgba(17, 17, 17, 0.18);
    --panel-num: rgba(0, 0, 0, 0.09);
}

/* ── Image background (CMS opt-in) — overrides the colour scheme above with a
   cover image, a dark scrim, and light text for legibility ── */
.service-panel--image {
    background-image: var(--panel-image);
    background-size: cover;
    background-position: center;
    --panel-text: #ffffff;
    --panel-text-muted: rgba(255, 255, 255, 0.8);
    --panel-border: rgba(255, 255, 255, 0.3);
    --panel-num: rgba(255, 255, 255, 0.12);
}

.service-panel--image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 0;
}

.service-panel--image .service-panel__inner {
    z-index: 1;
}

/* ── Panel inner layout — all children absolutely positioned so
   content sits at identical coordinates on every panel, making
   the clip-path wipe feel seamless ── */
.service-panel__inner {
    position: relative;
    height: 100%;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

/* ── Top bar — pinned to top ── */
.service-panel__topbar {
    position: absolute;
    top: clamp(32px, 5vh, 56px);
    left: clamp(28px, 5vw, 80px);
    right: clamp(28px, 5vw, 80px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: clamp(18px, 2.5vh, 32px);
    border-bottom: 1px solid var(--panel-border, rgba(0, 0, 0, 0.12));
}

.service-panel__eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--panel-text-muted);
}

.service-panel__counter {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-body);
    letter-spacing: 0.08em;
    color: var(--panel-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Body content — vertically centred ── */
.service-panel__body {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: clamp(28px, 5vw, 80px);
    right: clamp(28px, 5vw, 80px);
    max-width: 680px;
}

.service-panel__title {
    font-size: var(--fs-h1);
    font-weight: var(--fw-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--panel-text);
    margin: 0 0 clamp(20px, 3vh, 36px);
}

.service-panel__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--panel-text-muted);
    font-weight: var(--fw-body);
    max-width: 44ch;
    margin: 0 0 clamp(24px, 3.5vh, 44px);
}

.service-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--panel-text);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 6px;
    transition: opacity 0.2s ease, gap 0.2s ease;
}

.service-panel__cta:hover {
    opacity: 0.65;
    gap: 14px;
}

/* ── Decorative background number ── */
.service-panel__num {
    position: absolute;
    right: clamp(-10px, -1vw, 0px);
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(18rem, 32vw, 44rem);
    font-weight: 300;
    line-height: 0.8;
    letter-spacing: -0.06em;
    color: var(--panel-num, rgba(0, 0, 0, 0.06));
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

/* ── Mobile: same pinned/clip animation as desktop — sizing tweaks only ── */
@media (max-width: 768px) {
    .service-panel__inner {
        padding: 88px 24px 64px;
    }

    .service-panel__topbar {
        position: absolute;
        top: 24px;
        left: 24px;
        right: 24px;
        padding-bottom: clamp(14px, 2vh, 22px);
    }

    .service-panel__body {
        max-width: 36ch;
    }

    /* Scale down the ghost number so it doesn't dominate */
    .service-panel__num {
        font-size: clamp(7rem, 38vw, 13rem);
        right: -4px;
        top: 50%;
        transform: translateY(-50%);
    }

    .service-panel__title {
        font-size: clamp(1.6rem, 9vw, 3.6rem);
    }
}

/* -------------------------
   OUR WORK
   Absolute layer inside .services-work-block — wipes in over the last
   service panel as part of the shared timeline in initServicesWorkAnimation.
------------------------- */
.our-work-section {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000000;
    z-index: 2;
}

.our-work-section__slider {
    position: relative;
    width: 100%;
    height: 100%;
    will-change: clip-path;
    /* Initial clipped state is applied by JS on desktop only, so the
       section stays fully visible without JS / on reduced motion. */
}

.our-work-section__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    will-change: clip-path;
}

/* First image sits on top of the stack (JS re-stacks by index for the cycle) */
.our-work-section__slide.is-active {
    z-index: 2;
}

.our-work-section__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.our-work-section__overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.our-work-section__title {
    color: #ffffff;
    font-size: var(--fs-h2);
    font-weight: var(--fw-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    margin-bottom: 24px;
}

.our-work-section__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border: 1.5px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
    font-size: var(--fs-small);
    font-weight: var(--fw-body);
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.04);
}

.our-work-section__button:hover {
    background: #ffffff;
    color: #000000;
}


/* ════════════════════════════════════════════════════════════════
   CIRCLE GALLERY — "Our Clients" orbit (replaces the old 3D ring)
   ════════════════════════════════════════════════════════════════
   Scroll-driven 3D card orbit, adapted from the standalone package to
   the Mezzo linen / light palette. Motion constants live at the top of
   /js/circle-gallery.js; all visual styling lives here.
   ════════════════════════════════════════════════════════════════ */
.circle-gallery {
    position: relative;
    height: 560vh;            /* tall scroll space — drives orbit duration */
    background:
        radial-gradient(130% 70% at 50% -16%, rgba(244,191,0,0.30) 0%, rgba(255,122,0,0.12) 34%, rgba(242,239,231,0) 64%),
        var(--ci-linen, #f2efe7);
    overflow: hidden;
}

.circle-gallery-pin {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    perspective-origin: 50% 35%;
    overflow: visible;
}

/* Faint grain so the linen field doesn't read as flat */
.circle-gallery::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px;
}

.cg-corner {
    position: absolute;
    z-index: 5;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(21,39,92,0.42);
    pointer-events: none;
}
/* "Our Clients" top-left label — treated as the section heading */
.cg-corner--tl {
    top: 34px; left: 40px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--ci-blue, #15275c);
}
.cg-corner--tr { top: 34px; right: 40px; }
.cg-corner--bl { bottom: 34px; left: 40px; }

.cg-scroll-hint {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.6s;
}
.cg-scroll-hint span {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(21,39,92,0.42);
}
.cg-sh-line {
    width: 1px;
    height: 28px;
    background: linear-gradient(to bottom, rgba(21,39,92,0.42), transparent);
    animation: cg-shpulse 2.2s ease-in-out infinite;
}
@keyframes cg-shpulse {
    0%, 100% { opacity: 0.35; transform: scaleY(1); }
    50%      { opacity: 1;    transform: scaleY(1.3); }
}

.cg-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: var(--ci-orange, #ff7a00);
    width: 0%;
    z-index: 6;
    transition: width 0.05s linear;
}

.cg-card {
    position: absolute;
    width: clamp(120px, 14vw, 210px);
    aspect-ratio: 3 / 4;
    border-radius: 18px;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    opacity: 0;
}

.cg-face {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
    box-shadow: 0 24px 60px rgba(15,28,69,0.28), 0 6px 16px rgba(15,28,69,0.16);
}

.cg-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.06);
}

.cg-back {
    opacity: 0;
    transform: scaleX(-1);
}

.cg-phrase {
    position: absolute;
    font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(2rem, 5vw, 4.25rem);
    font-weight: 500;
    color: var(--ci-blue, #15275c);
    text-align: center;
    max-width: min(640px, 85vw);
    line-height: 1.1;
    letter-spacing: -0.01em;
    will-change: opacity, transform;
    pointer-events: none;
}
.cg-phrase .word {
    display: inline-block;
    opacity: 0;
    filter: blur(8px);
}
.cg-phrase .other-accent {
    font-style: italic;
    color: var(--ci-orange, #ff7a00);
}

/* Mobile — keep the orbit animation, just resize it to read well on a phone.
   Shorter scroll length, larger cards, decluttered chrome. */
@media (max-width: 768px) {
    .circle-gallery {
        height: 560vh;
    }
    .circle-gallery-pin {
        height: 100svh;
        perspective: 1600px;
    }
    /* Drop the corner labels + scroll hint on small screens to reduce clutter */
    .cg-corner,
    .cg-scroll-hint { display: none; }

    /* Bigger cards so the product art is legible mid-orbit */
    .cg-card {
        width: clamp(170px, 52vw, 240px);
    }

    .cg-phrase {
        font-size: clamp(2rem, 11vw, 3.25rem);
        max-width: 90vw;
    }
}

/* -------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 1100px) {
    .hero-section__inner {
        padding: 170px 32px 60px;
    }

    .hero-section__composition {
        max-width: 980px;
        grid-template-columns: minmax(0, 560px) minmax(150px, 240px);
        gap: 40px;
    }

    .hero-section__logo-image {
        width: clamp(210px, 22vw, 290px);
    }
}

@media (max-width: 1000px) {
    .hero-section__inner {
        padding: 150px 24px 50px;
    }

    .hero-section__composition {
        max-width: 860px;
        grid-template-columns: minmax(0, 1fr) 210px;
        gap: 28px;
    }

    .hero-section__headline {
        max-width: 9ch;
    }

    .hero-section__logo-image {
        width: clamp(180px, 20vw, 240px);
    }



}

@media (max-width: 768px) {
    .hero-section__inner {
        padding: 128px 20px 44px;
    }

    .hero-section__composition {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
        position: absolute;
        left: 50%;
        top: 54%;
        transform: translate(-50%, -50%);
        width: min(100%, calc(100% - 40px));
    }

    .hero-section__text {
        justify-content: center;
        max-width: 100%;
    }

    .hero-section__headline {
        max-width: 10ch;
        text-align: center;
    }

    .hero-section__logo {
        justify-content: center;
    }

    .hero-section__logo-image {
        width: clamp(170px, 44vw, 250px);
    }
}

@media (max-width: 700px) {
    .hero-section {
        min-height: 100svh;
        padding: 0;
    }

    .hero-section__inner {
        min-height: 100svh;
        padding: 0;
        position: relative;
    }

    .hero-section__composition {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 40px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 36px;
    }

    .hero-section__text {
        width: 100%;
        max-width: none;
    }

    .hero-section__headline {
        max-width: none;
        text-align: center !important;
    }

    .hero-section__logo {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 0;
    }

    .hero-section__logo-image {
        width: min(54vw, 210px);
    }

    .brand-builder-section__text {
        max-width: 30ch;
        margin: 0 auto;
    }

    .brand-builder-section {
        padding: 72px 24px;
    }

    .clients-section {
        padding: 56px 18px;
    }

}

/* =========================
   ANIMATIONS
========================= */

/* --- Hero entry --- */
.hero-anim-entry {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.hero-anim-entry--logo {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition: opacity 0.95s cubic-bezier(0.4, 0, 0.2, 1) 0.44s,
                transform 0.95s cubic-bezier(0.4, 0, 0.2, 1) 0.44s;
}

.hero-is-ready .hero-anim-entry,
.hero-is-ready .hero-anim-entry--logo {
    opacity: 1;
    transform: none;
}

/* --- Reduced motion (hero only — scroll reveal handled by site.css) --- */
@media (prefers-reduced-motion: reduce) {
    .hero-anim-entry,
    .hero-anim-entry--logo {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-blob,
    .hero-blob::before {
        animation: none !important;
    }
}

@media (max-width: 480px) {
    .hero-section__composition {
        gap: 28px;
        width: calc(100% - 36px);
    }

    .hero-section__logo-image {
        width: min(52vw, 180px);
    }

    /* Services: tighter padding and smaller decorative number */
    .service-panel__inner {
        padding: 64px 20px 48px;
    }

    .service-panel__num {
        font-size: clamp(5rem, 38vw, 9rem);
    }

}