/* ==========================================================================
   Forest Cafe — Icon of Kalrayan Hills
   style.css
   1. Tokens & base
   2. Preloader
   3. Navbar
   4. Hero
   5. Info strip
   6. Shared section furniture
   7. About / Journey
   8. Cafe gallery + lightbox
   9. Menu
   10. Ribbon dividers
   11. Farm + products
   12. Stay (cot) + rooms
   13. Testimonials
   14. Visit / contact
   15. Footer + floating UI
   16. Reveal animations
   17. Base layout
   ========================================================================== */

/* ========== 1. Tokens & base ========== */

@font-face {
    font-family: 'CoffeeTown';
    src: url('../fonts/CoffeeTown.ttf') format('truetype'),
         url('../fonts/CoffeeTown.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NightRumble';
    src: url('../fonts/NightRumble-gx5G1.ttf') format('truetype'),
         url('../fonts/NightRumble-X3eP9.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* forest greens */
    --green-900: #1E3019;
    --green-800: #253C20;
    --green-700: #384F31;
    --green-600: #4A6542;
    --green-500: #6A8560;
    --green-100: #E4EDDE;
    /* cream paper */
    --cream: #F7F4EB;
    --cream-deep: #EFEADB;
    --card: #FFFFFF;
    /* honey accent — used for price, badges, highlights */
    --honey: #C9803A;
    --honey-soft: #F6E6D2;
    /* stay / cot sub-theme */
    --stay-700: #2F5A67;
    --stay-500: #4A7F8E;
    --stay-100: #E4F1F5;
    --stay-050: #F1F9FB;
    /* text */
    --ink: #2D3A29;
    --ink-soft: #556350;
    --ink-mute: #7C8878;
    --line: rgba(60, 83, 53, 0.12);
    --shadow-sm: 0 6px 16px rgba(45, 60, 40, 0.08);
    --shadow-md: 0 12px 30px rgba(40, 55, 35, 0.13);
    --shadow-lg: 0 24px 50px rgba(35, 50, 30, 0.20);
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 28px;
    --nav-h: 76px;
    --shell: 1200px;
    --pad: clamp(18px, 5vw, 64px);
    --font-display: 'CoffeeTown', 'Georgia', serif;
    --font-accent: 'NightRumble', 'CoffeeTown', 'Georgia', serif;
    --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 12px);
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-height: 100%;
    background-color: var(--cream);
    font-family: var(--font-body);
    color: var(--ink);
    overflow-x: hidden;
    line-height: 1.6;
}

body.no-scroll {
        overflow: hidden;
    }

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

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--honey);
    outline-offset: 3px;
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -80px;
    z-index: 4000;
    background: var(--green-800);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 12px 12px;
    text-decoration: none;
    font-weight: 700;
    transition: top 0.2s ease;
}

.skip-link:focus {
        top: 0;
    }

/* ========== 2. Preloader ========== */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

.preloader video {
        width: min(300px, 60vw);
        height: auto;
        object-fit: contain;
    }

.preloader.is-done {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.preloader-fallback {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: #EDF3E8;
    font-family: var(--font-display);
    font-size: 2rem;
}

.preloader.no-video .preloader-fallback {
    display: flex;
}

.preloader.no-video video {
    display: none;
}

.leaf-spin {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #9DC77F;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========== 3. Navbar ========== */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-h);
    z-index: 1200;
    display: flex;
    align-items: center;
    transition: background 0.35s ease, box-shadow 0.35s ease, height 0.35s ease;
}

.nav::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(12, 22, 10, 0.55), rgba(12, 22, 10, 0));
        opacity: 1;
        transition: opacity 0.35s ease;
    }

.nav.is-stuck {
        background: rgba(247, 244, 235, 0.92);
        backdrop-filter: blur(14px);
        box-shadow: 0 2px 20px rgba(45, 60, 40, 0.1);
        border-bottom: 1px solid var(--line);
    }

.nav.is-stuck::before {
            opacity: 0;
        }

.nav-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    flex-shrink: 0;
}

/* Brand text initial state: hidden on hero */
.nav .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transform: translateX(-10px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
    pointer-events: none;
}

/* Brand text appearance on scroll (.is-stuck) */
.nav.is-stuck .brand-text {
    opacity: 1;
    max-width: 200px;
    transform: translateX(0);
    pointer-events: auto;
}

.nav .brand-name {
    font-family: 'CoffeeTown', cursive, serif;
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--green-800);
    letter-spacing: 0.02em;
}

.nav .brand-sub {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 700;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.2vw, 18px);
    list-style: none;
}

.nav-links a {
        position: relative;
        display: block;
        padding: 8px 10px;
        font-size: 0.94rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.92);
        text-decoration: none;
        border-radius: 8px;
        transition: color 0.25s ease;
    }

.nav.is-stuck .nav-links a {
    color: var(--ink-soft);
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--honey);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s ease;
}

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

.nav-links a.is-active {
    color: #fff;
}

.nav.is-stuck .nav-links a.is-active {
    color: var(--green-800);
}

/* mobile drawer */

/* ========== 4. Hero ========== */

.hero {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 560px;
    background-color: #0d130b;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.hero video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        inset: 0;
    }

.hero-copy {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--nav-h) var(--pad) 120px;
    color: #fff;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #D9E8CC;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    margin-bottom: 22px;
}

.hero-eyebrow svg {
        width: 15px;
        height: 15px;
        fill: #9DC77F;
    }

.hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(3rem, 9vw, 6.6rem);
    line-height: 0.97;
    letter-spacing: -0.02em;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
}

.hero-tag {
    margin-top: 18px;
    font-size: clamp(1rem, 2.1vw, 1.3rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    max-width: 44ch;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.hero-buttons {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.hero-scroll {
    position: absolute;
    left: 51%;
    bottom: 50px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
}

.hero-scroll .mouse {
        width: 24px;
        height: 38px;
        border: 2px solid rgba(255, 255, 255, 0.65);
        border-radius: 14px;
        position: relative;
    }

.hero-scroll .mouse::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 7px;
            width: 4px;
            height: 7px;
            margin-left: -2px;
            border-radius: 2px;
            background: #fff;
            animation: wheel 1.7s ease-in-out infinite;
        }

@keyframes wheel {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    70% {
        transform: translateY(12px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

/* ========== 5. Info strip ========== */

.info-strip {
    background: var(--green-800);
    color: #E7F0E0;
    padding: 0;
}

.info-strip-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 20px var(--pad);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    border-right: 1px solid rgba(255, 255, 255, 0.13);
}

.info-item:last-child {
        border-right: none;
    }

.info-item svg {
        width: 19px;
        height: 19px;
        fill: #9DC77F;
        flex-shrink: 0;
    }

.info-item span {
        color: rgba(231, 240, 224, 0.75);
        font-weight: 500;
        display: block;
        font-size: 0.78rem;
    }

/* ========== 6. Shared section furniture ========== */

.section {
    position: relative;
    padding: 70px var(--pad) 30px;
    background-color: var(--cream);
}

.section--alt {
    background-color: var(--cream-deep);
}

.section--hairline {
    border-top: 1px solid var(--line);
}

.shell {
    max-width: var(--shell);
    margin: 0 auto;
    width: 100%;
}

.shell--wide {
    max-width: 1340px;
}

.split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(32px, 5vw, 60px);
}

.split--reverse {
    flex-direction: row-reverse;
}

.split > * {
    min-width: 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-600);
    margin-bottom: 12px;
}

.eyebrow svg {
        width: 17px;
        height: 17px;
        fill: var(--green-600);
    }

.headline {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--green-800);
    line-height: 1.08;
    letter-spacing: -0.015em;
    font-size: clamp(2.3rem, 5vw, 4rem);
}

.headline--xl {
    font-size: clamp(2.8rem, 7vw, 4.6rem);
}

.lede {
    font-size: clamp(1rem, 1.35vw, 1.1rem);
    line-height: 1.75;
    color: var(--ink-soft);
    font-weight: 500;
    margin-top: 18px;
    max-width: 54ch;
}

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 40px auto 36px;
}

.section-head .lede {
        margin-left: auto;
        margin-right: auto;
    }

/* buttons */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 0.98rem;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.btn .arrow {
        transition: transform 0.25s ease;
    }

.btn:hover .arrow {
        transform: translateX(4px);
    }

.btn--solid {
    background: var(--green-700);
    color: #fff;
    box-shadow: 0 10px 22px rgba(56, 79, 49, 0.25);
}

.btn--solid:hover {
        background: var(--green-900);
        transform: translateY(-2px);
    }

.btn--honey,
.btn-primary {
    background: #6d432b;
    color: #fff;
    box-shadow: 0 10px 22px rgba(109, 67, 43, 0.28);
}

.btn--honey:hover,
.btn-primary:hover {
        background: #533320;
        transform: translateY(-2px);
    }

.btn--ghost {
    background: transparent;
    color: var(--green-700);
    border-color: var(--green-700);
}

.btn--ghost:hover {
        background: var(--green-700);
        color: #fff;
        transform: translateY(-2px);
    }

.btn--light {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
}

.btn--light:hover {
        background: #fff;
        color: var(--green-800);
    }

.btn--sm {
    padding: 10px 20px;
    font-size: 0.88rem;
}

/* ========== 7. About / Journey ========== */

.about-media {
    flex: 1.1;
    display: flex;
    justify-content: center;
    position: relative;
}

.about-media::after {
    display: none !important;
}

.about-copy {
    flex: 1;
    max-width: 540px;
}

.floating-img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    animation: float 5s ease-in-out infinite;
}

.about-media .floating-img {
    filter: drop-shadow(0 14px 22px rgba(45, 28, 16, 0.42));
}

/* ==========================================================================
   Ground Contact Shadow & Silhouette Drop-Shadows (Diorama Effect)
   Matches the 3D cafe island ground shadow across key section assets:
   - item1.webp (About section cafe illustration)
   - little-farmer.webp (Little Farmer organic farming emblem)
   - item15.webp (Tiny Cot rooms cottage illustration)
   ========================================================================== */

/* Direct image drop-shadow to trace transparent WebP silhouettes */
img[src*="item1.webp"],
img[src*="item-1.webp"],
img[src*="littlefarmer.webp"],
img[src*="little-farmer.webp"],
img[src*="item15.webp"],
img[src*="item-15.webp"],
.about-media .floating-img,
.farm-media .farm-emblem-logo,
.cot-media img,
.has-ground-shadow > img,
[class*="farmer-wrap"] > img,
[class*="item-wrap"] > img {
  filter: drop-shadow(0 14px 22px rgba(45, 28, 16, 0.42)) !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Grounding ellipse beneath the wrapper */
.has-ground-shadow,
[class*="farmer-wrap"],
[class*="item-wrap"],
.about-media.has-ground-shadow,
.farm-media.has-ground-shadow,
.cot-media.has-ground-shadow {
  position: relative !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  max-width: 100% !important;
}

.about-media .item-wrap {
  width: 100% !important;
  max-width: 560px !important;
}

.farm-media .farmer-wrap,
.cot-media .item-wrap {
  width: auto !important;
  max-width: 100% !important;
}

.has-ground-shadow::after,
[class*="farmer-wrap"]::after,
[class*="item-wrap"]::after,
.about-media.has-ground-shadow::after,
.farm-media.has-ground-shadow::after,
.cot-media.has-ground-shadow::after {
  content: "" !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 10% !important;
  width: 80% !important;
  height: 22px !important;
  background: radial-gradient(ellipse at center, rgba(42, 26, 15, 0.45) 0%, rgba(42, 26, 15, 0.15) 45%, transparent 75%) !important;
  filter: blur(6px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

@keyframes float {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--green-100);
    color: var(--green-700);
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid rgba(74, 101, 66, 0.16);
}

.pill svg {
        width: 15px;
        height: 15px;
        fill: var(--green-600);
    }

.stat-num {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--honey);
    line-height: 1;
}

.stat-label {
    font-size: 0.82rem;
    color: var(--ink-mute);
    font-weight: 600;
    margin-top: 4px;
}

/* 4-column stat grid for #about */
.about-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: clamp(12px, 2vw, 24px) !important;
    align-items: start !important;
    width: 100% !important;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.about-stats .stat-item b {
    display: block;
    font-family: 'CoffeeTown', cursive, serif;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 700;
    color: #6d432b !important; /* exact warm brown matching button and strip */
    line-height: 1;
    white-space: nowrap;
}

.about-stats .stat-item span {
    display: block;
    font-size: 0.8rem;
    color: #7a5d49 !important; /* soft coffee brown subtitle - WCAG AA compliant */
    font-weight: 600;
    margin-top: 4px;
    line-height: 1.2;
    white-space: nowrap;
}

/* ========== 8. Cafe gallery + lightbox ========== */

.gallery-copy {
    flex: 1;
    max-width: 460px;
}

.cards-wrapper {
    flex: 1.5;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.cards-stack {
    position: relative;
    width: 100%;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
}

.photo-card {
    position: absolute;
    background: var(--card);
    padding: 10px 10px 14px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s ease,
                filter 0.5s ease;
    cursor: pointer;
    width: 220px;
    user-select: none;
    border: none;
    transform-style: preserve-3d;
}

.photo-card img {
        width: 100%;
        height: 260px;
        object-fit: cover;
        border-radius: 14px;
        display: block;
        pointer-events: none;
    }

/* Center card - straight, prominent */

.photo-card.pos-2 {
        transform: translateX(0) translateZ(40px) rotateY(0deg) scale(1.12);
        z-index: 5;
        filter: brightness(1);
    }

/* Inner side cards */

.photo-card.pos-1 {
        transform: translateX(-130px) translateZ(-30px) rotateY(30deg) scale(0.9);
        z-index: 4;
        filter: brightness(0.82);
    }

.photo-card.pos-3 {
        transform: translateX(130px) translateZ(-30px) rotateY(-30deg) scale(0.9);
        z-index: 4;
        filter: brightness(0.82);
    }

/* Outer side cards */

.photo-card.pos-0 {
        transform: translateX(230px) translateZ(-90px) rotateY(42deg) scale(0.76);
        z-index: 2;
        filter: brightness(0.65);
    }

.photo-card.pos-4 {
        transform: translateX(-230px) translateZ(-90px) rotateY(-42deg) scale(0.76);
        z-index: 2;
        filter: brightness(0.65);
    }

/* Only the center card reacts to hover — side/back cards stay put */

.photo-card.pos-2:hover,
    .photo-card.pos-2:focus-visible {
        z-index: 50;
        transform: translateX(0) translateZ(80px) rotateY(0deg) scale(1.18);
        filter: brightness(1);
        box-shadow: var(--shadow-lg);
    }

.nav-arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--green-600);
    color: #fff;
    border: none;
    font-size: 1.6rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    z-index: 30;
    line-height: 1;
    flex-shrink: 0;
}

.nav-arrow:hover {
        background: var(--green-800);
        transform: scale(1.1);
    }

.gallery-full {
    display: none;
    flex-direction: column;
    gap: 34px;
    animation: fadeUp 0.45s ease;
}

.gallery-full.is-open {
        display: flex;
    }

.gallery-default.is-hidden {
    display: none;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gallery-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.grid-card {
    background: var(--card);
    padding: 12px;
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
    cursor: pointer;
    display: block;
    width: 100%;
}

.grid-card:hover {
        transform: translateY(-7px);
        box-shadow: var(--shadow-md);
    }

.grid-card img {
        width: 100%;
        height: 210px;
        object-fit: cover;
        border-radius: 14px;
    }

/* lightbox */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(13, 22, 11, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
}

.lightbox.is-open {
        display: flex;
    }

.lightbox img {
        max-width: min(1100px, 92vw);
        max-height: 82vh;
        object-fit: contain;
        border-radius: var(--radius);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    }

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.6rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.2s ease;
    line-height: 1;
}

.lightbox-close:hover,
    .lightbox-prev:hover,
    .lightbox-next:hover {
        background: rgba(255, 255, 255, 0.3);
    }

.lightbox-close {
    top: 22px;
    right: 22px;
}

.lightbox-prev {
    left: clamp(10px, 3vw, 34px);
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next {
    right: clamp(10px, 3vw, 34px);
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-counter {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* ========== 9. Menu ========== */

/* ===== Smooth blend: Cafe → What We Serve ===== */

#cafe {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}

#cafe::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -70px;
        width: 100%;
        height: 70px;
        background: linear-gradient( to bottom, var(--cream) 0%, #F3F0E6 35%, var(--cream-deep) 100% );
        pointer-events: none;
        z-index: 5;
    }

/* Keep the next section underneath the blend */

#menu {
    position: relative;
    z-index: 1;
    border-top: none;
}

.menu-copy {
    flex: 1.15;
    max-width: 560px;
}

.menu-media {
    flex: 1;
    padding-left: 95px;
    display: flex;
    justify-content: flex-start;
}

.menu-board {
    margin-top: clamp(48px, 6vw, 72px);
}

.menu-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 34px;
}

.menu-tab {
    border: 2px solid var(--line);
    background: var(--card);
    color: var(--ink-soft);
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: 999px;
    padding: 10px 22px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.menu-tab:hover {
        border-color: var(--green-500);
        color: var(--green-700);
    }

.menu-tab.is-active {
        background: var(--green-700);
        border-color: var(--green-700);
        color: #fff;
        box-shadow: 0 8px 18px rgba(56, 79, 49, 0.22);
    }

.menu-panel {
    display: none;
}

.menu-panel.is-active {
        display: block;
        animation: fadeUp 0.35s ease;
    }

.menu-list {
    list-style: none;
    columns: 2;
    column-gap: clamp(28px, 5vw, 64px);
    max-width: 880px;
    margin: 0 auto;
}

.menu-list li {
        break-inside: avoid;
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 13px 0;
        border-bottom: 1px dashed rgba(60, 83, 53, 0.22);
    }

.menu-item-name {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.menu-dots {
    flex: 1;
    border-bottom: 1px dotted rgba(60, 83, 53, 0.3);
    transform: translateY(-4px);
}

.menu-price {
    font-weight: 700;
    color: var(--honey);
    white-space: nowrap;
}

.menu-note {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9rem;
    color: var(--ink-mute);
}

/* full menu modal */

.modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(13, 22, 11, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 3vw, 40px);
}

.modal.is-open {
        display: flex;
    }

.modal-panel {
    position: relative;
    max-width: min(1000px, 94vw);
    max-height: 92vh;
    overflow: auto;
    border-radius: var(--radius-lg);
}

.modal-panel img {
        width: 100%;
        border-radius: var(--radius-lg);
    }

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--green-800);
    font-size: 1.6rem;
    cursor: pointer;
    z-index: 3;
    line-height: 1;
    box-shadow: var(--shadow-sm);
}

.modal-close:hover {
        background: #fff;
    }

/* ========== 11. Farm + products ========== */

.farm-copy {
    flex: 1;
    max-width: 520px;
}

.farm-media {
    flex: 1.15;
}

.farm-media img {
        width: 100%;
        filter: drop-shadow(0 10px 15px rgba(64, 58, 40, 0.08));
        animation: float 5.5s ease-in-out infinite;
    }

/* ============ RIBBON & SEAMLESS DIVIDERS ============ */

/* Strip solid block backgrounds that cause horizontal seam cuts */
.menu-custom-note,
.menu-divider,
.ribbon-separator,
#farm,
#stay,
.stay-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* 1. Close the Gap Above the Ribbon */
p.menu-note,
.menu-custom-note,
.menu-disclaimer,
.menu-subnote {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

#menu,
.theme-menu,
body #menu {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: unset !important;
}

/* =========================================================
   2. RE-POSITION THE RIBBON UPWARD
   ========================================================= */

.menu-divider,
.ribbon-separator,
.ribbon {
    position: relative !important;
    width: 100% !important;
    margin-top: -30px !important; /* Pulls ribbon upward toward the menu note */
    margin-bottom: -25px !important; /* Pulls the following farm section closer */
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2 !important;
    /* Smooth transition — no hard line */
    background: linear-gradient( to bottom, #EFEADB 0%, #F0ECE1 20%, #F2EFE7 40%, #F5F2EB 65%, #F7F4EB 85%, #F7F4EB 100% ) !important;
}


/* =========================================================
   RIBBON INNER
   ========================================================= */

.ribbon-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

/* =========================================================
   RIBBON IMAGE
   ========================================================= */

.menu-divider img,
.ribbon-separator img,
.ribbon img,
.ribbon-inner img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}
/* =========================================================
   LITTLE FARMER HEADING & BADGE SCALING
   ========================================================= */

#farm,
.theme-farm,
body #farm {
    position: relative;
    z-index: 2;
    margin-top: 0 !important;
    margin-bottom: 0;
    padding-top: 10px !important;
}

/* 1. Enlarge the Section Headline ("LITTLE FARMER") */
#farm h2,
#farm .farm-copy h2,
.theme-farm .farm-copy h2,
.farm-title {
    font-size: clamp(2.4rem, 4.5vw, 3.2rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0.01em;
}

.farm-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.farm-title-icon {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    margin: 0 !important;
    object-fit: contain !important;
    filter: none !important;
    animation: none !important;
    flex: none;
}

/* 2. Enlarge the Circular "Little Farmer" Logo Badge & Shift Rightward */
#farm .farm-media,
body #farm .farm-media,
.farm-logo-col,
.farm-media {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-right: 24px !important;
    flex: 0 0 clamp(420px, 44%, 560px) !important;
    max-width: 560px !important;
}

#farm .farm-emblem-logo,
#farm .farm-media img,
.farm-badge-img,
.farm-logo-col img {
    width: clamp(400px, 42vw, 560px) !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    filter: drop-shadow(0 14px 22px rgba(45, 28, 16, 0.42));
}

@media (max-width: 768px) {
    #farm .farm-media,
    body #farm .farm-media,
    .farm-logo-col,
    .farm-media {
        justify-content: center !important;
        padding-right: 0 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
    }
    #farm .farm-emblem-logo,
    #farm .farm-media img,
    .farm-badge-img,
    .farm-logo-col img {
        width: clamp(280px, 78vw, 360px) !important;
    }
    .farm-title-icon { width: 34px !important; height: 34px !important; max-width: 34px !important; }
}

#farm::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -100px;
        width: 100%;
        height: 100px;
        background: linear-gradient( to bottom, var(--cream) 0%, rgba(247, 244, 235, 0.8) 30%, rgba(239, 234, 219, 0.8) 70%, var(--cream-deep) 100% );
        pointer-events: none;
        z-index: 5;
    }

