/* UPDATE this rule to let JS control easing */
html {
    scroll-behavior: auto;
}

/* ADD (subtle entrance animation baseline) */
.reveal {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    filter: blur(6px);
    will-change: transform, opacity, filter;
}
.reveal.in {
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
        filter 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.about-sec,
.services-sec,
.testimonials-sec,
.contact-sec,
.hub-sec,
.video-sec,
.social-sec {
    scroll-margin-top: var(--nav-offset, 120px);
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* Scroll bar */

:root {
    --sb-track: transparent; /* lighter look */
    --sb-thumb: #392def;
    --sb-thumb-hover: #6b72ff; /* brighter hover */
}

/* Firefox */
html {
    scrollbar-width: thin; /* already thin, keep */
}

/* WebKit (Chrome/Edge/Safari) */
::-webkit-scrollbar {
    width: 6px; /* thinner */
}

::-webkit-scrollbar-track {
    background: var(--sb-track);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--sb-thumb), #2a21b8);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12); /* crisp edge */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset,
        0 2px 8px rgba(57, 45, 239, 0.35); /* subtle glow */
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--sb-thumb-hover), var(--sb-thumb));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset,
        0 3px 12px rgba(107, 114, 255, 0.45);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #231aa4, var(--sb-thumb));
}

/* ---------- Base / Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
img {
    /* max-width: 100%; */
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}

body {
    background: #0a0a0a;
    color: #ededed;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI,
        Roboto, Arial, "Helvetica Neue", sans-serif;
}

/* ---------- Layout helpers ---------- */
.container {
    max-width: 1150px;
    margin: 0 auto;
    /* padding: 0 5px; */
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
    margin-top: 30px;
}
@media (max-width: 980px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Top Nav (pixel matched capsule) ---------- */
.nav {
    position: relative;
    z-index: 3;
    padding: 18px 0;
}
.nav .container {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding-inline: 30px;
}

/* Brand on the left */
.brand {
    font-weight: 800;
    letter-spacing: -2px;
    font-size: 26px;
    line-height: 1;
    color: #392def;
    /* background: linear-gradient(180deg, #6d77ff 0%, #392def 90%); */
    /* -webkit-background-clip: text;
        background-clip: text;
        color: transparent; */
}

/* Centered capsule menu */
.nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    height: 48px;
    padding: 0 14px;
    border-radius: 9999px;
    /* glassy / soft */
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.03) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 6px 20px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 18px;
    color: #e8eaee;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.92;
    border-radius: 9999px;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    opacity: 1;
}

/* tiny vertical dividers between items (except last) */
.nav-link:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.08);
}

/* small caret for "Career" */
.caret {
    display: inline-block;
    margin-left: 8px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: radial-gradient(
        circle at 50% 40%,
        rgba(255, 255, 255, 0.9),
        rgba(255, 255, 255, 0.65) 60%,
        rgba(255, 255, 255, 0) 61%
    );
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M7 10l5 5 5-5z"/></svg>')
        center/contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M7 10l5 5 5-5z"/></svg>')
        center/contain no-repeat;
    opacity: 0.8;
}

/* Keep capsule centered; reserve safe width so brand never overlaps */
.nav-center {
    max-width: calc(100vw - 160px); /* leaves room for brand + margins */
    overflow: hidden; /* JS will move overflow into More */
}
@media (max-width: 560px) {
    .nav-center {
        max-width: calc(100vw - 120px);
    }
}


/* Single "More" pill + dropdown (lives inside .nav-center, rightmost) */
.nav-more {
    position: relative;
    flex: 0 0 auto;
}
.nav-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e8eaee;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 6px 18px rgba(0, 0, 0, 0.28);
}
.nav-more-btn:after {
    content: "";
    width: 10px;
    height: 10px;
    opacity: 0.85;
    background: radial-gradient(
        circle at 50% 40%,
        #fff,
        #fff 60%,
        transparent 61%
    );
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M7 10l5 5 5-5z"/></svg>')
        center/contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M7 10l5 5 5-5z"/></svg>')
        center/contain no-repeat;
    transition: transform 0.18s ease;
}
.nav-more.open .nav-more-btn:after {
    transform: rotate(180deg);
}

.nav-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 180px;
    max-height: 60vh;
    overflow: auto;
    padding: 8px;
    border-radius: 14px;
    background: rgba(14, 14, 18, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 40;
}
.nav-more.open .nav-more-menu {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.nav-more-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: #e8eaee;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}
.nav-more-menu a:hover,
.nav-more-menu a.active {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Compact pill sizes (center stays intact) */
@media (max-width: 980px) {
    .nav-center {
        height: 44px;
        padding: 0 12px;
        gap: 6px;
    }
    .nav-link {
        padding: 8px 12px;
        font-size: 13px;
    }
    .nav-more-btn {
        height: 34px;
        padding: 0 12px;
        font-size: 12.5px;
    }
    .nav-link:not(:last-child)::after {
        display: none;
    }
}
@media (max-width: 560px) {
    .nav-center {
        height: 40px;
        padding: 0 10px;
        gap: 4px;
    }
    .nav-link {
        padding: 6px 10px;
        font-size: 12px;
    }
    .nav-more-btn {
        height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }
}

/* Hide any scrollbar inside capsule */
.nav-center::-webkit-scrollbar {
    height: 0;
}
/* Let the More menu escape the capsule */
.nav-center {
    overflow: visible;
}

/* Make sure the menu can layer above everything */
.nav {
    z-index: 20;
}
.nav-more.open {
    isolation: isolate;
} /* creates a new stacking context */
.nav-more-menu {
    z-index: 100;
} /* ensure it renders on top */

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: 0 0 0;
    overflow: hidden;
    background: radial-gradient(
            1500px 750px at 95% 35%,
            rgba(57, 45, 239, 0.18),
            transparent 68%
        ),
        #0a0a0a;
}
.glow {
    position: absolute;
    right: -23vw;
    top: -10vw;
    width: 80vw;
    height: 80vw;
    filter: blur(36px);
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        rgba(57, 45, 239, 0.55),
        rgba(57, 45, 239, 0) 65%
    );
    pointer-events: none;
    z-index: 0;
}

/* ---------- Left column ---------- */
.badge {
    color: #392def;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 18px;
    letter-spacing: 0.02em;
}
h1 {
    margin: 0 0 18px;
    font-weight: 700;
    font-size: clamp(35px, 4vw, 55px);
    line-height: 1.05;
    color: #f5f6ff;
    letter-spacing: -0.02em;
}
.accent {
    color: #392def;
    position: relative;
}

