/* ==========================================================================
   Home — cinematic dark landing page.

   Loaded on the home page only, and scoped to .aim-hp (the <main>) or
   .aim-hp-body (the <body>) so nothing reaches inner pages. Every section is
   finished and readable in plain CSS; home.js layers motion on top and adds
   .hp-motion only once GSAP is running, so the layout-switching rules under
   that class never apply without JS or for reduced-motion visitors.
   ========================================================================== */

.aim-hp {
    --hp-bg: #05080f;
    --hp-bg-raised: #0b1220;
    --hp-ink: #eef3f8;
    --hp-muted: #9ca6ba;
    --hp-line: rgba(148, 163, 184, 0.16);
    --hp-sky: #29abe2;
    --hp-sky-rgb: 41, 171, 226;
    --hp-red: #e0343b;
    --hp-red-rgb: 224, 52, 59;
    --hp-card: #f2f5f9;
    --hp-card-ink: #0b1020;
    --hp-display: 'Bricolage Grotesque', var(--aim-font-sans);
    --hp-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --hp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hp-gutter: max(1rem, 4vw);
    --hp-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 2c1.3 12.4 9.6 20.7 22 22-12.4 1.3-20.7 9.6-22 22-1.3-12.4-9.6-20.7-22-22C14.4 22.7 22.7 14.4 24 2Z'/%3E%3C/svg%3E");

    position: relative;
    display: block;
    /* clip, not hidden: hidden would make this a scroll container and break
       the pinned sections. */
    overflow-x: clip;
    background: var(--hp-bg);
    color: var(--hp-ink);
    font-family: var(--aim-font-sans);
}

/* Film grain over the whole page. */
.aim-hp::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* :where() keeps these resets at class weight: they beat the theme's bare
   element rules, while every .hp-* component rule below still wins. */
.aim-hp :where(h1, h2, h3, p, figure, blockquote, ol, ul, dl, dd, fieldset) {
    margin: 0;
}

/* website.css pins Montserrat on every span/p/a/li/heading by element, so text
   nested inside display type would drop back to it instead of inheriting. */
.aim-hp :where(h1, h2, h3, p, span, a, li, label, small, strong, em, blockquote) {
    font-family: inherit;
}