#shop {
    position: relative;
    z-index: 1;
}

/* Little Farmer wooden image */

.little-farmer-logo {
    display: block;
    width: min(100%, 390px);
    height: auto;
    object-fit: contain;
    margin-top: -2px;
}

/* --- Expandable Products Grid --- */

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hide products beyond the 8th item initially */

.products-grid:not(.is-expanded) .product-card:nth-child(n+9),
.product-card.is-hidden,
.product-card[data-collapsed="true"],
.product-card.hidden-product,
.product-card.shop-extra-item.collapsed {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0;
    transform: translateY(20px);
}

/* When expanded, reveal remaining items with smooth staggered fade-in */

.products-grid.is-expanded .product-card:nth-child(n+9),
.product-card.is-visible,
.product-card[data-collapsed="false"],
.product-card.shop-extra-item:not(.collapsed) {
    display: flex !important;
    height: auto !important;
    animation: productReveal 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.products-grid.is-expanded .product-card:nth-child(9) { animation-delay: 0.05s; }

.products-grid.is-expanded .product-card:nth-child(10) { animation-delay: 0.12s; }

.products-grid.is-expanded .product-card:nth-child(11) { animation-delay: 0.19s; }

.products-grid.is-expanded .product-card:nth-child(12) { animation-delay: 0.26s; }

@keyframes productReveal {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* View More Button Wrapper */

.shop-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-top: 38px;
}

.shop-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    font-size: 0.95rem;
    cursor: pointer;
}

.shop-expand-btn .expand-icon {
    display: inline-flex;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shop-expand-btn.is-active .expand-icon {
    transform: rotate(180deg);
}

.product-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 0 0 22px; /* removed top/side padding */
    /* overflow: hidden removed — image rounding handled by .product-img-wrap;
       removing here prevents bottom/side clipping of the CTA button on narrow viewports */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

.product-card:hover {
        transform: translateY(-7px);
        box-shadow: var(--shadow-md);
    }

.product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--honey-soft);
    color: var(--honey);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-badge--unavailable {
    background: rgba(18, 18, 18, 0.92);
    color: #f5f5f5;
}

.product-card.is-unavailable {
    background: #efefef;
    border-color: #d6d6d6;
    opacity: 0.9;
}

.product-card.is-unavailable:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.product-card.is-unavailable .product-img-wrap {
    background: #d9d9d9;
}

.product-card.is-unavailable .product-img-wrap img {
    filter: grayscale(1) brightness(0.78);
}

.product-card.is-unavailable .product-title,
.product-card.is-unavailable .product-weight,
.product-card.is-unavailable .product-desc {
    color: #4a4a4a;
}

.product-img-wrap {
    width: 100%;
    height: 220px;
    padding: 0;
    margin-bottom: 16px;
    overflow: hidden;
    background: var(--cream-deep);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.product-img-wrap img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform 0.35s ease;
    }

.product-card[data-id="prod-1"] .product-img-wrap img {
    filter: drop-shadow(0 10px 16px rgba(64, 58, 40, 0.18));
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.06);
}

.product-title,
.product-weight,
.product-desc {
    margin-left: 18px;
    margin-right: 18px;
}

.product-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.28rem;
    color: var(--green-800);
    line-height: 1.2;
}

.product-weight {
    font-size: 0.78rem;
    color: var(--ink-mute);
    font-weight: 600;
    margin-top: 2px;
}

.product-desc {
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin-top: 8px;
    flex: 1;
    line-height: 1.55;
}

/* Individual Showcase Card */

/* --- Adjust Room Cards Frame to Show Full Architectural Content --- */

/* Interactive Capsule / Dot Indicators */

/* ========== CUSTOMER REVIEWS ========== */

/* ========== 15. Visit / contact ========== */

.visit-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(30px, 4vw, 54px);
    align-items: stretch;
}

.contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 26px;
}

.contact-list li {
        display: flex;
        gap: 15px;
        padding: 17px 0;
        border-bottom: 1px solid var(--line);
    }

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

.contact-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--green-100);
    flex-shrink: 0;
}

.contact-icon svg {
        width: 20px;
        height: 20px;
        fill: var(--green-700);
    }

.contact-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 3px;
}


/* Contact & Footer Phone Links */
.contact-phone-link {
    display: inline-block;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-phone-link:hover {
    color: var(--honey, #C9803A);
}

.phone-sep {
    display: inline-block;
    margin: 0 5px;
    opacity: 0.65;
    user-select: none;
}

.contact-value {
    font-weight: 600;
    color: var(--green-800);
    line-height: 1.5;
}

.contact-value a {
        text-decoration: none;
    }

.contact-value a:hover {
            color: var(--honey);
        }

.hours-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 0.92rem;
    padding: 7px 0;
}

.hours-row span:first-child {
        color: var(--ink-soft);
    }

.hours-row span:last-child {
        font-weight: 700;
        color: var(--green-800);
    }

/* ========== 16. Footer + floating UI ========== */

.socials {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.socials a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        transition: all 0.25s ease;
    }

.socials svg {
        width: 17px;
        height: 17px;
        fill: rgba(226, 237, 219, 0.85);
    }

.socials a:hover {
        background: var(--honey);
        border-color: var(--honey);
        transform: translateY(-2px);
    }

.socials a:hover svg {
            fill: #fff;
        }

/* scroll progress + back to top */

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--green-600), var(--honey));
    z-index: 1300;
    transition: width 0.1s linear;
}

.to-top {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--green-700);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 1250;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.3s ease;
    display: grid;
    place-items: center;
}

.to-top.is-on {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.to-top:hover {
        background: var(--green-900);
    }

/* ========== 17. Reveal animations ========== */

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.8, 0.3, 1), transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.reveal.is-in {
        opacity: 1;
        transform: none;
    }

@media (prefers-reduced-motion: reduce) {
html {
        scroll-behavior: auto;
    }

*,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

.reveal {
        opacity: 1;
        transform: none;
    }
}

/* ========== 19. Print ========== */

@media print {
.nav,
    .preloader,
    .to-top,
    .progress-bar,
    .hero video,

    body {
        background: #fff;
    }

.section {
        padding: 20px 0;
        break-inside: avoid;
    }
}

/* =========================================================================
   ART DIRECTOR SHOWCASE SECTION
   Dark scrapbook-style section on Black.png, matching the reference
   layout: intro + portrait, journey stats, future art classes, articles.
========================================================================= */

/* Background image filling the section cleanly */

/* Top Downward-Dipping Cream Curve */

/* Bottom Upward-Curving Cream Mask into Reviews */

/* Master Perch Layer */

/* --- Left Single Minion: Dropped ~1cm directly onto the chalkboard --- */

/* --- Right Minion Couple: Dropped ~1cm onto the curve --- */

/* --- Right Hanging Plant: Pulled down so the rope anchor sits on the rim and foliage hangs below --- */

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

/* ---------- PLACEHOLDER PHOTO BOXES ----------
   Swap these out for real <img> tags — see comments in the HTML.
------------------------------------------------ */

/* ---------- JOURNEY ---------- */

/* ---------- FUTURE PLANS ---------- */

/* ---------- ARTICLES ---------- */

/* ---------- RESPONSIVE ---------- */

/* =========================================================
   EDITORIAL SLAT COVERFLOW CAROUSEL (INNER #rooms ONLY)
========================================================= */

