@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600&display=swap');


/* =========================
   ROOT & ROOM
   Visual Foundation
========================= */

:root {
    --cream: #F7F1E3;
    --cocoa: #3A2C24;
    --brown: #6B5140;
    --ochre: #C49A45;
    --butter: #E8D9A8;
    --terracotta: #B86F52;
    --charcoal: #292724;

    /* Layout */
    --page-max: 1440px;
    --content-max: 1200px;
    --page-gutter: clamp(24px, 4vw, 72px);
    --section-gap: clamp(48px, 6vw, 96px);
}


/* =========================
   RESET
========================= */

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

html,
body {
    min-height: 100%;
}

body {
    background: var(--cream);
    color: var(--charcoal);
    font-family: "Inter", sans-serif;
    line-height: 1.6;
}


/* =========================
   HEADER
========================= */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 6vw;
    background: var(--cream);
    border-bottom: 1px solid rgba(58, 44, 36, 0.15);
}

.logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo span {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 2rem;
    color: var(--cocoa);
}

.logo small {
    margin-top: 7px;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brown);
}


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

.main-nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.main-nav a {
    color: var(--cocoa);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

.main-nav a:hover {
    color: var(--ochre);
}


/* =========================
   FIND MY PLANT BUTTON
========================= */

.plant-finder-button {
    display: inline-block;
    padding: 12px 18px;
    background: var(--cocoa);
    color: var(--cream);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.plant-finder-button:hover {
    background: var(--brown);
}


/* =========================
   HERO
========================= */

.hero {
    min-height: auto;
    display: flex;
    align-items: center;
    padding: 90px 6vw;
    background: var(--cream);
}

.hero-content {
    max-width: 700px;
}

.eyebrow {
    margin-bottom: 20px;
    color: var(--terracotta);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 680px;
    margin-bottom: 25px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.5rem, 7vw, 6.5rem);
    font-weight: 400;
    line-height: 0.95;
}

.hero-text {
    max-width: 540px;
    margin-bottom: 35px;
    color: var(--brown);
    font-size: 1.05rem;
}

.button-primary {
    display: inline-block;
    padding: 15px 24px;
    background: var(--ochre);
    color: var(--cocoa);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.button-primary:hover {
    background: var(--terracotta);
    color: var(--cream);
}
/* =========================
   HERO IMAGE
========================= */

.hero {
    justify-content: space-between;
    gap: 8vw;
}

.hero-image {
    width: min(42vw, 560px);
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
}
/* =========================
   HERO IMAGE CAPTION
========================= */

.image-caption {
    margin-top: 12px;
    color: var(--brown);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* =========================
   FIND YOUR PLANT
========================= */

.find-plant-section {
    padding: 120px 6vw;
    background: #efe6d4;
}

.section-intro {
    max-width: 720px;
    margin-bottom: 70px;
}

.section-intro h2 {
    margin-bottom: 24px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(2.7rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
}

.care-intro > p:not(.eyebrow) {
    max-width: 600px;
    color: var(--brown);
    font-size: 1rem;
    line-height: 1.6;
}

.find-plant-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1fr);
    gap: 8vw;
    align-items: center;
}

.find-plant-image img {
    width: 100%;
    max-height: 620px;
    object-fit: cover;
    display: block;
}

.find-plant-content {
    max-width: 560px;
}

/* =========================
   PLANT PROMPTS
========================= */

.plant-prompt {
    padding: 28px 0;
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.plant-prompt span {
    display: block;
    margin-bottom: 10px;
    color: var(--terracotta);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.plant-prompt h3 {
    margin-bottom: 7px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1.15;
}

.plant-prompt p {
    max-width: 470px;
    color: var(--brown);
    font-size: 0.88rem;
}

.text-link {
    display: inline-block;
    margin-top: 30px;
    color: var(--cocoa);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ochre);
    padding-bottom: 5px;
}

.text-link:hover {
    color: var(--terracotta);
    border-color: var(--terracotta);
}
.plant-sos-preview {
    padding: 120px 6vw;
    background: var(--cream);
}

.plant-sos-preview .section-intro {
    max-width: 760px;
    margin-bottom: 65px;
}

.sos-topics {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.sos-topic {
    padding: 32px 35px 32px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    color: var(--cocoa);
    text-decoration: none;
}

.sos-topic:nth-child(even) {
    padding-left: 35px;
    border-left: 1px solid rgba(58, 44, 36, 0.2);
}

.sos-topic span {
    display: block;
    margin-bottom: 12px;
    color: var(--ochre);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.sos-topic h3 {
    margin-bottom: 8px;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.1;
}

.sos-topic p {
    max-width: 430px;
    color: var(--brown);
    font-size: 0.85rem;
}

.sos-topic:hover h3 {
    color: var(--terracotta);
}

.plant-sos-preview > .text-link {
    margin-top: 35px;
}
.plant-library-preview {
    padding: 120px 6vw;
    background: #efe6d4;
}

.library-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.7fr);
    gap: 8vw;
    align-items: end;
    margin-bottom: 70px;
}

.library-heading h2 {
    max-width: 780px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    font-weight: 400;
    line-height: 1;
}

.library-heading > p {
    max-width: 430px;
    color: var(--brown);
    font-size: 0.95rem;
}

.library-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.library-link {
    display: block;
    padding: 32px 35px 35px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    color: var(--cocoa);
    text-decoration: none;
}

.library-link:nth-child(even) {
    padding-left: 35px;
    border-left: 1px solid rgba(58, 44, 36, 0.2);
}

.library-link span {
    display: block;
    margin-bottom: 12px;
    color: var(--terracotta);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.library-link h3 {
    margin-bottom: 9px;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.1;
}

.library-link p {
    max-width: 430px;
    color: var(--brown);
    font-size: 0.85rem;
}

.library-link:hover h3 {
    color: var(--terracotta);
}

.plant-library-preview > .text-link {
    margin-top: 35px;
}
.care-preview {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(400px, 1.15fr);
    gap: 9vw;
    align-items: start;
    padding: 130px 6vw;
    background: var(--cream);
}

.care-intro {
    max-width: 560px;
}

.care-intro .eyebrow {
    margin: 0 0 8px;
}

.care-intro h2 {
    display: block;
    margin: 0 0 30px;
    padding: 0;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1.1;
}

.care-intro > p:not(.eyebrow) {
    display: block;
    max-width: 500px;
    margin: 0 0 10px;
    padding: 0;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.6;
}

.care-intro .text-link {
    display: inline-block;
    margin-top: 25px;
}

.care-topics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 55px;
}

.care-group {
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.care-group > span {
    display: block;
    margin: 22px 0 5px;
    color: var(--terracotta);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.care-group a {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    color: var(--cocoa);
    text-decoration: none;
}

.care-group h3 {
    margin: 0 0 6px;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.15;
}

.care-group p {
    margin: 0;
    color: var(--brown);
    font-size: 0.82rem;
    line-height: 1.55;
}

.care-group a:hover h3 {
    color: var(--terracotta);
}
.before-buy {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1fr);
    gap: 9vw;
    align-items: center;
    padding: 130px 6vw;
    background: #efe6d4;
}

.before-buy-image img {
    width: 100%;
    max-height: 650px;
    object-fit: cover;
    display: block;
}

.before-buy-content {
    max-width: 620px;
}

.before-buy-content h2 {
    margin-bottom: 24px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.before-buy-content > p:not(.eyebrow) {
    max-width: 520px;
    margin-bottom: 45px;
    color: var(--brown);
    font-size: 0.95rem;
}

.buy-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.buy-checks > div {
    padding: 22px 25px 22px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
}

.buy-checks > div:nth-child(even) {
    padding-left: 25px;
    border-left: 1px solid rgba(58, 44, 36, 0.2);
}

.buy-checks span {
    display: block;
    margin-bottom: 7px;
    color: var(--terracotta);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.buy-checks p {
    color: var(--brown);
    font-size: 0.82rem;
    line-height: 1.5;
}

.before-buy-content .text-link {
    margin-top: 35px;
}
.finder-preview {
    padding: 130px 6vw;
    background: var(--cocoa);
    color: var(--cream);
}

.finder-heading {
    max-width: 800px;
    margin-bottom: 75px;
}

.finder-heading .eyebrow {
    color: var(--butter);
}

.finder-heading h2 {
    margin-bottom: 25px;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 6vw, 5.8rem);
    font-weight: 400;
    line-height: 0.98;
}

.finder-heading > p:not(.eyebrow) {
    max-width: 600px;
    color: #ddd2c4;
    font-size: 0.95rem;
}

.finder-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    border-top: 1px solid rgba(247, 241, 227, 0.25);
}

.finder-step {
    padding: 30px 35px 35px 0;
    border-bottom: 1px solid rgba(247, 241, 227, 0.25);
}

.finder-step + .finder-step {
    padding-left: 35px;
    border-left: 1px solid rgba(247, 241, 227, 0.25);
}

.finder-step > span {
    display: block;
    margin-bottom: 15px;
    color: var(--butter);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.finder-step h3 {
    min-height: 60px;
    margin-bottom: 25px;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1.15;
}

.finder-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.finder-options button {
    padding: 10px 16px;
    border: 1px solid rgba(247, 241, 227, 0.35);
    background: transparent;
    color: var(--cream);
    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
}

.finder-options button:hover {
    background: var(--butter);
    border-color: var(--butter);
    color: var(--cocoa);
}


.final-cta {
    padding: 140px 6vw;
    background: var(--butter);
    text-align: center;
}

.final-cta .eyebrow {
    color: var(--terracotta);
}

.final-cta h2 {
    max-width: 850px;
    margin: 0 auto 25px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 6vw, 5.8rem);
    font-weight: 400;
    line-height: 0.98;
}

.final-cta > p:not(.eyebrow) {
    max-width: 600px;
    margin: 0 auto 35px;
    color: var(--brown);
    font-size: 0.95rem;
}

.site-footer {
    padding: 75px 6vw 55px;
    background: var(--cocoa);
    color: var(--cream);
}

.footer-main {
    display: flex;
    justify-content: space-between;
    gap: 80px;
}

.footer-brand {
    max-width: 360px;
}

.footer-brand .logo span {
    color: var(--cream);
}

.footer-brand .logo small {
    color: var(--butter);
}

.footer-brand > p {
    margin-top: 25px;
    color: #cfc3b5;
    font-size: 0.82rem;
    line-height: 1.7;
}

.footer-links {
    display: flex;
    gap: 100px;
}

.footer-links > div {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 120px;
}

.footer-links span {
    margin-bottom: 10px;
    color: var(--butter);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.footer-links a {
    color: #ddd2c4;
    text-decoration: none;
    font-size: 0.8rem;
}

.footer-links a:hover {
    color: var(--cream);
}

.copyright-bar {
    padding: 18px 6vw;
    background: #2c211b;
    color: #aa9e91;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-align: center;
}
.finder-hero {
    min-height: 68vh;
    display: flex;
    align-items: center;
    padding: 100px 6vw;
    background: var(--butter);
}

.finder-hero-content {
    max-width: 900px;
}

.finder-hero .eyebrow {
    color: var(--terracotta);
}

.finder-hero h1 {
    max-width: 850px;
    margin-bottom: 30px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(4rem, 8vw, 7.5rem);
    font-weight: 400;
    line-height: 0.92;
}

.finder-hero-content > p:not(.eyebrow) {
    max-width: 620px;
    color: var(--brown);
    font-size: 1rem;
}
.finder-hero {
    min-height: 72vh;
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
    gap: 7vw;
    align-items: center;
    padding: 90px 6vw;
    background: var(--butter);
}

.finder-hero-content {
    max-width: 700px;
}

.finder-hero .eyebrow {
    color: var(--terracotta);
}

.finder-hero h1 {
    max-width: 700px;
    margin-bottom: 30px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 400;
    line-height: 0.92;
}

.finder-hero-content > p:not(.eyebrow) {
    max-width: 570px;
    color: var(--brown);
    font-size: 1rem;
}

.finder-hero-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: end;
}

.finder-hero-images img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}

.finder-hero-images img:nth-child(1) {
    height: 440px;
}

.finder-hero-images img:nth-child(2) {
    height: 400px;
}

.finder-hero-images img:nth-child(3) {
    height: 360px;
}
.finder-question {
    padding: 120px 6vw;
    background: #efe6d4;
    border-top: 1px solid rgba(58, 44, 36, 0.18);
}

.question-heading {
    max-width: 760px;
    margin-bottom: 65px;
}

.question-heading h2 {
    margin-bottom: 20px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1;
}

.question-heading > p:not(.eyebrow) {
    max-width: 560px;
    color: var(--brown);
    font-size: 0.95rem;
}

.question-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.finder-option {
    min-height: 230px;
    padding: 28px 30px 30px 0;
    border: 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    background: transparent;
    color: var(--cocoa);
    font-family: "Inter", sans-serif;
    text-align: left;
    cursor: pointer;
}

.finder-option + .finder-option {
    padding-left: 30px;
    border-left: 1px solid rgba(58, 44, 36, 0.2);
}

.finder-option span {
    display: block;
    margin-bottom: 45px;
    color: var(--ochre);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.finder-option strong {
    display: block;
    margin-bottom: 9px;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1.1;
}

.finder-option small {
    display: block;
    max-width: 220px;
    color: var(--brown);
    font-size: 0.78rem;
    line-height: 1.5;
}

.finder-option:hover {
    background: #efe6d4;
}

.finder-option:hover strong {
    color: var(--terracotta);
}
.finder-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 950px;
    margin-top: 35px;
}

.finder-navigation button {
    border: 0;
    background: transparent;
    color: var(--brown);
    font-family: "Inter", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.finder-navigation button:hover {
    color: var(--terracotta);
}

.finder-restart {
    margin-left: auto;
}
.finder-results {
    display: none;
    padding: 130px 6vw;
    background: var(--cream);
}

.results-intro {
    max-width: 800px;
    margin-bottom: 70px;
}

.results-intro h2 {
    margin-bottom: 22px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.results-intro > p:not(.eyebrow) {
    max-width: 560px;
    color: var(--brown);
    font-size: 0.95rem;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 35px;
    max-width: 1200px;
}

.result-card {
    background: var(--cream);
}

.result-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.result-card-content {
    padding: 28px 30px 32px;
}

.result-card-content h3 {
    margin-bottom: 10px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.1;
}

.result-card-content p {
    color: var(--brown);
    font-size: 0.82rem;
    line-height: 1.6;
}

.results-restart {
    margin-top: 45px;
}
.result-details {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(58, 44, 36, 0.15);
}

.result-details span {
    display: block;
    margin-bottom: 3px;
    color: var(--terracotta);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.result-details strong {
    display: block;
    margin-bottom: 13px;
    color: var(--brown);
    font-size: 0.75rem;
    font-weight: 500;
}
.result-match {
    margin-bottom: 22px;
    color: var(--brown);
    font-size: 0.82rem;
    line-height: 1.55;
}
.match-label {
    display: block;
    margin-bottom: 8px;
    color: var(--terracotta);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.plant-detail-hero {
    display: grid;
    grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.05fr);
    gap: 8vw;
    align-items: center;
    padding: 100px 6vw;
    background: var(--cream);
}

.plant-detail-image img {
    width: 100%;
    max-height: 650px;
    object-fit: cover;
    display: block;
}

.plant-detail-content {
    max-width: 650px;
}

.plant-detail-content h1 {
    margin-bottom: 25px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 400;
    line-height: 0.92;
}

.plant-detail-intro {
    max-width: 520px;
    color: var(--brown);
    font-size: 1rem;
    line-height: 1.7;
}
.plant-snapshot {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 6vw;
    border-top: 1px solid rgba(58, 44, 36, 0.2);
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
}

.snapshot-item {
    padding: 28px 25px 30px 0;
}

.snapshot-item + .snapshot-item {
    padding-left: 25px;
    border-left: 1px solid rgba(58, 44, 36, 0.2);
}

.snapshot-item span {
    display: block;
    margin-bottom: 9px;
    color: var(--terracotta);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.snapshot-item strong {
    display: block;
    color: var(--cocoa);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.5;
}
.plant-before-buy {
    padding: 120px 6vw;
    background: #efe6d4;
}

.before-buy-heading {
    max-width: 720px;
    margin-bottom: 70px;
}

.before-buy-heading h2 {
    margin-bottom: 22px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1;
}

.before-buy-heading > p:not(.eyebrow) {
    max-width: 560px;
    color: var(--brown);
    font-size: 0.95rem;
}

.before-buy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.before-buy-grid > div {
    padding: 28px 30px 30px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
}

.before-buy-grid > div + div {
    padding-left: 30px;
    border-left: 1px solid rgba(58, 44, 36, 0.2);
}

.before-buy-grid span {
    display: block;
    margin-bottom: 12px;
    color: var(--terracotta);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.before-buy-grid p {
    max-width: 330px;
    color: var(--brown);
    font-size: 0.85rem;
    line-height: 1.6;
}
.plant-care-basics {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(400px, 1.2fr);
    gap: 9vw;
    align-items: start;
    padding: 130px 6vw;
    background: var(--cream);
}

.care-basics-heading {
    max-width: 560px;
}

.care-basics-heading h2 {
    margin-bottom: 22px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.care-basics-heading > p:not(.eyebrow) {
    max-width: 500px;
    color: var(--brown);
    font-size: 0.95rem;
}

.care-basics-list {
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.care-basics-item {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
}

.care-basics-item > span {
    color: var(--terracotta);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.care-basics-item h3 {
    margin-bottom: 7px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1.15;
}

.care-basics-item p {
    max-width: 500px;
    color: var(--brown);
    font-size: 0.84rem;
    line-height: 1.6;
}
.plant-problems {
    padding: 130px 6vw;
    background: #efe6d4;
}

.problems-heading {
    max-width: 720px;
    margin-bottom: 65px;
}

.problems-heading h2 {
    margin-bottom: 22px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.problems-heading > p:not(.eyebrow) {
    max-width: 560px;
    color: var(--brown);
    font-size: 0.95rem;
}

.problems-list {
    max-width: 1050px;
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.problems-list a {
    display: grid;
    grid-template-columns: 55px 1fr 30px;
    gap: 20px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    color: var(--cocoa);
    text-decoration: none;
}

.problems-list a > span {
    color: var(--terracotta);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.problems-list h3 {
    margin-bottom: 5px;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1.15;
}

.problems-list p {
    color: var(--brown);
    font-size: 0.82rem;
}

.problems-list a > strong {
    color: var(--terracotta);
    font-size: 1.2rem;
    font-weight: 400;
    text-align: right;
}

.problems-list a:hover h3,
.problems-list a:hover > strong {
    color: var(--ochre);
}
.good-match {
    padding: 130px 6vw;
    background: var(--butter);
}

.good-match-content {
    max-width: 760px;
}

.good-match-content h2 {
    margin-bottom: 24px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.good-match-content > p:not(.eyebrow) {
    max-width: 560px;
    margin-bottom: 30px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.7;
}

.good-match-content .text-link {
    margin-top: 0;
}
/* Condensed plant detail spacing */

.plant-detail-hero {
    padding-top: 65px;
    padding-bottom: 65px;
}

.plant-before-buy {
    padding-top: 80px;
    padding-bottom: 80px;
}

.plant-care-basics {
    padding-top: 85px;
    padding-bottom: 85px;
}

.plant-problems {
    padding-top: 85px;
    padding-bottom: 85px;
}

.good-match {
    padding-top: 85px;
    padding-bottom: 85px;
}
.library-hero {
    min-height: 62vh;
    display: flex;
    align-items: center;
    padding: 80px 6vw;
    background: var(--cream);
}

.library-hero-content {
    max-width: 850px;
}

.library-hero .eyebrow {
    color: var(--terracotta);
}

.library-hero h1 {
    max-width: 850px;
    margin-bottom: 28px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 400;
    line-height: 0.92;
}

.library-hero-content > p:not(.eyebrow) {
    max-width: 620px;
    color: var(--brown);
    font-size: 1rem;
    line-height: 1.7;
}
.library-hero {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(380px, 1.1fr);
    gap: 8vw;
    align-items: center;
}

.library-hero-image {
    display: flex;
    justify-content: flex-end;
}

.library-hero-image img {
    width: 100%;
    max-width: 520px;
    height: 520px;
    object-fit: cover;
    display: block;
}
.library-browse {
    padding: 90px 6vw;
    background: #efe6d4;
}

.library-browse-heading {
    max-width: 760px;
    margin-bottom: 55px;
}

.library-browse-heading h2 {
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.library-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.library-categories a {
    position: relative;
    display: block;
    min-height: 210px;
    padding: 28px 55px 30px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    color: var(--cocoa);
    text-decoration: none;
}

.library-categories a:nth-child(even) {
    padding-left: 35px;
    border-left: 1px solid rgba(58, 44, 36, 0.2);
}

.library-categories a > span {
    display: block;
    margin-bottom: 35px;
    color: var(--terracotta);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.library-categories h3 {
    margin-bottom: 8px;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.1;
}

.library-categories p {
    max-width: 390px;
    color: var(--brown);
    font-size: 0.82rem;
    line-height: 1.55;
}

.library-categories strong {
    position: absolute;
    right: 25px;
    bottom: 30px;
    color: var(--terracotta);
    font-size: 1.15rem;
    font-weight: 400;
}

.library-categories a:hover h3,
.library-categories a:hover strong {
    color: var(--ochre);
}
.plant-collection {
    padding: 100px 6vw;
    background: var(--cream);
}

.plant-collection-heading {
    max-width: 760px;
    margin-bottom: 55px;
}

.plant-collection-heading h2 {
    margin-bottom: 20px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.plant-collection-heading > p:not(.eyebrow) {
    max-width: 560px;
    color: var(--brown);
    font-size: 0.95rem;
}

.plant-collection-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 25px;
}

.plant-library-card {
    display: block;
    color: var(--cocoa);
    text-decoration: none;
}

.plant-library-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.plant-library-card > div {
    padding: 20px 5px 10px;
}

.plant-library-card span {
    display: block;
    margin-bottom: 7px;
    color: var(--terracotta);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.plant-library-card h3 {
    margin-bottom: 7px;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1.1;
}

.plant-library-card p {
    color: var(--brown);
    font-size: 0.8rem;
    line-height: 1.55;
}

.plant-library-card:hover h3 {
    color: var(--terracotta);
}
.plant-filters {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 65px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
}

.plant-filters label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 150px;
}

.plant-filters label span {
    color: var(--terracotta);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.plant-filters select {
    min-width: 150px;
    padding: 10px 30px 10px 12px;
    border: 1px solid rgba(58, 44, 36, 0.25);
    border-radius: 0;
    background: var(--cream);
    color: var(--cocoa);
    font-family: "Inter", sans-serif;
    font-size: 0.78rem;
    cursor: pointer;
}

.plant-filters select:focus {
    outline: 1px solid var(--ochre);
    outline-offset: 2px;
}

#clear-filters {
    padding: 10px 0;
    margin-left: auto;
    border: 0;
    border-bottom: 1px solid var(--ochre);
    background: transparent;
    color: var(--cocoa);
    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

#clear-filters:hover {
    color: var(--terracotta);
    border-color: var(--terracotta);
}
.care-page-hero {
    display: grid;
    grid-template-columns: minmax(500px, 1fr) minmax(500px, 1fr);
    gap: 5vw;
    align-items: center;
    padding: 90px 6vw;
    background: #dfe3d5;
}

.care-page-hero-content {
    max-width: 800px;
}

.care-page-hero .eyebrow {
    color: var(--terracotta);
}

.care-page-hero h1 {
    max-width: 800px;
    margin-bottom: 28px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(4rem, 6vw, 6.5rem);
    font-weight: 400;
    line-height: 0.92;
}

.care-page-hero-content > p:not(.eyebrow) {
    max-width: 520px;
    color: var(--brown);
    font-size: 1rem;
    line-height: 1.7;
}

.care-page-hero-image {
    display: flex;
    justify-content: flex-start;
}

.care-page-hero-image img {
    width: 100%;
    max-width: 600px;
    height: 540px;
    object-fit: cover;
    display: block;
}
.care-intro {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(350px, 1.1fr);
    gap: 9vw;
    align-items: start;
    padding: 110px 6vw;
    background: var(--cream);
    border-top: 1px solid rgba(58, 44, 36, 0.15);
}

.care-intro-heading {
    max-width: 620px;
}

.care-intro-heading .eyebrow {
    color: var(--terracotta);
}

.care-intro-heading h2 {
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.care-intro-copy {
    max-width: 540px;
    padding-top: 45px;
}

.care-intro-copy p {
    margin-bottom: 24px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.75;
}

.care-intro-copy p:last-child {
    margin-bottom: 0;
}
.care-basics-page {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(400px, 1.25fr);
    gap: 9vw;
    align-items: start;
    padding: 120px 6vw;
    background: #efe6d4;
}

.care-basics-page-heading {
    max-width: 560px;
}

.care-basics-page-heading .eyebrow {
    color: var(--terracotta);
}

.care-basics-page-heading h2 {
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.care-basics-page-list {
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.care-basics-page-list a {
    display: grid;
    grid-template-columns: 55px 1fr 30px;
    gap: 20px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    color: var(--cocoa);
    text-decoration: none;
}

.care-basics-page-list a > span {
    color: var(--terracotta);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.care-basics-page-list h3 {
    margin-bottom: 6px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.15;
}

.care-basics-page-list p {
    max-width: 500px;
    color: var(--brown);
    font-size: 0.83rem;
    line-height: 1.6;
}

.care-basics-page-list a > strong {
    color: var(--terracotta);
    font-size: 1.2rem;
    font-weight: 400;
    text-align: right;
}

.care-basics-page-list a:hover h3,
.care-basics-page-list a:hover > strong {
    color: var(--ochre);
}
.plant-sos-preview {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(400px, 1.15fr);
    gap: 9vw;
    align-items: start;
    padding: 120px 6vw;
    background: var(--cream);
}

.sos-heading {
    max-width: 600px;
}

.sos-heading .eyebrow {
    color: var(--terracotta);
}

.sos-heading h2 {
    margin-bottom: 22px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.sos-heading > p:not(.eyebrow) {
    max-width: 500px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.7;
}

.sos-list {
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.sos-list a {
    display: grid;
    grid-template-columns: 55px 1fr 30px;
    gap: 20px;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    color: var(--cocoa);
    text-decoration: none;
}

.sos-list a > span {
    color: var(--terracotta);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.sos-list h3 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 400;
}

.sos-list a > strong {
    color: var(--terracotta);
    font-size: 1.2rem;
    font-weight: 400;
    text-align: right;
}

.sos-list a:hover h3,
.sos-list a:hover > strong {
    color: var(--ochre);
}
.care-reality {
    padding: 130px 6vw;
    background: #e8d9a8;
    text-align: center;
}


.care-reality .eyebrow {
    margin-bottom: 22px;
    color: var(--terracotta);
}

.care-reality h2 {
    max-width: 850px;
    margin: 0 auto 25px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 400;
    line-height: 0.95;
}

.care-reality > p:not(.eyebrow) {
    max-width: 620px;
    margin: 0 auto 28px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.75;
}

.care-reality .text-link {
    color: var(--cocoa);
}

.care-reality .text-link:hover {
    color: var(--terracotta);
}
.care-final-cta {
    padding: 120px 6vw 130px;
    background: var(--cream);
    text-align: center;
}

.care-final-cta .eyebrow {
    margin-bottom: 20px;
    color: var(--terracotta);
}

.care-final-cta h2 {
    max-width: 850px;
    margin: 0 auto 35px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 400;
    line-height: 0.95;
}

.care-final-cta .button-primary {
    display: inline-block;
}
.plant-sos {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(400px, 1.2fr);
    gap: 9vw;
    align-items: start;
    padding: 110px 6vw;
    background: #f1eadc;
}

.plant-sos-heading {
    max-width: 560px;
}

.plant-sos-heading .eyebrow {
    color: var(--terracotta);
}

.plant-sos-heading h2 {
    margin-bottom: 22px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.plant-sos-heading > p:not(.eyebrow) {
    max-width: 500px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.7;
}

.plant-sos-list {
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.plant-sos-list details {
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
}

.plant-sos-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 23px 0;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.65rem;
    font-weight: 400;
    cursor: pointer;
    list-style: none;
}

.plant-sos-list summary::-webkit-details-marker {
    display: none;
}

.plant-sos-list summary strong {
    color: var(--terracotta);
    font-family: "Inter", sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
}

.plant-sos-list details[open] summary strong {
    transform: rotate(45deg);
}

.sos-answer {
    max-width: 650px;
    padding: 0 45px 25px 0;
}

.sos-answer p {
    color: var(--brown);
    font-size: 0.85rem;
    line-height: 1.7;
}

.plant-sos-list summary:hover {
    color: var(--terracotta);
}
@media (max-width: 900px) {

    .care-page-hero,
    .care-intro,
    .care-basics-page,
    .plant-sos {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .care-page-hero {
        padding: 70px 6vw;
    }

    .care-page-hero-content,
    .care-intro-heading,
    .care-basics-page-heading,
    .plant-sos-heading {
        max-width: 100%;
    }

    .care-page-hero-image {
        justify-content: flex-start;
    }

    .care-page-hero-image img {
        max-width: 100%;
        height: 460px;
    }

    .care-intro {
        padding: 80px 6vw;
    }

    .care-intro-copy {
        padding-top: 0;
        max-width: 650px;
    }

    .care-basics-page,
    .plant-sos {
        padding: 85px 6vw;
    }

    .care-reality {
        padding: 90px 6vw;
    }

    .care-final-cta {
        padding: 90px 6vw 100px;
    }

}
.plant-sos-list details[open] {
    padding-bottom: 2px;
}

.plant-sos-list details[open] summary {
    color: var(--terracotta);
}

.sos-answer {
    padding-bottom: 20px;
}
.sos-guides {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(58, 44, 36, 0.12);
}

.sos-guides::before {
    content: "Related Guides";
    width: 100%;
    color: var(--terracotta);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sos-guides a {
    color: var(--cocoa);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}

.sos-guides a:hover {
    color: var(--terracotta);
}
.guides-hero {
    display: grid;
    grid-template-columns: minmax(500px, 1fr) minmax(420px, 0.9fr);
    gap: 7vw;
    align-items: center;
    padding: 90px 6vw;
    background: var(--cream);
}

.guides-hero-content {
    max-width: 760px;
}

.guides-hero .eyebrow {
    margin-bottom: 22px;
    color: var(--terracotta);
}

.guides-hero h1 {
    max-width: 760px;
    margin-bottom: 28px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(4.5rem, 7vw, 7rem);
    font-weight: 400;
    line-height: 0.9;
}

.guides-hero-content > p:not(.eyebrow) {
    max-width: 580px;
    color: var(--brown);
    font-size: 1rem;
    line-height: 1.75;
}

.guides-hero-image {
    display: flex;
    justify-content: flex-end;
}

.guides-hero-image img {
    width: 100%;
    max-width: 500px;
    height: 560px;
    object-fit: cover;
    display: block;
}
.guide-feature {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(400px, 1.2fr);
    gap: 9vw;
    align-items: start;
    padding: 120px 6vw;
    background: var(--cream);
    border-top: 1px solid rgba(58, 44, 36, 0.15);
}

.guide-feature-heading {
    max-width: 560px;
}

.guide-feature-heading .eyebrow {
    margin-bottom: 20px;
    color: var(--terracotta);
}

.guide-feature-heading h2 {
    margin-bottom: 25px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.2rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.95;
}

.guide-feature-heading > p:not(.eyebrow) {
    max-width: 500px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.75;
}

.guide-feature-list {
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.guide-feature-item {
    display: grid;
    grid-template-columns: 1fr 30px;
    gap: 25px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    color: var(--cocoa);
    text-decoration: none;
}

.guide-feature-item span {
    display: block;
    margin-bottom: 8px;
    color: var(--terracotta);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.13em;
}

.guide-feature-item h3 {
    margin-bottom: 7px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.15;
}

.guide-feature-item p {
    max-width: 540px;
    color: var(--brown);
    font-size: 0.83rem;
    line-height: 1.6;
}

.guide-feature-item strong {
    color: var(--terracotta);
    font-size: 1.15rem;
    font-weight: 400;
    text-align: right;
}

.guide-feature-item:hover h3,
.guide-feature-item:hover strong {
    color: var(--ochre);
}
.guide-lifestyle {
    display: grid;
    grid-template-columns: minmax(380px, 0.95fr) minmax(380px, 1.05fr);
    gap: 8vw;
    align-items: center;
    padding: 120px 6vw;
    background: #efe6d4;
}

.guide-lifestyle-image img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
}

.guide-lifestyle-content {
    max-width: 620px;
}

.guide-lifestyle-content .eyebrow {
    margin-bottom: 20px;
    color: var(--terracotta);
}

.guide-lifestyle-content h2 {
    margin-bottom: 25px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.2rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.95;
}

.guide-lifestyle-content > p:not(.eyebrow) {
    max-width: 520px;
    margin-bottom: 35px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.75;
}

.guide-lifestyle-links {
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.guide-lifestyle-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    color: var(--cocoa);
    text-decoration: none;
    font-size: 0.85rem;
}

.guide-lifestyle-links strong {
    color: var(--terracotta);
    font-weight: 400;
}

.guide-lifestyle-links a:hover {
    color: var(--terracotta);
}
.guide-style {
    padding: 120px 6vw;
    background: var(--cream);
}

.guide-style-heading {
    max-width: 700px;
    margin-bottom: 55px;
}

.guide-style-heading .eyebrow {
    margin-bottom: 20px;
    color: var(--terracotta);
}

.guide-style-heading h2 {
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.2rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.95;
}

.guide-style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.guide-style-card {
    display: block;
    color: var(--cocoa);
    text-decoration: none;
}

.guide-style-card img {
    width: 100%;
    height: 390px;
    object-fit: cover;
    display: block;
    margin-bottom: 20px;
}

.guide-style-card div {
    padding: 0 4px;
}

.guide-style-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--terracotta);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.guide-style-card h3 {
    margin-bottom: 8px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1.1;
}

.guide-style-card p {
    color: var(--brown);
    font-size: 0.82rem;
    line-height: 1.6;
}

.guide-style-card:hover h3 {
    color: var(--terracotta);
}
.guide-start {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(400px, 1.2fr);
    gap: 9vw;
    align-items: start;
    padding: 120px 6vw;
    background: #f1eadc;
}

.guide-start-heading {
    max-width: 560px;
}

.guide-start-heading .eyebrow {
    margin-bottom: 20px;
    color: var(--terracotta);
}

.guide-start-heading h2 {
    margin-bottom: 25px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.2rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.95;
}

.guide-start-heading > p:not(.eyebrow) {
    max-width: 500px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.75;
}

.guide-start-list {
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.guide-start-item {
    display: grid;
    grid-template-columns: 1fr 30px;
    gap: 25px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    color: var(--cocoa);
    text-decoration: none;
}

.guide-start-item span {
    display: block;
    margin-bottom: 8px;
    color: var(--terracotta);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.13em;
}

.guide-start-item h3 {
    margin-bottom: 7px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.15;
}

.guide-start-item p {
    max-width: 540px;
    color: var(--brown);
    font-size: 0.83rem;
    line-height: 1.6;
}

.guide-start-item strong {
    color: var(--terracotta);
    font-size: 1.15rem;
    font-weight: 400;
    text-align: right;
}

.guide-start-item:hover h3,
.guide-start-item:hover strong {
    color: var(--ochre);
}
.guides-final-cta {
    padding: 130px 6vw 140px;
    background: #e8d9a8;
    text-align: center;
}

.guides-final-cta .eyebrow {
    margin-bottom: 20px;
    color: var(--terracotta);
}

.guides-final-cta h2 {
    max-width: 850px;
    margin: 0 auto 25px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 400;
    line-height: 0.95;
}

.guides-final-cta > p:not(.eyebrow) {
    max-width: 600px;
    margin: 0 auto 32px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.75;
}

.guides-final-cta .button-primary {
    display: inline-block;
}
@media (max-width: 900px) {

    .guides-hero,
    .guide-feature,
    .guide-lifestyle,
    .guide-start {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .guides-hero {
        padding: 70px 6vw;
    }

    .guides-hero-content,
    .guide-feature-heading,
    .guide-lifestyle-content,
    .guide-start-heading {
        max-width: 100%;
    }

    .guides-hero h1 {
        max-width: 700px;
    }

    .guides-hero-image {
        justify-content: flex-start;
    }

    .guides-hero-image img {
        max-width: 100%;
        height: 460px;
    }

    .guide-feature,
    .guide-lifestyle,
    .guide-start {
        padding: 85px 6vw;
    }

    .guide-lifestyle-image img {
        height: 460px;
    }

    .guide-style {
        padding: 85px 6vw;
    }

    .guide-style-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .guide-style-card img {
        height: 460px;
    }

    .guides-final-cta {
        padding: 90px 6vw 100px;
    }

}
.resources-hero {
    display: grid;
    grid-template-columns: minmax(500px, 1fr) minmax(420px, 0.9fr);
    gap: 7vw;
    align-items: center;
    padding: 90px 6vw;
    background: var(--cream);
}

.resources-hero-content {
    max-width: 760px;
}

.resources-hero .eyebrow {
    margin-bottom: 22px;
    color: var(--terracotta);
}

.resources-hero h1 {
    max-width: 760px;
    margin-bottom: 28px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(4.5rem, 7vw, 7rem);
    font-weight: 400;
    line-height: 0.9;
}

.resources-hero-content > p:not(.eyebrow) {
    max-width: 580px;
    color: var(--brown);
    font-size: 1rem;
    line-height: 1.75;
}

.resources-hero-image {
    display: flex;
    justify-content: flex-end;
}

.resources-hero-image img {
    width: 100%;
    max-width: 500px;
    height: 560px;
    object-fit: cover;
    display: block;
}
.resource-planning {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(400px, 1.2fr);
    gap: 9vw;
    align-items: start;
    padding: 120px 6vw;
    background: #efe6d4;
}

.resource-planning-heading {
    max-width: 560px;
}

.resource-planning-heading .eyebrow {
    margin-bottom: 20px;
    color: var(--terracotta);
}

.resource-planning-heading h2 {
    margin-bottom: 25px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.2rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.95;
}

.resource-planning-heading > p:not(.eyebrow) {
    max-width: 500px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.75;
}

.resource-planning-list {
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.resource-planning-item {
    display: grid;
    grid-template-columns: 1fr 30px;
    gap: 25px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    color: var(--cocoa);
    text-decoration: none;
}

.resource-planning-item span {
    display: block;
    margin-bottom: 8px;
    color: var(--terracotta);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.13em;
}

.resource-planning-item h3 {
    margin-bottom: 7px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.15;
}

.resource-planning-item p {
    max-width: 540px;
    color: var(--brown);
    font-size: 0.83rem;
    line-height: 1.6;
}

.resource-planning-item strong {
    color: var(--terracotta);
    font-size: 1.15rem;
    font-weight: 400;
    text-align: right;
}

.resource-planning-item:hover h3,
.resource-planning-item:hover strong {
    color: var(--ochre);
}
.resource-reference {
    padding: 120px 6vw;
    background: var(--cream);
}

.resource-reference-heading {
    max-width: 700px;
    margin-bottom: 55px;
}

.resource-reference-heading .eyebrow {
    margin-bottom: 20px;
    color: var(--terracotta);
}

.resource-reference-heading h2 {
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.2rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.95;
}

.resource-reference-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.resource-reference-card {
    min-height: 330px;
    padding: 32px 30px;
    border: 1px solid rgba(58, 44, 36, 0.2);
    background: #f7f1e3;
    color: var(--cocoa);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.resource-reference-card:hover {
    transform: translateY(-4px);
    border-color: var(--ochre);
}

.resource-reference-card span {
    display: block;
    margin-bottom: 35px;
    color: var(--terracotta);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.resource-reference-card h3 {
    max-width: 250px;
    margin-bottom: 15px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
}

.resource-reference-card p {
    max-width: 300px;
    margin-bottom: 30px;
    color: var(--brown);
    font-size: 0.83rem;
    line-height: 1.65;
}

.resource-reference-card strong {
    color: var(--cocoa);
    font-size: 0.72rem;
    font-weight: 600;
}

.resource-reference-card:hover strong {
    color: var(--terracotta);
}
.resource-setup {
    display: grid;
    grid-template-columns: minmax(380px, 0.95fr) minmax(380px, 1.05fr);
    gap: 8vw;
    align-items: center;
    padding: 120px 6vw;
    background: #f1eadc;
}

.resource-setup-image img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
}

.resource-setup-content {
    max-width: 620px;
}

.resource-setup-content .eyebrow {
    margin-bottom: 20px;
    color: var(--terracotta);
}

.resource-setup-content h2 {
    margin-bottom: 25px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.2rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.95;
}

.resource-setup-content > p:not(.eyebrow) {
    max-width: 520px;
    margin-bottom: 35px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.75;
}

.resource-setup-list {
    border-top: 1px solid rgba(58, 44, 36, 0.2);
}

.resource-setup-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
    color: var(--cocoa);
    text-decoration: none;
    font-size: 0.85rem;
}

.resource-setup-list strong {
    color: var(--terracotta);
    font-weight: 400;
}

.resource-setup-list a:hover {
    color: var(--terracotta);
}
.resource-track {
    padding: 120px 6vw;
    background: var(--cream);
}

.resource-track-heading {
    max-width: 720px;
    margin-bottom: 55px;
}

.resource-track-heading .eyebrow {
    margin-bottom: 20px;
    color: var(--terracotta);
}

.resource-track-heading h2 {
    max-width: 700px;
    margin-bottom: 25px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.2rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.95;
}

.resource-track-heading > p:not(.eyebrow) {
    max-width: 540px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.75;
}

.resource-track-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.resource-track-card {
    min-height: 300px;
    padding: 32px 30px;
    border-top: 2px solid var(--ochre);
    background: #f7f1e3;
    color: var(--cocoa);
    text-decoration: none;
}

.resource-track-card span {
    display: block;
    margin-bottom: 35px;
    color: var(--terracotta);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.resource-track-card h3 {
    margin-bottom: 15px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
}

.resource-track-card p {
    max-width: 310px;
    margin-bottom: 30px;
    color: var(--brown);
    font-size: 0.83rem;
    line-height: 1.65;
}

.resource-track-card strong {
    color: var(--cocoa);
    font-size: 0.72rem;
    font-weight: 600;
}

.resource-track-card:hover strong {
    color: var(--terracotta);
}
.resources-final-cta {
    padding: 130px 6vw 140px;
    background: #e8d9a8;
    text-align: center;
}

.resources-final-cta .eyebrow {
    margin-bottom: 20px;
    color: var(--terracotta);
}

.resources-final-cta h2 {
    max-width: 850px;
    margin: 0 auto 25px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 400;
    line-height: 0.95;
}

.resources-final-cta > p:not(.eyebrow) {
    max-width: 600px;
    margin: 0 auto 32px;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.75;
}

.resources-final-cta .button-primary {
    display: inline-block;
}
@media (max-width: 900px) {

    .resources-hero,
    .resource-planning,
    .resource-setup {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .resources-hero {
        padding: 70px 6vw;
    }

    .resources-hero-content,
    .resource-planning-heading,
    .resource-setup-content {
        max-width: 100%;
    }

    .resources-hero-image {
        justify-content: flex-start;
    }

    .resources-hero-image img {
        max-width: 100%;
        height: 460px;
    }

    .resource-planning,
    .resource-setup {
        padding: 85px 6vw;
    }

    .resource-reference,
    .resource-track {
        padding: 85px 6vw;
    }

    .resource-reference-grid,
    .resource-track-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .resource-reference-card,
    .resource-track-card {
        min-height: auto;
    }

    .resource-setup-image img {
        height: 460px;
    }

    .resources-final-cta {
        padding: 90px 6vw 100px;
    }

}
.care-intro h2 {
    position: relative !important;
    transform: none !important;
    height: auto !important;
    margin-bottom: 30px !important;
    line-height: 1.08 !important;
}

.care-intro > p:not(.eyebrow) {
    position: relative !important;
    transform: none !important;
    height: auto !important;
    margin-top: 0 !important;
    line-height: 1.6 !important;
}
.care-preview .care-intro {
    position: static !important;
    display: block !important;
}

.care-preview .care-intro h2 {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    transform: none !important;
    float: none !important;
    line-height: 1.1 !important;
}

.care-preview .care-intro > p:not(.eyebrow) {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    transform: none !important;
    float: none !important;
    line-height: 1.6 !important;
}
.care-preview {
    align-items: start;
}


.care-intro .eyebrow {
    margin: 0 0 8px !important;
}

.care-intro h2 {
    margin: 0 !important;
}

.care-intro > p:not(.eyebrow) {
    margin-top: 18px !important;
}
/* =========================================
ABOUT PAGE
========================================= */

.about-page {
background: var(--cream);
color: var(--cocoa);
}

/* HERO */

.about-hero {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
gap: 8vw;
align-items: end;
padding: 120px 6vw 110px;
border-bottom: 1px solid rgba(58, 44, 36, 0.14);
}

.about-hero-intro {
max-width: 760px;
}

.about-hero-intro h1 {
margin: 18px 0 0;
color: var(--cocoa);
font-family: "DM Serif Display", Georgia, serif;
font-size: clamp(3.5rem, 7vw, 7rem);
font-weight: 400;
line-height: 0.95;
letter-spacing: -0.025em;
}

.about-hero-note {
max-width: 430px;
padding-bottom: 8px;
}

.about-hero-note p {
margin: 0;
color: var(--brown);
font-size: 1rem;
line-height: 1.8;
}

/* STORY */

.about-story {
display: grid;
grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
gap: 7vw;
max-width: 1100px;
margin: 0 auto;
padding: 110px 6vw;
}

.about-story-label {
padding-top: 8px;
}

.about-story-label span {
color: var(--terracotta);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.16em;
}

.about-story-content {
max-width: 680px;
}

.about-story-content p {
margin: 0 0 28px;
color: var(--brown);
font-size: 1rem;
line-height: 1.85;
}

.about-story-content p:first-child {
color: var(--cocoa);
font-family: "DM Serif Display", Georgia, serif;
font-size: clamp(1.7rem, 2.5vw, 2.35rem);
line-height: 1.25;
}

.about-story-content p:last-child {
margin-bottom: 0;
}

/* CLOSING */

.about-closing {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
gap: 8vw;
align-items: center;
padding: 100px 6vw;
background: var(--ochre);
}

.about-closing h2 {
margin: 16px 0 0;
color: var(--cocoa);
font-family: "DM Serif Display", Georgia, serif;
font-size: clamp(3rem, 5vw, 5rem);
font-weight: 400;
line-height: 0.98;
}

.about-closing-text {
max-width: 500px;
}

.about-closing-text p {
margin: 0 0 22px;
color: var(--cocoa);
font-size: 0.95rem;
line-height: 1.75;
}

.about-closing-text p:last-child {
margin-bottom: 0;
}

/* MOBILE */

@media (max-width: 800px) {

```
.about-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 90px 6vw 75px;
}

.about-hero-intro h1 {
    font-size: clamp(3.2rem, 14vw, 5rem);
}

.about-hero-note {
    max-width: 560px;
}

.about-story {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 80px 6vw;
}

.about-story-content {
    max-width: 650px;
}

.about-closing {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px 6vw;
}
```

}

@media (max-width: 500px) {

```
.about-hero {
    padding-top: 70px;
}

.about-story-content p:first-child {
    font-size: 1.7rem;
}

.about-closing h2 {
    font-size: 3rem;
}
```

}
/* =========================================
   CONTACT PAGE
   ========================================= */

.contact-page {
    background: var(--cream);
    color: var(--cocoa);
}


/* HERO */

.contact-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 8vw;
    align-items: end;
    padding: 120px 6vw 110px;
    border-bottom: 1px solid rgba(58, 44, 36, 0.14);
}

.contact-hero-intro {
    max-width: 780px;
}

.contact-hero-intro h1 {
    margin: 18px 0 0;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.025em;
}

.contact-hero-note {
    max-width: 430px;
    padding-bottom: 8px;
}

.contact-hero-note p {
    margin: 0;
    color: var(--brown);
    font-size: 1rem;
    line-height: 1.8;
}


/* MAIN CONTENT */

.contact-content {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1fr);
    gap: 6vw;
    max-width: 1200px;
    margin: 0 auto;
    padding: 110px 6vw;
    align-items: start;
}


/* IMAGE */

.contact-image {
    width: 100%;
    overflow: hidden;
}

.contact-image img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
}


/* TEXT + EMAIL */

.contact-main {
    max-width: 680px;
}

.contact-main > p {
    margin: 0 0 30px;
    color: var(--brown);
    font-size: 1rem;
    line-height: 1.85;
}


/* EMAIL CARD */

.contact-card {
    margin: 50px 0;
    padding: 38px 40px;
    background: var(--ochre);
}

.contact-card-label {
    margin: 0 0 14px;
    color: var(--cocoa);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.contact-email {
    display: inline-block;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.45rem, 3vw, 2.35rem);
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-email:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}


/* BOTTOM SECTION */

.contact-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    gap: 8vw;
    align-items: center;
    padding: 100px 6vw;
    background: var(--cocoa);
}

.contact-bottom .eyebrow {
    color: var(--ochre);
}

.contact-bottom h2 {
    margin: 16px 0 0;
    color: var(--cream);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.contact-bottom > p {
    max-width: 500px;
    margin: 0;
    color: var(--cream);
    font-size: 0.95rem;
    line-height: 1.75;
    opacity: 0.85;
}


/* MOBILE */

@media (max-width: 800px) {

    .contact-hero {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 90px 6vw 75px;
    }

    .contact-hero-intro h1 {
        font-size: clamp(3.2rem, 14vw, 5rem);
    }

    .contact-hero-note {
        max-width: 560px;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 80px 6vw;
    }

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

    .contact-main {
        max-width: 650px;
    }

    .contact-card {
        padding: 30px;
    }

    .contact-bottom {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 80px 6vw;
    }

}


@media (max-width: 500px) {

    .contact-hero {
        padding-top: 70px;
    }

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

    .contact-email {
        font-size: 1.45rem;
    }

    .contact-bottom h2 {
        font-size: 3rem;
    }

}

/* =========================================================
   WIDE-SCREEN LAYOUT NORMALIZATION
   Keeps Root & Room composed on 1920–2560px displays.
   ========================================================= */

@media (min-width: 1441px) {
    .site-header,
    .site-footer,
    .copyright-bar {
        padding-left: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
        padding-right: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
    }

    .hero,
    .finder-hero,
    .plant-detail-hero,
    .library-hero,
    .care-page-hero,
    .about-hero,
    .contact-hero,
    .find-plant-section,
    .plant-sos-preview,
    .plant-library-preview,
    .before-buy,
    .finder-preview,
    .final-cta,
    .finder-question,
    .finder-results,
    .plant-before-buy,
    .plant-care-basics,
    .plant-problems,
    .good-match,
    .library-browse,
    .plant-collection,
    .care-intro,
    .care-basics-page,
    .about-story,
    .about-closing,
    .contact-content,
    .contact-bottom {
        padding-left: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
        padding-right: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
    }

    .hero,
    .find-plant-grid,
    .library-heading,
    .care-preview,
    .before-buy,
    .finder-hero,
    .plant-detail-hero,
    .plant-care-basics,
    .library-hero,
    .care-page-hero,
    .care-intro,
    .care-basics-page,
    .plant-sos-preview,
    .about-hero,
    .about-story,
    .about-closing,
    .contact-hero,
    .contact-content,
    .contact-bottom {
        column-gap: var(--section-gap);
    }

    .plant-snapshot {
        margin-left: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
        margin-right: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
    }

    .hero h1,
    .finder-hero h1,
    .plant-detail-content h1,
    .library-hero h1,
    .care-page-hero h1,
    .about-hero-intro h1,
    .contact-hero-intro h1 {
        font-size: clamp(4rem, 5vw, 6.5rem);
    }
}
/* =========================================
   PLANT CARE INTRO — FINAL LAYOUT
   ========================================= */

.care-page-hero + section.care-intro {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.8fr)
        minmax(400px, 1fr)
        minmax(300px, 0.75fr);

    gap: 60px;
    align-items: center;

    width: min(1400px, calc(100% - 80px));
    max-width: none;
    margin: 0 auto;
    padding: 100px 0;

    background: var(--cream);
    border-top: 1px solid rgba(58, 44, 36, 0.15);
}

/* IMAGE */

.care-page-hero + section.care-intro > .care-intro-image {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.care-page-hero + section.care-intro > .care-intro-image img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
}

/* HEADING */

.care-page-hero + section.care-intro > .care-intro-heading {
    width: 100%;
    max-width: 500px;
    margin: 0;
    padding: 0;
}

.care-page-hero + section.care-intro > .care-intro-heading h2 {
    width: auto;
    max-width: 500px;
    margin: 0;
    padding: 0;

    font-size: clamp(3.4rem, 3.6vw, 4.8rem);
    line-height: 1;
}

/* COPY */

.care-page-hero + section.care-intro > .care-intro-copy {
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 0;
}

.care-page-hero + section.care-intro > .care-intro-copy p {
    width: auto;
    max-width: 420px;
    margin: 0 0 24px;
    line-height: 1.75;
}

.care-page-hero + section.care-intro > .care-intro-copy p:last-child {
    margin-bottom: 0;
}


/* TABLET */

@media (max-width: 1100px) {

    .care-page-hero + section.care-intro {
        grid-template-columns: minmax(280px, 0.8fr) 1fr;
        gap: 50px;
        width: min(900px, calc(100% - 50px));
    }

    .care-page-hero + section.care-intro > .care-intro-image {
        grid-row: 1 / span 2;
    }

    .care-page-hero + section.care-intro > .care-intro-copy {
        grid-column: 2;
    }
}


/* MOBILE */

@media (max-width: 750px) {

    .care-page-hero + section.care-intro {
        display: block;
        width: calc(100% - 40px);
        padding: 70px 0;
    }

    .care-page-hero + section.care-intro > .care-intro-image {
        margin-bottom: 45px;
    }

    .care-page-hero + section.care-intro > .care-intro-image img {
        height: 400px;
    }

    .care-page-hero + section.care-intro > .care-intro-heading {
        margin-bottom: 30px;
    }
}
/* =========================================
   GUIDES PAGE — FEATURE SECTION WIDTH FIX
   ========================================= */

.guide-feature {
    width: min(1400px, calc(100% - 80px));
    max-width: none;
    margin: 0 auto;

    grid-template-columns:
        minmax(380px, 0.8fr)
        minmax(600px, 1.2fr);

    gap: clamp(70px, 6vw, 110px);
    padding-left: 0;
    padding-right: 0;
}

.guide-feature-heading {
    max-width: 500px;
}

.guide-feature-list {
    width: 100%;
    max-width: 700px;
    justify-self: end;
}


/* TABLET */

@media (max-width: 1100px) {

    .guide-feature {
        width: min(900px, calc(100% - 50px));
        grid-template-columns: minmax(300px, 0.8fr) 1fr;
        gap: 50px;
    }

    .guide-feature-list {
        max-width: none;
    }
}


/* MOBILE */

@media (max-width: 750px) {

    .guide-feature {
        display: block;
        width: calc(100% - 40px);
    }

    .guide-feature-heading {
        max-width: 600px;
        margin-bottom: 50px;
    }

    .guide-feature-list {
        max-width: none;
    }
}
/* =========================================
   GUIDES PAGE — WIDE SCREEN CONTAINMENT
   ========================================= */


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

.guides-hero {
    width: min(1400px, calc(100% - 80px));
    max-width: none;
    margin: 0 auto;

    grid-template-columns:
        minmax(500px, 1fr)
        minmax(400px, 0.75fr);

    gap: clamp(70px, 6vw, 110px);

    padding-left: 0;
    padding-right: 0;
}

.guides-hero-content {
    max-width: 620px;
}

.guides-hero-image {
    width: 100%;
    max-width: 520px;
    justify-self: end;
}


/* ---------- PLANTS + YOUR LIFE ---------- */

.guide-lifestyle {
    width: min(1400px, calc(100% - 80px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;

    grid-template-columns:
        minmax(450px, 0.9fr)
        minmax(500px, 1.1fr);

    gap: clamp(70px, 6vw, 110px);

    padding-left: 0;
    padding-right: 0;
}

.guide-lifestyle-image {
    width: 100%;
    max-width: 600px;
}

.guide-lifestyle-content {
    width: 100%;
    max-width: 600px;
}


/* ---------- PLANTS + STYLE ---------- */

.guide-style {
    width: min(1400px, calc(100% - 80px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;

    padding-left: 0;
    padding-right: 0;
}

.guide-style-heading {
    max-width: 650px;
}

.guide-style-grid {
    width: 100%;
}


/* ---------- GETTING STARTED ---------- */

.guide-start {
    width: min(1400px, calc(100% - 80px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;

    grid-template-columns:
        minmax(380px, 0.8fr)
        minmax(600px, 1.2fr);

    gap: clamp(70px, 6vw, 110px);

    padding-left: 0;
    padding-right: 0;
}

.guide-start-heading {
    max-width: 500px;
}

.guide-start-list {
    width: 100%;
    max-width: 700px;
    justify-self: end;
}


/* =========================================
   GUIDES — TABLET
   ========================================= */

@media (max-width: 1100px) {

    .guides-hero,
    .guide-lifestyle,
    .guide-style,
    .guide-start {
        width: min(900px, calc(100% - 50px));
    }

    .guides-hero {
        grid-template-columns: 1fr 0.8fr;
        gap: 50px;
    }

    .guide-lifestyle {
        grid-template-columns: 0.8fr 1fr;
        gap: 50px;
    }

    .guide-start {
        grid-template-columns: minmax(300px, 0.8fr) 1fr;
        gap: 50px;
    }

    .guide-start-list {
        max-width: none;
    }
}


/* =========================================
   GUIDES — MOBILE
   ========================================= */

@media (max-width: 750px) {

    .guides-hero,
    .guide-lifestyle,
    .guide-style,
    .guide-start {
        width: calc(100% - 40px);
    }

    .guides-hero,
    .guide-lifestyle,
    .guide-start {
        display: block;
    }

    .guides-hero-content,
    .guide-lifestyle-image,
    .guide-lifestyle-content,
    .guide-start-heading,
    .guide-start-list {
        max-width: none;
    }

    .guides-hero-content,
    .guide-lifestyle-image,
    .guide-start-heading {
        margin-bottom: 45px;
    }
}
/* =========================================
   RESOURCES PAGE — WIDE SCREEN CONTAINMENT
   ========================================= */


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

.resources-hero {
    width: min(1400px, calc(100% - 80px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;

    grid-template-columns:
        minmax(500px, 1fr)
        minmax(400px, 0.75fr);

    gap: clamp(70px, 6vw, 110px);

    padding-left: 0;
    padding-right: 0;
}

.resources-hero-content {
    max-width: 620px;
}

.resources-hero-image {
    width: 100%;
    max-width: 520px;
    justify-self: end;
}


/* ---------- PLANT PLANNING ---------- */

.resource-planning {
    width: min(1400px, calc(100% - 80px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;

    grid-template-columns:
        minmax(380px, 0.8fr)
        minmax(600px, 1.2fr);

    gap: clamp(70px, 6vw, 110px);

    padding-left: 0;
    padding-right: 0;
}

.resource-planning-heading {
    max-width: 500px;
}

.resource-planning-list {
    width: 100%;
    max-width: 700px;
    justify-self: end;
}


/* ---------- BUILD YOUR SETUP ---------- */

.resource-setup {
    width: min(1400px, calc(100% - 80px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;

    grid-template-columns:
        minmax(450px, 0.9fr)
        minmax(500px, 1.1fr);

    gap: clamp(70px, 6vw, 110px);

    padding-left: 0;
    padding-right: 0;
}

.resource-setup-image {
    width: 100%;
    max-width: 600px;
}

.resource-setup-content {
    width: 100%;
    max-width: 600px;
}


/* =========================================
   RESOURCES — TABLET
   ========================================= */

@media (max-width: 1100px) {

    .resources-hero,
    .resource-planning,
    .resource-setup {
        width: min(900px, calc(100% - 50px));
    }

    .resources-hero {
        grid-template-columns: 1fr 0.8fr;
        gap: 50px;
    }

    .resource-planning {
        grid-template-columns: minmax(300px, 0.8fr) 1fr;
        gap: 50px;
    }

    .resource-planning-list {
        max-width: none;
    }

    .resource-setup {
        grid-template-columns: 0.8fr 1fr;
        gap: 50px;
    }
}


/* =========================================
   RESOURCES — MOBILE
   ========================================= */

@media (max-width: 750px) {

    .resources-hero,
    .resource-planning,
    .resource-setup {
        display: block;
        width: calc(100% - 40px);
    }

    .resources-hero-content,
    .resource-planning-heading,
    .resource-planning-list,
    .resource-setup-image,
    .resource-setup-content {
        max-width: none;
    }

    .resources-hero-content,
    .resource-planning-heading,
    .resource-setup-image {
        margin-bottom: 45px;
    }
}
/* =========================================
   ABOUT PAGE — WHY ROOT & ROOM
   ========================================= */

.about-story {
    display: grid;
    grid-template-columns:
        minmax(400px, 0.9fr)
        minmax(500px, 1.1fr);

    gap: clamp(70px, 6vw, 110px);
    align-items: center;

    width: min(1300px, calc(100% - 80px));
    max-width: none;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}


/* IMAGE */

.about-story-image {
    width: 100%;
}

.about-story-image img {
    display: block;
    width: 100%;
    height: 620px;
    object-fit: cover;
}


/* TEXT */

.about-story-content {
    width: 100%;
    max-width: 620px;
}

.about-story-label {
    width: auto;
    max-width: none;
    margin: 0 0 35px;
}

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


/* TABLET */

@media (max-width: 1100px) {

    .about-story {
        grid-template-columns: minmax(300px, 0.85fr) 1fr;
        gap: 50px;

        width: min(900px, calc(100% - 50px));
    }

    .about-story-image img {
        height: 550px;
    }
}


/* MOBILE */

@media (max-width: 750px) {

    .about-story {
        display: block;
        width: calc(100% - 40px);
    }

    .about-story-image {
        margin-bottom: 45px;
    }

    .about-story-image img {
        height: 450px;
    }

    .about-story-content {
        max-width: none;
    }
}
/* =========================================
   CONTACT PAGE — CLEAN LAYOUT
   ========================================= */

.contact-page {
    background: var(--cream);
}


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

.contact-heading {
    width: min(1200px, calc(100% - 80px));
    margin: 0 auto;
    padding: 120px 0 90px;
}

.contact-heading h1 {
    max-width: 850px;
    margin: 15px 0 30px;

    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(4rem, 5vw, 6rem);
    font-weight: 400;
    line-height: 0.95;
}

.contact-heading-text {
    max-width: 580px;
    margin: 0;

    color: var(--brown);
    font-size: 1rem;
    line-height: 1.7;
}


/* ---------- PHOTO + CONTACT INFO ---------- */

.contact-body {
    display: grid;
    grid-template-columns:
        minmax(420px, 0.9fr)
        minmax(480px, 1.1fr);

    gap: clamp(70px, 7vw, 120px);
    align-items: center;

    width: min(1200px, calc(100% - 80px));
    margin: 0 auto;
    padding: 0 0 120px;
}


.contact-image {
    width: 100%;
}

.contact-image img {
    display: block;
    width: 100%;
    height: 620px;
    object-fit: cover;
}


.contact-details {
    max-width: 570px;
}

.contact-details h2 {
    max-width: 560px;
    margin: 14px 0 30px;

    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 3.5vw, 4.4rem);
    font-weight: 400;
    line-height: 1;
}

.contact-details > p {
    max-width: 520px;
    color: var(--brown);
    line-height: 1.75;
}


/* ---------- EMAIL ---------- */

.contact-email-block {
    margin: 45px 0;
    padding: 30px 0;

    border-top: 1px solid rgba(58, 44, 36, 0.2);
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
}

.contact-email-block span {
    display: block;
    margin-bottom: 12px;

    color: var(--terracotta);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.contact-email-block a {
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.25rem, 1.6vw, 1.7rem);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-email-block a:hover {
    color: var(--terracotta);
}

.contact-small-note {
    font-size: 0.9rem;
}


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

.contact-closing {
    width: min(1200px, calc(100% - 80px));
    margin: 0 auto;
    padding: 90px 0 110px;

    border-top: 1px solid rgba(58, 44, 36, 0.18);
    text-align: center;
}

.contact-closing h2 {
    max-width: 750px;
    margin: 15px auto 25px;

    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 4vw, 5rem);
    font-weight: 400;
    line-height: 1;
}

.contact-closing > p:last-child {
    max-width: 570px;
    margin: 0 auto;

    color: var(--brown);
    line-height: 1.7;
}


/* ---------- TABLET ---------- */

@media (max-width: 1100px) {

    .contact-heading,
    .contact-body,
    .contact-closing {
        width: min(900px, calc(100% - 50px));
    }

    .contact-body {
        grid-template-columns: 0.85fr 1fr;
        gap: 55px;
    }

    .contact-image img {
        height: 540px;
    }
}


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

@media (max-width: 750px) {

    .contact-heading,
    .contact-body,
    .contact-closing {
        width: calc(100% - 40px);
    }

    .contact-heading {
        padding: 80px 0 60px;
    }

    .contact-heading h1 {
        font-size: clamp(3.2rem, 14vw, 4.5rem);
    }

    .contact-body {
        display: block;
        padding-bottom: 80px;
    }

    .contact-image {
        margin-bottom: 50px;
    }

    .contact-image img {
        height: 430px;
    }

    .contact-closing {
        padding: 70px 0 80px;
    }
}
/* ========================================
   LEGAL PAGES
======================================== */

.legal-page {
    background: var(--cream);
    color: var(--brown);
}

.legal-hero {
    width: min(1000px, calc(100% - 80px));
    margin: 0 auto;
    padding: 120px 0 80px;
    border-bottom: 1px solid rgba(58, 44, 36, 0.18);
}

.legal-hero h1 {
    max-width: 800px;
    margin: 12px 0 24px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 400;
    line-height: 0.95;
}

.legal-hero > p:not(.eyebrow) {
    max-width: 650px;
    margin-bottom: 28px;
    font-size: 1.05rem;
    line-height: 1.8;
}

.legal-updated {
    display: block;
    color: var(--brown);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-content {
    width: min(800px, calc(100% - 80px));
    margin: 0 auto;
    padding: 80px 0 130px;
}

.legal-content h2 {
    margin: 60px 0 18px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    margin-bottom: 18px;
    line-height: 1.85;
}

.legal-content a {
    color: var(--cocoa);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 750px) {

    .legal-hero {
        width: calc(100% - 40px);
        padding: 80px 0 55px;
    }

    .legal-content {
        width: calc(100% - 40px);
        padding: 55px 0 90px;
    }

    .legal-hero h1 {
        font-size: clamp(3rem, 14vw, 4.5rem);
    }

}
/* ========================================
   EDITORIAL ARTICLES
======================================== */

.article-page {
    background: var(--cream);
    color: var(--brown);
}


/* ARTICLE HERO */

.article-hero {
    width: min(1100px, calc(100% - 80px));
    margin: 0 auto;
    padding: 120px 0 75px;
    text-align: center;
}

.article-hero .eyebrow {
    margin-bottom: 18px;
}

.article-hero h1 {
    max-width: 950px;
    margin: 0 auto 28px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(4rem, 6vw, 6.5rem);
    font-weight: 400;
    line-height: 0.96;
}

.article-deck {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.15rem;
    line-height: 1.8;
}

.article-meta {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    color: var(--brown);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* QUICK ANSWER */

.article-quick-answer {
    width: min(900px, calc(100% - 80px));
    margin: 0 auto 90px;
    padding: 38px 42px;
    border-top: 1px solid rgba(58, 44, 36, 0.2);
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
}

.quick-answer-label {
    display: block;
    margin-bottom: 14px;
    color: var(--terracotta);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.article-quick-answer p {
    margin: 0;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1.45;
}


/* MAIN ARTICLE */

.article-content {
    width: min(760px, calc(100% - 80px));
    margin: 0 auto;
    padding-bottom: 120px;
}

.article-content > p {
    margin-bottom: 24px;
    font-size: 1.04rem;
    line-height: 1.9;
}

.article-intro {
    color: var(--cocoa);
    font-size: 1.2rem !important;
    line-height: 1.85 !important;
}

.article-content h2 {
    margin: 75px 0 22px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: 1.08;
}

.article-content h3 {
    margin: 35px 0 14px;
    color: var(--cocoa);
    font-size: 1rem;
    letter-spacing: 0.04em;
}


/* CHECKLIST BOX */

.article-check {
    margin: 40px 0;
    padding: 32px 36px;
    background: rgba(232, 217, 168, 0.32);
    border-left: 3px solid var(--ochre);
}

.article-check h3 {
    margin: 0 0 18px;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.45rem;
    font-weight: 400;
    letter-spacing: 0;
}

.article-check ul {
    margin: 0;
    padding-left: 20px;
}

.article-check li {
    margin: 10px 0;
    line-height: 1.65;
}


/* ROOT & ROOM TIP */

.article-tip {
    margin: 45px 0;
    padding: 32px 36px;
    border: 1px solid rgba(58, 44, 36, 0.18);
}

.article-tip > span {
    display: block;
    margin-bottom: 12px;
    color: var(--terracotta);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.article-tip p {
    margin: 0;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.3rem;
    line-height: 1.55;
}


/* DIAGNOSIS */

.article-diagnosis {
    width: min(1100px, calc(100vw - 80px));
    margin: 100px 50% 90px;
    transform: translateX(-50%);
    padding: 70px;
    background: var(--cocoa);
}

.article-diagnosis > .eyebrow {
    color: var(--butter);
}

.article-diagnosis > h2 {
    max-width: 650px;
    margin: 10px 0 45px;
    color: var(--cream);
}

.diagnosis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(247, 241, 227, 0.18);
    border: 1px solid rgba(247, 241, 227, 0.18);
}

.diagnosis-grid > div {
    padding: 28px;
    background: var(--cocoa);
}

.diagnosis-grid span {
    display: block;
    margin-bottom: 10px;
    color: var(--cream);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 1.2rem;
}

.diagnosis-grid p {
    margin: 0;
    color: rgba(247, 241, 227, 0.72);
    line-height: 1.65;
}


/* RELATED PLANT */

.article-related-plant {
    margin: 90px 0 70px;
    padding: 50px 0;
    border-top: 1px solid rgba(58, 44, 36, 0.2);
    border-bottom: 1px solid rgba(58, 44, 36, 0.2);
}

.article-related-plant h2 {
    margin: 8px 0 18px;
}

.article-related-plant p {
    max-width: 620px;
    margin-bottom: 25px;
    line-height: 1.8;
}


/* SOURCES */

.article-sources {
    margin-top: 70px;
}

.article-sources h2 {
    margin-bottom: 18px;
    font-size: 2rem;
}

.article-sources p,
.article-sources li {
    font-size: 0.9rem;
    line-height: 1.75;
}

.article-sources ul {
    padding-left: 20px;
}

.article-sources li {
    margin-bottom: 10px;
}


/* ARTICLE END CTA */

.article-next {
    padding: 110px 40px;
    background: var(--butter);
    text-align: center;
}

.article-next h2 {
    margin: 10px 0 18px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
}

.article-next > p:not(.eyebrow) {
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.8;
}


/* ARTICLE RESPONSIVE */

@media (max-width: 800px) {

    .article-hero {
        width: calc(100% - 40px);
        padding: 80px 0 55px;
    }

    .article-hero h1 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .article-deck {
        font-size: 1rem;
    }

    .article-meta {
        flex-wrap: wrap;
    }

    .article-quick-answer {
        width: calc(100% - 40px);
        margin-bottom: 65px;
        padding: 30px 0;
    }

    .article-content {
        width: calc(100% - 40px);
        padding-bottom: 80px;
    }

    .article-content h2 {
        margin-top: 60px;
    }

    .article-check,
    .article-tip {
        padding: 28px 24px;
    }

    .article-diagnosis {
        width: 100vw;
        margin-top: 75px;
        margin-bottom: 70px;
        padding: 55px 20px;
    }

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

    .article-next {
        padding: 80px 20px;
    }
}
/* ========================================
   PLANT PROFILE — MORE HELP
======================================== */

.plant-help {
    width: min(1400px, calc(100% - 80px));
    margin: 0 auto;
    padding: 120px 0;
    border-top: 1px solid rgba(58, 44, 36, 0.18);
}

.plant-help-heading {
    display: grid;
    grid-template-columns: minmax(350px, 0.8fr) minmax(400px, 1.2fr);
    column-gap: clamp(60px, 7vw, 120px);
    align-items: end;
    margin-bottom: 55px;
}

.plant-help-heading .eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 18px;
}

.plant-help-heading h2 {
    max-width: 560px;
    margin: 0;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3rem, 4.5vw, 5rem);
    font-weight: 400;
    line-height: 1;
}

.plant-help-heading > p:not(.eyebrow) {
    max-width: 520px;
    margin: 0;
    line-height: 1.8;
}

.plant-help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.plant-help-card {
    display: block;
    padding: 38px;
    border: 1px solid rgba(58, 44, 36, 0.18);
    color: var(--brown);
    text-decoration: none;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}

.plant-help-card:hover {
    transform: translateY(-4px);
    border-color: var(--ochre);
}

.plant-help-topic {
    display: block;
    margin-bottom: 22px;
    color: var(--terracotta);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.plant-help-card h3 {
    max-width: 520px;
    margin: 0 0 18px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    font-weight: 400;
    line-height: 1.1;
}

.plant-help-card p {
    max-width: 560px;
    margin-bottom: 28px;
    line-height: 1.75;
}

.plant-help-link {
    color: var(--cocoa);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}


@media (max-width: 800px) {

    .plant-help {
        width: calc(100% - 40px);
        padding: 80px 0;
    }

    .plant-help-heading {
        display: block;
        margin-bottom: 40px;
    }

    .plant-help-heading h2 {
        margin-bottom: 24px;
    }

 /* PLANT HELP — SINGLE FEATURED ARTICLE */

.plant-help-grid {
    grid-template-columns: 1fr;
}

.plant-help-card {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(400px, 1.2fr);
    column-gap: clamp(60px, 6vw, 100px);
    padding: 45px 50px;
    align-items: start;
}

.plant-help-card .plant-help-topic {
    grid-column: 1;
}

.plant-help-card h3 {
    grid-column: 1;
    max-width: 500px;
}

.plant-help-card p {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    max-width: 520px;
    margin: 0;
}

.plant-help-card .plant-help-link {
    grid-column: 1;
    margin-top: 12px;
}

@media (max-width: 800px) {

    .plant-help-card {
        display: block;
        width: 100%;
        padding: 30px 26px;
    }

    .plant-help-card p {
        margin-bottom: 28px;
    }
}
.plant-help {
    padding-top: 90px;
    padding-bottom: 90px;
}

.plant-help-heading {
    grid-template-columns: minmax(420px, 0.9fr) minmax(420px, 1.1fr);
    gap: 70px;
    margin-bottom: 45px;
}

.plant-help-heading h2 {
    max-width: 620px;
}

.plant-help-heading > p:not(.eyebrow) {
    justify-self: start;
    align-self: end;
    max-width: 500px;
    padding-bottom: 8px;
}

/* Plant Problems intro */

.plant-problems-section .guide-start-intro h2 {
    max-width: 430px;
    margin: 18px 0 26px;
    color: var(--cocoa);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.2rem, 4.6vw, 5rem);
    font-weight: 400;
    line-height: 0.98;
}

.plant-problems-section .guide-start-intro > p:not(.eyebrow) {
    max-width: 390px;
    margin: 0;
    color: var(--brown);
    font-size: 0.95rem;
    line-height: 1.8;
}

.plant-problems-section .guide-start-intro::after {
    content: "";
    display: block;
    width: 70px;
    height: 1px;
    margin-top: 36px;
    background: var(--terracotta);
}