/* Little Zoo Cafe — "GOLDEN HOUR" design system
   Warm editorial: the photos ARE the page. Mobile-first (375px base),
   tablet >=720px, desktop >=1024px. CSS-only effects, zero JS additions. */

:root {
    /* ---- surfaces ---- */
    --bg: #faf3e3;
    --bg-soft: #f3e7cd;
    --bg-cream: #fffdf8;
    --card: #fffdf8;

    /* ---- ink ---- */
    --ink: #241b10;
    --ink-soft: #5d4c37;
    --ink-mute: #8b7a64;

    /* ---- brand ---- */
    --orange: #e8762a;
    --orange-deep: #a04a10;
    --orange-bright: #f08a3e;
    --orange-soft: #fbe3c9;
    --orange-edge: #b85510;

    /* ---- support ---- */
    --green: #6f7f60;
    --green-deep: #424c35;
    --green-soft: #dde4d2;
    --leaf: #6f7f60;
    --purple: #5e4b3d;
    --pink: #b75c33;
    --red: #424c35; /* booking-flow compat token */

    /* ---- new ---- */
    --espresso: #241b10;
    --cream-dark: #f6ead0;
    --gold: #f4b942;
    --butter: #f7c948;

    /* ---- lines / shadows / radii ---- */
    --line: #e6d5b2;
    --line-dark: rgba(246, 234, 208, .22);
    --shadow-sm: 0 1px 2px rgba(36,27,16,.05), 0 6px 16px rgba(36,27,16,.07);
    --shadow-md: 0 2px 6px rgba(36,27,16,.06), 0 18px 40px rgba(36,27,16,.10);
    --radius: 24px;
    --radius-sm: 14px;
    --radius-pill: 999px;
    --maxw: 1180px;
    --arch: 999px 999px 28px 28px;

    /* ---- inline art (defined once) ---- */
    --squiggle-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='9' viewBox='0 0 110 9'%3E%3Cpath d='M2 6.5c14-5 28 4 42-1s28-3 40 1 18 0 24-2' fill='none' stroke='%23e8762a' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
    --squiggle-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='9' viewBox='0 0 110 9'%3E%3Cpath d='M2 6.5c14-5 28 4 42-1s28-3 40 1 18 0 24-2' fill='none' stroke='%23f6ead0' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
    --scallop-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12'%3E%3Cpath d='M0 12a16 16 0 0 1 32 0z' fill='%23faf3e3'/%3E%3C/svg%3E");
    --scallop-olive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12'%3E%3Cpath d='M0 12a16 16 0 0 1 32 0z' fill='%23424c35'/%3E%3C/svg%3E");
    --paw-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23e8762a'%3E%3Cellipse cx='16' cy='20' rx='6.5' ry='5'/%3E%3Ccircle cx='8.5' cy='13' r='3'/%3E%3Ccircle cx='13.5' cy='9.5' r='3'/%3E%3Ccircle cx='18.5' cy='9.5' r='3'/%3E%3Ccircle cx='23.5' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    --paw-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23f6ead0'%3E%3Cellipse cx='16' cy='20' rx='6.5' ry='5'/%3E%3Ccircle cx='8.5' cy='13' r='3'/%3E%3Ccircle cx='13.5' cy='9.5' r='3'/%3E%3Ccircle cx='18.5' cy='9.5' r='3'/%3E%3Ccircle cx='23.5' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
}

a { color: var(--orange-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* === Typography === */
h1, h2, h3, h4 {
    font-family: 'Fredoka', system-ui, sans-serif;
    color: var(--ink);
    margin: 0 0 .5em;
    font-weight: 600;
}
h1 { font-size: clamp(3.25rem, 17vw, 6.5rem); line-height: .92; letter-spacing: -.02em; font-weight: 700; }
h2 { font-size: clamp(2.1rem, 8.5vw, 3.4rem); line-height: 1.02; text-wrap: balance; }
h3 { font-size: clamp(1.35rem, 5vw, 1.7rem); line-height: 1.15; }
h4 { font-size: 1.1rem; }

.kicker {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--orange-deep);
    margin: 0 0 .9rem;
}
.kicker::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--orange);
    vertical-align: middle;
    margin-right: 10px;
}

.highlight {
    color: var(--orange);
    background: var(--squiggle-orange) repeat-x 0 100% / auto 8px;
    padding-bottom: .18em;
}
.highlight-soft {
    color: inherit;
    background: var(--squiggle-orange) repeat-x 0 100% / auto 8px;
    padding-bottom: .18em;
}