.lede {
    color: #ffffff;
    font-size: 16px;
    max-width: 56ch;
    margin: 0 0 26px;
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #392def;
    color: #fff;
    padding: 4px 2px 4px 15px;
    border-radius: 999px;
    border: 1px solid #392def;
    box-shadow: 0 10px 30px rgba(57, 45, 239, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 20px;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.cta .cta-icon img {
    width: 35px;
    height: 35px;
    display: block;
}

.cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 38px rgba(57, 45, 239, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ---------- Right column (photo) ---------- */
.photo-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    min-height: 600px;
    max-width: 100%;
    overflow: hidden;
    margin-top: -40%;
}
.photo {
    width: min(650px, 120%);
    height: auto;
    transform: scaleX(-1) rotate(-2.2deg);
    margin-right: -13%;

    /* transform-origin: 46% 100%; */
    /* filter: drop-shadow(0 0 0 #fff)
          drop-shadow(0 8px 26px rgba(238, 235, 235, 0.55))
          drop-shadow(0 0 22px rgba(246, 240, 240, 0.18)); */
}

.photo-outline {
    position: absolute;
    bottom: 0;
    right: -0.5%; /* match main photo’s offset */
    width: min(650px, 120%); /* match main photo’s size */
    height: auto;
    transform: scaleX(-1) rotate(-2.2deg) translate(10px, 8px); /* slight right & down */
    filter: brightness(0) invert(1); /* pure white “negative” */
    pointer-events: none; /* ignore mouse */
    z-index: 0; /* stays behind the main image */
}

/* ---------- Stats strip (REPLACE entire stats block) ---------- */
.stats {
    position: relative;
    z-index: 2;
    margin-top: -180px; /* a bit tighter */
}

.stats-card {
    --card-radius: 14px;
    background: #fff;
    color: #080811;
    border: 1px solid #e9eaf0;
    border-radius: var(--card-radius);
    padding: 30px 24px; /* smaller overall */
    box-shadow: 0 4px 22px rgba(8, 8, 17, 0.06);
}

/* desktop: compact 4 columns */
.stats-grid {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
    row-gap: 18px;
}

.stat {
    display: grid;
    grid-template-columns: 1fr; /* icon above text */
    row-gap: 8px;
}

.icon {
    width: auto;
    height: auto;
    display: block;
}

.icon img,
.icon svg {
    width: 28px; /* smaller icon */
    height: 28px;
    object-fit: contain;
    font-weight: bolder;
    font-weight: 900;
}

.stat h4 {
    margin: 15px 0 4px;
    font-size: 18px; /* smaller heading */
    font-weight: 900;
    color: #0b0e1a;
}

.stat p {
    margin: 0;
    font-size: 12px; /* smaller copy */
    line-height: 1.55;
    color: #080811;
    max-width: 42ch;
}
/* Make hero text clickable above the image */
.left-content {
    position: relative;
    z-index: 3;
}

/* The photo should always sit below the text */
.photo-wrap {
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .photo-wrap {
        margin-top: 0; /* instead of -30%/-40% on small screens */
    }
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1100px) {
    .hero-grid .left-content {
        padding-left: 20px;
    }

    .stats {
        padding: 10px;
        margin-top: -76px;
    }
    .stats-card {
        padding: 18px 20px;
    }
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 28px;
    }
}

@media (max-width: 900px) {
    .stats {
        padding: 10px;
        margin-top: -56px;
    }
    .stats-card {
        padding: 18px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 22px;
        row-gap: 16px;
    }
    .stat h4 {
        font-size: 17px;
    }
    .photo {
        margin-right: 0;
    }
    .photo-wrap {
        margin-top: -30%;
    }
}

@media (max-width: 560px) {
    .stats {
        padding: 10px;
        margin-top: 16px;
    } /* drop the overlap on mobile */
    .stats-card {
        padding: 16px 14px;
        border-radius: 12px;
    }
    .stats-grid {
        grid-template-columns: 1fr;
        row-gap: 14px;
    }
    .icon img,
    .icon svg {
        width: 22px;
        height: 22px;
        margin-top: 10px;
    }
    .stat h4 {
        font-size: 16px;
        margin-top: 0px;
    }
    .stat p {
        font-size: 13px;
        line-height: 1.6;
    }
}

/* Keep two-column layout until 768px */
/* @media (min-width: 769px) {
  .hero-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: end;
    gap: 40px;
  }
  .photo-wrap {
    justify-content: flex-end;
  }
} */

/* Stack under 768px: image centered, stats overlap bottom 20–30%, glow behind image */
@media (max-width: 768px) {
    .hero-grid {
        display: block;
    }

    .hero {
        margin-bottom: -20vw;
    }

    .photo {
        margin-right: 0;
        width: min(520px, 70%);
    }

    /* keep the glow visually behind the image area */
    .glow {
        left: 50%;
        right: auto;
        top: -6vw;
        width: 120vw;
        height: 120vw;
        transform: translateX(-50%);
        z-index: 0;
    }

    /* pull stats up to cover ~25% of the image bottom */
    .stats {
        padding: 10px;
        position: relative;
        margin-top: 0;
        top: -22vw; /* ~20–30% overlap depending on viewport */
        z-index: 2;
    }

    .stats-card {
        padding: 16px 14px;
    }
}

/* Fine-tune very small screens for a touch more overlap and perfect centering */
@media (max-width: 560px) {
    .photo {
        width: min(460px, 92vw);
    }
    .photo-outline {
        width: min(460px, 92vw);
    }
    .stats {
        top: -28vw;
    } /* a bit more coverage on tiny screens */
}

/* >=769px: restore stable two-column layout, correct photo & stats positions */
@media (min-width: 769px) and (max-width: 900px) {
    .hero-grid {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
    }

    h1 {
        font-size: clamp(25px, 1vw, 30px);
    }

    .badge {
        font-size: 14px;
    }

    .lede {
        font-size: 13px;
    }
    .photo-wrap {
        min-height: 540px;
        margin-top: -28%;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .photo {
        width: min(520px, 95%);
        margin-right: -6%;
        margin-top: 20%;
    }
    .photo-outline {
        right: -0.5%;
        width: min(520px, 95%);
        transform: scaleX(-1) rotate(-2.2deg) translate(8px, 6px);
    }
    .stats {
        position: relative;
        top: auto;
        margin-top: -120px; /* gentle overlap */
        padding: 0; /* remove mobile padding that pushed it down */
        z-index: 2;
    }
    .glow {
        left: auto;
        right: -20vw; /* keep glow behind photo on the right */
        top: -10vw;
        width: 80vw;
        height: 80vw;
        transform: none;
        z-index: 0;
    }
}

@media (min-width: 901px) {
    .hero-grid {
        display: grid;
        grid-template-columns: 1.08fr 0.92fr;
        gap: 40px;
    }
    .photo-wrap {
        min-height: 600px;
        margin-top: -40%;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .photo {
        width: min(650px, 120%);
        margin-right: -13%;
    }
    .photo-outline {
        right: -0.5%;
        width: min(650px, 120%);
        transform: scaleX(-1) rotate(-2.2deg) translate(10px, 8px);
    }
    .stats {
        position: relative;
        top: auto;
        margin-top: -180px; /* original overlap restored */
        padding: 0;
        z-index: 2;
    }
    .glow {
        left: auto;
        right: -23vw;
        top: -10vw;
        width: 80vw;
        height: 80vw;
        transform: none;
        z-index: 0;
    }
}

/* ---------- Video Section ---------- */
.section {
    padding: 64px 0 60px;
}
.video-sec {
    position: relative;
    margin-top: 60px;
    background-image: url("/images/glows/glows.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 80% auto;
}

.video-sec .container {
    padding-left: 50px;
    padding-right: 50px;
}

.video-eyebrow {
    color: #392def;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.video-sec h2 {
    margin: 0 0 10px;
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: 1.15;
    font-weight: 800;
    color: #ffffff;
}
.video-sec h2 .accent {
    color: #392def;
    text-decoration: none;
}
.video-lede {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.7;
    max-width: 100ch;
    margin-bottom: 25px;
    font-weight: bold;
}
.video-wrap {
    margin-top: 16px;
}
.video-note {
    background: #cf1e20; /* red bar */
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    padding: 2px 8px;
    border-radius: 12px 12px 0 0;
    font-size: 16px;
}
/* HD poster fills perfectly */
.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16/6;
    background: #0b0b0b;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    isolation: isolate;
}
.video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateZ(0);
    filter: brightness(0.98) contrast(1.04);
}
.video-playbtn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}
.video-playbtn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-35%, -50%);
    border-left: 20px solid #392def;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}
.video-frame:hover .video-thumb {
    filter: brightness(1) contrast(1.06);
}
.video-frame:hover .video-playbtn {
    transform: translate(-50%, -50%) scale(1.03);
}

