/* =========================================================
   COPSE — MASTER STYLESHEET
   Home | Podcast | About | Resources | Contact | Shop
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", Arial, Helvetica, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
a {
    transition: 0.25s ease;
}

button {
    font-family: inherit;
}


/* =========================================================
   SHARED NAVIGATION
========================================================= */

.site-header {
    width: 100%;
    position: relative;
    z-index: 100;
}

.navbar {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    position: relative;
}

.logo {
    font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: bold;
}

.nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
}

.nav-links a {
    font-size: 14px;
    font-weight: 600;
}

.nav-links a:hover {
    opacity: 0.65;
}

.nav-links a.active,
.nav-links a.current-page {
    font-weight: 700;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {
    display: none;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}

.mobile-menu-button:hover {
    opacity: 0.7;
}

.mobile-menu-button:focus {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}


/* =========================================================
   HOME PAGE
   Natural Green / Forest Theme
========================================================= */

.home-page {
    background: #f4f1e9;
    color: #28352b;
    font-family: "DM Sans", Arial, Helvetica, sans-serif;
}


/* ---------------------------------------------------------
   HOME HEADER
--------------------------------------------------------- */

.home-page .site-header {
    background: #263b2c;
    color: #faf8f1;
}

.home-page .logo {
    font-family: "Libre Baskerville", Georgia, serif;
}

.home-page .nav-links a {
    color: #faf8f1;
}

.home-page .nav-links a:hover {
    opacity: 0.7;
}


/* ---------------------------------------------------------
   HOME HERO
--------------------------------------------------------- */

.home-hero {
    min-height: 720px;
    position: relative;
    display: flex;
    align-items: center;

    background-image: url("images/hero-forest.jpg");
    background-size: cover;
    background-position: center;

    color: #ffffff;
}

.home-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20, 36, 25, 0.88),
            rgba(20, 36, 25, 0.35),
            rgba(20, 36, 25, 0.12)
        );
}

.home-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1200px;
    margin: auto;

    padding: 100px 8%;
}

.home-eyebrow {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #d8dfcf;
    margin-bottom: 22px;
}

.home-hero h1 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(55px, 8vw, 96px);
    font-weight: 400;
    line-height: 1.04;
    margin-bottom: 30px;
}

.home-hero-text {
    max-width: 580px;
    color: #e8ece3;
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 35px;
}

.home-hero-button {
    display: inline-block;
    padding: 14px 28px;
    border: 1px solid #f8f7f1;
    border-radius: 30px;
    color: #f8f7f1;
    font-size: 13px;
    font-weight: 700;
}

.home-hero-button:hover {
    background: #f8f7f1;
    color: #263b2c;
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   HOME SECTION LABEL
--------------------------------------------------------- */

.home-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.home-section-label span:first-child {
    width: 35px;
    height: 1px;
    background: #71806f;
    display: block;
}

.home-section-label p,
.home-section-label span:last-child {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 10px;
    font-weight: 700;
    color: #71806f;
}

.home-section-label.light span:first-child {
    background: #bfcbbd;
}

.home-section-label.light p,
.home-section-label.light span:last-child {
    color: #cbd6c9;
}


/* ---------------------------------------------------------
   WHAT IS A COPSE?
--------------------------------------------------------- */

.home-copse-section {
    background: #f4f1e9;
    padding: 120px 8%;
}

.home-copse-content {
    max-width: 850px;
    margin: auto;
}

.home-copse-content h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(44px, 6vw, 70px);
    font-weight: 400;
    line-height: 1.08;
    color: #28352b;
    margin-bottom: 28px;
}

.home-large-text {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 25px !important;
    line-height: 1.6 !important;
    color: #425344 !important;
    margin-bottom: 22px;
}

.home-copse-content p:not(.home-large-text) {
    max-width: 720px;
    color: #626b62;
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 18px;
}

.home-copse-content strong {
    color: #344537;
}


/* ---------------------------------------------------------
   HOME MISSION
--------------------------------------------------------- */

.home-mission-section {
    background: #344d38;
    color: #f6f4ed;
    padding: 120px 8%;
}

.home-mission-content {
    max-width: 900px;
    margin: auto;
}

.home-mission-content h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(45px, 6vw, 72px);
    font-weight: 400;
    line-height: 1.08;
    color: #f6f4ed;
    margin-bottom: 30px;
}

.home-mission-content p:not(.home-section-label) {
    max-width: 720px;
    color: #d8e0d5;
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 18px;
}

.home-light-button {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 27px;
    border: 1px solid #dce5d9;
    border-radius: 30px;
    color: #f6f4ed;
    font-size: 13px;
    font-weight: 700;
}

.home-light-button:hover {
    background: #f6f4ed;
    color: #344d38;
}


/* ---------------------------------------------------------
   HOME PODCAST SECTION
--------------------------------------------------------- */

.home-podcast-section {
    background: #e6edf0;
    padding: 120px 8%;
}

.home-podcast-content {
    max-width: 1150px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 80px;
    align-items: center;
}

.home-podcast-text h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(45px, 6vw, 70px);
    font-weight: 400;
    line-height: 1.08;
    color: #253b45;
    margin-bottom: 25px;
}

.home-podcast-text > p:not(.home-section-label) {
    max-width: 600px;
    color: #5f6970;
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 28px;
}

.home-dark-button {
    display: inline-block;
    padding: 14px 27px;
    background: #263b45;
    color: #f7f8f7;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
}

.home-dark-button:hover {
    background: #172a31;
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   HOME PODCAST CARD
--------------------------------------------------------- */

.home-podcast-card {
    min-height: 450px;
    padding: 50px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background:
        linear-gradient(
            145deg,
            rgba(32, 60, 72, 0.96),
            rgba(54, 88, 100, 0.92)
        );

    color: #f6f7f5;
    box-shadow: 0 20px 45px rgba(35, 55, 62, 0.15);
}

.home-podcast-card p {
    font-size: 10px;
    letter-spacing: 3px;
    font-weight: 700;
    color: #cad8dc;
}

.home-podcast-card h3 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 45px;
    font-weight: 400;
    line-height: 1.2;
}

.home-podcast-card span {
    display: inline-block;
    align-self: flex-start;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 30px;

    padding: 9px 16px;

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}


/* ---------------------------------------------------------
   HOME EXPLORE
--------------------------------------------------------- */

.home-explore-section {
    background: #f4f1e9;
    padding: 120px 8%;
}

.home-explore-heading {
    max-width: 1100px;
    margin: 0 auto 55px;
}

.home-explore-heading h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(42px, 6vw, 68px);
    font-weight: 400;
    line-height: 1.08;
    color: #28352b;
}


/* ---------------------------------------------------------
   HOME EXPLORE CARDS
--------------------------------------------------------- */