:root {
    --slat-duration: 560ms;
    --slat-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Filter Pills (Interior / Exterior) --- */

/* ==========================================================================
   FOREST CAFE — v2 DESIGN LAYER (desktop-first)
   Themes:  .theme-cafe = brown  |  .theme-farm = green  |  .theme-stay = blue
   Edit the colour tokens in :root below to re-tune any theme in one place.
   ========================================================================== */

:root {
    --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --sec: 80px;                       /* vertical padding of every main section */

    /* cafe / brown family */
    --brn-900: #3A2418;
    --brn-800: #4E3020;
    --brn-700: #6B4630;
    --brn-500: #8F6444;
    --brn-400: #B07C55;
    --brn-200: #E2CBB0;
    --brn-100: #F1E4D5;
    --brn-soft: #7B5B46;               /* info strip: pastel but dark */
    --brn-ink: #6A5242;                /* paragraph text on brown sections */

    /* farm / green family (uses existing --green-*) */
    --farm-ink: #4B5E45;
}

body { font-family: var(--font-body); }

/* ---------- Type scale (lighter than the old display font) ---------- */

body .headline { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.15; letter-spacing: -0.01em; }

body .headline--xl { font-size: clamp(2.5rem, 4.4vw, 3.6rem); }

body .lede { font-size: 1.05rem; line-height: 1.8; font-weight: 400; max-width: 52ch; margin-top: 16px; }

body .eyebrow { font-size: 0.8rem; letter-spacing: 0.12em; margin-bottom: 14px; }

body .hero-title { font-weight: 500; font-size: clamp(3rem, 5.8vw, 5rem); line-height: 1.05; letter-spacing: -0.015em; }

body .btn { font-weight: 600; padding: 13px 28px; }

body .stat-num { font-family: var(--font-display); font-weight: 500; }

/* ---------- Header: logo only, no circle ---------- */

.brand-logo { display: block; height: 50px; width: auto; object-fit: contain; }

.nav.is-stuck .brand-logo { height: 44px; transition: height .3s ease; }

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

/* ---------- Info strip (pastel dark brown) ---------- */

.info-strip { background: var(--brn-soft); color: #FBF3EA; }

.info-item { border-right-color: rgba(255, 255, 255, 0.18); }

.info-item svg { fill: #EBCFB0; }

.info-item span { color: rgba(251, 243, 234, 0.8); }

/* ---------- Section rhythm + alignment ---------- */

body #about, body #cafe, body #menu, body #farm, body #shop, body #stay, body #visit {
    padding-top: var(--sec);
    padding-bottom: var(--sec);
}

body .section-head { margin: 0 auto 48px; max-width: 700px; }

/* every two-column block: equal columns, text left-aligned, vertically centred */

body .split { gap: 72px; align-items: center; justify-content: space-between; }

body .about-media, body .about-copy,
body .farm-media,  body .farm-copy,
body .cot-media,   body .cot-copy,
body .menu-media,  body .menu-copy { flex: 1 1 0; min-width: 0; }

body .gallery-copy { flex: 0 0 38%; max-width: none; }

body .cards-wrapper { flex: 1 1 0; }

/* ==========================================================================
   THEME — CAFE (brown)
   ========================================================================== */

.theme-cafe .headline,
.theme-cafe .stat-num,
.theme-cafe .contact-value,
.theme-cafe .menu-item-name { color: var(--brn-800); }

.theme-cafe .eyebrow { color: var(--brn-500); }

.theme-cafe .eyebrow svg { fill: var(--brn-500); }

.theme-cafe .lede,
.theme-cafe .stat-label,
.theme-cafe .menu-note,
.theme-cafe .contact-label,
.theme-cafe .hours-row { color: var(--brn-ink); }

.theme-cafe a { color: var(--brn-700); }

.theme-cafe .pill { color: var(--brn-800, #4E3020); background: var(--brn-100, #F1E4D5); border-color: var(--brn-200, #E2CBB0); }

.theme-cafe .pill svg { fill: var(--brn-700, #6B4630); }

.theme-cafe .contact-icon { background: var(--brn-100); }

.theme-cafe .contact-icon svg { fill: var(--brn-700); }

.theme-cafe .btn--solid,
.theme-cafe .btn--honey { background: var(--brn-700); color: #fff; box-shadow: 0 10px 22px rgba(78, 48, 32, .25); }

.theme-cafe .btn--solid:hover,
.theme-cafe .btn--honey:hover { background: var(--brn-900); color: #fff; }

.theme-cafe .btn--ghost { background: transparent; color: var(--brn-700); border-color: var(--brn-700); box-shadow: none; }

.theme-cafe .btn--ghost:hover { background: var(--brn-700); color: #fff; }

/* menu board */

.theme-cafe .menu-tab { color: var(--brn-ink); border-color: rgba(107, 70, 48, .22); }

.theme-cafe .menu-tab:hover { border-color: var(--brn-500); color: var(--brn-700); }

.theme-cafe .menu-tab.is-active { background: var(--brn-700); border-color: var(--brn-700); color: #fff; }

.theme-cafe .menu-list li { border-bottom-color: rgba(107, 70, 48, .25); }

.theme-cafe .menu-dots { border-bottom-color: rgba(107, 70, 48, .35); }

.theme-cafe .menu-price { color: var(--brn-500); font-weight: 700; }

/* cafe ambience card stack — tinted stage + brown frames so cards stand out */

.cards-wrapper {
    background: linear-gradient(145deg, #F0E2D0 0%, #E4CDB2 100%);
    border-radius: 32px;
    padding: 44px 24px;
    min-height: 460px;
    box-shadow: inset 0 0 0 1px rgba(107, 70, 48, .12);
}

.photo-card { background: var(--brn-500); box-shadow: 0 18px 36px rgba(58, 36, 24, .35), inset 0 0 0 1px rgba(255, 255, 255, .22); }

.photo-card.pos-1,
.photo-card.pos-3 { background: var(--brn-400); }

.photo-card.pos-2 { background: var(--brn-800); }

.photo-card.pos-0,
.photo-card.pos-4 { background: var(--brn-700); }

.photo-card img { border-radius: 12px; }

.cards-wrapper .nav-arrow { background: var(--brn-700); }

.cards-wrapper .nav-arrow:hover { background: var(--brn-900); }

/* ==========================================================================
   THEME — FARM (green)
   ========================================================================== */

.theme-farm .headline,
.theme-farm .product-title { color: var(--green-800); }

.theme-farm .eyebrow { color: var(--green-600); }

.theme-farm .eyebrow svg { fill: var(--green-600); }

.theme-farm .lede,
.theme-farm .product-desc { color: var(--farm-ink); }

.theme-farm .product-weight { color: var(--green-600); font-weight: 600; }

.theme-farm .btn--solid,
.theme-farm .btn--honey { background: var(--green-700); color: #fff; box-shadow: 0 10px 22px rgba(56, 79, 49, .25); }

.theme-farm .btn--solid:hover,
.theme-farm .btn--honey:hover { background: var(--green-900); color: #fff; }

.theme-farm .product-badge { background: var(--green-100); color: var(--green-700); }

.theme-farm .product-card { border-color: rgba(56, 79, 49, .14); }

.theme-farm .product-img-wrap { background: var(--green-100); }

body #shop .products-grid { gap: 28px; }

/* ==========================================================================
   THEME — STAY (blue)
   ========================================================================== */

/* ==========================================================================
   ROOMS — accordion gallery (replaces the old coverflow)
   Hovering / clicking a panel makes it grow; the others fold into slim
   vertical strips with a rotated label.
   ========================================================================== */

/* folded state: vertical label */

/* open state: tag + title rise in after the panel has opened */

/* ==========================================================================
   VISIT — text + map side by side
   ========================================================================== */

body .visit-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }

.visit-map {
    position: relative; min-height: 560px; border-radius: 28px; overflow: hidden;
    background: var(--brn-100); box-shadow: 0 18px 40px rgba(58, 36, 24, .18);
    border: 6px solid #fff;
}

.visit-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   FOOTER (brown)
   ========================================================================== */

/* ==========================================================================
   FARM SHOP — clickable cards + order popup (quantity → WhatsApp)
   ========================================================================== */

.product-card { cursor: pointer; }

.product-card:focus-visible { outline: 3px solid var(--green-600); outline-offset: 3px; }

/* ==========================================================================
   Premium Pill CTA Button (Position-Swapping Shopping Bag + Shine)
   ========================================================================== */

.cta-pill-btn {
  /* Dimensions & Theming */
  --btn-height: 44px;
  --btn-min-width: 172px;
  --btn-pad-x: 16px;
  --icon-size: 30px;
  
  /* Forest & Hill Cafe Color Palette */
  --cta-bg: #2e4d25;
  --cta-bg-hover: #233c1c;
  --cta-icon-bg: #ffffff;
  --cta-icon-color: #2e4d25;
  --cta-shadow: rgba(35, 60, 28, 0.28);
  --cta-shadow-hover: rgba(35, 60, 28, 0.42);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  min-width: var(--btn-min-width);
  padding: 0 var(--btn-pad-x);
  border-radius: 999px;
  border: none;
  background-color: var(--cta-bg);
  box-shadow: 0 4px 12px var(--cta-shadow);
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  text-decoration: none;
  margin: 14px 18px 0;
  align-self: flex-start;
  transition: 
    background-color 0.4s ease,
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.product-card .product-desc + .cta-pill-btn {
  margin-top: auto;
}

/* Diagonal Moving Shine Overlay */
.cta-pill-btn .cta-shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
  transition: none;
}

/* Button Text */
.cta-pill-btn .cta-label {
  font-family: 'Montserrat', 'Manrope', system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: 0.02em;
  z-index: 1;
  /* Leaves room for the icon on the right by default */
  transform: translateX(-14px);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* White Circular Icon Container */
.cta-pill-btn .cta-icon-wrap {
  position: absolute;
  top: 50%;
  left: calc(100% - var(--icon-size) - 6px);
  right: auto;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  background-color: var(--cta-icon-bg);
  color: var(--cta-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  z-index: 2;
  transform: translateY(-50%) rotate(0deg);
  transition: 
    left 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-pill-btn .cta-icon-svg {
  display: block;
  stroke: var(--cta-icon-color);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Unified State Transitions (Hover, Active/Touch, Focus)
   ========================================================================== */
.cta-pill-btn:hover,
.cta-pill-btn:active,
.cta-pill-btn:focus,
.product-card:hover .cta-pill-btn,
.product-card:active .cta-pill-btn {
  background-color: var(--cta-bg-hover);
  box-shadow: 0 8px 20px var(--cta-shadow-hover);
}

/* 1. Sweep Diagonal Shine */
.cta-pill-btn:hover .cta-shine,
.cta-pill-btn:active .cta-shine,
.cta-pill-btn:focus .cta-shine,
.product-card:hover .cta-pill-btn .cta-shine,
.product-card:active .cta-pill-btn .cta-shine {
  left: 140%;
  transition: left 750ms ease-in-out;
}

/* 2. Swap Icon: Glide from Right to Left edge */
.cta-pill-btn:hover .cta-icon-wrap,
.cta-pill-btn:active .cta-icon-wrap,
.cta-pill-btn:focus .cta-icon-wrap,
.product-card:hover .cta-pill-btn .cta-icon-wrap,
.product-card:active .cta-pill-btn .cta-icon-wrap {
  left: 6px;
  transform: translateY(-50%) rotate(0deg);
}

/* 3. Swap Label: Shift rightward to take the icon's spot */
.cta-pill-btn:hover .cta-label,
.cta-pill-btn:active .cta-label,
.cta-pill-btn:focus .cta-label,
.product-card:hover .cta-pill-btn .cta-label,
.product-card:active .cta-pill-btn .cta-label {
  transform: translateX(14px);
}

/* 4. Subtle Shopping Bag Cart Tilt */
.cta-pill-btn:hover .cta-icon-svg,
.cta-pill-btn:active .cta-icon-svg,
.cta-pill-btn:focus .cta-icon-svg,
.product-card:hover .cta-pill-btn .cta-icon-svg,
.product-card:active .cta-pill-btn .cta-icon-svg {
  transform: rotate(15deg) scale(1.08);
}

/* ==========================================================================
   Active / Press & Accessibility Focus State
   ========================================================================== */
.cta-pill-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px var(--cta-shadow);
}

.cta-pill-btn:focus-visible {
  outline: 3px solid rgba(46, 77, 37, 0.4);
  outline-offset: 3px;
}

.cta-pill-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.pm {
    position: fixed; inset: 0; z-index: 3200; display: none;
    align-items: center; justify-content: center; padding: clamp(14px, 3vw, 40px);
    background: rgba(18, 28, 15, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.pm.is-open { display: flex; animation: pmFade .25s ease both; }

.pm-panel {
    position: relative;
    width: min(840px, 100%);
    max-height: min(90vh, 580px) !important;
    height: auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
    border-radius: 20px !important;
    background: var(--cream);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
    animation: pmPop .4s cubic-bezier(.2, .9, .3, 1.15) both;
}

/* Left image container */
.pm-img {
    flex: 1 1 45% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: var(--green-100);
}

.pm-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Right details & order form container */
.pm-body {
    flex: 1 1 55% !important;
    padding: 22px 26px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow-y: auto !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

.pm-body::-webkit-scrollbar {
    display: none !important; /* Chrome / Safari */
}

.pm-eyebrow {
    font-size: .72rem !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--green-600);
    margin: 0 0 2px 0 !important;
}

.pm-title {
    margin: 2px 0 4px 0 !important;
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    color: var(--green-800);
}

.pm-tag {
    margin: 0 0 4px 0 !important;
    font-size: .8rem !important;
    font-weight: 600;
    color: var(--green-600);
}

.pm-desc {
    margin: 2px 0 8px 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
    color: var(--farm-ink);
}

.pm-qty-label {
    margin-top: 6px !important;
    font-size: .75rem !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.pm-lines {
    margin-top: 6px !important;
    display: grid;
    gap: 6px !important;
}

.pm-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pm-line.is-multi {
    padding: 6px 8px 6px 14px !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(56, 79, 49, .16);
    background: rgba(255, 255, 255, .6);
    transition: border-color .2s ease, background .2s ease;
}

.pm-line.is-multi.is-on {
    border-color: var(--green-600);
    background: #fff;
}

.pm-line-name {
    font-weight: 700;
    font-size: .9rem !important;
    color: var(--green-800);
}

.pm-qty {
    margin-top: 0 !important;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    border: 1.5px solid rgba(56, 79, 49, .25);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}

.pm-qty button {
    width: 36px !important;
    height: 36px !important;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1.2rem !important;
    line-height: 1;
    color: var(--green-700);
    transition: background .2s ease;
}

.pm-qty button:hover { background: var(--green-100); }

.pm-qty input {
    width: 44px !important;
    height: 36px !important;
    border: 0;
    text-align: center;
    background: transparent;
    font: 700 0.95rem var(--font-body);
    color: var(--green-800);
    -moz-appearance: textfield;
    appearance: textfield;
}

.pm-qty input::-webkit-outer-spin-button, .pm-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pm-qty input:focus { outline: none; }
.pm-qty:focus-within { border-color: var(--green-600); }

/* Quantity stepper, inputs & WhatsApp button */
.pm-extra {
    margin-top: 8px !important;
    margin-bottom: 6px !important;
    display: grid;
    gap: 6px !important;
}

.pm-extra input {
    height: 36px !important;
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
    border-radius: 10px !important;
    border: 1.5px solid rgba(56, 79, 49, .2);
    background: #fff;
    font-family: var(--font-body);
    color: var(--green-800);
}

.pm-extra input:focus { outline: none; border-color: var(--green-600); }

.pm-summary {
    margin-top: 6px !important;
    font-weight: 700;
    font-size: .88rem !important;
    color: var(--green-800);
    min-height: 1.2em;
}

.pm-buy {
    height: 42px !important;
    margin-top: 8px !important;
    padding: 10px 22px !important;
    font-size: 0.92rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    background: #1F8F4E;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(31, 143, 78, .3);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.pm-buy:hover { background: #187a42; transform: translateY(-2px); box-shadow: 0 14px 26px rgba(31, 143, 78, .38); }
.pm-buy svg { width: 18px; height: 18px; fill: #fff; flex: none; }
.pm-buy.is-disabled { background: #9aa596 !important; box-shadow: none !important; cursor: not-allowed; transform: none !important; }

.pm-note {
    margin-top: 6px !important;
    font-size: 0.72rem !important;
    color: var(--ink-mute);
    line-height: 1.35 !important;
}

.pm-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .95);
    color: var(--green-800);
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease;
}

.pm-close:hover { transform: rotate(90deg); }

@keyframes pmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmPop { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 768px) {
    .pm-panel {
        flex-direction: column !important;
        max-height: 88vh !important;
        width: 92vw !important;
        margin: auto !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }
    
    .pm-img {
        max-height: 200px !important;
        height: 200px !important;
        flex: none !important;
    }
    
    .pm-body {
        padding: 18px !important;
        flex: none !important;
        overflow-y: visible !important;
    }

    .pm-buy {
        width: 100%;
    }
}

/* ==========================================================================
   OUR STORY — preview + read full story
   ========================================================================== */

/* ==========================================================================
   ██  MOBILE & TABLET LAYER  ██
   Everything above is the desktop design and is left untouched.
   Breakpoints:  ≤1100 small laptop / tablet landscape
                 ≤900  tablet / drawer menu / stacked sections
                 ≤767  phones (also the 9:16 hero video)
                 ≤480  small phones
   ========================================================================== */

/* hamburger is hidden on desktop */

.nav-toggle, .nav-backdrop, .nav-links-cta { display: none; }

/* ---------- ≤1100 ---------- */

@media (max-width: 1100px) {
body .split { gap: 48px; }

.products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

body #shop .products-grid { gap: 20px; }

.info-item { font-size: .85rem; }
}

/* ---------- ≤900 : tablet ---------- */

@media (max-width: 900px) {
:root { --nav-h: 66px; --sec: 60px; }

/* ----- NAV: hamburger + slide-in drawer ----- */

.nav.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(247, 244, 235, .97); }

.nav-inner { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }

.brand-logo, .nav.is-stuck .brand-logo { height: 42px; }

.nav-toggle {
        display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
        width: 46px; height: 46px; margin-left: auto; margin-right: -8px; padding: 0; border: 0; border-radius: 50%;
        background: rgba(255, 255, 255, .14); cursor: pointer; position: relative; z-index: 3;
        -webkit-tap-highlight-color: transparent; transition: background .3s ease;
    }

.nav-toggle span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .35s ease, opacity .25s ease, background .3s ease; }

.nav.is-stuck .nav-toggle { background: rgba(56, 79, 49, .08); }

.nav.is-stuck .nav-toggle span, .nav-toggle[aria-expanded="true"] span { background: var(--green-800); }

.nav-toggle[aria-expanded="true"] { background: rgba(56, 79, 49, .1); }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }

.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1100; background: rgba(18, 28, 15, .55);
        opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
    }

.nav-backdrop.is-open { opacity: 1; visibility: visible; }

.nav-links {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 2;
        width: min(82vw, 340px); height: 100dvh; margin: 0;
        padding: calc(var(--nav-h) + 14px) 22px calc(28px + env(safe-area-inset-bottom));
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px;
        background: var(--cream); overflow-y: auto;
        box-shadow: -18px 0 50px rgba(0, 0, 0, .25);
        transform: translateX(105%); visibility: hidden;
        transition: transform .4s cubic-bezier(.3, .8, .3, 1), visibility 0s linear .4s;
    }

.nav-links.is-open { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.3, .8, .3, 1), visibility 0s; }

.nav-links li { border-bottom: 1px solid var(--line); }

.nav-links a, .nav.is-stuck .nav-links a {
        padding: 15px 6px; font-size: 1.08rem; font-family: var(--font-display); font-weight: 500;
        color: var(--green-800); border-radius: 0;
    }

.nav-links a.is-active, .nav.is-stuck .nav-links a.is-active { color: var(--honey); }

.nav-links a::after { display: none; }

.nav-links-cta { display: block; border-bottom: 0 !important; margin-top: 18px; }

.nav-links .nav-links-cta a, .nav.is-stuck .nav-links .nav-links-cta a {
        text-align: center; padding: 14px; border-radius: 999px; background: var(--green-700); color: #fff;
        font-family: var(--font-body); font-weight: 700; font-size: 1rem;
    }

/* ----- sections stack ----- */

.section { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }

body .split, .split--reverse { flex-direction: column; gap: 36px; align-items: stretch; }

body .gallery-copy, body .about-media, body .about-copy, body .farm-media, body .farm-copy,
    body .cot-media, body .cot-copy, body .menu-media, body .menu-copy, body .cards-wrapper {
        flex: none; width: 100%; max-width: none;
    }

.about-media .floating-img, .farm-media img, .cot-media img { width: min(100%, 560px); margin: 0 auto; }

body .menu-media { padding-left: 0; justify-content: center; }

body .section-head { margin-bottom: 34px; }

/* products */

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

body #shop .products-grid { gap: 14px; }

.product-img-wrap { height: 190px; margin-bottom: 14px; }

/* stay / rooms */

/* our story */

/* visit */

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

.visit-map { min-height: 380px; }

/* footer */
}

/* ---------- ≤767 : phones ---------- */

@media (max-width: 767px) {
:root { --nav-h: 62px; --sec: 52px; }

/* ----- HERO (9:16 video is loaded for this width) -----
       Layout follows the 9:16 frame: headline sits in the open sky,
       the cafe front stays clear in the middle, buttons rest on the pavement. */

.hero { min-height: 540px; height: 100svh; }

.hero video { object-position: center center; }

.hero-veil {
        position: absolute; inset: 0; z-index: 2; pointer-events: none;
        background:
            linear-gradient(to bottom, rgba(10, 18, 8, .58) 0%, rgba(10, 18, 8, .34) 24%, rgba(10, 18, 8, 0) 46%),
            linear-gradient(to top, rgba(10, 18, 8, .6) 0%, rgba(10, 18, 8, .22) 16%, rgba(10, 18, 8, 0) 32%);
    }

.hero-copy { justify-content: flex-start; padding: calc(var(--nav-h) + 16px) 22px calc(104px + env(safe-area-inset-bottom)); }

.hero-eyebrow { font-size: .62rem; letter-spacing: .15em; padding: 7px 14px; margin-bottom: 14px; gap: 8px; }

body .hero-title { font-size: clamp(2.1rem, 9.6vw, 3rem); line-height: 1.05; }

.hero-tag { font-size: .95rem; line-height: 1.55; margin-top: 12px; max-width: 30ch; }

.hero-buttons { margin-top: auto; width: 100%; max-width: 360px; flex-direction: row; flex-wrap: nowrap; gap: 10px; }

.hero-buttons .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 13px 10px; font-size: .88rem; gap: 6px; white-space: nowrap; }

.hero-scroll { left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); }

.hero-scroll .mouse { width: 22px; height: 34px; }

/* ----- info strip : 2 x 2 ----- */

.info-strip-inner { grid-template-columns: 1fr 1fr; gap: 0; padding: 8px var(--pad); }

.info-item { flex-direction: column; text-align: center; gap: 6px; padding: 16px 6px; font-size: .84rem; border-right: 0; }

.info-item:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .16); }

.info-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .16); }

.info-item svg { width: 22px; height: 22px; }

.info-item span { font-size: .73rem; }

/* ----- type & buttons ----- */

body .headline { font-size: clamp(1.8rem, 8vw, 2.4rem); }

body .headline--xl { font-size: clamp(2.3rem, 11vw, 3rem); }

body .lede { font-size: 1rem; line-height: 1.75; }

body .btn { padding: 13px 24px; font-size: .95rem; }

.section-head { margin-top: 10px; }

.stat-num { font-size: 1.9rem; }

/* ----- cafe gallery (3D stack scaled down) ----- */

body .cards-wrapper { min-height: 330px; overflow: hidden; }

.cards-stack { height: 320px; perspective: 1000px; }

.photo-card { width: 170px; padding: 8px 8px 11px; border-radius: 16px; }

.photo-card img { height: 215px; border-radius: 11px; }

.photo-card.pos-2 { transform: translateX(0) translateZ(30px) scale(1.1); }

.photo-card.pos-1 { transform: translateX(-98px) translateZ(-30px) rotateY(28deg) scale(.88); }

.photo-card.pos-3 { transform: translateX(98px) translateZ(-30px) rotateY(-28deg) scale(.88); }

.photo-card.pos-0 { transform: translateX(158px) translateZ(-90px) rotateY(40deg) scale(.72); }

.photo-card.pos-4 { transform: translateX(-158px) translateZ(-90px) rotateY(-40deg) scale(.72); }

.photo-card.pos-2:hover, .photo-card.pos-2:focus-visible { transform: translateX(0) translateZ(30px) scale(1.1); }

.cards-wrapper .nav-arrow { position: absolute; bottom: 4px; width: 42px; height: 42px; font-size: 1.4rem; }

#prevCard { left: calc(50% - 54px); }

#nextCard { right: calc(50% - 54px); }

.cards-stack { margin-bottom: 40px; }

.gallery-head { align-items: center; }

.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

.grid-card { padding: 7px; border-radius: 16px; }

.grid-card img { height: 135px; border-radius: 11px; }

/* lightbox */

.lightbox img { max-width: 94vw; max-height: 68vh; }

.lightbox-close { top: 14px; right: 14px; width: 42px; height: 42px; }

.lightbox-prev, .lightbox-next { top: auto; bottom: 18px; transform: none; width: 44px; height: 44px; }

.lightbox-prev { left: 18px; }

.lightbox-next { right: 18px; }

.lightbox-counter { bottom: 30px; }

/* ----- menu ----- */

.menu-tabs {
        flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 8px;
        margin: 0 calc(var(--pad) * -1) 22px; padding: 4px var(--pad) 10px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }

.menu-tabs::-webkit-scrollbar { display: none; }

.menu-tab { flex: none; white-space: nowrap; padding: 9px 18px; font-size: .88rem; }

.menu-list { columns: 1; }

.menu-list li { padding: 12px 0; }

.menu-item-name { white-space: normal; }

.menu-dots { min-width: 14px; }

.modal { padding: 12px; }

.modal-panel { max-width: 100%; max-height: 90svh; }

.modal-close { top: 10px; right: 10px; }

/* ----- farm ----- */

.little-farmer-logo { width: min(100%, 300px); }

#farm::after { height: 60px; bottom: -60px; }

#cafe::after { height: 50px; bottom: -50px; }

/* Reset Odd/Featured Product Cards (e.g. Avocado) so every card is a uniform single grid cell */
.product-card,
.products-grid > *,
.product-card.featured,
.product-card:last-child,
.products-grid.is-expanded .product-card:last-child:nth-child(odd),
body .products-grid.is-expanded .product-card:last-child:nth-child(odd) {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
}

.product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: flex-start !important;
    padding-bottom: 14px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
}

/* Fixed height for image to keep all photos uniform */
.product-card .product-img-wrap,
.product-card img.product-img {
    height: 160px !important;
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 14px 14px 0 0 !important;
    margin-bottom: 8px !important;
}

.product-card .product-img-wrap img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Content area flex wrapper */
.product-card .product-info,
.product-card .card-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 10px 8px 12px !important;
}

/* Uniform text heights so 1-line and 2-line titles don't push buttons unevenly */
.product-card .product-title,
.product-card h3,
.product-card h4 {
    min-height: 2.2em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    font-size: 1.02rem !important;
    line-height: 1.25 !important;
}

.product-card .product-weight {
    margin-left: 12px !important;
    margin-right: 12px !important;
    font-size: 0.72rem !important;
}

.product-card .product-desc,
.product-card p {
    min-height: 1.8em !important;
    margin-bottom: 10px !important;
}

.product-card [hidden],
.product-card .product-price[hidden] {
    display: none !important;
}

/* Push button to the very bottom baseline of the card */
.product-card .btn-order,
.product-card .select-order-btn,
.product-card a[href*="order"],
.product-card button,
.product-card .cta-pill-btn {
    margin-top: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    width: calc(100% - 16px) !important;
}

  /* Ensure the products container adjusts dynamically to visible children */
  #farm-shop .products-grid,
  #shop .products-grid,
  .products-grid {
    min-height: auto !important;
    height: auto !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
  }

  /* Collapsed products must have zero layout footprint */
  .products-grid:not(.is-expanded) .product-card:nth-child(n+9),
  .product-card.is-hidden,
  .product-card[data-collapsed="true"],
  .product-card.hidden-product,
  .product-card.shop-extra-item.collapsed {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Expanded state restores proper flex layout */
  .products-grid.is-expanded .product-card:nth-child(n+9),
  .product-card.is-visible,
  .product-card[data-collapsed="false"],
  .product-card.shop-extra-item:not(.collapsed) {
    display: flex !important;
    height: auto !important;   /* was 100%: it made the extra cards shorter and the button touched the card edge */
  }

  /* Clean spacing between visible grid, toggle button, and ribbon */
  .shop-toggle-wrap,
  #shopToggleBtn,
  #toggleProductsBtn,
  .products-toggle-container {
    margin: 16px auto 20px auto !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
  }

  #farm-shop,
  #shop,
  .farm-shop-section,
  .theme-farm {
    min-height: auto !important;
    padding-bottom: 24px !important;
  }

  .hill-ribbon,
  .resort-ribbon,
  .farm-bottom-art,
  .hill-retreat-divider,
  .hill-retreat-ribbon-img {
    margin-top: 8px !important;
  }

  .hill-retreat-divider {
    padding: 10px 0 !important;
  }

  /* Add tactile tap feedback on mobile */
  .product-card .btn-order:active,
  .product-card .select-order-btn:active,
  .product-card button:active,
  .product-card .cta-pill-btn:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease !important;
  }

  /* Enable button shimmer/flash on touch tap & hover */
  .product-card .btn-order::after,
  .product-card .select-order-btn::after,
  .product-card button::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    ) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transition: transform 0.6s ease-in-out !important;
  }

  .product-card .btn-order:hover::after,
  .product-card .btn-order:active::after,
  .product-card .select-order-btn:hover::after,
  .product-card .select-order-btn:active::after,
  .product-card button:hover::after,
  .product-card button:active::after {
    transform: translateX(200%) !important;
    transition: transform 0.6s ease-in-out !important;
  }

  .product-card .cta-pill-btn::after {
    display: none !important;
  }

/* product popup → bottom sheet */

.pm { align-items: flex-end; padding: 0; }

.pm-panel { width: 100%; max-height: 92svh; border-radius: 26px 26px 0 0; animation: pmSheet .4s cubic-bezier(.2, .9, .3, 1) both; }

.pm-img { height: 190px; }

.pm-body { padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); }

.pm-close { top: 12px; right: 12px; }

.pm-qty button { width: 50px; height: 50px; }

.pm-qty input { height: 50px; font-size: 1.1rem; }

.pm-buy { width: 100%; }

/* ----- stay ----- */

/* Rooms gallery on phones = the SAME grow/fold animation as desktop,
       turned vertical: the tapped panel grows tall, the others fold into slim bars. */

/* ----- our story ----- */

/* ----- reviews ----- */

.followup-image-section { padding-bottom: 40px; }

.rv-board { width: min(100%, 480px); }

/* ----- visit ----- */

.contact-list li { gap: 12px; padding: 15px 0; }

.contact-icon { width: 38px; height: 38px; border-radius: 12px; }

.contact-value { font-size: .95rem; word-break: break-word; }

.hours-row { font-size: .88rem; }

.visit-map { min-height: 320px; border-width: 4px; border-radius: 22px; }

#visit .btn { flex: 1 1 150px; justify-content: center; }

/* ----- footer ----- */

/* floating button */

.to-top { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }
}

@keyframes pmSheet { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- ≤480 : small phones ---------- */

@media (max-width: 480px) {
.hero-tag { font-size: .94rem; }

body .btn { padding: 12px 22px; }

.products-grid .product-card .product-img-wrap { height: 160px !important; }

.photo-card { width: 156px; }

.photo-card img { height: 200px; }

.photo-card.pos-1 { transform: translateX(-90px) translateZ(-30px) rotateY(28deg) scale(.88); }

.photo-card.pos-3 { transform: translateX(90px) translateZ(-30px) rotateY(-28deg) scale(.88); }

  /* Ground contact shadow scaling on small screens */
  .has-ground-shadow::after,
  [class*="farmer-wrap"]::after,
  [class*="item-wrap"]::after {
    bottom: -6px !important;
    height: 18px !important;
    filter: blur(5px) !important;
  }

  .product-card {
    padding-bottom: 14px !important;
  }

  .product-card .btn-order,
  .product-card .select-order-btn,
  .product-card a[href*="order"],
  .product-card button,
  .product-card .cta-pill-btn {
    --btn-height: 36px !important;
    --btn-min-width: 0 !important;
    --icon-size: 26px !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--btn-height) !important;
    min-height: var(--btn-height) !important;
    margin: auto auto 0 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    align-self: center !important;
    overflow: hidden !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background-color 0.4s ease, box-shadow 0.45s ease, transform 0.15s ease !important;
  }

  .product-card button .cta-label,
  .product-card .cta-pill-btn .cta-label {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    z-index: 1 !important;
    transform: translateX(-10px) !important;
    transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .product-card button .cta-icon-wrap,
  .product-card .cta-pill-btn .cta-icon-wrap {
    position: absolute !important;
    top: 50% !important;
    left: calc(100% - var(--icon-size, 26px) - 5px) !important;
    right: auto !important;
    width: var(--icon-size, 26px) !important;
    height: var(--icon-size, 26px) !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    color: #2e4d25 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16) !important;
    z-index: 2 !important;
    transform: translateY(-50%) rotate(0deg) !important;
    transition: left 450ms cubic-bezier(0.22, 1, 0.36, 1), transform 450ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .product-card button .cta-icon-svg,
  .product-card .cta-pill-btn .cta-icon-svg,
  .product-card .btn-order svg,
  .product-card button svg,
  .product-card .cta-pill-btn svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    stroke: #2e4d25 !important;
    fill: none !important;
    flex-shrink: 0 !important;
    transform: rotate(0deg) scale(1) !important;
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .product-card button .cta-shine,
  .product-card .cta-pill-btn .cta-shine {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 80% !important;
    height: 100% !important;
    background: linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.45) 50%,
      rgba(255, 255, 255, 0.7) 70%,
      transparent 100%
    ) !important;
    transform: skewX(-20deg) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    transition: none !important;
  }

  /* Mobile Active & Hover Transitions */
  .product-card button:hover,
  .product-card button:active,
  .product-card button:focus,
  .product-card .cta-pill-btn:hover,
  .product-card .cta-pill-btn:active,
  .product-card .cta-pill-btn:focus,
  .product-card:hover .cta-pill-btn,
  .product-card:active .cta-pill-btn {
    background-color: #233c1c !important;
    box-shadow: 0 6px 16px rgba(35, 60, 28, 0.4) !important;
  }

  /* 1. Mobile Shine Sweep */
  .product-card button:hover .cta-shine,
  .product-card button:active .cta-shine,
  .product-card button:focus .cta-shine,
  .product-card .cta-pill-btn:hover .cta-shine,
  .product-card .cta-pill-btn:active .cta-shine,
  .product-card .cta-pill-btn:focus .cta-shine,
  .product-card:hover .cta-pill-btn .cta-shine,
  .product-card:active .cta-pill-btn .cta-shine {
    left: 140% !important;
    transition: left 0.6s ease-in-out !important;
  }

  /* 2. Mobile Icon Glide from Right to Left edge */
  .product-card button:hover .cta-icon-wrap,
  .product-card button:active .cta-icon-wrap,
  .product-card button:focus .cta-icon-wrap,
  .product-card .cta-pill-btn:hover .cta-icon-wrap,
  .product-card .cta-pill-btn:active .cta-icon-wrap,
  .product-card .cta-pill-btn:focus .cta-icon-wrap,
  .product-card:hover .cta-pill-btn .cta-icon-wrap,
  .product-card:active .cta-pill-btn .cta-icon-wrap {
    left: 5px !important;
    transform: translateY(-50%) rotate(0deg) !important;
  }

  /* 3. Mobile Label Shift to Right */
  .product-card button:hover .cta-label,
  .product-card button:active .cta-label,
  .product-card button:focus .cta-label,
  .product-card .cta-pill-btn:hover .cta-label,
  .product-card .cta-pill-btn:active .cta-label,
  .product-card .cta-pill-btn:focus .cta-label,
  .product-card:hover .cta-pill-btn .cta-label,
  .product-card:active .cta-pill-btn .cta-label {
    transform: translateX(11px) !important;
  }

  /* 4. Mobile Shopping Bag Cart Tilt */
  .product-card button:hover .cta-icon-svg,
  .product-card button:active .cta-icon-svg,
  .product-card button:focus .cta-icon-svg,
  .product-card .cta-pill-btn:hover .cta-icon-svg,
  .product-card .cta-pill-btn:active .cta-icon-svg,
  .product-card .cta-pill-btn:focus .cta-icon-svg,
  .product-card:hover .cta-pill-btn .cta-icon-svg,
  .product-card:active .cta-pill-btn .cta-icon-svg {
    transform: rotate(15deg) scale(1.08) !important;
  }

  /* Tactile Press */
  .product-card .cta-pill-btn:active,
  .product-card button:active {
    transform: scale(0.96) !important;
  }
}

/* ---------- ≤400 : very narrow phones (e.g. Galaxy A55, 360px logical) ---------- */

@media (max-width: 400px) {
  /* Prevent product cards from overflowing the viewport */
  .product-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Tighten product text margins so cards don't overflow at 360px */
  .product-title, .product-weight, .product-desc {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  .product-title { font-size: 0.9rem !important; }
  .product-weight { font-size: 0.66rem !important; }

  /* Compact button styling for 360px width viewports */
  .product-card .btn-order,
  .product-card .select-order-btn,
  .product-card a[href*="order"],
  .product-card button,
  .product-card .cta-pill-btn {
    --icon-size: 24px !important;
    --btn-height: 34px !important;
    padding: 0 6px !important;
  }

  .product-card button .cta-label,
  .product-card .cta-pill-btn .cta-label {
    font-size: 0.72rem !important;
    transform: translateX(-9px) !important;
  }

  .product-card button .cta-icon-wrap,
  .product-card .cta-pill-btn .cta-icon-wrap {
    left: calc(100% - var(--icon-size, 24px) - 4px) !important;
    width: var(--icon-size, 24px) !important;
    height: var(--icon-size, 24px) !important;
  }

  .product-card button .cta-icon-svg,
  .product-card .cta-pill-btn .cta-icon-svg {
    width: 13px !important;
    height: 13px !important;
  }

  .product-card button:hover .cta-icon-wrap,
  .product-card button:active .cta-icon-wrap,
  .product-card button:focus .cta-icon-wrap,
  .product-card .cta-pill-btn:hover .cta-icon-wrap,
  .product-card .cta-pill-btn:active .cta-icon-wrap,
  .product-card .cta-pill-btn:focus .cta-icon-wrap,
  .product-card:hover .cta-pill-btn .cta-icon-wrap,
  .product-card:active .cta-pill-btn .cta-icon-wrap {
    left: 4px !important;
  }

  .product-card button:hover .cta-label,
  .product-card button:active .cta-label,
  .product-card button:focus .cta-label,
  .product-card .cta-pill-btn:hover .cta-label,
  .product-card .cta-pill-btn:active .cta-label,
  .product-card .cta-pill-btn:focus .cta-label,
  .product-card:hover .cta-pill-btn .cta-label,
  .product-card:active .cta-pill-btn .cta-label {
    transform: translateX(10px) !important;
  }
}

/* very short landscape phones: don't let the hero eat the screen */

@media (max-height: 480px) and (orientation: landscape) {
.hero { height: auto; min-height: 460px; }

.hero-scroll { display: none; }

.hero-copy { padding-bottom: 40px; }
}

/* touch devices: no sticky hover jumps */

@media (hover: none) {
.product-card:hover, .grid-card:hover { transform: none; }

.product-card:hover .product-img-wrap img { transform: none; }
}

/* shorter phones (e.g. 360x740): keep the headline above the cafe roof */

@media (max-width: 767px) and (max-height: 780px) {
.hero-copy { padding-top: calc(var(--nav-h) + 8px); }

.hero-eyebrow { margin-bottom: 10px; }

body .hero-title { font-size: clamp(1.9rem, 8.8vw, 2.5rem); }

.hero-tag { font-size: .86rem; line-height: 1.5; margin-top: 8px; max-width: 34ch; }
}

/* ==========================================================================
   ██  MOBILE v2  (phones ≤767px)  ██
   • floating info card under the hero   • compact e-commerce product grid
   • menu without sideways scrolling      • review "card deck"
   • slim footer
   (Our Story / Art Director section is untouched.)
   ========================================================================== */

.info-item b { font-weight: inherit; }

.info-item .i-short { display: none; }

@media (max-width: 767px) {
/* ---------- HERO: make room for the floating card ---------- */

.hero-copy { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }

.hero-scroll { display: none; }

/* ---------- INFO CARD: floats over the bottom edge of the hero ---------- */

body .info-strip { position: relative; z-index: 7; margin-top: -40px; padding: 0 14px 4px; background: transparent; }

body .info-strip-inner {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
        max-width: 460px; margin: 0 auto; padding: 16px 4px 14px;
        background: #fff; border-radius: 26px;
        box-shadow: 0 16px 36px rgba(58, 36, 24, .2), 0 2px 6px rgba(58, 36, 24, .08);
    }

body .info-strip .info-item {
        flex-direction: column; justify-content: flex-start; align-items: center; gap: 9px; text-align: center;
        padding: 2px 4px; font-size: .72rem; font-weight: 700; line-height: 1.25; color: var(--brn-800, #4a2f1f);
        border-right: 1px dashed rgba(107, 70, 48, .25); border-bottom: 0;
    }

body .info-strip .info-item:last-child { border-right: 0; }

body .info-strip .info-item svg {
        box-sizing: content-box; width: 20px; height: 20px; padding: 12px; border-radius: 50%;
        fill: var(--brn-700, #6b4630); background: var(--brn-100, #f1e4d5);
    }

body .info-strip .info-item .i-full,
    body .info-strip .info-item span { display: none; }

body .info-strip .info-item .i-short { display: block; }


    /* ---------- MOBILE MENU: LAPTOP-STYLE DESIGN ---------- */

    body .menu-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 8px;
        overflow-x: auto !important;
        overflow-y: hidden;
        margin: 0 calc(var(--pad) * -1) 28px !important;
        padding: 5px var(--pad) 12px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        body .menu-tabs::-webkit-scrollbar {
            display: none;
        }

    body .menu-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 9px 17px !important;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: .84rem !important;
        line-height: 1.2;
        border-radius: 999px !important;
    }

    /* Two-column menu like laptop */

    body .menu-list {
        display: block !important;
        columns: 2 !important;
        column-count: 2 !important;
        column-gap: 20px !important;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

        /* Menu item row */

        body .menu-list li {
            display: flex !important;
            flex-direction: row !important;
            align-items: baseline !important;
            gap: 6px !important;
            width: 100%;
            box-sizing: border-box;
            padding: 10px 0 !important;
            background: transparent !important;
            border: none !important;
            border-bottom: 1px dashed rgba(107, 70, 48, .25) !important;
            border-radius: 0 !important;
            break-inside: avoid;
        }

    /* Item name */

    body .menu-item-name {
        flex: 0 1 auto;
        white-space: normal !important;
        font-size: .82rem !important;
        line-height: 1.4;
        color: var(--brn-800, #4a2f1f) !important;
    }

    /* Dotted connecting line */

    body .menu-list .menu-dots {
        display: block !important;
        flex: 1 1 auto;
        min-width: 5px;
        border-bottom: 1px dotted rgba(107, 70, 48, .4) !important;
        transform: translateY(-4px);
    }

    /* Price */

    body .menu-price {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: .8rem !important;
        font-weight: 700;
        color: var(--brn-500, #a8754f) !important;
    }

    /* Small mobile screens */

    @media (max-width: 380px) {
        body .menu-list {
            column-gap: 12px !important;
        }

            body .menu-list li {
                gap: 4px !important;
            }

        body .menu-item-name {
            font-size: .70rem !important;
        }

        body .menu-price {
            font-size: .72rem !important;
        }

        body .menu-tab {
            padding: 8px 14px !important;
            font-size: .78rem !important;
        }
    }


/* ---------- PRODUCTS: compact, shop-style tiles ---------- */

body #shop .products-grid { gap: 10px; }

body .product-card { border-radius: 18px; padding-bottom: 14px !important; box-sizing: border-box; width: 100%; overflow: visible; }

body .product-img-wrap { height: 160px !important; margin-bottom: 8px; border-radius: 14px 14px 0 0 !important; }

body .product-title { font-size: .95rem; line-height: 1.2; margin: 0 10px; }

body .product-weight { font-size: .68rem; margin: 3px 10px 8px; }

body .product-desc { display: none; }

body .products-grid.is-expanded .product-card:last-child:nth-child(odd) { width: 100% !important; grid-column: auto !important; }

/* ---------- FOOTER: slim ---------- */
}

/* ==========================================================================
   HEADINGS → CoffeeTown   (only one weight exists, so never fake-bold it)
   ========================================================================== */

h1, h2, h3, h4,
body .headline, body .hero-title, body .stat-num,
.product-title, .pm-title, .ad-subtitle, .rooms-panel__title, .footer h4 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: .01em;
}

body .headline, body .hero-title { letter-spacing: .01em; }

/* ==========================================================================
   SECTION BLEND FIX
   The fade between sections used to sit ON TOP of the next section's first
   lines ("Farm shop", "What we serve") and washed them out. It now lives
   behind the content.
   ========================================================================== */

#cafe::after, #farm::after { display: none !important; }

#menu, #shop { position: relative; z-index: 3; border-top: none; }

#menu::before, #shop::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none;
    height: 70px;
    background: linear-gradient(to bottom, var(--cream) 0%, #F3F0E6 35%, var(--cream-deep) 100%);
}

#shop::before { height: 100px; background: linear-gradient(to bottom, var(--cream) 0%, rgba(247, 244, 235, .8) 30%, rgba(239, 234, 219, .8) 70%, var(--cream-deep) 100%); }

#menu > .shell, #shop > .shell { position: relative; z-index: 1; }

@media (max-width: 767px) {
#menu::before { height: 50px; }

#shop::before { height: 60px; }
}

/* ==========================================================================
   PRODUCT POPUP — size chips, name / note, summary
   ========================================================================== */

.pm-extra { display: grid; gap: 8px; margin-top: 18px; }

.pm-extra input {
    width: 100%; padding: 11px 14px; border-radius: 12px; border: 1.5px solid rgba(56, 79, 49, .2);
    background: #fff; font: 500 .9rem var(--font-body); color: var(--green-800);
}

.pm-extra input:focus { outline: none; border-color: var(--green-600); }

.pm-summary { margin-top: 16px; font-weight: 700; font-size: .95rem; color: var(--green-800); }

.pm-buy { margin-top: 12px; }

@media (max-width: 767px) {
.pm-extra input { font-size: 16px; }

/* stops iOS zoom-on-focus */
}

/* ==========================================================================
   POLICIES POPUP  +  footer credit
   ========================================================================== */

.lg {
    position: fixed; inset: 0; z-index: 3300; display: none; align-items: center; justify-content: center;
    padding: clamp(12px, 3vw, 40px); background: rgba(18, 28, 15, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.lg.is-open { display: flex; animation: pmFade .25s ease both; }

.lg-panel {
    width: min(820px, 100%); max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; overflow: hidden;
    background: var(--cream); border-radius: 26px; box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
    animation: pmPop .4s cubic-bezier(.2, .9, .3, 1.15) both;
}

.lg-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 8px; }

.lg-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--green-800); }

.lg-close {
    width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
    background: #fff; color: var(--green-800); font-size: 1.6rem; line-height: 1; box-shadow: var(--shadow-sm);
    transition: transform .2s ease;
}

.lg-close:hover { transform: rotate(90deg); }

.lg-tabs { display: flex; gap: 8px; padding: 6px 24px 14px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }

.lg-tabs::-webkit-scrollbar { display: none; }

.lg-tab {
    flex: none; padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    font: 600 .86rem var(--font-body); border: 1.5px solid rgba(56, 79, 49, .25); background: #fff; color: var(--green-700);
    transition: background .2s ease, color .2s ease;
}

.lg-tab.is-on { background: var(--green-700); border-color: var(--green-700); color: #fff; }

.lg-body { overflow-y: auto; padding: 22px 26px 30px; outline: none; -webkit-overflow-scrolling: touch; }

.lg-doc[hidden] { display: none; }

.lg-doc p, .lg-doc li { font-size: .95rem; line-height: 1.75; color: var(--farm-ink, #4B5E45); }

.lg-doc p { margin-bottom: 12px; }

.lg-doc h4 { margin: 24px 0 8px; font-size: 1.12rem; color: var(--green-800); }

.lg-doc ul { margin: 0 0 12px 1.1em; list-style: disc; }

.lg-doc li { margin-bottom: 6px; }

.lg-doc a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }

.lg-date { font-size: .8rem !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green-600) !important; }

@media (max-width: 767px) {
.lg { align-items: flex-end; padding: 0; }

.lg-panel { width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; animation: pmSheet .4s cubic-bezier(.2, .9, .3, 1) both; }

.lg-head { padding: 18px 18px 6px; }

.lg-tabs { padding: 6px 18px 12px; }

.lg-body { padding: 18px 18px calc(28px + env(safe-area-inset-bottom)); }
}

/* decorative leaves/minions in Our Story stick out past the screen edge → no sideways scroll */

/* ==========================================================================
   ██  ROUND 5  ██
   legal tabs fix · logo on white bar · hero buttons · hero skeleton ·
   image skeletons · popup size rows · reviews "spotlight + bubbles"
   ========================================================================== */

/* ---------- policies popup: tabs were being squashed (text spilled out of the pill) ---------- */

.lg-head, .lg-tabs { flex: none; }

.lg-body { flex: 1 1 auto; min-height: 0; }

.lg-tab { line-height: 1.2; min-height: 40px; display: inline-flex; align-items: center; }

/* ---------- logo: white over the hero → black once the bar turns white ---------- */

.nav .brand-logo { transition: filter .3s ease, height .3s ease; }

.nav.is-stuck .brand-logo { filter: brightness(0); }

/* ---------- hero buttons: brown (menu) + blue (rooms) ---------- */

.hero-cta {
    position: relative; display: inline-flex; align-items: center; gap: 12px;
    padding: 8px 10px 8px 8px; border-radius: 999px; overflow: hidden; isolation: isolate;
    color: #fff !important; font-weight: 700; font-size: 1rem; letter-spacing: .01em; text-decoration: none;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .3s ease, box-shadow .3s ease;
    -webkit-tap-highlight-color: transparent;
}

.hero-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cta-grad); }

.hero-cta::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-18deg); transition: left .75s ease;
}

.hero-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .4); }

.hero-cta:hover::after { left: 130%; }

.hero-cta:active { transform: translateY(0) scale(.98); }

.hero-cta-ico {
    flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

.hero-cta-ico svg { width: 22px; height: 22px; fill: currentColor; }

.hero-cta:hover .hero-cta-ico svg { animation: ctaWiggle .6s ease; }

.hero-cta-txt { padding: 0 2px; white-space: nowrap; }

.hero-cta-arrow {
    flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .94); color: var(--cta-accent); font-size: 1.05rem; font-weight: 800;
    transition: transform .3s ease;
}

.hero-cta:hover .hero-cta-arrow { transform: translateX(4px); }

.hero-cta--menu { --cta-grad: linear-gradient(135deg, #B07344 0%, #7E4B2B 55%, #5A3520 100%); --cta-accent: #7E4B2B; }

.hero-cta--stay { --cta-grad: linear-gradient(135deg, #58A0B5 0%, #2F6A80 55%, #1F4A5E 100%); --cta-accent: #2F6A80; }

@keyframes ctaWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } }

/* ---------- hero: skeleton while the video loads (no more sudden photo) ---------- */

.hero { background-color: #0d130b; }

.hero video { opacity: 0; transition: opacity .9s ease; }

.hero.is-ready video, .hero.is-fallback video { opacity: 1; }

.hero.is-fallback { background: #0d130b url('../images/cafe/cafe-01.webp') center / cover no-repeat; }

.hero-copy { transition: opacity .8s ease .15s, transform .8s ease .15s; }

.hero.is-loading .hero-copy { opacity: 0; transform: translateY(14px); }

.hero.is-loading .hero-scroll { opacity: 0; }

.hero-skel {
    position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--nav-h) var(--pad) 120px; pointer-events: none;
    background: radial-gradient(ellipse at 28% 18%, #20381c 0%, #11200f 55%, #0a1008 100%);
    transition: opacity .8s ease, visibility .8s ease;
}

.hero:not(.is-loading) .hero-skel { opacity: 0; visibility: hidden; }

.sk {
    display: block; border-radius: 14px;
    background: linear-gradient(100deg, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .17) 50%, rgba(255, 255, 255, .06) 70%) 0 0 / 200% 100%;
    animation: fcShimmer 1.5s linear infinite;
}

.sk-pill { width: 230px; height: 36px; border-radius: 999px; margin-bottom: 24px; }

.sk-title { width: min(62vw, 720px); height: clamp(46px, 6.4vw, 88px); margin-bottom: 16px; }

.sk-title.s2 { width: min(46vw, 540px); }

.sk-line { width: min(40vw, 440px); height: 16px; margin-top: 12px; border-radius: 8px; }

.sk-line.s2 { width: min(30vw, 330px); }

.sk-line.s3 { display: none; }

.sk-btns { display: flex; gap: 14px; margin-top: 38px; }

.sk-btn { width: 200px; height: 58px; border-radius: 999px; }

@keyframes fcShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- photos: shimmer while loading, soft fade-in when ready ---------- */

img[data-skel] {
    min-height: 56px;
    background: linear-gradient(100deg, rgba(120, 140, 110, .13) 30%, rgba(255, 255, 255, .6) 50%, rgba(120, 140, 110, .13) 70%) 0 0 / 200% 100% #e9e5d7;
    animation: fcShimmer 1.4s linear infinite;
}

img.img-in { animation: fcImgIn .6s ease both; }

@keyframes fcImgIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- product popup: one quantity row per size ---------- */

.pm-lines { margin-top: 10px; display: grid; gap: 8px; }

.pm-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.pm-line.is-multi {
    padding: 8px 8px 8px 16px; border-radius: 16px; border: 1.5px solid rgba(56, 79, 49, .16); background: rgba(255, 255, 255, .6);
    transition: border-color .2s ease, background .2s ease;
}

.pm-line.is-multi.is-on { border-color: var(--green-600); background: #fff; }

.pm-line-name { font-weight: 700; font-size: 1rem; color: var(--green-800); }

.pm-line .pm-qty { margin-top: 0; align-self: auto; }

.pm-line:not(.is-multi) { justify-content: flex-start; }

.pm-line:not(.is-multi) .pm-line-name { display: none; }

.pm-buy.is-disabled { background: #9aa596; box-shadow: none; cursor: not-allowed; transform: none; }

.pm-buy.is-disabled:hover { background: #9aa596; transform: none; box-shadow: none; }

.pm-summary { min-height: 1.4em; }

/* ==========================================================================
   REVIEWS — colourful blobs + "spotlight & bubbles"
   ========================================================================== */

.followup-image-section { position: relative; overflow: hidden; isolation: isolate; padding-top: 20px; padding-bottom: 70px; background: transparent; }

.rv-head { position: relative; display: flex; justify-content: center; }

.rv-board { display: block; width: min(100%, 620px); height: auto; }

/* background blobs: the same colours as the review cards, drifting very slowly */

.rvb-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.rvb-bg span {
    position: absolute; background: var(--c); opacity: var(--o, .3); filter: blur(var(--bl, 0px));
    width: var(--w); aspect-ratio: 1; border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    animation: rvbMorph var(--t, 24s) ease-in-out infinite alternate;
}

.rvb-bg .b1 { --c: #8D6FAE; --w: clamp(220px, 36vw, 520px); --o: .34; --bl: 34px; --t: 26s; top: -90px; left: -110px; }

.rvb-bg .b2 { --c: #6F9A68; --w: clamp(180px, 30vw, 430px); --o: .36; --bl: 30px; --t: 30s; top: 26%; right: -120px; }

.rvb-bg .b3 { --c: #9A7462; --w: clamp(140px, 22vw, 300px); --o: .30; --bl: 24px; --t: 22s; bottom: -50px; left: 7%; }

.rvb-bg .b4 { --c: #5C7FB6; --w: clamp(200px, 32vw, 470px); --o: .32; --bl: 36px; --t: 28s; bottom: -130px; right: 10%; }

.rvb-bg .b5 { --c: #5F9D92; --w: clamp(90px, 13vw, 190px); --o: .5; --t: 18s; top: 14%; left: 36%; }

.rvb-bg .b6 { --c: #A85C76; --w: clamp(70px, 10vw, 150px); --o: .45; --t: 20s; top: 58%; left: 3%; }

.rvb-bg .b7 { --c: #A39A5F; --w: clamp(60px, 9vw, 130px); --o: .5; --t: 16s; top: 9%; right: 9%; }

.rvb-bg .b8 { --c: #7F9AAD; --w: clamp(130px, 19vw, 260px); --o: .3; --bl: 22px; --t: 25s; bottom: 16%; left: 42%; }

@keyframes rvbMorph {
    0%   { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; transform: translate(0, 0) rotate(0deg); }
    50%  { border-radius: 40% 60% 36% 64% / 58% 38% 62% 42%; transform: translate(26px, -20px) rotate(14deg); }
    100% { border-radius: 55% 45% 62% 38% / 44% 60% 40% 56%; transform: translate(-20px, 24px) rotate(-10deg); }
}

.rvb { position: relative; width: min(100%, 1240px); margin: 10px auto 0; padding: 0 clamp(12px, 3vw, 32px); outline: none; }

.rvb-stage { position: relative; width: 100%; aspect-ratio: 16 / 9.6; }

.rvb-spot { position: absolute; left: 50%; top: 50%; width: 24%; transform: translate(-50%, -50%); z-index: 3; }

.rvb-spot::before {
    content: ""; position: absolute; left: 50%; top: 46%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1;
    background: radial-gradient(circle, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, .35) 45%, transparent 70%); pointer-events: none;
}

.rvb-card { touch-action: pan-y; animation: rvbBob 6s ease-in-out infinite alternate; cursor: grab; }

.rvb-card img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 18px 22px rgba(58, 36, 24, .3)); }

.rvb-card img.is-pop { animation: rvbPop .6s cubic-bezier(.3, 1.35, .5, 1) both; }

@keyframes rvbPop { from { opacity: 0; transform: translateX(var(--from, 0px)) scale(.86) rotate(-3deg); } to { opacity: 1; transform: none; } }

@keyframes rvbBob { from { transform: translateY(-4px); } to { transform: translateY(6px); } }

.rvb-ctrl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 14px; display: flex; align-items: center; gap: 12px; white-space: nowrap; }

.rvb-btn {
    width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; padding: 0 0 3px; font-size: 1.5rem; line-height: 1;
    background: #fff; color: #5b3a26; box-shadow: 0 8px 18px rgba(58, 36, 24, .22); transition: transform .2s ease, background .2s ease, color .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.rvb-btn:hover { background: #5b3a26; color: #fff; transform: scale(1.08); }

.rvb-btn:active { transform: scale(.94); }

.rvb-count { font-size: .9rem; color: #5b3a26; letter-spacing: .06em; }

.rvb-count b { font-size: 1.05rem; }

.rvb-ring { list-style: none; margin: 0; padding: 0; }

.rvb-ring li { position: absolute; left: var(--x); top: var(--y); width: 11%; transform: translate(-50%, -50%) rotate(var(--rot)); z-index: 2; }

.rvb-dot {
    display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative;
    -webkit-tap-highlight-color: transparent;
    animation: rvbFloat var(--fd, 5s) ease-in-out infinite alternate;
}

.rvb-dot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(58, 36, 24, .25)) saturate(.88); opacity: .92; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), filter .3s ease, opacity .3s ease; }

.rvb-dot:hover img { transform: scale(1.18); opacity: 1; filter: drop-shadow(0 14px 16px rgba(58, 36, 24, .35)) saturate(1.05); }

.rvb-dot[aria-current="true"] img { transform: scale(1.2); opacity: 1; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 8px rgba(255, 255, 255, .95)) drop-shadow(0 12px 14px rgba(58, 36, 24, .35)); }

.rvb-dot:focus-visible { outline: 3px solid #5b3a26; outline-offset: 4px; border-radius: 18px; }

@keyframes rvbFloat { from { transform: translateY(-6px); } to { transform: translateY(7px); } }

.rvb:not(.is-in) .rvb-dot { opacity: 0; scale: .3; }

.rvb.is-in .rvb-dot { animation: rvbDotIn .65s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i) * 70ms) both, rvbFloat var(--fd, 5s) ease-in-out calc(var(--i) * 70ms + .65s) infinite alternate; }

@keyframes rvbDotIn { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }

.rvb-hint { text-align: center; margin: 64px 0 0; font-size: .85rem; letter-spacing: .08em; color: rgba(91, 58, 38, .75); transition: opacity .4s ease; }

.rvb-hint.is-off { opacity: 0; }

/* ----- phones & tablets: big card on top, 10 bubbles in a tidy grid below ----- */

@media (max-width: 900px) {
.rvb { padding: 0 14px; }

.rvb-stage { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; }

.rvb-spot { position: relative; left: auto; top: auto; transform: none; width: min(78vw, 310px); }

.rvb-ctrl { position: static; transform: none; justify-content: center; margin-top: 16px; }

.rvb-ring {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 10px;
        width: min(100%, 390px); margin-top: 26px; padding: 4px 6px 0;
    }

.rvb-ring li { position: static; width: auto; transform: rotate(var(--rot)); }

.rvb-dot { animation-duration: calc(var(--fd, 5s) * .8); }

.rvb-hint { margin-top: 20px; }

.rvb-bg .b1 { top: -60px; left: -80px; }
}

@media (prefers-reduced-motion: reduce) {
.rvb-bg span, .rvb-card, .rvb-dot, .sk, img[data-skel] { animation: none !important; }

.rvb:not(.is-in) .rvb-dot { opacity: 1; scale: 1; }
}

/* ---------- phones: hero buttons + skeleton layout ---------- */

@media (max-width: 767px) {
.hero-buttons .hero-cta { flex: 1 1 0; min-width: 0; justify-content: flex-start; gap: 8px; padding: 6px 12px 6px 6px; font-size: .84rem; }

.hero-cta-ico { width: 34px; height: 34px; }

.hero-cta-ico svg { width: 18px; height: 18px; }

.hero-cta-arrow { display: none; }

.hero-cta-txt { padding: 0; }

.hero-skel { justify-content: flex-start; align-items: center; padding: calc(var(--nav-h) + 16px) 22px calc(124px + env(safe-area-inset-bottom)); }

.sk-pill { width: 205px; height: 32px; margin-bottom: 16px; }

.sk-title { width: 78%; height: 38px; margin-bottom: 12px; }

.sk-title.s2 { width: 62%; }

.sk-line { width: 76%; height: 14px; margin-top: 10px; }

.sk-line.s2 { width: 70%; }

.sk-line.s3 { display: block; width: 52%; }

.sk-btns { margin-top: auto; width: 100%; max-width: 360px; gap: 10px; }

.sk-btn { flex: 1; width: auto; height: 46px; }
}

@media (max-width: 380px) {
.hero-buttons .hero-cta { font-size: .78rem; padding-right: 8px; }
}

/* desktop: ‹ › sit beside the big card (never collide with the bubbles), counter under it */

@media (min-width: 901px) {
.rvb-ctrl { display: contents; }

.rvb-btn { position: absolute; top: 50%; margin-top: -21px; }

#rvbPrev { right: calc(100% + 18px); }

#rvbNext { left: calc(100% + 18px); }

.rvb-count { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 14px; white-space: nowrap; }
}

/* ==========================================================================
   TINY COT · STORY · FOOTER  — taken from the friend's files
   (everything else in this stylesheet is ours)
   ========================================================================== */

.stay-section {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    /* Gentle blend — avoids the old banded multi-stop gradient */
    background: linear-gradient(180deg, var(--cream) 0%, var(--stay-050) 25%, var(--stay-050) 75%, var(--cream) 100%) !important;
}

.stay-hero-split {
    min-height: min(650px, 75vh);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(32px, 4vw, 64px);
    margin-bottom: 0 !important;
}

.cot-copy {
    flex: 1.1;
    max-width: 580px;
}

.cot-media {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cot-media img {
    position: relative;
    z-index: 1;
    max-height: min(440px, 52vh);
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(45, 28, 16, 0.42));
    animation: float 5.5s ease-in-out infinite;
}

@media (max-width: 900px) {
.stay-hero-split {
        min-height: auto;
        flex-direction: column-reverse;
        text-align: center;
        gap: 32px;
    }

.cot-copy {
        max-width: 100%;
    }
}

#rooms,
.rooms-showcase {
    position: relative;
    z-index: 2;
    padding-top: clamp(24px, 4vh, 48px) !important;
    padding-bottom: clamp(80px, 10vh, 120px) !important;
    background: var(--cream);
    overflow: visible !important;
}

.footer {
    background: var(--brn-900);
    color: rgba(241, 228, 213, 0.88);
    padding: clamp(64px, 8vw, 92px) var(--pad) 28px;
    position: relative;
    z-index: 10;
}

.footer-grid {
    max-width: var(--shell);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.45fr 1.1fr 0.9fr;
    gap: clamp(32px, 5vw, 64px);
    padding-bottom: 48px;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    margin-bottom: 8px;
}

.footer-brand-logo {
    display: block;
    height: 56px !important; /* Scaled up clearly */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

.footer-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.footer-brand-name {
    font-family: 'CoffeeTown', cursive, sans-serif !important;
    font-size: 1.7rem !important;
    font-weight: 600;
    color: #FFF2DF !important;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.footer-brand-sub {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #D8AA78;
    font-weight: 700;
}

.footer-about {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(241, 228, 213, 0.84);
    margin-top: 16px;
    max-width: 44ch;
}

.footer-social-wrap {
    margin-top: 24px;
}

.footer-social-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #D8AA78;
    margin-bottom: 12px;
}

.footer-heading {
    font-family: 'CoffeeTown', cursive, sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FFF2DF !important;
    margin-bottom: 22px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(241, 228, 213, 0.85);
}

.footer-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-nav-list a {
    font-size: 1.02rem;
    font-weight: 500;
    color: rgba(241, 228, 213, 0.85);
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-nav-list a:hover {
    color: #F2B676 !important;
    transform: translateX(4px);
}

.footer-bottom-wrap {
    max-width: var(--shell);
    margin: 0 auto;
    border-top: 1px solid rgba(241, 228, 213, 0.16);
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.94rem;
    color: rgba(241, 228, 213, 0.75);
    text-align: center;
    flex-wrap: wrap;
}

.footer-credit strong {
    color: #FFF2DF;
    font-weight: 700;
    letter-spacing: 0.04em;
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

.footer-credit-sep {
    color: rgba(241, 228, 213, 0.4);
}

.footer-credit-phone {
    color: #F2B676;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: color 0.2s ease;
}

.footer-credit-phone:hover {
    color: #FFFFFF;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.86rem;
    color: rgba(241, 228, 213, 0.65);
}

.footer-bottom nav {
    display: flex;
    gap: 22px;
}

.footer-bottom a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bottom a:hover {
    color: #F2B676;
}

@media (max-width: 900px) {
.footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

.footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

#art-director,
.ad-section {
    --ad-curve-h: clamp(42px, 6vw, 90px);
    position: relative;
    /* Lock only horizontal spillage; NEVER clip vertically so heads poke over freely */
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding-top: calc(var(--ad-curve-h) + 24px) !important;
    padding-bottom: 140px !important;
    background: #0d130b;
    max-width: 100vw;
}

.ad-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    z-index: 1; /* Stays underneath the z-index:6 cream curve */
    pointer-events: none;
}

.ad-section::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -2px !important;
    left: -2% !important;
    width: 104% !important;
    height: var(--ad-curve-h) !important;
    background: var(--cream) !important;
    border-radius: 0 0 50% 50% / 0 0 100% 100% !important;
    z-index: 6 !important; /* Above bg (1) and content (2-5), below minion perch (30) */
    pointer-events: none !important;
}

.ad-section::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 110px;
    background: var(--cream);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 5;
    pointer-events: none;
}

#art-director,
.ad-section {
    position: relative;
    overflow-x: clip !important;
    overflow-y: visible !important;
}

.ad-minion-perch-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 1340px !important;
    margin: 0 auto !important;
    padding: 0;
    z-index: 25 !important;
    pointer-events: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start;
    box-sizing: border-box;
    overflow: visible !important;
}

.perched-minion {
    position: relative;
    display: flex;
    align-items: flex-end;
}

.perched-minion--right {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    /* Dynamically anchored to the chalkboard curve rim via --ad-curve-h */
    margin-top: calc(var(--ad-curve-h) * 0.42 + 14px) !important;
    margin-right: clamp(14px, 4vw, 42px) !important;
    transform: none !important;
}

.minion-hanging-img {
    width: clamp(78px, 12vw, 155px) !important;
    height: auto !important;
    display: block !important;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55)) !important;
    transform-origin: top center !important;
    animation: gentleMinionSway 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate !important;
    will-change: transform;
}

@keyframes gentleMinionSway {
    0%   { transform: rotate(-3.2deg); }
    100% { transform: rotate(3.2deg); }
}

.ad-shell {
    position: relative;
    z-index: 2;
}

.ad-block {
    max-width: 980px;
    margin: 10px auto 80px;
}

.ad-block:last-child {
    margin-bottom: 0;
}

.ad-eyebrow {
    display: inline-block;
    color: #E2CBB0 !important;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.ad-eyebrow svg { fill: var(--honey-soft); }

.ad-intro {
    max-width: 1040px;
    margin: 0 auto 36px;
    display: flex;
    justify-content: flex-start; /* Aligns left to anchor the story section */
    align-items: center;
}

.ad-board-image {
    display: block;
    width: min(340px, 80vw);
    height: auto;
    margin: 0;
    transform: none !important;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.45));
}

.ad-title {
    color: #F7F4EB;
    margin-top: 28px;
    margin-bottom: 22px;
    font-size: clamp(4rem, 7vw, 8rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 1);
}

.ad-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: repeating-linear-gradient(
        45deg,
        rgba(247, 244, 235, 0.06),
        rgba(247, 244, 235, 0.06) 10px,
        rgba(247, 244, 235, 0.03) 10px,
        rgba(247, 244, 235, 0.03) 20px
    );
    border: 1.5px dashed rgba(247, 244, 235, 0.35);
    border-radius: var(--radius);
    overflow: hidden;
}

.ad-placeholder > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ad-placeholder-label {
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(247, 244, 235, 0.55);
    line-height: 1.5;
}

/* ==========================================================================
   Room Card & Attic Image Alignment & Aspect Ratio
   ========================================================================== */
.room-card img,
.stay-gallery-item img,
img[src*="attic.webp"] {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 16px 16px 0 0 !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.room-card:hover img[src*="attic.webp"] {
  transform: scale(1.04) !important;
}

/* Ensure full-bleed cover inside the accordion slat gallery */
.rooms-panel .rooms-panel__img,
.rooms-panel img[src*="attic.webp"] {
  height: 100% !important;
  border-radius: 0 !important;
}

@media (max-width: 767px) {
  .room-card img,
  .stay-gallery-item img,
  img[src*="attic.webp"] {
    height: 180px !important;
  }

  .rooms-panel .rooms-panel__img,
  .rooms-panel img[src*="attic.webp"] {
    height: 100% !important;
  }
}

.ad-subtitle,
.ad-story .ad-subtitle,
.ad-future .ad-subtitle,
.ad-articles .ad-subtitle {
    font-family: 'CoffeeTown', cursive, sans-serif !important;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    margin-top: 6px;
    margin-bottom: 24px;
    /* Warm Coffee Amber Gradient */
    background: linear-gradient(135deg, #FFF3E3 0%, #F2B676 50%, #C9803A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.85));
}

.ad-journey-list {
    list-style: none;
    margin-bottom: 24px;
}

.ad-journey-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: clamp(0.98rem, 1.15vw, 1.06rem);
    line-height: 1.7;
    color: rgba(247, 244, 235, 0.88);
    margin-bottom: 16px;
}

.ad-journey-list li strong {
    color: #F2B676 !important; /* Luminous warm coffee roast */
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.ad-journey-list li em {
    color: #FFF3E3;
    font-style: italic;
    letter-spacing: 0.01em;
}

.ad-check {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #E8A355 0%, #C9803A 100%);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 3px;
    box-shadow: 0 4px 12px rgba(201, 128, 58, 0.4);
}

.ad-journey-note {
    font-family: 'CoffeeTown', cursive, sans-serif !important;
    font-size: 1.18rem !important;
    line-height: 1.5;
    color: #F6E6D2 !important;
    border-left: 3px solid #C9803A;
    background: linear-gradient(90deg, rgba(201, 128, 58, 0.14) 0%, transparent 100%);
    padding: 12px 18px;
    border-radius: 0 14px 14px 0;
    margin: 22px 0 24px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.ad-stat-number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.ad-stat-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.ad-future {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    gap: 52px;
    align-items: center;
}

.ad-future-media {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.ad-future-copy p {
    font-size: clamp(1rem, 1.2vw, 1.08rem);
    line-height: 1.8;
    color: rgba(247, 244, 235, 0.86);
    margin-bottom: 28px;
}

.ad-article-card {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: center;
    padding: 28px;
    border-radius: var(--radius-lg);
    background: rgba(247, 244, 235, 0.06);
    border: 1px solid rgba(247, 244, 235, 0.14);
}

.ad-article-media {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.ad-article-copy p {
    font-size: clamp(1rem, 1.2vw, 1.08rem);
    line-height: 1.8;
    color: rgba(247, 244, 235, 0.86);
    margin-bottom: 24px;
}

.rooms-filter-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 18px 0 28px;
    z-index: 10;
    position: relative;
}

.rooms-pill-btn {
    padding: 9px 24px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(34, 48, 35, 0.18);
    background: #ffffff;
    color: #2a3a2b;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.rooms-pill-btn:hover {
    border-color: rgba(34, 48, 35, 0.4);
    transform: translateY(-1px);
}

.rooms-pill-btn.is-active {
    background: #243b35; /* Deep cafe forest green */
    color: #ffffff;
    border-color: #243b35;
    box-shadow: 0 4px 14px rgba(36, 59, 53, 0.28);
}

.footer .brand-logo { height: 64px; }

body #stay { padding-top: clamp(32px, 5vh, 56px) !important; padding-bottom: clamp(32px, 5vh, 56px) !important; }

body #rooms { padding-top: clamp(24px, 4vh, 48px) !important; padding-bottom: clamp(80px, 10vh, 120px) !important; }

.theme-stay .headline,
.theme-stay .eyebrow { color: var(--stay-700); }

.theme-stay .eyebrow svg { fill: var(--stay-700); }

.theme-stay .lede { color: #4C6670; }

.theme-stay .btn--solid { background: var(--stay-700); color: #fff; box-shadow: 0 10px 22px rgba(47, 90, 103, .25); }

.theme-stay .btn--solid:hover { background: #234753; }

.rooms-filter-wrapper { display: flex; justify-content: center; margin-bottom: 36px; }

.horizon-slat-container { position: relative; max-width: 1240px; margin: 0 auto; height: clamp(500px, 62vh, 580px) !important; padding: 0; outline: none; overflow: visible; }

.horizon-slat__stage { display: flex; gap: 14px; height: 100%; }

.rooms-panel {
    position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0;
    border-radius: 24px; overflow: hidden; cursor: pointer; background: var(--stay-700);
    transition: flex-grow .75s cubic-bezier(.65, 0, .2, 1), box-shadow .5s ease;
    box-shadow: 0 10px 24px rgba(30, 60, 72, .16);
}

.rooms-panel.is-active { flex-grow: 5.5; box-shadow: 0 24px 48px rgba(30, 60, 72, .28); }

.rooms-panel:focus-visible { outline: 3px solid var(--stay-500); outline-offset: 3px; }

.rooms-panel:not(.rooms-panel--placeholder) { cursor: zoom-in; }

.rooms-panel__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.18); filter: saturate(.7) brightness(.78);
    transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), filter .7s ease;
}

.rooms-panel.is-active .rooms-panel__img { transform: scale(1); filter: none; }

.rooms-panel__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 48, 58, .82) 0%, rgba(18, 48, 58, 0) 55%); }

.rooms-panel__side {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap;
    color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .06em;
    transition: opacity .3s ease;
}

.rooms-panel.is-active .rooms-panel__side { opacity: 0; }

.rooms-panel__content { position: absolute; left: clamp(24px, 3.5vw, 44px); right: clamp(24px, 3.5vw, 44px); bottom: clamp(24px, 3.5vw, 38px); text-align: left; color: #fff; pointer-events: none; }

.rooms-panel__tag { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: #CFE6EC; margin-bottom: 8px; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .5s ease; }

.rooms-panel__title { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .6s ease; }

.rooms-panel.is-active .rooms-panel__tag { opacity: 1; transform: none; transition-delay: .45s; }

.rooms-panel.is-active .rooms-panel__title { opacity: 1; transform: none; transition-delay: .55s; }

.horizon-slat__arrow {
    position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; z-index: 5;
    display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer;
    background: #fff; color: var(--stay-700); box-shadow: 0 8px 20px rgba(30, 60, 72, .22);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.horizon-slat__arrow svg { width: 22px; height: 22px; }

.horizon-slat__arrow:hover { background: var(--stay-700); color: #fff; }

.horizon-slat__arrow--left { left: -24px; }

.horizon-slat__arrow--right { right: -24px; }

.horizon-slat__counter { position: static; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 36px; margin-bottom: 24px; color: var(--stay-700); font-weight: 600; font-variant-numeric: tabular-nums; z-index: 10; }

.horizon-slat__counter-line { display: block; position: relative; width: 140px; height: 3px; border-radius: 3px; background: rgba(47, 90, 103, .18); overflow: hidden; }

.horizon-slat__counter-progress { position: absolute; inset: 0; background: var(--stay-700); transform-origin: left; transition: transform .6s cubic-bezier(.65, 0, .2, 1); }

@media (prefers-reduced-motion: reduce) {
.rooms-panel, .rooms-panel__img, .rooms-panel__tag, .rooms-panel__title { transition: none; }
}

.ad-subtitle,
.ad-story .ad-subtitle,
.ad-future .ad-subtitle,
.ad-articles .ad-subtitle {
    font-family: 'CoffeeTown', cursive, sans-serif !important;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    /* Reverted back to the standard title size used across other sections */
    font-size: clamp(2rem, 3.4vw, 2.75rem) !important;
    margin-top: 6px;
    /* Clean 1.5cm breathing gap before content */
    margin-bottom: 56px !important;
    background: linear-gradient(135deg, #FFF3E3 0%, #F2B676 50%, #C9803A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.85));
}

.ad-story {
    max-width: 1440px !important;
    width: 100%;
    margin: 0 auto !important;
    padding: 0 clamp(24px, 4vw, 64px) 140px !important;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
}

.ad-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(460px, 1fr) !important;
    gap: clamp(32px, 5vw, 72px) !important;
    align-items: flex-start !important;
}

.ad-story-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.ad-eyebrow {
    color: #F2B676 !important;
    font-size: 0.95rem !important;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    margin-bottom: 8px;
    display: inline-block;
}

.ad-journey-list {
    list-style: none;
    margin: 0 0 28px 0;
    padding: 0;
    width: 100%;
}

.ad-journey-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    /* Scaled up from 0.95rem to 1.15rem for prominent reading */
    font-size: clamp(1.08rem, 1.25vw, 1.2rem) !important;
    line-height: 1.7 !important;
    color: rgba(247, 244, 235, 0.94) !important;
    margin-bottom: 20px !important;
}

.ad-journey-list li strong {
    color: #F2B676 !important;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ad-check {
    flex: 0 0 auto;
    width: 28px !important;
    height: 28px !important;
    font-size: 0.9rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #E8A355 0%, #C9803A 100%);
    color: #FFFFFF;
    font-weight: 700;
    margin-top: 3px;
    box-shadow: 0 4px 14px rgba(201, 128, 58, 0.45);
}

.ad-journey-note {
    font-family: 'CoffeeTown', cursive, sans-serif !important;
    font-size: clamp(1.15rem, 1.35vw, 1.35rem) !important;
    line-height: 1.55;
    color: #FFF3E3 !important;
    border-left: 4px solid #C9803A !important;
    background: linear-gradient(90deg, rgba(201, 128, 58, 0.18) 0%, transparent 100%);
    padding: 16px 22px !important;
    border-radius: 0 16px 16px 0;
    margin: 28px 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.ad-story-toggle { margin-top: 26px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }

.ad-story-toggle .arrow { transition: transform .35s ease; display: inline-block; }

.ad-story-toggle[aria-expanded="true"] .arrow { transform: rotate(-90deg); }

.ad-story-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    /* Elevated so the top of hair touches the main headline line */
    margin-top: -210px !important;
    z-index: 10;
}

.ad-story-portrait-wrap {
    position: relative;
    width: 100%;
    max-width: 660px !important; /* Wide box footprint */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 4px !important;
}

.ad-story-portrait-img {
    width: 100%;
    height: auto;
    max-height: 740px !important;
    object-fit: contain;
    object-position: top center;
    display: block;
    background: transparent !important;
    /* Zoom factor expanding shoulders and torso to the drawn margins */
    transform: scale(1.28) !important;
    transform-origin: top center;
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.92));
    /* Clean dissolve right above the stats cards */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 99%);
    transition: transform 0.3s ease;
}

.ad-story-portrait-wrap:hover .ad-story-portrait-img {
    transform: scale(1.30) !important;
}

.ad-story-stats {
    width: 100%;
    max-width: 480px;
    margin-top: 14px !important;
    position: relative;
    z-index: 15;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ad-story-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 14px;
    background: rgba(78, 48, 32, 0.92) !important;
    border: 1.5px solid rgba(201, 128, 58, 0.45) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
}

.ad-story-stats .ad-stat-number {
    font-family: 'CoffeeTown', cursive, sans-serif !important;
    font-size: 1.85rem !important;
    font-weight: 700;
    color: #FFF3E3 !important;
    line-height: 1;
}

.ad-story-stats .ad-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #F2B676 !important;
}

.ad-future,
[class*="creative-workshops"] {
    margin-top: 36px !important;
    padding-top: 10px !important;
    position: relative;
    z-index: 5;
    clear: both;
}

@media (max-width: 960px) {
.ad-story {
        padding: 0 20px 80px !important;
    }

.ad-story-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

.ad-story-media {
        margin-top: 20px !important;
    }

.ad-story-portrait-wrap {
        max-width: 420px !important;
        margin: 0 auto;
    }

.ad-story-portrait-img {
        transform: scale(1) !important;
        max-height: 520px !important;
    }

.ad-future {
        margin-top: 40px !important;
    }
}

@media (max-width: 520px) {
.ad-story-portrait-wrap {
        max-width: 300px !important;
    }

.ad-story-portrait-img {
        max-height: 380px !important;
    }
}

.ad-story-full {
    display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0;
    transition: grid-template-rows .65s cubic-bezier(.65, 0, .2, 1), opacity .5s ease, visibility 0s linear .65s, margin-top .65s ease;
}

.ad-story-full.is-open {
    grid-template-rows: 1fr; visibility: visible; opacity: 1; margin-top: 44px;
    transition: grid-template-rows .65s cubic-bezier(.65, 0, .2, 1), opacity .6s ease .1s, visibility 0s, margin-top .65s ease;
}

.ad-story-full-inner { overflow: hidden; min-height: 0; }

.ad-story-text {
    padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg);
    background: rgba(13, 19, 11, .62); border: 1px solid rgba(247, 244, 235, .16);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

.ad-story-text p { font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.9; color: rgba(247, 244, 235, .9); margin-bottom: 1.15em; }

.ad-story-text p:first-child::first-letter {
    float: left; font-family: var(--font-display); font-size: 3.6rem; line-height: .85;
    padding: 6px 10px 0 0; color: #F2B676;
}

.ad-story-text .ad-story-sign {
    margin: 1.6em 0 0; padding-left: 18px; border-left: 3px solid var(--honey);
    font-family: var(--font-display); font-style: italic; color: var(--honey-soft);
}

@media (prefers-reduced-motion: reduce) {
.ad-story-full, .ad-story-full.is-open { transition: none; }
}

.cot-media-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cot-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 20px 0 24px;
}

.cot-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(228, 241, 245, 0.75); /* Soft, readable sky-tint */
    border: 1px solid rgba(47, 90, 103, 0.22);
    box-shadow: 0 4px 12px rgba(47, 90, 103, 0.05);
}

.cot-feat-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--stay-700);
    flex-shrink: 0;
}