.aim-hp :where(h1, h2, h3) {
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.aim-hp :where(ol, ul) {
    padding: 0;
    list-style: none;
}

.aim-hp :where(a),
.aim-hp :where(a):hover {
    color: inherit;
    text-decoration: none;
}

.aim-hp a:focus-visible,
.aim-hp button:focus-visible {
    outline: 2px solid var(--hp-sky);
    outline-offset: 4px;
}

/* Arabic letters only join with zero tracking. */
[dir="rtl"] .aim-hp,
[dir="rtl"] .aim-hp * {
    letter-spacing: normal;
}

/* --- Page chrome on the home page -------------------------------------- */

.aim-hp-body {
    background: #05080f;
}

/* The fixed header floats over the hero with no band of its own, on phones
   too, until the page scrolls and website.css frosts it. */
.aim-hp-body header.aim-site-header:not(.is-scrolled) {
    background: transparent;
    border-bottom-color: transparent;
}

/* The home page is dark-only, so a light/dark switch would do nothing useful. */
.aim-hp-body .aim-theme-toggle {
    display: none;
}

/* --- Shared atoms ------------------------------------------------------- */

.hp-wrap {
    width: min(100% - 2 * var(--hp-gutter), 1440px);
    margin-inline: auto;
}

.hp-section {
    position: relative;
    padding-block: clamp(3.75rem, 12vw, 10rem);
}

.hp-star {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: var(--hp-star-mask) center / contain no-repeat;
    mask: var(--hp-star-mask) center / contain no-repeat;
}

.hp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    color: var(--hp-muted);
    font: 600 0.72rem/1.4 var(--aim-font-sans);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.hp-eyebrow::before {
    content: '';
    flex: none;
    width: 0.65rem;
    height: 0.65rem;
    background: var(--hp-red);
    -webkit-mask: var(--hp-star-mask) center / contain no-repeat;
    mask: var(--hp-star-mask) center / contain no-repeat;
}

.hp-display {
    color: var(--hp-ink);
    font-family: var(--hp-display);
    font-size: clamp(2.5rem, 6.4vw, 6rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.hp-accent {
    color: var(--hp-sky);
    font-family: var(--hp-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
}

.hp-display .hp-accent {
    display: block;
}

.hp-counter {
    font-family: var(--hp-display);
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
}

.hp-counter span + span {
    color: var(--hp-red);
}

.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.85rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 700 0.78rem/1 var(--aim-font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.3s var(--hp-ease), translate 0.35s var(--hp-ease), box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.hp-btn .hp-star {
    font-size: 0.75rem;
}

.hp-btn--primary {
    background: linear-gradient(120deg, #1f9fd8 0%, var(--hp-sky) 55%, #5cc9f1 100%);
    /* Dark ink: white on this sky fails WCAG AA contrast at button size. */
    color: #04121c;
    box-shadow: 0 10px 30px rgba(var(--hp-sky-rgb), 0.32);
}

.aim-hp .hp-btn--primary:hover,
.aim-hp .hp-btn--primary:focus-visible {
    color: #04121c;
    transform: translateY(-2px);
    box-shadow: 0 16px 44px rgba(var(--hp-sky-rgb), 0.5);
}

.hp-btn--ghost {
    border-color: rgba(238, 243, 248, 0.22);
    background: rgba(255, 255, 255, 0.04);
    color: var(--hp-ink);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.aim-hp .hp-btn--ghost:hover,
.aim-hp .hp-btn--ghost:focus-visible {
    border-color: rgba(var(--hp-sky-rgb), 0.7);
    color: var(--hp-ink);
}

.hp-btn--sm {
    min-height: 40px;
    padding: 0.65rem 1.1rem;
    font-size: 0.7rem;
}

[dir="rtl"] .hp-arrow,
[dir="rtl"] .hp-service__arrow {
    display: inline-block;
    transform: scaleX(-1);
}

/* --- Hero --------------------------------------------------------------- */

.hp-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;
    padding: clamp(5.5rem, 11vh, 7rem) 0 clamp(1.75rem, 4vh, 3rem);
}

.hp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(55% 48% at 50% 40%, rgba(var(--hp-sky-rgb), 0.17), transparent 70%),
        radial-gradient(38% 40% at 88% 8%, rgba(var(--hp-red-rgb), 0.13), transparent 70%),
        radial-gradient(45% 45% at 6% 92%, rgba(var(--hp-sky-rgb), 0.09), transparent 70%);
}

.hp-hero__stage {
    --hp-wm-size: clamp(3rem, 12.4vw, 13.5rem);
    --hp-orb: clamp(130px, 23vw, 360px);
    --hp-ring: min(86vw, 1200px);

    position: relative;
    display: grid;
    flex: 1 0 auto;
    place-items: center;
    min-height: clamp(200px, min(32vw, 42vh), 480px);
    margin-bottom: clamp(1.5rem, 4vh, 3rem);
    pointer-events: none;
    user-select: none;
}

.hp-hero__line {
    position: absolute;
    top: 50%;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--hp-sky-rgb), 0.95), transparent);
    opacity: 0;
}

.hp-wordmark {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: var(--hp-ink);
    font-family: var(--hp-display);
    font-size: var(--hp-wm-size);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    white-space: nowrap;
    /* The brand name is Latin: one flex item per letter would run backwards in Arabic. */
    direction: ltr;
}

/* Letters rise from behind this bottom edge; the other edges stay open so
   ascenders and the negative tracking are never cropped. */
.hp-wordmark__mask {
    display: inline-block;
    clip-path: inset(-50% -50% 0 -50%);
}

.hp-wordmark__char {
    display: inline-block;
}

.hp-wordmark__gap {
    display: inline-block;
    width: 0.22em;
}

/* Glass orb. --hp-px/--hp-py (set by home.js from the pointer) move the orb;
   the magnified wordmark inside counter-moves so it stays lined up with the
   real one behind the glass, like a lens. */
.hp-orb {
    --hp-px: 0px;
    --hp-py: 0px;

    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: var(--hp-orb);
    aspect-ratio: 1;
    translate: calc(-50% + var(--hp-px)) calc(-50% + var(--hp-py));
}

.hp-orb__body {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background:
        radial-gradient(circle at 70% 80%, rgba(var(--hp-sky-rgb), 0.32), rgba(var(--hp-sky-rgb), 0) 45%),
        radial-gradient(circle at 50% 50%, rgba(5, 8, 15, 0.1) 55%, rgba(var(--hp-sky-rgb), 0.24) 100%);
    box-shadow:
        inset 8px 10px 30px rgba(255, 255, 255, 0.16),
        inset -14px -22px 50px rgba(var(--hp-sky-rgb), 0.35),
        0 30px 90px rgba(var(--hp-sky-rgb), 0.26),
        0 0 160px rgba(var(--hp-sky-rgb), 0.12);
    -webkit-backdrop-filter: blur(3px) saturate(1.4);
    backdrop-filter: blur(3px) saturate(1.4);
}

/* Specular highlight. */
.hp-orb__body::after {
    content: '';
    position: absolute;
    top: 9%;
    left: 18%;
    width: 36%;
    height: 18%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.55), transparent 70%);
    rotate: -32deg;
    filter: blur(2px);
}

.hp-orb__lens {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
}

