/* ======================
   TABLET
====================== */
@media(max-width:991px) {
    .navbar-collapse {
        background: rgba(0, 0, 0, .9);
        padding: 25px;
        border-radius: 12px;
        margin-top: 15px;
    }

    .navbar-nav {
        gap: 10px;
        text-align: center;
        margin-bottom: 20px;
    }

    .contact-btn {
        width: 100%;
    }

    .coffee-image-wrapper {
        margin: auto;
    }

    .coffee-content {
        text-align: center;
        margin: auto;
    }

    .signature-card {
        right: 10px;
        bottom: -15px;
    }

    .summer-favorites {
        padding: 90px 0;
    }

    .favorite-image img {
        height: 380px;
    }

    .provisions-section {
        padding: 80px 0;
    }

    .intro-content {
        text-align: center;
    }

    .intro-content p {
        margin: auto auto 30px;
    }

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

    .feature-content {
        left: 25px;
        right: 25px;
    }

    .hero-video-section {
        min-height: 600px;
    }

    .culture-card {
        height: 450px;
    }

    .terroir-title {
        font-size: 48px;
    }

    .origin-title {
        font-size: 42px;
    }

    .origin-image img {
        height: 450px;
    }

    .terroir-description,
    .origin-text {
        font-size: 18px;
    }

    .roasting-main-img {
        height: 400px;
    }

    .floating-image {
        width: 180px;
        left: -20px;
        bottom: -30px;
    }

    .roasting-small-img {
        height: 220px;
    }

    .brew-overlay h3 {
        font-size: 1.7rem;
    }

    .coffee-science-section {
        min-height: 400px;
        padding: 90px 0;
    }

    .science-bg-text {
        font-size: 28vw;
    }

    .science-title {
        font-size: 3rem;
    }

    .portal-title {
        font-size: 3rem;
    }

    .research-image-wrapper {
        margin-top: 20px;
    }

    .hydration-card {
        padding: 50px 40px;
    }

    .stats-wrapper {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, .4);
        padding-left: 0;
        padding-top: 40px;
    }

    .section-title {
        font-size: 42px;
    }

    .contact-heading {
        margin-top: 60px;
    }

    .stewardship-section {
        padding: 80px 0 90px;
    }

    .stewardship-header {
        margin-bottom: 40px;
    }

    .stewardship-stat {
        margin: 30px 0 0;
    }

    .partnership-section {
        padding: 80px 0;
    }

    .partnership-title {
        margin-top: 15px;
    }

    .ps-lg-5 {
        padding-left: 0 !important;
    }

    .technical-hearth-section {
        padding: 75px 0;
    }

    .hearth-content {
        padding-left: 0;
    }

    .hearth-content h2 {
        font-size: 48px;
    }

    .site-footer {
        padding-top: 70px;
    }

    .footer-intro {
        margin-bottom: 55px;
    }

    .footer-intro h2 {
        font-size: 40px;
    }

    .story-features {
        grid-template-columns: 1fr;
    }

    .journeySlider img {
        height: 400px;
    }

    .section-title {
        font-size: 38px;
    }

    .event-list {
        grid-template-columns: 1fr;
    }

    .coming-soon-section {
        padding: 70px 0 !important;
    }

    .coming-soon-image {
        min-height: 400px;
    }

    .coming-soon-content {
        padding: 45px 35px;
    }

    .about-hero {
        min-height: 60vh;
    }

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

    .beginning-section {
        padding: 70px 0 30px;
    }

    .beginning-content {
        padding-left: 0;
        padding-top: 20px;
    }

    .beginning-main-image img {
        height: 400px;
    }

    .beginning-small-images img {
        height: 192px;
    }

    .bread-section {
        padding: 70px 0 80px;
    }

    .bread-image {
        width: 90%;
        height: 380px;
    }

    .bread-content {
        width: 70%;
        margin-top: -50px;
        padding: 35px 30px;
    }

    .people-section {
        padding: 80px 0;
    }

    .people-image-large,
    .people-image-small {
        height: 400px;
    }

    .bcorp-hero {
        min-height: 650px;
    }

    .stories-grid-drip {
        grid-template-columns: repeat(2, 1fr);
    }

    .origin-title {
        font-size: 24px;
    }
}

/* ======================
   MOBILE
====================== */


