/* =========================================================
   MEDIA.CSS — Kelvin Thomas NYC
   Desktop-first. Breakpoints (max-width): 1450 / 1200 / 992 / 768 / 576 / 375
   Loaded AFTER styles.css, so rules here win on equal specificity.

   TIP: --nav-offset is the space the hero reserves for the absolutely-
   positioned navbar. Once the nav stacks (<=992px) its height depends on
   your logo's aspect ratio, so tweak --nav-offset per breakpoint if the
   hero's eyebrow text sits too close to / too far from the nav.
========================================================= */

body {
    overflow-x: clip; /* safety net: no sideways scroll from rings/blobs */
}


/* =========================================================
   1450px — Large laptops / small desktops
========================================================= */
@media (max-width: 1450px) {

    /* Hero */
    #heroSection {
        padding: 100px 6% 120px;
    }

    .hero-container {
        gap: 50px;
    }

    .hero-heading {
        font-size: 100px;
    }

    .hero-visual-container {
        max-width: 480px;
    }

    .hero-photo-container {
        width: 520px;
        max-width: 100%;
    }

    .hero-ring {
        width: 400px;
        height: 400px;
    }

    .hero-ring-two {
        width: 350px;
        height: 430px;
    }

    /* Sections */
    .kelvin-moments-section,
    .about-section,
    .equipment-section {
        padding-left: 6%;
        padding-right: 6%;
    }

    .contact-container {
        gap: 56px;
    }

    .footer-container {
        gap: 40px;
    }
}


/* =========================================================
   1200px — Small laptops / landscape tablets
========================================================= */
@media (max-width: 1200px) {

    /* Nav: tighten so all 5 links + logo fit on one row */
    .left-side-container {
        width: 22%;
    }

    .logo img {
        width: 240px;
    }

    .nav-links {
        gap: 16px;
    }

    .nav-links a {
        padding: 10px 18px;
        font-size: 0.9rem;
    }

    .nav-links li:hover > a {
        letter-spacing: 2px;
    }

    /* Hero */
    #heroSection {
        min-height: 640px;
        padding: 100px 5% 110px;
    }

    .hero-container {
        gap: 40px;
    }

    .hero-text-container {
        max-width: 560px;
    }

    .hero-heading {
        font-size: 88px;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-visual-container {
        min-width: 0;
        max-width: 440px;
        min-height: 440px;
    }

    .hero-photo-container {
        width: 420px;
    }

    .hero-ring {
        width: 360px;
        height: 360px;
    }

    .hero-ring-two {
        width: 320px;
        height: 400px;
    }

    .equipment-card {
        flex: 1 1 25%;
    }

    /* Moments */
    .kelvin-moments-section {
        margin-top: -6rem;
    }

    /* About */
    .about-container {
        gap: 48px;
    }

    .about-image-container {
        flex-basis: 380px;
    }

    /* Equipment */
    .equipment-container {
        gap: 48px;
    }

    /* Contact */
    .contact-section {
        padding: 96px 28px 90px;
    }

    .contact-container {
        gap: 44px;
    }

    .contact-form {
        padding: 32px;
    }

    /* Footer */
    .footer-section {
        padding: 0 28px;
    }

    .footer-container {
        gap: 32px;
    }
}