@media (max-width: 560px) {
    .video-sec {
        background-size: 420px auto;
    }
}

@media (max-width: 560px) {
    .video-playbtn {
        width: 58px;
        height: 58px;
    }
    .video-playbtn::before {
        border-left-width: 16px;
        border-top-width: 10px;
        border-bottom-width: 10px;
    }
}
.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0 0 12px 12px;
}

/* tighten spacing on small screens */
@media (max-width: 560px) {
    .section {
        padding: 40px 0 56px;
    }
    .video-note {
        font-size: 12px;
        border-radius: 10px 10px 0 0;
    }
    .video-frame {
        border-radius: 0 0 10px 10px;
    }
}

/* ---------- Social Proof ---------- */
.social-sec {
    position: relative;
    padding: 60px 0 60px;
}
.social-eyebrow {
    color: #392def;
    font-size: 18px;
    font-weight: 800;
    /* letter-spacing: 0.12em; */
    /* text-transform: uppercase; */
    margin-bottom: 10px;
}
.social-sec h2 {
    margin: 0 0 22px;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.15;
    font-weight: 800;
    color: #ffffff;
}
.social-sec h2 .accent {
    color: #392def;
    text-decoration: none;
}

/* Extend the marquee line a bit beyond the container edges */
:root {
    --marquee-bleed: 40px;
}

.social-sec .marquee {
    margin-left: calc(-1 * var(--marquee-bleed));
    margin-right: calc(-1 * var(--marquee-bleed));
    padding-left: var(--marquee-bleed);
    padding-right: var(--marquee-bleed);
}

/* marquee (sliding brand logos) */
.marquee {
    margin-top: 8px;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 8%,
        #000 92%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 8%,
        #000 92%,
        transparent
    );
}
.marquee-track {
    display: flex;
    gap: 42px;
    align-items: center;
    animation: scroll-x 28s linear infinite;
    will-change: transform;
}
.marquee:hover .marquee-track {
    animation-play-state: paused;
}
@keyframes scroll-x {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
.brand-logo {
    height: 28px;
    width: auto;
    opacity: 0.9;
}

/* =========================================
   VIDEO TESTIMONIALS — Single-row, full-bleed
   (SCOPED: .sb-*)
   ========================================= */

/* Full-bleed helper like your marquee */
:root {
    --sb-bleed: 40px;
}

.sb-stories {
    --sb-gap: 24px;
    --sb-card-min: 240px; /* a bit bigger */
    --sb-card-max: 340px;
    --sb-ratio: 9/13;
    --sb-fade: 140px; /* section fades */
    --sb-rail-padding: 32px;
    --sb-arrow-size: 52px;
    position: relative;
    padding: 14px 0 46px;
    overflow: hidden;
}

/* Full-bleed edges (beyond container) */
.sb-fullbleed {
    margin-left: calc(-5 * var(--sb-bleed));
    margin-right: calc(-5 * var(--sb-bleed));
    padding-left: var(--sb-bleed);
    padding-right: var(--sb-bleed);
}

/* Section-wide fades (soften outermost edges) */
.sb-stories::before,
.sb-stories::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--sb-fade);
    z-index: 2;
    pointer-events: none;
}
.sb-stories::before {
    left: 0;
    background: linear-gradient(
        90deg,
        rgba(10, 10, 10, 1),
        rgba(10, 10, 10, 0)
    );
}
.sb-stories::after {
    right: 0;
    background: linear-gradient(
        270deg,
        rgba(10, 10, 10, 1),
        rgba(10, 10, 10, 0)
    );
}

/* Rail */
.sb-rail {
    position: relative;
    margin: 12px 0 28px;
    padding: 0 var(--sb-rail-padding);
}
/* place below existing .sb-rail rule */
.sb-rail + .sb-rail {
    margin-top: 18px;
}

.sb-title {
    margin: 0 0 10px;
    font: 600 16px/1 "Inter", system-ui, -apple-system, Segoe UI, Roboto,
        sans-serif;
    color: #fff;
}

/* Viewport + track */
.sb-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.sb-viewport::-webkit-scrollbar {
    display: none;
}

/* Edge fades INSIDE the viewport (like marquee) */
.sb-mask {
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 6%,
        #000 94%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 6%,
        #000 94%,
        transparent
    );
    padding: 6px 0;
}

.sb-track {
    display: flex;
    gap: var(--sb-gap);
    padding: 10px 0 18px;
}

/* Card */
.sb-card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(var(--sb-card-min), 22vw, var(--sb-card-max));
    padding: 0;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease;
    background: transparent; /* kill default button bg */
    box-shadow: none; /* ensure no halo */
    appearance: none; /* reset default button styles */
    -webkit-appearance: none;
    backface-visibility: hidden; /* reduce subpixel seams on scale */
    transform: translateZ(0); /* promote for smoother edges */
}

.sb-card::before {
    content: "";
    display: block;
    aspect-ratio: var(--sb-ratio);
}

/* Poster */
.sb-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    display: block;
}

/* Play button */
.sb-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.sb-play::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-38%, -50%);
    border-left: 15px solid #392def;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.sb-card:hover {
    transform: translateY(-2px) scale(1.04);
}
.sb-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(57, 45, 239, 0.45);
}

.sb-card::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Inline video (contain, no crop) */
.sb-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
    border: 0;
    display: block;
    border-radius: inherit;
}

/* Helpers */
.sb-hidden {
    display: none !important;
}

/* Nav buttons */
.sb-nav {
    position: absolute;
    top: 48%;
    translate: 0 -50%;
    width: var(--sb-arrow-size);
    height: var(--sb-arrow-size);
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    background: rgba(24, 24, 24, 0.65);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    display: grid;
    place-items: center;
    z-index: 3;
    transition: background 0.2s ease, transform 0.2s ease;
}
.sb-nav:hover {
    background: rgba(30, 30, 30, 0.9);
    transform: scale(1.06);
}
.sb-nav:focus-visible {
    /* outline: 2px solid #fff;
    outline-offset: 2px; */
}
.sb-prev {
    left: 6px;
}
.sb-next {
    right: 6px;
}
.sb-nav::before {
    content: "";
    width: 13px;
    height: 13px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
}
.sb-prev::before {
    transform: rotate(225deg);
}

/* Responsive tuning */
@media (max-width: 1280px) {
    .sb-stories {
        --sb-card-min: 230px;
        --sb-card-max: 320px;
        --sb-rail-padding: 28px;
    }
    .sb-fullbleed {
        margin-left: calc(-3 * var(--sb-bleed));
        margin-right: calc(-3 * var(--sb-bleed));
        padding-left: var(--sb-bleed);
        padding-right: var(--sb-bleed);
    }
}
@media (max-width: 1024px) {
    .sb-stories {
        --sb-card-min: 220px;
        --sb-card-max: 300px;
        --sb-rail-padding: 22px;
    }
    .sb-fullbleed {
        margin-left: calc(-1 * var(--sb-bleed));
        margin-right: calc(-1 * var(--sb-bleed));
        padding-left: var(--sb-bleed);
        padding-right: var(--sb-bleed);
    }
}
@media (max-width: 768px) {
    .sb-stories {
        --sb-card-min: 200px;
        --sb-card-max: 260px;
        --sb-bleed: 28px;
    }
    .sb-fullbleed {
        margin-left: calc(-1 * var(--sb-bleed));
        margin-right: calc(-1 * var(--sb-bleed));
        padding-left: var(--sb-bleed);
        padding-right: var(--sb-bleed);
    }
}
@media (max-width: 480px) {
    .sb-stories {
        --sb-card-min: 180px;
        --sb-card-max: 220px;
        --sb-bleed: 22px;
    }
    .sb-fullbleed {
        margin-left: calc(-1 * var(--sb-bleed));
        margin-right: calc(-1 * var(--sb-bleed));
        padding-left: var(--sb-bleed);
        padding-right: var(--sb-bleed);
    }
}