.cot-feat-icon svg {
    width: 20px;
    height: 20px;
}

.cot-feature-item strong {
    display: block;
    font-size: 0.88rem;
    color: var(--stay-700);
    line-height: 1.2;
}

.cot-feature-item span {
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.cot-badges-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cot-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--stay-100);
    color: var(--stay-700);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cot-pill-badge--accent {
    background: #E5F3D8;
    color: #2F6322;
}

.cot-cta-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

@media (max-width: 520px) {
.cot-features-grid { grid-template-columns: 1fr; }

.cot-cta-group { flex-direction: column; align-items: flex-start; }
}

.ad-title-break {
    line-height: 1.15 !important;
    white-space: normal;
    max-width: 620px;
    margin-top: 6px;
    margin-bottom: 26px;
}

#art-director,
.ad-section {
    padding-bottom: 160px !important; /* Generous breathing room above Google Reviews */
}

.ad-article-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.ad-article-copy h4 {
    color: #ffffff;
    font-size: 1.35rem;
    margin-bottom: 8px;
}

.reveal .ad-subtitle,
.reveal .ad-journey-note,
.reveal .ad-article-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal.is-in .ad-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.reveal.is-in .ad-journey-note {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
}

.reveal.is-in .ad-article-card {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
.reveal .ad-subtitle,
.reveal .ad-journey-note,
.reveal .ad-article-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

#stay {
    padding-top: clamp(24px, 3vh, 40px) !important;
}