.home-explore-grid {
    max-width: 1100px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.home-explore-card {
    min-height: 250px;
    padding: 35px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.home-explore-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(40, 53, 43, 0.10);
}

.home-explore-card p {
    margin: 0 0 15px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.home-explore-card h3 {
    max-width: 400px;

    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.3;
}

.home-explore-card > span {
    align-self: flex-end;
    font-size: 25px;
}

.home-card-about {
    background: #dce7d8;
    color: #304432;
}

.home-card-about p {
    color: #607561;
}

.home-card-resources {
    background: #e8e0d4;
    color: #453d34;
}

.home-card-resources p {
    color: #7b6d5d;
}

.home-card-shop {
    background: #ded3e5;
    color: #46334f;
}

.home-card-shop p {
    color: #79618a;
}

.home-card-contact {
    background: #e7cfc5;
    color: #53382f;
}

.home-card-contact p {
    color: #8b5e50;
}


/* ---------------------------------------------------------
   HOME CLOSING
--------------------------------------------------------- */

.home-closing-section {
    background: #263b2c;
    color: #f7f5ed;
    padding: 125px 8%;
    text-align: center;
}

.home-closing-content {
    max-width: 900px;
    margin: auto;
}

.home-closing-content .home-section-label {
    justify-content: center;
}

.home-closing-content h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(45px, 6vw, 72px);
    font-weight: 400;
    line-height: 1.08;
    margin-bottom: 35px;
}

.home-closing-button {
    display: inline-block;
    padding: 14px 28px;

    background: #f5f2e9;
    color: #263b2c;

    border-radius: 30px;

    font-size: 13px;
    font-weight: 700;
}

.home-closing-button:hover {
    background: #dce4d7;
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   HOME FOOTER
--------------------------------------------------------- */

.home-page .home-footer {
    background: #1e2b21;
    color: #eee;
    text-align: center;
    padding: 60px 8%;
}

.home-page .footer-logo {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 34px;
    color: #faf8f1;
    margin-bottom: 12px;
}

.home-page .home-footer > p {
    color: #bfc8bd;
    font-size: 14px;
}

.home-page .footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin: 30px 0;
}

.home-page .footer-links a {
    color: #cbd2c8;
    font-size: 13px;
}

.home-page .footer-links a:hover {
    color: white;
}

.home-page .copyright {
    margin-top: 25px;
    font-size: 12px !important;
}


/* =========================================================
   PODCAST PAGE
   Deep Blue / Soft White
========================================================= */

.podcast-page {
    background: #f5f6f4;
    color: #142b3d;
}


/* ---------------------------------------------------------
   PODCAST HEADER
--------------------------------------------------------- */

.podcast-page .site-header {
    background: #071c2b;
    color: #f4f7fa;
}

.podcast-page .nav-links a {
    color: #f4f7fa;
}


/* ---------------------------------------------------------
   PODCAST HERO
--------------------------------------------------------- */

.podcast-page .podcast-hero {
    min-height: 650px;

    background:
        linear-gradient(
            90deg,
            rgba(7, 27, 43, 0.78),
            rgba(8, 35, 55, 0.55)
        ),
        url("images/podcast-forest.jpg");

    background-size: cover;
    background-position: center;

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

    text-align: center;

    padding: 100px 20px;

    color: white;
}

.podcast-page .hero-content {
    max-width: 950px;
}

.podcast-page .eyebrow {
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 22px;
    opacity: 0.85;
}

.podcast-page .podcast-hero h1 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(58px, 8vw, 105px);
    line-height: 0.98;
    font-weight: normal;
    letter-spacing: -3px;
    margin-bottom: 30px;
}

.podcast-page .hero-description {
    max-width: 700px;
    margin: 0 auto 38px;
    font-size: 20px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

.podcast-page .hero-button {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.7);
    padding: 14px 30px;
    border-radius: 40px;
    font-weight: 600;
}

.podcast-page .hero-button:hover {
    background: white;
    color: #102f47;
}


/* ---------------------------------------------------------
   WHY A PODCAST?
--------------------------------------------------------- */

.podcast-page .why-section {
    background: #f5f6f4;
    padding: 120px 8%;
}

.podcast-page .section-container {
    max-width: 1100px;
    margin: 0 auto;
}

.podcast-page .section-label {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #3d6681;
    margin-bottom: 20px;
}

.podcast-page .why-section h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(42px, 6vw, 70px);
    line-height: 1.05;
    font-weight: normal;
    color: #15364d;
    margin-bottom: 28px;
}

.podcast-page .why-section p {
    max-width: 820px;
    font-size: 18px;
    color: #53616b;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   EPISODES
--------------------------------------------------------- */

.podcast-page .episodes-section {
    background: #102f47;
    color: white;
    padding: 120px 8%;
}

.podcast-page .episodes-section .section-label {
    color: #a9c4d5;
}

.podcast-page .episodes-section h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(42px, 6vw, 70px);
    line-height: 1.05;
    font-weight: normal;
    margin-bottom: 60px;
}

.podcast-page .episode-card {
    max-width: 1000px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 55px;
    background: rgba(255, 255, 255, 0.05);
}

.podcast-page .episode-number {
    font-size: 14px;
    letter-spacing: 4px;
    color: #a9c4d5;
    margin-bottom: 12px;
}

.podcast-page .episode-card h3 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(36px, 5vw, 55px);
    font-weight: normal;
    margin-bottom: 20px;
}

.podcast-page .episode-card p {
    font-size: 17px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.78);
    max-width: 760px;
}

.podcast-page .coming-soon {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    font-size: 13px;
    letter-spacing: 1px;
}


/* ---------------------------------------------------------
   WHAT TO EXPECT
--------------------------------------------------------- */

.podcast-page .expect-section {
    background: #e9eef1;
    padding: 120px 8%;
}

.podcast-page .expect-section h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(42px, 6vw, 70px);
    line-height: 1.05;
    font-weight: normal;
    color: #15364d;
    max-width: 850px;
    margin-bottom: 65px;
}

.podcast-page .expect-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.podcast-page .expect-card {
    background: #f8f9f8;
    padding: 40px;
    border-top: 4px solid #315b77;
}

.podcast-page .expect-number {
    font-size: 13px;
    letter-spacing: 3px;
    color: #648198;
    margin-bottom: 12px;
}

.podcast-page .expect-card h3 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 30px;
    font-weight: normal;
    color: #15364d;
    margin-bottom: 15px;
}

.podcast-page .expect-card p {
    color: #596873;
    font-size: 16px;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   CLOSING
--------------------------------------------------------- */

.podcast-page .closing-section {
    background: #0b263b;
    color: white;
    text-align: center;
    padding: 130px 20px;
}

.podcast-page .closing-section .section-label {
    color: #a9c4d5;
}

.podcast-page .closing-section h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(45px, 6vw, 75px);
    font-weight: normal;
    line-height: 1.05;
    margin-bottom: 40px;
}

.podcast-page .return-button {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 14px 30px;
    border-radius: 40px;
    font-weight: 600;
}

.podcast-page .return-button:hover {
    background: white;
    color: #0b263b;
}


/* ---------------------------------------------------------
   PODCAST FOOTER
--------------------------------------------------------- */

