/* ============================================================
   REIKI HEALING WEBSITE — style.css
   Modern wellness-themed responsive layout
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* ---------- HvD Trial Brandon Grotesque ---------- */
@font-face {
    font-family: 'HvDTrial Brandon Grotesque';
    src: url('../fonts/HvDTrial_Brandon_Grotesque_thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HvDTrial Brandon Grotesque';
    src: url('../fonts/HvDTrial_Brandon_Grotesque_light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HvDTrial Brandon Grotesque';
    src: url('../fonts/HvDTrial_Brandon_Grotesque_regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HvDTrial Brandon Grotesque';
    src: url('../fonts/HvDTrial_Brandon_Grotesque_medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HvDTrial Brandon Grotesque';
    src: url('../fonts/HvDTrial_Brandon_Grotesque_bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HvDTrial Brandon Grotesque';
    src: url('../fonts/HvDTrial_Brandon_Grotesque_black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- CSS RESET ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

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

ul {
    list-style: none;
}

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

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

input,
select,
textarea,
button {
    font-family: inherit;
}

/* ---------- DESIGN TOKENS ---------- */
:root {
    /* Colors */
    --color-bg: #f5f1f3;
    --color-bg-soft: #efe9ec;
    --color-bg-lavender: #e9e4ea;
    --color-bg-beige: #f8f4f0;
    --color-primary: #2d441d;
    --color-primary-dark: #1f3014;
    --color-primary-soft: #4a6a32;
    --color-text: #2c2c2c;
    --color-text-muted: #6b6b6b;
    --color-border: #e6dfe4;
    --color-white: #ffffff;
    --color-star: #FFA947;

    /* Typography */
    --font-heading: 'HvDTrial Brandon Grotesque', 'Brandon Grotesque', 'Mulish', 'Montserrat', 'Poppins', sans-serif;
    --font-display: 'HvDTrial Brandon Grotesque', 'Brandon Grotesque', 'Mulish', 'Montserrat', 'Poppins', sans-serif;
    --font-body: 'HvDTrial Brandon Grotesque', 'Brandon Grotesque', 'Mulish', 'Montserrat', 'Poppins', sans-serif;

    /* Layout */
    --container: 1240px;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 32px;
    --radius-pill: 999px;

    /* Effects */
    --shadow-sm: 0 4px 14px rgba(45, 68, 29, 0.08);
    --shadow-md: 0 10px 30px rgba(45, 68, 29, 0.10);
    --shadow-lg: 0 18px 50px rgba(45, 68, 29, 0.14);

    /* Motion */
    --t-fast: 0.2s ease;
    --t-base: 0.35s ease;
}

/* ---------- BASE TYPOGRAPHY ---------- */
body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.2;
}

p {
    color: #7A7A7A;
    font-family: var(--font-body);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

/* ---------- UTILITIES ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

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

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 19px 42px;
    border-radius: var(--radius-pill);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base);
    white-space: nowrap;
    border-radius: 0 30px 30px 30px;
    flex-direction: row-reverse;
}

.btn img {
    width: 16px;
    height: auto;
}


.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}


.btn-light {
    background: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}


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

.btn-sm {
    padding: 15px 30px;
    font-size: 0.85rem;
}

/* Floral decorations — universal positioning */
.floral {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: 180px;
    height: auto;
}

/* ============================================================
   1. HEADER / NAVBAR
   ============================================================ */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: transparent;
    transition: background var(--t-base), box-shadow var(--t-base);
}

.site-header.scrolled {
    /* When converted to fixed via JS scroll, give it a soft bg */
    background: rgba(245, 241, 243, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    gap: 20px;
}

.brand-logo {
    height: 74px;
    width: auto;
}

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

.main-nav .nav-list>li {
    display: flex;
    align-items: center;
}

/* Dropdown menu */
.nav-item-dropdown {
    position: relative;
}

.nav-item-dropdown>.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dropdown-caret {
    display: inline-block;
    width: 12px;
    height: 12px;
    color: currentColor;
    transition: transform var(--t-fast);
    vertical-align: middle;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    transform: translateY(-6px);
    min-width: 221px;
    background: #283618;
    padding: 19px 10px 19px 10px;
    border-radius: 0 30px 30px 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
    z-index: 20;
    list-style: none;
    overflow: hidden;
}

.dropdown-menu li {
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.dropdown-menu li:last-child {
    border-bottom: none;
}

.dropdown-menu a {
    display: block;
    padding: 14px 22px;
    font-family: 'HvDTrial Brandon Grotesque', 'Brandon Grotesque', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-align: left;
    transition: background var(--t-fast);
}

.dropdown-menu a:hover {
    background: #ffffff;
    color: #283618;
}

.nav-item-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-item-dropdown.open .dropdown-caret {
    transform: rotate(180deg);
}

/* Keep nav link underline working inside dropdown wrapper */
.nav-item-dropdown>.nav-link::after {
    left: 0;
    right: 18px;
}

.nav-link {
    color: #283618;
    text-align: center;
    font-family: 'HvDTrial Brandon Grotesque', 'Brandon Grotesque', 'Montserrat', 'Poppins', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1px;
    position: relative;
    padding: 0px 2px;
    transition: color var(--t-fast);
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

.nav-link.active::after,
.nav-link:hover::after {
    transform: scaleX(1);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Search bar */
.search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 24px;
}

.search-form {
    position: absolute;
    left: 0;
    top: 50%;
    display: flex;
    align-items: center;
    width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(-8px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
    pointer-events: none;
    z-index: 30;
}

.search-wrap.open .search-form {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}

.search-wrap.open .search-btn {
    opacity: 0;
    visibility: hidden;
}

.search-input {
    width: 100%;
    height: 42px;
    border: 1px solid rgba(40, 54, 24, 0.12);
    background: var(--color-white);
    border-radius: 10px;
    padding: 0 48px 0 22px;
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-size: 14px;
    color: #283618;
    outline: none;
    box-shadow: 0 4px 14px rgba(45, 68, 29, 0.08);
    transition: border-color var(--t-fast);
}

.search-input::placeholder {
    color: rgba(40, 54, 24, 0.55);
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-size: 14px;
}

.search-input:focus {
    border-color: rgba(40, 54, 24, 0.35);
}

.search-submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    color: #283618;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--t-fast);
}

.search-submit:hover {
    background: rgba(40, 54, 24, 0.08);
}

.search-wrap.open .search-btn {
    color: var(--color-primary);
    background: rgba(40, 54, 24, 0.08);
}

/* Search results dropdown */
.search-results {
    position: absolute;
    left: 0;
    top: calc(50% + 26px);
    width: 280px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(40, 54, 24, 0.18);
    max-height: 340px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
    z-index: 40;
    padding: 6px 0;
}

.search-results.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-result-item {
    display: block;
    padding: 10px 18px;
    font-family: 'HvDTrial Brandon Grotesque', 'Brandon Grotesque', sans-serif;
    font-size: 14px;
    color: #283618;
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}

.search-result-item:hover {
    background: #f0ebe1;
}

.search-result-empty {
    padding: 14px 18px;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-size: 13px;
    color: #8a8a8a;
    text-align: center;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transition: background var(--t-fast);
}

.icon-btn:hover {
    background: rgba(45, 68, 29, 0.08);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
}

.menu-toggle span {
    width: 22px;
    height: 2px;
    background: var(--color-primary);
    transition: var(--t-fast);
}

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

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

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

/* ============================================================
   2. HERO SECTION
   ============================================================ */
.hero {
    position: relative;
    padding: 120px 0 60px;
    background: url('images/home/hero-bg.png') no-repeat bottom center / cover,
        linear-gradient(180deg, #f1ecef 0%, #f5f1f3 100%);
    overflow: hidden;
}

/* 3-column layout: title | collage | info — tightly packed */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.hero-title-col {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-right: 10px;
}

.hero-info-col {
    padding: 10px 0;
    margin-left: -49px;
    margin-bottom: -133px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: 139px;
    font-weight: 900;
    color: #283618;
    line-height: 1;
    letter-spacing: -0.5px;
    margin-bottom: 200px;
}

.hero-subtitle {
    display: flex;
    align-items: baseline;
    /* gap: 10px; */
    margin-bottom: 14px;
    flex-direction: column;
}

.years {
    font-family: var(--font-display);
    font-size: 84px;
    color: #283618;
    font-weight: 600;
    line-height: 1;
}

.years-label {
    font-size: 18px;
    color: #575A5F;
    letter-spacing: 0.3px;
}

.hero-tagline {
    font-family: var(--font-display);
    font-size: 84px;
    margin-bottom: 22px;
    font-weight: 800;
    color: #283618;
    line-height: 1.15;
}

/* Smaller hero CTA */
.hero-info-col .btn-primary {
    padding: 10px 22px;
    font-size: 14.6px;
    font-weight: 400;
    background: #283618;
    color: #ffffff;
}


/* Hero composite image */
.hero-collage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 628px;
}

.hero-banner-img {
    width: 100%;
    max-width: 900px;
    height: auto;
    transition: transform var(--t-base);
    position: absolute;
    left: -15px;
    bottom: -158px;
}

.hero-banner-img:hover {
    transform: scale(1.02);
}

/* Help-with category tags */
.help-section {
    text-align: center;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}

.help-floral {
    position: absolute;
    right: 0;
    bottom: -10px;
    width: 150px;
    opacity: 0.65;
    pointer-events: none;
}

.help-heading {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 22px;
    color: #283618;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 0 auto;
}

.tag {
    padding: 7px 18px;
    background: #E7E0E6;
    border-radius: var(--radius-pill);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
    cursor: default;
    border-top: 1px solid var(--color-chartreuse-green-1310, #262D161A)
}

.tag:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* ============================================================
   3. QUOTE SECTION
   ============================================================ */
.quote-section {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(90deg, rgba(231, 224, 230, 0) 0%, #E7E0E6 100%);
}

.floral-quote-left {
    top: -3px;
    left: -109px;
    width: 460px;
}

.floral-quote-right {
    bottom: 30px;
    right: 40px;
    width: 160px;
    opacity: 0.4;
}

.quote {
    text-align: center;
    /* max-width: 760px; */
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.quote-text {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 48px;
    font-weight: 700;
    color: #283618;
    line-height: 63px;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 22px;
}

.quote-cite {
    font-family: var(--font-heading);
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    color: #283618;
    line-height: 61px;
    letter-spacing: 1px;
    text-align: center;
    display: block;
}

/* ============================================================
   4. ABOUT SECTION
   ============================================================ */
.about-section {
    padding: 100px 0;
    background: var(--color-white);
}

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

.about-collage {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-banner-img {
    width: 100%;
    max-width: 495px;
    height: auto;
    transition: transform var(--t-base);
}

.about-banner-img:hover {
    transform: scale(1.02);
}

.about-text p {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #7A7A7A;
    margin-bottom: 16px;
    margin-right: -5px;
}

.about-text .section-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    margin-bottom: 1rem;
}

.about-text .btn {
    margin-top: 10px;
    width: 177px;
    height: 57px;
    padding: 0 22px;
    background: #283618;
    border: 1px solid #283618;
    border-radius: 0 30px 30px 30px;
    color: #ffffff;
    justify-content: center;
}

.about-more-text {
    display: none;
    margin-top: 20px;
}

.about-more-text.show {
    display: block;
}


/* ============================================================
   5. BOOKS SECTION
   ============================================================ */
.books-section {
    position: relative;
    padding: 100px 0;
    background:
        url('images/home/book-section-bg-img.png') no-repeat center / cover,
        var(--color-bg-lavender);
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(270deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
}

/* Decorative floral — far right, behind reviews (flipped to face inward) */
.floral-books-right {
    position: absolute;
    right: -157px;
    top: 135px;
    bottom: 0px;
    width: 490px;
    height: auto;
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
    transform: scaleX(-1);
}

.books-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Books heading */
.books-text .section-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    margin-bottom: 1rem;
}

/* "A Hole Where My Heart Should Be" subtitle */
.books-text .books-subtitle {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 0;
    color: #283618;
    margin: 10px 0 10px;
}

/* Body paragraph */
.books-text p {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    color: #7A7A7A;
    margin-bottom: 22px;
}

.books-text .btn {
    width: 177px;
    height: 60px;
    padding: 0 22px;
    background: #283618;
    border: 1px solid #283618;
    border-radius: 0 30px 30px 30px;
    color: #ffffff;
    justify-content: center;
    margin-top: 10px;
}


.books-cover {
    display: flex;
    justify-content: center;
    align-items: center;
}

.books-cover img {
    max-width: 120%;
    width: auto;
    height: auto;
    transition: transform var(--t-base);
    margin-right: -30px;
}

.books-cover img:hover {
    transform: scale(1.03);
}

.books-reviews {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
    margin-left: 90px
}

.review-card {
    background: transparent;
    padding: 6px 0;
    gap: 10px
}

.review-card:last-child {
    border-bottom: none;
}

.review-card .stars {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    line-height: 1;
}

.star-icon {
    width: 24px;
    height: 24px;
    fill: var(--color-star);
    stroke: var(--color-star);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    display: inline-block;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .star-icon {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 480px) {
    .star-icon {
        width: 20px;
        height: 20px;
    }
}

/* Reviewer name */
.review-card h4 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 31.2px;
    letter-spacing: 0;
    color: #283618;
    margin-bottom: -6px;
    margin-top: -14px;
}

/* Review body text */
.review-card p {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
    color: Black Olive 70%;
}

/* ============================================================
   6. ART SECTION
   ============================================================ */
.art-section {
    padding: 70px 0;
    background: var(--color-white);
}

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

.art-collage {
    display: flex;
    justify-content: center;
    align-items: center;
}

.art-banner-img {
    width: 100%;
    max-width: 460px;
    height: auto;
    transition: transform var(--t-base);
}

.art-banner-img:hover {
    transform: scale(1.02);
}

.art-text p {
    font-family: HvDTrial Brandon Grotesque;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: middle;

    margin-bottom: 22px;
}

.section-title {
    font-family: HvDTrial Brandon Grotesque;
    font-weight: 700;
    font-style: Bold;
    font-size: 48px;
    leading-trim: NONE;
    line-height: 48px;
    letter-spacing: 1px;
    vertical-align: middle;

}

/* ============================================================
   7. BLOG SECTION
   ============================================================ */
.blog-section {
    position: relative;
    padding: 100px 0;
    background:
        url('images/home/blog-section-bg-img.png') no-repeat center / cover,
        var(--color-bg);
    overflow: hidden;
}

/* White variant for standalone blog page */
.blog-section.blog-section--white,
body[data-page="blog"] .blog-section {
    background: #ffffff;
}

.blog-flower-right {
    position: absolute;
    top: 17px;
    right: 189px;
    width: 310px;
    height: auto;
    transform: scaleX(-1);
    z-index: 0;
    pointer-events: none;
}

.floral-blog-left {
    left: -117px;
    top: 71%;
    transform: translateY(-50%);
    width: 490px;
}

.blog-section .section-title {
    font-family: HvDTrial Brandon Grotesque;
    font-weight: 700;
    font-style: Bold;
    font-size: 48px;
    leading-trim: NONE;
    line-height: 48px;
    letter-spacing: 1px;
    text-align: center;
    vertical-align: middle;

    margin-bottom: 50px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 1;
}

.blog-card {
    background: transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--t-base);
}

.blog-card:hover {
    transform: translateY(-8px);
}

.blog-thumb {
    aspect-ratio: 16 / 11;
    overflow: hidden;
}

.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-base);
}

.blog-card:hover .blog-thumb img {
    transform: scale(1.06);
}

.blog-body {
    padding: 22px;
    background-color: transparent !important;
    margin-left: -19px;
}

.blog-body .btn-primary {
    background: #283618;
    color: #ffffff;
    border: 1px solid #283618;
}


.blog-date {
    font-size: 1rem;
    color: var(--color-text-muted);
    display: flex;
    margin-bottom: 8px;
    gap: 5px;
}

.blog-title {
    font-family: HvDTrial Brandon Grotesque;
    font-weight: 700;
    font-style: Bold;
    font-size: 23px;
    leading-trim: NONE;
    line-height: 27px;
    letter-spacing: 1px;
    vertical-align: middle;

    margin-bottom: 10px;
}

.blog-body p {
    font-family: HvDTrial Brandon Grotesque;
    font-weight: 400;
    font-style: Regular;
    font-size: 15px;
    leading-trim: NONE;
    line-height: 24px;
    letter-spacing: 0;
    vertical-align: middle;

    margin-bottom: 16px;
}

/* ============================================================
   BLOG PAGE  (independent copy of blog section)
   ============================================================ */
.blogpage-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

.blogpage-floral-left {
    position: absolute;
    left: -162px;
    top: 50%;
    transform: translateY(-50%);
    width: 500px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    height: auto;
}

.blogpage-floral-right {
    position: absolute;
    right: 206px;
    top: -38px;
    width: 320px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.blogpage-section .section-title {
    font-family: HvDTrial Brandon Grotesque;
    font-weight: 700;
    font-style: Bold;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 50px;
}

.blogpage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 1;
}

.blogpage-card {
    background: transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--t-base);
}

.blogpage-card:hover {
    transform: translateY(-8px);
}

.blogpage-thumb {
    aspect-ratio: 16 / 11;
    overflow: hidden;
}

.blogpage-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-base);
}

.blogpage-card:hover .blogpage-thumb img {
    transform: scale(1.06);
}

.blogpage-body {
    padding: 22px;
    background-color: transparent !important;
}

.blogpage-date {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    display: flex;
    margin-bottom: 8px;
    gap: 5px;
}

.blogpage-title {
    font-family: HvDTrial Brandon Grotesque;
    font-weight: 700;
    font-style: Bold;
    font-size: 23px;
    line-height: 27px;
    letter-spacing: 1px;
    vertical-align: middle;
    margin-bottom: 10px;
}

.blogpage-body p {
    font-family: HvDTrial Brandon Grotesque;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: middle;
    margin-bottom: 16px;
}

/* Blogpage responsive */
@media (max-width: 1024px) {
    .blogpage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .blogpage-floral-left,
    .blogpage-floral-right {
        display: none;
    }

    .blogpage-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blogpage-section .section-title {
        font-size: 28px !important;
        line-height: 32px !important;
        margin-bottom: 30px;
    }

    .blogpage-title {
        font-size: 18px !important;
        line-height: 22px !important;
    }

    .blogpage-body {
        padding: 16px;
    }

    .blogpage-body p {
        font-size: 14px;
        line-height: 20px;
    }
}

/* ============================================================
   8. CONTACT SECTION
   ============================================================ */
.contact-section {
    position: relative;
    padding: 100px 0;
    background: var(--color-white);
    overflow: hidden;
}

/* Contact page — right-side decorative flower (only on contact.html) */
.contactpage-floral-right {
    position: absolute;
    right: -223px;
    top: 37%;
    transform: translateY(-50%) scaleX(-1);
    width: 660px;
    height: auto;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.contact-form-wrap {
    position: relative;
    padding-top: 60px;
    padding-left: 60px;
}

.floral-contact {
    position: absolute;
    top: -5px;
    left: -42px;
    width: 250px;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    position: relative;
    z-index: 2;
}

/* Form (left card) */
.contact-form {
    background: #283618;
    width: 96%;
    max-width: 475px;
    padding: 48px 32px;
    border-radius: 0 30px 30px 30px;
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 2;
    height: 600px;
}

.form-row {
    margin-bottom: 32px;
}

.form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--color-white);
    padding: 16px 17px 6px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--t-fast);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
    padding: 16px 17px 40px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #ffffff;
}

.contact-form select {
    color: #ffffff;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--color-white);
}

.contact-form select option {
    color: var(--color-text);
}

.contact-form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.7);
    cursor: pointer;
}

.contact-form .btn-block {
    width: 383.65px;
    max-width: 100%;
    height: 46.23px;
    padding: 12.79px 18.27px 13.7px;
    border-radius: 13.7px 13.7px 13.7px 0;
    justify-content: center;
    margin-left: 18px;
}

/* Info (right) */
.contact-info {
    padding-top: 70px;
}

.contact-info .section-title {
    font-family: 'HvDTrial Brandon Grotesque';
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    vertical-align: middle;
    text-align: left;
    margin-bottom: 32px;
}

.schedule {
    display: flex;
    flex-direction: column;
    gap: 23px;
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--color-border);
}

.schedule li {
    font-family: 'HvDTrial Brandon Grotesque';
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    vertical-align: middle;
    color: #7A7A7A;
}

.schedule li strong {
    font-family: 'HvDTrial Brandon Grotesque';
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #7A7A7A;
    margin-right: 14px;
}

.contact-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-card {
    background: #E9DDE5;
    padding: 26px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    transition: transform var(--t-base);
}

.contact-card:first-child {
    border-radius: 20px 0 20px 20px;
}

.contact-card:last-child {
    border-radius: 0 20px 20px 20px;
}

.contact-card:hover {
    transform: translateY(-3px);
}

.contact-icon {
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon img {
    height: auto;
    display: block;
}

.contact-icon .icon-phone {
    width: 100px;
}

.contact-icon .icon-email {
    width: 64px;
}

.contact-card span {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--color-text);
}

/* ============================================================
   9. NEWSLETTER SECTION
   ============================================================ */
.newsletter-section {
    padding: 80px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.newsletter-box {
    background: linear-gradient(270deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
    padding: 50px 40px;
    text-align: center;
    margin: 0 auto;
    position: relative;
}

/* Decorative florals — left & right of newsletter card */
.newsletter-floral {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    height: auto;
}

.newsletter-floral-left {
    left: -79px;
    top: 46%;
    transform: translateY(-50%);
    width: 340px;
}

.newsletter-floral-right {
    right: -26px;
    top: 43%;
    transform: translateY(-50%);
    width: 270px;
    z-index: 2;
}

.newsletter-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto;
}

/* Heading — smaller, centered */
.newsletter-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    text-align: center;
    color: #283618;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

/* Vertical stacked form: input on top, button centered below */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.newsletter-form input {
    width: 628px;
    max-width: 100%;
    height: 48px;
    background: var(--color-white);
    border: none;
    border-radius: 8px;
    box-shadow: 0px 0px 9.8px 0px rgba(0, 0, 0, 0.14);
    padding: 0 22px;
    font-size: 0.9rem;
    outline: none;
    transition: box-shadow var(--t-fast);
}

.newsletter-form input:focus {
    box-shadow: 0px 0px 9.8px 0px rgba(0, 0, 0, 0.22);
}

.newsletter-form .btn {
    width: 177px;
    height: 57px;
    padding: 0 22px;
    background: #283618;
    border: 1px solid #283618;
    border-radius: 0 30px 30px 30px;
    color: #ffffff;
    justify-content: center;
    font-size: 0.95rem;
}


/* ============================================================
   10. FOOTER
   ============================================================ */
.site-footer {
    width: 100%;
    background: #283618;
    color: var(--color-white);
    padding: 70px 0 0;
    position: relative;
    overflow: hidden;
    opacity: 1;
}

.footer-floral {
    position: absolute;
    right: 368px;
    top: 114px;
    width: 290px;
    height: auto;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

.footer-grid {
    display: flex;
    align-items: flex-start;
    gap: 130px;
    padding-right: 360px;
    padding-bottom: 90px;
    position: relative;
    z-index: 1;
    padding-top: 35px;
}

.footer-brand {
    flex-shrink: 0;
    width: 240px;
}

.footer-cols-group {
    display: flex;
    align-items: flex-start;
    gap: 70px;
    flex: 1;
    margin-top: 73px;
}

.footer-cols-group .footer-col {
    flex: 1;
    min-width: 140px;
}

.footer-logo {
    width: 174.36px;
    height: 149.41px;
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    padding: 0;
    transition: transform var(--t-fast);
}

.social-icons a:hover {
    background: transparent;
    transform: translateY(-2px);
}

.social-icons img {
    width: 22px;
    height: 22px;
}

.footer-secondary-logo {
    width: 178px;
    height: 86px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--color-white);
    padding: 8px 14px;
}

.footer-title {
    color: var(--color-white);
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.5px;
    margin-bottom: 22px;
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-list a {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--t-fast), padding-left var(--t-fast);
}

.footer-list a:hover {
    color: var(--color-white);
    padding-left: 4px;
}

.footer-hours {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 22px;
}

.call-btn {
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 0 30px 30px 30px;
    flex-direction: row;
    font-size: 15px;
}

.call-btn-icon {
    width: 16px;
    height: auto;
}

.footer-bottom {
    background: #E7E0E6;
    text-align: center;
    padding: 18px 24px;
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-size: 14px;
    color: #2d441d;
    position: relative;
    z-index: 1;
}

.footer-bottom p {
    color: #2d441d;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

/* ============================================================
   RESPONSIVE — LARGE TABLET / SMALL LAPTOP (≤ 1200px)
   ============================================================ */
@media (max-width: 1200px) {
    .footer-grid {
        padding-right: 280px;
        gap: 60px;
    }

    .footer-cols-group {
        gap: 50px;
    }

    .footer-floral {
        width: 280px;
    }

    /* My Art section — laptop layout: 2 columns but tighter */
    .art-grid {
        gap: 50px;
    }

    .art-banner-img {
        max-width: 400px;
    }

    .art-text .section-title {
        font-size: 40px;
        line-height: 44px;
    }

    /* Art page flowers — shrink on laptop so they don't overflow content */
    .art-flowers-flower-left,
    .art-flowers-flower-right,
    .art-impressions-flower-left,
    .art-impressions-flower-right,
    .art-landscapes-flower-left,
    .art-landscapes-flower-right,
    .art-toucan-flower-left,
    .art-toucan-flower-right,
    .art-birds-flower-left,
    .art-birds-flower-right,
    .art-wonders-flower-left,
    .art-wonders-flower-right {
        width: 300px;
        opacity: 0.5;
    }

    .art-flowers-flower-left,
    .art-impressions-flower-left,
    .art-landscapes-flower-left,
    .art-toucan-flower-left,
    .art-birds-flower-left,
    .art-wonders-flower-left {
        margin-left: 40px;
        left: -60px;
    }

    .art-flowers-flower-right,
    .art-impressions-flower-right,
    .art-landscapes-flower-right,
    .art-toucan-flower-right,
    .art-birds-flower-right,
    .art-wonders-flower-right {
        margin-right: 40px;
        right: -60px;
    }
}

/* ============================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 0;
        text-align: center;
    }

    .hero-title-col {
        justify-content: center;
        padding-right: 0;
        margin-bottom: -10px;
    }

    .hero-title {
        margin-bottom: 0;
    }

    .hero-collage {
        margin-top: -10px;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .hero-banner-img {
        position: static;
        left: auto;
        bottom: auto;
        margin: 0 auto;
        max-width: 600px;
        width: 100%;
    }

    .hero-subtitle {
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    .hero-info-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 20px;
        margin-left: 0;
        margin-bottom: 0;
    }

    .hero-tagline {
        text-align: center;
    }

    .about-grid,
    .art-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .art-grid {
        text-align: center;
    }

    .art-collage {
        order: 1;
    }

    .art-text {
        order: 0;
        align-items: center;
        text-align: center;
    }

    .art-text .btn {
        margin: 0 auto;
    }

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

    .books-cover {
        order: -1;
    }

    /* Books reviews centered */
    .books-reviews {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-left: 0;
        width: 100%;
    }

    .review-card {
        max-width: 520px;
        width: 100%;
        text-align: center;
    }

    .books-text {
        text-align: center;
    }

    .books-text .btn {
        margin: 0 auto;
    }

    /* Contact section centered */
    .contact-info {
        text-align: center;
    }

    .contact-info .section-title {
        text-align: center !important;
    }

    .schedule li {
        text-align: center;
    }

    .schedule {
        align-items: center;
    }

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

    /* Section title sizes */
    .blog-section .section-title,
    .about-text .section-title,
    .contact-info .section-title,
    .help-heading {
        font-size: 36px !important;
        line-height: 40px !important;
    }

    .quote-text {
        font-size: 32px;
        line-height: 44px;
    }

    /* Books floral smaller on tablets */
    .floral-books-right {
        width: 250px;
        opacity: 0.3;
    }

    .floral-quote-left {
        width: 130px;
        opacity: 0.3;
    }

    .floral-blog-left {
        width: 220px;
        opacity: 0.25;
    }

    /* Contact section */
    .contact-form-wrap {
        padding-top: 0;
        padding-left: 0;
        display: flex;
        justify-content: center;
    }

    .floral-contact {
        width: 170px;
    }

    .contact-info {
        padding-top: 0;
    }

    /* Newsletter */
    .newsletter-floral-left {
        width: 220px;
    }

    .newsletter-floral-right {
        right: -160px;
        width: 240px;
    }

    /* Footer adapts */
    .footer-grid {
        flex-wrap: wrap;
        padding-right: 0;
        gap: 60px;
    }

    .footer-floral {
        width: 240px;
    }

    .footer-cols-group {
        gap: 50px;
        flex: 1 1 100%;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
    }

    .container {
        padding: 0 20px;
    }

    /* Hide ALL decorative florals on mobile to prevent overflow */
    .floral,
    .floral-quote-left,
    .floral-quote-right,
    .floral-books-right,
    .floral-blog-left,
    .blog-flower-right,
    .floral-contact,
    .newsletter-floral,
    .newsletter-floral-left,
    .newsletter-floral-right,
    .footer-floral {
        display: none !important;
    }

    /* Mobile nav drawer */
    .menu-toggle {
        display: inline-flex;
    }

    .brand-logo {
        height: 56px;
    }

    /* Search bar mobile */
    .search-wrap {
        position: static;
    }

    .search-form {
        position: fixed;
        top: 78px;
        left: 16px;
        right: 16px;
        width: auto;
        z-index: 30;
    }

    .search-input {
        height: 44px;
        font-size: 14px;
    }

    .nav-actions {
        gap: 6px;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
    }

    .main-nav {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--color-white);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--t-base);
        box-shadow: var(--shadow-md);
    }

    .main-nav.open {
        max-height: 600px;
        overflow-y: auto;
    }

    .main-nav .nav-list {
        flex-direction: column;
        gap: 0;
        padding: 12px 24px;
    }

    .main-nav .nav-list li {
        border-bottom: 1px solid var(--color-border);
    }

    .main-nav .nav-list li:last-child {
        border-bottom: none;
    }

    .nav-link {
        display: block;
        padding: 14px 0;
    }

    /* Dropdown in mobile — show inline */
    .nav-item-dropdown .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
        padding: 0 0 8px 16px;
        border-radius: 0;
        min-width: auto;
    }

    .nav-item-dropdown .dropdown-menu a {
        color: var(--color-primary);
        padding: 8px 0;
        font-size: 13px;
    }

    .nav-item-dropdown .dropdown-menu a:hover {
        background: transparent;
        padding-left: 4px;
    }

    .dropdown-caret {
        display: none;
    }

    /* Hero */
    .hero {
        padding: 100px 0 40px;
    }

    .hero-grid {
        gap: 0;
    }

    .hero-title-col {
        margin-bottom: -20px;
    }

    .hero-collage {
        margin-top: 0;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .hero-info-col {
        margin-top: 10px;
        margin-left: 0;
        margin-bottom: 0;
        align-items: center;
        text-align: center;
    }

    .hero-banner-img {
        position: static;
        left: auto;
        bottom: auto;
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
        display: block;
    }

    .hero-title {
        font-size: clamp(3rem, 12vw, 4rem);
        line-height: 1.1;
        margin-bottom: 0;
    }

    .hero-subtitle {
        align-items: center;
        text-align: center;
        margin-bottom: 8px;
    }

    .hero-subtitle .years {
        font-size: clamp(2.5rem, 10vw, 3rem);
    }

    .hero-tagline {
        font-size: clamp(1.75rem, 5.5vw, 2.5rem);
        line-height: 1.2;
        text-align: center;
        margin-bottom: 18px;
    }

    /* Help section */
    .help-section {
        margin-top: 24px;
    }

    .help-heading {
        font-size: 26px !important;
        line-height: 32px !important;
        margin-bottom: 16px;
    }

    .tag-list {
        gap: 8px;
    }

    .tag {
        padding: 6px 14px;
        font-size: 13px;
    }

    /* About / Art composite images */
    .about-section,
    .art-section {
        padding: 60px 0;
    }

    .about-banner-img {
        max-width: 100%;
        width: 100%;
    }

    .art-banner-img {
        max-width: 320px;
        width: 100%;
        margin: 0 auto;
    }

    .about-text .section-title,
    .art-text .section-title,
    .contact-info .section-title,
    .blog-section .section-title {
        font-size: 28px !important;
        line-height: 32px !important;
        letter-spacing: 0.5px !important;
    }

    .about-text p,
    .art-text p {
        font-size: 15px;
        line-height: 22px;
        margin-right: 0;
    }

    /* Quote */
    .quote-section {
        padding: 40px 0;
    }

    .quote-text {
        font-size: 20px;
        line-height: 28px;
    }

    .quote-cite {
        font-size: 16px;
        line-height: 22px;
    }

    /* Books section */
    .books-section {
        padding: 60px 0;
    }

    .books-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .books-cover img {
        max-width: 280px;
        margin: 0 auto;
    }

    .books-reviews {
        gap: 14px;
        margin-left: 0;
        width: 100%;
    }

    .review-card {
        padding: 16px;
        margin-right: 0;
        max-width: 100%;
        width: 100%;
    }

    /* Blog */
    .blog-section {
        padding: 60px 0;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-body {
        margin-left: 0;
        padding: 18px 0;
    }

    .blog-title {
        font-size: 18px !important;
        line-height: 22px !important;
    }

    /* Contact section */
    .contact-section {
        padding: 60px 0;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-form-wrap {
        padding-top: 0;
        padding-left: 0;
        display: flex;
        justify-content: center;
    }

    .contact-form {
        padding: 24px 20px;
        height: auto;
        width: 100%;
        max-width: 100%;
    }

    .contact-form .btn-block {
        margin-left: 0;
    }

    .form-row-split {
        grid-template-columns: 1fr;
    }

    .contact-info {
        padding-top: 0;
    }

    .schedule li {
        font-size: 14px;
    }

    .contact-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .contact-card {
        padding: 18px 12px;
    }

    .contact-card span {
        font-size: 12px;
        word-break: break-word;
    }

    /* Newsletter */
    .newsletter-section {
        padding: 40px 0;
    }

    .newsletter-box {
        padding: 40px 20px;
    }

    .newsletter-content {
        max-width: 100%;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 14px;
        width: 100%;
    }

    .newsletter-form input {
        width: 100%;
        max-width: none;
        padding: 14px 18px;
        font-size: 0.85rem;
    }

    .newsletter-form .btn {
        width: auto;
        max-width: none;
        padding: 12px 28px;
        font-size: 0.85rem;
        align-self: center;
        justify-content: center;
    }

    .newsletter-title {
        font-size: 22px !important;
        line-height: 28px !important;
    }

    /* Footer */
    .site-footer {
        padding: 40px 0 0;
    }

    .footer-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 32px;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 32px;
    }

    .footer-brand {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .social-icons {
        justify-content: center;
    }

    .footer-cols-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 28px;
        width: 100%;
        margin-top: 0;
    }

    .footer-cols-group .footer-col {
        flex: 1 1 calc(50% - 14px);
        min-width: 130px;
        text-align: center;
    }

    .footer-list {
        align-items: center;
    }

    .call-btn {
        margin: 0 auto;
    }

    .footer-logo {
        width: 120px;
        height: auto;
    }

    .footer-secondary-logo {
        width: 150px;
        height: auto;
    }

    .footer-title {
        font-size: 17px;
        margin-bottom: 14px;
    }

    .footer-list {
        gap: 10px;
    }

    .footer-list a {
        font-size: 14px;
    }

    .footer-hours {
        font-size: 14px;
        line-height: 22px;
    }

    .footer-bottom {
        padding: 14px 18px;
    }

    .footer-bottom p {
        font-size: 12px;
    }

    /* Buttons */
    .btn {
        padding: 12px 22px;
        font-size: 0.85rem;
        white-space: normal;
        text-align: center;
    }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    /* Search bar — fill almost full width */
    .search-form {
        top: 70px;
        left: 12px;
        right: 12px;
    }

    .search-input {
        height: 42px;
    }

    .hero {
        padding: 90px 0 30px;
    }

    .hero-title {
        font-size: 3.2rem;
    }

    .years {
        font-size: 2.5rem;
    }

    .years-label {
        font-size: 14px;
    }

    .hero-tagline {
        font-size: 1.65rem;
    }

    .hero-banner-img,
    .about-banner-img {
        max-width: 100%;
        width: 100%;
    }

    .art-banner-img {
        max-width: 240px;
        width: 100%;
        margin: 0 auto;
    }

    .tag {
        padding: 6px 12px;
        font-size: 12px;
    }

    .help-heading {
        font-size: 22px !important;
        line-height: 28px !important;
    }

    .quote-section {
        padding: 32px 0;
    }

    .quote-text {
        font-size: 16px;
        line-height: 24px;
    }

    .quote-cite {
        font-size: 14px;
        line-height: 20px;
    }

    /* Section titles */
    .about-text .section-title,
    .art-text .section-title,
    .contact-info .section-title,
    .blog-section .section-title,
    .newsletter-title,
    .books-text .section-title {
        font-size: 24px !important;
        line-height: 28px !important;
    }

    .about-section,
    .art-section,
    .books-section,
    .blog-section,
    .contact-section {
        padding: 50px 0;
    }

    /* Contact */
    .contact-form {
        padding: 20px 16px;
    }

    .contact-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .contact-card {
        padding: 16px 12px;
    }

    .contact-card span {
        font-size: 13px;
    }

    .schedule li {
        font-size: 13px;
    }

    /* Newsletter */
    .newsletter-section {
        padding: 30px 0;
    }

    .newsletter-box {
        padding: 36px 16px;
    }

    .newsletter-form input {
        font-size: 13px;
        padding: 12px 16px;
    }

    .newsletter-form .btn {
        font-size: 13px;
        padding: 10px 24px;
    }

    /* Footer */
    .site-footer {
        padding: 32px 0 0;
    }

    .footer-grid {
        gap: 26px;
        padding-top: 0;
        padding-bottom: 28px;
    }

    .footer-cols-group {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-top: 0;
    }

    .footer-cols-group .footer-col {
        flex: 1 1 100%;
        width: 100%;
        text-align: center;
    }

    .footer-bottom {
        padding: 12px 16px;
    }

    .footer-bottom p {
        font-size: 11px;
    }

    /* Blog */
    .blog-body {
        padding: 16px;
    }

    .blog-body p {
        font-size: 14px;
        line-height: 20px;
    }

    /* Buttons */
    .btn {
        font-size: 13px;
        padding: 10px 18px;
    }

    /* Books reviews */
    .review-card {
        padding: 14px;
    }

    .review-card p {
        font-size: 13px;
        line-height: 20px;
    }
}

/* ============================================================
   TREATMENT FOR PEOPLE PAGE
   ============================================================ */

/* HERO */
.treatment-hero {
    position: relative;
    padding: 150px 0 80px;
    background: #ffffff;
    overflow: hidden;
    min-height: 837px;
}

.treatment-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.treatment-hero-flower {
    position: absolute;
    top: -156px;
    left: 35px;
    width: 140%;
    height: 140%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.treatment-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 480px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 30px;
}

.treatment-hero-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 900;
    font-size: 125px;
    line-height: 110px;
    letter-spacing: 1px;
    color: #283618;
    margin: 0;
    text-align: center;
    justify-self: center;
    margin-top: -207px;
    margin-right: -429px;
}