/* bottom 4 feature bullets */
.proof-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
}
.pf-item {
    color: #ffffff;
}
.pf-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
    filter: brightness(1.4);
}
.pf-title {
    margin: 20px 0 5px;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
}
.pf-copy {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #ffffff;
}

/* responsive */
@media (max-width: 980px) {
    .brand-logo {
        height: 26px;
    }
    .proof-features {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .social-sec {
        padding: 48px 0 40px;
    }
    .brand-logo {
        height: 22px;
    }
    .proof-features {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* comfy side gutters on all but largest screens */
.social-sec .container {
    padding: 0 clamp(24px, 5vw, 40px);
}

/* fluid spacing & logo sizing across viewports */
.marquee-track {
    gap: clamp(20px, 4vw, 42px);
}
.brand-logo {
    height: clamp(18px, 2.2vw, 28px);
}

/* soften edge fade & bleed on narrower screens */
@media (max-width: 980px) {
    :root {
        --marquee-bleed: 28px;
    }
    .social-sec h2,
    .social-eyebrow {
        text-align: center;
    }
    .testimonials {
        margin-top: 38px;
    }
}

/* tablet/large-phone tightening */
@media (max-width: 768px) {
    :root {
        --marquee-bleed: 22px;
    }
    .social-sec {
        padding: 52px 0 48px;
    } /* a bit more breathing room */
    .social-sec .container {
        padding: 0 clamp(18px, 6vw, 28px);
    }
    .marquee {
        margin-top: 10px;
    }
}

/* small phones */
@media (max-width: 560px) {
    :root {
        --marquee-bleed: 16px;
    }
    .social-sec {
        padding: 48px 0 44px;
    } /* add a touch more bottom pad */
    .social-sec .container {
        padding: 0 clamp(16px, 6vw, 22px);
    }

    .pf-title {
        margin: 0px 0 5px;
    }

    .pf-icon {
        margin-top: 15px;
    }
}

/* accessibility: honor reduced motion (pause auto-scroll) */
@media (prefers-reduced-motion: reduce) {
    .marquee-track,
    .vrow .track {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* ===== About ===== */

.about-grid {
    display: grid;
    align-items: center;
    grid-template-columns: 1.05fr 1fr;
}

/* keep media container as positioning context */
/* Keep the glow locked to the TOP-CENTER of the left column */
.about-media {
    background: url("/images/glows/mahad_2_bg_glow.svg") center top / cover
        no-repeat;
}

/* Left panel with provided SVG background, nudged right */
.about-panel {
    position: relative;
    min-height: 600px;
    border-radius: 20px;
    overflow: hidden;
    /* background: url("images/glows/mahad_2_bg_glow.svg") 15% center / cover
    no-repeat; */
}

/* Social icons column (Instagram + LinkedIn) */
.about-social {
    position: absolute;
    top: 84px;
    display: grid;
    gap: 14px;
    z-index: 2;
}
.about-social a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.about-social a:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 12px 34px rgba(0, 0, 0, 0.45);
    background: #121217;
}
.about-social img {
    width: 28px;
    height: 28px;
    display: block;
    filter: brightness(1.2);
}

/* Portrait */
.about-img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: min(500px, 50%);
    left: 50%;
    transform: translateX(-50%);
}

/* subtle baseline line under shoes */
.about-baseline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );
    opacity: 0.6;
}

/* Right copy */
.about-eyebrow {
    color: #392def;
    font-weight: 800;
    font-size: 18px;
}
.about-title {
    margin: 0 0 15px;
    font-size: clamp(28px, 3vw, 45px);
    line-height: 1.12;
    font-weight: 800;
    color: #ffffff;
}
.about-p {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.7;
    margin: 25px 0 14px;
    max-width: 72ch;
}

/* CTA with soft glow like the reference */
.about-cta {
    margin-top: 10px;
    position: relative;
    box-shadow: 0 10px 30px rgba(57, 45, 239, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.about-cta::after {
    content: "";
    position: absolute;
    inset: auto 0 -14px 0;
    height: 24px;
    filter: blur(20px);
    background: radial-gradient(
        60% 60% at 50% 0%,
        rgba(91, 99, 255, 0.55),
        transparent 70%
    );
    pointer-events: none;
}

/* responsive */
@media (max-width: 980px) {
    .about-sec {
        padding: 56px 0 72px;
    }
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-social {
        margin-inline-start: 30px;
    }
    .about-copy {
        padding: 0 20px;
        margin-top: -30px 0 -70px 0;
    }

    .about-img {
        width: min(500px, 35%);
    }
}
@media (max-width: 560px) {
    .about-sec {
        padding: 56px 0 72px;
    }
    .about-panel {
        min-height: 405px;
        border-radius: 16px;
    }
    .about-social {
        margin-inline-start: 30px;
    }

    .about-img {
        width: min(500px, 45%);
    }

    .about-copy {
        padding: 0 20px;
        margin-top: -30px 0 -70px 0;
    }
    .about-baseline {
        bottom: 0px;
    }
    .about-social {
        margin-inline-start: 50px;
    }
}

/* ===== Testimonials (Stories of Trust and Success) ===== */
.testimonials-sec {
    /* background: #010014; */
    padding: 64px 0 56px;
}
/* ADD: only apply side padding on smaller screens */
@media (max-width: 1200px) {
    .testimonials-sec .container {
        padding: 0 32px;
    }
}
@media (max-width: 768px) {
    .testimonials-sec .container {
        padding: 0 24px;
    }
}
@media (max-width: 480px) {
    .testimonials-sec .container {
        padding: 0 16px;
    }
}

.testi-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 35px;
}
.testi-eyebrow {
    color: #392def;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.testi-title {
    margin: 0;
    font-weight: 800;
    line-height: 1.06;
    font-size: clamp(28px, 3.6vw, 45px);
    color: #ffffff;
}
.testi-title .accent {
    color: #392def;
}

/* REPLACE with this (matches .praise-cta styles) */
.readmore {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #392def;
    color: #ffffff;
    padding: 5px 2px 5px 18px;
    border-radius: 999px;
    border: 1px solid #392def;
    box-shadow: 0 10px 30px rgba(57, 45, 239, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 20px;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    min-height: 44px;
}
.readmore:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 38px rgba(57, 45, 239, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.readmore:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.readmore .cta-icon img {
    width: 35px;
    height: 35px;
    display: block;
}

/* Cards row — fluid grid on wide screens */
.testi-row {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(5, minmax(220px, 1fr)); /* was 200 */
    gap: 22px;
}
@media (max-width: 420px) {
    .testi-title {
        font-size: clamp(24px, 7vw, 32px);
    }
}

/* Smooth step-down in columns */
@media (max-width: 1400px) {
    .testi-row {
        grid-template-columns: repeat(4, minmax(220px, 1fr));
    }
}
/* 1024–1400px: keep five across */
@media (min-width: 1024px) and (max-width: 1400px) {
    .testi-row {
        display: grid; /* ensure we’re not in the carousel mode */
        grid-template-columns: repeat(5, minmax(220px, 1fr));
        gap: 22px;
    }
}

@media (max-width: 1200px) {
    .testi-row {
        grid-template-columns: repeat(3, minmax(220px, 1fr));
    }
}

@media (max-width: 1023.98px) {
    .testi-row {
        display: flex; /* …rest unchanged */
    }
}

/* Switch to snap carousel under ~1024px */
@media (max-width: 1024px) {
    .testi-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .readmore {
        align-self: flex-end;
    }

    .testi-row {
        display: flex; /* switch from grid to row */
        gap: 18px;
        overflow-x: auto;
        padding: 4px 6px 10px; /* keeps outer spacing intact */
        scroll-snap-type: x mandatory;
        scroll-padding: 12px;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(
            90deg,
            transparent 0,
            black 24px,
            black calc(100% - 24px),
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0,
            black 24px,
            black calc(100% - 24px),
            transparent 100%
        );
    }
    .testi-row > * {
        scroll-snap-align: start;
        flex: 0 0 auto;
        width: clamp(
            240px,
            70vw,
            340px
        ); /* responsive card width in carousel */
    }
    .testi-row::-webkit-scrollbar {
        height: 6px;
    }
    .testi-row::-webkit-scrollbar-thumb {
        background: #392def;
        border-radius: 999px;
    }
}

/* <= 860px: use a tidy 2-column grid (override the carousel) */
@media (max-width: 860px) {
    .testi-row {
        display: grid !important; /* override flex carousel */
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        overflow: visible;
        padding: 0;
        scroll-snap-type: none;
        mask-image: none;
        -webkit-mask-image: none;
    }
    .testi-row > * {
        flex: initial !important;
        width: auto !important;
    }
}

/* <= 720px: switch back to grid (no horizontal scroll) */
@media (max-width: 720px) {
    .testi-row {
        display: grid; /* override flex */
        grid-template-columns: repeat(2, 1fr); /* two in a line */
        gap: 16px; /* a bit tighter */
        overflow: visible; /* remove carousel scroll */
        padding: 0; /* let outer container handle padding */
        scroll-snap-type: none; /* disable snapping */
        mask-image: none;
        -webkit-mask-image: none;
    }
    .testi-row > * {
        flex: initial; /* reset from flex carousel */
        width: auto; /* let grid control width */
    }

    /* slightly smaller cards on small screens */
    .tcard {
        aspect-ratio: 4 / 5; /* a bit shorter than 3/4 */
        min-height: 220px; /* safety floor */
        border-radius: 12px; /* tighter radius for small view */
        isolation: isolate; /* creates its own stacking context */
        z-index: 0;
    }

    /* text scales down a touch */
    .tquote {
        font-size: clamp(11px, 3.8vw, 13px);
    }
    .tname {
        font-size: clamp(10px, 3.2vw, 12px);
    }

    /* play pill a bit smaller */
    .tplay {
        width: 32px;
        height: 32px;
    }
    .tplay-ico {
        width: 16px;
        height: 16px;
    }
}

/* <= 560px: show TWO smaller cards per row */
@media (max-width: 560px) {
    .testi-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        overflow: visible !important;
        padding: 0 !important; /* container now handles side padding */
        scroll-snap-type: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }
    .testi-row > * {
        flex: initial !important;
        width: auto !important;
    }

    /* more compact cards for small screens */
    .tcard {
        aspect-ratio: 2 / 3; /* smaller & taller-than-wide */
        min-height: 180px; /* compact floor */
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    }
    .tcopy {
        left: 12px;
        right: 12px;
        bottom: 8px;
        padding-right: 26px;
    }
    .tquote {
        font-size: clamp(10px, 3.2vw, 12px);
        line-height: 1.45;
        margin-bottom: 4px;
    }
    .tname {
        font-size: clamp(9px, 2.8vw, 11px);
        opacity: 0.7;
    }
    .tplay {
        width: 28px;
        height: 28px;
        right: 8px;
        bottom: 8px;
    }
    .tplay-ico {
        width: 12px;
        height: 12px;
    }
}

/* 560px–720px: keep 2-up but slightly smaller cards */
@media (min-width: 561px) and (max-width: 720px) {
    .testi-row {
        gap: 14px;
    }
    .tcard {
        aspect-ratio: 4 / 5;
        min-height: 210px;
    }
    .tquote {
        font-size: clamp(11px, 2.8vw, 13px);
    }
    .tname {
        font-size: clamp(10px, 2.4vw, 12px);
    }
    .tplay {
        width: 32px;
        height: 32px;
    }
    .tplay-ico {
        width: 16px;
        height: 16px;
    }
}

/* Single card */
.tcard {
    position: relative;
    border-radius: 16px; /* was 8px */
    overflow: hidden;
    background-color: #010014;
    background-image: radial-gradient(
        320px 320px at 50% 82%,
        rgba(74, 63, 241, 1),
        transparent 68%
    );
    aspect-ratio: 3 / 4; /* replaces fixed min-height */
    min-height: 260px; /* fallback if aspect-ratio not supported */
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    transition: transform 0.18s ease, box-shadow 0.2s ease;
    will-change: transform;
}
/* Hover lift only on desktops/trackpads */
@media (hover: hover) and (pointer: fine) {
    .tcard:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
    }
}
/* No lift on touch devices (prevents visual overlap) */
@media (hover: none) {
    .tcard:hover {
        transform: none;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    }
}

/* gentle image overlay for text contrast */
.tcard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 20, 0) 40%,
        rgba(0, 0, 20, 0.7) 100%
    );
    pointer-events: none;
}