.podcast-page .site-footer {
    background: #071c2b;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
    padding: 60px 8%;
}

.podcast-page .footer-logo {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 34px;
    color: #f4f7fa;
    margin-bottom: 12px;
}

.podcast-page .site-footer > p:not(.copyright) {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.podcast-page .footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin: 30px 0;
}

.podcast-page .footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.podcast-page .footer-links a:hover {
    color: white;
}

.podcast-page .copyright {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}


/* ---------------------------------------------------------
   PODCAST MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

    .podcast-page .why-section,
    .podcast-page .episodes-section,
    .podcast-page .expect-section {
        padding: 85px 7%;
    }

    .podcast-page .episode-card {
        padding: 35px 25px;
    }

    .podcast-page .expect-grid {
        grid-template-columns: 1fr;
    }

    .podcast-page .closing-section {
        padding: 100px 20px;
    }

    .podcast-page .hero-description {
        font-size: 17px;
    }
}


/* =====================================================
   ABOUT PAGE — DARK CHARCOAL THEME
====================================================== */

.about-page {
    background: #242526;
    color: #eeeeeb;
}


/* -----------------------------------------------------
   NAVIGATION
------------------------------------------------------ */

.about-page .site-header {
    color: #eeeeeb;
}

.about-page .navbar {
    position: relative;
}

.about-page .nav-links a {
    color: #eeeeeb;
}


/* -----------------------------------------------------
   HERO
------------------------------------------------------ */

.about-dark-hero {
    position: relative;

    min-height: 90vh;

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

    padding: 140px 7% 110px;

    background:
        linear-gradient(
            rgba(30, 31, 32, 0.84),
            rgba(30, 31, 32, 0.96)
        ),
        url("images/hero-forest.jpg");

    background-size: cover;
    background-position: center;

    color: #eeeeeb;

    text-align: center;
}


.about-dark-hero-content {
    position: relative;
    z-index: 2;

    width: min(950px, 100%);
}


.about-dark-hero .eyebrow {
    color: #aeb1ad;

    margin-bottom: 28px;
}


.about-dark-hero h1 {
    margin-bottom: 35px;

    font-family: "Libre Baskerville", Georgia, serif;

    font-size: clamp(65px, 9vw, 120px);

    font-weight: 600;

    line-height: 0.88;

    letter-spacing: -2px;
}


.about-dark-hero p:not(.eyebrow) {
    max-width: 680px;

    margin: 0 auto;

    color: rgba(238, 238, 235, 0.76);

    font-size: 18px;

    font-weight: 300;

    line-height: 1.8;
}


/* -----------------------------------------------------
   INTRODUCTION
------------------------------------------------------ */

.about-introduction {
    padding: 150px 8%;

    background: #eeeeeb;

    color: #252627;
}


.about-introduction-container {
    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1.5fr;

    gap: 100px;
}


.about-introduction-label {
    color: #676a68;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;
}


.about-introduction-content h2 {
    margin-bottom: 35px;

    font-family: "Libre Baskerville", Georgia, serif;

    font-size: clamp(52px, 6vw, 82px);

    font-weight: 600;

    line-height: 0.94;
}


.about-introduction-content p {
    max-width: 700px;

    margin-bottom: 22px;

    color: #5c5e5d;

    font-size: 17px;

    line-height: 1.85;
}


/* -----------------------------------------------------
   WHAT IS A COPSE?
------------------------------------------------------ */

.about-copse-section {
    padding: 130px 8%;

    background: #303233;

    color: #eeeeeb;
}


.about-copse-container {
    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;
}


.about-copse-image {
    overflow: hidden;
}


.about-copse-image img {
    aspect-ratio: 4 / 5;

    object-fit: cover;

    filter: grayscale(25%);
}


.about-copse-content .section-label {
    color: #aeb1ad;
}


.about-copse-content h2 {
    margin-bottom: 35px;

    font-family: "Libre Baskerville", Georgia, serif;

    font-size: clamp(55px, 6vw, 85px);

    font-weight: 600;

    line-height: 0.94;
}


.about-copse-content p:not(.section-label) {
    max-width: 560px;

    margin-bottom: 22px;

    color: rgba(238, 238, 235, 0.68);

    font-size: 17px;

    line-height: 1.85;
}


/* -----------------------------------------------------
   MISSION
------------------------------------------------------ */

.about-mission-dark {
    padding: 150px 8%;

    background: #eeeeeb;

    color: #252627;
}


.about-mission-dark-container {
    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.about-mission-dark .section-label {
    color: #676a68;
}


.about-mission-dark-heading h2 {
    max-width: 600px;

    font-family: "Libre Baskerville", Georgia, serif;

    font-size: clamp(55px, 6vw, 85px);

    font-weight: 600;

    line-height: 0.94;
}


.about-mission-dark-content {
    padding-top: 50px;
}


.about-mission-dark-content p {
    max-width: 600px;

    margin-bottom: 25px;

    color: #5c5e5d;

    font-size: 17px;

    line-height: 1.85;
}


/* -----------------------------------------------------
   VISION
------------------------------------------------------ */

.about-vision-dark {
    padding: 150px 8%;

    background: #1c1d1e;

    color: #eeeeeb;
}


.about-vision-dark-container {
    width: min(1200px, 100%);

    margin: 0 auto;
}


.about-vision-dark .section-label {
    color: #aeb1ad;
}


.about-vision-dark-container > h2 {
    max-width: 850px;

    margin-bottom: 100px;

    font-family: "Libre Baskerville", Georgia, serif;

    font-size: clamp(60px, 7vw, 100px);

    font-weight: 600;

    line-height: 0.9;
}


.about-vision-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 60px;
}


.about-vision-item {
    padding-top: 25px;

    border-top: 1px solid rgba(238, 238, 235, 0.2);
}


.about-vision-item span {
    display: block;

    margin-bottom: 25px;

    color: #aeb1ad;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 3px;
}


.about-vision-item h3 {
    margin-bottom: 15px;

    font-family: "Libre Baskerville", Georgia, serif;

    font-size: 42px;

    font-weight: 600;
}


.about-vision-item p {
    color: rgba(238, 238, 235, 0.62);

    font-size: 16px;

    line-height: 1.8;
}


/* -----------------------------------------------------
   FOUNDER
------------------------------------------------------ */

.about-founder {
    padding: 150px 8%;

    background: #303233;

    color: #eeeeeb;
}