/* === Buttons — press physics === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 26px;
    border-radius: var(--radius-pill);
    border: 0;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .02em;
    cursor: pointer;
    text-align: center;
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 3px 0 var(--orange-edge);
}
.btn-primary::after {
    content: "\2192";
    margin-left: .5em;
    display: inline-block;
    transition: transform .2s ease;
}
.btn-primary:hover { background: #dd6a1f; }
.btn-primary:hover::after { transform: translateX(3px); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 0 0 var(--orange-edge); }
.btn-secondary {
    background: var(--green-deep);
    color: var(--cream-dark);
    box-shadow: 0 3px 0 #2e3525;
}
.btn-secondary:active { transform: translateY(3px); box-shadow: 0 0 0 #2e3525; }
.btn-ghost {
    background: transparent;
    border: 1.5px solid currentColor;
    color: var(--orange-deep);
    padding: 12px 24px;
}
.btn-ghost:active { transform: translateY(2px); }
.btn-instagram {
    background: var(--espresso);
    color: var(--cream-dark);
}
.btn-instagram::after { content: "\2192"; margin-left: .5em; color: var(--orange-bright); }
.btn-block { display: flex; width: 100%; }

/* === Promo banner — ticket stub === */
.promo-banner {
    background: var(--green-deep);
    color: var(--cream-dark);
    padding: 9px 0;
    font-size: .8rem;
    font-weight: 500;
    border-bottom: 2px dashed rgba(246,234,208,.35);
}
.promo-banner-soon { background: var(--espresso); }
/* Mobile: inline flow so the banner stays ~2 text lines, not a 140px stack */
.promo-inner {
    display: block;
    text-align: center;
    line-height: 1.6;
}
.promo-label {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    color: var(--orange-bright);
}
.promo-link {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    margin-left: 8px;
    color: var(--cream-dark);
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .06em;
    border: 1px solid var(--cream-dark);
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    text-decoration: none;
}
.promo-link:hover { background: rgba(246,234,208,.12); text-decoration: none; }

/* === Header === */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 243, 227, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
.logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--ink);
    text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo-mark { display: inline-flex; width: 26px; height: 26px; }
.logo-mark svg { width: 100%; height: 100%; }
.logo-light { color: var(--cream-dark); }
.logo-est {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange-deep);
    margin-top: 1px;
    line-height: 1;
}
.logo-light .logo-est { color: var(--orange-bright); }
.logo-stack { display: flex; flex-direction: column; line-height: 1.05; }

.nav-links { display: none; }
.nav-links.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--card);
    padding: 12px 20px 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    z-index: 60;
}
.nav-links a {
    color: var(--ink-soft);
    font-weight: 500;
    font-size: .95rem;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}
.nav-links a:last-child { border-bottom: 0; }
.nav-links a:hover { color: var(--orange-deep); text-decoration: none; }
.nav-links .nav-cta {
    background: var(--orange);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    border-bottom: 0;
    text-align: center;
    margin: 10px 0 0;
    box-shadow: 0 3px 0 var(--orange-edge);
}
.nav-links .nav-cta:hover { background: #dd6a1f; color: #fff; }
.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    background: var(--orange);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 2px 0 var(--orange-edge);
}
.nav-toggle:active { transform: translateY(2px); box-shadow: none; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }

/* === Placeholder + real photos === */
.placeholder-photo {
    background:
        repeating-linear-gradient(45deg, rgba(208,138,67,.07) 0 8px, rgba(208,138,67,.11) 8px 16px),
        linear-gradient(135deg, var(--orange-soft), var(--bg-soft));
    border: 1.5px dashed rgba(160,74,16,.3);
    border-radius: var(--radius);
    color: var(--ink-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .8rem;
    font-weight: 500;
    overflow: hidden;
    padding: 8px;
}
.placeholder-photo small { display: block; opacity: .6; font-size: .72rem; margin-top: 2px; }
.placeholder-photo span { font-size: 1.4rem; }
.placeholder-photo.small { width: 40px; height: 40px; border-radius: 999px; }

.hero-photo img, .collage-main img, .collage-small img, .location-photo img,
.animal-photo img, .insta-tile img, .booking-summary-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* === Sections === */
section { padding: 56px 0; }
.section-head {
    text-align: left;
    margin: 0 0 32px;
    max-width: 760px;
}
.section-sub {
    color: var(--ink-soft);
    font-size: 1.02rem;
    margin-top: .8rem;
}

/* === HERO — the full-bleed cover === */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 0;
    min-height: 560px;
    min-height: clamp(560px, 94svh, 780px);
    overflow: hidden;
    background: var(--espresso);
}
.hero-art {
    position: absolute;
    inset: 0;
    margin: 0;
    max-width: none;
    z-index: 0;
}
.hero-photo {
    width: 100%;
    height: 100%;
    border-radius: 0;
}
.hero-photo img { object-position: 62% 24%; }
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(28,19,10,.55) 0%,
        rgba(28,19,10,.15) 22%,
        rgba(28,19,10,0) 45%,
        rgba(28,19,10,.12) 60%,
        rgba(28,19,10,.74) 84%,
        rgba(28,19,10,.86) 100%);
}
.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
    padding: 0 20px 56px;
}
.hero-text { text-align: left; max-width: 640px; }
.hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--cream-dark);
    margin: 0 0 14px;
}
.hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--orange-bright);
    vertical-align: middle;
    margin-right: 10px;
}
.hero h1 { color: #fff8ec; margin-bottom: .35em; }
.hero-line { display: block; }
.hero h1 .highlight {
    color: var(--orange-bright);
    background-image: var(--squiggle-cream);
}
.hero h1 .amp { color: var(--orange-bright); font-weight: 400; }
.hero-lede {
    font-size: 1.02rem;
    color: rgba(250,243,227,.94);
    max-width: 30ch;
    margin: 0 0 1.6em;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-ctas .btn-primary { min-height: 52px; flex: 1 1 auto; }
.hero .btn-ghost, .hero-ctas .btn-ghost { color: var(--cream-dark); }
.hero-trust {
    margin: 18px 0 0;
    font-size: .78rem;
    font-weight: 500;
    color: rgba(250,243,227,.8);
}
.hero-trust::before { content: '★ '; color: var(--gold); }
/* scalloped cream awning biting into the photo */
.hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 12px;
    background: var(--scallop-cream) repeat-x bottom;
    z-index: 2;
}

/* Branch hero variants share the system */
.hero-branch { min-height: clamp(480px, 80svh, 640px); }
.hero-branch .hero-photo img { object-position: 50% 35%; }
.hero-renovation .hero-photo img { object-position: 50% 22%; }

/* === Breadcrumb === */
.breadcrumb {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: .82rem;
    color: var(--ink-mute);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

/* === ABOUT — arch + polaroids === */
.about { background: var(--bg); padding-top: 48px; }
.about-inner, .wonder-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
    margin-bottom: 44px;
}
.wonder-text { text-align: left; }
.about-inner .wonder-text p:not(.kicker) { margin: 1em 0; color: var(--ink-soft); }
.about-inner .wonder-text p:not(.kicker):last-of-type { margin-bottom: 1.5em; }

.wonder-collage {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 56px;
    width: 100%;
}
.collage-main {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--arch);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.collage-small {
    display: block;
    position: absolute;
    width: 36%;
    aspect-ratio: 1;
    background: #fff;
    padding: 8px 8px 26px;
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    z-index: 2;
}
.collage-small img { border-radius: 2px; }
.collage-small-1 { left: 2%; bottom: 8px; transform: rotate(-2.5deg); }
.collage-small-2 { right: 2%; bottom: 0; transform: rotate(2deg); }
.collage-leaf { display: none; }

/* === CARE FACTS — the editorial index === */
.care-facts {
    list-style: none;
    margin: 0;
    padding: 8px 0 0;
    counter-reset: carefact;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
}
.care-facts li {
    counter-increment: carefact;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 4px 14px;
    align-items: start;
    text-align: left;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.care-facts li::before {
    content: counter(carefact, decimal-leading-zero);
    grid-row: 1 / 3;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 10vw, 3.4rem);
    line-height: 1;
    color: #f0dcbc;
}
@supports (-webkit-text-stroke: 1px #000) {
    .care-facts li::before { color: transparent; -webkit-text-stroke: 1.5px var(--orange); }
}
.care-facts strong {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--ink);
    line-height: 1.2;
}
.care-facts span { font-size: .9rem; color: var(--ink-soft); line-height: 1.55; }

/* === OLIVE CHAPTER (Your Visit) + light pitch variant === */
.visit-approach {
    position: relative;
    background: var(--green-deep);
    color: var(--cream-dark);
    padding: 64px 0;
}
.visit-approach::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -11px;
    height: 12px;
    background: var(--scallop-olive) repeat-x bottom;
}
.visit-approach::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -11px;
    height: 12px;
    background: var(--scallop-olive) repeat-x top;
    transform: scaleY(-1);
}
.visit-approach .section-head h2 { color: var(--cream-dark); }
.visit-approach .section-sub { color: rgba(246,234,208,.85); }
.visit-approach .kicker { color: var(--orange-bright); }
.visit-approach .kicker::before { background: var(--orange-bright); }
.visit-approach .highlight-soft { color: var(--orange-bright); background-image: var(--squiggle-cream); }

.approach-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 560px;
}
.approach-card {
    background: transparent;
    border: 1px solid rgba(246,234,208,.25);
    border-radius: 20px;
    padding: 24px 22px;
    text-align: left;
    transition: border-color .2s ease;
}
.approach-card:hover { border-color: var(--orange-bright); }
.approach-card h3 { color: var(--cream-dark); margin: 14px 0 .45em; }
.approach-card p { color: rgba(246,234,208,.88); font-size: .94rem; margin: 0; }
.approach-card strong { color: var(--cream-dark); font-weight: 600; }
.approach-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.5px solid var(--cream-dark);
    font-size: 0; /* hides legacy emoji */
    position: relative;
}
.approach-icon::before {
    content: '';
    width: 28px;
    height: 28px;
    background: var(--paw-cream) center / contain no-repeat;
}

/* Asiatique pitch — light variant of the same anatomy */
.asiatique-pitch { background: var(--bg-cream); border-top: 1px solid var(--line); }
.asiatique-pitch .approach-card { border: 1px solid var(--line); background: transparent; }
.asiatique-pitch .approach-card:hover { border-color: var(--orange); }
.asiatique-pitch .approach-card h3 { color: var(--ink); }
.asiatique-pitch .approach-card p { color: var(--ink-soft); }
.asiatique-pitch .approach-icon { border-color: var(--orange-deep); }
.asiatique-pitch .approach-icon::before { background-image: var(--paw-orange); }

/* === LOCATIONS — cover cards === */
.locations { background: var(--bg-cream); border-top: 1px solid var(--line); }
.location-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}
.location-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
    .location-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}