.treatment-hero-right-img {
    width: 480px;
    height: auto;
    justify-self: end;
}

/* REIKI FOR PEOPLE */
.reiki-people-section {
    position: relative;
    padding: 50px 0;
    background: linear-gradient(95deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
    overflow: hidden;
}

.reiki-people-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}

.reiki-people-left {
    position: relative;
}

.reiki-people-flower {
    position: absolute;
    left: -289px;
    top: 69%;
    transform: translateY(-50%);
    width: 310px;
    height: auto;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

.reiki-people-text {
    position: relative;
    z-index: 1;
}

.reiki-people-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    vertical-align: middle;
    color: #283618;
    margin-bottom: 18px;
}

.reiki-people-text p {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #7A7A7A;
    margin-bottom: 14px;
}

.reiki-people-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.reiki-people-right img {
    width: 130%;
    max-width: none;
    height: auto;
    margin-left: -15%;
}

/* SESSION PRICING */
.pricing-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

.pricing-bg-flower-right {
    position: absolute;
    right: 8px;
    top: 59%;
    transform: translateY(-50%);
    width: 390px;
    height: auto;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.pricing-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.pricing-left {
    position: relative;
    z-index: 1;
}

.pricing-left-flower {
    position: absolute;
    left: 846px;
    top: 43%;
    transform: translateY(-50%);
    width: 360px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.pricing-left-text {
    position: relative;
    z-index: 1;

}

.pricing-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    vertical-align: middle;
    color: #283618;
    margin-bottom: 24px;
}

.pricing-subtitle {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #283618;
    margin-bottom: 2px;
}

.pricing-left-text p {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #7A7A7A;
}

.pricing-right {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
    z-index: 1;
    margin-right: -195px;
}

.pricing-cards {
    display: flex;
    gap: 24px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.pricing-card {
    width: 247px;
    min-height: 228px;
    background: #F5F1E9;
    padding: 30px 20px;
    text-align: center;
    border: 0.89px solid transparent;
    background-image: linear-gradient(#F5F1E9, #F5F1E9),
        linear-gradient(147.93deg, #284B00 -33.04%, #BFD0AE 98.38%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pricing-card-left {
    border-radius: 0 29.82px 0 29.82px;
}

.pricing-card-right {
    border-radius: 29.82px 0 0 29.82px;
}

.pricing-card h4 {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #283618;
    margin-bottom: 12px;
}

.pricing-amount {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    color: #283618;
    margin-bottom: 12px;
}

.pricing-card p {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: #2F3B16;
}

.pricing-concession {
    width: 100%;
    max-width: 554px;
    min-height: 126px;
    background: #F5F1E9;
    border-radius: 0 29.82px 29.82px 29.82px;
    border: 0.89px solid transparent;
    background-image: linear-gradient(#F5F1E9, #F5F1E9),
        linear-gradient(147.93deg, #284B00 -33.04%, #BFD0AE 98.38%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    padding: 22px 30px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pricing-concession h4 {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #283618;
    margin-bottom: 8px;
}

.pricing-concession p {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #2F3B16;
}

/* WELLBEING */
.wellbeing-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(90deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
    overflow: hidden;
    min-height: 362px;
}

.wellbeing-flower {
    position: absolute;
    left: 109px;
    top: -5px;
    height: 108%;
    width: auto;
    pointer-events: none;
    z-index: 0;
}

.wellbeing-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.4fr 0.5fr;
    gap: 40px;
    align-items: center;
}

.wellbeing-left {

    padding-top: 40px;
}

.wellbeing-text {
    width: 100%;
    margin-left: -14px;
}

.wellbeing-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 500;
    font-size: 48px;
    line-height: 41.12px;
    letter-spacing: 0;
    color: #283618;
    margin-bottom: 38px;
    width: 100%;
}

.wellbeing-text p {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 19px;
    line-height: 30.84px;
    letter-spacing: 0;
    color: #7A7A7A;
}

.wellbeing-right {
    display: flex;
    justify-content: flex-end;
}

.wellbeing-right .btn {
    width: 231px;
    height: 68px;
    border-radius: 0 30px 30px 30px;
    border: 1px solid var(--color-primary);
    padding: 0 22px;
    justify-content: center;
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    margin-top: 38px;
}

/* ABOUT REIKI TREATMENTS FOR PEOPLE (bottom section) */
.tfp-about-section {
    position: relative;
    padding: 100px 0 110px;
    background: #ffffff;
    overflow: hidden;
}

.tfp-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.tfp-about-visual {
    position: relative;
    width: 100%;
    max-width: 490px;
    margin: 0 auto;
}

.tfp-about-flower {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 28px;
    width: 282px;
    height: auto;
    pointer-events: none;
}

.tfp-about-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 490px;
    height: auto;
}

.tfp-about-text {
    position: relative;
    z-index: 1;
    text-align: left;
    max-width: 600px;
}

.tfp-about-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    vertical-align: middle;
    color: #283618;
    margin: 0 0 22px;
    white-space: nowrap;
}

.tfp-about-text p:not(.tfp-about-quote) {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    vertical-align: middle;
    color: #7A7A7A;
    margin: 0 0 16px;
}

.tfp-about-text p:not(.tfp-about-quote):last-child {
    margin-bottom: 0;
}

.tfp-about-quote {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-style: italic;
    font-size: 16px;
    line-height: 63px;
    letter-spacing: 1px;
    text-align: center;
    vertical-align: middle;
    color: #283618;
    margin: 0 0 16px;
}

/* POST TREATMENT & HEALING RESPONSES */
.tfp-post-section {
    position: relative;
    padding: 120px 0 130px;
    background: #ffffff;
    overflow: hidden;
}

.tfp-post-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 490px);
    gap: 56px;
    align-items: center;
}

