/* ============================================================
   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);
}

a.btn.btn-primary {
    margin-top: 20px;
}


.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: linear-gradient(180deg, #f1ecef 0%, #f5f1f3 100%);
    overflow: hidden;
}

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

/* 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: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px #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: 15px 28px;
    font-size: 14.6px;
    font-weight: 400;
    background: #283618;
    color: #ffffff;
    z-index: 9999;
    position: relative;
}


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

.hero-banner-img {
    width: 100%;
    max-width: 714px;
    height: auto;
    transition: transform var(--t-base);
    position: absolute;
    left: 190px;

}

.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);
    cursor: default;
    border-top: 1px solid var(--color-chartreuse-green-1310, #262D161A)
}

/* ============================================================
   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 50px;
    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-video-player {
    position: relative;
    width: min(100%, 495px);
    border-radius: 36px;
    overflow: hidden;
    background: #f5f1e9;
    transition: transform var(--t-base);
    /* iOS Safari fix: a <video> inside an overflow:hidden + border-radius box
       is promoted to its own hardware layer that ignores the CSS clip, which
       renders the whole video BLACK on real iPhones (not reproducible in any
       emulator). Forcing a -webkit-mask makes Safari composite/clip the video
       layer correctly. isolation keeps it on its own stacking context. */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    isolation: isolate;
}

.about-video-player:hover {
    transform: scale(1.02);
}

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

.about-banner-video {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 36px;
    background: #f5f1e9;
    /* iOS Safari: keep the video on its own clean GPU layer so it renders
       instead of going black inside the rounded/clipped container above. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

.about-video-thumbnail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 36px;
    background: #f5f1e9;
    pointer-events: none;
    z-index: 1;
    transition: opacity var(--t-base), visibility var(--t-base);
}

.about-video-player.is-playing .about-video-thumbnail {
    opacity: 0;
    visibility: hidden;
}

.about-video-toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(40, 54, 24, 0.88);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base);
}

.about-video-player.is-playing .about-video-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.about-video-player.is-playing .about-banner-video {
    cursor: pointer;
}

.about-video-toggle:hover {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1.05);
}

.about-video-toggle-icon {
    display: block;
    width: 0;
    height: 0;
    margin-left: 5px;
    border-style: solid;
    border-width: 12px 0 12px 18px;
    border-color: transparent transparent transparent #ffffff;
}

@media (max-width: 1024px) {
    .about-video-toggle {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .about-banner-video {
        background: #f5f1e9;
    }
}

.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-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

.about-text .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;
}

.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:
        linear-gradient(270deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%),
        url('../images/home/book-section-bg-img.png') no-repeat center / cover;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* 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: 900;
    font-style: italic;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 0;
    color: #283618;
}

.books-text .books-subtitle strong {
    font-weight: 900;
    font-style: normal;
}

.books-text .books-subtitle strong em {
    font-weight: 900;
    font-style: italic;
    font-synthesis: style;
}

/* 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: 90%;
    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 {
    display: block;
    background: transparent;
    padding: 6px 0;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.review-card:hover {
    opacity: 0.85;
}

.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 {
    display: flex;
    flex-direction: column;
    height: 100%;
    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 {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
    background-color: transparent !important;
    margin-left: -19px;
}

.blog-body .btn-primary {
    margin-top: auto;
    align-self: flex-start;
    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: 70px 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;
}

/* Hide the contact-form flower on the Contact page only (kept on the home
   page, which shares this same contact form template). */
body[data-page="contact"] .floral-contact {
    display: none;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    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: 70px 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;
}

.newsletter-form-message {
    margin: 14px 0 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}

.newsletter-form-message.is-success {
    color: #283618;
}

.newsletter-form-message.is-error {
    color: #b42318;
}


/* ============================================================
   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;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.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;
    justify-content: center;
}

.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;
}

.page-up-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 2px solid #283618;
    border-radius: 50%;
    background: #283618;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(40, 54, 24, 0.28);
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base), background var(--t-fast);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-up-btn.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.page-up-btn:hover {
    background: #3a4f22;
    transform: translateY(-2px);
}

.page-up-btn:focus-visible {
    outline: 2px solid #283618;
    outline-offset: 3px;
}

/* ============================================================
   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 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        text-align: center;
    }

    .hero-info-col {
        display: contents;
    }

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

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

    .hero-tagline {
        order: 2;
        text-align: center;
        margin-top: 0;
        margin-bottom: 10px;
        line-height: 1.15;
    }

    .hero-tagline br {
        display: none;
    }

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

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

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

    .hero-info-col .btn-primary {
        order: 5;
        margin: 8px auto 8px;
    }

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

    .art-grid {
        text-align: center;
        gap: 24px;
    }

    .art-text {
        display: contents;
    }

    .art-text .section-title {
        order: 1;
        margin-bottom: 0;
    }

    body[data-page="art"] .art-text .section-title {
        display: none;
    }

    body[data-page="art"] .art-collage {
        order: 1;
    }

    body[data-page="art"] .art-text>p,
    body[data-page="art"] .art-text>div {
        order: 2;
    }

    .art-collage {
        order: 2;
        /* Tighten the space above (title) and add a little breathing room
           below (paragraph) on mobile. */
        margin-top: -12px;
        margin-bottom: 18px;
    }

    /* The collage PNG is a centered box, but its colored artwork (the circles)
       sits ~12% right of centre — the left side is only the faint line-drawing
       flowers + transparent padding. That makes the motif read as "pushed
       right" on phones. Nudge the image left so the colored mass optically
       centres under the "Art" title. */
    .art-section .art-banner-img {
        transform: translateX(-7%);
    }

    .art-text>p,
    .art-text>div {
        order: 3;
    }

    .art-text .btn {
        order: 4;
        margin: 0 auto;
        justify-self: center;
    }

    .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 — title, hours, form, then phone/email cards */
    .contact-info {
        display: contents;
        text-align: center;
    }

    .contact-info .section-title {
        order: 1;
        text-align: center !important;
        margin-bottom: 12px;
    }

    .schedule {
        order: 2;
        align-items: center;
        margin-bottom: 24px;
        border-bottom: none;
        padding-bottom: 0;
    }

    .schedule li {
        text-align: center;
    }

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

    .contact-cards {
        order: 4;
    }

    .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;
    }

    /* 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: #ffffff;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--t-base);
        box-shadow: var(--shadow-md);
        z-index: 999;
    }

    .admin-bar .main-nav {
        top: calc(70px + 46px);
    }

    .admin-bar .main-nav.open {
        max-height: calc(100vh - 70px - 46px);
    }

    .main-nav.open {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid var(--color-border);
    }

    .main-nav .nav-list {
        flex-direction: column;
        gap: 0;
        padding: 8px 20px 16px;
        align-items: stretch;
    }

    .main-nav .nav-list>li {
        display: block;
        width: 100%;
    }

    .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;
        width: 100%;
        padding: 12px 0;
        text-align: left;
    }

    .main-nav .nav-link::after {
        display: none;
    }

    /* Mobile dropdown — accordion (collapsed until tapped) */
    .nav-item-dropdown {
        width: 100%;
    }

    .nav-item-dropdown>.nav-link {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        text-align: left;
    }

    .nav-item-dropdown>.nav-link::after {
        display: none;
    }

    .nav-item-dropdown .dropdown-menu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
        padding: 0 0 8px;
        border-radius: 0;
        min-width: auto;
        width: 100%;
    }

    .nav-item-dropdown.open .dropdown-menu {
        display: block;
    }

    .nav-item-dropdown .dropdown-menu li {
        border-bottom: none;
    }

    .nav-item-dropdown .dropdown-menu a {
        display: block;
        color: #283618;
        padding: 10px 0 10px 16px;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        border-left: 2px solid var(--color-border);
        margin-left: 4px;
    }

    .nav-item-dropdown .dropdown-menu a:hover,
    .nav-item-dropdown .dropdown-menu a.active {
        background: transparent;
        color: var(--color-primary);
        padding-left: 20px;
    }

    .dropdown-caret {
        display: inline-block;
        flex-shrink: 0;
    }

    body.nav-open {
        overflow: hidden;
    }

    .site-header.menu-open {
        z-index: 1000;
        background: rgba(245, 241, 243, 0.98);
        backdrop-filter: blur(8px);
        box-shadow: var(--shadow-sm);
    }

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

    .hero-grid {
        gap: 0;
    }

    .hero-title-col {
        order: 1;
        margin-bottom: 0;
    }

    .hero-tagline {
        order: 2;
        margin-bottom: 8px;
    }

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

    .hero-subtitle {
        order: 4;
        align-items: center;
        text-align: center;
        margin-bottom: 28px;
    }

    .hero-info-col .btn-primary {
        order: 5;
        margin-top: 0;
    }

    .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: 28px;
    }

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

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

    .hero-tagline br {
        display: none;
    }

    /* 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,
    .about-video-player {
        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: 24px;
    }

    .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,
    .about-video-player {
        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;
    }


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


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

    /* 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 30px;
    }

    .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 10px;
    background: #ffffff;
    overflow: hidden;
    min-height: 587px;
}

.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: 137px;
    line-height: 110px;
    letter-spacing: 1px;
    color: #283618;
    margin: 0;
    text-align: center;
    justify-self: center;
    margin-top: -207px;
    margin-right: -429px;
}

.treatment-hero-testimonials-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: 0px;
    margin-right: 0px;
}

.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,
.pricing-left-text p.pricing-subtitle {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #7A7A7A;
    margin-bottom: 2px;
}

.pricing-left-text p:not(.pricing-subtitle) {
    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 24px;
    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: 70px 0 80px;
    background: #ffffff;
    overflow: hidden;
}

.tfp-post-inner {
    position: relative;
    z-index: 1;
}

.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;
    color: #283618;
    text-align: left;
    margin: 0 0 48px;
}

.tfp-post-text {
    max-width: 100%;
}

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

.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: 80px 0 80px;
    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;
}

/* Keep "healing reactions" together so it never splits onto its own line
   (was previously forced apart with a hard <br/>). */