.location-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 0;
    overflow: hidden;
}
.location-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(28,19,10,.78) 100%);
    pointer-events: none;
}
.location-photo h3 {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    z-index: 2;
    margin: 0;
    color: var(--cream-dark);
    font-size: clamp(1.7rem, 7vw, 2.2rem);
    line-height: 1.04;
}
.location-badges, .location-photo .location-badge { z-index: 2; }
.location-badges {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 8px;
}
.location-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    font-family: 'Fredoka', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.location-badge-open { background: var(--green-deep); color: var(--cream-dark); }
.location-badge-soon {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(36,27,16,.5);
    border: 1px solid var(--line-dark);
    color: var(--cream-dark);
    backdrop-filter: blur(2px);
}
/* butter starburst */
.location-badge-promo, .ticket-promo-label {
    position: absolute;
    top: -2px;
    right: 12px;
    width: 84px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--butter);
    color: var(--ink);
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: .78rem;
    line-height: 1.1;
    letter-spacing: .02em;
    text-transform: uppercase;
    transform: rotate(6deg);
    border-radius: 50%;
    clip-path: polygon(100% 50%,89.6% 60.6%,93.3% 75%,79% 79%,75% 93.3%,60.6% 89.6%,50% 100%,39.4% 89.6%,25% 93.3%,21% 79%,6.7% 75%,10.4% 60.6%,0% 50%,10.4% 39.4%,6.7% 25%,21% 21%,25% 6.7%,39.4% 10.4%,50% 0%,60.6% 10.4%,75% 6.7%,79% 21%,93.3% 25%,89.6% 39.4%);
    padding: 10px;
    z-index: 3;
}
.location-body { padding: 18px 20px 22px; }
.location-body p {
    color: var(--ink-soft);
    font-size: .95rem;
    margin: 0 0 14px;
}
.location-animals-label {
    font-size: .68rem !important;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-mute) !important;
    margin: 14px 0 6px !important;
}
.location-animal-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}
.location-animal-list li {
    display: inline;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: .72rem;
    line-height: 1.9;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.location-animal-list li + li::before { content: " \00B7  "; color: var(--orange); }
.location-meantime { font-size: .92rem; margin: 0 0 18px !important; }
.location-meantime a { font-weight: 600; }
.location-ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* === CAROUSEL / ANIMAL CARDS — photo-led === */
.carousel { position: relative; padding: 0 8px; }
.carousel-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.animal-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--espresso);
    transition: transform .2s ease;
}
@media (hover: hover) {
    .animal-card:hover { transform: translateY(-4px); }
}
.animal-card.is-hidden { display: none; }
.animal-photo {
    aspect-ratio: 4 / 5;
    border-radius: 0;
}
.carousel-track > .animal-card:nth-child(even) {
    border-radius: var(--arch);
}
.animal-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 56px 18px 18px;
    background: linear-gradient(180deg, transparent 0%, rgba(28,19,10,.85) 78%);
}
.animal-body h3 {
    color: var(--cream-dark);
    font-size: 1.45rem;
    margin: 0 0 .15em;
}
.animal-nick { font-weight: 400; color: rgba(246,234,208,.8); font-size: .85em; }
.animal-meta {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .62rem !important;
    font-weight: 600;
    color: rgba(246,234,208,.78) !important;
    margin: 0 0 .5em !important;
}
.animal-body p {
    color: rgba(246,234,208,.88);
    font-size: .88rem;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--green-deep);
    color: var(--cream-dark);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color .15s ease;
    padding: 0;
    z-index: 3;
}
.carousel-arrow:hover { background: #333c29; }
.carousel-prev { left: -4px; }
.carousel-next { right: -4px; }
.animals-cta { text-align: center; margin-top: 32px; }

/* === TICKETS — the editorial ticket === */
.tickets { background: var(--bg); }
.ticket-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0 auto;
}
.ticket-grid-single { max-width: 560px; }
.ticket-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 22px;
    box-shadow: var(--shadow-sm);
}
.ticket-cafe { background: var(--card); }
.ticket-card h3 { font-size: clamp(1.5rem, 6vw, 1.9rem); margin-top: .2em; }
.ticket-blurb { color: var(--ink-soft); font-size: .95rem; }
.ticket-price {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    text-align: left;
    padding: 18px 0 16px;
    margin: 18px 0;
    border-top: 2px dashed var(--line);
    border-bottom: 2px dashed var(--line);
}
.ticket-price-tag {
    display: flex;
    align-items: baseline;
    gap: 10px;
    background: transparent;
    color: var(--ink);
    padding: 0;
}
.ticket-price-tag small {
    font-size: .8rem;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
}
.ticket-price-tag strong {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 9vw, 2.8rem);
    color: var(--orange-deep);
    line-height: 1;
}
.ticket-price-was {
    font-size: .9rem;
    color: var(--ink-mute);
    text-decoration: line-through;
}
.ticket-includes {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .94rem;
    color: var(--ink-soft);
}
.ticket-includes li { padding: 4px 0 4px 26px; position: relative; }
.ticket-includes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .45em;
    width: 16px;
    height: 16px;
    background: var(--paw-orange) center / contain no-repeat;
}
.ticket-section-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 600;
    color: var(--ink-mute);
    margin: 16px 0 8px;
    text-align: left;
}
.ticket-roster {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: .72rem;
    line-height: 1.9;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 18px;
}
.ticket-animals { /* legacy chips — restyle if present */
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
}
.ticket-animals li {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.ticket-urgent {
    text-align: left;
    color: var(--orange-deep);
    font-weight: 600;
    font-size: .9rem;
    margin: 0 0 16px;
}

/* "Booking opens July" chip */
.booking-opens {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    text-align: left;
}
.booking-opens strong {
    display: block;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.05rem;
    color: var(--green-deep);
    margin-bottom: 4px;
}
.booking-opens span { font-size: .9rem; color: var(--ink-soft); }
.booking-note {
    font-size: .8rem !important;
    color: var(--ink-mute) !important;
    text-align: left;
    margin: 12px 0 0 !important;
}
.booking-note a { font-weight: 600; }

/* === TESTIMONIALS — the guestbook rail === */
.testimonials { background: var(--bg); content-visibility: auto; contain-intrinsic-size: auto 620px; }
.testimonial-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin: 0 -20px;
    padding: 4px 20px 12px;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.testimonial-row::-webkit-scrollbar { display: none; }
.testimonial {
    flex: 0 0 85%;
    scroll-snap-align: start;
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 3px solid var(--green);
    border-radius: 20px;
    padding: 22px;
    color: var(--ink);
}
.testimonial::before {
    content: "\201C";
    display: block;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 4.5rem;
    line-height: .6;
    color: var(--orange);
    margin-bottom: .25em;
}
.t-green { border-top-color: var(--green); }
.t-purple { border-top-color: var(--purple); }
.t-pink { border-top-color: var(--pink); }
.testimonial .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; font-size: 1rem; }
.testimonial h4 { color: var(--ink); margin-bottom: .55em; }
.testimonial p { font-size: .92rem; color: var(--ink-soft); margin: 0 0 16px; }
.testimonial footer {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
    padding-top: 14px;
}
.t-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--green);
    position: relative;
    flex: 0 0 auto;
}
.t-avatar::before {
    content: '';
    position: absolute;
    inset: 8px;
    background: var(--paw-cream) center / contain no-repeat;
}
.t-purple .t-avatar, .testimonial.t-purple .t-avatar { background: var(--purple); }
.t-pink .t-avatar, .testimonial.t-pink .t-avatar { background: var(--pink); }

