.ivr {
    position: absolute;
    content: "";
    height: 60px;
    background-color: var(--color-green-950);
    width: 20%;
    bottom: 0;
    right: 0;
    border-top-left-radius: 30px;

    &:before,
    &:after {
        position: absolute;
        content: "";
        width: 30px;
        aspect-ratio: 1;
        background: radial-gradient(circle 30px at top left,
                #0000 98%,
                var(--color-green-950)) top left;
    }

    &:before {
        bottom: 0;
        left: -30px;
    }

    &:after {
        right: 0;
        top: -30px;
    }
}

.ivt {
    position: absolute;
    content: "";
    height: 60px;
    background-color: var(--color-green-950);
    width: 10rem;    /* fits "Get in Touch"; wider from lg, see below */
    top: 0;
    right: 0;
    border-bottom-left-radius: 30px;

    &:before,
    &:after {
        position: absolute;
        content: "";
        width: 30px;
        aspect-ratio: 1;
        background: radial-gradient(circle 30px at bottom left,
                #0000 98%,
                var(--color-green-950)) bottom left;
    }

    &:before {
        top: 0;
        left: -30px;
    }

    &:after {
        right: 0;
        bottom: -30px;
    }
}

.ivtl {
    position: absolute;
    content: "";
    height: 60px;
    background-color: var(--color-green-950);
    width: 7.5rem;   /* fits the logo; wider from lg, see below */
    top: 0;
    left: 0;
    border-bottom-right-radius: 30px;

    &:before,
    &:after {
        position: absolute;
        content: "";
        width: 30px;
        aspect-ratio: 1;
        background: radial-gradient(circle 30px at bottom right,
                #0000 98%,
                var(--color-green-950)) bottom right;
    }

    &:before {
        top: 0;
        right: -30px;
    }

    &:after {
        left: 0;
        bottom: -30px;
    }
}

/* Self-hosted fonts (copied into static/vendor by `npm run build:vendor`) */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("vendor/fonts/jost-latin-wght-normal.928f4210aa48.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("vendor/fonts/jost-latin-ext-wght-normal.7f44f6fd229b.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Lobster";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("vendor/fonts/lobster-latin-400-normal.9b5d1dc4d335.woff2") format("woff2");
}

.lobster {
    font-family: "Lobster", sans-serif;
    font-style: normal;
}


.jost {
    font-family: "Jost", sans-serif;
}

/* Still image of the 3D robot, shown until the live scene renders (or if WebGL is unavailable) */
.robot-poster {
    background: url("img/robot-poster.330baa17eac8.webp") center / contain no-repeat;
}

.robot-poster.robot-ready {
    background: none;
}

/* Markdown content: case studies and blog posts */
.prose-content > * + * { margin-top: 1em; }
.prose-content h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2em; }
.prose-content h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5em; }
.prose-content ul { list-style: disc; padding-left: 1.5em; }
.prose-content ol { list-style: decimal; padding-left: 1.5em; }
.prose-content li + li { margin-top: 0.35em; }
.prose-content a { text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.prose-content blockquote { border-left: 4px solid var(--color-yellow-400); padding-left: 1em; font-style: italic; }
.prose-content code { background: #f0fdf4; padding: 0.1em 0.3em; border-radius: 4px; font-size: 0.9em; }
.prose-content pre { background: var(--color-green-950); color: white; padding: 1em; border-radius: 6px; overflow-x: auto; }
.prose-content pre code { background: none; padding: 0; }
.prose-content img { border-radius: 6px; max-width: 100%; height: auto; }
.prose-content table { width: 100%; border-collapse: collapse; }
.prose-content th, .prose-content td { border: 1px solid var(--color-green-900); padding: 0.4em 0.6em; text-align: left; }

/* Carousel Css */

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-250px * 7));
    }
}

.slider {
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slider::before,
.slider::after {
    background: transparent;
    content: "";
    height: 0px;
    position: absolute;
    width: 0px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;
}

.slider-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 14);
}

.slide {
    height: 100px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hover-pause:hover .slider-track {
    animation-play-state: paused;
}

/* For logo images */
.logo-img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
    /* width/height attributes give the aspect ratio; keep the max-* box scaling proportionally */
    width: auto;
    height: auto;
    max-height: 60px;
    max-width: 180px;
}

.logo-img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Carousl CSS ends */
/* Honeypot field for spam bots (core/spam.py): off-screen rather than display:none,
   which some bots detect and skip. */
.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The hero's top notches have fixed widths sized to what sits in them, so the logo, menu and
   buttons never collide with the curves at any screen width (the menu is positioned just past
   the left notch's 30px curve in home.html). */
@media (min-width: 1024px) {
    .ivtl {
        width: 11rem;    /* the larger logo */
    }
    .ivt {
        width: 18rem;    /* "Book a call" + "Get in Touch" */
    }
}

@media (min-width: 1280px) {
    .ivt {
        width: 21rem;    /* + the WhatsApp icon */
    }
}

/* Smooth scrolling for in-page links (the hero's "Explore our services"), unless the
   visitor has asked their device to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}