:root {
    --volt: #D5FF3F;
    --ink: #0D0D0D;
    --ink2: #181818;
    --grey: #96968F;
    --bone: #F1EFE7;
    --brass: #C7A353;
    --iris: #7C5CFF;
    --hairline: rgba(241, 239, 231, .1);
    --shadow-lift: 0 24px 60px -24px rgba(0, 0, 0, .55);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--ink);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.display {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.serif-italic {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
}

::selection {
    background: var(--volt);
    color: var(--ink);
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--volt);
    outline-offset: 3px;
}

/* hero reveal — one orchestrated entrance, not repeated per-section */
.reveal-line {
    overflow: hidden;
}

.reveal-line>span {
    display: block;
    transform: translateY(115%);
    opacity: 0;
    animation: riseIn .85s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes riseIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp .7s ease forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* scroll-triggered reveal for section intros only */
.sr {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}

.sr.sr-in {
    opacity: 1;
    transform: translateY(0);
}

.sr-1 {
    transition-delay: .05s;
}

.sr-2 {
    transition-delay: .13s;
}

.sr-3 {
    transition-delay: .21s;
}

.sr-4 {
    transition-delay: .29s;
}

.spin-slow {
    animation: spin 16s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: scrollX 32s linear infinite;
}

.marquee-wrap:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes scrollX {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* rows: hover just confirms which row you're on — no unrelated motion */
.row-item {
    transition: background-color .25s ease;
}

.row-item:hover {
    background-color: rgba(255, 255, 255, .03);
}

.row-item .row-arrow {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .25s ease;
}

.row-item:hover .row-arrow {
    transform: rotate(45deg);
    background-color: var(--volt);
}

.row-item:hover .row-arrow svg {
    stroke: var(--ink);
}

.noise-btn {
    position: relative;
    overflow: hidden;
}

.noise-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--volt);
    transform: translateY(101%);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
    z-index: 0;
}

.noise-btn:hover::before {
    transform: translateY(0);
}

.noise-btn span {
    position: relative;
    z-index: 1;
}

.noise-btn:hover span {
    color: var(--ink);
}

