/* ==========================================================================
   BREAKPOINTS (desktop-first; descending max-width overrides)
   - Large Desktops:   ≥1440px  (base styles stay UNWRAPPED)
   - Laptops & down:   ≤1439px  @media (max-width: 1439px) { ... }
   - Tablets & down:   ≤1023px  @media (max-width: 1023px) { ... }
   - Phones & down:    ≤767px   @media (max-width:  767px) { ... }
   - Small phones:     ≤479px   @media (max-width:  479px) { ... }
   ========================================================================== */


/* ===================== INTRO MEDIA QUERIES (starter) ===================== */
@media (max-width: 1200px) {
    .intro-container {
        --gutters: 4rem;
        --pair-pull: 160px;
        --intro-text-width: 55ch;
        padding-inline: clamp(1.5rem, 4vw, 4rem);
    }

    .intro-container .intro-title h1 {
        font-size: clamp(2.2rem, 4.5vw, 3rem);
    }
}

@media (max-width: 1140px) {
    .intro-container {
        --gutters: 3rem;
        --pair-pull: 100px;
        padding-inline: clamp(1.5rem, 3.5vw, 3rem);
    }

    .intro-container .intro-title h1 {
        font-size: clamp(2rem, 4vw, 2.7rem);
    }

    .intro-container .intro-text p {
        font-size: clamp(0.95rem, 1.8vw, 1.15rem);
        padding-inline: 1rem;
    }

    .intro-container .intro-list li {
        font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    }
}

@media (max-width: 1024px) {
    .intro-container {
        --grid-right: clamp(22rem, 34vw, 30rem);
        --pair-pull: 120px;
        --intro-text-width: 50ch;
        --intro-list-width: 36ch;
        padding-inline: clamp(1.5rem, 3vw, 2.5rem);
    }

    .intro-container .intro-title h1 {
        font-size: clamp(1.8rem, 3.8vw, 2.4rem);
    }

    /* Hide the desktop right-card border/glow when image is hidden */
    .intro-container .right-card::after {
        display: none !important;
    }

    .intro-container .right-card {
        display: none !important;
    }

}

@media (max-width: 780px) {
    .intro-container {
        --pair-pull: 0px;
    }

    .intro-container .intro-middle {
        grid-template-columns: 1fr;
        height: auto;
    }

    .intro-container .right-card::after,
    .intro-container .right-card>img {
        width: 100%;
        position: relative;
        height: auto !important;
    }

    .intro-container .right-card {
        margin-left: 0;
    }
}

@media (max-width: 479px) {
    /* <= phones        */
    /* ...styles... */
}

@media (min-width: 480px) and (max-width: 767px) {
    /* phones+      */
    /* ... */
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* tablets      */
    /* ... */
}

@media (min-width: 1024px) and (max-width: 1439px) {
    /* laptops      */
    /* ... */
}

@media (min-width: 1600px) {
    /* large desks  */
    /* ... */

    /* 0) Let the section own the clip, not the inner grid */
    /* .intro-container { overflow-x: hidden; }             */
    /* prevents page stretching */
    /* .intro-container .intro-middle { overflow: visible; }   */
    /* don't hide children */
    /* .intro-container .intro-right  { overflow: visible; }   */
    /* don't hide children */
}


/* laptops & down (≤1439px) */
@media (max-width: 1439px) {
    .site-header {
        padding: 1.25rem 3rem;
    }

    /* was 1.5rem 4rem desktop */
    .site-header .logo img {
        height: 72px;
    }

    /* was 80px desktop */
}

/* tablets & down (≤1023px) */
@media (max-width: 1023px) {
    .site-header {
        padding: 0.75rem 1.5rem;
        gap: 0.75rem;
        min-height: auto;
    }

    .site-header .logo img {
        height: clamp(48px, 6vw, 56px);
        max-height: 56px;
    }

    .chat-btn {
        width: clamp(7.5rem, 10vw, 8.5rem);
        height: 2.75rem;
        line-height: 2.75rem;
        font-size: clamp(0.8rem, 1.2vw, 0.9rem);
        padding: 0 1rem;
    }

    .btn-icon {
        width: 1em;
        height: 1em;
        margin-left: .35em;
    }

    /* Tablet intro text fixes */
    .intro-container .intro-title h1 {
        font-size: clamp(2.2rem, 4.5vw, 3rem) !important;
        line-height: 1.15;
    }

    .intro-container .intro-text p {
        font-size: clamp(1rem, 1.8vw, 1.15rem);
    }

    .intro-container .intro-list li {
        font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    }
}