.about-founder-container {
    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.about-founder .section-label {
    color: #aeb1ad;
}


.about-founder-heading h2 {
    max-width: 600px;

    font-family: "Libre Baskerville", Georgia, serif;

    font-size: clamp(55px, 6vw, 85px);

    font-weight: 600;

    line-height: 0.94;
}


.about-founder-content {
    padding-top: 50px;
}


.about-founder-content p {
    max-width: 600px;

    margin-bottom: 25px;

    color: rgba(238, 238, 235, 0.68);

    font-size: 17px;

    line-height: 1.85;
}


/* -----------------------------------------------------
   CALL TO ACTION
------------------------------------------------------ */

.about-dark-cta {
    padding: 160px 7%;

    background: #eeeeeb;

    color: #252627;

    text-align: center;
}


.about-dark-cta .section-label {
    color: #676a68;
}


.about-dark-cta-content {
    width: min(850px, 100%);

    margin: 0 auto;
}


.about-dark-cta h2 {
    margin-bottom: 30px;

    font-family: "Libre Baskerville", Georgia, serif;

    font-size: clamp(60px, 7vw, 100px);

    font-weight: 600;

    line-height: 0.9;
}


.about-dark-cta p:not(.section-label) {
    max-width: 620px;

    margin: 0 auto 40px;

    color: #5c5e5d;

    font-size: 17px;

    line-height: 1.8;
}


.about-dark-button {
    display: inline-block;

    padding: 15px 30px;

    border: 1px solid #303233;

    border-radius: 999px;

    background: #303233;

    color: #eeeeeb;

    font-size: 14px;

    font-weight: 500;

    transition: all 0.3s ease;
}


.about-dark-button:hover {
    background: transparent;

    color: #303233;
}


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

.about-footer {
    padding: 55px 8% 30px;

    background: #151617;

    color: #eeeeeb;
}


.about-footer-container {
    width: min(1200px, 100%);

    margin: 0 auto 45px;

    display: flex;

    justify-content: space-between;

    gap: 50px;
}


.about-footer-logo {
    font-family: "Libre Baskerville", Georgia, serif;

    font-size: 38px;

    font-weight: 600;
}


.about-footer-tagline {
    margin-top: 8px;

    color: rgba(238, 238, 235, 0.45);

    font-size: 13px;
}


.about-footer-links {
    display: flex;

    flex-wrap: wrap;

    gap: 28px;
}


.about-footer-links a {
    color: rgba(238, 238, 235, 0.62);

    font-size: 13px;

    transition: color 0.3s ease;
}


.about-footer-links a:hover {
    color: #eeeeeb;
}


.about-footer-bottom {
    width: min(1200px, 100%);

    margin: 0 auto;

    padding-top: 25px;

    border-top: 1px solid rgba(238, 238, 235, 0.1);
}


.about-footer-bottom p {
    color: rgba(238, 238, 235, 0.35);

    font-size: 11px;
}


/* -----------------------------------------------------
   MOBILE
------------------------------------------------------ */

@media (max-width: 850px) {

    .about-introduction-container,
    .about-copse-container,
    .about-mission-dark-container,
    .about-founder-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .about-introduction,
    .about-copse-section,
    .about-mission-dark,
    .about-founder {
        padding-top: 100px;

        padding-bottom: 100px;
    }


    .about-mission-dark-content,
    .about-founder-content {
        padding-top: 0;
    }


    .about-vision-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .about-vision-dark {
        padding-top: 100px;

        padding-bottom: 100px;
    }


    .about-vision-dark-container > h2 {
        margin-bottom: 65px;
    }


    .about-footer-container {
        flex-direction: column;

        gap: 35px;
    }

}


@media (max-width: 600px) {

    .about-dark-hero {
        padding-left: 6%;

        padding-right: 6%;
    }


    .about-dark-hero h1 {
        font-size: clamp(55px, 14vw, 85px);
    }


    .about-dark-hero p:not(.eyebrow) {
        font-size: 16px;
    }


    .about-dark-cta {
        padding-top: 110px;

        padding-bottom: 110px;
    }

}


/* =========================================================
   RESOURCES PAGE
   Warm / Earthy
========================================================= */

.resources-page {
    background: #f4f2ed;
    color: #252a27;
    font-family: "DM Sans", Arial, sans-serif;
}


/* ---------------------------------------------------------
   RESOURCES HEADER
--------------------------------------------------------- */

.resources-page .site-header {
    background: #f4f2ed;
    color: #252a27;
    border-bottom: 1px solid rgba(37,42,39,0.08);
}

.resources-page .logo {
    font-family: "Libre Baskerville", Georgia, serif;
}

.resources-page .nav-links a {
    color: #303632;
}

.resources-page .nav-links a:hover {
    opacity: 0.55;
}


/* ---------------------------------------------------------
   RESOURCES HERO
--------------------------------------------------------- */

.resources-page .resources-hero {
    min-height: 620px;

    display: flex;
    align-items: center;

    padding: 90px 8%;

    background:
        linear-gradient(
            rgba(244,242,237,0.91),
            rgba(244,242,237,0.82)
        ),
        url("images/hero-forest.jpg");

    background-size: cover;
    background-position: center;
}

.resources-page .resources-hero-content {
    width: 100%;
    max-width: 1100px;
    margin: auto;
}

.resources-page .eyebrow {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 11px;
    font-weight: bold;
    color: #607364;
    margin-bottom: 20px;
}

.resources-page .resources-hero h1 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(50px, 7vw, 85px);
    line-height: 1.05;
    font-weight: normal;
    max-width: 850px;
    margin-bottom: 30px;
}

.resources-page .hero-description {
    max-width: 700px;
    color: #59615b;
    font-size: 18px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   RESOURCES INTRO
--------------------------------------------------------- */

.resources-page .section-intro {
    max-width: 850px;
    margin-bottom: 55px;
}

.resources-page .section-intro h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.1;
    font-weight: normal;
    margin-bottom: 25px;
}

.resources-page .section-intro p:not(.eyebrow) {
    max-width: 720px;
    color: #626a65;
    font-size: 17px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   GET HELP
--------------------------------------------------------- */

.resources-page .help-section {
    background: #29352e;
    color: #f5f3ee;
    padding: 110px 8%;
}

.resources-page .help-section .eyebrow {
    color: #aebcaf;
}

.resources-page .help-section .section-intro h2 {
    color: #f5f3ee;
}

.resources-page .help-section .section-intro p:not(.eyebrow) {
    color: #d4dbd6;
}

.resources-page .help-card {
    max-width: 1000px;
    margin: auto;

    background: #344238;

    padding: 55px;

    border: 1px solid rgba(255,255,255,0.13);

    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.resources-page .help-card-label {
    color: #aebcaf;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

.resources-page .help-card h3 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(34px, 5vw, 55px);
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: 20px;
}

.resources-page .help-card p {
    max-width: 750px;
    color: #d4dbd6;
    font-size: 16px;
    line-height: 1.8;
}

.resources-page .help-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 35px;
}

.resources-page .help-button {
    display: inline-block;
    padding: 13px 25px;

    border-radius: 30px;

    background: #f4f2ed;
    color: #29352e;

    font-size: 14px;
    font-weight: bold;
}

.resources-page .help-button:hover {
    transform: translateY(-2px);
    background: white;
}

.resources-page .help-button.secondary {
    background: transparent;
    color: #f4f2ed;
    border: 1px solid rgba(255,255,255,0.5);
}

.resources-page .help-button.secondary:hover {
    background: rgba(255,255,255,0.1);
}

.resources-page .help-link {
    color: #d4dbd6;
    font-size: 14px;
    font-weight: bold;
}

.resources-page .help-link:hover {
    text-decoration: underline;
}

.resources-page .emergency-note {
    max-width: 1000px;
    margin: 25px auto 0;
    color: #bfc8c1;
    font-size: 13px;
}


/* ---------------------------------------------------------
   SUPPORT
--------------------------------------------------------- */

.resources-page .support-section {
    max-width: 1200px;
    margin: auto;
    padding: 110px 8%;
}

.resources-page .resource-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.resources-page .resource-card {
    background: #faf9f5;
    border: 1px solid rgba(37,42,39,0.1);

    padding: 42px;

    min-height: 320px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    transition: 0.25s ease;
}

.resources-page .resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.07);
}