@media (max-width: 900px) {
.horizon-slat__counter {
        margin-top: 24px !important;
        margin-bottom: 16px !important;
    }
}

/* @media (max-width: 520px) minion overrides removed — now handled by the 767px block with --ad-curve-h */

@media (max-width: 767px) {
    .ad-section {
        --ad-curve-h: 46px !important;
        padding-top: 64px !important;
    }
    .perched-minion--right {
        margin-top: 29px !important;
        margin-right: 14px !important;
    }
    .minion-hanging-img {
        width: 82px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
.minion-hanging-img {
        animation: none;
    }
}

/* ==========================================================================
   FARM — promise chips (same look as the Tiny Cot features, in farm green)
   ========================================================================== */
.farm-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 22px 0 22px; }
.farm-feature-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px;
    background: rgba(232, 242, 222, .8); border: 1px solid rgba(74, 101, 66, .24);
    box-shadow: 0 4px 12px rgba(74, 101, 66, .06);
}
.farm-feat-icon { width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; color: var(--green-700); }
.farm-feat-icon svg { width: 20px; height: 20px; }
.farm-feature-item strong { display: block; font-size: .88rem; color: var(--green-700); line-height: 1.2; }
.farm-feature-item span { font-size: .78rem; color: var(--ink-soft); }
@media (max-width: 520px) { .farm-features-grid { grid-template-columns: 1fr; } }