/* === INSTAGRAM — film strip === */
.instagram { background: var(--bg); content-visibility: auto; contain-intrinsic-size: auto 520px; }
.insta-head { margin-bottom: 24px; }
.insta-head .btn-instagram { margin-top: 14px; }
.insta-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
    margin: 0 -20px;
    padding: 0 20px 12px;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.insta-grid::-webkit-scrollbar { display: none; }
.insta-tile {
    flex: 0 0 66vw;
    max-width: 320px;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform .2s ease;
}
@media (hover: hover) {
    .insta-tile:hover { transform: scale(1.02); text-decoration: none; }
}
.insta-follow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    background: var(--espresso);
    color: var(--cream-dark);
    padding: 22px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.2;
}
.insta-follow small {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-bright);
}
.insta-follow:hover { text-decoration: none; transform: scale(1.02); }

/* === FOOTER — espresso sign-off === */
.site-footer {
    position: relative;
    background: var(--espresso);
    color: #e9dcc3;
    padding: 56px 0 24px;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}
.site-footer::before {
    content: '';
    position: absolute;
    right: -60px;
    top: 30px;
    width: 280px;
    height: 280px;
    background: var(--paw-orange) center / contain no-repeat;
    opacity: .05;
    pointer-events: none;
    transform: rotate(-12deg);
}
.footer-signoff {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    color: var(--cream-dark);
    margin: 0 0 32px;
}
.footer-signoff em {
    font-style: normal;
    background: var(--squiggle-cream) repeat-x 0 100% / auto 8px;
    padding-bottom: .2em;
}
.footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line-dark);
}
.footer-brand .logo { color: var(--cream-dark); font-size: 1.4rem; }
.footer-tag {
    color: var(--orange-bright);
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    margin: 6px 0 0;
    font-size: .95rem;
}
.footer-locations .kicker { color: var(--orange-bright); }
.footer-locations .kicker::before { background: var(--orange-bright); }
.footer-locations p { font-size: .9rem; margin: 8px 0; line-height: 1.55; }
.footer-locations a { color: #e9dcc3; }
.footer-locations a:hover { color: #fff; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { color: #e9dcc3; font-size: .95rem; }
.footer-nav a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.footer-account { color: var(--orange-bright) !important; }
.footer-contact p { margin: 4px 0; font-size: .92rem; }
.footer-contact a { color: #e9dcc3; }
.footer-newsletter .kicker { color: var(--orange-bright); }
.footer-newsletter .kicker::before { background: var(--orange-bright); }
.newsletter-row {
    display: flex;
    gap: 8px;
    background: rgba(255,255,255,.07);
    padding: 6px;
    border-radius: var(--radius-pill);
    flex-wrap: wrap;
}
.newsletter-row input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--cream-dark);
    padding: 10px 16px;
    font-family: inherit;
    font-size: .9rem;
    outline: none;
    min-height: 36px;
}
.newsletter-row input::placeholder { color: rgba(246,234,208,.45); }
.newsletter-row .btn { padding: 10px 20px; font-size: .85rem; min-height: 44px; }
.newsletter-note { font-size: .78rem; color: #a08c6c; margin: 10px 0 0; }
.footer-bottom {
    padding: 22px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    color: #a08c6c;
    text-align: center;
    border-top: 1px dashed var(--line-dark);
    margin-top: 24px;
}
.footer-legal a { color: #a08c6c; }
.footer-legal a:hover { color: #fff; }

/* === Mobile book bar (homepage only) === */
.home-book-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(36,27,16,.07);
}
.home-book-bar small {
    display: block;
    font-size: .72rem;
    color: var(--ink-mute);
    font-weight: 500;
}
.home-book-bar strong {
    display: block;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.05rem;
    color: var(--orange-deep);
    line-height: 1.15;
}
.home-book-bar .btn { flex: 0 0 auto; min-height: 48px; padding: 12px 22px; }
/* Espresso footer extends behind the fixed book bar — no cream strip */
body.page-home .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* === BRANCH LOCATION / NAP === */
.branch-location { background: var(--bg); }
.nap-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}
.nap {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}
.nap li {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.nap-icon {
    font-size: 1.2rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--green);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nap li > div { flex: 1; min-width: 0; }
.nap strong {
    display: block;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
    font-size: .95rem;
}
.nap p { margin: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }
.nap p a { font-weight: 600; }
.nap-note {
    font-size: .78rem !important;
    color: var(--ink-mute) !important;
    margin-top: 4px !important;
}
.location-map { display: flex; flex-direction: column; gap: 10px; }
.location-map iframe {
    width: 100%;
    flex: 1;
    min-height: 300px;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.map-open {
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
}

/* === RENOVATION (On Nut) === */
.renovation { background: var(--bg-cream); border-top: 1px solid var(--line); }
.renovation-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 22px;
    box-shadow: var(--shadow-sm);
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}
.renovation-card h2 { color: var(--ink); }
.renovation-card p { color: var(--ink-soft); font-size: 1rem; margin: 14px 0; }
.renovation-card a { font-weight: 600; }
.renovation-timeline {
    list-style: none;
    margin: 26px 0 0;
    padding: 0 0 0 6px;
    text-align: left;
    border-left: 2px solid var(--line);
}
.renovation-timeline li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0 10px 24px;
    background: transparent;
    border: 0;
}
.renovation-timeline li::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 18px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--orange);
}
.renovation-timeline-active { background: transparent !important; border: 0 !important; }
.renovation-timeline-active::before {
    width: 14px !important;
    height: 14px !important;
    left: -9px !important;
    box-shadow: 0 0 0 3px var(--orange-soft);
}
.renovation-timeline strong {
    font-family: 'Fredoka', sans-serif;
    color: var(--orange-deep);
    font-size: 1.05rem;
}
.renovation-timeline span { color: var(--ink); font-size: .92rem; }