.tfp-post-text {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.tfp-post-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    vertical-align: middle;
    color: #283618;
    margin: 0 0 22px;
}

.tfp-post-text p {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    vertical-align: middle;
    color: #7A7A7A;
    margin: 0 0 16px;
}

.tfp-post-text p:last-child {
    margin-bottom: 0;
}

.tfp-post-visual {
    position: relative;
    width: 100%;
    max-width: 490px;
    margin: 0 auto;
}

.tfp-post-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 490px;
    height: auto;
}

/* QUESTIONS ABOUT YOUR TREATMENT */
.tfp-questions-section {
    position: relative;
    padding: 100px 0 160px;
    background: linear-gradient(90deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
    overflow: hidden;
    min-height: 280px;
}

.tfp-questions-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: 48px;
    align-items: center;
}

.tfp-questions-text {
    max-width: 720px;
}

.tfp-questions-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    vertical-align: middle;
    color: #283618;
    margin: 0 0 44px;
}

.tfp-questions-text p {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0;
    vertical-align: middle;
    color: #7A7A7A;
    margin: 0;
    max-width: 560px;
}

.tfp-questions-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    padding-right: 8px;
    margin-top: 42px;
    align-self: center;
}

.tfp-questions-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 209px;
    height: 57px;
    padding: 0 20px;
    background: #283618;
    border: 1px solid #283618;
    border-radius: 0 30px 30px 30px;
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: 0;
    text-align: center;
    color: #ffffff;
    white-space: nowrap;
}

.tfp-questions-btn:hover {
    opacity: 0.92;
}

/* WHAT TO EXPECT / NOT EXPECT */
.tfp-expect-section {
    position: relative;
    padding: 90px 0 100px;
    background: #ffffff;
    overflow: hidden;
}

.tfp-expect-flower-center {
    position: absolute;
    left: 40%;
    top: -2%;
    width: 320px;
    height: auto;
    pointer-events: none;
}

.tfp-expect-flower-right {
    position: absolute;
    right: -46px;
    top: 42%;
    transform: translateY(-50%);
    width: 434px;
    height: auto;
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}

.tfp-expect-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 607px;
    gap: 40px;
    align-items: start;
}

.tfp-expect-col--expect {
    position: relative;
    z-index: 1;
    padding-right: 36px;
}

.tfp-expect-col--not {
    position: relative;
    z-index: 3;
}

.tfp-expect-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    vertical-align: middle;
    color: #283618;
    margin: 0 0 28px;
    max-width: 520px;
}

.tfp-expect-title--light {
    color: #ffffff;
    max-width: none;
}

.tfp-expect-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tfp-expect-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 18px;
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0;
    vertical-align: middle;
    color: #7A7A7A;
}

.tfp-expect-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 9px;
    height: 9px;
    background: #262D16;
    border-radius: 0 4px 4px 4px;
}

.tfp-expect-list li:last-child {
    margin-bottom: 0;
}

.tfp-expect-note {
    margin: 22px 0 0;
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0;
    vertical-align: middle;
    color: #7A7A7A;
}

.tfp-expect-panel {
    position: relative;
    width: 607px;
    max-width: 100%;
    min-height: 660px;
    margin-left: auto;
    background: #262D16;
    border-top-left-radius: 0;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    padding: 56px 44px 52px 48px;
    overflow: hidden;
    box-sizing: border-box;
}

.tfp-expect-panel-flower {
    position: absolute;
    top: 0;
    right: 0;
    width: 340px;
    height: auto;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.tfp-expect-panel .tfp-expect-title,
.tfp-expect-panel .tfp-expect-list,
.tfp-expect-panel .tfp-expect-note {
    position: relative;
    z-index: 1;
}

.tfp-expect-list--light li {
    color: #ffffff;
}

.tfp-expect-list--light li::before {
    background: #ffffff;
    border-radius: 0 4px 4px 4px;
}

.tfp-expect-note--light {
    color: #ffffff;
}

/* CLIENT OBLIGATIONS */
.tfp-obligations-section {
    position: relative;
    padding: 90px 0 100px;
    background: linear-gradient(90deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
    overflow: visible;
}

.tfp-obligations-flower {
    position: absolute;
    left: 55px;
    top: 67%;
    transform: translateY(-50%);
    width: 408px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.tfp-obligations-inner {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.tfp-obligations-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    vertical-align: middle;
    color: #283618;
    margin: 0 0 36px;
}

.tfp-obligations-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 567px));
    gap: 28px;
    justify-content: center;
    margin-bottom: 32px;
    padding: 0 16px 16px;
}