.tfp-questions-text p .tfp-nowrap {
    white-space: nowrap;
}

.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: 0 0 100px;
    background: #ffffff;
    overflow: visible;
}

.tfp-expect-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.tfp-expect-card-border {
    position: absolute;
    top: 86px;
    right: -5px;
    width: 92%;
    height: 90%;
    z-index: 2;
    pointer-events: none;
}

.tfp-expect-card-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    background: #F5F1E9;
    border-radius: 50px;
    padding: 64px 56px;
    box-sizing: border-box;
}

.tfp-expect-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 0 52px;
    align-items: stretch;
}

.tfp-expect-divider {
    width: 1px;
    background: rgba(40, 54, 24, 0.2);
    margin: 80px 0 40px;
}

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

.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: 24px;
    letter-spacing: 0;
    color: #7A7A7A;
}

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

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

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

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

.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-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 900px;
}

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

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

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

/* ============================================================
   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: 24px;
    }

    .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: 40px 0 50px;
    }

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

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

    .wellbeing-flower {
        left: 20px;
    }

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

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

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

    .wellbeing-right .btn {
        margin-top: 0;
    }

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

    .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-title {
        font-size: 40px;
        line-height: 42px;
        margin-bottom: 36px;
    }

    .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: 0 0 80px;
    }

    .tfp-expect-card-border {
        top: 8px;
        right: -1px;
        width: 100%;
    }

    .tfp-expect-card-inner {
        padding: 44px 36px;
        border-radius: 40px;
    }

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

    .tfp-expect-divider {
        display: none;
    }

    .tfp-expect-col:last-of-type {
        position: relative;
        padding-top: 40px;
    }

    .tfp-expect-col:last-of-type::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(100%, 320px);
        height: 1px;
        background: rgba(40, 54, 24, 0.2);
    }

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

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

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

@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: 40px 0 32px;
    }

    .reiki-people-grid {
        gap: 16px;
    }

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

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

    .reiki-people-text p:last-child {
        margin-bottom: 0;
    }

    .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: 32px 0 24px;
    }

    .pricing-grid {
        gap: 24px;
    }

    .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: 24px 0 40px;
        min-height: auto;
    }

    .wellbeing-flower {
        display: none;
    }

    .wellbeing-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        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;
        margin-bottom: 12px;
    }

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

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

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

    .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: 0 0 60px;
    }

    .tfp-expect-card-border {
        top: 6px;
        display: none;
    }

    .tfp-expect-card-inner {
        padding: 36px 28px;
        border-radius: 32px;
    }

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

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

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

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

    .tfp-obligations-list li {
        font-size: 15px;
        line-height: 22px;
    }
}

@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-top: 32px;
        padding-bottom: 32px;
    }

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

    .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;
        margin-bottom: 28px;
    }

    .tfp-post-text p {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 20px;
    }

    .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;
        margin-bottom: 10px;
    }

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

    .wellbeing-grid {
        gap: 14px;
    }

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

    .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: 24px;
        line-height: 28px;
    }

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

    .tfp-expect-card-inner {
        padding: 28px 22px;
        border-radius: 24px;
    }

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

    .tfp-obligations-list li {
        font-size: 15px;
        line-height: 24px;
    }
}

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

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

}

.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;
    position: relative;
    z-index: 2;
}

.animal-treatment-hero-right-img {
    width: 480px;
    height: auto;
    justify-self: end;
    position: relative;
    z-index: 2;
}

.animal-treatment-hero-right-img-story {
    width: 340px;
    height: auto;
    justify-self: end;
    position: relative;
    z-index: 2;
    top: -100px;
    left: 80px;
}

.animal-treatment-hero--title-only .animal-treatment-hero-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 360px;
}

.animal-treatment-hero--title-only .animal-treatment-hero-title {
    margin: 0;
    text-align: center;
    justify-self: center;
}

/* Contact page has the decorative flower on the left (desktop only). Keep the
   "Contact Us" title centered and move the flower further left so it doesn't
   overlap the title. Scoped to desktop; mobile has no flower. */
@media (min-width: 1025px) {
    body[data-page="contact"] .animal-treatment-hero .treatment-hero-flower {
        left: -140px;
    }
}

/* 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: 1fr;
    gap: 0;
    align-items: center;
    justify-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: 60px 0;
    background: white;
    overflow: hidden;
    min-height: 312px;
}

.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-text>p:not(.quote-text) {
    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: 40px 0 32px;
    }

    .animal-reiki-grid {
        gap: 16px;
    }

    .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: 40px 0 50px;
        min-height: auto;
    }

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

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

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

    .animal-wellbeing-right .btn {
        margin-top: 0;
    }

    .animal-wellbeing-text>p:not(.quote-text) {
        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: 24px 0 32px;
    }

    .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: 24px 0 40px;
        min-height: auto;
    }

    .animal-wellbeing-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        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-text>p:not(.quote-text) {
        font-size: 16px;
        line-height: 24px;
    }

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

@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-text>p:not(.quote-text) {
        font-size: 14px;
        line-height: 22px;
    }

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

/* ============================================================
   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: 80px 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: 24px;
}

.bookpage-section .books-text p strong em {
    font-weight: 700;
    font-style: italic;
    color: #283618;
}

.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: 65%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    margin-right: 0;
}

.book-intro .books-subtitle {
    display: inline;
}

.book-intro {
    display: block;
    margin-bottom: 24px;
}

.book-intro p {
    display: block;
    margin: 0;
}

/* ============================================================
   REVIEWS SECTION (book.html) — horizontal scroll + dots
   ============================================================ */
.reviews-section {
    scroll-margin-top: 100px;
    position: relative;
    padding: 100px 230px 110px;
    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: 33px;
}

.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-quote p {
    color: #283618;
    font-family: inherit;
    font-weight: inherit;
    text-align: inherit;
}

.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;
}