/* cot text keeps a left alignment on phones */
@media (max-width: 767px) {
    .cot-copy, .cot-copy .lede, .cot-copy .headline { text-align: left; }
    .cot-copy .eyebrow { justify-content: flex-start; }
}

/* our own safety: decorative minions / leaves in the story section must never cause sideways scroll */
#art-director, .ad-section { overflow-x: clip !important; }

/* ==========================================================================
   ██  ROUND 8  ██
   hero tagline + glass pill · footer clean-up · reviews dome · Soil to Sip
   ========================================================================== */

/* ---------- hero: brown-tinted glass pill (readable on the bright sky) ---------- */
.hero-eyebrow {
    color: #FFEBD2;
    background: linear-gradient(135deg, rgba(128, 78, 44, .52), rgba(78, 46, 24, .44));
    border: 1px solid rgba(255, 226, 190, .5);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
    box-shadow: 0 8px 24px rgba(50, 28, 12, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
    text-shadow: 0 1px 6px rgba(40, 20, 8, .6);
}
.hero-eyebrow svg { fill: #FFD7A3; }

/* ---------- hero (desktop): tagline sits a little lower so the board in the video stays visible ---------- */
@media (min-width: 768px) {
    .hero-title { text-wrap: balance; }
    .hero-tag { margin-top: clamp(30px, 5.2vh, 48px); max-width: min(62ch, 90vw); }
}

/* ---------- footer ---------- */
.footer-brand-name { font-weight: 400 !important; }   /* CoffeeTown has one weight — faux-bold looked bad */

/* ---------- reviews: the section itself forms the dome, so the blobs flow into it (no hard cut) ---------- */
.followup-image-section { --dome: 110px; }
.ad-section::after { display: none !important; }
.followup-image-section {
    margin-top: calc(var(--dome) * -1);
    padding-top: calc(var(--dome) + 24px);
    padding-bottom: 110px;
    background: var(--cream);
    border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0;
    z-index: 40;
    scroll-margin-top: calc(var(--nav-h, 76px) - var(--dome) + 10px);
}
/* blobs fade out softly at the bottom instead of being sliced off */
.rvb-bg { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
@media (max-width: 900px) { .followup-image-section { --dome: 80px; } }
@media (max-width: 767px) { .followup-image-section { --dome: 56px; padding-bottom: 80px; } }

/* ==========================================================================
   SOIL TO SIP — CSS/SVG COFFEE JOURNEY
   ========================================================================== */
.sts-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 76px max(5vw,40px) 100px;
    background: #EFEADB;
    color: #EFEADB;
    min-height: 720px
}

.sts-doodle-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../images/sts/coffee-doodles-overlay.webp');
    opacity: 0.10;
    pointer-events: none;
}

.sts-heading {
    text-align: center;
    position: relative;
    z-index: 2;
    margin: 0 auto 34px;
    max-width: 680px
}

.sts-eyebrow {
    font-size: 11px;
    letter-spacing: .24em;
    font-weight: 800;
    color: #7a6547
}

.sts-heading h2 {
    font: clamp(34px,4vw,58px)/1.08 var(--font-display);
    margin: 12px 0;
    color: #2f4328
}

.sts-heading p {
    font-size: 15px;
    color: #68715f
}

.sts-curve {
    position: absolute;
    top: 340px;
    left: calc(50% - 580px);
    width: min(1160px,94%);
    height: 500px;
    z-index: 0;
    overflow: visible;
    pointer-events: none
}

    .sts-curve path {
        fill: none;
        stroke: #9b805b;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-dasharray: 2 13;
        vector-effect: non-scaling-stroke
    }

.sts-stages {
    position: relative;
    z-index: 1;
    max-width: 1160px;
    margin: 0 auto;
    min-height: 540px
}

.sts-stage {
    position: absolute;
    width: 205px;
    text-align: center;
    z-index: 1
}

.sts-stage--1 {
    left: 0;
    top: 12px
}

.sts-stage--2 {
    left: calc(32.76% - 102px);
    top: 150px
}

.sts-stage--3 {
    left: calc(52.76% - 102px);
    top: 12px
}

.sts-stage--4 {
    left: calc(72.76% - 102px);
    top: 190px
}

.sts-stage--5 {
    right: 0;
    top: 260px
}
/* Transparent artwork floats freely above the dotted path. */
.sts-stage-media {
    width: 205px;
    height: 160px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: sts-float 4.2s ease-in-out infinite;
    will-change: transform
}

.sts-stage:nth-child(2) .sts-stage-media {
    animation-delay: -1.1s
}

.sts-stage:nth-child(3) .sts-stage-media {
    animation-delay: -2.2s
}

.sts-stage:nth-child(4) .sts-stage-media {
    animation-delay: -3.1s
}

.sts-stage:nth-child(5) .sts-stage-media {
    animation-delay: -1.7s
}

.sts-stage-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none
}

@keyframes sts-float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

.sts-number {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6b7855;
    color: white;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 8px
}

.sts-stage h3 {
    font: 25px/1.1 var(--font-display);
    margin: 0 0 7px;
    color: #3e4e32;
    text-shadow: 2px 2px 4px gray;
}

.sts-stage p {
    font-size: 16px;
    line-height: 1.6;
    max-width: 190px;
    margin: auto;
    color: #69715f;
    text-shadow: 2px 2px 4px gray;
}
/* ==========================================================================
   SOIL TO SIP — SMALL TOP & BOTTOM WAVE MASK
   ========================================================================== */

/* Common wave settings */
.sts-section::before,
.sts-section::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 28px;
    z-index: 10;
    pointer-events: none;
}

/* TOP WAVE */
.sts-section::before {
    top: -1px;
    background: #F7F4EB;
    clip-path: polygon( 0 0, 100% 0, 100% 45%, 97% 52%, 94% 58%, 91% 61%, 88% 60%, 85% 54%, 82% 47%, 79% 43%, 76% 44%, 73% 50%, 70% 57%, 67% 61%, 64% 60%, 61% 54%, 58% 47%, 55% 43%, 52% 44%, 49% 50%, 46% 57%, 43% 61%, 40% 60%, 37% 54%, 34% 47%, 31% 43%, 28% 44%, 25% 50%, 22% 57%, 19% 61%, 16% 60%, 13% 54%, 10% 47%, 7% 43%, 4% 45%, 0 52% );
}

/* BOTTOM WAVE */
.sts-section::after {
    bottom: -1px;
    background: #F7F4EB;
    clip-path: polygon( 0 48%, 4% 55%, 7% 57%, 10% 53%, 13% 46%, 16% 40%, 19% 39%, 22% 44%, 25% 51%, 28% 57%, 31% 58%, 34% 54%, 37% 47%, 40% 40%, 43% 39%, 46% 44%, 49% 51%, 52% 57%, 55% 58%, 58% 54%, 61% 47%, 64% 40%, 67% 39%, 70% 44%, 73% 51%, 76% 57%, 79% 58%, 82% 54%, 85% 47%, 88% 40%, 91% 39%, 94% 44%, 97% 51%, 100% 48%, 100% 100%, 0 100% );
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes stsDrop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-40px) rotate(-3deg);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) rotate(0);
    }
}

@keyframes stsSway {
    from {
        transform: translateX(-50%) rotate(-1.1deg);
    }

    to {
        transform: translateX(-50%) rotate(1.1deg);
    }
}

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

@media (max-width: 767px) {

    .sts-section {
        aspect-ratio: 16 / 9;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .sts-media.is-loading::after {
        animation: none;
    }
}

/* ==========================================================================
   CINEMA WORKS — Magnetic Deck & Expandable Drawer
   ========================================================================== */

/* Cinema Drawer Outer Structure */
.ad-story-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
}
.ad-cinema-toggle {
    border-color: #F2B676 !important;
    color: #F2B676 !important;
}
.ad-cinema-toggle:hover {
    background: rgba(242, 182, 118, 0.15) !important;
    color: #FFF3E3 !important;
}
.ad-cinema-toggle .arrow {
    transition: transform 0.35s ease;
    display: inline-block;
}
.ad-cinema-toggle[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
}

.ad-cinema-drawer {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    opacity: 0;
    transition: grid-template-rows .65s cubic-bezier(.65, 0, .2, 1), opacity .5s ease, visibility 0s linear .65s, margin-top .65s ease;
    margin-top: 0;
    width: 100%;
    overflow: visible !important;
}
.ad-cinema-drawer.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    margin-top: 48px;
    transition: grid-template-rows .65s cubic-bezier(.65, 0, .2, 1), opacity .6s ease .1s, visibility 0s, margin-top .65s ease;
}
.ad-cinema-drawer-inner {
    overflow: visible !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    padding: 20px 0 10px;
    margin: 0 auto;
    border-radius: 28px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.ad-cinema-header {
    text-align: center;
    margin-bottom: 24px;
}
.ad-cinema-title {
    font-family: 'CoffeeTown', cursive, sans-serif !important;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    color: #FFF3E3;
    margin: 6px 0 8px;
}

/* Magnetic Deck Physics Stage */
.md-field {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: visible !important;
    border-radius: 24px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}
.md-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 5;
}
.md-card {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(140px, 20vw, 200px);
    height: clamp(200px, 28vw, 280px);
    border-radius: 16px;
    overflow: hidden;
    will-change: transform;
    background: #140d09 !important;
    border: 1.5px solid rgba(201, 128, 58, 0.4) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(201, 128, 58, 0.15) !important;
    display: flex;
    flex-direction: column;
}
.md-photo {
    flex: 1 !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
}
.md-caption {
    padding: 8px 10px !important;
    background: linear-gradient(180deg, rgba(26, 18, 13, 0.95) 0%, rgba(14, 9, 6, 0.98) 100%) !important;
    border-top: 1px solid rgba(201, 128, 58, 0.28) !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
.md-role {
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #F2B676 !important;
    line-height: 1.2 !important;
}
.md-name {
    margin: 2px 0 0 !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #FFF2DF !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Warm film gradient placeholders */
/* ==========================================================================
   Cinema Works Movie Posters & Unified Coffee Theme
   ========================================================================== */
.placeholder-movie-1 { background-image: url('../images/story/movie/sarvam-thaala-mayam-1.webp') !important; }
.placeholder-movie-2 { background-image: url('../images/story/movie/unakkum-enakkum-2.webp') !important; }
.placeholder-movie-3 { background-image: url('../images/story/movie/pulivaal-3.webp') !important; }
.placeholder-movie-4 { background-image: url('../images/story/movie/jayam-4.webp') !important; }
.placeholder-movie-5 { background-image: url('../images/story/movie/vennila-kabadi-kuzhu-5.webp') !important; }
.placeholder-movie-6 { background-image: url('../images/story/movie/jeeva-6.webp') !important; }

@media (max-width: 767px) {
    .md-field {
        height: 480px !important; /* Stage height for separated rows */
        margin: 8px 0 20px 0 !important;
    }
    .md-caption {
        padding: 5px 4px !important;
    }
    .md-name {
        font-size: 0.74rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        font-weight: 700 !important;
        color: #FFF2DF !important;
    }
    .md-role {
        font-size: 0.62rem !important;
        letter-spacing: 0.05em !important;
        margin-top: 2px !important;
        color: #F2B676 !important;
        font-weight: 500 !important;
    }
}

/* ==========================================================================
   Stay / Hill Retreat Ribbon Divider
   ========================================================================== */
/* Hill Retreat Ribbon Divider */
.hill-retreat-divider {
  position: relative !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: clamp(35px, 4vw, 55px) 0 !important; /* ~2 cm clean breathing room */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  /* Seamless unnoticeable gradient transition from Farm Shop to Stay */
  background: linear-gradient(to bottom, #EFEADB 0%, #F5F1E8 50%, #FAF7F0 100%) !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

.hill-retreat-ribbon-img,
.stay-divider img,
.stay-ribbon-img {
  width: 100% !important;
  max-width: 100% !important; /* Full width edge-to-edge */
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* Ensure no harsh top padding pulls Stay into the ribbon */
#stay,
.theme-stay,
.stay-section {
  padding-top: clamp(24px, 3vw, 40px) !important;
  background-color: #FAF7F0 !important;
}

/* Ensure 'View more products' button has breathing space above the divider */
.farm-shop-action,
.view-more-container {
  margin-bottom: 18px !important;
}

/* ==========================================================================
   Story Section Buttons — Perfect Vertical Alignment & Shared Baseline
   ========================================================================== */
.ad-story-actions,
.story-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap;
}

.ad-story-actions .btn,
.ad-story-actions button,
.ad-story-actions a,
.story-actions .btn,
.story-actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.ad-story-actions .btn--ghost,
.ad-story-actions .ad-cinema-toggle,
.story-actions a:last-child {
    margin-top: 0 !important;
    transform: none !important;
}

/* ======================================================================
   Menu orbit showcase
   ====================================================================== */
.menu-media .menu-orbit-media {
    --orbit-cream: #f2ecdf;
    --orbit-coffee: #714b35;
    --orbit-coffee-dark: #4f3324;
    --orbit-size: min(100%, 540px);
    position: relative;
    width: 100%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    place-items: center;
    padding: 8px 0 42px;
}

.menu-media .menu-orbit-stage {
    width: var(--orbit-size);
    aspect-ratio: 1;
    position: relative;
    isolation: isolate;
    min-width: 0;
}

.menu-media .menu-orbit-glow {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184,146,94,.2) 0%, rgba(184,146,94,0) 68%);
    filter: blur(16px);
    z-index: 0;
    pointer-events: none;
}

/* ======================================================================
Menu orbit showcase
====================================================================== */
.menu-media .menu-orbit-media {
    --orbit-cream: #f2ecdf;
    --orbit-coffee: #714b35;
    --orbit-coffee-dark: #4f3324;
    --orbit-size: min(100%, 540px);
    position: relative;
    width: 100%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    place-items: center;
    padding: 8px 0 42px;
}

.menu-media .menu-orbit-stage {
    width: var(--orbit-size);
    aspect-ratio: 1;
    position: relative;
    isolation: isolate;
    min-width: 0;
}

.menu-media .menu-orbit-glow {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184,146,94,.2) 0%, rgba(184,146,94,0) 68%);
    filter: blur(16px);
    z-index: 0;
    pointer-events: none;
}