.tfp-obligation-card {
    position: relative;
    isolation: isolate;
    width: 567px;
    height: 209px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.tfp-obligation-card--wide {
    width: 926px;
    height: 181px;
}

.tfp-obligation-box {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #F5F1E9;
    border: 0.89px solid #283618;
    border-radius: 0 29.82px 29.82px 29.82px;
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tfp-obligation-card--right .tfp-obligation-box {
    border-radius: 29.82px 0 29.82px 29.82px;
}

.tfp-obligation-card--wide .tfp-obligation-box {
    border-radius: 29.82px 0 29.82px 29.82px;
    padding: 28px 44px;
}

.tfp-obligation-img-1 {
    position: absolute;
    top: 14px;
    left: -3px;
    width: 510px;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

.tfp-obligation-img-2 {
    position: absolute;
    top: 13px;
    right: 508px;
    width: 510px;
    height: auto;
    transform: scaleX(-1);
    transform-origin: right bottom;
    z-index: 2;
    pointer-events: none;
}

.tfp-obligation-img-3 {
    position: absolute;
    top: 11px;
    right: -2px;
    width: 835px;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

.tfp-obligation-box p {
    margin: 0;
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0;
    text-align: center;
    color: #283618;
}

/* ============================================================
   TREATMENT PAGE — RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .treatment-hero-flower {
        top: -100px;
        left: 0;
        width: 120%;
        height: 120%;
    }

    .treatment-hero-title {
        font-size: 100px;
        line-height: 104px;
        margin-top: -160px;
        margin-right: -280px;
    }

    .treatment-hero-right-img {
        width: 380px;
    }

    .reiki-people-right img {
        width: 110%;
        margin-left: -5%;
    }
}

@media (max-width: 1024px) {
    .treatment-hero {
        padding: 130px 0 60px;
        min-height: 560px;
    }

    .treatment-hero-flower {
        top: -60px;
        left: -20px;
        width: 110%;
        height: 110%;
        object-fit: contain;
        object-position: left center;
    }

    .treatment-hero-content {
        min-height: 400px;
        gap: 20px;
    }

    .treatment-hero-title {
        font-size: 80px;
        line-height: 84px;
        margin-top: -149px;
        margin-right: -71px;
        justify-self: end;
        text-align: right;
    }

    .treatment-hero-right-img {
        width: 320px;
    }

    /* Reiki for People */
    .reiki-people-section {
        padding: 60px 0;
    }

    .reiki-people-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .reiki-people-text {
        padding-left: 0;
        text-align: center;
    }

    .reiki-people-flower {
        width: 160px;
        left: -20px;
    }

    .reiki-people-title {
        font-size: 40px;
        line-height: 42px;
    }

    .reiki-people-right img {
        width: 100%;
        max-width: 560px;
        margin-left: 0;
    }

    .reiki-people-right {
        justify-content: center;
    }

    /* Pricing */
    .pricing-section {
        padding: 70px 0;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .pricing-left-flower {
        width: 240px;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .pricing-bg-flower-right {
        width: 240px;
        opacity: 0.4;
    }

    .pricing-title {
        font-size: 40px;
        line-height: 42px;
    }

    .pricing-cards {
        max-width: 560px;
        margin: 0 auto;
    }

    .pricing-concession {
        max-width: 560px;
    }

    /* Wellbeing */
    .wellbeing-section {
        padding: 50px 0 60px;
    }

    .wellbeing-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
        justify-items: center;
    }

    .wellbeing-left {
        padding-top: 20px;
    }

    .wellbeing-flower {
        left: 20px;
    }

    .wellbeing-right {
        justify-content: center;
    }

    .wellbeing-title {
        font-size: 38px;
        line-height: 40px;
    }

    .wellbeing-text p {
        font-size: 17px;
        line-height: 26px;
    }

    /* About treatments */
    .tfp-about-section {
        padding: 70px 0 80px;
    }

    .tfp-about-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .tfp-about-visual {
        max-width: 440px;
    }

    .tfp-about-img {
        max-width: 440px;
    }

    .tfp-about-flower {
        width: 240px;
    }

    .tfp-about-text {
        text-align: center;
    }

    .tfp-about-title {
        font-size: 40px;
        line-height: 42px;
        white-space: normal;
    }

    .tfp-post-section {
        padding: 90px 0 100px;
    }

    .tfp-post-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .tfp-post-text {
        max-width: none;
    }

    .tfp-post-title {
        font-size: 40px;
        line-height: 42px;
    }

    .tfp-post-visual {
        max-width: 440px;
    }

    .tfp-post-img {
        max-width: 440px;
    }

    .tfp-questions-section {
        padding: 70px 0 110px;
        min-height: 0;
    }

    .tfp-questions-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .tfp-questions-text {
        max-width: none;
        text-align: left;
    }

    .tfp-questions-text p {
        max-width: none;
    }

    .tfp-questions-action {
        justify-content: flex-start;
        padding-right: 0;
    }

    .tfp-questions-title {
        font-size: 40px;
        line-height: 42px;
    }

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

    .tfp-expect-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tfp-expect-col--expect {
        padding-right: 0;
    }

    .tfp-expect-flower-center {
        width: 220px;
        left: 40%;
        top: -2%;
        opacity: 0.85;
    }

    .tfp-expect-flower-right {
        width: 300px;
        right: -30px;
        top: 42%;
        opacity: 0.3;
    }

    .tfp-expect-title {
        font-size: 40px;
        line-height: 42px;
        max-width: none;
    }

    .tfp-expect-panel {
        width: 100%;
        min-height: 0;
        margin-left: 0;
        padding: 44px 36px 40px;
    }

    .tfp-expect-panel-flower {
        width: 260px;
    }

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

    .tfp-obligations-flower {
        width: 200px;
        opacity: 0.5;
    }

    .tfp-obligations-title {
        font-size: 40px;
        line-height: 42px;
    }

    .tfp-obligations-row {
        grid-template-columns: 1fr;
        max-width: 567px;
        margin-left: auto;
        margin-right: auto;
    }

    .tfp-obligation-card--wide {
        width: 100%;
        max-width: 926px;
    }
}

@media (max-width: 768px) {
    .treatment-hero {
        padding: 110px 0 40px;
        min-height: auto;
    }

    .treatment-hero-flower {
        display: none;
    }

    .treatment-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        text-align: center;
        justify-items: center;
        min-height: auto;
        height: auto;
    }

    .treatment-hero-title {
        order: 1;
        font-size: 56px;
        line-height: 60px;
        margin: 0;
        text-align: center;
        justify-self: center;
    }

    .treatment-hero-right-img {
        order: 2;
        width: 260px;
        justify-self: center;
    }

    /* Reiki for People */
    .reiki-people-section {
        padding: 50px 0;
    }

    .reiki-people-flower {
        display: none;
    }

    .reiki-people-text {
        padding-left: 0;
        text-align: center;
    }

    .reiki-people-title {
        font-size: 32px;
        line-height: 36px;
    }

    .reiki-people-text p {
        font-size: 15px;
        line-height: 22px;
    }

    .reiki-people-right img {
        width: 100%;
        max-width: 440px;
        margin-left: 0;
    }

    /* Pricing */
    .pricing-section {
        padding: 50px 0;
    }

    .pricing-left-flower,
    .pricing-bg-flower-right,
    .pricing-cards-bg-flower {
        display: none;
    }

    .pricing-left-text {
        padding-left: 0;
        text-align: center;
    }

    .pricing-title {
        font-size: 32px;
        line-height: 36px;
    }

    .pricing-subtitle {
        font-size: 16px;
    }

    .pricing-right {
        margin-right: 0;
        margin-left: 0;
        width: 100%;
        align-items: center;
    }

    .pricing-cards {
        flex-direction: column;
        gap: 16px;
        align-items: center;
        max-width: 100%;
        width: 100%;
    }

    .pricing-card {
        width: 100%;
        max-width: 320px;
        min-height: 200px;
    }

    .pricing-card-right {
        border-radius: 0 29.82px 29.82px 29.82px;
    }

    .pricing-amount {
        font-size: 28px;
    }

    .pricing-concession {
        width: 100%;
        max-width: 320px;
        padding: 20px 22px;
        min-height: auto;
    }

    /* Wellbeing */
    .wellbeing-section {
        padding: 50px 0;
        min-height: auto;
    }

    .wellbeing-flower {
        display: none;
    }

    .wellbeing-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
        justify-items: center;
    }

    .wellbeing-left {
        padding-left: 0;
        padding-top: 0;
    }

    .wellbeing-text {
        text-align: center;
        margin: 0 auto;
    }

    .wellbeing-title {
        font-size: 30px;
        line-height: 34px;
    }

    .wellbeing-text p {
        font-size: 16px;
        line-height: 24px;
    }

    .wellbeing-right .btn {
        width: 200px;
        height: 56px;
        font-size: 14px;
    }

    .tfp-about-section {
        padding: 50px 0 60px;
    }

    .tfp-about-visual,
    .tfp-about-img {
        max-width: 340px;
    }

    .tfp-about-flower {
        width: 200px;
        top: 20px;
    }

    .tfp-about-title {
        font-size: 32px;
        line-height: 36px;
    }

    .tfp-about-text p {
        font-size: 15px;
        line-height: 22px;
    }

    .tfp-about-quote {
        font-size: 14px;
        line-height: 48px;
    }

    .tfp-expect-section {
        padding: 50px 0 60px;
    }

    .tfp-expect-flower-center {
        width: 180px;
    }

    .tfp-expect-flower-right {
        width: 200px;
        display: none;
    }

    .tfp-expect-title {
        font-size: 32px;
        line-height: 36px;
        margin-bottom: 22px;
    }

    .tfp-expect-list li,
    .tfp-expect-note {
        font-size: 15px;
        line-height: 19px;
    }

    .tfp-expect-panel {
        padding: 36px 28px 32px;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
        border-bottom-left-radius: 40px;
    }

    .tfp-expect-panel-flower {
        width: 200px;
    }

    .tfp-obligations-section {
        padding: 50px 0 60px;
    }

    .tfp-obligations-flower {
        width: 160px;
        display: none;
    }

    .tfp-obligations-title {
        font-size: 32px;
        line-height: 36px;
        margin-bottom: 28px;
    }

    .tfp-obligation-card {
        width: 100%;
        max-width: 567px;
        height: auto;
        min-height: 200px;
    }

    .tfp-obligation-card--wide {
        max-width: 926px;
        min-height: 172px;
    }

    .tfp-obligation-box {
        min-height: 200px;
        padding: 28px 24px;
    }

    .tfp-obligation-card--wide .tfp-obligation-box {
        min-height: 172px;
    }

    .tfp-obligation-box p {
        font-size: 17px;
        line-height: 28px;
    }
}

@media (max-width: 480px) {
    .treatment-hero {
        padding: 100px 0 30px;
    }

    .treatment-hero-title {
        font-size: 44px;
        line-height: 50px;
        margin: 0;
    }

    .treatment-hero-right-img {
        width: 220px;
    }

    .reiki-people-section,
    .pricing-section,
    .wellbeing-section,
    .tfp-about-section,
    .tfp-expect-section,
    .tfp-obligations-section {
        padding: 40px 0;
    }

    .tfp-questions-section {
        padding: 48px 0 80px;
    }

    .tfp-questions-title {
        font-size: 32px;
        line-height: 36px;
    }

    .tfp-questions-action {
        margin-top: 24px;
        justify-content: center;
    }

    .tfp-post-section {
        padding: 50px 0;
    }

    .tfp-post-title {
        font-size: 32px;
        line-height: 36px;
    }

    .tfp-post-text p {
        font-size: 15px;
        line-height: 22px;
    }

    .tfp-questions-text p {
        font-size: 15px;
        line-height: 18px;
    }

    .tfp-questions-btn {
        width: 100%;
        max-width: 280px;
    }

    .reiki-people-title,
    .pricing-title {
        font-size: 26px;
        line-height: 30px;
    }

    .reiki-people-text p,
    .pricing-left-text p {
        font-size: 14px;
        line-height: 20px;
    }

    .pricing-amount {
        font-size: 24px;
        line-height: 28px;
    }

    .pricing-card {
        max-width: 280px;
        min-height: 180px;
        padding: 22px 16px;
    }

    .pricing-card h4 {
        font-size: 16px;
    }

    .pricing-card p {
        font-size: 12px;
    }

    .pricing-concession h4 {
        font-size: 16px;
    }

    .pricing-concession p {
        font-size: 12px;
    }

    .wellbeing-title {
        font-size: 24px;
        line-height: 28px;
    }

    .wellbeing-text p {
        font-size: 14px;
        line-height: 22px;
    }

    .wellbeing-right .btn {
        width: 180px;
        height: 52px;
        font-size: 13px;
    }

    .tfp-about-visual,
    .tfp-about-img {
        max-width: 300px;
    }

    .tfp-about-flower {
        width: 170px;
    }

    .tfp-about-title {
        font-size: 26px;
        line-height: 30px;
    }

    .tfp-about-text p {
        font-size: 14px;
        line-height: 20px;
    }

    .tfp-about-quote {
        font-size: 13px;
        line-height: 40px;
    }

    .tfp-expect-title {
        font-size: 26px;
        line-height: 30px;
    }

    .tfp-expect-list li,
    .tfp-expect-note {
        font-size: 14px;
        line-height: 19px;
    }

    .tfp-expect-panel {
        padding: 28px 22px 26px;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;
    }

    .tfp-expect-panel-flower {
        width: 160px;
    }

    .tfp-obligations-title {
        font-size: 26px;
        line-height: 30px;
    }

    .tfp-obligation-box p {
        font-size: 15px;
        line-height: 24px;
    }
}

/* ============================================================
   TREATMENT FOR ANIMAL PAGE  (independent copy)
   ============================================================ */

/* HERO */
.animal-treatment-hero {
    position: relative;
    padding: 150px 0 80px;
    background: #ffffff;
    overflow: hidden;
    min-height: 837px;

}

.animal-treatment-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.animal-treatment-hero-flower {
    position: absolute;
    top: -156px;
    left: 35px;
    width: 140%;
    height: 140%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.animal-treatment-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 480px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 30px;
}

.animal-treatment-hero-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 900;
    font-size: 137px;
    line-height: 110px;
    letter-spacing: 1px;
    color: #283618;
    margin: 0;
    text-align: center;
    justify-self: center;
    margin-top: -212px;
    margin-right: -453px;
}

.animal-treatment-hero-right-img {
    width: 480px;
    height: auto;
    justify-self: end;
}

/* REIKI FOR ANIMAL */
.animal-reiki-section {
    position: relative;
    padding: 0 0 100px 0;
    background: white;
    overflow: hidden;
}

.animal-reiki-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}

.animal-reiki-left {
    position: relative;
}

.animal-reiki-flower {
    position: absolute;
    left: -116px;
    top: 58%;
    transform: translateY(-50%);
    width: 310px;
    height: auto;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

.animal-reiki-text {
    position: relative;
    z-index: 1;
}

.animal-reiki-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    vertical-align: middle;
    color: #283618;
    margin-bottom: 18px;
}

.animal-reiki-text p {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #7A7A7A;
    margin-bottom: 14px;
}

.animal-reiki-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.animal-reiki-right img {
    width: 130%;
    max-width: none;
    height: auto;
    margin-left: -15%;
}