/* =========================================================
   992px — Tablets (landscape) · NAV STACKS + HERO STACKS
========================================================= */
@media (max-width: 992px) {

    :root {
        --nav-offset: 200px;
    }

    /* ---------- NAVBAR: logo on top, buttons below ---------- */

    #navbarSection.scrolledtoo {
        margin: 0 1rem;
    }

    .navbar-container {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.6rem;
    }

    #navbarCont {
        padding: 0.75rem 0 0.5rem;
    }

    /* Scrolled state: softer, tidier corners (per request) */
    #navbarCont.scrolled {
        border-radius: 0 0 12px 12px;
        padding: 0.5rem 0 0.75rem;
    }

    .left-side-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .left-side-container .logo {
        width: auto;
        justify-content: center;
    }

    .logo img {
        width: 210px;
    }

    .right-side-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
        margin: 0;
        padding: 0 12px;
    }

    .nav-links a {
        padding: 10px 18px;
        font-size: 0.88rem;
    }

    .nav-links li:hover > a {
        letter-spacing: 1.5px;
    }

    /* ---------- HERO: stacked & centered ---------- */

    #heroSection {
        min-height: 0;
        padding: var(--nav-offset) 6% 110px;
        border-radius: 0 0 8% 8%;
    }

    .hero-container {
        flex-direction: column-reverse;
        justify-content: center;
        gap: 56px;
        margin-top: 0;
    }

    .hero-text-container {
        flex: none;
        align-items: center;
        width: 100%;
        max-width: 720px;
        text-align: center;
    }

    .hero-eyebrow {
        justify-content: center;
    }

    .hero-heading {
        align-items: center;
        font-size: 92px;
    }

    .hero-description {
        max-width: 600px;
    }

    .hero-voice-reels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
        margin: 0 auto 1.25rem;
        text-align: left;
    }

    .hero-socials {
        justify-content: center;
        padding: 1.5rem 0;
    }

    .hero-ctas {
        justify-content: center;
    }

    .hero-visual-container {
        flex: none;
        width: 100%;
        max-width: 440px;
        min-width: 0;
        min-height: 0;
        padding: 30px 0;
    }

    .hero-photo-container {
        width: min(100%, 400px);
    }

    .hero-ring {
        width: 92%;
        height: 108%;
    }

    .hero-ring-two {
        width: 80%;
        height: 112%;
    }

    .hero-scroll-hint {
        display: none; /* would collide with the stacked content */
    }

    /* ---------- MOMENTS ---------- */

    .kelvin-moments-section {
        margin-top: -5rem;
        padding-top: 9rem;
    }

    .moments-title {
        font-size: clamp(2.6rem, 8vw, 4.5rem);
    }

    /* ---------- CHARACTERS ---------- */

    #charsSection {
        padding: 76px 28px;
    }

    /* touch devices have no hover — show the play button by default */
    @media (hover: none) {
        .char-overlay {
            opacity: 1;
        }

        .char-overlay::after {
            background-color: transparent;
        }

        .char-overlay svg {
            width: 36px;
            height: 36px;
            padding: 9px;
        }
    }

    /* ---------- ABOUT ---------- */

    .about-section {
        padding: 84px 28px;
    }

    .about-container {
        gap: 40px;
    }

    .about-image-container {
        flex-basis: 340px;
    }

    /* ---------- EQUIPMENT: stack intro above cards ---------- */

    .equipment-section {
        padding: 84px 28px;
    }

    .equipment-container {
        flex-direction: column;
        align-items: stretch;
        gap: 38px;
    }

    .equipment-content {
        flex: none;
        width: 100%;
        max-width: 680px;
    }

    .equipment-container-cards {
        flex: none;
        width: 100%;
        justify-content: center;
    }

    .equipment-card {
        flex: 1 1 calc(33% - 16px);
        max-width: none;
    }

    /* ---------- CONTACT: stack (flex:none stops flex-basis acting as height) ---------- */

    .contact-section {
        padding: 84px 28px;
    }

    .contact-container {
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
    }

    .contact-content {
        flex: none;
        width: 100%;
        max-width: 640px;
        padding-top: 0;
    }

    .contact-text {
        max-width: 560px;
    }

    .contact-form {
        flex: none;
        width: 100%;
        max-width: 640px;
    }

    /* ---------- FOOTER: brand on top, 3 columns below ---------- */

    .footer-container {
        flex-wrap: wrap;
        gap: 2.5rem;
        padding-bottom: 52px;
        flex-direction: row;
        text-align: center;
        display: flex;
    }

    .footer-brand {
        flex: 1 1 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
    }

    .footer-navigation,
    .footer-legal,
    .footer-contact {
        flex: 1;
    }
}