.magnetic {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.num {
    font-variant-numeric: tabular-nums;
}

.grid-cell {
    position: relative;
    overflow: hidden;
}

.photo {
    position: relative;
    overflow: hidden;
}

.photo img,
.photo video {
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.photo:hover img,
.photo:hover video {
    transform: scale(1.05);
}

.grain-overlay {
    position: absolute;
    inset: 0;
    opacity: .05;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.quote-card {
    border: 1px solid rgba(237, 237, 232, .1);
    transition: border-color .3s ease;
}

.quote-card:hover {
    border-color: rgba(213, 255, 63, .35);
}

.service-card {
    transition: border-color .3s ease, background-color .3s ease;
}

.service-card:hover {
    border-color: rgba(213, 255, 63, .4);
    background-color: rgba(213, 255, 63, .03);
}

/* thin brass rule — used as a single recurring signature device, not decoration */
.rule-brass {
    background: linear-gradient(90deg, var(--brass), transparent);
}

.card-lift {
    box-shadow: var(--shadow-lift);
}

/* pricing card selected state gets its lift from elevation + a warmer surface, not another border */
.price-card-featured {
    background: linear-gradient(160deg, rgba(213, 255, 63, .07), rgba(213, 255, 63, .015));
}

/* ===== depth & pop: soft ambient light behind key moments, not on everything ===== */
.orb-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.orb-iris {
    background: radial-gradient(circle at 35% 35%, rgba(124, 92, 255, .55), rgba(124, 92, 255, 0) 70%);
}

.orb-volt {
    background: radial-gradient(circle at 35% 35%, rgba(213, 255, 63, .35), rgba(213, 255, 63, 0) 70%);
}

/* floating UI chip — the "call in progress" artifact of a pay-per-minute call business */
.float-chip {
    box-shadow: 0 20px 45px -12px rgba(0, 0, 0, .5), 0 2px 0 rgba(255, 255, 255, .04) inset;
    backdrop-filter: blur(6px);
}

@keyframes chipDrift {

    0%,
    100% {
        transform: translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateY(-10px) rotate(-2deg);
    }
}

.float-chip-drift {
    animation: chipDrift 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .float-chip-drift {
        animation: none;
    }
}

.pulse-dot {
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    animation: pulseRing 1.8s cubic-bezier(.22, 1, .36, 1) infinite;
}

@keyframes pulseRing {
    0% {
        transform: scale(.6);
        opacity: .9;
    }

    100% {
        transform: scale(2.1);
        opacity: 0;
    }
}

/* sphere-shaded icon badges — a single light source, top-left, for real dimensionality */
.icon-sphere {
    background: radial-gradient(circle at 32% 28%, rgba(213, 255, 63, .35), rgba(213, 255, 63, .06) 60%, rgba(213, 255, 63, .02) 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18), inset 0 -8px 16px rgba(0, 0, 0, .35), 0 8px 18px -8px rgba(0, 0, 0, .6);
}

.icon-sphere-iris {
    background: radial-gradient(circle at 32% 28%, rgba(124, 92, 255, .55), rgba(124, 92, 255, .1) 60%, rgba(124, 92, 255, .02) 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18), inset 0 -8px 16px rgba(0, 0, 0, .35), 0 8px 18px -8px rgba(0, 0, 0, .6);
}

/* tilt cards — a resting 3D lean that straightens on hover, instead of a flat card that just lifts */
.tilt-card {
    transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .65);
}

.tilt-card:hover {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

@media (max-width: 767px) {
    .tilt-card {
        transform: none;
    }
}

/* equalizer — a small motif borrowed from the radio/podcast side of the business */
.eq-bar {
    display: inline-block;
    width: 4px;
    border-radius: 2px;
    animation: eqBounce 1s ease-in-out infinite;
}

@keyframes eqBounce {

    0%,
    100% {
        transform: scaleY(.35);
    }

    50% {
        transform: scaleY(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .eq-bar {
        animation: none;
        transform: scaleY(.7);
    }
}

/* tactile buttons — a hard offset shadow that compresses on press, not just a color change */
.btn-pop {
    box-shadow: 5px 5px 0 0 var(--iris);
    transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s cubic-bezier(.22, 1, .36, 1);
}

.btn-pop:hover {
    transform: translate(2.5px, 2.5px);
    box-shadow: 2.5px 2.5px 0 0 var(--iris);
}

.btn-pop:active {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 0 var(--iris);
}

@media (prefers-reduced-motion: reduce) {

    .btn-pop:hover,
    .btn-pop:active {
        transform: none;
    }
}

/* sticker badge — rotated, hard-shadowed, like something stamped on top of the card */
.pop-sticker {
    transform: rotate(-3deg);
    box-shadow: 4px 4px 0 0 var(--volt);
}

/* ======================= */
/* ================================
     SR IMAGE CAROUSEL
  ================================= */

.sr-gallery-swiper {
    width: 100%;
    overflow: hidden;
}

.sr-gallery-swiper .swiper-slide {
    height: auto;
}

.sr-gallery-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.sr-gallery-photo img {
    transition: transform 0.6s cubic-bezier(.2, .65, .25, 1);
}

.sr-gallery-photo:hover img {
    transform: scale(1.035);
}


/* Navigation buttons */

.sr-gallery-prev,
.sr-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 999px;

    background: rgba(20, 20, 20, 0.88);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 20;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease,
        background .25s ease;
}


.sr-gallery-prev {
    left: 12px;
}

.sr-gallery-next {
    right: 12px;
}


/* Show buttons when hovering carousel */

.sr:hover .sr-gallery-prev,
.sr:hover .sr-gallery-next {
    opacity: 1;
    visibility: visible;
}


.sr-gallery-prev:hover,
.sr-gallery-next:hover {
    background: #000;
}


.sr-gallery-prev:hover {
    transform: translateY(-50%) translateX(-2px);
}

.sr-gallery-next:hover {
    transform: translateY(-50%) translateX(2px);
}


/* Disabled buttons */

.sr-gallery-prev.swiper-button-disabled,
.sr-gallery-next.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}


/* Tablet */

@media (max-width: 1023px) {

    .sr-gallery-prev,
    .sr-gallery-next {
        opacity: 1;
        visibility: visible;

        width: 38px;
        height: 38px;
    }

}


/* Mobile */

@media (max-width: 639px) {

    .sr-gallery-swiper {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .sr-gallery-swiper .swiper-wrapper {
        max-width: 100%;
    }

    .sr-gallery-prev,
    .sr-gallery-next {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .sr-gallery-prev {
        left: 8px;
    }

    .sr-gallery-next {
        right: 8px;
    }

}

/* hero tagline highlight: ink block with a hard offset shadow, matches .btn-pop language */
.hero-mark {
    box-shadow: 4px 4px 0 0 var(--iris);
    transform: rotate(-1.2deg);
    font-size: 0.92em;
    line-height: 1.15;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
/* ===== live availability pill (driven by assets/status.js) ===== */
.status-dot-wrap { position: relative; display: inline-flex; width: 10px; height: 10px; flex: none; }
.status-dot { position: relative; display: inline-flex; width: 10px; height: 10px; border-radius: 50%; background: var(--grey); }
.status-ping { position: absolute; inset: 0; border-radius: 50%; background: #4ade80; opacity: 0; }
[data-status-pill][data-state="online"] .status-dot { background: #4ade80; }
[data-status-pill][data-state="online"] .status-ping { opacity: .5; animation: statusPing 1.4s cubic-bezier(0, 0, .2, 1) infinite; }
[data-status-pill][data-state="offline"] .status-dot { background: #FF4D4D; }
@keyframes statusPing { 75%, 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-status-pill][data-state="online"] .status-ping { animation: none; }
}