.newsletter-cta { background: var(--bg); padding-top: 0; }
.renovation-card-cta {
    background: var(--green-deep);
    border: 0;
    color: var(--cream-dark);
    text-align: left;
}
.renovation-card-cta h2 { color: var(--cream-dark); }
.renovation-card-cta p { color: rgba(246,234,208,.88); }
.renovation-card-cta .kicker { color: var(--orange-bright); }
.renovation-card-cta .kicker::before { background: var(--orange-bright); }
.cta-newsletter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 460px;
    margin: 16px 0 0;
}
.cta-newsletter input {
    flex: 1;
    min-width: 200px;
    border: 0;
    background: rgba(255,255,255,.1);
    color: var(--cream-dark);
    padding: 12px 16px;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: .95rem;
    outline: none;
    min-height: 48px;
}
.cta-newsletter input::placeholder { color: rgba(246,234,208,.5); }

/* ============================================================
   BOOKING FLOW (book / book2 / guest-details / success)
   Same selectors, retuned to the new system.
   ============================================================ */
.page-booking { background: var(--bg); }
.page-booking .booking-main { padding-bottom: 96px; }
.booking-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: 10px 16px;
    background: rgba(250,243,227,.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.booking-header h1 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: 0;
}
.booking-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s;
}
.booking-back:hover { background: var(--orange-soft); text-decoration: none; }
.booking-summary {
    margin: 14px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.booking-summary-img { aspect-ratio: 16/9; max-height: 170px; border-radius: 0; }
.booking-summary-body { padding: 20px; }
.booking-eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .68rem;
    font-weight: 600;
    color: var(--orange-deep);
    margin: 0 0 6px;
}
.booking-summary-body h2 { font-size: 1.3rem; margin: 0 0 8px; color: var(--ink); }
.booking-meta { font-size: .85rem; color: var(--ink-soft); margin: 0 0 14px; }
.booking-summary-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 2px dashed var(--line);
}
.booking-summary-price > div { display: flex; align-items: baseline; gap: 8px; }
.booking-summary-price strong {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.7rem;
    color: var(--orange-deep);
    font-weight: 700;
}
.booking-special-tag {
    background: var(--green-deep);
    color: var(--cream-dark);
    font-family: 'Fredoka', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 6px 11px;
    border-radius: var(--radius-pill);
}
.booking-step {
    margin: 14px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}