.hp-wordmark--lens {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: calc(-50% - var(--hp-px)) calc(-50% - var(--hp-py));
    transform-origin: calc(50% + var(--hp-px)) calc(50% + var(--hp-py));
    scale: 1.3;
    color: #fff;
    filter: blur(0.4px) drop-shadow(0 0 18px rgba(var(--hp-sky-rgb), 0.4));
}

/* A drop-shadow on the masked star itself would be masked away, so the glow
   lives on this wrapper. */
.hp-orb__core {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 0 16px rgba(var(--hp-sky-rgb), 0.9)) drop-shadow(0 0 40px rgba(var(--hp-red-rgb), 0.45));
}

.hp-orb__core .hp-star {
    width: 34%;
    height: 34%;
    background: radial-gradient(circle, #fff 0%, #c4ecfc 32%, var(--hp-sky) 62%, var(--hp-red) 100%);
    animation: hp-spin 20s linear infinite;
}

.hp-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--hp-ring);
    height: calc(var(--hp-ring) * 0.24);
    overflow: visible;
    translate: -50% -50%;
    rotate: -7deg;
    fill: none;
}

.hp-orbit path {
    stroke: rgba(var(--hp-sky-rgb), 0.6);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px rgba(var(--hp-sky-rgb), 0.85));
}

.hp-orbit--back {
    z-index: 1;
    opacity: 0.45;
}

.hp-orbit--front {
    z-index: 4;
}

/* Without JS the orbiters sit at fixed points on the ring; home.js then sets
   translate/scale/opacity/z-index every frame to fly them around it. */
.hp-orbiters {
    position: absolute;
    inset: 0;
}

.hp-orbiter {
    --hp-rx: calc(var(--hp-ring) * 0.48);
    --hp-ry: calc(var(--hp-ring) * 0.1);

    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    translate: calc(-50% + cos(var(--a)) * var(--hp-rx)) calc(-50% + sin(var(--a)) * var(--hp-ry));
}

.hp-orbiter--chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--hp-line);
    border-radius: 999px;
    background: rgba(11, 18, 32, 0.72);
    color: var(--hp-ink);
    font: 700 0.66rem/1 var(--aim-font-sans);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.hp-orbiter__num {
    color: var(--hp-red);
}

.hp-orbiter--shape {
    width: clamp(26px, 3.2vw, 46px);
    color: var(--hp-sky);
    filter: drop-shadow(0 0 10px rgba(var(--hp-sky-rgb), 0.85));
}

.hp-orbiter--shape:nth-child(4n) {
    color: var(--hp-red);
    filter: drop-shadow(0 0 10px rgba(var(--hp-red-rgb), 0.85));
}

.hp-orbiter--shape svg {
    display: block;
    width: 100%;
    height: auto;
    animation: hp-spin 16s linear infinite;
}

.hp-hero__content {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(1.5rem, 4vw, 4rem);
}