.menu-media .menu-orbit-ring {
    position: absolute;
    inset: 11%;
    border-radius: 50%;
    background: var(--orbit-coffee);
    box-shadow: 0 30px 55px rgba(62, 38, 24, .18), inset 0 0 0 1px rgba(255,255,255,.05);
    z-index: 1;
}

.menu-media .menu-orbit {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.menu-media .menu-orbit-item {
    --x: 0px;
    --y: 0px;
    --scale: .76;
    --z: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(92px, 29%, 156px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translate(-50%, -50%) translate3d(var(--x), var(--y), 0) scale(var(--scale));
    z-index: var(--z);
    transition: transform 950ms cubic-bezier(.2,.8,.2,1), filter 700ms ease;
    filter: drop-shadow(0 15px 15px rgba(32,20,13,.12));
    will-change: transform;
}

.menu-media .menu-orbit-card {
    width: 90%;
    height: 90%;
    display: grid;
    place-items: center;
    position: relative;
}

    .menu-media .menu-orbit-card img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: contain;
        display: block;
        user-select: none;
        -webkit-user-drag: none;
    }

.menu-media .menu-orbit-item.is-active {
    --scale: 1.08;
    --z: 20;
    filter: drop-shadow(0 22px 18px rgba(34,20,12,.22));
}

    .menu-media .menu-orbit-item.is-active .menu-orbit-card {
        animation: menuOrbitPopup 950ms cubic-bezier(.18,.9,.2,1);
    }

.menu-media .menu-orbit-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34%;
    min-width: 132px;
    max-width: 190px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: grid;
    place-items: center;
}

.menu-media .menu-orbit-brand-disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .menu-media .menu-orbit-brand-disc img {
        width: 92%;
        height: 92%;
        max-width: none;
        object-fit: contain;
        display: block;
    }

.menu-media .menu-orbit-label {
    position: absolute;
    left: 50%;
    bottom: -54px;
    transform: translateX(-50%);
    z-index: 30;
    min-width: 190px;
    text-align: center;
    color: var(--orbit-coffee-dark);
    opacity: 1;
    transition: opacity 250ms ease;
}

.menu-media .menu-orbit-ring {
    position: absolute;
    inset: 11%;
    border-radius: 50%;
    background: var(--orbit-coffee);
    box-shadow: 0 30px 55px rgba(62, 38, 24, .18), inset 0 0 0 1px rgba(255,255,255,.05);
    z-index: 1;
}

.menu-media .menu-orbit {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.menu-media .menu-orbit-item {
    --x: 0px;
    --y: 0px;
    --scale: .76;
    --z: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(92px, 29%, 156px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translate(-50%, -50%) translate3d(var(--x), var(--y), 0) scale(var(--scale));
    z-index: var(--z);
    transition: transform 950ms cubic-bezier(.2,.8,.2,1), filter 700ms ease;
    filter: drop-shadow(0 15px 15px rgba(32,20,13,.12));
    will-change: transform;
}

.menu-media .menu-orbit-card {
    width: 90%;
    height: 90%;
    display: grid;
    place-items: center;
    position: relative;
}

    .menu-media .menu-orbit-card img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: contain;
        display: block;
        user-select: none;
        -webkit-user-drag: none;
    }

.menu-media .menu-orbit-item.is-active {
    --scale: 1.08;
    --z: 20;
    filter: drop-shadow(0 22px 18px rgba(34,20,12,.22));
}

    .menu-media .menu-orbit-item.is-active .menu-orbit-card {
        animation: menuOrbitPopup 950ms cubic-bezier(.18,.9,.2,1);
    }

@keyframes menuOrbitPopup {
    0% {
        transform: translateY(24px) scale(.78);
    }

    45% {
        transform: translateY(-18px) scale(1.12);
    }

    72% {
        transform: translateY(3px) scale(1.05);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

.menu-media .menu-orbit-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34%;
    min-width: 132px;
    max-width: 190px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: grid;
    place-items: center;
}

.menu-media .menu-orbit-brand-disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .menu-media .menu-orbit-brand-disc img {
        width: 92%;
        height: 92%;
        max-width: none;
        object-fit: contain;
        display: block;
    }

.menu-media .menu-orbit-label {
    position: absolute;
    left: 50%;
    bottom: -70px;
    transform: translateX(-50%);
    z-index: 30;
    min-width: 190px;
    text-align: center;
    color: var(--orbit-coffee-dark);
    opacity: 1;
    transition: opacity 250ms ease;
}

    .menu-media .menu-orbit-label.fade {
        opacity: 0;
    }

.menu-media .menu-orbit-kicker {
    display: block;
    font: 700 9px/1.2 Arial, sans-serif;
    letter-spacing: .25em;
    opacity: .7;
    margin-bottom: 4px;
}

.menu-media .menu-orbit-label strong {
    font-size: clamp(16px, 2.2vw, 23px);
    letter-spacing: .03em;
}

@media (max-width: 700px) {
    .menu-media .menu-orbit-media {
        max-width: 520px;
        padding-bottom: 24px;
    }

    .menu-media .menu-orbit-item {
        width: clamp(76px, 23vw, 120px);
    }

    .menu-media .menu-orbit-brand {
        min-width: 112px;
    }

    .menu-media .menu-orbit-label {
        bottom: -8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-media .menu-orbit-item,
    .menu-media .menu-orbit-item.is-active .menu-orbit-card,
    .menu-media .menu-orbit-label {
        animation: none !important;
        transition: none !important;
    }
}

/* Orbit replacement uses the full menu-media column. */
.menu-media:has(.menu-orbit-media) {
    padding-left: 0;
    justify-content: center;
}
    .menu-media .menu-orbit-label.fade {
        opacity: 0;
    }

.menu-media .menu-orbit-kicker {
    display: block;
    font: 700 9px/1.2 Arial, sans-serif;
    letter-spacing: .25em;
    opacity: .7;
    margin-bottom: 4px;
}

.menu-media .menu-orbit-label strong {
    font-size: clamp(16px, 2.2vw, 23px);
    letter-spacing: .03em;
}

@media (max-width: 700px) {
    .menu-media .menu-orbit-media {
        max-width: 520px;
        padding-bottom: 24px;
    }

    .menu-media .menu-orbit-item {
        width: clamp(76px, 23vw, 120px);
    }

    .menu-media .menu-orbit-brand {
        min-width: 112px;
    }

    .menu-media .menu-orbit-label {
        bottom: -8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-media .menu-orbit-item,
    .menu-media .menu-orbit-item.is-active .menu-orbit-card,
    .menu-media .menu-orbit-label {
        animation: none !important;
        transition: none !important;
    }
}

/* Orbit replacement uses the full menu-media column. */
.menu-media:has(.menu-orbit-media) {
    padding-left: 0;
    justify-content: center;
}


/* ==========================================================================
   ██  MOBILE OPTIMISATION v3  ██
   • every section stacks properly on phones (no cramped half-width columns)
   • Soil to Sip → vertical timeline (it forced the page to 1280px wide)
   • story / workshops / articles fixed · 44px tap targets · readable text
   • quick-action bar · open-now badge · lighter animations off-screen
   • scroll polish: smooth anchors, staggered reveals
   ========================================================================== */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a, button, [role="button"], input, select, textarea { touch-action: manipulation; }
body { -webkit-tap-highlight-color: transparent; }
section[id], #top { scroll-margin-top: calc(var(--nav-h, 70px) + 8px); }
img { max-width: 100%; }

/* animations pause when a section is off-screen (JS toggles .is-offscreen) */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* ---------- staggered reveal for grids / lists (JS adds .stg + --k) ---------- */
@keyframes fcRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.reveal:not(.is-in) .stg > *, .reveal:not(.is-in).stg > * { opacity: 0; }
.reveal.is-in .stg > *, .reveal.is-in.stg > * {
    animation: fcRise .65s cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: calc(var(--k, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
    .stg > *, .reveal:not(.is-in) .stg > * { animation: none !important; opacity: 1 !important; }
}

/* ---------- open-now badge ---------- */
.open-badge {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
    font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2;
    color: #b9f0a8;
}
.open-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(185, 240, 168, .22); flex: none; }
.open-badge.is-closed { color: #c51013; }
.open-badge.is-closed::before { box-shadow: 0 0 0 3px rgba(255, 77, 79, .22); }
.open-badge[hidden] { display: none; }

/* ---------- quick-action bar (phones only) ---------- */
.m-bar { display: none; }

/* ======================= TABLET + PHONE : Soil to Sip ======================= */
@media (max-width: 1100px) {
    .sts-section { padding: 70px 22px 90px; min-height: 0; aspect-ratio: auto; }
    .sts-curve { display: none; }
    .sts-heading { margin-bottom: 40px; }
    .sts-stages { min-height: 0; max-width: 520px; display: grid; gap: 34px; }
    /* dotted line: one segment per stage (number to next number), so it ends exactly at the last number */
    .sts-stages::before { content: none; }
    .sts-stage:not(:last-child)::before {
        content: ""; position: absolute; left: 27px; top: 24px; height: calc(100% + 34px); width: 0;
        border-left: 4px dotted #9b805b; opacity: .75; pointer-events: none;
    }
    .sts-stage, .sts-stage--1, .sts-stage--2, .sts-stage--3, .sts-stage--4, .sts-stage--5 {
        position: relative; left: auto; right: auto; top: auto; width: auto;
        display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px;
        text-align: left; align-items: start;
    }
    .sts-stage .sts-number {
        grid-column: 1; grid-row: 1 / span 3; justify-self: center; align-self: start; margin: 0;
        position: relative; z-index: 2; box-shadow: 0 0 0 7px #EFEADB;
    }
    .sts-stage-media { grid-column: 2; grid-row: 1; width: min(230px, 100%); height: 150px; margin: 0 0 8px; }
    .sts-stage h3 { grid-column: 2; grid-row: 2; font-size: 24px; margin: 0 0 4px; }
    .sts-stage p { grid-column: 2; grid-row: 3; max-width: none; margin: 0; font-size: 15.5px; line-height: 1.55; }
    .sts-anim .sts-stage { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.22, 1, .36, 1); }
    .sts-anim .sts-stage.is-in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .sts-anim .sts-stage { opacity: 1; transform: none; } }
}

/* ======================= TABLET + PHONE : story blocks ======================= */
@media (max-width: 900px) {
    .ad-future, .ad-article-card { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ad-article-card { padding: 20px; }
    .ad-future-media { aspect-ratio: 16 / 9; }
    .ad-article-media { aspect-ratio: 16 / 9; }
    .ad-article-actions .btn, .ad-future-copy .btn { flex: 1 1 160px; justify-content: center; }
}

/* ======================= PHONES ≤767 ======================= */
@media (max-width: 767px) {
    /* stack every two-column block */
    body .split, body .split--reverse { flex-direction: column; align-items: stretch; gap: 32px; }
    body .about-media, body .about-copy, body .farm-media, body .farm-copy,
    body .cot-media, body .cot-copy, body .menu-media, body .menu-copy,
    body .cards-wrapper, body .gallery-copy, .stay-hero-split .cot-media-wrap {
        flex: none; width: 100%; max-width: none; min-width: 0;
    }
    body .split .headline { font-size: clamp(1.8rem, 8vw, 2.4rem); line-height: 1.12; }
    body .split .lede, .about-desc, .menu-desc, .farm-desc, .stay-desc, .visit-desc { font-size: 1rem; line-height: 1.7; }
    body .split .eyebrow { font-size: .74rem; letter-spacing: .14em; }
    body .split .btn { padding: 13px 24px; font-size: .95rem; }
    .about-media .floating-img { width: min(88%, 420px); margin: 0 auto; display: block; }
    .farm-media img, .farm-emblem-logo { max-width: 360px !important; margin: 0 auto; }
    .cot-media img { width: min(100%, 460px); margin: 0 auto; display: block; }
    body .about-copy .pill-row, .pill-row { gap: 8px; }

    /* about stats 2 x 2 */
    .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 14px !important; }
    .about-stats .stat-item b { font-size: 1.7rem; }
    .about-stats .stat-item span { white-space: normal; font-size: .82rem; }

    /* cafe photo stack: centred, full width again */
    body .cards-wrapper { min-height: 340px; overflow: hidden; }

    /* menu-orbit stays centred */
    body .menu-media { justify-content: center; padding-left: 0; }
    .menu-pills { gap: 8px !important; }

    /* feature chips */
    .farm-features-grid, .cot-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .farm-feature-item, .cot-feature-item { padding: 10px 12px; gap: 10px; align-items: flex-start; }
    .farm-feature-item strong, .cot-feature-item strong { font-size: .86rem; }
    .farm-feature-item span, .cot-feature-item span { font-size: .76rem; line-height: 1.35; }
    .cot-cta-group { flex-direction: column; align-items: stretch; gap: 10px; }
    .cot-cta-group .btn { width: 100%; justify-content: center; }

    /* rooms gallery arrows stay on screen */
    .horizon-slat__arrow--left { left: 8px; }
    .horizon-slat__arrow--right { right: 8px; }
    .horizon-slat-container {
        height: clamp(460px, 68vh, 600px) !important;
        padding: 60px 0;
        touch-action: pan-x pinch-zoom;
    }
    .horizon-slat__stage { flex-direction: column; }
    .rooms-panel { flex: 1 1 0; min-height: 0; }
    .rooms-panel__side {
        left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%);
        writing-mode: horizontal-tb; rotate: 0; font-size: .78rem;
    }
    .rooms-panel__content { left: 18px; right: 18px; bottom: 18px; }
    .horizon-slat-container .horizon-slat__arrow--left {
        top: 8px; left: 50%; right: auto; margin-top: 0; transform: translateX(-50%);
    }
    .horizon-slat-container .horizon-slat__arrow--right {
        top: auto; right: 50%; bottom: 8px; left: auto; margin-top: 0; transform: translateX(50%);
    }
    .horizon-slat__arrow--left svg,
    .horizon-slat__arrow--right svg { transform: rotate(90deg); }
    .rooms-pill-btn { min-height: 44px; }

    /* readable small text (nothing under 12px) */
    .brand-sub, .footer-brand-sub, .hero-eyebrow, .eyebrow, .i-short, .sts-eyebrow, .open-badge,
    .menu-orbit-kicker, .product-weight, .cot-pill-badge, .ad-stat-label, .md-role,
    body .split .eyebrow, #shop .product-weight { font-size: 12px !important; }
    .info-item span { font-size: .75rem; }

    /* 44px tap targets */
    .footer-nav-list a, .footer-bottom nav a, .footer-credit-phone, .contact-value a, .footer-contact a {
        display: inline-flex; align-items: center; min-height: 44px;
    }
    .footer-nav-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
    .footer-nav-list a { display: flex; }
    .sts-stage h3, .sts-stage p { text-shadow: none; }
    .footer-bottom nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
    .menu-tab, .rooms-pill-btn, .lg-tab { min-height: 44px; }
    .socials a { width: 44px; height: 44px; }
    .rvb-btn { min-width: 44px; min-height: 44px; }
    .nav-toggle { min-width: 44px; min-height: 44px; }

    /* quick-action bar */
    .m-bar {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
        position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60;
        padding: 8px; border-radius: 22px;
        background: rgba(255, 253, 247, .92); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
        border: 1px solid rgba(37, 60, 32, .12); box-shadow: 0 10px 30px rgba(30, 48, 25, .22);
        transform: translateY(140%); opacity: 0; pointer-events: none;
        transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
    }
    .m-bar.is-on { transform: none; opacity: 1; pointer-events: auto; }
    body.no-scroll .m-bar { transform: translateY(140%); opacity: 0; pointer-events: none; }
    .m-bar-btn {
        display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px;
        border-radius: 16px; text-decoration: none; font-weight: 700; font-size: .84rem; color: var(--green-800);
        background: rgba(37, 60, 32, .07);
    }
    .m-bar-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
    .m-bar-btn--wa { background: #1a7a42; color: #fff; }
    .m-bar-btn:active { transform: scale(.97); }
    body.has-mbar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); }

    /* open badge on the white info card */
    .info-strip .open-badge { color: #2d7a2d; justify-content: center; font-size: .7rem; }
    .info-strip .open-badge.is-closed { color: #c62828; }
    .info-strip .open-badge::before { box-shadow: none; }
}

@media (max-width: 359px) {
    .farm-features-grid, .cot-features-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) { .sts-stage h3, .sts-stage p { text-shadow: 0 1px 0 rgba(255, 255, 255, .55); } }


/* ==========================================================================
   ROUND 9 — ART DIRECTOR / OUR STORY : clean alternating layout
   Scoped to #art-director only. Rows alternate:
   Story = text LEFT / photo RIGHT · Workshops = photo LEFT / text RIGHT
   Articles = text LEFT / photo RIGHT
   ========================================================================== */
#art-director .ad-block {
    width: 100%;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 clamp(20px, 4vw, 48px) !important;
    box-sizing: border-box;
}
#art-director .ad-intro { margin-bottom: clamp(24px, 3.5vw, 40px) !important; }

/* ---- shared two-column row: equal columns so every edge lines up ---- */
#art-director .ad-story-grid,
#art-director .ad-future,
#art-director .ad-article-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(32px, 5vw, 80px) !important;
    align-items: center !important;
}
#art-director .ad-future,
#art-director .ad-articles {
    margin-top: clamp(56px, 7vw, 96px) !important;
    padding-top: clamp(48px, 6vw, 80px) !important;
    border-top: 1.5px dashed rgba(242, 182, 118, .22);
}
#art-director .ad-article-card {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}

/* ---- headings: tidy spacing now that they live inside the text column ---- */
#art-director .ad-story .ad-subtitle,
#art-director .ad-future .ad-subtitle,
#art-director .ad-articles .ad-subtitle {
    margin: 4px 0 26px !important;
    max-width: 100%;
}
#art-director .ad-eyebrow { margin-bottom: 6px; }

/* ---- STORY: text column ---- */
#art-director .ad-story-copy { align-items: flex-start; }
#art-director .ad-journey-list { margin: 0 0 8px; }
/* .ad-story-list — compact 3-point highlights replacing the journey checklist */
.ad-story-list {
    list-style: disc !important;
    padding-left: 1.2em !important;
    margin: 0 0 18px !important;
}
.ad-story-list li {
    font-size: clamp(0.95rem, 1.05vw, 1.02rem);
    line-height: 1.6;
    margin-bottom: 12px;
    color: rgba(247, 244, 235, 0.9);
}
.ad-story-list li strong {
    color: #F2B676;
    font-weight: 700;
}
#art-director .ad-journey-list li {
    position: relative;
    font-size: clamp(.97rem, 1.05vw, 1.04rem) !important;
    line-height: 1.65 !important;
    gap: 16px;
    margin-bottom: 0 !important;
    padding-bottom: 20px;
}
/* chalk-dashed timeline joining the ticks */
#art-director .ad-journey-list li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 34px;
    bottom: 4px;
    border-left: 1.5px dashed rgba(242, 182, 118, .42);
}
#art-director .ad-journey-note {
    margin: 12px 0 26px !important;
    padding: 14px 20px !important;
    font-size: clamp(1.05rem, 1.2vw, 1.22rem) !important;
}
#art-director .ad-story-actions { margin-top: 0; }

/* ==========================================================================
   Art Director Section: Sizing, Stats Pills, and Balanced Layout
   ========================================================================== */

/* Remove any leftover circle/glow backgrounds */
.ad-story-portrait-wrap::before,
.ad-story-portrait-wrap::after,
.ad-story-media::before {
  display: none !important;
}

/* Grid Layout: Desktop Side-by-Side */
.ad-story-grid,
#art-director .ad-story-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  align-items: center !important;
  gap: clamp(20px, 4vw, 50px) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.ad-tagline {
  color: #F2B676 !important;
  font-size: 0.95rem !important;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  margin-bottom: 8px;
  display: inline-block;
}

.ad-story-title {
  font-family: 'CoffeeTown', cursive, sans-serif !important;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: #FFF3E3 !important;
  margin: 4px 0 20px;
  text-transform: uppercase;
}

.ad-story-list {
  padding-left: 1.2em !important;
  margin: 0 0 16px !important;
  list-style: disc !important;
}

.ad-story-list li {
  font-size: clamp(0.95rem, 1.05vw, 1.02rem);
  line-height: 1.6;
  margin-bottom: 12px;
  color: rgba(247, 244, 235, 0.9);
}

.ad-story-list li strong {
  color: #F2B676;
  font-weight: 700;
}

.ad-quote-block {
  font-family: 'CoffeeTown', cursive, sans-serif !important;
  font-size: clamp(1.02rem, 1.2vw, 1.22rem) !important;
  line-height: 1.5;
  color: #FFF3E3 !important;
  border-left: 3px solid #C9803A !important;
  background: linear-gradient(90deg, rgba(201, 128, 58, 0.18) 0%, transparent 100%);
  padding: 12px 18px !important;
  border-radius: 0 12px 12px 0;
  margin: 20px 0 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.ad-quote-block p {
  margin: 0 !important;
}

/* Desktop Portrait: Positioned comfortably below top line of heading */
.ad-story-media,
#art-director .ad-story-media {
  margin-top: 38px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 500px;
  justify-self: center;
}

.ad-story-portrait-wrap,
#art-director .ad-story-portrait-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
}

.ad-story-portrait-img,
#art-director .ad-story-portrait-img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: auto !important;
  max-height: 510px !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  display: block !important;
  margin: 0 auto !important;
  mix-blend-mode: normal !important;
  /* Seamless soft feather where waist meets the pills */
  mask-image: linear-gradient(to bottom, black 82%, transparent 99%) !important;
  -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 99%) !important;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.75)) !important;
  transform: none !important;
}

#art-director .ad-story-portrait-wrap:hover .ad-story-portrait-img {
  transform: none !important;
}

/* Enlarge the 3 Stat Pills for desktop */
.ad-story-stats-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-top: -24px !important;
  position: relative !important;
  z-index: 3 !important;
}

.ad-stat-pill {
  background: #3B2416 !important;
  border: 1.5px solid rgba(242, 182, 118, 0.45) !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  min-width: 95px !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6) !important;
  text-align: center !important;
}