@media (max-width:767px) {

    .coffee-preserve {
        padding: 20px 0 !important;
    }

    /* .signature-card {
        width: 120px;
        height: 120px;
    } */

    .signature-card h3 {
        font-size: 32px;
    }

    .coffee-btn {
        width: 100%;
        justify-content: center;
    }

    .summer-favorites {
        padding: 70px 0;
    }

    .favorite-image img {
        height: 320px;
    }

    .favorite-content {
        text-align: center;
    }

    .workshop-card {
        flex-direction: column;
        text-align: center;
    }

    .top-image img {
        height: 300px;
    }

    .feature-card {
        min-height: 400px;
    }

    .feature-content h3 {
        font-size: 28px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .workshop-card img {
        transform: rotate(360deg);
    }

    .btn-primary-custom,
    .btn-outline-custom {
        width: 100%;
        text-align: center;
    }

    .hero-video-section {
        min-height: 500px;
    }

    .certificate-content {
        padding: 220px 0 50px;
    }

    .latest-blog-section {
        padding: 50px 0;
    }

    .roasting-main-img {
        height: 350px;
    }

    .floating-image {
        display: none !important;
    }

    .brew-title {
        font-size: 2.4rem;
    }

    .brew-overlay h3 {
        font-size: 1.5rem;
    }

    .section-desc {
        font-size: 14px;
    }

    .hero-content img {
        height: 140px;
    }

    .coffee-science-section {
        min-height: auto;
        padding: 80px 20px;
    }

    .science-bg-text {
        font-size: 35vw;
    }

    .science-title {
        font-size: 2.2rem;
    }

    .science-description {
        font-size: .95rem;
    }

    .research-btn {
        padding: 14px 30px;
        font-size: 12px;
        letter-spacing: 1px;
    }

    .portal-title {
        font-size: 2.2rem;
    }

    .portal-description {
        margin-bottom: 2rem;
    }

    .custom-accordion .accordion-button {
        font-size: .8rem;
        letter-spacing: 1px;
    }

    .hydration-card {
        padding: 40px 25px;
    }

    .hydration-title {
        font-size: 2rem;
    }

    .stat-item h3 {
        font-size: 32px;
    }

    .faq-icon {
        width: 40px;
        height: 40px;
    }

    .custom-faq .accordion-button {
        padding: 24px 20px;
        gap: 16px;
    }

    .custom-faq .accordion-body {
        padding: 0 20px 24px 80px;
    }

    .about-content {
        max-width: 100%;
        bottom: -120px;
    }

    .about-description {
        max-width: 100%;
        font-size: 18px;
    }

    .blogmain-section {
        min-height: 80vh;
        padding: 80px 0;
    }

    .blogmain-title {
        font-size: 2.2rem;
    }

    .blogmain-content {
        padding: 50px 30px;
    }

    .blogmain-established {
        font-size: 14px !important;
    }

    .partnership-image {
        max-height: 100%;
    }

    .technical-hearth-section {
        padding: 60px 0;
    }

    .hearth-image-wrap {
        max-width: 550px;
        margin: 0 auto;
    }

    .hearth-content {
        max-width: 600px;
        margin: 0 auto;
    }

    .hearth-content h2 {
        font-size: 40px;
        letter-spacing: -.5px;
    }

    .hearth-content p {
        font-size: 13px;
    }

    .stewardship-section {
        padding: 65px 0 75px;
    }

    .stewardship-stat {
        max-width: 150px;
        margin-top: 35px;
    }

    .stewardship-cards {
        row-gap: 40px !important;
    }

    .stewardship-image {
        aspect-ratio: 1 / .8;
    }

    .partnership-title {
        font-size: 2.3rem;
        line-height: 1.15;
    }

    .partnership-text {
        font-size: .95rem;
    }

    .feature-item {
        gap: 15px;
    }

    .theme-btn {
        width: 100%;
        justify-content: center;

    }

    .blog-author {
        gap: 12px;
    }

    .blog-author img {
        width: 45px;
        height: 45px;
    }

    .blog-author h6 {
        font-size: .8rem;
    }

    .blog-author span {
        font-size: .75rem;
    }

    .blog-details-section {
        padding: 70px 0 20px;
    }

    .blog-heading {
        font-size: 2rem;
    }

    .drink-content {
        padding: 24px 16px;
    }

    .closePopup {
        right: -8px;
        top: -8px;
    }

    .site-footer {
        padding: 60px 0 25px;
    }

    .footer-intro h2 {
        font-size: 34px;
    }

    .footer-intro p {
        font-size: 15px;
    }

    .footer-main {
        padding: 40px 0;
    }

    .footer-newsletter {
        padding: 40px 0;
    }

    .footer-newsletter h3 {
        font-size: 28px;
    }

    .newsletter-input {
        flex-direction: column;
        align-items: stretch;
        border-radius: 20px;
        padding: 10px;
    }

    .newsletter-input button {
        justify-content: center;
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 2px;
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: 15px;
    }

    .origin-journey {
        padding: 70px 0;
    }

    .origin-journey-heading {
        margin-bottom: 40px;
    }

    .origin-image {
        height: 300px;
    }

    .people-section {
        padding: 60px 0;
    }

    .people-image-large,
    .people-image-small {
        height: 300px;
    }

    .people-content {
        margin-top: 30px;
    }

    .bcorp-hero {
        min-height: 550px;
    }

    .supporting-description {
        font-size: 24px;
    }

    .newsletter-input .wpcf7-not-valid-tip {
        position: absolute;
        top: 124px;
    }

    .stories-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .story-content {
        padding-left: 24px;
    }

    .daily-cta-section {
        padding: 90px 20px;
    }

    .daily-cta-content h2 {
        font-size: 48px;
        letter-spacing: -1.5px;
    }

    .daily-cta-copy {
        margin-top: 35px;
    }

    .daily-cta-copy p {
        font-size: 1rem;
    }

    .grain-table-header {
        margin-bottom: 50px;
    }

    .grain-table-header h2 {
        font-size: 43px;
    }

    .grain-process {
        grid-template-columns: 1fr;
    }

    .grain-step {
        min-height: auto;
        padding: 28px 24px;
    }

    .grain-step-content h3 {
        font-size: 22px;
    }

    .grain-table-bottom {
        margin-top: 50px;
    }

    .grain-table-bottom span {
        display: none;
    }

    .grain-table-bottom p {
        width: 100%;
        font-size: 18px;
    }

    .science-slow-section {
        padding: 75px 0;
    }

    .science-grid {
        grid-template-columns: 1fr;
    }

    .science-item,
    .science-item:first-child {
        padding: 30px 24px;
    }

    .science-item+.science-item {
        border-left: 0;
        border-top: 1px solid rgba(36, 29, 23, .25);
    }

    .science-statement {
        margin-top: 55px;
    }

    .science-statement span {
        display: none;
    }

    .science-statement p {
        font-size: 18px;
    }

    .beignet-feature {
        min-height: 620px;
    }

    .beignet-overlay {
        background: rgba(15, 11, 8, .65);
    }

    .beignet-content {
        padding: 80px 20px;
    }

    .beignet-content h2 {
        font-size: clamp(36px, 11vw, 56px);
    }

    .beignet-content p {
        font-size: 15px;
    }

    .daily-drip-closing {
        padding: 80px 0 80px;
    }

    .closing-bg-text {
        font-size: 100px;
        transform: translate(-50%, -50%) rotate(-90deg);
        opacity: 0.7;
    }

    .closing-cta-wrap {
        margin-top: 32px;
    }

    .closing-image-wrap {
        margin-top: 55px;
    }

    .closing-image {
        aspect-ratio: 4 / 3;
    }

    .stories-grid-drip {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .section-subtitle {
        font-size: 0.90rem;
    }

    .country-badge {
        font-size: 14px;
    }

    .ritual-txtsz p {
        font-size: 18px;
    }
}

@media(max-width:575px) {

    .hero-section {
        min-height: 700px;
    }

    .hero-description {
        font-size: 14px;
        padding: 0 15px;
    }

    .culture-card {
        height: 400px;
    }

    .card-overlay {
        padding: 25px;
    }

    .terroir-title {
        font-size: 34px;
    }

    .origin-title {
        font-size: 32px;
    }

    .origin-image img {
        height: 350px;
    }

    .brew-title {
        font-size: 2rem;
    }

    .brew-card {
        aspect-ratio: 16 / 10;
    }

    .hero-content img {
        height: 100px;
    }

    .science-bg-text {
        font-size: 42vw;
    }

    .science-title {
        font-size: 1.8rem;
    }

    .contact-section {
        padding: 80px 0;
    }

    .section-title {
        font-size: 34px;
    }

    .contact-heading {
        font-size: 30px;
    }

    .theme-btn {
        width: 100%;
    }

    .map-box iframe {
        height: 220px;
    }

    .technical-hearth-section {
        padding: 50px 0;
    }

    .hearth-content h2 {
        font-size: 34px;
        line-height: 1.15;
    }

    .hearth-eyebrow {
        font-size: 9px;
    }

    .hearth-content p {
        font-size: 12px;
        line-height: 1.8;
    }

    .hearth-btn {
        font-size: 9px;
    }

    .stewardship-section {
        padding: 55px 0 65px;
    }

    .stewardship-stat {
        margin-top: 30px;
    }

    .stat-label {
        font-size: 10px;
    }

    .footer-logo img {
        width: 80px;
    }

    .footer-intro h2 {
        font-size: 30px;
    }

    .coming-soon-section {
        padding: 50px 15px !important;
    }

    .coming-soon-card {
        border-radius: 20px;
    }

    .coming-soon-image {
        min-height: 300px;
    }

    .coming-badge {
        top: 18px;
        left: 18px;
        font-size: 10px;
        padding: 8px 15px;
    }

    .coming-soon-content {
        padding: 35px 25px;
    }

    .about-hero-content {
        padding: 80px 4px 16px;
    }

    .beginning-section {
        padding: 60px 0 20px;
    }

    .beginning-images {
        gap: 10px;
    }

    .beginning-small-images {
        gap: 10px;
    }

    .beginning-main-image img {
        height: 300px;
    }

    .beginning-small-images img {
        height: 145px;
    }

    .about-hero-content {
        padding: 80px 4px 0;
    }

    .bread-section {
        padding: 60px 0 70px;
    }

    .bread-image {
        width: 100%;
        height: 300px;
    }

    .bread-content {
        width: 90%;
        margin-top: -35px;
        padding: 24px 16px;
    }

    .closing-image-wrap {
        margin-top: 45px;
    }

    .closing-image {
        aspect-ratio: 1 / 1;
    }
}