/* ==========================================================
   AESTHETIC LAYER
   The visual language built for collaborations.html and
   brands.html, factored out so every page shares it:

     • grain + scanline veil over the page
     • diagonal moving type wall behind hero sections
     • chrome-gradient page titles
     • ruled eyebrow tags
     • poster-style cards: cut corners, red flood on hover
     • angular clipped buttons

   Injected by js/aesthetic.js, which adds the veil and the
   type wall so no page needs new markup. Loaded AFTER
   style.min.css so these rules win on shared selectors.

   Nothing here animates anything but transform and opacity,
   and every moving part stops under prefers-reduced-motion.
   ========================================================== */

:root {
    --ax-red: #bc0000;
    --ax-accent: #ff3e3e;
    --ax-ember: #ff4a17;
    --ax-line: rgba(255, 255, 255, .09);
    --ax-muted: #8b93a4;
}

/* ==========================================================
   1. VEIL
   ========================================================== */
.ax-veil {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: .45;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
}

/* ==========================================================
   2. DIAGONAL TYPE WALL
   Sits behind hero content. The rows translate horizontally;
   the rotation on the wrapper is what makes the travel read
   as diagonal. Scaled up so the tilted block still reaches
   every corner.
   ========================================================== */
/* Two layers on purpose: the outer box does the clipping, the inner one
   does the rotation. The shared stylesheet forces overflow:visible on
   heroes with !important, so the hero itself cannot be the clip.

   Scoped under .ax-page for weight, not tidiness: some pages carry rules
   like `.bts-p-hero > * { position: relative }` that tie with a bare
   single-class selector and win on source order. */
.ax-page .ax-kinetic {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.ax-page .ax-kinetic-inner {
    position: absolute;
    inset: -20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(4px, 1.6vw, 22px);
    transform: rotate(-13deg) scale(1.2);
}

.ax-kinetic-row {
    display: flex;
    width: max-content;
    white-space: nowrap;
    font-size: clamp(48px, 11vw, 168px);
    font-weight: 900;
    line-height: .94;
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.ax-kinetic-row span {
    padding-right: .28em;
}

.ax-kinetic-row.hollow span {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .12);
}

.ax-kinetic-row.solid span {
    color: rgba(255, 255, 255, .035);
}

.ax-kinetic-row.ghost span {
    color: transparent;
    -webkit-text-stroke: 1px rgba(188, 0, 0, .3);
}

.ax-kinetic-row.fwd {
    animation: ax-slide 34s linear infinite;
}

.ax-kinetic-row.rev {
    animation: ax-slide-rev 44s linear infinite;
}

.ax-kinetic-row.slow {
    animation-duration: 62s;
}

@keyframes ax-slide {
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes ax-slide-rev {
    from {
        transform: translate3d(-50%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/* Hero content must ride above the wall. The shared heroes stack
   an image, overlays and a canvas, so lift the copy layer only. */
.ax-page .contact-hero-content,
.ax-page .hero-content,
.ax-page .hero-text-wrapper {
    position: relative;
    z-index: 2;
}

/* ==========================================================
   3. CHROME TITLES
   Brushed-metal gradient with a hard bevel under it. Nested
   accent spans opt back out so red script accents survive.
   ========================================================== */
.ax-page .contact-hero-content h1,
.ax-page .hero h1,
.ax-page .pg-title,
.ax-page .lw-title,
.ax-page .sv-title,
.ax-page .bts-title,
.ax-page .bts-p-title,
.ax-page .prem-partners-title,
.ax-page .cs-title,
.ax-page .asset-title,
.ax-page .details-title,
.ax-page .testimonial-video-title,
.ax-page section>.container>h2,
.ax-page .section-head h2 {
    background: linear-gradient(180deg,
            #ffffff 0%, #dfe4ea 22%, #9aa2ae 46%,
            #f4f6f9 54%, #7e8794 74%, #c6ccd5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)) drop-shadow(0 12px 26px rgba(0, 0, 0, .65));
}

/* accents keep their own colour inside a chrome heading */
.ax-page h1 .script,
.ax-page h2 .script,
.ax-page h1 .script-accent,
.ax-page h2 .script-accent,
.ax-page h1 em,
.ax-page h2 em,
.ax-page h1 span[style*="color"],
.ax-page h2 span[style*="color"] {
    -webkit-text-fill-color: initial;
    filter: none;
}

/* ==========================================================
   4. EYEBROWS
   ========================================================== */
.ax-page .hero-tagline,
.ax-page .section-tag {
    display: inline-flex !important;
    align-items: center;
    gap: 11px;
    font-weight: 900 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase;
    color: var(--ax-accent) !important;
}

.ax-page .hero-tagline::before,
.ax-page .hero-tagline::after,
.ax-page .section-tag::before,
.ax-page .section-tag::after {
    content: "";
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ax-accent));
}

.ax-page .hero-tagline::after,
.ax-page .section-tag::after {
    background: linear-gradient(90deg, var(--ax-accent), transparent);
}

/* ==========================================================
   5. POSTER CARDS
   Cut corner, lift, and a red flood that rises from the floor.
   Applied over each page's existing card background rather
   than replacing it.
   ========================================================== */
.ax-page .sv-card,
.ax-page .lw-card,
.ax-page .pg-card,
.ax-page .glass-service-card,
.ax-page .asset-card,
.ax-page .intern-card,
.ax-page .value-card,
.ax-page .why-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), border-color .45s ease, box-shadow .45s ease;
}

.ax-page .sv-card::after,
.ax-page .lw-card::after,
.ax-page .pg-card::after,
.ax-page .glass-service-card::after,
.ax-page .asset-card::after,
.ax-page .intern-card::after,
.ax-page .value-card::after,
.ax-page .why-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgba(188, 0, 0, .45), rgba(188, 0, 0, .06) 55%, transparent);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .55s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}

.ax-page .sv-card:hover,
.ax-page .lw-card:hover,
.ax-page .pg-card:hover,
.ax-page .glass-service-card:hover,
.ax-page .asset-card:hover,
.ax-page .intern-card:hover,
.ax-page .value-card:hover,
.ax-page .why-card:hover {
    transform: translateY(-8px);
    border-color: rgba(188, 0, 0, .5);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(188, 0, 0, .25);
}

.ax-page .sv-card:hover::after,
.ax-page .lw-card:hover::after,
.ax-page .pg-card:hover::after,
.ax-page .glass-service-card:hover::after,
.ax-page .asset-card:hover::after,
.ax-page .intern-card:hover::after,
.ax-page .value-card:hover::after,
.ax-page .why-card:hover::after {
    transform: scaleY(1);
}

/* ==========================================================
   6. ANGULAR BUTTONS
   ========================================================== */
.ax-page .btn-primary,
.ax-page .cta-btn,
.ax-page .hero-btn,
.ax-page .submit-btn {
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    letter-spacing: 2px;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, background .35s ease;
}

.ax-page .btn-primary:hover,
.ax-page .cta-btn:hover,
.ax-page .hero-btn:hover,
.ax-page .submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(188, 0, 0, .4);
}

/* ==========================================================
   7. MOTION OFF
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .ax-kinetic-row {
        animation: none !important;
    }

    .ax-page .sv-card,
    .ax-page .lw-card,
    .ax-page .pg-card,
    .ax-page .glass-service-card,
    .ax-page .asset-card,
    .ax-page .intern-card {
        transition: none;
    }
}

/* Phones: the wall competes with hero copy at small sizes */
@media (max-width: 600px) {
    .ax-kinetic {
        opacity: .55;
    }

    .ax-kinetic-row {
        font-size: clamp(38px, 16vw, 90px);
    }
}