.resources-page .resource-number {
    color: #7a8c7d;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 22px;
}

.resources-page .resource-card h3 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 15px;
}

.resources-page .resource-card p {
    color: #626a65;
    font-size: 15px;
    line-height: 1.8;
    flex-grow: 1;
}

.resources-page .resource-card a {
    margin-top: 25px;
    color: #526957;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.resources-page .resource-card a:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------
   KEEP GROWING
--------------------------------------------------------- */

.resources-page .growing-section {
    background: #e5e1d6;
    padding: 110px 8%;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
}

.resources-page .growing-content {
    max-width: 600px;
}

.resources-page .growing-content h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1.1;
    font-weight: normal;
    margin-bottom: 25px;
}

.resources-page .growing-content p:not(.eyebrow) {
    color: #626a65;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.resources-page .resource-list {
    border-top: 1px solid rgba(37,42,39,0.18);
}

.resources-page .resource-list-item {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 20px;

    padding: 25px 0;

    border-bottom: 1px solid rgba(37,42,39,0.18);
}

.resources-page .resource-list-item span {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: bold;
    color: #758479;
}

.resources-page .resource-list-item strong {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 20px;
    font-weight: normal;
}

.resources-page .resource-list-item a {
    color: #536858;
    font-size: 12px;
    font-weight: bold;
}


/* ---------------------------------------------------------
   COMMUNITY
--------------------------------------------------------- */

.resources-page .community-section {
    text-align: center;
    padding: 120px 8%;
}

.resources-page .community-content {
    max-width: 850px;
    margin: auto;
}

.resources-page .community-section h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(42px, 6vw, 68px);
    line-height: 1.05;
    font-weight: normal;
    margin-bottom: 25px;
}

.resources-page .community-section p:not(.eyebrow) {
    max-width: 650px;
    margin: auto;
    color: #626a65;
    font-size: 17px;
}

.resources-page .social-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 45px;
}

.resources-page .social-links a {
    border: 1px solid rgba(37,42,39,0.2);
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
}

.resources-page .social-links a:hover {
    background: #29352e;
    color: #f4f2ed;
}


/* ---------------------------------------------------------
   SUGGEST RESOURCE
--------------------------------------------------------- */

.resources-page .suggest-section {
    padding: 0 8% 110px;
}

.resources-page .suggest-box {
    max-width: 1000px;
    margin: auto;

    background: #29352e;
    color: #f4f2ed;

    padding: 70px;

    text-align: center;
}

.resources-page .suggest-box .eyebrow {
    color: #aebcaf;
}

.resources-page .suggest-box h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(38px, 5vw, 58px);
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: 22px;
}

.resources-page .suggest-box p:not(.eyebrow) {
    max-width: 650px;
    margin: auto;
    color: #d4dbd6;
}

.resources-page .outline-button {
    display: inline-block;
    margin-top: 30px;

    padding: 13px 25px;

    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 30px;

    font-size: 13px;
    font-weight: bold;
}

.resources-page .outline-button:hover {
    background: #f4f2ed;
    color: #29352e;
}


/* ---------------------------------------------------------
   RESOURCES FOOTER
--------------------------------------------------------- */

.resources-page .resources-footer {
    background: #202622;
    color: #d4dbd6;
    text-align: center;
    padding: 60px 8%;
}

.resources-page .footer-logo {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 34px;
    color: white;
    margin-bottom: 12px;
}

.resources-page .resources-footer > p {
    color: #9da69f;
    font-size: 14px;
}

.resources-page .footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin: 30px 0;
}

.resources-page .footer-links a {
    color: #cbd2cd;
    font-size: 13px;
}

.resources-page .footer-links a:hover {
    color: white;
}

.resources-page .copyright {
    margin-top: 25px;
    font-size: 12px !important;
}


/* =========================================================
   CONTACT PAGE
   Terracotta / Clay
========================================================= */

.contact-page {
    background: #f4eee8;
    color: #302925;
    font-family: "DM Sans", Arial, sans-serif;
}


/* ---------------------------------------------------------
   CONTACT HEADER
--------------------------------------------------------- */

.contact-page .site-header {
    background: #a85f4c;
    color: #fffaf6;
}

.contact-page .logo {
    font-family: "Libre Baskerville", Georgia, serif;
}

.contact-page .nav-links a {
    color: #fffaf6;
}

.contact-page .nav-links a:hover {
    opacity: 0.7;
}


/* ---------------------------------------------------------
   CONTACT SECTION
--------------------------------------------------------- */

.contact-section {
    background: #f4eee8;
    padding: 100px 8% 120px;
}

.contact-content {
    max-width: 850px;
    margin: 0 auto;
}

.contact-page .eyebrow {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #a85f4c;
    margin-bottom: 20px;
}


/* ---------------------------------------------------------
   CONTACT INTRO
--------------------------------------------------------- */

.contact-content h1 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(55px, 8vw, 90px);
    line-height: 1.05;
    font-weight: 400;
    color: #302925;
    margin-bottom: 25px;
}

.contact-intro {
    max-width: 700px;
    color: #665c56;
    font-size: 19px;
    line-height: 1.8;
    margin-bottom: 55px;
}


/* ---------------------------------------------------------
   CONTACT FORM
--------------------------------------------------------- */

.contact-form {
    background: #fffaf6;
    padding: 50px;

    border: 1px solid rgba(48, 41, 37, 0.1);

    box-shadow: 0 15px 40px rgba(48, 41, 37, 0.06);
}

.form-group {
    margin-bottom: 28px;
}

.form-group label {
    display: block;
    margin-bottom: 9px;

    color: #403732;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group textarea {
    width: 100%;

    border: 1px solid rgba(48, 41, 37, 0.18);

    background: #f8f4ef;

    padding: 15px 16px;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 15px;

    color: #302925;

    outline: none;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}

.form-group textarea {
    resize: vertical;
    min-height: 170px;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #a85f4c;
    background: #fffaf6;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9a908a;
}


/* ---------------------------------------------------------
   CONTACT BUTTON
--------------------------------------------------------- */