.ad-stat-num {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #FFF2DF !important;
  line-height: 1 !important;
}

.ad-stat-lbl {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #F2B676 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  margin-top: 4px !important;
}

#art-director .ad-story-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 32px auto 0 !important;
}

/* ==========================================================================
   Mobile Structural Order & Refined Mobile Layout (< 768px)
   ========================================================================== */
@media (max-width: 767px) {
  /* Vertical single-column stack on mobile */
  .ad-story-grid,
  #art-director .ad-story-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }

  /* 1. Header sits first & left-aligned */
  .ad-story-copy {
    display: contents !important;
  }

  .ad-story-heading-wrap {
    order: 1 !important;
    text-align: left !important;
    align-self: flex-start !important;
    width: 100% !important;
  }

  .ad-tagline {
    font-size: 0.65rem !important;
    letter-spacing: 0.15em !important;
    text-align: left !important;
    display: block !important;
  }

  .ad-story-title {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    margin: 6px 0 12px !important;
    text-align: left !important;
  }

  /* 2. Portrait & Stats sit second (centered, max-width: 270px) */
  .ad-story-media,
  #art-director .ad-story-media {
    order: 2 !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .ad-story-portrait-wrap,
  #art-director .ad-story-portrait-wrap {
    max-width: 270px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  .ad-story-portrait-img,
  #art-director .ad-story-portrait-img {
    width: 100% !important;
    height: auto !important;
    max-height: 330px !important;
    object-fit: contain !important;
    mask-image: linear-gradient(to bottom, black 82%, transparent 99%) !important;
    -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 99%) !important;
  }

  .ad-story-stats-row {
    margin-top: -18px !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
  }

  .ad-stat-pill {
    padding: 6px 12px !important;
    min-width: 72px !important;
  }

  .ad-stat-num {
    font-size: 1.05rem !important;
  }

  .ad-stat-lbl {
    font-size: 0.52rem !important;
  }

  /* 3. The 4 Highlights Reset: Left-aligned clean bullet list, no card borders/backgrounds */
  .ad-story-list {
    order: 3 !important;
    display: block !important;
    padding: 0 !important;
    margin: 14px 0 0 !important;
    list-style: none !important;
    width: 100% !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .ad-story-list li {
    font-size: 0.76rem !important;
    line-height: 1.45 !important;
    margin: 0 0 12px 0 !important;
    color: #E2D9CE !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 0 18px !important;
    position: relative !important;
    text-align: left !important;
  }

  .ad-story-list li::before {
    content: "•" !important;
    color: #F2B676 !important;
    position: absolute !important;
    left: 0 !important;
    top: -1px !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    font-weight: bold !important;
    display: inline-block !important;
  }

  .ad-story-list li strong {
    color: #F2B676 !important;
    display: inline !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    margin-right: 4px !important;
  }

  /* 4. Compact 2-line Quote Block */
  .ad-quote-block {
    order: 4 !important;
    margin-top: 10px !important;
    display: block !important;
    width: 100% !important;
    font-size: 0.72rem !important;
    text-align: left !important;
    border-left: 2px solid #F2B676 !important;
    background: transparent !important;
    padding: 4px 0 4px 10px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
  }

  .ad-quote-block p {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
    margin: 0 !important;
    color: #FFF3E3 !important;
  }

  /* 5. Story Action Buttons side by side */
  #art-director .ad-story-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
    box-sizing: border-box !important;
  }

  #art-director .ad-story-actions .btn,
  #art-director .ad-story-actions button {
    flex: 1 !important;
    font-size: 0.72rem !important;
    padding: 10px 8px !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
  }

  /* ==========================================================================
     Creative Workshop Card (< 768px): Header -> Image -> Desc -> Stay Tuned Button
     ========================================================================== */
  .ad-future,
  #art-director .ad-future,
  .ad-future-card {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .ad-future-copy {
    display: contents !important;
  }

  /* 1. Header on top */
  .ad-future-title,
  .ad-future .ad-card-header {
    order: 1 !important;
    text-align: left !important;
    width: 100% !important;
    margin-bottom: 2px !important;
  }

  .ad-future-title .ad-eyebrow {
    text-align: left !important;
    display: block !important;
    margin-bottom: 4px !important;
  }

  .ad-future-title .ad-subtitle {
    text-align: left !important;
    margin: 4px 0 8px !important;
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
  }

  /* 2. Image in the middle */
  .ad-future-media,
  .ad-future .ad-card-image-wrap {
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 4px !important;
  }

  /* 3. Description below image */
  .ad-future-body,
  .ad-future .ad-card-desc {
    order: 3 !important;
    text-align: left !important;
    width: 100% !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: #E2D9CE !important;
  }

  /* 4. "Stay Tuned" button (restricted width <= 160px) */
  .ad-future-actions,
  .ad-future .ad-card-actions {
    order: 4 !important;
    width: auto !important;
    max-width: 160px !important;
    align-self: flex-start !important;
    margin-top: 4px !important;
    display: block !important;
  }

  .ad-future-actions .ad-btn,
  .ad-future-actions .btn,
  .ad-future .ad-card-actions .ad-btn,
  .ad-future .ad-card-actions .btn {
    width: auto !important;
    max-width: 160px !important;
    font-size: 0.75rem !important;
    padding: 10px 18px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ==========================================================================
     Behind the Canvas Card (< 768px):
     Title -> Image -> Subtitle -> Desc -> Actions Side-by-Side
     ========================================================================== */
  .ad-article-card,
  #art-director .ad-article-card {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .ad-article-copy {
    display: contents !important;
  }

  /* 1. Main category / title on top */
  .ad-article-title,
  .ad-article-card .ad-card-header {
    order: 1 !important;
    text-align: left !important;
    width: 100% !important;
    margin-bottom: 2px !important;
  }

  .ad-article-title .ad-eyebrow {
    text-align: left !important;
    display: block !important;
    margin-bottom: 4px !important;
  }

  .ad-article-title .ad-subtitle {
    text-align: left !important;
    margin: 4px 0 8px !important;
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
  }

  /* 2. Article image preview */
  .ad-article-media,
  .ad-article-card .ad-card-image-wrap {
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 4px !important;
  }

  /* 3. Subtitle directly BELOW the image */
  .ad-article-subtitle {
    order: 3 !important;
    text-align: left !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #FFF2DF !important;
    margin: 6px 0 2px !important;
    width: 100% !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
  }

  /* 4. Body description text */
  .ad-article-body,
  .ad-article-card .ad-card-desc {
    order: 4 !important;
    text-align: left !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: #E2D9CE !important;
    width: 100% !important;
  }

  /* 5. Action buttons placed side by side */
  .ad-article-actions,
  .ad-article-card .ad-card-actions {
    order: 5 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 6px !important;
  }

  .ad-article-actions .btn,
  .ad-article-actions .ad-btn,
  .ad-article-card .ad-card-actions .btn {
    flex: 1 !important;
    padding: 10px 8px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 40px !important;
  }
}

/* ---- media frames (workshops + articles): natural ratio, no dead letterbox ---- */
#art-director .ad-future-media,
#art-director .ad-article-media {
    aspect-ratio: auto !important;
    width: 100%;
    border: 0;
    background: none;
    border-radius: var(--radius);
    overflow: hidden;
}
#art-director .ad-future-media > img,
#art-director .ad-article-media > img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: var(--radius);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
}
#art-director .ad-placeholder-label {
    border: 1.5px dashed rgba(247, 244, 235, .35);
    border-radius: var(--radius);
    padding: 44px 20px;
    width: 100%;
}

/* ---- text blocks of workshops / articles ---- */
#art-director .ad-future-copy p,
#art-director .ad-article-copy p { margin-bottom: 24px; }
#art-director .ad-article-copy h4 { margin: 0 0 8px; }
#art-director .ad-article-actions { margin-top: 0; }

/* ---- tablet: workshops & articles single column ---- */
@media (max-width: 900px) {
    #art-director .ad-future,
    #art-director .ad-article-card {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px !important;
    }
    #art-director .ad-article-media { order: -1; }
    #art-director .ad-future,
    #art-director .ad-articles { margin-top: 48px !important; padding-top: 40px !important; }
}
@media (min-width: 768px) and (max-width: 900px) {
    #art-director .ad-story-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px !important;
    }
    #art-director .ad-story-media { order: -1; max-width: 400px; }
}


/* ==========================================================================
   ROUND 10 — PHONE FIXES (max-width 767px only)
   1) Rooms gallery  -> clean VERTICAL accordion (top to bottom)
   2) Cinema Works   -> vertical stacked list, alternating photo left/right
   ========================================================================== */
@media (max-width: 767px) {

    /* ---------- 1) ROOMS GALLERY ---------- */
    #rooms.rooms-showcase {
        padding-top: 14px !important;
        padding-bottom: 40px !important;
    }

    #roomsSlatGallery.horizon-slat-container {
        height: 260px !important; /* Balanced landscape rectangle, not an endless vertical pillar */
        max-height: 270px !important;
        padding: 0 6px !important;
        margin: 10px auto 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        touch-action: pan-y pinch-zoom !important;
        position: relative !important;
    }

    #roomsSlatGallery .horizon-slat__stage {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        height: 100% !important;
        width: 100% !important;
    }

    #roomsSlatGallery .rooms-panel {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 100% !important;
        border-radius: 14px !important;
        transition: flex-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* Active panel expands wide like desktop */
    #roomsSlatGallery .rooms-panel.is-active {
        flex-grow: 6.5 !important; /* Takes dominant width */
    }

    #roomsSlatGallery .rooms-panel__img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

    /* Inactive slim strips: vertical text label */
    #roomsSlatGallery .rooms-panel__side {
        position: absolute !important;
        left: 50% !important;
        bottom: 14px !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        writing-mode: vertical-rl !important;
        rotate: 180deg !important;
        white-space: nowrap !important;
        font-size: 0.74rem !important;
        letter-spacing: 0.04em !important;
        color: #fff !important;
        opacity: 1 !important;
        transition: opacity 0.25s ease !important;
        pointer-events: none !important;
    }

    #roomsSlatGallery .rooms-panel.is-active .rooms-panel__side {
        opacity: 0 !important;
    }

    #roomsSlatGallery .rooms-panel__content {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
    }

    #roomsSlatGallery .rooms-panel__tag {
        font-size: 0.68rem !important;
        margin-bottom: 2px !important;
        opacity: 0;
        transition: opacity 0.3s ease 0.15s;
    }

    #roomsSlatGallery .rooms-panel__title {
        font-size: 1.15rem !important;
        line-height: 1.1 !important;
        opacity: 0;
        transition: opacity 0.3s ease 0.2s;
    }

    #roomsSlatGallery .rooms-panel.is-active .rooms-panel__tag,
    #roomsSlatGallery .rooms-panel.is-active .rooms-panel__title {
        opacity: 1 !important;
    }

    /* "Secret Attic" placeholder */
    #roomsSlatGallery .rooms-panel--placeholder .rooms-panel__side,
    #roomsSlatGallery .rooms-panel--placeholder .rooms-panel__content { color: #6d432b !important; }
    #roomsSlatGallery .rooms-panel--placeholder .rooms-panel__tag { color: #8c6d58 !important; }
    #roomsSlatGallery .rooms-panel--placeholder .rooms-panel__title { font-size: 1.15rem !important; }
    #roomsSlatGallery .rooms-panel--placeholder:not(.is-active) .rooms-panel__placeholder-wrap { opacity: 0 !important; }

    /* Left & Right floating arrows */
    #roomsSlatGallery .horizon-slat__arrow {
        width: 32px !important;
        height: 32px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }
    #roomsSlatGallery .horizon-slat__arrow svg {
        transform: none !important;
        width: 15px !important;
        height: 15px !important;
    }
    #roomsSlatGallery .horizon-slat__arrow--left { left: 4px !important; right: auto !important; }
    #roomsSlatGallery .horizon-slat__arrow--right { right: 4px !important; left: auto !important; }

    /* Counter & progress bar below the stage */
    .horizon-slat__counter {
        margin-top: 14px !important;
        margin-bottom: 8px !important;
        font-size: 0.8rem !important;
    }
    .horizon-slat__counter-line {
        width: 90px !important;
    }

    /* ---------- 2) CINEMA WORKS ---------- */
    #art-director .ad-cinema-drawer {
        scroll-margin-top: 84px;
        overflow: visible !important;
    }
    #art-director .ad-cinema-drawer.is-open { margin-top: 36px; }
    #art-director .ad-cinema-header { margin-bottom: 18px; }

    #art-director .md-field {
        position: relative !important;
        width: 100% !important;
        height: 480px !important; /* Stage height for separated rows */
        overflow: visible !important;
        touch-action: pan-y !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        margin: 10px 0 !important;
        display: block !important;
    }
    #art-director .md-hub {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 0 !important;
        height: 0 !important;
        display: block !important;
        z-index: 5 !important;
    }
    #art-director .md-card {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 106px !important;
        height: 165px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: #181f16 !important;
        border: 1px solid rgba(242, 182, 118, 0.4) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.75) !important;
        will-change: transform !important;
    }
    #art-director .md-card:nth-child(even) {
        flex-direction: column !important;
    }
    #art-director .md-photo {
        flex: 1 !important;
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center !important;
    }
    #art-director .md-caption {
        padding: 5px 4px !important;
        background: rgba(18, 25, 17, 0.95) !important;
        border-top: 1px solid rgba(242, 182, 118, 0.2) !important;
        text-align: center !important;
    }
    #art-director .md-role {
        font-size: 0.62rem !important;
        letter-spacing: 0.05em !important;
        margin-top: 2px !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #F2B676 !important;
    }
    #art-director .md-name {
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #FFF2DF !important;
    }

    /* ---------- 3) OUR TINY COT (STAY) ---------- */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    #stay,
    .stay-section,
    .theme-stay {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: clamp(14px, 4vw, 20px) !important;
        padding-right: clamp(14px, 4vw, 20px) !important;
        box-sizing: border-box !important;
    }
    .stay-hero-split,
    .cot-copy {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    /* Ensure the Hill Retreat Ribbon doesn't force a horizontal scrollbar */
    .hill-retreat-divider {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #stay .headline,
    #stay .cot-copy h2 {
        font-size: clamp(1.75rem, 6.8vw, 2.1rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 10px !important;
    }
    #stay .stay-desc {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
    #stay .stay-quote {
        padding-left: 10px !important;
        margin-bottom: 14px !important;
    }
    #stay .stay-quote p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    .cot-features-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Forces 50-50 fit inside screen */
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 12px 0 16px 0 !important;
        padding: 0 !important;
    }
    .cot-feature-item {
        min-width: 0 !important; /* Prevents text from expanding card outside viewport */
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 6px !important;
        gap: 6px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
    }
    .cot-feat-icon {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
    }
    .cot-feat-icon svg {
        width: 15px !important;
        height: 15px !important;
    }
    .cot-feature-item div {
        min-width: 0 !important;
        flex: 1 !important;
        overflow: hidden !important;
    }
    .cot-feature-item strong {
        font-size: 0.74rem !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }
    .cot-feature-item span {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    /* Side-by-Side CTA Buttons */
    .cot-cta-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Side by side */
        gap: 10px !important;
        width: 100% !important;
        margin-top: 14px !important;
        margin-bottom: 20px !important;
        box-sizing: border-box !important;
    }
    .cot-cta-group .btn,
    .cot-cta-group a {
        width: 100% !important;
        min-height: 44px !important;
        padding: 10px 8px !important;
        font-size: 0.78rem !important; /* Compact, legible text on all small phones */
        font-weight: 700 !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        letter-spacing: 0.01em !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }
    .cot-cta-group .btn .arrow {
        display: inline-block !important;
        margin-left: 4px !important;
    }

    /* Mobile Section Spacing & Flow for Cottage Visual */
    .cot-media-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 20px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    .cot-media {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
    .cot-media img {
        width: 100% !important;
        height: auto !important;
        max-height: 260px !important;
        object-fit: contain !important;
    }
    .cot-badges-row {
        margin-top: 10px !important;
        gap: 6px !important;
    }
    .cot-pill-badge {
        font-size: 0.72rem !important;
        padding: 5px 10px !important;
    }
    /* Clean transition into Unfiltered Mountain Living headline */
    #rooms.rooms-showcase,
    body #rooms.rooms-showcase {
        padding-top: 18px !important;
    }
    #rooms .section-head {
        margin: 10px auto 20px auto !important;
        padding: 0 14px !important;
    }
    #rooms .headline {
        font-size: clamp(1.6rem, 6.5vw, 2rem) !important;
        line-height: 1.15 !important;
    }
    #rooms .lede {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        margin-top: 8px !important;
    }
}

@media (max-width: 359px) {
    .cot-cta-group {
        gap: 6px !important;
    }
    .cot-cta-group .btn,
    .cot-cta-group a {
        padding: 10px 4px !important;
        font-size: 0.68rem !important;
    }
}

/* ==========================================================================
   FARM SHOP PRICES (CMS price feature) - written to sit well with the .product-card rules above
   ========================================================================== */
.product-card p.product-price {
    margin: 4px 12px 8px !important;
    min-height: 0 !important;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: .01em;
    color: var(--green-800);
    line-height: 1.15;
}
.product-price[hidden], .pm-price[hidden] { display: none !important; }
.product-card.is-unavailable .product-price { opacity: .55; }
.pm-price { margin: 0 0 8px 0 !important; font-size: 1.5rem; font-weight: 800; color: var(--green-800); }
.pm-line-price { display: block; margin-top: 2px; font-size: .92rem; font-weight: 800; color: var(--green-600); }

@media (max-width: 767px) {
    .product-card p.product-price { margin: 2px 10px 8px !important; font-size: 1.2rem; }
    .pm-price { font-size: 1.35rem; }
}

/* ==========================================================================
   MOBILE FIXES + HERO STILL
   ========================================================================== */
/* Hero: the still photo is the background, so it paints straight away and the video fades in on top */
.hero { background-image: url('../images/cafe/cafe-01.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; }
@media (max-width: 767px) {
    .hero { background-image: url('../images/cafe/hero-mob-poster.webp'); }
}

/* Menu highlights: three tags in ONE row on phones (saves about 70px of scrolling) */
@media (max-width: 600px) {
    .menu-pills {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px !important;
        margin-bottom: 20px !important;
    }
    .menu-pills .pill-tag {
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal !important;
        padding: 6px 4px !important;
        font-size: 0.66rem !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        border-radius: 12px !important;
        min-height: 38px;
    }
}

/* Menu wheel: keep "NOW SERVING / item name" below the bottom plate on phones */
@media (max-width: 700px) {
    .menu-media .menu-orbit-media { padding-bottom: 64px; }
    .menu-media .menu-orbit-label { bottom: -62px; }
}

/* ==========================================================================
   SMALL UI FIXES (hours buttons, photo arrows, farm promises, product buttons)
   ========================================================================== */
/* Get directions / Call the cafe: smaller, never wrap */
.hours-actions { margin-top: 22px !important; gap: 10px !important; }
.hours-actions .btn {
    padding: 9px 20px;
    font-size: 0.88rem;
    line-height: 1.2;
    min-height: 0;
    white-space: nowrap;
    gap: 6px;
}
@media (max-width: 767px) {
    .hours-actions { margin-top: 18px !important; gap: 8px !important; }
    .hours-actions .btn { padding: 8px 14px; font-size: 0.8rem; }
}

/* Cafe photo slider (phones): arrows sit at the vertical centre of the photos, left and right */
@media (max-width: 767px) {
    .cards-wrapper .nav-arrow {
        top: 204px; bottom: auto;
        transform: translateY(-50%);
        width: 38px; height: 38px; font-size: 1.25rem;
    }
    .cards-wrapper .nav-arrow:hover { transform: translateY(-50%) scale(1.06); }
    #prevCard { left: 2px; right: auto; }
    #nextCard { right: 2px; left: auto; }
}

/* Farm promises (100% Organic ...): tighter boxes */
.farm-features-grid { gap: 8px; margin: 16px 0 18px; }
.farm-feature-item { padding: 7px 12px; gap: 9px; align-items: center; border-radius: 12px; }
.farm-feat-icon { width: 24px; height: 24px; }
.farm-feat-icon svg { width: 16px; height: 16px; }
.farm-feature-item strong { font-size: 0.82rem; line-height: 1.15; }
.farm-feature-item > div { line-height: 1.25; }
.farm-feature-item span { display: block; margin-top: 2px; font-size: 0.72rem; line-height: 1.25; }
@media (max-width: 767px) {
    .farm-feature-item { padding: 7px 9px; gap: 7px; align-items: center; }
    .farm-feature-item strong { font-size: 0.76rem; }
    .farm-feature-item span { font-size: 0.66rem; line-height: 1.25; }
}


/* ==========================================================================
   PHONE FIXES (round 11)
   1) Rooms carousel: grey box behind the photos = panel box-shadows clipped
      by the container's overflow:hidden. Remove shadows on phones.
   2) Farm shop cards: tighten the text block (no blank gaps)
   ========================================================================== */
@media (max-width: 767px) {
    #roomsSlatGallery.horizon-slat-container,
    #roomsSlatGallery .horizon-slat__stage {
        background: transparent !important;
        box-shadow: none !important;
    }
    #roomsSlatGallery .rooms-panel,
    #roomsSlatGallery .rooms-panel.is-active {
        box-shadow: none !important;
    }

    #shop .product-card .product-title {
        min-height: 0 !important;
        margin: 2px 10px 0 !important;
        line-height: 1.2 !important;
    }
    #shop .product-card .product-weight {
        min-height: 0 !important;
        margin: 3px 10px 0 !important;
        line-height: 1.3 !important;
    }
    #shop .product-card p.product-price {
        margin: 6px 10px 12px !important; /* 12px = min gap above button */
        line-height: 1.1 !important;
    }
    #shop .product-card .product-img-wrap {
        margin-bottom: 8px !important;
    }
    #shop .product-card .cta-pill-btn {
        margin-top: auto !important;
    }
    #shop .product-card {
        padding-bottom: 12px !important;
    }
}