.timg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Quote & name */
/* Quote & name */
.tcopy {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 10px;
    z-index: 2;
    color: #ffffff;
    padding-right: 32px; /* room for play pill */
}

.tquote {
    margin: 0 0 6px;
    font-size: clamp(11px, 1.7vw, 14px); /* responsive */
    font-weight: 800;
    line-height: 1.55;
    text-wrap: balance;
}

.tname {
    color: #ffffff;
    font-size: clamp(10px, 1.2vw, 12px); /* responsive */
    opacity: 0.6; /* slightly higher than 0.5 */
}

/* Play pill */
.tplay {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 3;
    width: 36px; /* larger tap target */
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #937e82;
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.tplay:hover {
    transform: translateY(-2px);
}
.tplay:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.tplay-ico {
    width: 18px; /* was 15 */
    height: 18px;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .tcard,
    .readmore,
    .tplay {
        transition: none !important;
    }
    .testi-row {
        scroll-behavior: auto;
    }
}

/* <= 468px: single compact card (a bit larger) */
@media (max-width: 468px) {
    .testi-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        overflow: visible !important;
        padding: 0 !important;
        justify-items: center; /* center the card */
    }
    .testi-row > * {
        flex: initial !important;
        width: auto !important;
    }

    .tcard {
        width: 92%; /* wider than before (was 86%) */
        max-width: 360px; /* allow a bit more width */
        aspect-ratio: 13 / 16; /* slightly broader than 9/16 */
        min-height: 300px; /* small safety floor */
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    }

    .tcopy {
        left: 12px;
        right: 12px;
        bottom: 9px;
        padding-right: 26px;
    }
    .tquote {
        font-size: clamp(10.5px, 4.2vw, 12.5px); /* a touch larger */
        line-height: 1.5;
        margin-bottom: 4px;
    }
    .tname {
        font-size: clamp(9.5px, 3.6vw, 11.5px); /* a touch larger */
        opacity: 0.72;
    }
    .tplay {
        width: 28px;
        height: 28px;
        right: 8px;
        bottom: 8px;
    }
    .tplay-ico {
        width: 12px;
        height: 12px;
    }
}

/* ===== Our Services ===== */
.services-sec {
    background-image: url("/images/services/service_glow.svg");
    background-repeat: no-repeat;

    /* center the artwork */
    background-position: center top; /* use 'center top' if you want it pinned to the top */
    background-size: 90% auto;
    /* make it smaller + responsive */
    /* background-size: min(820px, 70vw) auto; */
    padding: 40px 5px 0px;
}