.contact-button {
    border: none;

    background: #a85f4c;
    color: #fffaf6;

    padding: 15px 32px;

    border-radius: 30px;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.contact-button:hover {
    background: #8f4f3f;
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   CONTACT NOTE
--------------------------------------------------------- */

.contact-note {
    margin-top: 75px;
    padding-top: 55px;

    border-top: 1px solid rgba(48, 41, 37, 0.15);
}

.contact-note h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 18px;
    color: #302925;
}

.contact-note p {
    max-width: 700px;
    color: #665c56;
    font-size: 16px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   CONTACT SOCIAL
--------------------------------------------------------- */

.contact-social {
    margin-top: 65px;
}

.contact-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.contact-social-links a {
    display: inline-block;

    border: 1px solid rgba(48, 41, 37, 0.2);

    padding: 12px 22px;
    border-radius: 30px;

    color: #403732;

    font-size: 13px;
    font-weight: 600;
}

.contact-social-links a:hover {
    background: #a85f4c;
    border-color: #a85f4c;
    color: #fffaf6;
}


/* ---------------------------------------------------------
   CONTACT FOOTER
--------------------------------------------------------- */

.contact-page .contact-footer {
    background: #302925;
    color: #f4eee8;

    text-align: center;

    padding: 60px 8%;
}

.contact-page .footer-logo {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 34px;
    color: #fffaf6;
    margin-bottom: 12px;
}

.contact-page .contact-footer > p {
    color: #c7bbb4;
    font-size: 14px;
}

.contact-page .footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin: 30px 0;
}

.contact-page .footer-links a {
    color: #d9cec7;
    font-size: 13px;
}

.contact-page .footer-links a:hover {
    color: white;
}

.contact-page .copyright {
    margin-top: 25px;
    font-size: 12px !important;
}


/* =========================================================
   SHOP PAGE
   Deep Purple / Lavender
========================================================= */

.shop-page {
    background: #f3eef7;
    color: #302936;
    font-family: "DM Sans", Arial, sans-serif;
}


/* ---------------------------------------------------------
   SHOP HEADER
--------------------------------------------------------- */

.shop-page .site-header {
    background: #4b315f;
    color: #faf7fc;
}

.shop-page .logo {
    font-family: "Libre Baskerville", Georgia, serif;
}

.shop-page .nav-links a {
    color: #faf7fc;
}

.shop-page .nav-links a:hover {
    opacity: 0.7;
}


/* ---------------------------------------------------------
   SHOP HERO
--------------------------------------------------------- */

.shop-hero {
    min-height: 580px;

    display: flex;
    align-items: center;

    padding: 90px 8%;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(151, 117, 177, 0.55),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #4b315f,
            #654577
        );

    color: #faf7fc;
}

.shop-hero-content {
    max-width: 900px;
    margin: auto;
    width: 100%;
}

.shop-page .eyebrow {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 20px;
}

.shop-hero .eyebrow {
    color: #d9c8e3;
}

.shop-hero h1 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(55px, 8vw, 95px);
    line-height: 1.02;
    font-weight: 400;
    margin-bottom: 28px;
}

.shop-intro {
    max-width: 650px;
    color: #e5ddea;
    font-size: 19px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   SHOP INTRODUCTION
--------------------------------------------------------- */

.shop-introduction {
    background: #f3eef7;
    padding: 105px 8%;
}

.shop-introduction-content {
    max-width: 800px;
    margin: auto;
}

.shop-introduction .eyebrow {
    color: #76558b;
}

.shop-introduction h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(40px, 5vw, 62px);
    font-weight: 400;
    line-height: 1.1;
    color: #302936;
    margin-bottom: 25px;
}

.shop-introduction p:not(.eyebrow) {
    max-width: 720px;
    color: #665e6b;
    font-size: 17px;
    line-height: 1.85;
}


/* ---------------------------------------------------------
   SHOP PRODUCTS
--------------------------------------------------------- */

.shop-products {
    background: #faf8fc;
    padding: 110px 8%;
}

.shop-section-heading {
    max-width: 750px;
    margin: 0 auto 60px;
    text-align: center;
}

.shop-section-heading .eyebrow {
    color: #76558b;
}

.shop-section-heading h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(42px, 6vw, 68px);
    font-weight: 400;
    line-height: 1.05;
    color: #302936;
    margin-bottom: 20px;
}

.shop-section-heading p:not(.eyebrow) {
    color: #6b6370;
    font-size: 16px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   PRODUCT GRID
--------------------------------------------------------- */

.product-grid {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


/* ---------------------------------------------------------
   PRODUCT CARDS
--------------------------------------------------------- */

.product-card {
    background: #ffffff;

    border: 1px solid rgba(75, 49, 95, 0.12);

    box-shadow: 0 12px 35px rgba(75, 49, 95, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(75, 49, 95, 0.12);
}


/* ---------------------------------------------------------
   PRODUCT IMAGE
--------------------------------------------------------- */

.product-image {
    min-height: 360px;

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

    position: relative;
    overflow: hidden;

    background: #f4eff8;
    padding: 25px;
}

.product-image img {
    width: 100%;
    max-width: 260px;
    height: auto;
    object-fit: contain;
    transition: opacity 0.2s ease;
}


/* ---------------------------------------------------------
   COLOR SWATCHES
--------------------------------------------------------- */

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(48, 41, 54, 0.2);
    padding: 0;
    cursor: pointer;
}

.color-swatch:hover {
    box-shadow: 0 0 0 1px rgba(48, 41, 54, 0.45);
}

.color-swatch.active {
    box-shadow: 0 0 0 2px #76558b;
}

.color-swatch-white {
    box-shadow: 0 0 0 1px rgba(48, 41, 54, 0.35);
}

.selected-color {
    font-size: 12px !important;
    color: #6b6370;
    margin-bottom: 18px !important;
}

.selected-color span {
    font-weight: 700;
    color: #302936;
}


/* ---------------------------------------------------------
   PRODUCT INFORMATION
--------------------------------------------------------- */

.product-info {
    padding: 35px;
}

.product-category {
    color: #86649a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    margin-bottom: 12px;
}

.product-info h3 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    color: #302936;
    margin-bottom: 12px;
}

.product-info p:not(.product-category) {
    color: #6b6370;
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 25px;
}


/* ---------------------------------------------------------
   PRODUCT BUTTON
--------------------------------------------------------- */

.product-button {
    border: 1px solid #76558b;
    background: transparent;
    color: #76558b;

    padding: 11px 22px;
    border-radius: 30px;

    font-size: 12px;
    font-weight: 700;

    cursor: not-allowed;
    opacity: 0.8;
}


/* ---------------------------------------------------------
   FUTURE COLLECTION
--------------------------------------------------------- */

.shop-future {
    background: #ddd0e5;
    padding: 110px 8%;
    text-align: center;
}

.shop-future-content {
    max-width: 800px;
    margin: auto;
}

.shop-future .eyebrow {
    color: #68477b;
}

.shop-future h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(42px, 6vw, 68px);
    font-weight: 400;
    line-height: 1.08;
    color: #302936;
    margin-bottom: 25px;
}