.hp-hero__title {
    max-width: 26ch;
    color: var(--hp-ink);
    font-family: var(--hp-display);
    font-size: clamp(1.55rem, 2.7vw, 2.7rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.hp-hero__lead {
    max-width: 58ch;
    margin-top: 1.1rem;
    color: var(--hp-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.hp-hero__side {
    display: grid;
    justify-items: end;
    gap: 1.75rem;
}

.hp-hero__ctas,
.hp-markets,
.hp-markets ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hp-hero__ctas {
    gap: 0.75rem;
}

.hp-markets {
    align-items: baseline;
    gap: 0.5rem 1rem;
    color: var(--hp-muted);
    font-size: 0.8rem;
}

.hp-markets ul {
    gap: 0.35rem 0.9rem;
}

.hp-markets a {
    border-bottom: 1px solid transparent;
    color: var(--hp-ink);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.aim-hp .hp-markets a:hover,
.aim-hp .hp-markets a:focus-visible {
    border-color: currentColor;
    color: var(--hp-sky);
}

@media (max-width: 991.98px) {
    .hp-hero__content {
        grid-template-columns: 1fr;
    }

    .hp-hero__side {
        justify-items: start;
    }

    .hp-hero__ctas,
    .hp-markets,
    .hp-markets ul {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    /* Too little ring on a phone for labels; the glyphs still orbit. */
    .hp-orbiter--chip {
        display: none;
    }
}

/* Intro: a light sweep, the wordmark rises, the orb blooms, the ring draws.
   Plain CSS so it starts at first paint, without waiting for any script. */
@media (prefers-reduced-motion: no-preference) {
    .hp-hero__line {
        animation: hp-sweep 1.2s var(--hp-ease) 0.05s both;
    }

    .hp-wordmark:not(.hp-wordmark--lens) .hp-wordmark__char {
        animation: hp-rise 1.1s var(--hp-ease) both;
        animation-delay: calc(0.3s + var(--i) * 0.05s);
    }

    .hp-orb__body {
        animation: hp-bloom 1.4s var(--hp-ease) 0.9s both;
    }

    .hp-orbit path {
        stroke-dasharray: 1;
        animation: hp-draw 1.6s var(--hp-ease) 1.1s both;
    }

    .hp-hero__content > * {
        animation: hp-fade-up 1s var(--hp-ease) 0.45s both;
    }

    .hp-hero__content > * + * {
        animation-delay: 0.6s;
    }
}

/* --- What we do --------------------------------------------------------- */

.hp-services__list {
    display: grid;
    gap: clamp(0.25rem, 1vw, 0.75rem);
    padding-inline-start: clamp(0rem, 10vw, 12rem);
}

.hp-service__link {
    display: grid;
    grid-template-columns: clamp(40px, 5vw, 72px) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 clamp(0.75rem, 2vw, 1.75rem);
    padding-block: clamp(0.6rem, 1.4vw, 1.1rem);
    transition: opacity 0.35s ease;
}

.hp-service__shape {
    color: var(--hp-sky);
    filter: drop-shadow(0 0 12px rgba(var(--hp-sky-rgb), 0.7));
    transition: transform 0.6s var(--hp-ease);
}

.hp-service:nth-child(even) .hp-service__shape {
    color: var(--hp-red);
    filter: drop-shadow(0 0 12px rgba(var(--hp-red-rgb), 0.7));
}

.hp-service__shape svg {
    display: block;
    width: 100%;
    height: auto;
    animation: hp-float 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -1s);
}

.hp-service__num {
    align-self: start;
    margin-top: 0.7em;
    color: var(--hp-red);
    font: 600 0.72rem/1 var(--aim-font-sans);
    letter-spacing: 0.12em;
}

.hp-service__title {
    display: block;
    font-family: var(--hp-display);
    font-size: clamp(2rem, 5.6vw, 5.25rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    transition: transform 0.5s var(--hp-ease), color 0.3s ease;
}

.hp-service__line {
    display: block;
    margin-top: 0.45rem;
    color: var(--hp-muted);
    font-family: var(--hp-serif);
    font-size: clamp(1.05rem, 1.5vw, 1.4rem);
    font-style: italic;
    line-height: 1.35;
}

.hp-service__arrow {
    color: var(--hp-sky);
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.hp-services__list:hover .hp-service__link:not(:hover) {
    opacity: 0.4;
}

.hp-service__link:hover .hp-service__title,
.hp-service__link:focus-visible .hp-service__title {
    color: #fff;
    transform: translateX(0.3em);
}

[dir="rtl"] .hp-service__link:hover .hp-service__title,
[dir="rtl"] .hp-service__link:focus-visible .hp-service__title {
    transform: translateX(-0.3em);
}

.hp-service__link:hover .hp-service__arrow,
.hp-service__link:focus-visible .hp-service__arrow {
    opacity: 1;
}

.hp-service__link:hover .hp-service__shape,
.hp-service__link:focus-visible .hp-service__shape {
    transform: rotate(25deg) scale(1.15);
}

/* Split by home.js; whole words stay together when the title wraps. */
.hp-split-word {
    display: inline-block;
    white-space: nowrap;
}

.hp-char {
    display: inline-block;
}

/* --- Statement ---------------------------------------------------------- */

/* Capped, or a tall tablet in portrait opens a screen of empty space here. */
.hp-statement {
    display: grid;
    align-items: center;
    min-height: min(90vh, 760px);
    overflow: clip;
    text-align: center;
}

.hp-statement__star {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(90vw, 860px);
    translate: -50% -50%;
    color: rgba(var(--hp-sky-rgb), 0.35);
    pointer-events: none;
}

.hp-statement::after {
    content: '';
    position: absolute;
    inset: 15% 20%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(var(--hp-red-rgb), 0.12), transparent);
    filter: blur(40px);
}

.hp-statement__hint {
    justify-content: center;
}

.hp-statement__stack {
    --hp-mx: 50%;
    --hp-my: 50%;

    position: relative;
}

.hp-statement__text {
    max-width: 17ch;
    margin-inline: auto;
    font-family: var(--hp-display);
    font-size: clamp(2.2rem, 6.2vw, 6.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.hp-statement__text .hp-accent {
    display: block;
    margin-top: 0.15em;
    letter-spacing: -0.02em;
}

.hp-statement__text--spot {
    position: absolute;
    inset: 0;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle 180px at var(--hp-mx) var(--hp-my), #000 30%, transparent 75%);
    mask-image: radial-gradient(circle 180px at var(--hp-mx) var(--hp-my), #000 30%, transparent 75%);
    transition: opacity 0.35s ease;
}

.hp-statement__text--spot .hp-accent {
    color: #8fd8f7;
}

.hp-statement__stack.is-spotlit .hp-statement__text--spot {
    opacity: 1;
}

@media (hover: none) {
    .hp-statement__hint {
        display: none;
    }
}

/* --- Proof + client marquee -------------------------------------------- */

.hp-proof__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: end;
    gap: 3rem;
}

.hp-proof__title {
    font-family: var(--hp-display);
    font-size: clamp(2rem, 5vw, 4.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.hp-line {
    display: block;
    padding-bottom: 0.08em;
    clip-path: inset(-0.5em -1em 0 -1em);
}

.hp-line > span {
    display: inline-block;
}

.hp-proof__aside p {
    max-width: 42ch;
    color: var(--hp-muted);
    line-height: 1.7;
}

/* Grid, not wrapping flex: a long label would otherwise push each stat onto
   its own row on phones. */
.hp-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    gap: 1.25rem 2.25rem;
    margin-top: 2rem;
}

.hp-stats > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.4rem;
}

.hp-stats dd {
    font-family: var(--hp-display);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.hp-stats dt {
    color: var(--hp-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hp-marquee {
    margin-top: clamp(3.5rem, 8vw, 6rem);
    border-block: 1px solid var(--hp-line);
    /* Client names are Latin; keep the loop maths the same in Arabic. */
    direction: ltr;
}

.hp-marquee__row {
    overflow: hidden;
    padding-block: clamp(1.1rem, 2.5vw, 1.9rem);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.hp-marquee__row + .hp-marquee__row {
    border-top: 1px solid var(--hp-line);
}

.hp-marquee__track {
    display: flex;
    width: max-content;
    animation: hp-marquee 40s linear infinite;
}

.hp-marquee__row--reverse .hp-marquee__track {
    animation-direction: reverse;
}

.hp-marquee__row:hover .hp-marquee__track {
    animation-play-state: paused;
}

/* The trailing padding matches the gap, so sliding by exactly one group loops
   without a seam. */
.hp-marquee__group {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-inline-end: clamp(2rem, 5vw, 4.5rem);
}

.hp-marquee__item {
    color: rgba(238, 243, 248, 0.55);
    font-family: var(--hp-display);
    font-size: clamp(1.4rem, 2.8vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.hp-marquee__item:hover {
    color: var(--hp-ink);
}

.hp-marquee__group .hp-star {
    color: var(--hp-red);
    font-size: 0.8rem;
}

@media (max-width: 991.98px) {
    .hp-proof__grid {
        grid-template-columns: 1fr;
    }
}

/* --- Pick a card ---------------------------------------------------------- */

.hp-cards__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
}

.hp-cards__meta {
    max-width: 32ch;
    text-align: end;
}

.hp-cards__note {
    margin-top: 0.75rem;
    color: var(--hp-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Default (no JS / phones): a swipeable row of face-up cards. */
.hp-deck {
    --hp-card-w: clamp(160px, min(15vw, 27vh), 240px);

    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding: 2.5rem var(--hp-gutter) 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.hp-deck::-webkit-scrollbar {
    display: none;
}

.hp-card {
    flex: none;
    width: var(--hp-card-w);
    aspect-ratio: 5 / 7.4;
    scroll-snap-align: center;
}

/* Perspective on the flipping face's direct parent, or the flip renders flat. */
.hp-card__link {
    display: block;
    height: 100%;
    perspective: 1400px;
    transition: transform 0.4s var(--hp-ease);
}

.hp-card__link:hover,
.hp-card__link:focus-visible {
    transform: translateY(-14px);
}

.hp-card__inner {
    position: relative;
    display: block;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.hp-card__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Safari only hides the back face if the front face is in the 3D context
   too; without its own transform the back face paints over it. */
.hp-card__face--front {
    transform: rotateY(0deg);
    padding: 1.1rem 1.1rem 1rem;
    background: radial-gradient(120% 80% at 50% 28%, #fff 0%, var(--hp-card) 60%, #e3ebf3 100%);
    color: var(--hp-card-ink);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

/* Backs only exist for the desktop deal. Elsewhere, and in any browser that
   cannot flip in 3D, the face-up card must never be covered by its back. */
.hp-card__face--back {
    visibility: hidden;
    place-items: center;
    display: grid;
    border: 1px solid rgba(var(--hp-sky-rgb), 0.35);
    background:
        repeating-linear-gradient(45deg, rgba(var(--hp-sky-rgb), 0.06) 0 1px, transparent 1px 11px),
        linear-gradient(160deg, #0f1b30, #070b14);
    box-shadow:
        inset 0 0 0 9px rgba(5, 8, 15, 0.9),
        inset 0 0 0 10px rgba(var(--hp-sky-rgb), 0.3),
        0 30px 60px rgba(0, 0, 0, 0.5);
    transform: rotateY(180deg);
}

.hp-card__back-art {
    display: grid;
    place-items: center;
    width: 46%;
    aspect-ratio: 1;
    filter: drop-shadow(0 0 18px rgba(var(--hp-sky-rgb), 0.8));
}

.hp-card__back-art .hp-star {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, var(--hp-sky), var(--hp-red));
}

.hp-card__numeral {
    color: var(--hp-sky);
    font-family: var(--hp-serif);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1;
}

.hp-card__corner {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    color: var(--hp-red);
    font-size: 0.8rem;
}

.hp-card__glyph {
    display: grid;
    place-items: center;
    align-self: center;
    width: 44%;
    aspect-ratio: 1;
    margin: auto 0 0.9rem;
    color: rgba(var(--hp-sky-rgb), 0.45);
}

.hp-card__glyph .hp-star {
    width: 100%;
    height: 100%;
}

.hp-card__name {
    font-family: var(--hp-display);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.hp-card__tag {
    align-self: flex-start;
    margin-top: 0.45rem;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    background: var(--hp-red);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
}

.hp-card__line {
    margin-top: 0.6rem;
    color: #4b5565;
    font-size: 0.72rem;
    line-height: 1.45;
}

.hp-card__tags {
    margin-top: 0.7rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(11, 16, 32, 0.1);
    color: #6b7585;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Desktop with motion: the section pins and the cards deal out of a stack. */
.hp-motion .hp-cards--stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding-block: 4.5rem 1.5rem;
}

.hp-motion .hp-cards--stage .hp-deck {
    position: relative;
    display: block;
    height: calc(var(--hp-card-w) * 1.48 + 4rem);
    margin-top: 1rem;
    padding: 0;
    overflow: visible;
}

.hp-motion .hp-cards--stage .hp-card__face--back {
    visibility: visible;
}

.hp-motion .hp-cards--stage .hp-card {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    margin-left: calc(var(--hp-card-w) / -2);
}

/* --- Selected work -------------------------------------------------------- */

.hp-work {
    position: relative;
    padding-block: clamp(5rem, 10vw, 8rem) clamp(3rem, 6vw, 5rem);
}

.hp-work__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hp-work__count {
    font-size: clamp(2.5rem, 6vw, 5rem);
}

.hp-work__track {
    display: flex;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding-inline: var(--hp-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.hp-work__track::-webkit-scrollbar {
    display: none;
}

.hp-work__panel {
    position: relative;
    isolation: isolate;
    flex: none;
    width: min(86vw, 1100px);
    height: min(48vw, 64vh);
    min-height: 320px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--hp-bg-raised);
    scroll-snap-align: center;
}

.hp-work__link {
    position: absolute;
    inset: 0;
    display: block;
}

.hp-work__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hp-work__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.14;
    transition: scale 0.8s var(--hp-ease);
}

.hp-work__link:hover img,
.hp-work__link:focus-visible img {
    scale: 1.2;
}

.hp-work__panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(5, 8, 15, 0.05) 30%, rgba(5, 8, 15, 0.9) 100%),
        linear-gradient(90deg, rgba(5, 8, 15, 0.55), transparent 60%);
}

.hp-work__meta {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    justify-items: start;
    gap: 0.6rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

.hp-work__chip {
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    background: var(--hp-red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.hp-work__title {
    max-width: 20ch;
    font-family: var(--hp-display);
    font-size: clamp(1.6rem, 3.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.hp-work__tags {
    color: rgba(238, 243, 248, 0.72);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hp-work__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
}

/* Desktop with motion: pinned, and vertical scroll drives the track sideways. */
.hp-motion .hp-work--pinned {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding-block: 5.5rem 2rem;
    overflow: hidden;
}

.hp-motion .hp-work--pinned .hp-work__track {
    overflow: visible;
    scroll-snap-type: none;
}

/* --- Kinetic slogan ------------------------------------------------------- */

.hp-slogan {
    position: relative;
    overflow: clip;
    padding-block: clamp(4rem, 12vw, 9rem);
}

.hp-slogan__track {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.05em 0.3em;
    padding-inline: var(--hp-gutter);
    font-size: clamp(2.6rem, 11vw, 11rem);
    line-height: 1.05;
    text-align: center;
}

.hp-slogan__lead {
    color: var(--hp-ink);
    font-family: var(--hp-display);
    font-weight: 800;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.hp-slogan__accent {
    color: var(--hp-sky);
    font-family: var(--hp-serif);
    font-style: italic;
    letter-spacing: -0.02em;
}

.hp-slogan__star {
    color: var(--hp-red);
    font-size: 0.42em;
}

.hp-slogan__word {
    display: inline-block;
    white-space: nowrap;
}

.hp-glyph {
    display: inline-block;
}

/* With motion: one long line held mid-screen while the section scrolls past. */
.hp-motion .hp-slogan {
    height: 260vh;
    padding: 0;
}

.hp-motion .hp-slogan__viewport {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100vh;
}

.hp-motion .hp-slogan__track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    padding-inline: 0;
    white-space: nowrap;
}

.hp-motion .hp-glyph {
    will-change: transform;
}

/* --- Client voices -------------------------------------------------------- */

.hp-voices__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hp-voices__rating {
    color: var(--hp-muted);
    font-size: 0.9rem;
}

.hp-voices__stars {
    margin-inline-end: 0.5rem;
    color: #f5b942;
    letter-spacing: 0.12em;
}

.hp-voices__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.hp-voice {
    --hp-gx: 50%;
    --hp-gy: 0%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--hp-line);
    border-radius: 22px;
    background:
        radial-gradient(420px circle at var(--hp-gx) var(--hp-gy), rgba(var(--hp-sky-rgb), 0.12), transparent 60%),
        var(--hp-bg-raised);
    transition: border-color 0.3s ease;
}

.hp-voice:hover {
    border-color: rgba(var(--hp-sky-rgb), 0.45);
}

.hp-voice__quote p {
    color: var(--hp-ink);
    font-family: var(--hp-serif);
    font-size: clamp(1.25rem, 1.9vw, 1.7rem);
    line-height: 1.3;
}

.hp-voice__by {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.hp-voice__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5cc9f1, var(--hp-sky));
    color: #04121c;
    font-weight: 800;
}

.hp-voice__by strong {
    display: block;
    font-weight: 700;
}

.hp-voice__by strong + span {
    color: var(--hp-muted);
    font-size: 0.8rem;
}

@media (max-width: 767.98px) {
    .hp-voices__grid {
        grid-template-columns: 1fr;
    }
}

/* --- Contact (mad-lib form) ------------------------------------------------ */

.hp-contact {
    overflow: clip;
}

.hp-contact::before {
    content: '';
    position: absolute;
    inset: auto -10% -30% 20%;
    height: 70%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(var(--hp-sky-rgb), 0.12), transparent);
    filter: blur(30px);
}

.hp-contact__title {
    max-width: 14ch;
    font-size: clamp(2.6rem, 7vw, 6.5rem);
    text-transform: uppercase;
}

.hp-contact__title .hp-accent {
    display: inline;
}

.hp-alert {
    max-width: 60rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(var(--hp-sky-rgb), 0.5);
    border-radius: 14px;
    background: rgba(var(--hp-sky-rgb), 0.08);
    font-size: 0.9rem;
    line-height: 1.6;
}

.hp-alert--danger {
    border-color: rgba(var(--hp-red-rgb), 0.6);
    background: rgba(var(--hp-red-rgb), 0.1);
}

.hp-alert ul {
    margin-top: 0.4rem;
    padding-inline-start: 1.2rem;
    list-style: disc;
}

.hp-madlib {
    display: grid;
    gap: 1.75rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    color: var(--hp-muted);
    font-family: var(--hp-display);
    font-size: clamp(1.3rem, 2.8vw, 2.5rem);
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: -0.02em;
}

.hp-madlib fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
}

.hp-madlib .hp-madlib__line {
    float: none;
    width: auto;
    margin: 0 0 0.6rem;
    padding: 0;
    color: var(--hp-muted);
    font: inherit;
}

.hp-madlib p.hp-madlib__line {
    margin: 0;
}

.hp-blank {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.hp-blank input,
.hp-madlib__story textarea {
    min-width: 4ch;
    max-width: 100%;
    padding: 0 0.1em;
    border: 0;
    border-bottom: 2px solid rgba(238, 243, 248, 0.25);
    border-radius: 0;
    background: transparent;
    color: var(--hp-ink);
    font: inherit;
    letter-spacing: inherit;
    outline: none;
    transition: border-color 0.25s ease;
}

.hp-madlib__story textarea {
    display: block;
    width: 100%;
    min-height: 6rem;
    padding-block: 0.5rem;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    line-height: 1.5;
    resize: vertical;
}

/* Native size-to-content where supported; home.js sets `size` as the fallback. */
.hp-blank input {
    field-sizing: content;
}

.hp-blank input::placeholder,
.hp-madlib__story textarea::placeholder {
    color: rgba(238, 243, 248, 0.28);
}

.hp-blank input:focus,
.hp-madlib__story textarea:focus {
    border-bottom-color: var(--hp-sky);
}

.hp-madlib .is-invalid,
.hp-madlib input.invalid,
.hp-madlib textarea.invalid {
    border-bottom-color: var(--hp-red);
}

/* jQuery Validate drops its message straight after the field. */
.hp-madlib label.invalid {
    display: block;
    color: #ff8a8f;
    font: 600 0.72rem/1.3 var(--aim-font-sans);
    letter-spacing: 0;
}

.hp-blank label.invalid {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    white-space: nowrap;
}

.hp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.hp-chip {
    position: relative;
}

.hp-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hp-chip label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.05rem;
    border: 1px solid var(--hp-line);
    border-radius: 999px;
    color: var(--hp-ink);
    font: 600 0.82rem/1 var(--aim-font-sans);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.hp-chip label::before {
    content: '+';
    color: var(--hp-sky);
    font-weight: 700;
}

.hp-chip label:hover {
    border-color: rgba(var(--hp-sky-rgb), 0.6);
}

.hp-chip input:checked + label {
    border-color: var(--hp-sky);
    background: rgba(var(--hp-sky-rgb), 0.16);
}

.hp-chip input:checked + label::before {
    content: '\2713';
}

.hp-chip input:focus-visible + label {
    outline: 2px solid var(--hp-sky);
    outline-offset: 2px;
}

.hp-madlib__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
}

.hp-madlib__assure {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    color: var(--hp-muted);
    font: 500 0.8rem/1.4 var(--aim-font-sans);
    letter-spacing: 0;
}

.hp-contact__direct {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: clamp(3.5rem, 7vw, 6rem);
    padding-top: 2rem;
    border-top: 1px solid var(--hp-line);
}

.hp-contact__direct .hp-eyebrow {
    margin-bottom: 0.9rem;
}

.hp-contact__big {
    display: inline-block;
    font-family: var(--hp-display);
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

.hp-contact__small {
    display: block;
    margin-top: 0.35rem;
    color: var(--hp-muted);
}

.hp-contact__where {
    color: var(--hp-ink);
    line-height: 1.6;
}

.hp-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.aim-hp :is(.hp-contact__big, .hp-contact__small, .hp-socials a):hover {
    color: var(--hp-sky);
}

@media (max-width: 767.98px) {
    .hp-contact__direct {
        grid-template-columns: 1fr;
    }
}

/* --- Letter playground ---------------------------------------------------- */

.hp-play {
    position: relative;
    overflow: clip;
    padding-top: clamp(3rem, 6vw, 5rem);
    border-top: 1px solid var(--hp-line);
}

.hp-play__hint {
    padding-inline: var(--hp-gutter);
}

.hp-play__stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: clamp(240px, 40vw, 580px);
    padding-bottom: 1rem;
    color: var(--hp-ink);
    font-family: var(--hp-display);
    font-size: clamp(3.6rem, 13.5vw, 14rem);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.03em;
    direction: ltr;
    touch-action: pan-y;
    user-select: none;
}

.hp-play__letter {
    display: inline-block;
}

.hp-play__letter--star {
    margin-inline-start: 0.08em;
    margin-bottom: 0.25em;
    color: var(--hp-red);
    font-size: 0.3em;
}

.hp-play__gap {
    display: inline-block;
    width: 0.2em;
}

.hp-play.is-live .hp-play__letter {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    will-change: transform;
}

/* --- Keyframes ------------------------------------------------------------ */

@keyframes hp-sweep {
    0% { opacity: 1; transform: scaleX(0); }
    60% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1); }
}

@keyframes hp-rise {
    from { transform: translateY(105%); }
}

@keyframes hp-bloom {
    from { opacity: 0; scale: 0.55; }
}

@keyframes hp-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes hp-fade-up {
    from { opacity: 0; transform: translateY(24px); }
}

@keyframes hp-spin {
    to { rotate: 360deg; }
}

@keyframes hp-float {
    50% { transform: translateY(-6px) rotate(8deg); }
}

@keyframes hp-marquee {
    to { transform: translateX(-50%); }
}

/* --- Phones and small tablets ------------------------------------------------ */

@media (max-width: 767.98px) {
    .hp-cards__meta {
        max-width: none;
        text-align: start;
    }

    /* A shorter runway on phones, so the slogan never leaves screens of
       empty black while it slides past. */
    .hp-motion .hp-slogan {
        height: 170vh;
    }

    .hp-slogan__track {
        font-size: 15vw;
    }
}

@media (max-width: 575.98px) {
    .hp-eyebrow {
        font-size: 0.66rem;
        letter-spacing: 0.14em;
    }

    .hp-services__list {
        padding-inline-start: 0;
    }

    .hp-service__link {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 0 0.9rem;
    }

    .hp-service__num {
        display: none;
    }

    .hp-service__title {
        font-size: clamp(1.6rem, 8.4vw, 2.2rem);
    }

    .hp-stats {
        gap: 1rem 1.25rem;
    }

    .hp-stats dt {
        letter-spacing: 0.08em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aim-hp *,
    .aim-hp *::before,
    .aim-hp *::after {
        animation: none !important;
        transition: none !important;
    }
}