.services-head .eyebrow {
    color: #392def;
    font-weight: 800;
    font-size: 18px;
    margin-top: 12px;
    margin-bottom: 12px;
}
.services-title {
    margin: 0 0 -20px;
    color: #ffffff;
    line-height: 1.07;
    font-size: clamp(32px, 5vw, 60px);
    font-weight: 800;
}
.services-title .accent {
    color: #392def;
}

/* item rows */
.svc-item {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
    padding-top: 50px;
}
.svc-item.flip {
    grid-template-columns: 0.9fr 1.1fr;
}
.svc-copy {
    max-width: 680px;
}
.svc-eyebrow {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}
.svc-eyebrow .ico {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
}
.svc-eyebrow .ico img {
    width: 60px;
    height: 60px;
    filter: brightness(1.2);
}
.svc-title {
    margin: 0 0 10px;
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 28px);
}
.svc-lede {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 16px;
    max-width: 56ch;
}

/* bullets */
.svc-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: grid;
    gap: 10px;
}
.svc-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #ffffff;
    font-size: 14px;
}
.svc-list li::before {
    content: "";
    flex: 0 0 18px;
    height: 18px;
    background: url("icons/services/tick.svg") center/contain no-repeat;
    margin-top: 1px;
}

/* artwork */
.svc-art {
    position: relative;
    display: flex;
    justify-content: center;
}
.svc-art img {
    width: min(420px, 22vw); /* was min(580px, 25vw) */
    height: auto;
}

.svc-item {
    position: relative;
    overflow: hidden; /* keep bg art contained */
}
.svc-copy {
    position: relative;
    z-index: 2;
}
/* buttons (matches your CTA look + arrow circle) */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 19px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease,
        border-color 0.2s ease;
}
.btn:hover {
    transform: translateY(-1px);
}

/* ===== Buttons (cleaned & de-duplicated) ===== */