/* Remove - now handled by expanded tablet portrait range below */

/* phones+ (≤767px) */
@media (max-width: 767px) {
    .site-header {
        padding: .65rem 1rem;
    }

    .site-header .logo img {
        height: clamp(44px, 7vw, 52px);
    }

    .chat-btn {
        width: clamp(7rem, 12vw, 8rem);
        height: clamp(2.5rem, 4vw, 2.75rem);
        line-height: clamp(2.5rem, 4vw, 2.75rem);
        font-size: clamp(0.75rem, 1.1vw, 0.85rem);
    }

    /* iPhone intro improvements */
    .intro-container {
        padding-inline: clamp(1rem, 4vw, 1.5rem) !important;
    }

    .intro-container .intro-title h1 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        line-height: 1.15;
        margin-bottom: 0.75rem;
    }

    .intro-container .intro-text p {
        font-size: clamp(0.875rem, 2vw, 1rem);
        line-height: 1.5;
        padding-inline: 0;
        max-width: 90%;
        margin-inline: auto;
    }

    .intro-container .intro-list li {
        font-size: clamp(0.8rem, 1.8vw, 0.9rem);
    }

    /* Carousel cards: make them single column on small phones */
    .old-resp .cards {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        gap: 1rem;
    }

    .old-resp .card {
        flex: 0 1 auto;
        width: 100%;
        max-width: 280px;
        min-width: auto;
    }

    .old-resp .card img {
        aspect-ratio: 16 / 10;
        border-radius: 12px;
    }

    .old-resp .card p {
        font-size: clamp(0.9rem, 2vw, 1rem);
    }
}



/* Global fluid typography improvements */
@media (max-width: 1200px) {
    .title-display {
        font-size: clamp(2.2rem, 4vw, 2.7em);
    }

    h2 {
        font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    }

    h3 {
        font-size: clamp(1.4rem, 2.8vw, 2rem);
    }

    body, p {
        font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    }
}

@media (max-width: 1000px) {
    .title-display {
        font-size: clamp(2rem, 3.8vw, 2.4em);
    }

    h2 {
        font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    }

    h3 {
        font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    }
}

@media (max-width: 767px) {
    .title-display {
        font-size: clamp(1.6rem, 5vw, 2rem) !important;
    }

    h2 {
        font-size: clamp(1.4rem, 4.5vw, 1.9rem);
    }

    h3 {
        font-size: clamp(1.2rem, 4vw, 1.6rem);
    }

    body, p {
        font-size: clamp(0.875rem, 2vw, 1rem);
    }
}