/* SESSION PRICING */
.animal-pricing-section {
    position: relative;
    padding: 39px 0;
    background: linear-gradient(290deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
    overflow: visible;
}

.animal-pricing-bg-flower-right {
    position: absolute;
    right: 8px;
    top: -131px;
    transform: none;
    width: 390px;
    height: auto;
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
}

.animal-pricing-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.animal-pricing-left {
    position: relative;
    z-index: 1;
}

.animal-pricing-left-flower {
    position: absolute;
    left: 894px;
    top: 56%;
    transform: translateY(-50%);
    width: 340px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.animal-pricing-left-text {
    position: relative;
    z-index: 1;

}

.animal-pricing-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    vertical-align: middle;
    color: #283618;
    margin-bottom: 24px;
}

.animal-pricing-subtitle {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #283618;
    margin-bottom: 10px;
}

.animal-pricing-left-text p {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    color: #7A7A7A;
}

.animal-pricing-right {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
    z-index: 1;
    margin-right: -195px;
}

.animal-pricing-cards {
    display: flex;
    gap: 24px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.animal-pricing-card {
    width: 247px;
    min-height: 228px;
    background: #F5F1E9;
    padding: 30px 20px;
    text-align: center;
    border: 0.89px solid transparent;
    background-image: linear-gradient(#F5F1E9, #F5F1E9),
        linear-gradient(147.93deg, #284B00 -33.04%, #BFD0AE 98.38%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.animal-pricing-card-left {
    border-radius: 0 29.82px 0 29.82px;
}

.animal-pricing-card-right {
    border-radius: 29.82px 0 0 29.82px;
}

.animal-pricing-card h4 {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #283618;
    margin-bottom: 12px;
}

.animal-pricing-amount {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    color: #283618;
    margin-bottom: 12px;
}

.animal-pricing-card p {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: #2F3B16;
}

.animal-pricing-concession {
    width: 100%;
    max-width: 554px;
    min-height: 126px;
    background: #F5F1E9;
    border-radius: 0 29.82px 29.82px 29.82px;
    border: 0.89px solid transparent;
    background-image: linear-gradient(#F5F1E9, #F5F1E9),
        linear-gradient(147.93deg, #284B00 -33.04%, #BFD0AE 98.38%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    padding: 22px 30px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.animal-pricing-concession h4 {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #283618;
    margin-bottom: 8px;
}

.animal-pricing-concession p {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #2F3B16;
}

/* WELLBEING */
.animal-wellbeing-section {
    position: relative;
    padding: 100px 0;
    background: white;
    overflow: hidden;
    min-height: 362px;
}

.animal-wellbeing-flower {
    position: absolute;
    left: 85px;
    top: -5px;
    height: 108%;
    width: auto;
    pointer-events: none;
    z-index: 0;
}

.animal-wellbeing-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.4fr 0.5fr;
    gap: 40px;
    align-items: center;
}

.animal-wellbeing-left {

    padding-top: 40px;
}

.animal-wellbeing-text {
    width: 100%;
    margin-left: -14px;
}

.animal-wellbeing-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 500;
    font-size: 48px;
    line-height: 41.12px;
    letter-spacing: 0;
    color: #283618;
    margin-bottom: 38px;
    width: 100%;
}

.animal-wellbeing-text p {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 19px;
    line-height: 30.84px;
    letter-spacing: 0;
    color: #7A7A7A;
}

.animal-wellbeing-right {
    display: flex;
    justify-content: flex-end;
}

.animal-wellbeing-right .btn {
    width: 231px;
    height: 68px;
    border-radius: 0 30px 30px 30px;
    border: 1px solid var(--color-primary);
    padding: 0 22px;
    justify-content: center;
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    margin-top: 38px;
}

/* ============================================================
   TREATMENT FOR ANIMAL — RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .animal-treatment-hero-flower {
        top: -100px;
        left: 0;
        width: 120%;
        height: 120%;
    }

    .animal-treatment-hero-title {
        font-size: 100px;
        line-height: 104px;
        margin-top: -160px;
        margin-right: -280px;
    }

    .animal-treatment-hero-right-img {
        width: 380px;
    }

    .animal-reiki-right img {
        width: 110%;
        margin-left: -5%;
    }
}

@media (max-width: 1024px) {
    .animal-treatment-hero {
        padding: 130px 0 60px;
        min-height: 560px;
    }

    .animal-treatment-hero-flower {
        top: -60px;
        left: -20px;
        width: 110%;
        height: 110%;
        object-fit: contain;
        object-position: left center;
    }

    .animal-treatment-hero-content {
        min-height: 400px;
        gap: 20px;
    }

    .animal-treatment-hero-title {
        font-size: 80px;
        line-height: 84px;
        margin-top: -149px;
        margin-right: -71px;
        justify-self: end;
        text-align: right;
    }

    .animal-treatment-hero-right-img {
        width: 320px;
    }

    .animal-reiki-section {
        padding: 60px 0;
    }

    .animal-reiki-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .animal-reiki-text {
        padding-left: 0;
        text-align: center;
    }

    .animal-reiki-flower {
        width: 160px;
        left: -20px;
    }

    .animal-reiki-title {
        font-size: 40px;
        line-height: 42px;
    }

    .animal-reiki-right img {
        width: 100%;
        max-width: 560px;
        margin-left: 0;
    }

    .animal-reiki-right {
        justify-content: center;
    }

    .animal-pricing-section {
        padding: 70px 0;
    }

    .animal-pricing-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .animal-pricing-left-flower {
        width: 240px;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .animal-pricing-bg-flower-right {
        width: 240px;
        opacity: 0.4;
    }

    .animal-pricing-title {
        font-size: 40px;
        line-height: 42px;
    }

    .animal-pricing-cards {
        max-width: 560px;
        margin: 0 auto;
    }

    .animal-pricing-concession {
        max-width: 560px;
    }

    .animal-wellbeing-section {
        padding: 50px 0 60px;
    }

    .animal-wellbeing-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
        justify-items: center;
    }

    .animal-wellbeing-left {
        padding-top: 20px;
    }

    .animal-wellbeing-flower {
        left: 20px;
    }

    .animal-wellbeing-right {
        justify-content: center;
    }

    .animal-wellbeing-title {
        font-size: 38px;
        line-height: 40px;
    }

    .animal-wellbeing-text p {
        font-size: 17px;
        line-height: 26px;
    }
}

@media (max-width: 768px) {
    .animal-treatment-hero {
        padding: 110px 0 40px;
        min-height: auto;
    }

    .animal-treatment-hero-flower {
        display: none;
    }

    .animal-treatment-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        text-align: center;
        justify-items: center;
        min-height: auto;
        height: auto;
    }

    .animal-treatment-hero-title {
        order: 1;
        font-size: 56px;
        line-height: 60px;
        margin: 0;
        text-align: center;
        justify-self: center;
    }

    .animal-treatment-hero-right-img {
        order: 2;
        width: 260px;
        justify-self: center;
    }

    .animal-reiki-section {
        padding: 50px 0;
    }

    .animal-reiki-flower {
        display: none;
    }

    .animal-reiki-text {
        padding-left: 0;
        text-align: center;
    }

    .animal-reiki-title {
        font-size: 32px;
        line-height: 36px;
    }

    .animal-reiki-text p {
        font-size: 15px;
        line-height: 22px;
    }

    .animal-reiki-right img {
        width: 100%;
        max-width: 440px;
        margin-left: 0;
    }

    .animal-pricing-section {
        padding: 50px 0;
    }

    .animal-pricing-left-flower,
    .animal-pricing-bg-flower-right {
        display: none;
    }

    .animal-pricing-left-text {
        padding-left: 0;
        text-align: center;
    }

    .animal-pricing-title {
        font-size: 32px;
        line-height: 36px;
    }

    .animal-pricing-subtitle {
        font-size: 16px;
    }

    .animal-pricing-right {
        margin-right: 0;
        margin-left: 0;
        width: 100%;
        align-items: center;
    }

    .animal-pricing-cards {
        flex-direction: column;
        gap: 16px;
        align-items: center;
        max-width: 100%;
        width: 100%;
    }

    .animal-pricing-card {
        width: 100%;
        max-width: 320px;
        min-height: 200px;
    }

    .animal-pricing-card-right {
        border-radius: 0 29.82px 29.82px 29.82px;
    }

    .animal-pricing-amount {
        font-size: 28px;
    }

    .animal-pricing-concession {
        width: 100%;
        max-width: 320px;
        padding: 20px 22px;
        min-height: auto;
    }

    .animal-wellbeing-section {
        padding: 50px 0;
        min-height: auto;
    }

    .animal-wellbeing-flower {
        display: none;
    }

    .animal-wellbeing-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
        justify-items: center;
    }

    .animal-wellbeing-left {
        padding-left: 0;
        padding-top: 0;
    }

    .animal-wellbeing-text {
        text-align: center;
        margin: 0 auto;
    }

    .animal-wellbeing-title {
        font-size: 30px;
        line-height: 34px;
    }

    .animal-wellbeing-text p {
        font-size: 16px;
        line-height: 24px;
    }

    .animal-wellbeing-right .btn {
        width: 200px;
        height: 56px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .animal-treatment-hero {
        padding: 100px 0 30px;
    }

    .animal-treatment-hero-title {
        font-size: 44px;
        line-height: 50px;
        margin: 0;
    }

    .animal-treatment-hero-right-img {
        width: 220px;
    }

    .animal-reiki-section,
    .animal-pricing-section,
    .animal-wellbeing-section,
    .animal-testimonials-section.reviews-section {
        padding: 40px 0;
    }

    .animal-reiki-title,
    .animal-pricing-title {
        font-size: 26px;
        line-height: 30px;
    }

    .animal-reiki-text p,
    .animal-pricing-left-text p {
        font-size: 14px;
        line-height: 20px;
    }

    .animal-pricing-amount {
        font-size: 24px;
        line-height: 28px;
    }

    .animal-pricing-card {
        max-width: 280px;
        min-height: 180px;
        padding: 22px 16px;
    }

    .animal-pricing-card h4 {
        font-size: 16px;
    }

    .animal-pricing-card p {
        font-size: 12px;
    }

    .animal-pricing-concession h4 {
        font-size: 16px;
    }

    .animal-pricing-concession p {
        font-size: 12px;
    }

    .animal-wellbeing-title {
        font-size: 24px;
        line-height: 28px;
    }

    .animal-wellbeing-text p {
        font-size: 14px;
        line-height: 22px;
    }

    .animal-wellbeing-right .btn {
        width: 180px;
        height: 52px;
        font-size: 13px;
    }
}

/* ============================================================
   ANIMAL PAGE — TESTIMONIALS (from book reviews)
   ============================================================ */
.animal-testimonials-section.reviews-section {
    padding: 100px 0 140px;
    background: #ffffff;
    overflow: visible;
}

.animal-testimonials-section .container {
    position: relative;
    z-index: 1;
}

.animal-testimonials-flower {
    position: absolute;
    top: 33%;
    right: -20px;
    width: 420px;
    height: auto;
    transform: translateY(-50%) scaleX(-1);
    transform-origin: center center;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .animal-testimonials-section.reviews-section {
        padding: 70px 0 90px;
    }

    .animal-testimonials-flower {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .animal-testimonials-section.reviews-section {
        padding: 50px 0 60px;
    }

    .animal-testimonials-flower {
        display: none;
    }
}

@media (max-width: 480px) {
    .animal-testimonials-section.reviews-section {
        padding: 40px 0 50px;
    }
}

/* ============================================================
   GALLERY SECTION (treatment-for-animal) — 3D coverflow scroll
   ============================================================ */
.gallery-section {
    position: relative;
    padding: 100px 0 130px;
    background: #ffffff;
    overflow: hidden;
}

.gallery-section .container {
    max-width: 100%;
    padding: 0 24px;
}

.gallery-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    text-align: center;
    margin-bottom: 56px;
}

.gallery-scroll-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.gallery-track {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 40px calc(50% - 193px) 32px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.gallery-track::-webkit-scrollbar {
    display: none;
}

.gallery-slide {
    flex: 0 0 430px;
    width: 430px;
    scroll-snap-align: center;
    margin-left: -118px;
    position: relative;
    transform-origin: center center;
}

.gallery-slide:first-child {
    margin-left: 0;
}

.gallery-card {
    position: relative;
    width: 386px;
    height: 504.7154846191406px;
    margin: 0 auto;
    transform-origin: center center;
    transition: transform 0.22s ease;
    will-change: transform;
    opacity: 1;
}

.gallery-card-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 386px;
    height: 504.7154846191406px;
    background: #283618;
    border-top-right-radius: 39.56px;
    border-bottom-right-radius: 39.56px;
    border-bottom-left-radius: 39.56px;
    border-top-left-radius: 0;
    transform: translate(19px, 19px);
    z-index: 0;
    opacity: 1;
}

.gallery-card img {
    position: relative;
    z-index: 1;
    width: 386px;
    height: 504.7154846191406px;
    object-fit: cover;
    border-top-right-radius: 39.56px;
    border-bottom-right-radius: 39.56px;
    border-bottom-left-radius: 39.56px;
    border-top-left-radius: 0;
    opacity: 1;
}

.gallery-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 52px;
}

.gallery-dots .gallery-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #C9C0C7;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.gallery-dots .gallery-dot:hover {
    background: #8a7e87;
}

.gallery-dots .gallery-dot.active {
    background: #283618;
    width: 26px;
    height: 26px;
}

@media (max-width: 1024px) {
    .gallery-section {
        padding: 70px 0 90px;
    }

    .gallery-title {
        font-size: 40px;
        line-height: 44px;
        margin-bottom: 44px;
    }

    .gallery-slide {
        flex: 0 0 300px;
        width: 300px;
        margin-left: -82px;
    }

    .gallery-card,
    .gallery-card-shadow,
    .gallery-card img {
        width: 270px;
        height: 353px;
    }

    .gallery-card-shadow,
    .gallery-card img {
        border-top-right-radius: 27.68px;
        border-bottom-right-radius: 27.68px;
        border-bottom-left-radius: 27.68px;
    }

    .gallery-card-shadow {
        transform: translate(13px, 13px);
    }

    .gallery-track {
        padding: 32px calc(50% - 135px) 24px;
    }
}

@media (max-width: 768px) {
    .gallery-section {
        padding: 50px 0 60px;
    }

    .gallery-title {
        font-size: 32px;
        line-height: 36px;
        margin-bottom: 32px;
    }

    .gallery-slide {
        flex: 0 0 240px;
        width: 240px;
        margin-left: -66px;
    }

    .gallery-card,
    .gallery-card-shadow,
    .gallery-card img {
        width: 212px;
        height: 277px;
    }

    .gallery-card-shadow,
    .gallery-card img {
        border-top-right-radius: 21.72px;
        border-bottom-right-radius: 21.72px;
        border-bottom-left-radius: 21.72px;
    }

    .gallery-card-shadow {
        transform: translate(10px, 10px);
    }

    .gallery-track {
        padding: 28px calc(50% - 106px) 20px;
    }

    .gallery-dots {
        margin-top: 36px;
    }

    .gallery-dots .gallery-dot {
        width: 16px;
        height: 16px;
    }

    .gallery-dots .gallery-dot.active {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .gallery-section {
        padding: 40px 0 50px;
    }

    .gallery-title {
        font-size: 28px;
        line-height: 32px;
    }
}

/* ============================================================
   BOOK PAGE (book.html) — 2-column book section, no reviews
   ============================================================ */
.bookpage-section {
    background: #ffffff;
    padding: 0 0 100px 0;
}

.bookpage-section .floral-books-right {
    right: -180px;
    top: 60px;
    width: 520px;
    opacity: 0.35;
}

.bookpage-grid {
    grid-template-columns: minmax(0, 510px) 1fr;
    gap: 70px;
    align-items: stretch;
}

.bookpage-section .books-text {
    max-width: 510px;
    display: flex;
    flex-direction: column;
}

.bookpage-section .books-text .section-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    margin-bottom: 22px;
}

.bookpage-section .books-text .books-subtitle {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #283618;
    margin: 0 0 0;
}

.bookpage-section .books-text p {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #7A7A7A;
    margin-bottom: 18px;
}

.bookpage-section .books-text .btn {
    margin-top: 14px;
    align-self: flex-start;
}

.bookpage-section .bookpage-cover {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bookpage-section .bookpage-cover img {
    max-width: 150%;
    width: 115%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    margin-right: 0;
    margin-top: 42px;
}

.book-intro .books-subtitle {
    display: inline;
}

.book-intro p {
    display: inline;
}

/* ============================================================
   REVIEWS SECTION (book.html) — horizontal scroll + dots
   ============================================================ */
.reviews-section {
    position: relative;
    padding: 100px 230px 200px;
    background: linear-gradient(270deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
    overflow: hidden;
}

.reviews-book-flower {
    position: absolute;
    top: 72%;
    left: 12px;
    transform: translateY(-50%);
    width: 420px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.reviews-pricing-flower {
    position: absolute;
    top: 42%;
    right: 5px;
    transform: translateY(-50%);
    width: 440px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.reviews-section .container {
    position: relative;
    z-index: 1;
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.reviews-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    text-align: center;
    margin-bottom: 50px;
}

.reviews-scroll-wrapper {
    position: relative;
    width: calc(4 * 335px + 3 * 16px);
    max-width: 100%;
    margin: 0 auto;
}

.reviews-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 0 18px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: flex-start;
}

.reviews-track::-webkit-scrollbar {
    display: none;
}

.reviews-card {
    position: relative;
    isolation: isolate;
    flex: 0 0 335px;
    width: 335px;
    height: 373px;
    scroll-snap-align: start;
    background: #F5F1E9;
    border: 0.89px solid #283618;
    border-radius: 0 29.82px 29.82px 29.82px;
    padding: 22px 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.reviews-card .stars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1;
    margin-bottom: -12px;
}

.reviews-card .stars .star-icon {
    width: 18px;
    height: 18px;
}

.reviews-card .reviews-name {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 15.98px;
    letter-spacing: 0;
    color: #283618;
    text-align: center;
    margin: 6px 0 4px;
}

.reviews-card .reviews-quote {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0;
    color: #283618;
    text-align: center;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reviews-card .reviews-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    gap: 14px;
    margin: 4px 0 15px;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 200;
    font-size: 10px;
    line-height: 14px;
    color: #283618;
}

.reviews-card .reviews-role {
    text-align: center;
}

.reviews-card .reviews-creds {
    text-align: center;
    border-left: 1px solid #283618;
    padding-left: 14px;
}

.reviews-card .reviews-btn {
    align-self: center;
    margin-top: 4px;
    padding: 10px 22px;
    font-size: 13px;
}

.reviews-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 90px;
}

.reviews-dots .reviews-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #C9C0C7;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.reviews-dots .reviews-dot:hover {
    background: #8a7e87;
}

.reviews-dots .reviews-dot.active {
    background: #283618;
    width: 26px;
    height: 26px;
}

/* Reviews responsive */
@media (max-width: 1200px) {

    .reviews-book-flower,
    .reviews-pricing-flower {
        width: 200px;
        opacity: 0.35;
    }
}

@media (max-width: 1024px) {
    .bookpage-section {
        padding: 70px 0;
    }

    .bookpage-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .bookpage-section .books-text {
        max-width: none;
        align-items: center;
    }

    .bookpage-section .books-cover {
        order: -1;
    }

    .bookpage-section .bookpage-cover img,
    .bookpage-section .books-cover img {
        max-width: 320px;
        width: auto;
        height: auto;
    }

    .bookpage-section .books-text .btn {
        margin: 14px auto 0;
        align-self: center;
    }

    .reviews-section {
        min-height: 0;
        padding: 70px 0 60px;
    }

    .reviews-title {
        font-size: 36px;
        line-height: 40px;
        margin-bottom: 36px;
    }

    .reviews-book-flower,
    .reviews-pricing-flower {
        width: 160px;
        opacity: 0.25;
    }
}

@media (max-width: 768px) {
    .bookpage-section {
        padding: 50px 0;
    }

    .bookpage-section .books-text .section-title {
        font-size: 36px;
        line-height: 40px;
    }

    .bookpage-section .bookpage-cover,
    .bookpage-section .books-cover {
        height: auto;
        width: auto;
    }

    .bookpage-section .bookpage-cover img,
    .bookpage-section .books-cover img {
        max-width: 260px;
        width: auto;
        height: auto;
        object-fit: contain;
        margin: 0 auto;
    }

    .bookpage-section .floral-books-right {
        display: none;
    }

    .reviews-section {
        min-height: 0;
        padding: 50px 0 40px;
    }

    .reviews-title {
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 28px;
    }

    .reviews-card {
        flex: 0 0 290px;
        width: 290px;
        height: 360px;
        padding: 20px 18px;
    }

    .reviews-book-flower,
    .reviews-pricing-flower {
        display: none;
    }
}

@media (max-width: 480px) {
    .bookpage-section {
        padding: 40px 0;
    }

    .bookpage-section .books-text .section-title {
        font-size: 28px !important;
        line-height: 32px !important;
    }

    .bookpage-section .books-text p,
    .bookpage-section .books-text .books-subtitle {
        font-size: 14px;
        line-height: 22px;
    }

    .bookpage-section .bookpage-cover img,
    .bookpage-section .books-cover img {
        max-width: 260px;
        width: auto;
        height: auto;
    }

    .reviews-title {
        font-size: 24px;
        line-height: 28px;
    }

    .reviews-card h4 {
        font-size: 16px;
        line-height: 20px;
    }

    .reviews-card p {
        font-size: 13px;
        line-height: 19px;
    }
}

/* ============================================================
   REVIEW MODAL (popup)
   ============================================================ */
.reviews-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.reviews-modal.open {
    display: flex;
}

.reviews-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 12, 0.45);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

.reviews-modal-card {
    position: relative;
    isolation: isolate;
    width: 907.41px;
    height: 897.51px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    border: 2.94px solid transparent;
    border-radius: 0 90px 20px 90px;
    background:
        linear-gradient(#F5F1E9, #F5F1E9) padding-box,
        linear-gradient(147.93deg, #284B00 -33.04%, #BFD0AE 98.38%) border-box;
    box-shadow: 0px 3.6px 18px 0px rgba(40, 54, 24, 0.30);
    padding: 70px 80px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reviews-modal-close {
    position: absolute;
    top: 70px;
    right: 88px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    transition: transform 0.15s ease;
}

.reviews-modal-close-bg {
    display: block;
    width: auto;
    height: auto;
}

.reviews-modal-close-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    pointer-events: none;
}

.reviews-modal-close:hover {
    transform: scale(1.05);
}

.reviews-modal-stars {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
}

.reviews-modal-stars .star-icon {
    width: 42px;
    height: 42px;
    fill: var(--color-star);
    stroke: var(--color-star);
}

.reviews-modal-name {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 500;
    font-size: 49.51px;
    line-height: 52.56px;
    letter-spacing: 0;
    text-align: center;
    color: #283618;
    margin: 0 0 36px;
}

.reviews-modal-body {
    width: 100%;
}

.reviews-modal-body p {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-size: 17.1px;
    line-height: 24.31px;
    letter-spacing: 0;
    text-align: center;
    color: #283618;
    margin: 0 0 22px;
}

.reviews-modal-body p:last-child {
    margin-bottom: 0;
}

.reviews-modal-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: auto;
    padding-top: 32px;
    width: 100%;
    max-width: 560px;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: #283618;
    text-align: center;
    align-items: center;
}

.reviews-modal-creds {
    border-left: 1px solid #283618;
    padding-left: 30px;
}

@media (max-width: 1024px) {
    .reviews-modal-card {
        padding: 56px 48px 48px;
        border-radius: 0 70px 70px 70px;
    }

    .reviews-modal-name {
        font-size: 38px;
        line-height: 42px;
        margin-bottom: 24px;
    }

    .reviews-modal-body p {
        font-size: 16px;
        line-height: 23px;
    }
}

@media (max-width: 768px) {
    .reviews-modal {
        padding: 12px;
        align-items: flex-start;
    }

    .reviews-modal-card {
        width: 100%;
        height: auto;
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 44px 20px 28px;
        border-radius: 0 36px 36px 36px;
        overflow-y: auto;
        overflow-x: hidden;
        margin: auto;
    }

    .reviews-modal-card::before {
        display: none;
    }

    .reviews-modal-body br {
        display: none;
    }

    .reviews-modal-close {
        top: 12px;
        right: 14px;
        transform: scale(0.65);
        transform-origin: top right;
    }

    .reviews-modal-close:hover {
        transform: scale(0.7);
    }

    .reviews-modal-stars {
        gap: 6px;
        margin-bottom: 12px;
    }

    .reviews-modal-stars .star-icon {
        width: 20px;
        height: 20px;
    }

    .reviews-modal-name {
        font-size: 26px;
        line-height: 30px;
        margin-bottom: 16px;
    }

    .reviews-modal-body {
        max-width: none;
    }

    .reviews-modal-body p {
        font-size: 13.5px;
        line-height: 20px;
        margin-bottom: 12px;
    }

    .reviews-modal-meta {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 18px;
        font-size: 12px;
        max-width: none;
    }

    .reviews-modal-creds {
        border-left: none;
        border-top: 1px solid #283618;
        padding-left: 0;
        padding-top: 10px;
    }
}

@media (max-width: 480px) {
    .reviews-modal {
        padding: 8px;
    }

    .reviews-modal-card {
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        padding: 40px 16px 24px;
        border-radius: 0 28px 28px 28px;
    }

    .reviews-modal-close {
        top: 10px;
        right: 10px;
        transform: scale(0.55);
    }

    .reviews-modal-close:hover {
        transform: scale(0.6);
    }

    .reviews-modal-name {
        font-size: 22px;
        line-height: 26px;
        margin-bottom: 12px;
    }

    .reviews-modal-body p {
        font-size: 13px;
        line-height: 19px;
    }
}

/* ============================================================
   STORY PAGE (story.html) — About + 3 cards
   ============================================================ */

/* About Michele section */
.story-about-section {
    position: relative;
    padding: 90px 0;
    background: #ffffff;
    overflow: hidden;

}

.story-about-flower-left,
.story-about-flower-right {
    position: absolute;
    top: 77%;
    transform: translateY(-50%);
    width: 330px;
    margin-left: 339px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.story-about-flower-left {
    left: -50px;
}

.story-about-flower-right {
    right: -50px;
    transform: translateY(-50%) scaleX(-1);
    left: 1109px;
    width: 480px;
}

.story-about-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 0;
    align-items: center;
}

.story-about-img-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
}

.story-about-img {
    width: 100%;
    max-width: 360px;
    margin-right: -103px;
    height: auto;
    border-radius: 12px;
}

.story-about-panel {
    position: relative;
    background: #283618;
    color: #ffffff;
    border-radius: 0 30px 30px 30px;
    padding: 100px;
    margin-left: -187px;
    min-height: 640px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    overflow: hidden;
    margin-right: 114px;
}

.story-about-panel-flower {
    position: absolute;
    right: 2px;
    top: 40px;
    width: 260px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.story-about-panel>.story-about-title,
.story-about-panel>p {
    position: relative;
    z-index: 1;
}

.story-about-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #ffffff;
    text-align: center;
    margin: 0 0 18px;
}

.story-about-panel p {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0;
    color: #ffffff;
    margin: 0;
}

/* Story cards section */
.story-cards-section {
    position: relative;
    padding: 80px 0 110px;
    background: linear-gradient(270deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
    overflow: hidden;
}

.story-cards-flower-left,
.story-cards-flower-right {
    position: absolute;
    top: 68%;
    transform: translateY(-50%);
    width: 470px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.story-cards-flower-left {
    left: -50px;
}

.story-cards-flower-right {
    right: -16px;
    top: 320px;
}

.story-cards-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    align-items: stretch;
}

.story-card {
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.story-card-thumb {

    overflow: hidden;
    border-radius: 0 24px 24px 24px;

}

.story-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-base);
}

.story-card:hover .story-card-thumb img {
    transform: scale(1.04);
}

.story-card-body {
    padding: 24px 24px 28px;
    background: #F5F1E9;
    border: 1px solid #283618;
    border-radius: 0 24px 24px 24px;
    box-shadow: 5px 6px 0 0 #283618;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.story-card-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 32px;
    letter-spacing: 1px;
    color: #283618;
    text-align: center;
    margin: 0;
}

.story-card-body p {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #7A7A7A;
    text-align: center;
    margin: 0;
}

/* Story page responsive */
@media (max-width: 1200px) {
    .story-about-panel {
        padding: 60px 50px 60px 90px;
    }

    .story-about-flower-left,
    .story-about-flower-right,
    .story-cards-flower-left,
    .story-cards-flower-right {
        width: 180px;
        opacity: 0.4;
    }
}

@media (max-width: 1024px) {
    .story-about-section {
        padding: 70px 0;
    }

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

    .story-about-img-wrap {
        display: none;
        margin-bottom: 0;
    }

    .story-about-panel {
        padding: 80px 40px 50px;
        margin-left: 0;
        min-height: 0;
        text-align: center;
    }

    .story-about-title {
        font-size: 38px;
        line-height: 42px;
    }

    .story-cards-section {
        padding: 60px 0 80px;
    }

    .story-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .story-cards-flower-left,
    .story-cards-flower-right,
    .story-about-flower-left,
    .story-about-flower-right {
        width: 140px;
        opacity: 0.3;
    }
}

@media (max-width: 768px) {
    .story-about-section {
        padding: 50px 0;
    }

    .story-about-img {
        max-width: 280px;
    }

    .story-about-panel {
        padding: 70px 24px 36px;
        border-radius: 0 22px 22px 22px;
    }

    .story-about-title {
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 14px;
    }

    .story-about-panel p {
        font-size: 14px;
        line-height: 22px;
    }

    .story-cards-section {
        padding: 50px 0 70px;
    }

    .story-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .story-card-title {
        font-size: 22px;
        line-height: 28px;
    }

    .story-card-body p {
        font-size: 14px;
        line-height: 22px;
    }

    .story-about-flower-left,
    .story-about-flower-right,
    .story-cards-flower-left,
    .story-cards-flower-right {
        display: none;
    }
}

@media (max-width: 480px) {
    .story-about-img {
        max-width: 220px;
    }

    .story-about-title {
        font-size: 24px;
        line-height: 28px;
    }

    .story-about-panel p,
    .story-card-body p {
        font-size: 13px;
        line-height: 20px;
    }

    .story-card-title {
        font-size: 20px;
        line-height: 26px;
    }
}

/* ============================================================
   ART PAGE — Flowers & Botanicals section
   ============================================================ */
.art-flowers-section {
    position: relative;
    padding: 0 0 100px;
    background: linear-gradient(90deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
    overflow: hidden;
}

.art-flowers-flower-left {
    position: absolute;
    top: 66%;
    left: -39px;
    transform: translateY(-50%);
    width: 450px;
    margin-left: 127px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.art-flowers-flower-right {
    position: absolute;
    top: 69%;
    right: -140px;
    transform: translateY(-50%);
    width: 450px;
    margin-right: 127px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.art-flowers-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.art-flowers-text {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 199px;
    margin-left: 100px;
}

.art-flowers-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    margin: 0;
}

.art-flowers-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    max-width: 420px;
}

.art-flowers-tags li {
    position: relative;
    height: 33px;
    padding: 4px 18px;
    background: #E7E0E6;
    border: 1px solid rgba(38, 45, 22, 0.1);
    border-radius: 100px;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 1px;
    color: #283618;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Individual tag positioning — adjust top/left to move each tag independently */
.art-flowers-tag-cherry {
    top: 0;
    left: 0;
}

.art-flowers-tag-nasturtium {
    top: 0;
    left: 0;
}

.art-flowers-tag-tulip {
    top: 0;
    left: 0;
}

.art-flowers-tag-foxglove {
    top: 0;
    left: 0;
}

.art-flowers-caption {
    display: block;
    margin-top: 6px;
}

.art-flowers-caption-dark {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 12px;
    line-height: 22px;
    color: #000000;
    margin-right: 10px;
}

.art-flowers-caption-grey {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0;
    color: #8a8a8a;
}

.art-flowers-collage {
    display: flex;
    justify-content: end;
    align-items: center;
}

.art-flowers-collage img {
    width: 100%;
    max-width: 380px;
    height: auto;
    margin-top: 142px;
}

/* Responsive */
@media (max-width: 1024px) {
    .art-flowers-section {
        padding: 50px 0 70px;
    }

    .art-flowers-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .art-flowers-text {
        align-items: center;
        margin-top: 0;
        margin-left: 0;
    }

    .art-flowers-tags {
        justify-content: center;
        max-width: none;
    }

    .art-flowers-caption {
        text-align: center;
    }

    .art-flowers-collage {
        justify-content: center;
    }

    .art-flowers-collage img {
        max-width: 450px;
        margin: 0 auto;
    }

    .art-flowers-title {
        font-size: 36px;
        line-height: 40px;
    }

    .art-flowers-flower-left,
    .art-flowers-flower-right {
        width: 200px;
        opacity: 0.35;
        margin: 0;
    }
}

@media (max-width: 768px) {
    .art-flowers-section {
        padding: 50px 0 70px;
    }

    .art-flowers-title {
        font-size: 32px;
        line-height: 36px;
    }

    .art-flowers-tags {
        gap: 10px 12px;
    }

    .art-flowers-tags li {
        height: 30px;
        font-size: 11px;
        padding: 4px 16px;
    }

    .art-flowers-caption-dark {
        font-size: 12px;
        line-height: 20px;
        display: block;
        margin-right: 0;
        margin-bottom: 6px;
    }

    .art-flowers-caption-grey {
        font-size: 16px;
        line-height: 22px;
    }

    .art-flowers-collage img {
        max-width: 420px;
        margin: 0 auto;
    }

    .art-flowers-flower-left,
    .art-flowers-flower-right {
        display: none;
    }
}

@media (max-width: 480px) {
    .art-flowers-section {
        padding: 32px 0 48px;
    }

    .art-flowers-title {
        font-size: 24px;
        line-height: 28px;
    }

    .art-flowers-tags li {
        font-size: 9px;
        padding: 3px 12px;
    }

    .art-flowers-collage img {
        max-width: 240px;
    }
}

/* ============================================================
   ART PAGE — Floral Impressions section (mirrored layout)
   ============================================================ */
.art-impressions-section {
    position: relative;
    min-height: 900px;
    padding: 60px 0 100px;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.art-impressions-section>.container {
    width: 100%;
}

.art-impressions-flower-right {
    position: absolute;
    top: 53%;
    right: -126px;
    transform: translateY(-50%);
    width: 450px;
    margin-right: 127px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.art-impressions-flower-left {
    position: absolute;
    top: 46%;
    left: 26px;
    transform: translateY(-50%);
    width: 450px;
    margin-left: 127px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.art-impressions-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.art-impressions-collage {
    display: flex;
    justify-content: center;
    align-items: center;
}

.art-impressions-collage img {
    width: 112%;
    max-width: 380px;
    height: auto;
}

.art-impressions-text {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 22px;

}

.art-impressions-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    margin: 0;
}

.art-impressions-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px 14px;
    max-width: 460px;
}

.art-impressions-tags li {
    position: relative;
    height: 33px;
    padding: 4px 22px;
    background: #E7E0E6;
    border: 1px solid rgba(38, 45, 22, 0.1);
    border-radius: 100px;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 1px;
    color: #283618;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Individual tag positioning — adjust top/left to move each tag independently */
.art-impressions-tag-poppy {
    top: 0;
    left: 0;
}

.art-impressions-tag-garden {
    top: 0;
    left: 0;
}

.art-impressions-tag-wisteria {
    top: 0;
    left: 0;
}

.art-impressions-tag-daffodils {
    top: 0;
    left: 0;
}

.art-flowers-tag-foxglove {
    left: 10px;
}

.art-impressions-caption {
    display: block;
    margin-top: 6px;
}

.art-impressions-caption-dark {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 12px;
    line-height: 22px;
    color: #000000;
    margin-right: 10px;
}

.art-impressions-caption-grey-1 {
    display: inline;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    color: #8a8a8a;
}

.art-impressions-caption-grey-2 {
    display: block;
    text-align: right;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    color: #8a8a8a;
}

/* Responsive */
@media (max-width: 1024px) {
    .art-impressions-section {
        min-height: 0;
        padding: 50px 0 70px;
        display: block;
    }

    .art-impressions-section>.container {
        width: auto;
    }

    .art-impressions-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .art-impressions-collage {
        order: 1;
    }

    .art-impressions-text {
        order: 0;
        align-items: center;
    }

    .art-impressions-tags {
        justify-content: center;
        max-width: none;
    }

    .art-impressions-caption {
        text-align: center;
    }

    .art-impressions-caption-grey-2 {
        text-align: center;
    }

    .art-impressions-title {
        font-size: 36px;
        line-height: 40px;
    }

    .art-impressions-collage img {
        max-width: 450px;
        margin: 0 auto;
    }

    .art-impressions-flower-left,
    .art-impressions-flower-right {
        width: 200px;
        opacity: 0.35;
        margin: 0;
    }
}

@media (max-width: 768px) {
    .art-impressions-section {
        padding: 50px 0 70px;
    }

    .art-impressions-title {
        font-size: 32px;
        line-height: 36px;
    }

    .art-impressions-tags {
        gap: 10px 12px;
    }

    .art-impressions-tags li {
        height: 30px;
        font-size: 11px;
        padding: 4px 16px;
    }

    .art-impressions-caption-dark {
        font-size: 12px;
        line-height: 20px;
    }

    .art-impressions-caption-grey-1,
    .art-impressions-caption-grey-2 {
        font-size: 16px;
        line-height: 22px;
    }

    .art-impressions-collage img {
        max-width: 420px;
        margin: 0 auto;
    }

    .art-impressions-flower-left,
    .art-impressions-flower-right {
        display: none;
    }
}

@media (max-width: 480px) {
    .art-impressions-section {
        padding: 32px 0 48px;
    }

    .art-impressions-title {
        font-size: 24px;
        line-height: 28px;
    }

    .art-impressions-collage img {
        max-width: 240px;
    }

    .art-impressions-tags li {
        font-size: 9px;
        padding: 3px 12px;
    }
}

/* ============================================================
   ART PAGE — Per-section INDEPENDENT styles
   Each section (Landscapes, Tropical Toucan, Birds, Everyday
   Wonders) has its OWN class for every element. Editing any
   rule below affects only that one section.
   ============================================================ */

/* ===== LANDSCAPES (text left, image right) ===== */
.art-landscapes-section {
    position: relative;
    padding: 60px 0 100px;
    background: linear-gradient(90deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
    overflow: hidden;
}

.art-landscapes-flower-left {
    position: absolute;
    top: 62%;
    left: 1308px;
    transform: translateY(-50%);
    width: 450px;
    margin-left: 127px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.art-landscapes-flower-right {
    position: absolute;
    top: 43%;
    right: 1383px;
    transform: translateY(-50%) scaleX(-1);
    width: 400px;
    margin-right: 127px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.art-landscapes-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.art-landscapes-text {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.art-landscapes-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    margin: 0;
}

.art-landscapes-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    max-width: 420px;
}

.art-landscapes-tags li {
    position: relative;
    height: 33px;
    padding: 4px 18px;
    background: #E7E0E6;
    border: 1px solid rgba(38, 45, 22, 0.1);
    border-radius: 100px;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 1px;
    color: #283618;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.art-landscapes-tag-hills,
.art-landscapes-tag-coastal,
.art-landscapes-tag-lotus,
.art-landscapes-tag-fence {
    top: 0;
    left: 0;
}

.art-landscapes-caption {
    display: block;
    margin-top: 6px;
}

.art-landscapes-caption-dark {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
    line-height: 22px;
    color: #000000;
    margin-right: 10px;
}

.art-landscapes-caption-grey {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    color: #8a8a8a;
}

.art-landscapes-collage {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.art-landscapes-img {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: auto;
    /* top / left / right / bottom for free nudging */
}

/* ===== TROPICAL TOUCAN (image left, text right) ===== */
.art-toucan-section {
    position: relative;
    min-height: 900px;
    padding: 60px 0 100px;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.art-toucan-section>.container {
    width: 100%;
}

.art-toucan-flower-right {
    position: absolute;
    top: 49%;
    right: -40px;
    transform: translateY(-50%);
    width: 430px;
    margin-right: 127px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.art-toucan-flower-left {
    position: absolute;
    top: 47%;
    left: -40px;
    transform: translateY(-50%);
    width: 430px;
    margin-left: 127px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.art-toucan-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.art-toucan-collage {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.art-toucan-img {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: auto;
}

.art-toucan-text {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 22px;
}

.art-toucan-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    margin: 0;
}

.art-toucan-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px 14px;
    max-width: 460px;
}

.art-toucan-tags li {
    position: relative;
    height: 33px;
    padding: 4px 22px;
    background: #E7E0E6;
    border: 1px solid rgba(38, 45, 22, 0.1);
    border-radius: 100px;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 1px;
    color: #283618;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.art-toucan-tag-pathway,
.art-toucan-tag-mountain,
.art-toucan-tag-toucan,
.art-toucan-tag-bushland {
    top: 0;
    left: 0;
}

.art-toucan-caption {
    display: block;
    margin-top: 6px;
}

.art-toucan-caption-dark {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
    line-height: 22px;
    color: #000000;
    margin-right: 10px;
}

.art-toucan-caption-grey-1 {
    display: inline;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    color: #8a8a8a;
}

.art-toucan-caption-grey-2 {
    display: block;
    text-align: right;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    color: #8a8a8a;
}

/* ===== BIRDS, CREATURES & WHIMSY (text left, image right) ===== */
.art-birds-section {
    position: relative;
    padding: 60px 0 100px;
    background: linear-gradient(90deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
    overflow: hidden;
}

.art-birds-flower-left {
    position: absolute;
    top: 62%;
    left: 1306px;
    transform: translateY(-50%);
    width: 450px;
    margin-left: 127px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.art-birds-flower-right {
    position: absolute;
    top: 43%;
    right: 1383px;
    transform: translateY(-50%) scaleX(-1);
    width: 400px;
    margin-right: 127px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.art-birds-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.art-birds-text {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.art-birds-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    margin: 0;
}

.art-birds-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    max-width: 420px;
}

.art-birds-tags li {
    position: relative;
    height: 33px;
    padding: 4px 18px;
    background: #E7E0E6;
    border: 1px solid rgba(38, 45, 22, 0.1);
    border-radius: 100px;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 1px;
    color: #283618;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.art-birds-tag-toucan,
.art-birds-tag-mouse,
.art-birds-tag-lavender {
    top: 0;
    left: 0;
}

.art-birds-caption {
    display: block;
    margin-top: 6px;
}

.art-birds-caption-dark {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
    line-height: 22px;
    color: #000000;
    margin-right: 10px;
}

.art-birds-caption-grey {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    color: #8a8a8a;
}

.art-birds-collage {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.art-birds-img {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: auto;
}

/* ===== EVERYDAY WONDERS (image left, text right) ===== */
.art-wonders-section {
    position: relative;
    min-height: 900px;
    padding: 60px 0 100px;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.art-wonders-section>.container {
    width: 100%;
}

.art-wonders-flower-right {
    position: absolute;
    top: 50%;
    right: -40px;
    transform: translateY(-50%);
    width: 450px;
    margin-right: 127px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.art-wonders-flower-left {
    position: absolute;
    top: 46%;
    left: 406px;
    transform: translateY(-50%) scaleX(-1);
    width: 460px;
    margin-left: 127px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.art-wonders-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.art-wonders-collage {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.art-wonders-img {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: auto;
}

.art-wonders-text {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 22px;
}

.art-wonders-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    margin: 0;
}

.art-wonders-tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px 14px;
    max-width: 460px;
}

.art-wonders-tag-stones,
.art-wonders-tag-truck,
.art-wonders-tag-standing {
    top: 0;
    left: 0;
}

.art-wonders-tags li {
    position: relative;
    height: 33px;
    padding: 4px 22px;
    background: #E7E0E6;
    border: 1px solid rgba(38, 45, 22, 0.1);
    border-radius: 100px;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 1px;
    color: #283618;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.art-wonders-caption {
    display: block;
    margin-top: 6px;
}

.art-wonders-caption-dark {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
    line-height: 22px;
    color: #000000;
    margin-right: 10px;
}

.art-wonders-caption-grey-1 {
    display: inline;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    color: #8a8a8a;
}

.art-wonders-caption-grey-2 {
    display: block;
    text-align: right;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    color: #8a8a8a;
}

/* ===== Mobile responsive for all 4 sections ===== */
@media (max-width: 1024px) {

    .art-landscapes-section,
    .art-toucan-section,
    .art-birds-section,
    .art-wonders-section {
        min-height: 0;
        padding: 50px 0 70px;
        display: block;
    }

    .art-toucan-section>.container,
    .art-wonders-section>.container {
        width: auto;
    }

    .art-landscapes-grid,
    .art-toucan-grid,
    .art-birds-grid,
    .art-wonders-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .art-toucan-collage,
    .art-wonders-collage {
        order: 1;
    }

    .art-toucan-text,
    .art-wonders-text {
        order: 0;
    }

    .art-landscapes-text,
    .art-toucan-text,
    .art-birds-text,
    .art-wonders-text {
        align-items: center;
    }

    .art-landscapes-tags,
    .art-toucan-tags,
    .art-birds-tags,
    .art-wonders-tags {
        justify-content: center;
        max-width: none;
    }

    .art-toucan-caption-grey-2,
    .art-wonders-caption-grey-2 {
        text-align: center;
    }

    .art-landscapes-caption,
    .art-toucan-caption,
    .art-birds-caption,
    .art-wonders-caption {
        text-align: center;
    }

    .art-landscapes-title,
    .art-toucan-title,
    .art-birds-title,
    .art-wonders-title {
        font-size: 36px;
        line-height: 40px;
    }

    .art-landscapes-img,
    .art-toucan-img,
    .art-birds-img,
    .art-wonders-img {
        max-width: 450px;
        margin: 0 auto;
    }

    .art-landscapes-flower-left,
    .art-landscapes-flower-right,
    .art-toucan-flower-left,
    .art-toucan-flower-right,
    .art-birds-flower-left,
    .art-birds-flower-right,
    .art-wonders-flower-left,
    .art-wonders-flower-right {
        width: 200px;
        opacity: 0.35;
        margin: 0;
    }
}

@media (max-width: 768px) {

    .art-landscapes-section,
    .art-toucan-section,
    .art-birds-section,
    .art-wonders-section {
        padding: 50px 0 70px;
    }

    .art-landscapes-title,
    .art-toucan-title,
    .art-birds-title,
    .art-wonders-title {
        font-size: 32px;
        line-height: 36px;
    }

    .art-landscapes-tags,
    .art-toucan-tags,
    .art-birds-tags,
    .art-wonders-tags {
        gap: 10px 12px;
    }

    .art-landscapes-tags li,
    .art-toucan-tags li,
    .art-birds-tags li,
    .art-wonders-tags li {
        height: 30px;
        font-size: 11px;
        padding: 4px 16px;
    }

    .art-landscapes-caption-dark,
    .art-toucan-caption-dark,
    .art-birds-caption-dark,
    .art-wonders-caption-dark {
        font-size: 12px;
        line-height: 20px;
    }

    .art-landscapes-caption-grey,
    .art-birds-caption-grey,
    .art-toucan-caption-grey-1,
    .art-toucan-caption-grey-2,
    .art-wonders-caption-grey-1,
    .art-wonders-caption-grey-2 {
        font-size: 16px;
        line-height: 22px;
    }

    .art-landscapes-img,
    .art-toucan-img,
    .art-birds-img,
    .art-wonders-img {
        max-width: 420px;
        margin: 0 auto;
    }

    .art-landscapes-flower-left,
    .art-landscapes-flower-right,
    .art-toucan-flower-left,
    .art-toucan-flower-right,
    .art-birds-flower-left,
    .art-birds-flower-right,
    .art-wonders-flower-left,
    .art-wonders-flower-right {
        display: none;
    }
}

@media (max-width: 480px) {

    .art-landscapes-section,
    .art-toucan-section,
    .art-birds-section,
    .art-wonders-section {
        padding: 32px 0 48px;
    }

    .art-landscapes-title,
    .art-toucan-title,
    .art-birds-title,
    .art-wonders-title {
        font-size: 24px;
        line-height: 28px;
    }

    .art-landscapes-tags li,
    .art-toucan-tags li,
    .art-birds-tags li,
    .art-wonders-tags li {
        font-size: 9px;
        padding: 3px 12px;
    }

    .art-landscapes-img,
    .art-toucan-img,
    .art-birds-img,
    .art-wonders-img {
        max-width: 240px;
    }
}

/* ===== Subpage hero — unified tablet/mobile layout (all pages) ===== */
@media (max-width: 1024px) {
    .animal-treatment-hero,
    .treatment-hero,
    .book-appointment-hero {
        min-height: auto;
        padding: 100px 0 50px;
    }

    .animal-treatment-hero-flower,
    .treatment-hero-flower,
    .book-appointment-hero-flower {
        display: none;
    }

    .animal-treatment-hero-content,
    .treatment-hero-content,
    .book-appointment-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        text-align: center;
        min-height: auto;
        height: auto;
    }

    .animal-treatment-hero-title,
    .treatment-hero-title,
    .book-appointment-hero-title {
        order: 1;
        margin: 0 !important;
        text-align: center;
        justify-self: center;
        font-size: clamp(48px, 10vw, 72px);
        line-height: 1.1;
        max-width: 100%;
    }

    .animal-treatment-hero-right-img,
    .treatment-hero-right-img,
    .book-appointment-hero-right-img {
        order: 2;
        width: min(320px, 80vw);
        max-width: 100%;
        justify-self: center;
    }
}

/* ============================================================
   BOOK REIKI SESSION PAGE
   ============================================================ */

/* Hero (own class, isolated from treatment pages) */
.book-appointment-hero {
    position: relative;
    padding: 150px 0 80px;
    background: #ffffff;
    overflow: hidden;
}

.book-appointment-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.book-appointment-hero-flower {
    position: absolute;
    top: -138px;
    left: -96px;
    width: 130%;
    height: 130%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.book-appointment-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 480px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 100px;
}

.book-appointment-hero-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 900;
    font-size: 107px;
    line-height: 100px;
    letter-spacing: 1px;
    color: #283618;
    justify-self: center;
    max-width: 460px;
    margin-right: -506px;
}

.book-appointment-hero-right-img {
    width: 420px;
    height: auto;
    justify-self: end;
}

/* Hero — Responsive */
@media (max-width: 1200px) {
    .book-appointment-hero {
        padding: 120px 0 70px;
    }

    .book-appointment-hero-content {
        min-height: 420px;
        gap: 70px;
    }

    .book-appointment-hero-title {
        font-size: 80px;
        line-height: 84px;
        max-width: 400px;
        margin-right: -300px;
    }

    .book-appointment-hero-right-img {
        width: 360px;
    }
}

@media (max-width: 1024px) {
    .book-appointment-hero {
        padding: 100px 0 60px;
    }

    .book-appointment-hero-content {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .book-appointment-hero-flower {
        top: -90px;
        left: -40px;
        width: 110%;
        height: 110%;
    }

    .book-appointment-hero-title {
        font-size: 64px;
        line-height: 68px;
        max-width: 100%;
        justify-self: center;
        margin: 0;
        text-align: center;
        order: 1;
    }

    .book-appointment-hero-right-img {
        width: 320px;
        justify-self: center;
        order: 2;
    }
}

@media (max-width: 768px) {
    .book-appointment-hero {
        padding: 80px 0 50px;
    }

    .book-appointment-hero-content {
        gap: 28px;
    }

    .book-appointment-hero-flower {
        top: -60px;
        left: -20px;
        width: 100%;
        height: 100%;
        opacity: 0.6;
    }

    .book-appointment-hero-title {
        font-size: 44px;
        line-height: 48px;
    }

    .book-appointment-hero-right-img {
        width: 260px;
    }
}

@media (max-width: 480px) {
    .book-appointment-hero {
        padding: 60px 0 40px;
    }

    .book-appointment-hero-content {
        gap: 22px;
    }

    .book-appointment-hero-flower {
        opacity: 0.4;
    }

    .book-appointment-hero-title {
        font-size: 34px;
        line-height: 38px;
    }

    .book-appointment-hero-right-img {
        width: 220px;
    }
}

/* Appointment Section */
.appointment-section {
    position: relative;
    padding: 80px 0 100px;
    background: linear-gradient(270deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
    overflow: hidden;
}

.appointment-flower-left {
    position: absolute;
    top: 49px;
    left: 212px;
    width: 320px;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

.appointment-flower-right {
    position: absolute;
    top: 280px;
    right: -60px;
    width: 320px;
    height: auto;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.appointment-section .container {
    position: relative;
    z-index: 1;
}

.appointment-header {
    text-align: center;
    margin-bottom: 36px;
}

.appointment-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 48px;
    letter-spacing: 0.5px;
    color: #283618;
    margin: 0 0 10px;
}

.appointment-subtitle {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #6b6b6b;
    margin: 0;
}

.appointment-card {
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 8px 30px rgba(40, 54, 24, 0.06);
}

.appointment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    min-width: 0;
}

.appointment-left,
.appointment-right {
    min-width: 0;
    max-width: 100%;
}

/* ----- LEFT: Calendar ----- */
.calendar {
    width: 100%;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.calendar-nav {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #283618;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.calendar-nav:hover {
    background: #f0ebe1;
}

.calendar-month {
    font-family: 'Playfair Display', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #283618;
    letter-spacing: 0.4px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 8px;
    text-align: center;
}

.calendar-weekdays span {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #9a9a9a;
    letter-spacing: 0.4px;
    padding: 6px 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px 6px;
    row-gap: 10px;
}

.cal-day {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #283618;
    text-align: center;
    padding: 10px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

button.cal-day {
    border: none;
    background: none;
    width: 100%;
    font: inherit;
}

button.cal-day:disabled {
    cursor: not-allowed;
}

.cal-day:hover:not(.cal-day-empty):not(.cal-day-muted):not(.cal-day-selected) {
    background: #e8e0d4;
    color: #283618;
}

.cal-day-empty {
    cursor: default;
}

.cal-day-muted {
    color: #c5c5c5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Today — ring only when NOT selected */
.cal-day-today:not(.cal-day-selected) {
    outline: 2px solid #283618;
    outline-offset: -2px;
    font-weight: 700;
    background: #f0ebe1;
}

/* Selected date — solid fill, clear white text */
.cal-day-selected,
button.cal-day.cal-day-selected {
    background: #283618 !important;
    color: #ffffff !important;
    font-weight: 700;
    outline: none !important;
    box-shadow: 0 2px 8px rgba(40, 54, 24, 0.28);
}

.cal-day-selected:hover,
button.cal-day.cal-day-selected:hover {
    background: #1f3014 !important;
    color: #ffffff !important;
}

/* ----- Time slots ----- */
.time-slots-block {
    margin-top: 28px;
}

.time-slots-title {
    font-family: 'inter';
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: #283618;
    margin: 0 0 14px;
}

.time-slots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.time-slot {
    padding: 12px 18px;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #283618;
    background: #F8F6F4;
    border: 2px solid #e0d8cc;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.time-slot:hover:not(.time-slot-selected) {
    border-color: #283618;
    background: #f0ebe1;
}

.time-slot-selected {
    background: #283618;
    color: #ffffff;
    font-weight: 700;
    border-color: #283618;
    box-shadow: 0 3px 10px rgba(40, 54, 24, 0.25);
}

.time-slot-selected:hover {
    background: #1f3014;
    color: #ffffff;
    border-color: #1f3014;
}

/* ----- RIGHT: Form ----- */
.appointment-form-title {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    color: #283618;
    margin: 0 0 22px;
}

.appointment-form .form-field {
    margin-bottom: 16px;
}

.appointment-form .form-field label,
.appointment-form .form-field-label {
    display: block;
    font-family: 'inter';
    font-weight: 500;
    font-size: 13px;
    color: #283618;
    margin-bottom: 8px;
}

.appointment-form .form-field input[type="text"],
.appointment-form .form-field input[type="email"],
.appointment-form .form-field input[type="tel"],
.appointment-form .form-field textarea {
    width: 100%;
    padding: 12px 16px;
    background: #F8F6F4;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: 'inter';
    font-size: 16px;
    color: #283618;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.appointment-form .form-field input::placeholder,
.appointment-form .form-field textarea::placeholder {
    color: #8a8a8a;
}

.appointment-form .form-field input:focus,
.appointment-form .form-field textarea:focus {
    outline: none;
    border-color: #283618;
    background: #ffffff;
}

.appointment-form .form-field textarea {
    resize: vertical;
    min-height: 80px;
    background: #F3EFEA;
}

/* Radio cards (Session Type) */
.radio-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid #dcd5c7;
    border-radius: 10px;
    background: #F3EFEA;
    cursor: pointer;
    margin-bottom: 10px;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.radio-card:hover:not(.radio-card-selected) {
    border-color: #283618;
    background: #ebe4da;
}

.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-card .radio-dot {
    width: 18px;
    height: 18px;
    border: 2px solid #283618;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.radio-card input[type="radio"]:checked+.radio-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #283618;
    border-radius: 50%;
}

.radio-card .radio-label {
    font-family: 'inter';
    font-weight: 500;
    font-size: 16px;
    color: #283618;
}

.radio-card-selected {
    border-color: #283618;
    background: #283618;
    box-shadow: 0 3px 10px rgba(40, 54, 24, 0.22);
}

.radio-card-selected .radio-label {
    color: #ffffff;
    font-weight: 600;
}

.radio-card-selected .radio-dot {
    border-color: #ffffff;
}

.radio-card-selected input[type="radio"]:checked + .radio-dot::after {
    background: #ffffff;
}

/* Session Summary */
.session-summary {
    background: #F3EFEA;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 12px 0 18px;
}

.session-summary-title {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
    color: #283618;
    margin: 0 0 12px;
}

.session-summary-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.session-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
}

.session-summary-row dt {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #7E8B6A;
}

.session-summary-row dd {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #233A12;
    margin: 0;
    text-align: right;
    word-break: break-word;
}

.session-summary-investment {
    border-top: 1px solid rgba(126, 139, 106, 0.35);
    padding-top: 12px;
    margin-top: 6px;
}

.session-summary-investment dt,
.session-summary-investment dd {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #233A12;
}

.appointment-confirm-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 28px;
    font-size: 15px;
    margin-top: 4px;
    flex-direction: row;
}

/* Booking success modal (demo flow) */
.booking-success {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.booking-success.open {
    opacity: 1;
    visibility: visible;
}

.booking-success-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(40, 54, 24, 0.45);
}

.booking-success-card {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border-radius: 0 28px 28px 28px;
    padding: 40px 32px 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(40, 54, 24, 0.2);
}

.booking-success-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: #283618;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
}

.booking-success-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: #283618;
    margin: 0 0 10px;
}

.booking-success-message {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 22px;
    color: #7A7A7A;
    margin: 0 0 18px;
}

.booking-success-details {
    list-style: none;
    margin: 0 0 24px;
    padding: 16px 18px;
    background: #F3EFEA;
    border-radius: 12px;
    text-align: left;
}

.booking-success-details li {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #283618;
    padding: 4px 0;
}

.booking-success-details strong {
    color: #7E8B6A;
    font-weight: 500;
}

.booking-success-card .btn {
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 1200px) {
    .appointment-card {
        padding: 40px;
    }

    .appointment-grid {
        gap: 40px;
    }

    .appointment-flower-left,
    .appointment-flower-right {
        width: 220px;
        opacity: 0.35;
    }
}

@media (max-width: 1024px) {
    .appointment-section {
        padding: 60px 0 80px;
    }

    .appointment-card {
        padding: 32px;
    }

    .appointment-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .appointment-flower-left,
    .appointment-flower-right {
        width: 160px;
        opacity: 0.25;
        top: 200px;
    }
}

@media (max-width: 768px) {
    .appointment-section {
        padding: 50px 0 70px;
        overflow-x: hidden;
    }

    .appointment-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .appointment-header {
        margin-bottom: 24px;
        padding: 0 4px;
    }

    .appointment-title {
        font-size: 28px;
        line-height: 32px;
    }

    .appointment-subtitle {
        font-size: 14px;
        line-height: 20px;
    }

    .appointment-card {
        padding: 20px 16px;
        border-radius: 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .appointment-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        min-width: 0;
    }

    .appointment-left,
    .appointment-right,
    .appointment-form,
    .calendar {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .calendar-header {
        margin-bottom: 14px;
    }

    .calendar-month {
        font-size: 16px;
    }

    .calendar-weekdays {
        gap: 4px;
    }

    .calendar-weekdays span {
        font-size: 10px;
        padding: 4px 0;
    }

    .calendar-days {
        gap: 4px;
        row-gap: 6px;
    }

    .cal-day {
        font-size: 12px;
        padding: 8px 0;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .time-slots-block {
        margin-top: 22px;
    }

    .time-slots-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .time-slot {
        padding: 12px 10px;
        font-size: 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .appointment-form-title {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 18px;
    }

    .appointment-form .form-field {
        margin-bottom: 14px;
    }

    .appointment-form .form-field input[type="text"],
    .appointment-form .form-field input[type="email"],
    .appointment-form .form-field input[type="tel"],
    .appointment-form .form-field textarea {
        padding: 12px 14px;
        font-size: 16px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .radio-card {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
    }

    .radio-card .radio-label {
        font-size: 14px;
        line-height: 1.3;
    }

    .session-summary {
        padding: 16px;
        margin: 8px 0 16px;
    }

    .session-summary-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .session-summary-row dt,
    .session-summary-row dd {
        font-size: 13px;
        line-height: 18px;
        text-align: left;
        word-break: break-word;
    }

    .session-summary-row dd {
        width: 100%;
    }

    .appointment-confirm-btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 14px;
        white-space: normal;
        flex-direction: row;
        justify-content: center;
    }

    .booking-success {
        padding: 16px;
    }

    .booking-success-card {
        padding: 32px 20px 24px;
        max-width: 100%;
    }

    .booking-success-title {
        font-size: 24px;
        line-height: 28px;
    }

    .appointment-flower-left,
    .appointment-flower-right {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .appointment-section {
        padding: 40px 0 56px;
    }

    .appointment-section .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .appointment-card {
        padding: 16px 12px;
        border-radius: 14px;
    }

    .appointment-title {
        font-size: 24px;
        line-height: 28px;
    }

    .appointment-subtitle {
        font-size: 13px;
        line-height: 18px;
    }

    .calendar-weekdays span {
        font-size: 9px;
    }

    .cal-day {
        font-size: 11px;
        min-height: 34px;
        padding: 6px 0;
    }

    .time-slots-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .time-slot {
        font-size: 13px;
        padding: 12px 16px;
    }

    .radio-card .radio-label {
        font-size: 13px;
    }

    .session-summary-title {
        font-size: 16px;
    }

    .booking-success-card {
        padding: 28px 16px 20px;
        border-radius: 0 20px 20px 20px;
    }

    .booking-success-title {
        font-size: 22px;
    }

    .booking-success-message {
        font-size: 14px;
    }
}

/* ============================================================
   1560px screens — scale non-home pages to match 1920px design
   1560 / 1920 ≈ 0.8125 — entire body zooms out so the layout
   that fits in 1920px also fits perfectly in 1560px viewports
   ============================================================ */
@media (min-width: 1500px) and (max-width: 1759px) {
    body:not([data-page="home"]) {
        zoom: 0.8125;
    }

    /* Home page: scale footer + all flower/floral decorations + sections
       below the hero so they match the 1920px design proportions.
       (Hero stays at native size.) */
    body[data-page="home"] .site-footer,
    body[data-page="home"] .quote-section,
    body[data-page="home"] .about-section,
    body[data-page="home"] .books-section,
    body[data-page="home"] .art-section,
    body[data-page="home"] .blog-section,
    body[data-page="home"] .contact-section,
    body[data-page="home"] .newsletter-section {
        zoom: 0.8125;
    }
}

/* ============================================================
   GLOBAL MOBILE RESPONSIVE FIXES — overrides for recently
   added fixed-width components so they reflow on tablet/mobile
   ============================================================ */
@media (max-width: 1024px) {

    /* Tablet + mobile nav — hamburger drawer */
    .menu-toggle {
        display: inline-flex;
    }

    .nav-wrapper {
        padding: 12px 20px;
        gap: 12px;
    }

    .brand-logo {
        height: 56px;
    }

    .main-nav {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--color-white);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--t-base);
        box-shadow: var(--shadow-md);
        z-index: 25;
    }

    .main-nav.open {
        max-height: 600px;
        overflow-y: auto;
    }

    .main-nav .nav-list {
        flex-direction: column;
        gap: 0;
        padding: 12px 24px;
    }

    .main-nav .nav-list li {
        border-bottom: 1px solid var(--color-border);
    }

    .main-nav .nav-list li:last-child {
        border-bottom: none;
    }

    .nav-link {
        display: block;
        padding: 14px 0;
    }

    .nav-item-dropdown .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
        padding: 0 0 8px 16px;
        border-radius: 0;
        min-width: auto;
    }

    .nav-item-dropdown .dropdown-menu a {
        color: var(--color-primary);
        padding: 8px 0;
        font-size: 13px;
    }

    .nav-item-dropdown .dropdown-menu a:hover {
        background: transparent;
        padding-left: 4px;
    }

    .dropdown-caret {
        display: none;
    }

    .search-wrap {
        position: static;
    }

    .search-form {
        position: fixed;
        top: 78px;
        left: 16px;
        right: 16px;
        width: auto;
        z-index: 30;
    }

    .search-results {
        position: fixed;
        left: 16px;
        right: 16px;
        top: 130px;
        width: auto;
    }

    /* Newsletter form — release fixed input/button widths */
    .newsletter-form {
        flex-direction: column;
        gap: 14px;
    }

    .newsletter-form input {
        width: 100%;
        max-width: 100%;
    }

    .newsletter-form .btn {
        width: auto;
        min-width: 160px;
    }

    /* Contact form button */
    .contact-form .btn-block {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    /* Contact form — release tall padding + fixed height */
    .contact-form {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 48px 24px;
    }

    /* About / Books / Art / Blog — relax explicit max-widths */
    .bookpage-section .books-text {
        max-width: 100%;
    }

    /* Homepage — reset desktop offsets that cause horizontal scroll */
    .hero-info-col {
        margin-left: 0;
        margin-bottom: 0;
    }

    .books-reviews {
        margin-left: 0;
        width: 100%;
    }

    .books-cover img {
        max-width: 100%;
        margin-right: 0;
    }

    .blog-body {
        margin-left: 0;
    }

    /* ===== SUBPAGES — tablet fixes ===== */

    /* Hide decorative florals on tablet to prevent overflow */
    .blog-flower-right,
    .reviews-book-flower,
    .reviews-pricing-flower,
    .story-about-flower-left,
    .story-about-flower-right,
    .story-cards-flower-left,
    .story-cards-flower-right,
    .story-about-panel-flower,
    .animal-reiki-flower,
    .animal-pricing-left-flower,
    .animal-pricing-bg-flower-right,
    .animal-testimonials-flower,
    .animal-wellbeing-flower,
    .pricing-left-flower,
    .pricing-bg-flower-right,
    .pricing-cards-bg-flower,
    .tfp-about-flower,
    .tfp-expect-flower-right,
    .tfp-expect-flower-center,
    .tfp-expect-panel-flower,
    .tfp-obligations-flower,
    .art-flowers-flower-left,
    .art-flowers-flower-right,
    .art-impressions-flower-left,
    .art-impressions-flower-right,
    .art-landscapes-flower-left,
    .art-landscapes-flower-right,
    .art-toucan-flower-left,
    .art-toucan-flower-right,
    .art-birds-flower-left,
    .art-birds-flower-right,
    .art-wonders-flower-left,
    .art-wonders-flower-right,
    .appointment-flower-left,
    .contactpage-floral-right,
    .blogpage-floral-left,
    .blogpage-floral-right {
        display: none !important;
    }

    /* Section overflow containment */
    .animal-pricing-section,
    .pricing-section,
    .tfp-obligations-section,
    .animal-reiki-section,
    .reiki-people-section {
        overflow: hidden;
    }

    /* Treatment page — obligation decorative borders */
    .tfp-obligation-img-1,
    .tfp-obligation-img-2,
    .tfp-obligation-img-3 {
        display: none;
    }

    .tfp-obligation-card {
        width: 100%;
        max-width: 567px;
        height: auto;
        min-height: 180px;
    }

    .tfp-obligation-card--wide {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* Pricing card inline decorative images */
    .pricing-card img,
    .animal-pricing-card img,
    .pricing-concession img,
    .animal-pricing-concession img {
        display: none;
    }

    /* Reviews — hide inline decorative card backgrounds */
    .reviews-card > img[aria-hidden="true"],
    .reviews-modal-card > img[aria-hidden="true"] {
        display: none !important;
    }

    /* Art page — reset text offsets */
    .art-flowers-text,
    .art-impressions-text,
    .art-landscapes-text,
    .art-toucan-text,
    .art-birds-text,
    .art-wonders-text {
        margin-top: 0;
        margin-left: 0;
    }

    /* Art tag pills — allow wrap on narrow screens */
    .art-flowers-tags li,
    .art-impressions-tags li,
    .art-landscapes-tags li {
        white-space: normal;
    }

    /* Pricing / reiki text blocks — center on tablet */
    .pricing-left-text,
    .animal-pricing-left-text {
        padding-left: 0;
        text-align: center;
    }

    /* Contact page form wrap */
    .contact-form-wrap {
        padding-top: 0;
        padding-left: 0;
        display: flex;
        justify-content: center;
    }

    /* Book page cover */
    .bookpage-section .bookpage-cover img,
    .bookpage-section .books-cover img {
        max-width: min(320px, 80vw);
        width: auto;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
    }

    /* Hide explicit <br /> line breaks on mobile so paragraphs
       wrap naturally within narrow screens */
    .about-text p br,
    .books-text p br,
    .pricing-left-text p br,
    .reiki-people-text p br,
    .tfp-about-text p br,
    .animal-reiki-text p br,
    .bookpage-section .books-text p br,
    .blog-body p br,
    .quote-text br,
    .story-about-title br,
    .story-about-panel p br {
        display: none;
    }

    /* Section title sizes */
    .section-title,
    .help-heading,
    .newsletter-title,
    .reviews-title,
    .pricing-title,
    .reiki-people-title,
    .animal-reiki-title {
        font-size: 30px !important;
        line-height: 36px !important;
    }

    /* Form fields — comfortable mobile sizing */
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding: 12px 14px 6px;
        font-size: 14px;
    }

    .contact-form textarea {
        min-height: 90px;
        padding-bottom: 28px;
    }

    .contact-form {
        padding: 36px 18px;
        border-radius: 0 20px 20px 20px;
    }

    .form-row {
        margin-bottom: 22px;
    }

    /* Newsletter on mobile */
    .newsletter-title {
        font-size: 28px !important;
        line-height: 32px !important;
    }

    .newsletter-form input {
        height: 44px;
        padding: 0 18px;
    }

    .newsletter-form .btn {
        width: 100%;
        height: 50px;
        font-size: 14px;
    }

    /* Hero info column buttons */
    .hero-info-col .btn-primary {
        font-size: 13px;
    }

    /* About / Books / Art / Newsletter / Contact buttons — let them
       fit content on mobile (release fixed widths set for desktop) */
    .about-text .btn,
    .books-text .btn,
    .bookpage-section .bookpage-btn,
    .pricing-right .btn,
    .reiki-people-text .btn,
    .animal-reiki-text .btn {
        width: auto;
        min-width: 160px;
        height: 48px;
        font-size: 13px;
    }

    /* Pricing card inline images — hide on mobile so the regular
       card styling (border + gradient) shows through */
    .pricing-card img,
    .animal-pricing-card img,
    .pricing-concession img,
    .animal-pricing-concession img {
        display: none;
    }

    /* Reviews — release fixed wrapper width */
    .reviews-section {
        padding: 60px 18px;
    }

    .reviews-scroll-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .reviews-track {
        padding: 10px 0 18px;
    }

    .reviews-card {
        flex: 0 0 86vw;
        width: 86vw;
        max-width: 320px;
        height: auto;
        min-height: 340px;
        padding: 18px 16px;
    }

    .reviews-card .reviews-quote {
        -webkit-line-clamp: unset;
        line-clamp: unset;
        font-size: 12px;
        line-height: 17px;
    }

    .reviews-card .reviews-quote br,
    .reviews-modal-body p br {
        display: none;
    }

    .reviews-card .reviews-name {
        font-size: 18px;
        line-height: 22px;
    }

    .reviews-card .reviews-meta {
        font-size: 9px;
        line-height: 12px;
        gap: 10px;
    }

    /* Reviews dots smaller on mobile */
    .reviews-dots .reviews-dot {
        width: 14px;
        height: 14px;
    }

    .reviews-dots .reviews-dot.active {
        width: 18px;
        height: 18px;
    }

    /* Reviews modal — better mobile sizing */
    .reviews-modal {
        padding: 12px;
    }

    /* Gallery — reduce overlap offset to prevent horizontal scroll */
    .gallery-slide {
        margin-left: -24px;
    }

    /* Story cards — center on mobile */
    .story-cards-grid {
        max-width: 360px;
        margin: 0 auto;
    }

    .reviews-modal-card {
        width: 100%;
        height: auto;
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 44px 20px 28px;
        border-radius: 0 32px 32px 32px;
        overflow-y: auto;
    }

    .reviews-modal-name {
        font-size: 28px;
        line-height: 32px;
    }

    .reviews-modal-body p {
        font-size: 14px;
        line-height: 20px;
    }

    .reviews-modal-stars .star-icon {
        width: 24px;
        height: 24px;
    }

    /* Appointment booking on mobile — layout handled in appointment responsive block */
    .appointment-section .container {
        max-width: 100%;
    }

    /* Treatment hero titles */
    .animal-treatment-hero-title,
    .treatment-hero-title,
    .book-appointment-hero-title {
        font-size: 44px !important;
        line-height: 48px !important;
    }
}

@media (max-width: 480px) {

    .section-title,
    .help-heading,
    .newsletter-title,
    .reviews-title,
    .pricing-title,
    .reiki-people-title,
    .animal-reiki-title {
        font-size: 24px !important;
        line-height: 28px !important;
    }

    .contact-form {
        padding: 28px 14px;
        height: auto;
    }

    .reviews-card {
        max-width: 88vw;
    }

    .reviews-modal-card {
        padding: 36px 16px 22px;
        border-radius: 0 24px 24px 24px;
    }

    .reviews-modal-name {
        font-size: 24px;
        line-height: 28px;
    }

    .animal-treatment-hero-title,
    .treatment-hero-title,
    .book-appointment-hero-title {
        font-size: 32px !important;
        line-height: 36px !important;
    }

    /* Gallery — no negative overlap on small phones */
    .gallery-slide {
        margin-left: 0;
        flex: 0 0 220px;
        width: 220px;
    }

    .gallery-card,
    .gallery-card-shadow,
    .gallery-card img {
        width: 200px;
        height: 260px;
    }
}