/* Unique visual styles */
.btn-primary {
    background: #392def;
    color: #ffffff;
    padding: 5px 55px 5px 17px;
    border: 1px solid #392def;
    box-shadow: 0 24px 60px rgba(88, 80, 255, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.btn-ghost {
    background: transparent;
    color: #392def;
    padding: 5px 55px 5px 17px;
    border: 2px solid #392def;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Shared behavior to match .btn-submit */
.btn-primary,
.btn-ghost {
    position: relative;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border-radius: 999px;
    /* padding-right: 64px; room for the icon */
}

/* Shared icon circle */
.btn-primary::after,
.btn-ghost::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Variants */
.btn-primary::after {
    background-color: #ffffff; /* white circle */
    background-image: url("/icons/right_arrow_blue.svg");
}
.btn-ghost::after {
    background-color: #392def; /* blue circle */
    background-image: url("/icons/right_arrow_white.svg");
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Mobile */
@media (max-width: 560px) {
    .btn-primary,
    .btn-ghost {
        width: 100%;
        justify-content: center;
        /* padding-right: 40px; */
    }
}

/* ===== Service list tick (paths + flex) ===== */
.svc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.svc-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.svc-list li::before {
    content: "";
    flex: 0 0 18px;
    height: 18px;
    margin-top: 2px;
    background-image: url("/icons/services/tick.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ===== Artwork ===== */
.svc-art {
    position: relative;
    display: flex;
    justify-content: center;
}
.svc-art img {
    width: min(420px, 22vw);
    max-width: 100%;
    height: auto;
}

/* layout tighteners between rows */
.svc-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Mobile: two-up compact buttons in Services cards */
@media (max-width: 560px) {
    .svc-actions {
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    /* override the global mobile 100% width just inside services */
    .svc-actions .btn {
        width: auto !important;
        flex: 0 0 calc(50% - 6px); /* two per row */
        padding: 8px 36px 8px 12px; /* slimmer */
        font-size: 15px;
    }

    /* smaller trailing circle + arrow */
    .svc-actions .btn::after {
        right: 4px;
    }
}

/* === Turn the service image into a low-opacity background behind content on tablet/mobile === */
@media (max-width: 768px) {
    .svc-item,
    .svc-item.flip {
        grid-template-columns: 1fr; /* already present, ensure single column */
    }
    .svc-item {
        padding: 56px 18px 48px;
    }

    .svc-art {
        position: absolute;
        inset: -8% -4% auto -4%; /* slightly bleed out for nicer vignette */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1; /* sits under .svc-copy (which is z-index:2) */
        opacity: 0.08; /* low opacity “background” */
        filter: saturate(0.6) blur(0.3px); /* soften it a bit */
        pointer-events: none; /* purely decorative */
    }
    .svc-art img {
        width: min(86vw, 560px); /* big enough to read as background */
        height: auto;
        transform: translateY(4px);
    }
}

/* tighten even more on phones */
@media (max-width: 560px) {
    .services-sec {
        padding: 56px 0 24px; /* keep section compact on mobile */
    }
    .svc-item {
        padding: 44px 14px 36px;
    }
    .svc-art {
        opacity: 0.06; /* a touch lighter under small text */
        inset: -10% -6% auto -6%;
        filter: saturate(0.55) blur(0.6px);
    }
    .svc-art img {
        width: min(96vw, 520px);
        transform: translateY(6px);
    }
    .svc-title {
        font-size: clamp(20px, 6vw, 24px);
    }
    .svc-lede,
    .svc-list li {
        font-size: 13px;
        line-height: 1.65;
    }
    .svc-actions {
        gap: 10px;
    }
}

/* Center section heading on smaller screens */
@media (max-width: 768px) {
    .services-head {
        text-align: center;
    }
}

/* ≤768px: center each service block, lighter padding, higher bg-image opacity */
@media (max-width: 768px) {
    .svc-item {
        justify-items: center; /* center grid children */
        padding: 44px 16px 40px; /* a little smaller than before */
    }

    .svc-copy {
        margin-inline: auto; /* center the text block */
        max-width: 560px; /* keep a pleasant line length */
        text-align: center; /* center titles + buttons */
    }

    /* keep bullets readable; list text left but centered as a block */
    .svc-list {
        margin-inline: auto; /* center the list block */
        text-align: left;
        max-width: 56ch;
    }

    .svc-actions {
        justify-content: center;
    } /* center buttons row */

    /* When image is acting as bg art, make it a bit stronger */
    .svc-art {
        opacity: 0.1 !important;
    } /* was 0.08 */
}

/* ≤560px: even tighter card, slightly stronger bg image */
@media (max-width: 560px) {
    .svc-item {
        padding: 38px 14px 32px;
    } /* smaller “card” feel */

    /* titles/copy already scaled in your CSS; keep centered */
    .svc-copy {
        max-width: 520px;
    }

    /* make bg image a touch more visible on very small phones */
    .svc-art {
        opacity: 0.12 !important;
    } /* was 0.06 */
}

/* === ADD: Tablet/Large-Tablet padding tune (769–1200px) === */
@media (min-width: 769px) and (max-width: 1200px) {
    /* a bit more breathing room on the sides for this range */
    .services-sec .container {
        padding: 0 28px; /* was 0 */
    }

    /* slightly smaller service "cards" + tighter gaps */
    .svc-item {
        padding: 48px 18px 40px; /* was 50px top, none on sides */
        gap: 36px; /* was 48px */
    }

    /* keep text line-length comfortable at this width */
    .svc-copy {
        max-width: 640px; /* was 680px */
        margin-inline: 0; /* keep left aligned on this range */
    }

    /* keep header tidy relative to reduced padding */
    .services-head {
        margin-bottom: 10px; /* was default from layout */
    }
}

/* ===== Praise / Client Quotes (scrollable columns) ===== */
.praise-sec {
    padding: 64px 0 72px;
}

.praise-sec .container {
    padding: 0 40px 0;
}
.praise-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}
.praise-eyebrow {
    color: #392def;
    font-size: 17px;
    font-weight: 800;
}
.praise-title {
    margin: 0;
    font-weight: 800;
    line-height: 1.06;
    font-size: clamp(28px, 3.8vw, 40px);
    color: #ffffff;
}
.praise-title .accent {
    color: #392def;
}

/* Read more pill (matches previous style) */
.praise-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #392def;
    color: #ffffff;
    padding: 4px 1px 4px 18px;
    border-radius: 999px;
    border: 1px solid #392def;
    box-shadow: 0 10px 30px rgba(57, 45, 239, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 20px;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}
.praise-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 38px rgba(57, 45, 239, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.praise-cta .cta-icon img {
    width: 35px;
    height: 35px;
    display: block;
}

/* Grid of scrollable columns */
.praise-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(4, 1fr);
}
.pcol {
    max-height: 520px; /* fixed “window” height */
    overflow: auto; /* each column scrolls on its own */
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-right: 6px; /* room for scrollbar */
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;
}
/* nice thin scrollbar */
.pcol::-webkit-scrollbar {
    /* width: 8px; */
    width: 0;
    height: 0;
}
.pcol::-webkit-scrollbar-thumb {
    background: #1d1b4d;
    border-radius: 999px;
}
/* .pcol {
        scrollbar-color: #1d1b4d transparent;
        scrollbar-width: thin;
      } */

/* Quote card */
.pcard {
    position: relative;
    border-radius: 16px;
    padding: 22px 18px 14px;
    color: #cbd2ff;
    background: radial-gradient(
            140% 120% at 100% 0%,
            rgba(11, 9, 49) 0%,
            rgba(4, 3, 11) 65%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0) 100%
        );
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.pcard .qmark {
    position: absolute;
    left: 14px;
    top: 12px;
    width: 20px;
    height: 20px;
    opacity: 0.9;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.pcard p {
    margin: 24px 0 0; /* clear the quote mark */
    font-size: 11px;
    line-height: 1.72;
    color: #ffffff;
    font-weight: 400;
    opacity: 0.7;
}

/* Avatar footer */
.pfooter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pavatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.pavatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pmeta {
    line-height: 1.2;
}
.pname {
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
}
.prole {
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
}

/* Responsive columns */
@media (max-width: 1200px) {
    .praise-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 920px) {
    .praise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pcol {
        max-height: 460px;
    }
}
@media (max-width: 560px) {
    .praise-sec {
        padding: 0;
    }
    .praise-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .praise-grid {
        grid-template-columns: 1fr;
    }
    /* Keep a scrollable “window” even on single column */
    .pcol {
        max-height: 420px; /* was none */
        overflow: auto; /* was visible */
        padding-right: 6px; /* was 0 */
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch; /* smoother touch scroll */
    }
    .pcol::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .praise-cta {
        align-self: flex-end;
    }
}

/* ===== Content Hub (single-image) ===== */

.hub-sec {
    /* padding: 72px 0 48px; */
    position: relative;
}
.hub-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr; /* a touch more space to the art */
    align-items: center;
}

/* Artwork (single PNG that includes 3 iPhones) */
.hub-art-wrap {
    position: relative;
    min-height: clamp(700px, 100vw, 700px);
    display: flex;
    align-items: center;
    margin-left: -70px;
}
.hub-art {
    width: min(900px, 50vw); /* ↓ smaller than before for better balance */
    height: auto;
    transform: translateX(-8%); /* slight hang to the left */
    filter: drop-shadow(0 18px 52px rgba(0, 0, 0, 0.48));
}

/* Copy */
.hub-copy {
    max-width: 560px;
}
.hub-eyebrow {
    color: #392def;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
}
.hub-title {
    margin: 0 0 25px;
    font-weight: 800;
    line-height: 1.06;
    font-size: clamp(28px, 3.2vw, 48px); /* smaller headline to fit one line */
    color: #ffffff;
    white-space: nowrap; /* keep it on one line on desktop */
}
.hub-title .ig {
    color: #392def;
}

.hub-cta {
    gap: 20px;
    padding: 5px 2px 5px 20px;
    font-weight: 800;
    box-shadow: 0 24px 54px rgba(88, 80, 255, 0.32);
}

@media (max-width: 768px) {
    /* ===== Content Hub (overlay like screenshot) ===== */

    .hub-sec {
        margin-bottom: 50px;
        position: relative;
        overflow: hidden;
        /* padding: clamp(40px, 6vw, 80px) 0; */
    }

    .hub-grid {
        position: relative;
        display: grid;
        grid-template-columns: 1fr; /* single column: text over art */
        align-items: center;
        min-height: clamp(360px, 42vw, 540px);
    }

    /* Phones art becomes a background layer */
    .hub-art-wrap {
        position: absolute;
        inset: -10% -8% -12% -8%; /* slight bleed */
        display: block;
        margin: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.3; /* readable yet visible */
        filter: drop-shadow(0 18px 52px rgba(0, 0, 0, 0.48));
    }
    .hub-art {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-6deg) scale(1.02);
        width: min(1100px, 86vw);
        height: auto;
    }

    /* Copy overlays above */
    .hub-copy {
        text-align: center;
        position: relative;
        z-index: 2;
        max-width: min(720px, 92%);
    }
    .hub-eyebrow {
        color: #392def;
        font-weight: 800;
        font-size: clamp(14px, 1.6vw, 18px);
        text-transform: uppercase;
    }
    .hub-title {
        margin: 6px 0 clamp(12px, 2.2vw, 24px);
        font-weight: 800;
        line-height: 1.06;
        font-size: clamp(28px, 3.2vw, 48px);
        color: #fff;
        white-space: normal; /* allow wrap */
    }
    .hub-title .ig {
        color: #392def;
    }
    .hub-cta {
        gap: 20px;
        padding: 5px 2px 5px 20px;
        font-weight: 800;
        box-shadow: 0 24px 54px rgba(88, 80, 255, 0.32);
    }

    /* ===== Responsive polish ===== */

    /* 701–1400px: keep overlay, resize art & paddings gracefully */
    @media (min-width: 701px) and (max-width: 1400px) {
        .hub-sec {
            padding: clamp(48px, 5.6vw, 88px) 0;
        }
        .hub-grid {
            min-height: clamp(420px, 46vw, 680px);
        }
        .hub-art {
            width: min(1000px, 82vw);
            transform: translate(-50%, -50%) rotate(-6deg) scale(1);
        }
        .hub-art-wrap {
            opacity: 0.32;
        }
    }

    /* ≤700px: keep the same look, just a tighter band and a touch more opacity */
    @media (max-width: 700px) {
        .hub-sec {
            padding: clamp(40px, 8vw, 56px) 0;
        }
        .hub-grid {
            min-height: clamp(320px, 58vw, 420px);
        }
        .hub-sec .container {
            padding: 0 clamp(16px, 4.5vw, 24px);
        }

        .hub-art-wrap {
            inset: -14% -10% -16% -10%;
            opacity: 0.36;
        }
        .hub-art {
            width: min(900px, 120vw);
            transform: translate(-50%, -50%) rotate(-6deg) scale(1.02);
        }

        .hub-title {
            font-size: clamp(24px, 7vw, 34px);
            line-height: 1.12;
        }
        .hub-cta {
            margin-top: clamp(8px, 3.6vw, 14px);
        }
    }
}

/* ===== Contact (matches required look) ===== */
.contact-sec {
    padding: 0 0 50px;
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(300px, 1fr);
    gap: clamp(24px, 4vw, 90px);
    align-items: start;
}

.contact-copy .eyebrow {
    color: #392def;
    font-weight: 800;
    font-size: 17px;
}
.contact-title {
    margin: 0 0 24px;
    font-size: clamp(28px, 3.1vw, 45px);
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
}
.contact-cta {
    margin-top: 8px;
}

/* Card */
.contact-card {
    background: #392def; /* purple panel */
    color: #ffffff;
    padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 40px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 80px rgba(28, 22, 120, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    display: grid;
    gap: 18px;
}

/* Fields */
.field {
    display: grid;
    gap: 8px;
}
.label {
    font-size: 14px;
    font-weight: 200;
    color: #ffffff;
}

.input {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.607); /* underline style */
    padding: 16px 0 14px;
    color: #ffffff;
    opacity: 0.7;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input::placeholder {
    color: rgba(234, 236, 255, 0.7);
}
.input:focus {
    border-bottom-color: #fff;
    box-shadow: 0 4px 0 -2px rgba(255, 255, 255, 0.5);
}

/* Select with chevron */
.select-wrap {
    position: relative;
}
.select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 28px;
}
.select-wrap::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 16px;
    width: 18px;
    height: 18px;
    opacity: 0.9;
    background: radial-gradient(
        circle at 50% 40%,
        #fff,
        #fff 60%,
        transparent 61%
    );
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M7 10l5 5 5-5z"/></svg>')
        center/contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M7 10l5 5 5-5z"/></svg>')
        center/contain no-repeat;
}

/* Textarea matches input underline */
.textarea {
    resize: vertical;
    min-height: 120px;
    padding-bottom: 10px;
}

/* Actions */
.actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
    border-top: 2px solid rgba(255, 255, 255, 0.18); /* faint line above buttons */
    margin-top: 18px;
}

/* ADD – subtle polish for readability and touch targets */
.contact-card {
    border-radius: 8px;
    gap: clamp(14px, 2.2vw, 22px);
}

.contact-copy .eyebrow {
    font-size: clamp(14px, 1.6vw, 17px);
}
.contact-title {
    margin: 0 0 clamp(16px, 2.2vw, 24px);
}

.field {
    gap: clamp(6px, 1.2vw, 8px);
}

.label {
    font-size: clamp(12px, 1.3vw, 14px);
    letter-spacing: 0.01em;
}

.input {
    padding: clamp(12px, 1.8vw, 16px) 0 clamp(10px, 1.6vw, 14px);
    font-size: clamp(13px, 1.4vw, 14px);
    min-height: 42px; /* better tap target */
    caret-color: #fff;
}

/* stronger focus but still elegant */
.input:focus {
    border-bottom-color: #fff;
    box-shadow: 0 3px 0 -2px rgba(255, 255, 255, 0.55);
}

/* select chevron stays aligned as inputs get smaller */
.select-wrap::after {
    bottom: clamp(12px, 1.8vw, 16px);
}

.btn-submit {
    position: relative;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    font-weight: 900;
    font-size: 23px;
    gap: 20px;
    background: #ffffff;
    color: #392def; /* blue text like left CTA */
    border: 0;
    padding: 8px 55px 8px 22px; /* extra right space for the circle */
    border-radius: 999px; /* white pill */
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

/* bigger standalone icon (no extra bg/ring) */
.btn-submit--arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 42px; /* icon box size */
    height: 42px;
    background: transparent;
    background-image: url("/icons/right_arrow_white.svg"); /* use ../icons/... if relative */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 34px; /* actual icon size inside the box */
    border: 0;
    box-shadow: none;
    pointer-events: none;
}

/* ensure the button has room for the larger icon */
.btn-submit {
    padding: 8px 64px 8px 22px; /* increase right padding */
}

/* mobile tweaks */
@media (max-width: 560px) {
    .btn-submit {
        padding: 10px 68px 10px 18px;
        width: 100%;
        justify-content: center;
    }
    .btn-submit--arrow::after {
        width: 42px;
        height: 42px;
        background-size: 34px;
    }
}

/* ADD – mobile-first refinements */
@media (max-width: 720px) {
    .contact-title {
        font-size: clamp(22px, 6vw, 30px);
    }
    .contact-cta {
        margin-top: 10px;
    }
    .btn-submit {
        font-size: clamp(18px, 5.4vw, 22px);
    }
}

@media (max-width: 560px) {
    .contact-card {
        border-radius: 14px;
    }
    .input {
        min-height: 44px;
    }
    .actions {
        padding-top: 6px;
    }
    .btn-submit {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Responsiveness ===== */
@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}
@media (max-width: 560px) {
    .contact-sec {
        padding: 64px 0 84px;
    }
    .contact-card {
        padding: 18px 16px;
    }
    .actions {
        gap: 10px;
    }
    .btn-submit {
        padding: 10px 18px;
    }
    .btn-round {
        width: 36px;
        height: 36px;
    }
}

/* ADD – tiny phones feel good too */
@media (max-width: 380px) {
    .contact-sec .container {
        padding: 0 12px;
    }
    .contact-card {
        padding: 16px 14px;
    }
    .input {
        min-height: 46px;
    }
    .btn-submit {
        padding: 10px 18px;
    }
}

@media (max-width: 1200px) {
    .contact-sec .container {
        padding: 0 32px;
    }
}
@media (max-width: 768px) {
    .contact-sec .container {
        padding: 0 24px;
    }
}
@media (max-width: 480px) {
    .contact-sec .container {
        padding: 0 16px;
    }
}

/* ===== Footer (responsive) ===== */
.site-footer {
    padding: 18px 0 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
.footer-email {
    justify-self: start;
    color: #ffffff;
    font-size: 14px;
}
.footer-brand {
    justify-self: center;
    color: #ffffff;
    font-weight: 600;
}
.footer-social {
    justify-self: end;
    display: flex;
    gap: 12px;
}
.footer-social img {
    width: 18px;
    height: 18px;
    display: block;
    filter: brightness(1.2);
}

/* Footer polish + grid-areas to make reflow easy */
.site-footer .container {
    padding: 0 clamp(16px, 4vw, 32px);
}
.footer-grid {
    grid-template-areas: "email brand social";
}
.footer-email {
    grid-area: email;
    font-size: clamp(13px, 1.4vw, 14px);
    opacity: 0.9;
    overflow-wrap: anywhere;
}
.footer-brand {
    grid-area: brand;
    font-size: clamp(14px, 1.6vw, 16px);
    letter-spacing: 0.02em;
}
.footer-social {
    grid-area: social;
}

.footer-social a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

/* ===== Breakpoints ===== */
@media (max-width: 980px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .contact-form {
        grid-template-columns: 1fr; /* stack fields */
        padding: 22px;
    }
    .form-actions {
        justify-content: flex-start;
    }
}

/* ≤900px: 2-row footer (brand on its own row, email left, socials right) */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "brand brand"
            "email social";
        row-gap: 12px;
    }
    .footer-brand {
        justify-self: center;
    }
    .footer-email {
        justify-self: start;
    }
    .footer-social {
        justify-self: end;
    }
}

/* ≤560px: single-column footer with comfy spacing */
@media (max-width: 560px) {
    .site-footer {
        padding: 16px 0 26px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "email"
            "social";
        text-align: center;
        row-gap: 10px;
    }
    .footer-brand,
    .footer-email,
    .footer-social {
        justify-self: center;
    }

    .footer-social {
        gap: 14px;
    }
    .footer-social a {
        width: 40px;
        height: 40px;
    } /* bigger tap targets */
}

/* Simple top-right toast */
.toast-wrap {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    min-width: 240px;
    max-width: 360px;
    border-radius: 12px;
    padding: 12px 14px;
    color: #0f172a;
    background: #fff;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
    border: 1px solid #e2e8f0;
    font-weight: 700;
}
.toast.success {
    border-color: #34d399;
    background: #ecfdf5;
    color: #065f46;
}
.toast.error {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}
.toast.info {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
}