@media (max-width: 479px) {
    .title-display {
        font-size: clamp(1.35rem, 6vw, 1.75rem) !important;
    }

    h2 {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    h3 {
        font-size: clamp(1.1rem, 4.5vw, 1.4rem);
    }

    body, p {
        font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    }
}



@media (min-width: 900px) {
    .need-new-cards {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}

@media (max-width: 900px) {
    .need-new-middle {
        grid-template-columns: 1fr;
        text-align: center;
    }
}



@media (min-width: 1000px) {
    .calendly-middle {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 5rem;
    }
}


@media (min-width: 768px) and (max-width: 1023px) {
    .calendly-middle {
        flex-direction: row;
        gap: 2rem;
    }

    .design-partner-application-boxes {
        max-width: 440px;
    }
}

@media (min-width: 1440px) {
    .calendly-container {
        width: 80%;
    }

    .calendly-inline-widget {
        height: 680px;
    }
}



/* ----------------------------------------------------------------------------------------------------------------------------------  Small phones:     ≤479px   @media (max-width:  479px) { ... } */
@media (max-width: 479px) {
    .site-header {
        padding: .5rem 0.75rem;
        gap: .5rem;
    }

    .site-header .logo img {
        height: clamp(40px, 8.5vw, 48px);
    }

    .chat-btn {
        width: clamp(6.5rem, 14vw, 7.5rem);
        height: clamp(2.25rem, 5vw, 2.5rem);
        line-height: clamp(2.25rem, 5vw, 2.5rem);
        font-size: clamp(0.7rem, 1.2vw, 0.8rem);
        padding: 0 0.75rem;
    }

    .btn-icon {
        width: 0.9em;
        height: 0.9em;
    }

    .intro-container {
        padding-inline: clamp(0.75rem, 4vw, 1.25rem) !important;
    }

    .intro-container .intro-middle {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 1rem;
        height: auto;
        padding: 0 clamp(0.5rem, 3vw, 1rem);
    }

    .intro-container .intro-left {
        transform: translate(0, 0);
        /* remove desktop lift */
        padding-left: 0;
    }

    .intro-container .intro-right {
        display: none;
    }

    /* Show .intro-right-other-screens but make it break out of container */
    .intro-right-other-screens {
        display: block !important;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        overflow: visible;
    }

    .intro-right-other-screens .right-card {
        width: calc(100% - 1rem);
        max-width: none;
        margin: 0 auto;
        transform: scale(1.05);
        overflow: visible;
    }

    .intro-right-other-screens .right-card img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Title + copy sizing (use your vars, just smaller for phones) */
    .intro-container .intro-title {
        margin: 0 0 1rem;
    }

    .intro-container .intro-title h1 {
        font-size: clamp(1.35rem, 7vw, 1.9rem) !important;
        line-height: 1.15;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .intro-container .intro-text {
        max-width: 38ch;
        margin-inline: auto;
        margin-top: 1rem;
        padding-inline: 0.25rem;
    }

    .intro-container .intro-text p {
        font-size: clamp(0.85rem, 2.5vw, 0.95rem);
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* List spacing/size */
    .intro-container .intro-list {
        justify-content: center;
        margin-top: 1rem;
    }

    .intro-container .intro-list ul {
        padding-left: 1.1rem;
        /* smaller left indent */
        margin: .25rem 0 .75rem .25rem 0 .75rem;
        font-size: 1.2rem;
        /* from 1.65em desktop */
        line-height: 1.45;
        max-width: 34ch;
    }


    .intro-container .intro-list li {
        font-size: clamp(.95rem, 3.2vw, 1.1rem);
        margin: .15rem 0;
    }

    /* If you have buttons under the intro, keep them tappable but compact */
    .intro-container .actions .button,
    .intro-container .chat-btn {
        min-height: 44px;
        padding: 0 .9rem;
        font-size: .95rem;
    }

    /* Put both buttons on the same baseline */
    .intro-container .intro-buttons {
        gap: .6rem;
        align-items: stretch;
    }

    /* Equal HEIGHT + typography */
    .intro-container .intro-buttons .chat-btn,
    .intro-container .intro-buttons button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;

        height: 44px;
        /* same tap height */
        line-height: 44px;
        /* if the style relies on line-height */
        padding: 0 .9rem;
        /* equal horizontal padding */
        font-size: .95rem;
    }

    /* If you ALSO want equal WIDTHS, add this block. If not, skip it. */
    .intro-container .intro-buttons .chat-btn,
    .intro-container .intro-buttons button {
        flex: 1 1 0;
        /* makes them share the row equally */
        min-width: 0;
        width: auto;
        /* override desktop's fixed 11.5rem */
    }


    /* Center the list block under the title */
    .intro-container .intro-list {
        justify-content: center;
    }

    /* Let the UL center itself; remove width cap on phones */
    .intro-container .intro-list .fancy-list {
        width: 100%;
        max-width: none;
        text-align: center;
        /* centers the group; li will handle its own text */
        margin: .25rem 0 .75rem;

        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .fancy-list li {
        gap: var(--intro-bullet-gap);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        max-width: 34ch;
        margin: .15rem 0;
    }

    /* Keep the text “left” relative to its own icon for nice wraps */
    .fancy-list {
        text-align: left;
    }

    /* (this is already your default) */



    /* Section wrapper */
    .reality-container {
        padding: 3rem 1.5rem;
        /* safe side gutters */
        gap: 1.25rem;
        /* if you use CSS gap on the section */
    }

    /* If you have a grid wrapper (mirror of intro) */
    .reality-middle {
        display: grid;
        grid-template-columns: 1fr;
        /* stack columns */
        grid-template-areas: "rlead" "rtitle" "limage" "rbody";
        row-gap: 1.25rem;
        column-gap: 0;
        height: auto;
        /* avoid forcing tall rows on phones */
    }

    /* Title tweaks */
    .reality-title {
        text-align: center;
        margin-bottom: .75rem;
    }

    .reality-title h2,
    .reality-title h3,
    .reality-title .title-display {
        font-size: clamp(1.6rem, 6.5vw, 2.2rem);
        line-height: 1.2;
    }

    /* Columns → remove desktop padding/nudges */
    .reality-left,
    .reality-right {
        padding: 0;
        min-width: 0;
    }

    /* Images/figures on the left: fill width, keep ratio */
    .reality-left img,
    .reality-left picture,
    .reality-left figure img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
        border-radius: 12px;
        /* keep if you use rounded cards */
    }

    /* Body copy scale (if used here) */
    .reality-left .lead-copy,
    .reality-right .lead-copy {
        font-size: 1.05rem;
        line-height: 1.5;
        margin: 0 0 1rem;
    }

    .reality-right {
        display: contents;
    }

    .reality-right>h2 {
        grid-area: rtitle;
    }

    .reality-right>h3 {
        grid-area: rlead;
    }

    /* Fancy list on the right: center the block, keep icon+text hugging */
    .reality-right .fancy-list {
        max-width: 34ch;
        /* nice wrap width */
        margin: .25rem auto .75rem;
        /* centers the list block */
        padding-left: 0;
        text-align: left;
        /* IMPORTANT: keeps wraps under first line */
        /* font-size: 0.95rem;; */
    }

    .reality-right .fancy-list li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--intro-bullet-gap);
        line-height: var(--intro-li-line);
        margin: .15rem 0;
    }

    .reality-right .lead-wrap p:first-child {
        /* background-color: pink; */
        font-size: 0.85rem;
        font-weight: 600;
        font-style: italic;
    }

    .reality-right .lead-wrap p:last-child {
        margin-top: 0;
        /* background-color: yellow; */
        font-size: 0.9rem;
        font-weight: 580;
    }



    /* Section padding & title size */
    .carousel-container {
        padding: 2rem 1rem;
        gap: 0.25rem;
        min-height: auto;
    }

    .carousel-title h3 {
        font-size: clamp(1.4rem, 6.5vw, 2rem);
        margin-bottom: 1rem;
    }

    /* OLD (static) row — centered, wrap if needed, smaller cards */
    .old-resp .cards {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: .75rem;
        row-gap: 0rem;
        margin-inline: auto;
        background-color: white;
        width: 100%;
        border-radius: 16px;
        padding: 1rem 0 0 0;
    }

    .old-resp .card {
        flex: 0 1 44%;
        /* two-up when possible */
        min-width: 160px;
        max-width: 220px;
        /* padding: 1rem; */

        background: transparent;
        border: 0;
        box-shadow: none;



        padding: 0.5rem 0.8rem;
    }

    .old-resp .card img {
        aspect-ratio: 4 / 3;
    }

    .old-resp .card p {
        margin: 0.5rem 0 0;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 1rem;
        line-height: 1.35;
    }

    .old-resp .card p span:nth-child(2) {
        display: block;
    }

    /* NEW (marquee) — two tracks on one line, no overlap, smaller cards */
    .new-resp {
        display: flex;
        /* keep both .cards on the same row */
        gap: .75rem;
        /* small gap between the two tracks */
        overflow: hidden;
    }

    .new-resp .cards {
        margin-top: 0.75rem;
        display: flex;
        flex-wrap: nowrap;
        gap: .75rem;
        flex: 0 0 auto;
        /* prevent stretching */
        width: max-content;
        /* size to contents for smooth scroll */
        animation-duration: 22s;
        /* a bit faster on phones */
    }

    .new-resp .card {
        flex: 0 0 180px;
        /* smaller card width for mobile */
        padding: 1rem;
        border: 0;
        box-shadow: none;
    }

    .new-resp .card p {
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 1rem;
        line-height: 1.35;

    }

    .new-resp .card p span:nth-child(2) {
        display: block;
    }

    /* Footer line under carousel */

    .carousel-footer {
        /* font-size: 1.1rem; */
        margin-top: 1rem;
    }

    .carousel-footer p {
        font-size: 1.1rem;
    }

    /* Motion accessibility */
    @media (prefers-reduced-motion: reduce) {
        .new-resp .cards {
            animation: none !important;
            transform: none !important;
        }
    }


    /* Section shell */
    .need-new-approach-container {
        width: 96%;
        margin: 2rem auto;
        padding: 2rem 1rem;
        min-height: auto;
        /* let content define height on phones */
    }

    /* Title */
    .need-new-title {
        margin: 0 0 1rem;
        font-size: 1.5rem;
        /* from 2rem desktop */
        text-align: center;
    }

    /* 2-col → 1-col; place left content only */
    .need-new-middle {
        grid-template-columns: 1fr;
        row-gap: .75rem;
        column-gap: 0;
        align-items: start;
    }

    /* Hide the right column (image) on mobile */
    .need-new-right {
        display: none !important;
    }

    /* Cards grid on mobile — compact two-up */
    .need-new-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .need-new-card {
        padding: .75rem .5rem;
    }

    /* Stat square — smaller on phones */
    .need-new-card .stat-box {
        width: clamp(4.75rem, 30vw, 6rem);
        height: clamp(4.75rem, 30vw, 6rem);
        border-radius: 14px;
        font-size: clamp(1.5rem, 7vw, 2rem);
        /* number inside the square */
    }

    /* Caption under stat */
    .need-new-card .lead-copy {
        max-width: 20ch;
        margin: .5rem 0 0;
        font-size: 1rem;
        /* from var(--big-stat-p) desktop */
        line-height: 1.3;
        text-align: center;
    }

    /* Footer spacing/size */
    .need-new-footer {
        margin-top: 1rem;
        width: 100%;
    }

    .need-new-footer p {
        font-size: 1.2rem;
        /* from 2.0rem desktop */
        margin: 0;
        text-align: center;
    }

    .need-new-footer .need-new-f3 {
        margin-top: .75rem;
        /* tighter */
    }


    /* Section shell: let content size itself; add safe side padding */
    .reintro-container {
        min-height: auto;
        /* desktop uses 100vh; phones can scroll */
        padding: 2rem 1rem;
        gap: 1.25rem;
        overflow: visible;

        grid-template-areas: "retitle" "reimage" "rbody";

        min-height: 100vh;
        min-height: 100svh;
        /* wins on modern mobile for URL-bar-safe height */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        --img-top: 48%;
        /* was 30% on desktop; lower = further down */
        --img-width: 120vw;
        /* a bit larger than viewport for drama */
    }

    .reality-right {
        display: contents;
    }

    .reality-right>h2 {
        grid-area: rtitle;
    }

    .reality-right>h3 {
        grid-area: rlead;
    }

    /* Title sizing/spacing */
    .reintro-title {
        max-width: 40ch;
        padding: 0;
        margin: 0 auto;
        margin-bottom: 0.75rem;
    }

    .reintro-title h1 {
        font-size: clamp(2rem, 12vw, 2.6rem);
        line-height: 1.2;
        margin-bottom: .5rem;
    }

    .reintro-title h2 {
        font-size: 1.05rem;
        line-height: 1.4;
        display: inline;
        margin: 0'

    }

    /* Reintro image container (put image back in flow + center it) */
    .reintro-container .reintro-image {
        position: static;
        left: auto;
        /* reset */
        top: auto;
        /* reset */
        transform: none;
        /* reset */
        pointer-events: auto;
        /* or remove this line entirely */
        z-index: auto;
        /* reset */

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

        width: 100%;
        max-width: 540px;
        /* optional cap; delete if you want full width */
        margin: 1rem auto 0;
    }

    /* The <img> itself */
    .reintro-container .reintro-image img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }



    /* section shell */
    .how-it-works-container {
        min-height: auto;
        /* let content define height on phones */
        padding: 2rem 1rem;
        gap: 1.25rem;
    }

    /* title */
    .how-it-works-title h2 {
        font-size: clamp(1.6rem, 13vw, 4rem);
        line-height: 1.25;
        margin: 0;
    }

    /* cards stack */
    .how-cards {
        flex-direction: column;
        /* stack */
        align-items: center;
        /* center each card */
        justify-content: flex-start;
        max-width: 36rem;
        /* keeps line length comfy */
        overflow: visible;
        /* no clipping on phones */

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        justify-items: stretch;
        align-items: stretch;
        max-width: 34rem;
    }

    /* each card */
    .how-card {
        flex: 0 1 auto;
        max-width: 28rem;
        min-height: unset;
        /* remove tall desktop floor */
        padding: 1rem;
        gap: .75rem;
    }

    .how-card h3 {
        font-size: 1.5rem;
        margin: .25rem 0;
    }

    .how-card p {
        font-size: 0.8rem;
        line-height: 1.5;
        margin: .25rem 0;
    }

    /* video */
    .how-card .loop-vid {
        width: min(100%, 360px);
        /* cap for small phones */
        aspect-ratio: var(--how-vid-ratio, 16/9) / var(--how-vid-ratio-den, 1);
        margin: 0 auto .5rem;
    }

    .how-card .loop-vid__media {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* no crop */
        display: block;
    }

    .calendly-middle {
        gap: 1.25rem;
    }

    .calendly-inline-widget {
        height: 720px;
    }

    .calendly-container {
        padding: 1.25rem;
        width: 85%;
        border-radius: 14px;
    }

    .calendly-title h1 {
        font-size: clamp(1.7rem, 7vw, 2.1rem);
        margin-bottom: 1.25rem;
    }

    .calendly-middle {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        /* tighter */
        max-width: 38rem;
        /* keeps lines comfy */
    }

    .calendly-left {
        align-items: center;
    }

    .calendly-left h4 {
        font-size: 1.25rem;
    }

    .calendly-left ul li {
        font-size: 1rem;
    }

    .design-partner-application-boxes {
        max-width: 28rem;
        width: 100%;
        /* margin-top:0; */
        /* padding: 0; */
        gap: 0.25rem;
    }

    .calendly-right h3 {
        font-size: 1.05rem;
        line-height: 1.4;
        margin: 1rem 0.5rem;
    }

    .calendly-widget {
        margin-top: 0;
        /* kill the negative offset */
    }

    /* Calendly recommends a fixed height; keep it generous but not huge */
    .calendly-inline-widget {
        height: 620px;
    }
}