.booking-step h3 {
    font-size: 1.05rem;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--orange);
    color: #fff;
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.booking-substep { font-size: .82rem; color: var(--ink-soft); margin: -4px 0 12px; }
.date-scroller {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 4px 0;
    margin: 0;
    scrollbar-width: none;
}
.date-scroller::after { content: ''; flex: 0 0 4px; }
.date-scroller::-webkit-scrollbar { display: none; }
.date-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 64px;
    padding: 12px 8px;
    border: 2px solid var(--line);
    background: var(--card);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.date-pill:hover { border-color: var(--orange); }
.date-pill.is-active {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 3px 0 var(--orange-edge);
}
.date-pill-dow { font-size: .72rem; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; opacity: .8; }
.date-pill-day { font-family: 'Fredoka', sans-serif; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.date-pill-mon { font-size: .72rem; text-transform: uppercase; font-weight: 600; opacity: .8; }
.time-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.time-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    border: 2px solid var(--line);
    background: var(--card);
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    transition: border-color .15s ease, background-color .15s ease;
}
.time-chip:hover:not(:disabled) { border-color: var(--orange); }
.time-chip.is-active {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    box-shadow: 0 3px 0 var(--orange-edge);
}
.time-chip strong { font-family: 'Fredoka', sans-serif; font-size: .85rem; font-weight: 600; }
.time-chip span { font-size: .78rem; opacity: .8; }
.time-chip.is-past {
    opacity: .45;
    cursor: not-allowed;
    background: var(--bg-soft);
    border-color: var(--line);
    text-decoration: none;
}
.guests-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 0;
}
.guests-counter button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--orange);
    background: var(--card);
    color: var(--orange-deep);
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
}
.guests-counter button:hover { background: var(--orange-soft); }
.guests-counter button:active { transform: scale(.94); }
.guests-count {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    min-width: 40px;
    text-align: center;
}
.booking-fields { display: flex; flex-direction: column; gap: 16px; }
.booking-fields label { display: block; font-size: .85rem; color: var(--ink); font-weight: 600; }
.booking-fields label > span { display: block; margin-bottom: 8px; }
.booking-fields label em { color: #b3261e; font-style: normal; }
.booking-fields input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
    background: var(--bg);
    outline: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.booking-fields input:focus { border-color: var(--orange); background: var(--card); }
.booking-fields input::placeholder { color: var(--ink-mute); }
.booking-trust {
    margin: 14px 16px;
    padding: 20px;
    background: var(--bg-soft);
    border-radius: var(--radius);
}
.booking-trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.booking-trust strong {
    display: block;
    font-family: 'Fredoka', sans-serif;
    font-size: .9rem;
    color: var(--ink);
    margin-bottom: 2px;
}
.booking-trust span { font-size: .85rem; color: var(--ink-soft); }
.booking-spacer { height: 90px; }
.booking-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px rgba(36,27,16,.07);
}
.booking-bar-price small { display: block; font-size: .78rem; color: var(--ink-mute); margin-bottom: 2px; white-space: nowrap; }
.booking-bar-price strong {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.4rem;
    color: var(--orange-deep);
    font-weight: 700;
    line-height: 1;
}
.booking-bar .btn {
    flex: 1;
    min-width: 140px;
    max-width: 240px;
    min-height: 52px;
    padding: 14px 20px;
    white-space: nowrap;
}
.booking-bar .btn.is-disabled, .booking-bar .btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
@media (max-width: 340px) { .booking-bar-price strong { font-size: 1.2rem; } }