/* Book page — desktop: original fixed-height cards with clamped excerpt */
@media (min-width: 769px) {
    body[data-page="book"] .reviews-scroll-wrapper .reviews-card {
        height: 373px;
        min-height: 373px;
        gap: 33px;
        padding: 22px 24px;
        align-items: center;
        justify-content: flex-start;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card .stars {
        margin-bottom: -12px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card .reviews-name {
        margin: 6px 0 4px;
        font-size: 20px;
        line-height: 15.98px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card .reviews-quote {
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 9;
        line-clamp: 9;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 100%;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card .reviews-quote p {
        display: inline;
        margin: 0;
        font-size: 14px;
        line-height: 17px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card .reviews-btn {
        margin-top: 4px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card.reviews-card--full {
        height: auto;
        min-height: 373px;
        gap: 16px;

    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card.reviews-card--full .reviews-quote {
        flex: 0 1 auto;
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card.reviews-card--full .reviews-quote p {
        display: block;
        margin: 0 0 16px;
        font-size: 14px;
        line-height: 20px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card.reviews-card--full .reviews-quote p:last-child {
        margin-bottom: 0;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-track {
        padding-bottom: 18px;
    }
}

/* Book page — mobile: same excerpt + Read More, full text in popup */
@media (max-width: 768px) {
    body[data-page="book"] .reviews-scroll-wrapper .reviews-card {
        height: auto;
        min-height: 280px;
        gap: 16px;
        padding: 26px 20px;
        align-items: center;
        justify-content: flex-start;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card .stars {
        margin-bottom: 8px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card .reviews-name {
        margin: 0 0 10px;
        font-size: 18px;
        line-height: 1.2;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card .reviews-quote {
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 100%;
        font-size: 13px;
        line-height: 19px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card .reviews-btn {
        margin-top: 12px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card.reviews-card--full {
        min-height: 0;
        gap: 0;
        justify-content: center;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card.reviews-card--full .reviews-quote {
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card.reviews-card--full .reviews-quote p {
        display: block;
        font-size: 13px;
        line-height: 19px;
        margin: 0 0 14px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card.reviews-card--full .reviews-quote p:last-child {
        margin-bottom: 0;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-track {
        padding-bottom: 4px;
    }

    body[data-page="book"] .reviews-dots {
        margin-top: 16px;
    }
}

.reviews-card--full .reviews-quote {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    display: block;
}

.testimonials-scroll-wrapper .reviews-card--testimonial.reviews-card--full .reviews-quote {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    display: block;
}

.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) — matches Figma / Gena Fawns design
   ============================================================ */
.reviews-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.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;
}

/* Shell — room for green offset shadow on bottom-right */
.reviews-modal-card {
    position: relative;
    width: min(907.41px, calc(100vw - 48px));
    padding: 0 14px 14px 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

/* Green 3D offset layer */
.reviews-modal-card::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: -4px;
    bottom: -4px;
    background: #283618;
    border-radius: 0 90px 20px 90px;
    z-index: 0;
    pointer-events: none;
}

/* Cream card face */
.reviews-modal-face {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: min(897.51px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    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: 0 3.6px 18px rgba(40, 54, 24, 0.30);
}

.reviews-modal-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 70px 80px 0;
    box-sizing: border-box;
}

.reviews-modal-header {
    flex-shrink: 0;
    width: 100%;
    text-align: center;
}

.reviews-modal-close {
    position: absolute;
    top: 70px;
    right: 80px;
    z-index: 2;
    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;
    justify-content: center;
    gap: 4px;
    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%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reviews-modal-body::-webkit-scrollbar {
    display: none;
}

.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;
    flex-shrink: 0;
    width: 100%;
    max-width: 560px;
    margin-top: auto;
    padding: 32px 0 60px;
    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;
}

/* Legacy shadow img — no longer used */
.reviews-modal-shadow {
    display: none !important;
}

@media (max-width: 1024px) {
    .reviews-modal-face {
        height: min(897.51px, calc(100vh - 32px));
        max-height: calc(100vh - 32px);
        border-radius: 0 70px 70px 70px;
    }

    .reviews-modal-card::before {
        border-radius: 0 70px 70px 70px;
    }

    .reviews-modal-inner {
        padding: 56px 48px 0;
    }

    .reviews-modal-close {
        top: 48px;
        right: 48px;
    }

    .reviews-modal-name {
        font-size: 38px;
        line-height: 42px;
        margin-bottom: 28px;
    }

    .reviews-modal-body p {
        font-size: 16px;
        line-height: 23px;
    }

    .reviews-modal-stars .star-icon {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 768px) {
    .reviews-modal {
        padding: 12px;
    }

    .reviews-modal-card {
        width: 100%;
        max-width: calc(100vw - 24px);
        padding: 0 10px 10px 0;
    }

    .reviews-modal-card::before {
        top: 10px;
        left: 10px;
        right: -8px;
        bottom: -8px;
        border-radius: 0 36px 36px 36px;
    }

    .reviews-modal-face {
        height: auto;
        max-height: calc(100vh - 24px);
        border-radius: 0 36px 36px 36px;
    }

    .reviews-modal-inner {
        padding: 44px 24px 0;
        max-height: calc(100vh - 24px);
    }

    .reviews-modal-close {
        top: 16px;
        right: 16px;
        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 br {
        display: 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: 20px 0 36px;
        font-size: 12px;
        max-width: none;
    }

    .reviews-modal--book .reviews-modal-face {
        max-height: calc(100vh - 24px);
    }

    .reviews-modal--book .reviews-modal-inner {
        padding: 40px 20px 24px;
        max-height: none;
    }

    .reviews-modal--book .reviews-modal-body {
        max-height: calc(100vh - 160px);
    }

    body.admin-bar .reviews-modal--book .reviews-modal-close {
        top: 50px;
    }

    .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);
        padding: 0 8px 8px 0;
    }

    .reviews-modal-card::before {
        border-radius: 0 28px 28px 28px;
    }

    .reviews-modal-face {
        border-radius: 0 28px 28px 28px;
    }

    .reviews-modal-inner {
        padding: 40px 18px 0;
    }

    .reviews-modal-close {
        top: 12px;
        right: 12px;
        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;
    }

    .reviews-modal-meta {
        padding-bottom: 28px;
    }

    .testimonials-modal .reviews-modal-inner {
        padding: 36px 16px 20px;
    }

    .testimonials-modal .reviews-modal-body {
        max-height: calc(100vh - 140px);
    }

    body.admin-bar .testimonials-modal .reviews-modal-close {
        top: 46px;
    }

    .reviews-modal--book .reviews-modal-inner {
        padding: 36px 16px 20px;
    }

    .reviews-modal--book .reviews-modal-body {
        max-height: calc(100vh - 140px);
    }

    body.admin-bar .reviews-modal--book .reviews-modal-close {
        top: 46px;
    }
}

/* ============================================================
   STORY PAGE (story.html) — About + 3 cards
   ============================================================ */

/* About Michele section */
.story-about-section {
    position: relative;
    padding: 60px 0 70px;
    background: #ffffff;
    overflow: hidden;

}

.story-about-flower-left,
.story-about-flower-right {
    position: absolute;
    bottom: 0;
    width: 330px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

.story-about-flower-left {
    left: 0;
    transform: translateY(25%);
}

.story-about-flower-right {
    right: 0;
    transform: translateY(25%) scaleX(-1);
    width: 480px;
}

.story-about-grid {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.story-about-panel {
    position: relative;
    width: 100%;
    max-width: 960px;
    background: #283618;
    color: #ffffff;
    border-radius: 30px;
    padding: 72px 88px 80px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    overflow: hidden;
    text-align: center;
}

.story-about-panel-flower {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    height: auto;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}

.story-about-panel>.story-about-title,
.story-about-body {
    position: relative;
    z-index: 1;
    width: 100%;
}

.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 8px;
}

.story-about-body p {
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0;
    color: #ffffff;
    text-align: center;
    margin: 0 0 24px;
}

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

/* Story cards section */
.story-cards-section {
    position: relative;
    padding: 80px 0 70px;
    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-cards-caption {
    position: relative;
    z-index: 1;
    font-family: 'HvDTrial Brandon Grotesque', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 32px;
    letter-spacing: 0.5px;
    color: #283618;
    text-align: center;
    margin: 48px auto 0;
    max-width: 720px;
}

.story-card {
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.story-card-thumb {
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.story-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    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 56px 64px;
    }

    .story-about-flower-left,
    .story-about-flower-right,
    .story-cards-flower-left,
    .story-cards-flower-right {
        width: 220px;
        opacity: 0.45;
    }
}

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

    .story-about-panel {
        padding: 56px 40px 48px;
        border-radius: 24px;
    }

    .story-about-title {
        font-size: 38px;
        line-height: 42px;
    }

    .story-about-body p {
        font-size: 15px;
        line-height: 23px;
    }

    .story-cards-section {
        padding: 60px 0 80px;
    }

    .story-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .story-card-thumb {
        height: 280px;
    }

    .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-panel {
        padding: 48px 24px 40px;
        border-radius: 22px;
    }

    .story-about-title {
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 14px;
    }

    .story-about-body 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-thumb {
        height: 260px;
    }

    .story-cards-caption {
        margin-top: 28px;
    }

    .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-title {
        font-size: 24px;
        line-height: 28px;
    }

    .story-about-body 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 {
        min-height: auto;
        padding: 100px 0 0px;
    }

    .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,
    .animal-treatment-hero-right-img-story,
    .treatment-hero-right-img,
    .book-appointment-hero-right-img {
        order: 2;
        width: min(320px, 80vw);
        max-width: 100%;
        justify-self: center;
        top: 0;
        left: 0;
    }
}

/* ============================================================
   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: 88px 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 {
    scroll-margin-top: 100px;
    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: flex;
    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;
}

.appointment-form .form-field-note {
    margin: 8px 0 0;
    font-family: 'inter', sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #7A7A7A;
}

/* Radio cards (Session Type) */
.session-type-group {
    display: flex;
    flex-direction: column;
}

.session-type-option {
    margin-bottom: 0;
}

.session-type-option>.radio-card {
    margin-bottom: 10px;
}

.session-sub-options {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding-left: 28px;
    margin: 0 0 10px;
}

.session-type-option--expanded .session-sub-options {
    display: flex;
}

.radio-card-sub {
    margin-bottom: 0;
}

.radio-card {
    display: flex !important;
    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: 25px;
    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;
}

.booking-success.is-error .booking-success-icon {
    background: #b42318;
}

/* 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 30px;
    }

    .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: #ffffff;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--t-base);
        box-shadow: var(--shadow-md);
        z-index: 999;
    }

    .admin-bar .main-nav {
        top: calc(70px + 46px);
    }

    .admin-bar .main-nav.open {
        max-height: calc(100vh - 70px - 46px);
    }

    .main-nav.open {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid var(--color-border);
    }

    .main-nav .nav-list {
        flex-direction: column;
        gap: 0;
        padding: 8px 20px 16px;
        align-items: stretch;
    }

    .main-nav .nav-list>li {
        display: block;
        width: 100%;
    }

    .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;
        width: 100%;
        padding: 12px 0;
        text-align: left;
    }

    .main-nav .nav-link::after {
        display: none;
    }

    .nav-item-dropdown {
        width: 100%;
    }

    .nav-item-dropdown>.nav-link {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        text-align: left;
    }

    .nav-item-dropdown>.nav-link::after {
        display: none;
    }

    .nav-item-dropdown .dropdown-menu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
        padding: 0 0 8px;
        border-radius: 0;
        min-width: auto;
        width: 100%;
    }

    .nav-item-dropdown.open .dropdown-menu {
        display: block;
    }

    .nav-item-dropdown .dropdown-menu li {
        border-bottom: none;
    }

    .nav-item-dropdown .dropdown-menu a {
        display: block;
        color: #283618;
        padding: 10px 0 10px 16px;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        border-left: 2px solid var(--color-border);
        margin-left: 4px;
    }

    .nav-item-dropdown .dropdown-menu a:hover,
    .nav-item-dropdown .dropdown-menu a.active {
        background: transparent;
        color: var(--color-primary);
        padding-left: 20px;
    }

    .dropdown-caret {
        display: inline-block;
        flex-shrink: 0;
    }

    body.nav-open {
        overflow: hidden;
    }

    .site-header.menu-open {
        z-index: 1000;
        background: rgba(245, 241, 243, 0.98);
        backdrop-filter: blur(8px);
        box-shadow: var(--shadow-sm);
    }

    .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;
    }

    /* Home hero — compact tablet spacing (reference layout) */
    .hero-grid {
        gap: 8px;
    }

    .hero-tagline {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .hero-collage {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 0;
    }

    .hero-banner-img {
        max-width: min(100%, 420px) !important;
    }

    .hero-subtitle {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
    }

    .hero-info-col .btn-primary {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .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,
    .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;
    }

    /* 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 on tablet/mobile */
    .reviews-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-body 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;
    }

    /* Home hero — compact mobile spacing (reference layout) */
    .hero {
        padding-top: 88px;
        padding-bottom: 32px;
    }

    .hero-grid {
        gap: 6px;
    }

    .hero-title {
        margin-bottom: 0 !important;
        line-height: 1 !important;
    }

    .hero-tagline {
        margin-top: 0 !important;
        margin-bottom: -25px !important;
        font-size: clamp(1.45rem, 4.5vw, 2rem) !important;
        line-height: 1.15 !important;
    }

    .hero-collage {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 0;
    }

    .hero-banner-img {
        max-width: min(100%, 340px) !important;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .hero-subtitle {
        margin-top: -30px !important;
        margin-bottom: 18px !important;
    }

    .hero-info-col .btn-primary {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .page-up-btn {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }

    /* About / Books / Art / Newsletter / Contact buttons — let them
       fit content on mobile (release fixed widths set for desktop) */
    .about-actions,
    .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: 40px 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;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card {
        min-height: 280px;
        height: auto;
        gap: 16px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card .reviews-quote {
        display: -webkit-box;
        -webkit-line-clamp: 6;
        line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .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;
    }

    /* 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;
    }

    /* 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;
    }

    .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 img {
        width: 200px;
        height: 260px;
    }
}

/* ============================================================
   TESTIMONIALS PAGE
   ============================================================ */
.testimonials-group {
    position: relative;
    padding: 80px 0 100px;
    background: #ffffff;
    overflow: hidden;
}

.testimonials-group--animals {
    background: linear-gradient(270deg, rgba(231, 224, 230, 0) 2.42%, #E7E0E6 95.36%);
}

.testimonials-animals-flower {
    position: absolute;
    left: -120px;
    top: 290px;
    width: 480px;
    height: auto;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}

.testimonials-animals-flower-right {
    position: absolute;
    right: -20px;
    top: -50px;
    width: 480px;
    height: auto;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}

.testimonials-group .container {
    position: relative;
    z-index: 1;
    max-width: calc(4 * 335px + 3 * 16px + 48px);
}

.testimonials-group-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    margin: 0 0 40px;
    text-align: center;
}

.testimonials-group-title-people {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    text-align: center;
    color: #283618;
    margin: 0 0 40px;
}

.testimonials-scroll-wrapper {
    width: calc(4 * 335px + 3 * 16px);
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.testimonials-scroll-wrapper .reviews-card--testimonial {
    flex: 0 0 335px;
    width: 335px;
}

.testimonials-scroll-wrapper--animals {
    width: min(100%, calc(2 * 335px + 1 * 16px));
    max-width: calc(2 * 335px + 1 * 16px);
}

.testimonials-scroll-wrapper--animals .reviews-card--testimonial {
    flex: 0 0 335px;
    width: 335px;
}

.testimonials-dots {
    margin-top: 48px;
}

.reviews-card--testimonial .reviews-meta {
    display: none;
}

.stars--testimonial .star-icon {
    fill: #E5A023;
}

.testimonials-modal .reviews-modal-meta {
    display: none;
}

.testimonials-modal .reviews-modal-card {
    width: min(680px, calc(100vw - 48px));
}

.testimonials-modal .reviews-modal-face {
    height: auto;
    max-height: calc(100vh - 48px);
}

.testimonials-modal .reviews-modal-inner {
    height: auto;
    padding: 48px 48px 36px;
}

.testimonials-modal .reviews-modal-close {
    top: 48px;
    right: 48px;
    z-index: 5;
}

.testimonials-modal .reviews-modal-body {
    flex: 0 1 auto;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.reviews-modal--book .reviews-modal-card {
    width: min(680px, calc(100vw - 48px));
}

.reviews-modal--book .reviews-modal-face {
    height: auto;
    max-height: calc(100vh - 48px);
}

.reviews-modal--book .reviews-modal-inner {
    height: auto;
    padding: 48px 48px 36px;
}

.reviews-modal--book .reviews-modal-close {
    top: 48px;
    right: 48px;
    z-index: 5;
}

.reviews-modal--book .reviews-modal-body {
    flex: 0 1 auto;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

@media (max-width: 992px) {
    body[data-page="testimonials"] .testimonials-group--people {
        padding-top: 24px;
    }

    .testimonials-group {
        padding: 60px 0 80px;
    }

    .testimonials-group-title,
    .testimonials-group-title-people {
        font-size: 40px;
        line-height: 42px;
    }

    .testimonials-animals-flower {
        width: 200px;
        top: 20px;
    }

    body[data-page="testimonials"] .treatment-hero,
    body[data-page="forms"] .treatment-hero,
    body[data-page="research"] .treatment-hero,
    body[data-page="gallery"] .treatment-hero {
        min-height: auto;
        padding: 120px 0 48px;
    }

    body[data-page="testimonials"] .treatment-hero-testimonials-title,
    body[data-page="forms"] .treatment-hero-testimonials-title,
    body[data-page="research"] .treatment-hero-testimonials-title,
    body[data-page="gallery"] .treatment-hero-testimonials-title {
        font-size: clamp(48px, 8vw, 72px);
        line-height: 1.05;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .art-text p {
        margin-bottom: 0;
    }

    .about-actions {

        margin-bottom: 20px;
    }

    body[data-page="testimonials"] .treatment-hero {
        padding: 100px 0 12px;
    }

    body[data-page="testimonials"] .testimonials-group--people {
        padding-top: 16px;
        padding-bottom: 40px;
    }

    body[data-page="testimonials"] .testimonials-group--animals {
        padding-top: 32px;
        padding-bottom: 36px;
    }

    .testimonials-group {
        padding: 50px 0 60px;
        overflow-x: hidden;
    }

    .testimonials-group-title,
    .testimonials-group-title-people {
        font-size: 32px;
        line-height: 36px;
        margin-bottom: 20px;
    }

    .testimonials-dots {
        margin-top: 28px;
    }

    .testimonials-modal .reviews-modal-face {
        max-height: calc(100vh - 24px);
    }

    .testimonials-modal .reviews-modal-inner {
        padding: 40px 20px 24px;
        max-height: none;
    }

    .testimonials-modal .reviews-modal-body {
        max-height: calc(100vh - 160px);
    }

    body.admin-bar .testimonials-modal .reviews-modal-close {
        top: 50px;
    }

    .testimonials-modal .reviews-modal-name {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 14px;
    }

    .testimonials-modal .reviews-modal-stars {
        margin-bottom: 10px;
    }

    .testimonials-scroll-wrapper,
    .testimonials-scroll-wrapper--animals {
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .testimonials-scroll-wrapper .reviews-track {
        gap: 0;
        padding: 10px 0 18px;
        scroll-padding-inline: 0;
        scroll-snap-type: x mandatory;
    }

    .testimonials-scroll-wrapper .reviews-card--testimonial {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 300px;
        gap: 20px;
        padding: 20px 18px 24px;
        box-sizing: border-box;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .testimonials-scroll-wrapper .reviews-card--testimonial .reviews-quote {
        flex: 1 1 auto;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 8;
        -webkit-box-orient: vertical;
    }

    .testimonials-scroll-wrapper .reviews-card--testimonial>img[aria-hidden="true"] {
        display: none !important;
    }

    .testimonials-animals-flower,
    .testimonials-animals-flower-right {
        display: none;
    }

    /* Sub-page heroes (Testimonials, Forms, Research, Gallery) */
    body[data-page="testimonials"] .treatment-hero,
    body[data-page="forms"] .treatment-hero,
    body[data-page="research"] .treatment-hero,
    body[data-page="gallery"] .treatment-hero,
    body[data-page="testimonials"] .treatment-hero-content,
    body[data-page="forms"] .treatment-hero-content,
    body[data-page="research"] .treatment-hero-content,
    body[data-page="gallery"] .treatment-hero-content {
        min-height: auto;
    }

    body[data-page="forms"] .treatment-hero,
    body[data-page="research"] .treatment-hero {
        padding: 100px 0 36px;
        overflow: hidden;
    }

    body[data-page="gallery"] .treatment-hero {
        padding: 100px 0 8px;
        overflow: hidden;
    }

    body[data-page="testimonials"] .treatment-hero {
        padding: 100px 0 12px;
        overflow: hidden;
    }

    body[data-page="testimonials"] .treatment-hero-flower,
    body[data-page="forms"] .treatment-hero-flower,
    body[data-page="research"] .treatment-hero-flower,
    body[data-page="gallery"] .treatment-hero-flower {
        display: none;
    }

    body[data-page="testimonials"] .treatment-hero-testimonials-title,
    body[data-page="forms"] .treatment-hero-testimonials-title,
    body[data-page="research"] .treatment-hero-testimonials-title,
    body[data-page="gallery"] .treatment-hero-testimonials-title {
        font-size: clamp(36px, 11vw, 52px);
        line-height: 1.05;
        letter-spacing: 0.5px;
        padding: 0 16px;
        max-width: 100%;
        box-sizing: border-box;
        word-break: break-word;
        hyphens: auto;
    }
}

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

    .testimonials-group-title,
    .testimonials-group-title-people {
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 24px;
    }

    .testimonials-scroll-wrapper,
    .testimonials-scroll-wrapper--animals {
        padding: 0;
    }

    .testimonials-scroll-wrapper .reviews-card--testimonial {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-height: 280px;
        padding: 18px 16px 22px;
        gap: 16px;
    }

    .testimonials-scroll-wrapper .reviews-card--testimonial .stars .star-icon {
        width: 16px;
        height: 16px;
    }

    .testimonials-scroll-wrapper .reviews-card--testimonial .reviews-name {
        font-size: 18px;
    }

    .testimonials-scroll-wrapper .reviews-card--testimonial .reviews-quote {
        font-size: 13px;
        line-height: 18px;
        -webkit-line-clamp: 7;
    }

    body[data-page="testimonials"] .treatment-hero,
    body[data-page="forms"] .treatment-hero,
    body[data-page="research"] .treatment-hero,
    body[data-page="gallery"] .treatment-hero {
        padding: 88px 0 28px;
    }

    body[data-page="testimonials"] .treatment-hero-testimonials-title,
    body[data-page="forms"] .treatment-hero-testimonials-title,
    body[data-page="research"] .treatment-hero-testimonials-title,
    body[data-page="gallery"] .treatment-hero-testimonials-title {
        font-size: clamp(30px, 9vw, 40px);
        padding: 0 12px;
    }

    .testimonials-dots .reviews-dot {
        width: 14px;
        height: 14px;
    }

    .testimonials-dots .reviews-dot.active {
        width: 18px;
        height: 18px;
    }
}

/* ============================================================
   ART PAGE — HERO (title only, keep background) & PAINTINGS FOR SALE
   ============================================================ */
.animal-treatment-hero-content--art {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
    grid-template-columns: 1fr;
}

.animal-treatment-hero-title--art {
    margin-top: 0;
    margin-right: 0;
}

.art-sale-section {
    padding: 80px 0 120px;
    background: #ffffff;
}

.art-sale-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #283618;
    text-align: start;
    margin: 0 0 64px;
}

.art-sale-category {
    margin-bottom: 72px;
}

.art-sale-category:last-child {
    margin-bottom: 0;
}

.art-sale-category-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: 0.5px;
    color: #283618;
    text-align: center;
    margin: 0 0 40px;
}

.art-sale-pair {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(48px, 10vw, 140px);
}

.art-sale-pair--single {
    justify-content: center;
}

.art-sale-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}

.art-sale-img-slot {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* min-height: 460px; */
    width: 100%;
    height: 100%;
}

.art-sale-img-slot--single {
    min-height: 0;
}

.art-sale-img {
    width: auto;
    max-width: min(420px, 38vw);
    max-height: 460px;
    height: auto;
    display: block;
    object-fit: contain;
}

.art-sale-figure figcaption {
    text-align: center;
    margin-top: 20px;
}

.art-sale-name {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #283618;
    margin: 0 0 6px;
}

.art-sale-price {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #283618;
    margin: 0;
}

@media (max-width: 992px) {
    .animal-treatment-hero-title--art {
        font-size: 88px;
        line-height: 82px;
    }

    .art-sale-title {
        font-size: 40px;
        line-height: 42px;
        margin-bottom: 48px;
    }

    .art-sale-category-title {
        font-size: 30px;
        line-height: 34px;
    }

    .art-sale-img-slot {
        min-height: 380px;
    }

    .art-sale-img {
        max-height: 380px;
        max-width: min(360px, 42vw);
    }

    .art-sale-pair {
        gap: 40px;
    }
}

@media (max-width: 768px) {

    .art-grid {
        gap: 20px;
    }

    .art-banner-img {
        max-width: min(100%, 320px);
    }

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

    .animal-treatment-hero-title--art {
        font-size: 64px;
        line-height: 60px;
    }

    .art-sale-section {
        padding: 56px 0 80px;
    }

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

    .art-sale-category {
        margin-bottom: 26px;
    }

    .art-sale-category-title {
        font-size: 26px;
        line-height: 30px;
        margin-bottom: 28px;
    }

    .art-sale-pair {
        flex-direction: column;
        align-items: center;
        gap: 36px;
    }

    .art-sale-img-slot {
        min-height: 0;
    }

    .art-sale-img {
        max-width: min(320px, 86vw);
        max-height: none;
    }

    .art-sale-name,
    .art-sale-price {
        font-size: 16px;
        line-height: 22px;
    }

    body[data-page="art"] .art-section {
        padding-bottom: 24px;
    }

    body[data-page="art"] .art-sale-section {
        padding: 24px 0 24px;
    }

    body[data-page="art"] .art-sale-title {
        margin-bottom: 32px;
    }
}

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.gallery-page-section {
    position: relative;
    padding: 80px 0 60px;
    background: #ffffff;
    overflow: visible;
}

.gallery-page-inner {
    position: relative;
    z-index: 1;
}

.gallery-page-flower {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: 480px;
    height: auto;
    opacity: 0.35;
}

.gallery-page-flower--left {
    left: -120px;
    top: 1000px;
}

.gallery-page-flower--right {
    right: -20px;
    top: 40px;
}

.gallery-page-row {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
    align-items: stretch;
    gap: 28px;
    margin: 0 auto 40px;
}

.gallery-page-row--3,
.gallery-page-row--2,
.gallery-page-row--wide {
    max-width: 1200px;
}

.gallery-page-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    background: #ffffff;
    border-radius: 0 18px 0 0;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(40, 54, 24, 0.08);
}

.gallery-page-card-head {
    background: #283618;
    color: #ffffff;
    text-align: center;
    padding: 14px 18px;
    font-family: 'HvDTrial Brandon Grotesque', var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.3px;
    border-radius: 0 18px 0 0;
    white-space: nowrap;
}

.gallery-page-card-body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    line-height: 0;
    height: 260px;
    overflow: hidden;
}

.gallery-page-card-body img {
    height: 100%;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.gallery-page-card--charlie .gallery-page-card-body img {
    max-width: 100%;
}

@media (max-width: 992px) {
    .gallery-page-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 20px 16px;
        max-width: 100%;
    }

    .gallery-page-row--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-page-card {
        width: 100%;
    }

    .gallery-page-card-body {
        height: 240px;
    }

    .gallery-page-card-body img,
    .gallery-page-card--charlie .gallery-page-card-body img {
        height: 100%;
        width: 100%;
        max-width: 100%;
        max-height: none;
        object-fit: cover;
        object-position: center;
    }

    .gallery-page-flower {
        width: 320px;
        opacity: 0.28;
    }

    .gallery-page-flower--left {
        left: -60px;
        top: 120px;
    }

    .gallery-page-flower--right {
        right: -10px;
        top: 20px;
    }
}

@media (max-width: 768px) {
    .gallery-page-section {
        padding: 56px 0 72px;
    }

    .gallery-page-row,
    .gallery-page-row--wide,
    .gallery-page-row--3,
    .gallery-page-row--2 {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 32px;
    }

    .gallery-page-card {
        max-width: min(420px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    .gallery-page-card-body {
        height: 280px;
    }

    .gallery-page-card-body img,
    .gallery-page-card--charlie .gallery-page-card-body img {
        height: 100%;
        max-height: none;
    }

    .gallery-page-flower {
        display: none;
    }

    .gallery-page-card-head {
        font-size: 16px;
        padding: 12px 14px;
        white-space: normal;
    }
}

/* Gallery page — compact spacing (consistent with Forms / Research) */
@media (max-width: 992px) {
    body[data-page="gallery"] .treatment-hero {
        padding-bottom: 20px;
    }

    body[data-page="gallery"] .gallery-page-section {
        padding-top: 24px;
        padding-bottom: 40px;
    }
}

@media (max-width: 768px) {
    body[data-page="gallery"] .treatment-hero {
        padding: 100px 0 8px;
    }

    body[data-page="gallery"] .gallery-page-section {
        padding: 8px 0 24px;
    }

    body[data-page="gallery"] .gallery-page-row {
        margin-bottom: 24px;
    }

    body[data-page="gallery"] .gallery-page-row:last-child {
        margin-bottom: 0;
    }

    body[data-page="gallery"] .newsletter-section {
        padding-top: 20px;
        padding-bottom: 40px;
    }
}

@media (max-width: 480px) {
    body[data-page="gallery"] .treatment-hero {
        padding: 88px 0 4px;
    }

    body[data-page="gallery"] .newsletter-section {
        padding-top: 12px;
    }
}

/* ============================================================
   FORMS & RESEARCH PAGE
   ============================================================ */
.forms-page-section {
    padding: 80px 0 50px;
    background: #ffffff;
}

.forms-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 48px 56px;
    align-items: start;
}

.forms-page-left-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 36px;
}

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

.forms-download-card {
    position: relative;
    min-height: 140px;
    padding: 24px 24px 56px;
    background: #F5F1E9;
    border: 1px solid #283618;
    border-radius: 0 24px 24px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.forms-page-right-leaf {
    position: absolute;
    right: -354px;
    bottom: 735px;
    width: 500px;
    height: 500px;
    object-position: center;
    display: block;
    z-index: 1;
    opacity: 0.35;
}

.animal-treatment-hero-title-books {
    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: 5px;
    margin-right: 100px;
}

/* Book page — mobile responsive */
@media (max-width: 992px) {
    body[data-page="book"] .animal-treatment-hero {
        min-height: auto;
        padding: 120px 0 40px;
        overflow: hidden;
    }

    body[data-page="book"] .animal-treatment-hero-content {
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    body[data-page="book"] .treatment-hero-flower,
    body[data-page="book"] .animal-treatment-hero-flower {
        display: none;
    }

    .animal-treatment-hero-title-books {
        font-size: clamp(48px, 8vw, 72px);
        line-height: 1.05;
        margin: 0;
        padding: 0 20px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .bookpage-section .bookpage-cover img,
    .bookpage-section .books-cover img {
        max-width: min(300px, 72vw);
        width: 100%;
        height: auto;
    }

    body[data-page="book"] .bookpage-section .bookpage-grid {
        gap: 24px;
    }

    body[data-page="book"] .bookpage-section .bookpage-cover,
    body[data-page="book"] .bookpage-section .books-cover {
        height: auto;
    }

    body[data-page="book"] .bookpage-section .book-intro {
        margin-bottom: 0;
    }

    body[data-page="book"] .bookpage-section .books-text .book-intro p {
        margin-bottom: 12px;
    }

    body[data-page="book"] .bookpage-section .books-text>p {
        margin-bottom: 16px;
    }
}

@media (max-width: 768px) {
    body[data-page="book"] .animal-treatment-hero {
        padding: 100px 0 28px;
    }

    .animal-treatment-hero-title-books {
        font-size: clamp(36px, 11vw, 52px);
        padding: 0 16px;
    }

    body[data-page="book"] .bookpage-section {
        padding: 32px 0 56px;
    }

    body[data-page="book"] .bookpage-section .books-text {
        max-width: none;
        align-self: start;
    }

    body[data-page="book"] .bookpage-section .books-text .section-title {
        font-size: 32px;
        line-height: 36px;
        text-align: center;
    }

    body[data-page="book"] .bookpage-section .books-text .btn,
    body[data-page="book"] .bookpage-section .bookpage-btn {
        align-self: center;
        margin-left: auto;
        margin-right: auto;
    }

    body[data-page="book"] .bookpage-section .bookpage-cover img,
    body[data-page="book"] .bookpage-section .books-cover img {
        max-width: min(260px, 70vw);
        width: 100%;
        height: auto;
    }

    body[data-page="book"] .bookpage-section .floral-books-right {
        display: none;
    }

    /* Book page reviews slider — one full card */
    body[data-page="book"] .reviews-scroll-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0;
        overflow: hidden;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-track {
        gap: 0;
        padding-bottom: 4px;
    }

    body[data-page="book"] .reviews-dots {
        margin-top: 16px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding: 26px 20px;
        box-sizing: border-box;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card>img[aria-hidden="true"] {
        display: none !important;
    }
}

@media (max-width: 480px) {
    body[data-page="book"] .animal-treatment-hero {
        padding: 88px 0 20px;
    }

    .animal-treatment-hero-title-books {
        font-size: clamp(30px, 9vw, 40px);
        padding: 0 12px;
    }

    body[data-page="book"] .bookpage-section .books-text .section-title {
        font-size: 28px;
        line-height: 32px;
    }

    body[data-page="book"] .bookpage-section .bookpage-cover img,
    body[data-page="book"] .bookpage-section .books-cover img {
        max-width: min(220px, 68vw);
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card {
        padding: 24px 18px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card .reviews-name {
        font-size: 18px;
        margin-bottom: 10px;
    }

    body[data-page="book"] .reviews-scroll-wrapper .reviews-card .reviews-btn {
        margin-top: 12px;
    }
}

/* Story page — hero spacing, compact layout, full animal photos */
body[data-page="story"] .story-card-thumb {
    height: auto;
    overflow: visible;
}

body[data-page="story"] .story-card-thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.story-card img {
    height: 405px !important;
    object-fit: cover !important;
}

@media (max-width: 992px) {
    body[data-page="story"] .animal-treatment-hero {
        min-height: auto;
        padding: 120px 0 16px;
        overflow: hidden;
    }

    body[data-page="story"] .animal-treatment-hero-content {
        min-height: auto;
        gap: 20px;
    }

    body[data-page="story"] .animal-treatment-hero-flower {
        display: none;
    }

    body[data-page="story"] .story-about-section {
        padding-top: 20px;
        padding-bottom: 48px;
    }
}

@media (max-width: 768px) {
    body[data-page="story"] .animal-treatment-hero {
        padding: 100px 0 8px;
    }

    body[data-page="story"] .story-about-section {
        padding-top: 12px;
        padding-bottom: 32px;
    }

    body[data-page="story"] .story-cards-section {
        padding: 32px 0 24px;
    }

    body[data-page="story"] .story-cards-caption {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    body[data-page="story"] .animal-treatment-hero {
        padding: 88px 0 4px;
    }

    body[data-page="story"] .story-about-section {
        padding-top: 8px;
    }

    body[data-page="story"] .story-cards-section {
        padding-bottom: 20px;
    }
}

/* Blog page — tighter blog list + newsletter spacing (hero height matches other pages on desktop) */
body[data-page="blog"] .blog-section {
    padding-top: 32px;
    padding-bottom: 48px;
}

body[data-page="blog"] .newsletter-section {
    padding-top: 32px;
}

@media (max-width: 992px) {
    body[data-page="blog"] .animal-treatment-hero {
        min-height: auto;
        padding: 120px 0 8px;
        overflow: hidden;
    }

    body[data-page="blog"] .animal-treatment-hero--title-only .animal-treatment-hero-content {
        min-height: auto;
        gap: 0;
    }

    body[data-page="blog"] .blog-section {
        padding-top: 16px;
        padding-bottom: 32px;
    }

    body[data-page="blog"] .blog-flower-right,
    body[data-page="blog"] .floral-blog-left {
        display: none;
    }
}

@media (max-width: 768px) {
    body[data-page="blog"] .animal-treatment-hero {
        padding: 100px 0 4px;
    }

    body[data-page="blog"] .blog-section {
        padding: 8px 0 24px;
    }

    body[data-page="blog"] .blog-grid {
        gap: 20px;
    }

    body[data-page="blog"] .newsletter-section {
        padding-top: 20px;
        padding-bottom: 40px;
    }
}

@media (max-width: 480px) {
    body[data-page="blog"] .animal-treatment-hero {
        padding: 88px 0 40px;
    }

    body[data-page="blog"] .blog-section {
        padding-bottom: 20px;
    }

    body[data-page="blog"] .newsletter-section {
        padding-top: 12px;
    }
}

/* Single blog post — push featured image below header on mobile only */
@media (max-width: 992px) {
    .blog-section.blog-section--white {
        padding-top: 120px;
    }
}

@media (max-width: 768px) {
    .blog-section.blog-section--white {
        padding-top: 100px;
    }
}

@media (max-width: 480px) {
    .blog-section.blog-section--white {
        padding-top: 88px;
    }
}

/* Contact page — section heading on desktop only; tighter newsletter spacing */
body[data-page="contact"] .contact-info {
    padding-top: 70px;
}

body[data-page="contact"] .contact-section {
    padding-top: 32px;
    padding-bottom: 32px;
}

body[data-page="contact"] .newsletter-section {
    padding-top: 51px;
}

@media (max-width: 992px) {
    body[data-page="contact"] .animal-treatment-hero {
        min-height: auto;
        padding: 120px 0 8px;
        overflow: hidden;
    }

    body[data-page="contact"] .animal-treatment-hero--title-only .animal-treatment-hero-content {
        min-height: auto;
        gap: 0;
    }

    body[data-page="contact"] .contact-info .section-title {
        display: none;
    }

    body[data-page="contact"] .contact-info {
        padding-top: 0;
    }

    body[data-page="contact"] .contact-section {
        padding-top: 16px;
        padding-bottom: 24px;
    }
}

@media (max-width: 768px) {
    body[data-page="contact"] .animal-treatment-hero {
        padding: 100px 0 4px;
    }

    body[data-page="contact"] .contact-section {
        padding: 8px 0 20px;
    }

    body[data-page="contact"] .contact-form-wrap {
        padding-top: 0;
    }

    body[data-page="contact"] .newsletter-section {
        padding-top: 16px;
        padding-bottom: 40px;
    }
}

@media (max-width: 480px) {
    body[data-page="contact"] .animal-treatment-hero {
        padding: 88px 0 40px;
    }

    body[data-page="contact"] .contact-section {
        padding-bottom: 16px;
    }

    body[data-page="contact"] .newsletter-section {
        padding-top: 12px;
    }
}

.forms-download-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 700;
    font-size: 32px;
    line-height: 39px;
    text-align: center;
    color: #283618;
    margin: 0 auto;
    max-width: 250px;
    text-decoration: underline;
}

.forms-download-icon {
    width: 18px;
    height: 18px;
    margin-left: 5px;
}

.forms-download-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    background: #283618;
    border: 1px solid #283618;
    border-radius: 0 20px 20px 20px;
    color: #ffffff;
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: opacity var(--t-base);
}

.forms-download-btn:hover {
    opacity: 0.88;
    color: #ffffff;
}

.forms-page-signature {
    display: block;
    width: 248px;
    height: auto;
    margin-top: 40px;
    margin-left: 253px;
}

@media (max-width: 992px) {
    .forms-page-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 640px;
        margin: 0 auto;
    }

    .forms-page-left-img {
        max-width: 360px;
        margin: 0 auto;
    }

    .forms-download-grid {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .forms-page-section {
        padding: 56px 0 72px;
    }

    .forms-download-grid {
        grid-template-columns: 1fr;
    }

    .forms-download-card {
        min-height: 120px;
        padding: 20px 20px 52px;
    }

    .forms-download-title {
        font-size: 15px;
        line-height: 20px;
        max-width: none;
        padding-right: 80px;
    }

    .forms-page-signature {
        width: 150px;

        margin: 0 auto;
        padding-top: 20px;
    }
}

/* Forms page — compact image and spacing on tablet/mobile */
@media (max-width: 992px) {
    body[data-page="forms"] .treatment-hero {
        padding-bottom: 20px;
    }

    body[data-page="forms"] .forms-page-section {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    body[data-page="forms"] .forms-page-grid {
        gap: 24px;
    }

    body[data-page="forms"] .forms-page-left-img {
        width: min(300px, 68vw);
        max-width: none;
        max-height: min(260px, 32vh);
        height: auto;
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    body[data-page="forms"] .treatment-hero {
        padding: 100px 0 8px;
    }

    body[data-page="forms"] .forms-page-section {
        padding: 8px 0 24px;
    }

    body[data-page="forms"] .forms-page-grid {
        gap: 16px;
    }

    body[data-page="forms"] .forms-page-left-img {
        width: min(280px, 78vw);
        max-height: min(240px, 30vh);
    }

    body[data-page="forms"] .forms-page-signature {
        margin-top: 12px;
        padding-top: 8px;
    }

    body[data-page="forms"] .newsletter-section {
        padding-top: 20px;
        padding-bottom: 40px;
    }
}

@media (max-width: 480px) {
    body[data-page="forms"] .treatment-hero {
        padding: 88px 0 4px;
    }

    body[data-page="forms"] .forms-page-left-img {
        width: min(260px, 85vw);
        max-height: min(220px, 28vh);
    }

    body[data-page="forms"] .newsletter-section {
        padding-top: 12px;
    }
}

/* ============================================================
   RESEARCH PAGE
   ============================================================ */
.research-page-section {
    position: relative;
    padding: 80px 0 60px;
    background: #ffffff;
    overflow: visible;
}

.research-page-section .container {
    max-width: 1400px;
}

.research-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 36px 44px;
    align-items: start;
}

.research-page-image {
    position: sticky;
    top: 110px;
    align-self: start;
}

.research-page-left-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 20px;
}

.research-page-content {
    position: relative;
    z-index: 1;
}

.research-page-leaf {
    position: absolute;
    right: -40px;
    bottom: -400px;
    width: 320px;
    height: auto;
    pointer-events: none;
    opacity: 0.22;
    z-index: 0;
}

.research-page-body {
    position: relative;
    z-index: 1;
    max-width: none;
    margin: 0;
}

.research-page-body p:not(.research-page-subheading),
.research-page-lead {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #283618;
    margin: 0 0 24px;
}

.research-page-list-group {
    margin: 0 0 24px;
    color: #283618;
}

.research-page-body p.research-page-subheading {
    margin: 0;
    padding: 0;
    font-weight: 400;
    line-height: 26px;
    color: #283618;
}

.research-page-list-group .research-page-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.research-page-body .research-page-list-group ul.research-page-list {
    margin: 0;
}

.research-page-list-group .research-page-list li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0 0 0 2em;
    line-height: 26px;
}

.research-page-list-group .research-page-list li::before {
    content: "\2022";
    position: absolute;
    left: 0.5em;
    color: #283618;
    font-size: 1em;
    line-height: 26px;
}

.research-page-list-group .research-page-list li:first-child {
    margin-top: 0;
    padding-top: 0;
}

.research-papers-heading {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    color: #283618;
    margin: 24px 0 16px;
}

.research-page-body ul.research-page-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.research-page-body ul.research-page-list:last-child {
    margin-bottom: 0;
}

.research-page-body ul.research-page-list li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0 0 0 2em;
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #283618;
}

.research-page-body ul.research-page-list li::before {
    content: "\2022";
    position: absolute;
    left: 0.5em;
    color: #283618;
    font-size: 1em;
    line-height: 26px;
}

.research-page-body ul.research-page-list li:last-child {
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .research-page-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 640px;
        margin: 0 auto;
    }

    .research-page-image {
        position: static;
    }

    .research-page-left-img {
        max-width: 360px;
        margin: 0 auto;
    }

    .research-page-leaf {
        display: none;
    }
}

@media (max-width: 768px) {
    .research-page-section {
        padding: 56px 0 72px;
    }

    .research-page-body p:not(.research-page-subheading),
    .research-page-lead,
    .research-page-body ul.research-page-list li {
        font-size: 15px;
        line-height: 24px;
    }

    .research-page-body p.research-page-subheading {
        line-height: 24px;
    }

    .research-page-body ul.research-page-list li {
        margin-bottom: 0;
    }
}

/* Research page — compact image and spacing on tablet/mobile */
@media (max-width: 992px) {
    body[data-page="research"] .treatment-hero {
        padding-bottom: 20px;
    }

    body[data-page="research"] .research-page-section {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    body[data-page="research"] .research-page-grid {
        gap: 24px;
    }

    body[data-page="research"] .research-page-left-img {
        width: min(300px, 68vw);
        max-width: none;
        max-height: min(260px, 32vh);
        height: auto;
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    body[data-page="research"] .treatment-hero {
        padding: 100px 0 8px;
    }

    body[data-page="research"] .research-page-section {
        padding: 8px 0 24px;
    }

    body[data-page="research"] .research-page-grid {
        gap: 16px;
    }

    body[data-page="research"] .research-page-left-img {
        width: min(280px, 78vw);
        max-height: min(240px, 30vh);
    }

    body[data-page="research"] .newsletter-section {
        padding-top: 20px;
        padding-bottom: 40px;
    }
}

@media (max-width: 480px) {
    body[data-page="research"] .treatment-hero {
        padding: 88px 0 4px;
    }

    body[data-page="research"] .research-page-left-img {
        width: min(260px, 85vw);
        max-height: min(220px, 28vh);
    }

    body[data-page="research"] .newsletter-section {
        padding-top: 12px;
    }
}

/* =============================================
   BOOKING WIZARD — multi-step + payment
   ============================================= */
.booking-wizard {
    max-width: 760px;
    margin: 0 auto;
}

.booking-steps {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}

.booking-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    position: relative;
}

.booking-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background: #dcd5c7;
    z-index: 0;
}

.booking-step.is-complete:not(:last-child)::after,
.booking-step.is-active:not(:last-child)::after {
    background: #606c38;
}

.booking-step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 700;
    font-size: 15px;
    background: #F3EFEA;
    border: 2px solid #dcd5c7;
    color: #283618;
    position: relative;
    z-index: 1;
}

.booking-step.is-active .booking-step-number,
.booking-step.is-complete .booking-step-number {
    background: #606c38;
    border-color: #606c38;
    color: #fff;
}

.booking-step-label {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-size: 13px;
    line-height: 18px;
    color: #5c6650;
}

.booking-step.is-active .booking-step-label {
    color: #283618;
    font-weight: 600;
}

.booking-step-title {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #283618;
    margin: 0 0 24px;
}

.booking-step-panel {
    min-height: 280px;
}

.booking-step-schedule {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.booking-step-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e8e2d9;
}

.booking-step-actions .btn {
    min-width: 160px;
}

.booking-step-back {
    background: transparent;
    border: 2px solid #606c38;
    color: #283618;
}

.booking-step-back:hover {
    background: #F3EFEA;
}

.session-summary--review {
    margin-bottom: 20px;
}

.booking-payment-note {
    font-family: 'HvDTrial Brandon Grotesque', var(--font-body);
    font-size: 15px;
    line-height: 22px;
    color: #5c6650;
    margin: 0;
    padding: 16px;
    background: #F3EFEA;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .booking-steps {
        gap: 6px;
        margin-bottom: 24px;
    }

    .booking-step-label {
        font-size: 11px;
        line-height: 14px;
    }

    .booking-step-number {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .booking-step:not(:last-child)::after {
        top: 15px;
        left: calc(50% + 18px);
        width: calc(100% - 36px);
    }

    .booking-step-title {
        font-size: 20px;
        line-height: 26px;
    }

    .booking-step-actions {
        flex-direction: column-reverse;
    }

    .booking-step-actions .btn {
        width: 100%;
    }
}