/* ----------------------------------------------------------------------------------------------------------------------------------  Phones & down:    ≤767px   @media (max-width:  767px) { ... } */


/* Tablet: 768–1024px */
/* Tablet portrait: smooth scaling across all tablet sizes */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    /* #region --------------------------------------------- INTRO*/
    .intro-container {
        /* background-color: pink; */
        --left-nudge-y: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* Let content determine height naturally */
        min-height: auto;
        padding-block-start: clamp(2rem, 3vh, 3.5rem);
        padding-block-end: clamp(1.5rem, 2.5vh, 2.5rem);
    }

    .intro-container .intro-right,
    .intro-container .intro-list {
        display: none;
    }

    .intro-right-other-screens,
    .intro-list-other-screens,
    .right-card-other {
        display: block;
    }


    /* 1) Make the row a 1-column grid with explicit areas */
    .intro-container .intro-middle {
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "body"
            "image"
            "list"
            "actions";
        height: auto;
        min-height: auto;
        padding-block-start: clamp(1.5rem, 2vh + 0.5rem, 2.5rem);
        padding-block-end: clamp(2rem, 3vh + 0.5rem, 3.5rem);
        align-content: center;
        justify-items: center;
        row-gap: clamp(0.75rem, 1.5vh, 1.25rem);
        padding-inline: 1.5rem;
    }

    /* 2) Flatten wrappers so their kids can be placed on the grid */
    .intro-left {
        display: contents;
    }

    .intro-body {
        display: contents;
    }

    /* 3) Map elements to areas */
    .intro-title {
        grid-area: title;
        /* padding-bottom: 0%; */
        align-self: baseline;
    }

    /* your body text wrapper is .intro-text (inside .intro-body) */
    .intro-text {
        grid-area: body;
        max-inline-size: 65ch;
    }

    /* tablet image block */
    .intro-right-other-screens {
        grid-area: image;
        width: 100%;
        max-width: 700px;
        display: flex;
        justify-content: center;
        margin-bottom: 3rem;
        padding-block: 1rem;
    }

    /* the list we want after the image */
    .intro-list-other-screens {
        grid-area: list;
        max-inline-size: 60ch;
    }

    /* buttons last */
    .intro-buttons {
        grid-area: actions;
    }

    /* Image constraints - MUCH larger, break out of container like desktop */
    .intro-right-other-screens .right-card {
        width: 100%;
        max-width: 650px;
        margin-inline: 0;
        overflow: visible;
        position: relative;
        border-radius: var(--card-radius, 14px);
        background: #fff;
        /* Moderate scale to prevent overflow */
        transform: scale(1.08);
        box-shadow:
            0 0 0 var(--card-border, 2px) var(--title-color, #2B136C),
            0 6px 24px rgba(43, 19, 108, 0.22),
            0 0 36px rgba(43, 19, 108, 0.28);
    }

    .intro-right-other-screens .right-card::after {
        content: "";
        position: absolute;
        inset: -10px;
        /* extends past the card for a halo */
        border-radius: inherit;
        pointer-events: none;
        z-index: -1;
        /* sits behind the card */

        /* Purple bloom with a soft vignette */
        background:
            radial-gradient(120% 120% at 80% 10%,
                rgba(43, 19, 108, 0.35),
                rgba(43, 19, 108, 0) 60%),
            radial-gradient(80% 80% at 20% 90%,
                rgba(176, 140, 255, 0.35),
                rgba(176, 140, 255, 0) 60%);
        filter: blur(16px);
    }

    .intro-right-other-screens .right-card img {
        width: 100%;
        /* height: 100%; */
        object-fit: contain;
        /* or 'cover' for edge-to-edge */
        display: block;
        padding: 10px;
    }

    /* List → Buttons */
    .intro-list-other-screens .fancy-list {
        margin-block: 0 !important;
        /* kill default ul margins */
        padding-left: 1.2em;
        /* keep bullets indented (adjust as needed) */
    }

    .intro-container .intro-middle .intro-title {
        margin-block-end: 0%;
    }

    .intro-container .intro-middle .intro-title h1 {
        font-size: clamp(3.4rem, 7.25vw, 5rem) !important;
        line-height: 1.05;
    }

    .intro-container .intro-text p {
        font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    }

    .intro-list-other-screens li {
        font-size: clamp(1rem, 2vw, 1.2rem);
    }

    .intro-buttons {
        margin-block-start: 0 !important;
    }

    /* #endregion */

    /* #region --------------------------------------------- REALITY */
    .reality-container {
        padding: 1.5rem 1.5rem;
        gap: 1rem;
    }

    /* If you have a grid wrapper (mirror of intro) */
    .reality-middle {
        display: grid;
        grid-template-columns: 1fr;
        /* stack columns */
        grid-template-areas: "rlead" "rtitle" "limage" "rbody";
        row-gap: 1.25rem;
        column-gap: 0;
        height: auto;
        /* avoid forcing tall rows on phones */
    }

    /* Title tweaks */
    .reality-title {
        text-align: center;
        margin-bottom: .75rem;
    }

    .reality-title h2,
    .reality-title h3,
    .reality-title .title-display {
        font-size: clamp(1.6rem, 6.5vw, 2.2rem);
        line-height: 1.2;
    }

    /* Columns → remove desktop padding/nudges */
    .reality-left,
    .reality-right {
        padding: 0;
        min-width: 0;
    }

    /* Images/figures on the left: fill width, keep ratio */
    .reality-left img,
    .reality-left picture,
    .reality-left figure img {
        display: block;
        width: 60%;
        height: auto;
        max-width: 100%;
        border-radius: 12px;
        /* keep if you use rounded cards */
    }

    .reality-left {
        width: 100%;
        background: none;
        padding: 0%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30vh;
    }

    /* Body copy scale (if used here) */
    .reality-left .lead-copy,
    .reality-right .lead-copy {
        font-size: 1.05rem;
        line-height: 1.5;
        margin: 0 0 1rem;
    }

    .reality-right {
        display: contents;
    }

    .reality-right>h2 {
        grid-area: rtitle;
    }

    .reality-right>h3 {
        grid-area: rlead;
    }

    /* Fancy list on the right: center the block, keep icon+text hugging */
    .reality-right .fancy-list {
        /* max-width: 34ch; */
      
        margin: .5rem auto .5rem;
       
        padding-left: 0;
        text-align: left;
       
    }

    .reality-right .fancy-list li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--intro-bullet-gap);
        line-height: var(--intro-li-line);
    }

    .reality-right .lead-wrap p:first-child {
        /* background-color: pink; */
        font-size: 1rem;
        font-weight: 600;
        font-style: italic;
    }

    .reality-right .lead-wrap p:last-child {
        margin-top: 0;
        /* background-color: yellow; */
        font-size: 1.1rem;
        font-weight: 580;
    }

    /* #endregion */

    /* #region --------------------------------------------- CAROUSEL */
    .carousel-container {
        padding: 1.5rem 1.5rem;
    }

    .card {
        min-width:150px;
        max-width: 200px;
    }

    .old-resp .card p span:nth-child(2) {
        display: block;
    }

    .new-resp .card p span:nth-child(2) {
        display: block;
    }


    /* #endregion */

    /* #region --------------------------------------------- NEW APPROACH */
    .need-new-container {
        padding: 1.5rem 1.5rem;
    }

    .need-new-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Increase stat box size on tablets */
    .need-new-card .stat-box {
        width: clamp(6rem, 18vw, 9rem);
        height: clamp(6rem, 18vw, 9rem);
        font-size: clamp(2rem, 5vw, 3rem);
    }

    /* Hide vector image on smaller tablets, show on larger */
    @media (max-width: 899px) {
        .need-new-right {
            display: none;
        }
    }

    @media (min-width: 900px) {
        .need-new-right {
            display: block;
        }
    }
    /* #endregion */

    /* #region --------------------------------------------- REINTRO */
    .reintro-container {
        padding: 1.5rem 1.5rem !important;
        height: 68vh !important;
        min-height: 68vh !important;
        margin-block: 2rem !important;
        --img-top: 32%;
    }
    /* #endregion */

    /* #region --------------------------------------------- HOW IT WORKS */
    .how-it-works-container {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-inline: clamp(1.5rem, 4vw, 3rem);
        min-height: auto;
        gap: 2rem;
    }

    .how-it-works-title h2 {
        font-size: clamp(2rem, 5vw, 3.5rem);
        margin-bottom: 1.5rem;
    }

    /* Responsive grid: 2 columns on most tablets */
    .how-cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(280px, 1fr));
        gap: 1.5rem;
        max-width: 100%;
        width: 100%;
    }

    /* Single column if viewport too narrow */
    @media (max-width: 640px) {
        .how-cards {
            grid-template-columns: 1fr;
        }
    }

    .how-card {
        width: 100%;
        max-width: none;
        padding: 1.5rem;
        min-height: 280px;
        flex: initial !important;
    }

    .how-card h3 {
        font-size: clamp(1.3rem, 3vw, 1.8rem);
    }

    .how-card p {
        font-size: clamp(0.95rem, 2vw, 1.1rem);
    }

    .how-card .loop-vid {
        width: 100%;
        max-width: 400px;
        margin: 0 auto 1rem;
        aspect-ratio: 16 / 9;
    }

    .how-card .loop-vid .loop-vid__media {
        background-color: #f2f2fa;
    }
    /* #endregion */
   
    /* #region --------------------------------------------- CALENDLY */
    #calendly-container {
        padding: 1.5rem 1.5rem;
    }

    .calendly-title h1 {
        line-height: 1.25;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    .calendly-left h4, .calendly-right h3 {
        letter-spacing: 0.05rem;
        font-size: 1.5rem;
        line-height: 1.25;
        font-weight: 500;
    }

    .calendly-left ul li {
        font-size: 1.2rem;
    }

    .design-partner-application-boxes {
        gap: 0.5rem;
    }

    .calendly-right {
        display: flex;
        flex-direction: column;
        margin-top: 2.5rem;
    }

    .calendly-right h3 {
        margin-bottom: 0.5rem;
    }

    /* Fix contact form styling to match other offwhite sections */
    .design-partner-application-boxes {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0;
    }

    .calendly-left {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Fix for grey placeholder: adjust Calendly widget on tablet portrait */
    .calendly-middle {
        flex-direction: column !important;
        align-items: center;
        gap: 1rem;
    }

    .calendly-widget {
        width: 100%;
        max-width: 700px;
        margin-top: 0.5rem;
    }

    /* Calendly fixes: no scroll, no border */
    .calendly-inline-widget {
        overflow: hidden !important;
    }

    /* Set iframe height directly - 600px for most tablets */
    .calendly-inline-widget iframe {
        height: 600px !important;
        border: none !important;
        border-radius: 0 !important;
    }

    /* Specific height for ~820px width (iPad Air) */
    @media (min-width: 800px) and (max-width: 850px) {
        .calendly-inline-widget iframe {
            height: 735px !important;
        }

        /* Center the iframe content vertically */
        .calendly-inline-widget {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
    }

    /* Match website background color (light lavender/off-white) */
    #calendly-container,
    .calendly-container,
    .calendly-widget,
    .calendly-inline-widget {
        background: #f2f2fa !important;
        border: none !important;
        box-shadow: none !important;
    }

    .calendly-container {
        padding-bottom: 2rem !important;
    }

    /* Fix centering and width at 1024px */
    @media (min-width: 1024px) {
        .calendly-middle {
            flex-direction: row !important;
            justify-content: center;
            align-items: flex-start;
            max-width: 100%;
        }

        .calendly-widget {
            max-width: 100%;
            flex: 1;
        }

        .calendly-inline-widget {
            width: 100% !important;
        }
    }
    /* #endregion */

    /* #region --------------------------------------------- FOOTER */
    footer {
        padding: 1.5rem 1rem 1rem !important;
        gap: 0.75rem;
    }

    #calendly-container {
        margin-bottom: 0 !important;
    }

    body {
        padding-bottom: 0 !important;
    }
    /* #endregion */
}

/* Tablet landscape: try 3 columns for How It Works if space allows */
@media (min-width: 900px) and (max-width: 1023px) and (orientation: landscape) {
    .how-cards {
        grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    }
}



/*
  For tablet, I would like to forgo the bleed while in protrait mode, and instead just have the image appear in the column and have the overflow disapper. 
  */