/* ==========================================================================
   GOLDPOOL COFFEE - TABLET STYLESHEET (769px to 1024px)
   Strictly scoped to tablets & iPads (Mobile remains 100% isolated)
   ========================================================================== */

@media screen and (min-width: 769px) and (max-width: 1024px) {
    html, body {
        overflow-x: hidden ;
        max-width: 100% ;
        width: 100% ;
    }

    header {
        width: 100% ;
        max-width: 100% ;
        position: fixed ;
        top: 0 ;
        left: 0 ;
        right: 0 ;
        z-index: 1000 ;
        background: rgba(8, 8, 10, 0.95) ;
        backdrop-filter: blur(20px) ;
        -webkit-backdrop-filter: blur(20px) ;
        border-bottom: 1px solid rgba(212, 175, 55, 0.15) ;
        box-sizing: border-box ;
    }

    .navbar {
        display: flex ;
        justify-content: space-between ;
        align-items: center ;
        padding: 1.15rem 1.75rem ;
        position: relative ;
        z-index: 1000 ;
        width: 100% ;
        max-width: 100% ;
        box-sizing: border-box ;
        margin: 0 ;
    }

    .navbar .logo {
        padding-left: 0 ;
        padding-right: 0 ;
        margin: 0 ;
        display: flex ;
        align-items: center ;
        gap: 12px ;
        text-decoration: none ;
    }

    /* Sleek Gold Hamburger Menu Toggle on Tablet */
    .mobile-menu-toggle {
        display: flex ;
        flex-direction: column ;
        justify-content: center ;
        align-items: center ;
        width: 44px ;
        height: 44px ;
        background: transparent ;
        border: none ;
        cursor: pointer ;
        z-index: 10001 ;
        position: relative ;
        padding: 0 ;
        margin: 0 ;
        overflow: visible ;
        -webkit-tap-highlight-color: transparent ;
    }

    .mobile-menu-toggle span {
        display: block ;
        width: 26px ;
        height: 2px ;
        background: var(--gold, #D4AF37) ;
        margin: 3.5px 0 ;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) ;
        border-radius: 2px ;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(4.5px) rotate(45deg) ;
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        transform: translateY(-4.5px) rotate(-45deg) ;
    }

    /* Tablet Navigation Drawer - Fullscreen Luxury Obsidian Overlay */
    .nav-links {
        display: flex ;
        flex-direction: column ;
        position: fixed ;
        top: 0 ;
        left: 0 ;
        right: 0 ;
        bottom: 0 ;
        width: 100vw ;
        max-width: 100vw ;
        height: 100vh ;
        height: 100dvh ;
        background: #0A0A0C ;
        backdrop-filter: none ;
        -webkit-backdrop-filter: none ;
        border: none ;
        padding: 1.75rem 2.5rem 2.75rem 2.5rem ;
        box-shadow: none ;
        transform: translateX(100%) ;
        visibility: hidden ;
        pointer-events: none ;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease ;
        z-index: 10000 ;
        overflow-y: auto ;
        box-sizing: border-box ;
        justify-content: space-between ;
        align-items: stretch ;
    }

    .nav-links.active {
        transform: translateX(0) ;
        visibility: visible ;
        pointer-events: auto ;
        box-shadow: none ;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s ;
    }

    .drawer-header-brand {
        display: flex ;
        align-items: center ;
        justify-content: flex-start ;
        min-height: 44px ;
        margin-bottom: 1.5rem ;
        padding-bottom: 1rem ;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2) ;
        padding-right: 56px ;
        box-sizing: border-box ;
    }

    .drawer-logo-row {
        display: flex ;
        align-items: center ;
        gap: 12px ;
        margin: 0 ;
    }

    .drawer-emblem-img {
        width: 32px ;
        height: 32px ;
        max-width: 32px ;
        max-height: 32px ;
        object-fit: contain ;
        flex-shrink: 0 ;
        filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.4)) ;
    }

    .drawer-logo-text {
        display: flex ;
        flex-direction: column ;
        justify-content: center ;
    }

    .drawer-brand {
        font-family: 'Montserrat', sans-serif ;
        font-size: 1.25rem ;
        font-weight: 300 ;
        letter-spacing: 5px ;
        color: var(--gold, #D4AF37) ;
        line-height: 1.1 ;
        text-transform: uppercase ;
    }

    .drawer-brand span {
        color: var(--gold, #D4AF37) ;
        font-weight: 300 ;
    }

    .drawer-sub {
        font-family: 'Montserrat', sans-serif ;
        font-size: 0.78rem ;
        font-weight: 300 ;
        letter-spacing: 7px ;
        color: var(--gold, #D4AF37) ;
        opacity: 0.9 ;
        margin-top: 2px ;
        line-height: 1 ;
        text-transform: uppercase ;
    }

    .drawer-tagline {
        display: none ;
    }

    .menu-main {
        display: flex ;
        flex-direction: column ;
        gap: 0 ;
        align-items: stretch ;
        text-align: left ;
        width: 100% ;
        flex: 1 ;
        margin: 0 ;
    }

    .menu-main a {
        font-family: 'Montserrat', sans-serif ;
        font-size: 0.98rem ;
        font-weight: 700 ;
        letter-spacing: 2.2px ;
        text-transform: uppercase ;
        color: #E0E0E0 ;
        text-decoration: none ;
        padding: 1.25rem 0.6rem ;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) ;
        display: flex ;
        align-items: center ;
        justify-content: space-between ;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) ;
    }

    .menu-main a:hover,
    .menu-main a.active {
        color: var(--gold, #D4AF37) ;
        padding-left: 1rem ;
        background: rgba(212, 175, 55, 0.08) ;
        border-bottom-color: rgba(212, 175, 55, 0.3) ;
    }

    .menu-num {
        display: inline-block ;
        font-size: 0.76rem ;
        font-weight: 800 ;
        color: var(--gold, #D4AF37) ;
        margin-right: 14px ;
    }

    .menu-label {
        flex-grow: 1 ;
    }

    .menu-arrow {
        display: inline-block ;
        font-size: 0.76rem ;
        color: rgba(212, 175, 55, 0.6) ;
    }

    .menu-footer {
        display: flex ;
        flex-direction: column ;
        gap: 12px ;
        margin-top: 1.5rem ;
        padding-top: 1.25rem ;
        border-top: 1px solid rgba(212, 175, 55, 0.15) ;
    }

    .menu-footer .btn-outline {
        display: inline-flex ;
        align-items: center ;
        justify-content: center ;
        font-family: 'Montserrat', sans-serif ;
        font-size: 0.88rem ;
        font-weight: 800 ;
        letter-spacing: 2px ;
        text-transform: uppercase ;
        text-align: center ;
        padding: 16px 22px ;
        border-radius: 12px ;
        color: #0A0A0C ;
        background: var(--gold, #D4AF37) ;
        border: none ;
        text-decoration: none ;
    }

    /* Tablet Hero Stage - Centered Luxury Vertical Architecture */
    .home-hero-section,
    .signature-hero-section,
    .reserve-hero-section,
    .creators-hero-section,
    .how-hero-section,
    .founding-hero-section,
    .portal-hero-section,
    .hero-stage-section {
        position: relative ;
        padding: 90px 1.5rem 3.5rem 1.5rem ;
        min-height: auto ;
        background: #08080A ;
        overflow: hidden ;
        display: flex ;
        flex-direction: column ;
        align-items: center ;
        text-align: center ;
        width: 100% ;
        max-width: 100% ;
        box-sizing: border-box ;
    }

    .home-hero-container,
    .signature-hero-container,
    .reserve-hero-container,
    .creators-hero-container,
    .how-hero-container,
    .founding-hero-container,
    .portal-hero-container,
    .hero-stage-container {
        display: flex ;
        flex-direction: column ;
        align-items: center ;
        justify-content: flex-start ;
        width: 100% ;
        max-width: 880px ;
        margin: 0 auto ;
        padding: 0 ;
        position: relative ;
        z-index: 2 ;
    }

    /* Wide Cinematic Studio Hero Image on Tablet */
    .hero-bg-faded-artwork,
    .home-hero-section .hero-bg-faded-artwork,
    .signature-hero-section .hero-bg-faded-artwork,
    .reserve-hero-section .hero-bg-faded-artwork,
    .creators-hero-section .hero-bg-faded-artwork,
    .how-hero-section .hero-bg-faded-artwork,
    .founding-hero-section .hero-bg-faded-artwork,
    .portal-hero-section .hero-bg-faded-artwork {
        order: 1 ;
        position: relative ;
        top: auto ;
        right: auto ;
        bottom: auto ;
        left: auto ;
        width: 96% ;
        max-width: 880px ;
        height: clamp(320px, 42vh, 460px) !important;
        margin: 0.5rem auto 1.5rem auto ;
        border-radius: 16px ;
        border: 1px solid rgba(212, 175, 55, 0.25) ;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7) ;
        overflow: hidden ;
        pointer-events: auto ;
        z-index: 2 ;
        display: flex ;
        align-items: center ;
        justify-content: center ;
    }

    .hero-carousel-track,
    .hero-slide {
        position: relative ;
        width: 100% ;
        height: 100% ;
    }

    .hero-slide img,
    .ken-burns-img {
        width: 100% ;
        height: 100% ;
        max-height: none ;
        object-fit: cover ;
        object-position: center center ;
        mask-image: none ;
        -webkit-mask-image: none ;
        border-radius: 16px ;
        animation: none ;
        transform: none ;
    }

    /* Complete 12oz Gold Pouch Display */
    .reserve-hero-section .hero-bg-faded-artwork,
    .home-hero-section .hero-slide:nth-child(2) {
        display: flex ;
        align-items: center ;
        justify-content: center ;
    }

    .reserve-hero-section .hero-bg-faded-artwork img,
    .reserve-hero-section .ken-burns-img,
    .home-hero-section .hero-slide:nth-child(2) img {
        width: auto ;
        max-width: 100% ;
        height: 92% ;
        object-fit: contain ;
        object-position: center center ;
        margin: auto ;
        mask-image: none ;
        -webkit-mask-image: none ;
    }

    /* Centered Hero Content Lockup - Symmetrical 640px Grid Axis */
    .hero-content-inner {
        order: 2 ;
        max-width: 640px ;
        width: 100% ;
        text-align: center ;
        margin: 0 auto ;
        position: relative ;
        z-index: 3 ;
        box-sizing: border-box ;
    }

    .hero-creator-badge {
        display: inline-flex ;
        align-items: center ;
        justify-content: center ;
        gap: 8px ;
        padding: 6.5px 20px ;
        font-size: 0.78rem ;
        font-weight: 800 ;
        letter-spacing: 2.2px ;
        text-transform: uppercase ;
        color: var(--gold, #D4AF37) ;
        background: rgba(212, 175, 55, 0.1) ;
        border: 1px solid rgba(212, 175, 55, 0.4) ;
        border-radius: 50px ;
        margin: 0 auto 1.15rem auto ;
    }

    .hero-creator-title {
        font-family: 'Outfit', sans-serif ;
        font-size: clamp(2rem, 3.8vw, 2.55rem) ;
        font-weight: 900 ;
        line-height: 1.15 ;
        letter-spacing: -0.5px ;
        color: #FFFFFF ;
        margin: 0 auto 1.15rem auto ;
        text-align: center ;
        max-width: 620px ;
    }

    .hero-gold-accent {
        display: block ;
        color: var(--gold, #D4AF37) ;
        font-weight: 800 ;
        font-size: 0.9em ;
        margin-top: 0 ;
    }

    .hero-creator-desc {
        font-size: 0.96rem ;
        line-height: 1.58 ;
        color: #C5C5C8 ;
        margin: 0 auto 1.45rem auto ;
        max-width: 600px ;
        text-align: center ;
    }

    .hero-creator-desc .highlight-gold {
        color: var(--gold, #D4AF37) ;
        font-weight: 700 ;
    }

    /* Benefit Cards - Centered & Symmetrical (620px) */
    .hero-metrics-grid {
        display: grid ;
        grid-template-columns: repeat(3, 1fr) ;
        gap: 12px ;
        width: 100% ;
        max-width: 620px ;
        margin: 0 auto 1.35rem auto ;
        box-sizing: border-box ;
    }

    .reserve-hero-section .hero-metrics-grid,
    .how-hero-section .hero-metrics-grid,
    .founding-hero-section .hero-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        max-width: 540px !important;
        margin: 0 auto 1.35rem auto !important;
    }

    .hero-metric-card {
        padding: 0 ;
        border-radius: 12px ;
        background: #0E0E12 ;
        border: 1.5px solid rgba(212, 175, 55, 0.45) ;
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.65) ;
        text-align: center ;
        display: flex ;
        flex-direction: column ;
        justify-content: flex-start ;
        overflow: hidden ;
        min-height: 92px ;
        box-sizing: border-box ;
    }

    .reserve-hero-section .hero-metric-card,
    .how-hero-section .hero-metric-card,
    .founding-hero-section .hero-metric-card {
        padding: 1rem 1.2rem !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-metric-card .metric-top-band {
        background: var(--gold, #D4AF37) ;
        color: #0A0A0C ;
        font-family: 'Montserrat', sans-serif ;
        font-size: 0.68rem ;
        font-weight: 900 ;
        letter-spacing: 0.6px ;
        text-transform: uppercase ;
        padding: 8px 6px ;
        min-height: 38px ;
        display: flex ;
        align-items: center ;
        justify-content: center ;
        line-height: 1.15 ;
        box-sizing: border-box ;
        hyphens: none ;
        word-break: keep-all ;
    }

    .hero-metric-card .metric-body {
        padding: 10px 8px ;
        font-family: 'Montserrat', sans-serif ;
        font-size: 0.78rem ;
        font-weight: 700 ;
        color: #F2F2F5 ;
        line-height: 1.32 ;
        flex: 1 ;
        display: flex ;
        align-items: center ;
        justify-content: center ;
        hyphens: none ;
        word-break: keep-all ;
        box-sizing: border-box ;
    }

    /* Side-by-Side Dual CTA Buttons - Exact Same 620px Width Axis */
    .explore-section-wrapper {
        display: none ;
    }

    .hero-actions,
    .mobile-only-hero-cta {
        display: flex ;
        flex-direction: row ;
        flex-wrap: nowrap ;
        gap: 12px ;
        width: 100% ;
        max-width: 620px ;
        margin: 0 auto ;
        justify-content: space-between ;
        align-items: center ;
        box-sizing: border-box ;
    }

    .hero-primary-btn {
        flex: 1 1 0 ;
        min-width: 0 ;
        width: 100% ;
        height: 52px ;
        display: inline-flex ;
        align-items: center ;
        justify-content: center ;
        gap: 8px ;
        padding: 0 16px ;
        font-family: 'Montserrat', sans-serif ;
        font-size: 0.82rem ;
        font-weight: 800 ;
        letter-spacing: 1.2px ;
        text-transform: uppercase ;
        background: var(--gold, #D4AF37) ;
        color: #0A0A0C ;
        border-radius: 12px ;
        border: none ;
        text-decoration: none ;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) ;
        white-space: nowrap ;
        box-sizing: border-box ;
    }

    .hero-secondary-btn {
        flex: 1 1 0 ;
        min-width: 0 ;
        width: 100% ;
        height: 52px ;
        display: inline-flex ;
        align-items: center ;
        justify-content: center ;
        gap: 8px ;
        padding: 0 16px ;
        font-family: 'Montserrat', sans-serif ;
        font-size: 0.82rem ;
        font-weight: 800 ;
        letter-spacing: 1.2px ;
        text-transform: uppercase ;
        background: #121216 ;
        color: var(--gold, #D4AF37) ;
        border-radius: 12px ;
        border: 1.5px solid rgba(212, 175, 55, 0.45) ;
        text-decoration: none ;
        white-space: nowrap ;
        box-sizing: border-box ;
    }

    .hero-scroll-indicator {
        order: 99 !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        margin: 1.5rem auto 0.5rem auto !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 5 !important;
    }

    .hero-scroll-indicator:hover {
        transform: none !important;
    }

    /* 2-Column Responsive Tablet Grids */
    .offerings-duo-grid,
    .reserve-showcase-grid,
    .postcard-showcase-grid,
    .creators-grid,
    .how-it-works-grid {
        grid-template-columns: repeat(2, 1fr) ;
        gap: 1.5rem ;
    }

    /* Dual Coffee Pathway - 1-Column Vertical Stack Layout on Tablet */
    .dual-cards-grid {
        display: flex ;
        flex-direction: column ;
        gap: 2.5rem ;
        width: 100% ;
        max-width: 660px ;
        margin: 0 auto ;
        box-sizing: border-box ;
    }

    .offering-card {
        width: 100% ;
        max-width: 660px ;
        padding: 2.25rem 2rem ;
        box-sizing: border-box ;
    }

    .offering-card > a:first-child {
        width: 100% ;
        height: auto ;
        aspect-ratio: 16 / 9 ;
        min-height: 240px ;
        max-height: 300px ;
        margin-bottom: 1.35rem ;
        display: block ;
        position: relative ;
        overflow: hidden ;
        border-radius: 14px ;
    }

    .offering-card > a:first-child img {
        width: 100% ;
        height: 100% ;
        min-height: 100% ;
        object-fit: cover ;
        object-position: center ;
        display: block ;
    }

    .offering-card .btn-primary,
    .offering-card .btn-outline,
    .offering-card a.btn-primary,
    .offering-card a.btn-outline {
        aspect-ratio: auto ;
        min-height: 48px ;
        max-height: none ;
        margin-bottom: 0 ;
        display: inline-flex ;
        align-items: center ;
        justify-content: center ;
        width: 100% ;
        box-sizing: border-box ;
        white-space: nowrap ;
        flex-wrap: nowrap ;
        font-size: clamp(0.82rem, 2.5vw, 0.95rem) ;
        padding: 0.85rem 1rem ;
        gap: 8px ;
    }

    /* Creator Preview Card - Full-Width Elegant Stack Layout on Tablet */
    .creator-preview-card {
        display: flex ;
        flex-direction: column ;
        gap: 0 ;
        padding: 0 ;
        overflow: hidden ;
        width: 88% ;
        max-width: 880px ;
        margin: 0 auto ;
        box-sizing: border-box ;
    }

    .creator-preview-card .creator-card-media {
        width: 100% ;
        height: clamp(320px, 42vw, 420px) ;
        min-height: 320px ;
    }

    .creator-preview-card .creator-card-media img {
        width: 100% ;
        height: 100% ;
        object-fit: cover ;
        object-position: center center ;
        display: block ;
    }

    .creator-preview-card .creator-card-content {
        width: 100% ;
        text-align: left ;
        padding: 2.5rem 2.25rem ;
        box-sizing: border-box ;
    }

    /* Unified Tabbed Slideshow - Tablet View */
    .reserve-tabs-nav,
    .how-tabs-nav,
    .superiority-tabs-nav {
        gap: 8px ;
        margin-bottom: 1.5rem ;
        padding: 0 1rem ;
    }

    .reserve-tab-btn,
    .how-tab-btn,
    .superiority-tab-btn {
        padding: 0.65rem 1.1rem ;
        font-size: 0.82rem ;
    }

    .reserve-slide,
    .how-slide,
    .superiority-slide {
        grid-template-columns: 1fr ;
        min-height: auto ;
    }

    .reserve-slide-media,
    .how-slide-media,
    .superiority-slide-media {
        min-height: 340px ;
        height: 340px ;
    }

    .reserve-slide-content,
    .how-slide-content,
    .superiority-slide-content {
        padding: 2.25rem 2rem ;
    }

    /* Membership Benefits Grid - Tablet 2x2 Clean Layout */
    .membership-benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
        margin-bottom: 2.5rem !important;
    }

    .membership-benefits-grid .benefit-card {
        padding: 1.75rem 1.5rem !important;
        border-radius: 18px !important;
    }

    /* Centered Process Step Cards on Tablet */
    .step-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 2.5rem 2rem 2.25rem 2rem !important;
        gap: 16px !important;
    }

    .step-num {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        font-size: 1.6rem !important;
        font-weight: 900 !important;
        margin: 0 auto 0.5rem auto !important;
        border: 2px solid var(--gold) !important;
        box-shadow: 0 0 22px rgba(212, 175, 55, 0.35) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .step-content {
        width: 100% !important;
        text-align: center !important;
    }

    .step-content h4 {
        text-align: center !important;
        font-size: 1.35rem !important;
        margin-bottom: 10px !important;
    }

    .step-content p {
        text-align: center !important;
        font-size: 0.96rem !important;
    }
}