/* =========================================================
   768px — Tablets (portrait)
========================================================= */
@media (max-width: 768px) {

    :root {
        --nav-offset: 190px;
    }

    .logo img {
        width: 190px;
    }

    .nav-links {
        gap: 10px;
    }

    .nav-links a {
        padding: 9px 14px;
        font-size: 0.84rem;
        letter-spacing: 0.5px;
    }

    /* Hero */
    #heroSection {
        padding: var(--nav-offset) 6% 100px;
    }

    .hero-container {
        gap: 48px;
    }

    .hero-heading {
        font-size: 76px;
        margin-bottom: 20px;
    }

    .hero-description {
        font-size: 16px;
        line-height: 1.7;
    }

    .hero-visual-container {
        max-width: 380px;
    }

    .hero-photo-container {
        width: min(100%, 340px);
        box-shadow:
            10px 10px 0 rgba(56, 182, 160, 0.15),
            0 0 35px rgba(70, 202, 220, 0.12);
    }

    .hero-star-two {
        font-size: 26px;
    }

    /* Moments */
    .kelvin-moments-section {
        padding: 8.5rem 5% 5rem;
    }

    .moments-heading {
        margin-bottom: 2.5rem;
    }

    .moment-label {
        font-size: 0.6rem;
        letter-spacing: 0.5px;
    }

    .kelvin-moment-caption {
        padding: 0.75rem;
    }

    /* Characters */
    #charsSection {
        padding: 68px 24px;
    }

    .chars-heading {
        margin-bottom: 30px;
    }

    .chars-container {
        gap: 18px;
    }

    /* About: stack */
    .about-section {
        padding: 72px 24px;
    }

    .about-container {
        flex-direction: column;
        align-items: stretch;
        gap: 36px;
    }

    .about-image-container {
        flex: none;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .about-content {
        flex: none;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    /* Equipment */
    .equipment-section {
        padding: 72px 24px;
    }

    /* Contact */
    .contact-section {
        padding: 72px 24px;
    }

    .contact-form {
        padding: 30px 26px;
        width: auto;
    }

    .contact-details {
        width: 100%; 
        flex-direction: row;;
    }

    .contact-detail {
        width: 100%; 
    }

    /* Footer */
    .footer-section {
        padding: 0 24px;
    }

    .footer-top-accent {
        margin-bottom: 48px;
    }

    .footer-navigation,
    .footer-legal,
    .footer-contact {
        flex: 1 1 calc(50% - 16px);
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .footer-links {
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .footer-title {
        display: flex; 
        align-items: center; 
        justify-content: center;
    }

    .footer-title::after {
        left: auto; 
    }

    .footer-brand {}


}


/* =========================================================
   576px — Large phones · single-column layouts
========================================================= */
@media (max-width: 576px) {

    :root {
        --nav-offset: 180px;
    }

    #navbarSection.scrolledtoo {
        margin: 0 0.5rem;
    }

    .logo img {
        width: 170px;
    }

    .nav-links {
        gap: 8px;
        padding: 0 10px;
    }

    .nav-links a {
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    .nav-download {
        gap: 0.3rem;
    }

    .nav-download svg {
        width: 14px;
        height: 14px;
    }

    .nav-links li:hover > a {
        letter-spacing: 1px;
    }

    /* Hero */
    #heroSection {
        padding: var(--nav-offset) 5% 90px;
        border-bottom-width: 4px;
        border-radius: 0 0 28px 28px;
    }

    .hero-container {
        gap: 40px;
    }

    .hero-eyebrow {
        gap: 8px;
        margin-bottom: 18px;
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .eyebrow-line {
        width: 18px;
    }

    .hero-heading {
        font-size: 62px;
        line-height: 0.88;
    }

    .hero-description {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .hero-voice-reels {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .hero-socials {
        padding: 1.25rem 0;
    }

    .hero-ctas {
        width: 100%;
        gap: 12px;
    }

    .hero-btn {
        flex: 1 1 200px;
        padding: 13px 18px;
    }

    .hero-visual-container {
        max-width: 320px;
        padding: 24px 0;
    }

    .hero-photo-container {
        width: min(100%, 290px);
        box-shadow:
            8px 8px 0 rgba(56, 182, 160, 0.15),
            0 0 28px rgba(70, 202, 220, 0.12);
    }

    .hero-blob-teal {
        width: 320px;
        height: 320px;
    }

    .hero-blob-cyan {
        width: 240px;
        height: 240px;
    }

    /* Moments */
    .kelvin-moments-section {
        margin-top: -4rem;
        padding: 8rem 5% 4rem;
    }

    .kelvin-moments {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-inline: auto;
        gap: 1.5rem;
    }

    .kelvin-moment:nth-child(2),
    .kelvin-moment:nth-child(3) {
        margin-top: 0;
    }

    .moment-label {
        font-size: 0.68rem;
    }

    .moments-title {
        font-size: clamp(2.4rem, 11vw, 3.4rem);
    }

    /* Characters */
    #charsSection {
        padding: 60px 18px;
    }

    .chars-title {
        font-size: clamp(2.3rem, 11vw, 3.2rem);
    }

    .chars-container {
        gap: 14px;
    }

    .char-card {
        flex-basis: 130px;
        max-width: 130px;
    }

    /* About */
    .about-section {
        padding: 64px 20px;
    }

    .about-container {
        gap: 30px;
    }

    .about-image-container {
        max-width: 340px;
        box-shadow: 8px 8px 0 rgba(56, 182, 160, 0.12);
    }

    .about-eyebrow,
    .equipment-eyebrow,
    .contact-topper,
    .chars-eyebrow,
    .moments-eyebrow {
        font-size: 0.64rem;
        gap: 10px;
    }

    .about-title,
    .equipment-title {
        font-size: clamp(2.4rem, 11vw, 3.2rem);
    }

    .about-bio p,
    .equipment-description {
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .about-button {
        width: 100%;
        padding: 1rem 0; 
    }

    }

    /* Equipment: 2-up grid */
    .equipment-section {
        padding: 64px 20px;
    }

    .equipment-container-cards {
        gap: 12px;
    }

    .equipment-card {
        flex: 1 1 calc(50% - 8px);
        max-width: calc(50% - 8px);
        min-height: 150px;
        padding: 18px;
    }

    .equipment-icon {
        margin-bottom: 16px;
    }

    /* Contact */
    .contact-section {
        padding: 64px 20px;
    }

    .contact-container {
        gap: 40px;
    }

    .contact-title {
        font-size: clamp(2.6rem, 12vw, 3.6rem);
    }

    .contact-text {
        margin-top: 22px;
        font-size: 0.94rem;
        line-height: 1.8;
    }

    .contact-side-note {
        margin-top: 34px;
    }

    .contact-form {
        gap: 18px;
        padding: 26px 20px;
    }

    .contact-submit {
        font-size: 1.1rem;
    }

    /* Footer: one column, left-aligned */
    .footer-section {
        padding: 0 20px;
    }

    .footer-top-accent {
        margin-bottom: 40px;
    }

    .footer-container {
        gap: 38px;
        padding-bottom: 44px;
    }

    .footer-brand,
    .footer-navigation,
    .footer-legal,
    .footer-contact {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 22px;
    }

    .footer-bottom-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .footer-bottom-divider {
        display: none;
    }



/* =========================================================
   375px — Small phones (iPhone SE / mini)
========================================================= */
@media (max-width: 375px) {

    :root {
        --nav-offset: 200px; /* nav links wrap to 2 rows here */
    }

    #navbarCont {
        padding: 0.6rem 0 0.4rem;
    }

    .logo img {
        width: 150px;
    }

    .nav-links {
        gap: 6px;
        padding: 0 8px;
    }

    .nav-links a {
        padding: 7px 10px;
        font-size: 0.72rem;
        border-radius: 8px;
    }

    /* Hero */
    #heroSection {
        padding: var(--nav-offset) 18px 76px;
    }

    .hero-container {
        gap: 34px;
    }

    .hero-eyebrow {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .hero-heading {
        font-size: 48px;
        letter-spacing: -1px;
        margin-bottom: 18px;
    }

    .hero-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .voice-reel {
        padding: 11px;
    }

    .voice-reel-title {
        font-size: 1.1rem;
    }

    .voice-reel-play {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .hero-socials {
        gap: 0.6rem;
    }

    .h-social-link a {
        width: 36px;
        height: 36px;
    }

    .hero-btn {
        flex: 1 1 100%;
        min-height: 48px;
        font-size: 11px;
    }

    .hero-visual-container {
        max-width: 280px;
    }

    .hero-photo-container {
        width: min(100%, 250px);
    }

    /* Moments */
    .kelvin-moments-section {
        margin-top: -3.5rem;
        padding: 7.5rem 18px 3.5rem;
    }

    .moment-number {
        width: 32px;
        height: 32px;
        font-size: 0.68rem;
    }


    /* Characters: clean 2-column grid */
    #charsSection {
        padding: 52px 14px;
    }

    .chars-container {
        gap: 12px;
    }

    .char-card {
        flex: 0 1 calc(50% - 6px);
        max-width: calc(50% - 6px);
    }

    .char-name {
        font-size: 1rem;
        padding: 9px 6px 11px;
    }

    /* About / Equipment */
    .about-section,
    .equipment-section {
        padding: 54px 18px;
    }

    .about-subheading {
        font-size: 1.5rem;
    }

    .equipment-card {
        padding: 14px;
        min-height: 135px;
    }

    .equipment-name {
        font-size: 1.05rem;
    }

    .equipment-category {
        font-size: 0.54rem;
    }

    /* Contact */
    .contact-section {
        padding: 54px 16px;
    }

    .contact-form {
        padding: 22px 16px;
        gap: 16px;
    }

    .form-title {
        font-size: 1.7rem;
    }

    .contact-input {
        padding: 12px;
        font-size: 16px; /* prevents iOS zoom-on-focus */
    }

    .contact-submit {
        min-height: 52px;
        padding: 13px 15px;
        font-size: 1rem;
    }

    .contact-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    /* Footer */
    .footer-section {
        padding: 0 16px;
    }

    .footer-title {
        font-size: 1.3rem;
    }

    .footer-links {
        gap: 10px 18px;
    }
}


/* =========================================================
   Accessibility — respect reduced motion on small screens too
========================================================= */
@media (prefers-reduced-motion: reduce) {
    .hero-photo-container,
    .hero-scroll-line {
        animation: none;
    }
}


/* ================================
   REVIEWS RESPONSIVENESS
================================ */

@media (max-width: 900px) {

    .reviews-container {
        gap: 40px;
    }

    .reviews-heading {
        flex-basis: 280px;
    }

    .reviews-heading h2 {
        font-size: clamp(3.2rem, 6vw, 4.5rem);
    }

    .review-feature {
        flex-basis: 420px;
        padding: 26px;
    }

}


@media (max-width: 760px) {

    .reviews-section {
        padding: 80px 24px;
    }

    .reviews-container {
        flex-direction: column;
        align-items: center;
        gap: 38px;
    }

    .reviews-heading {
        flex: 1 1 auto;
        max-width: 600px;
    }

    .reviews-heading h2 {
        font-size: clamp(3.5rem, 10vw, 4.8rem);
    }

    .reviews-heading > p:not(.reviews-eyebrow) {
        max-width: 520px;
        font-size: 0.92rem;
    }

    .review-feature {
        flex: 1 1 auto;
        width: 100%;
        max-width: 650px;
        padding: 26px;
    }

}


@media (max-width: 480px) {

    .reviews-section {
        padding: 65px 18px;
    }

    .reviews-container {
        gap: 30px;
    }

    .reviews-eyebrow {
        gap: 9px;
        font-size: 0.61rem;
    }

    .reviews-heading h2 {
        font-size: clamp(3rem, 12vw, 3.8rem);
    }

    .reviews-heading > p:not(.reviews-eyebrow) {
        margin-top: 20px;
        font-size: 0.88rem;
    }

    .reviews-heading-note {
        margin-top: 22px;
        font-size: 0.56rem;
    }

    .review-feature {
        padding: 22px 18px;
    }

    .review-feature::before {
        left: 18px;
    }

    .review-topline {
        flex-wrap: wrap;
        gap: 9px;
        padding-bottom: 17px;
    }

    .review-source-mark {
        width: 30px;
        height: 30px;
    }

    .review-source-label {
        font-size: 0.59rem;
    }

    .review-index {
        margin-left: auto;
        font-size: 0.59rem;
    }

    .review-slide {
        padding: 25px 0 22px;
    }

    .review-quote {
        margin: 8px 0 24px;
        font-size: 0.91rem;
        line-height: 1.8;
    }

    .review-author-info strong {
        font-size: 1rem;
    }

    .review-controls {
        gap: 12px;
    }

    .review-prev,
    .review-next {
        width: 36px;
        height: 36px;
    }

}