.shop-future p:not(.eyebrow) {
    max-width: 650px;
    margin: 0 auto;
    color: #625a68;
    font-size: 17px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   SHOP CONTACT BUTTON
--------------------------------------------------------- */

.shop-contact-button {
    display: inline-block;

    margin-top: 30px;
    padding: 14px 27px;

    background: #4b315f;
    color: #faf7fc;

    border-radius: 30px;

    font-size: 13px;
    font-weight: 700;
}

.shop-contact-button:hover {
    background: #382346;
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   SHOP FOOTER
--------------------------------------------------------- */

.shop-page .shop-footer {
    background: #29202f;
    color: #eee8f2;

    text-align: center;

    padding: 60px 8%;
}

.shop-page .footer-logo {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 34px;
    color: #faf7fc;
    margin-bottom: 12px;
}

.shop-page .shop-footer > p {
    color: #bdb2c3;
    font-size: 14px;
}

.shop-page .footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin: 30px 0;
}

.shop-page .footer-links a {
    color: #cfc5d5;
    font-size: 13px;
}

.shop-page .footer-links a:hover {
    color: white;
}

.shop-page .copyright {
    margin-top: 25px;
    font-size: 12px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .navbar {
        width: 88%;
    }

    .nav-links {
        gap: 15px;
    }

    .nav-links a {
        font-size: 12px;
    }

    /* Home */

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

    .home-hero-content {
        padding-left: 7%;
        padding-right: 7%;
    }

    .home-podcast-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .home-explore-grid {
        grid-template-columns: 1fr;
    }

    .home-copse-section,
    .home-mission-section,
    .home-podcast-section,
    .home-explore-section,
    .home-closing-section {
        padding-left: 7%;
        padding-right: 7%;
    }

    /* Podcast */

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

    /* About */

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

    /* Resources */

    .resources-page .resources-hero {
        min-height: 550px;
        padding: 80px 7%;
    }

    .resources-page .help-section,
    .resources-page .support-section,
    .resources-page .growing-section,
    .resources-page .community-section {
        padding-left: 7%;
        padding-right: 7%;
    }

    .resources-page .resource-grid {
        grid-template-columns: 1fr;
    }

    .resources-page .growing-section {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .resources-page .resource-list-item {
        grid-template-columns: 100px 1fr;
    }

    .resources-page .resource-list-item a {
        grid-column: 2;
    }

    .resources-page .suggest-section {
        padding-left: 7%;
        padding-right: 7%;
    }

    .resources-page .suggest-box {
        padding: 55px 35px;
    }

    /* Shop */

    .shop-hero {
        min-height: 520px;
        padding: 80px 7%;
    }

    .shop-introduction,
    .shop-products,
    .shop-future {
        padding-left: 7%;
        padding-right: 7%;
    }

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

    .product-image {
        min-height: 330px;
    }
}


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

@media (max-width: 700px) {

    .navbar {
        width: 88%;
        min-height: 42px;
        padding: 20px 0;
    }

    .logo {
        font-size: 25px;
    }

    .mobile-menu-button {
        display: block;

        position: absolute;
        right: 0;
        top: 50%;

        transform: translateY(-50%);

        z-index: 1002;
    }

    .nav-links {
        display: none;

        position: absolute;

        top: calc(100% + 1px);
        left: -7%;
        right: -7%;

        flex-direction: column;
        align-items: center;

        gap: 22px;

        padding: 28px 20px;

        z-index: 1001;
    }

    .nav-links.mobile-nav-open {
        display: flex;
    }

    .nav-links a {
        font-size: 14px;
    }

    /* Page-specific menu backgrounds */

    .home-page .nav-links {
        background: #263b2c;
    }

    .podcast-page .nav-links {
        background: #071c2b;
    }

    .about-page .nav-links {
        background: #242526;
    }

    .resources-page .nav-links {
        background: #f4f2ed;
    }

    .contact-page .nav-links {
        background: #a85f4c;
    }

    .shop-page .nav-links {
        background: #4b315f;
    }
}


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

@media (max-width: 600px) {

    body {
        overflow-x: hidden;
    }

    h1,
    h2,
    h3 {
        overflow-wrap: break-word;
    }

    p {
        line-height: 1.75;
    }


    /* -----------------------------------------------------
       HOME
    ----------------------------------------------------- */

    .home-hero {
        min-height: 600px;
        background-position: 60% center;
    }

    .home-hero-content {
        padding: 80px 7%;
    }

    .home-hero h1 {
        font-size: 48px;
    }

    .home-hero-text {
        font-size: 16px;
    }

    .home-copse-section,
    .home-mission-section,
    .home-podcast-section,
    .home-explore-section,
    .home-closing-section {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .home-copse-content h2,
    .home-mission-content h2,
    .home-podcast-text h2,
    .home-explore-heading h2,
    .home-closing-content h2 {
        font-size: 42px;
    }

    .home-large-text {
        font-size: 22px !important;
    }

    .home-podcast-card {
        min-height: 330px;
        padding: 30px;
    }

    .home-podcast-card h3 {
        font-size: 34px;
    }

    .home-explore-card {
        min-height: 210px;
        padding: 28px;
    }


    /* -----------------------------------------------------
       PODCAST
    ----------------------------------------------------- */

    .podcast-page .podcast-hero {
        min-height: 560px;
        padding: 75px 7%;
    }

    .podcast-page .podcast-hero h1 {
        font-size: 48px;
    }

    .podcast-page .podcast-content {
        padding: 75px 7%;
    }

    .podcast-page .podcast-content h2 {
        font-size: 40px;
    }

    .podcast-card {
        padding: 28px;
    }


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

    .about-hero {
        min-height: 60vh;
        padding: 70px 7%;
    }

    .about-hero h1 {
        font-size: 48px;
    }

    .about-section {
        padding-left: 7%;
        padding-right: 7%;
    }

    .about-section h2 {
        font-size: 40px;
    }

    .about-section p {
        font-size: 16px;
    }

    .about-card {
        padding: 28px;
    }


    /* -----------------------------------------------------
       RESOURCES
    ----------------------------------------------------- */

    .resources-page .resources-hero {
        min-height: 500px;
        padding: 70px 7%;
    }

    .resources-page .resources-hero h1 {
        font-size: 46px;
    }

    .resources-page .help-section,
    .resources-page .support-section,
    .resources-page .growing-section,
    .resources-page .community-section {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .resources-page .help-card {
        padding: 35px 25px;
    }

    .resources-page .help-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .resources-page .resource-card {
        padding: 28px;
        min-height: auto;
    }

    .resources-page .resource-list-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .resources-page .social-links {
        flex-direction: column;
        align-items: stretch;
    }

    .resources-page .social-links a {
        text-align: center;
    }

    .resources-page .suggest-section {
        padding-left: 7%;
        padding-right: 7%;
        padding-bottom: 75px;
    }

    .resources-page .suggest-box {
        padding: 45px 25px;
    }


    /* -----------------------------------------------------
       CONTACT
    ----------------------------------------------------- */

    .contact-section {
        padding: 75px 7% 90px;
    }

    .contact-content h1 {
        font-size: 48px;
    }

    .contact-intro {
        font-size: 17px;
        margin-bottom: 40px;
    }

    .contact-form {
        padding: 30px 25px;
    }

    .contact-note {
        margin-top: 55px;
        padding-top: 40px;
    }

    .contact-social-links {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-social-links a {
        text-align: center;
    }


    /* -----------------------------------------------------
       SHOP
    ----------------------------------------------------- */

    .shop-hero {
        min-height: 500px;
        padding: 75px 7%;
    }

    .shop-hero h1 {
        font-size: 48px;
    }

    .shop-introduction,
    .shop-products,
    .shop-future {
        padding-left: 7%;
        padding-right: 7%;
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .shop-introduction h2,
    .shop-section-heading h2,
    .shop-future h2 {
        font-size: 42px;
    }

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

    .product-image {
        min-height: 280px;
    }

    .product-info {
        padding: 28px 25px;
    }


    /* -----------------------------------------------------
       FOOTERS
    ----------------------------------------------------- */

    .site-footer,
    .home-page .home-footer,
    .podcast-page .site-footer,
    .about-page .site-footer,
    .resources-page .resources-footer,
    .contact-page .contact-footer,
    .shop-page .shop-footer {
        padding: 50px 7%;
    }

    .footer-links {
        gap: 16px;
    }

    .footer-links a {
        font-size: 12px;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 400px) {

    .logo {
        font-size: 23px;
    }

    .mobile-menu-button {
        font-size: 25px;
    }

    .home-hero h1,
    .podcast-page .podcast-hero h1,
    .about-hero h1,
    .contact-content h1,
    .shop-hero h1 {
        font-size: 43px;
    }

    .home-copse-content h2,
    .home-mission-content h2,
    .home-podcast-text h2,
    .home-explore-heading h2,
    .home-closing-content h2,
    .about-section h2,
    .shop-introduction h2,
    .shop-section-heading h2,
    .shop-future h2 {
        font-size: 36px;
    }

    .contact-form {
        padding: 25px 20px;
    }

    .product-info {
        padding: 25px 20px;
    }
}

/* =========================================================
   404 ERROR PAGE
========================================================= */

.error-page {
    background: #263b2c;
    color: #f4f2ed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.error-header {
    background: #263b2c;
    color: #f4f2ed;
}

.error-main {
    flex: 1;
    display: flex;
}

.error-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 6vw;
}

.error-content {
    max-width: 760px;
    margin: 0 auto;
}

.error-number {
    font-family: "Libre Baskerville", serif;
    font-size: clamp(6rem, 18vw, 12rem);
    line-height: 0.9;
    margin: 0 0 25px;
    opacity: 0.2;
}

.error-content .eyebrow {
    color: #d9c9a3;
    margin-bottom: 20px;
}

.error-content h1 {
    font-family: "Libre Baskerville", serif;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    line-height: 1.1;
    margin: 0 auto 25px;
    max-width: 700px;
}

.error-message {
    max-width: 560px;
    margin: 0 auto 35px;
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.85;
}

.error-button {
    display: inline-block;
    padding: 14px 28px;
    background: #f4f2ed;
    color: #263b2c;
    text-decoration: none;
    font-weight: 700;
    border-radius: 4px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.error-button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.error-footer {
    background: #1d2d21;
    color: #f4f2ed;
}


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

@media (max-width: 700px) {

    .error-section {
        padding: 80px 6vw;
    }

    .error-content h1 {
        font-size: 2.3rem;
    }

    .error-message {
        font-size: 1rem;
    }

    .error-button {
        width: 100%;
        max-width: 280px;
    }

}

/* =========================================================
   PRIVACY PAGE
   Slate / Neutral
========================================================= */

.privacy-page {
    background: #f4f2ed;
    color: #2c2e2b;
}


/* ---------------------------------------------------------
   PRIVACY HEADER
--------------------------------------------------------- */

.privacy-page .site-header {
    background: #33403e;
    color: #f4f2ed;
}

.privacy-page .nav-links a {
    color: #f4f2ed;
}

.privacy-page .nav-links a:hover {
    opacity: 0.7;
}


/* ---------------------------------------------------------
   PRIVACY HERO
--------------------------------------------------------- */

.privacy-hero {
    background: #33403e;
    color: #f4f2ed;
    padding: 90px 8% 70px;
    text-align: center;
}

.privacy-hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.privacy-hero .eyebrow {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #a9b7a8;
    margin-bottom: 18px;
}

.privacy-hero h1 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(40px, 6vw, 60px);
    font-weight: normal;
    margin-bottom: 14px;
}

.privacy-updated {
    font-size: 14px;
    color: #c3ccc2;
}


/* ---------------------------------------------------------
   PRIVACY BODY
--------------------------------------------------------- */

.privacy-body {
    padding: 80px 8% 120px;
}

.privacy-content {
    max-width: 760px;
    margin: 0 auto;
}

.privacy-content h2 {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 28px;
    font-weight: normal;
    color: #22271f;
    margin-top: 56px;
    margin-bottom: 18px;
}

.privacy-content h3 {
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #2c2e2b;
    margin-top: 30px;
    margin-bottom: 10px;
}

.privacy-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #4a4d47;
    margin-bottom: 18px;
}

.privacy-content ul {
    margin: 0 0 22px 0;
    padding-left: 22px;
}

.privacy-content li {
    font-size: 16px;
    line-height: 1.8;
    color: #4a4d47;
    margin-bottom: 10px;
}

.privacy-content a {
    color: #33403e;
    text-decoration: underline;
}

.privacy-content a:hover {
    opacity: 0.7;
}

.privacy-notice {
    background: #e9e7de;
    border-left: 3px solid #33403e;
    padding: 24px 28px;
    margin-bottom: 40px;
}

.privacy-notice p {
    font-size: 14px;
    line-height: 1.7;
    color: #33403e;
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   PRIVACY FOOTER
--------------------------------------------------------- */

.privacy-page .site-footer {
    background: #22271f;
    color: rgba(244, 242, 237, 0.75);
    text-align: center;
    padding: 60px 8%;
}

.privacy-page .footer-logo {
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 34px;
    color: #f4f2ed;
    margin-bottom: 12px;
}

.privacy-page .site-footer > p:not(.copyright) {
    color: rgba(244, 242, 237, 0.6);
    font-size: 14px;
}

.privacy-page .footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin: 30px 0;
}

.privacy-page .footer-links a {
    color: rgba(244, 242, 237, 0.7);
    font-size: 13px;
    text-decoration: none;
}

.privacy-page .footer-links a:hover {
    color: #f4f2ed;
}

.privacy-page .copyright {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(244, 242, 237, 0.5);
}


/* ---------------------------------------------------------
   PRIVACY MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

    .privacy-hero {
        padding: 70px 7% 50px;
    }

    .privacy-body {
        padding: 60px 7% 90px;
    }

    .privacy-content h2 {
        font-size: 24px;
        margin-top: 42px;
    }

    .privacy-notice {
        padding: 20px 20px;
    }

}