/* Success page */
.booking-success-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background: var(--bg);
}
.booking-success-card {
    max-width: 480px;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px 26px;
    box-shadow: var(--shadow-md);
    text-align: center;
}
.booking-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    background: var(--green-deep);
    color: var(--cream-dark);
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 700;
}
.booking-success-card h1 { font-size: 1.7rem; line-height: 1.1; letter-spacing: 0; margin: 0 0 10px; color: var(--ink); }
.booking-success-lede { color: var(--ink-soft); font-size: .95rem; margin: 0 0 24px; }
.booking-preview-banner {
    background: var(--bg-soft);
    border: 1px solid var(--orange);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 0 0 22px;
    text-align: left;
    font-size: .85rem;
    color: var(--ink-soft);
}
.booking-preview-banner strong {
    display: block;
    font-family: 'Fredoka', sans-serif;
    color: var(--orange-deep);
    margin-bottom: 4px;
}
.booking-preview-banner code {
    background: rgba(0,0,0,.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .82rem;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.booking-success-details {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    text-align: left;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.booking-success-details li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px dashed var(--line);
    font-size: .9rem;
}
.booking-success-details li:last-child { border-bottom: 0; }
.booking-success-details strong { font-family: 'Fredoka', sans-serif; color: var(--ink); font-weight: 600; font-size: .85rem; }
.booking-success-details span { color: var(--ink-soft); text-align: right; word-break: break-word; }
.booking-success-info {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    text-align: left;
    border-top: 1px solid var(--line);
}
.booking-success-info li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.booking-success-info strong {
    display: block;
    font-family: 'Fredoka', sans-serif;
    font-size: .9rem;
    color: var(--ink);
    margin-bottom: 4px;
}
.booking-success-info span { font-size: .85rem; color: var(--ink-soft); }
.booking-success-info a { font-weight: 600; }
.booking-success-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.booking-qr {
    margin: 0 0 22px;
    padding: 20px;
    background: var(--bg-soft);
    border-radius: var(--radius);
    text-align: center;
}
.booking-qr-label { font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.booking-qr img {
    display: block;
    margin: 0 auto 12px;
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}
.booking-qr .muted { font-size: .82rem; margin: 0; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }

/* ============================================================
   TABLET >= 720px
   ============================================================ */
@media (min-width: 720px) {
    .container { padding: 0 28px; }
    section { padding: 80px 0; }
    .section-head { margin-bottom: 44px; }

    .promo-banner { font-size: .85rem; }
    .promo-inner {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
    }
    .promo-link { min-height: 44px; padding: 0 16px; margin-left: 0; }
    .nav { padding: 12px 28px; }
    .logo { font-size: 1.3rem; }

    .hero-inner { padding: 0 28px 72px; }
    .hero-lede { max-width: 44ch; }
    .hero-ctas .btn-primary { flex: 0 1 auto; }

    .about-inner { grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 56px; }
    .wonder-collage { max-width: 440px; }

    .care-facts { grid-template-columns: 1fr 1fr; gap: 0 40px; }

    .approach-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1080px; }

    .location-grid { grid-template-columns: 1fr 1fr; }
    .location-photo { aspect-ratio: 16 / 10; }

    .carousel { padding: 0 52px; }
    .carousel-track { grid-template-columns: 1fr 1fr; gap: 20px; }
    .carousel-prev { left: 0; }
    .carousel-next { right: 0; }

    .ticket-card { padding: 34px 30px; }
    .ticket-price { flex-direction: row; align-items: center; gap: 24px; }
    .ticket-price-tag { flex: 0 0 auto; }

    .testimonial-row { margin: 0; padding: 4px 0 8px; }
    .testimonial { flex: 0 0 calc(50% - 7px); }

    .insta-grid { margin: 0; padding: 0 0 8px; }
    .insta-tile { flex: 0 0 calc(33.33% - 6px); max-width: none; }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }

    .home-book-bar { display: none; }
    body.page-home .site-footer { padding-bottom: 24px; }
    body.page-home { padding-bottom: 0; }

    .nap-grid { grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
    .location-map iframe { min-height: 340px; }
    .renovation-card { padding: 40px 36px; }

    .time-grid { grid-template-columns: repeat(3, 1fr); }
    .booking-bar { padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); }
    .booking-bar .btn { max-width: 320px; }
    .booking-main { max-width: 720px; margin: 0 auto; }
}

/* ============================================================
   DESKTOP >= 1024px
   ============================================================ */
@media (min-width: 1024px) {
    /* Align fixed booking-bar contents with the centered 720px form column */
    .booking-bar {
        padding-left: max(24px, calc((100vw - 688px) / 2));
        padding-right: max(24px, calc((100vw - 688px) / 2));
    }

    section { padding: 104px 0; }
    .section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .section-head .kicker::before { display: inline-block; }

    .nav-links {
        display: flex;
        position: static;
        flex-direction: row;
        gap: 20px;
        align-items: center;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .nav-links a {
        padding: 0;
        border-bottom: 0;
        font-size: .82rem;
        font-weight: 500;
        letter-spacing: .02em;
        white-space: nowrap;
    }
    .nav-links .nav-cta { padding: 10px 20px; margin: 0; font-size: .85rem; min-height: 44px; display: inline-flex; align-items: center; }
    .nav-toggle { display: none; }

    .hero { min-height: 88vh; }
    .hero-bg {
        background:
            linear-gradient(90deg, rgba(28,19,10,.45), transparent 55%),
            linear-gradient(180deg, rgba(28,19,10,.4) 0%, rgba(28,19,10,0) 30%, rgba(28,19,10,.05) 60%, rgba(28,19,10,.7) 100%);
    }
    .hero-inner {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 28px 88px;
    }
    .hero-lede { font-size: 1.15rem; }

    .wonder-collage { max-width: 500px; }

    .care-facts { max-width: 1080px; margin: 0 auto; }

    .location-photo { aspect-ratio: 16 / 9; }

    .carousel-track { grid-template-columns: repeat(3, 1fr); gap: 24px; }

    .testimonial { flex: 0 0 calc(33.33% - 10px); }

    .insta-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
        gap: 10px;
    }
    .insta-tile { aspect-ratio: 1; width: auto; flex: none; max-width: none; }

    .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: 36px; }

    .ticket-grid:not(.ticket-grid-single) { grid-template-columns: 1fr 1fr; }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}